script.js

document.addEventListener('DOMContentLoaded', () => {
    // --- Translations Data ---
    const translations = {
        en: {
            heroTitle: "Super Engineer",
            heroSubtitle: "Expert in Flutter, Python, Node.js & Supabase. Building complex, high-performance apps with 5+ years of experience.",
            viewProjects: "View Projects",
            contactMe: "Contact Me",
            mySkills: "My Tech Stack",
            yearsExp: "Years Experience",
            projectsDone: "Projects Done",
            satisfaction: "Client Satisfaction",
            support: "Support",
            featuredProjects: "Featured Projects",
            projectsDesc: "High complexity mobile and web apps",
            proj1Title: "Giant E-commerce App",
            proj1Desc: "A complete shopping platform with payment gateways, admin panel, and real-time tracking.",
            proj2Title: "SaaS Analytics Dashboard",
            proj2Desc: "Data visualization tool handling large datasets with complex queries and reporting.",
            proj3Title: "On-Demand Delivery Service",
            proj3Desc: "Real-time location tracking, driver app, and customer interface with socket.io.",
            viewDetails: "View Details",
            clientReviews: "Client Reviews",
            loadingReviews: "Loading reviews...",
            contactInfo: "Contact Info",
            availStatus: "Available for freelance",
            sendMessage: "Send a Message",
            name: "Name",
            email: "Email",
            message: "Message",
            sendBtn: "Send Message"
        },
        ar: {
            heroTitle: "المهندس الخارق",
            heroSubtitle: "خبير في Flutter، Python، Node.js و Supabase. بناء تطبيقات معقدة وعالية الأداء بخبرة تزيد عن 5 سنوات.",
            viewProjects: "شاهد المشاريع",
            contactMe: "تواصل معي",
            mySkills: "مهاراتي التقنية",
            yearsExp: "سنوات خبرة",
            projectsDone: "مشاريع منجزة",
            satisfaction: "رضا العملاء",
            support: "دعم فني",
            featuredProjects: "أبرز المشاريع",
            projectsDesc: "تطبيقات ومواقع ويب عالية التعقيد",
            proj1Title: "تطبيق تجارة إلكترونية عملاق",
            proj1Desc: "منصة تسوق كاملة مع بوابات دفع، لوحة تحكم، وتتبع فوري.",
            proj2Title: "لوحة تحليلات SaaS",
            proj2Desc: "أداة تصور بيانات تتعامل مع مجموعات بيانات ضخمة وتقارير معقدة.",
            proj3Title: "خدمة التوصيل عند الطلب",
            proj3Desc: "تتبع موقع فوري، تطبيق للسائقين، وواجهة للعملاء باستخدام socket.io.",
            viewDetails: "عرض التفاصيل",
            clientReviews: "آراء العملاء",
            loadingReviews: "جاري تحميل التقييمات...",
            contactInfo: "معلومات الاتصال",
            availStatus: "متاح للعمل الحر",
            sendMessage: "أرسل رسالة",
            name: "الاسم",
            email: "البريد الإلكتروني",
            message: "الرسالة",
            sendBtn: "إرسال الرسالة"
        }
    };

    // --- State Management ---
    let currentLang = localStorage.getItem('lang') || 'en';
    let currentTheme = localStorage.getItem('theme') || 'light';

    // --- Theme Logic ---
    function applyTheme(theme) {
        const html = document.documentElement;
        if (theme === 'dark') {
            html.classList.add('dark');
        } else {
            html.classList.remove('dark');
        }
        localStorage.setItem('theme', theme);
        
        // Dispatch event for components
        window.dispatchEvent(new CustomEvent('themeChanged', { detail: theme }));
    }

    // Toggle Theme
    window.toggleTheme = () => {
        currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
        applyTheme(currentTheme);
    };

    // Initialize Theme
    applyTheme(currentTheme);

    // --- Language Logic ---
    function applyLanguage(lang) {
        currentLang = lang;
        const html = document.documentElement;
        html.setAttribute('lang', lang);
        html.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr');
        
        // Update text content
        const elements = document.querySelectorAll('[data-i18n]');
        elements.forEach(el => {
            const key = el.getAttribute('data-i18n');
            if (translations[lang][key]) {
                el.textContent = translations[lang][key];
            }
        });

        // Dispatch event for components
        window.dispatchEvent(new CustomEvent('langChanged', { detail: lang }));
    }

    // Toggle Language
    window.toggleLanguage = () => {
        const newLang = currentLang === 'en' ? 'ar' : 'en';
        applyLanguage(newLang);
    };

    // Initialize Language
    applyLanguage(currentLang);

    // --- Mock Reviews Fetching (Since CORS likely blocks direct Mostaql HTML parsing) ---
    async function fetchReviews() {
        const container = document.getElementById('reviews-container');
        
        // Simulating API delay
        await new Promise(resolve => setTimeout(resolve, 1500));

        // Mock Data based on Mostaql/Khamsat style
        const mockReviews = [
            {
                name: "Ahmed Al-Sayed",
                role: "CEO, TechStart",
                content: "مطور محترف جداً، صبره وتفانيه في العمل كان مذهلاً. التطبيق تم تسليمه في الوقت المحدد وبجودة عالية.",
                rating: 5,
                imgSeed: 101
            },
            {
                name: "John Doe",
                role: "Product Manager, AppCorp",
                content: "Excellent Flutter developer. Handled complex backend integration with Supabase flawlessly. Highly recommended!",
                rating: 5,
                imgSeed: 102
            },
            {
                name: "Sarah Smith",
                role: "Founder, ShopEasy",
                content: "Great communication and technical skills. The Python script saved us hours of manual work.",
                rating: 4,
                imgSeed: 103
            }
        ];

        container.innerHTML = ''; // Clear loading

        mockReviews.forEach(review => {
            const card = document.createElement('div');
            card.className = "bg-gray-50 dark:bg-slate-700 p-6 rounded-2xl border border-gray-100 dark:border-slate-600";
            
            // Generate Stars
            let stars = '';
            for(let i=0; i<5; i++) {
                stars += `<i data-feather="star" class="w-4 h-4 ${i < review.rating ? 'text-yellow-400 fill-current' : 'text-gray-300'}"></i>`;
            }

            const avatar = `http://static.photos/people/100x100/${review.imgSeed}`;

            card.innerHTML = `
                <div class="flex items-center mb-4">
                    <img src="${avatar}" class="w-12 h-12 rounded-full mr-3 rtl:mr-0 rtl:ml-3 object-cover">
                    <div>
                        <h4 class="font-bold text-gray-900 dark:text-white">${review.name}</h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400">${review.role}</p>
                    </div>
                </div>
                <div class="flex mb-3 gap-1">
                    ${stars}
                </div>
                <p class="text-gray-600 dark:text-gray-300 text-sm italic">"${review.content}"</p>
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-slate-600 text-xs text-gray-400 flex items-center">
                     <i data-feather="check-circle" class="w-3 h-3 mr-1"></i> Verified Review
                </div>
            `;
            container.appendChild(card);
        });
        
        // Re-initialize feather icons for new content
        feather.replace();
    }

    fetchReviews();
});