'use client';

import { useState, useCallback } from 'react';
import { 
  Search, 
  User, 
  Mail, 
  Plane, 
  FileCheck, 
  CalendarCheck, 
  Shield, 
  Award,
  CheckCircle,
  Clock,
  MapPin,
  Sparkles,
  Zap,
  ChevronRight,
  Info,
  HelpCircle,
  Play,
  FileText,
  FileWarning,
  Download,
  Eye,
  X,
  FileUp,
  GraduationCap,
  FileSearch,
  BookOpen,
  Globe,
  Briefcase
} from 'lucide-react';
import { toast } from 'sonner';

// Import Shared Components
import ModernCard from '../../components/shared/ModernCard';
import StatCard from '../../components/shared/StatCard';
import FeatureCard from '../../components/shared/FeatureCard';
import CustomInput from '../../components/shared/CustomInput';
import Link from 'next/link';

// Types
interface ApplicationData {
  id: number;
  student_registration_initial_documents_assessment: string;
  student_registration_document_finalization: string;
  student_registration_application_submitted: string;
  student_registration_got_admission: string;
  student_registration_visa_applied: string;
  student_registration_visa_document_finalization: string;
  student_registration_case_closed: string;
  student_registration_interested_country: string;
  student_registration_interested_program: string;
  student_registration_name: string;
  student_registration_passport_number: string;
  missingDocuments: string[];
  student_documents: {
    id: number;
    student_document_type: string;
    student_document_provisional_type: string;
    student_document_actual_name: string;
    created_at: string;
    location: string;
  }[];
  [key: string]: any;
}

interface Step {
  key: string;
  label: string;
  icon: React.ReactNode;
  description: string;
}

const steps: Step[] = [
  { 
    key: 'student_registration_initial_documents_assessment', 
    label: 'Documents Assessment', 
    icon: <FileCheck className="text-white" size={20} />,
    description: 'Initial review of your academic documents and credentials'
  },
  { 
    key: 'student_registration_document_finalization', 
    label: 'Document Finalization', 
    icon: <FileText className="text-white" size={20} />,
    description: 'All required documents have been finalized and verified'
  },
  { 
    key: 'student_registration_application_submitted', 
    label: 'Application Submitted', 
    icon: <Shield className="text-white" size={20} />,
    description: 'Your application has been officially submitted to the institution'
  },
  { 
    key: 'student_registration_got_admission', 
    label: 'Admission Received', 
    icon: <CalendarCheck className="text-white" size={20} />,
    description: 'Congratulations! You have received your acceptance letter'
  },
  { 
    key: 'student_registration_visa_applied', 
    label: 'Visa Applied', 
    icon: <Globe className="text-white" size={20} />,
    description: 'Your student visa application has been submitted'
  },
  { 
    key: 'student_registration_visa_document_finalization', 
    label: 'Visa Finalization', 
    icon: <Globe className="text-white" size={20} />,
    description: 'Visa documents have been finalized and verified'
  },
  { 
    key: 'student_registration_case_closed', 
    label: 'Case Closed', 
    icon: <CheckCircle className="text-white" size={20} />,
    description: 'Your visa has been approved - ready for travel!'
  },
];

