// ===== Storybook · component library =====

function SBSection({ title, sub, children }) {
  return (
    <section className="mb-12">
      <div className="mb-5">
        <h2 className="font-display text-2xl text-pleita-ink leading-tight">{title}<span className="text-pleita-lime">.</span></h2>
        {sub && <p className="text-sm text-pleita-stone mt-1">{sub}</p>}
      </div>
      {children}
    </section>
  );
}

function SBSwatch({ name, val, fg = "text-pleita-paper" }) {
  return (
    <div className="rounded-xl border border-pleita-line bg-surface-card overflow-hidden">
      <div className="h-20" style={{ background: val }} />
      <div className="p-3">
        <div className="text-sm text-pleita-ink font-medium">{name}</div>
        <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5">{val}</div>
      </div>
    </div>
  );
}

function SBBox({ children, w = "auto" }) {
  return (
    <div className="rounded-xl border border-dashed border-pleita-line bg-surface-2/30 p-6 grid place-items-center min-h-[120px]" style={{ width: w }}>
      {children}
    </div>
  );
}

function ScreenStorybook() {
  return (
    <div className="h-full overflow-y-auto scrollbar-pl bg-surface-1">
      <div className="max-w-7xl mx-auto px-4 md:px-8 py-10">
        <header className="mb-12">
          <div className="pl-num text-xs uppercase tracking-[0.18em] text-pleita-stone-2">Design system</div>
          <h1 className="font-display text-4xl md:text-5xl text-pleita-ink mt-1 leading-tight">Storybook<span className="text-pleita-lime">.</span></h1>
          <p className="text-sm text-pleita-stone mt-2 max-w-2xl">Catálogo vivo dos componentes de marca. Use isso pra montar telas novas sem reinventar.</p>
        </header>

        <SBSection title="Logo" sub="Marca composta (símbolo + wordmark) e símbolo isolado.">
          <div className="grid md:grid-cols-3 gap-4">
            <SBBox><Logo size={26} /></SBBox>
            <SBBox><Logo size={20} variant="mark" /></SBBox>
            <div className="rounded-xl bg-pleita-ink p-6 grid place-items-center min-h-[120px]"><Logo size={26} onDark /></div>
          </div>
        </SBSection>

        <SBSection title="Cores" sub="Tokens brand (ink/lime/paper) são estáveis entre temas. Só superfícies trocam.">
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
            <SBSwatch name="ink"        val="#0F1E3A" />
            <SBSwatch name="ink-2"      val="#1B2D4F" />
            <SBSwatch name="lime"       val="#9FE870" />
            <SBSwatch name="lime-2"     val="#B8F299" />
            <SBSwatch name="paper"      val="#FAFAF7" />
            <SBSwatch name="paper-2"    val="#F0EFE8" />
            <SBSwatch name="stone"      val="#2C2C2C" />
            <SBSwatch name="stone-2"    val="#6B6B6B" />
            <SBSwatch name="line"       val="#E5E3DA" />
            <SBSwatch name="verdict.go" val="#16A34A" />
            <SBSwatch name="caution"    val="#F59E0B" />
            <SBSwatch name="stop"       val="#DC2626" />
          </div>
        </SBSection>

        <SBSection title="Tipografia" sub="DM Serif Display + DM Sans + JetBrains Mono.">
          <div className="space-y-4">
            <div className="p-6 rounded-xl bg-surface-card border border-pleita-line">
              <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">font-display · DM Serif</div>
              <div className="font-display text-6xl text-pleita-ink leading-none">A Pleita pleiteia<span className="text-pleita-lime">.</span></div>
            </div>
            <div className="grid md:grid-cols-2 gap-3">
              <div className="p-5 rounded-xl bg-surface-card border border-pleita-line">
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">font-sans · DM Sans</div>
                <p className="text-base text-pleita-ink leading-relaxed">Verbo no imperativo. Direto sem floreio. Confia no leitor.</p>
              </div>
              <div className="p-5 rounded-xl bg-surface-card border border-pleita-line">
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">font-mono · JetBrains</div>
                <div className="pl-num text-sm text-pleita-ink">R$ 312.000,00 · 14:32:18 · EDT-2026-04-A1B2</div>
              </div>
            </div>
          </div>
        </SBSection>

        <SBSection title="Veredicto" sub="3 estados visuais — GO / CAUTION / STOP — no badge e no hero.">
          <div className="grid md:grid-cols-2 gap-4">
            <div className="rounded-xl bg-surface-card border border-pleita-line p-6 flex flex-col gap-3">
              <VerdictBadge verdict="go" size="lg" />
              <VerdictBadge verdict="caution" size="lg" />
              <VerdictBadge verdict="stop" size="lg" />
              <VerdictBadge verdict="go" size="md" hideEmoji />
              <VerdictBadge verdict="caution" size="sm" />
            </div>
            <div className="rounded-xl bg-surface-card border border-pleita-line p-6 grid grid-cols-3 gap-4 place-items-center">
              <VerdictHero verdict="go" />
              <VerdictHero verdict="caution" />
              <VerdictHero verdict="stop" />
            </div>
          </div>
        </SBSection>

        <SBSection title="Botões" sub="3 variantes · 3 tamanhos. Lime só pra ação primária.">
          <div className="rounded-xl bg-surface-card border border-pleita-line p-6 flex flex-wrap gap-3 items-center">
            <PleitaButton variant="lime" size="sm">Pequeno</PleitaButton>
            <PleitaButton variant="lime">Padrão</PleitaButton>
            <PleitaButton variant="lime" size="lg">Grande</PleitaButton>
            <span className="w-px h-8 bg-pleita-line mx-2" />
            <PleitaButton variant="ink">Ink</PleitaButton>
            <PleitaButton variant="ghost">Ghost</PleitaButton>
          </div>
        </SBSection>

        <SBSection title="AgentCard" sub="Todos os 6 agentes — score opcional, modo compacto opcional.">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {Object.keys(AGENTS).map((k, i) => (
              <AgentCard key={k} agentKey={k} score={89 - i * 7} highlight={i === 0} />
            ))}
          </div>
        </SBSection>

        <SBSection title="Inputs" sub="Padrões base. Tudo respeita a cor de superfície do tema.">
          <div className="grid md:grid-cols-2 gap-4">
            <div className="rounded-xl bg-surface-card border border-pleita-line p-5 space-y-3">
              <input placeholder="Texto curto" className="w-full px-3 py-2.5 rounded-md border border-pleita-line bg-surface-1 text-sm" />
              <input placeholder="CNPJ ou e-mail" className="w-full px-3 py-2.5 rounded-md border border-pleita-line bg-surface-1 text-sm pl-num" />
              <textarea placeholder="Texto longo" className="w-full px-3 py-2.5 rounded-md border border-pleita-line bg-surface-1 text-sm h-20" />
              <select className="w-full px-3 py-2.5 rounded-md border border-pleita-line bg-surface-card text-sm">
                <option>Selecione</option>
              </select>
            </div>
            <div className="rounded-xl bg-surface-card border border-pleita-line p-5 space-y-3">
              <label className="flex items-center gap-2 text-sm text-pleita-ink"><input type="checkbox" defaultChecked className="accent-pleita-ink size-4" /> Checkbox marcado</label>
              <label className="flex items-center gap-2 text-sm text-pleita-ink"><input type="radio" defaultChecked className="accent-pleita-ink" /> Radio</label>
              <div>
                <input type="range" defaultValue="64" className="w-full accent-pleita-ink" />
                <div className="flex justify-between mt-1 pl-num text-[10px] text-pleita-stone-2"><span>0</span><span>50</span><span>100</span></div>
              </div>
              <label className="flex items-center gap-3 text-sm text-pleita-ink">
                <span className="relative inline-block">
                  <input type="checkbox" defaultChecked className="sr-only peer" />
                  <span className="block w-10 h-6 rounded-full bg-pleita-line peer-checked:bg-pleita-ink transition-colors" />
                  <span className="absolute top-1 size-4 rounded-full bg-white transition-transform translate-x-5" />
                </span>
                Toggle ligado
              </label>
            </div>
          </div>
        </SBSection>

        <SBSection title="Chips e tags" sub="Pílulas curtas — sempre mono, sempre uppercase pra metadata.">
          <div className="rounded-xl bg-surface-card border border-pleita-line p-6 flex flex-wrap gap-2">
            <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-verdict-go/15 text-verdict-go font-semibold">ativo</span>
            <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-verdict-caution/15 text-verdict-caution font-semibold">cuidado</span>
            <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-verdict-stop/15 text-verdict-stop font-semibold">crítico</span>
            <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-pleita-info/15 text-pleita-info font-semibold">info</span>
            <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-pleita-paper-2 text-pleita-stone font-semibold">neutro</span>
            <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-pleita-lime/30 text-pleita-ink font-semibold">brand</span>
          </div>
        </SBSection>

        <SBSection title="SectionHeader" sub="Header padrão de tela com eyebrow + título + ação.">
          <div className="rounded-xl bg-surface-card border border-pleita-line p-6">
            <SectionHeader
              eyebrow="Editais"
              title="Match desta semana"
              description="A IA filtrou 8 das 312 oportunidades publicadas — abre antes do prazo."
              actions={<PleitaButton variant="ink" size="sm">Ver tudo</PleitaButton>}
            />
          </div>
        </SBSection>

        <SBSection title="Sombras" sub="Apenas duas: pl-sm pra cards, pl-md pra hover. Nunca shadow-2xl.">
          <div className="grid md:grid-cols-2 gap-4">
            <div className="rounded-xl bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
              <div className="font-display text-base text-pleita-ink">shadow-pl-sm</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">discreto · pra cards em repouso</div>
            </div>
            <div className="rounded-xl bg-surface-card border border-pleita-line p-6 shadow-pl-md">
              <div className="font-display text-base text-pleita-ink">shadow-pl-md</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">profundo · pra hover e modais</div>
            </div>
          </div>
        </SBSection>

        <SBSection title="Princípios" sub="O que não é componente, mas é parte do sistema.">
          <div className="grid md:grid-cols-2 gap-4 text-sm text-pleita-stone leading-relaxed">
            {[
              ["Lime é parcimônio", "Só CTA primário, ponto do wordmark, badges de vitória. Nunca em background."],
              ["Mono em números",   "R$, scores, IDs de edital, latência, custo — sempre JetBrains Mono."],
              ["Sem gradientes",     "Sem glassmorphism, sem blobs, sem martelo, balança ou colunas gregas."],
              ["Disclaimer em IA",  "Toda peça jurídica gerada por IA tem aviso obrigatório."],
              ["Imperativo direto",  "Verbos: decide, pleiteia, vence. Banidos: disruptivo, game-changer, unlock."],
              ["Modo Iniciante",     "Linguagem simples + emojis na nav + tooltips. Off por padrão."],
            ].map(([h, d]) => (
              <div key={h} className="rounded-xl bg-surface-card border border-pleita-line p-5">
                <div className="font-display text-base text-pleita-ink">{h}</div>
                <p className="text-xs text-pleita-stone mt-1 leading-relaxed">{d}</p>
              </div>
            ))}
          </div>
        </SBSection>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenStorybook });