@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4">
    <div class="row">
        <div class="col-12">
            <!-- Hero Header Section -->
            <div class="hero-header text-center mb-5 animate-fade-in">
                <div class="hero-icon-wrapper mb-4">
                    <div class="hero-circle">
                        <i class="fas fa-rocket"></i>
                    </div>
                </div>
                <h1 class="display-3 fw-bold text-gradient mb-3">CMS V2</h1>
                <h4 class="text-muted mb-2">Collection Management System</h4>
                <p class="lead text-muted">Solusi Modern untuk Pengelolaan Aktivitas Recovery</p>
                <div class="version-badge">
                    <span class="badge bg-gradient-primary px-4 py-2">
                        <i class="fas fa-code-branch me-2"></i>Version 2.0
                    </span>
                </div>
            </div>

            <!-- Navigation Tabs -->
            <ul class="nav nav-pills nav-justified mb-4 modern-tabs" id="infoTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="about-tab" data-bs-toggle="pill" data-bs-target="#about" type="button">
                        <i class="fas fa-info-circle"></i>
                        <span>Tentang</span>
                    </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">
                        <i class="fas fa-sparkles"></i>
                        <span>Fitur Baru</span>
                    </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">
                        <i class="fas fa-th-large"></i>
                        <span>Menu</span>
                    </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">
                        <i class="fas fa-users"></i>
                        <span>Tim</span>
                    </button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content" id="infoTabContent">
                <!-- About Tab -->
                <div class="tab-pane fade show active" id="about" role="tabpanel">
                    <div class="modern-card gradient-border animate-slide-up">
                        <div class="card-body p-4 p-md-5">
                            <!-- About Content -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <div class="section-title">
                                        <h3 class="fw-bold mb-3">
                                            <i class="fas fa-bookmark text-primary me-2"></i>
                                            Deskripsi Aplikasi
                                        </h3>
                                    </div>
                                    <p class="text-muted lh-lg fs-6">
                                        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>
                            </div>

                            <!-- Key Features Grid -->
                            <div class="row g-4">
                                <div class="col-md-4">
                                    <div class="feature-box">
                                        <div class="feature-icon bg-gradient-success">
                                            <i class="fas fa-chart-line"></i>
                                        </div>
                                        <h5>Lebih Efisien</h5>
                                        <p>Alur logika yang disempurnakan untuk performa maksimal</p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="feature-box">
                                        <div class="feature-icon bg-gradient-info">
                                            <i class="fas fa-bell"></i>
                                        </div>
                                        <h5>Real-time Notification</h5>
                                        <p>Sistem notifikasi via WhatsApp yang lebih responsif</p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="feature-box">
                                        <div class="feature-icon bg-gradient-warning">
                                            <i class="fas fa-palette"></i>
                                        </div>
                                        <h5>Modern UI/UX</h5>
                                        <p>Tampilan yang lebih user-friendly dan menarik</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Features Tab -->
                <div class="tab-pane fade" id="features" role="tabpanel">
                    <div class="modern-card gradient-border animate-slide-up">
                        <div class="card-body p-4 p-md-5">
                            <div class="text-center mb-4">
                                <h3 class="fw-bold mb-2">
                                    <i class="fas fa-star text-warning me-2"></i>
                                    Fitur-Fitur Terbaru CMS V2
                                </h3>
                                <p class="text-muted">Inovasi dan peningkatan untuk pengalaman yang lebih baik</p>
                            </div>
                            
                            <!-- Features Accordion -->
                            <div class="accordion modern-accordion" id="featuresAccordion">
                                <!-- Login -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#feature1">
                                            <i class="fas fa-sign-in-alt me-3 text-primary"></i>
                                            <strong>Login</strong>
                                        </button>
                                    </h2>
                                    <div id="feature1" class="accordion-collapse collapse show" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <ul class="feature-list">
                                                <li><i class="fas fa-check-circle text-success"></i> Verifikasi account via WhatsApp</li>
                                                <li><i class="fas fa-check-circle text-success"></i> Fitur lupa password</li>
                                                <li><i class="fas fa-check-circle text-success"></i> Tampilan login yang lebih user-friendly</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- Register -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#feature2">
                                            <i class="fas fa-user-plus me-3 text-success"></i>
                                            <strong>Register</strong>
                                        </button>
                                    </h2>
                                    <div id="feature2" class="accordion-collapse collapse" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <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>

                                <!-- Maps -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#feature3">
                                            <i class="fas fa-map-marked-alt me-3 text-danger"></i>
                                            <strong>Maps</strong>
                                        </button>
                                    </h2>
                                    <div id="feature3" class="accordion-collapse collapse" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <p>Menampilkan peta lokasi dan informasi terkait aset kelolaan maupun sebaran somasi berdasarkan koordinat agunan maupun domisili.</p>
                                            <div class="alert alert-info mt-3">
                                                <strong><i class="fas fa-layer-group me-2"></i>Mode Peta:</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"></i> Posisi user real-time</li>
                                                <li><i class="fas fa-ruler text-primary"></i> Perhitungan jarak ke aset</li>
                                                <li><i class="fas fa-search-location text-success"></i> Fitur pencarian lokasi</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- Maintenance -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#feature4">
                                            <i class="fas fa-tools me-3 text-warning"></i>
                                            <strong>Maintenance</strong>
                                        </button>
                                    </h2>
                                    <div id="feature4" class="accordion-collapse collapse" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <p>Fitur untuk melakukan pemeliharaan dan perbaikan terhadap aset yang dikelola. Selama proses pemeliharaan, semua aktivitas tidak dapat dilakukan.</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Permintaan Pengguna -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#feature5">
                                            <i class="fas fa-comment-dots me-3 text-info"></i>
                                            <strong>Permintaan Pengguna</strong>
                                        </button>
                                    </h2>
                                    <div id="feature5" class="accordion-collapse collapse" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <p>Memungkinkan pengguna mengajukan permintaan perbaikan atau penambahan fitur, sehingga pengembangan aplikasi lebih sesuai kebutuhan dan terdata.</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Upload Excel -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#feature6">
                                            <i class="fas fa-file-excel me-3 text-success"></i>
                                            <strong>Upload By Excel</strong>
                                        </button>
                                    </h2>
                                    <div id="feature6" class="accordion-collapse collapse" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <p>Upload data master dalam format Excel untuk mempermudah proses input data, mengurangi kesalahan, dan mengurangi keterlibatan developer.</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Multiple Download -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#feature7">
                                            <i class="fas fa-download me-3 text-primary"></i>
                                            <strong>Multiple Download RH</strong>
                                        </button>
                                    </h2>
                                    <div id="feature7" class="accordion-collapse collapse" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <p>Unduh beberapa laporan RH sekaligus dalam format zip, mempermudah proses pengunduhan dan pengelolaan laporan.</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Kalender -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#feature8">
                                            <i class="fas fa-calendar-alt me-3" style="color: #9b59b6;"></i>
                                            <strong>Kalender Jadwal Next Visit AO</strong>
                                        </button>
                                    </h2>
                                    <div id="feature8" class="accordion-collapse collapse" data-bs-parent="#featuresAccordion">
                                        <div class="accordion-body">
                                            <p>Melihat jadwal kunjungan berikutnya untuk Account Officer (AO) dalam format yang mudah dibaca.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Menu Tab -->
                <div class="tab-pane fade" id="menu" role="tabpanel">
                    <div class="modern-card gradient-border animate-slide-up">
                        <div class="card-body p-4 p-md-5">
                            <div class="text-center mb-4">
                                <h3 class="fw-bold mb-2">
                                    <i class="fas fa-book-open text-primary me-2"></i>
                                    Panduan Menu & Tampilan
                                </h3>
                                <p class="text-muted">Penjelasan lengkap setiap menu dalam aplikasi</p>
                            </div>
                            
                            <div class="row g-4">
                                <!-- Dashboard -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon bg-gradient-primary">
                                            <i class="fas fa-tachometer-alt"></i>
                                        </div>
                                        <h5>Dashboard</h5>
                                        <p>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 bg-gradient-danger">
                                            <i class="fas fa-map"></i>
                                        </div>
                                        <h5>Maps</h5>
                                        <p>Peta lokasi aset kelolaan dengan berbagai mode tampilan dan pencarian.</p>
                                    </div>
                                </div>

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

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

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

                                <!-- Kalender -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon" style="background: linear-gradient(135deg, #9b59b6, #8e44ad);">
                                            <i class="fas fa-calendar-check"></i>
                                        </div>
                                        <h5>Kalender Next Visit</h5>
                                        <p>Jadwal kunjungan berikutnya untuk 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 bg-gradient-secondary">
                                            <i class="fas fa-file-signature"></i>
                                        </div>
                                        <h5>Request Document</h5>
                                        <p>Otomatis dari hasil report somasi/surat, tanpa request manual.</p>
                                    </div>
                                </div>

                                <!-- Kunjungan Principal -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon" style="background: linear-gradient(135deg, #e74c3c, #c0392b);">
                                            <i class="fas fa-handshake"></i>
                                        </div>
                                        <h5>Kunjungan Principal</h5>
                                        <p>Form kunjungan ke Principal oleh Tim Lapangan atau Officer.</p>
                                    </div>
                                </div>

                                <!-- Permintaan Perbaikan -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon" style="background: linear-gradient(135deg, #f39c12, #e67e22);">
                                            <i class="fas fa-wrench"></i>
                                        </div>
                                        <h5>Permintaan Perbaikan</h5>
                                        <p>Buat permintaan perbaikan dan lihat riwayat yang sudah diajukan.</p>
                                    </div>
                                </div>

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

                                <!-- Permintaan Pengguna -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon" style="background: linear-gradient(135deg, #3498db, #2980b9);">
                                            <i class="fas fa-comment-dots"></i>
                                        </div>
                                        <h5>Permintaan Pengguna</h5>
                                        <p>Ajukan permintaan perbaikan atau penambahan fitur aplikasi.</p>
                                    </div>
                                </div>

                                <!-- Help -->
                                <div class="col-md-6 col-lg-4">
                                    <div class="menu-card">
                                        <div class="menu-icon" style="background: linear-gradient(135deg, #1abc9c, #16a085);">
                                            <i class="fas fa-question-circle"></i>
                                        </div>
                                        <h5>Help</h5>
                                        <p>Informasi penting dan panduan penggunaan aplikasi.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Team Tab -->
                <div class="tab-pane fade" id="team" role="tabpanel">
                    <div class="modern-card gradient-border animate-slide-up">
                        <div class="card-body p-4 p-md-5">
                            <div class="text-center mb-5">
                                <h3 class="fw-bold mb-2">
                                    <i class="fas fa-users-cog text-primary me-2"></i>
                                    Tim Pengembang CMS V2
                                </h3>
                                <p class="text-muted">Orang-orang di balik kesuksesan aplikasi ini</p>
                            </div>
                            
                            <div class="row g-4">
                                <!-- Project Manager -->
                                <div class="col-md-6">
                                    <div class="team-card">
                                        <div class="team-avatar" style="background: linear-gradient(135deg, #667eea, #764ba2);">
                                            <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" style="background: linear-gradient(135deg, #11998e, #38ef7d);">
                                            <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, logika sistem, dan mendesain tampilan</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Support Team -->
                                <div class="col-md-6">
                                    <div class="team-card">
                                        <div class="team-avatar" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
                                            <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 sebelumnya</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- QA Tester -->
                                <div class="col-md-6">
                                    <div class="team-card">
                                        <div class="team-avatar" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
                                            <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>

                            <!-- Call to Action -->
                            <div class="alert alert-light border-0 shadow-sm mt-5">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-download text-danger fs-2 me-3"></i>
                                            <div>
                                                <h6 class="mb-1 fw-bold">Butuh Dokumentasi Lengkap?</h6>
                                                <p class="mb-0 text-muted">Download panduan lengkap dalam format PDF</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-md-end mt-3 mt-md-0">
                                        <a href="{{ route('help.download') }}" class="btn btn-danger btn-lg pulse-btn">
                                            <i class="fas fa-file-pdf me-2"></i>
                                            Download PDF
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

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

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px);
        }
    }

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

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

    /* Hero Section */
    .hero-header {
        position: relative;
        padding: 40px 20px;
    }

    .hero-icon-wrapper {
        display: inline-block;
        animation: float 3s ease-in-out infinite;
    }

    .hero-circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
        position: relative;
    }

    .hero-circle::before {
        content: '';
        position: absolute;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border: 3px dashed #667eea;
        opacity: 0.3;
        animation: rotate 20s linear infinite;
    }

    .hero-circle i {
        font-size: 3rem;
        color: white;
    }

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

    .version-badge {
        margin-top: 20px;
    }

    .version-badge .badge {
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

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

    /* Modern Tabs */
    .modern-tabs {
        background: white;
        padding: 15px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .modern-tabs .nav-link {
        border-radius: 15px;
        padding: 15px 25px;
        color: #6c757d;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .modern-tabs .nav-link i {
        font-size: 1.5rem;
    }

    .modern-tabs .nav-link span {
        font-size: 0.9rem;
    }

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

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

    /* Modern Card */
    .modern-card {
        background: white;
        border-radius: 25px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        border: none;
        overflow: hidden;
        position: relative;
    }

    .gradient-border::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
        background-size: 200% 100%;
        animation: shimmer 3s linear infinite;
    }

    @keyframes shimmer {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

    /* Section Title */
    .section-title h3 {
        position: relative;
        display: inline-block;
        padding-bottom: 15px;
    }

    .section-title h3::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        border-radius: 2px;
    }

    /* Feature Box */
    .feature-box {
        background: #f8f9fa;
        padding: 30px;
        border-radius: 20px;
        text-align: center;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        height: 100%;
    }

    .feature-box:hover {
        transform: translateY(-10px);
        border-color: #667eea;
        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
        background: white;
    }

    .feature-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 2rem;
        color: white;
        transition: all 0.3s ease;
    }

    .feature-box:hover .feature-icon {
        transform: rotateY(360deg) scale(1.1);
    }

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

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

    .bg-gradient-warning {
        background: linear-gradient(135deg, #f093fb, #f5576c) !important;
    }

    .feature-box h5 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 10px;
    }

    .feature-box p {
        color: #6c757d;
        font-size: 0.95rem;
        margin: 0;
    }

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

    .modern-accordion .accordion-item:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        transform: translateX(5px);
    }

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

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

    .modern-accordion .accordion-button:not(.collapsed) i {
        color: white;
    }

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

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

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

    .modern-accordion .accordion-body {
        padding: 25px;
        background: #fafbfc;
    }

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

    .feature-list li {
        padding: 10px 0;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .feature-list li i {
        font-size: 1.1rem;
    }

    /* Menu Card */
    .menu-card {
        background: white;
        padding: 30px;
        border-radius: 20px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid #f0f0f0;
        height: 100%;
        cursor: pointer;
    }

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

    .menu-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 2rem;
        transition: all 0.4s ease;
    }

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

    .bg-gradient-danger {
        background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    }

    .bg-gradient-secondary {
        background: linear-gradient(135deg, #95a5a6, #7f8c8d) !important;
    }

    .bg-gradient-dark {
        background: linear-gradient(135deg, #34495e, #2c3e50) !important;
    }

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

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

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

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

    .team-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        color: white;
        flex-shrink: 0;
        transition: all 0.3s ease;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .team-card:hover .team-avatar {
        transform: scale(1.1) rotate(5deg);
    }

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

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

    /* Pulse Button */
    .pulse-btn {
        animation: pulse 2s infinite;
        box-shadow: 0 10px 25px rgba(220, 53, 69, 0.3);
    }

    .pulse-btn:hover {
        animation: none;
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(220, 53, 69, 0.4);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .hero-circle {
            width: 100px;
            height: 100px;
        }

        .hero-circle i {
            font-size: 2.5rem;
        }

        .modern-tabs .nav-link {
            padding: 12px 15px;
        }

        .modern-tabs .nav-link i {
            font-size: 1.2rem;
        }

        .modern-tabs .nav-link span {
            font-size: 0.8rem;
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            font-size: 1.8rem;
        }

        .menu-icon {
            width: 70px;
            height: 70px;
            font-size: 1.8rem;
        }

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

        .team-avatar {
            width: 90px;
            height: 90px;
            font-size: 2rem;
        }
    }

    @media (max-width: 576px) {
        .hero-header {
            padding: 30px 15px;
        }

        .display-3 {
            font-size: 2.5rem;
        }

        .modern-tabs {
            padding: 10px;
        }

        .modern-tabs .nav-link span {
            display: none;
        }

        .alert .row {
            text-align: center;
        }

        .alert .col-md-4 {
            margin-top: 15px;
        }
    }
</style>

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

        // Accordion smooth scroll
        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 ripple effect to menu cards
        const menuCards = document.querySelectorAll('.menu-card');
        menuCards.forEach(card => {
            card.addEventListener('click', function(e) {
                const ripple = document.createElement('div');
                ripple.className = 'ripple';
                this.appendChild(ripple);
                
                const rect = this.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;
                
                ripple.style.width = ripple.style.height = size + 'px';
                ripple.style.left = x + 'px';
                ripple.style.top = y + 'px';
                
                setTimeout(() => ripple.remove(), 600);
            });
        });

        // Feature box hover sound effect simulation
        const featureBoxes = document.querySelectorAll('.feature-box, .team-card');
        featureBoxes.forEach(box => {
            box.addEventListener('mouseenter', function() {
                this.style.transition = 'all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)';
            });
        });

        // Count up animation for version badge
        const versionBadge = document.querySelector('.version-badge');
        if (versionBadge) {
            setTimeout(() => {
                versionBadge.style.transform = 'scale(1.1)';
                setTimeout(() => {
                    versionBadge.style.transform = 'scale(1)';
                }, 300);
            }, 1000);
        }
    });
</script>
@endsection