// === 乗務員の声（※実際のヒアリングをもとに差し替え推奨の仮テキスト） ===
const INTERVIEWS = {
  veteran: {
    photo: 'assets/photos/DSC09870.jpg',
    role: 'ベテラン乗務員',
    quote: 'お客様の「ありがとう」が、\n何よりのやりがいです。',
    sections: [
      {
        q: 'この仕事の魅力は？',
        a: 'お客様を安全に目的地までお送りして、「ありがとう、助かったよ」と言っていただける。それが、この仕事の一番のやりがいです。\n\n毎日いろんな方との出会いがあって、同じ一日がありません。自分のペースで走れるのもいいところですね。'
      },
      {
        q: '未経験から始める方へ',
        a: '最初は道を覚えるのが大変かもしれません。でも、慣れれば自分のペースで働けます。\n\n私も未経験から始めましたが、先輩が隣で丁寧に教えてくれました。心配することはありません。'
      },
      {
        q: '収入について教えてください',
        a: '歩合給なので、走った分だけ収入になります。自分の頑張りが、そのまま返ってくる。それが、やりがいにつながっています。'
      },
    ]
  },
  woman: {
    photo: 'assets/photos/IMG_1113.jpg',
    role: '女性乗務員',
    quote: '女性も、安心して\n長く働ける会社です。',
    sections: [
      {
        q: '女性でも働きやすいですか？',
        a: 'はい。お子さんのお迎えや育児に合わせた働き方も相談できます。\n\n女性が安心して働けるように、会社が一緒に考えてくれます。だから、長く続けられるんです。'
      },
      {
        q: '未経験からのスタートでしたか？',
        a: '私も未経験からのスタートでした。最初は不安でしたが、先輩方が優しく教えてくださって、今では常連のお客様もできました。'
      },
      {
        q: 'これから応募する方へ',
        a: 'タクシーは男性の仕事というイメージがあるかもしれません。でも、女性だからこそ安心して乗っていただけるお客様も多いんです。ぜひ、一歩踏み出してみてください。'
      },
    ]
  },
  career: {
    photo: 'assets/photos/DSC06971.jpg',
    role: '50代・転職して入社',
    quote: '歩合だから、頑張った分\nだけ返ってくる。',
    sections: [
      {
        q: '入社のきっかけは？',
        a: '50代で転職を考えていた時に、年齢を問わず挑戦できるこの仕事に出会いました。\n\n新しいことを始めるのに、年齢は関係ない。今、そう実感しています。'
      },
      {
        q: '実際に稼げますか？',
        a: '歩合給なので、頑張った分だけ返ってきます。1年目でも、しっかり走れば想像以上の収入になりました。\n\nやればやるほど報われる環境だと思います。'
      },
      {
        q: '仕事のやりがいは？',
        a: '自分のペースで働けること。そして、地域のお客様の役に立てること。\n\n第二のキャリアとして、本当に良い選択でした。'
      },
    ]
  },
};

const InterviewModal = ({ person, onClose }) => {
  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">
      <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: 'veteran', data: INTERVIEWS.veteran },
            { key: 'woman', data: INTERVIEWS.woman },
            { key: 'career', data: INTERVIEWS.career },
          ].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>昭和40年から地域とともに</small>
              </div>
              <div className="stat-value">60<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">3<small>社</small></div>
            </div>
            <div className="stat-row">
              <div className="stat-icon-wrap"><Icons.ChartUp/></div>
              <div className="stat-label">
                稼働体制
                <small>年中無休でまちを支える</small>
              </div>
              <div className="stat-value">24<small>時間</small></div>
            </div>
            <a className="stats-link" href="https://matsumura-taxi.com/company/" target="_blank" rel="noopener noreferrer">会社のことを見る →</a>
          </div>
        </div>

        <div className="interview-more">
          <a href="https://matsumura-taxi.com/" target="_blank" rel="noopener noreferrer">
            松村タクシー 公式サイトを見る　→
          </a>
        </div>
      </div>

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

window.Interview = Interview;