<?php

declare(strict_types=1);

/*
|--------------------------------------------------------------------------
| Bootstrap dan session
|--------------------------------------------------------------------------
*/

$bootstrapFile = __DIR__ . '/bootstrap.php';

if (is_file($bootstrapFile)) {
    require_once $bootstrapFile;
}

if (session_status() === PHP_SESSION_NONE) {
    session_name('USERSESSID');
    session_start();
}

if (!function_exists('e')) {
    function e($value)
    {
        return htmlspecialchars(
            (string) $value,
            ENT_QUOTES,
            'UTF-8'
        );
    }
}

/*
|--------------------------------------------------------------------------
| Informasi halaman
|--------------------------------------------------------------------------
*/

$siteName = isset($siteName)
    ? (string) $siteName
    : 'Platform Online';

$pageTitle = 'Pertanyaan Umum';
$activeMenu = 'faq';

$isLoggedIn = !empty($_SESSION['user_id']);

$username = isset($_SESSION['username'])
    ? (string) $_SESSION['username']
    : 'Pengunjung';

/*
|--------------------------------------------------------------------------
| Data FAQ hardcoded
|--------------------------------------------------------------------------
*/

$faqItems = [
    [
        'category' => 'AKUN',
        'question' => 'Bagaimana cara membuat akun baru?',
        'answer' =>
            'Buka halaman Register, isi username, password, email, nomor handphone, serta data bank atau e-wallet. Pastikan seluruh data benar karena informasi tersebut dapat digunakan untuk verifikasi akun dan transaksi.',
    ],
    [
        'category' => 'AKUN',
        'question' => 'Apakah satu orang boleh memiliki lebih dari satu akun?',
        'answer' =>
            'Pengguna dianjurkan menggunakan satu akun dengan data yang valid. Akun ganda, data berulang, atau informasi yang tidak dapat diverifikasi dapat menyebabkan pemeriksaan, pembatasan, atau penolakan terhadap promo tertentu.',
    ],
    [
        'category' => 'AKUN',
        'question' => 'Apa yang harus dilakukan jika lupa password?',
        'answer' =>
            'Gunakan menu Lupa Password pada halaman login. Ikuti proses verifikasi yang tersedia. Jangan memberikan password, kode verifikasi, atau akses akun kepada pihak lain.',
    ],
    [
        'category' => 'AKUN',
        'question' => 'Mengapa akun saya tidak dapat login?',
        'answer' =>
            'Periksa kembali username atau email dan password. Pastikan akun berstatus aktif. Terlalu banyak percobaan login yang gagal juga dapat mengunci akses sementara untuk melindungi akun.',
    ],
    [
        'category' => 'TRANSAKSI',
        'question' => 'Apa yang dimaksud dengan saldo lokal?',
        'answer' =>
            'Saldo lokal adalah saldo utama yang tercatat pada akun. Deposit, penarikan, bonus, koreksi, serta perpindahan saldo seharusnya dicatat melalui transaksi sistem agar riwayatnya dapat diperiksa.',
    ],
    [
        'category' => 'TRANSAKSI',
        'question' => 'Berapa lama proses deposit?',
        'answer' =>
            'Waktu proses bergantung pada metode pembayaran dan kondisi sistem. Pastikan nominal, rekening tujuan, serta bukti transaksi sesuai. Transaksi yang memerlukan pemeriksaan tambahan dapat membutuhkan waktu lebih lama.',
    ],
    [
        'category' => 'TRANSAKSI',
        'question' => 'Mengapa deposit belum masuk ke saldo?',
        'answer' =>
            'Periksa status transaksi dan pastikan pembayaran berhasil. Kesalahan nominal, rekening tujuan, data pengirim, atau gangguan dari penyedia pembayaran dapat menyebabkan proses tertunda. Hubungi bantuan dengan menyertakan informasi transaksi yang relevan.',
    ],
    [
        'category' => 'TRANSAKSI',
        'question' => 'Apa syarat melakukan penarikan?',
        'answer' =>
            'Data rekening harus sesuai dengan pemilik akun dan akun harus memenuhi ketentuan transaksi yang berlaku. Permintaan dapat diperiksa terlebih dahulu untuk memastikan keamanan serta kesesuaian data.',
    ],
    [
        'category' => 'PROMO',
        'question' => 'Bagaimana cara melihat promo yang sedang aktif?',
        'answer' =>
            'Buka halaman Promo. Promo dapat ditampilkan untuk semua pengunjung, hanya pengguna yang belum login, atau khusus member. Periksa periode, batas minimum, batas maksimum, dan syarat setiap promo sebelum mengikuti.',
    ],
    [
        'category' => 'PROMO',
        'question' => 'Mengapa bonus atau cashback tidak dapat diklaim?',
        'answer' =>
            'Pastikan akun dan transaksi memenuhi ketentuan promo. Bonus dapat memiliki batas waktu, minimum transaksi, batas klaim, atau syarat penggunaan tertentu. Data ganda atau aktivitas yang tidak wajar juga dapat membuat klaim ditolak.',
    ],
    [
        'category' => 'EVENT',
        'question' => 'Bagaimana cara mengikuti event?',
        'answer' =>
            'Buka halaman Event, pilih event yang masih aktif, baca aturan dan hadiah, lalu tekan tombol ikut. Sebagian event dapat dilihat tanpa login, tetapi pengguna harus login untuk mendaftar sebagai peserta.',
    ],
    [
        'category' => 'EVENT',
        'question' => 'Bagaimana progres event dihitung?',
        'answer' =>
            'Progres dihitung berdasarkan aturan masing-masing event, seperti login harian, deposit berhasil, aktivitas tertentu, referral, atau peringkat turnamen. Hanya aktivitas dalam periode event yang memenuhi ketentuan yang akan dihitung.',
    ],
    [
        'category' => 'REFERRAL',
        'question' => 'Apa fungsi kode referral?',
        'answer' =>
            'Kode referral menghubungkan akun baru dengan pengguna yang mengundang sebagai upline. Pengguna baru menjadi downline setelah mendaftar menggunakan kode tersebut. Setiap pengguna juga dapat memperoleh kode referral pribadi.',
    ],
    [
        'category' => 'REFERRAL',
        'question' => 'Apakah kode referral dapat diganti setelah daftar?',
        'answer' =>
            'Hubungan upline dan downline umumnya dicatat saat pendaftaran. Perubahan setelah akun dibuat sebaiknya tidak dilakukan sembarangan karena dapat memengaruhi pencatatan bonus dan struktur referral.',
    ],
    [
        'category' => 'KEAMANAN',
        'question' => 'Bagaimana cara menjaga keamanan akun?',
        'answer' =>
            'Gunakan password yang kuat dan berbeda, jangan bagikan kode verifikasi, selalu periksa alamat website, dan keluar dari akun setelah menggunakan perangkat bersama. Jangan mengikuti arahan pihak yang meminta password atau akses akun.',
    ],
    [
        'category' => 'KEAMANAN',
        'question' => 'Apa yang harus dilakukan jika melihat aktivitas mencurigakan?',
        'answer' =>
            'Segera ganti password, logout dari akun, simpan bukti yang tersedia, dan hubungi halaman Bantuan. Hindari melanjutkan transaksi sampai keamanan akun dipastikan.',
    ],
];

