import React, { useState } from 'react'; import { Calendar, Clock, Wine, Droplet, Star, Utensils, Moon, Sun, Heart } from 'lucide-react'; // Zodiac sign calculator const getZodiacSign = (day, month) => { const signs = [ { name: "Capricornio", element: "Tierra", dates: [[1, 1, 1, 19], [12, 22, 12, 31]] }, { name: "Acuario", element: "Aire", dates: [[1, 20, 2, 18]] }, { name: "Piscis", element: "Agua", dates: [[2, 19, 3, 20]] }, { name: "Aries", element: "Fuego", dates: [[3, 21, 4, 19]] }, { name: "Tauro", element: "Tierra", dates: [[4, 20, 5, 20]] }, { name: "Géminis", element: "Aire", dates: [[5, 21, 6, 20]] }, { name: "Cáncer", element: "Agua", dates: [[6, 21, 7, 22]] }, { name: "Leo", element: "Fuego", dates: [[7, 23, 8, 22]] }, { name: "Virgo", element: "Tierra", dates: [[8, 23, 9, 22]] }, { name: "Libra", element: "Aire", dates: [[9, 23, 10, 22]] }, { name: "Escorpio", element: "Agua", dates: [[10, 23, 11, 21]] }, { name: "Sagitario", element: "Fuego", dates: [[11, 22, 12, 21]] } ]; for (let sign of signs) { for (let dateRange of sign.dates) { const [startMonth, startDay, endMonth, endDay] = dateRange; if ( (month === startMonth && day >= startDay) || (month === endMonth && day <= endDay) || (month > startMonth && month < endMonth) ) { return sign; } } } return { name: "Desconocido", element: "Desconocido" }; }; // Wine recommendation algorithm const getWineRecommendations = (data) => { // This is a simplified version of the algorithm const element = data.zodiacSign?.element || ""; let recommendations = { mainVariety: "", complementaryVarieties: [], optimalTime: "", pairings: [] }; // Element-based recommendations switch (element) { case "Fuego": recommendations.mainVariety = "Syrah"; recommendations.complementaryVarieties = ["Cabernet Sauvignon", "Malbec"]; recommendations.pairings = ["Carnes rojas", "Platos especiados", "Quesos intensos"]; break; case "Tierra": recommendations.mainVariety = "Tempranillo"; recommendations.complementaryVarieties = ["Sangiovese", "Nebbiolo"]; recommendations.pairings = ["Quesos curados", "Cordero", "Verduras asadas"]; break; case "Aire": recommendations.mainVariety = "Pinot Noir"; recommendations.complementaryVarieties = ["Riesling", "Garnacha"]; recommendations.pairings = ["Aves", "Pescados grasos", "Quesos suaves"]; break; case "Agua": recommendations.mainVariety = "Merlot"; recommendations.complementaryVarieties = ["Monastrell", "Chardonnay"]; recommendations.pairings = ["Pescados", "Risottos", "Quesos cremosos"]; break; default: recommendations.mainVariety = "Tempranillo"; recommendations.complementaryVarieties = ["Garnacha", "Merlot"]; recommendations.pairings = ["Platos mediterráneos", "Quesos variados", "Carnes"]; } // Time preferences switch (data.energyPeak) { case "morning": recommendations.optimalTime = "Almuerzo (13:00-15:00)"; break; case "afternoon": recommendations.optimalTime = "Media tarde (17:00-19:00)"; break; case "evening": recommendations.optimalTime = "Cena (20:00-22:00)"; break; case "night": recommendations.optimalTime = "Después de cenar (22:00-24:00)"; break; default: recommendations.optimalTime = "Cena (20:00-22:00)"; } // Adjust based on flavor preferences if (data.flavorPreferences.includes("frutal")) { if (recommendations.mainVariety === "Tempranillo") { recommendations.mainVariety = "Garnacha"; } else if (recommendations.mainVariety === "Syrah") { recommendations.mainVariety = "Malbec"; } } if (data.flavorPreferences.includes("especiado")) { if (!recommendations.complementaryVarieties.includes("Syrah")) { recommendations.complementaryVarieties.push("Syrah"); recommendations.complementaryVarieties.pop(); } } return recommendations; }; // Option card component with icon const OptionCard = ({ icon, label, selected, onClick }) => { return (
{icon}
{label}
); }; // Main App Component export default function EnoCosmicoApp() { const [currentStep, setCurrentStep] = useState(0); const [birthDate, setBirthDate] = useState({ day: 1, month: 1, year: 2000 }); const [zodiacSign, setZodiacSign] = useState(null); const [formData, setFormData] = useState({ energyPeak: "", wineTime: "", tasteTime: "", zodiacElements: [], personalityTraits: [], cuisineTypes: [], ingredients: [], flavorProfiles: [], wineAromas: [], wineStructure: { body: "", tannins: "", acidity: "", sweetness: "" }, seasonalPreferences: "", alcoholTolerance: "", sleepCycle: "" }); const [recommendations, setRecommendations] = useState(null); const handleDateChange = (e) => { const { name, value } = e.target; const newBirthDate = { ...birthDate, [name]: parseInt(value) }; setBirthDate(newBirthDate); // Calculate zodiac sign const sign = getZodiacSign(newBirthDate.day, newBirthDate.month); setZodiacSign(sign); // Update form data with zodiac info setFormData(prev => ({ ...prev, zodiacSign: sign })); }; const handleSingleSelect = (category, value) => { setFormData(prev => ({ ...prev, [category]: value })); }; const handleMultiSelect = (category, value) => { setFormData(prev => { const currentValues = prev[category] || []; if (currentValues.includes(value)) { return { ...prev, [category]: currentValues.filter(item => item !== value) }; } else { return { ...prev, [category]: [...currentValues, value] }; } }); }; const handleStructureSelect = (property, value) => { setFormData(prev => ({ ...prev, wineStructure: { ...prev.wineStructure, [property]: value } })); }; const handleNextStep = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1); } else { // Final step - generate recommendations const results = getWineRecommendations(formData); setRecommendations(results); } }; const handlePrevStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1); } }; const handleRestart = () => { setCurrentStep(0); setBirthDate({ day: 1, month: 1, year: 2000 }); setZodiacSign(null); setFormData({ energyPeak: "", wineTime: "", tasteTime: "", zodiacElements: [], personalityTraits: [], cuisineTypes: [], ingredients: [], flavorProfiles: [], wineAromas: [], wineStructure: { body: "", tannins: "", acidity: "", sweetness: "" }, seasonalPreferences: "", alcoholTolerance: "", sleepCycle: "" }); setRecommendations(null); }; // Define steps const steps = [ // Step 1: Birth Date & Chronobiology { title: "Datos Personales y Cronobiología", component: (

