<?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 = 'Pusat Bantuan';
$activeMenu = 'bantuan';

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

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

/*
|--------------------------------------------------------------------------
| Koneksi database PDO
|--------------------------------------------------------------------------
*/

$databaseFile = __DIR__ . '/config/database.php';

if (!isset($pdo) || !($pdo instanceof PDO)) {
    if (!is_file($databaseFile)) {
        http_response_code(500);

        exit(
            'File koneksi database tidak ditemukan: ' .
            e($databaseFile)
        );
    }

    require_once $databaseFile;
}

if (!isset($pdo) || !($pdo instanceof PDO)) {
    http_response_code(500);

    exit(
        'Koneksi PDO $pdo tidak tersedia dari config/database.php.'
    );
}

$pdo->setAttribute(
    PDO::ATTR_ERRMODE,
    PDO::ERRMODE_EXCEPTION
);

$pdo->setAttribute(
    PDO::ATTR_DEFAULT_FETCH_MODE,
    PDO::FETCH_ASSOC
);

/*
|--------------------------------------------------------------------------
| Helper
|--------------------------------------------------------------------------
*/

function bantuanSafeUrl($value)
{
    $value = trim((string) $value);

    if ($value === '') {
        return '#';
    }

    if (
        preg_match('/^https?:\/\//i', $value) ||
        preg_match('/^(mailto:|tel:)/i', $value)
    ) {
        return $value;
    }

    if (
        strpos($value, '//') === 0 ||
        preg_match('/[\r\n]/', $value)
    ) {
        return '#';
    }

    return ltrim($value, '/');
}

function bantuanIconClass($platform)
{
    $platform = strtolower(
        trim((string) $platform)
    );

    $allowed = [
        'livechat',
        'whatsapp',
        'telegram',
        'facebook',
        'instagram',
        'x',
        'youtube',
        'tiktok',
        'email',
    ];

    if (!in_array($platform, $allowed, true)) {
        return 'other';
    }

    return $platform;
}

/*
|--------------------------------------------------------------------------
| Default setting
|--------------------------------------------------------------------------
*/

$helpSettings = [
    'page_title' => 'Pusat Bantuan',
    'page_subtitle' =>
        'Hubungi layanan bantuan melalui kanal resmi yang tersedia.',
    'support_hours' => '24 Jam Setiap Hari',
    'response_time' => 'Respon secepat mungkin',
    'security_notice' =>
        'Jangan pernah memberikan password, kode OTP, atau akses akun kepada siapa pun.',
    'livechat_license_id' => '19769922',
    'livechat_url_override' => '',
];

$socialContacts = [];
$helpGuides = [];
$pageError = '';

/*
|--------------------------------------------------------------------------
| Ambil setting bantuan
|--------------------------------------------------------------------------
*/

try {
    $settingStatement = $pdo->query(
        'SELECT
            setting_key,
            setting_value
         FROM help_settings
         WHERE is_active = 1'
    );

    foreach ($settingStatement->fetchAll() as $settingRow) {
        $settingKey = trim(
            (string) (
                $settingRow['setting_key'] ??
                ''
            )
        );

        if (
            $settingKey !== '' &&
            array_key_exists(
                $settingKey,
                $helpSettings
            )
        ) {
            $helpSettings[$settingKey] =
                trim(
                    (string) (
                        $settingRow['setting_value'] ??
                        ''
                    )
                );
        }
    }
} catch (Throwable $exception) {
    $pageError =
        'Sebagian pengaturan bantuan belum dapat dimuat.';

    error_log(
        'HELP SETTINGS ERROR: ' .
        $exception->getMessage()
    );
}

/*
|--------------------------------------------------------------------------
| Susun URL LiveChat
|--------------------------------------------------------------------------
*/

$liveChatLicenseId = preg_replace(
    '/[^0-9]/',
    '',
    (string) $helpSettings['livechat_license_id']
);

if ($liveChatLicenseId === '') {
    $liveChatLicenseId = '19769922';
}

$liveChatUrl = trim(
    (string) $helpSettings['livechat_url_override']
);

