/**
 * 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 {
	const demo = "https://demo.rspace.online/rchoices";

	return `
<!-- Hero -->
<section class="rl-hero">
  <span class="rl-tagline">rChoices</span>
  <h1 class="rl-heading">Decide Together, Fairly</h1>
  <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="${demo}" class="rl-cta-primary" id="ml-primary">Make Better Decisions</a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</section>

<!-- 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>Create a Choice Shape</h3>
        <p>Pick a voting method, name it, and add options. The shape appears on the canvas.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Members Vote</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 Emerge</h3>
        <p>Live tallies update as votes arrive. View charts, rankings, and spider diagrams in real time.</p>
      </div>
    </div>
  </div>
</section>

<!-- Voting Methods -->
<section class="rl-section rl-section--alt">
  <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>

<!-- Features -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Features</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127912;</div>
        <h3>Canvas Integration</h3>
        <p>Choice shapes live on the canvas alongside notes, images, and other shapes &mdash; full spatial context.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9889;</div>
        <h3>Real-time Results</h3>
        <p>Tallies, rankings, and spider charts update live as members vote via Automerge CRDT sync.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128295;</div>
        <h3>Configurable Parameters</h3>
        <p>Set vote budgets, deadlines, anonymity, and quorum thresholds per choice shape.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9745;</div>
        <h3>rVote Integration</h3>
        <p>Connect to <a href="/rvote" style="color:#14b8a6">rVote</a> for formal governance proposals backed by on-canvas choices.</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">Better Decisions Start Here</h2>
    <p class="rl-subtext">
      Drop a choice shape on your canvas and let your community weigh in.
    </p>
    <div class="rl-cta-row">
      <a href="${demo}" class="rl-cta-primary">Make Better Decisions</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>`;
}