// Footer
function Footer() {
  return (
    <footer style={{
      background: "var(--navy-950)",
      color: "rgba(255,255,255,.65)",
      padding: "60px 0 28px",
      borderTop: "1px solid rgba(255,255,255,.08)"
    }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          gap: 40,
          paddingBottom: 40,
          borderBottom: "1px solid rgba(255,255,255,.08)"
        }} className="foot-grid">
          {/* Brand */}
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16, color: "#fff", fontSize: 18, fontWeight: 600 }}>
              <IconLogo size={26} />
              BinGest
            </div>
            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6, color: "rgba(255,255,255,.6)", maxWidth: 320 }}>O sistema brasileiro que substitui a planilha de obra. Focado em construção civil pequena e média.



            </p>
            <div style={{ marginTop: 18, display: "flex", alignItems: "center", gap: 8, fontSize: 12.5 }}>
              <IconBrazil size={16} style={{ color: "var(--green-500)" }} />
              
            </div>
          </div>

          {/* Product */}
          <FootCol title="Produto" items={[
          { l: "Demo ao vivo", href: "#demo" },
          { l: "Planilha vs BinGest", href: "#perda" },
          { l: "Para empreiteiros", href: "#dois-mundos" },
          { l: "Para autônomos", href: "#dois-mundos" },
          { l: "Preços", href: "#precos" }]
          } />

          {/* Empresa */}
          <FootCol title="Empresa" items={[
          { l: "Sobre", href: "#" },
          { l: "Termos", href: "#" },
          { l: "Privacidade", href: "#" }]
          } />

          {/* Suporte */}
          <FootCol title="Suporte" items={[
          { l: "Central de ajuda", href: "#" },
          { l: "WhatsApp · (62) 9 9999-9999", href: "#" },
          { l: "suporte@bingest.com.br", href: "mailto:suporte@bingest.com.br" }]
          } />
        </div>

        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginTop: 22, fontSize: 12, color: "rgba(255,255,255,.5)", flexWrap: "wrap", gap: 8
        }}>
          <span>© 2026 BinGest — bingest.com.br </span>
          <span>Todos os direitos reservados</span>
        </div>
      </div>

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

}

function FootCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontSize: 12, fontWeight: 600, letterSpacing: ".1em",
        textTransform: "uppercase", color: "rgba(255,255,255,.45)",
        marginBottom: 14
      }}>{title}</div>
      <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 9 }}>
        {items.map((it) =>
        <li key={it.l}>
            <a href={it.href} style={{
            color: "rgba(255,255,255,.75)",
            textDecoration: "none",
            fontSize: 13.5
          }}>{it.l}</a>
          </li>
        )}
      </ul>
    </div>);

}

window.Footer = Footer;