harb/landing/src/views/docs/HowItWorks.vue

<template>
  <div>
    <h1 id="first">How It Works</h1>
    <p>
      No whitepapers. No jargon. Here's what's actually happening under the hood.
    </p>

    <div class="concept-block">
      <h2>The Floor</h2>
      <p>
        Every KRK token has a programmatic guarantee: a minimum redemption price backed by real ETH in immutable contracts.
        The more ETH in the vault, the higher the floor.
      </p>
      <p>
        This isn't a promise — it's code. Even in a worst-case sell-off, the floor holds because the ETH is locked
        and nobody can touch it. No rug pulls. No death spirals. Just a hard lower bound that can grow when fees accrue faster than sell pressure.
      </p>
      <p><router-link to="/docs/liquidity-management">→ Technical deep-dive: Liquidity Management</router-link></p>
    </div>

    <div class="concept-block">
      <h2>The Optimizer</h2>
      <p>
        KRK owns its own trading infrastructure. The optimizer manages three liquidity positions — floor, anchor, and discovery — capturing fees from every trade.
        Those fees flow back into the vault, growing the floor over time. No market makers, no LPs, no counterparty risk.
      </p>
      <p>
        The optimizer reads staker sentiment and adapts positions accordingly — adjusting widths, depths, and allocations
        to match market conditions. It runs autonomously, on-chain. No human can intervene.
      </p>
      <p><router-link to="/docs/ai-agent">→ Technical deep-dive: The Optimizer</router-link></p>
    </div>

    <div class="concept-block">
      <h2>How Recenters Work</h2>
      <ul>
        <li><strong>Atomic repositioning</strong> — the optimizer repositions all liquidity in a single transaction. Anyone can trigger it; the protocol bot does it automatically.</li>
        <li><strong>Sentiment-driven</strong> — reads staker signals (% staked, average tax) to choose bull or bear positioning.</li>
        <li><strong>Bull vs bear</strong> — bull: wider discovery, aggressive fee capture. Bear: tight around floor, maximum protection.</li>
      </ul>
      <p><router-link to="/docs/liquidity-management">→ Technical deep-dive: Liquidity Management</router-link></p>
    </div>

    <div class="concept-block">
      <h2>Evolution</h2>
      <p>
        The optimizer is not a static algorithm. New versions will be trained off-chain and deployed as new contracts.
        <strong>Roadmap:</strong> staker governance will replace the current admin key — the community will decide how their liquidity is managed.
      </p>
      <p>
        This is the KrAI in KrAIken — an autonomous system that evolves through staker governance.
      </p>
      <p><router-link to="/docs/ai-agent">→ Technical deep-dive: The Optimizer</router-link></p>
    </div>

    <div class="concept-block">
      <h2>Supply</h2>
      <p>
        When people buy, new KRK is created. When people sell, KRK is burned. The total supply adjusts automatically —
        no team controls it.
      </p>
      <p>
        This elastic supply means the protocol can always meet demand without diluting holders unfairly. The math ensures
        the floor price per token stays intact as supply expands or contracts.
      </p>
      <p><router-link to="/docs/tokenomics">→ Technical deep-dive: Tokenomics</router-link></p>
    </div>

    <div class="concept-block">
      <h2>Staking</h2>
      <p>
        Power users can stake KRK to take leveraged positions — like betting on the price with extra conviction. Higher conviction
        means harder for someone to take your spot, but bigger rewards if you're right.
      </p>
      <p>
        Staking is optional. Most holders just hold. But if you want amplified exposure to KRK's price movement, staking
        is how you do it — with a built-in fairness mechanism that keeps positions from being hoarded forever.
      </p>
      <p><router-link to="/docs/staking">→ Technical deep-dive: Staking</router-link></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

interface HowItWorksEmits {
  (event: 'onmounted'): void;
}

const emit = defineEmits<HowItWorksEmits>();

onMounted(() => {
  emit('onmounted');
});
</script>