<?php //include "includes/header.php"; ?>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">

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

:root {
    --ivory:       #F9F7F3;
    --cream:       #F2EFE9;
    --paper:       #FFFFFF;
    --border:      #E4DFDA;
    --border-soft: #EDE9E4;
    --navy:        #1C2B4A;
    --navy-mid:    #2E4270;
    --slate:       #5C6B82;
    --muted:       #8E99A9;
    --gold:        #B8892A;
    --gold-light:  #D4A84B;
    --gold-pale:   #F5EDD8;
    --green:       #2E7D5A;
    --green-pale:  #E6F4EE;
    --shadow-card: 0 2px 16px rgba(28,43,74,0.07);
    --shadow-lift: 0 8px 32px rgba(28,43,74,0.12);
    --radius:      12px;
    --radius-sm:   8px;
}

body { background: var(--ivory); font-family: 'DM Sans', sans-serif; color: var(--navy); }

/* ── PAGE WRAPPER ── */
.ranking-page {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    padding: 32px 24px;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--ivory);
}

/* ══════════════════════════════════════
   LEFT SIDEBAR — BROKER RANKINGS
══════════════════════════════════════ */
.sidebar-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
    padding-left: 2px;
}

.brokers-container {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    max-height: 1665px; /* Approximately 16 brokers tall */
    overflow-y: auto;
}

/* Custom scrollbar for brokers-container */
.brokers-container::-webkit-scrollbar {
    width: 6px;
}
.brokers-container::-webkit-scrollbar-track {
    background: var(--cream);
}
.brokers-container::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.brokers-container::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

.broker-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.18s ease;
}

.broker-item:last-child .broker-item-link { border-bottom: none; }

.broker-item-link:hover {
    background: var(--gold-pale);
}

.broker-item-link:hover .broker-name { color: var(--gold); }

.broker-contents {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
}

/* Logo */
.broker-logo-wrapper {
    position: relative;
    width: 108px;
    height: 56px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding-top: 14px;
}

.regulated-badge-broker {
    position: absolute;
    top: -12px;
    right: 7px;
    left: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: calc(100% - 12px);
    min-height: 18px;
    padding: 2px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(34, 139, 69, 0.98), rgba(18, 102, 54, 0.98));
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 16px rgba(18, 102, 54, 0.28), 0 0 18px rgba(46, 125, 90, 0.42), 0 0 28px rgba(46, 125, 90, 0.18);
    overflow: hidden;
    white-space: nowrap;
}

.regulated-badge-broker-text {
    display: inline-block;
    min-width: 100%;
}

.regulated-badge-broker.is-marquee .regulated-badge-broker-text {
    padding-left: 100%;
    animation: regulated-badge-broker-marquee 7s linear infinite;
}

@keyframes regulated-badge-broker-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.broker-logo-wrapper::before {
    content: '';
    position: absolute;
    inset: 8px;
    background: url('<?php echo $base_url; ?>/assets/images/logo_bg.png') center center no-repeat;
    background-size: 95%;
    opacity: 0.15;
    pointer-events: none;
}

.com-img1 {
    max-width: 88%;
    max-height: 76%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}


/* Info */
.broker-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.broker-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    transition: color 0.18s;
}

.score-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.score-val {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.score-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    align-self: center;
}

.tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 1px;
}

.info-tag {
    font-size: 11px;
    font-weight: 400;
    color: var(--slate);
    background: var(--cream);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 1px 7px;
}

.info-tag.tag-type {
    background: transparent;
    border: none;
    color: var(--navy-mid);
    font-weight: 500;
    font-size: 11px;
    padding: 0;
}

/* Rank Shields */
.rank-container { width: 30px; display: flex; justify-content: center; flex-shrink: 0; }

.rank-shield {
    width: 24px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
    font-family: 'DM Sans', sans-serif;
}

