import Link from "next/link";

export default function HeroSection({
  data,
}: {
  data: {
    badgeIcon: string;
    badgeText: string;
    title: string;
    subtitle: string;
    primaryCta: { label: string; href: string };
    secondaryCta: { label: string; href: string };
  };
}) {
  return (
    <section className="relative min-h-[80vh] lg:min-h-[90vh] flex items-center overflow-hidden bg-background hero-glow px-[var(--spacing-gutter)]">
      <div className="relative z-10 max-w-hd mx-auto w-full">
        <div className="max-w-7xl">
          <div className="inline-flex items-center gap-3 lg:gap-4 px-4 lg:px-8 py-2 lg:py-3 rounded-full bg-surface-container-high border border-primary/30 mb-8 lg:mb-16">
            <span className="material-symbols-outlined text-primary text-[20px] lg:text-[26px]">
              {data.badgeIcon}
            </span>
            <span className="font-[var(--font-label-caps)] text-xs lg:text-[14px] text-on-surface">
              {data.badgeText}
            </span>
          </div>
          <h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-8 leading-[1.1] text-[clamp(1.75rem,3.5vw+1rem,4.25rem)]">
            {data.title.includes(" AI") ? (
              <>
                {data.title.split(" AI")[0]}
                <br />
                {"AI" + data.title.split(" AI").slice(1).join(" AI")}
              </>
            ) : (
              data.title
            )}
          </h1>
          <p className="text-on-surface-variant text-base lg:text-[22px] mb-8 lg:mb-16 max-w-3xl leading-relaxed opacity-90">
            {data.subtitle}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 lg:gap-10">
            <Link
              href={data.primaryCta.href}
              className="gold-gradient-bg text-on-primary px-8 lg:px-12 py-4 lg:py-5 font-[var(--font-display-lg)] text-sm lg:text-[18px] font-bold uppercase tracking-widest rounded-xl hover:shadow-[0_0_50px_rgba(197,160,89,0.4)] transition-all text-center"
            >
              {data.primaryCta.label}
            </Link>
            <Link
              href={data.secondaryCta.href}
              className="bg-surface-container-high border border-primary/40 text-on-surface px-8 lg:px-12 py-4 lg:py-5 font-[var(--font-display-lg)] text-sm lg:text-[18px] font-bold uppercase tracking-widest rounded-xl hover:bg-surface-container-highest transition-all text-center"
            >
              {data.secondaryCta.label}
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}