LetsBeBiz-Site/src/components/sections/SelectedWorks.tsx

'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 (
    <span className="inline-flex items-center gap-1.5 bg-primary/10 text-primary-dark text-[0.75rem] font-semibold px-3 py-1 rounded-full leading-none tracking-wide">
      {showDot && (
        <span className="w-1 h-1 rounded-full bg-primary/50 shrink-0" aria-hidden="true" />
      )}
      {label}
    </span>
  );
}

// ─── 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 (
    <motion.article
      variants={featuredCardVariants}
      className={cn(
        'group relative flex flex-col bg-surface-high rounded-2xl overflow-hidden',
        'shadow-subtle',
        'transition-shadow duration-300 hover:shadow-[0_24px_48px_rgba(25,28,29,0.10)]',
      )}
    >
      <div className="relative w-full aspect-[16/9] md:aspect-[2/1] overflow-hidden">
        <Image
          src={project.image}
          alt={t(`work.projects.${project.i18nKey}.title`)}
          fill
          className="object-cover transition-transform duration-500 group-hover:scale-[1.03]"
          sizes="(max-width: 768px) 100vw, 66vw"
        />
      </div>

      {/* Content */}
      <div className="flex flex-col flex-1 p-7 gap-4">
        {/* Tags */}
        <div className="flex flex-wrap gap-2">
          {tags.map((tag, i) => (
            <TagChip key={tag} label={tag} showDot={i > 0} />
          ))}
        </div>

        {/* Title */}
        <h3 className="font-serif text-2xl font-semibold text-on-surface leading-snug">
          {t(`work.projects.${project.i18nKey}.title`)}
        </h3>

        {/* Description */}
        <p className="text-sm text-outline leading-relaxed flex-1">
          {t(`work.projects.${project.i18nKey}.description`)}
        </p>

        {/* CTA */}
        <Link
          href={`/work/${project.slug}` as any}
          className={cn(
            'inline-flex items-center gap-2 text-sm font-medium text-primary-dark',
            'mt-1 group/link',
          )}
        >
          <span className="relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-primary-dark after:origin-left after:scale-x-100 after:transition-transform after:duration-200">
            {readLabel}
          </span>
          <ArrowRight
            size={15}
            className="transition-transform duration-200 group-hover/link:translate-x-1.5"
          />
        </Link>
      </div>
    </motion.article>
  );
}

// ─── 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 (
    <motion.article
      variants={smallCardVariants}
      className={cn(
        'group relative flex flex-col bg-surface-high rounded-xl overflow-hidden',
        'shadow-card',
        'transition-all duration-300',
        'hover:shadow-subtle',
      )}
    >
      <div className="relative overflow-hidden">
        <div className="relative w-full aspect-[16/7]">
          <Image
            src={project.image}
            alt={t(`work.projects.${project.i18nKey}.title`)}
            fill
            className="object-cover transition-transform duration-500 group-hover:scale-[1.03]"
            sizes="(max-width: 768px) 100vw, 33vw"
          />
        </div>
      </div>

      {/* Content */}
      <div className="flex flex-col flex-1 p-5 gap-3">
        {/* Tags */}
        <div className="flex flex-wrap gap-1.5">
          {tags.map((tag, i) => (
            <TagChip key={tag} label={tag} showDot={i > 0} />
          ))}
        </div>

        {/* Title */}
        <h3 className="font-serif text-lg font-semibold text-on-surface leading-snug">
          {t(`work.projects.${project.i18nKey}.title`)}
        </h3>

        {/* Description */}
        <p className="text-xs text-outline leading-relaxed flex-1">
          {t(`work.projects.${project.i18nKey}.description`)}
        </p>

        {/* CTA */}
        <Link
          href={`/work/${project.slug}` as any}
          className="inline-flex items-center gap-1.5 text-xs font-medium text-primary-dark group/link"
        >
          <span className="relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-primary-dark after:origin-left after:scale-x-100 after:transition-transform after:duration-200">
            {readLabel}
          </span>
          <ArrowRight
            size={13}
            className="transition-transform duration-200 group-hover/link:translate-x-1"
          />
        </Link>
      </div>
    </motion.article>
  );
}

// ─── Coming Soon Card ─────────────────────────────────────────────────────────

