'use client';

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

const typewriterWords = ['Webdesign', 'App-Entwicklung', 'Interne Tools'];

export const HeroContent = () => {
    return (
        <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={typewriterWords}
                    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"
                    width={256}
                    pulse
                />
            </div>
        </div>
    );
};