@extends('layouts.user')

@section('title')
Bidding Marketplace
@endsection

@section('content')

@php
    // NEXUS Session State
    // When engine is inactive, all values stay false/null and the session hero is hidden.
    $nexusActive = \App\Nexus\Engine\NexusConfig::isNexusActive();
    $sessionOpen = false;
    $sessionEndTime = null;
    $nextSessionTime = null;
    $activeSessionNumber = null;
    $nextSessionNumber = null;
    $activeSessionName = null;
    $nextSessionName = null;

    $sessionNames = [1 => 'Dawn', 2 => 'Midday', 3 => 'Dusk'];
    $sessionTimes = [
        1 => (int) \App\Nexus\Engine\NexusConfig::get('session_1_start_utc'),
        2 => (int) \App\Nexus\Engine\NexusConfig::get('session_2_start_utc'),
        3 => (int) \App\Nexus\Engine\NexusConfig::get('session_3_start_utc'),
    ];

    if ($nexusActive) {
        $sc = new \App\Nexus\Engine\SessionController();
        $activeSession = $sc->getActiveSession();
        $sessionOpen = ($activeSession !== null);

        if ($sessionOpen) {
            $activeSessionNumber = $activeSession->session_number;
            $activeSessionName = $sessionNames[$activeSessionNumber] ?? 'Session ' . $activeSessionNumber;
            $durationMinutes = \App\Nexus\Engine\NexusConfig::getInt('session_duration_minutes', 60);
            $sessionEndTime = \Carbon\Carbon::parse($activeSession->actual_start)
                ->addMinutes($durationMinutes)
                ->toIso8601String();
        } else {
            $nextSessionTime = $sc->getNextSessionTime()->toIso8601String();
            // Determine which session is next based on current UTC hour
            $currentUtcHour = now()->utc()->hour;
            foreach ($sessionTimes as $num => $hour) {
                if ($hour > $currentUtcHour) {
                    $nextSessionNumber = $num;
                    break;
                }
            }
            if (!$nextSessionNumber) $nextSessionNumber = 1; // wrap to tomorrow
            $nextSessionName = $sessionNames[$nextSessionNumber] ?? 'Session ' . $nextSessionNumber;
        }
    }

    // Brand-color mapping for market logo backgrounds
    // Keyed by lowercase market name. Dark backgrounds for logos with white text.
    $brandColors = [
        'slick deals'   => 'linear-gradient(150deg,#e8f4fd 0%,#dbeafe 100%)',
        'brickseek'     => 'linear-gradient(150deg,#dbeafe 0%,#e0e7ff 100%)',
        'alibaba'       => 'linear-gradient(150deg,#fff7ed 0%,#ffedd5 100%)',
        'hotukdeals'    => 'linear-gradient(150deg,#fef9c3 0%,#fef3c7 100%)',
        'latestdeals'   => 'linear-gradient(150deg,#1e293b 0%,#0f172a 100%)',
        'target'        => 'linear-gradient(150deg,#fef2f2 0%,#fee2e2 100%)',
        'aliexpress'    => 'linear-gradient(150deg,#fef2f2 0%,#ffe4e6 100%)',
        'bestbuy'       => 'linear-gradient(150deg,#172554 0%,#1e3a5f 100%)',
        'rakuten'       => 'linear-gradient(150deg,#fef2f2 0%,#fce7f3 100%)',
        'mercado libre'  => 'linear-gradient(150deg,#fef9c3 0%,#fef3c7 100%)',
        'newegg'        => 'linear-gradient(150deg,#f5f5f4 0%,#e7e5e4 100%)',
        'etsy'          => 'linear-gradient(150deg,#fff7ed 0%,#ffedd5 100%)',
        'bonanza'       => 'linear-gradient(150deg,#ecfdf5 0%,#d1fae5 100%)',
        'amazon'        => 'linear-gradient(150deg,#fff7ed 0%,#ffedd5 100%)',
        'ebay'          => 'linear-gradient(150deg,#f5f5f4 0%,#e7e5e4 100%)',
        'shopify'       => 'linear-gradient(150deg,#ecfdf5 0%,#d1fae5 100%)',
        'temu'          => 'linear-gradient(150deg,#fff7ed 0%,#ffedd5 100%)',
        'walmart'       => 'linear-gradient(150deg,#dbeafe 0%,#eff6ff 100%)',
        'affiliate vendor' => 'linear-gradient(150deg,#f5f5f4 0%,#e7e5e4 100%)',
    ];
    $defaultBg = 'linear-gradient(150deg,#f5f5f4 0%,#e7e5e4 100%)';

    // Market categories for display under name
    $marketCategories = [
        'slick deals'   => 'Deals',
        'brickseek'     => 'Retail',
        'alibaba'       => 'Wholesale',
        'hotukdeals'    => 'UK Deals',
        'latestdeals'   => 'Bargains',
        'target'        => 'Retail',
        'aliexpress'    => 'Global',
        'bestbuy'       => 'Electronics',
        'rakuten'       => 'Cashback',
        'mercado libre'  => 'LATAM',
        'newegg'        => 'Tech',
        'etsy'          => 'Handmade',
        'bonanza'       => 'Marketplace',
        'amazon'        => 'Global',
        'ebay'          => 'Auction',
        'shopify'       => 'Direct',
        'temu'          => 'Value',
        'walmart'       => 'Retail',
        'affiliate vendor' => 'Affiliate',
    ];
