import Image from "next/image";

const Hero = () => {
    return (
        <div
            className="relative w-full pt-[4vh] md:pt-[12vh] h-screen flex flex-col overflow-hidden"
            style={{
                backgroundColor: "var(--primary-bg)",
                color: "white",
            }}
        >
            {/* Background Image with Blur */}
            <div className="absolute inset-0 z-0">
                <Image
                    src="/images/home_hero.jpg"
                    alt="Rhein river aerial view"
                    layout="fill"
                    objectFit="cover"
                    className="blur-md scale-105"
                    priority
                />
                {/* Dark overlay for better text contrast */}
                <div className="absolute inset-0 bg-black/40"/>
            </div>

            {/* Main content */}
            <div className="relative z-10 flex justify-center flex-col w-[90%] sm:w-[80%] h-full mx-auto">
                <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12">
                    {/* Text Content */}
                    <div>
                        <h1
                            data-aos="fade-up"
                            className="text-2xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold md:leading-[3rem] lg:leading-[3.5rem] text-white"
                        >
                            Rhein Software Development
                        </h1>
                        <p
                            data-aos="fade-up"
                            data-aos-delay="200"
                            className="text-white"
                        >
                            Wir entwickeln performante und zukunftssichere Software für deine Vision.
                        </p>
                    </div>

                    {/* Floating Image Content */}
                    <div
                        data-aos="fade-up"
                        data-aos-delay="400"
                        className="hidden lg:block animate-float"
                    >
                        <Image src="/images/hero.png" alt="hero graphic" width={700} height={700}/>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Hero;