// SP12 · M12 — Analytics studio
// Event pipeline, dashboards, cohort reports, custom events

const Analytics = ({ setPage }) => {
  const [view, setView] = React.useState('overview');
  const [range, setRange] = React.useState('7d');

  return (
    <div style={{
      display:'grid',
      gridTemplateColumns:'240px 1fr',
      minHeight:'100vh',
      background:'#070708',
      color:'var(--ink)',
      fontSize:14
    }}>
      <AnalyticsSidebar view={view} setView={setView} setPage={setPage}/>
      <div style={{display:'flex',flexDirection:'column',minWidth:0}}>
        <AnalyticsTopbar view={view} range={range} setRange={setRange}/>
        <div style={{flex:1, overflow:'auto'}}>
          {view === 'overview'  && <AOverview range={range}/>}
          {view === 'realtime'  && <ARealtime/>}
          {view === 'events'    && <AEvents/>}
          {view === 'funnels'   && <AFunnels/>}
          {view === 'cohorts'   && <ACohorts/>}
          {view === 'pipeline'  && <APipeline/>}
          {view === 'alerts'    && <AAlerts/>}
          {view === 'reports'   && <AReports/>}
        </div>
      </div>
    </div>
  );
};

// ─── SIDEBAR ─────────────────────────────────────────────────────
const AnalyticsSidebar = ({ view, setView, setPage }) => {
  const items = [
    ['overview',  '◐', 'Overview',  null],
    ['realtime',  '⦿', 'Realtime',  '142'],
    ['events',    '◇', 'Events',    '38'],
    ['funnels',   '⌖', 'Funnels',   '6'],
    ['cohorts',   '◍', 'Cohorts',   '12'],
    ['pipeline',  '◈', 'Pipeline',  null],
    ['alerts',    '△', 'Alerts',    '3'],
    ['reports',   '☱', 'Reports',   null],
  ];
  return (
    <aside style={{
      borderRight:'1px solid var(--line)',
      background:'#0a0a0b',
      display:'flex', flexDirection:'column',
      position:'sticky', top:0, height:'100vh'
    }}>
      <div style={{padding:'16px 18px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', gap:10}}>
        <span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',width:28,height:28,border:'1px solid var(--accent)',borderRadius:8,color:'var(--accent)',background:'rgba(212,255,58,0.06)'}}>↗</span>
        <div style={{flex:1, minWidth:0}}>
          <div style={{fontWeight:600,fontSize:13,letterSpacing:'-0.005em',lineHeight:1.1}}>Analytics</div>
          <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginTop:2}}>M12 · SP12 · v0.1</div>
        </div>
        <button onClick={()=>setPage('cms')} title="Back to CMS" style={{padding:5,borderRadius:6,color:'var(--ink-3)'}}>↗</button>
      </div>

      <div style={{padding:'14px 12px', display:'flex', flexDirection:'column', gap:2, flex:1, overflow:'auto'}}>
        <div style={{padding:'10px 10px 6px'}}>
          <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>Workspace</span>
        </div>
        {items.slice(0,5).map(([id,ic,l,c]) => (
          <ASidebarItem key={id} active={view===id} onClick={()=>setView(id)} icon={ic} label={l} count={c}/>
        ))}

        <div style={{padding:'14px 10px 6px'}}>
          <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>Plumbing</span>
        </div>
        {items.slice(5).map(([id,ic,l,c]) => (
          <ASidebarItem key={id} active={view===id} onClick={()=>setView(id)} icon={ic} label={l} count={c}/>
        ))}

        <div style={{padding:'14px 10px 6px'}}>
          <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>Jump to</span>
        </div>
        <ASidebarItem icon="▤" label="CMS admin"      onClick={()=>setPage('cms')}/>
        <ASidebarItem icon="✉" label="Email studio"   onClick={()=>setPage('email')}/>
        <ASidebarItem icon="◉" label="Client portal"  onClick={()=>setPage('portal')}/>
        <ASidebarItem icon="▢" label="Project plan"   onClick={()=>setPage('plan')}/>
        <ASidebarItem icon="↗" label="Public site"    onClick={()=>setPage('home')}/>
      </div>

      <div style={{padding:'12px 12px', borderTop:'1px solid var(--line)'}}>
        <div style={{padding:'10px 12px',borderRadius:8,background:'linear-gradient(135deg, rgba(212,255,58,0.08), transparent)',border:'1px solid rgba(212,255,58,0.25)'}}>
          <div className="mono" style={{fontSize:9,color:'var(--accent)',letterSpacing:'0.08em',marginBottom:6}}>● PIPELINE LIVE</div>
          <div style={{fontSize:11,color:'var(--ink-2)',lineHeight:1.4}}>Ingesting 2.4k events/min · 99.98% uptime</div>
        </div>
      </div>
    </aside>
  );
};

