// Sporda — primary screens.
// Each screen is a full-bleed phone surface (390×844 design). Components from
// components.jsx are available on window. Fictional team names; real league
// names are factual. Replace with the actual kit's copy when restored.

const { useState: useState_S } = React;

// ----- Fixture data (fictional) --------------------------------------------
const teams = {
  ATL: { name: 'Atlas FC', code: 'ATL' },
  RVM: { name: 'Rivermont', code: 'RVM' },
  VRD: { name: 'Verdant', code: 'VRD' },
  NOR: { name: 'Norse Utd', code: 'NOR' },
  RHT: { name: 'Royal Hts', code: 'RHT' },
  MAR: { name: 'Marina Bay', code: 'MAR' },
  PDO: { name: 'Pico de Oro', code: 'PDO' },
  SLS: { name: 'Solstice', code: 'SLS' },
  EST: { name: 'Eastside', code: 'EST' },
  LOK: { name: 'Lokomotiv', code: 'LOK' },
  CRB: { name: 'Carbon Hill', code: 'CRB' },
  KIO: { name: 'Kiowa SC', code: 'KIO' },
};

// ===========================================================================
// 01 — HOME / FEED
// Inspiration: GoalLine Home (header, league pills, upcomings carousel, match
// highlights) + Eleven live hero + Orix sports news date pills.
// ===========================================================================
const ScreenHome = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', padding: '8px 20px 18px', gap: 12 }}>
          <div style={{
            width: 40, height: 40, borderRadius: '50%',
            background: 'linear-gradient(135deg, #7158E2, #3D5AFE)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 14,
          }}>BR</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>Welcome back</div>
            <div style={{ fontSize: 16, fontWeight: 700 }}>Ben Rascals</div>
          </div>
          <RoundBtn><I.search size={18}/></RoundBtn>
          <RoundBtn dot><I.bell size={18}/></RoundBtn>
        </div>

        {/* Date pills */}
        <div style={{ display: 'flex', gap: 8, padding: '0 20px 18px', overflowX: 'auto', scrollbarWidth: 'none' }}>
          {['Nov', 'Yesterday', 'Today', 'Tomorrow', 'Thu', 'Fri', 'Sat'].map((d, i) => (
            <div key={d} className={`pill ${i === 2 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{d}</div>
          ))}
        </div>

        {/* Live hero */}
        <div style={{ padding: '0 20px' }}>
          <MatchCardHero
            league="Premier League · Old Trafford"
            home={teams.ATL} away={teams.NOR}
            hs={2} as={1}
            minute={67} half="2nd Half"
            group={[
              { lbl: '1', v: '1.86' },
              { lbl: 'X', v: '3.20' },
              { lbl: '2', v: '4.10' },
            ]}
          />
        </div>

        {/* Upcomings carousel */}
        <div style={{ padding: '4px 0 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px 12px' }}>
            <h2 className="section-title" style={{ margin: 0 }}>Upcomings</h2>
            <button style={{ color: 'var(--text-secondary)', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>See all <I.chevR size={14}/></button>
          </div>
          <div style={{ display: 'flex', gap: 12, padding: '0 20px', overflowX: 'auto', scrollbarWidth: 'none' }}>
            <div style={{
              flex: 'none', width: 230, background: 'var(--bg-surface)', borderRadius: 'var(--r-card)', padding: 14, border: '1px solid var(--border-hairline)',
            }}>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600, marginBottom: 4 }}>Mon, 26 May · <span className="mono">21:00</span></div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10 }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, flex: 1 }}>
                  <Crest name={teams.RVM.name} code={teams.RVM.code}/>
                  <span style={{ fontSize: 11, fontWeight: 600 }}>RVM</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 700 }}>vs</div>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, flex: 1 }}>
                  <Crest name={teams.VRD.name} code={teams.VRD.code}/>
                  <span style={{ fontSize: 11, fontWeight: 600 }}>VRD</span>
                </div>
              </div>
            </div>
            <MatchTile when={'Tue, 1 Jun · 02:00'} home={teams.MAR} away={teams.SLS}/>
            <MatchTile when={'Wed, 2 Jun · 18:30'} home={teams.PDO} away={teams.RHT}/>
          </div>
        </div>

        {/* Premier league section */}
        <div style={{ padding: '12px 20px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: '#3D5AFE', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 800 }}>PL</div>
            <h2 className="section-title" style={{ margin: 0 }}>Premier League</h2>
          </div>
          <MatchCardCompact league="Premier League · Old Trafford" venue=""
            home={teams.ATL} away={teams.NOR} hs={2} as={1} status="FT"/>
          <MatchCardCompact league="Premier League · Marina Park" venue=""
            home={teams.MAR} away={teams.EST} hs={0} as={3} status="FT"/>
          <MatchCardCompact league="Premier League · Anfield" venue=""
            home={teams.LOK} away={teams.CRB} hs={1} as={1} status="FT"/>
        </div>
      </div>
      <BottomNav active="home"/>
    </div>
  </div>
);

// ===========================================================================
// 02 — MATCH DETAIL · EVENTS
// Inspiration: Eleven Live Match (sub-tabs over hero, timeline beneath).
// ===========================================================================
const MatchHeader = ({ subtab = 'events' }) => (
  <>
    {/* Top header */}
    <div style={{ display: 'flex', alignItems: 'center', padding: '8px 16px 16px', gap: 12 }}>
      <RoundBtn><I.chevL size={18}/></RoundBtn>
      <div style={{ flex: 1, textAlign: 'center' }}>
        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Premier League</div>
        <div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>Match Day 12</div>
      </div>
      <RoundBtn><I.share size={16}/></RoundBtn>
    </div>

    {/* Hero block */}
    <div style={{ padding: '0 20px 20px', textAlign: 'center' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 10 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
          <Crest name={teams.ATL.name} code={teams.ATL.code} size="xl"/>
          <div style={{ fontWeight: 700, fontSize: 15 }}>Atlas FC</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <span className="score lg">2</span>
            <span style={{ color: 'var(--text-muted)', fontSize: 22, fontWeight: 600 }}>:</span>
            <span className="score lg">1</span>
          </div>
          <div className="pill live"><span className="dot"/>67' · 2nd half</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
          <Crest name={teams.NOR.name} code={teams.NOR.code} size="xl"/>
          <div style={{ fontWeight: 700, fontSize: 15 }}>Norse Utd</div>
        </div>
      </div>
      <div style={{ marginTop: 14, fontSize: 11, color: 'var(--text-muted)' }}>Old Trafford · Att. 74,310 · Ref. M. Castro</div>
    </div>

    {/* Sub-tabs */}
    <div className="subtabs">
      {['Summary', 'Events', 'Stats', 'Lineups', 'H2H', 'Odds'].map(t => (
        <div key={t} className={`subtab ${t.toLowerCase() === subtab ? 'active' : ''}`}>{t}</div>
      ))}
    </div>
  </>
);

const EventRow = ({ minute, side, kind, who, sub }) => {
  const icon = kind === 'goal' ? <I.goal/>
    : kind === 'yellow' ? <I.yellowCard/>
    : kind === 'red' ? <I.redCard/>
    : kind === 'sub' ? <I.sub size={12}/> : null;
  const color = kind === 'goal' ? 'var(--positive)' : kind === 'red' ? 'var(--live)' : 'var(--text-secondary)';
  const block = (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2, color }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 700, color: 'var(--text-primary)', flexDirection: side === 'home' ? 'row' : 'row-reverse' }}>
        <span style={{ color, display: 'flex', alignItems: 'center' }}>{icon}</span>
        <span>{who}</span>
      </div>
      {sub && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{sub}</div>}
    </div>
  );
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 1fr', alignItems: 'center', padding: '14px 0', borderBottom: '1px solid var(--border-hairline)' }}>
      <div style={{ textAlign: 'right' }}>{side === 'home' ? block : null}</div>
      <div className="mono" style={{ textAlign: 'center', fontSize: 12, color: 'var(--text-secondary)', fontWeight: 700 }}>{minute}'</div>
      <div style={{ textAlign: 'left' }}>{side === 'away' ? block : null}</div>
    </div>
  );
};

const ScreenMatchEvents = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <MatchHeader subtab="events"/>
        <div style={{ padding: '8px 20px' }}>
          <EventRow minute="12" side="home" kind="goal" who="J. Okonkwo" sub="Assist · T. Becker"/>
          <EventRow minute="34" side="away" kind="yellow" who="K. Park" sub="Tactical foul"/>
          <EventRow minute="45+2" side="home" kind="goal" who="M. Bellini" sub="Header · corner"/>
          <EventRow minute="58" side="away" kind="sub" who="D. Solberg" sub="On · A. Hovland"/>
          <EventRow minute="63" side="away" kind="goal" who="D. Solberg" sub="Counter-attack"/>
          <EventRow minute="67" side="home" kind="yellow" who="J. Okonkwo" sub="Time-wasting"/>
        </div>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 03 — MATCH DETAIL · STATS
// Inspiration: Sports News Stats panel + Bet Warrior team metrics.
// ===========================================================================
const StatBar = ({ lbl, l, r, totalL, totalR, accent }) => {
  const total = totalL + totalR || 1;
  const lp = (totalL / total) * 100;
  return (
    <div style={{ padding: '12px 0' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
        <div className="mono" style={{ fontSize: 14, fontWeight: 700 }}>{l}</div>
        <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{lbl}</div>
        <div className="mono" style={{ fontSize: 14, fontWeight: 700 }}>{r}</div>
      </div>
      <div style={{ display: 'flex', height: 4, gap: 4 }}>
        <div style={{ flex: lp, background: accent || 'var(--accent)', borderRadius: 2 }}/>
        <div style={{ flex: 100 - lp, background: 'var(--border-hairline)', borderRadius: 2 }}/>
      </div>
    </div>
  );
};

const ScreenMatchStats = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <MatchHeader subtab="stats"/>

        {/* Possession donut */}
        <div style={{ padding: '20px 20px 0' }}>
          <div className="card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px' }}>
            <div style={{ textAlign: 'center' }}>
              <div className="score" style={{ fontSize: 32, color: 'var(--accent)' }}>58%</div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 4, fontWeight: 600 }}>ATL</div>
            </div>
            <div style={{ position: 'relative', width: 100, height: 100 }}>
              <svg viewBox="0 0 36 36" style={{ width: 100, height: 100, transform: 'rotate(-90deg)' }}>
                <circle cx="18" cy="18" r="14" fill="none" stroke="var(--border-hairline)" strokeWidth="4"/>
                <circle cx="18" cy="18" r="14" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="50.96 87.96" strokeLinecap="round"/>
              </svg>
              <div style={{
                position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'var(--text-secondary)',
                fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
              }}>Possession</div>
            </div>
            <div style={{ textAlign: 'center' }}>
              <div className="score" style={{ fontSize: 32, color: 'var(--text-primary)' }}>42%</div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 4, fontWeight: 600 }}>NOR</div>
            </div>
          </div>
        </div>

        {/* Stat bars */}
        <div style={{ padding: '16px 20px 8px' }}>
          <div className="card">
            <StatBar lbl="Shots" l="14" r="9" totalL={14} totalR={9}/>
            <StatBar lbl="Shots on target" l="6" r="3" totalL={6} totalR={3}/>
            <StatBar lbl="Corners" l="7" r="4" totalL={7} totalR={4}/>
            <StatBar lbl="Fouls" l="9" r="14" totalL={9} totalR={14} accent="var(--warning)"/>
            <StatBar lbl="Offsides" l="2" r="3" totalL={2} totalR={3}/>
            <StatBar lbl="Yellow cards" l="2" r="3" totalL={2} totalR={3} accent="var(--warning)"/>
            <StatBar lbl="Pass accuracy" l="86%" r="78%" totalL={86} totalR={78}/>
          </div>
        </div>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 04 — MATCH DETAIL · LINEUPS
// Inspiration: GoalLine LaLiga lineup pitch.
// ===========================================================================
// 4-3-3 home formation. Coordinates as % of pitch w/h.
const homeLineup = [
  { n: 1, name: 'Becker',    x: 50, y: 90 }, // GK
  { n: 2, name: 'Castro',    x: 18, y: 72 },
  { n: 4, name: 'Vega',      x: 38, y: 72 },
  { n: 5, name: 'Holloway',  x: 62, y: 72 },
  { n: 3, name: 'Ramos',     x: 82, y: 72 },
  { n: 6, name: 'Park',      x: 28, y: 54 },
  { n: 8, name: 'Okonkwo',   x: 50, y: 54 },
  { n: 10, name: 'Bellini',  x: 72, y: 54 },
  { n: 7, name: 'Diaz',      x: 22, y: 32 },
  { n: 9, name: 'Suárez',    x: 50, y: 28 },
  { n: 11, name: 'Yuki',     x: 78, y: 32 },
];

const ScreenMatchLineups = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <MatchHeader subtab="lineups"/>

        {/* Team / formation selector */}
        <div style={{ padding: '16px 20px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600 }}>Team</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
              <Crest name={teams.ATL.name} code={teams.ATL.code} size="md"/>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Atlas FC</div>
              <I.chevD/>
            </div>
          </div>
          <div className="pill active">4-3-3</div>
        </div>

        {/* Pitch */}
        <div style={{ padding: '0 16px' }}>
          <div className="pitch" style={{ width: '100%', aspectRatio: '0.62 / 1', minHeight: 360 }}>
            {homeLineup.map(p => (
              <div key={p.n} className="player" style={{ left: `${p.x}%`, top: `${p.y}%` }}>
                <div className="num">{p.n}</div>
                <div className="nm">{p.name}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Coach / subs row */}
        <div style={{ padding: '16px 20px 4px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: '#7158E2', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700 }}>LV</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600 }}>Coach</div>
            <div style={{ fontWeight: 700, fontSize: 14 }}>L. Velasco</div>
          </div>
          <button style={{
            background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
            padding: '8px 14px', borderRadius: 'var(--r-pill)',
            color: 'var(--text-primary)', fontWeight: 600, fontSize: 13,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>Subs <I.chevR/></button>
        </div>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 05 — LEAGUE STANDINGS
// Inspiration: Roshn Saudi League table + Qwin gameweek matrix.
// ===========================================================================
const standings = [
  { r: 1,  team: 'Atlas FC',     code: 'ATL', p: 14, w: 12, d: 1, l: 1, pts: 38, form: ['W','W','W','L','W'] },
  { r: 2,  team: 'Rivermont',    code: 'RVM', p: 14, w: 10, d: 2, l: 2, pts: 32, form: ['W','D','W','W','L'] },
  { r: 3,  team: 'Verdant City', code: 'VRD', p: 14, w: 9,  d: 3, l: 2, pts: 30, form: ['W','W','D','L','W'] },
  { r: 4,  team: 'Norse Utd',    code: 'NOR', p: 14, w: 8,  d: 3, l: 3, pts: 27, form: ['L','W','W','D','W'] },
  { r: 5,  team: 'Royal Hts',    code: 'RHT', p: 14, w: 7,  d: 4, l: 3, pts: 25, form: ['D','W','L','W','D'] },
  { r: 6,  team: 'Marina Bay',   code: 'MAR', p: 14, w: 6,  d: 5, l: 3, pts: 23, form: ['W','D','D','W','L'] },
  { r: 7,  team: 'Pico de Oro',  code: 'PDO', p: 14, w: 6,  d: 3, l: 5, pts: 21, form: ['L','W','L','D','W'] },
  { r: 8,  team: 'Solstice',     code: 'SLS', p: 14, w: 5,  d: 4, l: 5, pts: 19, form: ['D','L','W','W','L'] },
];

const ScreenStandings = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <Header
          left={<RoundBtn><I.chevL size={18}/></RoundBtn>}
          title=""
          right={<><RoundBtn><I.cal size={16}/></RoundBtn></>}
        />

        {/* League title block — backed by a faint hero */}
        <div style={{
          margin: '0 20px 16px',
          padding: '20px',
          background: 'var(--hero-grad)',
          borderRadius: 'var(--r-card-lg)',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -40, right: -40, width: 180, height: 180,
            borderRadius: '50%', background: 'radial-gradient(circle, rgba(200,255,62,0.10), transparent 60%)',
          }}/>
          <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>2025–26 Season</div>
          <div style={{ fontSize: 28, fontWeight: 800, marginTop: 6, letterSpacing: '-0.02em' }}>Premier<br/>League</div>
          <div style={{ marginTop: 12, fontSize: 12, color: 'var(--text-secondary)' }}>20 teams · Matchweek 14</div>
        </div>

        {/* Sub-tabs */}
        <div className="subtabs" style={{ marginBottom: 8 }}>
          {['Standings', 'Fixtures', 'Stats', 'Top scorers'].map((t, i) => (
            <div key={t} className={`subtab ${i === 0 ? 'active' : ''}`}>{t}</div>
          ))}
        </div>

        {/* Table header */}
        <div style={{ display: 'grid', gridTemplateColumns: '24px 1fr 22px 22px 22px 30px 54px', alignItems: 'center', gap: 8, padding: '10px 20px', color: 'var(--text-muted)', fontSize: 10, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>
          <span>#</span><span>Team</span><span style={{ textAlign: 'center' }}>P</span>
          <span style={{ textAlign: 'center' }}>W</span><span style={{ textAlign: 'center' }}>D</span>
          <span style={{ textAlign: 'center' }}>Pts</span><span style={{ textAlign: 'right' }}>Form</span>
        </div>

        {/* Table rows */}
        <div style={{ padding: '0 12px' }}>
          {standings.map(t => {
            const isTop = t.r === 1;
            return (
              <div key={t.r} style={{
                display: 'grid', gridTemplateColumns: '24px 1fr 22px 22px 22px 30px 54px',
                alignItems: 'center', gap: 8, padding: '12px 8px',
                borderRadius: 12,
                background: isTop ? 'var(--accent)' : 'transparent',
                color: isTop ? 'var(--accent-ink)' : 'var(--text-primary)',
                marginBottom: 2,
              }}>
                <span style={{ fontWeight: 700, fontSize: 13, textAlign: 'center' }}>{t.r}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                  <Crest name={t.team} code={t.code} bg={isTop ? '#0A1400' : undefined}/>
                  <span style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.team}</span>
                </div>
                <span className="mono" style={{ fontSize: 12, textAlign: 'center', fontWeight: 600 }}>{t.p}</span>
                <span className="mono" style={{ fontSize: 12, textAlign: 'center', fontWeight: 600 }}>{t.w}</span>
                <span className="mono" style={{ fontSize: 12, textAlign: 'center', fontWeight: 600 }}>{t.d}</span>
                <span className="mono" style={{ fontSize: 13, textAlign: 'center', fontWeight: 800 }}>{t.pts}</span>
                <div className="form-dots" style={{ justifyContent: 'flex-end' }}>
                  {t.form.map((f, i) => <span key={i} className={`fdot ${f}`}/>)}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

Object.assign(window, {
  ScreenHome, ScreenMatchEvents, ScreenMatchStats, ScreenMatchLineups, ScreenStandings,
  MatchHeader, StatBar,
  teams,
});