"use client"
import React, { useRef, useEffect, useState } from "react";
import Link from "next/link";
import { 
  IoMdAirplane 
} from "react-icons/io";
import { 
  Shield,
  Sparkles,
  Zap,
  Award,
  Users,
  Clock,
  Star,
  MessageSquare,
  CheckCircle,
  Globe,
  Building2,
  MapPin,
  Phone,
  Mail,
  Target,
  ChevronRight,
  BookOpen,
  GraduationCap,
  Heart,
  Briefcase,
  GlobeIcon
} from 'lucide-react';
import Image from 'next/image';

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


export default function ServicesPage() {
  const services = [
    {
      id: 1,
      title: "University Selection",
      icon: <Building2 className="w-6 h-6" />,
      description: "Expert guidance choosing the right university based on your profile and career goals.",
    },
    {
      id: 2,
      title: "Application Support",
      icon: <BookOpen className="w-6 h-6" />,
      description: "Complete assistance with applications, essays, and meeting admission requirements.",
    },
    {
      id: 3,
      title: "Visa Assistance",
      icon: <Globe className="w-6 h-6" />,
      description: "Professional guidance with student visa applications and documentation.",
      highlight: true,
    },
    {
      id: 4,
      title: "Scholarship Guidance",
      icon: <Award className="w-6 h-6" />,
      description: "Help identifying and applying for scholarships and financial aid opportunities.",
    },
    {
      id: 5,
      title: "Pre-Departure Briefing",
      icon: <IoMdAirplane className="w-6 h-6" />,
      description: "Comprehensive orientation about your destination country and what to expect.",
    },
    {
      id: 6,
      title: "Post-Arrival Support",
      icon: <Users className="w-6 h-6" />,
      description: "Continued assistance after you arrive in your host country for a smooth transition.",
    },
  ];

  const countries = [
    { name: 'United States', flag: 'https://flagcdn.com/w320/us.png' },
    { name: 'United Kingdom', flag: 'https://flagcdn.com/w320/gb.png' },
    { name: 'Canada', flag: 'https://flagcdn.com/w320/ca.png' },
    { name: 'Australia', flag: 'https://flagcdn.com/w320/au.png' },
    { name: 'Germany', flag: 'https://flagcdn.com/w320/de.png' },
    { name: 'France', flag: 'https://flagcdn.com/w320/fr.png' },
    { name: 'Netherlands', flag: 'https://flagcdn.com/w320/nl.png' },
    { name: 'New Zealand', flag: 'https://flagcdn.com/w320/nz.png' },
    { name: 'Japan', flag: 'https://flagcdn.com/w320/jp.png' },
    { name: 'Sweden', flag: 'https://flagcdn.com/w320/se.png' },
    { name: 'Ireland', flag: 'https://flagcdn.com/w320/ie.png' }
  ];

  const stats = [
    { number: "50K+", label: "Students Successfully Placed", icon: Users, color: "teal" },
    { number: "25+", label: "Countries We Work With", icon: GlobeIcon, color: "blue" },
    { number: "98%", label: "Visa Success Rate", icon: Award, color: "emerald" },
    { number: "50+", label: "Partner Universities", icon: Building2, color: "amber" }
  ];

  const features = [
    {
      Icon: Shield,
      title: "Secure Process",
      description: "Your documents and personal information are handled with highest security",
      color: "teal"
    },
    {
      Icon: Users,
      title: "Expert Advisors",
      description: "Guidance from experienced education consultants who have helped thousands",
      color: "blue"
    },
    {
      Icon: BookOpen,
      title: "Comprehensive Support",
      description: "End-to-end assistance for your complete study abroad journey",
      color: "emerald"
    },
    {
      Icon: GraduationCap,
      title: "University Partnerships",
      description: "Direct connections with hundreds of universities worldwide",
      color: "amber"
    }
  ];

  return (
    <>
      {/* Updated 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" />
              Comprehensive Study Abroad Services
            </div>

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

            <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
              Complete study abroad consulting services to help you navigate every step 
              of your international education journey with expert guidance.
            </p>
          </div>
        </div>
      </div>

      {/* Stats 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 Students Trust Our Services
            </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">
            {stats.map((stat, index) => (
              <StatCard 
                key={index}
                Icon={stat.icon}
                number={stat.number}
                label={stat.label}
                color={stat.color}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Services Grid - Updated */}
      <div className="pb-20">
        <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">
              Comprehensive Study Abroad Services
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              We guide you through every step of your journey with expert support
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service) => (
              <ModernCard key={service.id} className="group hover:shadow-xl transition-all duration-300">
                <div className="p-6">
                  <div className="flex items-start gap-4 mb-4">
                    <div className="p-3 rounded-xl bg-linear-to-r from-teal-50 to-blue-50 border border-teal-100 group-hover:bg-linear-to-r group-hover:from-teal-100 group-hover:to-blue-100 transition-all duration-300">
                      <div className="text-teal-600 group-hover:text-teal-700 transition-colors duration-300">
                        {service.icon}
                      </div>
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-gray-900 group-hover:text-teal-700 transition-colors duration-300">
                        {service.title}
                      </h3>
                    </div>
                  </div>
                  
                  <p className="text-gray-600 mb-6">
                    {service.description}
                  </p>
                  
                  <div className="flex items-center text-teal-600 font-medium group-hover:text-teal-700 transition-colors duration-300">
                    <span>Learn more</span>
                    <ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
                  </div>
                </div>
              </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 Choose Our Services
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Experience the difference with our comprehensive approach to study abroad guidance
            </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>

      {/* Stats & Image Section */}
      <section 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-center">
            {/* Left Side: Image */}
            <div className="relative">
              <ModernCard className="overflow-hidden">
                <div className="relative h-80">
                  <Image
                    src="/assets/media-4.jpg"
                    alt="Successful Students"
                    fill
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent"></div>
                  
                  {/* Floating stats card */}
                  <div className="absolute -bottom-4 -right-4 bg-white rounded-xl p-4 shadow-lg">
                    <div className="text-2xl font-bold text-teal-600">50K+</div>
                    <div className="text-sm font-medium text-gray-600">Students Placed</div>
                  </div>
                </div>
              </ModernCard>
            </div>

            {/* Right Side: Content */}
            <div>
              <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-4 py-2 rounded-full text-sm font-semibold mb-6">
                <Sparkles className="w-4 h-4" />
                Our Success Story
              </div>

              <h2 className="text-4xl font-bold text-gray-900 mb-6">
                Turning Study Abroad Dreams into{' '}
                <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                  Reality
                </span>
              </h2>

              <p className="text-lg text-gray-600 mb-8 leading-relaxed">
                For over a decade, we have helped thousands of students achieve their international education goals 
                through personalized guidance and expert support at every step of their journey.
              </p>

              {/* Stats Grid */}
              <div className="grid grid-cols-2 gap-6 mb-8">
                <ModernCard className="p-6 text-center hover:shadow-xl transition-shadow duration-300">
                  <div className="text-3xl font-bold text-teal-600 mb-2">50+</div>
                  <div className="text-sm text-gray-600">Partner Universities</div>
                </ModernCard>
                
                <ModernCard className="p-6 text-center hover:shadow-xl transition-shadow duration-300">
                  <div className="text-3xl font-bold text-blue-600 mb-2">11+</div>
                  <div className="text-sm text-gray-600">Years of Experience</div>
                </ModernCard>
                
                <ModernCard className="p-6 text-center hover:shadow-xl transition-shadow duration-300">
                  <div className="text-3xl font-bold text-emerald-600 mb-2">98%</div>
                  <div className="text-sm text-gray-600">Success Rate</div>
                </ModernCard>
                
                <ModernCard className="p-6 text-center hover:shadow-xl transition-shadow duration-300">
                  <div className="text-3xl font-bold text-amber-600 mb-2">25+</div>
                  <div className="text-sm text-gray-600">Countries</div>
                </ModernCard>
              </div>

              {/* Trust Indicator */}
              <ModernCard className="p-6 mb-8">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex -space-x-3">
                    {[...Array(4)].map((_, i) => (
                      <div key={i} className="w-12 h-12 bg-gray-200 rounded-full border-2 border-white shadow-md"></div>
                    ))}
                    <div className="w-12 h-12 bg-linear-to-r from-teal-600 to-blue-500 text-white rounded-full border-2 border-white shadow-md flex items-center justify-center text-sm font-bold">
                      +500
                    </div>
                  </div>
                  
                  <div className="text-right">
                    <div className="text-2xl font-bold text-teal-600">4.9/5</div>
                    <div className="text-sm text-gray-500">Student Satisfaction</div>
                  </div>
                </div>
                
                <div className="pt-4 border-t border-gray-100">
                  <p className="text-sm text-gray-600">
                    Join thousands of successful students who have achieved their study abroad dreams with our guidance
                  </p>
                </div>
              </ModernCard>

              {/* CTA Button */}
              <Link 
                href="/contact-us" 
                className="inline-block 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] text-center"
              >
                Start Your Journey Today
              </Link>
            </div>
          </div>
        </div>
      </section>
      
      {/* Countries Marquee */}
      <div className="py-20">
        <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">
              Countries We Help Students Study In
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Explore educational opportunities across the globe with our expert guidance
            </p>
          </div>
          
          <div className="space-y-4 mb-12">
            <MarqueeRow countries={countries} />
            <MarqueeRow countries={countries} reverse />
          </div>
        </div>
      </div>

      {/* Process Timeline */}
      <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">
              Complete Study Abroad Support
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              We guide you through every step of your international education journey, 
              providing expert assistance from initial planning to post-arrival support.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Phase 1 */}
            <ModernCard className="p-8 text-center hover:shadow-xl transition-shadow duration-300">
              <div className="w-16 h-16 bg-linear-to-r from-teal-600 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-white text-xl font-bold">1</span>
              </div>
              <h4 className="text-xl font-bold text-gray-900 mb-4">Planning & Research</h4>
              <ul className="text-gray-600 text-left space-y-3">
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Career counseling & goal assessment</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Country & university shortlisting</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Program selection guidance</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Timeline planning</span>
                </li>
              </ul>
            </ModernCard>

            {/* Phase 2 */}
            <ModernCard className="p-8 text-center hover:shadow-xl transition-shadow duration-300">
              <div className="w-16 h-16 bg-linear-to-r from-teal-600 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-white text-xl font-bold">2</span>
              </div>
              <h4 className="text-xl font-bold text-gray-900 mb-4">Application Process</h4>
              <ul className="text-gray-600 text-left space-y-3">
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Document preparation</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Statement of purpose assistance</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Application submission</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Interview preparation</span>
                </li>
              </ul>
            </ModernCard>

            {/* Phase 3 */}
            <ModernCard className="p-8 text-center hover:shadow-xl transition-shadow duration-300">
              <div className="w-16 h-16 bg-linear-to-r from-teal-600 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-white text-xl font-bold">3</span>
              </div>
              <h4 className="text-xl font-bold text-gray-900 mb-4">Visa & Pre-Departure</h4>
              <ul className="text-gray-600 text-left space-y-3">
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Visa documentation</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Financial proof preparation</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Pre-departure orientation</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="w-5 h-5 text-teal-500 mr-3 shrink-0 mt-0.5" />
                  <span>Accommodation assistance</span>
                </li>
              </ul>
            </ModernCard>
          </div>

          {/* CTA */}
          <div className="text-center mt-12">
            <Link 
              href="/contact-us" 
              className="inline-flex items-center bg-linear-to-r from-teal-600 to-blue-500 text-white font-semibold px-8 py-4 rounded-xl hover:shadow-xl transition-all duration-300 transform hover:scale-105"
            >
              Start Your Journey Today
              <ChevronRight className="w-5 h-5 ml-2" />
            </Link>
          </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" />
            Begin Your Journey
          </div>

          <h3 className="text-4xl font-bold mb-6">
            Your Global Education Journey Starts Here
          </h3>

          <p className="text-xl text-white/80 mb-10 max-w-2xl mx-auto">
            Schedule a free consultation with our education experts to explore your study abroad options
          </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-us"
              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"
            >
              Contact Our Team
            </Link>
          </div>
        </div>
      </div>
    </>
  );
}