Enviar arquivos para "src/app/cars/[id]"

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

@@ -0,0 +1,195 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const CarDetailsPage = () => {
+  // Dados de exemplo (depois virão do backend)
+  const car = {
+    id: 1,
+    name: 'BMW M4 2024',
+    images: [
+      '/api/placeholder/800/400',
+      '/api/placeholder/800/400',
+      '/api/placeholder/800/400',
+      '/api/placeholder/800/400'
+    ],
+    technical: {
+      engine: {
+        layout: 'Inline',
+        volume: '3 L',
+        type: 'RWD',
+        power: '374 hp',
+        powerKW: '275 kW',
+        torque: '369',
+        compression: '10.2:1'
+      },
+      performance: {
+        topSpeed: '155 mph',
+        acceleration: '4.7 s'
+      },
+      transmission: {
+        type: 'Automatic',
+        gears: '8'
+      }
+    },
+    extras: [
+      'ABS',
+      'Auxiliary heating',
+      'Bluetooth',
+      'ESP',
+      'Full LED headlights',
+      'Monitoring system',
+      'Nitro',
+      'Storage package',
+      'Turbo-engine'
+    ]
+  };
+
+  const [currentImage, setCurrentImage] = React.useState(0);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center">
+            <span className="text-gray-500">LOGO</span>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        {/* Car Title */}
+        <h1 className="text-3xl font-bold text-gray-900 mb-8">{car.name}</h1>
+
+        {/* Image Gallery */}
+        <div className="mb-12">
+          <div className="relative">
+            <img 
+              src={car.images[currentImage]} 
+              alt={`${car.name} view ${currentImage + 1}`}
+              className="w-full h-96 object-cover rounded-lg"
+            />
+            <button 
+              onClick={() => setCurrentImage(prev => prev > 0 ? prev - 1 : car.images.length - 1)}
+              className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 p-2 rounded-full"
+            >
+              <ChevronLeft className="w-6 h-6" />
+            </button>
+            <button 
+              onClick={() => setCurrentImage(prev => prev < car.images.length - 1 ? prev + 1 : 0)}
+              className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 p-2 rounded-full"
+            >
+              <ChevronRight className="w-6 h-6" />
+            </button>
+          </div>
+          <div className="grid grid-cols-4 gap-4 mt-4">
+            {car.images.map((img, idx) => (
+              <img 
+                key={idx}
+                src={img}
+                alt={`${car.name} thumbnail ${idx + 1}`}
+                className={`w-full h-24 object-cover rounded cursor-pointer
+                  ${currentImage === idx ? 'ring-2 ring-blue-500' : ''}`}
+                onClick={() => setCurrentImage(idx)}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Technical Specifications */}
+        <div className="bg-white rounded-lg shadow-sm p-6 mb-8">
+          <h2 className="text-2xl font-bold mb-6">Technical</h2>
+          
+          <div className="grid md:grid-cols-2 gap-8">
+            {/* Engine Section */}
+            <div>
+              <div className="flex items-center gap-2 text-xl font-semibold mb-4">
+                <span className="text-orange-500">⚙️</span>
+                <h3>Engine</h3>
+              </div>
+              <div className="space-y-3">
+                {Object.entries(car.technical.engine).map(([key, value]) => (
+                  <div key={key} className="flex justify-between py-2 border-b border-gray-100">
+                    <span className="text-gray-600 uppercase">{key.replace('_', ' ')}</span>
+                    <span className="font-medium">{value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Performance & Transmission */}
+            <div className="space-y-8">
+              <div>
+                <div className="flex items-center gap-2 text-xl font-semibold mb-4">
+                  <span className="text-orange-500">🎯</span>
+                  <h3>Performance</h3>
+                </div>
+                <div className="space-y-3">
+                  {Object.entries(car.technical.performance).map(([key, value]) => (
+                    <div key={key} className="flex justify-between py-2 border-b border-gray-100">
+                      <span className="text-gray-600 uppercase">{key.replace('_', ' ')}</span>
+                      <span className="font-medium">{value}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <div className="flex items-center gap-2 text-xl font-semibold mb-4">
+                  <span className="text-orange-500">🔄</span>
+                  <h3>Transmission</h3>
+                </div>
+                <div className="space-y-3">
+                  {Object.entries(car.technical.transmission).map(([key, value]) => (
+                    <div key={key} className="flex justify-between py-2 border-b border-gray-100">
+                      <span className="text-gray-600 uppercase">{key.replace('_', ' ')}</span>
+                      <span className="font-medium">{value}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Extras/Features */}
+        <div className="bg-white rounded-lg shadow-sm p-6">
+          <h2 className="text-2xl font-bold mb-6">Features & Extras</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {car.extras.map((extra, idx) => (
+              <div key={idx} className="flex items-center gap-2">
+                <div className="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center">
+                  <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <span>{extra}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-white shadow-sm mt-8">
+        <div className="max-w-7xl mx-auto px-4 py-6">
+          <div className="flex flex-col md:flex-row justify-between items-center">
+            <div className="text-gray-600 mb-4 md:mb-0">
+              <p>Contact: +351 123 456 789</p>
+              <p>Email: info@cardealer.com</p>
+            </div>
+            <button 
+              onClick={() => window.open('https://wa.me/351123456789')}
+              className="flex items-center bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition-colors"
+            >
+              <span className="mr-2">💬</span>
+              Contact via WhatsApp
+            </button>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default CarDetailsPage;