/* ============================================================
   VLF 2026 · COMPETE — Leaderboard · Tee Time · Players (L1 hub)
   + GolferDetail (L2)
   props: initSub, phase, nav, followed(Set), toggleFollow(name)
   ============================================================ */
function Compete({ initSub = 'leaderboard', initDay, phase, nav, followed, toggleFollow, persona }) {
  const t = useT();const lang = t.lang;
  const [sub, setSub] = useState(initSub);
  React.useEffect(() => {setSub(initSub);}, [initSub]);

  const segItems = [
  { id: 'mine', label: lang === 'en' ? 'Mine' : 'Của tôi' },
  { id: 'leaderboard', label: t('leaderboard') },
  { id: 'teetime', label: 'Tee time' },
  { id: 'players', label: t('players') }];


  return (
    <div className="v-screen" style={{ paddingBottom: 'calc(60px + var(--zalo-safe-bottom))' }}>
      <div className="v-pad" style={{ paddingBottom: 8 }}>
        <Segmented value={sub} onChange={setSub} items={segItems} />
      </div>
      {sub === 'mine' && <MyCompete persona={persona} phase={phase} nav={nav} followed={followed} toggleFollow={toggleFollow} setSub={setSub} />}
      {sub === 'leaderboard' && <Leaderboard phase={phase} nav={nav} />}
      {sub === 'teetime' && <TeeTime nav={nav} initDay={initDay} />}
      {sub === 'players' && <Players nav={nav} followed={followed} toggleFollow={toggleFollow} />}
    </div>);

}

