import Link from "next/link";

type SponsorHeroData = {
  eyebrow: string;
  title: string;
  subtitle: string;
  description: string;
  primaryCta: { label: string; href: string };
  secondaryCta: { label: string; href: string };
};

export default function SponsorHero({ data }: { data: SponsorHeroData }) {
  return (
    <section className="relative py-16 lg:py-32 overflow-hidden">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(197,160,89,0.08),transparent_70%)]" />

      <div className="max-w-[1280px] mx-auto px-gutter relative z-10 text-center">
        <span className="font-label-caps text-label-caps text-primary mb-4 block">
          {data.eyebrow}
        </span>

        <h1 className="font-display-lg text-display-lg mb-6">
          {data.title}
        </h1>

        <h2 className="font-headline-md text-headline-md text-on-surface-variant mb-8 max-w-3xl mx-auto">
          {data.subtitle}
        </h2>

        <p className="font-body-base text-body-base text-on-surface-variant/80 max-w-2xl mx-auto mb-12">
          {data.description}
        </p>

        <div className="flex flex-col sm:flex-row justify-center gap-stack-md">
          <Link
            href={data.primaryCta.href}
            className="gold-gradient-bg text-on-primary font-title-sm px-10 py-4 rounded-lg hover:opacity-90 transition-all active:scale-95 text-center"
          >
            {data.primaryCta.label}
          </Link>
          <Link
            href={data.secondaryCta.href}
            className="border border-primary text-primary font-title-sm px-10 py-4 rounded-lg hover:bg-primary/5 transition-all active:scale-95 text-center"
          >
            {data.secondaryCta.label}
          </Link>
        </div>
      </div>
    </section>
  );
}