<?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 = 'Peraturan';
$activeMenu = 'peraturan';

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

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

/*
|--------------------------------------------------------------------------
| Data peraturan hardcoded
|--------------------------------------------------------------------------
*/

$rules = [
    [
        'number' => '01',
        'title' => 'Batas Usia dan Kelayakan Pengguna',
        'content' =>
            "Layanan hanya ditujukan bagi pengguna yang telah memenuhi batas usia sesuai ketentuan yang berlaku di wilayah masing-masing.\n\nPengguna bertanggung jawab memastikan dirinya memiliki hak dan kelayakan untuk menggunakan layanan ini.",
        'icon' => '18+',
        'open' => true,
    ],
    [
        'number' => '02',
        'title' => 'Pendaftaran dan Kepemilikan Akun',
        'content' =>
            "Setiap pengguna wajib memberikan data pendaftaran yang benar, lengkap, dan dapat diverifikasi.\n\nSatu pengguna dianjurkan hanya memiliki satu akun. Akun ganda, data palsu, atau identitas yang tidak dapat diverifikasi dapat dikenakan pembatasan.",
        'icon' => '◆',
        'open' => false,
    ],
    [
        'number' => '03',
        'title' => 'Keamanan Akun',
        'content' =>
            "Pengguna wajib menjaga kerahasiaan password, kode verifikasi, dan informasi akun.\n\nSegala aktivitas yang terjadi melalui akun dianggap sebagai tanggung jawab pemilik akun sampai terdapat laporan dan pemeriksaan lebih lanjut.",
        'icon' => '✓',
        'open' => false,
    ],
    [
        'number' => '04',
        'title' => 'Saldo dan Transaksi',
        'content' =>
            "Setiap deposit, penarikan, bonus, cashback, koreksi, atau perpindahan saldo harus tercatat melalui sistem.\n\nTransaksi dapat ditunda, ditolak, atau dibatalkan apabila ditemukan data tidak sesuai, duplikasi, gangguan sistem, atau aktivitas yang tidak wajar.",
        'icon' => '₿',
        'open' => false,
    ],
    [
        'number' => '05',
        'title' => 'Promo, Bonus, dan Cashback',
        'content' =>
            "Setiap promo memiliki periode, minimum transaksi, batas maksimum, batas klaim, dan persyaratan penggunaan yang berbeda.\n\nPromo dapat dibatalkan apabila ditemukan penyalahgunaan, akun ganda, data tidak valid, atau pelanggaran terhadap ketentuan yang berlaku.",
        'icon' => '★',
        'open' => false,
    ],
    [
        'number' => '06',
        'title' => 'Referral, Upline, dan Downline',
        'content' =>
            "Kode referral digunakan untuk menghubungkan akun baru dengan pengguna yang mengundang sebagai upline.\n\nHubungan upline dan downline tercatat saat pendaftaran dan tidak boleh dimanipulasi untuk mendapatkan keuntungan yang tidak semestinya.",
        'icon' => 'R',
        'open' => false,
    ],
    [
        'number' => '07',
        'title' => 'Event dan Turnamen',
        'content' =>
            "Peserta wajib mengikuti syarat, periode, metode penilaian, serta aturan hadiah pada masing-masing event.\n\nPoin, progres, dan peringkat hanya dihitung dari aktivitas yang memenuhi ketentuan selama periode event berlangsung.",
        'icon' => '♛',
        'open' => false,
    ],
    [
        'number' => '08',
        'title' => 'Aktivitas yang Dilarang',
        'content' =>
            "Pengguna dilarang melakukan manipulasi sistem, penyalahgunaan promo, penggunaan akun pihak lain, transaksi palsu, eksploitasi kesalahan sistem, bot, atau tindakan lain yang merugikan layanan maupun pengguna lain.\n\nPelanggaran dapat menyebabkan pembatalan transaksi, penghapusan bonus, penangguhan, atau pemblokiran akun.",
        'icon' => '!',
        'open' => false,
    ],
    [
        'number' => '09',
        'title' => 'Pemeriksaan dan Verifikasi',
        'content' =>
            "Sistem dapat meminta verifikasi tambahan untuk memastikan keamanan akun, kebenaran data, dan kesesuaian transaksi.\n\nPengguna wajib memberikan informasi yang relevan dan tidak menyesatkan selama proses pemeriksaan.",
        'icon' => '⌕',
        'open' => false,
    ],
    [
        'number' => '10',
        'title' => 'Pembatasan dan Penangguhan Akun',
        'content' =>
            "Akun dapat dibatasi, ditangguhkan, atau diblokir apabila ditemukan pelanggaran, aktivitas tidak wajar, data tidak valid, atau risiko keamanan.\n\nTindakan tersebut dapat dilakukan sementara selama proses pemeriksaan maupun secara permanen berdasarkan hasil evaluasi.",
        'icon' => '×',
        'open' => false,
    ],
    [
        'number' => '11',
        'title' => 'Gangguan Sistem dan Koreksi Data',
        'content' =>
            "Apabila terjadi gangguan teknis, kesalahan pencatatan, duplikasi transaksi, atau ketidaksesuaian saldo, sistem berhak melakukan koreksi berdasarkan riwayat dan bukti yang tersedia.\n\nPengguna dianjurkan menyimpan bukti transaksi untuk membantu proses pemeriksaan.",
        'icon' => '↻',
        'open' => false,
    ],
    [
        'number' => '12',
        'title' => 'Penggunaan Bertanggung Jawab',
        'content' =>
            "Gunakan layanan secara wajar dan bertanggung jawab. Tetapkan batas waktu serta anggaran pribadi.\n\nJangan menggunakan dana kebutuhan utama, dana pinjaman, atau dana yang seharusnya digunakan untuk keperluan penting lainnya.",
        'icon' => '♥',
        'open' => false,
    ],
    [
        'number' => '13',
        'title' => 'Penyelesaian Kendala',
        'content' =>
            "Kendala akun atau transaksi harus disampaikan melalui halaman bantuan dengan informasi yang lengkap dan benar.\n\nProses pemeriksaan membutuhkan waktu yang wajar untuk memastikan data, kronologi, dan bukti transaksi dapat diverifikasi.",
        'icon' => '?',
        'open' => false,
    ],
    [
        'number' => '14',
        'title' => 'Perubahan Peraturan',
        'content' =>
            "Peraturan dapat diperbarui sewaktu-waktu untuk menyesuaikan keamanan, operasional, fitur, dan perkembangan layanan.\n\nVersi terbaru berlaku sejak dipublikasikan pada halaman ini.",
        'icon' => '§',
        'open' => false,
    ],
];

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

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

