{!avatarUrl && }

@{handle || 'unknown'} {label && ( {label} )}

); }; var CommentComposer = function(props) { var profileId = props.profileId; var onSubmit = props.onSubmit; var alwaysOpen = props.alwaysOpen; var memberList = props.memberList; var _a = useState(!!alwaysOpen), isOpen = _a[0], setIsOpen = _a[1]; var _b = useState(''), draft = _b[0], setDraft = _b[1]; var _c = useState(null), mentionQuery = _c[0], setMentionQuery = _c[1]; var _d = useState(null), debouncedMentionQuery = _d[0], setDebouncedMentionQuery = _d[1]; var cursorRef = useRef(0); useEffect(function() { if (alwaysOpen) setIsOpen(true); }, [alwaysOpen]); useEffect(function() { setDraft(''); setMentionQuery(null); setDebouncedMentionQuery(null); if (!alwaysOpen) setIsOpen(false); }, [profileId, alwaysOpen]); useEffect(function() { if (mentionQuery === null) { setDebouncedMentionQuery(null); return; } var handle = setTimeout(function() { setDebouncedMentionQuery(mentionQuery.trim().toLowerCase()); }, 180); return function() { clearTimeout(handle); }; }, [mentionQuery]); var getMentionMatch = function(text, cursor) { var upto = text.slice(0, cursor); var match = upto.match(/(?:^|\\s)@([a-zA-Z0-9_]{0,20})$/); if (!match) return null; return match[1]; }; var handleChange = function(e) { var value = e.target.value; var cursor = e.target.selectionStart || value.length; cursorRef.current = cursor; setDraft(value); setMentionQuery(getMentionMatch(value, cursor)); }; var applyMention = function(handle) { if (mentionQuery === null) return; var cursor = cursorRef.current || draft.length; var upto = draft.slice(0, cursor); var after = draft.slice(cursor); var atIndex = upto.lastIndexOf('@'); if (atIndex === -1) return; var prefix = upto.slice(0, atIndex); var nextText = prefix + '@' + handle + ' ' + after; setDraft(nextText); setMentionQuery(null); setDebouncedMentionQuery(null); }; var mentionSuggestions = useMemo(function() { if (debouncedMentionQuery === null) return []; var needle = debouncedMentionQuery; var matches = memberList.filter(function(member) { if (!member.handle) return false; if (!needle) return true; var handle = member.handle.toLowerCase(); var name = (member.displayName || member.name || '').toLowerCase(); return handle.indexOf(needle) !== -1 || name.indexOf(needle) !== -1; }); return matches.slice(0, 5); }, [debouncedMentionQuery, memberList]); var submit = function() { if (!draft.trim()) return; var success = onSubmit(profileId, draft); if (!success) return; setDraft(''); setMentionQuery(null); setDebouncedMentionQuery(null); if (!alwaysOpen) setIsOpen(false); }; return (

{!isOpen && ( )} {isOpen && (

Add a public comment

Public {!alwaysOpen && ( )}

{mentionQuery !== null && mentionSuggestions.length > 0 && (
              <div style={{
                marginTop: 10,
                background: colors.surface,
                borderRadius: 10,
                border: '1px solid ' + colors.border,
                padding: 8,
                display: 'flex',
                gap: 8,
                flexWrap: 'wrap'
              }}>
                {mentionSuggestions.map(function(member) {
                  return (
                    <button
                      key={member.id}
                      onClick={function() { applyMention(member.handle); }}
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: 6,
                        background: colors.primarySoft,
                        border: '1px solid ' + colors.primary,
                        color: colors.primaryDark,
                        borderRadius: 999,
                        padding: '6px 10px',
                        fontSize: 11,
                        fontWeight: 700,
                        cursor: 'pointer'
                      }}
                    >
                      <div style={{
                        width: 22,
                        height: 22,
                        borderRadius: '50%',
                        background: member.avatarUrl ? 'url(' + member.avatarUrl + ') center/cover' : 'linear-gradient(135deg, ' + colors.primary + ', #004182)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                      }}>
                        {!member.avatarUrl && <User size={12} color="white" />}
                      </div>
                      @{member.handle}
                    </button>
                  );
                })}
              </div>
            )}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
              <span style={{ fontSize: 11, color: colors.textSecondary }}>
                {draft.length}/240
              </span>
              <button
                onClick={submit}
                disabled={!draft.trim()}
                style={{
                  background: draft.trim() ? colors.primary : colors.surface,
                  color: draft.trim() ? 'white' : colors.textSecondary,
                  border: '1px solid ' + (draft.trim() ? colors.primary : colors.border),
                  borderRadius: 10,
                  padding: '8px 12px',
                  fontSize: 12,
                  fontWeight: 700,
                  cursor: draft.trim() ? 'pointer' : 'not-allowed'
                }}
              >
                Post comment
              </button>
            </div>
          </div>
        )}
      </div>
    );
  };

