/**
 * rInbox (rChats) landing page — encrypted community chat.
 * Ported from rchats-online Next.js page.tsx (shadcn/ui + Lucide).
 */
export function renderLanding(): string {
  return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">Part of the rSpace Ecosystem</span>
  <h1 class="rl-heading">Encrypted<br>
    <span style="background:linear-gradient(135deg,#3b82f6,#14b8a6);-webkit-background-clip:text;background-clip:text;color:transparent">Community Chat</span>
  </h1>
  <p class="rl-subtext">
    Secure messaging powered by <strong style="color:#e2e8f0">EncryptID passkeys</strong>.
    No passwords, no seed phrases &mdash; just <strong style="color:#e2e8f0">hardware-backed encryption</strong> and
    full data ownership for your community.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rinbox" class="rl-cta-primary" id="ml-primary">
      Try the Demo &rarr;
    </a>
    <a href="https://demo.rspace.online/rinbox" class="rl-cta-secondary">Get Started</a>
  </div>
</div>

<!-- How It Works -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:1.5rem">
      <span class="rl-badge">How It Works</span>
      <h2 class="rl-heading" style="margin-top:0.75rem">Secure Chat in 30 Seconds</h2>
      <p class="rl-subtext">
        <strong style="color:#3b82f6">Create a passkey</strong> on your device,
        <strong style="color:#14b8a6">join a community</strong>, and
        <strong style="color:#e2e8f0">chat with end-to-end encryption</strong>.
      </p>
    </div>

    <div class="rl-grid-3">
      <div class="rl-card" style="border:2px solid rgba(59,130,246,0.4);background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(59,130,246,0.05))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="height:2rem;width:2rem;border-radius:50%;background:#3b82f6;display:flex;align-items:center;justify-content:center">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10V4a2 2 0 00-4 0v6"/><path d="M18 11a6 6 0 00-12 0v3"/><rect x="3" y="14" width="18" height="8" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
          </div>
          <h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">1. Create a Passkey</h3>
        </div>
        <p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
          Register with EncryptID using your device's biometrics or security key.
          No passwords to remember or leak.
          <strong style="color:#e2e8f0;display:block;margin-top:0.5rem">Your keys never leave your device.</strong>
        </p>
      </div>

      <div class="rl-card" style="border:2px solid rgba(20,184,166,0.4);background:linear-gradient(135deg,rgba(20,184,166,0.1),rgba(20,184,166,0.05))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="height:2rem;width:2rem;border-radius:50%;background:#14b8a6;display:flex;align-items:center;justify-content:center">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4-4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
          </div>
          <h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">2. Join a Community</h3>
        </div>
        <p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
          Create or join a community chat space. Invite members with role-based
          access: viewers, participants, moderators, and admins.
          <strong style="color:#e2e8f0;display:block;margin-top:0.5rem">One identity across all r* apps.</strong>
        </p>
      </div>

      <div class="rl-card" style="border:2px solid rgba(100,116,139,0.4);background:linear-gradient(135deg,rgba(100,116,139,0.1),rgba(100,116,139,0.05))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="height:2rem;width:2rem;border-radius:50%;background:#64748b;display:flex;align-items:center;justify-content:center">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><rect x="9" y="9" width="6" height="1" rx="0.5"/></svg>
          </div>
          <h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">3. Chat Securely</h3>
        </div>
        <p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
          Messages are encrypted with keys derived from your passkey.
          Only community members can read them.
          <strong style="color:#e2e8f0;display:block;margin-top:0.5rem">True end-to-end encryption.</strong>
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Features Row 1 -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Built on Self-Sovereign Identity</h2>
    <p class="rl-subtext" style="text-align:center">Security without compromise, powered by EncryptID</p>

    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#3b82f6,rgba(59,130,246,0.6))">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
        </div>
        <h3>End-to-End Encryption</h3>
        <p>AES-256-GCM encryption with keys derived from your passkey. Messages are unreadable to the server.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,rgba(20,184,166,0.6))">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10V4a2 2 0 00-4 0v6"/><path d="M18 11a6 6 0 00-12 0v3"/><rect x="3" y="14" width="18" height="8" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
        </div>
        <h3>Passkey Authentication</h3>
        <p>WebAuthn passkeys backed by biometrics or hardware security keys. Phishing-resistant by design.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4-4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
        </div>
        <h3>Community Spaces</h3>
        <p>Create isolated chat spaces with role-based access. Viewer, participant, moderator, and admin roles.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#f97316,#d97706)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
        </div>
        <h3>Cross-App SSO</h3>
        <p>One identity across rSpace, rVote, rMaps, rWork, and the full r* ecosystem via EncryptID.</p>
      </div>
    </div>

    <!-- Features Row 2 -->
    <div class="rl-grid-4" style="margin-top:1rem">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#a855f7,#7c3aed)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.42 4.58a5.4 5.4 0 00-7.65 0l-.77.78-.77-.78a5.4 5.4 0 00-7.65 7.65l.78.77L12 20.64l7.64-7.64.78-.77a5.4 5.4 0 000-7.65z"/><path d="M12 5.36V12"/><path d="M8.5 8.5L12 12l3.5-3.5"/></svg>
        </div>
        <h3>Social Recovery</h3>
        <p>No seed phrases. Designate trusted guardians who can help you recover access to your account.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#3b82f6,#0891b2)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
        </div>
        <h3>No Passwords</h3>
        <p>Passkeys replace passwords entirely. Nothing to leak, nothing to forget, nothing to phish.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#f43f5e,#ec4899)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" 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>Self-Sovereign</h3>
        <p>You own your identity and encryption keys. No platform lock-in, no central authority.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,#0891b2)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><rect x="9" y="9" width="6" height="1" rx="0.5"/></svg>
        </div>
        <h3>rSpace Ecosystem</h3>
        <p>Chat integrates with rSpace canvas, rVote governance, rFunds treasury, and more.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div class="rl-card" style="border:2px solid rgba(59,130,246,0.3);background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(20,184,166,0.05),rgba(100,116,139,0.1));text-align:center;padding:3rem 1.5rem;position:relative;overflow:hidden">
      <div style="position:absolute;top:0;right:0;width:16rem;height:16rem;background:rgba(59,130,246,0.1);border-radius:50%;filter:blur(48px)"></div>
      <div style="position:absolute;bottom:0;left:0;width:16rem;height:16rem;background:rgba(20,184,166,0.1);border-radius:50%;filter:blur(48px)"></div>
      <div style="position:relative">
        <span class="rl-badge">Try EncryptID</span>
        <h2 class="rl-heading" style="margin-top:1rem">See it in action</h2>
        <p class="rl-subtext" style="max-width:36rem;margin:0.5rem auto 0">
          Try the interactive EncryptID demo &mdash; register a passkey, derive encryption keys,
          and test signing and encryption right in your browser. No account needed.
        </p>
        <div class="rl-cta-row" style="margin-top:1.5rem">
          <a href="https://demo.rspace.online/rinbox" class="rl-cta-primary">
            Launch Demo &rarr;
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

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