<template>
  <section class="section-padding">
    <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);
}
</style>
