"use client";

import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

const VEHICLES = [
  {
    title: "Liebherr LTM 1100",
    category: "Mobil Teleskopik Vinç",
    specs: [
      { label: "Kapasite", value: "100 TON" },
      { label: "Bom Uzunluğu", value: "60 METRE" },
    ],
    status: "Mevcut",
    statusColor: "bg-primary text-on-primary",
    image: "https://lh3.googleusercontent.com/aida-public/AB6AXuDz5b4r2KouL9upv0olAupqoFkF2Irw10VTeLh8XSl4F94ujjrHJ6keKViHybvoJlR3RgL-WrvsCYDjKNuVYUdALEH7KEjvZmZm40mxJWzQGN_aFUEllY41CpcYxAmHjiyrkgTKgEh9qZuDQ62Pzi-sffDKM9dv8bNg3YWH-ypFworfKyQiaXgLS0wucMj9LpVlzzl2zXrKv6WTv8hJr986CWoKM8b1mTI8ajgq_2oF9vltwrfrZDT8LYEKtgGSmIM84AAlzqZXwMU",
  },
  {
    title: "Hiyap 75 Ton",
    category: "Kamyon Üstü Vinç",
    specs: [
      { label: "Kapasite", value: "75 TON" },
      { label: "Erişim", value: "35 METRE" },
    ],
    status: "Mevcut",
    statusColor: "bg-primary text-on-primary",
    image: "https://lh3.googleusercontent.com/aida-public/AB6AXuCTUgbJ7VOHrnV2PY8AX4lAxBfdbp3hP7HdMRv4RJsWYQv6_coiWlqlodtyBjta-2PoSZnOXc1pKQHpbZGS9_6VLIUPyZ-sUH15ENiBjf466dq7GpPBHpS1uqFXm44tK_ZJ0okneK2mtHwo5h459sPzZ5iXakBitbs70sI0X86VQm2dePia2r1weEXW6Znhn8pOcB_hwLybrmfyEhr-b47X20UbQrbSFp2WCIGZUv4IsAlgn775KDuQH96BvaSLC56kOZG8Q5S9Tu0",
  },
  {
    title: "Teleskopik Platform",
    category: "Yüksek İrtifa Erişimi",
    specs: [
      { label: "Yükseklik", value: "45 METRE" },
      { label: "Sepet Kapasitesi", value: "300 KG" },
    ],
    status: "Bakımda",
    statusColor: "bg-error-container text-white",
    image: "https://lh3.googleusercontent.com/aida-public/AB6AXuBfXE8_qXbdFXu-5NJjxR_il3lZOkzp6NaLTMMtNr_1_dO0ohKzutRHZLm3Rs3xuwheOE_PUWTDxIavnRfKcdCpASPX9AlxSuZFWaZKax5RWmgLnIBk-ojo_XghFLjC1ES1ACDK-PdB901GE3AxkMj-lWSFkbU8PaUhJ9XxizBHb4BVtvej64-5uXmm9e99Cax1_Xs8_Hm9L7uR8PRX5teGng9Q1gxbGbFCAQw5WG3cZrPESDEbj4osSFEwW8lokMlO0uB9xsaGZxw",
  },
];

export function FleetSection() {
  return (
    <section className="py-24 md:py-32 bg-surface-container-low overflow-hidden" id="Fleet">
      <div className="px-6 md:px-12 mb-16 md:mb-24 flex flex-col md:flex-row justify-between items-start md:items-end gap-8">
        <div>
          <h2 className="font-headline text-5xl md:text-8xl font-bold tracking-tighter text-stroke uppercase leading-none">Makine Parkuru</h2>
          <h3 className="font-headline text-3xl md:text-5xl font-bold text-white -mt-4 md:-mt-8">Modern ve Güçlü Filo</h3>
        </div>
        <div className="flex gap-2">
          <div className="h-1 w-12 bg-primary"></div>
          <div className="h-1 w-4 bg-primary/30"></div>
          <div className="h-1 w-4 bg-primary/30"></div>
        </div>
      </div>
      
      <div className="flex gap-6 md:gap-12 overflow-x-auto no-scrollbar px-6 md:px-12 pb-12 cursor-grab active:cursor-grabbing">
        {VEHICLES.map((v, idx) => (
          <motion.div 
            key={v.title}
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ delay: idx * 0.1, duration: 0.6 }}
            viewport={{ once: true }}
            className="min-w-[320px] md:min-w-[500px] bg-surface-container-lowest flex flex-col group shadow-2xl"
          >
            <div className="h-64 md:h-96 overflow-hidden relative">
              <img 
                className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000 group-hover:scale-105" 
                src={v.image} 
                alt={v.title} 
              />
              <div className={cn("absolute top-0 left-0 px-4 py-2 font-label text-[10px] font-bold uppercase tracking-widest", v.statusColor)}>
                {v.status}
              </div>
              <div className="absolute inset-0 bg-gradient-to-t from-surface-container-lowest via-transparent to-transparent opacity-60"></div>
            </div>
            <div className="p-8 md:p-12">
              <div className="flex justify-between items-start mb-8">
                <div>
                  <h4 className="font-headline text-2xl md:text-3xl font-bold text-white mb-2 uppercase tracking-tight">{v.title}</h4>
                  <span className="font-label text-xs text-primary uppercase tracking-[0.2em] font-bold">{v.category}</span>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-px bg-outline-variant/20">
                {v.specs.map(spec => (
                  <div key={spec.label} className="bg-surface-container-lowest p-6 transition-colors hover:bg-surface-container-low">
                    <span className="block font-label text-[10px] text-on-surface-variant uppercase mb-2 tracking-widest">{spec.label}</span>
                    <span className="font-headline font-bold text-xl md:text-2xl text-white">{spec.value}</span>
                  </div>
                ))}
              </div>
              <button className="w-full mt-8 py-4 font-headline font-bold uppercase tracking-widest text-xs border border-white/5 hover:bg-white hover:text-black transition-all">
                Teknik Katalog
              </button>
            </div>
          </motion.div>
        ))}
        {/* Visual cue for more items */}
        <div className="min-w-[100px] flex items-center justify-center">
             <span className="font-headline text-white/10 text-9xl font-black select-none">NEXT</span>
        </div>
      </div>

      <div className="px-6 md:px-12 mt-8 flex items-center gap-4">
        <span className="font-label text-[10px] uppercase tracking-widest text-on-surface-variant">Kaydırarak inceleyin</span>
        <div className="h-px flex-1 bg-white/5"></div>
      </div>
    </section>
  );
}