// ===== Personas · Para iniciantes / Para profissionais =====

function PersonaNav({ persona, setPersona }) {
  return (
    <nav className="sticky top-0 z-10 border-b border-pleita-line/60 bg-pleita-paper/85 backdrop-blur">
      <div className="max-w-7xl mx-auto px-6 md:px-10 h-16 flex items-center justify-between">
        <Logo size={22} />
        <div className="hidden md:flex items-center gap-7 text-sm text-pleita-stone">
          <a className="hover:text-pleita-ink">Como funciona</a>
          <button onClick={() => setPersona("iniciantes")}   className={persona === "iniciantes"   ? "text-pleita-ink font-medium" : "hover:text-pleita-ink"}>Para iniciantes</button>
          <button onClick={() => setPersona("profissionais")}className={persona === "profissionais" ? "text-pleita-ink font-medium" : "hover:text-pleita-ink"}>Para profissionais</button>
          <a className="hover:text-pleita-ink">Preços</a>
        </div>
        <div className="flex items-center gap-2">
          <PleitaButton variant="ghost" size="sm">Entrar</PleitaButton>
          <PleitaButton size="sm">Começar grátis</PleitaButton>
        </div>
      </div>
    </nav>
  );
}

function PersonaIniciantes() {
  return (
    <main className="max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-20">
      {/* Hero */}
      <section className="grid lg:grid-cols-2 gap-10 items-center mb-20">
        <div>
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-3">🌱 Pra quem nunca licitou</div>
          <h1 className="font-display text-4xl md:text-6xl text-pleita-ink leading-[1.05]">Você nunca abriu um edital. Tudo bem<span className="text-pleita-lime">.</span></h1>
          <p className="text-lg text-pleita-stone mt-5 leading-relaxed max-w-lg">A Pleita foi feita pra quem está começando. Sem juridiquês, sem decifrar 80 páginas de PDF — só o que importa, em PT-BR claro.</p>
          <div className="flex flex-wrap gap-3 mt-8">
            <PleitaButton size="lg">Começar grátis · 14 dias</PleitaButton>
            <PleitaButton size="lg" variant="ghost">Ver o Coach em ação ▾</PleitaButton>
          </div>
          <div className="flex items-center gap-3 mt-6 pl-num text-xs text-pleita-stone-2">
            <span className="inline-flex items-center gap-1.5"><span className="size-1.5 rounded-full bg-verdict-go animate-pulse" />847 empresas começaram este mês</span>
          </div>
        </div>

        {/* Comparativo "antes/depois" */}
        <div className="grid grid-cols-2 gap-3">
          <div className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">😰 Sem a Pleita</div>
            <ul className="space-y-2.5 text-sm text-pleita-stone">
              {["Abre o edital, fecha", "Não sabe se pode participar", "Perdeu por certidão vencida", "Liga pro contador, demora 3 dias", "Desiste"].map((t) => (
                <li key={t} className="flex items-start gap-2"><span className="text-verdict-stop shrink-0 mt-0.5">✕</span><span className="line-through opacity-70">{t}</span></li>
              ))}
            </ul>
          </div>
          <div className="rounded-[10px] p-5 shadow-pl-md border-2 border-pleita-lime" style={{ background: "rgb(159 232 112 / .12)" }}>
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-ink/70 mb-3">🎓 Com a Pleita</div>
            <ul className="space-y-2.5 text-sm text-pleita-ink">
              {["Coach traduz o edital", "Diagnóstico em 90s", "Cofre alerta antes de vencer", "Resposta em segundos", "Primeiro contrato em 90 dias"].map((t) => (
                <li key={t} className="flex items-start gap-2"><span className="text-verdict-go shrink-0 mt-0.5">✓</span><span>{t}</span></li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* O Coach */}
      <section className="rounded-[10px] overflow-hidden mb-20" style={{ background: "rgb(var(--pleita-ink))" }}>
        <div className="grid lg:grid-cols-2 gap-0">
          <div className="p-10 md:p-14 text-pleita-paper">
            <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-lime mb-3">🎓 Conheça o Coach</div>
            <h2 className="font-display text-3xl md:text-4xl leading-tight">Um agente especialista <br/>só pra você começar<span className="text-pleita-lime">.</span></h2>
            <p className="text-base text-pleita-paper/70 mt-4 leading-relaxed">Sonnet 4.5 com persona calorosa, treinado em milhares de licitações vencidas por iniciantes. Ele explica termos, sugere o próximo passo e te conta o que esperar.</p>
            <div className="flex flex-wrap gap-2 mt-6">
              {["fala em PT-BR claro", "sem juridiquês", "encorajador", "passo a passo"].map((t) => (
                <span key={t} className="pl-num text-[11px] px-3 py-1.5 rounded-full bg-pleita-paper/10 text-pleita-paper">{t}</span>
              ))}
            </div>
          </div>
          <div className="p-10 md:p-14 grid place-items-center" style={{ background: "rgb(var(--pleita-ink-2))" }}>
            <div className="w-full max-w-sm rounded-[10px] bg-pleita-paper p-5 shadow-pl-md">
              <div className="flex items-center gap-3 pb-3 border-b border-pleita-line">
                <span className="size-9 rounded-full bg-pleita-lime grid place-items-center text-lg">🎓</span>
                <div>
                  <div className="text-sm text-pleita-ink font-semibold">Coach</div>
                  <div className="pl-num text-[10px] text-pleita-stone-2">sonnet 4.5 · há 2s</div>
                </div>
              </div>
              <div className="space-y-3 mt-3 text-sm">
                <div className="rounded-lg bg-surface-2 p-3 text-pleita-ink">Sr. Vladimir, esse edital pede "atestado de capacidade técnica". Em PT-BR claro: uma carta de cliente seu dizendo que você entregou serviço parecido antes.</div>
                <div className="rounded-lg bg-pleita-lime/20 p-3 text-pleita-ink">Você já entregou pra escola estadual em 2024 — peça pra eles assinarem o modelo no anexo. <strong>Eu já preparei o documento.</strong></div>
                <div className="flex gap-2 mt-2">
                  <button className="pl-num text-[11px] px-3 py-1.5 rounded-full bg-pleita-ink text-pleita-paper">Ver modelo →</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Histórias */}
      <section className="mb-20">
        <div className="text-center mb-10">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Histórias reais</div>
          <h2 className="font-display text-3xl md:text-4xl text-pleita-ink">Começaram do zero. Ganharam<span className="text-pleita-lime">.</span></h2>
        </div>
        <div className="grid md:grid-cols-3 gap-5">
          {[
            { ini: "VM", nome: "Vladimir M.", emp: "Padaria · GO",       hist: "Primeiro contrato em 47 dias. R$ 142k/ano vendendo pão pra escola estadual.",         valor: "R$ 142k/ano" },
            { ini: "AS", nome: "Aline S.",    emp: "Confecção · PR",     hist: "Achava que licitação era pra empresa grande. No 2º mês: contrato com a polícia militar.", valor: "R$ 86k em 3m" },
            { ini: "RC", nome: "Ricardo C.",  emp: "Pequena gráfica · MG", hist: "Nunca tinha aberto um edital. Coach explicou tudo. Hoje, 4 contratos rodando.",         valor: "4 contratos" },
          ].map((h) => (
            <article key={h.ini} className="rounded-[10px] bg-surface-card border border-pleita-line p-7 shadow-pl-sm">
              <div className="flex items-center gap-3 mb-4">
                <span className="size-12 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-sm font-semibold">{h.ini}</span>
                <div>
                  <div className="text-sm text-pleita-ink font-medium">{h.nome}</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2">{h.emp}</div>
                </div>
              </div>
              <p className="text-sm text-pleita-stone leading-relaxed">"{h.hist}"</p>
              <div className="mt-5 pt-4 border-t border-pleita-line/60 inline-flex items-center gap-2 pl-num text-xs">
                <span className="size-2 rounded-full bg-pleita-lime" /><span className="text-pleita-ink font-semibold">{h.valor}</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Roadmap iniciante */}
      <section className="mb-20">
        <div className="text-center mb-10">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Seu roadmap</div>
          <h2 className="font-display text-3xl md:text-4xl text-pleita-ink">Do zero ao primeiro contrato<span className="text-pleita-lime">.</span></h2>
        </div>
        <div className="grid md:grid-cols-4 gap-4">
          {[
            { n: 1, t: "Dia 1",       desc: "Cadastra CNPJ. Pleita preenche tudo automaticamente."          },
            { n: 2, t: "Semana 1",    desc: "Cofre arruma seus documentos. Coach explica cada um."           },
            { n: 3, t: "Semana 2-4",  desc: "Primeira análise. Diagnóstico mostra se você pode participar." },
            { n: 4, t: "30-90 dias",  desc: "Primeiro pregão. Sistema te guia até a assinatura."             },
          ].map((s) => (
            <div key={s.n} className="rounded-[10px] bg-surface-card border border-pleita-line p-6 shadow-pl-sm relative">
              <div className="pl-num text-7xl font-semibold absolute top-2 right-3 text-pleita-ink/5">{s.n.toString().padStart(2, "0")}</div>
              <div className="relative">
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-lime font-semibold mb-2">{s.t}</div>
                <p className="text-sm text-pleita-ink leading-snug">{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="rounded-[10px] overflow-hidden relative" style={{ background: "rgb(var(--pleita-ink))" }}>
        <div aria-hidden className="absolute -right-20 -top-20 size-72 rounded-full" style={{ background: "rgb(159 232 112 / .15)" }} />
        <div className="relative px-8 py-14 md:px-14 md:py-20 text-center text-pleita-paper">
          <div className="text-5xl mb-4">🌱</div>
          <h2 className="font-display text-3xl md:text-4xl leading-tight">Comece hoje. O Coach te ajuda<span className="text-pleita-lime">.</span></h2>
          <p className="text-sm text-pleita-paper/70 mt-3 max-w-lg mx-auto">14 dias grátis no plano Em Marcha. Sem cartão. Cancele em 1 clique.</p>
          <button className="mt-6 rounded-full bg-pleita-lime text-pleita-ink px-7 py-3.5 text-sm font-semibold hover:bg-pleita-lime-2">Começar agora →</button>
        </div>
      </section>
    </main>
  );
}

function PersonaProfissionais() {
  return (
    <main className="max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-20">
      {/* Hero */}
      <section className="grid lg:grid-cols-12 gap-10 items-center mb-20">
        <div className="lg:col-span-7">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-3">🏆 Pra quem já licita</div>
          <h1 className="font-display text-4xl md:text-6xl text-pleita-ink leading-[1.05]">Você sabe o que faz. <br/>Acelere<span className="text-pleita-lime">.</span></h1>
          <p className="text-lg text-pleita-stone mt-5 leading-relaxed max-w-xl">Pleita não substitui sua expertise — multiplica. 6 agentes IA em paralelo fazem em 3 segundos o que sua equipe gasta horas: análise jurídica, BDI, score de vitória, peças.</p>
          <div className="flex flex-wrap gap-3 mt-8">
            <PleitaButton size="lg" variant="ink">Ver Veterano · R$ 497/mês</PleitaButton>
            <PleitaButton size="lg" variant="ghost">Demo agendada com vendas →</PleitaButton>
          </div>
        </div>

        {/* Stats stack */}
        <div className="lg:col-span-5 grid grid-cols-2 gap-3">
          {[
            { v: "23h",   l: "economizadas por edital",    desc: "análise manual vs Pleita" },
            { v: "31%",   l: "win rate médio",              desc: "vs 11% sem ML score"      },
            { v: "R$ 47k",l: "economia/ano",                desc: "vs consultor pessoa-física"},
            { v: "3,4s",  l: "p/ análise completa",         desc: "6 agentes em paralelo"    },
          ].map((s) => (
            <div key={s.l} className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
              <div className="pl-num font-semibold text-3xl text-pleita-ink leading-none">{s.v}</div>
              <div className="text-sm text-pleita-ink mt-2">{s.l}</div>
              <div className="pl-num text-[10px] text-pleita-stone-2 mt-1">{s.desc}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Recursos pro */}
      <section className="mb-20">
        <div className="text-center mb-10">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Recursos profissionais</div>
          <h2 className="font-display text-3xl md:text-4xl text-pleita-ink">O que o Veterano libera<span className="text-pleita-lime">.</span></h2>
        </div>
        <div className="grid md:grid-cols-2 gap-5">
          {[
            { ico: "🤖", t: "Score de vitória com ML",         d: "Modelo treinado em 240k licitações históricas do PNCP. Calcula probabilidade real considerando concorrentes, histórico do órgão, valor estimado e seu perfil." },
            { ico: "⚖️", t: "Jurídico com RAG TCU",            d: "Peças com fundamentação automática em acórdãos do TCU. Impugnação, recurso, contrarrazão — todas com base jurisprudencial citada." },
            { ico: "💰", t: "BDI dinâmico + mediana PNCP",     d: "Cálculo de BDI por categoria, com mediana de preços vencedores nos últimos 12 meses no PNCP. Sai do achismo." },
            { ico: "🏆", t: "Cockpit Pós-Vitória (F13)",        d: "Único no mercado. Da homologação ao pagamento — empenho, NF, antecipação de recebíveis com parceiros fintech." },
            { ico: "📊", t: "Multi-CNPJ + dashboard",          d: "Gerencie até 10 CNPJs na mesma conta. Dashboard consolidado com pipeline, vitórias e MRR de cada empresa." },
            { ico: "🔌", t: "API + webhooks",                  d: "Integre com seu CRM/ERP. Notificações de match, mudança de status, novos editais — tudo via webhook." },
          ].map((f) => (
            <article key={f.t} className="rounded-[10px] bg-surface-card border border-pleita-line p-7 shadow-pl-sm hover:shadow-pl-md hover:-translate-y-px transition-all">
              <div className="flex items-start gap-4">
                <div className="size-12 rounded-xl bg-pleita-ink/5 grid place-items-center text-2xl shrink-0">{f.ico}</div>
                <div>
                  <h3 className="font-display text-lg text-pleita-ink">{f.t}</h3>
                  <p className="text-sm text-pleita-stone mt-1 leading-relaxed">{f.d}</p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Workflow */}
      <section className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden mb-20">
        <div className="px-8 py-7 border-b border-pleita-line">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Workflow do profissional</div>
          <h2 className="font-display text-2xl md:text-3xl text-pleita-ink">Seu dia, otimizado<span className="text-pleita-lime">.</span></h2>
        </div>
        <div className="p-8 grid md:grid-cols-4 gap-5 relative">
          {[
            { h: "08h00", e: "📡", t: "Radar matinal",       d: "Caça-Editais varre 312 fontes. Você abre a lista pronta com 28 matches." },
            { h: "10h00", e: "🤖", t: "Análise em lote",     d: "Seleciona 8 editais. 6 agentes rodam em paralelo. 30s depois: vereditos." },
            { h: "14h00", e: "⚖️", t: "Peças geradas",       d: "Para os 'caution': Jurídico já preparou impugnações com base no TCU." },
            { h: "17h00", e: "🏆", t: "Cockpit pós-vitória", d: "Atualiza status dos contratos ganhos. Antecipa recebíveis se quiser." },
          ].map((s, i) => (
            <div key={i} className="relative">
              {i < 3 && <div className="hidden md:block absolute top-6 left-[calc(100%-8px)] w-full h-px bg-pleita-line/60" aria-hidden />}
              <div className="size-12 rounded-full bg-pleita-lime grid place-items-center text-xl mb-3 relative">{s.e}</div>
              <div className="pl-num text-[11px] uppercase tracking-wider text-pleita-stone-2">{s.h}</div>
              <div className="font-display text-base text-pleita-ink mt-1">{s.t}</div>
              <p className="text-xs text-pleita-stone mt-1 leading-relaxed">{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA pro */}
      <section className="rounded-[10px] overflow-hidden border border-pleita-line shadow-pl-md grid lg:grid-cols-2">
        <div className="p-10 md:p-14 bg-surface-card">
          <div className="text-3xl mb-2">🏆</div>
          <h2 className="font-display text-3xl text-pleita-ink leading-tight">Veterano. Para quem já vive de licitar<span className="text-pleita-lime">.</span></h2>
          <p className="text-sm text-pleita-stone mt-3 leading-relaxed">Tudo do Em Marcha + ML score, RAG TCU, BDI dinâmico, Cockpit, multi-CNPJ.</p>
          <div className="pl-num font-semibold text-5xl text-pleita-ink mt-6">R$ 497<span className="text-base text-pleita-stone-2">/mês</span></div>
          <div className="flex flex-wrap gap-3 mt-6">
            <PleitaButton>Começar grátis</PleitaButton>
            <PleitaButton variant="ghost">Comparar planos →</PleitaButton>
          </div>
        </div>
        <div className="p-10 md:p-14 grid place-items-center" style={{ background: "rgb(var(--pleita-ink))" }}>
          <blockquote className="text-pleita-paper">
            <p className="font-display text-2xl leading-tight">"Meu consultor cobrava R$ 3k por processo. Pago R$ 497/mês e analiso ilimitado."</p>
            <footer className="mt-6 flex items-center gap-3 pl-num text-sm">
              <span className="size-10 rounded-full bg-pleita-lime grid place-items-center text-pleita-ink font-semibold text-xs">PF</span>
              <span>
                <span className="block text-pleita-paper">Pedro Faria</span>
                <span className="block text-pleita-paper/60 text-xs">TI SP · Veterano há 14 meses</span>
              </span>
            </footer>
          </blockquote>
        </div>
      </section>
    </main>
  );
}

function ScreenPersonas() {
  const [persona, setPersona] = React.useState("iniciantes");
  return (
    <div className="min-h-full bg-surface-1">
      <PersonaNav persona={persona} setPersona={setPersona} />
      {persona === "iniciantes" ? <PersonaIniciantes /> : <PersonaProfissionais />}
    </div>
  );
}

window.ScreenPersonas = ScreenPersonas;