function AppShell({active,children}){const[s]=useStore();const[open,setOpen]=useState(false);
 const L=(k,ic,l,h)=><a key={k} href={h} className={active===k?'on':''} onClick={()=>setOpen(false)}><Icon n={ic} s={18}/>{l}</a>;
 return <><div className="mtop"><Logo href="#/app" my/><button className="burger" style={{display:'block'}} onClick={()=>setOpen(true)} aria-label="Menu"><Icon n="menu" s={22}/></button></div>
 <div className="app">{open&&<div className="scrim" style={{zIndex:55,background:'rgba(14,41,35,.3)'}} onClick={()=>setOpen(false)}></div>}
 <aside className={'side'+(open?' open':'')}><div style={{paddingTop:10}}><Logo href="#/app" my/></div>
 <label className="side-search"><Icon n="search" s={15}/><input placeholder="Search" aria-label="Search"/></label>
 <nav className="side-nav">{L('home','home','Home','#/app')}{L('find','users','Find a clinician','#/app/clinicians')}{L('sessions','cal','My sessions','#/app/sessions')}<MsgTherapist/></nav>
 <div><div className="side-lbl">Your work</div><nav className="side-nav">{L('index','gauge','Energy Load Index','#/app/index')}{L('drains','grid','My Drains','#/app/drains')}{L('manual','book','The Manual','#/resources')}{L('protocols','leaf','Protocols','#/resources?to=protocols')}</nav></div>
 <a className="side-me" href="#/app/settings"><span className="av">{(s.name||'M')[0]}</span><span style={{flex:1,fontSize:14,fontWeight:500}}>{s.name}</span><Icon n="chev" s={16}/></a></aside>
 <main className="main">{children}</main></div></>}

function NextSession(){const[s]=useStore();const b=s.booking;
 if(!b)return <div className="card" style={{padding:'16px 20px',minWidth:240}}><span className="tiny" style={{textTransform:'uppercase',letterSpacing:2,fontWeight:600}}>Next session</span><p className="small" style={{marginTop:6,color:'var(--ink2)'}}>No session booked</p><a href="#/app/clinicians" style={{fontSize:13}}>Find a clinician</a></div>;
 const c=PD.clin(b.clin);return <a className="card hov" href="#/app/sessions" style={{display:'flex',gap:14,alignItems:'center',padding:'14px 18px',textDecoration:'none',color:'var(--ink)'}}><div style={{width:48,flex:'none'}}><Portrait c={c} size={48} radius={24}/></div><div><span className="tiny" style={{textTransform:'uppercase',letterSpacing:2,fontWeight:600}}>Next session</span><p style={{fontSize:14,fontWeight:500}}>{c.name}</p><p className="small">{b.date.replace(' 2026','')} · {b.time}</p></div></a>}

function ContentHead({title}){const[s]=useStore();return <div className="row" style={{justifyContent:'space-between',alignItems:'flex-start',gap:20,marginBottom:36}}><h1 className="greet">{title||`Welcome, ${s.name}.`}</h1><div className="row" style={{gap:12}}><NextSession/><a className="btn btn-ghost" href="#/app/book" style={{padding:'12px 20px 12px 12px'}}><span style={{width:30,height:30,borderRadius:'50%',background:'var(--green)',color:'var(--cream)',display:'grid',placeItems:'center'}}><Icon n="plus" s={16}/></span>Book a session</a></div></div>}

