import React from "react";
import {ReactTyped} from "react-typed";
import {Hero_video} from "../utils/index";
import Highlights from "../sections/vardig/Highlights";
import BookDemo from "../sections/vardig/Bookdemo";
import Pricing from "../sections/vardig/Pricing";
import Testimonials from "../sections/vardig/Testimonials";


const VarDiG = () => {
  return (
    <>
      <div className="relative w-full h-[85vh]">
        {/* 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 and 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>
      <Highlights/>
      <BookDemo/>
      <Pricing/>
      <Testimonials/>
    </>
  );
};

export default VarDiG;