// ===== Auth (cadastro + onboarding) + Preços público =====

function AuthTerminal() {
  // Static "logs" — atmospheric, no animation needed
  const lines = [
    { c: "rgb(34 197 94)",  t: "✓", x: "Caça-Editais · 312 editais varridos em SP, MG, RJ" },
    { c: "rgb(34 197 94)",  t: "✓", x: "Analista · cruzando preços com PNCP histórico" },
    { c: "rgb(245 158 11)", t: "⚠", x: "Jurídico · cláusula §4º atípica detectada" },
    { c: "rgb(34 197 94)",  t: "✓", x: "Financeiro · BDI 23.5% · margem +18%" },
    { c: "rgb(59 130 246)", t: "→", x: "Documentalista · checando cofre · 12 certidões" },
    { c: "rgb(34 197 94)",  t: "✓", x: "Coach · veredito sintetizado em PT-BR" },
  ];
  return (
    <div className="rounded-[10px] p-5 pl-num text-[11px] leading-[1.6]" style={{ background: "#020810", color: "#9CA3AF" }}>
      <div className="flex items-center gap-1.5 pb-3 mb-3 border-b border-pleita-paper/10">
        <span className="size-2.5 rounded-full bg-red-500/70" />
        <span className="size-2.5 rounded-full bg-yellow-500/70" />
        <span className="size-2.5 rounded-full bg-green-500/70" />
        <span className="ml-2 text-pleita-paper/40">comitê · live</span>
      </div>
      {lines.map((l, i) => (
        <div key={i} className="flex gap-2">
          <span style={{ color: l.c }}>{l.t}</span>
          <span style={{ color: i === lines.length - 1 ? "#E5E7EB" : undefined }}>
            {l.x}
            {i === lines.length - 1 && <span className="ml-1 inline-block w-1.5 h-3 align-middle animate-pulse bg-pleita-lime" />}
          </span>
        </div>
      ))}
    </div>
  );
}