$faqCategories = [];

foreach ($faqItems as $faqItem) {
    $faqCategories[
        (string) $faqItem['category']
    ] = true;
}

$faqCategories = array_keys($faqCategories);

sort($faqCategories);

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

require __DIR__ . '/includes/header.php';

?>

<style>
/*
|--------------------------------------------------------------------------
| Halaman FAQ
|--------------------------------------------------------------------------
*/

.faq-page {
    position: relative;

    width: 100%;
    min-height: calc(100vh - 70px);

    padding: 12px 8px 28px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% -6%,
            rgba(0, 139, 255, 0.28),
            transparent 285px
        ),
        radial-gradient(
            circle at 108% 42%,
            rgba(255, 179, 0, 0.11),
            transparent 190px
        ),
        linear-gradient(
            180deg,
            #031431 0%,
            #020a1c 55%,
            #010610 100%
        );
}

.faq-page::before,
.faq-page::after {
    position: absolute;

    width: 200px;
    height: 200px;

    content: "";

    border-radius: 50%;

    filter: blur(40px);

    pointer-events: none;
}

.faq-page::before {
    top: 150px;
    left: -170px;

    background:
        rgba(0, 126, 255, 0.20);
}

.faq-page::after {
    right: -175px;
    bottom: 180px;

    background:
        rgba(255, 178, 0, 0.12);
}