if ($liveChatUrl === '') {
    $liveChatUrl =
        'https://direct.lc.chat/' .
        $liveChatLicenseId .
        '/';
}

$liveChatUrl = bantuanSafeUrl(
    $liveChatUrl
);

/*
|--------------------------------------------------------------------------
| Ambil sosial media
|--------------------------------------------------------------------------
*/

try {
    $socialStatement = $pdo->query(
        'SELECT
            id,
            platform,
            display_name,
            username,
            profile_url,
            description,
            icon_text,
            button_label,
            is_primary,
            sort_order
         FROM help_social_contacts
         WHERE is_active = 1
         ORDER BY
            is_primary DESC,
            sort_order ASC,
            id ASC'
    );

    $socialContacts =
        $socialStatement->fetchAll();
} catch (Throwable $exception) {
    if ($pageError === '') {
        $pageError =
            'Daftar sosial media belum dapat dimuat.';
    }

    error_log(
        'HELP SOCIAL ERROR: ' .
        $exception->getMessage()
    );
}

/*
|--------------------------------------------------------------------------
| Ambil panduan menghubungi bantuan
|--------------------------------------------------------------------------
*/

try {
    $guideStatement = $pdo->query(
        'SELECT
            id,
            step_number,
            title,
            description,
            icon_text,
            sort_order
         FROM help_contact_guides
         WHERE is_active = 1
         ORDER BY
            sort_order ASC,
            id ASC'
    );

    $helpGuides =
        $guideStatement->fetchAll();
} catch (Throwable $exception) {
    error_log(
        'HELP GUIDE ERROR: ' .
        $exception->getMessage()
    );
}

/*
|--------------------------------------------------------------------------
| Fallback data sosial
|--------------------------------------------------------------------------
*/

if (empty($socialContacts)) {
    $socialContacts = [
        [
            'id' => 0,
            'platform' => 'whatsapp',
            'display_name' => 'WhatsApp',
            'username' => 'Nomor belum diatur',
            'profile_url' => '#',
            'description' =>
                'Hubungi bantuan melalui WhatsApp resmi.',
            'icon_text' => 'WA',
            'button_label' => 'BUKA WHATSAPP',
            'is_primary' => 0,
        ],
        [
            'id' => 0,
            'platform' => 'telegram',
            'display_name' => 'Telegram',
            'username' => 'Username belum diatur',
            'profile_url' => '#',
            'description' =>
                'Kirim pesan melalui akun Telegram resmi.',
            'icon_text' => 'TG',
            'button_label' => 'BUKA TELEGRAM',
            'is_primary' => 0,
        ],
        [
            'id' => 0,
            'platform' => 'instagram',
            'display_name' => 'Instagram',
            'username' => 'Akun belum diatur',
            'profile_url' => '#',
            'description' =>
                'Lihat pembaruan informasi melalui Instagram.',
            'icon_text' => 'IG',
            'button_label' => 'BUKA INSTAGRAM',
            'is_primary' => 0,
        ],
    ];
}

/*
|--------------------------------------------------------------------------
| Fallback panduan
|--------------------------------------------------------------------------
*/

if (empty($helpGuides)) {
    $helpGuides = [
        [
            'step_number' => 1,
            'title' => 'Pilih kanal resmi',
            'description' =>
                'Gunakan Live Chat atau sosial media resmi yang ditampilkan pada halaman ini.',
            'icon_text' => '1',
        ],
        [
            'step_number' => 2,
            'title' => 'Jelaskan kendala',
            'description' =>
                'Sertakan username, jenis kendala, waktu kejadian, dan informasi transaksi yang relevan.',
            'icon_text' => '2',
        ],
        [
            'step_number' => 3,
            'title' => 'Tunggu proses pemeriksaan',
            'description' =>
                'Tim bantuan akan memeriksa informasi dan memberikan arahan penyelesaian.',
            'icon_text' => '3',
        ],
    ];
}

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

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

?>

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

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

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

    width: 200px;
    height: 200px;

    content: "";

    border-radius: 50%;

    filter: blur(40px);

    pointer-events: none;
}

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

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

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

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

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

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

    margin: 0 auto;
}

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

