<template>
  <div class="header-section">
    <img v-if="isMobile" src="@/assets/img/header-image-mobile.png" width="800" height="600" alt="Kraiken Boss" />
    <img v-else src="@/assets/img/header-image.png" width="1920" height="1080" alt="Kraiken Boss" />
    <div class="header-text">
      DeFi without<br />
      the rug pull.
    </div>
    <div class="header-subtitle">
      Self-adjusting liquidity with an ETH-backed floor. Real upside, protected downside.
    </div>
    <div class="header-cta">
      <KButton @click="router.push('/app/get-krk')">Buy $KRK</KButton>
    </div>
    <div class="blur-effect"></div>
  </div>
  <WalletCard />
  <LiveStats />
  <div class="k-container">
    <section class="how-it-works-section">
      <h2>How It Works</h2>
      <div class="cards-grid">
        <div class="card">
          <div class="card-emoji">⚙️</div>
          <h3>Adaptive Liquidity</h3>
          <p>The protocol optimizes positions 24/7 — capturing trading fees, adjusting to market conditions, guided by staker sentiment. Your tokens work while you sleep.</p>
        </div>
        <div class="card">
          <div class="card-emoji">🛡️</div>
          <h3>ETH-Backed Floor</h3>
          <p>Every $KRK has a minimum redemption price backed by real ETH in the protocol. No rug pulls — liquidity is locked in contracts.</p>
        </div>
        <div class="card">
          <div class="card-emoji">🔍</div>
          <h3>Fully Transparent</h3>
          <p>Every move is public and verifiable. Nothing happens in secret. You don't have to trust anyone — verify it yourself.</p>
        </div>
      </div>
      <div class="centered-cta">
        <KButton @click="router.push('/app/get-krk')">Buy $KRK</KButton>
      </div>
    </section>
    <section class="protocol-health-section">
      <LeftRightComponent>
        <template #left>
          <img src="@/assets/img/chest.png" alt="Protocol Dashboard" class="image-card" />
        </template>
        <template #right>
          <h2>Watch It Work</h2>
          <p>
            Track supply dynamics, ETH reserves, and position history in real-time. See exactly how the protocol manages your position — no wallet required.
          </p>
          <KButton @click="router.push('/app')">View Dashboard</KButton>
        </template>
      </LeftRightComponent>
    </section>
    <section class="getting-started-section">
      <LeftRightComponent reverse>
        <template #left>
          <img src="@/assets/img/chest.png" alt="Get Started" class="image-card" />
        </template>
        <template #right>
          <h2>Get $KRK in 30 Seconds</h2>
          <ol class="steps-list">
            <li>Connect your wallet</li>
            <li>Buy $KRK with ETH</li>
            <li>Hold. The protocol handles the rest.</li>
          </ol>
          <div class="button-group">
            <KButton @click="router.push('/app/get-krk')">Buy $KRK</KButton>
            <KButton @click="router.push('/docs/how-it-works')">How It Works →</KButton>
          </div>
        </template>
      </LeftRightComponent>
    </section>
    <section class="trust-section">
      <h2>Verified On-Chain</h2>
      <p>Deployed on Base. Verified and auditable on-chain.</p>
      <div class="trust-links">
        <KButton outlined @click="router.push('/docs/code')">Source Code</KButton>
        <KButton outlined @click="router.push('/docs')">Documentation</KButton>
        <KButton outlined @click="openExternal('https://discord.gg/kraiken')">Community</KButton>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import KButton from '@/components/KButton.vue';
import LeftRightComponent from '@/components/LeftRightComponent.vue';
import LiveStats from '@/components/LiveStats.vue';
import WalletCard from '@/components/WalletCard.vue';
import { useMobile } from '@/composables/useMobile';
import { useRouter } from 'vue-router';

const isMobile = useMobile();
const router = useRouter();

const openExternal = (url: string) => {
  window.open(url, '_blank', 'noopener');
};
</script>

<style lang="sass">
.header-section
    position: relative
    .blur-effect
        filter: blur(45px)
        height: 300px
        position: absolute
        bottom: -150px
        width: 100%
        background-color: #07111B
        left: -10%
        width: 120%

    img
        max-width: 100%
        min-width: 100%
        height: auto
    .header-text
        color: #E6E6E6
        mix-blend-mode: color-dodge
        font-weight: 500
        position: absolute
        text-align: left
        top: 50%
        left: 35%
        transform: translate(-50%, -50%)
        font-size: 35px
        font-weight: 500
        @media (min-width: 768px)
            width: unset
            font-size: 78px
    .header-subtitle
        color: rgba(240, 240, 240, 0.7)
        position: absolute
        text-align: left
        top: 60%
        left: 35%
        transform: translate(-50%, 0)
        font-size: 14px
        max-width: 280px
        line-height: 1.5
        @media (min-width: 768px)
            font-size: 18px
            max-width: 500px
            top: 62%
    .header-cta
        position: absolute
        top: 75%
        left: 35%
        transform: translate(-50%, 0)
        @media (min-width: 768px)
            top: 73%

.image-card
    box-shadow: 0px 0px 50px 0px #000
    border-radius: 14.5px

h2
    line-height: 133%
    letter-spacing: 0px

.how-it-works-section
    text-align: center
    margin-top: 88px
    h2
        font-weight: 400
        letter-spacing: 0.25px
        font-size: 24px
        margin-bottom: 48px
        @media (min-width: 768px)
            font-size: 27px
    .cards-grid
        display: grid
        grid-template-columns: 1fr
        gap: 24px
        margin-bottom: 48px
        @media (min-width: 768px)
            grid-template-columns: repeat(3, 1fr)
    .card
        background: rgba(255, 255, 255, 0.03)
        border: 1px solid rgba(255, 255, 255, 0.08)
        border-radius: 12px
        padding: 32px 24px
        text-align: center
        .card-emoji
            font-size: 40px
            margin-bottom: 16px
        h3
            font-size: 20px
            font-weight: 500
            margin-bottom: 12px
        p
            font-size: 16px
            line-height: 1.6
            color: rgba(240, 240, 240, 0.8)
    .centered-cta
        display: flex
        justify-content: center

.protocol-health-section
    margin-top: 120px

.getting-started-section
    margin-top: 120px
    .steps-list
        list-style: decimal
        padding-left: 20px
        margin: 24px 0
        li
            font-size: 18px
            line-height: 1.8
            color: rgba(240, 240, 240, 0.9)
    .button-group
        display: flex
        gap: 12px
        flex-wrap: wrap

.trust-section
    margin-top: 120px
    margin-bottom: 80px
    text-align: center
    h2
        font-weight: 400
        letter-spacing: 0.25px
        font-size: 24px
        margin-bottom: 16px
        @media (min-width: 768px)
            font-size: 27px
    p
        font-size: 18px
        color: rgba(240, 240, 240, 0.8)
        margin-bottom: 32px
    .trust-links
        display: flex
        justify-content: center
        gap: 12px
        flex-wrap: wrap
</style>
