'use client'

import {Briefcase, BookOpen, Building2, User, Coins, ReceiptText} from 'lucide-react'
import {motion as m, Variants} from 'framer-motion'

const containerVariants: Variants = {
    hidden: {},
    visible: {
        transition: {
            staggerChildren: 0.2,
            delayChildren: 0.1,
        },
    },
}

const cardVariants: Variants = {
    hidden: {opacity: 0, y: 30},
    visible: {
        opacity: 1,
        y: 0,
        transition: {
            duration: 0.5,
            ease: 'easeOut',
        },
    },
}

export function ServicesSection() {
    const services = [
        {
            title: 'Einkommensteuer',
            subtitle: 'Privatpersonen',
            desc: 'Beratung und Erstellung Ihrer jährlichen Einkommensteuererklärung – digital und unkompliziert.',
            icon: <User className="w-6 h-6 text-primary"/>,
        },
        {
            title: 'Jahresabschlüsse',
            subtitle: 'Unternehmen',
            desc: 'Erstellung von Handels- und Steuerbilanzen für Einzelunternehmen, GmbH & Co. KG oder Kapitalgesellschaften.',
            icon: <BookOpen className="w-6 h-6 text-primary"/>,
        },
        {
            title: 'Lohnbuchhaltung',
            subtitle: 'Mitarbeiterabrechnung',
            desc: 'Abwicklung Ihrer Lohn- und Gehaltsabrechnungen – pünktlich, zuverlässig und digital.',
            icon: <Coins className="w-6 h-6 text-primary"/>,
        },
        {
            title: 'Existenzgründung',
            subtitle: 'Startups & Gründer',
            desc: 'Von der Idee zum Business – steuerliche Beratung, Businessplan und Gründungszuschuss-Anträge.',
            icon: <Briefcase className="w-6 h-6 text-primary"/>,
        },
        {
            title: 'Unternehmensnachfolge',
            subtitle: 'Übergabe & Erbe',
            desc: 'Beratung zur steuerlich optimalen Übergabe an Familie oder Käufer. Langfristige Planung inklusive.',
            icon: <Building2 className="w-6 h-6 text-primary"/>,
        },
        {
            title: 'Finanzbuchhaltung',
            subtitle: 'GoBD & DATEV-konform',
            desc: 'Digitale Finanzbuchhaltung inkl. Belegtransfer, OPOS und monatlichen Auswertungen.',
            icon: <ReceiptText className="w-6 h-6 text-primary"/>,
        },
    ]

    return (
        <section id="leistungen" className="py-20 px-6 bg-muted/50">
            <div className="max-w-6xl mx-auto text-left">
                <h2 className="text-3xl font-bold mb-12 text-center">Unsere Leistungen</h2>

                <m.div
                    className="grid md:grid-cols-2 gap-10"
                    variants={containerVariants}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{once: true, amount: 0.2}}
                >
                    {services.map(({title, subtitle, desc, icon}) => (
                        <m.div
                            key={title}
                            variants={cardVariants}
                            className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md border flex gap-4"
                        >
                            <div className="mt-1">{icon}</div>
                            <div>
                                <h3 className="text-xl font-semibold">{title}</h3>
                                <p className="text-sm text-muted-foreground mb-1">{subtitle}</p>
                                <p className="text-sm">{desc}</p>
                            </div>
                        </m.div>
                    ))}
                </m.div>
            </div>
        </section>
    )
}