// Voices / Before-After
function Voices({ compact }) {
  const all = [
    {
      name:'Kさん, 42',
      job:'会社員 / 2年目',
      before:'キーが合わないと諦めてた',
      after:'歌い方で、曲は全部歌える',
      quote:'40代で始めて、カラオケが一番楽しい趣味になるなんて。会社の忘年会で「歌うまくなった？」って言われたときは、正直嬉しかった。',
      icon:'K',
      song:'Mr.Children / innocent world',
    },
    {
      name:'Aさん, 36',
      job:'デザイナー / 1年半',
      before:'録音した自分の声が嫌い',
      after:'自分の声を、好きになれた',
      quote:'最初の録音で泣きそうになった。でも、3ヶ月後に聴き比べたら別人で。自分の声の「良さ」を初めて教えてもらった気がする。',
      icon:'A',
      song:'aiko / カブトムシ',
    },
    {
      name:'Tさん, 51',
      job:'営業職 / 3年目',
      before:'若い頃の夢を、ずっと引きずってた',
      after:'人前で、最後まで歌えた',
      quote:'発表会で人前に立って、人生観が変わりました。終わったあとに拍手をもらえたこと、一生忘れないと思います。',
      icon:'T',
      song:'BOOWY / MARIONETTE',
    },
  ];
  const voices = compact ? all.slice(0, 2) : all;

  return (
    <section id="voices" className="section">
      <div className="section-inner">
        <div style={{ marginBottom:56, maxWidth:720 }}>
          <span className="eyebrow"><span className="dot" /> <span className="hash">#07</span> 生徒の声 / BEFORE & AFTER</span>
          <h2 className="h2">
            半年前のあなたが、<br/>
            <em className="accent">いま</em>のあなたに驚く。
          </h2>
        </div>

        <div style={{ display:'grid', gap:24 }}>
          {voices.map((v) => (
            <div key={v.name} className="aim-voice-card" style={{
              display:'grid', gridTemplateColumns:'260px 1fr', gap:32,
              padding:'0', background:'var(--bg-1)',
              border:'1px solid var(--rule)',
              overflow:'hidden',
            }}>
              <div className="aim-voice-icon-panel" style={{
                position:'relative', minHeight:300,
                display:'flex', alignItems:'center', justifyContent:'center',
                background:'linear-gradient(135deg, oklch(70% 0.25 250 / 0.14), var(--bg-2))',
              }}>
                <div style={{
                  position:'absolute', inset:0,
                  backgroundImage:'radial-gradient(circle at 30% 20%, oklch(80% 0.15 240 / 0.18), transparent 34%), repeating-linear-gradient(0deg, transparent 0, transparent 10px, rgba(232,237,247,0.035) 10px, rgba(232,237,247,0.035) 11px)',
                }} />
                <div className="aim-voice-avatar" aria-hidden="true" style={{
                  position:'relative',
                  width:116, height:116, borderRadius:'50%',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  border:'1px solid var(--rule-strong)',
                  boxShadow:'0 0 42px oklch(70% 0.25 250 / 0.28)',
                  background:'rgba(5,8,17,0.72)',
                  color:'var(--accent-2)',
                  fontFamily:'var(--ff-display)', fontSize:42, letterSpacing:2,
                }}>
                  {v.icon}
                </div>
                <div style={{
                  position:'absolute', bottom:16, left:16, right:16,
                  padding:'10px 12px',
                  background:'rgba(5,8,17,0.8)', border:'1px solid var(--rule-strong)',
                  backdropFilter:'blur(8px)',
                }}>
                  <div className="mono" style={{ fontSize:10, letterSpacing:2, color:'var(--ink-3)' }}>
                    NOW PLAYING
                  </div>
                  <div style={{ fontSize:13, fontWeight:700, marginTop:4 }}>♪ {v.song}</div>
                </div>
              </div>

              <div className="aim-voice-copy" style={{ padding:'32px 40px 32px 0', display:'flex', flexDirection:'column', justifyContent:'center' }}>
                <div className="aim-voice-before-after" style={{ display:'flex', gap:24, marginBottom:20 }}>
                  <div style={{ flex:1 }}>
                    <div className="mono" style={{ fontSize:10, letterSpacing:2, color:'var(--ink-4)' }}>BEFORE</div>
                    <div style={{ fontSize:15, fontWeight:700, color:'var(--ink-3)', marginTop:4,
                      textDecoration:'line-through', textDecorationColor:'var(--ink-4)' }}>
                      {v.before}
                    </div>
                  </div>
                  <div style={{
                    fontSize:24, color:'var(--accent)', alignSelf:'center',
                    textShadow:'0 0 12px var(--accent)',
                  }}>→</div>
                  <div style={{ flex:1 }}>
                    <div className="mono" style={{ fontSize:10, letterSpacing:2, color:'var(--accent)' }}>AFTER</div>
                    <div style={{ fontSize:17, fontWeight:900, color:'var(--ink)', marginTop:4 }}>
                      {v.after}
                    </div>
                  </div>
                </div>

                <blockquote style={{
                  margin:'0 0 20px', padding:'16px 0 16px 20px',
                  borderLeft:'3px solid var(--accent)',
                  fontSize:18, lineHeight:1.8, color:'var(--ink)',
                  fontWeight:500,
                }}>
                  "{v.quote}"
                </blockquote>
                <div style={{ display:'flex', alignItems:'center', gap:14, color:'var(--ink-3)', fontSize:13 }}>
                  <span style={{ fontWeight:700, color:'var(--ink)' }}>{v.name}</span>
                  <span style={{ width:4, height:4, background:'var(--ink-4)' }} />
                  <span>{v.job}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop:40, textAlign:'center' }}>
          <a href="voices.html" style={{
            color:'var(--accent-2)', fontSize:14, fontWeight:700,
            borderBottom:'1px solid var(--accent-2)', paddingBottom:4,
          }}>{compact ? 'すべての生徒の声を読む' : 'もっと読む（生徒の声 24件）'} →</a>
        </div>
      </div>
    </section>
  );
}
window.Voices = Voices;