import { withCDN } from "@/src/lib/utils";
import Image from "next/image";
import { fetchHeaderFooterForLayout } from "../../../lib/serverFetch";
import { getProgramDetailAction } from "../../../lib/actions/programDetailAction";
import { extractLanguage } from "../../../lib/utils/domain";
import Accordion from "../../../components/ui/Accordion";
import AnimatedScroll from "../../../components/ui/Animated-Scroll/AnimatedScroll";
import AutoScrollSlider from "../../../components/ui/AutoScrollSlider";
import Footer from "../../../components/layout/Footer";
import FooterForm from "../../../components/layout/FormLazyWrapper";
import ProgramGallerySlider from "../../../components/programs/ProgramGallerySlider";
import ClickableImage from "../../../components/ui/ClickableImage";
import ReverseAutoSlider from "../../../components/ui/ReverseAutoSlider";
import TestimonialsLazyWrapper from "../../../components/home/TestimonialsLazyWrapper";
import VideoSectionPage from "../../../components/home/VideoSectionPage";
import LanguageAwareLink from "@/src/lib/utils/LanguageAwareLink";

import Breadcrumbs from "../../../components/layout/Breadcrumbs";
import BackButton from "../../../components/layout/BackButton";
import NavLabel from "../../../components/layout/NavLabel";
import ProgramDetailClient from "../../../components/programs/ProgramDetailClient";
import type { ProgramDetailData, ProgramDetailDataWithTranslations } from "../../../lib/services/programDetailService";
import ProgramsSliderFooter from "../../../components/layout/ProgramsSlider-Footer";
import AIFeatureSection from "../../../components/ui/AIFeatureSection";
import { color } from "framer-motion";
import { toUrlSlug } from "../../../lib/utils/detailHref";
import type { Metadata } from "next";

// Force dynamic rendering to ensure fresh data on each navigation
export const dynamic = 'force-dynamic';

interface ProgramDetailPageProps {
  params: Promise<{
    id: string;
  }>;
  searchParams: Promise<Record<string, string | string[]>>;
}

// Per-program SEO. Reads the backend seo_title / seo_description (with sensible
// fallbacks to the program title/description). Uses the same cached fetch as the
// page render, so no extra backend call is made.
export async function generateMetadata({ params, searchParams }: ProgramDetailPageProps): Promise<Metadata> {
  try {
    const { id } = await params;
    const sParams = await searchParams;
    const language = extractLanguage(sParams);

    const { success, data } = await getProgramDetailAction(id, language);
    if (!success || !data) return {};

    const program: ProgramDetailData | undefined = data.translated || data.default;
    if (!program) return {};

    const title =
      program.seoTitle?.trim() ||
      (program.title ? `${program.title} | Young Engineers` : undefined);
    const description =
      program.seoDescription?.trim() ||
      (program.description
        ? program.description.replace(/\s+/g, " ").trim().slice(0, 160)
        : undefined);
    // Match the site's link convention (lowercased/hyphenated slug) so the
    // canonical matches the URLs actually linked/crawled.
    const slugPath = toUrlSlug(program.slug);
    const canonical = slugPath
      ? `/programs/${id}/${slugPath}`
      : `/programs/${id}`;

    return {
      // `absolute` bypasses the layout's "%s | Young Engineers" template so the
      // seo_title (or our fallback) is used verbatim — no doubled suffix.
      title: title ? { absolute: title } : undefined,
      description,
      alternates: { canonical },
      openGraph: {
        title: title || program.title,
        description,
        images: program.imageSrc ? [program.imageSrc] : undefined,
      },
    };
  } catch {
    return {};
  }
}

