// ===== Blog (listagem + artigo) =====

const BLOG_POSTS = [
  { id: "padaria", cat: "Casos de Sucesso", catColor: "#9FE870", title: "Como uma padaria do interior ganhou o primeiro contrato público em 47 dias", excerpt: "Sem advogado, sem consultor — só o Coach explicando cada passo. O que a Sr. Vladimir aprendeu sobre vender pão pra escola estadual.", author: "Maria Costa", date: "12 mai · 2026", read: "6 min", hero: true },
  { id: "p1", cat: "Primeiros Passos", catColor: "#9FE870", title: "O que é um pregão eletrônico (e por que sua empresa pode participar)", excerpt: "Tudo em PT-BR claro: o que é, como funciona, prazos, documentos. Sem juridiquês.", author: "Pedro Faria",   date: "08 mai · 2026", read: "4 min" },
  { id: "p2", cat: "Documentação",     catColor: "#7C3AED", title: "Certidões: o checklist completo que ninguém te ensinou",                 excerpt: "Federal, estadual, trabalhista, FGTS. Onde emitir, prazos, taxas e o que fazer se vencer no meio do processo.", author: "Carla Soares", date: "06 mai · 2026", read: "8 min" },
  { id: "p3", cat: "Estratégia",        catColor: "#F59E0B", title: "Margens em licitação pública: como calcular sem se enganar",          excerpt: "BDI, fluxo de caixa, encargos. Uma planilha simples para evitar contrato no prejuízo.", author: "Marcos Souza", date: "02 mai · 2026", read: "7 min" },
  { id: "p4", cat: "Jurídico",          catColor: "#DC2626", title: "Impugnação x esclarecimento x recurso: quando usar cada um",          excerpt: "As três peças mais usadas pelo licitante. Quando, como e com que fundamentação.", author: "Ana Lima",     date: "28 abr · 2026", read: "5 min" },
  { id: "p5", cat: "Casos de Sucesso", catColor: "#9FE870", title: "Comércio em Goiás dobra faturamento com 4 contratos de TI",            excerpt: "R$ 28k em economia de consultoria + R$ 92k em contratos. O case da Comércio GO.", author: "Rafael Costa", date: "24 abr · 2026", read: "6 min" },
  { id: "p6", cat: "Estratégia",        catColor: "#F59E0B", title: "Como o robô de lances pensa: pares mínimos, prorrogação e o piso",     excerpt: "Engenharia reversa do robô da Pleita. Por que você dorme tranquilo enquanto a IA disputa — e onde ainda precisa do humano.", author: "Marcos Souza", date: "20 abr · 2026", read: "9 min" },
  { id: "p7", cat: "Primeiros Passos", catColor: "#9FE870", title: "5 erros comuns que tiram empresas pequenas do pregão antes da disputa", excerpt: "Documentação fora do prazo, leitura de edital incompleta, planilha mal montada. O que matar antes de gastar tempo.", author: "Pedro Faria", date: "16 abr · 2026", read: "5 min" },
  { id: "p8", cat: "Jurídico",          catColor: "#DC2626", title: "MEI pode participar de licitação? Sim — mas com 3 ressalvas",         excerpt: "Lei 14.133 abriu portas. Mas tem CNAE, limite de faturamento e modalidades que você precisa entender antes de se cadastrar.", author: "Ana Lima",     date: "10 abr · 2026", read: "6 min" },
];

function BlogCategoryBadge({ name, color }) {
  return <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded-md font-semibold" style={{ background: `${color}22`, color: color === "#9FE870" ? "#3E6F1A" : color }}>{name}</span>;
}

function BlogCard({ p }) {
  return (
    <article className="rounded-[10px] bg-surface-card border border-pleita-line overflow-hidden shadow-pl-sm hover:shadow-pl-md hover:-translate-y-px transition-all">
      <div className="aspect-[16/9] bg-surface-2 relative overflow-hidden" style={{ background: `linear-gradient(135deg, ${p.catColor}22, rgb(var(--surface-2)))` }}>
        <div className="absolute inset-0 grid place-items-center text-5xl opacity-60">
          {p.cat === "Casos de Sucesso" ? "🏆" : p.cat === "Documentação" ? "📋" : p.cat === "Estratégia" ? "📊" : p.cat === "Jurídico" ? "⚖️" : "🌱"}
        </div>
      </div>
      <div className="p-5">
        <BlogCategoryBadge name={p.cat} color={p.catColor} />
        <h3 className="font-display text-lg text-pleita-ink mt-3 leading-snug">{p.title}</h3>
        <p className="text-sm text-pleita-stone mt-2 line-clamp-2 leading-relaxed">{p.excerpt}</p>
        <div className="flex items-center justify-between mt-4 pt-3 border-t border-pleita-line/60 pl-num text-[11px] text-pleita-stone-2">
          <span>{p.author}</span>
          <span>{p.date} · {p.read}</span>
        </div>
      </div>
    </article>
  );
}

