// app/page.tsx
'use client';

import {motion} from 'framer-motion';
import Hero from '@/components/Hero';
import Link from 'next/link';

export default function HomePage() {
    return (
        <div className="flex flex-col min-h-screen">
            <Hero/>

            <motion.main
                initial={{opacity: 0, y: 20}}
                animate={{opacity: 1, y: 0}}
                transition={{duration: 0.6}}
                className="pt-20 pb-20 px-6 md:px-16 lg:px-36 bg-gradient-to-b from-gray-50 to-white text-gray-900"
            >
                {/* Leistungen */}
                <section className="text-center mb-32">
                    <h2 className="text-4xl font-extrabold mb-12 tracking-tight">Unsere Schwerpunkte</h2>
                    <div className="grid md:grid-cols-3 gap-10">
                        {[
                            {
                                title: 'Arbeitsrecht',
                                desc: 'Kündigung, Abmahnung, Aufhebungsvertrag – wir setzen Ihre Rechte durch.',
                            },
                            {
                                title: 'Familienrecht',
                                desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.',
                            },
                            {
                                title: 'Vertragsrecht',
                                desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.',
                            },
                        ].map(({title, desc}) => (
                            <motion.div
                                key={title}
                                whileInView={{opacity: 1, y: 0}}
                                initial={{opacity: 0, y: 30}}
                                transition={{duration: 0.4}}
                                viewport={{once: true}}
                                className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"
                            >
                                <h3 className="text-2xl font-semibold mb-3 text-blue-800">{title}</h3>
                                <p className="text-gray-600 leading-relaxed">{desc}</p>
                            </motion.div>
                        ))}
                    </div>
                </section>

                {/* Über die Kanzlei */}
                <section className="max-w-4xl mx-auto text-center mb-32">
                    <h2 className="text-4xl font-extrabold mb-8 tracking-tight">Über unsere Kanzlei</h2>
                    <p className="text-gray-700 text-lg leading-relaxed">
                        Seit über 15 Jahren beraten und vertreten wir Mandantinnen und Mandanten aus ganz Deutschland.
                        Unsere
                        Kanzlei steht für Kompetenz, Integrität und persönliche Betreuung. Wir nehmen uns Zeit für Ihre
                        Anliegen und entwickeln individuelle Strategien – effizient und zielorientiert.
                    </p>
                </section>

                {/* Vorteile */}
                <section className="text-center mb-32">
                    <h2 className="text-4xl font-extrabold mb-10 tracking-tight">Ihre Vorteile mit uns</h2>
                    <div className="grid md:grid-cols-3 gap-8">
                        {[
                            'Direkte & ehrliche Kommunikation',
                            'Schnelle Terminvergabe',
                            'Fachanwälte mit jahrelanger Erfahrung',
                        ].map((vorteil) => (
                            <div
                                key={vorteil}
                                className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"
                            >
                                <p className="text-gray-800 font-medium text-lg">{vorteil}</p>
                            </div>
                        ))}
                    </div>
                </section>

                {/* Call to Action */}
                <section className="text-center bg-blue-50 py-16 rounded-xl">
                    <h2 className="text-3xl font-bold mb-4 text-blue-800">Vereinbaren Sie jetzt ein Erstgespräch</h2>
                    <p className="text-gray-700 mb-6 text-lg">
                        Lassen Sie sich unverbindlich beraten und lernen Sie unsere Kanzlei kennen.
                    </p>
                    <Link href="/kontakt/">
                        <button
                            className="px-8 py-3 bg-blue-700 text-white rounded-xl hover:bg-blue-800 transition shadow">
                            Jetzt Termin sichern
                        </button>
                    </Link>
                </section>
            </motion.main>
        </div>
    );
}