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 md:py-32 overflow-hidden text-center px-[var(--spacing-gutter)]">
      <div className="relative z-10 max-w-4xl mx-auto w-full">
        {/* Eyebrow */}
        <p className="font-[var(--font-label-caps)] text-primary text-[10px] md:text-xs font-bold tracking-[0.3em] uppercase mb-4 md:mb-6">
          {data.eyebrow}
        </p>

        {/* Title */}
        <h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 md:mb-8 leading-[1.2] text-3xl sm:text-4xl md:text-6xl lg:text-7xl break-words">
          {data.title}
        </h1>

        {/* Subtitle */}
        <p className="text-primary/90 font-[var(--font-display-lg)] text-[11px] md:text-sm lg:text-base mb-8 md:mb-10 uppercase tracking-[0.2em] max-w-2xl mx-auto leading-relaxed">
          {data.subtitle}
        </p>

        {/* Description */}
        <p className="font-body-base text-on-surface-variant text-sm md:text-lg max-w-2xl mx-auto mb-12 md:mb-16 leading-relaxed opacity-80">
          {data.description}
        </p>

        {/* CTAs */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 md:gap-6">
          <Link
            href={data.primaryCta.href}
            className="gold-gradient-bg text-on-primary px-10 py-4 rounded-xl font-bold uppercase tracking-widest text-xs md:text-sm shadow-xl shadow-primary/20 hover:shadow-primary/30 transition-all duration-300 active:scale-95 w-full sm:w-auto"
          >
            {data.primaryCta.label}
          </Link>
          <Link
            href={data.secondaryCta.href}
            className="border border-white/10 text-on-surface px-10 py-4 rounded-xl font-bold uppercase tracking-widest text-xs md:text-sm hover:border-primary hover:bg-primary/5 transition-all duration-300 active:scale-95 w-full sm:w-auto"
          >
            {data.secondaryCta.label}
          </Link>
        </div>
      </div>
    </section>
  );
}