/**
 * Inbox module landing page — static HTML, no React.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline" style="color:#06b6d4;background:rgba(6,182,212,0.1);border-color:rgba(6,182,212,0.2)">rInbox</span>
  <h1 class="rl-heading" style="background:linear-gradient(135deg,#67e8f9,#93c5fd,#c4b5fd);-webkit-background-clip:text;background-clip:text">
    Collaborative Multi-Sig Inbox
  </h1>
  <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"
       style="background:linear-gradient(135deg,#0891b2,#0e7490)">Open Inbox</a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- How it Works -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#67e8f9,#93c5fd);-webkit-background-clip:text;background-clip:text">How It Works</h2>
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-card">
        <div class="rl-icon-box" style="background:rgba(6,182,212,0.12);color:#06b6d4">
          <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
        </div>
        <h3>1. Connect Mailbox</h3>
        <p>
          Your team shares one real email address. Every member sees every thread
          in real-time &mdash; no forwarding, no BCC chains, no lost context.
        </p>
      </div>

      <div class="rl-card">
        <div class="rl-icon-box" style="background:rgba(59,130,246,0.12);color:#3b82f6">
          <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
          </svg>
        </div>
        <h3>2. Triage Together</h3>
        <p>
          Comment on any thread privately before replying. Tag members,
          discuss strategy, and reach consensus &mdash; all alongside the original message.
        </p>
      </div>

      <div class="rl-card">
        <div class="rl-icon-box" style="background:rgba(139,92,246,0.12);color:#8b5cf6">
          <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
          </svg>
        </div>
        <h3>3. Approve 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 rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#67e8f9,#93c5fd);-webkit-background-clip:text;background-clip:text">
      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">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center;background:linear-gradient(135deg,#67e8f9,#93c5fd);-webkit-background-clip:text;background-clip:text">
      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>

<!-- CTA -->
<section class="rl-section rl-section--alt">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading" style="background:linear-gradient(135deg,#67e8f9,#93c5fd);-webkit-background-clip:text;background-clip:text">
      Start collaborating on email
    </h2>
    <p class="rl-subtext">
      Sign in with your passkey to join a shared inbox.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rinbox" class="rl-cta-primary"
         style="background:linear-gradient(135deg,#0891b2,#0e7490)">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>
`;
}