// gameplay.jsx
function Gameplay() {
  const steps = [
    { n: 1, rot: -2, title: 'デッキを組む', desc: '森・海・川・空など、生息地が異なる生き物たち40枚でデッキを構築。バランスの取れた生態系を組み立てよう。', icon: '🌳' },
    { n: 2, rot: 1.5, title: 'バトル開始', desc: '生き物カードを場に出し、わざを発動。相手の生態系を崩しながら、自分の森を広げていく。', icon: '⚔️' },
    { n: 3, rot: -1, title: 'デッキを組む', desc: '3つの「保護区」をすべて埋めると勝利。倒すだけじゃなく、守ることで強くなる──それが生態系ウォーズ。', icon: '🌳' },
  ];
  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分で覚えて、一生遊べる。生き物の生態や食物連鎖がそのままカードの強さに反映されます。" />
        <div className="step-grid">
          {steps.map((s) => (
            <div key={s.n} className="step-card" style={{ '--rot': `${s.rot}deg` }}>
              <div className="step-number">{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>
          ))}
        </div>
        <div style={{ marginTop: 60, textAlign: 'center' }}>
          <a href="#" className="pop-btn">ルールブックをみる</a>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Gameplay });