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');
        } 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">
            {/* Technical grid background */}
            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>

            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
                {/* Header section */}
                <div className="grid-layout mb-16">
                    <div className="col-span-12 md:col-span-8">
                        <h1 className="brutalist-heading relative">
                            {t('contact.title')}
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape triangle w-full h-full bg-black"></div>
                            </div>
                        </h1>
                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
                            {t('contact.description')}
                        </p>
                    </div>
                </div>

                {/* Main content */}
                <div className="grid-layout gap-8">
                    {/* Contact Form */}
                    <div className="col-span-12 md:col-span-8">
                        <div className="brutalist-card p-8">
                            <h2 className="text-2xl font-black uppercase 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="monospace block mb-2" htmlFor="name">
                                            {t('contact.form.name')}
                                        </label>
                                        <input
                                            type="text"
                                            id="name"
                                            name="name"
                                            value={formData.name}
                                            onChange={handleChange}
                                            required
                                            className="brutalist-input w-full"
                                        />
                                    </div>
                                    <div>
                                        <label className="monospace block mb-2" htmlFor="email">
                                            {t('contact.form.email')}
                                        </label>
                                        <input
                                            type="email"
                                            id="email"
                                            name="email"
                                            value={formData.email}
                                            onChange={handleChange}
                                            required
                                            className="brutalist-input w-full"
                                        />
                                    </div>
                                </div>
                                <div>
                                    <label className="monospace block mb-2" htmlFor="subject">
                                        {t('contact.form.subject')}
                                    </label>
                                    <input
                                        type="text"
                                        id="subject"
                                        name="subject"
                                        value={formData.subject}
                                        onChange={handleChange}
                                        required
                                        className="brutalist-input w-full"
                                    />
                                </div>
                                <div>
                                    <label className="monospace block mb-2" htmlFor="message">
                                        {t('contact.form.message')}
                                    </label>
                                    <textarea
                                        id="message"
                                        name="message"
                                        value={formData.message}
                                        onChange={handleChange}
                                        required
                                        rows="6"
                                        className="brutalist-input w-full"
                                    ></textarea>
                                </div>
                                <button
                                    type="submit"
                                    disabled={isSubmitting}
                                    className="brutalist-button"
                                >
                                    {isSubmitting ? t('contact.form.sending') : t('contact.form.send')} →
                                </button>
                                {submitStatus === 'success' && (
                                    <p className="monospace text-green-600">{t('contact.form.success')}</p>
                                )}
                                {submitStatus === 'error' && (
                                    <p className="monospace text-red-600">{t('contact.form.error')}</p>
                                )}
                            </form>
                        </div>
                    </div>

                    {/* Contact Info */}
                    <div className="col-span-12 md:col-span-4">
                        <div className="brutalist-card p-6">
                            <h3 className="text-xl font-bold 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="brutalist-card p-4 block hover:-translate-x-2 transition-transform"
                                    >
                                        <div className="flex items-center gap-4">
                                            <span className="text-2xl">{method.icon}</span>
                                            <div>
                                                <h4 className="font-bold">{method.title}</h4>
                                                <p className="monospace">{method.value}</p>
                                            </div>
                                        </div>
                                    </a>
                                ))}
                            </div>
                        </div>

                        {/* Social Links */}
                        <div className="brutalist-card p-6 mt-6">
                            <h3 className="text-xl font-bold 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="brutalist-card p-3 block hover:-translate-x-2 transition-transform"
                                    >
                                        <span className="monospace">{social.name}</span>
                                    </a>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default Contact; 