"use client";

import {motion} from "framer-motion";
import {
    Briefcase,
    FileText,
    Gavel,
    Building2,
} from "lucide-react";

const services = [
    {
        title: "Allgemeines Zivilrecht",
        description:
            "Kompetente Vertretung bei Streitigkeiten zwischen Privatpersonen.",
        icon: Gavel,
    },
    {
        title: "Vertragsprüfung",
        description:
            "Prüfung, Anpassung und rechtssichere Gestaltung Ihrer Verträge.",
        icon: FileText,
    },
    {
        title: "Arbeitsrecht",
        description:
            "Beratung für Arbeitnehmer und Arbeitgeber bei Kündigung, Abmahnung u.a.",
        icon: Briefcase,
    },
    {
        title: "Mietrecht",
        description:
            "Rechtliche Unterstützung bei Mieterhöhungen, Kündigung & Nebenkosten.",
        icon: Building2,
    },
];

export default function Leistungen() {
    return (
        <section className="py-20 px-4 bg-white dark:bg-gray-950">
            <div className="max-w-6xl mx-auto">
                {/* Titel & Divider */}
                <motion.div
                    className="mb-12"
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    transition={{duration: 0.5}}
                    viewport={{once: true}}
                >
                    <h2 className="text-3xl md:text-4xl font-bold text-left text-gray-900 dark:text-white">
                        Leistungen
                    </h2>
                    <div className="mt-2 w-20 h-1 bg-yellow-500 rounded"/>
                </motion.div>

                {/* Grid */}
                <div className="grid md:grid-cols-2 gap-8">
                    {services.map(({title, description, icon: Icon}, i) => (
                        <motion.div
                            key={title}
                            className="p-6 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow"
                            initial={{opacity: 0, y: 30}}
                            whileInView={{opacity: 1, y: 0}}
                            transition={{delay: i * 0.1, duration: 0.5}}
                            viewport={{once: true}}
                        >
                            <div className="flex items-start gap-4">
                                <div className="p-2 rounded-md bg-primary/10 text-primary">
                                    <Icon className="w-6 h-6"/>
                                </div>
                                <div>
                                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
                                        {title}
                                    </h3>
                                    <p className="text-sm text-gray-700 dark:text-gray-300">
                                        {description}
                                    </p>
                                </div>
                            </div>
                        </motion.div>
                    ))}
                </div>
            </div>
        </section>
    );
}