function PlanScreen(){
  const days = [['Mon',1980,'Logged'],['Tue',2100,'Today'],['Wed',2040,''],['Thu',1960,''],['Fri',2180,''],['Sat',2240,''],['Sun',1900,'']];
  const [sel,setSel] = React.useState('Tue');
  return (<div style={{position:'relative',flex:1,overflowY:'auto'}}>
    <ScreenHeader eyebrow="12–18 May" title="Your week" right={<IconButton icon="shopping-basket" label="Shopping list" tone="card" />} />
    <div style={{display:'flex',gap:8,overflowX:'auto',padding:'0 20px 16px'}}>
      {days.map(([d,kcal,tag])=>{
        const on = sel===d;
        return (<button key={d} onClick={()=>setSel(d)} style={{flex:'0 0 auto',width:70,padding:'12px 0',borderRadius:'var(--radius-lg)',border:'1px solid '+(on?'transparent':'var(--border-subtle)'),background:on?'var(--gradient-verdant)':'var(--surface-card)',color:on?'#fff':'var(--text-strong)',cursor:'pointer',boxShadow:on?'var(--shadow-accent)':'var(--shadow-xs)',display:'flex',flexDirection:'column',alignItems:'center',gap:5}}>
          <span style={{fontSize:12,fontWeight:700,letterSpacing:'.06em',textTransform:'uppercase',opacity:.8}}>{d}</span>
          <span style={{fontFamily:'var(--font-mono)',fontSize:14}}>{kcal}</span>
          <span style={{width:6,height:6,borderRadius:'50%',background:tag==='Logged'?'var(--color-success)':tag==='Today'?'var(--apricot-400)':'transparent'}} />
        </button>);
      })}
    </div>
    <div style={{padding:'0 20px 110px',display:'flex',flexDirection:'column',gap:14}}>
      <Card padding="md" hairline>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
          <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:19,color:'var(--text-strong)'}}>Week at a glance</span>
          <Badge tone="accent" icon="sparkles">Auto-adjusting</Badge>
        </div>
        <MacroBar items={[{key:'protein',value:126},{key:'carbs',value:198},{key:'fat',value:64},{key:'fibre',value:34}]} />
        <div style={{display:'flex',gap:10,marginTop:16}}>
          {[['Avg kcal','2 057'],['Adherence','86%'],['Cook time','22m']].map(([l,v])=>
            <div key={l} style={{flex:1,padding:'10px 12px',borderRadius:'var(--radius-md)',background:'var(--surface-sunken)'}}>
              <div style={{fontSize:11,textTransform:'uppercase',letterSpacing:'.08em',fontWeight:700,color:'var(--text-subtle)'}}>{l}</div>
              <div style={{fontFamily:'var(--font-mono)',fontSize:17,color:'var(--text-strong)',marginTop:3}}>{v}</div>
            </div>)}
        </div>
      </Card>
      <span style={{fontSize:11,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--text-subtle)'}}>{sel} · 3 meals + 1 snack</span>
      <MealCard slot="Breakfast" name="Greek yoghurt & berry bowl" kcal={410} macros="P 32g · C 41g · F 12g" onSwap={()=>{}} />
      <MealCard slot="Lunch" name="Harissa chickpea bowl" kcal={520} macros="P 28g · C 54g · F 18g" tags={['High fibre']} onSwap={()=>{}} />
      <MealCard slot="Dinner" name="Miso salmon, greens & rice" kcal={610} macros="P 44g · C 52g · F 22g" onSwap={()=>{}} />
      <Button variant="secondary" block icon="refresh-cw">Regenerate {sel}</Button>
    </div>
  </div>);
}
Object.assign(window,{PlanScreen});