var ProfileCard = function(props) {
    var profile = props.profile;
    var isYou = profile.id === user.id;
    var showView = props.showView !== false;
    var onView = props.onView || function() { setSelectedProfile(profile.id); };
    var previewReasons = (profile.reasons || []).filter(function(r) { return r; }).slice(0, 2);
    var commentCount = profile.isReal ? (commentsByProfile[profile.id] || []).length : 0;
    var commentPreview = profile.isReal
      ? (commentsByProfile[profile.id] || []).slice(-2).reverse()
      : [];

return (
      <div style={{
        background: colors.surface,
        borderRadius: 14,
        padding: 16,
        marginBottom: 16,
        border: '1px solid ' + colors.border,
        boxShadow: '0 10px 24px rgba(0,0,0,0.06)'
      }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 12 }}>
          <div style={{
            width: 56,
            height: 56,
            borderRadius: '50%',
            background: profile.avatarUrl ? 'url(' + profile.avatarUrl + ') center/cover' : 'linear-gradient(135deg, ' + colors.primary + ', #004182)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
            border: '2px solid ' + colors.surface,
            boxShadow: '0 4px 10px rgba(0,0,0,0.12)'
          }}>
            {!profile.avatarUrl && <User size={28} color="white" />}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: colors.text }}>
                {profile.name}
              </h3>
              {isYou && (
                <span style={{
                  fontSize: 10,
                  background: colors.primarySoft,
                  color: colors.primary,
                  padding: '2px 8px',
                  borderRadius: 12,
                  fontWeight: 700
                }}>You</span>
              )}
              {!profile.isReal && (
                <span style={{
                  fontSize: 10,
                  background: '#fef3cd',
                  color: '#856404',
                  padding: '2px 8px',
                  borderRadius: 12,
                  fontWeight: 600
                }}>Sample</span>
              )}
            </div>
            <p style={{
              margin: '6px 0 0 0',
              fontSize: 14,
              color: colors.textSecondary,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap'
            }}>
              {profile.headline || 'No headline yet - still mysterious.'}
            </p>
          </div>
        </div>

{previewReasons.length > 0 && (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
            {previewReasons.map(function(reason, i) {
              return (
                <div key={i} style={{
                  padding: '6px 10px',
                  background: colors.panel,
                  borderRadius: 999,
                  fontSize: 12,
                  color: colors.textSecondary,
                  border: '1px solid ' + colors.border
                }}>{reason}</div>
              );
            })}
          </div>
        )}

