'use client'; import { motion } from 'framer-motion'; import { useTranslations } from 'next-intl'; import { cn } from '@/lib/utils'; import { staggerContainerWide, slideLeftVariants, fadeVariants, viewportOnce, } from '@/lib/animations'; import Image from 'next/image'; import { Link } from '@/i18n/navigation'; import { Lock, Clock, ArrowRight } from 'lucide-react'; // ─── Types ──────────────────────────────────────────────────────────────────── interface Project { /** i18n key under "work.projects" (e.g. "monaco") */ i18nKey: string; slug: string; /** number of tags to resolve from the translation array */ tagCount: number; featured?: boolean; image: string; } interface ComingSoonItem { /** i18n key under "work.comingSoonProjects" (e.g. "riviera") */ i18nKey: string; confidential?: boolean; } // ─── Data ────────────────────────────────────────────────────────────────────── const PROJECTS: Project[] = [ { i18nKey: 'monaco', slug: 'monaco-ocean', tagCount: 2, featured: true, image: '/images/monaco_high_res.jpg', }, { i18nKey: 'portNimara', slug: 'port-nimara', tagCount: 2, image: '/images/anguilla.png', }, { i18nKey: 'portAmador', slug: 'port-amador', tagCount: 2, image: '/images/panama.png', }, ]; const COMING_SOON: ComingSoonItem[] = [ { i18nKey: 'riviera', confidential: true }, { i18nKey: 'sophia' }, ]; // ─── Animation Variants ─────────────────────────────────────────────────────── const ease = [0.16, 1, 0.3, 1] as const; const featuredCardVariants = { hidden: { opacity: 0, y: 48 }, visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease }, }, }; const smallCardVariants = { hidden: { opacity: 0, y: 32 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease }, }, }; const comingSoonVariants = { hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, transition: { duration: 0.55, ease }, }, }; // ─── Tag Chip ───────────────────────────────────────────────────────────────── function TagChip({ label, showDot = false }: { label: string; showDot?: boolean }) { return ( {showDot && ( ); } // ─── Featured Card ──────────────────────────────────────────────────────────── function FeaturedCard({ project, readLabel, t }: { project: Project; readLabel: string; t: (key: string) => string }) { const tags = Array.from({ length: project.tagCount }, (_, i) => t(`work.projects.${project.i18nKey}.tags.${i}`), ); return (
{t(`work.projects.${project.i18nKey}.title`)}
{/* Content */}
{/* Tags */}
{tags.map((tag, i) => ( 0} /> ))}
{/* Title */}

{t(`work.projects.${project.i18nKey}.title`)}

{/* Description */}

{t(`work.projects.${project.i18nKey}.description`)}

{/* CTA */} {readLabel}
); } // ─── Small Card ─────────────────────────────────────────────────────────────── function SmallCard({ project, readLabel, t }: { project: Project; readLabel: string; t: (key: string) => string }) { const tags = Array.from({ length: project.tagCount }, (_, i) => t(`work.projects.${project.i18nKey}.tags.${i}`), ); return (
{t(`work.projects.${project.i18nKey}.title`)}
{/* Content */}
{/* Tags */}
{tags.map((tag, i) => ( 0} /> ))}
{/* Title */}

{t(`work.projects.${project.i18nKey}.title`)}

{/* Description */}

{t(`work.projects.${project.i18nKey}.description`)}

{/* CTA */} {readLabel}
); } // ─── Coming Soon Card ───────────────────────────────────────────────────────── function ComingSoonCard({ item, t }: { item: ComingSoonItem; t: (key: string) => string }) { const Icon = item.confidential ? Lock : Clock; return ( {/* Subtle animated pulse overlay */}