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

import {motion} from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import {basePath} from '@/next.config';

export default function HomePage() {
    return (
        <div className="flex flex-col min-h-screen">
            <motion.div
                initial={{opacity: 0, y: 20}}
                animate={{opacity: 1, y: 0}}
                transition={{duration: 0.6}}
                className="space-y-24 pt-32 pb-16 px-4 md:px-12 lg:px-24 bg-[#f9f9f9] text-gray-900"
            >
                {/* Hero Section mit Hintergrundbild */}
                <section className="relative text-center text-white h-[70vh] rounded-xl overflow-hidden shadow-lg">
                    <Image
                        src="/images/hero.jpeg"
                        alt="Anwaltskanzlei Hintergrund"
                        fill
                        className="object-cover brightness-[0.4]"
                        quality={90}
                    />
                    <div className="relative z-10 flex flex-col justify-center items-center h-full px-4">
                        <h1 className="text-4xl md:text-6xl font-bold mb-6">Ihre Kanzlei für Arbeits-, Familien- und
                            Vertragsrecht</h1>
                        <p className="text-lg max-w-2xl text-gray-100">
                            Persönliche Betreuung. Klare Kommunikation. Effektive Lösungen für Ihr Anliegen.
                        </p>
                        <Link href={`${basePath}/kontakt/`}>
                            <motion.button
                                whileHover={{scale: 1.05}}
                                whileTap={{scale: 0.95}}
                                className="mt-6 px-8 py-3 bg-blue-700 text-white rounded-xl shadow hover:bg-blue-800 transition"
                            >
                                Kontakt aufnehmen
                            </motion.button>
                        </Link>
                    </div>
                </section>

                {/* Divider */}
                <div className="w-full h-[2px] bg-gray-300"/>

                {/* Leistungen */}
                <section>
                    <h2 className="text-3xl font-bold text-center mb-12">Unsere Schwerpunkte</h2>
                    <div className="grid md:grid-cols-3 gap-8">
                        {[
                            {
                                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-6 rounded-xl shadow hover:shadow-md"
                            >
                                <h3 className="text-xl font-semibold mb-2">{title}</h3>
                                <p className="text-gray-600">{desc}</p>
                            </motion.div>
                        ))}
                    </div>
                </section>

                {/* Divider */}
                <div className="w-full h-[2px] bg-gray-300"/>

                {/* Über die Kanzlei */}
                <section className="max-w-4xl mx-auto text-center">
                    <h2 className="text-3xl font-bold mb-6">Über unsere Kanzlei</h2>
                    <p className="text-gray-700 text-lg">
                        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>

                {/* Divider */}
                <div className="w-full h-[2px] bg-gray-300"/>

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

                {/* Divider */}
                <div className="w-full h-[2px] bg-gray-300"/>

                {/* Call to Action */}
                <section className="text-center">
                    <h2 className="text-2xl font-bold mb-4">Vereinbaren Sie jetzt ein unverbindliches Erstgespräch</h2>
                    <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>
        </div>
    );
}