// BlogPreview — centered heading + grid of six articles linking to the blog.
function BlogPreview() {
  const isMobile = window.useMQ('(max-width: 860px)');
  const posts = [
    ['bpc-idoso', 'BPC · Idoso', 'BPC Idoso: como funciona o benefício para quem nunca contribuiu ao INSS', '3 min'],
    ['aposentadoria-rural', 'Aposentadoria · Rural', 'Aposentadoria rural: como comprovar o tempo de trabalho no campo', '4 min'],
    ['beneficios-por-incapacidade', 'Incapacidade', 'Auxílio por incapacidade temporária e permanente: qual a diferença?', '4 min'],
    ['bpc-autismo-tea', 'BPC · Autismo (TEA)', 'BPC para autista: por que o autismo é considerado deficiência em qualquer grau', '4 min'],
    ['pensao-por-morte', 'Pensão por morte', 'Pensão por morte: quem tem direito e como funciona o pedido', '4 min'],
    ['aposentadoria-especial', 'Aposentadoria · Especial', 'Aposentadoria especial: o que muda com a decisão do STF sobre idade mínima', '4 min'],
  ];
  return (
    <section id="conteudos" style={{ background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? 'var(--space-9) var(--space-5)' : 'var(--space-10) var(--space-6)' }}>
        <div style={{ textAlign: 'center', maxWidth: '620px', margin: '0 auto var(--space-8)' }}>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', lineHeight: 1.2,
            color: 'var(--text-strong)', letterSpacing: 'var(--tracking-tight)', margin: '0 0 var(--space-3)', textWrap: 'balance',
          }}>Blog Amorim e Costa</h2>
          <p style={{ fontSize: 'var(--text-md)', color: 'var(--text-muted)', lineHeight: 1.6, margin: 0 }}>
            Artigos em linguagem simples para você entender seus direitos antes de qualquer decisão.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {posts.map(([slug, tag, title, time]) => (
            <a key={slug} href={`blog/${slug}/index.html`} style={{
              display: 'block', background: 'var(--surface-card)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-4)',
              boxShadow: 'var(--shadow-md)', textDecoration: 'none', transition: 'transform 0.2s cubic-bezier(0.2,0,0.1,1)',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}>
              <img src={`assets/blog/${slug}.jpg`} alt="" style={{
                width: '100%', aspectRatio: '16 / 10', objectFit: 'cover', display: 'block', borderRadius: 'var(--radius-md)',
              }} />
              <div style={{ padding: 'var(--space-4) var(--space-2) var(--space-2)' }}>
                <div style={{ fontSize: '12.5px', color: 'var(--text-muted)', marginBottom: 'var(--space-2)' }}>
                  {tag} · {time} de leitura
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.15rem', lineHeight: 1.3,
                  color: 'var(--text-strong)', margin: '0 0 var(--space-3)', textWrap: 'balance',
                }}>{title}</h3>
                <span style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-link)', textDecoration: 'underline' }}>Ler mais</span>
              </div>
            </a>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 'var(--space-7)' }}>
          <a href="blog/index.html" style={{ fontSize: '15px', fontWeight: 600, color: 'var(--text-link)' }}>Ver todos os artigos do blog</a>
        </div>
      </div>
    </section>
  );
}
window.BlogPreview = BlogPreview;