/**
 * Swag module landing page — rich content for rspace.online/rswag
 */

export function renderLanding(): string {
	return `
  <!-- Hero -->
  <div class="rl-hero">
    <span class="rl-tagline">rSwag</span>
    <h1 class="rl-heading">(You)rSwag, your brand.</h1>
    <p class="rl-subtitle">Design Community Merch</p>
    <p class="rl-subtext">
      Stickers, posters, and tees from your browser.
      Upload a design, pick a product, and get print-ready files instantly.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rswag" class="rl-cta-primary" id="ml-primary">Start Designing</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 rSwag Handles</h2>
      <div class="rl-grid-4">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128424;</div>
          <h3>Print-on-Demand Merch Designer</h3>
          <p>Upload artwork and generate print-ready files with correct DPI, bleed margins, and color profiles.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#129534;</div>
          <h3>Stickers, Posters, Tees &amp; Patches</h3>
          <p>Four product types with professional print specs built in. Vinyl stickers, A3 posters, DTG tees, and embroidered patches.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128065;</div>
          <h3>Live Preview Mockups</h3>
          <p>See your design on product mockups before committing. Adjust and iterate in real time.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128722;</div>
          <h3>rCart Integration</h3>
          <p>Send finished designs directly to <a href="/rcart" style="color:#14b8a6;">rCart</a> for community ordering and fulfillment.</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>Choose a Product</h3>
          <p>Pick from stickers, posters, t-shirts, or patches. Each product has print-ready specs built in.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">2</div>
          <h3>Upload Your Design</h3>
          <p>Drop in your artwork. Sharp resizes, crops, and optimizes for the selected product automatically.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">3</div>
          <h3>Preview and Order</h3>
          <p>See a live mockup, download print-ready files, or send directly to rCart for community ordering.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Products (module-specific) -->
  <section class="rl-section">
    <div class="rl-container">
      <h2 class="rl-heading" style="text-align:center">Products</h2>
      <p class="rl-subtext" style="text-align:center">
        Four product types, each with professional print specs.
      </p>
      <div class="rl-grid-4">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#129534;</div>
          <h3>Stickers</h3>
          <p>Vinyl die-cut stickers. Weatherproof, UV-resistant, and ready for laptops, bottles, and walls.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128444;</div>
          <h3>Posters</h3>
          <p>A3 and A2 prints at 300 DPI. Gallery-quality paper with bleed margins included.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128085;</div>
          <h3>T-Shirts</h3>
          <p>Direct-to-garment (DTG) printing. Full-color designs on comfortable, pre-shrunk cotton.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#129525;</div>
          <h3>Patches</h3>
          <p>Embroidered patches with iron-on backing. Perfect for jackets, bags, and hats.</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 rSwag.</p>
      <div class="rl-grid-3">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#9889;</div>
          <h3>Sharp</h3>
          <p>Server-side image processing, resizing, and format conversion. Fast and memory-efficient.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128293;</div>
          <h3>Hono</h3>
          <p>Ultrafast web framework for the API layer. Lightweight, type-safe, and runs on any JavaScript runtime.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128007;</div>
          <h3>Bun</h3>
          <p>All-in-one JavaScript runtime. Fast startup, built-in bundler, and native TypeScript support.</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 rSwag 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">(You)rSwag, your brand.</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/rswag" class="rl-cta-primary">Start Designing</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>`;
}