"use client";

import {motion} from "framer-motion";
import Image from "next/image";

export default function Hero() {
    return (
        <section className="relative h-[80vh] flex items-center justify-center text-center px-4 overflow-hidden">
            {/* Hintergrundbild */}
            <Image
                src="/images/hero.jpeg" // dein hochgeladenes Bild
                alt="Hintergrundbild"
                fill
                priority
                className="object-cover object-center z-0"
            />

            {/* Dunkles Overlay für bessere Lesbarkeit */}
            <div className="absolute inset-0 bg-gradient-to-b from-black/70 to-black/80 z-10"/>

            {/* Text-Content */}
            <div className="relative z-20 max-w-3xl space-y-6 text-white px-4">
                <motion.h1
                    className="text-4xl md:text-6xl font-extrabold drop-shadow-[0_2px_4px_rgba(0,0,0,0.6)]"
                    initial={{opacity: 0, y: 20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.6}}
                >
                    Rechtsanwalt <span className="text-white">Max Mustermann</span>
                </motion.h1>

                <motion.p
                    className="text-lg md:text-xl text-white/90 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]"
                    initial={{opacity: 0}}
                    animate={{opacity: 1}}
                    transition={{delay: 0.2, duration: 0.6}}
                >
                    Ihr zuverlässiger Partner für Zivilrecht, Vertragsrecht und mehr
                </motion.p>
            </div>
        </section>
    );
}