faq.php

<?php
$page_title = 'FAQ';
require_once 'includes/header.php';
?>

<style>
/* Remove all hover effects for static pages */
.faq-hero, .faq-category, .faq-item {
    transition: none !important;
}

.faq-hero {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    padding: 3rem 0 2rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.hero-icon {
    width: 70px;
    height: 70px;
    background: var(--accent-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.faq-categories {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.faq-category {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.faq-category.active {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.category-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, #ff6b6b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-question {
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.faq-question:hover {
    background: var(--bg-tertiary);
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 0 1.5rem 1.25rem;
    max-height: 1000px;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-search-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.faq-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
}

.faq-search-box input::placeholder {
    color: var(--text-muted);
}
</style>

<div class="faq-hero">
    <div class="container" style="max-width: 900px;">
        <div class="hero-icon">
            <svg style="width: 36px; height: 36px; color: #fff;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>
        <h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-primary);">Frequently Asked Questions</h1>
        <p style="color: var(--text-secondary); font-size: 1.05rem;">Find answers to common questions about our service</p>
    </div>
</div>

<section class="section" style="padding: 3rem 0; background: var(--bg-primary);">
    <div class="container" style="max-width: 900px;">
        
        <!-- Search Box -->
        <div class="faq-search-box">
            <svg style="width: 20px; height: 20px; color: var(--text-muted);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <input type="text" id="faqSearchInput" placeholder="Search for answers..." onkeyup="searchFAQ()">
        </div>

        <!-- FAQ Categories -->
        <div class="faq-categories">
            <div class="faq-category active" onclick="filterCategory('all')">
                <div class="category-icon">
                    <svg style="width: 18px; height: 18px; color: #fff;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </div>
                <strong style="color: var(--text-primary); font-size: 0.875rem; white-space: nowrap;">All Questions</strong>
            </div>
            
            <div class="faq-category" onclick="filterCategory('purchase')">
                <div class="category-icon">
                    <svg style="width: 18px; height: 18px; color: #fff;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                    </svg>
                </div>
                <strong style="color: var(--text-primary); font-size: 0.875rem; white-space: nowrap;">Purchase & Payment</strong>
            </div>
            
            <div class="faq-category" onclick="filterCategory('download')">
                <div class="category-icon">
                    <svg style="width: 18px; height: 18px; color: #fff;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
                    </svg>
                </div>
                <strong style="color: var(--text-primary); font-size: 0.875rem; white-space: nowrap;">Download & Files</strong>
            </div>
            
            <div class="faq-category" onclick="filterCategory('support')">
                <div class="category-icon">
                    <svg style="width: 18px; height: 18px; color: #fff;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                </div>
                <strong style="color: var(--text-primary); font-size: 0.875rem; white-space: nowrap;">Support & Help</strong>
            </div>
        </div>

        <!-- FAQ List -->
        <div class="faq-list" id="faqList">

            <!-- Purchase & Payment -->
            <div class="faq-item" data-category="purchase">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Bagaimana cara membeli asset?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        1. Browse produk yang Anda inginkan<br>
                        2. Klik "Add to Cart" atau "Buy Now"<br>
                        3. Lakukan checkout dan pilih metode pembayaran<br>
                        4. Upload bukti pembayaran<br>
                        5. Tunggu konfirmasi dari admin (biasanya 1-24 jam)<br>
                        6. Setelah dikonfirmasi, Anda bisa download asset
                    </p>
                </div>
            </div>

            <div class="faq-item" data-category="purchase">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Metode pembayaran apa saja yang tersedia?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Kami menerima pembayaran melalui:<br>
                        • QRIS (Semua e-wallet)<br>
                        • DANA<br>
                        • GoPay<br>
                        • OVO<br>
                        • PayPal (untuk pembayaran internasional)
                    </p>
                </div>
            </div>

            <div class="faq-item" data-category="purchase">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Berapa lama proses konfirmasi pembayaran?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Biasanya 1-24 jam setelah Anda upload bukti pembayaran. Kami akan segera memproses dan mengirim notifikasi 
                        ketika pembayaran sudah dikonfirmasi.
                    </p>
                </div>
            </div>

            <div class="faq-item" data-category="purchase">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Apakah saya bisa refund jika tidak puas?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Refund hanya berlaku jika:<br>
                        • File yang diterima corrupt atau tidak bisa dibuka<br>
                        • Asset tidak sesuai dengan deskripsi<br>
                        • Ada masalah teknis yang tidak bisa diselesaikan<br>
                        <br>
                        Silakan hubungi support kami untuk proses refund.
                    </p>
                </div>
            </div>

            <!-- Download & Files -->
            <div class="faq-item" data-category="download">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Bagaimana cara download asset setelah pembayaran?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Setelah pembayaran dikonfirmasi dan status order menjadi "Completed", Anda bisa:<br>
                        1. Buka halaman "My Orders"<br>
                        2. Klik "View Details" pada order yang sudah completed<br>
                        3. Klik tombol "Download" pada setiap produk<br>
                        4. File akan otomatis terdownload
                    </p>
                </div>
            </div>

            <div class="faq-item" data-category="download">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Format file apa saja yang tersedia?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Untuk GTA San Andreas: DFF, TXD, dan COL files<br>
                        Untuk Roblox: RBXM, RBXL, dan compatible mesh formats<br>
                        Semua file sudah dioptimasi dan siap pakai.
                    </p>
                </div>
            </div>

            <div class="faq-item" data-category="download">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Bagaimana jika file yang saya download hilang?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Anda bisa re-download asset yang sudah dibeli kapan saja dari halaman My Orders. 
                        Riwayat pembelian Anda tersimpan permanen di akun Anda.
                    </p>
                </div>
            </div>

            <div class="faq-item" data-category="download">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Apakah saya bisa memodifikasi asset yang dibeli?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Ya, Anda bebas memodifikasi asset untuk penggunaan pribadi. Namun, Anda tidak boleh 
                        menjual kembali atau mendistribusikan asset yang sudah dimodifikasi tanpa izin.
                    </p>
                </div>
            </div>

            <!-- Support & Help -->
            <div class="faq-item" data-category="support">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Apakah saya bisa request custom asset?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Ya! Kami menyediakan layanan custom request. Anda bisa mengirimkan detail request melalui 
                        <a href="request_form.php" style="color: var(--accent-primary); text-decoration: none;">form custom request</a> 
                        dan tim kami akan membantu mewujudkan asset sesuai kebutuhan Anda.
                    </p>
                </div>
            </div>

            <div class="faq-item" data-category="support">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Bagaimana cara menghubungi support?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Anda bisa menghubungi kami melalui:<br>
                        • <a href="support.php" style="color: var(--accent-primary); text-decoration: none;">Support Page</a><br>
                        • <?php echo is_logged_in() ? '<a href="my-tickets.php" style="color: var(--accent-primary); text-decoration: none;">My Tickets</a>' : 'My Tickets (login required)'; ?><br>
                        • Email: support@lowpolycemetery.com<br>
                        <br>
                        Tim kami akan merespon dalam 1x24 jam.
                    </p>
                </div>
            </div>

            <div class="faq-item" data-category="support">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Apakah ada garansi untuk asset yang dibeli?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Semua asset sudah melalui quality control. Jika ada masalah dengan file yang Anda download, 
                        silakan hubungi support kami dan kami akan membantu menyelesaikan masalah tersebut.
                    </p>
                </div>
            </div>

            <div class="faq-item" data-category="support">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <div>
                        <strong style="color: var(--text-primary); font-size: 1rem;">Apakah tersedia asset gratis?</strong>
                    </div>
                    <svg class="faq-icon" style="width: 20px; height: 20px; color: var(--accent-primary);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="faq-answer">
                    <p style="color: var(--text-secondary); line-height: 1.7; margin: 0;">
                        Saat ini kami belum menyediakan asset gratis, namun kami menawarkan asset berkualitas tinggi 
                        dengan harga yang kompetitif. Kami mungkin akan memperkenalkan sample gratis di masa depan - 
                        cek homepage kami untuk update.
                    </p>
                </div>
            </div>
        </div>

        <!-- Still have questions -->
        <div style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; margin-top: 3rem;">
            <svg style="width: 48px; height: 48px; color: var(--accent-primary); margin: 0 auto 1rem;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-primary);">Still have questions?</h3>
            <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Can't find the answer you're looking for? We're here to help!</p>
            <a href="support.php" class="btn btn-primary" style="padding: 0.875rem 2rem;">Contact Support</a>
        </div>
    </div>
</section>

<script>
let currentCategory = 'all';

function toggleFaq(element) {
    const faqItem = element.closest('.faq-item');
    const isActive = faqItem.classList.contains('active');
    
    // Close all FAQ items
    document.querySelectorAll('.faq-item').forEach(item => {
        item.classList.remove('active');
    });
    
    // Open clicked item if it wasn't active
    if (!isActive) {
        faqItem.classList.add('active');
    }
}

function filterCategory(category) {
    currentCategory = category;
    
    // Update active category
    document.querySelectorAll('.faq-category').forEach(cat => {
        cat.classList.remove('active');
    });
    event.target.closest('.faq-category').classList.add('active');
    
    // Filter FAQ items
    const items = document.querySelectorAll('.faq-item');
    items.forEach(item => {
        if (category === 'all' || item.dataset.category === category) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
}

function searchFAQ() {
    const searchTerm = document.getElementById('faqSearchInput').value.toLowerCase();
    const items = document.querySelectorAll('.faq-item');
    
    items.forEach(item => {
        const question = item.querySelector('.faq-question strong').textContent.toLowerCase();
        const answer = item.querySelector('.faq-answer p').textContent.toLowerCase();
        
        if (question.includes(searchTerm) || answer.includes(searchTerm)) {
            if (currentCategory === 'all' || item.dataset.category === currentCategory) {
                item.style.display = 'block';
            }
        } else {
            item.style.display = 'none';
        }
    });
}
</script>

<?php require_once 'includes/footer.php'; ?>