// HeroSection composition — opinionated marketing hero with eyebrow
// pill, gradient title, sub copy, and dual CTAs.

import type { ReactNode } from 'react'
import { Button } from '../primitives/button'
import { Badge } from '../primitives/badge'
import { cn } from '../cn'

interface HeroCta {
  readonly label: string
  readonly href: string
}

interface HeroSectionProps {
  readonly eyebrow?: string
  readonly title: ReactNode
  readonly subtitle?: ReactNode
  readonly primaryCta?: HeroCta
  readonly secondaryCta?: HeroCta
  readonly footnote?: ReactNode
  readonly className?: string
}

export const HeroSection = ({
  eyebrow, title, subtitle, primaryCta, secondaryCta, footnote, className,
}: HeroSectionProps): ReactNode => (
  <section className={cn('py-20 text-center max-w-4xl mx-auto px-6', className)}>
    {eyebrow ? (
      <Badge variant="outline" className="mb-6 border-primary/30 text-primary">{eyebrow}</Badge>
    ) : null}
    <h1 className="text-4xl md:text-6xl font-bold tracking-tight leading-tight mb-4 text-foreground">
      {title}
    </h1>
    {subtitle ? (
      <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
        {subtitle}
      </p>
    ) : null}
    <div className="flex gap-3 justify-center flex-wrap mb-4">
      {primaryCta ? (
        <a href={primaryCta.href}>
          <Button size="lg">{primaryCta.label}</Button>
        </a>
      ) : null}
      {secondaryCta ? (
        <a href={secondaryCta.href}>
          <Button size="lg" variant="outline">{secondaryCta.label}</Button>
        </a>
      ) : null}
    </div>
    {footnote ? (
      <p className="text-sm text-muted-foreground">{footnote}</p>
    ) : null}
  </section>
)