// pages-shop.jsx — Home, Product detail, Purchase complete
const { Icon, Logo, MediaPH, PRODUCTS, CATEGORIES } = window.LCS;

// ─────────────────────────────────────────────────────────────
// Carousel — 16:9 main image with side arrows, plus a thumbnail
// strip below flanked by left/right buttons.
// ─────────────────────────────────────────────────────────────
const Carousel = ({ slides, autoplay = false, interval = 6500, thumbVisible = 3 }) => {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = slides.length;

  React.useEffect(() => {
    if (!autoplay || paused || n <= 1) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % n), interval);
    return () => clearInterval(t);
  }, [autoplay, paused, n, interval]);

  const goTo = (i) => setIdx(((i % n) + n) % n);
  const s = slides[idx];

  // 表示ウィンドウ: 現在スライドが中央付近に来るよう winStart を算出
  const visCount = Math.min(thumbVisible, n);
  const half = Math.floor(visCount / 2);
  const winStart = Math.max(0, Math.min(idx - half, n - visCount));
  const visibleThumbs = slides.slice(winStart, winStart + visCount);

  return (
    <div className="carousel"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}>
      <div className="carousel__main">
        <MediaPH label={s.label} />
      </div>
      {n > 1 &&
        <div className="carousel__strip">
          <button className="carousel__strip-nav" onClick={() => goTo(idx - 1)} aria-label="前のサムネイル">
            <Icon name="chev-l" size={16} />
          </button>
          <div className="carousel__thumbs" style={{ gridTemplateColumns: `repeat(${visCount}, minmax(0, 1fr))` }}>
            {visibleThumbs.map((t, i) => {
              const actualIdx = winStart + i;
              return (
                <button key={actualIdx}
                  className={"carousel__thumb" + (actualIdx === idx ? " active" : "")}
                  onClick={() => setIdx(actualIdx)}
                  aria-label={`slide ${actualIdx + 1}`}>
                  <MediaPH label={t.thumb || t.label} />
                </button>
              );
            })}
          </div>
          <button className="carousel__strip-nav" onClick={() => goTo(idx + 1)} aria-label="次のサムネイル">
            <Icon name="chev-r" size={16} />
          </button>
        </div>
      }
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Shared: product card (16:9 media)
// ─────────────────────────────────────────────────────────────
const ProductCard = ({ p, go }) =>
<a className="product-card" onClick={() => go("product", p.id)} style={{ cursor: "pointer" }}>
    <div className="product-card__media">
      <MediaPH label={p.images[0].label} />
      {p.badge?.label && (
        <span className="badge" style={{ position: "absolute", top: 12, left: 12, background: p.badge.bg, color: p.badge.color, borderColor: "transparent" }}>{p.badge.label}</span>
      )}
    </div>
    <div className="product-card__body">
      <div style={{ fontSize: 11, fontWeight: 700, color: "var(--c-ink-3)", letterSpacing: "0.16em" }}>{p.en.toUpperCase()}</div>
      <div className="product-card__title">{p.name}</div>
      <div className="product-card__meta">
        <div className="product-card__price">¥{p.price.toLocaleString()}<small> 税込</small></div>
        {p.tags[0] && (
          <span className="badge" style={{ background: p.tags[0].bg, color: p.tags[0].color, borderColor: "transparent" }}>{p.tags[0].label}</span>
        )}
      </div>
    </div>
  </a>;


// ─────────────────────────────────────────────────────────────
// HERO — image-only 16:9 carousel (no overlay text or UI)
// ─────────────────────────────────────────────────────────────
const HERO_SLIDES = [
  { label: "HERO 01 — 16:9 画像を埋め込んでください", thumb: "HERO 01" },
  { label: "HERO 02 — 16:9 画像を埋め込んでください", thumb: "HERO 02" },
  { label: "HERO 03 — 16:9 画像を埋め込んでください", thumb: "HERO 03" },
  { label: "HERO 04 — 16:9 画像を埋め込んでください", thumb: "HERO 04" },
];

const Hero = () =>
  <section className="hero-carousel">
    <Carousel slides={HERO_SLIDES} autoplay />
  </section>;

