<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
include ('header.php');
$page_title = $site_data['web_name'] . " | Dashboard";

// ── Re-fetch user with pocketfi columns
try {
    $dash_stmt = $pdo->prepare(
        "SELECT pocketfi_account_number, pocketfi_account_name, pocketfi_bank_name
         FROM users WHERE id = :uid LIMIT 1"
    );
    $dash_stmt->execute(['uid' => $_SESSION['user_id']]);
    $pocketfi_row = $dash_stmt->fetch(PDO::FETCH_ASSOC);
    if ($pocketfi_row) {
        $user['pocketfi_account_number'] = $pocketfi_row['pocketfi_account_number'];
        $user['pocketfi_account_name']   = $pocketfi_row['pocketfi_account_name'];
        $user['pocketfi_bank_name']      = $pocketfi_row['pocketfi_bank_name'];
    }
} catch (PDOException $e) {
    error_log('[dashboard] Failed to fetch pocketfi columns: ' . $e->getMessage());
}

$pocketfi_enabled  = intval($site_data['pocketfi_enabled'] ?? 0);
$va_account_number = $user['pocketfi_account_number'] ?? '';
$va_account_name   = $user['pocketfi_account_name']   ?? '';
$va_bank_name      = $user['pocketfi_bank_name']       ?? ($site_data['pocketfi_bank_name'] ?? 'Pocketfi Bank');

$pf_fee_type  = trim($site_data['pocketfi_fee_type']  ?? 'none');
$pf_fee_value = floatval($site_data['pocketfi_fee_value'] ?? 0);
$pf_fee_max   = floatval($site_data['pocketfi_fee_max']   ?? 0);

if ($pf_fee_type === 'flat' && $pf_fee_value > 0) {
    $fee_notice = '₦' . number_format($pf_fee_value, 2) . ' flat fee applies';
} elseif ($pf_fee_type === 'percent' && $pf_fee_value > 0) {
    $fee_notice = $pf_fee_value . '% fee applies';
    if ($pf_fee_max > 0) $fee_notice .= ' (max ₦' . number_format($pf_fee_max, 2) . ')';
} else {
    $fee_notice = '';
}
?>
<title><?php echo $page_title; ?></title>

<!-- ── Balance Card ──────────────────────────────────────────────── -->
<section class="mb-6">
    <div class="relative overflow-hidden rounded-[28px] border border-white/70 bg-gradient-to-br from-[#4D148C] via-[#5b21b6] to-[#2563eb] p-6 text-white shadow-[0_24px_70px_-20px_rgba(77,20,140,0.45)]">
        <div class="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/10"></div>
        <div class="absolute -bottom-8 -left-6 h-32 w-32 rounded-full bg-cyan-300/20"></div>
        <div class="absolute right-5 top-5 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-white/80 backdrop-blur-sm">Live now</div>
        <div class="relative z-10">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm font-medium text-white/80">Welcome back</p>
                    <h3 class="mt-1 text-lg font-semibold text-white"><?php echo htmlspecialchars($user['full_name'] ?: $user['username']); ?></h3>
                </div>
                <button onclick="toggleBalance()" class="rounded-full border border-white/20 bg-white/10 p-2.5 text-white/90 transition hover:bg-white/20" id="eyeBtn">
                    <i class="fa-solid fa-eye" id="eyeIcon"></i>
                </button>
            </div>

            <div class="mb-4 rounded-2xl border border-white/15 bg-white/10 p-4 backdrop-blur-md">
                <div class="mb-2 flex items-center justify-between">
                    <p class="text-sm text-white/80">Total balance</p>
                    <span class="rounded-full bg-emerald-400/20 px-2.5 py-1 text-[10px] font-semibold text-emerald-100">Available</span>
                </div>
                <h2 class="text-3xl font-bold" id="balVisible">₦<?php echo number_format($user['main_balance'], 2); ?></h2>
                <h2 class="hidden text-3xl font-bold" id="balHidden">••••••</h2>
            </div>

            <div class="mb-4 flex flex-wrap gap-2">
                <span class="rounded-full border border-white/20 bg-white/10 px-3 py-1 text-[11px] font-medium text-white/85">⚡ Fast top-up</span>
                <span class="rounded-full border border-white/20 bg-white/10 px-3 py-1 text-[11px] font-medium text-white/85">🔒 Secure wallet</span>
                <span class="rounded-full border border-white/20 bg-white/10 px-3 py-1 text-[11px] font-medium text-white/85">📦 Instant orders</span>
            </div>

            <div class="flex flex-col gap-3 sm:flex-row">
                <a href="fund-wallet" class="flex-1 rounded-2xl bg-accent px-4 py-3 font-semibold text-white transition hover:bg-orange-600 flex items-center justify-center gap-2 text-sm shadow-lg shadow-orange-500/20">
                    <i class="fa-solid fa-plus-circle"></i> Add Money
                </a>
                <a href="profile" class="flex-1 rounded-2xl border border-white/20 bg-white/15 px-4 py-3 font-semibold text-white transition hover:bg-white/25 flex items-center justify-center gap-2 text-sm">
                    <i class="fa-solid fa-user"></i> Profile
                </a>
            </div>
        </div>
    </div>
