'use client';

import React from "react";
import {motion} from "framer-motion";
import {useThemeColors} from "@/utils/useThemeColors";

const ContactFormSection = () => {
    const colors = useThemeColors();

    return (
        <div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
            <motion.h2
                className="text-2xl sm:text-3xl font-bold mb-2"
                style={{color: colors.primaryText}}
                initial={{opacity: 0, y: 20}}
                whileInView={{opacity: 1, y: 0}}
                viewport={{once: true}}
                transition={{duration: 0.5}}
            >
                Schreib uns eine Nachricht
            </motion.h2>

            <motion.p
                className="text-sm mb-8 max-w-xl"
                style={{color: colors.secondaryText}}
                initial={{opacity: 0, y: 10}}
                whileInView={{opacity: 1, y: 0}}
                viewport={{once: true}}
                transition={{duration: 0.5, delay: 0.2}}
            >
                Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
            </motion.p>

            <form className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {["Dein Name", "Deine E-Mail"].map((label, index) => (
                        <motion.div
                            key={index}
                            initial={{opacity: 0, y: 10}}
                            whileInView={{opacity: 1, y: 0}}
                            viewport={{once: true}}
                            transition={{duration: 0.5, delay: index * 0.1}}
                        >
                            <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                                {label}
                            </label>
                            <input
                                type={index === 0 ? "text" : "email"}
                                placeholder={index === 0 ? "Max Mustermann" : "max@example.com"}
                                className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
                                style={{
                                    backgroundColor: colors.inputFieldBg,
                                    border: `1px solid ${colors.inputBorder}`,
                                    color: colors.primaryText,
                                }}
                            />
                        </motion.div>
                    ))}
                </div>

                <motion.div
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.5, delay: 0.3}}
                >
                    <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                        Deine Nachricht
                    </label>
                    <textarea
                        rows={4}
                        placeholder="Worum geht es?"
                        className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
                        style={{
                            backgroundColor: colors.inputFieldBg,
                            border: `1px solid ${colors.inputBorder}`,
                            color: colors.primaryText,
                        }}
                    />
                </motion.div>

                <motion.div
                    className="pt-4 flex justify-end"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.5, delay: 0.4}}
                >
                    <button
                        type="submit"
                        className="px-6 py-3 bg-blue-600 text-white text-sm sm:text-base font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
                    >
                        📩 Nachricht senden
                    </button>
                </motion.div>
            </form>
        </div>
    );
};

export default ContactFormSection;