/**
 * Photos module landing page — rich content for rspace.online/rphotos
 */

export function renderLanding(): string {
	return `
  <!-- Hero -->
  <div class="rl-hero">
    <span class="rl-tagline">rPhotos</span>
    <h1 class="rl-heading">Community Photo Commons</h1>
    <p class="rl-subtext">
      Share memories with your community, powered by Immich.
      Self-hosted, AI-organized, and privacy-first.
      (You)rPhotos, your moments.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rphotos" class="rl-cta-primary" id="ml-primary">Browse Gallery</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-step">
          <div class="rl-step__num">1</div>
          <h3>Upload Photos</h3>
          <p>Drop photos from any device. Bulk upload entire albums or individual shots.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">2</div>
          <h3>Auto-Organize</h3>
          <p>Immich's AI detects faces and objects, sorting your photos into smart groups automatically.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">3</div>
          <h3>Share Albums</h3>
          <p>Create shared albums for events, projects, or teams. Everyone in the space can contribute.</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>
      <p class="rl-subtext" style="text-align:center;">
        A full-featured photo platform that respects your community's data.
      </p>
      <div class="rl-grid-4">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#129302;</div>
          <h3>Immich-Powered</h3>
          <p>AI-driven face and object detection for automatic organization, search, and discovery.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128247;</div>
          <h3>Shared Albums</h3>
          <p>Collaborative photo albums for events, gatherings, and ongoing projects. Everyone can add.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128197;</div>
          <h3>Timeline View</h3>
          <p>Browse photos chronologically. Scroll through your community's visual history day by day.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128274;</div>
          <h3>Privacy-First</h3>
          <p>Self-hosted storage means your photos never leave your infrastructure. No third-party scanning.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="rl-section">
    <div class="rl-container" style="text-align:center;">
      <h2 class="rl-heading">Your photos, your community</h2>
      <p class="rl-subtext">
        Try the demo gallery or create a space to start your own photo commons.
      </p>
      <div class="rl-cta-row">
        <a href="https://demo.rspace.online/rphotos" class="rl-cta-primary">Browse Gallery</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>`;
}