// Footer — closing strip.
function Footer({ onNavigate }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const h = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener("resize", h);
    return () => window.removeEventListener("resize", h);
  }, []);

  return (
    <footer style={{
      position: "relative",
      background: "var(--void)",
      padding: isMobile ? "48px 0 28px" : "64px 0 32px",
      borderTop: "1px solid var(--line)",
    }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr 1fr" : "1.4fr 1fr 1fr 1fr",
          gap: isMobile ? 32 : 48,
          marginBottom: isMobile ? 36 : 48,
        }}>
          {/* Brand col — full width on mobile */}
          <div style={{ gridColumn: isMobile ? "1 / -1" : "auto" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <img src="./assets/logo-white.svg" alt="" style={{ width: 36, height: 36 }} />
              <div>
                <div style={{
                  fontFamily: "var(--font-wordmark)", fontWeight: 500,
                  letterSpacing: "0.14em", fontSize: 18, color: "var(--fg-1)",
                }}>FÍSICA</div>
                <div style={{
                  fontFamily: "var(--font-wordmark)", fontWeight: 400,
                  letterSpacing: "0.32em", fontSize: 10, color: "var(--fg-3)",
                }}>ALÉM DO PAPEL</div>
              </div>
            </div>
            <p style={{
              fontSize: 13.5, lineHeight: 1.6, color: "var(--fg-3)",
              maxWidth: 320, marginTop: 16,
            }}>
              Ciência experimental nas mãos de quem nunca teve laboratório.
              Goiânia — Goiás, expandindo para todo o país.
            </p>
          </div>

          <FooterCol title="Projeto" links={[
            { label: "Sobre", href: "./sobre.html" },
            { label: "Missão", href: "./missao.html" },
            { label: "Equipe", href: "./equipe.html" },
          ]} />
          <FooterCol title="Experiências" links={[
            { label: "Catálogo",   href: "./catalogo.html" },
            { label: "Calendário", href: "./calendario.html" },
          ]} />
          <FooterCol title="Conexão" links={[
            { label: "Levar à escola", href: "./levar.html" },
            { label: "Apoiar", href: "./levar.html#apoiar" },
            { label: "Parcerias", href: "./parceria.html" },
            { label: "Contato", href: "./contato.html" },
          ]} />
        </div>

        <div style={{
          paddingTop: 24, borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 16,
          fontFamily: "var(--font-mono)", fontSize: 11,
          color: "var(--fg-3)", letterSpacing: "0.14em", textTransform: "uppercase",
        }}>
          <span>© 2026 · Física Além do Papel · Todos os direitos reservados</span>
          <span style={{ display: "flex", gap: 16 }}>
            <a href="https://instagram.com/fisicaalemdopapel" target="_blank" rel="noopener noreferrer"
              style={{ color: "var(--fg-2)" }}>Instagram</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--plasma-cyan)", letterSpacing: "0.22em",
        textTransform: "uppercase", marginBottom: 18,
      }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {links.map(l => {
          const label = typeof l === "string" ? l : l.label;
          const href = typeof l === "string" ? undefined : l.href;
          return (
            <li key={label}>
              <a href={href} style={{
                fontFamily: "var(--font-display)", fontSize: 14,
                color: "var(--fg-2)", cursor: "pointer",
              }}>{label}</a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

window.Footer = Footer;