import React, { useState, useEffect } from "react";
import {
  UserPlus,
  LogIn,
  BadgePlus,
  RadioTower,
  Search,
  Cloud,
  CloudRain,
  Droplets,
  Wind,
  Thermometer,
  Sun,
  Moon,
  MapPin,
  CalendarClock,
  ArrowRight,
  BellRing,
  LayoutDashboard,
  TowerControl,
} from "lucide-react";
import { useAuth } from "../AuthContext";

function EnhancedWeatherHome() {
  const [searchQuery, setSearchQuery] = useState("");
  const [activeFilter, setActiveFilter] = useState("all");
  const [currentTime, setCurrentTime] = useState(new Date());
  const { user, token } = useAuth();

  const isDayTime = currentTime.getHours() > 6 && currentTime.getHours() < 20;

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 60000);

    return () => clearInterval(timer);
  }, []);

  const formatDate = (date) => {
    const options = { weekday: "long", day: "numeric", month: "long" };
    return date.toLocaleDateString("fr-FR", options);
  };

  const hourlyForecast = [
    {
      time: "Maintenant",
      temp: "21°",
      icon: <Cloud className="text-indigo-500" size={24} />,
    },
    {
      time: "14:00",
      temp: "22°",
      icon: <Cloud className="text-indigo-500" size={24} />,
    },
    {
      time: "15:00",
      temp: "22°",
      icon: <Sun className="text-yellow-500" size={24} />,
    },
    {
      time: "16:00",
      temp: "21°",
      icon: <Sun className="text-yellow-500" size={24} />,
    },
    {
      time: "17:00",
      temp: "20°",
      icon: <CloudRain className="text-blue-500" size={24} />,
    },
    {
      time: "18:00",
      temp: "19°",
      icon: <CloudRain className="text-blue-500" size={24} />,
    },
  ];

  const dailyForecast = [
    {
      day: "Lun",
      temp: "21°/15°",
      icon: <Cloud className="text-indigo-400" size={32} />,
    },
    {
      day: "Mar",
      temp: "23°/16°",
      icon: <Sun className="text-yellow-500" size={32} />,
    },
    {
      day: "Mer",
      temp: "24°/17°",
      icon: <Sun className="text-yellow-500" size={32} />,
    },
    {
      day: "Jeu",
      temp: "22°/16°",
      icon: <CloudRain className="text-blue-400" size={32} />,
    },
    {
      day: "Ven",
      temp: "20°/14°",
      icon: <CloudRain className="text-blue-400" size={32} />,
    },
  ];

  return (
    <div
      className={`min-h-screen ${
        isDayTime
          ? "bg-gradient-to-br from-blue-100 to-sky-200"
          : "bg-gradient-to-br from-blue-900 to-indigo-900 text-white"
      }`}
    >
      {" "}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 z-0">
          <div
            className={`absolute inset-0 ${
              isDayTime
                ? "bg-gradient-to-r from-yellow-200/20 to-blue-300/30"
                : "bg-gradient-to-r from-blue-900/50 to-purple-900/60"
            }`}
          ></div>
          {isDayTime ? (
            <>
              <div className="absolute top-10 right-10 w-32 h-32 rounded-full bg-yellow-300 blur-xl opacity-70 animate-pulse"></div>
              <div className="absolute -top-10 left-1/4 w-16 h-16 rounded-full bg-white blur-md opacity-30"></div>
              <div className="absolute top-1/3 left-1/3 w-12 h-12 rounded-full bg-white blur-md opacity-30"></div>
            </>
          ) : (
            <>
              <div className="absolute top-10 right-14 w-20 h-20 rounded-full bg-gray-200 blur-lg opacity-70"></div>
              <div className="absolute top-14 right-10 w-14 h-14 rounded-full bg-gray-900 blur-sm"></div>
              <div className="absolute top-20 left-1/4 w-2 h-2 rounded-full bg-white blur-none opacity-90"></div>
              <div className="absolute top-40 left-1/3 w-1 h-1 rounded-full bg-white blur-none opacity-90"></div>
              <div className="absolute top-14 left-1/2 w-2 h-2 rounded-full bg-white blur-none opacity-90"></div>
            </>
          )}
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
          <div className="text-center relative">
            <h1
              className={`text-5xl font-bold mb-6 ${
                isDayTime ? "text-gray-900" : "text-white"
              } animate-fade-in`}
            >
              La météo en temps réel
            </h1>
            <p
              className={`text-xl ${
                isDayTime ? "text-gray-700" : "text-gray-200"
              } max-w-3xl mx-auto mb-10`}
            >
              Prévisions précises et personnalisées pour vous aider à planifier
              votre journée en toute sérénité.
            </p>

            <div className="max-w-3xl mx-auto relative z-10 mb-16 transition-all duration-300 hover:transform hover:-translate-y-1">
              <div className="relative">
                <Search
                  className={`absolute left-4 top-1/2 transform -translate-y-1/2 ${
                    isDayTime ? "text-gray-400" : "text-gray-500"
                  }`}
                  size={24}
                />
                <input
                  type="text"
                  placeholder="Rechercher une ville ou un code postal..."
                  className={`w-full pl-12 pr-4 py-4 rounded-xl border ${
                    isDayTime
                      ? "border-gray-200 bg-white"
                      : "border-gray-700 bg-gray-800 text-white"
                  } focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-lg`}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
                <button className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
                  Rechercher
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 relative z-10">
        <div
          className={`rounded-2xl shadow-xl mb-10 overflow-hidden transition-all duration-300 hover:shadow-2xl ${
            isDayTime ? "bg-white" : "bg-gray-800"
          }`}
        >
          <div className="p-8">
            <div className="flex flex-col lg:flex-row justify-between">
              <div className="mb-6 lg:mb-0">
                <div className="flex items-center">
                  <MapPin
                    className={`${
                      isDayTime ? "text-indigo-600" : "text-indigo-400"
                    } mr-2`}
                    size={20}
                  />
                  <h3
                    className={`text-xl font-medium ${
                      isDayTime ? "text-gray-700" : "text-gray-200"
                    }`}
                  >
                    Paris, France
                  </h3>
                </div>
                <p
                  className={`text-sm ${
                    isDayTime ? "text-gray-500" : "text-gray-400"
                  } mb-6`}
                >
                  {formatDate(currentTime)}
                </p>
                <div className="flex items-center">
                  {isDayTime ? (
                    <Cloud className="text-indigo-500 mr-6" size={64} />
                  ) : (
                    <Moon className="text-indigo-300 mr-6" size={64} />
                  )}
                  <div>
                    <h2
                      className={`text-6xl font-bold ${
                        isDayTime ? "text-gray-900" : "text-white"
                      }`}
                    >
                      21°C
                    </h2>
                    <p
                      className={`text-lg ${
                        isDayTime ? "text-gray-600" : "text-gray-300"
                      }`}
                    >
                      Partiellement nuageux
                    </p>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-2 sm:grid-cols-3 gap-6">
                <div
                  className={`rounded-xl p-4 ${
                    isDayTime ? "bg-blue-50" : "bg-gray-700"
                  }`}
                >
                  <p
                    className={`text-sm ${
                      isDayTime ? "text-gray-500" : "text-gray-400"
                    }`}
                  >
                    Ressenti
                  </p>
                  <div className="flex items-center mt-1">
                    <Thermometer
                      className={`${
                        isDayTime ? "text-red-500" : "text-red-400"
                      } mr-2`}
                      size={18}
                    />
                    <span
                      className={`text-lg font-medium ${
                        isDayTime ? "text-gray-900" : "text-white"
                      }`}
                    >
                      23°C
                    </span>
                  </div>
                </div>
                <div
                  className={`rounded-xl p-4 ${
                    isDayTime ? "bg-blue-50" : "bg-gray-700"
                  }`}
                >
                  <p
                    className={`text-sm ${
                      isDayTime ? "text-gray-500" : "text-gray-400"
                    }`}
                  >
                    Humidité
                  </p>
                  <div className="flex items-center mt-1">
                    <Droplets
                      className={`${
                        isDayTime ? "text-blue-500" : "text-blue-400"
                      } mr-2`}
                      size={18}
                    />
                    <span
                      className={`text-lg font-medium ${
                        isDayTime ? "text-gray-900" : "text-white"
                      }`}
                    >
                      68%
                    </span>
                  </div>
                </div>
                <div
                  className={`rounded-xl p-4 ${
                    isDayTime ? "bg-blue-50" : "bg-gray-700"
                  }`}
                >
                  <p
                    className={`text-sm ${
                      isDayTime ? "text-gray-500" : "text-gray-400"
                    }`}
                  >
                    Vent
                  </p>
                  <div className="flex items-center mt-1">
                    <Wind
                      className={`${
                        isDayTime ? "text-blue-500" : "text-blue-400"
                      } mr-2`}
                      size={18}
                    />
                    <span
                      className={`text-lg font-medium ${
                        isDayTime ? "text-gray-900" : "text-white"
                      }`}
                    >
                      12 km/h
                    </span>
                  </div>
                </div>
                <div
                  className={`rounded-xl p-4 ${
                    isDayTime ? "bg-blue-50" : "bg-gray-700"
                  }`}
                >
                  <p
                    className={`text-sm ${
                      isDayTime ? "text-gray-500" : "text-gray-400"
                    }`}
                  >
                    Précipitations
                  </p>
                  <div className="flex items-center mt-1">
                    <CloudRain
                      className={`${
                        isDayTime ? "text-blue-500" : "text-blue-400"
                      } mr-2`}
                      size={18}
                    />
                    <span
                      className={`text-lg font-medium ${
                        isDayTime ? "text-gray-900" : "text-white"
                      }`}
                    >
                      30%
                    </span>
                  </div>
                </div>
                <div
                  className={`rounded-xl p-4 ${
                    isDayTime ? "bg-blue-50" : "bg-gray-700"
                  }`}
                >
                  <p
                    className={`text-sm ${
                      isDayTime ? "text-gray-500" : "text-gray-400"
                    }`}
                  >
                    Lever du soleil
                  </p>
                  <div className="flex items-center mt-1">
                    <Sun
                      className={`${
                        isDayTime ? "text-yellow-500" : "text-yellow-400"
                      } mr-2`}
                      size={18}
                    />
                    <span
                      className={`text-lg font-medium ${
                        isDayTime ? "text-gray-900" : "text-white"
                      }`}
                    >
                      06:42
                    </span>
                  </div>
                </div>
                <div
                  className={`rounded-xl p-4 ${
                    isDayTime ? "bg-blue-50" : "bg-gray-700"
                  }`}
                >
                  <p
                    className={`text-sm ${
                      isDayTime ? "text-gray-500" : "text-gray-400"
                    }`}
                  >
                    Coucher du soleil
                  </p>
                  <div className="flex items-center mt-1">
                    <Moon
                      className={`${
                        isDayTime ? "text-indigo-500" : "text-indigo-400"
                      } mr-2`}
                      size={18}
                    />
                    <span
                      className={`text-lg font-medium ${
                        isDayTime ? "text-gray-900" : "text-white"
                      }`}
                    >
                      20:51
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            className={`px-8 py-6 ${isDayTime ? "bg-gray-50" : "bg-gray-900"}`}
          >
            <h3
              className={`text-lg font-semibold mb-4 ${
                isDayTime ? "text-gray-800" : "text-gray-200"
              }`}
            >
              Prévisions horaires
            </h3>
            <div className="flex overflow-x-auto pb-4 gap-6">
              {hourlyForecast.map((item, index) => (
                <div
                  key={index}
                  className={`flex-shrink-0 flex flex-col items-center p-4 rounded-lg ${
                    isDayTime ? "bg-white" : "bg-gray-800"
                  } shadow-sm`}
                >
                  <p
                    className={`text-sm font-medium ${
                      isDayTime ? "text-gray-600" : "text-gray-300"
                    }`}
                  >
                    {item.time}
                  </p>
                  {item.icon}
                  <p
                    className={`text-lg font-bold mt-1 ${
                      isDayTime ? "text-gray-900" : "text-white"
                    }`}
                  >
                    {item.temp}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div
          className={`rounded-2xl shadow-xl mb-10 overflow-hidden ${
            isDayTime ? "bg-white" : "bg-gray-800"
          }`}
        >
          <div className="p-8">
            <h3
              className={`text-xl font-semibold mb-6 ${
                isDayTime ? "text-gray-800" : "text-gray-200"
              }`}
            >
              Prévisions 5 jours
            </h3>
            <div className="space-y-6">
              {dailyForecast.map((item, index) => (
                <div
                  key={index}
                  className={`flex items-center justify-between p-4 rounded-lg ${
                    isDayTime ? "hover:bg-gray-50" : "hover:bg-gray-700"
                  } transition-colors`}
                >
                  <div className="flex items-center">
                    <span
                      className={`text-lg font-medium w-12 ${
                        isDayTime ? "text-gray-700" : "text-gray-300"
                      }`}
                    >
                      {item.day}
                    </span>
                    {item.icon}
                  </div>
                  <span
                    className={`text-lg font-bold ${
                      isDayTime ? "text-gray-800" : "text-white"
                    }`}
                  >
                    {item.temp}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <h3
          className={`text-2xl font-bold mb-6 ${
            isDayTime ? "text-gray-800" : "text-gray-200"
          }`}
        >
          Services météo
        </h3>
        {user?.role === "user" && (
          <div
            className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
              isDayTime ? "bg-white" : "bg-gray-800"
            } transform hover:-translate-y-1`}
          >
            <div
              className={`h-32 ${
                isDayTime
                  ? "bg-gradient-to-r from-blue-400 to-indigo-500"
                  : "bg-gradient-to-r from-blue-700 to-indigo-800"
              } flex items-center justify-center`}
            >
              <CalendarClock className="text-white" size={48} />
            </div>
            <div className="p-6">
              <h3
                className={`text-xl font-semibold mb-2 ${
                  isDayTime ? "text-gray-800" : "text-white"
                }`}
              >
                Visualisation des objets connectés météorologiques
              </h3>
              <p
                className={`${
                  isDayTime ? "text-gray-600" : "text-gray-300"
                } mb-4`}
              >
                Consultez l'ensemble des objets connectés ainsi que leurs
                données dans l'ensemble de la France
              </p>
              <a
                href="/gestionObjets"
                className={`flex items-center ${
                  isDayTime
                    ? "text-indigo-600 hover:text-indigo-700"
                    : "text-indigo-400 hover:text-indigo-300"
                }`}
              >
                Voir les objets <ArrowRight size={16} className="ml-2" />
              </a>
            </div>
          </div>
        )}

        {!token && (
          <div className="grid md:grid-cols-2 gap-8 mb-12">
            <div
              className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
                isDayTime ? "bg-white" : "bg-gray-800"
              } transform hover:-translate-y-1`}
            >
              <div
                className={`h-32 ${
                  isDayTime
                    ? "bg-gradient-to-r from-blue-400 to-indigo-500"
                    : "bg-gradient-to-r from-blue-700 to-indigo-800"
                } flex items-center justify-center`}
              >
                <UserPlus className="text-white" size={48} />
              </div>
              <div className="p-6">
                <h3
                  className={`text-xl font-semibold mb-2 ${
                    isDayTime ? "text-gray-800" : "text-white"
                  }`}
                >
                  Inscrivez-vous !{" "}
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  Avoir un compte sur notre site permet de consulter
                  l'intégralité des objets connectés météorologiques dans
                  l'ensemble de la France
                </p>
                <a
                  href="/signup"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  S'inscrire <ArrowRight size={16} className="ml-2" />
                </a>
              </div>
            </div>
            <div
              className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
                isDayTime ? "bg-white" : "bg-gray-800"
              } transform hover:-translate-y-1`}
            >
              <div
                className={`h-32 ${
                  isDayTime
                    ? "bg-gradient-to-r from-yellow-300 to-orange-400"
                    : "bg-gradient-to-r from-blue-700 to-indigo-800"
                } flex items-center justify-center`}
              >
                <LogIn className="text-white" size={48} />
              </div>
              <div className="p-6">
                <h3
                  className={`text-xl font-semibold mb-2 ${
                    isDayTime ? "text-gray-800" : "text-white"
                  }`}
                >
                  Connectez-vous !
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  Heureux de vous retrouver ! Retrouvez votre compte tel que
                  vous l'avez laissez !
                </p>
                <a
                  href="/login"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  Se connecter <ArrowRight size={16} className="ml-2" />
                </a>
              </div>
            </div>
          </div>
        )}
        {user?.role === "complexe" && (
          <div className="grid md:grid-cols-2 gap-8 mb-12">
            <div
              className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
                isDayTime ? "bg-white" : "bg-gray-800"
              } transform hover:-translate-y-1`}
            >
              <div
                className={`h-32 ${
                  isDayTime
                    ? "bg-gradient-to-r from-green-400 to-teal-500"
                    : "bg-gradient-to-r from-green-700 to-teal-800"
                } flex items-center justify-center`}
              >
                <RadioTower className="text-white" size={48} />
              </div>
              <div className="p-6">
                <h3
                  className={`text-xl font-semibold mb-2 ${
                    isDayTime ? "text-gray-800" : "text-white"
                  }`}
                >
                  Consulter les objets connectés météorologiques
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  Accédez aux données en temps réel des objets connectés
                  météorologiques, modifiez leurs paramètres et consultez
                  l'historique des mesures.{" "}
                </p>
                <a
                  href="/gestionObjets"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  Explorer les objets <ArrowRight size={16} className="ml-2" />
                </a>
              </div>
            </div>

            <div
              className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
                isDayTime ? "bg-white" : "bg-gray-800"
              } transform hover:-translate-y-1`}
            >
              <div
                className={`h-32 ${
                  isDayTime
                    ? "bg-gradient-to-r from-red-400 to-orange-500"
                    : "bg-gradient-to-r from-red-700 to-orange-800"
                } flex items-center justify-center`}
              >
                <BadgePlus className="text-white" size={48} />
              </div>
              <div className="p-6">
                <h3
                  className={`text-xl font-semibold mb-2 ${
                    isDayTime ? "text-gray-800" : "text-white"
                  }`}
                >
                  Ajouter un nouvel objet connecté
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  Intégrez facilement un nouvel objet connecté en renseignant
                  ses informations et en configurant ses paramètres pour une
                  gestion optimale.
                </p>
                <a
                  href="/ajouterObjet"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  Ajouter un objet{" "}
                  <ArrowRight size={16} className="ml-2" />
                </a>
              </div>
            </div>
          </div>
        )}
        {user?.role === "admin" && (
          <div className="grid md:grid-cols-2 gap-8 mb-12">
            <div
              className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
                isDayTime ? "bg-white" : "bg-gray-800"
              } transform hover:-translate-y-1`}
            >
              <div
                className={`h-32 ${
                  isDayTime
                    ? "bg-gradient-to-r from-green-400 to-teal-500"
                    : "bg-gradient-to-r from-green-700 to-teal-800"
                } flex items-center justify-center`}
              >
                <TowerControl className="text-white" size={48} />
              </div>
              <div className="p-6">
                <h3
                  className={`text-xl font-semibold mb-2 ${
                    isDayTime ? "text-gray-800" : "text-white"
                  }`}
                >
                  Accéder au tableau d'Administration
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  Vous pourrez gérer les utilisateurs du site mais aussi les objets connectés
                </p>
                <a
                  href="/dashboard"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  Tableau d'Administration <ArrowRight size={16} className="ml-2" />
                </a>
              </div>
            </div>

            <div
              className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
                isDayTime ? "bg-white" : "bg-gray-800"
              } transform hover:-translate-y-1`}
            >
              <div
                className={`h-32 ${
                  isDayTime
                    ? "bg-gradient-to-r from-red-400 to-orange-500"
                    : "bg-gradient-to-r from-red-700 to-orange-800"
                } flex items-center justify-center`}
              >
                <RadioTower className="text-white" size={48} />
              </div>
              <div className="p-6">
                <h3
                  className={`text-xl font-semibold mb-2 ${
                    isDayTime ? "text-gray-800" : "text-white"
                  }`}
                >
                  Gestion des objets connectés
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  Ce module vous permet de gérer les capteurs et stations connectés de France de manière simple et efficace.
                </p>
                <a
                  href="/gestion"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  Gestion des objets{" "}
                  <ArrowRight size={16} className="ml-2" />
                </a>
              </div>
            </div>
          </div>
        )}
      </div>
      <footer className={`py-12 ${isDayTime ? "bg-gray-100" : "bg-gray-900"}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center mb-6 md:mb-0">
              <Cloud
                className={`${
                  isDayTime ? "text-indigo-600" : "text-indigo-400"
                } mr-2`}
                size={24}
              />
              <span
                className={`text-xl font-bold ${
                  isDayTime ? "text-gray-800" : "text-white"
                }`}
              >
                VigiMétéo
              </span>
            </div>
            <div
              className={`text-sm ${
                isDayTime ? "text-gray-600" : "text-gray-400"
              }`}
            >
              © 2025 VigiMétéo. Tous droits réservés.
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default EnhancedWeatherHome;