import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Element } from "react-scroll";

import { FaWhatsapp, FaPhone, FaEnvelope } from "react-icons/fa";
import { useTranslation } from "react-i18next";
import "../../../index.css";


const home1 = "https://i.imgur.com/g4fVyLj.jpg"; 
const home1Mobile = "https://i.imgur.com/NNeCIAj.jpg"; 

const home2 = "https://i.imgur.com/d9enpvc.jpg"; 
const home2Mobile = "https://i.imgur.com/a85P9Q8.jpg"; 

const home3 = "https://i.imgur.com/nWTJcjz.jpg"; 

const home4 = "https://i.imgur.com/btajXYO.jpg"; 
const home4Mobile = "https://i.imgur.com/BZnHa4v.jpg";

const home6 = "https://i.imgur.com/gtwlzDA.jpg"; 
const home6Mobile = "https://i.imgur.com/xs8OB15.jpg"; 

const home7 = "https://i.imgur.com/kSErZeJ.jpg"; 
const home7Mobile = "https://i.imgur.com/02ftPiK.jpg";

const home8 = "https://i.imgur.com/0gsQF8L.jpg"; 
const home8Mobile = "https://i.imgur.com/vey37dG.jpg"; 


const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.3, when: "beforeChildren" },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.8 } },
};

