script.js

// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    
    mobileMenuBtn.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
    });
    
    // Close mobile menu when clicking on a link
    mobileMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
            mobileMenu.classList.add('hidden');
        });
    });
});

// FAQ Accordion
document.querySelectorAll('.faq-question').forEach(button => {
    button.addEventListener('click', () => {
        const answer = button.nextElementSibling;
        const icon = button.querySelector('i');
        
        // Close all other FAQs
        document.querySelectorAll('.faq-answer').forEach(otherAnswer => {
            if (otherAnswer !== answer) {
                otherAnswer.classList.add('hidden');
                otherAnswer.previousElementSibling.querySelector('i').style.transform = 'rotate(0deg)';
            }
        });
        
        // Toggle current FAQ
        answer.classList.toggle('hidden');
        icon.style.transform = answer.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
    });
});

// Contact Form Handler
document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Get form data
    const formData = new FormData(this);
    const data = Object.fromEntries(formData);
    
    // Show success message
    showToast('Message sent successfully! We\'ll get back to you soon.');
    
    // Reset form
    this.reset();
});

// Toast notification function
function showToast(message) {
    const toast = document.createElement('div');
    toast.className = 'toast show';
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

// Parts Catalog Data
const partsData = [
    // iPhone Parts
    { id: 1, name: 'iPhone 15 Pro Max Screen OLED', brand: 'iphone', price: 75000, image: 'http://static.photos/technology/320x240/100', available: true },
    { id: 2, name: 'iPhone 14 Pro Screen OLED', brand: 'iphone', price: 65000, image: 'http://static.photos/technology/320x240/101', available: true },
    { id: 3, name: 'iPhone 13 Screen OLED', brand: 'iphone', price: 45000, image: 'http://static.photos/technology/320x240/102', available: true },
    { id: 4, name: 'iPhone 12 Screen OLED', brand: 'iphone', price: 35000, image: 'http://static.photos/technology/320x240/103', available: true },
    { id: 5, name: 'iPhone 11 Screen LCD', brand: 'iphone', price: 25000, image: 'http://static.photos/technology/320x240/104', available: true },
    { id: 6, name: 'iPhone X/XS Screen OLED', brand: 'iphone', price: 20000, image: 'http://static.photos/technology/320x240/105', available: true },
    { id: 7, name: 'iPhone 8 Plus Screen LCD', brand: 'iphone', price: 12000, image: 'http://static.photos/technology/320x240/106', available: true },
    { id: 8, name: 'iPhone 7 Screen LCD', brand: 'iphone', price: 10000, image: 'http://static.photos/technology/320x240/107', available: true },
    { id: 9, name: 'iPhone 6S Screen LCD', brand: 'iphone', price: 8000, image: 'http://static.photos/technology/320x240/108', available: true },
    { id: 10, name: 'iPhone 5S Screen LCD', brand: 'iphone', price: 5000, image: 'http://static.photos/technology/320x240/109', available: true },
    { id: 11, name: 'iPhone 14 Pro Camera Triple', brand: 'iphone', price: 35000, image: 'http://static.photos/technology/320x240/110', available: true },
    { id: 12, name: 'iPhone 13 Pro Camera Triple', brand: 'iphone', price: 30000, image: 'http://static.photos/technology/320x240/111', available: true },
    { id: 13, name: 'iPhone 12 Pro Camera Triple', brand: 'iphone', price: 25000, image: 'http://static.photos/technology/320x240/112', available: true },
    { id: 14, name: 'iPhone 11 Pro Camera Triple', brand: 'iphone', price: 20000, image: 'http://static.photos/technology/320x240/113', available: true },
    { id: 15, name: 'iPhone Battery Original All Models', brand: 'iphone', price: 8000, image: 'http://static.photos/technology/320x240/114', available: true },
    
    // Samsung Parts
    { id: 16, name: 'Samsung S23 Ultra Screen AMOLED', brand: 'samsung', price: 55000, image: 'http://static.photos/technology/320x240/115', available: true },
    { id: 17, name: 'Samsung S22 Ultra Screen AMOLED', brand: 'samsung', price: 45000, image: 'http://static.photos/technology/320x240/116', available: true },
    { id: 18, name: 'Samsung S21 Ultra Screen AMOLED', brand: 'samsung', price: 35000, image: 'http://static.photos/technology/320x240/117', available: true },
    { id: 19, name: 'Samsung A54 Screen AMOLED', brand: 'samsung', price: 28000, image: 'http://static.photos/technology/320x240/118', available: true },
    { id: 20, name: 'Samsung A34 Screen AMOLED', brand: 'samsung', price: 22000, image: 'http://static.photos/technology/320x240/119', available: true },
    { id: 21, name: 'Samsung A24 Screen AMOLED', brand: 'samsung', price: 18000, image: 'http://static.photos/technology/320x240/120', available: true },
    { id: 22, name: 'Samsung S23 Ultra Camera Quad', brand: 'samsung', price: 40000, image: 'http://static.photos/technology/320x240/121', available: true },
    { id: 23, name: 'Samsung A54 Camera Triple', brand: 'samsung', price: 15000, image: 'http://static.photos/technology/320x240/122', available: true },
    { id: 24, name: 'Samsung Battery Original All Models', brand: 'samsung', price: 6000, image: 'http://static.photos/technology/320x240/123', available: true },
    
    // Vivo Parts
    { id: 25, name: 'Vivo X90 Pro Screen AMOLED', brand: 'vivo', price: 32000, image: 'http://static.photos/technology/320x240/124', available: true },
    { id: 26, name: 'Vivo X80 Screen AMOLED', brand: 'vivo', price: 28000, image: 'http://static.photos/technology/320x240/125', available: true },
    { id: 27, name: 'Vivo Y78 Screen AMOLED', brand: 'vivo', price: 20000, image: 'http://static.photos/technology/320x240/126', available: true },
    { id: 28, name: 'Vivo Y55 Screen AMOLED', brand: 'vivo', price: 16000, image: 'http://static.photos/technology/320x240/127', available: true },
    { id: 29, name: 'Vivo Y35 Screen LCD', brand: 'vivo', price: 12000, image: 'http://static.photos/technology/320x240/128', available: true },
    { id: 30, name: 'Vivo Y27 Screen LCD', brand: 'vivo', price: 10000, image: 'http://static.photos/technology/320x240/129', available: true },
    { id: 31, name: 'Vivo X90 Camera Dual', brand: 'vivo', price: 18000, image: 'http://static.photos/technology/320x240/130', available: true },
    { id: 32, name: 'Vivo Battery Original All Models', brand: 'vivo', price: 4000, image: 'http://static.photos/technology/320x240/131', available: true },
    
    // Oppo Parts
    { id: 33, name: 'Oppo Find X6 Pro Screen AMOLED', brand: 'oppo', price: 35000, image: 'http://static.photos/technology/320x240/132', available: true },
    { id: 34, name: 'Oppo Find X5 Pro Screen AMOLED', brand: 'oppo', price: 30000, image: 'http://static.photos/technology/320x240/133', available: true },
    { id: 35, name: 'Oppo Reno 8 Pro Screen AMOLED', brand: 'oppo', price: 25000, image: 'http://static.photos/technology/320x240/134', available: true },
    { id: 36, name: 'Oppo A78 Screen AMOLED', brand: 'oppo', price: 18000, image: 'http://static.photos/technology/320x240/135', available: true },
    { id: 37, name: 'Oppo A57 Screen LCD', brand: 'oppo', price: 12000, image: 'http://static.photos/technology/320x240/136', available: true },
    { id: 38, name: 'Oppo A54 Screen LCD', brand: 'oppo', price: 10000, image: 'http://static.photos/technology/320x240/137', available: true },
    { id: 39, name: 'Oppo Reno 8 Camera Triple', brand: 'oppo', price: 16000, image: 'http://static.photos/technology/320x240/138', available: true },
    { id: 40, name: 'Oppo Battery Original All Models', brand: 'oppo', price: 4500, image: 'http://static.photos/technology/320x240/139', available: true },
    
    // Infinix Parts
    { id: 41, name: 'Infinix Zero 30 Screen AMOLED', brand: 'infinix', price: 18000, image: 'http://static.photos/technology/320x240/140', available: true },
    { id: 42, name: 'Infinix Note 30 Pro Screen AMOLED', brand: 'infinix', price: 16000, image: 'http://static.photos/technology/320x240/141', available: true },
    { id: 43, name: 'Infinix Hot 30 Screen LCD', brand: 'infinix', price: 8000, image: 'http://static.photos/technology/320x240/142', available: true },
    { id: 44, name: 'Infinix Smart 7 Screen LCD', brand: 'infinix', price: 6000, image: 'http://static.photos/technology/320x240/143', available: true },
    { id: 45, name: 'Infinix Zero 30 Camera Dual', brand: 'infinix', price: 12000, image: 'http://static.photos/technology/320x240/144', available: true },
    { id: 46, name: 'Infinix Battery Original All Models', brand: 'infinix', price: 3000, image: 'http://static.photos/technology/320x240/145', available: true },
    
    // Tecno Parts
    { id: 47, name: 'Tecno Phantom V Fold Screen Foldable', brand: 'tecno', price: 45000, image: 'http://static.photos/technology/320x240/146', available: true },
    { id: 48, name: 'Tecno Phantom X2 Screen AMOLED', brand: 'tecno', price: 20000, image: 'http://static.photos/technology/320x240/147', available: true },
    { id: 49, name: 'Tecno Camon 20 Pro Screen AMOLED', brand: 'tecno', price: 18000, image: 'http://static.photos/technology/320x240/148', available: true },
    { id: 50, name: 'Tecno Spark 10 Pro Screen LCD', brand: 'tecno', price: 10000, image: 'http://static.photos/technology/320x240/149', available: true },
    { id: 51, name: 'Tecno Pova 3 Screen LCD', brand: 'tecno', price: 8000, image: 'http://static.photos/technology/320x240/150', available: true },
    { id: 52, name: 'Tecno Camon 20 Camera Triple', brand: 'tecno', price: 14000, image: 'http://static.photos/technology/320x240/151', available: true },
    { id: 53, name: 'Tecno Battery Original All Models', brand: 'tecno', price: 2500, image: 'http://static.photos/technology/320x240/152', available: true },
    
    // Common Parts
    { id: 54, name: 'Phone Bodies Original All Brands', brand: 'all', price: 5000, image: 'http://static.photos/technology/320x240/153', available: true },
    { id: 55, name: 'Charging Port Flex Cable', brand: 'all', price: 2000, image: 'http://static.photos/technology/320x240/154', available: true },
    { id: 56, name: 'Speaker & Earpiece Set', brand: 'all', price: 1500, image: 'http://static.photos/technology/320x240/155', available: true },
    { id: 57, name: 'Power & Volume Buttons', brand: 'all', price: 1200, image: 'http://static.photos/technology/320x240/156', available: true },
    { id: 58, name: 'SIM Tray Original', brand: 'all', price: 800, image: 'http://static.photos/technology/320x240/157', available: true }
];
// Render parts
function renderParts(brand = 'all') {
    const partsGrid = document.getElementById('parts-grid');
    const filteredParts = brand === 'all' ? partsData : partsData.filter(part => part.brand === brand);
    
    partsGrid.innerHTML = filteredParts.map(part => `
        <div class="part-card bg-white rounded-lg shadow-lg overflow-hidden">
            <img src="${part.image}" alt="${part.name}" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-bold text-lg mb-2">${part.name}</h3>
                <div class="flex justify-between items-center mb-3">
                    <span class="text-2xl font-bold text-primary-red">Rs. ${part.price.toLocaleString()}</span>
                    <span class="badge ${part.available ? 'bg-green-500' : 'bg-red-500'}">
                        ${part.available ? 'In Stock' : 'Out of Stock'}
                    </span>
                </div>
                <button class="w-full bg-primary-red text-white py-2 rounded-lg hover:bg-red-600 transition-colors ${!part.available ? 'opacity-50 cursor-not-allowed' : ''}" 
                        ${!part.available ? 'disabled' : ''}>
                    ${part.available ? 'Order Now' : 'Unavailable'}
                </button>
            </div>
        </div>
    `).join('');
    
    // Reinitialize feather icons
    feather.replace();
}

// Brand filter functionality
document.querySelectorAll('.brand-filter').forEach(button => {
    button.addEventListener('click', function() {
        // Update button styles
        document.querySelectorAll('.brand-filter').forEach(btn => {
            btn.classList.remove('bg-primary-red', 'text-white');
            btn.classList.add('bg-gray-200');
        });
        this.classList.remove('bg-gray-200');
        this.classList.add('bg-primary-red', 'text-white');
        
        // Filter parts
        renderParts(this.dataset.brand);
    });
});

// Initialize parts on page load
document.addEventListener('DOMContentLoaded', function() {
    renderParts();
});

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Intersection Observer for animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -100px 0px'
};

