'use client';

import {motion} from 'framer-motion';
import Hero from '@/components/Hero';
import DualCTA from "@/components/DualCTA";
import ServicesSection from "@/app/(root)/ServicesSection";

export default function HomePage() {
    return (
        <div>
            <Hero/>

            <motion.div
                initial={{opacity: 0}}
                animate={{opacity: 1}}
                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"
            >
                <section className="mb-32 grid md:grid-cols-2 gap-12 items-center">
                    <motion.div
                        initial={{opacity: 0, y: 40}}
                        whileInView={{opacity: 1, y: 0}}
                        transition={{duration: 0.8, ease: 'easeOut'}}
                        viewport={{once: true, amount: 0.4}}
                    >
                        <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>
                    </motion.div>

                    <motion.p
                        initial={{opacity: 0, y: 40}}
                        whileInView={{opacity: 1, y: 0}}
                        transition={{duration: 0.8, ease: 'easeOut', delay: 0.2}}
                        viewport={{once: true, amount: 0.4}}
                        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.
                    </motion.p>
                </section>
            </motion.div>

            <ServicesSection />

            {/* 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.div>*/}

            <DualCTA/>

        </div>
    );
}