// FAQ

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

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

      <div className="card" style={{ padding: '8px 4px' }}>
        {items.map((it, i) => (
          <FAQItem key={i} q={it.q} a={it.a} isLast={i === items.length - 1}/>
        ))}
      </div>
    </section>
  );
};

const FAQItem = ({ q, a, isLast }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{
      borderBottom: isLast ? 'none' : '1px solid rgba(203, 168, 104, 0.2)',
    }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: '100%', display: 'flex', alignItems: 'flex-start',
          justifyContent: 'space-between', gap: 12,
          padding: '18px 18px',
          background: 'transparent', border: 'none',
          textAlign: 'left', cursor: 'pointer',
          fontFamily: 'var(--title-font)',
          fontSize: 13.5, letterSpacing: '0.08em',
          color: 'var(--ink)', lineHeight: 1.7,
        }}
      >
        <span style={{ flex: 1 }}>{q}</span>
        <span style={{
          width: 22, height: 22, borderRadius: '50%',
          background: 'var(--chip)', color: 'var(--accent-deep)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 14, 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 18px 18px 18px' : '0 18px',
      }}>
        <p style={{
          fontSize: 12, color: 'var(--ink-soft)',
          lineHeight: 2, margin: 0, letterSpacing: '0.04em',
        }}>{a}</p>
      </div>
    </div>
  );
};

window.FAQ = FAQ;