const Home = () => {
  const { t } = useTranslation();
  const [currentIndex, setCurrentIndex] = useState(0);
  const [menuOpen, setMenuOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(false);

  const phrases = t("home.phrases", { returnObjects: true });

  useEffect(() => {
    const updateSize = () => setIsMobile(window.innerWidth < 640);
    updateSize();
    window.addEventListener("resize", updateSize);
    return () => window.removeEventListener("resize", updateSize);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % phrases.length);
    }, 4000);
    return () => clearInterval(interval);
  }, [phrases.length]);

  const nextPhrase = () => {
    setCurrentIndex((prev) => (prev + 1) % phrases.length);
  };

  const prevPhrase = () => {
    setCurrentIndex((prev) => (prev - 1 + phrases.length) % phrases.length);
  };

  const getBackgroundImage = () => {
    switch (currentIndex) {
      case 0:
        return isMobile ? home2Mobile : home2;
      case 1:
        return home3;
      case 2:
        return isMobile ? home4Mobile : home4;
      case 3:
        return isMobile ? home6Mobile : home6;
      case 4:
        return isMobile ? home8Mobile : home8;
      case 5:
        return isMobile ? home7Mobile : home7;
      case 6:
        return isMobile ? home1Mobile : home1;
      default:
        return "";
    }
  };

  return (
    <Element name="home">
      <div className="relative h-screen w-full" dir="rtl">
        {/* الخلفية */}
        <div
          className="absolute inset-0 bg-cover bg-center z-0 transition-all duration-1000"
          style={{ backgroundImage: `url('${getBackgroundImage()}')` }}
          loading="eager"
          fetchPriority="high"
        />
        <div className="absolute inset-0 bg-black/50 z-10" />

        {/* المحتوى */}
        <div className="relative z-20 flex flex-col items-center justify-center h-full w-full px-4 text-white text-center">
          <motion.div
            className="flex flex-col items-center justify-center gap-y-6 w-full max-w-screen-sm sm:max-w-2xl md:max-w-4xl"
            variants={containerVariants}
            initial="hidden"
            animate="visible"
          >
            {/* العنوان المتغير */}
            <motion.div
              className="relative flex items-center justify-between w-full px-2 sm:px-4"
              variants={itemVariants}
            >
              <motion.button
                onClick={prevPhrase}
                className="text-2xl sm:text-4xl p-1 sm:p-2 rounded bg-transparent text-[var(--primary-color)] hover:scale-110 transition-transform z-10"
                aria-label="السابق"
              >
                <svg
                  viewBox="0 0 32 32"
                  strokeWidth={2}
                  stroke="currentColor"
                  className="w-8 h-8 sm:w-10 sm:h-10"
                  fill="none"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M11 6l10 10-10 10"
                  />
                </svg>
              </motion.button>

              <div className="relative h-[120px] sm:h-[150px] w-full flex justify-center items-center px-2">
                <AnimatePresence mode="wait">
                  <motion.span
                    key={currentIndex}
                    className="absolute text-xl sm:text-3xl md:text-5xl font-bold text-[var(--primary-color)] text-center px-2 max-w-full break-words"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -20 }}
                    transition={{ duration: 0.5 }}
                  >
                    {phrases[currentIndex]}
                  </motion.span>
                </AnimatePresence>
              </div>

              <motion.button
                onClick={nextPhrase}
                className="text-2xl sm:text-4xl p-1 sm:p-2 rounded bg-transparent text-[var(--primary-color)] hover:scale-110 transition-transform z-10"
                aria-label="التالي"
              >
                <svg
                  viewBox="0 0 32 32"
                  strokeWidth={2}
                  stroke="currentColor"
                  className="w-8 h-8 sm:w-10 sm:h-10"
                  fill="none"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M21 6L11 16l10 10"
                  />
                </svg>
              </motion.button>
            </motion.div>

            {/* وصف إضافي */}
            <motion.div className="w-full px-2 sm:px-4" variants={itemVariants}>
              <div className="text-sm sm:text-lg md:text-2xl text-white space-y-1">
                <p>{t("home.subtitle1")}</p>
                <p>{t("home.subtitle2")}</p>
              </div>
            </motion.div>

            {/* زر تواصل معنا  */}
            <motion.div
              className="w-full flex justify-center"
              variants={itemVariants}
            >
              <div className="relative">
                <motion.button
                  onClick={() => setMenuOpen((prev) => !prev)}
                  whileHover={{ scale: 1.05 }}
                  className="relative inline-flex items-center justify-center px-8 py-2.5 overflow-hidden tracking-tighter text-white bg-[#EB8317] rounded-md group"
                  style={{ zIndex: 30 }}
                >
                  <span className="absolute w-0 h-0 transition-all duration-500 ease-out bg-[rgba(10,25,70,0.9)]  rounded-full group-hover:w-56 group-hover:h-56"></span>
                  <span className="absolute bottom-0 left-0 h-full -ml-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-auto h-full opacity-100 object-stretch"
                      viewBox="0 0 487 487"
                    >
                      <path
                        fillOpacity=".1"
                        fillRule="nonzero"
                        fill="#FFF"
                        d="M0 .3c67 2.1 134.1 4.3 186.3 37 52.2 32.7 89.6 95.8 112.8 150.6 23.2 54.8 32.3 101.4 61.2 149.9 28.9 48.4 77.7 98.8 126.4 149.2H0V.3z"
                      />
                    </svg>
                  </span>
                  <span className="absolute top-0 right-0 w-12 h-full -mr-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="object-cover w-full h-full"
                      viewBox="0 0 487 487"
                    >
                      <path
                        fillOpacity=".1"
                        fillRule="nonzero"
                        fill="#FFF"
                        d="M487 486.7c-66.1-3.6-132.3-7.3-186.3-37s-95.9-85.3-126.2-137.2c-30.4-51.8-49.3-99.9-76.5-151.4C70.9 109.6 35.6 54.8.3 0H487v486.7z"
                      />
                    </svg>
                  </span>
                  <span className="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-200"></span>
                  <span className="relative text-base font-semibold">
                    {t("home.contactUs")}
                  </span>
                </motion.button>
                <AnimatePresence>
                  {menuOpen && (
                    <motion.div
                      initial={{ opacity: 0, x: 20, y: -10 }}
                      animate={{ opacity: 1, x: 0, y: 10 }}
                      exit={{ opacity: 0, x: 20, y: -10 }}
                      transition={{ duration: 0.3 }}
                      className={`absolute top-16 ${
                        isMobile ? "right-0" : "sm:right-32"
                      } bg-[rgba(10,25,70,0.9)] text-white rounded-lg shadow-lg py-5 px-5 z-40`}
                    >
                      <a
                        href="https://wa.me/963965656631"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
                      >
                        <FaWhatsapp className="text-xl" />
                        <span>963965656631</span>
                      </a>
                      <a
                        href="https://wa.me/963965656635"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
                      >
                        <FaWhatsapp className="text-xl" />
                        <FaPhone className="text-xl" />
                        <span>963965656635</span>
                      </a>
                      <a
                        href="mailto:info@TPS-STATIONS.COM"
                        className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
                      >
                        <FaEnvelope className="text-xl" />
                        <span>info@TPS-STATIONS.COM</span>
                      </a>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </Element>
  );
};

export default Home;