/* Hero + Nav + Marquee */

function Nav() {
  const links = [
    { label: "Fixtures", href: "#fixtures" },
    { label: "Teams", href: "#teams" },
    { label: "Ladder", href: "#ladder" },
    { label: "Players", href: "#players" },
    { label: "News", href: "#news" },
    { label: "About", href: "#about" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-logo">
          <img src="assets/logo.png" alt="Sunbury United CC" />
          <div className="name">
            Sunbury United
            <span>Cricket Club · Est. 1973</span>
          </div>
        </a>
        <div className="nav-links">
          {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
          <button className="nav-cta" onClick={() => document.getElementById('join').scrollIntoView({behavior:'smooth'})}>Join the Hive</button>
        </div>
      </div>
    </nav>
  );
}

function Countdown({ target }) {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  const pad = n => String(n).padStart(2, '0');
  return (
    <div className="countdown">
      <div className="cell"><div className="n">{pad(d)}</div><div className="l">Days</div></div>
      <div className="cell"><div className="n">{pad(h)}</div><div className="l">Hrs</div></div>
      <div className="cell"><div className="n">{pad(m)}</div><div className="l">Min</div></div>
      <div className="cell"><div className="n">{pad(s)}</div><div className="l">Sec</div></div>
    </div>
  );
}

function Hero() {
  const phq = React.useContext(window.PHQContext || React.createContext(null)) || {};
  const { loading, data } = phq;
  const fx = data?.fixtures;
  const next = fx?.next;
  const lastWin = fx?.completed?.find(r => r.status === 'win');
  const nextDate = next?.rawDate || null;
  const hasNext = !!next && nextDate && nextDate.getTime() > Date.now();

  const nextDayLabel = hasNext
    ? nextDate.toLocaleDateString('en-AU', { weekday: 'long' }).toUpperCase()
    : null;

  return (
    <section className="hero hex-bg" id="home">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow">GDCA · Sunbury United CC · Est. 1973</div>
          <h1 style={{marginTop:18}}>
            Fear the<br/>
            <span className="gold">Hornets</span><br/>
            <span className="outlined">Black & Gold</span><br/>
            Since 1973
          </h1>
          <p className="hero-sub">
            Four senior sides. Eight junior teams. A Woolworths Blasters program for the next generation.
            One of the Gisborne District's most successful cricket clubs — on and off Langama Park.
          </p>
          <div className="hero-cta-row">
            <button className="btn-gold" onClick={() => document.getElementById('fixtures').scrollIntoView({behavior:'smooth'})}>
              {hasNext ? 'Next Match' : 'Season Info'} <span>→</span>
            </button>
            <button className="btn-ghost" onClick={() => document.getElementById('join').scrollIntoView({behavior:'smooth'})}>
              Register to Play
            </button>
          </div>
          <div className="hero-meta">
            <div className="item"><div className="k">Founded</div><div className="v">1973</div></div>
            <div className="item"><div className="k">Members</div><div className="v">155+</div></div>
            <div className="item"><div className="k">Teams</div><div className="v">12</div></div>
          </div>
        </div>
        <div className="hero-logo-wrap">
          <img className="hero-hornet" src="assets/hornet.png" alt="Sunbury Hornet" />
          {hasNext ? (
            <div className="fixture-tile t-1">
              <span className="tag">{nextDayLabel}</span>
              <div className="teams">Sunbury Utd {next.home ? 'vs' : '@'}<br/>{next.opponent || 'TBC'}</div>
              <div className="when">{(next.time?.slice(0,5) || 'TBC')} · {(next.venue || '').toUpperCase() || 'TBC'} · {next.grade || ''}</div>
            </div>
          ) : !loading ? (
            <div className="fixture-tile t-1">
              <span className="tag">Off-Season</span>
              <div className="teams">Pre-season<br/>training · Aug</div>
              <div className="when">SEASON 26/27 · FIRST BALL OCT</div>
            </div>
          ) : null}
          {lastWin ? (
            <div className="fixture-tile t-2">
              <span className="tag">Last Result</span>
              <div className="teams">{lastWin.label?.startsWith('W') ? lastWin.label.replace('W +', 'Won by ') : lastWin.label}<br/>vs {lastWin.opponent}</div>
              <div className="when">{lastWin.grade} · VIA PLAYHQ</div>
            </div>
          ) : !loading ? (
            <div className="fixture-tile t-2">
              <span className="tag">Archive</span>
              <div className="teams">Season 25/26<br/>in the books</div>
              <div className="when">VIEW FULL LADDER ↓</div>
            </div>
          ) : null}
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const phq = React.useContext(window.PHQContext || React.createContext(null)) || {};
  const data = phq.data;
  const fx = data?.fixtures;
  const ladder = data?.ladder;

  let items = [];
  if (fx?.completed?.length || fx?.upcoming?.length || ladder?.rows?.length) {
    // Build ticker from live data
    const ours = ladder?.rows?.find(r => r.ours);
    if (ours) items.push(`${ladder.gradeName?.toUpperCase() || '1ST XI'} · FINISHED ${ours.pos}${['ST','ND','RD'][ours.pos-1]||'TH'} · ${ours.w}W ${ours.l}L ${ours.d}D`);

    for (const r of (fx?.completed || []).slice(0, 3)) {
      items.push(`${r.label} ${r.status === 'win' ? 'VS' : 'TO'} ${r.opponent?.toUpperCase()} · ${r.grade?.toUpperCase()}`);
    }
    for (const r of (fx?.upcoming || []).slice(0, 2)) {
      items.push(`NEXT · ${r.grade?.toUpperCase()} · ${r.home ? 'VS' : '@'} ${r.opponent?.toUpperCase()}`);
    }
    items.push('LIVE FROM PLAYHQ · GDCA');
    items.push('REGO OPEN FOR 26/27');
    items.push('WOOLWORTHS BLASTERS · AGES 5–10');
  } else {
    items = [
      'SEASON 26/27 KICKS OFF OCTOBER',
      'PRE-SEASON TRAINING · AUGUST',
      'REGO NOW OPEN · ALL GRADES',
      'WOOLWORTHS BLASTERS · AGES 5–10',
      'LANGAMA PARK · SUNBURY VIC',
      'NEW MEMBERS WELCOME',
      'BLACK & GOLD SINCE 1973',
      'LIVE RESULTS VIA PLAYHQ',
    ];
  }
  const loop = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((t, i) => (
          <div key={i} className="marquee-item">
            <span className="dot"></span>{t}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Countdown });