// components/VehiclePicker.jsx
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronDown, Check, X, ArrowRight } from 'lucide-react';
const VehiclePicker = () => {
const [selectedYear, setSelectedYear] = useState(null);
const [selectedModel, setSelectedModel] = useState(null);
const [selectedTrim, setSelectedTrim] = useState(null);
const [step, setStep] = useState(1);
const [isComplete, setIsComplete] = useState(false);
const [isExploding, setIsExploding] = useState(false);
const years = ["2025", "2024", "2023", "2022", "2021"];
const models = ["GT-R", "Z", "Ariya", "Maxima", "Altima", "Sentra", "Rogue"];
const trims = ["Sport", "Premium", "NISMO", "Platinum", "Midnight Edition"];
const vehicleImages = {
"GT-R": "/images/gtr-silhouette.svg",
"Z": "/images/z-silhouette.svg",
"Ariya": "/images/ariya-silhouette.svg",
"Maxima": "/images/maxima-silhouette.svg",
"Altima": "/images/altima-silhouette.svg",
"Sentra": "/images/sentra-silhouette.svg",
"Rogue": "/images/rogue-silhouette.svg",
};
useEffect(() => {
if (selectedYear && step === 1) setStep(2);
if (selectedModel && step === 2) setStep(3);
if (selectedYear && selectedModel && selectedTrim) setIsComplete(true);
}, [selectedYear, selectedModel, selectedTrim, step]);
const handleYearSelect = (year) => {
setSelectedYear(year);
};
const handleModelSelect = (model) => {
setSelectedModel(model);
};
const handleTrimSelect = (trim) => {
setSelectedTrim(trim);
};
const resetSelection = () => {
setSelectedYear(null);
setSelectedModel(null);
setSelectedTrim(null);
setIsComplete(false);
setStep(1);
};
const triggerExplodeAnimation = () => {
setIsExploding(true);
setTimeout(() => {
setIsExploding(false);
// Here you would redirect to the vehicle page in a real implementation
console.log("Redirecting with:", { selectedYear, selectedModel, selectedTrim });
}, 1500);
};
return (
{/* Header */}
{/* Progress Bar */}
{/* Selection Steps */}
{step === 1 && (
)}
{step === 2 && (
)}
{step === 3 && (
)}
{/* Vehicle Visualization */}
{selectedModel && (
{/* This would be a real SVG in production - here using placeholder */}
{/* Car silhouette placeholder */}
)}
{/* Selection Summary and Actions */}
)}
);
};
export default VehiclePicker; FIND YOUR NISSAN
= 1 ? 'bg-red-600' : 'bg-gray-200'} transition-colors duration-300`}>
= 2 ? 'bg-red-600' : 'bg-gray-200'} transition-colors duration-300`}>
= 3 ? 'bg-red-600' : 'bg-gray-200'} transition-colors duration-300`}>
Step 1
Year
{years.map((year) => (
handleYearSelect(year)}
className={`py-3 text-center border-b-2 transition-all ${
selectedYear === year
? 'border-red-600 text-red-600 font-medium'
: 'border-transparent text-gray-600 hover:text-gray-800'
}`}
whileHover={{ y: -3 }}
whileTap={{ scale: 0.97 }}
>
{year}
))}
Step 2
Model
{models.map((model) => (
handleModelSelect(model)}
className={`relative p-4 border rounded-lg transition-all ${
selectedModel === model
? 'border-red-600 bg-red-50 text-red-600'
: 'border-gray-200 bg-white hover:border-gray-300'
}`}
whileHover={{ y: -3, boxShadow: '0 4px 6px rgba(0, 0, 0, 0.05)' }}
whileTap={{ scale: 0.97 }}
>
{model} {selectedModel === model && (
)}
))}
Step 3
Trim
{trims.map((trim) => (
handleTrimSelect(trim)}
className={`flex justify-between items-center p-3 border-l-2 transition-all ${
selectedTrim === trim
? 'border-red-600 bg-red-50 text-red-600 font-medium'
: 'border-transparent hover:border-gray-200 hover:bg-gray-50'
}`}
whileHover={{ x: 3 }}
whileTap={{ scale: 0.99 }}
>
{trim}
{selectedTrim === trim && }
))}
{selectedModel} Silhouette
{/* Particle effect container */}
{isExploding && (
{[...Array(20)].map((_, i) => (
))}
)}
{selectedYear && (
Reset
)}
{}}
disabled={!isComplete}
className={`flex items-center px-6 py-3 rounded-full transition-all ${
isComplete
? 'bg-gradient-to-r from-red-600 to-red-700 text-white'
: 'bg-gray-200 text-gray-400 cursor-not-allowed'
}`}
whileHover={isComplete ? { scale: 1.03 } : {}}
whileTap={isComplete ? { scale: 0.97 } : {}}
>
Find Vehicle
{/* Selected Vehicle Info */}
{isComplete && (
Your Selection
{selectedYear} Nissan {selectedModel} {selectedTrim}