function ComingSoonCard({ item, t }: { item: ComingSoonItem; t: (key: string) => string }) {
  const Icon = item.confidential ? Lock : Clock;

  return (
    <motion.div
      variants={comingSoonVariants}
      className={cn(
        'relative flex flex-col items-center justify-center gap-4',
        'rounded-xl p-8 min-h-[160px]',
        'border border-dashed border-outline-variant/50',
        'coming-soon-card',
        'overflow-hidden',
      )}
    >
      {/* Subtle animated pulse overlay */}
      <div
        className="absolute inset-0 rounded-xl opacity-0 coming-soon-pulse"
        aria-hidden="true"
      />

      <div className="relative z-10 flex flex-col items-center gap-3 text-center">
        <Icon
          size={20}
          className="text-outline/60"
          strokeWidth={1.5}
        />
        <div>
          <p className="font-serif text-base font-medium text-on-surface/60 leading-snug">
            {t(`work.comingSoonProjects.${item.i18nKey}.title`)}
          </p>
          <p className="label-md text-outline/70 mt-1">
            {t(`work.comingSoonProjects.${item.i18nKey}.subtitle`)}
          </p>
        </div>
      </div>
    </motion.div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

export default function SelectedWorks() {
  const t = useTranslations();

  const featuredProject = PROJECTS.find((p) => p.featured)!;
  const secondaryProjects = PROJECTS.filter((p) => !p.featured);

  return (
    <section
      id="work"
      className="bg-surface-low py-20"
      style={{
        backgroundImage: [
          'repeating-linear-gradient(0deg, rgba(25,28,29,0.02) 0px, rgba(25,28,29,0.02) 1px, transparent 1px, transparent 48px)',
          'repeating-linear-gradient(90deg, rgba(25,28,29,0.02) 0px, rgba(25,28,29,0.02) 1px, transparent 1px, transparent 48px)',
        ].join(', '),
      }}
    >
      <style>{`
        @keyframes dashed-drift {
          0%   { background-position: 0 0, 100% 0, 100% 100%, 0 100%; }
          100% { background-position: 100% 0, 100% 100%, 0 100%, 0 0; }
        }
        @keyframes coming-soon-bg-pulse {
          0%, 100% { background-color: var(--color-surface-low); }
          50%      { background-color: var(--color-surface); }
        }
        @keyframes coming-soon-fade {
          0%, 100% { opacity: 0; }
          50% { opacity: 1; }
        }
        .coming-soon-card {
          animation: coming-soon-bg-pulse 4s ease-in-out infinite;
        }
        .coming-soon-pulse {
          background: radial-gradient(
            ellipse at center,
            rgba(91, 164, 217, 0.06) 0%,
            transparent 70%
          );
          animation: coming-soon-fade 4s ease-in-out infinite;
        }
      `}</style>

      <div className="container mx-auto px-6">

        {/* ── Section Header ── */}
        <motion.div
          variants={slideLeftVariants}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-14"
        >
          <div>
            <p className="label-md text-primary mb-2">{t('work.eyebrow')}</p>
            <h2 className="font-serif text-4xl md:text-5xl font-semibold text-on-surface leading-[1.1] tracking-[-0.02em]">
              {t('work.title')}
            </h2>
          </div>
        </motion.div>

        {/* ── Primary Grid: Featured + 2 Small ── */}
        <motion.div
          variants={staggerContainerWide}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          className="grid grid-cols-1 md:grid-cols-12 gap-5 mb-5"
        >
          {/* Featured card — 8 cols */}
          <div className="md:col-span-8">
            <FeaturedCard
              project={featuredProject}
              readLabel={t('work.readCaseStudy')}
              t={t}
            />
          </div>

          {/* Secondary column — 4 cols, 2 stacked */}
          <div className="md:col-span-4 flex flex-col gap-5">
            {secondaryProjects.map((project) => (
              <SmallCard
                key={project.slug}
                project={project}
                readLabel={t('work.readCaseStudy')}
                t={t}
              />
            ))}
          </div>
        </motion.div>

        {/* ── Coming Soon Row ── */}
        <motion.div
          variants={staggerContainerWide}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          className="grid grid-cols-1 sm:grid-cols-2 gap-5"
        >
          {COMING_SOON.map((item) => (
            <ComingSoonCard key={item.i18nKey} item={item} t={t} />
          ))}
        </motion.div>

      </div>
    </section>
  );
}