"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Building2,
  GraduationCap,
  CheckCircle,
  Phone,
  FileText,
  AwardIcon,
  ShieldIcon,
  BookOpen,
  MapPin,
  Menu,
  Globe,
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { FadeIn } from "@/components/animations/fade-in"
import { Counter } from "@/components/animations/counter"
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Separator } from "@/components/ui/separator"
import { ModeToggle } from "@/components/mode-toggle"

export default function StudyMigrationPage() {
  const [selectedLevel, setSelectedLevel] = useState("bachelor")

  const studyLevels = [
    {
      id: "bachelor",
      title: "کارشناسی",
      duration: "۳-۴ سال",
      tuition: "۳,۰۰۰-۸,۰۰۰",
      description: "دوره‌های کارشناسی در دانشگاه‌های معتبر مجارستان",
      icon: BookOpen,
      requirements: ["دیپلم و پیش‌دانشگاهی", "مدرک زبان انگلیسی (IELTS 6.0+)", "انگیزه‌نامه", "توصیه‌نامه"],
      benefits: [
        "تحصیل در دانشگاه‌های معتبر اروپایی",
        "شهریه مقرون‌به‌صرفه",
        "امکان کار پاره‌وقت",
        "مسیر به اقامت دائم",
        "دسترسی به بورسیه‌ها",
      ],
      popularFields: ["مهندسی کامپیوتر", "پزشکی", "مدیریت کسب‌وکار", "معماری", "روانشناسی"],
    },
    {
      id: "master",
      title: "کارشناسی ارشد",
      duration: "۱-۲ سال",
      tuition: "۴,۰۰۰-۱۲,۰۰۰",
      description: "دوره‌های کارشناسی ارشد تخصصی",
      icon: GraduationCap,
      requirements: ["مدرک کارشناسی", "معدل حداقل ۱۴", "مدرک زبان انگلیسی (IELTS 6.5+)", "انگیزه‌نامه تخصصی"],
      benefits: [
        "تخصص در رشته‌های مدرن",
        "فرصت‌های پژوهشی",
        "شبکه‌سازی بین‌المللی",
        "آماده‌سازی برای دکترا",
        "بازار کار اروپایی",
      ],
      popularFields: ["هوش مصنوعی", "مدیریت پروژه", "مالی و بانکداری", "مهندسی نرم‌افزار", "بازاریابی دیجیتال"],
    },
    {
      id: "phd",
      title: "دکترا",
      duration: "۳-۴ سال",
      tuition: "۵,۰۰۰-۱۵,۰۰۰",
      description: "دوره‌های دکترا و پژوهش پیشرفته",
      icon: AwardIcon,
      requirements: ["مدرک کارشناسی ارشد", "پروپوزال پژوهشی", "مدرک زبان انگلیسی (IELTS 7.0+)", "سوابق پژوهشی"],
      benefits: [
        "بورسیه‌های پژوهشی",
        "همکاری با اساتید برجسته",
        "انتشار مقالات بین‌المللی",
        "فرصت‌های شغلی آکادمیک",
        "شبکه علمی گسترده",
      ],
      popularFields: ["علوم کامپیوتر", "مهندسی پزشکی", "اقتصاد", "علوم اجتماعی", "فیزیک"],
    },
  ]

  const topUniversities = [
    {
      name: "دانشگاه بوداپست للتکنولوژی و اقتصاد",
      ranking: "#1 در مجارستان",
      location: "بوداپست",
      specialties: ["مهندسی", "فناوری", "اقتصاد"],
      tuition: "۳,۰۰۰-۸,۰۰۰ یورو",
      image: "/placeholder.svg?height=200&width=300&query=budapest university technology",
    },
    {
      name: "دانشگاه سملوایس",
      ranking: "برترین دانشگاه پزشکی",
      location: "بوداپست",
      specialties: ["پزشکی", "دندانپزشکی", "داروسازی"],
      tuition: "۱۲,۰۰۰-۱۸,۰۰۰ یورو",
      image: "/placeholder.svg?height=200&width=300&query=semmelweis university budapest",
    },
    {
      name: "دانشگاه اوتووس لوراند",
      ranking: "#2 در مجارستان",
      location: "بوداپست",
      specialties: ["علوم انسانی", "علوم طبیعی", "حقوق"],
      tuition: "۴,۰۰۰-۱۰,۰۰۰ یورو",
      image: "/placeholder.svg?height=200&width=300&query=eotvos lorand university",
    },
    {
      name: "دانشگاه دبرسن",
      ranking: "دانشگاه جامع معتبر",
      location: "دبرسن",
      specialties: ["پزشکی", "مهندسی", "کشاورزی"],
      tuition: "۳,۵۰۰-۱۲,۰۰۰ یورو",
      image: "/placeholder.svg?height=200&width=300&query=university of debrecen",
    },
  ]

  const applicationProcess = [
    {
      step: 1,
      title: "انتخاب رشته و دانشگاه",
      description: "مشاوره برای انتخاب بهترین رشته و دانشگاه",
      duration: "۱-۲ هفته",
    },
    {
      step: 2,
      title: "آماده‌سازی مدارک",
      description: "تهیه و ترجمه تمامی مدارک مورد نیاز",
      duration: "۲-۴ هفته",
    },
    {
      step: 3,
      title: "ارسال درخواست",
      description: "ثبت درخواست در دانشگاه‌های انتخابی",
      duration: "۱ هفته",
    },
    {
      step: 4,
      title: "دریافت پذیرش",
      description: "پیگیری و دریافت نامه پذیرش",
      duration: "۴-۸ هفته",
    },
    {
      step: 5,
      title: "اخذ ویزای دانشجویی",
      description: "درخواست و دریافت ویزای تحصیلی",
      duration: "۲-۴ هفته",
    },
    {
      step: 6,
      title: "آماده‌سازی سفر",
      description: "کمک در تنظیمات سفر و اسکان",
      duration: "۱-۲ هفته",
    },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-green-50" dir="rtl">
      {/* Header */}
      <header className="bg-white/95 backdrop-blur-sm shadow-lg sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex justify-between items-center">
            <Link href="/" className="flex items-center space-x-3 space-x-reverse">
              <Building2 className="h-8 w-8 text-green-600" />
              <h1 className="text-2xl font-bold text-gray-800">مجموعه ایران-مجارستان</h1>
            </Link>
            <div className="flex items-center gap-4">
              <nav className="hidden md:flex items-center gap-6">
                <Link href="/" className="text-gray-600 hover:text-gray-800 transition-colors">
                  خدمات
                </Link>
                <Link href="/" className="text-gray-600 hover:text-gray-800 transition-colors">
                  درباره ما
                </Link>
                <Link href="/" className="text-gray-600 hover:text-gray-800 transition-colors">
                  تماس با ما
                </Link>
              </nav>
              <ModeToggle />
              <Sheet>
                <SheetTrigger asChild>
                  <Button variant="ghost" size="sm" className="md:hidden">
                    <Menu className="h-5 w-5" />
                  </Button>
                </SheetTrigger>
                <SheetContent side="right" className="w-64">
                  <SheetHeader>
                    <SheetTitle>منو</SheetTitle>
                    <SheetDescription>دسترسی به بخش‌های مختلف سایت</SheetDescription>
                  </SheetHeader>
                  <Separator />
                  <div className="grid gap-4 py-4">
                    <Link
                      href="/"
                      className="flex items-center gap-2 text-gray-600 hover:text-gray-800 transition-colors"
                    >
                      <Globe className="h-4 w-4" />
                      خدمات
                    </Link>
                    <Link
                      href="/"
                      className="flex items-center gap-2 text-gray-600 hover:text-gray-800 transition-colors"
                    >
                      <Globe className="h-4 w-4" />
                      درباره ما
                    </Link>
                    <Link
                      href="/"
                      className="flex items-center gap-2 text-gray-600 hover:text-gray-800 transition-colors"
                    >
                      <Globe className="h-4 w-4" />
                      تماس با ما
                    </Link>
                  </div>
                </SheetContent>
              </Sheet>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-r from-green-600 via-green-700 to-green-800 text-white">
        <div className="container mx-auto px-4 text-center">
          <FadeIn>
            <h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight">مهاجرت تحصیلی</h1>
            <p className="text-xl text-green-100 max-w-3xl mx-auto mb-8">
              تحصیل در بهترین دانشگاه‌های مجارستان و دسترسی به آموزش اروپایی
            </p>
            <div className="flex justify-center gap-8 text-center">
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={21} />
                </div>
                <div className="text-green-200">دانشگاه معتبر</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={3000} suffix="+" />
                </div>
                <div className="text-green-200">دانشجوی ایرانی</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={95} suffix="%" />
                </div>
                <div className="text-green-200">نرخ پذیرش</div>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Study Levels */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <FadeIn>
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-gray-800 mb-4">مقاطع تحصیلی</h2>
              <div className="w-24 h-1 bg-green-600 mx-auto rounded-full mb-6"></div>
              <p className="text-lg text-gray-600 max-w-3xl mx-auto">انواع مقاطع تحصیلی موجود در دانشگاه‌های مجارستان</p>
            </div>
          </FadeIn>

          <Tabs value={selectedLevel} onValueChange={setSelectedLevel} className="max-w-6xl mx-auto">
            <TabsList className="grid w-full grid-cols-3 mb-8">
              {studyLevels.map((level) => (
                <TabsTrigger key={level.id} value={level.id} className="text-sm">
                  {level.title}
                </TabsTrigger>
              ))}
            </TabsList>

            {studyLevels.map((level) => (
              <TabsContent key={level.id} value={level.id}>
                <FadeIn>
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <Card>
                      <CardHeader>
                        <div className="flex items-center gap-4 mb-4">
                          <div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center">
                            <level.icon className="h-8 w-8 text-green-600" />
                          </div>
                          <div>
                            <CardTitle className="text-2xl">{level.title}</CardTitle>
                            <div className="flex gap-2 mt-2">
                              <Badge variant="outline">{level.duration}</Badge>
                              <Badge className="bg-green-100 text-green-700">{level.tuition} یورو/سال</Badge>
                            </div>
                          </div>
                        </div>
                        <CardDescription className="text-lg">{level.description}</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-6">
                          <div>
                            <h4 className="font-semibold mb-3">مزایا</h4>
                            <div className="space-y-2">
                              {level.benefits.map((benefit, index) => (
                                <div key={index} className="flex items-center gap-2">
                                  <CheckCircle className="h-4 w-4 text-green-600" />
                                  <span className="text-sm">{benefit}</span>
                                </div>
                              ))}
                            </div>
                          </div>

                          <div>
                            <h4 className="font-semibold mb-3">رشته‌های محبوب</h4>
                            <div className="flex flex-wrap gap-2">
                              {level.popularFields.map((field, index) => (
                                <Badge key={index} variant="outline" className="text-xs">
                                  {field}
                                </Badge>
                              ))}
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                          <FileText className="h-6 w-6 text-green-600" />
                          الزامات پذیرش
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-4">
                          {level.requirements.map((requirement, index) => (
                            <div key={index} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
                              <div className="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-bold mt-0.5">
                                {index + 1}
                              </div>
                              <span className="text-sm">{requirement}</span>
                            </div>
                          ))}
                        </div>

                        <div className="mt-8 p-4 bg-gradient-to-r from-green-50 to-blue-50 rounded-lg">
                          <h4 className="font-semibold mb-2 flex items-center gap-2">
                            <ShieldIcon className="h-5 w-5 text-green-600" />
                            پشتیبانی ما
                          </h4>
                          <ul className="text-sm text-gray-700 space-y-1">
                            <li>• راهنمایی انتخاب رشته و دانشگاه</li>
                            <li>• کمک در تهیه مدارک</li>
                            <li>• پیگیری پذیرش</li>
                            <li>• اخذ ویزای دانشجویی</li>
                          </ul>
                        </div>

                        <Button className="w-full mt-6 bg-green-600 hover:bg-green-700">درخواست مشاوره رایگان</Button>
                      </CardContent>
                    </Card>
                  </div>
                </FadeIn>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </section>

      {/* Top Universities */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <FadeIn>
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-gray-800 mb-4">برترین دانشگاه‌های مجارستان</h2>
              <div className="w-24 h-1 bg-green-600 mx-auto rounded-full mb-6"></div>
              <p className="text-lg text-gray-600 max-w-3xl mx-auto">دانشگاه‌های معتبر و مطرح مجارستان برای تحصیل</p>
            </div>
          </FadeIn>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {topUniversities.map((university, index) => (
              <FadeIn key={index} delay={index * 0.1}>
                <Card className="hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
                  <div className="relative h-48">
                    <Image
                      src={university.image || "/placeholder.svg"}
                      alt={university.name}
                      fill
                      className="object-cover rounded-t-lg"
                    />
                    <div className="absolute top-4 right-4">
                      <Badge className="bg-green-600 text-white">{university.ranking}</Badge>
                    </div>
                  </div>
                  <CardHeader>
                    <CardTitle className="text-xl">{university.name}</CardTitle>
                    <div className="flex items-center gap-2 text-gray-600">
                      <MapPin className="h-4 w-4" />
                      <span className="text-sm">{university.location}</span>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div>
                        <h4 className="font-semibold mb-2">تخصص‌ها</h4>
                        <div className="flex flex-wrap gap-2">
                          {university.specialties.map((specialty, idx) => (
                            <Badge key={idx} variant="outline" className="text-xs">
                              {specialty}
                            </Badge>
                          ))}
                        </div>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-sm text-gray-600">شهریه سالانه:</span>
                        <span className="font-semibold text-green-600">{university.tuition}</span>
                      </div>
                      <Button className="w-full bg-green-600 hover:bg-green-700">اطلاعات بیشتر</Button>
                    </div>
                  </CardContent>
                </Card>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Application Process */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <FadeIn>
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-gray-800 mb-4">فرآیند درخواست</h2>
              <div className="w-24 h-1 bg-green-600 mx-auto rounded-full mb-6"></div>
            </div>
          </FadeIn>

          <div className="max-w-4xl mx-auto">
            <div className="space-y-8">
              {applicationProcess.map((step, index) => (
                <FadeIn key={index} delay={index * 0.1}>
                  <div className="flex items-start gap-6">
                    <div className="w-12 h-12 bg-green-600 text-white rounded-full flex items-center justify-center text-lg font-bold">
                      {step.step}
                    </div>
                    <div className="flex-1">
                      <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
                      <p className="text-gray-600 mb-2">{step.description}</p>
                      <Badge variant="outline" className="text-xs">
                        مدت زمان: {step.duration}
                      </Badge>
                      <div className="w-full bg-gray-200 rounded-full h-2 mt-3">
                        <div
                          className="bg-green-600 h-2 rounded-full transition-all duration-1000"
                          style={{ width: `${(step.step / applicationProcess.length) * 100}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>
                </FadeIn>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gradient-to-r from-green-600 to-green-700 text-white">
        <div className="container mx-auto px-4 text-center">
          <FadeIn>
            <h2 className="text-4xl font-bold mb-6">آماده شروع مسیر تحصیلی خود هستید؟</h2>
            <p className="text-xl text-green-100 mb-8 max-w-2xl mx-auto">
              با مشاوران تحصیلی ما تماس بگیرید و اولین قدم را برای تحصیل در اروپا بردارید
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-white text-green-600 hover:bg-gray-100">
                <Phone className="mr-2 h-5 w-5" />
                مشاوره رایگان
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white text-white hover:bg-white hover:text-green-600"
              >
                <FileText className="mr-2 h-5 w-5" />
                دانلود کاتالوگ دانشگاه‌ها
              </Button>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
            {/* Company Info */}
            <div className="md:col-span-2">
              <div className="flex items-center space-x-3 space-x-reverse mb-6">
                <div className="w-12 h-12 bg-gradient-to-r from-pink-500 to-purple-600 rounded-xl flex items-center justify-center">
                  <Building2 className="h-7 w-7 text-white" />
                </div>
                <div>
                  <h3 className="text-xl font-bold">مجموعه ایران-مجارستان</h3>
                  <p className="text-gray-400 text-sm">Iran-Hungary Immigration Services</p>
                </div>
              </div>
              <p className="text-gray-400 text-sm leading-relaxed mb-6 max-w-md">
                بیش از ۷ سال تجربه در ارائه خدمات مهاجرتی، سرمایه‌گذاری و اقامت به مجارستان.
              </p>
            </div>

            {/* Services */}
            <div>
              <h4 className="font-semibold mb-6 text-lg">خدمات ما</h4>
              <ul className="space-y-3 text-sm text-gray-400">
                <li>
                  <Link href="/services/consultation" className="hover:text-white transition-colors">
                    مشاوره مهاجرت
                  </Link>
                </li>
                <li>
                  <Link href="/services/golden-visa" className="hover:text-white transition-colors">
                    گلدن ویزا
                  </Link>
                </li>
                <li>
                  <Link href="/services/study-migration" className="hover:text-white transition-colors">
                    مهاجرت تحصیلی
                  </Link>
                </li>
              </ul>
            </div>

            {/* Quick Links */}
            <div>
              <h4 className="font-semibold mb-6 text-lg">لینک‌های مفید</h4>
              <ul className="space-y-3 text-sm text-gray-400">
                <li>
                  <Link href="/about" className="hover:text-white transition-colors">
                    درباره ما
                  </Link>
                </li>
                <li>
                  <Link href="/contact" className="hover:text-white transition-colors">
                    تماس با ما
                  </Link>
                </li>
                <li>
                  <Link href="/packages" className="hover:text-white transition-colors">
                    پکیج‌ها
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          {/* Bottom Footer */}
          <div className="border-t border-gray-800 pt-8 text-center">
            <p className="text-sm text-gray-400">&copy; 2025 مجموعه ایران-مجارستان. تمامی حقوق محفوظ است.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}