// groups.jsx — 4 variations of Groups (list + detail + chat)

const _Tg = window.T_AU, _Dg = window.D_AU, _Ig = window.Icon_AU, _Avg = window.Avatar_AU,
      _Mg = window.Money_AU, _Cg = window.Chip_AU, _PSg = window.PhoneScreen_AU;

const GROUP = _Dg.group;

// ─────────────────────────────────────────────────────────────────
// V1 — ACTIVITY-FIRST DETAIL
// Default tab is Feed. Roster compact at top. Tabs: Feed · Events · Chat · Members.
// Classic refined.
// ─────────────────────────────────────────────────────────────────
function GroupsV1() {
  const [tab, setTab] = React.useState('feed');
  const tabs = [['feed','Activity'], ['events','Events'], ['chat','Chat'], ['members','Members']];

  return (
    <_PSg bg={_Tg.bg}>
      {/* Cover header */}
      <div style={{
        flexShrink: 0,
        background: `linear-gradient(135deg, ${_Tg.primaryDeep} 0%, ${_Tg.primary} 70%, #2D6A4F 100%)`,
        padding: '12px 18px 18px', color: '#fff', position: 'relative', overflow: 'hidden',
      }}>
        <svg viewBox="0 0 320 60" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.2 }}>
          <path d="M0,40 Q80,10 160,25 T320,15" stroke="#fff" strokeWidth="1" fill="none"/>
          <path d="M0,55 Q100,30 200,40 T320,30" stroke="#fff" strokeWidth="0.8" fill="none"/>
        </svg>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10 }}>
          <_Ig name="chevL" size={22}/>
          <div style={{ flex: 1 }}/>
          <_Ig name="share" size={20}/>
          <_Ig name="menu" size={22}/>
        </div>
        <div style={{ position: 'relative', marginTop: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 56, height: 56, borderRadius: 16, background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: `800 22px/1 ${_Tg.fontApp}` }}>SC</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ font: `700 21px/1.1 ${_Tg.fontApp}`, letterSpacing: '-0.01em' }}>{GROUP.name}</div>
              <div style={{ display: 'flex', gap: 10, marginTop: 6, alignItems: 'center', font: `400 12px/1 ${_Tg.fontApp}`, opacity: 0.78 }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><_Ig name="users" size={13}/> {GROUP.members} members</span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><_Ig name="trophy" size={13}/> 2 active events</span>
              </div>
            </div>
          </div>
          {/* Member roster strip */}
          <div style={{ display: 'flex', alignItems: 'center', marginTop: 14 }}>
            {_Dg.players.map((p, i) => (
              <div key={p.id} style={{ marginLeft: i ? -10 : 0, border: `2px solid ${_Tg.primaryDeep}`, borderRadius: '50%' }}>
                <_Avg player={p} size={30}/>
              </div>
            ))}
            <div style={{
              marginLeft: -10, width: 30, height: 30, borderRadius: 15,
              background: 'rgba(255,255,255,0.18)', border: `2px solid ${_Tg.primaryDeep}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              font: `700 11px/1 ${_Tg.fontApp}`, color: '#fff',
            }}>+4</div>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
              <_Cg tone="dark" size="sm">⚡ {GROUP.inviteCode}</_Cg>
              <button style={{ background: '#fff', color: _Tg.primary, border: 'none', padding: '6px 12px', borderRadius: 100, font: `700 12px/1 ${_Tg.fontApp}`, cursor: 'pointer' }}>+ New round</button>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ flexShrink: 0, display: 'flex', borderBottom: `1px solid ${_Tg.divider}`, background: _Tg.bg, padding: '0 16px' }}>
        {tabs.map(([k, l]) => (
          <button key={k} onClick={() => setTab(k)} style={{
            background: 'transparent', border: 'none', padding: '14px 14px',
            font: `700 13px/1 ${_Tg.fontApp}`, cursor: 'pointer',
            color: tab === k ? _Tg.primary : _Tg.inkSub,
            borderBottom: tab === k ? `2.5px solid ${_Tg.primary}` : '2.5px solid transparent',
            marginBottom: -1,
          }}>{l}</button>
        ))}
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 18px 16px' }}>
        {tab === 'feed' && <FeedTab/>}
        {tab === 'events' && <EventsTab/>}
        {tab === 'chat' && <ChatTab/>}
        {tab === 'members' && <MembersTab/>}
      </div>
    </_PSg>
  );
}

function FeedTab() {
  return (
    <div>
      {GROUP.activity.map(a => (
        <ActivityRow key={a.id} a={a}/>
      ))}
      <div style={{ font: `400 11px/1 ${_Tg.fontApp}`, color: _Tg.inkFaint, textAlign: 'center', padding: '14px 0' }}>
        Member since Apr 2024 · 31 rounds together
      </div>
    </div>
  );
}

function ActivityRow({ a }) {
  const icons = { round: 'flag', tournament: 'trophy', member: 'users', wager: 'wallet' };
  const colors = { round: _Tg.win, tournament: _Tg.gold, member: _Tg.primary, wager: _Tg.accent };
  return (
    <div style={{
      background: _Tg.card, borderRadius: 14, padding: 14,
      display: 'flex', gap: 12, marginBottom: 8,
      boxShadow: '0 1px 2px rgba(27,58,45,0.04)',
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: 10,
        background: `${colors[a.kind]}1A`, color: colors[a.kind],
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <_Ig name={icons[a.kind]} size={20}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: `600 14px/1.3 ${_Tg.fontApp}`, color: _Tg.ink }}>{a.text}</div>
        {a.detail && <div style={{ font: `400 12px/1.3 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 4 }}>{a.detail}</div>}
      </div>
      <div style={{ textAlign: 'right' }}>
        {a.money != null && <_Mg cents={a.money} size={13}/>}
        <div style={{ font: `400 11px/1 ${_Tg.fontApp}`, color: _Tg.inkFaint, marginTop: 4 }}>{a.when}</div>
      </div>
    </div>
  );
}
function EventsTab() {
  return (
    <div>
      <div style={{ font: `600 11px/1 ${_Tg.fontApp}`, color: _Tg.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase', margin: '0 0 10px 4px' }}>Upcoming</div>
      {GROUP.events.map(e => (
        <div key={e.id} style={{
          background: _Tg.card, borderRadius: 14, padding: 14,
          display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8,
          boxShadow: '0 1px 2px rgba(27,58,45,0.04)',
          borderLeft: e.tournament ? `4px solid ${_Tg.gold}` : `4px solid ${_Tg.primary}`,
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: 12,
            background: e.tournament ? '#FBF4DA' : _Tg.mint, color: e.tournament ? _Tg.gold : _Tg.primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <_Ig name={e.tournament ? 'trophy' : 'cal'} size={22}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <span style={{ font: `700 14px/1.1 ${_Tg.fontApp}`, color: _Tg.ink }}>{e.title}</span>
              {e.tournament && <_Cg tone="gold" size="sm">Tournament</_Cg>}
            </div>
            <div style={{ font: `400 12px/1.3 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 4 }}>{e.course} · {e.date}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 8 }}>
              <_Ig name="users" size={13} style={{ color: _Tg.inkSub }}/>
              <span style={{ font: `600 11px/1 ${_Tg.fontApp}`, color: _Tg.inkSub }}>{e.attending} / {e.of} attending</span>
            </div>
          </div>
        </div>
      ))}
      <button style={{
        marginTop: 10, width: '100%',
        background: 'transparent', border: `1.5px dashed ${_Tg.divider}`,
        color: _Tg.primary, padding: '14px 0', borderRadius: 14,
        font: `700 13px/1 ${_Tg.fontApp}`, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      }}>+ Schedule an event</button>
    </div>
  );
}

function ChatTab() {
  return (
    <div>
      <div style={{ font: `400 11px/1 ${_Tg.fontApp}`, color: _Tg.inkFaint, textAlign: 'center', padding: '4px 0 14px' }}>Today</div>
      <ChatBubble who={_Dg.players[2]} t="8:14" txt={GROUP.chat[0].text}/>
      <ChatBubble who={_Dg.players[1]} t="8:18" txt={GROUP.chat[1].text}/>
      <ChatBubble who={_Dg.players[0]} t="8:22" txt={GROUP.chat[2].text} me/>
      <ChatBubble who={_Dg.players[3]} t="8:30" txt={GROUP.chat[3].text}/>
      <ChatComposer/>
    </div>
  );
}

function ChatBubble({ who, t, txt, me }) {
  return (
    <div style={{ display: 'flex', justifyContent: me ? 'flex-end' : 'flex-start', marginBottom: 8 }}>
      {!me && <_Avg player={who} size={28} style={{ marginRight: 8 }}/>}
      <div style={{ maxWidth: '70%' }}>
        {!me && <div style={{ font: `600 11px/1 ${_Tg.fontApp}`, color: _Tg.inkSub, marginBottom: 4, marginLeft: 4 }}>{who.first}</div>}
        <div style={{
          background: me ? _Tg.primary : _Tg.card, color: me ? '#fff' : _Tg.ink,
          padding: '9px 13px', borderRadius: 14,
          borderBottomRightRadius: me ? 4 : 14,
          borderBottomLeftRadius: me ? 14 : 4,
          font: `${me ? 600 : 500} 13px/1.4 ${_Tg.fontApp}`,
          boxShadow: me ? 'none' : '0 1px 1px rgba(27,58,45,0.04)',
        }}>{txt}</div>
        <div style={{ font: `400 10px/1 ${_Tg.fontApp}`, color: _Tg.inkFaint, marginTop: 4, textAlign: me ? 'right' : 'left' }}>{t}</div>
      </div>
    </div>
  );
}

function ChatComposer() {
  return (
    <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8, background: _Tg.card, borderRadius: 100, padding: '6px 6px 6px 14px', boxShadow: '0 1px 2px rgba(27,58,45,0.06)' }}>
      <input placeholder="Type a message…" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', font: `400 14px/1.2 ${_Tg.fontApp}`, color: _Tg.ink }}/>
      <button style={{ background: _Tg.primary, color: '#fff', border: 'none', width: 36, height: 36, borderRadius: 18, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <_Ig name="arrowR" size={16} stroke={2.5}/>
      </button>
    </div>
  );
}

function MembersTab() {
  const all = [..._Dg.players, ..._Dg.tournament.leaderboard.slice(4)];
  return (
    <div>
      {all.map(p => {
        const ip = p.first ? p : { id: p.id, first: (p.name || 'Player').split(' ')[0], name: p.name, initials: p.initials, color: p.color, hcp: p.hcp };
        return (
          <div key={ip.id || ip.name} style={{
            background: _Tg.card, borderRadius: 14, padding: 12,
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6,
            boxShadow: '0 1px 2px rgba(27,58,45,0.04)',
          }}>
            <_Avg player={ip} size={40}/>
            <div style={{ flex: 1 }}>
              <div style={{ font: `700 14px/1.2 ${_Tg.fontApp}`, color: _Tg.ink }}>{ip.first}{ip.isMe && ' (you)'}</div>
              <div style={{ font: `400 12px/1 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 3 }}>HCP {ip.hcp ?? '—'} · 12 rounds</div>
            </div>
            <_Cg tone="outline" size="sm">View</_Cg>
          </div>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// V2 — CHAT-FIRST
// The chat IS the screen. Slim group header pinned top.
// Side game results & tournament updates appear inline in chat
// as system "cards" — closer to iMessage rich previews.
// ─────────────────────────────────────────────────────────────────
function GroupsV2() {
  return (
    <_PSg bg={_Tg.bg}>
      <div style={{
        flexShrink: 0, padding: '10px 18px 12px',
        background: _Tg.card, borderBottom: `1px solid ${_Tg.divider}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <_Ig name="chevL" size={22} style={{ color: _Tg.ink }}/>
        <div style={{ width: 38, height: 38, borderRadius: 12, background: _Tg.primaryDeep, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: `700 14px/1 ${_Tg.fontApp}` }}>SC</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ font: `700 15px/1.1 ${_Tg.fontApp}`, color: _Tg.ink }}>{GROUP.name}</div>
          <div style={{ font: `400 11px/1 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 3 }}>{GROUP.members} members · Jay, Sarah, +6</div>
        </div>
        <_Ig name="cal" size={22} style={{ color: _Tg.ink }}/>
        <_Ig name="menu" size={22} style={{ color: _Tg.ink }}/>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px' }}>
        <div style={{ font: `400 11px/1 ${_Tg.fontApp}`, color: _Tg.inkFaint, textAlign: 'center', padding: '4px 0 12px' }}>May 12 · Mon</div>

        {/* Inline event card */}
        <div style={{
          background: _Tg.card, borderRadius: 14, padding: 14, marginBottom: 12,
          display: 'flex', alignItems: 'center', gap: 12,
          boxShadow: '0 1px 2px rgba(27,58,45,0.04)',
        }}>
          <div style={{ width: 40, height: 40, borderRadius: 10, background: _Tg.mint, color: _Tg.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <_Ig name="cal" size={20}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ font: `400 11px/1 ${_Tg.fontApp}`, color: _Tg.inkSub, letterSpacing: '0.12em', textTransform: 'uppercase' }}>New event</div>
            <div style={{ font: `700 13px/1.2 ${_Tg.fontApp}`, color: _Tg.ink, marginTop: 4 }}>Saturday Round · Crandon Park</div>
            <div style={{ font: `400 12px/1 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 4 }}>Sat 7:30am · 4 / 8 in</div>
          </div>
          <button style={{ background: _Tg.primary, color: '#fff', border: 'none', padding: '6px 12px', borderRadius: 8, font: `700 12px/1 ${_Tg.fontApp}`, cursor: 'pointer' }}>RSVP</button>
        </div>

        <ChatBubble who={_Dg.players[2]} t="8:14" txt={GROUP.chat[0].text}/>
        <ChatBubble who={_Dg.players[1]} t="8:18" txt={GROUP.chat[1].text}/>

        {/* Round result card */}
        <div style={{ display: 'flex', justifyContent: 'center', margin: '12px 0' }}>
          <div style={{
            background: _Tg.card, borderRadius: 16, padding: 14, maxWidth: '88%',
            border: `1px solid ${_Tg.mint}`, boxShadow: '0 1px 2px rgba(27,58,45,0.05)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, font: `700 10px/1 ${_Tg.fontApp}`, color: _Tg.win, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              <_Ig name="flag" size={12}/> Round result · Apr 28
            </div>
            <div style={{ font: `700 14px/1.2 ${_Tg.fontApp}`, color: _Tg.ink, marginTop: 8 }}>Killian Greens · Nassau / Skins</div>
            <div style={{ display: 'flex', marginTop: 10, gap: 8 }}>
              {_Dg.players.slice(0, 3).map(p => (
                <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px', background: _Tg.bg, borderRadius: 100 }}>
                  <_Avg player={p} size={20}/>
                  <span style={{ font: `700 11px/1 ${_Tg.fontMono}`, color: p.id === 'jay' ? _Tg.win : _Tg.inkSub, fontVariantNumeric: 'tabular-nums' }}>{p.id === 'jay' ? '+$18' : p.id === 'me' ? '−$6' : '−$12'}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <ChatBubble who={_Dg.players[0]} t="8:22" txt={GROUP.chat[2].text} me/>
        <ChatBubble who={_Dg.players[3]} t="8:30" txt={GROUP.chat[3].text}/>
        <ChatBubble who={_Dg.players[0]} t="8:31" txt="Locked. Putting the field on notice 🦾" me/>
      </div>

      <div style={{ flexShrink: 0, padding: '8px 16px 16px', borderTop: `1px solid ${_Tg.divider}`, background: _Tg.bg }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: _Tg.card, borderRadius: 100, padding: '4px 6px 4px 14px', boxShadow: '0 1px 2px rgba(27,58,45,0.05)' }}>
          <_Ig name="plus" size={20} style={{ color: _Tg.primary }}/>
          <input placeholder="Message Saturday Crew…" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', font: `400 14px/1.2 ${_Tg.fontApp}`, color: _Tg.ink, padding: '8px 0' }}/>
          <button style={{ background: _Tg.primary, color: '#fff', border: 'none', width: 36, height: 36, borderRadius: 18, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <_Ig name="arrowR" size={16} stroke={2.5}/>
          </button>
        </div>
      </div>
    </_PSg>
  );
}

// ─────────────────────────────────────────────────────────────────
// V3 — GROUPS LIST + ROSTER GRID
// Shows the Groups list (multi-group user), then a roster + event
// grid for the active group. More dashboard-feeling.
// ─────────────────────────────────────────────────────────────────
function GroupsV3() {
  return (
    <_PSg bg={_Tg.bg}>
      <div style={{ flexShrink: 0, padding: '14px 20px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ font: `700 22px/1 ${_Tg.fontApp}`, color: _Tg.ink, letterSpacing: '-0.01em' }}>Crews</div>
        <button style={{
          background: _Tg.primary, color: '#fff', border: 'none', padding: '8px 14px',
          borderRadius: 10, font: `700 13px/1 ${_Tg.fontApp}`, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 4,
        }}><_Ig name="plus" size={14}/> Create</button>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 20px 16px' }}>
        {/* Featured: Saturday Crew */}
        <div style={{
          background: _Tg.card, borderRadius: 18, overflow: 'hidden',
          boxShadow: '0 1px 2px rgba(27,58,45,0.04), 0 12px 28px rgba(27,58,45,0.06)',
        }}>
          {/* mini banner */}
          <div style={{
            height: 56, background: `linear-gradient(135deg, ${_Tg.primaryDeep} 0%, ${_Tg.primary} 100%)`,
            position: 'relative', overflow: 'hidden',
          }}>
            <svg viewBox="0 0 320 60" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', opacity: 0.25 }}>
              <path d="M0,40 Q80,12 160,28 T320,18" stroke="#fff" strokeWidth="1" fill="none"/>
            </svg>
          </div>
          <div style={{ padding: 16, marginTop: -28 }}>
            <div style={{ width: 50, height: 50, borderRadius: 14, background: '#fff', color: _Tg.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', font: `800 18px/1 ${_Tg.fontApp}`, boxShadow: '0 4px 12px rgba(27,58,45,0.16)' }}>SC</div>
            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ font: `700 18px/1.1 ${_Tg.fontApp}`, color: _Tg.ink }}>{GROUP.name}</div>
                <div style={{ font: `400 12px/1.3 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 4 }}>{GROUP.description}</div>
              </div>
            </div>

            {/* Members + events grid */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14 }}>
              <MiniTile title="Members" value="8">
                <div style={{ display: 'flex', marginTop: 8 }}>
                  {_Dg.players.slice(0, 4).map((p, i) => (
                    <div key={p.id} style={{ marginLeft: i ? -6 : 0, border: `2px solid ${_Tg.card}`, borderRadius: '50%' }}>
                      <_Avg player={p} size={22}/>
                    </div>
                  ))}
                </div>
              </MiniTile>
              <MiniTile title="Next event" value="Sat 7:30">
                <div style={{ font: `400 11px/1.3 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 8 }}>Crandon Park · 4 in</div>
              </MiniTile>
              <MiniTile title="Active series" value="Summer'26" tone="gold">
                <div style={{ font: `400 11px/1.3 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 8 }}>R4 of 4 · Jay leads</div>
              </MiniTile>
              <MiniTile title="Net winnings" value="+$42" tone="win">
                <div style={{ font: `400 11px/1.3 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 8 }}>11 rounds this year</div>
              </MiniTile>
            </div>

            <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
              <button style={{ flex: 1, background: _Tg.primary, color: '#fff', border: 'none', padding: '12px 0', borderRadius: 10, font: `700 13px/1 ${_Tg.fontApp}`, cursor: 'pointer' }}>Open</button>
              <button style={{ flex: 1, background: _Tg.mint, color: _Tg.primary, border: 'none', padding: '12px 0', borderRadius: 10, font: `700 13px/1 ${_Tg.fontApp}`, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
                <_Ig name="chat" size={14}/> Chat
              </button>
            </div>
          </div>
        </div>

        {/* Other groups list */}
        <div style={{ font: `600 11px/1 ${_Tg.fontApp}`, color: _Tg.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase', margin: '20px 0 10px' }}>Your other crews</div>
        <GroupRow name="The 19th Hole" sub="6 members · Tues nights" badge="2"/>
        <GroupRow name="Doral Buddies" sub="11 members · monthly Stableford"/>

        {/* Suggested */}
        <div style={{ font: `600 11px/1 ${_Tg.fontApp}`, color: _Tg.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase', margin: '20px 0 10px' }}>Suggested</div>
        <GroupRow name="South FL Skins Game" sub="Public · 142 members" suggested/>
        <GroupRow name="Wed Twilight @ Killian" sub="Public · 24 members · Skins" suggested/>
      </div>
    </_PSg>
  );
}

function MiniTile({ title, value, children, tone }) {
  const c = tone === 'win' ? _Tg.win : tone === 'gold' ? _Tg.gold : _Tg.ink;
  return (
    <div style={{ background: _Tg.bg, borderRadius: 12, padding: 12 }}>
      <div style={{ font: `600 10px/1 ${_Tg.fontApp}`, color: _Tg.inkSub, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{title}</div>
      <div style={{ font: `700 19px/1 ${_Tg.fontApp}`, color: c, marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
      {children}
    </div>
  );
}

function GroupRow({ name, sub, badge, suggested }) {
  return (
    <div style={{
      background: _Tg.card, borderRadius: 14, padding: 14,
      display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8,
      boxShadow: '0 1px 2px rgba(27,58,45,0.04)',
    }}>
      <div style={{
        width: 42, height: 42, borderRadius: 12,
        background: suggested ? _Tg.bg : _Tg.primary, color: suggested ? _Tg.primary : '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        font: `700 14px/1 ${_Tg.fontApp}`,
      }}>{name.split(' ').slice(0, 2).map(w => w[0]).join('')}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: `700 14px/1.2 ${_Tg.fontApp}`, color: _Tg.ink }}>{name}</div>
        <div style={{ font: `400 12px/1.3 ${_Tg.fontApp}`, color: _Tg.inkSub, marginTop: 3 }}>{sub}</div>
      </div>
      {badge && <_Cg tone="accent" size="sm">{badge}</_Cg>}
      {suggested ? (
        <button style={{ background: _Tg.primary, color: '#fff', border: 'none', padding: '6px 12px', borderRadius: 8, font: `700 11px/1 ${_Tg.fontApp}`, cursor: 'pointer' }}>Join</button>
      ) : (
        <_Ig name="chevR" size={20} style={{ color: _Tg.inkFaint }}/>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// V4 — EDITORIAL  (push)
// Magazine treatment of the group: Playfair masthead, gold accents,
// chat as a quiet sidebar, season story dominant.
// ─────────────────────────────────────────────────────────────────
function GroupsV4() {
  return (
    <_PSg bg={_Tg.webBg} statusDark>
      <div style={{ flex: 1, overflowY: 'auto', color: _Tg.webText, position: 'relative' }}>
        <div style={{ position: 'absolute', top: -60, right: -60, width: 280, height: 280, borderRadius: '50%', background: 'radial-gradient(circle, rgba(201,168,76,0.14), transparent 65%)', pointerEvents: 'none' }}/>

        <div style={{ position: 'relative', padding: '14px 22px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <_Ig name="chevL" size={22}/>
          <div style={{ font: `600 10px/1 ${_Tg.fontBody}`, letterSpacing: '0.36em', color: _Tg.webGold, textTransform: 'uppercase' }}>Crew · est. 2024</div>
          <_Ig name="menu" size={22}/>
        </div>

        <div style={{ padding: '14px 26px 22px' }}>
          <h1 style={{ font: `700 44px/0.95 ${_Tg.fontDisplay}`, margin: 0, letterSpacing: '-0.02em' }}>
            Saturday<br/><em style={{ color: _Tg.webGold }}>Crew.</em>
          </h1>
          <p style={{ font: `300 14px/1.5 ${_Tg.fontBody}`, color: 'rgba(240,235,224,0.65)', marginTop: 14 }}>
            Eight regulars. Weekly money game across South Florida courses. No mercy.
          </p>

          <div style={{ display: 'flex', alignItems: 'center', marginTop: 18 }}>
            {_Dg.players.map((p, i) => (
              <div key={p.id} style={{ marginLeft: i ? -10 : 0, border: `2px solid ${_Tg.webBg}`, borderRadius: '50%' }}>
                <_Avg player={p} size={32}/>
              </div>
            ))}
            <div style={{
              marginLeft: -10, width: 32, height: 32, borderRadius: 16,
              background: 'rgba(201,168,76,0.16)', border: `2px solid ${_Tg.webBg}`, color: _Tg.webGold,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              font: `700 11px/1 ${_Tg.fontBody}`,
            }}>+4</div>
            <button style={{
              marginLeft: 'auto', background: _Tg.webGold, color: _Tg.webBg,
              border: 'none', padding: '8px 14px', borderRadius: 100,
              font: `600 12px/1 ${_Tg.fontBody}`, cursor: 'pointer',
            }}>+ New round</button>
          </div>
        </div>

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

        {/* The season story */}
        <div style={{ padding: '20px 22px 16px' }}>
          <div style={{ font: `600 10px/1 ${_Tg.fontBody}`, letterSpacing: '0.32em', color: _Tg.webGold, textTransform: 'uppercase', marginBottom: 10 }}>The season</div>
          <h2 style={{ font: `700 22px/1.1 ${_Tg.fontDisplay}`, margin: 0, letterSpacing: '-0.01em' }}>
            Jay's hold on Summer Series — and how Mike could still take it.
          </h2>
          <p style={{ font: `300 13px/1.5 ${_Tg.fontBody}`, color: 'rgba(240,235,224,0.6)', marginTop: 10 }}>
            Three rounds in, Jay's seven points clear. R4 at Biltmore on the 24th — if Mike posts under 75 net, the math works.
          </p>
          <button style={{
            marginTop: 12, padding: '10px 16px', background: 'transparent',
            color: _Tg.webGold, border: '1px solid rgba(201,168,76,0.4)', borderRadius: 100,
            font: `600 12px/1 ${_Tg.fontBody}`, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>Open standings <_Ig name="arrowR" size={12}/></button>
        </div>

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

        {/* Latest from the group chat */}
        <div style={{ padding: '20px 22px 12px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
            <div style={{ font: `600 10px/1 ${_Tg.fontBody}`, letterSpacing: '0.32em', color: _Tg.webGold, textTransform: 'uppercase' }}>From the chat</div>
            <span style={{ font: `400 11px/1 ${_Tg.fontBody}`, color: 'rgba(240,235,224,0.5)' }}>Last 24h</span>
          </div>
          {GROUP.chat.slice(0, 3).map(c => {
            const p = _Dg.players.find(x => x.id === c.who);
            return (
              <div key={c.id} style={{ display: 'flex', gap: 10, padding: '10px 0', borderBottom: '1px solid rgba(201,168,76,0.1)' }}>
                <_Avg player={p} size={28}/>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ font: `600 12px/1 ${_Tg.fontBody}`, color: _Tg.webText }}>{p.first}</span>
                    <span style={{ font: `400 11px/1 ${_Tg.fontMono}`, color: 'rgba(240,235,224,0.45)' }}>{c.t}</span>
                  </div>
                  <div style={{ font: `300 13px/1.4 ${_Tg.fontBody}`, color: 'rgba(240,235,224,0.78)', marginTop: 4 }}>{c.text}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ padding: '8px 22px 24px' }}>
          <div style={{
            background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(201,168,76,0.14)',
            borderRadius: 100, padding: '12px 18px',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <_Ig name="chat" size={16} style={{ color: _Tg.webGold }}/>
            <span style={{ flex: 1, font: `300 13px/1 ${_Tg.fontBody}`, color: 'rgba(240,235,224,0.5)' }}>Say something to the crew…</span>
            <_Ig name="arrowR" size={16} style={{ color: _Tg.webGold }}/>
          </div>
        </div>
      </div>
    </_PSg>
  );
}

Object.assign(window, { GroupsV1, GroupsV2, GroupsV3, GroupsV4 });