/**
 * rBnb landing page — community hospitality.
 * Warm palette: amber → red → pink.
 */
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)">
    Community Hospitality
  </span>
  <h1 class="rl-heading" style="background:linear-gradient(to right,#f59e0b,#ef4444,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
    Hospitality is a commons
  </h1>
  <p class="rl-subtitle">
    Trust-based space sharing for communities, cooperatives, and networks of care.
  </p>
  <p class="rl-subtext">
    rBnb replaces platform extraction with <span style="color:#f59e0b;font-weight:600">community trust</span>.
    No anonymous reviews, no algorithmic rankings, no 15% service fees. Just people who know people,
    opening their doors through the networks they already belong to.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rbnb" class="rl-cta-primary" id="ml-primary"
       style="background:linear-gradient(to right,#f59e0b,#ef4444);color:#0b1120">
      Try the Demo
    </a>
    <a href="#principles" class="rl-cta-secondary">Learn More</a>
  </div>
</div>

<!-- Principles (4-card grid) -->
<section id="principles" class="rl-section" style="border-top:none">
  <div class="rl-container">
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center" style="padding:2rem">
        <div class="rl-icon-box" style="background:rgba(245,158,11,0.12);font-size:1.5rem">
          <span style="font-size:1.5rem">&#129309;</span>
        </div>
        <h3>Trust, Not Stars</h3>
        <p>Your community&rsquo;s trust graph replaces anonymous star ratings. People vouch for people they actually know &mdash; not strangers gaming an algorithm.</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:2rem">
        <div class="rl-icon-box" style="background:rgba(239,68,68,0.12);font-size:1.5rem">
          <span style="font-size:1.5rem">&#128155;</span>
        </div>
        <h3>Gift Economy First</h3>
        <p>Hospitality as a gift is the default. Suggested contributions, sliding scale, and skill exchange are all first-class options &mdash; not afterthoughts.</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:2rem">
        <div class="rl-icon-box" style="background:rgba(236,72,153,0.12);font-size:1.5rem">
          <span style="font-size:1.5rem">&#128274;</span>
        </div>
        <h3>Your Data, Your Space</h3>
        <p>All data stays local-first via CRDTs. No corporate cloud, no surveillance capitalism. Your listings, your conversations, your community&rsquo;s data.</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:2rem">
        <div class="rl-icon-box" style="background:rgba(168,85,247,0.12);font-size:1.5rem">
          <span style="font-size:1.5rem">&#127758;</span>
        </div>
        <h3>Community Boundaries</h3>
        <p>Each community sets its own trust thresholds, economy defaults, and house rules. Hospitality looks different everywhere &mdash; your tools should reflect that.</p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works -->
<section id="how" class="rl-section rl-section--alt">
  <div class="rl-container">
    <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,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
      List &rarr; Request &rarr; Stay &amp; Endorse
    </h2>
    <p class="rl-subtext" style="margin-bottom:2.5rem">
      Three steps. No platform in the middle. The community <em>is</em> the platform.
    </p>
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-card" style="border-color:rgba(245,158,11,0.15)">
        <div style="font-size:2rem;margin-bottom:1rem;text-align:center">&#9312;</div>
        <h3 style="text-align:center">List Your Space</h3>
        <p>Share a couch, a room, a cabin, a tent site, or even a patch of land. Set your economy model (gift, exchange, sliding scale, or fixed) and your trust threshold for auto-accept.</p>
      </div>
      <div class="rl-card" style="border-color:rgba(239,68,68,0.15)">
        <div style="font-size:2rem;margin-bottom:1rem;text-align:center">&#9313;</div>
        <h3 style="text-align:center">Request &amp; Connect</h3>
        <p>Browse listings in your network. Send a stay request with dates and a message. If your trust score meets the threshold, you&rsquo;re auto-accepted. Otherwise, start a conversation.</p>
      </div>
      <div class="rl-card" style="border-color:rgba(236,72,153,0.15)">
        <div style="font-size:2rem;margin-bottom:1rem;text-align:center">&#9314;</div>
        <h3 style="text-align:center">Stay &amp; Endorse</h3>
        <p>After your stay, write an endorsement. Unlike reviews, endorsements are tied to real stays and feed directly into the community trust graph &mdash; strengthening the network for everyone.</p>
      </div>
    </div>
  </div>
</section>

