script.js

/* ========================================
   GuideVault — JavaScript
   The Prank: Search redirects to Google
   ======================================== */

// ========================================
// Particles Background
// ========================================
function createParticles() {
    const container = document.getElementById('particles');
    const colors = ['#667eea', '#764ba2', '#f093fb', '#4facfe', '#43e97b'];
    const particleCount = 25;
    
    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        const size = Math.random() * 4 + 2;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const left = Math.random() * 100;
        const duration = Math.random() * 15 + 15;
        const delay = Math.random() * 20;
        
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.background = color;
        particle.style.left = `${left}%`;
        particle.style.animationDuration = `${duration}s`;
        particle.style.animationDelay = `${delay}s`;
        
        container.appendChild(particle);
    }
}

// ========================================
// Navbar Scroll Effect
// ========================================
function handleNavbarScroll() {
    const navbar = document.getElementById('navbar');
    
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });
}

// ========================================
// Mobile Menu
// ========================================
function toggleMobileMenu() {
    const menu = document.getElementById('mobileMenu');
    const btn = document.getElementById('mobileMenuBtn');
    
    menu.classList.toggle('active');
    btn.classList.toggle('active');
    
    document.body.style.overflow = menu.classList.contains('active') ? 'hidden' : '';
}

// ========================================
// Search Functions (THE PRANK!)
// ========================================
function performSearch() {
    const input = document.getElementById('searchInput');
    const query = input.value.trim();
    
    if (!query) {
        // Shake animation if empty
        input.style.animation = 'none';
        input.offsetHeight; // trigger reflow
        input.style.animation = 'shake 0.5s ease';
        input.placeholder = 'Ketik sesuatu dulu ya... 😅';
        setTimeout(() => {
            input.placeholder = 'Cari guidebook lomba... (cth: GEMASTIK, PKM, Hackathon)';
        }, 2000);
        return;
    }
    
    showLoadingAndRedirect(query, 'searchBtn');
}

function performSearchBottom() {
    const input = document.getElementById('searchInputBottom');
    const query = input.value.trim();
    
    if (!query) {
        input.style.animation = 'none';
        input.offsetHeight;
        input.style.animation = 'shake 0.5s ease';
        input.placeholder = 'Ketik sesuatu dulu ya... 😅';
        setTimeout(() => {
            input.placeholder = 'Ketik nama lomba atau topik guidebook...';
        }, 2000);
        return;
    }
    
    showLoadingAndRedirect(query, null);
}

function searchFromTag(tagElement) {
    const query = tagElement.textContent.trim();
    document.getElementById('searchInput').value = query;
    showLoadingAndRedirect(query, 'searchBtn');
}

function searchCategory(query) {
    showLoadingAndRedirect(query, null);
}

function showLoadingAndRedirect(query, btnId) {
    // Add "Guidebook" to the search query for Google to make it seem legit
    const searchQuery = `Guidebook ${query}`;
    const googleUrl = `https://www.google.com/search?q=${encodeURIComponent(searchQuery)}`;
    
    // Show loading state
    if (btnId) {
        const btn = document.getElementById(btnId);
        const originalHTML = btn.innerHTML;
        btn.innerHTML = `
            <svg class="spinner" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <circle cx="12" cy="12" r="10" stroke-opacity="0.3"/>
                <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
            </svg>
            <span>Mencari...</span>
        `;
        btn.style.pointerEvents = 'none';
    }
    
    // Simulate "loading" for realism, then redirect to Google
    setTimeout(() => {
        window.location.href = googleUrl;
    }, 1200);
}

// ========================================
// Scroll to Search
// ========================================
function scrollToSearch() {
    const searchBox = document.getElementById('searchBox');
    searchBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
    
    setTimeout(() => {
        document.getElementById('searchInput').focus();
    }, 600);
}

// ========================================
// FAQ Toggle
// ========================================
function toggleFaq(element) {
    const isActive = element.classList.contains('active');
    
    // Close all FAQ items
    document.querySelectorAll('.faq-item').forEach(item => {
        item.classList.remove('active');
    });
    
    // Toggle the clicked one
    if (!isActive) {
        element.classList.add('active');
    }
}

// ========================================
// Counter Animation
// ========================================
function animateCounters() {
    const counters = document.querySelectorAll('.stat-number');
    
    counters.forEach(counter => {
        const target = parseInt(counter.getAttribute('data-target'));
        const duration = 2000;
        const step = target / (duration / 16);
        let current = 0;
        
        const timer = setInterval(() => {
            current += step;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            counter.textContent = Math.floor(current).toLocaleString('id-ID');
        }, 16);
    });
}

// ========================================
// Scroll Reveal
// ========================================
function setupScrollReveal() {
    const revealElements = document.querySelectorAll(
        '.feature-card, .category-card, .section-header, .cta-card, .faq-item, .stats-grid'
    );
    
    revealElements.forEach(el => el.classList.add('reveal'));
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.classList.add('visible');
                }, index * 80);
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });
    
    revealElements.forEach(el => observer.observe(el));
}

// ========================================
// Stats Section Counter on Scroll
// ========================================
function setupStatsObserver() {
    const statsSection = document.getElementById('stats');
    let hasAnimated = false;
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting && !hasAnimated) {
                hasAnimated = true;
                animateCounters();
            }
        });
    }, { threshold: 0.3 });
    
    observer.observe(statsSection);
}

// ========================================
// Keyboard Support (Enter to search)
// ========================================
function setupKeyboardEvents() {
    document.getElementById('searchInput').addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            performSearch();
        }
    });
    
    document.getElementById('searchInputBottom').addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            performSearchBottom();
        }
    });
}

// ========================================
// Shake Animation (for empty search)
// ========================================
const style = document.createElement('style');
style.textContent = `
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
        20%, 40%, 60%, 80% { transform: translateX(4px); }
    }
    .spinner {
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
`;
document.head.appendChild(style);

// ========================================
// Initialize Everything
// ========================================
document.addEventListener('DOMContentLoaded', () => {
    createParticles();
    handleNavbarScroll();
    setupScrollReveal();
    setupStatsObserver();
    setupKeyboardEvents();
});