import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { db } from "@/lib/db";
import {
  ArrowRight, Star, CheckCircle2, Shield, Clock, FileText,
  GraduationCap, Briefcase, Plane, Building2, Users, Globe,
  BadgeCheck, PhoneCall, Mail, MapPin, Award, Headphones,
} from "lucide-react";
import VisaSlider, { type VisaSlideItem } from "@/components/visa/VisaSlider";
import VisaEnquiryForm from "@/components/visa/VisaEnquiryForm";

export const metadata: Metadata = { title: "Visa Assistance – KC Systems" };

/* ─── DATA ──────────────────────────────────────────────── */

const stats = [
  { value: "20,000+", label: "Applications Processed", icon: FileText, color: "text-navy-600 bg-navy-50" },
  { value: "97%", label: "Success Rate", icon: BadgeCheck, color: "text-emerald-600 bg-emerald-50" },
  { value: "50+", label: "Countries Covered", icon: Globe, color: "text-blue-600 bg-blue-50" },
  { value: "15+", label: "Years of Experience", icon: Award, color: "text-gold-600 bg-gold-50" },
];

const fallbackVisaTypes = [
  {
    iconKey: "graduation",
    label: "Student Visa",
    slug: "student-visa",
    desc: "Universities, colleges & language schools worldwide.",
    color: "bg-blue-50 text-blue-600 border-blue-100",
    badge: "Most Popular",
  },
  {
    iconKey: "briefcase",
    label: "Work Visa",
    slug: "work-visa",
    desc: "Skilled worker permits, employer sponsorship & more.",
    color: "bg-emerald-50 text-emerald-600 border-emerald-100",
    badge: null,
  },
  {
    iconKey: "plane",
    label: "Tourist Visa",
    slug: "tourist-visa",
    desc: "Holiday & leisure travel to 50+ destinations.",
    color: "bg-amber-50 text-amber-600 border-amber-100",
    badge: null,
  },
  {
    iconKey: "building",
    label: "Business Visa",
    slug: "business-visa",
    desc: "Business meetings, conferences & trade visits.",
    color: "bg-purple-50 text-purple-600 border-purple-100",
    badge: null,
  },
  {
    iconKey: "users",
    label: "Family / Spouse Visa",
    slug: "family-visa",
    desc: "Reunite with family or bring your partner abroad.",
    color: "bg-pink-50 text-pink-600 border-pink-100",
    badge: null,
  },
  {
    iconKey: "globe",
    label: "Permanent Residency",
    slug: "pr-visa",
    desc: "Start fresh with a permanent residency pathway.",
    color: "bg-indigo-50 text-indigo-600 border-indigo-100",
    badge: null,
  },
  {
    iconKey: "briefcase",
    label: "Holiday Working Visa",
    slug: "working-holiday",
    desc: "Work & travel simultaneously in eligible countries.",
    color: "bg-orange-50 text-orange-600 border-orange-100",
    badge: null,
  },
  {
    iconKey: "plane",
    label: "Transit Visa",
    slug: "transit-visa",
    desc: "Short-stay transit permits for connecting flights.",
    color: "bg-neutral-50 text-neutral-600 border-neutral-200",
    badge: null,
  },
];

function visaTypeIcon(key: string) {
  if (key === "graduation") return GraduationCap;
  if (key === "briefcase") return Briefcase;
  if (key === "plane") return Plane;
  if (key === "building") return Building2;
  if (key === "users") return Users;
  return Globe;
}