function ScreenAuth() {
  const [mode, setMode] = React.useState("signup"); // signup | login | onboarding
  const [step, setStep] = React.useState(1);

  if (mode === "onboarding") return <OnboardingFlow step={step} setStep={setStep} onDone={() => setMode("signup")} />;

  return (
    <div className="min-h-full grid md:grid-cols-2">
      {/* Esquerda — narrative */}
      <aside className="hidden md:flex flex-col justify-between p-10 lg:p-14 text-pleita-paper relative overflow-hidden" 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 / .12)" }} />
        <div className="relative">
          <Logo size={26} onDark />
          <h1 className="font-display text-3xl lg:text-4xl text-pleita-paper mt-12 leading-tight max-w-md">
            O governo precisa comprar o que você vende<span className="text-pleita-lime">.</span>
          </h1>
          <p className="text-sm text-pleita-paper/70 mt-4 max-w-sm">Em 90 dias, 31% dos iniciantes ganham a primeira licitação. Sem advogado, sem consultor.</p>
        </div>

        <div className="relative">
          <AuthTerminal />
          <div className="mt-6 rounded-[10px] p-5 border border-pleita-paper/10" style={{ background: "rgb(var(--pleita-ink-2))" }}>
            <p className="text-sm text-pleita-paper leading-relaxed">"Nunca tinha licitado. No terceiro mês já tinha R$ 48k em contratos."</p>
            <div className="flex items-center gap-3 mt-4">
              <span className="size-9 rounded-full bg-pleita-lime text-pleita-ink grid place-items-center pl-num text-xs font-semibold">MR</span>
              <div>
                <div className="text-xs text-pleita-paper">Marcos R.</div>
                <div className="pl-num text-[11px] text-pleita-paper/60">Distribuidora MT · plano Em Marcha</div>
              </div>
            </div>
          </div>
        </div>
      </aside>

      {/* Direita — form */}
      <main className="grid place-items-center bg-surface-1 p-6 md:p-10">
        <div className="w-full max-w-md">
          <div className="flex items-center gap-1 mb-8 rounded-full border border-pleita-line bg-surface-card p-1">
            <button onClick={() => setMode("signup")} className={`flex-1 text-xs uppercase tracking-wider pl-num py-2 rounded-full transition-colors ${mode === "signup" ? "bg-pleita-ink text-pleita-paper" : "text-pleita-stone-2"}`}>Criar conta</button>
            <button onClick={() => setMode("login")}  className={`flex-1 text-xs uppercase tracking-wider pl-num py-2 rounded-full transition-colors ${mode === "login"  ? "bg-pleita-ink text-pleita-paper" : "text-pleita-stone-2"}`}>Entrar</button>
          </div>

          <h2 className="font-display text-3xl text-pleita-ink leading-tight">{mode === "signup" ? "Comece grátis em 7 dias" : "Bem-vindo de volta"}<span className="text-pleita-lime">.</span></h2>
          <p className="text-sm text-pleita-stone mt-1">{mode === "signup" ? "Sem cartão de crédito. Cancele quando quiser." : "Continue de onde parou."}</p>

          <form onSubmit={(e) => { e.preventDefault(); setMode("onboarding"); }} className="mt-6 space-y-3">
            {mode === "signup" && (
              <Field label="Nome completo"><input type="text" placeholder="Maria Souza" className="form-pl" /></Field>
            )}
            <Field label="E-mail"><input type="email" placeholder="voce@empresa.com.br" className="form-pl" /></Field>
            {mode === "signup" && (
              <Field label="Telefone"><input type="tel" placeholder="(11) 98765-4321" className="pl-num form-pl" /></Field>
            )}
            <Field label="Senha"><input type="password" placeholder="••••••••" className="form-pl" /></Field>
            {mode === "signup" && (
              <Field label="Confirmar senha"><input type="password" placeholder="••••••••" className="form-pl" /></Field>
            )}

            <button className="w-full mt-2 rounded-full bg-pleita-lime text-pleita-ink py-3 text-sm font-semibold hover:bg-pleita-lime-2 transition-colors">
              {mode === "signup" ? "Criar conta · 7 dias grátis" : "Entrar"}
            </button>
          </form>

          <div className="my-6 flex items-center gap-3"><div className="flex-1 h-px bg-pleita-line" /><span className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">ou</span><div className="flex-1 h-px bg-pleita-line" /></div>
          <div className="grid grid-cols-2 gap-2">
            <button className="rounded-md border border-pleita-line bg-surface-card py-2.5 text-xs text-pleita-ink hover:bg-surface-2">Google</button>
            <button className="rounded-md border border-pleita-line bg-surface-card py-2.5 text-xs text-pleita-ink hover:bg-surface-2">gov.br</button>
          </div>

          <p className="text-[11px] text-pleita-stone-2 mt-6 text-center leading-relaxed">
            Ao continuar você concorda com os <a className="underline">Termos</a> e a <a className="underline">Política de Privacidade</a>. LGPD nativa · dados no Brasil.
          </p>
        </div>
      </main>

      <style>{`.form-pl{display:block;width:100%;border:1px solid rgb(var(--pleita-line));background:rgb(var(--surface-card));border-radius:8px;padding:.65rem .85rem;font-size:.875rem;color:rgb(var(--pleita-stone));outline:none;transition:border .15s}.form-pl:focus{border-color:rgb(var(--pleita-lime));box-shadow:0 0 0 3px rgb(159 232 112 / .15)}.form-pl::placeholder{color:rgb(var(--pleita-stone-2));opacity:.65}`}</style>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <label className="block">
      <span className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 block mb-1.5">{label}</span>
      {children}
    </label>
  );
}

