/**
 * Funds module landing page — rich content for rspace.online/rfunds
 */

export function renderLanding(): string {
	return `
  <!-- Hero -->
  <div class="rl-hero">
    <span class="rl-tagline">rFunds</span>
    <h1 class="rl-heading">Visualize Your Community's Money</h1>
    <p class="rl-subtext">
      Budget flows, river visualization, and conviction funding.
      Watch resources move through your community in real time.
    </p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rfunds" class="rl-cta-primary" id="ml-primary">See Your Funds Flow</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>Define Budget Streams</h3>
          <p>Create named flows between funding pools. Set rates, thresholds, and allocation rules.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">2</div>
          <h3>Watch Money Flow</h3>
          <p>The river visualization animates budget movement in real time -- deposits, withdrawals, and funnels.</p>
        </div>
        <div class="rl-step">
          <div class="rl-step__num">3</div>
          <h3>Govern Allocation</h3>
          <p>Community members signal preferences through conviction funding. Resources flow where attention goes.</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;">
        Transparent treasury management for communities of any size.
      </p>
      <div class="rl-grid-4">
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#127754;</div>
          <h3>River Visualization</h3>
          <p>Animated flow diagram showing how funds move between pools, funnels, and outcomes in real time.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128161;</div>
          <h3>Conviction Funding</h3>
          <p>Continuous signaling lets community members express preferences that compound over time.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128168;</div>
          <h3>Budget Streams</h3>
          <p>Named flows between funding pools with configurable rates, thresholds, and activation rules.</p>
        </div>
        <div class="rl-card rl-card--center">
          <div class="rl-icon-box">&#128202;</div>
          <h3>Treasury Dashboard</h3>
          <p>Full overview of balances, inflows, outflows, and historical transaction data for your community.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Integration -->
  <section class="rl-section">
    <div class="rl-container">
      <h2 class="rl-heading" style="text-align:center;">Ecosystem Integration</h2>
      <div class="rl-grid-2" style="max-width:700px;margin:0 auto;">
        <div class="rl-integration">
          <div class="rl-icon-box">&#128176;</div>
          <div>
            <h3>rWallet</h3>
            <p>Connects to <a href="/rwallet" style="color:#14b8a6;">rWallet</a> for on-chain balances and wallet-based treasury tracking.</p>
          </div>
        </div>
        <div class="rl-integration">
          <div class="rl-icon-box">&#128499;</div>
          <div>
            <h3>rVote</h3>
            <p>Pairs with <a href="/rvote" style="color:#14b8a6;">rVote</a> for governance decisions that direct fund allocation.</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">See your community's funds in motion</h2>
      <p class="rl-subtext">
        Try the demo or create a space to set up your own budget flows.
      </p>
      <div class="rl-cta-row">
        <a href="https://demo.rspace.online/rfunds" class="rl-cta-primary">See Your Funds Flow</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>`;
}