"use client";

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

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

interface BespokeLayout3Props {
  title?: string;
  address?: string;
  tagline?: string;
  href?: string;
  image?: {
    src: string;
    alt: string;
    srcSet?: string;
    sizes?: string;
  };
}

const BespokeLayout3 = ({
  title = "",
  address = "",
  tagline = "",
  image,
  href,
}: BespokeLayout3Props) => {
  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">
        {/* Image */}
        {image && (
          <div className="w-full overflow-hidden">
            {href ? (
              <Link href={href}>
                <img
                  src={image.src}
                  alt={image.alt}
                  srcSet={image.srcSet}
                  sizes={image.sizes ?? "100vw"}
                  className="w-full aspect-square h-auto object-cover cursor-pointer"
                  loading="eager"
                  decoding="async"
                />
              </Link>
            ) : (
              <img
                src={image.src}
                alt={image.alt}
                srcSet={image.srcSet}
                sizes={image.sizes ?? "100vw"}
                className="w-full aspect-square h-auto object-cover"
                loading="eager"
                decoding="async"
              />
            )}
          </div>
        )}

        {/* Title and Address */}
        <div>
          {href ? (
            <Link
              href={href}
              className="no-underline hover:no-underline cursor-pointer inline-block"
            >
              <h3 className="font-creato font-normal text-[28px] lg:text-[30px] xl:text-[36px] 2xl:text-[40px] text-[#333333] leading-tight">
                {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>
          )}
          <p className="font-creato text-[14px] md:text-[16px] text-[#777777] leading-relaxed">
            {address}
          </p>
        </div>

        {/* Tagline */}
        <div className="-mt-4 lg:mt-0">
          <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 w-full gap-10 min-h-[600px]">
        {/* Left Column - 60% width with white background */}
        <div className="w-[60%] bg-white flex items-end justify-end pl-12 lg:pl-24 xl:pl-40 2xl:pl-80 ">
          <div className="flex items-end gap-8 lg:gap-12 xl:gap-16 2xl:gap-20">
            {/* Tagline - positioned to the left */}
            <div className="flex items-end">
              <p className="font-creato font-normal text-[24px] lg:text-[28px] xl:text-[32px] 2xl:text-[36px] text-[#333333] leading-tight max-w-lg">
                {tagline}
              </p>
            </div>

            {/* Title and Address Group - right aligned within its block */}
            <div className="flex flex-col">
              {href ? (
                <Link
                  href={href}
                  className="no-underline hover:no-underline cursor-pointer inline-block"
                >
                  <Title
                    Tag="h1"
                    text={title}
                    className="text-[#333333] text-[28px] lg:text-[30px] xl:text-[36px] 2xl:text-[40px] font-creato font-normal leading-tight"
                  />
                </Link>
              ) : (
                <Title
                  Tag="h1"
                  text={title}
                  className="text-[#333333] text-[28px] lg:text-[30px] xl:text-[36px] 2xl:text-[40px] font-creato font-normal leading-tight"
                />
              )}
              <p className="font-creato text-[14px] lg:text-[16px] xl:text-[18px] 2xl:text-[20px] text-[#777777] leading-relaxed mt-2">
                {address}
              </p>
            </div>
          </div>
        </div>

        {/* Right Column - 40% width with image */}
        {image ? (
          <div className="w-[40%] relative overflow-hidden">
            {href ? (
              <Link href={href}>
                <img
                  src={image.src}
                  alt={image.alt}
                  srcSet={image.srcSet}
                  sizes={image.sizes ?? "(min-width: 1024px) 40vw, 100vw"}
                  className="w-full h-full object-cover cursor-pointer aspect-[4/3]"
                  loading="eager"
                  decoding="async"
                />
              </Link>
            ) : (
              <img
                src={image.src}
                alt={image.alt}
                srcSet={image.srcSet}
                sizes={image.sizes ?? "(min-width: 1024px) 40vw, 100vw"}
                className="w-full h-full object-cover"
                loading="eager"
                decoding="async"
              />
            )}
          </div>
        ) : (
          <div className="w-[40%] bg-gray-100" />
        )}
      </div>
    </section>
  );
};

export default BespokeLayout3;