.faq-shell {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 540px;

    margin: 0 auto;
}

/*
|--------------------------------------------------------------------------
| Breadcrumb
|--------------------------------------------------------------------------
*/

.faq-breadcrumb {
    display: flex;

    align-items: center;

    margin-bottom: 9px;

    gap: 5px;

    color: #758ba7;

    font-size: 7px;
}

.faq-breadcrumb a {
    color: #8fd5ff;

    text-decoration: none;
}

.faq-breadcrumb span {
    color: #ffc943;
}

/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.faq-heading {
    display: grid;

    justify-items: center;

    margin-bottom: 11px;

    text-align: center;
}

.faq-heading-crown {
    margin-bottom: -4px;

    color: #ffd451;

    font-size: 29px;
    line-height: 1;

    text-shadow:
        0 1px 0 #fff5ac,
        0 3px 0 #713600,
        0 0 10px rgba(255, 194, 39, 0.65);
}

.faq-heading h1 {
    margin: 0;

    color: #ffd450;

    background:
        linear-gradient(
            180deg,
            #fff9ba 0%,
            #ffd451 36%,
            #e58b00 72%,
            #fff09a 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    font-size: clamp(24px, 7vw, 34px);
    font-weight: 1000;

    letter-spacing: -0.035em;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 2px 0 #713600)
        drop-shadow(0 5px 6px rgba(0, 0, 0, 0.72));
}

.faq-heading p {
    max-width: 440px;

    margin: 6px 0 0;

    color: #96aac5;

    font-size: 9px;
    line-height: 1.55;
}

.faq-account-state {
    display: inline-flex;

    min-height: 24px;

    align-items: center;

    margin-top: 8px;
    padding: 0 9px;

    gap: 5px;

    border:
        1px solid rgba(70, 222, 150, 0.25);

    border-radius: 999px;

    color: #a9dec4;

    background:
        rgba(4, 48, 32, 0.56);

    font-size: 7px;
    font-weight: 850;
}

.faq-account-state i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #50e39a;

    box-shadow:
        0 0 6px rgba(80, 227, 154, 0.70);
}

/*
|--------------------------------------------------------------------------
| Hero pencarian
|--------------------------------------------------------------------------
*/

.faq-hero {
    position: relative;

    margin-bottom: 10px;
    padding: 15px;

    overflow: hidden;

    border:
        1px solid rgba(255, 198, 48, 0.42);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(255, 191, 32, 0.15),
            transparent 145px
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(0, 157, 255, 0.16),
            transparent 155px
        ),
        linear-gradient(
            145deg,
            #0a2b5d,
            #04132f
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 9px 24px rgba(0, 0, 0, 0.34);
}

.faq-hero::before {
    position: absolute;

    top: 0;
    right: 18px;
    left: 18px;

    height: 1px;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 239, 157, 0.82),
            transparent
        );
}

.faq-hero-head {
    display: grid;

    grid-template-columns:
        43px
        minmax(0, 1fr);

    align-items: center;

    gap: 10px;
}

