function Article({ go }) {
  return (
    <div className="screen">
      <article style={{ paddingTop: 44 }}>
        <div className="wrap-narrow">
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 13, color: 'var(--fg3)', marginBottom: 16 }}>
            <a href="#" onClick={e => { e.preventDefault(); go('home'); }} style={{ color: 'var(--link)' }}>หน้าแรก</a>
            <span>/</span><a href="#" onClick={e => { e.preventDefault(); }} style={{ color: 'var(--link)' }}>บทความ</a>
          </div>
          <CatBadge cat="Digital Product" />
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h1)', lineHeight: 1.15, letterSpacing: '-.025em', margin: '16px 0 20px', color: 'var(--fg1)' }}>
            เริ่มขายสินค้าดิจิทัลชิ้นแรกใน 30 วัน ทำได้จริงไหม?
          </h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingBottom: 26, borderBottom: '1px solid var(--border)' }}>
            <ProfileAvatar size={46} />
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--fg1)' }}>ภาณุพันธ์ เพียสุระ</div>
              <div style={{ fontSize: 13, color: 'var(--fg3)' }}>2 มิ.ย. 2026 · อ่าน 6 นาที</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              {['bookmark','share-2'].map(s => (
                <span key={s} style={{ width: 38, height: 38, borderRadius: 10, border: '1px solid var(--border)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg2)', cursor: 'pointer' }}>
                  <Icon name={s} size={17} /></span>
              ))}
            </div>
          </div>
        </div>

        <div className="wrap-narrow">
          <div className="photo blue" style={{ height: 300, borderRadius: 20, margin: '32px 0' }}><Icon name="image" size={38} /></div>
        </div>

        <div className="wrap-narrow" style={{ fontSize: 18, lineHeight: 1.85, color: 'var(--fg1)' }}>
          <p style={{ margin: '0 0 24px' }}>
            คำถามนี้เป็นคำถามที่เราได้ยินบ่อยที่สุดจากคนที่เพิ่งเริ่มต้น คำตอบสั้น ๆ คือ "ได้" แต่มีเงื่อนไขสำคัญที่ต้องเข้าใจก่อน บทความนี้จะพาคุณดูว่าทำไมระบบถึงสำคัญกว่าแรงบันดาลใจ
          </p>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, margin: '36px 0 14px', color: 'var(--fg1)', letterSpacing: '-.01em' }}>
            ทำไม 30 วันถึงเป็นกรอบเวลาที่ดี
          </h2>
          <p style={{ margin: '0 0 24px' }}>
            30 วันสั้นพอที่จะมีความเร่งด่วน แต่ยาวพอที่จะลงมือทำจริงโดยไม่รีบจนพลาด การตั้งกรอบเวลาชัดเจนช่วยให้คุณตัดสินใจได้เร็วขึ้นและเลิกผัดวันประกันพรุ่ง
          </p>
          <blockquote style={{ margin: '32px 0', padding: '20px 24px', borderLeft: '4px solid var(--yellow-500)',
            background: 'var(--gray-50)', borderRadius: '0 12px 12px 0',
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, lineHeight: 1.5, color: 'var(--dark-800)' }}>
            "คุณไม่จำเป็นต้องมีสินค้าที่สมบูรณ์แบบ คุณแค่ต้องมีสินค้าที่ขายได้"
          </blockquote>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, margin: '36px 0 14px', color: 'var(--fg1)', letterSpacing: '-.01em' }}>
            3 สิ่งที่ต้องทำในสัปดาห์แรก
          </h2>
          <ol style={{ margin: '0 0 24px', paddingLeft: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <li><b>เลือกหัวข้อที่คุณรู้จริง</b> — ไม่ต้องเป็นผู้เชี่ยวชาญระดับโลก แค่รู้มากกว่าคนที่คุณจะขายให้</li>
            <li><b>ร่างโครงสร้างเนื้อหา</b> — เขียนหัวข้อหลักออกมาก่อน แล้วค่อยลงรายละเอียด</li>
            <li><b>ตั้งราคาเบื้องต้น</b> — เริ่มจากราคาที่คุณกล้าบอกเพื่อน แล้วค่อยปรับ</li>
          </ol>
        </div>

        {/* inline CTA */}
        <div className="wrap-narrow" style={{ margin: '40px 0' }}>
          <div style={{ background: 'linear-gradient(135deg,var(--dark-800),var(--dark-900))', borderRadius: 20,
            padding: '30px 34px', display: 'flex', alignItems: 'center', gap: 24, color: '#fff', flexWrap: 'wrap' }}>
            <div style={{ flex: 1, minWidth: 220 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, marginBottom: 6 }}>อยากเริ่มแบบมีระบบ?</div>
              <div style={{ color: 'rgba(255,255,255,.6)', fontSize: 14 }}>ดูคอร์ส Digital Product Mastery — ฟรีบทแรก</div>
            </div>
            <button className="btn btn-cta" onClick={() => go('course')}>ดูคอร์ส <span className="arr">→</span></button>
          </div>
        </div>
      </article>

      {/* RELATED */}
      <section className="section-sm" style={{ background: 'var(--gray-50)', marginTop: 24, paddingBottom: 80 }}>
        <div className="wrap">
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h3)', margin: '0 0 26px', color: 'var(--fg1)' }}>บทความที่เกี่ยวข้อง</h2>
          <div className="r-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
            {ARTICLES.map(a => <ArticleCard key={a.id} a={a} go={go} />)}
          </div>
        </div>
      </section>
    </div>
  );
}
window.Article = Article;