/* global React, TeamDisc, SlashGlyph, Form */
// Hero banner + live ticker for the Stats Centre home.
const PLh = window.PL;

function HeroStat({ value, label, sub }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 34, lineHeight: 1, color: 'var(--bs-white)', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{value}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--bs-lime)' }}>{label}</div>
      {sub && <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(255,255,255,0.62)' }}>{sub}</div>}
    </div>
  );
}

function FeaturedMatch() {
  const m = PLh.live[0]; // ARS v NEW
  return (
    <div style={{
      position: 'relative', background: 'rgba(255,255,255,0.07)', backdropFilter: 'blur(2px)',
      border: '1px solid rgba(255,255,255,0.16)', borderRadius: 'var(--radius-md)', padding: '20px 22px',
      minWidth: 320, boxShadow: '0 18px 40px rgba(7,0,60,0.35)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--bs-white)' }}>
          <span className="bs-live-dot" style={{ width: 9, height: 9, borderRadius: '50%', background: '#3DF07A', display: 'inline-block' }} />
          Live Now
        </span>
        <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 12, color: 'var(--bs-lime)', background: 'rgba(209,242,6,0.14)', padding: '3px 8px', borderRadius: 3, transform: 'skewX(-10deg)', display: 'inline-block' }}>
          <span style={{ display: 'inline-block', transform: 'skewX(10deg)' }}>{m.min}</span>
        </span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9, flex: 1 }}>
          <TeamDisc code={m.h} size={52} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: 'var(--bs-white)' }}>{PLh.T[m.h].name}</span>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 44, color: 'var(--bs-white)', letterSpacing: '0.02em', lineHeight: 1 }}>
          {m.hs}<span style={{ color: 'rgba(255,255,255,0.4)', margin: '0 6px' }}>–</span>{m.as}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9, flex: 1 }}>
          <TeamDisc code={m.a} size={52} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: 'var(--bs-white)' }}>{PLh.T[m.a].name}</span>
        </div>
      </div>
      <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, borderTop: '1px solid rgba(255,255,255,0.14)', paddingTop: 13 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', background: 'var(--bs-lime)', color: 'var(--bs-blue-navy)', padding: '3px 7px', borderRadius: 3, whiteSpace: 'nowrap' }}>Early Payout</span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(255,255,255,0.7)', whiteSpace: 'nowrap' }}>Paid out</span>
        </span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(255,255,255,0.85)', whiteSpace: 'nowrap' }}>xG 2.4 – 0.6</span>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section style={{ position: 'relative', background: 'var(--bs-blue-electric)', overflow: 'hidden' }}>
      <img src="assets/background-pattern.svg" alt="" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', color: 'var(--bs-blue-600)', opacity: 0.5, mixBlendMode: 'multiply', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, width: 280, background: 'linear-gradient(90deg, transparent, rgba(14,0,92,0.45))', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '46px 40px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
        <div style={{ flex: '1 1 460px', minWidth: 360 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <SlashGlyph h={18} color="var(--bs-lime)" />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--bs-lime)' }}>{PLh.season} · Matchweek {PLh.matchweek}</span>
          </div>
          <h1 style={{ margin: '0 0 6px', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 78, lineHeight: 0.92, letterSpacing: '-0.02em', textTransform: 'uppercase', color: 'var(--bs-white)' }}>
            Premier<br />League
          </h1>
          <p style={{ margin: '0 0 28px', fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'rgba(255,255,255,0.8)', maxWidth: 440 }}>
            Every stat that matters — live scores, the title race, top scorers and the form behind the table. All in one place.
          </p>
          <div style={{ display: 'flex', gap: 36, flexWrap: 'wrap' }}>
            <HeroStat value="842" label="Goals" sub="this season" />
            <HeroStat value="2.81" label="Goals / game" sub="league avg" />
            <HeroStat value="6" label="Live now" sub="matchweek 32" />
            <HeroStat value="7 pts" label="Title gap" sub="ARS lead" />
          </div>
        </div>
        <div style={{ flex: '0 0 auto' }}><FeaturedMatch /></div>
      </div>
    </section>
  );
}

/* Thin scrolling live ticker under the hero */
function LiveTicker() {
  const all = [...PLh.live, ...PLh.upcoming.map((u) => ({ ...u, state: 'up' }))];
  const Cell = ({ m, i }) => {
    const epo = m.state === 'live' && Math.abs(m.hs - m.as) >= 2;
    return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '0 22px', borderRight: '1px solid rgba(255,255,255,0.12)', height: 46, whiteSpace: 'nowrap' }}>
      {m.state === 'live'
        ? <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#3DF07A', fontWeight: 700 }}>{m.min}</span>
        : <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--bs-lime)', fontWeight: 700 }}>{m.day} {m.time}</span>}
      <TeamDisc code={m.h} size={22} />
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: 'var(--bs-white)' }}>{PLh.T[m.h].name}</span>
      <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 14, color: m.state === 'live' ? 'var(--bs-lime)' : 'rgba(255,255,255,0.55)' }}>{m.state === 'live' ? `${m.hs}–${m.as}` : 'v'}</span>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: 'var(--bs-white)' }}>{PLh.T[m.a].name}</span>
      <TeamDisc code={m.a} size={22} />
      {epo && <EPOBadge height={18} />}
    </div>
    );
  };
  return (
    <div style={{ background: 'var(--bs-blue-navy)', overflow: 'hidden', position: 'relative' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, zIndex: 2, background: 'var(--bs-lime)', color: 'var(--bs-blue-navy)', display: 'flex', alignItems: 'center', padding: '0 18px 0 16px', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', clipPath: 'polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%)' }}>
        <span className="bs-live-dot" style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--bs-blue-navy)', marginRight: 8 }} />Live
      </div>
      <div className="bs-ticker-track" style={{ display: 'flex', alignItems: 'center', paddingLeft: 84, willChange: 'transform' }}>
        {[...all, ...all].map((m, i) => <Cell key={i} m={m} i={i} />)}
      </div>
    </div>
  );
}

Object.assign(window, { Hero, LiveTicker });
