import { HeroData } from "@/src/lib/types/home";
import { BannerData } from "@/src/lib/types/header";
import Image from "next/image";
import LanguageAwareLink from "@/src/lib/utils/LanguageAwareLink";

import { withCDN } from "@/src/lib/utils";

interface HeroProps {
  bannerData?: BannerData;
  heroData?: HeroData;
}

export default function Hero({ bannerData, heroData }: HeroProps) {
  // Use banner data from API if available, fallback to heroData
  const backgroundImage =
    bannerData?.desktopImage || heroData?.backgroundImage || "";
  const mobileImage = bannerData?.mobileImage;
  const heading = bannerData?.heading || heroData?.title || "Learn with YE";
  const welcomeText = bannerData?.welcome_text || "Welcome to Young Engineers";
  const territory = bannerData?.territory_name || "Global";
  const ctaText = bannerData?.ctaText || "Discover Programs";
  const ctaLink = bannerData?.ctaLink || "/programs";

  const isVideo = (url?: string | null) => {
    if (!url) return false;
    // Check for common video extensions or the word "video" in the URL, 
    // but exclude common image extensions to be safe.
    const isVideoExtension = url.match(/\.(mp4|webm|ogg|mov|m4v)($|\?)/i);
    const hasVideoKeyword = url.toLowerCase().includes("video") && !url.match(/\.(jpg|jpeg|png|gif|webp|avif|svg)($|\?)/i);
    return !!(isVideoExtension || hasVideoKeyword);
  };

  const isDesktopVideo = isVideo(bannerData?.desktopImage);
  const isMobileVideo = isVideo(bannerData?.mobileImage);

  return (
    <section
      className="
      relative w-full overflow-x-hidden flex items-center justify-center
      h-[600px] md:h-[550px] lg:h-[650px] xl:h-[800px]
      flex flex-col pt-12 md:pt-20 before:content-[''] before:absolute before:inset-0 
      before:bg-[linear-gradient(98deg,_#0A090980,_#D9D9D900)]
      home-hero
      "
    >

      {/* Background */}
      <div className="absolute inset-0 -z-10 bg-black">
        {/* Mobile and Desktop using the same image/video (Desktop Image) */}
        <div className="w-full h-full">
          {isDesktopVideo ? (
            <video
              src={bannerData?.desktopImage || undefined}
              autoPlay
              loop
              muted
              playsInline
              className="w-full h-full object-cover object-top"
            />
          ) : (
            <div
              className="w-full h-full bg-cover bg-top"
              style={{ backgroundImage: `url('${backgroundImage}')` }}
            />
          )}
        </div>
      </div>

      {/* Background fallback removed duplicate */}

      <div className="relative z-10 flex flex-col gap-4 md:gap-6 px-5 max-w-[1300px] mx-auto w-full  md:w-full md:h-[250px] w-full  mt-8 md:mt-0 px-4 md:px-10 lg:px-18 xl:px-0 content-container">
        {/* Official Badge */}
        <Image
          src={withCDN("/home/Officially_recognized_white_rounded_colors.png")}

          alt="Officially Recognized"
          width={120}
          height={70}
          className="drop-shadow-lg w-[86px] h-[44px] md:w-[116px] md:h-[60px] object-contain"
          priority={true}
        />

        {/* Welcome text */}
        <div className="flex flex-col gap-2 leading-none ">
          <p className="text-[16px] md:text-[18px] lg:text-[20px] text-[#FAC901] uppercase font-bold whitespace-normal md:whitespace-nowrap mb-0">
            <span className="max-[767px]:block">{welcomeText}</span>
          </p>
          {/* Territory name badge */}
          {territory && (
            <span className="inline-block w-fit bg-white text-[#0097DC] uppercase font-bold rounded-[5px] p-[10px] text-[18px] md:text-[20px] lg:text-[22px] tracking-wide shadow-sm">
              {territory}
            </span>
          )}
          <h1
            className="text-[24px] md:text-[25px] lg:text-[30px]
            text-white uppercase font-bold leading-tight tracking-wide
            w-full md:max-w-[380px] lg:max-w-[480px] xl:max-w-[500px] max-[600px]:pr-[30px] hero-heading"
          >
            {heading}
          </h1>
        </div>

        {/* Button */}
        <LanguageAwareLink
          href={ctaLink}
          className="flex items-center justify-center gap-4 md:gap-3 bg-[#0097DC]  rounded-full py-2 md:py-3 px-6 md:px-8 hover:bg-[#0097DC] active:bg-[#0084C1]
          transition-all w-fit md:h-11 2xl:h-[60px] whitespace-nowrap hover:shadow-[10px_10px_14px_#0000000D] active:shadow-[10px_10px_14px_#0000000D]">
          <Image
            src={withCDN("/gear.png")}
            alt="Gear"
            width={20}
            height={20}
            className="w-5.5 h-5.5 2xl:h-8 2xl:w-8 md:w-6 md:h-6"
            priority={true}
          />
          <span className="text-white text-[18px] xl:text-[24px] tracking-wide uppercase font-regular max-[360px]:text-[15px]">
            {ctaText}
          </span>
        </LanguageAwareLink>
      </div>
    </section>
  );
}