// Course detail page
function CoursePage({ go, params, enroll, enrolled }) {
  const c = COURSES.find(x => x.id === params.id) || COURSES[0];
  const [tab, setTab] = React.useState('syllabus');
  const [lectures, setLectures] = React.useState([]);

  const [discussion, setDiscussion] = React.useState('');
  const [posts, setPosts] = React.useState([]);
  const [postBusy, setPostBusy] = React.useState(false);
  const [postErr, setPostErr] = React.useState('');

  React.useEffect(() => {
    let cancelled = false;
    if (!c) return;
    window.api.lectures(c.id).then(rows => {
      if (cancelled) return;
      setLectures(rows.map(window.normalizeLecture));
    }).catch(() => setLectures([]));
    window.api.posts(c.id).then(rows => {
      if (!cancelled) setPosts(rows);
    }).catch(() => setPosts([]));
    return () => { cancelled = true; };
  }, [c?.id]);

  async function submitPost(e){
    e.preventDefault();
    setPostErr('');
    if (!discussion.trim()) return;
    setPostBusy(true);
    try {
      const post = await window.api.addPost(c.id, discussion.trim());
      setPosts(p => [...p, post]);
      setDiscussion('');
    } catch (err) {
      if (err.status === 401) { setPostErr('กรุณาเข้าสู่ระบบก่อนโพสต์'); go('login'); }
      else setPostErr('ส่งโพสต์ไม่สำเร็จ กรุณาลองใหม่');
    } finally {
      setPostBusy(false);
    }
  }

  const isEnrolled = enrolled.includes(c.id);
  const related = COURSES.filter(x => x.fac === c.fac && x.id !== c.id).slice(0, 4);

  return (
    <div>
      <div className="wrap">
        <div className="crumbs">
          <a onClick={()=>go('home')}>หน้าแรก</a><span className="sep">/</span>
          <a onClick={()=>go('courses')}>รายวิชา</a><span className="sep">/</span>
          <a onClick={()=>go('courses',{fac:c.fac})}>{facName(c.fac)}</a><span className="sep">/</span>
          <span className="here">{c.code}</span>
        </div>

        {/* URL hint for tester */}
        <div className="mono" style={{color:'var(--ink-3)', fontSize:11.5, padding:'4px 0 12px'}} data-test="A01 IDOR · ?id=">
          /courses/{c.id} · sku {c.code}
        </div>
      </div>

      {/* Header banner */}
      <section style={{background:'var(--ink)', color:'var(--bg)', padding:'48px 0 56px', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, background:`radial-gradient(circle at 85% 20%, ${facColor(c.fac)}30, transparent 50%)`, pointerEvents:'none'}}/>
        <div className="wrap" style={{position:'relative', display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <div className="row" style={{gap:10, marginBottom:14, flexWrap:'wrap'}}>
              <span className="tag" style={{background:facColor(c.fac), color:'#fff', borderColor:'transparent'}}>{facName(c.fac)}</span>
              <span className="tag outline" style={{color:'var(--bg-2)', borderColor:'rgba(245,239,226,.3)'}}>{c.code}</span>
              <span className="tag outline" style={{color:'var(--bg-2)', borderColor:'rgba(245,239,226,.3)'}}>{c.level}</span>
              <span className="tag outline" style={{color:'var(--bg-2)', borderColor:'rgba(245,239,226,.3)'}}>{c.credits} หน่วยกิต</span>
            </div>
            <h1 className="serif" style={{fontSize:'clamp(32px, 4.4vw, 52px)', margin:'0 0 18px', fontWeight:600, lineHeight:1.15, letterSpacing:'-.005em'}}>
              {c.name}
            </h1>
            <p style={{color:'rgba(245,239,226,.78)', fontSize:16, maxWidth:660, margin:'0 0 24px', lineHeight:1.7}}>{c.desc}</p>
            <div className="row" style={{gap:18, flexWrap:'wrap', color:'rgba(245,239,226,.7)', fontSize:13.5}}>
              <span className="row" style={{gap:6}}><Ic.user size={15}/> {c.inst}</span>
              <span style={{color:'rgba(245,239,226,.3)'}}>·</span>
              <span className="row" style={{gap:6}}><Ic.star size={15} fill="var(--accent)" stroke="var(--accent)"/> {c.rating} ({thNum(c.students)} รีวิว)</span>
              <span style={{color:'rgba(245,239,226,.3)'}}>·</span>
              <span className="row" style={{gap:6}}><Ic.globe size={15}/> {c.lang}</span>
              <span style={{color:'rgba(245,239,226,.3)'}}>·</span>
              <span className="row" style={{gap:6}}><Ic.clock size={15}/> {c.hours} ชม. · {c.lectures} บทเรียน</span>
            </div>
          </div>
          <div style={{background:'var(--paper)', color:'var(--ink)', borderRadius:'var(--r-lg)', padding:24, boxShadow:'0 24px 48px -16px rgba(0,0,0,.4)'}}>
            <Placeholder seed={`preview-${c.id}`} label={`ตัวอย่างการสอน 02:14`} num="EP1" variant="wide" style={{marginBottom:16, borderRadius:'var(--r)'}}/>
            <div style={{textAlign:'center', marginBottom:18}}>
              <div className="serif" style={{fontSize:32, fontWeight:600}}>ไม่มีค่าใช้จ่าย</div>
              <div style={{color:'var(--ink-3)', fontSize:12.5, marginTop:4}}>สำหรับนักศึกษาในระบบ · ใบรับรอง ฿1,500</div>
            </div>
            {isEnrolled ? (
              <>
                <button className="btn acc" style={{width:'100%', marginBottom:10}} onClick={()=>go('lecture',{id:c.id})}>
                  เรียนต่อ · บทที่ 4 <Ic.play size={14}/>
                </button>
                <div className="pbar" style={{marginBottom:6}}><div style={{width:'18%'}}/></div>
                <div className="row" style={{justifyContent:'space-between', fontSize:12, color:'var(--ink-3)'}}>
                  <span>คืบหน้า 18%</span>
                  <span>3 / 24 บทเรียน</span>
                </div>
              </>
            ) : (
              <>
                <button className="btn acc" style={{width:'100%', marginBottom:10}} data-test="A04 race condition" onClick={()=>{ enroll(c.id); }}>
                  ลงทะเบียนเรียน
                </button>
                <button className="btn alt" style={{width:'100%'}}>เพิ่มในรายการที่สนใจ</button>
              </>
            )}
            <div className="hr"/>
            <div style={{fontSize:13, color:'var(--ink-2)', lineHeight:1.8}}>
              <div className="row" style={{gap:8}}><Ic.check size={14}/> เข้าถึงได้ตลอดภาคการศึกษา</div>
              <div className="row" style={{gap:8}}><Ic.check size={14}/> วิดีโอบรรยาย {c.hours} ชั่วโมง</div>
              <div className="row" style={{gap:8}}><Ic.check size={14}/> เอกสารและสไลด์ดาวน์โหลดได้</div>
              <div className="row" style={{gap:8}}><Ic.check size={14}/> ฟอรัมถามตอบกับอาจารย์และ TA</div>
              <div className="row" style={{gap:8}}><Ic.check size={14}/> ใบรับรอง (ถ้าทำคะแนนผ่านเกณฑ์)</div>
            </div>
          </div>
        </div>
      </section>

      <div className="wrap" style={{marginTop:-1}}>
        {/* Tabs */}
        <div style={{display:'flex', borderBottom:'1px solid var(--line)', gap:0, overflowX:'auto', padding:'0', position:'sticky', top:88, background:'var(--bg)', zIndex:10}}>
          {[['syllabus','รายละเอียดวิชา'],['outline','โครงร่างบทเรียน'],['assign','แบบฝึกหัด'],['discuss',`ฟอรัม (${posts.length})`],['inst','ผู้สอน']].map(([k,l]) => (
            <button key={k} onClick={()=>setTab(k)}
              style={{appearance:'none', border:0, background:'transparent',
                      padding:'18px 22px', fontSize:14.5,
                      color: tab===k?'var(--ink)':'var(--ink-3)', cursor:'default',
                      borderBottom: '2px solid '+(tab===k?'var(--accent)':'transparent'),
                      marginBottom:-1, fontWeight: tab===k?600:500, whiteSpace:'nowrap'}}>{l}</button>
          ))}
        </div>

        <div style={{padding:'40px 0'}}>
          {tab === 'syllabus' && (
            <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:48}}>
              <div>
                {/* Preview video */}
                <div style={{position:'relative', borderRadius:'var(--r-lg)', overflow:'hidden', background:'#000', aspectRatio:'16/9', marginBottom:28}}>
                  <video
                    src="/assets/video/sample-5s.mp4"
                    poster={`/assets/img/picsum/preview-${c.id}_960x540.jpg`}
                    controls playsInline preload="metadata"
                    data-test="preview video · cache 7d"
                    style={{width:'100%', height:'100%', objectFit:'cover'}}/>
                  <span className="tag" style={{position:'absolute', top:12, left:12, background:'var(--accent)', color:'var(--ink)', borderColor:'transparent'}}>ตัวอย่างการสอน</span>
                </div>

                <h2 className="serif" style={{fontSize:26, margin:'0 0 16px', fontWeight:600}}>คำอธิบายรายวิชา</h2>
                <p style={{margin:'0 0 14px', color:'var(--ink-2)', fontSize:15.5, lineHeight:1.85}}>{c.desc}</p>
                <p style={{color:'var(--ink-2)', fontSize:15.5, lineHeight:1.85}}>รายวิชานี้ออกแบบให้ผู้เรียนได้ลงมือปฏิบัติจริงผ่านโครงงานประจำสัปดาห์ การวิเคราะห์โค้ดของผู้เรียนคนอื่น และการอภิปรายในฟอรัม. ผู้สำเร็จการศึกษาจะสามารถออกแบบและพัฒนาระบบขนาดกลางได้อย่างมั่นใจ.</p>

                <h3 className="serif" style={{fontSize:22, margin:'32px 0 14px', fontWeight:600}}>เมื่อจบรายวิชาแล้ว ผู้เรียนจะสามารถ</h3>
                <ul style={{margin:0, padding:'0 0 0 0', listStyle:'none'}}>
                  {[
                    'อธิบายแนวคิดการเขียนโปรแกรมเชิงวัตถุและความแตกต่างจากแบบโครงสร้าง',
                    'ออกแบบคลาสและความสัมพันธ์ระหว่างคลาสได้อย่างมีคุณภาพ',
                    'ประยุกต์หลักการห่อหุ้ม สืบทอด และพหุสัณฐานในระบบจริง',
                    'เขียนการทดสอบหน่วยและบำรุงรักษาโค้ดให้สะอาด',
                    'ทำงานร่วมกับผู้อื่นผ่านระบบควบคุมเวอร์ชัน Git',
                  ].map((o,i) => (
                    <li key={i} className="row" style={{gap:12, padding:'10px 0', alignItems:'flex-start', fontSize:15, color:'var(--ink-2)'}}>
                      <Ic.check size={18} style={{color:'var(--accent-2)', marginTop:4, flexShrink:0}}/>
                      <span>{o}</span>
                    </li>
                  ))}
                </ul>

                <h3 className="serif" style={{fontSize:22, margin:'32px 0 14px', fontWeight:600}}>วิชาที่ควรเรียนมาก่อน</h3>
                <div className="row" style={{gap:8, flexWrap:'wrap'}}>
                  <span className="tag outline">CS-100 · พื้นฐานคอมพิวเตอร์</span>
                  <span className="tag outline">MATH-101 · แคลคูลัส 1</span>
                  <span className="tag outline">หรือเทียบเท่า</span>
                </div>

                <h3 className="serif" style={{fontSize:22, margin:'32px 0 14px', fontWeight:600}}>ภาพรวมเนื้อหา</h3>
                <p style={{margin:'0 0 14px', color:'var(--ink-3)', fontSize:13.5}}>ตัวอย่างสไลด์ โค้ด และโจทย์จากรายวิชา</p>
                <div className="grid g3" style={{gap:10}}>
                  {[1,2,3,4,5,6].map(i => (
                    <div key={i} style={{aspectRatio:'4/3', borderRadius:'var(--r)', overflow:'hidden', background:'var(--bg-2)', cursor:'default', position:'relative'}}>
                      <img src={`/assets/img/picsum/${c.id}-shot-${i}_400x300.jpg`} alt="" loading="lazy"
                        style={{width:'100%', height:'100%', objectFit:'cover'}}/>
                      <span style={{position:'absolute', bottom:6, left:8, fontSize:10, color:'#fff', fontFamily:'JetBrains Mono, monospace', textShadow:'0 1px 4px rgba(0,0,0,.6)'}}>shot {i.toString().padStart(2,'0')}</span>
                    </div>
                  ))}
                </div>

                <h3 className="serif" style={{fontSize:22, margin:'32px 0 14px', fontWeight:600}}>การวัดผล</h3>
                <table style={{width:'100%', borderCollapse:'collapse', fontSize:14}}>
                  <tbody>
                    {[['การเข้าชั้นเรียนและกิจกรรม','10%'],['แบบฝึกหัดประจำสัปดาห์','25%'],['สอบกลางภาค','25%'],['โครงงานปลายภาค','25%'],['สอบปลายภาค','15%']].map(([k,v]) => (
                      <tr key={k} style={{borderBottom:'1px solid var(--line)'}}>
                        <td style={{padding:'10px 0', color:'var(--ink-2)'}}>{k}</td>
                        <td style={{padding:'10px 0', textAlign:'right', fontFamily:'JetBrains Mono, monospace', color:'var(--ink)', fontWeight:600}}>{v}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <aside style={{position:'sticky', top:160, alignSelf:'flex-start'}}>
                <div className="panel" style={{padding:22}}>
                  <h4 className="serif" style={{margin:'0 0 14px', fontSize:18, fontWeight:600}}>ข้อมูลรายวิชา</h4>
                  <table style={{width:'100%', fontSize:13.5}}>
                    <tbody>
                      {[['รหัสวิชา', c.code],['ภาคการศึกษา', c.term],['ระดับชั้น', c.level],['ภาษา', c.lang],['หน่วยกิต', c.credits+' หน่วยกิต'],['จำนวนสัปดาห์', c.weeks+' สัปดาห์'],['ชั่วโมงเรียน', c.hours+' ชม.'],['ผู้เรียน', thNum(c.students)+' คน']].map(([k,v]) => (
                        <tr key={k} style={{borderBottom:'1px solid var(--line)'}}>
                          <td style={{padding:'9px 0', color:'var(--ink-3)', width:'45%'}}>{k}</td>
                          <td style={{padding:'9px 0', textAlign:'right', fontWeight:500}}>{v}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                  <div className="hr"/>
                  <button className="btn alt sm" style={{width:'100%'}}>
                    <Ic.download size={14}/> ดาวน์โหลดประมวลรายวิชา (PDF)
                  </button>
                </div>
              </aside>
            </div>
          )}

          {tab === 'outline' && (
            <div>
              <h2 className="serif" style={{fontSize:26, margin:'0 0 4px', fontWeight:600}}>โครงร่างบทเรียน</h2>
              <p style={{color:'var(--ink-3)', margin:'0 0 20px'}}>ทั้งหมด {lectures.length} บทเรียน · {c.weeks} สัปดาห์</p>
              <div className="panel" style={{padding:0, overflow:'hidden'}}>
                {[1,2,3,4,5,6].map(wk => (
                  <div key={wk} style={{borderBottom:wk<6?'1px solid var(--line)':0}}>
                    <div style={{padding:'14px 22px', background:'var(--bg-1)', display:'flex', alignItems:'center', gap:14}}>
                      <span className="mono" style={{fontSize:11, color:'var(--accent-2)', letterSpacing:'.08em', fontWeight:600}}>สัปดาห์ที่ {wk}</span>
                      <span style={{fontSize:14, fontWeight:600}}>{wk===1?'แนะนำและพื้นฐาน':wk===2?'คลาสและออบเจ็กต์':wk===3?'การสืบทอดและพหุสัณฐาน':wk===4?'แบบฝึกหัดและการประเมินกลางทาง':wk===5?'อินเตอร์เฟซและข้อยกเว้น':'การทดสอบและคุณภาพโค้ด'}</span>
                      <span style={{flex:1}}/>
                      <span style={{color:'var(--ink-3)', fontSize:13}}>{lectures.filter(l=>l.wk===wk).length} รายการ</span>
                      <Ic.chevD size={14} style={{color:'var(--ink-3)'}}/>
                    </div>
                    {lectures.filter(l=>l.wk===wk).map(l => (
                      <div key={l.id} className="between" style={{padding:'14px 22px', borderTop:'1px solid var(--line)', cursor:'default'}}
                        onClick={()=>isEnrolled ? go('lecture',{id:c.id, lec:l.id}) : null}>
                        <div className="row" style={{gap:14}}>
                          <span style={{width:28, height:28, borderRadius:99, display:'grid', placeItems:'center',
                            background: l.done?'var(--ok)':'var(--bg-2)',
                            color: l.done?'var(--paper)':'var(--ink-3)'}}>
                            {l.done ? <Ic.check size={14}/> : l.kind==='video' ? <Ic.play size={12}/> : l.kind==='quiz' ? <Ic.doc size={12}/> : l.kind==='assn' ? <Ic.bookmk size={12}/> : <Ic.book size={12}/>}
                          </span>
                          <div>
                            <div style={{fontSize:14.5, color: l.current?'var(--accent-2)':'var(--ink)', fontWeight: l.current?600:400}}>{l.name}</div>
                            <div className="mono" style={{fontSize:11.5, color:'var(--ink-3)', marginTop:2}}>
                              {l.kind==='video' && 'วิดีโอ'} {l.kind==='quiz' && 'แบบทดสอบ'} {l.kind==='assn' && 'งานส่ง'} {l.kind==='read' && 'อ่านเพิ่มเติม'} · {l.dur}
                            </div>
                          </div>
                        </div>
                        {l.current && <span className="tag acc">กำลังเรียน</span>}
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'assign' && (
            <div style={{maxWidth:880}}>
              <h2 className="serif" style={{fontSize:26, margin:'0 0 20px', fontWeight:600}}>แบบฝึกหัดและงานส่ง</h2>
              <div className="panel" style={{padding:0, overflow:'hidden'}}>
                {[
                  { n:'01', t:'การออกแบบคลาส Bank Account', due:'14 พ.ค. 23:59', status:'ส่งแล้ว', score:'18/20' },
                  { n:'02', t:'การจัดการ Exception ในระบบขนส่ง', due:'21 พ.ค. 23:59', status:'กำลังเปิด', score:null },
                  { n:'03', t:'โปรเจ็กต์: ระบบห้องสมุดดิจิทัล', due:'12 มิ.ย. 23:59', status:'ยังไม่ส่ง', score:null },
                  { n:'04', t:'ทดสอบหน่วย (Unit Testing)', due:'19 มิ.ย. 23:59', status:'ยังไม่เปิด', score:null },
                ].map(a => (
                  <div key={a.n} className="between" style={{padding:'18px 22px', borderBottom:'1px solid var(--line)'}}>
                    <div className="row" style={{gap:16}}>
                      <span className="mono" style={{fontSize:24, fontWeight:600, color:'var(--ink-3)', minWidth:36}}>{a.n}</span>
                      <div>
                        <div style={{fontSize:15, fontWeight:600}}>{a.t}</div>
                        <div className="row" style={{gap:10, marginTop:4, fontSize:12.5, color:'var(--ink-3)'}}>
                          <Ic.clock size={13}/><span>กำหนดส่ง {a.due}</span>
                        </div>
                      </div>
                    </div>
                    <div className="row" style={{gap:14}}>
                      {a.score && <span className="mono" style={{fontSize:14, fontWeight:600, color:'var(--ok)'}}>{a.score}</span>}
                      <span className={`tag ${a.status==='ส่งแล้ว'?'ok':a.status==='กำลังเปิด'?'acc':a.status==='ยังไม่ส่ง'?'warn':''}`}>{a.status}</span>
                      {a.status === 'กำลังเปิด' && (
                        <button className="btn sm" data-test="A08 unsigned upload">ส่งงาน</button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'discuss' && (
            <div style={{maxWidth:880}}>
              <div className="between" style={{marginBottom:20}}>
                <h2 className="serif" style={{fontSize:26, margin:0, fontWeight:600}}>ฟอรัมประจำรายวิชา</h2>
                <span className="tag">{posts.length} กระทู้</span>
              </div>
              <form className="panel" style={{padding:20, marginBottom:24}} onSubmit={submitPost}>
                <div className="field" style={{marginBottom:10}}>
                  <textarea data-test="A03 stored XSS · ฟอรัม"
                    value={discussion} onChange={e=>setDiscussion(e.target.value)}
                    rows="3" placeholder="ตั้งคำถาม หรือร่วมอภิปรายกับเพื่อน ๆ และอาจารย์…"/>
                </div>
                {postErr && (
                  <div className="notice" style={{borderLeftColor:'var(--bad)', margin:'0 0 10px', fontSize:13}}>{postErr}</div>
                )}
                <div className="between">
                  <span style={{fontSize:12, color:'var(--ink-3)'}}>โพสต์ของคุณจะแสดงพร้อมชื่อและเวลา · มีการเก็บบันทึกตามข้อบังคับมหาวิทยาลัย</span>
                  <button className="btn sm" type="submit" disabled={postBusy}>{postBusy ? 'กำลังโพสต์…' : 'โพสต์'}</button>
                </div>
              </form>
              {posts.length === 0 && (
                <p style={{color:'var(--ink-3)', fontSize:14, padding:'8px 0'}}>ยังไม่มีกระทู้ในรายวิชานี้ · เป็นคนแรกที่เริ่มการสนทนา</p>
              )}
              {posts.slice().reverse().map(p => (
                <div key={p._id} style={{display:'grid', gridTemplateColumns:'42px 1fr', gap:14, padding:'18px 0', borderBottom:'1px solid var(--line)'}}>
                  <div style={{width:42, height:42, borderRadius:99, background:'var(--bg-2)', display:'grid', placeItems:'center', fontFamily:'Noto Serif Thai, serif', fontWeight:600, color:'var(--ink-2)'}}>{(p.author||'?').slice(0,1)}</div>
                  <div>
                    <div className="between" style={{marginBottom:6}}>
                      <span style={{fontWeight:600, fontSize:14}}>{p.author}</span>
                      <span style={{fontSize:12, color:'var(--ink-3)'}}>{timeAgo(p.createdAt)}</span>
                    </div>
                    <p style={{margin:0, fontSize:14.5, color:'var(--ink-2)', lineHeight:1.7, whiteSpace:'pre-wrap'}}>{p.body}</p>
                  </div>
                </div>
              ))}
            </div>
          )}

          {tab === 'inst' && (
            <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:48, maxWidth:1000}}>
              <Placeholder seed={`portrait-${c.id}`} label="ภาพอาจารย์ผู้สอน" num="P" variant="tall"/>
              <div>
                <div className="mono" style={{fontSize:11.5, color:'var(--accent-2)', letterSpacing:'.08em', marginBottom:6}}>อาจารย์ผู้สอน</div>
                <h2 className="serif" style={{fontSize:32, margin:'0 0 8px', fontWeight:600}}>{c.inst}</h2>
                <p style={{color:'var(--ink-3)', fontSize:14, margin:'0 0 20px'}}>{facName(c.fac)} · มหาวิทยาลัยทดสอบ</p>
                <p style={{color:'var(--ink-2)', fontSize:15, lineHeight:1.8}}>สำเร็จการศึกษาระดับปริญญาเอกด้าน Software Engineering จาก ETH Zürich มีประสบการณ์การวิจัยและการสอนมากกว่า 18 ปี งานวิจัยมุ่งเน้นด้านการพัฒนาซอฟต์แวร์ขนาดใหญ่ ภาษาโดเมนเฉพาะ และคุณภาพของระบบในการผลิต. เป็นผู้เขียนหนังสือเรียน "การออกแบบเชิงวัตถุสำหรับนักศึกษาไทย" ที่ใช้ในกว่า 30 มหาวิทยาลัย.</p>
                <div className="row" style={{gap:14, marginTop:20, flexWrap:'wrap'}}>
                  <span className="tag">14 รายวิชา</span>
                  <span className="tag">42,000+ นักศึกษา</span>
                  <span className="tag">รางวัลอาจารย์ดีเด่น 2566</span>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Related */}
        <div className="section" style={{borderBottom:'none', paddingBottom:40}}>
          <div className="section-hd">
            <h2 className="serif" style={{margin:0, fontSize:26, fontWeight:600}}>วิชาอื่นใน{facName(c.fac)}</h2>
            <button className="btn link" onClick={()=>go('courses',{fac:c.fac})}>ดูทั้งหมด →</button>
          </div>
          <div className="grid g4">
            {related.map(rc => <CourseCard key={rc.id} c={rc} onOpen={(id)=>go('course',{id})}/>)}
          </div>
        </div>
      </div>
    </div>
  );
}
window.CoursePage = CoursePage;