'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"
            >
                {/* Unser Leitgedanke */}
                <motion.section
                    className="mb-32 grid md:grid-cols-2 gap-12 items-center"
                    initial={{opacity: 0, y: 40}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true, amount: 0.4}}
                    transition={{duration: 0.8, ease: 'easeOut'}}
                >
                    <div>
                        <h2 className="text-4xl font-extrabold mb-4 tracking-tight text-gray-900">Unser Leitgedanke</h2>
                        <p className="text-xl font-semibold text-gray-800">
                            Individuell beraten – Ihr Recht in professionellen Händen.
                        </p>
                    </div>
                    <p className="text-gray-700 text-lg leading-relaxed">
                        Wir stehen für eine persönliche und engagierte Betreuung unserer Mandant:innen. Unsere Beratung
                        ist
                        fundiert, zielgerichtet und individuell auf Ihre Bedürfnisse abgestimmt. Mit Nachdruck und
                        Weitblick
                        setzen wir uns dafür ein, Ihre Interessen wirkungsvoll zu vertreten und nachhaltige Lösungen zu
                        erzielen.
                    </p>
                </motion.section>

                {/* 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>
    );
}