/* eslint-disable @next/next/no-img-element */

import Title from "@/components/atoms/Title";
import type { BespokePageData } from "@/utils/strapi";

interface BespokeHeroProps {
  bespokeData?: BespokePageData | null;
}

// Server Component - images rendered on server, no client serialization issues
const BespokeHero = ({ bespokeData }: BespokeHeroProps) => {
  const heroTitle = bespokeData?.heroTitle || "NREL Bespoke";
  const heroDescription =
    bespokeData?.heroDescription ||
    "NREL Bespoke offers tailor-made interior solutions, crafted to reflect your unique lifestyle and aspirations. Our team combines design vision with meticulous execution to create spaces that feel personal, timeless, and distinctly yours.";

  const heroImageUrlMobile = bespokeData?.heroImageMobileUrl ?? undefined;
  const heroDesktopSmallImageUrl = bespokeData?.heroDesktopSmallImageUrl ?? undefined;
  const heroDesktopBigImageUrl = bespokeData?.heroDesktopBigImageUrl ?? undefined;

  return (
    <>
      {/* Mobile & Tablet Hero - visible up to xl (hidden at xl and above) */}
      <section className="xl:hidden">
        {/* Full width hero image - aspect-ratio reserves space to prevent layout shift on mobile */}
        {heroImageUrlMobile && (
          <div className="w-full aspect-[4/4] overflow-hidden bg-[#eaeaea]">
            <img
              src={heroImageUrlMobile}
              className="w-full h-full object-cover"
              alt={heroTitle}
              loading="eager"
              decoding="async"
            />
          </div>
        )}

        <div className="mx-auto max-w-md bg-white px-4 py-12 md:py-20">
          <div className="mb-8 md:mb-12 pl-6">
            <Title
              Tag="span"
              text={heroTitle}
              className="block text-[#333333] text-[22px] md:text-[26px] font-times-sans font-normal leading-tight"
            />
          </div>

          <div className="pl-6 space-y-3 font-creato text-[clamp(12px,3.5vw,16px)] leading-relaxed tracking-wider text-[#333333]">
            <p>{heroDescription}</p>
          </div>
        </div>
      </section>

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

            {/* Small image */}
            {heroDesktopSmallImageUrl && (
              <div className="w-[260px] xl:w-[280px] 2xl:w-[340px] aspect-3/4">
                <img
                  src={heroDesktopSmallImageUrl}
                  alt={heroTitle}
                  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 */}
        {heroDesktopBigImageUrl && (
          <div
            className="flex-1 flex items-center justify-end shrink-0"
            style={{ height: "calc(100dvh - var(--navbar-height, 5rem))" }}
          >
            <img
              src={heroDesktopBigImageUrl}
              alt={heroTitle}
              className="w-[80%] h-full object-cover"
            />
          </div>
        )}
      </section>
    </>
  );
};

export default BespokeHero;