{% extends "base.html" %}
{% block title %}{{ settings.event_title }}{% endblock %}
{% block content %}

<!-- -- HERO / COVER SLIDER -- -->
<header class="hero">
  <div class="hero-slider" data-slider>
    {% set bg_img = img(settings.home_background) if settings.home_background else '' %}
    {% if bg_img %}
    <div class="hero-slide active">
      <img src="{{ url_for('serve_media', filename=bg_img) }}" alt="{{ settings.event_title }} championship artwork">
    </div>
    {% elif hero_slides %}
    {% for slide in hero_slides %}
    {% set slide_img = img(slide.image) if slide.image else '' %}
    {% if slide_img %}
    <div class="hero-slide {% if loop.first %}active{% endif %}">
      <img src="{{ url_for('serve_media', filename=slide_img) }}" alt="{{ settings.event_title }}">
    </div>
    {% endif %}
    {% endfor %}
    {% else %}
    <div class="hero-slide fallback active"></div>
    <div class="hero-slide fallback f2"></div>
    <div class="hero-slide fallback f3"></div>
    {% endif %}
  </div>
  <div class="hero-overlay"></div>

  <div class="wrap relative z-10 hero-inner">
    <div class="hero-content reveal">
      <div class="hero-acts">
        <a class="btn primary has-glow" href="{{ url_for('register') }}"><i class="fas fa-bolt"></i> Register Now</a>
        <a class="btn on-dark" href="#games"><i class="fas fa-gamepad"></i> View Games</a>
      </div>
    </div>
  </div>

  <div class="hero-dots" data-hero-dots></div>
</header>

<!-- -- TICKER -- -->
<div class="ticker">
  <div class="ticker-track">
    {% for i in range(2) %}
    <span>Play sharp. Win louder.</span>
    <span>Champions register before the deadline.</span>
    <span>{{ settings.early_discount }}</span>
    <span>One arena. Many rivals. One Nexora crown.</span>
    <span>Fair play, verified brackets, transparent results.</span>
    {% endfor %}
  </div>
</div>

<!-- -- COUNTDOWN -- -->
{% set countdown_date = settings.early_deadline if settings.countdown_mode == 'tickets' else settings.event_date %}
{% set countdown_label = 'Tickets Last Date' if settings.countdown_mode == 'tickets' else 'Event Starts In' %}
<section class="section tight countdown-section">
  <div class="countdown-panel reveal">
    <div class="countdown-inner">
      <div class="countdown-copy">
        <p class="eyeb on-dark"><i class="fas fa-clock"></i> Official Countdown</p>
        {% if settings.countdown_mode == 'tickets' %}
        <h2>Tickets Last <span class="accent">Date</span></h2>
        {% else %}
        <h2>Event Starts <span class="accent">In</span></h2>
        {% endif %}
        <div class="countdown-info">
          <p class="countdown-date"><i class="fas fa-calendar-days"></i> {{ countdown_date | pretty_dt }}</p>
          <div class="countdown-meta">
            <span><i class="fas fa-shield-halved"></i> Verified Entry</span>
            <span><i class="fas fa-ticket"></i> Ticket Required</span>
          </div>
        </div>
      </div>
      <div class="countdown-side">
        <div class="timer" data-countdown="{{ countdown_date }}">
          <div class="timer-unit"><strong data-days>00</strong><span>Days</span></div>
          <div class="countdown-separator"></div>
          <div class="timer-unit"><strong data-hours>00</strong><span>Hours</span></div>
          <div class="countdown-separator"></div>
          <div class="timer-unit"><strong data-minutes>00</strong><span>Mins</span></div>
          <div class="countdown-separator"></div>
          <div class="timer-unit"><strong data-seconds>00</strong><span>Secs</span></div>
        </div>
        <p class="timer-message" data-timer-message></p>
      </div>
    </div>
  </div>
</section>

