// slides.jsx — Crux9 × Sebrae Startups 2026 — v5 (Due-Diligence-safe)
// Conteúdo factual, defensável em DD Top 30. Sem nomes de clientes,
// sem valores específicos de receita/captação, sem Anthropic/INPI/SCALE.

const C9 = {
  primary: 'var(--c9-primary)',
  accent: 'var(--c9-accent)',
  surface: 'var(--c9-surface)',
  border: 'var(--c9-border)',
  muted: 'var(--c9-muted)',
  mono: 'var(--c9-mono)',
};

function SlideChrome({ n, label }) {
  return (
    <>
      <div className="slide-ticker">
        <span>CRUX9</span>
        <span className="dot" />
        <span>PRÊMIO SEBRAE STARTUPS 2026</span>
        <span className="dot" />
        <span>SERVIÇOS DIGITAIS</span>
      </div>
      <div className="slide-num">
        <span className="mono">{String(n).padStart(2, '0')}</span>
        <span className="slide-label">{label}</span>
        <span className="mono muted">/ 12</span>
      </div>
    </>
  );
}

function StripePlaceholder({ label, height = '100%', tone = 'light' }) {
  const bg = tone === 'dark'
    ? 'repeating-linear-gradient(135deg, #14171E 0 8px, #0B0D12 8px 16px)'
    : 'repeating-linear-gradient(135deg, #EFEDE7 0 8px, #FAFAF9 8px 16px)';
  const fg = tone === 'dark' ? 'rgba(255,255,255,.55)' : 'rgba(11,13,18,.55)';
  return (
    <div style={{
      height, width: '100%',
      background: bg,
      border: `1px solid ${tone === 'dark' ? '#1F232C' : C9.border}`,
      borderRadius: 8, display: 'flex', alignItems: 'flex-end',
      padding: 12, boxSizing: 'border-box', position: 'relative', overflow: 'hidden',
    }}>
      <span className="mono" style={{ fontSize: 10, color: fg, letterSpacing: 0.02 }}>
        {label}
      </span>
    </div>
  );
}

// ── 01 · CAPA ───────────────────────────────────────────────────────
function Slide01() {
  return (
    <section data-screen-label="01 Capa" className="slide dark">
      <div className="slide-ticker invert">
        <span>CRUX9</span>
        <span className="dot" />
        <span>PRÊMIO SEBRAE STARTUPS 2026</span>
        <span className="dot" />
        <span>SERVIÇOS DIGITAIS</span>
      </div>

      <div className="cover-grid">
        <div className="cover-eyebrow mono anim-cover anim-cover-1">
          <span>PITCH · V5</span>
          <span className="sep">·</span>
          <span>POA/RS · 2026</span>
        </div>

        <h1 className="cover-headline anim-cover anim-cover-2">
          <span className="mask"><span className="mask-inner">IA que opera</span></span>
          <span className="mask"><span className="mask-inner">dentro da</span></span>
          <span className="mask"><span className="mask-inner accent">operação.</span></span>
        </h1>

        <p className="cover-sub anim-cover anim-cover-3">
          Consultoria de marketing digital com IA soberana embarcada. WhatsApp, RAG
          vetorial e handoff humano — rodando em infra brasileira desde o primeiro cliente.
        </p>

        <div className="cover-meta mono anim-cover anim-cover-4">
          <div>
            <span className="muted">CNPJ</span>
            <span>66.186.284/0001-60</span>
          </div>
          <div>
            <span className="muted">SLU ATIVA</span>
            <span>13/04/2026</span>
          </div>
          <div>
            <span className="muted">SEDE</span>
            <span>Porto Alegre / RS · Brasil</span>
          </div>
          <div>
            <span className="muted">CONTATO</span>
            <span>altair@crux9.com</span>
          </div>
        </div>
      </div>

      <div className="cover-foot mono anim-cover anim-cover-5">
        <span>CRUX9.COM</span>
        <span className="sep">→</span>
        <span>ALTAIR PEDRO VIANA GARCIA TECNOLOGIA DA INFORMAÇÃO LTDA</span>
      </div>
    </section>
  );
}

