// gravity3dmaze.jsx — Gravity 3D Maze sub-page

function Gravity3DMaze() {
  return (
    <Page>
      <section className="detail" data-screen-label="Gravity 3D Maze · Detail">
        <a className="back reveal" href="/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
          <span className="arr">←</span> Back to index
        </a>

        <p className="detail-kicker reveal">
          <span className="dot" />
          <span>Project 05</span>
          <span style={{ color: 'var(--rule)' }}>/</span>
          <span>Mobile · Game</span>
          <span style={{ color: 'var(--rule)' }}>/</span>
          <span>2026 —</span>
        </p>

        <h1 className="detail-title reveal">
          Gravity 3D Maze<em>.</em>
        </h1>
        <p className="detail-tag reveal">
          Tilt your phone and roll a steel ball through 238 handcrafted 3D levels — narrow paths, cube walls, open roads and small planets with their own gravity.
        </p>

        <dl className="detail-facts reveal">
          <div className="fact"><dt>Platform</dt><dd>iOS · Android</dd></div>
          <div className="fact"><dt>Input</dt><dd>Accelerometer · Gyroscope</dd></div>
          <div className="fact"><dt>Levels</dt><dd>238 · three play modes</dd></div>
          <div className="fact"><dt>Status</dt><dd>Release prep</dd></div>
        </dl>

        <div className="detail-body reveal">
          <h3>Concept</h3>
          <div className="body-copy">
            <p>
              A ball, a maze, and the phone in your hands as the only controller. The game reads the motion sensors on the device to tilt the world — and to notice a quick drop of the wrist, which makes the ball hop a gap.
            </p>
            <p>
              Levels range from a narrow beam over nothing, through cube walls you roll up and around, to tiny planets where &ldquo;down&rdquo; points at whatever surface you are on. Stars earned in each play mode open the next chapter by themselves.
            </p>
          </div>
        </div>

        <ul className="feature-list reveal" style={{ listStyle: 'none', margin: 0, padding: 0 }}>
          <li className="feature">
            <span className="idx">01</span>
            <div>
              <h4>238 levels</h4>
              <p>Handcrafted rather than generated — narrow paths, cube walls, open roads and small planets.</p>
            </div>
          </li>
          <li className="feature">
            <span className="idx">02</span>
            <div>
              <h4>Tilt &amp; hop</h4>
              <p>Tilt to roll; jerk the device downward, or tap the on-screen button, to hop a gap. Recalibrate any time from Settings.</p>
            </div>
          </li>
          <li className="feature">
            <span className="idx">03</span>
            <div>
              <h4>Stars &amp; chapters</h4>
              <p>Each play mode counts its own stars, and the next chapter opens automatically once you have enough.</p>
            </div>
          </li>
          <li className="feature">
            <span className="idx">04</span>
            <div>
              <h4>Private by design</h4>
              <p>No account, no ads, no analytics. Progress stays on the device; Space Maze is a one-time in-app purchase you can restore.</p>
            </div>
          </li>
        </ul>

        <div className="detail-body reveal">
          <h3>Status</h3>
          <div className="body-copy">
            <p>
              Store listing and policy pages are in place. Bilingual — English and Traditional Chinese (重力鋼珠迷宮 3D).
            </p>
          </div>
        </div>

        <div className="detail-body reveal">
          <h3>Compliance</h3>
          <div className="body-copy" style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
            <a href="/gravity3dmaze/privacy.html" target="_blank" rel="noopener">Privacy policy →</a>
            <a href="/gravity3dmaze/support.html" target="_blank" rel="noopener">Support →</a>
          </div>
        </div>

        <nav className="pager reveal">
          <a href="/iperf23" onClick={(e) => { e.preventDefault(); navigate('/iperf23'); }}>
            <small>Previous project</small>
            ← iPerf 2 &amp; 3
          </a>
          <a href="/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
            <small>Back</small>
            Index <em style={{ fontStyle: 'italic', color: 'var(--muted)' }}>↺</em>
          </a>
        </nav>
      </section>
    </Page>
  );
}

window.Gravity3DMaze = Gravity3DMaze;