'use client'; import React, { useCallback, useEffect, useState } from 'react'; import Image from 'next/image'; import Link from 'next/link'; import { AnimatePresence, motion, useReducedMotion } from 'motion/react'; import api from '@/lib/api'; export type HeroStat = { value: string; label: string; }; export type HeroSlide = { id: number | string; badge?: string | null; title: string; subtitle?: string | null; primary_button_text?: string | null; primary_button_link?: string | null; secondary_button_text?: string | null; secondary_button_link?: string | null; stats?: HeroStat[] | null; image?: string | null; image_large?: string | null; image_medium?: string | null; }; const AUTOPLAY_MS = 7000; const FALLBACK_SLIDES: HeroSlide[] = [ { id: 'fallback-1', badge: 'When a Girl Learns', title: 'The World Rises', subtitle: 'Unlocking potential, transforming communities. SSEOA creates educational opportunities for girls and women in remote regions of Afghanistan.', primary_button_text: 'Donate Now', primary_button_link: '/donate', secondary_button_text: 'Learn More', secondary_button_link: '/about-us', image: '/images/hero/slider-1.webp', stats: [ { value: '2,000+', label: 'Education Support' }, { value: '1,500+', label: 'Kankor Preparation' }, { value: '1,200+', label: 'Early Childhood Development' }, ], }, { id: 'fallback-2', badge: 'Every Educated Girl', title: 'Plants a Seed of Change', subtitle: 'Building leaders through learning — Community-Based Education, ECD, and classrooms where schools cannot reach.', primary_button_text: 'Our Programs', primary_button_link: '/programs/education', secondary_button_text: 'Read Stories', secondary_button_link: '/blog?category=story', image: '/images/hero/slider-2.webp', stats: [ { value: '3,130', label: 'CBE Students' }, { value: '1,800+', label: 'Vocational & Literacy' }, { value: '1,017', label: 'Teachers Recruited' }, ], }, { id: 'fallback-3', badge: 'From Classrooms to Communities', title: 'She Transforms All', subtitle: 'Empowering girls is empowering generations. Livelihood skills, literacy, and education that help families thrive.', primary_button_text: 'Get Involved', primary_button_link: '/#get-involved', secondary_button_text: 'What We Do', secondary_button_link: '/#what-we-do', image: '/images/hero/slider-3.webp', stats: [ { value: '105,081', label: 'Girls Reached' }, { value: '1,445', label: 'Women in Literacy' }, { value: '10', label: 'Provinces' }, ], }, ]; const STAT_ICONS = [ , , , ]; function isExternalLink(href: string) { return /^https?:\/\//i.test(href) || href.startsWith('mailto:') || href.startsWith('tel:'); } function HeroCtaLink({ href, children }: { href: string; children: React.ReactNode }) { if (isExternalLink(href)) { return ( {children} ); } return {children}; } function slideImage(slide?: HeroSlide | null) { return slide?.image_large || slide?.image_medium || slide?.image || '/images/hero/slider-1.webp'; } function SlidePhoto({ src, alt, priority = false, className = 'object-cover object-center', }: { src: string; alt: string; priority?: boolean; className?: string; }) { if (src.startsWith('http')) { // eslint-disable-next-line @next/next/no-img-element return {alt}; } return ( {alt} ); } function HighlightTitle({ title }: { title: string }) { const words = title.trim().split(/\s+/); const last = words.pop() ?? title; const rest = words.join(' '); return (

{rest ? {rest} : null} {last}

); } /** * Full-bleed hero — active slide fills the viewport; smaller thumbnails for navigation. */ export const Hero: React.FC = () => { const reduceMotion = useReducedMotion(); const [slides, setSlides] = useState(FALLBACK_SLIDES); const [loading, setLoading] = useState(true); const [index, setIndex] = useState(0); const [direction, setDirection] = useState(1); const [userPaused, setUserPaused] = useState(false); const [hoverPaused, setHoverPaused] = useState(false); const [progressKey, setProgressKey] = useState(0); const paused = userPaused || hoverPaused; useEffect(() => { let cancelled = false; const loadSlides = async () => { try { setLoading(true); const response: unknown = await api.getHeroSlides({ status: 'active' }); let data: HeroSlide[] = []; if (Array.isArray(response)) { data = response as HeroSlide[]; } else if ( response && typeof response === 'object' && 'data' in response && Array.isArray((response as { data: unknown }).data) ) { data = (response as { data: HeroSlide[] }).data; } if (!cancelled && data.length > 0) { setSlides(data); setIndex(0); setProgressKey((key) => key + 1); } } catch (error) { console.error('Error fetching hero slides:', error); } finally { if (!cancelled) setLoading(false); } }; loadSlides(); return () => { cancelled = true; }; }, []); const slideCount = slides.length; const activeSlide = slides[index] ?? slides[0]; const stats = Array.isArray(activeSlide?.stats) ? activeSlide.stats : []; const goTo = useCallback( (nextIndex: number) => { if (slideCount <= 1) return; const normalized = ((nextIndex % slideCount) + slideCount) % slideCount; let dir = normalized > index ? 1 : -1; if (index === slideCount - 1 && normalized === 0) dir = 1; if (index === 0 && normalized === slideCount - 1) dir = -1; setDirection(dir); setIndex(normalized); setProgressKey((key) => key + 1); }, [index, slideCount] ); const goNext = useCallback(() => goTo(index + 1), [goTo, index]); const goPrev = useCallback(() => goTo(index - 1), [goTo, index]); useEffect(() => { if (paused || reduceMotion || slideCount <= 1 || loading) return; const timer = window.setTimeout(goNext, AUTOPLAY_MS); return () => window.clearTimeout(timer); }, [goNext, index, loading, paused, progressKey, reduceMotion, slideCount]); useEffect(() => { const onKeyDown = (event: KeyboardEvent) => { if (event.key === 'ArrowRight') goNext(); if (event.key === 'ArrowLeft') goPrev(); }; window.addEventListener('keydown', onKeyDown); return () => window.removeEventListener('keydown', onKeyDown); }, [goNext, goPrev]); return (
setHoverPaused(true)} onMouseLeave={() => setHoverPaused(false)} > {/* Full-width / full-height active image */}
{/* Content */}
{activeSlide?.badge ? ( {activeSlide.badge} ) : null}
{activeSlide?.subtitle ? (

{activeSlide.subtitle}

) : null} {(activeSlide?.primary_button_text || activeSlide?.secondary_button_text) && (
{activeSlide.primary_button_text && activeSlide.primary_button_link ? ( {activeSlide.primary_button_text} ) : null} {activeSlide.secondary_button_text && activeSlide.secondary_button_link ? ( {activeSlide.secondary_button_text} ) : null}
)} {stats.length > 0 ? (
{stats.slice(0, 3).map((stat, statIndex) => (
{STAT_ICONS[statIndex % STAT_ICONS.length]}
{stat.value}
{stat.label}
))}
) : null}
{/* Thumbnail nav — smaller previews, bottom right */} {slideCount > 1 ? (
{String(index + 1).padStart(2, '0')} / {String(slideCount).padStart(2, '0')}
{slides.map((slide, slideIndex) => { if (slideIndex === index) return null; return ( ); })}
{!reduceMotion ? (
) : null}
) : null}
); };