Fecha de Nacimiento

{zodiacSign && (

Tu signo zodiacal es {zodiacSign.name}

Elemento: {zodiacSign.element}

)}

Ciclo de Energía

¿En qué momento del día te sientes con mayor energía?

} label="Madrugada/Mañana (4:00-12:00)" selected={formData.energyPeak === "morning"} onClick={() => handleSingleSelect("energyPeak", "morning")} /> } label="Mediodía/Tarde (12:00-18:00)" selected={formData.energyPeak === "afternoon"} onClick={() => handleSingleSelect("energyPeak", "afternoon")} /> } label="Atardecer/Noche (18:00-24:00)" selected={formData.energyPeak === "evening"} onClick={() => handleSingleSelect("energyPeak", "evening")} /> } label="Madrugada (24:00-4:00)" selected={formData.energyPeak === "night"} onClick={() => handleSingleSelect("energyPeak", "night")} />

Preferencia Horaria para el Vino

¿A qué hora sueles disfrutar más de una copa de vino?

} label="Con la comida (12:00-15:00)" selected={formData.wineTime === "lunch"} onClick={() => handleSingleSelect("wineTime", "lunch")} /> } label="Media tarde (15:00-18:00)" selected={formData.wineTime === "afternoon"} onClick={() => handleSingleSelect("wineTime", "afternoon")} /> } label="Con la cena (19:00-22:00)" selected={formData.wineTime === "dinner"} onClick={() => handleSingleSelect("wineTime", "dinner")} /> } label="Después de cenar (22:00-24:00)" selected={formData.wineTime === "afterDinner"} onClick={() => handleSingleSelect("wineTime", "afterDinner")} />
) }, // Step 2: Astrological & Personality { title: "Perfil Astrológico y Personalidad", component: (

Elementos Zodiacales

De estos elementos asociados a tu signo, ¿cuáles te identifican más?

🔥} label="Fuego (calidez, intensidad)" selected={formData.zodiacElements.includes("fuego")} onClick={() => handleMultiSelect("zodiacElements", "fuego")} /> 🌱} label="Tierra (estabilidad, tradición)" selected={formData.zodiacElements.includes("tierra")} onClick={() => handleMultiSelect("zodiacElements", "tierra")} /> 💨} label="Aire (ligereza, sutileza)" selected={formData.zodiacElements.includes("aire")} onClick={() => handleMultiSelect("zodiacElements", "aire")} /> 💧} label="Agua (emoción, profundidad)" selected={formData.zodiacElements.includes("agua")} onClick={() => handleMultiSelect("zodiacElements", "agua")} />

Rasgos de Personalidad

¿Qué rasgos de personalidad te definen mejor?

