// services.js - Services Page JavaScript

// DOM Elements
const categoryTabs = document.getElementById('categoryTabs');
const servicesContainer = document.querySelector('.services-container');

// Initialize services
document.addEventListener('DOMContentLoaded', () => {
    // Load all categories for tabs
    loadCategoryTabs();
    
    // Render all services initially
    renderServices('all');
    
    // Add event listeners to category tabs
    if (categoryTabs) {
        categoryTabs.addEventListener('click', (e) => {
            if (e.target.classList.contains('category-tab')) {
                // Remove active class from all tabs
                document.querySelectorAll('.category-tab').forEach(tab => {
                    tab.classList.remove('active');
                });
                
                // Add active class to clicked tab
                e.target.classList.add('active');
                
                // Render services for selected category
                const category = e.target.dataset.category;
                renderServices(category);
            }
        });
    }
    
    // Create digital net animation if container exists
    const digitalNet = document.querySelector('.digital-net');
    if (digitalNet) {
        createDigitalNet('digitalNet');
    }
});

// Load category tabs
function loadCategoryTabs() {
    if (!categoryTabs) return;
    
    // Clear existing tabs (keep "All Services")
    const allTab = categoryTabs.querySelector('[data-category="all"]');
    categoryTabs.innerHTML = '';
    
    if (allTab) {
        categoryTabs.appendChild(allTab);
    } else {
        // Create "All Services" tab if it doesn't exist
        const allTab = document.createElement('button');
        allTab.className = 'category-tab active';
        allTab.dataset.category = 'all';
        allTab.textContent = 'All Services';
        categoryTabs.appendChild(allTab);
    }
    
    // Get unique categories from services
    const categories = getAllCategories();
    
    // Add category tabs
    categories.forEach(category => {
        const tab = document.createElement('button');
        tab.className = 'category-tab';
        tab.dataset.category = category;
        
        // Set proper display names
        const displayNames = {
            'printing': 'Printing & Scanning',
            'design': 'Design & Typing',
            'online': 'Online Services',
            'business': 'Business Services'
        };
        
        tab.textContent = displayNames[category] || category;
        categoryTabs.appendChild(tab);
    });
}

// Render Services
function renderServices(filter = 'all') {
    if (!servicesContainer) return;
    
    servicesContainer.innerHTML = '';
    
    const filteredServices = filter === 'all' 
        ? services 
        : services.filter(service => service.category === filter);
    
    if (filteredServices.length === 0) {
        servicesContainer.innerHTML = `
            <div class="no-services">
                <i class="fas fa-search"></i>
                <h3>No services found in this category</h3>
                <p>Try selecting a different category or view all services.</p>
            </div>
        `;
        return;
    }
    
    filteredServices.forEach(service => {
        const serviceCard = document.createElement('div');
        let cardClass = 'service-card';
        if (service.premium) cardClass += ' premium';
        if (service.negotiable) cardClass += ' negotiable';
        
        const priceDisplay = service.negotiable ? 'Negotiable' : formatCurrency(service.price);
        const badge = service.premium ? '<span class="service-badge premium-badge">PREMIUM</span>' : 
                         service.negotiable ? '<span class="service-badge negotiable-badge">NEGOTIABLE</span>' : '';
        
        const priceClass = service.premium ? 'premium-price' : 
                          service.negotiable ? 'negotiable-price' : '';
        
        serviceCard.className = cardClass;
        serviceCard.innerHTML = `
            <div class="service-header">
                <div class="service-icon">
                    <i class="${service.icon}"></i>
                </div>
                <div class="service-title">
                    <h3>${service.name}</h3>
                    ${badge}
                </div>
            </div>
            
            <div class="service-price ${priceClass}">${priceDisplay}</div>
            
            <div class="service-description">
                ${service.description}
            </div>
            
            <div class="service-features">
                <h4>Service Includes:</h4>
                <ul class="feature-list">
                    <li><i class="fas fa-check"></i> Professional service delivery</li>
                    <li><i class="fas fa-check"></i> Quality guaranteed</li>
                    <li><i class="fas fa-check"></i> Fast turnaround time</li>
                    ${service.category === 'business' ? '<li><i class="fas fa-check"></i> Expert consultation</li>' : ''}
                </ul>
            </div>
            
            <div class="service-actions">
                <a href="booking.html?service=${service.id}" class="btn btn-primary">
                    <i class="fas fa-calendar-alt"></i> Book Now
                </a>
                <a href="contact.html" class="btn" style="background: rgba(142, 68, 173, 0.1); color: var(--neon-purple);">
                    <i class="fas fa-info-circle"></i> Inquire
                </a>
            </div>
        `;
        
        servicesContainer.appendChild(serviceCard);
    });
    
    // Add scroll animation
    setTimeout(() => {
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.service-card').forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            observer.observe(card);
        });
    }, 100);
}
/* Add to services.css */

/* Category Description */
.category-description {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(142, 68, 173, 0.1);
    border-radius: var(--border-radius);
    border: 1px solid rgba(142, 68, 173, 0.2);
}

.category-description p {
    color: var(--light-purple);
    font-size: 1.1rem;
}

.category-description span {
    color: var(--neon-purple);
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
}

/* No Services Message */
.no-services {
    text-align: center;
    padding: 60px 40px;
    background: var(--gradient-card);
    border-radius: var(--border-radius-lg);
    border: 2px dashed rgba(142, 68, 173, 0.3);
}

.no-services i {
    font-size: 4rem;
    color: var(--neon-purple);
    margin-bottom: 20px;
    opacity: 0.5;
}

.no-services h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--white);
}

.no-services p {
    color: var(--light-purple);
    max-width: 400px;
    margin: 0 auto;
}

/* Service Statistics */
.service-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 60px;
}

.stat-card {
    background: rgba(142, 68, 173, 0.1);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(142, 68, 173, 0.2);
    transition: var(--transition);
}

.stat-card:hover {
    background: rgba(142, 68, 173, 0.2);
    border-color: var(--neon-purple);
    transform: translateY(-5px);
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: rgba(142, 68, 173, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neon-purple);
    font-size: 1.5rem;
}

.stat-info h3 {
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 5px;
}

.stat-info p {
    color: var(--light-purple);
    font-size: 0.9rem;
}

.stat-info p span {
    color: var(--neon-purple);
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
}

/* Service Count Badge */
.service-count-badge {
    display: inline-block;
    background: var(--neon-purple);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 5px;
    vertical-align: middle;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .service-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .service-stats {
        grid-template-columns: 1fr;
    }
    
    .category-description {
        padding: 15px;
    }
    
    .category-description p {
        font-size: 1rem;
    }
}