// views/hub.jsx — Home / Overview. The front door to World Cup Live.
// Distinct from the "Live Today" dashboard: this is the hub that orients you
// (countdown / day-counter) and routes you into every section of the app.
function HubView({ onRoute, clock }) {
  const ck = clock || window.WCL_CLOCK.compute('live');
  const meta = window.WCL_2026.meta;

  const sections = [
    { id: 'live',    label: 'Live Today',  Icon: I.Activity, desc: ck.phase === 'live' ? '2 matches in play now' : 'Opens when the ball rolls', accent: 'var(--live-red)' },
    { id: 'matches', label: 'Fixtures',    Icon: I.Calendar, desc: '104 matches · 39 days', accent: 'var(--upcoming)' },
    { id: 'table',   label: 'Group Table', Icon: I.List,     desc: '12 groups of four', accent: 'var(--pitch)' },
    { id: 'bracket', label: 'Knockout',    Icon: I.Bracket,  desc: 'Round of 32 → final', accent: 'var(--trophy)' },
    { id: 'players', label: 'Players',     Icon: I.Users,    desc: 'Stars, legends, Golden Boot', accent: 'var(--info)' },
    { id: 'teams',   label: 'Teams',       Icon: I.Shield,   desc: 'All 48 qualified nations', accent: 'var(--brand)' },
    { id: 'agent',   label: 'Ask the Agent', Icon: I.Chat,   desc: 'WorldCupAI answers anything', accent: 'var(--ws-context)' },
    { id: 'history', label: 'History',     Icon: I.Book,     desc: '1930 → 2022, every edition', accent: 'var(--ws-lists)' },
  ];

  return (
    <div>
      {/* HERO */}
      <section className="match-hero" style={{ padding: '32px 32px 30px', marginBottom: 16 }}>
        <div className="meta-strip" style={{ marginBottom: 22 }}>
          <div className="stage-tag" style={{ gap: 10 }}>
            <SoccerBall size={20} />
            <span>FIFA World Cup 26 · {meta.hosts.join(' · ')}</span>
          </div>
          <span>{ck.startLabel} – {ck.endLabel}</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 28, alignItems: 'center', flexWrap: 'wrap' }}>
          <div>
            <h1 style={{ margin: 0, fontSize: 44, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.02 }}>
              {ck.phase === 'pre'  && <>The 23rd World Cup<br/>is almost here.</>}
              {ck.phase === 'live' && <>The world is watching.<br/>So are we.</>}
              {ck.phase === 'post' && <>104 matches. One champion.<br/>That was World Cup 26.</>}
            </h1>
            <p className="sub" style={{ fontSize: 15, maxWidth: 540, marginTop: 14, lineHeight: 1.5 }}>
              48 teams · 16 cities · 3 host nations · 104 matches. Live scores, a probability model,
              pick&rsquo;em, full history back to 1930, and an AI that knows all of it.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 20, flexWrap: 'wrap' }}>
              {ck.phase === 'live'
                ? <button className="btn btn-primary btn-sm" onClick={() => onRoute('live')}><I.Activity size={14} /> Watch live</button>
                : <button className="btn btn-primary btn-sm" onClick={() => onRoute('matches')}><I.Calendar size={14} /> See the fixtures</button>}
              <button className="btn btn-secondary btn-sm" onClick={() => onRoute('agent')}><I.Chat size={14} /> Ask the agent</button>
              <button className="btn btn-secondary btn-sm" onClick={() => onRoute('guide')}><I.Compass size={14} /> Full guide</button>
            </div>
          </div>

          {/* Countdown / day-counter card */}
          <div style={{
            minWidth: 280,
            background: 'var(--surface)',
            border: '1px solid var(--border)',
            borderRadius: 'var(--radius-lg)',
            padding: '22px 24px',
            textAlign: 'center',
          }}>
            {ck.phase === 'pre' && <>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Kick-off in</div>
              <CountdownClock target={ck.start} />
              <div className="subtle" style={{ fontSize: 12, marginTop: 16 }}>Opening match · {meta.openingMatch.city}</div>
            </>}
            {ck.phase === 'live' && <>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Tournament day</div>
              <div style={{ fontSize: 64, fontWeight: 700, letterSpacing: '-0.04em', color: 'var(--trophy)', lineHeight: 1 }}>
                {ck.dayN}<span style={{ fontSize: 26, color: 'var(--foreground-muted)' }}>/{ck.totalDays}</span>
              </div>
              <div className="hd-pulse" style={{ marginTop: 16 }}><span className="dot" /> 2 LIVE NOW</div>
            </>}
            {ck.phase === 'post' && <>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Champions</div>
              <Flag code="ARG" size="xl" />
              <div className="strong" style={{ fontSize: 20, fontWeight: 700, marginTop: 10 }}>Argentina</div>
            </>}
          </div>
        </div>
      </section>

      {/* SECTION CARDS */}
      <div className="panel-head" style={{ marginBottom: 12 }}>
        <h3 style={{ fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)' }}>Explore the tournament</h3>
        <a className="link subtle" onClick={() => onRoute('sitemap')}>All pages <I.ChevR size={12} /></a>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12, marginBottom: 16 }}>
        {sections.map(s => (
          <button key={s.id} className="hub-card" onClick={() => onRoute(s.id)}>
            <span className="hub-ic" style={{ color: s.accent, background: 'color-mix(in oklch, ' + s.accent + ' 14%, transparent)', borderColor: 'color-mix(in oklch, ' + s.accent + ' 30%, transparent)' }}>
              <s.Icon size={18} />
            </span>
            <span style={{ flex: 1 }}>
              <span className="hub-title">{s.label}</span>
              <span className="hub-desc">{s.desc}</span>
            </span>
            <I.ChevR size={15} className="subtle" />
          </button>
        ))}
      </div>

      {/* QUICK STRIPS */}
      <div className="col2" style={{ marginTop: 4 }}>
        <section className="panel">
          <div className="panel-head">
            <h3>{ck.phase === 'live' ? "Today's fixtures" : 'Opening matches'}</h3>
            <a className="link subtle" onClick={() => onRoute('matches')}>All fixtures <I.ChevR size={12} /></a>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {window.WCL_TODAY.slice(0, 4).map(t => <FixtureRow key={t.id} row={t} onClick={() => onRoute('match')} />)}
          </div>
        </section>

        <section className="panel">
          <div className="panel-head">
            <h3>To lift the trophy</h3>
            <a className="link subtle" onClick={() => onRoute('odds')}>Odds & model <I.ChevR size={12} /></a>
          </div>
          <table className="table">
            <thead><tr><th style={{ width: 24 }}>#</th><th>Team</th><th style={{ width: 110, textAlign: 'right' }}>Model</th></tr></thead>
            <tbody>
              {window.WCL_TROPHY_ODDS.slice(0, 6).map((r, i) => (
                <tr key={r.team} onClick={() => onRoute('team', { code: r.team })} style={{ cursor: 'pointer' }}>
                  <td className="mono subtle">{i + 1}</td>
                  <td className="strong"><TeamRow code={r.team} /></td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="probbar model" style={{ flex: 1 }}><span style={{ width: (r.model / 0.15) * 100 + '%' }} /></div>
                      <span className="mono" style={{ width: 42, textAlign: 'right' }}>{(r.model * 100).toFixed(1)}%</span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>
    </div>
  );
}
Object.assign(window, { HubView });