// TownPost feed screens — 3 variations

// ─── Feed A: Mixed (50/50 X + FB) — the canonical home ──────────────────────────
function ScreenFeedA({ onNav = () => {}, onPost, onOpenPost, onOpenAlert }) {
  const [tab, setTab] = React.useState('all');
  const tapPost = (p) => onOpenPost && onOpenPost(p);
  const tapAlert = (a) => onOpenAlert && onOpenAlert(a);
  const tabs = [
    { id: 'all', label: 'All' },
    { id: 'block', label: 'My block' },
    { id: 'news', label: 'News' },
    { id: 'asks', label: 'Asks' },
    { id: 'events', label: 'Events' },
  ];
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <TPTopBar
        title="Quinte West"
        subtitle="90,000 NEIGHBORS · 247 ONLINE"
        leading={<TPLogo size={32} />}
        trailing={<TPAvatar name="Dev Krishnan" hue={2} size={32} />}
      />
      <div style={{
        display: 'flex', gap: 6, padding: '10px 16px', overflowX: 'auto',
        background: TP.paper, borderBottom: `1px solid ${TP.hairline}`,
      }}>
        {tabs.map(t => {
          const a = t.id === tab;
          return (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              flexShrink: 0, padding: '6px 12px', borderRadius: TP.r.pill,
              border: `1px solid ${a ? TP.ink : TP.hairlineStrong}`,
              background: a ? TP.ink : 'transparent',
              color: a ? TP.cream : TP.inkSoft,
              fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
            }}>{t.label}</button>
          );
        })}
      </div>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* PINNED LIVE ALERT — only renders if there's an active urgent alert */}
        <div style={{
          background: 'linear-gradient(180deg, #FFF5F2, #FCEEEA)',
          borderBottom: `1px solid ${TP.hairline}`,
          padding: '11px 16px',
          display: 'flex', alignItems: 'center', gap: 10,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: TP.alertRed }} />
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28 }}>
            <div style={{ position: 'absolute', inset: -4, borderRadius: '50%', background: TP.alertRed, opacity: 0.15, animation: 'tpPulse 2s ease-out infinite' }} />
            <TPIcon name="alert" size={16} color={TP.alertRed} stroke={2.4} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 1 }}>
              <span style={{ fontFamily: TP.mono, fontSize: 9, color: TP.alertRed, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase' }}>● Live · Urgent</span>
              <span style={{ fontFamily: TP.sans, fontSize: 10.5, color: TP.muted, fontWeight: 500 }}>2 min ago</span>
            </div>
            <div style={{ fontFamily: TP.sans, fontSize: 13, color: TP.ink, fontWeight: 600, lineHeight: 1.3 }}>
              Water main break on Linden Ave between 4th & 6th — avoid area
            </div>
          </div>
          <button onClick={() => tapAlert(ALERTS && ALERTS[0])} style={{ flexShrink: 0, padding: '6px 12px', borderRadius: TP.r.pill, background: TP.alertRed, color: '#fff', border: 'none', fontFamily: TP.sans, fontSize: 11.5, fontWeight: 600, cursor: 'pointer' }}>View</button>
        </div>
        <style>{`@keyframes tpPulse { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(2.2); opacity: 0; } }`}</style>

        {/* Compose stub */}
        <div style={{ display: 'flex', gap: 10, padding: '12px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}`, alignItems: 'center' }}>
          <TPAvatar name="Dev Krishnan" hue={2} size={36} />
          <div onClick={onPost} style={{
            flex: 1, background: TP.cream, borderRadius: TP.r.pill, padding: '9px 14px',
            fontFamily: TP.sans, fontSize: 13, color: TP.muted, cursor: 'pointer',
          }}>What's happening on your block?</div>
          <button style={{ width: 36, height: 36, borderRadius: '50%', background: TP.forest, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
            <TPIcon name="image" size={16} color={TP.cream} stroke={2} />
          </button>
        </div>

        {/* Quick-action chip row — buy/sell, ask, recommend, alert */}
        <div style={{ display: 'flex', gap: 8, padding: '10px 16px 12px', overflowX: 'auto', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
          {[
            { icon: 'tag', label: 'Sell', tone: TP.ochre },
            { icon: 'question', label: 'Ask', tone: TP.forest },
            { icon: 'handshake', label: 'Recommend', tone: TP.forest },
            { icon: 'paw', label: 'Lost & found', tone: TP.terracotta },
            { icon: 'alert', label: 'Report', tone: TP.alertRed },
          ].map(q => (
            <button key={q.label} style={{
              flexShrink: 0, display: 'flex', alignItems: 'center', gap: 6,
              padding: '7px 12px', borderRadius: TP.r.pill,
              border: `1px solid ${TP.hairlineStrong}`, background: 'transparent',
              fontFamily: TP.sans, fontSize: 12, color: TP.inkSoft, fontWeight: 600,
              cursor: 'pointer',
            }}>
              <TPIcon name={q.icon} size={13} stroke={2} color={q.tone} />
              {q.label}
            </button>
          ))}
        </div>

        {/* First 2 posts */}
        {FEED.slice(0, 2).map(p => p.kind === 'compact' ? <TPPostCompact key={p.id} post={p} onTap={() => tapPost(p)} /> : <TPPostRich key={p.id} post={p} onTap={() => tapPost(p)} />)}

        {/* WHO'S NEARBY rail — interleaved at position 2 */}
        <div style={{ background: TP.paper, padding: '14px 0 12px', borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 16px 10px' }}>
            <TPIcon name="location" size={13} color={TP.forest} stroke={2} />
            <span style={{ fontFamily: TP.mono, fontSize: 10, color: TP.forest, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>New on your block</span>
            <div style={{ flex: 1, height: 1, background: TP.hairline }} />
            <span style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, fontWeight: 600 }}>See all →</span>
          </div>
          <div style={{ display: 'flex', gap: 10, padding: '0 16px', overflowX: 'auto' }}>
            {[
              { name: 'Priya Bhatt', hue: 4, sub: 'Moved in · 2d', meta: '300 ft away' },
              { name: 'Marcus Webb', hue: 0, sub: 'New neighbor', meta: '0.2 mi' },
              { name: 'Lin Chen', hue: 5, sub: 'Verified · 1w', meta: '0.4 mi' },
              { name: 'Jordan Rios', hue: 6, sub: 'Just joined', meta: '500 ft' },
            ].map(n => (
              <div key={n.name} style={{
                flexShrink: 0, width: 130,
                background: TP.cream, border: `1px solid ${TP.hairline}`,
                borderRadius: TP.r.lg, padding: 12,
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              }}>
                <TPAvatar name={n.name} hue={n.hue} size={48} />
                <div style={{ fontFamily: TP.sans, fontSize: 12, color: TP.ink, fontWeight: 600, textAlign: 'center', lineHeight: 1.2 }}>{n.name}</div>
                <div style={{ fontFamily: TP.sans, fontSize: 10.5, color: TP.muted, textAlign: 'center' }}>{n.meta}</div>
                <button style={{ width: '100%', padding: '5px 8px', borderRadius: TP.r.pill, background: 'transparent', border: `1px solid ${TP.forest}`, color: TP.forest, fontFamily: TP.sans, fontSize: 11, fontWeight: 600, cursor: 'pointer' }}>+ Welcome</button>
              </div>
            ))}
          </div>
        </div>

        {/* Next 3 posts */}
        {FEED.slice(2, 5).map(p => p.kind === 'compact' ? <TPPostCompact key={p.id} post={p} onTap={() => tapPost(p)} /> : <TPPostRich key={p.id} post={p} onTap={() => tapPost(p)} />)}

        {/* WHAT YOU MISSED digest — appears mid-feed for re-engagement */}
        <div style={{
          background: 'linear-gradient(180deg, rgba(45,80,22,0.04), rgba(45,80,22,0.02))',
          borderBottom: `1px solid ${TP.hairline}`,
          padding: '14px 16px',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <TPIcon name="leaf" size={13} color={TP.forest} stroke={2} />
            <span style={{ fontFamily: TP.mono, fontSize: 10, color: TP.forest, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>What you missed · since Sunday</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {[
              { n: '47', l: 'new posts in Eastgate' },
              { n: '12', l: 'questions answered' },
              { n: '8', l: 'helpful answers logged' },
              { n: '3', l: 'events this weekend' },
            ].map(s => (
              <div key={s.l} style={{ background: TP.paper, padding: '10px 12px', borderRadius: TP.r.md, border: `1px solid ${TP.hairline}` }}>
                <div style={{ fontFamily: TP.serif, fontSize: 22, color: TP.forest, lineHeight: 1, letterSpacing: -0.3 }}>{s.n}</div>
                <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted, marginTop: 3, lineHeight: 1.3 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Remaining posts */}
        {FEED.slice(5).map(p => p.kind === 'compact' ? <TPPostCompact key={p.id} post={p} onTap={() => tapPost(p)} /> : <TPPostRich key={p.id} post={p} onTap={() => tapPost(p)} />)}

        {/* Caught up */}
        <div style={{ padding: '24px 16px 32px', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 48, height: 48, borderRadius: '50%', background: TP.forestTint, marginBottom: 10 }}>
            <TPIcon name="check" size={22} color={TP.forest} stroke={2.5} />
          </div>
          <div style={{ fontFamily: TP.serif, fontSize: 18, color: TP.ink, marginBottom: 4 }}>You're all caught up</div>
          <div style={{ fontFamily: TP.sans, fontSize: 12, color: TP.muted, marginBottom: 12 }}>Last 24 hours of Belleville & Surrounding Area</div>
          <button style={{ padding: '8px 14px', borderRadius: TP.r.pill, background: 'transparent', border: `1px solid ${TP.forest}`, color: TP.forest, fontFamily: TP.sans, fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>Browse all of Quinte West →</button>
        </div>
      </div>
      <TPTabBar active="feed" onChange={onNav} />
    </div>
  );
}

// ─── Feed B: Compact / X-leaning ──────────────────────────
function ScreenFeedB({ onNav = () => {}, onOpenPost }) {
  return (
    <div style={{ background: TP.paper, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '10px 16px 8px', borderBottom: `1px solid ${TP.hairline}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1, fontFamily: TP.serif, fontSize: 22, color: TP.ink, letterSpacing: -0.2 }}>Latest</div>
        <button style={{ width: 32, height: 32, borderRadius: '50%', background: 'transparent', border: `1px solid ${TP.hairlineStrong}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <TPIcon name="filter" size={15} color={TP.inkSoft} />
        </button>
      </div>
      <div style={{
        display: 'flex', borderBottom: `1px solid ${TP.hairline}`,
      }}>
        {['Following', 'For you', 'Local'].map((l, i) => (
          <div key={l} style={{
            flex: 1, textAlign: 'center', padding: '10px 0',
            fontFamily: TP.sans, fontSize: 13, fontWeight: 600,
            color: i === 1 ? TP.ink : TP.muted,
            borderBottom: i === 1 ? `2px solid ${TP.terracotta}` : '2px solid transparent',
          }}>{l}</div>
        ))}
      </div>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {FEED.map(p => <TPPostCompact key={p.id} post={p} onTap={() => onOpenPost && onOpenPost(p)} />)}
        <div style={{ height: 12 }} />
      </div>
      <TPTabBar active="feed" onChange={onNav} />
    </div>
  );
}

// ─── Feed C: Card / FB-leaning, magazine grid ──────────────────────────
function ScreenFeedC({ onNav = () => {}, onOpenPost, onPost = () => {} }) {
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <TPTopBar
        title="On the block"
        subtitle="BELLEVILLE & AREA · TUE"
        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="location" size={16} color={TP.forest} /></button>}
        trailing={<TPAvatar name="Dev Krishnan" hue={2} size={32} />}
      />
      <div style={{ flex: 1, overflow: 'auto', padding: '12px 12px 16px' }}>
        {/* Compose stub — primary entry to post from the feed */}
        <div onClick={onPost} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '10px 12px', marginBottom: 14,
          background: TP.paper, border: `1px solid ${TP.hairline}`, borderRadius: TP.r.pill,
          cursor: 'pointer',
        }}>
          <TPAvatar name="Dev Krishnan" hue={2} size={32} />
          <div style={{ flex: 1, fontFamily: TP.sans, fontSize: 13.5, color: TP.muted }}>
            What's on the block, Dev?
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 30, height: 30, borderRadius: '50%', background: TP.cream,
          }}>
            <TPIcon name="image" size={15} color={TP.forest} stroke={2} />
          </div>
        </div>

        {/* Top stories: posts + alerts as compact story tiles — circular avatar/icon
            with a 2-line title underneath. One unified visual system. */}
        <div style={{ display: 'flex', gap: 12, marginBottom: 16, overflowX: 'auto', padding: '0 4px 6px', scrollbarWidth: 'none' }}>
          <YourStoryDot onPost={onPost} />
          {/* Top alert (one — saves rail space, urgent items get the dashboard) */}
          {ALERTS.slice(0, 1).map(a => <StoryCard key={`a${a.id}`} kind="alert" item={a} />)}
          {FEED.filter(p => p.image || p.title).slice(0, 5).map(p => <StoryCard key={`p${p.id}`} kind="post" item={p} onTap={() => onOpenPost && onOpenPost(p)} />)}
        </div>

        {/* Stacked rich cards */}
        {FEED.filter(p => p.image || p.title).map(p => (
          <div key={p.id} style={{
            background: TP.paper, borderRadius: TP.r.lg, marginBottom: 12,
            border: `1px solid ${TP.hairline}`, overflow: 'hidden',
          }}>
            <TPPostRich post={p} onTap={() => onOpenPost && onOpenPost(p)} />
          </div>
        ))}
      </div>
      <TPTabBar active="feed" onChange={onNav} />
    </div>
  );
}

// "Your story" — Add tile, sized like the story cards beside it.
function YourStoryDot({ onPost = () => {} }) {
  return (
    <div onClick={onPost} style={{
      flexShrink: 0, width: 72, display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 6, cursor: 'pointer',
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: '50%',
        background: TP.paper,
        border: `1.5px dashed ${TP.hairlineStrong}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <TPIcon name="plus" size={20} color={TP.muted} stroke={2.2} />
      </div>
      <div style={{
        fontFamily: TP.sans, fontSize: 10.5, color: TP.muted, fontWeight: 500,
        lineHeight: 1.1, textAlign: 'center',
      }}>Your story</div>
    </div>
  );
}

// Story tile — unified style for both posts and alerts.
// Footprint matches a circular-avatar story (~72px wide), but with a 2-line
// title underneath. Alerts get a tone-colored dot ring; posts get a tag
// indicator dot. No saturated full-card fills, no hatching, no chips —
// the rail should read as ONE list of related signals.
function StoryCard({ kind, item, onTap }) {
  const TONE_COLORS = {
    red: TP.terracotta || '#B85C3F',
    amber: '#C8841C',
    blue: '#3F6FA6',
    forest: TP.forest || '#3F6F4A',
  };

  if (kind === 'alert') {
    const tone = TONE_COLORS[item.tone] || TP.ink;
    return (
      <div onClick={onTap} style={{
        flexShrink: 0, width: 72, display: 'flex', flexDirection: 'column',
        alignItems: 'center', gap: 6, cursor: 'pointer',
      }}>
        {/* Circular tone-tinted disc with the alert glyph; ring shows urgency */}
        <div style={{
          width: 56, height: 56, borderRadius: '50%',
          padding: 2, boxSizing: 'border-box',
          background: `conic-gradient(${tone} 0deg 340deg, ${tone}40 340deg 360deg)`,
        }}>
          <div style={{
            width: '100%', height: '100%', borderRadius: '50%',
            background: TP.paper,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: `1.5px solid ${TP.paper}`,
            boxSizing: 'border-box',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: '50%',
              background: `${tone}1a`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <TPIcon name={item.icon || 'alert'} size={16} color={tone} stroke={2.2} />
            </div>
          </div>
        </div>
        <div style={{ width: '100%', textAlign: 'center' }}>
          <div style={{
            fontFamily: TP.mono, fontSize: 8.5, color: tone, fontWeight: 700,
            letterSpacing: 0.7, textTransform: 'uppercase', lineHeight: 1, marginBottom: 2,
          }}>{item.area || 'Alert'}</div>
          <div style={{
            fontFamily: TP.sans, fontSize: 10.5, color: TP.ink, fontWeight: 500,
            lineHeight: 1.2,
            display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
            wordBreak: 'break-word',
          }}>{item.title}</div>
        </div>
      </div>
    );
  }

  // Post tile — avatar with a warm ring; 1-line author + 2-line title fragment.
  const titleText = item.title || item.text || '';
  const snippet = titleText.length > 50 ? titleText.slice(0, 48).trimEnd() + '…' : titleText;
  return (
    <div onClick={onTap} style={{
      flexShrink: 0, width: 72, display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 6, cursor: 'pointer',
    }}>
      {/* Avatar with a warm gradient ring (story-style) */}
      <div style={{
        width: 56, height: 56, borderRadius: '50%',
        padding: 2, boxSizing: 'border-box',
        background: `linear-gradient(140deg, ${TP.terracotta} 0%, ${TP.ochre || '#C8841C'} 60%, ${TP.forest} 100%)`,
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: '50%',
          background: TP.paper, padding: 2, boxSizing: 'border-box',
        }}>
          <TPAvatar name={item.author} hue={item.hue} size={48} />
        </div>
      </div>
      <div style={{ width: '100%', textAlign: 'center' }}>
        <div style={{
          fontFamily: TP.mono, fontSize: 8.5, color: TP.muted, fontWeight: 700,
          letterSpacing: 0.7, textTransform: 'uppercase', lineHeight: 1, marginBottom: 2,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{item.author.split(' ')[0]}</div>
        <div style={{
          fontFamily: TP.sans, fontSize: 10.5, color: TP.ink, fontWeight: 500,
          lineHeight: 1.2,
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
          wordBreak: 'break-word',
        }}>{snippet}</div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenFeedA, ScreenFeedB, ScreenFeedC });