/**
 * CrowdSurf landing page — swipe to coordinate local activities.
 */
export function renderLanding(): string {
  return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">Coordinate spontaneous activities</span>
  <h1 class="rl-heading">What should <span style="color:#5eead4">your community</span><br>do today?</h1>
  <p class="rl-subtext">
    Swipe to discover. Commit to join. When enough people are in, it happens.
    No planning committees. No group chat chaos. Just action.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/crowdsurf" class="rl-cta-primary">Start Swiping</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 Crowdsurfing works</h2>
    <div class="rl-grid-3">
      <div class="rl-step">
        <div class="rl-step__num">1</div>
        <h3>Propose</h3>
        <p>Someone has an idea &mdash; community garden day, open mic, repair cafe. They post it with a threshold: &ldquo;happens when 5 people are in.&rdquo;</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Swipe</h3>
        <p>Community members discover activities by swiping. Right to join, left to skip. Declare what you&rsquo;re bringing &mdash; skills, gear, food.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Trigger</h3>
        <p>When enough people commit, the activity triggers. The group forms, contributions are matched, and it just&hellip; happens.</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">Built for real communities</h2>
    <div class="rl-grid-2" style="margin-top:2rem">
      <div class="rl-card">
        <h3 style="margin-bottom:0.35rem">Threshold triggers</h3>
        <p>Activities only happen when enough people commit. No more &ldquo;who&rsquo;s coming?&rdquo; anxiety. The threshold <em>is</em> the RSVP.</p>
      </div>
      <div class="rl-card">
        <h3 style="margin-bottom:0.35rem">Contribution matching</h3>
        <p>See what people are bringing and what&rsquo;s still needed. Skills, equipment, food, space &mdash; the puzzle assembles itself.</p>
      </div>
      <div class="rl-card">
        <h3 style="margin-bottom:0.35rem">Time urgency</h3>
        <p>Proposals expire. The countdown creates momentum. As the window closes, urgency rises and commitment accelerates.</p>
      </div>
      <div class="rl-card">
        <h3 style="margin-bottom:0.35rem">Real-time sync</h3>
        <p>Powered by rSpace CRDT infrastructure. Every swipe syncs instantly across all participants. Offline-first, multiplayer by default.</p>
      </div>
    </div>
  </div>
</section>

<!-- Use cases -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What will your community crowdsurf?</h2>
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-card" style="text-align:center">
        <div style="font-size:2rem;margin-bottom:0.5rem">🌱</div>
        <h3 style="margin-bottom:0.25rem">Garden days</h3>
        <p style="font-size:0.85rem">5 people + seedlings + shovels = community garden magic</p>
      </div>
      <div class="rl-card" style="text-align:center">
        <div style="font-size:2rem;margin-bottom:0.5rem">🎸</div>
        <h3 style="margin-bottom:0.25rem">Jam sessions</h3>
        <p style="font-size:0.85rem">Musicians find each other. Instruments match up. Music emerges.</p>
      </div>
      <div class="rl-card" style="text-align:center">
        <div style="font-size:2rem;margin-bottom:0.5rem">🔧</div>
        <h3 style="margin-bottom:0.25rem">Repair cafes</h3>
        <p style="font-size:0.85rem">Bring broken stuff, find fixers. Circular economy through coordination.</p>
      </div>
      <div class="rl-card" style="text-align:center">
        <div style="font-size:2rem;margin-bottom:0.5rem">🍳</div>
        <h3 style="margin-bottom:0.25rem">Community meals</h3>
        <p style="font-size:0.85rem">Someone cooks, others bring ingredients. Potluck, self-organized.</p>
      </div>
      <div class="rl-card" style="text-align:center">
        <div style="font-size:2rem;margin-bottom:0.5rem">🧘</div>
        <h3 style="margin-bottom:0.25rem">Wellness</h3>
        <p style="font-size:0.85rem">Yoga by the canal. Group meditation. Movement in the park.</p>
      </div>
      <div class="rl-card" style="text-align:center">
        <div style="font-size:2rem;margin-bottom:0.5rem">💻</div>
        <h3 style="margin-bottom:0.25rem">Hackathons</h3>
        <p style="font-size:0.85rem">Coders + designers + a space + caffeine = build something together.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section rl-section--alt">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Ready to ride the wave?</h2>
    <p class="rl-subtext">Create a space for your community and start crowdsurfing.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/crowdsurf" class="rl-cta-primary">Try the Demo</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>`;
}
