const { Section, SectionHeading, DisplayText, Button, TextLink, Photo, NewsList, Arrow } = window.InawashiroSnowResortDesignSystem_50a70a;
const IMG = '../../assets/photos/hero-lake-skier.png';

const P = '../../assets/photos/';
const NEWS_IMG = P + 'zekkei/zekkei-08.jpg';
const ABOUT_IMG = P + 'listel/listel-ski.jpg';
const SNS_PHOTOS = {
  zekkei: ['zekkei/zekkei-05.jpg', 'zekkei/zekkei-07.jpg', 'zekkei/zekkei-10.jpg', 'zekkei/zekkei-06.jpg'],
  numajiri: ['numajiri/numajiri-kicker.jpg', 'numajiri/numajiri-quad.jpg', 'numajiri/numajiri-course.jpg'],
  listel: ['listel/listel-view.jpg', 'listel/listel-slope.jpg', 'listel/listel-course.jpg', 'listel/listel-ski.jpg', 'listel/listel-resort.jpg'],
};

const MAP_IMG = '../../assets/photos/map-panorama.png';
// 位置は画像基準の % 座標（仮配置）。x=左端からの割合, y=上端からの割合
const RESORTS = [
  { id: 'zekkei', name: '絶景・猪苗代スキー場', x: 74, y: 43 },
  { id: 'minowa', name: 'イナワシロ箕輪スキー場', x: 13, y: 40 },
  { id: 'numajiri', name: '沼尻スキー場', x: 82, y: 29 },
  { id: 'listel', name: 'ホテルリステル猪苗代・リステルスキーファンタジア', x: 71, y: 58 },
];

function TopNews() {
  return (
    <section id="news" className="tp-news" data-screen-label="News">
      <div className="tp-news__media" aria-hidden="true"><img src={NEWS_IMG} alt="" /></div>
      <div className="tp-news__head">
        <div className="tp-news__eyebrow"><span className="t-num">01</span><i></i><span>Latest</span></div>
        <h2 className="tp-news__title isr-display">News</h2>
        <p className="tp-news__jp">お知らせ</p>
        <p className="tp-news__en">Latest updates<br />from Inawashiro<br />Snow Resort.</p>
        <p className="tp-news__lead">猪苗代のスノーリゾートに関する<br />最新情報をお届けします。</p>
        <a className="tp-news__all" href="#"><span className="tp-news__circ"><Arrow size="sm" /></span><span>View All News</span><i></i></a>
      </div>
      <div className="tp-news__list">
        <NewsList items={[
          { date: '2026.12.18', category: 'Information', title: '全スキー場オープンのお知らせ', isNew: true },
          { date: '2026.12.10', category: 'Event', title: 'ナイター営業スタート — 湖畔の夜景を望むナイトセッション' },
          { date: '2026.12.01', category: 'Operation', title: 'リフト運行状況・積雪情報の更新について', muted: true },
          { date: '2026.11.24', category: 'Ticket', title: 'シーズン券 早割販売のご案内' }]} />
      </div>
    </section>
  );
}

function TopMap({ index = '02' } = {}) {
  const [act, setAct] = React.useState(null);
  const [inView, setInView] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || !('IntersectionObserver' in window)) { setInView(true); return; }
    const io = new IntersectionObserver(([en]) => { if (en.isIntersecting) { setInView(true); io.disconnect(); } }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  React.useEffect(() => {
    if (!act) return;
    const off = e => { if (!e.target.closest('.tp-mk')) setAct(null); };
    document.addEventListener('pointerdown', off);
    return () => document.removeEventListener('pointerdown', off);
  }, [act]);
  return (
    <section id="map" className="tp-map" data-screen-label="Map">
      <div className="isr-container isr-container--wide tp-map__head">
        <SectionHeading index={index} eyebrow="Snow Resort Map" title="Four Slopes, One Lake" jp="湖を囲む、4つのゲレンデ" />
      </div>
      <div ref={ref} className={'tp-map__stage' + (inView ? ' is-in' : '')}>
        <img className="tp-map__bg" src={MAP_IMG} alt="猪苗代湖と周辺の雪山を望むパノラマ" width="1671" height="941" />
        {RESORTS.map((r, i) => (
          <button key={r.id} type="button"
            className={'tp-mk' + (act === r.id ? ' is-on' : '') + (r.x > 70 ? ' tp-mk--r' : r.x < 20 ? ' tp-mk--l' : '')}
            style={{ left: r.x + '%', top: r.y + '%', '--i': i }}
            aria-label={r.name} aria-pressed={act === r.id}
            onClick={() => setAct(a => a === r.id ? null : r.id)}>
            <span className="tp-mk__pulse" aria-hidden="true"></span>
            <span className="tp-mk__ring" aria-hidden="true"></span>
            <span className="tp-mk__dot" aria-hidden="true"></span>
            <span className="tp-mk__label">{r.name}</span>
          </button>
        ))}
      </div>
    </section>
  );
}

