@extends('layouts.app')

@section('title', 'Help Center')

@push('styles')
<style>
    .help-page h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .help-page h1 i { color: var(--accent); }

    .help-subtitle {
        color: var(--text-muted);
        font-size: 0.85rem;
        margin-bottom: 2rem;
    }

    /* Search */
    .help-search {
        position: relative;
        margin-bottom: 2rem;
    }

    .help-search input {
        width: 100%;
        padding: 1rem 1.25rem 1rem 3rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 1rem;
        outline: none;
        transition: border-color var(--transition);
    }

    .help-search input::placeholder { color: var(--text-muted); }
    .help-search input:focus { border-color: var(--accent); }

    .help-search i {
        position: absolute;
        left: 1.125rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 1rem;
    }

    /* Quick Links */
    .quick-links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .quick-link-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        text-align: center;
        cursor: pointer;
        transition: all var(--transition);
        text-decoration: none;
        color: inherit;
    }

    .quick-link-card:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .quick-link-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        background: var(--accent-light);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.875rem;
        font-size: 1.25rem;
    }

    .quick-link-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .quick-link-desc {
        font-size: 0.78rem;
        color: var(--text-muted);
    }

    /* FAQ Accordion */
    .faq-section {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .faq-section-title {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        font-size: 0.95rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    .faq-section-title i { color: var(--accent); }

    .faq-item {
        border-bottom: 1px solid var(--border);
    }

    .faq-item:last-child { border-bottom: none; }

    .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-primary);
        transition: background var(--transition);
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        font-family: inherit;
    }

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

    .faq-question i {
        transition: transform 0.3s;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .faq-question.open i { transform: rotate(180deg); }

    .faq-answer {
        padding: 0 1.5rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.6;
    }

    .faq-answer.open {
        max-height: 300px;
        padding: 0 1.5rem 1.25rem;
    }

    /* Contact Banner */
    .contact-banner {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 2rem;
        text-align: center;
        margin-top: 1rem;
    }

    .contact-banner h2 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .contact-banner p {
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-bottom: 1.25rem;
    }

    .contact-actions {
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .contact-method {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.75rem 1.25rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        color: var(--text-primary);
        transition: all var(--transition);
        text-decoration: none;
        font-family: inherit;
        cursor: pointer;
    }

    .contact-method:hover { border-color: var(--accent); color: var(--accent); }
    .contact-method i { color: var(--accent); }

    .btn-support-ticket {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: all var(--transition);
    }

    .btn-support-ticket:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    @media (max-width: 640px) {
        .quick-links { grid-template-columns: repeat(2, 1fr); }
    }
</style>
@endpush

@section('content')
    <div class="help-page">
        <h1><i class="fas fa-circle-question"></i> Help Center</h1>
        <p class="help-subtitle">Find answers to common questions or contact our support team.</p>

        {{-- Search --}}
        <div class="help-search">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="Search for help articles, FAQs..." id="faqSearch">
        </div>

        {{-- Quick Links --}}
        <div class="quick-links">
            <div class="quick-link-card" data-scroll="general">
                <div class="quick-link-icon"><i class="fas fa-rocket"></i></div>
                <div class="quick-link-title">Getting Started</div>
                <div class="quick-link-desc">Learn the basics of Tenseal</div>
            </div>
            <div class="quick-link-card" data-scroll="escrow">
                <div class="quick-link-icon"><i class="fas fa-handshake"></i></div>
                <div class="quick-link-title">Escrow Guide</div>
                <div class="quick-link-desc">How escrow transactions work</div>
            </div>
            <div class="quick-link-card" data-scroll="payments">
                <div class="quick-link-icon"><i class="fas fa-credit-card"></i></div>
                <div class="quick-link-title">Payment Help</div>
                <div class="quick-link-desc">Deposits, withdrawals & fees</div>
            </div>
            <div class="quick-link-card" data-scroll="security">
                <div class="quick-link-icon"><i class="fas fa-shield-halved"></i></div>
                <div class="quick-link-title">Account Security</div>
                <div class="quick-link-desc">Keep your account safe</div>
            </div>
        </div>

        {{-- FAQ: General --}}
        <div class="faq-section" id="faq-general">
            <div class="faq-section-title"><i class="fas fa-circle-info"></i> General</div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">What is Tenseal? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">Tenseal is a secure escrow and marketplace platform that protects both buyers and sellers in online transactions. We hold funds safely until both parties are satisfied.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">How do I create an account? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">Visit app.tenseal.co/register, fill in your details, and verify your email address. You can start using Tenseal immediately after registration.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">Is Tenseal free to use? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">Creating an account is free. Tenseal charges a small fee on escrow transactions to cover platform and payment processing costs. See our pricing page for details.</div>
            </div>
        </div>

        {{-- FAQ: Escrow --}}
        <div class="faq-section" id="faq-escrow">
            <div class="faq-section-title"><i class="fas fa-handshake"></i> Escrow</div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">How does escrow work? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">The buyer deposits funds into Tenseal's escrow. The seller delivers the goods or services. Once the buyer confirms satisfaction, funds are released to the seller. If there's a dispute, our team mediates.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">How long does an escrow transaction take? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">The duration depends on the agreed terms between buyer and seller. Once the buyer confirms delivery, funds are released within 24 hours.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">What happens if there's a dispute? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">Either party can raise a dispute. Our dispute resolution team will review evidence from both sides and make a fair decision. Funds remain in escrow until the dispute is resolved.</div>
            </div>
        </div>

        {{-- FAQ: Payments --}}
        <div class="faq-section" id="faq-payments">
            <div class="faq-section-title"><i class="fas fa-credit-card"></i> Payments</div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">What payment methods are supported? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">We support bank transfers, debit/credit cards, and USSD payments. More payment methods are being added regularly.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">How do I withdraw funds? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">Go to your Wallet page, click "Withdraw", enter the amount and select your bank account. Withdrawals are processed within 24 hours on business days.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">Are there any hidden fees? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">No hidden fees. All applicable charges are clearly displayed before you confirm any transaction. Check our pricing page for the full fee schedule.</div>
            </div>
        </div>

        {{-- FAQ: Security --}}
        <div class="faq-section" id="faq-security">
            <div class="faq-section-title"><i class="fas fa-shield-halved"></i> Security</div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">How secure is Tenseal? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">Tenseal uses industry-standard encryption, two-factor authentication, and transaction PINs to keep your account and funds safe.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">What is a transaction PIN? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">A transaction PIN is a 4-digit code required for wallet operations like transfers and withdrawals. It adds an extra layer of security beyond your password.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">How do I enable two-factor authentication? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">Go to Security settings, click the "Two-Factor Auth" tab, and toggle it on. Follow the instructions to set up your authenticator app.</div>
            </div>
        </div>

        {{-- FAQ: Fees --}}
        <div class="faq-section" id="faq-fees">
            <div class="faq-section-title"><i class="fas fa-receipt"></i> Fees</div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">What are the escrow fees? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">Escrow fees range from 1.5% to 3% depending on the transaction amount and type. The fee is shared between buyer and seller or paid by one party as agreed.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">Are there withdrawal fees? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">A small withdrawal fee applies depending on your withdrawal method and amount. The exact fee is shown before you confirm the withdrawal.</div>
            </div>
            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">Do you charge for marketplace listings? <i class="fas fa-chevron-down"></i></button>
                <div class="faq-answer">Basic listings are free. Featured listings and promotions may incur additional charges. Marketplace transaction fees apply when a sale is completed.</div>
            </div>
        </div>

        {{-- Contact / Support Banner --}}
        <div class="contact-banner">
            <h2>Still Need Help?</h2>
            <p>Can't find what you're looking for? Our support team is ready to assist you.</p>
            <div class="contact-actions">
                <a href="mailto:support@tenseal.co" class="contact-method">
                    <i class="fas fa-envelope"></i> support@tenseal.co
                </a>
                <a href="{{ route('inventory.support') }}" class="btn-support-ticket">
                    <i class="fas fa-headset"></i> Open Support Ticket
                </a>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function toggleFaq(btn) {
        const answer = btn.nextElementSibling;
        const wasOpen = btn.classList.contains('open');

        // Close all in same section
        const section = btn.closest('.faq-section');
        section.querySelectorAll('.faq-question').forEach(q => q.classList.remove('open'));
        section.querySelectorAll('.faq-answer').forEach(a => a.classList.remove('open'));

        if (!wasOpen) {
            btn.classList.add('open');
            answer.classList.add('open');
        }
    }

    // FAQ search
    document.getElementById('faqSearch')?.addEventListener('input', function() {
        const query = this.value.toLowerCase().trim();
        document.querySelectorAll('.faq-item').forEach(function(item) {
            var text = item.textContent.toLowerCase();
            item.style.display = (!query || text.includes(query)) ? '' : 'none';
        });
        // Show/hide empty sections
        document.querySelectorAll('.faq-section').forEach(function(section) {
            var visibleItems = section.querySelectorAll('.faq-item:not([style*="display: none"])');
            section.style.display = visibleItems.length > 0 ? '' : 'none';
        });
    });

    // Quick link scroll
    document.querySelectorAll('.quick-link-card[data-scroll]').forEach(function(card) {
        card.addEventListener('click', function() {
            var target = document.getElementById('faq-' + this.dataset.scroll);
            if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    });
</script>
@endpush