"use client"; import React, { useState, useEffect } from "react"; import Link from "next/link"; import visaData from "../visa.json"; const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || ""; interface CountryDetailsClientProps { country: { id: number; name: string; icon: string; services: string[]; }; } export default function CountryDetailsClient({ country, }: CountryDetailsClientProps) { const [showBackToTop, setShowBackToTop] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // Get detailed data from visa.json const countryData = visaData.visaSystem.detailedView.activeCountry; const relatedCountries = visaData.visaSystem.detailedView.relatedCountries.map((c: any) => ({ ...c, icon: `${ASSET_URL}/${c.icon}`, })); const contactInfo = visaData.visaSystem.contactInfo; useEffect(() => { const handleScroll = () => setShowBackToTop(window.scrollY > 100); window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); const scrollToTop = () => window.scrollTo({ top: 0, behavior: "smooth" }); return ( <> {/* Back to Top */} {/* Header Top */}
{/* Header */}
logo
{/* Mobile Menu */} {isMobileMenuOpen && (
setIsMobileMenuOpen(false)} >
)} {/* Breadcrumb */}

{countryData.title}

{/* Country Details */}
{/* Main Content */}
{countryData.name}

{countryData.name}

{countryData.description}

{countryData.additionalInfo}

{countryData.tagline}
{/* Visa Types */}
{countryData.visaTypes.map((typeGroup: any, idx: number) => ( {typeGroup.items.map((item: any, itemIdx: number) => (
{item.title}

{item.description}

))} ))}
{/* Visa Process */}

USA Visa Process

    {countryData.visaProcess.steps.map((process: any) => (
  • {process.number}. {process.title} – {process.description}
    • ))}
{/* Gallery */}
{countryData.gallery.map((image: string, idx: number) => ( {`${countryData.name} ))}
{/* Visa Types List */}

Types of Visas

{countryData.visaCategories.steps.map( (subGroup: string[], groupIdx: number) => (
    {/* Map lần 2 để render từng chuỗi trong mảng con */} {subGroup.map((category: string, idx: number) => (
  • {category}
    • ))}
), )} {/* Service Options */}

Our {countryData.name} Visa Service Options

    {countryData.visaProcess.steps.map((process: any) => (
  • {process.number}. {process.title} – {process.description}
    • ))}
{/* Sidebar */}
{/* Related Countries */}
{relatedCountries.map((c: any) => (
{c.name}
{c.name}
›
))}
{/* Contact Box */}

Visa & Immigration

Need Help? Book Lab Visit

📞
✉️
📍
Location:

{contactInfo.location}

{/* Footer */} ); }