script.js

const translations = {
    en: {
        "lang-name": "العربية",
        "nav-home": "Home",
        "nav-about": "About",
        "nav-portfolio": "Projects",
        "nav-services": "Services",
        "nav-contact": "Contact us",
        
        // قسم الـ Hero المحدث والمحمي من التداخل
        "hero-welcome": "Welcome to my portfolio",
        "hero-title-1": "Full-Stack & ",
        "hero-title-2": "Secure Solutions",
        "hero-desc": "I craft clean, user-friendly digital experiences that bridge the gap between complex ideas and intuitive design.",
        
        "about-subtitle": "Who am I?",
        "about-typing": "I'm: Nagi Alshaikh",
        "about-passionate": "A passionate",
        "about-role": "Full-Stack Developer",
        "about-desc": "Dedicated to creating meaningful digital experiences. I specialize in backend architecture, structural security, and responsive layouts.",
        "skills-subtitle": "My Tech Stack",
        "skills-title": "Software & Tools I Use",
        "port-subtitle": "My Creative Work",
        "port-title": "Featured Projects",
        "proj1-title": "Smart Farming Solution",
        "proj1-desc": "An automated monitoring and server protection system for sustainable agriculture, optimized for secure tracking and real-time dashboard analysis.",
        "proj2-title": "Nova Store",
        "proj2-desc": "A premium modern e-commerce experience featuring bilingual interfaces, secure checkout capabilities, fluid animations, and a high-performance visual catalog.",
        "proj3-title": "Prayer Timer Hub",
        "proj3-desc": "A precise calculation engine and interactive timer built with deep attention to regional criteria, responsive design, and intuitive temporal indicators.",
        "offer-subtitle": "What I Offer",
        "offer-title": "Professional Solutions for Your Digital Growth",
        "offer-card1-title": "High-Speed Development",
        "offer-card1-desc": "Building websites optimized for 95+ Lighthouse scores, ensuring your users never wait for a page to load.",
        "offer-card2-title": "UI/UX Design",
        "offer-card2-desc": "Creating intuitive and aesthetically pleasing interfaces that convert visitors into loyal customers.",
        "offer-card3-title": "Secure Coding & Audits",
        "offer-card3-desc": "Implementing strict input validation and defense controls to build applications fully resilient against injection flaws.",
        "perf-badge": "Industry-Leading Performance",
        "perf-title": "Why My Code Stands Out?",
        "perf-lead": "I don't just build websites; I engineer high-speed digital experiences. Using Google's Lighthouse standards, I ensure your site is:",
        "perf-li1-bold": "Lightning Fast:",
        "perf-li1-text": " Optimized for instant loading on all devices.",
        "perf-li2-bold": "SEO Ready:",
        "perf-li2-text": " Structured to rank high on search engines.",
        "perf-btn": "Get a High-Performance Site",
        "perf-audit-title": "Live Lighthouse Audit Results",
        "perf-score": "Score: 98% Optimized",
        "contact-title": "Start Your Project",
        "contact-btn": "Send Message",
        "whatsapp-text": "Contact via WhatsApp",
        "footer-rights": "© 2026 All Rights Reserved.",
        "proj-link-live": "Visit Project"
    },
    rtl: {
        "lang-name": "English",
        "nav-home": "الرئيسية",
        "nav-about": "من أنا",
        "nav-portfolio": "المشاريع",
        "nav-services": "الخدمات",
        "nav-contact": "اتصل بنا",
        
        // قسم الـ Hero المحدث والمحمي من التداخل
        "hero-welcome": "أهلاً بك في معرض أعمالي",
        "hero-title-1": "حلول متكاملة ",
        "hero-title-2": "وبرمجيات آمنة",
        "hero-desc": "أقوم بصناعة تجارب رقمية نظيفة وسهلة الاستخدام تسد الفجوة بين الأفكار المعقدة والتصميم البديهي والمتقن.",
        
        "about-subtitle": "من أنا؟",
        "about-typing": "أنا: ناجي الشيخ",
        "about-passionate": "مهندس برمجيات",
        "about-role": "ومطور تطبيقات متكاملة (Full-Stack)",
        "about-desc": "مكرس جهودي لإنشاء تجارب رقمية ذات مغزى. أتخصص في بناء الأنظمة الخلفية، حماية السيرفرات، وتصميم واجهات متجاوبة بكفاءة عالية.",
        "skills-subtitle": "تقنياتي وأدواتي",
        "skills-title": "البرامج والأدوات التي أستخدمها",
        "port-subtitle": "أبرز أعمالي الرقمية",
        "port-title": "معرض المشاريع الحالية",
        "proj1-title": "مشروع الزراعة الذكية",
        "proj1-desc": "نظام أتمتة ومراقبة ذكي مخصص للزراعة المستدامة وحماية السيرفرات، مهيأ بالكامل لتتبع البيانات الفورية وتحليل لوحات التحكم بأعلى المعايير الأمنية.",
        "proj2-title": "متجر نوفا الإلكتروني",
        "proj2-desc": "تجربة تجارة إلكترونية عصرية ومميزة تدعم اللغتين العربية والإنجليزية، وتتميز بنظام دفع آمن، وحركات تفاعلية سلسة وعرض منتجات عالي الأداء.",
        "proj3-title": "ساعة مؤقت الصلوات",
        "proj3-desc": "محرك حساب دقيق ومؤقت تفاعلي تم بناؤه مع التركيز التام على المعايير الجغرافية المحلية، التصميم المتجاوب، والمؤشرات الزمنية البديهية.",
        "offer-subtitle": "ماذا أقدم لكم",
        "offer-title": "حلول برمجية احترافية لنمو أعمالك الرقمية",
        "offer-card1-title": "تطوير فائق السرعة",
        "offer-card1-desc": "بناء مواقع ويب محسنة بأعلى معايير الـ Lighthouse لضمان ألا ينتظر عملاؤك طويلاً لتحميل الصفحة.",
        "offer-card2-title": "تصميم الـ UI/UX",
        "offer-card2-desc": "إنشاء واجهات مرئية بديهية وجذابة تساهم بفاعلية في تحويل زوار موقعك إلى عملاء دائمين.",
        "offer-card3-title": "برمجة آمنة وفحص ثغرات",
        "offer-card3-desc": "تطبيق ضوابط تحقق صارمة على المدخلات لحماية الأنظمة والتطبيقات بشكل كامل ضد محاولات الحقن والاختراق الخبيثة.",
        "perf-badge": "أداء رائد في السوق الرقمي",
        "perf-title": "ما الذي يجعل الكود الخاص بي مميزاً؟",
        "perf-lead": "أنا لا أقوم بمجرد بناء مواقع عادية؛ بل أصمم تجارب رقمية فائقة السرعة. بالاعتماد على معايير Google أضمن لك موقعاً:",
        "perf-li1-bold": "سريع كالبرق:",
        "perf-li1-text": " مهيأ للتحميل الفوري والمباشر على كافة أنواع الشاشات.",
        "perf-li2-bold": "مهيأ للـ SEO:",
        "perf-li2-text": " مبني برمجياً بشكل سليم لتصدر محركات البحث باستمرار.",
        "perf-btn": "احصل على موقع عالي الأداء الآن",
        "perf-audit-title": "نتائج فحص Lighthouse الحي والمباشر",
        "perf-score": "النتيجة: موقع محسن بنسبة 98%",
        "contact-title": "ابدأ مشروعك الرقمي اليوم",
        "contact-btn": "إرسال الرسالة",
        "whatsapp-text": "تواصل عبر الواتساب",
        "footer-rights": "© 2026 جميع الحقوق محفوظة لـ ناجي الشيخ.",
        "proj-link-live": "زيارة المشروع"
    }
};