// ── 02 · PROBLEMA ───────────────────────────────────────────────────
function Slide02() {
  const cells = [];
  for (let y = 0; y < 3; y++) {
    for (let x = 0; x < 12; x++) {
      const hot = Math.max(0, 1 - x / 11 + (Math.sin(y * 1.3 + x * 0.7) * 0.1));
      cells.push({ x, y, hot });
    }
  }
  return (
    <section data-screen-label="02 Problema" className="slide">
      <SlideChrome n={2} label="PROBLEMA" />
      <div className="p-grid">
        <div className="p-side">
          <div className="eyebrow mono">I. Diagnóstico de mercado</div>
          <div className="stat-lockup">
            <div className="stat-big mono">⏱</div>
            <div className="stat-cap">
              SMBs perdem leads <strong>não por falta de demanda</strong>,
              <br />mas por falta de <em>operação</em> que responda.
            </div>
          </div>
          <p className="p-body">
            Empresas brasileiras gastam mensalmente em mídia paga para gerar
            leads que, no final do funil, esbarram em uma operação que não
            responde no tempo certo, não qualifica e não reengaja. O gargalo
            migrou da demanda para o atendimento.
          </p>
          <p className="p-body">
            O que existe hoje: chatbots de árvore, OpenAI-dependentes, com zero
            contexto do negócio. O que falta: uma camada de IA que <em>opera</em> —
            lê o catálogo, consulta a agenda, escalona pro humano quando precisa.
          </p>
          <div className="cite mono">
            FONTE · diagnóstico qualitativo · entrevistas com clientes ativos
            e prospects do pipeline Crux9 · 2026
          </div>
        </div>

        <div className="p-heat">
          <div className="heat-header mono">
            <span>TEMPO DE RESPOSTA · LEADS QUALIFICADOS</span>
            <span>imediato → atrasado</span>
          </div>
          <div className="heat-grid">
            {cells.map((c, i) => (
              <div key={i} className="heat-cell" style={{
                background: `oklch(${0.22 + (1 - c.hot) * 0.55} ${c.hot * 0.19} ${40 - c.hot * 20})`,
              }} />
            ))}
          </div>
          <div className="heat-axis mono">
            <span>imediato</span><span>1h</span><span>6h</span><span>24h</span><span>perdido</span>
          </div>
          <div className="heat-stats mono">
            <div><b>imediato</b><span>conversão alta</span></div>
            <div><b>horas</b><span>conversão decai</span></div>
            <div><b>&gt;24h</b><span>lead perdido</span></div>
          </div>
        </div>
      </div>
      <div className="p-kicker">
        <span className="mono kicker-num">→</span>
        <span>SMBs perdem leads <em>não por falta de demanda</em> — por falta de operação.</span>
      </div>
    </section>
  );
}

