'use client'

import {useState} from 'react'
import {Input} from '@/components/ui/input'
import {Textarea} from '@/components/ui/textarea'
import {Button} from '@/components/ui/button'
import {motion as m} from 'framer-motion'
import {CheckCircle} from 'lucide-react'

export default function KontaktPage() {
    const [success, setSuccess] = useState(false)
    const [loading, setLoading] = useState(false)

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        setLoading(true)

        // Simulate delay
        setTimeout(() => {
            setLoading(false)
            setSuccess(true)
        }, 1000)
    }

    return (
        <main className="min-h-screen py-20 px-6 max-w-2xl mx-auto">
            <m.div
                initial={{opacity: 0, y: 30}}
                animate={{opacity: 1, y: 0}}
                transition={{duration: 0.6}}
            >
                <h1 className="text-3xl font-bold mb-4 text-center">Kontakt</h1>
                <p className="text-center mb-10 text-muted-foreground">
                    Sie haben Fragen? Schreiben Sie uns direkt über das Formular.
                </p>

                {success ? (
                    <div className="text-center">
                        <CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4"/>
                        <p className="text-lg">Vielen Dank! Ihre Nachricht wurde erfolgreich gesendet.</p>
                    </div>
                ) : (
                    <form onSubmit={handleSubmit} className="space-y-6">
                        <div>
                            <label htmlFor="name" className="block text-sm font-medium mb-1">Name</label>
                            <Input id="name" name="name" required/>
                        </div>
                        <div>
                            <label htmlFor="email" className="block text-sm font-medium mb-1">E-Mail</label>
                            <Input id="email" name="email" type="email" required/>
                        </div>
                        <div>
                            <label htmlFor="message" className="block text-sm font-medium mb-1">Nachricht</label>
                            <Textarea id="message" name="message" rows={5} required/>
                        </div>
                        <Button type="submit" disabled={loading}>
                            {loading ? 'Senden...' : 'Nachricht senden'}
                        </Button>
                    </form>
                )}
            </m.div>
        </main>
    )
}