import React, { useState } from 'react'; import { Sparkles, ChevronRight, ChevronLeft, RotateCcw } from 'lucide-react'; const FragranceFinderQuiz = () => { const [currentStep, setCurrentStep] = useState(0); const [answers, setAnswers] = useState({}); const [showResults, setShowResults] = useState(false); const questions = [ { id: 'gender', question: 'Who is this fragrance for?', options: [ { value: 'women', label: 'Women', icon: '👩' }, { value: 'men', label: 'Men', icon: '👨' }, { value: 'unisex', label: 'Anyone', icon: '✨' } ] }, { id: 'occasion', question: 'When will you wear this fragrance?', options: [ { value: 'daily', label: 'Daily Wear', icon: '☀️' }, { value: 'work', label: 'Office/Work', icon: '💼' }, { value: 'evening', label: 'Evening/Night Out', icon: '🌙' }, { value: 'special', label: 'Special Occasions', icon: '🎉' } ] }, { id: 'season', question: 'Which season do you prefer this for?', options: [ { value: 'spring', label: 'Spring', icon: '🌸' }, { value: 'summer', label: 'Summer', icon: '🌞' }, { value: 'fall', label: 'Fall', icon: '🍂' }, { value: 'winter', label: 'Winter', icon: '❄️' }, { value: 'all', label: 'All Seasons', icon: '🌈' } ] }, { id: 'intensity', question: 'How strong should the fragrance be?', options: [ { value: 'light', label: 'Light & Fresh', icon: '💨' }, { value: 'moderate', label: 'Moderate', icon: '🌺' }, { value: 'strong', label: 'Bold & Intense', icon: '🔥' } ] }, { id: 'notes', question: 'Which scent family appeals to you most?', options: [ { value: 'floral', label: 'Floral (Rose, Jasmine)', icon: '🌹' }, { value: 'citrus', label: 'Citrus (Lemon, Orange)', icon: '🍋' }, { value: 'woody', label: 'Woody (Cedar, Sandalwood)', icon: '🌲' }, { value: 'oriental', label: 'Oriental (Vanilla, Amber)', icon: '🌟' }, { value: 'fresh', label: 'Fresh (Aquatic, Green)', icon: '🌊' }, { value: 'spicy', label: 'Spicy (Cinnamon, Pepper)', icon: '🌶️' } ] }, { id: 'personality', question: 'What best describes your personality?', options: [ { value: 'elegant', label: 'Elegant & Sophisticated', icon: '👑' }, { value: 'adventurous', label: 'Adventurous & Bold', icon: '🏔️' }, { value: 'romantic', label: 'Romantic & Dreamy', icon: '💕' }, { value: 'confident', label: 'Confident & Powerful', icon: '💪' }, { value: 'casual', label: 'Casual & Easygoing', icon: '😊' } ] } ]; const recommendations = { women_floral_elegant: { name: 'Mon Paris by Yves Saint Laurent', description: 'A romantic and sophisticated fragrance with berries and floral notes', price: '$154.99', link: '/product/yves-saint-laurent-mon-paris' }, women_oriental_romantic: { name: 'Black Opium by YSL', description: 'A seductive oriental fragrance with coffee and vanilla notes', price: '$93.99 - $119.99', link: '/product/yves-saint-laurent-black-opium' }, men_woody_confident: { name: 'Paco Rabanne 1 Million', description: 'A bold and confident scent with spicy and woody notes', price: '$56.99 - $104.99', link: '/product/paco-rabbanne-1-million' }, women_fresh_casual: { name: 'Acqua di Gioia by Armani', description: 'Fresh and aquatic with lemon and jasmine notes', price: '$116.00', link: '/product/acqua-di-gioia' }, men_fresh_adventurous: { name: 'Nautica Voyage', description: 'An adventurous aquatic fragrance perfect for daily wear', price: '$26.33', link: '/product/nautica-voyage' } }; const getRecommendation = () => { const gender = answers.gender || 'women'; const notes = answers.notes || 'floral'; const personality = answers.personality || 'elegant'; const key = `${gender}_${notes}_${personality}`; if (recommendations[key]) { return recommendations[key]; } return { name: 'Discover Your Perfect Match', description: 'Based on your preferences, we recommend exploring our curated collection', price: 'Various', link: '/shop' }; }; const handleAnswer = (questionId, value) => { setAnswers({ ...answers, [questionId]: value }); if (currentStep < questions.length - 1) { setTimeout(() => setCurrentStep(currentStep + 1), 300); } else { setTimeout(() => setShowResults(true), 300); } }; const handleBack = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1); } }; const handleRestart = () => { setCurrentStep(0); setAnswers({}); setShowResults(false); }; const progress = ((currentStep + 1) / questions.length) * 100; if (showResults) { const recommendation = getRecommendation(); return ( ); } const currentQuestion = questions[currentStep]; return (