// M09 — Client portal: dashboard, project, files, messages, billing
const Portal = ({ setPage }) => {
  const [view, setView] = React.useState('dashboard');
  const [projectId, setProjectId] = React.useState('ledgerline');

  return (
    <div style={{
      display:'grid', gridTemplateColumns:'220px 1fr',
      minHeight:'100vh', background:'#07070a', color:'var(--ink)',
      fontSize:14
    }}>
      <PortalSidebar view={view} setView={setView} setPage={setPage}/>
      <div style={{display:'flex',flexDirection:'column',minWidth:0}}>
        <PortalTopbar/>
        <div style={{flex:1, overflow:'auto'}}>
          {view === 'dashboard' && <PortalDashboard setView={setView}/>}
          {view === 'project' && <PortalProject id={projectId}/>}
          {view === 'files' && <PortalFiles/>}
          {view === 'messages' && <PortalMessages/>}
          {view === 'billing' && <PortalBilling/>}
        </div>
      </div>
    </div>
  );
};

const PortalSidebar = ({ view, setView, setPage }) => {
  const NAV = [
    ['dashboard','◐','Overview'],
    ['project','▤','Your project'],
    ['files','◇','Files & deliverables', 12],
    ['messages','◌','Messages', 3],
    ['billing','◯','Billing & invoices'],
  ];
  return (
    <aside style={{borderRight:'1px solid var(--line)',background:'#08080b',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(--line-2)',borderRadius:8,color:'var(--accent)'}}>{Icon.atom()}</span>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontWeight:600,fontSize:12,letterSpacing:'-0.005em',lineHeight:1.1}}>SolidAtoms</div>
          <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginTop:2}}>CLIENT PORTAL</div>
        </div>
      </div>

      <div style={{padding:'14px 12px',display:'flex',flexDirection:'column',gap:2,flex:1}}>
        <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',padding:'10px 10px 8px'}}>WORKSPACE</div>
        {NAV.map(([id,ic,l,b]) => (
          <button key={id} onClick={()=>setView(id)} style={{
            display:'flex',alignItems:'center',gap:10,padding:'8px 10px',borderRadius:7,
            background: view===id ? 'rgba(212,255,58,0.08)' : 'transparent',
            color: view===id ? 'var(--accent)' : 'var(--ink-2)',
            fontSize:13, fontWeight: view===id ? 500 : 400, textAlign:'left'
          }}>
            <span style={{width:14,fontSize:11,color: view===id ? 'var(--accent)' : 'var(--ink-3)'}}>{ic}</span>
            <span style={{flex:1}}>{l}</span>
            {b && <span className="mono" style={{fontSize:9,padding:'2px 5px',borderRadius:4,background:'var(--accent)',color:'#0a0a0a',fontWeight:600}}>{b}</span>}
          </button>
        ))}

        <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',padding:'18px 10px 8px'}}>YOUR PROJECT</div>
        <div style={{padding:'10px 12px',borderRadius:8,background:'rgba(255,255,255,0.02)',border:'1px solid var(--line)'}}>
          <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:8}}>
            <span style={{width:8,height:8,borderRadius:'50%',background:'var(--accent)'}}/>
            <span style={{fontSize:12,fontWeight:500}}>Ledgerline rebuild</span>
          </div>
          <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:8}}>SPRINT 04 · W22</div>
          <div style={{height:4,background:'var(--bg-3)',borderRadius:2,overflow:'hidden'}}>
            <div style={{width:'62%',height:'100%',background:'var(--accent)'}}/>
          </div>
          <div style={{fontSize:10,color:'var(--ink-3)',marginTop:6}}>62% complete · 3 sprints to go</div>
        </div>
      </div>

      <div style={{padding:'12px',borderTop:'1px solid var(--line)'}}>
        <div style={{display:'flex',alignItems:'center',gap:10,padding:'8px 10px',borderRadius:8,background:'rgba(255,255,255,0.02)',border:'1px solid var(--line)'}}>
          <span style={{width:28,height:28,borderRadius:'50%',background:'linear-gradient(135deg,#7c9bff55,#7c9bff22)',border:'1px solid #7c9bff66',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:10,fontWeight:600,color:'#7c9bff'}}>JC</span>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:12,fontWeight:500,lineHeight:1.2}}>Jane Cooper</div>
            <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.04em'}}>CTO · LEDGERLINE</div>
          </div>
          <button onClick={()=>setPage('home')} title="Exit portal" style={{color:'var(--ink-3)',fontSize:13}}>↗</button>
        </div>
      </div>
    </aside>
  );
};

