// pages-blog.jsx — Blog post page (data comes from API via data.jsx)

/* ---- Blog post page ---- */
function BlogPostPage({ post, onBack, onOpenPost, onShop }) {
  if (!post) return null;
  const others = (window.BLOG_POSTS || []).filter(p => p.slug !== post.slug).slice(0, 2);
  const thumbCls = post.thumbKind === 'quote' ? '2' : post.thumbKind === 'stack' ? '3' : '1';

  return (
    <article className="blog-post" data-screen-label="Blog Post">
      <button className="blog-back" onClick={onBack}>← All posts</button>

      <header className="blog-post-head">
        <div className="blog-post-meta">
          <span className={`blog-post-cat blog-post-cat-${post.catColor}`}>★ {post.cat}</span>
          <span className="blog-post-date">{post.date}</span>
          <span className="blog-post-read">{post.readTime}</span>
        </div>
        <h1 className="blog-post-title">{post.title}</h1>
        <p className="blog-post-deck">{post.deck}</p>
        <div className="blog-post-byline">
          <div className="blog-post-avatar">{(post.author || 'MS').split(' ').map(s => s[0]).join('')}</div>
          <div>
            <div className="blog-post-author">— {post.author}</div>
            <div className="blog-post-author-role">{post.authorRole}</div>
          </div>
        </div>
      </header>

      <div className={`blog-post-hero blog-thumb-${thumbCls}`}>
        {post.thumbKind === 'price' && (
          <div className="blog-graphic blog-graphic-lg">
            <span className="blog-num">$72</span>
            <span className="blog-arrow">→</span>
            <span className="blog-num blog-num-acid">$30</span>
          </div>
        )}
        {post.thumbKind === 'quote' && (
          <div className="blog-quote blog-quote-lg">"Plain box.<br/>No name."</div>
        )}
        {post.thumbKind === 'stack' && (
          <div className="blog-stack blog-stack-lg">
            <span>DK</span><span>SAGO</span><span>PUTTERS</span>
          </div>
        )}
      </div>

      <div className="blog-post-body">
        {(post.body || []).map((block, i) => {
          if (block.type === 'h2') return <h2 key={i} className="bp-h2">{block.text}</h2>;
          if (block.type === 'pull') return <blockquote key={i} className="bp-pull">{block.text}</blockquote>;
          if (block.type === 'list') return (
            <ul key={i} className="bp-list">
              {block.items.map((item, j) => <li key={j}>{item}</li>)}
            </ul>
          );
          return <p key={i} className="bp-p">{block.text}</p>;
        })}

        <div className="blog-post-footer">
          <div className="blog-post-tags">
            {(post.tags && post.tags.length ? post.tags : [post.cat, 'mad-smokes', 'tyendinaga']).map((t, i) => (
              <span key={i} className="bp-tag">#{String(t).toLowerCase().replace(/\s+/g, '-')}</span>
            ))}
          </div>
          <button className="btn btn-primary" onClick={onShop}>★ Shop the lineup</button>
        </div>
      </div>

      {others.length > 0 && (
        <div className="blog-post-related">
          <div className="section-head" style={{ margin: '0 0 24px' }}>
            <div>
              <span className="sticker-tag" style={{ background: 'var(--bone)', color: 'var(--ink)' }}>★ Keep reading</span>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: '48px', textTransform: 'uppercase', color: 'var(--bone)', margin: '8px 0 0', lineHeight: .95 }}>More from<br/>the dispatch.</h2>
            </div>
          </div>
          <div className="blog-related-grid">
            {others.map(p => {
              const tcls = p.thumbKind === 'quote' ? '2' : p.thumbKind === 'stack' ? '3' : '1';
              return (
                <article key={p.slug} className="blog-card blog-card-clickable" onClick={() => onOpenPost(p)}>
                  <div className={`blog-thumb blog-thumb-${tcls}`}>
                    <span className="blog-date">{p.date}</span>
                    <span className="blog-cat" style={
                      p.catColor === 'blood' ? { background: 'var(--blood)', color: 'var(--bone)' }
                      : p.catColor === 'ink' ? { background: 'var(--ink)', color: 'var(--acid)' }
                      : {}
                    }>★ {p.cat}</span>
                    {p.thumbKind === 'price' && <div className="blog-graphic"><span className="blog-num">$72</span><span className="blog-arrow">→</span><span className="blog-num blog-num-acid">$30</span></div>}
                    {p.thumbKind === 'quote' && <div className="blog-quote">"Plain box.<br/>No name."</div>}
                    {p.thumbKind === 'stack' && <div className="blog-stack"><span>DK</span><span>SAGO</span><span>PUTTERS</span></div>}
                  </div>
                  <div className="blog-body">
                    <span className="blog-readtime">{p.readTime}</span>
                    <h3 className="blog-title">{p.title}</h3>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      )}
    </article>
  );
}

window.BlogPostPage = BlogPostPage;