'use client'

import {
    VerticalTimeline,
    VerticalTimelineElement,
} from 'react-vertical-timeline-component'
import 'react-vertical-timeline-component/style.min.css'
import {GraduationCap, Briefcase, Building2} from 'lucide-react'

export function AboutMeSection() {
    const timeline = [
        {
            date: '2010',
            title: 'Abschluss Bachelor of Laws (LL.B.)',
            desc: 'Studium der Wirtschaftsjuristik an der Hochschule XYZ.',
            icon: <GraduationCap className="w-5 h-5"/>,
        },
        {
            date: '2012',
            title: 'Master Steuerrecht (M.A.)',
            desc: 'Vertiefung im Bereich nationales und internationales Steuerrecht.',
            icon: <GraduationCap className="w-5 h-5"/>,
        },
        {
            date: '2014',
            title: 'Steuerberaterprüfung bestanden',
            desc: 'Zulassung als Steuerberaterin durch die Steuerberaterkammer ABC.',
            icon: <Building2 className="w-5 h-5"/>,
        },
        {
            date: '2015–2020',
            title: 'Tätigkeit in mittelständischer Kanzlei',
            desc: 'Beratung von Unternehmen, Freiberuflern und Privatpersonen.',
            icon: <Briefcase className="w-5 h-5"/>,
        },
        {
            date: 'seit 2021',
            title: 'Eigene Kanzlei in Musterstadt',
            desc: 'Gründung der Steuerkanzlei Mustermann mit Fokus auf digitale Beratung.',
            icon: <Briefcase className="w-5 h-5"/>,
        },
    ]

    return (
        <section id="about" className="py-20 px-6 bg-white">
            <div className="max-w-4xl mx-auto">
                <h2 className="text-3xl font-bold mb-8 text-left">Über mich</h2>
                <p className="text-lg mb-12 text-left">
                    Als erfahrene Steuerberaterin begleite ich seit über zehn Jahren Mandanten in sämtlichen
                    steuerlichen
                    Fragen – transparent, digital und auf Augenhöhe. Meine Schwerpunkte liegen in der vorausschauenden
                    Steuergestaltung sowie der Begleitung von Gründern und mittelständischen Unternehmen.
                </p>

                <VerticalTimeline lineColor="#e5e7eb">
                    {timeline.map(({date, title, desc, icon}) => (
                        <VerticalTimelineElement
                            key={date}
                            date={date}
                            icon={icon}
                            iconStyle={{background: '#0f172a', color: '#fff'}}
                            contentStyle={{background: '#f9fafb', color: '#0f172a'}}
                            contentArrowStyle={{borderRight: '7px solid #f9fafb'}}
                        >
                            <h3 className="text-xl font-semibold">{title}</h3>
                            <p className="text-sm text-muted-foreground">{desc}</p>
                        </VerticalTimelineElement>
                    ))}
                </VerticalTimeline>
            </div>
        </section>
    )
}