"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 { Building2, CheckCircle, Phone, FileText, TrendingUp, Shield, Calendar, Target } from "lucide-react"
import Link from "next/link"
import { FadeIn } from "@/components/animations/fade-in"
import { Counter } from "@/components/animations/counter"
import { ChevronDown, ChevronRight, Menu, Mail, Globe, Users, Award } from "lucide-react"

export default function ConsultationPage() {
  const [selectedPackage, setSelectedPackage] = useState("basic")

  const consultationServices = [
    {
      id: "assessment",
      title: "ارزیابی اولیه پرونده",
      description: "بررسی کامل شرایط و امکانات شما برای مهاجرت",
      icon: Target,
      features: ["بررسی مدارک تحصیلی", "ارزیابی سابقه کاری", "تحلیل وضعیت مالی", "تعیین بهترین مسیر مهاجرت"],
      duration: "۲-۳ ساعت",
      price: "رایگان",
    },
    {
      id: "planning",
      title: "برنامه‌ریزی مسیر مهاجرت",
      description: "طراحی نقشه راه کامل برای رسیدن به هدف مهاجرت",
      icon: FileText,
      features: ["تدوین برنامه زمان‌بندی", "تعیین اولویت‌های اقدام", "محاسبه هزینه‌های مورد نیاز", "راهنمایی مرحله‌ای"],
      duration: "۱-۲ هفته",
      price: "۲۰۰ یورو",
    },
    {
      id: "documentation",
      title: "راهنمایی تهیه مدارک",
      description: "کمک در تهیه و تکمیل تمامی مدارک مورد نیاز",
      icon: Shield,
      features: ["لیست کامل مدارک", "راهنمایی ترجمه و تصدیق", "بررسی صحت مدارک", "پیگیری تکمیل پرونده"],
      duration: "۱-۳ ماه",
      price: "۳۰۰ یورو",
    },
    {
      id: "followup",
      title: "پیگیری و پشتیبانی",
      description: "پیگیری مداوم پرونده تا دریافت نتیجه نهایی",
      icon: TrendingUp,
      features: ["پیگیری وضعیت پرونده", "پاسخ به سوالات", "هماهنگی مصاحبه", "پشتیبانی تا دریافت ویزا"],
      duration: "تا دریافت ویزا",
      price: "۵۰۰ یورو",
    },
  ]

  const packages = [
    {
      id: "basic",
      name: "پکیج پایه",
      price: "۲۰۰",
      description: "مشاوره اولیه و ارزیابی پرونده",
      features: [
        "جلسه مشاوره ۲ ساعته",
        "ارزیابی اولیه پرونده",
        "تعیین بهترین مسیر مهاجرت",
        "راهنمایی کلی مراحل",
        "پشتیبانی ۱ ماهه",
      ],
      popular: false,
    },
    {
      id: "standard",
      name: "پکیج استاندارد",
      price: "۵۰۰",
      description: "مشاوره کامل با برنامه‌ریزی مسیر",
      features: [
        "تمام موارد پکیج پایه",
        "برنامه‌ریزی کامل مسیر مهاجرت",
        "راهنمایی تهیه مدارک",
        "بررسی و تصحیح مدارک",
        "پشتیبانی ۳ ماهه",
        "یک جلسه پیگیری رایگان",
      ],
      popular: true,
    },
    {
      id: "premium",
      name: "پکیج پریمیوم",
      price: "۱۰۰۰",
      description: "خدمات کامل تا دریافت ویزا",
      features: [
        "تمام موارد پکیج استاندارد",
        "پیگیری کامل پرونده",
        "هماهنگی مصاحبه",
        "آماده‌سازی برای مصاحبه",
        "پشتیبانی تا دریافت ویزا",
        "مشاوره پس از ورود",
      ],
      popular: false,
    },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50" dir="rtl">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-50 border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex justify-between items-center">
            <div className="flex items-center space-x-3 space-x-reverse">
              <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>
                <h1 className="text-xl font-bold text-gray-800">مجموعه ایران-مجارستان</h1>
                <p className="text-xs text-gray-500">Iran-Hungary Immigration Services</p>
              </div>
            </div>

            {/* Desktop Navigation */}
            <nav className="hidden lg:flex space-x-8 space-x-reverse">
              <Link
                href="/"
                className="text-gray-700 hover:text-pink-600 font-medium transition-colors px-3 py-2 rounded-lg hover:bg-pink-50"
              >
                خانه
              </Link>

              {/* Services Dropdown */}
              <div className="relative group">
                <button className="text-gray-700 hover:text-pink-600 font-medium transition-colors px-3 py-2 rounded-lg hover:bg-pink-50 flex items-center">
                  خدمات
                  <ChevronDown className="mr-1 h-4 w-4" />
                </button>
                <div className="absolute top-full right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                  <div className="py-2">
                    <Link
                      href="/services/consultation"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-pink-50 hover:text-pink-600"
                    >
                      مشاوره مهاجرت
                    </Link>
                    <Link
                      href="/services/golden-visa"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-pink-50 hover:text-pink-600"
                    >
                      گلدن ویزا
                    </Link>
                    <Link
                      href="/services/study-migration"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-pink-50 hover:text-pink-600"
                    >
                      مهاجرت تحصیلی
                    </Link>
                    <Link
                      href="/services/work-migration"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-pink-50 hover:text-pink-600"
                    >
                      مهاجرت کاری
                    </Link>
                    <Link
                      href="/services/company-registration"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-pink-50 hover:text-pink-600"
                    >
                      ثبت شرکت
                    </Link>
                    <Link
                      href="/properties"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-pink-50 hover:text-pink-600"
                    >
                      خرید ملک
                    </Link>
                    <Link
                      href="/post-arrival"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-pink-50 hover:text-pink-600"
                    >
                      خدمات پس از ورود
                    </Link>
                  </div>
                </div>
              </div>

              <Link
                href="/blog"
                className="text-gray-700 hover:text-pink-600 font-medium transition-colors px-3 py-2 rounded-lg hover:bg-pink-50"
              >
                وبلاگ
              </Link>
              <Link
                href="/properties"
                className="text-gray-700 hover:text-pink-600 font-medium transition-colors px-3 py-2 rounded-lg hover:bg-pink-50"
              >
                املاک
              </Link>
              <Link
                href="/mobile-app"
                className="text-gray-700 hover:text-pink-600 font-medium transition-colors px-3 py-2 rounded-lg hover:bg-pink-50"
              >
                اپلیکیشن
              </Link>
            </nav>

            {/* CTA Buttons */}
            <div className="hidden lg:flex items-center space-x-4 space-x-reverse">
              <Button variant="outline" className="border-pink-200 text-pink-600 hover:bg-pink-50">
                <Phone className="ml-2 h-4 w-4" />
                تماس
              </Button>
              <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white">
                مشاوره رایگان
              </Button>
            </div>

            {/* Mobile Menu Button */}
            <button className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
              <Menu className="h-6 w-6" />
            </button>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-r from-blue-600 via-blue-700 to-blue-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-blue-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={8} />
                </div>
                <div className="text-blue-200">سال تجربه</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={1000} suffix="+" />
                </div>
                <div className="text-blue-200">مشاوره موفق</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={98} suffix="%" />
                </div>
                <div className="text-blue-200">رضایت مشتریان</div>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Services Overview */}
      <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-blue-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">
            {consultationServices.map((service, index) => (
              <FadeIn key={service.id} delay={index * 0.1}>
                <Card className="hover:shadow-xl transition-all duration-300 hover:-translate-y-2 h-full">
                  <CardHeader>
                    <div className="flex items-center gap-4 mb-4">
                      <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center">
                        <service.icon className="h-8 w-8 text-blue-600" />
                      </div>
                      <div>
                        <CardTitle className="text-xl">{service.title}</CardTitle>
                        <div className="flex gap-2 mt-2">
                          <Badge variant="outline" className="text-xs">
                            {service.duration}
                          </Badge>
                          <Badge className="bg-green-100 text-green-700 text-xs">{service.price}</Badge>
                        </div>
                      </div>
                    </div>
                    <CardDescription className="text-gray-600">{service.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {service.features.map((feature, featureIndex) => (
                        <li key={featureIndex} className="flex items-center gap-2">
                          <CheckCircle className="h-4 w-4 text-green-600" />
                          <span className="text-sm text-gray-700">{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Packages Section */}
      <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-blue-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-3 gap-8 max-w-6xl mx-auto">
            {packages.map((pkg, index) => (
              <FadeIn key={pkg.id} delay={index * 0.1}>
                <Card
                  className={`relative hover:shadow-xl transition-all duration-300 hover:-translate-y-2 ${
                    pkg.popular ? "ring-2 ring-blue-500 scale-105" : ""
                  }`}
                >
                  {pkg.popular && (
                    <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                      <Badge className="bg-blue-600 text-white px-4 py-1">محبوب‌ترین</Badge>
                    </div>
                  )}
                  <CardHeader className="text-center">
                    <CardTitle className="text-2xl">{pkg.name}</CardTitle>
                    <div className="text-4xl font-bold text-blue-600 my-4">
                      {pkg.price} <span className="text-lg text-gray-500">یورو</span>
                    </div>
                    <CardDescription>{pkg.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-3 mb-6">
                      {pkg.features.map((feature, featureIndex) => (
                        <li key={featureIndex} className="flex items-center gap-2">
                          <CheckCircle className="h-4 w-4 text-green-600" />
                          <span className="text-sm">{feature}</span>
                        </li>
                      ))}
                    </ul>
                    <Button
                      className={`w-full ${pkg.popular ? "bg-blue-600 hover:bg-blue-700" : ""}`}
                      variant={pkg.popular ? "default" : "outline"}
                    >
                      انتخاب پکیج
                    </Button>
                  </CardContent>
                </Card>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

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

          <div className="max-w-4xl mx-auto">
            <div className="space-y-8">
              {[
                {
                  step: 1,
                  title: "تماس اولیه و رزرو جلسه",
                  description: "تماس با تیم ما و تعیین زمان مناسب برای جلسه مشاوره",
                  duration: "۱۵ دقیقه",
                },
                {
                  step: 2,
                  title: "جلسه مشاوره تخصصی",
                  description: "بررسی کامل شرایط شما و ارائه راهکارهای مناسب",
                  duration: "۲-۳ ساعت",
                },
                {
                  step: 3,
                  title: "ارائه گزارش و برنامه",
                  description: "تحویل گزارش کامل و برنامه زمان‌بندی شده",
                  duration: "۱ هفته",
                },
                {
                  step: 4,
                  title: "پیگیری و پشتیبانی",
                  description: "پشتیبانی مداوم در تمام مراحل اجرای برنامه",
                  duration: "مداوم",
                },
              ].map((item, index) => (
                <FadeIn key={index} delay={index * 0.1}>
                  <div className="flex items-start gap-6">
                    <div className="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center text-lg font-bold">
                      {item.step}
                    </div>
                    <div className="flex-1">
                      <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
                      <p className="text-gray-600 mb-2">{item.description}</p>
                      <Badge variant="outline" className="text-xs">
                        مدت زمان: {item.duration}
                      </Badge>
                    </div>
                  </div>
                </FadeIn>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gradient-to-r from-blue-600 to-blue-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-blue-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-blue-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-blue-600"
              >
                <Calendar 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 className="flex space-x-4 space-x-reverse">
                <div className="flex items-center space-x-2 space-x-reverse">
                  <Award className="h-4 w-4 text-blue-400" />
                  <span className="text-xs text-gray-400">۷ سال تجربه</span>
                </div>
                <div className="flex items-center space-x-2 space-x-reverse">
                  <Users className="h-4 w-4 text-blue-400" />
                  <span className="text-xs text-gray-400">۵۰۰+ مشتری</span>
                </div>
                <div className="flex items-center space-x-2 space-x-reverse">
                  <Target className="h-4 w-4 text-blue-400" />
                  <span className="text-xs text-gray-400">۹۵% موفقیت</span>
                </div>
              </div>
            </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 flex items-center">
                    <ChevronRight className="h-3 w-3 ml-2" />
                    مشاوره مهاجرت
                  </Link>
                </li>
                <li>
                  <Link href="/services/golden-visa" className="hover:text-white transition-colors flex items-center">
                    <ChevronRight className="h-3 w-3 ml-2" />
                    گلدن ویزا
                  </Link>
                </li>
                <li>
                  <Link
                    href="/services/study-migration"
                    className="hover:text-white transition-colors flex items-center"
                  >
                    <ChevronRight className="h-3 w-3 ml-2" />
                    مهاجرت تحصیلی
                  </Link>
                </li>
                <li>
                  <Link
                    href="/services/work-migration"
                    className="hover:text-white transition-colors flex items-center"
                  >
                    <ChevronRight className="h-3 w-3 ml-2" />
                    مهاجرت کاری
                  </Link>
                </li>
                <li>
                  <Link
                    href="/services/company-registration"
                    className="hover:text-white transition-colors flex items-center"
                  >
                    <ChevronRight className="h-3 w-3 ml-2" />
                    ثبت شرکت
                  </Link>
                </li>
                <li>
                  <Link href="/properties" className="hover:text-white transition-colors flex items-center">
                    <ChevronRight className="h-3 w-3 ml-2" />
                    خرید ملک
                  </Link>
                </li>
                <li>
                  <Link href="/post-arrival" className="hover:text-white transition-colors flex items-center">
                    <ChevronRight className="h-3 w-3 ml-2" />
                    خدمات پس از ورود
                  </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="/blog" className="hover:text-white transition-colors flex items-center">
                    <ChevronRight className="h-3 w-3 ml-2" />
                    وبلاگ
                  </Link>
                </li>
                <li>
                  <Link href="/properties" className="hover:text-white transition-colors flex items-center">
                    <ChevronRight className="h-3 w-3 ml-2" />
                    املاک
                  </Link>
                </li>
                <li>
                  <Link href="/mobile-app" className="hover:text-white transition-colors flex items-center">
                    <ChevronRight className="h-3 w-3 ml-2" />
                    اپلیکیشن موبایل
                  </Link>
                </li>
                <li>
                  <Link href="/migration-methods" className="hover:text-white transition-colors flex items-center">
                    <ChevronRight className="h-3 w-3 ml-2" />
                    روش‌های مهاجرت
                  </Link>
                </li>
                <li>
                  <Link href="/services" className="hover:text-white transition-colors flex items-center">
                    <ChevronRight className="h-3 w-3 ml-2" />
                    تمام خدمات
                  </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">
                <Mail 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 flex flex-col md:flex-row justify-between items-center">
            <div className="text-center md:text-right mb-4 md:mb-0">
              <p className="text-sm text-gray-400">&copy; 2025 مجموعه ایران-مجارستان. تمامی حقوق محفوظ است.</p>
              <p className="text-xs text-gray-500 mt-1">طراحی و توسعه با ❤️ توسط تیم فنی مجموعه ایران-مجارستان</p>
            </div>
            <div className="flex items-center space-x-4 space-x-reverse">
              <Badge variant="outline" className="border-green-500 text-green-400">
                <div className="w-2 h-2 bg-green-500 rounded-full ml-2 animate-pulse"></div>
                آنلاین
              </Badge>
              <div className="flex space-x-2 space-x-reverse">
                <div className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center">
                  <Shield className="h-4 w-4 text-gray-400" />
                </div>
                <div className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center">
                  <Award className="h-4 w-4 text-gray-400" />
                </div>
                <div className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center">
                  <CheckCircle className="h-4 w-4 text-gray-400" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}