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

interface Cta {
  text: string
  href: string
}

withDefaults(defineProps<{
  backgroundImage?: string
  headline?: string
  subheadline?: string
  primaryCta?: Cta
  secondaryCta?: Cta
}>(), {
  backgroundImage: 'https://cdn.demo-shop.com/media/1366/768/64/de/79/1741783686/u3398487194_men_on_a_mountain_wearing_ski_helmets_--ar_169_--_336a76fb-ec05-4251-93d8-7c2c9428e902_3.png?ts=1741783686',
  headline: 'Winter Collection 2025',
  subheadline: 'Discover our latest outdoor gear built for the mountains. Premium quality, engineered for adventure.',
  primaryCta: () => ({ text: 'Shop Now', href: '/collection/winter' }),
  secondaryCta: () => ({ text: 'Learn More', href: '/about' }),
})
</script>

<template>
  <section class="relative flex min-h-[500px] items-center justify-center overflow-hidden md:min-h-[600px]">
    <img
      :src="backgroundImage"
      :alt="headline"
      class="absolute inset-0 h-full w-full object-cover"
    />
    <div class="absolute inset-0 bg-black/50" />
    <div class="relative z-10 mx-auto max-w-3xl px-6 text-center">
      <h1 class="text-4xl font-bold tracking-tight text-white md:text-6xl">
        {{ headline }}
      </h1>
      <p class="mx-auto mt-4 max-w-2xl text-lg text-white/90 md:text-xl">
        {{ subheadline }}
      </p>
      <div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
        <Button as="a" :href="primaryCta.href" size="lg" class="bg-white text-black hover:bg-white/90">
          {{ primaryCta.text }}
        </Button>
        <Button as="a" :href="secondaryCta.href" variant="outline" size="lg" class="!border-white !bg-transparent !text-white hover:!bg-white/10">
          {{ secondaryCta.text }}
        </Button>
      </div>
    </div>
  </section>
</template>