/* global React, ReactDOM, Icon, PageShell, PageHeader, FinalCta */

/* ──────────────────────────────────────────────
   Team avatar — distinct SVG pattern per card.
   Avoids fake portraits; gives each role its own visual identity.
   ────────────────────────────────────────────── */
function TeamPatternBg({ kind }) {
  switch (kind) {
    case "grid":
      return (
        <svg className="team-svg" viewBox="0 0 120 90" preserveAspectRatio="none" aria-hidden="true">
          <defs>
            <pattern id="tp-grid" width="10" height="10" patternUnits="userSpaceOnUse">
              <path d="M 10 0 L 0 0 0 10" fill="none" stroke="currentColor" strokeWidth="0.3" opacity="0.5" />
            </pattern>
          </defs>
          <rect width="120" height="90" fill="url(#tp-grid)" />
          <rect x="30" y="20" width="60" height="50" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.45" />
          <rect x="40" y="30" width="40" height="30" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.55" />
          <rect x="50" y="40" width="20" height="10" fill="none" stroke="currentColor" strokeWidth="0.6" opacity="0.8" />
        </svg>
      );
    case "scan":
      return (
        <svg className="team-svg" viewBox="0 0 120 90" preserveAspectRatio="none" aria-hidden="true">
          {Array.from({ length: 8 }).map((_, i) => (
            <line key={i} x1="0" x2="120" y1={11 + i * 11} y2={11 + i * 11}
              stroke="currentColor" strokeWidth="0.45" opacity={0.18 + (i % 3) * 0.18} />
          ))}
          <circle cx="60" cy="45" r="22" fill="none" stroke="currentColor" strokeWidth="0.45" opacity="0.6" />
          <circle cx="60" cy="45" r="32" fill="none" stroke="currentColor" strokeWidth="0.35" opacity="0.4" />
          <circle cx="60" cy="45" r="42" fill="none" stroke="currentColor" strokeWidth="0.3" opacity="0.25" />
        </svg>
      );
    case "noise":
      return (
        <svg className="team-svg" viewBox="0 0 120 90" preserveAspectRatio="none" aria-hidden="true">
          {Array.from({ length: 110 }).map((_, i) => {
            const x = (i * 73) % 120;
            const y = ((i * 31) % 90);
            const r = ((i * 7) % 4) * 0.3 + 0.4;
            return <circle key={i} cx={x} cy={y} r={r} fill="currentColor" opacity={0.35 + ((i * 11) % 5) * 0.1} />;
          })}
          {/* node graph */}
          <path d="M 28 28 L 60 18 L 92 32 L 78 56 L 42 60 Z M 60 18 L 78 56 M 28 28 L 42 60"
            fill="none" stroke="currentColor" strokeWidth="0.4" opacity="0.55" />
          {[[28,28],[60,18],[92,32],[78,56],[42,60]].map(([cx, cy], i) =>
            <circle key={"n"+i} cx={cx} cy={cy} r="1.4" fill="currentColor" opacity="0.85" />
          )}
        </svg>
      );
    case "concentric":
      return (
        <svg className="team-svg" viewBox="0 0 120 90" preserveAspectRatio="none" aria-hidden="true">
          {[6, 13, 20, 28, 36, 44].map((r) => (
            <circle key={r} cx="60" cy="45" r={r} fill="none" stroke="currentColor" strokeWidth="0.4" opacity={0.6 - r * 0.01} />
          ))}
          <line x1="60" y1="6" x2="60" y2="84" stroke="currentColor" strokeWidth="0.4" opacity="0.55" />
          <line x1="14" y1="45" x2="106" y2="45" stroke="currentColor" strokeWidth="0.4" opacity="0.55" />
          <line x1="28" y1="13" x2="92" y2="77" stroke="currentColor" strokeWidth="0.3" opacity="0.4" />
          <line x1="92" y1="13" x2="28" y2="77" stroke="currentColor" strokeWidth="0.3" opacity="0.4" />
        </svg>
      );
    case "rules":
      return (
        <svg className="team-svg" viewBox="0 0 120 90" preserveAspectRatio="none" aria-hidden="true">
          {Array.from({ length: 14 }).map((_, i) => (
            <line key={i} x1={6} x2={114} y1={6 + i * 6} y2={6 + i * 6}
              stroke="currentColor" strokeWidth="0.3" opacity="0.35" />
          ))}
          <rect x="14" y="10" width="92" height="70" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.55" />
          <path d="M 60 18 L 100 30 L 100 50 C 100 64 80 72 60 76 C 40 72 20 64 20 50 L 20 30 Z"
            fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.65" />
        </svg>
      );
    case "diag":
      return (
        <svg className="team-svg" viewBox="0 0 120 90" preserveAspectRatio="none" aria-hidden="true">
          <defs>
            <pattern id="tp-diag" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
              <line x1="0" y1="0" x2="0" y2="10" stroke="currentColor" strokeWidth="0.4" opacity="0.4" />
            </pattern>
          </defs>
          <rect width="120" height="90" fill="url(#tp-diag)" />
          <path d="M 36 60 L 60 36 L 84 60 L 60 84 Z" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.65" />
          <circle cx="60" cy="36" r="1.6" fill="currentColor" opacity="0.85" />
        </svg>
      );
    default:
      return null;
  }
}

