// Pain points · 共感パート
function PainPoints() {
  const pains = [
    { n:'01', ja:'カラオケで高い曲を歌うと、声が裏返る。', en:'Cracking on the high notes.' },
    { n:'02', ja:'自分の声が、録音で聞くとなんだかダサい。', en:'My voice sounds weak on playback.' },
    { n:'03', ja:'人前で歌うのが、ちょっとだけ怖い。', en:'Stage fright still a thing?' },
    { n:'04', ja:'昔ギターを弾いてた。もう一度、歌いながら。', en:"Pick up the guitar, again." },
    { n:'05', ja:'自分の曲を、ちゃんと形にしたい。', en:"Time to finish that song." },
  ];
  return (
    <section id="pain" className="section" style={{ paddingTop:140 }}>
      <div className="section-inner">
        <div style={{ display:'flex', alignItems:'flex-end', gap:40, marginBottom:56, flexWrap:'wrap' }}>
          <div style={{ flex:'1 1 460px' }}>
            <span className="eyebrow"><span className="dot" /> <span className="hash">#01</span> こんな悩み、ありませんか？</span>
            <h2 className="h2">
              歌いたい気持ちは、<br/>
              <em className="accent">ずっと</em>そこにある。
            </h2>
          </div>
          <p className="lead" style={{ flex:'1 1 400px' }}>
            大人になってから音楽を始めるのは、ちょっと勇気がいる。でも、理由はいつも同じ。
            <strong style={{ color:'var(--ink)' }}>「もっとカッコよく歌いたい」</strong>——
            あなたが思っていることは、いま隣でレッスンを受けている人も、まったく同じです。
          </p>
        </div>

        <div className="aim-pain-list" style={{ display:'grid', gap:1, background:'var(--rule)', border:'1px solid var(--rule)' }}>
          {pains.map(p => (
            <div key={p.n} className="aim-pain-item" style={{
              display:'grid', gridTemplateColumns:'120px 1fr auto', alignItems:'center',
              padding:'28px 28px', background:'var(--bg-0)', gap:28,
              transition:'background .2s, padding .2s', cursor:'default',
            }}
              onMouseEnter={e => { e.currentTarget.style.background='var(--bg-1)'; }}
              onMouseLeave={e => { e.currentTarget.style.background='var(--bg-0)'; }}
            >
              <div className="mono aim-pain-track" style={{ color:'var(--accent)', fontSize:14, letterSpacing:2 }}>TRACK {p.n}</div>
              <div>
                <div className="aim-pain-title" style={{ fontSize:22, fontWeight:700, letterSpacing:-0.3 }}>{p.ja}</div>
                <div className="mono aim-pain-en" style={{ fontSize:12, color:'var(--ink-3)', marginTop:6, letterSpacing:1 }}>— {p.en}</div>
              </div>
              <div className="aim-pain-icon" style={{
                width:44, height:44, borderRadius:'50%',
                border:'1px solid var(--rule-strong)',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontSize:14, color:'var(--accent-2)',
              }}>♪</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop:40, textAlign:'center' }}>
          <span className="mono" style={{ fontSize:13, color:'var(--ink-3)', letterSpacing:1 }}>
            1つでも「ある」と思ったあなたへ。次のセクションを、ぜひ。
          </span>
          <div style={{ margin:'10px auto 0', fontSize:24, color:'var(--accent)' }}>↓</div>
        </div>
      </div>
    </section>
  );
}
window.PainPoints = PainPoints;
