/**
 * rMeets landing page — rich content for rspace.online/rmeets
 */

export function renderLanding(): string {
  return `
  <!-- Hero -->
  <div class="rl-hero">
    <span class="rl-tagline">rMeets</span>
    <h1 class="rl-heading">Your meetings, your infrastructure.</h1>
    <p class="rl-subtitle">Self-Hosted Video Conferencing</p>
    <p class="rl-subtext">
      Secure, private video meetings on infrastructure you control.
      Built on Jitsi Meet &mdash; no accounts, no tracking, no data harvesting.
      Just open a room and talk.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rmeets" class="rl-cta-primary" id="ml-primary">Start a Meeting</a>
      <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
    </div>
  </div>

  <!-- Why Self-Host -->
  <section class="rl-section">
    <div class="rl-container">
      <h2 class="rl-heading" style="text-align:center">Why Self-Hosted Meetings?</h2>
      <p class="rl-subtext" style="text-align:center">Every Zoom call, every Google Meet &mdash; routed through servers you don't control, recorded by policies you didn't write.</p>
      <div class="rl-grid-4">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#127968;</div>
          <h3>Your Server, Your Rules</h3>
          <p>Video streams never leave your infrastructure. No third-party servers, no corporate surveillance, no data mining.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128274;</div>
          <h3>Data Sovereignty</h3>
          <p>Recordings, transcripts, and meeting data stay where you put them. Comply with your own data policies, not someone else's.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128101;</div>
          <h3>No Accounts Required</h3>
          <p>Share a link and anyone can join. No sign-ups, no app downloads, no tracking pixels. Just video calls that work.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#9881;</div>
          <h3>Fully Customizable</h3>
          <p>Modify the interface, add integrations, set your own branding. Open source means you can adapt every detail.</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>Open a Room</h3>
          <p>Click Quick Meet for an instant room or type a custom room name. No sign-up needed.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">2</div>
          <h3>Share the Link</h3>
          <p>Send the room URL to anyone. They join directly in the browser &mdash; no downloads, no plugins.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">3</div>
          <h3>Meet Privately</h3>
          <p>All video and audio routed through your own Jitsi server. Nothing touches third-party infrastructure.</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">rMeets 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">&#128196;</div>
          <h3>Meeting Notes &amp; Docs</h3>
          <p>Capture notes in rNotes, attach files in rFiles, link action items to rTasks &mdash; all within the same space, all self-hosted.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128197;</div>
          <h3>Calendar Integration</h3>
          <p>Schedule meetings through rCal and rSchedule. Room links auto-generated, invites sent through your own mail server.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128172;</div>
          <h3>Community Spaces</h3>
          <p>Each rSpace gets its own meeting rooms. Team calls, community events, and working sessions &mdash; scoped to your group.</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">Built-in Intelligence</h2>
      <p class="rl-subtext" style="text-align:center">Every meeting automatically recorded, transcribed, and summarized &mdash; all on your own infrastructure.</p>
      <div class="rl-grid-3">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#127908;</div>
          <h3>Local Transcription</h3>
          <p>Speech-to-text powered by Whisper running on your server. Diarized transcripts with speaker identification &mdash; audio never leaves your infrastructure.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128421;</div>
          <h3>Bring Your Own Server</h3>
          <span class="rl-badge">Coming Soon</span>
          <p>Point rMeets at any Jitsi instance. Run your own hardware, choose your jurisdiction, scale on your terms.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#129504;</div>
          <h3>AI Meeting Intelligence</h3>
          <p>Automatic summaries, key decisions, and action items extracted from every meeting. Full-text search across all your transcripts.</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">Standing on the shoulders of battle-tested open-source infrastructure.</p>
      <div class="rl-grid-3">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128249;</div>
          <h3>Jitsi Meet</h3>
          <p>Industry-leading open-source video conferencing. WebRTC-based, end-to-end encrypted, and trusted by millions.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128293;</div>
          <h3>Hono</h3>
          <p>Ultrafast web framework for the rSpace API layer. Lightweight, type-safe, and runs on any JavaScript runtime.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128737;</div>
          <h3>Traefik</h3>
          <p>Automatic TLS, reverse proxy, and load balancing. Every self-hosted service gets secure routing out of the box.</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 meetings belong to you.</h2>
      <p class="rl-subtext">Start a call on infrastructure you control, or create a space for your community.</p>
      <div class="rl-cta-row">
        <a href="https://demo.rspace.online/rmeets" class="rl-cta-primary">Start a Meeting</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>`;
}