import { useEffect, useMemo, useRef, useState } from "react"; import Head from "next/head"; import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/router"; import { useTranslation } from "next-i18next"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import type { GetServerSideProps } from "next"; import i18nConfig from "../../../../next-i18next.config"; import { Modal } from "antd"; import { ChevronLeft, ChevronRight, MapPin, Clock, CalendarDays, ArrowRight, ChevronDown, ImageIcon, Handshake, Landmark, Globe, Users, Mic, Ticket, BarChart3, X, } from "lucide-react"; import { type PastEventHighlight, type UpcomingEvent, } from "@/lib/expatContent"; import { getUpcomingEvents, getPastEventHighlights } from "@/lib/webflowEvents"; import CollaborateForm from "@/components/expat/collaborateForm"; import { formatDateWithWeekday as fmtDate } from "@/lib/formatDate"; const PAGE_SIZE = 3; const collabTypes = [ { key: "sponsorship", icon: Handshake }, { key: "venue", icon: Landmark }, { key: "activities", icon: Globe }, { key: "co-hosted", icon: Users }, { key: "speaker", icon: Mic }, ] as const; const checklistItems = [ { icon: Globe, badgeClass: "bg-sky-50 text-sky-500" }, { icon: CalendarDays, badgeClass: "bg-rose-50 text-rose-500" }, { icon: Handshake, badgeClass: "bg-amber-50 text-amber-600" }, { icon: BarChart3, badgeClass: "bg-emerald-50 text-emerald-600" }, ] as const; type Props = { upcomingEvents: UpcomingEvent[]; pastEventHighlights: PastEventHighlight[]; }; export default function ExpatEventsPage({ upcomingEvents, pastEventHighlights, }: Props) { const router = useRouter(); const { t, i18n } = useTranslation("expat"); const lang = i18n.language || router.locale || "en"; const isEn = lang === "en"; const [activeCategory, setActiveCategory] = useState("all"); const [visibleCount, setVisibleCount] = useState(PAGE_SIZE); const [selectedHighlight, setSelectedHighlight] = useState(null); const [selectedEvent, setSelectedEvent] = useState( null, ); const galleryScrollRef = useRef(null); const [gallerySlide, setGallerySlide] = useState(0); const gallerySlides = useMemo(() => { if (!selectedHighlight) return []; const all = [ selectedHighlight.image, ...(selectedHighlight.gallery ?? []), ].filter((src): src is string => !!src); return Array.from(new Set(all)); }, [selectedHighlight]); useEffect(() => { setGallerySlide(0); galleryScrollRef.current?.scrollTo({ left: 0 }); }, [selectedHighlight]); const scrollToGallerySlide = (index: number) => { const el = galleryScrollRef.current; if (!el) return; const clamped = Math.max(0, Math.min(index, gallerySlides.length - 1)); el.scrollTo({ left: clamped * el.clientWidth, behavior: "smooth" }); }; // Categories come straight from whatever each Webflow event was tagged // with — no fixed list, so the filter pills are just the distinct set // actually present, in first-seen order. const categories = useMemo( () => Array.from( new Set(pastEventHighlights.map((h) => h.category).filter(Boolean)), ), [pastEventHighlights], ); const filteredHighlights = useMemo( () => activeCategory === "all" ? pastEventHighlights : pastEventHighlights.filter((h) => h.category === activeCategory), [activeCategory, pastEventHighlights], ); const visibleHighlights = filteredHighlights.slice(0, visibleCount); const hasMore = visibleCount < filteredHighlights.length; return (
{t("events.meta.title")} {/* Hero */}
{t("events.hero.badge")}

{t("events.hero.title1")}
{t("events.hero.title2")}

{t("events.hero.subtitle")}

{/* Join Us Next */}
{t("events.joinUsNext.badge")}

{t("events.joinUsNext.title")}

