"use client";

import Title from "@/components/atoms/Title";
// import useTitleAnimation from "@/hooks/useTitleAnimation";
import useStaggerTitleLeft from "@/hooks/useStaggerTitleLeft";
import { getPropertyTypeHeroImages } from "./propertyTypeImages";
import type { ListingHeroVisualProps } from "./Hero";

interface HeroDesktopProps {
  type?: string;
  listingHero?: ListingHeroVisualProps;
}

const HeroDesktop = ({ type = "all", listingHero }: HeroDesktopProps) => {
  const fallback = getPropertyTypeHeroImages(type);
  const leftImage =
    listingHero?.heroDesktopSmallUrl || fallback.left;
  const rightImage =
    listingHero?.heroDesktopBigUrl ||
    listingHero?.heroImageRightUrl ||
    listingHero?.heroImageMobileUrl ||
    fallback.right;
  // useTitleAnimation(
  //   ".properties-hero-desktop-title",
  //   ".properties-hero-desktop-section",
  //   {
  //     animation: {
  //       yPercent: 80,
  //       duration: 0.8,
  //     },
  //   }
  // );

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

  // Format property type for display
  const formatPropertyType = (type: string): string => {
    if (type === "all") {
      return "Properties";
    }
    return type.charAt(0).toUpperCase() + type.slice(1);
  };

  const baseLabel = listingHero?.heroTitle ?? formatPropertyType(type);
  const headline =
    listingHero?.heroTitle && /masterpieces/i.test(listingHero.heroTitle)
      ? listingHero.heroTitle
      : `${baseLabel} Masterpieces`;

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

          {/* Small image - ~40% taller */}
          <div className="w-[260px] xl:w-[280px] 2xl:w-[340px] aspect-3/4">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={leftImage}
              alt={`${baseLabel} showcase`}
              className="w-full h-full object-cover"
            />
          </div>
          {/* Description */}
          {listingHero?.heroDescription ? (
            <div className="font-creato font-light text-[16px] tracking-wider text-[#333333] max-w-[500px]">
              <p>{listingHero.heroDescription}</p>
            </div>
          ) : null}
        </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))" }}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={rightImage}
          alt={`${baseLabel} hero`}
          className="w-[80%] h-full object-cover"
        />
      </div>
    </section>
  );
};

export default HeroDesktop;