"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Building2,
  Users,
  Settings,
  Home,
  Briefcase,
  GraduationCap,
  ArrowRight,
  CheckCircle,
  Clock,
  Phone,
  Mail,
  Shield,
  Award,
  TrendingUp,
  ChevronDown,
  ChevronRight,
  Menu,
  Globe,
  Target,
} 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"

const services = [
  {
    id: "migration",
    title: "خدمات مهاجرتی",
    icon: Users,
    color: "bg-blue-600",
    description: "مشاوره جامع و پیگیری تمامی مراحل اخذ ویزا و اقامت",
    features: ["مهاجرت کاری", "مهاجرت خانوادگی", "مهاجرت سرمایه‌گذاری (گلدن ویزا)", "سایر روش‌های مهاجرتی"],
    process: ["ارزیابی اولیه پرونده", "تهیه و تکمیل مدارک", "ارسال درخواست", "پیگیری و دریافت ویزا"],
    price: "از ۵۰۰ یورو",
    duration: "۳-۱۲ ماه",
    successRate: "95%",
  },
  {
    id: "post-arrival",
    title: "خدمات پس از ورود",
    icon: Settings,
    color: "bg-green-600",
    description: "حمایت و راهنمایی کامل پس از ورود به مجارستان",
    features: ["افتتاح حساب بانکی", "ثبت نام مدارس و دانشگاه‌ها", "دریافت کارت اقامت", "خدمات درمانی و بیمه"],
    process: ["استقبال در فرودگاه", "کمک در اسکان موقت", "انجام امور اداری", "راهنمایی زندگی روزمره"],
    price: "از ۳۰۰ یورو",
    duration: "۱-۳ ماه",
    successRate: "98%",
  },
  {
    id: "real-estate",
    title: "خرید ملک",
    icon: Home,
    color: "bg-purple-600",
    description: "مشاوره و همراهی در تمامی مراحل خرید ملک",
    features: ["یافتن ملک مناسب", "مشاوره حقوقی و مالی", "انجام امور اداری خرید", "مدیریت ملک پس از خرید"],
    process: ["تعیین نیازها و بودجه", "جستجو و بازدید املاک", "مذاکره و قرارداد", "انتقال سند و تحویل"],
    price: "۲٪ از قیمت ملک",
    duration: "۱-۶ ماه",
    successRate: "92%",
  },
  {
    id: "company-registration",
    title: "ثبت شرکت",
    icon: Building2,
    color: "bg-orange-600",
    description: "راهنمایی کامل برای ثبت شرکت در مجارستان",
    features: ["مشاوره انتخاب نوع شرکت", "تهیه مدارک و ثبت رسمی", "خدمات حسابداری و مالیاتی", "مشاوره کسب و کار"],
    process: ["مشاوره نوع شرکت", "تهیه مدارک ثبت", "ثبت رسمی شرکت", "راه‌اندازی فعالیت"],
    price: "از ۱۰۰۰ یورو",
    duration: "۲-۴ هفته",
    successRate: "100%",
  },
  {
    id: "machinery",
    title: "تامین ماشین‌آلات",
    icon: Briefcase,
    color: "bg-red-600",
    description: "ارائه خدمات تامین و واردات ماشین‌آلات صنعتی",
    features: ["مشاوره فنی و انتخاب", "انجام امور خرید و حمل", "ترخیص گمرکی", "نصب و راه‌اندازی"],
    process: ["بررسی نیازها", "انتخاب تامین‌کننده", "خرید و حمل و نقل", "تحویل و راه‌اندازی"],
    price: "بر اساس پروژه",
    duration: "۲-۸ ماه",
    successRate: "90%",
  },
  {
    id: "education",
    title: "مهاجرت تحصیلی",
    icon: GraduationCap,
    color: "bg-indigo-600",
    description: "راهنمایی کامل برای تحصیل در دانشگاه‌های مجارستان",
    features: ["انتخاب رشته و دانشگاه", "اخذ پذیرش تحصیلی", "دریافت ویزای دانشجویی", "خدمات اسکان دانشجویی"],
    process: ["مشاوره انتخاب رشته", "آماده‌سازی مدارک", "درخواست پذیرش", "اخذ ویزا و سفر"],
    price: "از ۸۰۰ یورو",
    duration: "۴-۸ ماه",
    successRate: "94%",
  },
]

