/**
 * 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">Group Shopping, Together</h1>
  <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">Browse the Shop</a>
    <a href="/rpubs" class="rl-cta-secondary">Create with rPubs</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" style="margin-top:2rem">
      <div class="rl-step">
        <span class="rl-step__num">1</span>
        <h3>Create a Space</h3>
        <p>Your space is your shared shopping context. Members see the same catalog and cart.</p>
      </div>
      <div class="rl-step">
        <span class="rl-step__num">2</span>
        <h3>Add Products</h3>
        <p>List print-ready artifacts from rPubs, or browse what others have published.</p>
      </div>
      <div class="rl-step">
        <span class="rl-step__num">3</span>
        <h3>Pay Together</h3>
        <p>Pool orders to hit bulk pricing tiers. Pay with crypto or card. Revenue splits automatically.</p>
      </div>
    </div>
  </div>
</section>

<!-- Features -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Features</h2>
    <div class="rl-grid-4" style="margin-top:2rem">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg>
        </div>
        <h3>Universal Cart</h3>
        <p>One cart shared across your space. Members add items, pool orders, and hit bulk thresholds together.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">
          <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="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
        </div>
        <h3>Crypto + Card</h3>
        <p>Pay with credit card or cryptocurrency. x402 protocol support for instant crypto payments.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
        </div>
        <h3>Real-time Updates</h3>
        <p>Order status updates in real time &mdash; from placement through production to delivery.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <h3>Passkey Login</h3>
        <p>Passwordless authentication with EncryptID passkeys. One tap to sign in across all r* apps.</p>
      </div>
    </div>
  </div>
</section>

<!-- 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 rFunds</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>

<!-- CTA -->
<section class="rl-section rl-section--alt">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Ready to shop together?</h2>
    <p class="rl-subtext">
      Browse the catalog, pool orders with your community, and support local providers.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rcart" class="rl-cta-primary" id="ml-primary">Open rCart</a>
      <a href="/rpubs" class="rl-cta-secondary">Create with rPubs</a>
    </div>
  </div>
</section>

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