"use client";

import Image from "next/image";
import Link from "next/link";
import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import {
  Scissors,
  Settings,
  Hammer,
  Cog,
  Building2,
  Truck,
  ArrowUpRight,
} from "lucide-react";
import { SectionHeading } from "@/components/ui/section-heading";
import { useLanguage } from "@/components/language-provider";

const icons = [Scissors, Settings, Hammer, Cog, Building2, Truck];
const serviceIds = [
  "cnc-turning-milling",
  "drilling-grinding-welding",
  "material-expertise",
  "cutting-forming",
  "construction-engineering",
  "logistics",
];

export function ServicesSection() {
  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%"]);

  return (
    <section
      ref={ref}
      id="services"
      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/slika4.webp"
          alt=""
          fill
          sizes="100vw"
          className="object-cover opacity-[0.06]"
        />
      </motion.div>

      <div
        aria-hidden
        className="pointer-events-none absolute right-0 top-1/4 -z-10 h-[500px] w-[500px] rounded-full bg-steel-100/40 blur-3xl"
      />

      <div className="container-wide relative">
        <div className="flex flex-col items-start justify-between gap-8 md:flex-row md:items-end">
          <SectionHeading
            eyebrow={t.services.eyebrow}
            title={t.services.title}
            description={t.services.description}
          />
          <Link
            href="/services"
            className="hidden md:inline-flex items-center gap-2 text-sm font-semibold text-steel-900 hover:gap-3 transition-all"
          >
            {t.services.viewAll}
            <ArrowUpRight className="h-4 w-4" />
          </Link>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {t.services.items.map((service, i) => (
            <ServiceCard
              key={service.title}
              title={service.title}
              description={service.description}
              href={`/services#${serviceIds[i]}`}
              icon={icons[i]}
              learnMore={t.services.learnMore}
              index={i}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({
  title,
  description,
  href,
  icon: Icon,
  learnMore,
  index,
}: {
  title: string;
  description: string;
  href: string;
  icon: typeof Scissors;
  learnMore: string;
  index: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-80px" }}
      transition={{ duration: 0.6, delay: (index % 3) * 0.08, ease: [0.22, 1, 0.36, 1] }}
    >
      <Link
        href={href}
        className="group 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.3)]"
      >
        {/* Gradient hover bg */}
        <div
          aria-hidden
          className="absolute inset-0 bg-gradient-to-br from-steel-50 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
        />
        {/* Soft glow on hover */}
        <div
          aria-hidden
          className="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-steel-900/[0.04] blur-2xl opacity-0 transition-opacity duration-500 group-hover:opacity-100"
        />

        <div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-xl bg-steel-900 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
          <Icon className="h-5 w-5" />
        </div>
        <h3 className="relative z-10 mt-6 font-display text-lg font-semibold text-steel-900">
          {title}
        </h3>
        <p className="relative z-10 mt-3 text-sm leading-relaxed text-steel-600">
          {description}
        </p>
        <div className="relative z-10 mt-6 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-steel-900">
          {learnMore}
          <ArrowUpRight className="h-3.5 w-3.5 transition-transform duration-500 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
        </div>
      </Link>
    </motion.div>
  );
}