"use client";

import Image from "next/image";
import {Typewriter} from "react-simple-typewriter";

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 */}
            <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
                />
                <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-3xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold text-white"
                        >
                            Rhein-Software Development
                        </h1>

                        <p
                            data-aos="fade-up"
                            data-aos-delay="200"
                            className="text-lg md:text-xl text-gray-400"
                        >
                            Wir bieten digitale Lösungen für dein Unternehmen.
                        </p>

                        <p
                            data-aos="fade-up"
                            data-aos-delay="400"
                            className="mt-4 text-lg md:text-xl font-semibold text-white"
                        >
                            <Typewriter
                                words={["Beratung", "Entwicklung", "Wartung", "Fehlerbehebung"]}
                                loop={true}
                                cursor
                                cursorStyle="_"
                                typeSpeed={60}
                                deleteSpeed={40}
                                delaySpeed={1500} // ⬅️ Delay before it starts typing the FIRST word
                            />
                        </p>
                    </div>

                    {/* Floating Image */}
                    <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;