function CourseDetail({ go }) {
  const [open, setOpen] = React.useState(0);
  const learn = [
    'วางแผน Digital Product ที่ตรงกลุ่มเป้าหมาย','เขียนและออกแบบ E-book มืออาชีพ',
    'ตั้งราคาและสร้างหน้าขายที่ปิดการขายได้','ระบบการตลาดที่ทำซ้ำได้ทุกเดือน',
    'ใช้ AI ช่วยสร้าง Content และ Automation','เก็บรีวิวและสร้างความน่าเชื่อถือ',
  ];
  const modules = [
    { t: 'เริ่มต้น: Mindset + ตั้งเป้าหมาย', n: 4, time: '32 น.' },
    { t: 'ออกแบบ Digital Product ที่ขายได้', n: 6, time: '48 น.' },
    { t: 'สร้างและแพ็ก E-book / Template', n: 5, time: '40 น.' },
    { t: 'หน้าขาย + Pricing Psychology', n: 4, time: '36 น.' },
    { t: 'AI Marketing + การเปิดตัว', n: 5, time: '44 น.' },
  ];
  const c = COURSES[0];
  return (
    <div className="screen">
      <section style={{ background: 'var(--dark-900)', color: '#fff' }}>
        <div className="wrap r-split" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 48, padding: '40px 28px 52px' }}>
          <div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 13, color: 'rgba(255,255,255,.45)', marginBottom: 18 }}>
              <a href="#" onClick={e => { e.preventDefault(); go('home'); }} style={{ color: 'rgba(255,255,255,.55)' }}>หน้าแรก</a>
              <span>/</span><a href="#" onClick={e => { e.preventDefault(); }} style={{ color: 'rgba(255,255,255,.55)' }}>คอร์สเรียน</a>
              <span>/</span><span style={{ color: '#fff' }}>{c.title}</span>
            </div>
            <span className="badge badge-yellow" style={{ marginBottom: 16 }}>ขายดีอันดับ 1</span>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h2)', lineHeight: 1.15, letterSpacing: '-.02em', margin: '0 0 16px', color: '#fff' }}>{c.title}</h1>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: 'rgba(255,255,255,.65)', margin: '0 0 20px', maxWidth: 500 }}>
              คอร์สที่จะพาคุณสร้าง Digital Product ชิ้นแรกที่ขายได้จริง ด้วยระบบที่ผสาน Mindset · Marketing · AI
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap', fontSize: 14, color: 'rgba(255,255,255,.65)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Stars value={5} size={14} /> 4.9 ({c.students.toLocaleString()} รีวิว)</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="users" size={15} />{c.students.toLocaleString()} ผู้เรียน</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="globe" size={15} />ภาษาไทย</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 22 }}>
              <ProfileAvatar size={44} />
              <div style={{ fontSize: 14 }}>
                <span style={{ color: 'rgba(255,255,255,.45)' }}>สอนโดย </span>
                <b style={{ color: '#fff' }}>ภาณุพันธ์ เพียสุระ (พี่โจ)</b>
              </div>
            </div>
          </div>
          <div>
            <div className="card no-sticky-m" style={{ padding: 22, position: 'sticky', top: 86 }}>
              <div style={{ borderRadius: 14, height: 150, background: 'linear-gradient(135deg,var(--dark-700),var(--dark-900))',
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18, cursor: 'pointer' }}>
                <span style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(245,197,24,.18)',
                  border: '2px solid rgba(245,197,24,.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--yellow-400)' }}>
                  <Icon name="play" size={28} /></span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                <Price price={c.price} old={c.old} size={28} />
                <span className="badge badge-red">ลด 35%</span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--fg3)', marginBottom: 16 }}>ราคาพิเศษ · เหลืออีก 2 วัน</div>
              <button className="btn btn-cta btn-block btn-lg" style={{ marginBottom: 10 }}>ลงทะเบียนเรียน <span className="arr">→</span></button>
              <button className="btn btn-secondary btn-block">หยิบใส่ตะกร้า</button>
              <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'flex', flexDirection: 'column', gap: 11 }}>
                {[['infinity','เข้าเรียนได้ตลอดชีพ'],['file-down','ไฟล์เทมเพลต 12 ไฟล์'],['award','ใบประกาศนียบัตร'],['smartphone','เรียนผ่านมือถือได้']].map(([ic, t]) => (
                  <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--fg2)' }}>
                    <Icon name={ic} size={17} color="var(--blue-600)" />{t}</li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>
      <div className="wrap r-split" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 48, padding: '52px 28px 80px', alignItems: 'start' }}>
        <div>
          <div className="card" style={{ padding: 28, marginBottom: 32 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: '0 0 18px', color: 'var(--fg1)' }}>สิ่งที่คุณจะได้เรียนรู้</h2>
            <div className="r-learn" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px' }}>
              {learn.map(l => (
                <div key={l} style={{ display: 'flex', gap: 10, fontSize: 14, lineHeight: 1.6, color: 'var(--fg2)' }}>
                  <Icon name="check" size={17} color="var(--success)" style={{ flex: 'none', marginTop: 2 }} />{l}</div>
              ))}
            </div>
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: '0 0 6px', color: 'var(--fg1)' }}>เนื้อหาในคอร์ส</h2>
          <p style={{ fontSize: 13, color: 'var(--fg3)', margin: '0 0 16px' }}>5 โมดูล · 24 บทเรียน · 5 ชั่วโมง</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {modules.map((m, i) => (
              <div key={i} className="card" style={{ overflow: 'hidden' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', background: 'none', border: 0, cursor: 'pointer',
                  display: 'flex', alignItems: 'center', gap: 12, padding: '15px 18px', textAlign: 'left' }}>
                  <Icon name={open === i ? 'chevron-down' : 'chevron-right'} size={18} color="var(--blue-600)" />
                  <span style={{ fontWeight: 600, fontSize: 15, color: 'var(--fg1)', flex: 1 }}>โมดูล {i+1}: {m.t}</span>
                  <span style={{ fontSize: 12, color: 'var(--fg3)' }}>{m.n} บท · {m.time}</span>
                </button>
                {open === i && (
                  <div style={{ borderTop: '1px solid var(--border)', padding: '4px 18px 14px 50px' }}>
                    {Array.from({ length: m.n }).map((_,j) => (
                      <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', fontSize: 14, color: 'var(--fg2)', borderBottom: j < m.n-1 ? '1px solid var(--gray-100)' : '0' }}>
                        <Icon name="play-circle" size={15} color="var(--blue-400)" />บทที่ {i+1}.{j+1} — ตัวอย่างเนื้อหา
                        <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--fg3)' }}>8:30</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
        <div>
          <div className="card" style={{ padding: 24, marginBottom: 20 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, margin: '0 0 16px', color: 'var(--fg1)' }}>ผู้สอน</h3>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
              <ProfileAvatar size={60} />
              <div><div style={{ fontWeight: 700, fontSize: 16, color: 'var(--fg1)' }}>ภาณุพันธ์ เพียสุระ</div>
                <div style={{ fontSize: 13, color: 'var(--blue-600)' }}>Solo Lab · Marketing + AI Expert</div></div>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.8, color: 'var(--fg2)', margin: 0 }}>
              ผู้เชี่ยวชาญ Marketing Online และ AI Automation ที่ดูแลแบรนด์ 10+ แบรนด์ มียอดวิว 6M+/เดือน ชอบแบ่งปันระบบที่ใช้ได้จริงแบบไม่กั๊ก
            </p>
          </div>
          <div className="card" style={{ padding: 24, background: 'var(--blue-50)', border: '1px solid var(--blue-200)' }}>
            <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, margin: '0 0 10px', color: 'var(--blue-700)' }}>ยังไม่แน่ใจ?</h4>
            <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--blue-700)', margin: '0 0 14px' }}>ลองเรียนบทแรกฟรีก่อนได้เลย ไม่ต้องสมัครสมาชิก</p>
            <button className="btn btn-blue btn-sm">ดูตัวอย่างบทเรียน →</button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.CourseDetail = CourseDetail;