// Blog listing page — hub for all articles
function Blog({ go }) {
  const toxicSeries = ARTICLES.filter(a => a.id >= 4);
  const otherArticles = ARTICLES.filter(a => a.id < 4);

  return (
    <div className="screen">
      {/* HERO */}
      <section style={{ background: '#fff', borderBottom: '1px solid var(--border)', padding: '56px 28px 48px' }}>
        <div className="wrap">
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase',
            color: 'var(--blue-600)', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 24, height: 2, background: 'var(--blue-600)', display: 'inline-block' }} />
            Solo Lab Blog
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(36px,5vw,54px)',
            letterSpacing: '-.025em', lineHeight: 1.1, color: 'var(--fg1)', margin: '0 0 14px' }}>
            บทความ<span style={{ color: 'var(--blue-600)' }}>ความรัก</span><br />{'& Toxic Relationship'}
          </h1>
          <p style={{ fontSize: 17, color: 'var(--fg3)', maxWidth: 500, lineHeight: 1.75, margin: 0 }}>
            บทความจิตวิทยาความรักเชิงลึก เข้าใจตัวเอง รู้จัก pattern และออกจากความสัมพันธ์ที่เป็นพิษ
          </p>
        </div>
      </section>

      {/* TOXIC RELATIONSHIP SERIES */}
      <section className="section" style={{ paddingBottom: 64 }}>
        <div className="wrap">
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28, flexWrap: 'wrap', gap: 12 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--fg1)', marginBottom: 4 }}>
                ซีรีส์: Toxic Relationship
              </div>
              <div style={{ fontSize: 14, color: 'var(--fg3)' }}>5 บทความ · จิตวิทยาความสัมพันธ์</div>
            </div>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase',
              color: '#6C3FC5', background: '#F0EAFF', padding: '5px 14px', borderRadius: 999 }}>จิตวิทยา</span>
          </div>

          {/* Featured card + grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
            {/* Featured — first article spans 2 cols */}
            {toxicSeries.slice(0,1).map(a => (
              <a key={a.id} href="#" onClick={e => { e.preventDefault(); go('article:' + a.id); }}
                 className="card card-hover"
                 style={{ gridColumn: 'span 2', overflow: 'hidden', display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit' }}>
                <div style={{ height: 220, overflow: 'hidden', background: '#EEF3FD', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg viewBox="0 0 600 220" style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }} xmlns="http://www.w3.org/2000/svg">
                    <g opacity="0.14" fill="#024CDA">
                      <polygon points="30,24 48,58 12,58"/><polygon points="78,14 96,48 60,48"/>
                      <polygon points="126,24 144,58 108,58"/><polygon points="30,90 48,124 12,124"/>
                      <polygon points="78,100 96,134 60,134"/><polygon points="30,160 48,194 12,194"/>
                    </g>
                    <text x="460" y="178" fontFamily="Kanit,sans-serif" fontWeight="800" fontSize="200" fill="rgba(2,76,218,0.07)" textAnchor="middle">10</text>
                    <text x="460" y="108" fontFamily="Kanit,sans-serif" fontWeight="700" fontSize="30" fill="#024CDA" textAnchor="middle">สัญญาณเตือน</text>
                    <text x="460" y="140" fontFamily="Kanit,sans-serif" fontWeight="400" fontSize="13" fill="rgba(2,76,218,0.45)" textAnchor="middle" letterSpacing="4">TOXIC RELATIONSHIP</text>
                  </svg>
                </div>
                <div style={{ padding: '22px 24px', flex: 1 }}>
                  <CatBadge cat={a.cat} />
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, margin: '10px 0 10px', lineHeight: 1.3, color: 'var(--fg1)' }}>{a.title}</h3>
                  <p style={{ fontSize: 14, color: 'var(--fg3)', margin: '0 0 16px', lineHeight: 1.65 }}>{a.excerpt}</p>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--fg3)', fontSize: 13 }}>
                    <ProfileAvatar size={22} />
                    <span>ภาณุพันธ์ เพียสุระ</span>
                    <span>· {a.read}</span>
                    <span style={{ marginLeft: 'auto', color: 'var(--blue-600)', fontWeight: 600 }}>อ่านต่อ →</span>
                  </div>
                </div>
              </a>
            ))}
            {/* Remaining toxic articles */}
            {toxicSeries.slice(1).map(a => <ArticleCard key={a.id} a={a} go={go} />)}
          </div>
        </div>
      </section>

      {/* OTHER ARTICLES */}
      {otherArticles.length > 0 && (
        <section className="section-sm" style={{ background: 'var(--gray-50)', paddingBottom: 96 }}>
          <div className="wrap">
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--fg1)', marginBottom: 24 }}>
              บทความอื่นๆ
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
              {otherArticles.map(a => <ArticleCard key={a.id} a={a} go={go} />)}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}
window.Blog = Blog;