'use client';

import React, { useState } from 'react';
import Swal from 'sweetalert2';
import Image from 'next/image';
import Link from 'next/link';
import { 
  Shield,
  Sparkles,
  Zap,
  Award,
  Users,
  Clock,
  Star,
  MessageSquare,
  CheckCircle,
  Phone,
  Mail,
  MapPin,
  Globe,
  Building2,
  ChevronRight,
  ChevronDown,
  BookOpen,
  GraduationCap,
  Target,
  Heart,
  Facebook,
  Linkedin,
  Instagram,
  Twitter,
  Youtube
} from 'lucide-react';

// Custom Components
import Heading from "../../components/atoms/Heading";
import Paragraph from "../../components/atoms/Paragraph";
import Container from "../../components/atoms/Container";

// Import Shared Components
import ModernCard from "../../components/shared/ModernCard";
import FeatureCard from "../../components/shared/FeatureCard";

const offices = [
  {
    city: "Lahore Office",
    phones: ['+92 333 0033235', '+92 311 4998280', '+92 310 3162004'],
    email: "info@universitiespage.com",
    address: "Universities Page, 2nd Floor Faisal Bank, Raja Market, Garden Town, Lahore, Pakistan",
    image: "/assets/la.png",
    hours: "Mon - Sat: 9:30 AM - 6:30 PM"
  },
  {
    city: "Islamabad Office",
    phones: ['+92 317 0174573', '+92 310 3172004', '+92 334 9990308'],
    email: "Info@universitiespage.com",
    address: "Universities Page, Punjab market, Venus Plaza, 1st Floor, Office No. 1, Sector G13/4, Islamabad",
    image: "/assets/is.png",
    hours: "Mon - Sat: 9:30 AM - 6:30 PM"
  },
  {
    city: "Karachi Office",
    phones: ['+92 310 6225408', '+92 310 6225430', '+92 310 6225410'],
    email: "Info@universitiespage.com",
    address: "Office # 401, 4th floor of Bank Islami, 98C, street number 11, DHA Phase 2 EXT, KARACHI, Sindh",
    image: "/assets/ka.png",
    hours: "Mon - Sat: 9:30 AM - 6:30 PM"
  },
  {
    city: "Faisalabad Office",
    phones: ['+92 310 6225428', '+92 310 4262934', '+92 310 6225412'],
    email: "info@universitiespage.com",
    address: "Block, 1st Floor,of Segal Motors, C, Block C People Colony No 1, Faisalabad, 38000",
    image: "/assets/la.png",
    hours: "Mon - Sat: 9:30 AM - 6:30 PM"
  }
];

// Social links with proper icons
const socialLinks = [
  { 
    icon: <Facebook className="w-4 h-4" />, 
    url: "https://www.facebook.com/universitiespagelahore", 
    label: "Facebook", 
    color: "hover:bg-blue-600 hover:text-white"
  },
  { 
    icon: <Linkedin className="w-4 h-4" />, 
    url: "https://linkedin.com/in/universities-page-4728301b5", 
    label: "LinkedIn", 
    color: "hover:bg-blue-800 hover:text-white"
  },
  { 
    icon: <Instagram className="w-4 h-4" />, 
    url: "https://www.instagram.com/universitiespage_official/", 
    label: "Instagram", 
    color: "hover:bg-gradient-to-r hover:from-purple-600 hover:via-pink-600 hover:to-orange-500 hover:text-white"
  },
  { 
    icon: <Twitter className="w-4 h-4" />, 
    url: "https://twitter.com/UniversitiesPa1", 
    label: "Twitter", 
    color: "hover:bg-blue-400 hover:text-white"
  },
  { 
    icon: <Youtube className="w-4 h-4" />, 
    url: "https://youtube.com/@universitiespage", 
    label: "YouTube", 
    color: "hover:bg-red-600 hover:text-white"
  },
];

const faqItems = [
  {
    question: "How quickly do you respond to inquiries?",
    answer: "We typically respond to all inquiries within 24 hours during business days. For urgent matters, please call our office directly for immediate assistance."
  },
  {
    question: "Do I need to book an appointment before visiting?",
    answer: "While walk-ins are welcome, we recommend scheduling an appointment to ensure that a consultant is available to assist you without waiting. You can book an appointment through our website or by calling our office."
  },
  {
    question: "What documents should I bring to my consultation?",
    answer: "Please bring your academic transcripts, passport, any language test results (IELTS, TOEFL, etc.), and letters of recommendation if available. This will help us provide the most accurate guidance for your educational journey."
  },
  {
    question: "Do you provide virtual consultation services?",
    answer: "Yes, we offer comprehensive virtual consultations via video call, phone, or email to accommodate students from all locations. Schedule your virtual session through our contact form."
  }
];