function ScreenBlog({ goToArticle }) {
  const hero = BLOG_POSTS.find((p) => p.hero);
  const rest = BLOG_POSTS.filter((p) => !p.hero);
  const cats = [
    ["Primeiros Passos", 12, "#9FE870"],
    ["Documentação",     8,  "#7C3AED"],
    ["Estratégia",       14, "#F59E0B"],
    ["Jurídico",         9,  "#DC2626"],
    ["Casos de Sucesso", 21, "#0891B2"],
  ];
  return (
    <div className="min-h-full bg-surface-1">
      {/* Nav */}
      <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="hover:text-pleita-ink">Preços</a>
            <a className="text-pleita-ink font-medium">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-10">
        <header className="mb-8">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Blog · Pleita</div>
          <h1 className="font-display text-4xl md:text-5xl text-pleita-ink leading-tight">Aprenda a vender para o governo<span className="text-pleita-lime">.</span></h1>
          <p className="text-sm text-pleita-stone mt-2 max-w-2xl">Tudo que ninguém te contou sobre licitação pública. Em PT-BR claro, sem juridiquês.</p>
        </header>

        {/* Hero post */}
        <button onClick={() => goToArticle?.(hero)} className="block w-full rounded-[10px] overflow-hidden bg-surface-card border border-pleita-line shadow-pl-sm hover:shadow-pl-md transition-all text-left mb-10 group">
          <div className="grid md:grid-cols-2">
            <div className="aspect-[5/3] md:aspect-auto md:min-h-[320px] relative overflow-hidden" style={{ background: "linear-gradient(135deg, rgb(var(--pleita-ink)), rgb(var(--pleita-ink-2)))" }}>
              <div className="absolute inset-0 grid place-items-center">
                <div className="text-[120px] opacity-30">🥖</div>
              </div>
              <div className="absolute top-4 left-4"><BlogCategoryBadge name={hero.cat} color={hero.catColor} /></div>
            </div>
            <div className="p-8 md:p-10 flex flex-col justify-center">
              <h2 className="font-display text-2xl md:text-3xl text-pleita-ink leading-tight group-hover:text-pleita-ink/80">{hero.title}</h2>
              <p className="text-sm text-pleita-stone mt-3 leading-relaxed">{hero.excerpt}</p>
              <div className="flex items-center gap-3 mt-6 pt-5 border-t border-pleita-line">
                <span className="size-9 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-xs font-semibold">MC</span>
                <div>
                  <div className="text-sm text-pleita-ink">{hero.author}</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2">{hero.date} · {hero.read} de leitura</div>
                </div>
              </div>
            </div>
          </div>
        </button>

        <div className="grid grid-cols-12 gap-8">
          <div className="col-span-12 lg:col-span-8">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
              {rest.map((p) => <BlogCard key={p.id} p={p} />)}
            </div>
          </div>

          <aside className="col-span-12 lg:col-span-4 space-y-6">
            <div className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
              <div className="flex items-center gap-2 rounded-md border border-pleita-line bg-surface-1 px-3 py-2">
                <Icons.Search className="size-4 text-pleita-stone-2" />
                <input placeholder="Buscar no blog…" className="flex-1 bg-transparent outline-none text-sm placeholder:text-pleita-stone-2/70" />
              </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">Categorias</div>
              <ul className="space-y-1">
                {cats.map(([n, c, color]) => (
                  <li key={n}>
                    <button className="w-full flex items-center justify-between px-2 py-1.5 rounded-md text-sm text-pleita-ink hover:bg-surface-2">
                      <span className="inline-flex items-center gap-2"><span className="size-2 rounded-full" style={{ background: color }} />{n}</span>
                      <span className="pl-num text-[11px] text-pleita-stone-2">{c}</span>
                    </button>
                  </li>
                ))}
              </ul>
            </div>

            <div className="rounded-[10px] p-5 shadow-pl-sm" style={{ background: "rgb(var(--pleita-ink))", color: "rgb(var(--pleita-paper))" }}>
              <div className="text-2xl mb-2">📬</div>
              <div className="font-display text-lg text-pleita-paper">Newsletter semanal</div>
              <p className="text-xs text-pleita-paper/70 mt-1">1 artigo + 3 editais selecionados toda terça.</p>
              <input placeholder="seu@email.com" className="mt-3 w-full rounded-md bg-pleita-paper/10 border border-pleita-paper/20 px-3 py-2 text-sm text-pleita-paper placeholder:text-pleita-paper/40 outline-none" />
              <button className="mt-2 w-full pl-num text-xs px-3 py-2 rounded-md bg-pleita-lime text-pleita-ink font-semibold">Assinar grátis</button>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

// ----- Artigo individual -----
function ScreenBlogArticle({ post, onBack }) {
  const p = post || BLOG_POSTS[0];
  const toc = [
    "O contexto: pão pra quem?",
    "O primeiro pregão (e o primeiro susto)",
    "Como a Pleita entrou na história",
    "O que mudou no caixa",
    "5 lições para quem está começando",
  ];
  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} />
          <button onClick={onBack} className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink">← voltar para o blog</button>
        </div>
      </nav>

      <article className="max-w-7xl mx-auto px-6 md:px-10 py-10 grid grid-cols-12 gap-8">
        <main className="col-span-12 lg:col-span-8">
          <BlogCategoryBadge name={p.cat} color={p.catColor} />
          <h1 className="font-display text-3xl md:text-5xl text-pleita-ink mt-4 leading-tight">{p.title}</h1>
          <div className="flex items-center gap-3 mt-6 pb-6 border-b border-pleita-line">
            <span className="size-10 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-sm font-semibold">MC</span>
            <div>
              <div className="text-sm text-pleita-ink">{p.author}</div>
              <div className="pl-num text-[11px] text-pleita-stone-2">{p.date} · {p.read} de leitura</div>
            </div>
          </div>

          <div className="mt-8 prose-pleita space-y-5 text-pleita-stone leading-[1.75]">
            <p className="text-lg text-pleita-ink leading-relaxed">Em janeiro de 2026, Sr. Vladimir tinha duas escolhas: fechar a padaria ou tentar vender pra prefeitura. Ele nunca tinha sequer aberto um edital. Em 47 dias, ele assinou o primeiro contrato.</p>
            <h2 className="font-display text-2xl text-pleita-ink mt-10 pl-4 border-l-[3px] border-pleita-lime">O contexto: pão pra quem?</h2>
            <p>A padaria fica em Cristalina, GO. 8 mil habitantes. A escola estadual mais próxima compra pão fresco todo dia — 380 unidades. Sempre foi a mesma fornecedora há 12 anos.</p>
            <p>Quando o contrato dela venceu, abriram um pregão eletrônico. Vladimir descobriu por acaso, conversando com a diretora.</p>
            <h2 className="font-display text-2xl text-pleita-ink mt-10 pl-4 border-l-[3px] border-pleita-lime">O primeiro pregão (e o primeiro susto)</h2>
            <blockquote className="border-l-4 border-pleita-ink bg-surface-2/50 pl-5 pr-4 py-4 italic text-pleita-ink rounded-r-md">"Abri o edital e tinha 84 páginas. Fechei. Achei que não era pra mim."</blockquote>
            <p>Foi nesse momento que ele conheceu a Pleita pelo Sebrae. O Coach explicou em PT-BR claro: o pregão era para fornecimento de pão francês, valor estimado R$ 142 mil/ano, prazo de entrega flexível.</p>
            <h2 className="font-display text-2xl text-pleita-ink mt-10 pl-4 border-l-[3px] border-pleita-lime">5 lições para quem está começando</h2>
            <ol className="space-y-3 list-decimal pl-6">
              <li>Não tem mistério no edital — tem linguagem técnica que pode ser traduzida.</li>
              <li>Certidão vencida é o erro #1 dos iniciantes. Mantenha o cofre em dia.</li>
              <li>BDI errado mata margem. Calcule antes de propor.</li>
              <li>Pregão eletrônico não tem disputa presencial — você dá lance pelo computador.</li>
              <li>Primeiro contrato é o mais difícil. Depois vira rotina.</li>
            </ol>
          </div>
        </main>

        <aside className="col-span-12 lg:col-span-4">
          <div className="sticky top-24 space-y-5">
            <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">Sumário</div>
              <ul className="space-y-2 text-sm">
                {toc.map((t, i) => (
                  <li key={i}><a className="text-pleita-stone hover:text-pleita-ink flex gap-2"><span className="pl-num text-pleita-stone-2">{(i + 1).toString().padStart(2, "0")}</span>{t}</a></li>
                ))}
              </ul>
            </div>
            <div className="rounded-[10px] p-5 shadow-pl-sm" style={{ background: "rgb(var(--pleita-ink))" }}>
              <div className="text-pleita-lime text-2xl mb-2">▶</div>
              <div className="font-display text-lg text-pleita-paper leading-tight">Sua padaria<br/>também pode.</div>
              <p className="text-xs text-pleita-paper/70 mt-2">14 dias grátis, sem cartão.</p>
              <button className="mt-4 w-full pl-num text-xs px-3 py-2 rounded-md bg-pleita-lime text-pleita-ink font-semibold">Começar grátis →</button>
            </div>
          </div>
        </aside>
      </article>
    </div>
  );
}

window.ScreenBlog = ScreenBlog;
window.ScreenBlogArticle = ScreenBlogArticle;
window.BLOG_POSTS = BLOG_POSTS;