'use client';

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

const Hero = () => {
    return (
        <section id="start" className="relative w-full h-screen overflow-hidden">
            {/* Background */}
            <div className="absolute inset-0 z-0">
                <Image
                    src="/images/home_hero.jpg"
                    alt="Rhein river aerial view"
                    fill
                    className="object-cover scale-105 blur-sm"
                    priority
                />
                <div className="absolute inset-0 bg-black/60"/>
            </div>

            {/* Content */}
            <div
                className="relative z-10 flex flex-col justify-center items-start h-full w-[90%] sm:w-[80%] max-w-6xl mx-auto text-white">
                <motion.h1
                    className="text-3xl sm:text-5xl font-bold mb-6 leading-tight"
                    initial={{opacity: 0, y: 40}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.6}}
                >
                    Digitale Lösungen, <br/> die wirklich passen.
                </motion.h1>

                <motion.p
                    className="text-lg sm:text-xl text-gray-300 mb-6 max-w-2xl"
                    initial={{opacity: 0, y: 20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.6, delay: 0.2}}
                >
                    Wir entwickeln individuelle Softwarelösungen für Unternehmen und Startups.
                </motion.p>

                <motion.div
                    className="text-xl font-semibold text-white"
                    initial={{opacity: 0}}
                    animate={{opacity: 1}}
                    transition={{delay: 0.6}}
                >
                    <Typewriter
                        words={['Webdesign', 'App-Entwicklung', 'Interne Tools']}
                        loop={true}
                        cursor
                        cursorStyle="_"
                        typeSpeed={60}
                        deleteSpeed={40}
                        delaySpeed={2000}
                    />
                </motion.div>

                <div className="mt-10 relative flex items-center justify-center">
                    <PulsatingButton
                        label="Jetzt Kontakt aufnehmen"
                        href="/contact"
                        color="#2563eb" // Tailwind blue-600
                        width={256}
                        pulse
                    />
                </div>

            </div>
        </section>
    );
};

export default Hero;