// ─────────────────────────────────────────────────────────────
// HOME — FAQ teaser items (matched to FAQ page answers)
// ─────────────────────────────────────────────────────────────
const HOME_FAQ_ITEMS = [
  {
    q: "注文してから手元に届くまで、どれくらいかかりますか？",
    a: "通常、ご注文から 7〜14 営業日以内を目安に発送いたします。受注生産のため、ご注文状況や生産状況により発送時期が前後する場合があります。",
  },
  {
    q: "キャンセルや返品はできますか？",
    a: "受注生産のため、ご注文完了（決済完了）後のキャンセルおよびお客様都合による返品はお受けしておりません。商品に破損や不良があった場合は、商品到着後 7 日以内にお問い合わせください。",
  },
  {
    q: "海外への発送はしていますか？",
    a: "現在は日本国内への配送のみ対応しています。予めご了承ください。",
  },
  {
    q: "支払い方法を教えてください。",
    a: "クレジットカード（Stripe 決済）がご利用いただけます。分割払いの可否はご利用のクレジットカード会社の設定によって異なります。",
  },
];

const FaqTeaserList = () => {
  const [open, setOpen] = React.useState({});
  return (
    <ul>
      {HOME_FAQ_ITEMS.map((it, i) => {
        const num = String(i + 1).padStart(2, "0");
        const isOpen = !!open[i];
        return (
          <li key={i} className={"faq-teaser__item" + (isOpen ? " open" : "")}>
            <button className="faq-teaser__q" onClick={() => setOpen({ ...open, [i]: !isOpen })} aria-expanded={isOpen}>
              <b>{num}</b>
              <span>{it.q}</span>
              <span className="faq-teaser__chev"><Icon name="chev" size={16} /></span>
            </button>
            {isOpen && <div className="faq-teaser__a">{it.a}</div>}
          </li>
        );
      })}
    </ul>
  );
};

const HomePage = ({ go }) =>
<main className="page" data-screen-label="01 Top">
    <div className="shell">
      {/* HERO CAROUSEL — image only */}
      <Hero />

      {/* FEATURED */}
      <section className="section">
        <div className="section__head">
          <div>
            <span className="section__title-en">PRODUCTS</span>
            <h2 className="section__title">商品一覧</h2>
          </div>
          <a className="section__more" onClick={() => go("shop")}>すべて見る <Icon name="chev-r" size={14} /></a>
        </div>
        <div className="product-grid">
          {PRODUCTS.map((p) => <ProductCard key={p.id} p={p} go={go} />)}
        </div>
      </section>

      {/* SHOP BLURB */}
      <section className="section">
        <div className="blurb">
          <div>
            <span className="section__title-en">ABOUT THE SHOP</span>
            <h2 className="blurb__title">社会貢献に繋がる、<br />ハンドメイド生産のカード。</h2>
            <p className="blurb__body">
              ローシスカードショップの製品づくりには、働きたくても機会に恵まれない方々の「輝ける場所」を創るという想いがあります。
            </p>
            <p className="blurb__body">
              現在は、ご縁のある身近な高齢者や障がいを持つ方々と共に、一つひとつ手作業で生産しています。
            </p>
            <p className="blurb__body">
              この活動の輪が広がることで、より多くの方が社会と繋がり、自分らしく楽しく働ける場を広げていきたいと考えています。
            </p>
          </div>
          <div className="blurb__panel">
            <div className="blurb__stat"><span className="blurb__stat-k">◆ これまでの作品数</span><span className="blurb__stat-v">6<small>タイトル</small></span></div>
            <div className="blurb__stat"><span className="blurb__stat-k">◆ 発送までの目安</span><span className="blurb__stat-v">7〜14<small>営業日</small></span></div>
            <div className="blurb__stat"><span className="blurb__stat-k">◆ 送料</span><span className="blurb__stat-v">商品価格に含む</span></div>
            <div className="blurb__stat"><span className="blurb__stat-k">◆ 決済</span><span className="blurb__stat-v">Stripe<small> 各種カード対応</small></span></div>
          </div>
          <div className="blurb__cta">
            <button className="btn" onClick={() => go("about")}>ショップについて <Icon name="arrow-r" size={14} /></button>
          </div>
        </div>
      </section>

      {/* FAQ TEASER */}
      <section className="section">
        <div className="faq-teaser">
          <div>
            <span className="section__title-en" style={{ color: "var(--c-main)" }}>FAQ</span>
            <h2 className="faq-teaser__title">よくある<em>質問</em></h2>
            <p style={{ color: "rgba(255,251,234,.7)", fontSize: 14, lineHeight: 1.7, maxWidth: 320 }}>
              ご注文の前に、よく聞かれる質問をまとめました。一覧は FAQ ページからもご覧いただけます。
            </p>
            <button className="btn btn--primary mt-16" onClick={() => go("faq")}>すべての FAQ を見る <Icon name="arrow-r" size={14} /></button>
          </div>
          <FaqTeaserList />
        </div>
      </section>
    </div>
  </main>;


