/* FAQ — accordion */
function FAQ() {
  const items = [
    {
      q: '無料βはいつまで使えますか？',
      a: 'クローズドβ期間中（〜2026年7月予定）は、参加企業様にすべての機能を無料でご提供します。期間延長や次フェーズ移行時の優遇については、参加企業様に直接ご案内いたします。',
    },
    {
      q: '対応プラットフォームは今後増えますか？',
      a: 'はい。現在対応中のAmazon・楽天・Yahoo!ショッピング・Qoo10・BASE・STORESに加え、au PAYマーケット、Shopify、makeshop等を順次対応予定です。ご希望のプラットフォームがあれば、登録時のフォームよりお知らせください。',
    },
    {
      q: 'GoQSystemと連携できますか？',
      a: '招待制β（2026年8月〜）にて、GoQSystem等の主要受注管理ツールとのAPI連携を実装予定です。クローズドβ期間中は、CSVインポート/エクスポートでの連携が可能です。',
    },
    {
      q: '電子帳簿法の保存要件は満たしていますか？',
      a: 'はい。電子帳簿保存法が定める「長期保存」「改ざん防止」「検索性確保」の3要件を、初期設定で満たすよう設計しています。タイムスタンプ自動付与、SHA-256による改ざん検知、全文検索インデックスを標準搭載。JIIMA認証についても2027年取得を目指して申請中です。',
    },
    {
      q: 'クローズドβへの参加条件はありますか？',
      a: 'EC事業を運営されている法人・個人事業主の方であればどなたでもご応募いただけます。月間取扱商品数や売上規模による制限はありませんが、先着10社の枠となります。',
    },
    {
      q: 'データの引っ越しは大変ですか？',
      a: '導入時の個別サポートにて、Hub2チームが商品マスター移行をお手伝いします。CSVテンプレートの提供、各モールからのデータ抽出スクリプト、初期セットアップまで含めて並走いたします。',
    },
    {
      q: '支払い方法は？',
      a: 'クレジットカード（VISA / Mastercard / JCB / American Express）・銀行振込に対応しています。年払いを選択いただくと2ヶ月分お得になります。',
    },
    {
      q: '解約はいつでもできますか？',
      a: 'はい。月払いプランは当月末までに手続きいただければ翌月から停止されます。長期契約縛りはありません。年払いプランを途中解約された場合、未使用期間分を日割りで返金いたします。',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{ position: 'relative', padding: '120px 0' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
            <span className="section-tag">◆ FAQ · よくあるご質問</span>
            <h2 className="section-h2">
              気になることは、<br />
              <span className="gold-text serif">すべてここで。</span>
            </h2>
          </div>
        </Reveal>

        <div style={{ maxWidth: 820, margin: '0 auto' }}>
          {items.map((item, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={i} delay={i * 50}>
                <div style={{
                  borderBottom: '1px solid var(--line)',
                }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: '100%',
                      display: 'flex',
                      alignItems: 'flex-start',
                      gap: 20,
                      padding: '24px 8px',
                      background: 'transparent',
                      border: 'none',
                      cursor: 'pointer',
                      textAlign: 'left',
                      color: 'var(--ink)',
                      fontFamily: 'inherit',
                    }}
                  >
                    <span className="mono" style={{
                      fontSize: 11,
                      color: 'var(--gold)',
                      letterSpacing: '0.15em',
                      paddingTop: 4,
                      minWidth: 32,
                    }}>Q.{String(i + 1).padStart(2, '0')}</span>
                    <span style={{
                      flex: 1,
                      fontSize: 17,
                      fontWeight: 500,
                      letterSpacing: '0.02em',
                      lineHeight: 1.6,
                    }}>{item.q}</span>
                    <span style={{
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                      transition: 'transform 0.3s ease',
                      color: 'var(--gold)',
                      display: 'inline-flex',
                      paddingTop: 4,
                    }}>
                      <Glyph.Plus width="20" height="20" />
                    </span>
                  </button>
                  <div style={{
                    overflow: 'hidden',
                    maxHeight: isOpen ? 400 : 0,
                    opacity: isOpen ? 1 : 0,
                    transition: 'max-height 0.4s ease, opacity 0.3s ease',
                  }}>
                    <div style={{
                      padding: '0 8px 24px 60px',
                      fontSize: 14,
                      color: 'var(--ink-2)',
                      lineHeight: 2,
                      letterSpacing: '0.02em',
                    }}>
                      {item.a}
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;