// ===== Pós-Vitória (F13) + Resultados =====

const POSVIT_STEPS = [
  { n: 1, ico: "🏁", t: "Vitória homologada",          status: "done",    desc: "Pregoeiro declarou sua empresa vencedora. CNPJ inabilitado? Veja como contestar." },
  { n: 2, ico: "📋", t: "Habilitação",                  status: "done",    desc: "Documentos enviados e aceitos pelo órgão." },
  { n: 3, ico: "✍️", t: "Assinatura do contrato",      status: "current", desc: "O órgão tem 60 dias para convocá-lo. Quando chegar, siga estes passos." },
  { n: 4, ico: "📑", t: "Empenho",                      status: "pending", desc: "O órgão emite a nota de empenho. É a reserva do valor no orçamento." },
  { n: 5, ico: "🚚", t: "Entrega / Execução",          status: "pending", desc: "Cronograma e alertas de prazo de entrega." },
  { n: 6, ico: "🧾", t: "Nota fiscal",                  status: "pending", desc: "Como emitir corretamente para o governo (CFOP, CST, retenções)." },
  { n: 7, ico: "💰", t: "Pagamento",                    status: "pending", desc: "Histórico do órgão · antecipação de recebíveis disponível." },
];
const STATUS_DOT = {
  done:    { color: "rgb(22 163 74)",  ring: "rgb(34 197 94 / .25)",  ico: "✓" },
  current: { color: "rgb(59 130 246)", ring: "rgb(59 130 246 / .3)",  ico: "●" },
  pending: { color: "rgb(122 143 168)", ring: "rgb(229 227 218 / .8)", ico: "○" },
};