const countries = [
  {
    name: "Australia",
    flag: "🇦🇺",
    image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&q=80",
    visaTypes: ["Student", "Work", "Tourist", "PR"],
    slug: "australia",
  },
  {
    name: "United Kingdom",
    flag: "🇬🇧",
    image: "https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=500&q=80",
    visaTypes: ["Student", "Skilled Worker", "Tourist", "Family"],
    slug: "united-kingdom",
  },
  {
    name: "Canada",
    flag: "🇨🇦",
    image: "https://images.unsplash.com/photo-1517935706615-2717063c2225?w=500&q=80",
    visaTypes: ["Student", "Work Permit", "Express Entry", "Tourist"],
    slug: "canada",
  },
  {
    name: "Germany",
    flag: "🇩🇪",
    image: "https://images.unsplash.com/photo-1467269204594-9661b134dd2b?w=500&q=80",
    visaTypes: ["Student", "Job Seeker", "Work", "Business"],
    slug: "germany",
  },
  {
    name: "Japan",
    flag: "🇯🇵",
    image: "https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=500&q=80",
    visaTypes: ["Student", "Work", "Tourist", "Business"],
    slug: "japan",
  },
  {
    name: "United States",
    flag: "🇺🇸",
    image: "https://images.unsplash.com/photo-1508193638397-1c4234db14d8?w=500&q=80",
    visaTypes: ["Student (F-1)", "Work (H-1B)", "Tourist (B-2)", "Business"],
    slug: "united-states",
  },
  {
    name: "UAE",
    flag: "🇦🇪",
    image: "https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=500&q=80",
    visaTypes: ["Work", "Tourist", "Business", "Residence"],
    slug: "uae",
  },
  {
    name: "New Zealand",
    flag: "🇳🇿",
    image: "https://images.unsplash.com/photo-1507699622108-4be3abd695ad?w=500&q=80",
    visaTypes: ["Student", "Skilled Migrant", "Tourist", "Working Holiday"],
    slug: "new-zealand",
  },
];

const steps = [
  {
    step: "01",
    title: "Free Consultation",
    desc: "Submit your enquiry and our consultant will reach out within 24 hours for an initial assessment of your eligibility and best pathway.",
    icon: PhoneCall,
  },
  {
    step: "02",
    title: "Document Checklist",
    desc: "We provide a personalised document checklist based on your visa type and destination. Our team reviews everything for compliance.",
    icon: FileText,
  },
  {
    step: "03",
    title: "Application Submission",
    desc: "We prepare, translate (if needed), and submit your application to the relevant embassy or authority with precision.",
    icon: Mail,
  },
  {
    step: "04",
    title: "Visa Approved",
    desc: "Track your application in real time. Once approved, we guide you on what comes next — accommodation, flights, or orientation.",
    icon: CheckCircle2,
  },
];

const testimonials = [
  {
    name: "Nurul Ain Binti Hassan",
    role: "Student — University of Melbourne",
    country: "Australia 🇦🇺",
    visa: "Student Visa",
    avatar: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=200&q=80",
    rating: 5,
    text: "KC Systems made my student visa process so smooth. I was worried about my documents and previous refusal history, but their consultants handled everything professionally. Got my visa in 5 weeks!",
  },
  {
    name: "Khaled Al-Rashidi",
    role: "Software Engineer — London",
    country: "United Kingdom 🇬🇧",
    visa: "Skilled Worker Visa",
    avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&q=80",
    rating: 5,
    text: "The team guided me through every step of the UK Skilled Worker Visa. They knew exactly what documents were needed and even helped me understand the sponsorship process with my employer.",
  },
  {
    name: "Priya Subramaniam",
    role: "Researcher — University of Toronto",
    country: "Canada 🇨🇦",
    visa: "Study Permit",
    avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&q=80",
    rating: 5,
    text: "I had tried applying on my own twice before. KC Systems identified my mistakes and resubmitted a clean application. Received my Canadian study permit in just 3 weeks. Highly recommend!",
  },
  {
    name: "Faizal bin Mohd Noor",
    role: "Business Owner — Dubai",
    country: "UAE 🇦🇪",
    visa: "Business Visa",
    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&q=80",
    rating: 5,
    text: "We needed multiple business visas for our team attending a Dubai trade expo. KC Systems arranged everything within 10 days. Professional, efficient and fairly priced.",
  },
];

