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

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

@@ -1,165 +1,385 @@
 'use client';
 
-import { ThemeProvider } from '@/components/theme/ThemeProvider';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
 import { useParams } from 'next/navigation';
 
-const navItems = [
-  { name: 'Home', id: '/' },
-  { name: 'Browse Cars', id: '/cars' },
-  { name: 'Specifications', id: '/specifications' },
-  { name: 'Compare', id: '/compare' },
-  { name: 'Database', id: '/database' },
-];
+interface Car {
+  id: string;
+  make: string;
+  model: string;
+  year: number;
+  price: number;
+  image: string;
+  transmission: string;
+  fuel: string;
+  mileage: number;
+  bodyType?: string;
+  color?: string;
+  vin?: string;
+  engineSize?: number;
+  horsepower?: number;
+  torque?: number;
+  topSpeed?: number;
+  acceleration?: number;
+  mpg?: number;
+  seating?: number;
+  luggage?: number;
+  wheelbase?: number;
+  length?: number;
+  width?: number;
+  height?: number;
+  weight?: number;
+  fuelCapacity?: number;
+  safetyRating?: number;
+  features?: string[];
+}
 
-const carDatabase: Record<string, any> = {
+const carsDatabase: Record<string, Car> = {
   '1': {
-    name: 'Tesla Model S',
-    price: '$73,990',
-    rating: 5,
-    description: 'The Tesla Model S is a high-performance sedan with exceptional acceleration, range, and technology. Features a sleek design and advanced autonomous capabilities.',
-    images: [
-      { src: '/car-1-front.jpg', alt: 'Tesla Model S Front' },
-      { src: '/car-1-side.jpg', alt: 'Tesla Model S Side' },
-      { src: '/car-1-back.jpg', alt: 'Tesla Model S Back' },
+    id: '1',
+    make: 'Toyota',
+    model: 'Camry',
+    year: 2024,
+    price: 32000,
+    image: '/car-camry.jpg',
+    transmission: 'Automatic',
+    fuel: 'Hybrid',
+    mileage: 0,
+    bodyType: 'Sedan',
+    color: 'Pearl White',
+    vin: 'T123456789ABC',
+    engineSize: 2.5,
+    horsepower: 208,
+    torque: 180,
+    topSpeed: 112,
+    acceleration: 8.2,
+    mpg: 52,
+    seating: 5,
+    luggage: 15.1,
+    wheelbase: 112.2,
+    length: 191.1,
+    width: 71.7,
+    height: 57.5,
+    weight: 3415,
+    fuelCapacity: 14.5,
+    safetyRating: 5,
+    features: [
+      'Hybrid Engine',
+      'Toyota Safety Sense',
+      'Adaptive Cruise Control',
+      'Lane Departure Alert',
+      'Bluetooth Connectivity',
+      'Touchscreen Display',
+      'Heated Seats',
+      'Power Windows',
     ],
-    variants: [
-      { label: 'Drive Type', options: ['Dual Motor AWD', 'Tri Motor'], selected: 'Dual Motor AWD', onChange: () => {} },
-      { label: 'Range', options: ['405 miles', '405+ miles'], selected: '405 miles', onChange: () => {} },
-      { label: 'Color', options: ['Pearl White', 'Solid Black', 'Midnight Silver', 'Deep Blue', 'Ultra Violet'], selected: 'Pearl White', onChange: () => {} },
-    ],
-    quantity: { label: 'Quantity', options: ['1', '2', '3'], selected: '1', onChange: () => {} },
   },
   '2': {
-    name: 'BMW M440i xDrive',
-    price: '$61,550',
-    rating: 5,
-    description: 'The BMW M440i xDrive combines luxury and performance with a powerful turbocharged engine, premium interior, and cutting-edge technology.',
-    images: [
-      { src: '/car-2-front.jpg', alt: 'BMW M440i Front' },
-      { src: '/car-2-side.jpg', alt: 'BMW M440i Side' },
-      { src: '/car-2-back.jpg', alt: 'BMW M440i Back' },
+    id: '2',
+    make: 'Honda',
+    model: 'Civic',
+    year: 2024,
+    price: 28000,
+    image: '/car-civic.jpg',
+    transmission: 'Manual',
+    fuel: 'Gasoline',
+    mileage: 0,
+    bodyType: 'Sedan',
+    color: 'Sonic Gray',
+    vin: 'H987654321DEF',
+    engineSize: 2.0,
+    horsepower: 158,
+    torque: 138,
+    topSpeed: 125,
+    acceleration: 8.5,
+    mpg: 32,
+    seating: 5,
+    luggage: 12.3,
+    wheelbase: 106.3,
+    length: 182.2,
+    width: 70.8,
+    height: 56.0,
+    weight: 3040,
+    fuelCapacity: 12.3,
+    safetyRating: 5,
+    features: [
+      'Honda Sensing',
+      'Collision Mitigation Braking',
+      'Road Departure Mitigation',
+      'Apple CarPlay',
+      'Android Auto',
+      'Rearview Camera',
+      'Sunroof',
+      'Alloy Wheels',
     ],
-    variants: [
-      { label: 'Drive Type', options: ['xDrive'], selected: 'xDrive', onChange: () => {} },
-      { label: 'Engine', options: ['3.0L Turbo', '4.4L Twin Turbo'], selected: '3.0L Turbo', onChange: () => {} },
-      { label: 'Color', options: ['Alpine White', 'Jet Black', 'Oxide Grey', 'BMW Blue'], selected: 'Alpine White', onChange: () => {} },
-    ],
-    quantity: { label: 'Quantity', options: ['1', '2', '3'], selected: '1', onChange: () => {} },
   },
   '3': {
-    name: 'Mercedes-Benz C-Class',
-    price: '$45,850',
-    rating: 4,
-    description: 'The Mercedes-Benz C-Class offers refined luxury, dynamic performance, and sophisticated technology in a compact sedan format.',
-    images: [
-      { src: '/car-3-front.jpg', alt: 'Mercedes-Benz C-Class Front' },
-      { src: '/car-3-side.jpg', alt: 'Mercedes-Benz C-Class Side' },
-      { src: '/car-3-back.jpg', alt: 'Mercedes-Benz C-Class Back' },
+    id: '3',
+    make: 'BMW',
+    model: '3 Series',
+    year: 2024,
+    price: 45000,
+    image: '/car-bmw.jpg',
+    transmission: 'Automatic',
+    fuel: 'Diesel',
+    mileage: 0,
+    bodyType: 'Sedan',
+    color: 'Jet Black',
+    vin: 'B456789012GHI',
+    engineSize: 2.0,
+    horsepower: 190,
+    torque: 295,
+    topSpeed: 130,
+    acceleration: 7.2,
+    mpg: 45,
+    seating: 5,
+    luggage: 13.6,
+    wheelbase: 112.8,
+    length: 184.4,
+    width: 71.7,
+    height: 56.3,
+    weight: 3550,
+    fuelCapacity: 13.2,
+    safetyRating: 5,
+    features: [
+      'BMW iDrive',
+      'Adaptive Headlights',
+      'Premium Sound System',
+      'Panoramic Sunroof',
+      'Power Seats',
+      'Climate Control',
+      'Gesture Control',
+      'Head-Up Display',
     ],
-    variants: [
-      { label: 'Engine', options: ['2.0L Turbo', '3.0L Turbo'], selected: '2.0L Turbo', onChange: () => {} },
-      { label: 'Transmission', options: ['9-Speed Automatic'], selected: '9-Speed Automatic', onChange: () => {} },
-      { label: 'Color', options: ['Diamond White', 'Obsidian Black', 'Graphite Grey', 'Cavansite Blue'], selected: 'Diamond White', onChange: () => {} },
-    ],
-    quantity: { label: 'Quantity', options: ['1', '2', '3'], selected: '1', onChange: () => {} },
   },
 };
 
-const footerColumns = [
-  {
-    title: 'Browse',
-    items: [
-      { label: 'All Cars', href: '/cars' },
-      { label: 'By Make', href: '/makes' },
-      { label: 'By Year', href: '/years' },
-      { label: 'New Releases', href: '/new' },
-    ],
-  },
-  {
-    title: 'Tools',
-    items: [
-      { label: 'Compare Vehicles', href: '/compare' },
-      { label: 'Search Database', href: '/database' },
-      { label: 'Specifications', href: '/specifications' },
-      { label: 'Reviews', href: '/reviews' },
-    ],
-  },
-  {
-    title: 'Company',
-    items: [
-      { label: 'About Us', href: '/about' },
-      { label: 'Contact', href: '/contact' },
-      { label: 'Blog', href: '/blog' },
-      { label: 'Careers', href: '/careers' },
-    ],
-  },
-  {
-    title: 'Legal',
-    items: [
-      { label: 'Privacy Policy', href: '/privacy' },
-      { label: 'Terms of Service', href: '/terms' },
-      { label: 'Cookie Policy', href: '/cookies' },
-      { label: 'Disclaimer', href: '/disclaimer' },
-    ],
-  },
-];
-
 export default function CarDetailPage() {
   const params = useParams();
-  const carId = params?.id as string;
-  const car = carDatabase[carId] || carDatabase['1'];
-  const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
-  const [quantity, setQuantity] = useState('1');
+  const [car, setCar] = useState<Car | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const id = params.id as string;
+    const carData = carsDatabase[id];
+    if (carData) {
+      setCar(carData);
+    }
+    setLoading(false);
+  }, [params.id]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center">
+        <div className="text-2xl text-gray-600">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!car) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8">
+        <div className="max-w-7xl mx-auto text-center py-12">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">Car Not Found</h1>
+          <p className="text-xl text-gray-600 mb-8">The car you're looking for doesn't exist.</p>
+          <Link href="/">
+            <button className="bg-blue-600 text-white font-semibold py-2 px-6 rounded-lg hover:bg-blue-700 transition-colors duration-200">
+              Back to Cars
+            </button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <ThemeProvider
-      defaultButtonVariant="icon-arrow"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
-      contentWidth="mediumLarge"
-      sizing="large"
-      background="aurora"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
-    >
-      <NavbarStyleApple navItems={navItems} brandName="CarDB" />
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <Link href="/">
+            <button className="text-blue-600 hover:text-blue-700 font-semibold mb-4">
+              ← Back to Cars
+            </button>
+          </Link>
+          <h1 className="text-5xl font-bold text-gray-900">
+            {car.year} {car.make} {car.model}
+          </h1>
+        </div>
 
-      <div id="car-detail" data-section="car-detail" className="pt-24 pb-20">
-        <ProductDetailCard
-          layout="page"
-          name={car.name}
-          price={car.price}
-          rating={car.rating}
-          description={car.description}
-          images={car.images}
-          variants={car.variants.map((v: any) => ({
-            ...v,
-            onChange: (value: string) => setSelectedVariants({ ...selectedVariants, [v.label]: value }),
-          }))}
-          quantity={{
-            ...car.quantity,
-            onChange: (value: string) => setQuantity(value),
-          }}
-          buttons={[
-            { text: 'Request Information', href: '/contact' },
-            { text: 'Schedule Test Drive', onClick: () => alert('Test drive scheduled') },
-          ]}
-        />
-      </div>
+        {/* Main Content */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+          {/* Image and Price Section */}
+          <div className="lg:col-span-1">
+            <div className="bg-white rounded-lg shadow-lg overflow-hidden sticky top-8">
+              <div className="h-64 bg-gray-200 flex items-center justify-center">
+                <div className="text-gray-500 text-center">
+                  <div className="text-sm">Car Image</div>
+                  <div className="text-xs text-gray-400">Main View</div>
+                </div>
+              </div>
+              <div className="p-6">
+                <div className="mb-6">
+                  <p className="text-3xl font-bold text-gray-900 mb-2">
+                    ${car.price.toLocaleString()}
+                  </p>
+                  <p className="text-sm text-gray-600 mb-4">Starting Price</p>
+                  <button className="w-full bg-blue-600 text-white font-semibold py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors duration-200 mb-2">
+                    Get Quote
+                  </button>
+                  <button className="w-full bg-gray-200 text-gray-900 font-semibold py-3 px-4 rounded-lg hover:bg-gray-300 transition-colors duration-200">
+                    Schedule Test Drive
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
 
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={footerColumns}
-          bottomLeftText="© 2025 Universal Car Database. All rights reserved."
-          bottomRightText="Made with precision and passion"
-        />
+          {/* Details Section */}
+          <div className="lg:col-span-2 space-y-8">
+            {/* Quick Facts */}
+            <div className="bg-white rounded-lg shadow-lg p-8">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6">Quick Facts</h2>
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Body Type</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.bodyType || 'N/A'}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Transmission</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.transmission}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Fuel Type</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.fuel}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Seating</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.seating || 'N/A'} Seats</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Color</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.color || 'N/A'}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Safety Rating</p>
+                  <p className="text-lg font-semibold text-gray-900">
+                    {car.safetyRating ? `${car.safetyRating}/5 ⭐` : 'N/A'}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Engine Specifications */}
+            <div className="bg-white rounded-lg shadow-lg p-8">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6">Engine Specifications</h2>
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Engine Size</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.engineSize || 'N/A'} L</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Horsepower</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.horsepower || 'N/A'} hp</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Torque</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.torque || 'N/A'} lb-ft</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Top Speed</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.topSpeed || 'N/A'} mph</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">0-60 Acceleration</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.acceleration || 'N/A'} sec</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Fuel Efficiency</p>
+                  <p className="text-lg font-semibold text-gray-900">{car.mpg || 'N/A'} MPG</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Dimensions and Capacity */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+          <div className="bg-white rounded-lg shadow-lg p-8">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Dimensions</h2>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <p className="text-sm text-gray-600 mb-1">Length</p>
+                <p className="text-lg font-semibold text-gray-900">{car.length || 'N/A'} in</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600 mb-1">Width</p>
+                <p className="text-lg font-semibold text-gray-900">{car.width || 'N/A'} in</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600 mb-1">Height</p>
+                <p className="text-lg font-semibold text-gray-900">{car.height || 'N/A'} in</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600 mb-1">Wheelbase</p>
+                <p className="text-lg font-semibold text-gray-900">{car.wheelbase || 'N/A'} in</p>
+              </div>
+              <div className="col-span-2">
+                <p className="text-sm text-gray-600 mb-1">Weight</p>
+                <p className="text-lg font-semibold text-gray-900">{car.weight || 'N/A'} lbs</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-lg shadow-lg p-8">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Capacity</h2>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <p className="text-sm text-gray-600 mb-1">Luggage Space</p>
+                <p className="text-lg font-semibold text-gray-900">{car.luggage || 'N/A'} cu ft</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600 mb-1">Fuel Tank</p>
+                <p className="text-lg font-semibold text-gray-900">{car.fuelCapacity || 'N/A'} gal</p>
+              </div>
+              <div className="col-span-2">
+                <p className="text-sm text-gray-600 mb-1">VIN</p>
+                <p className="text-lg font-semibold text-gray-900 break-all">{car.vin || 'N/A'}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Features */}
+        {car.features && car.features.length > 0 && (
+          <div className="bg-white rounded-lg shadow-lg p-8 mb-8">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Features & Amenities</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {car.features.map((feature, index) => (
+                <div key={index} className="flex items-center p-3 bg-blue-50 rounded-lg">
+                  <span className="text-blue-600 mr-3">✓</span>
+                  <p className="text-gray-900 font-medium">{feature}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* CTA Section */}
+        <div className="bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg shadow-lg p-8 text-white text-center mb-8">
+          <h3 className="text-2xl font-bold mb-2">Interested in this vehicle?</h3>
+          <p className="text-blue-100 mb-6">Contact our sales team to schedule a test drive or request more information.</p>
+          <div className="flex flex-col md:flex-row gap-4 justify-center">
+            <button className="bg-white text-blue-600 font-semibold py-3 px-8 rounded-lg hover:bg-blue-50 transition-colors duration-200">
+              Contact Sales
+            </button>
+            <button className="bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg hover:bg-blue-900 transition-colors duration-200 border border-blue-400">
+              View Similar Models
+            </button>
+          </div>
+        </div>
       </div>
-    </ThemeProvider>
+    </div>
   );
 }