@extends('layouts.app')

@section('title', 'Dedicated Support')

@section('content')

{{-- Custom CSS for Support Section --}}
@push('styles')
<style>
    /* =========================================
       DEDICATED SUPPORT SECTION - FULL CSS
       WapsChat - Meta API Integration Support
       ========================================= */

    /* ===== Section Base Styles ===== */
    .support-section {
        position: relative;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 5rem 0;
        overflow: hidden;
    }

    .support-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(37, 211, 102, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

    .support-section::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(0, 100, 224, 0.06) 0%, transparent 70%);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

    .support-section > .container {
        position: relative;
        z-index: 1;
    }

    /* ===== Typography ===== */
    .support-section h2 {
        color: #1a1a1a;
        line-height: 1.3;
    }

    .support-section .lead {
        color: #495057;
        line-height: 1.6;
    }

    .support-section .text-muted {
        color: #6c757d !important;
    }

    /* ===== Meta API Badge ===== */
    .meta-api-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(135deg, #0064E0 0%, #0055C0 100%);
        color: #ffffff;
        padding: 0.5rem 1.25rem;
        border-radius: 50px;
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 100, 224, 0.25);
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .meta-api-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 100, 224, 0.35);
        color: #ffffff;
    }

    .meta-api-badge i {
        font-size: 1rem;
    }

    /* ===== Feature List Items ===== */
    .support-section .list-unstyled {
        margin: 0;
        padding: 0;
    }

    .support-section .list-unstyled li {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .feature-icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    }

    .support-section .list-unstyled li strong {
        display: block;
        color: #1a1a1a;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .support-section .list-unstyled li p {
        margin: 0;
        font-size: 0.9rem;
    }

    /* ===== API Status Indicator ===== */
    .api-status {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem 1.25rem;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-left: 4px solid #25D366;
        border-radius: 10px;
        margin: 1.5rem 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .status-dot {
        width: 12px;
        height: 12px;
        background: #25D366;
        border-radius: 50%;
        position: relative;
        animation: pulse-green 2s infinite;
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }

    .status-dot.warning {
        background: #ffc107;
        animation: pulse-yellow 2s infinite;
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }

    .status-dot.danger {
        background: #dc3545;
        animation: pulse-red 2s infinite;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }

    @keyframes pulse-green {
        0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
        100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
    }

    @keyframes pulse-yellow {
        0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
    }

    @keyframes pulse-red {
        0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
        100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }

    .api-status small {
        color: #495057;
        line-height: 1.4;
    }

    .api-status small strong {
        color: #1a1a1a;
    }

    /* ===== CTA Button ===== */
    .cta-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        color: #ffffff !important;
        padding: 0.875rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    }

    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
        color: #ffffff !important;
    }

    .cta-button:active {
        transform: translateY(-1px);
    }

    .cta-button i {
        font-size: 1.1rem;
    }

    /* ===== Support Card (Right Column) ===== */
    .support-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.06);
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .support-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    }

    .support-card h5 {
        color: #1a1a1a;
        font-weight: 700;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    }

    /* ===== Accordion Styling ===== */
    .support-card .accordion {
        --bs-accordion-border-radius: 12px;
        --bs-accordion-inner-border-radius: 12px;
        --bs-accordion-btn-padding-y: 1rem;
        --bs-accordion-btn-padding-x: 1.25rem;
        --bs-accordion-btn-color: #1a1a1a;
        --bs-accordion-btn-bg: transparent;
        --bs-accordion-btn-focus-border-color: rgba(0, 100, 224, 0.25);
        --bs-accordion-btn-focus-box-shadow: none;
        --bs-accordion-active-color: #0064E0;
        --bs-accordion-active-bg: rgba(0, 100, 224, 0.04);
        --bs-accordion-border-color: rgba(0, 0, 0, 0.08);
    }

    .support-card .accordion-item {
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px !important;
        margin-bottom: 0.75rem;
        overflow: hidden;
        background: #f8f9fa;
    }

    .support-card .accordion-item:last-of-type {
        margin-bottom: 0;
    }

    .support-card .accordion-button {
        font-weight: 600;
        font-size: 0.95rem;
        padding: 1rem 1.25rem;
        background: transparent;
        border: none;
    }

    .support-card .accordion-button:not(.collapsed) {
        box-shadow: none;
    }

    .support-card .accordion-button::after {
        background-size: 1rem;
        transition: transform 0.2s ease;
    }

    .support-card .accordion-body {
        padding: 0 1.25rem 1.25rem;
        color: #495057;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .support-card .accordion-body ul {
        padding-left: 1.25rem;
        margin: 0.5rem 0 0;
    }

    .support-card .accordion-body li {
        margin-bottom: 0.35rem;
    }

    .support-card .accordion-body a {
        color: #0064E0;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .support-card .accordion-body a:hover {
        color: #0055C0;
        text-decoration: underline;
    }

    /* ===== Quick Actions Box ===== */
    .support-card .bg-light.rounded-3 {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .support-card .bg-light.rounded-3 small {
        color: #6c757d;
        font-weight: 500;
    }

    .support-card .btn-outline-success,
    .support-card .btn-outline-primary {
        border-radius: 50px;
        padding: 0.5rem 1.25rem;
        font-weight: 500;
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }

    .support-card .btn-outline-success {
        border-color: #25D366;
        color: #128C7E;
    }

    .support-card .btn-outline-success:hover {
        background: #25D366;
        border-color: #25D366;
        color: #ffffff;
    }

    .support-card .btn-outline-primary {
        border-color: #0064E0;
        color: #0064E0;
    }

    .support-card .btn-outline-primary:hover {
        background: #0064E0;
        border-color: #0064E0;
        color: #ffffff;
    }

    /* ===== Bootstrap Icon Enhancements ===== */
    .bi {
        vertical-align: -0.125em;
        display: inline-flex;
    }

    /* ===== Responsive Breakpoints ===== */
    @media (max-width: 1199px) {
        .support-section {
            padding: 4rem 0;
        }
        .support-section h2 {
            font-size: 1.75rem !important;
        }
    }

    @media (max-width: 991px) {
        .support-section {
            padding: 3rem 0;
        }
        .support-section::before,
        .support-section::after {
            display: none;
        }
        .support-card {
            padding: 1.75rem;
        }
        .feature-icon {
            width: 44px;
            height: 44px;
            font-size: 1.1rem;
        }
    }

    @media (max-width: 767px) {
        .support-section {
            padding: 2.5rem 0;
        }
        .support-section h2 {
            font-size: 1.5rem !important;
        }
        .support-section .lead {
            font-size: 1rem;
        }
        .meta-api-badge {
            font-size: 0.8rem;
            padding: 0.4rem 1rem;
        }
        .feature-icon {
            width: 40px;
            height: 40px;
            font-size: 1rem;
        }
        .support-section .list-unstyled li {
            gap: 0.75rem;
        }
        .api-status {
            padding: 0.75rem 1rem;
            flex-wrap: wrap;
        }
        .cta-button {
            width: 100%;
            justify-content: center;
            padding: 0.75rem 1.5rem;
        }
        .support-card {
            padding: 1.5rem;
            border-radius: 16px;
        }
        .support-card h5 {
            font-size: 1.1rem;
            margin-bottom: 1.25rem;
        }
        .support-card .accordion-button {
            font-size: 0.9rem;
            padding: 0.875rem 1rem;
        }
        .support-card .accordion-body {
            padding: 0 1rem 1rem;
            font-size: 0.875rem;
        }
    }

    @media (max-width: 480px) {
        .support-section .container {
            padding: 0 1rem;
        }
        .meta-api-badge {
            flex-wrap: wrap;
            justify-content: center;
        }
        .support-card .d-flex.gap-2 {
            flex-direction: column;
        }
        .support-card .btn {
            width: 100%;
        }
    }

    /* ===== Accessibility & Focus States ===== */
    .cta-button:focus-visible,
    .meta-api-badge:focus-visible,
    .support-card .accordion-button:focus-visible,
    .support-card .btn:focus-visible {
        outline: 3px solid rgba(0, 100, 224, 0.4);
        outline-offset: 2px;
    }

    /* ===== Reduced Motion Preference ===== */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
        .status-dot {
            animation: none;
            box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.4);
        }
        .support-card:hover,
        .cta-button:hover,
        .meta-api-badge:hover {
            transform: none;
        }
    }

    /* ===== Print Styles ===== */
    @media print {
        .support-section {
            background: #ffffff !important;
            padding: 2rem 0;
        }
        .support-section::before,
        .support-section::after,
        .cta-button,
        .support-card .btn {
            display: none !important;
        }
        .support-card {
            box-shadow: none;
            border: 1px solid #000;
            break-inside: avoid;
        }
    }
