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

withDefaults(defineProps<{
  heading?: string
  description?: string
  ctaLabel?: string
  ctaHref?: string
  backgroundImage?: string
}>(), {
  heading: 'Level up your winter gear',
  description: 'Explore our latest collection of premium outdoor jackets, designed for the harshest conditions while keeping you stylish on the slopes.',
  ctaLabel: 'Shop Collection',
  ctaHref: '/collections/winter',
  backgroundImage: '/placeholder.svg',
})
</script>

<template>
  <section class="bg-background">
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
      <div class="relative overflow-hidden rounded-lg">
        <div class="absolute inset-0">
          <Image
            :src="backgroundImage"
            alt=""
            class="size-full object-cover"
          />
        </div>
        <div class="relative bg-foreground/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16">
          <div class="relative mx-auto flex max-w-3xl flex-col items-center text-center">
            <h2 class="text-3xl font-bold tracking-tight text-background sm:text-4xl">
              {{ heading }}
            </h2>
            <p class="mt-3 text-xl text-background/80">
              {{ description }}
            </p>
            <Button
              as="a"
              :href="ctaHref"
              color="inverted"
              size="lg"
              class="mt-8"
            >
              {{ ctaLabel }}
            </Button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>