"use client";

import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";

export default function KontaktForm() {
    const router = useRouter();

    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-center">
                {/* 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 auf der nächsten Seite oder schreiben Sie mir 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>

                {/* CTA rechts */}
                <motion.div
                    initial={{ opacity: 0, x: 30 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.6, delay: 0.2 }}
                    viewport={{ once: true }}
                    className="w-full flex justify-center"
                >
                    <Button size="lg" className="px-10 py-6 text-base" onClick={() => router.push("/kontakt")}>
                        Zum Kontaktformular
                    </Button>
                </motion.div>
            </div>
        </section>
    );
}