<template>
  <section class="section-padding">
    <div class="container-content">
      <UiScrollReveal>
        <div class="gw-card">
          <div class="flex flex-col items-center text-center gap-4 md:flex-row md:text-left md:gap-8">
            <!-- Icon -->
            <div class="gw-icon-wrapper">
              <div class="i-lucide-sparkles h-8 w-8 text-amber-400" />
            </div>

            <!-- Content -->
            <div class="flex-1">
              <span class="inline-block mb-2 rounded-full bg-amber-400/15 px-3 py-0.5 font-mono text-xs tracking-widest text-amber-400 uppercase">
                {{ content?.grateWizardTeaser.kicker }}
              </span>
              <h3 class="heading-h3 font-display font-bold text-white">
                {{ content?.grateWizardTeaser.title }}
              </h3>
              <p class="mt-2 text-sm text-white/60 md:text-base leading-relaxed">
                {{ content?.grateWizardTeaser.description }}
              </p>
            </div>

            <!-- CTAs -->
            <div class="shrink-0 flex flex-col gap-2">
              <UiBaseButton @click="launch">
                <div class="i-lucide-external-link mr-2 h-4 w-4" />
                {{ content?.grateWizardTeaser.cta.launch }}
              </UiBaseButton>
              <UiBaseButton variant="ghost" :to="content?.grateWizardTeaser.cta.more.to">
                {{ content?.grateWizardTeaser.cta.more.label }}
                <div class="i-lucide-arrow-right ml-2 h-4 w-4" />
              </UiBaseButton>
            </div>
          </div>
        </div>
      </UiScrollReveal>
    </div>
  </section>
</template>

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

<style scoped>
.gw-card {
  border: 1px solid hsl(40 80% 50% / 0.2);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, hsl(40 80% 50% / 0.05), hsl(40 80% 50% / 0.02));
  box-shadow: 0 0 40px hsl(40 80% 50% / 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.gw-card:hover {
  border-color: hsl(40 80% 50% / 0.35);
  box-shadow: 0 0 60px hsl(40 80% 50% / 0.1);
}

.heading-h3 {
  font-size: clamp(1.25rem, 3vw, 1.625rem);
}

.gw-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: hsl(40 80% 50% / 0.1);
  border: 1px solid hsl(40 80% 50% / 0.15);
  flex-shrink: 0;
}
</style>
