'use client';

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

const services = ['Arbeitsrecht', 'Familienrecht', 'Vertragsrecht'];

export default function Hero() {
    return (
        <motion.section
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.8, ease: 'easeOut' }}
            className="relative text-white h-screen overflow-hidden shadow-lg"
        >
            <Image
                src="/images/hero.jpeg"
                alt="Anwaltskanzlei Hintergrund"
                fill
                className="object-cover brightness-[0.4]"
                quality={50}
            />
            <div className="relative z-10 flex flex-col justify-center items-start h-full px-6 md:px-16 lg:px-24">
                <motion.h1
                    className="text-2xl md:text-3xl font-light tracking-wide text-gray-200 mb-2"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5 }}
                >
                    Rechtsanwälte
                </motion.h1>
                <motion.h2
                    className="text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 0.1 }}
                >
                    Dr. Mustermann & Künstler
                </motion.h2>

                <motion.p
                    className="text-2xl md:text-3xl text-gray-200 font-medium"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 0.2 }}
                >
                    <span className="text-gray-300">Ihr Experte für </span>
                    <span className="text-blue-400 font-semibold">
                        <Typewriter
                            words={services}
                            loop
                            cursor
                            cursorStyle="_"
                            typeSpeed={60}
                            deleteSpeed={40}
                            delaySpeed={1500}
                        />
                    </span>
                </motion.p>
            </div>
        </motion.section>
    );
}