function TopAbout({ index = '03' } = {}) {
  return (
    <section id="about" className="tp-ab" data-screen-label="About">
      <div className="tp-ab__stage">
        <img className="tp-ab__img" src={ABOUT_IMG} alt="リステルスキーファンタジアのゲレンデ" />
        <div className="tp-ab__veil" aria-hidden="true"></div>
        <p className="tp-ab__ko isr-display" style={{ backgroundImage: 'url(' + ABOUT_IMG + ')' }} aria-label="About Inawashiro">
          <span>About</span><span>Inawashiro.</span>
        </p>
        <div className="tp-ab__meta"><span className="t-num">{index}</span><i></i><span>About</span></div>
        <div className="tp-ab__place"><i></i><span>Inawashiro</span></div>
      </div>
      <div className="tp-ab__panel">
        <p className="tp-ab__lead">磐梯山の麓、日本で4番目に大きな湖・猪苗代湖。<br />雪面の白と湖の青が、そのままコースの景色になる。</p>
        <p className="tp-ab__body">東京から約3時間。パウダー、ロングクルーズ、ナイター。滑ったあとは温泉と会津の食。冬の猪苗代は、滑ることを中心に一日が組み立てられる場所です。</p>
        <TextLink variant="arrow">More About Inawashiro</TextLink>
      </div>
    </section>
  );
}

