"use client";
import React, { useState } from 'react';
import Link from 'next/link';
import GsapReveal from '@/components/common/GsapReveal';
import VideoModal from '@/components/common/VideoModal/VideoModal';
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';

const Hero = () => {
    const [isVideoOpen, setIsVideoOpen] = useState(false);
    const [isContactOpen, setIsContactOpen] = useState(false);

    return (
        <div className="hero1-section-area" id="home">
            <img src="/assets/img/elements/elements4.png" alt="" className="elements4" />
            <img src="/assets/img/elements/elements5.png" alt="" className="elements5" />
            <div className="container">
                <div className="row align-items-center">
                    <div className="col-lg-7">
                        <div className="hero1-header heading1">
                            <GsapReveal y={30} duration={0.8}>
                                <h5>Websites That Drive Real Business Growth</h5>
                            </GsapReveal>
                            <div className="space16"></div>
                            <GsapReveal y={30} duration={1} delay={0.2}>
                                <h1 className="text-anime-style-3">We build fast, SEO-optimized websites that drive leads and sales.</h1>
                            </GsapReveal>
                            <div className="space16"></div>
                            <GsapReveal y={30} duration={1.2} delay={0.4}>
                                <p>Whether you're a startup or an established business, we create powerful websites that turn visitors into customers.</p>
                            </GsapReveal>
                            <div className="space32"></div>
                            <GsapReveal y={30} duration={1.4} delay={0.6}>
                                <div className="btn-area1 d-flex flex-wrap gap-3">
                                    <button onClick={() => setIsContactOpen(true)} className="vl-btn1">Get Free Consultation <i className="fa-solid fa-angle-right"></i></button>
                                    <Link href="#portfolio" className="vl-btn1">View Our Work <i className="fa-solid fa-angle-right"></i></Link>
                                </div>
                            </GsapReveal>
                        </div>
                    </div>
                    <div className="col-lg-5">
                        <div className="hero-images-area">
                            <div className="img1" data-aos="zoom-in" data-aos-duration="1000">
                                <img src="/assets/img/home/banner/centre-img.webp" alt="" />
                            </div>
                            {/* <div className="image-bg1">
                                <img src="/assets/img/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
                            </div> */}
                            <div className="elements1">
                                <img src="/assets/img/home/banner/1-element.webp" alt="" className="animation-1 floating-slow" />
                            </div>
                            <div className="elements2">
                                <img src="/assets/img/home/banner/bottom.webp" alt="" className="animation-2 floating-fast" />
                            </div>
                            <div className="elements3">
                                <img src="/assets/img/home/banner/right.webp" alt="" className="animation-3 floating-slow" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <VideoModal isOpen={isVideoOpen} onClose={() => setIsVideoOpen(false)} videoUrl="https://www.youtube.com/embed/7e90gBu4pas" />
            <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
        </div>
    );
};

export default Hero;