'use client';

import { MotionConfig, motion, type Variants } from 'framer-motion';
import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { cn } from '@/lib/utils';

/* ---------------- ColorChangeCards ---------------- */
export interface ColorChangeCardItem {
  id: string;
  heading: string;
  description: string;
  /** Small label above the heading, e.g. the archetype's role. */
  eyebrow?: string;
  imgSrc: string;
  href: string;
  /** Accent colour for the top edge and the hover wash. */
  color?: string;
}

interface ColorChangeCardsProps {
  cards: ColorChangeCardItem[];
  className?: string;
}

export const ColorChangeCards = ({ cards, className }: ColorChangeCardsProps) => {
  return (
    <MotionConfig reducedMotion="user">
      <div className={cn('grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4', className)}>
        {cards.map((card) => (
          <Card key={card.id} {...card} />
        ))}
      </div>
    </MotionConfig>
  );
};

/* ---------------- Card ---------------- */
const Card = ({ heading, description, eyebrow, imgSrc, href, color = '#14213d' }: ColorChangeCardItem) => {
  return (
    <Link
      href={href}
      className="group block rounded-2xl text-white no-underline outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
      style={{ '--tw-ring-color': color } as React.CSSProperties}
    >
      <motion.div
        transition={{ staggerChildren: 0.035 }}
        whileHover="hover"
        className="relative h-72 w-full overflow-hidden rounded-2xl bg-slate-800"
        style={{ borderTop: `4px solid ${color}` }}
      >
        {/* Photo: full colour on phones, greyscale until hover/focus from tablets up. */}
        <div
          className="absolute inset-0 saturate-100 transition-all duration-500 group-hover:scale-110 group-focus-visible:scale-110 motion-reduce:group-hover:scale-100 md:saturate-0 md:group-hover:saturate-100 md:group-focus-visible:saturate-100"
          style={{ backgroundImage: `url(${imgSrc})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
        />
        {/* Darkening keeps the text readable over light photos. */}
        <div className="absolute inset-0 bg-linear-to-t from-black/85 via-black/45 to-black/20" />
        {/* Archetype colour washes up from the bottom on hover. */}
        <div
          className="absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100 group-focus-visible:opacity-100"
          style={{ background: `linear-gradient(to top, ${color}e6 0%, ${color}66 45%, transparent 80%)` }}
        />

        <div className="relative z-20 flex h-full flex-col justify-between p-5 text-white/85 transition-colors duration-500 group-hover:text-white">
          <div className="flex items-start justify-between gap-3">
            {eyebrow && <span className="text-xs font-bold uppercase tracking-[0.12em]">{eyebrow}</span>}
            <ArrowRight
              aria-hidden="true"
              className="ml-auto size-7 shrink-0 transition-transform duration-500 group-hover:-rotate-45 group-focus-visible:-rotate-45"
            />
          </div>
          <div>
            <h3 className="m-0 text-white">
              <span className="sr-only">{heading}</span>
              <span aria-hidden="true">
                {heading.split('').map((letter, index) => (
                  <AnimatedLetter letter={letter} key={index} />
                ))}
              </span>
            </h3>
            <p className="m-0 mt-1 text-[0.95rem] text-white/85">{description}</p>
          </div>
        </div>
      </motion.div>
    </Link>
  );
};

/* ---------------- AnimatedLetter ---------------- */
const letterVariants: Variants = {
  hover: { y: '-50%' },
};

const AnimatedLetter = ({ letter }: { letter: string }) => {
  return (
    <span className="inline-block h-9 overflow-hidden text-3xl font-semibold leading-9">
      <motion.span
        className="flex min-w-[4px] flex-col"
        style={{ y: '0%' }}
        variants={letterVariants}
        transition={{ duration: 0.5 }}
      >
        <span>{letter}</span>
        <span>{letter}</span>
      </motion.span>
    </span>
  );
};

export default ColorChangeCards;