const TrackApplication = () => {
  const [name, setName] = useState('');
  const [passportNumber, setPassportNumber] = useState('');
  const [loading, setLoading] = useState(false);
  const [applicationData, setApplicationData] = useState<ApplicationData | null>(null);
  const [showDetailsModal, setShowDetailsModal] = useState(false);
  const [activeTab, setActiveTab] = useState<'profile' | 'documents' | 'missing'>('profile');

  // Input validation
  const validateInputs = useCallback(() => {
    if (!name.trim() || !passportNumber.trim()) {
      toast.error('Please enter both name and passport number');
      return false;
    }

    if (name.length < 2) {
      toast.error('Please enter a valid name');
      return false;
    }

    if (passportNumber.length < 4) {
      toast.error('Please enter a valid passport number');
      return false;
    }

    return true;
  }, [name, passportNumber]);

  // Secure API call with error handling
  const handleTrack = useCallback(async () => {
    if (!validateInputs()) return;

    setLoading(true);
    setApplicationData(null);

    try {
      const response = await fetch(
        `/api/frontend/track-application?name=${encodeURIComponent(name.trim())}&passportNumber=${encodeURIComponent(passportNumber.trim())}`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        }
      );

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || 'Failed to fetch application data');
      }

      if (data.success && data.data?.data) {
        setApplicationData(data.data.data);
        toast.success('Application found successfully!');
        setShowDetailsModal(true);
      } else {
        toast.error(data.message || 'Application not found. Please check your details.');
      }
    } catch (error: any) {
      console.error('Track error:', error);
      toast.error(error.message || 'Something went wrong while tracking. Please try again.');
    } finally {
      setLoading(false);
    }
  }, [name, passportNumber, validateInputs]);

  // Get current step index
  const getCurrentStepIndex = useCallback(() => {
    if (!applicationData) return -1;

    for (let i = steps.length - 1; i >= 0; i--) {
      if (applicationData[steps[i].key] === "on") {
        return i;
      }
    }
    return -1;
  }, [applicationData]);

  const currentStepIndex = getCurrentStepIndex();

  // Get status text
  const getStatusText = (status: string) => {
    return status === "on" ? "Completed" : status === "None" ? "In Progress" : "Pending";
  };

  // Get status color
  const getStatusColor = (status: string) => {
    if (status === "on") return "text-green-600 bg-green-100";
    if (status === "None") return "text-blue-600 bg-blue-100";
    return "text-gray-600 bg-gray-100";
  };

  // Get document icon based on type
  const getDocumentIcon = (type: string) => {
    switch(type) {
      case 'passport':
        return <Briefcase className="w-5 h-5" />;
      case 'contract':
        return <FileText className="w-5 h-5" />;
      case 'matric_trans':
      case 'intermediate_trans':
      case 'bachelor_trans':
        return <GraduationCap className="w-5 h-5" />;
      case 'cvType':
        return <User className="w-5 h-5" />;
      case 'EnglishCertificateType':
        return <Globe className="w-5 h-5" />;
      default:
        return <FileText className="w-5 h-5" />;
    }
  };

  // Get document type name
  const getDocumentTypeName = (type: string) => {
    const typeMap: Record<string, string> = {
      'passport': 'Passport',
      'contract': 'Contract',
      'matric_trans': 'Matric Transcript',
      'intermediate_trans': 'Intermediate Transcript',
      'bachelor_trans': 'Bachelor Transcript',
      'cvType': 'CV/Resume',
      'EnglishCertificateType': 'English Certificate'
    };
    return typeMap[type] || type;
  };

  // Format date
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  };

  // Build full document URL
  const getDocumentUrl = (attachment: string) => {
    if (!attachment) return '#';
    return `https://unipage-storage.s3.eu-north-1.amazonaws.com/${attachment}`;
  };

  return (
    <div className="min-h-screen bg-linear-to-b from-gray-50 to-white">
      {/* Hero Section */}
      <div className="relative">
        <div className="absolute inset-0 bg-linear-to-r from-teal-50/50 to-blue-50/50"></div>
        
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
          {[...Array(15)].map((_, i) => (
            <div
              key={i}
              className="absolute rounded-full bg-linear-to-r from-teal-200/20 to-blue-200/20 animate-float"
              style={{
                width: Math.random() * 80 + 40,
                height: Math.random() * 80 + 40,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 5}s`,
                animationDuration: `${Math.random() * 10 + 10}s`
              }}
            />
          ))}
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
          <div className="text-center">
            <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-8 animate-pulse">
              <Shield className="w-5 h-5" />
              Secure Application Tracking
            </div>

            <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-8 leading-tight">
              Track Your{' '}
              <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                Application Status
              </span>
            </h1>

            <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
              Monitor your journey to studying abroad with our real-time application tracking system
            </p>

            {/* Search Form Card */}
            <ModernCard className="max-w-3xl mx-auto p-8">
              <div className="flex flex-col items-center text-center gap-4 mb-8">
                <div className="p-3 rounded-xl bg-linear-to-r from-teal-50 to-blue-50 border border-teal-100">
                  <Search className="w-8 h-8 text-teal-600" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold text-gray-900">Find Your Application</h2>
                  <p className="text-gray-600 mt-2">
                    Enter your details to track your application progress
                  </p>
                </div>
              </div>

              <form onSubmit={(e) => {
                e.preventDefault();
                handleTrack();
              }}>
                <div className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-6">
                    <CustomInput 
                      Icon={User}
                      placeholder="Enter Your Full Name" 
                      name="name" 
                      value={name} 
                      onChange={(e) => setName(e.target.value)}
                    />
                    
                    <CustomInput 
                      Icon={Mail}
                      placeholder="Enter Your Passport Number" 
                      name="passportNumber"
                      value={passportNumber} 
                      onChange={(e) => setPassportNumber(e.target.value)}
                    />
                  </div>

                  <button
                    type="submit"
                    disabled={loading}
                    className="w-full group/btn cursor-pointer bg-linear-to-r from-teal-600 to-blue-500 text-white font-semibold py-5 px-8 rounded-2xl hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-3 disabled:opacity-50 transform hover:-translate-y-1"
                  >
                    {loading ? (
                      <>
                        <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                        <span>Tracking...</span>
                      </>
                    ) : (
                      <>
                        <Sparkles className="w-5 h-5" />
                        <span>Track Application</span>
                        <ChevronRight className="w-5 h-5 transition-transform duration-300 group-hover/btn:translate-x-1" />
                      </>
                    )}
                  </button>

                  <div className="flex items-center justify-center text-sm text-gray-500">
                    <Shield className="w-4 h-4 text-teal-600 mr-2" />
                    <span>Your information is secure and encrypted</span>
                  </div>
                </div>
              </form>
            </ModernCard>
          </div>
        </div>
      </div>

      {/* Application Details Modal */}
      {showDetailsModal && applicationData && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
          <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-6xl max-h-[90vh] overflow-hidden">
            {/* Header */}
            <div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-8 py-6">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-bold text-gray-900">
                    Application Details
                  </h2>
                  <p className="text-gray-600 text-sm mt-1">
                    ID: {applicationData.id} • Last Updated: {formatDate(new Date().toISOString())}
                  </p>
                </div>
                <button
                  onClick={() => setShowDetailsModal(false)}
                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                >
                  <X className="w-6 h-6 text-gray-600" />
                </button>
              </div>

              {/* Tabs */}
              <div className="flex space-x-2 mt-6 border-b border-gray-200">
                <button
                  onClick={() => setActiveTab('profile')}
                  className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-colors ${activeTab === 'profile' 
                    ? 'text-teal-600 border-b-2 border-teal-600 bg-teal-50' 
                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
                  }`}
                >
                  <div className="flex items-center gap-2">
                    <User className="w-4 h-4" />
                    Profile & Status
                  </div>
                </button>
                <button
                  onClick={() => setActiveTab('documents')}
                  className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-colors ${activeTab === 'documents' 
                    ? 'text-teal-600 border-b-2 border-teal-600 bg-teal-50' 
                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
                  }`}
                >
                  <div className="flex items-center gap-2">
                    <FileText className="w-4 h-4" />
                    Documents ({applicationData.student_documents?.length || 0})
                  </div>
                </button>
                {applicationData.missingDocuments && applicationData.missingDocuments.length > 0 && (
                  <button
                    onClick={() => setActiveTab('missing')}
                    className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-colors ${activeTab === 'missing' 
                      ? 'text-red-600 border-b-2 border-red-600 bg-red-50' 
                      : 'text-red-500 hover:text-red-700 hover:bg-red-50'
                    }`}
                  >
                    <div className="flex items-center gap-2">
                      <FileWarning className="w-4 h-4" />
                      Missing ({applicationData.missingDocuments.length})
                    </div>
                  </button>
                )}
              </div>
            </div>

            {/* Content */}
            <div className="overflow-y-auto max-h-[calc(90vh-140px)] px-8 py-6">
              {activeTab === 'profile' && (
                <div className="space-y-8">
                  {/* Profile Summary */}
                  <ModernCard className="p-6">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      <div className="bg-linear-to-r from-teal-600 to-blue-500 rounded-2xl p-6 text-white text-center transform hover:-translate-y-1 transition-all duration-300">
                        <div className="bg-white/20 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4 backdrop-blur-sm">
                          <User className="text-xl" />
                        </div>
                        <h3 className="font-semibold mb-2">Applicant Name</h3>
                        <p className="text-white/90 font-medium text-lg">
                          {applicationData.student_registration_name || 'N/A'}
                        </p>
                      </div>
                      
                      <div className="bg-linear-to-r from-emerald-500 to-teal-500 rounded-2xl p-6 text-white text-center transform hover:-translate-y-1 transition-all duration-300">
                        <div className="bg-white/20 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4 backdrop-blur-sm">
                          <Globe className="text-xl" />
                        </div>
                        <h3 className="font-semibold mb-2">Destination Country</h3>
                        <p className="text-white/90 font-medium text-lg">
                          {applicationData.student_registration_interested_country || '—'}
                        </p>
                      </div>
                      
                      <div className="bg-linear-to-r from-blue-600 to-indigo-500 rounded-2xl p-6 text-white text-center transform hover:-translate-y-1 transition-all duration-300">
                        <div className="bg-white/20 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4 backdrop-blur-sm">
                          <Briefcase className="text-xl" />
                        </div>
                        <h3 className="font-semibold mb-2">Passport Number</h3>
                        <p className="text-white/90 font-medium text-lg">
                          {applicationData.student_registration_passport_number || 'N/A'}
                        </p>
                      </div>
                    </div>
                  </ModernCard>

                  {/* Program Information */}
                  <ModernCard className="p-6">
                    <h3 className="text-xl font-bold text-gray-900 mb-4">Program Details</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="bg-gray-50 rounded-xl p-4">
                        <div className="flex items-center gap-3 mb-2">
                          <GraduationCap className="w-5 h-5 text-teal-600" />
                          <span className="font-medium text-gray-700">Program Level</span>
                        </div>
                        <p className="text-gray-900 font-semibold text-lg">
                          {applicationData.student_registration_interested_program || 'Not specified'}
                        </p>
                      </div>
                      <div className="bg-gray-50 rounded-xl p-4">
                        <div className="flex items-center gap-3 mb-2">
                          <BookOpen className="w-5 h-5 text-teal-600" />
                          <span className="font-medium text-gray-700">Country</span>
                        </div>
                        <p className="text-gray-900 font-semibold text-lg">
                          {applicationData.student_registration_interested_country || 'Not specified'}
                        </p>
                      </div>
                    </div>
                  </ModernCard>

                  {/* Application Status Progress */}
                  <ModernCard className="p-6">
                    <div className="mb-6">
                      <h3 className="text-xl font-bold text-gray-900 mb-2">Application Progress</h3>
                      <div className="w-full bg-gray-200 rounded-full h-3">
                        <div 
                          className="bg-linear-to-r from-teal-600 to-blue-500 h-3 rounded-full transition-all duration-1000"
                          style={{ 
                            width: `${Math.round(((currentStepIndex + 1) / steps.length) * 100)}%` 
                          }}
                        />
                      </div>
                      <div className="flex justify-between mt-2 text-sm text-gray-600">
                        <span>Start</span>
                        <span className="font-semibold">
                          {Math.round(((currentStepIndex + 1) / steps.length) * 100)}% Complete
                        </span>
                        <span>Finish</span>
                      </div>
                    </div>

                    {/* Status Steps */}
                    <div className="space-y-4">
                      {steps.map((step, idx) => {
                        const status = applicationData[step.key];
                        const isCompleted = status === "on";
                        const isCurrent = idx === currentStepIndex;
                        
                        return (
                          <div key={step.key} className="flex items-start gap-4 p-4 bg-gray-50 rounded-xl">
                            <div className={`w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 ${
                              isCompleted 
                                ? 'bg-linear-to-r from-teal-600 to-blue-500 text-white' 
                                : isCurrent
                                ? 'bg-linear-to-r from-emerald-500 to-teal-500 text-white'
                                : 'bg-gray-300 text-gray-600'
                            }`}>
                              {isCompleted ? <CheckCircle className="w-6 h-6" /> : step.icon}
                            </div>
                            <div className="flex-1">
                              <div className="flex justify-between items-start mb-1">
                                <h4 className="font-semibold text-gray-900">{step.label}</h4>
                                <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(status)}`}>
                                  {getStatusText(status)}
                                </span>
                              </div>
                              <p className="text-sm text-gray-600">{step.description}</p>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </ModernCard>
                </div>
              )}

              {activeTab === 'documents' && (
                <div className="space-y-6">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-xl font-bold text-gray-900">Uploaded Documents</h3>
                    <span className="text-sm text-gray-600">
                      Total: {applicationData.student_documents?.length || 0} documents
                    </span>
                  </div>

                  {applicationData.student_documents && applicationData.student_documents.length > 0 ? (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                      {applicationData.student_documents.map((doc) => (
                        <div key={doc.id} className="bg-white border border-gray-200 rounded-xl p-4 hover:border-teal-300 hover:shadow-lg transition-all duration-300">
                          <div className="flex items-start gap-3 mb-3">
                            <div className="p-2 bg-linear-to-r from-teal-50 to-blue-50 rounded-lg">
                              {getDocumentIcon(doc.student_document_type)}
                            </div>
                            <div className="flex-1">
                              <h4 className="font-semibold text-gray-900 text-sm">
                                {getDocumentTypeName(doc.student_document_type)}
                              </h4>
                              <p className="text-xs text-gray-500 truncate" title={doc.student_document_actual_name}>
                                {doc.student_document_actual_name}
                              </p>
                            </div>
                          </div>
                          
                          <div className="flex items-center justify-between text-xs text-gray-500 mb-4">
                            <span>{formatDate(doc.created_at)}</span>
                            <span className="px-2 py-1 bg-gray-100 rounded">
                              {doc.location}
                            </span>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-12">
                      <FileSearch className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                      <h4 className="text-lg font-semibold text-gray-900 mb-2">No documents uploaded</h4>
                      <p className="text-gray-600">No documents have been uploaded for this application yet.</p>
                    </div>
                  )}
                </div>
              )}

              {activeTab === 'missing' && (
                <div className="space-y-6">
                  <div className="flex items-center gap-3 mb-6">
                    <div className="p-2 bg-red-100 rounded-lg">
                      <FileWarning className="w-6 h-6 text-red-600" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-gray-900">Missing Documents</h3>
                      <p className="text-gray-600">These documents are required to proceed with your application</p>
                    </div>
                  </div>

                  {applicationData.missingDocuments && applicationData.missingDocuments.length > 0 ? (
                    <div className="space-y-4">
                      {applicationData.missingDocuments.map((doc, index) => (
                        <div key={index} className="flex items-start gap-4 p-4 bg-red-50 border border-red-200 rounded-xl">
                          <div className="p-2 bg-white rounded-lg">
                            <FileWarning className="w-5 h-5 text-red-500" />
                          </div>
                          <div className="flex-1">
                            <p className="text-gray-900 font-medium">{doc}</p>
                            <p className="text-sm text-gray-600 mt-1">
                              Please upload this document to continue with your application process.
                            </p>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-12">
                      <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
                      <h4 className="text-lg font-semibold text-gray-900 mb-2">All Documents Complete</h4>
                      <p className="text-gray-600">Great news! All required documents have been submitted.</p>
                    </div>
                  )}

                  <div className="bg-linear-to-r from-teal-50 to-blue-50 border border-teal-200 rounded-xl p-6">
                    <div className="flex items-start gap-4">
                      <Info className="w-6 h-6 text-teal-600 flex-shrink-0 mt-1" />
                      <div>
                        <h4 className="font-semibold text-teal-900 mb-2">Need Help?</h4>
                        <p className="text-teal-800 mb-4">
                          If you need assistance with document requirements or have questions about the upload process, 
                          please contact our support team.
                        </p>
                        <Link href={"/contact-us"}><button className="px-4 py-2 bg-linear-to-r from-teal-600 to-blue-500 text-white font-medium rounded-lg hover:shadow-md transition-all duration-300">
                          Contact Support
                        </button></Link>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Features Section */}
      <div className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              Why Use Our Tracking System
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Stay informed and in control of your study abroad journey
            </p>
          </div>
          
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <FeatureCard
              Icon={Clock}
              title="24/7 Access"
              description="Track your application anytime, anywhere"
              color="teal"
            />

            <FeatureCard
              Icon={Zap}
              title="Real-time Updates"
              description="Instant notifications for every status change"
              color="blue"
            />

            <FeatureCard
              Icon={Shield}
              title="Secure & Private"
              description="Your information is encrypted and protected"
              color="emerald"
            />

            <FeatureCard
              Icon={Sparkles}
              title="Expert Support"
              description="Dedicated team to assist you"
              color="amber"
            />
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="pb-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-linear-to-r from-teal-600 to-blue-500 rounded-3xl p-12 text-center shadow-2xl">
            <h3 className="text-3xl md:text-4xl font-bold text-white mb-6">
              Need Help With Your Application?
            </h3>
            <p className="text-white/90 text-lg md:text-xl mb-8 max-w-2xl mx-auto leading-relaxed">
              Our expert advisors are here to guide you through every step of the process.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <button className="px-8 py-4 bg-white cursor-pointer text-teal-700 font-semibold rounded-2xl hover:bg-gray-100 transition-all duration-300 transform hover:-translate-y-1 shadow-lg text-lg">
                Contact Support
              </button>
              <button className="px-8 py-4 bg-transparent border-2 cursor-pointer border-white text-white font-semibold rounded-2xl hover:bg-white hover:text-teal-700 transition-all duration-300 transform hover:-translate-y-1 text-lg">
                Schedule Call
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TrackApplication;