import Image from "next/image";
import type { ReactNode } from "react";

export function PageHero({
  eyebrow,
  title,
  lead,
  tags,
  photo,
  variant = "solid",
  children,
}: {
  eyebrow: string;
  title: ReactNode;
  lead?: string;
  tags?: ReactNode;
  photo?: { src: string; alt?: string };
  variant?: "solid" | "photo";
  children?: ReactNode;
}) {
  if (variant === "photo" && photo) {
    return (
      <section className="relative border-b-2 border-neutral-900">
        <div className="relative">
          <div className="relative h-[520px] w-full md:h-[620px]">
            <Image
              src={photo.src}
              alt={photo.alt ?? ""}
              fill
              priority
              sizes="100vw"
              className="object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-br from-violet-900/85 via-violet-800/60 to-neutral-900/75" />
          </div>
          <div className="absolute inset-0 flex items-end">
            <div className="mx-auto w-full max-w-[1400px] px-6 pb-14 md:px-10 md:pb-20">
              <div className="text-xs font-black uppercase tracking-[0.25em] text-yellow-300">
                {eyebrow}
              </div>
              <h1 className="mt-4 text-balance text-5xl font-black leading-[0.95] tracking-[-0.03em] text-white md:text-7xl lg:text-[6rem]">
                {title}
              </h1>
              {lead && (
                <p className="mt-5 max-w-2xl text-lg text-white/85 md:text-xl">{lead}</p>
              )}
              {tags && <div className="mt-8 flex flex-wrap gap-2">{tags}</div>}
              {children}
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="border-b-2 border-neutral-900 bg-violet-700 text-white">
      <div className="mx-auto max-w-[1400px] px-6 py-20 md:px-10 md:py-28">
        <div className="text-xs font-black uppercase tracking-[0.25em] text-yellow-300">
          {eyebrow}
        </div>
        <h1 className="mt-4 text-balance text-5xl font-black leading-[0.92] tracking-[-0.03em] md:text-7xl lg:text-[6rem]">
          {title}
        </h1>
        {lead && (
          <p className="mt-6 max-w-2xl text-lg text-white/85 md:text-xl">{lead}</p>
        )}
        {tags && <div className="mt-8 flex flex-wrap gap-2">{tags}</div>}
        {children}
      </div>
    </section>
  );
}