/**
 * Inbox module landing page — static HTML, no React.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rInbox</span>
  <h1 class="rl-heading" style="background:linear-gradient(135deg,#67e8f9,#93c5fd,#c4b5fd);-webkit-background-clip:text;background-clip:text">(You)rInbox, your team's voice.</h1>
  <p class="rl-subtitle" style="background:linear-gradient(135deg,#67e8f9,#93c5fd,#c4b5fd);-webkit-background-clip:text;background-clip:text">Collaborative Multi-Sig Inbox</p>
  <p class="rl-subtext">
    A shared email client where teams read, discuss, and approve messages
    together &mdash; with cryptographic multi-signature workflows before anything gets sent.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rinbox" class="rl-cta-primary" id="ml-primary">Open Inbox</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 rInbox Handles</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128231;</div>
        <h3>Shared Team Email</h3>
        <p>Your team shares one real email address. Every member sees every thread in real time &mdash; no forwarding, no BCC chains.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9989;</div>
        <h3>Multi-Signature Approval</h3>
        <p>Outbound emails require M-of-N cryptographic signatures before sending. Every approval is auditable &mdash; no rogue replies.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128172;</div>
        <h3>Threaded Discussions</h3>
        <p>Comment on any thread privately before replying. Tag members, discuss strategy, and reach consensus alongside the original message.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128273;</div>
        <h3>Cryptographic Signing</h3>
        <p>Every outbound message is cryptographically signed. Full audit trail of approvals, rejections, and edits.</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">
        <div class="rl-step__num">1</div>
        <h3>Connect a Mailbox</h3>
        <p>Your team shares one real email address. Every member sees every thread in real time &mdash; no forwarding, no lost context.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Discuss Messages as a Team</h3>
        <p>Comment on any thread privately before replying. Tag members, discuss strategy, and reach consensus alongside the original message.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Approve and Send with Multi-Sig</h3>
        <p>Outbound emails require M-of-N cryptographic signatures before sending. Every approval is auditable &mdash; no rogue replies.</p>
      </div>
    </div>
  </div>
</section>

<!-- Collaboration Features -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Collaboration Features</h2>
    <p class="rl-subtext" style="text-align:center">Built for collective intelligence, not individual productivity.</p>
    <div class="rl-grid-2" style="margin-top:2rem">
      <div class="rl-card">
        <h3 style="color:#06b6d4;margin-bottom:0.75rem">Real-Time Collaboration</h3>
        <ul class="rl-check-list">
          <li><strong>Threaded Comments</strong> &mdash; discuss any email privately before replying</li>
          <li><strong>Draft Reviews</strong> &mdash; collaborative draft editing with inline suggestions</li>
          <li><strong>Forwarding Rules</strong> &mdash; route incoming messages by sender, subject, or tag</li>
          <li><strong>Inline Signatures</strong> &mdash; per-mailbox signature templates with merge fields</li>
          <li><strong>Read Receipts</strong> &mdash; see who has read each thread and when</li>
        </ul>
      </div>
      <div class="rl-card">
        <h3 style="color:#8b5cf6;margin-bottom:0.75rem">Approval Workflows</h3>
        <ul class="rl-check-list">
          <li><strong>Multi-sig sending</strong> &mdash; outbound emails require M-of-N approval</li>
          <li><strong>Configurable thresholds</strong> &mdash; set approval requirements per mailbox</li>
          <li><strong>Audit trail</strong> &mdash; every approval, rejection, and edit is logged</li>
          <li><strong>Role-based access</strong> &mdash; Admin, Reviewer, Approver, Viewer, Bot</li>
          <li><strong>Deadline alerts</strong> &mdash; notifications when approvals are waiting</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- Team Roles -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Team Roles</h2>
    <p class="rl-subtext" style="text-align:center">Fine-grained access control for every team member.</p>
    <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:0.75rem;margin-top:2rem">
      <div class="rl-card rl-card--center" style="padding:1.25rem">
        <p style="font-size:0.875rem;font-weight:600;color:#06b6d4">Admin</p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Full control, manage members</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:1.25rem">
        <p style="font-size:0.875rem;font-weight:600;color:#3b82f6">Reviewer</p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Read, comment, suggest edits</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:1.25rem">
        <p style="font-size:0.875rem;font-weight:600;color:#8b5cf6">Approver</p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Sign outbound emails</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:1.25rem">
        <p style="font-size:0.875rem;font-weight:600;color:#94a3b8">Viewer</p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Read-only access</p>
      </div>
      <div class="rl-card rl-card--center" style="padding:1.25rem">
        <p style="font-size:0.875rem;font-weight:600;color:#94a3b8">Bot</p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.35rem">Automated integrations</p>
      </div>
    </div>
  </div>
</section>

<!-- Built on Open Source -->
<section class="rl-section">
  <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 rInbox.</p>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <h3>ImapFlow</h3>
        <p>High-performance IMAP client for real-time email synchronization.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Mailparser</h3>
        <p>Email parsing and MIME handling for reliable message processing.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Gnosis Safe</h3>
        <p>Multisig approval protocol adapted for email signing workflows.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>PostgreSQL</h3>
        <p>Threads, approvals, and audit trails stored in a reliable relational database.</p>
      </div>
    </div>
  </div>
</section>

<!-- Your Data, Protected -->
<section class="rl-section rl-section--alt">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Your Data, Protected</h2>
    <p class="rl-subtext">How rInbox 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">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">(You)rInbox, your team's voice.</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/rinbox" class="rl-cta-primary">Open Inbox</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>
`;
}