// TownPost screens — set 1: Dashboard variations + Feed variations

// ─── Dashboard A: Hub style with stats + alerts + events ──────────────────────────
function ScreenDashboardA({ onNav = () => {}, onOpenAlert, onOpenPost, onOpenEvents, onOpenMarket, onCompose, onSearch, onProfile, onNotifs, onMessages }) {
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '12px 16px 14px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <TPLogo size={36} showWordmark />
          <div style={{ flex: 1 }} />
          <button onClick={() => onMessages && onMessages()} style={{ width: 36, height: 36, borderRadius: '50%', border: `1px solid ${TP.hairlineStrong}`, background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', cursor: 'pointer' }}>
            <TPIcon name="mail" size={17} color={TP.ink} stroke={2} />
            <div style={{ position: 'absolute', top: -2, right: -2, minWidth: 16, height: 16, padding: '0 4px', borderRadius: 8, background: TP.terracotta, border: `1.5px solid ${TP.paper}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TP.sans, fontSize: 9.5, fontWeight: 700, color: '#fff' }}>7</div>
          </button>
          <button onClick={() => onNotifs && onNotifs()} style={{ width: 36, height: 36, borderRadius: '50%', border: `1px solid ${TP.hairlineStrong}`, background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', cursor: 'pointer' }}>
            <TPIcon name="bell" size={18} color={TP.ink} />
            <div style={{ position: 'absolute', top: 6, right: 6, width: 8, height: 8, borderRadius: '50%', background: TP.alertRed, border: `1.5px solid ${TP.paper}` }} />
          </button>
          <div onClick={() => onProfile && onProfile()} style={{ cursor: 'pointer' }}><TPAvatar name="Dev Krishnan" hue={2} size={36} /></div>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 12 }}>
          <div style={{ fontFamily: TP.serif, fontSize: 22, color: TP.ink, lineHeight: 1.05, letterSpacing: -0.3 }}>Good morning, Dev.</div>
          <div style={{ fontFamily: TP.mono, fontSize: 10, color: TP.muted, letterSpacing: 1.4, textTransform: 'uppercase', marginLeft: 'auto' }}>TUE · CLEAR · 64°</div>
        </div>
        <div style={{
          display: 'flex', gap: 8, alignItems: 'center',
          background: TP.cream, borderRadius: TP.r.pill, padding: '8px 14px',
        }}>
          <TPIcon name="search" size={16} color={TP.muted} />
          <span style={{ fontFamily: TP.sans, fontSize: 13, color: TP.muted, flex: 1 }}>Search Quinte West…</span>
          <TPIcon name="mic" size={16} color={TP.muted} />
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Neighborhood pill */}
        <div style={{ padding: '14px 16px 6px', display: 'flex', alignItems: 'center', gap: 8 }}>
          <TPChip tone="forest" icon="location" size="sm">Belleville & Surrounding Area</TPChip>
          <span style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted }}>+ 6 nearby</span>
          <span style={{ marginLeft: 'auto', fontFamily: TP.mono, fontSize: 10, color: TP.mutedSoft, letterSpacing: 1 }}>WK 18</span>
        </div>

        {/* Daily check-in / streak strip */}
        <div style={{ padding: '6px 16px 14px' }}>
          <div style={{
            background: TP.paper, borderRadius: TP.r.lg, padding: '12px 14px',
            border: `1px solid ${TP.hairline}`,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: 'linear-gradient(135deg, #F2D9A8, #E0B780)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <TPIcon name="fire" size={22} color="#8B4A1A" stroke={2.2} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontFamily: TP.serif, fontSize: 20, color: TP.ink, letterSpacing: -0.3 }}>12</span>
                <span style={{ fontFamily: TP.sans, fontSize: 12.5, color: TP.inkSoft, fontWeight: 600 }}>day streak</span>
              </div>
              <div style={{ display: 'flex', gap: 3, marginTop: 5 }}>
                {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, i) => {
                  const done = i < 5;
                  const today = i === 5;
                  return (
                    <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
                      <div style={{
                        width: 18, height: 18, borderRadius: 5,
                        background: done ? TP.forest : today ? 'transparent' : TP.cream,
                        border: today ? `1.5px dashed ${TP.terracotta}` : `1px solid ${done ? TP.forest : TP.hairlineStrong}`,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}>
                        {done && <TPIcon name="check" size={10} stroke={3} color="#fff" />}
                      </div>
                      <span style={{ fontFamily: TP.mono, fontSize: 8, color: today ? TP.terracotta : TP.muted, fontWeight: 700, letterSpacing: 0.4 }}>{d}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            <div style={{ flexShrink: 0, textAlign: 'right' }}>
              <div style={{ fontFamily: TP.mono, fontSize: 9, color: TP.muted, letterSpacing: 1.2, fontWeight: 700 }}>NEXT</div>
              <div style={{ fontFamily: TP.sans, fontSize: 12, color: TP.terracotta, fontWeight: 700 }}>Block champ</div>
              <div style={{ fontFamily: TP.sans, fontSize: 10, color: TP.muted }}>3 days away</div>
            </div>
          </div>
        </div>

        {/* Help your block — micro-tasks */}
        <TPSection title="Help your block" subtitle="3 quick wins">
          <div style={{
            display: 'flex', gap: 10, padding: '4px 16px 14px',
            overflowX: 'auto',
            scrollSnapType: 'x mandatory',
            scrollPaddingLeft: 16, scrollPaddingRight: 16,
          }}>
            {[
              { icon: 'question', tone: 'forest', label: 'Answer 1 question', sub: 'Marisol asked about plumbers', cta: 'Open' },
              { icon: 'handshake', tone: 'terra', label: 'Welcome a neighbor', sub: '4 just moved in nearby', cta: 'Say hi' },
              { icon: 'shield', tone: 'ochre', label: 'Verify an alert', sub: 'Confirm the road closure', cta: 'Verify' },
            ].map(t => {
              const tones = { forest: TP.forest, terra: TP.terracotta, ochre: TP.ochre };
              const tint = { forest: TP.forestTint, terra: TP.redTint, ochre: TP.amberTint };
              return (
                <div key={t.label} style={{
                  flexShrink: 0, width: 180,
                  background: TP.paper, border: `1px solid ${TP.hairline}`,
                  borderRadius: TP.r.lg, padding: 12,
                  display: 'flex', flexDirection: 'column', gap: 6,
                }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 8,
                    background: tint[t.tone], display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <TPIcon name={t.icon} size={14} color={tones[t.tone]} stroke={2} />
                  </div>
                  <div style={{ fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600, color: TP.ink, lineHeight: 1.25 }}>{t.label}</div>
                  <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted, lineHeight: 1.3, flex: 1 }}>{t.sub}</div>
                  <button style={{
                    alignSelf: 'flex-start',
                    padding: '5px 11px', borderRadius: TP.r.pill,
                    background: tones[t.tone], color: '#fff', border: 'none',
                    fontFamily: TP.sans, fontSize: 11, fontWeight: 600, cursor: 'pointer',
                  }}>{t.cta} →</button>
                </div>
              );
            })}
          </div>
        </TPSection>

        {/* Live signals on Radar */}
        <TPSection title="Radar — live near you" subtitle="3 signals">
          <div style={{ background: TP.paper, margin: '0 16px', borderRadius: TP.r.lg, overflow: 'hidden', border: `1px solid ${TP.hairline}` }}>
            <MiniAlert alert={ALERTS[0]} onTap={() => onOpenAlert && onOpenAlert(ALERTS[0])} />
            <MiniAlert alert={ALERTS[1]} onTap={() => onOpenAlert && onOpenAlert(ALERTS[1])} />
            <MiniAlert alert={ALERTS[2]} last onTap={() => onOpenAlert && onOpenAlert(ALERTS[2])} />
          </div>
        </TPSection>

        {/* Today's events */}
        <TPSection title="Today on your block" action="See all →">
          <div style={{
            display: 'flex', gap: 12, padding: '4px 16px 18px',
            overflowX: 'auto',
            scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch',
            scrollPaddingLeft: 16, scrollPaddingRight: 16,
          }}>
            {EVENTS.map((e, i) => (
              <div
                key={e.id}
                onClick={() => onOpenEvents && onOpenEvents()}
                style={{
                  scrollSnapAlign: 'start',
                  cursor: 'pointer',
                  flexShrink: 0,
                }}
              >
                <EventCard event={e} />
              </div>
            ))}
            <div style={{ flexShrink: 0, width: 96, display: 'flex', alignItems: 'stretch', justifyContent: 'center', scrollSnapAlign: 'end' }}>
              <button onClick={() => onOpenEvents && onOpenEvents()} style={{
                background: 'transparent', border: `1px dashed ${TP.hairlineStrong}`,
                borderRadius: TP.r.lg, padding: '14px 12px', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                fontFamily: TP.sans, fontSize: 11, fontWeight: 600, color: TP.muted,
              }}>
                <TPIcon name="arrowRight" size={18} color={TP.muted} stroke={2} />
                See all
              </button>
            </div>
          </div>
        </TPSection>

        <div style={{ height: 12 }} />
      </div>

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

function StatTile({ label, value, trend, tone, icon }) {
  const tones = {
    forest: { bg: TP.forestTint, fg: TP.forest },
    terra: { bg: TP.terracottaTint, fg: '#A8551E' },
    red: { bg: TP.redTint, fg: TP.alertRed },
    ochre: { bg: TP.ochreTint, fg: '#7A5410' },
  };
  const t = tones[tone];
  return (
    <div style={{
      background: TP.paper, borderRadius: TP.r.lg, padding: '12px 14px',
      border: `1px solid ${TP.hairline}`, display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: t.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', color: t.fg }}>
          <TPIcon name={icon} size={14} stroke={2.2} color={t.fg} />
        </div>
        <span style={{ fontFamily: TP.mono, fontSize: 9, color: TP.muted, letterSpacing: 0.6, textTransform: 'uppercase' }}>{trend}</span>
      </div>
      <div>
        <div style={{ fontFamily: TP.serif, fontSize: 28, color: TP.ink, lineHeight: 1, letterSpacing: -0.5 }}>{value}</div>
        <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted, marginTop: 4 }}>{label}</div>
      </div>
    </div>
  );
}

function MiniAlert({ alert, last, onTap }) {
  const tones = {
    red: TP.alertRed, amber: TP.alertAmber, blue: TP.alertBlue, forest: TP.forest,
  };
  const c = tones[alert.tone];
  return (
    <div onClick={onTap} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 12px', borderBottom: last ? 'none' : `1px solid ${TP.hairline}`, cursor: onTap ? 'pointer' : 'default' }}>
      <div style={{ width: 8, height: 8, borderRadius: '50%', background: c, flexShrink: 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: TP.sans, fontSize: 13, fontWeight: 600, color: TP.ink, lineHeight: 1.3, marginBottom: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{alert.title}</div>
        <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted }}>{alert.area} · {alert.time}</div>
      </div>
      <TPIcon name="chevronRight" size={14} color={TP.mutedSoft} />
    </div>
  );
}

function EventCard({ event }) {
  return (
    <div style={{
      flexShrink: 0, width: 180,
      background: TP.paper, borderRadius: TP.r.lg, overflow: 'hidden',
      border: `1px solid ${TP.hairline}`,
    }}>
      <TPImage label={event.title.toLowerCase()} height={84} hue={event.hue} radius={0} />
      <div style={{ padding: '10px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
          <span style={{ fontFamily: TP.mono, fontSize: 9, color: TP.terracotta, fontWeight: 700, letterSpacing: 1 }}>{event.day} {event.date}</span>
          <span style={{ fontFamily: TP.sans, fontSize: 10, color: TP.muted }}>· {event.time}</span>
        </div>
        <div style={{ fontFamily: TP.serif, fontSize: 15, color: TP.ink, lineHeight: 1.2, letterSpacing: -0.1, marginBottom: 4 }}>{event.title}</div>
        <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted, display: 'flex', alignItems: 'center', gap: 4 }}>
          <TPIcon name="location" size={10} stroke={2} /> {event.loc}
        </div>
      </div>
    </div>
  );
}

// ─── Dashboard B: Magazine / editorial style ──────────────────────────
function ScreenDashboardB({ onNav = () => {}, onOpenAlert, onOpenPost, onOpenEvents, onOpenMarket, onCompose, onProfile, onNotifs, onMessages }) {
  return (
    <div style={{ background: TP.paper, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '14px 16px 12px', borderBottom: `1px solid ${TP.hairline}` }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <TPLogo size={30} showWordmark />
          <TPAvatar name="Dev Krishnan" hue={2} size={36} />
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <div style={{ fontFamily: TP.mono, fontSize: 10, color: TP.muted, letterSpacing: 1.4, textTransform: 'uppercase' }}>TUE APR 28 · DAILY BLOCK</div>
          <div style={{ flex: 1, height: 1, background: TP.hairline, marginLeft: 4 }} />
        </div>
        <div style={{ fontFamily: TP.serif, fontSize: 32, color: TP.ink, lineHeight: 0.95, letterSpacing: -0.6, marginTop: 8 }}>The Daily Block</div>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Lead alert (editorial) */}
        <div onClick={() => onOpenAlert && onOpenAlert(ALERTS[0])} style={{
          background: `linear-gradient(180deg, ${TP.redTint} 0%, ${TP.paper} 100%)`,
          padding: '18px 16px 16px',
          borderBottom: `1px solid ${TP.hairline}`,
          cursor: 'pointer',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: TP.alertRed, animation: 'pulse 2s infinite' }} />
            <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.alertRed, letterSpacing: 1.4 }}>BREAKING · 4 MIN AGO</div>
          </div>
          <div style={{ fontFamily: TP.serif, fontSize: 24, color: TP.ink, lineHeight: 1.1, letterSpacing: -0.3, marginBottom: 6 }}>Water main break on Beckett Ave snarls Old Mill morning commute</div>
          <div style={{ fontFamily: TP.sans, fontSize: 13, color: TP.inkSoft, lineHeight: 1.5, marginBottom: 10 }}>Crews on scene. Low pressure expected for 4–6 hours west of the river. No boil-water advisory in effect.</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: TP.sans, fontSize: 11, color: TP.muted }}>
            <span>3,400 reading</span><span>·</span><span>147 replies</span>
            <span style={{ marginLeft: 'auto', color: TP.alertRed, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 3 }}>
              Read more <TPIcon name="arrowRight" size={12} stroke={2.2} color={TP.alertRed} />
            </span>
          </div>
        </div>

        {/* Quick stats strip */}
        <div style={{ padding: '14px 16px', display: 'flex', gap: 0, justifyContent: 'space-between', borderBottom: `1px solid ${TP.hairline}` }}>
          <NumStat n="14" l="new neighbors" />
          <Divider />
          <NumStat n="247" l="posts this wk" />
          <Divider />
          <NumStat n="3" l="on radar" />
          <Divider />
          <NumStat n="12" l="events" />
        </div>

        {/* Section: trending */}
        <div style={{ padding: '18px 16px 8px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <div style={{ width: 20, height: 1, background: TP.ink }} />
            <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.ink, letterSpacing: 1.4, textTransform: 'uppercase' }}>Trending in Quinte West</div>
            <div style={{ flex: 1, height: 1, background: TP.hairlineStrong }} />
          </div>
          <TrendItem n="01" topic="Linden Square fountain vote" posts="412 posts" />
          <TrendItem n="02" topic="Pelham Street bakery" posts="184 posts" />
          <TrendItem n="03" topic="Free trees Saturday" posts="156 posts" />
          <TrendItem n="04" topic="Peregrine falcon babies" posts="98 posts" />
        </div>

        {/* Today's pick (rich post) */}
        <div style={{ padding: '12px 16px 6px' }}>
          <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.terracotta, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 8 }}>Today's pick →</div>
        </div>
        <TPPostRich post={FEED[0]} onTap={() => onOpenPost && onOpenPost(FEED[0])} />

        <div style={{ height: 12 }} />
      </div>

      <style>{`@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }`}</style>
      <TPTabBar active="home" onChange={onNav} />
    </div>
  );
}

function NumStat({ n, l }) {
  return (
    <div style={{ flex: 1, textAlign: 'center' }}>
      <div style={{ fontFamily: TP.serif, fontSize: 22, color: TP.ink, lineHeight: 1, letterSpacing: -0.3 }}>{n}</div>
      <div style={{ fontFamily: TP.sans, fontSize: 10, color: TP.muted, marginTop: 4, textTransform: 'uppercase', letterSpacing: 0.4, fontWeight: 500 }}>{l}</div>
    </div>
  );
}
function Divider() { return <div style={{ width: 1, background: TP.hairline, alignSelf: 'stretch' }} />; }
function TrendItem({ n, topic, posts }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, padding: '10px 0', borderBottom: `1px solid ${TP.hairline}` }}>
      <div style={{ fontFamily: TP.mono, fontSize: 14, color: TP.terracotta, fontWeight: 700, width: 22 }}>{n}</div>
      <div style={{ flex: 1, fontFamily: TP.serif, fontSize: 16, color: TP.ink, letterSpacing: -0.1 }}>{topic}</div>
      <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted }}>{posts}</div>
    </div>
  );
}

// ─── Dashboard C: Map-first / spatial ──────────────────────────
function ScreenDashboardC({ onNav = () => {}, onOpenAlert, onOpenPost, onOpenEvents, onOpenMarket, onCompose, onProfile, onNotifs, onMessages }) {
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Top hero with map */}
      <div style={{ position: 'relative', height: 240, overflow: 'hidden' }}>
        <MapBackdrop />
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(180deg, rgba(245,239,230,0.0) 40%, ${TP.cream} 100%)`,
        }} />
        <div style={{ position: 'absolute', top: 14, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontFamily: TP.mono, fontSize: 10, color: TP.inkSoft, letterSpacing: 1.4, fontWeight: 600 }}>YOUR BLOCK · LIVE</div>
            <div style={{ fontFamily: TP.serif, fontSize: 26, color: TP.ink, lineHeight: 1, letterSpacing: -0.4, marginTop: 4 }}>Belleville & Surrounding Area</div>
          </div>
          <div style={{ background: TP.paper, padding: '6px 10px', borderRadius: TP.r.pill, border: `1px solid ${TP.hairline}`, display: 'flex', alignItems: 'center', gap: 5 }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: TP.goodGreen }} />
            <span style={{ fontFamily: TP.sans, fontSize: 11, fontWeight: 600, color: TP.ink }}>247 online</span>
          </div>
        </div>
        {/* Pins */}
        <Pin x={32} y={88} kind="alert" />
        <Pin x={68} y={104} kind="event" />
        <Pin x={88} y={150} kind="market" />
        <Pin x={20} y={140} kind="post" />
        <Pin x={52} y={170} kind="post" />
        <Pin x={138} y={62} kind="event" />
        {/* "you are here" */}
        <div style={{ position: 'absolute', left: 'calc(50% - 14px)', top: 110 }}>
          <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>
      </div>

      <div style={{ flex: 1, overflow: 'auto', marginTop: -28, position: 'relative', zIndex: 2 }}>
        {/* Quick actions */}
        <div style={{ display: 'flex', gap: 10, padding: '0 16px 14px', overflowX: 'auto' }}>
          <QuickAction icon="alert" label="Report" tone="red" onClick={() => onCompose && onCompose()} />
          <QuickAction icon="plus" label="Post" tone="forest" onClick={() => onCompose && onCompose()} />
          <QuickAction icon="question" label="Ask" tone="ochre" onClick={() => onCompose && onCompose()} />
          <QuickAction icon="tag" label="Sell" tone="terra" onClick={() => onOpenMarket && onOpenMarket()} />
          <QuickAction icon="calendar" label="Event" tone="blue" onClick={() => onOpenEvents && onOpenEvents()} />
        </div>

        {/* Live near you */}
        <TPSection title="Live near you" subtitle="within 0.4 mi">
          <NearbyItem icon="alert" tone="red" title="Tree down on Linden Pkwy" meta="0.2 mi · 22 min" onClick={() => onOpenAlert && onOpenAlert(ALERTS[0])} />
          <NearbyItem icon="calendar" tone="ochre" title="Farmers market opens in 3 hrs" meta="0.3 mi · Linden Sq" onClick={() => onOpenEvents && onOpenEvents()} />
          <NearbyItem icon="leaf" tone="forest" title="Free tree giveaway · Saturday" meta="0.4 mi · Old Mill depot" onClick={() => onOpenPost && onOpenPost(FEED[5])} />
          <NearbyItem icon="paw" tone="amber" title="Lost cat: Pickle (small grey)" meta="0.4 mi · Riverside" last onClick={() => onOpenPost && onOpenPost(FEED[0])} />
        </TPSection>

        {/* Block snapshot */}
        <TPSection title="Your block this week">
          <div style={{ background: TP.paper, margin: '0 16px', borderRadius: TP.r.lg, padding: 14, border: `1px solid ${TP.hairline}` }}>
            <SnapRow label="New neighbors" value="14" bar={70} />
            <SnapRow label="Posts" value="247" bar={88} />
            <SnapRow label="Events" value="12" bar={45} />
            <SnapRow label="Items sold" value="38" bar={60} last />
          </div>
        </TPSection>

        <div style={{ height: 12 }} />
      </div>

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

function MapBackdrop() {
  // Stylized warm map with streets
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#E8DFCE', overflow: 'hidden' }}>
      <svg viewBox="0 0 400 240" width="100%" height="100%" preserveAspectRatio="none">
        {/* park / blocks */}
        <rect x="40" y="20" width="100" height="80" fill="#D5DDD0" />
        <rect x="240" y="40" width="120" height="100" fill="#DCE6D5" />
        <rect x="60" y="160" width="90" height="70" fill="#F0DBC8" opacity="0.6" />
        <rect x="220" y="160" width="120" height="60" fill="#E4D5C4" opacity="0.6" />
        {/* river */}
        <path d="M0 120 Q 100 100, 200 130 T 400 110" stroke="#B6BFCC" strokeWidth="14" fill="none" opacity="0.7" />
        {/* streets */}
        <g stroke="#fff" strokeWidth="6" opacity="0.85">
          <line x1="0" y1="60" x2="400" y2="80" />
          <line x1="0" y1="180" x2="400" y2="170" />
          <line x1="80" y1="0" x2="100" y2="240" />
          <line x1="200" y1="0" x2="180" y2="240" />
          <line x1="320" y1="0" x2="340" y2="240" />
        </g>
        <g stroke="#fff" strokeWidth="2" opacity="0.6">
          <line x1="0" y1="30" x2="400" y2="40" />
          <line x1="0" y1="210" x2="400" y2="200" />
          <line x1="40" y1="0" x2="50" y2="240" />
          <line x1="140" y1="0" x2="130" y2="240" />
          <line x1="260" y1="0" x2="250" y2="240" />
        </g>
      </svg>
    </div>
  );
}