.faq-hero-icon {
    display: grid;

    width: 43px;
    height: 43px;

    place-items: center;

    border:
        1px solid #ffd24d;

    border-radius: 13px;

    color: #2d1700;

    background:
        linear-gradient(
            145deg,
            #fff6aa,
            #ffc52f 58%,
            #b86900
        );

    font-size: 21px;
    font-weight: 1000;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        0 0 13px rgba(255, 183, 18, 0.28);
}

.faq-hero h2 {
    margin: 0;

    color: #ffffff;

    font-size: 14px;
    font-weight: 1000;
}

.faq-hero p {
    margin: 4px 0 0;

    color: #9fb2ca;

    font-size: 8px;
    line-height: 1.5;
}

.faq-search {
    position: relative;

    margin-top: 12px;
}

.faq-search input {
    display: block;

    width: 100%;
    min-height: 43px;

    padding:
        0
        42px
        0
        12px;

    border:
        1px solid rgba(0, 163, 255, 0.34);

    border-radius: 10px;

    outline: none;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(3, 19, 44, 0.97),
            rgba(1, 9, 23, 0.99)
        );

    font-family: inherit;
    font-size: 10px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -2px 5px rgba(0, 0, 0, 0.32);
}

.faq-search input::placeholder {
    color: #566d89;
}

.faq-search input:focus {
    border-color: #ffc83f;

    box-shadow:
        0 0 0 2px rgba(255, 192, 38, 0.10),
        0 0 9px rgba(255, 185, 25, 0.31);
}

.faq-search-icon {
    position: absolute;

    top: 50%;
    right: 12px;

    color: #ffd24c;

    font-size: 16px;

    transform: translateY(-50%);
}

/*
|--------------------------------------------------------------------------
| Statistik
|--------------------------------------------------------------------------
*/

.faq-stats {
    display: grid;

    margin-bottom: 10px;
    padding: 7px;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 5px;

    border:
        1px solid rgba(0, 159, 255, 0.25);

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 37, 78, 0.95),
            rgba(2, 16, 38, 0.98)
        );
}

.faq-stat {
    display: grid;

    min-height: 49px;

    align-content: center;
    justify-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 9px;

    background:
        rgba(0, 0, 0, 0.14);

    text-align: center;
}

.faq-stat strong {
    color: #ffd34e;

    font-size: 15px;
    font-weight: 1000;
}

.faq-stat small {
    margin-top: 2px;

    color: #7e94b0;

    font-size: 6px;
    font-weight: 800;
}

/*
|--------------------------------------------------------------------------
| Filter kategori
|--------------------------------------------------------------------------
*/

.faq-filter-wrap {
    margin-bottom: 10px;
}

.faq-filter-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;
}

.faq-filter-head strong {
    color: #ffffff;

    font-size: 11px;
}

.faq-filter-head small {
    color: #758ba7;

    font-size: 7px;
}

.faq-filter-scroll {
    display: flex;

    overflow-x: auto;

    padding-bottom: 3px;

    gap: 6px;

    scrollbar-width: none;
}

.faq-filter-scroll::-webkit-scrollbar {
    display: none;
}

.faq-filter-button {
    flex: 0 0 auto;

    min-height: 29px;

    padding: 0 11px;

    border:
        1px solid rgba(0, 157, 255, 0.28);

    border-radius: 999px;

    color: #8fa7c3;

    background:
        linear-gradient(
            180deg,
            #08284f,
            #03142d
        );

    font-size: 7px;
    font-weight: 900;

    cursor: pointer;
}

.faq-filter-button.is-active {
    border-color:
        rgba(255, 211, 78, 0.72);

    color: #271400;

    background:
        linear-gradient(
            180deg,
            #ffe687,
            #ffb719
        );

    box-shadow:
        0 0 8px rgba(255, 183, 23, 0.28);
}

/*
|--------------------------------------------------------------------------
| Accordion
|--------------------------------------------------------------------------
*/

.faq-list {
    display: grid;

    gap: 7px;
}