function OnboardingFlow({ step, setStep, onDone }) {
  const total = 3;
  return (
    <div className="min-h-full bg-surface-1 grid place-items-center p-6 md:p-10">
      <div className="w-full max-w-2xl">
        <div className="flex items-center justify-between mb-6">
          <Logo size={22} />
          <button onClick={onDone} className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink">pular configuração →</button>
        </div>

        <div className="flex items-center gap-1.5 mb-8">
          {[1, 2, 3].map((n) => (
            <div key={n} className="flex-1 h-1.5 rounded-full" style={{ background: n <= step ? "rgb(var(--pleita-lime))" : "rgb(var(--pleita-line))" }} />
          ))}
        </div>

        <div className="rounded-[10px] bg-surface-card border border-pleita-line p-8 md:p-10 shadow-pl-sm">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Passo {step} de {total}</div>

          {step === 1 && (
            <>
              <h2 className="font-display text-2xl md:text-3xl text-pleita-ink leading-tight">Sobre sua empresa<span className="text-pleita-lime">.</span></h2>
              <p className="text-sm text-pleita-stone mt-1 mb-6">A gente já preenche tudo a partir do CNPJ.</p>
              <div className="space-y-4">
                <Field label="CNPJ"><input className="form-pl pl-num" placeholder="XX.XXX.XXX/XXXX-XX" /></Field>
                <div className="rounded-md bg-surface-2 p-4 text-sm">
                  <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-1">Razão social · preenchimento automático</div>
                  <div className="text-pleita-ink font-medium">SOUZA ENGENHARIA E COMÉRCIO LTDA</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">Av. Paulista 1842, sl. 504 · São Paulo, SP · ME · ativa</div>
                </div>
                <Field label="Segmento principal">
                  <select className="form-pl">
                    <option>Construção civil e serviços de engenharia</option>
                    <option>Comércio de bens (distribuidor)</option>
                    <option>Tecnologia da informação</option>
                    <option>Alimentos e suprimentos</option>
                  </select>
                </Field>
              </div>
            </>
          )}
          {step === 2 && (
            <>
              <h2 className="font-display text-2xl md:text-3xl text-pleita-ink leading-tight">Seus documentos<span className="text-pleita-lime">.</span></h2>
              <p className="text-sm text-pleita-stone mt-1 mb-6">A Pleita cuida do que você tem. Os que faltam, a gente te ajuda a emitir.</p>
              <ul className="space-y-2">
                {[
                  ["CND Federal",         "ok"],
                  ["FGTS / CRF",          "ok"],
                  ["CNDT",                "warn"],
                  ["Balanço 2025",        "err"],
                  ["Contrato Social",     "ok"],
                  ["SICAF",               "warn"],
                ].map(([n, s]) => {
                  const m = STATUS_META[s];
                  return (
                    <li key={n} className="flex items-center justify-between p-3 rounded-md border border-pleita-line/60">
                      <span className="text-sm text-pleita-ink">{n}</span>
                      <span className="inline-flex items-center gap-1.5 pl-num text-[11px] font-semibold" style={{ color: m.color }}>
                        <span className="size-5 rounded-md grid place-items-center text-xs" style={{ background: m.bg }}>{m.ico}</span>
                        {s === "ok" ? "no cofre" : s === "warn" ? "envie agora" : "não encontrado"}
                      </span>
                    </li>
                  );
                })}
              </ul>
            </>
          )}
          {step === 3 && (
            <>
              <h2 className="font-display text-2xl md:text-3xl text-pleita-ink leading-tight">Sua primeira oportunidade<span className="text-pleita-lime">.</span></h2>
              <p className="text-sm text-pleita-stone mt-1 mb-6">O radar já encontrou 3 compatíveis com o seu CNPJ.</p>
              <ul className="space-y-2">
                {EDITAIS.slice(0, 3).map((e) => (
                  <li key={e.id} className="flex items-center justify-between p-3 rounded-md border border-pleita-line/60 hover:bg-surface-2/40">
                    <div className="min-w-0">
                      <div className="text-sm text-pleita-ink font-medium truncate">{e.objeto}</div>
                      <div className="pl-num text-[11px] text-pleita-stone-2 truncate">{e.orgao} · {e.uf}</div>
                    </div>
                    <span className="pl-num text-sm text-pleita-lime font-semibold">{e.match}/100</span>
                  </li>
                ))}
              </ul>
              <button className="mt-6 w-full rounded-full bg-pleita-lime text-pleita-ink py-3.5 text-sm font-semibold hover:bg-pleita-lime-2">
                Analisar meu primeiro edital →
              </button>
            </>
          )}

          {step < 3 && (
            <div className="flex items-center justify-between mt-8 pt-6 border-t border-pleita-line">
              <button onClick={() => setStep(Math.max(1, step - 1))} className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink">← voltar</button>
              <button onClick={() => setStep(step + 1)} className="pl-num text-xs px-5 py-2.5 rounded-md bg-pleita-ink text-pleita-paper font-semibold">Continuar →</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ===== Preços (página pública) =====

const PLANS = [
  { ico: "🌱", n: "Primeira Licitação", price: 49,    sub: "para dar o primeiro passo",
    feats: ["3 editais analisados/mês", "Diagnóstico de prontidão", "Coach em PT-BR claro", "1 usuário"] },
  { ico: "🚀", n: "Em Marcha",          price: 197,   sub: "para quem quer participar de verdade",  popular: true,
    feats: ["Editais ilimitados", "6 agentes IA completos", "Cofre documental com alertas", "Peças jurídicas básicas", "Modo Iniciante", "Até 3 usuários"] },
  { ico: "🏆", n: "Veterano",           price: 497,   sub: "para licitantes experientes",
    feats: ["Tudo do Em Marcha", "Score de vitória ML", "Jurídico com RAG TCU", "Financeiro com BDI/mediana PNCP", "Cockpit pós-vitória F13", "Até 10 usuários"] },
  { ico: "💼", n: "Assessoria",         price: 1497,  sub: "para consultores multi-CNPJ",
    feats: ["Até 15 CNPJs", "Dashboard multi-cliente", "API de integração", "White-label opcional", "Usuários ilimitados", "SLA dedicado"] },
];

function ScreenPrecos() {
  const [annual, setAnnual] = React.useState(false);
  const FAQ = [
    ["O trial de 7 dias precisa de cartão?", "Não. Você só precisa do e-mail e CNPJ. Cancele em 1 clique."],
    ["Posso trocar de plano depois?", "Sim, a qualquer momento. A cobrança é proporcional."],
    ["Como funciona o plano Assessoria?", "Você gerencia até 15 CNPJs sob a mesma conta, com dashboards consolidados."],
    ["Vocês emitem nota fiscal?", "Sim, NFS-e emitida no ato do pagamento. CNPJ Pleita: 12.345.678/0001-90."],
  ];
  return (
    <div className="min-h-full bg-surface-1">
      <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>
            <a className="text-pleita-ink font-medium">Preços</a>
            <a className="hover:text-pleita-ink">Blog</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>

      <div className="max-w-7xl mx-auto px-6 md:px-10 py-14">
        <header className="text-center mb-10">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Preços</div>
          <h1 className="font-display text-4xl md:text-5xl text-pleita-ink leading-tight">Comece pequeno. Cresça quando vencer<span className="text-pleita-lime">.</span></h1>
          <p className="text-sm text-pleita-stone mt-3 max-w-2xl mx-auto">7 dias grátis no Em Marcha. Sem cartão. Sem letra miúda. Cancele em 1 clique.</p>

          <div className="inline-flex items-center gap-1 mt-7 rounded-full border border-pleita-line bg-surface-card p-1">
            <button onClick={() => setAnnual(false)} className={`pl-num text-xs uppercase tracking-wider px-4 py-2 rounded-full transition-colors ${!annual ? "bg-pleita-ink text-pleita-paper" : "text-pleita-stone-2"}`}>Mensal</button>
            <button onClick={() => setAnnual(true)}  className={`pl-num text-xs uppercase tracking-wider px-4 py-2 rounded-full transition-colors ${annual ? "bg-pleita-ink text-pleita-paper" : "text-pleita-stone-2"}`}>Anual <span className="text-pleita-lime ml-1">−10%</span></button>
          </div>
        </header>

        <section className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
          {PLANS.map((p) => {
            const price = annual ? Math.round(p.price * 0.9) : p.price;
            return (
              <article key={p.n} className={`rounded-[10px] bg-surface-card p-7 shadow-pl-sm flex flex-col ${p.popular ? "border-2 border-pleita-lime relative" : "border border-pleita-line"}`}>
                {p.popular && <span className="absolute -top-3 left-1/2 -translate-x-1/2 pl-num text-[10px] uppercase tracking-wider px-3 py-1 rounded-full font-semibold bg-pleita-lime text-pleita-ink">Mais popular</span>}
                <div className="text-3xl">{p.ico}</div>
                <h3 className="font-display text-xl text-pleita-ink mt-3">{p.n}</h3>
                <p className="text-xs text-pleita-stone-2 mt-1">{p.sub}</p>
                <div className="mt-5 flex items-baseline gap-1">
                  <span className="pl-num font-semibold text-4xl text-pleita-ink">R$ {price}</span>
                  <span className="pl-num text-sm text-pleita-stone-2">/mês</span>
                </div>
                {annual && <div className="pl-num text-[11px] text-pleita-lime mt-1">faturado anual · economiza R$ {p.price * 12 - price * 12}</div>}
                <ul className="mt-5 space-y-2 text-sm text-pleita-stone flex-1">
                  {p.feats.map((f) => (
                    <li key={f} className="flex items-start gap-2"><span className="text-verdict-go shrink-0 mt-0.5">✓</span><span>{f}</span></li>
                  ))}
                </ul>
                <button className={`mt-6 w-full rounded-full py-2.5 text-sm font-semibold transition-colors ${p.popular ? "bg-pleita-lime text-pleita-ink hover:bg-pleita-lime-2" : "border border-pleita-line text-pleita-ink hover:bg-surface-2"}`}>
                  {p.n === "Assessoria" ? "Falar com vendas" : "Começar grátis"}
                </button>
              </article>
            );
          })}
        </section>

        <div className="mt-6 flex flex-wrap items-center justify-center gap-4 text-xs text-pleita-stone-2 pl-num">
          <span className="inline-flex items-center gap-1.5"><span className="text-verdict-go">✓</span> 7 dias grátis</span>
          <span className="inline-flex items-center gap-1.5"><span className="text-verdict-go">✓</span> Sem cartão de crédito</span>
          <span className="inline-flex items-center gap-1.5"><span className="text-verdict-go">✓</span> LGPD nativa</span>
          <span className="inline-flex items-center gap-1.5"><span className="text-verdict-go">✓</span> Cancele em 1 clique</span>
        </div>

        {/* FAQ */}
        <section className="mt-16">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2 text-center">FAQ</div>
          <h2 className="font-display text-3xl text-pleita-ink text-center leading-tight">Perguntas frequentes<span className="text-pleita-lime">.</span></h2>
          <div className="max-w-3xl mx-auto mt-8 space-y-3">
            {FAQ.map(([q, a]) => (
              <details key={q} className="group rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
                <summary className="font-display text-base text-pleita-ink cursor-pointer flex items-center justify-between list-none">
                  {q}
                  <span className="text-pleita-stone-2 group-open:rotate-45 transition-transform">+</span>
                </summary>
                <p className="text-sm text-pleita-stone mt-3 leading-relaxed">{a}</p>
              </details>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section className="mt-16 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-12 md:px-14 md:py-16 text-center text-pleita-paper">
            <h2 className="font-display text-3xl md:text-4xl text-pleita-paper leading-tight">O governo precisa comprar o que você vende<span className="text-pleita-lime">.</span></h2>
            <p className="text-sm text-pleita-paper/70 mt-3">Envie o seu primeiro edital agora.</p>
            <button className="mt-6 rounded-full bg-pleita-lime text-pleita-ink px-6 py-3 text-sm font-semibold hover:bg-pleita-lime-2">Começar grátis · 14 dias →</button>
          </div>
        </section>
      </div>
    </div>
  );
}

window.ScreenAuth = ScreenAuth;
window.ScreenPrecos = ScreenPrecos;