// Operação Brasil — rodapé e condições consolidadas
const { LegalNote: FtLegal } = window.OperaOBrasilDesignSystem_ac060f;

function Footer() {
  const stores = ["CAC Armas · GO", "Big Boar · DF", "Canil do Caçador · MG"];
  return (
    <footer id="condicoes-completas" style={{
      padding: "clamp(48px, 6vw, 76px) clamp(20px, 4vw, 62px)",
      background: "var(--black)", borderTop: "1px solid var(--border-soft)",
    }}>
      <div style={{ width: "min(100%, 1200px)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "30px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "24px", flexWrap: "wrap" }}>
          <img src="../../assets/brand/logo-operacao-brasil.png" alt="Operação Brasil" style={{ height: "82px", width: "auto", maxWidth: "100%" }} />
          <div style={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
            {stores.map((store) => (
              <span key={store} className="footer-store" style={{
                fontFamily: "var(--font-mono)", fontSize: "0.72rem", letterSpacing: "0.08em",
                textTransform: "uppercase", color: "var(--text-muted)",
              }}>{store}</span>
            ))}
          </div>
        </div>

        <div className="footer-conditions" style={{
          display: "grid", gridTemplateColumns: "minmax(210px, .7fr) minmax(0, 1.3fr)",
          gap: "clamp(24px, 5vw, 72px)", padding: "28px 0",
          borderTop: "1px solid var(--border-soft)", borderBottom: "1px solid var(--border-soft)",
        }}>
          <div>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: "0.7rem", fontWeight: 800,
              letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--gold-300)",
            }}>* Condições e observações</span>
            <h2 style={{
              margin: "12px 0 0", fontFamily: "var(--font-display)", fontWeight: 900,
              fontSize: "clamp(2rem, 3.5vw, 3.5rem)", lineHeight: 0.9, textTransform: "uppercase",
            }}>Antes de avançar</h2>
          </div>
          <div style={{ display: "grid", gap: "14px" }}>
            <FtLegal icon={false}>
              Modelos, medidas, capacidades, acabamentos e itens apresentados são referências. Confirme a ficha oficial, o produto e o lote com o vendedor.
            </FtLegal>
            <FtLegal icon={false}>
              Preço, estoque, reserva, disponibilidade, prazo, frete, parcelamento e demais vantagens variam por produto, lote, parceiro e momento.
            </FtLegal>
            <FtLegal icon={false}>
              O cadastro inicia o atendimento, mas não garante compra, preço, reserva, disponibilidade ou regularização. Para avançar mais rápido na compra, finalize pelo site. As condições divulgadas na operação são as mesmas nas lojas parceiras participantes, conforme disponibilidade e regras aplicáveis.
            </FtLegal>
          </div>
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "18px", flexWrap: "wrap" }}>
          <p style={{ margin: 0, color: "var(--text-faint)", fontSize: "0.78rem" }}>
            © 2026 Operação Brasil. Todos os direitos reservados.
          </p>
          <nav aria-label="Documentos legais" style={{ display: "flex", gap: "18px", flexWrap: "wrap" }}>
            <a href="../../politica-de-privacidade/" style={{ color: "var(--text-muted)", fontSize: "0.78rem" }}>Política de Privacidade</a>
            <a href="../../termos-de-uso/" style={{ color: "var(--text-muted)", fontSize: "0.78rem" }}>Termos de Uso</a>
          </nav>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;