/* ============================================================
   FIFA EDGE — H2H Match Detail view
   ============================================================ */

const { useState: useSh, useMemo: useMh, useEffect: useEh } = React;

function pickPlayer(id) { return PLAYERS.find(p => p.id === id) || PLAYERS[0]; }

const H2H_EMPTY = {
  h2h: { games: 0, aWins: 0, draws: 0, bWins: 0, avgGoals: 0, overRate: 0, bttsRate: 0 },
  recent: [],
  overLines: [
    { line: 0.5, a: 0, b: 0 }, { line: 1.5, a: 0, b: 0 }, { line: 2.5, a: 0, b: 0 },
    { line: 3.5, a: 0, b: 0 }, { line: 4.5, a: 0, b: 0 }, { line: 5.5, a: 0, b: 0 },
  ],
  underLines: [
    { line: 1.5, a: 0, b: 0 }, { line: 2.5, a: 0, b: 0 },
    { line: 3.5, a: 0, b: 0 }, { line: 4.5, a: 0, b: 0 },
  ],
  goalsByMin: [],
  dailyDist: Array.from({length: 24}, (_, i) => ({ h: String(i).padStart(2,'0'), a: 0, b: 0 })),
  mostFrequent: [],
  bothScore: [
    ['Ambos marcaram 1T', 0], ['Ambos marcaram 2T', 0],
    ['Nenhum marcou 1T', 0],  ['Nenhum marcou 2T', 0],
  ],
};