function IndexChart({s}){const r=PD.score(s.eli.ans);const r2=PD.score(PD.DEMO_ANS_AFTER);const X1=150,X2=430,Y=v=>160-v*1.4;
 return <div className="card" style={{padding:24}}><div className="row" style={{justifyContent:'space-between'}}><h2 className="h3" style={{fontSize:22}}>Your Index over time</h2><a href="#/app/index?view=result" style={{fontSize:13}}>See full result</a></div>
 <svg viewBox="0 0 600 190" style={{width:'100%',height:190,marginTop:12}} aria-label="Index chart, before first session and after session 6">{[0,25,50,75,100].map(y=><g key={y}><line x1="40" x2="590" y1={Y(y)} y2={Y(y)} stroke="rgba(35,39,31,.08)"/><text x="30" y={Y(y)+4} fontSize="10" fill="#8A8E7F" textAnchor="end">{y}%</text></g>)}
 {(()=>{const e=Object.keys(r.pct).sort((x,y)=>r2.pct[y]-r2.pct[x]);let last=-99;return e.map(k=>{const a=r.pct[k],b=r2.pct[k];let ly=Y(b)+4;if(ly-last<15)ly=last+15;last=ly;return <g key={k}><line x1={X1} x2={X2} y1={Y(a)} y2={Y(b)} stroke={PD.DIMS[k].c} strokeWidth="1.5" opacity=".6"/><circle cx={X1} cy={Y(a)} r="5" fill={PD.DIMS[k].c}/><circle cx={X2} cy={Y(b)} r="5" fill={PD.DIMS[k].c}/><text x={X2+14} y={ly} fontSize="11" fill={PD.DIMS[k].c}>{PD.DIMS[k].name} {a}% to {b}%</text></g>})})()}
 <text x={X1} y="182" fontSize="10" fill="#8A8E7F" textAnchor="middle">Before first session</text><text x={X2} y="182" fontSize="10" fill="#8A8E7F" textAnchor="middle">After session 6</text></svg>
 <p className="small" style={{marginTop:4}}>{PD.band(r.total).name}, {r.total} / 48 before your first session. {PD.band(r2.total).name}, {r2.total} / 48 after session 6.</p><p className="tiny" style={{marginTop:4}}>Demo data for the beta. Visible to you, and to your psychologist only with your consent. Never part of the investor report.</p></div>}

