import Head from 'next/head'
import Heading from '../../../app/components/atoms/Heading'
import Image from 'next/image';
import Link from "next/link";
import { Briefcase, ShieldCheck, Users, Clock, CheckCircle, Globe, Calendar, MapPin, Phone, Mail, Plus, Facebook, Instagram, Linkedin, Twitter, BookOpen, GraduationCap, GlobeIcon, Award, Heart, Shield, Sparkles } from 'lucide-react'

export default function AboutPage() {

  const features = [
    {
      icon: <ShieldCheck className="w-5 h-5 md:w-6 md:h-6 text-teal-600" />,
      title: 'Secure Process',
      description: 'Your documents and personal information are handled with the highest level of security and confidentiality.',
    },
    {
      icon: <Users className="w-5 h-5 md:w-6 md:h-6 text-teal-600" />,
      title: 'Expert Advisors',
      description: 'Get guidance from experienced education consultants who have helped thousands of students.',
    },
    {
      icon: <BookOpen className="w-5 h-5 md:w-6 md:h-6 text-teal-600" />,
      title: 'Comprehensive Support',
      description: 'From university selection to visa application, we provide end-to-end assistance for your study abroad journey.',
    },
    {
      icon: <GraduationCap className="w-5 h-5 md:w-6 md:h-6 text-teal-600" />,
      title: 'University Partnerships',
      description: 'Direct connections with hundreds of universities worldwide for better admission opportunities.',
    },
  ];

  const stats = [
    {
      icon: <Briefcase className="w-5 h-5 md:w-6 md:h-6 text-teal-600" />,
      number: '50K+',
      label: 'Students Successfully Placed',
    },
    {
      icon: <GlobeIcon className="w-5 h-5 md:w-6 md:h-6 text-teal-600" />,
      number: '25+',
      label: 'Countries We Work With',
    },
    {
      icon: <Award className="w-5 h-5 md:w-6 md:h-6 text-teal-600" />,
      number: '98%',
      label: 'Visa Success Rate',
    },
    {
      icon: <Users className="w-5 h-5 md:w-6 md:h-6 text-teal-600" />,
      number: '50+',
      label: 'Partner Universities',
    },
  ];

  const services = [
    {
      title: 'University Selection',
      description: 'Expert guidance choosing the right university based on your profile, preferences and career goals.'
    },
    {
      title: 'Admission Assistance',
      description: 'Complete support with applications, documentation, and meeting admission requirements.'
    },
    {
      title: 'Visa Guidance',
      description: 'Professional assistance with visa applications, documentation, and interview preparation.'
    },
    {
      title: 'Pre-Departure Briefing',
      description: 'Comprehensive orientation about your destination country, culture, and what to expect.'
    },
    {
      title: 'Scholarship Assistance',
      description: 'Help identifying and applying for scholarships and financial aid opportunities.'
    },
    {
      title: 'Post-Arrival Support',
      description: 'Continued assistance after you arrive in your host country for a smooth transition.'
    }
  ];

  const team = [
    {
      name: 'Sarah Johnson',
      title: 'Founder & CEO',
      imageUrl: 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=400',
      bio: 'With over 15 years in international education, Sarah founded UniversitiesPage to make global education accessible to all.'
    },
    {
      name: 'Michael Rodriguez',
      title: 'Director of Admissions',
      imageUrl: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=400',
      bio: 'Michael specializes in North American universities and has helped hundreds of students secure admissions.'
    },
    {
      name: 'Priya Sharma',
      title: 'Senior Education Consultant',
      imageUrl: 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=400',
      bio: 'Priya is an expert on UK and European education systems with a background in academic counseling.'
    },
    {
      name: 'David Kim',
      title: 'Visa Specialist',
      imageUrl: 'https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=400',
      bio: 'David has an exceptional track record with visa approvals and stays updated on immigration policies.'
    }
  ];

  const values = [
    {
      icon: <Heart className="w-6 h-6 md:w-8 md:h-8 text-teal-600" />,
      title: 'Student-Centric Approach',
      description: 'We prioritize your aspirations and needs in every step of your study abroad journey.'
    },
    {
      icon: <ShieldCheck className="w-6 h-6 md:w-8 md:h-8 text-teal-600" />,
      title: 'Integrity & Transparency',
      description: 'Honest advice and clear communication about processes, costs, and expectations.'
    },
    {
      icon: <Globe className="w-6 h-6 md:w-8 md:h-8 text-teal-600" />,
      title: 'Global Perspective',
      description: 'We understand international education landscapes and cultural nuances.'
    },
    {
      icon: <Award className="w-6 h-6 md:w-8 md:h-8 text-teal-600" />,
      title: 'Excellence in Service',
      description: 'Committed to delivering exceptional results and support throughout your journey.'
    }
  ];

  return (
    <>  
      <Head>
        <title>About Us | UniversitiesPage - Study Abroad Consultants</title>
        <meta name="description" content="Learn about UniversitiesPage, your trusted partner for study abroad programs, university admissions, and visa guidance. Discover our mission, team, and commitment to your international education success." />
      </Head>
      
      {/* Updated Hero Section */}
      <section className="relative min-h-[60vh] md:min-h-[70vh] flex items-center justify-center overflow-hidden">
        {/* Floating Background Elements */}
        <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="absolute inset-0 bg-linear-to-r from-teal-50/50 to-blue-50/50"></div>
 
        <div className="relative z-20 text-center px-4 max-w-7xl mx-auto py-20">
          <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" />
            About UniversitiesPage
          </div>

          <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-8 leading-tight">
            Empowering{' '}
            <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
              Global Education
            </span>{' '}
            <br />
            Dreams Since Day One
          </h1>

          <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
            Your trusted partner in navigating the journey to international education 
            with expert guidance and comprehensive support.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/free-consultation"
              className="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 text-lg"
            >
              Start Free Consultation
            </Link>
            <Link
              href="/contact-us"
              className="border-2 border-teal-600 text-teal-600 font-semibold px-8 py-4 rounded-xl hover:bg-teal-50 transition-all duration-300 text-lg"
            >
              Contact Our Team
            </Link>
          </div>
        </div>
      </section>

      {/* Introduction Section - Only color updates */}
      <section className="py-12 md:py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
            <div>
              <span className="text-teal-600 font-semibold uppercase tracking-wide text-lg">Who We Are</span>
              <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mt-2 mb-4 md:mb-6">
                Your Trusted Partner in Global Education
              </h2>
              <p className="text-gray-600 leading-relaxed mb-4 text-sm md:text-base">
                UniversitiesPage, powered by Sunrise International Education Consultancy Private Limited, 
                is a leading study abroad consultancy dedicated to helping students navigate the complex 
                process of international education. Since our inception, we have been committed to making 
                quality education accessible across borders.
              </p>
              <p className="text-gray-600 leading-relaxed text-sm md:text-base">
                Our team of experienced counselors understands the challenges students face when pursuing 
                education overseas. We provide personalized guidance tailored to each student academic 
                background, career aspirations, and personal preferences, ensuring the best possible fit 
                between students and institutions.
              </p>
            </div>

            <div className="relative rounded-xl overflow-hidden shadow-lg mt-6 md:mt-0">
              <Image
                src="/assets/about_img3.jpg"
                alt="UniversityPage team helping students"
                width={800}
                height={500}
                className="w-full h-auto object-cover"
              />
            </div>
          </div>

          {/* Stats Block - Only color updates */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-12 md:mt-20">
            {stats.map((stat, index) => (
              <div key={index} className="bg-white text-center px-3 py-4 md:px-4 md:py-6 rounded-lg md:rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
                <div className="flex justify-center mb-2 md:mb-3">{stat.icon}</div>
                <div className="text-xl md:text-2xl font-bold text-gray-900">{stat.number}</div>
                <div className="text-xs md:text-sm text-gray-600 mt-1 leading-tight">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mission & Vision Section - Only color updates */}
      <section className="py-12 md:py-16 bg-[#f8fafc]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-6 md:gap-8 lg:gap-12">
            <div className="bg-white p-6 md:p-8 rounded-xl shadow-sm">
              <div className="flex items-center mb-4 md:mb-6">
                <div className="bg-linear-to-r from-teal-600 to-blue-500 p-2 rounded-full mr-3 md:mr-4">
                  <Heart className="w-6 h-6 md:w-8 md:h-8 text-white" />
                </div>
                <h3 className="text-xl md:text-2xl font-bold text-gray-900">Our Mission</h3>
              </div>
              <p className="text-gray-600 mb-4 md:mb-6 text-sm md:text-base">
                To democratize access to quality global education by providing expert guidance, 
                transparent processes, and comprehensive support that empowers students to achieve 
                their academic and career aspirations without boundaries.
              </p>
              <ul className="space-y-2 md:space-y-3">
                <li className="flex items-start">
                  <CheckCircle className="shrink-0 h-4 w-4 md:h-5 md:w-5 text-teal-600 mt-1 mr-2 md:mr-3" />
                  <span className="text-gray-700 text-sm md:text-base">Make international education accessible to all qualified students</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="shrink-0 h-4 w-4 md:h-5 md:w-5 text-teal-600 mt-1 mr-2 md:mr-3" />
                  <span className="text-gray-700 text-sm md:text-base">Provide honest, transparent guidance throughout the application process</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="shrink-0 h-4 w-4 md:h-5 md:w-5 text-teal-600 mt-1 mr-2 md:mr-3" />
                  <span className="text-gray-700 text-sm md:text-base">Build lasting relationships with educational institutions worldwide</span>
                </li>
              </ul>
            </div>
            
            <div className="bg-white p-6 md:p-8 rounded-xl shadow-sm">
              <div className="flex items-center mb-4 md:mb-6">
                <div className="bg-linear-to-r from-teal-600 to-blue-500 p-2 rounded-full mr-3 md:mr-4">
                  <Globe className="w-6 h-6 md:w-8 md:h-8 text-white" />
                </div>
                <h3 className="text-xl md:text-2xl font-bold text-gray-900">Our Vision</h3>
              </div>
              <p className="text-gray-600 mb-4 md:mb-6 text-sm md:text-base">
                To create a world where geographical boundaries no longer limit educational opportunities, 
                and where every student can access the best global education that aligns with their potential 
                and ambitions.
              </p>
              <ul className="space-y-2 md:space-y-3">
                <li className="flex items-start">
                  <CheckCircle className="shrink-0 h-4 w-4 md:h-5 md:w-5 text-teal-600 mt-1 mr-2 md:mr-3" />
                  <span className="text-gray-700 text-sm md:text-base">Become the most trusted name in international education consulting</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="shrink-0 h-4 w-4 md:h-5 md:w-5 text-teal-600 mt-1 mr-2 md:mr-3" />
                  <span className="text-gray-700 text-sm md:text-base">Expand our network to include every major educational destination</span>
                </li>
                <li className="flex items-start">
                  <CheckCircle className="shrink-0 h-4 w-4 md:h-5 md:w-5 text-teal-600 mt-1 mr-2 md:mr-3" />
                  <span className="text-gray-700 text-sm md:text-base">Develop innovative digital tools to simplify the study abroad process</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section - Only color updates */}
      <section className="py-12 md:py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12 md:mb-16">
            <span className="text-teal-600 font-semibold uppercase tracking-wide text-3xl">Our Services</span>
            <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mt-2">
              Comprehensive Study Abroad Support
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto mt-3 md:mt-4 text-sm md:text-base">
              We guide you through every step of your study abroad journey, from initial consultation 
              to post-arrival support in your destination country.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
            {services.map((service, index) => (
              <div key={index} className="bg-[#f8fafc] p-4 md:p-6 rounded-lg md:rounded-xl shadow-sm hover:shadow-md transition-shadow">
                <div className="mb-3 md:mb-4">
                  <div className="bg-linear-to-r from-teal-600 to-blue-500 w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center">
                    <CheckCircle className="w-5 h-5 md:w-6 md:h-6 text-white" />
                  </div>
                </div>
                <h3 className="text-lg md:text-xl font-semibold text-gray-900 mb-2 md:mb-3">{service.title}</h3>
                <p className="text-gray-600 text-sm md:text-base">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values Section - Only color updates */}
      <section className="py-12 md:py-20 mb-20 bg-[#f8fafc]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12 md:mb-16">
            <span className="text-teal-600 font-semibold uppercase tracking-wide text-3xl">Our Values</span>
            <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mt-2">
              The Principles That Guide Us
            </h2>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
            {values.map((value, index) => (
              <div key={index} className="bg-white p-4 md:p-6 rounded-lg md:rounded-xl shadow-sm text-center hover:shadow-md transition-shadow">
                <div className="flex justify-center mb-3 md:mb-4">
                  {value.icon}
                </div>
                <h3 className="text-lg md:text-xl font-semibold text-gray-900 mb-2 md:mb-3">{value.title}</h3>
                <p className="text-gray-600 text-sm md:text-base">{value.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>


      {/* CTA Section - Only color updates */}
      <section className="py-12 md:py-16 bg-linear-to-r from-teal-600 to-blue-500 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold mb-4 md:mb-6">
            Begin Your Global Education Journey
          </h2>
          <p className="text-white/90 max-w-2xl mx-auto mb-6 md:mb-8 text-sm md:text-base">
            Schedule a free consultation with our education experts to explore your study abroad options
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-3 md:gap-4">
            <Link
              href="/free-consultation"
              className="bg-white text-teal-600 px-6 py-3 md:px-8 md:py-3 rounded-md font-medium hover:bg-gray-100 transition shadow-md text-sm md:text-base"
            >
              Book Free Consultation
            </Link>
            <Link
              href="/contact-us"
              className="border-2 border-white text-white px-6 py-3 md:px-8 md:py-3 rounded-md font-medium hover:bg-white/10 transition text-sm md:text-base"
            >
              Contact Our Team
            </Link>
          </div>
        </div>
      </section>
    </>
  )
}