'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Header } from '@/app/components/Header';
import { Footer } from '@/app/components/Footer';
import api from '@/lib/api';

export default function ProjectDetailPage() {
  const params = useParams();
  const slug = params?.slug as string;
  
  const [project, setProject] = useState<any>(null);
  const [relatedProjects, setRelatedProjects] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isVisible, setIsVisible] = useState(false);
  const [activeImageIndex, setActiveImageIndex] = useState(0);

  useEffect(() => {
    if (slug) {
      fetchProject();
    }
  }, [slug]);

  useEffect(() => {
    if (!loading && project) {
      setTimeout(() => setIsVisible(true), 100);
    }
  }, [loading, project]);

  const fetchProject = async () => {
    try {
      setLoading(true);
      setError(null);
      setIsVisible(false);
      // Include all necessary relations for the project detail page
      const data: any = await api.getProject(slug, {
        include: 'thematicArea,donor,provinces,districts'
      });
      
      setProject(data);
      
      // Fetch related projects from the same thematic area
      if (data.thematic_area?.slug) {
        const thematicAreaData: any = await api.getThematicArea(data.thematic_area.slug);
        if (thematicAreaData.projects) {
          const related = thematicAreaData.projects
            .filter((p: any) => p.slug !== slug)
            .slice(0, 3);
          setRelatedProjects(related);
        }
      }
    } catch (err: any) {
      console.error('Error fetching project:', err);
      setError(err?.message || 'Failed to load project');
    } finally {
      setLoading(false);
    }
  };

  const statusColors: Record<string, string> = {
    'active': 'bg-green-100 text-green-700 border-green-300',
    'completed': 'bg-blue-100 text-blue-700 border-blue-300',
    'ongoing': 'bg-yellow-100 text-yellow-700 border-yellow-300',
    'planned': 'bg-gray-100 text-gray-700 border-gray-300',
    'suspended': 'bg-red-100 text-red-700 border-red-300'
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="min-h-[80vh] flex items-center justify-center px-4">
          <div className="text-center">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
            <p className="text-lg text-neutral-600">Loading project...</p>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  if (error || !project) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="min-h-[80vh] flex items-center justify-center px-4">
          <div className="text-center max-w-2xl">
            <h1 className="text-4xl md:text-5xl font-bold text-primary-500 mb-4">
              {error ? 'Error Loading Project' : 'Project Not Found'}
            </h1>
            <p className="text-lg md:text-xl text-neutral-600 mb-8">
              {error || 'The project you\'re looking for doesn\'t exist.'}
            </p>
            <Link 
              href="/"
              className="inline-flex items-center gap-2 px-6 py-3 bg-primary-500 text-neutral-900 rounded-lg hover:bg-primary-700 transition-colors font-semibold"
            >
              Back to Home
            </Link>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  const images = [
    project.featured_image,
    project.image,
    // Add more images from gallery if available
  ].filter(Boolean);

  return (
    <div className="min-h-screen bg-white">
      <Header />
      
      {/* Hero Section - Split Design */}
      <section className="relative bg-gradient-to-br from-neutral-50 to-white pt-28 pb-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Breadcrumb */}
          <nav className={`mb-8 transition-all duration-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'}`} aria-label="Breadcrumb">
            <ol className="flex items-center space-x-2 text-sm">
              <li>
                <Link href="/" className="text-neutral-600 hover:text-primary-600 transition-colors duration-200">
                  Home
                </Link>
              </li>
              <li className="text-neutral-400">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </li>
              {project.thematic_area && (
                <>
                  <li>
                    <Link href={`/programs/${project.thematic_area.slug}`} className="text-neutral-600 hover:text-primary-600 transition-colors duration-200">
                      {project.thematic_area.title}
                    </Link>
                  </li>
                  <li className="text-neutral-400">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </li>
                </>
              )}
              <li className="text-neutral-900 font-medium">Project Details</li>
            </ol>
          </nav>

          {/* Hero Content - Split Layout */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            {/* Left Side - Text Content */}
            <div className={`transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-8'}`}>
              <h1 className="text-3xl md:text-4xl lg:text-5xl font-black text-neutral-900 mb-6 leading-tight transition-all duration-500">
                {project.name}
              </h1>
              
              {project.description && (
                <p className={`text-lg md:text-xl text-neutral-600 mb-8 leading-relaxed transition-all duration-700 delay-100 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
                  {project.description}
                </p>
              )}

              {/* Key Info Tags */}
              <div className={`flex flex-wrap gap-3 transition-all duration-700 delay-200 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
                {project.beneficiaries_count && (
                  <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 hover:border-blue-300 transition-all duration-300 hover:scale-105">
                    <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    <span className="text-sm font-semibold text-blue-900">{project.beneficiaries_count.toLocaleString()} Beneficiaries</span>
                  </div>
                )}
                {project.start_date && project.end_date && (
                  <div className="inline-flex items-center gap-2 px-4 py-2 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 hover:border-green-300 transition-all duration-300 hover:scale-105">
                    <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    <span className="text-sm font-semibold text-green-900">
                      {new Date(project.start_date).getFullYear()} - {new Date(project.end_date).getFullYear()}
                    </span>
                  </div>
                )}
              </div>
            </div>

            {/* Right Side - Image */}
            <div className={`transition-all duration-1000 ease-out delay-300 ${isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-8'}`}>
              <div className="relative rounded-2xl overflow-hidden shadow-2xl group">
                {project.featured_image || project.image ? (
                  <img 
                    src={project.featured_image || project.image}
                    alt={project.name}
                    className="w-full h-[400px] md:h-[500px] object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                ) : (
                  <div className="w-full h-[400px] md:h-[500px] flex items-center justify-center bg-gradient-to-br from-neutral-100 to-neutral-200">
                    <svg className="w-24 h-24 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                  </div>
                )}
                {/* Decorative overlay gradient */}
                <div className="absolute inset-0 bg-gradient-to-t from-neutral-900/20 to-transparent pointer-events-none transition-opacity duration-500 group-hover:opacity-0"></div>
              </div>
            </div>
          </div>
        </div>

      </section>

      {/* Main Content */}
      <section className="py-16 md:py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {/* Main Content Column */}
            <div className="lg:col-span-2">
              {/* Project Details */}
              {project.content && (
                <div className="mb-12 transition-all duration-700 hover:translate-x-1">
                  <h2 className="text-3xl font-bold text-neutral-900 mb-6 flex items-center gap-3 group">
                    <div className="w-2 h-10 bg-primary-600 rounded-full group-hover:h-12 transition-all duration-300"></div>
                    Project Details
                  </h2>
                  <div 
                    className="prose prose-lg max-w-none text-neutral-700 leading-relaxed
                    [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:text-neutral-900 [&_h1]:mb-4 [&_h1]:mt-8 [&_h1]:transition-colors [&_h1]:duration-300
                    [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:text-neutral-900 [&_h2]:mb-4 [&_h2]:mt-6 [&_h2]:transition-colors [&_h2]:duration-300
                    [&_h3]:text-xl [&_h3]:font-bold [&_h3]:text-neutral-900 [&_h3]:mb-3 [&_h3]:mt-4 [&_h3]:transition-colors [&_h3]:duration-300
                    [&_p]:mb-4 [&_p]:leading-relaxed
                    [&_ul]:mb-4 [&_ul]:pl-6 [&_ul]:list-disc
                    [&_ol]:mb-4 [&_ol]:pl-6 [&_ol]:list-decimal
                    [&_li]:mb-2
                    [&_strong]:font-bold [&_strong]:text-neutral-900
                    [&_a]:text-primary-600 [&_a]:underline [&_a]:hover:text-primary-700 [&_a]:transition-colors [&_a]:duration-300"
                    dangerouslySetInnerHTML={{ __html: project.content }}
                  />
                </div>
              )}

              {/* Image Gallery */}
              {images.length > 1 && (
                <div className="mb-12 transition-all duration-700 hover:translate-x-1">
                  <h2 className="text-3xl font-bold text-neutral-900 mb-6 flex items-center gap-3 group">
                    <div className="w-2 h-10 bg-primary-600 rounded-full group-hover:h-12 transition-all duration-300"></div>
                    Project Gallery
                  </h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {images.map((img, index) => (
                      <div key={index} className="group relative aspect-video rounded-xl overflow-hidden shadow-lg cursor-pointer hover:shadow-2xl transition-all duration-500">
                        <img 
                          src={img}
                          alt={`${project.name} - Image ${index + 1}`}
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                        />
                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all duration-500 flex items-center justify-center">
                          <svg className="w-12 h-12 text-white transform scale-0 group-hover:scale-100 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
                          </svg>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Provinces & Districts */}
              {((project.provinces && project.provinces.length > 0) || (project.districts && project.districts.length > 0)) && (
                <div className="mb-12 transition-all duration-700 hover:translate-x-1">
                  <h2 className="text-3xl font-bold text-neutral-900 mb-6 flex items-center gap-3 group">
                    <div className="w-2 h-10 bg-primary-600 rounded-full group-hover:h-12 transition-all duration-300"></div>
                    Implementation Areas
                  </h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {project.provinces && project.provinces.length > 0 && (
                      <div className="bg-neutral-50 rounded-xl p-6 border border-neutral-200 hover:bg-neutral-100 hover:border-neutral-300 hover:shadow-md transition-all duration-500">
                        <h3 className="text-lg font-bold text-neutral-900 mb-4 flex items-center gap-2">
                          <svg className="w-5 h-5 text-primary-600 transition-transform duration-300 hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                          </svg>
                          Provinces
                        </h3>
                        <div className="flex flex-wrap gap-2">
                          {project.provinces.map((province: any) => (
                            <span key={province.id} className="px-3 py-1.5 bg-white border border-neutral-300 rounded-lg text-sm font-medium text-neutral-700 hover:bg-primary-50 hover:border-primary-300 hover:text-primary-700 transition-all duration-300">
                              {province.name}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                    {project.districts && project.districts.length > 0 && (
                      <div className="bg-neutral-50 rounded-xl p-6 border border-neutral-200 hover:bg-neutral-100 hover:border-neutral-300 hover:shadow-md transition-all duration-500">
                        <h3 className="text-lg font-bold text-neutral-900 mb-4 flex items-center gap-2">
                          <svg className="w-5 h-5 text-primary-600 transition-transform duration-300 hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                          </svg>
                          Districts
                        </h3>
                        <div className="flex flex-wrap gap-2">
                          {project.districts.map((district: any) => (
                            <span key={district.id} className="px-3 py-1.5 bg-white border border-neutral-300 rounded-lg text-sm font-medium text-neutral-700 hover:bg-primary-50 hover:border-primary-300 hover:text-primary-700 transition-all duration-300">
                              {district.name}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>

            {/* Sidebar */}
            <div className="lg:col-span-1">
              <div className="sticky top-24 space-y-6">
                {/* Donor Information */}
                {project.donor && (
                  <div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-2xl p-6 border-2 border-primary-200 shadow-lg hover:shadow-xl hover:scale-[1.02] transition-all duration-500">
                    <h3 className="text-lg font-bold text-primary-900 mb-4 flex items-center gap-2">
                      <svg className="w-6 h-6 text-primary-600 transition-transform duration-300 group-hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                      Funded By
                    </h3>
                    <div className="text-2xl font-black text-primary-900 transition-colors duration-300">{project.donor.name}</div>
                    {project.donor.description && (
                      <p className="text-sm text-primary-800 mt-3 leading-relaxed">{project.donor.description}</p>
                    )}
                  </div>
                )}

                {/* Quick Facts */}
                <div className="bg-white rounded-2xl p-6 border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300">
                  <h3 className="text-lg font-bold text-neutral-900 mb-4">Quick Facts</h3>
                  <div className="space-y-4">
                    {project.duration_in_days && (
                      <div className="flex items-start gap-3 pb-4 border-b border-neutral-200 group hover:bg-purple-50 -mx-3 px-3 py-2 rounded-lg transition-all duration-300">
                        <div className="flex-shrink-0 w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-200 transition-colors duration-300">
                          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                        </div>
                        <div>
                          <div className="text-sm text-neutral-600 mb-1">Duration</div>
                          <div className="text-sm font-bold text-neutral-900">{project.duration_in_days} Days</div>
                        </div>
                      </div>
                    )}
                    <div className="flex items-start gap-3 pb-4 border-b border-neutral-200 group hover:bg-green-50 -mx-3 px-3 py-2 rounded-lg transition-all duration-300">
                      <div className="flex-shrink-0 w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200 transition-colors duration-300">
                        <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      </div>
                      <div>
                        <div className="text-sm text-neutral-600 mb-1">Status</div>
                        <div className="text-sm font-bold text-neutral-900 capitalize">{project.status}</div>
                      </div>
                    </div>
                    {project.views_count !== undefined && (
                      <div className="flex items-start gap-3 group hover:bg-blue-50 -mx-3 px-3 py-2 rounded-lg transition-all duration-300">
                        <div className="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-200 transition-colors duration-300">
                          <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                          </svg>
                        </div>
                        <div>
                          <div className="text-sm text-neutral-600 mb-1">Views</div>
                          <div className="text-sm font-bold text-neutral-900">{project.views_count.toLocaleString()}</div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>

                {/* CTA Box */}
                <div className="bg-gradient-to-br from-primary-600 to-primary-700 rounded-2xl p-6 text-white shadow-xl">
                  <h3 className="text-lg font-bold mb-3">Support This Project</h3>
                  <p className="text-sm opacity-90 mb-4 leading-relaxed">
                    Your contribution helps us reach more beneficiaries and create lasting impact.
                  </p>
                  <Link href="/donate">
                    <button className="w-full py-3 px-4 bg-white text-primary-600 font-bold rounded-lg hover:bg-neutral-50 transition-all duration-200 flex items-center justify-center gap-2 shadow-lg">
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                      </svg>
                      Donate Now
                    </button>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Related Projects */}
      {relatedProjects.length > 0 && (
        <section className="py-16 md:py-20 bg-neutral-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 md:text-4xl font-bold text-neutral-900 mb-4">
                Related Projects
              </h2>
              <p className="text-lg text-neutral-600 max-w-2xl mx-auto">
                Explore other projects in the {project.thematic_area?.title} thematic area
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {relatedProjects.map((relProject: any) => (
                <Link key={relProject.id} href={`/projects/${relProject.slug}`}>
                  <div className="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-neutral-200">
                    <div className="relative h-48 overflow-hidden bg-neutral-100">
                      {relProject.featured_image || relProject.image ? (
                        <img 
                          src={relProject.featured_image || relProject.image}
                          alt={relProject.name}
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                        />
                      ) : (
                        <div className="w-full h-full flex items-center justify-center">
                          <svg className="w-16 h-16 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                          </svg>
                        </div>
                      )}
                    </div>
                    <div className="p-6">
                      <h3 className="text-xl font-bold text-neutral-900 mb-2 group-hover:text-primary-600 transition-colors line-clamp-2">
                        {relProject.name}
                      </h3>
                      <p className="text-sm text-neutral-600 mb-4 line-clamp-3 leading-relaxed">
                        {relProject.description}
                      </p>
                      {relProject.beneficiaries_count && (
                        <div className="flex items-center gap-2 text-sm text-neutral-700">
                          <svg className="w-4 h-4 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                          </svg>
                          <span className="font-semibold">{relProject.beneficiaries_count.toLocaleString()}</span>
                          <span>beneficiaries</span>
                        </div>
                      )}
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

      <Footer />
    </div>
  );
}