import { ChevronRight } from "lucide-react";
import heroImg from "/src/images/hero-section.jpg";
export default function Hero() {
  return (
    <div className="relative h-[calc(100vh-70px)] w-full object-cover z-0">
         {/* Background Image */}
         <div className="absolute inset-0 w-full h-full overflow-hidden">
          <img
            src={heroImg}
            alt="Hero Background"
            className="h-full w-full object-cover"
          />
          {/* Dark overlay */}
          <div className="absolute inset-0 bg-black/50"></div>
        </div>
        {/* Background Video */}
       {/* <div className="absolute inset-0 w-full h-full overflow-hidden">
          <video
            className="h-full w-full object-cover opacity-100 appl1-hdvd-xx"
            autoPlay
            loop
            playsInline
            muted
          >
            <source src="https://cdn.muzz.com/website-v4/vid/hero-mobile.webm" type="video/webm" />
          </video>
          <div className="absolute inset-0 bg-black/50"></div>
        </div>*/}

        {/* Content */}
        <div className="relative z-10 h-full flex flex-col justify-center items-center px-6">
          <div className="max-w-7xl text-center">
            <h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
              Find Your Perfect Match
            </h1>
            <p className="text-xl text-gray-200 mb-8 max-w-2xl mx-auto">
              Join millions of singles finding meaningful relationships through shared values and beliefs
            </p>
            <a href="#download-app">
              <button className="bg-pink-500 text-white text-lg px-8 py-4 rounded-full hover:bg-pink-600 transition flex items-center gap-2 mx-auto">
                Start Your Journey <ChevronRight size={20} />
              </button>
            </a>
          </div>
        </div>
      </div>
  );
}