"use client";

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

import Title from "@/components/atoms/Title";
import Link from "next/link";

interface BespokeLayout1Props {
  title?: string;
  address?: string;
  tagline?: string;
  href?: string;
  leftImage?: {
    src: string;
    alt: string;
    srcSet?: string;
    sizes?: string;
  };
  rightImage?: {
    src: string;
    alt: string;
    srcSet?: string;
    sizes?: string;
  };
}

const BespokeLayout1 = ({
  title = "",
  address = "",
  tagline = "",
  leftImage,
  rightImage,
  href,
}: BespokeLayout1Props) => {
  return (
    <section className="w-full bg-white py-12 md:py-16 xl:py-20">
      {/* Mobile Layout */}
      <div className="lg:hidden px-4 md:px-6 space-y-8 lg:space-y-8">
          {/* Title */}
          <div>
            {href ? (
              <Link href={href} className="no-underline hover:no-underline">
                <Title
                  Tag="h1"
                  text={title}
                  className="text-[#333333] text-[32px] md:text-[40px] font-times-sans font-normal leading-tight mb-2 xl:mb-4"
                />
              </Link>
            ) : (
              <Title
                Tag="h1"
                text={title}
                className="text-[#333333] text-[32px] md:text-[40px] font-times-sans font-normal leading-tight mb-2 xl:mb-4"
              />
            )}
            <p className="font-creato text-[14px] md:text-[16px] text-[#777777] leading-relaxed">
              {address}
            </p>
          </div>

          {/* Images */}
          {(leftImage || rightImage) && (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {leftImage && (
                <div className="aspect-square overflow-hidden">
                  {href ? (
                    <Link href={href}>
                      <img
                        src={leftImage.src}
                        alt={leftImage.alt}
                        srcSet={leftImage.srcSet}
                        sizes={leftImage.sizes ?? "(max-width: 768px) 100vw, 50vw"}
                        className="w-full h-full object-cover cursor-pointer"
                        loading="eager"
                        decoding="async"
                      />
                    </Link>
                  ) : (
                    <img
                      src={leftImage.src}
                      alt={leftImage.alt}
                      srcSet={leftImage.srcSet}
                      sizes={leftImage.sizes ?? "(max-width: 768px) 100vw, 50vw"}
                      className="w-full h-full object-cover"
                      loading="eager"
                      decoding="async"
                    />
                  )}
                </div>
              )}
              {rightImage && (
                <div className="aspect-square overflow-hidden">
                  {href ? (
                    <Link href={href}>
                      <img
                        src={rightImage.src}
                        alt={rightImage.alt}
                        srcSet={rightImage.srcSet}
                        sizes={rightImage.sizes ?? "(max-width: 768px) 100vw, 50vw"}
                        className="w-full h-full object-cover cursor-pointer"
                        loading="eager"
                        decoding="async"
                      />
                    </Link>
                  ) : (
                    <img
                      src={rightImage.src}
                      alt={rightImage.alt}
                      srcSet={rightImage.srcSet}
                      sizes={rightImage.sizes ?? "(max-width: 768px) 100vw, 50vw"}
                      className="w-full h-full object-cover"
                      loading="eager"
                      decoding="async"
                    />
                  )}
                </div>
              )}
            </div>
          )}
           {/* Tagline */}
           <div>
            <p className="font-creato text-[16px] md:text-[18px] text-[#333333] leading-relaxed">
              {tagline}
            </p>
          </div>
      </div>

      {/* Desktop Layout - lg, xl, 2xl */}
      <div className="hidden lg:flex items-start gap-4 lg:gap-6 xl:gap-8">
        {/* Left Column - responsive width and padding */}
        <div className="w-[35%] lg:w-[38%] xl:w-[40%] pl-12 lg:pl-24 xl:pl-40 2xl:pl-80">
          <div className="space-y-0">
            {/* Title */}
            {href ? (
              <Link href={href} className="no-underline hover:no-underline">
                <h3 className="font-creato font-normal text-[28px] lg:text-[30px] xl:text-[36px] 2xl:text-[40px] text-[#333333] leading-tight cursor-pointer">
                  {title}
                </h3>
              </Link>
            ) : (
              <h3 className="font-creato font-normal text-[28px] lg:text-[30px] xl:text-[36px] 2xl:text-[40px] text-[#333333] leading-tight">
                {title}
              </h3>
            )}

            {/* Address */}
            <p className="font-creato text-[14px] lg:text-[16px] xl:text-[18px] 2xl:text-[20px] text-[#888888] leading-relaxed">
              {address}
            </p>
          </div>
        </div>

        {/* Right Column - responsive width */}
        <div className="w-[65%] lg:w-[62%] xl:w-[60%]">
          {/* Tagline */}
          <div className="max-w-lg">
            <p className="font-creato font-normal text-[24px] lg:text-[28px] xl:text-[32px] 2xl:text-[36px] text-[#333333] leading-tight">
              {tagline}
            </p>
          </div>

          {/* Images Container - 60/40 split with responsive gap */}
          {(leftImage || rightImage) && (
            <div className="flex gap-4 lg:gap-6 xl:gap-8 2xl:gap-20 max-h-[400px] lg:max-h-[450px] xl:max-h-[500px] mt-10 lg:mt-12 xl:mt-16 2xl:mt-20">
              {/* First Image - 60% width, 4/3 aspect ratio (wider) */}
              {leftImage && (
                <div className="flex-[3] aspect-[4/3] overflow-hidden">
                  {href ? (
                    <Link href={href}>
                      <img
                        src={leftImage.src}
                        alt={leftImage.alt}
                        srcSet={leftImage.srcSet}
                        sizes={leftImage.sizes ?? "(min-width: 1024px) 60vw, 100vw"}
                        className="w-full h-full object-cover cursor-pointer"
                        loading="eager"
                        decoding="async"
                      />
                    </Link>
                  ) : (
                    <img
                      src={leftImage.src}
                      alt={leftImage.alt}
                      srcSet={leftImage.srcSet}
                      sizes={leftImage.sizes ?? "(min-width: 1024px) 60vw, 100vw"}
                      className="w-full h-full object-cover"
                      loading="eager"
                      decoding="async"
                    />
                  )}
                </div>
              )}

              {/* Second Image - 40% width, 3/4 aspect ratio (taller, smaller) */}
              {rightImage && (
                <div className="flex-[2] aspect-[3/4] overflow-hidden">
                  {href ? (
                    <Link href={href}>
                      <img
                        src={rightImage.src}
                        alt={rightImage.alt}
                        srcSet={rightImage.srcSet}
                        sizes={rightImage.sizes ?? "(min-width: 1024px) 40vw, 100vw"}
                        className="w-full h-full object-cover cursor-pointer"
                        loading="eager"
                        decoding="async"
                      />
                    </Link>
                  ) : (
                    <img
                      src={rightImage.src}
                      alt={rightImage.alt}
                      srcSet={rightImage.srcSet}
                      sizes={rightImage.sizes ?? "(min-width: 1024px) 40vw, 100vw"}
                      className="w-full h-full object-cover"
                      loading="eager"
                      decoding="async"
                    />
                  )}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

export default BespokeLayout1;