/**
 * rTasks landing page — collective task management.
 * Ported from rtasks-online Next.js page.tsx (shadcn/ui + Lucide).
 */
export function renderLanding(): string {
  return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">Part of the rSpace Ecosystem</span>
  <h1 class="rl-heading">Collective<br>
    <span style="background:linear-gradient(135deg,#3b82f6,#14b8a6);-webkit-background-clip:text;background-clip:text;color:transparent">Task Management</span>
  </h1>
  <p class="rl-subtext">
    Create <strong style="color:#e2e8f0">Spaces</strong> for your community to collaborate on shared projects.
    Track tasks through pipelines with <strong style="color:#e2e8f0">real-time kanban boards</strong> powered
    by markdown-native task management.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rtasks" class="rl-cta-primary" id="ml-primary">
      Get Started &rarr;
    </a>
    <a href="https://demo.rspace.online/rtasks" class="rl-cta-secondary">View Dashboard</a>
  </div>
</div>

<!-- How It Works -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:1.5rem">
      <span class="rl-badge">How It Works</span>
      <h2 class="rl-heading" style="margin-top:0.75rem">rTasks in 30 Seconds</h2>
      <p class="rl-subtext">
        <strong style="color:#3b82f6">Create a Space</strong> for your community,
        <strong style="color:#14b8a6">add tasks</strong> to your pipeline, and
        <strong style="color:#e2e8f0">track progress</strong> together in real-time.
      </p>
    </div>

    <div class="rl-grid-3">
      <div class="rl-card" style="border:2px solid rgba(59,130,246,0.4);background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(59,130,246,0.05))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="height:2rem;width:2rem;border-radius:50%;background:#3b82f6;display:flex;align-items:center;justify-content:center">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 002-2V8a2 2 0 00-2-2h-7.9a2 2 0 01-1.69-.9L9.6 3.9A2 2 0 007.93 3H4a2 2 0 00-2 2v13a2 2 0 002 2h16z"/><rect x="8" y="10" width="8" height="6" rx="1"/></svg>
          </div>
          <h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">1. Create a Space</h3>
        </div>
        <p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
          Set up a workspace for your project or community. Configure your pipeline
          statuses and invite members.
          <strong style="color:#e2e8f0;display:block;margin-top:0.5rem">Each Space gets its own kanban board.</strong>
        </p>
      </div>

      <div class="rl-card" style="border:2px solid rgba(20,184,166,0.4);background:linear-gradient(135deg,rgba(20,184,166,0.1),rgba(20,184,166,0.05))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="height:2rem;width:2rem;border-radius:50%;background:#14b8a6;display:flex;align-items:center;justify-content:center">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
          </div>
          <h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">2. Add Tasks</h3>
        </div>
        <p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
          Create tasks with descriptions, priorities, labels, and acceptance criteria.
          Assign them to team members.
          <strong style="color:#e2e8f0;display:block;margin-top:0.5rem">Tasks are stored as plain markdown files.</strong>
        </p>
      </div>

      <div class="rl-card" style="border:2px solid rgba(100,116,139,0.4);background:linear-gradient(135deg,rgba(100,116,139,0.1),rgba(100,116,139,0.05))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="height:2rem;width:2rem;border-radius:50%;background:#64748b;display:flex;align-items:center;justify-content:center">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
          </div>
          <h3 style="font-weight:700;font-size:1.125rem;color:#e2e8f0">3. Collaborate</h3>
        </div>
        <p style="font-size:0.875rem;color:#94a3b8;line-height:1.6">
          Drag tasks through your pipeline in real-time. Everyone sees updates instantly
          via WebSocket sync.
          <strong style="color:#e2e8f0;display:block;margin-top:0.5rem">Work together, stay in sync.</strong>
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Features Row 1 -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Built for Community Collaboration</h2>
    <p class="rl-subtext" style="text-align:center">Everything you need to coordinate shared work</p>

    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#3b82f6,rgba(59,130,246,0.6))">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
        </div>
        <h3>Kanban Boards</h3>
        <p>Drag-and-drop tasks through customizable pipeline stages.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,rgba(20,184,166,0.6))">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4-4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
        </div>
        <h3>Team Spaces</h3>
        <p>Create isolated workspaces with role-based access control.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
        </div>
        <h3>Real-time Sync</h3>
        <p>Changes appear instantly for all members via WebSocket.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#f97316,#d97706)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 01-9 9"/></svg>
        </div>
        <h3>Markdown Native</h3>
        <p>Tasks stored as plain .md files. Version-controllable, AI-friendly.</p>
      </div>
    </div>

    <!-- Features Row 2 -->
    <div class="rl-grid-4" style="margin-top:1rem">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#a855f7,#7c3aed)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
        </div>
        <h3>Custom Pipelines</h3>
        <p>Define your own workflow stages beyond To Do / In Progress / Done.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#3b82f6,#0891b2)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
        </div>
        <h3>Notifications</h3>
        <p>Stay informed when tasks are assigned, updated, or completed.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#f43f5e,#ec4899)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        </div>
        <h3>Acceptance Criteria</h3>
        <p>Define checklists for what &ldquo;done&rdquo; means on each task.</p>
      </div>

      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,#0891b2)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" 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>rSpace Ecosystem</h3>
        <p>Integrates with rVote, rMaps, rNotes, and the full r* suite.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div class="rl-card" style="border:2px solid rgba(59,130,246,0.3);background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(20,184,166,0.05),rgba(100,116,139,0.1));text-align:center;padding:3rem 1.5rem;position:relative;overflow:hidden">
      <div style="position:absolute;top:0;right:0;width:16rem;height:16rem;background:rgba(59,130,246,0.1);border-radius:50%;filter:blur(48px)"></div>
      <div style="position:absolute;bottom:0;left:0;width:16rem;height:16rem;background:rgba(20,184,166,0.1);border-radius:50%;filter:blur(48px)"></div>
      <div style="position:relative">
        <span class="rl-badge">Join the rSpace Ecosystem</span>
        <h2 class="rl-heading" style="margin-top:1rem">Ready to collaborate?</h2>
        <p class="rl-subtext" style="max-width:36rem;margin:0.5rem auto 0">
          Create a Space for your community and start tracking tasks together.
          Invite members, configure your pipeline, and ship faster as a team.
        </p>
        <div class="rl-cta-row" style="margin-top:1.5rem">
          <a href="https://demo.rspace.online/rtasks" class="rl-cta-primary">
            Create a Space &rarr;
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="rl-back">
  <a href="/">&larr; Back to rSpace</a>
</div>`;
}