// ── 03 · SOLUÇÃO ────────────────────────────────────────────────────
function Slide03() {
  return (
    <section data-screen-label="03 Solução" className="slide">
      <SlideChrome n={3} label="SOLUÇÃO" />
      <div className="s-head">
        <div className="eyebrow mono">II. Produto</div>
        <h2 className="display">Atendimento que <em>opera</em>,<br />não só responde.</h2>
        <p className="lede">
          Três primitivas. Uma camada. <span className="mono">15</span> ferramentas
          IA registradas, rodando em produção em <span className="mono">2</span>
          verticais distintas (food service e eventos).
        </p>
      </div>

      <div className="flow-strip">
        <div className="flow-node">
          <div className="flow-num mono">01</div>
          <div className="flow-title">Cliente</div>
          <div className="flow-cap mono">WhatsApp / IG DM</div>
        </div>
        <div className="flow-arrow mono">→</div>
        <div className="flow-node hot">
          <div className="flow-num mono">02</div>
          <div className="flow-title">IA Crux9</div>
          <div className="flow-cap mono">tool_call · pgvector · RAG</div>
        </div>
        <div className="flow-arrow mono">→</div>
        <div className="flow-node">
          <div className="flow-num mono">03</div>
          <div className="flow-title">Resposta contextual</div>
          <div className="flow-cap mono">&lt;3s · preço · foto · ação</div>
        </div>
        <div className="flow-arrow mono">↳</div>
        <div className="flow-node">
          <div className="flow-num mono">04</div>
          <div className="flow-title">Handoff humano</div>
          <div className="flow-cap mono">1 click · context passthrough</div>
        </div>
      </div>

      <div className="pill-row">
        <div className="pill-block">
          <div className="pill-id mono">A</div>
          <h3>WhatsApp IA white-label</h3>
          <p>
            Meta Cloud API + tool calling nativo. Roda na conta do cliente, com a
            identidade do cliente — nunca intermediado pela Crux9.
          </p>
        </div>
        <div className="pill-block">
          <div className="pill-id mono">B</div>
          <h3>RAG vetorial soberano</h3>
          <p>
            <span className="mono">Ollama · mxbai-embed-large · pgvector · hybrid
            search</span>. Indexa catálogo, FAQ, políticas — dados nunca saem do BR.
          </p>
        </div>
        <div className="pill-block">
          <div className="pill-id mono">C</div>
          <h3>Handoff humano</h3>
          <p>
            Quando a IA detecta intenção fora do escopo ou baixa confiança, passa
            a conversa ao atendente com todo o contexto já resumido.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── 04 · DEMO LIVE ──────────────────────────────────────────────────
function WhatsAppBubble({ side, body, meta, tool }) {
  return (
    <div className={`wa-row wa-${side}`}>
      <div className={`wa-bubble wa-${side}`}>
        {tool && (
          <div className="wa-tool mono">
            <span className="tool-dot" />
            {tool}
          </div>
        )}
        <div className="wa-body">{body}</div>
        <div className="wa-meta mono">{meta}</div>
      </div>
    </div>
  );
}

function Slide04() {
  return (
    <section data-screen-label="04 Demo Live" className="slide demo-slide">
      <SlideChrome n={4} label="DEMO LIVE" />
      <div className="demo-grid">
        <div className="demo-phone-col">
          <div className="phone-shell">
            <div className="phone-island" />
            <div className="phone-screen">
              <div className="wa-header">
                <div className="wa-back mono">‹</div>
                <div className="wa-avatar">FS</div>
                <div className="wa-title">
                  <div>Food Service · POA</div>
                  <div className="wa-sub mono">● online · responde em &lt;3s</div>
                </div>
              </div>
              <div className="wa-thread">
                <div className="wa-day mono">HOJE · 19:42</div>
                <WhatsAppBubble side="in"
                  body="fala, vcs têm o combo completo hoje? qnt tá?"
                  meta="19:42" />
                <WhatsAppBubble side="out" tool="rag_search · catálogo · 240ms"
                  body={<>
                    <b>Combo Completo</b> — preço atualizado no cardápio.<br />
                    Pão, hamburger 150g, queijo, alface, tomate, milho, ervilha,
                    batata palha, ovo, maionese da casa.
                  </>}
                  meta="19:42 · ✓✓" />
                <WhatsAppBubble side="out" tool="media_attach · combo_07.jpg"
                  body={<div className="wa-img mono">↓ foto_combo.jpg · 142 kb</div>}
                  meta="19:42 · ✓✓" />
                <WhatsAppBubble side="in"
                  body="perfeito. pode mandar 2 pra retirada 20:15?"
                  meta="19:43" />
                <WhatsAppBubble side="out" tool="create_order · unit=POA"
                  body={<>
                    Pedido confirmado — 2× Combo Completo, retirada 20:15. PIX na
                    sequência? 🟢
                  </>}
                  meta="19:43 · ✓✓" />
                <div className="wa-typing mono">
                  <span className="t-dot" /><span className="t-dot" /><span className="t-dot" />
                  <span>cliente digitando…</span>
                </div>
              </div>
              <div className="wa-home" />
            </div>
          </div>
        </div>

        <div className="demo-side-col">
          <div className="eyebrow mono">III. Prova operacional</div>
          <h2 className="display demo-title">
            Vertical food service · catálogo vivo ·
            resposta <span className="mono">&lt;3s</span>.
          </h2>
          <p className="lede">
            Cliente recorrente em produção. Rede multi-unidade em Porto Alegre,
            número oficial do estabelecimento, atendimento 24/7 com IA + handoff
            humano.
          </p>

          <ul className="feat-list">
            <li>
              <span className="feat-tag mono">01</span>
              <div>
                <b>Consulta contextual real</b>
                <p>RAG indexa o catálogo vivo. Quando há alteração de preço ou
                item fora de estoque, a IA reflete em minutos — sem retrain,
                sem deploy.</p>
              </div>
            </li>
            <li>
              <span className="feat-tag mono">02</span>
              <div>
                <b>Tool calling com escrita</b>
                <p><span className="mono">create_order</span>,
                <span className="mono"> check_stock</span>,
                <span className="mono"> schedule_slot</span> — IA faz, não só
                informa. Cada tool call é auditável e reversível.</p>
              </div>
            </li>
            <li>
              <span className="feat-tag mono">03</span>
              <div>
                <b>Handoff transparente</b>
                <p>Quando o cliente pede algo fora do escopo (reclamação,
                customização pesada), conversa migra pro atendente humano com
                resumo pronto — sem o cliente perceber o corte.</p>
              </div>
            </li>
          </ul>

          <div className="demo-foot mono">
            <span>2 clientes em produção · verticais distintas</span>
            <span className="sep">·</span>
            <span>3ª vertical (financeira regulada) em pipeline avançado</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── 05 · DIFERENCIAL TÉCNICO (CLÍMAX) ──────────────────────────────
function Slide05() {
  const rows = [
    ['LGPD compliance',     'dados nunca saem do BR',     'OpenAI — dados em USA',       'ok', 'warn'],
    ['Modelos',             'open-weights · self-host',   'API proprietária',            'ok', 'warn'],
    ['Latência',            'inferência local · sub-seg', 'roundtrip USA · variável',    'ok', 'warn'],
    ['Custo',               'infra própria · marginal',   'metering opaco · escala',     'ok', 'warn'],
    ['Custom fine-tune',    'suportado (open-weights)',   'indisponível (API gated)',    'ok', 'no'],
    ['Hybrid retrieval',    'BM25 + pgvector nativo',     'vendor lock-in',              'ok', 'warn'],
    ['Dependência vendor',  'zero',                       'OpenAI · Google · Azure',     'ok', 'warn'],
    ['Auditoria tool calls','logs Postgres nativos',      'opaque API layer',            'ok', 'warn'],
  ];
  return (
    <section data-screen-label="05 Diferencial Técnico" className="slide">
      <SlideChrome n={5} label="DIFERENCIAL TÉCNICO" />
      <div className="t-head">
        <div className="eyebrow mono">IV. Arquitetura · clímax técnico</div>
        <h2 className="display">
          IA <span className="accent">soberana</span> — não dependemos de OpenAI.
        </h2>
        <p className="lede">
          Toda a inferência crítica roda em infra própria. Modelos open-weights
          (Ollama), embeddings locais (mxbai-embed-large), retrieval híbrido em
          Postgres. Ninguém tira a Crux9 do ar com um rate-limit — porque não
          estamos lá.
        </p>
      </div>

      <div className="t-grid">
        <table className="t-table">
          <thead>
            <tr>
              <th></th>
              <th><span className="mono">CRUX9</span></th>
              <th><span className="mono muted">CONCORRENTES · GPT puro</span></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td className="t-feat">{r[0]}</td>
                <td className="t-us"><span className={`mark mark-${r[3]}`} /> {r[1]}</td>
                <td className="t-them"><span className={`mark mark-${r[4]}`} /> {r[2]}</td>
              </tr>
            ))}
          </tbody>
        </table>

        <div className="t-stack">
          <div className="eyebrow mono">STACK · NÚMEROS REAIS</div>
          <div className="stack-block">
            <div className="stack-line mono">
              <span className="stack-k">prisma models</span>
              <span className="stack-v">79 · schema único monorepo</span>
            </div>
            <div className="stack-line mono">
              <span className="stack-k">prisma enums</span>
              <span className="stack-v">56</span>
            </div>
            <div className="stack-line mono">
              <span className="stack-k">apps monorepo</span>
              <span className="stack-v">8 · Turborepo</span>
            </div>
            <div className="stack-line mono">
              <span className="stack-k">tools registradas</span>
              <span className="stack-v">15 · tool_call handler</span>
            </div>
            <div className="stack-line mono">
              <span className="stack-k">inference</span>
              <span className="stack-v">Ollama · llama-3.1 / qwen2.5 (self-host)</span>
            </div>
            <div className="stack-line mono">
              <span className="stack-k">embeddings</span>
              <span className="stack-v">mxbai-embed-large · 1024d</span>
            </div>
            <div className="stack-line mono">
              <span className="stack-k">retrieval</span>
              <span className="stack-v">pgvector + BM25 hybrid</span>
            </div>
            <div className="stack-line mono">
              <span className="stack-k">runtime</span>
              <span className="stack-v">Next.js · TS · Prisma · Postgres</span>
            </div>
          </div>
          <div className="stack-foot mono">
            Portal multi-tenant em produção · v5 em <span className="accent">main</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Slide01, Slide02, Slide03, Slide04, Slide05, SlideChrome, StripePlaceholder,
});