'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 Header() {
    return (
        <motion.section
            initial={{opacity: 0, y: 30}}
            animate={{opacity: 1, y: 0}}
            transition={{duration: 0.8, ease: 'easeOut'}}
            className="relative text-white h-[calc(100vh-5rem)] 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-5xl md:text-7xl font-bold mb-4 leading-tight"
                    initial={{opacity: 0, y: 20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.6}}
                >
                    Ihr Experte für
                </motion.h1>
                <motion.h2
                    className="text-4xl md:text-6xl font-bold text-blue-200 mb-4"
                    initial={{opacity: 0, y: 20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.6, delay: 0.2}}
                >
                    <Typewriter
                        words={services}
                        loop={true}
                        cursor
                        cursorStyle="_"
                        typeSpeed={60}
                        deleteSpeed={40}
                        delaySpeed={1500}
                    />
                </motion.h2>
                <motion.p
                    className="text-xl md:text-2xl text-gray-100 mb-6"
                    initial={{opacity: 0, y: 20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.6, delay: 0.4}}
                >
                    in Lörrach und Freiburg.
                </motion.p>
            </div>
        </motion.section>
    );
}