// screenshots.jsx — designed placeholder app UI for Composer OS sections.
// Each component renders a ~16:10 "screenshot" that mimics the real app's
// density and visual language (left nav, main content, right rail).
// Real screenshots will replace these one by one. The Projects section uses
// a real PNG already; the rest are rendered from these components.

const APP_BG       = '#faf8f5';
const APP_INK      = '#1c1a17';
const APP_INK_SOFT = 'rgba(28,26,23,0.62)';
const APP_INK_MUTE = 'rgba(28,26,23,0.42)';
const APP_LINE     = 'rgba(28,26,23,0.10)';
const APP_SIDEBAR  = '#f2efe8';
const APP_HOVER    = 'rgba(122,155,126,0.12)';

// left sidebar common to every screenshot
function AppSidebar({ active = 'Home', accent = '#7a9b7e' }) {
  const items = [
    { icon: '⌂', label: 'Home' },
    { icon: '◫', label: 'Studio' },
    { icon: '☰', label: 'Library' },
    { icon: '▤', label: 'Projects' },
    { icon: '♡', label: 'Health' },
  ];
  return (
    <div style={{
      width: 170, flexShrink: 0, background: APP_SIDEBAR, padding: '14px 10px',
      borderRight: `1px solid ${APP_LINE}`, fontSize: 11, color: APP_INK,
      display: 'flex', flexDirection: 'column', gap: 2,
    }}>
      <div style={{padding:'6px 10px',fontSize:10,letterSpacing:1.2,
        textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>Composer OS</div>
      {items.map(i => (
        <div key={i.label} style={{
          display:'flex',alignItems:'center',gap:8,padding:'6px 10px',borderRadius:4,
          background: i.label===active ? accent + '22' : 'transparent',
          color: i.label===active ? accent : APP_INK,
          fontWeight: i.label===active ? 500 : 400,
        }}>
          <span style={{width:14,textAlign:'center',opacity:0.7}}>{i.icon}</span>
          <span>{i.label}</span>
        </div>
      ))}
      <div style={{height:14}}/>
      <div style={{padding:'6px 10px',fontSize:9,letterSpacing:1.2,
        textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>Projects</div>
      {['Super Team Canada','Simmerdown','HotWheels'].map(p=>(
        <div key={p} style={{padding:'5px 10px',fontSize:11,color:APP_INK_SOFT}}>
          <span style={{opacity:0.5,marginRight:6}}>▸</span>{p}
        </div>
      ))}
      <div style={{flex:1}}/>
      <div style={{padding:'6px 10px',display:'flex',alignItems:'center',gap:8,fontSize:11}}>
        <span style={{width:14,textAlign:'center',opacity:0.7}}>✦</span>
        <span>Aria</span>
      </div>
    </div>
  );
}

// Generic frame around every screenshot (macOS-ish traffic lights + searchbar)
function AppFrame({ children, title = '', accent = '#7a9b7e' }) {
  return (
    <div style={{
      width: '100%', aspectRatio: '16 / 10',
      background: APP_BG, border: `1px solid ${APP_LINE}`,
      borderRadius: 10, overflow: 'hidden', position: 'relative',
      fontFamily: "'Inter Tight', 'Inter', -apple-system, sans-serif",
      color: APP_INK, fontSize: 11, lineHeight: 1.4,
      boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)',
    }}>
      {/* toolbar */}
      <div style={{
        height:28, borderBottom:`1px solid ${APP_LINE}`, background:'#eeeae2',
        display:'flex', alignItems:'center', padding:'0 10px', gap:8,
      }}>
        <div style={{display:'flex',gap:5}}>
          {['#ed6a5e','#f4bf50','#61c454'].map(c=>
            <div key={c} style={{width:9,height:9,borderRadius:99,background:c}}/>
          )}
        </div>
        <div style={{flex:1,display:'flex',justifyContent:'center'}}>
          <div style={{fontSize:10,color:APP_INK_MUTE,letterSpacing:0.2}}>{title}</div>
        </div>
        <div style={{width:40}}/>
      </div>
      <div style={{display:'flex',height:'calc(100% - 28px)'}}>
        {children}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// HOME screenshots
// ──────────────────────────────────────────────────────────────

function HomeDashboard({ accent = '#7a9b7e' }) {
  return (
    <AppFrame title="Home — Tuesday, 21 April" accent={accent}>
      <AppSidebar active="Home" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:12}}>
        {/* greeting */}
        <div>
          <div style={{fontSize:10,letterSpacing:1.5,textTransform:'uppercase',
            color:APP_INK_MUTE,fontWeight:600}}>Tuesday · 21 April</div>
          <div style={{fontSize:22,fontWeight:500,letterSpacing:-0.4,marginTop:2}}>
            Good morning, Marcelo.
          </div>
        </div>
        {/* 2x2 tile grid */}
        <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:10,flex:1}}>
          {/* today's cues */}
          <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:12,background:'#fff',
            display:'flex',flexDirection:'column',gap:8,minHeight:0}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <div style={{fontWeight:500}}>Today's cues</div>
              <div style={{fontSize:9,color:APP_INK_MUTE}}>6 due</div>
            </div>
            {['1M8 · Hero Moment','2M3 · Storage Music','2M5 · Niagara Hero','3M1 · Sneaky','3M2 · Limbo'].map((c,i)=>(
              <div key={c} style={{display:'flex',alignItems:'center',gap:8,fontSize:11}}>
                <div style={{width:6,height:6,borderRadius:99,background:i<2?accent:'#c9a876'}}/>
                <div style={{flex:1}}>{c}</div>
                <div style={{fontSize:9,color:APP_INK_MUTE,fontFamily:'ui-monospace, monospace'}}>0:3{i}</div>
              </div>
            ))}
          </div>
          {/* weather / health */}
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff',flex:1}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',
                color:APP_INK_MUTE,fontWeight:600}}>Toronto</div>
              <div style={{display:'flex',alignItems:'baseline',gap:6,marginTop:4}}>
                <div style={{fontSize:24,fontWeight:500,letterSpacing:-0.5}}>12°</div>
                <div style={{fontSize:10,color:APP_INK_SOFT}}>partly cloudy</div>
              </div>
              <div style={{fontSize:9,color:APP_INK_MUTE,marginTop:2}}>sunset 20:14</div>
            </div>
            <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff',flex:1}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',
                color:APP_INK_MUTE,fontWeight:600}}>Sleep · 7h 42m</div>
              <div style={{display:'flex',gap:2,marginTop:6,height:18,alignItems:'flex-end'}}>
                {[8,6,9,7,8,9,7].map((h,i)=>(
                  <div key={i} style={{flex:1,height:h*2,background:accent,opacity:0.35+i*0.1,borderRadius:2}}/>
                ))}
              </div>
            </div>
          </div>
        </div>
        {/* deadlines strip */}
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:6}}>
            <div style={{fontWeight:500,fontSize:11}}>Upcoming deadlines</div>
            <div style={{fontSize:9,color:APP_INK_MUTE}}>next 14 days</div>
          </div>
          <div style={{display:'flex',gap:8,fontSize:10}}>
            {[
              {p:'Super Team Canada',d:'STC 216 V1 Pass',when:'Today'},
              {p:'Simmerdown',d:'Ep 07 lock',when:'Fri'},
              {p:'HotWheels',d:'Pilot delivery',when:'Apr 28'},
            ].map(x=>(
              <div key={x.p} style={{flex:1,padding:8,border:`1px solid ${APP_LINE}`,borderRadius:4}}>
                <div style={{fontSize:9,color:APP_INK_MUTE}}>{x.p}</div>
                <div style={{marginTop:2,fontWeight:500}}>{x.d}</div>
                <div style={{fontSize:9,color:accent,marginTop:2}}>{x.when}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

function HomeCues({ accent = '#7a9b7e' }) {
  return (
    <AppFrame title="Home — Today's cues" accent={accent}>
      <AppSidebar active="Home" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginBottom:10}}>Today</div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'50px 1fr 90px 50px 70px 50px',
            padding:'8px 10px',fontSize:9,letterSpacing:1,textTransform:'uppercase',
            color:APP_INK_MUTE,borderBottom:`1px solid ${APP_LINE}`,fontWeight:600}}>
            <div>Cue</div><div>Title</div><div>Status</div><div>V</div><div>TC</div><div>Dur</div>
          </div>
          {[
            {c:'1M0',t:'Title Card',s:'Completed',v:'V1',tc:'01:00:00',d:'0:03'},
            {c:'1M1',t:'Previously',s:'Completed',v:'V1',tc:'01:00:03',d:'0:35',hi:true},
            {c:'1M1B',t:'Sandwich Guy Source',s:'Completed',v:'V1',tc:'01:00:39',d:'0:07'},
            {c:'1M2',t:'Sad News',s:'Completed',v:'V1',tc:'01:04:02',d:'0:28'},
            {c:'1M2B',t:'Technical Difficulties',s:'Completed',v:'V1',tc:'01:01:15',d:'0:03'},
            {c:'1M3',t:'Breaking News',s:'Completed',v:'V1',tc:'01:01:19',d:'0:40'},
            {c:'1M4',t:'School Transition',s:'Completed',v:'V1',tc:'01:02:16',d:'0:02'},
            {c:'1M4B',t:'Notification Sting',s:'Completed',v:'V1',tc:'01:02:17',d:'0:01'},
            {c:'1M5',t:'News',s:'Completed',v:'V1',tc:'01:02:21',d:'0:23'},
            {c:'1M6',t:'Bagpipes',s:'Completed',v:'V1',tc:'01:02:44',d:'0:35'},
            {c:'1M8',t:'Hero Moment',s:'Edit',v:'V3',tc:'01:04:37',d:'0:04',warn:true},
          ].map((r,i)=>(
            <div key={r.c} style={{display:'grid',gridTemplateColumns:'50px 1fr 90px 50px 70px 50px',
              padding:'7px 10px',fontSize:10,borderBottom:`1px solid ${APP_LINE}`,
              background:r.hi?APP_HOVER:'transparent',
              color:APP_INK,alignItems:'center'}}>
              <div style={{fontFamily:'ui-monospace, monospace',color:APP_INK_SOFT}}>{r.c}</div>
              <div>{r.t}</div>
              <div style={{display:'flex',alignItems:'center',gap:5,fontSize:9}}>
                <div style={{width:5,height:5,borderRadius:99,background:r.warn?'#c9a876':accent}}/>
                {r.s}
              </div>
              <div style={{fontSize:9,color:APP_INK_SOFT}}>{r.v}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.tc}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.d}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function HomeHealth({ accent = '#7a9b7e' }) {
  return (
    <AppFrame title="Home — Wellness" accent={accent}>
      <AppSidebar active="Home" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:12}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Wellness this week</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10}}>
          {[
            {l:'Sleep',v:'7h 42m',d:'+12m'},
            {l:'Energy',v:'74%',d:'stable'},
            {l:'Stress',v:'Low',d:'-8%'},
            {l:'Desk hrs',v:'6h 10m',d:'under cap'},
          ].map(x=>(
            <div key={x.l} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>{x.l}</div>
              <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginTop:3}}>{x.v}</div>
              <div style={{fontSize:9,color:accent,marginTop:1}}>{x.d}</div>
            </div>
          ))}
        </div>
        {/* chart */}
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,padding:12,background:'#fff',
          display:'flex',flexDirection:'column',gap:6}}>
          <div style={{fontSize:10,color:APP_INK_SOFT}}>7-day workload vs energy</div>
          <svg viewBox="0 0 400 120" preserveAspectRatio="none" style={{width:'100%',flex:1}}>
            <path d="M10,90 L70,60 L130,70 L190,40 L250,55 L310,30 L370,45"
              fill="none" stroke={accent} strokeWidth="2"/>
            <path d="M10,100 L70,85 L130,75 L190,80 L250,65 L310,70 L370,55"
              fill="none" stroke="#c9a876" strokeWidth="2" strokeDasharray="3 3"/>
            {[10,70,130,190,250,310,370].map(x=>
              <line key={x} x1={x} y1="0" x2={x} y2="120" stroke={APP_LINE} strokeWidth="0.5"/>
            )}
          </svg>
          <div style={{display:'flex',gap:14,fontSize:9,color:APP_INK_MUTE}}>
            <span><span style={{display:'inline-block',width:8,height:2,background:accent,marginRight:4,verticalAlign:'middle'}}/>Energy</span>
            <span><span style={{display:'inline-block',width:8,height:2,background:'#c9a876',marginRight:4,verticalAlign:'middle'}}/>Workload</span>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

