"use client";

import { motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { FLEET_ITEMS, siteConfig } from "@/lib/data";
import Link from "next/link";
import { MessageCircle } from "lucide-react";

export function FleetSection() {
  const handleWhatsApp = (itemName: string) => {
    const message = encodeURIComponent(`Merhaba, ${itemName} hakkında bilgi almak istiyorum.`);
    window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
  };

  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">
        {FLEET_ITEMS.map((v, idx) => (
          <motion.div 
            key={v.name}
            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.name} 
              />
              <div className={cn(
                "absolute top-0 left-0 px-4 py-2 font-label text-[10px] font-bold uppercase tracking-widest",
                v.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
              )}>
                {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.name}</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">
                <div 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">Kapasite</span>
                  <span className="font-headline font-bold text-xl md:text-2xl text-white">{v.capacity}</span>
                </div>
                <div 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">Erişim</span>
                  <span className="font-headline font-bold text-xl md:text-2xl text-white">{v.reach}</span>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4 mt-8">
                <Link 
                  href="/filomuz"
                  className="py-4 font-headline font-bold uppercase tracking-widest text-[10px] border border-white/5 hover:bg-white/10 text-center transition-all flex items-center justify-center"
                >
                  Detayları Gör
                </Link>
                <button 
                  onClick={() => handleWhatsApp(v.name)}
                  className="py-4 font-headline font-bold uppercase tracking-widest text-[10px] bg-primary text-on-primary hover:brightness-110 transition-all flex items-center justify-center gap-2"
                >
                  <MessageCircle className="w-4 h-4" />
                  Teklif Al
                </button>
              </div>
            </div>
          </motion.div>
        ))}
        {/* Visual cue for more items */}
        <div className="min-w-[100px] flex items-center justify-center">
             <Link href="/filomuz" className="font-headline text-white/10 hover:text-primary transition-colors text-9xl font-black select-none cursor-pointer">NEXT</Link>
        </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>
  );
}