// social.jsx — Messages inbox, DM thread, member profile with follow/message

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;
const { Card, Chip, CoverArt, Waveform, TopBar, IconBtn, DisplayHeading, Icon, Avatar } = window.LAUNCH_SCREENS_1;

// ─────────────────────────────────────────────────────────────
// Member directory — referenced from Feed + Messages
// ─────────────────────────────────────────────────────────────
const MEMBERS = {
  'kai.park': {
    handle: 'kai.park', name: 'Kai Park', lbl: 'KP', color: '#C72820',
    pal: ['#C72820', '#0A0A0A'],
    bio: 'producer / engineer. brooklyn. dark synth, neon kicks. open to collabs.',
    tier: 'ORBIT', city: 'BROOKLYN', genres: ['ALT POP', 'SYNTH'],
    followers: 1240, following: 89, releases: 6, streak: 21,
    online: true,
  },
  'sasha.vee': {
    handle: 'sasha.vee', name: 'Sasha Vee', lbl: 'SV', color: '#CAFF33',
    pal: ['#CAFF33', '#7A5AE0'],
    bio: 'songwriter / lead vox. los angeles. just got on fresh finds ☁️',
    tier: 'STRATOSPHERE', city: 'LA', genres: ['SOUL', 'R&B'],
    followers: 8420, following: 142, releases: 11, streak: 64,
    online: true,
  },
  'theo.m': {
    handle: 'theo.m', name: 'Theo Marlow', lbl: 'TM', color: '#7A5AE0',
    pal: ['#7A5AE0', '#FBBF24'],
    bio: 'r&b producer & topliner. atlanta. low end specialist.',
    tier: 'ORBIT', city: 'ATL', genres: ['R&B', 'HIP HOP'],
    followers: 612, following: 203, releases: 3, streak: 8,
    online: false,
  },
  'isla.loop': {
    handle: 'isla.loop', name: 'Isla Loop', lbl: 'IL', color: '#FBBF24',
    pal: ['#FBBF24', '#7A5AE0'],
    bio: 'ambient / electronic. lisbon. sound design nerd. always demoing.',
    tier: 'LAUNCH PAD', city: 'LISBON', genres: ['AMBIENT', 'ELECTRONIC'],
    followers: 327, following: 88, releases: 4, streak: 15,
    online: false,
  },
};

// Conversations — sample data
const THREADS = [
  {
    id: 'kai.park',
    member: 'kai.park',
    unread: 2,
    lastTime: '12:42 PM',
    messages: [
      { from: 'them', t: 'yo that mix from your assignment is FIRE', ts: '11:30 AM' },
      { from: 'them', t: 'the way you sat the 808 in there 🤯', ts: '11:30 AM' },
      { from: 'me',   t: 'thank you bro!! took me forever lol', ts: '11:45 AM' },
      { from: 'me',   t: 'noah\'s lesson on bus comp changed my life fr', ts: '11:45 AM' },
      { from: 'them', t: 'fr fr. yo i\'m working on a remix — would u send me your vocal stems?', ts: '12:38 PM' },
      { from: 'them', t: 'i\'ll cut you in on splits ofc', ts: '12:42 PM', kind: 'voice' },
    ],
  },
  {
    id: 'sasha.vee',
    member: 'sasha.vee',
    unread: 0,
    lastTime: 'YESTERDAY',
    messages: [
      { from: 'them', t: 'congrats on the streak 🔥', ts: 'yesterday' },
      { from: 'me',   t: 'thank u!! you\'re a huge inspo', ts: 'yesterday' },
    ],
  },
  {
    id: 'theo.m',
    member: 'theo.m',
    unread: 1,
    lastTime: 'TUE',
    messages: [
      { from: 'them', t: 'pull up on the discord later? im sharing a vocal chain preset', ts: 'tue' },
    ],
  },
  {
    id: 'isla.loop',
    member: 'isla.loop',
    unread: 0,
    lastTime: 'MAR 28',
    messages: [
      { from: 'them', t: 'thx for the feedback on low tide 🙏', ts: 'mar 28' },
    ],
  },
];

// Suggested-to-follow
const SUGGESTIONS = ['theo.m', 'isla.loop'];

