// PC FAQ — 2-column accordion grid.

const FAQ_ITEMS_PC = [
  { q: '料金はかかりますか？',
    a: '毎日の占いは無料で始められる予定です。占い師への個別相談など一部機能は、有料で提供される場合があります。' },
  { q: '占いの結果は怖くないですか？',
    a: 'ミライズは、不安を煽る表現や断定的な言葉に頼らず、前向きに受け取れる言葉で結果をお届けします。' },
  { q: '生年月日を登録する必要はありますか？',
    a: '生年月日などの基本情報を登録すると、あなたに合わせた占い結果を受け取りやすくなります。登録情報はサービス提供に必要な範囲で適切に取り扱います。' },
  { q: 'いつリリース予定ですか？',
    a: '現在リリース準備中です。先行登録いただいた方には、公開時期や最新情報をメールでお知らせします。' },
  { q: '対応端末を教えてください',
    a: 'iOS / Android での提供を予定しています。対応環境の詳細は、リリース時にあわせてご案内します。' },
];

const FAQPC = () => {
  return (
    <section>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow">— FAQ —</div>
          <h2 className="section-title">
            よくいただく<em>ご質問。</em>
          </h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 20, maxWidth: 980, margin: '0 auto',
        }}>
          {FAQ_ITEMS_PC.map((it, i) => (
            <FAQItemPC key={i} q={it.q} a={it.a}/>
          ))}
        </div>
      </div>
    </section>
  );
};

const FAQItemPC = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="card" style={{
      padding: 0, overflow: 'hidden',
    }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: '100%', display: 'flex', alignItems: 'flex-start',
          justifyContent: 'space-between', gap: 16,
          padding: '22px 26px',
          background: 'transparent', border: 'none',
          textAlign: 'left', cursor: 'pointer',
          fontFamily: 'var(--title-font)',
          fontSize: 15, letterSpacing: '0.08em',
          color: 'var(--ink)', lineHeight: 1.7,
        }}
      >
        <span style={{ flex: 1 }}>{q}</span>
        <span style={{
          width: 28, height: 28, borderRadius: '50%',
          background: 'var(--chip)', color: 'var(--accent-deep)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, flexShrink: 0,
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
          transition: 'transform 0.3s ease',
        }}>+</span>
      </button>
      <div style={{
        maxHeight: open ? 200 : 0,
        overflow: 'hidden',
        transition: 'max-height 0.4s ease, padding 0.3s ease',
        padding: open ? '0 26px 22px 26px' : '0 26px',
      }}>
        <p style={{
          fontSize: 13.5, color: 'var(--ink-soft)',
          lineHeight: 2, margin: 0, letterSpacing: '0.04em',
        }}>{a}</p>
      </div>
    </div>
  );
};

window.FAQPC = FAQPC;