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

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

interface ContactDesktopHeroProps {
  contactData: ContactPageData | null;
}

const CONTACT_HERO_FALLBACK = "/images/contact/background/hero.png";

const ContactDesktopHero = ({ contactData }: ContactDesktopHeroProps) => {
  const heroTitle = contactData?.heroTitle || "Contact Us";
  const heroDescription =
    contactData?.heroDescription ||
    "At Navana Real Estate, we are dedicated to serving you with care and efficiency. For any questions or support regarding our projects or services, reach out to us—we're here to help.";

  const heroSmallUrl = contactData?.heroDesktopSmallImageUrl ?? CONTACT_HERO_FALLBACK;
  const heroBigUrl = contactData?.heroDesktopBigImageUrl ?? CONTACT_HERO_FALLBACK;
  const heroImageAlt = heroTitle;

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

  return (
    <section
      className="contact-desktop-hero-section w-full bg-white flex overflow-hidden"
      style={{ height: "calc(100dvh - var(--navbar-height, 5rem))" }}
    >
      {/* Left 50%: title + small image + description, vertically centered */}
      <div className="flex-1 flex items-center xl:pl-20 2xl:pl-40">
        <div className="flex flex-col gap-6">
          <Title
            Tag="span"
            text={heroTitle}
            className="contact-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 shrink-0"
        style={{ height: "calc(100dvh - var(--navbar-height, 5rem))" }}
      >
        <img
          src={heroBigUrl}
          alt={heroImageAlt}
          className="w-[80%] h-full object-cover"
        />
      </div>
    </section>
  );
};

export default ContactDesktopHero;