const faqs = [
  {
    q: "How long does the visa application process take?",
    a: "Processing times vary by country and visa type. Tourist visas can take 3–10 business days; student and work visas typically take 4–12 weeks. We'll give you an accurate timeline during consultation.",
  },
  {
    q: "Do you guarantee visa approval?",
    a: "No visa consultant can legally guarantee approval as the final decision rests with the embassy or immigration authority. However, our 97% success rate reflects our thoroughness in preparing applications.",
  },
  {
    q: "Can I apply if I have had a previous visa refusal?",
    a: "Yes. Previous refusals are not necessarily disqualifying. Our consultants specialise in refusal cases and will assess what went wrong and how to strengthen your new application.",
  },
  {
    q: "What documents do I typically need?",
    a: "Requirements vary by visa type. Common documents include a valid passport, passport-size photos, bank statements, acceptance letters (for student visas), employment letters, and travel insurance. We provide a personalised checklist.",
  },
  {
    q: "Is there a consultation fee?",
    a: "The initial consultation is free. Service fees apply once you engage us to handle your application — these are disclosed upfront with no hidden charges.",
  },
  {
    q: "Can I track my application after submission?",
    a: "Yes. Once your application is submitted, you receive a reference number. You can track your application status via our online tracker at /visa/track or through your dashboard if you have an account.",
  },
];

/* ─── PAGE ───────────────────────────────────────────────── */

