"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,
  FileText,
  CheckCircle,
  Clock,
  Phone,
  TrendingUp,
  Award,
  Shield,
  Target,
  Globe,
  DollarSign,
  Calculator,
  ChevronDown,
  Menu,
  Mail,
} from "lucide-react"
import Link from "next/link"
import { FadeIn } from "@/components/animations/fade-in"
import { Counter } from "@/components/animations/counter"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function CompanyRegistrationPage() {
  const [selectedType, setSelectedType] = useState("llc")

  const companyTypes = [
    {
      id: "llc",
      title: "شرکت با مسئولیت محدود (Kft.)",
      minCapital: "۳,۰۰۰",
      description: "محبوب‌ترین نوع شرکت برای کسب‌وکارهای کوچک و متوسط",
      icon: Building2,
      advantages: ["مسئولیت محدود شرکا", "سرمایه کم مورد نیاز", "مدیریت ساده", "مزایای مالیاتی", "انعطاف‌پذیری بالا"],
      requirements: ["حداقل سرمایه ۳ میلیون فورینت", "حداقل یک شریک", "مدیر عامل مقیم مجارستان", "آدرس ثبت شده"],
      timeline: "۲-۴ هفته",
      cost: "۱,۵۰۰-۲,۵۰۰ یورو",
      taxRate: "۹-۱۹%",
    },
    {
      id: "plc",
      title: "شرکت سهامی عام (Nyrt.)",
      minCapital: "۲۰,۰۰۰",
      description: "برای شرکت‌های بزرگ با قابلیت عرضه عمومی سهام",
      icon: TrendingUp,
      advantages: [
        "امکان عرضه عمومی سهام",
        "جذب سرمایه آسان‌تر",
        "اعتبار بالا",
        "ساختار حاکمیتی قوی",
        "دسترسی به بازارهای مالی",
      ],
      requirements: ["حداقل سرمایه ۲۰ میلیون فورینت", "حداقل سه بنیان‌گذار", "هیئت مدیره", "حسابرس مستقل"],
      timeline: "۶-۱۲ هفته",
      cost: "۵,۰۰۰-۱۰,۰۰۰ یورو",
      taxRate: "۹%",
    },
    {
      id: "branch",
      title: "شعبه شرکت خارجی",
      minCapital: "۰",
      description: "برای شرکت‌های خارجی که می‌خواهند در مجارستان فعالیت کنند",
      icon: Globe,
      advantages: [
        "بدون نیاز به سرمایه",
        "راه‌اندازی سریع",
        "کنترل کامل شرکت مادر",
        "انتقال آسان سود",
        "مسئولیت شرکت مادر",
      ],
      requirements: ["شرکت مادر معتبر", "مدارک شرکت مادر", "نماینده قانونی", "آدرس ثبت شده"],
      timeline: "۱-۳ هفته",
      cost: "۱,۰۰۰-۲,۰۰۰ یورو",
      taxRate: "۹%",
    },
  ]

  const registrationSteps = [
    {
      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: "۱-۲ روز",
    },
  ]

  const services = [
    {
      title: "مشاوره انتخاب نوع شرکت",
      description: "راهنمایی برای انتخاب بهترین نوع شرکت",
      icon: Target,
      included: true,
    },
    {
      title: "رزرو نام شرکت",
      description: "بررسی و رزرو نام منحصر به فرد",
      icon: FileText,
      included: true,
    },
    {
      title: "تهیه اساسنامه",
      description: "نوشتن اساسنامه مطابق قوانین",
      icon: Shield,
      included: true,
    },
    {
      title: "افتتاح حساب بانکی",
      description: "کمک در افتتاح حساب شرکت",
      icon: DollarSign,
      included: true,
    },
    {
      title: "ثبت رسمی شرکت",
      description: "انجام کلیه مراحل ثبت",
      icon: Award,
      included: true,
    },
    {
      title: "خدمات حسابداری",
      description: "ارائه خدمات حسابداری ماهانه",
      icon: Calculator,
      included: false,
    },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-orange-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-orange-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="/services/company-registration" className="text-gray-700 hover:text-orange-600">
                ثبت شرکت
              </Link>
              <Link href="/services/virtual-office" className="text-gray-700 hover:text-orange-600">
                دفتر مجازی
              </Link>
              <Link href="/blog" className="text-gray-700 hover:text-orange-600">
                وبلاگ
              </Link>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="gap-2">
                    بیشتر <ChevronDown className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56" align="end" forceMount>
                  <DropdownMenuLabel>درباره ما</DropdownMenuLabel>
                  <DropdownMenuItem>
                    <Link href="/about" className="w-full h-full block">
                      تاریخچه
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Link href="/team" className="w-full h-full block">
                      تیم ما
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Link href="/contact" className="w-full h-full block">
                      تماس با ما
                    </Link>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </nav>
            <div className="md:hidden">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost">
                    <Menu className="h-5 w-5" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56" align="end" forceMount>
                  <DropdownMenuLabel>منو</DropdownMenuLabel>
                  <DropdownMenuItem>
                    <Link href="/services/company-registration" className="w-full h-full block">
                      ثبت شرکت
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Link href="/services/virtual-office" className="w-full h-full block">
                      دفتر مجازی
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Link href="/blog" className="w-full h-full block">
                      وبلاگ
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Link href="/about" className="w-full h-full block">
                      درباره ما
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Link href="/team" className="w-full h-full block">
                      تیم ما
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Link href="/contact" className="w-full h-full block">
                      تماس با ما
                    </Link>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-r from-orange-600 via-orange-700 to-orange-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-orange-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={2} />
                </div>
                <div className="text-orange-200">هفته ثبت</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={3000} />
                </div>
                <div className="text-orange-200">حداقل سرمایه (یورو)</div>
              </div>
              <div>
                <div className="text-3xl font-bold">
                  <Counter end={9} suffix="%" />
                </div>
                <div className="text-orange-200">نرخ مالیات</div>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Company Types */}
      <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-orange-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={selectedType} onValueChange={setSelectedType} className="max-w-6xl mx-auto">
            <TabsList className="grid w-full grid-cols-3 mb-8">
              {companyTypes.map((type) => (
                <TabsTrigger key={type.id} value={type.id} className="text-sm">
                  {type.title.split("(")[0]}
                </TabsTrigger>
              ))}
            </TabsList>

            {companyTypes.map((type) => (
              <TabsContent key={type.id} value={type.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-orange-100 rounded-2xl flex items-center justify-center">
                            <type.icon className="h-8 w-8 text-orange-600" />
                          </div>
                          <div>
                            <CardTitle className="text-xl">{type.title}</CardTitle>
                            <div className="text-2xl font-bold text-orange-600 mt-2">
                              {type.minCapital} <span className="text-lg text-gray-500">یورو</span>
                            </div>
                          </div>
                        </div>
                        <CardDescription className="text-lg">{type.description}</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-6">
                          <div>
                            <h4 className="font-semibold mb-3">مزایا</h4>
                            <div className="space-y-2">
                              {type.advantages.map((advantage, index) => (
                                <div key={index} className="flex items-center gap-2">
                                  <CheckCircle className="h-4 w-4 text-green-600" />
                                  <span className="text-sm">{advantage}</span>
                                </div>
                              ))}
                            </div>
                          </div>

                          <div className="grid grid-cols-3 gap-4 text-center">
                            <div className="p-3 bg-green-50 rounded-lg">
                              <Clock className="h-5 w-5 text-green-600 mx-auto mb-1" />
                              <div className="text-xs text-gray-600">زمان</div>
                              <div className="font-bold text-green-600 text-sm">{type.timeline}</div>
                            </div>
                            <div className="p-3 bg-blue-50 rounded-lg">
                              <DollarSign className="h-5 w-5 text-blue-600 mx-auto mb-1" />
                              <div className="text-xs text-gray-600">هزینه</div>
                              <div className="font-bold text-blue-600 text-sm">{type.cost}</div>
                            </div>
                            <div className="p-3 bg-purple-50 rounded-lg">
                              <Calculator className="h-5 w-5 text-purple-600 mx-auto mb-1" />
                              <div className="text-xs text-gray-600">مالیات</div>
                              <div className="font-bold text-purple-600 text-sm">{type.taxRate}</div>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                          <FileText className="h-6 w-6 text-orange-600" />
                          الزامات ثبت
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-4">
                          {type.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-orange-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-orange-50 to-yellow-50 rounded-lg">
                          <h4 className="font-semibold mb-2 flex items-center gap-2">
                            <Shield className="h-5 w-5 text-orange-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-orange-600 hover:bg-orange-700">شروع ثبت شرکت</Button>
                      </CardContent>
                    </Card>
                  </div>
                </FadeIn>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </section>

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

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

      {/* Services Included */}
      <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-orange-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-6">
            {services.map((service, index) => (
              <FadeIn key={index} delay={index * 0.1}>
                <Card
                  className={`hover:shadow-lg transition-shadow ${service.included ? "border-green-200" : "border-gray-200"}`}
                >
                  <CardContent className="p-6">
                    <div className="flex items-start gap-4">
                      <div
                        className={`w-12 h-12 rounded-xl flex items-center justify-center ${
                          service.included ? "bg-green-100" : "bg-gray-100"
                        }`}
                      >
                        <service.icon className={`h-6 w-6 ${service.included ? "text-green-600" : "text-gray-600"}`} />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-semibold">{service.title}</h3>
                          {service.included ? (
                            <CheckCircle className="h-4 w-4 text-green-600" />
                          ) : (
                            <Badge variant="outline" className="text-xs">
                              اختیاری
                            </Badge>
                          )}
                        </div>
                        <p className="text-sm text-gray-600">{service.description}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits 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-orange-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-6">
            {[
              {
                icon: Globe,
                title: "دسترسی به بازار اروپا",
                description: "فروش آزاد در ۲۷ کشور اتحادیه اروپا",
                color: "bg-blue-100 text-blue-600",
              },
              {
                icon: DollarSign,
                title: "نرخ مالیات پایین",
                description: "نرخ مالیات شرکت‌ها تنها ۹%",
                color: "bg-green-100 text-green-600",
              },
              {
                icon: Shield,
                title: "ثبات قانونی",
                description: "سیستم حقوقی پایدار و قابل اعتماد",
                color: "bg-purple-100 text-purple-600",
              },
              {
                icon: TrendingUp,
                title: "رشد اقتصادی",
                description: "اقتصاد رو به رشد و پایدار",
                color: "bg-orange-100 text-orange-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-lg 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-orange-600 to-orange-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-orange-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-orange-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-orange-600"
              >
                <Calculator 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/company-registration" 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">
                <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 text-center">
            <p className="text-sm text-gray-400">&copy; 2025 مجموعه ایران-مجارستان. تمامی حقوق محفوظ است.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}