"use client";

import { motion } from "framer-motion";
import { Hammer, Truck, Building2 } from "lucide-react";
import { cn } from "@/lib/utils";

const SERVICES = [
  {
    id: "01",
    title: "Mobil Vinç",
    description: "Hızlı kurulum ve yüksek hareket kabiliyeti ile şantiye alanlarında esnek çözümler.",
    icon: Hammer,
    bg: "bg-surface-container",
  },
  {
    id: "02",
    title: "Ağır Nakliyat",
    description: "Standart dışı ölçülere sahip yüklerin özel ekipmanlarla güvenli taşımacılığı.",
    icon: Truck,
    bg: "bg-surface-container-high",
  },
  {
    id: "03",
    title: "Sepetli Platform",
    description: "Yüksek irtifa çalışmalarında personel güvenliğini ön plana çıkaran ekipmanlar.",
    icon: Building2,
    bg: "bg-surface-container-highest",
  },
];

export function ServicesPreview() {
  return (
    <section className="py-24 md:py-32 px-6 md:px-12 bg-surface" id="Services">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 md:mb-24 gap-8">
        <motion.div 
          initial={{ opacity: 0, x: -20 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          className="max-w-3xl"
        >
          <span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Hizmetlerimiz</span>
          <h2 className="font-headline text-4xl md:text-7xl font-bold tracking-tighter text-white leading-[0.9] text-balance">Yükünüz Ne Olursa Olsun, Güç Bizim İşimiz.</h2>
        </motion.div>
        <motion.div 
          initial={{ opacity: 0, x: 20 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          className="text-left md:text-right"
        >
          <p className="text-on-surface-variant font-body text-base md:text-lg max-w-sm">Mühendislik temelli yaklaşımımızla en zorlu projelerinizde profesyonel destek sağlıyoruz.</p>
        </motion.div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3">
        {SERVICES.map((service, index) => (
          <motion.div
            key={service.title}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1, duration: 0.6 }}
            viewport={{ once: true }}
            className={cn(
              "group relative aspect-square overflow-hidden p-8 md:p-16 transition-all duration-500",
              service.bg
            )}
          >
            <div className="relative z-10 h-full flex flex-col justify-between">
              <service.icon className="w-12 h-12 md:w-16 md:h-16 text-primary group-hover:scale-110 transition-transform duration-500" strokeWidth={1} />
              <div>
                <h3 className="font-headline text-2xl md:text-4xl font-bold mb-4 uppercase leading-none">{service.title}</h3>
                <p className="text-on-surface-variant text-sm md:text-base leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">{service.description}</p>
              </div>
            </div>
            
            {/* Number Background */}
            <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity pointer-events-none">
              <span className="font-headline text-[12rem] font-black leading-none">{service.id}</span>
            </div>

            {/* Hover Overlay */}
            <div className="absolute inset-0 bg-primary translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex flex-col items-center justify-center gap-6 p-8">
              <p className="text-on-primary text-center font-body font-medium leading-tight">Profesyonel operasyonel destek ve kiralama seçenekleri için.</p>
              <button className="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all">
                Detaylar
              </button>
            </div>
          </motion.div>
        ))}
      </div>
    </section>
  );
}