/* Guardian Site — Header (sticky nav) + Hero + Credibility bar */

function Header() {
  const { Button, WhatsAppButton } = window.SG;
  const [open, setOpen] = React.useState(false);
  const links = [
    ["O problema", "#problema"],
    ["Por que nós", "#pilares"],
    ["Guardian Portaria", "#produto"],
    ["Cases", "#cases"],
    ["Contato", "#contato"],
  ];
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 980) setOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  const drawerLink = {
    display: "block", padding: "13px 4px", fontSize: "1.05rem", fontWeight: 600,
    color: "var(--text-body)", textDecoration: "none", borderBottom: "1px solid var(--border-subtle)",
  };
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(4,18,43,0.72)", backdropFilter: "var(--blur-glass)", WebkitBackdropFilter: "var(--blur-glass)",
      borderBottom: "1px solid var(--border-subtle)",
    }}>
      <window.Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 72 }}>
        <window.Logo />
        <nav style={{ display: "flex", gap: 26, alignItems: "center" }} className="sg-nav">
          {links.map(([t, h]) => (
            <a key={h} href={h} style={{
              fontSize: "0.9375rem", fontWeight: 500, 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>
          ))}
        </nav>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }} className="sg-header-cta">
          <Button as="a" href="#contato" size="sm" iconLeft="shield-check">Diagnóstico gratuito</Button>
        </div>
        <button className="sg-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
          <span className="sg-burger-box" data-open={open ? "" : undefined}><span></span><span></span><span></span></span>
        </button>
      </window.Container>

      <div className="sg-drawer" data-open={open ? "" : undefined}>
        <nav style={{ display: "flex", flexDirection: "column" }}>
          {links.map(([t, h]) => (
            <a key={h} href={h} onClick={() => setOpen(false)} style={drawerLink}>{t}</a>
          ))}
        </nav>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 16 }}>
          <Button as="a" href="#contato" size="md" iconLeft="shield-check" fullWidth onClick={() => setOpen(false)}>Solicitar diagnóstico gratuito</Button>
          <WhatsAppButton fullWidth phone="5581994509609">Falar no WhatsApp</WhatsAppButton>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  const { Button, WhatsAppButton, Eyebrow, Badge } = window.SG;
  return (
    <div id="top" style={{ position: "relative", overflow: "hidden", background: "var(--sg-grad-deep)" }}>
      <div style={{ position: "absolute", inset: 0, background: "var(--sg-grad-glow)", pointerEvents: "none" }}></div>
      {/* faint grid */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none",
        backgroundImage: "linear-gradient(rgba(201,206,211,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(201,206,211,0.05) 1px, transparent 1px)",
        backgroundSize: "54px 54px", maskImage: "radial-gradient(900px 500px at 70% 10%, #000, transparent 80%)",
      }}></div>

      <window.Container style={{ position: "relative", paddingTop: 72, paddingBottom: 88,
        display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "center" }} className="sg-hero-grid">
        <div>
          <div className="sg-anim"><Eyebrow items={["Cibersegurança", "LGPD", "Portaria inteligente"]} /></div>
          <h1 className="sg-anim sg-anim-1" style={{
            margin: "20px 0 0", fontSize: "var(--fs-display)", fontWeight: 800, lineHeight: "var(--lh-tight)",
            letterSpacing: "var(--ls-tight)", color: "var(--text-strong)", textWrap: "balance",
          }}>
            A portaria do seu condomínio mais segura, moderna e dentro da lei — <span style={{ color: "var(--accent)" }}>sem trocar o seu porteiro.</span>
          </h1>
          <p className="sg-anim sg-anim-2" style={{
            margin: "22px 0 0", fontSize: "var(--fs-lead)", lineHeight: "var(--lh-normal)", color: "var(--text-body)", maxWidth: "46ch",
          }}>
            Controle de acesso facial, software de cadastro, rede blindada e conformidade LGPD. Com equipamento de ponta e garantia de manutenção e troca. Em Recife e Olinda.
          </p>
          <div className="sg-anim sg-anim-3" style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" iconLeft="shield-check" as="a" href="#contato">Solicitar diagnóstico gratuito</Button>
            <WhatsAppButton size="lg" phone="5581994509609">Falar no WhatsApp</WhatsAppButton>
          </div>
          <div className="sg-anim sg-anim-4" style={{ display: "flex", gap: 10, marginTop: 26, flexWrap: "wrap" }}>
            <Badge tone="cyan" icon="scan-face">Acesso facial</Badge>
            <Badge tone="success" icon="shield-check">Rede blindada</Badge>
            <Badge tone="neutral" icon="map-pin">Recife · Olinda</Badge>
          </div>
        </div>

        <div className="sg-anim-panel"><ScanPanel /></div>
      </window.Container>
    </div>
  );
}

/* Premium pure-CSS facial-access terminal over a condo building — the hero product visual */
function ScanPanel() {
  const { FacialTerminal, BuildingSkyline, Badge } = window.SG;
  return (
    <div style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "flex-end", minHeight: 480 }}>
      {/* condo skyline backdrop */}
      <BuildingSkyline height={300} style={{ position: "absolute", left: "-6%", right: "-6%", bottom: 0, width: "112%", opacity: 0.85, maskImage: "linear-gradient(180deg, transparent, #000 38%)" }} />

      {/* floating status chips */}
      <span style={{ position: "absolute", top: 8, left: "0%", zIndex: 4, display: "inline-flex", alignItems: "center", gap: 7,
        padding: "7px 13px", borderRadius: 999, background: "var(--glass-bg)", border: "1px solid var(--glass-border)",
        boxShadow: "var(--shadow-md)", backdropFilter: "var(--blur-glass)", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--sg-success)" }}>
        <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--sg-success)", boxShadow: "0 0 10px var(--sg-success)" }}></span>ONLINE
      </span>
      <span style={{ position: "absolute", top: 66, right: "-2%", zIndex: 4 }}>
        <Badge tone="cyan" icon="lock">Dados criptografados</Badge>
      </span>
      <span style={{ position: "absolute", bottom: 70, left: "-3%", zIndex: 4 }}>
        <Badge tone="neutral" icon="scan-face">Reconhecimento em 0.4s</Badge>
      </span>

      {/* the device */}
      <div style={{ position: "relative", zIndex: 3, paddingBottom: 14 }}>
        <FacialTerminal variant="vertical" />
      </div>
    </div>
  );
}

function CredibilityBar() {
  return (
    <div style={{ background: "var(--bg-surface)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
      <window.Container style={{ padding: "22px var(--container-pad)", display: "flex", alignItems: "center", gap: 22, flexWrap: "wrap", justifyContent: "center" }}>
        <i data-lucide="landmark" style={{ width: 20, height: 20, color: "var(--accent)" }}></i>
        <p style={{ margin: 0, fontSize: "0.95rem", color: "var(--text-body)", textAlign: "center", maxWidth: "70ch" }}>
          <strong style={{ color: "var(--text-strong)" }}>Confiança de quem é regulado:</strong> indústria com integração à Receita Federal e condomínios de alto padrão. <span style={{ color: "var(--text-muted)" }}>Recife · Olinda · Região Metropolitana.</span>
        </p>
      </window.Container>
    </div>
  );
}

Object.assign(window, { Header, Hero, CredibilityBar });