import React from "react";
import {ReactTyped} from "react-typed";
import {Hero_video} from "../utils/index";

const Home = () => {
  return (
    <div className="relative w-full h-screen">
      {/* Video Background */}
      <video
        className="absolute inset-0 w-full h-full object-cover"
        autoPlay
        loop
        muted
      >
        <source
          src={Hero_video}
          type="video/webm"
        />
        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">
        {/* Title with Gradient */}
        <h1 className="text-5xl font-bold bg-clip-text text-transparent" style={{color: "#3267B9"}}>
          <ReactTyped
            strings={["Variants, Diseases &amp; Genes", "VarDiG"]}
            typeSpeed={50}   // Speed of typing
            backSpeed={30}   // Speed of deleting
            backDelay={1500} // Delay before deleting
            loop
          />
        </h1>

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

export default Home;