\n \n

\n );\n }\n\n if (!car) {\n return null;\n }\n\n // Mock gallery images\n const galleryImages = [\n car.image,\n `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},interior`,\n `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},rear`,\n `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},wheel`,\n `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},dashboard`\n ];\n\n return (\n

\n {/* Breadcrumbs */}\n

\n Home\n \n Cars\n \n {car.name}\n

\n \n {/* Car Details */}\n

\n \n

\n {car.category}\n

\n \n

{car.name}

\n {[...Array(5)].map((_, i) => (\n \n ))}\n

\n {car.rating} ({car.reviews} reviews)\n

\n \n

\n ${car.price}/day\n

Includes insurance & taxes

\n \n \n

\n \n {/* Quick Info */}\n

\n {[\n { label: 'Transmission', value: car.transmission, icon: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' },\n { label: 'Fuel Type', value: car.fuelType, icon: 'M13 10V3L4 14h7v7l9-11h-7z' },\n { label: 'Seats', value: `${car.seats} Persons`, icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },\n { label: 'Category', value: car.category, icon: 'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z' }\n ].map((item, index) => (\n

\n \n {item.label}\n {item.value}\n

\n ))}\n

\n \n {/* Tabs */}\n

\n {['overview', 'features', 'specifications'].map((tab) => (\n setActiveTab(tab)}\n className={`py-3 px-4 font-medium text-sm transition-colors ${\n activeTab === tab\n ? 'text-blue-600 border-b-2 border-blue-600'\n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n {tab.charAt(0).toUpperCase() + tab.slice(1)}\n \n ))}\n

\n \n

\n {activeTab === 'overview' && (\n

{car.description}

\n Experience the thrill of driving this exceptional vehicle, meticulously maintained and ready for your journey. Whether for a business trip, weekend getaway, or special occasion, this {car.name} delivers performance and style.\n

\n )}\n \n {activeTab === 'features' && (\n

\n \n {feature}\n

\n )}\n \n {activeTab === 'specifications' && (\n

\n {Object.entries(car.specifications).map(([key, value]) => (\n

\n {key.replace(/([A-Z])/g, ' $1').trim()}\n {value}\n

\n ))}\n

\n )}\n

\n \n {/* Related Cars */}\n {relatedCars.length > 0 && (\n

Similar Vehicles

\n {relatedCars.map((relatedCar) => (\n \n

\n {relatedCar.category}\n

{relatedCar.name}

\n ${relatedCar.price}/day\n

\n \n ))}\n

\n )}\n \n {/* CTA */}\n

Ready to Experience the {car.name}?

\n Book now to secure this premium vehicle for your upcoming journey. Our team is ready to provide you with an exceptional rental experience.\n

\n \n \n

\n \n {/* Image Gallery Modal */}\n {showGallery && (\n

\n \n \n

\n \n

\n {galleryImages.map((image, index) => (\n \n ))}\n

\n )}\n

\n );\n};\n\nexport default CarDetail;","deleted","label",[170,171,153],"frontend","pages","permalink","https://www.val.town/x/Chandan5689/CarRental/code/frontend/pages/CarDetail.jsx","extension","actionData","errors"]