const observer = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, observerOptions);

// Observe service cards
document.querySelectorAll('.service-card').forEach(card => {
    observer.observe(card);
});

// Add loading animation
window.addEventListener('load', function() {
    document.body.classList.add('loaded');
});

// WhatsApp button hover effect
const whatsappBtn = document.querySelector('a[href*="wa.me"]');
if (whatsappBtn) {
    whatsappBtn.addEventListener('mouseenter', function() {
        this.querySelector('svg').style.animation = 'pulse 1s infinite';
    });
    
    whatsappBtn.addEventListener('mouseleave', function() {
        this.querySelector('svg').style.animation = '';
    });
}

// Add pulse animation
const style = document.createElement('style');
style.textContent = `
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
`;
document.head.appendChild(style);

// Sticky header background on scroll
window.addEventListener('scroll', function() {
    const nav = document.querySelector('nav');
    if (window.scrollY > 50) {
        nav.classList.add('shadow-xl');
    } else {
        nav.classList.remove('shadow-xl');
    }
});

// Price formatter
function formatPrice(price) {
    return new Intl.NumberFormat('en-PK', {
        style: 'currency',
        currency: 'PKR',
        minimumFractionDigits: 0
    }).format(price).replace('PKR', 'Rs.');
}

// Copy to clipboard functionality
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        showToast('Copied to clipboard!');
    });
}

// Add copy functionality for phone numbers
document.querySelectorAll('a[href^="tel:"]').forEach(link => {
    link.addEventListener('click', function(e) {
        if (e.ctrlKey || e.metaKey) {
            e.preventDefault();
            copyToClipboard(this.textContent);
        }
    });
});