import { motion, useMotionValue, useTransform } from "framer-motion";
import { useLanguage } from "@/contexts/LanguageContext";
import { useRef, useCallback, MouseEvent as ReactMouseEvent } from "react";
import { ArrowUpRight } from "lucide-react";

import svcLargeFormat from "@/assets/svc-large-format.jpg";
import svcWraps from "@/assets/svc-wraps.jpg";
import svcInstallation from "@/assets/svc-installation.jpg";
import svcPpf from "@/assets/svc-ppf.jpg";
import svcVinyl from "@/assets/svc-vinyl.jpg";
import svcSigns from "@/assets/svc-signs.jpg";
import svcWallpaper from "@/assets/svc-wallpaper.jpg";
import svcSubcontract from "@/assets/svc-subcontract.jpg";

const services = [
  { key: "largeFormat", img: svcLargeFormat },
  { key: "wraps", img: svcWraps },
  { key: "installation", img: svcInstallation },
  { key: "ppf", img: svcPpf },
  { key: "vinyl", img: svcVinyl },
  { key: "signs", img: svcSigns },
  { key: "wallpaper", img: svcWallpaper },
  { key: "subcontract", img: svcSubcontract },
];

/* ─── Premium Service Card ─── */
const ServiceCard = ({
  svc,
  index,
  large,
}: {
  svc: (typeof services)[0];
  index: number;
  large?: boolean;
}) => {
  const { t } = useLanguage();
  const cardRef = useRef<HTMLDivElement>(null);
  const mx = useMotionValue(0);
  const my = useMotionValue(0);
  const spotX = useTransform(mx, (v) => `${v}px`);
  const spotY = useTransform(my, (v) => `${v}px`);

  const handleMove = useCallback(
    (e: ReactMouseEvent) => {
      if (!cardRef.current) return;
      const r = cardRef.current.getBoundingClientRect();
      mx.set(e.clientX - r.left);
      my.set(e.clientY - r.top);
    },
    [mx, my],
  );

  return (
    <motion.div
      ref={cardRef}
      onMouseMove={handleMove}
      initial={{ opacity: 0, y: 60 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-80px" }}
      transition={{
        delay: index * 0.08,
        duration: 0.8,
        ease: [0.16, 1, 0.3, 1],
      }}
      className="group relative cursor-default rounded-2xl flex flex-col"
      style={{
        background: "hsl(0 0% 5%)",
        border: "1px solid hsl(0 0% 100% / 0.08)",
        boxShadow:
          "0 4px 40px hsl(0 0% 0% / 0.5), 0 1px 0 hsl(0 0% 100% / 0.04) inset",
      }}
    >
      {/* ── mouse spotlight ── */}
      <motion.div
        className="pointer-events-none absolute -inset-px rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 z-10"
        style={{
          background: `radial-gradient(500px circle at var(--sx) var(--sy), hsl(0 100% 50% / 0.06), transparent 60%)`,
          "--sx": spotX,
          "--sy": spotY,
        } as any}
      />

      {/* ── hover border glow ── */}
      <div
        className="pointer-events-none absolute -inset-px rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 z-10"
        style={{
          background:
            "linear-gradient(135deg, hsl(0 100% 50% / 0.22), transparent 40%, transparent 60%, hsl(0 100% 50% / 0.12))",
          WebkitMask:
            "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
          WebkitMaskComposite: "xor",
          maskComposite: "exclude",
          padding: "1px",
        }}
      />

      {/* ── top shimmer ── */}
      <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-foreground/[0.12] to-transparent z-10 rounded-t-2xl" />

      {/* ── IMAGE AREA ── */}
      <div
        className={`relative overflow-hidden rounded-t-2xl ${large ? "aspect-[4/3]" : "aspect-[3/2]"}`}
      >
        <img
          src={svc.img}
          alt={t(`svc.${svc.key}.title`)}
          className="w-full h-full object-cover transition-all duration-1000 ease-out group-hover:scale-110 group-hover:brightness-110"
          loading="lazy"
        />
        {/* cinematic gradient over image bottom */}
        <div
          className="absolute inset-0"
          style={{
            background:
              "linear-gradient(to top, hsl(0 0% 5%) 0%, hsl(0 0% 5% / 0.6) 25%, transparent 55%)",
          }}
        />
        {/* subtle red ambient on image */}
        <div
          className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700"
          style={{
            background:
              "radial-gradient(ellipse at 50% 100%, hsl(0 100% 50% / 0.08), transparent 60%)",
          }}
        />
        {/* vignette */}
        <div
          className="absolute inset-0"
          style={{
            background:
              "radial-gradient(ellipse at center, transparent 50%, hsl(0 0% 0% / 0.4) 100%)",
          }}
        />

        {/* floating arrow indicator */}
        <div className="absolute top-5 right-5 w-10 h-10 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-2 group-hover:translate-y-0 z-20"
          style={{
            background: "hsl(0 0% 0% / 0.5)",
            backdropFilter: "blur(12px)",
            border: "1px solid hsl(0 0% 100% / 0.12)",
          }}
        >
          <ArrowUpRight className="w-4 h-4 text-foreground" />
        </div>
      </div>

      {/* ── CONTENT PANEL ── */}
      <div
        className="relative flex-1 p-6 md:p-7 flex flex-col justify-between"
        style={{
          background:
            "linear-gradient(180deg, hsl(0 0% 5%) 0%, hsl(0 0% 4%) 100%)",
        }}
      >
        {/* inner top line */}
        <div className="absolute top-0 inset-x-4 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" />

        <div>
          <h3 className="font-display text-lg md:text-xl text-foreground tracking-wide mb-2.5 group-hover:text-primary/90 transition-colors duration-500">
            {t(`svc.${svc.key}.title`)}
          </h3>
          <p className="font-body text-muted-foreground text-sm leading-relaxed">
            {t(`svc.${svc.key}.desc`)}
          </p>
        </div>

        {/* bottom accent line */}
        <div className="mt-5 h-[1.5px] bg-gradient-to-r from-primary/0 via-primary/0 to-transparent group-hover:from-primary/50 group-hover:via-primary/30 transition-all duration-700" />
      </div>

      {/* bottom edge glow */}
      <div className="absolute bottom-0 inset-x-0 h-[2px] rounded-b-2xl bg-gradient-to-r from-transparent via-primary/0 to-transparent group-hover:via-primary/40 transition-all duration-700" />
    </motion.div>
  );
};

/* ─── Services Section ─── */
const ServicesSection = () => {
  const { t } = useLanguage();

  return (
    <section id="services" className="relative py-32 md:py-44 overflow-hidden">
      {/* ── cinematic background ── */}
      <div className="absolute inset-0 pointer-events-none">
        <div
          className="absolute inset-0"
          style={{
            background:
              "linear-gradient(180deg, hsl(0 0% 2%) 0%, hsl(0 0% 4%) 30%, hsl(0 0% 5%) 50%, hsl(0 0% 4%) 70%, hsl(0 0% 2%) 100%)",
          }}
        />
        {/* ambient red glow center */}
        <div
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
          style={{
            width: "1000px",
            height: "800px",
            background:
              "radial-gradient(ellipse, hsl(0 100% 50% / 0.04) 0%, transparent 70%)",
          }}
        />
        {/* top-right glow */}
        <div
          className="absolute -top-40 right-0"
          style={{
            width: "600px",
            height: "600px",
            background:
              "radial-gradient(circle, hsl(0 100% 50% / 0.025) 0%, transparent 60%)",
          }}
        />
        {/* bottom-left glow */}
        <div
          className="absolute -bottom-40 left-0"
          style={{
            width: "500px",
            height: "500px",
            background:
              "radial-gradient(circle, hsl(0 100% 50% / 0.02) 0%, transparent 60%)",
          }}
        />

        {/* floating ambient fragments */}
        <motion.div
          animate={{ y: [0, -20, 0], opacity: [0.3, 0.6, 0.3] }}
          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
          className="absolute top-[20%] left-[15%] w-32 h-32 rounded-full"
          style={{
            background:
              "radial-gradient(circle, hsl(0 100% 50% / 0.04), transparent 70%)",
            filter: "blur(30px)",
          }}
        />
        <motion.div
          animate={{ y: [0, 15, 0], opacity: [0.2, 0.5, 0.2] }}
          transition={{ duration: 10, repeat: Infinity, ease: "easeInOut", delay: 2 }}
          className="absolute top-[60%] right-[10%] w-40 h-40 rounded-full"
          style={{
            background:
              "radial-gradient(circle, hsl(0 100% 50% / 0.03), transparent 70%)",
            filter: "blur(40px)",
          }}
        />
        <motion.div
          animate={{ y: [0, -12, 0], x: [0, 8, 0] }}
          transition={{ duration: 12, repeat: Infinity, ease: "easeInOut", delay: 4 }}
          className="absolute top-[40%] left-[60%] w-24 h-24 rounded-full"
          style={{
            background:
              "radial-gradient(circle, hsl(0 0% 100% / 0.015), transparent 70%)",
            filter: "blur(20px)",
          }}
        />

        {/* noise texture */}
        <div
          className="absolute inset-0 opacity-[0.015]"
          style={{
            backgroundImage:
              "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E\")",
            backgroundSize: "128px 128px",
          }}
        />
      </div>

      {/* ── top divider ── */}
      <div className="absolute top-0 inset-x-0">
        <div className="h-px bg-gradient-to-r from-transparent via-primary/25 to-transparent" />
        <div className="h-6 bg-gradient-to-b from-primary/[0.03] to-transparent" />
      </div>

      {/* ── content ── */}
      <div className="container mx-auto px-6 relative z-10">
        {/* ── premium header ── */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.9, ease: [0.16, 1, 0.3, 1] }}
          className="text-center mb-20 md:mb-28"
        >
          <motion.span
            initial={{ opacity: 0, letterSpacing: "0.5em" }}
            whileInView={{ opacity: 1, letterSpacing: "0.3em" }}
            viewport={{ once: true }}
            transition={{ duration: 1 }}
            className="inline-block text-[10px] md:text-[11px] font-semibold uppercase tracking-[0.3em] mb-5"
            style={{ color: "hsl(0 100% 55%)" }}
          >
            What We Do
          </motion.span>

          <h2 className="font-display text-3xl md:text-5xl lg:text-[3.5rem] text-foreground mb-5 leading-[1.1]">
            {t("services.title")}
          </h2>

          <p className="font-body text-muted-foreground max-w-xl mx-auto text-sm md:text-base leading-relaxed">
            {t("services.subtitle")}
          </p>

          {/* decorative line with red dot */}
          <div className="flex items-center justify-center gap-3 mt-10">
            <div className="w-16 h-px bg-gradient-to-r from-transparent to-primary/30" />
            <div
              className="w-1.5 h-1.5 rounded-full"
              style={{
                background: "hsl(0 100% 50%)",
                boxShadow: "0 0 12px hsl(0 100% 50% / 0.5)",
              }}
            />
            <div className="w-16 h-px bg-gradient-to-l from-transparent to-primary/30" />
          </div>
        </motion.div>

        {/* ── Row 1: 2 large featured cards ── */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-7 mb-5 md:mb-7">
          {services.slice(0, 2).map((svc, i) => (
            <ServiceCard key={svc.key} svc={svc} index={i} large />
          ))}
        </div>

        {/* ── Row 2: 3 cards ── */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-7 mb-5 md:mb-7">
          {services.slice(2, 5).map((svc, i) => (
            <ServiceCard key={svc.key} svc={svc} index={i + 2} />
          ))}
        </div>

        {/* ── Row 3: 3 cards ── */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-7">
          {services.slice(5).map((svc, i) => (
            <ServiceCard key={svc.key} svc={svc} index={i + 5} />
          ))}
        </div>
      </div>

      {/* ── bottom divider ── */}
      <div className="absolute bottom-0 inset-x-0">
        <div className="h-6 bg-gradient-to-t from-primary/[0.03] to-transparent" />
        <div className="h-px bg-gradient-to-r from-transparent via-primary/25 to-transparent" />
      </div>
    </section>
  );
};

export default ServicesSection;