<!-- -- PRIZE POOL SHOWCASE -- -->
<section id="prize-pool" class="prize-showcase-section">
  <div class="wrap reveal" data-prize-carousel>

    <div class="prize-section-heading">
      <p class="eyebrow"><i class="fas fa-trophy"></i> Tournament Rewards</p>
      <h2>Rewards Worth Fighting For</h2>
    </div>

    <div class="prize-showcase">
      <div class="prize-card-slot" data-prize-slot="left" aria-live="polite"></div>
      <div class="prize-award-center" data-prize-center>
        <div class="prize-award-block prize-award-left" data-prize-text="left">
          <span class="prize-award-label"></span>
          <h3 class="prize-award-title"></h3>
          <strong class="prize-award-amount"></strong>
          <p class="prize-award-note"></p>
        </div>
        <div class="prize-award-divider"></div>
        <div class="prize-award-block prize-award-right" data-prize-text="right">
          <span class="prize-award-label"></span>
          <h3 class="prize-award-title"></h3>
          <strong class="prize-award-amount"></strong>
          <p class="prize-award-note"></p>
        </div>
      </div>
      <div class="prize-card-slot" data-prize-slot="right" aria-live="polite"></div>
    </div>

    <div class="prize-carousel-dots" data-prize-dots></div>

    <div class="prize-modal-overlay" data-prize-modal>
      <div class="prize-modal" data-prize-modal-box>
        <button class="prize-modal-close" data-prize-modal-close type="button" aria-label="Close">&times;</button>
        <div class="prize-modal-content" data-prize-modal-content></div>
      </div>
    </div>

    <div class="prize-card-templates" hidden>
      {% if prize_items %}
        {% for item in prize_items %}
        <template data-prize-card
          data-title="{{ item.title }}"
          data-amount="{{ item.amount|default('', true) }}"
          data-note="{{ item.note|default('', true) }}"
          data-label="Prize Reward"
          data-image="{{ item.image|default('', true) }}">
          <article class="prize-image-card">
            {% set pi_img = img(item.image) if item.image else '' %}
            {% if pi_img %}
            <img src="{{ url_for('serve_media', filename=pi_img) }}" alt="{{ item.title }}" loading="lazy">
            {% else %}
            <div class="prize-card-icon"><i class="fas fa-trophy"></i></div>
            {% endif %}
          </article>
        </template>
        {% endfor %}
      {% elif prize_banner_images %}
        {% for image in prize_banner_images %}
        {% set pb_img = img(image) if image else '' %}
        <template data-prize-card
          data-title="{{ settings.prize_pool_title or 'Champion Reward' }}"
          data-amount="{{ settings.prize_pool_amount|default('', true) }}"
          data-note="{{ settings.prize_pool_note|default('', true) }}"
          data-label="Grand Reward"
          data-image="{{ image }}">
          <article class="prize-image-card">
            {% if pb_img %}<img src="{{ url_for('serve_media', filename=pb_img) }}" alt="Prize Pool" loading="lazy">{% endif %}
          </article>
        </template>
        {% endfor %}
        {% if prize_banner_images|length == 1 %}
        {% set pb1_img = img(prize_banner_images[0]) if prize_banner_images[0] else '' %}
        <template data-prize-card
          data-title="Finalist Recognition"
          data-amount="Official Certificate"
          data-note="Recognition for the teams that reach the final stage."
          data-label="Finalist Reward"
          data-image="{{ prize_banner_images[0] }}">
          <article class="prize-image-card">
            {% if pb1_img %}<img src="{{ url_for('serve_media', filename=pb1_img) }}" alt="Finalist Reward" loading="lazy">{% endif %}
          </article>
        </template>
        <template data-prize-card
          data-title="MVP Spotlight"
          data-amount="Player Recognition"
          data-note="A featured award for the tournament's standout player."
          data-label="MVP Reward"
          data-image="{{ prize_banner_images[0] }}">
          <article class="prize-image-card">
            {% if pb1_img %}<img src="{{ url_for('serve_media', filename=pb1_img) }}" alt="MVP Reward" loading="lazy">{% endif %}
          </article>
        </template>
        {% endif %}
      {% else %}
        <template data-prize-card
          data-title="{{ settings.prize_pool_title or 'Champion Reward' }}"
          data-amount="{{ settings.prize_pool_amount|default('', true) }}"
          data-note="{{ settings.prize_pool_note or 'Rewards will be announced by the tournament organizers.' }}"
          data-label="Grand Reward"
          data-image="">
          <article class="prize-image-card">
            <div class="prize-card-icon"><i class="fas fa-trophy"></i></div>
          </article>
        </template>
      {% endif %}
    </div>

  </div>
