import Image from "next/image";
import Link from "next/link";
import { cn } from "@/lib/cn";
import { ROUTES } from "@/lib/routes";
import type { HeroSlide as HeroSlideData } from "@/data/home";

/** Staggered reveal: text slides up + fades in once the slide becomes active. */
const reveal = (active: boolean) =>
  active ? "translate-y-0 opacity-100" : "translate-y-[30px] opacity-0";

interface HeroSlideProps {
  slide: HeroSlideData;
  active: boolean;
  priority?: boolean;
}

export function HeroSlide({ slide, active, priority }: HeroSlideProps) {
  return (
    <article
      aria-hidden={!active}
      style={{ background: slide.fallbackGradient }}
      className={cn(
        "absolute inset-0 flex flex-col justify-end rounded-[5px] p-[clamp(20px,4vh,40px)_clamp(20px,4vw,40px)]",
        "transition-[opacity,visibility] duration-[1200ms] ease-sterling",
        // Horizontal scrim.
        "before:absolute before:inset-0 before:z-[1] before:bg-[linear-gradient(90deg,rgba(7,14,30,0.85)_0%,rgba(7,14,30,0.4)_50%,rgba(7,14,30,0.1)_100%)] before:content-['']",
        active ? "visible z-[3] opacity-100" : "invisible z-[2] opacity-0",
      )}
    >
      <Image
        src={slide.image}
        alt=""
        fill
        priority={priority}
        sizes="(max-width: 768px) 100vw, 60vw"
        className="object-cover object-center"
      />
      {/* Vertical scrim */}
      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(7,14,30,0.1)_0%,rgba(7,14,30,0.85)_100%)]" />

      <div className="relative z-[2] h-full">
        <h2
          className={cn(
            "mb-[clamp(8px,1.8vh,15px)] max-w-[min(570px,70%)] pt-[50px] text-[clamp(1.8rem,3.5vw,2.2rem)] leading-[1.2] font-light text-snow",
            "max-[501px]:pt-10! min-[1200px]:pt-[60px]! short:pt-10! compact:pt-[30px]!",
            "max-[1201px]:max-w-[83%]! max-[1201px]:text-[clamp(1.2rem,2.5vw,1.6rem)]! max-[769px]:max-w-[90%]!",
            "compact:mb-[6px]! compact:text-[clamp(1.3rem,2.2vw,1.7rem)]!",
            reveal(active),
            "[transition:transform_1s_cubic-bezier(0.25,1,0.5,1)_0.3s,opacity_1s_ease_0.3s]",
          )}
        >
          {slide.title}
        </h2>
        <p
          className={cn(
            "mb-[clamp(12px,2.5vh,20px)] max-w-[min(600px,73%)] pt-[45px] text-[clamp(0.8rem,1.4vw,1.05rem)] leading-[1.5] font-light text-white/70",
            "max-[501px]:pt-10! min-[1200px]:pt-[60px]! short:pt-10! compact:pt-[30px]!",
            "max-[1201px]:max-w-[83%]! max-[769px]:max-w-[90%]!",
            "compact:mb-2! compact:text-[clamp(0.72rem,1vw,0.88rem)]!",
            reveal(active),
            "[transition:transform_1s_cubic-bezier(0.25,1,0.5,1)_0.5s,opacity_1s_ease_0.5s]",
          )}
        >
          {slide.text}
        </p>
        <Link
          href={ROUTES.membershipBenefits}
          tabIndex={active ? 0 : -1}
          className={cn(
            "relative mt-[45px] inline-block cursor-pointer self-start overflow-hidden rounded-md border border-white/55 bg-white/85 px-[clamp(16px,3vw,28px)] py-[clamp(8px,1.5vh,12px)] text-[clamp(0.85rem,1.3vw,1rem)] font-medium tracking-[0.5px] text-accent",
            "hover:border-snow hover:bg-snow hover:text-navy",
            "max-[501px]:mt-10! min-[1200px]:mt-[60px]! short:mt-10! compact:mt-[30px]!",
            "compact:px-[14px]! compact:py-[10px]! compact:text-[0.92rem]!",
            reveal(active),
            // Reveal + hover colour transitions share one declaration.
            "[transition:transform_1s_cubic-bezier(0.25,1,0.5,1)_0.7s,opacity_1s_ease_0.7s,border-color_0.3s,background-color_0.3s,color_0.3s]",
          )}
        >
          Explore Membership
        </Link>
      </div>
    </article>
  );
}