"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,
  CheckCircle,
  Clock,
  Phone,
  Star,
  FileText,
  TrendingUp,
  Award,
  Shield,
  Globe,
  Menu,
} from "lucide-react"
import Link from "next/link"
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"

export default function GoldenVisaPage() {
  const [selectedInvestment, setSelectedInvestment] = useState("real-estate")

  const investmentOptions = [
    {
      id: "real-estate",
      title: "سرمایه‌گذاری املاک",
      minAmount: "۲۵۰,۰۰۰",
      description: "خرید ملک مسکونی یا تجاری در مجارستان",
      icon: Building2,
      benefits: [
        "اقامت ۱۰ ساله قابل تمدید",
        "امکان الحاق خانواده",
        "دسترسی به بازار اروپا",
        "درآمد از اجاره ملک",
        "مسیر به اقامت دائم",
      ],
      requirements: ["حداقل سرمایه ۲۵۰,۰۰۰ یورو", "عدم سابقه کیفری", "بیمه درمانی معتبر", "اثبات منبع درآمد"],
      timeline: "۶-۱۲ ماه",
      successRate: "۹۸%",
    },
    {
      id: "business",
      title: "سرمایه‌گذاری کسب‌وکار",
      minAmount: "۵۰۰,۰۰۰",
      description: "راه‌اندازی یا خرید کسب‌وکار در مجارستان",
      icon: Building2,
      benefits: [
        "اقامت ۱۰ ساله قابل تمدید",
        "امکان الحاق خانواده",
        "مجوز کار در اروپا",
        "درآمد از کسب‌وکار",
        "مزایای مالیاتی",
      ],
      requirements: ["حداقل سرمایه ۵۰۰,۰۰۰ یورو", "طرح کسب‌وکار معتبر", "ایجاد حداقل ۱۰ شغل", "تجربه مدیریتی"],
      timeline: "۸-۱۵ ماه",
      successRate: "۹۵%",
    },
    {
      id: "bonds",
      title: "اوراق قرضه دولتی",
      minAmount: "۳۰۰,۰۰۰",
      description: "خرید اوراق قرضه دولت مجارستان",
      icon: TrendingUp,
      benefits: [
        "اقامت ۵ ساله قابل تمدید",
        "امکان الحاق خانواده",
        "سرمایه‌گذاری کم‌ریسک",
        "بازگشت سرمایه تضمین‌شده",
        "فرآیند سریع‌تر",
      ],
      requirements: ["حداقل سرمایه ۳۰۰,۰۰۰ یورو", "نگهداری ۵ ساله اوراق", "عدم سابقه کیفری", "بیمه درمانی معتبر"],
      timeline: "۴-۸ ماه",
      successRate: "۹۹%",
    },
  ]

  const processSteps = [
    {
      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-yellow-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-yellow-600" />
              <h1 className="text-2xl font-bold text-gray-800">مجموعه ایران-مجارستان</h1>
            </Link>
            <div className="hidden md:flex items-center gap-4">
              <Link href="/services" className="hover:text-gray-600 transition-colors">
                خدمات
              </Link>
              <Link href="/about" className="hover:text-gray-600 transition-colors">
                درباره ما
              </Link>
              <Link href="/contact" className="hover:text-gray-600 transition-colors">
                تماس با ما
              </Link>
              <Button variant="outline">
                مشاوره رایگان <Phone className="mr-2 h-4 w-4" />
              </Button>
            </div>

            <Sheet>
              <SheetTrigger asChild>
                <Button variant="ghost" className="md:hidden">
                  <Menu className="h-5 w-5" />
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-full sm:w-3/4 md:w-1/2 bg-white">
                <SheetHeader className="text-right">
                  <SheetTitle>منو</SheetTitle>
                  <SheetDescription>مرور صفحات سایت و دسترسی به خدمات اصلی</SheetDescription>
                </SheetHeader>
                <Separator />
                <div className="py-4">
                  <Link href="/" className="flex items-center py-2 px-4 hover:bg-gray-100 rounded-md">
                    <Building2 className="mr-2 h-4 w-4" />
                    صفحه اصلی
                  </Link>
                  <Link href="/services" className="flex items-center py-2 px-4 hover:bg-gray-100 rounded-md">
                    <Building2 className="mr-2 h-4 w-4" />
                    خدمات
                  </Link>
                  <Link href="/about" className="flex items-center py-2 px-4 hover:bg-gray-100 rounded-md">
                    <Building2 className="mr-2 h-4 w-4" />
                    درباره ما
                  </Link>
                  <Link href="/contact" className="flex items-center py-2 px-4 hover:bg-gray-100 rounded-md">
                    <Building2 className="mr-2 h-4 w-4" />
                    تماس با ما
                  </Link>
                  <Separator className="my-4" />
                  <Button variant="outline" className="w-full justify-start">
                    <Phone className="mr-2 h-4 w-4" />
                    مشاوره رایگان
                  </Button>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-r from-yellow-500 via-yellow-600 to-orange-500 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-yellow-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={250} suffix="K+" />
                </div>
                <div className="text-yellow-200">حداقل سرمایه (یورو)</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={10} />
                </div>
                <div className="text-yellow-200">سال اقامت</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={27} />
                </div>
                <div className="text-yellow-200">کشور قابل سفر</div>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Investment Options */}
      <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-yellow-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={selectedInvestment} onValueChange={setSelectedInvestment} className="max-w-6xl mx-auto">
            <TabsList className="grid w-full grid-cols-3 mb-8">
              {investmentOptions.map((option) => (
                <TabsTrigger key={option.id} value={option.id} className="text-sm">
                  {option.title}
                </TabsTrigger>
              ))}
            </TabsList>

            {investmentOptions.map((option) => (
              <TabsContent key={option.id} value={option.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-yellow-100 rounded-2xl flex items-center justify-center">
                            <option.icon className="h-8 w-8 text-yellow-600" />
                          </div>
                          <div>
                            <CardTitle className="text-2xl">{option.title}</CardTitle>
                            <div className="text-3xl font-bold text-yellow-600 mt-2">
                              {option.minAmount} <span className="text-lg text-gray-500">یورو</span>
                            </div>
                          </div>
                        </div>
                        <CardDescription className="text-lg">{option.description}</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-6">
                          <div>
                            <h4 className="font-semibold mb-3 flex items-center gap-2">
                              <Star className="h-5 w-5 text-yellow-600" />
                              مزایا
                            </h4>
                            <div className="space-y-2">
                              {option.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 className="grid grid-cols-2 gap-4 text-center">
                            <div className="p-4 bg-green-50 rounded-lg">
                              <Clock className="h-6 w-6 text-green-600 mx-auto mb-2" />
                              <div className="text-sm text-gray-600">مدت زمان</div>
                              <div className="font-bold text-green-600">{option.timeline}</div>
                            </div>
                            <div className="p-4 bg-blue-50 rounded-lg">
                              <Award className="h-6 w-6 text-blue-600 mx-auto mb-2" />
                              <div className="text-sm text-gray-600">نرخ موفقیت</div>
                              <div className="font-bold text-blue-600">{option.successRate}</div>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                          <FileText className="h-6 w-6 text-yellow-600" />
                          الزامات و شرایط
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-4">
                          {option.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-yellow-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-yellow-50 to-orange-50 rounded-lg">
                          <h4 className="font-semibold mb-2 flex items-center gap-2">
                            <Shield className="h-5 w-5 text-yellow-600" />
                            تضمین‌ها
                          </h4>
                          <ul className="text-sm text-gray-700 space-y-1">
                            <li>• بازگشت کامل سرمایه در صورت رد درخواست</li>
                            <li>• پشتیبانی حقوقی در تمام مراحل</li>
                            <li>• ضمانت کیفیت خدمات</li>
                          </ul>
                        </div>

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

      {/* Process Timeline */}
      <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-yellow-600 mx-auto rounded-full mb-6"></div>
            </div>
          </FadeIn>

          <div className="max-w-4xl mx-auto">
            <div className="space-y-8">
              {processSteps.map((step, index) => (
                <FadeIn key={index} delay={index * 0.1}>
                  <div className="flex items-start gap-6">
                    <div className="w-12 h-12 bg-yellow-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-yellow-600 h-2 rounded-full transition-all duration-1000"
                          style={{ width: `${(step.step / processSteps.length) * 100}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>
                </FadeIn>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <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-yellow-600 mx-auto rounded-full mb-6"></div>
            </div>
          </FadeIn>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                icon: Globe,
                title: "آزادی سفر",
                description: "سفر بدون ویزا به ۲۷ کشور اتحادیه اروپا",
                color: "bg-blue-100 text-blue-600",
              },
              {
                icon: Building2,
                title: "الحاق خانواده",
                description: "امکان اقامت برای همسر و فرزندان زیر ۱۸ سال",
                color: "bg-green-100 text-green-600",
              },
              {
                icon: Building2,
                title: "کسب‌وکار",
                description: "حق راه‌اندازی کسب‌وکار در سراسر اروپا",
                color: "bg-purple-100 text-purple-600",
              },
              {
                icon: TrendingUp,
                title: "تحصیل",
                description: "دسترسی به سیستم آموزشی اروپا با شهریه کمتر",
                color: "bg-orange-100 text-orange-600",
              },
              {
                icon: Shield,
                title: "امنیت",
                description: "زندگی در یکی از امن‌ترین کشورهای اروپا",
                color: "bg-red-100 text-red-600",
              },
              {
                icon: TrendingUp,
                title: "سرمایه‌گذاری",
                description: "بازگشت سرمایه و درآمد از سرمایه‌گذاری",
                color: "bg-yellow-100 text-yellow-600",
              },
            ].map((benefit, index) => (
              <FadeIn key={index} delay={index * 0.1}>
                <Card className="text-center hover:shadow-lg transition-shadow">
                  <CardContent className="p-6">
                    <div
                      className={`w-16 h-16 ${benefit.color} rounded-2xl flex items-center justify-center mx-auto mb-4`}
                    >
                      <benefit.icon className="h-8 w-8" />
                    </div>
                    <h3 className="text-xl font-semibold mb-2">{benefit.title}</h3>
                    <p className="text-gray-600 text-sm">{benefit.description}</p>
                  </CardContent>
                </Card>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gradient-to-r from-yellow-500 to-orange-500 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-yellow-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-yellow-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-yellow-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>

          {/* Contact Info */}
          <div className="border-t border-gray-800 pt-8 mb-8">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="flex items-center space-x-3 space-x-reverse">
                <Phone className="h-5 w-5 text-blue-400" />
                <div>
                  <p className="text-sm text-gray-400">تلفن تماس</p>
                  <p className="text-white" dir="ltr">
                    +98 21 91693955
                  </p>
                </div>
              </div>
              <div className="flex items-center space-x-3 space-x-reverse">
                <Building2 className="h-5 w-5 text-green-400" />
                <div>
                  <p className="text-sm text-gray-400">ایمیل</p>
                  <p className="text-white">Mirzaei@hu-ir.ir</p>
                </div>
              </div>
              <div className="flex items-center space-x-3 space-x-reverse">
                <Globe className="h-5 w-5 text-purple-400" />
                <div>
                  <p className="text-sm text-gray-400">وب‌سایت</p>
                  <p className="text-white">Hu-ir.ir</p>
                </div>
              </div>
            </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>
  )
}