/* ---------- CỦA TÔI · thi đấu cá nhân hoá theo persona ---------- */
function MyCompete({ persona, phase, nav, followed, setSub }) {
  const t = useT();const lang = t.lang;
  const T = (vi, en) => lang === 'en' ? en : vi;
  const me = window.VLF.personas[persona].me;
  const isGolfer = persona === 'golfer' || persona === 'golfer_intl';
  const hasScores = phase !== 'pre';
  const followedList = window.VLF.players.filter((p) => followed.has(p.name));

  const myTees = [];
  Object.entries(window.VLF.teeTimes).forEach(([dayId, gs]) => gs.forEach((g) => {if (g.g.includes(me.name)) myTees.push({ dayId, ...g });}));
  const myDiv = window.VLF.divById(me.div || 'legends');
  const lbRow = (window.VLF.leaderboard[me.div] || window.VLF.leaderboard.legends || []).find((r) => r.name === me.name);
  const isTopar = myDiv.scoring === 'topar';

  return (
    <div className="v-pad" style={{ paddingTop: 2 }}>
      {isGolfer ? <>
        <div className="v-sect" style={{ marginTop: 6 }}><h3>{t('myPos')}</h3><a onClick={() => nav('golfer', { name: me.name })}>{t('profile')} ›</a></div>
        <div className="v-card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }} onClick={() => nav('golfer', { name: me.name })}>
          <div style={{ textAlign: 'center', flex: '0 0 auto', minWidth: 50 }}>
            <div className="v-num" style={{ fontSize: 32, fontWeight: 800, color: 'var(--vlf-purple-700)', lineHeight: 1 }}>{hasScores && lbRow ? lbRow.pos === 1 ? '1' : 'T' + lbRow.pos : '—'}</div>
            <div className="v-tag" style={{ marginTop: 6 }}>{myDiv.shortName}</div>
          </div>
          <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--vlf-line)' }} />
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
              <span className="v-muted" style={{ fontSize: 12 }}>{isTopar ? t('total') : t('points')}</span>
              {hasScores && lbRow ? isTopar ? <Score n={lbRow.total} className="" /> : <span style={{ fontWeight: 800, color: 'var(--vlf-purple-700)' }}>{lbRow.pts}</span> : <span className="v-muted">—</span>}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span className="v-muted" style={{ fontSize: 12 }}>{t('today')}{hasScores && lbRow ? ' · ' + t('thru') + ' ' + lbRow.thru : ''}</span>
              {hasScores && lbRow ? isTopar ? <Score n={lbRow.today} className="" /> : <span style={{ fontWeight: 700 }}>{lbRow.today}</span> : <span className="v-muted" style={{ fontSize: 12 }}>{T('Khởi tranh 25/09', 'Starts Sep 25')}</span>}
            </div>
          </div>
        </div>

        <div className="v-sect"><h3>{T('Giờ xuất phát của tôi', 'My tee times')}</h3>{myTees.length > 0 && <a onClick={() => setSub('teetime')}>{t('viewAll')} ›</a>}</div>
        {myTees.length === 0 ?
        <div className="v-card" style={{ padding: 16 }}><span className="v-muted" style={{ fontSize: 13 }}>{T('Lịch sẽ công bố sau bốc thăm.', 'Schedule announced after the draw.')}</span></div> :

        <div className="v-card">
            {myTees.map((g, i) => {
            const day = window.VLF.teeDays.find((x) => x.id === g.dayId);
            return (
              <div className="v-row" key={i} style={{ cursor: 'default' }}>
                  <div style={{ textAlign: 'center', flex: '0 0 auto' }}>
                    <div className="v-tee-time v-num" style={{ fontSize: 18 }}>{g.time}</div>
                    <div className="v-muted" style={{ fontSize: 10.5 }}>{day.dow} {day.date}</div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="t" style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
                      <span>{day.label}</span>
                      <button className="v-tee-hole v-tee-hole-btn" onClick={(e) => { e.stopPropagation(); nav('map', { focusHole: g.hole, focusDay: g.dayId, focusDiv: g.div }); }}>
                        <Icon name="pin" size={11} sw={2} />{String(g.hole).charAt(0) === 'T' ? (lang === 'en' ? 'Station ' : 'Trạm ') + String(g.hole).slice(1) : (lang === 'en' ? 'Hole ' : 'Hố ') + g.hole}
                      </button>
                    </div>
                    <div className="s">{T('Cùng', 'With')} {g.g.filter((n) => n !== me.name).join(', ') || '—'}</div>
                  </div>
                </div>);

          })}
          </div>
        }

        <div className="v-mt-buy" style={{ marginTop: 14 }} onClick={() => setSub('leaderboard')}>
          <div className="ic"><Icon name="trophy" size={20} sw={1.8} /></div>
          <div className="tx"><div className="t">{T('Bảng đấu ' + myDiv.shortName, myDiv.shortName + ' leaderboard')}</div><div className="s">{T('Xem toàn bảng & vị trí các golfer', 'View full standings & all golfers')}</div></div>
          <Icon name="chev" size={20} className="chev" />
        </div>
      </> : <>
        <div className="v-sect" style={{ marginTop: 6 }}><h3>{t('following')} ({followedList.length})</h3>{followedList.length > 0 && <a onClick={() => setSub('players')}>{T('Thêm', 'Add')} ›</a>}</div>
        {followedList.length === 0 ?
        <div className="v-card" style={{ padding: '18px 16px', textAlign: 'center' }}>
            <div className="v-muted" style={{ fontSize: 13, marginBottom: 13, lineHeight: 1.5 }}>{T('Bạn chưa theo dõi golfer nào. Theo dõi để bảng điểm của họ hiện ngay tại đây.', 'Follow golfers to see their standings right here.')}</div>
            <button className="v-btn v-btn-ghost" style={{ height: 44 }} onClick={() => setSub('players')}>{T('Khám phá golfer', 'Browse golfers')}</button>
          </div> :

        <div className="v-card">
            {followedList.map((p, i) => {
            const dd = window.VLF.divById(p.div);
            const row = (window.VLF.leaderboard[p.div] || []).find((r) => r.name === p.name);
            const tp = dd.scoring === 'topar';
            return (
              <div className="v-prow" key={i} onClick={() => nav('golfer', { name: p.name })}>
                  <Ava name={p.name} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="nm">{p.name}</div>
                    <div className="meta"><CountryDot cc={p.cc} /><span className="v-tag" style={{ color: dd.accent }}>{p.cls}</span></div>
                  </div>
                  {hasScores && row ? tp ? <Score n={row.total} /> : <span style={{ fontWeight: 800, color: 'var(--vlf-purple-700)' }}>{row.pts}</span> : <Icon name="chev" size={18} className="chev" />}
                </div>);

          })}
          </div>
        }

        {hasScores ? <>
          <div className="v-sect"><h3>{t('leaderboardSnap')}</h3><a onClick={() => setSub('leaderboard')}>{t('viewAll')} ›</a></div>
          <div className="v-card">
            {(window.VLF.leaderboard.legends || []).slice(0, 3).map((p) =>
            <div key={p.pos} className={'v-lb-row' + (p.pos === 1 ? ' lead' : '')} onClick={() => nav('golfer', { name: p.name })}>
                <div className="v-lb-pos">{p.pos}</div>
                <div className="v-lb-name"><div className="nm">{p.name}</div><CountryDot cc={p.cc} /></div>
                <Score n={p.total} /><span className="v-lb-sub">{p.thru}</span>
              </div>
            )}
          </div>
        </> :
        <div className="v-mt-buy" style={{ marginTop: 14 }} onClick={() => setSub('leaderboard')}>
            <div className="ic"><Icon name="trophy" size={20} sw={1.8} /></div>
            <div className="tx"><div className="t">{T('Bảng điểm', 'Leaderboard')}</div><div className="s">{T('Mở khi giải khởi tranh · xem thông tin 8 bảng', 'Opens at first tee · 8 divisions')}</div></div>
            <Icon name="chev" size={20} className="chev" />
          </div>
        }
      </>}
    </div>);

}

