'use client'

import React from 'react'
import { ArrowRight, Globe, MapPin } from 'lucide-react'
import Link from 'next/link'
import Image from 'next/image'

const countries = [
  {
    name: 'Italy',
    description: 'Italy delivers quality education with low tuition, world-famous arts and culture, and strong global university reputation.',
    imageUrl: '/assets/countries/Italy.webp',
    url: '/study-in-italy'
  },
  {
    name: 'France',
    description: 'France combines globally respected universities with rich culture, affordable tuition, and dynamic student life.',
    imageUrl: '/assets/countries/France.webp',
    url: '/study-in-france'
  },
  {
    name: 'China',
    description: 'China offers affordable world-class universities and scholarships with booming research hubs and global career prospects.',
    imageUrl: '/assets/countries/China.webp',
    url: '/study-in-china'
  },
  {
    name: 'Turkey',
    description: 'Turkey offers generous government scholarships and diverse university programs for global students.',
    imageUrl: '/assets/countries/Turkey.webp',
    url: '/study-in-turkey'
  },
  {
    name: 'UK',
    description: 'The UK features globally top-ranked universities, diverse courses, and excellent post-study work opportunities.',
    imageUrl: '/assets/countries/UK.webp',
    url: '/study-in-united-kingdom'
  },
  {
    name: 'South Korea',
    description: 'South Korea combines innovative education, affordable costs, and unique cultural immersion with strong scholarship options.',
    imageUrl: '/assets/countries/South-Korea.webp',
    url: '/study-in-south-korea'
  },
  {
    name: 'Finland',
    description: 'Finland offers high-quality, student-centric education with a strong focus on innovation and work-life balance.',
    imageUrl: '/assets/countries/Finland.webp',
    url: '/study-in-finland'
  },
  {
    name: 'Romania',
    description: 'Romania delivers cost-effective higher education with growing academic quality and solid return on study investment.',
    imageUrl: '/assets/countries/Romania.webp',
    url: '/study-in-romania'
  }
]

const CountriesGrid = () => {
    
  return (
    <div className="py-16 md:py-24 bg-linear-to-b from-white to-gray-50">
      <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">
            <Globe className="w-5 h-5 text-teal-600" />
            Global Study Destinations
          </div>
          
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            Explore World-Class{' '}
            <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
              Study Destinations
            </span>
          </h2>
          
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Discover countries offering exceptional education quality, affordable tuition, and 
            life-changing opportunities for international students.
          </p>
        </div>

        {/* Countries Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
          {countries.map((country) => (
            <div 
              key={country.name}
              className="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:scale-[1.02]"
            >
              {/* Background Image */}
              <div className="absolute inset-0 w-full h-full">
                <Image
                  src={country.imageUrl}
                  alt={`Study in ${country.name}`}
                  fill
                  className="object-cover group-hover:scale-110 transition-transform duration-700"
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
                />
                
                {/* Gradient Overlay */}
                <div className="absolute inset-0 bg-linear-to-t from-gray-900 via-gray-900/80 to-gray-900/40" />
                
                {/* Subtle Pattern Overlay */}
                <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-teal-200 to-blue-200" />
              </div>

              {/* Content */}
              <div className="relative h-96 p-6 flex flex-col justify-end text-white">
                {/* Location Badge */}
                <div className="absolute top-6 left-6">
                  <div className="flex items-center gap-2 bg-gray-900/60 backdrop-blur-sm px-3 py-2 rounded-full">
                    <MapPin className="w-4 h-4 text-teal-300" />
                    <span className="text-sm font-semibold">{country.name}</span>
                  </div>
                </div>

                {/* Country Name */}
                <h3 className="text-2xl font-bold mb-3 group-hover:text-teal-200 transition-colors duration-300">
                  {country.name}
                </h3>

                {/* Description */}
                <p className="text-gray-200 mb-6 text-sm md:text-base line-clamp-3">
                  {country.description}
                </p>

                {/* CTA Button */}
                <Link
                  href={country.url}
                  className="inline-flex items-center cursor-pointer justify-between bg-linear-to-r from-teal-600/90 to-blue-500/90 backdrop-blur-sm hover:from-teal-600 hover:to-blue-500 text-white px-5 py-3 rounded-xl font-semibold transition-all duration-300 transform group-hover:translate-x-2"
                >
                  <span>Explore {country.name}</span>
                  <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default CountriesGrid