// Hero.js
import React from "react";
import {Hero_video} from "../../utils/index";
import styled from "styled-components";

// Styled components for the Hero section
const HeroContainer = styled.div`
  position: relative;
  width: 100%;
  height: 30vh;  // Set a compact height
`;

const HeroVideo = styled.video`
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

const Overlay = styled.div`
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);  // Dark overlay for better text visibility
`;

const HeroTitle = styled.h1`
  font-size: 3.5rem;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  color: #3267B9;  // Blue color for the title
  margin-bottom: 1rem;
`;

const HeroSubtitle = styled.p`
  font-size: 1.5rem;
  color: white;
  max-width: 80%;
  margin-top: 0.5rem;
  font-weight: 500;
  font-style: italic;  // Added a slight italic style to make it feel more personable
`;

const Hero = () => {
  return (
    <HeroContainer>
      {/* Video Background */}
      <HeroVideo autoPlay loop muted>
        <source
          src={Hero_video}
          type="video/webm"
        />
        Your browser does not support the video tag.
      </HeroVideo>

      {/* Overlaying Text */}
      <Overlay>
        <HeroTitle>About Us</HeroTitle> {/* Hero Title: "About Us" */}
        <HeroSubtitle>Genomics Simplified</HeroSubtitle> {/* Catchy Subtitle */}
      </Overlay>
    </HeroContainer>
  );
};

export default Hero;