const features = [
  {
    Icon: Clock,
    title: "24/7 Support",
    description: "Round-the-clock assistance for all your queries and concerns",
    color: "teal"
  },
  {
    Icon: Shield,
    title: "Expert Guidance",
    description: "Professional advice from experienced education consultants",
    color: "blue"
  },
  {
    Icon: CheckCircle,
    title: "Quick Response",
    description: "Get responses to your inquiries within 24 hours",
    color: "emerald"
  },
  {
    Icon: Users,
    title: "Nationwide Presence",
    description: "Multiple offices across Pakistan for your convenience",
    color: "amber"
  }
];

interface ContactForm {
  user_name: string;
  user_email: string;
  phone_number: string;
  office_location: string;
  message: string;
}

const ContactSection = () => {
  const [form, setForm] = useState<ContactForm>({
    user_name: '',
    user_email: '',
    phone_number: '',
    office_location: '',
    message: '',
  });

  const [errors, setErrors] = useState<Partial<ContactForm>>({});
  const [isLoading, setIsLoading] = useState(false);
  const [activeFaq, setActiveFaq] = useState<number | null>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
    setErrors(prev => ({ ...prev, [name]: '' }));
  };

  const validate = () => {
    const newErrors: Partial<ContactForm> = {};
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const cleanedPhone = form.phone_number.replace(/[\s()-]/g, '');
    const internationalPhoneRegex = /^\+?[1-9]\d{6,15}$/;

    if (!form.user_name.trim()) newErrors.user_name = "Name is required";
    if (!form.user_email.trim()) newErrors.user_email = "Email is required";
    else if (!emailRegex.test(form.user_email)) newErrors.user_email = "Invalid email format";

    if (!form.phone_number.trim()) newErrors.phone_number = "Phone number is required";
    else if (!internationalPhoneRegex.test(cleanedPhone))
      newErrors.phone_number = "Invalid phone number format";

    if (!form.office_location.trim()) newErrors.office_location = "Office location is required";
    if (!form.message.trim()) newErrors.message = "Message is required";

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

  const toggleFaq = (index: number) => {
    setActiveFaq(activeFaq === index ? null : index);
  };

  const renderError = (field: keyof ContactForm) =>
    errors[field] ? <p className="text-red-500 text-sm mt-1">{errors[field]}</p> : null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;
    
    setIsLoading(true);

    try {
      const res = await fetch('/api/frontend/contact-us', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });

      const data = await res.json();

      if (data.success) {
        Swal.fire({
          title: 'Success!',
          text: 'Your message has been sent! We 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'
          }
        });
        setForm({
          user_name: '',
          user_email: '',
          phone_number: '',
          office_location: '',
          message: '',
        });
      } else {
        Swal.fire({
          title: 'Error',
          text: data.message || "Please try again later.",
          icon: 'error',
          confirmButtonText: 'OK'
        });
      }
    } catch (error) {
      Swal.fire({
        title: 'Network Error',
        text: 'Something went wrong. Please try again.',
        icon: 'error',
        confirmButtonText: 'OK'
      });
    } finally {
      setIsLoading(false);
    }
  };

  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">
              <MessageSquare className="w-5 h-5" />
              We are Here to Help You Succeed
            </div>

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

            <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
              Ready to start your educational journey? Our expert consultants are here to guide you 
              through every step. Contact us today and lets build your future together.
            </p>
          </div>
        </div>
      </div>

      {/* Contact Info Cards */}
      <div className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 -mt-20 relative z-20">
            {[
              {
                icon: <Phone className="w-6 h-6" />,
                title: "Call Us",
                description: "Speak directly with our consultants",
                gradient: "from-teal-600 to-blue-500"
              },
              {
                icon: <Mail className="w-6 h-6" />,
                title: "Email Us",
                description: "Send us an email anytime",
                gradient: "from-teal-600 to-blue-500"
              },
              {
                icon: <MapPin className="w-6 h-6" />,
                title: "Visit Us",
                description: "Meet us at our offices nationwide",
                gradient: "from-teal-600 to-blue-500"
              }
            ].map((item, index) => (
              <ModernCard key={index} className="p-8 text-center hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
                <div className={`w-16 h-16 bg-linear-to-r ${item.gradient} rounded-full flex items-center justify-center mx-auto mb-6 text-white`}>
                  {item.icon}
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-3">{item.title}</h3>
                <p className="text-gray-600">{item.description}</p>
              </ModernCard>
            ))}
          </div>
        </div>
      </div>

      {/* Features Section */}
      <div className="py-20 bg-linear-to-br from-gray-50 to-blue-50">
        <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 Contact Us?
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Experience the difference with our comprehensive support system
            </p>
          </div>
          
          <div className="grid 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 Grid */}
      <div className="py-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">
            {/* Contact Form */}
            <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">Send Us a Message</h2>
                  <p className="text-gray-600 mt-2">
                    Fill out the form below and our team will get back to you within 24 hours
                  </p>
                </div>
              </div>
              
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <div className="relative">
                      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                      </div>
                      <input
                        type="text"
                        name="user_name"
                        value={form.user_name}
                        onChange={handleChange}
                        placeholder="Your Full Name"
                        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('user_name')}
                  </div>
                  
                  <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"
                        name="user_email"
                        value={form.user_email}
                        onChange={handleChange}
                        placeholder="your.email@example.com"
                        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('user_email')}
                  </div>
                  
                  <div>
                    <div className="relative">
                      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <Phone className="w-5 h-5" />
                      </div>
                      <input
                        type="tel"
                        name="phone_number"
                        value={form.phone_number}
                        onChange={handleChange}
                        placeholder="+92 300 1234567"
                        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('phone_number')}
                  </div>
                  
                  <div>
                    <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_location"
                        value={form.office_location}
                        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 appearance-none bg-white"
                      >
                        <option value="">Select Office Location</option>
                        <option value="Lahore Office">Lahore Office</option>
                        <option value="Islamabad Office">Islamabad Office</option>
                        <option value="Karachi Office">Karachi Office</option>
                        <option value="Faisalabad Office">Faisalabad Office</option>
                      </select>
                    </div>
                    {renderError('office_location')}
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-3">
                    Your Message
                  </label>
                  <textarea
                    name="message"
                    value={form.message}
                    onChange={handleChange}
                    placeholder="Tell us about your educational goals and how we can help you..."
                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all h-32 resize-none"
                  />
                  {renderError('message')}
                </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>
                      Sending Message...
                    </span>
                  ) : (
                    <span className="flex items-center justify-center gap-2">
                      Send Message
                      <ChevronRight className="w-5 h-5" />
                    </span>
                  )}
                </button>
              </form>
            </ModernCard>

            {/* FAQ 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">
                    <svg className="w-8 h-8 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                  </div>
                  <div>
                    <h2 className="text-3xl font-bold text-gray-900">Frequently Asked Questions</h2>
                    <p className="text-gray-600 mt-2">
                      Find quick answers to common questions
                    </p>
                  </div>
                </div>
                
                <div className="space-y-4">
                  {faqItems.map((faq, index) => (
                    <div key={index} className="border border-gray-200 rounded-xl overflow-hidden">
                      <button 
                        className="flex justify-between items-center w-full p-4 text-left font-medium text-gray-900 hover:bg-gray-50 transition-colors"
                        onClick={() => toggleFaq(index)}
                      >
                        <span className="text-lg">{faq.question}</span>
                        <ChevronDown className={`w-5 h-5 transition-transform duration-300 ${activeFaq === index ? 'rotate-180' : ''}`} />
                      </button>
                      <div className={`px-4 transition-all duration-300 ${activeFaq === index ? 'pb-4' : 'max-h-0 overflow-hidden'}`}>
                        <p className="text-gray-600 leading-relaxed">
                          {faq.answer}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </ModernCard>

              {/* Quick Contact Card - Buttons in one row */}
              <ModernCard className="bg-linear-to-r from-teal-600 to-blue-500 text-white overflow-hidden">
                <div className="p-8">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="p-3 rounded-xl bg-white/20 backdrop-blur-sm">
                      <Phone className="w-6 h-6" />
                    </div>
                    <div>
                      <h3 className="text-2xl font-bold">Need Immediate Assistance?</h3>
                      <p className="text-white/80 mt-1">Contact us directly for instant help</p>
                    </div>
                  </div>
                  
                  {/* Buttons in one row */}
                  <div className="flex flex-row gap-4 mb-6">
                    <Link 
                      href="tel:+923330033235" 
                      className="flex-1 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"
                    >
                      <Phone className="w-4 h-4" />
                      Call Now
                    </Link>
                    
                    <Link 
                      href="mailto:info@universitiespage.com" 
                      className="flex-1 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"
                    >
                      <Mail className="w-4 h-4" />
                      Email Us
                    </Link>
                  </div>
                  
                  <div className="pt-6 border-t border-white/20">
                    <p className="text-white/80 mb-4 text-center">Follow us on social media</p>
                    <div className="flex justify-center gap-3">
                      {socialLinks.map((social, idx) => (
                        <Link
                          key={idx}
                          href={social.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="w-10 h-10 bg-white/20 backdrop-blur-sm text-white rounded-lg flex items-center justify-center hover:bg-white/30 transition-all duration-300"
                          aria-label={social.label}
                        >
                          {social.icon}
                        </Link>
                      ))}
                    </div>
                  </div>
                </div>
              </ModernCard>
            </div>
          </div>
        </div>
      </div>

      {/* Office Locations */}
      <div className="py-20 bg-linear-to-br from-gray-50 to-blue-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Our Office Locations</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Visit us at any of our strategically located offices across Pakistan
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {offices.map((office, index) => (
              <ModernCard key={index} className="overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
                <div className="relative h-48">
                  <Image
                    src={office.image}
                    alt={office.city}
                    fill
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-teal-600/80 via-transparent to-transparent"></div>
                  <div className="absolute bottom-4 left-4">
                    <h3 className="text-xl font-bold text-white">{office.city}</h3>
                  </div>
                </div>
                
                <div className="p-6">
                  <div className="space-y-4">
                    <div className="flex items-start gap-3">
                      <MapPin className="w-5 h-5 text-teal-600 mt-1 flex-shrink-0" />
                      <p className="text-sm text-gray-600">{office.address}</p>
                    </div>
                    
                    <div className="flex items-start gap-3">
                      <Phone className="w-5 h-5 text-teal-600 mt-1 flex-shrink-0" />
                      <div className="text-sm text-gray-600">
                        {office.phones.map((phone, i) => (
                          <div key={i} className="mb-1">{phone}</div>
                        ))}
                      </div>
                    </div>
                    
                    <div className="flex items-center gap-3">
                      <Mail className="w-5 h-5 text-teal-600 flex-shrink-0" />
                      <p className="text-sm text-gray-600">{office.email}</p>
                    </div>
                    
                    <div className="flex items-center gap-3">
                      <Clock className="w-5 h-5 text-teal-600 flex-shrink-0" />
                      <p className="text-sm text-gray-600">{office.hours}</p>
                    </div>
                  </div>
                  
                  {/* All Social Links with Icons */}
                  <div className="mt-6 pt-6 border-t border-gray-100">
                    <p className="text-sm font-medium text-gray-700 mb-3 text-center">Follow us</p>
                    <div className="flex justify-center gap-2 flex-wrap">
                      {socialLinks.map((social, idx) => (
                        <Link
                          key={idx}
                          href={social.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className={`w-9 h-9 bg-gray-100 text-gray-700 rounded-lg flex items-center justify-center transition-all duration-300 ${social.color}`}
                          aria-label={social.label}
                        >
                          {social.icon}
                        </Link>
                      ))}
                    </div>
                  </div>
                </div>
              </ModernCard>
            ))}
          </div>
        </div>
      </div>

      {/* Final CTA Section */}
      <div className="py-20 bg-linear-to-r from-teal-600 to-blue-500 text-white 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" />
            Ready to Start Your Journey?
          </div>

          <h3 className="text-4xl font-bold mb-6">
            Let`s Build Your Future Together
          </h3>

          <p className="text-xl text-white/80 mb-10 max-w-2xl mx-auto">
            Schedule a consultation with our education experts and take the first step towards your international education goals
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link 
              href="/free-consultation" 
              className="bg-white text-teal-600 font-semibold px-8 py-4 rounded-xl hover:shadow-xl transition-all duration-300 transform hover:scale-105"
            >
              Book Free Consultation
            </Link>
            <Link 
              href="#contact-form" 
              className="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"
            >
              Send Message
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactSection;