// P5 — Beginner Guide

function PageBeginner({ setPage }) {
  const steps = [
    { n: '01', icon: 'Gear',   t: '裝備租借',     d: '抵達當天，由管家陪同到館內租借區。雪衣、雪褲、雪靴、雪具、護目鏡，一次到位。' },
    { n: '02', icon: 'Lesson', t: '初學課程預約', d: '我們會根據你的人數、年齡、語言偏好，安排合適的教練。可選擇半日或全日課程。' },
    { n: '03', icon: 'Slope',  t: '坡道選擇',     d: '第一天從寬闊緩坡開始，第二天進階到中級坡。我們不會勉強你跳級。' },
    { n: '04', icon: 'Safe',   t: '安全須知',     d: '出發前的雪況、纜車營運、緊急聯絡。中文簡報，五分鐘讓你安心。' },
  ];

  const qa = [
    { q: '完全沒滑過雪，可以嗎？', en: 'NEVER SKIED', a: '可以。我們有專為「人生第一次」設計的半日課程，內容包含基礎站立、平地推進、煞車與轉彎。多數旅客在課程結束時，已能獨立在初級坡道上滑行。' },
    { q: '小孩幾歲可以開始？',     en: 'KIDS AGE',    a: '4 歲以上。我們合作的滑雪學校有專門的兒童班（4–6 歲）與青少年班（7–12 歲），全程由日本國家認證教練帶領，教練可使用簡單中文。' },
    { q: '一定要會日文嗎？',       en: 'LANGUAGE',    a: '不用。三館皆有駐館華語管家，從入住、課程、餐廳、雪況到緊急狀況都能用中文溝通。日語只是錦上添花。' },
    { q: '雪季高峰會不會很擠？',   en: 'CROWDING',    a: '館內絕對不會。我們的客房數刻意控制在 30 間以下。雪場本身的人流我們會提前提示你哪些時段較少人，盡量避開。' },
  ];

  return (
    <main key="beginner">
      <section className="page-header" style={{ height: '60vh', minHeight: 460 }} data-screen-label="05 初學者指南">
        <div className="page-header__photo" style={{ backgroundImage: `url(${PHOTO.beginner_hero})` }} />
        <div className="page-header__content">
          <div className="page-header__crumb enter-up">— BEGINNER GUIDE / 05</div>
          <h1 className="page-header__title enter-up d-100">
            第一次滑雪？<br />我們幫你準備好了。
          </h1>
          <div className="page-header__sub enter-up d-200">從零開始，到自信地站上坡道，四個步驟。</div>
        </div>
      </section>

      <section className="section section--tight">
        <div className="shell" style={{ marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>— FOUR STEPS</div>
          <h2 className="h1" style={{ maxWidth: 720 }}>從零到第一道滑行軌跡，<br />我們陪你走完。</h2>
        </div>

        <div className="steps">
          {steps.map(s => {
            const IconEl = Icon[s.icon];
            return (
              <div key={s.n} className="step">
                <div className="step__num">{s.n}</div>
                <div className="step__icon">{IconEl && <IconEl size={28} />}</div>
                <h3 className="step__title">{s.t}</h3>
                <p className="step__desc">{s.d}</p>
              </div>
            );
          })}
        </div>
      </section>

      {/* Q&A band */}
      <section className="section section--tight" style={{ background: 'var(--snow)', paddingTop: 0 }}>
        <div className="shell" style={{ paddingTop: 'clamp(80px,10vw,140px)', marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>— COMMON CONCERNS / 初學者最常問</div>
          <h2 className="h1" style={{ maxWidth: 720 }}>放下擔心，<br />我們聽過這些問題很多次了。</h2>
        </div>

        <div className="qa">
          {qa.map((item, i) => (
            <div key={i} className="qa-item">
              <div className="qa-item__q">
                <small>Q.0{i + 1} — {item.en}</small>
                {item.q}
              </div>
              <div className="qa-item__a">{item.a}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="cta-band">
        <div className="cta-band__inner">
          <div className="eyebrow" style={{ color: 'var(--silver)', marginBottom: 28 }}>— READY?</div>
          <h2>準備好了嗎？<br />帶著家人來吧。</h2>
          <p>我們會根據你的人數、孩子年齡、滑雪程度，量身規劃一份不會踩雷的行程。</p>
          <div className="cta-band__buttons">
            <button className="btn btn--light" onClick={() => setPage('contact')}>
              <BtnLabel>立即詢問</BtnLabel><Arrow />
            </button>
            <button className="btn btn--light" onClick={() => setPage('faq')}>
              <BtnLabel>查看更多 FAQ</BtnLabel><Arrow />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.PageBeginner = PageBeginner;