/**
 * rChoices landing page — quick collaborative decisions.
 * Ported from the Next.js page.tsx. Interactive React demos (SpiderDemo,
 * RankingDemo, VotingDemo) replaced with text descriptions.
 */
export function renderLanding(): string {
  return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">Quick collaborative decisions</span>
  <h1 class="rl-heading">What should <span style="color:#5eead4">5 friends</span><br>do tonight?</h1>
  <p class="rl-subtext">
    Spider plots to weigh trade-offs. Rankings to sort preferences.
    Live voting to decide fast. Powered by rSpace real-time sync.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rchoices" class="rl-cta-primary" id="ml-primary">Create a Choice Room</a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- Three tools -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Three decision tools</h2>
    <div class="rl-grid-3">
      <!-- Spider Plots -->
      <div class="rl-card">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
          <span style="font-size:0.7rem;padding:0.2rem 0.6rem;border-radius:9999px;background:rgba(168,85,247,0.1);color:#c084fc">Compare</span>
        </div>
        <h3 style="font-size:1.05rem;margin-bottom:0.35rem">Spider Plots</h3>
        <p>Everyone rates options on multiple criteria. See where preferences
        overlap &mdash; and where they don&rsquo;t.</p>
        <div style="margin-top:1rem;padding:1rem;border-radius:0.75rem;background:rgba(168,85,247,0.05);border:1px solid rgba(168,85,247,0.1);text-align:center">
          <svg width="120" height="100" viewBox="0 0 120 100" style="margin:0 auto;display:block">
            <!-- Spider web axes -->
            <line x1="60" y1="10" x2="60" y2="90" stroke="#334155" stroke-width="0.5"/>
            <line x1="17" y1="35" x2="103" y2="65" stroke="#334155" stroke-width="0.5"/>
            <line x1="17" y1="65" x2="103" y2="35" stroke="#334155" stroke-width="0.5"/>
            <!-- Outer ring -->
            <polygon points="60,10 103,35 103,65 60,90 17,65 17,35" fill="none" stroke="#334155" stroke-width="0.5"/>
            <!-- Mid ring -->
            <polygon points="60,30 88,42 88,58 60,70 32,58 32,42" fill="none" stroke="#334155" stroke-width="0.5"/>
            <!-- Data shape 1 (purple) -->
            <polygon points="60,18 96,38 90,62 60,78 28,55 25,38" fill="rgba(168,85,247,0.15)" stroke="#c084fc" stroke-width="1.5"/>
            <!-- Data shape 2 (teal) -->
            <polygon points="60,25 85,45 98,58 60,72 35,60 22,42" fill="rgba(20,184,166,0.15)" stroke="#14b8a6" stroke-width="1.5"/>
            <!-- Axis labels -->
            <text x="60" y="6" text-anchor="middle" fill="#64748b" font-size="7">Price</text>
            <text x="110" y="34" text-anchor="start" fill="#64748b" font-size="7">Vibe</text>
            <text x="110" y="70" text-anchor="start" fill="#64748b" font-size="7">Menu</text>
            <text x="60" y="98" text-anchor="middle" fill="#64748b" font-size="7">Distance</text>
            <text x="10" y="70" text-anchor="end" fill="#64748b" font-size="7">Speed</text>
            <text x="10" y="34" text-anchor="end" fill="#64748b" font-size="7">Reviews</text>
          </svg>
          <p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem">Multi-criteria comparison at a glance</p>
        </div>
      </div>

      <!-- Rankings -->
      <div class="rl-card">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
          <span style="font-size:0.7rem;padding:0.2rem 0.6rem;border-radius:9999px;background:rgba(245,158,11,0.1);color:#fbbf24">Rank</span>
        </div>
        <h3 style="font-size:1.05rem;margin-bottom:0.35rem">Rankings</h3>
        <p>Drag to order your top picks. Borda count or instant-runoff finds
        the group&rsquo;s true consensus.</p>
        <div style="margin-top:1rem;padding:0.75rem;border-radius:0.75rem;background:rgba(245,158,11,0.05);border:1px solid rgba(245,158,11,0.1)">
          <div style="display:flex;flex-direction:column;gap:0.4rem">
            <div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;border-radius:0.375rem;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.2)">
              <span style="font-size:0.7rem;font-weight:700;color:#fbbf24;width:1.2rem">1st</span>
              <span style="font-size:0.8rem;color:#e2e8f0">Thai place on 5th</span>
            </div>
            <div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;border-radius:0.375rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)">
              <span style="font-size:0.7rem;font-weight:700;color:#94a3b8;width:1.2rem">2nd</span>
              <span style="font-size:0.8rem;color:#e2e8f0">New pizza spot</span>
            </div>
            <div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;border-radius:0.375rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)">
              <span style="font-size:0.7rem;font-weight:700;color:#94a3b8;width:1.2rem">3rd</span>
              <span style="font-size:0.8rem;color:#e2e8f0">Taco truck</span>
            </div>
            <div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;border-radius:0.375rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)">
              <span style="font-size:0.7rem;font-weight:700;color:#94a3b8;width:1.2rem">4th</span>
              <span style="font-size:0.8rem;color:#e2e8f0">Sushi bar</span>
            </div>
          </div>
          <p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem;text-align:center">Drag to reorder &mdash; consensus emerges</p>
        </div>
      </div>

      <!-- Live Voting -->
      <div class="rl-card">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
          <span style="font-size:0.7rem;padding:0.2rem 0.6rem;border-radius:9999px;background:rgba(34,211,238,0.1);color:#22d3ee">Vote</span>
        </div>
        <h3 style="font-size:1.05rem;margin-bottom:0.35rem">Live Voting</h3>
        <p>Cast your vote and watch results shift in real time. Perfect for
        quick polls and tiebreakers.</p>
        <div style="margin-top:1rem;padding:0.75rem;border-radius:0.75rem;background:rgba(34,211,238,0.05);border:1px solid rgba(34,211,238,0.1)">
          <div style="display:flex;flex-direction:column;gap:0.5rem">
            <div>
              <div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.25rem">
                <span style="color:#e2e8f0">Hike</span>
                <span style="color:#22d3ee;font-weight:600">45%</span>
              </div>
              <div style="height:0.4rem;border-radius:9999px;background:rgba(255,255,255,0.06);overflow:hidden">
                <div style="height:100%;width:45%;border-radius:9999px;background:#22d3ee"></div>
              </div>
            </div>
            <div>
              <div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.25rem">
                <span style="color:#e2e8f0">Beach</span>
                <span style="color:#22d3ee;font-weight:600">35%</span>
              </div>
              <div style="height:0.4rem;border-radius:9999px;background:rgba(255,255,255,0.06);overflow:hidden">
                <div style="height:100%;width:35%;border-radius:9999px;background:#22d3ee"></div>
              </div>
            </div>
            <div>
              <div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.25rem">
                <span style="color:#e2e8f0">Stay in</span>
                <span style="color:#22d3ee;font-weight:600">20%</span>
              </div>
              <div style="height:0.4rem;border-radius:9999px;background:rgba(255,255,255,0.06);overflow:hidden">
                <div style="height:100%;width:20%;border-radius:9999px;background:#22d3ee"></div>
              </div>
            </div>
          </div>
          <p style="font-size:0.7rem;color:#64748b;margin-top:0.5rem;text-align:center">Results update live &mdash; 9 votes in</p>
        </div>
      </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</h3>
        <p>Name your choice room. It comes pre-loaded with vote, rank, and spider tools.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Share</h3>
        <p>Send the link. Everyone joins the same real-time canvas &mdash; add options, cast votes.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Decide</h3>
        <p>Results aggregate live. The group sees consensus emerge in seconds.</p>
      </div>
    </div>
  </div>
</section>

<!-- Use cases -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Decisions, not debates</h2>
    <p class="rl-subtext" style="text-align:center">
      Built for the everyday choices that stall group chats
    </p>
    <div class="rl-grid-2" style="margin-top:2rem">
      <div class="rl-card">
        <h3 style="margin-bottom:0.35rem">Where to eat?</h3>
        <p>Rate restaurants on price, distance, vibe. The spider plot finds the sweet spot.</p>
      </div>
      <div class="rl-card">
        <h3 style="margin-bottom:0.35rem">What to watch?</h3>
        <p>Everyone ranks their top 3 movies. Instant-runoff picks the winner.</p>
      </div>
      <div class="rl-card">
        <h3 style="margin-bottom:0.35rem">Weekend plans?</h3>
        <p>Quick poll: hike, beach, or stay in? Results in 30 seconds.</p>
      </div>
      <div class="rl-card">
        <h3 style="margin-bottom:0.35rem">Team retro priorities?</h3>
        <p>Rank improvement ideas by impact. Borda count surfaces what the team really wants.</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">What should 5 friends do tonight?</h2>
    <p class="rl-subtext">Create a room and find out in 30 seconds.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rchoices" class="rl-cta-primary">Create a Choice Room</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>`;
}