{upcomingEvents.length > 0 ? (
= 3 ? "sm:grid-cols-2 lg:grid-cols-3" : "sm:grid-cols-2" }`} > {upcomingEvents.map((event) => (
setSelectedEvent(event)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setSelectedEvent(event); } }} className="flex cursor-pointer flex-col overflow-hidden rounded-2xl bg-white shadow-xl transition hover:shadow-2xl focus:outline-none focus-visible:ring-2 focus-visible:ring-[#051973]" >
{event.image && ( {isEn )} {event.status === "open" ? t("events.joinUsNext.open") : t("events.joinUsNext.full")}
{isEn ? event.city_en : event.city_mn}
{fmtDate(event.date, isEn)} {event.timeStart}–{event.timeEnd}

{isEn ? event.title_en : event.title_mn}

{isEn ? event.venue_en : event.venue_mn}

{(isEn ? event.desc_en : event.desc_mn).split("\n")[0]}

e.stopPropagation()} className="mt-6 inline-flex items-center justify-center gap-2 rounded-xl bg-[#051973] px-5 py-3 text-sm font-semibold text-white transition hover:brightness-110" > {t("events.joinUsNext.registerNow")}
))}
) : (

{t("events.joinUsNext.empty")}

)}
{/* Highlights & Memories */}
{t("events.highlights.badge")}

{t("events.highlights.title")}

{categories.map((cat) => ( ))}
{visibleHighlights.map((h) => ( ))}
{filteredHighlights.length === 0 && (

{t("events.highlights.empty")}

)} {hasMore && (
)}
{/* Partner With the Community */}
Collaborate With Us

{t("events.partner.title1")}
{t("events.partner.title2")}

{t("events.partner.desc")}

{collabTypes.map(({ key, icon: Icon }) => (

{t(`events.partner.collabTypes.${key}.title`)}

{t(`events.partner.collabTypes.${key}.desc`)}

))}

{t("events.partner.ideaTitle")}

{t("events.partner.ideaDesc")}

    {checklistItems.map(({ icon: Icon, badgeClass }, i) => (
  • {t(`events.partner.checklist.item${i + 1}`)}
    • ))}
{/* Highlight detail popup */} setSelectedHighlight(null)} footer={null} centered width={680} closeIcon={ } styles={{ content: { padding: 0, borderRadius: 20, overflow: "hidden" }, }} > {selectedHighlight && ( <>
{gallerySlides.length > 0 ? (
{ const el = e.currentTarget; if (el.clientWidth === 0) return; setGallerySlide(Math.round(el.scrollLeft / el.clientWidth)); }} className="flex h-64 snap-x snap-mandatory overflow-x-auto scroll-smooth sm:h-80 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" > {gallerySlides.map((src, i) => (
{`${
))}
) : (
)}

{fmtDate(selectedHighlight.date, isEn)}

{isEn ? selectedHighlight.title_en : selectedHighlight.title_mn}

{gallerySlides.length > 1 && ( <>
{gallerySlides.map((_, i) => ( ))}
)}
{gallerySlides.length > 1 && (
{gallerySlides.map((src, i) => ( ))}
)}
{selectedHighlight.category && ( {selectedHighlight.category} )} {selectedHighlight.highlightsCount > 0 && ( {t("events.detailModal.highlights", { count: selectedHighlight.highlightsCount, })} )}
{(() => { const detailBody = isEn ? selectedHighlight.detailBody_en : selectedHighlight.detailBody_mn; if (detailBody && detailBody.length > 0) { return (
{detailBody.map((para, i) => (

{para}

))}
); } return (

{isEn ? selectedHighlight.desc_en : selectedHighlight.desc_mn}

); })()}
)} {/* Upcoming event detail popup */} setSelectedEvent(null)} footer={null} centered width={720} closeIcon={ } styles={{ content: { padding: 0, borderRadius: 20, overflow: "hidden" }, body: { maxHeight: "82vh", overflowY: "auto" }, }} > {selectedEvent && ( <> {/* Banner */}
{selectedEvent.image && ( {isEn )} {selectedEvent.status === "open" ? t("events.eventModal.openForRegistration") : t("events.eventModal.registrationClosed")}

{isEn ? selectedEvent.title_en : selectedEvent.title_mn}

{isEn ? selectedEvent.city_en : selectedEvent.city_mn}

{/* Info cards */}
} label={t("events.eventModal.date")} value={fmtDate(selectedEvent.date, isEn)} /> } label={t("events.eventModal.time")} value={`${selectedEvent.timeStart}–${selectedEvent.timeEnd}`} /> } label={t("events.eventModal.location")} value={isEn ? selectedEvent.venue_en : selectedEvent.venue_mn} /> {(isEn ? selectedEvent.organizer_en : selectedEvent.organizer_mn) && ( } label={t("events.eventModal.organizer")} value={ (isEn ? selectedEvent.organizer_en : selectedEvent.organizer_mn) as string } /> )} {(isEn ? selectedEvent.price_en : selectedEvent.price_mn) && ( } label={t("events.eventModal.price")} value={ (isEn ? selectedEvent.price_en : selectedEvent.price_mn) as string } /> )} {selectedEvent.capacity && ( } label={t("events.eventModal.capacity")} value={selectedEvent.capacity} /> )}
{/* About */} {(isEn ? selectedEvent.desc_en : selectedEvent.desc_mn) && (

{t("events.eventModal.about")}

{(isEn ? selectedEvent.desc_en : selectedEvent.desc_mn) .split("\n") .filter(Boolean) .map((para, i) => (

{para}

))}
)} {/* Agenda */} {(() => { const agenda = selectedEvent.agenda; if (!agenda || agenda.length === 0) return null; return (

{t("events.eventModal.agenda")}

    {agenda.map((item, i) => (
  • {item.time && ( {item.time} )} {item.time ? " — " : ""} {isEn ? item.label_en : item.label_mn}
    • ))}
); })()} {t("events.eventModal.register")}
)}
); } function InfoCard({ icon, label, value, }: { icon: React.ReactNode; label: string; value: string; }) { return (
{icon} {label}

{value}

); } export const getServerSideProps: GetServerSideProps = async ({ locale, }) => { const [upcomingEvents, pastEventHighlights] = await Promise.all([ getUpcomingEvents(), getPastEventHighlights(), ]); return { props: { upcomingEvents, pastEventHighlights, ...(await serverSideTranslations( locale ?? "en", ["common", "expat"], i18nConfig, )), }, }; };