/**
 * rSocials — 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/rsocials";

	return `
<!-- Hero -->
<section class="rl-hero">
  <span class="rl-tagline">rSocials</span>
  <h1 class="rl-heading">Social Media Under Your Control</h1>
  <p class="rl-subtext">
    Schedule, publish, and analyze across every major platform &mdash; all
    from your self-hosted rSpace instance. No per-seat pricing, no
    third-party data mining.
  </p>
  <div class="rl-cta-row">
    <a href="${demo}" class="rl-cta-primary" id="ml-primary">Try Demo</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>Connect Platforms</h3>
        <p>Link your X/Twitter, LinkedIn, Instagram, TikTok, and more in one place.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Schedule Content</h3>
        <p>Draft posts, attach media, pick dates, and queue them up across every channel.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Publish &amp; Analyze</h3>
        <p>Posts go live on schedule. Track engagement, reach, and growth from a single dashboard.</p>
      </div>
    </div>
  </div>
</section>

<!-- Supported Platforms -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Supported Platforms</h2>
    <p class="rl-subtext" style="text-align:center">
      Publish everywhere your audience lives &mdash; 16 platforms and counting.
    </p>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center"><h3>X / Twitter</h3></div>
      <div class="rl-card rl-card--center"><h3>LinkedIn</h3></div>
      <div class="rl-card rl-card--center"><h3>Facebook</h3></div>
      <div class="rl-card rl-card--center"><h3>Instagram</h3></div>
      <div class="rl-card rl-card--center"><h3>TikTok</h3></div>
      <div class="rl-card rl-card--center"><h3>YouTube</h3></div>
      <div class="rl-card rl-card--center"><h3>Pinterest</h3></div>
      <div class="rl-card rl-card--center"><h3>Reddit</h3></div>
      <div class="rl-card rl-card--center"><h3>Threads</h3></div>
      <div class="rl-card rl-card--center"><h3>BlueSky</h3></div>
      <div class="rl-card rl-card--center"><h3>Mastodon</h3></div>
      <div class="rl-card rl-card--center"><h3>Dribbble</h3></div>
      <div class="rl-card rl-card--center"><h3>Slack</h3></div>
      <div class="rl-card rl-card--center"><h3>Discord</h3></div>
      <div class="rl-card rl-card--center"><h3>Telegram</h3></div>
      <div class="rl-card rl-card--center"><h3>RSS</h3></div>
    </div>
  </div>
</section>

<!-- Features -->
<section class="rl-section">
  <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">&#128197;</div>
        <h3>Calendar View</h3>
        <p>Visual month/week/day planner so you never double-post or miss a slot.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#9997;</div>
        <h3>AI Copywriting</h3>
        <p>Generate caption variations, hashtags, and thread hooks with a single click.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127912;</div>
        <h3>Post Designer</h3>
        <p>Resize images, add text overlays, and preview how posts look on each platform.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128101;</div>
        <h3>Team Collaboration</h3>
        <p>Invite editors &amp; approvers. Review queues keep quality high.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128736;</div>
        <h3>Per-Platform Optimization</h3>
        <p>Tailor copy, image crops, and hashtags for each network automatically.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128246;</div>
        <h3>RSS Auto-Post</h3>
        <p>Watch any RSS feed and auto-publish new items to selected channels.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128200;</div>
        <h3>Analytics Dashboard</h3>
        <p>Unified metrics across all platforms: impressions, clicks, engagement rate.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127760;</div>
        <h3>rSpace Ecosystem</h3>
        <p>Connect to <a href="/rpubs" style="color:#14b8a6">rPubs</a>, <a href="/rforum" style="color:#14b8a6">rForum</a>, and more for seamless cross-posting.</p>
      </div>
    </div>
  </div>
</section>

<!-- Why Self-Hosted -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Why Self-Hosted?</h2>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128274;</div>
        <h3>Data Sovereignty</h3>
        <p>API tokens and analytics stay on your server. No third-party vendor sees your audience data.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128176;</div>
        <h3>No Per-Seat Pricing</h3>
        <p>Add unlimited team members. Pay only for hosting, not per-user SaaS fees.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128268;</div>
        <h3>Open Source &amp; Extensible</h3>
        <p>Fork it, theme it, add custom integrations. Postiz under the hood, rSpace on top.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Ready to Own Your Social Presence?</h2>
    <p class="rl-subtext">
      Deploy rSocials in your rSpace and start scheduling in minutes.
    </p>
    <div class="rl-cta-row">
      <a href="${demo}" class="rl-cta-primary">Try 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>`;
}