// P1 — Home

function PageHome({ setPage }) {
  return (
    <main key="home">
      {/* ============== HERO ============== */}
      <section className="hero" data-screen-label="01 首頁 — Hero">
        <div
          className="hero__photo enter d-200"
          style={{ backgroundImage: `url(${PHOTO.hero})` }}
        />

        <div className="hero__content">
          <div className="hero__title-block">
            <div className="hero__eyebrow enter-up"><span>YUKISAKI JAPAN</span><span className="hero__eyebrow-tail"> — A QUIET WINTER</span></div>
            <h1 className="hero__title enter-up d-100">
              在靜謐的雪國，<br />與家人遇見雪境。
            </h1>
            <div className="hero__sub enter-up d-200">三座風格旅宿，三種雪國日常</div>
            <div className="hero__locations enter-up d-300">
              <span>Naeba</span><span>Yuzawa</span><span>Zao</span>
            </div>
            <div className="hero__cta enter-up d-400">
              <button className="btn btn--light" onClick={() => setPage('lodges')}>
                <BtnLabel>查看三館</BtnLabel><Arrow />
              </button>
            </div>
          </div>
        </div>

        {/* right vertical text — only on hero */}
        <div className="hero__vertical enter d-500">
          <span>雪境，從靜謐出發</span>
          <span className="hero__vertical-en">YUKISAKI · MMXXVI</span>
        </div>

        <div className="hero__scroll enter d-700">SCROLL</div>
      </section>

      {/* ============== 3 Pillars ============== */}
      <section className="section section--tight" style={{ background: 'var(--paper)' }}>
        <div className="shell" style={{ marginBottom: 'clamp(40px,5vw,72px)' }}>
          <div className="eyebrow">— THE YUKISAKI ETHOS</div>
        </div>
        <div className="pillars">
          <div className="pillar">
            <div className="pillar__num">01 / SITES</div>
            <div className="pillar__icon"><Icon.Mountain /></div>
            <h3 className="pillar__title">嚴選三大雪地勝地</h3>
            <p className="pillar__desc">
              苗場、湯澤、藏王，三座新潟與山形的傳奇雪山，由我們親自踏訪、駐留、選定。
            </p>
          </div>
          <div className="pillar">
            <div className="pillar__num">02 / HOSPITALITY</div>
            <div className="pillar__icon"><Icon.Lantern /></div>
            <h3 className="pillar__title">日式款待與現代舒適</h3>
            <p className="pillar__desc">
              無聲的細節：玄關的木地板溫度、雪後的熱毛巾、湯泉前後的茶。
            </p>
          </div>
          <div className="pillar">
            <div className="pillar__num">03 / GUIDANCE</div>
            <div className="pillar__icon"><Icon.Compass /></div>
            <h3 className="pillar__title">初學者到老手，全程陪伴</h3>
            <p className="pillar__desc">
              華語嚮導駐館，從第一次穿上雪靴，到征服樹林線下的粉雪，都有人在旁。
            </p>
          </div>
        </div>
      </section>

      {/* ============== 3 Lodges Preview ============== */}
      <section id="lodges-preview" className="section" style={{ paddingTop: 0, paddingBottom: 0, background: 'var(--paper)' }}>
        <div className="shell" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, paddingTop: 'clamp(48px,6vw,80px)' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>— THE THREE HOUSES</div>
            <h2 className="h1" style={{ maxWidth: 580 }}>同一個品牌，<br />三種雪國日常。</h2>
          </div>
          <button className="btn" onClick={() => setPage('lodges')}>
            <BtnLabel>查看三館</BtnLabel><Arrow />
          </button>
        </div>
        <div className="lodges-preview">
          {[
            { zh: '苗場', en: 'NAEBA',  no: '01', img: PHOTO.naeba },
            { zh: '湯澤', en: 'YUZAWA', no: '02', img: PHOTO.yuzawa },
            { zh: '藏王', en: 'ZAO',    no: '03', img: PHOTO.zao },
          ].map(l => (
            <div key={l.en} className="lodge-card" onClick={() => setPage('lodges')}>
              <div className="lodge-card__photo" style={{ backgroundImage: `url(${l.img})` }} />
              <div className="lodge-card__overlay" />
              <div className="lodge-card__content">
                <div className="lodge-card__index">{l.no} / 03 — NIIGATA · YAMAGATA</div>
                <div className="lodge-card__name-zh">{l.zh}</div>
                <div className="lodge-card__name-en">{l.en}</div>
                <div className="lodge-card__cta">了解此館 <Arrow /></div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============== Story ============== */}
      <section className="section" style={{ background: 'var(--snow)' }}>
        <div className="shell">
          <div className="story">
            <div className="story__text">
              <div className="eyebrow story__eyebrow">— EDITOR'S NOTE / 主理人手札</div>
              <p className="story__quote">
                我們不是在賣一趟滑雪行程。<br />
                我們是在重現那個瞬間 ——<br />
                當你在零下五度的晨光裡推開窗，<br />
                看見山稜還在睡，雪還在下，<br />
                而世界一時間，靜得剛好。
              </p>
              <div className="story__byline">— HARUTO · FOUNDER</div>
            </div>
            <div className="story__photo" style={{ backgroundImage: `url(${PHOTO.story})` }} />
          </div>
        </div>
      </section>

      {/* ============== IG Feed ============== */}
      <section className="section" style={{ background: 'var(--paper)', paddingTop: 'clamp(56px,7vw,100px)', paddingBottom: 'clamp(56px,7vw,100px)' }}>
        <div className="shell">
          <div className="ig-band__head">
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>— FROM THE FEED</div>
              <h2>跟著我們的日常，感受雪國四季</h2>
            </div>
            <div className="ig-band__handle">@yukisaki.snow_japan</div>
          </div>
          <div className="ig-band__grid">
            {[PHOTO.ig_1, PHOTO.ig_2, PHOTO.ig_3, PHOTO.ig_4, PHOTO.ig_5, PHOTO.ig_6].map((src, i) => (
              <div key={i} className="ig-tile" style={{ backgroundImage: `url(${src})` }} />
            ))}
          </div>
        </div>
      </section>

      {/* ============== Final CTA ============== */}
      <section className="cta-band">
        <div className="cta-band__inner">
          <div className="eyebrow" style={{ color: 'var(--silver)', marginBottom: 28 }}>— READY WHEN YOU ARE</div>
          <h2>準備好出發了嗎？</h2>
          <p>填寫詢問單，由華語管家於兩個工作天內回覆。<br />我們會根據你的人數、預計入住期、滑雪程度，量身規劃。</p>
          <div className="cta-band__buttons">
            <button className="btn btn--light" onClick={() => setPage('lodges')}>
              <BtnLabel>查看三館</BtnLabel><Arrow />
            </button>
            <button className="btn btn--light" onClick={() => setPage('contact')}>
              <BtnLabel>立即詢問</BtnLabel><Arrow />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.PageHome = PageHome;