import React, { useState, useEffect, useRef } from "react";
import {
  fetchHoroscopeData,
  fallbackHoroscopeContent,
} from "./services/horoscopeService";

// Zodiac Icon Components using Tabler Icons SVGs
const ZodiacIcon = ({ sign, size = 24, className = "" }) => {
  const iconPaths = {
    taurus: [
      "M6 3a6 6 0 0 0 12 0",
      "M12 15m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0",
    ],
    sagittarius: ["M4 20l16 -16", "M13 4h7v7", "M6.5 12.5l5 5"],
    pisces: ["M5 3a21 21 0 0 1 0 18", "M19 3a21 21 0 0 0 0 18", "M5 12l14 0"],
    libra: ["M5 20l14 0", "M5 17h5v-.3a7 7 0 1 1 4 0v.3h5"],
    gemini: [
      "M3 3a21 21 0 0 0 18 0",
      "M3 21a21 21 0 0 1 18 0",
      "M7 4.5l0 15",
      "M17 4.5l0 15",
    ],
    leo: [
      "M13 17a4 4 0 1 0 8 0",
      "M6 16m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
      "M11 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0",
      "M7 7c0 3 2 5 2 9",
      "M15 7c0 4 -2 6 -2 10",
    ],
    virgo: [
      "M3 4a2 2 0 0 1 2 2v9",
      "M5 6a2 2 0 0 1 4 0v9",
      "M9 6a2 2 0 0 1 4 0v10a7 5 0 0 0 7 5",
      "M12 21a7 5 0 0 0 7 -5v-2a3 3 0 0 0 -6 0",
    ],
    aquarius: [
      "M3 10l3 -3l3 3l3 -3l3 3l3 -3l3 3",
      "M3 17l3 -3l3 3l3 -3l3 3l3 -3l3 3",
    ],
    aries: ["M12 5a5 5 0 1 0 -4 8", "M16 13a5 5 0 1 0 -4 -8", "M12 21l0 -16"],
    cancer: [
      "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
      "M18 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
      "M3 12a10 6.5 0 0 1 14 -6.5",
      "M21 12a10 6.5 0 0 1 -14 6.5",
    ],
    scorpio: [
      "M3 4a2 2 0 0 1 2 2v9",
      "M5 6a2 2 0 0 1 4 0v9",
      "M9 6a2 2 0 0 1 4 0v10a3 3 0 0 0 3 3h5l-3 -3m0 6l3 -3",
    ],
    capricorn: [
      "M4 4a3 3 0 0 1 3 3v9",
      "M7 7a3 3 0 0 1 6 0v11a3 3 0 0 1 -3 3",
      "M16 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
    ],
  };

  const paths = iconPaths[sign] || [];

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      {paths.map((path, index) => (
        <path key={index} d={path} />
      ))}
    </svg>
  );
};

