// gameplay.jsx
function Gameplay() {
  const steps = [
  { n: 1, rot: -2, title: 'カードを集めよう', desc: 'お気に入りの生きものの写真を送ると、あなただけのカードになるかも！さらに、環境保全活動への参加でも限定カードがもらえます。', icon: '📸', cta: { label: '詳しい情報はLINEから', href: '#', btn: 'LINE登録' } },
  { n: 2, rot: 1.5, title: 'デッキを組もう', desc: '集めたカードの中から好きな組み合わせを選んで、自分だけのデッキを作りましょう。初めての方でも大丈夫。作り方をやさしく解説しています。', icon: '⚡️', cta: { label: 'デッキの作り方を見る', href: 'ecosystem-wars/how_to_build_a_deck/index.html', btn: 'デッキの作り方' } },
  { n: 3, rot: -1, title: '対戦しよう', desc: 'デッキができたら、いよいよバトル！大会で上位入賞すると、ここでしか手に入らない特別なカードがもらえます。', icon: '⚔️', cta: { label: '大会情報はこちら', href: '#events', btn: '大会情報' } }];

  return (
    <section className="gameplay section" id="gameplay">
      <div className="gameplay-halftone" />
      <div className="container" style={{ position: 'relative' }}>
        <SectionHeader label="◤ HOW TO PLAY" title={<>あそびかた</>} subtitle={<>ルールはシンプル。10分で覚えて、ずっと遊べる。<br />生き物の生態や食物連鎖を理解すると、強くなる。</>} />
        <div className="step-grid">
          {steps.map((s) =>
          <div key={s.n} className="step-card" style={{ '--rot': `${s.rot}deg` }}>
              <div className="step-number" style={{ backgroundColor: "rgb(142, 142, 142)" }}>{s.n}</div>
              <div style={{ fontSize: 40, marginBottom: 8 }}>{s.icon}</div>
              <h3 className="step-title">{s.title}</h3>
              <p className="step-desc">{s.desc}</p>
              <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
                <div style={{ fontFamily: 'DotGothic16, monospace', fontSize: 11, color: 'var(--accent-yellow)', letterSpacing: '0.06em' }}>▶ {s.cta.label}</div>
                <a href={s.cta.href} {...s.cta.external ? { target: '_blank', rel: 'noopener noreferrer' } : {}} className="pop-btn yellow" style={{ fontSize: 14, padding: '10px 18px', backgroundColor: "rgb(255, 122, 26)" }}>{s.cta.btn} →</a>
              </div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 60, textAlign: 'center' }}>
          <a href="https://speakerdeck.com/yui_itoshima/hatumeinoha-hisinesukontesuto" target="_blank" rel="noopener noreferrer" className="pop-btn" style={{ fontFamily: "\"Zen Kaku Gothic New\"" }}>ルールブックをみる</a>
        </div>
      </div>
    </section>);

}
Object.assign(window, { Gameplay });