function Pin({ x, y, kind }) {
  const map = {
    alert: { c: TP.alertRed, i: 'alert' },
    event: { c: TP.ochre, i: 'calendar' },
    market: { c: TP.terracotta, i: 'tag' },
    post: { c: TP.forest, i: 'chat' },
    confirm: { c: TP.forest, i: 'check' },
  };
  const m = map[kind];
  return (
    <div style={{ position: 'absolute', left: x, top: y }}>
      <div style={{
        width: kind === 'confirm' ? 18 : 26, height: kind === 'confirm' ? 18 : 26, borderRadius: '50%', background: m.c,
        border: '2px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
      }}>
        <TPIcon name={m.i} size={kind === 'confirm' ? 9 : 13} color="#fff" stroke={2.4} />
      </div>
    </div>
  );
}

function QuickAction({ icon, label, tone, onClick }) {
  const tones = {
    red: { bg: TP.redTint, fg: TP.alertRed },
    forest: { bg: TP.forestTint, fg: TP.forest },
    ochre: { bg: TP.ochreTint, fg: '#7A5410' },
    terra: { bg: TP.terracottaTint, fg: '#A8551E' },
    blue: { bg: TP.blueTint, fg: TP.alertBlue },
  };
  const t = tones[tone];
  return (
    <div onClick={onClick} style={{
      flexShrink: 0, background: TP.paper, borderRadius: TP.r.lg,
      border: `1px solid ${TP.hairline}`, cursor: onClick ? 'pointer' : 'default',
      padding: '10px 14px 10px 10px', display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <div style={{ width: 30, height: 30, borderRadius: 8, background: t.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <TPIcon name={icon} size={16} stroke={2.2} color={t.fg} />
      </div>
      <span style={{ fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600, color: TP.ink }}>{label}</span>
    </div>
  );
}

function NearbyItem({ icon, tone, title, meta, last, onClick }) {
  const tones = {
    red: TP.alertRed, terra: '#A8551E', ochre: '#7A5410', amber: TP.alertAmber,
  };
  return (
    <div onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', background: TP.paper, borderBottom: last ? 'none' : `1px solid ${TP.hairline}`, cursor: onClick ? 'pointer' : 'default' }}>
      <div style={{ width: 32, height: 32, borderRadius: 9, background: TP.cream, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <TPIcon name={icon} size={16} color={tones[tone]} stroke={2.2} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: TP.sans, fontSize: 13.5, fontWeight: 600, color: TP.ink, lineHeight: 1.3 }}>{title}</div>
        <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted, marginTop: 2 }}>{meta}</div>
      </div>
      <TPIcon name="chevronRight" size={14} color={TP.mutedSoft} />
    </div>
  );
}

function SnapRow({ label, value, bar, last }) {
  return (
    <div style={{ padding: '8px 0', borderBottom: last ? 'none' : `1px solid ${TP.hairline}` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
        <span style={{ fontFamily: TP.sans, fontSize: 12, color: TP.inkSoft }}>{label}</span>
        <span style={{ fontFamily: TP.serif, fontSize: 16, color: TP.ink, letterSpacing: -0.2 }}>{value}</span>
      </div>
      <div style={{ height: 4, background: TP.cream, borderRadius: 2, overflow: 'hidden' }}>
        <div style={{ height: '100%', width: `${bar}%`, background: TP.forestSoft, borderRadius: 2 }} />
      </div>
    </div>
  );
}

Object.assign(window, { ScreenDashboardA, ScreenDashboardB, ScreenDashboardC });