"use client";

import { useMessages } from "@/components/LocaleProvider";
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
import Image from "next/image";
import { useRef, useState } from "react";
import { SectionLabel, AnimatedHeading } from "./Features";

export function Trainers() {
  const messages = useMessages();
  const trainers = messages.trainers.cards;

  return (
    <section
      id="trainers"
      className="relative scroll-mt-20 py-20 md:scroll-mt-24 md:py-28"
    >
      <div className="relative mx-auto max-w-7xl px-6">
        <div className="mb-12 max-w-3xl md:mb-16">
          <SectionLabel>{messages.trainers.label}</SectionLabel>
          <AnimatedHeading>
            <span className="flex flex-col gap-2 md:gap-3">
              <span>{messages.trainers.titleLine1}</span>
              <span className="text-muted-strong">
                {messages.trainers.titleLine2}
              </span>
            </span>
          </AnimatedHeading>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="mt-6 max-w-xl text-balance text-base text-muted md:text-lg"
          >
            {messages.trainers.intro}
          </motion.p>
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8">
          {trainers.map((t, i) => (
            <TrainerCard key={t.name} trainer={t} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function TrainerCard({
  trainer,
  index,
}: {
  trainer: {
    name: string;
    image: string;
    role: string;
    tagline: string;
    bio: string;
    quote: string;
    traits: string[];
    accent: string;
  };
  index: number;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const [hovered, setHovered] = useState(false);

  const mx = useMotionValue(0);
  const my = useMotionValue(0);
  const rotateX = useSpring(useTransform(my, [-0.5, 0.5], ["8deg", "-8deg"]), {
    stiffness: 200,
    damping: 20,
  });
  const rotateY = useSpring(useTransform(mx, [-0.5, 0.5], ["-8deg", "8deg"]), {
    stiffness: 200,
    damping: 20,
  });

  const handleMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;
    mx.set(x);
    my.set(y);
  };

  const handleLeave = () => {
    mx.set(0);
    my.set(0);
    setHovered(false);
  };

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 60 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{
        duration: 1,
        delay: index * 0.15,
        ease: [0.22, 1, 0.36, 1],
      }}
      onMouseMove={handleMove}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={handleLeave}
      style={{
        rotateX,
        rotateY,
        transformStyle: "preserve-3d",
        perspective: 1200,
      }}
      className="group relative overflow-hidden rounded-[2rem] border border-white/[0.08] bg-surface"
      data-cursor-hover
    >
      <motion.div
        aria-hidden
        className="pointer-events-none absolute -inset-[1px] rounded-[2rem] opacity-0 transition-opacity duration-500 group-hover:opacity-100"
        style={{
          background: `linear-gradient(135deg, ${trainer.accent}, transparent, ${trainer.accent})`,
          padding: "1px",
          WebkitMask:
            "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
          WebkitMaskComposite: "xor",
          maskComposite: "exclude",
        }}
      />

      <div className="relative aspect-[4/5] overflow-hidden">
        <motion.div
          animate={{ scale: hovered ? 1.08 : 1.02 }}
          transition={{ duration: 1.5, ease: [0.22, 1, 0.36, 1] }}
          className="absolute inset-0"
        >
          <Image
            src={trainer.image}
            alt={trainer.name}
            fill
            sizes="(max-width: 768px) 100vw, 50vw"
            className="object-cover"
          />
        </motion.div>

        <div className="absolute inset-0 bg-gradient-to-t from-surface via-surface/20 to-transparent" />
        <div
          className="absolute inset-0 opacity-40 mix-blend-overlay"
          style={{
            background: `radial-gradient(circle at 50% 100%, ${trainer.accent}, transparent 60%)`,
          }}
        />

        <div className="absolute inset-x-0 bottom-0 p-8 md:p-10">
          <motion.div
            initial={false}
            animate={{ y: hovered ? -8 : 0 }}
            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
          >
            <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.2em] text-accent-bright">
              {trainer.role}
            </div>
            <h3 className="text-5xl font-semibold tracking-[-0.03em] md:text-6xl">
              {trainer.name}
            </h3>
          </motion.div>
        </div>
      </div>

      <div className="relative p-8 md:p-10">
        <p className="mb-6 text-sm italic text-muted-strong md:text-base">
          &ldquo;{trainer.quote}&rdquo;
        </p>
        <p className="mb-6 text-sm leading-relaxed text-muted md:text-base">
          {trainer.bio}
        </p>

        <div className="flex flex-wrap gap-2">
          {trainer.traits.map((trait) => (
            <span
              key={trait}
              className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-muted-strong"
            >
              {trait}
            </span>
          ))}
        </div>
      </div>
    </motion.div>
  );
}