/**
 * rForum landing page — Discourse forum provisioning.
 * Ported from /opt/apps/rforum-online/src/app/page.tsx
 */
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>

<!-- How It Works -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">How It Works</h2>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(99,102,241,0.15)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
        </div>
        <h3>1. 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-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(139,92,246,0.15)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </div>
        <h3>2. 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-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(168,85,247,0.15)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#c084fc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
        <h3>3. 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 rl-section--alt" 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">
  <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">
        <div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <h3>Automated SSL</h3>
        <p>Let's Encrypt certificates provisioned automatically during setup.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
        </div>
        <h3>Multiple Regions</h3>
        <p>Deploy in Germany, Finland, or the US East/West Coast.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 15l3-3 3 3"/><path d="M8 8h.01M12 8h.01"/></svg>
        </div>
        <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">
        <div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
        </div>
        <h3>One-Click Updates</h3>
        <p>Discourse's built-in admin panel handles version upgrades.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"/></svg>
        </div>
        <h3>DNS Management</h3>
        <p>Automatic DNS setup for *.rforum.online subdomains.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(99,102,241,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        </div>
        <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 rl-section--alt">
  <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">
        <div class="rl-icon-box" style="background:rgba(139,92,246,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
        </div>
        <h3>Discourse</h3>
        <p>The world's most popular open-source forum platform.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(139,92,246,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
        </div>
        <h3>Hetzner Cloud API</h3>
        <p>Automated VPS provisioning in multiple regions.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(139,92,246,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <h3>Cloudflare API</h3>
        <p>DNS management and SSL termination.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:rgba(139,92,246,0.12)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
        <h3>Hono</h3>
        <p>Ultra-fast, lightweight API framework powering the backend.</p>
      </div>
    </div>
  </div>
</section>

<!-- Your Data, Protected -->
<section class="rl-section">
  <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 rl-section--alt">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Ready to launch your community?</h2>
    <p class="rl-subtext">Deploy a production Discourse forum in under 15 minutes. No DevOps experience needed.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rforum" class="rl-cta-primary">Launch Your Forum</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>`;
}