// ─────────────────────────────────────────────────────────────
// FollowButton — used on Feed + Member profile
// ─────────────────────────────────────────────────────────────
function FollowButton({ theme, following, onToggle, size = 'sm' }) {
  return (
    <button onClick={onToggle} style={{
      background: following ? 'transparent' : theme.text,
      color: following ? theme.text : theme.bg,
      border: following ? `1px solid ${theme.border}` : 'none',
      fontFamily: theme.fontMono, fontSize: size === 'sm' ? 10 : 11,
      fontWeight: 700, letterSpacing: 1,
      padding: size === 'sm' ? '7px 12px' : '10px 16px',
      borderRadius: 99, cursor: 'pointer',
      textTransform: 'uppercase', whiteSpace: 'nowrap',
    }}>
      {following ? '✓ FOLLOWING' : '+ FOLLOW'}
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// MessagesScreen — inbox
// ─────────────────────────────────────────────────────────────
function MessagesScreen({ theme, onBack, onOpenThread, onOpenMember, threads, following, onToggleFollow, members = MEMBERS }) {
  const [tab, setTab] = useStateS('inbox'); // 'inbox' | 'requests'
  const memberOr = (h) => members[h] || { handle: h, name: h, lbl: (h || '?').slice(0, 2).toUpperCase(), color: '#888', online: false };

  return (
    <div style={{ paddingBottom: 110 }}>
      {/* Top bar */}
      <div style={{
        paddingTop: 58, paddingBottom: 8, paddingLeft: theme.pad, paddingRight: theme.pad,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: theme.surface, border: `1px solid ${theme.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke={theme.text} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <IconBtn theme={theme}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
            <path d="M3 5l9 7 9-7M3 5v14h18V5M3 5h18" stroke={theme.text} strokeWidth="2" strokeLinejoin="round"/>
          </svg>
        </IconBtn>
      </div>

      <div style={{ padding: `4px ${theme.pad}px 0` }}>
        <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 1, fontWeight: 700 }}>
          {threads.reduce((a, t) => a + t.unread, 0)} UNREAD
        </div>
        <DisplayHeading theme={theme} size={36}>MESSAGES</DisplayHeading>
      </div>

      {/* Tabs */}
      <div style={{
        display: 'flex', gap: 6, padding: `${theme.gap}px ${theme.pad}px 4px`,
      }}>
        {[
          { id: 'inbox', l: `INBOX · ${threads.length}` },
          { id: 'requests', l: 'REQUESTS · 3' },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: '8px 14px', borderRadius: 99, cursor: 'pointer',
            border: 'none',
            background: tab === t.id ? theme.text : 'transparent',
            color: tab === t.id ? theme.bg : theme.text,
            fontFamily: theme.fontMono, fontSize: 11, fontWeight: 700,
            letterSpacing: 0.8, textTransform: 'uppercase',
            boxShadow: tab === t.id ? 'none' : `inset 0 0 0 1px ${theme.border}`,
          }}>{t.l}</button>
        ))}
      </div>

      {tab === 'inbox' ? (
        <>
          {/* Active now strip */}
          <div style={{ padding: `${theme.gap}px ${theme.pad}px 0` }}>
            <div style={{
              fontFamily: theme.fontMono, fontSize: 10, color: theme.muted,
              letterSpacing: 1, fontWeight: 700, marginBottom: 10,
            }}>● ACTIVE NOW</div>
            <div style={{ display: 'flex', gap: 12, overflowX: 'auto', margin: `0 -${theme.pad}px`, padding: `0 ${theme.pad}px 4px` }}>
              {Object.values(members).filter(m => m.online).map(m => (
                <button key={m.handle} onClick={() => onOpenMember(m.handle)} style={{
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', alignItems: 'center',
                  gap: 6, padding: 0, flexShrink: 0,
                }}>
                  <div style={{ position: 'relative' }}>
                    <Avatar m={m} size={56} fontSize={18} theme={theme}
                      style={{ border: `2px solid ${theme.accent}` }} />
                    <div style={{
                      position: 'absolute', bottom: 0, right: 0,
                      width: 14, height: 14, borderRadius: 99,
                      background: '#22C55E', border: `2px solid ${theme.bg}`,
                    }} />
                  </div>
                  <div style={{
                    fontFamily: theme.fontMono, fontSize: 9, color: theme.text,
                    letterSpacing: 0.5, fontWeight: 600,
                  }}>{m.handle.split('.')[0]}</div>
                </button>
              ))}
            </div>
          </div>

          {/* Threads */}
          <div style={{ padding: `${theme.gap + 4}px 0 0` }}>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {threads.map((th, i) => {
                const m = memberOr(th.member);
                const last = th.messages[th.messages.length - 1] || { t: '', from: 'them' };
                const lastText = last.kind === 'voice' ? '🎙 Voice note · 0:23' : last.t;
                return (
                  <button key={th.id} onClick={() => onOpenThread(th.id)} style={{
                    background: 'transparent', border: 'none', cursor: 'pointer',
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: `12px ${theme.pad}px`, textAlign: 'left',
                    borderBottom: i < threads.length - 1 ? `1px solid ${theme.border}` : 'none',
                  }}>
                    <div style={{ position: 'relative' }}>
                      <Avatar m={m} size={48} fontSize={16} theme={theme} />
                      {m.online && (
                        <div style={{
                          position: 'absolute', bottom: 0, right: 0,
                          width: 12, height: 12, borderRadius: 99,
                          background: '#22C55E', border: `2px solid ${theme.bg}`,
                        }} />
                      )}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                        <span style={{ fontFamily: theme.fontBody, fontSize: 15, color: theme.text, fontWeight: th.unread > 0 ? 700 : 600 }}>
                          {m.handle}
                        </span>
                        <span style={{ fontFamily: theme.fontMono, fontSize: 9, color: th.unread > 0 ? theme.accent : theme.muted, letterSpacing: 0.5, fontWeight: 700, flexShrink: 0 }}>
                          {th.lastTime}
                        </span>
                      </div>
                      <div style={{
                        fontFamily: theme.fontBody, fontSize: 13,
                        color: th.unread > 0 ? theme.text : theme.muted,
                        fontWeight: th.unread > 0 ? 500 : 400,
                        marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }}>
                        {last.from === 'me' ? 'You: ' : ''}{lastText}
                      </div>
                    </div>
                    {th.unread > 0 && (
                      <div style={{
                        minWidth: 20, height: 20, borderRadius: 99,
                        background: theme.accent, color: theme.onAccent,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontFamily: theme.fontMono, fontSize: 11, fontWeight: 700,
                        padding: '0 6px',
                      }}>{th.unread}</div>
                    )}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Suggestions to follow */}
          <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
            <div style={{
              fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
              letterSpacing: 1, fontWeight: 600, marginBottom: 10,
            }}>SUGGESTED · BASED ON YOUR GENRE</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {SUGGESTIONS.filter(handle => members[handle]).map(handle => {
                const m = members[handle];
                return (
                  <Card key={handle} theme={theme} style={{
                    padding: 12, display: 'flex', alignItems: 'center', gap: 12,
                  }}>
                    <button onClick={() => onOpenMember(handle)} style={{
                      width: 44, height: 44, borderRadius: 99, background: m.color,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: theme.fontDisplay, color: '#0A0A0A', fontSize: 14,
                      border: 'none', cursor: 'pointer', padding: 0,
                    }}>{m.lbl}</button>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.text, fontWeight: 600 }}>
                        {m.handle}
                      </div>
                      <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5 }}>
                        {m.genres.join(' · ')} · {m.city}
                      </div>
                    </div>
                    <FollowButton theme={theme}
                      following={following.includes(handle)}
                      onToggle={() => onToggleFollow(handle)} />
                  </Card>
                );
              })}
            </div>
          </div>
        </>
      ) : (
        <div style={{ padding: `${theme.gap + 10}px ${theme.pad}px 0`, textAlign: 'center' }}>
          <div style={{
            width: 64, height: 64, borderRadius: 16, background: theme.surface,
            border: `1px solid ${theme.border}`, margin: '0 auto 14px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {Icon.bell(theme.muted)}
          </div>
          <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 1, fontWeight: 700 }}>
            3 PEOPLE WANT TO MESSAGE YOU
          </div>
          <div style={{ fontFamily: theme.fontDisplay, fontSize: 22, color: theme.text, marginTop: 6, textTransform: 'uppercase', letterSpacing: 0.2 }}>
            REQUESTS COMING SOON
          </div>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ThreadScreen — DM conversation
// ─────────────────────────────────────────────────────────────
function ThreadScreen({ theme, threadId, threads, onBack, onSend, onOpenMember, following, onToggleFollow, members = MEMBERS }) {
  const thread = threads.find(t => t.id === threadId);
  if (!thread) return null;
  const m = members[thread.member] || { handle: thread.member, name: thread.member, lbl: (thread.member || '?').slice(0, 2).toUpperCase(), color: '#888', online: false };
  const [input, setInput] = useStateS('');
  const scrollRef = useRefS(null);

  useEffectS(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [thread.messages.length]);

  const send = () => {
    if (!input.trim()) return;
    onSend(threadId, input.trim());
    setInput('');
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Top bar */}
      <div style={{
        paddingTop: 58, paddingBottom: 12, paddingLeft: theme.pad, paddingRight: theme.pad,
        display: 'flex', alignItems: 'center', gap: 10,
        borderBottom: `1px solid ${theme.border}`,
        background: theme.bg, position: 'relative', zIndex: 5,
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: theme.surface, border: `1px solid ${theme.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', padding: 0, flexShrink: 0,
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke={theme.text} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <button onClick={() => onOpenMember(m.handle)} style={{
          flex: 1, display: 'flex', alignItems: 'center', gap: 10,
          background: 'transparent', border: 'none', cursor: 'pointer', padding: 0, textAlign: 'left',
        }}>
          <div style={{ position: 'relative' }}>
            <Avatar m={m} size={36} fontSize={13} theme={theme} />
            {m.online && (
              <div style={{
                position: 'absolute', bottom: 0, right: 0,
                width: 10, height: 10, borderRadius: 99,
                background: '#22C55E', border: `2px solid ${theme.bg}`,
              }} />
            )}
          </div>
          <div>
            <div style={{ fontFamily: theme.fontBody, fontSize: 15, color: theme.text, fontWeight: 600 }}>
              {m.handle}
            </div>
            <div style={{ fontFamily: theme.fontMono, fontSize: 9, color: m.online ? '#22C55E' : theme.muted, letterSpacing: 0.5, fontWeight: 700 }}>
              {m.online ? '● ACTIVE NOW' : '◌ OFFLINE'}
            </div>
          </div>
        </button>
        <FollowButton theme={theme}
          following={following.includes(m.handle)}
          onToggle={() => onToggleFollow(m.handle)} />
      </div>

      {/* Messages */}
      <div ref={scrollRef} style={{
        flex: 1, overflow: 'auto', padding: `${theme.gap}px ${theme.pad}px 8px`,
        display: 'flex', flexDirection: 'column', gap: 8,
      }} className="launch-scroll">
        {/* Day divider */}
        <div style={{
          textAlign: 'center', margin: '4px 0 8px',
          fontFamily: theme.fontMono, fontSize: 9, color: theme.faint,
          letterSpacing: 1, fontWeight: 700,
        }}>★ TODAY ★</div>

        {thread.messages.map((msg, i) => {
          const mine = msg.from === 'me';
          const prev = thread.messages[i - 1];
          const grouped = prev && prev.from === msg.from;
          if (msg.kind === 'voice') {
            return (
              <div key={i} style={{
                alignSelf: mine ? 'flex-end' : 'flex-start',
                maxWidth: '78%', display: 'flex', alignItems: 'center', gap: 10,
                background: mine ? theme.accent : theme.surface,
                color: mine ? theme.onAccent : theme.text,
                padding: '10px 14px', borderRadius: 16,
                borderBottomRightRadius: mine ? 4 : 16,
                borderBottomLeftRadius: mine ? 16 : 4,
                marginTop: grouped ? 2 : 4,
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 99,
                  background: mine ? 'rgba(10,10,10,0.2)' : theme.accent,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill={mine ? theme.onAccent : theme.bg}>
                    <path d="M6 4l14 8-14 8V4z"/>
                  </svg>
                </div>
                <Waveform accent={mine ? theme.onAccent : theme.accent} muted={mine ? 'rgba(10,10,10,0.2)' : theme.faint} bars={18} played={0} />
                <span style={{ fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700, opacity: 0.7 }}>
                  0:23
                </span>
              </div>
            );
          }
          return (
            <div key={i} style={{
              alignSelf: mine ? 'flex-end' : 'flex-start',
              maxWidth: '78%',
              background: mine ? theme.accent : theme.surface,
              color: mine ? theme.onAccent : theme.text,
              padding: '9px 14px', borderRadius: 16,
              borderBottomRightRadius: mine ? 4 : 16,
              borderBottomLeftRadius: mine ? 16 : 4,
              fontFamily: theme.fontBody, fontSize: 14, lineHeight: 1.4,
              marginTop: grouped ? 2 : 4,
              border: mine ? 'none' : `1px solid ${theme.border}`,
            }}>{msg.t}</div>
          );
        })}
        {/* Typing indicator */}
        {m.online && (
          <div style={{
            alignSelf: 'flex-start', display: 'flex', alignItems: 'center', gap: 6,
            background: theme.surface, padding: '10px 14px', borderRadius: 16,
            borderBottomLeftRadius: 4, border: `1px solid ${theme.border}`,
            marginTop: 2,
          }}>
            {[0, 1, 2].map(i => (
              <div key={i} style={{
                width: 6, height: 6, borderRadius: 99, background: theme.muted,
                animation: `launchPulse 1.2s ${i * 0.15}s infinite ease-in-out`,
              }} />
            ))}
          </div>
        )}
      </div>

      {/* Composer */}
      <div style={{
        padding: `8px ${theme.pad}px 28px`,
        borderTop: `1px solid ${theme.border}`,
        background: theme.bg,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <button style={{
          width: 38, height: 38, borderRadius: 99, flexShrink: 0,
          background: theme.surface, border: `1px solid ${theme.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', padding: 0, color: theme.text,
        }}>{Icon.plus(theme.text)}</button>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && send()}
          placeholder="Drop a message…"
          style={{
            flex: 1, padding: '11px 16px', borderRadius: 99,
            background: theme.surface, border: `1px solid ${theme.border}`,
            color: theme.text, fontFamily: theme.fontBody, fontSize: 14,
            outline: 'none', minWidth: 0,
          }}
        />
        <button onClick={send} style={{
          width: 38, height: 38, borderRadius: 99, flexShrink: 0,
          background: input.trim() ? theme.accent : theme.surface,
          color: input.trim() ? theme.onAccent : theme.muted,
          border: input.trim() ? 'none' : `1px solid ${theme.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', padding: 0,
        }}>
          {input.trim() ? (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M4 12h16m0 0l-6-6m6 6l-6 6" stroke={theme.onAccent} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          ) : (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <rect x="9" y="3" width="6" height="12" rx="3" stroke={theme.muted} strokeWidth="2"/>
              <path d="M5 11a7 7 0 0014 0M12 18v3" stroke={theme.muted} strokeWidth="2" strokeLinecap="round"/>
            </svg>
          )}
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// MemberProfileScreen — tap an artist's name → their profile
// ─────────────────────────────────────────────────────────────
function MemberProfileScreen({ theme, handle, onBack, following, onToggleFollow, onMessage, members = MEMBERS }) {
  // Never blank out: if the member isn't in the loaded directory (e.g. not yet
  // synced, or it's you — you're excluded from the directory), show a minimal
  // profile built from the handle instead of a black screen.
  const m = members[handle] || {
    handle, name: handle || 'Member', lbl: (handle || '?').slice(0, 2).toUpperCase(),
    color: '#888', pal: ['#888', '#0A0A0A'], tier: 'MEMBER', city: '', bio: '',
    genres: [], followers: 0, following: 0, releases: 0, streak: 0, avatarUrl: null,
  };
  const isFollowing = following.includes(handle);

  return (
    <div style={{ paddingBottom: 110 }}>
      {/* Top bar */}
      <div style={{
        paddingTop: 58, paddingBottom: 8, paddingLeft: theme.pad, paddingRight: theme.pad,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 5,
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: 'rgba(10,10,10,0.6)', border: 'none',
          backdropFilter: 'blur(20px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <button style={{
          width: 38, height: 38, borderRadius: 12,
          background: 'rgba(10,10,10,0.6)', border: 'none',
          backdropFilter: 'blur(20px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
        }}>
          <svg width="18" height="6" viewBox="0 0 22 6">
            <circle cx="3" cy="3" r="2.5" fill="#fff"/>
            <circle cx="11" cy="3" r="2.5" fill="#fff"/>
            <circle cx="19" cy="3" r="2.5" fill="#fff"/>
          </svg>
        </button>
      </div>

      {/* Identity (banner removed — it covered ~half the screen) */}
      <div style={{ padding: `0 ${theme.pad}px`, marginTop: 104 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, marginBottom: 14 }}>
          <Avatar m={m} size={96} radius={24} fontSize={36} theme={theme}
            style={{ border: `4px solid ${theme.bg}` }} />
          <div style={{ flex: 1, paddingBottom: 6 }}>
            <div style={{
              fontFamily: theme.fontMono, fontSize: 10, color: theme.accent,
              letterSpacing: 1, fontWeight: 700,
            }}>{m.tier} · {m.city}</div>
            <DisplayHeading theme={theme} size={28} style={{ marginTop: 4 }}>
              {m.name.toUpperCase()}
            </DisplayHeading>
            <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5, marginTop: 2, fontWeight: 600 }}>
              @{m.handle.toUpperCase()}
            </div>
          </div>
        </div>

        {/* Bio */}
        <div style={{
          fontFamily: theme.fontBody, fontSize: 14, color: theme.text,
          lineHeight: 1.45,
        }}>{m.bio}</div>

        {/* Genres */}
        <div style={{ display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
          {m.genres.map(g => <Chip key={g} theme={theme}>{g}</Chip>)}
        </div>

        {/* CTA row */}
        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          <button
            onClick={() => onToggleFollow(m.handle)}
            style={{
              flex: 1,
              background: isFollowing ? 'transparent' : theme.text,
              color: isFollowing ? theme.text : theme.bg,
              border: isFollowing ? `1px solid ${theme.border}` : 'none',
              fontFamily: theme.fontDisplay, fontSize: 14, letterSpacing: 1,
              padding: '13px 18px', borderRadius: 12, cursor: 'pointer',
              textTransform: 'uppercase',
            }}>
            {isFollowing ? '✓ FOLLOWING' : '+ FOLLOW'}
          </button>
          <button
            onClick={() => onMessage(m.handle)}
            style={{
              flex: 1,
              background: theme.accent, color: theme.onAccent,
              border: 'none',
              fontFamily: theme.fontDisplay, fontSize: 14, letterSpacing: 1,
              padding: '13px 18px', borderRadius: 12, cursor: 'pointer',
              textTransform: 'uppercase',
            }}>
            MESSAGE ↗
          </button>
        </div>

        {/* Stats */}
        <div style={{
          marginTop: 18, padding: '14px 0',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4,
          borderTop: `1px solid ${theme.border}`,
          borderBottom: `1px solid ${theme.border}`,
        }}>
          {[
            { n: m.followers.toLocaleString(), l: 'FOLLOWERS' },
            { n: m.following, l: 'FOLLOWING' },
            { n: m.releases, l: 'RELEASES' },
            { n: m.streak, l: 'STREAK' },
          ].map((s, i) => (
            <div key={i} style={{
              textAlign: 'center',
              borderRight: i < 3 ? `1px solid ${theme.border}` : 'none',
            }}>
              <div style={{ fontFamily: theme.fontDisplay, fontSize: 22, color: theme.text, lineHeight: 1, letterSpacing: -0.2 }}>
                {s.n}
              </div>
              <div style={{
                fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
                letterSpacing: 0.8, marginTop: 4, fontWeight: 600,
              }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Releases preview */}
        <div style={{ marginTop: theme.gap + 4 }}>
          <div style={{
            fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
            letterSpacing: 1, fontWeight: 600, marginBottom: 10,
          }}>RECENT RELEASES</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {[
              { lbl: 'NH', t: 'NEON HOURS' },
              { lbl: 'BS', t: 'BLACK SAND' },
              { lbl: 'GH', t: 'GHOSTLINE' },
            ].map((r, i) => (
              <div key={i}>
                <CoverArt palette={m.pal} label={r.lbl} size={104} radius={10} />
                <div style={{
                  fontFamily: theme.fontMono, fontSize: 9, color: theme.text,
                  letterSpacing: 0.5, fontWeight: 600, marginTop: 6,
                }}>{r.t}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Mutuals */}
        <div style={{ marginTop: theme.gap + 4 }}>
          <div style={{
            fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
            letterSpacing: 1, fontWeight: 600, marginBottom: 10,
          }}>FOLLOWED BY · 3 OF YOUR SQUAD</div>
          <Card theme={theme} style={{ padding: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex' }}>
              {['SV', 'TM', 'IL'].map((lbl, i) => (
                <div key={i} style={{
                  width: 32, height: 32, borderRadius: 99,
                  background: ['#CAFF33', '#7A5AE0', '#FBBF24'][i],
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: theme.fontDisplay, color: '#0A0A0A', fontSize: 11,
                  marginLeft: i > 0 ? -10 : 0,
                  border: `2px solid ${theme.surface}`,
                }}>{lbl}</div>
              ))}
            </div>
            <div style={{ fontFamily: theme.fontBody, fontSize: 13, color: theme.text, flex: 1 }}>
              <span style={{ fontWeight: 600 }}>sasha.vee</span>, <span style={{ fontWeight: 600 }}>theo.m</span> and 1 other
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

window.LAUNCH_SCREENS_5 = { MessagesScreen, ThreadScreen, MemberProfileScreen, FollowButton, MEMBERS, THREADS };