const PortalTopbar = () => (
  <header style={{
    display:'flex',alignItems:'center',justifyContent:'space-between',
    padding:'12px 24px',borderBottom:'1px solid var(--line)',
    background:'rgba(8,8,11,0.7)',backdropFilter:'blur(12px)',
    position:'sticky',top:0,zIndex:20
  }}>
    <div style={{display:'flex',alignItems:'center',gap:14}}>
      <div style={{display:'flex',alignItems:'center',gap:8,padding:'4px 10px',borderRadius:6,border:'1px solid var(--line)',background:'rgba(255,255,255,0.02)'}}>
        <span style={{width:6,height:6,borderRadius:'50%',background:'var(--ok)'}}/>
        <span style={{fontSize:11,color:'var(--ink-2)'}}>Project on track</span>
      </div>
      <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>NEXT MILESTONE · MAY 22 · CMS HANDOFF</span>
    </div>
    <div style={{display:'flex',alignItems:'center',gap:8}}>
      <button style={{padding:'7px 11px',borderRadius:7,fontSize:12,color:'var(--ink-2)',border:'1px solid var(--line)'}}>Help</button>
      <button style={{padding:'7px 11px',borderRadius:7,fontSize:12,color:'var(--ink-2)',border:'1px solid var(--line)'}}>Status</button>
      <button className="btn btn-primary" style={{padding:'7px 12px',fontSize:12}}>Send a message</button>
    </div>
  </header>
);

// ─── DASHBOARD ─────────────────────────────────────────────

