script.js

/* ==========================================================================
   CYBERPUNK & DEVELOPER THEME - SCRIPT ENGINE
   Author: Teko Shalom (Darktech06)
   Features:
     - Typed.js terminal text animation
     - Web Audio API Sci-Fi synthesizer (Audio FX)
     - CRT Scanlines toggle
     - Dual Theme Switcher (Cyber Dark / Holo Light)
     - Interactive Developer CLI Terminal (Bash Emulator)
     - Skills Filter Matrix
     - Encrypted Contact Transmission to REST API
     - ScrollSpy Navigation
   ========================================================================== */

// 1. TYPED.JS TERMINAL ANIMATION
if (typeof Typed !== 'undefined') {
    new Typed("#typed", {
        strings: [
            "Informaticien",
            "Développeur FullStack",
            "Architecte Web & API",
            "Graphiste & UI Designer",
            "Étudiant @ IAI-TOGO",
            "Passionné Cyber & IA",
            "Freelance Ready"
        ],
        typeSpeed: 50,
        backSpeed: 25,
        backDelay: 2500,
        showCursor: false,
        loop: true
    });
}

// 2. WEB AUDIO API - SCI-FI SOUND SYNTHESIZER
let sfxEnabled = localStorage.getItem('cyber_sfx') !== 'false';
let audioCtx = null;

function initAudioContext() {
    if (!audioCtx) {
        const AudioContextClass = window.AudioContext || window.webkitAudioContext;
        if (AudioContextClass) {
            audioCtx = new AudioContextClass();
        }
    }
    if (audioCtx && audioCtx.state === 'suspended') {
        audioCtx.resume();
    }
}

function playCyberSound(type = 'click') {
    if (!sfxEnabled) return;
    try {
        initAudioContext();
        if (!audioCtx) return;

        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        const now = audioCtx.currentTime;

        osc.connect(gain);
        gain.connect(audioCtx.destination);

        if (type === 'click') {
            osc.type = 'triangle';
            osc.frequency.setValueAtTime(650, now);
            osc.frequency.exponentialRampToValueAtTime(880, now + 0.05);
            gain.gain.setValueAtTime(0.06, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.05);
            osc.start(now);
            osc.stop(now + 0.05);
        } else if (type === 'hover') {
            osc.type = 'sine';
            osc.frequency.setValueAtTime(320, now);
            osc.frequency.exponentialRampToValueAtTime(440, now + 0.03);
            gain.gain.setValueAtTime(0.02, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.03);
            osc.start(now);
            osc.stop(now + 0.03);
        } else if (type === 'success') {
            osc.type = 'square';
            osc.frequency.setValueAtTime(440, now);
            osc.frequency.setValueAtTime(660, now + 0.08);
            osc.frequency.setValueAtTime(880, now + 0.16);
            gain.gain.setValueAtTime(0.08, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.28);
            osc.start(now);
            osc.stop(now + 0.28);
        } else if (type === 'error') {
            osc.type = 'sawtooth';
            osc.frequency.setValueAtTime(220, now);
            osc.frequency.linearRampToValueAtTime(110, now + 0.18);
            gain.gain.setValueAtTime(0.09, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.18);
            osc.start(now);
            osc.stop(now + 0.18);
        }
    } catch (e) {
        // Audio error silent fallback
    }
}

// Attach hover sound to cyber buttons & links
function attachCyberSoundListeners() {
    const interactiveElements = document.querySelectorAll('.cyber-btn, .hud-btn, .skill-tab, .nav .item a, .profile ul a');
    interactiveElements.forEach(el => {
        el.addEventListener('mouseenter', () => playCyberSound('hover'));
        el.addEventListener('click', () => playCyberSound('click'));
    });
}

// 3. CRT SCANLINES TOGGLE
const scanlineToggleBtn = document.getElementById('scanlineToggle');
if (scanlineToggleBtn) {
    const savedScanlines = localStorage.getItem('cyber_scanlines');
    if (savedScanlines === 'disabled') {
        document.body.classList.add('no-scanlines');
        scanlineToggleBtn.classList.remove('active');
    } else {
        scanlineToggleBtn.classList.add('active');
    }

    scanlineToggleBtn.addEventListener('click', function() {
        document.body.classList.toggle('no-scanlines');
        const isDisabled = document.body.classList.contains('no-scanlines');
        localStorage.setItem('cyber_scanlines', isDisabled ? 'disabled' : 'enabled');
        scanlineToggleBtn.classList.toggle('active', !isDisabled);
        playCyberSound('click');
    });
}

// SFX Toggle button
const sfxToggleBtn = document.getElementById('sfxToggle');
const sfxText = document.getElementById('sfxText');
if (sfxToggleBtn) {
    updateSfxUi();
    sfxToggleBtn.addEventListener('click', function() {
        sfxEnabled = !sfxEnabled;
        localStorage.setItem('cyber_sfx', sfxEnabled);
        updateSfxUi();
        if (sfxEnabled) playCyberSound('success');
    });
}

