Add src/app/cars/[id]/page.tsx

src/app/cars/[id]/page.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { ChevronLeft, ChevronRight, Heart, Share2, MapPin, Fuel, Gauge, Calendar } from "lucide-react";
+
+interface CarDetail {
+  id: string;
+  name: string;
+  price: string;
+  rating: number;
+  description: string;
+  images: Array<{ src: string; alt: string }>;
+  specs: {
+    year: string;
+    mileage: string;
+    transmission: string;
+    fuelType: string;
+    engine: string;
+    color: string;
+  };
+  features: string[];
+  variants?: Array<{
+    label: string;
+    options: string[];
+    selected: string;
+  }>;
+}
+
+const mockCarData: { [key: string]: CarDetail } = {
+  "1": {
+    id: "1",    name: "2024 Tesla Model S",    price: "$89,990",    rating: 5,
+    description: "Experience the future of electric vehicles with cutting-edge technology and exceptional performance.",    images: [
+      { src: "https://images.unsplash.com/photo-1560958089-b8a63dd8b50b?w=800", alt: "Tesla Model S Front" },
+      { src: "https://images.unsplash.com/photo-1516814050195-3a03d82e059d?w=800", alt: "Tesla Model S Side" },
+      { src: "https://images.unsplash.com/photo-1552820728-8ac41f1ce891?w=800", alt: "Tesla Model S Interior" },
+    ],
+    specs: {
+      year: "2024",      mileage: "5,200 miles",      transmission: "Automatic",      fuelType: "Electric",      engine: "Dual Motor",      color: "Solid Black"},
+    features: [
+      "Autopilot Advanced",      "Premium Audio System",      "Panoramic Sunroof",      "19-inch Wheel Set",      "Premium Interior",      "Over-the-Air Updates",      "Supercharger Access",      "Enhanced Autopilot"],
+  },
+  "2": {
+    id: "2",    name: "2024 BMW M440i xDrive",    price: "$67,500",    rating: 5,
+    description: "German engineering meets performance with the new M440i xDrive.",    images: [
+      { src: "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=800", alt: "BMW M440i Front" },
+      { src: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800", alt: "BMW M440i Side" },
+      { src: "https://images.unsplash.com/photo-1533473359331-35b3c3f0f038?w=800", alt: "BMW M440i Interior" },
+    ],
+    specs: {
+      year: "2024",      mileage: "8,100 miles",      transmission: "Automatic",      fuelType: "Gasoline",      engine: "3.0L Twin-Turbo",      color: "Alpine White"},
+    features: [
+      "M Sport Brake Package",      "Premium Sound System",      "Adaptive M Suspension",      "20-inch M Light Alloy Wheels",      "Harman Kardon Audio",      "Gesture Control",      "Head-Up Display",      "Premium Leather Interior"],
+  },
+};
+
+export default function CarDetailPage() {
+  const params = useParams();
+  const carId = params.id as string;
+  const car = mockCarData[carId];
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isFavorited, setIsFavorited] = useState(false);
+
+  if (!car) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Car Not Found</h1>
+          <p className="text-gray-600 mb-8">The car you're looking for doesn't exist.</p>
+          <a href="/" className="px-6 py-3 bg-accent text-white rounded-lg">Back to Home</a>
+        </div>
+      </div>
+    );
+  }
+
+  const nextImage = () => {
+    setCurrentImageIndex((prev) => (prev + 1) % car.images.length);
+  };
+
+  const prevImage = () => {
+    setCurrentImageIndex((prev) => (prev - 1 + car.images.length) % car.images.length);
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-6xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <a href="/" className="text-accent hover:underline mb-4 inline-block">← Back</a>
+          <h1 className="text-4xl font-bold mb-2">{car.name}</h1>
+          <p className="text-xl text-accent font-semibold">{car.price}</p>
+        </div>
+
+        {/* Image Gallery */}
+        <div className="mb-12">
+          <div className="relative bg-card rounded-lg overflow-hidden mb-6">
+            <div className="aspect-video flex items-center justify-center bg-gray-100 relative">
+              <img
+                src={car.images[currentImageIndex].src}
+                alt={car.images[currentImageIndex].alt}
+                className="w-full h-full object-cover"
+              />
+              <button
+                onClick={() => setIsFavorited(!isFavorited)}
+                className="absolute top-4 right-4 p-3 bg-white rounded-full shadow-lg hover:bg-gray-100 transition"
+                aria-label="Add to favorites"
+              >
+                <Heart
+                  size={24}
+                  className={isFavorited ? "fill-red-500 text-red-500" : "text-gray-600"}
+                />
+              </button>
+            </div>
+
+            {/* Navigation Buttons */}
+            {car.images.length > 1 && (
+              <>
+                <button
+                  onClick={prevImage}
+                  className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full transition"
+                  aria-label="Previous image"
+                >
+                  <ChevronLeft size={24} />
+                </button>
+                <button
+                  onClick={nextImage}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full transition"
+                  aria-label="Next image"
+                >
+                  <ChevronRight size={24} />
+                </button>
+              </>
+            )}
+
+            {/* Image Counter */}
+            <div className="absolute bottom-4 right-4 bg-black/60 text-white px-3 py-1 rounded-full text-sm">
+              {currentImageIndex + 1} / {car.images.length}
+            </div>
+          </div>
+
+          {/* Thumbnail Gallery */}
+          {car.images.length > 1 && (
+            <div className="flex gap-3 overflow-x-auto pb-2">
+              {car.images.map((image, index) => (
+                <button
+                  key={index}
+                  onClick={() => setCurrentImageIndex(index)}
+                  className={`flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border-2 transition ${
+                    index === currentImageIndex ? "border-accent" : "border-gray-200"
+                  }`}
+                >
+                  <img src={image.src} alt={image.alt} className="w-full h-full object-cover" />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-12">
+          {/* Left Column - Specs & Features */}
+          <div>
+            {/* Description */}
+            <div className="mb-8">
+              <h2 className="text-2xl font-bold mb-4">Overview</h2>
+              <p className="text-gray-600 mb-6">{car.description}</p>
+            </div>
+
+            {/* Key Specifications */}
+            <div className="mb-8">
+              <h2 className="text-2xl font-bold mb-6">Key Specifications</h2>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="bg-card p-4 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Calendar size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Year</span>
+                  </div>
+                  <p className="font-semibold">{car.specs.year}</p>
+                </div>
+                <div className="bg-card p-4 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Gauge size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Mileage</span>
+                  </div>
+                  <p className="font-semibold">{car.specs.mileage}</p>
+                </div>
+                <div className="bg-card p-4 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Fuel size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Fuel Type</span>
+                  </div>
+                  <p className="font-semibold">{car.specs.fuelType}</p>
+                </div>
+                <div className="bg-card p-4 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <MapPin size={20} className="text-accent" />
+                    <span className="text-sm text-gray-600">Transmission</span>
+                  </div>
+                  <p className="font-semibold">{car.specs.transmission}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Additional Specs */}
+            <div className="bg-card p-6 rounded-lg mb-8">
+              <h3 className="text-lg font-bold mb-4">Additional Details</h3>
+              <div className="space-y-3">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Engine:</span>
+                  <span className="font-semibold">{car.specs.engine}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Color:</span>
+                  <span className="font-semibold">{car.specs.color}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column - Features & CTA */}
+          <div>
+            {/* Features */}
+            <div className="mb-8">
+              <h2 className="text-2xl font-bold mb-6">Features & Amenities</h2>
+              <div className="grid grid-cols-2 gap-3">
+                {car.features.map((feature, index) => (
+                  <div key={index} className="flex items-center gap-2 p-3 bg-card rounded-lg">
+                    <div className="w-5 h-5 rounded-full bg-accent flex items-center justify-center flex-shrink-0">
+                      <span className="text-white text-sm">✓</span>
+                    </div>
+                    <span className="text-sm">{feature}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Call to Action */}
+            <div className="sticky bottom-0 md:static bg-background space-y-4 p-4 md:p-0 -mx-4 md:mx-0 md:bg-transparent">
+              <button className="w-full bg-accent text-white font-semibold py-4 rounded-lg hover:bg-accent/90 transition">
+                Request Information
+              </button>
+              <button className="w-full border-2 border-accent text-accent font-semibold py-4 rounded-lg hover:bg-accent/5 transition flex items-center justify-center gap-2">
+                <Share2 size={20} />
+                Share Vehicle
+              </button>
+              <button className="w-full bg-card text-foreground font-semibold py-4 rounded-lg hover:bg-gray-100 transition">
+                View Similar Vehicles
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Related Section */}
+        <div className="mt-16 pt-16 border-t">
+          <h2 className="text-3xl font-bold mb-8">Compare Similar Vehicles</h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="bg-card rounded-lg overflow-hidden hover:shadow-lg transition">
+                <div className="aspect-video bg-gray-200"></div>
+                <div className="p-4">
+                  <h3 className="font-bold text-lg mb-2">Similar Model {i}</h3>
+                  <p className="text-accent font-semibold">$XX,XXX</p>
+                  <a href="#" className="mt-4 block text-accent hover:underline font-semibold">
+                    View Details →
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}