const PortalDashboard = ({ setView }) => (
  <div style={{padding:'28px 32px'}}>
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:28}}>
      <div>
        <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:6}}>Welcome back, Jane.</h1>
        <div style={{fontSize:13,color:'var(--ink-3)'}}>Here's where Ledgerline stands today — May 14, 2026.</div>
      </div>
      <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12}}>Project tour</button>
    </div>

    {/* Big timeline */}
    <div style={{padding:'28px 32px',borderRadius:'var(--radius)',border:'1px solid var(--line)',background:'var(--bg-2)',marginBottom:18}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:18}}>
        <div>
          <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:8}}>● ON TRACK · LAUNCH JUNE 28</div>
          <h2 style={{fontSize:22,fontWeight:500,letterSpacing:'-0.015em'}}>Ledgerline rebuild · Sprint 04 of 8</h2>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontSize:32,fontWeight:500,letterSpacing:'-0.02em',color:'var(--accent)'}}>62%</div>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>COMPLETE</div>
        </div>
      </div>

      {/* Timeline bars */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(8,1fr)',gap:6,marginBottom:8}}>
        {['Discovery','Design','Frontend','API + Data','Auth','Payments','QA + Polish','Launch'].map((s,i) => (
          <div key={s}>
            <div style={{height:8,borderRadius:4,background: i<5 ? 'var(--accent)' : i===5 ? 'linear-gradient(90deg, var(--accent) 50%, var(--bg-3) 50%)' : 'var(--bg-3)',marginBottom:8}}/>
            <div className="mono" style={{fontSize:9,color: i<5 ? 'var(--accent)' : 'var(--ink-3)',letterSpacing:'0.04em',textTransform:'uppercase'}}>S{i+1}</div>
            <div style={{fontSize:11,color: i<5 ? 'var(--ink)' : 'var(--ink-3)',marginTop:3,fontWeight: i<5 ? 500 : 400}}>{s}</div>
          </div>
        ))}
      </div>
    </div>

    {/* Stat row */}
    <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:18}}>
      <PortalStat label="Days until launch" value="45" sub="On schedule"/>
      <PortalStat label="Approvals pending" value="2" sub="Auth flow · Brand" hot/>
      <PortalStat label="Files this sprint" value="14" sub="3 new this week"/>
      <PortalStat label="Sprint velocity" value="32 pts" sub="+12% vs last" ok/>
    </div>

    {/* Two-col */}
    <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:14}}>
      <CMSCard title="Awaiting your approval" action="See all →" onAction={()=>setView('files')}>
        {[
          {t:'Auth flow — final mockups',k:'Design',w:'2 days waiting',c:'#ff8a3a'},
          {t:'Brand mark v3',k:'Brand',w:'5 days waiting',c:'#7c9bff'},
        ].map((r,i) => (
          <div key={i} style={{display:'grid',gridTemplateColumns:'40px 1fr 100px auto',gap:14,padding:'12px 4px',borderBottom: i===0 ? '1px solid var(--line)' : 'none',alignItems:'center'}}>
            <span style={{width:34,height:34,borderRadius:6,background:`linear-gradient(135deg, ${r.c}44, ${r.c}11)`,border:`1px solid ${r.c}33`}}/>
            <div>
              <div style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em',marginBottom:3}}>{r.t}</div>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{r.k.toUpperCase()}</div>
            </div>
            <span className="mono" style={{fontSize:10,color:'var(--warn)',letterSpacing:'0.04em',padding:'3px 7px',background:'rgba(255,180,58,0.1)',border:'1px solid rgba(255,180,58,0.3)',borderRadius:5,textTransform:'uppercase',width:'fit-content'}}>{r.w}</span>
            <div style={{display:'flex',gap:6}}>
              <button className="btn btn-ghost" style={{padding:'5px 10px',fontSize:11}}>Review</button>
              <button className="btn btn-primary" style={{padding:'5px 10px',fontSize:11}}>Approve</button>
            </div>
          </div>
        ))}
      </CMSCard>

      <CMSCard title="Team online" pad>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {TEAM.slice(0,4).map((t,i) => (
            <div key={t.id} style={{display:'flex',alignItems:'center',gap:10}}>
              <div style={{position:'relative'}}>
                <span style={{width:32,height:32,borderRadius:'50%',background:`linear-gradient(135deg, ${t.role_color}55, ${t.role_color}22)`,border:`1px solid ${t.role_color}44`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:11,fontWeight:600,color:t.role_color}}>{t.avatar}</span>
                <span style={{position:'absolute',bottom:-1,right:-1,width:10,height:10,borderRadius:'50%',background: i<2 ? 'var(--ok)' : i===2 ? 'var(--warn)' : '#3a3a3a',border:'2px solid var(--bg-2)'}}/>
              </div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13,fontWeight:500,lineHeight:1.2}}>{t.name}</div>
                <div style={{fontSize:11,color:'var(--ink-3)'}}>{t.role}</div>
              </div>
              <button className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>MESSAGE</button>
            </div>
          ))}
        </div>
      </CMSCard>

      {/* Activity */}
      <CMSCard title="Recent activity" action="Full log →">
        {[
          ['HA','#d4ff3a','pushed','Frontend dashboard refactor','25m ago'],
          ['SR','#ff8a3a','uploaded','Auth flow — final mockups','2h ago'],
          ['AQ','#7c9bff','merged','PR #142 · Webhook reliability','3h ago'],
          ['HA','#d4ff3a','scheduled','Demo for Friday, 4pm','yesterday'],
          ['BK','#a78bfa','commented','on Brand mark v3','2d ago'],
        ].map(([w,c,a,t,d],i) => (
          <div key={i} style={{display:'grid',gridTemplateColumns:'26px 1fr 100px',gap:10,padding:'10px 4px',alignItems:'center',borderBottom: i<4 ? '1px solid var(--line)' : 'none'}}>
            <span style={{width:24,height:24,borderRadius:'50%',background:`linear-gradient(135deg, ${c}55, ${c}22)`,border:`1px solid ${c}44`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:9,fontWeight:600,color:c}}>{w}</span>
            <div style={{fontSize:12,color:'var(--ink-2)',lineHeight:1.4}}>
              {a} <span style={{color:'var(--ink)',fontWeight:500}}>{t}</span>
            </div>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'right'}}>{d}</span>
          </div>
        ))}
      </CMSCard>

      <CMSCard title="Upcoming" pad>
        {[
          ['Thu, May 16','Sprint demo · 4:00 pm','#d4ff3a','demo'],
          ['Fri, May 17','Auth flow review · 11:00 am','#ff8a3a','review'],
          ['Mon, May 20','Sprint 05 kickoff · 10:00 am','#7c9bff','kickoff'],
          ['Wed, May 22','CMS handoff milestone','#a78bfa','milestone'],
        ].map(([d,n,c,k],i) => (
          <div key={i} style={{display:'grid',gridTemplateColumns:'80px 1fr 70px',gap:12,padding:'10px 0',alignItems:'center',borderBottom: i<3 ? '1px solid var(--line)' : 'none'}}>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{d}</span>
            <div style={{display:'flex',alignItems:'center',gap:8,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>
            <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',textAlign:'right',textTransform:'uppercase'}}>{k}</span>
          </div>
        ))}
      </CMSCard>
    </div>
  </div>
);

const PortalStat = ({ label, value, sub, hot, ok }) => {
  const c = hot ? 'var(--warn)' : ok ? 'var(--ok)' : 'var(--ink-3)';
  return (
    <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={{fontSize:28,letterSpacing:'-0.02em',fontWeight:500,marginBottom:6}}>{value}</div>
      <div className="mono" style={{fontSize:10,color:c,letterSpacing:'0.04em'}}>{sub}</div>
    </div>
  );
};

// ─── PROJECT DETAIL ────────────────────────────────────────

const PortalProject = ({ id }) => {
  const sprints = [
    {n:'S1',name:'Discovery',w:'W18',status:'done',pts:24},
    {n:'S2',name:'Design system',w:'W19',status:'done',pts:32},
    {n:'S3',name:'Frontend',w:'W20',status:'done',pts:34},
    {n:'S4',name:'API + Data',w:'W21',status:'done',pts:30},
    {n:'S5',name:'Auth',w:'W22',status:'active',pts:32,progress:62},
    {n:'S6',name:'Payments',w:'W23',status:'next',pts:28},
    {n:'S7',name:'QA + Polish',w:'W24',status:'planned',pts:22},
    {n:'S8',name:'Launch',w:'W25',status:'planned',pts:18},
  ];

  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{marginBottom:24}}>
        <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Ledgerline rebuild</h1>
        <div style={{fontSize:13,color:'var(--ink-3)'}}>SP04 · Sprint 04 of 8 · 220 total story points · Launch June 28</div>
      </div>

      {/* Sprint board */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(8,1fr)',gap:8,marginBottom:24}}>
        {sprints.map(sp => (
          <div key={sp.n} style={{
            padding:'14px 14px',borderRadius:8,
            border:'1px solid', borderColor: sp.status==='active' ? 'var(--accent)' : 'var(--line)',
            background: sp.status==='active' ? 'linear-gradient(180deg, rgba(212,255,58,0.06), var(--bg-2))' : sp.status==='done' ? 'rgba(126,231,135,0.04)' : 'var(--bg-2)',
            minHeight:130, display:'flex',flexDirection:'column',gap:8
          }}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <span className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.04em'}}>{sp.n}</span>
              <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{sp.w}</span>
            </div>
            <div style={{fontSize:12,fontWeight:500,letterSpacing:'-0.005em',flex:1,lineHeight:1.3}}>{sp.name}</div>
            <span className="mono" style={{fontSize:9,padding:'2px 6px',borderRadius:4,letterSpacing:'0.04em',textTransform:'uppercase',width:'fit-content',
              color: sp.status==='active' ? '#0a0a0a' : sp.status==='done' ? 'var(--ok)' : 'var(--ink-3)',
              background: sp.status==='active' ? 'var(--accent)' : sp.status==='done' ? 'rgba(126,231,135,0.1)' : 'transparent',
              border: sp.status==='active' || sp.status==='done' ? 'none' : '1px solid var(--line-2)'}}>{sp.status}</span>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)'}}>{sp.pts}P</div>
          </div>
        ))}
      </div>

      {/* Current sprint detail */}
      <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:18}}>
        <div className="card" style={{padding:'28px 32px'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:6}}>
            <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em'}}>● SPRINT 04 · ACTIVE · DAY 6 OF 10</div>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>32 / 32 PTS COMMITTED</span>
          </div>
          <h2 style={{fontSize:22,fontWeight:500,letterSpacing:'-0.015em',marginBottom:18}}>Auth & sessions</h2>

          {[
            ['DONE','Done',[
              {t:'OAuth provider integration',pts:8,w:'AQ',c:'#7c9bff'},
              {t:'Session token refresh logic',pts:5,w:'AQ',c:'#7c9bff'},
              {t:'Login + signup flows (front)',pts:6,w:'NM',c:'#7ee787'},
            ]],
            ['DOING','In progress',[
              {t:'Multi-factor auth flow',pts:8,w:'AQ',c:'#7c9bff'},
              {t:'Account settings UI',pts:3,w:'NM',c:'#7ee787'},
            ]],
            ['TODO','To do',[
              {t:'Password reset emails',pts:2,w:'AQ',c:'#7c9bff'},
            ]],
          ].map(([k,l,items]) => (
            <div key={k} style={{marginBottom:18}}>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10,paddingBottom:8,borderBottom:'1px solid var(--line)'}}>{l.toUpperCase()} · {items.length}</div>
              <div style={{display:'flex',flexDirection:'column',gap:6}}>
                {items.map(it => (
                  <div key={it.t} style={{display:'grid',gridTemplateColumns:'20px 1fr auto auto',gap:10,padding:'8px 10px',borderRadius:7,background:'var(--bg-3)',border:'1px solid var(--line)',alignItems:'center'}}>
                    <span style={{color: k==='DONE' ? 'var(--ok)' : k==='DOING' ? 'var(--accent)' : 'var(--ink-3)'}}>
                      {k==='DONE' ? Icon.check() : k==='DOING' ? '◐' : '○'}
                    </span>
                    <span style={{fontSize:13,color: k==='DONE' ? 'var(--ink-3)' : 'var(--ink-2)',textDecoration: k==='DONE' ? 'line-through' : 'none'}}>{it.t}</span>
                    <span style={{width:22,height:22,borderRadius:'50%',background:`linear-gradient(135deg, ${it.c}55, ${it.c}22)`,border:`1px solid ${it.c}44`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:9,fontWeight:600,color:it.c}}>{it.w}</span>
                    <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',minWidth:24,textAlign:'right'}}>{it.pts}P</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          <div className="card" style={{padding:'22px 24px'}}>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>BURNDOWN</div>
            <svg viewBox="0 0 280 120" style={{width:'100%',height:120}}>
              <defs>
                <linearGradient id="bdg" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="#d4ff3a" stopOpacity="0.3"/>
                  <stop offset="100%" stopColor="#d4ff3a" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <line x1="0" y1="100" x2="280" y2="100" stroke="var(--line)" strokeWidth="1"/>
              <line x1="0" y1="60" x2="280" y2="60" stroke="var(--line)" strokeDasharray="2 4"/>
              <line x1="0" y1="20" x2="280" y2="20" stroke="var(--line)" strokeDasharray="2 4"/>
              {/* Ideal */}
              <line x1="0" y1="10" x2="280" y2="100" stroke="var(--ink-3)" strokeDasharray="3 3" strokeWidth="1"/>
              {/* Actual */}
              <path d="M0,10 L40,16 L80,28 L120,32 L160,48" stroke="#d4ff3a" strokeWidth="2" fill="none"/>
              <path d="M0,10 L40,16 L80,28 L120,32 L160,48 L160,100 L0,100 Z" fill="url(#bdg)"/>
              <circle cx="160" cy="48" r="4" fill="#d4ff3a"/>
              {/* Predicted */}
              <path d="M160,48 L200,72 L240,86 L280,100" stroke="#d4ff3a" strokeOpacity="0.4" strokeWidth="2" fill="none" strokeDasharray="4 4"/>
            </svg>
            <div style={{display:'flex',justifyContent:'space-between',marginTop:10,fontSize:11,color:'var(--ink-3)'}}>
              <span className="mono">D1</span>
              <span className="mono">D5</span>
              <span className="mono">D10</span>
            </div>
          </div>

          <div className="card" style={{padding:'22px 24px'}}>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>RISKS</div>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {[
                ['low','OAuth provider rate limits','#7ee787'],
                ['med','MFA carrier compatibility','#ffb43a'],
                ['low','Email deliverability','#7ee787'],
              ].map(([l,t,c]) => (
                <div key={t} style={{display:'flex',alignItems:'center',gap:10,fontSize:12}}>
                  <span style={{width:6,height:6,borderRadius:'50%',background:c}}/>
                  <span style={{flex:1,color:'var(--ink-2)'}}>{t}</span>
                  <span className="mono" style={{fontSize:9,color: c,letterSpacing:'0.04em',textTransform:'uppercase'}}>{l}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card" style={{padding:'22px 24px',background:'linear-gradient(135deg, rgba(212,255,58,0.06), transparent)'}}>
            <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:10}}>NEXT DEMO</div>
            <div style={{fontSize:15,fontWeight:500,marginBottom:6}}>Friday, May 17 · 4:00 PM</div>
            <div style={{fontSize:12,color:'var(--ink-3)',lineHeight:1.5,marginBottom:14}}>Auth & sessions walkthrough. Bring your team.</div>
            <button className="btn btn-primary" style={{padding:'8px 12px',fontSize:12,width:'100%',justifyContent:'center'}}>Add to calendar</button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─── FILES ─────────────────────────────────────────────────

const PortalFiles = () => {
  const groups = [
    {label:'Awaiting your approval', tone:'warn', items:[
      ['Auth flow — final mockups','Figma','SR','2 days','review'],
      ['Brand mark v3','PDF','SR','5 days','review'],
    ]},
    {label:'Sprint 04 — Auth', tone:'normal', items:[
      ['OAuth flow diagram','PDF','AQ','today','final'],
      ['Session model','Doc','AQ','today','final'],
      ['MFA wireframes','Figma','SR','2 days','draft'],
    ]},
    {label:'Sprint 03 — Frontend', tone:'normal', items:[
      ['Dashboard.tsx','Code','HA','1 wk','final'],
      ['Components export','Storybook','NM','1 wk','final'],
      ['Lighthouse report','PDF','HA','1 wk','final'],
    ]},
    {label:'Sprint 02 — Design system', tone:'normal', items:[
      ['Tokens.json','JSON','SR','3 wks','final'],
      ['Brand guide','PDF','SR','3 wks','final'],
      ['Component library','Figma','SR','3 wks','final'],
      ['Type specimens','PDF','SR','3 wks','final'],
    ]},
  ];

  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}}>Files & deliverables</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>Every artifact, every revision, in one place.</div>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12}}>Download all (.zip)</button>
          <button className="btn btn-primary" style={{padding:'8px 14px',fontSize:12}}>↑ Upload</button>
        </div>
      </div>

      {groups.map((g, gi) => (
        <div key={g.label} style={{marginBottom:24}}>
          <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:12}}>
            <h3 style={{fontSize:14,fontWeight:500,letterSpacing:'-0.005em'}}>{g.label}</h3>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{g.items.length} FILES</span>
            {g.tone==='warn' && <span style={{width:6,height:6,borderRadius:'50%',background:'var(--warn)'}}/>}
          </div>
          <div style={{border:'1px solid', borderColor: g.tone==='warn' ? 'rgba(255,180,58,0.3)' : 'var(--line)', borderRadius:10,overflow:'hidden', background: g.tone==='warn' ? 'rgba(255,180,58,0.03)' : 'var(--bg-2)'}}>
            {g.items.map(([n,type,by,when,status],i) => (
              <div key={i} style={{display:'grid',gridTemplateColumns:'40px 2fr 70px 60px 90px 100px 80px',gap:14,padding:'12px 18px',alignItems:'center',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
                <span style={{width:32,height:32,borderRadius:6,background:'var(--bg-3)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--ink-3)',fontFamily:'var(--mono)',fontSize:9,letterSpacing:'0.04em'}}>{type.slice(0,3).toUpperCase()}</span>
                <span style={{fontSize:13,fontWeight:500}}>{n}</span>
                <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{type}</span>
                <span style={{width:24,height:24,borderRadius:'50%',background:'rgba(255,255,255,0.04)',border:'1px solid var(--line-2)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:9,color:'var(--ink-2)'}}>{by}</span>
                <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{when} ago</span>
                <span className="mono" style={{fontSize:9,padding:'3px 8px',borderRadius:5,letterSpacing:'0.04em',textTransform:'uppercase',width:'fit-content',
                  color: status==='review' ? 'var(--warn)' : status==='final' ? 'var(--ok)' : 'var(--ink-3)',
                  background: status==='review' ? 'rgba(255,180,58,0.1)' : status==='final' ? 'rgba(126,231,135,0.08)' : 'rgba(255,255,255,0.04)',
                  border: '1px solid', borderColor: status==='review' ? 'rgba(255,180,58,0.3)' : status==='final' ? 'rgba(126,231,135,0.3)' : 'var(--line-2)'}}>{status}</span>
                <div style={{display:'flex',gap:6,justifySelf:'end'}}>
                  {status==='review' ? (
                    <button className="btn btn-primary" style={{padding:'4px 10px',fontSize:11}}>Approve</button>
                  ) : (
                    <button style={{fontSize:11,color:'var(--ink-3)',padding:'4px 8px',borderRadius:5,border:'1px solid var(--line)'}}>Open ↗</button>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

// ─── MESSAGES ──────────────────────────────────────────────

const PortalMessages = () => {
  const threads = [
    {id:'t1',name:'Hassan A.',role:'Engineering lead',c:'#d4ff3a',last:'Just pushed the new dashboard branch — preview link in #demo',when:'12m',unread:1,active:true},
    {id:'t2',name:'Sana R.',role:'Design lead',c:'#ff8a3a',last:'New auth mockups are ready for review whenever you have a minute',when:'2h',unread:1},
    {id:'t3',name:'Amir Q.',role:'Backend',c:'#7c9bff',last:'Webhook retry logic merged. Watching the production logs.',when:'4h',unread:1},
    {id:'t4',name:'#general',role:'Team channel',c:'#a78bfa',last:'Hassan A.: nice — also worth running the perf tests',when:'yesterday',unread:0},
    {id:'t5',name:'Bilal K.',role:'AI engineer',c:'#a78bfa',last:'Got the eval pipeline set up if you want a walkthrough later',when:'2d',unread:0},
  ];
  const messages = [
    {who:'Hassan A.',c:'#d4ff3a',self:false,t:'Morning Jane. Quick heads up — I just pushed the new dashboard branch.',w:'09:34'},
    {who:'Hassan A.',c:'#d4ff3a',self:false,t:'Preview is at preview-ledgerline-frontend-r4f.atoms.dev. Same login as staging.',w:'09:34'},
    {who:'Jane',c:'#7c9bff',self:true,t:'Amazing, taking a look now',w:'09:38'},
    {who:'Jane',c:'#7c9bff',self:true,t:'The metric cards are gorgeous. Question — is the % delta calculated against the same period last month, or trailing 30d?',w:'09:41'},
    {who:'Hassan A.',c:'#d4ff3a',self:false,t:'Trailing 30 by default. We can swap to same-period-last-month with a toggle if you prefer — it\'s a 5-min change.',w:'09:42'},
    {who:'Hassan A.',c:'#d4ff3a',self:false,t:'Curious what your accounting team is used to seeing.',w:'09:42'},
    {who:'Jane',c:'#7c9bff',self:true,t:'They\'re used to same-period-last-month. Let\'s add the toggle and default to that.',w:'09:45'},
  ];

  return (
    <div style={{display:'grid',gridTemplateColumns:'300px 1fr',height:'calc(100vh - 53px)',overflow:'hidden'}}>
      {/* Thread list */}
      <aside style={{borderRight:'1px solid var(--line)',display:'flex',flexDirection:'column',background:'#08080b'}}>
        <div style={{padding:'14px 18px',borderBottom:'1px solid var(--line)'}}>
          <div style={{fontSize:15,fontWeight:500,letterSpacing:'-0.005em',marginBottom:10}}>Messages</div>
          <div style={{display:'flex',alignItems:'center',gap:8,padding:'6px 10px',borderRadius:7,background:'var(--bg-3)',border:'1px solid var(--line)'}}>
            <span style={{color:'var(--ink-3)',fontSize:12}}>⌕</span>
            <input placeholder="Search threads…" style={{flex:1,background:'transparent',border:0,outline:'none',color:'var(--ink)',fontSize:12,fontFamily:'var(--sans)'}}/>
          </div>
        </div>
        <div style={{flex:1,overflow:'auto'}}>
          {threads.map((t,i) => (
            <button key={t.id} style={{
              width:'100%',padding:'14px 18px',display:'grid',gridTemplateColumns:'36px 1fr 50px',gap:12,alignItems:'flex-start',textAlign:'left',
              borderBottom:'1px solid var(--line)',
              background: t.active ? 'rgba(212,255,58,0.05)' : 'transparent'
            }}>
              <span style={{width:34,height:34,borderRadius:'50%',background:`linear-gradient(135deg, ${t.c}55, ${t.c}22)`,border:`1px solid ${t.c}44`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:11,fontWeight:600,color:t.c}}>{t.name.replace('#','').split(' ').map(w=>w[0]).join('').slice(0,2)}</span>
              <div style={{minWidth:0}}>
                <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:3}}>
                  <span style={{fontSize:13,fontWeight: t.unread ? 600 : 500,letterSpacing:'-0.005em'}}>{t.name}</span>
                  {t.unread > 0 && <span style={{width:6,height:6,borderRadius:'50%',background:'var(--accent)'}}/>}
                </div>
                <div style={{fontSize:12,color:'var(--ink-3)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',lineHeight:1.3}}>{t.last}</div>
              </div>
              <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'right'}}>{t.when}</span>
            </button>
          ))}
        </div>
      </aside>

      {/* Conversation */}
      <div style={{display:'flex',flexDirection:'column',minHeight:0}}>
        <div style={{padding:'12px 24px',borderBottom:'1px solid var(--line)',display:'flex',alignItems:'center',gap:12}}>
          <span style={{width:32,height:32,borderRadius:'50%',background:'linear-gradient(135deg,#d4ff3a55,#d4ff3a22)',border:'1px solid #d4ff3a44',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:11,fontWeight:600,color:'#d4ff3a'}}>HA</span>
          <div style={{flex:1}}>
            <div style={{fontSize:13,fontWeight:500}}>Hassan A.</div>
            <div className="mono" style={{fontSize:10,color:'var(--ok)',letterSpacing:'0.04em'}}>● ONLINE · ENGINEERING LEAD</div>
          </div>
          <button style={{padding:'5px 10px',borderRadius:6,fontSize:11,color:'var(--ink-3)',border:'1px solid var(--line)'}}>📞 Call</button>
          <button style={{padding:'5px 10px',borderRadius:6,fontSize:11,color:'var(--ink-3)',border:'1px solid var(--line)'}}>⊞ Files</button>
        </div>

        <div style={{flex:1,overflow:'auto',padding:'24px 32px',display:'flex',flexDirection:'column',gap:14}}>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',textAlign:'center',marginBottom:8}}>TODAY</div>
          {messages.map((m,i) => (
            <div key={i} style={{display:'flex',justifyContent: m.self ? 'flex-end' : 'flex-start'}}>
              <div style={{
                maxWidth:'68%',display:'flex',gap:10,
                flexDirection: m.self ? 'row-reverse' : 'row',
                alignItems:'flex-end'
              }}>
                {(!m.self || (i > 0 && messages[i-1].self !== m.self)) && (
                  <span style={{width:28,height:28,borderRadius:'50%',background:`linear-gradient(135deg, ${m.c}55, ${m.c}22)`,border:`1px solid ${m.c}44`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:10,fontWeight:600,color:m.c,flexShrink:0}}>{m.who.split(' ').map(w=>w[0]).join('').slice(0,2)}</span>
                )}
                <div>
                  <div style={{
                    padding:'11px 15px', borderRadius: m.self ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
                    background: m.self ? 'var(--accent)' : 'var(--bg-2)',
                    color: m.self ? '#0a0a0a' : 'var(--ink)',
                    fontSize:14, lineHeight:1.5,
                    border: m.self ? '1px solid var(--accent)' : '1px solid var(--line)'
                  }}>{m.t}</div>
                  <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.04em',marginTop:4,textAlign: m.self ? 'right' : 'left',paddingLeft: m.self ? 0 : 6,paddingRight: m.self ? 6 : 0}}>{m.w}</div>
                </div>
              </div>
            </div>
          ))}
          <div style={{display:'flex',alignItems:'center',gap:8,color:'var(--ink-3)',fontSize:12,marginTop:4}}>
            <span style={{display:'inline-flex',gap:3}}>
              <span style={{width:5,height:5,borderRadius:'50%',background:'var(--ink-3)',animation:'pulse 1.4s infinite'}}/>
              <span style={{width:5,height:5,borderRadius:'50%',background:'var(--ink-3)',animation:'pulse 1.4s infinite',animationDelay:'.2s'}}/>
              <span style={{width:5,height:5,borderRadius:'50%',background:'var(--ink-3)',animation:'pulse 1.4s infinite',animationDelay:'.4s'}}/>
            </span>
            <span>Hassan is typing…</span>
            <style>{`@keyframes pulse { 0%,100%{opacity:0.3} 50%{opacity:1} }`}</style>
          </div>
        </div>

        <div style={{padding:'14px 24px',borderTop:'1px solid var(--line)',background:'var(--bg-2)'}}>
          <div style={{display:'flex',alignItems:'center',gap:10,padding:'10px 14px',borderRadius:10,background:'var(--bg-3)',border:'1px solid var(--line-2)'}}>
            <button style={{color:'var(--ink-3)',fontSize:16}}>＋</button>
            <input placeholder="Reply to Hassan…" style={{flex:1,background:'transparent',border:0,outline:'none',color:'var(--ink)',fontSize:14,fontFamily:'var(--sans)'}}/>
            <button style={{color:'var(--ink-3)',fontSize:14}}>📎</button>
            <button className="btn btn-primary" style={{padding:'6px 12px',fontSize:12}}>Send →</button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─── BILLING ───────────────────────────────────────────────

const PortalBilling = () => (
  <div style={{padding:'28px 32px'}}>
    <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:24}}>Billing & invoices</h1>

    <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:18,marginBottom:18}}>
      <div className="card" style={{padding:'28px 32px',background:'linear-gradient(135deg, rgba(212,255,58,0.06), transparent)',borderColor:'var(--accent)'}}>
        <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:14}}>● PROJECT ON ACCOUNT</div>
        <div style={{fontSize:14,color:'var(--ink-3)',marginBottom:4}}>Ledgerline rebuild · Studio tier</div>
        <div style={{display:'flex',alignItems:'baseline',gap:8,marginBottom:18}}>
          <div style={{fontSize:42,fontWeight:500,letterSpacing:'-0.025em'}}>$62,400</div>
          <div style={{fontSize:14,color:'var(--ink-3)'}}>contract value</div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,paddingTop:18,borderTop:'1px solid var(--line)'}}>
          <Row label="Paid" value={<span style={{color:'var(--ok)'}}>$31,200</span>}/>
          <Row label="Remaining" value="$31,200"/>
          <Row label="Due" value="On launch"/>
        </div>
      </div>

      <div className="card" style={{padding:'24px 26px'}}>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>PAYMENT METHOD</div>
        <div style={{padding:'14px 16px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)',display:'flex',alignItems:'center',gap:12,marginBottom:14}}>
          <span style={{padding:'4px 10px',borderRadius:5,background:'#1a1f3c',color:'#fff',fontFamily:'var(--mono)',fontSize:11,fontWeight:700,letterSpacing:'0.04em'}}>VISA</span>
          <div>
            <div className="mono" style={{fontSize:13,color:'var(--ink)'}}>•••• •••• •••• 4242</div>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',marginTop:2,letterSpacing:'0.04em'}}>EXP 12/28</div>
          </div>
        </div>
        <button className="btn btn-ghost" style={{padding:'7px 11px',fontSize:12,width:'100%',justifyContent:'center'}}>Update card</button>
      </div>
    </div>

    {/* Invoices */}
    <div className="card" style={{padding:0,overflow:'hidden'}}>
      <div style={{padding:'14px 22px',borderBottom:'1px solid var(--line)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{fontSize:14,fontWeight:500}}>Invoices</div>
        <button className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>DOWNLOAD ALL (CSV)</button>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr 100px 110px 80px',gap:14,padding:'12px 22px',background:'rgba(255,255,255,0.02)',borderBottom:'1px solid var(--line)'}}>
        {['Invoice','Date','Description','Amount','Status',''].map(h => (
          <div key={h} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{h}</div>
        ))}
      </div>
      {[
        ['INV-0042','May 1, 2026','Sprint 04 milestone',7800,'paid'],
        ['INV-0041','Apr 17, 2026','Sprint 03 milestone',7800,'paid'],
        ['INV-0040','Apr 3, 2026','Sprint 02 milestone',7800,'paid'],
        ['INV-0039','Mar 20, 2026','Sprint 01 milestone',7800,'paid'],
        ['INV-0038','Mar 1, 2026','Project kickoff · 50%',31200,'paid'],
        ['INV-0043','May 22, 2026','CMS handoff milestone',7800,'upcoming'],
        ['INV-0044','Jun 28, 2026','Launch · final 50%',23400,'upcoming'],
      ].map(([n,d,desc,amt,s],i) => (
        <div key={n} style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr 100px 110px 80px',gap:14,padding:'14px 22px',alignItems:'center',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
          <span className="mono" style={{fontSize:12,color:'var(--ink)',letterSpacing:'0.04em'}}>{n}</span>
          <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{d}</span>
          <span style={{fontSize:13,color:'var(--ink-2)'}}>{desc}</span>
          <span style={{fontSize:13,fontWeight:500}}>${amt.toLocaleString()}</span>
          <span className="mono" style={{fontSize:9,padding:'3px 8px',borderRadius:5,letterSpacing:'0.04em',textTransform:'uppercase',width:'fit-content',
            color: s==='paid' ? 'var(--ok)' : 'var(--ink-3)',
            background: s==='paid' ? 'rgba(126,231,135,0.08)' : 'rgba(255,255,255,0.04)',
            border: '1px solid', borderColor: s==='paid' ? 'rgba(126,231,135,0.3)' : 'var(--line-2)'}}>{s}</span>
          <button style={{fontSize:11,color:'var(--ink-3)',padding:'4px 9px',borderRadius:5,border:'1px solid var(--line)',justifySelf:'end'}}>
            {s==='paid' ? 'PDF ↓' : 'Preview'}
          </button>
        </div>
      ))}
    </div>
  </div>
);

window.Portal = Portal;