'use client'

import React, { useState } from 'react'
import { Building2, MapPin, Users, ArrowRight, Globe, Sparkles, Phone } from 'lucide-react'
import Link from 'next/link'
import Image from 'next/image'
import FreeConsultationModal from "../components/organisms/FreeConsultationModal";

const cities = [
  {
    name: 'Lahore',
    description: 'Professional Study abroad consultants in Lahore provide expert guidance, visa assistance, and program selection for students.',
    imageUrl: '/assets/countries/Lahore.webp',
    tagline: 'Education Hub of Punjab',
    students: '5,000+',
    phones: [
      '+92 333 0033235',
      '+92 311 4998280',
      '+92 310 3162004'
    ]
  },
  {
    name: 'Islamabad',
    description: 'Experienced Study abroad consultants in Islamabad offering personalized guidance, application support, and study abroad planning.',
    imageUrl: '/assets/countries/Islamabad.webp',
    tagline: 'Capital Education Excellence',
    students: '3,000+',
    phones: [
      '+92 317 0174573',
      '+92 310 3172004',
      '+92 334 9990308'
    ]
  },
  {
    name: 'Karachi',
    description: 'Trusted Study abroad consultants in Karachi helping students choose top programs and achieve international education goals.',
    imageUrl: '/assets/countries/Karachi.webp',
    tagline: 'Metropolitan Study Gateway',
    students: '2,500+',
    phones: [
      '+92 310 6225408',
      '+92 310 6225430',
      '+92 310 6225410'
    ]
  },
  {
    name: 'Faisalabad',
    description: 'Reliable Study abroad consultants in Faisalabad are assisting students with program selection, scholarships, and visa processes.',
    imageUrl: '/assets/countries/Faisalabad.webp',
    tagline: 'Industrial & Academic Center',
    students: '1,000+',
    phones: [
      '+92 310 6225428',
      '+92 310 4262934',
      '+92 310 6225412'
    ]
  }
]

