'use client'; import { useRef, useState } from 'react'; import { motion, type Variants } from 'framer-motion'; import Image from 'next/image'; import Link from 'next/link'; import { ArrowRight, ArrowLeft, GraduationCap, Lightbulb, Rocket, Wrench, Handshake, Users } from 'lucide-react'; import { normalizeEmptyArrays } from '@/lib/cms'; import { Reveal } from '@/components/reveal'; // A Trade Summit 2025 panel discussion — knowledge exchange, which is what an // institutions page is about, and the only summit photo not already carrying a // hero elsewhere. Anchored to the bottom on purpose: the top third of this // frame is a row of speaker name cards in large type, and cropping it away is // what makes the picture usable behind a headline. Swappable via heroImage. const heroImageFallback = '/assets/events/ts2025-panel.jpg'; const fadeUp: Variants = { hidden: { opacity: 0, y: 56 }, visible: { opacity: 1, y: 0, transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] } }, }; const stagger: Variants = { hidden: {}, visible: { transition: { staggerChildren: 0.06 } }, }; export type InstitutionsData = { heroImage?: string; heroBadge?: string; heroTitle?: string; heroIntro?: string; introEyebrow?: string; introHeading?: string; introText?: string; focusAreas?: string[]; listEyebrow?: string; listHeading?: string; institutions?: string[]; ctaHeading?: string; ctaText?: string; ctaLabel?: string; ctaHref?: string; }; // Supplied by UEF in "UEF Website changes.docx" (19 Aug 2026), section 3. // Kept in the order given. The count shown on the page is derived from this // array rather than hard-coded, so it cannot fall out of step with the list. const institutionsFallback = [ 'Aalim Muhammed Salegh College of Engineering', 'AIMAN College of Arts and Science for Women', 'Al-Islamiya Polytechnic College', 'Al-Ameen Engineering College', 'Annai College of Engineering and Technology', "Annai Hajira Women's College", 'Anvarul Muslimeen Industrial Training Institute', 'As-Salam College of Engineering and Technology', 'B. S. Abdur Rahman Crescent Institute of Science and Technology', 'C. Abdul Hakeem College', 'Chendu College of Engineering and Technology', 'Dhaanish Engineering College', 'Dr. Zakir Hussain College', 'Hajee Karutha Rowther Howdia College', 'Haji Sheik Ismail Engineering and Polytechnic Colleges', 'Himayath Industrial Training Centre', 'Institute of Safety Management', "Islamiah College for Men & Islamiah Women's College of Arts & Science", 'Jamal Mohamed College', 'Justice Basheer Ahmed Sayeed College for Women', 'Kazi Tajudeen Industrial Training Institute', 'Khadir Mohideen College', "M. M. E. S. Women's Arts & Science College", 'M. A. R. College of Engineering and Technology', 'MAM Group of Institutions', 'MAM College of Engineering and Technology', 'Mazharul Uloom College', 'MEASI', 'Mohamed Sathak Trust', 'Muqayyath Sha Sirguro Wakf Board College', 'Muslim Arts College', 'Muslim College of Education', 'Naina Mohamed College of Arts & Science', 'National College of Engineering', 'Noorul Islam College of Engineering and Technology', 'PET Engineering College', 'Quaid-E-Millath College', "Rabiammal Ahamed Maideen Women's College", 'RDB Educational Institutions', 'Sadakathullah Appa College', 'Sethu Institute of Technology', 'Syed Ammal Engineering College', 'Syed Hameedha Arts and Science College', 'Thassim Beevi Abdul Kader College for Women', "Wavoo Wajeeha Women's College", ]; const focusAreasFallback = [ 'Education', 'Innovation', 'Entrepreneurship', 'Incubation', 'Skill development', 'Industry–institution collaboration', ]; const FOCUS_ICONS = [GraduationCap, Lightbulb, Rocket, Wrench, Users, Handshake]; export function InstitutionsContent({ data: rawData }: { data?: InstitutionsData | null }) { // Empty arrays from the CMS must fall back like missing ones do. const data = normalizeEmptyArrays(rawData); const institutions = data?.institutions?.length ? data.institutions : institutionsFallback; const focusAreas = data?.focusAreas?.length ? data.focusAreas : focusAreasFallback; const count = institutions.length; // Ten at a time: the full list of 45 read as a spreadsheet rather than a // network worth joining. const PER_PAGE = 10; const [page, setPage] = useState(0); const pageCount = Math.ceil(count / PER_PAGE); const shown = institutions.slice(page * PER_PAGE, page * PER_PAGE + PER_PAGE); const listTop = useRef(null); // Paging from the controls at the bottom otherwise leaves the reader looking // at the end of a list that has already changed under them. const goTo = (next: number) => { setPage(next); listTop.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; return (
{/* HERO */}
{/* Same three layers as the UEF Angels and Youth Wing heroes, so the three section fronts read as one family. */}
{/* FOCUS AREAS */}

{data?.introEyebrow ?? 'What the partnerships do'}

{data?.introHeading ?? 'Where the network turns into opportunity.'}

{data?.introText ?? 'Each association is a route for students, startups and young entrepreneurs into the wider UEF ecosystem — its members, its mentors and its capital.'}

{focusAreas.map((area, i) => { const Icon = FOCUS_ICONS[i % FOCUS_ICONS.length]; return ( ); })}
{/* THE LIST */}

{data?.listEyebrow ?? 'The network'}

{data?.listHeading ?? 'Associated Educational Institutions'}

{count} institutions

{/* key={page} restarts the stagger on every page, so a new set reads as arriving rather than silently swapping in place. */} {shown.map((name, i) => { const number = page * PER_PAGE + i + 1; // An odd number on the final page would otherwise strand one card. const orphan = shown.length % 2 === 1 && i === shown.length - 1; return ( {String(number).padStart(2, '0')} {name} ); })}
{/* CTA */}

{data?.ctaHeading ?? 'Partner your institution with UEF.'}

{data?.ctaText ?? 'If your college or training institute wants to join the network, the Secretariat will take you through what an association involves.'}

{data?.ctaLabel ?? 'Talk to the Secretariat'}
); }