/* ---------- LEADERBOARD ---------- */
function Leaderboard({ phase, nav }) {
  const t = useT();const lang = t.lang;
  const [div, setDiv] = useState('legends');
  const [view, setView] = useState('individual');
  const d = window.VLF.divById(div);
  const rows = window.VLF.leaderboard[div] || [];
  const isTopar = d.scoring === 'topar';

  if (phase === 'pre') {
    return (
      <>
        <div className="v-pad" style={{ paddingTop: 4 }}><DivChips value={div} onChange={setDiv} includeAll={false} /></div>
        <div className="v-empty">
          <div className="ic"><Icon name="trophy" size={28} sw={1.6} /></div>
          <div className="t">{lang === 'en' ? 'Leaderboard opens at first tee' : 'Bảng điểm mở khi giải khởi tranh'}</div>
          <div className="s">{d.name} · {d.days.join(' · ')} · {d.format}. {lang === 'en' ? 'Follow live here from Sep 25.' : 'Theo dõi trực tiếp tại đây từ 25/09.'}</div>
        </div>
      </>);

  }

  return (
    <>
      <div className="v-pad" style={{ paddingTop: 4, paddingBottom: 6 }}>
        <DivChips value={div} onChange={setDiv} includeAll={false} />
      </div>
      <div className="v-pad" style={{ paddingTop: 0, paddingBottom: 6, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span className="v-pill v-pill-purple"><span style={{ width: 7, height: 7, borderRadius: 9, background: d.accent, display: 'inline-block' }} />{d.format}</span>
        <span className="v-live" style={{ color: 'var(--vlf-under)', fontSize: 10.5 }}><i style={{ background: 'var(--vlf-under)' }} />{lang === 'en' ? 'Live' : 'Trực tiếp'}</span>
      </div>
      {div === 'legends' &&
      <div className="v-pad" style={{ paddingTop: 0, paddingBottom: 8 }}>
          <Segmented value={view} onChange={setView} items={[{ id: 'individual', label: t('individual') }, { id: 'alliance', label: t('alliance') + ' · 2 Pro + 1 Am' }]} />
        </div>
      }
      {div === 'legends' && view === 'alliance' ?
      <div className="v-card" style={{ margin: '0 16px' }}>
          <div className="v-lb-head"><div style={{ textAlign: 'center' }}>{t('pos')}</div><div>{t('alliance')}</div><div style={{ textAlign: 'right' }}>{t('total')}</div></div>
          {window.VLF.alliance.map((a) =>
        <div key={a.pos} className={'v-lb-row' + (a.pos === 1 ? ' lead' : '')} style={{ gridTemplateColumns: '34px 1fr 56px', cursor: 'default' }}>
              <div className="v-lb-pos">{a.pos}</div>
              <div className="v-lb-name"><div className="nm">{a.team}</div><div className="v-muted" style={{ fontSize: 11, marginTop: 2 }}>{a.members}</div></div>
              <Score n={a.pts} />
            </div>
        )}
          <div className="v-lb-foot">{lang === 'en' ? 'Alliance · 2 Pro + 1 Amateur · best team gross' : 'Alliance · 2 Pro + 1 Amateur · điểm đồng đội'}</div>
        </div> :

      <div className="v-card" style={{ margin: '0 16px' }}>
        <div className="v-lb-head">
          <div style={{ textAlign: 'center' }}>{t('pos')}</div>
          <div>{t('players')}</div>
          <div style={{ textAlign: 'right' }}>{isTopar ? t('total') : t('points')}</div>
          <div style={{ textAlign: 'right' }}>{isTopar ? t('thru') : t('today')}</div>
        </div>
        {rows.map((p) =>
        <div key={p.pos} className={'v-lb-row' + (p.pos === 1 ? ' lead' : '')} onClick={() => nav('golfer', { name: p.name })}>
            <div className="v-lb-pos">{p.pos}</div>
            <div className="v-lb-name">
              <div className="nm">{p.name}</div>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 2, flexWrap: 'wrap' }}>
                <CountryDot cc={p.cc} />
                {isTopar && <span className="v-muted v-num" style={{ fontSize: 11, whiteSpace: 'nowrap' }}>{lang === 'en' ? 'Today' : 'Hôm nay'} {fmtScore(p.today)}</span>}
                {p.grp && window.VLF.amateurGroups[p.grp] && <span className="v-pill" style={{ fontSize: 9.5, padding: '1px 7px', background: p.grp === 'intl' ? 'rgba(78,108,176,.14)' : 'rgba(62,142,126,.14)', color: p.grp === 'intl' ? '#4E6CB0' : '#3E8E7E' }}>{lang === 'en' ? window.VLF.amateurGroups[p.grp].en : window.VLF.amateurGroups[p.grp].vi}</span>}
              </div>
            </div>
            {isTopar ? <Score n={p.total} /> : <span className="v-lb-col" style={{ color: 'var(--vlf-purple-700)' }}>{p.pts}</span>}
            {isTopar ? <span className="v-lb-sub">{p.thru}</span> : <span className="v-lb-sub">{p.today}</span>}
          </div>
        )}
        <div className="v-lb-foot">{div === 'amateurs' ? lang === 'en' ? 'All amateurs (T6–Sun) · top 5 VN/day + top 5 international advance to the final' : 'Tất cả Am (T6–CN) · Top 5 Việt mỗi ngày + Top 5 Quốc tế vào chung kết' : div === 'alliance' ? lang === 'en' ? 'Alliance · T6–T7 team scoring · 2 Pro + 1 amateur' : 'Alliance · bảng điểm đội T6–T7 · 2 Pro + 1 Am' : isTopar ? lang === 'en' ? 'Gross to-par · lowest wins · 60 legends · 3 rounds · no cut' : 'Gross theo to-par · thấp thắng · 60 huyền thoại · 3 vòng · không cut' : lang === 'en' ? 'Stableford points · highest wins' : 'Điểm Stableford · cao thắng'}</div>
      </div>
      }
    </>);

}