const H2HDetail = ({ matchId, onBack }) => {
  const m = MATCHES.find(x => x.id === matchId) || MATCHES[0];
  if (!m) return <div style={{padding:24}}>Jogo não encontrado. <button className="iconbtn" onClick={onBack}>Voltar</button></div>;
  const A = m.home, B = m.away;

  const [data, setData] = useSh(H2H_EMPTY);

  useEh(() => {
    if (!A?.handle || !B?.handle) return;
    const url = `/api/h2h?home=${encodeURIComponent(A.handle)}&away=${encodeURIComponent(B.handle)}`;
    fetch(url, { cache: 'no-store' })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d) setData({ ...H2H_EMPTY, ...d }); })
      .catch(err => console.warn('[h2h] fetch failed', err));
  }, [A?.handle, B?.handle]);

  const { h2h, recent, overLines, underLines, goalsByMin, dailyDist, mostFrequent, bothScore } = data;

  const ap = A.wr, bp = B.wr, dp = 1 - ap - bp + 0.15;
  const total = ap + bp + dp;
  const pctA = Math.round((ap/total)*100), pctB = Math.round((bp/total)*100), pctD = 100 - pctA - pctB;

  const overBar = (v) => (
    <div style={{display:'grid', gridTemplateColumns:'30px 1fr 46px', gap:8, alignItems:'center', padding:'5px 0'}}>
      <span className="mono" style={{fontSize:11, color:'var(--text-3)'}}>{v.line}</span>
      <div style={{height:6, background:'var(--bg-3)', borderRadius:3, overflow:'hidden'}}>
        <div style={{width:`${v.a}%`, height:'100%', background:'var(--win)', opacity:0.8}}></div>
      </div>
      <span className="mono" style={{fontSize:11, color:'var(--win)', textAlign:'right'}}>{v.a.toFixed(1)}%</span>
    </div>
  );
  const underBar = (v) => (
    <div style={{display:'grid', gridTemplateColumns:'30px 1fr 46px', gap:8, alignItems:'center', padding:'5px 0'}}>
      <span className="mono" style={{fontSize:11, color:'var(--text-3)'}}>{v.line}</span>
      <div style={{height:6, background:'var(--bg-3)', borderRadius:3, overflow:'hidden'}}>
        <div style={{width:`${v.a}%`, height:'100%', background:'var(--loss)', opacity:0.75}}></div>
      </div>
      <span className="mono" style={{fontSize:11, color:'var(--loss)', textAlign:'right'}}>{v.a.toFixed(1)}%</span>
    </div>
  );

  return (
    <>
      <div className="page-head">
        <div>
          <button className="btn ghost" onClick={onBack} style={{marginBottom:8}}>‹ Voltar</button>
          <h1 className="page-title">Confronto direto · {A.handle} vs {B.handle}</h1>
          <div className="page-sub">Kickoff {window.fmtHM(m.kickoff)} (SP) · {m.league} · T-{m.minuteToKO}m</div>
        </div>
        <div className="page-actions">
          <button className="btn">Salvar</button>
          <button className="btn primary"><Icon name="telegram" size={12}/>Enviar tip</button>
        </div>
      </div>

      {/* ===== Hero head-to-head ===== */}
      <div className="card h2h-hero">
        <div className="h2h-side a">
          <div className="h2h-av">{A.handle.slice(0,2).toUpperCase()}</div>
          <div className="h2h-name">{A.handle}</div>
          <div className="h2h-team">{A.team}</div>
          <FormDots form={A.form} />
        </div>

        <div className="h2h-core">
          <div className="h2h-title mono">ÚLTIMOS 10 PARTIDAS</div>
          <div className="h2h-rings">
            <div className="ring">
              <svg viewBox="0 0 80 80">
                <circle cx="40" cy="40" r="34" fill="none" stroke="var(--line-1)" strokeWidth="5"/>
                <circle cx="40" cy="40" r="34" fill="none" stroke="var(--win)" strokeWidth="5" strokeDasharray={`${2*Math.PI*34*pctA/100} ${2*Math.PI*34}`} strokeLinecap="round" transform="rotate(-90 40 40)"/>
              </svg>
              <div className="ring-v">{h2h.aWins}</div>
              <div className="ring-k mono">{A.handle}</div>
            </div>
            <div className="ring small">
              <svg viewBox="0 0 80 80">
                <circle cx="40" cy="40" r="30" fill="none" stroke="var(--line-1)" strokeWidth="4"/>
                <circle cx="40" cy="40" r="30" fill="none" stroke="var(--text-3)" strokeWidth="4" strokeDasharray={`${2*Math.PI*30*pctD/100} ${2*Math.PI*30}`} strokeLinecap="round" transform="rotate(-90 40 40)"/>
              </svg>
              <div className="ring-v">{h2h.draws}</div>
              <div className="ring-k mono">EMPATE</div>
            </div>
            <div className="ring">
              <svg viewBox="0 0 80 80">
                <circle cx="40" cy="40" r="34" fill="none" stroke="var(--line-1)" strokeWidth="5"/>
                <circle cx="40" cy="40" r="34" fill="none" stroke="var(--info)" strokeWidth="5" strokeDasharray={`${2*Math.PI*34*pctB/100} ${2*Math.PI*34}`} strokeLinecap="round" transform="rotate(-90 40 40)"/>
              </svg>
              <div className="ring-v">{h2h.bWins}</div>
              <div className="ring-k mono">{B.handle}</div>
            </div>
          </div>
          <div style={{display:'flex', justifyContent:'center', gap:18, marginTop:12, fontFamily:'var(--f-mono)', fontSize:10, color:'var(--text-3)', letterSpacing:'0.08em', textTransform:'uppercase'}}>
            <span>BTTS {(h2h.bttsRate*100).toFixed(0)}%</span>
            <span>O2.5 {(h2h.overRate*100).toFixed(0)}%</span>
            <span>AVG {h2h.avgGoals}</span>
          </div>
        </div>

        <div className="h2h-side b">
          <div className="h2h-av">{B.handle.slice(0,2).toUpperCase()}</div>
          <div className="h2h-name">{B.handle}</div>
          <div className="h2h-team">{B.team}</div>
          <FormDots form={B.form} />
        </div>
      </div>

      {/* Pro notice */}
      <div className="alert" style={{marginTop:14}}>
        <div className="i"><Icon name="bell" size={14}/></div>
        <div>
          <div className="t">Visão parcial · dados de 6 partidas recentes</div>
          <div className="d">Para o histórico completo e mercados consolidados, ative PRO + LIVE + BOT no plano operador.</div>
        </div>
        <button className="btn ghost">Ativar</button>
      </div>

      {/* Top KPIs */}
      <div className="kpis">
        <Kpi label="Saldo H2H" value={`${h2h.aWins}-${h2h.draws}-${h2h.bWins}`} />
        <Kpi label="Média gols" value={h2h.avgGoals} />
        <Kpi label="Odds fair (1)" value={(1/((A.elo / (A.elo+B.elo))+0.1)).toFixed(2)} />
        <Kpi label="EV sugerido" value={`+${m.ev.value.toFixed(1)}%`} delta={+m.ev.conf/100*2} />
      </div>

      {/* ===== Over/Under grids ===== */}
      <div className="grid-2">
        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Over/Under (Partida) — {A.handle}</div><div className="card-tools"><button className="tool-btn active">Over</button><button className="tool-btn">Under</button></div></div>
          <div className="card-body">{overLines.map(v => overBar(v))}</div>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Handicap Asiático — LIVE</div><div className="card-tools"><button className="tool-btn active">0.0</button><button className="tool-btn">±0.5</button><button className="tool-btn">±1.0</button></div></div>
          <div className="card-body">
            <table style={{width:'100%', fontSize:12}}>
              <thead>
                <tr style={{color:'var(--text-3)', fontFamily:'var(--f-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase'}}>
                  <th style={{textAlign:'left', padding:'6px 0'}}>Linha</th>
                  <th style={{textAlign:'right'}}>{A.handle}</th>
                  <th style={{textAlign:'right'}}>{B.handle}</th>
                </tr>
              </thead>
              <tbody>
                {[[-2, 12.4, 47.8], [-1.5, 21.3, 36.2], [-1, 32.4, 28.1], [-0.5, 42.8, 22.4], [0, 52.6, 18.7], [+0.5, 64.1, 13.2], [+1, 72.4, 9.8]].map((r,i) => (
                  <tr key={i} style={{borderBottom:'1px solid var(--line-1)'}}>
                    <td className="mono" style={{padding:'7px 0', color:'var(--text-1)'}}>{r[0] > 0 ? '+' : ''}{r[0]}</td>
                    <td className="num mono" style={{color: r[1]>50?'var(--win)':'var(--loss)'}}>{r[1].toFixed(1)}%</td>
                    <td className="num mono" style={{color: r[2]>50?'var(--win)':'var(--loss)'}}>{r[2].toFixed(1)}%</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div style={{height:14}}/>

      <div className="grid-2">
        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Over (1º tempo) — {A.handle}</div></div>
          <div className="card-body">{[{line:0.5,a:72.4},{line:1.5,a:41.8},{line:2.5,a:18.9}].map(v => overBar(v))}</div>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Over (1º tempo) — {B.handle}</div></div>
          <div className="card-body">{[{line:0.5,a:68.1},{line:1.5,a:37.4},{line:2.5,a:15.2}].map(v => overBar(v))}</div>
        </div>
      </div>

      <div style={{height:14}}/>

      <div className="grid-2">
        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Under — {A.handle}</div></div>
          <div className="card-body">{underLines.map(v => underBar(v))}</div>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Under — {B.handle}</div></div>
          <div className="card-body">{underLines.map(v => underBar({...v, a: v.a*0.9}))}</div>
        </div>
      </div>

      <div style={{height:14}}/>

      {/* Média gols / Estatísticas da partida */}
      <div className="grid-2">
        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Média de gols por tempo</div></div>
          <div className="card-body">
            <table style={{width:'100%', fontSize:12}}>
              <thead>
                <tr style={{color:'var(--text-3)', fontFamily:'var(--f-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase'}}>
                  <th style={{textAlign:'left', padding:'8px 0'}}>{A.handle}</th>
                  <th style={{textAlign:'center'}}>Tempo</th>
                  <th style={{textAlign:'right'}}>{B.handle}</th>
                </tr>
              </thead>
              <tbody>
                <tr style={{borderBottom:'1px solid var(--line-1)'}}>
                  <td className="num mono" style={{padding:'10px 0', color:'var(--win)', fontSize:14}}>1.42</td>
                  <td style={{textAlign:'center', color:'var(--text-2)'}}>1º T</td>
                  <td className="num mono" style={{color:'var(--info)', fontSize:14}}>1.18</td>
                </tr>
                <tr>
                  <td className="num mono" style={{padding:'10px 0', color:'var(--win)', fontSize:14}}>1.87</td>
                  <td style={{textAlign:'center', color:'var(--text-2)'}}>2º T</td>
                  <td className="num mono" style={{color:'var(--info)', fontSize:14}}>1.64</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Estatísticas da partida</div></div>
          <div className="card-body">
            {[
              ['Posse média', 54.2, 45.8],
              ['Finalizações', 62.1, 37.9],
              ['Finalizações ao gol', 58.7, 41.3],
              ['xG médio', 55.4, 44.6],
              ['Escanteios', 51.8, 48.2],
            ].map((r,i)=>(
              <div key={i} style={{marginBottom:10}}>
                <div style={{display:'flex', justifyContent:'space-between', fontSize:11, marginBottom:4, fontFamily:'var(--f-mono)'}}>
                  <span style={{color:'var(--win)'}}>{r[1]}%</span>
                  <span style={{color:'var(--text-2)'}}>{r[0]}</span>
                  <span style={{color:'var(--info)'}}>{r[2]}%</span>
                </div>
                <div style={{display:'flex', height:4, borderRadius:2, overflow:'hidden', background:'var(--bg-3)'}}>
                  <div style={{width:`${r[1]}%`, background:'var(--win)'}}></div>
                  <div style={{width:`${r[2]}%`, background:'var(--info)'}}></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{height:14}}/>

      {/* Ambos equipes marcam / Resultado mais frequente */}
      <div className="grid-2">
        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Ambos equipes marcam</div></div>
          <div className="card-body">
            {bothScore.map((r,i) => (
              <div key={i} style={{display:'grid', gridTemplateColumns:'1fr auto 90px', gap:12, padding:'8px 0', borderBottom:'1px solid var(--line-1)', alignItems:'center'}}>
                <span style={{fontSize:12, color:'var(--text-1)'}}>{r[0]}</span>
                <span className="mono" style={{fontSize:11, color:'var(--win)', textAlign:'right'}}>{r[1]}%</span>
                <div style={{height:5, background:'var(--bg-3)', borderRadius:3, overflow:'hidden'}}>
                  <div style={{width:`${r[1]}%`, height:'100%', background:'var(--win)'}}></div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title"><span className="bar"></span>Resultados mais frequentes</div></div>
          <div className="card-body">
            {mostFrequent.map((r,i) => (
              <div key={i} style={{display:'grid', gridTemplateColumns:'56px 1fr 54px', gap:12, padding:'7px 0', borderBottom:'1px solid var(--line-1)', alignItems:'center'}}>
                <span className="mono" style={{color:'var(--text-0)', fontWeight:600, background:'var(--bg-2)', padding:'3px 8px', borderRadius:3, textAlign:'center', fontSize:12}}>{r[0]}</span>
                <div style={{height:5, background:'var(--bg-3)', borderRadius:3, overflow:'hidden'}}>
                  <div style={{width:`${r[1]*6}%`, height:'100%', background:'var(--accent)'}}></div>
                </div>
                <span className="mono" style={{fontSize:11, color:'var(--accent)', textAlign:'right'}}>{r[1]}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{height:14}}/>

      {/* Análise de time por equipe */}
      <div className="grid-2">
        {[A,B].map((P, ix) => (
          <div className="card" key={P.id}>
            <div className="card-head"><div className="card-title"><span className="bar"></span>Análise de time · {P.handle}</div></div>
            <table className="table">
              <thead>
                <tr>
                  <th>Time</th><th className="num">P</th><th className="num">V</th><th className="num">E</th><th className="num">D</th><th className="num">GP</th><th className="num">GC</th>
                </tr>
              </thead>
              <tbody>
                {['Man City','Bayern','Liverpool','Real Madrid','PSG'].map((t,i)=>{
                  const pj = 3+i, v = pj-i, e = (i%2), d = pj-v-e;
                  return (
                    <tr key={t}>
                      <td style={{color:'var(--text-0)'}}>{t}</td>
                      <td className="num mono">{pj}</td>
                      <td className="num mono" style={{color:'var(--win)'}}>{v}</td>
                      <td className="num mono" style={{color:'var(--text-2)'}}>{e}</td>
                      <td className="num mono" style={{color:'var(--loss)'}}>{d}</td>
                      <td className="num mono">{pj*2}</td>
                      <td className="num mono" style={{color:'var(--text-3)'}}>{pj}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        ))}
      </div>

      <div style={{height:14}}/>

      {/* Média de pontos linha tempo */}
      <div className="card">
        <div className="card-head"><div className="card-title"><span className="bar"></span>Média de pontos (média móvel · 12 jogos)</div></div>
        <div className="card-body">
          <svg viewBox="0 0 600 180" style={{width:'100%', height:180}} preserveAspectRatio="none">
            {[1,2,3,4,5].map(y => <line key={y} x1="30" x2="590" y1={20+y*28} y2={20+y*28} stroke="var(--line-1)" strokeDasharray="2 4"/>)}
            {[0,1,2,3,4,5,6].map(y => <text key={y} x="10" y={160-y*24} fill="var(--text-3)" fontSize="9" fontFamily="JetBrains Mono">{y}</text>)}
            <polyline points="30,100 80,88 130,92 180,76 230,82 280,70 330,60 380,64 430,52 480,58 530,48 590,42" fill="none" stroke="var(--win)" strokeWidth="2" strokeLinecap="round"/>
            <polyline points="30,120 80,114 130,108 180,112 230,100 280,104 330,96 380,90 430,94 480,86 530,80 590,82" fill="none" stroke="var(--info)" strokeWidth="2" strokeLinecap="round"/>
          </svg>
          <div style={{display:'flex', justifyContent:'center', gap:18, marginTop:8, fontFamily:'var(--f-mono)', fontSize:11, color:'var(--text-2)'}}>
            <span>● <span style={{color:'var(--win)'}}>{A.handle}</span></span>
            <span>● <span style={{color:'var(--info)'}}>{B.handle}</span></span>
          </div>
        </div>
      </div>

      <div style={{height:14}}/>

      {/* Distribuição diária */}
      <div className="card">
        <div className="card-head"><div className="card-title"><span className="bar"></span>Distribuição diária de partidas (por hora UTC)</div></div>
        <div className="card-body">
          <div style={{display:'grid', gridTemplateColumns:'repeat(24, 1fr)', gap:3, alignItems:'end', height:140}}>
            {dailyDist.map((d,i) => (
              <div key={i} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:3, height:'100%'}}>
                <div style={{width:'100%', display:'flex', flexDirection:'column-reverse', gap:1, flex:1}}>
                  <div style={{width:'100%', height:`${d.a}%`, background:'var(--win)', opacity:0.8, borderRadius:'2px 2px 0 0'}}/>
                  <div style={{width:'100%', height:`${d.b}%`, background:'var(--info)', opacity:0.8, borderRadius:'2px 2px 0 0'}}/>
                </div>
                <span className="mono" style={{fontSize:8, color:'var(--text-3)'}}>{d.h}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{height:14}}/>

      {/* Histórico de partidas */}
      <div className="card">
        <div className="card-head"><div className="card-title"><span className="bar"></span>Histórico de partidas</div><div className="card-tools"><span className="mono" style={{fontSize:10, color:'var(--text-3)'}}>ÚLTIMAS 6</span></div></div>
        <div className="card-body flush">
          {recent.map((r,i) => (
            <div key={i} style={{display:'grid', gridTemplateColumns:'10px 1fr auto 1fr 10px', gap:12, padding:'12px 16px', borderBottom:'1px solid var(--line-1)', alignItems:'center'}}>
              <div style={{width:6, height:6, borderRadius:2, background: r.w==='A'?'var(--win)':r.w==='D'?'var(--text-3)':'var(--loss)'}}/>
              <div style={{textAlign:'right', color:r.scA>r.scB?'var(--text-0)':'var(--text-2)', fontWeight:r.scA>r.scB?600:400}}>{A.handle} <span className="mono" style={{color:'var(--text-3)', marginLeft:8, fontSize:10}}>{A.team}</span></div>
              <div className="mono" style={{fontSize:15, color:'var(--text-0)', fontWeight:600, background:'var(--bg-2)', padding:'4px 10px', borderRadius:4, border:'1px solid var(--line-1)'}}>{r.scA} : {r.scB}</div>
              <div style={{color:r.scB>r.scA?'var(--text-0)':'var(--text-2)', fontWeight:r.scB>r.scA?600:400}}><span className="mono" style={{color:'var(--text-3)', marginRight:8, fontSize:10}}>{B.team}</span> {B.handle}</div>
              <div className="mono" style={{fontSize:10, color:'var(--text-3)'}}>{r.date}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{height:14}}/>

      {/* Últimas partidas por player */}
      <div className="grid-2">
        {[A,B].map(P => (
          <div className="card" key={P.id}>
            <div className="card-head"><div className="card-title"><span className="bar"></span>Últimas partidas · {P.handle}</div></div>
            <div className="card-body flush">
              {P.form.slice(0,5).map((r,i) => (
                <div key={i} style={{display:'grid', gridTemplateColumns:'10px 1fr auto 1fr', gap:10, padding:'10px 16px', borderBottom:'1px solid var(--line-1)', alignItems:'center'}}>
                  <div style={{width:6, height:6, borderRadius:2, background: r==='w'?'var(--win)':r==='d'?'var(--text-3)':'var(--loss)'}}/>
                  <span style={{color:'var(--text-0)', textAlign:'right', fontSize:12}}>{P.handle}</span>
                  <span className="mono" style={{fontSize:12, color:'var(--text-0)', fontWeight:600}}>{r==='w'?'2 : 1':r==='d'?'1 : 1':'0 : 2'}</span>
                  <span style={{color:'var(--text-2)', fontSize:12}}>Opponent_{i+1}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div style={{height:14}}/>

      {/* Insights text */}
      <div className="card">
        <div className="card-head"><div className="card-title"><span className="bar"></span>Histórico de confrontos · análise</div><div className="card-tools"><span className="mono" style={{fontSize:10, color:'var(--text-3)'}}>ÚLT. ATUALIZAÇÃO: 19/04 18:00 UTC</span></div></div>
        <div className="card-body">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
            <div>
              <h4 style={{margin:'0 0 8px', color:'var(--accent)', fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase'}}>● Visão Geral</h4>
              <p style={{color:'var(--text-2)', fontSize:12.5, lineHeight:1.6, margin:0}}>
                Em {h2h.games} confrontos entre {A.handle} e {B.handle}, {A.handle} venceu {h2h.aWins} vezes, {B.handle} venceu {h2h.bWins}, com {h2h.draws} empates. ELO atual {A.elo} vs {B.elo} favorece {A.elo>B.elo?A.handle:B.handle} por {Math.abs(A.elo-B.elo)} pontos.
              </p>
            </div>
            <div>
              <h4 style={{margin:'0 0 8px', color:'var(--win)', fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase'}}>● Performance</h4>
              <p style={{color:'var(--text-2)', fontSize:12.5, lineHeight:1.6, margin:0}}>
                Nos últimos confrontos diretos, {A.handle} acumulou {(A.wr*100).toFixed(0)}% de vitórias, enquanto {B.handle} manteve {(B.wr*100).toFixed(0)}% aproveitamento. Over 2.5 bateu em {(h2h.overRate*100).toFixed(0)}% das partidas.
              </p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { H2HDetail });