function Dashboard({q}){const[s,set]=useStore();const first=q.state==='first';const[modal,setModal]=useState(first);
 useEffect(()=>{if(first)set({eli:null,booking:null,drains:[],firstSeen:false});else if(q.state==='returning')set({...DEFAULT_STATE,name:s.name||'Mariana'})},[q.state]);
 const car=[['Purpose and Values','Identity Fusion: when the company becomes the self'],['Emotional','Leadership Loneliness: building a circle you do not have to edit for'],['Physical','Recovery Debt: the protocol for founders who rest only when ill'],['Purpose and Values','Financial Stress: carrying runway without carrying it home'],['Mental','Decision Fatigue: batching, delegating, deciding less']];
 const cref=useRef();const scroll=d=>cref.current&&cref.current.scrollBy({left:d*280,behavior:'smooth'});
 const nextSteps=<div className="card" style={{padding:'clamp(24px,4vw,40px)',textAlign:'center'}}><h2 className="serif" style={{fontSize:'clamp(26px,3vw,34px)',fontWeight:400}}>Start with how much you are actually carrying</h2>
 <div className="grid3" style={{marginTop:28,textAlign:'left'}}>{[['12 questions','Under 4 minutes'],['Four dimensions','Cognitive, Physical, Emotional, Purpose'],['One action','Something concrete to do this week']].map(([b,t])=><div key={b} style={{display:'flex',gap:12}}><Tick/><div><b style={{fontWeight:600,fontSize:14}}>{b}</b><p className="small" style={{color:'var(--ink2)'}}>{t}</p></div></div>)}</div>
 <div style={{marginTop:28}}><Btn href="#/app/index">Take the Energy Load Index</Btn></div></div>;
 return <AppShell active="home"><ContentHead/>
 {!s.eli?nextSteps:<><IndexChart s={s}/><div className="card" style={{padding:20,marginTop:16}}><p style={{fontSize:15,fontWeight:600}}>Six sessions in. Take the Index again to see what has moved.</p><p style={{marginTop:8,fontSize:14}}><a href="#/app/index">Take the Index again</a></p></div></>}
 {!s.eli&&<div className="card" style={{marginTop:16,display:'flex',gap:20,alignItems:'center',justifyContent:'space-between',flexWrap:'wrap'}}><div><h3 className="h3" style={{fontSize:22}}>Or start with the intake</h3><p className="small" style={{color:'var(--ink2)'}}>Five minutes, talking or typing. Three matched clinicians at the end.</p></div><Btn ghost href="#/intake">Find your expert</Btn></div>}
 {s.drains&&s.drains.length>0&&<div className="card" style={{marginTop:16}}><div className="row" style={{justifyContent:'space-between'}}><h2 className="h3" style={{fontSize:22}}>Your drains</h2><a href="#/app/drains" style={{fontSize:13}}>Review your drains</a></div><div className="chips" style={{marginTop:14,gap:8}}>{s.drains.map(n=><span className="dchip" key={n} style={{paddingRight:14}}><i>{String(n).padStart(2,'0')}</i>{PD.drain(n).name}</span>)}</div></div>}
 <section style={{marginTop:36}}><h2 className="h3" style={{fontSize:24,marginBottom:16}}>More for you</h2><div className="carousel" ref={cref}>{car.map(([e,t],i)=><a key={t} className="card hov" href="#/resources" style={{padding:0,overflow:'hidden',textDecoration:'none',color:'var(--ink)'}}><div style={{aspectRatio:'16/10',background:'var(--bg2)',position:'relative'}}><image-slot id={'car-'+i} shape="rect" placeholder="Quiet image"></image-slot></div><div style={{padding:16}}><span className="eyebrow" style={{marginBottom:6}}>{e}</span><p className="serif" style={{fontSize:19,lineHeight:1.3}}>{t}</p></div></a>)}</div>
 <div className="row" style={{justifyContent:'flex-end',marginTop:12,gap:8}}><button className="circ-btn" onClick={()=>scroll(-1)} aria-label="Previous"><Icon n="chevl" s={16}/></button><button className="circ-btn" onClick={()=>scroll(1)} aria-label="Next"><Icon n="chev" s={16}/></button></div></section>
 {modal&&<div className="scrim" onClick={()=>setModal(false)}><div className="modal" onClick={e=>e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="m-t"><button className="x" onClick={()=>setModal(false)} aria-label="Close"><Icon n="x" s={16}/></button>
 <div style={{aspectRatio:'16/9',borderRadius:10,background:'var(--bg2)',position:'relative',overflow:'hidden'}}><image-slot id="first-modal-illus" shape="rect" placeholder="placeholder: quiet line illustration, Pausa green on lime, no stock wellness imagery"></image-slot></div>
 <h2 id="m-t" className="serif" style={{fontSize:30,fontWeight:400,lineHeight:1.2,marginTop:24,textAlign:'center'}}>Start with how much you are actually carrying</h2>
 <div style={{display:'grid',gap:10,marginTop:20}}>{[['12 questions','Under 4 minutes'],['Four dimensions','Cognitive, Physical, Emotional, Purpose'],['One action','Something concrete to do this week']].map(([b,t])=><div key={b} style={{display:'flex',gap:12}}><Tick/><span style={{fontSize:14}}><b style={{fontWeight:600}}>{b}</b> · <span style={{color:'var(--ink2)'}}>{t}</span></span></div>)}</div>
 <div style={{textAlign:'center',marginTop:24}}><Btn href="#/app/index">Take the Energy Load Index</Btn></div></div></div>}
 </AppShell>}

function MyDrains(){const[s,set]=useStore();const sel=s.drains||[];
 return <AppShell active="drains"><ContentHead title="My Drains"/><p className="lead" style={{marginTop:-16}}>Pre-filled from your intake. Select or clear anything. Only you and the clinician you book with can see these.</p>
 <DrainGrid sel={sel} setSel={d=>set({drains:d})}/>
 <div className="counter"><DrainCounter n={sel.length}/><div className="row"><Btn sm href="#/app/clinicians">See clinicians who work with these</Btn><Btn sm ghost href="#/resources?to=protocols" arrow={false}>Read the protocols for these</Btn></div></div></AppShell>}

function AppClinicians(){return <AppShell active="find"><ContentHead title="Find a clinician"/><div className="row" style={{marginBottom:20}}><Btn sm href="#/intake">Get matched through the intake</Btn><span className="small">or browse the whole network below</span></div><div className="grid3">{PD.CLIN.slice(0,6).map(c=><ClinCard c={c} key={c.id}/>)}</div><p style={{marginTop:20}}><a href="#/clinicians">See all {PD.CLIN.length} clinicians</a></p></AppShell>}

function Sessions(){const[s,set]=useStore();const[tab,setTab]=useState('up');const[menu,setMenu]=useState(false);const b=s.booking;
 const past=[{clin:'steven',date:'Mon 28 Sep 2026',time:'11:00'}];
 return <AppShell active="sessions"><ContentHead title="My sessions"/><div className="tabs" role="tablist">{[['up','Upcoming'],['past','Past']].map(([k,l])=><button key={k} role="tab" aria-selected={tab===k} className={tab===k?'on':''} onClick={()=>setTab(k)}>{l}</button>)}</div>
 {tab==='up'?(b?<div className="srow2"><div style={{width:52}}><Portrait c={PD.clin(b.clin)} size={52} radius={26}/></div><div style={{flex:1,minWidth:0}}><p style={{fontWeight:500}}>{PD.clin(b.clin).name}</p><p className="small">{window.sessionLabel?sessionLabel(b.type):b.type} · {b.date} · {b.time} (Europe/Lisbon)</p></div>
 <button className="btn btn-sm" disabled title="Join activates 15 minutes before">Join</button>
 <div className="kebab"><button className="circ-btn" onClick={()=>setMenu(!menu)} aria-label="More"><Icon n="more" s={16} w={2.5}/></button>{menu&&<div className="menu"><button onClick={()=>go('#/app/book?clin='+b.clin+'&step=3')}>Reschedule</button><button onClick={()=>{set({booking:null});setMenu(false)}}>Cancel</button></div>}</div></div>
 :<p className="body" style={{padding:'24px 0'}}>No upcoming sessions. <a href="#/app/book">Book one</a>.</p>)
 :past.map((p,i)=><div className="srow2" key={i}><div style={{width:52}}><Portrait c={PD.clin(p.clin)} size={52} radius={26}/></div><div style={{flex:1}}><p style={{fontWeight:500}}>{PD.clin(p.clin).name}</p><p className="small">{p.date} · {p.time}</p></div><Btn sm ghost href={'#/app/book?clin='+p.clin+'&step=3'} arrow={false}>Book again</Btn></div>)}
 <div style={{marginTop:24}}><MsgTherapist block/></div><p className="small" style={{marginTop:24,display:'flex',gap:8}}><Icon n="lock" s={15}/>There are no session notes here. Notes belong to your clinician, under their professional record-keeping duty, and never pass through Pausa.</p></AppShell>}

function Settings(){const[s,set]=useStore();return <AppShell><ContentHead title="Settings"/><div className="card" style={{maxWidth:640,display:'grid',gap:16}}><div className="field"><label>First name</label><input className="inp" value={s.name} onChange={e=>set({name:e.target.value})}/></div><div className="field"><label>Email</label><input className="inp" value={s.email} onChange={e=>set({email:e.target.value})}/></div>
 <div className="row"><Btn sm ghost arrow={false}>Download my data</Btn><Btn sm ghost arrow={false}>Delete my intake summary</Btn></div><p className="small">Beta preview: <a href="#/app?state=first">first-login state</a> · <a href="#/app?state=returning">returning state</a></p></div></AppShell>}

Object.assign(window,{AppShell,ContentHead,Dashboard,MyDrains,AppClinicians,Sessions,Settings});

function MsgTherapist({block}){const[o,setO]=useState(false);return <div style={{position:'relative'}}><button type="button" aria-disabled="true" onClick={()=>setO(!o)} className={block?'srow2':''} style={block?{width:'100%',textAlign:'left',cursor:'pointer',opacity:.75}:{display:'flex',alignItems:'center',gap:10,width:'100%',background:'none',border:0,padding:'10px 12px',font:'inherit',color:'var(--ink3)',cursor:'pointer',textAlign:'left',flexWrap:'wrap'}}><Icon n="mail" s={18}/><span style={block?{flex:1}:{}}>Message your psychologist</span><span className="chip chip-out" style={{fontSize:11}}>In development</span></button>{o&&<p className="small" style={{padding:'8px 12px',background:'var(--bg2)',borderRadius:12,marginTop:6}}>Short messages between sessions are coming. For now, your psychologist shares how to reach them in your first session.</p>}</div>}
Object.assign(window,{MsgTherapist});