/**
 * Maps module landing page — static HTML, no React.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rMaps</span>
  <h1 class="rl-heading" style="background:linear-gradient(135deg,#6ee7b7,#2dd4bf,#67e8f9);-webkit-background-clip:text;background-clip:text">(You)rMaps, your world to explore.</h1>
  <p class="rl-subtitle" style="background:linear-gradient(135deg,#6ee7b7,#2dd4bf,#67e8f9);-webkit-background-clip:text;background-clip:text">Real-Time Collaborative Maps</p>
  <p class="rl-subtext">
    Share live locations, navigate indoor and outdoor spaces, coordinate meetups
    &mdash; all from the browser. No app install. No tracking. No data collection.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rmaps" class="rl-cta-primary" id="ml-primary">Open Maps</a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- Features -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What rMaps Handles</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128205;</div>
        <h3>Live Location Sharing</h3>
        <p>Real-time GPS updates via WebSocket. See everyone on the map as they move, with stale detection and high-accuracy fallback.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127970;</div>
        <h3>Indoor + Outdoor Navigation</h3>
        <p>Turn-by-turn routing via OSRM outdoors, seamless switch to c3nav for indoor venues. Multi-floor, level-aware navigation.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128204;</div>
        <h3>Meetup Coordination</h3>
        <p>Drop waypoints for meetups, events, and points of interest. Search by address, share coordinates, or pin from your location.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128737;</div>
        <h3>No Tracking, No Data Collection</h3>
        <p>Ghost mode, precision levels, one-toggle location sharing. Zero tracking, zero data collection. You control who sees you.</p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works -->
<section class="rl-section rl-section--alt">
  <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>Create a Map Room</h3>
        <p>Sign in and name your room. Get a shareable link or a custom slug.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Share with Friends</h3>
        <p>Send the link or scan the QR code. Friends join from any browser &mdash; no app download, no account creation needed.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Navigate Together</h3>
        <p>See everyone in real time. Drop meeting points, get turn-by-turn directions, and ping friends when you need to regroup.</p>
      </div>
    </div>
  </div>
</section>

<!-- What Makes rMaps Different -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What Makes rMaps Different</h2>
    <div class="rl-grid-2" style="margin-top:2rem">
      <div class="rl-integration">
        <div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">&#127957;</div>
        <div>
          <h3>CCC Event Integration</h3>
          <p>
            Native c3nav integration for 39C3, Camp, and other CCC events. Indoor maps with
            multi-floor routing, venue bounds detection, and automatic map switching
            when you walk inside.
          </p>
        </div>
      </div>

      <div class="rl-integration">
        <div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">&#128225;</div>
        <div>
          <h3>Location Pinging</h3>
          <p>
            Request a friend's location with one tap. Push notifications via
            Web Push API with vibration alerts. Works even when the app is
            backgrounded via service worker.
          </p>
        </div>
      </div>

      <div class="rl-integration">
        <div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">&#128230;</div>
        <div>
          <h3>Google Maps Import</h3>
          <p>
            Import your saved places from Google Takeout ZIP exports. GeoJSON
            parsing, auto-emoji mapping by place type, and preview before
            importing.
          </p>
        </div>
      </div>

      <div class="rl-integration">
        <div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">&#128241;</div>
        <div>
          <h3>PWA &amp; Offline Mode</h3>
          <p>
            Install as a native app. Three-tier service worker caching keeps
            maps accessible offline with up to 500 cached tiles. Background
            sync handles location updates.
          </p>
        </div>
      </div>

      <div class="rl-integration">
        <div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">&#128279;</div>
        <div>
          <h3>Instant Room Sharing</h3>
          <p>
            Generate a QR code or shareable link for any room. Friends scan or tap
            to join instantly &mdash; no account needed, no app download.
            Native share dialog on mobile.
          </p>
        </div>
      </div>

      <div class="rl-integration">
        <div class="rl-icon-box" style="font-size:1.25rem;flex-shrink:0">&#128260;</div>
        <div>
          <h3>Conflict-Free Sync</h3>
          <p>
            Automerge CRDT architecture ensures everyone sees the same map state,
            even through disconnections. WebSocket real-time sync with automatic
            reconnection and state recovery.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Use Cases -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Maps for Every Gathering</h2>
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127957;</div>
        <h3>Festivals &amp; Camps</h3>
        <p>
          Navigate massive venues with indoor maps. Find stages, food courts,
          and your crew across multi-day events like CCC Camp.
        </p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127961;</div>
        <h3>City Exploration</h3>
        <p>
          Exploring a new city with friends? Share locations, drop pins at
          restaurants and landmarks, import your Google Maps saved places.
        </p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#129309;</div>
        <h3>Group Coordination</h3>
        <p>
          Conferences, retreats, team offsites. Set meeting points, ping
          stragglers, and get walking directions to the next session.
        </p>
      </div>
    </div>
    <p style="text-align:center;font-size:0.82rem;color:#64748b;margin-top:1.5rem">
      First built for <a href="https://events.ccc.de/" target="_blank" rel="noopener noreferrer" style="color:rgba(16,185,129,0.7)">CCC events</a> &mdash; now for any gathering.
    </p>
  </div>
</section>

<!-- Built on Open Source -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
    <p class="rl-subtext" style="text-align:center">The libraries and tools that power rMaps.</p>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <h3>MapLibre GL</h3>
        <p>Open-source map rendering engine. Beautiful vector maps without vendor lock-in.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>c3nav</h3>
        <p>Indoor navigation engine with multi-floor routing and venue bounds detection.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>OSRM</h3>
        <p>Open Source Routing Machine for fast, accurate outdoor turn-by-turn navigation.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Web Push API</h3>
        <p>Browser-native push notifications for location pings and alerts.</p>
      </div>
    </div>
  </div>
</section>

<!-- Your Data, Protected -->
<section class="rl-section rl-section--alt">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Your Data, Protected</h2>
    <p class="rl-subtext">How rMaps keeps your information safe.</p>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128274;</div>
        <h3>End-to-End Encryption</h3>
        <span class="rl-badge">Coming Soon</span>
        <p>All content encrypted before it leaves your device. Not even the server can read it.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128373;</div>
        <h3>Zero-Knowledge Architecture</h3>
        <span class="rl-badge">Coming Soon</span>
        <p>The server processes your requests without ever seeing your data in the clear.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127968;</div>
        <h3>Self-Hosted</h3>
        <p>Run on your own infrastructure. Your server, your rules, your data.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">(You)rMaps, your world to explore.</h2>
    <p class="rl-subtext">Try the demo or create a space to get started.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rmaps" class="rl-cta-primary">Open Maps</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>
`;
}