function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '80px 0 40px', position: 'relative' }}>
      <div style={{ maxWidth: 1360, margin: '0 auto', padding: '0 40px' }}>

        {/* Big wordmark */}
        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(64px, 12vw, 200px)',
          fontWeight: 500,
          letterSpacing: '-0.045em',
          lineHeight: 0.9,
          color: 'var(--paper)',
          marginBottom: 60,
          position: 'relative',
        }}>
          Sakshi Saurabh<br />
          <span style={{ color: 'var(--steel-dark)' }}>Enterprises<span style={{ color: 'var(--amber)' }}>.</span></span>
        </div>

        {/* Columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, paddingBottom: 60, borderBottom: '1px solid rgba(255,255,255,0.1)' }} className="sse-footer-grid">
          <div>
            {/* Logo in footer */}
            <div style={{ marginBottom: 20 }}>
              <img
                src="assets/sse-logo.png"
                alt="Sakshi Saurabh Enterprises"
                style={{ height: 36, width: 'auto', objectFit: 'contain', filter: 'brightness(0) invert(1)', opacity: 0.85 }}
              />
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--steel)', maxWidth: 380, marginBottom: 16 }}>
              Complete range of flameproof electrical spare parts, plastic and silicone products — manufactured in Silvassa, India. Supplying OEMs and industrial plants globally.
            </p>
            {/* Export badge */}
            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              padding: '6px 14px',
              border: '1px solid rgba(212,160,23,0.35)',
              borderRadius: 999,
              fontFamily: 'var(--font-mono)',
              fontSize: 10,
              letterSpacing: '0.2em',
              color: 'var(--amber)',
              textTransform: 'uppercase',
              marginBottom: 20,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--amber)', flexShrink: 0 }} />
              Made in India · Exporting Globally
            </div>
            <div>
              <Button variant="outlineLight" href="assets/SSE-Brochure.pdf" download style={{ padding: '11px 18px', fontSize: 13 }}>
                Download brochure (PDF) <Arrow />
              </Button>
            </div>
          </div>

          <FooterCol title="Navigate" links={[
            ['About', '#about'],
            ['Products', '#products'],
            ['Industries', '#industries'],
            ['Quality', '#quality'],
            ['Insights', '#insights'],
            ['Contact', '#contact'],
          ]} />

          <FooterCol title="Products" links={PRODUCT_CATEGORIES.map(c => [c.label, '#products'])} />

          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--amber)', textTransform: 'uppercase', marginBottom: 16 }}>
              Contact
            </div>
            <div style={{ fontSize: 13, color: 'var(--steel)', lineHeight: 1.65 }}>
              <div style={{ marginBottom: 12 }}>
                B-6, Krishna Industrial Estate,<br/>
                Amli, Silvassa — 396230<br/>
                India
              </div>
              <a href={`tel:${SSE_INFO.phoneRaw}`} style={{ display: 'block', color: 'var(--paper)', marginBottom: 4 }}>{SSE_INFO.phone}</a>
              <a href={`tel:${SSE_INFO.phoneRaw2}`} style={{ display: 'block', color: 'var(--paper)', marginBottom: 4 }}>{SSE_INFO.phone2}</a>
              <a href={`mailto:${SSE_INFO.email}`} style={{ display: 'block', color: 'var(--paper)' }}>{SSE_INFO.email}</a>
            </div>
          </div>
        </div>

        {/* Bottom bar */}
        <div style={{
          paddingTop: 32,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 16,
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
          letterSpacing: '0.1em',
          color: 'var(--steel-dark)',
          textTransform: 'uppercase',
          flexWrap: 'wrap',
        }}>
          <div>© 2026 Sakshi Saurabh Enterprises · All rights reserved</div>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href="https://www.ssesilvassa.com" style={{ color: 'var(--steel-dark)' }}>www.ssesilvassa.com</a>
            <span style={{ color: 'var(--amber)' }}>● Made in India</span>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1000px) {
          .sse-footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 600px) {
          .sse-footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--amber)', textTransform: 'uppercase', marginBottom: 16 }}>
        {title}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {links.map(([label, href]) => (
          <a key={label} href={href} style={{ fontSize: 13, color: 'var(--steel)', transition: 'color 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--paper)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--steel)'}>
            {label}
          </a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Footer });