// ─────────────────────────────────────────────────────────────
// PRODUCT DETAIL
// ─────────────────────────────────────────────────────────────
const ProductPage = ({ pid, go }) => {
  const p = PRODUCTS.find((x) => x.id === pid) || PRODUCTS[0];
  const [qty, setQty] = React.useState(1);
  const gallery = p.images;

  return (
    <main className="page" data-screen-label="02 Product">
      <div className="shell">
        <div className="crumb">
          <a onClick={() => go("home")}>ホーム</a>
          <span className="crumb__sep">/</span>
          <a onClick={() => go("shop")}>商品一覧</a>
          <span className="crumb__sep">/</span>
          <span className="crumb__cur">{p.name}</span>
        </div>

        <section className="pdp">
          {/* GALLERY */}
          <div className="pdp__gallery">
            <Carousel slides={gallery} thumbVisible={4} />

            {/* DESCRIPTION */}
            <div className="mt-32 desc-body">
              <h3>このゲームについて</h3>
              <p>{p.short}</p>
              <p>{p.desc}</p>
              <h3>遊び方の流れ</h3>
              <ul>
                {p.howToPlay.map((step, i) => <li key={i}>{step}</li>)}
              </ul>
              <h3>内容物</h3>
              <ul>
                {p.contents.map((item, i) => <li key={i}>{item}</li>)}
              </ul>
            </div>
          </div>

          {/* INFO */}
          <aside className="pdp__info">
            <div className="pdp__brand">LOWSYS CARD SHOP · {p.en.toUpperCase()}</div>
            <h1 className="pdp__title">{p.name}</h1>
            <div className="pdp__badges">
              {p.badge?.label && (
                <span className="badge" style={{ background: p.badge.bg, color: p.badge.color, borderColor: "transparent" }}>{p.badge.label}</span>
              )}
              {p.tags.map((t, i) => (
                <span key={i} className="badge" style={{ background: t.bg, color: t.color, borderColor: "transparent" }}>{t.label}</span>
              ))}
            </div>

            <div className="price-block">
              <div className="price-block__main">
                <div className="price-block__amount">¥{p.price.toLocaleString()}<small>JPY</small></div>
                <div className="price-block__tax">税込 / Tax incl.</div>
              </div>
              <div className="price-block__row"><span>送料</span><b>商品価格に含む</b></div>
              <div className="price-block__row"><span>発送目安</span><b>ご注文から 7〜14 営業日</b></div>
            </div>

            <div className="note">
              <div className="note__icon">!</div>
              <div>
                <b>受注生産のお品です</b>
                <ul style={{ margin: "6px 0 0", paddingLeft: 18, lineHeight: 1.8 }}>
                  <li>受注生産のため、発送までに 7〜14 営業日ほどお時間をいただきます。</li>
                  <li>ご注文完了（決済完了）後のキャンセルおよびお客様都合による返品はお受けしておりません。</li>
                  <li>商品に破損や不良があった場合は、商品到着後 7 日以内にお問い合わせください。</li>
                </ul>
              </div>
            </div>

            <div className="pdp__qty">
              <span style={{ fontSize: 13, fontWeight: 700 }}>数量</span>
              <div className="qty">
                <button onClick={() => setQty(Math.max(1, qty - 1))}><Icon name="minus" size={14} /></button>
                <input value={qty} onChange={(e) => setQty(Math.max(1, parseInt(e.target.value) || 1))} />
                <button onClick={() => setQty(qty + 1)}><Icon name="plus" size={14} /></button>
              </div>
              <span style={{ fontSize: 12, color: "var(--c-ink-3)", marginLeft: "auto" }}>在庫: 受注生産</span>
            </div>

            <button className="btn btn--accent btn--xl btn--block" onClick={() => go("complete")}>
              <Icon name="lock" size={18} /> Stripe で購入する　¥{(p.price * qty).toLocaleString()}
            </button>
            <div className="muted center" style={{ fontSize: 12, marginTop: 10 }}>
              決済は Stripe の安全なチェックアウト画面に遷移します
            </div>

            <div className="section__head" style={{ marginTop: 36, marginBottom: 12, paddingBottom: 8 }}>
              <h3 className="section__title" style={{ fontSize: 18 }}>商品仕様</h3>
            </div>
            <table className="spec-table">
              <tbody>
                <tr><th>プレイ人数</th><td>{p.spec.players}</td></tr>
                <tr><th>プレイ時間</th><td>{p.spec.time}</td></tr>
                <tr><th>対象年齢</th><td>{p.spec.age}</td></tr>
                <tr><th>カード枚数</th><td>{p.spec.count}</td></tr>
                <tr><th>カードサイズ</th><td>{p.spec.size}</td></tr>
                <tr><th>発売</th><td>{p.releaseDate}</td></tr>
              </tbody>
            </table>
          </aside>
        </section>

        {/* RELATED */}
        <section className="section">
          <div className="section__head">
            <h2 className="section__title">こちらもおすすめ</h2>
          </div>
          <div className="product-grid">
            {PRODUCTS.filter((x) => x.id !== p.id).slice(0, 4).map((x) => <ProductCard key={x.id} p={x} go={go} />)}
          </div>
        </section>
      </div>
    </main>);

};

