'use client';

import Image from 'next/image';
import {Typewriter} from 'react-simple-typewriter';
import {motion} from 'framer-motion';

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>
                        <motion.h1
                            className="text-3xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold text-white"
                            initial={{opacity: 0, y: 30}}
                            animate={{opacity: 1, y: 0}}
                            transition={{duration: 0.6, ease: 'easeOut'}}
                        >
                            Rhein-Software Development
                        </motion.h1>

                        <motion.p
                            className="text-lg md:text-xl text-gray-400"
                            initial={{opacity: 0, y: 30}}
                            animate={{opacity: 1, y: 0}}
                            transition={{duration: 0.6, delay: 0.2, ease: 'easeOut'}}
                        >
                            Digitale Lösungen für dein Unternehmen.
                        </motion.p>

                        <motion.p
                            className="mt-4 text-lg md:text-xl font-semibold text-white"
                            initial={{opacity: 0}}
                            animate={{opacity: 1}}
                            transition={{delay: 0.9, duration: 0.6}}
                        >
                            <Typewriter
                                words={['Beratung', 'Entwicklung', 'Wartung', 'Fehlerbehebung']}
                                loop={true}
                                cursor
                                cursorStyle="_"
                                typeSpeed={60}
                                deleteSpeed={40}
                                delaySpeed={1500}
                            />
                        </motion.p>
                    </div>

                    {/* Floating Image */}
                    <motion.div
                        className="hidden lg:block"
                        initial={{opacity: 0, y: 30}}
                        animate={{opacity: 1, y: 0}}
                        transition={{duration: 0.8, ease: 'easeOut', delay: 0.3}}
                    >
                        <motion.div
                            animate={{y: [0, -10, 0]}}
                            transition={{
                                duration: 4,
                                repeat: Infinity,
                                ease: 'easeInOut',
                            }}
                            className="animate-float"
                        >
                            <Image
                                src="/images/hero.png"
                                alt="hero graphic"
                                width={700}
                                height={700}
                            />
                        </motion.div>
                    </motion.div>
                </div>
            </div>
        </div>
    );
};

export default Hero;