// 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; /* Compact height for a professional look */

  @media(max-width:480px){
    height:50vh;
  }
`;

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.6); /* Darker overlay for a more refined feel */
  padding: 1.5rem;
`;

const HeroTitle = styled.h1`
  font-size: 3.2rem;
  font-weight: bold;
  color: #3267B9;
  margin-bottom: 1rem;
`;

const HeroSubtitle = styled.p`
  font-size: 1.4rem;
  color: white;
  max-width: 70%;
  margin-top: 0.5rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.6; /* Better readability */
`;

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>Blogs</HeroTitle>
        <HeroSubtitle>Latest innovations & expert opinions.</HeroSubtitle>
      </Overlay>

    </HeroContainer>
  );
};

export default Hero;