</section>

<!-- -- GAME CARDS -- -->
<section id="games" class="section white">
  <div class="wrap">
    <div class="heading-row games-heading-row reveal">
      <div class="section-heading">
        <p class="eyebrow">Choose Your Arena</p>
        <h2>Competitive Gaming Registration</h2>
        <p>Newest titles appear first. Compare solo and team pricing, then register straight from the card.</p>
      </div>
      {% if games %}
      <a class="btn primary view-all-btn" href="{{ url_for('register') }}">
        <i class="fas fa-layer-group"></i>
        View All{% if games_total and games_total > games|length %} ({{ games_total }}){% endif %}
      </a>
      {% endif %}
    </div>

    {% if games %}
    <div class="game-grid reveal" data-stagger>
      {% for game in games %}
      {% set open_now, state_label = game_status(game, settings.registration_open) %}
      {% if open_now %}
      <a class="game-card" href="{{ url_for('register', game=game.id) }}">
        {% else %}
        <div class="game-card is-closed">
          {% endif %}
          {% set gi = img(game.image) if game.image else '' %}
          <div class="game-image {% if not gi %}game-fallback{% endif %}" {% if gi
            %}style="background-image:url('{{ url_for('serve_media', filename=gi) }}')" {% endif %}>
            <span
              class="status-pill {% if open_now %}open{% elif state_label == 'Opens Soon' %}soon{% else %}closed{% endif %}"><i
                class="fas fa-circle"></i> {{ state_label }}</span>
          </div>
          <div class="game-body">
            <div class="game-title-row">
              <h3>{{ game.title }}</h3>
              <span class="platform-pill-new"><i class="fas fa-tv"></i> {{ game.platform }}</span>
            </div>
            {% if game.reg_to and open_now %}
            <p class="window-note"><i class="fas fa-hourglass-half"></i> Closes {{ game.reg_to | pretty_dt }}</p>
            {% elif game.reg_from and state_label == 'Opens Soon' %}
            <p class="window-note"><i class="fas fa-calendar-day"></i> Opens {{ game.reg_from | pretty_dt }}</p>
            {% endif %}
            {% set has_disc = discount_active(game) %}
            {% if has_disc %}
            <span class="discount-chip"><i class="fas fa-percent"></i> {{ discount_label_text(game) }}</span>
            {% endif %}
            <div class="price-chips">
              {% set gm_min = game.min_members|int if game.min_members is defined else 1 %}
              {% set gm_max = game.max_members|int if game.max_members is defined else 1 %}
              {% if gm_min == 1 and gm_max == 1 %}
                {% if game.individual_price %}
                {% set p = price_view(game, 1) %}
                <p class="price-line"><small>Solo</small>
                  <strong class="price-now">{{ p.current }}</strong>
                  {% if p.strike %}<del class="price-was">{{ p.original }}</del>{% endif %}
                </p>
                {% endif %}
              {% else %}
                {% for size, label in [(1, '1 Player'), (2, '2 Players'), (3, '3 Players'), (4, '4 Players')] %}
                {% set p = price_view(game, size) %}
                {% if p and (size == 1 and gm_min <= 1 or size > 1 and gm_max >= size) %}
                <p class="price-line"><small>{{ label }}</small>
                  <strong class="price-now">{{ p.current }}</strong>
                  {% if p.strike %}<del class="price-was">{{ p.original }}</del>{% endif %}
                </p>
                {% endif %}
                {% endfor %}
              {% endif %}
            </div>
            {% if open_now %}
            <span class="card-cta">Register <i class="fas fa-arrow-right"></i></span>
            {% else %}
            <span class="card-cta"><i class="fas fa-lock"></i> Registration {{ state_label }}</span>
            {% endif %}
          </div>
          {% if open_now %}
      </a>
      {% else %}
    </div>
    {% endif %}
    {% endfor %}
  </div>
  {% if games_total and games_total > games|length %}
  <div class="gallery-cta reveal">
    <a class="btn outline" href="{{ url_for('register') }}">View All {{ games_total }} Games <i
        class="fas fa-arrow-right"></i></a>
  </div>
  {% endif %}
  {% else %}
  <div class="empty"><i class="fas fa-gamepad"></i>No games are available yet. Add game cards from the admin panel.</div>
  {% endif %}
  </div>
