import React, { useState, useEffect, createContext, useContext } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, initializeFirestore } from 'firebase/firestore';
import { 
  Plane, Search, Instagram, MapPin, 
  ArrowRight, User, ShieldCheck, Moon, Sun, Globe,
  MessageSquare, Loader2, Sparkles, X,
  MoveRight, Layers, TrainFront, Hotel, Map as MapIcon,
  Award, CheckCircle2, Twitter, Mail, Phone, Crown,
  CreditCard, Landmark, RefreshCcw
} from 'lucide-react';

// Firebase Configuration
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = initializeFirestore(app, { experimentalForceLongPolling: true });
const apiKey = ""; 

const ThemeContext = createContext();

// --- 3D Background Logo Component (Smaller and more subtle) ---
const FloatingBackgroundLogo = () => {
  return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden z-0 opacity-5 dark:opacity-[0.04]">
      {/* Top Right Element - Scaled Down */}
      <div className="absolute top-1/4 -right-10 animate-float-slow transform scale-75 md:scale-50">
        <svg width="400" height="400" viewBox="0 0 200 200" className="drop-shadow-xl">
          <defs>
            <linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="#D4AF37" />
              <stop offset="100%" stopColor="#8B6B1D" />
            </linearGradient>
          </defs>
          {/* Train Body */}
          <path 
            d="M40,140 L160,140 L170,120 L30,120 Z" 
            fill="url(#goldGrad)" 
          />
          {/* Plane Wings */}
          <path 
            d="M100,120 L20,80 L40,75 L100,110 L160,75 L180,80 Z" 
            fill="#B8860B" 
            opacity="0.8"
          />
          {/* Logo Arc */}
          <path 
            d="M60,130 Q100,20 140,130" 
            fill="none" 
            stroke="url(#goldGrad)" 
            strokeWidth="8" 
            strokeLinecap="round"
          />
          <circle cx="100" cy="40" r="12" fill="url(#goldGrad)" />
        </svg>
      </div>
      
      {/* Bottom Left Element - Scaled Down */}
      <div className="absolute bottom-1/4 -left-10 animate-float-delayed transform scale-50 opacity-50">
        <svg width="300" height="300" viewBox="0 0 200 200">
          <path 
            d="M50,150 L150,150 L160,130 L40,130 Z" 
            fill="#D4AF37" 
            opacity="0.5"
          />
          <path 
            d="M100,130 L40,100 L160,100 Z" 
            fill="#D4AF37" 
            opacity="0.3"
          />
        </svg>
      </div>
    </div>
  );
};

// --- Logo Component ---
const RahseparLogo = ({ className = "h-10" }) => (
  <div className={`flex items-center gap-2 ${className}`}>
    <div className="relative flex items-center justify-center">
      <svg viewBox="0 0 100 100" className="w-10 h-10 drop-shadow-[0_2px_10px_rgba(212,175,55,0.4)]">
        <path 
          d="M20,80 Q50,20 80,80 M40,50 L60,50" 
          fill="none" 
          stroke="#D4AF37" 
          strokeWidth="10" 
          strokeLinecap="round"
        />
        <circle cx="50" cy="25" r="8" fill="#D4AF37" />
      </svg>
    </div>
    <span className="text-3xl font-black tracking-tighter bg-gradient-to-r from-[#D4AF37] to-[#B8860B] bg-clip-text text-transparent">
      رهسپار
    </span>
  </div>
);

