/**
 * rNetwork — 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/rnetwork";

	return `
<!-- Hero -->
<section class="rl-hero">
  <span class="rl-tagline">rNetwork</span>
  <h1 class="rl-heading">See the web of trust</h1>
  <p class="rl-subtext">
    Map the relationships that matter. (You)rNetwork makes the invisible
    connections visible &mdash; people, companies, and opportunities rendered
    as a living, interactive graph.
  </p>
  <div class="rl-cta-row">
    <a href="${demo}" class="rl-cta-primary" id="ml-primary">Explore Your Network</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 CRM Data</h3>
        <p>Link your Twenty CRM instance via GraphQL. People, companies, and opportunities sync automatically.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Visualize the Graph</h3>
        <p>Entities become nodes and relationships become edges in a force-directed layout you can explore in real time.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Explore Relationships</h3>
        <p>Click, drag, and zoom to discover hidden connections. Filter by entity type, search by name, and trace paths of trust.</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">&#128752;</div>
        <h3>Force-Directed Layout</h3>
        <p>Interactive graph with physics simulation. Nodes attract and repel naturally, revealing organic clusters.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128260;</div>
        <h3>CRM Sync</h3>
        <p>Twenty CRM integration via GraphQL. People, companies, and opportunities stay up to date automatically.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#129528;</div>
        <h3>Entity Types</h3>
        <p>People, companies, and opportunities rendered as distinct nodes. Visual encoding makes each type instantly recognizable.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128279;</div>
        <h3>Trust Feeds</h3>
        <p>Relationship data flows to other rSpace modules. The trust graph powers governance, funding, and collaboration views.</p>
      </div>
    </div>
  </div>
</section>

<!-- Use Cases -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Use Cases</h2>
    <div class="rl-grid-3">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127760;</div>
        <h3>Community Mapping</h3>
        <p>See who knows whom across your ecosystem. Identify bridges, hubs, and isolated clusters at a glance.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128200;</div>
        <h3>Stakeholder Analysis</h3>
        <p>Trace influence paths between people and organizations. Understand power dynamics before critical decisions.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#127919;</div>
        <h3>Opportunity Tracking</h3>
        <p>Visualize pipeline deals alongside the people and companies involved. Spot warm introductions and shared connections.</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">Your Community, Connected</h2>
    <p class="rl-subtext">
      Stop guessing who knows whom. Start seeing the relationships that shape your community.
    </p>
    <div class="rl-cta-row">
      <a href="${demo}" class="rl-cta-primary">Explore Your Network</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>`;
}