/* Guardian Site — Problem (LGPD urgency) + Pillars + Product */

function ProblemSection() {
  const { SectionHeading, StatBlock, Badge } = window.SG;
  const stats = [
    ["R$ 50 mi", "multa máxima da LGPD"],
    ["2026–27", "biometria é prioridade de fiscalização da ANPD"],
    ["+47%", "crescimento do facial em condomínios (2022–2024)"],
    ["266 mil+", "redes de câmeras com facial no Brasil"],
  ];
  return (
    <window.Section id="problema" bg="deep">
      <window.Container>
        <window.Reveal style={{ maxWidth: "56rem" }}>
          <Badge tone="danger" icon="triangle-alert">Risco jurídico</Badge>
          <h2 style={{
            margin: "18px 0 0", fontSize: "var(--fs-h1)", fontWeight: 700, lineHeight: "var(--lh-snug)",
            letterSpacing: "var(--ls-tight)", color: "var(--text-strong)", textWrap: "balance",
          }}>
            O reconhecimento facial explodiu. <span style={{ color: "var(--accent)" }}>A conta da LGPD está chegando.</span>
          </h2>
          <p style={{ margin: "18px 0 0", fontSize: "var(--fs-lead)", lineHeight: "var(--lh-normal)", color: "var(--text-body)", maxWidth: "60ch" }}>
            Câmeras e controle facial captam dados pessoais sensíveis. A maioria é instalada por equipes sem competência em proteção de dados — uma porta aberta para vazamento e multa.
          </p>
        </window.Reveal>
        <window.Reveal stagger style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }} className="sg-stats">
          {stats.map(([v, l]) => (
            <div key={v} style={{ paddingTop: 20, borderTop: "2px solid var(--border-line)" }}>
              <StatBlock value={v} label={l} />
            </div>
          ))}
        </window.Reveal>
      </window.Container>
    </window.Section>
  );
}

function PillarsSection() {
  const { SectionHeading, PillarCard } = window.SG;
  const pillars = [
    ["users", "Equipe de cibersegurança", "Quem instala entende de redes e ameaças. Não é instalador comum."],
    ["wrench", "Equipamento de ponta com garantia de troca", "Se der defeito, a SafeGuardian troca. Você nunca fica na mão."],
    ["network", "Rede blindada + LGPD", "Criptografia, segmentação, consentimento, retenção e RIPD documentados."],
    ["graduation-cap", "Suporte e treinamento", "Porteiro treinado e suporte técnico sempre por perto."],
  ];
  return (
    <window.Section id="pilares" bg="surface">
      <window.Container>
        <window.Reveal>
          <SectionHeading
            eyebrowItems={["Por que a SafeGuardian"]}
            title="Quatro razões para ser a opção mais séria da região."
            align="left"
          />
        </window.Reveal>
        <window.Reveal stagger style={{ marginTop: 44, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }} className="sg-pillars">
          {pillars.map(([icon, t, d]) => (
            <PillarCard key={t} icon={icon} title={t}>{d}</PillarCard>
          ))}
        </window.Reveal>
      </window.Container>
    </window.Section>
  );
}

function ProductSection() {
  const { Card, Button, Badge, Eyebrow } = window.SG;
  const included = [
    ["scan-face", "Reconhecimento facial e software de cadastro de moradores, visitantes e entregas."],
    ["cctv", "Câmeras integradas e treinamento do porteiro."],
    ["network", "Segurança da rede (cibersegurança) e conformidade LGPD."],
    ["wrench", "Garantia de manutenção e troca de equipamento em caso de defeito."],
  ];
  const parallel = [
    ["monitor-dot", "Monitoramento 24h", "Opcional — vigilância contínua da operação."],
    ["plug", "Integração API Recintos", "Para indústria — integração com a Receita Federal."],
    ["file-check-2", "Adequação LGPD", "Para quem já tem facial instalado."],
  ];
  return (
    <window.Section id="produto" bg="deep">
      <window.Container>
        <window.Reveal stagger style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "start" }} className="sg-product-grid">
          <div>
            <Eyebrow>Produto principal</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" }}>
              Guardian Portaria — a portaria presencial mais segura e em conformidade.
            </h2>
            <p style={{ margin: "16px 0 24px", fontSize: "var(--fs-lead)", color: "var(--text-body)", lineHeight: "var(--lh-normal)" }}>
              Tudo o que a sua portaria precisa para operar com segurança de ponta e tranquilidade jurídica.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Button variant="primary" size="lg" iconRight="arrow-right" as="a" href="#contato">Quero para a minha portaria</Button>
              <Badge tone="neutral">Valor sob diagnóstico</Badge>
            </div>
          </div>
          <Card accent padding="var(--sp-6)">
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              {included.map(([icon, t]) => (
                <div key={t} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <span style={{ flexShrink: 0, width: 38, height: 38, borderRadius: "var(--r-sm)", background: "rgba(31,168,224,0.12)", border: "1px solid rgba(31,168,224,0.3)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <i data-lucide={icon} style={{ width: 19, height: 19, color: "var(--accent)" }}></i>
                  </span>
                  <p style={{ margin: 0, fontSize: "0.975rem", lineHeight: "var(--lh-normal)", color: "var(--text-body)" }}>{t}</p>
                </div>
              ))}
            </div>
          </Card>
        </window.Reveal>

        {/* Parallel services — smaller, discreet */}
        <div style={{ marginTop: 56 }}>
          <p style={{ fontFamily: "var(--font-mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: ".14em", color: "var(--text-muted)", marginBottom: 16 }}>Serviços paralelos</p>
          <window.Reveal stagger style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="sg-parallel">
            {parallel.map(([icon, t, d]) => (
              <Card key={t} padding="var(--sp-5)" hover>
                <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 9 }}>
                  <i data-lucide={icon} style={{ width: 20, height: 20, color: "var(--sg-royal-400)" }}></i>
                  <span style={{ fontSize: "1rem", fontWeight: 700, color: "var(--text-strong)" }}>{t}</span>
                </div>
                <p style={{ margin: 0, fontSize: "0.875rem", color: "var(--text-muted)", lineHeight: "var(--lh-normal)" }}>{d}</p>
              </Card>
            ))}
          </window.Reveal>
        </div>
      </window.Container>
    </window.Section>
  );
}

Object.assign(window, { ProblemSection, PillarsSection, ProductSection });