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

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

interface DesignoDesktopHeroProps {
  designoData: DesignoPageData | null;
}

const DESIGNO_HERO_FALLBACK = "/images/designo/background/hero.jpg";
const DESIGNO_LOGO_FALLBACK = "/images/designo/logo/designo-black.png";

const DesignoDesktopHero = ({ designoData }: DesignoDesktopHeroProps) => {
  const heroTitle = designoData?.heroTitle || "Interior Design";
  const heroDescription =
    designoData?.heroDescription ||
    "Our interior design team, Designo, is a one-stop solution for your architectural vision. In the past 8 years, we have earned the reputation as a reliable and trustworthy partner, creating a unique lifestyle and workspace for our clients.";

  const heroSmallUrl =
    designoData?.heroDesktopSmallImageUrl ?? DESIGNO_HERO_FALLBACK;
  const heroBigUrl =
    designoData?.heroDesktopBigImageUrl ?? DESIGNO_HERO_FALLBACK;
  const heroImageAlt = "Designo hero background";

  const logoUrl = designoData?.heroLogoUrl ?? DESIGNO_LOGO_FALLBACK;
  const logoAlt = "DesignO logo";
  const hasLogo = !!designoData?.heroLogoUrl;

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

  return (
    <section
      className="designo-desktop-hero-section w-full bg-white flex overflow-hidden"
      style={{ minHeight: "calc(100dvh - var(--navbar-height, 5rem))" }}
    >
      {/* Left 50%: logo OR title (fallback) + 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">
          {/* Logo OR Title (fallback) - show only one */}
          {hasLogo ? (
            <div className="flex justify-start items-end gap-2">
              <img
                src={logoUrl}
                alt={logoAlt}
                className=" h-8 2xl:h-12 w-auto"
                loading="lazy"
                decoding="async"
              />
               <p className="text-[#28241E] text-[14px] xl:text-[16px] 2xl:text-[18px] font-times-sans font-light leading-none">Interior Design <br /> Division</p>
            </div>
          ) : (
            <Title
              Tag="span"
              text={heroTitle}
              className="designo-desktop-hero-title text-[#333333] text-[26px] xl:text-[30px] 2xl:text-[40px] font-times-sans font-normal leading-tight"
            />
          )}
          {/* <div>
            <p className="text-[#28241E] text-[18px] xl:text-[20px] 2xl:text-[20px] font-times-sans font-light leading-none">Interior Design Division</p>
          </div> */}

          {/* 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 DesignoDesktopHero;