/* global React */

function Footer() {
  return (
    <footer className="bg-ink" style={{ padding: "80px 0 32px" }}>
      <div className="page">
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 40, marginBottom: 56 }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 4, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 44, letterSpacing: "-0.04em", color: "#FFF" }}>
              Bolder<span style={{ color: "var(--coral)" }}>_</span>
            </div>
            <p style={{ margin: "16px 0 24px", fontSize: 15, color: "rgba(255,255,255,0.65)", maxWidth: "40ch" }}>
              Be Bolder. <span className="wavy">Human-in-the-Loop.</span> Por design.
            </p>
            <HumanVerifiedBadge id="MANIFESTO" />
          </div>

          <FooterCol title="Sistema" links={[
            { label: "Blueprint",     href: "#blueprint" },
            { label: "Be Visual",     href: "#visual" },
            { label: "Be Social",     href: "#social" },
            { label: "Be Cinematic",  href: "#cinematic" },
            { label: "Be Informed",   href: "#social" },
          ]} />
          <FooterCol title="Comercial" links={[
            { label: "Pricing",        href: "#pricing" },
            { label: "Subscrever",     href: "/signup.html" },
            { label: "Pedir proposta", href: "#contact" },
            { label: "Para agências",  href: "/signup.html?pack=agency" },
          ]} />
          <FooterCol title="Estúdio" links={[
            { label: "Manifesto",  href: "#manifesto" },
            { label: "Contacto",   href: "#contact" },
            { label: "LinkedIn",   href: "https://www.linkedin.com/company/106965193/", external: true },
            { label: "Instagram",  href: "https://www.instagram.com/wearebolder.pt/",  external: true },
          ]} />
        </div>

        <div style={{ paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.14)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <span className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>© 2026 Bolder Studio · Lisboa</span>
          <PoweredByBoldy />
          <span className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>
            <a href="/legal/privacy.html" style={{ color: "rgba(255,255,255,0.5)", textDecoration: "none" }}>Privacidade</a>
            {" · "}
            <a href="/legal/terms.html"   style={{ color: "rgba(255,255,255,0.5)", textDecoration: "none" }}>Termos</a>
          </span>
        </div>
      </div>

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

function FooterCol({ title, links }) {
  return (
    <div>
      <span className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>{title}</span>
      <ul style={{ listStyle: "none", padding: 0, margin: "14px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
        {links.map((l, i) => (
          <li key={i}>
            <a
              href={l.href}
              target={l.external ? "_blank" : undefined}
              rel={l.external ? "noopener noreferrer" : undefined}
              style={{ fontSize: 14, color: "rgba(255,255,255,0.85)", textDecoration: "none" }}
            >{l.label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;