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";
import axios from "axios";
import { useTranslation } from "react-i18next";
import { API_BASE_URL } from "../config";

function EnhancedWeatherHome() {
  const { t } = useTranslation();
  const [searchQuery, setSearchQuery] = useState("");
  const [locations, setLocations] = useState([]);
  const [infoMeteo, setInfoMeteo] = useState([]);
  const [activeFilter, setActiveFilter] = useState("all");
  const [currentTime, setCurrentTime] = useState(new Date());
  const { user, token } = useAuth();
  const [ville, setVille] = useState("Paris, France");
  const heure = currentTime.getHours();
  const isDayTime = heure > 6 && heure < 20;

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

    return () => clearInterval(timer);
  }, []);
  useEffect(() => {
    axios
      .post(`${API_BASE_URL}/getMeteoHome`, {
        location: ville,
      })
      .then((response) => {
        if (response.data.length === 0) {
          console.warn("Aucun infos disponible.");
        } else {
          console.log(response.data[0]);
          setInfoMeteo(response.data[0]);
        }
      })
      .catch((error) => {
        console.error("Erreur lors de la récupération des infos :", error);
      });
  }, [ville]);
  useEffect(() => {
    axios
      .get(`${API_BASE_URL}/getLocations`)
      .then((response) => {
        if (response.data.length === 0) {
          console.warn("Aucun lieu disponible.");
        } else {
          console.log(response.data);
          setLocations(response.data);
        }
      })
      .catch((error) => {
        console.error("Erreur lors de la récupération des catégories :", error);
      });
  }, []);
  const filteredLocations = locations.filter((loc) =>
    loc.toLowerCase().includes(searchQuery.toLowerCase())
  );
  const formatDate = (date) => {
    const options = { weekday: "long", day: "numeric", month: "long" };
    return date.toLocaleDateString("fr-FR", options);
  };

  const formatHeure = (h) => {
    const heureFormatee = (h % 24).toString().padStart(2, "0");
    return `${heureFormatee}:00`;
  };
  const hourlyForecast = [
    {
      time: "Maintenant",
      temp: "22°",
      icon: <Cloud className="text-indigo-500" size={24} />,
    },
    {
      time: formatHeure(heure + 1),
      temp: "22°",
      icon: <Cloud className="text-indigo-500" size={24} />,
    },
    {
      time: formatHeure(heure + 2),
      temp: "22°",
      icon: <Sun className="text-yellow-500" size={24} />,
    },
    {
      time: formatHeure(heure + 3),
      temp: "21°",
      icon: <Sun className="text-yellow-500" size={24} />,
    },
    {
      time: formatHeure(heure + 4),
      temp: "20°",
      icon: <CloudRain className="text-blue-500" size={24} />,
    },
    {
      time: formatHeure(heure + 5),
      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>

        <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`}
            >
              {t('home.title')}
            </h1>
            <p
              className={`text-xl ${
                isDayTime ? "text-gray-700" : "text-gray-200"
              } max-w-3xl mx-auto mb-10`}
            >
              {t('home.subtitle')}
            </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={t('home.searchPlaceholder')}
                  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)}
                />
              </div>
              {searchQuery.length > 0 && (
                <ul className="mt-4 space-y-2 bg-white dark:bg-gray-100 rounded-xl p-4 shadow-md">
                  {filteredLocations.length > 0 ? (
                    filteredLocations.map((loc, idx) => (
                      <li
                        key={idx}
                        className="p-2 rounded text-gray-800 hover:bg-gray-200 dark:hover:bg-gray-300 cursor-pointer"
                        onClick={() => {
                          setVille(loc);
                          setSearchQuery("");
                        }}
                      >
                        {loc}
                      </li>
                    ))
                  ) : (
                    <li className="text-gray-900 dark:text-gray-500">
                      {t('home.noCityFound')}
                    </li>
                  )}
                </ul>
              )}
            </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"
                    }`}
                  >
                    {ville}
                  </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"
                      }`}
                    >
                      {infoMeteo.temperature}°C
                    </h2>
                    <p
                      className={`text-lg ${
                        isDayTime ? "text-gray-600" : "text-gray-300"
                      }`}
                    >
                      {t('home.partlyCloudy')}
                    </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"
                    }`}
                  >
                    {t('home.feelsLike')}
                  </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"
                      }`}
                    >
                      {infoMeteo.temperature - 2}°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"
                    }`}
                  >
                    {t('home.humidity')}
                  </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"
                      }`}
                    >
                      {infoMeteo.humidity}%
                    </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"
                    }`}
                  >
                    {t('home.wind')}
                  </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"
                      }`}
                    >
                      {infoMeteo.wind_speed} 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"
                    }`}
                  >
                    {t('home.rain')}
                  </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"
                    }`}
                  >
                    {t('home.sunrise')}
                  </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"
                    }`}
                  >
                    {t('home.sunset')}
                  </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"
              }`}
            >
              {t('home.hourlyForecast')}
            </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"
              }`}
            >
              {t('home.dailyForecast')}
            </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"
          }`}
        >
          {t('home.weatherServices')}
        </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"
                }`}
              >
                {t('home.viewObjectsTitle')}
              </h3>
              <p
                className={`${
                  isDayTime ? "text-gray-600" : "text-gray-300"
                } mb-4`}
              >
                {t('home.viewObjectsDesc')}
              </p>
              <a
                href="/gestionObjets"
                className={`flex items-center ${
                  isDayTime
                    ? "text-indigo-600 hover:text-indigo-700"
                    : "text-indigo-400 hover:text-indigo-300"
                }`}
              >
                {t('home.viewObjectsBtn')} <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"
                  }`}
                >
                  {t('home.signupTitle')}
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  {t('home.signupDesc')}
                </p>
                <a
                  href="/signup"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  {t('home.signupBtn')} <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"
                  }`}
                >
                  {t('home.loginTitle')}
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  {t('home.loginDesc')}
                </p>
                <a
                  href="/login"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  {t('home.loginBtn')} <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"
                  }`}
                >
                  {t('home.consultObjectsTitle')}
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  {t('home.consultObjectsDesc')}
                </p>
                <a
                  href="/gestionObjets"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  {t('home.consultObjectsBtn')} <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"
                  }`}
                >
                  {t('home.addObjTitle')}
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  {t('home.addObjDesc')}
                </p>
                <a
                  href="/ajouterObjet"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  {t('home.addObjBtn')} <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"
                  }`}
                >
                  {t('home.adminDashTitle')}
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  {t('home.adminDashDesc')}
                </p>
                <a
                  href="/dashboard"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  {t('home.adminDashBtn')}
                  <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"
                  }`}
                >
                  {t('home.manageObjTitle')}
                </h3>
                <p
                  className={`${
                    isDayTime ? "text-gray-600" : "text-gray-300"
                  } mb-4`}
                >
                  {t('home.manageObjDesc')}
                </p>
                <a
                  href="/gestion"
                  className={`flex items-center ${
                    isDayTime
                      ? "text-indigo-600 hover:text-indigo-700"
                      : "text-indigo-400 hover:text-indigo-300"
                  }`}
                >
                  {t('home.manageObjBtn')} <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"
              }`}
            >
              {t('home.footerRights')}
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default EnhancedWeatherHome;