'use client';

import {motion} from 'framer-motion';
import Link from 'next/link';
import Links from "@/data/Links";

const services = [
    {
        title: 'Arbeitsrecht',
        description:
            'Ob Kündigung, Aufhebungsvertrag oder Streit mit dem Arbeitgeber – wir beraten Sie rund um Ihre Rechte und Pflichten im Arbeitsverhältnis.',
    },
    {
        title: 'Familienrecht',
        description:
            'Trennung, Scheidung oder Unterhalt? Wir unterstützen Sie bei allen rechtlichen Fragen rund um Familie, Ehe und Kinder – mit Empathie und Erfahrung.',
    },
    {
        title: 'Vertragsrecht',
        description:
            'Von der Vertragsprüfung bis zur rechtssicheren Gestaltung: Wir helfen Ihnen, Ihre Interessen in Verträgen klar und wirksam zu verankern.',
    },
];

export default function ServicesSection() {
    return (
        <section className="bg-white py-24 px-6 md:px-16 lg:px-36">
            <div className="max-w-3xl mb-16">
                <motion.h2
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    transition={{duration: 0.6}}
                    viewport={{once: true}}
                    className="text-4xl font-extrabold tracking-tight text-gray-900"
                >
                    Unsere Fachgebiete
                </motion.h2>
                <motion.p
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    transition={{duration: 0.6, delay: 0.2}}
                    viewport={{once: true}}
                    className="mt-4 text-lg text-gray-600"
                >
                    Wir bieten fundierte Beratung und engagierte Vertretung in verschiedenen Kernbereichen des Rechts.
                    Unsere Spezialisierung ist Ihr Vorteil.
                </motion.p>
            </div>

            <div className="grid md:grid-cols-3 gap-8 mb-12">
                {services.map((service, index) => (
                    <motion.div
                        key={service.title}
                        initial={{opacity: 0, y: 30}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true, amount: 0.2}}
                        transition={{duration: 0.6, delay: index * 0.1}}
                        className="border border-gray-200 bg-neutral-100 hover:bg-white rounded-2xl shadow-sm hover:shadow-md p-6 transition"
                    >
                        <h3 className="text-xl font-bold mb-3 text-blue-400">{service.title}</h3>
                        <p className="text-gray-700 text-base leading-relaxed">{service.description}</p>
                    </motion.div>
                ))}
            </div>

            <div className="max-w-3xl">
                <Link
                    href={Links.legalFields}
                    className="inline-block text-gray-600 font-medium text-lg hover:underline transition"
                >
                    Mehr erfahren zu allen Rechtsgebieten →
                </Link>
            </div>
        </section>
    );
}