/**
 * rTime landing page — community-based timebanking, commitment pooling,
 * and emergent collaboration through shared hour ledgers.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline" style="color:#a78bfa;background:rgba(167,139,250,0.1);border-color:rgba(167,139,250,0.2)">
    Part of the rSpace Ecosystem
  </span>
  <h1 class="rl-heading" style="background:linear-gradient(to right,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem">
    Community<br>Timebanking
  </h1>
  <p class="rl-subtitle">
    A <strong style="color:#e2e8f0">community-based ledger</strong> for pooling time commitments
    and weaving them into coordinated action. Every hour pledged becomes a visible,
    connectable resource that your community can match to real needs.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rtime" class="rl-cta-primary"
       style="background:linear-gradient(to right,#8b5cf6,#ec4899);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>

<!-- ELI5: What is Timebanking? -->
<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">ELI5</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">
        What is Timebanking?
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
        A <strong style="color:#a78bfa">community-based ledger</strong> where
        <strong style="color:#ec4899">everyone's hour is worth the same</strong>.
        Members pledge time, match skills to needs, and build trust through mutual aid.
      </p>
    </div>

    <div class="rl-grid-3">
      <!-- Commitment Pooling -->
      <div class="rl-card" style="border:2px solid rgba(139,92,246,0.35);background:linear-gradient(to bottom right,rgba(139,92,246,0.08),rgba(139,92,246,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:#8b5cf6;display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:0.8rem">1h</span>
          </div>
          <h3 style="color:#a78bfa;font-size:1.05rem;margin-bottom:0">Commitment Pooling</h3>
        </div>
        <p>
          Members pledge hours with a skill category. Each pledge becomes an orb in the pool &mdash;
          visible, weighted by hours, colored by skill.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">See your community's capacity at a glance.</strong>
        </p>
      </div>

      <!-- Community Ledger -->
      <div class="rl-card" style="border:2px solid rgba(236,72,153,0.35);background:linear-gradient(to bottom right,rgba(236,72,153,0.08),rgba(236,72,153,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:#ec4899;display:flex;align-items:center;justify-content:center">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
          </div>
          <h3 style="color:#f472b6;font-size:1.05rem;margin-bottom:0">Community Ledger</h3>
        </div>
        <p>
          Every hour is equal: one hour of facilitation = one hour of tech work.
          The ledger tracks pledges, fulfillments, and transfers without money.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Built on CRDTs &mdash; works offline, syncs everywhere.</strong>
        </p>
      </div>

      <!-- Emergent Collaboration -->
      <div class="rl-card" style="border:2px solid rgba(16,185,129,0.35);background:linear-gradient(to bottom right,rgba(16,185,129,0.08),rgba(16,185,129,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:#10b981;display:flex;align-items:center;justify-content:center">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24"/></svg>
          </div>
          <h3 style="color:#34d399;font-size:1.05rem;margin-bottom:0">Emergent Collaboration</h3>
        </div>
        <p>
          Projects emerge from the pool: when enough skills converge on a task, the team
          self-assembles. No top-down assignment needed.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Coordination that grows from the bottom up.</strong>
        </p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works: Pool → Weave → Execute -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2.5rem">
      <span class="rl-tagline" style="color:#a78bfa;background:rgba(167,139,250,0.1);border-color:rgba(167,139,250,0.2)">
        How It Works
      </span>
      <h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Pool &rarr; Weave &rarr; Execute
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0 auto">
        Three stages turn scattered availability into running projects.
      </p>
    </div>

    <div class="rl-grid-3">
      <!-- Stage 1 -->
      <div class="rl-card" style="border-color:rgba(139,92,246,0.2)">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:linear-gradient(to bottom right,#8b5cf6,rgba(139,92,246,0.6));display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:1rem">1</span>
          </div>
          <div>
            <span class="rl-badge" style="background:rgba(139,92,246,0.1);color:#a78bfa;margin-bottom:0.25rem">Stage 1</span>
            <h3 style="margin-bottom:0;font-size:1rem">Commitment Pool</h3>
          </div>
        </div>
        <p>
          Members pledge hours with a skill: facilitation, design, tech, outreach, or logistics.
          Each pledge appears as a floating orb in the <strong style="color:#e2e8f0">commitment basket</strong>.
          The pool gives everyone a live dashboard of available community capacity.
        </p>
      </div>

      <!-- Stage 2 -->
      <div class="rl-card" style="border-color:rgba(236,72,153,0.25);background:linear-gradient(to bottom right,rgba(236,72,153,0.05),rgba(139,92,246,0.03))">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:linear-gradient(to bottom right,#ec4899,#8b5cf6);display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:1rem">2</span>
          </div>
          <div>
            <span class="rl-badge" style="background:rgba(236,72,153,0.15);color:#f472b6;margin-bottom:0.25rem">Stage 2</span>
            <h3 style="margin-bottom:0;font-size:1rem">Weaving Dashboard</h3>
          </div>
        </div>
        <p>
          Drag commitments onto an SVG canvas alongside task templates. Draw wires from
          commitment ports to task skill slots. The progress bar fills as skills match.
          When all needs are met, the task node <strong style="color:#10b981">glows green</strong>.
        </p>
      </div>

      <!-- Stage 3 -->
      <div class="rl-card" style="border-color:rgba(16,185,129,0.2)">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:linear-gradient(to bottom right,#10b981,#059669);display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:1rem">3</span>
          </div>
          <div>
            <span class="rl-badge" style="background:rgba(16,185,129,0.1);color:#10b981;margin-bottom:0.25rem">Stage 3</span>
            <h3 style="margin-bottom:0;font-size:1rem">Execute & Launch</h3>
          </div>
        </div>
        <p>
          Click <strong style="color:#e2e8f0">Execute Project</strong> to open a step-by-step
          launch panel: set up space, create comms channels, prep docs, and confirm roles.
          Track progress as your community's woven commitments become reality.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Why Timebanking? -->
<section class="rl-section">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2.5rem">
      <h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Why Community-Based Ledgers?
      </h2>
      <p style="color:#94a3b8;max-width:640px;margin:0 auto">
        Traditional volunteering is invisible. Timebanking makes every contribution visible,
        valued, and connectable.
      </p>
    </div>

    <div class="rl-grid-2" style="max-width:900px;margin:0 auto">
      <!-- The Problem -->
      <div class="rl-card" style="border:2px solid rgba(239,68,68,0.2);background:rgba(239,68,68,0.04)">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
          <h3 style="color:#f87171;margin-bottom:0;font-size:1.05rem">Without Timebanking</h3>
        </div>
        <ul style="list-style:disc;padding-left:1.25rem;margin:0">
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Volunteer hours vanish &mdash; no record, no recognition</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Same few people carry the load while others can't find where to help</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Projects stall because coordinators can't see available capacity</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Skills go unmatched to needs</li>
        </ul>
      </div>

      <!-- The Solution -->
      <div class="rl-card" style="border:2px solid rgba(139,92,246,0.25);background:linear-gradient(to bottom right,rgba(139,92,246,0.05),rgba(236,72,153,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
          <h3 style="color:#a78bfa;margin-bottom:0;font-size:1.05rem">With rTime</h3>
        </div>
        <ul style="list-style:disc;padding-left:1.25rem;margin:0">
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Every pledge is visible &mdash; orbs in a shared basket</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Skill + hours + name = a connectable resource</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Projects self-assemble when enough capacity converges</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">All data persists locally via CRDT &mdash; works offline</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- Feature Grid -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2rem">
      <h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Built for Real Communities
      </h2>
    </div>

    <div class="rl-grid-4">
      <div class="rl-card rl-card--center" style="border-color:rgba(139,92,246,0.15)">
        <div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#8b5cf6,#7c3aed);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
          <span style="font-size:1.25rem">🧺</span>
        </div>
        <h3>Visual Pool</h3>
        <p>Physics-based orbs show your community's available hours at a glance.</p>
      </div>

      <div class="rl-card rl-card--center" style="border-color:rgba(236,72,153,0.15)">
        <div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#ec4899,#db2777);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
          <span style="font-size:1.25rem">🧶</span>
        </div>
        <h3>Wire Editor</h3>
        <p>Drag-and-drop SVG canvas with bezier connections between skills and tasks.</p>
      </div>

      <div class="rl-card rl-card--center" style="border-color:rgba(16,185,129,0.15)">
        <div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#10b981,#059669);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
          <span style="font-size:1.25rem">🔄</span>
        </div>
        <h3>Cyclos Ready</h3>
        <p>Optional integration with Cyclos for real timebank balances and hour transfers.</p>
      </div>

      <div class="rl-card rl-card--center" style="border-color:rgba(59,130,246,0.15)">
        <div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#3b82f6,#2563eb);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
          <span style="font-size:1.25rem">📴</span>
        </div>
        <h3>Offline-First</h3>
        <p>Automerge CRDTs keep your data local and synced. No internet required to pledge.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container">
    <div class="rl-card" style="border:2px solid rgba(139,92,246,0.25);background:linear-gradient(to bottom right,rgba(139,92,246,0.08),rgba(236,72,153,0.04));text-align:center;padding:3rem 2rem;position:relative;overflow:hidden">
      <span class="rl-badge" style="background:rgba(139,92,246,0.1);color:#a78bfa;font-size:0.7rem;padding:0.25rem 0.75rem">
        Join the rSpace Ecosystem
      </span>
      <h2 style="font-size:1.75rem;font-weight:700;color:#e2e8f0;margin:1rem 0">
        Ready to weave your community's time?
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:560px;margin:0 auto 2rem;line-height:1.6">
        Create a Space and invite members to pledge their hours. Match skills to projects
        and launch coordinated community action &mdash; all on a community-based ledger
        that values every hour equally.
      </p>
      <div class="rl-cta-row" style="margin-top:0">
        <a href="/create-space" class="rl-cta-primary"
           style="background:linear-gradient(to right,#8b5cf6,#ec4899);color:white">
          <span style="display:inline-flex;align-items:center;gap:0.5rem">
            Create a Space
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
          </span>
        </a>
        <a href="https://demo.rspace.online/rtime" class="rl-cta-secondary">
          <span style="display:inline-flex;align-items:center;gap:0.5rem">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>
            Interactive Demo
          </span>
        </a>
      </div>
    </div>
  </div>
</section>

<div class="rl-back">
  <a href="/">&larr; Back to rSpace</a>
</div>`;
}