const FS_ITEMS = [
  { id: 'eat', en: 'Food', jp: '会津の味を楽しむ', text: ['地元の食材を使った郷土料理や、会津の地酒を味わう。', '滑ったあとの食事が、旅の楽しさをさらに深めてくれます。'], link: '食事の情報を見る',
    slides: [{ src: '../../assets/photos/food/food-soba.jpg', alt: 'ざるそばと会津の郷土料理' }, { ph: '郷土料理' }, { ph: '地酒' }, { ph: '店内' }] },
  { id: 'stay', en: 'Stay', jp: 'くつろぐ宿', text: ['ゲレンデの近くに泊まり、雪あそびの余韻をそのままに。', '温泉で温まり、猪苗代の冬をゆっくり楽しむ。'], link: '宿の情報を見る',
    slides: [{ src: '../../assets/photos/stay-hotel.jpg', alt: '雪山とゲレンデ前のホテル' }, { ph: '客室' }, { ph: '温泉' }, { ph: '外観' }] },
];
function FsPanel({ it }) {
  const [cur, setCur] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = it.slides.length;
  React.useEffect(() => {
    if (paused || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const t = setInterval(() => setCur(c => (c + 1) % n), 5000);
    return () => clearInterval(t);
  }, [paused, n]);
  return (
    <div className={'tp-fs__panel tp-fs__panel--' + it.id} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="tp-fs__slides" aria-hidden="true">
        {it.slides.map((sl, i) => (
          <div key={i} className={'tp-fs__slide' + (i === cur ? ' is-on' : '')}>
            {sl.src ? <img src={sl.src} alt="" /> : <div className="tp-fs__ph"><span>{it.en.toUpperCase()} — {sl.ph}</span></div>}
          </div>
        ))}
      </div>
      <div className="tp-fs__pbody">
        <span className="tp-fs__en">{it.en}</span>
        <h3 className="tp-fs__jp">{it.jp}</h3>
        <p className="tp-fs__text">{it.text.map((t, i) => <React.Fragment key={i}>{t}{i < it.text.length - 1 && <br />}</React.Fragment>)}</p>
        <a className="tp-fs__btn" href="#"><span>{it.link}</span><span className="isr-arrow isr-arrow--sm" /></a>
      </div>
      <div className="tp-fs__thumbs">
        {it.slides.map((sl, i) => (
          <button key={i} type="button" className={'tp-fs__thumb' + (i === cur ? ' is-on' : '')} aria-label={(sl.alt || sl.ph) + 'を表示'} aria-pressed={i === cur} onClick={() => setCur(i)}>
            {sl.src ? <img src={sl.src} alt="" /> : <span className="tp-fs__ph tp-fs__ph--sm"></span>}
          </button>
        ))}
      </div>
    </div>
  );
}
function TopStayEat({ index = '04' } = {}) {
  return (
    <section id="stay" className="tp-fs" data-screen-label="Food & Stay">
      <div className="tp-fs__head">
        <div className="tp-fs__headin">
          <div className="tp-fs__meta"><span className="t-num">{index}</span><i></i><span>Food &amp; Stay</span></div>
        </div>
      </div>
      <div className="tp-fs__panels">
        {FS_ITEMS.map(it => <FsPanel key={it.id} it={it} />)}
      </div>
    </section>
  );
}

const SNS_SHORT = { listel: 'ホテルリステル猪苗代' };
const SNS_LAYOUT = { zekkei: ['big', 'sq', 'sq', 'wide'] };
function TopSNS({ index = '05' } = {}) {
  return (
    <section id="sns" className="tp-sns" data-screen-label="Social">
      <div className="tp-sns__head">
        <div className="tp-fs__meta tp-sns__meta"><span className="t-num">{index}</span><i></i><span>Social</span></div>
        <div className="tp-sns__row">
          <h2 className="tp-sns__h">#InawashiroSnow</h2>
          <p className="tp-sns__desc">4つのゲレンデから届く、今日の猪苗代。</p>
          <a className="tp-sns__follow" href="#" target="_blank" rel="noopener"><span>Follow on Instagram</span><Arrow size="sm" /></a>
        </div>
      </div>
      <ul className="tp-sns__cols">
        {RESORTS.map(r => {
          const lay = SNS_LAYOUT[r.id] || ['big', 'sq', 'sq', 'sq', 'sq'];
          return (
            <li key={r.id} className="tp-sns__col">
              <div className="tp-sns__acct">
                <span className="tp-sns__ig" aria-hidden="true"></span>
                <span><span className="tp-sns__name">{r.name}</span><span className="tp-sns__plat">Instagram</span></span>
              </div>
              <div className="tp-sns__grid">
                {lay.map((k, i) => <a key={i} href="#" target="_blank" rel="noopener" className={'tp-sns__post tp-sns__post--' + k} aria-label={r.name + ' の投稿 ' + (i + 1)}><span className="tp-sns__ph" style={(SNS_PHOTOS[r.id] || [])[i] ? { backgroundImage: 'url(' + P + SNS_PHOTOS[r.id][i] + ')', backgroundSize: 'cover', backgroundPosition: 'center' } : undefined}></span></a>)}
              </div>
              <a className="tp-sns__more" href="#" target="_blank" rel="noopener"><span>{(SNS_SHORT[r.id] || r.name)}の投稿を見る</span><Arrow size="sm" /></a>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

function TopAccess({ index = '06' } = {}) {
  const rows = [
    ['By Train', '電車', '東京駅 → 郡山駅（東北新幹線 約80分）→ 猪苗代駅（磐越西線 約40分）'],
    ['By Car', '車', '磐越自動車道 猪苗代磐梯高原IC から各スキー場へ 約10〜20分'],
    ['By Bus', 'バス', '猪苗代駅から各スキー場へシャトルバス運行（冬季）'],
  ];
  return (
    <Section id="access">
      <div className="tp-access">
        <div>
          <SectionHeading index={index} eyebrow="Access" title="Access To Inawashiro" jp="猪苗代へアクセス" />
          <ul className="tp-access__list">
            {rows.map(([en, jp, d]) => (
              <li key={en}><div><div className="t-label">{en}</div><div className="t-small" style={{ color: 'var(--color-ink-muted)' }}>{jp}</div></div><p className="t-body">{d}</p></li>
            ))}
          </ul>
          <div className="pg-flex" style={{ marginTop: 'var(--space-7)' }}><Button variant="solid">Access Details</Button><TextLink external>Google Maps</TextLink></div>
        </div>
        <Photo ratio="4/5" zoom={false} placeholder="ACCESS MAP — 東京 → 郡山 → 猪苗代" />
      </div>
    </Section>
  );
}

Object.assign(window, { TopNews, TopMap, TopAbout, TopStayEat, TopSNS, TopAccess });