'use client';

import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "lucide-react";

const SERVICES = [
  {
    title: "Ağır Nakliyat",
    description: "Gabari dışı yüklerin özel low-bed araçlarla taşınması.",
    image: "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?q=80&w=2070&auto=format&fit=crop"
  },
  {
    title: "Mobil Vinç",
    description: "300-500 ton kapasiteli teleskopik vinç çözümleri.",
    image: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
  },
  {
    title: "Sepetli Platform",
    description: "75 metreye kadar yüksek irtifa çalışma alanları.",
    image: "https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop"
  }
];

export function ServicesPreview() {
  return (
    <section className="py-24 bg-surface text-on-surface">
      <div className="max-w-7xl mx-auto px-6 md:px-12">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16">
          <div className="max-w-2xl">
            <span className="font-label text-xs uppercase tracking-[0.4em] text-primary font-bold mb-4 block">Uzmanlık Alanlarımız</span>
            <h2 className="font-headline text-5xl md:text-8xl font-black uppercase leading-none tracking-tighter">
              Büyük Yüklerin <br/> <span className="text-primary">Kusursuz</span> Taşıyıcısı
            </h2>
          </div>
          <Link 
            href="/hizmetler"
            className="group flex items-center gap-4 text-on-surface font-headline font-bold uppercase tracking-widest text-sm"
          >
            Tüm Hizmetler 
            <div className="bg-primary p-4 text-on-primary group-hover:translate-x-4 transition-transform">
              <ArrowRight size={20} />
            </div>
          </Link>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-px bg-outline-variant/20">
          {SERVICES.map((service, idx) => (
            <motion.div
              key={service.title}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: idx * 0.1 }}
              viewport={{ once: true }}
              className="group relative h-[600px] overflow-hidden flex flex-col justify-end p-12"
            >
              <Image 
                src={service.image}
                alt={service.title}
                fill
                sizes="(max-width: 768px) 100vw, 33vw"
                className="object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-1000 z-0"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent z-10" />
              
              <div className="relative z-20">
                <h3 className="font-headline text-4xl font-black text-white uppercase mb-4 tracking-tighter">{service.title}</h3>
                <p className="font-body text-on-surface-variant mb-8 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500">
                  {service.description}
                </p>
                <Link 
                  href="/hizmetler"
                  className="bg-primary text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all"
                >
                  Detaylar
                </Link>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}