"use client";

import Image from "next/image";
import LanguageAwareLink from "@/src/lib/utils/LanguageAwareLink";

import { useMemo, useState, useEffect } from "react";
import { useLanguage } from "@/src/lib/context/LanguageContext";
import { withCDN, optimizedImage } from "@/src/lib/utils";
import AutoScrollSlider from "../ui/AutoScrollSlider";
import ReverseAutoSlider from "../ui/ReverseAutoSlider";
import AnimatedScroll from "../ui/Animated-Scroll/AnimatedScroll";
import AboutSlider from "./aboutSlider";
import FooterForm from "../layout/FormLazyWrapper";
import Footer from "../layout/Footer";
import StyledGlobe from "./StyledGlobe";
import AboutThumbnailSlide from "./aboutThumbnailSlider";
import { fetchFranchiseAddressesAction } from "@/src/lib/actions/franchiseAddressesAction";
import type { ProcessedHeaderFooterHomeData } from "@/src/lib/types/header";
import { AboutContent } from "../../lib/services/aboutService";
import Breadcrumbs from "../layout/Breadcrumbs";
import BackButton from "../layout/BackButton";
import ProgramsSliderFooter from "../layout/ProgramsSlider-Footer";
import { mergeContentWithTranslation } from "@/src/lib/utils/languageHelper";


interface AboutPageClientProps {
  headerFooterHomeData: ProcessedHeaderFooterHomeData;
  aboutPageData: { default: AboutContent | null; translated?: AboutContent | null };
}

/**
 * Parse images from API data (JSON stringified array)
 */
function parseImages(imagesJson?: string) {
  if (!imagesJson) return null;
  try {
    const images = JSON.parse(imagesJson);
    if (Array.isArray(images) && images.length > 0) {
      return images;
    }
    return null;
  } catch (error) {
    console.warn("[AboutPageClient] Failed to parse images:", error);
    return null;
  }
}

