/**
 * rChoices — rich landing page body.
 * Returned by landingPage() in the module export;
 * the shell wraps it with header, CSS, and analytics.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rChoices</span>
  <h1 class="rl-heading">(You)rChoices, your voice.</h1>
  <p class="rl-subtitle">Decide Together, Fairly</p>
  <p class="rl-subtext">
    Quadratic voting, ranked choice, and multi-criteria scoring &mdash; all as
    interactive shapes on your canvas. Drop a choice, let members vote,
    watch results emerge in real time.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rchoices" class="rl-cta-primary" id="ml-primary">Start Deciding</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 rChoices Handles</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9878;</div>
        <h3>Quadratic Voting</h3>
        <p>Express intensity of preference. The cost of additional votes grows exponentially, balancing passion with fairness.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128203;</div>
        <h3>Ranked Choice Voting</h3>
        <p>Order preferences from first to last. Instant-runoff tabulation finds the option with the broadest support.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128260;</div>
        <h3>CRDT-Based Shared State</h3>
        <p>Automerge CRDTs keep all participants in sync &mdash; no conflicts, no lost votes, even offline.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9889;</div>
        <h3>Real-Time Collaboration</h3>
        <p>Tallies, rankings, and spider charts update live as members vote. Results emerge instantly.</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 Decision</h3>
        <p>Pick a voting method, name it, and add options. The choice shape appears on the canvas.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Add Options &amp; Invite Voters</h3>
        <p>Space members interact with the shape to cast votes, rank preferences, or score criteria.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Results Calculated Fairly in Real Time</h3>
        <p>Live tallies update as votes arrive. View charts, rankings, and spider diagrams instantly.</p>
      </div>
    </div>
  </div>
</section>

<!-- Voting Methods -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Voting Methods</h2>
    <p class="rl-subtext" style="text-align:center">
      Three powerful mechanisms, each designed for different decision contexts.
    </p>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9878;</div>
        <h3>Quadratic Voting</h3>
        <p>Express intensity of preference. The cost of additional votes on one option grows exponentially, balancing passion with fairness.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128203;</div>
        <h3>Ranked Choice</h3>
        <p>Order your preferences from first to last. Instant-runoff tabulation finds the option with the broadest support.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128376;</div>
        <h3>Multi-Criteria Scoring</h3>
        <p>Score options across weighted attributes. Spider diagrams reveal trade-offs at a glance.</p>
      </div>
    </div>
  </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 rChoices.</p>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128260;</div>
        <h3>Automerge</h3>
        <p>Conflict-free replicated data types for shared state &mdash; real-time sync without merge conflicts.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128451;</div>
        <h3>PostgreSQL</h3>
        <p>Reliable relational storage for decisions, vote records, and result history.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9889;</div>
        <h3>Hono</h3>
        <p>Ultrafast web framework for the API layer &mdash; lightweight, typed, and edge-ready.</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 rChoices 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)rChoices, your voice.</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/rchoices" class="rl-cta-primary">Start Deciding</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>`;
}