// Instructors
function Instructors() {
  const teachers = [
    {
      name:'堀 由実',
      en:'HORI Yumi',
      role:'主宰 / ボーカル講師',
      years:'15年',
      body:'ライブハウス出身。J-POP〜洋楽R&Bまで幅広く対応。"声の個性を潰さない" がポリシー。',
      tags:['ボイトレ','発声','洋楽'],
      photo:'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=800&q=80',
    },
    {
      name:'佐野 涼',
      en:'SANO Ryo',
      role:'ギター / 弾き語り',
      years:'12年',
      body:'元バンドマン。ジャカジャカからフィンガーピッキングまで。大人の「今さら聞けない」に全力で応えます。',
      tags:['弾き語り','ギター','コード'],
      photo:'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80',
    },
    {
      name:'三浦 カイ',
      en:'MIURA Kai',
      role:'DTM / プロデュース',
      years:'10年',
      body:'Logic / Ableton。作詞作曲からミックスまで。あなたの歌を作品にするのが仕事。',
      tags:['DTM','作曲','Logic'],
      photo:'https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?w=800&q=80',
    },
  ];
  return (
    <section id="teachers" className="section" style={{ background:'var(--bg-1)' }}>
      <div className="section-inner">
        <div style={{ marginBottom:56, maxWidth:720 }}>
          <span className="eyebrow"><span className="dot" /> <span className="hash">#06</span> 講師紹介</span>
          <h2 className="h2">
            技術より先に、<br/>
            <em className="accent">人</em>で選ばれたい。
          </h2>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20 }}>
          {teachers.map((t, i) => (
            <div key={t.en} style={{
              position:'relative', background:'var(--bg-2)',
              border:'1px solid var(--rule)',
              overflow:'hidden', display:'flex', flexDirection:'column',
            }}>
              <div style={{
                position:'relative', height:320, overflow:'hidden',
              }}>
                <div style={{
                  position:'absolute', inset:0,
                  backgroundImage:`url(${t.photo})`,
                  backgroundSize:'cover', backgroundPosition:'center 20%',
                  filter:'contrast(1.05) saturate(0.85)',
                }} />
                <div style={{
                  position:'absolute', inset:0,
                  background:'linear-gradient(180deg, transparent 40%, var(--bg-2) 100%), linear-gradient(45deg, oklch(70% 0.25 250 / 0.2), transparent 60%)',
                  mixBlendMode:'multiply',
                }} />
                <div className="display" style={{
                  position:'absolute', top:16, right:16,
                  fontSize:22, color:'var(--accent-2)',
                  textShadow:'0 0 20px oklch(70% 0.25 250 / 0.6)',
                }}>0{i+1}</div>
                <div style={{
                  position:'absolute', bottom:16, left:16,
                  padding:'4px 10px', background:'rgba(5,8,17,0.8)',
                  border:'1px solid var(--rule-strong)',
                  fontFamily:'var(--ff-mono)', fontSize:11, letterSpacing:1.5,
                  color:'var(--accent-2)',
                }}>EXPERIENCE {t.years}</div>
              </div>
              <div style={{ padding:'24px 24px 28px', flex:1, display:'flex', flexDirection:'column' }}>
                <div className="mono" style={{ fontSize:11, letterSpacing:2, color:'var(--ink-3)' }}>{t.en}</div>
                <div style={{ fontSize:28, fontWeight:900, marginTop:6, letterSpacing:-0.5 }}>{t.name}</div>
                <div style={{ fontSize:13, color:'var(--accent-2)', marginTop:4 }}>{t.role}</div>
                <p style={{ margin:'16px 0 0', fontSize:14, lineHeight:1.8, color:'var(--ink-2)', flex:1 }}>{t.body}</p>
                <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginTop:20 }}>
                  {t.tags.map(tg => <span key={tg} className="tag">#{tg}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Instructors = Instructors;