<template>
  <section class="relative overflow-hidden section-padding">
    <!-- Shadok scale: balance with absurd objects -->
    <svg class="shadok-scale" viewBox="0 0 260 280" fill="none" aria-hidden="true">
      <!-- Vertical pole -->
      <line x1="130" y1="40" x2="130" y2="240" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
      <!-- Base triangle -->
      <polygon points="100,240 160,240 130,220" fill="currentColor" opacity="0.5"/>
      <!-- Horizontal beam -->
      <line x1="40" y1="80" x2="220" y2="60" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
      <!-- Pivot circle -->
      <circle cx="130" cy="70" r="8" fill="currentColor" opacity="0.6"/>
      <!-- Left pan (chain lines) -->
      <line x1="40" y1="80" x2="30" y2="120" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
      <line x1="40" y1="80" x2="70" y2="120" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
      <!-- Left pan dish -->
      <path d="M20 120 Q50 135 80 120" stroke="currentColor" stroke-width="2.5" fill="currentColor" opacity="0.35"/>
      <!-- Absurd object on left: a snail -->
      <ellipse cx="50" cy="112" rx="14" ry="8" fill="currentColor" opacity="0.5"/>
      <path d="M60 108 Q68 95 58 92 Q48 90 52 100" stroke="currentColor" stroke-width="2" fill="none" opacity="0.4"/>
      <!-- Right pan (chain lines) -->
      <line x1="220" y1="60" x2="210" y2="100" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
      <line x1="220" y1="60" x2="250" y2="100" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
      <!-- Right pan dish -->
      <path d="M200 100 Q230 115 260 100" stroke="currentColor" stroke-width="2.5" fill="currentColor" opacity="0.35"/>
      <!-- Absurd object on right: a star/coin -->
      <circle cx="230" cy="92" r="10" fill="currentColor" opacity="0.4"/>
      <circle cx="230" cy="92" r="5" fill="currentColor" opacity="0.2"/>
      <!-- Tiny Shadok perched on top -->
      <ellipse cx="130" cy="35" rx="12" ry="10" fill="currentColor" opacity="0.6"/>
      <circle cx="130" cy="22" r="7" fill="currentColor" opacity="0.55"/>
      <circle cx="133" cy="20" r="2" fill="currentColor" opacity="0.3"/>
    </svg>

    <div class="container-content">
      <div class="mx-auto max-w-3xl text-center">
        <UiScrollReveal>
          <div class="i-lucide-users mx-auto h-12 w-12 text-accent/60 mb-6" />
          <p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.cooperative.kicker }}</p>
          <h2 class="heading-section font-display font-bold tracking-tight text-white">
            {{ content?.cooperative.title }}
          </h2>
        </UiScrollReveal>

        <UiScrollReveal
          v-for="(paragraph, i) in content?.cooperative.description"
          :key="i"
          :delay="(i + 1) * 100"
        >
          <p class="mt-6 text-lg leading-relaxed text-white/60" :class="{ 'mt-4': i > 0 }">
            {{ paragraph }}
          </p>
        </UiScrollReveal>

        <UiScrollReveal :delay="300">
          <div class="mt-8">
            <UiBaseButton variant="ghost" :to="content?.cooperative.cta.to">
              {{ content?.cooperative.cta.label }}
              <div class="i-lucide-arrow-right ml-2 h-4 w-4" />
            </UiBaseButton>
          </div>
        </UiScrollReveal>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const { data: content } = await usePageContent('home')
</script>

<style scoped>
.heading-section {
  font-size: clamp(1.625rem, 4vw, 2.125rem);
}

.shadok-scale {
  position: absolute;
  left: 2%;
  top: 8%;
  width: clamp(120px, 16vw, 240px);
  opacity: 0.3;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-scale 9s ease-in-out infinite;
}

@keyframes shadok-float-scale {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@media (max-width: 768px) {
  .shadok-scale { display: none; }
}
</style>
