// P3 — Lodges (3-house tab carousel)

const LODGES = [
  {
    key: 'naeba',
    zh: '苗場',
    en: 'NAEBA',
    region: 'NIIGATA · MITSUMATA',
    img: 'https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?w=2000&q=85',
    sub: '家庭優先，緩坡寬闊，雪季最早開放。',
    tags: [{label: '親子友善', icon: 'Kid'}, {label: '室內溫泉', icon: 'Onsen'}, {label: '初學緩坡', icon: 'Slope'}],
    paras: [
      '位於新潟苗場山下，這裡是 Yukisaki 的概念主館，也是我們收藏最完整的家庭旅宿。以家庭入住情境設計，配備兒童專用滑雪課程教室與室內溫泉。',
      '苗場是日本最早開放的雪場之一，每年十一月底就能下第一場雪。從東京搭新幹線到越後湯澤站，再轉接駁巴士約 40 分鐘可達。',
    ],
    facilities: [
      { icon: 'Bed',   t: '親子房型設定',        d: '以家庭入住情境設計（28-room concept）' },
      { icon: 'Onsen', t: '半露天溫泉',          d: '雪見湯，男女別池' },
      { icon: 'Lesson',t: '兒童滑雪教室',         d: '4 歲以上專用課程' },
      { icon: 'Dining',t: '在地料理晚餐',         d: '新潟越光米、地酒、雪國蔬食' },
      { icon: 'Shuttle',t:'越後湯澤站接駁',      d: '每日 4 班，不需預約' },
      { icon: 'Wifi',  t: '全館高速 Wi-Fi',      d: '含工作區、會議空間' },
    ],
    map: 'https://maps.google.com/maps?q=苗場スキー場&output=embed',
  },
  {
    key: 'yuzawa',
    zh: '湯澤',
    en: 'YUZAWA',
    region: 'NIIGATA · ECHIGO',
    img: 'images/yuzawa.jpg',
    sub: '都會直達，新幹線下車即抵，最便利的雪國基地。',
    tags: [{label: '新幹線可達', icon: 'Shuttle'}, {label: '溫泉街', icon: 'Onsen'}, {label: '便利機能', icon: 'Compass'}],
    paras: [
      '越後湯澤是雪國最便利的入口：從東京車站搭乘新幹線 75 分鐘即達，下車後步行 8 分鐘即可抵達 Yukisaki Yuzawa。以交通便利情境設計，適合短天數旅行。',
      '館內設計受到川端康成《雪國》的啟發，深色木構造與大面落地窗，讓室內外的雪景連成一片。一樓是 24 小時溫泉與圖書室，二樓以上為客房與廚房。',
    ],
    facilities: [
      { icon: 'Bed',   t: '短天數旅行設定',        d: '雙人房、家庭房（18-room concept）' },
      { icon: 'Onsen', t: '24 小時源泉溫泉',      d: '弱鹼性碳酸氫鹽泉' },
      { icon: 'Slope', t: '湯澤高原可步行',       d: '車站前 8 分鐘即達' },
      { icon: 'Dining',t: '在地小料理',          d: '越後地酒搭配晚餐' },
      { icon: 'Shuttle',t:'新幹線車站接送',      d: '提前 24 小時預約' },
      { icon: 'Gear',  t: '雪具租借',            d: '館內直接租，免外出' },
    ],
    map: 'https://maps.google.com/maps?q=湯沢高原スキー場&output=embed',
  },
  {
    key: 'zao',
    zh: '藏王',
    en: 'ZAO',
    region: 'YAMAGATA · ZAO ONSEN',
    img: 'images/zao.jpg',
    sub: '樹冰、星空、深夜溫泉，最詩意的一館。',
    tags: [{label: '樹冰絕景', icon: 'Snow'}, {label: '深夜溫泉', icon: 'Onsen'}, {label: '攝影愛好者', icon: 'Lantern'}],
    paras: [
      '藏王坐落於山形縣的藏王溫泉區，是日本三大樹冰名所之一。每年一月到二月，山頂的針葉樹會被凍結成奇幻的「樹冰怪」，搭配纜車登頂與夜間點燈，是雪國最詩意的景觀。',
      '以二人旅行與攝影情境設計，走「靜謐與獨處」的路線。刻意限制為小館規模（12-room concept），沒有兒童專屬設施，主要服務攝影愛好者、二人小旅行與寫作者。深夜的露天溫泉、星空、雪音，是這一館的價值。',
    ],
    facilities: [
      { icon: 'Bed',   t: '靜謐小館設定',        d: '一律雙人或單人（12-room concept）' },
      { icon: 'Onsen', t: '露天溫泉 · 24h',      d: '強酸性硫磺泉' },
      { icon: 'Snow',  t: '樹冰纜車預約',        d: '1–2 月，含華語導覽' },
      { icon: 'Dining',t: '主廚晚餐',            d: '山形牛、藏王米' },
      { icon: 'Gear',  t: '攝影器材租借',        d: '腳架、雪地專用機身保溫罩' },
      { icon: 'Safe',  t: '雪季安全管家',        d: '24h 待命' },
    ],
    map: 'https://maps.google.com/maps?q=蔵王温泉スキー場&output=embed',
  },
];