// تحديد اللغة الافتراضية بناءً على التفضيل المحفوظ أو الانجليزية كخيار افتراضي
let currentLang = localStorage.getItem('themeLanguage') || 'en';
let updateClockInstance = null;

document.addEventListener('DOMContentLoaded', function() {
    // تشغيل مكتبة الانميشن AOS إن وجدت
    if (typeof AOS !== 'undefined') {
        AOS.init({ duration: 800, once: true });
    }

    const langSwitcherBtn = document.getElementById('lang-switcher');
    
    // تطبيق الترجمة فور تحميل الصفحة
    applyTranslations(currentLang);
    
    // تشغيل الساعة الحية لتفادي الأكواد المضمنة
    initLiveClock();

    // الاستماع لزر تحويل اللغة
    if (langSwitcherBtn) {
        langSwitcherBtn.addEventListener('click', function() {
            currentLang = (currentLang === 'en') ? 'rtl' : 'en';
            localStorage.setItem('themeLanguage', currentLang);
            applyTranslations(currentLang);
            if (typeof AOS !== 'undefined') { AOS.refresh(); }
        });
    }

    // التحكم بموقع زر الواتساب العائم فوق الفوتر
    window.addEventListener('scroll', function() {
        const whatsappBtn = document.getElementById('whatsappFloatingBtn');
        const footer = document.querySelector('footer');
        if (whatsappBtn && footer) {
            const footerRect = footer.getBoundingClientRect();
            const windowHeight = window.innerHeight;
            if (footerRect.top < windowHeight) {
                const overflow = windowHeight - footerRect.top;
                whatsappBtn.style.bottom = (overflow + 20) + 'px';
            } else {
                whatsappBtn.style.bottom = '30px';
            }
        }
    });
});

