@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4">
    <div class="row">
        <div class="col-12">
            <!-- Header Section -->
            <div class="text-center mb-5 animate-fade-in">
                <div class="help-icon-wrapper mb-3">
                    <i class="fas fa-info-circle help-icon"></i>
                </div>
                <h2 class="display-4 fw-bold text-gradient mb-2">Pusat Informasi CMS V2</h2>
                <p class="text-muted fs-5">Panduan Lengkap & Informasi Aplikasi Collection Management System</p>
            </div>

            <!-- Navigation Tabs -->
            <ul class="nav nav-pills nav-justified mb-4 custom-tabs" id="helpTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="overview-tab" data-bs-toggle="pill" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
                        <i class="fas fa-home me-2"></i> Overview
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="features-tab" data-bs-toggle="pill" data-bs-target="#features" type="button" role="tab" aria-controls="features" aria-selected="false">
                        <i class="fas fa-star me-2"></i> Fitur Baru
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="menu-tab" data-bs-toggle="pill" data-bs-target="#menu" type="button" role="tab" aria-controls="menu" aria-selected="false">
                        <i class="fas fa-list me-2"></i> Panduan Menu
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="team-tab" data-bs-toggle="pill" data-bs-target="#team" type="button" role="tab" aria-controls="team" aria-selected="false">
                        <i class="fas fa-users me-2"></i> Tim Pengembang
                    </button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content" id="helpTabContent">
                <!-- Overview Tab -->
                <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="info-card gradient-border animate-slide-up">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="icon-box bg-primary">
                                            <i class="fas fa-rocket text-white"></i>
                                        </div>
                                        <h4 class="ms-3 mb-0 fw-bold">📌 Tentang CMS V2</h4>
                                    </div>
                                    <p class="text-muted fs-6 lh-lg">
                                        Aplikasi ini merupakan <span class="badge bg-primary">update terbaru</span> dari Aplikasi CMS sebelumnya, dirancang untuk membantu dalam pengelolaan <strong>aktivitas recovery</strong>.
                                        Terdapat penambahan fitur-fitur baru yang memudahkan pengguna dalam melakukan monitoring dan pelaporan. Ada juga penyesuaian alur logika sehingga bisa lebih efektif dan akurat,
                                        termasuk di dalamnya sistem notifikasi dan pelaporan yang lebih baik serta tampilan yang lebih modern.
                                    </p>
                                    <div class="row g-3 mt-3">
                                        <div class="col-md-4">
                                            <div class="stat-card">
                                                <i class="fas fa-chart-line text-success"></i>
                                                <h5>Lebih Efisien</h5>
                                                <p>Alur logika yang disempurnakan</p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="stat-card">
                                                <i class="fas fa-bell text-warning"></i>
                                                <h5>Notifikasi Real-time</h5>
                                                <p>Update langsung via WhatsApp</p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="stat-card">
                                                <i class="fas fa-paint-brush text-info"></i>
                                                <h5>Tampilan Modern</h5>
                                                <p>UI/UX yang lebih user-friendly</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Features Tab -->
                <div class="tab-pane fade" id="features" role="tabpanel" aria-labelledby="features-tab">
                    <div class="info-card gradient-border animate-slide-up">
                        <div class="card-body p-4">
                            <h4 class="mb-4 fw-bold text-center">
                                <i class="fas fa-sparkles text-warning me-2"></i>
                                Fitur-Fitur Terbaru CMS V2
                            </h4>
                            
                            <!-- Features Accordion -->
                            <div class="accordion custom-accordion" id="featuresAccordion">
                                <!-- Login Feature -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingLogin">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLogin" aria-expanded="true" aria-controls="collapseLogin">
                                            <i class="fas fa-sign-in-alt text-primary me-3"></i>
                                            <strong>Login</strong>
                                        </button>
                                    </h2>
                                    <div id="collapseLogin" class="accordion-collapse collapse show" aria-labelledby="headingLogin" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <div class="feature-content">
                                                <ul class="feature-list">
                                                    <li><i class="fas fa-check-circle text-success me-2"></i> Verifikasi account via WhatsApp</li>
                                                    <li><i class="fas fa-check-circle text-success me-2"></i> Fitur lupa password</li>
                                                    <li><i class="fas fa-check-circle text-success me-2"></i> Tampilan login yang lebih user-friendly</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Register Feature -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingRegister">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRegister" aria-expanded="false" aria-controls="collapseRegister">
                                            <i class="fas fa-user-plus text-success me-3"></i>
                                            <strong>Register</strong>
                                        </button>
                                    </h2>
                                    <div id="collapseRegister" class="accordion-collapse collapse" aria-labelledby="headingRegister" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <div class="feature-content">
                                                <p>Proses pendaftaran kini bisa dilakukan oleh Officer jika yang didaftarkan Team Lapangan tapi jika ingin mendaftarkan Officer harus manager atau master dan kini ada pilihan role Divisi Hukum serta wajib mencantumkan nomer WhatsApp untuk verify.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Maps Feature -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingMaps">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMaps" aria-expanded="false" aria-controls="collapseMaps">
                                            <i class="fas fa-map-marked-alt text-danger me-3"></i>
                                            <strong>Maps</strong>
                                        </button>
                                    </h2>
                                    <div id="collapseMaps" class="accordion-collapse collapse" aria-labelledby="headingMaps" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <div class="feature-content">
                                                <p>Menampilkan peta lokasi dan informasi terkait aset kelolaan maupun sebaran somasi dan lainnya berdasarkan koordinat agunan maupun domisili, sehingga mempermudah lokasi terdekat dari user ke aset kelolaan.</p>
                                                <div class="alert alert-info mt-3">
                                                    <strong><i class="fas fa-layer-group me-2"></i>Mode Peta Tersedia:</strong>
                                                    <span class="badge bg-light text-dark ms-2">Light</span>
                                                    <span class="badge bg-dark ms-2">Dark</span>
                                                    <span class="badge bg-secondary ms-2">Satelit</span>
                                                    <span class="badge bg-info ms-2">Esri Street</span>
                                                    <span class="badge bg-primary ms-2">Carto Voyager</span>
                                                </div>
                                                <ul class="feature-list mt-3">
                                                    <li><i class="fas fa-location-arrow text-danger me-2"></i> Real-time posisi user</li>
                                                    <li><i class="fas fa-ruler text-primary me-2"></i> Perhitungan jarak ke aset kelolaan</li>
                                                    <li><i class="fas fa-search-location text-success me-2"></i> Fitur pencarian lokasi</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Maintenance Feature -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingMaintenance">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMaintenance" aria-expanded="false" aria-controls="collapseMaintenance">
                                            <i class="fas fa-tools text-warning me-3"></i>
                                            <strong>Maintenance</strong>
                                        </button>
                                    </h2>
                                    <div id="collapseMaintenance" class="accordion-collapse collapse" aria-labelledby="headingMaintenance" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <div class="feature-content">
                                                <p>Merupakan fitur untuk melakukan pemeliharaan dan perbaikan terhadap aset yang dikelola, jadi selama proses pemeliharaan, semua aktivitas tidak dapat dilakukan.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- User Request Feature -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingUserRequest">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseUserRequest" aria-expanded="false" aria-controls="collapseUserRequest">
                                            <i class="fas fa-comment-dots text-info me-3"></i>
                                            <strong>Permintaan Pengguna</strong>
                                        </button>
                                    </h2>
                                    <div id="collapseUserRequest" class="accordion-collapse collapse" aria-labelledby="headingUserRequest" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <div class="feature-content">
                                                <p>Fitur ini memungkinkan pengguna untuk mengajukan permintaan perbaikan atau penambahan fitur pada aplikasi, sehingga pengembangan aplikasi dapat lebih sesuai dengan kebutuhan pengguna dan terdata.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Excel Upload Feature -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingExcel">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExcel" aria-expanded="false" aria-controls="collapseExcel">
                                            <i class="fas fa-file-excel text-success me-3"></i>
                                            <strong>Upload By Excel</strong>
                                        </button>
                                    </h2>
                                    <div id="collapseExcel" class="accordion-collapse collapse" aria-labelledby="headingExcel" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <div class="feature-content">
                                                <p>Fitur ini memungkinkan pengguna untuk mengupload data master dalam format Excel, sehingga mempermudah proses input data dan mengurangi kemungkinan kesalahan dan mengurangi keterlibatan langsung pihak developer dalam proses berjalannya sistem.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Multiple Download Feature -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingDownload">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDownload" aria-expanded="false" aria-controls="collapseDownload">
                                            <i class="fas fa-download text-primary me-3"></i>
                                            <strong>Multiple Download RH</strong>
                                        </button>
                                    </h2>
                                    <div id="collapseDownload" class="accordion-collapse collapse" aria-labelledby="headingDownload" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <div class="feature-content">
                                                <p>Fitur ini memungkinkan pengguna untuk mengunduh beberapa laporan RH sekaligus dalam format zip, sehingga mempermudah proses pengunduhan dan pengelolaan laporan.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Calendar Feature -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingCalendar">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCalendar" aria-expanded="false" aria-controls="collapseCalendar">
                                            <i class="fas fa-calendar-alt text-purple me-3"></i>
                                            <strong>Kalender Jadwal Next Visit AO</strong>
                                        </button>
                                    </h2>
                                    <div id="collapseCalendar" class="accordion-collapse collapse" aria-labelledby="headingCalendar" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <div class="feature-content">
                                                <p>Fitur ini memungkinkan pengguna untuk melihat jadwal kunjungan berikutnya untuk Account Officer (AO) dalam format yang mudah dibaca.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Menu Guide Tab -->
                <div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
                    <div class="info-card gradient-border animate-slide-up">
                        <div class="card-body p-4">
                            <h4 class="mb-4 fw-bold text-center">
                                <i class="fas fa-book-open text-primary me-2"></i>
                                Panduan Menu & Tampilan
                            </h4>
                            
                            <div class="row g-4">
                                <!-- Dashboard -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon">
                                            <i class="fas fa-tachometer-alt"></i>
                                        </div>
                                        <h5>Dashboard</h5>
                                        <p>Menampilkan ringkasan data berupa Chart, Table, Label Card dan Peta.</p>
                                    </div>
                                </div>

                                <!-- Maps -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon">
                                            <i class="fas fa-map"></i>
                                        </div>
                                        <h5>Maps</h5>
                                        <p>Menampilkan peta lokasi dan informasi aset kelolaan dengan berbagai mode tampilan.</p>
                                    </div>
                                </div>

                                <!-- Reports -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon">
                                            <i class="fas fa-file-alt"></i>
                                        </div>
                                        <h5>Report Activity</h5>
                                        <p>Menampilkan informasi aset kelolaan dengan render data yang lebih ringan dan efisien.</p>
                                    </div>
                                </div>

                                <!-- Daily Activity -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon">
                                            <i class="fas fa-clipboard-list"></i>
                                        </div>
                                        <h5>Daily Activity</h5>
                                        <p>Laporan aktivitas harian dari tim lapangan secara realtime.</p>
                                    </div>
                                </div>

                                <!-- Mapping -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon">
                                            <i class="fas fa-project-diagram"></i>
                                        </div>
                                        <h5>Mapping</h5>
                                        <p>Data informasi jarak antara tim lapangan dengan aset kelolaan untuk mapping account.</p>
                                    </div>
                                </div>

                                <!-- Calendar -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon">
                                            <i class="fas fa-calendar-check"></i>
                                        </div>
                                        <h5>Kalender Next Visit</h5>
                                        <p>Jadwal kunjungan berikutnya untuk Account Officer (AO) dalam format kalender.</p>
                                    </div>
                                </div>

                                <!-- Request Document -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon">
                                            <i class="fas fa-file-signature"></i>
                                        </div>
                                        <h5>Request Document</h5>
                                        <p>Otomatis diambil dari hasil report somasi/surat, tidak perlu request manual lagi.</p>
                                    </div>
                                </div>

                                <!-- Kunjungan Principal -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon">
                                            <i class="fas fa-handshake"></i>
                                        </div>
                                        <h5>Kunjungan Principal</h5>
                                        <p>Form untuk melaporkan kunjungan ke Principal oleh Tim Lapangan atau Officer.</p>
                                    </div>
                                </div>

                                <!-- Settings -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon">
                                            <i class="fas fa-cog"></i>
                                        </div>
                                        <h5>Settings</h5>
                                        <p>Pengaturan umum aplikasi, tema, bahasa, dan preferensi pengguna.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Team Tab -->
                <div class="tab-pane fade" id="team" role="tabpanel" aria-labelledby="team-tab">
                    <div class="info-card gradient-border animate-slide-up">
                        <div class="card-body p-4">
                            <h4 class="mb-4 fw-bold text-center">
                                <i class="fas fa-users-cog text-primary me-2"></i>
                                Tim Pengembang CMS V2
                            </h4>
                            
                            <div class="row g-4">
                                <!-- Project Manager -->
                                <div class="col-md-6">
                                    <div class="team-card">
                                        <div class="team-avatar bg-gradient-primary">
                                            <i class="fas fa-user-tie"></i>
                                        </div>
                                        <div class="team-info">
                                            <h5>Dadan Mulyana</h5>
                                            <span class="badge bg-primary mb-2">Project Manager</span>
                                            <p>Mengatur perencanaan dan timeline project sekaligus penanggung jawab project</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Developer -->
                                <div class="col-md-6">
                                    <div class="team-card">
                                        <div class="team-avatar bg-gradient-success">
                                            <i class="fas fa-code"></i>
                                        </div>
                                        <div class="team-info">
                                            <h5>Tito Soediro</h5>
                                            <span class="badge bg-success mb-2">Developer</span>
                                            <p>Mengembangkan API, database, dan logika sistem, mendesain tampilan dan lainnya</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Support Team -->
                                <div class="col-md-6">
                                    <div class="team-card">
                                        <div class="team-avatar bg-gradient-info">
                                            <i class="fas fa-headset"></i>
                                        </div>
                                        <div class="team-info">
                                            <h5>Ima Nirmala</h5>
                                            <span class="badge bg-info mb-2">Support Team</span>
                                            <p>Memastikan aplikasi versi 2 masih satu koridor dengan yang sebelumnya</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- QA Tester -->
                                <div class="col-md-6">
                                    <div class="team-card">
                                        <div class="team-avatar bg-gradient-warning">
                                            <i class="fas fa-user-check"></i>
                                        </div>
                                        <div class="team-info">
                                            <h5>Semua Elemen</h5>
                                            <span class="badge bg-warning mb-2">QA Tester</span>
                                            <p>Melakukan pengujian untuk memastikan aplikasi berjalan stabil</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Additional Info -->
                            <div class="alert alert-light border-0 shadow-sm mt-4">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-info-circle text-primary fs-3 me-3"></i>
                                    <div>
                                        <h6 class="mb-1 fw-bold">Butuh Bantuan?</h6>
                                        <p class="mb-0 text-muted">Jika ada pertanyaan atau masalah, silakan hubungi tim support melalui menu <strong>Permintaan Pengguna</strong></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }

    .animate-fade-in {
        animation: fadeIn 0.6s ease-out;
    }

    .animate-slide-up {
        animation: slideUp 0.6s ease-out;
    }

    /* Text Gradient */
    .text-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Help Icon */
    .help-icon-wrapper {
        display: inline-block;
        animation: pulse 2s infinite;
    }

    .help-icon {
        font-size: 4rem;
        color: #667eea;
        filter: drop-shadow(0 5px 15px rgba(102, 126, 234, 0.3));
    }

    /* Custom Tabs */
    .custom-tabs {
        background: white;
        padding: 10px;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    .custom-tabs .nav-link {
        border-radius: 10px;
        padding: 12px 20px;
        color: #6c757d;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
    }

    .custom-tabs .nav-link:hover {
        background: #f8f9fa;
        color: #667eea;
        transform: translateY(-2px);
    }

    .custom-tabs .nav-link.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    }

    /* Info Card */
    .info-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border: none;
        overflow: hidden;
    }

    .gradient-border {
        position: relative;
    }

    .gradient-border::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    }

    /* Icon Box */
    .icon-box {
        width: 60px;
        height: 60px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }

    /* Stat Card */
    .stat-card {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        border-color: #667eea;
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2);
    }

    .stat-card i {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .stat-card h5 {
        font-size: 1rem;
        font-weight: 700;
        margin: 10px 0 5px;
        color: #2d3748;
    }

    .stat-card p {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
    }

    /* Custom Accordion */
    .custom-accordion .accordion-item {
        border: none;
        margin-bottom: 15px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    .custom-accordion .accordion-item:hover {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .custom-accordion .accordion-button {
        background: white;
        color: #2d3748;
        font-size: 1.05rem;
        padding: 18px 20px;
        border: none;
        box-shadow: none;
    }

    .custom-accordion .accordion-button:not(.collapsed) {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: none;
    }

    .custom-accordion .accordion-button:focus {
        box-shadow: none;
        border: none;
    }

    .custom-accordion .accordion-button::after {
        filter: brightness(0) invert(1);
    }

    .custom-accordion .accordion-button.collapsed::after {
        filter: none;
    }

    .custom-accordion .accordion-body {
        padding: 20px;
        background: #fafafa;
    }

    .feature-content {
        line-height: 1.8;
    }

    .feature-list {
        list-style: none;
        padding: 0;
    }

    .feature-list li {
        padding: 8px 0;
        font-size: 0.95rem;
    }

    /* Menu Card */
    .menu-card {
        background: white;
        padding: 25px;
        border-radius: 15px;
        text-align: center;
        transition: all 0.3s ease;
        border: 2px solid #f0f0f0;
        height: 100%;
    }

    .menu-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
    }

    .menu-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 2rem;
        transition: all 0.3s ease;
    }

    .menu-card:hover .menu-icon {
        transform: rotate(360deg) scale(1.1);
    }

    .menu-card h5 {
        font-size: 1.1rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 10px;
    }

    .menu-card p {
        font-size: 0.9rem;
        color: #6c757d;
        margin: 0;
    }

    /* Team Card */
    .team-card {
        background: white;
        padding: 25px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        gap: 20px;
        transition: all 0.3s ease;
        border: 2px solid #f0f0f0;
        height: 100%;
    }

    .team-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }

    .team-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: white;
        flex-shrink: 0;
    }

    .bg-gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .bg-gradient-success {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }

    .bg-gradient-info {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .bg-gradient-warning {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .team-info h5 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 8px;
    }

    .team-info p {
        font-size: 0.9rem;
        color: #6c757d;
        margin: 0;
        line-height: 1.6;
    }

    /* Text Purple */
    .text-purple {
        color: #764ba2;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .help-icon {
            font-size: 3rem;
        }

        .custom-tabs .nav-link {
            font-size: 0.85rem;
            padding: 10px 12px;
        }

        .custom-tabs .nav-link i {
            display: block;
            margin: 0 0 5px 0 !important;
        }

        .team-card {
            flex-direction: column;
            text-align: center;
        }

        .stat-card i {
            font-size: 2rem;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add smooth scroll to tabs
        const tabButtons = document.querySelectorAll('[data-bs-toggle="pill"]');
        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                setTimeout(() => {
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                }, 100);
            });
        });

        // Add animation on accordion open
        const accordionButtons = document.querySelectorAll('.accordion-button');
        accordionButtons.forEach(button => {
            button.addEventListener('click', function() {
                setTimeout(() => {
                    if (!this.classList.contains('collapsed')) {
                        this.closest('.accordion-item').scrollIntoView({
                            behavior: 'smooth',
                            block: 'nearest'
                        });
                    }
                }, 350);
            });
        });

        // Add hover effect sound (optional)
        const cards = document.querySelectorAll('.menu-card, .team-card, .stat-card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
            });
        });
    });
</script>
@endsection