script.js

// قاموس الترجمة المخصص للمنصة بالاسم الجديد الفخم PixelPulse
const translations = {
    ar: {
        mainTitle: "PixelPulse المعرض الإبداعي",
        subTitle: "مشروع الـ Frontend - التدريب العملي لـ CodeAlpha",
        filterAll: "الكل",
        filterNature: "طبيعة",
        filterArch: "معمار",
        filterTech: "تقنية",
        filterAnimals: "حيوانات"
    },
    en: {
        mainTitle: "PixelPulse Showcase",
        subTitle: "Frontend Project - CodeAlpha Practical Internship",
        filterAll: "All",
        filterNature: "Nature",
        filterArch: "Architecture",
        filterTech: "Technology",
        filterAnimals: "Animals"
    }
};


const themeToggle = document.getElementById('theme-toggle');
const langToggle = document.getElementById('lang-toggle');
const langText = document.getElementById('lang-text');
const html = document.documentElement;

const galleryItems = document.querySelectorAll('.gallery-item');
const filterButtons = document.querySelectorAll('.filter-buttons .btn');
const lightbox = document.querySelector('.lightbox');
const lightboxImg = document.querySelector('.lightbox-content img');
const lightboxCaption = document.querySelector('.lightbox .caption');
const closeBtn = document.querySelector('.close-btn');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

let currentLang = 'ar';
let currentIndex = 0;
let activeImages = [...galleryItems];

// التبديل السلس بين اللغات
langToggle.addEventListener('click', () => {
    currentLang = currentLang === 'ar' ? 'en' : 'ar';
    updateLanguage();
});

function updateLanguage() {
    langText.textContent = currentLang === 'ar' ? 'EN' : 'AR';

    // ترجمة النصوص العامة المتواجدة في الصفحة
    document.querySelectorAll('[data-i18n]').forEach(element => {
        const key = element.getAttribute('data-i18n');
        if (translations[currentLang][key]) {
            element.textContent = translations[currentLang][key];
        }
    });

    // ترجمة عناوين الصور ديناميكياً لتجنب اختلاف الطول والارتفاع
    galleryItems.forEach(item => {
        const titleSpan = item.querySelector('.title');
        const text = titleSpan.getAttribute(`data-${currentLang}`);
        titleSpan.textContent = text;
    });

    if (lightbox.classList.contains('active')) {
        const activeItem = activeImages[currentIndex];
        lightboxCaption.textContent = activeItem.querySelector('.title').textContent;
    }
}

// التحكم بالوضع الليلي والنهاري (Dark / Light)
themeToggle.addEventListener('click', () => {
    const currentTheme = html.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    html.setAttribute('data-theme', newTheme);
    
    const icon = themeToggle.querySelector('i');
    icon.className = newTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
});

// تصفية الفئات بدقة عالية
filterButtons.forEach(button => {
    button.addEventListener('click', () => {
        document.querySelector('.filter-buttons .btn.active').classList.remove('active');
        button.classList.add('active');

        const filterValue = button.getAttribute('data-filter');
        activeImages = [];

        galleryItems.forEach(item => {
            if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                item.style.display = 'block';
                activeImages.push(item);
            } else {
                item.style.display = 'none';
            }
        });
    });
});

// تفعيل نافذة العرض الـ Lightbox
galleryItems.forEach(item => {
    item.addEventListener('click', () => {
        currentIndex = activeImages.indexOf(item);
        if (currentIndex !== -1) {
            showImage(activeImages[currentIndex]);
        }
    });
});

function showImage(item) {
    const imgSrc = item.querySelector('img').getAttribute('src');
    const imgCaption = item.querySelector('.title').textContent;
    
    lightboxImg.setAttribute('src', imgSrc);
    lightboxCaption.textContent = imgCaption;
    lightbox.classList.add('active');
}

nextBtn.addEventListener('click', () => {
    if (activeImages.length <= 1) return;
    currentIndex++;
    if (currentIndex >= activeImages.length) currentIndex = 0;
    showImage(activeImages[currentIndex]);
});

prevBtn.addEventListener('click', () => {
    if (activeImages.length <= 1) return;
    currentIndex--;
    if (currentIndex < 0) currentIndex = activeImages.length - 1;
    showImage(activeImages[currentIndex]);
});

closeBtn.addEventListener('click', () => lightbox.classList.remove('active'));
lightbox.addEventListener('click', (e) => {
    if (e.target === lightbox) lightbox.classList.remove('active');
});

// التصفح الذكي عن طريق لوحة المفاتيح الأزرار (Keyboard Navigation)
document.addEventListener('keydown', (e) => {
    if (!lightbox.classList.contains('active')) return;
    if (e.key === 'Escape') lightbox.classList.remove('active');
    if (e.key === 'ArrowRight') prevBtn.click();
    if (e.key === 'ArrowLeft') nextBtn.click();
});

// تشغيل اللغة الافتراضية
updateLanguage();