import React, { useState } from 'react';
import { motion } from 'framer-motion';

const Contact: React.FC = () => {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        subject: '',
        message: ''
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        // Handle form submission
        console.log('Form submitted:', formData);
        alert('Thank you for your message! We\'ll get back to you within 1-2 business days.');
        setFormData({ name: '', email: '', subject: '', message: '' });
    };

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

    const contactInfo = [
        {
            icon: "📧",
            title: "Email",
            detail: "support@knuthceramics.com",
            description: "Best for order inquiries or detailed questions"
        },
        {
            icon: "📞",
            title: "Phone",
            detail: "(361) 555-1234",
            description: "Mon–Fri, 9am–5pm CST"
        },
        {
            icon: "📍",
            title: "Workshop",
            detail: "123 Artisan Lane, Corpus Christi, TX 78401",
            description: "Please note: this is our workshop, not a retail store"
        }
    ];

    return (
        <div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
            <div className="max-w-[1400px] mx-auto px-6 md:px-12">
                {/* Header */}
                <div className="mb-24 max-w-3xl">
                    <motion.span
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 1 }}
                        className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
                    >
                        Get in Touch
                    </motion.span>
                    <motion.h1
                        initial={{ y: 30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.2, duration: 0.8 }}
                        className="font-display text-5xl md:text-7xl lg:text-8xl leading-none text-text-main dark:text-white mb-8"
                    >
                        Contact<br />Us
                    </motion.h1>
                    <motion.p
                        initial={{ y: 30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.4, duration: 0.8 }}
                        className="font-body text-lg font-light text-stone-500 leading-relaxed"
                    >
                        We're happy to help with any questions, custom requests, or feedback. We usually reply to emails within 1–2 business days.
                    </motion.p>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 mb-24">
                    {/* Contact Form */}
                    <motion.div
                        initial={{ y: 30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.5, duration: 0.8 }}
                    >
                        <h2 className="font-display text-3xl mb-8 text-text-main dark:text-white">
                            Send us a message
                        </h2>
                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div>
                                <label className="block text-xs uppercase tracking-widest text-stone-500 mb-3">
                                    Name *
                                </label>
                                <input
                                    type="text"
                                    name="name"
                                    value={formData.name}
                                    onChange={handleChange}
                                    required
                                    className="w-full px-6 py-4 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 focus:border-stone-400 dark:focus:border-stone-600 outline-none transition-colors text-text-main dark:text-white"
                                />
                            </div>
                            <div>
                                <label className="block text-xs uppercase tracking-widest text-stone-500 mb-3">
                                    Email *
                                </label>
                                <input
                                    type="email"
                                    name="email"
                                    value={formData.email}
                                    onChange={handleChange}
                                    required
                                    className="w-full px-6 py-4 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 focus:border-stone-400 dark:focus:border-stone-600 outline-none transition-colors text-text-main dark:text-white"
                                />
                            </div>
                            <div>
                                <label className="block text-xs uppercase tracking-widest text-stone-500 mb-3">
                                    Subject
                                </label>
                                <select
                                    name="subject"
                                    value={formData.subject}
                                    onChange={handleChange}
                                    className="w-full px-6 py-4 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 focus:border-stone-400 dark:focus:border-stone-600 outline-none transition-colors text-text-main dark:text-white"
                                >
                                    <option value="">Select a subject</option>
                                    <option value="order">Order Inquiry</option>
                                    <option value="custom">Custom Request</option>
                                    <option value="shipping">Shipping Question</option>
                                    <option value="return">Return/Exchange</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            <div>
                                <label className="block text-xs uppercase tracking-widest text-stone-500 mb-3">
                                    Message *
                                </label>
                                <textarea
                                    name="message"
                                    value={formData.message}
                                    onChange={handleChange}
                                    required
                                    rows={6}
                                    className="w-full px-6 py-4 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 focus:border-stone-400 dark:focus:border-stone-600 outline-none transition-colors resize-none text-text-main dark:text-white"
                                />
                            </div>
                            <button
                                type="submit"
                                className="w-full bg-primary dark:bg-white text-white dark:text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-800 dark:hover:bg-stone-200 transition-colors"
                            >
                                Send Message
                            </button>
                        </form>
                    </motion.div>

                    {/* Contact Information */}
                    <div className="space-y-8">
                        {contactInfo.map((info, index) => (
                            <motion.div
                                key={info.title}
                                initial={{ y: 20, opacity: 0 }}
                                animate={{ y: 0, opacity: 1 }}
                                transition={{ delay: 0.6 + index * 0.1, duration: 0.6 }}
                                className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
                            >
                                <div className="text-4xl mb-4">{info.icon}</div>
                                <h3 className="font-display text-2xl mb-2 text-text-main dark:text-white">
                                    {info.title}
                                </h3>
                                <p className="font-body text-lg text-text-main dark:text-white mb-2">
                                    {info.detail}
                                </p>
                                <p className="font-body font-light text-sm text-stone-500">
                                    {info.description}
                                </p>
                            </motion.div>
                        ))}
                    </div>
                </div>

                {/* Social Media */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1, duration: 0.8 }}
                    className="text-center p-12 bg-stone-100 dark:bg-black border border-stone-200 dark:border-stone-800"
                >
                    <h3 className="font-display text-3xl mb-4 text-text-main dark:text-white">
                        Follow Our Journey
                    </h3>
                    <p className="font-body font-light text-stone-500 mb-8">
                        Connect with us on Instagram or Facebook for new releases and behind-the-scenes peeks.
                    </p>
                    <div className="flex justify-center gap-6">
                        <a
                            href="https://instagram.com/knuthceramics"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="px-8 py-3 bg-white dark:bg-stone-900 text-black dark:text-white border border-stone-300 dark:border-stone-700 text-xs font-bold uppercase tracking-widest hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
                        >
                            Instagram
                        </a>
                        <a
                            href="https://facebook.com/knuthceramics"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="px-8 py-3 bg-white dark:bg-stone-900 text-black dark:text-white border border-stone-300 dark:border-stone-700 text-xs font-bold uppercase tracking-widest hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
                        >
                            Facebook
                        </a>
                    </div>
                </motion.div>
            </div>
        </div>
    );
};

export default Contact;