frontend/src/pages/Home.jsx

import React, { useEffect } from "react";
import { ReactTyped } from "react-typed";
import { Hero_video } from "../utils/index";
import Logo from "../assets/images/genomatics-logo.png";
import { useLoader } from "../components/LoaderContext"; // Import global loader state

const Home = () => {
  const { isLoaderShown, setIsLoaderShown } = useLoader();

  useEffect(() => {
    if (isLoaderShown) {
      setTimeout(() => setIsLoaderShown(false), 2500); // Loader stays for at least 2.5s
    }
  }, [isLoaderShown, setIsLoaderShown]);

  return (
    <div className="relative w-full h-screen">
      {/* Loader (Only appears on first visit) */}
      {isLoaderShown && (
        <div className="fixed inset-0 flex items-center justify-center bg-black z-[9999] transition-opacity duration-1000">
          <img
            src={Logo}
            alt="Loading..."
            className="w-40 h-40 animate-pulse" // Blinking effect
          />
        </div>
      )}

      {/* Video Background */}
      <video
        className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${
          isLoaderShown ? "opacity-0" : "opacity-100"
        }`}
        autoPlay
        loop
        muted
        preload="auto"
      >
        <source src={Hero_video} type="video/mp4" />
        Your browser does not support the video tag.
      </video>

      {/* Overlaying Text */}
      <div
        className={`relative z-10 flex items-center justify-center w-full h-full flex-col text-center bg-black bg-opacity-50 transition-opacity duration-1000 ${
          isLoaderShown ? "opacity-0" : "opacity-100"
        }`}
      >
        {/* Title with Gradient */}
        <h1 className="text-5xl font-bold bg-clip-text text-transparent" style={{ color: "#3267B9" }}>
          <ReactTyped
            strings={["Variants, Diseases and Genes", "VarDiG"]}
            typeSpeed={50}
            backSpeed={30}
            backDelay={1500}
            loop
          />
        </h1>

        {/* Subtitle */}
        <p className="mt-4 text-xl text-white">Variants Deciphered</p>
      </div>
    </div>
  );
};

export default Home;