function SobrePage() {
  const team = [
    { name: "Direção técnica",     role: "CISO‑on‑Demand",         code: "DT‑01", icon: <Icon.Compass />,   pattern: "grid",     bio: "Liderança técnica com passagem por times de SOC e investigação digital — desenha a estratégia e os playbooks da plataforma." },
    { name: "SOC Lead",            role: "Operações 24/7",         code: "SOC‑02", icon: <Icon.Pulse />,     pattern: "scan",     bio: "Coordena turnos do SOC em Brasília. Garante que cada alerta crítico tem dono, prazo e desfecho documentado." },
    { name: "Threat Intelligence", role: "Pesquisa & IA",          code: "TI‑03",  icon: <Icon.Brain />,     pattern: "noise",    bio: "Curadoria de IOCs, modelos comportamentais e crawling de fontes abertas. Mantém o motor de detecção sempre atualizado." },
    { name: "Forense",             role: "Investigação digital",   code: "FOR‑04", icon: <Icon.Search />,    pattern: "concentric", bio: "Coleta, preservação e análise de evidências. Atua em incidentes críticos com cadeia de custódia formal." },
    { name: "GRC",                 role: "Conformidade",           code: "GRC‑05", icon: <Icon.Shield2 />,   pattern: "rules",    bio: "LGPD, ISO 27001, PCI e auditorias. Traduz risco técnico em decisão executiva — e vice‑versa." },
    { name: "Customer Success",    role: "Onboarding & suporte",   code: "CS‑06",  icon: <Icon.User />,      pattern: "diag",     bio: "Acompanha clientes desde a integração até a operação contínua. Ponto único de contato para o seu time." },
  ];
  const facts = [
    { k: "HQ",          v: "Brasília · DF"        },
    { k: "FUND.",       v: "2022"                 },
    { k: "MODELO",      v: "SOC 24/7 · híbrido"   },
    { k: "COBERTURA",   v: "BR + LATAM"           },
    { k: "CERT.",       v: "ISO 27001 · CIS v8"   },
    { k: "SETORES",     v: "Fin · Saúde · Gov"    },
  ];
  return (
    <PageShell active="sobre">
      <PageHeader
        eyebrow="Quem somos"
        title={<>Uma equipe que vive na <em>linha de frente</em> da defesa digital.</>}
        lead="A Crime Solution é fruto de uma jornada dedicada à segurança cibernética. Reunimos profissionais com experiência em órgãos de investigação, big techs e startups — pessoas que combinam paixão técnica e responsabilidade institucional para proteger nossos clientes."
      >
        <a className="btn btn-primary" href="contato.html">Falar com a direção <Icon.Arrow className="arr" /></a>
        <a className="btn btn-ghost" href="plataforma.html">Ver a plataforma</a>
      </PageHeader>

      <section className="section-pad">
        <div className="container two-col">
          <div>
            <span className="eyebrow">Missão</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Estar acordados<br />
              <span className="muted-em">enquanto o resto do mundo dorme.</span>
            </h2>
            <p className="lead" style={{ marginTop: 18 }}>
              Operamos a partir de Brasília — DF, com cobertura nacional e parceiros estratégicos
              na América Latina. Nosso compromisso é simples: manter sua operação de pé enquanto
              o cenário de ameaças muda de forma a cada hora.
            </p>
            <p className="lead">
              Acreditamos que segurança digital não é checklist — é cadência. Toda decisão técnica
              tem que servir a uma decisão de negócio, e toda decisão de negócio tem que ter um
              correlato técnico defensável.
            </p>
            <ul className="about-facts mono" style={{ marginTop: 28 }}>
              {facts.map((f) => (
                <li key={f.k}><span>{f.k}</span><strong>{f.v}</strong></li>
              ))}
            </ul>
          </div>

          <div>
            <blockquote className="quote-block">
              “Cyber não se vence — se administra com método.
              A nossa promessa não é zerar o risco, é colocar você no controle dele.”
              <cite>Direção · Crime Solution</cite>
            </blockquote>

            <div className="card" style={{ marginTop: 28, padding: 0 }}>
              <header className="panel-head">
                <div className="panel-head-left">
                  <span className="dot dot-live" />
                  <span className="mono panel-title">PRINCÍPIOS</span>
                </div>
                <div className="panel-head-right mono">v. 2026.1</div>
              </header>
              <ul className="spec-list" style={{ padding: "8px 22px 22px" }}>
                <li>
                  <span className="si-icon"><Icon.Eye /></span>
                  <span className="si-body">
                    <strong>Transparência radical</strong>
                    <span>Você sabe o que estamos vendo, quando vimos e o que decidimos fazer.</span>
                  </span>
                </li>
                <li>
                  <span className="si-icon"><Icon.Bolt /></span>
                  <span className="si-body">
                    <strong>Velocidade com método</strong>
                    <span>Resposta automatizada onde dá; humano no loop quando o impacto pede.</span>
                  </span>
                </li>
                <li>
                  <span className="si-icon"><Icon.Shield /></span>
                  <span className="si-body">
                    <strong>Defensável em auditoria</strong>
                    <span>Cadeia de custódia, logs imutáveis e relatórios prontos para reguladores.</span>
                  </span>
                </li>
                <li>
                  <span className="si-icon"><Icon.User /></span>
                  <span className="si-body">
                    <strong>Cliente como parceiro</strong>
                    <span>SOC compartilhado, não terceirizado. Seu time aprende junto.</span>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section-pad" style={{ background: "var(--bg-1)", borderBlock: "1px solid var(--line)" }}>
        <div className="container">
          <header className="section-head row">
            <div>
              <span className="eyebrow">Equipe · estrutura operacional</span>
              <h2 className="h-section">Funções, não cargos.</h2>
            </div>
            <p className="lead">
              Operamos em squads pequenos e multidisciplinares. Cada cliente conta com um ponto único
              de contato — e atrás dele, uma estrutura completa de operação, pesquisa e conformidade.
            </p>
          </header>

          <div className="team-grid">
            {team.map((t, i) => (
              <div key={t.name} className="team-card" data-card-i={i}>
                <div className={"team-avatar team-pattern-" + t.pattern}>
                  <TeamPatternBg kind={t.pattern} />
                  <span className="team-avatar-icon">{t.icon}</span>
                  <span className="team-avatar-code mono">{t.code}</span>
                </div>
                <span className="role">{t.role}</span>
                <strong>{t.name}</strong>
                <p>{t.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="container">
          <header className="section-head">
            <span className="eyebrow">Linha do tempo</span>
            <h2 className="h-section">Marcos.</h2>
          </header>
          <ul className="steps-list">
            {[
              { k: "2022", t: "Fundação",                 d: "Crime Solution nasce em Brasília com foco em investigação digital." },
              { k: "2023", t: "Plataforma Cyber Investigator", d: "Lançamento do produto principal, com motor de detecção comportamental." },
              { k: "2024", t: "SOC 24/7 dedicado",        d: "Operação ininterrupta com playbooks de resposta automatizada." },
              { k: "2025", t: "Cobertura LATAM",          d: "Parcerias internacionais e operação multi‑idioma." },
            ].map((s) => (
              <li key={s.k}>
                <span className="step-k">{s.k}</span>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <FinalCta
        title="Quer falar com quem decide?"
        body="A direção responde diretamente — sem funil de vendas, sem proposta automática."
        ctaText="Conversar com a direção"
      />
    </PageShell>
  );
}

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