export default async function VisaPage() {
  const [typesFromDb, slidesFromDb] = await Promise.all([
    db.visaType.findMany({ where: { isActive: true }, orderBy: [{ sortOrder: "asc" }, { createdAt: "desc" }] }),
    db.visaSlide.findMany({ where: { isActive: true }, orderBy: [{ sortOrder: "asc" }, { createdAt: "desc" }] }),
  ]);

  const visaTypes = typesFromDb.length
    ? typesFromDb.map((t) => ({
        iconKey: t.iconKey || "globe",
        label: t.name,
        slug: t.slug,
        desc: t.description || "Professional visa consultation and end-to-end application handling.",
        color: t.colorClass || "bg-neutral-50 text-neutral-600 border-neutral-200",
        badge: t.badge,
      }))
    : fallbackVisaTypes;

  const sliderSlides: VisaSlideItem[] | undefined = slidesFromDb.length
    ? slidesFromDb.map((s) => ({
        id: s.id,
        image: s.imageUrl,
        badge: s.badge || "Visa Services",
        badgeIcon: (s.badgeIcon as VisaSlideItem["badgeIcon"]) || "globe",
        title: s.title || "Global Visa Support",
        highlight: s.highlight || "Made Simple",
        description: s.description || s.subtitle || "Trusted visa guidance from consultation to approval.",
        cta: { label: s.ctaText || "Apply Now", href: s.ctaLink || "/visa/apply" },
        ctaSecondary: { label: s.ctaSecondaryText || "Learn More", href: s.ctaSecondaryLink || "/visa" },
        stats: [
          { label: s.stat1Label || "Success Rate", value: s.stat1Value || "97%" },
          { label: s.stat2Label || "Countries", value: s.stat2Value || "50+" },
          { label: s.stat3Label || "Applications", value: s.stat3Value || "20,000+" },
        ],
      }))
    : undefined;

  const formVisaTypes = visaTypes.map((v) => ({ id: v.slug, name: v.label, slug: v.slug }));

  return (
    <div className="min-h-screen bg-neutral-50">
      <VisaSlider slides={sliderSlides} />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-24 pt-14 pb-28">

        {/* ── Stats ─────────────────────────── */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {stats.map(({ value, label, icon: Icon, color }) => (
            <div key={label} className="bg-white border border-neutral-200 rounded-2xl p-5 flex items-center gap-4">
              <div className={`w-11 h-11 rounded-xl flex items-center justify-center shrink-0 ${color}`}>
                <Icon size={20} />
              </div>
              <div>
                <div className="text-xl font-bold text-navy-900">{value}</div>
                <div className="text-xs text-neutral-400">{label}</div>
              </div>
            </div>
          ))}
        </div>

        {/* ── Visa Types ────────────────────── */}
        <section>
          <div className="text-center mb-10">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-navy-50 text-navy-700 text-xs font-semibold rounded-full mb-3 border border-navy-100">
              <Globe size={11} /> All Visa Types
            </div>
            <h2 className="text-3xl font-bold text-navy-900">What Visa Do You Need?</h2>
            <p className="text-neutral-500 text-sm mt-2 max-w-lg mx-auto">
              Whether you&apos;re studying, working, travelling or relocating — we cover every type of visa application.
            </p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {visaTypes.map((type) => (
              <Link
                key={type.slug}
                href={`/visa/apply?type=${type.slug}`}
                className="group relative bg-white border border-neutral-200 rounded-2xl p-5 hover:shadow-lg hover:border-navy-200 transition-all"
              >
                {type.badge && (
                  <span className="absolute top-3 right-3 px-2 py-0.5 bg-gold-100 text-gold-700 text-[10px] font-bold rounded-full border border-gold-200">
                    {type.badge}
                  </span>
                )}
                <div className={`w-11 h-11 rounded-xl flex items-center justify-center mb-4 border ${type.color}`}>
                  {(() => {
                    const Icon = visaTypeIcon(type.iconKey);
                    return <Icon size={20} />;
                  })()}
                </div>
                <h3 className="font-semibold text-navy-800 mb-1 group-hover:text-navy-600">{type.label}</h3>
                <p className="text-xs text-neutral-500 leading-relaxed">{type.desc}</p>
                <div className="flex items-center gap-1 text-navy-600 text-xs font-medium mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
                  Apply now <ArrowRight size={12} />
                </div>
              </Link>
            ))}
          </div>
        </section>

        {/* ── Featured Countries ─────────────── */}
        <section>
          <div className="flex items-center justify-between mb-8">
            <div>
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-50 text-gold-700 text-xs font-semibold rounded-full mb-2 border border-gold-100">
                <MapPin size={11} /> Destinations
              </div>
              <h2 className="text-2xl font-bold text-navy-900">Popular Destinations</h2>
              <p className="text-neutral-500 text-sm mt-0.5">Choose your destination country to explore available visa types</p>
            </div>
            <Link href="/visa" className="hidden md:flex text-sm text-navy-700 hover:text-navy-900 font-medium items-center gap-1">
              All countries <ArrowRight size={14} />
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {countries.map((c) => (
              <Link
                key={c.slug}
                href={`/visa/${c.slug}`}
                className="group relative rounded-2xl overflow-hidden aspect-[4/3] cursor-pointer"
              >
                <Image
                  src={c.image}
                  alt={c.name}
                  fill
                  className="object-cover group-hover:scale-110 transition-transform duration-700"
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-navy-950/85 via-navy-900/30 to-transparent" />
                <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-xl">{c.flag}</span>
                    <span className="font-bold">{c.name}</span>
                  </div>
                  <div className="flex flex-wrap gap-1">
                    {c.visaTypes.map((v) => (
                      <span key={v} className="text-[10px] px-2 py-0.5 bg-white/15 text-white/80 rounded-full border border-white/20">
                        {v}
                      </span>
                    ))}
                  </div>
                </div>
                <div className="absolute top-3 right-3 w-8 h-8 bg-white/15 backdrop-blur-sm rounded-full flex items-center justify-center text-white border border-white/20 opacity-0 group-hover:opacity-100 transition-opacity">
                  <ArrowRight size={14} />
                </div>
              </Link>
            ))}
          </div>
        </section>

        {/* ── How It Works ──────────────────── */}
        <section className="bg-navy-900 rounded-3xl px-8 py-14">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-500/20 text-gold-300 text-xs font-semibold rounded-full mb-3 border border-gold-500/30">
              <CheckCircle2 size={11} /> Simple Process
            </div>
            <h2 className="text-2xl md:text-3xl font-bold text-white">How We Handle Your Visa</h2>
            <p className="text-white/60 text-sm mt-2 max-w-lg mx-auto">
              From enquiry to approval — a transparent, guided process with your consultant every step of the way.
            </p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {steps.map((step, i) => (
              <div key={step.step} className="relative">
                {i < steps.length - 1 && (
                  <div className="hidden lg:block absolute top-8 left-[calc(100%_-_12px)] w-full h-px bg-white/10 z-0" />
                )}
                <div className="relative z-10">
                  <div className="w-14 h-14 bg-navy-800 border border-navy-700 rounded-2xl flex items-center justify-center mb-4">
                    <step.icon size={22} className="text-gold-400" />
                  </div>
                  <div className="text-5xl font-bold text-white/5 leading-none mb-1">{step.step}</div>
                  <h3 className="font-semibold text-white mb-2">{step.title}</h3>
                  <p className="text-sm text-white/55 leading-relaxed">{step.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="flex justify-center mt-10">
            <Link
              href="#enquiry"
              className="inline-flex items-center gap-2 px-6 py-3 bg-gold-500 hover:bg-gold-600 text-white text-sm font-semibold rounded-xl transition-all shadow-lg shadow-gold-500/20"
            >
              Start My Application <ArrowRight size={15} />
            </Link>
          </div>
        </section>

        {/* ── Testimonials ──────────────────── */}
        <section>
          <div className="text-center mb-10">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-50 text-gold-700 text-xs font-semibold rounded-full mb-3 border border-gold-100">
              <Star size={11} className="fill-gold-500 text-gold-500" /> Client Stories
            </div>
            <h2 className="text-2xl md:text-3xl font-bold text-navy-900">Trusted by Thousands</h2>
            <p className="text-neutral-500 text-sm mt-2 max-w-lg mx-auto">
              Real clients. Real visas. Real results.
            </p>
          </div>
          <div className="grid sm:grid-cols-2 gap-5">
            {testimonials.map((t) => (
              <div key={t.name} className="bg-white border border-neutral-200 rounded-2xl p-6">
                {/* Stars */}
                <div className="flex gap-0.5 mb-4">
                  {Array.from({ length: t.rating }).map((_, i) => (
                    <Star key={i} size={14} className="fill-gold-400 text-gold-400" />
                  ))}
                </div>
                <p className="text-sm text-neutral-700 leading-relaxed mb-5">&ldquo;{t.text}&rdquo;</p>
                <div className="flex items-center gap-3 pt-4 border-t border-neutral-100">
                  <div className="relative w-10 h-10 rounded-full overflow-hidden shrink-0">
                    <Image src={t.avatar} alt={t.name} fill className="object-cover" sizes="40px" />
                  </div>
                  <div>
                    <div className="text-sm font-semibold text-navy-800">{t.name}</div>
                    <div className="text-xs text-neutral-400">{t.role}</div>
                  </div>
                  <div className="ml-auto text-right">
                    <div className="text-xs font-medium text-navy-700">{t.country}</div>
                    <div className="text-[10px] text-neutral-400">{t.visa}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* ── Trust Badges ──────────────────── */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { icon: Shield, label: "Fully Licensed", sub: "Registered immigration consultants" },
            { icon: Headphones, label: "24/7 Support", sub: "Always here when you need us" },
            { icon: Clock, label: "Fast Turnaround", sub: "Most applications within 5 days" },
            { icon: BadgeCheck, label: "97% Success Rate", sub: "Across all visa categories" },
          ].map(({ icon: Icon, label, sub }) => (
            <div key={label} className="bg-white border border-neutral-200 rounded-2xl p-5 flex items-center gap-4">
              <div className="w-10 h-10 bg-navy-50 rounded-xl flex items-center justify-center shrink-0">
                <Icon size={18} className="text-navy-600" />
              </div>
              <div>
                <div className="text-sm font-semibold text-navy-900">{label}</div>
                <div className="text-xs text-neutral-400">{sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* ── CTA + Enquiry Form ────────────── */}
        <section id="enquiry" className="scroll-mt-20">
          <div className="grid lg:grid-cols-5 gap-0 bg-white border border-neutral-200 rounded-3xl overflow-hidden shadow-sm">

            {/* Left — info panel */}
            <div className="lg:col-span-2 bg-navy-900 p-8 md:p-10 flex flex-col justify-between">
              <div>
                <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-500/20 text-gold-300 text-xs font-semibold rounded-full mb-6 border border-gold-500/30">
                  Free Consultation
                </div>
                <h2 className="text-2xl md:text-3xl font-bold text-white leading-snug mb-4">
                  Ready to Start Your <span className="text-gold-400">Visa Journey?</span>
                </h2>
                <p className="text-white/60 text-sm leading-relaxed mb-8">
                  Fill in your details and one of our experienced visa consultants will get back to you within 24 hours — no obligations, no hidden fees.
                </p>
                <ul className="space-y-3">
                  {[
                    "Free initial eligibility assessment",
                    "Personalised document checklist",
                    "End-to-end application management",
                    "Real-time application tracking",
                    "Previous refusal cases welcome",
                  ].map((item) => (
                    <li key={item} className="flex items-start gap-2.5 text-sm text-white/70">
                      <CheckCircle2 size={15} className="text-gold-400 shrink-0 mt-0.5" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="mt-10 pt-8 border-t border-white/10 space-y-3">
                <div className="flex items-center gap-3 text-sm text-white/50">
                  <PhoneCall size={14} className="text-gold-400 shrink-0" />
                  +60 3-1234 5678
                </div>
                <div className="flex items-center gap-3 text-sm text-white/50">
                  <Mail size={14} className="text-gold-400 shrink-0" />
                  visa@kcsystems.my
                </div>
                <div className="flex items-center gap-3 text-sm text-white/50">
                  <MapPin size={14} className="text-gold-400 shrink-0" />
                  Kuala Lumpur, Malaysia
                </div>
              </div>
            </div>

            {/* Right — form */}
            <div className="lg:col-span-3 p-8 md:p-10">
              <h3 className="text-lg font-bold text-navy-900 mb-1">Visa Enquiry Form</h3>
              <p className="text-neutral-500 text-sm mb-6">All fields marked * are required.</p>
              <VisaEnquiryForm visaTypes={formVisaTypes} />
            </div>
          </div>
        </section>

        {/* ── FAQ ───────────────────────────── */}
        <section>
          <div className="text-center mb-10">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-navy-50 text-navy-700 text-xs font-semibold rounded-full mb-3 border border-navy-100">
              FAQ
            </div>
            <h2 className="text-2xl font-bold text-navy-900">Frequently Asked Questions</h2>
          </div>
          <div className="max-w-3xl mx-auto grid gap-4">
            {faqs.map((faq) => (
              <div key={faq.q} className="bg-white border border-neutral-200 rounded-2xl p-6">
                <h3 className="font-semibold text-navy-800 mb-2 text-sm">{faq.q}</h3>
                <p className="text-sm text-neutral-500 leading-relaxed">{faq.a}</p>
              </div>
            ))}
          </div>
        </section>

        {/* ── Bottom CTA Banner ─────────────── */}
        <section className="relative bg-gradient-to-r from-navy-900 to-navy-800 rounded-3xl overflow-hidden py-14 px-8 text-center">
          <div className="absolute inset-0 opacity-10">
            <Image
              src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1200&q=60"
              alt=""
              fill
              className="object-cover"
              sizes="100vw"
            />
          </div>
          <div className="relative z-10">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-500/20 text-gold-300 text-xs font-semibold rounded-full mb-4 border border-gold-500/30">
              <Plane size={11} /> Your Journey Starts Here
            </div>
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-3">
              Don&apos;t Let Visa Paperwork Hold You Back
            </h2>
            <p className="text-white/60 text-sm max-w-lg mx-auto mb-8">
              Our experts have helped over 20,000 applicants reach their destination. Let us handle the complexity so you can focus on what matters.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Link
                href="#enquiry"
                className="inline-flex items-center gap-2 px-7 py-3 bg-gold-500 hover:bg-gold-600 text-white text-sm font-semibold rounded-xl transition-all shadow-lg shadow-gold-500/20"
              >
                Get Free Consultation <ArrowRight size={15} />
              </Link>
              <Link
                href="/visa/track"
                className="inline-flex items-center gap-2 px-7 py-3 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-xl border border-white/20 backdrop-blur-sm transition-all"
              >
                Track My Application
              </Link>
            </div>
          </div>
        </section>

      </div>
    </div>
  );
}