// === 社員インタビューデータ（文字起こし整形済） ===
const INTERVIEWS = {
  baba: {
    photo: 'assets/portrait-interview-m2-v2.webp',
    role: '営業部長 兼 校長',
    quote: '正解のないことに立ち向かう、\n自分からやる人と働きたい。',
    sections: [
      {
        q: '自己紹介をお願いします',
        a: '株式会社SGエデュケーションで営業本部長をしております、馬場と申します。同時に正学館 東菅野校の校長も兼任しています。'
      },
      {
        q: '正学館で大切にしていることは？',
        a: 'うちは正解のないことに立ち向かうような会社なので、やっぱり「自分からやる」、そういう人と一緒に仕事をしたいと思っています。\n\n仕事自体も自分たちでクリエイティブに考えていくので、ただやらされる仕事ではない。「これがしたい」「これがした方がいい」と思ったら、それを実現できる環境があるのが特徴です。'
      },
      {
        q: '一緒に働く副校長・堀川の印象は？',
        a: '一言で言うと、めちゃくちゃ明るい人です。私は結構真面目なタイプですが、彼女は真逆というか、とにかく常に笑顔でいる。\n\n保護者対応もめちゃくちゃ上手くて、初めて問い合わせをしたお客様が「この塾いいな」と思うくらいの対応をしてくれる。授業中も生徒が彼女の周りに集まってくる。この校舎で堀川の存在は本当に大きいですね。'
      },
      {
        q: '校長・古澤の印象は？',
        a: 'ここ1〜2年で大きく変わったなと感じます。以前は「自分のできる範囲でやる」印象が強かったのですが、最近は壁を越えるというか、自分で限界を超えようとする動きが出てきた。それが成果につながっています。'
      },
      {
        q: '求める人物像は？',
        a: '「素直さ」を持った人が一番うちに合うと思います。やらされ仕事ではなく、自分で考えて「こうしたい」「ああしたい」と思える人。\n\nもう一つは、決めたら最後までやり抜くタイプの人。難しい仕事も自分たちでクリエイティブに考えていく会社なので、その粘り強さは大事だと思います。'
      },
      {
        q: '正学館が掲げる「2ランクアップ」とは？',
        a: '社長が掲げる方針として、生徒の志望校を「2ランクアップさせる」というのがあります。1ランクアップはどこでもできるんです。でも2ランクとなると、認知能力だけでは足りない。非認知能力を育てないと上がっていかない。\n\n平均的な高校からGMARCHクラスへ。それがうちのコンセプトです。'
      },
    ]
  },
  horikawa: {
    photo: 'assets/portrait-interview-f1-v2.webp',
    role: '副校長',
    quote: '生徒の「できた！」の瞬間が、\n何よりのやりがいです。',
    sections: [
      {
        q: '自己紹介とご経歴をお願いします',
        a: '正学館 東菅野校で副校長をしております、堀川 真理奈と申します。\n\n地元は新潟県新潟市で、高校卒業まで新潟におりました。大学進学で千葉県に来て、卒業後は東京で就職。新卒で入った会社で5年ほど働き、6年目に転職で正学館にお世話になっています。'
      },
      {
        q: 'なぜ教育の仕事を選んだのですか？',
        a: 'もともと「人との関わりがある仕事」に就きたいと思っていました。新卒で入った会社もB to Cで直接お客様と関わる仕事でしたが、転職のタイミングで「より深い人との関わり」を求めて、たどり着いたのが教育の世界でした。'
      },
      {
        q: '仕事で大変な瞬間はありますか？',
        a: '自分自身が辛くなって「逃げたい」「辞めたい」と思うことは、あまりないんです。\n\nそれよりも、生徒や一緒に働く講師がちょっと暗い表情をしていたり、授業が終わって生徒が帰っていくときに「なんだか沈んでるな」と感じると、「今日の授業ダメだったかな」とか「何か抱えてるのかな」と、そっちの方で辛くなることが多いですね。'
      },
      {
        q: '正学館の魅力は？',
        a: '社員一人ひとりの個性を尊重してくれる会社です。「こうしなさい」と上から押し付けられるのではなく、自分で考えて、自分で動いて、それが実現できる環境があります。\n\n生徒と保護者にとことん向き合うことが、結局は自分の成長にもつながっていく。そんな手応えを毎日感じられる場所です。'
      },
    ]
  },
  furusawa: {
    photo: 'assets/portrait-interview-m1-v2.webp',
    role: '校長',
    quote: '人生を良い方向に導きたい、\nそう思える人と働きたい。',
    sections: [
      {
        q: '自己紹介とご経歴をお願いします',
        a: '個別学習塾 正学館 海神行田校の校長を務めております、古澤と申します。\n\n入社は2017年で、もう9年前になります。実はもともと正学館 薬園台校に中学生の頃から生徒として通っていました。高校入試・大学入試を経て、大学在学中の4年以上、ここで講師としてアルバイトを続け、そのまま入社しました。'
      },
      {
        q: '入社を決めた理由は？',
        a: '中学生の頃に通っていた時、講師の方々が本当に親身になって接してくれて、教え方もすごく分かりやすかった。勉強が嫌いだった自分が、勉強を好きになれた経験があります。\n\n大学生になって講師として働き始めてからも、当時の校長たちが本当に楽しそうに仕事をしていた。「自分もこの人たちと同じことをしてみたい」と思ったのが、強いきっかけでした。\n\n実は別の教育業界の内定もいただいていたのですが、最終的にここを選びました。'
      },
      {
        q: '副校長・堀川の印象は？',
        a: 'もともと教育業界とは違う畑で働いてきた方なので、そこでしっかり指導を受けて経験を積んできた方だなという印象があります。\n\n何よりも「子どものために」という想いが非常に強い方。子どもたちともすぐに打ち解けますし、保護者への接し方も本当に丁寧で、それが第一印象としてとても良かったですね。\n\n今もその印象は変わらず、子どもたちのため・保護者のためにできることはないかと、常に探し続けて動いている方だと思います。'
      },
      {
        q: '尊敬する人を一人挙げるなら？',
        a: '今、東菅野校にいる馬場先生ですね。\n\nまず、生徒と保護者のことを絶対に第一に考える、というスタンスをずっと貫いている。大学生で講師をしていた頃からそうだったのに、10年以上経った今でも変わらずやり続けている。\n\nそして、自分がダメダメな時期があった時も、見捨てずに根気よく指導してくださって、今の自分がいる。「うちに来ないか」と声をかけてくれたのも馬場先生でした。\n\n生徒・保護者を第一に、周りの社員もしっかり気遣ってフォローする。それを長年続けている姿は、本当に尊敬しています。'
      },
      {
        q: '正学館とは、どんな塾ですか？',
        a: '正学館の掲げる言葉に「学ぶ喜びと、生きる喜びと。」というものがあります。\n\n子どもたちが正しく学んで、その過程を通じて自信を身につけ、目標を達成する力を養うこと。これこそが、勉強を通じた本当の意味での「人材育成」だと考えています。\n\nですから、ただ勉強を教えるだけではなく、子どもたち一人ひとりの人生を、良い方向に導きたい——そう思える方と、ぜひ一緒に働きたいと思っています。'
      },
    ]
  },
};