.rank-gold   { background: linear-gradient(160deg, #ECC94B, #B8892A); }
.rank-silver { background: linear-gradient(160deg, #C8D0D8, #8A96A0); }
.rank-bronze { background: linear-gradient(160deg, #D4935A, #A0632E); }

.rank-plain {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--border);
    color: var(--slate);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
}

/* ══════════════════════════════════════
   RIGHT CONTENT
══════════════════════════════════════ */
.right-column { display: flex; flex-direction: column; gap: 28px; }

/* VPS Section Header */
.section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

/* VPS CARDS */
.ea-vps-container {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ea-vps-container::-webkit-scrollbar { display: none; }

.ea-card-wrapper {
    flex: 0 0 155px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ea-card-wrapper:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.ea-card-accent {
    height: 3px;
    background: linear-gradient(90deg, var(--gold-light), #E8C97A);
}

.ea-card-inner { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; }

.ea-card-tag {
    align-self: flex-start;
    background: var(--gold-pale);
    color: var(--gold);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-family: 'DM Sans', sans-serif;
    border: 1px solid #E8D5A8;
}

.ea-card-tag.tag-ea {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.ea-card-logo {
    width: 100%;
    height: 38px;
    object-fit: contain;
    margin-bottom: 10px;
}

.ea-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
    line-height: 1.25;
}

.ea-card-specs {
    font-size: 10.5px;
    color: var(--slate);
    line-height: 1.8;
    margin-bottom: 14px;
    flex: 1;
    font-weight: 400;
}

.ea-card-specs span { 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}

.spec-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-light);
    flex-shrink: 0;
}

.ea-card-btn {
    display: block;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
    font-family: 'DM Sans', sans-serif;
    margin-top: auto;
}

.btn-free {
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
}
.btn-free:hover { background: var(--navy-mid); }

.btn-ultra {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
}
.btn-ultra:hover { background: var(--gold); color: #fff; }

.btn-pro {
    background: transparent;
    color: var(--slate);
    border: 1px solid var(--border);
}
.btn-pro:hover { background: var(--cream); color: var(--navy); }

/* Articles wrapper */
.articles-wrapper {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 24px 28px;
}

/* Divider */
.elegant-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.elegant-divider::before,
.elegant-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.divider-gem {
    width: 6px;
    height: 6px;
    background: var(--gold-light);
    transform: rotate(45deg);
    border-radius: 1px;
}

/* Responsive */
@media (max-width: 1100px) {
    .ranking-page { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .ranking-page { padding: 16px 12px; gap: 20px; }
    .broker-logo-wrapper { width: 92px; height: 50px; }
    .broker-name { font-size: 15px; }
    .score-val { font-size: 22px; }
    .ea-card-wrapper { flex: 0 0 140px; }
}

@media (max-width: 1100px) {
    .ranking-page {
        grid-template-columns: 1fr;
    }

    .rankings-sidebar {
        order: 1;
    }

    .right-column {
        order: 2;
    }

    .brokers-container {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .ranking-page {
        padding: 14px 10px;
        gap: 18px;
    }

    .sidebar-label,
    .section-title {
        font-size: 10px;
        letter-spacing: 0.16em;
    }

    .broker-item-link {
        border-radius: 10px;
    }

    .broker-contents {
        padding: 12px;
        gap: 10px;
        align-items: flex-start;
    }

    .broker-logo-wrapper {
        width: 88px;
        height: 48px;
    }

    .broker-info {
        min-width: 0;
    }

    .broker-name {
        font-size: 14px;
    }

    .score-row {
        flex-wrap: wrap;
        gap: 2px 6px;
    }

    .score-val {
        font-size: 20px;
    }

    .score-label {
        font-size: 10px;
    }

    .tags-row {
        gap: 6px;
    }

    .info-tag {
        font-size: 10px;
        padding: 1px 6px;
    }

    .rank-container {
        width: 26px;
    }

    .rank-shield {
        width: 22px;
        height: 26px;
        line-height: 26px;
        font-size: 10px;
    }

    .rank-plain {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .ea-vps-container {
        gap: 12px;
        padding-bottom: 6px;
    }

    .ea-card-wrapper {
        flex: 0 0 138px;
    }

    .articles-wrapper {
        padding: 18px 16px;
    }
}

@media (max-width: 480px) {
    .ranking-page {
        padding: 12px 8px;
        gap: 16px;
    }

    .brokers-container {
        border-radius: 10px;
    }

    .broker-contents {
        padding: 10px 10px 10px 10px;
    }

    .broker-logo-wrapper {
        width: 78px;
        height: 44px;
    }

    .broker-name {
        font-size: 13.5px;
    }

    .score-val {
        font-size: 18px;
    }

    .section-header {
        gap: 6px;
        margin-bottom: 12px;
    }

    .articles-wrapper {
        padding: 16px 14px;
    }
}
</style>

<div class="ranking-page">

    <!-- ── LEFT: BROKER RANKINGS ── -->
    <div class="rankings-sidebar">
        <p class="sidebar-label">Top Brokers</p>
        <div class="brokers-container">
            <?php
            $image_base_url = "./uploads/";

            // Fetch all brokers (no pagination) and order by score
            $sql  = "SELECT * FROM brokers ORDER BY score DESC";
            $stmt = $dbh->prepare($sql);
            $stmt->execute();
            $brokers = $stmt->fetchAll(PDO::FETCH_ASSOC);
            $rank    = 1;

            if ($brokers && count($brokers) > 0) {
                $broker_count = 0;
                foreach ($brokers as $row) {
                    $clean_logo   = ltrim($row['logo'] ?? '', '/');
                    $logo_url     = $image_base_url . $clean_logo;
                    $broker_page  = "avatrade.php?name=" . urlencode(strtolower($row['name']));
                    $badge_text   = trim((string)($row['broker_type'] ?? 'Regulated'));
                    $badge_class  = (strlen($badge_text) > 12) ? ' is-marquee' : '';

                    $current_rank = $row['rank'] ?? $rank++;
                    if ($current_rank == 1)      $rank_html = '<div class="rank-shield rank-gold">1</div>';
                    elseif ($current_rank == 2)  $rank_html = '<div class="rank-shield rank-silver">2</div>';
                    elseif ($current_rank == 3)  $rank_html = '<div class="rank-shield rank-bronze">3</div>';
                    else                         $rank_html = '<div class="rank-plain">' . $current_rank . '</div>';

                    $tags_html  = '<span class="info-tag tag-type">ECN</span>';
                    if (!empty($row['commodity']))       $tags_html .= '<span class="info-tag">Oil</span>';
                    elseif (!empty($row['currency']))    $tags_html .= '<span class="info-tag">FX</span>';
                    if (!empty($row['experience_years'])) $tags_html .= '<span class="info-tag">' . htmlspecialchars($row['experience_years']) . ' yrs</span>';

                    $hidden_style = ($broker_count >= 16) ? ' style="display: none;"' : '';
                    $hidden_class = ($broker_count >= 16) ? ' hidden-broker' : '';

                    echo '
                    <div class="broker-item' . $hidden_class . '"' . $hidden_style . '>
                        <a href="' . $broker_page . '" class="broker-item-link">
                            <div class="broker-contents">
                                <div class="broker-logo-wrapper">
                                    <span class="regulated-badge-broker' . $badge_class . '"><span class="regulated-badge-broker-text">' . htmlspecialchars($badge_text) . '</span></span>
                                    <img alt="' . htmlspecialchars($row['name']) . '" src="' . htmlspecialchars($logo_url) . '" loading="lazy" class="com-img1">
                                </div>
                                <div class="broker-info">
                                    <h2 class="broker-name">' . htmlspecialchars($row['name']) . '</h2>
                                    <div class="score-row">
                                        <span class="score-val">' . number_format($row['score'] ?? 0, 2) . '</span>
                                        <span class="score-label">Score</span>
                                    </div>
                                    <div class="tags-row">' . $tags_html . '</div>
                                </div>
                                <div class="rank-container">' . $rank_html . '</div>
                            </div>
                        </a>
                    </div>';
                    $broker_count++;
                }
            } else {
                echo '<p style="padding:20px;color:var(--muted);font-size:14px;">No brokers found.</p>';
            }
            ?>
        </div>
    </div>

    <!-- ── RIGHT: VPS + ARTICLES ── -->
    <div class="right-column">

        <!-- VPS Section -->
        <div>
            <p class="section-title">EA &amp; VPS Hosting</p>
            <div class="elegant-divider"><div class="divider-gem"></div></div>

            <div class="ea-vps-container">
                <?php
                $stmt = $dbh->prepare("SELECT * FROM brokers LIMIT 5");
                $stmt->execute();
                $vps_brokers = $stmt->fetchAll(PDO::FETCH_ASSOC);
                $index = 0;

                foreach ($vps_brokers as $broker):
                    if ($index === 0) {
                        $tag      = 'EA VPS';
                        $tagClass = 'tag-ea';
                        $btnLabel = 'Open for Free';
                        $btnClass = 'btn-free';
                    } elseif ($index % 2 === 0) {
                        $tag      = 'Free';
                        $tagClass = '';
                        $btnLabel = 'VPS Ultra';
                        $btnClass = 'btn-ultra';
                    } else {
                        $tag      = 'Free';
                        $tagClass = '';
                        $btnLabel = 'VPS Pro L1';
                        $btnClass = 'btn-pro';
                    }

                    $clean_vps_logo = ltrim($broker['logo'] ?? '', '/');
                    $logoPath = './uploads/' . htmlspecialchars($clean_vps_logo);
                ?>
                    <div class="ea-card-wrapper">
                        <div class="ea-card-accent"></div>
                        <div class="ea-card-inner">
                            <span class="ea-card-tag <?= $tagClass ?>"><?= $tag ?></span>
                            <img src="<?= $logoPath ?>" alt="<?= htmlspecialchars($broker['name']) ?>" class="ea-card-logo">
                            <h3 class="ea-card-title"><?= htmlspecialchars($broker['name']) ?></h3>
                            <div class="ea-card-specs">
                                <span><span class="spec-dot"></span><?= htmlspecialchars($broker['software'] ?? '1') ?> CPU</span>
                                <span><span class="spec-dot"></span><?= htmlspecialchars($broker['license'] ?? '2 GB') ?> RAM</span>
                                <span><span class="spec-dot"></span><?= htmlspecialchars($broker['average_transaction'] ?? '50 GB') ?> SSD</span>
                                <span><span class="spec-dot"></span>1 Mbps ADSL</span>
                            </div>
                            <a href="avatrade.php?name=<?= urlencode(strtolower($broker['name'])) ?>" target="_blank" class="ea-card-btn <?= $btnClass ?>">
                                <?= $btnLabel ?>
                            </a>
                        </div>
                    </div>
                <?php
                    $index++;
                endforeach;
                ?>
            </div>
        </div>

        <!-- Articles -->
        <div class="articles-wrapper">
            <p class="section-title" style="margin-bottom:16px;">Latest Insights</p>
            <?php include "articles.php"; ?>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let hiddenBrokers = document.querySelectorAll('.hidden-broker');
    let currentIndex = 0;
    const batchSize = 12;

    function revealMoreBrokers() {
        if (currentIndex >= hiddenBrokers.length) return;
        
        const scrollPosition = window.innerHeight + window.scrollY;
        const documentHeight = document.body.offsetHeight;
        
        // When user scrolls near the bottom
        if (scrollPosition >= documentHeight - 600) {
            let limit = Math.min(currentIndex + batchSize, hiddenBrokers.length);
            for (let i = currentIndex; i < limit; i++) {
                hiddenBrokers[i].style.display = '';
            }
            currentIndex = limit;
        }
    }

    window.addEventListener('scroll', revealMoreBrokers);
    // Call once in case they are already at the bottom
    revealMoreBrokers();
});
</script>