@extends('layouts.app')
@section('title', 'Support Center')
@section('content')
<!-- Font Awesome 6 (Free) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="min-h-screen">
    <!-- Hero Section with Search -->
    <section class="bg-gradient-to-r from-[#4663ac] to-[#c1d8f0] text-white py-16 md:py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Need Help? We Got You!</h1>
            <p class="text-xl md:text-2xl mb-8 text-white/90">Get quick answers or chat with us if you need help!</p>
            <div class="max-w-2xl mx-auto relative search-container">
                <input type="text" 
                       id="helpSearch" 
                       placeholder="Type your question here..." 
                       class="w-full px-6 py-4 rounded-xl text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#c1d8f0] shadow-lg">
                <i class="fas fa-search absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-xl"></i>
                <div id="searchSuggestions" class="absolute top-full left-0 right-0 mt-2 bg-white rounded-xl shadow-xl hidden z-50 max-h-96 overflow-y-auto">
                </div>
            </div>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-12 relative z-10">
        <!-- Help Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
            <div class="help-card bg-white rounded-xl shadow-lg p-8 cursor-pointer border-2 border-transparent hover:border-[#4663ac] transition-all hover:shadow-xl hover:-translate-y-1" data-category="orders">
                <div class="w-16 h-16 bg-gradient-to-br from-[#4663ac] to-[#c1d8f0] rounded-xl flex items-center justify-center text-white text-3xl mb-4">
                    <i class="fas fa-box"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Orders & Claims</h3>
                <p class="text-gray-600">How to get your items and what to do if something didn't deliver.</p>
            </div>

            <div class="help-card bg-white rounded-xl shadow-lg p-8 cursor-pointer border-2 border-transparent hover:border-[#4663ac] transition-all hover:shadow-xl hover:-translate-y-1" data-category="issues">
                <div class="w-16 h-16 bg-gradient-to-br from-[#4663ac] to-[#c1d8f0] rounded-xl flex items-center justify-center text-white text-3xl mb-4">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Common Issues</h3>
                <p class="text-gray-600">Fix problems with bots or orders not showing up.</p>
            </div>

            <div class="help-card bg-white rounded-xl shadow-lg p-8 cursor-pointer border-2 border-transparent hover:border-[#4663ac] transition-all hover:shadow-xl hover:-translate-y-1" data-category="payments">
                <div class="w-16 h-16 bg-gradient-to-br from-[#4663ac] to-[#c1d8f0] rounded-xl flex items-center justify-center text-white text-3xl mb-4">
                    <i class="fas fa-credit-card"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Billing & Payments</h3>
                <p class="text-gray-600">Help with declined cards, refunds, or failed purchases.</p>
            </div>
        </div>

        <!-- FAQ Section -->
        <div class="bg-white rounded-2xl shadow-xl p-6 md:p-10 mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 mb-4">Got Questions?</h2>
            <div class="flex flex-wrap gap-3 justify-center mb-8" id="faqCategories">
                <button class="faq-category-btn px-5 py-2 rounded-lg border-2 border-gray-200 font-semibold transition-all hover:bg-[#4663ac] hover:text-white hover:border-[#4663ac] active" data-filter="all">
                    <i class="fas fa-question-circle mr-2"></i>All Questions
                </button>
                <button class="faq-category-btn px-5 py-2 rounded-lg border-2 border-gray-200 font-semibold transition-all hover:bg-[#4663ac] hover:text-white hover:border-[#4663ac]" data-filter="orders">
                    <i class="fas fa-shopping-cart mr-2"></i>Orders
                </button>
                <button class="faq-category-btn px-5 py-2 rounded-lg border-2 border-gray-200 font-semibold transition-all hover:bg-[#4663ac] hover:text-white hover:border-[#4663ac]" data-filter="issues">
                    <i class="fas fa-wrench mr-2"></i>Issues
                </button>
                <button class="faq-category-btn px-5 py-2 rounded-lg border-2 border-gray-200 font-semibold transition-all hover:bg-[#4663ac] hover:text-white hover:border-[#4663ac]" data-filter="payments">
                    <i class="fas fa-credit-card mr-2"></i>Payments
                </button>
                <button class="faq-category-btn px-5 py-2 rounded-lg border-2 border-gray-200 font-semibold transition-all hover:bg-[#4663ac] hover:text-white hover:border-[#4663ac]" data-filter="rewards">
                    <i class="fas fa-gift mr-2"></i>Rewards
                </button>
                <button class="faq-category-btn px-5 py-2 rounded-lg border-2 border-gray-200 font-semibold transition-all hover:bg-[#4663ac] hover:text-white hover:border-[#4663ac]" data-filter="safety">
                    <i class="fas fa-shield-alt mr-2"></i>Safety
                </button>
            </div>

            <div class="space-y-4" id="faqList">
                @php
                    $faqs = [
                        ['category' => 'safety', 'question' => 'Is BuyBlox a Scam?', 'answer' => 'No, BuyBlox isn\'t a scam. We\'ve delivered thousands of orders. Check our Trustpilot: <a href="https://www.trustpilot.com/review/buyblox.gg" class="text-[#4663ac] hover:underline" target="_blank">trustpilot.com/review/buyblox.gg</a>'],
                        ['category' => 'orders', 'question' => 'How do I claim my items?', 'answer' => '<ol class="list-decimal pl-5 space-y-1"><li>Enter your Roblox username</li><li>Add our bot as friend</li><li>Join the private server</li><li>Bot trades you instantly</li></ol>'],
                        ['category' => 'orders', 'question' => 'Out of stock?', 'answer' => 'Restocks happen a few times daily. Keep checking back.'],
                        ['category' => 'issues', 'question' => 'Order not showing on claim page', 'answer' => '<ul class="list-disc pl-5 space-y-1"><li>Manual delivery items need staff delivery (use live chat)</li><li>System maintenance may pause delivery</li><li>Claim link expired? Go to <a href="http://claim.buyblox.gg" class="text-[#4663ac] hover:underline">claim.buyblox.gg</a></li></ul>'],
                        ['category' => 'issues', 'question' => 'Bot taking forever?', 'answer' => 'You\'re in a queue. Wait your turn or refresh if disconnected.'],
                        ['category' => 'issues', 'question' => 'Can\'t join bot\'s game', 'answer' => 'Error 524 means privacy settings. Add bot as friend first. Under 13 accounts require friend request before joining.'],
                        ['category' => 'issues', 'question' => 'Bot not adding back', 'answer' => 'Check you\'re using correct account and bot. Roblox limits friend accepts, wait a few minutes.'],
                        ['category' => 'payments', 'question' => 'Can I get a refund?', 'answer' => 'If undelivered within 24 hours, request refund. Delivered orders not refundable.'],
                        ['category' => 'payments', 'question' => 'Card declined?', 'answer' => 'Check info, billing address, or contact bank. Digital purchases often flagged as unusual.'],
                        ['category' => 'payments', 'question' => 'Prepaid cards?', 'answer' => 'Register card on issuer website with your address first.'],
                        ['category' => 'payments', 'question' => 'Pending charges?', 'answer' => 'Failed transactions show pending holds; they drop off in 1-3 days.'],
                        ['category' => 'rewards', 'question' => 'Lucky Spin?', 'answer' => 'Free daily spin for items up to $100. One spin per 24h. No alt accounts.'],
                        ['category' => 'rewards', 'question' => 'Premium Wheel?', 'answer' => 'Orders over $50 get 1 free spin. Code emailed, expires in 3 days.'],
                        ['category' => 'rewards', 'question' => 'Cashback?', 'answer' => '5% back on every order, added after claim (up to 3 days). Expires in 30 days.'],
                    ];
                @endphp
                @foreach($faqs as $index => $faq)
                <div class="faq-item border-2 border-gray-200 rounded-xl overflow-hidden {{ $index >= 6 ? 'hidden-faq hidden' : '' }}" data-category="{{ $faq['category'] }}">
                    <div class="faq-question p-5 bg-white cursor-pointer flex justify-between items-center hover:bg-gray-50" data-question>
                        <span class="font-semibold text-gray-900"><i class="fas fa-question-circle text-[#4663ac] mr-2"></i>{{ $faq['question'] }}</span>
                        <div class="faq-toggle w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-xl transition-all duration-300">
                            <i class="fas fa-plus"></i>
                        </div>
                    </div>
                    <div class="faq-answer hidden p-5 bg-gray-50 border-t-2 border-gray-200 text-gray-700 leading-relaxed">
                        <i class="fas fa-reply text-[#4663ac] mr-2 float-left mt-1"></i>
                        {!! $faq['answer'] !!}
                    </div>
                </div>
                @endforeach
            </div>

            <div class="text-center mt-6" id="faqShowMore">
                <button id="faqShowMoreBtn" class="inline-flex items-center gap-2 px-6 py-3 border-2 border-gray-200 rounded-xl font-semibold hover:bg-[#4663ac] hover:text-white hover:border-[#4663ac] transition-all">
                    <span id="faqShowMoreText">Show More Questions</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
            </div>
        </div>

        <!-- Support Options -->
        <div class="bg-white rounded-2xl shadow-xl p-6 md:p-10 mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 mb-4">Still need help?</h2>
            <p class="text-xl text-gray-600 text-center mb-8">Our support team is available 24/7</p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
                <div onclick="openLiveChat()" class="group relative bg-gradient-to-br from-[#4663ac] to-[#c1d8f0] text-white p-8 rounded-xl cursor-pointer hover:shadow-xl transition-all hover:-translate-y-1">
                    <span class="absolute top-4 right-4 bg-red-500 text-xs px-3 py-1 rounded-full font-bold flex items-center gap-1">
                        <i class="fas fa-bolt"></i> FASTEST
                    </span>
                    <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center text-3xl mb-4 mx-auto">
                        <i class="fas fa-comment-dots"></i>
                    </div>
                    <h3 class="text-xl font-bold text-center mb-2">Live Chat</h3>
                    <p class="text-center text-white/90">Instant help from our team</p>
                </div>

                <div id="emailSupportBtn" class="bg-white p-8 rounded-xl border-2 border-gray-200 cursor-pointer hover:shadow-xl transition-all hover:-translate-y-1 hover:border-[#4663ac] group">
                    <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center text-3xl mb-4 mx-auto group-hover:bg-[#4663ac] group-hover:text-white transition-all">  
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h3 class="text-xl font-bold text-center text-gray-900 mb-2">Email Support</h3>
                    <p class="text-center text-gray-600">We'll reply within 24 hours</p>
                </div>
            </div>

            @if(session('user_id'))
            <div class="mt-10 pt-8 border-t-2 border-gray-200">
                <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                    <i class="fas fa-ticket-alt text-[#4663ac]"></i> Create a Support Ticket
                </h3>
                <form action="/support/ticket" method="POST" class="max-w-2xl mx-auto">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-heading text-[#4663ac] mr-1"></i> Subject
                        </label>
                        <input type="text" name="subject" class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-[#4663ac] focus:outline-none" placeholder="Brief description of your issue" required>
                    </div>
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-comment text-[#4663ac] mr-1"></i> Message
                        </label>
                        <textarea name="message" rows="5" class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-[#4663ac] focus:outline-none" placeholder="Describe your issue in detail..." required></textarea>
                    </div>
                    <button type="submit" class="w-full md:w-auto px-8 py-3 bg-[#4663ac] text-white font-semibold rounded-lg hover:bg-[#c1d8f0] hover:text-[#4663ac] transition-colors flex items-center justify-center gap-2">
                        <i class="fas fa-paper-plane"></i> Submit Ticket
                    </button>
                </form>
            </div>
            @endif
        </div>

        <!-- Knowledge Base -->
        <div class="bg-white rounded-2xl shadow-xl p-6 md:p-10">
            <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 mb-4 flex items-center justify-center gap-2">
                <i class="fas fa-book-open text-[#4663ac]"></i> Learn Everything
            </h2>
            
            <div id="articleGroups" class="block">
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                    @foreach([
                        'tutorials' => 'fa-graduation-cap',
                        'issues' => 'fa-exclamation-circle',
                        'rewards' => 'fa-gift',
                        'sponsorships' => 'fa-handshake',
                        'security' => 'fa-lock',
                        'getting-started' => 'fa-flag'
                    ] as $group => $icon)
                    <div class="article-group-card bg-gray-50 border-2 border-gray-200 rounded-xl p-6 text-center cursor-pointer hover:border-[#4663ac] transition-all hover:shadow-lg" data-group="{{ $group }}">
                        <div class="w-16 h-16 bg-gradient-to-br from-[#4663ac] to-[#c1d8f0] rounded-xl flex items-center justify-center text-3xl mb-3 mx-auto text-white">
                            <i class="fas {{ $icon }}"></i>
                        </div>
                        <h3 class="font-semibold text-gray-900">{{ ucfirst(str_replace('-', ' ', $group)) }}</h3>
                    </div>
                    @endforeach
                </div>
            </div>

            <div id="articleListView" class="hidden">
                <button id="backToGroups" class="inline-flex items-center gap-2 px-4 py-2 mb-6 border-2 border-gray-200 rounded-lg hover:bg-[#4663ac] hover:text-white hover:border-[#4663ac] transition-all">
                    <i class="fas fa-arrow-left"></i> Back to Categories
                </button>
                <div class="mb-6">
                    <h3 id="articleListTitle" class="text-2xl font-bold text-gray-900 flex items-center gap-2">
                        <i class="fas fa-book text-[#4663ac]"></i> <span>Tutorials</span>
                    </h3>
                    <p id="articleListDesc" class="text-gray-600">Step-by-step guides</p>
                </div>
                <div id="articleCards" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                </div>
            </div>
        </div>
    </div>

    <!-- Email Popup -->
    <div id="emailPopupOverlay" class="fixed inset-0 bg-black/50 hidden z-50"></div>
    <div id="emailPopup" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl p-8 max-w-md w-full mx-4 hidden z-50 shadow-2xl">
        <h3 class="text-2xl font-bold text-gray-900 mb-3 flex items-center gap-2">
            <i class="fas fa-envelope text-[#4663ac]"></i> Email Support
        </h3>
        <p class="text-gray-600 mb-6">Send us an email and we'll help you!</p>
        <div class="bg-gray-50 border-2 border-gray-200 rounded-xl p-4 mb-6 cursor-pointer hover:border-[#4663ac] transition-all" onclick="copyEmail()">
            <div class="flex items-center justify-between">
                <span class="font-mono font-bold text-[#4663ac] select-all">support@buyblox.com</span>
                <i class="fas fa-copy text-gray-400 hover:text-[#4663ac]"></i>
            </div>
        </div>
        <div class="mb-6">
            <h4 class="font-semibold text-gray-900 mb-2 flex items-center gap-1">
                <i class="fas fa-info-circle text-[#4663ac]"></i> Please include:
            </h4>
            <ul class="list-none space-y-2 text-gray-600">
                <li class="flex items-center gap-2"><i class="fas fa-hashtag text-[#4663ac] text-sm"></i> Your order number (if applicable)</li>
                <li class="flex items-center gap-2"><i class="fas fa-user text-[#4663ac] text-sm"></i> Your Roblox username</li>
                <li class="flex items-center gap-2"><i class="fas fa-exclamation text-[#4663ac] text-sm"></i> What went wrong</li>
            </ul>
        </div>
        <button id="closeEmailPopup" class="w-full py-3 bg-gradient-to-r from-[#4663ac] to-[#c1d8f0] text-white font-semibold rounded-xl hover:shadow-lg transition-all flex items-center justify-center gap-2">
            <i class="fas fa-check"></i> Got it!
        </button>
    </div>

    <!-- Article Modal -->
    <div id="articleModal" class="fixed inset-0 bg-black/75 hidden z-50 overflow-y-auto">
        <div class="min-h-screen px-4 flex items-center justify-center">
            <div class="bg-white rounded-2xl max-w-4xl w-full my-8">
                <div class="relative bg-gradient-to-r from-[#4663ac] to-[#c1d8f0] text-white p-8 rounded-t-2xl">
                    <button id="closeArticle" class="absolute top-4 right-4 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center text-2xl hover:bg-white/30 transition-all">
                        <i class="fas fa-times"></i>
                    </button>
                    <h2 id="articleTitle" class="text-3xl font-bold flex items-center gap-2">
                        <i class="fas fa-file-alt"></i> Article Title
                    </h2>
                </div>
                <div id="articleContent" class="p-8 text-gray-700 leading-relaxed">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function openLiveChat() {
    if (window.LC_API) {
        window.LC_API.open_chat_window();
    } else if (window.LiveChatWidget) {
        window.LiveChatWidget.call('maximize');
    } else {
        alert('Live chat is currently unavailable. Please try again later or use email support.');
    }
}

function copyEmail() {
    navigator.clipboard.writeText('support@buyblox.com').then(() => {
        alert('Email address copied to clipboard!');
    }).catch(() => {
        const textarea = document.createElement('textarea');
        textarea.value = 'support@buyblox.com';
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        alert('Email address copied to clipboard!');
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // FAQ Accordion
    document.querySelectorAll('.faq-question').forEach(question => {
        question.addEventListener('click', function(e) {
            e.preventDefault();
            const item = this.closest('.faq-item');
            const wasActive = item.classList.contains('active');
            const toggle = this.querySelector('.faq-toggle i');
            const answer = item.querySelector('.faq-answer');
            
            document.querySelectorAll('.faq-item.active').forEach(activeItem => {
                if (activeItem !== item) {
                    activeItem.classList.remove('active');
                    const activeToggle = activeItem.querySelector('.faq-toggle i');
                    const activeAnswer = activeItem.querySelector('.faq-answer');
                    if (activeToggle) activeToggle.className = 'fas fa-plus';
                    if (activeAnswer) activeAnswer.classList.add('hidden');
                }
            });
            
            if (!wasActive) {
                item.classList.add('active');
                if (toggle) toggle.className = 'fas fa-minus';
                if (answer) answer.classList.remove('hidden');
            } else {
                item.classList.remove('active');
                if (toggle) toggle.className = 'fas fa-plus';
                if (answer) answer.classList.add('hidden');
            }
        });
    });

    // Search functionality
    const searchInput = document.getElementById('helpSearch');
    const suggestions = document.getElementById('searchSuggestions');
    const faqItems = document.querySelectorAll('.faq-item');

    if (searchInput) {
        searchInput.addEventListener('input', function(e) {
            const query = e.target.value.toLowerCase().trim();
            
            if (query.length < 2) {
                suggestions.classList.add('hidden');
                return;
            }

            const results = [];
            faqItems.forEach(item => {
                const questionEl = item.querySelector('.faq-question span');
                const answerEl = item.querySelector('.faq-answer');
                if (questionEl && answerEl) {
                    const question = questionEl.textContent.toLowerCase();
                    const answer = answerEl.textContent.toLowerCase();
                    if (question.includes(query) || answer.includes(query)) {
                        results.push({
                            question: questionEl.textContent,
                            element: item
                        });
                    }
                }
            });

            if (results.length > 0) {
                suggestions.innerHTML = results.slice(0, 5).map(r => 
                    `<div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer flex items-center gap-2">
                        <i class="fas fa-search text-[#4663ac] text-sm"></i>
                        <span>${r.question}</span>
                    </div>`
                ).join('');
                suggestions.classList.remove('hidden');
            } else {
                suggestions.innerHTML = '<div class="p-3 text-gray-500 flex items-center gap-2"><i class="fas fa-exclamation-circle text-gray-400"></i> No results found</div>';
                suggestions.classList.remove('hidden');
            }
        });
    }

    if (suggestions) {
        suggestions.addEventListener('click', function(e) {
            const suggestion = e.target.closest('.cursor-pointer');
            if (suggestion) {
                const questionText = suggestion.querySelector('span')?.textContent || suggestion.textContent;
                faqItems.forEach(item => {
                    const questionEl = item.querySelector('.faq-question span');
                    if (questionEl && questionEl.textContent === questionText) {
                        item.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        const question = item.querySelector('.faq-question');
                        if (question) question.click();
                    }
                });
                suggestions.classList.add('hidden');
            }
        });
    }

    document.addEventListener('click', function(e) {
        if (!e.target.closest('.search-container')) {
            if (suggestions) suggestions.classList.add('hidden');
        }
    });

    // FAQ Filter
    const INITIAL_FAQS = 6;
    let expanded = false;
    let currentFilter = 'all';

    function filterFAQs(filter) {
        const items = document.querySelectorAll('.faq-item');
        let visibleCount = 0;

        items.forEach((item) => {
            const category = item.dataset.category;
            const matches = filter === 'all' || category === filter;
            
            if (matches) {
                visibleCount++;
                if (expanded || visibleCount <= INITIAL_FAQS) {
                    item.classList.remove('hidden');
                    item.classList.remove('hidden-faq');
                } else {
                    item.classList.add('hidden');
                    item.classList.add('hidden-faq');
                }
            } else {
                item.classList.add('hidden');
                item.classList.add('hidden-faq');
            }
        });

        const totalVisible = Array.from(items).filter(item => 
            filter === 'all' || item.dataset.category === filter
        ).length;

        const showMoreDiv = document.getElementById('faqShowMore');
        const showMoreText = document.getElementById('faqShowMoreText');
        
        if (showMoreDiv && showMoreText) {
            if (totalVisible > INITIAL_FAQS) {
                showMoreDiv.style.display = 'block';
                showMoreText.textContent = expanded ? 'Show Less' : `Show ${totalVisible - INITIAL_FAQS} More Questions`;
            } else {
                showMoreDiv.style.display = 'none';
            }
        }
    }

    document.querySelectorAll('.faq-category-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.faq-category-btn').forEach(b => {
                b.classList.remove('active', 'bg-[#4663ac]', 'text-white', 'border-[#4663ac]');
            });
            this.classList.add('active', 'bg-[#4663ac]', 'text-white', 'border-[#4663ac]');
            
            currentFilter = this.dataset.filter;
            expanded = false;
            filterFAQs(currentFilter);
        });
    });

    const showMoreBtn = document.getElementById('faqShowMoreBtn');
    if (showMoreBtn) {
        showMoreBtn.addEventListener('click', function() {
            expanded = !expanded;
            filterFAQs(currentFilter);
        });
    }

    // Help Cards click
    document.querySelectorAll('.help-card').forEach(card => {
        card.addEventListener('click', function() {
            const category = this.dataset.category;
            const categoryBtn = document.querySelector(`.faq-category-btn[data-filter="${category}"]`);
            if (categoryBtn) {
                categoryBtn.click();
                const faqSection = document.querySelector('.bg-white.rounded-2xl.shadow-xl');
                if (faqSection) {
                    faqSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }
        });
    });

    // Email Popup
    const emailBtn = document.getElementById('emailSupportBtn');
    const emailPopup = document.getElementById('emailPopup');
    const emailOverlay = document.getElementById('emailPopupOverlay');
    const closeEmail = document.getElementById('closeEmailPopup');

    if (emailBtn) {
        emailBtn.addEventListener('click', function() {
            if (emailPopup) emailPopup.classList.remove('hidden');
            if (emailOverlay) emailOverlay.classList.remove('hidden');
        });
    }

    function closeEmailPopup() {
        if (emailPopup) emailPopup.classList.add('hidden');
        if (emailOverlay) emailOverlay.classList.add('hidden');
    }

    if (closeEmail) {
        closeEmail.addEventListener('click', closeEmailPopup);
    }

    if (emailOverlay) {
        emailOverlay.addEventListener('click', closeEmailPopup);
    }

    // Knowledge Base Articles
    const articleData = {
        tutorials: {
            title: 'Tutorials',
            desc: 'Step-by-step guides for claiming items',
            articles: [
                { title: 'How to Claim MM2 Items', time: '3 min read', icon: 'fa-gamepad', content: 'Detailed guide for claiming Murder Mystery 2 items. Follow these steps to get your items instantly.' },
                { title: 'How to Claim SAB Items', time: '4 min read', icon: 'fa-dragon', content: 'Step-by-step process for claiming SAB items. Make sure to add our bot first.' },
                { title: 'Manual Delivery Guide', time: '2 min read', icon: 'fa-truck', content: 'What to do when you have manual delivery items. Contact staff through live chat.' }
            ]
        },
        issues: {
            title: 'Common Issues',
            desc: 'Quick fixes for common problems',
            articles: [
                { title: 'Bot Not Working?', time: '2 min read', icon: 'fa-robot', content: 'Troubleshooting steps when bot is not responding. Check your friend list and privacy settings.' },
                { title: 'Payment Declined?', time: '3 min read', icon: 'fa-credit-card', content: 'Why payments get declined and how to fix them. Contact your bank for international purchases.' },
                { title: 'Wrong Username?', time: '1 min read', icon: 'fa-user-edit', content: 'What to do if you entered wrong username. Contact support immediately with order number.' }
            ]
        },
        rewards: {
            title: 'Rewards & Cashback',
            desc: 'Learn about our reward system',
            articles: [
                { title: 'How Cashback Works', time: '2 min read', icon: 'fa-percent', content: 'Understanding our 5% cashback system. Cashback is added after order completion.' },
                { title: 'Lucky Spin Guide', time: '2 min read', icon: 'fa-dice', content: 'How to use the daily lucky spin. Free spin every 24 hours.' },
                { title: 'Premium Wheel Explained', time: '3 min read', icon: 'fa-star', content: 'Getting the most from premium spins. Earn spins with orders over $50.' }
            ]
        },
        sponsorships: {
            title: 'Sponsorships',
            desc: 'Become a sponsor',
            articles: [
                { title: 'Sponsorship Program', time: '3 min read', icon: 'fa-handshake', content: 'How to become a sponsor. Contact our partnership team.' },
                { title: 'Sponsor Benefits', time: '2 min read', icon: 'fa-gem', content: 'What you get as a sponsor. Exclusive perks and rewards.' }
            ]
        },
        security: {
            title: 'Security',
            desc: 'Keep your account safe',
            articles: [
                { title: 'Account Security Tips', time: '3 min read', icon: 'fa-shield', content: 'How to keep your account secure. Never share your password with anyone.' },
                { title: 'Safe Trading Practices', time: '2 min read', icon: 'fa-handshake', content: 'Best practices for safe trading. Always verify bot usernames.' }
            ]
        },
        'getting-started': {
            title: 'Getting Started',
            desc: 'New to BuyBlox? Start here',
            articles: [
                { title: 'First Purchase Guide', time: '3 min read', icon: 'fa-shopping-cart', content: 'How to make your first purchase. Choose item, checkout, and claim.' },
                { title: 'Understanding Delivery', time: '2 min read', icon: 'fa-truck-fast', content: 'How delivery works. Auto vs manual delivery explained.' }
            ]
        }
    };

    document.querySelectorAll('.article-group-card').forEach(card => {
        card.addEventListener('click', function() {
            const group = this.dataset.group;
            const data = articleData[group];
            
            if (data) {
                const titleEl = document.getElementById('articleListTitle');
                const descEl = document.getElementById('articleListDesc');
                const cardsEl = document.getElementById('articleCards');
                const groupsEl = document.getElementById('articleGroups');
                const listViewEl = document.getElementById('articleListView');
                
                if (titleEl) titleEl.innerHTML = `<i class="fas ${data.articles[0]?.icon || 'fa-book'} text-[#4663ac] mr-2"></i>${data.title}`;
                if (descEl) descEl.textContent = data.desc;
                
                if (cardsEl) {
                    const articlesHtml = data.articles.map(article => `
                        <div class="article-card border-2 border-gray-200 rounded-xl p-6 cursor-pointer hover:border-[#4663ac] transition-all hover:shadow-lg" 
                             data-title="${article.title.replace(/"/g, '&quot;')}" 
                             data-content="${article.content.replace(/"/g, '&quot;')}">
                            <div class="flex items-center gap-3 mb-3">
                                <div class="w-10 h-10 bg-gradient-to-br from-[#4663ac] to-[#c1d8f0] rounded-lg flex items-center justify-center text-white">
                                    <i class="fas ${article.icon}"></i>
                                </div>
                                <h4 class="font-bold text-gray-900">${article.title}</h4>
                            </div>
                            <p class="text-sm text-gray-500 flex items-center gap-1">
                                <i class="far fa-clock"></i> ${article.time}
                            </p>
                        </div>
                    `).join('');
                    cardsEl.innerHTML = articlesHtml;
                }
                
                if (groupsEl) groupsEl.classList.add('hidden');
                if (listViewEl) listViewEl.classList.remove('hidden');
            }
        });
    });

    const backBtn = document.getElementById('backToGroups');
    if (backBtn) {
        backBtn.addEventListener('click', function() {
            const listViewEl = document.getElementById('articleListView');
            const groupsEl = document.getElementById('articleGroups');
            
            if (listViewEl) listViewEl.classList.add('hidden');
            if (groupsEl) groupsEl.classList.remove('hidden');
        });
    }

    // Article Modal
    document.addEventListener('click', function(e) {
        const articleCard = e.target.closest('.article-card');
        if (articleCard) {
            const title = articleCard.dataset.title;
            const content = articleCard.dataset.content;
            const modal = document.getElementById('articleModal');
            const titleEl = document.getElementById('articleTitle');
            const contentEl = document.getElementById('articleContent');
            
            if (modal && titleEl && contentEl) {
                titleEl.innerHTML = `<i class="fas fa-file-alt mr-2"></i>${title || 'Article'}`;
                contentEl.innerHTML = `
                    <div class="prose max-w-none">
                        <p class="mb-4">${content || 'Content not available'}</p>
                        <div class="bg-gray-50 border-l-4 border-[#4663ac] p-4 rounded">
                            <p class="text-sm text-gray-600 flex items-start gap-2">
                                <i class="fas fa-info-circle text-[#4663ac] mt-1"></i>
                                <span>For more detailed information, please contact our support team through live chat or email.</span>
                            </p>
                        </div>
                    </div>
                `;
                modal.classList.remove('hidden');
                modal.style.display = 'flex';
            }
        }
    });

    const closeArticle = document.getElementById('closeArticle');
    if (closeArticle) {
        closeArticle.addEventListener('click', function() {
            const modal = document.getElementById('articleModal');
            if (modal) {
                modal.classList.add('hidden');
                modal.style.display = 'none';
            }
        });
    }

    window.addEventListener('click', function(e) {
        const modal = document.getElementById('articleModal');
        if (e.target === modal) {
            modal.classList.add('hidden');
            modal.style.display = 'none';
        }
    });

    // Initial filter
    filterFAQs('all');
});
</script>

<style>
.faq-item.active .faq-question {background-color: #f9fafb;}
.faq-item.active .faq-toggle {background-color: #4663ac;color: white;}
.faq-category-btn.active {background-color: #4663ac;color: white;border-color: #4663ac;}
#articleModal.active {display: flex !important;}
.article-card {transition: all 0.2s ease;}
.help-card {transition: all 0.2s ease;}
.prose {max-width: 65ch;line-height: 1.6;}
</style>
@endsection