<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'

interface Cta {
  text: string
  href: string
}

withDefaults(defineProps<{
  badge?: string
  headline?: string
  description?: string
  image?: string
  primaryCta?: Cta
  secondaryCta?: Cta
}>(), {
  badge: 'New Arrival',
  headline: 'Engineered for the Mountains',
  description: 'Our premium collection of outdoor jackets combines cutting-edge technology with timeless design. Built to withstand the elements while keeping you comfortable on every adventure.',
  image: 'https://cdn.demo-shop.com/media/1366/768/e0/86/58/1740128566/mann_jacken.png?ts=1740128566',
  primaryCta: () => ({ text: 'Shop Collection', href: '/collection/outdoor' }),
  secondaryCta: () => ({ text: 'Learn More', href: '/about' }),
})
</script>

<template>
  <section class="grid min-h-[500px] grid-cols-1 lg:grid-cols-2">
    <div class="flex flex-col justify-center p-8 md:p-12 lg:p-16">
      <Badge v-if="badge" variant="secondary" class="w-fit">
        {{ badge }}
      </Badge>
      <h1 class="mt-4 text-3xl font-bold tracking-tight md:text-5xl">
        {{ headline }}
      </h1>
      <p class="mt-4 max-w-lg text-lg text-muted-foreground">
        {{ description }}
      </p>
      <div class="mt-8 flex flex-col gap-4 sm:flex-row">
        <Button as="a" :href="primaryCta.href" size="lg">
          {{ primaryCta.text }}
        </Button>
        <Button as="a" :href="secondaryCta.href" variant="outline" size="lg">
          {{ secondaryCta.text }}
        </Button>
      </div>
    </div>
    <div class="relative order-first min-h-[300px] lg:order-none lg:min-h-0">
      <img
        :src="image"
        :alt="headline"
        class="absolute inset-0 h-full w-full object-cover"
      />
    </div>
  </section>
</template>