import { useMemo, 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 { ChevronLeft, Star, Play, ChevronDown, PenLine, Phone, Clapperboard, } from "lucide-react"; import { type ExpatStory } from "@/lib/expatContent"; import { getExpatStories } from "@/lib/webflowEvents"; import ShareStoryForm from "@/components/expat/shareStoryForm"; const PAGE_SIZE = 6; const steps = [ { key: "step1", icon: PenLine }, { key: "step2", icon: Phone }, { key: "step3", icon: Clapperboard }, ] as const; // Joins whichever of author/location are actually present with " · ". function byline(author?: string, location?: string): string { return [author, location].filter(Boolean).join(" · "); } type Props = { expatStories: ExpatStory[] }; export default function ExpatStoriesPage({ expatStories }: 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 featuredStory = expatStories.find((s) => s.featured) ?? expatStories[0]; // Categories come straight from whatever each Webflow story was tagged // with — no fixed list, so the filter pills are just the distinct set // actually present. const categories = useMemo( () => Array.from(new Set(expatStories.map((s) => s.category).filter(Boolean))), [expatStories], ); const filteredStories = useMemo( () => activeCategory === "all" ? expatStories : expatStories.filter((s) => s.category === activeCategory), [activeCategory, expatStories], ); const visibleStories = filteredStories.slice(0, visibleCount); const hasMore = visibleCount < filteredStories.length; return (
{t("stories.meta.title")} {/* Hero */}
{t("stories.hero.badge")}

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

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

{/* This Week's Story */}
{t("stories.featured.badge")}

{t("stories.featured.title")}

{featuredStory && (
{featuredStory.image && ( {isEn )}
{t("stories.featured.badge")}

{isEn ? featuredStory.title_en : featuredStory.title_mn}

{byline( featuredStory.author, isEn ? featuredStory.location_en : featuredStory.location_mn, ) && (

{byline( featuredStory.author, isEn ? featuredStory.location_en : featuredStory.location_mn, )}

)}

{isEn ? featuredStory.excerpt_en : featuredStory.excerpt_mn}

{t("stories.featured.watchStory")} {featuredStory.videoDuration && ( {featuredStory.videoDuration} )}
)}
{/* Explore Expat Stories */}
{t("stories.explore.badge")}

{t("stories.explore.title")}

{categories.map((cat) => ( ))}
{visibleStories.map((s) => (
{s.image && ( {isEn )}

{isEn ? s.title_en : s.title_mn}

{byline(s.author, isEn ? s.location_en : s.location_mn) && (

{byline(s.author, isEn ? s.location_en : s.location_mn)}

)}

{isEn ? s.excerpt_en : s.excerpt_mn}

{t("stories.explore.watch")}
))}
{filteredStories.length === 0 && (

{t("stories.explore.empty")}

)} {hasMore && (
)}
{/* Your Journey Matters */}
{t("stories.journey.badge")}

{t("stories.journey.title")}

{t("stories.journey.desc")}

{steps.map(({ key, icon: Icon }, i) => (
{i + 1}

{t(`stories.journey.steps.${key}.title`)}

{t(`stories.journey.steps.${key}.desc`)}

))}
{/*

{t("stories.journey.readyTitle")}

{t("stories.journey.readyDesc")}

*/} {/*

{t("stories.journey.quote")}

MV

{t("stories.journey.quoteAuthor")}

{t("stories.journey.quoteFrom")}

*/}
); } export const getServerSideProps: GetServerSideProps = async ({ locale, }) => { const expatStories = await getExpatStories(); return { props: { expatStories, ...(await serverSideTranslations( locale ?? "en", ["common", "expat"], i18nConfig, )), }, }; };