const Footer = ({ go }) => {
  const cols = [
    {
      title: "Group",
      items: [
        { label: "About Tamak", k: "home" },
        { label: "Our brand", k: "logo" },
        { label: "Sustainability", k: "home" },
        { label: "Newsroom", k: "home" },
      ],
    },
    {
      title: "Brands",
      items: BRANDS.map(b => ({ label: b.name, k: b.key === "yadea" ? "yadea" : `brand-${b.key}` })),
    },
    {
      title: "Business",
      items: [
        { label: "B2B solutions", k: "b2b" },
        { label: "Posterita POS", k: "b2b" },
        { label: "Distribution & logistics", k: "b2b" },
        { label: "Yadea fleets", k: "yadea" },
        { label: "Partnerships", k: "contact" },
      ],
    },
    {
      title: "Help",
      items: [
        { label: "Find a store", k: "contact" },
        { label: "Customer service", k: "contact" },
        { label: "Careers", k: "careers" },
        { label: "Press", k: "contact" },
        { label: "FAQ", k: "contact" },
      ],
    },
  ];

  return (
    <footer style={{ background: "var(--ink)", color: "var(--paper)", paddingTop: 96, marginTop: 80 }}>
      <div className="shell-wide" style={{ padding: "0 32px" }}>
        {/* Big wordmark */}
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 2fr", gap: 80, paddingBottom: 64, borderBottom: "1px solid rgba(244,239,230,0.18)" }} className="footer-top">
          <div>
            <window.TamakLogo size={44} variant="horizontal" color="white" />
            <div style={{ marginTop: 32, fontFamily: "var(--f-display)", fontSize: "clamp(60px, 9vw, 140px)", fontWeight: 600, letterSpacing: "-0.04em", lineHeight: 0.85, marginBottom: 24 }}>
              Let's<br />
              <span className="serif" style={{ fontStyle: "italic", color: "var(--orange)" }}>build</span><br />
              together.
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a onClick={() => go("contact")} className="btn btn-orange btn-lg" style={{ cursor: "pointer" }}>
                Get in touch <Icon.ArrowRight size={14} />
              </a>
              <a onClick={() => go("careers")} className="btn btn-ghost btn-lg" style={{ cursor: "pointer", color: "var(--paper)", borderColor: "rgba(244,239,230,0.3)" }}>
                Work with us
              </a>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }} className="footer-cols">
            {cols.map((c) => (
              <div key={c.title}>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(244,239,230,0.5)", marginBottom: 16 }}>
                  {c.title}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {c.items.map((it) => (
                    <a key={it.label} onClick={() => go(it.k)} style={{ fontSize: 14, color: "rgba(244,239,230,0.85)", cursor: "pointer" }}>
                      {it.label}
                    </a>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Contact + meta */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, padding: "48px 0", borderBottom: "1px solid rgba(244,239,230,0.18)" }} className="footer-meta">
          <div>
            <Eyebrow color="rgba(244,239,230,0.5)">Headquarters</Eyebrow>
            <div style={{ marginTop: 8, fontSize: 14, color: "rgba(244,239,230,0.85)", lineHeight: 1.5 }}>
              2, Royal Road, Coromandel<br />
              71625, Port Louis<br />
              Republic of Mauritius
            </div>
          </div>
          <div>
            <Eyebrow color="rgba(244,239,230,0.5)">Talk to us</Eyebrow>
            <div style={{ marginTop: 8, fontSize: 14, color: "rgba(244,239,230,0.85)", lineHeight: 1.7 }}>
              +230 2330020<br />
              tamak@tamak.com
            </div>
          </div>
          <div>
            <Eyebrow color="rgba(244,239,230,0.5)">Hours</Eyebrow>
            <div style={{ marginTop: 8, fontSize: 14, color: "rgba(244,239,230,0.85)", lineHeight: 1.7 }}>
              Mon–Fri · 9am – 6pm<br />
              Sat · 10am – 4pm
            </div>
          </div>
          <div>
            <Eyebrow color="rgba(244,239,230,0.5)">Subscribe</Eyebrow>
            <div style={{ marginTop: 8, display: "flex", gap: 0, background: "rgba(244,239,230,0.08)", borderRadius: 999, padding: 4, border: "1px solid rgba(244,239,230,0.15)" }}>
              <input
                type="email"
                placeholder="your@email.com"
                style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--paper)", padding: "8px 14px", fontFamily: "var(--f-body)", fontSize: 13 }}
              />
              <button style={{ background: "var(--orange)", color: "white", border: "none", padding: "8px 16px", borderRadius: 999, fontSize: 12, fontFamily: "var(--f-mono)", letterSpacing: "0.08em", textTransform: "uppercase", cursor: "pointer" }}>
                Join
              </button>
            </div>
          </div>
        </div>

        {/* Bottom row */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "32px 0", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(244,239,230,0.5)", flexWrap: "wrap", gap: 16 }}>
          <div>© 1983 – 2026 Tamak Group. All rights reserved. Honouring your trust.</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a>Privacy</a>
            <a>Terms</a>
            <a>Cookies</a>
            <a>Modern slavery statement</a>
          </div>
        </div>

        {/* Massive wordmark */}
          <div aria-hidden style={{ overflow: "hidden", padding: "0 0 24px" }}>
          <div style={{ fontFamily: "var(--f-display)", fontSize: "clamp(120px, 22vw, 380px)", fontWeight: 700, letterSpacing: "-0.06em", lineHeight: 0.85, color: "rgba(244,239,230,0.06)", textAlign: "center", whiteSpace: "nowrap" }}>
            Tamak
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .footer-top { grid-template-columns: 1fr !important; gap: 48px !important; }
          .footer-cols { grid-template-columns: 1fr 1fr !important; }
          .footer-meta { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </footer>
  );
};

window.Footer = Footer;