export default function AboutPageClient({
  headerFooterHomeData,
  aboutPageData,
}: AboutPageClientProps) {
  const { currentLanguage } = useLanguage();
  const [globeLocations, setGlobeLocations] = useState<Array<{ lat: number; lon: number }>>([]);
  const [isLoadingLocations, setIsLoadingLocations] = useState(true);

  // Fetch franchise addresses for globe pointers with lat/lng
  useEffect(() => {
    const loadFranchiseLocations = async () => {
      try {
        setIsLoadingLocations(true);
        const response = await fetchFranchiseAddressesAction();

        if (response.success && response.data && response.data.length > 0) {
          // Transform locations to the format expected by the globe component
          const locations = response.data.map(loc => ({
            lat: loc.lat,
            lon: loc.lon,
          }));

          setGlobeLocations(locations);
        } else {
          console.warn('[AboutPageClient] No franchise locations found');
        }
      } catch (error) {
        console.error('[AboutPageClient] Failed to fetch franchise addresses:', error);
      } finally {
        setIsLoadingLocations(false);
      }
    };

    loadFranchiseLocations();
  }, []);

  // Select content based on current language — translated entries fall back per-field to default
  const aboutContent: AboutContent = useMemo(() => {
    if (currentLanguage !== "default" && aboutPageData.translated) {
      return mergeContentWithTranslation(
        aboutPageData.default || {},
        aboutPageData.translated
      );
    }
    return aboutPageData.default || {};
  }, [currentLanguage, aboutPageData.default, aboutPageData.translated]);

  // Extract heading data with fallbacks
  const headingData = useMemo(
    () => ({
      mainHeading: aboutContent.heading?.mainHeading || "About young engineers",
      subHeading: aboutContent.heading?.subHeading || "Where Learning Meets Imagination",
    }),
    [aboutContent.heading]
  );

  // Parse Who We Are images with fallbacks
  const whoWeAreImages = useMemo(() => {
    const apiImages = parseImages(aboutContent.whoWeAre?.images);
    return apiImages || [
      "https://yefranchisees.b-cdn.net/frontend/About/img-01.jpg.jpeg",
      "https://yefranchisees.b-cdn.net/frontend/About/img-02.jpg.jpeg",
      "https://yefranchisees.b-cdn.net/frontend/About/img-03.jpg.jpeg",
      "https://yefranchisees.b-cdn.net/frontend/About/img-04.jpg.jpeg",
    ];
  }, [aboutContent.whoWeAre?.images]);

  // Parse slider images with fallbacks
  const autoScrollSliderImages = useMemo(() => {
    const apiImages = parseImages(aboutContent.sliderImages?.sliderImages);
    return apiImages || [
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo.png",
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo%20(1).png",
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/bc_scroll_pct_3.png",
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo%20(2).png",
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo%20(3).png",
    ];
  }, [aboutContent.sliderImages?.sliderImages]);

  // Parse reverse slider images with fallbacks
  const reverseSliderImages = useMemo(() => {
    const apiImages = parseImages(aboutContent.sliderImages?.reverseSliderImages);
    return apiImages || [
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo.png",
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo%20(1).png",
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/bc_scroll_pct_3.png",
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo%20(2).png",
      "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo%20(3).png",
    ];
  }, [aboutContent.sliderImages?.reverseSliderImages]);

  // Extract Who We Are section data with fallbacks
  const whoWeAreData = useMemo(
    () => ({
      mainHeading: aboutContent.whoWeAre?.mainHeading || "Who we are",
      paragraph1: aboutContent.whoWeAre?.paragraph1 || "Young Engineers helps children discover the joy of learning through play and creativity.",
      paragraph2:
        aboutContent.whoWeAre?.paragraph2 ||
        "Our team of passionate educators and STEM professionals make every lesson engaging, safe, and inspiring — combining fun, hands-on building with real science and engineering concepts to help every child grow curious and confident",
      ctaButtonText: aboutContent.whoWeAre?.ctaButtonText || "Discover Programs",
    }),
    [aboutContent.whoWeAre]
  );

  // Extract features data with fallbacks
  const parsedFeatures = useMemo(() => {
    try {
      const featureParsed =
        typeof aboutContent.ourMission?.features === "string"
          ? JSON.parse(aboutContent.ourMission.features)
          : aboutContent.ourMission?.features || [];
      return Array.isArray(featureParsed) ? featureParsed : [];
    } catch (error) {
      console.error("[AboutPageClient] Failed to parse features:", error);
      return [
        { featureTitle: "Stronger Logic & Critical Thinking" },
        { featureTitle: "Boosted Confidence & Independence" },
        { featureTitle: "Improved Teamwork & Communication" },
        { featureTitle: "Visible Progress & Genuine Curiosity" },
      ];
    }
  }, [aboutContent.ourMission?.features]);

  // Extract Our Mission section data with fallbacks
  const ourMissionData = useMemo(
    () => ({
      mainHeading: aboutContent.ourMission?.mainHeading || "Our Mission",
      subHeading:
        aboutContent.ourMission?.subHeading ||
        "What Parents Often Notice in Their Children After Our Classes",
      paragraph1:
        aboutContent.ourMission?.paragraph1 ||
        "Since 2008, Young Engineers has been inspiring children around the world to explore science, technology, engineering, and mathematics (STEM) in the most engaging and meaningful way — by building",
      paragraph2:
        aboutContent.ourMission?.paragraph2 ||
        "Our mission is to make learning hands-on, exciting, and purposeful, helping children develop problem-solving skills, creativity, and confidence as they build real working models and discover how the world around",
      paragraph3:
        aboutContent.ourMission?.paragraph3 ||
        "Every Young Engineers session is designed to spark curiosity and show kids that science isn't just something you read about — it's something you can build",
      features: parsedFeatures,
      ctaButtonText: aboutContent.ourMission?.ctaButtonText || "Discover programs",
    }),
    [aboutContent.ourMission?.mainHeading, aboutContent.ourMission?.subHeading, aboutContent.ourMission?.paragraph1, aboutContent.ourMission?.paragraph2, aboutContent.ourMission?.paragraph3, aboutContent.ourMission?.ctaButtonText, parsedFeatures]
  );

  // Extract Our Method section data with fallbacks
  const ourMethodData = useMemo(
    () => ({
      mainHeading: aboutContent.ourMethod?.mainHeading || "Our Method",
      paragraph1:
        aboutContent.ourMethod?.paragraph1 ||
        'We call it "Edutainment" — a unique blend of education and entertainment.',
      paragraph2:
        aboutContent.ourMethod?.paragraph2 ||
        "Our programs combine storytelling, teamwork, and hands-on model building using LEGO® and other construction materials.",
      paragraph3:
        aboutContent.ourMethod?.paragraph3 ||
        "Children learn complex STEM principles like physics, energy, mechanics, and coding — without even realizing they're learning, because they're too busy having fun!",
      ctaButtonText: aboutContent.ourMethod?.ctaButtonText || "Discover programs",
    }),
    [aboutContent.ourMethod]
  );

  // Extract programs data with fallbacks
  const parsedPrograms = useMemo(() => {
    try {
      const programsParsed =
        typeof aboutContent.whatChildrenGain?.programs === "string"
          ? JSON.parse(aboutContent.whatChildrenGain.programs)
          : aboutContent.whatChildrenGain?.programs || [];
      return Array.isArray(programsParsed) ? programsParsed : [];
    } catch (error) {
      console.error("[AboutPageClient] Failed to parse programs:", error);
      return [{ programHeading: "Program for developing confidence " }];
    }
  }, [aboutContent.whatChildrenGain?.programs]);

  // Extract What Children Gain section data with fallbacks
  const whatChildrenGainData = useMemo(
    () => ({
      mainHeading: aboutContent.whatChildrenGain?.mainHeading || "What Children Gain",
      programs: parsedPrograms,
    }),
    [aboutContent.whatChildrenGain?.mainHeading, parsedPrograms]
  );

  // Parse slider texts with fallbacks
  const apiSliderTexts = aboutContent.sliderTexts?.sliderTexts;
  const sliderTexts: string[] | undefined = useMemo(() => {
    if (!apiSliderTexts) return undefined;
    try {
      const parsed = JSON.parse(apiSliderTexts);
      if (Array.isArray(parsed) && parsed.length > 0) {
        return parsed.map((item: { text: string }) => item.text);
      }
      return undefined;
    } catch (e) {
      console.error("[AboutPageClient] Error parsing sliderTexts", e);
      return undefined;
    }
  }, [apiSliderTexts]);

  return (
    <main>
      {/*==============Hero-banner================*/}
      <section className="relative w-full overflow-hidden py-6 md:py-20 lg:py-25 
          min-h-[330px] xl:min-h-[400px] min-[106rem]:h-[460px]
          px-4 md:px-8 sm:p b-0 max-[767px]:h-[380px] max-[700px]:h-[430px] max-[480px]:h-[500px]">
     
      <BackButton />
       
        {/* Background */}
        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-full bg-cover bg-[position:50%_0%]"
            style={{
              backgroundImage: `url('${optimizedImage(withCDN("/About/bg_hero%20screen%20(2).png"), 828)}')`,
            }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-[position:50%_-7%]"
            style={{
              backgroundImage: `url('${optimizedImage(withCDN("/About/hero%20section.png"), 1920)}')`,
            }}
          />
        </div>
           
      

        {/* Overlay */}
        <div className="pointer-events-none absolute inset-0" />
        <div className="relative z-10 flex flex-col justify-center gap-8 px-5 max-w-[1300px] mx-auto w-full px-4 lg:px-10 xl:px-0 lg:px-10 max-[991]:mt-[-10px] max-[991]:px-0 max-[767px]:mt-[0px] max-[767px]:justify-start max-[767px]:pt-[20px]">
          <Breadcrumbs />

          {/* Welcome text */}
          <div className="flex flex-col gap-3 leading-none mt-6">
            <h1 className="heading-hero text-[30px] md:text-[40px] lg:text-[50px] max-[767px]:text-[50px]
            text-white uppercase font-bold leading-tight tracking-wide md:whitespace-nowrap">
              {headingData.mainHeading}
            </h1>
            <p className="text-[20px] md:text-[18px] lg:text-[25px] text-[#fff] uppercase max-[767px]:text-[25px] max-[767px]:leading-8">
              {headingData.subHeading}
            </p>
          </div>
        </div>
      </section>

      {/*==============Who-we-are================*/}
      <section className="relative w-full overflow-hidden 
       pb-4 md:pb-1 lg:pb-20
        px-4 md:px-8 lg:px-18 xl:px-34 mt-[-110px] z-99 md:z-10 min-[106rem]:mt-[-140px] lg:pb-[130px]">
        {/* Background */}
        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-full bg-cover bg-top"
            style={{
              backgroundImage: `url('${optimizedImage("https://yefranchisees.b-cdn.net/frontend/home/bg-mobile.png", 828)}')`,
            }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-top"
            style={{
              backgroundImage: `url('${optimizedImage("https://yefranchisees.b-cdn.net/frontend/home/bg-desktop.png", 1920)}')`,
            }}
          />
        </div>

        <div className="max-w-[1300px] mx-auto w-full grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-4 xl:gap-10 mb-4 mt-3 items-center max-[991px]:pb-[60px] max-[767px]:gap-1 max-[767px]:pb-[0px] we-wre-section">
          <div className="md:col-span-6 lg:col-span-6 lg:pt-[100px] pt-[0px] max-[767px]:order-2">
            <h2 className="uppercase text-[30px] 2xl:text-[50px] xl:text-[45px] lg:text-[30px] md:text-[30px] text-[#0097DC] leading-relaxed font-bold mb-3">
              {whoWeAreData.mainHeading}
            </h2>
            <p className="text-[#58585A] text-[18px] lg:text-[22px] xl:text-[22px] sm:text-[16px] font-light mb-7">
              {whoWeAreData.paragraph1}
              <br />
              <br />
              {whoWeAreData.paragraph2}
            </p>
            {/* Button */}
            <LanguageAwareLink
              href={"/programs"}
              className="w-full flex items-center justify-center gap-4 font-[Noto_Sans] font-light md:gap-3 bg-[#0097DC] rounded-full py-2 md:py-3 px-6 md:px-8  hover:shadow-[10px_14px_14px_#0000000D] active:bg-[#0084C1] active:shadow-[10px_14px_14px_#0000000D] transition-all md:w-fit md:h-11 lg:h-16 2xl:h-[60px] whitespace-nowrap"
            >
              <Image
                src={withCDN("/gear.png")}
                alt="Gear"
                width={20}
                height={20}
                className="w-5.5 h-5.5 2xl:h-8 2xl:w-8 md:w-6 md:h-6"
                priority={true}
              />
              <span className="text-white text-[18px] xl:text-[24px] sm:text-[16px] tracking-wide uppercase font-regular max-[360px]:text-[15px]">
                {whoWeAreData.ctaButtonText}
              </span>
            </LanguageAwareLink>
          </div>

          <div className="md:col-span-6 lg:col-span-6 relative w-full h-[300px] lg:h-[520px] md:h-[360px] lg:mt-[50px] mt-[0px] max-[991px]:mb-[50px]  max-[767px]:order-1 max-[767px]:h-full min-[112rem]:h-[640px] max-[767px]:mb-4 slider image-right">
            <AboutThumbnailSlide images={whoWeAreImages} />
          </div>
        </div>
      </section>

      {/*===============our Mission===================*/}
      <section className="relative w-full overflow-hidden 
  pb-10 lg:pb-20
  px-4 md:px-8 lg:px-18 xl:px-34 mt-[-130px] z-10 max-[991]:pb-[60px] max-[991px]:mt-[-70px] max-[767px]:mt-[-100px] misson-section">
        {/* Background */}
        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-full bg-cover bg-[24%]"
            style={{
              backgroundImage: `url('${optimizedImage("https://yefranchisees.b-cdn.net/frontend/testimonials.png", 828)}')`,
              backgroundRepeat:'no repeat'
            }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-top max-[998px]:mt-[-40px]"
            style={{
              backgroundImage: `url('${optimizedImage("https://yefranchisees.b-cdn.net/frontend/testimonials.png", 1920)}')`,
            }}
          />
        </div>

        <div className="max-w-[1300px] mx-auto w-full grid grid-cols-1 md:grid-cols-12 gap-10 mb-4 mt-8 items-center pt-20">
          <div className="md:col-span-6 lg:col-span-6 xl:col-span-6 sm:pt-[100px] md:pt-[50px] xl:pt-[100px] pt-[0px] max-[767px]:order-2 min-[1600px]:!col-span-7 globe-content">
            <h2 className="uppercase text-[30px] 2xl:text-[50px] xl:text-[45px] lg:text-[30px] md:text-[30px] text-[#fff] leading-relaxed font-bold mb-3">
              {ourMissionData.mainHeading}
            </h2>
            <p className="text-[#fff] text-[18px] xl:text-[22px] sm:text-[16px] font-light mb-7">
              {ourMissionData.paragraph1}
              <br />
              <br />
              {ourMissionData.paragraph2}
              <br />
              <br />
              {ourMissionData.paragraph3}
            </p>
            {/* Button */}
            <a
              href={"https://youngengineers.org"}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center font-[Noto_Sans] font-light gap-4 md:gap-3 bg-[#0097DC] rounded-full py-2 md:py-3 px-6 md:px-8  hover:shadow-[10px_14px_14px_#0000000D] active:bg-[#0084C1] active::shadow-[10px_14px_14px_#0000000D] transition-all w-full md:w-fit md:h-11 lg:h-16 2xl:h-[60px] whitespace-nowrap "
            >
              <Image
                src={withCDN("/gear.png")}
                alt="Gear"
                width={20}
                height={20}
                className="w-5.5 h-5.5 2xl:h-8 2xl:w-8 md:w-6 md:h-6"
                priority={true}
              />
              <span className="text-white text-[18px] xl:text-[24px] sm:text-[16px] tracking-wide uppercase font-regular max-[360px]:text-[15px]">
                {ourMissionData.ctaButtonText}
              </span>
            </a>
          </div>

          <div className="md:col-span-6 absolute top-[-10%] right-[-25%] w-[770px] h-[770px] xl:w-[1500px] xl:h-[1500px] 2xl:top-[-25%] 2xl:right-[-25%]
          lg:top-[-20%] lg:right-[-30%] lg:w-[1100px] lg:h-[1100px]  md:w-[900px] md:h-[900px] max-[991px]:right-[-44%] max-[991px]:top-[-6%]
          max-[767px]:order-1 max-[767px]:relative  max-[767px]:right-0 max-[767px]:w-[100%] max-[767px]:h-[600px]  max-[767px]:top-0 max-[767px]:-translate-y-[22%]  max-[767px]:mb-[-290px] globe-container">
            <StyledGlobe
              latitude={headerFooterHomeData.tenant.latitude}
              longitude={headerFooterHomeData.tenant.longitude}
              locations={globeLocations}
            />
          </div>
        </div>

        {/*===========icon-block============*/}
        <div className="max-w-[1300px] mx-auto w-full flex flex items-center  gap-10 mb-4 mt-8  max-[767px]:flex-col  max-[767px]:gap-4">
          <div className="relative w-[40%] md:w-[24%] xl:w-[40%] max-[767px]:w-[100%]">
            <h2 className="uppercase text-[16px] md:text-[14px] xl:text-[20px] text-[#fff] leading-relaxed font-bold">
              {ourMissionData.subHeading}
            </h2>
          </div>
          <div className="relative w-[60%] md:w-[76%] xl:w-[60%] max-[767px]:w-[100%]">
            <div className="grid grid-cols-2 sm:grid-cols-12 gap-4 mb-4 mt-2 md:mt-8 items-start about-mission-icon">
              {ourMissionData.features.map((feature, index) => {
                const iconMapping = [
                  "/home/icon.png",
                  "/home/icon%20(1).png",
                  "/home/icon%20(2).png",
                  "/home/icon%20(3).png",
                ];
                const iconSrc = iconMapping[index] || "/logic.png";

                return (
                  <div
                    key={index}
                    className="sm:col-span-3 pt-[0px]  max-[767px]:flex max-[767px]:items-center  max-[767px]:gap-2"
                  >
                    <Image
                      src={withCDN(iconSrc)}
                      alt={feature.featureTitle || "Feature"}
                      width={100}
                      height={100}
                      className="object-contain md:object-contain w-[60px] h-[60px] md:w-[70px] md:h-[70px] xl:w-[100px] xl:h-[100px] mx-auto"
                    />
                    <p className="uppercase text-[14px] md:text-[11px] xl:text-[15px] text-[#fff] leading-relaxed font-regular w-[100%] mt-4 max-[767px]:mt-0 text-left md:text-center">
                      {feature.featureTitle || "Feature"}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/*==============Slider-section==============*/}
      <section className=" relative w-full overflow-hidden mt-[-60px] z-[10]">
        <div className="flex items-center pt-0">
          <AutoScrollSlider images={autoScrollSliderImages} />
        </div>
        <div className="flex items-center  hidden md:block">
          <ReverseAutoSlider images={reverseSliderImages} />
        </div>
        <div className="flex items-center">
          <AnimatedScroll items={sliderTexts} />
        </div>
      </section>

      {/*==============Our Method==============*/}
      <section className="relative w-full overflow-hidden 
  pb-10 md:pb-1 lg:pb-20
  px-4 md:px-8 lg:px-18 xl:px-34 z-1 max-[767px]:z-10 our-approch">
        {/* Background */}
        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-full bg-cover bg-top"
            style={{
              backgroundImage: `url('${optimizedImage("https://yefranchisees.b-cdn.net/frontend/Program-detail/bg_program%20highlights.png", 828)}')`,
            }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-top"
            style={{
              backgroundImage: `url('${optimizedImage("https://yefranchisees.b-cdn.net/frontend/additional%20activities.png", 1920)}')`,
            }}
          />
        </div>

        <div className="max-w-[1300px] mx-auto w-full grid grid-cols-1 md:grid-cols-12 gap-10 mb-4 mt-8 items-center pt-20 max-[767px]:pt-0 max-[767px]:gap-0">
          <div className="md:col-span-7 xl:pt-[50px] pt-[20px] max-[991px]:pb-10 max-[767px]:pb-5 max-[767px]:order-2  max-[767px]:mt-[300px]">
            <h2 className="uppercase text-[30px] 2xl:text-[50px] xl:text-[45px] md:text-[30px] text-[#0097DC] leading-relaxed font-bold mb-3">
              {ourMethodData.mainHeading}
            </h2>
            <p className="text-[#58585A] text-[18px] xl:text-[22px] font-[Noto_Sans] font-light mb-7 xl:mr-[50px]">
              {ourMethodData.paragraph1}
              <br />
              <br />
              {ourMethodData.paragraph2}
              <br />
              <br />
              {ourMethodData.paragraph3}
            </p>
            {/* Button */}
            <LanguageAwareLink
              href={"/programs"}
              className="flex items-center justify-center font-[Noto_Sans] font-light gap-4 md:gap-3 bg-[#0097DC] rounded-full py-2 md:py-3 px-6 md:px-8  hover:shadow-[10px_14px_14px_#0000000D] active:bg-[#0084C1] active:shadow-[10px_14px_14px_#0000000D] transition-all w-full md:w-fit md:h-11 lg:h-16 2xl:h-[60px] whitespace-nowrap"
            >
              <Image
                src={withCDN("/gear.png")}
                alt="Gear"
                width={20}
                height={20}
                className="w-5.5 h-5.5 2xl:h-8 2xl:w-8 md:w-6 md:h-6"
                priority={true}
              />
              <span className="text-white text-[18px] xl:text-[24px] sm:text-[16px] tracking-wide uppercase font-regular max-[360px]:text-[15px]">
                {ourMethodData.ctaButtonText}
              </span>
            </LanguageAwareLink>
          </div>

          <div className="md:col-span-5 absolute bottom-0 md:bottom-30 xl:bottom-12 right-[0%] w-[560px] h-[540px] xl:w-[850px] xl:h-[800px]  max-[767px]:top-0 max-[767px]:right-0 max-[767px]:w-[100%] max-[767px]:h-[375px] approch-img">
            <Image
              src={withCDN("/About/03_bricks%201.png")}
              alt="image"
              fill
              className="hidden md:block object-contain md:object-cover"
            />

            <Image
              src={withCDN("/About/03_bricks%201%20(3).png")}
              alt="image"
              fill
              className="block md:hidden object-contain md:object-cover"
            />
          </div>
        </div>
      </section>

      {/*===============What Children Gain====================*/}
      <section className="relative w-full overflow-hidden 
       pb-10 md:pb-1 lg:pb-20
       px-0 md:px-8 lg:px-18 xl:px-34 mt-[-100px] z-10 min-h-[800px] xl:min-h-[1010px] max-[767px]:min-h-[885px] max-[360px]:min-h-[860px] min-[112rem]:h-[990px] 
       max-[767px]:mb-[-12px] max-[767px]:mt-[-70px] max-[350px]:mb-[-40px] mb-[-1px] gain-box">
        {/* Background */}
        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-full bg-cover bg-[24%] mt-[-40px]"
            style={{
              backgroundImage: `url('${optimizedImage("https://yefranchisees.b-cdn.net/frontend/testimonials.png", 828)}')`,
            }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-top md:mt-[-60px] lg:mt-0"
            style={{
              backgroundImage: `url('${optimizedImage("https://yefranchisees.b-cdn.net/frontend/testimonials.png", 1920)}')`,
            }}
          />
        </div>

        <div className="relative w-full max-w-[1300px] mx-auto">
          <h2 className="uppercase px-4 md:px-0 text-[30px] 2xl:text-[50px] xl:text-[45px] md:text-[30px] text-[#fff] leading-relaxed font-bold mb-0 pt-[120px] md:pt-[80px] lg:pt-[110px] xl:pt-[148px] text-center">
            {whatChildrenGainData.mainHeading}
          </h2>
          <AboutSlider programs={whatChildrenGainData.programs} />
        </div>
      </section>

      {/* bottom sections */}
      <section className="relative w-full z-20 about-form">
        <div className="relative">
          <FooterForm />
          <ProgramsSliderFooter bottomSliders={aboutContent.bottomSliders} />
          <Footer footerData={headerFooterHomeData} />
        </div>

      </section>
    </main>
  );
}