// live-facts.jsx — "Did you know?" live context carousel for Game Day.
// Sits between the broadcast stage and the tab strip. Auto-rotates, swipeable,
// dot indicators. Editorial broadcast-factoid treatment (not a chatbot card).

const LIVE_FACTS = {
  wvu: [
    { k: 'Stadium', t: 'Milan Puskar Stadium opened in 1980 and seats 60,000.' },
    { k: 'Tradition', t: '"Take Me Home, Country Roads" has played after every home win for decades.' },
    { k: 'Record', t: 'Geno Smith threw 42 touchdown passes in 2012 — still the school record.' },
    { k: 'Conference', t: 'WVU joined the Big 12 in 2012 after 21 years in the Big East.' },
    { k: 'Tradition', t: 'The Mountaineer mascot fires a musket after every score.' },
  ],
  utah: [
    { k: 'Streak', t: 'Every Utah home game has sold out since 2010.' },
    { k: 'Stadium', t: 'Rice-Eccles hosted the opening and closing ceremonies of the 2002 Winter Olympics.' },
    { k: 'Crowd', t: 'The MUSS — the Mighty Utah Student Section — fills the south end zone.' },
    { k: 'Conference', t: 'Utah joined the Big 12 in 2024 after 13 seasons in the Pac-12.' },
  ],
  osu: [
    { k: 'Stadium', t: 'Ohio Stadium opened in 1922 and holds more than 102,000.' },
    { k: 'Tradition', t: 'Script Ohio\'s "i" is dotted by a sousaphone player — one of college football\'s great honors.' },
    { k: 'Tradition', t: 'Buckeye leaf helmet stickers are awarded for big plays.' },
    { k: 'Rivalry', t: 'OSU\u2013Michigan is simply called "The Game."' },
  ],
  kentucky: [
    { k: 'Stadium', t: 'Kroger Field opened in 1973 and seats about 61,000.' },
    { k: 'Program', t: 'Kentucky basketball has won 8 national championships.' },
    { k: 'Arena', t: 'Rupp Arena is named for legendary coach Adolph Rupp.' },
    { k: 'Tradition', t: 'The "C-A-T-S, Cats, Cats, Cats!" chant echoes at every game.' },
  ],
  rsl: [
    { k: 'Club', t: 'Real Salt Lake was founded in 2004 and won MLS Cup in 2009.' },
    { k: 'Stadium', t: 'America First Field opened in Sandy in 2008.' },
    { k: 'Motto', t: '"The team is the star" has been the club motto since the MLS Cup era.' },
  ],
  royals: [
    { k: 'Club', t: 'The Utah Royals first joined the NWSL in 2018 and returned in 2024.' },
    { k: 'Stadium', t: 'The Royals share America First Field with Real Salt Lake.' },
    { k: 'League', t: 'The NWSL is the top tier of American women\'s soccer.' },
  ],
};

function LiveFactsCarousel() {
  const facts = LIVE_FACTS[WVU.id] || LIVE_FACTS.wvu;
  const [idx, setIdx] = React.useState(0);
  const touchX = React.useRef(null);

  // auto-rotate every 5s
  React.useEffect(() => {
    const iv = setInterval(() => setIdx(i => (i + 1) % facts.length), 5000);
    return () => clearInterval(iv);
  }, [facts.length]);

  const go = (d) => setIdx(i => (i + d + facts.length) % facts.length);
  const f = facts[idx];

  return (
    <div style={{ padding: '14px 16px 0' }}>
      <div
        onClick={() => go(1)}
        onTouchStart={(e) => { touchX.current = e.touches[0].clientX; }}
        onTouchEnd={(e) => {
          if (touchX.current == null) return;
          const dx = e.changedTouches[0].clientX - touchX.current;
          if (Math.abs(dx) > 36) go(dx < 0 ? 1 : -1);
          touchX.current = null;
        }}
        style={{
          padding: '12px 14px', borderRadius: DS.r.md, cursor: 'pointer',
          background: WVU.ink2, border: `1px solid ${WVU.line}`,
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
          <span style={{
            width: 6, height: 6, borderRadius: 3, background: WVU.gold,
            animation: 'mtnPulse 1.4s ease-in-out infinite', flexShrink: 0,
          }} />
          <span style={{
            fontFamily: DS.sans, fontSize: 10.5, fontWeight: 700,
            color: WVU.gold, letterSpacing: '0.11em', textTransform: 'uppercase',
          }}>Did you know? · {f.k}</span>
        </div>
        <div style={{
          fontFamily: DS.sans, fontSize: 14, fontWeight: 600, color: WVU.cream,
          lineHeight: 1.45, letterSpacing: '-0.005em',
          minHeight: 42,
        }}>{f.t}</div>
        <div style={{ display: 'flex', gap: 5, marginTop: 9, justifyContent: 'center' }}>
          {facts.map((_, i) => (
            <span key={i} onClick={(e) => { e.stopPropagation(); setIdx(i); }} style={{
              width: i === idx ? 16 : 6, height: 6, borderRadius: 3,
              background: i === idx ? WVU.gold : 'rgba(255,255,255,0.22)',
              transition: 'all 220ms ease', cursor: 'pointer',
            }} />
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LiveFactsCarousel });