import React, { useState } from 'react';
import { 
  Phone, 
  Mail, 
  MapPin, 
  Clock, 
  Send, 
  CheckCircle2, 
  MessageSquare,
  Building2,
  ShieldCheck
} from 'lucide-react';
import siteInfo from '../data/siteInfo.json';

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="pt-28 pb-20 bg-slate-950 min-h-screen">
      {/* Background Glow */}
      <div className="absolute top-20 right-1/4 w-[600px] h-[350px] bg-indigo-600/10 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Page Header */}
        <div className="text-center max-w-3xl mx-auto space-y-4 mb-16">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold">
            <Phone className="w-3.5 h-3.5" />
            <span>راه‌های ارتباطی و پشتیبانی</span>
          </div>
          <h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
            تماس با تیم هوشان
          </h1>
          <p className="text-sm text-slate-300 leading-relaxed font-light">
            تیم پشتیبانی و مشاوره هوشان آماده پاسخ‌گویی به سوالات، درخواست‌های همکاری، دموهای سازمانی و پشتیبانی فنی شماست.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
          
          {/* Contact Details & Map */}
          <div className="lg:col-span-5 space-y-6">
            
            {/* Info Cards */}
            <div className="p-6 rounded-3xl bg-slate-900/60 border border-slate-800/80 space-y-6">
              
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-2xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center shrink-0">
                  <MapPin className="w-5 h-5" />
                </div>
                <div className="space-y-1">
                  <h4 className="text-xs font-bold text-slate-300">نشانی دفتر مرکزی:</h4>
                  <p className="text-xs text-white leading-relaxed">{siteInfo.address}</p>
                  <span className="text-[10px] text-slate-500 font-mono block">کدپستی: {siteInfo.postalCode}</span>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-2xl bg-indigo-500/10 text-indigo-400 flex items-center justify-center shrink-0">
                  <Phone className="w-5 h-5" />
                </div>
                <div className="space-y-1">
                  <h4 className="text-xs font-bold text-slate-300">تلفن‌های تماس و پشتیبانی:</h4>
                  <p dir="ltr" className="text-xs text-white font-mono text-right">{siteInfo.phone[0]}</p>
                  <p dir="ltr" className="text-xs text-white font-mono text-right">{siteInfo.phone[1]}</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-2xl bg-cyan-500/10 text-cyan-400 flex items-center justify-center shrink-0">
                  <Mail className="w-5 h-5" />
                </div>
                <div className="space-y-1">
                  <h4 className="text-xs font-bold text-slate-300">پست الکترونیکی:</h4>
                  <p className="text-xs text-white font-mono">{siteInfo.email}</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-2xl bg-amber-500/10 text-amber-400 flex items-center justify-center shrink-0">
                  <Clock className="w-5 h-5" />
                </div>
                <div className="space-y-1">
                  <h4 className="text-xs font-bold text-slate-300">ساعات پاسخگویی:</h4>
                  <p className="text-xs text-slate-300">{siteInfo.workHours}</p>
                </div>
              </div>

            </div>

            {/* Google Map Embed */}
            <div className="rounded-3xl overflow-hidden border border-slate-800 h-60 shadow-xl relative">
              <iframe
                title="شهرک علمی و تحقیقاتی اصفهان - ساختمان زاینده رود"
                src="https://maps.google.com/maps?q=32.6358,51.7242&t=m&z=14&output=embed&iwloc=near"
                className="w-full h-full border-0"
                loading="lazy"
              />
            </div>

          </div>

          {/* Contact Form */}
          <div className="lg:col-span-7">
            <div className="p-8 sm:p-10 rounded-3xl bg-slate-900/80 border border-slate-800 shadow-2xl">
              <div className="space-y-2 mb-6">
                <h3 className="text-lg sm:text-xl font-bold text-white">ارسال پیام یا انتقاد و پیشنهاد</h3>
                <p className="text-xs text-slate-400">پیام شما مستقیماً توسط تیم پشتیبانی هوشان بررسی می‌شود.</p>
              </div>

              {submitted ? (
                <div className="p-8 text-center space-y-4 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 animate-in fade-in">
                  <CheckCircle2 className="w-12 h-12 mx-auto" />
                  <h4 className="text-base font-bold text-white">پیام شما با موفقیت ارسال شد</h4>
                  <p className="text-xs text-slate-300">
                    با تشکر از ارتباط شما؛ در اسرع وقت از طریق شماره تلفن یا ایمیل پاسخ‌گوی شما خواهیم بود.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-medium text-slate-300 mb-1.5">
                        نام و نام خانوادگی
                      </label>
                      <input
                        type="text"
                        required
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        placeholder="نام شما"
                        className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-medium text-slate-300 mb-1.5">
                        شماره تماس
                      </label>
                      <input
                        type="tel"
                        dir="ltr"
                        required
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                        placeholder="09123456789"
                        className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-left"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-medium text-slate-300 mb-1.5">
                        پست الکترونیکی (اختیاری)
                      </label>
                      <input
                        type="email"
                        dir="ltr"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        placeholder="email@example.com"
                        className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-left"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-medium text-slate-300 mb-1.5">
                        موضوع پیام
                      </label>
                      <input
                        type="text"
                        required
                        value={formData.subject}
                        onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                        placeholder="مثال: سوال درباره خرید بسته"
                        className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-xs font-medium text-slate-300 mb-1.5">
                      متن پیام
                    </label>
                    <textarea
                      rows={5}
                      required
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      placeholder="پیام یا درخواست خود را به طور کامل شرح دهید..."
                      className="w-full p-4 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
                    />
                  </div>

                  <button
                    type="submit"
                    className="w-full py-3.5 rounded-2xl bg-gradient-to-r from-indigo-600 to-cyan-600 hover:opacity-95 text-white text-xs font-bold shadow-lg shadow-indigo-600/25 transition-all flex items-center justify-center gap-2 cursor-pointer"
                  >
                    <Send className="w-4 h-4 rotate-180" />
                    <span>ارسال پیام به هوشان</span>
                  </button>
                </form>
              )}
            </div>
          </div>

        </div>

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