// Match centre: fixtures, results, table
const FixtureRow = ({ f, dark = false, onSelect }) => {
  const ourSide = f.isHome ? 'home' : 'away';
  const clickable = !!onSelect;
  return (
    <div data-fixture-row
      onClick={clickable ? () => onSelect(f) : undefined}
      style={{
        display: 'grid', gridTemplateColumns: '90px 1fr auto auto 24px', gap: 16,
        alignItems: 'center', padding: '18px 22px',
        borderBottom: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--line-soft)',
        cursor: clickable ? 'pointer' : 'default',
        transition: 'background 200ms ease',
        position: 'relative',
      }}
      onMouseEnter={clickable ? (e) => e.currentTarget.style.background = dark ? 'rgba(255,255,255,0.04)' : 'rgba(200,16,46,0.04)' : undefined}
      onMouseLeave={clickable ? (e) => e.currentTarget.style.background = 'transparent' : undefined}
    >
      <div>
        <div className="display" style={{ fontSize: 22, color: dark ? '#fff' : 'var(--ink)' }}>{f.date.split(' ')[1]}</div>
        <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.18em', color: dark ? 'rgba(255,255,255,0.5)' : 'var(--muted)' }}>
          {f.date.split(' ')[0]} · {f.date.split(' ')[2]}
        </div>
      </div>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 600, fontSize: 14, color: dark ? '#fff' : 'var(--ink)' }}>
          <span style={{ fontWeight: f.isHome ? 700 : 500 }}>{f.home}</span>
          <span className="mono" style={{ fontSize: 11, color: dark ? 'rgba(255,255,255,0.4)' : 'var(--muted)' }}>vs</span>
          <span style={{ fontWeight: !f.isHome ? 700 : 500 }}>{f.away}</span>
        </div>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.16em', color: dark ? 'rgba(255,255,255,0.55)' : 'var(--muted)', marginTop: 4 }}>
          {f.comp} · {f.venue}
        </div>
      </div>
      <div data-fixture-time style={{ textAlign: 'right' }}>
        <div className="display" style={{ fontSize: 22, color: dark ? '#fff' : 'var(--ink)' }}>{f.time}</div>
        <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.18em', color: 'var(--red)', fontWeight: 700 }}>KICK OFF</div>
      </div>
      <Chip tone={f.isHome ? 'red' : 'dark'}>{f.isHome ? 'Home' : 'Away'}</Chip>
      {clickable && (
        <div className="mono" style={{
          fontSize: 16, color: dark ? 'rgba(255,255,255,0.4)' : 'var(--muted)', textAlign: 'center',
        }}>›</div>
      )}
    </div>
  );
};

const ResultRow = ({ r, dark = false }) => {
  const isUsHome = r.home === 'Blackpool Wren Rovers';
  const usScore = isUsHome ? r.hs : r.as;
  const themScore = isUsHome ? r.as : r.hs;
  const them = isUsHome ? r.away : r.home;
  const tag = r.result;
  const tagBg = tag === 'W' ? 'var(--pitch)' : tag === 'D' ? 'var(--gold)' : 'var(--red-deep)';
  return (
    <div data-result-row style={{
      display: 'grid', gridTemplateColumns: '70px 1fr auto 28px', gap: 16,
      alignItems: 'center', padding: '18px 22px',
      borderBottom: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--line-soft)',
    }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: dark ? 'rgba(255,255,255,0.6)' : 'var(--muted)' }}>{r.date}</div>
      <div>
        <div style={{ fontWeight: 600, fontSize: 14, color: dark ? '#fff' : 'var(--ink)' }}>
          {isUsHome ? 'vs ' : '@ '}{them}
        </div>
        <div className="mono" style={{ fontSize: 10, color: dark ? 'rgba(255,255,255,0.55)' : 'var(--muted)', letterSpacing: '0.16em', marginTop: 4, textTransform: 'uppercase' }}>
          {r.scorers.join(' · ')}
        </div>
      </div>
      <div className="display" style={{ fontSize: 24, color: dark ? '#fff' : 'var(--ink)' }}>
        {usScore}–{themScore}
      </div>
      <div style={{
        width: 28, height: 28, background: tagBg, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Bebas Neue', fontSize: 16,
      }}>{tag}</div>
    </div>
  );
};

