/* Guardian Site — Contact (form → WhatsApp) + Footer */

const WA_PHONE = "5581994509609"; // número real do WhatsApp

function ContactSection() {
  const { Input, Textarea, Button, Eyebrow, Badge } = window.SG;
  const [f, setF] = React.useState({ nome: "", condominio: "", whatsapp: "", mensagem: "" });
  const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const msg =
      `Olá! Quero solicitar um diagnóstico de segurança gratuito.\n` +
      `Nome: ${f.nome || "—"}\n` +
      `Condomínio: ${f.condominio || "—"}\n` +
      `WhatsApp: ${f.whatsapp || "—"}\n` +
      `Mensagem: ${f.mensagem || "—"}`;
    window.open(`https://wa.me/${WA_PHONE}?text=${encodeURIComponent(msg)}`, "_blank", "noopener");
  };

  return (
    <window.Section id="contato" bg="deep">
      <window.Container>
        <window.Reveal stagger style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 48, alignItems: "center" }} className="sg-contact-grid">
          <div>
            <Eyebrow>Chamada final</Eyebrow>
            <h2 style={{ margin: "16px 0 0", fontSize: "var(--fs-h1)", fontWeight: 700, lineHeight: "var(--lh-snug)", letterSpacing: "var(--ls-tight)", color: "var(--text-strong)", textWrap: "balance" }}>
              Peça seu diagnóstico de segurança gratuito.
            </h2>
            <p style={{ margin: "18px 0 24px", fontSize: "var(--fs-lead)", color: "var(--text-body)", lineHeight: "var(--lh-normal)" }}>
              Sem compromisso. Avaliamos sua portaria, apontamos riscos de LGPD e mostramos o caminho para a conformidade.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[["message-circle","Resposta rápida pelo WhatsApp"],["shield-check","Diagnóstico sem custo"],["map-pin","Atendimento em Recife e Olinda"]].map(([i,t])=>(
                <div key={t} style={{ display: "flex", alignItems: "center", gap: 11 }}>
                  <i data-lucide={i} style={{ width: 19, height: 19, color: "var(--accent)" }}></i>
                  <span style={{ fontSize: "0.975rem", color: "var(--text-body)" }}>{t}</span>
                </div>
              ))}
            </div>
          </div>

          <form onSubmit={submit} style={{
            background: "var(--glass-bg)", border: "1px solid var(--glass-border)", borderRadius: "var(--r-lg)",
            padding: "var(--sp-6)", boxShadow: "var(--shadow-card), var(--inset-hair)",
            display: "flex", flexDirection: "column", gap: 16,
          }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="sg-form-row">
              <Input label="Nome" icon="user" placeholder="Seu nome" value={f.nome} onChange={set("nome")} />
              <Input label="Condomínio" icon="building-2" placeholder="Nome do condomínio" value={f.condominio} onChange={set("condominio")} />
            </div>
            <Input label="WhatsApp" icon="phone" placeholder="(81) 9 0000-0000" value={f.whatsapp} onChange={set("whatsapp")} />
            <Textarea label="Mensagem" rows={3} placeholder="Conte sobre a sua portaria" value={f.mensagem} onChange={set("mensagem")} />
            <Button type="submit" variant="primary" size="lg" iconLeft="message-circle" fullWidth>Enviar pelo WhatsApp</Button>
            <p style={{ margin: 0, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)" }}>
              O envio abre o WhatsApp com a mensagem preenchida.
            </p>
          </form>
        </window.Reveal>
      </window.Container>
    </window.Section>
  );
}

function Footer() {
  const cols = [
    ["Contato", [["Solicitar diagnóstico", "#contato"], ["WhatsApp", "#contato"], ["comercial@safeguardianrecife.com", "mailto:comercial@safeguardianrecife.com"], ["LinkedIn", "#"]]],
    ["Soluções", [["Guardian Portaria", "#produto"], ["Monitoramento 24h", "#produto"], ["Integração API Recintos", "#produto"], ["Adequação LGPD", "#produto"]]],
    ["Empresa", [["O problema", "#problema"], ["Por que a SafeGuardian", "#pilares"], ["Cases", "#cases"], ["Como funciona", "#como"]]],
  ];
  return (
    <footer style={{ background: "var(--bg-page)", borderTop: "1px solid var(--border-subtle)", paddingTop: "var(--sp-8)", paddingBottom: "var(--sp-6)" }}>
      <window.Container>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 36 }} className="sg-footer-grid">
          <div>
            <window.Logo size={34} />
            <p style={{ margin: "16px 0 0", fontSize: "0.9rem", color: "var(--text-muted)", lineHeight: "var(--lh-normal)", maxWidth: "30ch" }}>
              Cibersegurança e portaria inteligente para condomínios. Recife · Olinda · Região Metropolitana.
            </p>
            <p style={{ margin: "14px 0 0", fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-muted)" }}>
              CNPJ 50.997.804/0001-85
            </p>
          </div>
          {cols.map(([title, links]) => (
            <div key={title}>
              <h4 style={{ margin: "0 0 14px", fontSize: "0.8rem", textTransform: "uppercase", letterSpacing: ".12em", color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>{title}</h4>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 9 }}>
                {links.map(([t, h]) => (
                  <li key={t}><a href={h} style={{ fontSize: "0.925rem", color: "var(--text-body)", textDecoration: "none" }}
                    onMouseEnter={(e)=>e.currentTarget.style.color="var(--accent)"}
                    onMouseLeave={(e)=>e.currentTarget.style.color="var(--text-body)"}>{t}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: "var(--sp-7)", paddingTop: "var(--sp-5)", borderTop: "1px solid var(--border-subtle)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span style={{ fontSize: "0.85rem", color: "var(--text-muted)" }}>© 2026 SafeGuardian. Todos os direitos reservados.</span>
          <span style={{ fontSize: "0.85rem", color: "var(--text-muted)", display: "inline-flex", gap: 16 }}>
            <a href="#" style={{ color: "var(--text-muted)", textDecoration: "none" }}>Política de Privacidade</a>
            <a href="#" style={{ color: "var(--text-muted)", textDecoration: "none" }}>LGPD</a>
          </span>
        </div>
      </window.Container>
    </footer>
  );
}

Object.assign(window, { ContactSection, Footer });