"use client";

import { motion } from "framer-motion";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

export default function KontaktPage() {
    return (
        <section className="bg-white dark:bg-gray-950">
            {/* Kontaktbereich */}
            <div className="py-20 px-4 bg-white dark:bg-gray-950">
                <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
                    {/* Textbereich */}
                    <motion.div
                        initial={{ opacity: 0, x: -30 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.6 }}
                    >
                        <h2 className="text-2xl md:text-3xl font-bold text-left text-gray-900 dark:text-white mb-4">
                            Kontaktinformationen
                        </h2>

                        <p className="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
                            Sie möchten einen Termin vereinbaren oder haben Fragen zu meinen Leistungen?
                            Senden Sie mir gern eine Nachricht über das Kontaktformular oder melden Sie sich direkt per E-Mail.
                        </p>
                        <div className="text-gray-800 dark:text-gray-300 space-y-2 text-sm">
                            <p><strong>Telefon:</strong> 030 / 123 456 78</p>
                            <p><strong>E-Mail:</strong> kontakt@kanzlei-mustermann.de</p>
                            <p><strong>Adresse:</strong> Musterstraße 1, 10115 Berlin</p>
                        </div>
                    </motion.div>

                    {/* Google Maps */}
                    <motion.div
                        className="w-full h-80 rounded-lg overflow-hidden"
                        initial={{ opacity: 0, x: 30 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.6, delay: 0.2 }}
                    >
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2429.994634045578!2d13.388859315790138!3d52.51703617981242!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a851e3be111111%3A0x35e53e39c16c110b!2sReichstagsgeb%C3%A4ude!5e0!3m2!1sde!2sde!4v1619442878930!5m2!1sde!2sde"
                            width="100%"
                            height="100%"
                            style={{ border: 0 }}
                            allowFullScreen={false}
                            loading="lazy"
                            referrerPolicy="no-referrer-when-downgrade"
                        ></iframe>
                    </motion.div>
                </div>

                {/* Formular unterhalb */}
                <motion.div
                    className="max-w-4xl mx-auto mt-16"
                    initial={{ opacity: 0, y: 30 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6 }}
                >
                    <form onSubmit={(e) => e.preventDefault()} className="space-y-6 pt-6">
                        <div className="grid md:grid-cols-2 gap-4">
                            <div className="md:col-span-1">
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Anrede</label>
                                <Select required>
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder="Bitte auswählen..." />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="herr">Herr</SelectItem>
                                        <SelectItem value="frau">Frau</SelectItem>
                                        <SelectItem value="divers">Divers</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Titel</label>
                                <Input className="h-12" type="text" placeholder="z. B. Dr." />
                            </div>
                            <Input className="md:col-span-1 h-12" type="text" placeholder="Vorname*" required />
                            <Input className="md:col-span-1 h-12" type="text" placeholder="Nachname*" required />
                            <Input className="md:col-span-2 h-12" type="text" placeholder="Straße und Hausnummer*" required />
                            <Input className="md:col-span-1 h-12" type="text" placeholder="PLZ*" required />
                            <Input className="md:col-span-1 h-12" type="text" placeholder="Ort*" required />
                            <Input className="md:col-span-1 h-12" type="text" placeholder="Telefon" />
                            <Input className="md:col-span-1 h-12" type="email" placeholder="E-Mail*" required />
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Ihre Nachricht</label>
                            <Textarea required rows={8} placeholder="Ihre Nachricht" className="text-base h-48" />
                        </div>
                        <Button type="submit" className="w-full h-12 text-base">
                            Senden
                        </Button>
                    </form>
                </motion.div>
            </div>
        </section>
    );
}