/**
 * rChats landing page — rich content for rspace.online/rchats
 */

export function renderLanding(): string {
  return `
  <!-- Hero -->
  <div class="rl-hero">
    <span class="rl-tagline">rChats</span>
    <h1 class="rl-heading">Your conversations, your infrastructure.</h1>
    <p class="rl-subtitle">Encrypted Community Messaging</p>
    <p class="rl-subtext">
      Real-time community chat with channels &amp; threads, end-to-end encrypted
      by default. Local-first, works offline, and scoped to each rSpace community.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rchats" class="rl-cta-primary">Try the Demo</a>
      <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
    </div>
  </div>

  <!-- Native Encrypted Chat -->
  <section class="rl-section">
    <div class="rl-container">
      <h2 class="rl-heading" style="text-align:center">Native Encrypted Chat</h2>
      <p class="rl-subtext" style="text-align:center">Community messaging built from the ground up for privacy, speed, and self-hosting.</p>
      <div class="rl-grid-4">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128172;</div>
          <h3>Channels &amp; Threads</h3>
          <p>Organize conversations by topic with channels. Dive deeper with threaded replies without cluttering the main feed.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128274;</div>
          <h3>End-to-End Encrypted</h3>
          <p>Messages encrypted with EncryptID passkeys. The server never sees plaintext &mdash; only community members can read messages.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128247;</div>
          <h3>Local-First (CRDT)</h3>
          <p>Built on Automerge CRDTs. Send messages offline, sync seamlessly when reconnected. Your data lives on your device first.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#127968;</div>
          <h3>Space-Scoped</h3>
          <p>Each rSpace community gets its own isolated chat instance. Channels, members, and history &mdash; all contained within your space.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Connect Your Chats -->
  <section class="rl-section rl-section--alt">
    <div class="rl-container">
      <h2 class="rl-heading" style="text-align:center">Connect Your Chats</h2>
      <p class="rl-subtext" style="text-align:center">Already using Slack, Discord, or Matrix? Bridge them into rSpace for a unified community view.</p>
      <div class="rl-grid-4">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128279;</div>
          <h3>Multi-Platform Bridge</h3>
          <p>Aggregate channels from Slack, Discord, Matrix, Telegram, and Mattermost into a single interface.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128229;</div>
          <h3>Unified Inbox</h3>
          <p>Read and reply to messages across all connected platforms from one place. Similar pattern to rInbox's multi-IMAP aggregation.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128259;</div>
          <h3>Two-Way Sync</h3>
          <p>Messages flow both directions. Reply from rChats and it appears in the original platform. No context lost.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#127758;</div>
          <h3>Community-Wide View</h3>
          <p>Bridge external channels into rSpace channels for a single community view, regardless of where members actually chat.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Data Ecosystem -->
  <section class="rl-section">
    <div class="rl-container">
      <h2 class="rl-heading" style="text-align:center">Part of a Self-Hosted Data Ecosystem</h2>
      <p class="rl-subtext" style="text-align:center">rChats isn't a standalone tool &mdash; it's one node in a wider network of self-hosted services that keep your data under your control.</p>
      <div class="rl-grid-3">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128197;</div>
          <h3>Meeting Integration</h3>
          <p>Start a rMeets video call from any channel. Meeting notes, recordings, and summaries flow back into the chat thread.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128196;</div>
          <h3>Tasks &amp; Notes</h3>
          <p>Turn chat messages into rTasks action items or rNotes documents. Keep conversations and decisions linked.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128272;</div>
          <h3>EncryptID SSO</h3>
          <p>One identity across the entire rSpace ecosystem. Passkey-based authentication, no passwords to manage.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Roadmap -->
  <section class="rl-section rl-section--alt">
    <div class="rl-container">
      <h2 class="rl-heading" style="text-align:center">On the Horizon</h2>
      <p class="rl-subtext" style="text-align:center">Features in development for the rChats roadmap.</p>
      <div class="rl-grid-3">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#129302;</div>
          <h3>AI Summaries</h3>
          <span class="rl-badge">Coming Soon</span>
          <p>Catch up on long threads with AI-generated summaries. Run locally or via your own LLM endpoint &mdash; no data sent externally.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128268;</div>
          <h3>Webhooks &amp; Bots</h3>
          <span class="rl-badge">Coming Soon</span>
          <p>Build custom integrations with incoming and outgoing webhooks. Connect CI/CD, monitoring, and other services to channels.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#127908;</div>
          <h3>Voice Channels</h3>
          <span class="rl-badge">Coming Soon</span>
          <p>Drop into voice channels powered by Jitsi. Persistent rooms for your community &mdash; always on, always private.</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">Your conversations belong to you.</h2>
      <p class="rl-subtext">Start chatting on infrastructure you control, or create a space for your community.</p>
      <div class="rl-cta-row">
        <a href="https://demo.rspace.online/rchats" class="rl-cta-primary">Try the Demo</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>`;
}