"use client";

import { useState } from "react";
import visaData from "./visa.json";

export default function VisaPage() {
  const [selectedVisaType, setSelectedVisaType] = useState<string | null>(null);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  const handleVisaTypeClick = (visaId: string) => {
    setSelectedVisaType(selectedVisaType === visaId ? null : visaId);
  };

  const toggleFaq = (index: number) => {
    setOpenFaq(openFaq === index ? null : index);
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-6xl mx-auto">
        {/* Hero Section */}
        <div className="text-center mb-16">
          <h1 className="text-5xl font-bold text-gray-900 mb-4">
            {visaData.hero.title}
          </h1>
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
            {visaData.hero.description}
          </p>

          {/* Stats */}
          <div className="grid md:grid-cols-3 gap-8 max-w-2xl mx-auto">
            {visaData.hero.stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-4xl font-bold text-blue-600 mb-2">
                  {stat.number}
                </div>
                <div className="text-gray-700">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Visa Types */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
            Các Loại Visa
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {visaData.visaTypes.map((visa) => (
              <div
                key={visa.id}
                className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
              >
                {/* Visa Header */}
                <div
                  className="p-6 cursor-pointer"
                  onClick={() => handleVisaTypeClick(visa.id)}
                >
                  <div className="flex items-center mb-4">
                    <span className="text-3xl mr-4">{visa.icon}</span>
                    <h3 className="text-xl font-semibold text-gray-900">
                      {visa.name}
                    </h3>
                  </div>
                  <p className="text-gray-700 mb-4">{visa.description}</p>

                  {/* Quick Stats */}
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="text-gray-500">Thời gian:</span>
                      <div className="font-medium">{visa.processingTime}</div>
                    </div>
                    <div>
                      <span className="text-gray-500">Tỷ lệ thành công:</span>
                      <div className="font-medium text-green-600">
                        {visa.successRate}
                      </div>
                    </div>
                  </div>
                </div>

                {/* Detailed Info */}
                {selectedVisaType === visa.id && (
                  <div className="border-t bg-gray-50 p-6">
                    {/* Features */}
                    <div className="mb-6">
                      <h4 className="font-semibold text-gray-900 mb-3">
                        Tính năng:
                      </h4>
                      <ul className="space-y-2">
                        {visa.features.map((feature, index) => (
                          <li
                            key={index}
                            className="flex items-start text-gray-700"
                          >
                            <span className="text-green-500 mr-2 mt-1">✓</span>
                            {feature}
                          </li>
                        ))}
                      </ul>
                    </div>

                    {/* Popular Countries */}
                    <div className="mb-6">
                      <h4 className="font-semibold text-gray-900 mb-3">
                        Quốc gia phổ biến:
                      </h4>
                      <div className="flex flex-wrap gap-2">
                        {visa.popularCountries.map((country, index) => (
                          <span
                            key={index}
                            className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm"
                          >
                            {country}
                          </span>
                        ))}
                      </div>
                    </div>

                    {/* CTA */}
                    <button className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
                      Tư vấn {visa.name}
                    </button>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Process */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
            Quy Trình Xin Visa
          </h2>
          <div className="relative">
            {/* Process Line */}
            <div className="hidden md:block absolute top-1/2 left-0 right-0 h-0.5 bg-blue-200 transform -translate-y-1/2"></div>

            <div className="grid md:grid-cols-5 gap-8">
              {visaData.process.map((step, index) => (
                <div key={step.step} className="relative text-center">
                  {/* Step Circle */}
                  <div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl mx-auto mb-4 relative z-10">
                    {step.icon}
                  </div>

                  {/* Step Number */}
                  <div className="absolute -top-2 -right-2 w-8 h-8 bg-blue-800 text-white rounded-full flex items-center justify-center text-sm font-bold">
                    {step.step}
                  </div>

                  <h3 className="font-semibold text-gray-900 mb-2">
                    {step.title}
                  </h3>
                  <p className="text-gray-700 text-sm">{step.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Why Choose Us */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
            Tại Sao Chọn Chúng Tôi?
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {visaData.whyChooseUs.map((reason, index) => (
              <div
                key={index}
                className="bg-white rounded-lg shadow-md p-6 text-center"
              >
                <div className="text-4xl mb-4">{reason.icon}</div>
                <h3 className="font-semibold text-gray-900 mb-2">
                  {reason.title}
                </h3>
                <p className="text-gray-700">{reason.description}</p>
              </div>
            ))}
          </div>
        </div>

        {/* FAQs */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
            Câu Hỏi Thường Gặp
          </h2>
          <div className="max-w-3xl mx-auto space-y-4">
            {visaData.faqs.map((faq, index) => (
              <div
                key={index}
                className="bg-white rounded-lg shadow-md overflow-hidden"
              >
                <button
                  className="w-full p-6 text-left hover:bg-gray-50 transition-colors"
                  onClick={() => toggleFaq(index)}
                >
                  <div className="flex items-center justify-between">
                    <h3 className="font-semibold text-gray-900">
                      {faq.question}
                    </h3>
                    <span className="text-gray-400">
                      {openFaq === index ? "−" : "+"}
                    </span>
                  </div>
                </button>
                {openFaq === index && (
                  <div className="px-6 pb-6">
                    <p className="text-gray-700">{faq.answer}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* CTA Section */}
        <div className="text-center bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 text-white">
          <h2 className="text-3xl font-bold mb-4">
            Sẵn Sàng Bắt Đầu Hành Trình?
          </h2>
          <p className="text-xl mb-6 text-blue-100">
            Liên hệ ngay để được tư vấn miễn phí và nhận báo giá tốt nhất
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-white text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors font-medium">
              Tư vấn miễn phí
            </button>
            <button className="bg-blue-800 text-white px-8 py-3 rounded-lg hover:bg-blue-900 transition-colors font-medium">
              Gọi ngay: 1900 1234
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}