function BlogScreen({ onNav, onOpenPost }) {
  const { SpecList, Tag, Icon } = window.Ds55VeCulosDesignSystem_b5c845;
  const [filtro, setFiltro] = React.useState('TUDO');
  const kickers = ['TUDO', ...Array.from(new Set(window.POSTS.map(p => p.kicker)))];
  const posts = window.POSTS.filter(p => filtro === 'TUDO' || p.kicker === filtro);
  const corDo = k => ((window.SEGMENTOS || []).find(s => s.label === k) || {}).cor || 'var(--preto-asfalto)';
  const longos = posts.filter(p => p.tipo !== 'pill');
  const pills = posts.filter(p => p.tipo === 'pill');
  const destaque = longos[0];

  /* capas: padrão da marca sobre fundos que alternam dentro da paleta
     fechada — nada de cor de segmento fora da navegação do catálogo */
  const FUNDOS = {
    'claro':    { fundo: 'var(--papel-2)',       padrao: 'var(--preto-asfalto)', icone: 'var(--cinza-rodagem)', op: 0.05 },
    'claro-2':  { fundo: 'var(--papel-3)',       padrao: 'var(--preto-asfalto)', icone: 'var(--cinza-rodagem)', op: 0.06 },
    'escuro':   { fundo: 'var(--preto-asfalto)', padrao: 'var(--papel)',         icone: 'var(--papel-2)',       op: 0.07 },
    'escuro-2': { fundo: 'var(--preto-2)',       padrao: 'var(--papel)',         icone: 'var(--papel-2)',       op: 0.07 }
  };
  const Capa = ({ post, ratio = '16 / 10' }) => {
    const f = FUNDOS[post.fundo] || FUNDOS['claro'];
    return (
      <div style={{ position: 'relative', aspectRatio: ratio, background: f.fundo, overflow: 'hidden' }}>
        {post.capa
          ? <img src={post.capa} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          : <>
              <span className="padrao-55" style={{ position: 'absolute', inset: 0, opacity: f.op, '--padrao-cor': f.padrao }} />
              <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                <Icon name={post.icone || 'bookmark'} size={44} color={f.icone} />
              </span>
            </>}
      </div>
    );
  };
  const Kicker = ({ post }) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, font: 'var(--type-etiqueta-p)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', color: 'var(--text-title)' }}>
      <Icon name={post.icone || 'bookmark'} size={13} color={corDo(post.kicker)} />{post.kicker}
    </span>
  );

  return (
    <div style={{ background: 'var(--papel)', minHeight: '100%' }}>
      <Header count={window.ESTOQUE.length} rota="curadoria" onNav={onNav} dark />
      <section style={{ background: 'var(--preto-asfalto)', color: 'var(--papel)' }}>
        <div className="faixa grade-hero-editorial" style={{ paddingTop: 'var(--esp-8)', paddingBottom: 'var(--esp-7)', alignItems: 'end' }}>
          <h1 style={{ margin: 0, font: 'var(--peso-titulo) clamp(34px,3.8vw,54px)/1 var(--font-core)', letterSpacing: 'var(--tracking-titulo)', maxWidth: '18ch' }}>
            Blog da 55<span style={{ color: 'var(--seg-primeiro)' }}>.</span>
          </h1>
          <p style={{ margin: 0, font: 'var(--type-corpo)', maxWidth: '38ch', paddingBottom: 6 }}>
            O que a gente aprende recusando carro: sem dica de guru, só o que a vistoria, o laudo e a conta de manutenção mostram na prática.
          </p>
        </div>
      </section>

      <section className="faixa" style={{ paddingTop: 'var(--esp-6)', paddingBottom: 'var(--esp-9)' }}>
        <div className="chips-blog" style={{ display: 'flex', gap: 'var(--esp-3)', flexWrap: 'wrap', paddingBottom: 'var(--esp-6)', borderBottom: 'var(--borda-fina) solid var(--border-hairline)' }}>
          {kickers.map(k => <Tag className="chip-filtro" key={k} selected={filtro === k} onClick={() => setFiltro(k)}>{k}</Tag>)}
        </div>

        {destaque && (
          <article className="grade-destaque-post" onClick={() => onOpenPost(destaque)} style={{ cursor: 'pointer', padding: 'var(--esp-7) 0', borderBottom: 'var(--borda-fina) solid var(--border-hairline)' }}>
            <Capa post={destaque} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--esp-4)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--esp-4)', flexWrap: 'wrap' }}>
                <Kicker post={destaque} />
                <SpecList withIcons items={[{ value: 'ARTIGO', icon: 'newspaper' }, { value: destaque.data, icon: 'calendar' }, { value: destaque.leitura, icon: 'clock' }]} />
              </div>
              <h2 style={{ margin: 0, font: 'var(--peso-titulo) clamp(26px,2.6vw,34px)/1.05 var(--font-core)', letterSpacing: 'var(--tracking-titulo)' }}>{destaque.titulo}</h2>
              <p style={{ margin: 0, font: 'var(--type-corpo)', maxWidth: '44ch' }}>{destaque.resumo}</p>
              <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 8, font: 'var(--type-etiqueta)', letterSpacing: 'var(--tracking-etiqueta)', whiteSpace: 'nowrap' }}>LER <Icon name="arrow-right" size={14} /></span>
            </div>
          </article>
        )}

        <div className="grade-continue" style={{ paddingTop: 'var(--esp-7)' }}>
          {longos.slice(1).map(p => (
            <article key={p.id} onClick={() => onOpenPost(p)} style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 'var(--esp-3)' }}>
              <div style={{ height: 4, background: corDo(p.kicker) }} />
              <Capa post={p} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--esp-4)', flexWrap: 'wrap' }}>
                <Kicker post={p} />
                <SpecList withIcons items={[{ value: p.data, icon: 'calendar' }]} />
              </div>
              <h3 style={{ margin: 0, font: 'var(--peso-titulo) 21px/1.15 var(--font-core)', letterSpacing: 'var(--tracking-titulo)' }}>{p.titulo}</h3>
              <p style={{ margin: 0, font: 'var(--type-corpo-p)', color: 'var(--text-muted)', maxWidth: '38ch' }}>{p.resumo}</p>
              <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 8, paddingTop: 'var(--esp-2)', font: 'var(--type-etiqueta)', letterSpacing: 'var(--tracking-etiqueta)', whiteSpace: 'nowrap' }}>
                <Icon name="clock" size={13} color="var(--text-muted)" /><span style={{ color: 'var(--text-muted)' }}>{p.leitura}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>LER <Icon name="arrow-right" size={14} /></span>
              </span>
            </article>
          ))}
        </div>

        {/* pílulas: leitura de dois minutos, cartão compacto sem capa */}
        {pills.length > 0 && (
          <div style={{ paddingTop: 'var(--esp-8)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--esp-3)', paddingBottom: 'var(--esp-5)', borderTop: 'var(--borda-fina) solid var(--border-hairline)', paddingTop: 'var(--esp-6)' }}>
              <Icon name="zap" size={15} color="var(--text-muted)" />
              <span style={{ font: 'var(--type-etiqueta)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', color: 'var(--text-muted)' }}>PÍLULAS · LEITURA DE 2 MINUTOS</span>
            </div>
            <div className="grade-continue">
              {pills.map(p => (
                <article key={p.id} onClick={() => onOpenPost(p)} style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 'var(--esp-3)', background: 'var(--surface-raised)', border: 'var(--borda-fina) solid var(--border-default)', borderTop: `4px solid ${corDo(p.kicker)}`, padding: 'var(--esp-4)' }}>
                  <Kicker post={p} />
                  <h3 style={{ margin: 0, font: 'var(--peso-titulo) 18px/1.2 var(--font-core)', letterSpacing: 'var(--tracking-titulo)' }}>{p.titulo}</h3>
                  <p style={{ margin: 0, font: 'var(--type-corpo-p)', color: 'var(--text-muted)' }}>{p.resumo}</p>
                  <span style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8, paddingTop: 'var(--esp-2)', font: 'var(--type-etiqueta)', letterSpacing: 'var(--tracking-etiqueta)', whiteSpace: 'nowrap' }}>
                    <Icon name="zap" size={13} color="var(--text-muted)" /><span style={{ color: 'var(--text-muted)' }}>{p.leitura}</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>LER <Icon name="arrow-right" size={14} /></span>
                  </span>
                </article>
              ))}
            </div>
          </div>
        )}
      </section>
    </div>
  );
}

Object.assign(window, { BlogScreen });