'use client';

import { useState, useEffect } from 'react';
import Swal from 'sweetalert2';
import { 
  User, 
  Mail, 
  GraduationCap, 
  Building2, 
  MapPin,
  Shield,
  Sparkles,
  Zap,
  Award,
  Users,
  Clock,
  Star,
  MessageSquare,
  CheckCircle,
  Target,
  Globe
} from 'lucide-react';

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

// -------------------------
// Types
// -------------------------
type CountryPhone = { id: number; name: string; phonecode: string };
type Option = { label: string; value: string };
type ApiErrorResponse = {
  success: boolean;
  message?: string;
  errors?: Array<{ field: string; message: string }>;
};

const ApplyOnline = () => {
  // -------------------------
  // Form State
  // -------------------------
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone_number: '',
    last_education: '',
    interested_country: '',
    apply_for: '',
    office_to_visit: '',
    application_type: 'online',
  });

  const [countriesWithPhone, setCountriesWithPhone] = useState<CountryPhone[]>([]);
  const [selectedPhoneCode, setSelectedPhoneCode] = useState('92');
  const [isLoading, setIsLoading] = useState(false);
  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
  const [apiErrors, setApiErrors] = useState<Array<{ field: string; message: string }>>([]);

  // -------------------------
  // Fetch Countries with Phone Codes
  // -------------------------
  useEffect(() => {
    const controller = new AbortController();
    const fetchCountriesWithPhone = async () => {
      try {
        const res = await fetch(`/api/frontend/countries-with-phone`, { signal: controller.signal });
        if (!res.ok) throw new Error(`Failed to fetch countries: ${res.status}`);
        const data = await res.json();
        setCountriesWithPhone(data.data || []);
      } catch (err: any) {
        if (err.name === 'AbortError') return;
        console.error('Error fetching countries with phone codes:', err);
        setCountriesWithPhone([]);
      }
    };
    fetchCountriesWithPhone();
    return () => controller.abort();
  }, []);

  // -------------------------
  // Handlers
  // -------------------------
  const handleChange = (e: any) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    
    if (fieldErrors[name]) {
      setFieldErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors[name];
        return newErrors;
      });
    }
    
    if (apiErrors.length > 0) {
      setApiErrors([]);
    }
  };

  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    
    if (fieldErrors[name]) {
      setFieldErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors[name];
        return newErrors;
      });
    }
  };

  const handlePhoneCodeChange = (e: any) => {
    setSelectedPhoneCode(e.target.value);
  };

  const handlePhoneInputChange = (e: any) => {
    const { value } = e.target;
    const cleanedValue = value.replace(/\D/g, '');
    setFormData(prev => ({ 
      ...prev, 
      phone_number: cleanedValue
    }));
  };

  const getDisplayPhoneNumber = () => {
    if (!formData.phone_number) return '';
    
    const phoneWithoutZero = formData.phone_number.replace(/^0+/, '');
    
    if (selectedPhoneCode === '92') {
      if (phoneWithoutZero.length <= 3) {
        return `${phoneWithoutZero}`;
      } else {
        return `${phoneWithoutZero.slice(0, 3)} ${phoneWithoutZero.slice(3)}`;
      }
    } else {
      return `${phoneWithoutZero}`;
    }
  };

  // -------------------------
  // Validation
  // -------------------------
  const validate = () => {
    const newErrors: Record<string, string> = {};
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    const requiredFields = [
      'name',
      'phone_number',
      'last_education',
      'interested_country',
      'office_to_visit',
      'apply_for',
    ];

    requiredFields.forEach((field) => {
      if (!formData[field as keyof typeof formData]?.toString().trim()) {
        newErrors[field] = 'This field is required';
      }
    });

    if (formData.email && !emailRegex.test(formData.email)) {
      newErrors.email = 'Enter a valid email';
    }

    const phoneDigits = formData.phone_number?.replace(/\D/g, '') || '';
    if (formData.phone_number && phoneDigits.length < 8) {
      newErrors.phone_number = 'Enter a valid phone number (at least 8 digits)';
    }

    setFieldErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // -------------------------
  // Error Display Functions
  // -------------------------
  const displaySweetAlertError = (errorData: ApiErrorResponse) => {
    if (errorData.errors && errorData.errors.length > 0) {
      const errorMessages = errorData.errors
        .map(error => `• ${error.field}: ${error.message}`)
        .join('\n');
      
      Swal.fire({
        title: 'Validation Error',
        html: `<div class="text-left"><p class="mb-3">Please correct the following errors:</p><pre class="text-sm text-red-600 whitespace-pre-wrap">${errorMessages}</pre></div>`,
        icon: 'error',
        confirmButtonText: 'OK',
        customClass: {
          popup: 'rounded-lg',
          confirmButton: 'bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded'
        }
      });
    } else if (errorData.message) {
      Swal.fire({
        title: 'Error',
        text: errorData.message,
        icon: 'error',
        confirmButtonText: 'OK'
      });
    } else {
      Swal.fire({
        title: 'Error',
        text: 'An unexpected error occurred',
        icon: 'error',
        confirmButtonText: 'OK'
      });
    }
  };

  const renderError = (field: string) => {
    if (fieldErrors[field]) {
      return <p className="text-red-500 text-sm mt-1">{fieldErrors[field]}</p>;
    }
    
    const apiError = apiErrors.find(error => error.field === field);
    if (apiError) {
      return <p className="text-red-500 text-sm mt-1">{apiError.message}</p>;
    }
    
    return null;
  };

  // -------------------------
  // Submit Handler
  // -------------------------
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;

    setIsLoading(true);
    setApiErrors([]);

    try {
      const payload = {
        ...formData,
        phonecode: `${selectedPhoneCode}`
      };

      const response = await fetch('/api/frontend/online-consultant', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      const data: ApiErrorResponse = await response.json();

      if (!response.ok) {
        if (data.errors) {
          setApiErrors(data.errors);
          displaySweetAlertError(data);
        } else {
          const errorMessage = data.message || 'An error occurred while submitting the form';
          Swal.fire({
            title: 'Error',
            text: errorMessage,
            icon: 'error',
            confirmButtonText: 'OK'
          });
        }
      } else {
        Swal.fire({
          title: 'Success!',
          text: data.message || 'Your application has been submitted successfully! Our consultant will contact you within 24 hours.',
          icon: 'success',
          confirmButtonText: 'OK',
          timer: 3000,
          background: '#ffffff',
          color: '#1f2937',
          customClass: {
            confirmButton: 'bg-linear-to-r from-teal-600 to-blue-500 text-white px-6 py-3 rounded-xl font-semibold'
          }
        });
        
        setFormData({
          name: '',
          email: '',
          phone_number: '',
          last_education: '',
          interested_country: '',
          apply_for: '',
          office_to_visit: '',
          application_type: 'online',
        });
        setSelectedPhoneCode('92');
      }
    } catch (err) {
      console.error('Error submitting form:', err);
      Swal.fire({
        title: 'Network Error',
        text: 'Submission failed. Please check your internet connection and try again.',
        icon: 'error',
        confirmButtonText: 'OK'
      });
    } finally {
      setIsLoading(false);
    }
  };

  // -------------------------
  // Options
  // -------------------------
  const phoneCodeOptions = countriesWithPhone.map(country => ({
    label: `${country.name} (+${country.phonecode})`,
    value: country.phonecode
  }));

  const educationOptions = ['Matric', 'Intermediate', 'Bachelor', 'Master'];
  const interestedCountryOptions = ['Italy', 'France', 'Turkey', 'China', 'Cyprus', 'Sweden', 'Finland', 'South Korea', 'UK'];
  const officeOptions = ['Lahore', 'Islamabad', 'Karachi', 'Faisalabad'];
  const applyForOptions = ['Study Visa', 'Visit Visa', 'IELTS'];

  const features = [
    {
      Icon: Shield,
      title: "Expert Guidance",
      description: "Our consultants have years of experience helping students find the right programs",
      color: "teal"
    },
    {
      Icon: Target,
      title: "High Success Rate",
      description: "95% visa success rate with personalized application support",
      color: "blue"
    },
    {
      Icon: Zap,
      title: "End-to-End Support",
      description: "Comprehensive support throughout your study abroad journey",
      color: "emerald"
    },
    {
      Icon: Clock,
      title: "Quick Response",
      description: "Get contacted within 24 hours of submitting your application",
      color: "amber"
    }
  ];

  const processSteps = [
    {
      title: "Initial Consultation",
      description: "Our consultant will contact you within 24 hours"
    },
    {
      title: "Profile Assessment",
      description: "We'll assess your profile and recommend suitable options"
    },
    {
      title: "Personalized Roadmap",
      description: "You'll receive a personalized roadmap for your application process"
    },
    {
      title: "Guidance & Support",
      description: "We'll guide you through documentation, tests, and visa process"
    }
  ];

  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(20)].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() * 100 + 50,
                height: Math.random() * 100 + 50,
                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 Online Application
            </div>

            <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-8 leading-tight">
              Apply{' '}
              <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                Online
              </span>{' '}
              <br />
              Start Your Study Abroad Journey
            </h1>

            <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
              Complete our online application form and let our expert consultants guide you 
              through every step of your study abroad journey.
            </p>
          </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 Apply With Us?
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Proven track record of helping students achieve their study abroad dreams
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => (
              <FeatureCard
                key={index}
                Icon={feature.Icon}
                title={feature.title}
                description={feature.description}
                color={feature.color}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Main Content - Form moved to left side */}
      <div className="pb-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-start">
            {/* Form Section - Now on Left Side */}
            <ModernCard className="p-8">
              <div className="flex items-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">
                  <MessageSquare className="w-8 h-8 text-teal-600" />
                </div>
                <div>
                  <h2 className="text-3xl font-bold text-gray-900">Fill in your details</h2>
                  <p className="text-gray-600 mt-2">
                    Complete the form below and our team will contact you within 24 hours
                  </p>
                </div>
              </div>

              <form onSubmit={handleSubmit} className="space-y-6">
                {/* Row 1: Name & Email */}
                <div className="grid md:grid-cols-2 gap-6">
                  {/* Name */}
                  <div>
                    <div className="relative">
                      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <User className="w-5 h-5" />
                      </div>
                      <input
                        type="text"
                        placeholder="Enter Your Full Name"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all"
                      />
                    </div>
                    {renderError('name')}
                  </div>
                  
                  {/* Email */}
                  <div>
                    <div className="relative">
                      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <Mail className="w-5 h-5" />
                      </div>
                      <input
                        type="email"
                        placeholder="Enter Your Email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all"
                      />
                    </div>
                    {renderError('email')}
                  </div>
                </div>

                {/* Row 2: Phone Number & Last Education */}
                <div className="grid md:grid-cols-2 gap-6">
                  {/* Phone Number */}
                  <div>
                    <PhoneInput
                      phoneCodeOptions={phoneCodeOptions}
                      selectedPhoneCode={selectedPhoneCode}
                      onPhoneCodeChange={handlePhoneCodeChange}
                      phoneNumber={formData.phone_number}
                      onPhoneNumberChange={handlePhoneInputChange}
                      getDisplayPhoneNumber={getDisplayPhoneNumber}
                      error={fieldErrors.phone_number || apiErrors.find(e => e.field === 'phone_number')?.message}
                    />
                  </div>

                  {/* Last Education */}
                  <div>
                    <div className="relative">
                      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <GraduationCap className="w-5 h-5" />
                      </div>
                      <select
                        name="last_education"
                        value={formData.last_education}
                        onChange={handleSelectChange}
                        className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all appearance-none bg-white"
                      >
                        <option value="">Select Last Education</option>
                        {educationOptions.map(option => (
                          <option key={option} value={option}>{option}</option>
                        ))}
                      </select>
                    </div>
                    {renderError('last_education')}
                  </div>
                </div>

                {/* Row 3: Country of Interest & Program Type */}
                <div className="grid md:grid-cols-2 gap-6">
                  {/* Interested Country */}
                  <div>
                    <div className="relative">
                      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <Globe className="w-5 h-5" />
                      </div>
                      <select
                        name="interested_country"
                        value={formData.interested_country}
                        onChange={handleSelectChange}
                        className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all appearance-none bg-white"
                      >
                        <option value="">Select Country of Interest</option>
                        {interestedCountryOptions.map(option => (
                          <option key={option} value={option}>{option}</option>
                        ))}
                      </select>
                    </div>
                    {renderError('interested_country')}
                  </div>

                  {/* Apply For */}
                  <div>
                    <div className="relative">
                      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <Building2 className="w-5 h-5" />
                      </div>
                      <select
                        name="apply_for"
                        value={formData.apply_for}
                        onChange={handleSelectChange}
                        className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all appearance-none bg-white"
                      >
                        <option value="">Select Program Type</option>
                        {applyForOptions.map(option => (
                          <option key={option} value={option}>{option}</option>
                        ))}
                      </select>
                    </div>
                    {renderError('apply_for')}
                  </div>
                </div>

                {/* Row 4: Office to Visit - 50% width */}
                <div className="md:w-1/2">
                  <div className="relative">
                    <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                      <MapPin className="w-5 h-5" />
                    </div>
                    <select
                      name="office_to_visit"
                      value={formData.office_to_visit}
                      onChange={handleSelectChange}
                      className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all appearance-none bg-white"
                    >
                      <option value="">Office To Visit</option>
                      {officeOptions.map(option => (
                        <option key={option} value={option}>{option}</option>
                      ))}
                    </select>
                  </div>
                  {renderError('office_to_visit')}
                </div>

                <button
                  type="submit"
                  disabled={isLoading}
                  className="w-full bg-linear-to-r from-teal-600 to-blue-500 text-white font-semibold py-4 px-6 rounded-xl hover:shadow-xl transition-all duration-300 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
                >
                  {isLoading ? (
                    <span className="flex items-center justify-center gap-2">
                      <svg className="animate-spin h-5 w-5 text-white" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                      Processing Your Application...
                    </span>
                  ) : (
                    "Submit Application"
                  )}
                </button>

                <p className="text-center text-gray-500 text-sm">
                  By submitting this form, you agree to our Privacy Policy and Terms of Service
                </p>
              </form>
            </ModernCard>

            {/* Right Content Section */}
            <div className="space-y-8">
              <ModernCard className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="p-3 rounded-xl bg-linear-to-r from-teal-50 to-blue-50 border border-teal-100">
                    <MessageSquare className="w-8 h-8 text-teal-600" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-gray-900">Online Application Process</h3>
                    <p className="text-gray-600 mt-2">
                      Please complete the form to initiate your study abroad application. 
                      Our team will review your information and contact you within 24 hours.
                    </p>
                  </div>
                </div>

                {/* Process Steps */}
                <div className="space-y-6 mt-8">
                  <h4 className="text-xl font-bold text-gray-900 mb-4">What happens after you apply?</h4>
                  {processSteps.map((step, index) => (
                    <div key={index} className="flex items-start gap-4 group">
                      <div className="shrink-0 w-10 h-10 bg-linear-to-r from-teal-50 to-blue-50 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                        <CheckCircle className="w-5 h-5 text-teal-600" />
                      </div>
                      <div>
                        <h5 className="font-semibold text-gray-900 mb-1">{step.title}</h5>
                        <p className="text-gray-600 text-sm">{step.description}</p>
                      </div>
                    </div>
                  ))}
                </div>

                {/* Stats */}
                <div className="mt-8 pt-6 border-t border-gray-100">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="text-center p-4 bg-gray-50 rounded-xl">
                      <div className="text-2xl font-bold text-teal-600">24</div>
                      <div className="text-sm text-gray-600">Hour Response</div>
                    </div>
                    <div className="text-center p-4 bg-gray-50 rounded-xl">
                      <div className="text-2xl font-bold text-blue-600">95%</div>
                      <div className="text-sm text-gray-600">Success Rate</div>
                    </div>
                  </div>
                </div>
              </ModernCard>

              {/* Additional Info Card */}
              <ModernCard className="p-8 bg-linear-to-r from-teal-50/50 to-blue-50/50 border border-teal-100">
                <div className="flex items-start gap-4">
                  <div className="p-3 rounded-xl bg-white border border-teal-200">
                    <Sparkles className="w-6 h-6 text-teal-600" />
                  </div>
                  <div>
                    <h4 className="text-xl font-bold text-gray-900 mb-3">
                      Personalized Guidance
                    </h4>
                    <p className="text-gray-700">
                      Each application receives individual attention from our expert consultants. 
                      We tailor our recommendations based on your academic background, interests, 
                      and career goals.
                    </p>
                    <div className="mt-4 flex items-center text-sm text-teal-600">
                      <CheckCircle className="w-4 h-4 mr-2" />
                      No application fee required
                    </div>
                  </div>
                </div>
              </ModernCard>

              {/* Contact Card */}
              <div className="bg-linear-to-r from-teal-600 to-blue-500 rounded-3xl p-8 text-center shadow-xl">
                <h3 className="text-2xl font-bold text-white mb-4">Need Immediate Help?</h3>
                <p className="text-white/80 mb-6">Contact us directly for instant assistance</p>
                <div className="flex flex-col sm:flex-row gap-4">
                  <a 
                    href="tel:+923330033235" 
                    className="flex-1 inline-flex items-center justify-center gap-2 bg-white/20 backdrop-blur-sm text-white font-semibold py-3 px-4 rounded-xl hover:bg-white/30 transition-all duration-300"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                    </svg>
                    Call Now
                  </a>
                  <a 
                    href="mailto:info@universitiespage.com" 
                    className="flex-1 inline-flex items-center justify-center gap-2 border-2 border-white/30 text-white font-semibold py-3 px-4 rounded-xl hover:bg-white/10 transition-all duration-300"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                    </svg>
                    Email Us
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="py-20 bg-linear-to-r from-teal-600 to-blue-500 relative overflow-hidden">
        
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm text-white px-6 py-3 rounded-full text-sm font-semibold mb-6">
            <Sparkles className="w-5 h-5" />
            Get Started Today
          </div>

          <h3 className="text-3xl md:text-4xl font-bold text-white mb-6">
            Your International Education Journey Starts Here
          </h3>

          <p className="text-xl text-white/80 mb-10 max-w-2xl mx-auto">
            Join thousands of successful students who have achieved their study abroad dreams with our guidance.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link 
              href="#application-form" 
              className="inline-flex items-center justify-center gap-2 bg-white text-teal-600 font-semibold px-8 py-4 rounded-xl hover:shadow-xl transition-all duration-300 transform hover:scale-105"
            >
              Apply Now
            </Link>
            <Link
              href="/contact-us" 
              className="inline-flex items-center justify-center gap-2 border-2 border-white text-white font-semibold px-8 py-4 rounded-xl hover:bg-white/10 transition-all duration-300 backdrop-blur-sm"
            >
              Schedule Consultation
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ApplyOnline;