<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>
        Think of it as a vault. The protocol locks ETH in a trading vault. That ETH guarantees a minimum price for every KRK token.
        The more ETH in the vault, the higher the floor.
      </p>
      <p>
        The floor is a hard lower bound — it's backed by real ETH, not promises. Even in a worst-case sell-off, the floor holds
        because the ETH is locked in immutable contracts that nobody can touch.
      </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>
        Kraiken runs three trading strategies simultaneously — earning fees from every trade that happens. These fees flow back
        into the vault, growing the floor over time.
      </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>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>
