/**
 * rData — rich landing page body.
 * Returned by landingPage() in the module export;
 * the shell wraps it with header, CSS, and analytics.
 */
export function renderLanding(): string {
	const demo = "https://demo.rspace.online/rdata";

	return `
<!-- Hero -->
<section class="rl-hero">
  <span class="rl-tagline">rData</span>
  <h1 class="rl-heading">Privacy-First Analytics</h1>
  <p class="rl-subtext">
    See how your community engages without tracking individuals.
    No cookies, no consent banners, no third-party data &mdash; just
    clean, real-time metrics from your own server.
    (You)rData, your signal.
  </p>
  <div class="rl-cta-row">
    <a href="${demo}" class="rl-cta-primary" id="ml-primary">View Analytics</a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</section>

<!-- 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-step">
        <div class="rl-step__num">1</div>
        <h3>Auto-Instrumented</h3>
        <p>Every rSpace module is automatically tracked &mdash; no code changes, no tag managers.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>View Dashboard</h3>
        <p>Open rData to see page views, active visitors, referrers, and top content in real time.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Share Insights</h3>
        <p>Export stats or embed dashboard widgets in your canvas to keep the community informed.</p>
      </div>
    </div>
  </div>
</section>

<!-- Features -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Features</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128274;</div>
        <h3>No Cookies Required</h3>
        <p>Umami uses a privacy-friendly fingerprinting method. Zero cookies, zero local storage.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9989;</div>
        <h3>GDPR Compliant</h3>
        <p>No personal data collected. No consent banner needed. Compliant out of the box.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9889;</div>
        <h3>Real-Time Dashboard</h3>
        <p>Active visitors, page views, bounce rate, and session duration update live.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#129470;</div>
        <h3>Lightweight Script</h3>
        <p>Under 2 KB tracker script. No impact on page load performance.</p>
      </div>
    </div>
  </div>
</section>

<!-- Why Self-Hosted -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Why Self-Hosted Analytics?</h2>
    <p class="rl-subtext" style="text-align:center">
      Compare rData with third-party analytics platforms.
    </p>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128683;</div>
        <h3>No Third-Party Data</h3>
        <p>Your visitor metrics never leave your server. No ad networks, no data brokers, no surprises.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128683;</div>
        <h3>No Cookie Banners</h3>
        <p>Because no cookies are set, you skip the annoying consent popups entirely.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#129471;</div>
        <h3>Sub-2 KB Script</h3>
        <p>Google Analytics loads 45 KB+. The Umami tracker is under 2 KB &mdash; 20x lighter.</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">Analytics Without the Guilt</h2>
    <p class="rl-subtext">
      Respect your visitors. Understand your community. Keep your data.
    </p>
    <div class="rl-cta-row">
      <a href="${demo}" class="rl-cta-primary">View Analytics</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>`;
}