// P4 — Services

function PageServices({ setPage }) {
  const services = [
    {
      num: '01',
      en: 'LODGING',
      zh: '住宿方案',
      sub: '一館一房一設計',
      img: PHOTO.service_lodging,
      desc: '每館客房數量刻意控制在 30 間以下。我們相信小規模才能維持質感，從織品、燈光、空調，到玄關的木地板，每個細節都經過反覆調整。',
      list: ['雙人雪見房 / 親子四人房 / 寫作者單人房', '館內溫泉、24h 茶水間、會議與共讀空間', '無感入住，無大廳排隊'],
    },
    {
      num: '02',
      en: 'LESSONS',
      zh: '滑雪課程安排',
      sub: '從第一次穿雪靴，到征服樹林線',
      img: PHOTO.service_lessons,
      bgPos: 'right top',
      desc: '我們合作的滑雪學校包含日本國家認證 SAJ 教練與通中文／英文的私人教練。預約以小班制為原則（最多 1:4），課程可指定全程使用華語。',
      list: ['初學者半日／全日體驗課（4 歲起）', '進階單板與雙板私人教練', '雪況評估與坡道路線規劃'],
    },
    {
      num: '03',
      en: 'TRANSFER',
      zh: '接駁服務',
      sub: '從新幹線車站到房間，無接縫',
      img: PHOTO.service_shuttle,
      desc: '抵達日本的那一刻起，由我們接手。從成田、羽田、新潟、山形機場，到三館，都有對應的接駁安排與華語管家陪同。雪季高峰期可提供包車接送。',
      list: ['新幹線車站每日定班接駁', '機場 → 旅館一條龍包車', '深夜抵達夜間接送（含茶水）'],
    },
    {
      num: '04',
      en: 'DINING',
      zh: '餐飲',
      sub: '雪國的味道，從產地到餐桌',
      img: PHOTO.service_dining,
      desc: '我們不提供 buffet。每晚的料理由各館主廚根據當日採購靈活配菜，使用當地的越光米、山形牛、地酒與雪國蔬食，並按你的人數準備。',
      list: ['每晚主廚晚餐（含一杯地酒）', '次晨日式早餐', '兒童取向獨立菜單'],
    },
  ];

  return (
    <main key="services">
      <section className="page-header" style={{ height: '50vh', minHeight: 400 }} data-screen-label="04 服務項目">
        <div className="page-header__photo" style={{ backgroundImage: `url(${PHOTO.services_hero})` }} />
        <div className="page-header__content">
          <div className="page-header__crumb enter-up">— SERVICES / 04</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 style={{ paddingTop: 'var(--section-y)' }}>
        {services.map(s => (
          <div className="service-block" key={s.num}>
            <div>
              <div className="service-block__num">{s.num} / 04 — {s.en}</div>
              <h3>{s.zh}</h3>
              <div className="en-name">{s.sub}</div>
              <p>{s.desc}</p>
              <ul>
                {s.list.map((item, i) => <li key={i}>{item}</li>)}
              </ul>
            </div>
            <div className="service-block__photo" style={{ backgroundImage: `url(${s.img})`, backgroundPosition: s.bgPos || 'center' }} />
          </div>
        ))}
      </section>

      {/* Price */}
      <section className="section" style={{ background: 'var(--snow)' }}>
        <div className="shell">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 12 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>— PRICING / 費用說明</div>
              <h2 className="h1" style={{ maxWidth: 640 }}>概念型參考方案，<br />非實際販售價格。</h2>
            </div>
            <button className="btn" onClick={() => setPage('contact')}>
              <BtnLabel>客製化報價</BtnLabel><Arrow />
            </button>
          </div>

          <table className="price-table">
            <thead>
              <tr>
                <th style={{ width: '36%' }}>方案 / PACKAGE</th>
                <th>包含內容</th>
                <th style={{ textAlign: 'right' }}>每人每晚（雙人入住）</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="name">雪國基本<br /><span style={{ fontFamily: 'var(--en-sans)', fontSize: 11, color: 'var(--pewter)', letterSpacing: '0.3em' }}>BASIC STAY</span></td>
                <td>住宿、早晚餐、溫泉、無線網路、館內共用設施</td>
                <td className="price">NT$ 8,800<span>／concept</span></td>
              </tr>
              <tr>
                <td className="name">初學者整套<br /><span style={{ fontFamily: 'var(--en-sans)', fontSize: 11, color: 'var(--pewter)', letterSpacing: '0.3em' }}>BEGINNER FULL</span></td>
                <td>含基本方案 ＋ 雪具租借 ＋ 半日初學課程</td>
                <td className="price">NT$ 12,400<span>／concept</span></td>
              </tr>
              <tr>
                <td className="name">親子方案<br /><span style={{ fontFamily: 'var(--en-sans)', fontSize: 11, color: 'var(--pewter)', letterSpacing: '0.3em' }}>FAMILY</span></td>
                <td>四人房、兒童課程半日、兒童菜單、保母聯絡</td>
                <td className="price">NT$ 9,600<span>／concept</span></td>
              </tr>
              <tr>
                <td className="name">攝影旅行<br /><span style={{ fontFamily: 'var(--en-sans)', fontSize: 11, color: 'var(--pewter)', letterSpacing: '0.3em' }}>PHOTOGRAPHER</span></td>
                <td>單人房、樹冰纜車預約、攝影器材租借、嚮導</td>
                <td className="price">NT$ 14,800<span>／concept</span></td>
              </tr>
            </tbody>
          </table>

          <div className="price-note">
            * 本頁價格與方案皆為作品集展示用的虛構內容，非實際販售資訊。<br />
            * 圖片、館別與服務設定僅用於呈現品牌網站架構與旅宿體驗設計。
          </div>
        </div>
      </section>
    </main>
  );
}

window.PageServices = PageServices;