"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { ArrowLeft, Sparkles, Award, Briefcase, GraduationCap, Plane, CheckCircle2 } from "lucide-react";

export default function DualCountryPortal() {
  const [activeCountry, setActiveCountry] = useState<"usa" | "canada" | null>(null);

  return (
    <section id="portal" className="relative py-20 px-4 sm:px-6 max-w-7xl mx-auto">
      {/* Section Header */}
      <div className="text-center max-w-3xl mx-auto mb-14">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#D4A343]/10 border border-[#D4A343]/20 text-xs font-semibold text-[#F0CE80] mb-4">
          <Sparkles className="w-3.5 h-3.5" />
          <span>درگاه دوگانه و اختصاصی</span>
        </div>
        <h2 className="text-3xl sm:text-5xl font-black text-white tracking-tight mb-4">
          انتخاب قلمرو مهاجرتی: آمریکا یا کانادا؟
        </h2>
        <p className="text-sm sm:text-base text-white/60">
          راویس ویزا تمرکز خود را منحصراً بر دو مقصد قدرتمند قاره آمریکا قرار داده است. درگاه مد نظر خود را جهت مشاهده جزئیات پرونده و شرایط ورود انتخاب کنید.
        </p>
      </div>

      {/* Split-Screen Interactive Stage */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 min-h-[580px]">
        {/* USA Panel */}
        <motion.div
          onMouseEnter={() => setActiveCountry("usa")}
          onMouseLeave={() => setActiveCountry(null)}
          animate={{
            scale: activeCountry === "usa" ? 1.01 : activeCountry === "canada" ? 0.98 : 1,
            borderColor: activeCountry === "usa" ? "rgba(212, 163, 67, 0.6)" : "rgba(255, 255, 255, 0.08)",
          }}
          transition={{ duration: 0.4, ease: "easeOut" }}
          className="relative rounded-3xl p-8 sm:p-10 bg-gradient-to-br from-[#0B1528] via-[#070E1A] to-[#04070D] border border-white/8 overflow-hidden flex flex-col justify-between group shadow-2xl"
        >
          {/* Subtle Ambient Glow for USA */}
          <div className="absolute top-0 right-0 w-80 h-80 bg-blue-600/10 rounded-full blur-[100px] pointer-events-none group-hover:bg-blue-600/20 transition-all duration-700" />
          <div className="absolute bottom-0 left-0 w-60 h-60 bg-[#D4A343]/10 rounded-full blur-[90px] pointer-events-none" />

          {/* Top Metadata */}
          <div className="relative z-10">
            <div className="flex items-center justify-between mb-6">
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-xs font-bold text-blue-300">
                <span>🇺🇸 ایالات متحده آمریکا</span>
                <span className="text-white/30">•</span>
                <span>United States</span>
              </div>
              <span className="text-xs font-mono text-[#D4A343] tracking-widest bg-[#D4A343]/10 px-2.5 py-1 rounded-md border border-[#D4A343]/20">
                USCIS PATHWAYS
              </span>
            </div>

            <h3 className="text-2xl sm:text-4xl font-black text-white mb-3 group-hover:text-[#F0CE80] transition-colors">
              گرین‌کارت و مسیرهای اقامت آمریکا
            </h3>
            <p className="text-sm text-white/70 leading-relaxed mb-6">
              مناسب برای پژوهشگران، مهندسان، دارندگان مقالات و سوابق تخصصی بالا و همچنین متقاضیان فرصت‌های شغلی و سرمایه‌گذاری.
            </p>

            {/* Core Pathways Tags */}
            <div className="space-y-3 mb-8">
              <div className="flex items-start gap-3 p-3 rounded-xl bg-white/[0.03] border border-white/5 hover:border-[#D4A343]/30 transition-all">
                <Award className="w-5 h-5 text-[#D4A343] shrink-0 mt-0.5" />
                <div>
                  <h4 className="text-sm font-bold text-white flex items-center gap-2">
                    <span>EB-2 NIW (نخبگان منافع ملی)</span>
                    <span className="text-[10px] px-2 py-0.5 rounded bg-emerald-500/15 text-emerald-300 font-mono">بدون نیاز به کارفرما</span>
                  </h4>
                  <p className="text-xs text-white/50 mt-0.5">دریافت مستقیم گرین‌کارت برای کارشناسان ارشد، محققان و صاحبان ایده تأثیرگذار.</p>
                </div>
              </div>

              <div className="flex items-start gap-3 p-3 rounded-xl bg-white/[0.03] border border-white/5 hover:border-[#D4A343]/30 transition-all">
                <Briefcase className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
                <div>
                  <h4 className="text-sm font-bold text-white flex items-center gap-2">
                    <span>EB-3 (ویزای کاری) & H-1B</span>
                  </h4>
                  <p className="text-xs text-white/50 mt-0.5">مسیر شغلی تخصصی و مهارتی با دریافت تأییدیه اداره کار آمریکا (PERM).</p>
                </div>
              </div>

              <div className="flex items-start gap-3 p-3 rounded-xl bg-white/[0.03] border border-white/5 hover:border-[#D4A343]/30 transition-all">
                <GraduationCap className="w-5 h-5 text-purple-400 shrink-0 mt-0.5" />
                <div>
                  <h4 className="text-sm font-bold text-white">ویزای تحصیلی F-1 و فرصت‌های توریستی B1/B2</h4>
                  <p className="text-xs text-white/50 mt-0.5">پذیرش دانشگاهی، فاند تحصیلی و بررسی دقیق تای‌های بازگشت به کشور.</p>
                </div>
              </div>
            </div>
          </div>

          {/* Bottom CTA Action */}
          <div className="relative z-10 pt-4 border-t border-white/8 flex items-center justify-between">
            <div className="flex items-center gap-2 text-xs text-white/50">
              <CheckCircle2 className="w-4 h-4 text-emerald-400" />
              <span>ارزیابی اولیه حقوقی رایگان</span>
            </div>
            <a
              href="https://wa.me/16135122792?text=سلام،%20متقاضی%20ارزیابی%20پرونده%20مهاجرتی%20آمریکا%20هستم."
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-white/10 hover:bg-[#D4A343] hover:text-[#070E1A] text-white text-xs sm:text-sm font-bold transition-all group-hover:bg-[#D4A343] group-hover:text-[#070E1A]"
            >
              <span>مشاوره پرونده آمریکا</span>
              <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-1" />
            </a>
          </div>
        </motion.div>

        {/* Canada Panel */}
        <motion.div
          onMouseEnter={() => setActiveCountry("canada")}
          onMouseLeave={() => setActiveCountry(null)}
          animate={{
            scale: activeCountry === "canada" ? 1.01 : activeCountry === "usa" ? 0.98 : 1,
            borderColor: activeCountry === "canada" ? "rgba(212, 163, 67, 0.6)" : "rgba(255, 255, 255, 0.08)",
          }}
          transition={{ duration: 0.4, ease: "easeOut" }}
          className="relative rounded-3xl p-8 sm:p-10 bg-gradient-to-br from-[#1A0B12] via-[#0E070B] to-[#04070D] border border-white/8 overflow-hidden flex flex-col justify-between group shadow-2xl"
        >
          {/* Subtle Ambient Glow for Canada */}
          <div className="absolute top-0 right-0 w-80 h-80 bg-red-600/10 rounded-full blur-[100px] pointer-events-none group-hover:bg-red-600/20 transition-all duration-700" />
          <div className="absolute bottom-0 left-0 w-60 h-60 bg-[#D4A343]/10 rounded-full blur-[90px] pointer-events-none" />

          {/* Top Metadata */}
          <div className="relative z-10">
            <div className="flex items-center justify-between mb-6">
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-red-500/10 border border-red-500/20 text-xs font-bold text-red-300">
                <span>🇨🇦 کشور کانادا</span>
                <span className="text-white/30">•</span>
                <span>Canada IRCC</span>
              </div>
              <span className="text-xs font-mono text-[#D4A343] tracking-widest bg-[#D4A343]/10 px-2.5 py-1 rounded-md border border-[#D4A343]/20">
                EXPRESS ENTRY & PNP
              </span>
            </div>

            <h3 className="text-2xl sm:text-4xl font-black text-white mb-3 group-hover:text-[#F0CE80] transition-colors">
              اقامت دائم و برنامه‌های استانی کانادا
            </h3>
            <p className="text-sm text-white/70 leading-relaxed mb-6">
              مسیرهای مستقیم امتیازدهی فدرال، جاب‌آفرهای رسمی کارفرمایان معتبر و پذیرش تحصیلی در برترین کالج‌ها و دانشگاه‌های کانادا.
            </p>

            {/* Core Pathways Tags */}
            <div className="space-y-3 mb-8">
              <div className="flex items-start gap-3 p-3 rounded-xl bg-white/[0.03] border border-white/5 hover:border-[#D4A343]/30 transition-all">
                <Award className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
                <div>
                  <h4 className="text-sm font-bold text-white flex items-center gap-2">
                    <span>اکسپرس انتری (Express Entry FSW / CEC)</span>
                    <span className="text-[10px] px-2 py-0.5 rounded bg-red-500/15 text-red-300 font-mono">اقامت دائم PR</span>
                  </h4>
                  <p className="text-xs text-white/50 mt-0.5">محاسبه دقیق سیستم امتیازدهی جامع (CRS) و ارتقای امتیاز پرونده با زبان و مدارک.</p>
                </div>
              </div>

              <div className="flex items-start gap-3 p-3 rounded-xl bg-white/[0.03] border border-white/5 hover:border-[#D4A343]/30 transition-all">
                <Briefcase className="w-5 h-5 text-[#D4A343] shrink-0 mt-0.5" />
                <div>
                  <h4 className="text-sm font-bold text-white flex items-center gap-2">
                    <span>برنامه‌های استانی (PNP) & جاب آفر رسمی</span>
                  </h4>
                  <p className="text-xs text-white/50 mt-0.5">اخذ تاییدیه LMIA رسمی از کارفرما در انتاریو، بریتیش کلمبیا، آلبرتا و نیوبرانزویک.</p>
                </div>
              </div>

              <div className="flex items-start gap-3 p-3 rounded-xl bg-white/[0.03] border border-white/5 hover:border-[#D4A343]/30 transition-all">
                <GraduationCap className="w-5 h-5 text-amber-400 shrink-0 mt-0.5" />
                <div>
                  <h4 className="text-sm font-bold text-white">ویزای تحصیلی (Study Permit) و تبدیل به اقامت</h4>
                  <p className="text-xs text-white/50 mt-0.5">پذیرش دانشگاهی، مجوز کار بعد از فارغ‌التحصیلی (PGWP) و مسیر اقامت دائم.</p>
                </div>
              </div>
            </div>
          </div>

          {/* Bottom CTA Action */}
          <div className="relative z-10 pt-4 border-t border-white/8 flex items-center justify-between">
            <div className="flex items-center gap-2 text-xs text-white/50">
              <CheckCircle2 className="w-4 h-4 text-emerald-400" />
              <span>ارزیابی مستقیم توسط دفتر کانادا</span>
            </div>
            <a
              href="https://wa.me/16135122792?text=سلام،%20متقاضی%20ارزیابی%20پرونده%20مهاجرتی%20کانادا%20هستم."
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-white/10 hover:bg-[#D4A343] hover:text-[#070E1A] text-white text-xs sm:text-sm font-bold transition-all group-hover:bg-[#D4A343] group-hover:text-[#070E1A]"
            >
              <span>مشاوره پرونده کانادا</span>
              <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-1" />
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
}