.faq-item {
    overflow: hidden;

    border:
        1px solid rgba(0, 159, 255, 0.24);

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 34, 72, 0.97),
            rgba(2, 14, 33, 0.99)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 11px rgba(0, 0, 0, 0.23);
}

.faq-item[open] {
    border-color:
        rgba(255, 197, 42, 0.44);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 14px rgba(0, 0, 0, 0.30),
        0 0 9px rgba(255, 185, 23, 0.10);
}

.faq-item summary {
    display: grid;

    min-height: 53px;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        25px;

    align-items: center;

    padding: 8px 9px;

    gap: 8px;

    color: #ffffff;

    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item-icon {
    display: grid;

    width: 34px;
    height: 34px;

    place-items: center;

    border:
        1px solid rgba(255, 206, 72, 0.44);

    border-radius: 10px;

    color: #ffd24c;

    background:
        linear-gradient(
            180deg,
            rgba(255, 198, 40, 0.13),
            rgba(105, 53, 0, 0.08)
        );

    font-size: 14px;
    font-weight: 1000;
}

.faq-question-copy {
    display: grid;

    min-width: 0;

    gap: 2px;
}

.faq-question-copy small {
    color: #61cbff;

    font-size: 6px;
    font-weight: 1000;

    letter-spacing: 0.08em;
}

.faq-question-copy strong {
    color: #ffffff;

    font-size: 9px;
    font-weight: 1000;

    line-height: 1.35;
}

.faq-item-arrow {
    display: grid;

    width: 25px;
    height: 25px;

    place-items: center;

    border-radius: 8px;

    color: #8fd5ff;
    background:
        rgba(255, 255, 255, 0.05);

    font-size: 17px;

    transition:
        transform 160ms ease;
}

.faq-item[open] .faq-item-arrow {
    color: #ffd24c;

    transform: rotate(90deg);
}

.faq-answer {
    padding:
        11px
        12px
        13px
        51px;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);

    color: #a9bad0;

    font-size: 8px;
    line-height: 1.7;
}

.faq-empty {
    display: none;

    padding: 22px 12px;

    border:
        1px dashed rgba(255, 194, 39, 0.30);

    border-radius: 12px;

    color: #91a5bf;
    background:
        rgba(4, 18, 42, 0.74);

    font-size: 9px;
    line-height: 1.5;

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Bantuan
|--------------------------------------------------------------------------
*/

.faq-help {
    display: grid;

    margin-top: 12px;
    padding: 12px;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-items: center;

    gap: 10px;

    border:
        1px solid rgba(78, 231, 151, 0.26);

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(6, 67, 42, 0.52),
            rgba(2, 31, 21, 0.78)
        );
}

.faq-help-icon {
    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    border:
        2px solid #62e7a2;

    border-radius: 50%;

    color: #d6ffe8;
    background:
        rgba(4, 45, 29, 0.85);

    font-size: 17px;
    font-weight: 1000;
}

.faq-help strong {
    display: block;

    color: #ffffff;

    font-size: 9px;
}

.faq-help p {
    margin: 4px 0 0;

    color: #9bc8b2;

    font-size: 7px;
    line-height: 1.55;
}

.faq-actions {
    display: grid;

    margin-top: 12px;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}

.faq-button {
    display: flex;

    min-height: 40px;

    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border:
        1px solid rgba(0, 166, 255, 0.40);

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(11, 63, 117, 0.92),
            rgba(3, 26, 59, 0.98)
        );

    font-size: 8px;
    font-weight: 1000;

    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.25);
}