</section>

<script>
(function(){
    var h=localStorage.getItem('balHidden')==='1';
    function apply(hidden){
        var v=document.getElementById('balVisible'),hd=document.getElementById('balHidden'),ic=document.getElementById('eyeIcon');
        if(!v||!hd||!ic)return;
        if(hidden){v.classList.add('hidden');hd.classList.remove('hidden');ic.className='fa-solid fa-eye-slash';}
        else{v.classList.remove('hidden');hd.classList.add('hidden');ic.className='fa-solid fa-eye';}
    }
    window.toggleBalance=function(){h=!h;localStorage.setItem('balHidden',h?'1':'0');apply(h);};
    apply(h);
})();
</script>

<!-- ── Alerts / Virtual Account ───────────────────────────────────── -->
<style>.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}</style>
<section class="mb-6 space-y-3">
    <!-- Account Cards Slider -->
    <div class="overflow-x-auto scrollbar-hide" style="scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;">
        <div class="flex gap-3" style="min-width:min-content;">

    <?php if ($pocketfi_enabled && !empty($va_account_number)): ?>
    <div class="relative overflow-hidden rounded-2xl p-5 flex-shrink-0" style="background: linear-gradient(135deg, #4D148C 0%, #3b0f6b 50%, #2d0a54 100%);width:85vw;max-width:380px;scroll-snap-align:start;">
        <!-- Decorative elements -->
        <div class="absolute top-0 right-0 w-32 h-32 rounded-full opacity-10" style="background: radial-gradient(circle, white 0%, transparent 70%); transform: translate(30%, -30%);"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 rounded-full opacity-5" style="background: radial-gradient(circle, white 0%, transparent 70%); transform: translate(-30%, 30%);"></div>
        
        <div class="relative z-10">
            <!-- Header -->
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-white/15 flex items-center justify-center backdrop-blur-sm">
                        <i class="fa-solid fa-building-columns text-white text-sm"></i>
                    </div>
                    <div>
                        <p class="text-white/60 text-[10px] uppercase tracking-wider font-medium">Bank Transfer</p>
                        <p class="text-white text-xs font-bold"><?php echo htmlspecialchars($va_bank_name); ?> MFB</p>
                    </div>
                </div>
                <span class="bg-purple-400/20 text-purple-200 text-[10px] font-bold px-2.5 py-1 rounded-full border border-purple-400/30">
                    <i class="fa-solid fa-bolt text-[8px]"></i> AUTO
                </span>
            </div>

            <!-- Account Details -->
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3.5 mb-3 border border-white/10">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-white/50 text-[10px] uppercase tracking-wider mb-1">Account Number</p>
                        <p class="text-white text-lg font-bold tracking-wider" id="vaNumber"><?php echo htmlspecialchars($va_account_number); ?></p>
                    </div>
                    <button onclick="copyAccount()" id="copyBtn" class="w-10 h-10 rounded-xl bg-white/15 hover:bg-white/25 flex items-center justify-center transition-all active:scale-90">
                        <i class="fa-regular fa-copy text-white text-sm" id="copyIcon"></i>
                    </button>
                </div>
            </div>

            <!-- Account Name & Fee -->
            <div class="flex items-center justify-between">
                <p class="text-white/70 text-xs">
                    <i class="fa-solid fa-user text-[10px] mr-1"></i>
                    <?php echo htmlspecialchars($va_account_name ?: $user['full_name']); ?>
                </p>
                <?php if (!empty($fee_notice)): ?>
                <p class="text-white/50 text-[10px]"><i class="fa-solid fa-info-circle mr-0.5"></i> <?php echo htmlspecialchars($fee_notice); ?></p>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <script>
    function copyAccount(){
        var t=document.getElementById('vaNumber').innerText.trim();
        if(navigator.clipboard){navigator.clipboard.writeText(t).then(copied);}
        else{var el=document.createElement('textarea');el.value=t;el.style.position='fixed';el.style.opacity='0';document.body.appendChild(el);el.select();document.execCommand('copy');document.body.removeChild(el);copied();}
    }
    function copied(){
        var b=document.getElementById('copyBtn');
        b.innerHTML='<i class="fa-solid fa-check text-purple-300 text-sm"></i>';
        b.classList.add('bg-purple-500/30');
        setTimeout(function(){
            b.innerHTML='<i class="fa-regular fa-copy text-white text-sm"></i>';
            b.classList.remove('bg-purple-500/30');
        },2000);
    }
    </script>
    <?php elseif ($pocketfi_enabled && empty($va_account_number)): ?>
    <a href="fund-wallet" class="block relative overflow-hidden rounded-2xl p-5 transition-all hover:scale-[1.01] active:scale-[0.99] flex-shrink-0" style="background: linear-gradient(135deg, #92400e 0%, #78350f 100%);width:85vw;max-width:380px;scroll-snap-align:start;">
        <div class="absolute top-0 right-0 w-24 h-24 rounded-full opacity-10" style="background: radial-gradient(circle, white 0%, transparent 70%); transform: translate(30%, -30%);"></div>
        <div class="relative z-10 flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-white/15 flex items-center justify-center flex-shrink-0">
                <i class="fa-solid fa-triangle-exclamation text-amber-300 text-lg"></i>
            </div>
            <div class="flex-1">
                <h3 class="text-white text-sm font-bold mb-0.5">Virtual Account Not Yet Assigned</h3>
                <p class="text-white/60 text-xs">Tap to activate your dedicated bank account →</p>
            </div>
            <i class="fa-solid fa-chevron-right text-white/40 text-sm"></i>
        </div>
    </a>
    <?php endif; ?>

    <?php
    // ── Paystack DVA Account Card ──────────────────────────────────
    $paystack_dva_enabled = intval($site_data['paystack_dva_enabled'] ?? 0);
    $dva_account_number   = '';
    $dva_account_name     = '';
    $dva_bank_name        = 'Wema Bank';
    if ($paystack_dva_enabled) {
        try {
            $dva_stmt = $pdo->prepare("SELECT paystack_dva_account_number, paystack_dva_account_name, paystack_dva_bank_name FROM users WHERE id = :uid LIMIT 1");
            $dva_stmt->execute(['uid' => $_SESSION['user_id']]);
            $dva_row = $dva_stmt->fetch(PDO::FETCH_ASSOC);
            if ($dva_row) {
                $dva_account_number = $dva_row['paystack_dva_account_number'] ?? '';
                $dva_account_name   = $dva_row['paystack_dva_account_name']   ?? '';
                $dva_bank_name      = $dva_row['paystack_dva_bank_name']      ?? 'Wema Bank';
            }
        } catch (PDOException $e) {}
    }
    ?>
    <?php if ($paystack_dva_enabled && !empty($dva_account_number)): ?>
    <div class="relative overflow-hidden rounded-2xl p-5 flex-shrink-0" style="background: linear-gradient(135deg, #0a2540 0%, #1a3a5c 50%, #0f4c75 100%);width:85vw;max-width:380px;scroll-snap-align:start;">
        <div class="absolute top-0 right-0 w-32 h-32 rounded-full opacity-10" style="background: radial-gradient(circle, white 0%, transparent 70%); transform: translate(30%, -30%);"></div>
        <div class="relative z-10">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-white/15 flex items-center justify-center backdrop-blur-sm">
                        <i class="fa-solid fa-university text-white text-sm"></i>
                    </div>
                    <div>
                        <p class="text-white/60 text-[10px] uppercase tracking-wider font-medium">Bank Transfer</p>
                        <p class="text-white text-xs font-bold"><?php echo htmlspecialchars($dva_bank_name); ?></p>
                    </div>
                </div>
                <span class="bg-green-400/20 text-green-200 text-[10px] font-bold px-2.5 py-1 rounded-full border border-green-400/30">
                    <i class="fa-solid fa-bolt text-[8px]"></i> INSTANT
                </span>
            </div>
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3.5 mb-3 border border-white/10">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-white/50 text-[10px] uppercase tracking-wider mb-1">Account Number</p>
                        <p class="text-white text-lg font-bold tracking-wider" id="dvaNumber"><?php echo htmlspecialchars($dva_account_number); ?></p>
                    </div>
                    <button onclick="copyDva()" id="dvaCopyBtn" class="w-10 h-10 rounded-xl bg-white/15 hover:bg-white/25 flex items-center justify-center transition-all active:scale-90">
                        <i class="fa-regular fa-copy text-white text-sm" id="dvaCopyIcon"></i>
                    </button>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <p class="text-white/70 text-xs">
                    <i class="fa-solid fa-user text-[10px] mr-1"></i>
                    <?php echo htmlspecialchars($dva_account_name ?: $user['full_name']); ?>
                </p>
            </div>
        </div>
    </div>
    <script>
    function copyDva(){
        var t=document.getElementById('dvaNumber').innerText.trim();
        if(navigator.clipboard){navigator.clipboard.writeText(t).then(dvaCopied);}
        else{var el=document.createElement('textarea');el.value=t;el.style.position='fixed';el.style.opacity='0';document.body.appendChild(el);el.select();document.execCommand('copy');document.body.removeChild(el);dvaCopied();}
    }
    function dvaCopied(){
        var b=document.getElementById('dvaCopyBtn');
        b.innerHTML='<i class="fa-solid fa-check text-green-300 text-sm"></i>';
        b.classList.add('bg-green-500/30');
        setTimeout(function(){
            b.innerHTML='<i class="fa-regular fa-copy text-white text-sm"></i>';
            b.classList.remove('bg-green-500/30');
        },2000);
    }
    </script>
    <?php elseif ($paystack_dva_enabled && empty($dva_account_number)): ?>
    <a href="fund-wallet" class="block relative overflow-hidden rounded-2xl p-5 transition-all hover:scale-[1.01] active:scale-[0.99] flex-shrink-0" style="background: linear-gradient(135deg, #0a2540 0%, #1a3a5c 100%);width:85vw;max-width:380px;scroll-snap-align:start;">
        <div class="absolute top-0 right-0 w-24 h-24 rounded-full opacity-10" style="background: radial-gradient(circle, white 0%, transparent 70%); transform: translate(30%, -30%);"></div>
        <div class="relative z-10 flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-white/15 flex items-center justify-center flex-shrink-0">
                <i class="fa-solid fa-university text-blue-300 text-lg"></i>
            </div>
            <div class="flex-1">
                <h3 class="text-white text-sm font-bold mb-0.5">Paystack Account Not Assigned</h3>
                <p class="text-white/60 text-xs">Tap to get your dedicated bank account &#8594;</p>
            </div>
            <i class="fa-solid fa-chevron-right text-white/40 text-sm"></i>
        </div>
    </a>
    <?php endif; ?>

        </div><!-- /flex slider -->
    </div><!-- /overflow-x-auto -->

    <!-- Announcement Marquee -->
    <div class="bg-blue-50 border border-blue-100 rounded-2xl p-4 flex gap-3 overflow-hidden">
        <div class="text-blue-500 mt-0.5 flex-shrink-0">
            <i class="fa-solid fa-circle-info text-lg"></i>
        </div>
        <div class="flex-1 min-w-0 overflow-hidden">
            <div class="marquee-wrapper">
                <p class="marquee-text text-xs font-semibold text-blue-800"><?php echo htmlspecialchars($site_data['announcement'] ?? 'Welcome to ' . $site_data['web_name'] . '! All services working perfectly.'); ?></p>
            </div>
        </div>
    </div>
    <style>
    .marquee-wrapper{overflow:hidden;white-space:nowrap;}
    .marquee-text{display:inline-block;animation:marqueeScroll 12s linear infinite;padding-left:100%;}
    @keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
    </style>

    <?php $telegram_group_url = trim($site_data['telegram_group_url'] ?? ''); ?>
    <?php if (!empty($telegram_group_url)): ?>
    <a href="<?php echo htmlspecialchars($telegram_group_url); ?>" target="_blank" class="block rounded-2xl p-4 transition-all hover:scale-[1.01] active:scale-[0.99]" style="background:linear-gradient(135deg,#0088cc 0%,#0077b5 100%);">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-white/15 flex items-center justify-center flex-shrink-0">
                <i class="fa-brands fa-telegram text-white text-xl"></i>
            </div>
            <div class="flex-1">
                <p class="text-white text-sm font-bold">Join Our Telegram Group</p>
                <p class="text-white/60 text-xs">Get updates, support & exclusive offers</p>
            </div>
            <i class="fa-solid fa-arrow-up-right-from-square text-white/50 text-sm"></i>
        </div>
    </a>
    <?php endif; ?>
