const Footer = () => {
  const cols = [
    {
      title: 'Shop',
      items: [
        { label: 'All Cookies', href: SITE.live.allCookies, external: true },
        { label: 'All Flavors', href: SITE.live.allFlavors, external: true },
        { label: 'Original Cookie', href: SITE.products.original, external: true },
        { label: 'Chocolate Cookie', href: SITE.products.chocolate, external: true },
      ],
    },
    {
      title: 'Club',
      items: [
        { label: 'Cookie Craving Club', href: SITE.local.club },
        { label: 'How the Club Works', href: SITE.local.club + '#how' },
        { label: 'Gift the Club', href: SITE.local.gift + '#builder' },
        { label: 'Live Club Landing', href: SITE.live.club, external: true },
      ],
    },
    {
      title: 'Gifting',
      items: [
        { label: 'Gift Boxes', href: SITE.local.gift },
        { label: 'Bulk & Corporate', href: SITE.local.corporate },
        { label: 'Get in Touch', href: SITE.live.contact, external: true },
      ],
    },
    {
      title: 'About',
      items: [
        { label: 'Our Story', href: SITE.local.about },
        { label: 'Visit Rosie’s Place', href: SITE.local.visit },
        { label: 'Corporate Gifting', href: SITE.live.corporate, external: true },
      ],
    },
  ];
  return (
    <footer style={{ background: 'var(--brown-900)', color: 'var(--cream-100)', padding: '72px 0 24px' }}>
      <div className="container">
        <div className="foot-grid" style={{
          display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 40, marginBottom: 48,
        }}>
          <div>
            <Logo size={0.55} invert/>
            <p style={{ marginTop: 18, fontSize: 14, lineHeight: 1.6, opacity: 0.7, maxWidth: 280 }}>
              Home of the original Gooey Butter Cookie. Baked fresh daily at Rosie's Place.
            </p>
            <div style={{ display: 'grid', gap: 8, fontSize: 13.5, opacity: 0.8 }}>
              <a href={SITE.contact.map} {...EXTERNAL_LINK_PROPS}>{SITE.contact.address1}<br/>{SITE.contact.address2}</a>
              <a href={'tel:' + SITE.contact.phone.replace(/[^0-9]/g, '')}>{SITE.contact.phone}</a>
              <a href={'mailto:' + SITE.contact.email}>{SITE.contact.email}</a>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              {[
                { name: 'instagram', label: 'Instagram', href: SITE.social.instagram },
                { name: 'facebook',  label: 'Facebook',  href: SITE.social.facebook },
              ].map((s, i) => (
                <a key={i} href={s.href} aria-label={s.label} {...EXTERNAL_LINK_PROPS}
                  style={{
                    width: 38, height: 38, borderRadius: 999,
                    border: '1px solid rgba(255,255,255,.18)',
                    background: 'rgba(255,255,255,.04)',
                    display: 'grid', placeItems: 'center',
                    color: 'var(--cream-100)', transition: 'all .18s ease',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--cream-50)'; e.currentTarget.style.color = 'var(--brown-900)'; e.currentTarget.style.borderColor = 'var(--cream-50)'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,.04)'; e.currentTarget.style.color = 'var(--cream-100)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,.18)'; }}
                >
                  <Icon name={s.name} size={17} strokeWidth={1.7}/>
                </a>
              ))}
            </div>
          </div>
          {cols.map((c, i) => (
            <div key={i}>
              <div className="eyebrow" style={{ color: 'var(--brown-300)', marginBottom: 14 }}>{c.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
                {c.items.map((it, j) => (
                  <li key={j}>
                    <a href={it.href} {...(it.external ? EXTERNAL_LINK_PROPS : {})} style={{ fontSize: 14, opacity: 0.78 }}>{it.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          borderTop: '1px solid rgba(255,255,255,.1)', paddingTop: 22,
          display: 'flex', justifyContent: 'space-between', fontSize: 12.5, opacity: 0.6, flexWrap: 'wrap', gap: 12,
        }}>
          <span>© 2026 Gooey Butter Cookies · Rosie's Place</span>
          <span style={{ display: 'flex', gap: 20 }}>
            <a href={SITE.live.terms} {...EXTERNAL_LINK_PROPS}>Terms</a>
            <a href={SITE.live.privacy} {...EXTERNAL_LINK_PROPS}>Privacy</a>
            <a href={SITE.live.refund} {...EXTERNAL_LINK_PROPS}>Refunds</a>
            <a href={SITE.live.contact} {...EXTERNAL_LINK_PROPS}>Contact</a>
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>
  );
};

Object.assign(window, { Footer });