.faq-button--gold {
    border-color: #ffe17f;

    color: #301700;

    background:
        linear-gradient(
            180deg,
            #fff08c,
            #ffc32d 50%,
            #d87700
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 3px 0 #572900,
        0 0 8px rgba(255, 183, 20, 0.28);
}

.faq-footer-note {
    margin: 12px 0 0;

    color: #627894;

    font-size: 7px;
    line-height: 1.55;

    text-align: center;
}

@media (max-width: 390px) {
    .faq-hero {
        padding: 12px;
    }

    .faq-answer {
        padding-left: 48px;
    }
}

@media (max-width: 340px) {
    .faq-stats,
    .faq-actions {
        grid-template-columns: 1fr;
    }
}
</style>

<section class="faq-page">
    <div class="faq-shell">

        <nav
            class="faq-breadcrumb"
            aria-label="Breadcrumb"
        >
            <a href="index.php">
                Home
            </a>

            <span>›</span>

            <strong>
                FAQ
            </strong>
        </nav>

        <header class="faq-heading">
            <span
                class="faq-heading-crown"
                aria-hidden="true"
            >
                ♛
            </span>

            <h1>
                PERTANYAAN UMUM
            </h1>

            <p>
                Temukan jawaban tentang akun, transaksi,
                promo, event, referral, dan keamanan.
            </p>

            <span class="faq-account-state">
                <i></i>

                <?php if ($isLoggedIn): ?>
                    Dibuka sebagai <?= e($username); ?>
                <?php else: ?>
                    Informasi tersedia tanpa login
                <?php endif; ?>
            </span>
        </header>

        <section class="faq-hero">

            <div class="faq-hero-head">

                <span class="faq-hero-icon">
                    ?
                </span>

                <div>
                    <h2>
                        Apa yang ingin Anda ketahui?
                    </h2>

                    <p>
                        Ketik kata kunci atau pilih kategori
                        untuk menemukan jawaban lebih cepat.
                    </p>
                </div>

            </div>

            <div class="faq-search">
                <input
                    id="faqSearch"
                    type="search"
                    placeholder="Cari: deposit, password, referral..."
                    autocomplete="off"
                    aria-label="Cari pertanyaan"
                >

                <span
                    class="faq-search-icon"
                    aria-hidden="true"
                >
                    ⌕
                </span>
            </div>

        </section>

        <section class="faq-stats">

            <div class="faq-stat">
                <strong>
                    <?= count($faqItems); ?>
                </strong>

                <small>
                    PERTANYAAN
                </small>
            </div>

            <div class="faq-stat">
                <strong>
                    <?= count($faqCategories); ?>
                </strong>

                <small>
                    KATEGORI
                </small>
            </div>

            <div class="faq-stat">
                <strong>
                    24/7
                </strong>

                <small>
                    AKSES INFORMASI
                </small>
            </div>

        </section>

        <section class="faq-filter-wrap">

            <div class="faq-filter-head">
                <strong>
                    Kategori FAQ
                </strong>

                <small id="faqResultCount">
                    <?= count($faqItems); ?> hasil
                </small>
            </div>

            <div class="faq-filter-scroll">

                <button
                    class="faq-filter-button is-active"
                    type="button"
                    data-faq-filter="ALL"
                >
                    SEMUA
                </button>

                <?php foreach ($faqCategories as $category): ?>

                    <button
                        class="faq-filter-button"
                        type="button"
                        data-faq-filter="<?= e($category); ?>"
                    >
                        <?= e($category); ?>
                    </button>

                <?php endforeach; ?>

            </div>

        </section>

        <section
            class="faq-list"
            id="faqList"
        >

            <?php foreach ($faqItems as $index => $faqItem): ?>

                <details
                    class="faq-item"
                    data-faq-item
                    data-faq-category="<?= e($faqItem['category']); ?>"
                    data-faq-search="<?= e(
                        strtolower(
                            $faqItem['question'] .
                            ' ' .
                            $faqItem['answer'] .
                            ' ' .
                            $faqItem['category']
                        )
                    ); ?>"
                    <?= $index === 0 ? 'open' : ''; ?>
                >
                    <summary>

                        <span class="faq-item-icon">
                            ?
                        </span>

                        <span class="faq-question-copy">

                            <small>
                                <?= e($faqItem['category']); ?>
                            </small>

                            <strong>
                                <?= e($faqItem['question']); ?>
                            </strong>

                        </span>

                        <span class="faq-item-arrow">
                            ›
                        </span>

                    </summary>

                    <div class="faq-answer">
                        <?= e($faqItem['answer']); ?>
                    </div>

                </details>

            <?php endforeach; ?>

            <div
                class="faq-empty"
                id="faqEmpty"
            >
                Pertanyaan tidak ditemukan.
                Coba gunakan kata kunci lain atau buka
                halaman Bantuan.
            </div>

        </section>

        <section class="faq-help">

            <span class="faq-help-icon">
                ✓
            </span>

            <div>
                <strong>
                    Masih membutuhkan bantuan?
                </strong>

                <p>
                    Buka halaman Bantuan untuk melihat
                    informasi kontak dan panduan penyelesaian
                    kendala akun atau transaksi.
                </p>
            </div>

        </section>

        <div class="faq-actions">

            <a
                class="faq-button"
                href="bantuan.php"
            >
                PUSAT BANTUAN
            </a>

            <?php if ($isLoggedIn): ?>

                <a
                    class="faq-button faq-button--gold"
                    href="account.php"
                >
                    BUKA AKUN
                </a>

            <?php else: ?>

                <a
                    class="faq-button faq-button--gold"
                    href="register.php"
                >
                    DAFTAR SEKARANG
                </a>

            <?php endif; ?>

        </div>

        <p class="faq-footer-note">
            Informasi dapat diperbarui mengikuti perubahan
            layanan dan ketentuan yang berlaku.
        </p>

    </div>
