/* global React, Icon, PageShell, PageHeader, FinalCta, SocPanel, HeroTicker */
const { useEffect: useE_home } = React;

function HomeHero() {
  return (
    <section id="top" className="hero">
      <div className="grid-bg" />
      <div className="scanlines" />
      <div className="hero-glow" aria-hidden="true" />
      <div className="container hero-grid">
        <div className="hero-copy">
          <span className="eyebrow">Plataforma de Cyber Defense · Brasília — DF</span>
          <h1 className="h-display hero-title">
            Tranquilidade<br />
            no <em>território</em><br />
            digital.
          </h1>
          <p className="lead hero-lead">
            A Crime Solution combina inteligência artificial, análise comportamental
            e resposta a incidentes em uma única plataforma — para que sua operação
            continue de pé enquanto ameaças mudam de forma a cada hora.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="plataforma.html">
              Conhecer a plataforma <Icon.Arrow className="arr" />
            </a>
            <a className="btn btn-ghost" href="contato.html">
              <Icon.Calendar /> Agendar consulta
            </a>
          </div>
          <ul className="hero-metrics">
            <li><strong className="mono">99.98%</strong><span>Uptime de monitoramento</span></li>
            <li><strong className="mono">&lt;60s</strong><span>Tempo de resposta médio</span></li>
            <li><strong className="mono">24/7</strong><span>SOC vigiando sua operação</span></li>
          </ul>
        </div>
        <div className="hero-visual">
          <SocPanel />
        </div>
      </div>
      <HeroTicker />
    </section>
  );
}

function HomeStats() {
  const items = [
    { k: "2.4M+", v: "Eventos analisados por hora" },
    { k: "<60s",  v: "Tempo médio de contenção" },
    { k: "120+",  v: "Operações monitoradas no Brasil" },
    { k: "24/7",  v: "SOC dedicado em Brasília" },
  ];
  return (
    <section className="stats-strip">
      <div className="container stats-grid">
        {items.map((it) => (
          <div key={it.v} className="stat-cell">
            <strong className="stat-num">{it.k}</strong>
            <span className="muted">{it.v}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function HomePillars() {
  const items = [
    { k: "01", title: "Detecção que aprende com o tráfego real", body: "Modelos comportamentais treinados na sua superfície de ataque — sem regras genéricas, sem alertas que ninguém olha.", icon: <Icon.Pulse /> },
    { k: "02", title: "Resposta em segundos, não em manuais",     body: "Playbooks de contenção automatizados, com humanos no loop quando o impacto exige conversa antes da ação.",     icon: <Icon.Bolt /> },
    { k: "03", title: "Visibilidade sem zonas cegas",              body: "Endpoint, identidade, nuvem, e-mail e deep web em uma única linha do tempo. Auditável, exportável, defensável.", icon: <Icon.Eye /> },
    { k: "04", title: "Conformidade como subproduto",              body: "Trilhas para LGPD, ISO 27001 e PCI prontas no dia 1 — porque a sua operação precisa rodar, não preencher planilhas.", icon: <Icon.Shield /> },
  ];
  return (
    <section className="section-pad pillars">
      <div className="container">
        <header className="section-head">
          <span className="eyebrow">Princípios operacionais</span>
          <h2 className="h-section">
            Segurança digital tratada como<br />
            <span className="muted-em">um sistema vivo</span>, não como projeto.
          </h2>
          <p className="lead">
            A Crime Solution nasceu da convicção de que cyber não é checklist — é cadência.
            Construímos uma plataforma que escuta, decide e responde 24 horas por dia,
            para que sua equipe trabalhe em prioridades reais.
          </p>
        </header>
        <ul className="pillar-grid">
          {items.map((it) => (
            <li key={it.k} className="pillar card card-pad card-hover">
              <span className="tick tl" /><span className="tick br" />
              <div className="pillar-top">
                <span className="mono pillar-k">{it.k}</span>
                <span className="pillar-icon">{it.icon}</span>
              </div>
              <h3 className="h-card">{it.title}</h3>
              <p className="muted">{it.body}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function HomeServicesPreview() {
  const items = [
    { code: "SVC‑01", title: "Cyber Investigator", href: "cyber-investigator.html", desc: "Plataforma proprietária de detecção e resposta — IA, comportamento e contenção automatizada em uma única superfície.", icon: <Icon.Brain />, featured: true, tags: ["Plataforma", "24/7", "IA"] },
    { code: "SVC‑02", title: "Resposta a Incidentes", href: "resposta-incidentes.html", desc: "Equipe de plantão para contenção, erradicação e relatório forense — contrato fixo ou retainer.", icon: <Icon.Bolt />, tags: ["NIST", "ISO 27035"] },
    { code: "SVC‑03", title: "Pentest & Red Team", href: "pentest.html", desc: "Simulações de adversário com escopo amplo — aplicações, redes internas, engenharia social.", icon: <Icon.Crosshair />, tags: ["OWASP", "PTES"] },
    { code: "SVC‑04", title: "Treinamentos & Awareness", href: "treinamentos.html", desc: "Programas de conscientização para colaboradores e capacitação técnica para times de SecOps.", icon: <Icon.Graduate />, tags: ["Phishing sim.", "Trilhas"] },
    { code: "SVC‑05", title: "Consultoria estratégica", href: "consultoria.html", desc: "Avaliação de maturidade, roadmap de segurança e suporte a comitês executivos.", icon: <Icon.Compass />, tags: ["LGPD", "C‑level"] },
  ];
  return (
    <section className="section-pad">
      <div className="container">
        <header className="section-head row">
          <div>
            <span className="eyebrow">Portfólio</span>
            <h2 className="h-section">Plataforma + time<br />— um pacote completo.</h2>
          </div>
          <a className="btn btn-ghost" href="servicos.html">Ver todos os serviços <Icon.Arrow className="arr" /></a>
        </header>
        <div className="services-grid">
          {items.map((s) => (
            <a key={s.code} href={s.href} className={"service-card " + (s.featured ? "is-featured" : "")}>
              <div className="svc-card-head">
                <span className="svc-card-icon">{s.icon}</span>
                <span className="svc-card-code">{s.code}</span>
              </div>
              <div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
              <div className="svc-card-foot">
                <div className="svc-card-tags">{s.tags.map((t) => <span key={t}>{t}</span>)}</div>
                <span className="more">Detalhes <Icon.Arrow /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <PageShell active="home">
      <HomeHero />
      <HomeStats />
      <HomePillars />
      <HomeServicesPreview />
      <FinalCta
        title="Pronto para proteger seu futuro digital?"
        body="Conte o seu cenário em algumas linhas. Em até 1 dia útil, um especialista responde com um diagnóstico inicial e os próximos passos sugeridos."
        ctaText="Começar uma conversa"
        ctaHref="contato.html"
      />
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomePage />);