function MailFrame({children}){return <div className="mail"><div style={{textAlign:'center',marginBottom:20,color:'var(--green)'}}><Mark s={30}/></div><div className="card">{children}</div><p className="tiny" style={{textAlign:'center',marginTop:18,lineHeight:1.8}}>Your fund never sees that you are here.<br/>© 2026 Pausa · pausa.pt</p></div>}
const mBtn=(t)=><span className="btn" style={{marginTop:22}}>{t}</span>;
function Emails(){const r=PD.score(PD.DEMO_ANS);return <div style={{padding:'48px 20px',background:'#E7E9DD',minHeight:'100vh'}}><div className="wrap"><Eyebrow>Transactional emails · 600px</Eyebrow><h1 className="h2" style={{marginBottom:32}}>Four emails</h1>
 <div style={{display:'flex',flexWrap:'wrap',gap:28,alignItems:'flex-start'}}>
 <MailFrame><p className="serif" style={{fontSize:26}}>Hello Mariana.</p><p className="body" style={{marginTop:8}}>Confirm your address and you are in.</p>{mBtn('Verify email')}<p className="body" style={{marginTop:24}}>The Pausa team</p></MailFrame>
 <MailFrame><p className="serif" style={{fontSize:26}}>Session confirmed.</p><table style={{marginTop:14,fontSize:14,color:'var(--ink2)',borderCollapse:'collapse',width:'100%'}}><tbody>{[['Clinician','Steven'],['Date','Monday 12 October 2026'],['Time','11:00'],['Timezone','Europe/Lisbon (UTC+1:00)'],['Duration','50 minutes']].map(([a,b])=><tr key={a}><td style={{padding:'6px 0',color:'var(--ink3)',width:120}}>{a}</td><td>{b}</td></tr>)}</tbody></table>{mBtn('Add to calendar')}<p className="small" style={{marginTop:18}}>Reschedule or cancel free until 11:00 on Sunday 11 October.</p></MailFrame>
 <MailFrame><span className="eyebrow">Your Energy Load Index</span><p className="serif" style={{fontSize:30,color:r.band.c}}>{r.band.name}</p><p className="small">{r.total} / 48</p><div style={{marginTop:14}}>{['cognitive','emotional','purpose','physical'].map(k=><div className="meter" key={k} style={{gridTemplateColumns:'90px 1fr 40px',padding:'6px 0',fontSize:13}}><span>{PD.DIMS[k].name}</span><div className="meter-t"><i style={{width:r.pct[k]+'%',background:PD.DIMS[k].c}}></i></div><span>{r.pct[k]}%</span></div>)}</div><p className="lbl" style={{marginTop:18}}>One action this week</p><p className="body" style={{fontSize:14}}>Create one hard boundary on cognitive load: one hour each evening, laptop closed, phone in another room.</p>{mBtn('See your full result')}</MailFrame>
 <MailFrame><p className="serif" style={{fontSize:26}}>Tomorrow at 11:00.</p><p className="body" style={{marginTop:8}}>Your session with Steven, 50 minutes, Europe/Lisbon.</p>{mBtn('Join the session')}<p className="serif" style={{fontStyle:'italic',fontSize:18,marginTop:22,color:'var(--ink2)'}}>Somewhere you can speak freely is worth more than a good connection.</p></MailFrame></div></div></div>}

function StyleSheet(){const tok=[['--bg (cream)','#FFFFEB'],['--bg2 (beige)','#F4F2DE'],['--bg3 (beige deep)','#E8E6D2'],['--ink','#1A1A1A'],['--ink2','#4D4C44'],['--ink3','#7C7A6E'],['--teal (accent)','#034F46'],['--pink (buttons)','#F0D8FA'],['--green-l (pink tint)','#F7EAFC'],['--mint','#DCEFD8'],['--field','#FAF8E6'],['--card','#ffffff']];
 const[on,setOn]=useState(2);const[sel,setSel]=useState([12]);
 return <div style={{padding:'48px 0 96px'}}><div className="wrap"><Eyebrow>Reference</Eyebrow><h1 className="h1">Style sheet</h1>
 <h2 className="h3" style={{marginTop:48}}>Colour</h2><div className="grid4" style={{gridTemplateColumns:'repeat(auto-fill,minmax(140px,1fr))',marginTop:16,gap:12}}>{tok.map(([n,c])=><div className="sw" key={n}><div style={{background:c}}></div><p><b style={{fontWeight:600}}>{n}</b><br/>{c}</p></div>)}</div>
 <h2 className="h3" style={{marginTop:40}}>Result states</h2><div className="grid4" style={{marginTop:16,gap:12}}>{PD.BANDS.map(b=><div key={b.k} style={{background:b.bg,color:b.c,borderRadius:10,padding:18}}><b className="serif" style={{fontSize:22,fontWeight:500}}>{b.name}</b><p style={{fontSize:11,marginTop:4}}>{b.c} on {b.bg}</p></div>)}</div>
 <h2 className="h3" style={{marginTop:40}}>Type</h2><div className="card" style={{marginTop:16,display:'grid',gap:18}}><p className="h1">H1 Cormorant 400 <em>accent</em></p><p className="h2">H2 Cormorant 400</p><p className="q">Question Cormorant 400, clamp 22 to 30px</p><p className="hint">Hint, italic 13px</p><p className="body">Body Montserrat 300, 15px, line-height 1.7.</p><span className="eyebrow" style={{margin:0}}>Eyebrow 10px 600 2.5px</span><p className="legal">Legal 11px ink4</p></div>
 <h2 className="h3" style={{marginTop:40}}>Nav toggle</h2><div className="row" style={{marginTop:16,gap:16}}>{['founders','funds','about'].map(k=><nav className="seg" key={k}>{[['founders','Founders'],['funds','VC Funds'],['about','About']].map(([kk,l])=><a key={kk} className={k===kk?'on':''}>{l}</a>)}</nav>)}</div>
 <h2 className="h3" style={{marginTop:40}}>Buttons</h2><div className="row" style={{marginTop:16}}><Btn>Primary</Btn><Btn ghost arrow={false}>Secondary</Btn><Btn disabled>Disabled</Btn><Btn sm>Small</Btn><button className="tlink">Text link</button></div>
 <div className="band" style={{marginTop:12,padding:24}}><div className="row"><Btn>On dark</Btn><a className="btn btn-dark-ghost">Ghost on dark</a></div></div>
 <h2 className="h3" style={{marginTop:40}}>Option button</h2><div className="opts" style={{marginTop:16,maxWidth:420}}>{['Default','Hover','Selected'].map((l,i)=><Option key={l} on={on===i} onClick={()=>setOn(i)}>{l}</Option>)}</div>
 <h2 className="h3" style={{marginTop:40}}>Card, chips, field</h2><div className="grid3" style={{marginTop:16}}><div className="card"><Eyebrow>Eyebrow</Eyebrow><p className="h3">Card</p><p className="body" style={{fontSize:14}}>White, 1px border, radius 10, padding 22.</p></div>
 <div className="card" style={{display:'grid',gap:10,alignContent:'start'}}><div className="chips"><span className="chip">Chip</span><span className="chip chip-lime">Next slot: Tue 14:00</span><span className="chip chip-out">Underway</span></div><div className="chips"><span className="ev-chip ev-hi">Highest</span><span className="ev-chip ev-md">Medium</span><span className="ev-chip ev-tg">Targeted</span></div></div>
 <div className="card" style={{display:'grid',gap:12}}><div className="field"><label>Field</label><input className="inp" placeholder="Placeholder"/></div><div className="field"><label>Highlighted field</label><input className="inp hl" placeholder="Search for your fund"/></div></div></div>
 <h2 className="h3" style={{marginTop:40}}>Meter, score bar, orb</h2><div className="grid3" style={{marginTop:16}}><div className="card"><div className="meter"><span>Cognitive</span><div className="meter-t"><i style={{width:'69%',background:'var(--green)'}}></i></div><span>69%</span></div></div>
 <div className="card"><div className="segbar">{Array.from({length:12}).map((_,k)=><i key={k} style={{height:8+k*(20/11),background:'#7a2d2d',opacity:k<7?1:.12}}></i>)}</div></div>
 <div className="card" style={{display:'grid',placeItems:'center'}}><div className="orb" style={{transform:'scale(.7)'}}></div></div></div>
 <h2 className="h3" style={{marginTop:40}}>Drain card</h2><div style={{maxWidth:640}}><div className="grid2" style={{marginTop:16,gap:10}}>{[12,3].map(n=>{const d=PD.drain(n);const o=sel.includes(n);return <button key={n} className={'drain'+(o?' on':'')} onClick={()=>setSel(o?sel.filter(x=>x!==n):[...sel,n])}><span className="n">{String(n).padStart(2,'0')}</span><b>{d.name}</b><p>{d.d}</p></button>})}</div></div>
 <h2 className="h3" style={{marginTop:40}}>Flowing line</h2><div style={{marginTop:8}}><FlowLine/><FlowLine shape="wave"/></div></div></div>}

const MAP=[['Public site',[['Homepage, VC Funds','#/'],['Founders','#/founders'],['Founders, previous','#/founders-v2'],['Homepage, previous flow','#/v2'],['Homepage, classic','#/classic'],['Partner form','#/partner'],['Homepage, Founders','#/founders'],['VC Funds and pricing','#/funds'],['Clinician directory, filters applied','#/clinicians'],['Zuzanna, full profile','#/clinicians/zuzanna'],['Steven, profile','#/clinicians/steven'],['For Psychologists','#/psychologists'],['About','#/about'],['How it works / Pausa OS','#/how'],['Mission and Values','#/mission'],['Careers','#/careers'],['Trust centre','#/trust'],['Resource hub, five drains','#/resources'],['Confidentiality Policy','#/confidentiality']]],
 ['Account creation',[['1 · Access route','#/signup/1'],['2 · Access code','#/signup/2'],['3 · Fund','#/signup/3'],['4 · Create account','#/signup/4'],['5 · First name','#/signup/5'],['6 · Year of birth','#/signup/6'],['7 · What your fund sees','#/signup/7'],['8 · Verify email','#/signup/8']]],
 ['Intake',[['Entry','#/intake'],['Conversation, voice','#/intake/talk?mode=talk'],['Conversation, text','#/intake/talk?mode=type'],['Review','#/intake/review'],['Matches','#/intake/matches'],['Before you carry on','#/safety']]],
 ['Product',[['Dashboard, first login','#/app?state=first'],['Dashboard, returning','#/app?state=returning'],['Index, intro','#/app/index'],['Index, question 6','#/app/index?q=6'],['Index, Elevated result','#/app/index?view=result'],['My Drains','#/app/drains'],['Booking, step 1','#/app/book'],['Booking, calendar','#/app/book?step=3&clin=steven'],['Booking, phone modal','#/app/book?step=4&clin=steven'],['My sessions','#/app/sessions']]],
 ['Reference',[['Transactional emails','#/emails'],['Style sheet','#/styles']]]];
function BetaMap(){return <Page seg="about"><section className="wrap sec"><Eyebrow>beta.pausa.pt</Eyebrow><h1 className="h1">Pausa OS <em>beta</em></h1><p className="lead" style={{marginTop:14}}>Every screen in the build. Resize the window for the 390px versions.</p>
 <div className="grid3" style={{marginTop:40,alignItems:'start'}}>{MAP.map(([h,ls])=><div key={h} className="card"><h2 className="h3" style={{fontSize:22,marginBottom:10}}>{h}</h2><ul style={{listStyle:'none',padding:0,margin:0,display:'grid',gap:6}}>{ls.map(([l,u])=><li key={u}><a href={u} style={{fontSize:14}}>{l}</a></li>)}</ul></div>)}</div></section></Page>}

Object.assign(window,{Emails,StyleSheet,BetaMap});