{% extends "base.html" %}
{% block title %}{{ t('home') }} — {{ t('brand') }}{% endblock %}
{% block extra_head %}
<style>
  .hero-gradient {
    background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(171,124,245,0.08) 0%, transparent 60%);
  }
  .glow-divider {
    height: 1px; margin: 2rem auto; max-width: 400px;
    background: linear-gradient(90deg, transparent, var(--neon), transparent);
    opacity: 0.4;
  }
  .section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
  }
  .section-header h2 {
    font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
    background: linear-gradient(90deg, var(--text), var(--neon));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
</style>
{% endblock %}
{% block content %}

{% if pending_notifs %}
<div class="pending-strip">
  <div class="pulse-dot"></div>
  <span class="text">{{ t("match_starting_soon") }}:</span>
  {% for n in pending_notifs %}
  <strong>{{ n.match.title }}</strong>
  <span class="countdown">{{ n.time_left }} min</span>
  {% endfor %}
</div>
{% endif %}

<!-- ═══ HERO SECTION ═══ -->
<div class="hero hero-gradient reveal is-visible" style="margin-bottom:0">
  <div class="hero-badge">{{ t('tagline')|truncate(20,true,'...') }}</div>
  <h1 class="hero-title">
    <span class="neon">FIGHTSKILL</span><br>
    {{ t('welcome_back') }}, {{ user.display_name }}
  </h1>
  <p class="hero-sub">{{ t('about_desc_1') }}</p>
  <div class="hero-cta">
    <a href="{{ url_for('web.search') }}" class="btn btn-primary">&#9654; {{ t('join_now') }}</a>
    <a href="{{ url_for('web.team') }}" class="btn btn-outline">&#9823; {{ t('our_team') }}</a>
  </div>
  <div class="hero-stats-row">
    <div class="hero-stat-card">
      <div class="hero-stat-icon green">&#9830;</div>
      <div>
        <div class="hero-stat-num">{{ upcoming_matches|length }}</div>
        <div class="hero-stat-label">{{ t('upcoming') }}</div>
      </div>
    </div>
    <div class="hero-stat-card">
      <div class="hero-stat-icon purple">&#9733;</div>
      <div>
        <div class="hero-stat-num">{{ games|length }}</div>
        <div class="hero-stat-label">{{ t('games') }}</div>
      </div>
    </div>
    <div class="hero-stat-card">
      <div class="hero-stat-icon blue">&#9678;</div>
      <div>
        <div class="hero-stat-num">{{ matches|length }}</div>
        <div class="hero-stat-label">{{ t('daily_matches') }}</div>
      </div>
    </div>
    <div class="hero-stat-card">
      <div class="hero-stat-icon pink">&#9829;</div>
      <div>
        <div class="hero-stat-num" id="heroNotifCount">{{ unread_count or 0 }}</div>
        <div class="hero-stat-label">{{ t('notifications') }}</div>
      </div>
    </div>
  </div>
</div>

<div class="container" style="margin-top:-1rem">

<!-- WELCOME CARD -->
<div class="card reveal" style="margin-bottom:1rem;padding:1rem 1.25rem">
  <div class="justify-between" style="flex-wrap:wrap;gap:0.5rem">
    <div>
      <h2 style="font-size:1.1rem;margin-bottom:0.15rem">
        <span class="txt-glow">{{ t('welcome_back') }}</span>, {{ user.display_name }}.
      </h2>
      <p style="color:var(--text-dim);font-size:0.85rem" class="txt-float">{{ t('tagline') }}</p>
    </div>
    <div class="flex" style="gap:0.5rem">
      <a href="{{ url_for('web.wallet') }}" class="btn btn-primary">{{ t('wallet') }}</a>
      <a href="{{ url_for('web.search') }}" class="btn btn-outline">{{ t('daily_matches') }}</a>
    </div>
  </div>
</div>

<!-- GAMES SCROLL -->
<div class="reveal" style="margin-bottom:1rem">
  <div class="section-header">
    <h2>{{ t('games') }}</h2>
    <a href="{{ url_for('web.search') }}" class="btn btn-outline btn-sm">{{ t('view_all') }}</a>
  </div>
  <div class="horiz-scroll">
    {% for g in games %}
    <a href="{{ url_for('web.team', game_id=g.id) }}" class="scroll-item game-3d-card" style="width:200px;text-decoration:none">
      <div class="card-inner">
        <div class="card" style="padding:0;overflow:hidden;height:165px">
          {% if g.image %}
          <div class="game-img-wrap">
            <img src="{{ g.image }}" alt="{{ g.name }}" class="game-img" loading="lazy"
                 onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
          </div>
          {% endif %}
          <div style="display:none;width:100%;height:115px;align-items:center;justify-content:center;background:var(--bg2)">
            <span style="font-size:2.5rem">{{ g.icon }}</span>
          </div>
          <div style="padding:0.65rem">
            <div style="font-family:'Inter';font-weight:700;font-size:0.92rem">{{ g.name }}</div>
            <div style="font-size:0.72rem;color:var(--text-mute);margin-top:0.2rem">{{ g.modes.filter_by(is_active=True).count() }} modes</div>
          </div>
        </div>
      </div>
    </a>
    {% endfor %}
  </div>
</div>

<!-- QUICK ACTIONS -->
<div class="grid grid-4 reveal" style="margin-bottom:1rem">
  <a href="{{ url_for('web.team') }}" class="card" style="text-align:center;padding:1rem 0.6rem;text-decoration:none;cursor:pointer">
    <span class="txt-float" style="font-size:1.5rem;display:block;margin-bottom:0.4rem;color:var(--neon)">&#9784;</span>
    <div style="font-family:'Inter';font-weight:600;font-size:0.88rem">{{ t('our_team') }}</div>
  </a>
  <a href="{{ url_for('web.search') }}" class="card" style="text-align:center;padding:1rem 0.6rem;text-decoration:none;cursor:pointer">
    <span class="txt-float" style="font-size:1.5rem;display:block;margin-bottom:0.4rem;color:var(--blue);animation-delay:0.3s">&#9654;</span>
    <div style="font-family:'Inter';font-weight:600;font-size:0.88rem">{{ t('daily_matches') }}</div>
  </a>
  <a href="{{ url_for('web.leaderboard') }}" class="card" style="text-align:center;padding:1rem 0.6rem;text-decoration:none;cursor:pointer">
    <span class="txt-float" style="font-size:1.5rem;display:block;margin-bottom:0.4rem;color:var(--purple);animation-delay:0.6s">&#9733;</span>
    <div style="font-family:'Inter';font-weight:600;font-size:0.88rem">{{ t('leaderboard') }}</div>
  </a>
  <a href="{{ url_for('web.special') }}" class="card" style="text-align:center;padding:1rem 0.6rem;text-decoration:none;cursor:pointer">
    <span class="txt-float" style="font-size:1.5rem;display:block;margin-bottom:0.4rem;color:var(--pink);animation-delay:0.9s">&#9829;</span>
    <div style="font-family:'Inter';font-weight:600;font-size:0.88rem">{{ t('special_matches') }}</div>
  </a>
</div>

<!-- ACTIVE CREDENTIALS -->
{% if active_creds %}
<div class="reveal" style="margin-bottom:1rem">
  {% for m in active_creds %}
  <div class="card" style="border-color:rgba(171,124,245,0.2);padding:0.8rem 1.1rem;margin-bottom:0.5rem">
    <div class="justify-between" style="margin-bottom:0.5rem">
      <div>
        <span style="font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--neon)">
          <span class="live-dot"></span>&nbsp; LIVE
        </span>
        <span style="margin-right:0.5rem;font-weight:700;font-size:0.95rem">{{ m.title }}</span>
      </div>
      <span class="badge badge-green">{{ m.game.name }}</span>
    </div>
    <div class="flex" style="gap:1.5rem">
      <div>
        <div style="font-size:0.62rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.15rem">{{ t('room_code') }}</div>
        <div style="font-family:'Orbitron';font-size:1.1rem;font-weight:700;color:var(--neon);letter-spacing:0.08em">{{ m.room_code }}</div>
      </div>
      <div style="width:1px;background:var(--border)"></div>
      <div>
        <div style="font-size:0.62rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.15rem">{{ t('room_password') }}</div>
        <div style="font-family:'Orbitron';font-size:1.1rem;font-weight:700;color:var(--blue);letter-spacing:0.08em">{{ m.room_password }}</div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

<!-- DAILY MATCHES -->
<div class="reveal" style="margin-bottom:1rem">
  <div class="section-header">
    <h2>{{ t('daily_matches') }}</h2>
    <a href="{{ url_for('web.search') }}" class="btn btn-outline btn-sm">{{ t('view_all') }}</a>
  </div>
  {% if matches %}
  <div class="horiz-scroll">
    {% for m in matches[:8] %}
    <div class="scroll-item" style="width:290px">
      <div class="card" style="padding:0;overflow:hidden">
        <div style="padding:0.85rem">
          <div class="justify-between" style="margin-bottom:0.4rem">
            <span class="badge badge-green" style="font-size:0.65rem">{{ m.game.name }}</span>
            <span class="badge {% if m.status=='live' %}badge-red{% elif m.status=='pending' %}badge-amber{% else %}badge-cyan{% endif %}" style="font-size:0.62rem">{{ m.status }}</span>
          </div>
          <div style="font-weight:700;font-size:0.95rem;margin-bottom:0.3rem">{{ m.title }}</div>
          <div style="font-size:0.78rem;color:var(--text-dim);margin-bottom:0.6rem">
            {{ m.starts_at.strftime('%H:%M') }} &middot; {{ m.starts_at.strftime('%m/%d') }}
          </div>
          <div class="justify-between" style="align-items:center">
            <span style="font-size:0.78rem;color:var(--text-mute)">{{ m.current_players }}/{{ m.capacity }}</span>
            {% if m.id in registered_match_ids %}
              <span class="badge badge-green" style="font-size:0.62rem">&#10003; {{ t('you_are_in') }}</span>
            {% else %}
              <a href="{{ url_for('web.match_join', match_id=m.id) }}" class="btn btn-primary btn-sm" style="font-size:0.75rem;padding:0.3rem 0.7rem">{{ t('join_now') }}</a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="card text-center" style="padding:1.5rem;color:var(--text-mute);font-size:0.88rem">{{ t('no_matches_today') }}</div>
  {% endif %}
</div>

<!-- WALLET STATS -->
<div class="grid grid-3 reveal" style="margin-bottom:1rem">
  <a href="{{ url_for('web.wallet') }}" class="card" style="text-decoration:none;padding:1rem">
    <div style="display:flex;align-items:center;gap:0.75rem">
      <div class="hero-stat-icon green">&#9830;</div>
      <div style="flex:1">
        <div style="font-family:'Orbitron';font-size:1.35rem;font-weight:700;color:var(--neon)" class="txt-neon">
          {{ (user.wallets|selectattr('kind','equalto','deposit')|list|first).balance if user.wallets|selectattr('kind','equalto','deposit')|list else 0 }}
        </div>
        <div style="font-size:0.78rem;color:var(--text-mute);margin-top:0.15rem">{{ t('deposit_wallet') }}</div>
      </div>
    </div>
  </a>
  <a href="{{ url_for('web.wallet') }}" class="card" style="text-decoration:none;padding:1rem">
    <div style="display:flex;align-items:center;gap:0.75rem">
      <div class="hero-stat-icon purple">&#9733;</div>
      <div style="flex:1">
        <div style="font-family:'Orbitron';font-size:1.35rem;font-weight:700;color:var(--purple)" class="txt-neon">
          {{ (user.wallets|selectattr('kind','equalto','payout')|list|first).balance if user.wallets|selectattr('kind','equalto','payout')|list else 0 }}
        </div>
        <div style="font-size:0.78rem;color:var(--text-mute);margin-top:0.15rem">{{ t('payout_wallet') }}</div>
      </div>
    </div>
  </a>
  <a href="{{ url_for('web.search') }}" class="card" style="text-decoration:none;padding:1rem">
    <div style="display:flex;align-items:center;gap:0.75rem">
      <div class="hero-stat-icon blue">&#9654;</div>
      <div style="flex:1">
        <div style="font-family:'Orbitron';font-size:1.35rem;font-weight:700;color:var(--blue)" class="txt-neon">{{ upcoming_matches|length }}</div>
        <div style="font-size:0.78rem;color:var(--text-mute);margin-top:0.15rem">{{ t('upcoming') }}</div>
      </div>
    </div>
  </a>
</div>

<!-- ABOUT / DESCRIPTION -->
<div class="about-card reveal" style="margin-top:0.5rem">
  <h3 class="txt-shine">{{ t('about_brand') }}</h3>
  <p>{{ t('about_desc_1') }}</p>
  <p style="margin-top:0.35rem">{{ t('about_desc_2') }}</p>
  <div class="about-features">
    <div class="feat txt-float">{{ t('feature_tournaments') }}</div>
    <div class="feat txt-float" style="animation-delay:0.2s">{{ t('feature_teams') }}</div>
    <div class="feat txt-float" style="animation-delay:0.4s">{{ t('feature_wallet') }}</div>
    <div class="feat txt-float" style="animation-delay:0.6s">{{ t('feature_leaderboard') }}</div>
    <div class="feat txt-float" style="animation-delay:0.8s">{{ t('feature_special') }}</div>
    <div class="feat txt-float" style="animation-delay:1s">{{ t('feature_security') }}</div>
  </div>
</div>

</div><!-- /container -->
{% endblock %}