home page

import React, { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { toast, ToastContainer } from "react-toastify";
import "../../App.css";
import Mantra from "./Mantra";
import Footer from "./Footer";
import Hero from "./Hero";
import { useAuth } from "../Auth/AuthContext";

const Home = () => {
    const { user } = useAuth();
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();
  const location = useLocation();
  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 100);

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

  // const handleNavigation = (path) => {
  //   navigate(path);
  // };

  const handleNavigation = (path) => {
    if (user) {
      if (path === "/register" && user.version.includes("mrRight")) {
        if (user.accountTypeForMrRight) {
          navigate("/dashboard");
          return;
        }
        navigate("/register");
      } else if (path === "/rcyc-register" && user.version.includes("rcyc")) {
        if (user.accountTypeForRcyc) {
          navigate("/rcyc-dashboard");
          return;
        }
        navigate("/rcyc-register");
      } else if (path === "/See360-register" && user.version.includes("see360")) {
        if (user.accountTypeForSee360) {
          navigate("/See360-dashboard");
          return;
        }
        navigate("/See360-register");
      } else {
        navigate(path);
      }
    } else {
      navigate(path);
    }
  };

  if (loading) {
    return (
      <div className=" min-h-screen w-full flex items-center justify-center bg-primary-gradient fixed inset-0 z-50">
        <l-infinity
          size="200"
          stroke="4"
          stroke-length="0.15"
          bg-opacity="0.1"
          speed="1.3"
          color="white"
        ></l-infinity>
      </div>
    );
  }

  return (
    <div className="max-w-[96rem] mx-auto md:pt-26 sm:pt-20 lg:pt-28 px-6">
      <Hero />
      <div className="relative mt-20 border-b border-neutral-800 min-h-[800px]">
        <div className="text-center">
          <h2 className="text-3xl sm:text-5xl lg:text-6xl mt-10 lg:mt-20 tracking-wide">
            Success starts with a single step{" "}
            <span className="bg-gradient-to-r bg-red-700 text-transparent bg-clip-text">
              let us guide your journey
            </span>
          </h2>
        </div>
        <div className="w-full gap-4 flex-wrap flex justify-between mt-24">
          {/* Card 1 */}
          <div className="w-full md:w-[48%] lg:w-[30%] p-4 bg-[#feefad] rounded-xl transform transition-all hover:-translate-y-2 duration-300 shadow-lg hover:shadow-2xl">
            <img
              className="h-40 w-full object-cover rounded-xl"
              src="/Assets/Mr_Profile.png"
              alt=""
            />
            <div className="p-4">
              <h2 className="font-bold text-lg mb-2">Mr. Right</h2>
              <p className="text-sm text-gray-600">
                The purpose of this Mr. Right is to understand the fundamental
                role of management or leadership for any team, department,
                company, family or even a country...
              </p>
            </div>
            <div className="m-2 sm:w-full lg:w-56">
              <div
                role="button"
                onClick={() => handleNavigation("/register")}
                className="text-white bg-gradient-to-r from-blue-900 to-gray-900 px-4 py-2 rounded-md "
              >
                Click here to Know More
              </div>
            </div>
          </div>

          {/* Card 2 */}
          <div className="w-full md:w-[48%] lg:w-[30%] p-4 bg-[#feefad] rounded-xl transform transition-all hover:-translate-y-2 duration-300 shadow-lg hover:shadow-2xl">
            <img
              className="h-40 w-full object-cover rounded-xl"
              src="/Assets/Rcyc_Profile.png"
              alt=""
            />
            <div className="p-4">
              <h2 className="font-bold text-lg mb-2">RCYC</h2>
              <p className="text-sm text-gray-600">
                The purpose of this Right Choice Your Career is self-discovery.
                It is designed to help people identify their natural abilities,
                personality strengths and their career interests...
              </p>
            </div>
            <div className="m-2 sm:w-full lg:w-56">
              <div
                role="button"
                onClick={() => handleNavigation("/rcyc-register")}
                className=" text-white bg-gradient-to-b from-[#e05780] to-[#602437] px-4 py-2 rounded-md hover:bg-blue-700"
              >
                Click here to Know More
              </div>
            </div>
          </div>

          {/* Card 3 */}
          <div className="w-full md:w-[48%] lg:w-[30%] p-4 bg-[#feefad] rounded-xl transform transition-all hover:-translate-y-2 duration-300 shadow-lg hover:shadow-2xl">
            <img
              className="h-40 w-full object-cover rounded-xl"
              src="/Assets/360_profile.png"
              alt=""
            />
            <div className="p-4">
              <h2 className="font-bold text-lg mb-2">See 360°</h2>
              <p className="text-sm text-gray-600">
                The purpose of this See 360 is to thoroughly analyze the entire
                business, identify gaps or inefficiencies within the
                organization, and develop strategies to drive ....
              </p>
            </div>
            <div className="m-2 sm:w-full lg:w-56">
              <div
                role="button"
                onClick={() => handleNavigation("/See360-register")}
                className="text-white bg-gradient-to-b from-[#212f45] to-[#006466] px-4 py-2 rounded-md hover:bg-green-700"
              >
                Click here to Know More
              </div>
            </div>
          </div>
        </div>
      </div>
      <Mantra />
      <Footer />
    </div>
  );
};

export default Home;