?>

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

.rules-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%
        );
}

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

    width: 200px;
    height: 200px;

    content: "";

    border-radius: 50%;

    filter: blur(40px);

    pointer-events: none;
}

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

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

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

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

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

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

    margin: 0 auto;
}

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

.rules-breadcrumb {
    display: flex;

    align-items: center;

    margin-bottom: 9px;

    gap: 5px;

    color: #758ba7;

    font-size: 7px;
}

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

    text-decoration: none;
}

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

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

.rules-heading {
    display: grid;

    justify-items: center;

    margin-bottom: 11px;

    text-align: center;
}

.rules-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);
}

.rules-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));
}

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

    margin: 6px 0 0;

    color: #96aac5;

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

.rules-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;
}

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

    border-radius: 50%;

    background: #50e39a;

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

/*
|--------------------------------------------------------------------------
| Intro
|--------------------------------------------------------------------------
*/

.rules-intro {
    position: relative;

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

    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);
}

.rules-intro::before {
    position: absolute;

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

    height: 1px;

    content: "";

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

.rules-intro-head {
    display: grid;

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

    align-items: center;

    gap: 11px;
}

.rules-intro-icon {
    display: grid;

    width: 48px;
    height: 48px;

    place-items: center;

    border:
        1px solid #ffd24d;

    border-radius: 14px;

    color: #2d1700;

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

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

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

.rules-intro h2 {
    margin: 0;

    color: #ffffff;

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

.rules-intro p {
    margin: 5px 0 0;

    color: #9fb2ca;

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

.rules-intro-note {
    display: grid;

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

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

    align-items: center;

    gap: 8px;

    border:
        1px solid rgba(255, 195, 42, 0.20);

    border-radius: 10px;

    background:
        rgba(56, 33, 3, 0.28);
}

.rules-intro-note > span {
    display: grid;

    width: 28px;
    height: 28px;

    place-items: center;

    border:
        1px solid rgba(255, 207, 72, 0.50);

    border-radius: 50%;

    color: #ffd34e;

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

.rules-intro-note strong {
    display: block;

    color: #ffffff;

    font-size: 8px;
}

.rules-intro-note small {
    display: block;

    margin-top: 2px;

    color: #a39782;

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

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

.rules-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)
        );
}

.rules-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;
}

.rules-stat strong {
    color: #ffd34e;

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

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

    color: #7e94b0;

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

/*
|--------------------------------------------------------------------------
| Section heading
|--------------------------------------------------------------------------
*/

.rules-section-heading {
    display: flex;

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

    margin:
        12px
        1px
        7px;
}

.rules-section-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 12px;
}

.rules-section-heading small {
    color: #758ba7;

    font-size: 7px;
}

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

.rules-list {
    display: grid;

    gap: 7px;
}

.rules-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);
}

.rules-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);
}

.rules-item summary {
    display: grid;

    min-height: 55px;

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

    align-items: center;

    padding: 8px 9px;

    gap: 8px;

    color: #ffffff;

    cursor: pointer;
    list-style: none;
}

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