</section>

<style>
.service-card { transition: all 0.25s ease; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 16px 35px -20px rgba(77,20,140,0.35); }
.activity-card { transition: all 0.25s ease; }
.activity-card:hover { transform: translateY(-2px); border-color: rgba(77,20,140,0.2); box-shadow: 0 14px 30px -20px rgba(15,23,42,0.25); }
</style>

<!-- ── Quick Services ────────────────────────────────────────────── -->
<section class="mb-8">
    <div class="mb-4 flex items-center justify-between">
        <div>
            <h3 class="text-lg font-bold text-slate-900">Quick Services</h3>
            <p class="text-xs text-slate-500">Popular actions in one tap</p>
        </div>
        <span class="rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Tap to explore</span>
    </div>
    <div class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-4 sm:gap-5">
        <?php if (!empty($site_data['module_buy_data'] ?? 1)): ?>
        <a href="buy-data" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-green-500">
                <i class="fa-solid fa-wifi text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Data Bundle</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_buy_airtime'] ?? 1)): ?>
        <a href="buy-airtime" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-red-500">
                <i class="fa-solid fa-phone-volume text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Airtime</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_cable_tv'] ?? 1)): ?>
        <a href="cable-tv" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-yellow-600">
                <i class="fa-solid fa-tv text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Cable TV</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_electricity'] ?? 1)): ?>
        <a href="electricity" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-orange-400">
                <i class="fa-solid fa-bolt-lightning text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Electricity</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_virtual_numbers'] ?? 1)): ?>
        <a href="virtual-numbers" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-primary relative">
                <i class="fa-solid fa-comment-sms text-xl"></i>
                <span class="absolute -top-1 -right-1 badge-hot text-[8px] text-white px-1.5 py-0.5 rounded-full font-bold">HOT</span>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Virtual Numbers</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_smm'] ?? 1)): ?>
        <a href="boost" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-blue-500">
                <i class="fa-solid fa-share-nodes text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Social Boost</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_buy_giftcard'] ?? 1)): ?>
        <a href="buy-giftcard" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-accent">
                <i class="fa-solid fa-gift text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Buy Giftcard</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_sell_giftcard'] ?? 1)): ?>
        <a href="sell-giftcard" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-purple-500">
                <i class="fa-solid fa-tags text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Sell Giftcard</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_virtual_cards'] ?? 1)): ?>
        <a href="virtual-cards" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-indigo-500 relative">
                <i class="fa-solid fa-credit-card text-xl"></i>
                <span class="absolute -top-1 -right-1 badge-new text-[8px] text-white px-1.5 py-0.5 rounded-full font-bold uppercase">NEW</span>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Virtual Cards</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_marketplace'] ?? 1)): ?>
        <a href="marketplace" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-primary relative">
                <i class="fa-solid fa-store text-xl"></i>
                <span class="absolute -top-1 -right-1 badge-new text-[8px] text-white px-1.5 py-0.5 rounded-full font-bold uppercase">NEW</span>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Marketplace</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_sell_account'] ?? 1)): ?>
        <a href="sell-account" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-pink-500">
                <i class="fa-solid fa-shop text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Sell Account</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_marketplace'] ?? 1)): ?>
        <a href="my-accounts" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-cyan-500">
                <i class="fa-solid fa-bag-shopping text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">My Accounts</span>
        </a>
        <?php endif; ?>
        <a href="fund-wallet" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-emerald-600">
                <i class="fa-solid fa-wallet text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Fund Wallet</span>
        </a>
        <?php if (!empty($site_data['module_withdraw'] ?? 1)): ?>
        <a href="withdraw" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-orange-500">
                <i class="fa-solid fa-money-bill-transfer text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Withdraw</span>
        </a>
        <?php endif; ?>
        <?php if (!empty($site_data['module_referral'] ?? 1)): ?>
        <a href="referral" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-teal-500">
                <i class="fa-solid fa-users text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Refer & Earn</span>
        </a>
        <?php endif; ?>
        <a href="vtu-history" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-gray-500">
                <i class="fa-solid fa-clock-rotate-left text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">VTU History</span>
        </a>
        <a href="my-orders" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-amber-500">
                <i class="fa-solid fa-receipt text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">My Orders</span>
        </a>
        <?php if (!empty($site_data['module_buy_logs'] ?? 1)): ?>
        <a href="buy-logs" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-amber-600">
                <i class="fa-solid fa-file-lines text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Buy Logs</span>
        </a>
        <?php endif; ?>
        <a href="api-docs" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-primary relative">
                <i class="fa-solid fa-code text-xl"></i>
                <span class="absolute -top-1 -right-1 badge-new text-[8px] text-white px-1.5 py-0.5 rounded-full font-bold uppercase">API</span>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">API Docs</span>
        </a>
        <a href="profile" class="service-card flex flex-col items-center gap-2">
            <div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center text-slate-500">
                <i class="fa-solid fa-user-gear text-xl"></i>
            </div>
            <span class="text-[10px] font-semibold text-center leading-tight">Profile</span>
        </a>
    </div>
</section>


<!-- ── Refer & Earn ──────────────────────────────────────────────── -->
<?php if (!empty($site_data['module_referral'] ?? 1)): ?>
<section class="mb-6">
    <div class="bg-gradient-to-r from-primary to-[#6b23c2] rounded-2xl p-5 flex items-center justify-between text-white shadow-lg shadow-purple-100">
        <div class="flex-1">
            <h3 class="font-bold mb-1">Refer & Earn</h3>
            <p class="text-xs opacity-80">Get <?php echo $site_data['refer_percent']; ?>% commission for every friend you invite.</p>
        </div>
        <div class="ml-4">
            <a href="referral" class="bg-white text-primary px-4 py-2 rounded-xl text-xs font-bold uppercase shadow-md inline-block hover:bg-gray-100 transition-colors">Invite</a>
        </div>
    </div>
</section>
<?php endif; ?>

<?php include ('footer.php'); ?>