<!-- Economy Models -->
<section class="rl-section">
  <div class="rl-container">
    <span class="rl-tagline" style="color:#ef4444;background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.2)">
      Economy Models
    </span>
    <h2 class="rl-heading" style="background:linear-gradient(135deg,#ef4444,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
      Beyond the price tag
    </h2>
    <p class="rl-subtext">
      Every listing declares its economy model upfront. No hidden fees, no platform cut &mdash; just honest terms between host and guest.
    </p>
    <div class="rl-grid-2" style="margin-top:2rem">
      <div class="rl-card" style="border-color:rgba(52,211,153,0.15)">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:0.75rem;background:rgba(52,211,153,0.12);display:flex;align-items:center;justify-content:center;font-size:1.1rem">
            &#128154;
          </div>
          <div>
            <h3 style="margin-bottom:0">Gift Economy</h3>
            <span style="font-size:0.7rem;color:#34d399;font-family:monospace">Default</span>
          </div>
        </div>
        <p>Hospitality freely given. No expectation of payment. The gift is the relationship &mdash; endorsed stays build trust that ripples through the network.</p>
      </div>
      <div class="rl-card" style="border-color:rgba(96,165,250,0.15)">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:0.75rem;background:rgba(96,165,250,0.12);display:flex;align-items:center;justify-content:center;font-size:1.1rem">
            &#128259;
          </div>
          <div>
            <h3 style="margin-bottom:0">Skill / Service Exchange</h3>
          </div>
        </div>
        <p>Stay in exchange for something you can offer &mdash; cooking, gardening, teaching, building, childcare. Define the exchange upfront so expectations are clear.</p>
      </div>
      <div class="rl-card" style="border-color:rgba(245,158,11,0.15)">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:0.75rem;background:rgba(245,158,11,0.12);display:flex;align-items:center;justify-content:center;font-size:1.1rem">
            &#9878;
          </div>
          <div>
            <h3 style="margin-bottom:0">Sliding Scale</h3>
          </div>
        </div>
        <p>Pay what feels right within a range. Hosts set a minimum and maximum &mdash; guests choose based on their means. Everyone gets access.</p>
      </div>
      <div class="rl-card" style="border-color:rgba(148,163,184,0.15)">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:0.75rem;background:rgba(148,163,184,0.12);display:flex;align-items:center;justify-content:center;font-size:1.1rem">
            &#127991;
          </div>
          <div>
            <h3 style="margin-bottom:0">Fixed / Suggested</h3>
          </div>
        </div>
        <p>A clear price, or a gentle suggestion. Fixed prices for hosts who need income from their space. Suggested contributions for those who want to leave it open.</p>
      </div>
    </div>
  </div>
</section>

<!-- Ecosystem Integration -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <span class="rl-tagline" style="color:#ec4899;background:rgba(236,72,153,0.1);border-color:rgba(236,72,153,0.2)">
      Ecosystem
    </span>
    <h2 class="rl-heading" style="background:linear-gradient(135deg,#ec4899,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
      Part of the r* stack
    </h2>
    <p class="rl-subtext">
      rBnb connects to the full suite of community tools. Hospitality is stronger when it&rsquo;s woven into the fabric of your community.
    </p>
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-integration" style="border-color:rgba(245,158,11,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128101;</span></div>
        <div>
          <h3>rNetwork</h3>
          <p>Trust scores power auto-accept. Endorsements from stays flow back into the community trust graph.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(245,158,11,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128197;</span></div>
        <div>
          <h3>rCal</h3>
          <p>Listing availability syncs as calendar events. See your hosting schedule alongside everything else.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(245,158,11,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128205;</span></div>
        <div>
          <h3>rMaps</h3>
          <p>Listings with coordinates appear on community maps. Find hospitality near your destination.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(245,158,11,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128179;</span></div>
        <div>
          <h3>rWallet</h3>
          <p>x402 payments for non-gift stays. Contributions flow through community treasury with full transparency.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(245,158,11,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128248;</span></div>
        <div>
          <h3>rPhotos</h3>
          <p>Listing photos via the shared asset system. Upload once, display everywhere.</p>
        </div>
      </div>
      <div class="rl-integration" style="border-color:rgba(245,158,11,0.15)">
        <div class="rl-icon-box" style="flex-shrink:0"><span style="font-size:1.25rem">&#128236;</span></div>
        <div>
          <h3>rInbox</h3>
          <p>Notifications for new requests, messages, and endorsements. Never miss a guest.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading" style="background:linear-gradient(to right,#f59e0b,#ef4444,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
      Open your door to your community
    </h2>
    <p class="rl-subtext">
      List a space, request a stay, or just explore what community hospitality looks like.
      No account needed for the demo.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rbnb" class="rl-cta-primary"
         style="background:linear-gradient(to right,#f59e0b,#ef4444);color:#0b1120">
        Open the Demo
      </a>
      <a href="https://rstack.online" class="rl-cta-secondary">Explore rStack</a>
    </div>
  </div>
</section>

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