function updateSfxUi() {
    if (sfxToggleBtn && sfxText) {
        if (sfxEnabled) {
            sfxText.textContent = "AUDIO: ON";
            sfxToggleBtn.classList.add('active');
        } else {
            sfxText.textContent = "AUDIO: OFF";
            sfxToggleBtn.classList.remove('active');
        }
    }
}

// 4. THEME CONTROLLER (CYBER DARK <-> HOLO LIGHT)
function updateThemeButtons() {
    const lightBtn = document.getElementById("lightBtn");
    const darkBtn = document.getElementById("darkBtn");
    const themeIconTop = document.getElementById("themeIconTop");
    const themeTextTop = document.getElementById("themeTextTop");
    const isLight = document.body.classList.contains('light');

    if (lightBtn && darkBtn) {
        if (isLight) {
            darkBtn.style.display = "block";
            lightBtn.style.display = "none";
        } else {
            darkBtn.style.display = "none";
            lightBtn.style.display = "block";
        }
    }

    if (themeIconTop && themeTextTop) {
        if (isLight) {
            themeIconTop.setAttribute('name', 'moon-outline');
            themeTextTop.textContent = "HOLO MODE";
        } else {
            themeIconTop.setAttribute('name', 'sunny-outline');
            themeTextTop.textContent = "CYBER DARK";
        }
    }
}

function theme() {
    document.body.classList.toggle('light');
    const isLight = document.body.classList.contains('light');
    localStorage.setItem('theme', isLight ? 'light' : 'dark');
    updateThemeButtons();
    playCyberSound('click');
}

// 5. SKILLS FILTER MATRIX
const skillTabs = document.querySelectorAll('.skill-tab');
const skillCards = document.querySelectorAll('.skill-card');

skillTabs.forEach(tab => {
    tab.addEventListener('click', () => {
        skillTabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');

        const filter = tab.getAttribute('data-filter');

        skillCards.forEach(card => {
            const category = card.getAttribute('data-category');
            if (filter === 'all' || category === filter) {
                card.style.display = 'flex';
                card.style.opacity = '1';
                card.style.transform = 'scale(1)';
            } else {
                card.style.display = 'none';
            }
        });
        playCyberSound('click');
    });
});

// 6. INTERACTIVE DEVELOPER TERMINAL CLI
const termInput = document.getElementById('termInput');
const termLogs = document.getElementById('termLogs');
const termBody = document.getElementById('termBody');

if (termInput && termLogs) {
    const COMMANDS = {
        help: "Commandes disponibles: <span class='output-cmd'>about</span>, <span class='output-cmd'>skills</span>, <span class='output-cmd'>projects</span>, <span class='output-cmd'>resume</span>, <span class='output-cmd'>contact</span>, <span class='output-cmd'>whoami</span>, <span class='output-cmd'>date</span>, <span class='output-cmd'>matrix</span>, <span class='output-cmd'>clear</span>, <span class='output-cmd'>sudo</span>",
        about: "Teko Shalom // Développeur FullStack & Informaticien basé à Lomé, Togo. Passionné par l'ingénierie logicielle et l'IA.",
        skills: "Arsenal: HTML5, CSS3, JavaScript, React, Python, Flask, Node.js, C, Java, PHP, PostgreSQL, MySQL, Docker.",
        projects: "Projets: [1] Cyberpunk Dev Portfolio [2] Flask REST API & Neon DB [3] Visual Identity & UI Kits.",
        resume: "Timeline: [2024-NOW] Étudiant @ IAI-TOGO // [2023-2024] Graphiste & Designer @ B-Attitude.",
        whoami: "Opérateur: DARKTECH-06 // Privilèges: GUEST_LEVEL_1 // IP: 127.0.0.1",
        contact: "Ouverture du terminal de transmission chiffré...",
        matrix: "<span style='color: #00ff66;'>Réveille-toi, Neo... La matrice t'entoure. Suis le lapin blanc 🐇.</span>",
        sudo: "<span style='color: #ff0055;'>[ALERT] Accès refusé: niveau de privilège ROOT requis. Tentative enregistrée dans /var/log/audit.</span>",
        date: () => new Date().toLocaleString()
    };

    termInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            const rawVal = termInput.value.trim();
            if (!rawVal) return;

            const cmd = rawVal.toLowerCase();
            playCyberSound('click');

            // Add user input row
            const cmdRow = document.createElement('div');
            cmdRow.innerHTML = `<span style="color:#00ff66;">guest@darktech:~$</span> <span class="output-highlight">${escapeHtml(rawVal)}</span>`;
            termLogs.appendChild(cmdRow);

            // Execute command
            if (cmd === 'clear') {
                termLogs.innerHTML = '';
            } else if (cmd === 'contact') {
                const res = document.createElement('div');
                res.innerHTML = COMMANDS.contact;
                termLogs.appendChild(res);
                openContactModal(e);
            } else if (COMMANDS[cmd]) {
                const res = document.createElement('div');
                const output = typeof COMMANDS[cmd] === 'function' ? COMMANDS[cmd]() : COMMANDS[cmd];
                res.innerHTML = output;
                termLogs.appendChild(res);
            } else if (cmd.startsWith('echo ')) {
                const res = document.createElement('div');
                res.textContent = rawVal.slice(5);
                termLogs.appendChild(res);
            } else {
                const res = document.createElement('div');
                res.innerHTML = `<span style="color:#ff0055;">Commande inconnue: '${escapeHtml(cmd)}'. Tapez <span class="output-cmd">help</span> pour voir les commandes.</span>`;
                termLogs.appendChild(res);
            }

            termInput.value = '';
            if (termBody) {
                termBody.scrollTop = termBody.scrollHeight;
            }
        }
    });
}

