/**
 * Splat module landing page — rich content for rspace.online/rsplat
 */

export function renderLanding(): string {
	return `
  <!-- Hero -->
  <div class="rl-hero">
    <span class="rl-tagline">rSplat</span>
    <h1 class="rl-heading">3D Gaussian Splats on the Infinite Canvas</h1>
    <p class="rl-subtext">
      View, share, and gate 3D scenes captured with Gaussian splatting.
      Three.js-powered viewing with optional x402 micropayment gating.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rsplat" class="rl-cta-primary" id="ml-primary">Explore Splats</a>
      <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
    </div>
  </div>

  <!-- How it works -->
  <section class="rl-section">
    <div class="rl-container">
      <h2 class="rl-heading" style="text-align:center;">How It Works</h2>
      <div class="rl-grid-3">
        <div class="rl-step">
          <div class="rl-step__num">1</div>
          <h3>Upload .ply/.splat Files</h3>
          <p>Upload Gaussian splat files captured from real-world scenes or generated from photos and video.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">2</div>
          <h3>View in Browser</h3>
          <p>Explore 3D scenes directly in the browser with orbit controls, zoom, and pan. No app install needed.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">3</div>
          <h3>Gate with x402 Micropayments</h3>
          <p>Optionally gate uploads with HTTP 402 micropayments. Monetize premium 3D content natively.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Features -->
  <section class="rl-section rl-section--alt">
    <div class="rl-container">
      <h2 class="rl-heading" style="text-align:center;">Features</h2>
      <p class="rl-subtext" style="text-align:center;">
        A complete pipeline from capture to community gallery.
      </p>
      <div class="rl-grid-4">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#127912;</div>
          <h3>Three.js Viewer</h3>
          <p>Hardware-accelerated WebGL rendering with orbit controls, smooth camera, and full-screen mode.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128444;</div>
          <h3>Canvas Integration</h3>
          <p>Embed splats as spatial elements on the rSpace infinite canvas alongside other module content.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128176;</div>
          <h3>x402 Gating</h3>
          <p>Monetize 3D content with HTTP 402 micropayments. Viewers pay per-view or per-download automatically.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#127748;</div>
          <h3>Community Gallery</h3>
          <p>Browse, search, and discover 3D scenes shared by your community. Sorted by recent, popular, or tagged.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="rl-section">
    <div class="rl-container" style="text-align:center;">
      <h2 class="rl-heading">Step into 3D</h2>
      <p class="rl-subtext">
        Explore the demo gallery or upload your own Gaussian splats.
      </p>
      <div class="rl-cta-row">
        <a href="https://demo.rspace.online/rsplat" class="rl-cta-primary">Explore Splats</a>
        <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
      </div>
    </div>
  </section>

  <div class="rl-back">
    <a href="/">&larr; Back to rSpace</a>
  </div>`;
}