import React, { useState, useEffect, useRef, useCallback } from 'react'; const App: React.FC = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [activeSection, setActiveSection] = useState(0); const [isVideoPlaying, setIsVideoPlaying] = useState(false); const scrollContainerRef = useRef(null); const sections = [ { id: 'section1', label: 'الرئيسية' }, { id: 'section2', label: 'لفيشطة' }, { id: 'section3', label: 'أسايس' }, { id: 'section4', label: 'لمعروف' }, { id: 'section5', label: 'أمصري' }, { id: 'section6', label: 'تواصل معنا' }, ]; const sliderImages = [ "https://festivalinezgane.com/ismkan22.jpeg", "https://festivalinezgane.com/nasim.jpeg", "https://festivalinezgane.com/tachinwite.jpeg", "https://festivalinezgane.com/itran.webp", "https://festivalinezgane.com/affiche-amdokal.webp" ]; // Duplicate for loop const displayImages = [...sliderImages, ...sliderImages]; const handleScroll = useCallback(() => { if (!scrollContainerRef.current) return; const scrollContainer = scrollContainerRef.current; const sectionElements = scrollContainer.querySelectorAll('.section'); let current = 0; sectionElements.forEach((section, index) => { const rect = section.getBoundingClientRect(); if (rect.top >= -100 && rect.top <= 100) { current = index; } }); setActiveSection(current); }, []); useEffect(() => { const container = scrollContainerRef.current; if (container) { container.addEventListener('scroll', handleScroll); } return () => { if (container) { container.removeEventListener('scroll', handleScroll); } }; }, [handleScroll]); const toggleMenu = () => setIsMenuOpen(!isMenuOpen); const closeMenu = () => setIsMenuOpen(false); const scrollToSection = (index: number) => { const sectionId = sections[index].id; const element = document.getElementById(sectionId); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } closeMenu(); }; const handleVideoPlay = () => { setIsVideoPlaying(true); }; return (
{/* Menu Overlay */}
{/* Mobile Side Menu */}
{/* Floating Header */}
{/* 1. Logo (Right in RTL) */} Festival Inezgane Logo {/* 2. Nav (Center) */} {/* 3. Button (Left in RTL) */} {/* 4. Hamburger (Mobile position) */}
{/* Social Media Icons */}
} /> } /> } /> } /> } />
{/* Scroll Indicator */}
{sections.map((_, idx) => (
scrollToSection(idx)} /> ))}
{/* Main Content Sections */}
{/* Section 1 - Festival Introduction */}
شعار مهرجان انزكان

مهرجان انزكان

فعاليات اسايس نايت لقايد

مهرجان ثقافي يحتفي بالهوية، الذاكرة، والتراث الأمازيغي السوسي الأصيل

شعار المهرجان
{isVideoPlaying && ( )}
{/* Section 2 - Editorial Statement */}

كلمة مدير مهرجان انزكان
فعاليات أسايس نايت القايد

يسعدني، وبكل فخر واعتزاز، أن أرحب بكم في فعاليات مهرجان إنزكان – ليالي أسايس نايت القايد، هذا الموعد الثقافي الذي يحتفي بالهوية الأمازيغية السوسية، ويستحضر الذاكرة التاريخية العميقة لمدينة إنزكان ومكانتها الرمزية في تاريخ سوس والمغرب.

لقد ارتبط اسم إنزكان تاريخيًا بـ أسايس، ذلك الفضاء الذي لم يكن مجرد ساحة، بل مركزًا نبضًا بالحياة، وملتقى للتجارة والفن والحكي، ومرآةً لعلاقات المجتمع والذاكرة الجماعية. ومن هذا العمق، تنطلق ليالي أسايس نايت القايد كمبادرة ثقافية تسعى إلى إعادة إحياء هذا الإرث بأسلوب معاصر يحترم أصالته ويقرّبه من الأجيال الجديدة.

ويقدّم المهرجان برمجة ثقافية وفنية متنوعة تشمل عروض الفنون الشعبية، خيام الحكي، فقرات تاريخية مفتوحة، واحتفالية رأس السنة الأمازيغية، إضافة إلى ندوات ولقاءات فكرية، تحتضنها فضاءات ذات حمولة رمزية قوية مثل قصبة القايد وساحات المدينة التاريخية.

وإذ نطمح إلى جعل هذا الحدث موعدًا ثقافيًا سنويًا، فإننا نراهن على دوره في تعزيز الإشعاع الثقافي لإنزكان، وفتح حوار متجدد بين الماضي والحاضر، بين الذاكرة والإبداع، في إطار يحترم التنوع والانفتاح.

إبراهيم المرابط
مدير مهرجان إنزكان – ليالي أسايس نايت القايد

{/* Section 3 - First Major Amazigh Evening */}
{/* Top Container - 15% height */}

السهرة الأمازيغية الكبرى الأولى

{/* Bottom Container - 80% height */}
{/* Right Column (65% width) - Slider Carousel - NOW FIRST IN DOM (Right in RTL) */}
{displayImages.map((src, i) => (
{`FESTIVAL-${i}`}
))} {/* Duplicate for seamless infinite loop */} {displayImages.map((src, i) => (
{`FESTIVAL-DUP-${i}`}
))}
{/* Left Column (35% width) - Vertical Image - NOW SECOND IN DOM (Left in RTL) */}
السهرة الأمازيغية
{/* Placeholders for sections 4-6 to maintain snap functionality */}

لمعروف

قريباً

أمصري

قريباً

{/* Section 6 - News & Updates */}
{/* Zone 1 - 15% height */}

آخر مستجدات المهرجان

أخبار، بلاغات، وتحديثات مهرجان إنزكان

{/* Zone 2 - 70% height */}
{[...Array(6)].map((_, i) => (
Festival Post {/* Overlay Gradient: 95% top (0.05 visible), 50% bottom (0.5 visible) */}

دور الإعلام في نجاح مهرجان إنزكان أسايس نايت القايد

))}
{/* Zone 3 - 15% height */}

2026 © Festival Inezgane - فعاليات أسايس ،ايت القايد

); }; interface SocialLinkProps { href: string; title: string; icon: React.ReactNode; } const SocialLink: React.FC = ({ href, title, icon }) => ( {icon} ); interface PartnerLogoProps { src: string; alt: string; className?: string; } const PartnerLogo: React.FC = ({ src, alt, className }) => ( {alt} { const target = e.target as HTMLImageElement; target.style.background = '#e5e7eb'; target.alt = 'Image unavailable'; }} /> ); export default App;