"use client";

import React, {useEffect, useContext} from "react";
import AOS from "aos";
import "aos/dist/aos.css";
import SmallHero from "@/components/Helper/SmallHero";
import {ThemeContext} from "@/components/provider/ThemeProvider";
import {themeColors} from "@/components/Helper/ThemeColors";

const Contact = () => {
    const {theme} = useContext(ThemeContext);
    const colors = themeColors[theme];

    useEffect(() => {
        AOS.init({
            duration: 1000,
            easing: "ease",
            once: true,
            anchorPlacement: "top-bottom",
        });
    }, []);

    return (
        <div className="overflow-hidden transition-colors duration-500"
             style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}>

            {/* Hero Section */}
            <div className="mt-[10vh]">
                <SmallHero
                    title="Kontakt"
                    subtitle="Hast du Fragen? Wir sind für dich da!"
                    backgroundImage="/images/contact.png"
                />
            </div>


            {/* Contact Form */}
            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12">
                <h2 className="text-2xl md:text-3xl font-bold text-center"
                    data-aos="fade-up"
                    data-aos-delay="400"
                >
                    Schreib uns eine Nachricht
                </h2>
                <p data-aos="fade-up" data-aos-delay="600"
                   className="text-center mt-3 text-[var(--secondary-text)]">
                    Wir melden uns schnellstmöglich bei dir!
                </p>

                <form className="mt-8 max-w-2xl mx-auto space-y-6">
                    {/* Name & Email */}
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {["Dein Name", "Deine E-Mail"].map((label, index) => (
                            <div key={index} data-aos="fade-up" data-aos-delay={index * 100}>
                                <label className="block font-semibold">{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
                                    }}
                                />
                            </div>
                        ))}
                    </div>

                    {/* Message */}
                    <div data-aos="fade-up" data-aos-delay="300">
                        <label className="block font-semibold">Deine Nachricht</label>
                        <textarea
                            rows={4}
                            placeholder="Schreibe deine Nachricht..."
                            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
                            }}
                        />
                    </div>

                    {/* Submit Button */}
                    <div className="text-center" data-aos="fade-up" data-aos-delay="400">
                        <button
                            type="submit"
                            className="px-6 py-3 bg-blue-600 text-white text-lg font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
                        >
                            📩 Nachricht senden
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default Contact;