'use client';
import React, { useState, useEffect, useCallback } from 'react';
import { Search, Filter, MapPin, GraduationCap, DollarSign, Award, Calendar, Star, Users, Globe, BookOpen, X, ChevronDown, ChevronUp, Menu, Wallet, Sparkles, Shield, Zap, CheckCircle, MessageSquare } from 'lucide-react';
import Image from "next/image";
import Link from 'next/link';

// Import Shared Components (assuming you have these)
import ModernCard from '../../components/shared/ModernCard';
import StatCard from '../../components/shared/StatCard';
import FeatureCard from '../../components/shared/FeatureCard';

const ScholarshipsPage = ({ scholarships }) => {
  const [filteredScholarships, setFilteredScholarships] = useState([]);
  const [filters, setFilters] = useState({
    country: '',
    qualification: '',
    requiresIELTS: '',
    minCGPA: '',
    maxCGPA: ''
  });
  const [currentPage, setCurrentPage] = useState(1);
  const [expandedFilters, setExpandedFilters] = useState({
    location: true,
    academics: true,
    requirements: true
  });
  const [showMobileFilters, setShowMobileFilters] = useState(false);
  const itemsPerPage = 9;

  // Extract unique filter options
  const countries = [...new Set(scholarships?.map(s => s.country_name).filter(Boolean))];
  const qualifications = [...new Set(scholarships?.flatMap(s => s.qualifications?.map(q => q.qualification_name) || []).filter(Boolean))];
  const cgpaOptions = ['2.0', '2.5', '3.0', '3.5', '4.0'];

  // Initialize filtered scholarships
  useEffect(() => {
    if (scholarships) {
      setFilteredScholarships(scholarships);
    }
  }, [scholarships]);

  // Apply filters
  const applyFilters = useCallback(() => {
    if (!scholarships) return;

    let filtered = scholarships.filter(scholarship => {
      const matchesCountry = !filters.country || scholarship.country_name === filters.country;
      
      const matchesQualification = !filters.qualification || 
        scholarship.qualifications?.some(q => q.qualification_name === filters.qualification);
      
      const matchesIELTS = !filters.requiresIELTS || 
        (filters.requiresIELTS === 'yes' ? scholarship.ielts : !scholarship.ielts);

      const matchesMinCGPA = !filters.minCGPA || 
        (scholarship.cgpa && parseFloat(scholarship.cgpa) >= parseFloat(filters.minCGPA));
      
      const matchesMaxCGPA = !filters.maxCGPA || 
        (scholarship.cgpa && parseFloat(scholarship.cgpa) <= parseFloat(filters.maxCGPA));

      return matchesCountry && matchesQualification && matchesIELTS &&
             matchesMinCGPA && matchesMaxCGPA;
    });

    setFilteredScholarships(filtered);
  }, [filters, scholarships]);

  // Apply filters when they change
  useEffect(() => {
    applyFilters();
    setCurrentPage(1);
  }, [applyFilters]);

  // Pagination
  const totalPages = Math.ceil(filteredScholarships.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const currentScholarships = filteredScholarships.slice(startIndex, startIndex + itemsPerPage);

  // Helper functions
  const formatAmountRange = (amount_min, amount_max, currency_symbol = '$') => {
    if (!amount_min && !amount_max) return 'Not specified';
    
    const symbol = currency_symbol || '$';
    
    if (amount_min && amount_max) {
      return `${symbol}${amount_min} - ${symbol}${amount_max}`;
    }
    
    if (amount_min && !amount_max) {
      return `${symbol}${amount_min}+`;
    }
    
    if (!amount_min && amount_max) {
      return `Up to ${symbol}${amount_max}`;
    }
    
    return 'Not specified';
  };

  const formatQualifications = (qualifications) => {
    if (!qualifications || qualifications.length === 0) {
      return 'Not specified';
    }
    
    if (qualifications.length === 1) {
      return qualifications[0].qualification_name;
    }
    
    // Show first 2 qualifications and count of remaining
    const firstTwo = qualifications.map(q => q.qualification_name).join(', ');
    
    return firstTwo;
  };

  const formatPercentage = (percentage) => {
    if (!percentage) return 'Not specified';
    return `${percentage}% covered`;
  };

  const getImageUrl = (imagePath) => {
    if (!imagePath) return '/default-scholarship-image.jpg';
    return `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${imagePath}`;
  };

  const handleFilterChange = (key, value) => {
    setFilters(prev => ({ ...prev, [key]: value }));
  };

  const clearFilters = () => {
    setFilters({
      country: '',
      qualification: '',
      requiresIELTS: '',
      minCGPA: '',
      maxCGPA: ''
    });
  };

  const toggleFilterSection = (section) => {
    setExpandedFilters(prev => ({
      ...prev,
      [section]: !prev[section]
    }));
  };

  const toggleMobileFilters = () => {
    setShowMobileFilters(!showMobileFilters);
  };

  const hasActiveFilters = Object.values(filters).some(value => value !== '');

  const activeFilterCount = Object.values(filters).filter(v => v !== '').length;

  if (!scholarships || scholarships.length === 0) {
    return (
      <section className="min-h-screen bg-linear-to-b from-gray-50 to-white">
        <div className="container mx-auto px-4 text-center py-20">
          <h2 className="text-3xl font-bold mb-4 text-gray-900">Scholarships</h2>
          <p className="text-gray-600">No scholarships available at the moment.</p>
        </div>
      </section>
    );
  }

  // Filters Component
  const FiltersSidebar = () => (
    <ModernCard className="p-6 sticky top-8">
      {/* Filters Header */}
      <div className="pb-6 border-b border-gray-200">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-linear-to-r from-teal-50 to-blue-50 border border-teal-100">
              <Filter className="w-5 h-5 text-teal-600" />
            </div>
            <div>
              <h3 className="text-lg font-bold text-gray-900">Filters</h3>
              <p className="text-sm text-gray-600">Refine your search</p>
            </div>
          </div>
          
          {hasActiveFilters && (
            <button
              onClick={clearFilters}
              className="flex items-center gap-1 text-sm text-red-600 hover:text-red-700 font-medium transition-colors px-3 py-1 hover:bg-red-50 rounded-lg"
            >
              <X className="w-4 h-4" />
              <span>Clear All</span>
            </button>
          )}
        </div>

        {/* Active Filters Count */}
        {activeFilterCount > 0 && (
          <div className="inline-flex items-center gap-2 px-3 py-1 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 rounded-full text-sm font-semibold">
            <div className="w-2 h-2 bg-teal-500 rounded-full animate-pulse"></div>
            <span>{activeFilterCount} active filters</span>
          </div>
        )}
      </div>

      {/* Location Filter */}
      <div className="border-b border-gray-200 py-4">
        <button
          onClick={() => toggleFilterSection('location')}
          className="w-full flex items-center justify-between hover:text-teal-600 transition-colors"
        >
          <div className="flex items-center gap-3">
            <MapPin className="w-5 h-5 text-teal-600" />
            <span className="font-semibold text-gray-900">Location</span>
          </div>
          {expandedFilters.location ? (
            <ChevronUp className="w-5 h-5 text-gray-400" />
          ) : (
            <ChevronDown className="w-5 h-5 text-gray-400" />
          )}
        </button>
        
        {expandedFilters.location && (
          <div className="mt-4">
            <select
              value={filters.country}
              onChange={(e) => handleFilterChange('country', e.target.value)}
              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-transparent bg-white transition-all duration-300"
            >
              <option value="">All Countries</option>
              {countries.map(country => (
                <option key={country} value={country}>{country}</option>
              ))}
            </select>
          </div>
        )}
      </div>

      {/* Academics Filter */}
      <div className="border-b border-gray-200 py-4">
        <button
          onClick={() => toggleFilterSection('academics')}
          className="w-full flex items-center justify-between hover:text-teal-600 transition-colors"
        >
          <div className="flex items-center gap-3">
            <GraduationCap className="w-5 h-5 text-teal-600" />
            <span className="font-semibold text-gray-900">Academics</span>
          </div>
          {expandedFilters.academics ? (
            <ChevronUp className="w-5 h-5 text-gray-400" />
          ) : (
            <ChevronDown className="w-5 h-5 text-gray-400" />
          )}
        </button>
        
        {expandedFilters.academics && (
          <div className="mt-4 space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Qualification Level
              </label>
              <select
                value={filters.qualification}
                onChange={(e) => handleFilterChange('qualification', e.target.value)}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-transparent bg-white transition-all duration-300"
              >
                <option value="">All Levels</option>
                {qualifications.map(qual => (
                  <option key={qual} value={qual}>{qual}</option>
                ))}
              </select>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                CGPA Range
              </label>
              <div className="grid grid-cols-2 gap-3">
                <select
                  value={filters.minCGPA}
                  onChange={(e) => handleFilterChange('minCGPA', e.target.value)}
                  className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent bg-white transition-all duration-300"
                >
                  <option value="">Min CGPA</option>
                  {cgpaOptions.map(cgpa => (
                    <option key={`min-${cgpa}`} value={cgpa}>{cgpa}</option>
                  ))}
                </select>
                <select
                  value={filters.maxCGPA}
                  onChange={(e) => handleFilterChange('maxCGPA', e.target.value)}
                  className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent bg-white transition-all duration-300"
                >
                  <option value="">Max CGPA</option>
                  {cgpaOptions.map(cgpa => (
                    <option key={`max-${cgpa}`} value={cgpa}>{cgpa}</option>
                  ))}
                </select>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Requirements Filter */}
      <div className="py-4">
        <button
          onClick={() => toggleFilterSection('requirements')}
          className="w-full flex items-center justify-between hover:text-teal-600 transition-colors"
        >
          <div className="flex items-center gap-3">
            <BookOpen className="w-5 h-5 text-teal-600" />
            <span className="font-semibold text-gray-900">Requirements</span>
          </div>
          {expandedFilters.requirements ? (
            <ChevronUp className="w-5 h-5 text-gray-400" />
          ) : (
            <ChevronDown className="w-5 h-5 text-gray-400" />
          )}
        </button>
        
        {expandedFilters.requirements && (
          <div className="mt-4">
            <label className="block text-sm font-medium text-gray-700 mb-3">
              IELTS Requirement
            </label>
            <div className="flex gap-3">
              <button
                onClick={() => handleFilterChange('requiresIELTS', 'yes')}
                className={`flex-1 py-3 px-4 rounded-xl border-2 transition-all duration-300 ${
                  filters.requiresIELTS === 'yes'
                    ? 'border-teal-500 bg-teal-50 text-teal-700 font-semibold shadow-sm'
                    : 'border-gray-300 bg-white text-gray-600 hover:border-gray-400'
                }`}
              >
                Required
              </button>
              <button
                onClick={() => handleFilterChange('requiresIELTS', 'no')}
                className={`flex-1 py-3 px-4 rounded-xl border-2 transition-all duration-300 ${
                  filters.requiresIELTS === 'no'
                    ? 'border-blue-500 bg-blue-50 text-blue-700 font-semibold shadow-sm'
                    : 'border-gray-300 bg-white text-gray-600 hover:border-gray-400'
                }`}
              >
                Not Required
              </button>
            </div>
          </div>
        )}
      </div>
    </ModernCard>
  );

  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">
              <Award className="w-5 h-5" />
              Discover Global Opportunities
            </div>

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

            <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
              Access thousands of funding opportunities worldwide. Our expert-curated database helps you find the perfect scholarship for your academic journey.
            </p>

            {/* Stats */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-3xl mx-auto">
              <StatCard 
                Icon={Award}
                number={`${scholarships.length}+`}
                label="Scholarships"
                color="teal"
                className="bg-white/50 backdrop-blur-sm"
              />
              <StatCard 
                Icon={Globe}
                number={`${countries.length}+`}
                label="Countries"
                color="blue"
                className="bg-white/50 backdrop-blur-sm"
              />
              <StatCard 
                Icon={DollarSign}
                number="$50M+"
                label="Total Funding"
                color="emerald"
                className="bg-white/50 backdrop-blur-sm"
              />
              <StatCard 
                Icon={Users}
                number="10K+"
                label="Students Helped"
                color="amber"
                className="bg-white/50 backdrop-blur-sm"
              />
            </div>
          </div>
        </div>
      </div>

      {/* Mobile Filter Toggle */}
      <div className="lg:hidden sticky top-0 z-40 bg-white border-b border-gray-200 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-bold text-gray-900">Scholarships</h2>
              <p className="text-sm text-gray-600">{filteredScholarships.length} results found</p>
            </div>
            
            <button
              onClick={toggleMobileFilters}
              className={`flex items-center gap-2 px-4 py-2 rounded-xl transition-all duration-300 ${
                showMobileFilters || hasActiveFilters
                  ? 'bg-linear-to-r from-teal-600 to-blue-500 text-white shadow-lg'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              <Filter className="w-4 h-4" />
              <span>Filters</span>
              {hasActiveFilters && (
                <span className="bg-white text-teal-600 px-2 py-1 rounded-full text-xs font-bold">
                  {activeFilterCount}
                </span>
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Filters Sidebar - Desktop */}
          <div className="hidden lg:block lg:w-80 flex-shrink-0">
            <FiltersSidebar />
          </div>

          {/* Mobile Filters Overlay */}
          {showMobileFilters && (
            <>
              <div 
                className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
                onClick={toggleMobileFilters}
              />
              
              <div className="fixed inset-y-0 left-0 w-80 bg-white z-50 lg:hidden transform transition-transform duration-300 overflow-y-auto shadow-2xl">
                <div className="p-6 border-b border-gray-200">
                  <div className="flex items-center justify-between">
                    <h3 className="text-lg font-bold text-gray-900">Filters</h3>
                    <button
                      onClick={toggleMobileFilters}
                      className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                    >
                      <X className="w-5 h-5 text-gray-600" />
                    </button>
                  </div>
                </div>
                <div className="p-4">
                  <FiltersSidebar />
                </div>
              </div>
            </>
          )}

          {/* Main Content Area */}
          <div className="flex-1">
            {/* Results Header */}
            <ModernCard className="p-6 mb-8">
              <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <div>
                  <h2 className="text-2xl font-bold text-gray-900">
                    Available Scholarships
                  </h2>
                  <p className="text-gray-600 mt-1">
                    Found <span className="font-semibold text-teal-600">{filteredScholarships.length}</span> scholarships matching your criteria
                  </p>
                </div>
                
                {/* Sort Options */}
                <div className="flex items-center gap-4">
                  <span className="text-sm text-gray-600 font-medium">Sort by:</span>
                  <select className="px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-transparent bg-white transition-all duration-300">
                    <option value="newest">Newest First</option>
                    <option value="amount">Highest Amount</option>
                    <option value="deadline">Closest Deadline</option>
                  </select>
                </div>
              </div>
            </ModernCard>

            {/* Scholarships Grid */}
            {currentScholarships.length === 0 ? (
              <ModernCard className="p-12 text-center">
                <Award className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                <h3 className="text-xl font-semibold text-gray-900 mb-2">No scholarships found</h3>
                <p className="text-gray-600 mb-6">Try adjusting your filters to see more results</p>
                <button
                  onClick={clearFilters}
                  className="px-6 py-3 bg-linear-to-r from-teal-600 to-blue-500 text-white rounded-xl hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 font-semibold"
                >
                  Clear All Filters
                </button>
              </ModernCard>
            ) : (
              <>
                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                  {currentScholarships.map((scholarship) => (
                    <ModernCard 
                      key={scholarship.id} 
                      className="group hover:shadow-2xl transition-all duration-500 overflow-hidden flex flex-col h-full"
                    >
                      {/* Scholarship Image */}
                      <div className="relative h-48 overflow-hidden">
                        <Image
                          src={getImageUrl(scholarship.image)}
                          alt={scholarship.title}
                          fill
                          className="object-contain group-hover:scale-105 transition-transform duration-500"
                        />
                        
                        {/* Amount Badge */}
                        <div className="absolute top-4 right-4">
                          <div className="px-3 py-1 bg-linear-to-r from-emerald-500 to-teal-500 text-white text-sm font-semibold rounded-full shadow-lg">
                            {formatAmountRange(scholarship.amount_min, scholarship.amount_max, scholarship.currency_symbol)}
                          </div>
                        </div>

                        {/* Overlay Gradient */}
                        <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                      </div>

                      {/* Scholarship Content */}
                      <div className="p-6 flex-grow flex flex-col">
                        {/* Title */}
                        <Link href={`/scholarships/${scholarship.slug}`}>
                          <h3 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-teal-600 transition-colors duration-300">
                            {scholarship.title}
                          </h3>
                        </Link>

                        {/* Description */}
                        <p className="text-gray-600 leading-relaxed mb-4 flex-grow">
                          {scholarship.description?.replace(/<[^>]*>/g, '')
                            .split(' ')
                            .slice(0, 25)
                            .join(' ') + (scholarship.description?.split(' ').length > 25 ? '...' : '')}
                        </p>

                        {/* Details Grid */}
                        <div className="grid grid-cols-2 gap-3 mb-4">
                          <div className="flex items-center space-x-2">
                            <MapPin className="w-4 h-4 text-teal-600" />
                            <span className="text-sm text-gray-600">{scholarship.country_name}</span>
                          </div>
                          
                          <div className="flex items-center space-x-2">
                            <GraduationCap className="w-4 h-4 text-teal-600" />
                            <span className="text-sm text-gray-600" title={formatQualifications(scholarship.qualifications)}>
                              {formatQualifications(scholarship.qualifications)}
                            </span>
                          </div>

                          <div className="flex items-center space-x-2">
                            <Wallet className="w-4 h-4 text-teal-600" />
                            <span className="text-sm text-gray-600 font-medium">
                              {formatAmountRange(scholarship.amount_min, scholarship.amount_max, scholarship.currency_symbol)}
                            </span>
                          </div>
                          
                          <div className="flex items-center space-x-2">
                            <Award className="w-4 h-4 text-teal-600" />
                            <span className="text-sm text-gray-600">
                              {formatPercentage(scholarship.percentage_cover)}
                            </span>
                          </div>
                        </div>

                        {/* Requirements */}
                        <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                          <div className="flex items-center space-x-4 text-sm text-gray-500">
                            <span className={`px-2 py-1 rounded-full ${scholarship.ielts ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}>
                              {scholarship.ielts ? 'IELTS Required' : 'No IELTS'}
                            </span>
                            {scholarship.cgpa && (
                              <span className="font-medium text-gray-700">CGPA: {scholarship.cgpa}</span>
                            )}
                          </div>
                        </div>
                      </div>

                      {/* Apply Button */}
                      <div className="px-6 pb-6">
                        <Link href={`/scholarships/${scholarship.slug}`}>
                          <button className="w-full bg-linear-to-r from-teal-600 to-blue-500 text-white py-3 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center space-x-2 group cursor-pointer">
                            <span>View Details</span>
                            <svg className="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                            </svg>
                          </button>
                        </Link>
                      </div>
                    </ModernCard>
                  ))}
                </div>

                {/* Pagination */}
                {totalPages > 1 && (
                  <div className="flex justify-center items-center space-x-2 mt-12">
                    <button
                      onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                      disabled={currentPage === 1}
                      className="px-6 py-3 border border-gray-300 rounded-xl hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
                    >
                      Previous
                    </button>
                    
                    {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
                      <button
                        key={page}
                        onClick={() => setCurrentPage(page)}
                        className={`px-4 py-3 rounded-xl transition-colors font-medium ${
                          currentPage === page
                            ? 'bg-linear-to-r from-teal-600 to-blue-500 text-white shadow-lg'
                            : 'border border-gray-300 hover:bg-gray-50'
                        }`}
                      >
                        {page}
                      </button>
                    ))}
                    
                    <button
                      onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                      disabled={currentPage === totalPages}
                      className="px-6 py-3 border border-gray-300 rounded-xl hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
                    >
                      Next
                    </button>
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      </div>

      {/* Features 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 Use Our Scholarship Finder
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Comprehensive database with verified opportunities and expert guidance
            </p>
          </div>
          
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <FeatureCard
              Icon={CheckCircle}
              title="Verified Listings"
              description="All scholarships are verified and regularly updated"
              color="teal"
            />

            <FeatureCard
              Icon={Zap}
              title="Quick Matching"
              description="Smart filters to find scholarships matching your profile"
              color="blue"
            />

            <FeatureCard
              Icon={Shield}
              title="Secure Process"
              description="Your information is protected and confidential"
              color="emerald"
            />

            <FeatureCard
              Icon={Sparkles}
              title="Expert Support"
              description="Get help from our experienced advisors"
              color="amber"
            />
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="pb-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-linear-to-r from-teal-600 to-blue-500 rounded-3xl p-12 text-center shadow-2xl">
            <h3 className="text-3xl md:text-4xl font-bold text-white mb-6">
              Need Help Finding the Right Scholarship?
            </h3>
            <p className="text-white/90 text-lg md:text-xl mb-8 max-w-2xl mx-auto leading-relaxed">
              Our expert advisors can help you find scholarships that match your profile and increase your chances of success.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <Link href={"/free-consultation"}>
                <button className="px-8 py-4 bg-white cursor-pointer text-teal-700 font-semibold rounded-2xl hover:bg-gray-100 transition-all duration-300 transform hover:-translate-y-1 shadow-lg text-lg">
                  Get Free Consultation
                </button>
              </Link>
              <Link href={"/contact-us"}>
                <button className="px-8 py-4 bg-transparent border-2 cursor-pointer border-white text-white font-semibold rounded-2xl hover:bg-white hover:text-teal-700 transition-all duration-300 transform hover:-translate-y-1 text-lg">
                  Contact Our Experts
                </button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ScholarshipsPage;