/* Guardian Site — Cases + How it works + LGPD highlight */

function CaseCard({ c }) {
  const { Card, Badge } = window.SG;
  return (
    <Card padding="0" style={{ overflow: "hidden", height: "100%", display: "flex", flexDirection: "column" }}>
      {c.img ? (
        <div style={{ position: "relative", height: 190, overflow: "hidden", borderBottom: "1px solid var(--border-subtle)" }}>
          <img src={c.img} alt={c.name} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          <span style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(4,18,43,0) 45%, rgba(4,18,43,0.55) 100%)", pointerEvents: "none" }}></span>
        </div>
      ) : (
        <window.Photo label={`Foto: ${c.name}`} icon="building-2" height={190} style={{ borderRadius: 0, border: "none", borderBottom: "1px solid var(--border-subtle)" }} />
      )}
      <div style={{ padding: "var(--sp-6)", display: "flex", flexDirection: "column", flex: 1 }}>
        <div><Badge tone={c.tag === "Indústria" ? "neutral" : "cyan"}>{c.tag}</Badge></div>
        <h3 style={{ margin: "12px 0 4px", fontSize: "1.3125rem", fontWeight: 700, color: "var(--text-strong)" }}>{c.name}</h3>
        <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 10, fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-muted)" }}>
          <i data-lucide="map-pin" style={{ width: 13, height: 13, color: "var(--accent)" }}></i>{c.loc}
        </div>
        <p style={{ margin: 0, fontSize: "0.95rem", lineHeight: "var(--lh-normal)", color: "var(--text-body)" }}>{c.desc}</p>
      </div>
    </Card>
  );
}

function CasesSection() {
  const { SectionHeading } = window.SG;
  const cases = [
    {
      tag: "Condomínio", name: "Jardins de Boa Viagem", loc: "Boa Viagem · Recife-PE",
      img: "../../assets/case-jardins.jpg",
      desc: "Controle de acesso na portaria com Defense IA e controladoras faciais na portaria e na academia.",
      quote: "A portaria ficou mais ágil e finalmente dormimos tranquilos com a LGPD.",
      who: "Síndico · Jardins de Boa Viagem",
    },
    {
      tag: "Indústria", name: "Rhodes S.A.", loc: "Porto do Recife · Recife-PE",
      img: "../../assets/case-rhodes.jpg",
      desc: "No Porto do Recife: monitoramento e integração com a API Recintos da Receita Federal — o nível de exigência que a SafeGuardian atende.",
      quote: "Integração impecável com a Receita. Equipe que entende de verdade de segurança.",
      who: "Gestão de operações · Rhodes S.A.",
    },
    {
      tag: "Condomínio", name: "Ed. Maria Antônia", loc: "Boa Viagem · Recife-PE",
      img: "../../assets/case-maria-antonia.jpg",
      desc: "Portaria com reconhecimento facial e rede blindada — acesso de moradores e visitantes em conformidade com a LGPD.",
      quote: "Modernizamos a portaria sem perder o porteiro. Mais segurança e tranquilidade jurídica.",
      who: "Síndico · Ed. Maria Antônia",
    },
    {
      tag: "Condomínio", name: "Cond. Porto Fino", loc: "Piedade · Jaboatão-PE",
      img: "../../assets/case-porto-fino.jpg",
      desc: "Acesso facial e cadastro de moradores e visitantes na portaria, com rede segura e conformidade LGPD.",
      quote: "Portaria mais segura e organizada. O suporte da SafeGuardian faz toda a diferença.",
      who: "Síndico · Cond. Porto Fino",
    },
  ];
  const loop = [...cases, ...cases, ...cases];
  const trackRef = React.useRef(null);
  const pausedRef = React.useRef(false);
  const pauseUntilRef = React.useRef(0);
  React.useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    let raf;
    const setW = () => el.scrollWidth / 3;
    const t = setTimeout(() => { const w = setW(); if (w > 0) el.scrollLeft = w; }, 80);
    const step = () => {
      const w = setW();
      if (w > 0) {
        if (!pausedRef.current && Date.now() > pauseUntilRef.current) el.scrollLeft += 0.4;
        if (el.scrollLeft >= w * 2) el.scrollLeft -= w;
        else if (el.scrollLeft < w) el.scrollLeft += w;
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => { cancelAnimationFrame(raf); clearTimeout(t); };
  }, []);
  const nudge = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector("[data-card]");
    const w = card ? card.offsetWidth : 360;
    pauseUntilRef.current = Date.now() + 1400;
    el.scrollBy({ left: dir * (w + 20), behavior: "smooth" });
  };
  const arrow = (side) => ({
    position: "absolute", top: 96, [side]: -18, transform: "translateY(-50%)", zIndex: 6,
    width: 46, height: 46, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center",
    background: "var(--glass-bg)", border: "1px solid var(--glass-border)", boxShadow: "var(--shadow-md)",
    backdropFilter: "var(--blur-glass)", WebkitBackdropFilter: "var(--blur-glass)", color: "var(--text-strong)", cursor: "pointer",
  });
  return (
    <window.Section id="cases" bg="surface">
      <window.Container>
        <window.Reveal><SectionHeading eyebrowItems={["Cases", "Prova social"]} title="Quem confia na SafeGuardian." intro="Condomínios e indústria de alto padrão em Recife, Olinda e Jaboatão." /></window.Reveal>
        <window.Reveal style={{ position: "relative", marginTop: 36 }}
          onMouseEnter={() => { pausedRef.current = true; }}
          onMouseLeave={() => { pausedRef.current = false; }}>
          <div ref={trackRef} className="sg-cases-track" onTouchStart={() => { pauseUntilRef.current = Date.now() + 2600; }}
            style={{ display: "flex", gap: 20, overflowX: "auto", overflowY: "hidden", padding: "4px 2px 20px", scrollbarWidth: "none" }}>
            {loop.map((c, i) => (
              <div key={i} data-card style={{ flex: "0 0 338px", maxWidth: "82vw" }}>
                <CaseCard c={c} />
              </div>
            ))}
          </div>
          <div style={{ position: "absolute", top: 0, left: 0, bottom: 20, width: 56, pointerEvents: "none", zIndex: 4, background: "linear-gradient(270deg, transparent, var(--bg-surface))" }}></div>
          <div style={{ position: "absolute", top: 0, right: 0, bottom: 20, width: 56, pointerEvents: "none", zIndex: 4, background: "linear-gradient(90deg, transparent, var(--bg-surface))" }}></div>
          <button onClick={() => nudge(-1)} aria-label="Anterior" style={arrow("left")} className="sg-cases-arrow">
            <i data-lucide="chevron-left" style={{ width: 22, height: 22 }}></i>
          </button>
          <button onClick={() => nudge(1)} aria-label="Próximo" style={arrow("right")} className="sg-cases-arrow">
            <i data-lucide="chevron-right" style={{ width: 22, height: 22 }}></i>
          </button>
        </window.Reveal>
      </window.Container>
    </window.Section>
  );
}