</section>

<!-- -- SPONSORS / PARTNERS (non-stop marquee) -- -->
{% if sponsors %}
<section class="section sponsors-section" data-sponsors>
  <div class="wrap">
    <div class="section-heading center" data-sponsors-heading>
      <p class="eyebrow"><i class="fas fa-handshake"></i> SPONSORS &amp; PARTNERS</p>
      <h2>Powered By Our Partners</h2>
      <p>Thanks to the organizations and partners supporting Nexora.</p>
    </div>
  </div>

  <div class="sponsor-marquee" data-marquee data-sponsors-row>
    <div class="sponsor-marquee-track">
      {% for sponsor in sponsors_row1 %}
      {% set body %}
      {% set sp1_img = img(sponsor.logo) if sponsor.logo else '' %}
      <div class="sponsor-logo-box">
        {% if sp1_img %}
        <img src="{{ url_for('serve_media', filename=sp1_img) }}" alt="{{ sponsor.name }} logo"
          loading="lazy">
        {% else %}
        <span class="logo-fallback">{{ sponsor.name[:2] | upper }}</span>
        {% endif %}
      </div>
      {% if sponsor.name %}<strong>{{ sponsor.name }}</strong>{% endif %}
      {% endset %}

      {% if sponsor.website %}
      <a class="sponsor-card" href="{{ sponsor.website }}" target="_blank" rel="noopener">{{ body }}</a>
      {% else %}
      <div class="sponsor-card">{{ body }}</div>
      {% endif %}
      {% endfor %}
    </div>
  </div>
  <div class="sponsor-marquee sponsor-marquee-reverse" data-marquee data-marquee-reverse data-sponsors-row>
    <div class="sponsor-marquee-track">
      {% for sponsor in sponsors_row2 %}
      {% set body %}
      {% set sp2_img = img(sponsor.logo) if sponsor.logo else '' %}
      <div class="sponsor-logo-box">
        {% if sp2_img %}
        <img src="{{ url_for('serve_media', filename=sp2_img) }}" alt="{{ sponsor.name }} logo"
          loading="lazy">
        {% else %}
        <span class="logo-fallback">{{ sponsor.name[:2] | upper }}</span>
        {% endif %}
      </div>
      {% if sponsor.name %}<strong>{{ sponsor.name }}</strong>{% endif %}
      {% endset %}

      {% if sponsor.website %}
      <a class="sponsor-card" href="{{ sponsor.website }}" target="_blank" rel="noopener">{{ body }}</a>
      {% else %}
      <div class="sponsor-card">{{ body }}</div>
      {% endif %}
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

<!-- -- LEADERSHIP QUOTES -- -->
{% if leaders %}
<section class="section leadership-section" data-leadership>
  <div class="wrap">
    <div class="section-heading center">
      <p class="eyebrow"><i class="fas fa-trophy"></i> LEADERSHIP</p>
      <h2>Messages From Our Directors</h2>
      <p>Guidance from the leadership team behind the Nexora Esports Championship.</p>
    </div>
    <div class="leader-grid">
      {% for leader in leaders %}
      <article class="leader-card" data-index="{{ loop.index0 }}">
        <div class="leader-card-inner">
          <div class="leader-image-col">
            <div class="leader-photo-wrap {% if not leader.image %}no-photo{% endif %}">
              {% set li_img = img(leader.image) if leader.image else '' %}
              {% if li_img %}
              <img src="{{ url_for('serve_media', filename=li_img) }}" alt="{{ leader.name }}" loading="lazy">
              {% else %}
              <span class="leader-initials">{{ leader.name[:1] | upper }}</span>
              {% endif %}
            </div>
          </div>
          <div class="leader-content-col">
            <div class="leader-info">
              <span class="leader-name">{{ leader.name }}</span>
              <span class="leader-role-badge">{{ leader.role }}</span>
            </div>
            <span class="quote-mark">&ldquo;</span>
            <p class="leader-quote">{{ leader.quote }}</p>
          </div>
        </div>
      </article>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

