// FAQ page
function PageFAQ({ setPage }) {
  const [open, setOpen] = useState(0);
  const faqs = [
    { q: '初めての予約から施術までの流れを教えてください。', en: 'What does the first visit look like?',
      a: 'ご予約フォームから第一希望日をお送りください。48時間以内にコンシェルジュよりご連絡し、90分のカウンセリング日時を確定いたします。初回は施術ではなく、対話と診察のみ。お急ぎの方にも、この順番を大切にお願いしております。' },
    { q: '男性も受診できますか。', en: 'Do you see male patients?',
      a: '恐れ入りますが、現在は女性の方のみご予約を承っております。施術後の休憩時間まで含めた空間設計のため、今しばらくこの形を続ける予定です。' },
    { q: '妊娠中・授乳中でも受けられる施術はありますか。', en: 'Pregnancy / nursing?',
      a: '一部の保湿系フェイシャルのみご案内可能です。診察の上、お身体の状態に合わせて処方を調整いたします。まずはご相談ください。' },
    { q: 'プラチナ会員への入会方法を教えてください。', en: 'How to become Platinum?',
      a: '既存会員様のご紹介、または面談を経てのご招待制です。年4回、合計20-30名様程度を新たにお迎えしております。関心をお持ちの方は、予約フォームのMembershipよりその旨お知らせください。' },
    { q: 'キャンセル規定はありますか。', en: 'Cancellation policy?',
      a: '前日までのご連絡は無料。当日キャンセルは施術費の50%、無断キャンセルは100%を申し受けます。完全予約制のため、恐縮ながら厳格に運用しております。' },
    { q: '駐車場はありますか。', en: 'Parking?',
      a: '建物地下に専用駐車場を2台分ご用意しております。コンシェルジュまでお車のナンバーをお知らせください。' },
    { q: '施術後のダウンタイムが気になります。', en: 'Downtime concerns?',
      a: '重要なご予定の前には、ダウンタイムの無い/軽い施術をご案内します。予約時にご予定をお知らせいただければ、医師が最適な処方を組み立てます。' },
    { q: '支払い方法は何が使えますか。', en: 'Payment methods?',
      a: '現金、各種クレジットカード、医療ローンをご利用いただけます。プラチナ会員は月額自動引落に対応しています。' },
  ];

  return (
    <div className="page active">
      <section style={{paddingTop:'calc(var(--nav-h) + 80px)', paddingBottom:80, padding:'calc(var(--nav-h) + 80px) clamp(24px,5vw,80px) 80px'}}>
        <div className="eyebrow">FAQ · Q & A</div>
        <h1 className="display" style={{fontSize:'clamp(72px,10vw,180px)', marginTop:32}}>
          <em>Quiet</em> questions.
        </h1>
      </section>

      <section style={{padding:'40px clamp(24px,5vw,80px) 120px'}}>
        <div style={{maxWidth:1200, margin:'0 auto'}}>
          {faqs.map((f, i) => (
            <div key={i} style={{borderTop:'1px solid var(--line)', padding:'0'}}>
              <button onClick={()=>setOpen(open===i ? -1 : i)} style={{
                width:'100%', display:'grid', gridTemplateColumns:'60px 180px 1fr 60px', gap:32, alignItems:'center',
                textAlign:'left', padding:'40px 0', cursor:'pointer'
              }}>
                <span className="mono" style={{fontSize:11, color:'var(--pink-deep)'}}>{String(i+1).padStart(2,'0')}</span>
                <span style={{fontFamily:'var(--serif-en)', fontStyle:'italic', fontSize:14, color:'var(--stone)', letterSpacing:'0.1em'}}>{f.en}</span>
                <span style={{fontFamily:'var(--serif-jp)', fontSize:20, lineHeight:1.6, fontWeight:300}}>{f.q}</span>
                <span style={{fontFamily:'var(--serif-en)', fontSize:24, color:'var(--pink-deep)', textAlign:'right', transition:'transform 0.4s', transform: open===i ? 'rotate(45deg)' : 'none'}}>＋</span>
              </button>
              <div style={{
                display:'grid', gridTemplateColumns:'60px 180px 1fr 60px', gap:32,
                maxHeight: open===i ? 400 : 0, overflow:'hidden', transition:'max-height 0.6s var(--ease-luxe), padding 0.6s',
                paddingBottom: open===i ? 40 : 0
              }}>
                <div/>
                <div/>
                <p style={{fontFamily:'var(--serif-jp)', fontSize:14, lineHeight:2.2, color:'var(--graphite)', maxWidth:720}}>{f.a}</p>
                <div/>
              </div>
            </div>
          ))}
          <div style={{borderTop:'1px solid var(--line)'}}/>
        </div>

        <div style={{marginTop:120, textAlign:'center'}}>
          <p style={{fontFamily:'var(--serif-jp)', fontSize:14, color:'var(--stone)', marginBottom:24}}>その他のご質問は、コンシェルジュまで</p>
          <a onClick={()=>setPage('reserve')} className="btn btn-arrow">Contact Concierge</a>
        </div>
      </section>
    </div>
  );
}

window.PageFAQ = PageFAQ;