/* ---------- TEE TIME ---------- */
function TeeTime({ nav, initDay }) {
  const t = useT();const lang = t.lang;
  const [day, setDay] = useState(initDay || '25');
  React.useEffect(() => {if (initDay) setDay(initDay);}, [initDay]);
  const [div, setDiv] = useState('all');
  const dayDivs = (window.VLF.teeDays.find((x) => x.id === day) || {}).divs || [];
  React.useEffect(() => {if (div !== 'all' && !dayDivs.includes(div)) setDiv('all');}, [day]);
  const [q, setQ] = useState('');
  const T = (vi, en) => lang === 'en' ? en : vi;
  const E = (o, k) => window.VLF.L(lang, o, k);
  const qn = q.trim().toLowerCase();
  const groups = (window.VLF.teeTimes[day] || []).filter((g) => (div === 'all' || g.div === div) && (!qn || g.g.some((n) => n.toLowerCase().includes(qn))));

  return (
    <>
      <div className="v-pad" style={{ paddingTop: 4, paddingBottom: 8 }}>
        <div className="v-search"><Icon name="search" size={18} sw={2} /><input value={q} onChange={(e) => setQ(e.target.value)} placeholder={t('search')} /></div>
      </div>
      <div className="v-pad" style={{ paddingTop: 0, paddingBottom: 6 }}>
        <div className="v-tee-day">
          {window.VLF.teeDays.map((dd) =>
          <div key={dd.id} className={'v-dchip' + (day === dd.id ? ' on' : '')} onClick={() => setDay(dd.id)}>
              <div className="dw">{dd.dow}</div>
              <div className="dd v-num">{dd.date.slice(0, 2)}</div>
            </div>
          )}
        </div>
      </div>
      <div className="v-pad" style={{ paddingTop: 0, paddingBottom: 8 }}>
        {(() => {
          const D = window.VLF.teeDays.find((x) => x.id === day);const shot = D.fmt === 'shotgun';
          return (
            <div className="v-card" style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 38, height: 38, borderRadius: 11, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', background: shot ? 'rgba(201,162,75,.14)' : 'var(--vlf-purple-50)', color: shot ? 'var(--vlf-gold-700)' : 'var(--vlf-purple-700)' }}>
                <Icon name={shot ? 'flag' : 'clock'} size={20} sw={1.7} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{shot ? T('Xuất phát Shotgun', 'Shotgun start') : 'Tee Time'} · {D.start}{D.end ? ' – ' + D.end : ''}</div>
                <div style={{ fontSize: 12, color: 'var(--vlf-ink-500)', marginTop: 2 }}>{E(D, 'who')}</div>
              </div>
              {day === '27' && <span className="v-pill v-pill-gold">{T('Chung kết 60+15', 'Final 60+15')}</span>}
            </div>);

        })()}
      </div>
      <div className="v-pad" style={{ paddingTop: 0, paddingBottom: 6 }}><DivChips value={div} onChange={setDiv} only={dayDivs} /></div>
      {groups.length === 0 ?
      <div className="v-empty"><div className="ic"><Icon name="clock" size={26} /></div><div className="t">{lang === 'en' ? 'No tee times' : 'Chưa có giờ xuất phát'}</div><div className="s">{lang === 'en' ? 'No matching groups for this filter.' : 'Không có nhóm phù hợp với bộ lọc.'}</div></div> :

      <div className="v-card" style={{ margin: '0 16px' }}>
          {groups.map((g, i) => {
          const dd = window.VLF.divById(g.div);
          return (
            <div className="v-tee-grp" key={i}>
                <div className="top">
                  <div className="v-tee-time v-num">{g.time}</div>
                  <button className="v-tee-hole v-tee-hole-btn" onClick={() => nav('map', { focusHole: g.hole, focusDay: day, focusDiv: g.div })}>
                    <Icon name="pin" size={12} sw={2} />{String(g.hole).charAt(0) === 'T' ? (lang === 'en' ? 'Station ' : 'Trạm ') + String(g.hole).slice(1) : (lang === 'en' ? 'Hole ' : 'Hố ') + g.hole}
                  </button>
                  <span className="v-tag" style={{ marginLeft: 'auto', color: dd.accent }}>{dd.shortName}</span>
                </div>
                {g.g.map((nm, j) =>
              <div className="v-tee-g" key={j} onClick={() => nav('golfer', { name: nm })}>
                    <Ava name={nm} size={30} />
                    <span className="nm">{nm}</span>
                  </div>
              )}
              </div>);

        })}
        </div>
      }
    </>);

}

