/* Guardian Site — Guardian Plus: áreas comuns com acesso facial + app de agendamento.
   Seção nativa da home (entre ProductSection e CasesSection). */

function GuardianPlusPhone() {
  const areas = [
    ["dumbbell", "Academia", true],
    ["wine", "Salão", false],
    ["utensils", "Gourmet", false],
    ["volleyball", "Quadra", false],
  ];
  return (
    <div style={{
      position: "relative", width: 270, flexShrink: 0, borderRadius: 42, padding: 12,
      background: "linear-gradient(160deg, #1b2431, #0a0e14 72%, #070a0f)",
      boxShadow: "0 44px 74px -26px rgba(0,0,0,0.72), 0 0 0 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08)",
    }}>
      <div style={{ borderRadius: 31, overflow: "hidden", background: "var(--bg-page)", border: "1px solid rgba(255,255,255,0.05)" }}>
        {/* status bar */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 18px 4px", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)" }}>
          <span>9:41</span>
          <span style={{ display: "inline-flex", gap: 5, alignItems: "center" }}>
            <i data-lucide="signal" style={{ width: 13, height: 13 }}></i>
            <i data-lucide="wifi" style={{ width: 13, height: 13 }}></i>
            <i data-lucide="battery-full" style={{ width: 15, height: 15 }}></i>
          </span>
        </div>

        <div style={{ padding: "8px 16px 18px" }}>
          {/* app header */}
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
            <span style={{ width: 38, height: 38, borderRadius: 11, background: "var(--sg-grad-brand)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <i data-lucide="building-2" style={{ width: 20, height: 20, color: "#fff" }}></i>
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 800, color: "var(--text-strong)", lineHeight: 1.1 }}>Residencial Aurora</div>
              <div style={{ fontSize: 10.5, color: "var(--text-muted)" }}>App de reservas</div>
            </div>
            <i data-lucide="bell" style={{ width: 17, height: 17, color: "var(--text-muted)" }}></i>
          </div>

          {/* reservar área */}
          <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text-body)", marginBottom: 10 }}>Reservar área</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 9, marginBottom: 14 }}>
            {areas.map(([icon, label, active]) => (
              <div key={label} style={{
                display: "flex", flexDirection: "column", gap: 7, padding: "12px 11px", borderRadius: 13,
                background: active ? "rgba(31,168,224,0.16)" : "rgba(255,255,255,0.03)",
                border: active ? "1px solid var(--accent)" : "1px solid var(--border-subtle)",
              }}>
                <i data-lucide={icon} style={{ width: 18, height: 18, color: active ? "var(--accent)" : "var(--text-muted)" }}></i>
                <span style={{ fontSize: 12, fontWeight: 600, color: active ? "var(--text-strong)" : "var(--text-body)" }}>{label}</span>
              </div>
            ))}
          </div>

          {/* reservation detail */}
          <div style={{ padding: 13, borderRadius: 14, background: "rgba(255,255,255,0.03)", border: "1px solid var(--border-subtle)", marginBottom: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 9 }}>
              <span style={{ fontSize: 13, fontWeight: 800, color: "var(--text-strong)" }}>Academia</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--accent)" }}>Hoje · 18:00</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--text-muted)", marginBottom: 5 }}>
              <span>Lotação</span><span>6/12</span>
            </div>
            <div style={{ height: 5, borderRadius: 3, background: "rgba(255,255,255,0.08)", overflow: "hidden", marginBottom: 11 }}>
              <div style={{ width: "50%", height: "100%", background: "var(--sg-grad-brand)" }}></div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderRadius: 9, background: "rgba(31,181,122,0.14)", border: "1px solid rgba(31,181,122,0.4)" }}>
              <i data-lucide="scan-face" style={{ width: 15, height: 15, color: "var(--sg-success)", flexShrink: 0 }}></i>
              <span style={{ fontSize: 11, fontWeight: 600, color: "var(--sg-success)", lineHeight: 1.25 }}>Acesso liberado pelo rosto no horário</span>
            </div>
          </div>

          {/* confirm */}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "12px", borderRadius: 12, background: "var(--sg-grad-brand)", color: "var(--text-on-cyan)", fontSize: 13, fontWeight: 800 }}>
            <i data-lucide="calendar-check" style={{ width: 16, height: 16 }}></i>
            Confirmar reserva
          </div>
        </div>
      </div>
    </div>
  );
}

