import Image from "next/image";
import { Button } from "@/components/ui/Button";
import { splitEmphasis } from "@/lib/emphasize";
import type { Dictionary, Locale } from "@/content/types";
import type { GalleryPhoto } from "@/generated/prisma/client";

export function Hero({
  dict,
  locale,
  heroPhoto,
}: {
  dict: Dictionary;
  locale: Locale;
  heroPhoto?: GalleryPhoto | null;
}) {
  const { before, accent, after } = splitEmphasis(dict.hero.title, dict.hero.titleAccent);

  return (
    <section
      id="hero"
      className="relative isolate flex min-h-[92vh] items-center overflow-hidden bg-charcoal-950"
    >
      {heroPhoto ? (
        <Image
          src={heroPhoto.imageUrl}
          alt=""
          fill
          priority
          sizes="100vw"
          className="object-cover opacity-60"
        />
      ) : (
        <div className="absolute inset-0 bg-gradient-to-br from-gold-600 via-bronze-700 to-charcoal-950" />
      )}
      <div className="absolute inset-0 bg-gradient-to-t from-charcoal-950 via-charcoal-950/50 to-charcoal-950/20" />

      <div className="relative z-10 mx-auto max-w-4xl animate-fade-up px-4 py-32 text-center text-white sm:px-6 lg:px-8">
        <span className="text-xs font-bold uppercase tracking-[0.35em] text-gold-300">
          {dict.hero.eyebrow}
        </span>
        <h1 className="mt-6 text-4xl font-medium leading-tight sm:text-5xl md:text-6xl">
          {before}
          {accent ? <span className="font-extrabold">{accent}</span> : null}
          {after}
        </h1>
        <p className="mx-auto mt-6 max-w-2xl text-base text-white/80 sm:text-lg">
          {dict.hero.subtitle}
        </p>
        <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
          <Button href={`/${locale}#booking`}>{dict.hero.ctaPrimary}</Button>
          <Button href={`/${locale}#destinations`} variant="outline">
            {dict.hero.ctaSecondary}
          </Button>
        </div>
      </div>
    </section>
  );
}