<?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 = 'Tentang Kami';
$activeMenu = 'tentang-kami';

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

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

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

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

?>

<style>
/*
|--------------------------------------------------------------------------
| Halaman tentang kami
|--------------------------------------------------------------------------
*/

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

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

    width: 200px;
    height: 200px;

    content: "";

    border-radius: 50%;

    filter: blur(40px);

    pointer-events: none;
}

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

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

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

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

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

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

    margin: 0 auto;
}

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

.about-breadcrumb {
    display: flex;

    align-items: center;

    margin-bottom: 9px;

    gap: 5px;

    color: #758ba7;

    font-size: 7px;
}

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

    text-decoration: none;
}

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

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

.about-heading {
    display: grid;

    justify-items: center;

    margin-bottom: 11px;

    text-align: center;
}

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

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

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

    margin: 6px 0 0;

    color: #96aac5;

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

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

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

    border-radius: 50%;

    background: #50e39a;

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

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

.about-hero {
    position: relative;

    margin-bottom: 10px;

    overflow: hidden;

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

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(255, 191, 32, 0.16),
            transparent 145px
        ),
        radial-gradient(
            circle at 5% 95%,
            rgba(0, 157, 255, 0.16),
            transparent 160px
        ),
        linear-gradient(
            145deg,
            #0a2b5d 0%,
            #061935 48%,
            #020c1f 100%
        );

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

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

.about-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    min-height: 210px;

    align-content: center;

    padding: 20px 18px;

    text-align: center;
}

.about-hero-icon {
    display: grid;

    width: 58px;
    height: 58px;

    place-items: center;

    margin: 0 auto 10px;

    border:
        2px solid #ffd24d;

    border-radius: 18px;

    color: #2d1700;

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

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

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        0 0 15px rgba(255, 183, 18, 0.32),
        0 7px 15px rgba(0, 0, 0, 0.35);
}

.about-hero h2 {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.15;
}

.about-hero p {
    max-width: 440px;

    margin: 8px auto 0;

    color: #b3c4d8;

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

.about-hero-badges {
    display: flex;

    flex-wrap: wrap;
    justify-content: center;

    margin-top: 12px;

    gap: 6px;
}

.about-hero-badges span {
    display: inline-flex;

    min-height: 25px;

    align-items: center;

    padding: 0 9px;

    border:
        1px solid rgba(0, 168, 255, 0.27);

    border-radius: 999px;

    color: #a9ddff;

    background:
        rgba(3, 34, 71, 0.72);

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

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

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

.about-stat {
    display: grid;

    min-height: 54px;

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

.about-stat strong {
    color: #ffd34e;

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

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

    color: #7e94b0;

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

/*
|--------------------------------------------------------------------------
| Section title
|--------------------------------------------------------------------------
*/

.about-section-heading {
    display: flex;

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

    margin:
        12px
        1px
        7px;
}

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

    color: #ffffff;

    font-size: 12px;
}

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

    font-size: 7px;
}

/*
|--------------------------------------------------------------------------
| Card grid
|--------------------------------------------------------------------------
*/

.about-card-grid {
    display: grid;

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

    gap: 8px;
}

.about-card {
    position: relative;

    min-width: 0;

    padding: 12px;

    overflow: hidden;

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

    border-radius: 12px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(0, 145, 255, 0.10),
            transparent 95px
        ),
        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);
}

.about-card::before {
    position: absolute;

    top: 0;
    right: 12px;
    left: 12px;

    height: 1px;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(74, 186, 255, 0.48),
            transparent
        );
}

