/**
 * rFunds — rich landing page body.
 * Ported from rfunds-online/app/page.tsx (Next.js/Tailwind).
 * 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">rFunds</span>
  <h1 class="rl-heading" style="background:linear-gradient(to right,#fcd34d,#6ee7b7,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
    Threshold-Based Flow Funding
  </h1>
  <p class="rl-subtext" style="font-size:1.25rem;max-width:48rem;margin:0 auto 2rem">
    Design continuous funding flows that respond dynamically to threshold conditions.
    Connect funnels, set overflow rules, and track outcomes in real-time.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rfunds" class="rl-cta-secondary" id="ml-primary">Try the Demo</a>
    <a href="/create-space" class="rl-cta-primary">Create Your Own</a>
  </div>
</div>

<!-- 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-card rl-card--center">
        <div style="width:3rem;height:3rem;background:rgba(245,158,11,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
          <svg style="width:1.5rem;height:1.5rem;color:#fbbf24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
          </svg>
        </div>
        <h3>Create Funnels</h3>
        <p>Each funnel represents a funding pool with three zones: overflow (above max),
        healthy (between thresholds), and critical (below min). Set thresholds by
        dragging handles.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div style="width:3rem;height:3rem;background:rgba(16,185,129,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
          <svg style="width:1.5rem;height:1.5rem;color:#34d399" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
          </svg>
        </div>
        <h3>Connect Flows</h3>
        <p>Connect funnels with overflow edges (sideways) so excess funds automatically
        route to other pools. Add spending edges (downward) to fund outcomes and
        deliverables.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div style="width:3rem;height:3rem;background:rgba(59,130,246,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
          <svg style="width:1.5rem;height:1.5rem;color:#60a5fa" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h3>Simulate &amp; Share</h3>
        <p>Run simulations to see how funds flow through your system. Watch edge widths
        scale proportionally. Save your space locally and share it with a link.</p>
      </div>
    </div>
  </div>
</section>

<!-- The Funnel Metaphor -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div style="background:rgba(30,41,59,0.3);border-radius:1rem;border:1px solid rgba(51,65,85,0.5);padding:2rem">
      <h2 class="rl-heading" style="text-align:center;margin-bottom:2rem">The Funnel Metaphor</h2>
      <div style="max-width:28rem;margin:0 auto;font-family:monospace;font-size:0.875rem;text-align:center">

        <!-- Overflow Zone -->
        <div style="color:#fbbf24">
          <div style="background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:0.75rem 0.75rem 0 0;padding:0.75rem 2rem">
            <div style="font-weight:600">OVERFLOW ZONE</div>
            <div style="font-size:0.75rem;color:#fcd34d">Above MAX threshold</div>
            <div style="font-size:0.75rem;color:rgba(252,211,77,0.7)">Excess funds redistribute to other funnels</div>
          </div>
        </div>

        <!-- Max Threshold Line -->
        <div style="font-size:0.75rem;color:#f59e0b;font-weight:700;border-bottom:2px dashed rgba(245,158,11,0.5);padding:0.25rem 0;background:rgba(245,158,11,0.05)">
          -- MAX THRESHOLD --
        </div>

        <!-- Healthy Zone -->
        <div style="color:#34d399">
          <div style="background:rgba(16,185,129,0.1);border-left:1px solid rgba(16,185,129,0.3);border-right:1px solid rgba(16,185,129,0.3);padding:1rem 2rem">
            <div style="font-weight:600">HEALTHY ZONE</div>
            <div style="font-size:0.75rem;color:#6ee7b7">Normal operations</div>
            <div style="font-size:0.75rem;color:rgba(110,231,183,0.7)">Full flow rate, balanced funding</div>
          </div>
        </div>

        <!-- Min Threshold Line -->
        <div style="font-size:0.75rem;color:#ef4444;font-weight:700;border-bottom:2px dashed rgba(239,68,68,0.5);padding:0.25rem 0;background:rgba(239,68,68,0.05)">
          -- MIN THRESHOLD --
        </div>

        <!-- Critical Zone -->
        <div style="color:#94a3b8">
          <div style="background:rgba(51,65,85,0.3);border:1px solid rgba(71,85,105,0.3);border-radius:0 0 0.75rem 0.75rem;padding:0.75rem 2rem">
            <div style="font-weight:600;color:#f87171">CRITICAL ZONE</div>
            <div style="font-size:0.75rem;color:#fca5a5">Below MIN threshold</div>
            <div style="font-size:0.75rem;color:#64748b">Outflow restricted, conservation mode</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>

<!-- Ecosystem Integration -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Ecosystem Integration</h2>
    <p class="rl-subtext" style="text-align:center">
      rFunds connects to other rSpace modules for end-to-end treasury governance.
    </p>
    <div class="rl-grid-2" style="max-width:700px;margin:0 auto">
      <div class="rl-integration">
        <div class="rl-icon-box">&#128176;</div>
        <div>
          <h3><a href="/rwallet" style="color:#14b8a6;text-decoration:none">rWallet</a></h3>
          <p>On-chain balances and wallet-based treasury tracking for decentralized communities.</p>
        </div>
      </div>
      <div class="rl-integration">
        <div class="rl-icon-box">&#128499;</div>
        <div>
          <h3><a href="/rvote" style="color:#14b8a6;text-decoration:none">rVote</a></h3>
          <p>Governance decisions that direct fund allocation through formal proposal workflows.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Built on Open Source -->
<section class="rl-section rl-section--alt">
  <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 rFunds.</p>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127754;</div>
        <h3>Flow Service</h3>
        <p>Custom budget flow engine powering the river visualization and conviction-based allocation logic.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128451;</div>
        <h3>PostgreSQL</h3>
        <p>Reliable relational storage for space-flow associations, transaction history, and pool balances.</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">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Your Data, Protected</h2>
    <p class="rl-subtext">How rFunds 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 rl-section--alt">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Ready to design your funding flows?</h2>
    <p class="rl-subtext">Start with the interactive demo or create your own space with custom funnels and connections.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rfunds" class="rl-cta-primary">Try the Demo</a>
      <a href="/create-space" class="rl-cta-secondary">Create Your Own</a>
    </div>
  </div>
</section>

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