function PageLodges({ setPage }) {
  const [active, setActive] = React.useState(0);
  const lodge = LODGES[active];
  const next = (active + 1) % 3;
  const prev = (active + 2) % 3;

  const cycle = (dir) => setActive((active + dir + 3) % 3);

  return (
    <main key="lodges">
      <section className="page-header" style={{ height: '50vh', minHeight: 400 }} data-screen-label="03 三館旅宿">
        <div className="page-header__photo" style={{ backgroundImage: `url(${PHOTO.lodges_hero})` }} />
        <div className="page-header__content">
          <div className="page-header__crumb enter-up">— THE THREE HOUSES / 03</div>
          <h1 className="page-header__title enter-up d-100">探索苗場、湯澤、藏王。</h1>
        </div>
      </section>

      {/* Tabs */}
      <section className="section section--tight" style={{ paddingBottom: 40 }}>
        <div className="lodge-tabs">
          {LODGES.map((l, i) => (
            <button
              key={l.key}
              className={`lodge-tab ${active === i ? 'lodge-tab--active' : ''}`}
              onClick={() => setActive(i)}
            >
              {l.zh}<span className="lodge-tab__en">{l.en}</span>
            </button>
          ))}
        </div>

        {/* Stage — 3-card layered carousel */}
        <div className="shell">
          <div className="lodge-stage">
            <button className="lodge-chevron lodge-chevron--prev" onClick={() => cycle(-1)} aria-label="Previous">‹</button>

            {LODGES.map((l, i) => {
              const pos = (i - active + 3) % 3; // 0=center, 1=next, 2=prev
              const cls = pos === 0 ? 'center' : pos === 1 ? 'next' : 'prev';
              return (
                <div
                  key={l.key}
                  className={`lodge-stage__card lodge-stage__card--${cls}`}
                  style={{ backgroundImage: `url(${l.img})` }}
                  onClick={() => { if (cls !== 'center') setActive(i); }}
                >
                  <div className="overlay" />
                  {cls === 'center' ? (
                    <div className="lodge-stage__info">
                      <div>
                        <div className="lodge-stage__region">{l.region}</div>
                        <div className="lodge-stage__name-zh">{l.zh}</div>
                        <div className="lodge-stage__name-en">YUKISAKI {l.en}</div>
                        <div className="lodge-stage__sub">{l.sub}</div>
                        <div className="lodge-stage__tags">
                          {l.tags.map(t => {
                            const IconEl = Icon[t.icon];
                            return (
                              <span key={t.label} className="lodge-stage__tag">
                                {IconEl && <IconEl size={16} />}<span>{t.label}</span>
                              </span>
                            );
                          })}
                        </div>
                      </div>
                      <div className="lodge-stage__cta">
                        <button className="btn btn--light" onClick={(e) => { e.stopPropagation(); setPage('contact'); }}>
                          <BtnLabel>立即詢問</BtnLabel><Arrow />
                        </button>
                      </div>
                    </div>
                  ) : (
                    <div className="lodge-stage__sidelabel">{l.zh}</div>
                  )}
                </div>
              );
            })}

            <button className="lodge-chevron lodge-chevron--next" onClick={() => cycle(1)} aria-label="Next">›</button>
          </div>
          <div className="dots">
            {LODGES.map((_, i) => (
              <button key={i} className={`dot ${active === i ? 'dot--active' : ''}`} onClick={() => setActive(i)} />
            ))}
          </div>
        </div>
      </section>

      {/* Detail (changes with tab) */}
      <section className="lodge-detail" key={lodge.key + '-detail'}>
        <div className="lodge-detail__left enter-up">
          <div className="eyebrow" style={{ marginBottom: 28 }}>— {lodge.en} / 館別介紹</div>
          <h3>{lodge.zh}的<br />一日從這裡開始。</h3>
          {lodge.paras.map((p, i) => <p key={i}>{p}</p>)}

          <div className="eyebrow" style={{ marginTop: 40, marginBottom: 28 }}>— 設施亮點</div>
          <ul className="lodge-detail__facilities">
            {lodge.facilities.map((f, i) => {
              const IconEl = Icon[f.icon];
              return (
                <li key={i} className="facility">
                  <div className="facility__icon">{IconEl && <IconEl size={22} />}</div>
                  <div className="facility__text">
                    <strong>{f.t}</strong><span>{f.d}</span>
                  </div>
                </li>
              );
            })}
          </ul>

          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="btn" onClick={() => setPage('services')}>
              <BtnLabel>了解服務</BtnLabel><Arrow />
            </button>
            <button className="btn" onClick={() => setPage('contact')}>
              <BtnLabel>立即詢問</BtnLabel><Arrow />
            </button>
          </div>
        </div>
        <div className="lodge-detail__map enter d-200">
          <iframe src={lodge.map} loading="lazy" title={`${lodge.zh} map`} />
        </div>
      </section>
    </main>
  );
}

window.PageLodges = PageLodges;