// P2 — About

function PageAbout({ setPage }) {
  return (
    <main key="about">
      {/* Page Header */}
      <section className="page-header" data-screen-label="02 關於我們">
        <div className="page-header__photo" style={{ backgroundImage: `url(${PHOTO.about_hero})` }} />
        <div className="page-header__content">
          <div className="page-header__crumb enter-up">— ABOUT US / 02</div>
          <h1 className="page-header__title enter-up d-100">關於雪境</h1>
          <div className="page-header__sub enter-up d-200">三座山，一個初衷</div>
        </div>
      </section>

      {/* Origin Story */}
      <section className="section">
        <div className="about-story">
          <div className="about-story__num">01 — 起點</div>
          <div className="about-story__body">
            <p>
              某一年冬天，創辦人 Haruto 帶著家人來到苗場。那不是一次為了速度與技巧而安排的旅行，
              而是一段讓所有人重新安靜下來的時間。清晨的雪還沒有被踩過，遠山被薄霧分成幾層，
              旅人第一次理解：雪國真正珍貴的，不只是滑雪，而是抵達之後的那份安定。
            </p>
            <p>
              雪境 Yukisaki Japan 是一個虛構的日本雪國旅宿品牌概念。我們想像它服務的不是追逐行程數量的旅客，
              而是希望把時間留給家人、溫泉、雪景與第一道滑行軌跡的人。這個網站以提案作品形式呈現，
              重點在於品牌敘事、旅宿體驗設計與多頁式網站架構。
            </p>
            <p>
              三館分別設定於苗場、湯澤與藏王。苗場適合家庭與初學者，湯澤重視交通便利與短天數旅行，
              藏王則保留給喜歡安靜、攝影與溫泉的人。三種雪國個性，組成同一個虛構品牌的完整世界觀。
            </p>
          </div>
        </div>
      </section>

      {/* Pullquote / Photo divider */}
      <div className="full-photo" style={{ backgroundImage: `url(${PHOTO.about_band})` }} />

      <section className="section">
        <div className="about-story">
          <div className="about-story__num">02 — 立場</div>
          <div className="about-story__body">
            <p className="about-story__pullquote">
              我們不把旅程設計成清單。<br />
              我們把它設計成一段能被身體記住的時間 ——<br />
              從抵達、入住、第一堂課，到夜裡的雪聲。
            </p>
            <p style={{ marginTop: 48 }}>
              一間旅宿能傳達的，不只是房間與價格。它也可以是一種節奏：抵達時不用慌張，
              第一次穿雪靴時有人說明，晚餐後可以慢慢走回房間。這些細節不一定會被拍下來，
              卻會影響旅人怎麼記得一趟旅行。
            </p>
            <p>
              如果你正在尋找的是最便宜、最快速、最多景點的行程，雪境可能不是那種品牌。
              它更像是一個安靜的雪國提案：把行程減少，把停留放大。
            </p>
          </div>
        </div>
      </section>

      {/* Numbers */}
      <section className="section section--tight" style={{ paddingTop: 0 }}>
        <div className="shell" style={{ marginBottom: 80 }}>
          <div className="eyebrow">— THE YUKISAKI IN NUMBERS</div>
        </div>
        <div className="numbers">
          <div className="number-cell">
            <div className="number-cell__label">Lodges</div>
            <div className="number-cell__value">03<sup>館</sup></div>
            <div className="number-cell__caption">苗場 · 湯澤 · 藏王</div>
          </div>
          <div className="number-cell">
            <div className="number-cell__label">Since</div>
            <div className="number-cell__value">CONCEPT</div>
            <div className="number-cell__caption">Portfolio case study</div>
          </div>
          <div className="number-cell">
            <div className="number-cell__label">Guests</div>
            <div className="number-cell__value">FICTIONAL</div>
            <div className="number-cell__caption">No real booking data</div>
          </div>
          <div className="number-cell">
            <div className="number-cell__label">Rating</div>
            <div className="number-cell__value">N/A</div>
            <div className="number-cell__caption">Concept project only</div>
          </div>
        </div>
      </section>

      {/* Three Pillars (philosophy) */}
      <section className="section" style={{ background: 'var(--snow)' }}>
        <div className="shell" style={{ marginBottom: 'clamp(60px,8vw,120px)' }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>— PHILOSOPHY / 服務理念三支柱</div>
          <h2 className="h1" style={{ maxWidth: 720 }}>三件我們不會妥協的事。</h2>
        </div>
        <div className="pillars" style={{ borderColor: 'var(--line)' }}>
          <div className="pillar">
            <div className="pillar__num">— I</div>
            <div className="pillar__icon"><Icon.Lantern /></div>
            <h3 className="pillar__title">精品住宿</h3>
            <p className="pillar__desc">
              小規模、低住房比例。每位旅客至少擁有 35 m² 的呼吸空間，與一位記得名字的管家。
            </p>
          </div>
          <div className="pillar">
            <div className="pillar__num">— II</div>
            <div className="pillar__icon"><Icon.Compass /></div>
            <h3 className="pillar__title">在地嚮導</h3>
            <p className="pillar__desc">
              每館配備在地嚮導與華語管家。從雪況、餐廳、隱藏景點，到緊急狀況處理，一通電話。
            </p>
          </div>
          <div className="pillar">
            <div className="pillar__num">— III</div>
            <div className="pillar__icon"><Icon.Mountain /></div>
            <h3 className="pillar__title">初學者友善</h3>
            <p className="pillar__desc">
              我們相信第一次最重要。從裝備、課程、坡道，到自信的建立，我們安排成一個完整體驗。
            </p>
          </div>
        </div>
      </section>

      <section className="cta-band">
        <div className="cta-band__inner">
          <div className="eyebrow" style={{ color: 'var(--silver)', marginBottom: 28 }}>— NEXT</div>
          <h2>下一步，挑選一館。</h2>
          <p>三館各有性格。苗場親近家庭、湯澤交通便利、藏王適合慢遊與賞景。</p>
          <div className="cta-band__buttons">
            <button className="btn btn--light" onClick={() => setPage('lodges')}>
              <BtnLabel>探索三館</BtnLabel><Arrow />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.PageAbout = PageAbout;