import React from 'react';
import { Zap, ShieldCheck, Headphones, Send, Phone, Mail, MapPin, Heart } from 'lucide-react';
import type { Category } from '../types';
import wireguardMark from '../assets/images/wireguard-zana-mark.svg';

interface FooterProps {
  onNavigate: (view: string, data?: any) => void;
  categories: Category[];
}

export const Footer: React.FC<FooterProps> = ({ onNavigate, categories }) => {
  return (
    <footer className="bg-[#050505] border-t border-purple-500/20 text-zinc-300 pt-16 pb-8 relative overflow-hidden">
      
      {/* Subtle Glow in background */}
      <div className="absolute top-0 right-1/3 w-80 h-80 bg-purple-600/5 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-10 pb-12 border-b border-purple-500/15 text-right">
          
          {/* Col 1 & 2: Brand Info */}
          <div className="lg:col-span-2 space-y-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/30 flex items-center justify-center text-purple-300">
                <img src={wireguardMark} alt="WireGuard" className="w-6 h-6 object-contain" />
              </div>
              <span className="text-2xl font-black text-white font-vazir text-gradient-neon">
                ZaccShop
              </span>
            </div>

            <p className="text-xs sm:text-sm text-zinc-400 leading-relaxed max-w-sm">
              ZaccShop فعلاً به‌صورت تخصصی روی سرویس‌های WireGuard تمرکز دارد؛ پلن‌های حجمی برای یک کاربر با تحویل کانفیگ پس از تأیید سفارش و پشتیبانی تلگرام.
            </p>

            <div className="pt-2 flex items-center gap-3">
              <div className="px-3 py-1.5 rounded-xl bg-[#0F0F12] border border-purple-500/20 text-xs text-purple-300 flex items-center gap-1.5">
                <ShieldCheck className="w-4 h-4 text-emerald-400" />
                <span>نماد اعتماد و اصالت</span>
              </div>
              <div className="px-3 py-1.5 rounded-xl bg-[#0F0F12] border border-purple-500/20 text-xs text-purple-300 flex items-center gap-1.5">
                <Zap className="w-4 h-4 text-purple-400" />
                <span>تحویل پس از تأیید سفارش</span>
              </div>
            </div>
          </div>

          {/* Col 3: Quick Navigation */}
          <div className="space-y-3">
            <h4 className="text-sm font-bold text-white uppercase tracking-wider">دسترسی سریع</h4>
            <ul className="space-y-2 text-xs text-zinc-400">
              <li>
                <button onClick={() => onNavigate('home')} className="hover:text-purple-300 transition-colors">
                  صفحه اصلی
                </button>
              </li>
              <li>
                <button onClick={() => onNavigate('shop')} className="hover:text-purple-300 transition-colors">
                  پلن‌های WireGuard
                </button>
              </li>
              <li>
                <button onClick={() => onNavigate('shop', { categoryId: 'cat_gaming_service' })} className="hover:text-purple-300 transition-colors">
                  سرویس‌های WireGuard
                </button>
              </li>
              <li>
                <button onClick={() => onNavigate('tutorials')} className="hover:text-purple-300 transition-colors">
                  آموزش اتصال WireGuard
                </button>
              </li>
              <li>
                <button onClick={() => onNavigate('track-order')} className="hover:text-purple-300 transition-colors">
                  پیگیری وضعیت سفارش
                </button>
              </li>
            </ul>
          </div>

          {/* Col 4: Top Categories */}
          <div className="space-y-3">
            <h4 className="text-sm font-bold text-white uppercase tracking-wider">دسته‌بندی‌های برتر</h4>
            <ul className="space-y-2 text-xs text-zinc-400">
              {categories.slice(0, 5).map((cat) => (
                <li key={cat.id}>
                  <button
                    onClick={() => onNavigate('shop', { categoryId: cat.id })}
                    className="hover:text-purple-300 transition-colors text-right"
                  >
                    {cat.name}
                  </button>
                </li>
              ))}
            </ul>
          </div>

          {/* Col 5: Support & Contact */}
          <div className="space-y-3">
            <h4 className="text-sm font-bold text-white uppercase tracking-wider">پشتیبانی و ارتباط</h4>
            <div className="space-y-2.5 text-xs text-zinc-400">
              <div className="flex items-center gap-2">
                <Send className="w-4 h-4 text-purple-400 shrink-0" />
                <span>پشتیبانی تلگرام: @zana_lm</span>
              </div>
              <div className="flex items-center gap-2">
                <Mail className="w-4 h-4 text-purple-400 shrink-0" />
                <span>ایمیل: zanagameyoutubbe@gmail.com</span>
              </div>
              <div className="flex items-center gap-2">
                <Headphones className="w-4 h-4 text-emerald-400 shrink-0" />
                <span>ساعات کاری: ۲۴ ساعت شبانه‌روز</span>
              </div>
            </div>
          </div>

        </div>

        {/* Bottom copyright */}
        <div className="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-zinc-500 gap-4">
          <div>
            تمامی حقوق مادی و معنوی محفوظ و متعلق به برند <strong className="text-zinc-300">ZaccShop</strong> می‌باشد.
          </div>
          <div className="flex items-center gap-1">
            <span>طراحی اختصاصی با هویت بصری لوکس گیمینگ و دارک مود</span>
          </div>
        </div>

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