function GuardianPlusSection() {
  const { Badge, Button } = window.SG;
  const features = [
    ["scan-face", "Acesso facial nas áreas comuns", "Academia, salão de festas, espaço gourmet, quadra, coworking."],
    ["smartphone", "App personalizado com a marca do condomínio", "O morador reserva áreas e horários pelo celular."],
    ["calendar-check", "Reserva com controle de lotação", "Sem conflito de horários e limite de convidados automáticos."],
    ["user-check", "Acesso liberado pelo rosto no horário reservado", "Integração total com o reconhecimento facial."],
    ["bar-chart-3", "Regras automáticas e relatórios para o síndico", "Bloqueio de inadimplente e painel de uso e ocupação."],
  ];
  return (
    <window.Section id="guardian-plus" bg="deep">
      <window.Container>
        <window.Reveal>
          <div className="sg-product-grid" style={{
            borderRadius: "var(--r-xl)", border: "1px solid var(--glass-border)",
            background: "linear-gradient(180deg, rgba(31,168,224,0.07), rgba(13,40,78,0.42))",
            boxShadow: "var(--shadow-lg), var(--inset-hair)", overflow: "hidden",
            display: "grid", gridTemplateColumns: "1.04fr 0.96fr", alignItems: "stretch",
          }}>
            {/* left — copy */}
            <div style={{ padding: "var(--sp-7)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18, flexWrap: "wrap" }}>
                <Badge tone="cyan" icon="sparkles">Novo</Badge>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: ".14em", color: "var(--text-muted)" }}>Guardian Plus</span>
              </div>
              <h2 style={{ margin: 0, fontSize: "var(--fs-h1)", fontWeight: 700, lineHeight: "var(--lh-snug)", letterSpacing: "var(--ls-tight)", color: "var(--text-strong)", textWrap: "balance" }}>
                Áreas comuns com acesso facial <span style={{ color: "var(--accent)" }}>+ app</span> de agendamento.
              </h2>
              <p style={{ margin: "16px 0 26px", fontSize: "var(--fs-lead)", color: "var(--text-body)", lineHeight: "var(--lh-normal)" }}>
                <span style={{ color: "var(--sg-cyan-300)", fontWeight: 600 }}>Para quem: </span>condomínios com academia, salão de festas e áreas comuns que querem praticidade e controle.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 16, marginBottom: 30 }}>
                {features.map(([icon, t, d]) => (
                  <div key={t} style={{ display: "flex", gap: 13, 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>
                    <div>
                      <div style={{ fontSize: "1rem", fontWeight: 700, color: "var(--text-strong)", lineHeight: 1.3 }}>{t}</div>
                      <div style={{ marginTop: 3, fontSize: "0.9rem", color: "var(--text-muted)", lineHeight: "var(--lh-normal)" }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Button variant="primary" size="lg" iconRight="arrow-right" as="a" href="#contato">Quero o Guardian Plus</Button>
                <Button variant="secondary" size="lg" as="a" href="#contato">Valor sob diagnóstico</Button>
              </div>
            </div>

            {/* right — phone mockup */}
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--sp-6)",
              background: "repeating-linear-gradient(135deg, rgba(31,168,224,0.06) 0 1px, transparent 1px 13px), linear-gradient(180deg, rgba(4,18,43,0.55), rgba(11,46,99,0.45))",
              borderLeft: "1px solid var(--border-subtle)",
            }}>
              <GuardianPlusPhone />
            </div>
          </div>
        </window.Reveal>
      </window.Container>
    </window.Section>
  );
}

Object.assign(window, { GuardianPlusSection });