// FAQ
function FAQ({ compact }) {
  const [open, setOpen] = React.useState(0);
  const all = [
    { q:'音楽経験がまったくありません。大丈夫ですか？', a:'むしろ、ゼロからの方が多数派です。生徒の約6割が「完全初心者」。大人が始めやすいカリキュラムを組んでいます。まずは無料体験で、今の声を一緒に聞いてみましょう。' },
    { q:'仕事が忙しいのですが、続けられるでしょうか？', a:'平日夜22時まで、土日もレッスン可能。月単位でレッスン回数や曜日を変更できます。振替制度もあるので、急な出張・残業でも安心です。' },
    { q:'年齢が高くても、本当に上達しますか？', a:'歌は筋肉と脳の使い方。年齢は関係ありません。実際、50代から始めて半年で大きく変わる方がたくさんいます。詳しくは生徒の声ページをご覧ください。' },
    { q:'体験レッスンの当日、勧誘はありますか？', a:'一切ありません。これは公約です。体験を受けた当日ではなく、じっくり考えてから決めていただきます。数日〜数週間後に検討される方もたくさんいます。' },
    { q:'発表会は必須ですか？参加するのが不安です。', a:'完全任意です。参加する方は約7割。初めて人前で歌うのが不安、という方には、小さな会場から慣れていく "ステップアップ発表会" もご用意しています。' },
    { q:'楽器を持っていませんが、弾き語りはできますか？', a:'最初は手元にある楽器やレンタル利用でも始められます。購入前提ではなく、続けたい方向性が見えてから一緒に選び方を整理します。' },
  ];
  const items = compact ? all.slice(0, 4) : all;
  return (
    <section id="faq" className="section" style={{ background:'var(--bg-1)' }}>
      <div className="section-inner">
        <div style={{ display:'grid', gridTemplateColumns:'360px 1fr', gap:48 }}>
          <div>
            <span className="eyebrow"><span className="dot" /> <span className="hash">#08</span> よくある質問</span>
            <h2 className="h2" style={{ fontSize:'clamp(36px, 4vw, 56px)' }}>
              ぜんぶ、<br/>
              <em className="accent">聞いて</em>ください。
            </h2>
            <p className="lead" style={{ marginTop:16 }}>
              よくある質問に載っていないことも、体験レッスンのときに遠慮なく。
            </p>
            <a href="trial.html" className="btn btn-ghost" style={{ marginTop:24, padding:'14px 20px', fontSize:13 }}>
              直接、講師に聞く <span className="arrow">→</span>
            </a>
          </div>

          <div>
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{
                  borderTop: i === 0 ? '1px solid var(--rule)' : 'none',
                  borderBottom:'1px solid var(--rule)',
                }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width:'100%', textAlign:'left',
                    display:'grid', gridTemplateColumns:'40px 1fr 28px', gap:16, alignItems:'center',
                    padding:'22px 0', border:'none', background:'transparent',
                    cursor:'pointer', fontFamily:'inherit', color:'inherit',
                  }}>
                    <span className="mono" style={{
                      fontSize:12, letterSpacing:2,
                      color: isOpen ? 'var(--accent)' : 'var(--ink-3)',
                    }}>Q.{String(i+1).padStart(2, '0')}</span>
                    <span style={{
                      fontSize:17, fontWeight:700, letterSpacing:-0.3,
                      color: isOpen ? 'var(--accent-2)' : 'var(--ink)',
                    }}>{it.q}</span>
                    <span style={{
                      width:28, height:28, borderRadius:'50%',
                      border:'1px solid ' + (isOpen ? 'var(--accent)' : 'var(--rule-strong)'),
                      display:'flex', alignItems:'center', justifyContent:'center',
                      fontSize:14, color: isOpen ? 'var(--accent)' : 'var(--ink-2)',
                      transition:'all .2s',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                    }}>+</span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 300 : 0, overflow:'hidden',
                    transition:'max-height .3s ease, padding .3s',
                    paddingBottom: isOpen ? 22 : 0,
                    paddingLeft: 56,
                  }}>
                    <p style={{ margin:0, fontSize:14, lineHeight:1.9, color:'var(--ink-2)',
                      maxWidth:620 }}>
                      {it.a}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;