function Home({ go }) {
  const features = [
    { icon: 'brain', color: '#6C3FC5', bg: '#F0EAFF', t: 'จิตวิทยาที่ใช้ได้จริง', d: 'เข้าใจตัวเองและคนรอบข้าง ปลดล็อกความคิดที่ดึงรั้งคุณไว้' },
    { icon: 'shopping-bag', color: 'var(--blue-600)', bg: 'var(--blue-50)', t: 'ระบบ Digital Product', d: 'เฟรมเวิร์กทีละขั้น สร้าง E-book และคอร์สออนไลน์ที่ขายได้จริง' },
    { icon: 'cpu', color: '#D97706', bg: '#FEF3C7', t: 'Marketing + AI', d: 'เครื่องมือและกลยุทธ์ที่ทันสมัย ช่วยให้คุณเติบโตเร็วขึ้นคนเดียว' },
  ];

  const steps = [
    { n: '01', t: 'เลือกหัวข้อที่ใช่', d: 'หา Product ที่ตรงกับความรู้และกลุ่มคนของคุณ' },
    { n: '02', t: 'สร้างและแพ็ก', d: 'ลงมือตามเทมเพลต ออกแบบให้น่าซื้อ พร้อมขายทันที' },
    { n: '03', t: 'เปิดขายจริง', d: 'ตั้งราคา ทำการตลาด ปิดการขายครั้งแรก' },
  ];

  return (
    <div className="screen">

      {/* ══ HERO ══ */}
      <section style={{ position: 'relative', overflow: 'hidden', background: '#fff' }}>
        <div style={{
          position: 'absolute', top: -60, right: -80, width: 520, height: 520, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(2,76,218,.07), transparent 62%)',
          pointerEvents: 'none'
        }} />
        <div className="wrap r-hero" style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 52, alignItems: 'center', padding: '72px 28px 80px' }}>
          <div>
            <span className="badge badge-blue-soft" style={{ marginBottom: 20 }}>
              <Icon name="zap" size={14} /> สำหรับ Creator &amp; ฟรีแลนซ์
            </span>
            <h1 className="hero-h1" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(34px,4.5vw,54px)',
              lineHeight: 1.12, letterSpacing: '-.025em', margin: '0 0 20px', color: 'var(--fg1)' }}>
              สร้าง Digital Product<br />
              <span style={{ color: 'var(--blue-600)' }}>ที่ขายได้</span> ด้วย<br />
              จิตวิทยา + Marketing
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.8, color: 'var(--fg2)', margin: '0 0 28px', maxWidth: 440 }}>
              เรียนรู้ระบบที่ Content Creator และฟรีแลนซ์ใช้สร้างรายได้จาก E-book และคอร์สออนไลน์ ตั้งแต่ศูนย์จนถึงยอดขายแรก
            </p>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-cta btn-lg" onClick={() => go('course')}>เริ่มเรียนฟรี <span className="arr">→</span></button>
              <button className="btn btn-secondary btn-lg" onClick={() => go('ebook')}>ดู E-book</button>
            </div>
            <p style={{ fontSize: 13, color: 'var(--fg3)', marginTop: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="check-circle-2" size={16} color="var(--success)" /> ไม่ต้องใช้บัตรเครดิต · ยกเลิกได้ทุกเมื่อ
            </p>
          </div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <div style={{ position: 'relative' }}>
              <img className="hero-photo" src="assets/profile-photo.png" alt="ภาณุพันธ์ เพียสุระ"
                style={{ width: 300, height: 380, objectFit: 'cover', objectPosition: 'center top',
                  borderRadius: 24, boxShadow: 'var(--shadow-xl)', position: 'relative', zIndex: 1 }} />
              {/* floating card bottom-left */}
              <div className="card float-bl" style={{ position: 'absolute', bottom: -18, left: -22, padding: '12px 16px', zIndex: 2,
                display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-lg)' }}>
                <span style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--success-bg)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="trending-up" size={19} color="var(--success)" /></span>
                <div><div style={{ fontWeight: 700, fontSize: 14, color: 'var(--fg1)' }}>6 ล้าน+ วิว/เดือน</div>
                  <div style={{ fontSize: 12, color: 'var(--fg3)' }}>บน YouTube &amp; TikTok</div></div>
              </div>
              {/* floating card top-right */}
              <div className="card float-tr" style={{ position: 'absolute', top: 16, right: -20, padding: '10px 14px', zIndex: 2,
                display: 'flex', alignItems: 'center', gap: 8, boxShadow: 'var(--shadow-lg)' }}>
                <Stars value={5} size={14} />
                <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--fg1)' }}>4.9</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ══ WHO IS THIS FOR — 2 pillars ══ */}
      <section style={{ background: 'var(--gray-50)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
        <div className="wrap r-pillars" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, padding: '0 28px' }}>
          {[
            { color: '#6C3FC5', bg: '#F5F0FF', border: '#D8C8F5', icon: 'heart', cat: 'กลุ่ม จิตวิทยา',
              title: 'คนที่อยากเข้าใจตัวเองและคนรอบข้างมากขึ้น',
              desc: 'เนื้อหาจิตวิทยาที่กินใจ เข้าใจง่าย ช่วยปลดล็อกความเจ็บปวดและสร้างความสัมพันธ์ที่ดีขึ้น',
              cta: 'อ่านบทความจิตวิทยา', ctaId: 'article' },
            { color: 'var(--blue-600)', bg: 'var(--blue-50)', border: 'var(--blue-200)', icon: 'package',
              cat: 'กลุ่ม Digital Product',
              title: 'Creator และฟรีแลนซ์ที่อยากสร้างรายได้ออนไลน์',
              desc: 'ระบบสร้าง E-book, คอร์สออนไลน์ และ Digital Product ที่ทำซ้ำได้และขายได้จริง',
              cta: 'ดูคอร์สทั้งหมด', ctaId: 'course' },
          ].map((p, i) => (
            <div key={p.cat} style={{
              padding: '44px 36px',
              borderRight: i === 0 ? '1px solid var(--border)' : '0',
              background: p.bg,
            }}>
              <span style={{ width: 52, height: 52, borderRadius: 14, background: '#fff',
                border: `1.5px solid ${p.border}`, display: 'flex', alignItems: 'center',
                justifyContent: 'center', marginBottom: 18 }}>
                <Icon name={p.icon} size={26} color={p.color} /></span>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase',
                color: p.color, marginBottom: 10 }}>{p.cat}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: '0 0 10px',
                lineHeight: 1.3, color: 'var(--fg1)' }}>{p.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.75, color: 'var(--fg2)', margin: '0 0 20px' }}>{p.desc}</p>
              <button className="btn btn-sm" onClick={() => go(p.ctaId)}
                style={{ background: p.color, color: '#fff', borderRadius: 10 }}>
                {p.cta} <span className="arr">→</span>
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* ══ SOCIAL PROOF BAR ══ */}
      <div style={{ borderBottom: '1px solid var(--border)' }}>
        <div className="wrap" style={{ display: 'flex', justifyContent: 'space-around', padding: '30px 28px', flexWrap: 'wrap', gap: 20 }}>
          {[['6M+', 'วิวต่อเดือน'], ['10+', 'แบรนด์ดูแล'], ['4 ปี', 'ประสบการณ์'], ['฿5M+', 'ยอดขาย/เดือน']].map(([a, b]) => (
            <div key={b} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, color: 'var(--blue-600)', lineHeight: 1 }}>{a}</div>
              <div style={{ fontSize: 13, color: 'var(--fg3)', marginTop: 5 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ══ FEATURED PRODUCTS ══ */}
      <section className="section">
        <div className="wrap" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36 }}>
          <div>
            <span className="eyebrow">สินค้าแนะนำ</span>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h2)', letterSpacing: '-.02em', margin: '10px 0 0', color: 'var(--fg1)' }}>
              เริ่มต้นกับสินค้ายอดนิยม
            </h2>
          </div>
          <button className="btn btn-ghost" onClick={() => go('course')}>ดูทั้งหมด <span className="arr">→</span></button>
        </div>
        <div className="wrap r-cards-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
          {/* Course card */}
          <div className="card card-hover" style={{ overflow: 'hidden', cursor: 'pointer' }}
               onClick={() => go('course')}>
            <div style={{ height: 160, background: 'linear-gradient(135deg,var(--dark-800),var(--dark-900))',
              display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
              <span className="badge badge-yellow" style={{ position: 'absolute', top: 14, left: 14 }}>ขายดีอันดับ 1</span>
              <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'rgba(2,76,218,.25)',
                border: '2px solid rgba(2,76,218,.4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="graduation-cap" size={28} color="var(--blue-300)" />
              </div>
            </div>
            <div style={{ padding: '20px 22px 22px' }}>
              <span className="eyebrow" style={{ fontSize: 11 }}>คอร์สออนไลน์</span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, margin: '8px 0 6px', lineHeight: 1.3, color: 'var(--fg1)' }}>
                Digital Product Mastery สำหรับ Solo Creator
              </h3>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--fg3)', marginBottom: 14 }}>
                <Stars value={5} size={13} /><span>4.9 (1,240 รีวิว)</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="clock" size={13} />5 ชม.</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div><span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--fg1)' }}>฿1,890</span>
                  <span style={{ fontSize: 14, color: 'var(--fg3)', textDecoration: 'line-through', marginLeft: 8 }}>฿2,890</span></div>
                <button className="btn btn-cta btn-sm">ดูคอร์ส <span className="arr">→</span></button>
              </div>
            </div>
          </div>
          {/* E-book card */}
          <div className="card card-hover" style={{ overflow: 'hidden', cursor: 'pointer', display: 'grid', gridTemplateColumns: '1fr auto' }}
               onClick={() => go('ebook')}>
            <div style={{ padding: '24px 0 24px 24px' }}>
              <span className="badge badge-blue-soft" style={{ marginBottom: 14 }}>E-BOOK · ขายดี</span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, margin: '0 0 8px', lineHeight: 1.3, color: 'var(--fg1)' }}>
                แค่หายใจก็ผิดแล้ว
              </h3>
              <p style={{ fontSize: 13, color: 'var(--fg3)', margin: '0 0 14px', lineHeight: 1.6 }}>คู่มือเอาชีวิตรอดของลูกที่ต้องอยู่ในบ้าน Toxic</p>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 16 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--fg1)' }}>฿390</span>
                <span style={{ fontSize: 13, color: 'var(--fg3)', textDecoration: 'line-through' }}>฿690</span>
              </div>
              <button className="btn btn-blue btn-sm">ซื้อเลย <span className="arr">→</span></button>
            </div>
            <div style={{ padding: '12px 18px 12px 8px', display: 'flex', alignItems: 'center' }}>
              <img src="assets/ebooks/ebook-haiyai.png" alt="แค่หายใจก็ผิดแล้ว"
                style={{ height: 180, width: 'auto', objectFit: 'contain', borderRadius: 6, boxShadow: '0 8px 24px rgba(0,0,0,.25)' }} />
            </div>
          </div>
        </div>
      </section>

      {/* ══ HOW IT WORKS ══ */}
      <section className="section" style={{ background: 'var(--gray-50)', paddingTop: 72, paddingBottom: 80 }}>
        <div className="wrap center" style={{ maxWidth: 600, marginBottom: 52 }}>
          <span className="eyebrow">เริ่มต้น 3 ขั้น</span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h2)', letterSpacing: '-.02em', margin: '12px 0 0', color: 'var(--fg1)' }}>
            เส้นทางสู่ยอดขายแรก
          </h2>
        </div>
        <div className="wrap r-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {steps.map(s => (
            <div key={s.n} style={{ padding: '4px 8px' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 52, color: 'var(--yellow-500)', lineHeight: 1 }}>{s.n}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 21, margin: '12px 0 8px', color: 'var(--fg1)' }}>{s.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.75, color: 'var(--fg2)', margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ══ FEATURES ══ */}
      <section className="section">
        <div className="wrap center" style={{ maxWidth: 640, marginBottom: 48 }}>
          <span className="eyebrow">ทำไมต้อง Solo Lab</span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h2)', letterSpacing: '-.02em', margin: '12px 0 0', color: 'var(--fg1)' }}>
            ผสานจิตวิทยา · Marketing · AI
          </h2>
        </div>
        <div className="wrap r-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {features.map(f => (
            <div key={f.t} className="card" style={{ padding: 28 }}>
              <span style={{ width: 52, height: 52, borderRadius: 14, background: f.bg,
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                <Icon name={f.icon} size={26} color={f.color} /></span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, margin: '0 0 8px', color: 'var(--fg1)' }}>{f.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.75, color: 'var(--fg2)', margin: 0 }}>{f.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ══ ABOUT / INSTRUCTOR ══ */}
      <section className="section-sm" style={{ background: 'var(--gray-50)', paddingTop: 56, paddingBottom: 64 }}>
        <div className="wrap">
          <div className="card r-about pad-m" style={{ padding: '44px 48px', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 40, alignItems: 'center' }}>
            <img src="assets/profile-photo.png" alt="ภาณุพันธ์ เพียสุระ"
              style={{ width: 160, height: 200, objectFit: 'cover', objectPosition: 'center top', borderRadius: 18, boxShadow: 'var(--shadow-md)' }} />
            <div>
              <span className="eyebrow" style={{ marginBottom: 10, display: 'block' }}>เกี่ยวกับผู้สอน</span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, margin: '0 0 6px', color: 'var(--fg1)' }}>
                ภาณุพันธ์ เพียสุระ <span style={{ fontWeight: 400, fontSize: 18, color: 'var(--fg3)' }}>(พี่โจ)</span>
              </h3>
              <div style={{ fontSize: 14, color: 'var(--blue-600)', fontWeight: 600, marginBottom: 14 }}>
                Marketing Online · AI Automation · Digital Product Expert
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.8, color: 'var(--fg2)', margin: '0 0 18px', maxWidth: 520 }}>
                ผู้เชี่ยวชาญด้าน Marketing + AI Automation ที่ดูแลแบรนด์ชั้นนำ 10+ แบรนด์ อดีต Brand Manager ที่สร้างยอดขายออนไลน์ ฿5M+/เดือน ปัจจุบันมียอดวิวรวมกว่า 6 ล้านวิว/เดือน จากช่องจิตวิทยาและการตลาด
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                {['10+ แบรนด์', '6M+ วิว/เดือน', '4+ ปีประสบการณ์'].map(t => (
                  <span key={t} className="badge badge-blue-soft">{t}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ══ LEAD MAGNET / QUIZ ══ */}
      <section style={{ padding: '0 28px 88px' }}>
        <div className="wrap">
          <div className="r-quiz pad-m" style={{ background: 'linear-gradient(135deg,#3D1F7A,#1A0E3E)', borderRadius: 28,
            padding: '56px 48px', display: 'grid', gridTemplateColumns: '1fr auto', gap: 36,
            alignItems: 'center', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: 120, bottom: -60, width: 300, height: 300, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(245,197,24,.14), transparent 60%)', pointerEvents: 'none' }} />
            <div style={{ position: 'relative' }}>
              <span className="badge" style={{ background: 'rgba(245,197,24,.2)', color: 'var(--yellow-400)', marginBottom: 16 }}>FREE · แบบทดสอบ</span>
              <h2 className="quiz-h2" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, color: '#fff', margin: '0 0 10px', letterSpacing: '-.02em' }}>
                คุณมีพฤติกรรม Toxic ในความสัมพันธ์ไหม?
              </h2>
              <p style={{ color: 'rgba(255,255,255,.65)', fontSize: 16, margin: '0 0 22px', lineHeight: 1.7 }}>
                ทำแบบทดสอบฟรี รู้ผลทันที พร้อมรับส่วนลด E-book 50%
              </p>
              <button className="btn btn-cta btn-lg">ทำแบบทดสอบฟรี <span className="arr">→</span></button>
            </div>
            <div style={{ position: 'relative', textAlign: 'center', minWidth: 160 }}>
              <div style={{ width: 120, height: 120, borderRadius: '50%', background: 'rgba(245,197,24,.15)',
                border: '2px solid rgba(245,197,24,.3)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                margin: '0 auto' }}>
                <Icon name="clipboard-check" size={48} color="var(--yellow-400)" />
              </div>
              <div style={{ color: 'rgba(255,255,255,.5)', fontSize: 12, marginTop: 12 }}>ใช้เวลา 3 นาที</div>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}
window.Home = Home;