import AnimatedBackground from '@/components/AnimatedBackground';
import Header from '@/components/Header';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { Link } from '@inertiajs/react';
import { useForm } from '@inertiajs/react';
import { motion } from 'framer-motion';

const Contact: React.FC = () => {
    const { data, setData, post, processing, errors } = useForm({
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: ''
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post('/contact', {
            onSuccess: () => {
                // Form başarılı gönderildi
            }
        });
    };

    return (
        <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-[#1a0a0a] via-[#2d1515] to-[#1a0a0a] font-sans">
            <Header />
            <Navbar />

            {/* Banner */}
            <section className="relative h-64 md:h-80 overflow-hidden">
                <div className="absolute inset-0 bg-black/50 z-10" />
                <div className="absolute top-0 right-0 w-72 h-72 bg-[#D97707] rounded-full blur-3xl opacity-20 translate-x-1/3 -translate-y-1/3" />
                <div className="absolute bottom-0 left-0 w-72 h-72 bg-[#B45309] rounded-full blur-3xl opacity-20 -translate-x-1/3 translate-y-1/3" />
                <div className="relative z-20 flex flex-col items-center justify-center h-full text-center text-white">
                    <motion.h1
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.7 }}
                        className="text-4xl md:text-5xl font-bold mb-4"
                    >
                        İletişim
                    </motion.h1>
                    <motion.nav
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ delay: 0.4 }}
                        className="flex items-center justify-center space-x-2 text-sm"
                    >
                        <Link
                            href="/"
                            className="text-gray-300 hover:text-white transition-colors duration-200"
                        >
                            Ana Sayfa
                        </Link>
                        <span className="text-gray-400">/</span>
                        <span className="text-white font-medium">İletişim</span>
                    </motion.nav>
                </div>
            </section>

            {/* İletişim Formu ve Bilgiler */}
            <div className="relative py-16 px-4 sm:px-6 lg:px-8 bg-white">
                <div className="max-w-7xl mx-auto">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">

                        {/* İletişim Bilgileri */}
                        <div className="lg:col-span-1 space-y-6">
                            <div className="bg-white rounded-2xl p-6 border border-gray-200 hover:border-[#D97707] hover:shadow-lg transition-all duration-300">
                                <div className="flex items-start space-x-4">
                                    <div className="w-12 h-12 bg-[#D97707] rounded-xl flex items-center justify-center flex-shrink-0">
                                        <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-gray-900 font-semibold mb-2">Adres</h3>
                                        <p className="text-gray-600 text-sm">
                                            Örnek Mahallesi, Sokak No: 123<br />
                                            İstanbul, Türkiye
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div className="bg-white rounded-2xl p-6 border border-gray-200 hover:border-[#D97707] hover:shadow-lg transition-all duration-300">
                                <div className="flex items-start space-x-4">
                                    <div className="w-12 h-12 bg-[#D97707] rounded-xl flex items-center justify-center flex-shrink-0">
                                        <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-gray-900 font-semibold mb-2">E-posta</h3>
                                        <p className="text-gray-600 text-sm">
                                            info@example.com<br />
                                            destek@example.com
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div className="bg-white rounded-2xl p-6 border border-gray-200 hover:border-[#D97707] hover:shadow-lg transition-all duration-300">
                                <div className="flex items-start space-x-4">
                                    <div className="w-12 h-12 bg-[#D97707] rounded-xl flex items-center justify-center flex-shrink-0">
                                        <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-gray-900 font-semibold mb-2">Telefon</h3>
                                        <p className="text-gray-600 text-sm">
                                            +90 (212) 123 45 67<br />
                                            +90 (532) 123 45 67
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div className="bg-white rounded-2xl p-6 border border-gray-200 hover:border-[#D97707] hover:shadow-lg transition-all duration-300">
                                <div className="flex items-start space-x-4">
                                    <div className="w-12 h-12 bg-[#D97707] rounded-xl flex items-center justify-center flex-shrink-0">
                                        <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-gray-900 font-semibold mb-2">Çalışma Saatleri</h3>
                                        <p className="text-gray-600 text-sm">
                                            Pazartesi - Cuma: 09:00 - 18:00<br />
                                            Cumartesi: 10:00 - 15:00
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* İletişim Formu */}
                        <div className="lg:col-span-2">
                            <div className="bg-white rounded-2xl p-8 border border-gray-200 shadow-sm">
                                <h2 className="text-2xl font-bold text-gray-900 mb-6">Bize Ulaşın</h2>

                                <form onSubmit={handleSubmit} className="space-y-6">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
                                                Ad Soyad *
                                            </label>
                                            <input
                                                type="text"
                                                id="name"
                                                value={data.name}
                                                onChange={e => setData('name', e.target.value)}
                                                className="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:border-[#D97707] focus:ring-1 focus:ring-[#D97707] transition-all duration-200"
                                                placeholder="Adınız ve soyadınız"
                                            />
                                            {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name}</p>}
                                        </div>

                                        <div>
                                            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
                                                E-posta *
                                            </label>
                                            <input
                                                type="email"
                                                id="email"
                                                value={data.email}
                                                onChange={e => setData('email', e.target.value)}
                                                className="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-all duration-200"
                                                placeholder="ornek@email.com"
                                            />
                                            {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
                                                Telefon
                                            </label>
                                            <input
                                                type="tel"
                                                id="phone"
                                                value={data.phone}
                                                onChange={e => setData('phone', e.target.value)}
                                                className="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-all duration-200"
                                                placeholder="+90 (5XX) XXX XX XX"
                                            />
                                        </div>

                                        <div>
                                            <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
                                                Konu *
                                            </label>
                                            <input
                                                type="text"
                                                id="subject"
                                                value={data.subject}
                                                onChange={e => setData('subject', e.target.value)}
                                                className="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-all duration-200"
                                                placeholder="Mesaj konusu"
                                            />
                                            {errors.subject && <p className="mt-1 text-sm text-red-600">{errors.subject}</p>}
                                        </div>
                                    </div>

                                    <div>
                                        <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
                                            Mesajınız *
                                        </label>
                                        <textarea
                                            id="message"
                                            rows={6}
                                            value={data.message}
                                            onChange={e => setData('message', e.target.value)}
                                            className="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-all duration-200 resize-none"
                                            placeholder="Mesajınızı buraya yazın..."
                                        ></textarea>
                                        {errors.message && <p className="mt-1 text-sm text-red-600">{errors.message}</p>}
                                    </div>

                                    <div className="flex items-start">
                                        <input
                                            type="checkbox"
                                            id="privacy"
                                            className="mt-1 w-4 h-4 border-gray-300 rounded text-red-600 focus:ring-red-500"
                                        />
                                        <label htmlFor="privacy" className="ml-3 text-sm text-gray-600">
                                            <a href="#" className="text-[#D97707] hover:text-[#B45309] font-medium">Gizlilik Politikası</a>'nı okudum ve kabul ediyorum.
                                        </label>
                                    </div>

                                    <button
                                        type="submit"
                                        disabled={processing}
                                        className="w-full md:w-auto px-8 py-3 bg-gradient-to-r from-[#D97707] to-[#B45309] hover:from-[#B45309] hover:to-[#92400E] text-white font-semibold rounded-lg transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 shadow-lg"
                                    >
                                        {processing ? 'Gönderiliyor...' : 'Mesaj Gönder'}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <Footer />
        </div>
    );
};

export default Contact;