'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">
                    <motion.div
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.1}}
                    >
                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                            Dein Name *
                        </label>
                        <input
                            type="text"
                            required
                            placeholder="Max Mustermann"
                            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
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.2}}
                    >
                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                            Deine E-Mail *
                        </label>
                        <input
                            type="email"
                            required
                            placeholder="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>

                    <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}}>
                            Firmenname (optional)
                        </label>
                        <input
                            type="text"
                            placeholder="Mustermann GmbH"
                            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
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.4}}
                    >
                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                            Telefonnummer (optional)
                        </label>
                        <input
                            type="tel"
                            placeholder="+49 123 456789"
                            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
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.5}}
                    >
                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                            Webseite (optional)
                        </label>
                        <input
                            type="url"
                            placeholder="https://deinewebseite.de"
                            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.6}}
                >
                    <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                        Deine Nachricht *
                    </label>
                    <textarea
                        rows={4}
                        required
                        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.7}}
                >
                    <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;