"use client";

import {Input} from "@/components/ui/input";
import {Textarea} from "@/components/ui/textarea";
import {Button} from "@/components/ui/button";
import {motion} from "framer-motion";

export default function KontaktForm() {
    return (
        <section className="py-20 px-4 bg-[#f9f9f6] dark:bg-[#1a1a1a]">
            <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
                {/* Text links */}
                <motion.div
                    initial={{opacity: 0, x: -30}}
                    whileInView={{opacity: 1, x: 0}}
                    transition={{duration: 0.6}}
                    viewport={{once: true}}
                >
                    <h2 className="text-3xl md:text-4xl font-bold text-left text-gray-900 dark:text-white mb-4">
                        Kontakt
                    </h2>
                    <div className="w-20 h-1 bg-yellow-500 rounded mb-6"/>
                    <p className="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
                        Sie haben Fragen oder möchten einen Beratungstermin vereinbaren? Nutzen Sie gern das
                        Kontaktformular oder schreiben Sie mir direkt per E-Mail. Ich melde mich schnellstmöglich bei
                        Ihnen zurück.
                    </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>

                {/* Formular rechts */}
                <motion.form
                    className="space-y-6"
                    initial={{opacity: 0, x: 30}}
                    whileInView={{opacity: 1, x: 0}}
                    transition={{duration: 0.6, delay: 0.2}}
                    viewport={{once: true}}
                    onSubmit={(e) => e.preventDefault()} // Dummy – kann ersetzt werden
                >
                    <Input type="text" placeholder="Ihr Name" required/>
                    <Input type="email" placeholder="Ihre E-Mail" required/>
                    <Textarea placeholder="Ihre Nachricht" rows={5} required/>
                    <Button type="submit" className="w-full">
                        Nachricht senden
                    </Button>
                </motion.form>
            </div>
        </section>
    );
}