'use client';

import SubpageHero from '@/components/SubpageHero';
import {Mail, Phone, Printer} from 'lucide-react';

export default function KontaktPage() {
    return (
        <>
            <SubpageHero title="Kontakt"/>

            <main className="bg-white py-20 px-6 md:px-16 lg:px-36 text-gray-900">
                <section className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">
                    {/* Left Column – Öffnungszeiten + Info */}
                    <div className="space-y-6 text-lg text-gray-700">
                        <p>
                            Sie erreichen uns:<br/>
                            Montag–Donnerstag von 08:00–12:00 Uhr und 13:30–17:15 Uhr<br/>
                            sowie Freitag bis 12:00 Uhr.
                        </p>
                        <p>
                            Nach Absprache sind auch Terminvereinbarungen außerhalb dieser Zeiten möglich.
                        </p>
                        <p>
                            Nutzen Sie gerne auch unser Kontaktformular, wir antworten Ihnen – wenn Sie Ihre Anfrage
                            montags bis donnerstags senden – in der Regel innerhalb von 24 h.
                        </p>
                    </div>

                    {/* Right Column – Adresse + Kontakt */}
                    <div className="space-y-6 text-lg text-gray-700">
                        <div>
                            <p className="font-medium">Kanzlei Mustermann & Künstler Partnerschaft mbB</p>
                            <p>Musterstraße 1 – Kanzleihaus<br/>12345 Musterstadt</p>
                        </div>

                        <div className="space-y-4 text-red-700">
                            <p className="flex items-center gap-2">
                                <Phone className="w-5 h-5"/>
                                <a href="tel:+491234567890" className="hover:underline">
                                    Telefon +49 123 4567890
                                </a>
                            </p>
                            <p className="flex items-center gap-2">
                                <Printer className="w-5 h-5"/>
                                <a href="fax:+491234567891" className="hover:underline">
                                    Telefax +49 123 4567891
                                </a>
                            </p>
                            <p className="flex items-center gap-2">
                                <Mail className="w-5 h-5"/>
                                <a href="mailto:info@kanzlei-mustermann.de" className="hover:underline">
                                    info@kanzlei-mustermann.de
                                </a>
                            </p>
                        </div>
                    </div>
                </section>

                {/* Map */}
                <section className="max-w-6xl mx-auto mt-20">
                    <div className="w-full h-[400px] rounded-xl overflow-hidden shadow-md">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2647.2535381707483!2d8.68212681574048!3d50.11092297942908!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bcd6b8d2a64a71%3A0x3f9b3931687d79f3!2sMusterstra%C3%9Fe%201%2C%2065432%20Musterstadt!5e0!3m2!1sde!2sde!4v1719150000000!5m2!1sde!2sde"
                            width="100%"
                            height="100%"
                            allowFullScreen
                            loading="lazy"
                            referrerPolicy="no-referrer-when-downgrade"
                        ></iframe>
                    </div>
                </section>
            </main>
        </>
    );
}