"use client"; import { useState, useRef, useEffect } from "react"; import { useLanguage } from "@/src/lib/context/LanguageContext"; import { detailHref } from "@/src/lib/utils/detailHref"; import Image from "next/image"; import { withCDN, optimizedImage } from "@/src/lib/utils"; import { Swiper, SwiperSlide } from "swiper/react"; import type { Swiper as SwiperType } from "swiper"; import type { ProgramsPageSection } from "@/src/lib/services/programsPageService"; import WorkshopCardSkeleton from "../ui/skeletons/WorkshopCardSkeleton"; import LanguageAwareLink from "@/src/lib/utils/LanguageAwareLink"; import "swiper/css"; type ProgramCard = { id: string; slug: string; title: string; subtitle: string; description: string; ageRange: string; AiGradientStart?: string; AiGradientEnd?: string; createdFor: string; ageText: string; lessonDurationText: string; durationUnit: string; lessonDuration: string; lessonsTotal: string; ribbon: string; borderColor: string; iconSrc: string; imageSrc: string; parentProgramsId?: string | null; language?: string | null; }; function extractBaseSlug(slug: string): string { return slug; } function renderSubtitleWithAIGradient( subtitle: string, gradientStart?: string, gradientEnd?: string ) { // Match AI abbreviations independently of letter casing. // Add translated abbreviations here if your translations use others. const aiPattern = /(\bAI\b|\bIA\b)/gi; return subtitle.split(aiPattern).map((word, index) => { const isAITag = /^(AI|IA)$/i.test(word); if (!isAITag) { return {word}; } return ( {word} ); }); } function getStaticAttributesBySlug( slug: string ): Partial | null { const baseSlug = extractBaseSlug(slug); const matchedProgram = FALLBACK_PROGRAMS.find( (prog) => extractBaseSlug(prog.slug) === baseSlug ); if (matchedProgram) { return { ribbon: matchedProgram.ribbon, borderColor: matchedProgram.borderColor, iconSrc: matchedProgram.iconSrc, imageSrc: matchedProgram.imageSrc, AiGradientStart: matchedProgram.AiGradientStart, AiGradientEnd: matchedProgram.AiGradientEnd, }; } return { ribbon: withCDN("/programs-page/bg%20%287%29%20%281%29.png"), borderColor: "#00AEEF", iconSrc: withCDN("/programs-page/AllPrograms/logo.svg"), imageSrc: withCDN("/programs-page/AllPrograms/allPrograms1.svg"), AiGradientStart: "#4B134A", AiGradientEnd: "#993F98", }; } const FALLBACK_PROGRAMS: ProgramCard[] = [ { id: "algo-buddy", slug: "ALGO_BUDDY", title: "ALGO BUDDY", subtitle: "LEARN BASIC PROGRAMMING", description: "where young children are introduced to the basics of programming through playful story-missions. Using colorful blocks and interactive apps, kids learn coding concepts at their own pace.", ageRange: "4-6", createdFor: "Created for children", ageText: "age", lessonDurationText: "Lesson duration", durationUnit: "min", lessonDuration: "45", lessonsTotal: "20 lessons total", ribbon: withCDN("/programs-page/bg%20%283%29%20%282%29.png"), borderColor: "#00AEEF", iconSrc: withCDN("/program-logo/logo_algo_buddy.svg"), imageSrc: withCDN("/programs-page/photo%20(8)%20(3).png"), AiGradientStart: "#0091d6", AiGradientEnd: "#61bae5", }, { id: "bricks", slug: "BRICKS_CHALLENGE", title: "BRICKS CHALLENGE", subtitle: "WELCOME TO BRICKS CHALLENGE — A DYNAMIC PROGRAM", description: "Where kids learn science and engineering by building moving models. Through real-world themes like physics, energy, and motion, children discover how things work — all while having fun.", ageRange: "6–10", createdFor: "Created for children", ageText: "age", lessonDurationText: "Lesson duration", durationUnit: "min", lessonDuration: "75", lessonsTotal: "36 lessons total", ribbon: withCDN("/Workshop/bg%20%284%29.png"), borderColor: "#8CC63F", iconSrc: withCDN("/program-logo/logo_bricks_chalenge.svg"), imageSrc: withCDN("/programs-page/AllPrograms/allPrograms1.svg"), AiGradientStart: "#95C11F", AiGradientEnd: "#226B20", }, { id: "algo", slug: "ALGOPLAY", title: "ALGO PLAY", subtitle: "WELCOME TO AN IMMERSIVE, HANDS-ON ROBOTICS AND CODING ADVENTURE", description: "Using the unique Algo bricks system, kids build fun models and create graphical code sequences to bring them to life. It's engaging, educational, and designed for curious minds!", ageRange: "6–10", createdFor: "Created for children", ageText: "age", lessonDurationText: "Lesson duration", durationUnit: "min", lessonDuration: "75", lessonsTotal: "36 lessons total", ribbon: withCDN("/programs-page/bg%20%287%29%20%281%29.png"), borderColor: "#92278F", iconSrc: withCDN("/program-logo/algo_play.svg"), imageSrc: withCDN("/programs-page/photo%20(4)%20(1).png"), AiGradientStart: "#4B134A", AiGradientEnd: "#993F98", }, { id: "galileo", slug: "GALILEO_TECHNIC", title: "GALILEO TECHNICS", subtitle: "WELCOME TO GALILEO TECHNIC — AN ADVANCED STEM PROGRAM", description: "Older kids explore real mechanical principles like torque, motion, and energy using custom building kits. They create machines, solve challenges, and understand how technology works.", ageRange: "7–10", createdFor: "Created for children", ageText: "age", lessonDurationText: "Lesson duration", durationUnit: "min", lessonDuration: "75", lessonsTotal: "36 lessons total", ribbon: withCDN("/programs-page/bg%20%284%29%20%281%29.png"), borderColor: "#ED1C24", iconSrc: withCDN("/program-logo/logo_galileo_technic.svg"), imageSrc: withCDN("/programs-page/photo%20(5)%20(1).png"), AiGradientStart: "#ED174C", AiGradientEnd: "#8B0025", }, { id: "robo", slug: "ROBO_TOYS", title: "ROBO TOYS", subtitle: "WELCOME TO ROBO TOYS — A CREATIVE ROBOTICS COURSE", description: "In this course, kids build fun, interactive machines and bring them to life using simple code. Each class combines play, storytelling, and hands-on building to teach real STEM and logic skills.", ageRange: "9–12", createdFor: "Created for children", ageText: "age", lessonDurationText: "Lesson duration", durationUnit: "min", lessonDuration: "75", lessonsTotal: "36 lessons total", ribbon: withCDN("/programs-page/bg%20%285%29%20%281%29.png"), borderColor: "#01a498", iconSrc: withCDN("/program-logo/robo_toys.svg"), imageSrc: withCDN("/programs-page/photo%20(6)%20(1).png"), AiGradientStart: "#069B93", AiGradientEnd: "#006C64", }, { id: "builders", slug: "BIG_BUILDERS", title: "Big Builders", subtitle: "Welcome to A unique early-learning program", description: "where young minds explore the world of engineering and science through fun, hands-on building. Children learn core STEM principles by creating 3D models with specially designed building blocks — all through play, imagination, and teamwork.", ageRange: "4-6", createdFor: "Created for children", ageText: "age", lessonDurationText: "Lesson duration", durationUnit: "min", lessonDuration: "45", lessonsTotal: "36 lessons", ribbon: withCDN("/Workshop/bg%20%285%29.png"), borderColor: "#F49800", iconSrc: withCDN("/program-logo/logo_big_builders.svg"), imageSrc: withCDN("/programs-page/photo%20(9)%20(1).png"), AiGradientStart: "#f39000", AiGradientEnd: "#ffed00", }, { id: "smartivo", slug: "SMARTIVO", title: "Smartivo", subtitle: "Welcome to Your First Step into Coding", description: "where young children are introduced to the basics of programming through playful story-missions. Using colorful blocks and the GoAlgo app, kids make robots move, light up, and respond to commands.", ageRange: "4-6", createdFor: "Created for children", ageText: "age", lessonDurationText: "Lesson duration", durationUnit: "min", lessonDuration: "45", lessonsTotal: "36 lessons", ribbon: withCDN("/programs-page/bg%20%283%29%20%282%29.png"), borderColor: "#00AFE9", iconSrc: withCDN("/program-logo/logo_smartivo.svg"), imageSrc: withCDN("/programs-page/photo%20(10)%20(1).png"), AiGradientStart: "#0091d6", AiGradientEnd: "#61bae5", }, { id: "algoC", slug: "ALGOC", title: "Algo C", subtitle: "Welcome to A hands-on learning experience", description: "designed to equip students with core skills in coding, robotics, AI, and problem-solving. Centered on C programming for robotics and embedded systems, the program uses practical challenges and interactive lessons for a tech-driven future.", ageRange: "13-18", createdFor: "Created for children", ageText: "age", lessonDurationText: "Lesson duration", durationUnit: "min", lessonDuration: "90", lessonsTotal: "36 lessons", ribbon: withCDN("/programs-page/bg%20%286%29%20%281%29.png"), borderColor: "#E89163", iconSrc: withCDN("/program-logo/logo_algo_c.svg"), imageSrc: withCDN("/programs-page/photo%20(11)%20(1).png"), AiGradientStart: "#dc4b63", AiGradientEnd: "#F4A261", }, ]; function ProgramArticle({ program }: { program: ProgramCard }) { const learnMoreHref = program.language !== "en" && program.parentProgramsId ? detailHref( "/programs", program.parentProgramsId, program.slug ) : detailHref("/programs", program.id, program.slug); return (
{/* Mobile header */}
{program.iconSrc ? ( {program.title} ) : (
No Logo
)}

{program.title}

{/* Desktop ribbon */}
{program.iconSrc ? ( {program.title} ) : (
No Logo
)}

{program.createdFor}

{program.ageRange} {" "}{program.ageText}

{program.lessonDurationText}

{program.lessonDuration} {" "}{program.durationUnit}

{program.lessonsTotal}

{/* Center content */}

{program.title}

{renderSubtitleWithAIGradient( program.subtitle, program.AiGradientStart, program.AiGradientEnd )}

Created for

{program.ageRange}

{program.ageText}

Duration

{program.lessonDuration} {program.durationUnit}

({program.lessonsTotal})

{program.description}

arrow LEARN MORE
{/* Right image */}
{program.imageSrc ? ( {program.title} ) : (
No Image
)}
); } interface AllProgramsProps { allProgramData?: ProgramsPageSection; generalSettings?: any; programs?: any[]; isLoading?: boolean; } export default function AllPrograms({ allProgramData, generalSettings, programs = [], isLoading = false, }: AllProgramsProps) { const [currentIndex, setCurrentIndex] = useState(0); const [visibleCount, setVisibleCount] = useState(5); const [programsList, setProgramsList] = useState(FALLBACK_PROGRAMS); const containerRef = useRef(null); const swiperRef = useRef(null); const { currentLanguage } = useLanguage(); useEffect(() => { if (Array.isArray(programs) && programs.length > 0) { const mappedPrograms: ProgramCard[] = programs.map( (program: any) => { const staticAttrs = getStaticAttributesBySlug(program.slug); return { id: program.id, slug: program.slug, title: program.title, subtitle: program.sub_heading || program.title, description: program.description || "", ageRange: program.age_range || "", createdFor: program.created_for || program.program_details?.created_for || "Created for children", ageText: program.age_text || "age", lessonDurationText: program.lesson_duration_text || "Lesson duration", durationUnit: program.duration_text || "min", lessonDuration: program.duration || "", lessonsTotal: `${program.no_of_lessons || "0"} ${ program.no_of_lessons === 1 ? "lesson" : "" }`, ribbon: staticAttrs?.ribbon || "", borderColor: staticAttrs?.borderColor || "", iconSrc: program.program_icon ? withCDN(program.program_icon) : staticAttrs?.iconSrc || "", imageSrc: program.header_image ? withCDN(program.header_image) : staticAttrs?.imageSrc || "", parentProgramsId: program.parent_programs_id, language: program.language, AiGradientStart: program.AiGradientStart || staticAttrs?.AiGradientStart || "#4B134A", AiGradientEnd: program.AiGradientEnd || staticAttrs?.AiGradientEnd || "#993F98", }; } ); setProgramsList(mappedPrograms); } else if (!isLoading) { setProgramsList(FALLBACK_PROGRAMS); } }, [programs, isLoading]); const heading = allProgramData?.heading || "ALL YE PROGRAMS"; const showMoreText = allProgramData?.showMoreText || "See more"; // Keep the active slide index within the updated list. useEffect(() => { if (currentIndex >= programsList.length) { setCurrentIndex(Math.max(0, programsList.length - 1)); } const swiper = swiperRef.current; if (swiper && !swiper.destroyed) { const safeIndex = Math.min( currentIndex, Math.max(0, programsList.length - 1) ); if (swiper.activeIndex !== safeIndex) { swiper.slideTo(safeIndex, 0); } } }, [programsList, currentIndex]); const goToSlide = (index: number) => { const swiper = swiperRef.current; if (!swiper || swiper.destroyed) return; const safeIndex = Math.max( 0, Math.min(index, programsList.length - 1) ); swiper.slideTo(safeIndex, 300); setCurrentIndex(safeIndex); }; const handleShowMore = () => { setVisibleCount((prev) => Math.min(prev + 3, programsList.length) ); }; const handleSlideChange = (swiper: SwiperType) => { if (swiper.destroyed) return; setCurrentIndex(swiper.realIndex ?? swiper.activeIndex); }; const visiblePrograms = programsList.slice(0, visibleCount); const hasMore = visibleCount < programsList.length; return (
{/* Curved background */}
Curved background
Curved background for tablet
Curved background for mobile
{/* Content */}

{heading}

{/* Mobile slider */}
{isLoading ? (
{[1, 2].map((idx) => ( ))}
) : ( { swiperRef.current = swiper; setCurrentIndex(swiper.realIndex ?? 0); }} onSlideChange={handleSlideChange} onTouchEnd={(swiper) => { requestAnimationFrame(() => { if (!swiper.destroyed) { setCurrentIndex( swiper.realIndex ?? swiper.activeIndex ); } }); }} onBeforeDestroy={(swiper) => { if (swiperRef.current === swiper) { swiperRef.current = null; } }} className="all-programs-swiper" > {programsList.map((program) => ( ))} )}
{/* Custom dots */} {!isLoading && (
{programsList.map((program, idx) => ( ))}
)}
{/* Tablet and desktop: original stacked layout */}
{isLoading ? ( [1, 2, 3].map((idx) => ( )) ) : ( <> {visiblePrograms.map((program) => ( ))} {hasMore && (
)} )}
); }