/**
 * Forum module landing page — static HTML, no React.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rForum</span>
  <h1 class="rl-heading" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd,#d8b4fe);-webkit-background-clip:text;background-clip:text">(You)rForum, your community.</h1>
  <p class="rl-subtitle" style="background:linear-gradient(135deg,#a5b4fc,#c4b5fd,#d8b4fe);-webkit-background-clip:text;background-clip:text">Deploy Your Own Discourse Forum in Minutes</p>
  <p class="rl-subtext">
    Automated cloud provisioning for self-hosted Discourse.
    No DevOps required. Choose your region, configure your settings, and go live.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rforum" class="rl-cta-primary" id="ml-primary">Get Started</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 rForum Handles</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9881;</div>
        <h3>Automated Provisioning</h3>
        <p>One-click Discourse deployment. Server creation, installation, and configuration handled automatically.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9729;</div>
        <h3>Cloud VPS Deployment</h3>
        <p>Deploy on Hetzner Cloud in Germany, Finland, or the US. Transparent pricing with no markup.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127760;</div>
        <h3>DNS Integration</h3>
        <p>Automatic DNS setup for your subdomain via Cloudflare. SSL certificates provisioned with Let's Encrypt.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128736;</div>
        <h3>No DevOps Required</h3>
        <p>No command line, no SSH &mdash; just fill in your settings and watch your forum come online.</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>Configure</h3>
        <p>Choose your subdomain, server region, and instance size. Add SMTP credentials for email delivery. Set your admin email.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Provision</h3>
        <p>We create a cloud server on Hetzner, install Discourse, configure SSL via Let's Encrypt, and set up DNS. Takes about 10-15 minutes.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Go Live</h3>
        <p>Your forum is ready. Log in as admin, customize your community, invite members, and start conversations. Full SSH access included.</p>
      </div>
    </div>
  </div>
</section>

<!-- Pricing -->
<section class="rl-section" id="pricing">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Transparent Pricing</h2>
    <p class="rl-subtext" style="text-align:center">
      Pay only for the cloud server. Hetzner pricing passed through directly &mdash; no markup.
    </p>
    <div class="rl-grid-3" style="margin-top:2rem">
      <!-- Starter -->
      <div class="rl-card">
        <h3>Starter</h3>
        <p style="font-size:0.82rem;color:#94a3b8;margin-bottom:1rem">Small communities</p>
        <div style="font-size:2rem;font-weight:700;color:#e2e8f0;margin-bottom:0.25rem">
          &euro;3.79<span style="font-size:0.875rem;font-weight:400;color:#94a3b8">/mo</span>
        </div>
        <p style="font-size:0.75rem;color:#64748b;margin-bottom:1.25rem">Hetzner CX22</p>
        <ul class="rl-check-list">
          <li>2 vCPU cores</li>
          <li>4 GB RAM</li>
          <li>40 GB NVMe SSD</li>
          <li>Up to ~500 users</li>
        </ul>
      </div>

      <!-- Standard -->
      <div class="rl-card" style="border-color:rgba(99,102,241,0.5)">
        <span class="rl-badge" style="background:#6366f1;margin-bottom:0.5rem">RECOMMENDED</span>
        <h3>Standard</h3>
        <p style="font-size:0.82rem;color:#94a3b8;margin-bottom:1rem">Growing communities</p>
        <div style="font-size:2rem;font-weight:700;color:#e2e8f0;margin-bottom:0.25rem">
          &euro;6.80<span style="font-size:0.875rem;font-weight:400;color:#94a3b8">/mo</span>
        </div>
        <p style="font-size:0.75rem;color:#64748b;margin-bottom:1.25rem">Hetzner CX32</p>
        <ul class="rl-check-list">
          <li>4 vCPU cores</li>
          <li>8 GB RAM</li>
          <li>80 GB NVMe SSD</li>
          <li>Up to ~2,000 users</li>
        </ul>
      </div>

      <!-- Performance -->
      <div class="rl-card">
        <h3>Performance</h3>
        <p style="font-size:0.82rem;color:#94a3b8;margin-bottom:1rem">Large communities</p>
        <div style="font-size:2rem;font-weight:700;color:#e2e8f0;margin-bottom:0.25rem">
          &euro;13.80<span style="font-size:0.875rem;font-weight:400;color:#94a3b8">/mo</span>
        </div>
        <p style="font-size:0.75rem;color:#64748b;margin-bottom:1.25rem">Hetzner CX42</p>
        <ul class="rl-check-list">
          <li>8 vCPU cores</li>
          <li>16 GB RAM</li>
          <li>160 GB NVMe SSD</li>
          <li>Up to ~10,000 users</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- What You Get -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What You Get</h2>
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-card rl-card--center">
        <h3>Automated SSL</h3>
        <p>Let's Encrypt certificates provisioned automatically during setup.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Multiple Regions</h3>
        <p>Deploy in Germany, Finland, or the US East/West Coast.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Full SSH Access</h3>
        <p>Your server, your rules. SSH in anytime for custom configuration.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>One-Click Updates</h3>
        <p>Discourse's built-in admin panel handles version upgrades.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>DNS Management</h3>
        <p>Automatic DNS setup for *.rforum.online subdomains.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Real-Time Logs</h3>
        <p>Watch your forum provision step-by-step in the dashboard.</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 rForum.</p>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <h3>Discourse</h3>
        <p>The world's most popular open-source forum platform.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Hetzner Cloud API</h3>
        <p>Automated VPS provisioning in multiple regions.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Cloudflare API</h3>
        <p>DNS management and SSL termination.</p>
      </div>
      <div class="rl-card rl-card--center">
        <h3>Hono</h3>
        <p>Ultra-fast, lightweight API framework powering the backend.</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 rForum 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)rForum, your community.</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/rforum" class="rl-cta-primary">Get Started</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>
`;
}