// --- Translations Object ---
const translations = {
  fa: {
    home: "خانه", magazine: "مجله سفر", finance: "بانک و صرافی", destinations: "مقاصد",
    login: "ورود", heroTitle1: "رهسپار", heroTitle2: "سفرهای هوشمند",
    aiPlaceholder: "برنامه سفر رویایی خود را بنویسید (ویژه مشترکین VIP)...",
    aiProcess: "پردازش هوشمند", flight: "پرواز", train: "قطار", hotel: "هتل", tour: "تور",
    fromTo: "مبدا / مقصد", date: "تاریخ سفر", reserve: "رزرو و پرداخت",
    paymentTitle: "انتخاب روش پرداخت", paymentDesc: "لطفاً بانک یا صرافی مورد نظر خود را برای تسویه حساب انتخاب کنید.",
    footerDesc: "سامانه هوشمند و بین‌المللی برنامه‌ریزی سفر با تمرکز بر خدمات لوکس و اختصاصی.",
    globalContact: "مرکز تماس جهانی (نیرمی)",
    magTitle: "مجله تخصصی رهسپار",
    magSubtitle: "تجربه، تخصص و اعتماد در دنیای گردشگری (EEAT)",
    dir: "rtl"
  },
  en: {
    home: "Home", magazine: "Magazine", finance: "Finance", destinations: "Destinations",
    login: "Login", heroTitle1: "Rahsepar", heroTitle2: "Smart Travels",
    aiPlaceholder: "Write your dream trip plan (VIP Only)...",
    aiProcess: "AI Process", flight: "Flight", train: "Train", hotel: "Hotel", tour: "Tour",
    fromTo: "Origin / Destination", date: "Travel Date", reserve: "Book & Pay",
    paymentTitle: "Select Payment Method", paymentDesc: "Please select your preferred bank or exchange for settlement.",
    footerDesc: "International smart travel planning system focusing on luxury services.",
    globalContact: "Global Call Center (Nirami)",
    magTitle: "Rahsepar Magazine",
    magSubtitle: "Experience, Expertise, and Trust in Travel",
    dir: "ltr"
  }
};

const AppProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(false);
  const [lang, setLang] = useState('fa');
  const [isVip, setIsVip] = useState(true);
  const toggleTheme = () => setIsDark(!isDark);
  return (
    <ThemeContext.Provider value={{ isDark, toggleTheme, lang, setLang, isVip }}>
      {children}
    </ThemeContext.Provider>
  );
};