export default function ServicesPage() {
  const [selectedService, setSelectedService] = useState(services[0])

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-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-blue-600" />
              <h1 className="text-2xl font-bold text-gray-800">مجموعه ایران-مجارستان</h1>
            </Link>
            <nav className="hidden md:flex items-center space-x-6 space-x-reverse">
              <Link href="/" className="text-gray-600 hover:text-blue-600 transition-colors">
                صفحه اصلی
              </Link>
              <Link href="/services" className="text-gray-600 hover:text-blue-600 transition-colors">
                خدمات ما
              </Link>
              <Link href="/about" className="text-gray-600 hover:text-blue-600 transition-colors">
                درباره ما
              </Link>
              <Link href="/blog" className="text-gray-600 hover:text-blue-600 transition-colors">
                وبلاگ
              </Link>
              <Link href="/contact" className="text-gray-600 hover:text-blue-600 transition-colors">
                تماس با ما
              </Link>
            </nav>
            <div className="hidden md:flex items-center space-x-4 space-x-reverse">
              <Button variant="outline">
                <Globe className="w-4 h-4 ml-2" />
                فارسی
                <ChevronDown className="w-4 h-4 mr-2" />
              </Button>
              <Link href="/contact">
                <Button>درخواست مشاوره</Button>
              </Link>
            </div>

            <Sheet>
              <SheetTrigger asChild>
                <Button variant="outline" className="md:hidden">
                  <Menu className="w-5 h-5" />
                </Button>
              </SheetTrigger>
              <SheetContent className="sm:max-w-sm">
                <SheetHeader>
                  <SheetTitle>
                    <Link href="/" className="flex items-center space-x-3 space-x-reverse">
                      <Building2 className="h-8 w-8 text-blue-600" />
                      <h1 className="text-2xl font-bold text-gray-800">مجموعه ایران-مجارستان</h1>
                    </Link>
                  </SheetTitle>
                  <SheetDescription>
                    Explore our services and get in touch to start your journey with us.
                  </SheetDescription>
                </SheetHeader>
                <div className="grid gap-4 py-4">
                  <Link
                    href="/"
                    className="flex items-center space-x-2 space-x-reverse text-gray-600 hover:text-blue-600 transition-colors"
                  >
                    <Home className="w-4 h-4" />
                    <span>صفحه اصلی</span>
                  </Link>
                  <Link
                    href="/services"
                    className="flex items-center space-x-2 space-x-reverse text-gray-600 hover:text-blue-600 transition-colors"
                  >
                    <Target className="w-4 h-4" />
                    <span>خدمات ما</span>
                  </Link>
                  <Link
                    href="/about"
                    className="flex items-center space-x-2 space-x-reverse text-gray-600 hover:text-blue-600 transition-colors"
                  >
                    <Users className="w-4 h-4" />
                    <span>درباره ما</span>
                  </Link>
                  <Link
                    href="/blog"
                    className="flex items-center space-x-2 space-x-reverse text-gray-600 hover:text-blue-600 transition-colors"
                  >
                    <Award className="w-4 h-4" />
                    <span>وبلاگ</span>
                  </Link>
                  <Link
                    href="/contact"
                    className="flex items-center space-x-2 space-x-reverse text-gray-600 hover:text-blue-600 transition-colors"
                  >
                    <Mail className="w-4 h-4" />
                    <span>تماس با ما</span>
                  </Link>
                  <Button variant="outline" className="w-full justify-start space-x-2 space-x-reverse">
                    <Globe className="w-4 h-4" />
                    <span>فارسی</span>
                    <ChevronRight className="w-4 h-4" />
                  </Button>
                  <Link href="/contact">
                    <Button className="w-full justify-center">درخواست مشاوره</Button>
                  </Link>
                </div>
              </SheetContent>
            </Sheet>
          </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={6} />
                </div>
                <div className="text-blue-200">خدمت تخصصی</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={500} suffix="+" />
                </div>
                <div className="text-blue-200">مشتری موفق</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={95} 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 lg:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <FadeIn key={service.id} delay={index * 0.1}>
                <Card className="hover:shadow-xl transition-all duration-300 hover:-translate-y-2 cursor-pointer group">
                  <CardHeader>
                    <div
                      className={`w-16 h-16 ${service.color} rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}
                    >
                      <service.icon className="h-8 w-8 text-white" />
                    </div>
                    <CardTitle className="text-xl">{service.title}</CardTitle>
                    <CardDescription className="text-gray-600">{service.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3 mb-6">
                      {service.features.slice(0, 3).map((feature) => (
                        <div key={feature} className="flex items-center gap-2">
                          <CheckCircle className="h-4 w-4 text-green-600" />
                          <span className="text-sm text-gray-700">{feature}</span>
                        </div>
                      ))}
                    </div>
                    <div className="flex justify-between items-center mb-4">
                      <div className="text-center">
                        <div className="text-sm text-gray-500">قیمت</div>
                        <div className="font-semibold text-blue-600">{service.price}</div>
                      </div>
                      <div className="text-center">
                        <div className="text-sm text-gray-500">مدت زمان</div>
                        <div className="font-semibold">{service.duration}</div>
                      </div>
                      <div className="text-center">
                        <div className="text-sm text-gray-500">موفقیت</div>
                        <div className="font-semibold text-green-600">{service.successRate}</div>
                      </div>
                    </div>
                    <Button className="w-full" onClick={() => setSelectedService(service)}>
                      جزئیات بیشتر
                      <ArrowRight className="mr-2 h-4 w-4" />
                    </Button>
                  </CardContent>
                </Card>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Service Details */}
      <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"></div>
            </div>
          </FadeIn>

          <div className="max-w-6xl mx-auto">
            <Tabs
              value={selectedService.id}
              onValueChange={(value) => {
                const service = services.find((s) => s.id === value)
                if (service) setSelectedService(service)
              }}
            >
              <TabsList className="grid w-full grid-cols-2 lg:grid-cols-6 mb-8">
                {services.map((service) => (
                  <TabsTrigger key={service.id} value={service.id} className="text-xs lg:text-sm">
                    {service.title}
                  </TabsTrigger>
                ))}
              </TabsList>

              {services.map((service) => (
                <TabsContent key={service.id} value={service.id}>
                  <FadeIn>
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                      {/* Service Info */}
                      <Card>
                        <CardHeader>
                          <div className="flex items-center gap-4 mb-4">
                            <div className={`w-16 h-16 ${service.color} rounded-lg flex items-center justify-center`}>
                              <service.icon className="h-8 w-8 text-white" />
                            </div>
                            <div>
                              <CardTitle className="text-2xl">{service.title}</CardTitle>
                              <CardDescription className="text-lg">{service.description}</CardDescription>
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-6">
                            <div>
                              <h4 className="font-semibold mb-3 flex items-center gap-2">
                                <CheckCircle className="h-5 w-5 text-green-600" />
                                ویژگی‌های خدمت
                              </h4>
                              <div className="grid grid-cols-1 gap-2">
                                {service.features.map((feature) => (
                                  <div key={feature} className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                                    <CheckCircle className="h-4 w-4 text-green-600" />
                                    <span className="text-sm">{feature}</span>
                                  </div>
                                ))}
                              </div>
                            </div>

                            <div className="grid grid-cols-3 gap-4 text-center">
                              <div className="p-4 bg-blue-50 rounded-lg">
                                <TrendingUp 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">{service.successRate}</div>
                              </div>
                              <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">{service.duration}</div>
                              </div>
                              <div className="p-4 bg-purple-50 rounded-lg">
                                <Award className="h-6 w-6 text-purple-600 mx-auto mb-2" />
                                <div className="text-sm text-gray-600">قیمت</div>
                                <div className="font-bold text-purple-600">{service.price}</div>
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>

                      {/* Process */}
                      <Card>
                        <CardHeader>
                          <CardTitle className="flex items-center gap-2">
                            <Settings className="h-6 w-6 text-blue-600" />
                            فرآیند انجام کار
                          </CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-4">
                            {service.process.map((step, index) => (
                              <div key={step} className="flex items-start gap-4">
                                <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold">
                                  {index + 1}
                                </div>
                                <div className="flex-1">
                                  <p className="font-medium">{step}</p>
                                  <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
                                    <div
                                      className="bg-blue-600 h-2 rounded-full transition-all duration-1000"
                                      style={{ width: `${((index + 1) / service.process.length) * 100}%` }}
                                    ></div>
                                  </div>
                                </div>
                              </div>
                            ))}
                          </div>

                          <div className="mt-8 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg">
                            <h4 className="font-semibold mb-2 flex items-center gap-2">
                              <Shield className="h-5 w-5 text-blue-600" />
                              تضمین کیفیت
                            </h4>
                            <p className="text-sm text-gray-700">
                              تمامی خدمات ما با ضمانت کیفیت و پشتیبانی ۲۴ ساعته ارائه می‌شود. در صورت عدم رضایت، هزینه
                              شما بازگردانده خواهد شد.
                            </p>
                          </div>

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

      {/* Why Choose Us */}
      <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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <FadeIn delay={0.1}>
              <div className="text-center">
                <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Award className="h-10 w-10 text-blue-600" />
                </div>
                <h3 className="text-xl font-semibold mb-2">تجربه ۷ ساله</h3>
                <p className="text-gray-600">بیش از ۷ سال تجربه موفق در زمینه مهاجرت</p>
              </div>
            </FadeIn>

            <FadeIn delay={0.2}>
              <div className="text-center">
                <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Users className="h-10 w-10 text-green-600" />
                </div>
                <h3 className="text-xl font-semibold mb-2">تیم متخصص</h3>
                <p className="text-gray-600">کارشناسان مجرب در ایران و مجارستان</p>
              </div>
            </FadeIn>

            <FadeIn delay={0.3}>
              <div className="text-center">
                <div className="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Shield className="h-10 w-10 text-purple-600" />
                </div>
                <h3 className="text-xl font-semibold mb-2">ضمانت کیفیت</h3>
                <p className="text-gray-600">تضمین کیفیت خدمات و بازگشت وجه</p>
              </div>
            </FadeIn>

            <FadeIn delay={0.4}>
              <div className="text-center">
                <div className="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Clock className="h-10 w-10 text-orange-600" />
                </div>
                <h3 className="text-xl font-semibold mb-2">پشتیبانی ۲۴/۷</h3>
                <p className="text-gray-600">پشتیبانی مداوم در تمام مراحل</p>
              </div>
            </FadeIn>
          </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"
              >
                <Mail className="mr-2 h-5 w-5" />
                درخواست مشاوره
              </Button>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white">
        <div className="container mx-auto px-4 py-12">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div>
              <h3 className="text-lg font-semibold mb-4">مجموعه ایران-مجارستان</h3>
              <p className="text-gray-400">
                ما با تیمی مجرب از مشاوران و کارشناسان، شما را در تمامی مراحل مهاجرت، سرمایه‌گذاری و زندگی در مجارستان
                یاری می‌کنیم.
              </p>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">خدمات ما</h3>
              <ul className="text-gray-400 space-y-2">
                <li>
                  <Link href="/services/migration" className="hover:text-blue-300 transition-colors">
                    مهاجرت
                  </Link>
                </li>
                <li>
                  <Link href="/services/investment" className="hover:text-blue-300 transition-colors">
                    سرمایه‌گذاری
                  </Link>
                </li>
                <li>
                  <Link href="/services/education" className="hover:text-blue-300 transition-colors">
                    تحصیل
                  </Link>
                </li>
                <li>
                  <Link href="/services/real-estate" className="hover:text-blue-300 transition-colors">
                    خرید ملک
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">لینک‌های مفید</h3>
              <ul className="text-gray-400 space-y-2">
                <li>
                  <Link href="/about" className="hover:text-blue-300 transition-colors">
                    درباره ما
                  </Link>
                </li>
                <li>
                  <Link href="/blog" className="hover:text-blue-300 transition-colors">
                    وبلاگ
                  </Link>
                </li>
                <li>
                  <Link href="/contact" className="hover:text-blue-300 transition-colors">
                    تماس با ما
                  </Link>
                </li>
                <li>
                  <Link href="/terms" className="hover:text-blue-300 transition-colors">
                    شرایط و قوانین
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">تماس با ما</h3>
              <p className="text-gray-400">
                <Phone className="inline-block w-4 h-4 ml-1" />
                +36 30 123 4567
              </p>
              <p className="text-gray-400">
                <Mail className="inline-block w-4 h-4 ml-1" />
                info@example.com
              </p>
              <p className="text-gray-400">
                <Building2 className="inline-block w-4 h-4 ml-1" />
                Budapest, Hungary
              </p>
            </div>
          </div>
          <div className="border-t border-gray-700 mt-8 py-4 text-center">
            <p className="text-gray-400">&copy; 2025 مجموعه ایران-مجارستان. تمامی حقوق محفوظ است.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}