// Home page
function HomePage({ go }) {
  const featured = COURSES.slice(0, 4);
  const popular = COURSES.slice(2, 6);

  return (
    <div>
      {/* Hero */}
      <section className="hero">
        <div className="wrap hero-inner">
          <div>
            <span className="kicker">ภาคต้น ปีการศึกษา 2569 · เปิดรับสมัครแล้ว</span>
            <h1>
              เรียนรู้ในจังหวะของคุณ<br/>
              ที่ <em>มหาวิทยาลัยทดสอบ</em>
            </h1>
            <p>กว่า 1,200 รายวิชาจากคณาจารย์ผู้เชี่ยวชาญ ทั้งสายวิทยาศาสตร์ มนุษยศาสตร์ และวิชาชีพ บนแพลตฟอร์มที่ออกแบบมาเพื่อให้คุณเรียนรู้ได้ทุกที่ ทุกเวลา ทั้งภาษาไทยและภาษาอังกฤษ.</p>
            <div className="row" style={{gap:14, flexWrap:'wrap'}}>
              <button className="btn acc" onClick={()=>go('courses')}>เริ่มต้นเรียนรู้ <Ic.arrow size={16}/></button>
              <button className="btn alt" style={{background:'rgba(245,239,226,.08)', color:'var(--bg)', borderColor:'rgba(245,239,226,.3)'}} onClick={()=>go('news')}>ดูข่าวประกาศ</button>
            </div>
            <div className="hero-stats">
              <div><div className="n">1,247</div><div className="l">รายวิชาออนไลน์</div></div>
              <div><div className="n">38,402</div><div className="l">นักศึกษาในระบบ</div></div>
              <div><div className="n">324</div><div className="l">คณาจารย์ผู้สอน</div></div>
              <div><div className="n">8</div><div className="l">คณะวิชา</div></div>
            </div>
          </div>
          <div style={{position:'relative'}}>
            <Placeholder seed="campus-library-thai" label="ห้องสมุดมหาวิทยาลัย" num="01" variant="tall"/>
            <div style={{
              position:'absolute', bottom:18, left:18,
              background:'var(--paper)', color:'var(--ink)',
              padding:'12px 18px', borderRadius:'var(--r)',
              display:'flex', alignItems:'center', gap:12, fontSize:13,
              boxShadow:'0 12px 30px -10px rgba(0,0,0,.4)'
            }}>
              <div style={{width:38, height:38, borderRadius:99, background:'var(--accent)', color:'var(--ink)', display:'grid', placeItems:'center'}}>
                <Ic.play size={16}/>
              </div>
              <div>
                <div style={{fontWeight:600}}>วิดีโอแนะนำ</div>
                <div style={{color:'var(--ink-3)', fontSize:12, marginTop:2}}>เริ่มต้นใช้งานใน 3 นาที</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Quick actions */}
      <section className="wrap" style={{padding:'32px 0', borderBottom:'1px solid var(--line)'}}>
        <div className="grid g4" style={{gap:14}}>
          {[
            { i:Ic.book, l:'หลักสูตรของฉัน', s:'4 รายวิชา · 2 งานค้าง', a:()=>go('dashboard') },
            { i:Ic.cal,  l:'ปฏิทินการเรียน', s:'สัปดาห์ที่ 4 · กลางภาค 12 มิ.ย.', a:()=>go('dashboard') },
            { i:Ic.doc,  l:'เอกสารและทรัพยากร', s:'ห้องสมุดดิจิทัล + e-Book', a:()=>go('courses') },
            { i:Ic.award,l:'ผลการเรียนและใบรับรอง', s:'GPA 3.62 · 3 ใบรับรอง', a:()=>go('dashboard') },
          ].map((q,i) => (
            <button key={i} onClick={q.a}
              style={{
                appearance:'none', textAlign:'left', cursor:'default',
                display:'flex', alignItems:'center', gap:14,
                padding:'14px 18px', background:'var(--paper)',
                border:'1px solid var(--line)', borderRadius:'var(--r-lg)',
                color:'var(--ink)', transition:'.15s'
              }}
              onMouseEnter={e=>e.currentTarget.style.borderColor='var(--ink)'}
              onMouseLeave={e=>e.currentTarget.style.borderColor='var(--line)'}>
              <div style={{width:42, height:42, borderRadius:'var(--r)', background:'var(--bg-1)', border:'1px solid var(--line)', display:'grid', placeItems:'center', color:'var(--accent-2)', flexShrink:0}}>
                <q.i size={20}/>
              </div>
              <div style={{minWidth:0, flex:1}}>
                <div style={{fontWeight:600, fontSize:14.5, lineHeight:1.3}}>{q.l}</div>
                <div style={{color:'var(--ink-3)', fontSize:12.5, marginTop:3, lineHeight:1.3}}>{q.s}</div>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* Featured courses */}
      <section className="wrap section" style={{borderTop:0}}>
        <div className="section-hd">
          <div>
            <div className="label">รายวิชาแนะนำในภาคนี้</div>
            <h2>วิชายอดนิยมประจำสัปดาห์</h2>
          </div>
          <div className="right">
            รายวิชาที่นักศึกษาลงทะเบียนเรียนสูงสุดและได้รับคะแนนความพึงพอใจสูงในรอบ 7 วันที่ผ่านมา.
          </div>
        </div>
        <div className="grid g4">
          {featured.map(c => <CourseCard key={c.id} c={c} onOpen={(id)=>go('course',{id})}/>)}
        </div>
        <div style={{textAlign:'center', marginTop:40}}>
          <button className="btn alt" onClick={()=>go('courses')}>ดูรายวิชาทั้งหมด <Ic.arrow size={14}/></button>
        </div>
      </section>

      {/* Faculties */}
      <section className="wrap section">
        <div className="section-hd">
          <div>
            <div className="label">ค้นหาตามคณะวิชา</div>
            <h2>8 คณะ · มากกว่า 1,200 รายวิชา</h2>
          </div>
          <button className="btn link" onClick={()=>go('courses')}>ดูทั้งหมด →</button>
        </div>
        <div className="grid g4" style={{gap:12}}>
          {FACULTIES.map(f => (
            <a key={f.code} onClick={()=>go('courses', { fac: f.code })}
              style={{
                display:'block', padding:'18px 20px', background:'var(--paper)',
                border:'1px solid var(--line)', borderRadius:'var(--r-lg)',
                borderLeft:'4px solid '+f.color, cursor:'default'
              }}>
              <div className="mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'.08em'}}>คณะ · {f.code}</div>
              <div className="serif" style={{fontSize:17, marginTop:6, color:'var(--ink)', fontWeight:600}}>{f.name}</div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginTop:10, display:'flex', justifyContent:'space-between'}}>
                <span>{COURSES.filter(c=>c.fac===f.code).length} รายวิชา</span>
                <Ic.arrow size={13}/>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* Announcements */}
      <section className="wrap section">
        <div className="section-hd">
          <div>
            <div className="label">ข่าวประชาสัมพันธ์</div>
            <h2>ประกาศและกิจกรรมล่าสุด</h2>
          </div>
          <button className="btn link" onClick={()=>go('news')}>ดูประกาศทั้งหมด →</button>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48}}>
          <div>
            {NEWS.slice(0,4).map(n => (
              <div key={n.id} className="ann-item" onClick={()=>go('news',{id:n.id})}>
                <div className="date">
                  <div className="d">{n.date}</div>
                  <div className="m">{n.month}</div>
                </div>
                <div>
                  <span className="tag" style={{marginBottom:8}}>{n.cat}</span>
                  <h4 className="serif" style={{margin:'4px 0 6px', fontSize:18, color:'var(--ink)', transition:'.15s'}}>{n.title}</h4>
                  <p style={{margin:0, color:'var(--ink-2)', fontSize:13.5}}>{n.dek}</p>
                </div>
                <Ic.arrow size={16} style={{color:'var(--ink-3)', marginTop:8}}/>
              </div>
            ))}
          </div>
          <aside>
            <div className="panel" style={{padding:24}}>
              <h3 className="serif" style={{margin:'0 0 4px', fontSize:22, color:'var(--ink)'}}>กิจกรรมในสัปดาห์นี้</h3>
              <p style={{margin:'0 0 18px', fontSize:13, color:'var(--ink-3)'}}>13-19 พฤษภาคม 2569</p>
              {[
                { d:'พฤ. 15', t:'09:00', l:'สัมมนาวิจัย: AI กับการศึกษาไทย', loc:'ห้อง 401 อาคารวิศวฯ' },
                { d:'ศ. 16',  t:'13:30', l:'workshop: การเขียน Resume', loc:'ออนไลน์ผ่าน MS Teams' },
                { d:'ส. 17',  t:'10:00', l:'งานเปิดบ้านคณะวิทยาศาสตร์', loc:'ลานอเนกประสงค์' },
                { d:'อา. 18', t:'14:00', l:'นัดพบศิษย์เก่า รุ่น 35', loc:'หอประชุมใหญ่' },
              ].map((e,i) => (
                <div key={i} style={{padding:'14px 0', borderBottom:i<3?'1px solid var(--line)':0}}>
                  <div className="row" style={{gap:10, marginBottom:4}}>
                    <span className="mono" style={{fontSize:11, color:'var(--accent-2)', fontWeight:600, letterSpacing:'.04em'}}>{e.d} · {e.t}</span>
                  </div>
                  <div style={{fontSize:14, fontWeight:500, marginBottom:3}}>{e.l}</div>
                  <div style={{fontSize:12, color:'var(--ink-3)'}}>{e.loc}</div>
                </div>
              ))}
              <button className="btn alt sm" style={{marginTop:14, width:'100%'}}>ดูปฏิทินทั้งเดือน →</button>
            </div>
          </aside>
        </div>
      </section>

      {/* Big quote / values */}
      <section className="wrap section">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center'}}>
          <Placeholder seed="library-saturday-afternoon" label="ห้องสมุดกลาง · บ่ายวันเสาร์" num="L1" variant="wide"/>
          <div>
            <div className="label" style={{marginBottom:14, fontSize:11.5, letterSpacing:'.2em', color:'var(--accent-2)', fontWeight:600}}>ปรัชญาของเรา</div>
            <h2 className="serif" style={{fontSize:'clamp(28px, 3.6vw, 42px)', margin:'0 0 18px', lineHeight:1.2, color:'var(--ink)', fontWeight:600}}>
              "การศึกษาที่ดี ไม่ใช่การเติมความรู้ลงในตัวคน <br/>แต่คือการจุดประกายความอยากเรียนรู้ตลอดชีวิต."
            </h2>
            <p style={{fontSize:15, color:'var(--ink-2)', margin:'0 0 16px'}}>มหาวิทยาลัยทดสอบก่อตั้งขึ้นในปี 2519 ด้วยปณิธานที่จะเปิดโอกาสทางการศึกษาให้คนไทยทุกคน วันนี้ เราขยายห้องเรียนผ่านระบบดิจิทัล เพื่อให้การเรียนรู้ไม่ถูกจำกัดด้วยระยะทางและเวลาอีกต่อไป.</p>
            <button className="btn link">อ่านประวัติมหาวิทยาลัย →</button>
          </div>
        </div>
      </section>

      {/* ── Virtual campus tour video (full-bleed muted autoplay loop) */}
      <section className="wrap section">
        <div className="section-hd">
          <div>
            <div className="label">เยี่ยมชมมหาวิทยาลัย</div>
            <h2>ทัวร์แคมปัส 360°</h2>
          </div>
          <div className="right">เดินสำรวจหอประชุม ห้องสมุด อาคารเรียน และศูนย์กีฬาผ่านวิดีโอ 4K · ดูได้ทุกเวลา</div>
        </div>
        <div style={{position:'relative', borderRadius:'var(--r-lg)', overflow:'hidden', background:'#000', aspectRatio:'21/9', border:'1px solid var(--line)'}}>
          <video
            src="/assets/video/oceans.mp4"
            poster="/assets/img/campus-tour.jpg"
            autoPlay muted loop playsInline
            data-test="hero ambient video · max-age=604800"
            style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
          <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65))', pointerEvents:'none'}}/>
          <div style={{position:'absolute', left:32, right:32, bottom:28, color:'#fff', display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:24, flexWrap:'wrap'}}>
            <div>
              <span className="tag" style={{background:'var(--accent)', color:'var(--ink)', borderColor:'transparent', marginBottom:10}}>LIVE · กำลังถ่ายทอด</span>
              <h3 className="serif" style={{fontSize:32, margin:'8px 0 4px', color:'#fff', fontWeight:600}}>ทัวร์แคมปัสภาคต้น 2569</h3>
              <p style={{margin:0, color:'rgba(255,255,255,.78)', fontSize:14}}>นำชมโดย พี่นัท ปี 4 คณะอักษรศาสตร์ · 12 นาที</p>
            </div>
            <div className="row" style={{gap:8}}>
              <button className="btn acc sm"><Ic.play size={14}/> เล่นเต็มจอ</button>
              <button className="btn alt sm" style={{background:'rgba(255,255,255,.1)', borderColor:'rgba(255,255,255,.4)', color:'#fff'}}>เริ่มทัวร์ 360°</button>
            </div>
          </div>
        </div>
        <div className="grid g4" style={{marginTop:14, gap:10}}>
          {[
            { v:'/assets/video/mov_bbb.mp4', l:'ห้องสมุดกลาง' },
            { v:'/assets/video/sample-5s.mp4', l:'อาคารเรียนรวม' },
            { v:'/assets/video/bbb-360-10s.mp4', l:'ห้องปฏิบัติการ' },
            { v:'/assets/video/oceans.mp4', l:'หอพักนักศึกษา' },
          ].map((clip, i) => (
            <div key={i} style={{position:'relative', borderRadius:'var(--r)', overflow:'hidden', aspectRatio:'16/9', background:'#000', cursor:'default'}}>
              <video src={clip.v} muted loop playsInline preload="metadata"
                poster={`/assets/img/picsum/clip-${i}_320x180.jpg`}
                onMouseEnter={e=>e.currentTarget.play()} onMouseLeave={e=>{e.currentTarget.pause(); e.currentTarget.currentTime=0;}}
                style={{width:'100%', height:'100%', objectFit:'cover'}}/>
              <div style={{position:'absolute', left:10, bottom:8, color:'#fff', fontSize:12, fontWeight:500, textShadow:'0 1px 6px rgba(0,0,0,.6)'}}>{clip.l}</div>
              <div style={{position:'absolute', top:8, right:8, width:24, height:24, borderRadius:99, background:'rgba(0,0,0,.6)', color:'#fff', display:'grid', placeItems:'center'}}>
                <Ic.play size={11}/>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── Student testimonials */}
      <section className="wrap section">
        <div className="section-hd">
          <div>
            <div className="label">เสียงจากนักศึกษา</div>
            <h2>เรียนกับเรา รู้สึกอย่างไร</h2>
          </div>
          <button className="btn link">ดูคำรับรองทั้งหมด →</button>
        </div>
        <div className="grid g3">
          {[
            { id:'t1', name:'พรรณวลี ส.', year:'ปริญญาตรี ปี 3', fac:'คณะวิศวกรรมศาสตร์',
              quote:'อาจารย์ที่ม.อ.ภ. เปิดใจรับคำถามจากนักศึกษามากกะรับฟังจริงๆ ระบบออนไลน์ก็ใช้งานง่าย จดและกลับมาดูซ้ำได้.',
              video:'/assets/video/mov_bbb.mp4' },
            { id:'t2', name:'อนันต์ ม.', year:'ปริญญาโท ปี 1', fac:'คณะบริหารธุรกิจ',
              quote:'งานวิจัยของผมได้ทุนจากมหาวิทยาลัยตั้งแต่ปีแรก และมีอาจารย์ที่ปรึกษาดูแลใกล้ชิด ทำให้พัฒนาเร็วกว่าที่คิด.',
              video:null },
            { id:'t3', name:'จิตรา พ.', year:'ปริญญาตรี ปี 4', fac:'คณะอักษรศาสตร์',
              quote:'ห้องสมุดกลางเปิด 24 ชั่วโมงในช่วงสอบ และฟอรัมรายวิชาช่วยได้มากเวลาที่ติดขัด นี่คือบรรยากาศที่หาที่อื่นไม่ได้.',
              video:null },
          ].map(t => (
            <div key={t.id} className="panel" style={{padding:0, overflow:'hidden', display:'flex', flexDirection:'column'}}>
              {t.video ? (
                <div style={{position:'relative', aspectRatio:'16/10', background:'#000'}}>
                  <video src={t.video} poster={`/assets/img/picsum/${t.id}-cover_600x375.jpg`}
                    controls playsInline preload="metadata"
                    style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
                  <span className="tag" style={{position:'absolute', top:10, left:10, background:'var(--accent)', color:'var(--ink)', borderColor:'transparent'}}>VIDEO</span>
                </div>
              ) : (
                <div style={{position:'relative', aspectRatio:'16/10', background:'var(--bg-2)'}}>
                  <img src={`/assets/img/picsum/${t.id}-cover_600x375.jpg`} alt="" loading="lazy"
                    style={{width:'100%', height:'100%', objectFit:'cover'}}/>
                </div>
              )}
              <div style={{padding:'20px 22px', display:'flex', flexDirection:'column', gap:14, flex:1}}>
                <p style={{margin:0, fontFamily:'Noto Serif Thai, serif', fontSize:17, lineHeight:1.5, color:'var(--ink)'}}>
                  "{t.quote}"
                </p>
                <div className="row" style={{gap:12, marginTop:'auto', paddingTop:14, borderTop:'1px solid var(--line)'}}>
                  <img src={`/assets/img/pravatar/80_${t.id}.jpg`} alt=""
                    style={{width:40, height:40, borderRadius:99, objectFit:'cover'}} loading="lazy"/>
                  <div style={{minWidth:0}}>
                    <div style={{fontSize:14, fontWeight:600, lineHeight:1.2}}>{t.name}</div>
                    <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>{t.year} · {t.fac}</div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── Campus gallery */}
      <section className="wrap section">
        <div className="section-hd">
          <div>
            <div className="label">ภาพชีวิตในรั้วมหาวิทยาลัย</div>
            <h2>ห้องเรียน ห้องสมุด และทุกมุมที่คุณจะเรียกว่า “ที่นี่”</h2>
          </div>
          <button className="btn link">ดูแกลเลอรีทั้งหมด (124 ภาพ) →</button>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gridTemplateRows:'repeat(2, 220px)', gap:8}}>
          {[
            { seed:'campus-courtyard', span:'1 / 2 / 3 / 2', label:'ลานพระบรมรูป · มุมหลัก' },
            { seed:'campus-library', span:null, label:'ห้องสมุดกลาง · ชั้น 4' },
            { seed:'campus-lab', span:null, label:'ห้องปฏิบัติการเคมี' },
            { seed:'campus-classroom', span:null, label:'อาคารเรียนรวม · ห้อง 401' },
            { seed:'campus-cafe', span:null, label:'ร้านกาแฟนักศึกษา' },
            { seed:'campus-night', span:null, label:'หอประชุมใหญ่ · กลางคืน' },
            { seed:'campus-sport', span:null, label:'สนามกีฬากลาง' },
          ].map((g,i) => (
            <div key={g.seed} style={{
              gridArea: g.span || 'auto', position:'relative',
              borderRadius:'var(--r)', overflow:'hidden', background:'var(--bg-2)',
              cursor:'default'
            }}>
              <img src={`/assets/img/picsum/${g.seed}_800x600.jpg`} alt=""
                loading="lazy"
                style={{width:'100%', height:'100%', objectFit:'cover', transition:'.4s'}}
                onMouseEnter={e=>e.currentTarget.style.transform='scale(1.04)'}
                onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'}/>
              <div style={{position:'absolute', left:10, bottom:10, right:10, color:'#fff', fontSize:12, fontWeight:500, textShadow:'0 1px 8px rgba(0,0,0,.6)'}}>{g.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── Educational GIFs · "Concepts in motion" */}
      <section className="wrap section">
        <div className="section-hd">
          <div>
            <div className="label">การเรียนรู้เชิงภาพ</div>
            <h2>แนวคิดที่อธิบายด้วยภาพเคลื่อนไหว</h2>
          </div>
          <div className="right">เพราะบางเรื่องอ่านพันบรรทัดยังไม่เท่ากับเห็นด้วยตา · ภาพเคลื่อนไหวเหล่านี้ใช้ในรายวิชาจริง</div>
        </div>
        <div className="grid g3" style={{gap:18}}>
          {[
            { gif:'/assets/img/earth.gif',
              tag:'ภูมิศาสตร์ · ดาราศาสตร์', t:'การหมุนของโลก',
              dek:'แสดงการหมุนรอบตัวเองของโลกใน 24 ชั่วโมง — ใช้ในวิชา GEO-101 เพื่ออธิบายเขตเวลาและฤดูกาล.' },
            { gif:'/assets/img/mandelbrot.gif',
              tag:'คณิตศาสตร์', t:'ฟิลด์ Mandelbrot',
              dek:'ฟแฟร็คทัลที่เกิดจากการวนซ้ำของฟังก์ชันเชิงซ้อน — ตัวอย่างความซับซ้อนจากกฎอันเรียบง่ายในวิชาแคลคูลัส 2.' },
            { gif:'/assets/img/pi-unrolled.gif',
              tag:'เรขาคณิต', t:'การคลี่ค่า π',
              dek:'เห็นภาพชัดเจนว่าทำไมเส้นรอบวงของวงกลมจึงเท่ากับ πd — บทเรียนแรกของเรขาคณิตเบื้องต้น.' },
          ].map((g,i) => (
            <div key={i} className="panel" style={{padding:0, overflow:'hidden'}}>
              <div style={{aspectRatio:'1/1', background:'#0c0e14', display:'grid', placeItems:'center', overflow:'hidden'}}>
                <img src={g.gif} alt={g.t} loading="lazy"
                  data-test="GIF · max-age=2592000 · cacheable"
                  style={{maxWidth:'100%', maxHeight:'100%', objectFit:'contain', display:'block'}}/>
              </div>
              <div style={{padding:'18px 20px'}}>
                <div className="row" style={{gap:8, marginBottom:6}}>
                  <span className="tag acc">GIF</span>
                  <span style={{fontSize:11.5, color:'var(--ink-3)'}}>{g.tag}</span>
                </div>
                <h3 className="serif" style={{margin:'0 0 6px', fontSize:20, fontWeight:600}}>{g.t}</h3>
                <p style={{margin:0, color:'var(--ink-2)', fontSize:13.5, lineHeight:1.6}}>{g.dek}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── Faculty highlights with photos */}
      <section className="wrap section">
        <div className="section-hd">
          <div>
            <div className="label">คณาจารย์เด่น</div>
            <h2>อาจารย์ผู้เปิดประตูสู่สาขาวิชา</h2>
          </div>
        </div>
        <div className="grid g4" style={{gap:18}}>
          {[
            { id:'p1', name:'รศ.ดร. ณัฐวุฒิ จันทร์ปราง', fac:'วิศวฯ · ภาควิชาคอมพิวเตอร์', awards:'ผู้เขียนหนังสือ OOP' },
            { id:'p2', name:'ผศ.ดร. ปิยะดา รัตนเดชา',    fac:'วิทย์ฯ · ภาควิชาคณิตศาสตร์', awards:'รางวัลครูดีเด่น 2566' },
            { id:'p3', name:'รศ. วิชญะ พัฒนเดชา',         fac:'อักษรฯ · ประวัติศาสตร์',     awards:'นักวิจัยดีเด่น 2565' },
            { id:'p4', name:'รศ.ดร. ธีรพงศ์ ภัทรกุลธาดา',  fac:'วิศวฯ · AI Lab',              awards:'IEEE Fellow' },
          ].map(p => (
            <div key={p.id} style={{cursor:'default'}}>
              <div style={{aspectRatio:'1/1', overflow:'hidden', borderRadius:'var(--r-lg)', background:'var(--bg-2)', position:'relative'}}>
                <img src={`/assets/img/pravatar/400_${p.id}.jpg`} alt={p.name} loading="lazy"
                  style={{width:'100%', height:'100%', objectFit:'cover'}}/>
                <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 50%, rgba(26,37,71,.6))', pointerEvents:'none'}}/>
                <span className="tag" style={{position:'absolute', top:10, left:10, background:'var(--accent)', color:'var(--ink)', borderColor:'transparent', fontSize:10}}>{p.awards}</span>
              </div>
              <h3 className="serif" style={{margin:'14px 0 4px', fontSize:17, fontWeight:600}}>{p.name}</h3>
              <p style={{margin:0, fontSize:12.5, color:'var(--ink-3)'}}>{p.fac}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
window.HomePage = HomePage;