const MainContent = () => {
  const { isDark, toggleTheme, lang, setLang, isVip } = useContext(ThemeContext);
  const t = translations[lang] || translations.fa;
  const [scrolled, setScrolled] = useState(false);
  const [activeTab, setActiveTab] = useState('flight');
  const [showLangMenu, setShowLangMenu] = useState(false);
  const [showPayment, setShowPayment] = useState(false);
  
  const [searchPrompt, setSearchPrompt] = useState("");
  const [aiRecommendation, setAiRecommendation] = useState("");
  const [isSearching, setIsSearching] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleAiSearch = async (e) => {
    e.preventDefault();
    if (!searchPrompt.trim() || !isVip) return;
    setIsSearching(true);
    setAiRecommendation("");
    try {
      const result = await fetchGeminiText(`Recommend travel: "${searchPrompt}". Respond in ${lang}. Focus on luxury travel.`);
      setAiRecommendation(result);
    } catch (e) {
      setAiRecommendation("خطا در برقراری ارتباط با هوش مصنوعی.");
    } finally { setIsSearching(false); }
  };

  const fetchGeminiText = async (prompt) => {
    const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })
    });
    const data = await response.json();
    return data.candidates?.[0]?.content?.parts?.[0]?.text;
  };

  return (
    <div className={`min-h-screen transition-all duration-700 ${isDark ? 'bg-[#0a0a0a] text-[#ededed]' : 'bg-[#f8f9fa] text-[#1e1e2d]'}`} dir={t.dir}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;400;700;900&display=swap');
        * { font-family: 'Vazirmatn', sans-serif !important; }
        
        @keyframes float-slow {
          0% { transform: translate(0, 0) rotate(0deg); }
          50% { transform: translate(-10px, 15px) rotate(2deg); }
          100% { transform: translate(0, 0) rotate(0deg); }
        }
        @keyframes float-delayed {
          0% { transform: translate(0, 0) scale(1); }
          50% { transform: translate(15px, -10px) scale(1.05); }
          100% { transform: translate(0, 0) scale(1); }
        }
        .animate-float-slow { animation: float-slow 15s ease-in-out infinite; }
        .animate-float-delayed { animation: float-delayed 20s ease-in-out infinite; }

        .glass-gold-nav {
          background: ${isDark ? 'rgba(20, 20, 20, 0.7)' : 'rgba(255, 255, 255, 0.6)'};
          backdrop-filter: blur(25px) saturate(180%);
          border: 1px solid rgba(212, 175, 55, 0.3);
          box-shadow: 0 8px 32px 0 rgba(212, 175, 55, 0.15);
        }

        .glass-navy { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); }
        .glass-card { background: rgba(255, 255, 255, ${isDark ? '0.05' : '0.8'}); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
      `}</style>

      <FloatingBackgroundLogo />

      {/* Navigation */}
      <div className={`fixed w-full z-50 transition-all duration-500 flex justify-center ${scrolled ? 'top-2' : 'top-6'}`}>
        <nav className={`w-[95%] max-w-7xl rounded-[2rem] px-8 py-4 transition-all duration-500 glass-gold-nav flex justify-between items-center`}>
          <div className="flex-1">
            <RahseparLogo />
          </div>
          
          <div className="hidden md:flex flex-[2] justify-center items-center gap-10 text-base font-black">
             <span className="hover:text-[#D4AF37] cursor-pointer">{t.home}</span>
             <a href="#magazine" className="hover:text-[#D4AF37] cursor-pointer">{t.magazine}</a>
             <span className="hover:text-[#D4AF37] cursor-pointer">{t.destinations}</span>
          </div>

          <div className="flex-1 flex items-center justify-end gap-6">
             <div className="relative">
                <button 
                  onClick={() => setShowLangMenu(!showLangMenu)} 
                  className="flex items-center gap-1.5 opacity-90 hover:opacity-100 font-black text-[14px] uppercase"
                >
                  <Globe className="w-5 h-5 text-[#D4AF37]" /> {lang}
                </button>
                {showLangMenu && (
                  <div className={`absolute top-full mt-4 ${t.dir === 'rtl' ? 'left-0' : 'right-0'} glass-card rounded-2xl p-2 min-w-[130px] shadow-2xl z-[60]`}>
                    {['fa', 'en', 'tr', 'ar'].map(code => (
                      <button 
                        key={code} 
                        onClick={() => { setLang(code); setShowLangMenu(false); }} 
                        className={`w-full text-center px-4 py-2 rounded-xl text-[13px] font-black uppercase transition-all ${lang === code ? 'bg-[#D4AF37] text-white' : 'hover:bg-[#D4AF37]/10'}`}
                      >
                        {code}
                      </button>
                    ))}
                  </div>
                )}
             </div>

             <button onClick={toggleTheme} className="p-2.5 bg-[#D4AF37]/10 rounded-full text-[#D4AF37]">
                {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
             </button>

             <button className="bg-[#D4AF37] text-white px-8 py-3 rounded-full text-[15px] font-black shadow-lg">
                {t.login}
             </button>
          </div>
        </nav>
      </div>

      {/* Hero Section */}
      <section className="relative pt-48 pb-20 px-6 min-h-screen flex flex-col items-center justify-center overflow-hidden">
        <div className="max-w-7xl mx-auto w-full relative z-10 text-center">
            <div className="inline-flex items-center gap-2 px-6 py-2 rounded-full bg-[#D4AF37]/10 text-[#D4AF37] text-[12px] font-black uppercase mb-10 border border-[#D4AF37]/20">
              <Award className="w-4 h-4" /> انتخاب لوکس ۲۰۲۵
            </div>
            <h1 className="text-6xl md:text-8xl font-black leading-tight mb-8">
                {t.heroTitle1} <br/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#D4AF37] to-yellow-600">{t.heroTitle2}</span>
            </h1>

            {/* AI Search */}
            <div className="max-w-3xl mx-auto mb-16 px-4">
              <div className="glass-navy rounded-[2rem] p-3 lg:p-4 border border-white/20 relative shadow-2xl">
                {isVip ? (
                  <div className="flex items-center gap-4">
                    <input 
                      value={searchPrompt}
                      onChange={(e) => setSearchPrompt(e.target.value)}
                      placeholder={t.aiPlaceholder}
                      className="flex-1 bg-transparent border-none outline-none text-white text-base font-bold placeholder:text-white/40 px-4"
                    />
                    <button onClick={handleAiSearch} className="bg-white text-black px-6 py-3 rounded-xl text-sm font-black hover:bg-[#D4AF37] hover:text-white transition-all">
                      {isSearching ? <Loader2 className="w-5 h-5 animate-spin" /> : t.aiProcess}
                    </button>
                  </div>
                ) : (
                  <div className="flex items-center justify-between text-white/70 font-black"><Crown className="w-6 h-6 text-[#D4AF37]" /> دسترسی ویژه VIP</div>
                )}
                {aiRecommendation && <div className="mt-4 p-5 bg-white/5 rounded-xl text-white text-right font-medium leading-loose border-t border-white/10">{aiRecommendation}</div>}
              </div>
            </div>

            {/* Tabs */}
            <div className="glass-card max-w-4xl mx-auto rounded-[2.5rem] p-3 shadow-2xl flex flex-wrap justify-center gap-2 mb-8">
              {[
                { id: 'flight', icon: Plane, label: t.flight },
                { id: 'train', icon: TrainFront, label: t.train },
                { id: 'hotel', icon: Hotel, label: t.hotel },
                { id: 'tour', icon: MapIcon, label: t.tour }
              ].map(tab => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex items-center gap-3 px-10 py-5 rounded-full text-[15px] font-black transition-all ${
                    activeTab === tab.id ? 'bg-[#D4AF37] text-white shadow-lg' : 'hover:bg-gray-100 dark:hover:bg-white/5'
                  }`}
                >
                  <tab.icon className="w-5 h-5" /> {tab.label}
                </button>
              ))}
            </div>

            {/* Search Box */}
            <div className="max-w-4xl mx-auto glass-card rounded-[2rem] p-8 grid grid-cols-1 md:grid-cols-2 gap-6 items-center shadow-xl">
               <div className="bg-white/50 dark:bg-black/20 p-5 rounded-xl border border-black/5 text-right">
                  <label className="text-[11px] opacity-60 block mb-2 font-black uppercase">{t.fromTo}</label>
                  <input placeholder="کجا می‌روید؟" className="bg-transparent w-full outline-none text-lg font-black placeholder:opacity-30" />
               </div>
               <div className="bg-white/50 dark:bg-black/20 p-5 rounded-xl border border-black/5 text-right flex justify-between items-center gap-4">
                  <div className="flex-1">
                    <label className="text-[11px] opacity-60 block mb-2 font-black uppercase">{t.date}</label>
                    <input placeholder="انتخاب زمان" className="bg-transparent w-full outline-none text-lg font-black placeholder:opacity-30" />
                  </div>
                  <button onClick={() => setShowPayment(true)} className="bg-[#D4AF37] text-white px-8 py-4 rounded-lg text-base font-black flex items-center gap-2 hover:bg-yellow-600 transition-all">
                    {t.reserve} <ArrowRight className={`w-5 h-5 ${t.dir === 'rtl' ? 'rotate-180' : ''}`} />
                  </button>
               </div>
            </div>
        </div>
      </section>

      {/* Magazine Section - Persianized */}
      <section id="magazine" className="relative py-20 px-6 max-w-7xl mx-auto z-10">
         <div className="text-right mb-16 border-r-4 border-[#D4AF37] pr-6">
            <h2 className="text-5xl font-black mb-4">{t.magTitle}</h2>
            <p className="opacity-70 text-lg font-bold">{t.magSubtitle}</p>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { title: "سفر با کشتی تفریحی در سواحل مدیترانه", author: "کاپیتان رابرتز", tag: "تخصص", img: "https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?w=600&q=80" },
              { title: "قطارهای لوکس شرق؛ بازگشت به دوران طلایی", author: "تیم تحریریه", tag: "تجربه", img: "https://images.unsplash.com/photo-1474487548417-781cb71495f3?w=600&q=80" },
              { title: "جواهرات پنهان نئوم؛ آینده گردشگری عربستان", author: "واحد منطقه‌ای", tag: "اعتبار", img: "https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=600&q=80" }
            ].map((p, i) => (
              <div key={i} className="group cursor-pointer text-right">
                 <div className="relative aspect-video rounded-[2rem] overflow-hidden mb-6 shadow-md">
                    <img src={p.img} alt={p.title} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
                    <div className="absolute top-4 right-4 bg-white/90 backdrop-blur-md px-4 py-1.5 rounded-full text-[12px] font-black text-black shadow-sm">{p.tag}</div>
                 </div>
                 <h3 className="text-2xl font-black mb-4 leading-snug group-hover:text-[#D4AF37] transition-colors">{p.title}</h3>
                 <div className="flex items-center gap-2 opacity-60 text-sm font-black justify-end"><User className="w-4 h-4" /> {p.author}</div>
              </div>
            ))}
         </div>
      </section>

      {/* Payment Modal */}
      {showPayment && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-black/70 backdrop-blur-md">
           <div className="glass-card w-full max-w-4xl rounded-[3rem] p-12 relative shadow-2xl">
              <button onClick={() => setShowPayment(false)} className="absolute top-8 left-8 p-3 hover:bg-black/5 rounded-full"><X className="w-8 h-8" /></button>
              
              <div className="text-center mb-12">
                 <h2 className="text-4xl font-black mb-4">{t.paymentTitle}</h2>
                 <p className="opacity-60 text-lg font-black">{t.paymentDesc}</p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <div className="p-8 bg-white/5 rounded-2xl border border-black/5 hover:border-[#D4AF37] transition-all cursor-pointer text-right">
                    <div className="flex items-center gap-2 mb-6 justify-end"><span className="text-sm font-black">ایران</span><div className="w-8 h-5 bg-green-600 rounded-sm"></div></div>
                    <div className="flex justify-between items-center text-[#D4AF37] font-black">درگاه مستقیم بانک <Landmark className="w-5 h-5" /></div>
                 </div>
                 <div className="p-8 bg-white/5 rounded-2xl border border-black/5 hover:border-[#D4AF37] transition-all cursor-pointer text-right">
                    <div className="flex items-center gap-2 mb-6 justify-end"><span className="text-sm font-black">ترکیه</span><div className="w-8 h-5 bg-red-600 rounded-sm"></div></div>
                    <div className="flex justify-between items-center text-[#D4AF37] font-black">Ziraat Bank <RefreshCcw className="w-5 h-5" /></div>
                 </div>
                 <div className="p-8 bg-white/5 rounded-2xl border border-black/5 hover:border-[#D4AF37] transition-all cursor-pointer text-right">
                    <div className="flex items-center gap-2 mb-6 justify-end"><span className="text-sm font-black">امارات</span><div className="w-8 h-5 bg-red-800 rounded-sm"></div></div>
                    <div className="flex justify-between items-center text-[#D4AF37] font-black">صرافی معتبر <CreditCard className="w-5 h-5" /></div>
                 </div>
              </div>
           </div>
        </div>
      )}

      {/* Footer */}
      <footer className="relative pt-20 pb-12 px-6 border-t border-black/5 dark:border-white/5 bg-white dark:bg-[#050505] z-10">
         <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16 text-right">
               <div className="col-span-1">
                  <RahseparLogo className="mb-8" />
                  <p className="text-base opacity-60 leading-relaxed font-bold">{t.footerDesc}</p>
               </div>
               <div>
                  <h4 className="font-black mb-8 text-xl">ارتباط با ما</h4>
                  <div className="space-y-6">
                     <div className="flex items-start gap-4 justify-end">
                        <div>
                           <p className="text-sm font-black">{t.globalContact}</p>
                           <p className="text-lg font-black mt-1">09138699984</p>
                        </div>
                        <Phone className="w-6 h-6 text-[#D4AF37]" />
                     </div>
                  </div>
               </div>
               <div>
                  <h4 className="font-black mb-8 text-xl">لینک‌های سریع</h4>
                  <ul className="space-y-4 font-black opacity-70">
                     <li className="hover:text-[#D4AF37] cursor-pointer">{t.home}</li>
                     <li className="hover:text-[#D4AF37] cursor-pointer">{t.magazine}</li>
                     <li className="hover:text-[#D4AF37] cursor-pointer">{t.destinations}</li>
                  </ul>
               </div>
               <div className="flex flex-col items-end">
                  <h4 className="font-black mb-8 text-xl">شبکه‌های اجتماعی</h4>
                  <div className="flex gap-4">
                     <div className="p-4 bg-[#D4AF37]/10 rounded-full hover:bg-[#D4AF37] hover:text-white transition-all"><Instagram className="w-5 h-5" /></div>
                     <div className="p-4 bg-[#D4AF37]/10 rounded-full hover:bg-[#D4AF37] hover:text-white transition-all"><Twitter className="w-5 h-5" /></div>
                  </div>
               </div>
            </div>
            <div className="pt-8 border-t border-black/5 dark:border-white/5 text-center text-[12px] font-black opacity-30 uppercase tracking-widest">
               © 2025 RAHSEPAR INTERNATIONAL TRAVEL GROUP. ALL RIGHTS RESERVED.
            </div>
         </div>
      </footer>
    </div>
  );
};

const App = () => (
  <AppProvider>
    <MainContent />
  </AppProvider>
);

export default App;