// Footer.jsx — gifting-led footer with working nav
function Footer() {
  const cols = [
    { title: 'Gifting', links: [
      { label: 'Same-Day Gifting', go: () => window.bbScrollTo('same-day') },
      { label: 'Corporate & Bulk', go: () => window.bbEnquire('Corporate gifting') },
      { label: 'Wedding Favours', go: () => window.bbEnquire('Wedding favours') },
      { label: 'Events & Parties', go: () => window.bbEnquire('Events & parties') }
    ]},
    { title: 'Explore', links: [
      { label: 'New Chocolates', go: () => window.bbScrollTo('collection') },
      { label: 'The Wrap', go: () => window.bbScrollTo('packaging') },
      { label: 'Our Story', go: () => window.bbScrollTo('journey') },
      { label: 'Kind Words', go: () => window.bbScrollTo('press') }
    ]},
    { title: 'Care', links: [
      { label: 'Track via WhatsApp', go: () => window.open('https://wa.me/919557284086', '_blank') },
      { label: 'Delivery & Returns', go: () => window.bbScrollTo('enquiry') },
      { label: 'Storage Care', go: () => window.bbScrollTo('journey') },
      { label: 'Contact', go: () => window.bbEnquire('') }
    ]}
  ];
  return (
    <footer style={{ background: 'var(--bb-burgundy-deep)', color: 'var(--bb-gold-light)', padding: '80px 32px 36px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr 1fr', gap: 48 }} className="bb-footer-grid">
        <div>
          <div style={{ fontFamily: 'var(--font-script)', fontSize: 56, lineHeight: 0.85, color: 'var(--bb-gold-light)', marginBottom: 16 }}>Blissful Bites</div>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.6, color: 'rgba(225,200,146,0.72)', maxWidth: 320, margin: '0 0 22px' }}>
            Dryfruit-loaded chocolates for same-day gifting, corporate hampers, weddings, and the celebrations in between.
          </p>
          <button className="btn btn-foil" onClick={() => window.bbEnquire('')} style={{ padding: '13px 22px' }}>Start an Enquiry →</button>
          <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
            {['IG', 'FB', 'PI', 'YT'].map((s) => (
              <a key={s} href="#" onClick={(e) => e.preventDefault()} style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid rgba(225,200,146,0.3)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--bb-gold-light)', cursor: 'pointer', textDecoration: 'none' }}>{s}</a>
            ))}
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.title}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.3em', color: 'var(--bb-gold)', marginBottom: 18 }}>{c.title.toUpperCase()}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              {c.links.map((l) => (
                <li key={l.label}>
                  <button onClick={l.go} style={{ fontFamily: 'var(--font-serif)', fontSize: 16, color: 'rgba(225,200,146,0.85)', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}>{l.label}</button>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1280, margin: '56px auto 0', borderTop: '1px solid rgba(225,200,146,0.15)', paddingTop: 28 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.3em', color: 'var(--bb-gold)', marginBottom: 16 }}>CERTIFIED &amp; REGISTERED</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
          {[
            { label: 'FSSAI Licensed', value: 'Lic. No. 1XXXX XXXX XXXXX' },
            { label: 'GST Registered', value: 'GSTIN 27XXXXX XXXX X1ZX' },
            { label: 'MSME · Udyam', value: 'UDYAM-MH-XX-XXXXXXX' }
          ].map((c) => (
            <div key={c.label} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 16px', background: 'rgba(225,200,146,0.07)', border: '1px solid rgba(225,200,146,0.28)', borderRadius: 10 }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--bb-gold)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ flex: '0 0 auto' }}>
                <path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3Z" /><path d="m9 12 2 2 4-4" />
              </svg>
              <div style={{ lineHeight: 1.25 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--bb-gold-light)', textTransform: 'uppercase' }}>{c.label}</div>
                <div style={{ fontFamily: 'var(--font-ui)', fontSize: 12, letterSpacing: '0.04em', color: 'rgba(225,200,146,0.72)', fontVariantNumeric: 'tabular-nums' }}>{c.value}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ maxWidth: 1280, margin: '28px auto 0', borderTop: '1px solid rgba(225,200,146,0.15)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.26em', color: 'rgba(225,200,146,0.5)' }}>
        <div>© 2026 BLISSFUL BITES PVT. LTD. · MUMBAI</div>
        <div>HAND-ROLLED · SLOW-SET · GIFTED WITH CARE</div>
      </div>
      <style>{`
        @media (max-width: 860px) { .bb-footer-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 520px) { .bb-footer-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;