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

components/FleetList.tsx

@@ -3,6 +3,9 @@
 import { useState } from 'react';
 import Image from "next/image";
 import { cn } from "@/lib/utils";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Phone, MessageCircle } from "lucide-react";
+import { siteConfig } from "@/lib/data";
 
 interface FleetItem {
   name: string;
@@ -21,11 +24,17 @@ interface FleetListProps {
 
 export function FleetList({ items, categories }: FleetListProps) {
   const [activeCategory, setActiveCategory] = useState("Hepsi");
+  const [selectedItem, setSelectedItem] = useState<FleetItem | null>(null);
 
   const filteredItems = activeCategory === "Hepsi" 
     ? items 
     : items.filter(item => item.category === activeCategory);
 
+  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 (
     <>
       {/* Filter System */}
@@ -90,7 +99,10 @@ export function FleetList({ items, categories }: FleetListProps) {
                     <span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
                   </div>
                 </div>
-                <button className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300">
+                <button 
+                  onClick={() => setSelectedItem(item)}
+                  className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300"
+                >
                   İncele
                 </button>
               </div>
@@ -98,6 +110,84 @@ export function FleetList({ items, categories }: FleetListProps) {
           ))}
         </div>
       </section>
+
+      {/* Detail Modal */}
+      <AnimatePresence>
+        {selectedItem && (
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8">
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setSelectedItem(null)}
+              className="absolute inset-0 bg-background/95 backdrop-blur-sm"
+            />
+            <motion.div 
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 20 }}
+              className="relative w-full max-w-4xl bg-surface-container-low border border-outline-variant/20 overflow-hidden shadow-2xl"
+            >
+              <button 
+                onClick={() => setSelectedItem(null)}
+                className="absolute top-6 right-6 z-10 p-2 bg-background/50 hover:bg-primary hover:text-on-primary transition-colors text-white"
+              >
+                <X className="w-6 h-6" />
+              </button>
+              
+              <div className="grid grid-cols-1 lg:grid-cols-2">
+                <div className="relative aspect-[4/3] lg:aspect-auto h-full min-h-[300px]">
+                  <Image 
+                    src={selectedItem.image}
+                    alt={selectedItem.name}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+                <div className="p-8 md:p-12 flex flex-col">
+                  <span className="text-primary font-headline text-xs font-bold uppercase tracking-[0.3em] mb-4">
+                    {selectedItem.category}
+                  </span>
+                  <h2 className="text-4xl md:text-5xl font-black text-on-surface uppercase tracking-tighter mb-6">
+                    {selectedItem.name}
+                  </h2>
+                  <p className="text-on-surface-variant text-lg leading-relaxed mb-8">
+                    {selectedItem.description}
+                  </p>
+                  
+                  <div className="grid grid-cols-2 gap-px bg-outline-variant/20 mb-12">
+                    <div className="bg-surface-container-low p-6">
+                      <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
+                      <span className="text-on-surface font-headline font-bold text-2xl">{selectedItem.capacity}</span>
+                    </div>
+                    <div className="bg-surface-container-low p-6">
+                      <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
+                      <span className="text-on-surface font-headline font-bold text-2xl">{selectedItem.reach}</span>
+                    </div>
+                  </div>
+
+                  <div className="mt-auto flex flex-col sm:flex-row gap-4">
+                    <button 
+                      onClick={() => handleWhatsApp(selectedItem.name)}
+                      className="flex-1 bg-primary text-on-primary px-8 py-5 font-headline font-bold uppercase tracking-widest flex items-center justify-center gap-3 hover:brightness-110 transition-all"
+                    >
+                      <MessageCircle className="w-6 h-6" />
+                      Hemen Teklif Al
+                    </button>
+                    <a 
+                      href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
+                      className="flex-1 border border-outline-variant/30 text-white px-8 py-5 font-headline font-bold uppercase tracking-widest flex items-center justify-center gap-3 hover:bg-white/5 transition-all"
+                    >
+                      <Phone className="w-5 h-5" />
+                      Bizi Arayın
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
     </>
   );
 }

components/FleetSection.tsx

@@ -2,44 +2,16 @@
 
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
-
+import { FLEET_ITEMS, siteConfig } from "@/lib/data";
-const VEHICLES = [
+import Link from "next/link";
-  {
+import { MessageCircle } from "lucide-react";
-    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() {
+  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 className="bg-surface-container-lowest p-6 transition-colors hover:bg-surface-container-low">
-                  <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">Kapasite</span>
-                    <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">{v.capacity}</span>
-                    <span className="font-headline font-bold text-xl md:text-2xl text-white">{spec.value}</span>
+                </div>
-                  </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>