function ScreenPosVitoria({ beginnerMode, setBeginnerMode }) {
  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="pos" crumb={["Pleita", "Pós-Vitória", "Pregão 012/2026"]}>
      {/* Cabeçalho celebratório */}
      <section className="rounded-[10px] overflow-hidden border border-pleita-line shadow-pl-sm mb-8 relative" style={{ background: "linear-gradient(135deg, rgb(var(--pleita-ink)), rgb(var(--pleita-ink-2)))" }}>
        <div aria-hidden className="absolute -right-20 -top-20 size-72 rounded-full" style={{ background: "rgb(159 232 112 / .12)" }} />
        <div className="absolute top-4 right-4 pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded-full font-semibold bg-pleita-lime text-pleita-ink">NOVO · F13</div>
        <div className="relative px-8 py-10 md:px-12 md:py-14 text-pleita-paper">
          <div className="flex items-center gap-2 pl-num text-[11px] uppercase tracking-[0.14em] text-pleita-lime mb-3">🏆 Cockpit Pós-Vitória</div>
          <h1 className="font-display text-3xl md:text-4xl text-pleita-paper leading-tight max-w-3xl">Parabéns! Você venceu o Pregão 012/2026<span className="text-pleita-lime">.</span></h1>
          <div className="pl-num font-semibold text-4xl md:text-5xl text-pleita-lime mt-5">R$ 182.400</div>
          <p className="text-sm text-pleita-paper/70 mt-4 max-w-2xl">Agora vem a parte que ninguém te ensina. A Pleita vai guiar cada passo — assinatura, empenho, NF, pagamento.</p>
        </div>
      </section>

      <div className="grid grid-cols-12 gap-6">
        <div className="col-span-12 lg:col-span-8">
          {/* Timeline */}
          <div className="relative">
            <div className="absolute left-[19px] top-2 bottom-2 w-0.5 bg-pleita-line" aria-hidden />
            <ol className="space-y-4">
              {POSVIT_STEPS.map((s) => {
                const m = STATUS_DOT[s.status];
                const isCurrent = s.status === "current";
                return (
                  <li key={s.n} className="relative pl-14">
                    <span className="absolute left-0 top-1 size-10 rounded-full grid place-items-center text-base font-bold ring-4"
                      style={{ background: s.status === "pending" ? "rgb(var(--surface-card))" : m.color, color: s.status === "pending" ? m.color : "#fff", ringColor: m.ring, boxShadow: `0 0 0 4px ${m.ring}` }}>
                      {s.status === "done" ? "✓" : s.n}
                    </span>
                    <article className={`rounded-[10px] bg-surface-card border p-5 shadow-pl-sm transition-shadow ${isCurrent ? "border-pleita-info ring-1 ring-pleita-info/30 shadow-pl-md" : "border-pleita-line"}`}>
                      <header className="flex items-center justify-between gap-4 flex-wrap">
                        <div className="flex items-center gap-2">
                          <span className="text-xl">{s.ico}</span>
                          <h3 className="font-display text-base text-pleita-ink">{s.t}</h3>
                        </div>
                        <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-md font-semibold" style={{ background: `${m.color}1a`, color: m.color }}>
                          {s.status === "done" ? "concluída" : s.status === "current" ? "etapa atual" : "pendente"}
                        </span>
                      </header>
                      <p className="text-sm text-pleita-stone mt-2 leading-relaxed">{s.desc}</p>

                      {isCurrent && (
                        <div className="mt-4 pt-4 border-t border-pleita-line/60">
                          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Checklist quando chegar a convocação</div>
                          <ul className="grid sm:grid-cols-3 gap-2 text-xs">
                            {["Documento de identificação", "Procuração (se representante)", "CNPJ atualizado"].map((c) => (
                              <li key={c} className="flex items-center gap-2 rounded-md bg-surface-2/50 px-2.5 py-1.5">
                                <span className="text-verdict-go">✓</span>{c}
                              </li>
                            ))}
                          </ul>
                          <button className="mt-4 pl-num text-xs px-4 py-2 rounded-md bg-pleita-lime text-pleita-ink font-semibold">Registrar convocação recebida</button>
                        </div>
                      )}

                      {s.n === 4 && (
                        <a className="inline-flex items-center gap-1 mt-3 text-xs text-pleita-info pl-num hover:underline" href="#">Consultar empenho no SIAFI →</a>
                      )}
                    </article>
                  </li>
                );
              })}
            </ol>
          </div>
        </div>

        <aside className="col-span-12 lg:col-span-4 space-y-4">
          <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">💰 Inteligência financeira</div>
            <div>
              <div className="pl-num font-semibold text-3xl text-pleita-ink leading-none">28 dias</div>
              <div className="text-xs text-pleita-stone-2 mt-1">tempo médio de pagamento deste órgão</div>
            </div>
            <div className="mt-4 pt-4 border-t border-pleita-line/60">
              <div className="text-xs text-pleita-stone mb-2">Quer antecipar o recebível?</div>
              <div className="flex items-baseline gap-1">
                <span className="pl-num font-semibold text-lg text-pleita-ink">1,8%</span>
                <span className="pl-num text-xs text-pleita-stone-2">a.m. via parceiros fintech</span>
              </div>
              <button className="mt-3 w-full pl-num text-xs px-3 py-2 rounded-md bg-pleita-lime text-pleita-ink font-semibold">Simular antecipação →</button>
            </div>
          </div>

          <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">🎓 Próximo passo do Coach</div>
            <p className="text-sm text-pleita-ink leading-relaxed">
              <strong>Não tem procuração no contrato social?</strong> Solicite ao seu contador a emissão de procuração específica para licitações antes da convocação chegar — economiza 5 dias úteis.
            </p>
            <button className="mt-3 pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line text-pleita-ink hover:bg-surface-2">Ver modelo de procuração</button>
          </div>

          <div className="rounded-[10px] p-5 border border-pleita-line shadow-pl-sm" style={{ background: "rgb(var(--pleita-lime) / .12)" }}>
            <div className="text-base">🏆</div>
            <div className="font-display text-base text-pleita-ink mt-1">Compartilhe a vitória</div>
            <p className="text-xs text-pleita-stone mt-1 leading-relaxed">Conte pra equipe que vocês ganharam mais uma. Card automático para WhatsApp/LinkedIn.</p>
            <button className="mt-3 pl-num text-xs px-3 py-1.5 rounded-md bg-pleita-ink text-pleita-paper">Gerar card →</button>
          </div>
        </aside>
      </div>
    </AppFrame>
  );
}

// ----- Resultados -----

const RESULTADOS_BARS = [
  { m: "Dez", v: 0 }, { m: "Jan", v: 0 }, { m: "Fev", v: 12000 },
  { m: "Mar", v: 0 }, { m: "Abr", v: 28000 }, { m: "Mai", v: 54000 }, { m: "Jun", v: 94200 },
];