const FixturesSection = ({ onSelectFixture }) => {
  const [tab, setTab] = React.useState('fixtures');
  return (
    <section style={{ background: 'var(--paper)', padding: '96px 0' }} id="fixtures">
      <div className="container">
        <SectionHead
          kicker="Match Centre · 2025/26"
          title="Fixtures & Results"
          right={
            <div data-tab-row style={{ display: 'flex', gap: 0, border: '1.5px solid var(--ink)' }}>
              {['fixtures', 'results', 'table'].map(t => (
                <button key={t} onClick={() => setTab(t)} style={{
                  padding: '12px 20px', border: 'none', cursor: 'pointer',
                  background: tab === t ? 'var(--ink)' : 'transparent',
                  color: tab === t ? '#fff' : 'var(--ink)',
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase',
                }}>{t}</button>
              ))}
            </div>
          }
        />

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 32 }}>
          <div style={{ background: '#fff', border: '1px solid var(--line-soft)' }}>
            <div style={{
              padding: '14px 22px', borderBottom: '2px solid var(--ink)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span className="display" style={{ fontSize: 22 }}>
                {tab === 'fixtures' ? 'Upcoming Fixtures' : tab === 'results' ? 'Recent Results' : 'NWCFL Premier — Standings'}
              </span>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--muted)' }}>MEN'S 1ST TEAM</span>
            </div>
            {tab === 'fixtures' && FIXTURES.map(f => <FixtureRow key={f.id} f={f} onSelect={onSelectFixture} />)}
            {tab === 'results' && RESULTS.map(r => <ResultRow key={r.id} r={r} />)}
            {tab === 'table' && (
              <table data-league-table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: 'var(--paper-2)' }}>
                    {['#', 'Team', 'P', 'GD', 'PTS'].map(h => (
                      <th key={h} className="mono" style={{
                        textAlign: h === 'Team' ? 'left' : 'center', padding: '12px 16px',
                        fontSize: 10, letterSpacing: '0.18em', color: 'var(--muted)', fontWeight: 700,
                      }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {TABLE.map(t => (
                    <tr key={t.team} style={{
                      borderBottom: '1px solid var(--line-soft)',
                      background: t.us ? 'rgba(200,16,46,0.06)' : 'transparent',
                    }}>
                      <td className="display" style={{ padding: '14px 16px', fontSize: 22, textAlign: 'center', width: 50 }}>{t.p}</td>
                      <td style={{ padding: '14px 16px', fontWeight: t.us ? 800 : 500, fontSize: 14 }}>
                        {t.us && <span style={{ color: 'var(--red)', marginRight: 8 }}>●</span>}{t.team}
                      </td>
                      <td className="mono" style={{ padding: '14px 16px', textAlign: 'center', fontSize: 13 }}>{t.pl}</td>
                      <td className="mono" style={{ padding: '14px 16px', textAlign: 'center', fontSize: 13, color: t.gd > 0 ? 'var(--pitch)' : 'var(--red)' }}>
                        {t.gd > 0 ? '+' : ''}{t.gd}
                      </td>
                      <td className="display" style={{ padding: '14px 16px', textAlign: 'center', fontSize: 22 }}>{t.pts}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>

          {/* Player of the Match / Spotlight */}
          <div>
            <div style={{ background: 'var(--ink)', color: '#fff', padding: '28px 24px', position: 'relative', overflow: 'hidden' }}>
              <div style={{
                position: 'absolute', right: -40, top: -40, width: 200, height: 200,
                background: 'var(--red)', transform: 'rotate(45deg)', opacity: 0.85,
              }} />
              <div style={{ position: 'relative' }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>
                  ● PLAYER OF THE MATCH
                </span>
                <div className="display" style={{ fontSize: 56, marginTop: 16, lineHeight: 0.9 }}>
                  Jamie<br />Doyle
                </div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.7)', marginTop: 12 }}>
                  vs BURSCOUGH · 25 APRIL · 1 GOAL · 1 ASSIST
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, marginTop: 24, background: 'rgba(255,255,255,0.15)' }}>
                  {[['SHOTS', 6], ['PASS%', 88], ['DUELS', '7/9']].map(([k, v]) => (
                    <div key={k} style={{ background: 'var(--ink)', padding: '14px 12px', textAlign: 'center' }}>
                      <div className="display" style={{ fontSize: 26 }}>{v}</div>
                      <div className="mono" style={{ fontSize: 9, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)' }}>{k}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            {/* Form */}
            <div style={{ background: '#fff', border: '1px solid var(--line-soft)', borderTop: 'none', padding: '20px 24px' }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--muted)', fontWeight: 700, marginBottom: 12 }}>
                LAST 6 — MEN'S 1ST
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                {['W','W','D','W','L','W'].map((r, i) => (
                  <div key={i} style={{
                    width: 36, height: 36, fontFamily: 'Bebas Neue', fontSize: 18,
                    background: r === 'W' ? 'var(--pitch)' : r === 'D' ? 'var(--gold)' : 'var(--red-deep)',
                    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>{r}</div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Detailed match centre with line-ups, scorers, mini reports
const MatchCentre = () => {
  return (
    <section style={{ background: 'var(--ink)', color: '#fff', padding: '96px 0' }}>
      <div className="container">
        <SectionHead
          dark
          kicker="Match Report"
          title="The 90 minutes."
          right={<Chip tone="red">Latest · 25 Apr 2026</Chip>}
        />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'rgba(255,255,255,0.12)', marginBottom: 32 }}>
          {/* Big scoreline */}
          <div data-scoreline style={{ background: 'var(--ink)', padding: '40px 32px' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.5)' }}>
              NWCFL PREMIER · MILL FARM · ATT 312
            </div>
            <div data-scoreline-grid style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', marginTop: 20, gap: 24 }}>
              <div>
                <img src="assets/logo.jpg" alt="" style={{ width: 64, height: 64, marginBottom: 12 }} />
                <div className="display" style={{ fontSize: 34, lineHeight: 1 }}>WREN<br />ROVERS</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)', marginTop: 6 }}>
                  WALSH 12' · DOYLE 44' · MARSDEN 78'
                </div>
              </div>
              <div data-bigscore className="display" style={{ fontSize: 96, lineHeight: 1 }}>
                3<span style={{ color: 'rgba(255,255,255,0.3)', margin: '0 18px' }}>–</span>1
              </div>
              <div style={{ textAlign: 'right' }}>
                <TextBadge initials="BUR" color="#fff" />
                <div className="display" style={{ fontSize: 34, lineHeight: 1, marginTop: 12 }}>BURSCOUGH</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)', marginTop: 6 }}>
                  BLAKE 67'
                </div>
              </div>
            </div>
          </div>

          {/* Stats panel */}
          <div data-stats-slab style={{ background: 'var(--ink)', padding: '40px 32px' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.5)', marginBottom: 18 }}>
              MATCH STATS
            </div>
            {[
              { k: 'POSSESSION', a: 58, b: 42 },
              { k: 'SHOTS', a: 16, b: 7 },
              { k: 'ON TARGET', a: 8, b: 3 },
              { k: 'CORNERS', a: 9, b: 4 },
              { k: 'FOULS', a: 11, b: 14 },
            ].map(s => (
              <div key={s.k} style={{ marginBottom: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'Bebas Neue', fontSize: 18, marginBottom: 4 }}>
                  <span>{s.a}{s.k === 'POSSESSION' ? '%' : ''}</span>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.6)', fontWeight: 700 }}>{s.k}</span>
                  <span>{s.b}{s.k === 'POSSESSION' ? '%' : ''}</span>
                </div>
                <div style={{ height: 4, background: 'rgba(255,255,255,0.1)', display: 'flex' }}>
                  <div style={{ flex: s.a, background: 'var(--red)' }} />
                  <div style={{ flex: s.b, background: 'rgba(255,255,255,0.4)' }} />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Match report copy + photo placeholder */}
        <div data-report-grid style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700, marginBottom: 12 }}>
              REPORT · BY THE TOUCHLINE
            </div>
            <h3 className="display" style={{ fontSize: 40, margin: 0, color: '#fff', lineHeight: 0.95 }}>
              Doyle delivers as the Wrens secure third
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: 'rgba(255,255,255,0.8)', marginTop: 16 }}>
              A near-capacity Mill Farm crowd watched the Wrens climb back into third with a clinical home win. Walsh opened the scoring on twelve, smashing in a Ravenscroft corner; Doyle made it two in first-half stoppage time, Marsden's poacher's effort sealing the points after Burscough had pulled one back through Blake.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: 'rgba(255,255,255,0.8)' }}>
              Three points, three up the table, and a quiet reminder that this side has no intention of going away. Charnock Richard up next, eyes already on Saturday.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
              <Btn variant="primary" size="sm">Full Report</Btn>
              <Btn variant="outlineLight" size="sm" icon={false}>Match Photos (24)</Btn>
            </div>
          </div>
          <div style={{
            background: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 14px, rgba(255,255,255,0.07) 14px 28px)',
            border: '1px solid rgba(255,255,255,0.12)',
            minHeight: 320, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{ textAlign: 'center' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.6)' }}>
                [ MATCH PHOTO GALLERY · 24 IMAGES ]
              </div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.4)', marginTop: 6 }}>
                Pull from Facebook album · placeholder
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FixturesSection, MatchCentre });