// screens-other-profile.jsx — Bottom sheet for viewing someone else's profile.

function OtherProfileSheet({ user, behindRun, onClose, onReportBlock, isHost }) {
  const firstName = user.name.split(' ')[0];
  const lastInitial = user.name.split(' ')[1] ? user.name.split(' ')[1].charAt(0) + '.' : '';
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 20,
      color: PACER.text, fontFamily: PACER.font,
    }}>
      {/* dimmed backdrop */}
      <div onClick={onClose} style={{
        position: 'absolute', inset: 0,
        background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
      }}/>

      {/* sheet */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: PACER.bg, borderTopLeftRadius: 26, borderTopRightRadius: 26,
        boxShadow: '0 -20px 60px rgba(0,0,0,0.6)',
        borderTop: `1px solid ${PACER.borderStrong}`,
        padding: '14px 20px 34px',
      }}>
        {/* drag handle */}
        <div onClick={onClose} style={{
          width: 40, height: 4, borderRadius: 99, background: PACER.borderStrong,
          margin: '0 auto 20px', cursor: 'pointer',
        }}/>

        {/* Identity row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
          <Avatar name={user.name} size={56} photo/>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: -0.3 }}>
                {firstName} {lastInitial}
              </span>
              <span style={{ fontSize: 11, color: PACER.lime, fontWeight: 600, letterSpacing: 0.4 }}>
                ✓ VERIFIED
              </span>
            </div>
            <div style={{ fontFamily: PACER.mono, fontSize: 11.5, color: PACER.textDim, marginTop: 2 }}>
              {user.pace}/km · {user.neighborhood}
            </div>
          </div>
        </div>

        {/* Mutual runs */}
        <div style={{
          background: PACER.limeSoft, border: `1px solid ${PACER.limeBorder}`,
          borderRadius: 14, padding: '12px 14px', marginBottom: 14,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <Icon name="run" size={16} color={PACER.lime}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, color: PACER.lime, fontWeight: 600 }}>
              You've run together 2 times
            </div>
            <div style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.lime, opacity: 0.85, marginTop: 1 }}>
              Last · Sat 10 May · 5K Clapham loop
            </div>
          </div>
        </div>

        {/* Stats */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
          {[
            { l: 'Attended', v: user.attended },
            { l: 'Hosted', v: user.hosted },
            { l: 'Member', v: user.member || '2 mo' },
          ].map(s => (
            <div key={s.l} style={{
              flex: 1, background: PACER.card, border: `1px solid ${PACER.border}`,
              borderRadius: 12, padding: '10px 8px', textAlign: 'left',
            }}>
              <div style={{ fontFamily: PACER.mono, fontSize: 18, fontWeight: 500, color: PACER.text }}>{s.v}</div>
              <div style={{ fontSize: 10.5, color: PACER.textMute, marginTop: 3, letterSpacing: 0.4, textTransform: 'uppercase' }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Report or block */}
        <button onClick={onReportBlock} style={{
          width: '100%', background: 'rgba(255,95,95,0.06)',
          border: `1px solid rgba(255,95,95,0.18)`, borderRadius: 14,
          color: '#ff7a7a', fontSize: 13.5, fontWeight: 500, cursor: 'pointer',
          padding: '13px', fontFamily: PACER.font,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
        }}>
          <Icon name="flag" size={14} color="#ff7a7a"/>
          Report or block {firstName}
        </button>
      </div>
    </div>
  );
}

function OtherProfileFull_UNUSED({ user }) {
  return (
    <div style={{
      background: PACER.bg, height: '100%', overflowY: 'auto', color: PACER.text, fontFamily: PACER.font, position: 'relative',
    }}>
      {/* Top bar */}
      <div style={{ padding: `${SCREEN_TOP}px 16px 12px`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button style={{
          width: 40, height: 40, borderRadius: 12,
          background: 'rgba(255,255,255,0.04)', border: `1px solid ${PACER.border}`,
          color: PACER.text, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="chevL" size={20} color={PACER.text}/>
        </button>
        <div style={{ fontSize: 16, fontWeight: 600 }}>Profile</div>
        <button style={{
          width: 40, height: 40, borderRadius: 12,
          background: 'rgba(255,255,255,0.04)', border: `1px solid ${PACER.border}`,
          color: PACER.text, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="flag" size={16} color={PACER.textDim}/>
        </button>
      </div>

      <div style={{ padding: '12px 20px 30px' }}>
        {/* Hero identity */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: 24 }}>
          <Avatar name={user.name} size={96} photo/>
          <div style={{ fontSize: 26, fontWeight: 600, marginTop: 14, letterSpacing: -0.6 }}>
            {user.name.split(' ')[0]} {user.name.split(' ')[1].charAt(0)}.
          </div>
          <div style={{ fontFamily: PACER.mono, fontSize: 12.5, color: PACER.textDim, marginTop: 4 }}>
            {user.pace}/km · {user.neighborhood}
          </div>
          <div style={{
            marginTop: 10, display: 'inline-flex', gap: 6, alignItems: 'center',
            fontSize: 11, color: PACER.lime, fontWeight: 600,
            background: PACER.limeSoft, padding: '4px 10px', borderRadius: 99,
            border: `1px solid ${PACER.limeBorder}`,
          }}>
            <Icon name="phone" size={10} color={PACER.lime}/>
            Phone verified
          </div>
        </div>

        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 24 }}>
          {[
            { l: 'Runs attended', v: user.attended },
            { l: 'Runs hosted', v: user.hosted },
            { l: 'Member', v: user.member || '2 mo' },
          ].map(s => (
            <div key={s.l} style={{
              background: PACER.card, border: `1px solid ${PACER.border}`,
              borderRadius: 14, padding: '14px 12px',
            }}>
              <div style={{ fontFamily: PACER.mono, fontSize: 22, fontWeight: 500, color: PACER.text }}>{s.v}</div>
              <div style={{ fontSize: 10.5, color: PACER.textMute, marginTop: 3, letterSpacing: 0.5, textTransform: 'uppercase' }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Mutual */}
        <div style={{
          background: PACER.limeSoft, border: `1px solid ${PACER.limeBorder}`,
          borderRadius: 14, padding: '12px 14px', marginBottom: 22,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <Icon name="run" size={16} color={PACER.lime}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, color: PACER.lime, fontWeight: 600 }}>
              You've run together 2 times
            </div>
            <div style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.lime, opacity: 0.85, marginTop: 1 }}>
              5K Clapham loop · Sat 10 May
            </div>
          </div>
        </div>

        {/* Section: usual runs (light data) */}
        <div style={{
          fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
          color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 10,
        }}>Usually runs</div>
        <div style={{ display: 'grid', gap: 8, marginBottom: 22 }}>
          {[
            { icon: 'pin', l: 'Clapham Common · Battersea Park' },
            { icon: 'clock', l: 'Weekday evenings · Saturday mornings' },
            { icon: 'run', l: '5K · 8K' },
          ].map(r => (
            <div key={r.l} style={{
              background: PACER.card, border: `1px solid ${PACER.border}`,
              borderRadius: 12, padding: '12px 14px',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <Icon name={r.icon} size={16} color={PACER.textDim}/>
              <span style={{ fontSize: 13.5, color: PACER.text }}>{r.l}</span>
            </div>
          ))}
        </div>

        <button style={{
          width: '100%', background: 'transparent',
          border: `1px solid rgba(255,95,95,0.2)`, borderRadius: 12,
          color: '#ff7a7a', fontSize: 13, fontWeight: 500, cursor: 'pointer',
          padding: '12px', fontFamily: PACER.font,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>
          <Icon name="flag" size={14} color="#ff7a7a"/>
          Report or block
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { OtherProfileSheet });