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

<style>
    :root {
        --shared-hero-bg: linear-gradient(120deg, rgba(4, 23, 43, 0.72), rgba(11, 58, 96, 0.48)),
            url('<?php echo $base_url; ?>/assets/images/herobg.jpg'),
            url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1600&q=80');
    }

/* --- Broker Slider Styling --- */
    .broker-slider .logo-item {
        position: relative;
    }

    .broker-slider .logo-overlay-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #efca30;
    }

    .broker-slider .logo-overlay-wrapper::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('<?php echo $base_url; ?>/assets/images/logo_bg.png') center center no-repeat;
        background-size: contain;
        opacity: 0.2;
        pointer-events: none;
    }

    .broker-slider .logo-foreground {
        position: relative;
        z-index: 1;
    }

    /* Ad Badge: Ultra-Premium Glowing Aura */
    .broker-slider .ad-badge {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 3;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 34px;
        max-width: max-content;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        background: linear-gradient(135deg, #ff8a00 0%, #ff4d00 100%);
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.6px;
        line-height: 1;
        box-shadow: 0 8px 16px rgba(255, 92, 0, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.7);
        text-transform: uppercase;
        white-space: nowrap;
        pointer-events: none;
        animation: adBadgeGlow 2.2s ease-in-out infinite;
    }

    .broker-slider .broker-item-link:hover .ad-badge {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.15), 0 12px 22px rgba(255, 92, 0, 0.35);
        transition: all 0.22s ease;
    }

    @keyframes adBadgeGlow {
        0%, 100% {
            box-shadow: 0 8px 16px rgba(255, 92, 0, 0.25);
        }
        50% {
            box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14), 0 10px 18px rgba(255, 92, 0, 0.34);
        }
    }

    @media (max-width: 576px) {
        .broker-slider .ad-badge {
            top: 8px;
            right: 8px;
            min-width: 30px;
            height: 20px;
            font-size: 10px;
            padding: 0 7px;
        }
    }

    .broker-slider {
        position: relative;
        border-radius: 0;
        overflow: hidden;
        background-image: var(--shared-hero-bg);
        background-size: cover;
        background-position: center;
    }

    /* Container: True Frosty Glassmorphism */
    .broker-slider .container {
        position: relative;
        z-index: 2;
        padding: 30px;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 28px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        overflow: hidden;
        margin-top: 20px;
    }

    .broker-slider .container::before {
        display: none;
    }

    .broker-slider .logo-item.card {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
    }

    /* Elegant Metallic Gold Title */
    .broker-slider .main-title {
        background: linear-gradient(135deg, #ffe082 0%, #c39a37 50%, #ae862d 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        max-width: 100%;
        text-align: center;
        font-size: clamp(2rem, 3.8vw, 4rem);
        font-weight: 800;
        font-style: italic;
        letter-spacing: -0.03em;
        text-shadow: none;
        margin-bottom: 10px;
    }

    .broker-slider .stats {
        gap: 18px;
        justify-content: center;
        align-items: center;
        margin-bottom: 18px;
    }

    .broker-slider .stat-item {
        flex: 0 0 auto;
        display: flex;
        align-items: baseline;
        gap: 10px;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .broker-slider .number,
    .broker-slider .label,
    .broker-slider .search-icon {
        color: #9aa4b0;
    }

    .broker-slider .number {
        color: #c39a37;
        font-size: 1.5rem;
        font-weight: 600;
    }

    /* Premium Search Bar */
    .broker-slider .search-box {
        width: min(100%, 820px);
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(195, 154, 55, 0.4);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        height: 64px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: border-color 0.3s ease;
    }

    .broker-slider .search-box:focus-within {
        border-color: rgba(195, 154, 55, 0.9);
    }

    .broker-slider .search-container {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .broker-slider .search-input {
        color: #ffffff;
        font-size: 1.05rem;
        background: transparent;
        width: 100%;
        padding-left: 20px;
        border: none;
        outline: none;
    }

    .broker-slider .search-input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }

    .broker-slider .search-button {
        background: linear-gradient(135deg, #c39a37 0%, #ae862d 100%);
        color: #ffffff;
        border: none;
        border-radius: 0 14px 14px 0;
        height: 100%;
        min-width: 120px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-left: auto;
        transition: all 0.3s ease;
    }

    .broker-slider .search-button:hover {
        background: linear-gradient(135deg, #ae862d 0%, #8a6620 100%);
        box-shadow: 0 0 15px rgba(195, 154, 55, 0.4);
    }

    @media (max-width: 768px) {
        .broker-slider .container {
            padding: 18px;
            border-radius: 20px;
        }

        .broker-slider .stats {
            gap: 12px;
            flex-wrap: wrap;
        }

        .broker-slider .search-box {
            height: auto;
            border-width: 1px;
            width: 100%;
            border-radius: 12px;
        }

        .broker-slider .search-button {
            min-width: 92px;
            border-radius: 0 10px 10px 0;
        }
    }


    /* =======================================================
       NEW ULTRA-PREMIUM GLASSMORPHISM BROKER LIST
       ======================================================= */
    
    .broker-list {
        padding-top: 25px;
        padding-bottom: 25px;
        background: transparent;
    }

    /* Container: Beautiful Glass Card */
    .broker-list .container {
        background: #092036!important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 20px;
        padding: 8px 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    /* Modern horizontal scroller with a hidden/sleek scrollbar */
    .broker-list .broker-links {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 5px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(195, 154, 55, 0.3) transparent;
    }

    /* Scrollbar Style for Chrome/Safari/Webkit */
    .broker-list .broker-links::-webkit-scrollbar {
        height: 3px;
    }
    .broker-list .broker-links::-webkit-scrollbar-track {
        background: transparent;
    }
    .broker-list .broker-links::-webkit-scrollbar-thumb {
        background: rgba(195, 154, 55, 0.3);
        border-radius: 10px;
    }

    /* Ultra-Premium Glass Buttons */
    .broker-list .btn {
        font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(0, 0, 0, 0.85);
        background: #e5c635;
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        padding: 12px 24px;
        position: relative;
        overflow: hidden;
        z-index: 1;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    }

    /* No old rigid borders */
    .broker-list .btn:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Futuristic Animated Gradient Background on Hover */
    .broker-list .btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(195, 154, 55, 0.8) 0%, rgba(174, 134, 45, 0.9) 100%);
        z-index: -1;
        opacity: 0;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    }

    /* Shiny Light Glare Sweep on Hover */
    .broker-list .btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        );
        transform: skewX(-20deg);
        z-index: 2;
        transition: none;
    }

    /* Interactive Hover States */
    .broker-list .btn:hover {
        color: #ffffff;
        border-color: rgba(195, 154, 55, 0.5);
        box-shadow: 0 8px 24px rgba(195, 154, 55, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
        transform: translateY(-3px);
    }

    .broker-list .btn:hover::before {
        opacity: 1;
        transform: translateY(0);
    }

    .broker-list .btn:hover::after {
        left: 150%;
        transition: all 0.75s ease-in-out;
    }

    /* Active/Pressed State */
    .broker-list .btn:active {
        transform: translateY(-1px) scale(0.98);
    }

    .broker-list .separator {
        display: none;
    }

    /* Mobile Adaptability */
    @media (max-width: 768px) {
        .broker-list .container {
            border-radius: 16px;
            padding: 6px 10px;
        }

        .broker-list .btn {
            font-size: 11px;
            padding: 10px 18px;
            letter-spacing: 0.08em;
            border-radius: 8px;
        }
    }
    .home-down.home-down-v2 {
        position: relative;
        padding: 72px 0;
        /* background: linear-gradient(140deg, #f7f8fb 0%, #f0f2f7 100%); */
        overflow: hidden;
    }

    .home-down.home-down-v2::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -140px;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(243, 197, 41, 0.22) 0%, rgba(243, 197, 41, 0) 68%);
        pointer-events: none;
    }

    .home-down-v2 .container {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(320px, 1.05fr) minmax(280px, 0.95fr);
        align-items: center;
        gap: 30px;
    }

    .home-down-v2 .down-l {
        max-width: 620px;
    }

    .home-down-v2 .text-1 {
        margin: 0 0 8px;
        font-size: clamp(1.85rem, 3.8vw, 3.2rem);
        font-weight: 900;
        line-height: 1.1;
        color: #1c2430;
    }

    .home-down-v2 .text-2 {
        margin: 0 0 10px;
        font-size: clamp(1.9rem, 4.1vw, 3.5rem);
        font-weight: 900;
        line-height: 1.05;
        color: #b8860b;
    }

    .home-down-v2 .text-3 {
        margin: 0;
        font-size: clamp(1rem, 1.4vw, 1.4rem);
        color: #505a68;
        font-weight: 500;
    }

    .home-down-v2 .app-highlight {
        display: inline-flex;
        align-items: center;
        margin-top: 22px;
        padding: 14px 18px;
        border-radius: 12px;
        background: linear-gradient(140deg, #f8dc5d 0%, #f3c529 100%);
        color: #1f2732;
        font-size: 1.05rem;
        font-weight: 700;
        box-shadow: 0 14px 28px rgba(212, 165, 31, 0.24);
    }

    .home-down-v2 .download-grid {
        margin-top: 18px;
        display: grid;
        grid-template-columns: repeat(2, minmax(180px, 1fr));
        gap: 12px;
    }

    .home-down-v2 .store-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 12px;
        text-decoration: none;
        background: #ffffff;
        border: 1px solid #dfe4ed;
        color: #2b3441;
        box-shadow: 0 10px 22px rgba(19, 33, 58, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .home-down-v2 .store-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 28px rgba(19, 33, 58, 0.12);
    }

    .home-down-v2 .store-btn i:first-child {
        font-size: 1.5rem;
        width: 24px;
        text-align: center;
        color: #2c3746;
    }

    .home-down-v2 .store-btn i:last-child {
        margin-left: auto;
        color: #687286;
        font-size: 0.95rem;
    }

    .home-down-v2 .store-btn span {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .home-down-v2 .store-btn small {
        font-size: 0.72rem;
        color: #778195;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .home-down-v2 .store-btn strong {
        font-size: 1rem;
        font-weight: 700;
        color: #212935;
    }

    .home-down-v2 .social-row {
        margin-top: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .home-down-v2 .social-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 1px solid #d6dce7;
        color: #283345;
        text-decoration: none;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .home-down-v2 .social-icon:hover {
        transform: translateY(-2px);
        color: #b8860b;
    }

    .home-down-v2 .down-r {
        position: relative;
        min-height: 520px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home-down-v2 .down-r::before {
        content: "";
        position: absolute;
        width: 82%;
        max-width: 400px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
        top: 56%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .home-down-v2 .down-r img {
        position: relative;
        z-index: 2;
        width: min(96%, 480px);
        height: auto;
        max-height: 560px;
        object-fit: contain;
        filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.18));
        margin-bottom: -50px;
    }

    @media (max-width: 991px) {
        .home-down.home-down-v2 {
            padding: 52px 0 46px;
        }

        .home-down-v2 .container {
            grid-template-columns: 1fr;
            gap: 26px;
        }

        .home-down-v2 .down-r {
            min-height: 360px;
        }
    }

    @media (max-width: 640px) {
        .home-down-v2 .download-grid {
            grid-template-columns: 1fr;
        }

        .home-down-v2 .text-1,
        .home-down-v2 .text-2 {
            letter-spacing: -0.02em;
        }
    }

    .broker-slider .search-box {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
    }

    .broker-slider .search-icon {
        flex: 0 0 auto;
        margin-left: 4px;
        font-size: 1rem;
    }

    .broker-slider .search-input {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 0;
    }

    .broker-slider .search-button {
        flex: 0 0 auto;
    }

    .broker-slider .swiper-slide {
        height: auto;
    }

    .broker-slider .logo-item.card,
    .broker-slider .broker-item-link {
        height: 100%;
    }

    .broker-slider .logo-foreground {
        width: 100%;
        max-width: 180px;
        height: auto;
    }

    .broker-list .btn.active {
        color: #ffffff;
        background: linear-gradient(135deg, #9a6b12 0%, #6f4c0d 100%);
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 10px 20px rgba(111, 76, 13, 0.24);
    }

    .ea-list-l {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 18px;
        overflow: visible;
        width: min(100%, 1400px);
        padding: 14px 0 20px;
    }

    .ea-card {
        width: auto;
        max-width: none;
    }

    .ea-card-footer {
        align-items: center;
    }

    .ea-btn {
        min-height: 42px;
    }

    .side-rankings-section,
    .broker-slider,
    .broker-list,
    .home-down.home-down-v2 {
        width: 100%;
    }

    @media (max-width: 991px) {
        .broker-slider .stats {
            flex-direction: column;
            align-items: stretch;
        }

        .broker-slider .search-box {
            width: 100%;
        }

        .ea-list-l {
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
    }

    @media (max-width: 768px) {
        .broker-slider .container,
        .broker-list .container,
        .home-down-v2 .container,
        .side-rankings-section .container {
            padding: 16px;
        }

        .broker-slider .search-box {
            flex-wrap: wrap;
            height: auto;
            border-radius: 14px;
        }

        .broker-slider .search-input {
            order: 2;
            width: 100%;
            padding: 10px 0 6px;
        }

        .broker-slider .search-button {
            order: 3;
            width: 100%;
            min-width: 0;
            border-radius: 12px;
            height: 44px;
        }

        .broker-slider .stats {
            gap: 10px;
        }

        .rankings-header {
            gap: 12px;
            align-items: flex-start;
        }

        .header-icons {
            flex-wrap: wrap;
        }

        .ea-list-l {
            grid-template-columns: 1fr;
            gap: 12px;
            width: 100%;
        }

        .ea-card {
            padding: 16px;
        }

        .ea-card-footer {
            align-items: flex-start;
        }

        .ea-btn {
            width: 100%;
            justify-content: center;
        }

        .home-down-v2 .down-r {
            min-height: 320px;
        }

        .home-down-v2 .down-r img {
            width: min(100%, 380px);
            margin-bottom: -24px;
        }
    }

    @media (max-width: 480px) {
        .broker-slider .main-title {
            font-size: clamp(1.7rem, 8vw, 2.4rem);
        }

        .broker-slider .stat-item {
            gap: 8px;
            flex-wrap: wrap;
        }

        .ea-list-l {
            padding-top: 10px;
        }

        .ea-card-header {
            gap: 8px;
        }

        .ea-title {
            font-size: 17px;
        }

        .ea-price {
            font-size: 16px;
        }

        .home-down-v2 .download-grid {
            grid-template-columns: 1fr;
        }

        .home-down-v2 .store-btn {
            width: 100%;
        }
    }
</style>

<section class="broker-slider">
    <div class="container">
        <div class="swiper brokerSwiper">
            <div class="swiper-wrapper">
                <?php
                try {
                    $stmt = $dbh->prepare("SELECT name, logo FROM brokers ORDER BY `name` ASC");
                    $stmt->execute();
                    $brokers = $stmt->fetchAll(PDO::FETCH_ASSOC);

                    if ($brokers) {
                        foreach ($brokers as $row) {
                            $brokerName = urlencode($row['name']);
                            $filename = "avatrade.php?name={$brokerName}";
                ?>
                            <div class="swiper-slide">
                                <div class="logo-item card">
                                    <a href="<?= htmlspecialchars($filename) ?>" class="broker-item-link">
                                        <div class="logo-overlay-wrapper">
                                            <img src="./uploads/<?= htmlspecialchars($row['logo']) ?>" alt="<?= htmlspecialchars($row['name']) ?> logo" class="logo-foreground" loading="lazy" decoding="async">
                                        </div>
                                        <span class="ad-badge">AD</span>
                                    </a>
                                </div>
                            </div>
                <?php
                        }
                    } else {
                        echo "<p>No brokers found.</p>";
                    }
                } catch (PDOException $e) {
                    echo "Database error: " . htmlspecialchars($e->getMessage());
                }
                ?>
            </div>
        </div>
    </div>
    <br>
    <div class="container">
        <h1 class="main-title">Global Broker Regulation Enquiry App!</h1>
        <div class="stats">
            <div class="stat-item">
                <span id="brokerCount" class="number red">46520</span>
                <span class="label">brokers enlisted.</span>
            </div>
            <div class="stat-item">
                <span id="regulatorCount" class="number red">+72</span>
                <span class="label">regulators globally</span>
            </div>
        </div>

        <form action="avatrade.php" method="GET" class="search-container">
            <div class="search-box">
                <i class="fas fa-search search-icon"></i>
                <input type="text" name="name" placeholder="Please enter the name of the broker for inquiries" class="search-input" required>
                <button type="submit" class="search-button">Search</button>
            </div>
        </form>
    </div>
    <br>
</section>

<section class="side-rankings-section">
<section class="broker-list">
    <div class="container">
        <div class="broker-links">
            <a href="avatrade.php?name=starttrader" class="btn">Startrader</a>
            <a href="avatrade.php?name=xm" class="btn">XM</a>
            <a href="avatrade.php?name=avatrade" class="btn">AvaTrade</a>
            <a href="avatrade.php?name=fxcm" class="btn">FXCM</a>
            <a href="avatrade.php?name=exness" class="btn">Exness</a>
            <a href="avatrade.php?name=botbro" class="btn">BotBro</a>
            <a href="avatrade.php?name=austin pips" class="btn">Austin PIPs</a>
        </div>
    </div>
</section>
    <div class="container">
        <div class="card">
            <div class="rankings-header">
                <h1 class="rankings-title">
                    <i class="fas fa-trophy"></i> Rankings
                </h1>
                <div class="header-icons">
                    <i class="fas fa-trophy active" data-section="rankings"></i>
                    <i class="fas fa-ad" data-section="ads"></i>
                    <i class="fas fa-fire" data-section="trending"></i>
                    <i class="fas fa-envelope" data-section="messages"></i>
                </div>
            </div>

            <?php include "includes/demo.php"; ?>
        </div>
    </div>

    <!-- <div id="ads" class="content-section">
        <div class="rankings-list">
            <div class="broker-item">
                <a href="avatrade.php?name=Avatrade" class="broker-item-link">
                    <div class="broker-contents">
                        <div class="broker-logo-wrapper">
                            <span class="regulated-badge">Regulated</span>
                            <img alt="AvaTrade" src="./assets/images/avatrade-rank.png" loading="lazy" class="com-img" style="height:100%;">
                        </div>
                        <div class="broker-info">
                            <h2 class="broker-name">AvaTrade</h2>
                            <div class="score">9.49</div>
                            <span class="broker-years">15-20 years</span>
                        </div>
                        <span class="rank-number">1</span>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div id="trending" class="content-section">
        <div class="rankings-list">
            <div class="broker-item">
                <a href="xm.php" class="broker-item-link">
                    <div class="broker-contents">
                        <div class="broker-logo-wrapper">
                            <span class="regulated-badge">Regulated</span>
                            <img alt="XM" src="./assets/images/xm-rank.png" loading="lazy" class="com-img" style="height:100%;">
                        </div>
                        <div class="broker-info">
                            <h2 class="broker-name">XM</h2>
                            <div class="score">9.03</div>
                            <span class="broker-years">Oil • 10-15 years</span>
                        </div>
                        <span class="rank-number">4</span>
                    </div>
                </a>
            </div>
        </div>
    </div> -->

    <div id="games" class="content-section">
        <div class="rankings-list">
            <h3>Trading Games</h3>
            <p>Practice trading with simulation games</p>
        </div>
    </div>
</section>

<?php include "includes/tear.php"; ?>
<?php include "includes/protection.php"; ?>
<?php include "includes/survey.php"; ?>
<?php include "includes/margin-ranking.php"; ?>

<?php
$filter = $_GET['filter'] ?? null;
$categories = ['Tools', 'Martin', 'Shock', 'Trend', 'Grid', 'Comprehensive'];

if ($filter && in_array($filter, $categories)) {
    $stmt = $dbh->prepare("SELECT * FROM ea_tools WHERE category = :filter ORDER BY id DESC");
    $stmt->execute(['filter' => $filter]);
} else {
    $filter = null;
    $stmt = $dbh->query("SELECT * FROM ea_tools ORDER BY id DESC");
}
$eaItems = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<section class="broker-list" style="margin-top: 0; padding-top: 0;">
    <div class="container">
        <div class="broker-links">
            <?php foreach ($categories as $cat):
                $active = ($cat === $filter) ? 'active' : '';
            ?>
                <a href="#" onclick="filterEA('<?= htmlspecialchars($cat) ?>'); return false;" class="btn <?= $active ?>" data-category="<?= htmlspecialchars($cat) ?>"><?= htmlspecialchars($cat) ?></a>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<div class="ea-list-l" id="ea-list">
    <?php foreach ($eaItems as $ea):
        $incomeBadge = (is_numeric($ea['income_last_year']) && $ea['income_last_year'] > 10000) ? '<span class="income-badge">🔥 High Performer</span>' : '';
    ?>
        <div class="ea-card">
            <div class="ea-card-header">
                <span class="ea-badge"><?= htmlspecialchars($ea['category']) ?></span>
                <span class="ea-title"><?= htmlspecialchars($ea['title']) ?></span>
            </div>
            <div class="ea-card-income">
                Income in last year <span class="ea-income"><?= htmlspecialchars($ea['income_last_year'] ?: 'N/A') ?></span>
                <?= $incomeBadge ?>
            </div>
            <div class="ea-card-desc"><?= htmlspecialchars($ea['description']) ?></div>
            <div class="ea-card-footer">
                <div class="ea-icon">
                    <img src="assets/images/trade_icon.png" alt="Trade icon" class="ea-icon-img" loading="lazy" decoding="async">
                </div>
                <span class="ea-price">USD <?= number_format($ea['price'], 2) ?></span>
                <?php if ($ea['old_price']): ?>
                    <span class="ea-old-price">USD <?= number_format($ea['old_price'], 2) ?></span>
                <?php endif; ?>
                <button type="button" class="ea-btn"><i class="fas fa-shopping-cart"></i> Purchase</button>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<?php include "includes/sentiments.php"; ?>
<?php include "includes/expo_section.php"; ?>
<br>
<?php include "includes/spread_comparison.php"; ?>

<section class="home-down home-down-v2">
    <div class="container">
        <div class="down-l">
            <p class="text-1">To view more</p>
            <p class="text-2">Download the Trader Safety App</p>
            <div class="mb-3">
                <p class="text-3">Uncover hidden risks. Unlock premium benefits.</p>
            </div>
            <div class="app-highlight">Welcome to Trader Safety</div>
            <div class="download-grid">
                <a href="#" target="_blank" class="store-btn">
                    <i class="fab fa-apple" aria-hidden="true"></i>
                    <span>
                        <small>Download on the</small>
                        <strong>App Store</strong>
                    </span>
                    <i class="fas fa-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" target="_blank" class="store-btn">
                    <i class="fab fa-google-play" aria-hidden="true"></i>
                    <span>
                        <small>Download on the</small>
                        <strong>Google Play</strong>
                    </span>
                    <i class="fas fa-arrow-down" aria-hidden="true"></i>
                </a>
            </div>
            <div class="social-row">
                <a href="#" target="_blank" class="social-icon facebook"><i class="fab fa-facebook-square"></i></a>
                <a href="#" target="_blank" class="social-icon"><i class="fab fa-x-twitter"></i></a>
                <a href="#" target="_blank" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
        <div class="down-r" style="margin-bottom: -28px;">
            <img src="./uploads/mobile.png" alt="Trader Safety app preview" loading="lazy" decoding="async">
        </div>
    </div>
</section>

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

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script src="assets/js/script.js"></script>

</body>