/**
 * rWallet — 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/rwallet";

	return `
<!-- Hero -->
<section class="rl-hero">
  <span class="rl-tagline">rWallet</span>
  <h1 class="rl-heading">Community Treasury, Transparent</h1>
  <p class="rl-subtext">
    Visualize your Safe multisig across every chain &mdash; balances,
    transactions, and governance &mdash; all in one client-side dashboard.
    No backend database, no custody risk.
  </p>
  <div class="rl-cta-row">
    <a href="${demo}" class="rl-cta-primary" id="ml-primary">View Your Treasury</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 Your Safe</h3>
        <p>Paste any Safe address. rWallet auto-detects which chains it lives on.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>View Across Chains</h3>
        <p>See token balances, USD valuations, and transaction history for every chain in one view.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Govern Together</h3>
        <p>Review pending multisig transactions and coordinate approvals with your team.</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">&#9939;</div>
        <h3>Multi-Chain Support</h3>
        <p>Ethereum, Polygon, Base, Gnosis, Arbitrum, Optimism, Celo, Avalanche, BSC, and zkSync.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128203;</div>
        <h3>Transaction History</h3>
        <p>Browse incoming and outgoing transfers with human-readable labels and USD values.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128272;</div>
        <h3>Multisig Governance</h3>
        <p>See signer thresholds, pending confirmations, and execution status at a glance.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box">&#128176;</div>
        <h3>Token Balances</h3>
        <p>ERC-20 and native token balances aggregated across all detected chains.</p>
      </div>
    </div>
  </div>
</section>

<!-- Ecosystem Integration -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Ecosystem Integration</h2>
    <p class="rl-subtext" style="text-align:center">
      rWallet connects to other rSpace modules for a complete treasury workflow.
    </p>
    <div class="rl-grid-2">
      <div class="rl-integration">
        <div class="rl-icon-box">&#128200;</div>
        <div>
          <h3><a href="/rfunds" style="color:#14b8a6;text-decoration:none">rFunds</a></h3>
          <p>Overlay budget categories on your wallet data to see where funds are allocated and how they flow.</p>
        </div>
      </div>
      <div class="rl-integration">
        <div class="rl-icon-box">&#9745;</div>
        <div>
          <h3><a href="/rvote" style="color:#14b8a6;text-decoration:none">rVote</a></h3>
          <p>Link governance proposals directly to treasury transactions for full accountability.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section rl-section--alt">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Ready to Open Your Treasury?</h2>
    <p class="rl-subtext">
      Paste a Safe address and explore your multichain holdings in seconds.
    </p>
    <div class="rl-cta-row">
      <a href="${demo}" class="rl-cta-primary">View Your Treasury</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>`;
}