'use client';

import {motion} from 'framer-motion';
import SubpageHero from "@/components/SubpageHero";

const rechtsgebiete = [
    {
        title: 'Arbeitsrecht',
        lawyer: 'RA Dr. Mustermann',
        description:
            'Im Arbeitsrecht vertreten wir sowohl Arbeitnehmer:innen als auch Arbeitgeber:innen in allen Fragen rund um das Arbeitsverhältnis.',
        example:
            'Beispiel: Eine Arbeitnehmerin erhält eine fristlose Kündigung und möchte dagegen vorgehen.',
    },
    {
        title: 'Familienrecht',
        lawyer: 'RAin Künstler',
        description:
            'Wir unterstützen Sie in allen familienrechtlichen Angelegenheiten – von Scheidung bis Sorgerecht.',
        example:
            'Beispiel: Ein Ehepaar möchte sich einvernehmlich scheiden lassen und das Umgangsrecht für die Kinder regeln.',
    },
    {
        title: 'Vertragsrecht',
        lawyer: 'RA Dr. Mustermann',
        description:
            'Im Vertragsrecht prüfen und gestalten wir Verträge jeder Art und vertreten Sie bei Streitigkeiten.',
        example:
            'Beispiel: Ein Unternehmer möchte einen Dienstleistungsvertrag rechtssicher aufsetzen lassen.',
    },
];

export default function RechtsgebietePage() {
    return (
        <div>
            <SubpageHero
                title="Unsere Rechtsgebiete"
                subtitle="Ein Überblick über unsere Spezialisierungen und Ansprechpartner:innen."
            />

            <main className="bg-white py-24 px-6 md:px-16 lg:px-36 text-gray-900">
                <div className="space-y-16">
                    {rechtsgebiete.map((area, index) => (
                        <motion.section
                            key={area.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-l-4 border-red-600 pl-6"
                        >
                            <h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-2">{area.title}</h2>
                            <p className="text-gray-800 text-base md:text-lg mb-2">{area.description}</p>
                            <p className="text-gray-700 text-sm md:text-base mb-1 italic">{area.example}</p>
                            <p className="text-sm text-gray-500">Zuständig: <span
                                className="font-medium">{area.lawyer}</span></p>
                        </motion.section>
                    ))}
                </div>
            </main>
        </div>
    );
}