function StepsSection() {
  const { SectionHeading } = window.SG;
  const steps = [
    ["search-check", "Diagnóstico gratuito", "Avaliamos a sua portaria e os riscos atuais."],
    ["pencil-ruler", "Projeto sob medida", "Desenho técnico para o seu condomínio."],
    ["shield-check", "Instalação blindada", "Equipamentos e rede segura, instalados por especialistas."],
    ["graduation-cap", "Treinamento do porteiro", "Sua equipe operando com confiança."],
    ["refresh-cw", "Manutenção e conformidade", "Suporte contínuo e LGPD sempre em dia."],
  ];
  return (
    <window.Section id="como" bg="deep">
      <window.Container>
        <window.Reveal><SectionHeading eyebrowItems={["Como funciona"]} title="Cinco passos, do diagnóstico à conformidade contínua." align="center" /></window.Reveal>
        <window.Reveal stagger style={{ marginTop: 50, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16, position: "relative" }} className="sg-steps">
          {steps.map(([icon, t, d], i) => (
            <div key={t} style={{ textAlign: "center", position: "relative" }}>
              <div style={{
                width: 64, height: 64, margin: "0 auto", borderRadius: "50%",
                background: "var(--bg-elevated)", border: "1.5px solid var(--border-line)",
                display: "flex", alignItems: "center", justifyContent: "center", position: "relative", zIndex: 2,
              }}>
                <i data-lucide={icon} style={{ width: 26, height: 26, color: "var(--accent)" }}></i>
                <span style={{
                  position: "absolute", top: -6, right: -6, width: 24, height: 24, borderRadius: "50%",
                  background: "var(--accent)", color: "var(--text-on-cyan)", fontFamily: "var(--font-mono)",
                  fontSize: 12, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center",
                }}>{i + 1}</span>
              </div>
              <h4 style={{ margin: "16px 0 6px", fontSize: "1rem", fontWeight: 700, color: "var(--text-strong)" }}>{t}</h4>
              <p style={{ margin: 0, fontSize: "0.85rem", color: "var(--text-muted)", lineHeight: "var(--lh-normal)" }}>{d}</p>
            </div>
          ))}
          <div className="sg-steps-line" style={{ position: "absolute", top: 32, left: "10%", right: "10%", height: 1.5, background: "var(--border-line)", zIndex: 1 }}></div>
        </window.Reveal>
      </window.Container>
    </window.Section>
  );
}

function LgpdSection() {
  const { Button } = window.SG;
  return (
    <window.Section id="lgpd" bg="surface">
      <window.Container>
        <window.Reveal style={{
          position: "relative", overflow: "hidden", borderRadius: "var(--r-xl)",
          background: "var(--sg-grad-deep)", border: "1px solid var(--border-line)",
          padding: "clamp(2.5rem, 5vw, 4rem)", textAlign: "center",
        }}>
          <div style={{ position: "absolute", inset: 0, background: "var(--sg-grad-glow)", pointerEvents: "none" }}></div>
          <div style={{ position: "relative" }}>
            <span style={{ display: "inline-flex", width: 60, height: 60, borderRadius: "var(--r-md)", background: "rgba(224,72,60,0.12)", border: "1px solid rgba(224,72,60,0.35)", alignItems: "center", justifyContent: "center", marginBottom: 22 }}>
              <i data-lucide="scale" style={{ width: 30, height: 30, color: "var(--sg-danger)" }}></i>
            </span>
            <h2 style={{ margin: "0 auto", maxWidth: "26ch", fontSize: "var(--fs-h1)", fontWeight: 700, lineHeight: "var(--lh-snug)", letterSpacing: "var(--ls-tight)", color: "var(--text-strong)", textWrap: "balance" }}>
              Seu sistema de portaria pode estar te colocando em risco jurídico.
            </h2>
            <p style={{ margin: "22px auto 0", maxWidth: "40ch", fontSize: "1.3rem", fontWeight: 600, color: "var(--accent)", lineHeight: "var(--lh-snug)" }}>
              Você sabe onde estão guardados os rostos dos seus moradores? Se não souber responder, a multa é sua.
            </p>
            <div style={{ marginTop: 32 }}>
              <Button variant="primary" size="lg" iconLeft="file-check-2" as="a" href="#contato">Quero avaliar minha conformidade</Button>
            </div>
          </div>
        </window.Reveal>
      </window.Container>
    </window.Section>
  );
}

Object.assign(window, { CasesSection, StepsSection, LgpdSection });