"use client";

import { useRef, useState } from "react";
import Link from "next/link";
import { AnimatePresence, motion, useMotionValue, useSpring } from "framer-motion";
import { ArrowRight } from "@/components/ui/icons";

/**
 * "Our Capabilities" — hover-reveal list. Six big capability rows; on
 * desktop a floating image preview follows the cursor and crossfades per
 * row. Mobile gets clean tappable rows. Brand-strict.
 */
const CAPABILITIES = [
  {
    name: "Web Development",
    desc: "Fast, scalable web apps & platforms",
    href: "/services/web-development",
    image: "/images/opt/HeroBanner1.webp",
  },
  {
    name: "Mobile App Development",
    desc: "Native & cross-platform experiences",
    href: "/services/mobile-app-development",
    image: "/images/opt/HeroBanner2.webp",
  },
  {
    name: "Game Development",
    desc: "2D, 3D, multiplayer & live ops",
    href: "/services/game-development",
    image: "/images/opt/Pillar1.webp",
  },
  {
    name: "AI Solutions",
    desc: "GenAI, agents & machine learning",
    href: "/services/ai-development",
    image: "/images/opt/HeroBanner3.png",
  },
  {
    name: "Data Analytics",
    desc: "Pipelines, dashboards & insight",
    href: "/services",
    image: "/images/opt/Pillar2.webp",
  },
  {
    name: "Cloud & DevOps",
    desc: "Infrastructure, CI/CD & reliability",
    href: "/services/cloud-solutions",
    image: "/images/opt/HeroBanner2.webp",
  },
];

const container = { hidden: {}, show: { transition: { staggerChildren: 0.1 } } };
const word = {
  hidden: { yPercent: 120 },
  show: { yPercent: 0, transition: { duration: 0.7, ease: [0.21, 0.47, 0.32, 0.98] } },
};
const rise = {
  hidden: { opacity: 0, y: 36 },
  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.21, 0.47, 0.32, 0.98] } },
};

export default function Capabilities() {
  const listRef = useRef(null);
  const [active, setActive] = useState(null);

  // Cursor-following preview (springy).
  const mx = useMotionValue(0);
  const my = useMotionValue(0);
  const x = useSpring(mx, { stiffness: 220, damping: 28 });
  const y = useSpring(my, { stiffness: 220, damping: 28 });

  const onMove = (e) => {
    const r = listRef.current?.getBoundingClientRect();
    if (!r) return;
    mx.set(e.clientX - r.left);
    my.set(e.clientY - r.top);
  };

  return (
    <section className="relative overflow-hidden bg-background py-14 text-foreground md:py-16">
      <div className="pointer-events-none absolute -right-40 top-0 h-[28rem] w-[28rem] rounded-full bg-primary/10 blur-[150px]" />

      <div className="container relative">
        {/* Header */}
        <motion.div
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.5 }}
          className="mx-auto max-w-3xl text-center"
        >
          <motion.span
            variants={rise}
            className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground backdrop-blur"
          >
            <span className="h-1.5 w-1.5 rounded-full bg-primary" />
            Our capabilities
          </motion.span>

          <h2 className="mt-5 font-heading text-3xl font-bold leading-[1.12] tracking-tight sm:text-4xl md:text-5xl">
            <span className="inline-block overflow-hidden pb-[0.08em] align-bottom">
              <motion.span variants={word} className="inline-block">
                What&nbsp;we&nbsp;build,
              </motion.span>
            </span>{" "}
            <span className="inline-block overflow-hidden pb-[0.08em] align-bottom">
              <motion.span
                variants={word}
                className="animate-text-shimmer inline-block bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
              >
                end to end.
              </motion.span>
            </span>
          </h2>
        </motion.div>

        {/* Hover-reveal list */}
        <motion.div
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.15 }}
          ref={listRef}
          onMouseMove={onMove}
          onMouseLeave={() => setActive(null)}
          className="relative mt-14"
        >
          {/* floating preview (desktop) */}
          <AnimatePresence>
            {active !== null && (
              <motion.div
                initial={{ opacity: 0, scale: 0.85 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.9 }}
                transition={{ duration: 0.25 }}
                style={{ x, y }}
                className="pointer-events-none absolute left-0 top-0 z-20 hidden -translate-x-1/2 -translate-y-[110%] lg:block"
              >
                <div className="h-44 w-64 overflow-hidden rounded-2xl border border-primary/40 shadow-2xl shadow-black/60">
                  <AnimatePresence mode="wait">
                    <motion.div
                      key={active}
                      initial={{ opacity: 0, scale: 1.08 }}
                      animate={{ opacity: 1, scale: 1 }}
                      exit={{ opacity: 0 }}
                      transition={{ duration: 0.25 }}
                      className="h-full w-full bg-cover bg-center"
                      style={{ backgroundImage: `url(${CAPABILITIES[active].image})` }}
                    />
                  </AnimatePresence>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          {CAPABILITIES.map(({ name, desc, href }, i) => (
            <motion.div key={name} variants={rise}>
              <Link
                href={href}
                onMouseEnter={() => setActive(i)}
                className="group relative flex items-center gap-5 border-t border-border py-6 transition-colors last:border-b sm:gap-8 sm:py-7"
              >
                {/* left accent grows on hover */}
                <span className="absolute left-0 top-0 h-full w-0.5 origin-top scale-y-0 bg-gradient-to-b from-primary to-accent transition-transform duration-300 group-hover:scale-y-100" />

                <span className="w-8 shrink-0 font-heading text-sm font-semibold text-primary">
                  {String(i + 1).padStart(2, "0")}
                </span>

                <span className="min-w-0 flex-1">
                  <span className="block font-heading text-2xl font-bold leading-tight tracking-tight text-foreground transition-all duration-300 group-hover:translate-x-2 group-hover:text-primary sm:text-4xl md:text-5xl">
                    {name}
                  </span>
                </span>

                <span className="hidden shrink-0 text-sm text-muted-foreground md:block">
                  {desc}
                </span>

                <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-all duration-300 group-hover:-rotate-45 group-hover:border-primary group-hover:bg-primary group-hover:text-primary-foreground">
                  <ArrowRight className="h-4 w-4" />
                </span>
              </Link>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}