/**
 * rExchange landing page — P2P crypto/fiat exchange within communities.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline" style="color:#f59e0b;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2)">
    Part of the rSpace Ecosystem
  </span>
  <h1 class="rl-heading" style="background:linear-gradient(to right,#f59e0b,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem">
    Community<br>Exchange
  </h1>
  <p class="rl-subtitle">
    A <strong style="color:#e2e8f0">peer-to-peer on/off-ramp</strong> where community members
    act as exchange nodes for each other. Buy and sell cUSDC, $MYCO, and fUSDC against
    local fiat currencies &mdash; with escrow, reputation, and intent matching.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rexchange" class="rl-cta-primary"
       style="background:linear-gradient(to right,#f59e0b,#10b981);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 -->
<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 P2P Exchange?
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
        Think <strong style="color:#f59e0b">LocalBitcoins</strong> inside your rSpace community.
        Members post buy/sell intents, the solver finds matches, and escrow handles trustless settlement.
      </p>
    </div>

    <div class="rl-grid-3">
      <!-- Post Intent -->
      <div class="rl-card" style="border:2px solid rgba(245,158,11,0.35);background:linear-gradient(to bottom right,rgba(245,158,11,0.08),rgba(245,158,11,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="color:white;font-weight:700;font-size:0.9rem">$</span>
          </div>
          <h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">Post Intents</h3>
        </div>
        <p>
          Buy or sell cUSDC, $MYCO, or fUSDC. Set your price, amount range, and accepted payment
          methods (SEPA, Revolut, PIX, M-Pesa, Cash).
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Standing orders let you be a liquidity provider.</strong>
        </p>
      </div>

      <!-- Automatic Matching -->
      <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.5" 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.24"/></svg>
          </div>
          <h3 style="color:#34d399;font-size:1.05rem;margin-bottom:0">Solver Matching</h3>
        </div>
        <p>
          The matching engine runs every 60s, finding compatible buy/sell pairs by token, currency,
          rate overlap, and reputation. Scored and ranked automatically.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Auto-accept for hands-free trading.</strong>
        </p>
      </div>

      <!-- Escrow Settlement -->
      <div class="rl-card" style="border:2px solid rgba(59,130,246,0.35);background:linear-gradient(to bottom right,rgba(59,130,246,0.08),rgba(59,130,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:#3b82f6;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"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </div>
          <h3 style="color:#60a5fa;font-size:1.05rem;margin-bottom:0">Escrow & Trust</h3>
        </div>
        <p>
          Seller's tokens are locked in CRDT escrow. Buyer sends fiat off-chain, seller confirms
          receipt, tokens release. 24h timeout auto-reverses.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Disputes resolved by space admins.</strong>
        </p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works -->
<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:#f59e0b;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,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">
        Intent &rarr; Match &rarr; Settle
      </h2>
    </div>

    <div class="rl-grid-3">
      <div class="rl-card" style="border-color:rgba(245,158,11,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,#f59e0b,rgba(245,158,11,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(245,158,11,0.1);color:#fbbf24;margin-bottom:0.25rem">Step 1</span>
            <h3 style="margin-bottom:0;font-size:1rem">Post Intent</h3>
          </div>
        </div>
        <p>
          "I want to buy 100 cUSDC for EUR at market rate via SEPA" &mdash; or sell, at a fixed
          price, with any payment method. Set reputation thresholds and amount ranges.
        </p>
      </div>

      <div class="rl-card" style="border-color:rgba(16,185,129,0.25);background:linear-gradient(to bottom right,rgba(16,185,129,0.05),rgba(245,158,11,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,#10b981,#f59e0b);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(16,185,129,0.15);color:#34d399;margin-bottom:0.25rem">Step 2</span>
            <h3 style="margin-bottom:0;font-size:1rem">Match & Escrow</h3>
          </div>
        </div>
        <p>
          Solver finds your counterparty. Both accept the match. Seller's tokens lock in escrow.
          In-trade chat for coordinating fiat payment details.
        </p>
      </div>

      <div class="rl-card" style="border-color:rgba(59,130,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,#3b82f6,#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(59,130,246,0.1);color:#60a5fa;margin-bottom:0.25rem">Step 3</span>
            <h3 style="margin-bottom:0;font-size:1rem">Settle & Build Rep</h3>
          </div>
        </div>
        <p>
          Buyer sends fiat, seller confirms receipt, tokens release instantly. Both parties earn
          reputation score. Standing orders re-activate for continuous liquidity.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Provide Liquidity -->
<section class="rl-section">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2rem">
      <span class="rl-tagline" style="color:#8b5cf6;background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.2)">
        Passive Income
      </span>
      <h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#8b5cf6,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Earn the Spread
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
        Provide liquidity to popular pairs and earn fees on every trade.
        Set it and forget it &mdash; your positions work 24/7.
      </p>
    </div>

    <div class="rl-grid-3">
      <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.9rem">1</span>
          </div>
          <h3 style="color:#a78bfa;font-size:1.05rem;margin-bottom:0">Pick a Pair</h3>
        </div>
        <p>
          Choose a token/fiat pair like cUSDC/EUR or cUSDC/USD. Popular pairs get more
          trade volume and more fee income.
        </p>
      </div>

      <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.06),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:linear-gradient(to bottom right,#8b5cf6,#10b981);display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:0.9rem">2</span>
          </div>
          <h3 style="color:#34d399;font-size:1.05rem;margin-bottom:0">Set Amount &amp; Spread</h3>
        </div>
        <p>
          Commit tokens and fiat. Set your spread in basis points &mdash;
          this is your fee on each trade. Both buy and sell orders are created automatically.
        </p>
      </div>

      <div class="rl-card" style="border:2px solid rgba(245,158,11,0.35);background:linear-gradient(to bottom right,rgba(245,158,11,0.06),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:linear-gradient(to bottom right,#10b981,#f59e0b);display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:0.9rem">3</span>
          </div>
          <h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">Earn Fees</h3>
        </div>
        <p>
          Trades are auto-accepted and settled. You earn the spread on every fill.
          Track your earnings, pause, or withdraw any time.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Features -->
<section class="rl-section">
  <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 Global Communities
      </h2>
    </div>

    <div class="rl-grid-4">
      <div class="rl-card rl-card--center" style="border-color:rgba(245,158,11,0.15)">
        <div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#f59e0b,#d97706);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
          <span style="font-size:1.25rem">🌍</span>
        </div>
        <h3>8 Fiat Currencies</h3>
        <p>EUR, USD, GBP, BRL, MXN, INR, NGN, ARS with CoinGecko live rates.</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>CRDT Escrow</h3>
        <p>Trustless token escrow with 24h timeout. Net supply neutral settlement.</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>Reputation</h3>
        <p>Score based on completion rate, dispute history, and confirmation speed. Badges earned.</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>Auto-Matching</h3>
        <p>Intent solver runs every 60s. Auto-accept for hands-free LP trading.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container">
    <div class="rl-card" style="border:2px solid rgba(245,158,11,0.25);background:linear-gradient(to bottom right,rgba(245,158,11,0.08),rgba(16,185,129,0.04));text-align:center;padding:3rem 2rem;position:relative;overflow:hidden">
      <span class="rl-badge" style="background:rgba(245,158,11,0.1);color:#fbbf24;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 exchange with your community?
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:560px;margin:0 auto 2rem;line-height:1.6">
        Create a Space and become a liquidity node. Post standing orders to provide exchange
        access for your community &mdash; earn reputation and enable financial inclusion.
      </p>
      <div class="rl-cta-row" style="margin-top:0">
        <a href="/create-space" class="rl-cta-primary"
           style="background:linear-gradient(to right,#f59e0b,#10b981);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/rexchange" 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>`;
}