/* ---------- PLAYERS ---------- */
function Players({ nav, followed, toggleFollow }) {
  const t = useT();const lang = t.lang;
  const [cls, setCls] = useState('all');
  const [q, setQ] = useState('');
  const qn = q.trim().toLowerCase();
  const list = window.VLF.players.filter((p) => (cls === 'all' || p.cls === cls) && (!qn || p.name.toLowerCase().includes(qn)));
  const classes = ['all', ...window.VLF.classes];

  return (
    <>
      <div className="v-pad" style={{ paddingTop: 4, paddingBottom: 8 }}>
        <div className="v-search"><Icon name="search" size={18} sw={2} /><input value={q} onChange={(e) => setQ(e.target.value)} placeholder={t('search')} /></div>
      </div>
      <div className="v-pad" style={{ paddingTop: 0, paddingBottom: 6 }}>
        <div className="v-chips">
          {classes.map((c) =>
          <div key={c} className={'v-chip' + (cls === c ? ' on' : '')} onClick={() => setCls(c)}>{c === 'all' ? t('all') : c}</div>
          )}
        </div>
      </div>
      {list.length === 0 ?
      <div className="v-empty"><div className="ic"><Icon name="search" size={24} /></div><div className="t">{lang === 'en' ? 'No golfer found' : 'Không tìm thấy golfer'}</div></div> :

      <div className="v-card" style={{ margin: '0 16px' }}>
          {list.map((p, i) => {
          const dd = window.VLF.divById(p.div);
          const fav = followed.has(p.name);
          return (
            <div className="v-prow" key={i} onClick={() => nav('golfer', { name: p.name })}>
                <Ava name={p.name} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="nm">{p.name}</div>
                  <div className="meta">
                    <CountryDot cc={p.cc} />
                    <span className="v-tag" style={{ color: dd.accent }}>{p.cls}</span>
                  </div>
                </div>
                <div className={'v-star' + (fav ? ' on' : '')} onClick={(e) => {e.stopPropagation();toggleFollow(p.name);}}>
                  <Icon name="star" size={18} fill={fav} sw={1.8} />
                </div>
              </div>);

        })}
        </div>
      }
    </>);

}