// ─────────────────────────────────────────────────────────────
// PURCHASE COMPLETE
// ─────────────────────────────────────────────────────────────
const CompletePage = ({ go }) =>
<main className="page" data-screen-label="03 Complete">
    <div className="shell">
      <div className="complete">
        <div className="complete__seal">
          <Icon name="check" size={56} />
        </div>
        <div className="badge badge--soft" style={{ marginBottom: 14 }}>ORDER #LCS-2026-00482</div>
        <h1 className="complete__title">ご注文ありがとうございました。</h1>
        <p className="complete__sub">
          決済が完了しました。ご登録のメールアドレスに、Stripe から領収メールをお送りしています。<br />
          ご注文内容のご確認は、そちらのメールよりお願いいたします。
        </p>

        <div className="steps">
          <div className="step">
            <div className="step__num">1</div>
            <h3 className="step__title">レシートメールを確認</h3>
            <p className="step__body">Stripe より自動送信のメールが届きます。届かない場合は迷惑メールフォルダもご確認ください。</p>
          </div>
          <div className="step">
            <div className="step__num">2</div>
            <h3 className="step__title">発送までの期間</h3>
            <p className="step__body">受注生産のため、ご注文から発送まで 7〜14 営業日ほどお時間をいただきます。</p>
          </div>
          <div className="step">
            <div className="step__num">3</div>
            <h3 className="step__title">発送通知</h3>
            <p className="step__body">商品を発送する際、別途追跡番号付きのメールをお送りします。</p>
          </div>
        </div>

        <div className="note" style={{ textAlign: "left", maxWidth: 560, margin: "0 auto 28px" }}>
          <div className="note__icon">?</div>
          <div>
            <b>ご質問・配送先の変更がある場合</b>
            お問い合わせフォーム、または注文番号を添えてメールにてご連絡ください。発送前であれば対応可能です。
          </div>
        </div>

        <div className="flex gap-12" style={{ justifyContent: "center" }}>
          <button className="btn btn--primary btn--lg" onClick={() => go("home")}>ホームに戻る</button>
          <a className="btn btn--lg" href="https://forms.google.com/lowsys-card-shop-contact" target="_blank" rel="noopener">お問い合わせ <Icon name="mail" size={14} /></a>
        </div>
      </div>
    </div>
  </main>;


window.LCS = Object.assign(window.LCS, { HomePage, ProductPage, CompletePage, ProductCard, Carousel });