// Extract program detail content into a render function
function createProgramDetailContent(programData: ProgramDetailData, id: string, headerFooterHomeData: any) {
  // Q&A / program highlights are optional content. Blank rows are dropped, and
  // when nothing is left the whole section — heading, artwork and background —
  // is omitted rather than rendered as an empty shell.
  const programHighlightItems = (programData.programHighlights || []).filter(
    (highlight) =>
      (highlight?.title || "").trim() !== "" ||
      (highlight?.description || "").trim() !== ""
  );

  return (
    <main id={`program-${programData.slug}`}>
      {/* Hero-Banner */}
      <section id={`program-${programData.slug}`}
        className="relative w-full overflow-hidden py-10 md:py-16 lg:py-18
    min-h-[900px] md:min-h-[620px] lg:min-h-[690px] xl:min-h-[720px]
    px-4 md:px-8 lg:px-18 xl:px-34 sm:pb-0 pb-[80px] program-banner"
      >
        {/* Background */}
        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-full bg-cover bg-bottom"
            style={{ backgroundImage: `url('${withCDN(programData.heroBgMobile)}')` }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-bottom md:h-[660px] lg:h-[860px]"
            style={{ backgroundImage: `url('${withCDN(programData.heroBgDesktop)}')` }}
          />
        </div>

        {/* Overlay */}
        <div className="pointer-events-none absolute inset-0" />

        {/* Main Content */}
        <div className="relative z-10 mx-auto mt-5 md:mt-0  md:flex flex-col justify-center lg:py-[24px] lg:py-0 md:py-[15px] max-[767px]:pt-[40px]">
          <NavLabel label={programData.title} />
          <BackButton className="mb-4" />
          <Breadcrumbs currentTitle={programData.title} />

          {/* CARD */}
          <div className="relative bg-white rounded-[32px] shadow-md md:h-[320px] xl:h-[410px] w-full 2xl:w-[1300px] mt-5 xl:mt-0 mx-auto flex flex-col md:flex-row overflow-hidden sm:overflow-visible pro-card">

            {/* LEFT RIBBON */}
            <div className="md:wsNa-[145px] xl:w-[220px] w-[120px] hidden md:flex 2xl:ml-12 ml-5 relative">
              <div
                className="absolute top-[-2] w-[200px] md:left-0
            h-[400px] md:w-[140px] md:h-[370px]
            xl:w-[10.9rem] xl:h-[480px]
            bg-cover bg-center bg-no-repeat
            flex flex-col items-center justify-start text-white gap-3 inner-ribbon"
                style={{ backgroundImage: `url('${withCDN(programData.ribbonImage)}')` }}
              >
                <div className="flex flex-col items-center gap-2 mt-0">
                  <div className="relative w-14 h-14 md:w-28 md:h-28 lg:w-[100px] lg:h-[80px] xl:w-[152px] xl:h-[110px] md:w-[86px] md:h-[70px] lo-img">
                    <Image src={programData.iconSrc} alt={programData.title} fill className="object-cover" />
                  </div>

                  <div className="w-full md:w-[94%] xl:w-full p-2 text-center ribbon-gradient" style={{
                    background: programData.categoryTagBackgroundGradient || `linear-gradient(90deg, ${programData.borderColor}dd 0%, ${programData.borderColor} 50%, ${programData.borderColor}99 100%)`
                  }}>
                    <h4 className="text-[20px] md:text-[20px] uppercase max-w-[100%] mx-auto leading-tight break-words" style={{ color: programData.categoryTagTextColor || '#fff' }}>{programData.categoryTag}</h4>
                  </div>

                  <div className="text-xs md:text-sm leading-snug w-full xl:mt-2 py-0 xl:px-7 md:px-3 md:mt-0 pro-created">
                    <p className="opacity-80 text-[12px] text-[#58585A]">{programData.createdFor}</p>
                    <span className="font-bold text-[30px]  max-[1200px]:leading-none" style={{ color: programData.borderColor }}>{programData.ageRange}</span>
                    <span className="text-[14px] lowercase" style={{ color: programData.borderColor }}> {programData.ageText}</span>
                  </div>

                  <div className="w-full text-xs md:text-lg leading-snug xl:mt-2 lg:mt-2 py-0 xl:px-7 md:px-3 pro-data">
                    <p className="opacity-80 text-[12px] text-[#58585A]  max-[1200px]:leading-none">{programData.lessonDurationText}</p>
                    <span className="font-bold text-[30px]" style={{ color: programData.borderColor }}>{programData.lessonDuration}</span>
                    <span className="text-[14px] lowercase" style={{ color: programData.borderColor }}> {programData.durationUnit}</span>
                    <p className="opacity-80 text-[14px] text-[#58585A] max-[1200px]:leading-none">
                      <span style={{ color: programData.borderColor }}>{programData.lessonsTotal || '0'}</span><br />
                      <span className="text-[#828282] text-[12px] md:text-[10px] xl:text-[12px]">*depends on the class and availability</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>

              {/* MOBILE RIBBON */}
                        <div className="md:wsNa-[125px] w-full block md:hidden relative grid grid-cols-12 items-center">
                          <div
                            className="col-span-5
                            h-[190px]
                            bg-cover bg-bottom bg-no-repeat
                            flex flex-col items-center justify-start text-white gap-3 mob-ribbon"
                            style={{ backgroundImage: `url('${programData.mobileRibbonImage}')` }}
                          >
                            <div className="flex flex-col items-center gap-2 mt-3 w-full">
                              <div className="relative w-14 h-14 md:w-28 md:h-28 w-[120px] h-[120px] xl:w-[152px] xl:h-[110px] md:w-[86px] md:h-[62px] max-[360px]:w-[120px] max-[330px]:w-[90px] max-[330px]:h-[90px] bg-[#fff] rounded-full overflow-hidden ">
                                <Image src={programData.iconSrc} alt={programData.title} fill className="object-cover" />
                              </div>
                              {/*
                              <div className="w-[86%] bg-[linear-gradient(90deg,rgba(34,107,32,1)_0%,rgba(114,167,35,1)_50%,rgba(149,193,31,1)_100%)] p-1 text-center" style={{ backgroundImage: `linear-gradient(90deg, ${programData.borderColor}dd 0%, ${programData.borderColor} 50%, ${programData.borderColor}99 100%)` }}>
                                <h4 className="text-[18px] leading-tight md:text-[16px] uppercase text-[#fff] w-full">{programData.tag || programData.categoryTag}</h4>
                              </div>
                               */}
                            </div>
                          </div>
                          <div className="col-span-7 mb-3">
                            <h3 className="text-[34px] xl:text-[50px] font-bold uppercase leading-none block md:hidden mb-3 max-[768px]:pr-2 max-[330px]:text-[24px]" style={{ color: programData.borderColor }}>
                              {programData.title}
                            </h3>
                            <h4 className="text-[16px] leading-[20px] md:leading-tight md:text-[16px] uppercase text-[#58585A] w-full border-l-3 pl-2" style={{ borderLeftColor: programData.borderColor }}>{programData.tag || programData.categoryTag}</h4>
                          </div>
                        </div>


            {/* CENTER CONTENT */}
            <div className="flex-1 px-5 md:px-6 md:py-0 lg:px-8 xl:px-1 2xl:px-2
             md:pr-[280px] lg:pr-[275px]  2xl:pr-[540px]
             min-h-[350px] md:max-h-auto  xl:w-[27.25rem] xl:pr-[400px] md:w-[19.35rem] xl:pl-[30px] banner-content max-[768px]:min-h-auto">
              <div className="h-full pr-0 mt-[50px] mb-[18px] flex flex-col justify-center md:justify-start content-top">
                <h1 className="text-[30px] xl:text-[50px] font-bold uppercase leading-none  hidden md:block" style={{ color: programData.borderColor }}>
                  {programData.title}
                </h1>

               <h3 className="md:mt-3 text-[20px] xl:text-[20px] uppercase text-[#58585A] leading-tight max-[767px]:font-semibold max-[330px]:text-[17px] max-[330px]:leading-[20px]">
               {programData.subtitle.split(" ").map((word, index) => (
                 <span key={index}>
                   {index > 0 && " "}

                   {word.toUpperCase() === "AI" ? (
                     <span
                       className="inline-flex items-center justify-center text-white px-3 py-[1px] rounded-[10px] text-[20px] xl:text-[18px] xl:leading-[28px] leading-[30px] max-[330px]:text-[17px] max-[330px]:leading-[24px] max-[330px]:px-2 gradient-bg"
                      style={{
                      background: programData.borderColor,
                    }}
                     >
                       {word}
                     </span>
                   ) : (
                     word
                   )}
                 </span>
               ))}
             </h3>

             <div className="block md:hidden border-b border-t border-[#CACACA] mt-2 mb-3">
                   <div className="grid grid-cols-12 py-3">
                            <div className="col-span-5 text-xs md:text-sm leading-snug w-full xl:mt-5 py-0 xl:px-7 md:px-3 md:mt-0">
                                  <p className="opacity-80 text-[14px] text-[#58585A]  max-[1200px]:leading-none max-[330px]:text-[12px]">Created for</p>
                                  <div className="flex items-end gap-2 max-[330px]:gap-1 py-2">
                                      <span className="font-bold text-[30px] leading-[30px] max-[400px]:text-[28px] max-[330px]:text-[24px] max-[330px]:leading-[28px]" style={{ color: programData.borderColor }}>{programData.ageRange}</span>
                                      <span className="text-[14px] max-[330px]:text-[11px] block" style={{ color: programData.borderColor }}> {programData.ageText}</span>
                                  </div>
                             </div>

                             <div className="col-span-7 w-[99%] text-xs md:text-lg leading-snug xl:mt-2 lg:mt-0 py-0 xl:px-7 md:px-3">
                                  <p className="opacity-80 text-[14px] text-[#58585A]  max-[1200px]:leading-none max-[330px]:text-[12px">Duration</p>
                                  <div className="flex items-end gap-2 max-[330px]:gap-1 py-2">
                                      <span className="font-bold text-[30px] leading-[30px] max-[400px]:text-[28px] max-[330px]:text-[24px] max-[330px]:leading-[28px]" style={{ color: programData.borderColor }}>{programData.lessonDuration}</span>
                                      <span className="text-[14px] max-[330px]:text-[11px]" style={{ color: programData.borderColor }}> {programData.durationUnit}</span>
                                      <p className="opacity-80 text-[14px] max-[330px]:text-[11px] text-[#58585A] max-[1200px]:leading-none">
                                         <span style={{ color: programData.borderColor }}>{programData.lessonsTotal || '0'}</span><br />
                                      </p>
                                  </div>
                                  <p className="opacity-80 text-[14px] text-[#58585A] max-[1200px]:leading-none">
                                      <span className="text-[#828282] text-[12px] lg:text-[10px] xl:text-[12px] my-1">*depends on the class and availability</span>
                                  </p>
                              </div>
                            </div>
             </div>

               {/*
                <h3 className="mt-3 text-[18px] xl:text-[20px] uppercase text-[#58585A] leading-tight max-[767px]:font-semibold">
                  {programData.subtitle}
                </h3>
                */}

                <p className="mt-3 xl:text-[16px] text-[18px] font-light sm:text-[18px] 2xl:text-[16px] text-[#58585A] leading-relaxed max-w-[500px] max-[767px]:max-w-full md:overflow-y-auto md:scroll-thin md:h-[108px] md:pr-2 discription-program">
                  {programData.description}
                </p>

                <div className="mt-4 program-btn">
                  <LanguageAwareLink
                    href="#program-Form"
                    className="inline-flex items-center gap-2 rounded-full border border-[#00AEEF] h-[45px] xl:w-[323px] justify-center
                    px-4 py-2 text-[15px] uppercase bg-[#0097DC] text-white transition hover:bg-[#0097DC] hover:shadow-[10px_14px_14px_#0000000D] active:bg-[#0084C1] max-[768px]:w-full max-[360px]:text-[13px]">                    
                    <Image src={withCDN("/programs-page/AllPrograms/Vector.svg")} alt="arrow" width={26} height={26} className="h-[25px] w-auto sm:h-[25px] max-[360px]:w-[18px] max-[360px]:h-[18px]" />
                    <span className="hidden md:block">{programData.ctaText}</span>
                    <span className="block md:hidden">SIGN UP FOR A TRIAL LESSON</span>
                  </LanguageAwareLink>
                </div>
              </div>
            </div>

            {/* RIGHT IMAGE */}
            <div className="relative w-[100%] right-0 mx-auto mt-2 xl:right-0 h-[217px] rounded-[30px] overflow-hidden
        md:absolute md:top-1/2 md:right-2 md:-translate-y-1/2 md:w-[257px] md:h-[360px] lg:h-[350px]
        2xl:w-[29.375rem] xl:w-[22.375rem] xl:h-[453px] mr-5 2xl:mr-12 big-image">
              <ClickableImage src={programData.imageSrc} alt={programData.title} className="object-cover rounded-[28px]" />
            </div>

          </div>
        </div>
      </section>

      {/* Program Objectives section */}
      <section className="relative w-full overflow-hidden
  pb-10 md:pb-16 lg:pb-5
  pt-0
  px-4 md:px-8 lg:px-18 xl:px-34 sm:-mt-[150px] lg:mt-[-100px] lg:pt-[0px] pro-objectives">
        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-[70%] bg-cover bg-top"
            style={{ backgroundImage: `url('https://yefranchisees.b-cdn.net/frontend/Program-detail/bg_Program-Objectives.png')` }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-top"
            style={{ backgroundImage: `url('https://yefranchisees.b-cdn.net/frontend/discover/bg%20(14).png')` }}
          />
        </div>

        <div className="max-w-[1300px] mx-auto w-full grid grid-cols-1 sm:grid-cols-12 gap-2 mb-4">
          <div className="sm:col-span-6  sm:mt-[140px]">
            <h2 className="uppercase 2xl:text-[50px] xl:text-[45px] text-[30px] text-[#58585A] leading-tight font-bold mb-5">{programData.objectivesHeading}</h2>
            {programData.objectives.map((objective, index) => (
              <div key={index} className="flex items-center mb-4">
                <Image src={objective.icon} alt={objective.title} width={64} height={64} className="h-[54px] w-auto sm:h-[64px]" />
                <p className="mt-0 xl:text-[18px] 2xl:text-[22px] text-[18px] text-[#58585A] font-light leading-relaxed ml-4 w-full xl:w-[80%] max-[330px]:text-[16px]">{objective.description}</p>
              </div>
            ))}
          </div>
          <div className="sm:col-span-6 lg:mt-[0px] xlider">
            <ProgramGallerySlider slides={programData.gallerySlides} />
          </div>
        </div>

        {/* CTA section */}
        <div className="max-w-[1300px] mx-auto w-full grid grid-cols-1 sm:grid-cols-12 gap-10 mb-4 mt-20 items-center min-[1600px]:mt-[50px] min-[1600px]:mb-8">
          <div className="sm:col-span-7">
            <h2 className="uppercase text-[30px] lg:text-[40px] md:text-[30px] text-[#58585A] md:leading-none leading-tight font-bold mb-1 h-bottom">See <strong style={{ color: programData.borderColor }}>{programData.title}</strong> in Action</h2>
            <p className="mt-0 xl:text-[18px] 2xl:text-[22px] text-[#58585A] font-light  leading-relaxed">{programData.seeInActionDescription}</p>
          </div>
          <div className="sm:col-span-5 md:text-right">
            <LanguageAwareLink
              href="#program-Form"
              className="inline-flex items-center gap-2 rounded-full border border-[0097DC]
              px-4 py-2 lg:text-[24px] md:text-[18px] text-[16px] w-max px-[30px] xl:gap-5 uppercase bg-[#0097DC] justify-center text-center text-white transition xl:h-[60px] hover:bg-[#0097DC] hover:shadow-[10px_14px_14px_#0000000D] active:bg-[#0084C1] active:shadow-[10px_14px_14px_#0000000D] max-[768px]:w-full">
              <Image src={withCDN("/programs-page/AllPrograms/Vector.svg")} alt="arrow" width={37} height={37} className="h-[23px] w-auto sm:h-[37px]" />
              <span>{programData.signUpCtaText}</span>
            </LanguageAwareLink>
          </div>
        </div>
      </section>

      {/* Image slider section */}
      <section className="relative w-full overflow-hidden">
        <div className="flex items-center pt-0">
          <AutoScrollSlider images={programData.autoScrollSliderImages} />
        </div>
        <div className="flex items-center  pb-0 lg:pb-12 hidden md:block">
          <ReverseAutoSlider images={programData.reverseAutoScrollSliderImages} />
        </div>
       
      </section>

      {/* AI section */}
        <div id={`AI-${programData.slug}`}>
           <AIFeatureSection data={programData.featureSection} />
        </div>


    
      {/* What Kids Discover section */}
      <section className="relative w-full overflow-hidden
      sm:pb-10 md:pb-16 lg:pb-5
      pt-0
      px-4 md:px-8 lg:px-18 xl:px-34 pb-0 discover z-1" id={`discover-${programData.slug}`}>

        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-[100%] bg-cover bg-top"
            style={{ backgroundImage: `url('https://yefranchisees.b-cdn.net/frontend/home/bg_What%20Kids%20Discover%20(3).png')` }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-top"
            style={{ backgroundImage: `url('https://yefranchisees.b-cdn.net/frontend/Program-detail/bg_What%20Kids%20Discover.png')` }}
          />
        </div>

        <div className="max-w-[1300px] mx-auto w-full grid grid-cols-1 sm:grid-cols-12 gap-10 mb-4 mt-8 items-center md:mt-[110px] lg:mt-[150px] sm:mt-[150px]">
          <div className="sm:col-span-6 sm:mt-0 mt-20 discover-content">
            <h2 className="uppercase text-[30px] lg:text-[50px]  md:text-[30px] text-[#58585A] leading-tight font-bold mb-5">{programData.whatKidsDiscoverHeading}</h2>
            {programData.whatKidsDiscover.map((item, index) => (
              <div key={index} className="flex items-center mb-4">
                <Image src={item.icon} alt="Gear image" width={37} height={37} className="h-[30px] w-auto sm:h-[37px]" />
                <p className="mt-0 xl:text-[18px] text-[18px] 2xl:text-[22px] text-[#58585A] font-regular leading-relaxed ml-4  xl:max-w-[470px] max-[330px]:text-[16px]">{item.text}</p>
              </div>
            ))}
          </div>
          <div className="sm:col-span-6 relative w-full h-[300px] lg:h-[500px] md:h-[360px] dis-image">
            <Image
              src={programData.galleryImageSrc}
              alt="Discover image"
              fill
              className="object-contain md:object-contain"
            />
          </div>
        </div>
      </section>

      {/* Video section */}
      <section className="relative w-full overflow-hidden">
        <AnimatedScroll 
           items={programData.animatedScrollItems}
           textColor={programData.borderColor}
        />
        <VideoSectionPage videoUrl={programData.videoUrl} />
      </section>

      {/* Accordion section — omitted entirely when the admin has no Q&A items */}
      {programHighlightItems.length > 0 && (
      <section className="relative w-full overflow-hidden
       pb-10 md:pb-1 lg:pb-5
       pt-0
       px-4 md:px-8 lg:px-18 xl:px-34 mt-[-160px] xl:mt-[-170px] z-10 lg:min-h-[700px]">

        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-full bg-cover bg-top"
            style={{ backgroundImage: `url('https://yefranchisees.b-cdn.net/frontend/Program-detail/bg_program%20highlights.png')` }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-top  md:mt-[-10px] lg:mt-0"
            style={{ backgroundImage: `url('https://yefranchisees.b-cdn.net/frontend/additional%20activities.png')` }}
          />
        </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 ">
          <div className="md:col-span-7 sm:pt-[100px] pt-[0px] z-9">
            <h2 className="hidden md:block uppercase text-[50px] md:text-[30px] xl:text-[50px] text-[#58585A] leading-relaxed font-bold mb-5 md:mt-[50px]">{programData.programHighlightsHeading}</h2>

            
                        {/* mobile-heading*/}
                        <div className="py-1 grid grid-cols-12 block md:hidden items-center">
                          <h2 className="col-span-7 uppercase text-[30px] text-[#58585A] leading-tight font-bold -mb-[50px] highlights-heading-mob max-[360px]:text-[28px]">{programData.programHighlightsHeading}</h2>
                          <div className="relative col-span-5 w-[200px] h-[190px] mt-[-30px] ml-[-30px] program-highlight-mob" >
                            <Image
                              src={programData.highlightsImageSrc}
                              alt="workshop-highlights"
                              fill
                              className="object-contain w-[200px] h-[190px]"
                            />
                          </div>
                        </div>
            
            <div className="py-1">
              <Accordion
                items={programHighlightItems.map((highlight) => ({
                  title: highlight.title,
                  content: highlight.description,
                }))}
                borderColor={programData.borderColor}
              />
            </div>
          </div>
          <div className="md:col-span-5 z-0 relative w-full h-[740px] hidden md:block  highlights ml-[100px]">
            <Image
              src={programData.highlightsImageSrc}
              alt={programData.title}
              fill
              className="object-cover"
            />
          </div>
        </div>
      </section>
      )}

      {/* Bottom sections */}
      <section className="relative w-full overflow-hidden mt-[-60px]  sm:mt-[-70px]">
        <TestimonialsLazyWrapper
          testimonialsSection={
            programData.testimonialsSection
              ? {
                  default: programData.testimonialsSection,
                  translated: programData.testimonialsSection,
                }
              : undefined
          }
        />
        <div className="scroll-mt-20 mt-[-60px]" id="program-Form">
          <FooterForm generalSettings={headerFooterHomeData.general_settings} tenant={headerFooterHomeData.tenant} cwProgramId={programData.cwProgramId} />
          <ProgramsSliderFooter slides={programData.footerSlides} bottomSliders={programData.bottomSliders} />
          <Footer footerData={headerFooterHomeData} />
        </div>
      </section>
    </main>
  );
}

export default async function ProgramDetailPage({ params, searchParams }: ProgramDetailPageProps) {
  const { id } = await params;
  const sParams = await searchParams;

  // Get selected language from URL params
  const language = extractLanguage(sParams);

  // Fetch program detail data using action with language parameter
  const { success, data: programData } = await getProgramDetailAction(id, language);
  const headerFooterHomeData = await fetchHeaderFooterForLayout();

  if (!success || !programData) {
    return (
      <main className="flex items-center justify-center min-h-[100dvh]">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-gray-800 mb-4">Program Not Found</h1>
          <p className="text-gray-600">The program you're looking for doesn't exist.</p>
        </div>
      </main>
    );
  }

  // Render both default and translated content on the server
  const defaultContent = createProgramDetailContent(programData.default, id, headerFooterHomeData);
  const translatedContent = programData.translated ? createProgramDetailContent(programData.translated, id, headerFooterHomeData) : null;

  return (
    <ProgramDetailClient
      defaultContent={defaultContent}
      translatedContent={translatedContent}
    />
  );
}