import Link from "next/link";
import Image from "next/image";

type PageHeroProps = {
  eyebrow: string;
  title: string;
  intro: string;
  imageSrc: string;
  imageAlt: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
};

export function PageHero({
  eyebrow,
  title,
  intro,
  imageSrc,
  imageAlt,
  primaryCta,
  secondaryCta
}: PageHeroProps) {
  return (
    <section className="section-block pt-12 md:pt-16">
      <div className="container-shell grid items-center gap-8 lg:grid-cols-[1.05fr_0.95fr]">
        <div className="space-y-6">
          <p className="eyebrow">{eyebrow}</p>
          <h1 className="text-balance text-4xl font-semibold leading-tight text-alpine-900 sm:text-5xl">
            {title}
          </h1>
          <p className="max-w-2xl text-lg leading-relaxed text-alpine-700">{intro}</p>
          {(primaryCta || secondaryCta) && (
            <div className="flex flex-wrap gap-3">
              {primaryCta ? (
                <Link className="btn-primary" href={primaryCta.href}>
                  {primaryCta.label}
                </Link>
              ) : null}
              {secondaryCta ? (
                <Link className="btn-secondary" href={secondaryCta.href}>
                  {secondaryCta.label}
                </Link>
              ) : null}
            </div>
          )}
        </div>

        <div className="relative overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
          <div className="relative h-[300px] w-full sm:h-[360px]">
            <Image
              alt={imageAlt}
              className="object-cover"
              fill
              priority
              sizes="(min-width: 1024px) 42vw, 100vw"
              src={imageSrc}
            />
          </div>
          <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-alpine-900/55 to-transparent" />
        </div>
      </div>
    </section>
  );
}