const ASidebarItem = ({ icon, label, count, active, onClick }) => (
  <button onClick={onClick} style={{
    display:'flex',alignItems:'center',gap:10,padding:'7px 10px',borderRadius:7,
    background: active ? 'rgba(212,255,58,0.08)' : 'transparent',
    color: active ? 'var(--accent)' : 'var(--ink-2)',
    fontSize:13, fontWeight: active ? 500 : 400,
    width:'100%', textAlign:'left', transition:'all .12s ease'
  }}
  onMouseEnter={(e)=>{if(!active) e.currentTarget.style.background='rgba(255,255,255,0.03)'}}
  onMouseLeave={(e)=>{if(!active) e.currentTarget.style.background='transparent'}}>
    <span style={{width:14,fontSize:11,color: active ? 'var(--accent)' : 'var(--ink-3)'}}>{icon}</span>
    <span style={{flex:1,minWidth:0,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{label}</span>
    {count != null && <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{count}</span>}
  </button>
);

// ─── TOPBAR ──────────────────────────────────────────────────────
const AnalyticsTopbar = ({ view, range, setRange }) => {
  const labels = {
    overview:'Overview', realtime:'Realtime', events:'Events',
    funnels:'Funnels', cohorts:'Cohorts', pipeline:'Event pipeline',
    alerts:'Alerts', reports:'Reports'
  };
  const ranges = ['24h','7d','30d','90d','MTD','YTD'];
  return (
    <header style={{
      display:'flex',alignItems:'center',justifyContent:'space-between',
      padding:'12px 24px',borderBottom:'1px solid var(--line)',
      background:'rgba(10,10,11,0.7)',backdropFilter:'blur(12px)',
      position:'sticky',top:0,zIndex:20
    }}>
      <div style={{display:'flex',alignItems:'center',gap:10,fontSize:13,color:'var(--ink-3)'}}>
        <span>Analytics</span>
        <span style={{color:'var(--ink-4)'}}>/</span>
        <span style={{color:'var(--ink)',fontWeight:500}}>{labels[view]}</span>
      </div>

      <div style={{display:'flex',alignItems:'center',gap:8}}>
        <div style={{display:'flex',gap:2,padding:2,borderRadius:7,border:'1px solid var(--line)'}}>
          {ranges.map(r => (
            <button key={r} onClick={()=>setRange(r)} style={{
              padding:'4px 9px',borderRadius:5,fontSize:11,fontFamily:'var(--mono)',letterSpacing:'0.04em',
              background: range===r ? 'var(--bg-3)' : 'transparent',
              color: range===r ? 'var(--ink)' : 'var(--ink-3)',
            }}>{r}</button>
          ))}
        </div>
        <button style={{padding:'7px 11px',borderRadius:8,border:'1px solid var(--line)',color:'var(--ink-2)',fontSize:12}}>Compare</button>
        <button style={{padding:'7px 11px',borderRadius:8,border:'1px solid var(--line)',color:'var(--ink-2)',fontSize:12}}>Export</button>
        <button className="btn btn-primary" style={{padding:'7px 12px',fontSize:12}}>+ New report</button>
      </div>
    </header>
  );
};

// ─── OVERVIEW ────────────────────────────────────────────────────
const sparkPath = (vals, w=160, h=42) => {
  const min = Math.min(...vals), max = Math.max(...vals);
  const dx = w / (vals.length-1);
  return vals.map((v,i)=>{
    const x = i*dx;
    const y = h - ((v-min)/(max-min || 1)) * h;
    return `${i?'L':'M'}${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(' ');
};

const AStat = ({ label, value, delta, sparkData, accent }) => (
  <div style={{padding:'18px 20px',borderRadius:12,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
    <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10,textTransform:'uppercase'}}>{label}</div>
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:12}}>
      <div>
        <div style={{fontSize:28,letterSpacing:'-0.02em',fontWeight:500,marginBottom:6}}>{value}</div>
        <div className="mono" style={{fontSize:10,color: delta.startsWith('+') ? 'var(--ok)' : delta.startsWith('-') ? 'var(--accent-2)' : 'var(--ink-3)',letterSpacing:'0.04em'}}>{delta}</div>
      </div>
      <svg width="120" height="36" viewBox="0 0 160 42" style={{flexShrink:0}}>
        <path d={sparkPath(sparkData)} stroke={accent || 'var(--accent)'} strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <path d={`${sparkPath(sparkData)} L 160 42 L 0 42 Z`} fill={accent || 'var(--accent)'} opacity="0.08"/>
      </svg>
    </div>
  </div>
);

const AOverview = ({ range }) => (
  <div style={{padding:'28px 32px'}}>
    <div style={{marginBottom:24}}>
      <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:6}}>Traffic & conversion</h1>
      <div style={{fontSize:13,color:'var(--ink-3)'}}>Last {range} · all properties · 2.4k events/min ingesting</div>
    </div>

    <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:24}}>
      <AStat label="Visitors" value="42,381" delta="+12.4% vs prev" sparkData={[12,18,15,22,28,24,32,30,38,42]}/>
      <AStat label="Sessions" value="58,204" delta="+8.1% vs prev" sparkData={[18,22,20,28,32,30,38,36,42,46]} accent="#7c9bff"/>
      <AStat label="Conv. rate" value="3.42%" delta="+0.31pp" sparkData={[2,2.4,2.8,2.6,3.0,3.1,3.2,3.0,3.3,3.42]} accent="#a78bfa"/>
      <AStat label="Avg. revenue" value="$184" delta="-2.1% vs prev" sparkData={[200,210,195,205,190,200,185,195,180,184]} accent="#ff8a3a"/>
    </div>

    <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:14, marginBottom:14}}>
      <ACard title="Sessions over time" right={<div style={{display:'flex',gap:14,fontSize:11,color:'var(--ink-3)'}}><LegendDot c="var(--accent)"/>Current<LegendDot c="rgba(255,255,255,0.18)"/>Previous</div>}>
        <BigChart/>
      </ACard>

      <ACard title="Top sources" action="View all →">
        {[
          ['Direct',         32140, 0.42, 'var(--accent)'],
          ['Google · organic',24310, 0.31, '#7c9bff'],
          ['Twitter / X',    11820, 0.15, '#a78bfa'],
          ['Hacker News',     6204, 0.08, '#ff8a3a'],
          ['Email · drip',    3098, 0.04, '#7ee787'],
        ].map(([n,v,p,c],i) => (
          <div key={n} style={{display:'grid',gridTemplateColumns:'1fr 60px 60px',gap:10,alignItems:'center',padding:'10px 0',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
            <div style={{display:'flex',alignItems:'center',gap:10,minWidth:0}}>
              <span style={{width:6,height:6,borderRadius:'50%',background:c,flexShrink:0}}/>
              <span style={{fontSize:12,fontWeight:500,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{n}</span>
            </div>
            <div style={{height:4,background:'var(--bg-3)',borderRadius:2,overflow:'hidden'}}>
              <div style={{width:`${p*100}%`,height:'100%',background:c}}/>
            </div>
            <span className="mono" style={{fontSize:11,color:'var(--ink-2)',letterSpacing:'0.04em',textAlign:'right'}}>{v.toLocaleString()}</span>
          </div>
        ))}
      </ACard>
    </div>

    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14}}>
      <ACard title="Top pages" action="→">
        {[
          ['/',                          18420, 1.2],
          ['/work',                       9210, 0.8],
          ['/work/ledgerline',            6802, 1.4],
          ['/pricing',                    5240, 0.6],
          ['/tools/schema-composer',      3920, 2.1],
          ['/journal/rag-is-dead',        3104, 4.2],
        ].map(([p,v,t],i) => (
          <div key={p} style={{display:'grid',gridTemplateColumns:'1fr 60px 50px',gap:10,padding:'9px 0',borderTop: i>0 ? '1px solid var(--line)' : 'none',alignItems:'center'}}>
            <span className="mono" style={{fontSize:11,color:'var(--ink-2)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p}</span>
            <span className="mono" style={{fontSize:11,color:'var(--ink-3)',textAlign:'right',letterSpacing:'0.04em'}}>{v.toLocaleString()}</span>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',textAlign:'right',letterSpacing:'0.04em'}}>{t}m</span>
          </div>
        ))}
      </ACard>

      <ACard title="Devices · region">
        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          <div>
            <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:8}}>DEVICE MIX</div>
            <div style={{display:'flex',height:8,borderRadius:4,overflow:'hidden'}}>
              <div style={{flex:0.62,background:'var(--accent)'}}/>
              <div style={{flex:0.31,background:'#7c9bff'}}/>
              <div style={{flex:0.07,background:'#a78bfa'}}/>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',marginTop:8,fontSize:11,color:'var(--ink-3)',fontFamily:'var(--mono)',letterSpacing:'0.04em'}}>
              <span>Desktop 62%</span><span>Mobile 31%</span><span>Tab 7%</span>
            </div>
          </div>
          <div>
            <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:8,marginTop:6}}>TOP REGIONS</div>
            {[['US',38],['UK',14],['DE',9],['IN',8],['PK',7]].map(([r,p]) => (
              <div key={r} style={{display:'grid',gridTemplateColumns:'40px 1fr 36px',gap:8,alignItems:'center',padding:'5px 0',fontSize:11}}>
                <span className="mono" style={{color:'var(--ink-2)'}}>{r}</span>
                <div style={{height:4,background:'var(--bg-3)',borderRadius:2,overflow:'hidden'}}>
                  <div style={{width:`${p*2.6}%`,height:'100%',background:'var(--accent)'}}/>
                </div>
                <span className="mono" style={{color:'var(--ink-3)',textAlign:'right',letterSpacing:'0.04em'}}>{p}%</span>
              </div>
            ))}
          </div>
        </div>
      </ACard>

      <ACard title="Conversions" action="Edit →">
        {[
          ['Newsletter signup',      842, 'var(--accent)'],
          ['Pricing → checkout',     314, '#7c9bff'],
          ['Demo booked',             92, '#a78bfa'],
          ['Tool · paid unlock',      48, '#ff8a3a'],
          ['Case study · contact',    36, '#7ee787'],
        ].map(([n,v,c],i) => (
          <div key={n} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 0',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
            <div style={{display:'flex',alignItems:'center',gap:10}}>
              <span style={{width:6,height:6,borderRadius:'50%',background:c}}/>
              <span style={{fontSize:12,fontWeight:500}}>{n}</span>
            </div>
            <span className="mono" style={{fontSize:11,color:'var(--ink-2)',letterSpacing:'0.04em'}}>{v}</span>
          </div>
        ))}
      </ACard>
    </div>
  </div>
);

const ACard = ({ title, action, right, children }) => (
  <div style={{borderRadius:12,border:'1px solid var(--line)',background:'var(--bg-2)',overflow:'hidden'}}>
    <div style={{padding:'14px 18px',display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:'1px solid var(--line)',gap:12}}>
      <div style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em'}}>{title}</div>
      {right || (action && <button className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{action}</button>)}
    </div>
    <div style={{padding:'14px 18px 16px'}}>
      {children}
    </div>
  </div>
);

const LegendDot = ({ c }) => (
  <span style={{display:'inline-flex',alignItems:'center',gap:6,fontFamily:'var(--mono)',fontSize:10,letterSpacing:'0.04em'}}>
    <span style={{width:8,height:2,background:c,borderRadius:1}}/>
  </span>
);

const BigChart = () => {
  const cur  = [12,15,14,18,22,26,24,28,32,30,34,38,36,42,48,46,52,58,54,60,64,62,68,72,70,76,82,80];
  const prev = [10,12,13,15,18,20,22,24,28,26,30,32,30,36,40,38,44,46,44,50,52,50,54,58,56,60,64,62];
  const W = 800, H = 220, P = 24;
  const max = Math.max(...cur, ...prev);
  const dx = (W - P*2) / (cur.length-1);
  const toPath = (arr) => arr.map((v,i)=> `${i?'L':'M'}${(P+i*dx).toFixed(1)} ${(H-P-(v/max)*(H-P*2)).toFixed(1)}`).join(' ');
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%',height:240}}>
      <defs>
        <linearGradient id="agrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.25"/>
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0,1,2,3,4].map(i => (
        <line key={i} x1={P} x2={W-P} y1={P+i*(H-P*2)/4} y2={P+i*(H-P*2)/4} stroke="var(--line)" strokeDasharray="2 4"/>
      ))}
      <path d={`${toPath(cur)} L ${W-P} ${H-P} L ${P} ${H-P} Z`} fill="url(#agrad)"/>
      <path d={toPath(prev)} stroke="rgba(255,255,255,0.22)" strokeWidth="1.5" fill="none" strokeDasharray="3 4"/>
      <path d={toPath(cur)}  stroke="var(--accent)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      {[0,7,14,21,27].map(i => (
        <text key={i} x={P+i*dx} y={H-6} fontSize="9" fill="var(--ink-3)" textAnchor="middle" style={{fontFamily:'var(--mono)',letterSpacing:'0.06em'}}>
          {['MON','TUE','WED','THU','FRI'][[0,7,14,21,27].indexOf(i)]}
        </text>
      ))}
    </svg>
  );
};

// ─── REALTIME ────────────────────────────────────────────────────
const ARealtime = () => {
  const [bars, setBars] = React.useState(Array.from({length:32},()=>Math.random()*0.6+0.2));
  React.useEffect(()=>{
    const id = setInterval(()=> setBars(b => [...b.slice(1), Math.random()*0.6+0.2]), 1200);
    return ()=> clearInterval(id);
  },[]);
  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{marginBottom:24,display:'flex',justifyContent:'space-between',alignItems:'flex-end'}}>
        <div>
          <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
            <span style={{width:8,height:8,borderRadius:'50%',background:'var(--ok)',boxShadow:'0 0 0 4px rgba(126,231,135,0.18)'}}/>
            <span className="mono" style={{fontSize:10,color:'var(--ok)',letterSpacing:'0.08em'}}>LIVE</span>
          </div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500}}>142 visitors right now</h1>
          <div style={{fontSize:13,color:'var(--ink-3)',marginTop:6}}>Updated every 1.2s · last 30 minutes</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:4}}>EVENTS / MIN</div>
          <div style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',color:'var(--accent)'}}>2,418</div>
        </div>
      </div>

      <div style={{display:'flex',alignItems:'flex-end',gap:4,height:140,marginBottom:6}}>
        {bars.map((b,i) => (
          <div key={i} style={{
            flex:1,
            height: `${b*100}%`,
            background:'linear-gradient(180deg, var(--accent), rgba(212,255,58,0.2))',
            borderRadius:2,
            transition:'height .8s ease'
          }}/>
        ))}
      </div>
      <div style={{display:'flex',justifyContent:'space-between',fontSize:10,color:'var(--ink-3)',fontFamily:'var(--mono)',letterSpacing:'0.04em',marginBottom:32}}>
        <span>−30m</span><span>−20m</span><span>−10m</span><span>now</span>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:14}}>
        <ACard title="Live event stream" right={<span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>● TAILING</span>}>
          <div style={{display:'flex',flexDirection:'column',gap:0,maxHeight:380,overflow:'auto'}}>
            {[
              ['just now',  'page_view',         '/work/ledgerline',      'US · Chrome',   'var(--accent)'],
              ['1s ago',    'cta_click',         'pricing.hero.demo',     'UK · Safari',   '#7c9bff'],
              ['2s ago',    'page_view',         '/pricing',              'DE · Firefox',  'var(--accent)'],
              ['3s ago',    'newsletter_signup', 'footer',                'US · Chrome',   '#7ee787'],
              ['5s ago',    'page_view',         '/journal/rag-is-dead',  'IN · Chrome',   'var(--accent)'],
              ['7s ago',    'tool_run',          'schema-composer',       'US · Safari',   '#a78bfa'],
              ['8s ago',    'page_view',         '/',                     'PK · Chrome',   'var(--accent)'],
              ['10s ago',   'session_start',     '—',                     'CA · Chrome',   '#ff8a3a'],
              ['12s ago',   'cta_click',         'home.hero.work',        'US · Mobile',   '#7c9bff'],
              ['14s ago',   'page_view',         '/tools',                'BR · Chrome',   'var(--accent)'],
            ].map(([t,e,p,d,c],i) => (
              <div key={i} style={{display:'grid',gridTemplateColumns:'70px 140px 1fr 130px',gap:12,padding:'10px 4px',borderBottom: i<9 ? '1px solid var(--line)' : 'none',alignItems:'center',animation: i===0 ? 'pageIn .4s' : 'none'}}>
                <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{t}</span>
                <span className="mono" style={{fontSize:10,color:c,padding:'3px 7px',borderRadius:4,background:`${c.startsWith('var') ? 'rgba(212,255,58,0.08)' : c+'18'}`,border:`1px solid ${c.startsWith('var') ? 'rgba(212,255,58,0.3)' : c+'44'}`,letterSpacing:'0.04em',width:'fit-content'}}>{e}</span>
                <span className="mono" style={{fontSize:11,color:'var(--ink-2)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p}</span>
                <span style={{fontSize:11,color:'var(--ink-3)',textAlign:'right'}}>{d}</span>
              </div>
            ))}
          </div>
        </ACard>

        <ACard title="Active pages">
          {[
            ['/',                          42, 'var(--accent)'],
            ['/work',                      28, '#7c9bff'],
            ['/work/ledgerline',           18, '#a78bfa'],
            ['/pricing',                   14, '#ff8a3a'],
            ['/journal/rag-is-dead',       11, '#7ee787'],
            ['/tools/schema-composer',      9, '#22d3ee'],
            ['/services',                   8, '#f472b6'],
            ['/work/northbound',            6, '#fde047'],
            ['/team',                       4, '#a3a3a3'],
            ['/contact',                    2, '#a3a3a3'],
          ].map(([p,n,c],i) => (
            <div key={p} style={{display:'grid',gridTemplateColumns:'1fr 60px 36px',gap:10,padding:'8px 0',borderTop: i>0 ? '1px solid var(--line)' : 'none',alignItems:'center'}}>
              <span className="mono" style={{fontSize:11,color:'var(--ink-2)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p}</span>
              <div style={{height:4,background:'var(--bg-3)',borderRadius:2,overflow:'hidden'}}>
                <div style={{width:`${(n/42)*100}%`,height:'100%',background:c}}/>
              </div>
              <span className="mono" style={{fontSize:11,color:'var(--ink-2)',textAlign:'right',letterSpacing:'0.04em'}}>{n}</span>
            </div>
          ))}
        </ACard>
      </div>
    </div>
  );
};

// ─── EVENTS ──────────────────────────────────────────────────────
const AEvents = () => {
  const events = [
    ['page_view',         'page',     'auto',     2418042, '+12%', 'var(--accent)'],
    ['session_start',     'system',   'auto',      284103, '+8%',  '#7c9bff'],
    ['cta_click',         'click',    'tracked',    48210, '+22%', '#a78bfa'],
    ['newsletter_signup', 'form',     'tracked',     8420, '+4%',  '#7ee787'],
    ['tool_run',          'product',  'tracked',     6204, '+38%', '#ff8a3a'],
    ['video_play',        'media',    'tracked',     4982, '+18%', '#22d3ee'],
    ['demo_booked',       'conversion','tracked',     312, '+6%',  '#f472b6'],
    ['checkout_started',  'commerce', 'tracked',     1840, '−2%',  '#fde047'],
    ['checkout_complete', 'conversion','tracked',     314, '+11%', 'var(--ok)'],
    ['error_thrown',      'system',   'auto',         182, '−14%', 'var(--accent-2)'],
  ];
  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
        <div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Events</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>38 active definitions · 2.97M tracked this period</div>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12}}>SDK snippet</button>
          <button className="btn btn-primary" style={{padding:'8px 14px',fontSize:12}}>+ New event</button>
        </div>
      </div>

      <div style={{border:'1px solid var(--line)',borderRadius:10,overflow:'hidden'}}>
        <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 100px 1fr 100px 36px',gap:14,padding:'12px 18px',background:'rgba(255,255,255,0.02)',borderBottom:'1px solid var(--line)'}}>
          {['Event','Category','Source','Count','Trend',''].map(h => (
            <div key={h} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{h}</div>
          ))}
        </div>
        {events.map(([n,cat,src,v,d,c],i) => (
          <div key={n} style={{display:'grid',gridTemplateColumns:'2fr 1fr 100px 1fr 100px 36px',gap:14,padding:'14px 18px',alignItems:'center',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
            <div style={{display:'flex',alignItems:'center',gap:10}}>
              <span style={{width:24,height:24,borderRadius:6,background:`${c.startsWith('var') ? 'rgba(212,255,58,0.1)' : c+'22'}`,border:`1px solid ${c.startsWith('var') ? 'rgba(212,255,58,0.3)' : c+'55'}`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:10,color:c}}>◇</span>
              <span className="mono" style={{fontSize:12,color:'var(--ink)'}}>{n}</span>
            </div>
            <span style={{fontSize:12,color:'var(--ink-2)'}}>{cat}</span>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',padding:'2px 7px',borderRadius:4,background:'rgba(255,255,255,0.04)',border:'1px solid var(--line)',letterSpacing:'0.04em',textTransform:'uppercase',width:'fit-content'}}>{src}</span>
            <span className="mono" style={{fontSize:12,color:'var(--ink-2)',letterSpacing:'0.04em'}}>{v.toLocaleString()}</span>
            <span className="mono" style={{fontSize:11,color: d.startsWith('+') ? 'var(--ok)' : 'var(--accent-2)',letterSpacing:'0.04em'}}>{d}</span>
            <span style={{color:'var(--ink-3)',justifySelf:'end'}}>⋯</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── FUNNELS ─────────────────────────────────────────────────────
const AFunnels = () => {
  const steps = [
    ['Landing visit',      'page_view = /pricing',         100, 18420],
    ['Plan card click',    'cta_click ∋ plan-*',           48,  8842],
    ['Checkout started',   'checkout_started',             18,  3315],
    ['Payment submitted',  'payment_submitted',            12,  2210],
    ['Subscription active','checkout_complete',             8,  1473],
  ];
  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
        <div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Funnels</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>6 funnels tracked · current: <span style={{color:'var(--ink)'}}>Pricing → subscription</span></div>
        </div>
        <button className="btn btn-primary" style={{padding:'8px 14px',fontSize:12}}>+ New funnel</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:8,marginBottom:24}}>
        {['Pricing → subscription','Tool free → paid','Newsletter signup','Demo booking','Case study read','Contact form'].map((f,i) => (
          <button key={f} style={{padding:'10px 12px',borderRadius:8,fontSize:11,textAlign:'left',
            background: i===0 ? 'rgba(212,255,58,0.06)' : 'var(--bg-2)',
            border:`1px solid ${i===0 ? 'rgba(212,255,58,0.35)' : 'var(--line)'}`,
            color: i===0 ? 'var(--ink)' : 'var(--ink-2)'
          }}>{f}</button>
        ))}
      </div>

      <div style={{padding:'32px 36px',borderRadius:12,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:32}}>
          <div>
            <h2 style={{fontSize:20,fontWeight:500,letterSpacing:'-0.015em'}}>Pricing → subscription</h2>
            <div style={{fontSize:12,color:'var(--ink-3)',marginTop:4}}>5 steps · 30-day window · 8.0% end-to-end</div>
          </div>
          <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',padding:'4px 10px',borderRadius:6,background:'rgba(212,255,58,0.08)',border:'1px solid rgba(212,255,58,0.3)'}}>+1.2pp WoW</div>
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:16}}>
          {steps.map(([name,def,pct,count],i) => {
            const drop = i > 0 ? steps[i-1][2] - pct : 0;
            return (
              <div key={name}>
                <div style={{display:'grid',gridTemplateColumns:'40px 1fr 90px 80px',gap:14,alignItems:'center',marginBottom:8}}>
                  <span className="mono" style={{fontSize:12,color:'var(--ink-3)',letterSpacing:'0.04em'}}>S{i+1}</span>
                  <div>
                    <div style={{fontSize:14,fontWeight:500,marginBottom:2}}>{name}</div>
                    <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{def}</div>
                  </div>
                  <span className="mono" style={{fontSize:13,color:'var(--ink-2)',letterSpacing:'0.04em',textAlign:'right'}}>{count.toLocaleString()}</span>
                  <span className="mono" style={{fontSize:14,fontWeight:500,color:'var(--accent)',letterSpacing:'-0.01em',textAlign:'right'}}>{pct}%</span>
                </div>
                <div style={{height:24,background:'var(--bg-3)',borderRadius:4,overflow:'hidden',position:'relative'}}>
                  <div style={{width:`${pct}%`,height:'100%',background:`linear-gradient(90deg, var(--accent), rgba(212,255,58,0.5))`,borderRadius:4}}/>
                </div>
                {i < steps.length-1 && drop > 0 && (
                  <div style={{fontSize:10,color:'var(--accent-2)',fontFamily:'var(--mono)',letterSpacing:'0.04em',marginTop:6,marginLeft:54}}>
                    ↓ {drop}% drop-off · {(steps[i-1>=0 ? i : 0][3] - count).toLocaleString()} users lost
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ─── COHORTS ─────────────────────────────────────────────────────
const ACohorts = () => {
  const cohorts = [
    ['W36 · Sep 1',  1240, [100, 64, 48, 38, 32, 28, 26, 24, 22, 21, 20, 19]],
    ['W37 · Sep 8',  1382, [100, 68, 52, 42, 36, 32, 28, 26, 24, 22, 21,  -1]],
    ['W38 · Sep 15', 1520, [100, 71, 56, 46, 38, 34, 30, 28, 25, 23, -1, -1]],
    ['W39 · Sep 22', 1610, [100, 72, 58, 48, 40, 36, 32, 29, 26, -1, -1, -1]],
    ['W40 · Sep 29', 1748, [100, 74, 60, 50, 42, 38, 34, 30, -1, -1, -1, -1]],
    ['W41 · Oct 6',  1820, [100, 76, 62, 52, 44, 40, 35, -1, -1, -1, -1, -1]],
    ['W42 · Oct 13', 1942, [100, 78, 64, 54, 46, 42, -1, -1, -1, -1, -1, -1]],
    ['W43 · Oct 20', 2104, [100, 80, 66, 56, 48, -1, -1, -1, -1, -1, -1, -1]],
    ['W44 · Oct 27', 2280, [100, 82, 68, 58, -1, -1, -1, -1, -1, -1, -1, -1]],
  ];
  const cell = (v) => {
    if (v < 0) return { bg:'transparent', c:'var(--ink-4)', t:'—' };
    const opacity = v / 100;
    return { bg:`rgba(212,255,58,${opacity*0.7})`, c: v > 50 ? '#0a0a0a' : 'var(--ink)', t:`${v}%` };
  };
  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
        <div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Cohort retention</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>Weekly cohorts · 12-week horizon · returning &gt; 0 events</div>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button style={{padding:'7px 11px',borderRadius:8,border:'1px solid var(--line)',color:'var(--ink-2)',fontSize:12}}>Weekly</button>
          <button style={{padding:'7px 11px',borderRadius:8,border:'1px solid var(--line)',color:'var(--ink-3)',fontSize:12,background:'transparent'}}>Monthly</button>
          <button className="btn btn-ghost" style={{padding:'7px 11px',fontSize:12}}>Export</button>
        </div>
      </div>

      <div style={{padding:'20px 24px',borderRadius:12,border:'1px solid var(--line)',background:'var(--bg-2)',overflow:'auto'}}>
        <div style={{minWidth:980}}>
          <div style={{display:'grid',gridTemplateColumns:'140px 90px repeat(12,1fr)',gap:4,marginBottom:8}}>
            <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em'}}>COHORT</div>
            <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',textAlign:'right'}}>USERS</div>
            {Array.from({length:12},(_,i)=>(
              <div key={i} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',textAlign:'center'}}>W{i}</div>
            ))}
          </div>
          {cohorts.map(([name,users,vals]) => (
            <div key={name} style={{display:'grid',gridTemplateColumns:'140px 90px repeat(12,1fr)',gap:4,marginBottom:4,alignItems:'center'}}>
              <span style={{fontSize:12,color:'var(--ink-2)'}}>{name}</span>
              <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'right',paddingRight:10}}>{users.toLocaleString()}</span>
              {vals.map((v,i) => {
                const s = cell(v);
                return (
                  <div key={i} style={{height:32,borderRadius:5,background:s.bg,border: v<0 ? '1px dashed var(--line)' : '1px solid rgba(212,255,58,0.18)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontFamily:'var(--mono)',color:s.c,letterSpacing:'0.04em'}}>{s.t}</div>
                );
              })}
            </div>
          ))}
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,marginTop:24}}>
        <ACard title="W1 retention">
          <div style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',marginBottom:4}}>74%</div>
          <div className="mono" style={{fontSize:10,color:'var(--ok)',letterSpacing:'0.04em'}}>+8pp vs 8 weeks ago</div>
        </ACard>
        <ACard title="W4 retention">
          <div style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',marginBottom:4}}>42%</div>
          <div className="mono" style={{fontSize:10,color:'var(--ok)',letterSpacing:'0.04em'}}>+6pp vs 8 weeks ago</div>
        </ACard>
        <ACard title="W12 retention">
          <div style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',marginBottom:4}}>19%</div>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>baseline · 1 cohort complete</div>
        </ACard>
      </div>
    </div>
  );
};

// ─── PIPELINE ────────────────────────────────────────────────────
const APipeline = () => {
  const nodes = [
    ['Browser SDK',     'solidatoms.js · 4.2 KB', 'var(--accent)',  '2.4k/min'],
    ['Edge collector',  'edge.solidatoms.com',    '#7c9bff',         '2.4k/min'],
    ['Validation',      'schema v3.1',            '#a78bfa',         '2.39k/min'],
    ['Stream queue',    'Inngest · 24ms p50',     '#ff8a3a',         '2.39k/min'],
    ['Warehouse',       'Postgres · events',      '#7ee787',         '2.39k/min'],
    ['Materialized',    '14 rollup views',        '#22d3ee',         '/15s'],
    ['Dashboards',      'API · GraphQL',          'var(--accent)',   'live'],
  ];
  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
        <div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Event pipeline</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>Ingestion → validation → store → roll-up · 99.98% uptime · p99 184ms</div>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12}}>Schema</button>
          <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12}}>API keys</button>
          <button className="btn btn-primary" style={{padding:'8px 14px',fontSize:12}}>Deploy</button>
        </div>
      </div>

      <div style={{padding:'32px 24px',borderRadius:12,border:'1px solid var(--line)',background:'var(--bg-2)',marginBottom:24}}>
        <div style={{display:'flex',alignItems:'center',gap:0,justifyContent:'space-between',overflow:'auto'}}>
          {nodes.map(([n,sub,c,rate],i) => (
            <React.Fragment key={n}>
              <div style={{padding:'14px 14px',borderRadius:10,border:`1px solid ${c.startsWith('var')?'rgba(212,255,58,0.3)':c+'55'}`,background:`${c.startsWith('var')?'rgba(212,255,58,0.04)':c+'15'}`,minWidth:130,textAlign:'center'}}>
                <div style={{width:34,height:34,borderRadius:8,background:`${c.startsWith('var')?'rgba(212,255,58,0.15)':c+'33'}`,display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 10px',color:c,fontSize:14}}>◈</div>
                <div style={{fontSize:12,fontWeight:500,marginBottom:4}}>{n}</div>
                <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.04em',marginBottom:6}}>{sub}</div>
                <div className="mono" style={{fontSize:9,color:c,letterSpacing:'0.04em',padding:'2px 6px',background:`${c.startsWith('var')?'rgba(212,255,58,0.1)':c+'22'}`,borderRadius:4,display:'inline-block'}}>{rate}</div>
              </div>
              {i < nodes.length-1 && (
                <div style={{flex:1,height:1,background:`linear-gradient(90deg, ${c.startsWith('var')?'rgba(212,255,58,0.4)':c+'88'}, ${nodes[i+1][2].startsWith('var')?'rgba(212,255,58,0.4)':nodes[i+1][2]+'88'})`,minWidth:14,maxWidth:40}}/>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr 1fr',gap:14}}>
        <AStat label="Throughput" value="2,418/min" delta="+12% vs 7d" sparkData={[18,22,20,28,32,30,38,36,42,46]}/>
        <AStat label="Drop rate" value="0.18%" delta="-0.04pp" sparkData={[0.4,0.3,0.35,0.25,0.2,0.22,0.18,0.18,0.16,0.18]} accent="var(--accent-2)"/>
        <AStat label="p50 latency" value="24ms" delta="-2ms" sparkData={[28,30,26,24,26,24,22,24,22,24]} accent="#7c9bff"/>
        <AStat label="Storage" value="84 GB" delta="+1.2 GB / day" sparkData={[68,70,72,74,76,78,80,82,83,84]} accent="#a78bfa"/>
      </div>

      <div style={{marginTop:24,padding:'20px 22px',borderRadius:12,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
          <div style={{fontSize:13,fontWeight:500}}>SDK snippet</div>
          <button className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>COPY</button>
        </div>
        <pre style={{fontSize:12,fontFamily:'var(--mono)',color:'var(--ink-2)',lineHeight:1.7,background:'#070708',padding:'14px 18px',borderRadius:8,border:'1px solid var(--line)',overflow:'auto'}}>{`<script>
  import { Atoms } from 'https://cdn.solidatoms.com/v1/sdk.js';
  Atoms.init({ key: 'pk_live_*****' });
  Atoms.track('cta_click', { id: 'home.hero.work' });
</script>`}</pre>
      </div>
    </div>
  );
};

// ─── ALERTS ──────────────────────────────────────────────────────
const AAlerts = () => {
  const alerts = [
    ['firing',  'Error rate spike',     'error_thrown > 200/min for 5m', '/api/checkout', '14m ago', 'var(--accent-2)'],
    ['firing',  'Conversion dip',       'conv_rate < 2.8% for 1h',       'pricing',       '38m ago', 'var(--warn)'],
    ['firing',  'Newsletter slowing',   'signup_rate < 30/day',          'site-wide',     '2h ago',  'var(--warn)'],
    ['ok',      'Realtime visitors',    'live_users > 200',              'site-wide',     '—',       'var(--ok)'],
    ['ok',      'Pipeline lag',         'p99 > 500ms for 2m',            'pipeline',      '—',       'var(--ok)'],
    ['ok',      'Tool usage healthy',   'tool_run > 100/day',            'tools',         '—',       'var(--ok)'],
    ['paused',  'Demo bookings',        'demo_booked < 5/wk',            'pricing',       '3d ago',  'var(--ink-3)'],
  ];
  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
        <div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Alerts</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>7 active rules · <span style={{color:'var(--accent-2)'}}>3 firing</span> · routed to Slack #atoms-alerts</div>
        </div>
        <button className="btn btn-primary" style={{padding:'8px 14px',fontSize:12}}>+ New rule</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:24}}>
        {[
          ['Firing', '3', 'var(--accent-2)'],
          ['Healthy', '3', 'var(--ok)'],
          ['Paused', '1', 'var(--ink-3)'],
          ['Avg. MTTR', '14m', 'var(--ink-2)'],
        ].map(([l,v,c]) => (
          <div key={l} style={{padding:'18px 20px',borderRadius:12,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
            <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10,textTransform:'uppercase'}}>{l}</div>
            <div style={{fontSize:28,letterSpacing:'-0.02em',fontWeight:500,color:c}}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{border:'1px solid var(--line)',borderRadius:10,overflow:'hidden'}}>
        <div style={{display:'grid',gridTemplateColumns:'90px 1.4fr 1.6fr 1fr 90px 36px',gap:14,padding:'12px 18px',background:'rgba(255,255,255,0.02)',borderBottom:'1px solid var(--line)'}}>
          {['Status','Rule','Condition','Scope','Last fired',''].map(h => (
            <div key={h} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{h}</div>
          ))}
        </div>
        {alerts.map(([s,name,cond,scope,t,c],i) => (
          <div key={name} style={{display:'grid',gridTemplateColumns:'90px 1.4fr 1.6fr 1fr 90px 36px',gap:14,padding:'14px 18px',alignItems:'center',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
            <span className="mono" style={{fontSize:10,color:c,padding:'3px 8px',borderRadius:5,background:`${c.includes('var(--accent-2)') ? 'rgba(255,90,58,0.1)' : c.includes('warn') ? 'rgba(255,180,58,0.1)' : c.includes('ok') ? 'rgba(126,231,135,0.1)' : 'rgba(255,255,255,0.04)'}`,border:`1px solid ${c}55`,letterSpacing:'0.04em',textTransform:'uppercase',width:'fit-content'}}>{s === 'firing' ? '● ' : ''}{s}</span>
            <span style={{fontSize:13,fontWeight:500}}>{name}</span>
            <span className="mono" style={{fontSize:11,color:'var(--ink-2)',letterSpacing:'0.02em'}}>{cond}</span>
            <span style={{fontSize:12,color:'var(--ink-2)'}}>{scope}</span>
            <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{t}</span>
            <span style={{color:'var(--ink-3)',justifySelf:'end'}}>⋯</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── REPORTS ─────────────────────────────────────────────────────
const AReports = () => {
  const reports = [
    ['Weekly traffic digest','Mon 09:00','Hassan, Sana','Email','var(--accent)','active'],
    ['Conversion deep-dive','1st of month','Hassan','Email + Slack','#7c9bff','active'],
    ['Tool engagement','Thu 17:00','Bilal, Amir','Slack','#a78bfa','active'],
    ['Cohort retention','Bi-weekly Fri','Hassan, Sana','Notion','#ff8a3a','active'],
    ['Q4 board pack','Quarterly','Hassan','PDF','#7ee787','draft'],
    ['Investor metrics','Monthly · 5th','Hassan','PDF','#22d3ee','active'],
  ];
  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
        <div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Scheduled reports</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>6 reports · 5 active · 4 delivered this week</div>
        </div>
        <button className="btn btn-primary" style={{padding:'8px 14px',fontSize:12}}>+ New report</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(320px,1fr))',gap:14}}>
        {reports.map(([n,cad,to,via,c,s]) => (
          <div key={n} className="card" style={{padding:'20px 22px'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:14}}>
              <span style={{width:32,height:32,borderRadius:8,background:`${c.startsWith('var')?'rgba(212,255,58,0.1)':c+'22'}`,border:`1px solid ${c.startsWith('var')?'rgba(212,255,58,0.3)':c+'55'}`,display:'flex',alignItems:'center',justifyContent:'center',color:c,fontSize:14}}>☱</span>
              <span className="mono" style={{fontSize:9,color: s==='active' ? 'var(--ok)' : 'var(--ink-3)',padding:'3px 7px',borderRadius:4,background: s==='active' ? 'rgba(126,231,135,0.1)' : 'rgba(255,255,255,0.04)',border:`1px solid ${s==='active' ? 'rgba(126,231,135,0.3)' : 'var(--line-2)'}`,letterSpacing:'0.06em',textTransform:'uppercase'}}>{s}</span>
            </div>
            <div style={{fontSize:15,fontWeight:500,letterSpacing:'-0.005em',marginBottom:12}}>{n}</div>
            <div style={{display:'flex',flexDirection:'column',gap:6,paddingTop:12,borderTop:'1px solid var(--line)'}}>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:11}}>
                <span style={{color:'var(--ink-3)'}}>Cadence</span>
                <span className="mono" style={{color:'var(--ink-2)',letterSpacing:'0.04em'}}>{cad}</span>
              </div>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:11}}>
                <span style={{color:'var(--ink-3)'}}>Recipients</span>
                <span style={{color:'var(--ink-2)'}}>{to}</span>
              </div>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:11}}>
                <span style={{color:'var(--ink-3)'}}>Via</span>
                <span style={{color:'var(--ink-2)'}}>{via}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.Analytics = Analytics;