/* ---------- GOLFER DETAIL (L2) ---------- */
function GolferDetail({ name, phase, followed, toggleFollow, nav }) {
  const t = useT();const lang = t.lang;const E = (o, k) => window.VLF.L(lang, o, k);
  const p = window.VLF.players.find((x) => x.name === name) ||
  { name, cc: 'VIE', cls: 'Legend', div: 'legends', bio: 'Golfer · Vietnam Legends Festival 2026', pos: '—' };
  const dd = window.VLF.divById(p.div);
  const lbRow = (window.VLF.leaderboard[p.div] || []).find((r) => r.name === name);
  const fav = followed.has(name);
  const isTopar = dd.scoring === 'topar';

  // tee times của golfer này
  const myTees = [];
  Object.entries(window.VLF.teeTimes).forEach(([dayId, groups]) => {
    groups.forEach((g) => {if (g.g.includes(name)) myTees.push({ dayId, ...g });});
  });

  return (
    <div className="v-screen" style={{ paddingBottom: 24 }}>
      <div className="v-gd-hero">
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Ava name={name} size={64} style={{ background: 'rgba(255,255,255,.12)' }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <span className="v-pill" style={{ background: 'rgba(201,162,75,.2)', color: 'var(--vlf-gold-300)' }}>{p.cls} · {dd.shortName}</span>
            <h2>{name}</h2>
            <div style={{ fontSize: 12.5, opacity: .8 }}>{p.cc} · {E(p, 'bio')}</div>
          </div>
        </div>
        <div className="v-gd-stat">
          <div className="b"><b className="v-num">{phase === 'live' && lbRow ? lbRow.pos : '—'}</b><span>{t('pos')}</span></div>
          <div className="b">
            <b className="v-num">{phase === 'live' && lbRow ? isTopar ? fmtScore(lbRow.total) : lbRow.pts : '—'}</b>
            <span>{isTopar ? t('total') : t('points')}</span>
          </div>
          <div className="b"><b className="v-num">{phase === 'live' && lbRow && isTopar ? fmtScore(lbRow.today) : lbRow && !isTopar ? lbRow.today : '—'}</b><span>{t('today')}</span></div>
        </div>
        <button className="v-btn" style={{ marginTop: 16, height: 46, background: fav ? 'rgba(255,255,255,.16)' : 'var(--vlf-gold-500)', color: fav ? '#fff' : 'var(--vlf-purple-900)' }} onClick={() => toggleFollow(name)}>
          <Icon name="star" size={18} fill={fav} sw={1.8} />{fav ? t('following') : t('follow')}
        </button>
      </div>

      <div className="v-pad">
        {p.div === 'legends' && (() => {
          const last = name.split(' ').pop();
          const team = window.VLF.alliance.find((a) => a.team.split(' · ').some((m) => m === last || last.includes(m) || m.includes(last)));
          if (!team) return null;
          return (
            <>
              <div className="v-sect"><h3>{t('alliance')}</h3><span className="v-muted" style={{ fontSize: 12 }}>2 Pro + 1 Am</span></div>
              <div className="v-card" style={{ padding: 15, display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ textAlign: 'center', flex: '0 0 auto' }}>
                  <div className="v-num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, color: 'var(--vlf-gold-700)', lineHeight: 1 }}>#{team.pos}</div>
                  <div className="v-tag" style={{ marginTop: 5 }}>{t('alliance')}</div>
                </div>
                <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--vlf-line)' }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{team.team}</div>
                  <div className="v-muted" style={{ fontSize: 12, marginTop: 3 }}>{lang === 'en' ? 'Team gross' : 'Điểm đồng đội'}</div>
                </div>
                <Score n={team.pts} className="" />
              </div>
            </>);

        })()}
        {phase === 'live' && lbRow && isTopar && (() => {
          const par = [4, 4, 3, 5, 4, 4, 3, 4, 5, 4, 3, 4, 5, 4, 4, 3, 5, 4];
          let h = 0;for (let i = 0; i < name.length; i++) h = h * 31 + name.charCodeAt(i) >>> 0;
          const round = lbRow.r && lbRow.r[lbRow.r.length - 1] || 72;
          const delta = new Array(18).fill(0);
          let need = Math.abs(round - 72),sgn = round < 72 ? -1 : 1,idx = 0,g = 0;
          while (need > 0 && g < 300) {const k = (h + idx * 7) % 18;if (delta[k] === 0) {delta[k] = sgn;need--;}idx++;g++;}
          const sc = par.map((p, i) => p + delta[i]);
          const sum = (a) => a.reduce((x, y) => x + y, 0);
          const out = sum(sc.slice(0, 9)),inn = sum(sc.slice(9)),tot = out + inn;
          const Cell = ({ v, p }) => <span className={v < p ? 'v-score-under' : v > p ? 'v-score-over' : ''} style={{ fontWeight: 800, fontSize: 13 }}>{v}</span>;
          return (
            <>
              <div className="v-sect"><h3>{t('scorecard')}</h3><span className="v-muted" style={{ fontSize: 12 }}>Par 72</span></div>
              <div className="v-card v-sc">
                <div className="v-sc-row">
                  {par.map((p, i) =>
                  <div className="v-sc-h" key={i}><div className="hn">{i + 1}</div><div className="pr">{p}</div><div className="st"><Cell v={sc[i]} p={p} /></div></div>
                  )}
                  <div className="v-sc-h v-sc-tot"><div className="hn">{lang === 'en' ? 'TOT' : 'TỔNG'}</div><div className="pr">72</div><div className="st">{tot}</div></div>
                </div>
                <div className="v-sc-sum"><span>OUT {out}</span><span>IN {inn}</span><span style={{ color: 'var(--vlf-purple-700)', fontWeight: 800 }}>{fmtScore(tot - 72)}</span></div>
              </div>
            </>);

        })()}
        <div className="v-sect"><h3>{lang === 'en' ? 'Schedule' : 'Lịch thi đấu'}</h3></div>
        {myTees.length === 0 ?
        <div className="v-card" style={{ padding: 16 }}><span className="v-muted" style={{ fontSize: 13 }}>{lang === 'en' ? 'Schedule announced after the draw.' : 'Lịch sẽ công bố sau bốc thăm.'}</span></div> :

        <div className="v-card">
            {myTees.map((g, i) => {
            const day = window.VLF.teeDays.find((x) => x.id === g.dayId);
            return (
              <div className="v-row" key={i}>
                  <div style={{ textAlign: 'center', flex: '0 0 auto' }}>
                    <div className="v-tee-time v-num" style={{ fontSize: 18 }}>{g.time}</div>
                    <div className="v-muted" style={{ fontSize: 10.5 }}>{day.dow} {day.date}</div>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="t" style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
                      <span>{day.label}</span>
                      <button className="v-tee-hole v-tee-hole-btn" onClick={(e) => { e.stopPropagation(); nav('map', { focusHole: g.hole, focusDay: g.dayId, focusDiv: g.div }); }}>
                        <Icon name="pin" size={11} sw={2} />{String(g.hole).charAt(0) === 'T' ? (lang === 'en' ? 'Station ' : 'Trạm ') + String(g.hole).slice(1) : (lang === 'en' ? 'Hole ' : 'Hố ') + g.hole}
                      </button>
                    </div>
                    <div className="s">{lang === 'en' ? 'With' : 'Cùng'} {g.g.filter((n) => n !== name).join(', ') || '—'}</div>
                  </div>
                </div>);

          })}
          </div>
        }
      </div>
    </div>);

}

Object.assign(window, { Compete, MyCompete, GolferDetail });