.about-card-icon {
    display: grid;

    width: 37px;
    height: 37px;

    place-items: center;

    margin-bottom: 8px;

    border:
        1px solid rgba(255, 207, 73, 0.44);

    border-radius: 11px;

    color: #ffd34e;

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

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

.about-card h3 {
    margin: 0;

    color: #ffffff;

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

.about-card p {
    margin: 6px 0 0;

    color: #97aac1;

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

/*
|--------------------------------------------------------------------------
| Komitmen
|--------------------------------------------------------------------------
*/

.about-commitment {
    display: grid;

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

    gap: 7px;

    border:
        1px solid rgba(255, 193, 42, 0.26);

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(255, 186, 20, 0.11),
            transparent 120px
        ),
        linear-gradient(
            90deg,
            rgba(92, 51, 3, 0.28),
            rgba(4, 22, 48, 0.93)
        );
}

.about-commitment-head {
    display: flex;

    align-items: center;

    gap: 8px;
}

.about-commitment-icon {
    display: grid;

    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    place-items: center;

    border:
        1px solid #ffd04b;

    border-radius: 50%;

    color: #ffd04b;

    background: #281700;

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

.about-commitment h3 {
    margin: 0;

    color: #ffffff;

    font-size: 11px;
}

.about-commitment p {
    margin: 0;

    color: #a3b5ca;

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

/*
|--------------------------------------------------------------------------
| Daftar prinsip
|--------------------------------------------------------------------------
*/

.about-principles {
    display: grid;

    margin-top: 10px;

    gap: 7px;
}

.about-principle {
    display: grid;

    min-height: 58px;

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

    align-items: center;

    padding: 9px 10px;

    gap: 9px;

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

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 33, 69, 0.94),
            rgba(2, 14, 32, 0.98)
        );
}

.about-principle > span {
    display: grid;

    width: 34px;
    height: 34px;

    place-items: center;

    border:
        1px solid rgba(255, 204, 65, 0.42);

    border-radius: 10px;

    color: #ffd24b;

    background:
        rgba(255, 194, 31, 0.08);

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

.about-principle strong {
    display: block;

    color: #ffffff;

    font-size: 9px;
}

.about-principle small {
    display: block;

    margin-top: 3px;

    color: #8fa3bc;

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

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

.about-responsible {
    display: grid;

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

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

.about-responsible-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: 11px;
    font-weight: 1000;
}

.about-responsible strong {
    display: block;

    color: #ffffff;

    font-size: 9px;
}

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

    color: #9bc8b2;

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

/*
|--------------------------------------------------------------------------
| Tombol
|--------------------------------------------------------------------------
*/

.about-actions {
    display: grid;

    margin-top: 12px;

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

    gap: 7px;
}

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

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

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

    color: #627894;

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

    text-align: center;
}

@media (max-width: 390px) {
    .about-hero-inner {
        min-height: 195px;

        padding:
            17px
            13px;
    }

    .about-card {
        padding: 10px;
    }
}

@media (max-width: 340px) {
    .about-card-grid,
    .about-actions {
        grid-template-columns: 1fr;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }
}
</style>

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

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

            <span>›</span>

            <strong>
                Tentang Kami
            </strong>
        </nav>

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

            <h1>
                TENTANG KAMI
            </h1>

            <p>
                Platform hiburan digital yang mengutamakan
                kenyamanan, kecepatan, keamanan, dan pengalaman
                pengguna yang konsisten.
            </p>

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

                <?php if ($isLoggedIn): ?>
                    Dibuka sebagai <?= e($username); ?>
                <?php else: ?>
                    Informasi terbuka untuk semua pengunjung
                <?php endif; ?>
            </span>
        </header>

        <section class="about-hero">
            <div class="about-hero-inner">

                <span class="about-hero-icon">
                    ◆
                </span>

                <h2>
                    Pengalaman Digital yang Sederhana dan Terpercaya
                </h2>

                <p>
                    Kami menghadirkan layanan yang dirancang agar
                    mudah digunakan melalui perangkat mobile maupun
                    desktop. Setiap bagian dikembangkan dengan fokus
                    pada kejelasan, stabilitas, dan kenyamanan pengguna.
                </p>

                <div class="about-hero-badges">
                    <span>Mobile Friendly</span>
                    <span>Sistem Responsif</span>
                    <span>Layanan Terintegrasi</span>
                </div>

            </div>
        </section>

        <section class="about-stats">

            <div class="about-stat">
                <strong>24/7</strong>
                <small>AKSES LAYANAN</small>
            </div>

            <div class="about-stat">
                <strong>FAST</strong>
                <small>RESPONS SISTEM</small>
            </div>

            <div class="about-stat">
                <strong>SECURE</strong>
                <small>PERLINDUNGAN DATA</small>
            </div>

        </section>

        <div class="about-section-heading">
            <h2>
                Fokus Utama Kami
            </h2>

            <small>
                Dibangun untuk pengguna
            </small>
        </div>

        <section class="about-card-grid">

            <article class="about-card">
                <span class="about-card-icon">
                    ⚡
                </span>

                <h3>
                    Akses Cepat
                </h3>

                <p>
                    Struktur halaman dibuat ringan dan responsif
                    agar dapat digunakan dengan nyaman pada
                    berbagai ukuran perangkat.
                </p>
            </article>

            <article class="about-card">
                <span class="about-card-icon">
                    ✓
                </span>

                <h3>
                    Sistem Stabil
                </h3>

                <p>
                    Setiap fitur dirancang untuk bekerja secara
                    konsisten dengan alur yang jelas dan mudah
                    dipahami oleh pengguna.
                </p>
            </article>

            <article class="about-card">
                <span class="about-card-icon">
                    ◆
                </span>

                <h3>
                    Pengalaman Terarah
                </h3>

                <p>
                    Navigasi, kategori, promo, event, dan informasi
                    akun disusun agar mudah ditemukan tanpa
                    proses yang membingungkan.
                </p>
            </article>

            <article class="about-card">
                <span class="about-card-icon">
                    24
                </span>

                <h3>
                    Dukungan Berkelanjutan
                </h3>

                <p>
                    Informasi dan bantuan disediakan untuk membantu
                    pengguna memahami layanan serta menyelesaikan
                    kendala yang mungkin terjadi.
                </p>
            </article>

        </section>

        <section class="about-commitment">

            <div class="about-commitment-head">

                <span class="about-commitment-icon">
                    ♛
                </span>

                <h3>
                    Komitmen Kami
                </h3>

            </div>

            <p>
                Kami berkomitmen menjaga kualitas layanan melalui
                pengembangan berkelanjutan, peningkatan keamanan,
                evaluasi sistem, dan penyajian informasi yang lebih
                mudah dipahami.
            </p>

        </section>

        <div class="about-section-heading">
            <h2>
                Prinsip Layanan
            </h2>

            <small>
                Dasar setiap pengembangan
            </small>
        </div>

        <section class="about-principles">

            <article class="about-principle">
                <span>01</span>

                <div>
                    <strong>
                        Transparansi Informasi
                    </strong>

                    <small>
                        Ketentuan, promo, event, serta informasi
                        layanan disampaikan melalui halaman yang
                        mudah diakses.
                    </small>
                </div>
            </article>

            <article class="about-principle">
                <span>02</span>

                <div>
                    <strong>
                        Perlindungan Akun
                    </strong>

                    <small>
                        Pengguna dianjurkan menjaga kerahasiaan
                        password, data pribadi, dan informasi
                        verifikasi akun.
                    </small>
                </div>
            </article>

            <article class="about-principle">
                <span>03</span>

                <div>
                    <strong>
                        Pengembangan Berkelanjutan
                    </strong>

                    <small>
                        Sistem dapat diperbarui secara berkala untuk
                        meningkatkan fungsi, keamanan, stabilitas,
                        dan pengalaman pengguna.
                    </small>
                </div>
            </article>

            <article class="about-principle">
                <span>04</span>

                <div>
                    <strong>
                        Penggunaan Bertanggung Jawab
                    </strong>

                    <small>
                        Layanan ditujukan untuk pengguna yang telah
                        memenuhi batas usia serta memahami risiko
                        penggunaan layanan hiburan.
                    </small>
                </div>
            </article>

        </section>

        <section class="about-responsible">

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

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

                <p>
                    Tetapkan batas waktu dan anggaran pribadi.
                    Jangan menggunakan dana kebutuhan utama dan
                    berhentilah apabila penggunaan mulai mengganggu
                    kehidupan sehari-hari.
                </p>
            </div>

        </section>

        <div class="about-actions">

            <a
                class="about-button"
                href="help.php"
            >
                PUSAT BANTUAN
            </a>

            <?php if ($isLoggedIn): ?>

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

            <?php else: ?>

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

            <?php endif; ?>

        </div>

        <p class="about-footer-note">
            Informasi pada halaman ini bersifat umum dan dapat
            diperbarui mengikuti perkembangan layanan.
        </p>

    </div>
</section>

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