"use client";
/* eslint-disable @next/next/no-img-element */

import Title from "@/components/atoms/Title";
import useStaggerTitleLeft from "@/hooks/useStaggerTitleLeft";
import type { FmdPageData } from "@/utils/strapi";

interface FmdDesktopHeroProps {
  fmdData: FmdPageData | null;
}

const FMD_HERO_FALLBACK = "/images/fmd/background/hero.jpg";

const FmdDesktopHero = ({ fmdData }: FmdDesktopHeroProps) => {
  const heroTitle = fmdData?.heroTitle ?? "Facility Maintenance";
  const heroDescription =
    fmdData?.heroDescription ||
    "Our Facilities Management Department (FMD) ensures seamless property upkeep through a comprehensive suite of services, including generator servicing, fuel provision, water reservoir cleaning, swimming pool maintenance, lift servicing, and fire extinguisher refilling. Each task is performed periodically with precision to maintain operational efficiency and a well-kept environment.";

  const heroSmallUrl =
    fmdData?.heroDesktopSmallImageUrl ?? FMD_HERO_FALLBACK;
  const heroBigUrl =
    fmdData?.heroDesktopBigImageUrl ?? FMD_HERO_FALLBACK;
  const heroImageAlt = "FMD hero background";

  // Modern, simple left-to-right word stagger animation
  useStaggerTitleLeft(".fmd-desktop-hero-title", {
    distance: 40,
    duration: 0.8,
    stagger: 0.08,
    ease: "power2.out",
  });

  return (
    <section
      className="fmd-desktop-hero-section w-full bg-white flex overflow-hidden"
      style={{ minHeight: "calc(100dvh - var(--navbar-height, 5rem))" }}
    >
      {/* Left 50%: title + small image + description, vertically centered */}
      <div className="flex-1 flex items-center xl:pl-40">
        <div className="flex flex-col gap-6">
          <Title
            Tag="span"
            text={heroTitle}
            className="fmd-desktop-hero-title text-[#333333] text-[26px] xl:text-[30px] 2xl:text-[40px] font-times-sans font-normal leading-tight"
          />

          {/* Small image */}
          <div className="w-[260px] xl:w-[280px] 2xl:w-[340px] aspect-3/4">
            <img
              src={heroSmallUrl}
              alt={heroImageAlt}
              className="w-full h-full object-cover"
            />
          </div>

          {/* Description */}
          <div className="font-creato font-light text-[16px] tracking-wider text-[#333333] max-w-[500px]">
            <p>{heroDescription}</p>
          </div>
        </div>
      </div>

      {/* Right 50%: large image, full width & height */}
      <div
        className="flex-1 flex items-center justify-end"
        style={{ minHeight: "calc(100dvh - var(--navbar-height, 5rem))" }}
      >
        <img
          src={heroBigUrl}
          alt={heroImageAlt}
          className="w-[80%] h-full object-cover"
        />
      </div>
    </section>
  );
};

export default FmdDesktopHero;