/**
 * rCred landing page — SourceCred-inspired contribution recognition.
 *
 * An ode to SourceCred (2018-2022) and a re-enlivening of the
 * PageRank-for-community-contribution protocol.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline" style="color:#fbbf24;background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.2)">
    Part of the rSpace Ecosystem
  </span>
  <h1 class="rl-heading" style="background:linear-gradient(to right,#fbbf24,#f59e0b,#d97706);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem">
    Contribution<br>Recognition
  </h1>
  <p class="rl-subtitle">
    <strong style="color:#e2e8f0">CredRank</strong> builds a living graph of every contribution
    across your community &mdash; docs written, tasks completed, events attended, votes cast &mdash;
    and runs <strong style="color:#fbbf24">PageRank</strong> to surface who's actually creating value.
    Then it pays them in <strong style="color:#fbbf24">Grain</strong>.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rcred" class="rl-cta-primary"
       style="background:linear-gradient(to right,#f59e0b,#d97706);color:white">
      <span style="display:inline-flex;align-items:center;gap:0.5rem">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>
        Try the Demo
      </span>
    </a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- In Memoriam -->
<section class="rl-section" style="border-top:none">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2rem">
      <span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">Origin Story</span>
      <h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Standing on the Shoulders of SourceCred
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
        <strong style="color:#fbbf24">SourceCred</strong> (2018&ndash;2022) pioneered the idea that
        community contributions could be measured through a weighted graph and PageRank.
        The project is gone, but the algorithm endures. rCred carries the torch &mdash;
        adapted for local-first CRDT communities where every action is already a document.
      </p>
    </div>
  </div>
</section>

<!-- How it Works -->
<section class="rl-section">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2rem">
      <span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">How It Works</span>
      <h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        From Actions to Grain in Three Steps
      </h2>
    </div>

    <div class="rl-grid-3">
      <div class="rl-card" style="border:2px solid rgba(251,191,36,0.35);background:linear-gradient(to bottom right,rgba(251,191,36,0.08),rgba(251,191,36,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#f59e0b;display:flex;align-items:center;justify-content:center">
            <span style="font-size:0.9rem">1</span>
          </div>
          <h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">Graph Collection</h3>
        </div>
        <p>
          Every action across <strong style="color:#e2e8f0">8 rApps</strong> becomes a node
          in your contribution graph &mdash; tasks, docs, chats, calendar events, proposals,
          flows, time commitments, and wallet activity. Contributors are connected to their work
          through weighted edges.
        </p>
      </div>

      <div class="rl-card" style="border:2px solid rgba(251,191,36,0.35);background:linear-gradient(to bottom right,rgba(251,191,36,0.08),rgba(251,191,36,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#f59e0b;display:flex;align-items:center;justify-content:center">
            <span style="font-size:0.9rem">2</span>
          </div>
          <h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">CredRank</h3>
        </div>
        <p>
          Modified <strong style="color:#e2e8f0">PageRank</strong> runs on the graph via
          power iteration. High-value contributions (settled commitments, completed tasks)
          carry more weight. Cred flows from contributions to their authors, normalized
          to a 0&ndash;1000 scale. Community-configurable weights.
        </p>
      </div>

      <div class="rl-card" style="border:2px solid rgba(251,191,36,0.35);background:linear-gradient(to bottom right,rgba(251,191,36,0.08),rgba(251,191,36,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#f59e0b;display:flex;align-items:center;justify-content:center">
            <span style="font-size:0.9rem">3</span>
          </div>
          <h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">Grain Distribution</h3>
        </div>
        <p>
          <strong style="color:#e2e8f0">GRAIN tokens</strong> are minted proportional to Cred.
          80% goes to <em>lifetime equity</em> (catch-up for long-term contributors) and
          20% to <em>current epoch</em> (recent activity). Non-transferable, visible in rWallet.
          Your community decides the emission rate.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Contribution Types -->
<section class="rl-section">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2rem">
      <span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">16 Types</span>
      <h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Every Action Counts
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
        From chat messages (0.5x) to settled time commitments (4x), each contribution type
        has a configurable weight. Space admins tune the weights; the algorithm does the rest.
      </p>
    </div>

    <div class="rl-grid-2" style="max-width:720px;margin:0 auto">
      <div class="rl-card" style="border-color:rgba(34,197,94,0.25)">
        <h3 style="color:#22c55e;font-size:0.95rem;margin-bottom:0.5rem">High Impact (3&ndash;4x)</h3>
        <ul style="color:#94a3b8;font-size:0.85rem;line-height:1.8;padding-left:1rem;margin:0">
          <li>Settlement completed &mdash; 4.0x</li>
          <li>Task completed &mdash; 3.0x</li>
          <li>Proposal authored &mdash; 3.0x</li>
        </ul>
      </div>
      <div class="rl-card" style="border-color:rgba(59,130,246,0.25)">
        <h3 style="color:#3b82f6;font-size:0.95rem;margin-bottom:0.5rem">Medium Impact (1.5&ndash;2x)</h3>
        <ul style="color:#94a3b8;font-size:0.85rem;line-height:1.8;padding-left:1rem;margin:0">
          <li>Doc authored &mdash; 2.0x</li>
          <li>Flow created &mdash; 2.0x</li>
          <li>Event scheduled &mdash; 2.0x</li>
          <li>Commitment created &mdash; 2.0x</li>
          <li>Event attended &mdash; 1.5x</li>
          <li>Budget allocated &mdash; 1.5x</li>
        </ul>
      </div>
      <div class="rl-card" style="border-color:rgba(251,191,36,0.25)">
        <h3 style="color:#fbbf24;font-size:0.95rem;margin-bottom:0.5rem">Standard (1x)</h3>
        <ul style="color:#94a3b8;font-size:0.85rem;line-height:1.8;padding-left:1rem;margin:0">
          <li>Task created &mdash; 1.0x</li>
          <li>Comment authored &mdash; 1.0x</li>
          <li>Vote cast &mdash; 1.0x</li>
          <li>Address added &mdash; 1.0x</li>
        </ul>
      </div>
      <div class="rl-card" style="border-color:rgba(148,163,184,0.25)">
        <h3 style="color:#94a3b8;font-size:0.95rem;margin-bottom:0.5rem">Light Touch (0.2&ndash;0.5x)</h3>
        <ul style="color:#94a3b8;font-size:0.85rem;line-height:1.8;padding-left:1rem;margin:0">
          <li>Message sent &mdash; 0.5x</li>
          <li>TX annotated &mdash; 0.5x</li>
          <li>Reaction given &mdash; 0.2x</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- Philosophy -->
<section class="rl-section">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2rem">
      <span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">Philosophy</span>
      <h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Emergent Value Recognition
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
        Traditional organizations allocate rewards top-down. CredRank works bottom-up:
        value emerges from the structure of contributions themselves. When someone's work
        becomes a dependency for others, their cred rises naturally &mdash; no manager needed.
      </p>
      <p style="font-size:0.95rem;color:#64748b;max-width:640px;margin:1rem auto 0;font-style:italic">
        "Make contributions visible. Let the graph speak." &mdash; SourceCred ethos
      </p>
    </div>
  </div>
</section>
`;
}
