"use client";

import Image from "next/image";
import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import { SectionHeading } from "@/components/ui/section-heading";
import { useLanguage } from "@/components/language-provider";

export function MachinerySection() {
  const { t } = useLanguage();
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });
  const bgY = useTransform(scrollYProgress, [0, 1], ["-12%", "12%"]);
  const bgScale = useTransform(scrollYProgress, [0, 1], [1.05, 1.15]);

  // Drop one item (Plasma) so we land on 9 cards = perfect 3×3 grid on lg.
  const items = t.machinery.items.filter(
    (m) => !m.title.toLowerCase().includes("varcut")
  );

  return (
    <section
      ref={ref}
      className="relative section-padding overflow-hidden bg-steel-900 text-white"
    >
      {/* Parallax photo */}
      <motion.div
        style={{ y: bgY, scale: bgScale }}
        aria-hidden
        className="absolute inset-0 -z-10 h-[120%] w-full"
      >
        <Image
          src="/images/client/slika2.jpg"
          alt=""
          fill
          sizes="100vw"
          className="object-cover opacity-30"
        />
      </motion.div>

      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-gradient-to-b from-steel-900/80 via-steel-900/95 to-steel-900"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(60%_50%_at_50%_0%,rgba(255,255,255,0.10),transparent_60%)]"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-noise opacity-30 mix-blend-overlay"
      />

      {/* Animated soft glow */}
      <motion.div
        animate={{ x: [0, 40, 0], opacity: [0.5, 0.8, 0.5] }}
        transition={{ duration: 12, repeat: Infinity, ease: "easeInOut" }}
        aria-hidden
        className="pointer-events-none absolute left-1/4 top-1/3 -z-10 h-[400px] w-[400px] rounded-full bg-sky-500/15 blur-[120px]"
      />

      <div className="container-wide relative">
        <SectionHeading
          eyebrow={t.machinery.eyebrow}
          title={t.machinery.title}
          description={t.machinery.description}
          align="center"
          light
        />

        <div className="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((m, i) => (
            <motion.div
              key={m.title}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-60px" }}
              transition={{ duration: 0.5, delay: (i % 3) * 0.08, ease: [0.22, 1, 0.36, 1] }}
              className="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-white/25 hover:bg-white/[0.08]"
            >
              <div className="flex items-start justify-between gap-3">
                <h3 className="font-display text-base font-semibold text-white">
                  {m.title}
                </h3>
                <span className="font-display text-xs font-semibold text-white/30">
                  {String(i + 1).padStart(2, "0")}
                </span>
              </div>
              <p className="mt-2 text-sm leading-relaxed text-white/65">{m.spec}</p>
              <div
                aria-hidden
                className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100"
              />
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}