const FAQ_ITEMS = [
  {
    q: '応募から採用までの流れを教えてください',
    a: 'エントリー後、3営業日以内に採用担当よりご連絡し、面接日程を調整します。面接（1〜2回）→ 内定までの平均期間は2〜3週間です。在職中の方もスケジュールを柔軟に調整いたしますのでご相談ください。'
  },
  {
    q: '未経験ですが、応募できますか？',
    a: 'はい、大歓迎です。実際に正学館で校舎運営を担う社員の多くは、教育業界未経験からの中途入社です。Visionary研修（新人研修）とStage別研修で、教室運営・コーチング・マネジメントのノウハウを段階的に身につけられます。'
  },
  {
    q: 'まずは話を聞いてみたいだけでも大丈夫ですか？',
    a: 'もちろんです。「カジュアル面談」として、選考とは別に正学館の雰囲気や仕事内容を知っていただく機会を設けています。応募の意思が固まっていなくても、お気軽にご連絡ください。'
  },
  {
    q: '勤務する校舎は選べますか？',
    a: 'ご希望の校舎をエントリーフォームでお伝えください。市川・船橋・柏エリアの12校舎から、通いやすい場所をご相談のうえ決定します。'
  },
  {
    q: 'キャリアパスを教えてください',
    a: '入社後はまず副校舎長として現場の運営を学び、校舎長 → エリアマネージャー → 経営層へとステップアップしていただけます。3〜5年で経営の中核を担うポジションを目指せる環境です。'
  },
  {
    q: '転勤はありますか？',
    a: '原則として通勤可能な範囲の校舎をご相談のうえ配属しています。キャリアアップに伴い、エリア統括などより広い範囲を担当いただく可能性はありますが、住居の移転を伴う異動は基本的にありません。'
  },
];

const FaqItem = ({ q, a, isOpen, onClick }) => (
  <div className={`faq-item ${isOpen ? 'is-open' : ''}`}>
    <button className="faq-q" onClick={onClick} type="button" aria-expanded={isOpen}>
      <span className="faq-q-mark">Q.</span>
      <span className="faq-q-text">{q}</span>
      <span className="faq-q-icon" aria-hidden>{isOpen ? '−' : '+'}</span>
    </button>
    <div className="faq-a">
      <div className="faq-a-inner">
        <span className="faq-a-mark">A.</span>
        <p>{a}</p>
      </div>
    </div>
  </div>
);

const Faq = () => {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section className="sec-faq" id="faq">
      <div className="container">
        <div className="faq-head">
          <div className="sec-eyebrow">
            <span className="sec-eyebrow-num">06</span>
            <span className="sec-eyebrow-bar"/>
            <span>FAQ</span>
          </div>
          <h2 className="big-jp-title" style={{fontSize:36}}>
            よくある<span className="mark">ご質問</span>
          </h2>
          <p className="faq-lead">
            応募・面接・働き方について、よくいただくご質問をまとめました。<br/>
            他にも気になることがあれば、お気軽にお問い合わせください。
          </p>
        </div>
        <div className="faq-list">
          {FAQ_ITEMS.map((item, i) => (
            <FaqItem
              key={i}
              {...item}
              isOpen={openIdx === i}
              onClick={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

const Flow = () => (
  <section className="sec-flow" id="flow">
    <div className="container">
      <div className="flow-head">
        <div className="sec-eyebrow">
          <span className="sec-eyebrow-num">07</span>
          <span className="sec-eyebrow-bar"/>
          <span>FLOW</span>
        </div>
        <h2 className="big-jp-title" style={{fontSize:36}}>
          ご応募〜<span className="mark">入社</span>までの流れ
        </h2>
      </div>
      <div className="flow-steps">
        <div className="flow-step">
          <div className="flow-step-num">STEP 01</div>
          <div className="flow-step-title">エントリー</div>
          <div className="flow-step-body">
            応募フォームより必要事項をご記入ください。<br/>
            <strong>所要時間：約5分</strong>
          </div>
        </div>
        <div className="flow-arrow">→</div>
        <div className="flow-step">
          <div className="flow-step-num">STEP 02</div>
          <div className="flow-step-title">面接日程調整</div>
          <div className="flow-step-body">
            <strong>3営業日以内</strong>に採用担当よりご連絡し、面接日時を決定します。
          </div>
        </div>
        <div className="flow-arrow">→</div>
        <div className="flow-step">
          <div className="flow-step-num">STEP 03</div>
          <div className="flow-step-title">面接（1〜2回）</div>
          <div className="flow-step-body">
            校舎にて面接を実施。あなたの想いをお聞かせください。<br/>
            服装は<strong>普段着でOK</strong>。
          </div>
        </div>
        <div className="flow-arrow">→</div>
        <div className="flow-step flow-step-final">
          <div className="flow-step-num">STEP 04</div>
          <div className="flow-step-title">内定・入社</div>
          <div className="flow-step-body">
            内定後、勤務開始日をご相談のうえ決定。<br/>
            <strong>Visionary研修</strong>からスタートします。
          </div>
        </div>
      </div>

      <div className="flow-casual">
        <div className="flow-casual-inner">
          <div className="flow-casual-eyebrow">— CASUAL VISIT</div>
          <h3>まずは話を聞いてみたい方へ</h3>
          <p>
            「応募までは決めかねている」「正学館のことをもっと知ってから判断したい」<br/>
            そんな方は、選考ではない<strong>カジュアル面談</strong>をご利用ください。<br/>
            会社の雰囲気・働き方・キャリアパスなど、なんでもざっくばらんにお話しできます。
          </p>
          <a href="#entry" className="btn btn-outline" style={{marginTop:18}}>
            <span>カジュアル面談を申し込む</span><span className="btn-arrow"/>
          </a>
        </div>
      </div>
    </div>
  </section>
);

window.Faq = Faq;
window.Flow = Flow;