'use client'

import Image from 'next/image'
import {Button} from '@/components/ui/button'
import {motion as m, Variants} from 'framer-motion'
import Link from 'next/link'

const containerVariants: Variants = {
    hidden: {opacity: 0},
    visible: {
        opacity: 1,
        transition: {
            delay: 0.2,
            staggerChildren: 0.4,
            ease: 'easeOut',
        },
    },
}

const itemVariants: Variants = {
    hidden: {opacity: 0, y: 40},
    visible: {
        opacity: 1,
        y: 0,
        transition: {
            duration: 0.8,
            ease: 'easeOut',
        },
    },
}

export function HeroSection() {
    return (
        <section className="relative h-[80vh] flex items-center text-white">
            <Image
                src="/images/hero.jpeg"
                alt="Steuerkanzlei Hero"
                fill
                className="object-cover brightness-[0.4]"
                priority
            />
            <m.div
                className="z-10 text-left px-6 md:px-24 max-w-2xl"
                variants={containerVariants}
                initial="hidden"
                animate="visible"
            >
                <m.h1
                    className="text-4xl md:text-6xl font-bold leading-tight"
                    variants={itemVariants}
                >
                    Ihr Partner für<br/>Steuerberatung & Finanzen
                </m.h1>

                <m.p
                    className="mt-6 text-lg md:text-xl"
                    variants={itemVariants}
                >
                    Persönlich. Kompetent. Transparent.
                </m.p>

                <m.div className="mt-8" variants={itemVariants}>
                    <Link href="/kontakt">
                        <Button size="lg" variant="secondary">
                            Jetzt Kontakt aufnehmen
                        </Button>
                    </Link>
                </m.div>
            </m.div>
        </section>
    )
}