const InterviewModal = ({ person, onClose }) => {
  // フックは常に最初に呼ぶ（条件付き return より前）。person で内部分岐する。
  React.useEffect(() => {
    if (!person) return;
    document.body.style.overflow = 'hidden';
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onEsc);
    };
  }, [person, onClose]);

  if (!person) return null;
  const data = INTERVIEWS[person];

  return (
    <div className="iv-modal-overlay" onClick={onClose}>
      <div className="iv-modal" onClick={(e) => e.stopPropagation()}>
        <button className="iv-modal-close" onClick={onClose} aria-label="閉じる">×</button>

        <div className="iv-modal-hero">
          <img src={data.photo} alt=""/>
          <div className="iv-modal-hero-text">
            <div className="iv-modal-role">{data.role}</div>
            <div className="iv-modal-quote">
              {data.quote.split('\n').map((line, i) => (
                <React.Fragment key={i}>
                  {line}{i < data.quote.split('\n').length - 1 && <br/>}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>

        <div className="iv-modal-body">
          {data.sections.map((sec, i) => (
            <div key={i} className="iv-qa">
              <div className="iv-q">
                <span className="iv-q-mark">Q</span>
                <span className="iv-q-text">{sec.q}</span>
              </div>
              <div className="iv-a">
                {sec.a.split('\n\n').map((para, j) => (
                  <p key={j}>
                    {para.split('\n').map((line, k, arr) => (
                      <React.Fragment key={k}>
                        {line}{k < arr.length - 1 && <br/>}
                      </React.Fragment>
                    ))}
                  </p>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="iv-modal-footer">
          <button className="btn btn-outline" onClick={onClose}>
            <span>閉じる</span>
          </button>
        </div>
      </div>
    </div>
  );
};

const Interview = () => {
  const [openPerson, setOpenPerson] = React.useState(null);

  return (
    <section className="sec-interview" id="interview">
      <img className="interview-bg-shodo" src="assets/sg_shodo_h.webp" alt="" aria-hidden/>
      <div className="container">
        <div className="interview-head-grid">
          <div className="interview-head-left">
            <div className="sec-eyebrow">
              <span className="sec-eyebrow-num">03</span>
              <span className="sec-eyebrow-bar"/>
              <span>PEOPLE</span>
            </div>
            <h2 className="interview-giant">
              <span className="mark" style={{color:'var(--green-700)'}}>人</span>を<br/>知る。
            </h2>
            <div className="interview-sub">社員インタビュー</div>
          </div>
          <div className="interview-head-right">
            <h3>人の成長が、<br/>自分の成長になる。</h3>
            <p>
              生徒一人ひとりの未来に向き合う仕事には、やりがいと学びがあふれています。
              現場で活躍する先輩たちの言葉から、仕事のリアルや成長の環境をご紹介します。
            </p>
          </div>
        </div>

        <div className="interview-cards-grid">
          {[
            { key: 'baba', data: INTERVIEWS.baba },
            { key: 'horikawa', data: INTERVIEWS.horikawa },
            { key: 'furusawa', data: INTERVIEWS.furusawa },
          ].map(({ key, data }) => (
            <button key={key} className="person-card" onClick={() => setOpenPerson(key)} type="button">
              <div className="person-photo">
                <img src={data.photo} alt=""/>
                <div className="person-tag">{data.role}</div>
              </div>
              <div className="person-body">
                <div className="person-quote">
                  {data.quote.split('\n').map((line, i) => (
                    <React.Fragment key={i}>
                      {line}{i < data.quote.split('\n').length - 1 && <br/>}
                    </React.Fragment>
                  ))}
                </div>
                <div className="person-arrow">→</div>
              </div>
            </button>
          ))}

          <div className="stats-card">
            <div className="stats-title">数字で見る、正学館</div>
            <div className="stat-row">
              <div className="stat-icon-wrap"><Icons.Book/></div>
              <div className="stat-label">
                創業から
                <small>千葉で育てる学び</small>
              </div>
              <div className="stat-value">25<small>年</small></div>
            </div>
            <div className="stat-row">
              <div className="stat-icon-wrap"><Icons.Home/></div>
              <div className="stat-label">
                展開校舎数
                <small>市川・船橋・柏エリア</small>
              </div>
              <div className="stat-value">12<small>校舎</small></div>
            </div>
            <div className="stat-row">
              <div className="stat-icon-wrap"><Icons.ChartUp/></div>
              <div className="stat-label">
                2035年目標
                <small>経営者を育てるパス</small>
              </div>
              <div className="stat-value">50<small>校舎</small></div>
            </div>
            <a className="stats-link" href="https://www.sg-seigaku.co.jp/aboutus/" target="_blank" rel="noopener noreferrer">事業の全体像を見る →</a>
          </div>
        </div>

        <div className="interview-more">
          <a href="https://www.wantedly.com/companies/company_4315459" target="_blank" rel="noopener noreferrer">
            Wantedly で他のストーリーも見る　→
          </a>
        </div>
      </div>

      {/* Modal */}
      <InterviewModal person={openPerson} onClose={() => setOpenPerson(null)}/>
    </section>
  );
};

window.Interview = Interview;