// ===== Onboarding · wizard 4 passos =====
// Full-screen standalone, fora do app shell.

const ONBOARDING_STEPS = [
  { id: "empresa",  emoji: "🏢", n: "Sua empresa",     d: "CNPJ e dados básicos" },
  { id: "atuacao",  emoji: "🎯", n: "O que você vende", d: "Categorias, palavras-chave, ticket médio" },
  { id: "regiao",   emoji: "🗺️", n: "Onde você atua",   d: "Estados, municípios, raio de entrega" },
  { id: "docs",     emoji: "📋", n: "Cofre inicial",    d: "Anexe os documentos que tiver" },
];

function ProgressDots({ step }) {
  return (
    <div className="flex items-center gap-2">
      {ONBOARDING_STEPS.map((s, i) => {
        const done = i < step;
        const curr = i === step;
        return (
          <React.Fragment key={s.id}>
            <div className={`size-7 rounded-full grid place-items-center pl-num text-[11px] font-semibold transition-colors ${
              done ? "bg-pleita-ink text-pleita-paper" :
              curr ? "bg-pleita-lime text-pleita-ink" :
              "bg-surface-2 text-pleita-stone-2"
            }`}>
              {done ? "✓" : i + 1}
            </div>
            {i < ONBOARDING_STEPS.length - 1 && (
              <div className={`h-px w-12 ${done ? "bg-pleita-ink" : "bg-pleita-line"}`} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

function StepShell({ step, children, eyebrow, title, sub }) {
  const meta = ONBOARDING_STEPS[step];
  return (
    <div className="max-w-3xl mx-auto px-6">
      <div className="pl-num text-xs uppercase tracking-[0.18em] text-pleita-stone-2">{eyebrow || `Passo ${step + 1} de ${ONBOARDING_STEPS.length}`}</div>
      <h1 className="font-display text-3xl md:text-4xl text-pleita-ink leading-tight mt-2">
        {title}<span className="text-pleita-lime">.</span>
      </h1>
      {sub && <p className="text-sm text-pleita-stone mt-2 leading-relaxed">{sub}</p>}
      <div className="mt-8">{children}</div>
    </div>
  );
}

function Field({ label, sub, children }) {
  return (
    <div className="rounded-xl border border-pleita-line bg-surface-card p-5">
      <div className="text-sm text-pleita-ink font-medium">{label}</div>
      {sub && <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5 mb-3">{sub}</div>}
      <div className="mt-2">{children}</div>
    </div>
  );
}

function Step1() {
  const [cnpj, setCnpj] = React.useState("32.948.117/0001-50");
  const [lookedUp, setLookedUp] = React.useState(true);
  return (
    <StepShell step={0} title="Vamos começar pelo seu CNPJ" sub="A gente busca os dados públicos no Receita Federal pra você não digitar nada.">
      <div className="grid gap-4">
        <Field label="CNPJ" sub="Apenas números ou com formatação">
          <div className="flex gap-2">
            <input
              value={cnpj}
              onChange={(e) => setCnpj(e.target.value)}
              className="flex-1 px-4 py-3 rounded-md border border-pleita-line bg-surface-1 text-pleita-ink pl-num text-base"
            />
            <PleitaButton variant="ink" onClick={() => setLookedUp(true)}>
              <Icons.Search className="size-4" /> Consultar
            </PleitaButton>
          </div>
        </Field>

        {lookedUp && (
          <div className="rounded-xl border border-verdict-go/30 bg-verdict-go/5 p-5">
            <div className="flex items-start gap-3">
              <span className="text-verdict-go text-lg">✓</span>
              <div className="flex-1">
                <div className="text-sm font-medium text-pleita-ink">Encontramos sua empresa na Receita Federal</div>
                <dl className="grid grid-cols-2 gap-x-6 gap-y-2 mt-4 text-sm">
                  {[
                    ["Razão social", "Souza Engenharia LTDA-ME"],
                    ["Nome fantasia", "Souza Engenharia"],
                    ["Porte", "EPP — Empresa de Pequeno Porte"],
                    ["Capital social", "R$ 250.000"],
                    ["Abertura", "14/03/2019"],
                    ["Município", "Campinas — SP"],
                  ].map(([k, v]) => (
                    <React.Fragment key={k}>
                      <dt className="pl-num text-[11px] uppercase tracking-wider text-pleita-stone-2 self-center">{k}</dt>
                      <dd className="text-pleita-ink">{v}</dd>
                    </React.Fragment>
                  ))}
                </dl>
              </div>
            </div>
          </div>
        )}

        <Field label="CNAEs ativos" sub="Selecione os principais — afetam o match com editais">
          <div className="flex flex-wrap gap-2">
            {[
              { cod: "42.21-9-04", n: "Construção de redes de energia", check: true },
              { cod: "43.21-5-00", n: "Instalação elétrica predial",     check: true },
              { cod: "43.22-3-01", n: "Hidráulica e gás",                check: false },
              { cod: "71.12-0-00", n: "Engenharia consultoria",          check: true },
            ].map((c) => (
              <label key={c.cod} className={`flex items-center gap-2 px-3 py-2 rounded-full border text-xs cursor-pointer ${c.check ? "bg-pleita-lime/15 border-pleita-lime/50 text-pleita-ink" : "bg-surface-2 border-pleita-line text-pleita-stone"}`}>
                <input type="checkbox" defaultChecked={c.check} className="accent-pleita-ink size-3" />
                <span className="pl-num text-[10px] text-pleita-stone-2">{c.cod}</span>
                <span>{c.n}</span>
              </label>
            ))}
          </div>
        </Field>
      </div>
    </StepShell>
  );
}

function Step2() {
  const [valor, setValor] = React.useState(50);
  return (
    <StepShell step={1} title="O que você vende ou presta de serviço" sub="A IA aprende seu vocabulário pra trazer só editais que combinam.">
      <div className="grid gap-4">
        <Field label="Categorias principais" sub="Você pode adicionar mais depois">
          <div className="flex flex-wrap gap-2">
            {[
              { e: "⚡", n: "Instalações elétricas", on: true },
              { e: "🏗️", n: "Obras de pequeno porte", on: true },
              { e: "🔧", n: "Manutenção predial", on: true },
              { e: "📡", n: "Cabeamento estruturado", on: false },
              { e: "💡", n: "Iluminação pública", on: false },
              { e: "⛽", n: "Subestações", on: false },
            ].map((c) => (
              <button key={c.n} className={`inline-flex items-center gap-2 px-3 py-2 rounded-full text-sm border transition-colors ${c.on ? "bg-pleita-ink text-pleita-paper border-pleita-ink" : "bg-surface-card text-pleita-stone border-pleita-line hover:border-pleita-ink"}`}>
                <span>{c.e}</span>{c.n}
              </button>
            ))}
            <button className="inline-flex items-center gap-1.5 px-3 py-2 rounded-full text-xs border border-dashed border-pleita-line text-pleita-stone-2 hover:text-pleita-ink hover:border-pleita-ink">
              <Icons.Plus className="size-3" /> adicionar
            </button>
          </div>
        </Field>

        <Field label="Palavras-chave personalizadas" sub="Termos do edital que devem te chamar atenção (uma por linha)">
          <textarea
            defaultValue={"quadros de comando\nfornecimento e instalação\nsubestação abaixadora\nreatores eletrônicos"}
            className="w-full px-4 py-3 rounded-md border border-pleita-line bg-surface-1 text-pleita-ink text-sm h-28 pl-num leading-relaxed"
          />
        </Field>

        <Field label={`Ticket médio dos seus contratos · R$ ${valor * 10}.000`} sub="Filtra editais fora do seu porte">
          <input
            type="range" min={5} max={500} value={valor}
            onChange={(e) => setValor(+e.target.value)}
            className="w-full accent-pleita-ink"
          />
          <div className="flex justify-between mt-2 pl-num text-[11px] text-pleita-stone-2">
            <span>R$ 50k</span><span>R$ 1M</span><span>R$ 5M+</span>
          </div>
        </Field>
      </div>
    </StepShell>
  );
}

function Step3() {
  return (
    <StepShell step={2} title="Onde você consegue atender" sub="Editais fora do seu raio são automaticamente descartados.">
      <div className="grid md:grid-cols-2 gap-4">
        <Field label="Estados que atende" sub="Pode marcar vários — pondera frete e logística">
          <div className="grid grid-cols-4 gap-1.5">
            {["AC","AL","AP","AM","BA","CE","DF","ES","GO","MA","MT","MS","MG","PA","PB","PR","PE","PI","RJ","RN","RS","RO","RR","SC","SP","SE","TO"].map((uf) => {
              const on = ["SP","MG","RJ"].includes(uf);
              return (
                <button key={uf} className={`pl-num text-xs py-2 rounded-md border transition-colors ${on ? "bg-pleita-ink text-pleita-paper border-pleita-ink" : "bg-surface-card text-pleita-stone border-pleita-line hover:border-pleita-ink"}`}>
                  {uf}
                </button>
              );
            })}
          </div>
        </Field>

        <Field label="Raio máximo a partir da sede" sub="Para tomadas de preço com restrição geográfica">
          <div className="aspect-square rounded-xl bg-surface-2 border border-pleita-line relative overflow-hidden grid place-items-center">
            {/* Stylized map placeholder */}
            <div className="absolute inset-0 opacity-30" style={{ backgroundImage: "linear-gradient(45deg, transparent 48%, rgb(var(--pleita-line)) 50%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgb(var(--pleita-line)) 50%, transparent 52%)", backgroundSize: "24px 24px" }} />
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-24 rounded-full border-2 border-pleita-lime bg-pleita-lime/15" />
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-3 rounded-full bg-pleita-ink ring-4 ring-pleita-paper" />
            <div className="absolute bottom-3 left-3 pl-num text-[10px] text-pleita-stone-2 bg-surface-card/80 backdrop-blur px-2 py-1 rounded">
              Campinas (sede) · raio 250km
            </div>
          </div>
          <input type="range" min={10} max={1000} defaultValue={250} className="w-full mt-3 accent-pleita-ink" />
          <div className="flex justify-between mt-1.5 pl-num text-[10px] text-pleita-stone-2">
            <span>10 km</span><span>250 km</span><span>1.000 km</span>
          </div>
        </Field>
      </div>

      <div className="mt-4 rounded-xl bg-pleita-paper-2/60 border border-pleita-line p-5">
        <div className="text-sm text-pleita-ink font-medium mb-2">Onde quer ver oportunidades?</div>
        <div className="flex flex-wrap gap-2">
          {[
            ["Federais", "compras.gov.br · ComprasNet · PNCP", true],
            ["Estaduais", "BEC-SP · PCP-MG · BLL-PR", true],
            ["Municipais", "portais municipais conveniados", false],
            ["Mistas", "concessões, parcerias público-privadas", false],
          ].map(([n, d, on]) => (
            <label key={n} className={`flex-1 min-w-[220px] flex items-start gap-3 px-4 py-3 rounded-md border cursor-pointer ${on ? "border-pleita-ink bg-surface-card" : "border-pleita-line bg-transparent"}`}>
              <input type="checkbox" defaultChecked={on} className="mt-1 accent-pleita-ink" />
              <div><div className="text-sm text-pleita-ink font-medium">{n}</div><div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{d}</div></div>
            </label>
          ))}
        </div>
      </div>
    </StepShell>
  );
}

function Step4() {
  const DOC_LIST = [
    { id: "cnpj",  n: "Cartão CNPJ",                       have: true,  vence: "—",          dica: "Sempre atualizado pela Receita." },
    { id: "fed",   n: "Certidão Federal",                  have: true,  vence: "12 nov",     dica: "regularidade.receita.fazenda.gov.br" },
    { id: "est",   n: "Certidão Estadual",                 have: true,  vence: "05 dez",     dica: "Secretaria de Fazenda do seu estado." },
    { id: "mun",   n: "Certidão Municipal",                have: false, vence: "—",          dica: "Prefeitura · setor de Tributos." },
    { id: "fgts",  n: "Certificado de Regularidade FGTS",  have: true,  vence: "21 nov",     dica: "consulta-crf.caixa.gov.br" },
    { id: "trab",  n: "Certidão Trabalhista (CNDT)",       have: false, vence: "—",          dica: "cndt-certidao.tst.jus.br" },
    { id: "bal",   n: "Balanço patrimonial 2025",          have: false, vence: "—",          dica: "Peça ao seu contador (DRE+BP)." },
    { id: "atc",   n: "Atestado de capacidade técnica",    have: false, vence: "—",          dica: "Cliente anterior atesta seu serviço." },
  ];
  return (
    <StepShell step={3} title="Vamos montar seu cofre" sub="Anexe agora o que tiver. Pra cada documento que falta, o Documentalista te lembra de emitir antes do próximo pregão.">
      <div className="rounded-xl border border-dashed border-pleita-line bg-surface-2/40 p-8 text-center mb-4">
        <div className="text-3xl mb-2">📋</div>
        <div className="text-sm text-pleita-ink font-medium">Arraste PDFs aqui ou clique pra escolher</div>
        <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">Aceitamos: PDF · imagem · ZIP até 25MB cada</div>
      </div>
      <div className="rounded-xl border border-pleita-line bg-surface-card overflow-hidden">
        {DOC_LIST.map((d, i) => (
          <div key={d.id} className={`flex items-center gap-4 px-5 py-3.5 ${i > 0 ? "border-t border-pleita-line" : ""}`}>
            <div className={`size-8 rounded-md grid place-items-center text-base ${d.have ? "bg-verdict-go/15" : "bg-surface-2"}`}>
              {d.have ? <span className="text-verdict-go">✓</span> : <span className="text-pleita-stone-2">+</span>}
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-sm text-pleita-ink truncate">{d.n}</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 truncate">{d.have ? `Vence em ${d.vence}` : d.dica}</div>
            </div>
            {d.have ? (
              <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-verdict-go/15 text-verdict-go">anexado</span>
            ) : (
              <button className="pl-num text-[10px] uppercase tracking-wider px-3 py-1.5 rounded border border-pleita-line hover:bg-surface-2 text-pleita-stone">
                emitir depois
              </button>
            )}
          </div>
        ))}
      </div>
      <div className="mt-4 rounded-md bg-pleita-info/10 border border-pleita-info/30 p-4 flex items-start gap-3">
        <span className="text-pleita-info">💡</span>
        <p className="text-xs text-pleita-stone leading-relaxed">Não precisa ter tudo agora — você pode entrar no app e pular pra Configurações &gt; Cofre quando quiser. O Caça-Editais já começa a trabalhar enquanto isso.</p>
      </div>
    </StepShell>
  );
}

function ScreenOnboarding() {
  const [step, setStep] = React.useState(0);
  const StepView = [Step1, Step2, Step3, Step4][step];
  const isLast = step === ONBOARDING_STEPS.length - 1;

  return (
    <div className="h-full overflow-y-auto scrollbar-pl bg-surface-1">
      {/* Header */}
      <header className="sticky top-0 z-10 bg-surface-1/95 backdrop-blur border-b border-pleita-line">
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          <Logo size={20} />
          <ProgressDots step={step} />
          <button className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink">Salvar e sair</button>
        </div>
      </header>

      <main className="py-12 pb-32">
        <StepView />
      </main>

      {/* Footer ações */}
      <footer className="fixed bottom-0 inset-x-0 border-t border-pleita-line bg-surface-1/95 backdrop-blur z-10">
        <div className="max-w-3xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
          <button
            onClick={() => setStep(Math.max(0, step - 1))}
            disabled={step === 0}
            className="pl-num text-sm text-pleita-stone-2 hover:text-pleita-ink disabled:opacity-30 inline-flex items-center gap-2"
          >
            <Icons.ChevronRight className="size-4 rotate-180" /> Voltar
          </button>
          <div className="pl-num text-[11px] text-pleita-stone-2 uppercase tracking-wider hidden md:block">
            {ONBOARDING_STEPS[step].n} · passo {step + 1} de {ONBOARDING_STEPS.length}
          </div>
          {isLast ? (
            <PleitaButton variant="lime" size="lg">
              Entrar no app <Icons.ArrowUpRight className="size-4" />
            </PleitaButton>
          ) : (
            <PleitaButton variant="ink" onClick={() => setStep(Math.min(step + 1, ONBOARDING_STEPS.length - 1))}>
              Continuar <Icons.ChevronRight className="size-4" />
            </PleitaButton>
          )}
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { ScreenOnboarding });