import { useState } from 'react';
import { useLanguage } from '../context/LanguageContext';
import Footer from '../components/Footer';
import { API_HOST } from '../config';

function Contact() {
    const { t } = useLanguage();
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        subject: '',
        message: ''
    });
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [submitStatus, setSubmitStatus] = useState(null);

    const handleChange = (e) => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setIsSubmitting(true);
        
        try {
            const response = await fetch(`${API_HOST}/api/v1/onboard/contact`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData)
            });

            if (response.ok) {
                setSubmitStatus('success');
                setFormData({ name: '', email: '', subject: '', message: '' });
            } else {
                setSubmitStatus('error');
            }
        } catch (error) {
            setSubmitStatus('error');
            console.error('Contact form submission error:', error);
        } finally {
            setIsSubmitting(false);
        }
    };

    const contactMethods = [
        {
            icon: '📧',
            title: t('contact.methods.email.title'),
            value: 'contact@byom.ai',
            link: 'mailto:contact@byom.ai'
        },
        {
            icon: '📱',
            title: t('contact.methods.phone.title'),
            value: '+33 1 23 45 67 89',
            link: 'tel:+33123456789'
        },
        {
            icon: '📍',
            title: t('contact.methods.location.title'),
            value: 'Paris, France',
            link: 'https://maps.google.com/?q=Paris,France'
        }
    ];

    return (
        <div className="relative min-h-screen bg-white">
            {/* Floating elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
            </div>

            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
                {/* Header section */}
                <div className="text-center mb-16">
                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
                        {t('contact.title')}
                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
                    </h1>
                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
                        {t('contact.description')}
                    </p>
                </div>

                {/* Main content */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    {/* Contact Form */}
                    <div className="lg:col-span-2">
                        <div className="bg-white rounded-2xl shadow-lg p-8">
                            <h2 className="text-2xl font-medium text-gray-900 mb-8">{t('contact.form.title')}</h2>
                            <form onSubmit={handleSubmit} className="space-y-6">
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label className="block text-sm text-gray-700 mb-2" htmlFor="name">
                                            {t('contact.form.name')}
                                        </label>
                                        <input
                                            type="text"
                                            id="name"
                                            name="name"
                                            value={formData.name}
                                            onChange={handleChange}
                                            required
                                            className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm text-gray-700 mb-2" htmlFor="email">
                                            {t('contact.form.email')}
                                        </label>
                                        <input
                                            type="email"
                                            id="email"
                                            name="email"
                                            value={formData.email}
                                            onChange={handleChange}
                                            required
                                            className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
                                        />
                                    </div>
                                </div>
                                <div>
                                    <label className="block text-sm text-gray-700 mb-2" htmlFor="subject">
                                        {t('contact.form.subject')}
                                    </label>
                                    <input
                                        type="text"
                                        id="subject"
                                        name="subject"
                                        value={formData.subject}
                                        onChange={handleChange}
                                        required
                                        className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm text-gray-700 mb-2" htmlFor="message">
                                        {t('contact.form.message')}
                                    </label>
                                    <textarea
                                        id="message"
                                        name="message"
                                        value={formData.message}
                                        onChange={handleChange}
                                        required
                                        rows="6"
                                        className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-purple focus:border-transparent resize-none"
                                    ></textarea>
                                </div>
                                <button
                                    type="submit"
                                    disabled={isSubmitting}
                                    className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:hover:bg-black"
                                >
                                    <span className="flex items-center gap-2">
                                        {isSubmitting ? t('contact.form.sending') : t('contact.form.send')}
                                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                                    </span>
                                </button>
                                {submitStatus === 'success' && (
                                    <p className="text-green-600 text-sm mt-4">{t('contact.form.success')}</p>
                                )}
                                {submitStatus === 'error' && (
                                    <p className="text-red-600 text-sm mt-4">{t('contact.form.error')}</p>
                                )}
                            </form>
                        </div>
                    </div>

                    {/* Contact Info */}
                    <div className="lg:col-span-1">
                        <div className="bg-white rounded-2xl shadow-lg p-6">
                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('contact.methods.title')}</h3>
                            <div className="space-y-6">
                                {contactMethods.map((method) => (
                                    <a
                                        key={method.title}
                                        href={method.link}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="block p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300"
                                    >
                                        <div className="flex items-center gap-4">
                                            <span className="text-2xl">{method.icon}</span>
                                            <div>
                                                <h4 className="text-sm font-medium text-gray-900">{method.title}</h4>
                                                <p className="text-sm text-gray-600">{method.value}</p>
                                            </div>
                                        </div>
                                    </a>
                                ))}
                            </div>
                        </div>

                        {/* Social Links */}
                        <div className="bg-white rounded-2xl shadow-lg p-6 mt-6">
                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('contact.social.title')}</h3>
                            <div className="space-y-4">
                                {[
                                    { name: 'Twitter', url: 'https://twitter.com/byom' },
                                    { name: 'LinkedIn', url: 'https://linkedin.com/company/byom' },
                                    { name: 'Instagram', url: 'https://instagram.com/byom' }
                                ].map((social) => (
                                    <a
                                        key={social.name}
                                        href={social.url}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="block p-3 rounded-xl hover:bg-gray-50 transition-colors duration-300 text-sm text-gray-600 hover:text-brand-purple"
                                    >
                                        {social.name}
                                    </a>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default Contact;