🧗} label="Aventurero/a" selected={formData.personalityTraits.includes("aventurero")} onClick={() => handleMultiSelect("personalityTraits", "aventurero")} /> 🏛️} label="Tradicional" selected={formData.personalityTraits.includes("tradicional")} onClick={() => handleMultiSelect("personalityTraits", "tradicional")} /> 🔍} label="Analítico/a" selected={formData.personalityTraits.includes("analitico")} onClick={() => handleMultiSelect("personalityTraits", "analitico")} /> ✨} label="Intuitivo/a" selected={formData.personalityTraits.includes("intuitivo")} onClick={() => handleMultiSelect("personalityTraits", "intuitivo")} /> ❤️‍🔥} label="Apasionado/a" selected={formData.personalityTraits.includes("apasionado")} onClick={() => handleMultiSelect("personalityTraits", "apasionado")} /> ⚖️} label="Equilibrado/a" selected={formData.personalityTraits.includes("equilibrado")} onClick={() => handleMultiSelect("personalityTraits", "equilibrado")} /> 🧘} label="Introvertido/a" selected={formData.personalityTraits.includes("introvertido")} onClick={() => handleMultiSelect("personalityTraits", "introvertido")} /> 🎭} label="Extrovertido/a" selected={formData.personalityTraits.includes("extrovertido")} onClick={() => handleMultiSelect("personalityTraits", "extrovertido")} /> ✓} label="Perfeccionista" selected={formData.personalityTraits.includes("perfeccionista")} onClick={() => handleMultiSelect("personalityTraits", "perfeccionista")} /> 🎲} label="Espontáneo/a" selected={formData.personalityTraits.includes("espontaneo")} onClick={() => handleMultiSelect("personalityTraits", "espontaneo")} />
) }, // Step 3: Culinary Preferences { title: "Preferencias Culinarias", component: (

Tipos de Cocina

¿Qué tipos de cocina disfrutas más?

🫒} label="Mediterránea" selected={formData.cuisineTypes.includes("mediterranea")} onClick={() => handleMultiSelect("cuisineTypes", "mediterranea")} /> 🍜} label="Asiática" selected={formData.cuisineTypes.includes("asiatica")} onClick={() => handleMultiSelect("cuisineTypes", "asiatica")} /> 🌮} label="Latinoamericana" selected={formData.cuisineTypes.includes("latinoamericana")} onClick={() => handleMultiSelect("cuisineTypes", "latinoamericana")} /> 🥨} label="Centroeuropea" selected={formData.cuisineTypes.includes("centroeuropea")} onClick={() => handleMultiSelect("cuisineTypes", "centroeuropea")} /> 🐟} label="Nórdica" selected={formData.cuisineTypes.includes("nordica")} onClick={() => handleMultiSelect("cuisineTypes", "nordica")} /> 🧆} label="Oriente Medio" selected={formData.cuisineTypes.includes("orientemedio")} onClick={() => handleMultiSelect("cuisineTypes", "orientemedio")} /> 🍲} label="Africana" selected={formData.cuisineTypes.includes("africana")} onClick={() => handleMultiSelect("cuisineTypes", "africana")} /> 🍽️} label="Fusión contemporánea" selected={formData.cuisineTypes.includes("fusion")} onClick={() => handleMultiSelect("cuisineTypes", "fusion")} />

🍽️ Preferencias de Sabores

¿Qué perfiles de sabor prefieres?

🍋} label="Ácido" selected={formData.flavorProfiles.includes("acido")} onClick={() => handleMultiSelect("flavorProfiles", "acido")} /> ☕} label="Amargo" selected={formData.flavorProfiles.includes("amargo")} onClick={() => handleMultiSelect("flavorProfiles", "amargo")} /> 🧂} label="Salado" selected={formData.flavorProfiles.includes("salado")} onClick={() => handleMultiSelect("flavorProfiles", "salado")} /> 🍯} label="Dulce" selected={formData.flavorProfiles.includes("dulce")} onClick={() => handleMultiSelect("flavorProfiles", "dulce")} /> 🍄} label="Umami" selected={formData.flavorProfiles.includes("umami")} onClick={() => handleMultiSelect("flavorProfiles", "umami")} /> 🌶️} label="Picante" selected={formData.flavorProfiles.includes("picante")} onClick={() => handleMultiSelect("flavorProfiles", "picante")} /> 🍇} label="Astringente" selected={formData.flavorProfiles.includes("astringente")} onClick={() => handleMultiSelect("flavorProfiles", "astringente")} /> 🥩} label="Graso" selected={formData.flavorProfiles.includes("graso")} onClick={() => handleMultiSelect("flavorProfiles", "graso")} /> 🔥} label="Ahumado" selected={formData.flavorProfiles.includes("ahumado")} onClick={() => handleMultiSelect("flavorProfiles", "ahumado")} />
) }, // Step 4: Wine Preferences { title: "Preferencias de Vino", component: (

Aromas Preferidos en Vinos

En los vinos, prefieres aromas de:

🍓} label="Frutas rojas" selected={formData.wineAromas.includes("frutasRojas")} onClick={() => handleMultiSelect("wineAromas", "frutasRojas")} /> 🫐} label="Frutas negras" selected={formData.wineAromas.includes("frutasNegras")} onClick={() => handleMultiSelect("wineAromas", "frutasNegras")} /> 🍍} label="Frutas tropicales" selected={formData.wineAromas.includes("frutasTropicales")} onClick={() => handleMultiSelect("wineAromas", "frutasTropicales")} /> 🍑} label="Frutas de hueso" selected={formData.wineAromas.includes("frutasHueso")} onClick={() => handleMultiSelect("wineAromas", "frutasHueso")} /> 🍋} label="Cítricos" selected={formData.wineAromas.includes("citricos")}