function HomeFocus({ accent = '#c9a876' }) {
  return (
    <AppFrame title="Home — Today's Focus" accent={accent}>
      <AppSidebar active="Home" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        {/* header row */}
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Today's Focus</div>
          <div style={{fontSize:9,color:APP_INK_MUTE,fontFamily:"'JetBrains Mono',monospace",letterSpacing:1.2,textTransform:'uppercase'}}>Tue · Apr 21 · 7:42a</div>
        </div>

        {/* Aria brief — main panel */}
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',
          display:'flex',flexDirection:'column',overflow:'hidden'}}>
          {/* Aria byline */}
          <div style={{display:'flex',alignItems:'center',gap:8,padding:'10px 12px',
            borderBottom:`1px solid ${APP_LINE}`,background:APP_HOVER}}>
            <div style={{width:14,height:14,borderRadius:99,
              background:`conic-gradient(from 0deg, ${accent}, #f2efe8, ${accent})`}}/>
            <div style={{fontSize:10,fontWeight:500}}>Aria · Daily brief</div>
            <div style={{fontSize:9,color:APP_INK_MUTE,marginLeft:'auto'}}>Synthesized just now</div>
          </div>

          {/* body */}
          <div style={{padding:'12px 14px',display:'flex',flexDirection:'column',gap:10,flex:1,minHeight:0}}>
            {/* priority project line */}
            <div>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600,marginBottom:4}}>Priority project</div>
              <div style={{display:'flex',alignItems:'baseline',gap:8}}>
                <div style={{fontSize:14,fontWeight:500,letterSpacing:-0.2}}>Super Team Canada</div>
                <div style={{fontSize:10,color:APP_INK_SOFT}}>Ep 04 · brass session Friday</div>
              </div>
            </div>

            {/* deadline + overdue grid */}
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
              <div style={{border:`1px solid ${APP_LINE}`,borderRadius:5,padding:10}}>
                <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>Today's deadline</div>
                <div style={{fontSize:13,fontWeight:500,letterSpacing:-0.2,marginTop:3}}>1M8 V3 to Jana</div>
                <div style={{fontSize:9,color:accent,marginTop:2}}>by 6:00p · 10h 18m left</div>
              </div>
              <div style={{border:`1px solid ${APP_LINE}`,borderRadius:5,padding:10}}>
                <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>Overdue</div>
                <div style={{fontSize:13,fontWeight:500,letterSpacing:-0.2,marginTop:3}}>2 tasks</div>
                <div style={{fontSize:9,color:'#b26f5c',marginTop:2}}>2M3 mockup · invoice #042</div>
              </div>
            </div>

            {/* what needs doing */}
            <div style={{flex:1,minHeight:0,display:'flex',flexDirection:'column'}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600,marginBottom:6}}>What needs doing</div>
              <div style={{display:'flex',flexDirection:'column',gap:0,flex:1,minHeight:0,overflow:'hidden'}}>
                {[
                  {n:'1',t:'Finish 1M8 V3 pass — Jana sign-off blocks Friday session',m:'~2h'},
                  {n:'2',t:'Send 2M3 mockup to music editor',m:'~30m'},
                  {n:'3',t:'Confirm Lyndhurst booking for May 4',m:'5m'},
                  {n:'4',t:'Reply to Mattel re: HotWheels demo notes',m:'15m'},
                ].map((r,i,arr)=>(
                  <div key={r.n} style={{display:'grid',gridTemplateColumns:'18px 1fr 40px',gap:8,
                    alignItems:'center',padding:'7px 0',
                    borderBottom:i<arr.length-1?`1px solid ${APP_LINE}`:'none',fontSize:11}}>
                    <div style={{fontSize:9,fontFamily:"'JetBrains Mono',monospace",color:APP_INK_MUTE}}>{r.n}</div>
                    <div style={{color:APP_INK,letterSpacing:-0.1}}>{r.t}</div>
                    <div style={{fontSize:9,color:APP_INK_SOFT,textAlign:'right',fontFamily:"'JetBrains Mono',monospace"}}>{r.m}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* footer chips */}
            <div style={{display:'flex',gap:6,marginTop:'auto',paddingTop:6}}>
              <div style={{padding:'5px 10px',border:`1px solid ${APP_LINE}`,borderRadius:99,fontSize:10}}>Block 9–11a for 1M8</div>
              <div style={{padding:'5px 10px',border:`1px solid ${APP_LINE}`,borderRadius:99,fontSize:10}}>Open cue list</div>
              <div style={{padding:'5px 10px',border:`1px solid ${APP_LINE}`,borderRadius:99,fontSize:10}}>Dismiss brief</div>
            </div>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

function HomeDeadlines({ accent = '#c9a876' }) {
  return (
    <AppFrame title="Home — Upcoming deadlines" accent={accent}>
      <AppSidebar active="Home" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:12}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Upcoming deadlines</div>
          <div style={{fontSize:9,color:APP_INK_MUTE,fontFamily:"'JetBrains Mono',monospace",letterSpacing:1.2,textTransform:'uppercase'}}>Across 4 projects</div>
        </div>
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'70px 1fr 130px 64px',
            padding:'8px 12px',fontSize:9,letterSpacing:1,textTransform:'uppercase',
            color:APP_INK_MUTE,borderBottom:`1px solid ${APP_LINE}`,fontWeight:600}}>
            <div>Due</div><div>Milestone</div><div>Project</div><div style={{textAlign:'right'}}>Left</div>
          </div>
          {[
            {due:'Apr 21',m:'1M8 V3 to Jana',p:'Super Team Canada',left:'today',hi:true},
            {due:'Apr 24',m:'Brass session lockdown',p:'Super Team Canada',left:'3d'},
            {due:'Apr 28',m:'2M reel — first pass',p:'HotWheels Spot',left:'7d'},
            {due:'May 02',m:'Mix delivery',p:'Nightfall (S2)',left:'11d'},
            {due:'May 06',m:'Spotting notes due',p:'Untitled A24',left:'15d'},
            {due:'May 12',m:'Final masters + stems',p:'Nightfall (S2)',left:'21d'},
          ].map((r,i,arr)=>(
            <div key={r.m} style={{display:'grid',gridTemplateColumns:'70px 1fr 130px 64px',
              padding:'10px 12px',fontSize:11,alignItems:'center',
              background:r.hi?APP_HOVER:'transparent',
              borderBottom:i<arr.length-1?`1px solid ${APP_LINE}`:'none',color:APP_INK}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,color:APP_INK_SOFT}}>{r.due}</div>
              <div style={{display:'flex',alignItems:'center',gap:7,letterSpacing:-0.1}}>
                <div style={{width:5,height:5,borderRadius:99,background:r.hi?'#b26f5c':accent}}/>
                {r.m}
              </div>
              <div style={{fontSize:10,color:APP_INK_SOFT}}>{r.p}</div>
              <div style={{fontSize:10,textAlign:'right',fontFamily:"'JetBrains Mono',monospace",
                color:r.hi?'#b26f5c':APP_INK_MUTE,fontWeight:r.hi?600:400}}>{r.left}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

// ──────────────────────────────────────────────────────────────
// STUDIO screenshots
// ──────────────────────────────────────────────────────────────

function StudioHardware({ accent = '#b8956a' }) {
  return (
    <AppFrame title="Studio — Hardware" accent={accent}>
      <AppSidebar active="Studio" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Hardware</div>
          <div style={{fontSize:9,color:APP_INK_MUTE}}>42 items · $38,240 insured</div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10}}>
          {[
            {n:'Neumann U87 Ai',c:'Microphones',s:'Active',v:'$3,200'},
            {n:'Focal Trio6 Be',c:'Monitors',s:'Active',v:'$5,400'},
            {n:'UAD Apollo x8p',c:'Interfaces',s:'Active',v:'$2,800'},
            {n:'Roland Juno-106',c:'Synths · Vintage',s:'Service',v:'$2,200'},
            {n:'Moog Sub 37',c:'Synths',s:'Active',v:'$1,700'},
            {n:'Sequential Prophet-6',c:'Synths',s:'Active',v:'$3,400'},
          ].map(h=>(
            <div key={h.n} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{aspectRatio:'16/9',background:'#eeeae2',borderRadius:4,marginBottom:8,
                display:'flex',alignItems:'center',justifyContent:'center'}}>
                <div style={{width:'60%',height:'40%',background:accent,opacity:0.18,borderRadius:3}}/>
              </div>
              <div style={{fontWeight:500,fontSize:11}}>{h.n}</div>
              <div style={{fontSize:9,color:APP_INK_MUTE,marginTop:1}}>{h.c}</div>
              <div style={{display:'flex',justifyContent:'space-between',marginTop:5,fontSize:9}}>
                <span style={{color:h.s==='Service'?'#c9a876':accent}}>● {h.s}</span>
                <span style={{fontFamily:'ui-monospace, monospace',color:APP_INK_SOFT}}>{h.v}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function StudioSoftware({ accent = '#b8956a' }) {
  return (
    <AppFrame title="Studio — Software licenses" accent={accent}>
      <AppSidebar active="Studio" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginBottom:10}}>Software licenses</div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff'}}>
          {[
            {n:'Logic Pro',v:'10.8.1',k:'Perpetual',e:'—',s:'Active'},
            {n:'Cubase Pro',v:'13',k:'USB-eLicenser',e:'2027-01',s:'Active'},
            {n:'Pro Tools Ultimate',v:'2024.6',k:'Annual',e:'2025-11',s:'Renew'},
            {n:'Spitfire BBCSO Pro',v:'1.3',k:'iLok',e:'—',s:'Active'},
            {n:'Vienna Synchron Strings',v:'2.1',k:'Vienna Key',e:'—',s:'Active'},
            {n:'Izotope RX 11',v:'11.1',k:'iLok',e:'—',s:'Active'},
            {n:'FabFilter Pro-Q 4',v:'4.0',k:'Machine',e:'—',s:'Active'},
          ].map((r,i)=>(
            <div key={r.n} style={{display:'grid',gridTemplateColumns:'1.6fr 60px 1fr 80px 80px',
              padding:'9px 12px',fontSize:10,borderBottom:i<6?`1px solid ${APP_LINE}`:'none',alignItems:'center'}}>
              <div style={{fontWeight:500}}>{r.n}</div>
              <div style={{color:APP_INK_SOFT,fontFamily:'ui-monospace, monospace',fontSize:9}}>{r.v}</div>
              <div style={{color:APP_INK_SOFT}}>{r.k}</div>
              <div style={{color:APP_INK_SOFT,fontFamily:'ui-monospace, monospace',fontSize:9}}>{r.e}</div>
              <div style={{fontSize:9,color:r.s==='Renew'?'#c9a876':accent}}>● {r.s}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function StudioFinances({ accent = '#b8956a' }) {
  return (
    <AppFrame title="Studio — Finances" accent={accent}>
      <AppSidebar active="Studio" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Finances · Q2</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10}}>
          {[
            {l:'Revenue',v:'$82,400',d:'+18% QoQ'},
            {l:'Expenses',v:'$14,280',d:'17% of rev'},
            {l:'Outstanding',v:'$21,000',d:'3 invoices'},
          ].map(x=>(
            <div key={x.l} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>{x.l}</div>
              <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginTop:3}}>{x.v}</div>
              <div style={{fontSize:9,color:accent,marginTop:1}}>{x.d}</div>
            </div>
          ))}
        </div>
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,padding:12,background:'#fff'}}>
          <div style={{fontSize:10,color:APP_INK_SOFT,marginBottom:8}}>Recent invoices</div>
          {[
            {c:'Super Team Canada',n:'INV-2026-018',a:'$12,000',s:'Paid'},
            {c:'Simmerdown Prod.',n:'INV-2026-017',a:'$6,400',s:'Sent'},
            {c:'HotWheels · Mattel',n:'INV-2026-015',a:'$14,600',s:'Overdue'},
            {c:'NEMM · Library',n:'INV-2026-012',a:'$3,400',s:'Paid'},
          ].map((r,i)=>(
            <div key={r.n} style={{display:'grid',gridTemplateColumns:'1.3fr 1fr 90px 80px',
              padding:'6px 0',fontSize:10,borderBottom:i<3?`1px solid ${APP_LINE}`:'none',alignItems:'center'}}>
              <div style={{fontWeight:500}}>{r.c}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.n}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:10,textAlign:'right'}}>{r.a}</div>
              <div style={{fontSize:9,textAlign:'right',
                color:r.s==='Overdue'?'#b8565a':r.s==='Sent'?'#c9a876':accent}}>● {r.s}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function StudioSubscriptions({ accent = '#b8956a' }) {
  return (
    <AppFrame title="Studio — Subscriptions & renewals" accent={accent}>
      <AppSidebar active="Studio" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Subscriptions</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>14 active · $312/mo · $1,840/yr</div>
        </div>
        {/* summary tiles */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10}}>
          {[
            {l:'Monthly',v:'$312',d:'9 services'},
            {l:'Annual',v:'$1,840',d:'5 services'},
            {l:'Renewing soon',v:'3',d:'within 30d'},
          ].map(x=>(
            <div key={x.l} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>{x.l}</div>
              <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginTop:3}}>{x.v}</div>
              <div style={{fontSize:9,color:accent,marginTop:1}}>{x.d}</div>
            </div>
          ))}
        </div>
        {/* table */}
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'1.6fr 80px 1fr 90px 80px',
            padding:'8px 12px',background:APP_HOVER,borderBottom:`1px solid ${APP_LINE}`,
            fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>
            <div>Service</div><div>Cycle</div><div>Cost</div><div>Renews</div><div>Status</div>
          </div>
          {[
            {n:'Splice Sounds',c:'Monthly',a:'$12.99',r:'May 14',s:'Active'},
            {n:'Output Arcade',c:'Monthly',a:'$10.00',r:'May 18',s:'Active'},
            {n:'Adobe Creative Cloud',c:'Annual',a:'$599.88',r:'Jun 02',s:'Renewing'},
            {n:'iLok Cloud',c:'Annual',a:'$29.99',r:'May 09',s:'Action'},
            {n:'Dropbox Pro',c:'Annual',a:'$119.88',r:'Aug 21',s:'Active'},
            {n:'1Password Family',c:'Annual',a:'$59.88',r:'Sep 04',s:'Active'},
            {n:'Vienna Symphonic Pass',c:'Monthly',a:'$24.99',r:'May 22',s:'Active'},
          ].map((r,i,arr)=>(
            <div key={r.n} style={{display:'grid',gridTemplateColumns:'1.6fr 80px 1fr 90px 80px',
              padding:'9px 12px',fontSize:10,borderBottom:i<arr.length-1?`1px solid ${APP_LINE}`:'none',alignItems:'center'}}>
              <div style={{fontWeight:500}}>{r.n}</div>
              <div style={{color:APP_INK_SOFT}}>{r.c}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.a}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.r}</div>
              <div style={{fontSize:9,color:r.s==='Action'?'#b8565a':r.s==='Renewing'?'#c9a876':accent}}>● {r.s}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function StudioInvoices({ accent = '#b8956a' }) {
  return (
    <AppFrame title="Studio — Invoices" accent={accent}>
      <AppSidebar active="Studio" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Invoices</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>2026 to date</div>
        </div>
        {/* summary tiles */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10}}>
          {[
            {l:'Paid',v:'$48,800',d:'9 invoices'},
            {l:'Outstanding',v:'$21,000',d:'3 invoices'},
            {l:'Overdue',v:'$14,600',d:'1 invoice'},
          ].map(x=>(
            <div key={x.l} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>{x.l}</div>
              <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginTop:3}}>{x.v}</div>
              <div style={{fontSize:9,color:x.l==='Overdue'?'#b8565a':accent,marginTop:1}}>{x.d}</div>
            </div>
          ))}
        </div>
        {/* invoice list */}
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr 90px 90px 80px',
            padding:'8px 12px',background:APP_HOVER,borderBottom:`1px solid ${APP_LINE}`,
            fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>
            <div>Client</div><div>Number</div><div>Issued</div><div>Amount</div><div>Status</div>
          </div>
          {[
            {c:'Super Team Canada',n:'INV-2026-018',d:'Apr 12',a:'$12,000',s:'Paid'},
            {c:'Simmerdown Prod.',n:'INV-2026-017',d:'Apr 02',a:'$6,400',s:'Sent'},
            {c:'HotWheels · Mattel',n:'INV-2026-015',d:'Mar 18',a:'$14,600',s:'Overdue'},
            {c:'NEMM · Library',n:'INV-2026-012',d:'Mar 04',a:'$3,400',s:'Paid'},
            {c:'Lyndhurst Sessions',n:'INV-2026-011',d:'Feb 28',a:'$2,200',s:'Paid'},
            {c:'Independent · Hayes',n:'INV-2026-009',d:'Feb 14',a:'$5,800',s:'Sent'},
          ].map((r,i,arr)=>(
            <div key={r.n} style={{display:'grid',gridTemplateColumns:'1.4fr 1fr 90px 90px 80px',
              padding:'9px 12px',fontSize:10,borderBottom:i<arr.length-1?`1px solid ${APP_LINE}`:'none',alignItems:'center'}}>
              <div style={{fontWeight:500}}>{r.c}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.n}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.d}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:10}}>{r.a}</div>
              <div style={{fontSize:9,color:r.s==='Overdue'?'#b8565a':r.s==='Sent'?'#c9a876':accent}}>● {r.s}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function StudioTeam({ accent = '#b8956a' }) {
  return (
    <AppFrame title="Studio — Team & contacts" accent={accent}>
      <AppSidebar active="Studio" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Team &amp; contacts</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>28 contacts · 6 active</div>
        </div>
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr 1fr 80px',
            padding:'8px 12px',background:APP_HOVER,borderBottom:`1px solid ${APP_LINE}`,
            fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>
            <div>Name</div><div>Role</div><div>Latest project</div><div>Status</div>
          </div>
          {[
            {n:'Jana Wills',i:'JW',r:'Music editor',p:'Super Team Canada',s:'Active'},
            {n:'Tomas Reyes',i:'TR',r:'Orchestrator',p:'Super Team Canada',s:'Active'},
            {n:'Budapest Scoring',i:'BS',r:'Contractor · Orchestra',p:'Nightfall (S2)',s:'Booked'},
            {n:'Mia Fontaine',i:'MF',r:'Studio assistant',p:'Studio · ongoing',s:'Active'},
            {n:'Lyndhurst Hall',i:'LH',r:'Recording venue',p:'HotWheels Spot',s:'Booked'},
            {n:'Daniel Cho',i:'DC',r:'Mixing engineer',p:'Nightfall (S2)',s:'Idle'},
          ].map((r,i,arr)=>(
            <div key={r.n} style={{display:'grid',gridTemplateColumns:'1.5fr 1fr 1fr 80px',
              padding:'9px 12px',fontSize:10,borderBottom:i<arr.length-1?`1px solid ${APP_LINE}`:'none',alignItems:'center'}}>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <div style={{width:22,height:22,borderRadius:99,background:APP_HOVER,
                  border:`1px solid ${APP_LINE}`,display:'flex',alignItems:'center',justifyContent:'center',
                  fontSize:8,fontWeight:600,color:accent,letterSpacing:0.4}}>{r.i}</div>
                <span style={{fontWeight:500}}>{r.n}</span>
              </div>
              <div style={{color:APP_INK_SOFT}}>{r.r}</div>
              <div style={{color:APP_INK_SOFT}}>{r.p}</div>
              <div style={{fontSize:9,color:r.s==='Idle'?APP_INK_MUTE:r.s==='Booked'?'#c9a876':accent}}>● {r.s}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function LibraryBooks({ accent = '#8b7d73' }) {
  return (
    <AppFrame title="Library — Books & PDFs" accent={accent}>      <AppSidebar active="Library" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginBottom:10}}>Books & PDFs</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:10}}>
          {[
            {t:'On the Track',a:'Davis',c:'#8b4a52'},
            {t:'The Study of Orchestration',a:'Adler',c:'#8a7a6f'},
            {t:'Counterpoint',a:'Fux',c:'#6d8b7a'},
            {t:'The Composer\'s Guide',a:'Karlin',c:'#748ba3'},
            {t:'Hearing & Knowing Music',a:'Mann',c:'#b26f5c'},
            {t:'Complete Idiot\'s Guide',a:'Miller',c:'#8f87a6'},
            {t:'The Jazz Theory Book',a:'Levine',c:'#c59a5b'},
            {t:'Reimagining Music',a:'Taylor',c:'#7a8289'},
            {t:'Harmony & Voice Leading',a:'Aldwell',c:'#6b5d7a'},
            {t:'Film Music Magazine PDF',a:'Archive',c:'#8a9470'},
          ].map(b=>(
            <div key={b.t}>
              <div style={{aspectRatio:'3/4',background:b.c,borderRadius:3,
                display:'flex',alignItems:'flex-end',padding:6,
                boxShadow:'inset 0 0 0 1px rgba(0,0,0,0.1), 2px 2px 0 0 rgba(0,0,0,0.08)'}}>
                <div style={{fontSize:7,color:'rgba(255,255,255,0.8)',fontWeight:500,lineHeight:1.2}}>{b.t}</div>
              </div>
              <div style={{fontSize:9,marginTop:4,fontWeight:500}}>{b.t}</div>
              <div style={{fontSize:8,color:APP_INK_MUTE}}>{b.a}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function LibrarySamples({ accent = '#8b7d73' }) {
  return (
    <AppFrame title="Library — Sample libraries" accent={accent}>
      <AppSidebar active="Library" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginBottom:10}}>Sample libraries</div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff'}}>
          {[
            {n:'Spitfire BBCSO Professional',d:'Full orchestra',f:'620 GB',s:'Installed'},
            {n:'Vienna Synchron Strings Pro',d:'Strings · legato',f:'180 GB',s:'Installed'},
            {n:'Cinesamples CineBrass',d:'Brass · ensemble',f:'72 GB',s:'Installed'},
            {n:'Orchestral Tools Berlin Woodwinds',d:'Woodwinds',f:'48 GB',s:'Installed'},
            {n:'Heavyocity Gravity',d:'Cinematic · hybrid',f:'36 GB',s:'Installed'},
            {n:'Output Arcade',d:'Sampler',f:'Cloud',s:'Subscription'},
            {n:'Spitfire Albion One',d:'Epic · ensemble',f:'58 GB',s:'Installed'},
          ].map((r,i)=>(
            <div key={r.n} style={{display:'grid',gridTemplateColumns:'1.6fr 1fr 80px 90px',
              padding:'9px 12px',fontSize:10,borderBottom:i<6?`1px solid ${APP_LINE}`:'none',alignItems:'center'}}>
              <div style={{fontWeight:500}}>{r.n}</div>
              <div style={{color:APP_INK_SOFT}}>{r.d}</div>
              <div style={{color:APP_INK_SOFT,fontFamily:'ui-monospace, monospace',fontSize:9}}>{r.f}</div>
              <div style={{fontSize:9,color:accent}}>● {r.s}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function LibraryPlugins({ accent = '#8b7d73' }) {
  return (
    <AppFrame title="Library — Plugins" accent={accent}>
      <AppSidebar active="Library" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',marginBottom:10}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Plugins</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>184 plugins · 12 vendors</div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:8}}>
          {[
            {n:'Spitfire Audio',c:'BBCSO, Albion, Originals',k:'Instrument',i:23},
            {n:'Native Instruments',c:'Komplete 14 Ultimate',k:'Instrument',i:48},
            {n:'FabFilter',c:'Pro-Q 4, Pro-C, Pro-L 2',k:'Utility',i:9},
            {n:'iZotope',c:'RX 11, Ozone 11, Neutron',k:'Utility',i:7},
            {n:'Vienna Symphonic',c:'Synchron Strings/Brass Pro',k:'Instrument',i:14},
            {n:'Cinesamples',c:'CineBrass, CineStrings, CinePerc',k:'Instrument',i:11},
            {n:'UAD',c:'Apollo plugins (FET, Tube, Verb)',k:'Utility',i:18},
            {n:'Output',c:'Arcade, Substance, Movement',k:'Instrument',i:6},
          ].map((p,i)=>(
            <div key={p.n} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                <div style={{fontWeight:500,fontSize:11}}>{p.n}</div>
                <div style={{fontSize:9,color:APP_INK_MUTE,fontFamily:'ui-monospace, monospace'}}>{p.i} plugins</div>
              </div>
              <div style={{fontSize:9,color:APP_INK_SOFT,marginTop:2}}>{p.c}</div>
              <div style={{fontSize:9,color:accent,marginTop:4}}>● {p.k}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function LibraryCourses({ accent = '#8b7d73' }) {
  return (
    <AppFrame title="Library — Courses" accent={accent}>
      <AppSidebar active="Library" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',marginBottom:10}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Courses</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>9 enrolled · 3 in progress</div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:8}}>
          {[
            {t:'Orchestration for Film',a:'Conrad Pope',p:78,s:'In progress'},
            {t:'Mixing for Picture',a:'Alan Meyerson',p:42,s:'In progress'},
            {t:'Counterpoint Workshop',a:'Stephen Schwartz',p:100,s:'Complete'},
            {t:'Spitfire Audio Masterclass',a:'Hans Zimmer',p:64,s:'In progress'},
            {t:'Modern Film Scoring',a:'Mike Verta',p:100,s:'Complete'},
            {t:'Conducting Foundations',a:'Marin Alsop',p:25,s:'Bookmarked'},
          ].map(c=>(
            <div key={c.t} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff',
              display:'grid',gridTemplateColumns:'1fr 70px 90px',gap:10,alignItems:'center'}}>
              <div>
                <div style={{fontWeight:500,fontSize:11}}>{c.t}</div>
                <div style={{fontSize:9,color:APP_INK_MUTE,marginTop:2}}>{c.a}</div>
              </div>
              <div style={{fontSize:9,color:APP_INK_SOFT,textAlign:'right',fontFamily:'ui-monospace, monospace'}}>{c.p}%</div>
              <div style={{fontSize:9,textAlign:'right',color:c.s==='Complete'?accent:c.s==='Bookmarked'?APP_INK_SOFT:'#c9a876'}}>● {c.s}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function LibraryPodcasts({ accent = '#8b7d73' }) {
  return (
    <AppFrame title="Library — Podcasts" accent={accent}>
      <AppSidebar active="Library" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',marginBottom:10}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Podcasts</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>14 subscribed</div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:8}}>
          {[
            {t:'Score: The Podcast',h:'Robert Kraft & Adam Schlesinger',n:'Ep. 287 · Hildur Guðnadóttir'},
            {t:'Soundtracking',h:'Edith Bowman',n:'Ep. 412 · Göransson on Oppenheimer'},
            {t:'The Film Scorer',h:'Aaron Lo Presti',n:'Ep. 88 · Modular composition'},
            {t:'In Conversation',h:'BAFTA Music',n:'Ep. 23 · Bruno Coulais'},
            {t:'Top Score',h:'Marketplace',n:'Sound + image essays'},
            {t:'Music for the Movies',h:'KCRW',n:'Hosted by Jason Kupfer'},
          ].map(p=>(
            <div key={p.t} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
                <div style={{width:32,height:32,borderRadius:4,background:accent,opacity:0.18,flexShrink:0}}/>
                <div style={{fontWeight:500,fontSize:11,lineHeight:1.2}}>{p.t}</div>
              </div>
              <div style={{fontSize:9,color:APP_INK_MUTE,marginTop:2}}>{p.h}</div>
              <div style={{fontSize:9,color:APP_INK_SOFT,marginTop:3}}>{p.n}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function LibraryCatalog({ accent = '#8b7d73' }) {
  return (
    <AppFrame title="Library — Music catalog" accent={accent}>
      <AppSidebar active="Library" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginBottom:10}}>Music catalog · 214 tracks</div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff'}}>
          <div style={{display:'grid',gridTemplateColumns:'40px 1fr 1fr 70px 70px 80px',
            padding:'8px 12px',fontSize:9,letterSpacing:1,textTransform:'uppercase',
            color:APP_INK_MUTE,fontWeight:600,borderBottom:`1px solid ${APP_LINE}`}}>
            <div>#</div><div>Title</div><div>Project</div><div>BPM</div><div>Key</div><div>Length</div>
          </div>
          {[
            {t:'Hero Moment',p:'Super Team Canada',b:'112',k:'Dm',l:'1:34'},
            {t:'Previously',p:'Super Team Canada',b:'94',k:'G',l:'0:35'},
            {t:'Storage Music',p:'Simmerdown',b:'88',k:'Am',l:'2:12'},
            {t:'Niagara Hero Speech',p:'Super Team Canada',b:'120',k:'C',l:'1:02'},
            {t:'Pilot Theme',p:'HotWheels',b:'128',k:'Em',l:'2:45'},
            {t:'Breaking News',p:'Super Team Canada',b:'140',k:'F',l:'0:40'},
            {t:'Sneaky',p:'Simmerdown',b:'96',k:'Bm',l:'1:18'},
          ].map((r,i)=>(
            <div key={r.t} style={{display:'grid',gridTemplateColumns:'40px 1fr 1fr 70px 70px 80px',
              padding:'8px 12px',fontSize:10,borderBottom:i<6?`1px solid ${APP_LINE}`:'none',alignItems:'center'}}>
              <div style={{color:APP_INK_MUTE,fontFamily:'ui-monospace, monospace',fontSize:9}}>{String(i+1).padStart(2,'0')}</div>
              <div style={{fontWeight:500}}>{r.t}</div>
              <div style={{color:APP_INK_SOFT}}>{r.p}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.b}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.k}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.l}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

// ──────────────────────────────────────────────────────────────
// PROJECTS screenshots
// (One slot uses the real projects-cues-real.png image)
// ──────────────────────────────────────────────────────────────

function ProjectDashboard({ accent = '#7d8fa3' }) {
  return (
    <AppFrame title="Projects — Super Team Canada" accent={accent}>
      <AppSidebar active="Projects" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div>
          <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>Project</div>
          <div style={{fontSize:20,fontWeight:500,letterSpacing:-0.3,marginTop:2}}>Super Team Canada</div>
          <div style={{fontSize:10,color:APP_INK_SOFT,marginTop:2}}>Season 2 · Episode 214 · Delivery May 12</div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8}}>
          {[
            {l:'Cues',v:'25',d:'8:55'},
            {l:'Completed',v:'19',d:'of 25'},
            {l:'In edit',v:'3',d:''},
            {l:'Attention',v:'6',d:'review needed'},
          ].map(x=>(
            <div key={x.l} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:8,background:'#fff'}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>{x.l}</div>
              <div style={{fontSize:16,fontWeight:500,letterSpacing:-0.2,marginTop:2}}>{x.v}</div>
              {x.d && <div style={{fontSize:9,color:APP_INK_SOFT,marginTop:1}}>{x.d}</div>}
            </div>
          ))}
        </div>
        <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,minHeight:0}}>
          <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
            <div style={{fontSize:10,color:APP_INK_SOFT,marginBottom:6}}>Timeline</div>
            {['Spotting','Demos','Writing','Sessions','Mix','Delivery'].map((p,i)=>(
              <div key={p} style={{display:'flex',alignItems:'center',gap:6,marginBottom:4}}>
                <div style={{width:5,height:5,borderRadius:99,background:i<4?accent:APP_LINE}}/>
                <div style={{fontSize:10,flex:1}}>{p}</div>
                <div style={{fontSize:9,color:APP_INK_MUTE}}>{i<4?'done':i===4?'in prog':'—'}</div>
              </div>
            ))}
          </div>
          <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
            <div style={{fontSize:10,color:APP_INK_SOFT,marginBottom:6}}>Team</div>
            {['Marcelo Trevino · Composer','Jana Li · Music Editor','D. Ramos · Mix','S. Nakamura · Orchestrator'].map(t=>(
              <div key={t} style={{display:'flex',alignItems:'center',gap:6,marginBottom:4,fontSize:10}}>
                <div style={{width:16,height:16,borderRadius:99,background:accent,opacity:0.3,flexShrink:0}}/>
                <div>{t}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

function ProjectSessions({ accent = '#7d8fa3' }) {
  return (
    <AppFrame title="Projects — Sessions" accent={accent}>
      <AppSidebar active="Projects" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginBottom:10}}>Sessions</div>
        <div style={{display:'flex',flexDirection:'column',gap:8}}>
          {[
            {d:'Apr 24',t:'Abbey Road · Studio 2',p:'String section',c:'Contracted',a:'Jana Li'},
            {d:'Apr 26',t:'AIR · Lyndhurst',p:'Brass · 12 players',c:'Booked',a:'Jana Li'},
            {d:'Apr 30',t:'Remote · Budapest',p:'Full orchestra tracking',c:'Holding',a:'S. Nakamura'},
            {d:'May 3',t:'NEMM Studio · HQ',p:'Vocal session',c:'Booked',a:'Marcelo'},
          ].map(s=>(
            <div key={s.d} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff',
              display:'grid',gridTemplateColumns:'70px 1.4fr 1.6fr 80px 100px',alignItems:'center',gap:10}}>
              <div style={{fontSize:11,fontWeight:500}}>{s.d}</div>
              <div style={{fontSize:10}}>{s.t}</div>
              <div style={{fontSize:10,color:APP_INK_SOFT}}>{s.p}</div>
              <div style={{fontSize:9,color:s.c==='Holding'?'#c9a876':accent}}>● {s.c}</div>
              <div style={{fontSize:9,color:APP_INK_MUTE}}>{s.a}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function ProjectTimeline({ accent = '#7d8fa3' }) {
  return (
    <AppFrame title="Projects — Timeline" accent={accent}>
      <AppSidebar active="Projects" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginBottom:10}}>Timeline</div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:14,background:'#fff'}}>
          <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:2,fontSize:9,
            color:APP_INK_MUTE,fontFamily:'ui-monospace, monospace',marginBottom:8}}>
            {['W14','W15','W16','W17','W18','W19'].map(w=><div key={w}>{w}</div>)}
          </div>
          {[
            {t:'Spotting session',s:0,e:1,c:accent},
            {t:'Demos · act 1',s:0,e:2,c:'#c9a876'},
            {t:'Writing · act 2',s:1,e:3,c:'#c9a876'},
            {t:'Writing · act 3',s:2,e:4,c:'#c9a876'},
            {t:'String sessions',s:3,e:4,c:'#7a9b7e'},
            {t:'Brass sessions',s:3,e:4,c:'#7a9b7e'},
            {t:'Mix · act 1-2',s:4,e:5,c:'#8b4a52'},
            {t:'Delivery',s:5,e:6,c:'#6b7a8f'},
          ].map(row=>(
            <div key={row.t} style={{display:'grid',gridTemplateColumns:'130px 1fr',marginBottom:5,alignItems:'center',gap:8}}>
              <div style={{fontSize:10,color:APP_INK_SOFT}}>{row.t}</div>
              <div style={{position:'relative',height:14,background:'#f6f2eb',borderRadius:2}}>
                <div style={{position:'absolute',left:`${(row.s/6)*100}%`,width:`${((row.e-row.s)/6)*100}%`,
                  height:'100%',background:row.c,opacity:0.85,borderRadius:2}}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function ProjectTeam({ accent = '#c0886a' }) {
  return (
    <AppFrame title="Projects — Team" accent={accent}>
      <AppSidebar active="Projects" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Project team</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>Super Team Canada · 7 people</div>
        </div>
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr 1fr 80px',
            padding:'8px 12px',background:APP_HOVER,borderBottom:`1px solid ${APP_LINE}`,
            fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>
            <div>Name</div><div>Role</div><div>On</div><div>Status</div>
          </div>
          {[
            {n:'Jana Wills',i:'JW',r:'Music editor',o:'All cues',s:'Active'},
            {n:'Tomas Reyes',i:'TR',r:'Orchestrator',o:'Act 2–3',s:'Active'},
            {n:'Budapest Scoring',i:'BS',r:'Orchestra · contractor',o:'Strings',s:'Booked'},
            {n:'Mia Fontaine',i:'MF',r:'Studio assistant',o:'Prep & stems',s:'Active'},
            {n:'Daniel Cho',i:'DC',r:'Mixing engineer',o:'Act 1–2',s:'Booked'},
            {n:'Priya Anand',i:'PA',r:'Copyist',o:'Brass parts',s:'Idle'},
          ].map((r,i,arr)=>(
            <div key={r.n} style={{display:'grid',gridTemplateColumns:'1.5fr 1fr 1fr 80px',
              padding:'9px 12px',fontSize:10,borderBottom:i<arr.length-1?`1px solid ${APP_LINE}`:'none',alignItems:'center'}}>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <div style={{width:22,height:22,borderRadius:99,background:APP_HOVER,
                  border:`1px solid ${APP_LINE}`,display:'flex',alignItems:'center',justifyContent:'center',
                  fontSize:8,fontWeight:600,color:accent,letterSpacing:0.4}}>{r.i}</div>
                <span style={{fontWeight:500}}>{r.n}</span>
              </div>
              <div style={{color:APP_INK_SOFT}}>{r.r}</div>
              <div style={{color:APP_INK_SOFT}}>{r.o}</div>
              <div style={{fontSize:9,color:r.s==='Idle'?APP_INK_MUTE:r.s==='Booked'?'#c9a876':accent}}>● {r.s}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function ProjectDocs({ accent = '#c0886a' }) {
  return (
    <AppFrame title="Projects — Documents" accent={accent}>
      <AppSidebar active="Projects" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Documents</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>18 files · 4 folders</div>
        </div>
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'1.6fr 90px 1fr 80px',
            padding:'8px 12px',background:APP_HOVER,borderBottom:`1px solid ${APP_LINE}`,
            fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>
            <div>File</div><div>Type</div><div>Folder</div><div>Updated</div>
          </div>
          {[
            {n:'Episode 04 — script v6',t:'PDF',f:'Scripts',d:'Apr 18'},
            {n:'Composer agreement',t:'PDF',f:'Contracts',d:'Apr 02'},
            {n:'Spotting notes — 1M',t:'DOC',f:'Notes',d:'Mar 28'},
            {n:'Temp music references',t:'LINK',f:'References',d:'Mar 24'},
            {n:'Budapest session rider',t:'PDF',f:'Contracts',d:'Mar 20'},
            {n:'Director feedback — act 2',t:'DOC',f:'Notes',d:'Mar 12'},
          ].map((r,i,arr)=>(
            <div key={r.n} style={{display:'grid',gridTemplateColumns:'1.6fr 90px 1fr 80px',
              padding:'9px 12px',fontSize:10,borderBottom:i<arr.length-1?`1px solid ${APP_LINE}`:'none',alignItems:'center'}}>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <div style={{width:16,height:20,borderRadius:2,border:`1px solid ${APP_LINE}`,
                  background:APP_HOVER,flexShrink:0}}/>
                <span style={{fontWeight:500}}>{r.n}</span>
              </div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:accent}}>{r.t}</div>
              <div style={{color:APP_INK_SOFT}}>{r.f}</div>
              <div style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{r.d}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function ProjectTasks({ accent = '#c0886a' }) {
  return (
    <AppFrame title="Projects — Tasks" accent={accent}>
      <AppSidebar active="Projects" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Tasks</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>5 open · 2 due this week</div>
        </div>
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',overflow:'hidden'}}>
          {[
            {t:'Finish 1M8 V3 pass',a:'You',d:'Today',done:false,hi:true},
            {t:'Send 2M3 mockup to music editor',a:'You',d:'Tomorrow',done:false},
            {t:'Confirm Lyndhurst booking',a:'Mia F.',d:'Apr 24',done:false},
            {t:'Deliver string parts to copyist',a:'Tomas R.',d:'Apr 26',done:false},
            {t:'Approve spotting notes',a:'You',d:'—',done:true},
            {t:'Set up project folder',a:'Mia F.',d:'—',done:true},
          ].map((r,i,arr)=>(
            <div key={r.t} style={{display:'grid',gridTemplateColumns:'20px 1fr 80px 70px',gap:8,
              padding:'10px 12px',fontSize:11,alignItems:'center',
              background:r.hi?APP_HOVER:'transparent',
              borderBottom:i<arr.length-1?`1px solid ${APP_LINE}`:'none'}}>
              <div style={{width:14,height:14,borderRadius:3,
                border:`1.5px solid ${r.done?accent:APP_LINE}`,
                background:r.done?accent:'transparent',display:'flex',alignItems:'center',
                justifyContent:'center'}}>
                {r.done && <svg width="9" height="9" viewBox="0 0 24 24"><polyline points="5,12 10,17 19,7" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>}
              </div>
              <div style={{color:r.done?APP_INK_MUTE:APP_INK,textDecoration:r.done?'line-through':'none',letterSpacing:-0.1}}>{r.t}</div>
              <div style={{fontSize:9,color:APP_INK_SOFT}}>{r.a}</div>
              <div style={{fontSize:9,textAlign:'right',fontFamily:'ui-monospace, monospace',
                color:r.hi?'#b26f5c':APP_INK_MUTE}}>{r.d}</div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function ProjectCalendar({ accent = '#c0886a' }) {
  const days = ['M','T','W','T','F','S','S'];
  const events = {3:accent,9:'#c9a876',12:accent,17:'#7a9b7e',23:'#8b4a52',24:accent,30:'#6b7a8f'};
  return (
    <AppFrame title="Projects — Calendar" accent={accent}>
      <AppSidebar active="Projects" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Calendar — April</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>3 deadlines · 4 sessions</div>
        </div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,background:'#fff',padding:12}}>
          <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:6,marginBottom:6,
            fontSize:9,letterSpacing:1,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600,textAlign:'center'}}>
            {days.map((d,i)=><div key={i}>{d}</div>)}
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:6}}>
            {Array.from({length:30},(_,i)=>i+1).map(n=>(
              <div key={n} style={{aspectRatio:'1',border:`1px solid ${APP_LINE}`,borderRadius:4,
                padding:5,position:'relative',fontSize:9,color:APP_INK_SOFT,
                fontFamily:'ui-monospace, monospace'}}>
                {n}
                {events[n] && <div style={{position:'absolute',left:5,right:5,bottom:5,height:4,
                  borderRadius:2,background:events[n]}}/>}
              </div>
            ))}
          </div>
        </div>
        <div style={{display:'flex',gap:14,fontSize:9,color:APP_INK_MUTE,flexWrap:'wrap'}}>
          <span><span style={{display:'inline-block',width:8,height:4,background:accent,marginRight:4,borderRadius:2,verticalAlign:'middle'}}/>Deadline</span>
          <span><span style={{display:'inline-block',width:8,height:4,background:'#7a9b7e',marginRight:4,borderRadius:2,verticalAlign:'middle'}}/>Session</span>
          <span><span style={{display:'inline-block',width:8,height:4,background:'#c9a876',marginRight:4,borderRadius:2,verticalAlign:'middle'}}/>Milestone</span>
        </div>
      </div>
    </AppFrame>
  );
}

// ──────────────────────────────────────────────────────────────
// HEALTH screenshots
// ──────────────────────────────────────────────────────────────

function HealthCheckIn({ accent = '#8a9970' }) {
  return (
    <AppFrame title="Health — Today's check-in" accent={accent}>
      <AppSidebar active="Health" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:12}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Good morning</div>
        <div style={{fontSize:11,color:APP_INK_SOFT}}>Take a moment. How are you feeling?</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10}}>
          {['Energy','Focus','Stress','Mood'].map((l,i)=>(
            <div key={l} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>{l}</div>
              <div style={{display:'flex',gap:3,marginTop:8}}>
                {[1,2,3,4,5].map(n=>(
                  <div key={n} style={{flex:1,height:22,borderRadius:3,
                    background: n <= (4-i%2) ? accent : '#f0ece4',
                    opacity: n <= (4-i%2) ? 0.4 + n*0.12 : 1}}/>
                ))}
              </div>
              <div style={{fontSize:9,color:APP_INK_SOFT,marginTop:6}}>{['High','High','Low','Focused'][i]}</div>
            </div>
          ))}
        </div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:12,background:'#fff'}}>
          <div style={{fontSize:10,color:APP_INK_SOFT,marginBottom:6}}>Notes · from HealthKit</div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10}}>
            <div><div style={{fontSize:9,color:APP_INK_MUTE}}>Sleep</div><div style={{fontSize:14,fontWeight:500}}>7h 42m</div></div>
            <div><div style={{fontSize:9,color:APP_INK_MUTE}}>HRV</div><div style={{fontSize:14,fontWeight:500}}>62 ms</div></div>
            <div><div style={{fontSize:9,color:APP_INK_MUTE}}>Resting HR</div><div style={{fontSize:14,fontWeight:500}}>54 bpm</div></div>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

function HealthTrends({ accent = '#8a9970' }) {
  return (
    <AppFrame title="Health — 7-day trends" accent={accent}>
      <AppSidebar active="Health" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden'}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginBottom:10}}>7-day trends</div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          {['Energy','Stress','Sleep','Desk hours'].map((l,i)=>(
            <div key={l} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{fontSize:10,color:APP_INK_SOFT,marginBottom:6}}>{l}</div>
              <svg viewBox="0 0 200 60" preserveAspectRatio="none" style={{width:'100%',height:60}}>
                <path d={`M10,${40-i*3} L40,${20+i*4} L70,${35-i*2} L100,${15+i*3} L130,${30-i*2} L160,${20+i*2} L190,${25-i*3}`}
                  fill="none" stroke={accent} strokeWidth="2"/>
                {[10,40,70,100,130,160,190].map(x=>
                  <circle key={x} cx={x} cy={30} r="1.5" fill={accent} opacity="0.5"/>
                )}
              </svg>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:8,color:APP_INK_MUTE,marginTop:2}}>
                <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

function HealthWorkload({ accent = '#8a9970' }) {
  return (
    <AppFrame title="Health — Workload awareness" accent={accent}>
      <AppSidebar active="Health" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:12}}>
        <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Workload awareness</div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:12,background:'#fff'}}>
          <div style={{fontSize:10,color:APP_INK_SOFT,marginBottom:8}}>This week · desk time by project</div>
          {[
            {p:'Super Team Canada',h:18,c:accent},
            {p:'Simmerdown',h:9,c:'#c9a876'},
            {p:'HotWheels',h:6,c:'#7d8fa3'},
            {p:'Admin · Invoicing',h:3,c:'#8b7d73'},
          ].map(r=>(
            <div key={r.p} style={{display:'grid',gridTemplateColumns:'130px 1fr 40px',gap:8,alignItems:'center',marginBottom:6}}>
              <div style={{fontSize:10}}>{r.p}</div>
              <div style={{height:10,background:'#f6f2eb',borderRadius:2}}>
                <div style={{width:`${(r.h/20)*100}%`,height:'100%',background:r.c,opacity:0.85,borderRadius:2}}/>
              </div>
              <div style={{fontSize:9,color:APP_INK_SOFT,fontFamily:'ui-monospace, monospace'}}>{r.h}h</div>
            </div>
          ))}
        </div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:12,background:'#fff'}}>
          <div style={{fontSize:10,color:APP_INK_SOFT,marginBottom:4}}>Aria suggests</div>
          <div style={{fontSize:11,lineHeight:1.5}}>
            You've logged 36 hours this week across three projects. Your stress has climbed two points since Monday — consider taking the morning walk you skipped Wednesday.
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

function HealthOverlay({ accent = '#8a9970' }) {
  return (
    <AppFrame title="Health — Workload vs. wellness" accent={accent}>
      <AppSidebar active="Health" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:12}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Workload vs. wellness</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>Last 14 days</div>
        </div>
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,padding:14,background:'#fff',
          display:'flex',flexDirection:'column',gap:8}}>
          <div style={{fontSize:10,color:APP_INK_SOFT}}>Wellbeing overlaid with deadlines &amp; cue load</div>
          <svg viewBox="0 0 400 150" preserveAspectRatio="none" style={{width:'100%',flex:1}}>
            {/* deadline markers */}
            {[110,250,340].map((x,i)=>(
              <g key={i}>
                <line x1={x} y1="0" x2={x} y2="150" stroke="#b26f5c" strokeWidth="1" strokeDasharray="2 3"/>
                <circle cx={x} cy="8" r="3" fill="#b26f5c"/>
              </g>
            ))}
            {/* workload area */}
            <path d="M10,120 L40,110 L70,95 L100,70 L130,55 L160,75 L190,90 L220,60 L250,40 L280,65 L310,85 L340,50 L370,80 L390,95 L390,150 L10,150 Z"
              fill={accent} opacity="0.10"/>
            <path d="M10,120 L40,110 L70,95 L100,70 L130,55 L160,75 L190,90 L220,60 L250,40 L280,65 L310,85 L340,50 L370,80 L390,95"
              fill="none" stroke={accent} strokeWidth="2"/>
            {/* energy line */}
            <path d="M10,60 L40,65 L70,75 L100,90 L130,100 L160,85 L190,78 L220,95 L250,110 L280,88 L310,72 L340,105 L370,80 L390,70"
              fill="none" stroke="#c9a876" strokeWidth="2" strokeDasharray="3 3"/>
          </svg>
          <div style={{display:'flex',gap:14,fontSize:9,color:APP_INK_MUTE,flexWrap:'wrap'}}>
            <span><span style={{display:'inline-block',width:8,height:2,background:accent,marginRight:4,verticalAlign:'middle'}}/>Workload</span>
            <span><span style={{display:'inline-block',width:8,height:2,background:'#c9a876',marginRight:4,verticalAlign:'middle'}}/>Energy</span>
            <span><span style={{display:'inline-block',width:8,height:2,background:'#b26f5c',marginRight:4,verticalAlign:'middle'}}/>Deadline</span>
          </div>
        </div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:12,background:'#fff'}}>
          <div style={{fontSize:10,color:APP_INK_SOFT,marginBottom:4}}>Aria notices</div>
          <div style={{fontSize:11,lineHeight:1.5}}>
            Your energy dips two days before every delivery. The brass session deadline on Friday is landing in your lowest-sleep stretch — worth protecting Thursday evening.
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

function HealthHearing({ accent = '#8a9970' }) {
  return (
    <AppFrame title="Health — Hearing protection" accent={accent}>
      <AppSidebar active="Health" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:12}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3}}>Hearing health</div>
          <div style={{fontSize:10,color:APP_INK_MUTE}}>Today · headphone exposure</div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10}}>
          {[
            {l:'Time in cans',v:'4h 12m',d:'under 8h limit',ok:true},
            {l:'Avg level',v:'78 dB',d:'safe range',ok:true},
            {l:'High-vol peaks',v:'22m',d:'over 85 dB',ok:false},
          ].map(x=>(
            <div key={x.l} style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
              <div style={{fontSize:9,letterSpacing:1.2,textTransform:'uppercase',color:APP_INK_MUTE,fontWeight:600}}>{x.l}</div>
              <div style={{fontSize:18,fontWeight:500,letterSpacing:-0.3,marginTop:3}}>{x.v}</div>
              <div style={{fontSize:9,color:x.ok?accent:'#b26f5c',marginTop:1}}>{x.d}</div>
            </div>
          ))}
        </div>
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,padding:12,background:'#fff',
          display:'flex',flexDirection:'column',gap:8}}>
          <div style={{fontSize:10,color:APP_INK_SOFT}}>Intensity through the day · dB</div>
          <div style={{flex:1,display:'flex',alignItems:'flex-end',gap:3}}>
            {[42,55,60,72,88,90,76,64,58,80,92,70,66,52,48].map((v,i)=>(
              <div key={i} style={{flex:1,height:`${(v/100)*100}%`,borderRadius:'2px 2px 0 0',
                background:v>=85?'#b26f5c':accent,opacity:v>=85?0.9:0.7}}/>
            ))}
          </div>
          <div style={{display:'flex',justifyContent:'space-between',fontSize:8,color:APP_INK_MUTE,
            fontFamily:'ui-monospace, monospace'}}>
            <span>9a</span><span>12p</span><span>3p</span><span>6p</span>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

// ──────────────────────────────────────────────────────────────
// ARIA screenshots
// ──────────────────────────────────────────────────────────────

function AriaSpotting({ accent = '#c9a876' }) {
  return (
    <AppFrame title="Aria — Spotting notes → cues" accent={accent}>
      <AppSidebar active="Projects" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{fontSize:14,fontWeight:500}}>Spotting session · Ep 214</div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,flex:1,minHeight:0}}>
          <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff',fontSize:10,lineHeight:1.5}}>
            <div style={{fontSize:9,color:APP_INK_MUTE,marginBottom:6}}>Director's notes · raw</div>
            <div style={{color:APP_INK_SOFT}}>
              <b style={{color:APP_INK}}>01:04:37</b> – "Hero moment when Jay turns around — we need something big here. Heroic. Not bombastic. Like <i>Incredibles</i>, not <i>Transformers</i>. Maybe 30 seconds."
              <br/><br/>
              <b style={{color:APP_INK}}>01:07:04</b> – "Trust scene — quiet, intimate. Solo piano? No strings yet."
              <br/><br/>
              <b style={{color:APP_INK}}>01:08:10</b> – "Niagara speech — build it. Orchestra comes in on 'We do this together.'"
            </div>
          </div>
          <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff',fontSize:10}}>
            <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:6}}>
              <div style={{width:8,height:8,borderRadius:99,background:accent}}/>
              <div style={{fontSize:9,color:APP_INK_MUTE}}>Aria · cues extracted</div>
            </div>
            {[
              {n:'1M8',t:'Hero Moment',tc:'01:04:37',d:'0:30',tag:'Heroic · lyrical · brass-led'},
              {n:'2M2',t:'Trust',tc:'01:07:04',d:'0:45',tag:'Intimate · solo piano'},
              {n:'2M5',t:'Niagara Hero Speech',tc:'01:08:10',d:'1:20',tag:'Build · orchestral crescendo'},
            ].map(c=>(
              <div key={c.n} style={{padding:'6px 0',borderTop:`1px solid ${APP_LINE}`}}>
                <div style={{display:'flex',justifyContent:'space-between'}}>
                  <span style={{fontWeight:500}}>{c.n} · {c.t}</span>
                  <span style={{fontFamily:'ui-monospace, monospace',fontSize:9,color:APP_INK_SOFT}}>{c.tc} · {c.d}</span>
                </div>
                <div style={{fontSize:9,color:APP_INK_SOFT,marginTop:2}}>{c.tag}</div>
              </div>
            ))}
          </div>
        </div>
        {/* chat input */}
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:999,padding:'7px 14px',background:'#fff',
          display:'flex',alignItems:'center',gap:8}}>
          <div style={{width:8,height:8,borderRadius:99,background:accent}}/>
          <div style={{fontSize:10,color:APP_INK_MUTE,flex:1}}>Ask Aria about Super Team Canada...</div>
          <div style={{fontSize:10,color:APP_INK_SOFT}}>⏎</div>
        </div>
      </div>
    </AppFrame>
  );
}

function AriaContext({ accent = '#c9a876' }) {
  return (
    <AppFrame title="Aria — Project-aware" accent={accent}>
      <AppSidebar active="Projects" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'flex',flexDirection:'column',gap:10}}>
        <div style={{fontSize:14,fontWeight:500}}>Aria · Super Team Canada</div>
        <div style={{flex:1,border:`1px solid ${APP_LINE}`,borderRadius:6,padding:12,background:'#fff',
          display:'flex',flexDirection:'column',gap:10,overflow:'hidden'}}>
          <div style={{fontSize:10,color:APP_INK_SOFT}}>
            You asked · "What's blocking delivery this week?"
          </div>
          <div style={{fontSize:11,lineHeight:1.5,color:APP_INK}}>
            Three cues are still in <b>Edit</b> at V3, with the highest revision count on the board: <b>1M8 Hero Moment</b>, <b>2M3 Storage Music</b>, and <b>2M5 Niagara</b>.
            <br/><br/>
            <b>1M8</b> is the blocker — it's scheduled for the brass session on Friday 26, and Jana hasn't signed off on the V3 revision yet. I'd get a pass to her by Wednesday morning.
            <br/><br/>
            Your energy has been trending down since Monday. Want me to move the 1M8 writing block to 9am tomorrow when your focus is usually highest?
          </div>
          <div style={{display:'flex',gap:6,marginTop:'auto'}}>
            <div style={{padding:'5px 10px',border:`1px solid ${APP_LINE}`,borderRadius:99,fontSize:10}}>Yes, schedule it</div>
            <div style={{padding:'5px 10px',border:`1px solid ${APP_LINE}`,borderRadius:99,fontSize:10}}>Show me 1M8</div>
            <div style={{padding:'5px 10px',border:`1px solid ${APP_LINE}`,borderRadius:99,fontSize:10}}>Draft email to Jana</div>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

function AriaDoc({ accent = '#c9a876' }) {
  return (
    <AppFrame title="Aria — Document analysis" accent={accent}>
      <AppSidebar active="Library" accent={accent}/>
      <div style={{flex:1,padding:16,overflow:'hidden',display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff',overflow:'hidden'}}>
          <div style={{fontSize:9,color:APP_INK_MUTE,marginBottom:6}}>Contract · Mattel HotWheels PDF</div>
          <div style={{fontSize:8,color:APP_INK_SOFT,lineHeight:1.5}}>
            <div style={{fontWeight:600,color:APP_INK,fontSize:9,marginBottom:4}}>1. Scope of work</div>
            The Composer shall deliver original musical score for the HotWheels pilot episode consisting of approximately 22 minutes of finished music across no fewer than 18 cues...
            <br/><br/>
            <div style={{fontWeight:600,color:APP_INK,fontSize:9,marginBottom:4}}>2. Delivery milestones</div>
            2.1 Demo delivery — April 15, 2026<br/>
            2.2 Full score — May 8, 2026<br/>
            2.3 Final stems — May 14, 2026
            <br/><br/>
            <div style={{fontWeight:600,color:APP_INK,fontSize:9,marginBottom:4}}>3. Compensation</div>
            Total compensation of $42,000 payable in three equal installments...
          </div>
        </div>
        <div style={{border:`1px solid ${APP_LINE}`,borderRadius:6,padding:10,background:'#fff'}}>
          <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:8}}>
            <div style={{width:8,height:8,borderRadius:99,background:accent}}/>
            <div style={{fontSize:9,color:APP_INK_MUTE}}>Aria · extracted</div>
          </div>
          {[
            {l:'Client',v:'Mattel · HotWheels'},
            {l:'Total fee',v:'$42,000'},
            {l:'Demo due',v:'Apr 15'},
            {l:'Full score due',v:'May 8'},
            {l:'Stems due',v:'May 14'},
            {l:'Cues required',v:'18+ · ~22 min'},
            {l:'Payment',v:'3 installments'},
          ].map((r,i)=>(
            <div key={r.l} style={{display:'grid',gridTemplateColumns:'90px 1fr',padding:'6px 0',
              borderBottom:i<6?`1px solid ${APP_LINE}`:'none',fontSize:10}}>
              <div style={{color:APP_INK_MUTE}}>{r.l}</div>
              <div style={{fontWeight:500}}>{r.v}</div>
            </div>
          ))}
          <div style={{marginTop:8,padding:8,background:APP_HOVER,borderRadius:4,fontSize:9,lineHeight:1.5,color:APP_INK}}>
            Added 3 milestones to your calendar and a project folder under HotWheels.
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

// ──────────────────────────────────────────────────────────────
// HERO (used for Hero section, same as Home dashboard shown mid-use)
// ──────────────────────────────────────────────────────────────
const HeroPreview = HomeDashboard;

// ──────────────────────────────────────────────────────────────
// Image-based screenshot (real PNG)
// ──────────────────────────────────────────────────────────────
function RealScreenshot({ src, alt, fullSrc }) {
  return (
    <div style={{
      width:'100%', height:'100%', overflow:'hidden',
    }}
      data-full-src={fullSrc || src}
      data-alt={alt||''}
    >
      <img src={src} alt={alt||''} style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'top left',display:'block'}}/>
    </div>
  );
}

Object.assign(window, {
  HomeDashboard, HomeCues, HomeHealth, HomeFocus, HomeDeadlines,
  StudioHardware, StudioSoftware, StudioFinances, StudioSubscriptions, StudioInvoices, StudioTeam,
  LibraryBooks, LibrarySamples, LibraryCatalog, LibraryPlugins, LibraryCourses, LibraryPodcasts,
  ProjectDashboard, ProjectSessions, ProjectTimeline, ProjectTeam, ProjectDocs, ProjectTasks, ProjectCalendar,
  HealthCheckIn, HealthTrends, HealthWorkload, HealthOverlay, HealthHearing,
  AriaSpotting, AriaContext, AriaDoc,
  HeroPreview, RealScreenshot,
});