import { motion, useScroll, useTransform, useMotionValue, useSpring } from "framer-motion";
import { useLanguage } from "@/contexts/LanguageContext";
import { ShoppingBag, CalendarDays, HardHat, Building, Briefcase, Truck } from "lucide-react";
import { useRef, useCallback } from "react";

const industries = [
  { key: "industries.retail", icon: ShoppingBag, desc: "Storefronts & retail environments" },
  { key: "industries.events", icon: CalendarDays, desc: "Expos, galas & branded events" },
  { key: "industries.construction", icon: HardHat, desc: "Construction sites & hoarding" },
  { key: "industries.realEstate", icon: Building, desc: "Property marketing & signage" },
  { key: "industries.corporate", icon: Briefcase, desc: "Office branding & interiors" },
  { key: "industries.fleet", icon: Truck, desc: "Vehicle wraps & fleet graphics" },
];

/* Spotlight card with mouse-tracking glow */
const IndustryTile = ({ ind, index }: { ind: typeof industries[0]; index: number }) => {
  const { t } = useLanguage();
  const Icon = ind.icon;
  const cardRef = useRef<HTMLDivElement>(null);
  const mouseX = useMotionValue(0.5);
  const mouseY = useMotionValue(0.5);
  const springX = useSpring(mouseX, { stiffness: 300, damping: 30 });
  const springY = useSpring(mouseY, { stiffness: 300, damping: 30 });

  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    const rect = cardRef.current?.getBoundingClientRect();
    if (!rect) return;
    mouseX.set((e.clientX - rect.left) / rect.width);
    mouseY.set((e.clientY - rect.top) / rect.height);
  }, [mouseX, mouseY]);

  return (
    <motion.div
      initial={{ opacity: 0, y: 36 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-60px" }}
      transition={{ delay: index * 0.1, duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
      whileHover={{ y: -8, transition: { duration: 0.45, ease: "easeOut" } }}
      className="group relative"
    >
      <div
        ref={cardRef}
        onMouseMove={handleMouseMove}
        className="relative rounded-2xl p-8 md:p-9 overflow-hidden cursor-default h-full transition-shadow duration-700"
        style={{
          background: `linear-gradient(165deg, hsl(0 0% 100% / 0.06) 0%, hsl(0 0% 100% / 0.025) 40%, hsl(0 0% 0% / 0.15) 100%)`,
          border: `1px solid hsl(0 0% 100% / 0.09)`,
          backdropFilter: "blur(24px) saturate(1.3)",
          boxShadow: `0 8px 40px hsl(0 0% 0% / 0.45), 0 2px 8px hsl(0 0% 0% / 0.3), inset 0 1px 0 hsl(0 0% 100% / 0.07)`,
        }}
      >
        {/* Mouse-tracking spotlight */}
        <motion.div
          className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-500"
          style={{
            background: useTransform(
              [springX, springY],
              ([x, y]) =>
                `radial-gradient(320px circle at ${(x as number) * 100}% ${(y as number) * 100}%, hsl(var(--brand-red) / 0.08) 0%, transparent 60%)`
            ),
          }}
        />

        {/* Top edge reflection */}
        <div
          className="absolute top-0 left-[10%] right-[10%] h-px"
          style={{ background: `linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.14), transparent)` }}
        />

        {/* Left accent stripe */}
        <div
          className="absolute top-[20%] bottom-[20%] left-0 w-px opacity-0 group-hover:opacity-100 transition-opacity duration-700"
          style={{ background: `linear-gradient(180deg, transparent, hsl(var(--brand-red) / 0.5), transparent)` }}
        />

        {/* Hover border glow */}
        <div
          className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none"
          style={{
            border: `1px solid hsl(var(--brand-red) / 0.2)`,
            boxShadow: `inset 0 0 30px hsl(var(--brand-red) / 0.03), 0 0 40px -12px hsl(var(--brand-red) / 0.15)`,
          }}
        />

        {/* Content */}
        <div className="relative z-10">
          {/* Icon */}
          <div className="mb-6 relative inline-block">
            <div
              className="w-14 h-14 rounded-xl flex items-center justify-center relative transition-all duration-600"
              style={{
                background: `linear-gradient(145deg, hsl(var(--brand-red) / 0.14) 0%, hsl(var(--brand-red) / 0.06) 100%)`,
                border: `1px solid hsl(var(--brand-red) / 0.22)`,
                boxShadow: `0 4px 16px hsl(var(--brand-red) / 0.1), inset 0 1px 0 hsl(0 0% 100% / 0.08), inset 0 -1px 0 hsl(0 0% 0% / 0.2)`,
              }}
            >
              <Icon
                className="w-6 h-6 transition-all duration-500"
                style={{ color: `hsl(var(--brand-red-glow))` }}
                strokeWidth={1.5}
              />
            </div>
            {/* Glow behind icon on hover */}
            <div
              className="absolute -inset-2 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none -z-10"
              style={{ background: `radial-gradient(circle, hsl(var(--brand-red) / 0.12) 0%, transparent 70%)` }}
            />
          </div>

          {/* Text */}
          <h3 className="font-display text-base md:text-lg tracking-wide text-foreground mb-2 transition-all duration-500 group-hover:text-glow-red">
            {t(ind.key)}
          </h3>
          <p className="font-body text-xs md:text-[13px] text-muted-foreground leading-relaxed opacity-70 group-hover:opacity-100 transition-opacity duration-500">
            {ind.desc}
          </p>
        </div>

        {/* Bottom accent sweep on hover */}
        <div
          className="absolute bottom-0 left-[10%] right-[10%] h-px scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out origin-center"
          style={{ background: `linear-gradient(90deg, transparent, hsl(var(--brand-red) / 0.5), transparent)` }}
        />
      </div>
    </motion.div>
  );
};

const IndustriesSection = () => {
  const { t } = useLanguage();
  const sectionRef = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["start end", "end start"],
  });

  const bloomScale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1.1, 0.8]);
  const bloomOpacity = useTransform(scrollYProgress, [0, 0.5, 1], [0.2, 0.6, 0.2]);
  const particleY1 = useTransform(scrollYProgress, [0, 1], [20, -40]);
  const particleY2 = useTransform(scrollYProgress, [0, 1], [30, -30]);

  return (
    <section ref={sectionRef} className="relative py-32 md:py-48 overflow-hidden">
      {/* === Layered Background === */}
      <div className="absolute inset-0">
        <div
          className="absolute inset-0"
          style={{
            background: `linear-gradient(180deg, hsl(0 0% 2%) 0%, hsl(0 0% 5.5%) 30%, hsl(0 0% 6%) 50%, hsl(0 0% 4.5%) 75%, hsl(0 0% 2%) 100%)`,
          }}
        />

        {/* Central red bloom */}
        <motion.div
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
          style={{ scale: bloomScale, opacity: bloomOpacity }}
        >
          <div
            className="w-[1000px] h-[700px]"
            style={{
              background: `radial-gradient(ellipse, hsl(var(--brand-red) / 0.07) 0%, hsl(var(--brand-red) / 0.02) 40%, transparent 70%)`,
            }}
          />
        </motion.div>

        {/* Secondary bloom top-right */}
        <div
          className="absolute -top-20 right-[10%] w-[500px] h-[500px] pointer-events-none"
          style={{
            background: `radial-gradient(circle, hsl(var(--brand-red) / 0.035) 0%, transparent 55%)`,
          }}
        />

        {/* Secondary bloom bottom-left */}
        <div
          className="absolute -bottom-20 left-[5%] w-[400px] h-[400px] pointer-events-none"
          style={{
            background: `radial-gradient(circle, hsl(var(--brand-red) / 0.03) 0%, transparent 50%)`,
          }}
        />

        {/* Noise texture */}
        <div
          className="absolute inset-0 opacity-[0.02] pointer-events-none"
          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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")`,
          }}
        />

        {/* Vignette */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background: `radial-gradient(ellipse at 50% 50%, transparent 40%, hsl(0 0% 0% / 0.4) 100%)`,
          }}
        />
      </div>

      {/* === Top divider === */}
      <div
        className="absolute top-0 left-0 right-0 h-px"
        style={{ background: `linear-gradient(90deg, transparent 5%, hsl(var(--brand-red) / 0.35) 50%, transparent 95%)` }}
      />

      {/* === Floating decorative elements === */}
      {/* Vertical accent lines */}
      <motion.div
        className="absolute top-16 right-[12%] w-px h-32 pointer-events-none hidden lg:block"
        style={{
          background: `linear-gradient(180deg, transparent, hsl(var(--brand-red) / 0.2), transparent)`,
          y: particleY1,
        }}
      />
      <motion.div
        className="absolute bottom-24 left-[8%] w-px h-20 pointer-events-none hidden lg:block"
        style={{
          background: `linear-gradient(180deg, transparent, hsl(var(--brand-red) / 0.15), transparent)`,
          y: particleY2,
        }}
      />

      {/* Floating light orbs */}
      <motion.div
        className="absolute top-[28%] right-[6%] w-1.5 h-1.5 rounded-full pointer-events-none hidden lg:block"
        style={{
          background: `hsl(var(--brand-red) / 0.6)`,
          boxShadow: `0 0 16px 6px hsl(var(--brand-red) / 0.15)`,
          y: particleY1,
        }}
        animate={{ opacity: [0.2, 0.7, 0.2], scale: [0.8, 1.2, 0.8] }}
        transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
      />
      <motion.div
        className="absolute bottom-[30%] left-[5%] w-1 h-1 rounded-full pointer-events-none hidden lg:block"
        style={{
          background: `hsl(var(--brand-red) / 0.4)`,
          boxShadow: `0 0 12px 4px hsl(var(--brand-red) / 0.1)`,
          y: particleY2,
        }}
        animate={{ opacity: [0.3, 0.6, 0.3] }}
        transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 1.5 }}
      />

      {/* Horizontal accent line */}
      <motion.div
        className="absolute top-[45%] left-[3%] w-16 h-px pointer-events-none hidden xl:block"
        style={{ background: `linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.06), transparent)` }}
        animate={{ opacity: [0.3, 0.7, 0.3] }}
        transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
      />

      {/* === Main Content === */}
      <div className="container mx-auto px-6 relative z-10">
        {/* === Premium Header === */}
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
          className="text-center mb-20 md:mb-28"
        >
          {/* Eyebrow with animated reveal */}
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="mb-5 flex items-center justify-center gap-4"
          >
            <motion.div
              initial={{ scaleX: 0 }}
              whileInView={{ scaleX: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="hidden sm:block w-12 h-px origin-right"
              style={{ background: `linear-gradient(90deg, transparent, hsl(var(--brand-red) / 0.5))` }}
            />
            <span className="eyebrow-label">Industries</span>
            <motion.div
              initial={{ scaleX: 0 }}
              whileInView={{ scaleX: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="hidden sm:block w-12 h-px origin-left"
              style={{ background: `linear-gradient(90deg, hsl(var(--brand-red) / 0.5), transparent)` }}
            />
          </motion.div>

          {/* Heading */}
          <h2 className="section-heading mb-6">
            {t("industries.title")}
          </h2>

          {/* Subtext */}
          <p className="section-subheading">
            Delivering premium print, wrap, and installation solutions across New York's most demanding sectors.
          </p>

          {/* Decorative gradient bar */}
          <motion.div
            initial={{ scaleX: 0 }}
            whileInView={{ scaleX: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 1.2, delay: 0.4, ease: [0.22, 1, 0.36, 1] }}
            className="mx-auto mt-8 w-24 h-[2px] origin-center rounded-full"
            style={{
              background: `linear-gradient(90deg, transparent, hsl(var(--brand-red)), transparent)`,
              boxShadow: `0 0 12px hsl(var(--brand-red) / 0.3)`,
            }}
          />
        </motion.div>

        {/* === Industry Tiles === */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-7 max-w-5xl mx-auto">
          {industries.map((ind, i) => (
            <IndustryTile key={ind.key} ind={ind} index={i} />
          ))}
        </div>
      </div>

      {/* === Bottom divider === */}
      <div
        className="absolute bottom-0 left-0 right-0 h-px"
        style={{ background: `linear-gradient(90deg, transparent 5%, hsl(var(--brand-red) / 0.35) 50%, transparent 95%)` }}
      />
    </section>
  );
};

export default IndustriesSection;
