"use client";

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

const icons = [MessageSquare, PenTool, Factory, Truck];

export function ProcessSection() {
  const { t } = useLanguage();
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });
  const bgY = useTransform(scrollYProgress, [0, 1], ["-8%", "8%"]);
  const lineProgress = useTransform(scrollYProgress, [0.1, 0.6], ["0%", "100%"]);

  return (
    <section
      ref={ref}
      className="relative section-padding overflow-hidden bg-white"
    >
      <motion.div
        style={{ y: bgY }}
        aria-hidden
        className="absolute inset-0 -z-10 h-[120%] w-full"
      >
        <Image
          src="/images/client/slika6.webp"
          alt=""
          fill
          sizes="100vw"
          className="object-cover opacity-[0.05]"
        />
      </motion.div>

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

        <div className="relative mt-16">
          {/* Scroll-revealed connecting line */}
          <div
            aria-hidden
            className="absolute left-1/2 top-0 hidden h-full w-px -translate-x-1/2 bg-steel-100 lg:block"
          />
          <motion.div
            style={{ height: lineProgress }}
            aria-hidden
            className="absolute left-1/2 top-0 hidden w-px -translate-x-1/2 bg-gradient-to-b from-steel-900 to-steel-400 lg:block"
          />

          <div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
            {t.process.steps.map((step, i) => {
              const Icon = icons[i];
              return (
                <motion.div
                  key={step.title}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true, margin: "-80px" }}
                  transition={{ duration: 0.6, delay: i * 0.12, ease: [0.22, 1, 0.36, 1] }}
                  className="relative"
                >
                  <div className="relative flex h-full flex-col overflow-hidden rounded-2xl border border-steel-100 bg-white p-7 transition-all duration-500 hover:-translate-y-1 hover:border-steel-200 hover:shadow-[0_40px_70px_-30px_rgba(15,26,42,0.25)]">
                    <div className="flex items-start justify-between">
                      <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-steel-50 text-steel-900 transition-colors duration-500 group-hover:bg-steel-900 group-hover:text-white">
                        <Icon className="h-5 w-5" />
                      </div>
                      <span className="font-display text-3xl font-semibold text-steel-200">
                        {String(i + 1).padStart(2, "0")}
                      </span>
                    </div>
                    <h3 className="mt-6 font-display text-lg font-semibold text-steel-900">
                      {step.title}
                    </h3>
                    <p className="mt-3 text-sm leading-relaxed text-steel-600">
                      {step.description}
                    </p>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}