// product.jsx
function Product() {
  const items = [
    {
      name: 'スマートシティと生命のネットワーク',
      sub: 'SERIES 01 ／ 柏の葉編',
      concept: '千葉県柏の葉エリアの生き物たち。都市と自然が共存する街で出会う、ハヤブサ・カブトムシ・ミシシッピアカミミガメなど。',
      art: 'sky',
      img: 'assets/products/series-01-kashiwanoha.png',
    },
    {
      name: 'グリーンウォーリアーズ',
      sub: 'SERIES 02',
      concept: 'コンセプト準備中。ここに各パックの世界観を入れていきます。',
      art: 'forest',
    },
    {
      name: 'ライジングブルー',
      sub: 'SERIES 03 ／ 第3弾',
      concept: '青く広がる海の世界。シャチを頂点に、群れ泳ぐイワシ・クラゲ・サンゴ礁の生き物たちが躍動する、海洋生態系の物語。',
      art: 'ocean',
      img: 'assets/products/series-03-rising-blue.png',
    },
    {
      name: 'エメラルドの守護神',
      sub: 'SERIES 04 ／ 越境強化パック',
      concept: 'コンセプト準備中。ここに各パックの世界観を入れていきます。',
      art: 'sky',
    },
    {
      name: '星降る夜と地底火山',
      sub: 'SERIES 05 ／ 小笠原編',
      concept: 'Coming Soon... 12月頃発売予定。',
      art: 'forest',
      comingSoon: true,
    },
  ];
  return (
    <section className="lineup" id="lineup">
      <div className="container">
        <SectionHeader label="◤ LINEUP" title="カードラインナップ" subtitle="日本国内・海外のバージョンもリリース！あなたの地域バージョンも作ってみませんか？" />
        <div className="lineup-grid">
          {items.map((p, i) => (
            <div key={i} className="product-card" style={p.comingSoon ? { opacity: 0.72 } : {}}>
              <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 }}>12月発売予定</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 className="product-spec" style={{ marginTop: 10 }}>{p.concept}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Product });