function escapeHtml(str) {
    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

// 7. SMOOTH SCROLLING & SCROLLSPY NAVIGATION
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        const href = this.getAttribute('href');
        if (href === '#' || href === '#contact') return;

        const target = document.querySelector(href);
        if (target) {
            e.preventDefault();
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
            playCyberSound('click');
        }
    });
});

// ScrollSpy to update active navbar item
const sections = document.querySelectorAll('main.content section[id]');
const navLinks = document.querySelectorAll('.nav .item');

window.addEventListener('scroll', () => {
    let currentId = '';
    const scrollPos = window.scrollY + 140;

    sections.forEach(sec => {
        const top = sec.offsetTop;
        const height = sec.offsetHeight;
        if (scrollPos >= top && scrollPos < top + height) {
            currentId = sec.getAttribute('id');
        }
    });

    if (currentId) {
        navLinks.forEach(item => {
            item.classList.remove('active');
            const link = item.querySelector('a');
            if (link && link.getAttribute('href') === `#${currentId}`) {
                item.classList.add('active');
            }
        });
    }
});

// 8. CONTACT MODAL FUNCTIONS & FORM TRANSMISSION
function openContactModal(event) {
    if (event) event.preventDefault();
    const modal = document.getElementById('contactModal');
    if (modal) {
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        playCyberSound('click');
    }
}

function closeContactModal() {
    const modal = document.getElementById('contactModal');
    if (modal) {
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
        playCyberSound('click');
    }
}

// Close modal when clicking outside
document.addEventListener('click', function(event) {
    const modal = document.getElementById('contactModal');
    if (modal && event.target === modal) {
        closeContactModal();
    }
});

// Close modal with Escape key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeContactModal();
    }
});

// Form submission to backend REST API
document.addEventListener('DOMContentLoaded', function() {
    // Apply saved theme
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'light') {
        document.body.classList.add('light');
    }
    updateThemeButtons();
    attachCyberSoundListeners();

    // Add keyboard support for sidebar theme toggle
    const themeBtn = document.querySelector('.box.them');
    if (themeBtn) {
        themeBtn.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                theme();
            }
        });
    }

    const contactForm = document.getElementById('contactForm');
    const submitBtn = document.getElementById('submitBtn');

    if (contactForm) {
        contactForm.addEventListener('submit', async function(e) {
            e.preventDefault();

            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const phone = document.getElementById('phone').value.trim();
            const subject = document.getElementById('subject').value.trim();
            const message = document.getElementById('message').value.trim();

            if (!name || !email || !phone || !subject || !message) {
                showMessage('❌ Tous les champs obligatoires doivent être renseignés.', 'error');
                playCyberSound('error');
                return;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                showMessage('❌ Canal email invalide. Veuillez vérifier le format.', 'error');
                playCyberSound('error');
                return;
            }

            const phoneRegex = /^[\d\s\-\+()]{8,}$/;
            if (!phoneRegex.test(phone)) {
                showMessage('❌ Numéro de téléphone invalide (+228...)', 'error');
                playCyberSound('error');
                return;
            }

            const formData = { name, email, phone, subject, message };

            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = `<ion-icon name="sync-outline" class="spin"></ion-icon> <span>TRANSMISSION EN COURS...</span>`;
            }

            try {
                const response = await fetch('https://portfolio-backend-o6p6.onrender.com/api/contact', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });

                const data = await response.json().catch(() => ({}));

                if (response.ok) {
                    playCyberSound('success');
                    showMessage('✅ Paquet de données transmis avec succès! Un email de confirmation a été expédié.', 'success');
                    contactForm.reset();
                    setTimeout(() => {
                        closeContactModal();
                    }, 3000);
                } else {
                    playCyberSound('error');
                    showMessage('❌ Échec de transmission: ' + (data.error || 'Erreur serveur distant'), 'error');
                }
            } catch (error) {
                console.error('Erreur transmission:', error);
                playCyberSound('error');
                showMessage('❌ Erreur de liaison réseau. Vérifiez votre connexion ou le serveur (python backend.py).', 'error');
            } finally {
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = `<ion-icon name="send-outline"></ion-icon> <span>Envoyer le Paquet de Données</span>`;
                }
            }
        });
    }
});

function showMessage(message, type) {
    const messageDisplay = document.getElementById('messageDisplay');
    if (!messageDisplay) return;
    messageDisplay.innerHTML = `<div class="message ${type}">${message}</div>`;
    messageDisplay.style.display = 'block';

    if (type === 'success') {
        setTimeout(() => {
            messageDisplay.style.display = 'none';
        }, 4000);
    }
}