// TownPost screens — events, marketplace, map, profile

// ─── Events ──────────────────────────
function ScreenEvents({ onNav = () => {} }) {
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <TPTopBar
        title="Events"
        subtitle="THIS WEEK · 12 NEAR YOU"
        leading={<button style={{ width: 32, height: 32, borderRadius: '50%', background: TP.paper, border: `1px solid ${TP.hairline}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><TPIcon name="chevronLeft" size={18} color={TP.ink} /></button>}
        trailing={<button style={{ width: 32, height: 32, borderRadius: '50%', background: TP.paper, border: `1px solid ${TP.hairline}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><TPIcon name="plus" size={18} color={TP.ink} /></button>}
      />
      <div style={{ display: 'flex', gap: 6, padding: '10px 16px', overflowX: 'auto', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        {['All', 'Free', 'Music', 'Civic', 'Kids', 'Outdoors', 'Food'].map((l, i) => (
          <button key={l} style={{
            flexShrink: 0, padding: '6px 12px', borderRadius: TP.r.pill,
            border: `1px solid ${i === 0 ? TP.ink : TP.hairlineStrong}`,
            background: i === 0 ? TP.ink : 'transparent',
            color: i === 0 ? TP.cream : TP.inkSoft,
            fontFamily: TP.sans, fontSize: 12, fontWeight: 600,
          }}>{l}</button>
        ))}
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '4px 0 12px' }}>
        {/* Featured event */}
        <div style={{ margin: '12px 16px 18px', borderRadius: TP.r.lg, overflow: 'hidden', background: TP.paper, border: `1px solid ${TP.hairline}` }}>
          <TPImage label="OLD MILL JAZZ · SAT" height={150} hue={1} radius={0} />
          <div style={{ padding: '12px 14px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <TPChip tone="terra" size="sm">Featured</TPChip>
              <span style={{ fontFamily: TP.mono, fontSize: 10, color: TP.terracotta, fontWeight: 700, letterSpacing: 1 }}>SAT MAY 03 · 6 PM</span>
            </div>
            <div style={{ fontFamily: TP.serif, fontSize: 22, color: TP.ink, lineHeight: 1.15, letterSpacing: -0.3, marginBottom: 4 }}>Old Mill jazz under the trees</div>
            <div style={{ fontFamily: TP.sans, fontSize: 12.5, color: TP.muted, marginBottom: 10 }}>Old Mill Park · Free · BYO blanket</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'flex' }}>
                {[1,2,3,4].map(i => <div key={i} style={{ marginLeft: i === 1 ? 0 : -8 }}><TPAvatar name={`P${i}`} hue={i} size={24} /></div>)}
              </div>
              <span style={{ fontFamily: TP.sans, fontSize: 12, color: TP.inkSoft, fontWeight: 600 }}>211 going</span>
              <button style={{ marginLeft: 'auto', padding: '8px 18px', borderRadius: TP.r.pill, background: TP.forest, color: TP.cream, border: 'none', fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600 }}>RSVP</button>
            </div>
          </div>
        </div>

        <div style={{ padding: '0 16px 8px', display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 16, height: 1, background: TP.ink }} />
          <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.ink, letterSpacing: 1.4, textTransform: 'uppercase' }}>This week</div>
          <div style={{ flex: 1, height: 1, background: TP.hairline }} />
        </div>

        {EVENTS.map(e => (
          <div key={e.id} style={{
            display: 'flex', gap: 12, padding: '12px 16px',
            background: TP.paper, borderBottom: `1px solid ${TP.hairline}`, alignItems: 'center',
          }}>
            <div style={{
              width: 56, height: 64, borderRadius: TP.r.md, background: TP.cream,
              border: `1px solid ${TP.hairline}`, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <div style={{ fontFamily: TP.mono, fontSize: 9, fontWeight: 700, color: TP.terracotta, letterSpacing: 1 }}>{e.day}</div>
              <div style={{ fontFamily: TP.serif, fontSize: 26, color: TP.ink, lineHeight: 1, letterSpacing: -0.4 }}>{e.date}</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: TP.serif, fontSize: 17, color: TP.ink, lineHeight: 1.2, letterSpacing: -0.1 }}>{e.title}</div>
              <div style={{ fontFamily: TP.sans, fontSize: 12, color: TP.muted, marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
                <TPIcon name="location" size={11} stroke={2} /> {e.loc} · {e.time}
              </div>
              <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.forest, fontWeight: 600, marginTop: 4 }}>{e.going} going</div>
            </div>
            <button style={{ padding: '6px 12px', borderRadius: TP.r.pill, border: `1px solid ${TP.hairlineStrong}`, background: 'transparent', fontFamily: TP.sans, fontSize: 11.5, fontWeight: 600, color: TP.inkSoft }}>RSVP</button>
          </div>
        ))}
      </div>
      <TPTabBar active="" onChange={onNav} />
    </div>
  );
}

