<?php
$host = 'localhost';
$dbname = 'trader_safety';
$username = 'root';
$password = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $pdo->query("SELECT * FROM trader_safety.trading_conditions ORDER BY rank_num ASC");
    $brokers = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Connection failed: " . $e->getMessage());
}

include __DIR__ . '/../includes/header.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trading Conditions Ranking</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --ivory:        #FAFAF7;
            --white:        #FFFFFF;
            --navy:         #0F1628;
            --navy-60:      rgba(15,22,40,.6);
            --gold:         #B8890A;
            --gold-light:   #F5EDD3;
            --gold-ring:    #D4A82A;
            --silver:       #8E9BAA;
            --bronze:       #B07040;
            --border:       #EDE9DF;
            --border-soft:  #F4F1EB;
            --muted:        #7D8799;
            --green-bg:     #EDFBF3;
            --green-text:   #166534;
            --blue-bg:      #EEF4FF;
            --blue-text:    #1E40AF;
            --red-bg:       #FEF2F2;
            --red-text:     #991B1B;
            --sans:         'Plus Jakarta Sans', sans-serif;
            --serif:        'Playfair Display', Georgia, serif;
            --shadow-sm:    0 1px 3px rgba(15,22,40,.06), 0 1px 2px rgba(15,22,40,.04);
            --shadow-md:    0 4px 16px rgba(15,22,40,.07), 0 2px 6px rgba(15,22,40,.04);
            --shadow-hover: 0 12px 32px rgba(15,22,40,.11), 0 4px 12px rgba(15,22,40,.06);
            --radius:       14px;
        }

        body {
            font-family: var(--sans);
            background: var(--ivory);
            color: var(--navy);
            min-height: 100vh;
            padding: 0 0 80px;
        }

        /* ─── Page Header ─── */
        .page-hero {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            padding: 48px 40px 36px;
        }
        .hero-inner { max-width: 1320px; margin: 0 auto; }

        .breadcrumb {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .6px;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .breadcrumb a { color: var(--muted); text-decoration: none; }
        .breadcrumb a:hover { color: var(--navy); }
        .breadcrumb i { font-size: 9px; }

        .hero-title {
            font-family: var(--serif);
            font-size: clamp(26px, 3vw, 38px);
            font-weight: 700;
            color: var(--navy);
            line-height: 1.2;
            margin-bottom: 8px;
        }
        .hero-title em {
            font-style: italic;
            color: var(--gold);
        }
        .hero-subtitle {
            font-size: 14px;
            color: var(--muted);
            font-weight: 500;
            margin-bottom: 36px;
        }

        /* ─── Stats Row ─── */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
        }
        .stat-cell {
            background: var(--white);
            padding: 24px 28px;
            position: relative;
        }
        .stat-eyebrow {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 10px;
        }
        .stat-figure {
            font-family: var(--serif);
            font-size: clamp(20px, 2.5vw, 30px);
            font-weight: 700;
            color: var(--navy);
        }
        .stat-accent {
            width: 28px; height: 3px;
            background: var(--gold);
            border-radius: 2px;
            margin-bottom: 10px;
        }

        /* ─── Main Content Area ─── */
        .content-wrap { max-width: 1320px; margin: 0 auto; padding: 40px 40px 0; }

        /* ─── Toolbar ─── */
        .toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 32px;
        }

        .tab-group {
            display: flex;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 4px;
            gap: 2px;
        }
        .tab-btn {
            background: none;
            border: none;
            font-family: var(--sans);
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            padding: 8px 20px;
            border-radius: 7px;
            cursor: pointer;
            transition: all .2s ease;
        }
        .tab-btn:hover { color: var(--navy); background: var(--ivory); }
        .tab-btn.active {
            background: var(--navy);
            color: #fff;
        }

        .filter-pills {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
        }
        .pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--white);
            border: 1px solid var(--border);
            color: var(--navy);
            font-family: var(--sans);
            font-size: 12px;
            font-weight: 600;
            padding: 7px 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: all .2s ease;
            white-space: nowrap;
        }
        .pill:hover { border-color: var(--gold-ring); color: var(--gold); }
        .pill.active {
            background: var(--gold-light);
            border-color: var(--gold-ring);
            color: var(--gold);
        }
        .pill i { font-size: 9px; }

        /* Exec dropdown */
        .dropdown-wrap { position: relative; }
        .exec-menu {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 12px;
            min-width: 200px;
            box-shadow: var(--shadow-md);
            z-index: 100;
            overflow: hidden;
        }
        .exec-menu ul { list-style: none; padding: 6px; }
        .exec-menu li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            font-size: 13px;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            transition: background .15s;
        }
        .exec-menu li:hover { background: var(--ivory); }
        .exec-menu li img { width: 26px; height: 18px; object-fit: contain; border-radius: 3px; }

        /* ─── Cards Grid ─── */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            align-items: start;
        }

        /* ─── Broker Card ─── */
        .broker-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 0;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: transform .25s ease, box-shadow .25s ease;
            position: relative;
            animation: slideUp .45s ease both;
        }
        .broker-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Staggered animation delays */
        .broker-card:nth-child(1) { animation-delay: .05s; }
        .broker-card:nth-child(2) { animation-delay: .10s; }
        .broker-card:nth-child(3) { animation-delay: .15s; }
        .broker-card:nth-child(4) { animation-delay: .20s; }
        .broker-card:nth-child(5) { animation-delay: .25s; }
        .broker-card:nth-child(6) { animation-delay: .30s; }
        .broker-card:nth-child(7) { animation-delay: .35s; }
        .broker-card:nth-child(8) { animation-delay: .40s; }

        /* Rank accent bar on top */
        .card-topbar {
            height: 4px;
            background: var(--border-soft);
        }
        .rank-1 .card-topbar { background: linear-gradient(90deg, #D4A82A, #F0CE6A); }
        .rank-2 .card-topbar { background: linear-gradient(90deg, #8E9BAA, #C0CDD8); }
        .rank-3 .card-topbar { background: linear-gradient(90deg, #B07040, #D49A6A); }

        /* Featured highlight for #1 */
        .rank-1 { border-color: #DECA85; }

        .card-body { padding: 22px 20px 20px; }

        /* Rank badge */
        .rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px; height: 30px;
            border-radius: 50%;
            font-family: var(--serif);
            font-size: 13px;
            font-weight: 700;
            font-style: italic;
            margin-bottom: 14px;
            background: var(--ivory);
            border: 1px solid var(--border);
            color: var(--muted);
        }
        .rank-1 .rank-badge { background: var(--gold-light); border-color: var(--gold-ring); color: var(--gold); }
        .rank-2 .rank-badge { background: #EFF1F4; border-color: #C0CDD8; color: var(--silver); }
        .rank-3 .rank-badge { background: #FBF5EE; border-color: #D49A6A; color: var(--bronze); }

        /* Broker logo */
        .broker-logo-wrap {
            height: 48px;
            display: flex;
            align-items: center;
            margin-bottom: 18px;
        }
        .broker-logo-wrap img {
            max-width: 100%;
            max-height: 44px;
            object-fit: contain;
        }
        .broker-name-fallback {
            font-family: var(--serif);
            font-size: 17px;
            font-weight: 700;
            color: var(--navy);
        }

        /* Overall rating */
        .rating-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--ivory);
            border-radius: 9px;
            padding: 12px 14px;
            margin-bottom: 16px;
        }
        .rating-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            color: var(--muted);
        }
        .rating-score {
            font-family: var(--serif);
            font-size: 20px;
            font-weight: 700;
            color: var(--navy);
        }
        .rank-1 .rating-score { color: var(--gold); }

        /* Stars */
        .stars { display: flex; gap: 2px; align-items: center; margin-top: 2px; }
        .star-fill { color: #F5C842; font-size: 10px; }
        .star-empty { color: #DDD; font-size: 10px; }

        /* Metric rows */
        .metrics { border-top: 1px solid var(--border-soft); }
        .metric-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 0;
            border-bottom: 1px solid var(--border-soft);
            gap: 8px;
        }
        .metric-row:last-child { border-bottom: none; }
        .metric-key {
            font-size: 12px;
            color: var(--muted);
            font-weight: 500;
            white-space: nowrap;
        }
        .metric-val {
            font-size: 12px;
            font-weight: 700;
            color: var(--navy);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .metric-val.acct { color: #2563EB; }

        /* Badges */
        .badge {
            display: inline-flex;
            align-items: center;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            padding: 2px 7px;
            border-radius: 4px;
        }
        .badge-perfect { background: var(--green-bg); color: var(--green-text); }
        .badge-good    { background: var(--blue-bg);  color: var(--blue-text);  }
        .badge-poor    { background: var(--red-bg);   color: var(--red-text);   }

        /* CTA Button on card */
        .card-cta {
            display: block;
            width: 100%;
            text-align: center;
            background: var(--navy);
            color: #fff;
            font-family: var(--sans);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .4px;
            padding: 11px 0;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 16px;
            text-decoration: none;
            transition: background .2s;
        }
        .card-cta:hover { background: #1e2b4a; }
        .rank-1 .card-cta { background: var(--gold); color: var(--navy); }
        .rank-1 .card-cta:hover { background: var(--gold-ring); }

        /* ─── Compare Card ─── */
        .compare-card {
            background: var(--white);
            border: 2px dashed var(--border);
            border-radius: var(--radius);
            padding: 30px 22px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 420px;
            animation: slideUp .45s .45s ease both;
        }
        .compare-icon {
            width: 52px; height: 52px;
            border-radius: 50%;
            background: var(--ivory);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            color: var(--muted);
            font-size: 20px;
        }
        .compare-title {
            font-family: var(--serif);
            font-size: 16px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 6px;
        }
        .compare-sub {
            font-size: 12px;
            color: var(--muted);
            font-weight: 500;
            margin-bottom: 24px;
            line-height: 1.6;
        }

        /* Custom select inside compare card */
        .custom-sel { position: relative; width: 100%; margin-bottom: 12px; }
        .sel-toggle {
            width: 100%;
            background: var(--ivory);
            border: 1px solid var(--border);
            border-radius: 9px;
            padding: 11px 14px;
            font-family: var(--sans);
            font-size: 13px;
            font-weight: 600;
            color: var(--navy);
            cursor: pointer;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sel-toggle:hover { border-color: var(--gold-ring); }
        .sel-menu {
            display: none;
            position: absolute;
            bottom: calc(100% + 6px);
            left: 0; right: 0;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: var(--shadow-md);
            z-index: 80;
            overflow: hidden;
            max-height: 260px;
            overflow-y: auto;
        }
        .sel-menu ul { list-style: none; padding: 6px; }
        .sel-menu li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            font-size: 13px;
            font-weight: 500;
            border-radius: 7px;
            cursor: pointer;
            transition: background .15s;
        }
        .sel-menu li:hover { background: var(--ivory); }
        .sel-menu li img { width: 26px; height: 18px; object-fit: contain; border-radius: 3px; }
        .btn-compare-now {
            width: 100%;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 9px;
            padding: 11px;
            font-family: var(--sans);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }
        .btn-compare-now:hover { background: #1e2b4a; }

        /* ─── Section label ─── */
        .section-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .section-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        /* ─── Responsive ─── */
        @media (max-width: 1100px) {
            .cards-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 700px) {
            .page-hero { padding: 32px 20px 28px; }
            .content-wrap { padding: 28px 20px 0; }
            .cards-grid { grid-template-columns: 1fr; }
            .stats-row { grid-template-columns: 1fr; }
            .toolbar { flex-direction: column; align-items: flex-start; }
        }
    </style>
</head>
<body>

<!-- ═══════════════════ PAGE HERO ═══════════════════ -->
<div class="page-hero">
    <div class="hero-inner">

        <div class="breadcrumb">
            <a href="<?php echo $base_url; ?>/index.php">Home</a>
            <i class="fas fa-chevron-right"></i>
            <a href="<?php echo $base_url; ?>/vps/vps.php">VPS</a>
            <i class="fas fa-chevron-right"></i>
            <span>Trading Conditions</span>
        </div>

        <h1 class="hero-title">Trading Conditions <em>Ranking</em></h1>
        <p class="hero-subtitle">Real-time broker performance evaluated across execution, slippage, cost & swap metrics.</p>

        <div class="stats-row">
            <div class="stat-cell">
                <div class="stat-eyebrow">Participants</div>
                <div class="stat-accent"></div>
                <div class="stat-figure" data-count="195044">0</div>
            </div>
            <div class="stat-cell">
                <div class="stat-eyebrow">Total Trades</div>
                <div class="stat-accent"></div>
                <div class="stat-figure" data-count="11930628">0</div>
            </div>
            <div class="stat-cell">
                <div class="stat-eyebrow">Accumulated Margin (USD)</div>
                <div class="stat-accent"></div>
                <div class="stat-figure" data-count="4315802348" data-prefix="$">0</div>
            </div>
        </div>

    </div>
</div>

<!-- ═══════════════════ CONTENT ═══════════════════ -->
<div class="content-wrap">

    <!-- Toolbar -->
    <div class="toolbar">
        <!-- Account type tabs -->
        <div class="tab-group">
            <button class="tab-btn active" onclick="filterBrokers('All', this)">All Accounts</button>
            <button class="tab-btn" onclick="filterBrokers('ECN', this)">ECN</button>
            <button class="tab-btn" onclick="filterBrokers('Standard', this)">Standard</button>
        </div>

        <!-- Filter pills -->
        <div class="filter-pills">
            <button class="pill">
                <i class="fas fa-layer-group"></i> Trading Env.
            </button>

            <div class="dropdown-wrap">
                <button class="pill active" id="execToggle">
                    <i class="fas fa-bolt"></i> Execution Speed <i class="fas fa-chevron-down"></i>
                </button>
                <div class="exec-menu" id="execMenu">
                    <ul>
                        <li data-val="global">
                            <img src="../assets/images/exec/global.png" onerror="this.style.display='none'" alt=""> Global
                        </li>
                        <li data-val="shanghai">
                            <img src="../assets/images/exec/shanghai.png" onerror="this.style.display='none'" alt=""> Shanghai
                        </li>
                        <li data-val="hongkong">
                            <img src="../assets/images/exec/hongkong.png" onerror="this.style.display='none'" alt=""> Hong Kong
                        </li>
                        <li data-val="bangkok">
                            <img src="../assets/images/exec/bangkok.png" onerror="this.style.display='none'" alt=""> Bangkok
                        </li>
                        <li data-val="frankfurt">
                            <img src="../assets/images/exec/frankfurt.png" onerror="this.style.display='none'" alt=""> Frankfurt
                        </li>
                    </ul>
                </div>
            </div>

            <button class="pill"><i class="fas fa-chart-line"></i> Slippage</button>
            <button class="pill"><i class="fas fa-coins"></i> Trading Cost</button>
            <button class="pill"><i class="fas fa-sync-alt"></i> Swap</button>
        </div>
    </div>

    <!-- Section Label -->
    <div class="section-label">Live Rankings</div>

    <!-- Cards Grid -->
    <div class="cards-grid" id="brokerList">

        <?php foreach ($brokers as $broker):
            $r = intval($broker['rank_num']);
            $rankClass = ($r <= 3) ? 'rank-' . $r : '';

            // Star rating (out of 5 based on overall_rating e.g. "9.4/10" or "9.4")
            $ratingNum = floatval($broker['overall_rating']);
            $starsFull  = min(5, round($ratingNum / 2));

            // Badge class mapping
            $badgeMap = ['Perfect' => 'badge-perfect', 'Good' => 'badge-good', 'Poor' => 'badge-poor'];
        ?>

        <div class="broker-card <?= $rankClass ?>"
             data-type="<?= htmlspecialchars($broker['account_type'] ?? 'Standard') ?>">

            <div class="card-topbar"></div>

            <div class="card-body">

                <!-- Rank -->
                <div class="rank-badge"><?= $r ?></div>

                <!-- Logo / Name -->
                <div class="broker-logo-wrap">
                    <?php if (!empty($broker['logo_url'])): ?>
                        <img src="<?= htmlspecialchars($broker['logo_url']) ?>"
                             alt="<?= htmlspecialchars($broker['name']) ?>"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block'">
                        <span class="broker-name-fallback" style="display:none"><?= htmlspecialchars($broker['name']) ?></span>
                    <?php else: ?>
                        <span class="broker-name-fallback"><?= htmlspecialchars($broker['name']) ?></span>
                    <?php endif; ?>
                </div>

                <!-- Rating strip -->
                <div class="rating-strip">
                    <div>
                        <div class="rating-label">Overall Rating</div>
                        <div class="stars">
                            <?php for ($s = 1; $s <= 5; $s++): ?>
                                <i class="fas fa-star <?= $s <= $starsFull ? 'star-fill' : 'star-empty' ?>"></i>
                            <?php endfor; ?>
                        </div>
                    </div>
                    <div class="rating-score"><?= htmlspecialchars($broker['overall_rating']) ?></div>
                </div>

                <!-- Metrics -->
                <div class="metrics">
                    <div class="metric-row">
                        <span class="metric-key">Account Type</span>
                        <span class="metric-val acct"><?= htmlspecialchars($broker['account_type'] ?? 'Standard') ?></span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-key">Exec. Speed</span>
                        <span class="metric-val">
                            <?= htmlspecialchars($broker['execution_speed']) ?>
                            <?php if (!empty($broker['execution_badge'])): $bc = $broker['execution_badge']; ?>
                                <span class="badge <?= $badgeMap[$bc] ?? '' ?>"><?= htmlspecialchars($bc) ?></span>
                            <?php endif; ?>
                        </span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-key">Slippage</span>
                        <span class="metric-val"><?= htmlspecialchars($broker['slippage']) ?></span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-key">Trading Cost</span>
                        <span class="metric-val">
                            <?= htmlspecialchars($broker['trading_cost']) ?>
                            <?php if (!empty($broker['trading_cost_badge'])): $bc = $broker['trading_cost_badge']; ?>
                                <span class="badge <?= $badgeMap[$bc] ?? '' ?>"><?= htmlspecialchars($bc) ?></span>
                            <?php endif; ?>
                        </span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-key">Swap</span>
                        <span class="metric-val">
                            <?= htmlspecialchars($broker['swap']) ?>
                            <?php if (!empty($broker['swap_badge'])): $bc = $broker['swap_badge']; ?>
                                <span class="badge <?= $badgeMap[$bc] ?? '' ?>"><?= htmlspecialchars($bc) ?></span>
                            <?php endif; ?>
                        </span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-key">Disconnection</span>
                        <span class="metric-val">
                            <?= htmlspecialchars($broker['disconnection_rating']) ?>
                            <?php if (!empty($broker['disconnection_badge'])): $bc = $broker['disconnection_badge']; ?>
                                <span class="badge <?= $badgeMap[$bc] ?? '' ?>"><?= htmlspecialchars($bc) ?></span>
                            <?php endif; ?>
                        </span>
                    </div>
                </div>

                <a href="#" class="card-cta">View Full Analysis &rarr;</a>

            </div>
        </div>

        <?php endforeach; ?>

        <!-- Compare Card -->
        <div class="compare-card" id="comparisonCard">
            <div class="compare-icon"><i class="fas fa-code-compare"></i></div>
            <div class="compare-title">Compare Brokers</div>
            <p class="compare-sub">Select any broker to compare<br>side-by-side with the rankings.</p>

            <div class="custom-sel" id="compareSelect">
                <button class="sel-toggle" id="compareToggle">
                    <span id="compareLabel">Select a broker</span>
                    <i class="fas fa-chevron-up" style="font-size:10px;color:var(--muted)"></i>
                </button>
                <div class="sel-menu" id="compareMenu">
                    <ul>
                        <?php foreach ($brokers as $b): ?>
                        <li data-val="<?= htmlspecialchars(strtolower(preg_replace('/[^a-z0-9]+/', '', $b['name']))) ?>">
                            <img src="<?= htmlspecialchars($b['logo_url'] ?: '') ?>"
                                 onerror="this.style.display='none'"
                                 alt="<?= htmlspecialchars($b['name']) ?>">
                            <?= htmlspecialchars($b['name']) ?>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>

            <button class="btn-compare-now" id="compareNowBtn">Compare Now</button>
        </div>

    </div><!-- /cards-grid -->
</div><!-- /content-wrap -->

<script>
/* ── Filter tabs ── */
function filterBrokers(type, btn) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.broker-card').forEach(card => {
        card.style.display = (type === 'All' || card.dataset.type === type) ? '' : 'none';
    });
}

/* ── Animated counters ── */
function animateCount(el) {
    const target = parseInt(el.dataset.count, 10);
    const prefix = el.dataset.prefix || '';
    const duration = 1800;
    const start = performance.now();
    const format = n => {
        if (n >= 1_000_000_000) return prefix + (n / 1_000_000_000).toFixed(2) + 'B';
        if (n >= 1_000_000)     return prefix + (n / 1_000_000).toFixed(2) + 'M';
        return prefix + n.toLocaleString();
    };
    const tick = now => {
        const p = Math.min((now - start) / duration, 1);
        const ease = 1 - Math.pow(1 - p, 3);
        el.textContent = format(Math.round(target * ease));
        if (p < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
}

const io = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) { animateCount(e.target); io.unobserve(e.target); } });
}, { threshold: .3 });
document.querySelectorAll('[data-count]').forEach(el => io.observe(el));

/* ── Exec Speed dropdown ── */
(function () {
    const toggle = document.getElementById('execToggle');
    const menu   = document.getElementById('execMenu');
    toggle?.addEventListener('click', e => {
        e.stopPropagation();
        menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
    });
    menu?.querySelectorAll('li').forEach(li => {
        li.addEventListener('click', () => {
            toggle.childNodes[1].textContent = ' ' + li.textContent.trim() + ' ';
            menu.style.display = 'none';
            console.log('Exec location:', li.dataset.val);
        });
    });
})();

/* ── Compare dropdown ── */
(function () {
    const toggle  = document.getElementById('compareToggle');
    const menu    = document.getElementById('compareMenu');
    const label   = document.getElementById('compareLabel');
    const nowBtn  = document.getElementById('compareNowBtn');
    let selected  = null;

    toggle?.addEventListener('click', e => {
        e.stopPropagation();
        menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
    });
    menu?.querySelectorAll('li').forEach(li => {
        li.addEventListener('click', () => {
            selected = li.dataset.val;
            label.textContent = li.textContent.trim();
            menu.style.display = 'none';
        });
    });
    nowBtn?.addEventListener('click', () => {
        if (!selected) { alert('Please select a broker first.'); return; }
        console.log('Comparing with:', selected);
        alert('Compare with: ' + selected);
    });

    /* Close all dropdowns on outside click */
    document.addEventListener('click', () => {
        document.getElementById('execMenu')  && (document.getElementById('execMenu').style.display  = 'none');
        document.getElementById('compareMenu') && (document.getElementById('compareMenu').style.display = 'none');
    });
})();
</script>

<?php include __DIR__ . '/../includes/footer.php'; ?>
</body>
</html>