<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="theme-color" content="#C8102E">
  <meta name="description" content="England & World Cup 2026 — Live scores, fixtures, Group L standings and ZAiLUM's anthem We're Still Singing">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="ENG WC26">
  <title>England World Cup 2026 | ZAiLUM Hub</title>
  <link rel="manifest" href="manifest.json">
  <link rel="apple-touch-icon" href="icons/icon-192.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- Live Score Ticker -->
  <div class="ticker-bar" id="tickerBar">
    <div class="ticker-inner" id="tickerInner">
      <span>🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENGLAND · GROUP L · WORLD CUP 2026</span>
      <span>⚽ ENG vs CRO · 17 JUN 2026 · DALLAS · 9PM BST</span>
      <span>⚽ ENG vs GHA · 23 JUN 2026 · BOSTON · 9PM BST</span>
      <span>⚽ PAN vs ENG · 27 JUN 2026 · LOS ANGELES · 9PM BST</span>
      <span>🎵 "WE'RE STILL SINGING" — NEW ANTHEM BY ZAiLUM · OUT 24.04.2026</span>
      <span>🏆 FIFA WORLD CUP 2026 · USA / CANADA / MEXICO · 11 JUN – 19 JUL</span>
      <span>🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENGLAND · GROUP L · WORLD CUP 2026</span>
      <span>⚽ ENG vs CRO · 17 JUN 2026 · DALLAS · 9PM BST</span>
      <span>⚽ ENG vs GHA · 23 JUN 2026 · BOSTON · 9PM BST</span>
      <span>⚽ PAN vs ENG · 27 JUN 2026 · LOS ANGELES · 9PM BST</span>
      <span>🎵 "WE'RE STILL SINGING" — NEW ANTHEM BY ZAiLUM · OUT 24.04.2026</span>
      <span>🏆 FIFA WORLD CUP 2026 · USA / CANADA / MEXICO · 11 JUN – 19 JUL</span>
    </div>
  </div>

  <!-- Nav -->
  <nav class="nav" id="mainNav">
    <div class="nav-brand">
      <span class="nav-flag">🏴󠁧󠁢󠁥󠁮󠁧󠁿</span>
      <span class="nav-title">ENG <span class="nav-accent">WC26</span></span>
    </div>
    <!-- Desktop Nav (hidden on mobile) -->
    <nav class="desktop-nav">
      <ul class="desktop-nav-pill" id="desktopNavPill">
        <span class="nav-cursor" id="navCursor"></span>
        <li><a href="/" class="desktop-nav-link active" data-page="home">🏠 Home</a></li>
        <li><a href="/england.html" class="desktop-nav-link" data-page="england">🏴󠁧󠁢󠁥󠁮󠁧󠁿 England</a></li>
        <li><a href="/fixtures.html" class="desktop-nav-link" data-page="fixtures">📅 Fixtures</a></li>
        <li><a href="/groups.html" class="desktop-nav-link" data-page="groups">📊 Groups</a></li>
        <li><a href="/tournament.html" class="desktop-nav-link" data-page="tournament">🏆 Tournament</a></li>
        <li><a href="/zailum.html" class="desktop-nav-link zailum" data-page="zailum">🎵 ZAiLUM</a></li>
      </ul>
    </nav>
    <button class="install-btn-nav" id="installBtnNav" hidden>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
      Install
    </button>
    <button class="hamburger" id="hamburger" aria-label="Menu">
      <span></span><span></span><span></span>
    </button>
  </nav>

  <!-- Mobile Drawer -->
  <div class="drawer-overlay" id="drawerOverlay"></div>
  <div class="drawer" id="drawer">
    <nav class="drawer-nav">
      <a href="/" class="drawer-link active">🏠 Home</a>
      <a href="/england.html" class="drawer-link">🏴󠁧󠁢󠁥󠁮󠁧󠁿 England Hub</a>
      <a href="/fixtures.html" class="drawer-link">📅 Fixtures</a>
      <a href="/groups.html" class="drawer-link">📊 Group Tables</a>
      <a href="/tournament.html" class="drawer-link">🏆 Tournament</a>
      <a href="/zailum.html" class="drawer-link zailum-link">🎵 ZAiLUM</a>
    </nav>
    <button class="install-btn-drawer" id="installBtnDrawer" hidden>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
      Add to Home Screen
    </button>
  </div>

  <!-- Bottom Tab Bar -->
  <nav class="tab-bar">
    <a href="/" class="tab active">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
      <span>Home</span>
    </a>
    <a href="/england.html" class="tab">
      <span class="tab-flag">🏴󠁧󠁢󠁥󠁮󠁧󠁿</span>
      <span>England</span>
    </a>
    <a href="/fixtures.html" class="tab">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/></svg>
      <span>Fixtures</span>
    </a>
    <a href="/groups.html" class="tab">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14H7v-2h5v2zm5-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
      <span>Groups</span>
    </a>
    <a href="/tournament.html" class="tab">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0 0 11 15.9V18H9v2h6v-2h-2v-2.1a5.01 5.01 0 0 0 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2z"/></svg>
      <span>Trophy</span>
    </a>
  </nav>

  <!-- Main -->
  <main class="main-content" id="mainContent">

    <!-- England Hero Card: Next Match -->
    <section class="england-hero" id="englandHero">
      <div class="hero-pill">
        <span class="live-dot" id="liveDot"></span>
        <span id="heroStatus">NEXT MATCH</span>
      </div>
      <div class="hero-match" id="heroMatch">
        <div class="hero-team">
          <div class="flag-circle flag-lg" id="homeTeamFlag">🏴󠁧󠁢󠁥󠁮󠁧󠁿</div>
          <span class="hero-team-name" id="homeTeamName">England</span>
        </div>
        <div class="hero-score-block">
          <div class="hero-score" id="heroScore">VS</div>
          <div class="hero-meta" id="heroMeta">
            <div class="hero-meta-date" id="heroDate">17 Jun 2026</div>
            <div class="hero-meta-time" id="heroTime">21:00 BST</div>
          </div>
        </div>
        <div class="hero-team">
          <div class="flag-circle flag-lg" id="awayTeamFlag">🇭🇷</div>
          <span class="hero-team-name" id="awayTeamName">Croatia</span>
        </div>
      </div>
      <div class="hero-venue" id="heroVenue">📍 AT&T Stadium, Dallas, USA</div>
      <div class="hero-group-badge">GROUP L · FIFA WORLD CUP 2026</div>
    </section>

    <!-- England Quick Stats -->
    <section class="quick-stats" id="quickStats">
      <div class="stat-pill"><span class="stat-label">GROUP</span><span class="stat-value england-accent">L</span></div>
      <div class="stat-pill"><span class="stat-label">PLAYED</span><span class="stat-value" id="statPlayed">0</span></div>
      <div class="stat-pill"><span class="stat-label">POINTS</span><span class="stat-value england-accent" id="statPoints">0</span></div>
      <div class="stat-pill"><span class="stat-label">POSITION</span><span class="stat-value" id="statPos">-</span></div>
    </section>

    <!-- Today's Matches -->
    <section class="section">
      <div class="section-header">
        <h2 class="section-title">TODAY'S MATCHES</h2>
        <button class="refresh-btn" id="refreshBtn" onclick="refreshData()">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
          Refresh
        </button>
      </div>
      <div class="matches-scroll" id="matchesScroll">
        <div class="loading-shimmer match-card-shimmer"></div>
        <div class="loading-shimmer match-card-shimmer"></div>
        <div class="loading-shimmer match-card-shimmer"></div>
      </div>
    </section>

    <!-- Group L Standings -->
    <section class="section">
      <div class="section-header">
        <h2 class="section-title">GROUP L STANDINGS</h2>
        <span class="section-badge">ENG FIXTURES</span>
      </div>
      <div class="standings-card" id="groupLTable">
        <div class="standings-loading">Loading Group L...</div>
      </div>
    </section>

    <!-- World Cup Countdown -->
    <section class="countdown-section">
      <div class="countdown-label">FIFA WORLD CUP 2026 KICKS OFF</div>
      <div class="countdown-grid" id="countdownGrid">
        <div class="countdown-unit"><span class="countdown-num" id="cdDays">65</span><span class="countdown-lbl">DAYS</span></div>
        <div class="countdown-sep">:</div>
        <div class="countdown-unit"><span class="countdown-num" id="cdHours">12</span><span class="countdown-lbl">HRS</span></div>
        <div class="countdown-sep">:</div>
        <div class="countdown-unit"><span class="countdown-num" id="cdMins">30</span><span class="countdown-lbl">MIN</span></div>
        <div class="countdown-sep">:</div>
        <div class="countdown-unit"><span class="countdown-num" id="cdSecs">00</span><span class="countdown-lbl">SEC</span></div>
      </div>
    </section>

    <!-- England Fixtures Preview -->
    <section class="section">
      <div class="section-header">
        <h2 class="section-title">ENGLAND GROUP L FIXTURES</h2>
        <a href="england.html" class="see-all-link">View all →</a>
      </div>
      <div class="fixture-list" id="englandFixtures">
        <!-- Match 1 -->
        <div class="fixture-row">
          <div class="fixture-date-block">
            <span class="fixture-date">17 JUN</span>
            <span class="fixture-time">21:00 BST</span>
          </div>
          <div class="fixture-teams">
            <div class="fixture-team">
              <span class="flag-sm">🏴󠁧󠁢󠁥󠁮󠁧󠁿</span>
              <span class="fixture-team-name">England</span>
            </div>
            <div class="fixture-vs-badge upcoming">VS</div>
            <div class="fixture-team right">
              <span class="fixture-team-name">Croatia</span>
              <span class="flag-sm">🇭🇷</span>
            </div>
          </div>
          <div class="fixture-venue-mini">Dallas, USA</div>
        </div>
        <!-- Match 2 -->
        <div class="fixture-row">
          <div class="fixture-date-block">
            <span class="fixture-date">23 JUN</span>
            <span class="fixture-time">21:00 BST</span>
          </div>
          <div class="fixture-teams">
            <div class="fixture-team">
              <span class="flag-sm">🏴󠁧󠁢󠁥󠁮󠁧󠁿</span>
              <span class="fixture-team-name">England</span>
            </div>
            <div class="fixture-vs-badge upcoming">VS</div>
            <div class="fixture-team right">
              <span class="fixture-team-name">Ghana</span>
              <span class="flag-sm">🇬🇭</span>
            </div>
          </div>
          <div class="fixture-venue-mini">Boston, USA</div>
        </div>
        <!-- Match 3 -->
        <div class="fixture-row">
          <div class="fixture-date-block">
            <span class="fixture-date">27 JUN</span>
            <span class="fixture-time">21:00 BST</span>
          </div>
          <div class="fixture-teams">
            <div class="fixture-team">
              <span class="flag-sm">🇵🇦</span>
              <span class="fixture-team-name">Panama</span>
            </div>
            <div class="fixture-vs-badge upcoming">VS</div>
            <div class="fixture-team right">
              <span class="fixture-team-name">England</span>
              <span class="flag-sm">🏴󠁧󠁢󠁥󠁮󠁧󠁿</span>
            </div>
          </div>
          <div class="fixture-venue-mini">Los Angeles, USA</div>
        </div>
      </div>
    </section>

    <!-- Latest News -->
    <section class="section">
      <div class="section-header">
        <h2 class="section-title">LATEST NEWS</h2>
      </div>
      <div class="news-feed" id="newsFeed">
        <div class="loading-shimmer news-shimmer"></div>
        <div class="loading-shimmer news-shimmer"></div>
      </div>
    </section>

    <!-- ZAiLUM Promo Strip -->
    <section class="zailum-strip" onclick="window.location='zailum.html'">
      <div class="zailum-waveform">
        <span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span>
      </div>
      <div class="zailum-strip-content">
        <div class="zailum-strip-title">ZAiLUM</div>
        <div class="zailum-strip-sub">"We're Still Singing" — The Official Anthem · Out 24.04.2026</div>
      </div>
      <div class="zailum-strip-arrow">→</div>
    </section>

  </main>

  <!-- Install FAB -->
  <button class="install-fab" id="installFab" hidden aria-label="Install App">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
  </button>

  <!-- Install Banner -->
  <div class="install-banner" id="installBanner" hidden>
    <div class="install-banner-text">
      <strong>Install ENG WC26</strong> — Get England & World Cup updates instantly
    </div>
    <button class="install-banner-btn" id="installBannerBtn">Install</button>
    <button class="install-banner-close" id="installBannerClose">✕</button>
  </div>

  <!-- iOS Install Modal -->
  <div class="modal-overlay" id="iosModal" hidden>
    <div class="modal">
      <div class="modal-header">
        <div class="modal-icon">🏴󠁧󠁢󠁥󠁮󠁧󠁿</div>
        <h3>Add to Home Screen</h3>
        <button class="modal-close" id="iosModalClose">✕</button>
      </div>
      <div class="modal-steps">
        <div class="modal-step">
          <div class="step-num">1</div>
          <div class="step-text">Tap the <strong>Share</strong> button <span class="step-icon">⎙</span> at the bottom of Safari</div>
        </div>
        <div class="modal-step">
          <div class="step-num">2</div>
          <div class="step-text">Scroll down and tap <strong>"Add to Home Screen"</strong></div>
        </div>
        <div class="modal-step">
          <div class="step-num">3</div>
          <div class="step-text">Tap <strong>"Add"</strong> in the top right corner</div>
        </div>
      </div>
      <p class="modal-note">You'll get the England WC26 app icon on your home screen for instant access during the tournament.</p>
    </div>
  </div>

  <script src="js/espn-api.js"></script>
  <script src="js/app.js"></script>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('sw.js').catch(() => {});
      });
    }
  </script>
</body>
</html>
