/**
 * rWork landing page — collective task management.
 */
export function renderLanding(): string {
  return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rWork</span>
  <h1 class="rl-heading">(You)rWork, your flow.</h1>
  <p class="rl-subtitle">Get things done, together</p>
  <p class="rl-subtext">
    Kanban boards, team spaces, and real-time collaboration &mdash; built for groups
    that share work, not just assign it.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rwork" class="rl-cta-primary" id="ml-primary">Start Working</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 rWork Handles</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128203;</div>
        <h3>Kanban Boards</h3>
        <p>Drag-and-drop columns with customizable statuses. See everything at a glance.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9745;</div>
        <h3>Task Management</h3>
        <p>Create tasks with titles, descriptions, labels, and priorities. Track progress across your team.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128200;</div>
        <h3>Activity Logging</h3>
        <p>Every change is tracked. See who moved what, when, and why &mdash; full audit trail.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128101;</div>
        <h3>Workspace Collaboration</h3>
        <p>Each workspace is scoped to a space. Members share boards, tasks, and activity in real time.</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">
        <span class="rl-step__num">1</span>
        <h3>Create a workspace</h3>
        <p>Every workspace lives inside an rSpace &mdash; shared by default with your team.</p>
      </div>
      <div class="rl-step">
        <span class="rl-step__num">2</span>
        <h3>Add tasks and boards</h3>
        <p>Create tasks with titles, descriptions, labels, and priorities. Drag them across columns.</p>
      </div>
      <div class="rl-step">
        <span class="rl-step__num">3</span>
        <h3>Track progress together</h3>
        <p>Assign, comment, and track progress in real time. Everyone sees the same board.</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 rWork.</p>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128293;</div>
        <h3>Hono</h3>
        <p>Ultrafast web framework for the API layer. Lightweight, edge-ready, and built for speed.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128451;</div>
        <h3>PostgreSQL</h3>
        <p>Rock-solid relational database for task storage, workspaces, boards, and activity logs.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9889;</div>
        <h3>Bun</h3>
        <p>All-in-one JavaScript runtime. Fast startup, native TypeScript, and built-in bundling.</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 rWork 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)rWork, your flow.</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/rwork" class="rl-cta-primary">Start Working</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>`;
}