import React from 'react';
import { Link } from 'react-router-dom';
import { 
  Bot, 
  Send, 
  Phone, 
  Mail, 
  MapPin, 
  ShieldCheck, 
  Award, 
  MessageCircle,
  Heart,
  Globe
} from 'lucide-react';
import siteInfo from '../../data/siteInfo.json';

export const Footer: React.FC = () => {
  const phoneMain = Array.isArray(siteInfo.phone) ? siteInfo.phone[0] : siteInfo.phone;

  return (
    <footer className="bg-slate-950 text-slate-400 border-t border-white/10 pt-16 pb-8 relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Top Newsletter & About Bar */}
        <div className="glass-panel p-6 sm:p-8 rounded-2xl mb-12 border border-white/5 flex flex-col lg:flex-row items-center justify-between gap-6">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-xl bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center text-indigo-400 shrink-0">
              <Bot className="w-6 h-6" />
            </div>
            <div>
              <h3 className="text-base sm:text-lg font-bold text-white">عضویت در خبرنامه هوش مصنوعی هوشان</h3>
              <p className="text-xs sm:text-sm text-slate-400 mt-0.5">از جدیدترین ابزارها، تخفیف‌ها و مقالات هوش مصنوعی مطلع شوید.</p>
            </div>
          </div>

          <form onSubmit={(e) => { e.preventDefault(); alert('ایمیل شما با موفقیت ثبت شد!'); }} className="flex w-full lg:w-auto gap-2">
            <input
              type="email"
              placeholder="ایمیل خود را وارد کنید..."
              required
              className="bg-slate-900 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-indigo-500 w-full sm:w-72"
            />
            <button
              type="submit"
              className="btn-donya-primary px-5 py-2.5 rounded-xl text-xs sm:text-sm font-bold flex items-center gap-1.5 shrink-0"
            >
              <span>عضویت</span>
              <Send className="w-3.5 h-3.5" />
            </button>
          </form>
        </div>

        {/* 4-Column Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
          
          {/* Column 1: Brand & Bio */}
          <div>
            <div className="flex items-center gap-2 mb-4">
              <span className="text-xl font-extrabold text-white">{siteInfo.name}</span>
              <span className="px-1.5 py-0.5 text-[10px] font-bold rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">
                AI Platform
              </span>
            </div>
            <p className="text-xs sm:text-sm text-slate-400 leading-relaxed mb-6">
              {siteInfo.description}
            </p>
            
            {/* Badges */}
            <div className="flex items-center gap-2">
              <div className="px-3 py-1.5 rounded-lg bg-slate-900 border border-white/5 flex items-center gap-1.5 text-xs text-slate-300">
                <Award className="w-4 h-4 text-cyan-400" />
                <span>دانش‌بنیان</span>
              </div>
              <div className="px-3 py-1.5 rounded-lg bg-slate-900 border border-white/5 flex items-center gap-1.5 text-xs text-slate-300">
                <ShieldCheck className="w-4 h-4 text-emerald-400" />
                <span>نظام صنفی رایانه‌ای</span>
              </div>
            </div>
          </div>

          {/* Column 2: Quick Links */}
          <div>
            <h4 className="text-sm font-bold text-white mb-4 border-r-2 border-indigo-500 pr-2.5">
              دسترسی سریع
            </h4>
            <ul className="space-y-2.5 text-xs sm:text-sm">
              <li><Link to="/" className="hover:text-cyan-300 transition-colors">صفحه اصلی</Link></li>
              <li><Link to="/tools" className="hover:text-cyan-300 transition-colors">دستیارهای هوش مصنوعی (+ هوشان)</Link></li>
              <li><Link to="/models" className="hover:text-cyan-300 transition-colors">مدل‌های زبانی و بینایی</Link></li>
              <li><Link to="/pricing" className="hover:text-cyan-300 transition-colors">تعرفه‌ها و اشتراک‌ها</Link></li>
              <li><Link to="/enterprise" className="hover:text-cyan-300 transition-colors">راهکارهای سازمانی هوشان</Link></li>
            </ul>
          </div>

          {/* Column 3: Academy & Blog */}
          <div>
            <h4 className="text-sm font-bold text-white mb-4 border-r-2 border-indigo-500 pr-2.5">
              آموزش و رسانه
            </h4>
            <ul className="space-y-2.5 text-xs sm:text-sm">
              <li><Link to="/blog" className="hover:text-cyan-300 transition-colors">وبلاگ و مقالات هوش مصنوعی</Link></li>
              <li><Link to="/academy" className="hover:text-cyan-300 transition-colors">دوره آموزش مبانی هوش مصنوعی</Link></li>
              <li><Link to="/about" className="hover:text-cyan-300 transition-colors">قصه ما و تیم هوشان</Link></li>
              <li><Link to="/privacy" className="hover:text-cyan-300 transition-colors">قوانین و حریم خصوصی</Link></li>
              <li><Link to="/contact" className="hover:text-cyan-300 transition-colors">تماس و پشتیبانی</Link></li>
            </ul>
          </div>

          {/* Column 4: Contact & Social */}
          <div>
            <h4 className="text-sm font-bold text-white mb-4 border-r-2 border-indigo-500 pr-2.5">
              ارتباط با ما
            </h4>
            <ul className="space-y-3 text-xs sm:text-sm mb-6">
              <li className="flex items-start gap-2">
                <MapPin className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
                <span>{siteInfo.address}</span>
              </li>
              <li className="flex items-center gap-2">
                <Phone className="w-4 h-4 text-emerald-400 shrink-0" />
                <span dir="ltr">{phoneMain}</span>
              </li>
              <li className="flex items-center gap-2">
                <Mail className="w-4 h-4 text-cyan-400 shrink-0" />
                <span>{siteInfo.email}</span>
              </li>
            </ul>

            {/* Social Icons */}
            <div className="flex items-center gap-2.5">
              <a href="https://t.me/houshan_ai" target="_blank" rel="noreferrer" className="w-9 h-9 rounded-lg bg-slate-900 border border-white/10 flex items-center justify-center hover:bg-indigo-600 hover:text-white transition-all text-slate-300" title="تلگرام">
                <MessageCircle className="w-4 h-4" />
              </a>
              <a href="https://instagram.com/houshan.ai" target="_blank" rel="noreferrer" className="w-9 h-9 rounded-lg bg-slate-900 border border-white/10 flex items-center justify-center hover:bg-pink-600 hover:text-white transition-all text-slate-300" title="اینستاگرام">
                <Globe className="w-4 h-4" />
              </a>
            </div>
          </div>

        </div>

        {/* Bottom Copyright */}
        <div className="pt-6 border-t border-white/5 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500">
          <p>© تمامی حقوق مادی و معنوی این وب‌سایت متعلق به شرکت {siteInfo.name} می‌باشد.</p>
          <p className="flex items-center gap-1">
            طراحی شده با <Heart className="w-3.5 h-3.5 text-rose-500 fill-rose-500" /> برای جامعه هوش مصنوعی ایران
          </p>
        </div>

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