'use client';

import {team} from '@/data/team';
import SubpageHero from '@/components/SubpageHero';
import {motion} from 'framer-motion';
import DualCTA from "@/components/DualCTA";

const fadeUp = {
    hidden: {opacity: 0, y: 40},
    visible: {
        opacity: 1,
        y: 0,
        transition: {
            duration: 0.6,
            ease: 'easeOut',
        },
    },
};

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">
                {/* Wer wir sind */}
                <motion.section
                    className="max-w-6xl mx-auto space-y-6"
                    initial="hidden"
                    whileInView="visible"
                    viewport={{once: true, amount: 0.2}}
                    variants={fadeUp}
                >
                    <h2 className="text-3xl font-semibold text-gray-900">Wer wir sind</h2>
                    <div className="space-y-6 text-lg text-gray-700">
                        <p>
                            Die Rechtsanwälte Mustermann & Künstler Partnerschaft mbB zählt zu den führenden Kanzleien
                            in Lörrach und besteht derzeit aus sechs Rechtsanwälten. Sie wurde 1954 gegründet und baut
                            auf langjährige Erfahrung und Tradition.
                        </p>
                        <p>
                            Namensgeber und Mitbegründer war Dr. Winfried Mustermann. Unser über Jahrzehnte gewachsener
                            Wertekonsens ist geprägt von gegenseitigem Vertrauen, Verlässlichkeit und unternehmerischem
                            Denken.
                        </p>
                    </div>
                </motion.section>

                {/* Wofür wir stehen */}
                <motion.section
                    className="max-w-6xl mx-auto space-y-6"
                    initial="hidden"
                    whileInView="visible"
                    viewport={{once: true, amount: 0.2}}
                    variants={fadeUp}
                >
                    <h2 className="text-3xl font-semibold text-gray-900">Wofür wir stehen</h2>
                    <div className="space-y-6 text-lg text-gray-700">
                        <p>
                            Unsere Rechtsanwälte sind auf ihren Rechtsgebieten hoch spezialisiert und orientieren sich
                            konsequent am individuellen Mandat. Alle Rechtsanwälte sind Fachanwälte.
                        </p>
                        <p>
                            Wir gewährleisten eine umfassende Beratung und eine qualifizierte Vertretung. Fundierte
                            juristische Arbeit ist für uns selbstverständlich.
                        </p>
                    </div>
                </motion.section>

                {/* Region */}
                <motion.section
                    className="max-w-6xl mx-auto space-y-6"
                    initial="hidden"
                    whileInView="visible"
                    viewport={{once: true, amount: 0.2}}
                    variants={fadeUp}
                >
                    <h2 className="text-3xl font-semibold text-gray-900">
                        Wir sind für Sie da
                    </h2>
                    <p className="text-lg text-gray-700">
                        von Freiburg bis Waldshut-Tiengen und deutschlandweit
                    </p>
                    <div className="w-full h-[400px] shadow-md rounded-xl overflow-hidden">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2693.342189064324!2d7.662139176999193!3d47.614119471193404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4791b69dce6b20f3%3A0x2e9e926c174fbad7!2sKanzlei%20Dr.%20Hitzfeld%20%26%20Kollegen!5e0!3m2!1sen!2sde!4v1719150000000!5m2!1sen!2sde"
                            width="100%"
                            height="100%"
                            allowFullScreen
                            loading="lazy"
                            referrerPolicy="no-referrer-when-downgrade"
                        ></iframe>
                    </div>
                </motion.section>

                {/* Anwälte */}
                <motion.section
                    className="max-w-6xl mx-auto space-y-12 text-gray-900"
                    initial="hidden"
                    whileInView="visible"
                    viewport={{once: true, amount: 0.2}}
                    variants={fadeUp}
                >
                    <h2 className="text-3xl font-semibold">Unser Team</h2>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-10">
                        {team.map((lawyer, i) => (
                            <motion.div
                                key={i}
                                className="flex items-start gap-6"
                                initial={{opacity: 0, y: 20}}
                                whileInView={{opacity: 1, y: 0}}
                                viewport={{once: true}}
                                transition={{delay: i * 0.1, duration: 0.5, ease: 'easeOut'}}
                            >
                                <img
                                    src={lawyer.image}
                                    alt={lawyer.name}
                                    className="w-24 h-32 object-cover rounded-lg shadow-sm"
                                />
                                <div className="flex flex-col justify-center">
                                    <h3 className="text-lg font-semibold">{lawyer.name}</h3>
                                    {lawyer.role && (
                                        <p className="text-sm text-gray-600">{lawyer.role}</p>
                                    )}
                                    {lawyer.specialties?.length > 0 && (
                                        <ul className="text-base mt-2 space-y-1">
                                            {lawyer.specialties.map((s, idx) => (
                                                <li key={idx}>• {s}</li>
                                            ))}
                                        </ul>
                                    )}
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </motion.section>
            </main>

            <DualCTA/>
        </>
    );
}