'use client';

import SmallHero from '@/components/Helper/SmallHero';
import React from 'react';
import {motion} from 'framer-motion';

const TermsOfUseComp = () => {
    return (
        <div className="overflow-hidden bg-background text-foreground">
            {/* Hero Section */}
            <div className="mt-[10vh]">
                <SmallHero
                    title="AGB"
                    subtitle=""
                    backgroundImage="/images/contact.png"
                />
            </div>

            {/* Contact Form */}
            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12">
                <motion.h2
                    className="text-2xl md:text-3xl font-bold text-center"
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.6}}
                >
                    Schreib uns eine Nachricht
                </motion.h2>

                <motion.p
                    className="text-center mt-3 text-muted-foreground"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.5, delay: 0.2}}
                >
                    Wir melden uns schnellstmöglich bei dir!
                </motion.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) => (
                            <motion.div
                                key={index}
                                initial={{opacity: 0, y: 10}}
                                whileInView={{opacity: 1, y: 0}}
                                viewport={{once: true}}
                                transition={{duration: 0.5, delay: index * 0.2}}
                            >
                                <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 border border-border bg-card text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
                                />
                            </motion.div>
                        ))}
                    </div>

                    {/* Message */}
                    <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">Deine Nachricht</label>
                        <textarea
                            rows={4}
                            placeholder="Schreibe deine Nachricht..."
                            className="w-full p-3 rounded-lg border border-border bg-card text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
                        />
                    </motion.div>

                    {/* Submit Button */}
                    <motion.div
                        className="text-center"
                        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-lg font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
                        >
                            📩 Nachricht senden
                        </button>
                    </motion.div>
                </form>
            </div>
        </div>
    );
};

export default TermsOfUseComp;