'use client';

import { useState, useEffect } from 'react';
import { Navigation } from '../../components/Navigation';
import { Footer } from '../../components/Footer';
import { Head } from '../../components/Head';
import { Phone, Mail, MapPin, Clock, Send } from 'lucide-react';

export default function ContactPage() {
    const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        company: '',
        phone: '',
        subject: '',
        message: '',
    });

    const translations = {
        zh: {
            title: '联系我们 - CloudPro 云服务器代理商',
            description:
                '联系CloudPro获取专业的云计算咨询服务，我们的专家团队随时为您提供技术支持和解决方案。',
            keywords: '联系我们,技术咨询,云计算咨询,客服支持,商务合作',
            nav: {
                home: '首页',
                products: '产品',
                solutions: '解决方案',
                support: '支持',
                contact: '联系我们',
            },
            hero: {
                title: '联系我们',
                subtitle: '专业的云计算咨询服务',
                description: '我们的专家团队随时为您提供技术支持和解决方案咨询',
            },
            contact: {
                info: [
                    {
                        icon: Phone,
                        title: '客服热线',
                        content: '+86 400-123-4567',
                        description: '7x24小时技术支持热线',
                    },
                    {
                        icon: Mail,
                        title: '邮箱地址',
                        content: 'support@cloudpro.com',
                        description: '技术支持和商务咨询',
                    },
                    {
                        icon: MapPin,
                        title: '公司地址',
                        content: '北京市朝阳区科技园区CloudPro大厦',
                        description: '欢迎预约参观',
                    },
                    {
                        icon: Clock,
                        title: '工作时间',
                        content: '周一至周日 9:00-18:00',
                        description: '节假日正常服务',
                    },
                ],
            },
            form: {
                title: '在线咨询',
                subtitle: '填写表单，我们将尽快与您联系',
                fields: {
                    name: '姓名',
                    email: '邮箱',
                    company: '公司名称',
                    phone: '联系电话',
                    subject: '咨询主题',
                    message: '详细描述',
                },
                placeholders: {
                    name: '请输入您的姓名',
                    email: '请输入您的邮箱地址',
                    company: '请输入公司名称',
                    phone: '请输入联系电话',
                    subject: '请选择咨询主题',
                    message: '请详细描述您的需求或问题',
                },
                subjects: ['产品咨询', '技术支持', '商务合作', '解决方案', '其他'],
                submit: '提交咨询',
            },
        },
        'zh-tw': {
            title: '聯絡我們 - CloudPro 雲伺服器代理商',
            description:
                '聯絡CloudPro獲取專業的雲端運算諮詢服務，我們的專家團隊隨時為您提供技術支援和解決方案。',
            keywords: '聯絡我們,技術諮詢,雲端運算諮詢,客服支援,商務合作',
            nav: {
                home: '首頁',
                products: '產品',
                solutions: '解決方案',
                support: '支援',
                contact: '聯絡我們',
            },
            hero: {
                title: '聯絡我們',
                subtitle: '專業的雲端運算諮詢服務',
                description: '我們的專家團隊隨時為您提供技術支援和解決方案諮詢',
            },
            contact: {
                info: [
                    {
                        icon: Phone,
                        title: '客服熱線',
                        content: '+86 400-123-4567',
                        description: '7x24小時技術支援熱線',
                    },
                    {
                        icon: Mail,
                        title: '郵箱地址',
                        content: 'support@cloudpro.com',
                        description: '技術支援和商務諮詢',
                    },
                    {
                        icon: MapPin,
                        title: '公司地址',
                        content: '北京市朝陽區科技園區CloudPro大廈',
                        description: '歡迎預約參觀',
                    },
                    {
                        icon: Clock,
                        title: '工作時間',
                        content: '週一至週日 9:00-18:00',
                        description: '節假日正常服務',
                    },
                ],
            },
            form: {
                title: '線上諮詢',
                subtitle: '填寫表單，我們將盡快與您聯絡',
                fields: {
                    name: '姓名',
                    email: '郵箱',
                    company: '公司名稱',
                    phone: '聯絡電話',
                    subject: '諮詢主題',
                    message: '詳細描述',
                },
                placeholders: {
                    name: '請輸入您的姓名',
                    email: '請輸入您的郵箱地址',
                    company: '請輸入公司名稱',
                    phone: '請輸入聯絡電話',
                    subject: '請選擇諮詢主題',
                    message: '請詳細描述您的需求或問題',
                },
                subjects: ['產品諮詢', '技術支援', '商務合作', '解決方案', '其他'],
                submit: '提交諮詢',
            },
        },
        en: {
            title: 'Contact Us - CloudPro Cloud Server Reseller',
            description:
                'Contact CloudPro for professional cloud computing consulting services. Our expert team is ready to provide technical support and solutions.',
            keywords:
                'contact us,technical consulting,cloud computing consulting,customer support,business cooperation',
            nav: {
                home: 'Home',
                products: 'Products',
                solutions: 'Solutions',
                support: 'Support',
                contact: 'Contact',
            },
            hero: {
                title: 'Contact Us',
                subtitle: 'Professional Cloud Computing Consulting',
                description:
                    'Our expert team is ready to provide technical support and solution consulting',
            },
            contact: {
                info: [
                    {
                        icon: Phone,
                        title: 'Customer Hotline',
                        content: '+86 400-123-4567',
                        description: '7x24 Technical Support Hotline',
                    },
                    {
                        icon: Mail,
                        title: 'Email Address',
                        content: 'support@cloudpro.com',
                        description: 'Technical Support and Business Inquiry',
                    },
                    {
                        icon: MapPin,
                        title: 'Office Address',
                        content: 'CloudPro Building, Beijing Chaoyang Tech Park',
                        description: 'Welcome to schedule a visit',
                    },
                    {
                        icon: Clock,
                        title: 'Business Hours',
                        content: 'Mon-Sun 9:00-18:00',
                        description: 'Service available on holidays',
                    },
                ],
            },
            form: {
                title: 'Online Inquiry',
                subtitle: 'Fill out the form and we will contact you soon',
                fields: {
                    name: 'Name',
                    email: 'Email',
                    company: 'Company',
                    phone: 'Phone',
                    subject: 'Subject',
                    message: 'Message',
                },
                placeholders: {
                    name: 'Enter your name',
                    email: 'Enter your email address',
                    company: 'Enter company name',
                    phone: 'Enter phone number',
                    subject: 'Select inquiry subject',
                    message: 'Please describe your requirements or questions in detail',
                },
                subjects: [
                    'Product Inquiry',
                    'Technical Support',
                    'Business Cooperation',
                    'Solutions',
                    'Other',
                ],

                submit: 'Submit Inquiry',
            },
        },
    };

    const t = translations[currentLang];

    useEffect(() => {
        const browserLang = navigator.language.toLowerCase();
        if (browserLang.includes('en')) {
            setCurrentLang('en');
        } else if (browserLang.includes('zh-tw') || browserLang.includes('zh-hk')) {
            setCurrentLang('zh-tw');
        }
    }, []);

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

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        // Handle form submission
        console.log('Form submitted:', formData);
        alert(
            currentLang === 'zh'
                ? '提交成功！我们将尽快与您联系。'
                : currentLang === 'zh-tw'
                  ? '提交成功！我們將盡快與您聯絡。'
                  : 'Submitted successfully! We will contact you soon.',
        );
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-amber-50 to-yellow-50">
            <Head
                title={t.title}
                description={t.description}
                keywords={t.keywords}
                currentLang={currentLang}
            />

            <Navigation
                currentLang={currentLang}
                onLanguageChange={setCurrentLang}
                translations={translations}
            />

            {/* Hero Section */}
            <section className="bg-gradient-to-r from-amber-900 to-yellow-800 text-white py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center">
                        <h1 className="text-4xl md:text-5xl font-bold mb-6">{t.hero.title}</h1>
                        <p className="text-xl md:text-2xl text-yellow-100 mb-8 max-w-3xl mx-auto">
                            {t.hero.subtitle}
                        </p>
                        <p className="text-lg text-yellow-200 max-w-2xl mx-auto">
                            {t.hero.description}
                        </p>
                    </div>
                </div>
            </section>

            {/* Contact Info & Form */}
            <section className="py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
                        {/* Contact Information */}
                        <div>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                {t.contact.info.map((info, index) => {
                                    const IconComponent = info.icon;
                                    return (
                                        <div
                                            key={index}
                                            className="bg-white p-6 rounded-xl shadow-lg border border-amber-200 hover:shadow-xl transition-all duration-300"
                                        >
                                            <div className="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mb-4">
                                                <IconComponent className="w-6 h-6 text-white" />
                                            </div>
                                            <h3 className="text-lg font-semibold text-amber-900 mb-2">
                                                {info.title}
                                            </h3>
                                            <p className="text-amber-600 font-medium mb-1">
                                                {info.content}
                                            </p>
                                            <p className="text-amber-700 text-sm">
                                                {info.description}
                                            </p>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>

                        {/* Contact Form */}
                        <div className="bg-white p-8 rounded-xl shadow-lg border border-amber-200">
                            <div className="mb-8">
                                <h2 className="text-2xl font-bold text-amber-900 mb-2">
                                    {t.form.title}
                                </h2>
                                <p className="text-amber-700">{t.form.subtitle}</p>
                            </div>

                            <form onSubmit={handleSubmit} className="space-y-6">
                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                    <div>
                                        <label className="block text-sm font-medium text-amber-900 mb-2">
                                            {t.form.fields.name} *
                                        </label>
                                        <input
                                            type="text"
                                            name="name"
                                            required
                                            value={formData.name}
                                            onChange={handleInputChange}
                                            placeholder={t.form.placeholders.name}
                                            className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-amber-900 mb-2">
                                            {t.form.fields.email} *
                                        </label>
                                        <input
                                            type="email"
                                            name="email"
                                            required
                                            value={formData.email}
                                            onChange={handleInputChange}
                                            placeholder={t.form.placeholders.email}
                                            className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
                                        />
                                    </div>
                                </div>

                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                    <div>
                                        <label className="block text-sm font-medium text-amber-900 mb-2">
                                            {t.form.fields.company}
                                        </label>
                                        <input
                                            type="text"
                                            name="company"
                                            value={formData.company}
                                            onChange={handleInputChange}
                                            placeholder={t.form.placeholders.company}
                                            className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-amber-900 mb-2">
                                            {t.form.fields.phone}
                                        </label>
                                        <input
                                            type="tel"
                                            name="phone"
                                            value={formData.phone}
                                            onChange={handleInputChange}
                                            placeholder={t.form.placeholders.phone}
                                            className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
                                        />
                                    </div>
                                </div>

                                <div>
                                    <label className="block text-sm font-medium text-amber-900 mb-2">
                                        {t.form.fields.subject} *
                                    </label>
                                    <select
                                        name="subject"
                                        required
                                        value={formData.subject}
                                        onChange={handleInputChange}
                                        className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
                                    >
                                        <option value="">{t.form.placeholders.subject}</option>
                                        {t.form.subjects.map((subject, index) => (
                                            <option key={index} value={subject}>
                                                {subject}
                                            </option>
                                        ))}
                                    </select>
                                </div>

                                <div>
                                    <label className="block text-sm font-medium text-amber-900 mb-2">
                                        {t.form.fields.message} *
                                    </label>
                                    <textarea
                                        name="message"
                                        required
                                        rows={5}
                                        value={formData.message}
                                        onChange={handleInputChange}
                                        placeholder={t.form.placeholders.message}
                                        className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent resize-vertical"
                                    />
                                </div>

                                <button
                                    type="submit"
                                    className="w-full bg-gradient-to-r from-amber-500 to-yellow-500 text-white py-3 px-6 rounded-lg font-semibold hover:from-amber-600 hover:to-yellow-600 transition-all duration-200 flex items-center justify-center space-x-2"
                                >
                                    <Send className="w-5 h-5" />
                                    <span>{t.form.submit}</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </section>

            <Footer currentLang={currentLang} translations={translations} />
        </div>
    );
}