rhein-sw-website/components/Contact/Section/ContactFormSection.tsx

'use client';

import React, { useState } from "react";
import { motion } from "framer-motion";
import { useThemeColors } from "@/utils/useThemeColors";
import HCaptcha from "@hcaptcha/react-hcaptcha";

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

    const [form, setForm] = useState({
        name: "",
        email: "",
        company: "",
        phone: "",
        website: "",
        message: "",
    });

    const [captchaToken, setCaptchaToken] = useState("");
    const [submitted, setSubmitted] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    const isDev = process.env.NODE_ENV === "development";
    const hCaptchaSiteKey = isDev
        ? "10000000-ffff-ffff-ffff-000000000001" // hCaptcha test sitekey
        : "ES_ff59a664dc764f92870bf2c7b4eab7c5";

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        setForm({ ...form, [e.target.name]: e.target.value });
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        setError("");

        if (!captchaToken) {
            setError("Bitte löse das CAPTCHA, um fortzufahren.");
            setLoading(false);
            return;
        }

        try {
            const res = await fetch("/api/contact", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ ...form, captcha: captchaToken }),
            });

            if (res.ok) {
                setSubmitted(true);
                setForm({ name: "", email: "", company: "", phone: "", website: "", message: "" });
            } else {
                const resJson = await res.json();
                setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut.");
            }
        } catch (err) {
            setError("Serverfehler. Bitte versuche es später erneut.");
        }

        setLoading(false);
    };

    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>

            {submitted ? (
                <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich gesendet!</div>
            ) : (
                <form className="space-y-6" onSubmit={handleSubmit}>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {[
                            { label: "Dein Name *", name: "name", type: "text", required: true, placeholder: "Max Mustermann" },
                            { label: "Deine E-Mail *", name: "email", type: "email", required: true, placeholder: "max@example.com" },
                            { label: "Firmenname (optional)", name: "company", type: "text", required: false, placeholder: "Mustermann GmbH" },
                            { label: "Telefonnummer (optional)", name: "phone", type: "tel", required: false, placeholder: "+49 123 456789" },
                            { label: "Webseite (optional)", name: "website", type: "url", required: false, placeholder: "https://..." },
                        ].map((field, index) => (
                            <motion.div
                                key={field.name}
                                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 }}>
                                    {field.label}
                                </label>
                                <input
                                    type={field.type}
                                    name={field.name}
                                    value={form[field.name as keyof typeof form]}
                                    onChange={handleChange}
                                    required={field.required}
                                    placeholder={field.placeholder}
                                    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
                            name="message"
                            rows={4}
                            required
                            value={form.message}
                            onChange={handleChange}
                            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-2"
                        initial={{ opacity: 0, y: 10 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.5, delay: 0.7 }}
                    >
                        <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken} />
                    </motion.div>

                    {error && (
                        <div className="text-red-600 font-medium pt-2">
                            ❌ {error}
                        </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.8 }}
                    >
                        <button
                            type="submit"
                            disabled={loading}
                            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 disabled:opacity-50"
                        >
                            {loading ? "Sende..." : "📩 Nachricht senden"}
                        </button>
                    </motion.div>
                </form>
            )}
        </div>
    );
};

export default ContactFormSection;