@endphp

<style>
    /* bid-markets scoped styles */
    :root {
        --bm-orange: #f97316;
        --bm-orange-soft: #fff7ed;
        --bm-orange-dim: rgba(249, 115, 22, 0.06);
        --bm-green: #22c55e;
        --bm-green-dim: rgba(34, 197, 94, 0.06);
        --bm-bg: #f7f7f5;
        --bm-card: #ffffff;
        --bm-text: #0a0a0a;
        --bm-text-2: #333;
        --bm-text-3: #666;
        --bm-muted: #999;
        --bm-border: rgba(0,0,0,0.06);
        --bm-border-2: rgba(0,0,0,0.10);
        --bm-radius: 16px;
        --bm-radius-sm: 12px;
        --bm-radius-xs: 8px;
        --bm-shadow-sm: 0 1px 2px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.03);
        --bm-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.06);
        --bm-shadow-lg: 0 8px 16px rgba(0,0,0,0.06), 0 20px 56px rgba(0,0,0,0.1);
        --bm-ease: cubic-bezier(0.16, 1, 0.3, 1);
        --bm-ease-out: cubic-bezier(0, 0, 0.2, 1);
    }

    .dark {
        --bm-bg: #0f172a;
        --bm-card: #1e293b;
        --bm-text: #f1f5f9;
        --bm-text-2: #cbd5e1;
        --bm-text-3: #94a3b8;
        --bm-muted: #64748b;
        --bm-border: rgba(255,255,255,0.06);
        --bm-border-2: rgba(255,255,255,0.10);
        --bm-shadow-sm: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15);
        --bm-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 8px 28px rgba(0,0,0,0.2);
        --bm-shadow-lg: 0 8px 16px rgba(0,0,0,0.2), 0 20px 56px rgba(0,0,0,0.3);
    }

    .bm-wrap {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    /* Hero header */
    .bm-hero {
        margin-top: 1.5rem;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        transition: background 0.4s, border-color 0.4s;
    }
    .bm-hero.is-open {
        background: linear-gradient(155deg, #ecfdf5 0%, #dcfce7 35%, #f0fdf4 70%, #ecfdf5 100%);
        border: 1.5px solid rgba(34, 197, 94, 0.18);
    }
    .bm-hero.is-closed {
        background: linear-gradient(155deg, #fff7ed 0%, #ffedd5 35%, #fffbeb 70%, #fff7ed 100%);
        border: 1.5px solid rgba(249, 115, 22, 0.15);
    }
    .dark .bm-hero.is-open {
        background: linear-gradient(155deg, #052e16 0%, #064e3b 35%, #022c22 100%);
        border-color: rgba(34, 197, 94, 0.25);
    }
    .dark .bm-hero.is-closed {
        background: linear-gradient(155deg, #431407 0%, #7c2d12 35%, #451a03 100%);
        border-color: rgba(249, 115, 22, 0.25);
    }
    .bm-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.4;
        background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.8) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.6) 0%, transparent 40%);
    }
    .dark .bm-hero::before { opacity: 0.15; }

    .bm-hero-top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 2rem 0;
    }
    .bm-bc { display: flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 600; }
    .bm-bc a { color: var(--bm-muted); text-decoration: none; transition: color 0.15s; }
    .bm-bc a:hover { color: var(--bm-orange); }
    .bm-bc .cur { color: var(--bm-orange); }

    .bm-hero-main {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 2rem 0.75rem;
        gap: 2rem;
    }
    .bm-hero-left { display: flex; align-items: center; gap: 1rem; }

    .bm-pulse {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        transition: background 0.3s;
    }
    .is-open .bm-pulse { background: rgba(34, 197, 94, 0.10); }
    .is-closed .bm-pulse { background: rgba(249, 115, 22, 0.08); }
    .is-open .bm-pulse::after {
        content: '';
        position: absolute;
        inset: -5px;
        border-radius: 50%;
        border: 2px solid rgba(34, 197, 94, 0.2);
        animation: bm-pulse-ring 2s ease-out infinite;
    }
    @keyframes bm-pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }
    .bm-dot { width: 16px; height: 16px; border-radius: 50%; transition: all 0.3s; }
    .is-open .bm-dot { background: var(--bm-green); box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); }
    .is-closed .bm-dot { background: var(--bm-orange); box-shadow: 0 0 14px rgba(249, 115, 22, 0.35); }

    .bm-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
    .is-open .bm-label { color: #15803d; }
    .is-closed .bm-label { color: #c2410c; }
    .dark .is-open .bm-label { color: #4ade80; }
    .dark .is-closed .bm-label { color: #fb923c; }

    .bm-name { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.04em; color: var(--bm-text); line-height: 1; margin-top: 0.15rem; }
    .bm-name .dim { font-weight: 400; opacity: 0.3; }

    .bm-sub { font-size: 0.82rem; font-weight: 500; color: var(--bm-text-3); margin-top: 0.2rem; }

    .bm-right { text-align: right; flex-shrink: 0; }
    .bm-countdown {
        font-size: 3.75rem;
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        transition: color 0.3s;
    }
    .is-open .bm-countdown { color: #16a34a; }
    .is-closed .bm-countdown { color: var(--bm-orange); }
    .dark .is-open .bm-countdown { color: #4ade80; }
    .bm-countdown-label { font-size: 0.7rem; font-weight: 600; color: var(--bm-text-3); margin-top: 0.3rem; }

    /* Schedule pills */
    .bm-schedule {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 2rem 1.25rem;
        flex-wrap: wrap;
    }
    .bm-pill {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.38rem 0.75rem;
        border-radius: 99px;
        font-size: 0.68rem;
        font-weight: 600;
        border: 1px solid rgba(0,0,0,0.05);
        background: rgba(255,255,255,0.55);
        color: var(--bm-text-3);
        backdrop-filter: blur(4px);
        transition: all 0.2s;
    }
    .dark .bm-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); }
    .bm-pill.pill-active { border-color: rgba(34, 197, 94, 0.3); background: rgba(255,255,255,0.8); color: #15803d; font-weight: 700; }
    .bm-pill.pill-next { border-color: rgba(249, 115, 22, 0.25); background: rgba(255,255,255,0.8); color: #c2410c; font-weight: 700; }
    .dark .bm-pill.pill-active { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
    .dark .bm-pill.pill-next { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
    .pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #ccc; transition: all 0.3s; }
    .pill-active .pill-dot { background: var(--bm-green); box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
    .pill-next .pill-dot { background: var(--bm-orange); }
    .bm-sep { color: #ddd; font-size: 0.55rem; margin: 0 0.15rem; }
    .dark .bm-sep { color: #444; }

    /* Marketplace title */
    .bm-intro { margin-top: 1.5rem; }
    .bm-title { font-size: 1.3rem; font-weight: 900; letter-spacing: -0.03em; color: var(--bm-text); }
    .bm-subtitle { font-size: 0.82rem; color: var(--bm-text-3); margin-top: 0.15rem; font-weight: 500; }

    /* Edu hint */
    .bm-edu {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 1rem;
        border-radius: var(--bm-radius-xs);
        background: var(--bm-card);
        border: 1px solid var(--bm-border);
    }
    .bm-edu-ico {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: var(--bm-orange-dim);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--bm-orange);
        flex-shrink: 0;
    }
    .bm-edu-text { font-size: 0.73rem; color: var(--bm-text-3); line-height: 1.5; flex: 1; }
    .bm-edu-text b { color: var(--bm-text-2); }
    .bm-edu-x { background: none; border: none; cursor: pointer; color: #ccc; padding: 0.2rem; transition: color 0.15s; flex-shrink: 0; }
    .bm-edu-x:hover { color: var(--bm-text); }

    /* Search row */
    .bm-search-row {
        margin-top: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .bm-search-label { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--bm-text); }
    .bm-sbox { position: relative; width: 260px; }
    .bm-sbox svg { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: #bbb; pointer-events: none; }
    .bm-sbox input {
        width: 100%;
        height: 40px;
        padding: 0 0.85rem 0 2.5rem;
        border-radius: 99px;
        border: 1.5px solid var(--bm-border-2);
        background: var(--bm-card);
        color: var(--bm-text);
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 500;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .bm-sbox input:focus { border-color: var(--bm-orange); box-shadow: 0 0 0 4px var(--bm-orange-dim); }
    .bm-sbox input::placeholder { color: #bbb; }

    /* Market grid */
    .bm-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.85rem;
        margin-top: 1.25rem;
        padding-bottom: 4rem;
    }

    .bm-card {
        background: var(--bm-card);
        border: 1px solid var(--bm-border);
        border-radius: var(--bm-radius);
        box-shadow: var(--bm-shadow-sm);
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg)) scale(0.82);
        transition: box-shadow 0.35s var(--bm-ease-out), transform 0.35s var(--bm-ease-out), border-color 0.3s;
    }
    .bm-card.in {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
        transition: opacity 0.6s var(--bm-ease), transform 0.6s var(--bm-ease), box-shadow 0.35s var(--bm-ease-out), border-color 0.3s;
    }
    .bm-card.in:hover {
        box-shadow: var(--bm-shadow-lg);
        transform: translateY(-8px) scale(1.015);
        border-color: rgba(249, 115, 22, 0.28);
    }

    .bm-card-logo {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        transition: all 0.35s var(--bm-ease-out);
    }
    .bm-card.in:hover .bm-card-logo { filter: brightness(1.06) saturate(1.1); }
    .bm-card-logo img {
        height: 52px;
        width: auto;
        max-width: 130px;
        object-fit: contain;
        position: relative;
        z-index: 1;
        transition: transform 0.5s var(--bm-ease);
        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.06));
    }
    .bm-card.in:hover .bm-card-logo img { transform: scale(1.18) translateY(-2px); }

    .bm-card-body {
        padding: 0.85rem 1rem 1rem;
        border-top: 1px solid var(--bm-border);
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .bm-card-name { font-size: 0.82rem; font-weight: 700; letter-spacing: -0.01em; color: var(--bm-text); }
    .bm-card-meta { font-size: 0.66rem; color: var(--bm-muted); font-weight: 500; margin-top: 0.2rem; }

    .bm-card-arr {
        position: absolute;
        bottom: 0.85rem;
        right: 0.85rem;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--bm-orange);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        opacity: 0;
        transform: translateX(-6px) scale(0.8);
        transition: opacity 0.25s var(--bm-ease), transform 0.3s var(--bm-ease);
        box-shadow: 0 2px 10px rgba(249, 115, 22, 0.35);
    }
    .bm-card.in:hover .bm-card-arr { opacity: 1; transform: translateX(0) scale(1); }

    /* Live strip on cards */
    .bm-live-strip {
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--bm-green), transparent);
        opacity: 0;
        transition: opacity 0.5s;
    }
    .session-live .bm-live-strip { opacity: 1; }

    .bm-no-results { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; display: none; }
    .bm-no-results p { font-size: 0.85rem; color: var(--bm-muted); }

    /* Responsive */
    @media (max-width: 900px) {
        .bm-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 680px) {
        .bm-wrap { padding: 0 1rem; }
        .bm-hero-main { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem 0.5rem; }
        .bm-hero-top { padding: 0.75rem 1.25rem 0; }
        .bm-right { text-align: left; }
        .bm-countdown { font-size: 2.75rem; }
        .bm-name { font-size: 1.35rem; }
        .bm-schedule { padding: 0.5rem 1.25rem 1rem; }
        .bm-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
        .bm-card-logo { height: 95px; }
        .bm-card-logo img { height: 40px; }
        .bm-card-body { padding: 0.7rem 0.75rem 0.85rem; }
        .bm-card-name { font-size: 0.78rem; }
        .bm-card-meta { font-size: 0.62rem; }
        .bm-search-row { flex-direction: column; align-items: stretch; }
        .bm-sbox { width: 100%; }
        .bm-intro { flex-direction: column; align-items: flex-start; }
        .bm-title { font-size: 1.1rem; }
        .bm-subtitle { font-size: 0.75rem; }
        .bm-edu { padding: 0.6rem 0.85rem; gap: 0.6rem; }
        .bm-edu-text { font-size: 0.7rem; }
    }
    @media (max-width: 420px) {
        .bm-wrap { padding: 0 0.75rem; }
        .bm-hero { border-radius: 14px; margin-top: 1rem; }
        .bm-hero-main { padding: 0.85rem 1rem 0.4rem; gap: 0.75rem; }
        .bm-hero-top { padding: 0.6rem 1rem 0; }
        .bm-pulse { width: 42px; height: 42px; }
        .bm-dot { width: 12px; height: 12px; }
        .bm-label { font-size: 0.58rem; }
        .bm-name { font-size: 1.15rem; }
        .bm-sub { font-size: 0.72rem; }
        .bm-countdown { font-size: 2.25rem; }
        .bm-countdown-label { font-size: 0.62rem; }
        .bm-schedule { padding: 0.4rem 1rem 0.85rem; gap: 0.35rem; }
        .bm-pill { padding: 0.3rem 0.6rem; font-size: 0.6rem; }
        .bm-sep { display: none; }
        .bm-grid { gap: 0.5rem; }
        .bm-card-logo { height: 82px; }
        .bm-card-logo img { height: 34px; }
        .bm-card-body { padding: 0.6rem 0.65rem 0.75rem; }
        .bm-card-name { font-size: 0.72rem; }
        .bm-card-meta { font-size: 0.58rem; }
        .bm-card-arr { width: 24px; height: 24px; bottom: 0.65rem; right: 0.65rem; }
        .bm-search-label { font-size: 0.92rem; }
        .bm-sbox input { height: 36px; font-size: 0.72rem; }
        .bm-title { font-size: 0.95rem; }
        .bm-edu-ico { width: 22px; height: 22px; border-radius: 5px; }
        .bm-edu-text { font-size: 0.65rem; }
    }
</style>

<section class="relative md:mt-[84px] mt-[70px]" style="background: var(--bm-bg); min-height: 80vh;">
    <div class="bm-wrap">

        {{-- Session hero (hidden when NEXUS is inactive) --}}
        @if($nexusActive)
        <div class="bm-hero {{ $sessionOpen ? 'is-open' : 'is-closed' }}" id="bmHero">
            <div class="bm-hero-top">
                <nav class="bm-bc">
                    <a href="{{ url('/') }}">Home</a>
                    <span style="color:#d4d4d4">&rsaquo;</span>
                    <span class="cur">Bid Marketplace</span>
                </nav>
            </div>
            <div class="bm-hero-main">
                <div class="bm-hero-left">
                    <div class="bm-pulse"><div class="bm-dot"></div></div>
                    <div>
                        @if($sessionOpen)
                            <div class="bm-label">Trading Session Open</div>
                            <div class="bm-name">{{ $activeSessionName }} <span class="dim">/ Session {{ $activeSessionNumber }}</span></div>
                            <div class="bm-sub">Place your bids now. Session closes automatically.</div>
                        @else
                            <div class="bm-label">Next Session</div>
                            <div class="bm-name">{{ $nextSessionName }} <span class="dim">/ Session {{ $nextSessionNumber }}</span></div>
                            <div class="bm-sub">Browse markets and get your bids ready.</div>
                        @endif
                    </div>
                </div>
                <div class="bm-right">
                    <div class="bm-countdown" id="bmCountdown">--:--</div>
                    <div class="bm-countdown-label" id="bmCountdownLabel">{{ $sessionOpen ? 'remaining' : 'until open' }}</div>
                </div>
            </div>
            <div class="bm-schedule">
                @foreach($sessionTimes as $num => $hour)
                    @php
                        $isActive = $sessionOpen && $activeSessionNumber === $num;
                        $isNext = !$sessionOpen && $nextSessionNumber === $num;
                        $pillClass = $isActive ? 'pill-active' : ($isNext ? 'pill-next' : '');
                    @endphp
                    @if($num > 1)<span class="bm-sep">&bull;</span>@endif
                    <div class="bm-pill {{ $pillClass }}" data-utc="{{ $hour }}">
                        <span class="pill-dot"></span>
                        <span class="pill-text">Session {{ $num }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Edu hint --}}
        <div class="bm-edu" id="bmEdu">
            <div class="bm-edu-ico">
                <svg width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
            </div>
            <p class="bm-edu-text"><b>3 daily trading sessions.</b> Place bids during an open session. Each runs for 1 hour. Browse markets anytime, bid when a session is live.</p>
            <button class="bm-edu-x" onclick="document.getElementById('bmEdu').style.display='none'">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        @else
        {{-- When NEXUS is inactive: simple header, no session awareness --}}
        <div style="padding-top: 5.5rem; text-align: center;">
            <h3 style="font-size: 1.85rem; font-weight: 900; letter-spacing: -0.04em; color: var(--bm-text);">Bidding Marketplace</h3>
            <p style="font-size: 0.82rem; color: var(--bm-muted); margin-top: 0.25rem;">Select A Market To Bid From</p>
            <div style="display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.75rem; font-size: 0.68rem; font-weight: 600;">
                <a href="{{ url('/') }}" style="color: var(--bm-muted); text-decoration: none;">Home</a>
                <span style="color: #d4d4d4;">&rsaquo;</span>
                <span style="color: var(--bm-orange);">Bid Marketplace</span>
            </div>
        </div>
        @endif

        {{-- Marketplace title --}}
        @if($nexusActive)
        <div class="bm-intro">
            <div class="bm-title">Bidding Marketplace</div>
            <div class="bm-subtitle">Select a market to browse products and place your bids</div>
        </div>
        @endif

        {{-- Search --}}
        <div class="bm-search-row">
            <div>
                <span class="bm-search-label">Markets</span>
            </div>
            <div class="bm-sbox">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/></svg>
                <input type="text" placeholder="Search markets..." oninput="bmFilt(this.value)">
            </div>
        </div>

        {{-- Market grid --}}
        <div class="bm-grid {{ $sessionOpen ? 'session-live' : '' }}" id="bmGrid">
            @foreach($markets as $market)
                @php
                    $nameKey = strtolower(trim($market->name));
                    $bg = $brandColors[$nameKey] ?? $defaultBg;
                    $category = $marketCategories[$nameKey] ?? '';
                @endphp
                <a href="{{ route('marketplace', [$market->slug, $market->name]) }}"
                   class="bm-card" data-name="{{ strtolower($market->name) }}">
                    <div class="bm-live-strip"></div>
                    <div class="bm-card-logo" style="background: {{ $bg }}">
                        <img src="{{ asset('markets/' . $market->image) }}" alt="{{ $market->name }}">
                    </div>
                    <div class="bm-card-body">
                        <div class="bm-card-name">{{ $market->name }}</div>
                        @if($category)
                            <div class="bm-card-meta">{{ $category }}</div>
                        @endif
                    </div>
                    <div class="bm-card-arr">
                        <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                    </div>
                </a>
            @endforeach
            <div class="bm-no-results" id="bmNoRes"><p>No markets match your search.</p></div>
        </div>

    </div>
</section>

<script>
// Timezone conversion
function bmLocalTime(utcHour) {
    var d = new Date();
    d.setUTCHours(utcHour, 0, 0, 0);
    return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
}

// Convert pill times to local
(function() {
    document.querySelectorAll('.bm-pill[data-utc]').forEach(function(el) {
        var utc = parseInt(el.getAttribute('data-utc'));
        var pills = @json($sessionTimes);
        var num = null;
        for (var k in pills) { if (pills[k] === utc) { num = k; break; } }
        var txt = el.querySelector('.pill-text');
        if (txt && num) txt.textContent = 'Session ' + num + ' \u00b7 ' + bmLocalTime(utc);
    });
})();

@if($nexusActive)
// Countdown
(function() {
    @if($sessionOpen && $sessionEndTime)
        var endTime = new Date('{{ $sessionEndTime }}').getTime();
    @elseif($nextSessionTime)
        var endTime = new Date('{{ $nextSessionTime }}').getTime();
    @else
        var endTime = 0;
    @endif

    if (!endTime) return;

    var el = document.getElementById('bmCountdown');
    if (!el) return;

    function tick() {
        var now = Date.now();
        var diff = Math.max(0, Math.floor((endTime - now) / 1000));
        if (diff <= 0) {
            el.textContent = '00:00';
            setTimeout(function() { location.reload(); }, 3000);
            return;
        }
        var h = Math.floor(diff / 3600);
        var m = Math.floor((diff % 3600) / 60);
        var s = diff % 60;
        if (h > 0) {
            el.textContent = h + 'h ' + String(m).padStart(2, '0') + 'm';
        } else {
            el.textContent = String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
        }
    }
    tick();
    setInterval(tick, 1000);
})();
@endif

// Scattered brick entrance (scroll-triggered)
(function() {
    var cards = document.querySelectorAll('.bm-card');
    cards.forEach(function(c) {
        var sx = (Math.random() - 0.5) * 200;
        var sy = 60 + Math.random() * 140;
        var sr = (Math.random() - 0.5) * 20;
        c.style.setProperty('--sx', sx + 'px');
        c.style.setProperty('--sy', sy + 'px');
        c.style.setProperty('--sr', sr + 'deg');
    });
    var delay = 0;
    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var el = entry.target;
                setTimeout(function() { el.classList.add('in'); }, delay);
                delay += 200;
                observer.unobserve(el);
            }
        });
    }, { threshold: 0.1 });
    cards.forEach(function(c) { observer.observe(c); });
})();

// Search filter
function bmFilt(q) {
    var cards = document.querySelectorAll('.bm-card');
    var query = q.toLowerCase().trim();
    var visible = 0;
    cards.forEach(function(c) {
        var match = !query || c.getAttribute('data-name').indexOf(query) !== -1;
        c.style.display = match ? '' : 'none';
        if (match) visible++;
    });
    document.getElementById('bmNoRes').style.display = visible === 0 ? 'block' : 'none';
}
</script>

@endsection