</style>
@endpush

<section class="support-section">
    <div class="container">
        <div class="row align-items-center g-4">

            <!-- Left Content: Value Proposition -->
            <div class="col-lg-6">
                <span class="meta-api-badge">
                    <i class="bi bi-cloud-check"></i>
                    Meta API Certified Partner
                </span>
                
                <h2 class="fw-bold mb-3 display-6">Dedicated Support You Can Rely On</h2>
                <p class="text-muted mb-4 lead">
                    At WapsChat, we understand that your business runs 24/7 — and so do we.
                    Our dedicated support team is always available to help you resolve issues,
                    optimize your WhatsApp campaigns, and ensure smooth communication with your customers.
                </p>

                <ul class="list-unstyled mb-4">
                    <li class="d-flex align-items-start mb-3">
                        <div class="feature-icon">✓</div>
                        <div>
                            <strong>Priority WhatsApp & Email Support</strong>
                            <p class="text-muted mb-0 small">Get responses within 1 hour during business hours</p>
                        </div>
                    </li>
                    <li class="d-flex align-items-start mb-3">
                        <div class="feature-icon">✓</div>
                        <div>
                            <strong>Fast Issue Resolution</strong>
                            <p class="text-muted mb-0 small">Average resolution time under 4 hours</p>
                        </div>
                    </li>
                    <li class="d-flex align-items-start mb-3">
                        <div class="feature-icon">✓</div>
                        <div>
                            <strong>Meta API Connection Assistance</strong>
                            <p class="text-muted mb-0 small">End-to-end help with WhatsApp Business API setup & troubleshooting</p>
                        </div>
                    </li>
                </ul>

                <div class="api-status">
                    <div class="status-dot"></div>
                    <small class="text-muted">
                        <strong>API Status:</strong> All systems operational • 
                        Last checked: <span id="last-checked">just now</span>
                    </small>
                </div>

                <a href="{{ route('support.contact') }}" class="cta-button mt-3">
                    <i class="bi bi-chat-dots"></i>
                    Get Support Now
                </a>
            </div>

            <!-- Right Content: Meta API Help Card -->
            <div class="col-lg-6">
                <div class="support-card">
                    <h5 class="fw-bold mb-4">🔧 Meta API Connection Help</h5>
                    
                    <div class="accordion" id="apiSupportAccordion">
                        <!-- Item 1: Setup -->
                        <div class="accordion-item border-0 mb-3">
                            <h6 class="accordion-header">
                                <button class="accordion-button collapsed fw-semibold" 
                                        type="button" 
                                        data-bs-toggle="collapse" 
                                        data-bs-target="#setupHelp">
                                    📱 WhatsApp Business API Setup
                                </button>
                            </h6>
                            <div id="setupHelp" 
                                 class="accordion-collapse collapse" 
                                 data-bs-parent="#apiSupportAccordion">
                                <div class="accordion-body text-muted small">
                                    We guide you through:
                                    <ul class="mb-0 mt-2">
                                        <li>Meta Business Manager verification</li>
                                        <li>Phone number registration & approval</li>
                                        <li>Webhook configuration & testing</li>
                                        <li>Message template submission</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Item 2: Troubleshooting -->
                        <div class="accordion-item border-0 mb-3">
                            <h6 class="accordion-header">
                                <button class="accordion-button collapsed fw-semibold" 
                                        type="button" 
                                        data-bs-toggle="collapse" 
                                        data-bs-target="#troubleshootHelp">
                                    ⚠️ Connection Troubleshooting
                                </button>
                            </h6>
                            <div id="troubleshootHelp" 
                                 class="accordion-collapse collapse" 
                                 data-bs-parent="#apiSupportAccordion">
                                <div class="accordion-body text-muted small">
                                    Common issues we resolve:
                                    <ul class="mb-0 mt-2">
                                        <li>Authentication token errors</li>
                                        <li>Webhook delivery failures</li>
                                        <li>Rate limit & quota management</li>
                                        <li>Message delivery status debugging</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Item 3: Documentation -->
                        <div class="accordion-item border-0 mb-3">
                            <h6 class="accordion-header">
                                <button class="accordion-button collapsed fw-semibold" 
                                        type="button" 
                                        data-bs-toggle="collapse" 
                                        data-bs-target="#docsHelp">
                                    📚 API Documentation & Resources
                                </button>
                            </h6>
                            <div id="docsHelp" 
                                 class="accordion-collapse collapse" 
                                 data-bs-parent="#apiSupportAccordion">
                                <div class="accordion-body text-muted small">
                                    Access curated resources:
                                    <ul class="mb-0 mt-2">
                                        <li>
                                            <a href="https://developers.facebook.com/docs/whatsapp" 
                                               target="_blank" 
                                               rel="noopener noreferrer" 
                                               class="text-decoration-none">
                                                Official Meta Docs
                                            </a>
                                        </li>
                                        <li>WapsChat API Integration Guide (PDF)</li>
                                        <li>Postman Collection for Testing</li>
                                        <li>Sample Code Snippets (PHP/Node.js/Python)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="mt-4 p-3 bg-light rounded-3">
                        <small class="text-muted d-block mb-2">Need immediate help?</small>
                        <div class="d-flex gap-2 flex-wrap">
                            <a href="https://wa.me/234XXXXXXXXXX" 
                               class="btn btn-outline-success btn-sm"
                               target="_blank"
                               rel="noopener noreferrer">
                                <i class="bi bi-whatsapp"></i> WhatsApp Chat
                            </a>
                            <a href="{{ route('support.ticket.create') }}" 
                               class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-ticket-perforated"></i> Open Ticket
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

{{-- JavaScript for Dynamic Elements --}}
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Update "last checked" timestamp
        const now = new Date();
        const timeElement = document.getElementById('last-checked');
        if (timeElement) {
            timeElement.textContent = now.toLocaleTimeString([], {
                hour: '2-digit', 
                minute: '2-digit'
            });
        }

        // Optional: Auto-refresh API status (uncomment to enable)
        // setInterval(checkAPIStatus, 300000);
        
        // Example API status checker (replace with your endpoint)
        // async function checkAPIStatus() {
        //     try {
        //         const response = await fetch('/api/meta/status');
        //         const data = await response.json();
        //         const dot = document.querySelector('.status-dot');
        //         if (dot) {
        //             dot.className = 'status-dot ' + (data.status || 'success');
        //         }
        //     } catch (error) {
        //         console.warn('API status check failed:', error);
        //     }
        // }
    });
</script>
@endpush

@endsection