function ScreenResultados({ beginnerMode, setBeginnerMode }) {
  const max = Math.max(...RESULTADOS_BARS.map(b => b.v));
  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="analytics" crumb={["Pleita", "Resultados"]}>
      <header className="mb-6">
        <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">📊 Resultados</div>
        <h1 className="font-display text-3xl text-pleita-ink leading-tight">Os números que importam<span className="text-pleita-lime">.</span></h1>
        <p className="text-sm text-pleita-stone mt-2">Últimos 6 meses · comparado com o período anterior.</p>
      </header>

      {/* BigNumber hero */}
      <section className="rounded-[10px] overflow-hidden mb-6 relative" style={{ background: "rgb(var(--pleita-ink))" }}>
        <div aria-hidden className="absolute -right-16 -top-16 size-72 rounded-full" style={{ background: "rgb(159 232 112 / .15)" }} />
        <div className="relative px-8 py-10 md:px-12 md:py-12 text-pleita-paper grid md:grid-cols-2 gap-6 items-center">
          <div>
            <div className="pl-num text-[11px] uppercase tracking-[0.14em] text-pleita-lime mb-3">Total ganho</div>
            <div className="pl-num font-semibold text-pleita-paper leading-none" style={{ fontSize: "clamp(40px, 6vw, 76px)" }}>R$ 94.200</div>
            <p className="text-sm text-pleita-paper/70 mt-4 max-w-md">em contratos nos últimos 6 meses. Você economizou ~<span className="text-pleita-lime">R$ 14.130</span> em honorários de consultoria.</p>
          </div>
          {/* Bar chart inline */}
          <div className="h-40 flex items-end justify-between gap-1">
            {RESULTADOS_BARS.map((b, i) => (
              <div key={i} className="flex-1 flex flex-col items-center gap-2">
                <div className="w-full rounded-t-md" style={{ height: `${(b.v / max) * 100}%`, minHeight: b.v > 0 ? 8 : 0, background: "rgb(var(--pleita-lime))" }} />
                <div className="pl-num text-[10px] text-pleita-paper/60">{b.m}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mini cards */}
      <section className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3 mb-6">
        {[
          { ico: "🎯", l: "Taxa de vitória",   v: "34%",       sub: "4 vitórias em 12 participações" },
          { ico: "⏱",  l: "Tempo médio",      v: "18 dias",   sub: "da análise ao contrato" },
          { ico: "📊", l: "Processos",         v: "12",        sub: "acompanhados em 6 meses" },
          { ico: "💰", l: "Ticket médio",      v: "R$ 23.550", sub: "por contrato ganho" },
        ].map((c) => (
          <article key={c.l} className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm hover:shadow-pl-md transition-shadow">
            <div className="flex items-center justify-between">
              <div className="size-9 rounded-md bg-pleita-lime/15 grid place-items-center text-base">{c.ico}</div>
              <span className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{c.l}</span>
            </div>
            <div className="pl-num font-semibold text-2xl text-pleita-ink mt-4 leading-none">{c.v}</div>
            <div className="text-xs text-pleita-stone-2 mt-2">{c.sub}</div>
          </article>
        ))}
      </section>

      {/* Wrapped preview */}
      <section className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="rounded-[10px] bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Sua jornada · Maio 2026</div>
          <h2 className="font-display text-lg text-pleita-ink mb-4">Relatório mensal compartilhável</h2>
          <ul className="space-y-3 text-sm">
            {[
              ["🏆", "1 vitória neste mês", "Pregão 012/2026 · SES-MG"],
              ["⚡", "3 processos ativos", "em diferentes estágios"],
              ["💰", "R$ 54.200 em pipeline", "+86% vs mês anterior"],
              ["⏱", "23h economizadas", "vs análise manual"],
            ].map(([i, t, d]) => (
              <li key={t} className="flex items-center gap-3">
                <span className="size-8 rounded-md bg-surface-2 grid place-items-center text-base">{i}</span>
                <div className="flex-1">
                  <div className="text-pleita-ink font-medium">{t}</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2">{d}</div>
                </div>
              </li>
            ))}
          </ul>
          <button className="mt-5 w-full pl-num text-xs px-4 py-2.5 rounded-md bg-pleita-lime text-pleita-ink font-semibold">Compartilhar relatório →</button>
        </div>

        <div className="rounded-[10px] p-6 shadow-pl-sm relative overflow-hidden" style={{ background: "linear-gradient(135deg, #9FE870, #7ED957)" }}>
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-ink/60 mb-3">Card shareável · preview</div>
          <div className="text-pleita-ink">
            <div className="font-display text-2xl leading-tight mb-2">Em Marcha,<br/>2026 está sendo seu ano.</div>
            <div className="pl-num text-5xl font-semibold leading-none my-6">R$ 94.200</div>
            <div className="text-sm">em contratos públicos · score de maturidade <strong>82/100</strong></div>
            <div className="mt-8 pt-4 border-t border-pleita-ink/20 flex items-center justify-between pl-num text-[10px] uppercase tracking-wider">
              <span>via Pleita.pro</span>
              <span>jun · 2026</span>
            </div>
          </div>
        </div>
      </section>
    </AppFrame>
  );
}

window.ScreenPosVitoria = ScreenPosVitoria;
window.ScreenResultados = ScreenResultados;