function Blog() {
  const posts = [
    {
      cat: "Gestão",
      date: "08 mai 2026",
      read: "8 min",
      title: "Trocar de administradora: o passo a passo sem dor de cabeça",
      excerpt: "Aviso prévio, migração dos dados, comunicação com os condôminos, abertura de nova conta. Tudo que precisa acontecer entre uma administradora e outra, na ordem certa, com os documentos certos — e o que o síndico deve exigir de quem está saindo e de quem está entrando.",
      bg: "var(--navy-700)",
      tone: "deep",
      featured: true
    },
    {
      cat: "Financeiro",
      date: "02 mai 2026",
      read: "5 min",
      title: "Como reduzir a inadimplência sem brigar com o vizinho",
      excerpt: "A cobrança bem feita não é sobre pressão — é sobre constância e clareza. O passo a passo que funciona.",
      bg: "var(--gold-600)",
      tone: "dark"
    },
    {
      cat: "Jurídico",
      date: "28 abr 2026",
      read: "6 min",
      title: "Convenção desatualizada: as 5 cláusulas que custam dinheiro",
      excerpt: "Multas que não podem ser aplicadas, quórum fora do Código Civil, regimento que contradiz a convenção. Como ajustar.",
      bg: "var(--navy-800)",
      tone: "deep"
    },
    {
      cat: "Síndico",
      date: "21 abr 2026",
      read: "4 min",
      title: "Síndico voluntário sai. E agora?",
      excerpt: "Roteiro prático para a transição entre síndico voluntário e síndico profissional, sem traumas para ninguém.",
      bg: "var(--cream-300)",
      tone: "dark"
    },
    {
      cat: "Assembleia",
      date: "15 abr 2026",
      read: "7 min",
      title: "Assembleia online: vale a pena? E como fazer direito.",
      excerpt: "Quórum, convocação, atas, validade jurídica. O que mudou e o que precisa estar previsto em convenção.",
      bg: "var(--navy-900)",
      tone: "deep"
    }
  ];

  return (
    <main data-screen-label="Blog">
      <section style={{ background: "var(--navy-900)", color: "var(--cream-50)", padding: "100px 0 110px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(at 90% 10%, rgba(212, 162, 76, 0.2), transparent 50%)" }}></div>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ maxWidth: 880 }}>
            <div className="h-eyebrow on-dark">
              Blog Condominize
            </div>
            <h1 className="h-display" style={{ fontSize: "clamp(48px, 5.5vw, 78px)", marginTop: 26, color: "var(--cream-50)" }}>
              Conteúdo prático para <em>síndicos e conselheiros.</em>
            </h1>
            <p style={{ fontSize: 19, color: "rgba(251,249,243,0.75)", marginTop: 28, maxWidth: 640, lineHeight: 1.55 }}>
              Artigos escritos por quem opera condomínios todos os dias. Sem firula, sem clickbait —
              dicas práticas que você pode aplicar no seu condomínio na próxima reunião.
            </p>

            <div style={{ display: "flex", gap: 10, marginTop: 44, flexWrap: "wrap" }}>
              {["Todos", "Gestão", "Financeiro", "Jurídico", "Síndico", "Assembleia"].map((c, i) => (
                <button key={c} style={{
                  padding: "10px 20px",
                  borderRadius: 999,
                  border: i === 0 ? "1px solid var(--gold-500)" : "1px solid rgba(255,255,255,0.18)",
                  background: i === 0 ? "var(--gold-600)" : "transparent",
                  color: i === 0 ? "var(--navy-1000)" : "rgba(255,255,255,0.85)",
                  fontSize: 13.5, fontWeight: 500
                }}>{c}</button>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="blog-grid">
            {posts.map((p, i) => (
              <BlogCard key={i} {...p} />
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section className="section" style={{ background: "var(--cream-100)" }}>
        <div className="container">
          <div className="newsletter">
            <div>
              <div className="h-eyebrow">Newsletter quinzenal</div>
              <h2 className="h-display" style={{ fontSize: "clamp(32px, 3.5vw, 48px)", marginTop: 20 }}>
                As novidades do setor, <em>sem ruído.</em>
              </h2>
              <p style={{ color: "var(--text-soft)", marginTop: 18, fontSize: 16, lineHeight: 1.6 }}>
                Tendências, decisões judiciais relevantes, boas práticas. Direto na sua caixa, a cada 15 dias.
                Sem propaganda, sem spam.
              </p>
            </div>
            <form onSubmit={(e) => { e.preventDefault(); alert("Inscrição confirmada! Em breve você recebe a próxima edição."); }}
              style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <input type="email" placeholder="seu@email.com" required
                style={{
                  flex: 1, minWidth: 200, padding: "16px 20px", borderRadius: 999,
                  border: "1px solid var(--border-strong)", fontSize: 15,
                  background: "var(--bg)"
                }} />
              <button type="submit" className="btn btn-dark">Inscrever-se</button>
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}

function BlogCard({ cat, date, read, title, excerpt, bg, tone, featured }) {
  const textColor = tone === "deep" ? "#fff" : tone === "light" ? "rgba(255,255,255,0.95)" : "var(--ink-900)";
  return (
    <article className={`blog-card${featured ? " feat" : ""}`}>
      <div className="blog-thumb" style={{ background: bg, color: textColor }}>
        <div className="blog-thumb-stripes"></div>
        <span className="tag" style={{ color: textColor, background: tone === "dark" ? "rgba(0,0,0,0.18)" : "rgba(0,0,0,0.4)" }}>{cat}</span>
        <div style={{
          position: "absolute", bottom: 24, left: 24, right: 24,
          fontFamily: "var(--font-mono)", fontSize: 10,
          color: textColor, opacity: 0.6, letterSpacing: "0.15em"
        }}>
          [ ILUSTRAÇÃO · {cat.toUpperCase()} ]
        </div>
      </div>
      <div className="blog-body">
        <div className="meta">{date} · {read} de leitura</div>
        <h3>{title}</h3>
        <p>{excerpt}</p>
        <a className="btn-link" style={{ marginTop: "auto", alignSelf: "flex-start" }}>Ler artigo →</a>
      </div>
    </article>
  );
}

Object.assign(window, { Blog, BlogCard });