// product.jsx
function Product() {
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(null); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [open]);
  const items = [
    {
      name: 'スマートシティと生命のネットワーク',
      sub: 'SERIES 01 ／ 柏の葉編',
      concept: '千葉県柏の葉エリアの生き物たち。都市と自然が共存する街で出会う、生き物を地域の皆さんから写真を送っていただきリリースしました。\n',
      count: 28,
      art: 'sky',
      img: 'assets/products/series-01-kashiwanoha.png',
      detail: 'assets/products/series-01-detail.png',
    },
    {
      name: 'グリーンウォーリアーズ',
      sub: 'SERIES 02',
      concept: '生き物の不思議をさらに深掘り。\n大型のクモや、特定外来生物、コウノトリまで登場！皆さんから写真を送っていただきリリースしました。\n',
      count: 47,
      art: 'forest',
      img: 'assets/products/series-02-green-warriors.png',
      detail: 'assets/products/series-02-detail.png',
    },
    {
      name: 'ライジングブルー',
      sub: 'SERIES 03 ／ 第3弾',
      concept: '青く広がる海の世界。\n\n人間の活動によって上がる水位。\n人間の保護活動によって、復活する絶滅危惧種の個体数。\n未来に向けて、期待感も危機感も上がっていく。そんな現状をタイトルにしました。',
      count: 29,
      art: 'ocean',
      img: 'assets/products/series-03-rising-blue.png',
      detail: 'assets/products/series-03-detail.png',
    },
    {
      name: 'エメラルドの巨神',
      sub: 'SERIES 04 ／ 越境強化パック',
      concept: '1stアニバーサリー記念。初の越境拡張パック（海外での現地撮影を実施）。多様性の宝庫である熱帯の海洋の生き物にフォーカスし、セブ島のオスロブ・モアルボアルの海洋生物を中心にカード化。熱帯の海の生き物の力強さを感じるシリーズ。',
      count: 12,
      countOnly: true,
      art: 'sky',
      img: 'assets/products/series-04-emerald.png',
      comingSoon: true,
      releaseLabel: '8月発売予定',
    },
    {
      name: '???',
      sub: 'SERIES 05',
      concept: 'Coming Soon... 10月発売予定。',
      countUnknown: true,
      art: 'forest',
      comingSoon: true,
      releaseLabel: '10月発売予定',
    },
    {
      name: '???',
      sub: 'SERIES 06',
      concept: 'Coming Soon... 2027年中発売予定。',
      countUnknown: true,
      art: 'ocean',
      comingSoon: true,
      releaseLabel: '2027年中発売予定',
    },
  ];
  return (
    <section className="lineup" id="lineup">
      <div className="container">
        <SectionHeader label="◤ LINEUP" title="カードラインナップ" subtitle={<>日本国内・海外のバージョンもリリース！あなたの地域でも作ってみませんか？<br/>※パック写真はイメージです。ECサイトで実物をご覧ください。{'\n'}</>} />
        <div className="lineup-grid">
          {items.map((p, i) => (
            <div key={i} className="product-card" onClick={() => p.detail && setOpen(p)} style={{ ...(p.comingSoon ? { opacity: 0.72 } : {}), cursor: p.detail ? 'pointer' : 'default' }}>
              <div className={`product-visual ${p.img ? '' : 'art-' + p.art}`} style={{ aspectRatio: '3 / 4', position: 'relative', overflow: 'hidden', background: p.img ? 'linear-gradient(160deg, #FAF6EA 0%, #EBE2CB 100%)' : undefined }}>
                {p.img ? (
                  <img src={p.img} alt={p.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', objectPosition: 'center', zIndex: 2, padding: 28 }} />
                ) : (
                  <React.Fragment>
                    <Stripes />
                    <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontFamily: 'DotGothic16', color: 'rgba(255,255,255,0.9)', fontSize: 12, textAlign: 'center', padding: 16 }}>{p.comingSoon ? 'COMING SOON' : '◾︎パッケージ画像（縦長）◾︎'}</div>
                  </React.Fragment>
                )}
                {p.comingSoon && (
                  <div style={{ position: 'absolute', top: 12, right: 12, background: 'var(--accent-orange)', color: '#fff', fontSize: 10, fontFamily: 'DotGothic16', padding: '4px 10px', letterSpacing: '0.1em', zIndex: 3 }}>{p.releaseLabel || '発売予定'}</div>
                )}
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 16, marginBottom: 6, letterSpacing: '0.15em' }}>{p.sub}</div>
              <h3 className="product-name">{p.name}</h3>
              {(p.count || p.countUnknown) && (
                <div className="product-count" style={{ fontFamily: 'DotGothic16, monospace', fontSize: 13, color: '#0F0B07', fontWeight: 700, marginTop: 8, padding: '5px 12px', display: 'inline-block', background: 'var(--accent-yellow)', border: '2px solid #0F0B07', borderRadius: 4, letterSpacing: '0.08em', textShadow: 'none' }}>
                  {p.countUnknown ? '全 ??? 種類' : `全 ${p.count} 種類`}{p.countOnly ? '' : ' ＋ ???'}
                </div>
              )}
              <p className="product-spec" style={{ marginTop: 10 }}>{p.concept}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 60, display: 'flex', justifyContent: 'center' }}>
          <a href="https://ecosystem.buyshop.jp/" target="_blank" rel="noopener noreferrer" className="pop-btn orange" style={{ fontSize: 22, padding: '18px 40px' }}>カードをGETする →</a>
        </div>
      </div>
      {open && (
        <div onClick={() => setOpen(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(15,11,7,0.85)', zIndex: 1000, display: 'grid', placeItems: 'center', padding: 24, cursor: 'pointer' }}>
          <div onClick={(e) => e.stopPropagation()} style={{ position: 'relative', maxWidth: 720, width: '100%', maxHeight: '92vh', cursor: 'default' }}>
            <button onClick={() => setOpen(null)} aria-label="閉じる" style={{ position: 'absolute', top: -12, right: -12, width: 40, height: 40, borderRadius: '50%', background: 'var(--accent-yellow)', border: '3px solid var(--line)', cursor: 'pointer', fontSize: 18, fontWeight: 700, zIndex: 2, boxShadow: '3px 3px 0 var(--line)' }}>×</button>
            <img src={open.detail} alt={open.name} style={{ display: 'block', width: '100%', height: 'auto', maxHeight: '92vh', objectFit: 'contain', border: '3px solid var(--line)', borderRadius: 12, background: '#fff', boxShadow: '6px 6px 0 var(--line)' }} />
          </div>
        </div>
      )}
    </section>
  );
}
Object.assign(window, { Product });