// BlogPostScreen — artigo individual do blog SBL
function BlogPostScreen({ postId, onBack }) {
  const { isMobile } = window.useResponsive();
  const { t } = window.useLang();
  const post = (window.SBL_BLOG_DATA || []).find(p => p.id === postId);
  if (!post) return null;

  function renderBlock(block, i) {
    switch (block.type) {
      case 'lead': return (
        <p key={i} style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: isMobile ? 18 : 21, color: 'var(--brown-600)', lineHeight: 1.65, margin: '0 0 28px' }}>{block.text}</p>
      );
      case 'h2': return (
        <h2 key={i} style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 22 : 28, color: 'var(--text-strong)', margin: '40px 0 16px', lineHeight: 1.2 }}>{block.text}</h2>
      );
      case 'p': return (
        <p key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-body)', lineHeight: 1.8, margin: '0 0 18px' }}>{block.text}</p>
      );
      case 'list': return (
        <ul key={i} style={{ margin: '0 0 24px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {block.items.map((item, j) => (
            <li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <span style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--rose-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                <i data-lucide="check" style={{ width: 11, height: 11, color: 'var(--rose-700)' }}></i>
              </span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, color: 'var(--text-body)', lineHeight: 1.65 }}>{item}</span>
            </li>
          ))}
        </ul>
      );
      case 'highlight': return (
        <div key={i} style={{ borderLeft: '3px solid var(--color-accent)', margin: '28px 0', background: 'var(--surface-accent-soft)', borderRadius: '0 var(--radius-md) var(--radius-md) 0', padding: '18px 22px' }}>
          <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 17, color: 'var(--brown-700)', lineHeight: 1.6, margin: 0 }}>{block.text}</p>
        </div>
      );
      case 'image': return (
        <figure key={i} style={{ margin: '32px 0 38px' }}>
          <img src={block.src} alt={block.caption || ''} style={{ width: '100%', borderRadius: 14, display: 'block', maxHeight: 480, objectFit: 'cover', boxShadow: 'var(--shadow-md)' }} />
          {block.caption && <figcaption style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)', textAlign: 'center', marginTop: 10, fontStyle: 'italic' }}>{block.caption}</figcaption>}
        </figure>
      );
      case 'image-grid': return (
        <figure key={i} style={{ margin: '32px 0 38px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: block.images.length >= 3 ? 'repeat(3, 1fr)' : '1fr 1fr', gap: isMobile ? 8 : 12 }}>
            {block.images.map((img, j) => (
              <div key={j}>
                <img src={img.src} alt={img.caption || ''} style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', borderRadius: 10, display: 'block', boxShadow: 'var(--shadow-sm)' }} />
                {img.caption && <p style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)', textAlign: 'center', marginTop: 6, fontStyle: 'italic', marginBottom: 0 }}>{img.caption}</p>}
              </div>
            ))}
          </div>
        </figure>
      );
      case 'image-wide': return (
        <figure key={i} style={{ margin: isMobile ? '36px -20px 40px' : '44px -40px 48px' }}>
          <img src={block.src} alt={block.caption || ''} style={{ width: '100%', maxHeight: isMobile ? 220 : 460, objectFit: 'cover', display: 'block' }} />
          {block.caption && <figcaption style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)', textAlign: 'center', marginTop: 10, fontStyle: 'italic', padding: isMobile ? '0 20px' : '0 40px' }}>{block.caption}</figcaption>}
        </figure>
      );
      default: return null;
    }
  }

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

      {/* HERO com imagem */}
      <div style={{ position: 'relative', height: isMobile ? 260 : 420, overflow: 'hidden' }}>
        <img src={post.image} alt={post.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(30,20,12,0.85) 0%, rgba(30,20,12,0.3) 60%, transparent 100%)' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: isMobile ? '0 20px 28px' : '0 80px 40px', maxWidth: 1280, margin: '0 auto' }}>
          <span style={{ display: 'inline-block', padding: '4px 12px', borderRadius: 99, background: 'var(--rose-600)', color: '#fff', fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', marginBottom: 14 }}>{post.category}</span>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 24 : 38, color: '#fff', margin: 0, lineHeight: 1.2, maxWidth: 720 }}>{post.title}</h1>
        </div>
      </div>

      {/* ARTIGO */}
      <div style={{ maxWidth: 800, margin: '0 auto', padding: isMobile ? '32px 20px 64px' : '52px 40px 80px' }}>

        {/* Meta */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 36, paddingBottom: 24, borderBottom: '1px solid var(--border-subtle)', flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--gradient-brown)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--cream-50)', fontFamily: 'var(--font-body)', fontWeight: 700 }}>S</div>
            <div>
              <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--text-strong)' }}>{post.author}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' }}>{post.authorRole}</div>
            </div>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 16 }}>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 5 }}>
              <i data-lucide="calendar" style={{ width: 13, height: 13 }}></i> {post.date}
            </span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 5 }}>
              <i data-lucide="clock" style={{ width: 13, height: 13 }}></i> {post.readTime}
            </span>
          </div>
        </div>

        {/* Conteúdo */}
        <div>
          {post.content.map((block, i) => renderBlock(block, i))}
        </div>

        {/* Botão voltar */}
        <div style={{ marginTop: 48, paddingTop: 32, borderTop: '1px solid var(--border-subtle)' }}>
          <button onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-primary)', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, padding: 0 }}>
            <i data-lucide="arrow-left" style={{ width: 16, height: 16 }}></i> {t('Voltar para o Blog')}
          </button>
        </div>
      </div>

      {/* CTA */}
      {(() => {
        const cta = post.cta || {
          eyebrow: 'Pronto para começar?',
          title: 'Fale com a Sibelle gratuitamente',
          subtitle: 'Avaliação do potencial do seu imóvel sem custo e sem compromisso.',
          waText: 'Ol%C3%A1%2C%20li%20o%20artigo%20no%20blog%20da%20SBL%20e%20gostaria%20de%20saber%20mais%20sobre%20locar%20meu%20im%C3%B3vel%20por%20temporada.',
          button: 'Conversar pelo WhatsApp',
        };
        return (
          <section style={{ background: 'var(--brown-900)', padding: isMobile ? '52px 20px' : '72px 40px', textAlign: 'center' }}>
            <div style={{ maxWidth: 560, margin: '0 auto' }}>
              <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 14 }}>{t(cta.eyebrow)}</div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 26 : 34, color: 'var(--cream-50)', margin: '0 0 14px' }}>{t(cta.title)}</h2>
              <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 18, color: 'var(--rose-100)', lineHeight: 1.55, margin: '0 0 28px' }}>{t(cta.subtitle)}</p>
              <a href={'https://wa.me/558399585248?text=' + cta.waText} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
                <button style={{ padding: '14px 32px', background: 'var(--color-accent)', border: 'none', borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 700, color: 'var(--cream-50)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  <i data-lucide="message-circle" style={{ width: 18, height: 18 }}></i>
                  {t(cta.button)}
                </button>
              </a>
            </div>
          </section>
        );
      })()}
    </div>
  );
}
window.BlogPostScreen = BlogPostScreen;
