import React, { useEffect, useState } from "react";
import { FaShoppingCart } from "react-icons/fa";
import { GiShoppingCart } from "react-icons/gi";
import { Link } from "react-router-dom";
import AuthButton from "../components/AuthButton";
import axiosInstance from "../api/axiosInstance";
import useAuth from "../context/AuthContext";
import Footer from "../components/Elements/Footer";

// import { useAuth } from "../context/AuthContext";

const LandingPage = () => {
  // const { isAuthenticated } = useAuth();
  // const navigate = useNavigate();

  // useEffect(() => {
  //   if (!isAuthenticated) {
  //     navigate('/login'); // Redirect ke halaman login jika tidak terautentikasi
  //   }
  // }, [isAuthenticated, navigate]);

const { isAuthenticated } = useAuth();
  const [thisIsAuthenticated, setThisIsAuthenticated] = useState(isAuthenticated);
  
  useEffect(() => {
    // Check authentication status (e.g., by checking token in localStorage)
    const token = localStorage.getItem('token');
    if (token) {
      setThisIsAuthenticated(true);
    }
  }, []);

  const handleLogout = async () => {
    try {
      setThisIsAuthenticated(false);
      localStorage.removeItem('token');
      await axiosInstance.get('/logout');
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      {/* Navbar */}
      <nav className="bg-white shadow-md px-8 py-3 flex justify-between items-center">
        <div className="text-[#AFA0D7] text-2xl font-firamono font-bold">
          <h1>ESKAYVIE</h1>
        </div>
        <div className="flex items-center">
          <ul className="text-purple-600 text-lg flex gap-10 mr-20">
            <li>
              <Link
                to="/home"
                className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]"
              >
                Home
              </Link>
            </li>
            <li>
              <div className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]">
                About Us
              </div>
            </li>
            <li className="relative group">
              <div className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]">
                Shop
              </div>
              <div className="absolute left-0 mt-2 hidden group-hover:block bg-white shadow-lg rounded-lg w-auto">
                <ul className="py-2 text-sm text-gray-700">
                  <li>
                    <div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">
                      Health & Wellness
                    </div>
                  </li>
                  <li>
                    <div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">
                      Beauty
                    </div>
                  </li>
                  <li>
                    <div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">
                      Home & Living
                    </div>
                  </li>
                  <li>
                    <div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">
                      Lifestyle
                    </div>
                  </li>
                  <li>
                    <div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">
                      Sunnah Wellness
                    </div>
                  </li>
                  <li>
                    <div className="block px-4 py-2 hover:bg-purple-50 cursor-pointer text-[#9B8BC4]">
                      Merchandise
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]">
                Blog
              </div>
            </li>
            <li>
              <div className="hover:text-purple-800 cursor-pointer text-[#9B8BC4]">
                Contact Us
              </div>
            </li>
          </ul>
          <div className="flex items-center space-x-4">
            <div className="text-purple-600 hover:text-purple-800 cursor-pointer">
              <GiShoppingCart className="text-4xl" />
            </div>
            <button className="text-white px-5 py-1 rounded-lg hover:bg-purple-800 cursor-pointer shadow-lg bg-[#AFA0D7]">
              Login
            </button>
            <AuthButton isAuthenticated={thisIsAuthenticated} handleLogout={handleLogout}/>
          </div>
        </div>
      </nav>

      <section className="text-center py-16">
        <h2 className="text-3xl font-bold text-black">Our Products</h2>
        <p className="text-lg text-gray-600 mt-2">
          Explore a range of products meticulously crafted to inspire and
          enhance a healthier, more confident lifestyle.
        </p>
        <div className="flex overflow-x-scroll-hidden space-x-6 mt-10 p-4 justify-center">
          <div className="bg-gray-100 p-10 rounded-lg shadow-lg">
            <img
              src="/public/image/eskayvie1.png"
              alt="Health & Wellness"
              className="w-full h-60 object-cover rounded-md"
            />
            <h3 className="mt-4 text-xl font-semibold">Health & Wellness</h3>
          </div>
          <div className="bg-gray-100 p-10 rounded-lg shadow-lg">
            <img
              src="/public/image/eskayvie2.png"
              alt="Beauty"
              className="w-full h-60 object-cover rounded-md"
            />
            <h3 className="mt-4 text-xl font-semibold">Beauty</h3>
          </div>
          <div className="bg-gray-100 p-10 rounded-lg shadow-lg">
            <img
              src="/public/image/eskayvie3.png"
              alt="Home & Living"
              className="w-full h-60 object-cover rounded-md"
            />
            <h3 className="mt-4 text-xl font-semibold">Home & Living</h3>
          </div>
          <div className="bg-gray-100 p-10 rounded-lg shadow-lg">
            <img
              src="/public/image/eskayvie4.png"
              alt="Home & Living"
              className="w-full h-60 object-cover rounded-md"
            />
            <h3 className="mt-4 text-xl font-semibold">Home & Living</h3>
          </div>
          <div className="bg-gray-100 p-10 rounded-lg shadow-lg">
            <img
              src="/public/image/eskayvie5.png"
              alt="Home & Living"
              className="w-full h-60 object-cover rounded-md"
            />
            <h3 className="mt-4 text-xl font-semibold">Home & Living</h3>
          </div>
        </div>
      </section>

      <section className="bg-purple-100 py-16 text-center">
        <div className="container mx-auto flex flex-col md:flex-row items-center">
          <img
            src="/public/image/doctor.png"
            alt="Doctor"
            className="w-full md:w-1/2 object-cover"
          />
          <div className="text-left p-8">
            <h2 className="text-3xl font-bold text-purple-700">
              Our Product Standards
            </h2>
            <p className="text-lg text-gray-600 mt-4">
              From the beginning, it has been our top priority to ensure that
              our products are safe and effective, and that they meet global
              security standards.
            </p>
          </div>
        </div>
      </section>

      <section className="bg-[#AFA0D7] py-16  mt-7 text-center rounded-xl">
                <div className="flex justify-center items-center space-x-40">
                    <div className="text-center">
                        <img src="/public/image/100 natural.png" alt="Icon 1" className="w-16 h-16 mx-auto" />
                        <p className="mt-2 text-white font-semibold">100% Natural Ingredients</p>
                    </div>
                    <div className="text-center">
                        <img src="/public/image/shield100.png" alt="Icon 2" className="w-16 h-16 mx-auto" />
                        <p className="mt-2 text-white font-semibold">Heavy Metal Tested</p>
                    </div>
                    <div className="text-center">
                        <img src="/public/image/nodrugs.png" alt="Icon 3" className="w-16 h-16 mx-auto" />
                        <p className="mt-2 text-white font-semibold">Steroid-Free</p>
                    </div>
                    <div className="text-center">
                        <img src="/public/image/halal100.png" alt="Icon 4" className="w-16 h-16 mx-auto" />
                        <p className="mt-2 text-white font-semibold">Halal</p>
                    </div>
                    <div className="text-center">
                        <img src="/public/image/lovehand.png" alt="Icon 5" className="w-16 h-16 mx-auto" />
                        <p className="mt-2 text-white font-semibold">KKM Certified</p>
                    </div>
                </div>
            </section>

      <section className="text-center py-16">
                <h2 className="text-3xl font-bold text-black">Favorite Products</h2>
                <div className="container mx-auto flex flex-col md:flex-row items-center relative">
                    <div className="relative w-full md:w-1/2">
                        <img src="/public/image/cloud1.jpeg" alt="vector" className="w-full max-w-xl object-cover mx-auto" />
                        <img src="/public/image/Phytax.png" alt="Phytax" className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/1 h-auto" />
                    </div>
                    <div className="text-left p-8 md:w-1/2">
                        <h2 className="text-3xl font-bold text-black">Phytax</h2>
                        <p className="text-lg text-gray-600 mt-4">
                            Expertly crafted from a unique blend of twelve specially selected phytonutrients. This unique composition creates Phytax, a specialized formulation designed to enhance your wellness.
                        </p>
                        <button className="bg-[#AFA0D7] text-[#fefefe] rounded-md w-40 h-10 mt-5 shadow-md">Shop now</button>
                    </div>
                </div>

                <div className="container mx-auto flex flex-col md:flex-row-reverse items-center relative">
                    <div className="relative w-full md:w-1/2">
                        <img src="/public/image/cloud2.jpeg" alt="vector" className="w-full max-w-xl object-cover mx-auto" />
                        <img src="/public/image/diffenzjunior.png" alt="diffenzjunior" className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/1 h-auto" />
                    </div>
                    <div className="text-left p-8 md:w-1/2">
                        <h2 className="text-3xl font-bold text-black">Diffenz Combo Junior</h2>
                        <p className="text-lg text-gray-600 mt-4">
                            Expertly crafted from a unique blend of twelve specially selected phytonutrients. This unique composition creates Phytax, a specialized formulation designed to enhance your wellness.
                        </p>
                        <button className="bg-[#AFA0D7] text-[#fefefe] rounded-md w-40 h-10 mt-5 shadow-md bg">Shop now</button>
                    </div>
                </div>

                <div className="container mx-auto flex flex-col md:flex-row items-center relative">
                    <div className="relative w-full md:w-1/2">
                        <img src="/public/image/cloud3.jpeg" alt="vector" className="w-full max-w-xl object-cover mx-auto" />
                        <img src="/public/image/diffenz.png" alt="diffenz" className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/1 h-auto" />
                    </div>
                    <div className="text-left p-8 md:w-1/2">
                        <h2 className="text-3xl font-bold text-black">Diffenz Combo</h2>
                        <p className="text-lg text-gray-600 mt-4">
                            Expertly crafted from a unique blend of twelve specially selected phytonutrients. This unique composition creates Phytax, a specialized formulation designed to enhance your wellness.
                        </p>
                        <button className="bg-[#AFA0D7] text-[#fefefe] rounded-md w-40 h-10 mt-5 shadow-md">Shop now</button>
                    </div>
                </div>

                <div className="container mx-auto flex flex-col md:flex-row-reverse items-center relative">
                    <div className="relative w-full md:w-1/2">
                        <img src="/public/image/cloud4.jpeg" alt="vector" className="w-full max-w-xl object-cover mx-auto" />
                        <img src="/public/image/tehtarik.png" alt="tehtarik" className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/1 h-auto" />
                    </div>
                    <div className="text-left p-8 md:w-1/2">
                        <h2 className="text-3xl font-bold text-black">Savva Teh Tarik Flavour</h2>
                        <p className="text-lg text-gray-600 mt-4">
                            Expertly crafted from a unique blend of twelve specially selected phytonutrients. This unique composition creates Phytax, a specialized formulation designed to enhance your wellness.
                        </p>
                        <button className="bg-[#AFA0D7] text-[#fefefe] rounded-md w-40 h-10 mt-5 shadow-md bg">Shop now</button>
                    </div>
                </div>

                <div className="container mx-auto flex flex-col md:flex-row items-center relative">
                    <div className="relative w-full md:w-1/2">
                        <img src="/public/image/cloud3.jpeg" alt="vector" className="w-full max-w-xl object-cover mx-auto" />
                        <img src="/public/image/reverse.png" alt="reverse" className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/1 h-auto" />
                    </div>
                    <div className="text-left p-8 md:w-1/2">
                        <h2 className="text-3xl font-bold text-black">Reverse</h2>
                        <p className="text-lg text-gray-600 mt-4">
                            Expertly crafted from a unique blend of twelve specially selected phytonutrients. This unique composition creates Phytax, a specialized formulation designed to enhance your wellness.
                        </p>
                        <button className="bg-[#AFA0D7] text-[#fefefe] rounded-md w-40 h-10 mt-5 shadow-md">Shop now</button>
                    </div>
                </div>
            </section>

            {/* cards */}
            <h2 className="text-3xl font-bold text-black text-center">Eskayvie News</h2>
                <p className="text-lg text-gray-600 mt-2 text-center">
                Read news, stories, answers to questions, and facts about Eskayvie.
                </p>

                <div className='flex justify-start overflow-x-scroll no-scrollbar'>
                <div className='flex flex-row'>
                    <div className='main-container w-[500px] h-[550px] relative mx-4 my-0'>
                        <div className='w-[450px] h-[250px] bg-[url(../public/image/image14.jpeg)] bg-cover bg-no-repeat rounded-[15px] relative z-[1] mt-[24px] mr-0 mb-0 ml-[23px]' />
                        <span className="block h-[24px] font-['Poppins'] text-[14px] font-normal leading-[24px] text-[#000] relative text-left whitespace-nowrap z-[3] mt-[5px] mr-0 mb-0 ml-[23px]">
                            ADMIN ESKAYVIE - January 16, 2023
                        </span>
                        <span className="flex w-[450px] h-[40px] justify-start items-center font-['Poppins'] text-[24px] font-bold leading-[30px] text-[#000] relative text-left z-[2] mt-[7px] mr-0 mb-0 ml-[23px]">
                            Gastritis Medicine Gets Banned! What Will Happen?
                        </span>
                        <span className="flex w-[450px] h-[80px] justify-start items-center font-['Poppins'] text-[20px] font-light leading-[30px] text-[#000] relative text-left z-[4] mt-[23px] mr-0 mb-0 ml-[23px]">
                            Wow, many people panicked when the popular gastritis medicine was banned! Don't panic! Here is a solution.
                        </span>
                        <button className='w-[120px] h-[40px] text-[0px] rounded-[10px] border-none relative z-[5] pointer mt-[19px] mr-0 mb-0 ml-[23px]'>
                            <span className="flex w-[100px] h-[20px] justify-center items-center font-['Poppins'] text-[16px] font-bold leading-[25px] text-[#afa0d7] tracking-[0.6px] relative text-center whitespace-nowrap z-[7] mr-0 mb-0 ml-[17px]">
                                Read More
                            </span>
                            <div className='w-[120px] h-[40px] rounded-[10px] border-solid border-2 border-[#afa0d7] absolute top-0 left-0 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] z-[6]' />
                        </button>
                        <div className='w-[500px] h-[550px] bg-[rgba(255,255,255,0)] rounded-[15px] border-solid border border-[rgba(0,0,0,0.35)] absolute top-0 left-0' />
                    </div>
                    {/* Repeat the above block for the other two main-container divs */}
                    <div className='main-container w-[500px] h-[550px] relative mx-4 my-0'>
                        <div className='w-[450px] h-[250px] bg-[url(../public/image/image15.jpeg)] bg-cover bg-no-repeat rounded-[15px] relative z-[1] mt-[24px] mr-0 mb-0 ml-[23px]' />
                        <span className="block h-[24px] font-['Poppins'] text-[14px] font-normal leading-[24px] text-[#000] relative text-left whitespace-nowrap z-[3] mt-[5px] mr-0 mb-0 ml-[23px]">
                            ADMIN ESKAYVIE - January 16, 2023
                        </span>
                        <span className="flex w-[450px] h-[40px] justify-start items-center font-['Poppins'] text-[24px] font-bold leading-[30px] text-[#000] relative text-left z-[2] mt-[7px] mr-0 mb-0 ml-[23px]">
                            Gastritis Medicine Gets Banned! What Will Happen?
                        </span>
                        <span className="flex w-[450px] h-[80px] justify-start items-center font-['Poppins'] text-[20px] font-light leading-[30px] text-[#000] relative text-left z-[4] mt-[23px] mr-0 mb-0 ml-[23px]">
                            Wow, many people panicked when the popular gastritis medicine was banned! Don't panic! Here is a solution.
                        </span>
                        <button className='w-[120px] h-[40px] text-[0px] rounded-[10px] border-none relative z-[5] pointer mt-[19px] mr-0 mb-0 ml-[23px]'>
                            <span className="flex w-[100px] h-[20px] justify-center items-center font-['Poppins'] text-[16px] font-bold leading-[25px] text-[#afa0d7] tracking-[0.6px] relative text-center whitespace-nowrap z-[7] mr-0 mb-0 ml-[17px]">
                                Read More
                            </span>
                            <div className='w-[120px] h-[40px] rounded-[10px] border-solid border-2 border-[#afa0d7] absolute top-0 left-0 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] z-[6]' />
                        </button>
                        <div className='w-[500px] h-[550px] bg-[rgba(255,255,255,0)] rounded-[15px] border-solid border border-[rgba(0,0,0,0.35)] absolute top-0 left-0' />
                    </div>

                    <div className='main-container w-[500px] h-[550px] relative mx-4 my-0'>
                        <div className='w-[450px] h-[250px] bg-[url(../public/image/image16.jpeg)] bg-cover bg-no-repeat rounded-[15px] relative z-[1] mt-[24px] mr-0 mb-0 ml-[23px]' />
                        <span className="block h-[24px] font-['Poppins'] text-[14px] font-normal leading-[24px] text-[#000] relative text-left whitespace-nowrap z-[3] mt-[5px] mr-0 mb-0 ml-[23px]">
                            ADMIN ESKAYVIE - January 16, 2023
                        </span>
                        <span className="flex w-[450px] h-[40px] justify-start items-center font-['Poppins'] text-[24px] font-bold leading-[30px] text-[#000] relative text-left z-[2] mt-[7px] mr-0 mb-0 ml-[23px]">
                            Gastritis Medicine Gets Banned! What Will Happen?
                        </span>
                        <span className="flex w-[450px] h-[80px] justify-start items-center font-['Poppins'] text-[20px] font-light leading-[30px] text-[#000] relative text-left z-[4] mt-[23px] mr-0 mb-0 ml-[23px]">
                            Wow, many people panicked when the popular gastritis medicine was banned! Don't panic! Here is a solution.
                        </span>
                        <button className='w-[120px] h-[40px] text-[0px] rounded-[10px] border-none relative z-[5] pointer mt-[19px] mr-0 mb-0 ml-[23px]'>
                            <span className="flex w-[100px] h-[20px] justify-center items-center font-['Poppins'] text-[16px] font-bold leading-[25px] text-[#afa0d7] tracking-[0.6px] relative text-center whitespace-nowrap z-[7] mr-0 mb-0 ml-[17px]">
                                Read More
                            </span>
                            <div className='w-[120px] h-[40px] rounded-[10px] border-solid border-2 border-[#afa0d7] absolute top-0 left-0 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] z-[6]' />
                        </button>
                        <div className='w-[500px] h-[550px] bg-[rgba(255,255,255,0)] rounded-[15px] border-solid border border-[rgba(0,0,0,0.35)] absolute top-0 left-0' />
                    </div>
                </div>
            </div>
            <div className="mb-10" />

             {/* This is Eskayvie */}
             <div className='main-container w-[1373px] h-[607px] relative mx-auto my-0'>
                <div className='w-[1373px] h-[607px] bg-[#eae3ff] rounded-[15px] absolute top-0 left-0 shadow-[1px_4px_8px_0_rgba(0,0,0,0.25)]' />
                <div className='w-[606px] h-[607px] bg-[url(../public/image/ThisIsEskayvie21.jpeg)] bg-cover bg-no-repeat rounded-[15px] absolute top-0 left-0 z-[1]' />
                <div className='w-[604px] h-[421.723px] text-[0px] rounded-[10px] absolute top-1/2 left-[666px] translate-x-0 translate-y-[-49.91%] z-[2]'>
                    <span className="block h-[72px] font-['Fredoka_One'] text-[60px] font-normal leading-[72px] text-[#8d7fb2] tracking-[3px] relative text-left whitespace-nowrap z-[4] mt-0 mr-0 mb-0 ml-0">
                        This is Eskayvie
                    </span>
                    <span className="flex w-[604px] h-[171px] justify-start items-center font-['Inter'] text-[28px] font-medium leading-[40px] text-[#8d7fb2] tracking-[1.4px] relative text-left z-[3] mt-[35px] mr-0 mb-0 ml-0">
                        Discover the company’s history and learn how Eskayvie has empowered
                        entrepreneurs with business opportunities for over 15 years.
                    </span>
                    <button className='w-[234px] h-[67.723px] text-[0px] rounded-[10px] border-none relative z-[5] pointer mt-[10px] mr-0 mb-0 ml-0'>
                        <span className="flex w-[189.371px] h-[29.758px] justify-center items-center font-['Poppins'] text-[27px] font-bold leading-[29.758px] text-[#000] tracking-[0.81px] relative text-center whitespace-nowrap z-[7] mt-[1px] mr-0 mb-0 ml-[22px]">
                            Learn More
                        </span>
                        <div className='w-[234px] h-[67.723px] rounded-[10px] border-solid border-2 border-[#000] absolute top-0 left-0 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] z-[6]' />
                    </button>
                </div>
            </div>
            <div className="mb-10" />
            <Footer/>
        
    </>
  );
};

export default LandingPage;