{profile.isReal && (
          <div style={{ marginBottom: 12 }}>
            {commentPreview.length === 0 ? (
              <div style={{
                padding: 10,
                borderRadius: 10,
                background: colors.panel,
                border: '1px dashed ' + colors.border,
                fontSize: 12,
                color: colors.textSecondary
              }}>
                No public comments yet. Be the first to drop a roast.
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {commentPreview.map(function(comment) {
                  var commentUser = comment._user || {};
                  return (
                    <div key={comment.id} style={{
                      padding: 10,
                      borderRadius: 10,
                      background: colors.panel,
                      border: '1px solid ' + colors.border
                    }}>
                      <div style={{ fontSize: 12, fontWeight: 700, color: colors.text }}>
                        {commentUser.displayName || 'Anonymous'}
                      </div>
                      <div style={{ fontSize: 12, color: colors.textSecondary, marginTop: 4 }}>
                        {comment.text}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        )}

{profile.isReal && (
          <div style={{ marginBottom: 12 }}>
            <CommentComposer
              profileId={profile.id}
              onSubmit={submitComment}
              memberList={memberList}
            />
          </div>
        )}

<div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 12,
          flexWrap: 'wrap'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            {profile.isReal && profile.handle ? (
              <ProfileAvatarButton
                handle={profile.handle}
                avatarUrl={profile.avatarUrl}
                name={profile.name}
                size={26}
                label="Chat"
              />
            ) : (
              <span style={{ fontSize: 12, color: colors.textSecondary }}>Fictional profile</span>
            )}
            {profile.isReal && (
              <span style={{ fontSize: 12, color: colors.textSecondary }}>
                {commentCount} comment{commentCount === 1 ? '' : 's'}
              </span>
            )}
          </div>
          {showView && (
            <button
              onClick={onView}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 6,
                background: colors.primary,
                color: 'white',
                border: 'none',
                borderRadius: 10,
                padding: '8px 12px',
                fontSize: 12,
                fontWeight: 700,
                cursor: 'pointer',
                boxShadow: '0 6px 16px rgba(10, 102, 194, 0.25)'
              }}
            >
              View profile
              <ChevronRight size={14} />
            </button>
          )}
        </div>
      </div>
    );
  };

var ProfilePage = function(props) {
    var profile = props.profile;
    var isYou = profile.id === user.id;
    var filledReasons = profile.reasons ? profile.reasons.filter(function(r) { return r; }) : [];
    var comments = commentsByProfile[profile.id] || [];

<div style={{ padding: '0 20px 22px', marginTop: -48 }}>
                <div style={{
                  width: 110,
                  height: 110,
                  borderRadius: '50%',
                  background: profile.avatarUrl ? 'url(' + profile.avatarUrl + ') center/cover' : 'linear-gradient(135deg, ' + colors.primary + ', #004182)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  border: '4px solid ' + colors.surface,
                  boxShadow: '0 6px 18px rgba(0,0,0,0.16)',
                  marginBottom: 12
                }}>
                  {!profile.avatarUrl && <User size={54} color="white" />}
                </div>

<div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 8 }}>
                  <h2 style={{ margin: 0, fontSize: 24, fontWeight: 800, color: colors.text }}>
                    {profile.name}
                  </h2>
                  {isYou && (
                    <span style={{
                      fontSize: 11,
                      background: colors.primarySoft,
                      color: colors.primary,
                      padding: '4px 10px',
                      borderRadius: 12,
                      fontWeight: 700
                    }}>You</span>
                  )}
                  {!profile.isReal && (
                    <span style={{
                      fontSize: 11,
                      background: '#fef3cd',
                      color: '#856404',
                      padding: '4px 10px',
                      borderRadius: 12,
                      fontWeight: 600
                    }}>Sample</span>
                  )}
                </div>

<p style={{
                  margin: 0,
                  fontSize: 16,
                  color: colors.textSecondary,
                  lineHeight: 1.4
                }}>
                  {profile.headline || 'No headline yet...'}
                </p>
              </div>
            </div>

{filledReasons.length > 0 && (
              <div style={{
                background: colors.surface,
                borderRadius: 16,
                padding: 20,
                border: '1px solid ' + colors.border,
                marginBottom: 16
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                  <div style={{
                    width: 36,
                    height: 36,
                    borderRadius: 8,
                    background: '#fef7f5',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}>
                    <AlertCircle size={20} color={colors.warning} />
                  </div>
                  <div>
                    <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: colors.text }}>Red Flags</h3>
                    <p style={{ margin: 0, fontSize: 12, color: colors.textSecondary }}>Reasons NOT to hire</p>
                  </div>
                </div>

<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {filledReasons.map(function(reason, i) {
                    return (
                      <div key={i} style={{
                        display: 'flex',
                        alignItems: 'flex-start',
                        gap: 12,
                        padding: 14,
                        background: '#fef7f5',
                        borderRadius: 10,
                        borderLeft: '3px solid ' + colors.warning
                      }}>
                        <span style={{
                          width: 24,
                          height: 24,
                          borderRadius: '50%',
                          background: colors.warning,
                          color: 'white',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: 12,
                          fontWeight: 700,
                          flexShrink: 0
                        }}>{i + 1}</span>
                        <p style={{ margin: 0, fontSize: 14, color: colors.text, lineHeight: 1.5 }}>{reason}</p>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

{(profile.fakeSkill || profile.petPeeve || profile.quirk) && (
              <div style={{
                background: colors.surface,
                borderRadius: 16,
                padding: 20,
                border: '1px solid ' + colors.border,
                marginBottom: 16
              }}>
                <h3 style={{ margin: '0 0 16px 0', fontSize: 16, fontWeight: 700, color: colors.text }}>
                  The Tea
                </h3>

<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {profile.fakeSkill && (
                    <div style={{
                      padding: 16,
                      background: colors.panel,
                      borderRadius: 10
                    }}>
                      <div style={{
                        fontSize: 11,
                        fontWeight: 700,
                        color: colors.textSecondary,
                        textTransform: 'uppercase',
                        letterSpacing: 0.5,
                        marginBottom: 6
                      }}>Fake Skill</div>
                      <div style={{ fontSize: 15, color: colors.text, lineHeight: 1.4 }}>{profile.fakeSkill}</div>
                    </div>
                  )}

{profile.petPeeve && (
                    <div style={{
                      padding: 16,
                      background: colors.panel,
                      borderRadius: 10
                    }}>
                      <div style={{
                        fontSize: 11,
                        fontWeight: 700,
                        color: colors.textSecondary,
                        textTransform: 'uppercase',
                        letterSpacing: 0.5,
                        marginBottom: 6
                      }}>Pet Peeve</div>
                      <div style={{ fontSize: 15, color: colors.text, lineHeight: 1.4 }}>{profile.petPeeve}</div>
                    </div>
                  )}

{profile.quirk && (
                    <div style={{
                      padding: 16,
                      background: colors.panel,
                      borderRadius: 10
                    }}>
                      <div style={{
                        fontSize: 11,
                        fontWeight: 700,
                        color: colors.textSecondary,
                        textTransform: 'uppercase',
                        letterSpacing: 0.5,
                        marginBottom: 6
                      }}>Office Quirk</div>
                      <div style={{ fontSize: 15, color: colors.text, lineHeight: 1.4 }}>{profile.quirk}</div>
                    </div>
                  )}
                </div>
              </div>
            )}

{profile.isReal ? (
              <div style={{
                background: colors.surface,
                borderRadius: 16,
                padding: 20,
                border: '1px solid ' + colors.border,
                marginBottom: 16
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                  <div>
                    <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: colors.text }}>Public comments</h3>
                    <p style={{ margin: '4px 0 0 0', fontSize: 12, color: colors.textSecondary }}>
                      Comments are public by default. Tag people with @.
                    </p>
                  </div>
                  <span style={{ fontSize: 11, color: colors.textSecondary }}>
                    {comments.length} comment{comments.length === 1 ? '' : 's'}
                  </span>
                </div>

{comments.length === 0 ? (
                  <div style={{
                    padding: 12,
                    borderRadius: 12,
                    background: colors.panel,
                    border: '1px dashed ' + colors.border
                  }}>
                    <p style={{ margin: 0, fontSize: 12, color: colors.textSecondary }}>
                      No comments yet. Be the first to leave a public roast.
                    </p>
                  </div>
                ) : (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {comments.map(function(comment) {
                      var commentUser = comment._user || {};
                      return (
                        <div key={comment.id} style={{
                          padding: 14,
                          borderRadius: 12,
                          background: colors.panel,
                          border: '1px solid ' + colors.border
                        }}>
                          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                            <div style={{
                              width: 36,
                              height: 36,
                              borderRadius: '50%',
                              background: commentUser.profileImageUrl ? 'url(' + commentUser.profileImageUrl + ') center/cover' : 'linear-gradient(135deg, ' + colors.primary + ', #004182)',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              flexShrink: 0
                            }}>
                              {!commentUser.profileImageUrl && <User size={16} color="white" />}
                            </div>
                            <div style={{ flex: 1 }}>
                              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                                <span style={{ fontSize: 13, fontWeight: 700, color: colors.text }}>
                                  {commentUser.displayName || 'Anonymous'}
                                </span>
                                {commentUser.handle && (
                                  <button
                                    onClick={function() { handleOpenProfile(commentUser.handle); }}
                                    style={{
                                      background: 'none',
                                      border: 'none',
                                      padding: 0,
                                      color: colors.primary,
                                      fontSize: 12,
                                      fontWeight: 700,
                                      cursor: 'pointer'
                                    }}
                                  >
                                    @{commentUser.handle}
                                  </button>
                                )}
                              </div>
                              <p style={{ margin: '6px 0 0 0', fontSize: 13, color: colors.text, lineHeight: 1.5 }}>
                                {comment.text}
                              </p>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            ) : (
              <div style={{
                background: colors.surface,
                borderRadius: 16,
                padding: 16,
                border: '1px solid ' + colors.border,
                marginBottom: 16
              }}>
                <p style={{ margin: 0, fontSize: 12, color: colors.textSecondary }}>
                  Comments are disabled for sample profiles.
                </p>
              </div>
            )}

<div style={{
              background: '#fff8e6',
              borderRadius: 14,
              padding: 16,
              border: '1px solid #f5d97e',
              display: 'flex',
              alignItems: 'center',
              gap: 14
            }}>
              <AlertCircle size={24} color="#b38600" />
              <div>
                <p style={{ margin: 0, fontSize: 14, color: '#7a5c00', fontWeight: 700 }}>
                  Hiring Risk: EXTREME
                </p>
                <p style={{ margin: '4px 0 0 0', fontSize: 12, color: '#997300' }}>
                  This profile is for entertainment purposes only. Probably.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

if (selectedProfile && selectedData) {
    return <ProfilePage profile={selectedData} />;
  }

var completenessPercent = Math.round((myPreview.completeness / 8) * 100);

return (
    <div style={{
      minHeight: '100dvh',
      background: colors.background,
      fontFamily: 'Avenir Next, Avenir, "Trebuchet MS", sans-serif',
      display: 'flex',
      flexDirection: 'column',
      paddingTop: 'env(safe-area-inset-top, 0px)',
      paddingBottom: 'env(safe-area-inset-bottom, 0px)'
    }}>
      <header style={{
        background: colors.surface,
        padding: '14px 16px',
        borderBottom: '1px solid ' + colors.border,
        position: 'sticky',
        top: 0,
        zIndex: 100
      }}>
        <div style={{ maxWidth: 520, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 40,
                height: 40,
                borderRadius: 6,
                background: colors.primary,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                position: 'relative',
                overflow: 'hidden'
              }}>
                <span style={{
                  color: 'white',
                  fontWeight: 800,
                  fontSize: 20,
                  transform: 'rotate(-5deg)',
                  display: 'inline-block'
                }}>Un</span>
                <div style={{
                  position: 'absolute',
                  top: -2,
                  right: -2,
                  fontSize: 10
                }}>💥</div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                  <h1 style={{ margin: 0, fontSize: 20, fontWeight: 800, color: colors.primary, letterSpacing: -0.5 }}>
                    Un<span style={{ color: colors.text }}>Linked</span>
                  </h1>
                </div>
                <p style={{ margin: 0, fontSize: 11, color: colors.textSecondary, letterSpacing: 0.3, fontWeight: 600 }}>
                  Professional Sabotage Network™
                </p>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <button
                onClick={function() { if (share) share(); }}
                style={{
                  background: colors.primarySoft,
                  color: colors.primary,
                  border: '1px solid ' + colors.primary,
                  borderRadius: 10,
                  padding: '8px 12px',
                  fontSize: 12,
                  fontWeight: 700,
                  cursor: 'pointer'
                }}
              >
                Invite
              </button>
              <div style={{
                width: 38,
                height: 38,
                borderRadius: '50%',
                background: user.avatarUrl ? 'url(' + user.avatarUrl + ') center/cover' : colors.primary,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                border: '2px solid ' + colors.border
              }}>
                {!user.avatarUrl && <User size={18} color="white" />}
              </div>
            </div>
          </div>
          <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              flex: 1,
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              background: colors.panel,
              border: '1px solid ' + colors.border,
              borderRadius: 12,
              padding: '8px 12px'
            }}>
              <input
                type="text"
                value={searchQuery}
                onChange={function(e) { setSearchQuery(e.target.value); }}
                placeholder="Search by name, handle, headline, or red flags"
                style={{
                  flex: 1,
                  border: 'none',
                  background: 'transparent',
                  fontSize: 13,
                  color: colors.text,
                  outline: 'none'
                }}
              />
            </div>
            <div style={{ fontSize: 11, color: colors.textSecondary, whiteSpace: 'nowrap' }}>
              {filteredFeedProfiles.length} cards
            </div>
          </div>
        </div>
      </header>

<div style={{
        background: colors.surface,
        borderBottom: '1px solid ' + colors.border,
        position: 'sticky',
        top: 68,
        zIndex: 99
      }}>
        <div style={{ maxWidth: 520, margin: '0 auto', display: 'flex' }}>
          <button
            onClick={function() { setActiveTab('feed'); }}
            style={{
              flex: 1,
              padding: '14px 16px',
              background: 'none',
              border: 'none',
              borderBottom: activeTab === 'feed' ? '2px solid ' + colors.primary : '2px solid transparent',
              fontSize: 14,
              fontWeight: activeTab === 'feed' ? 700 : 500,
              color: activeTab === 'feed' ? colors.primary : colors.textSecondary,
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 6
            }}
          >
            <Users size={18} />
            Hall of Shame
          </button>
          <button
            onClick={function() { setActiveTab('profile'); }}
            style={{
              flex: 1,
              padding: '14px 16px',
              background: 'none',
              border: 'none',
              borderBottom: activeTab === 'profile' ? '2px solid ' + colors.primary : '2px solid transparent',
              fontSize: 14,
              fontWeight: activeTab === 'profile' ? 700 : 500,
              color: activeTab === 'profile' ? colors.primary : colors.textSecondary,
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 6
            }}
          >
            <Edit size={18} />
            My Anti-Profile
          </button>
        </div>
      </div>

<div style={{
        flex: 1,
        overflowY: 'auto',
        WebkitOverflowScrolling: 'touch',
        padding: 16
      }}>
        <div style={{ maxWidth: 520, margin: '0 auto' }}>
          {activeTab === 'feed' && (
            <div>
              {!myPreview.hasContent && (
                <div style={{
                  background: 'linear-gradient(135deg, #0a66c2 0%, #004182 100%)',
                  borderRadius: 16,
                  padding: 18,
                  marginBottom: 16,
                  color: 'white',
                  boxShadow: '0 12px 26px rgba(10, 102, 194, 0.25)'
                }}>
                  <div style={{ fontSize: 16, fontWeight: 800, marginBottom: 6 }}>
                    Fill in your profile to unlock seeing others
                  </div>
                  <div style={{ fontSize: 12, opacity: 0.9, marginBottom: 12 }}>
                    It takes one minute. Your card shows up instantly once saved.
                  </div>
                  <button
                    onClick={function() { setActiveTab('profile'); }}
                    style={{
                      background: 'white',
                      color: colors.primary,
                      border: 'none',
                      borderRadius: 10,
                      padding: '8px 12px',
                      fontSize: 12,
                      fontWeight: 800,
                      cursor: 'pointer'
                    }}
                  >
                    Create my card
                  </button>
                </div>
              )}
              <div style={{
                background: colors.surface,
                borderRadius: 14,
                padding: 16,
                marginBottom: 16,
                border: '1px solid ' + colors.border,
                boxShadow: '0 8px 20px rgba(0,0,0,0.06)'
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <AlertCircle size={18} color={colors.warning} />
                  <span style={{ fontSize: 14, fontWeight: 700, color: colors.text }}>
                    Tap a handle to open their chat card
                  </span>
                </div>
                <p style={{ margin: 0, fontSize: 13, color: colors.textSecondary, lineHeight: 1.5 }}>
                  Everyone in the room gets a card, even if they have not filled it out yet.
                </p>
              </div>

{filteredFeedProfiles.map(function(profile) {
                return <ProfileCard key={profile.id} profile={profile} />;
              })}
            </div>
          )}

{activeTab === 'profile' && (
            <div>
              <div style={{
                background: colors.surface,
                borderRadius: 16,
                padding: 20,
                border: '1px solid ' + colors.border,
                marginBottom: 16,
                boxShadow: '0 12px 26px rgba(0,0,0,0.08)'
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
                  <div style={{
                    width: 86,
                    height: 86,
                    borderRadius: '50%',
                    background: user.avatarUrl ? 'url(' + user.avatarUrl + ') center/cover' : 'linear-gradient(135deg, ' + colors.primary + ', #004182)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    border: '4px solid ' + colors.surface,
                    boxShadow: '0 4px 14px rgba(0,0,0,0.18)'
                  }}>
                    {!user.avatarUrl && <User size={40} color="white" />}
                  </div>
                  <div style={{ flex: 1 }}>
                    <h2 style={{ margin: '0 0 6px 0', fontSize: 20, fontWeight: 800, color: colors.text }}>
                      {displayName}
                    </h2>
                    <p style={{ margin: 0, fontSize: 13, color: colors.textSecondary }}>
                      Your card appears in the Hall after you save.
                    </p>
                  </div>
                </div>

<div style={{ marginBottom: 16 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                    <span style={{ fontSize: 12, fontWeight: 700, color: colors.textSecondary }}>
                      Profile strength
                    </span>
                    <span style={{ fontSize: 12, fontWeight: 700, color: colors.textSecondary }}>
                      {myPreview.completeness}/8
                    </span>
                  </div>
                  <div style={{
                    height: 8,
                    borderRadius: 999,
                    background: colors.panel,
                    overflow: 'hidden',
                    border: '1px solid ' + colors.border
                  }}>
                    <div style={{
                      height: '100%',
                      width: completenessPercent + '%',
                      background: 'linear-gradient(90deg, ' + colors.primary + ', #6da9ff)',
                      transition: 'width 0.2s ease'
                    }} />
                  </div>
                </div>

<div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
                  <button
                    onClick={handleSave}
                    disabled={!hasChanges}
                    style={{
                      background: hasChanges ? colors.primary : colors.panel,
                      color: hasChanges ? 'white' : colors.textSecondary,
                      border: 'none',
                      borderRadius: 12,
                      padding: '12px 18px',
                      fontSize: 13,
                      fontWeight: 800,
                      cursor: hasChanges ? 'pointer' : 'not-allowed',
                      boxShadow: hasChanges ? '0 8px 18px rgba(10, 102, 194, 0.25)' : 'none'
                    }}
                  >
                    {myPreview.hasContent ? 'Update my card' : 'Publish my card'}
                  </button>
                  <span style={{ fontSize: 12, color: colors.textSecondary }}>
                    {hasChanges ? 'Unsaved edits' : 'All caught up'}
                  </span>
                </div>
              </div>

<div style={{
                background: colors.surface,
                borderRadius: 16,
                padding: 20,
                border: '1px solid ' + colors.border,
                marginBottom: 16
              }}>
                <div style={{ marginBottom: 20 }}>
                  <label style={{
                    fontSize: 12,
                    fontWeight: 700,
                    color: colors.textSecondary,
                    display: 'block',
                    marginBottom: 8
                  }}>
                    Headline *
                  </label>
                  <input
                    type="text"
                    value={draftProfile.headline}
                    onChange={function(e) { updateField('headline', e.target.value); }}
                    placeholder="e.g., Professional Meeting Avoider | Chief Procrastination Officer"
                    style={{
                      width: '100%',
                      background: colors.surface,
                      border: '1px solid ' + colors.border,
                      borderRadius: 10,
                      padding: '12px 14px',
                      fontSize: 14,
                      color: colors.text,
                      outline: 'none',
                      boxSizing: 'border-box'
                    }}
                  />
                </div>

<div style={{ marginBottom: 20 }}>
                  <label style={{
                    fontSize: 12,
                    fontWeight: 700,
                    color: colors.warning,
                    display: 'flex',
                    alignItems: 'center',
                    gap: 6,
                    marginBottom: 12
                  }}>
                    <XCircle size={14} /> Top 3 Reasons NOT to Hire You
                  </label>
                  {draftProfile.reasons.map(function(reason, i) {
                    var placeholders = [
                      'I will definitely steal your lunch from the fridge...',
                      'I reply-all to EVERYTHING...',
                      'My "quick" questions take 45 minutes...'
                    ];
                    return (
                      <div key={i} style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
                        <span style={{
                          width: 24,
                          height: 24,
                          borderRadius: '50%',
                          background: colors.warning,
                          color: 'white',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: 12,
                          fontWeight: 700,
                          flexShrink: 0
                        }}>{i + 1}</span>
                        <input
                          type="text"
                          value={reason}
                          onChange={function(e) { updateReason(i, e.target.value); }}
                          placeholder={placeholders[i]}
                          style={{
                            flex: 1,
                            background: colors.surface,
                            border: '1px solid ' + colors.border,
                            borderRadius: 10,
                            padding: '12px 14px',
                            fontSize: 14,
                            color: colors.text,
                            outline: 'none',
                            boxSizing: 'border-box'
                          }}
                        />
                      </div>
                    );
                  })}
                </div>

<div style={{ display: 'grid', gap: 16 }}>
                  <div>
                    <label style={{
                      fontSize: 12,
                      fontWeight: 700,
                      color: colors.textSecondary,
                      display: 'block',
                      marginBottom: 8
                    }}>
                      Biggest Work Pet Peeve
                    </label>
                    <input
                      type="text"
                      value={draftProfile.petPeeve}
                      onChange={function(e) { updateField('petPeeve', e.target.value); }}
                      placeholder="People who show up on time to meetings..."
                      style={{
                        width: '100%',
                        background: colors.surface,
                        border: '1px solid ' + colors.border,
                        borderRadius: 10,
                        padding: '12px 14px',
                        fontSize: 14,
                        color: colors.text,
                        outline: 'none',
                        boxSizing: 'border-box'
                      }}
                    />
                  </div>

<div>
                    <label style={{
                      fontSize: 12,
                      fontWeight: 700,
                      color: colors.textSecondary,
                      display: 'block',
                      marginBottom: 8
                    }}>
                      Skill You Pretend to Have
                    </label>
                    <input
                      type="text"
                      value={draftProfile.fakeSkill}
                      onChange={function(e) { updateField('fakeSkill', e.target.value); }}
                      placeholder="Excel (I can open it)..."
                      style={{
                        width: '100%',
                        background: colors.surface,
                        border: '1px solid ' + colors.border,
                        borderRadius: 10,
                        padding: '12px 14px',
                        fontSize: 14,
                        color: colors.text,
                        outline: 'none',
                        boxSizing: 'border-box'
                      }}
                    />
                  </div>

<div>
                    <label style={{
                      fontSize: 12,
                      fontWeight: 700,
                      color: colors.textSecondary,
                      display: 'block',
                      marginBottom: 8
                    }}>
                      Your Weird Office Quirk
                    </label>
                    <input
                      type="text"
                      value={draftProfile.quirk}
                      onChange={function(e) { updateField('quirk', e.target.value); }}
                      placeholder="Audibly sighs during every Zoom call..."
                      style={{
                        width: '100%',
                        background: colors.surface,
                        border: '1px solid ' + colors.border,
                        borderRadius: 10,
                        padding: '12px 14px',
                        fontSize: 14,
                        color: colors.text,
                        outline: 'none',
                        boxSizing: 'border-box'
                      }}
                    />
                  </div>
                </div>
              </div>

<div style={{
                background: '#fff8e6',
                borderRadius: 12,
                padding: 14,
                border: '1px solid #f5d97e',
                display: 'flex',
                alignItems: 'center',
                gap: 12
              }}>
                <AlertCircle size={20} color="#b38600" />
                <div>
                  <p style={{ margin: 0, fontSize: 13, color: '#7a5c00', fontWeight: 600 }}>
                    Disclaimer: May cause unintentional unemployment
                  </p>
                  <p style={{ margin: '4px 0 0 0', fontSize: 11, color: '#997300' }}>
                    Share at your own risk. We are not liable for any career setbacks.
                  </p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
</article></body></html>