// MatchDetail — landing page for a selected fixture, with team sheet
const MatchDetail = ({ fixture, onBack }) => {
  const [shape, setShape] = React.useState('4-3-3');

  if (!fixture) {
    return (
      <section style={{ background: 'var(--paper)', padding: '120px 0', minHeight: '60vh' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'var(--muted)' }}>
            NO FIXTURE SELECTED
          </div>
          <button onClick={onBack} style={{
            marginTop: 24, padding: '12px 24px', background: 'var(--ink)', color: '#fff',
            border: 'none', fontFamily: 'Bebas Neue', fontSize: 18, letterSpacing: '0.1em', cursor: 'pointer',
          }}>← BACK TO FIXTURES</button>
        </div>
      </section>
    );
  }

  const f = fixture;
  const opponent = f.isHome ? f.away : f.home;
  const dateParts = f.date.split(' ');

  return (
    <>
      {/* Hero — match header */}
      <section style={{
        background: 'var(--ink)', color: '#fff', padding: '40px 0 80px', position: 'relative', overflow: 'hidden',
      }}>
        {/* Pitch lines watermark */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.04 }}
             viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice">
          <rect x="20" y="20" width="1160" height="560" fill="none" stroke="#fff" strokeWidth="2" />
          <line x1="600" y1="20" x2="600" y2="580" stroke="#fff" strokeWidth="2" />
          <circle cx="600" cy="300" r="80" fill="none" stroke="#fff" strokeWidth="2" />
        </svg>

        <div className="container" style={{ position: 'relative' }}>
          {/* Breadcrumb */}
          <button onClick={onBack} style={{
            background: 'transparent', border: 'none', color: 'rgba(255,255,255,0.6)',
            fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.18em',
            cursor: 'pointer', padding: '0 0 32px', display: 'flex', alignItems: 'center', gap: 8,
          }}>
            ← FIXTURES & RESULTS
          </button>

          {/* Match meta */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginBottom: 32 }}>
            <Chip tone="red">{f.comp}</Chip>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.6)' }}>
              {dateParts[0]} {dateParts[1]} {dateParts[2]} · KICK OFF {f.time} · {f.venue.toUpperCase()}
            </div>
          </div>

          {/* Big scoreline-style header */}
          <div data-match-vs style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 40, alignItems: 'center', marginBottom: 32 }}>
            {/* Home */}
            <div style={{ textAlign: 'right' }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>
                {f.isHome ? 'HOME' : 'AWAY'}
              </div>
              <div className="display" style={{ fontSize: 64, lineHeight: 0.95 }}>{f.home.toUpperCase()}</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.55)', marginTop: 8 }}>
                {f.isHome ? 'P12 · W7 · D3 · L2' : 'P11 · W4 · D2 · L5'}
              </div>
            </div>

            {/* Centre — VS or score */}
            <div style={{ textAlign: 'center' }}>
              <div data-match-vs-circle style={{
                width: 120, height: 120, border: '3px solid var(--red)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                position: 'relative',
              }}>
                <div className="display" style={{ fontSize: 56, color: 'var(--red)' }}>VS</div>
              </div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.5)', marginTop: 12 }}>
                COUNTDOWN · 4d 12h
              </div>
            </div>

            {/* Away */}
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>
                {f.isHome ? 'AWAY' : 'HOME'}
              </div>
              <div className="display" style={{ fontSize: 64, lineHeight: 0.95 }}>{f.away.toUpperCase()}</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.55)', marginTop: 8 }}>
                {f.isHome ? 'P10 · W3 · D4 · L3' : 'P12 · W6 · D2 · L4'}
              </div>
            </div>
          </div>

          {/* CTA strip */}
          <div data-cta-strip style={{
            display: 'flex', gap: 0, marginTop: 24,
            border: '1.5px solid #fff',
          }}>
            {[
              { label: 'BUY MATCH TICKETS', tone: 'red' },
              { label: 'ADD TO CALENDAR', tone: 'transparent' },
              { label: 'DIRECTIONS', tone: 'transparent' },
              { label: 'SHARE PREVIEW', tone: 'transparent' },
            ].map((b, i) => (
              <button key={b.label} style={{
                flex: 1, padding: '18px 24px',
                background: b.tone === 'red' ? 'var(--red)' : 'transparent',
                color: '#fff', border: 'none',
                borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.25)' : 'none',
                fontFamily: 'Bebas Neue', fontSize: 18, letterSpacing: '0.1em',
                cursor: 'pointer', transition: 'background 200ms',
              }}
              onMouseEnter={(e) => { if (b.tone !== 'red') e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; }}
              onMouseLeave={(e) => { if (b.tone !== 'red') e.currentTarget.style.background = 'transparent'; }}>
                {b.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Team sheet — uses shared FormationPitch */}
      <section style={{ background: 'var(--ink)', color: '#fff', padding: '0 0 96px' }}>
        <div className="container">
          <SectionHead
            dark
            kicker="The teamsheet"
            title="Predicted XI."
            right={
              <div data-tab-row style={{ display: 'flex', gap: 0, border: '1.5px solid #fff' }}>
                {Object.keys(FORMATIONS).map(s => (
                  <button key={s} onClick={() => setShape(s)} style={{
                    padding: '10px 18px', border: 'none', cursor: 'pointer',
                    background: shape === s ? '#fff' : 'transparent',
                    color: shape === s ? 'var(--ink)' : '#fff',
                    fontFamily: 'Bebas Neue', fontSize: 22,
                  }}>{s}</button>
                ))}
              </div>
            }
          />

          <div data-formation style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 32, alignItems: 'flex-start' }}>
            <FormationPitch shape={shape} />

            <div>
              <div style={{ background: 'var(--ink-2)', border: '1px solid var(--ink-3)', padding: '24px' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>
                  MANAGER'S NOTES
                </div>
                <div className="display" style={{ fontSize: 28, marginTop: 6 }}>BARRY BRIGGS</div>
                <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55, margin: '12px 0 0' }}>
                  "{opponent} are organised, but we've trained for this all week. Front-foot, sharp transitions, and a packed Mill Farm behind us."
                </p>
              </div>

              <div style={{ background: 'var(--ink-2)', border: '1px solid var(--ink-3)', borderTop: 'none', padding: '20px 24px' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 12 }}>
                  ON THE BENCH
                </div>
                {[12, 13, 14, 15, 16].map((n, i) => {
                  const sub = MENS_SQUAD[(i + 4) % MENS_SQUAD.length];
                  return (
                    <div key={n} style={{
                      display: 'grid', gridTemplateColumns: '32px 1fr 40px', gap: 12,
                      padding: '8px 0', alignItems: 'center',
                      borderBottom: i < 4 ? '1px solid var(--ink-3)' : 'none',
                    }}>
                      <div className="display" style={{ fontSize: 22, color: 'var(--red)' }}>{n}</div>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{sub?.name || '—'}</div>
                      <div className="mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.16em' }}>{sub?.pos}</div>
                    </div>
                  );
                })}
              </div>

              <div style={{ background: 'var(--red)', padding: '20px 24px' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.7)', fontWeight: 700 }}>
                  MATCH OFFICIAL
                </div>
                <div className="display" style={{ fontSize: 24, marginTop: 4 }}>REF: G. WALMSLEY</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', marginTop: 6, color: 'rgba(255,255,255,0.85)' }}>
                  ATTENDANCE EXPECTED · 280
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Form guide / head-to-head */}
      <section style={{ background: 'var(--paper)', padding: '96px 0' }}>
        <div className="container">
          <SectionHead kicker="Form guide" title="Last five." />
          <div data-form-guide style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {[f.home, f.away].map((side, idx) => {
              const results = idx === 0 ? ['W','W','D','W','L'] : ['L','D','W','L','W'];
              return (
                <div key={side} style={{
                  background: '#fff', border: '1px solid var(--line)', padding: '28px',
                }}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--muted)' }}>
                    {idx === 0 ? 'HOME · LAST 5' : 'AWAY · LAST 5'}
                  </div>
                  <div className="display" style={{ fontSize: 28, marginTop: 4 }}>{side.toUpperCase()}</div>
                  <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
                    {results.map((r, i) => (
                      <div key={i} style={{
                        width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center',
                        background: r === 'W' ? '#1e7a3a' : r === 'D' ? '#888' : 'var(--red)',
                        color: '#fff', fontFamily: 'Bebas Neue', fontSize: 22,
                      }}>{r}</div>
                    ))}
                  </div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--muted)', marginTop: 16 }}>
                    {idx === 0 ? 'GF 14 · GA 6' : 'GF 9 · GA 11'}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { MatchDetail });