fix: make fleet inspection buttons functional with details modal and whatsapp integration

components/FleetSection.tsx

@@ -2,44 +2,16 @@
 
 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",
-  },
-];
+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">
@@ -55,9 +27,9 @@ export function FleetSection() {
       </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) => (
+        {FLEET_ITEMS.map((v, idx) => (
           <motion.div 
-            key={v.title}
+            key={v.name}
             initial={{ opacity: 0, x: 50 }}
             whileInView={{ opacity: 1, x: 0 }}
             transition={{ delay: idx * 0.1, duration: 0.6 }}
@@ -68,9 +40,12 @@ export function FleetSection() {
               <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} 
+                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.statusColor)}>
+              <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>
@@ -78,27 +53,41 @@ export function FleetSection() {
             <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>
+                  <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">
-                {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 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>
-              <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>
+             <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>