.help-breadcrumb {
    display: flex;

    align-items: center;

    margin-bottom: 9px;

    gap: 5px;

    color: #758ba7;

    font-size: 7px;
}

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

    text-decoration: none;
}

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

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

.help-heading {
    display: grid;

    justify-items: center;

    margin-bottom: 11px;

    text-align: center;
}

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

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

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

    margin: 6px 0 0;

    color: #96aac5;

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

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

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

    border-radius: 50%;

    background: #50e39a;

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

/*
|--------------------------------------------------------------------------
| Error
|--------------------------------------------------------------------------
*/

.help-error {
    margin-bottom: 10px;
    padding: 9px 10px;

    border:
        1px solid rgba(255, 77, 77, 0.38);

    border-radius: 10px;

    color: #ffd6d6;
    background:
        rgba(102, 12, 17, 0.48);

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

/*
|--------------------------------------------------------------------------
| Live chat hero
|--------------------------------------------------------------------------
*/

.help-livechat {
    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.17),
            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);
}

.help-livechat::before {
    position: absolute;

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

    height: 1px;

    content: "";

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

.help-livechat-main {
    display: grid;

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

    align-items: center;

    gap: 12px;
}

.help-livechat-icon {
    display: grid;

    width: 58px;
    height: 58px;

    place-items: center;

    border:
        2px solid #58eba2;

    border-radius: 18px;

    color: #e2fff0;

    background:
        linear-gradient(
            145deg,
            #0c764c,
            #043c28
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 0 14px rgba(74, 232, 154, 0.26);
}

.help-livechat-copy small {
    display: block;

    color: #55eaa0;

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

    letter-spacing: 0.08em;
}

.help-livechat-copy h2 {
    margin: 3px 0 0;

    color: #ffffff;

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

.help-livechat-copy p {
    margin: 5px 0 0;

    color: #a9bdd4;

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

.help-livechat-meta {
    display: grid;

    margin-top: 12px;

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

    gap: 6px;
}

.help-livechat-meta div {
    display: grid;

    min-height: 42px;

    align-content: center;

    padding: 7px;

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

    border-radius: 9px;

    background:
        rgba(3, 27, 60, 0.62);

    text-align: center;
}

.help-livechat-meta small {
    color: #7188a5;

    font-size: 6px;
}

.help-livechat-meta strong {
    margin-top: 2px;

    color: #ffffff;

    font-size: 7px;
}

.help-livechat-button {
    display: flex;

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

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

    margin-top: 11px;

    border:
        1px solid #8ff3bd;

    border-radius: 10px;

    color: #032415;

    background:
        linear-gradient(
            180deg,
            #86f4b8,
            #48df91 55%,
            #13965a
        );

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

    text-decoration: none;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.50),
        0 4px 0 #075b35,
        0 0 10px rgba(71, 226, 147, 0.26);
}

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

.help-section-heading {
    display: flex;

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

    margin:
        12px
        1px
        7px;
}

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

    color: #ffffff;

    font-size: 12px;
}

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

    font-size: 7px;
}

/*
|--------------------------------------------------------------------------
| Social cards
|--------------------------------------------------------------------------
*/

.help-social-grid {
    display: grid;

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

    gap: 8px;
}

.help-social-card {
    position: relative;

    display: grid;

    min-width: 0;

    padding: 11px;

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

.help-social-card.is-primary {
    border-color:
        rgba(255, 199, 48, 0.42);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 4px 11px rgba(0, 0, 0, 0.23),
        0 0 9px rgba(255, 185, 23, 0.08);
}

.help-social-head {
    display: grid;

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

    align-items: center;

    gap: 8px;
}

.help-social-icon {
    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;

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

    border-radius: 11px;

    color: #ffd24c;

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

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

.help-social-icon.is-whatsapp {
    border-color:
        rgba(78, 231, 151, 0.45);

    color: #66edab;

    background:
        rgba(8, 80, 50, 0.36);
}

.help-social-icon.is-telegram {
    border-color:
        rgba(70, 188, 255, 0.45);

    color: #75d1ff;
}

.help-social-icon.is-instagram {
    border-color:
        rgba(240, 99, 178, 0.40);

    color: #ff91cd;
}

.help-social-icon.is-facebook {
    border-color:
        rgba(87, 140, 255, 0.42);

    color: #8db6ff;
}

.help-social-icon.is-x {
    color: #ffffff;
}

.help-social-icon.is-youtube {
    border-color:
        rgba(255, 82, 82, 0.42);

    color: #ff7a7a;
}

.help-social-icon.is-tiktok {
    border-color:
        rgba(82, 227, 222, 0.42);

    color: #73f0e7;
}

.help-social-icon.is-email {
    border-color:
        rgba(255, 205, 72, 0.42);

    color: #ffd45c;
}

.help-social-name {
    min-width: 0;
}

.help-social-name strong {
    display: block;

    overflow: hidden;

    color: #ffffff;

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

    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-social-name small {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: #61cbff;

    font-size: 6px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-social-card p {
    min-height: 32px;

    margin: 8px 0 0;

    color: #91a5bf;

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

.help-social-button {
    display: flex;

    min-height: 31px;

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

    margin-top: 8px;

    border:
        1px solid rgba(255, 205, 70, 0.48);

    border-radius: 7px;

    color: #271400;

    background:
        linear-gradient(
            180deg,
            #ffe37e,
            #f3aa14
        );

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

    text-decoration: none;
}

.help-social-button.is-disabled {
    border-color:
        rgba(143, 155, 173, 0.25);

    color: #7e8999;
    background:
        rgba(47, 56, 69, 0.75);

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Panduan
|--------------------------------------------------------------------------
*/

.help-guide-list {
    display: grid;

    gap: 7px;
}

.help-guide-item {
    display: grid;

    min-height: 64px;

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

    align-items: center;

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

.help-guide-number {
    display: grid;

    width: 39px;
    height: 39px;

    place-items: center;

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

    border-radius: 11px;

    color: #ffd24b;

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

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

.help-guide-item strong {
    display: block;

    color: #ffffff;

    font-size: 9px;
}

.help-guide-item p {
    margin: 4px 0 0;

    color: #8fa3bc;

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

/*
|--------------------------------------------------------------------------
| Security notice
|--------------------------------------------------------------------------
*/

.help-security {
    display: grid;

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

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

    align-items: center;

    gap: 10px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(88, 49, 5, 0.40),
            rgba(39, 23, 4, 0.55)
        );
}

.help-security-icon {
    display: grid;

    width: 44px;
    height: 44px;

    place-items: center;

    border:
        2px solid #ffd34e;

    border-radius: 50%;

    color: #ffd34e;
    background:
        rgba(45, 25, 2, 0.90);

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

.help-security strong {
    display: block;

    color: #ffffff;

    font-size: 9px;
}

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

    color: #c0aa84;

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

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

.help-actions {
    display: grid;

    margin-top: 12px;

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

    gap: 7px;
}

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

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

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

    color: #627894;

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

    text-align: center;
}

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

    .help-social-card {
        padding: 9px;
    }
}

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

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

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

            <span>›</span>

            <strong>
                Bantuan
            </strong>
        </nav>

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

            <h1>
                <?= e($helpSettings['page_title']); ?>
            </h1>

            <p>
                <?= e($helpSettings['page_subtitle']); ?>
            </p>

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

                <?php if ($isLoggedIn): ?>
                    Halo <?= e($username); ?>, bantuan siap digunakan
                <?php else: ?>
                    Bantuan tersedia tanpa login
                <?php endif; ?>
            </span>
        </header>

        <?php if ($pageError !== ''): ?>

            <div class="help-error">
                <?= e($pageError); ?>
            </div>

        <?php endif; ?>

        <section class="help-livechat">

            <div class="help-livechat-main">

                <span class="help-livechat-icon">
                    CHAT
                </span>

                <div class="help-livechat-copy">

                    <small>
                        KANAL UTAMA
                    </small>

                    <h2>
                        Live Chat
                    </h2>

                    <p>
                        Hubungi layanan bantuan secara langsung
                        melalui LiveChat resmi.
                    </p>

                </div>

            </div>

            <div class="help-livechat-meta">

                <div>
                    <small>
                        Jam layanan
                    </small>

                    <strong>
                        <?= e($helpSettings['support_hours']); ?>
                    </strong>
                </div>

                <div>
                    <small>
                        Estimasi respons
                    </small>

                    <strong>
                        <?= e($helpSettings['response_time']); ?>
                    </strong>
                </div>

            </div>

            <a
                class="help-livechat-button"
                href="<?= e($liveChatUrl); ?>"
                target="_blank"
                rel="noopener noreferrer"
            >
                MULAI LIVE CHAT
            </a>

        </section>

        <div class="help-section-heading">
            <h2>
                Sosial Media Resmi
            </h2>

            <small>
                <?= count($socialContacts); ?> kanal tersedia
            </small>
        </div>

        <section class="help-social-grid">

            <?php foreach ($socialContacts as $contact): ?>

                <?php
                $platformClass = bantuanIconClass(
                    $contact['platform'] ?? ''
                );

                $profileUrl = bantuanSafeUrl(
                    $contact['profile_url'] ?? ''
                );

                $isDisabled =
                    $profileUrl === '#';
                ?>

                <article
                    class="help-social-card <?= !empty($contact['is_primary'])
                        ? 'is-primary'
                        : ''; ?>"
                >

                    <div class="help-social-head">

                        <span
                            class="help-social-icon is-<?= e($platformClass); ?>"
                        >
                            <?= e(
                                $contact['icon_text'] ??
                                strtoupper(
                                    substr(
                                        (string) (
                                            $contact['platform'] ??
                                            'SM'
                                        ),
                                        0,
                                        2
                                    )
                                )
                            ); ?>
                        </span>

                        <div class="help-social-name">

                            <strong>
                                <?= e(
                                    $contact['display_name'] ??
                                    'Sosial Media'
                                ); ?>
                            </strong>

                            <small>
                                <?= e(
                                    $contact['username'] ??
                                    ''
                                ); ?>
                            </small>

                        </div>

                    </div>

                    <p>
                        <?= e(
                            $contact['description'] ??
                            'Hubungi melalui kanal resmi.'
                        ); ?>
                    </p>

                    <a
                        class="help-social-button <?= $isDisabled
                            ? 'is-disabled'
                            : ''; ?>"
                        href="<?= e($profileUrl); ?>"
                        <?= !$isDisabled
                            ? 'target="_blank" rel="noopener noreferrer"'
                            : ''; ?>
                    >
                        <?= e(
                            $contact['button_label'] ??
                            'BUKA'
                        ); ?>
                    </a>

                </article>

            <?php endforeach; ?>

        </section>

        <div class="help-section-heading">
            <h2>
                Cara Menghubungi Kami
            </h2>

            <small>
                Ikuti langkah berikut
            </small>
        </div>

        <section class="help-guide-list">

            <?php foreach ($helpGuides as $guide): ?>

                <article class="help-guide-item">

                    <span class="help-guide-number">
                        <?= e(
                            $guide['icon_text'] ??
                            $guide['step_number'] ??
                            '•'
                        ); ?>
                    </span>

                    <div>

                        <strong>
                            <?= e(
                                $guide['title'] ??
                                'Langkah Bantuan'
                            ); ?>
                        </strong>

                        <p>
                            <?= e(
                                $guide['description'] ??
                                ''
                            ); ?>
                        </p>

                    </div>

                </article>

            <?php endforeach; ?>

        </section>

        <section class="help-security">

            <span class="help-security-icon">
                !
            </span>

            <div>
                <strong>
                    Lindungi akun Anda
                </strong>

                <p>
                    <?= e($helpSettings['security_notice']); ?>
                </p>
            </div>

        </section>

        <div class="help-actions">

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

            <a
                class="help-button help-button--gold"
                href="<?= e($liveChatUrl); ?>"
                target="_blank"
                rel="noopener noreferrer"
            >
                HUBUNGI LIVE CHAT
            </a>

        </div>

        <p class="help-footer-note">
            Pastikan Anda hanya menghubungi kanal resmi yang
            tercantum pada halaman ini.
        </p>

    </div>
</section>

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