"use client";

import Image from "next/image";
import {motion} from "framer-motion";
import {Button} from "@/components/ui/button";

export default function About() {
    return (
        <section className="py-20 px-4 bg-white dark:bg-gray-950">
            <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center">
                {/* Textbereich */}
                <motion.div
                    className="space-y-6"
                    initial={{opacity: 0, x: -30}}
                    whileInView={{opacity: 1, x: 0}}
                    transition={{duration: 0.6}}
                    viewport={{once: true}}
                >
                    <div>
                        <h2 className="text-3xl font-bold text-left text-gray-900 dark:text-white">
                            Über mich
                        </h2>
                        <div className="mt-2 w-20 h-1 bg-yellow-500 rounded"/>
                    </div>

                    <p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300 text-left">
                        Ich bin Max Mustermann, selbstständiger Rechtsanwalt mit Spezialisierung
                        auf Zivilrecht und Vertragsrecht. Seit über 10 Jahren berate und
                        vertrete ich Mandanten engagiert, individuell und mit juristischer
                        Präzision. Mein Ziel ist es, Ihre Interessen verständlich,
                        transparent und durchsetzungsstark zu vertreten.
                    </p>

                    {/* Button */}
                    <motion.div
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        transition={{duration: 0.4, delay: 0.2}}
                        viewport={{once: true}}
                    >
                        <a href="/about" className="inline-block">
                            <Button variant="outline">Mehr über mich</Button>
                        </a>
                    </motion.div>
                </motion.div>

                {/* Bildbereich */}
                <motion.div
                    className="flex justify-center"
                    initial={{opacity: 0, x: 30}}
                    whileInView={{opacity: 1, x: 0}}
                    transition={{duration: 0.6, delay: 0.2}}
                    viewport={{once: true}}
                >
                    <div className="w-[260px] h-[360px] relative rounded-xl overflow-hidden shadow-lg">
                        <Image
                            src="/images/team/mustermann.jpg"
                            alt="Max Mustermann"
                            fill
                            className="object-cover object-top"
                        />
                    </div>
                </motion.div>
            </div>
        </section>
    );
}