/* ==========================================================================
   MY MONSTERS — shop.jsx (Phase 4-B)
   /shop page: hero → 3-channel grid → FAQ → footer
   ========================================================================== */

const { useState: _useShopS } = React;

function ShopHero() {
  return (
    <section className="shop-hero" data-screen-label="SHOP-01 Hero">
      <div className="shop-hero__inner">
        <p className="shop-hero__eyebrow">
          <span className="shop-hero__tick"></span>
          <span>WHERE TO BUY · 09</span>
          <span className="shop-hero__tick"></span>
        </p>
        <h1 className="shop-hero__title">購入チャネルから、<br/>モンスターを呼べ。</h1>
      </div>
    </section>
  );
}

function ShopChannels() {
  const channels = [
    {
      brand: 'RAKUTEN',
      brandJp: '楽天市場',
      channel: 'rakuten',
      pitch: 'ポイントが貯まる、楽天ユーザーへ。',
      soonMeta: '6月中公開予定',
      perks: ['楽天ポイント還元', '楽天スーパーセール対応', 'お買い物マラソン参加可'],
      cta: '6月中公開予定',
      href: '#',
      live: false
    },
    {
      brand: 'AMAZON',
      brandJp: 'Amazon.co.jp',
      channel: 'amazon',
      pitch: '翌日配送、Prime対応。',
      trophy: true,
      perks: ['Prime会員 送料無料', '定期おトク便対応', 'Amazon NO.1 受賞商品（A.S.E活）'],
      cta: 'Amazonで購入する',
      href: 'https://amzn.asia/d/08kIElEd',
      live: true
    },
    {
      brand: 'MY MONSTERS',
      brandJp: '自社EC（準備中）',
      pitch: 'COMING SOON.',
      soonMeta: '2026 年内ローンチ予定',
      perks: ['限定パッケージ先行販売', 'モンスターランド会員特典', '直送オリジナル定期便'],
      cta: 'COMING SOON',
      href: '#',
      live: false
    }
  ];
  return (
    <section className="shop-channels" data-screen-label="SHOP-02 Channels">
      <div className="shop-channels__inner">
        {channels.map((c, i) => (
          <a
            key={i}
            href={c.href}
            className={`shop-ch ${!c.live ? 'is-soon' : ''}`}
            onClick={(e) => { if (!c.live) e.preventDefault(); }}
            target={c.live ? '_blank' : undefined}
            rel={c.live ? 'noopener noreferrer' : undefined}
          >
            <div className="shop-ch__top">
              <span className="shop-ch__brand">{c.brand}</span>
              <span className="shop-ch__brand-jp">{c.brandJp}</span>
            </div>
            <div className="shop-ch__body">
              <p className={`shop-ch__pitch ${c.trophy ? 'shop-ch__pitch--trophy' : ''}`}>{c.pitch}</p>
              {c.soonMeta && <span className="shop-ch__soon-meta">{c.soonMeta}</span>}
              <ul className="shop-ch__perks" style={{listStyle:'none', padding:0, margin:'8px 0 0'}}>
                {c.perks.map((p, j) => <li key={j} className="shop-ch__perk">{p}</li>)}
              </ul>
            </div>
            <span className={`shop-ch__btn ${!c.live ? 'is-disabled' : ''} ${c.channel ? 'shop-ch__btn--' + c.channel : ''}`}>
              <span>{c.cta}</span>
              {c.live && <span className="shop-ch__arr">→</span>}
            </span>
          </a>
        ))}
      </div>
    </section>
  );
}

function ShopFaq() {
  const items = window.MM_SHOP_FAQ;
  const [open, setOpen] = _useShopS(0);
  return (
    <section className="pd-faq" data-screen-label="SHOP-03 FAQ">
      <div className="pd-faq__inner">
        <div className="pd-faq__head">
          <p className="pd-faq__eyebrow">— FREQUENTLY ASKED QUESTIONS</p>
          <h2 className="pd-faq__title">気になる、購入のこと。</h2>
        </div>
        <ul className="pd-faq__list" style={{listStyle:'none', padding:0, margin:0}}>
          {items.map((it, i) => (
            <li key={i} className={`pd-faq__item ${open === i ? 'is-open' : ''}`}>
              <button className="pd-faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="pd-faq__q-no">Q{i+1}.</span>
                <span className="pd-faq__q-tx">{it.q}</span>
                <span className="pd-faq__q-icon" aria-hidden="true"></span>
              </button>
              <div className="pd-faq__a">
                <p className="pd-faq__a-tx">{it.a}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function ShopBackLink() {
  return (
    <nav className="pd-back" aria-label="Back to land">
      <a className="pd-back__link" href="index.html">
        <span className="pd-back__arr">←</span>
        <span>BACK TO MONSTERLAND</span>
      </a>
    </nav>
  );
}

function ShopPage() {
  const openShop = () => { /* already here */ };
  // Fixed namiki (tree-lined avenue) backdrop — same behavior as the homepage
  // land-tour: a position:fixed image that only shows while the WHERE TO BUY
  // range (back link → hero → channels) is on screen. IntersectionObserver
  // toggles .is-active; outside the range the backdrop fades to opacity:0.
  React.useEffect(() => {
    const range = document.querySelector('.shop-landtour');
    const bg = document.querySelector('.shop-landtour__bg');
    if (!range || !bg) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const r = range.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      // Active while any part of the WHERE TO BUY range is within the viewport;
      // hidden once it has fully scrolled past (FAQ / footer below).
      const active = r.top < vh && r.bottom > 0;
      bg.classList.toggle('is-hidden', !active);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    // IntersectionObserver as an enhancement (silent in some iframes, so the
    // scroll listener above is the real driver).
    let io;
    try {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => bg.classList.toggle('is-hidden', !e.isIntersecting));
      }, { threshold: 0 });
      io.observe(range);
    } catch (err) {}
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
      if (io) io.disconnect();
    };
  }, []);
  return (
    <div className="mm-site">
      <FloatingNav onShop={openShop} />
      <div className="shop-landtour">
        <img className="shop-landtour__bg" src="assets/shop-tokyo-bg.png" alt="" aria-hidden="true" />
        <ShopBackLink />
        <ShopHero />
        <ShopChannels />
      </div>
      <ShopFaq />
      <Footer />
      <YakujihouFlag />
    </div>
  );
}

Object.assign(window, { ShopPage, ShopBackLink, ShopHero, ShopChannels, ShopFaq });