.rules-item-icon {
    display: grid;

    width: 37px;
    height: 37px;

    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: 10px;
    font-weight: 1000;
}

.rules-item-copy {
    display: grid;

    min-width: 0;

    gap: 2px;
}

.rules-item-copy small {
    color: #61cbff;

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

    letter-spacing: 0.08em;
}

.rules-item-copy strong {
    color: #ffffff;

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

    line-height: 1.35;
}

.rules-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;
}

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

    transform: rotate(90deg);
}

.rules-item-content {
    padding:
        11px
        12px
        13px
        54px;

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

    color: #a9bad0;

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

    white-space: pre-line;
}

/*
|--------------------------------------------------------------------------
| Responsible use
|--------------------------------------------------------------------------
*/

.rules-responsible {
    display: grid;

    margin-top: 11px;
    padding: 11px;

    grid-template-columns:
        44px
        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)
        );
}

.rules-responsible-icon {
    display: grid;

    width: 44px;
    height: 44px;

    place-items: center;

    border:
        2px solid #62e7a2;

    border-radius: 50%;

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

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

.rules-responsible strong {
    display: block;

    color: #ffffff;

    font-size: 9px;
}

.rules-responsible p {
    margin: 4px 0 0;

    color: #9bc8b2;

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

/*
|--------------------------------------------------------------------------
| Action
|--------------------------------------------------------------------------
*/

.rules-actions {
    display: grid;

    margin-top: 12px;

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

    gap: 7px;
}

.rules-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);
}

.rules-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);
}

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

    color: #627894;

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

    text-align: center;
}

@media (max-width: 390px) {
    .rules-intro {
        padding: 13px;
    }

    .rules-item-content {
        padding-left: 51px;
    }
}

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

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

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

            <span>›</span>

            <strong>
                Peraturan
            </strong>
        </nav>

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

            <h1>
                PERATURAN
            </h1>

            <p>
                Pedoman penggunaan layanan, keamanan akun,
                transaksi, promo, event, dan perilaku pengguna.
            </p>

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

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

        <section class="rules-intro">

            <div class="rules-intro-head">

                <span class="rules-intro-icon">
                    §
                </span>

                <div>
                    <h2>
                        Baca sebelum menggunakan layanan
                    </h2>

                    <p>
                        Peraturan ini dibuat untuk menjaga keamanan,
                        keteraturan, dan kenyamanan seluruh pengguna.
                    </p>
                </div>

            </div>

            <div class="rules-intro-note">

                <span>
                    !
                </span>

                <div>
                    <strong>
                        Penggunaan layanan berarti menyetujui peraturan
                    </strong>

                    <small>
                        Pelanggaran dapat menyebabkan transaksi
                        diperiksa, bonus dibatalkan, atau akun dibatasi.
                    </small>
                </div>

            </div>

        </section>

        <section class="rules-stats">

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

                <small>
                    BAGIAN PERATURAN
                </small>
            </div>

            <div class="rules-stat">
                <strong>
                    18+
                </strong>

                <small>
                    BATAS USIA
                </small>
            </div>

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

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

        </section>

        <div class="rules-section-heading">
            <h2>
                Rincian Peraturan
            </h2>

            <small>
                Tekan untuk membuka
            </small>
        </div>

        <section class="rules-list">

            <?php foreach ($rules as $rule): ?>

                <details
                    class="rules-item"
                    <?= $rule['open'] ? 'open' : ''; ?>
                >
                    <summary>

                        <span class="rules-item-icon">
                            <?= e($rule['icon']); ?>
                        </span>

                        <span class="rules-item-copy">

                            <small>
                                PERATURAN <?= e($rule['number']); ?>
                            </small>

                            <strong>
                                <?= e($rule['title']); ?>
                            </strong>

                        </span>

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

                    </summary>

                    <div class="rules-item-content"><?= e(
                        $rule['content']
                    ); ?></div>

                </details>

            <?php endforeach; ?>

        </section>

        <section class="rules-responsible">

            <span class="rules-responsible-icon">
                18+
            </span>

            <div>
                <strong>
                    Gunakan layanan secara bertanggung jawab
                </strong>

                <p>
                    Tetapkan batas waktu dan anggaran pribadi.
                    Jangan menggunakan dana kebutuhan utama atau
                    dana pinjaman.
                </p>
            </div>

        </section>

        <div class="rules-actions">

            <a
                class="rules-button"
                href="terms.php"
            >
                SYARAT & KETENTUAN
            </a>

            <a
                class="rules-button rules-button--gold"
                href="faq.php"
            >
                BUKA FAQ
            </a>

        </div>

        <p class="rules-footer-note">
            Peraturan dapat diperbarui sewaktu-waktu.
            Versi terbaru selalu ditampilkan pada halaman ini.
        </p>

    </div>
</section>

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