'use client';

import {lawyers} from '@/app/ueber-uns/lawyers';
import Divider from '@/components/Divider';
import SubpageHero from '@/components/SubpageHero';

export default function UeberUnsPage() {
    return (
        <>
            <SubpageHero
                title="Über uns"
                subtitle="Persönlich. Kompetent. Engagiert – das Team der Kanzlei Mustermann & Künstler."
            />

            <main className="bg-white pt-16 pb-32 px-6 md:px-16 lg:px-36 text-gray-900 space-y-24">
                {/* Kanzlei-Intro */}
                <section className="max-w-3xl space-y-4">
                    <p className="text-lg text-gray-700">
                        Die Kanzlei Mustermann & Künstler steht für rechtliche Exzellenz, persönliche Beratung und
                        langjährige Erfahrung. Wir vereinen spezialisierte Fachkenntnisse mit menschlichem Gespür für
                        individuelle Lebenssituationen.
                    </p>
                    <p className="text-lg text-gray-700">
                        Unser Anspruch ist es, Sie transparent, ehrlich und effizient zu beraten und zu vertreten –
                        unabhängig davon, ob es sich um eine komplexe Nachlassregelung, eine arbeitsrechtliche
                        Auseinandersetzung oder familiäre Fragestellungen handelt.
                    </p>
                </section>

                {/* Anwälte */}
                {lawyers.map((lawyer, i) => (
                    <div key={i}>
                        <section
                            className={`flex flex-col md:flex-row ${
                                i % 2 === 1 ? 'md:flex-row-reverse' : ''
                            } gap-8 md:items-start`}
                        >
                            {/* image */}
                            <div className="w-full md:w-1/3">
                                <img
                                    src={lawyer.image}
                                    alt={lawyer.name}
                                    className="w-full h-auto rounded-xl shadow-sm object-cover"
                                />
                            </div>

                            {/* content */}
                            <div className="w-full md:w-2/3 space-y-4">
                                <h2 className="text-2xl font-bold text-red-700">{lawyer.name}</h2>
                                <p className="text-base text-gray-800">{lawyer.short}</p>

                                {lawyer.biography && (
                                    <div>
                                        <h3 className="font-semibold mb-1">Über</h3>
                                        <p className="text-sm text-gray-700 whitespace-pre-line">
                                            {lawyer.biography}
                                        </p>
                                    </div>
                                )}

                                {lawyer.specialties?.length > 0 && (
                                    <div>
                                        <h3 className="font-semibold mb-1">Fachgebiete</h3>
                                        <ul className="list-disc pl-5 text-sm text-gray-700 space-y-1">
                                            {lawyer.specialties.map((s, idx) => (
                                                <li key={idx}>{s}</li>
                                            ))}
                                        </ul>
                                    </div>
                                )}

                                {lawyer.personal?.length > 0 && (
                                    <div>
                                        <h3 className="font-semibold mb-1">Zur Person</h3>
                                        <ul className="list-disc pl-5 text-sm text-gray-700 space-y-1">
                                            {lawyer.personal.map((p, idx) => (
                                                <li key={idx}>{p}</li>
                                            ))}
                                        </ul>
                                    </div>
                                )}
                            </div>
                        </section>

                        {i < lawyers.length - 1 && <Divider/>}
                    </div>
                ))}
            </main>
        </>
    );
}