// story.jsx
function Story() {
  return (
    <section className="story" id="story">
      <div className="story-halftone" />
      <div className="container" style={{ position: 'relative' }}>
        <div className="story-grid">
          <div>
            <span className="section-label" style={{ background: 'rgba(255,255,255,0.1)', borderColor: '#fff', color: '#fff' }}>◤ OUR STORY</span>
            <h2 className="section-title" style={{ fontFamily: "\"Zen Kaku Gothic New\"" }}>楽しむほど、<br />守られる。</h2>
            <div className="story-quote">生き物を守るアクションを<br />みんなで。</div>
            <p className="story-body">売上の一部は、1年に1回、国内の保護団体に寄付。<br />そしてプレイヤーは遊ぶだけで、現実の保護活動の一員になります。</p>
            <div className="story-sdgs" aria-label="この取り組みが関わるSDGs目標">
              <div className="story-sdg-label">SUPPORTING SDGs</div>
              <div className="story-sdg-row">
                <div className="story-sdg-img" aria-label="SDGs 14 海の豊かさを守ろう">
                  <img src="assets/sdg_icon_14_ja.png" alt="SDGs 14 海の豊かさを守ろう" />
                </div>
                <div className="story-sdg-img" aria-label="SDGs 15 陸の豊かさも守ろう">
                  <img src="assets/sdg_icon_15_ja.png" alt="SDGs 15 陸の豊かさも守ろう" />
                </div>
              </div>
            </div>
          </div>
          <div className="story-visual">
            <div className="story-photo">
              <img src="assets/story-nature.jpg" alt="ニホンアマガエルのカード" />
            </div>
            <div className="story-steps" aria-label="遊ぶ → 寄付 → 保護">
              <div className="story-step">
                <div className="story-step-num">01</div>
                <div className="story-step-icon" aria-hidden="true"></div>
                <div className="story-step-label">遊ぶ</div>
                <div className="story-step-sub">カードを買って<br />対戦！</div>
              </div>
              <div className="story-step-arrow" aria-hidden="true">→</div>
              <div className="story-step">
                <div className="story-step-num">02</div>
                <div className="story-step-icon" aria-hidden="true"></div>
                <div className="story-step-label">寄付</div>
                <div className="story-step-sub">運営が売上の<br />1部を年1回寄付</div>
              </div>
              <div className="story-step-arrow" aria-hidden="true">→</div>
              <div className="story-step">
                <div className="story-step-num">03</div>
                <div className="story-step-icon" aria-hidden="true"></div>
                <div className="story-step-label">保護</div>
                <div className="story-step-sub">国内保護団体が<br />保全活動に活用</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

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