const CitiesGrid = () => {

  const [isConsultationModalOpen, setIsConsultationModalOpen] = useState(false);
    
  // Consultation modal functions
  const openConsultationModal = () => {
    setIsConsultationModalOpen(true);
  };

  const closeConsultationModal = () => {
    setIsConsultationModalOpen(false);
  };

  return (
    <>
      <FreeConsultationModal
        isOpen={isConsultationModalOpen}
        onClose={closeConsultationModal}
        title=""
        description={`Get expert guidance about studying in China - completely free!`}
      />
      <div className="py-16 md:py-24 bg-linear-to-b from-gray-50 to-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Header */}
          <div className="text-center mb-12 md:mb-16">
            <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-6">
              <Building2 className="w-5 h-5 text-teal-600" />
              Pakistan Office Locations
            </div>
            
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              Find Expert Guidance in{' '}
              <span className="relative">
                <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                  Major Cities
                </span>
                <span className="absolute -bottom-1 left-0 right-0 h-1.5 bg-linear-to-r from-teal-600 to-blue-500 rounded-full"></span>
              </span>
            </h2>
            
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Connect with our professional study abroad consultants across Pakistan for personalized support 
              and expert guidance on your international education journey.
            </p>
          </div>

          {/* Cities Grid - Modern Design */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
            {cities.map((city, index) => (
              <div 
                key={city.name}
                className="group relative bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:scale-[1.02]"
              >
                
                {/* Top Section with Image */}
                <div className="relative h-48 overflow-hidden">
                  <Image
                    src={city.imageUrl}
                    alt={`Study abroad consultants in ${city.name}`}
                    fill
                    className="object-cover group-hover:scale-110 transition-transform duration-700"
                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
                  />
                  
                  {/* Gradient Overlay */}
                  <div className="absolute inset-0 bg-linear-to-t from-gray-900/80 via-gray-900/40 to-transparent" />
                  
                  {/* City Name Overlay */}
                  <div className="absolute bottom-4 left-4">
                    <div className="flex items-center gap-2">
                      <div className="p-2 rounded-full bg-teal-600/90 backdrop-blur-sm">
                        <MapPin className="w-5 h-5 text-white" />
                      </div>
                      <div>
                        <h3 className="text-2xl font-bold text-white">{city.name}</h3>
                        <p className="text-teal-200 text-sm font-medium">{city.tagline}</p>
                      </div>
                    </div>
                  </div>
                  
                  {/* Student Count Badge */}
                  <div className="absolute top-4 right-4">
                    <div className="bg-white/90 backdrop-blur-sm rounded-full px-3 py-2">
                      <div className="flex items-center gap-1">
                        <Users className="w-4 h-4 text-teal-600" />
                        <span className="text-sm font-bold text-gray-900">{city.students}</span>
                        <span className="text-xs text-gray-600">Students</span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Card Content */}
                <div className="p-6">
                  <div className="mb-4">
                    <p className="text-gray-600 text-left text-sm md:text-base">
                      {city.description}
                    </p>
                  </div>
                  
                  {/* Phone Numbers Section */}
                  <div className="mb-6">
                    <div className="flex items-center gap-2 mb-3">
                      <Phone className="w-4 h-4 text-teal-600" />
                      <h4 className="text-sm font-semibold text-gray-800">Contact Numbers:</h4>
                    </div>
                    <div className="space-y-2">
                      {city.phones.map((phone, phoneIndex) => (
                        <Link
                          key={phoneIndex}
                          href={`tel:${phone.replace(/\s+/g, '')}`}
                          className="flex items-center gap-2 group/phone"
                        >
                          <div className="w-1.5 h-1.5 rounded-full bg-teal-500"></div>
                          <span className="text-sm text-gray-700 group-hover/phone:text-teal-700 group-hover/phone:font-medium transition-all duration-200">
                            {phone}
                          </span>
                        </Link>
                      ))}
                    </div>
                  </div>
                  
                  {/* CTA Button */}
                  <Link
                    href={`/contact-us`}
                    className="block w-full bg-linear-to-r from-teal-50 to-blue-50 hover:from-teal-100 hover:to-blue-100 border border-teal-200 text-teal-700 text-center py-3 px-4 rounded-xl font-semibold transition-all duration-300 transform hover:scale-[1.02] group/btn"
                  >
                    <span className="flex items-center justify-center cursor-pointer">
                      <span>Explore More</span>
                      <ArrowRight className="w-4 h-4 ml-2 group-hover/btn:translate-x-1 transition-transform duration-300" />
                    </span>
                  </Link>
                </div>
              </div>
            ))}
          </div>

          {/* Bottom CTA */}
          <div className="mt-12 md:mt-16 text-center">
            <div className="bg-linear-to-r from-teal-50 to-blue-50 border border-teal-200 rounded-2xl p-8 max-w-3xl mx-auto">
              <div className="flex items-center justify-center gap-3 mb-4">
                <Sparkles className="w-6 h-6 text-teal-600" />
                <h3 className="text-2xl font-bold text-gray-900">
                  The Best Study Consultants in Pakistan
                </h3>
              </div>
              <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
                Universities Page is a team of leading education consultants committed to helping students discover the right academic programs at top universities worldwide. As trusted study abroad consultants in Pakistan, our experienced abroad study consultants provide complete application support, including expert guidance through every step of the student visa consultancy process.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button
                  onClick={openConsultationModal}
                  className="bg-linear-to-r from-teal-600 to-blue-500 hover:from-teal-700 hover:to-blue-600 text-white px-8 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg cursor-pointer"
                >
                  Book Online Consultation
                </button>
                <Link
                  href="tel:+923103162004"
                  className="border-2 border-teal-600 text-teal-600 hover:bg-teal-600 hover:text-white px-8 py-3 rounded-xl font-semibold transition-all duration-300"
                >
                  Call Head Office
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default CitiesGrid