</section>

<script>
(function () {
    'use strict';

    var searchInput =
        document.getElementById('faqSearch');

    var faqItems =
        document.querySelectorAll(
            '[data-faq-item]'
        );

    var filterButtons =
        document.querySelectorAll(
            '[data-faq-filter]'
        );

    var emptyState =
        document.getElementById('faqEmpty');

    var resultCount =
        document.getElementById(
            'faqResultCount'
        );

    var activeCategory = 'ALL';

    function normalize(value) {
        return String(value || '')
            .toLowerCase()
            .trim();
    }

    function applyFaqFilter() {
        var searchValue = normalize(
            searchInput
                ? searchInput.value
                : ''
        );

        var visibleCount = 0;

        Array.prototype.forEach.call(
            faqItems,
            function (item) {
                var category =
                    item.getAttribute(
                        'data-faq-category'
                    ) || '';

                var searchable = normalize(
                    item.getAttribute(
                        'data-faq-search'
                    )
                );

                var categoryMatch =
                    activeCategory === 'ALL' ||
                    category === activeCategory;

                var searchMatch =
                    searchValue === '' ||
                    searchable.indexOf(
                        searchValue
                    ) !== -1;

                var shouldShow =
                    categoryMatch &&
                    searchMatch;

                item.style.display =
                    shouldShow
                        ? ''
                        : 'none';

                if (shouldShow) {
                    visibleCount++;
                }
            }
        );

        if (emptyState) {
            emptyState.style.display =
                visibleCount === 0
                    ? 'block'
                    : 'none';
        }

        if (resultCount) {
            resultCount.textContent =
                visibleCount + ' hasil';
        }
    }

    if (searchInput) {
        searchInput.addEventListener(
            'input',
            applyFaqFilter
        );
    }

    Array.prototype.forEach.call(
        filterButtons,
        function (button) {
            button.addEventListener(
                'click',
                function () {
                    activeCategory =
                        button.getAttribute(
                            'data-faq-filter'
                        ) || 'ALL';

                    Array.prototype.forEach.call(
                        filterButtons,
                        function (item) {
                            item.classList.remove(
                                'is-active'
                            );
                        }
                    );

                    button.classList.add(
                        'is-active'
                    );

                    applyFaqFilter();
                }
            );
        }
    );
})();
</script>

<?php require __DIR__ . '/includes/footer.php'; ?>