const HoroscopeApp = () => {
  const [selectedSign, setSelectedSign] = useState("virgo");
  const [selectedGender, setSelectedGender] = useState("female");
  const [selectedPeriod, setSelectedPeriod] = useState("today");
  const [selectedCategory, setSelectedCategory] = useState("overall");
  const [isDarkMode, setIsDarkMode] = useState(false);

  const [horoscopeData, setHoroscopeData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const zodiacScrollRef = useRef(null);

  const loadHoroscopeData = async (category, period) => {
    setIsLoading(true);
    setError(null);

    try {
      const data = await fetchHoroscopeData(category, period);

      if (data && data.data) {
        setHoroscopeData(data);
      } else {
        setHoroscopeData(null);
        setError("No data available from GitHub, using fallback content");
      }
    } catch (err) {
      setError("Failed to load horoscope data");
      setHoroscopeData(null);
    } finally {
      setIsLoading(false);
    }
  };

  const zodiacSigns = [
    {
      id: "aries",
      name: "Aries",
      dates: "Mar 21 - Apr 19",
      emoji: "🐏",
      symbol: "♈",
      imageFile: "ARIES.png",
    },
    {
      id: "taurus",
      name: "Taurus",
      dates: "April 20 - May 20",
      emoji: "🐂",
      symbol: "♉",
      imageFile: "TAURUS.png",
    },
    {
      id: "gemini",
      name: "Gemini",
      dates: "May 21 - Jun 20",
      emoji: "👯",
      symbol: "♊",
      imageFile: "GEMINI.png",
    },
    {
      id: "cancer",
      name: "Cancer",
      dates: "Jun 21 - Jul 22",
      emoji: "🦀",
      symbol: "♋",
      imageFile: "CANCER.png",
    },
    {
      id: "leo",
      name: "Leo",
      dates: "Jul 23 - Aug 22",
      emoji: "🦁",
      symbol: "♌",
      imageFile: "LEO.png",
    },
    {
      id: "virgo",
      name: "Virgo",
      dates: "Aug 23 - Sep 22",
      emoji: "👸",
      symbol: "♍",
      imageFile: "VIRGO.png",
    },
    {
      id: "libra",
      name: "Libra",
      dates: "Sep 23 - Oct 22",
      emoji: "⚖️",
      symbol: "♎",
      imageFile: "LIBRA.png",
    },
    {
      id: "scorpio",
      name: "Scorpio",
      dates: "Oct 23 - Nov 21",
      emoji: "🦂",
      symbol: "♏",
      imageFile: "SCORPIO.png",
    },
    {
      id: "sagittarius",
      name: "Sagittarius",
      dates: "Nov 22 - Dec 21",
      emoji: "🏹",
      symbol: "♐",
      imageFile: "SAGITTARIUS.png",
    },
    {
      id: "capricorn",
      name: "Capricorn",
      dates: "Dec 22 - Jan 19",
      emoji: "🐐",
      symbol: "♑",
      imageFile: "CAPRICORN.png",
    },
    {
      id: "aquarius",
      name: "Aquarius",
      dates: "Jan 20 - Feb 18",
      emoji: "🏺",
      symbol: "♒",
      imageFile: "AQUARIUS.png",
    },
    {
      id: "pisces",
      name: "Pisces",
      dates: "Feb 19 - Mar 20",
      emoji: "🐠",
      symbol: "♓",
      imageFile: "PISCES.png",
    },
  ];

  const periods = [
    { id: "today", name: "Today" },
    { id: "week", name: "Week" },
    { id: "month", name: "Month" },
    { id: "year", name: "Year" },
  ];

  const categories = [
    {
      id: "overall",
      name: "Overall",
      icon: <i className="ri-dashboard-line"></i>,
    },
    {
      id: "fortune",
      name: "Fortune",
      icon: <i className="ri-seedling-line"></i>,
    },
    {
      id: "health",
      name: "Health",
      icon: <i className="ri-open-arm-line"></i>,
    },
    { id: "love", name: "Love", icon: <i className="ri-hearts-line"></i> },
    {
      id: "finance",
      name: "Finance",
      icon: <i className="ri-wallet-3-line"></i>,
    },
    {
      id: "relationship",
      name: "Relationship",
      icon: <i className="ri-team-line"></i>,
    },
  ];

  // const horoscopeContent = {
  //   overall: {
  //     today:
  //       "Today brings a harmonious blend of opportunities and challenges across all aspects of your life. Your natural instincts will guide you well.",
  //     week: "This week promises balanced growth in multiple areas. Trust your intuition as you navigate new experiences.",
  //     month:
  //       "A month of significant personal development awaits. Embrace change and new perspectives with confidence.",
  //     year: "This year marks a transformative period of growth, bringing profound insights and meaningful achievements.",
  //   },
  //   love: {
  //     today:
  //       "Love is in the air today! Your romantic side is highlighted, making it a perfect day for expressing your feelings.",
  //     week: "This week brings romantic opportunities and deepening connections with your loved ones.",
  //     month:
  //       "A month of passionate encounters and meaningful relationships awaits you.",
  //     year: "This year will be transformative for your love life, bringing lasting happiness.",
  //   },
  //   health: {
  //     today:
  //       "Your energy levels are high today. Focus on maintaining balance between work and rest.",
  //     week: "Pay attention to your physical wellbeing this week. Small changes can make big differences.",
  //     month:
  //       "This month emphasizes the importance of mental and physical health harmony.",
  //     year: "A year of wellness and vitality lies ahead. Make health your priority.",
  //   },
  //   relationship: {
  //     today:
  //       "Relationships flourish under today's cosmic energy. Communication is key to success.",
  //     week: "Strengthen your bonds with family and friends through meaningful conversations.",
  //     month:
  //       "Social connections expand this month, bringing new friendships and opportunities.",
  //     year: "Your social circle will grow significantly, enriching your life in unexpected ways.",
  //   },
  //   finance: {
  //     today:
  //       "Financial opportunities present themselves today. Stay alert for new possibilities.",
  //     week: "This week favors careful financial planning and smart investments.",
  //     month:
  //       "Money matters require attention this month. Budget wisely for future security.",
  //     year: "Financial growth and stability are highlighted throughout this year.",
  //   },
  //   fortune: {
  //     today:
  //       "Lucky energies surround you today. Trust your instincts and take calculated risks for unexpected rewards.",
  //     week: "Fortune favors the bold this week. Positive surprises and serendipitous encounters await.",
  //     month:
  //       "A month of abundance and good fortune unfolds. Opportunities align perfectly with your goals.",
  //     year: "This year brings remarkable luck and prosperity. Your efforts will be rewarded beyond expectations.",
  //   },
  // };

  // Function to get image path based on gender
  const getImagePath = (sign) => {
    if (!sign.imageFile) return null;
    return `/img/${selectedGender}/${sign.imageFile}`;
  };

  const getCurrentSign = () => {
    return zodiacSigns.find((sign) => sign.id === selectedSign);
  };

  const getHoroscopeText = () => {
    // Hiển thị loading state
    if (isLoading) {
      return "Loading your horoscope...";
    }

    if (!horoscopeData || error) {
      if (selectedPeriod !== "today") {
        return "Upgrade to Premium to unlock weekly, monthly, and yearly horoscope insights. Get deeper cosmic guidance and detailed predictions for your future.";
      }
      return fallbackHoroscopeContent[selectedCategory][selectedPeriod];
    }

    const currentSign = getCurrentSign();
    if (currentSign && horoscopeData.data[currentSign.id]) {
      const signData = horoscopeData.data[currentSign.id];
      return (
        signData[selectedGender] ||
        signData.male ||
        signData.female ||
        "No horoscope available for today."
      );
    }

    return "No horoscope available for this sign.";
  };

  const getPeriodTitle = () => {
    const titles = {
      today: "Horoscope for Today",
      week: "Horoscope for This Week",
      month: "Horoscope for This Month",
      year: "Horoscope for This Year",
    };
    return titles[selectedPeriod];
  };

  const toggleTheme = () => {
    setIsDarkMode(!isDarkMode);
  };

  // Scroll to selected zodiac sign on mount and selection change
  useEffect(() => {
    if (zodiacScrollRef.current) {
      const selectedElement = zodiacScrollRef.current.querySelector(
        `[data-sign="${selectedSign}"]`
      );
      if (selectedElement) {
        selectedElement.scrollIntoView({
          behavior: "smooth",
          block: "nearest",
          inline: "center",
        });
      }
    }
  }, [selectedSign]);

  // Load horoscope data when category or period changes
  useEffect(() => {
    loadHoroscopeData(selectedCategory, selectedPeriod);
  }, [selectedCategory, selectedPeriod]);

  // Handle zodiac sign selection with auto-center
  const handleSignSelect = (signId) => {
    setSelectedSign(signId);
  };

  return (
    <div
      className={`min-h-screen transition-all duration-500 ${
        isDarkMode ? "text-white" : "text-gray-800"
      }`}
      style={{
        background: isDarkMode
          ? "linear-gradient(135deg, #7E437B 0%, #0B194A 50%, #221C96 100%)"
          : "linear-gradient(135deg, #A19BFF 0%, #FCC6EA 50%, #BADCFF 100%)",
      }}
    >
      <div className="max-w-6xl mx-auto p-5">
        {/* Header Controls */}
        <div className="flex justify-between items-center mb-6 md:mb-8">
          {/* Theme Toggle - Icon only for all screen sizes */}
          <button
            onClick={toggleTheme}
            className={`flex items-center justify-center w-12 h-12 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 ${
              isDarkMode
                ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
                : "bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100"
            }`}
          >
            <i
              className={`text-xl ${
                isDarkMode ? "ri-sun-line" : "ri-moon-line"
              }`}
            ></i>
          </button>

          {/* App Icon - Visible on mobile - Fixed centering */}
          <div className="sm:hidden flex-1 flex justify-center">
            <div className="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full shadow-lg">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="icon icon-tabler icons-tabler-outline icon-tabler-crystal-ball"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M6.73 17.018a8 8 0 1 1 10.54 0" />
                <path d="M5 19a2 2 0 0 0 2 2h10a2 2 0 1 0 0 -4h-10a2 2 0 0 0 -2 2z" />
                <path d="M11 7a3 3 0 0 0 -3 3" />
              </svg>
            </div>
          </div>

          {/* Gender Selection - Toggle style on mobile, tabs on desktop */}
          <button
            onClick={() =>
              setSelectedGender(selectedGender === "male" ? "female" : "male")
            }
            className={`flex items-center justify-center w-12 h-12 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 sm:hidden ${
              isDarkMode
                ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
                : "bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100"
            }`}
          >
            <i
              className={
                selectedGender === "male"
                  ? "ri-women-line text-xl"
                  : "ri-men-line text-xl"
              }
            ></i>
          </button>

          {/* Gender Selection - Desktop tabs */}
          <div
            className={`hidden sm:flex rounded-full p-1 shadow-lg ${
              isDarkMode ? "bg-white bg-opacity-10" : "bg-white bg-opacity-90"
            }`}
          >
            <button
              onClick={() => setSelectedGender("female")}
              className={`px-3 md:px-6 py-2 rounded-full font-medium transition-all ${
                selectedGender === "female"
                  ? "bg-pink-400 text-white shadow-md"
                  : isDarkMode
                  ? "text-white hover:text-pink-300"
                  : "text-gray-600 hover:text-pink-400"
              }`}
            >
              <span>Female</span>
            </button>
            <button
              onClick={() => setSelectedGender("male")}
              className={`px-3 md:px-6 py-2 rounded-full font-medium transition-all ${
                selectedGender === "male"
                  ? "bg-blue-400 text-white shadow-md"
                  : isDarkMode
                  ? "text-white hover:text-blue-300"
                  : "text-gray-600 hover:text-blue-400"
              }`}
            >
              <span>Male</span>
            </button>
          </div>
        </div>

        {/* App Title - Hidden on mobile */}
        <div className="text-center mb-6 md:mb-10 hidden sm:block">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full mb-4 shadow-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="icon icon-tabler icons-tabler-outline icon-tabler-crystal-ball"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M6.73 17.018a8 8 0 1 1 10.54 0" />
              <path d="M5 19a2 2 0 0 0 2 2h10a2 2 0 1 0 0 -4h-10a2 2 0 0 0 -2 2z" />
              <path d="M11 7a3 3 0 0 0 -3 3" />
            </svg>
          </div>
          <h1 className="text-4xl font-bold mb-2">Horoscope App</h1>
        </div>

        {/* Zodiac Signs Grid - Single Row */}
        <div
          className="w-full overflow-x-auto mb-6 md:mb-10"
          ref={zodiacScrollRef}
        >
          <div className="flex justify-start md:justify-center gap-2 md:gap-3 pb-4 px-4 min-w-max py-2">
            {zodiacSigns.map((sign) => (
              <div
                key={sign.id}
                data-sign={sign.id}
                onClick={() => handleSignSelect(sign.id)}
                className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 flex-shrink-0 py-1"
              >
                <div
                  className={`rounded-full p-0.5 transition-all duration-300 ${
                    selectedSign === sign.id
                      ? "w-24 h-24 md:w-28 md:h-28 shadow-lg"
                      : "w-20 h-20 md:w-24 md:h-24"
                  }`}
                  style={{
                    background:
                      selectedSign === sign.id
                        ? "linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)"
                        : "linear-gradient(135deg, #07090A 0%, #979999 100%)",
                  }}
                >
                  {/* Background layer for separation */}
                  <div
                    className={`w-full h-full rounded-full p-0.5 ${
                      isDarkMode ? "bg-gray-900" : "bg-gray-50"
                    }`}
                  >
                    <div
                      className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
                        isDarkMode ? "bg-gray-800" : "bg-gray-100"
                      }`}
                    >
                      {getImagePath(sign) ? (
                        <img
                          src={getImagePath(sign)}
                          alt={sign.name}
                          className="w-full h-full object-cover rounded-full"
                          onError={(e) => {
                            e.target.style.display = "none";
                            e.target.nextSibling.style.display = "block";
                          }}
                        />
                      ) : (
                        <ZodiacIcon
                          sign={sign.id}
                          size={selectedSign === sign.id ? 30 : 28}
                          className="text-gray-600"
                        />
                      )}
                      <span
                        style={{
                          display: getImagePath(sign) ? "none" : "none",
                        }}
                      >
                        {sign.emoji}
                      </span>
                    </div>
                  </div>
                </div>
                <p
                  className={`text-xs font-medium mt-3 text-center flex items-center justify-center gap-1 transition-all duration-300 ${
                    selectedSign === sign.id ? "font-bold" : ""
                  }`}
                >
                  <ZodiacIcon
                    sign={sign.id}
                    size={selectedSign === sign.id ? 17 : 16}
                    className="text-current"
                  />
                  {sign.name}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* Period Selection */}
        <div className="flex justify-center mb-6 md:mb-8">
          <div
            className={`flex rounded-full p-1 shadow-lg ${
              isDarkMode ? "bg-white bg-opacity-10" : "bg-white bg-opacity-90"
            }`}
          >
            {periods.map((period) => (
              <button
                key={period.id}
                onClick={() => setSelectedPeriod(period.id)}
                className={`px-4 md:px-6 py-2 md:py-3 rounded-full font-medium transition-all text-sm md:text-base flex items-center gap-1 ${
                  selectedPeriod === period.id
                    ? "bg-blue-400 text-white shadow-md"
                    : isDarkMode
                    ? "text-white hover:text-blue-300"
                    : "text-gray-600 hover:text-blue-400"
                }`}
              >
                {period.name}
                {period.id !== "today" && (
                  <i className="ri-lock-line text-xs opacity-70"></i>
                )}
              </button>
            ))}
          </div>
        </div>

        {/* Category Selection */}
        <div className="flex justify-center flex-wrap gap-2 md:gap-3 mb-6 md:mb-10">
          {categories.map((category) => (
            <button
              key={category.id}
              onClick={() => setSelectedCategory(category.id)}
              className={`flex items-center gap-2 px-3 md:px-4 py-2 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 text-sm md:text-base ${
                selectedCategory === category.id
                  ? "bg-purple-400 text-white shadow-lg"
                  : isDarkMode
                  ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
                  : "bg-white bg-opacity-90 text-gray-600 hover:bg-opacity-100"
              }`}
            >
              {category.icon}
              {category.name}
            </button>
          ))}
        </div>

        {/* Horoscope Content */}
        <div
          className={`rounded-3xl p-8 mb-4 shadow-2xl backdrop-blur-lg transition-all ${
            isDarkMode
              ? "bg-white bg-opacity-10 border border-white border-opacity-20"
              : "bg-white bg-opacity-95"
          }`}
        >
          <div className="flex items-center gap-6 mb-8">
            <div
              className="w-20 h-20 rounded-full p-0.5 shadow-lg"
              style={{
                background: "linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)",
              }}
            >
              {/* Background layer for separation */}
              <div
                className={`w-full h-full rounded-full p-0.5 ${
                  isDarkMode ? "bg-gray-900" : "bg-gray-50"
                }`}
              >
                <div
                  className={`w-full h-full rounded-full flex items-center justify-center text-2xl overflow-hidden ${
                    isDarkMode ? "bg-gray-800" : "bg-gray-100"
                  }`}
                >
                  {getImagePath(getCurrentSign()) ? (
                    <img
                      src={getImagePath(getCurrentSign())}
                      alt={getCurrentSign()?.name}
                      className="w-full h-full object-cover rounded-full"
                      onError={(e) => {
                        e.target.style.display = "none";
                        e.target.nextSibling.style.display = "block";
                      }}
                    />
                  ) : (
                    <ZodiacIcon
                      sign={getCurrentSign()?.id}
                      size={32}
                      className="text-gray-600"
                    />
                  )}
                  <span
                    style={{
                      display: getImagePath(getCurrentSign()) ? "none" : "none",
                    }}
                  >
                    {getCurrentSign()?.emoji}
                  </span>
                </div>
              </div>
            </div>
            <div className="flex-1">
              <h2 className="text-3xl font-bold text-blue-400 flex items-center gap-2 mb-2">
                {getPeriodTitle()}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="icon icon-tabler icons-tabler-outline icon-tabler-trending-up"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M3 17l6 -6l4 4l8 -8" />
                  <path d="M14 7l7 0l0 7" />
                </svg>
              </h2>
              <div className="flex items-center gap-2">
                <ZodiacIcon
                  sign={getCurrentSign()?.id}
                  size={20}
                  className="text-current"
                />
                <span className="font-semibold">
                  {getCurrentSign()?.name} ({getCurrentSign()?.dates})
                </span>
              </div>
            </div>
          </div>
          <div className="text-lg leading-relaxed mb-8">
            {isLoading ? (
              <div className="flex items-center justify-center py-4">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400"></div>
                <span className="ml-2">Loading your horoscope...</span>
              </div>
            ) : (
              <p>{getHoroscopeText()}</p>
            )}

            {error && (
              <div className="text-sm opacity-70 mt-2">
                <i className="ri-information-line mr-1"></i>
                Using cached content
              </div>
            )}
          </div>{" "}
        </div>

        {/* Footer */}
        <div className="text-center text-sm opacity-70 mt-4 space-y-2">
          <p className="flex items-center justify-center gap-2">
            <i className="ri-sparkling-line"></i>
            Discover your daily horoscope and unlock the secrets of the stars
            <i className="ri-sparkling-line"></i>
          </p>
          <p className="text-xs opacity-60">
            © 2025 AstroLens Horoscope - All rights reserved.
          </p>
        </div>
      </div>
    </div>
  );
};

export default HoroscopeApp;