function ProgressTracker({ personalSavings = 0, communitySavings = 0, personalGoal = 100, communityGoal = 1000 }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto p-6 rounded-lg bg-white shadow-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#2C3E50] mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Tu Impacto Personal"), /*#__PURE__*/ React.createElement("div", { className: "relative h-6 bg-[#E0E7FF] rounded-full", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-full bg-[#3B82F6] rounded-full transition-all duration-500 ease-in-out", style: { width: `${Math.min(personalSavings / personalGoal * 100, 100)}%` }, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute right-2 top-1/2 -translate-y-1/2 text-sm font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, personalSavings, " / ", personalGoal, " litros"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#2C3E50] mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Impacto Comunitario"), /*#__PURE__*/ React.createElement("div", { className: "relative h-6 bg-[#E0E7FF] rounded-full", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-full bg-[#3B82F6] rounded-full transition-all duration-500 ease-in-out", style: { width: `${Math.min(communitySavings / communityGoal * 100, 100)}%` }, __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute right-2 top-1/2 -translate-y-1/2 text-sm font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, communitySavings, " / ", communityGoal, " litros")))); } function ProgressTrackerStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4 bg-[#F8FAFC]", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProgressTracker, { personalSavings: 75, communitySavings: 750, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressTracker, { personalSavings: 25, communitySavings: 250, personalGoal: 50, communityGoal: 500, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressTracker, { personalSavings: 100, communitySavings: 1000, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this })); } function NavigationBar() { return /*#__PURE__*/ React.createElement("nav", { className: "bg-[#1a1a1a] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex flex-wrap justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-roboto text-xl", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "🌎 EcoLearn"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap items-center space-x-1 md:space-x-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "text-white hover:text-green-400 px-2 py-1 font-roboto text-sm md:text-base", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Inicio"), /*#__PURE__*/ React.createElement("a", { href: "#learn", className: "text-white hover:text-green-400 px-2 py-1 font-roboto text-sm md:text-base", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Aprender"), /*#__PURE__*/ React.createElement("a", { href: "#challenges", className: "text-white hover:text-green-400 px-2 py-1 font-roboto text-sm md:text-base", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Retos"), /*#__PURE__*/ React.createElement("a", { href: "#map", className: "text-white hover:text-green-400 px-2 py-1 font-roboto text-sm md:text-base", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Mapa"), /*#__PURE__*/ React.createElement("a", { href: "#community", className: "text-white hover:text-green-400 px-2 py-1 font-roboto text-sm md:text-base", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Comunidad"), /*#__PURE__*/ React.createElement("a", { href: "#games", className: "text-white hover:text-green-400 px-2 py-1 font-roboto text-sm md:text-base", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Juegos"), /*#__PURE__*/ React.createElement("a", { href: "#tips", className: "text-white hover:text-green-400 px-2 py-1 font-roboto text-sm md:text-base", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Consejos"), /*#__PURE__*/ React.createElement("a", { href: "#progress", className: "text-white hover:text-green-400 px-2 py-1 font-roboto text-sm md:text-base", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Progreso"), /*#__PURE__*/ React.createElement("a", { href: "#donate", className: "bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-full font-roboto text-sm md:text-base", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Donar")))); } function NavigationBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationBar, { __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this })); } function ChallengeCard({ title, description, points, isCompleted, onToggle }) { const [checked, setChecked] = useState(isCompleted); const handleChange = ()=>{ setChecked(!checked); if (onToggle) { onToggle(!checked); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 max-w-md bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto font-semibold text-[#2C3E50] mb-2", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-[#7F8C8D] font-roboto mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: checked, onChange: handleChange, className: "w-5 h-5 rounded border-[#3498DB] text-[#3498DB] focus:ring-[#3498DB]", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#2C3E50]", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Completado")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-[#F1C40F] mr-1", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto font-bold text-[#2C3E50]", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, points, " puntos")))))); } function ChallengeCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4 bg-[#F5F6F7]", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChallengeCard, { title: "Reducir el tiempo de ducha", description: "Toma una ducha de 5 minutos o menos para ahorrar hasta 15 litros de agua", points: 50, isCompleted: false, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChallengeCard, { title: "Cerrar el grifo", description: "Cierra el grifo mientras te cepillas los dientes", points: 30, isCompleted: true, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChallengeCard, { title: "Reutilizar el agua", description: "Usa el agua de la lluvia para regar las plantas", points: 40, isCompleted: false, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this })); } function WaterFactCard({ title = "Agua en Paraguay", stats = { acceso: "78% de la población tiene acceso a agua potable", rural: "59% de la población rural tiene acceso a agua segura", subterranea: "80% del agua potable proviene de fuentes subterráneas", acuifero: "Paraguay está sobre el Acuífero Guaraní, una de las reservas de agua dulce más grandes del mundo" } }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto bg-white rounded-xl shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-water text-3xl text-blue-500", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "ml-2 text-xl font-crimson-text font-bold text-gray-800", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, title)), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, Object.entries(stats).map(([key, value])=>/*#__PURE__*/ React.createElement("div", { key: key, className: "flex items-start", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tint text-blue-400 mt-1", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "ml-3 text-gray-600 font-crimson-text", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, value)))))); } function WaterFactCardStory() { const waterStats = { acceso: "78% de la población tiene acceso a agua potable", rural: "59% de la población rural tiene acceso a agua segura", subterranea: "80% del agua potable proviene de fuentes subterráneas", acuifero: "Paraguay está sobre el Acuífero Guaraní, una de las reservas de agua dulce más grandes del mundo", desafios: "El 22% de la población aún carece de acceso a agua potable segura" }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WaterFactCard, { stats: waterStats, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); } function MainComponent() { const [challenges] = useState([ { id: 1, title: "Ahorro de 5 Litros", description: "Reduce tu consumo de agua en 5 litros hoy", points: 50 }, { id: 2, title: "Reparar Goteras", description: "Identifica y repara una gotera en tu hogar", points: 100 } ]); const [waterAlerts] = useState([ { region: "Asunción", level: "Moderado", message: "Niveles bajos del Río Paraguay" }, { region: "Ciudad del Este", level: "Alto", message: "Restricciones de agua en horario nocturno" } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-blue-50", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "hero-section bg-gradient-to-r from-blue-600 to-blue-400 text-white py-20", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 mb-8 md:mb-0", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold font-montserrat mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Protegiendo el Agua en Paraguay"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Trabajamos para conservar y proteger los recursos hídricos de Paraguay para las generaciones futuras.")), /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/paraguay-river.jpg", alt: "Río Paraguay en un atardecer", className: "rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "statistics-section py-16 bg-white", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-montserrat text-center mb-10", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Estadísticas Actuales"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-6 bg-blue-50 rounded-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-4xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "85%"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "de la población con acceso a agua potable")), /*#__PURE__*/ React.createElement("div", { className: "text-center p-6 bg-blue-50 rounded-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-4xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "-15%"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "reducción en consumo de agua este año")), /*#__PURE__*/ React.createElement("div", { className: "text-center p-6 bg-blue-50 rounded-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-4xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "12.000"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "guardianes del agua activos"))))), /*#__PURE__*/ React.createElement("div", { className: "challenges-section py-16 bg-gray-50", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-montserrat text-center mb-10", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "Desafío Diario"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, challenges.map((challenge)=>/*#__PURE__*/ React.createElement(React.Fragment, null))))), /*#__PURE__*/ React.createElement("div", { className: "education-section py-16 bg-white", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-montserrat text-center mb-10", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Recursos Educativos"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("div", { className: "alerts-section py-16 bg-gray-50", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-montserrat text-center mb-10", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "Alertas de Agua"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, waterAlerts.map((alert, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-6 rounded-lg ${alert.level === "Alto" ? "bg-red-100" : "bg-yellow-100"}`, __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, alert.region), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, alert.message), /*#__PURE__*/ React.createElement("span", { className: `inline-block mt-2 px-3 py-1 rounded ${alert.level === "Alto" ? "bg-red-500" : "bg-yellow-500"} text-white`, __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, "Nivel: ", alert.level)))))), /*#__PURE__*/ React.createElement("div", { className: "progress-section py-16 bg-white", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-montserrat text-center mb-10", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, "Tu Progreso"), /*#__PURE__*/ React.createElement(React.Fragment, null)))); }