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

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

interface StoryNarrativeSectionProps {
  storyData: StoryPageData | null;
}

const NavanaStoryNarrative = ({ storyData }: StoryNarrativeSectionProps) => {
  const narrativeSource = storyData?.narrative;
  if (!narrativeSource) return null;

  const title = narrativeSource.title ?? "";
  const blocks = narrativeSource.blocks ?? [];
  const leftBlock = blocks[0];
  const rightTopBlock = blocks[1];
  const rightBottomBlock = blocks[2];

  // Helper function to get image URL
  const getImageUrl = (imageData: unknown) => {
    if (!imageData) return "";
    const imageDataTyped = imageData as { url?: string; data?: { attributes?: { url?: string } } } | null;
    if (!imageDataTyped) return "";
    const imageUrl = imageDataTyped.url || imageDataTyped.data?.attributes?.url;
    if (!imageUrl) return "";
    if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
      return imageUrl;
    }
    const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_URL || "http://localhost:1337";
    const cleanStrapiUrl = strapiUrl.replace(/\/$/, "");
    const cleanImageUrl = imageUrl.startsWith("/") ? imageUrl : `/${imageUrl}`;
    return `${cleanStrapiUrl}${cleanImageUrl}`;
  };

  const image1Url =
    getImageUrl(leftBlock?.image) ||
    "/images/excellence/excellence-bg-1.jpg";
  const image1Alt =
    leftBlock?.image?.alternativeText ||
    leftBlock?.image?.data?.attributes?.alternativeText ||
    "Modern building with green terraces";

  const image2Url =
    getImageUrl(rightTopBlock?.image) ||
    "/images/excellence/excellence-bg-2.jpg";
  const image2Alt =
    rightTopBlock?.image?.alternativeText ||
    rightTopBlock?.image?.data?.attributes?.alternativeText ||
    "Modern high-rise building";

  const image3Url =
    getImageUrl(rightBottomBlock?.image) ||
    "/images/excellence/excellence-bg-3.jpg";
  const image3Alt =
    rightBottomBlock?.image?.alternativeText ||
    rightBottomBlock?.image?.data?.attributes?.alternativeText ||
    "Navana Real Estate building";

  return (
    <section className="bg-white mt-8">
      <div className="container mx-auto px-4 py-8 md:py-12 lg:py-16 xl:py-20">
        {/* Mobile Layout: Single Column Vertical Flow */}
        <div className="md:hidden space-y-10">
          {/* Main Title */}
          <div>
            <Title
              Tag="h1"
              text={title}
              className="text-[#28241E] font-times-sans text-[32px] md:text-[40px] leading-[1.1] text-left"
            />
          </div>

          {/* Image 1 - 1:1 aspect */}
          <div className="overflow-hidden rounded-sm">
            <img
              src={image1Url}
              alt={image1Alt}
              className="w-full aspect-square object-cover hover:scale-105 transition-transform duration-700"
            />
          </div>

          {/* Paragraph 1 */}
          <p className="font-creato font-light text-[14px] text-[#28241E] leading-relaxed tracking-wide text-left">
            {leftBlock?.text}
          </p>

          {/* Image 2 - 3:4 aspect */}
          <div className="overflow-hidden rounded-sm">
            <img
              src={image2Url}
              alt={image2Alt}
              className="w-full aspect-3/4 object-cover hover:scale-105 transition-transform duration-700"
            />
          </div>

          {/* Paragraph 2 */}
          <p className="font-creato font-light text-[14px] text-[#28241E] leading-relaxed tracking-wide text-left">
            {rightTopBlock?.text}
          </p>

          {/* Image 3 - 3:4 aspect */}
          <div className="overflow-hidden rounded-sm">
            <img
              src={image3Url}
              alt={image3Alt}
              className="w-full aspect-3/4 object-cover hover:scale-105 transition-transform duration-700"
            />
          </div>

          {/* Broaden Title */}
          <div>
            <Title
              Tag="h2"
              text={rightBottomBlock?.headline ?? ""}
              className="text-[#28241E] font-times-sans text-[32px] leading-[1.1] text-left"
            />
          </div>

          {/* Broaden Description */}
          <p className="font-creato font-light text-[14px] text-[#28241E] leading-relaxed tracking-wide text-left">
            {rightBottomBlock?.text}
          </p>
        </div>

        {/* Desktop Layout: Two Column */}
        <div className="hidden md:grid md:grid-cols-2 gap-8 lg:gap-16 xl:gap-[72px] 2xl:gap-20">
          {/* Left Column (order-1) */}
          <div className="space-y-10">
            {/* H1 Title */}
            <div className="mb-10 md:mb-12 lg:mb-16 xl:mb-20 2xl:mb-40">
              <Title
                Tag="h1"
                text={title}
                className="text-[#28241E] font-times-sans md:text-[40px] lg:text-[48px] xl:text-[64px] 2xl:text-[72px] leading-[1.1] text-left"
              />
            </div>

            {/* 1:1 Image */}
            <div className="overflow-hidden rounded-sm">
              <img
                src={image1Url}
                alt={image1Alt}
                className="w-full md:w-10/12 xl:w-11/12 2xl:w-3/4 aspect-square object-cover hover:scale-105 transition-transform duration-700"
              />
            </div>

            {/* Paragraph 1 - max-width matches image width */}
            <p className="font-creato font-light text-[14px] xl:text-[15px] 2xl:text-[16px] text-[#28241E] leading-relaxed tracking-wide text-left">
              {leftBlock?.text}
            </p>
          </div>

          {/* Right Column */}
          <div className="space-y-10 xl:space-y-20 2xl:space-y-40">
            {/* Top Section: Image 2 + Paragraph */}
            <div className="flex justify-end">
              <div className="w-full md:w-10/12 xl:w-10/12 2xl:w-3/5 space-y-10">
              {/* 3:4 Image */}
              <div className="overflow-hidden rounded-sm">
                <img
                  src={image2Url}
                  alt={image2Alt}
                  className="w-full aspect-3/4 object-cover hover:scale-105 transition-transform duration-700"
                />
              </div>

              {/* Paragraph 2 - max-width matches image width */}
              <p className="font-creato font-light text-[14px] xl:text-[15px] 2xl:text-[16px] text-[#28241E] leading-relaxed tracking-wide text-left">
                {rightTopBlock?.text}
              </p>
              </div>
            </div>

            {/* Bottom Section: Image 3 + H2 Title + Paragraph */}
            <div className="flex justify-end">
             <div className="w-full md:w-10/12 xl:w-11/12 2xl:w-4/5 space-y-10">
               {/* 3:4 Image */}
               <div className="overflow-hidden rounded-sm">
                <img
                  src={image3Url}
                  alt={image3Alt}
                  className="w-full aspect-3/4 object-cover hover:scale-105 transition-transform duration-700"
                />
              </div>

              {/* H2 Title */}
              <div>
                <Title
                  Tag="h2"
                  text={rightBottomBlock?.headline ?? ""}
                  className="text-[#28241E] font-times-sans text-[32px] md:text-[40px] lg:text-[38px] xl:text-[48px] 2xl:text-[56px] leading-[1.1] text-left"
                />
              </div>

              {/* Broaden Description - max-width matches image width */}
              <p className="font-creato font-light text-[14px] xl:text-[15px] 2xl:text-[16px] text-[#28241E] leading-relaxed tracking-wide text-left">
                {rightBottomBlock?.text}
              </p>
             </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default NavanaStoryNarrative;