// final.jsx — finalized & combined designs after Connor's picks.

const _Tf = window.T_AU, _Df = window.D_AU, _If = window.Icon_AU, _Avf = window.Avatar_AU,
      _Mf = window.Money_AU, _Cf = window.Chip_AU, _PSf = window.PhoneScreen_AU;

// ─────────────────────────────────────────────────────────────────
// HOME — combo of B (hero live round) + D (editorial dark/gold)
// Dark forest bg, Playfair display headlines, gold accents — but the
// HERO live round dominates the top of the screen (B's structure).
// ─────────────────────────────────────────────────────────────────
function HomeFinal() {
  return (
    <_PSf bg={_Tf.webBg} statusDark>
      <div style={{ flex: 1, overflowY: 'auto', color: _Tf.webText, position: 'relative' }}>
        {/* gold glow behind hero */}
        <div style={{
          position: 'absolute', top: -80, left: '50%', transform: 'translateX(-50%)',
          width: 360, height: 360, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(201,168,76,0.16) 0%, transparent 60%)',
          pointerEvents: 'none',
        }}/>

        {/* Masthead */}
        <div style={{ position: 'relative', padding: '14px 22px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ font: `400 10px/1 ${_Tf.fontBody}`, letterSpacing: '0.36em', color: _Tf.webGold, textTransform: 'uppercase' }}>Sat · May 18</div>
            <div style={{ font: `700 22px/1 ${_Tf.fontDisplay}`, marginTop: 6, letterSpacing: '-0.01em' }}>
              Morning, <em style={{ color: _Tf.webGold, fontStyle: 'italic' }}>Mike.</em>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <button style={{
              position: 'relative', width: 36, height: 36, borderRadius: 12,
              background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(201,168,76,0.2)',
              color: _Tf.webGold, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <_If name="bell" size={18}/>
              <span style={{ position: 'absolute', top: -4, right: -4, width: 14, height: 14, borderRadius: 7, background: _Tf.accent, font: `700 9px/14px ${_Tf.fontBody}`, color: '#fff', textAlign: 'center' }}>1</span>
            </button>
            <_Avf player={_Df.user} size={36}/>
          </div>
        </div>

        {/* HERO LIVE ROUND */}
        <div style={{ position: 'relative', padding: '18px 22px 22px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: '#5BE584', boxShadow: '0 0 0 4px rgba(91,229,132,0.25)' }}/>
            <span style={{ font: `600 10px/1 ${_Tf.fontBody}`, letterSpacing: '0.32em', textTransform: 'uppercase', color: _Tf.webGold }}>
              Playing now · Thru 6
            </span>
          </div>
          <div style={{ font: `400 11px/1 ${_Tf.fontBody}`, color: 'rgba(240,235,224,0.55)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 6 }}>
            Miami Golf Center · Blue
          </div>
          <h1 style={{ font: `700 38px/0.95 ${_Tf.fontDisplay}`, margin: 0, letterSpacing: '-0.02em' }}>
            Saturday<br/><em style={{ color: _Tf.webGold }}>at MGC.</em>
          </h1>

          {/* Stat strip */}
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 22, marginTop: 22,
            padding: '14px 18px',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(201,168,76,0.18)',
            borderRadius: 18, backdropFilter: 'blur(10px)',
          }}>
            <BigStatF label="Score" value="E"/>
            <BigStatF label="Money" value="+$12" tone="gold"/>
            <BigStatF label="Pos" value="2"/>
            <div style={{ width: 1, height: 28, background: 'rgba(201,168,76,0.18)' }}/>
            <BigStatF label="Hole" value="7"/>
          </div>

          <button style={{
            marginTop: 18, padding: '14px 22px',
            background: _Tf.webGold, color: _Tf.webBg, border: 'none',
            borderRadius: 100, font: `600 14px/1 ${_Tf.fontBody}`, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            boxShadow: '0 8px 24px rgba(201,168,76,0.24)',
          }}>Resume round <_If name="arrowR" size={14}/></button>
          <button style={{
            marginTop: 18, marginLeft: 8, padding: '14px 18px',
            background: 'transparent', color: _Tf.webText,
            border: '1px solid rgba(255,255,255,0.18)',
            borderRadius: 100, font: `600 14px/1 ${_Tf.fontBody}`, cursor: 'pointer',
          }}>Live leaderboard</button>
        </div>

        <div style={{ height: 1, background: 'rgba(201,168,76,0.18)', margin: '0 22px' }}/>

        {/* On the docket — invites + upcoming */}
        <div style={{ padding: '20px 22px 8px' }}>
          <div style={{ font: `600 10px/1 ${_Tf.fontBody}`, letterSpacing: '0.32em', color: _Tf.webGold, textTransform: 'uppercase', marginBottom: 12 }}>On the docket</div>
          <UpcomingCardF host="Carter Hayes" course="Doral Blue Monster" date="Sun · 7:30am" reserve="$15"/>
        </div>

        {/* Recent — minimal list */}
        <div style={{ padding: '4px 22px 22px' }}>
          <div style={{ font: `600 10px/1 ${_Tf.fontBody}`, letterSpacing: '0.32em', color: _Tf.webGold, textTransform: 'uppercase', marginBottom: 4 }}>Last 3 rounds</div>
          {_Df.finished.map((r, i) => (
            <div key={r.id} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '14px 0',
              borderBottom: i < _Df.finished.length - 1 ? `1px solid rgba(201,168,76,0.12)` : 'none',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: '50%',
                background: r.win ? 'rgba(91,229,132,0.16)' : 'rgba(192,57,43,0.18)',
                color: r.win ? '#5BE584' : '#F0805F',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                font: `700 14px/1 ${_Tf.fontDisplay}`, fontVariantNumeric: 'tabular-nums',
              }}>{r.score}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: `600 14px/1.2 ${_Tf.fontBody}`, color: _Tf.webText }}>{r.course}</div>
                <div style={{ font: `300 11px/1.3 ${_Tf.fontBody}`, color: 'rgba(240,235,224,0.5)', marginTop: 3 }}>{r.date}</div>
              </div>
              <div style={{
                font: `600 14px/1 ${_Tf.fontMono}`, fontVariantNumeric: 'tabular-nums',
                color: r.win ? '#5BE584' : '#F0805F',
              }}>{r.win ? '+' : '−'}${(Math.abs(r.money)/100).toFixed(0)}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Dark bottom nav */}
      <div style={{
        flexShrink: 0, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
        background: 'rgba(11,28,21,0.7)', backdropFilter: 'blur(20px)',
        borderTop: `1px solid rgba(201,168,76,0.18)`,
        padding: '10px 0 6px',
      }}>
        {[['home','Home',true],['users','Crews'],['plus','',false,true],['wallet','Wallet'],['menu','More']].map(([icon,label,active,center]) => {
          if (center) return <div key="c" style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{ width: 52, height: 52, borderRadius: '50%', background: _Tf.webGold, marginTop: -16, display: 'flex', alignItems: 'center', justifyContent: 'center', color: _Tf.webBg, boxShadow: '0 6px 20px rgba(201,168,76,0.32)' }}><_If name="plusBig" size={24} stroke={2.5}/></div>
          </div>;
          return (
            <div key={icon} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, color: active ? _Tf.webGold : 'rgba(240,235,224,0.42)' }}>
              <_If name={icon} size={20}/>
              <span style={{ font: `500 9px/1 ${_Tf.fontBody}`, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{label}</span>
            </div>
          );
        })}
      </div>
    </_PSf>
  );
}

function BigStatF({ label, value, tone }) {
  const color = tone === 'gold' ? _Tf.webGold : _Tf.webText;
  return (
    <div>
      <div style={{ font: `400 10px/1 ${_Tf.fontBody}`, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'rgba(240,235,224,0.5)' }}>{label}</div>
      <div style={{ font: `700 26px/1 ${_Tf.fontDisplay}`, color, marginTop: 6, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>{value}</div>
    </div>
  );
}
function UpcomingCardF({ host, course, date, reserve }) {
  return (
    <div style={{
      background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(201,168,76,0.18)',
      borderRadius: 18, padding: 18,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <h3 style={{ font: `700 19px/1.1 ${_Tf.fontDisplay}`, margin: 0, color: _Tf.webText }}>{course}</h3>
        <span style={{ font: `400 11px/1 ${_Tf.fontBody}`, color: _Tf.webGold }}>{date}</span>
      </div>
      <p style={{ font: `300 13px/1.5 ${_Tf.fontBody}`, color: 'rgba(240,235,224,0.6)', margin: '8px 0 14px' }}>
        {host} invited you. Reserves {reserve} from your wallet on accept.
      </p>
      <div style={{ display: 'flex', gap: 8 }}>
        <button style={{ background: _Tf.webGold, color: _Tf.webBg, border: 'none', borderRadius: 100, padding: '8px 16px', font: `600 12px/1 ${_Tf.fontBody}`, cursor: 'pointer' }}>Accept</button>
        <button style={{ background: 'transparent', color: _Tf.webText, border: '1px solid rgba(255,255,255,0.18)', borderRadius: 100, padding: '8px 16px', font: `600 12px/1 ${_Tf.fontBody}`, cursor: 'pointer' }}>View</button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// ROUND PLAY — A (high-contrast scorecard) + a Sunlight-mode toggle
// that swaps the whole screen for the D treatment (max-contrast dark).
// ─────────────────────────────────────────────────────────────────
function RoundFinal() {
  const [sun, setSun] = React.useState(false);
  const [hole, setHole] = React.useState(7);
  const [view, setView] = React.useState('leader');

  if (sun) return <RoundSun setSun={setSun} hole={hole} setHole={setHole}/>;
  return <RoundDay setSun={setSun} hole={hole} setHole={setHole} view={view} setView={setView}/>;
}

function RoundDay({ setSun, hole, setHole, view, setView }) {
  const par = _Df.pars[hole - 1];
  return (
    <_PSf bg={_Tf.bg}>
      {/* Sticky header */}
      <div style={{ flexShrink: 0, background: _Tf.primaryDeep, color: '#fff', padding: '12px 16px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <_If name="chevL" size={22}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ font: `700 16px/1.1 ${_Tf.fontApp}` }}>Miami Golf Center</div>
            <div style={{ font: `400 11px/1.2 ${_Tf.fontApp}`, opacity: 0.7, marginTop: 2 }}>Saturday at MGC · Blue</div>
          </div>
          <SunToggle on={false} onClick={() => setSun(true)}/>
        </div>
        {/* Hole strip */}
        <div style={{ display: 'flex', gap: 4, marginTop: 12, overflowX: 'auto' }} className="no-scroll">
          {Array.from({ length: 18 }).map((_, i) => {
            const h = i + 1;
            const scored = _Df.scores.me[i] != null;
            const isCur = h === hole;
            return (
              <button key={h} onClick={() => setHole(h)} style={{
                minWidth: 32, height: 36, borderRadius: 8, border: 'none', cursor: 'pointer',
                background: isCur ? '#fff' : scored ? 'rgba(255,255,255,0.18)' : 'transparent',
                color: isCur ? _Tf.primaryDeep : scored ? '#fff' : 'rgba(255,255,255,0.5)',
                font: `700 13px/1 ${_Tf.fontApp}`, padding: 0,
                border: isCur ? 'none' : `1px solid ${scored ? 'transparent' : 'rgba(255,255,255,0.18)'}`,
              }}>{h}</button>
            );
          })}
        </div>
      </div>

      {/* Hole banner */}
      <div style={{ flexShrink: 0, padding: '14px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ font: `600 11px/1 ${_Tf.fontApp}`, color: _Tf.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Hole {hole}</div>
          <div style={{ font: `700 28px/1 ${_Tf.fontApp}`, color: _Tf.ink, marginTop: 6, letterSpacing: '-0.01em' }}>Par {par} · {_Df.round.holeYards} yds</div>
        </div>
        <button onClick={() => setView(view === 'leader' ? 'score' : 'leader')} style={{
          background: _Tf.card, border: 'none', padding: '10px 14px', borderRadius: 10,
          font: `700 12px/1 ${_Tf.fontApp}`, color: _Tf.primary, cursor: 'pointer',
          boxShadow: '0 1px 2px rgba(27,58,45,0.06)',
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <_If name={view === 'leader' ? 'plusBig' : 'list'} size={16} stroke={2.25}/>
          {view === 'leader' ? 'Enter score' : 'Leaderboard'}
        </button>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px 16px' }}>
        {view === 'leader' ? <DayLeaderboard/> : <DayScoreEntry hole={hole} par={par}/>}
      </div>
    </_PSf>
  );
}

function SunToggle({ on, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 6,
      padding: '6px 12px', borderRadius: 100, border: 'none', cursor: 'pointer',
      background: on ? '#5BE584' : 'rgba(255,255,255,0.14)',
      color: on ? '#0E2E20' : '#fff',
      font: `700 11px/1 ${_Tf.fontApp}`, letterSpacing: '0.12em', textTransform: 'uppercase',
    }}>
      <_If name="spark" size={14} stroke={2.25}/>
      Sun
    </button>
  );
}

function DayLeaderboard() {
  return (
    <>
      <div style={{ background: _Tf.card, borderRadius: 16, overflow: 'hidden', boxShadow: '0 1px 2px rgba(27,58,45,0.04), 0 8px 24px rgba(27,58,45,0.05)' }}>
        <DayLeaderRow rank={1} p={_Df.players[2]} score="−1" total="33" money={1800} highlight={false}/>
        <DayLeaderRow rank={2} p={_Df.players[0]} score="E"  total="34" money={1200} highlight={true}/>
        <DayLeaderRow rank={3} p={_Df.players[1]} score="+3" total="37" money={600}  highlight={false}/>
        <DayLeaderRow rank={4} p={_Df.players[3]} score="+5" total="39" money={-1000} highlight={false} last/>
      </div>
      <div style={{ marginTop: 14, padding: 14, background: _Tf.card, borderRadius: 16, boxShadow: '0 1px 2px rgba(27,58,45,0.04)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ font: `700 13px/1 ${_Tf.fontApp}`, color: _Tf.ink }}>Nassau · You + Sarah vs Jay + Tom</div>
          <_Cf tone="win" size="sm">+$5.00 live</_Cf>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <DayBetSeg label="F9" value="UP 1" tone="win"/>
          <DayBetSeg label="B9" value="AS" tone="neutral"/>
          <DayBetSeg label="O" value="UP 1" tone="win"/>
        </div>
      </div>
      <div style={{ marginTop: 14, padding: 14, background: '#FFF7EE', borderRadius: 16, border: `1px solid #FAD9B6` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <_If name="bolt" size={16} style={{ color: _Tf.accent }}/>
          <div style={{ font: `700 12px/1 ${_Tf.fontApp}`, color: _Tf.accent, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Press offered</div>
        </div>
        <div style={{ font: `700 16px/1.2 ${_Tf.fontApp}`, color: _Tf.ink, marginTop: 8 }}>
          Jay & Tom are 2 down. They want a $5 press on the back.
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <button style={{ flex: 1, background: _Tf.win, color: '#fff', border: 'none', padding: '12px 0', borderRadius: 10, font: `700 14px/1 ${_Tf.fontApp}`, cursor: 'pointer' }}>Accept</button>
          <button style={{ flex: 1, background: 'transparent', color: _Tf.inkSub, border: `1px solid ${_Tf.divider}`, padding: '12px 0', borderRadius: 10, font: `600 14px/1 ${_Tf.fontApp}`, cursor: 'pointer' }}>Decline</button>
        </div>
      </div>
    </>
  );
}
function DayLeaderRow({ rank, p, score, total, money, highlight, last }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
      background: highlight ? _Tf.mint : 'transparent',
      borderBottom: last ? 'none' : `1px solid ${_Tf.divider}`,
      borderLeft: highlight ? `4px solid ${_Tf.win}` : '4px solid transparent',
    }}>
      <div style={{ font: `700 14px/1 ${_Tf.fontApp}`, color: _Tf.inkFaint, minWidth: 14, fontVariantNumeric: 'tabular-nums' }}>{rank}</div>
      <_Avf player={p} size={36}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: `${highlight ? 700 : 600} 14px/1.2 ${_Tf.fontApp}`, color: _Tf.ink }}>
          {p.first}{p.isMe ? ' (you)' : ''}
        </div>
        <div style={{ font: `400 11px/1 ${_Tf.fontApp}`, color: _Tf.inkSub, marginTop: 3 }}>{total} thru 6 · HCP {p.hcp}</div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ font: `700 18px/1 ${_Tf.fontApp}`, color: _Tf.ink, fontVariantNumeric: 'tabular-nums' }}>{score}</div>
        <_Mf cents={money} size={12}/>
      </div>
    </div>
  );
}
function DayBetSeg({ label, value, tone }) {
  const color = tone === 'win' ? _Tf.win : tone === 'loss' ? _Tf.loss : _Tf.inkSub;
  return (
    <div style={{ flex: 1, padding: '8px 10px', borderRadius: 10, background: _Tf.bg, textAlign: 'center' }}>
      <div style={{ font: `600 10px/1 ${_Tf.fontApp}`, color: _Tf.inkSub, letterSpacing: '0.16em' }}>{label}</div>
      <div style={{ font: `700 16px/1 ${_Tf.fontApp}`, color, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
    </div>
  );
}
function DayScoreEntry({ par, hole }) {
  const [score, setScore] = React.useState(par);
  const [threePutt, setThreePutt] = React.useState(false);
  const rel = score - par;
  const label = rel <= -2 ? 'Eagle' : rel === -1 ? 'Birdie' : rel === 0 ? 'Par' : rel === 1 ? 'Bogey' : rel === 2 ? 'Double' : `+${rel}`;
  const bigCircle = {
    width: 64, height: 64, borderRadius: '50%',
    background: _Tf.mint, color: _Tf.primary, border: 'none', cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
  };
  return (
    <div style={{ background: _Tf.card, borderRadius: 16, padding: 18, boxShadow: '0 1px 2px rgba(27,58,45,0.04), 0 8px 24px rgba(27,58,45,0.05)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <_Avf player={_Df.players[0]} size={32}/>
        <div style={{ font: `700 15px/1 ${_Tf.fontApp}`, color: _Tf.ink }}>Mike · Hole {hole}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <button onClick={() => setScore(Math.max(1, score - 1))} style={bigCircle}><_If name="minus" size={36} stroke={2.5}/></button>
        <div style={{ textAlign: 'center', flex: 1 }}>
          <div style={{ font: `800 88px/1 ${_Tf.fontApp}`, color: _Tf.primary, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.04em' }}>{score}</div>
          <div style={{ font: `700 13px/1 ${_Tf.fontApp}`, color: rel < 0 ? _Tf.win : rel === 0 ? _Tf.inkSub : _Tf.loss, marginTop: 4, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{label}</div>
        </div>
        <button onClick={() => setScore(score + 1)} style={bigCircle}><_If name="plus" size={36} stroke={2.5}/></button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, marginTop: 18 }}>
        {[['Eagle', par - 2], ['Birdie', par - 1], ['Par', par], ['Bogey', par + 1], ['Dbl', par + 2]].map(([l, v]) => (
          <button key={l} onClick={() => setScore(v)} style={{
            background: score === v ? _Tf.primary : _Tf.bg, color: score === v ? '#fff' : _Tf.ink,
            border: 'none', borderRadius: 10, padding: '10px 0',
            font: `700 12px/1 ${_Tf.fontApp}`, cursor: 'pointer',
          }}>{l}</button>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16, padding: '12px 14px', background: _Tf.bg, borderRadius: 10 }}>
        <div style={{ font: `600 13px/1.2 ${_Tf.fontApp}`, color: _Tf.ink }}>3-putt</div>
        <button onClick={() => setThreePutt(!threePutt)} style={{
          width: 48, height: 28, borderRadius: 14, border: 'none', cursor: 'pointer',
          background: threePutt ? _Tf.primary : _Tf.divider, position: 'relative',
        }}>
          <span style={{ position: 'absolute', top: 2, left: threePutt ? 22 : 2, width: 24, height: 24, borderRadius: 12, background: '#fff' }}/>
        </button>
      </div>
      <button style={{ width: '100%', marginTop: 18, background: _Tf.primary, color: '#fff', border: 'none', padding: '15px 0', borderRadius: 12, font: `700 15px/1 ${_Tf.fontApp}`, cursor: 'pointer', boxShadow: `0 4px 14px ${_Tf.primary}40` }}>
        Save & next →
      </button>
    </div>
  );
}

// Sunlight mode — D treatment
function RoundSun({ setSun, hole, setHole }) {
  const [score, setScore] = React.useState(_Df.pars[hole - 1]);
  const par = _Df.pars[hole - 1];
  const rel = score - par;
  const relLabel = rel <= -2 ? 'EAGLE' : rel === -1 ? 'BIRDIE' : rel === 0 ? 'PAR' : rel === 1 ? 'BOGEY' : rel === 2 ? 'DOUBLE' : `${rel >= 0 ? '+' : ''}${rel}`;
  const relColor = rel < 0 ? '#5BE584' : rel === 0 ? '#fff' : '#FFB066';
  const topNavBtn = {
    width: 40, height: 40, borderRadius: 12,
    background: 'rgba(255,255,255,0.08)', color: '#fff', border: 'none', cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
  const hugeBtn = {
    width: 84, height: 84, borderRadius: 24,
    background: 'rgba(255,255,255,0.12)', color: '#fff', border: 'none', cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
  return (
    <_PSf bg={'#0E2E20'} statusDark>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '12px 20px 18px', color: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button onClick={() => setHole(Math.max(1, hole - 1))} style={topNavBtn}><_If name="chevL" size={22}/></button>
          <div style={{ textAlign: 'center', flex: 1 }}>
            <div style={{ font: `700 11px/1 ${_Tf.fontApp}`, letterSpacing: '0.32em', color: 'rgba(255,255,255,0.55)' }}>MIAMI · BLUE</div>
            <div style={{ font: `400 11px/1 ${_Tf.fontApp}`, color: 'rgba(255,255,255,0.4)', marginTop: 3 }}>Saturday at MGC</div>
          </div>
          <SunToggle on={true} onClick={() => setSun(false)}/>
        </div>

        <div style={{ textAlign: 'center', marginTop: 12 }}>
          <div style={{ font: `400 11px/1 ${_Tf.fontApp}`, letterSpacing: '0.32em', color: 'rgba(255,255,255,0.5)' }}>HOLE</div>
          <div style={{ font: `900 128px/0.85 ${_Tf.fontApp}`, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.04em', color: '#fff', marginTop: 4 }}>{hole}</div>
          <div style={{ font: `700 18px/1 ${_Tf.fontApp}`, color: 'rgba(255,255,255,0.7)', marginTop: 8, letterSpacing: '0.06em' }}>PAR {par} · {_Df.round.holeYards}Y</div>
        </div>

        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-around', marginTop: 8 }}>
          <button onClick={() => setScore(Math.max(1, score - 1))} style={hugeBtn}><_If name="minus" size={48} stroke={3}/></button>
          <div style={{ textAlign: 'center', minWidth: 120 }}>
            <div style={{ font: `900 116px/1 ${_Tf.fontApp}`, color: '#fff', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.05em' }}>{score}</div>
            <div style={{ font: `900 18px/1 ${_Tf.fontApp}`, color: relColor, letterSpacing: '0.16em', marginTop: 4 }}>{relLabel}</div>
          </div>
          <button onClick={() => setScore(score + 1)} style={hugeBtn}><_If name="plus" size={48} stroke={3}/></button>
        </div>

        <div style={{ padding: 14, borderRadius: 14, marginTop: 8, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ font: `400 11px/1 ${_Tf.fontApp}`, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>You · live $</div>
            <div style={{ font: `700 26px/1 ${_Tf.fontApp}`, color: '#5BE584', marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>+$12</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ font: `400 11px/1 ${_Tf.fontApp}`, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>Net thru 6</div>
            <div style={{ font: `700 26px/1 ${_Tf.fontApp}`, color: '#fff', marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>E</div>
          </div>
        </div>

        <button style={{
          width: '100%', marginTop: 10,
          background: '#5BE584', color: '#0E2E20', border: 'none',
          padding: '18px 0', borderRadius: 14,
          font: `800 16px/1 ${_Tf.fontApp}`, letterSpacing: '0.04em', cursor: 'pointer',
          boxShadow: '0 6px 18px rgba(91,229,132,0.32)',
        }}>SAVE · NEXT HOLE →</button>
      </div>
    </_PSf>
  );
}

// ─────────────────────────────────────────────────────────────────
// CREATE ROUND — C (templates-first) entry + A (wizard) when custom
// Top: 3 template tiles. Tapping the big one → wizard steps below.
// ─────────────────────────────────────────────────────────────────
function CreateFinal() {
  const [view, setView] = React.useState('templates'); // templates | wizard
  const [step, setStep] = React.useState(1);

  if (view === 'wizard') {
    return <CFWizard step={step} setStep={setStep} onClose={() => { setView('templates'); setStep(1); }}/>;
  }
  return <CFTemplates onCustom={() => setView('wizard')} onStart={() => setView('wizard')}/>;
}

function CFTemplates({ onCustom, onStart }) {
  return (
    <_PSf bg={_Tf.bg}>
      <div style={{ flexShrink: 0, padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <_If name="x" size={22} style={{ color: _Tf.ink }}/>
        <div style={{ flex: 1, font: `700 17px/1 ${_Tf.fontApp}`, color: _Tf.ink }}>Start a round</div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 20px 16px' }}>
        <div style={{ font: `700 22px/1.2 ${_Tf.fontApp}`, color: _Tf.ink, letterSpacing: '-0.01em', margin: '8px 0 4px' }}>
          Up and running before the first tee.
        </div>
        <div style={{ font: `400 13px/1.5 ${_Tf.fontApp}`, color: _Tf.inkSub, marginBottom: 18 }}>
          Pick a template, or customize step-by-step.
        </div>

        <CFTplCard big tag="Default" tagColor={_Tf.primary} title="Saturday Crew · standard" courseSub="MGC Blue · 4 players" games={['Nassau $5', 'Skins $1', 'Wolf $1']} onStart={onStart}/>
        <CFTplCard tag="Last round" tagColor={_Tf.gold} title="Same as April 26 at Doral" courseSub="Doral Blue · Mike, Sarah, Jay" games={['Nassau $5', 'Skins $1']} onStart={onStart}/>
        <CFTplCard tag="Quick" tagColor={_Tf.secondary} title="Solo practice round" courseSub="Pick course · No wagers" games={['Stroke play']} onStart={onStart}/>

        <div style={{ font: `600 11px/1 ${_Tf.fontApp}`, color: _Tf.inkSub, letterSpacing: '0.16em', textTransform: 'uppercase', margin: '20px 0 8px' }}>Or start fresh</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
          <button onClick={onCustom} style={cfSmallBtn}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: _Tf.mint, color: _Tf.primary, margin: '0 auto 10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <_If name="plusBig" size={20}/>
            </div>
            <div style={{ font: `700 13px/1.2 ${_Tf.fontApp}`, color: _Tf.ink }}>Custom round</div>
            <div style={{ font: `400 11px/1.3 ${_Tf.fontApp}`, color: _Tf.inkSub, marginTop: 3 }}>4-step setup</div>
          </button>
          <button style={cfSmallBtn}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: _Tf.mint, color: _Tf.primary, margin: '0 auto 10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <_If name="qr" size={20}/>
            </div>
            <div style={{ font: `700 13px/1.2 ${_Tf.fontApp}`, color: _Tf.ink }}>Join with code</div>
            <div style={{ font: `400 11px/1.3 ${_Tf.fontApp}`, color: _Tf.inkSub, marginTop: 3 }}>Friend invited you</div>
          </button>
        </div>
      </div>
    </_PSf>
  );
}
const cfSmallBtn = {
  background: _Tf.card, borderRadius: 14, padding: 16, textAlign: 'center',
  boxShadow: '0 1px 2px rgba(27,58,45,0.04)', border: 'none', cursor: 'pointer', width: '100%',
};
function CFTplCard({ big, tag, tagColor, title, courseSub, games, onStart }) {
  return (
    <div style={{
      background: _Tf.card, borderRadius: 18, padding: big ? '18px 18px 16px' : 14,
      marginBottom: 10,
      boxShadow: big ? '0 1px 2px rgba(27,58,45,0.05), 0 12px 28px rgba(27,58,45,0.07)' : '0 1px 2px rgba(27,58,45,0.04)',
      borderLeft: `4px solid ${tagColor}`,
    }}>
      <div style={{ font: `700 10px/1 ${_Tf.fontApp}`, color: tagColor, letterSpacing: '0.2em', textTransform: 'uppercase' }}>{tag}</div>
      <div style={{ font: `700 ${big ? 19 : 16}px/1.2 ${_Tf.fontApp}`, color: _Tf.ink, marginTop: 6 }}>{title}</div>
      <div style={{ font: `400 12px/1.3 ${_Tf.fontApp}`, color: _Tf.inkSub, marginTop: 4 }}>{courseSub}</div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 10 }}>
        {games.map(g => <_Cf key={g} tone="outline" size="sm">{g}</_Cf>)}
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: big ? 14 : 12 }}>
        <button onClick={onStart} style={{
          flex: big ? 1 : 'unset', padding: big ? '12px 0' : '8px 16px',
          background: _Tf.primary, color: '#fff', border: 'none', borderRadius: big ? 12 : 10,
          font: `700 ${big ? 14 : 13}px/1 ${_Tf.fontApp}`, cursor: 'pointer',
        }}>Start round →</button>
        {big && <button onClick={onStart} style={{
          padding: '12px 18px', background: _Tf.mint, color: _Tf.primary, border: 'none', borderRadius: 12,
          font: `700 13px/1 ${_Tf.fontApp}`, cursor: 'pointer',
        }}>Edit first</button>}
      </div>
    </div>
  );
}

function CFWizard({ step, setStep, onClose }) {
  const steps = ['Course', 'Players', 'Games', 'Review'];
  return (
    <_PSf bg={_Tf.bg}>
      <div style={{ flexShrink: 0, background: _Tf.primaryDeep, color: '#fff', padding: '14px 18px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#fff', cursor: 'pointer', padding: 0 }}>
            <_If name="chevL" size={22}/>
          </button>
          <div style={{ flex: 1, font: `700 17px/1 ${_Tf.fontApp}` }}>Custom round</div>
          <button onClick={onClose} style={{ background: 'transparent', color: 'rgba(255,255,255,0.7)', border: 'none', font: `600 12px/1 ${_Tf.fontApp}`, cursor: 'pointer' }}>Use a template</button>
        </div>
        <div style={{ display: 'flex', gap: 4, marginTop: 16 }}>
          {steps.map((_, i) => (
            <div key={i} style={{ flex: 1, height: 4, borderRadius: 4, background: i < step ? '#5BE584' : 'rgba(255,255,255,0.18)' }}/>
          ))}
        </div>
        <div style={{ font: `600 11px/1 ${_Tf.fontApp}`, color: '#5BE584', letterSpacing: '0.2em', textTransform: 'uppercase', marginTop: 10 }}>
          Step {step} of 4 · {steps[step - 1]}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '18px 20px 16px' }}>
        {step === 1 && <CFCourse/>}
        {step === 2 && <CFPlayers/>}
        {step === 3 && <CFGames/>}
        {step === 4 && <CFReview/>}
      </div>

      <div style={{ flexShrink: 0, padding: '8px 20px 18px', display: 'flex', gap: 8 }}>
        {step > 1 && <button onClick={() => setStep(step - 1)} style={{ flex: 1, background: _Tf.card, color: _Tf.ink, border: 'none', padding: '14px 0', borderRadius: 12, font: `700 14px/1 ${_Tf.fontApp}`, cursor: 'pointer', boxShadow: '0 1px 3px rgba(27,58,45,0.06)' }}>Back</button>}
        <button onClick={() => step < 4 ? setStep(step + 1) : onClose()} style={{
          flex: 2, background: _Tf.primary, color: '#fff', border: 'none',
          padding: '14px 0', borderRadius: 12, font: `700 14px/1 ${_Tf.fontApp}`, cursor: 'pointer',
          boxShadow: `0 4px 14px ${_Tf.primary}40`,
        }}>{step < 4 ? 'Continue →' : 'Create round'}</button>
      </div>
    </_PSf>
  );
}
function CFCourse() {
  return (
    <div>
      <h3 style={{ font: `700 22px/1.15 ${_Tf.fontApp}`, margin: 0, marginBottom: 4, color: _Tf.ink, letterSpacing: '-0.01em' }}>Pick the course</h3>
      <p style={{ font: `400 13px/1.4 ${_Tf.fontApp}`, color: _Tf.inkSub, margin: 0, marginBottom: 16 }}>Recent first. Search for any course in the U.S.</p>
      <CFSearchField placeholder="Search 18,000+ courses"/>
      <div style={{ marginTop: 14 }}>
        {[
          { name: 'Miami Golf Center', club: 'Miami GC · Blue · 72.4/132', sel: true },
          { name: 'Doral Blue Monster', club: 'Trump Doral · Blue · 76.2/144' },
          { name: 'Crandon Park',       club: 'Public · Black · 73.1/137' },
          { name: 'Biltmore Hotel GC',  club: 'Coral Gables · Blue · 70.9/124' },
        ].map(c => (
          <div key={c.name} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: 14,
            background: c.sel ? _Tf.mint : _Tf.card,
            border: c.sel ? `2px solid ${_Tf.primary}` : `1px solid transparent`,
            borderRadius: 14, marginBottom: 8, boxShadow: c.sel ? 'none' : '0 1px 2px rgba(27,58,45,0.04)',
          }}>
            <div style={{ width: 42, height: 42, borderRadius: 10, background: '#fff', color: _Tf.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <_If name="course" size={22}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ font: `700 14px/1.2 ${_Tf.fontApp}`, color: _Tf.ink }}>{c.name}</div>
              <div style={{ font: `400 12px/1.3 ${_Tf.fontApp}`, color: _Tf.inkSub, marginTop: 2 }}>{c.club}</div>
            </div>
            {c.sel ? <_If name="check" size={22} style={{ color: _Tf.primary }}/> : <_If name="chevR" size={20} style={{ color: _Tf.inkFaint }}/>}
          </div>
        ))}
      </div>
    </div>
  );
}
function CFSearchField({ placeholder }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderRadius: 12, background: _Tf.card, boxShadow: '0 1px 2px rgba(27,58,45,0.05)' }}>
      <_If name="target" size={18} style={{ color: _Tf.inkFaint }}/>
      <input placeholder={placeholder} style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', font: `400 14px/1 ${_Tf.fontApp}`, color: _Tf.ink }}/>
    </div>
  );
}
function CFPlayers() {
  const [picked, setPicked] = React.useState({ me: true, sara: true, jay: true });
  return (
    <div>
      <h3 style={{ font: `700 22px/1.15 ${_Tf.fontApp}`, margin: 0, marginBottom: 4, color: _Tf.ink, letterSpacing: '-0.01em' }}>Who's playing?</h3>
      <p style={{ font: `400 13px/1.4 ${_Tf.fontApp}`, color: _Tf.inkSub, margin: 0, marginBottom: 16 }}>{Object.values(picked).filter(Boolean).length} of up to 16 added</p>
      <CFSearchField placeholder="Search players or paste emails"/>
      <div style={{ marginTop: 14 }}>
        <div style={{ font: `600 11px/1 ${_Tf.fontApp}`, color: _Tf.inkSub, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 8 }}>From Saturday Crew</div>
        {_Df.players.map(p => {
          const sel = picked[p.id];
          return (
            <div key={p.id} onClick={() => setPicked({ ...picked, [p.id]: !sel })} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: 12,
              background: sel ? _Tf.mint : _Tf.card, borderRadius: 12, marginBottom: 6,
              border: sel ? `1px solid ${_Tf.primary}40` : '1px solid transparent', cursor: 'pointer',
            }}>
              <_Avf player={p} size={38}/>
              <div style={{ flex: 1 }}>
                <div style={{ font: `700 14px/1.2 ${_Tf.fontApp}`, color: _Tf.ink }}>{p.name}{p.isMe && ' (you)'}</div>
                <div style={{ font: `400 12px/1 ${_Tf.fontApp}`, color: _Tf.inkSub, marginTop: 3 }}>HCP {p.hcp} · Blue tees</div>
              </div>
              <div style={{
                width: 26, height: 26, borderRadius: 13,
                background: sel ? _Tf.primary : 'transparent',
                border: `2px solid ${sel ? _Tf.primary : _Tf.divider}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
              }}>{sel && <_If name="check" size={16} stroke={3}/>}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
function CFGames() {
  const [enabled, setEnabled] = React.useState({ nassau: true, skins: true, wolf: false });
  const Row = ({ k, name, desc, stake }) => (
    <div onClick={() => setEnabled({ ...enabled, [k]: !enabled[k] })} style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: 14,
      background: enabled[k] ? _Tf.mint : _Tf.card,
      border: enabled[k] ? `1.5px solid ${_Tf.primary}` : '1.5px solid transparent',
      borderRadius: 14, marginBottom: 8, cursor: 'pointer',
      boxShadow: '0 1px 2px rgba(27,58,45,0.04)',
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ font: `700 15px/1.2 ${_Tf.fontApp}`, color: _Tf.ink }}>{name}</div>
        <div style={{ font: `400 12px/1.3 ${_Tf.fontApp}`, color: _Tf.inkSub, marginTop: 3 }}>{desc}</div>
        {enabled[k] && <div style={{ font: `700 12px/1 ${_Tf.fontMono}`, color: _Tf.primary, marginTop: 6 }}>{stake}</div>}
      </div>
      <div style={{
        width: 44, height: 26, borderRadius: 13,
        background: enabled[k] ? _Tf.primary : _Tf.divider, position: 'relative',
      }}>
        <span style={{ position: 'absolute', top: 2, left: enabled[k] ? 20 : 2, width: 22, height: 22, borderRadius: 11, background: '#fff' }}/>
      </div>
    </div>
  );
  return (
    <div>
      <h3 style={{ font: `700 22px/1.15 ${_Tf.fontApp}`, margin: 0, marginBottom: 4, color: _Tf.ink, letterSpacing: '-0.01em' }}>Pick your games</h3>
      <p style={{ font: `400 13px/1.4 ${_Tf.fontApp}`, color: _Tf.inkSub, margin: 0, marginBottom: 16 }}>Stack as many as you like. Each settles independently.</p>
      <div style={{ font: `600 11px/1 ${_Tf.fontApp}`, color: _Tf.inkSub, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 8 }}>Most popular</div>
      <Row k="nassau" name="Nassau" desc="F9 / B9 / Overall + presses" stake="$5 / $5 / $5"/>
      <Row k="skins" name="Skins" desc="Low score wins. Ties carry." stake="$1 / hole"/>
      <Row k="wolf" name="Wolf" desc="Rotating partner game" stake="$1 / pt"/>
      <button style={{
        marginTop: 8, width: '100%', background: 'transparent',
        border: `1.5px dashed ${_Tf.divider}`, color: _Tf.primary,
        padding: '12px 0', borderRadius: 12, font: `700 13px/1 ${_Tf.fontApp}`, cursor: 'pointer',
      }}>+ Add another game (10 more)</button>
    </div>
  );
}
function CFReview() {
  return (
    <div>
      <h3 style={{ font: `700 22px/1.15 ${_Tf.fontApp}`, margin: 0, marginBottom: 4, color: _Tf.ink, letterSpacing: '-0.01em' }}>Ready to send</h3>
      <p style={{ font: `400 13px/1.4 ${_Tf.fontApp}`, color: _Tf.inkSub, margin: 0, marginBottom: 16 }}>Each invited player will reserve $15 from their wallet.</p>
      <div style={{ background: _Tf.card, borderRadius: 14, padding: 16, marginBottom: 10, boxShadow: '0 1px 2px rgba(27,58,45,0.04)' }}>
        <CFReviewRow icon="course" label="Course" value="Miami Golf Center · Blue tees"/>
        <CFReviewRow icon="users"  label="Players" value="Mike, Sarah, Jay (3 of 4 confirmed)"/>
        <CFReviewRow icon="flag"   label="Games" value="Nassau $5 · Skins $1"/>
        <CFReviewRow icon="cal"    label="When"  value="Today, 8:12am" last/>
      </div>
      <div style={{ background: _Tf.mint, borderRadius: 14, padding: 14, display: 'flex', gap: 12 }}>
        <_If name="wallet" size={20} style={{ color: _Tf.primary, marginTop: 2 }}/>
        <div>
          <div style={{ font: `700 13px/1.3 ${_Tf.fontApp}`, color: _Tf.primary }}>Reserved from your wallet</div>
          <div style={{ font: `700 22px/1 ${_Tf.fontMono}`, color: _Tf.primary, marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>$15.00</div>
          <div style={{ font: `400 12px/1.4 ${_Tf.fontApp}`, color: _Tf.inkSub, marginTop: 6 }}>Returned automatically if the round is cancelled.</div>
        </div>
      </div>
    </div>
  );
}
function CFReviewRow({ icon, label, value, last }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '10px 0', borderBottom: last ? 'none' : `1px solid ${_Tf.divider}` }}>
      <_If name={icon} size={18} style={{ color: _Tf.inkSub, marginTop: 2 }}/>
      <div style={{ flex: 1 }}>
        <div style={{ font: `400 11px/1 ${_Tf.fontApp}`, color: _Tf.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{label}</div>
        <div style={{ font: `600 14px/1.3 ${_Tf.fontApp}`, color: _Tf.ink, marginTop: 4 }}>{value}</div>
      </div>
      <_If name="chevR" size={18} style={{ color: _Tf.inkFaint, marginTop: 4 }}/>
    </div>
  );
}

Object.assign(window, { HomeFinal, RoundFinal, CreateFinal });