// pages-1.jsx — Dashboard, Profile, Signals

// ─────────────────────────────────────────────────────────────────────────
// DASHBOARD
// ─────────────────────────────────────────────────────────────────────────
const PageDashboard = ({ go, onOpenEvent }) => {
  const sparkData = [120, 142, 138, 156, 170, 165, 188, 200, 195, 218, 232, 256, 278];
  const open = (m) => window.__beeprd?.openModal?.(m);
  const toast = (m) => window.__beeprd?.toast?.(m);
  const [range, setRange] = React.useState('7D');
  return (
    <div className="page page-enter" data-screen-label="01 Dashboard">
      <div className="row between" style={{marginBottom:22, flexWrap:'wrap', rowGap:10}}>
        <div>
          <h1 className="h1">Dashboard</h1>
          <div className="subtle">Here's what's happening with your network.</div>
        </div>
        <div className="row gap-sm" style={{flexWrap:'wrap'}}>
          <button className="btn btn-ghost" onClick={() => toast('Synced')}><I name="refresh" size={14}/> Sync</button>
          <button className="btn btn-ghost" onClick={() => go('signals')}><I name="signals" size={14}/> Open Signals</button>
        </div>
      </div>

      <div className="grid cols-4" style={{marginBottom:18}}>
        <KPI label="Profile Views"     value="1,328" delta="12%" sub="vs last 7 days" deltaDir="up"/>
        <KPI label="Signal Subscribers" value="842"   delta="18%" sub="vs last 7 days" deltaDir="up"/>
        <KPI label="Pings Received"    value="128"   delta="6%"  sub="vs last 7 days" deltaDir="up"/>
        <KPI label="Connections"       value="612"   delta="15%" sub="vs last 7 days" deltaDir="up"/>
      </div>

      <div className="split3" style={{'--c1':'1.4fr','--c2':'1fr','--c3':'0.9fr', marginBottom:18}}>
        {/* You've Been Pinged hero */}
        <div className="card" style={{padding:20, position:'relative', overflow:'hidden'}}>
              <div className="row between" style={{marginBottom:14}}>
                <div className="eyebrow">You've Been Pinged</div>
                <button className="link" style={{fontSize:12.5}} onClick={() => go('notifications')}>View All</button>
              </div>
          <div className="row gap-md" style={{alignItems:'center', flexWrap:'wrap'}}>
            <div style={{flex:1}}>
              <div className="serif" style={{fontSize:46, lineHeight:1, fontWeight:400, letterSpacing:'-0.02em'}}>
                24 <span style={{color:'var(--mute)', fontSize:24}}>new pings</span>
              </div>
              <div className="subtle" style={{marginTop:6, maxWidth:280}}>
                3 subscribers, 5 connection requests, 16 signal alerts across your platforms.
              </div>
              <div className="row gap-sm" style={{marginTop:14}}>
                <button className="btn btn-primary" onClick={() => go('notifications')}>Open Inbox <I name="chevron" size={13}/></button>
                <button className="btn btn-ghost" onClick={() => toast('Marked all as read')}>Mark all read</button>
              </div>
            </div>
            <div style={{width:170, flex:'0 0 auto', maxWidth:'100%'}}>
              <PagerCard msg="24 NEW" id="CLARENCE" subtitle="Pings" actions={false} compact />
            </div>
          </div>
        </div>

        {/* Recent signals */}
        <div className="card">
          <div className="card-head"><h3>Recent Signals</h3><button className="link" onClick={() => go('signals')}>View all →</button></div>
          <div style={{padding:'4px 0'}}>
            {[
              { p:'youtube',   t:'YouTube Video',     s:'Behind the scenes of our new project',     a:'2h ago' },
              { p:'instagram', t:'Instagram Post',    s:'Office vibes and new update',               a:'5h ago' },
              { p:'linkedin',  t:'LinkedIn Post',     s:'Thoughts on building in public',            a:'1d ago' },
              { p:'podcast',   t:'Podcast Episode',   s:'The Future of Creativity',                  a:'2d ago' },
            ].map((s, i) => (
              <div key={i} className="row gap-md" style={{padding:'10px 16px', borderTop: i===0 ? '0' : '1px solid var(--line-2)'}}>
                <PlatformIcon kind={s.p} size={30}/>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:13, fontWeight:600}}>{s.t}</div>
                  <div className="tiny" style={{color:'var(--mute)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{s.s}</div>
                </div>
                <div className="tiny mono" style={{color:'var(--mute-2)'}}>{s.a}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Quick actions */}
        <div className="card">
          <div className="card-head"><h3>Quick Actions</h3></div>
          <div style={{padding:8}}>
            {[
              { i:'share',     l:'Share My Profile',  on: () => open('share') },
              { i:'broadcast', l:'Create Broadcast',  on: () => open('broadcast') },
              { i:'edit',      l:'Update Status',     on: () => go('profile') },
              { i:'analytics', l:'View Analytics',    on: () => go('analytics') },
              { i:'wallet',    l:'Add to Wallet',     on: () => go('wallet') },
            ].map((a, i) => (
              <button key={i} className="row gap-md" style={{
                width:'100%', padding:'10px 12px', borderRadius:8, justifyContent:'flex-start',
                color:'var(--ink-2)', fontSize:13.5
              }} onMouseEnter={(e) => e.currentTarget.style.background='var(--surface-2)'}
                 onMouseLeave={(e) => e.currentTarget.style.background='transparent'}
                 onClick={a.on}>
                <I name={a.i} size={16}/> <span>{a.l}</span>
                <span style={{marginLeft:'auto', color:'var(--mute-2)'}}><I name="chevron" size={13}/></span>
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="split" style={{'--split-left':'1.1fr','--split-right':'1.4fr'}}>
        {/* Upcoming Events */}
        <div className="card">
          <div className="card-head"><h3>Upcoming Events</h3><button className="link" onClick={() => go('events')}>View all →</button></div>
          <div className="events-mini-grid" style={{padding:14}}>
            {[
              { t:'Atlanta Tech Week',  d:'May 8–10, 2025',  loc:'@JetSuite HQ',           cat:'Technology', mine:false },
              { t:'SaaS Founders Summit', d:'Jun 17, 2025',  loc:'@FoundersHall',          cat:'Business',   mine:true  },
              { t:'Creator Economy Expo',d:'Jul 6–8, 2025',  loc:'@MiamiFL',               cat:'Media',      mine:false },
            ].map((e, i) => (
              <div key={i}
                style={{borderRadius:10, overflow:'hidden', border:'1px solid var(--line)', cursor:'pointer'}}
                onClick={() => onOpenEvent?.(e)}
                role="button"
                tabIndex={0}
                onKeyDown={(ev) => (ev.key === 'Enter' || ev.key === ' ') && onOpenEvent?.(e)}
                aria-label={`View details for ${e.t}`}
              >
                <div className="placeholder-img" style={{aspectRatio:'1.4/1'}}>{e.cat.toUpperCase()}</div>
                <div style={{padding:10}}>
                  <div style={{fontSize:13, fontWeight:600, marginBottom:2}}>{e.t}</div>
                  <div className="tiny" style={{color:'var(--mute)'}}>{e.d} · {e.loc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Profile Analytics */}
        <div className="card">
          <div className="card-head">
            <div>
              <h3>Profile Analytics</h3>
              <div className="tiny" style={{color:'var(--mute)', marginTop:2}}>1,328 views <span style={{color:'var(--good)', fontWeight:600}}>↑ 12%</span> · last 14 days</div>
            </div>
            <div className="seg">
              {['7D','14D','30D','All'].map((r) => (
                <button key={r} className={range === r ? 'on' : ''} onClick={() => setRange(r)}>{r}</button>
              ))}
            </div>
          </div>
          <div style={{padding:'14px 16px 4px'}}>
            <LineChart data={sparkData} labels={['Apr 30','May 1','May 2','May 3','May 4','May 5','May 6','May 7','May 8','May 9','May 10','May 11','May 12']} highlightIdx={11} highlightLabel="views"/>
          </div>
          <div className="row stats-row" style={{padding:'14px 18px', borderTop:'1px solid var(--line-2)', gap:32}}>
            <Stat label="Subscribers" value="842" delta="18%" deltaDir="up"/>
            <Stat label="Connections" value="612" delta="15%" deltaDir="up"/>
            <Stat label="Avg engagement" value="3.8%" delta="0.4%" deltaDir="up"/>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// PROFILE
// ─────────────────────────────────────────────────────────────────────────
const PageProfile = ({ go, onShare }) => {
  const [tab, setTab] = React.useState('About');
  const toast = (m) => window.__beeprd?.toast?.(m);
  const [themeColor, setThemeColor] = React.useState('#7C6BF0');
  const [toggles, setToggles] = React.useState({
    publicProfile: true,
    allowPings: true,
    discoverable: false,
  });
  return (
    <div className="page page-enter" data-screen-label="02 Profile">
      <div className="row between" style={{marginBottom:18, flexWrap:'wrap', rowGap:10}}>
        <h1 className="h1">Profile</h1>
        <div className="row gap-sm" style={{flexWrap:'wrap'}}>
          <button className="btn btn-ghost" onClick={() => toast('Edit Profile (demo)')}><I name="edit" size={14}/> Edit Profile</button>
          <button className="btn btn-ghost" onClick={onShare}><I name="share" size={14}/> Share</button>
        </div>
      </div>

      <div className="split" style={{'--split-left':'1.5fr','--split-right':'1fr'}}>
        <div className="card" style={{padding:24}}>
          <div className="row gap-md" style={{alignItems:'flex-start'}}>
            <div className="avatar xl">CH</div>
            <div style={{flex:1, minWidth:0}}>
              <div className="row gap-sm" style={{marginBottom:4}}>
                <h2 className="h2" style={{fontSize:24}}>Clarence Holmes</h2>
                <span style={{color:'var(--accent)'}}><I name="badgeCheck" size={18}/></span>
              </div>
              <div className="subtle">Entrepreneur · Investor · Creator</div>
              <div className="row gap-sm" style={{marginTop:10, color:'var(--mute)', fontSize:13}}>
                <I name="pin" size={14}/> Atlanta, GA
              </div>
              <div className="row gap-sm" style={{marginTop:4, color:'var(--accent-ink)', fontSize:13}}>
                <I name="link" size={14}/> beeprd.com/clarence
              </div>
              <div className="tiny" style={{color:'var(--mute-2)', marginTop:8}}>Joined May 2025 · 247-day streak</div>

              <div className="row gap-sm" style={{marginTop:16, flexWrap:'wrap'}}>
                <button className="btn btn-primary" onClick={() => toast('Ping sent')}><I name="send" size={14}/> Send Ping</button>
                <button className="btn btn-ghost" onClick={() => window.__beeprd?.openModal('subscribe')}>Subscribe to Signals</button>
              </div>
            </div>
          </div>

          {/* tabs */}
          <div className="row" style={{gap:24, borderBottom:'1px solid var(--line-2)', marginTop:28, marginBottom:0}}>
            {['About','Links','Themes','Settings'].map(t => (
              <button key={t} onClick={() => setTab(t)} style={{
                padding:'10px 0', fontSize:13.5, fontWeight:500,
                color: tab===t ? 'var(--ink)' : 'var(--mute)',
                borderBottom: tab===t ? '2px solid var(--accent)' : '2px solid transparent',
                marginBottom:-1
              }}>{t}</button>
            ))}
          </div>

          {tab === 'About' && (
            <div className="split" style={{paddingTop:20, '--split-left':'1.2fr','--split-right':'1fr', gap:24}}>
              <div>
                <div className="eyebrow" style={{marginBottom:8}}>About Me</div>
                <p style={{margin:0, lineHeight:1.6, color:'var(--ink-2)'}}>
                  Founder of JetSuite. I build systems and invest in founders solving real problems. Sharing insights on entrepreneurship, technology, and building wealth.
                </p>
                <div className="eyebrow" style={{marginTop:20, marginBottom:8}}>Focus Areas</div>
                <div className="row gap-sm" style={{flexWrap:'wrap'}}>
                  {['AI & Automation','SaaS','Investing','Business Growth','Creator Economy'].map(t => (
                    <span key={t} className="tag accent">{t}</span>
                  ))}
                </div>
              </div>
              <div>
                <div className="eyebrow" style={{marginBottom:8}}>Looking For</div>
                <div className="subtle">Investors, partnerships, speaking opportunities</div>
                <div className="eyebrow" style={{marginTop:18, marginBottom:8}}>Availability</div>
                <div className="row gap-sm"><span className="dot" style={{background:'var(--good)'}}></span><span style={{fontSize:13.5}}>Open to collaborations</span></div>
                <div className="eyebrow" style={{marginTop:18, marginBottom:8}}>Response Time</div>
                <div className="subtle">Usually within a few hours</div>
              </div>
            </div>
          )}

          {tab === 'Links' && (
            <div className="split" style={{paddingTop:20, '--split-left':'1fr','--split-right':'1fr', gap:10}}>
              {Object.keys(PLATFORMS).slice(0,6).map(k => (
                <div
                  key={k}
                  className="row gap-md"
                  role="button"
                  tabIndex={0}
                  onClick={() => toast(`${PLATFORMS[k].name} opened`)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault();
                      toast(`${PLATFORMS[k].name} opened`);
                    }
                  }}
                  style={{padding:'10px 14px', border:'1px solid var(--line)', borderRadius:10, cursor:'pointer'}}
                >
                  <PlatformIcon kind={k} size={32}/>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:13, fontWeight:600}}>{PLATFORMS[k].name}</div>
                    <div className="tiny" style={{color:'var(--mute)'}}>@clarenceholmes</div>
                  </div>
                  <I name="external" size={14}/>
                </div>
              ))}
            </div>
          )}

          {tab === 'Themes' && (
            <div style={{paddingTop:20}}>
              <div className="eyebrow" style={{marginBottom:10}}>Profile Theme</div>
              <div className="row gap-sm">
                {['#7C6BF0','#0C0B0A','#3F9D6B','#D69A3D','#C8504A'].map((c, i) => (
                  <button
                    key={c}
                    className="icon-btn"
                    aria-label={`Set theme color ${c}`}
                    onClick={() => { setThemeColor(c); toast('Theme updated'); }}
                    style={{
                      width:48, height:48, borderRadius:12, background:c, cursor:'pointer', padding:0,
                      boxShadow: (String(themeColor).toLowerCase() === String(c).toLowerCase())
                        ? '0 0 0 2px var(--bg), 0 0 0 4px var(--accent)'
                        : 'inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent)'
                    }}
                  />
                ))}
              </div>
            </div>
          )}

          {tab === 'Settings' && (
            <div style={{paddingTop:20}}>
              <div className="row between" style={{padding:'12px 0', borderBottom:'1px solid var(--line-2)'}}>
                <div>
                  <div style={{fontWeight:600}}>Public profile</div>
                  <div className="subtle">Visible at beeprd.com/clarence</div>
                </div>
                <div className={"toggle" + (toggles.publicProfile ? ' on' : '')} onClick={() => setToggles(v => ({...v, publicProfile: !v.publicProfile}))}/>
              </div>
              <div className="row between" style={{padding:'12px 0', borderBottom:'1px solid var(--line-2)'}}>
                <div>
                  <div style={{fontWeight:600}}>Allow ping requests</div>
                  <div className="subtle">Anyone can send you a ping</div>
                </div>
                <div className={"toggle" + (toggles.allowPings ? ' on' : '')} onClick={() => setToggles(v => ({...v, allowPings: !v.allowPings}))}/>
              </div>
              <div className="row between" style={{padding:'12px 0'}}>
                <div>
                  <div style={{fontWeight:600}}>Discoverable at events</div>
                  <div className="subtle">Visible to operators within 100ft</div>
                </div>
                <div className={"toggle" + (toggles.discoverable ? ' on' : '')} onClick={() => setToggles(v => ({...v, discoverable: !v.discoverable}))}/>
              </div>
            </div>
          )}

          <div className="row stats-row" style={{marginTop:24, paddingTop:20, borderTop:'1px solid var(--line-2)', gap:32}}>
            <Stat label="Profile views"   value="1,328" delta="12%" deltaDir="up"/>
            <Stat label="Subscribers"     value="842"   delta="18%" deltaDir="up"/>
            <Stat label="Pings"           value="128"   delta="6%"  deltaDir="up"/>
            <Stat label="Connections"     value="612"   delta="15%" deltaDir="up"/>
          </div>
        </div>

        {/* Right column: pager ID + share */}
        <div className="grid" style={{alignContent:'start', gap:16}}>
          <div className="card" style={{padding:20}}>
            <div className="eyebrow" style={{marginBottom:12}}>Your Beeprd</div>
            <PagerCard msg="HELLO" id="CLARENCE" subtitle="Beeprd ID"/>
              <div className="row between" style={{marginTop:14, flexWrap:'wrap', rowGap:10}}>
                <div className="tiny" style={{color:'var(--mute)'}}>Share your profile</div>
              <div className="row gap-sm" style={{color:'var(--mute)', flexWrap:'wrap'}}>
                <button className="icon-btn" style={{width:30, height:30}} onClick={onShare}><I name="qr" size={14}/></button>
                <button className="icon-btn" style={{width:30, height:30}} onClick={() => { try { navigator.clipboard?.writeText('beeprd.com/clarence'); } catch (_) {} toast('Copied profile link'); }} aria-label="Copy profile link"><I name="copy" size={14}/></button>
                <button className="icon-btn" style={{width:30, height:30}} onClick={() => toast('Opened LinkedIn (demo)')} aria-label="Share to LinkedIn"><I name="pLinkedin" size={14}/></button>
                <button className="icon-btn" style={{width:30, height:30}} onClick={() => toast('Opened X (demo)')} aria-label="Share to X"><I name="pX" size={14}/></button>
              </div>
            </div>
          </div>

          <div className="card" style={{padding:20}}>
            <div className="row between" style={{marginBottom:12}}>
              <div className="eyebrow">Card Preview</div>
              <button className="link" style={{fontSize:12}} onClick={() => toast('Customize card (demo)')}>Customize</button>
            </div>
            <div className="card-preview">
              <div className="row between" style={{marginBottom:24}}>
                <div className="mono" style={{fontSize:10, letterSpacing:'.12em', opacity:.8}}>BEEPRD CARD</div>
                <div className="mono" style={{fontSize:10, letterSpacing:'.12em', opacity:.8}}>#001247</div>
              </div>
              <div className="serif" style={{fontSize:22, lineHeight:1.1}}>Clarence Holmes</div>
              <div style={{fontSize:11.5, opacity:.85, marginTop:4}}>Entrepreneur · Investor · Creator</div>
              <div className="row between" style={{marginTop:24, alignItems:'flex-end'}}>
                <div>
                  <div className="mono" style={{fontSize:9, opacity:.7, letterSpacing:'.1em'}}>ID</div>
                  <div className="mono" style={{fontSize:13, letterSpacing:'.06em'}}>CLARENCE</div>
                </div>
                <div className="card-preview-chip">
                  <I name="qr" size={20}/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// SIGNALS
// ─────────────────────────────────────────────────────────────────────────
const SIGNAL_FEED = [
  { p:'youtube',   t:'YouTube Video',       s:'Behind the scenes of our new project',          a:'2h ago',  unread:true,  range:'today'},
  { p:'instagram', t:'Instagram Post',      s:'Office vibes and new update',                   a:'5h ago',  unread:true,  range:'today'},
  { p:'linkedin',  t:'LinkedIn Post',       s:'Thoughts on building in public',                a:'10h ago', unread:false, range:'today'},
  { p:'podcast',   t:'Podcast Episode',     s:'The Future of Creativity',                      a:'2d ago',  unread:false, range:'week'},
  { p:'x',         t:'X (Twitter) Post',    s:'The compounding effect of consistency',         a:'3d ago',  unread:false, range:'week'},
  { p:'blog',      t:'New Blog Article',    s:'How AI is changing the game for founders',      a:'4d ago',  unread:true,  range:'week'},
  { p:'youtube',   t:'YouTube Short',       s:'Quick tip for creators',                        a:'5d ago',  unread:false, range:'week'},
];

const PageSignals = ({ go }) => {
  const [seg, setSeg] = React.useState('All Signals');
  const [filters, setFilters] = React.useState({ range:'All time', type:'All', platform:'All', status:'All' });
  const toast = (m) => window.__beeprd?.toast?.(m);
  const platformFromSeg = seg === 'All Signals' ? null : seg.toLowerCase().replace(/\s.*/,'');

  const filtered = SIGNAL_FEED.filter(s => {
    if (platformFromSeg) {
      const map = { youtube:'youtube', x:'x', '(twitter)':'x', instagram:'instagram', linkedin:'linkedin', podcasts:'podcast', articles:'blog' };
      const k = map[platformFromSeg] || platformFromSeg;
      return s.p === k;
    }
    if (filters.status === 'Unread' && !s.unread) return false;
    return true;
  });

  return (
    <div className="page page-enter" data-screen-label="03 Signals">
      <div className="row between" style={{marginBottom:6, flexWrap:'wrap', rowGap:10}}>
        <h1 className="h1">Signals</h1>
        <div className="row gap-sm">
          <button className="btn btn-ghost" onClick={() => toast('Synced signals')}><I name="refresh" size={14}/> Sync now</button>
        </div>
      </div>
      <div className="subtle" style={{marginBottom:18}}>Automatic updates from your connected platforms.</div>

      <div className="row gap-sm" style={{flexWrap:'wrap', marginBottom:18}}>
        <div className="seg">
          {['All Signals','YouTube','X (Twitter)','Instagram','LinkedIn','Podcasts','Articles'].map(s => (
            <button key={s} className={seg===s ? 'on' : ''} onClick={() => setSeg(s)}>{s}</button>
          ))}
        </div>
      </div>

      <div className="split" style={{'--split-left':'1.6fr','--split-right':'1fr'}}>
        <div className="card">
          <div style={{padding:'4px 4px'}}>
            {filtered.length === 0 && (
              <div style={{padding:'48px 20px', textAlign:'center', color:'var(--mute)'}}>
                <div className="serif" style={{fontSize:22}}>Nothing here yet</div>
                <div className="subtle" style={{marginTop:6}}>We'll beep you when something new comes in.</div>
              </div>
            )}
            {filtered.map((s, i) => (
              <div
                key={i}
                className="row gap-md"
                role="button"
                tabIndex={0}
                onClick={() => { window.__beeprd?.openModal?.('share'); toast('Opened share (signal)'); }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    window.__beeprd?.openModal?.('share');
                    toast('Opened share (signal)');
                  }
                }}
                style={{padding:'14px 18px', borderTop: i===0 ? '0' : '1px solid var(--line-2)', cursor:'pointer'}}
              >
                <PlatformIcon kind={s.p} size={40}/>
                <div style={{flex:1, minWidth:0}}>
                  <div className="row between">
                    <div className="row gap-sm">
                      <span style={{fontSize:14, fontWeight:600}}>{s.t}</span>
                      {s.unread && <span className="dot" style={{background:'var(--accent)'}}/>}
                    </div>
                    <div className="tiny mono" style={{color:'var(--mute-2)'}}>{s.a}</div>
                  </div>
                  <div className="subtle" style={{marginTop:2, fontSize:13.5}}>{s.s}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{padding:'18px 20px', textAlign:'center', borderTop:'1px solid var(--line-2)'}}>
            <div className="tiny" style={{color:'var(--mute)'}}>That's all for now. We'll beep you when there's something new.</div>
          </div>
        </div>

        <div className="grid" style={{alignContent:'start', gap:14}}>
          <div className="card">
            <div className="card-head"><h3>Filter Signals</h3><button className="link" style={{fontSize:12}} onClick={() => setFilters({range:'All time', type:'All', platform:'All', status:'All'})}>Clear all</button></div>
            <div style={{padding:'14px 18px'}}>
              {[
                { l:'Date Range', k:'range',    opts:['All time','Today','This week','This month'] },
                { l:'Signal Type',k:'type',     opts:['All','Posts','Videos','Audio','Articles'] },
                { l:'Platform',   k:'platform', opts:['All','YouTube','Instagram','LinkedIn','X','Podcast','Blog'] },
                { l:'Status',     k:'status',   opts:['All','Unread','Read','Saved'] },
              ].map((f, i) => (
                <div key={i} className="row between" style={{padding:'8px 0'}}>
                  <span className="subtle">{f.l}</span>
                  <select
                    className="select"
                    style={{width:'auto', minWidth:120, padding:'5px 28px 5px 10px', fontSize:13}}
                    value={filters[f.k]}
                    onChange={(e) => setFilters({...filters, [f.k]: e.target.value})}
                  >
                    {f.opts.map(o => <option key={o}>{o}</option>)}
                  </select>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Signal Summary</h3></div>
            <div style={{padding:'8px 0'}}>
              {[
                { l:'Total Signals', v:'1,248'},
                { l:'This Week',     v:'128'},
                { l:'This Month',    v:'512'},
                { l:'Unread',        v:'24', accent:true},
              ].map((r,i) => (
                <div key={i} className="row between" style={{padding:'10px 18px', borderTop: i===0 ? '0' : '1px solid var(--line-2)'}}>
                  <span className="subtle">{r.l}</span>
                  <span className={"num " + (r.accent ? '' : '')} style={{fontWeight:600, color: r.accent ? 'var(--accent)' : 'var(--ink)'}}>{r.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PageDashboard, PageProfile, PageSignals });