/**
 * rCart landing page — group shopping, together.
 */
export function renderLanding(): string {
  return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rCart</span>
  <h1 class="rl-heading">(You)rCart, your market.</h1>
  <p class="rl-subtitle">Group Shopping, Together</p>
  <p class="rl-subtext">
    A shared shopping cart for communities. Pool orders, unlock bulk pricing,
    and fulfill locally through the cosmolocal provider network.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rcart" class="rl-cta-primary" id="ml-primary">Start Shopping</a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- Features -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What rCart Handles</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128722;</div>
        <h3>Group Purchasing</h3>
        <p>One cart shared across your space. Members pool orders and hit bulk thresholds together.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127760;</div>
        <h3>Cosmolocal Fulfillment</h3>
        <p>Every order is matched to the nearest capable provider. Design global, manufacture local.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128203;</div>
        <h3>Provider Registry</h3>
        <p>A network of local providers with capabilities, locations, and pricing. Automatic matching by proximity.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128176;</div>
        <h3>Revenue Splits</h3>
        <p>Creator, community, and provider shares calculated automatically via rFlows. Transparent by default.</p>
      </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">
        <span class="rl-step__num">1</span>
        <h3>Create a Cart</h3>
        <p>Start a shared shopping cart. Paste product URLs from any store, or browse the cosmolocal catalog.</p>
      </div>
      <div class="rl-step">
        <span class="rl-step__num">2</span>
        <h3>Add Items Together</h3>
        <p>Members paste links from Amazon, Etsy, Shopify &mdash; anywhere. Products are auto-detected and added to the cart. Or list print-ready artifacts from rPubs.</p>
      </div>
      <div class="rl-step">
        <span class="rl-step__num">3</span>
        <h3>Pool Funds &amp; Checkout</h3>
        <p>Everyone contributes what they can. Once funded, check out together. Revenue splits flow automatically for cosmolocal items.</p>
      </div>
    </div>
  </div>
</section>

<!-- Cosmolocal Fulfillment -->
<section class="rl-section">
  <div class="rl-container">
    <div class="rl-grid-2">
      <div>
        <h2 class="rl-heading">Cosmolocal fulfillment</h2>
        <p class="rl-subtext" style="margin-bottom:1.5rem">
          Every order is matched to the nearest capable provider. Design is global, manufacturing is local.
        </p>
        <ul class="rl-check-list">
          <li><strong>Provider matching</strong> &mdash; automatic routing by capability, location, and cost</li>
          <li><strong>Revenue splits</strong> &mdash; creator, community, and provider shares via rFlows</li>
          <li><strong>Order tracking</strong> &mdash; real-time status from accepted to delivered</li>
          <li><strong>Volume pricing</strong> &mdash; automatic tier detection from pooled orders</li>
        </ul>
      </div>
      <div class="rl-card rl-card--center" style="display:flex;align-items:center;justify-content:center">
        <div>
          <div class="rl-icon-box" style="margin:0 auto 1rem">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
          </div>
          <h3>Nearest Provider Wins</h3>
          <p>Less shipping, lower emissions,<br>faster delivery, local jobs.</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 rCart.</p>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128179;</div>
        <h3>x402 Protocol</h3>
        <p>Open payment protocol for instant crypto payments. Card payments supported alongside.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128176;</div>
        <h3>Flow Service</h3>
        <p>Automated revenue splits between creator, community, and provider. Transparent by design.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128451;</div>
        <h3>PostgreSQL</h3>
        <p>Rock-solid relational database for catalog, orders, providers, and transaction history.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128293;</div>
        <h3>Hono</h3>
        <p>Ultrafast web framework for the API layer. Lightweight, edge-ready, and built for speed.</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 rCart 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">(You)rCart, your market.</h2>
    <p class="rl-subtext">Try the demo or create a space to get started.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rcart" class="rl-cta-primary">Start Shopping</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>`;
}