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

interface Cta {
  text: string
  href: string
}

withDefaults(defineProps<{
  headline?: string
  subheadline?: string
  cta?: Cta
}>(), {
  headline: 'Gear Up for Your Next Adventure',
  subheadline: 'Explore our curated collection of premium outdoor equipment. From summit to trail, we have everything you need.',
  cta: () => ({ text: 'Browse All Products', href: '/products' }),
})
</script>

<template>
  <section class="bg-muted">
    <div class="mx-auto max-w-3xl px-6 py-16 text-center md:py-24">
      <h1 class="text-4xl font-bold tracking-tight md:text-6xl">
        {{ headline }}
      </h1>
      <p class="mx-auto mt-4 max-w-2xl text-lg text-muted-foreground">
        {{ subheadline }}
      </p>
      <div class="mt-8">
        <Button as="a" :href="cta.href" size="lg">
          {{ cta.text }}
        </Button>
      </div>
    </div>
  </section>
</template>