"use client";

import {motion} from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import {
    VerticalTimeline,
    VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import {
    Briefcase,
    GraduationCap,
} from "lucide-react";
import {Button} from "@/components/ui/button";

export default function AboutPage() {
    return (
        <section className="py-20 px-4 bg-white dark:bg-gray-950">
            <div className="max-w-6xl mx-auto space-y-20">
                {/* Einleitung */}
                <motion.div
                    className="grid md:grid-cols-2 gap-10 items-center"
                    initial={{opacity: 0, y: 30}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.6}}
                >
                    <div className="space-y-6">
                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">
                            Über mich
                        </h1>
                        <div className="w-20 h-1 bg-yellow-500 rounded"/>
                        <p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
                            Ich bin Max Mustermann, seit über 10 Jahren als Rechtsanwalt in Berlin tätig.
                            Mein Schwerpunkt liegt im Zivil-, Vertrags-, Miet- und Arbeitsrecht.
                            Mir ist wichtig, juristische Sachverhalte klar, verständlich und lösungsorientiert zu
                            vermitteln.
                        </p>
                    </div>
                    <div className="w-full max-w-sm mx-auto">
                        <div className="aspect-[3/4] relative rounded-xl overflow-hidden shadow-md">
                            <Image
                                src="/images/team/mustermann.jpg"
                                alt="Max Mustermann"
                                fill
                                className="object-cover object-top"
                            />
                        </div>
                    </div>
                </motion.div>

                {/* Werdegang Timeline */}
                <motion.div
                    initial={{opacity: 0, y: 30}}
                    whileInView={{opacity: 1, y: 0}}
                    transition={{duration: 0.6}}
                    viewport={{once: true}}
                >
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-10">
                        Werdegang
                    </h2>

                    <VerticalTimeline lineColor="#e5e7eb">
                        <VerticalTimelineElement
                            date="2024"
                            icon={<Briefcase/>}
                            iconStyle={{background: "#facc15", color: "#000"}}
                            contentStyle={{
                                background: "#fff",
                                color: "#000",
                                boxShadow: "none",
                                border: "1px solid #e5e7eb",
                            }}
                        >
                            <h3 className="font-semibold text-lg">Kanzlei-Gründung in Berlin</h3>
                            <p className="text-sm">
                                Selbstständig tätig mit Fokus auf Zivil- und Vertragsrecht.
                            </p>
                        </VerticalTimelineElement>

                        <VerticalTimelineElement
                            date="2018–2023"
                            icon={<Briefcase/>}
                            iconStyle={{background: "#facc15", color: "#000"}}
                            contentStyle={{
                                background: "#fff",
                                color: "#000",
                                boxShadow: "none",
                                border: "1px solid #e5e7eb",
                            }}
                        >
                            <h3 className="font-semibold text-lg">
                                Rechtsanwalt in mittelständischer Kanzlei
                            </h3>
                            <p className="text-sm">
                                Beratung und Vertretung in Arbeits-, Miet- und Zivilrecht.
                            </p>
                        </VerticalTimelineElement>

                        <VerticalTimelineElement
                            date="2016"
                            icon={<GraduationCap/>}
                            iconStyle={{background: "#facc15", color: "#000"}}
                            contentStyle={{
                                background: "#fff",
                                color: "#000",
                                boxShadow: "none",
                                border: "1px solid #e5e7eb",
                            }}
                        >
                            <h3 className="font-semibold text-lg">Zweites Staatsexamen</h3>
                            <p className="text-sm">
                                Abschluss des Referendariats in Berlin.
                            </p>
                        </VerticalTimelineElement>

                        <VerticalTimelineElement
                            date="2014"
                            icon={<GraduationCap/>}
                            iconStyle={{background: "#facc15", color: "#000"}}
                            contentStyle={{
                                background: "#fff",
                                color: "#000",
                                boxShadow: "none",
                                border: "1px solid #e5e7eb",
                            }}
                        >
                            <h3 className="font-semibold text-lg">Erstes Staatsexamen</h3>
                            <p className="text-sm">
                                Studium der Rechtswissenschaften an der Humboldt-Universität Berlin.
                            </p>
                        </VerticalTimelineElement>
                    </VerticalTimeline>
                </motion.div>

                {/* Call to Action */}
                <motion.div
                    className="text-center pt-10"
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    transition={{duration: 0.5}}
                    viewport={{once: true}}
                >
                    <h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
                        Haben Sie Fragen oder wünschen ein persönliches Gespräch?
                    </h3>
                    <Link href="/kontakt">
                        <Button size="lg">Jetzt Kontakt aufnehmen</Button>
                    </Link>
                </motion.div>
            </div>
        </section>
    );
}