// BlogScreen — listagem do blog SBL
function BlogScreen({ onOpenPost, onNav }) {
  const { isMobile, isTablet } = window.useResponsive();
  const { t } = window.useLang();
  const posts = window.SBL_BLOG_DATA || [];
  const [page, setPage] = React.useState(1);
  const POSTS_PER_PAGE = 9;
  const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
  const visible = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER_PAGE);

  return (
    <div style={{ background: 'var(--color-bg)' }}>

      {/* HERO */}
      <div style={{ background: 'var(--brown-900)', padding: isMobile ? '56px 20px 48px' : '72px 40px 64px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 16 }}>{t('Blog SBL')}</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 44, color: 'var(--cream-50)', margin: '0 0 16px', lineHeight: 1.15, maxWidth: 720 }}>
            {t('Artigos, dicas e insights sobre o mercado imobiliário de João Pessoa')}
          </h1>
          <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: isMobile ? 16 : 19, color: 'var(--rose-100)', lineHeight: 1.5, margin: 0, maxWidth: 600 }}>
            {t('Conteúdo criado pela Sibelle Bernardes para ajudar proprietários, compradores e hóspedes a tomar as melhores decisões.')}
          </p>
        </div>
      </div>

      {/* GRID */}
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '48px 20px 64px' : '64px 40px 80px' }}>

        {posts.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '80px 20px' }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--rose-100)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
              <i data-lucide="file-text" style={{ width: 28, height: 28, color: 'var(--rose-500)' }}></i>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--text-strong)', margin: '0 0 10px' }}>{t('Nenhum artigo publicado ainda')}</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-muted)', margin: 0 }}>{t('Em breve novos conteúdos serão publicados aqui. Fique de olho!')}</p>
          </div>
        ) : (
          <>
            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
              gap: 28,
            }}>
              {visible.map((p) => (
                <div key={p.id} onClick={() => onOpenPost(p.id)} style={{
                  background: 'var(--surface-card)',
                  border: '1px solid var(--border-subtle)',
                  borderRadius: 'var(--radius-xl)',
                  overflow: 'hidden',
                  cursor: 'pointer',
                  transition: 'box-shadow 0.2s ease, transform 0.2s ease',
                  display: 'flex', flexDirection: 'column',
                }}
                  onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; e.currentTarget.style.transform = 'translateY(-4px)'; }}
                  onMouseLeave={e => { e.currentTarget.style.boxShadow = ''; e.currentTarget.style.transform = ''; }}
                >
                  {/* imagem */}
                  <div style={{ aspectRatio: '16/9', overflow: 'hidden', background: 'var(--cream-100)' }}>
                    <img src={p.image} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  </div>
                  {/* body */}
                  <div style={{ padding: '22px 24px 26px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                    {/* categoria badge + read time */}
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                      <span style={{ padding: '3px 10px', borderRadius: 99, background: 'var(--rose-100)', color: 'var(--rose-700)', fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '0.04em' }}>{p.category}</span>
                      <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' }}>{p.readTime}</span>
                    </div>
                    {/* título */}
                    <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--text-strong)', margin: '0 0 10px', lineHeight: 1.3 }}>{p.title}</h3>
                    {/* excerpt */}
                    <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.65, margin: '0 0 20px', flex: 1 }}>{p.excerpt}</p>
                    {/* footer: autor + data */}
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid var(--border-subtle)', paddingTop: 14 }}>
                      <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 600, color: 'var(--text-body)' }}>{p.author}</span>
                      <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' }}>{p.date}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* PAGINAÇÃO */}
            {totalPages > 1 && (
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginTop: 48 }}>
                <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1} style={{
                  width: 40, height: 40, borderRadius: '50%', border: '1px solid var(--border-default)',
                  background: 'var(--surface-card)', cursor: page === 1 ? 'default' : 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: page === 1 ? 'var(--text-muted)' : 'var(--color-primary)', opacity: page === 1 ? 0.4 : 1,
                }}>
                  <i data-lucide="chevron-left" style={{ width: 18, height: 18 }}></i>
                </button>
                {Array.from({ length: totalPages }, (_, i) => (
                  <button key={i} onClick={() => setPage(i + 1)} style={{
                    width: 36, height: 36, borderRadius: 8,
                    border: page === i + 1 ? 'none' : '1px solid var(--border-default)',
                    background: page === i + 1 ? 'var(--color-primary)' : 'var(--surface-card)',
                    color: page === i + 1 ? '#fff' : 'var(--text-body)',
                    fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, cursor: 'pointer',
                  }}>{i + 1}</button>
                ))}
                <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages} style={{
                  width: 40, height: 40, borderRadius: '50%', border: '1px solid var(--border-default)',
                  background: 'var(--surface-card)', cursor: page === totalPages ? 'default' : 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: page === totalPages ? 'var(--text-muted)' : 'var(--color-primary)', opacity: page === totalPages ? 0.4 : 1,
                }}>
                  <i data-lucide="chevron-right" style={{ width: 18, height: 18 }}></i>
                </button>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}
window.BlogScreen = BlogScreen;