// ─── Marketplace ──────────────────────────
function ScreenMarket({ onNav = () => {}, onTap = () => {}, onSell = () => {} }) {
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <TPTopBar
        title="Marketplace"
        subtitle="240 ITEMS · 0.5MI"
        leading={<button style={{ width: 32, height: 32, borderRadius: '50%', background: TP.paper, border: `1px solid ${TP.hairline}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><TPIcon name="chevronLeft" size={18} color={TP.ink} /></button>}
        trailing={<button onClick={() => { onTap('market-sell'); onSell(); }} style={{ padding: '6px 12px', borderRadius: TP.r.pill, background: TP.forest, color: TP.cream, border: 'none', fontFamily: TP.sans, fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}><TPIcon name="plus" size={12} color={TP.cream} stroke={2.4} /> Sell</button>}
      />
      <div style={{ padding: '12px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}`, display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, background: TP.cream, borderRadius: TP.r.pill, padding: '8px 14px' }}>
          <TPIcon name="search" size={14} color={TP.muted} />
          <span style={{ fontFamily: TP.sans, fontSize: 12.5, color: TP.muted }}>Search items, "free", brand…</span>
        </div>
        <button style={{ width: 36, height: 36, borderRadius: '50%', background: TP.cream, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <TPIcon name="filter" size={15} color={TP.ink} />
        </button>
      </div>
      {/* Category chips — Facebook-style with icon glyphs */}
      <div style={{ display: 'flex', gap: 8, padding: '12px 14px', overflowX: 'auto', background: TP.paper, borderBottom: `1px solid ${TP.hairline}`, scrollbarWidth: 'none' }}>
        {[
          { l: 'All', icon: 'catAll' },
          { l: 'Free', icon: 'catFree' },
          { l: 'Furniture', icon: 'catFurniture' },
          { l: 'Bikes', icon: 'catBike' },
          { l: 'Kids', icon: 'catKids' },
          { l: 'Plants', icon: 'catPlants' },
          { l: 'Home', icon: 'catHome' },
          { l: 'Tools', icon: 'catTools' },
          { l: 'Apparel', icon: 'catApparel' },
          { l: 'Music', icon: 'catMusic' },
        ].map((c, i) => {
          const active = i === 0;
          return (
            <button key={c.l} style={{
              flexShrink: 0, display: 'flex', alignItems: 'center', gap: 7,
              padding: '7px 13px 7px 9px', borderRadius: TP.r.pill,
              border: `1px solid ${active ? TP.ink : TP.hairlineStrong}`,
              background: active ? TP.ink : TP.paper,
              color: active ? TP.cream : TP.ink,
              fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600,
              cursor: 'pointer', letterSpacing: -0.1,
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: '50%',
                background: active ? 'rgba(247,243,234,0.18)' : TP.cream,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <TPIcon name={c.icon} size={13} color={active ? TP.cream : TP.ink} stroke={1.8} />
              </span>
              {c.l}
            </button>
          );
        })}
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: 12 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {MARKET.map(m => {
            const catIconMap = { Furniture: 'catFurniture', Bikes: 'catBike', Kids: 'catKids', Home: 'catHome', Plants: 'catPlants', Music: 'catMusic', Apparel: 'catApparel', Tools: 'catTools' };
            const catIcon = catIconMap[m.cat] || 'catAll';
            const tints = [
              ['#E8DFCE', '#9C8E72'], // tan
              ['#DCE6D5', '#5D7349'], // sage
              ['#F0DBC8', '#A8551E'], // peach
              ['#D9DEE6', '#4A6B89'], // sky
              ['#E4D5C4', '#7A5410'], // wheat
              ['#D5DDD0', '#3F7A3A'], // moss
              ['#F2DDD8', '#8B2A20'], // rose
              ['#E5DDEC', '#5C3A78'], // plum
            ];
            const [bg, fg] = tints[m.hue % tints.length];
            const isFree = m.price === 'FREE';
            return (
              <div key={m.id} onClick={() => onTap(m)} style={{ background: TP.paper, borderRadius: 14, overflow: 'hidden', cursor: 'pointer', boxShadow: '0 1px 0 rgba(31,27,22,0.04)' }}>
                <div style={{ position: 'relative', aspectRatio: '1 / 1', background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                  {/* Soft inner gradient for depth */}
                  <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.25) 0%, transparent 60%)`, pointerEvents: 'none' }} />
                  {/* Category glyph as silhouette */}
                  <div style={{ opacity: 0.32 }}>
                    <TPIcon name={catIcon} size={64} color={fg} stroke={1.4} />
                  </div>
                  {/* Save button */}
                  <button onClick={(e) => { e.stopPropagation(); onTap('market-save'); }} style={{ position: 'absolute', top: 8, right: 8, width: 30, height: 30, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
                    <TPIcon name="heart" size={14} color={TP.ink} stroke={1.8} />
                  </button>
                </div>
                <div style={{ padding: '10px 12px 12px' }}>
                  <div style={{ fontFamily: TP.sans, fontSize: 15, color: TP.ink, fontWeight: 700, lineHeight: 1, letterSpacing: -0.2, marginBottom: 5 }}>
                    {isFree ? <span style={{ color: TP.forest }}>Free</span> : m.price}
                  </div>
                  <div style={{ fontFamily: TP.sans, fontSize: 12.5, color: TP.ink, lineHeight: 1.3, marginBottom: 4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', minHeight: 32 }}>{m.title}</div>
                  <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted }}>
                    {m.loc} · {m.time}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <TPTabBar active="market" onChange={onNav} />
    </div>
  );
}

// ─── Map view ──────────────────────────
function ScreenMap({ onNav = () => {} }) {
  return (
    <div style={{ background: '#E8DFCE', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
      {/* Map */}
      <div style={{ flex: 1, position: 'relative' }}>
        <MapBackdrop />
        {/* Many pins */}
        <Pin x={50} y={120} kind="alert" />
        <Pin x={120} y={80} kind="event" />
        <Pin x={80} y={200} kind="post" />
        <Pin x={180} y={150} kind="market" />
        <Pin x={240} y={90} kind="post" />
        <Pin x={300} y={180} kind="event" />
        <Pin x={210} y={260} kind="market" />
        <Pin x={130} y={300} kind="alert" />
        <Pin x={270} y={350} kind="post" />
        <Pin x={70} y={380} kind="market" />
        <Pin x={320} y={420} kind="event" />

        {/* You marker */}
        <div style={{ position: 'absolute', left: 'calc(50% - 14px)', top: '40%' }}>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(45,80,22,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 12, height: 12, borderRadius: '50%', background: TP.forest, border: '2px solid #fff', boxShadow: '0 1px 4px rgba(0,0,0,0.25)' }} />
          </div>
        </div>

        {/* Search */}
        <div style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', gap: 8 }}>
          <div style={{ flex: 1, background: TP.paper, padding: '10px 14px', borderRadius: TP.r.pill, display: 'flex', alignItems: 'center', gap: 8, boxShadow: '0 4px 14px rgba(0,0,0,0.08)' }}>
            <TPIcon name="search" size={16} color={TP.muted} />
            <span style={{ fontFamily: TP.sans, fontSize: 13, color: TP.inkSoft, flex: 1 }}>Belleville & Surrounding Area</span>
            <TPIcon name="close" size={14} color={TP.muted} />
          </div>
          <button style={{ width: 42, height: 42, borderRadius: '50%', background: TP.paper, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 14px rgba(0,0,0,0.08)' }}>
            <TPIcon name="filter" size={17} color={TP.ink} />
          </button>
        </div>

        {/* Filter pills */}
        <div style={{ position: 'absolute', top: 70, left: 0, right: 0, display: 'flex', gap: 6, padding: '0 14px', overflowX: 'auto' }}>
          {[
            { l: 'Radar', t: 'red', n: 3 },
            { l: 'Posts', t: 'forest', n: 247 },
            { l: 'Events', t: 'ochre', n: 12 },
            { l: 'For sale', t: 'terra', n: 38 },
          ].map(f => (
            <button key={f.l} style={{
              flexShrink: 0, background: TP.paper, padding: '6px 11px',
              borderRadius: TP.r.pill, border: 'none',
              boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
              fontFamily: TP.sans, fontSize: 12, fontWeight: 600, color: TP.inkSoft,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: f.t === 'red' ? TP.alertRed : f.t === 'forest' ? TP.forest : f.t === 'ochre' ? TP.ochre : TP.terracotta }} />
              {f.l}
              <span style={{ fontFamily: TP.mono, fontSize: 10, color: TP.muted }}>{f.n}</span>
            </button>
          ))}
        </div>

        {/* Layer / locate buttons */}
        <div style={{ position: 'absolute', bottom: 220, right: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button style={{ width: 42, height: 42, borderRadius: '50%', background: TP.paper, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 14px rgba(0,0,0,0.08)' }}>
            <TPIcon name="map" size={18} color={TP.ink} />
          </button>
          <button style={{ width: 42, height: 42, borderRadius: '50%', background: TP.paper, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 14px rgba(0,0,0,0.08)' }}>
            <TPIcon name="location" size={18} color={TP.forest} />
          </button>
        </div>
      </div>

      {/* Bottom sheet */}
      <div style={{
        background: TP.paper, borderTopLeftRadius: 20, borderTopRightRadius: 20,
        boxShadow: '0 -8px 24px rgba(0,0,0,0.1)', maxHeight: 240, overflow: 'hidden',
      }}>
        <div style={{ padding: '8px 0 6px', display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: 36, height: 4, borderRadius: 2, background: TP.hairlineStrong }} />
        </div>
        <div style={{ padding: '0 16px 8px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: TP.serif, fontSize: 18, color: TP.ink, letterSpacing: -0.2 }}>Nearby right now</div>
          <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted }}>11 within 0.5 mi</div>
        </div>
        <div style={{ overflowY: 'auto' }}>
          <NearbyItem icon="alert" tone="red" title="Water main break · Beckett Ave" meta="0.3 mi · 4 min ago" />
          <NearbyItem icon="calendar" tone="ochre" title="Farmers market · Linden Sq" meta="0.4 mi · today 4 PM" />
          <NearbyItem icon="paw" tone="amber" title="Lost cat: Pickle, small grey" meta="0.4 mi · Riverside" last />
        </div>
      </div>

      <TPTabBar active="" onChange={onNav} />
    </div>
  );
}

// ─── Profile / My neighborhood ──────────────────────────
function ScreenProfile({ onNav = () => {} }) {
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Cover photo with overlaid back/settings buttons */}
        <div style={{ position: 'relative', height: 110 }}>
          <TPImage label="" height={110} hue={5} kind="stripe" radius={0} />
          <button style={{ position: 'absolute', top: 12, left: 12, width: 34, height: 34, borderRadius: '50%', background: 'rgba(28, 22, 18, 0.55)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backdropFilter: 'blur(6px)' }}>
            <TPIcon name="chevronLeft" size={18} color="#fff" />
          </button>
          <button style={{ position: 'absolute', top: 12, right: 12, width: 34, height: 34, borderRadius: '50%', background: 'rgba(28, 22, 18, 0.55)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backdropFilter: 'blur(6px)' }}>
            <TPIcon name="settings" size={16} color="#fff" />
          </button>
        </div>

        {/* Identity block — avatar overlaps cover, name on its own line below */}
        <div style={{ background: TP.paper, padding: '0 18px 16px', borderBottom: `1px solid ${TP.hairline}` }}>
          {/* Avatar — overlaps cover with paper ring */}
          <div style={{ marginTop: -34, marginBottom: 10, padding: 3, background: TP.paper, borderRadius: '50%', width: 76, height: 76, boxSizing: 'border-box' }}>
            <TPAvatar name="Dev Krishnan" hue={2} size={70} />
          </div>

          {/* Name — own row, full width */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
            <span style={{ fontFamily: TP.serif, fontSize: 22, color: TP.ink, lineHeight: 1.15, letterSpacing: -0.3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Dev Krishnan</span>
            <div style={{ width: 17, height: 17, borderRadius: '50%', background: TP.forest, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <TPIcon name="check" size={10} stroke={3} color="#fff" />
            </div>
          </div>
          <div style={{ fontFamily: TP.sans, fontSize: 12.5, color: TP.muted, marginBottom: 10 }}>@devk · joined Apr 2024</div>

          <div style={{ fontFamily: TP.sans, fontSize: 13, color: TP.inkSoft, lineHeight: 1.5, marginBottom: 12 }}>
            New to Eastgate. Software, old houses, coffee with too much milk. Looking for a soccer pickup game.
          </div>

          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
            <TPChip tone="forest" icon="location" size="sm">Belleville & Surrounding Area</TPChip>
            <TPChip tone="default" icon="briefcase" size="sm">Software engineer</TPChip>
          </div>

          {/* Followers row — single line, no wrapping */}
          <div style={{ display: 'flex', gap: 16, fontFamily: TP.sans, fontSize: 12.5, color: TP.inkSoft, marginBottom: 14, whiteSpace: 'nowrap' }}>
            <span><b style={{ color: TP.ink, fontWeight: 700 }}>284</b> <span style={{ color: TP.muted }}>following</span></span>
            <span><b style={{ color: TP.ink, fontWeight: 700 }}>1,247</b> <span style={{ color: TP.muted }}>neighbors</span></span>
          </div>

          {/* Action buttons */}
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ flex: 1, padding: '10px 14px', borderRadius: TP.r.md, background: TP.forest, color: TP.cream, border: 'none', fontFamily: TP.sans, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>+ Follow</button>
            <button style={{ flex: 1, padding: '10px 14px', borderRadius: TP.r.md, background: 'transparent', color: TP.ink, border: `1px solid ${TP.hairlineStrong}`, fontFamily: TP.sans, fontSize: 13, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
              <TPIcon name="chat" size={13} stroke={2} color={TP.ink} />
              Message
            </button>
          </div>
        </div>

        {/* Trust / reputation card — flat, not gradient */}
        <div style={{ padding: 16, borderBottom: `1px solid ${TP.hairline}`, background: TP.paper }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <TPIcon name="shield" size={14} color={TP.terracotta} stroke={2} />
            <span style={{ fontFamily: TP.mono, fontSize: 10.5, color: TP.terracotta, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>Trust & reputation</span>
            <div style={{ flex: 1, height: 1, background: TP.hairline }} />
          </div>
          <div style={{
            border: `1px solid ${TP.hairlineStrong}`,
            borderRadius: TP.r.lg, padding: 14,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            {/* Trust score badge */}
            <div style={{ position: 'relative', width: 60, height: 60, flexShrink: 0 }}>
              <svg width="60" height="60" viewBox="0 0 60 60">
                <circle cx="30" cy="30" r="26" fill="none" stroke={TP.hairlineStrong} strokeWidth="3.5" />
                <circle cx="30" cy="30" r="26" fill="none" stroke={TP.terracotta} strokeWidth="3.5"
                  strokeDasharray={`${2 * Math.PI * 26 * 0.94} ${2 * Math.PI * 26}`}
                  strokeLinecap="round" transform="rotate(-90 30 30)" />
              </svg>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ fontFamily: TP.serif, fontSize: 20, color: TP.ink, lineHeight: 1, letterSpacing: -0.5 }}>4.8</div>
                <div style={{ fontFamily: TP.mono, fontSize: 8, color: TP.muted, fontWeight: 700, letterSpacing: 0.6, marginTop: 1 }}>/ 5.0</div>
              </div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: TP.sans, fontSize: 13.5, color: TP.ink, fontWeight: 600, marginBottom: 3 }}>Highly trusted</div>
              <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, lineHeight: 1.4, marginBottom: 6 }}>
                Based on 47 trust ratings over 2 years.
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
                {[1, 2, 3, 4, 5].map(i => (
                  <svg key={i} width="11" height="11" viewBox="0 0 24 24">
                    <path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z" fill={i <= 4 ? TP.terracotta : TP.terracotta + '40'} />
                  </svg>
                ))}
              </div>
            </div>
          </div>
          {/* Reputation badges — grid so nothing clips */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 12 }}>
            <RepBadge icon="helpful" label="Helpful" count="32" tone="forest" />
            <RepBadge icon="shield" label="Reliable" count="18" tone="terra" />
            <RepBadge icon="leaf" label="Local expert" count="9" tone="ochre" />
            <RepBadge icon="check" label="Verified ID" count="" tone="forest" />
          </div>
          {/* Give trust CTA */}
          <button style={{
            marginTop: 12, width: '100%', padding: '11px 14px',
            borderRadius: TP.r.md, background: 'transparent', color: TP.terracotta, border: `1px solid ${TP.terracotta}55`,
            fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, cursor: 'pointer',
          }}>
            <TPIcon name="plus" size={13} stroke={2.5} color={TP.terracotta} />
            Give Dev a trust rating
          </button>
        </div>

        {/* Activity stats — social media style */}
        <div style={{ display: 'flex', background: TP.paper, padding: '14px 0', borderBottom: `1px solid ${TP.hairline}` }}>
          <NumStat n="34" l="posts" />
          <Divider />
          <NumStat n="412" l="helpful votes" />
          <Divider />
          <NumStat n="2.1K" l="profile views" />
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', background: TP.paper, borderBottom: `1px solid ${TP.hairline}`, position: 'sticky', top: 0, zIndex: 5 }}>
          {['Posts', 'Replies', 'Trust', 'About'].map((l, i) => (
            <div key={l} style={{
              flex: 1, textAlign: 'center', padding: '12px 0',
              fontFamily: TP.sans, fontSize: 13, fontWeight: 600,
              color: i === 0 ? TP.ink : TP.muted,
              borderBottom: i === 0 ? `2px solid ${TP.terracotta}` : '2px solid transparent',
            }}>{l}</div>
          ))}
        </div>

        <TPPostCompact post={FEED[3]} />
        <TPPostCompact post={{...FEED[5], author: 'Dev Krishnan', hue: 2, neighborhood: 'Belleville & Surrounding Area', text: 'Anyone know what those small white flowers are that come up by the library steps every spring? I keep meaning to look it up and forgetting until next year.', tag: 'Question', tagIcon: 'question'}} />
        <TPPostRich post={{...FEED[4], author: 'Dev Krishnan', hue: 2, neighborhood: 'Belleville & Surrounding Area'}} />
      </div>

      <TPTabBar active="" onChange={onNav} />
    </div>
  );
}

function RepBadge({ icon, label, count, tone }) {
  const tones = {
    forest: { bg: TP.forestTint, fg: TP.forest },
    terra: { bg: TP.redTint, fg: TP.terracotta },
    ochre: { bg: TP.amberTint, fg: TP.ochre },
  };
  const t = tones[tone] || tones.forest;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 6,
      padding: '7px 10px', borderRadius: TP.r.md,
      background: t.bg, border: `1px solid ${t.fg}22`,
      fontFamily: TP.sans, fontSize: 11.5, color: t.fg, fontWeight: 600,
      minWidth: 0,
    }}>
      <TPIcon name={icon} size={12} stroke={2} color={t.fg} />
      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{label}</span>
      {count && <span style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, opacity: 0.7, flexShrink: 0 }}>{count}</span>}
    </div>
  );
}

Object.assign(window, { ScreenEvents, ScreenMarket, ScreenMap, ScreenProfile });