// FAQ section

const FAQS = [
  {
    q: 'DIGMEは無料で使えますか?',
    a: 'はい、ダウンロードも利用も完全無料です。聴くのは普段お使いの Spotify / Apple Music なので、各サービスの契約はそのままご利用ください。',
  },
  {
    q: '実際に音楽を聴くのはどこですか?',
    a: '再生は Spotify または Apple Music で行います。DIGME はあくまで「次に聴く音楽」と出会うための場所。普段の音楽体験はそのまま、出会いの幅だけが広がります。',
  },
  {
    q: 'AIレコメンドはどんな仕組みですか?',
    a: 'あなたが保存・再生したプレイリストの傾向から、音楽の系統が近いユーザーや、まだ聴いたことのないジャンルのプレイリストをおすすめします。使うほど精度が上がっていきます。',
  },
  {
    q: 'タグはどんなものがありますか?',
    a: '#ドライブ #作業用 #80年代 #R&B #雨の日 #朝 #夜更かし など、シーンや気分・ジャンルで気軽に検索できます。ユーザーが自由にタグ付けできるので、新しいタグもどんどん増えています。',
  },
  {
    q: 'アーティスト本人のプレイリストは聴けますか?',
    a: '今後、有名アーティスト本人によるプレイリスト公開を順次スタート予定です。「あの人が普段聴いている音楽」を、あなたも追体験できるようになります。',
  },
  {
    q: 'Androidや Web版は出ますか?',
    a: '現在は iOS 版のみのリリースです。Android / Web 版は鋭意開発中。リリース次第、SNS でお知らせします。',
  },
];

function FAQ({ tweaks }) {
  const accent = tweaks.accentColor;
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{
      padding: '160px 0', borderTop: '1px solid var(--line)',
    }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '0.9fr 1.4fr', gap: 80,
          alignItems: 'flex-start',
        }} className="faq-grid">

          <Reveal>
            <div style={{ position: 'sticky', top: 40 }}>
              <span className="uppercase-tag" style={{ color: accent }}>FAQ / よくある質問</span>
              <h2 className="display" style={{
                fontSize: 'clamp(36px, 4vw, 56px)',
                fontWeight: 700, lineHeight: 1.05,
                letterSpacing: '-0.025em',
                margin: '20px 0 24px',
                textWrap: 'balance',
              }}>よくある質問</h2>
              <p style={{ color: 'rgba(245,243,238,0.6)', fontSize: 15, lineHeight: 1.7, maxWidth: 380 }}>
                ここに載っていない質問は、お問い合わせフォームから気軽にどうぞ。
              </p>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div style={{ borderTop: '1px solid var(--line)' }}>
              {FAQS.map((f, i) => {
                const isOpen = open === i;
                return (
                  <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                    <button
                      onClick={() => setOpen(isOpen ? -1 : i)}
                      style={{
                        width: '100%', padding: '24px 0',
                        background: 'transparent', border: 0,
                        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                        cursor: 'pointer', color: 'inherit',
                        fontFamily: 'inherit', textAlign: 'left',
                        gap: 24,
                      }}
                    >
                      <span style={{
                        display: 'flex', alignItems: 'baseline', gap: 18, flex: 1,
                      }}>
                        <span style={{
                          fontFamily: 'JetBrains Mono, monospace',
                          fontSize: 12, color: accent, letterSpacing: '0.06em',
                          minWidth: 28,
                        }}>{String(i + 1).padStart(2, '0')}</span>
                        <span style={{
                          fontFamily: 'Bricolage Grotesque, "Noto Sans JP", sans-serif',
                          fontSize: 'clamp(17px, 1.5vw, 22px)',
                          fontWeight: 600, letterSpacing: '-0.01em',
                        }}>{f.q}</span>
                      </span>
                      <span style={{
                        width: 32, height: 32, borderRadius: '50%',
                        border: `1px solid ${isOpen ? accent : 'rgba(245,243,238,0.2)'}`,
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        flexShrink: 0,
                        transition: 'all 0.3s',
                        transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                        color: isOpen ? accent : 'rgba(245,243,238,0.6)',
                      }}>
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
                          <path d="M6 1v10M1 6h10" strokeLinecap="round" />
                        </svg>
                      </span>
                    </button>
                    <div style={{
                      maxHeight: isOpen ? 240 : 0,
                      overflow: 'hidden',
                      transition: 'max-height 0.45s cubic-bezier(.2,.7,.2,1)',
                    }}>
                      <p style={{
                        fontSize: 15, lineHeight: 1.8,
                        color: 'rgba(245,243,238,0.65)',
                        padding: '0 0 28px 46px',
                        maxWidth: 640,
                      }}>{f.a}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </Reveal>
        </div>

        <style>{`
          @media (max-width: 860px) {
            .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.FAQ = FAQ;