<!-- -- MEMORIES SLIDER -- -->
<section class="section white memories" data-step-marquee>
  <div class="wrap">
    <div class="heading-row reveal">
      <div class="section-heading">
        <p class="eyebrow">Memories</p>
        <h2>Event Moments</h2>
        <p>Highlights from previous events move automatically. Click any image to view it larger.</p>
      </div>
    </div>
  </div>

  <div class="wrap">
    <div class="memory-viewport">
      <div class="memory-track" data-track>
        {% if gallery %}
        {% for item in gallery %}
        {% set mem_img = img(item.image) if item.image else '' %}
        {% if mem_img %}
        <figure class="memory-card" data-lightbox="{{ url_for('serve_media', filename=mem_img) }}"
          data-title="{{ item.title }}" data-caption="{{ item.caption or '' }}">
          <div class="gallery-media">
            <img src="{{ url_for('serve_media', filename=mem_img) }}" alt="{{ item.title }}" loading="lazy">
          </div>
          <figcaption>
            <strong>{{ item.title }}</strong>
            {% if item.caption %}<span>{{ item.caption }}</span>{% endif %}
          </figcaption>
        </figure>
        {% endif %}
        {% endfor %}
        {% else %}
        {% for label in ['Opening ceremony', 'Group stage', 'Finals night', 'Winning moment'] %}
        <figure class="memory-card placeholder-card" style="cursor:default;">
          <div class="ph-img"></div>
          <figcaption><strong>{{ label }}</strong><span>Upload images from Admin &rarr; Covers &amp; Gallery.</span></figcaption>
        </figure>
        {% endfor %}
        {% endif %}
      </div>
    </div>

    <div class="gallery-cta reveal">
      <a class="btn outline" href="{{ url_for('gallery') }}">View Full Gallery <i class="fas fa-arrow-right"></i></a>
    </div>
  </div>
</section>

<!-- -- FEATURES SECTION -- -->
<section class="section soft features highlights-showcase">
  <div class="wrap">
    <div class="section-heading center reveal">
      <p class="eyebrow">Tournament Highlights</p>
      <h2>What Makes Nexora Special?</h2>
      <p>Verified systems, clean scheduling, and match-day energy designed for serious players.</p>
    </div>
    <div class="feature-card-grid reveal" data-stagger>
      <div class="feature-spec-card">
        <div class="f-icon"><i class="fas fa-shield-halved"></i></div>
        <h3>Verified Match Control</h3>
        <p>Every match runs with clear rules, active moderation, and transparent decisions.</p>
      </div>
      <div class="feature-spec-card">
        <div class="f-icon"><i class="fas fa-money-check-dollar"></i></div>
        <h3>Fast Winner Handling</h3>
        <p>Results, winners, and rewards are handled quickly through the official management desk.</p>
      </div>
      <div class="feature-spec-card">
        <div class="f-icon"><i class="fas fa-video"></i></div>
        <h3>Stage-Level Experience</h3>
        <p>Final rounds get the spotlight with organized coverage, highlights, and crowd moments.</p>
      </div>
    </div>
  </div>
</section>

<!-- -- TOURNAMENT PHASES -- -->
<section class="section soft phases">
  <div class="wrap">
    <div class="section-heading center reveal">
      <p class="eyebrow">Roadmap</p>
      <h2>Tournament Phases</h2>
      <p>Track the event from start to finish.</p>
    </div>
    <div class="phase-timeline reveal" data-stagger>
      <div class="phase-item">
        <span class="phase-num">01</span>
        <h4>Registration</h4>
        <p>Register solo or with your squad before the official ticket deadline.</p>
      </div>
      <div class="phase-item">
        <span class="phase-num">02</span>
        <h4>Brackets</h4>
        <p>Teams are drafted and match layouts are finalized.</p>
      </div>
      <div class="phase-item">
        <span class="phase-num">03</span>
        <h4>Qualifiers</h4>
        <p>The heat rises! Battle through knockouts to reach the playoffs.</p>
      </div>
      <div class="phase-item">
        <span class="phase-num">04</span>
        <h4>Grand Finals</h4>
        <p>The main stage. Only the best will compete for the crown.</p>
      </div>
    </div>
  </div>
</section>

<link rel="stylesheet" href="{{ url_for('static', filename='css/index-inline.css') }}?v={{ cache_bust }}">



{% endblock %}