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

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

interface NewsDesktopHeroProps {
  newsData: NewsPageData | null;
}

const NEWS_HERO_FALLBACK = "/images/news/background/news-bg.jpg";

const NewsDesktopHero = ({ newsData }: NewsDesktopHeroProps) => {
  const heroTitle = newsData?.heroTitle || "News & Events";
  const heroDescription =
    newsData?.heroDescription ||
    "Stay connected with Navana Real Estate through our latest news and events. From project updates to company milestones, explore the stories shaping our journey in real estate.";

  const heroSmallUrl =
    newsData?.heroDesktopSmallImageUrl ?? NEWS_HERO_FALLBACK;
  const heroBigUrl =
    newsData?.heroDesktopBigImageUrl ?? NEWS_HERO_FALLBACK;
  const heroImageAlt = "News & Events hero background";

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

  return (
    <section
      className="news-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="news-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 NewsDesktopHero;