// الدالة الذكية المحدثة لتطبيق الترجمة الصافية ومنع تداخل النصوص
function applyTranslations(lang) {
    const htmlTag = document.documentElement;
    if (lang === 'rtl') {
        htmlTag.setAttribute('lang', 'ar');
        htmlTag.setAttribute('dir', 'rtl');
    } else {
        htmlTag.setAttribute('lang', 'en');
        htmlTag.setAttribute('dir', 'ltr');
    }

    // تحديث اسم زر تبديل اللغة (العربية / English)
    const switcher = document.getElementById('lang-switcher');
    if (switcher) { switcher.textContent = translations[lang]["lang-name"]; }

    // جلب وترجمة كافة العناصر المحددة بـ data-i18n
    const elementsToTranslate = document.querySelectorAll('[data-i18n]');
    elementsToTranslate.forEach(element => {
        const key = element.getAttribute('data-i18n');
        if (translations[lang] && translations[lang][key]) {
            // استبدال النص الصافي فقط لكل عنصر دون المساس بالهيكل الداخلي
            element.textContent = translations[lang][key];
        }
    });

    // تحديث الساعة الحية فوراً عند تغيير اللغة
    if (typeof updateClockInstance === 'function') {
        updateClockInstance();
    }
}

// دالة الساعة الحية لتفادي استخدام الأكواد المضمنة (متوافقة مع CSP)
function initLiveClock() {
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
    const el = document.getElementById('live-clock');
    if (!el) return;

    updateClockInstance = function() {
        const siteLanguage = document.documentElement.lang || 'ar'; 
        el.innerText = new Date().toLocaleDateString(siteLanguage, options);
    };
    
    updateClockInstance();
    setInterval(updateClockInstance, 1000);
}
// ===== Particle Animation (Optimized) =====
const canvas = document.getElementById('particles-canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

// تقليل عدد الجزيئات على الهواتف لتخفيف الحمل على المعالج وتحسين مقياس INP/TBT
const PARTICLE_COUNT = window.innerWidth < 768 ? 35 : 80;
const particles = [];

// احترام رغبة المستخدم في تقليل الحركة المفعّلة بنظام التشغيل
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

class Particle {
    constructor() { this.reset(); }
    reset() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.vx = (Math.random() - 0.5) * 0.4;
        this.vy = (Math.random() - 0.5) * 0.4;
        this.radius = Math.random() * 2 + 1;
        this.alpha = Math.random() * 0.5 + 0.2;
        this.color = Math.random() > 0.5 ? '13, 110, 253' : '13, 202, 240';
    }
    update() {
        if (prefersReducedMotion) return; // منع الحركة في حالة تفعيل خيار تقليل الحركة
        this.x += this.vx;
        this.y += this.vy;
        if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
        if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
    }
    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${this.color}, ${this.alpha})`;
        ctx.fill();
    }
}

for (let i = 0; i < PARTICLE_COUNT; i++) {
    particles.push(new Particle());
}

function drawConnections() {
    const maxDistance = 85; // تقليص مسافة الترابط لتقليل الخطوط وتحسين المظهر والأداء
    const maxDistanceSq = maxDistance * maxDistance;

    for (let i = 0; i < particles.length; i++) {
        const p1 = particles[i];
        for (let j = i + 1; j < particles.length; j++) {
            const p2 = particles[j];
            const dx = p1.x - p2.x;
            
            // تحقق أولي سريع لتخطي حساب المسافة المتعامدة والمربعة للجسيمات البعيدة O(N)
            if (Math.abs(dx) > maxDistance) continue;
            
            const dy = p1.y - p2.y;
            if (Math.abs(dy) > maxDistance) continue;

            const distSq = dx * dx + dy * dy;
            if (distSq < maxDistanceSq) {
                // حساب الجذر التربيعي فقط للجسيمات القريبة بالفعل، لتوفير موارد وحدة المعالجة المركزية
                const dist = Math.sqrt(distSq);
                ctx.beginPath();
                ctx.moveTo(p1.x, p1.y);
                ctx.lineTo(p2.x, p2.y);
                ctx.strokeStyle = `rgba(13, 110, 253, ${0.15 * (1 - dist / maxDistance)})`;
                ctx.lineWidth = 0.5;
                ctx.stroke();
            }
        }
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => { p.update(); p.draw(); });
    drawConnections();
    
    // الاستمرار بالحركة فقط إن لم تكن ملغاة من إعدادات النظام للمستخدم
    if (!prefersReducedMotion) {
        requestAnimationFrame(animate);
    }
}

// رسم إطار واحد فقط ثابت في حالة تقليل الحركة، وإلا تشغيل الرسوم المتحركة
if (prefersReducedMotion) {
    particles.forEach(p => p.draw());
    drawConnections();
} else {
    animate();
}