// Screens 3-6: Onboarding (5 sub-steps), Report Generation, Blueprint Viewer, Dashboard

// ═══════════════ SCREEN 3: ONBOARDING — 5 steps stacked ═══════════════
function OnboardStepMobile({ step, children }) {
  return (
    <MobileFrame>
      <div style={{ padding: '14px 16px 0' }}>
        <Dots count={5} active={step - 1} style={{ justifyContent:'center' }} />
        <div style={{ fontFamily: WF.mono, fontSize: 9, color: WF.ink2, textAlign:'center', marginTop: 6 }}>
          STEP {step} OF 5
        </div>
      </div>
      <div style={{ padding: '18px 16px', height: 'calc(100% - 52px)', display:'flex', flexDirection:'column' }}>
        {children}
      </div>
    </MobileFrame>
  );
}

function OnboardStepDesktop({ step, title, subtitle, children, sidecar }) {
  return (
    <DesktopFrame h={680}>
      <div style={{ padding:'14px 32px', display:'flex', alignItems:'center', borderBottom:`1px solid ${WF.ink3}`}}>
        <div style={{fontWeight:700, fontSize:13, letterSpacing:1}}>PERSONA</div>
        <div style={{flex:1, display:'flex', justifyContent:'center'}}><Dots count={5} active={step-1} /></div>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>STEP {step}/5</div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', height:'calc(100% - 53px)'}}>
        <div style={{padding:'60px 64px', display:'flex', flexDirection:'column', justifyContent:'center'}}>
          <ScreenTag>03 · ONBOARDING STEP {step}</ScreenTag>
          <Heading w="80%" h={24} style={{marginBottom:8}} />
          <TextBlock lines={1} lastW="60%" style={{marginBottom:24}}/>
          {children}
        </div>
        <div style={{background:WF.panel, padding:40, display:'flex', flexDirection:'column', justifyContent:'center'}}>
          {sidecar}
        </div>
      </div>
    </DesktopFrame>
  );
}

// Step 1: Name + DOB
function OnbMobStep1() {
  return (
    <OnboardStepMobile step={1}>
      <Heading w="80%" h={16} style={{marginBottom:6}}/>
      <TextBlock lines={1} lastW="70%" style={{marginBottom:20}} />
      <Input label="Full name" placeholder="Jane Doe" style={{marginBottom:14}}/>
      <Input label="Birth date" placeholder="YYYY / MM / DD" style={{marginBottom:14}}/>
      <Note>real name, they tell us — for numerology</Note>
      <div style={{flex:1}}/>
      <Btn primary w="100%" size="lg">Continue</Btn>
    </OnboardStepMobile>
  );
}
function OnbDeskStep1() {
  return (
    <OnboardStepDesktop step={1}
      sidecar={<><Note style={{marginBottom:12, fontFamily:WF.mono, fontSize:10}}>WHY WE ASK</Note><TextBlock lines={5} lastW="50%"/></>}>
      <Input label="Full name" placeholder="Jane Doe" style={{marginBottom:16, maxWidth:360}}/>
      <Input label="Birth date" placeholder="YYYY / MM / DD" style={{marginBottom:20, maxWidth:360}}/>
      <Btn primary size="lg" style={{alignSelf:'flex-start'}}>Continue →</Btn>
    </OnboardStepDesktop>
  );
}

// Step 2: Birth time + tooltip
function OnbMobStep2() {
  return (
    <OnboardStepMobile step={2}>
      <Heading w="80%" h={16} style={{marginBottom:6}}/>
      <TextBlock lines={1} lastW="80%" style={{marginBottom:16}}/>
      <div style={{display:'flex', gap:8, marginBottom:6}}>
        <Input label="Hour" placeholder="14" w="48%"/>
        <Input label="Minute" placeholder="32" w="48%"/>
      </div>
      <div style={{marginTop:10, padding:12, ...roughBorder(1), background:WF.panel, position:'relative'}}>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:4}}>ⓘ WHY THIS MATTERS</div>
        <TextBlock lines={3} lastW="70%"/>
      </div>
      <Note style={{marginTop:8}}>"I don't know" link → skip + note loss of houses</Note>
      <div style={{flex:1}}/>
      <Btn primary w="100%" size="lg">Continue</Btn>
    </OnboardStepMobile>
  );
}
function OnbDeskStep2() {
  return (
    <OnboardStepDesktop step={2}
      sidecar={<><Note style={{marginBottom:10, fontFamily:WF.mono, fontSize:10}}>WHY THIS MATTERS</Note>
        <TextBlock lines={6} lastW="50%"/>
        <div style={{marginTop:14, fontFamily:WF.hand, fontSize:12, color:WF.ink2}}>"I don't know" option →</div></>}>
      <div style={{display:'flex', gap:10, maxWidth:360, marginBottom:16}}>
        <Input label="Hour" placeholder="14" w="50%"/>
        <Input label="Minute" placeholder="32" w="50%"/>
      </div>
      <div style={{display:'flex', gap:10, maxWidth:360, alignItems:'center', marginBottom:20}}>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, textDecoration:'underline'}}>I don't know my birth time</div>
      </div>
      <Btn primary size="lg" style={{alignSelf:'flex-start'}}>Continue →</Btn>
    </OnboardStepDesktop>
  );
}

// Step 3: Location + autocomplete
function OnbMobStep3() {
  return (
    <OnboardStepMobile step={3}>
      <Heading w="80%" h={16} style={{marginBottom:6}}/>
      <TextBlock lines={1} lastW="70%" style={{marginBottom:16}}/>
      <Input label="Birth location" placeholder="Type a city…" style={{marginBottom:0}}/>
      <div style={{marginTop:-4}}>
        {['Brooklyn, NY, USA','Brussels, BE','Buenos Aires, AR','Brasília, BR'].map((c,i)=>(
          <div key={i} style={{padding:'10px 12px', borderLeft:`1.2px solid ${WF.ink}`, borderRight:`1.2px solid ${WF.ink}`, borderBottom:`1.2px solid ${WF.ink}`, fontSize:12, background:i===0?WF.panel:WF.paper}}>{c}</div>
        ))}
      </div>
      <Note style={{marginTop:10}}>autocomplete dropdown w/ gazetteer</Note>
      <div style={{flex:1}}/>
      <Btn primary w="100%" size="lg">Continue</Btn>
    </OnboardStepMobile>
  );
}
function OnbDeskStep3() {
  return (
    <OnboardStepDesktop step={3}
      sidecar={<ImgBox w="100%" h={240} label="world map / location selector" />}>
      <Input label="Birth location" placeholder="Type a city…" style={{marginBottom:0, maxWidth:440}}/>
      <div style={{maxWidth:440}}>
        {['Brooklyn, New York, USA','Brussels, Belgium','Buenos Aires, Argentina','Brasília, Brazil'].map((c,i)=>(
          <div key={i} style={{padding:'10px 14px', borderLeft:`1.2px solid ${WF.ink}`, borderRight:`1.2px solid ${WF.ink}`, borderBottom:`1.2px solid ${WF.ink}`, fontSize:13, background:i===0?WF.panel:WF.paper}}>{c}</div>
        ))}
      </div>
      <Btn primary size="lg" style={{alignSelf:'flex-start', marginTop:24}}>Continue →</Btn>
    </OnboardStepDesktop>
  );
}

// Step 4: Quiz
function OnbMobStep4() {
  return (
    <OnboardStepMobile step={4}>
      <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2, marginBottom:6}}>QUESTION 3 OF 12</div>
      <Heading w="85%" h={15} style={{marginBottom:6}}/>
      <Heading w="50%" h={15} style={{marginBottom:14}}/>
      {['Strongly agree','Agree','Neutral','Disagree','Strongly disagree'].map((a,i)=>(
        <Box key={i} pad={12} style={{marginBottom:6, background: i===1?WF.panel:'transparent'}}>
          <div style={{fontSize:12}}>{a}</div>
        </Box>
      ))}
      <div style={{flex:1}}/>
      <div style={{display:'flex', gap:8}}>
        <Btn size="md" w="35%">← Back</Btn>
        <Btn primary size="md" w="65%">Next</Btn>
      </div>
    </OnboardStepMobile>
  );
}
function OnbDeskStep4() {
  return (
    <OnboardStepDesktop step={4}
      sidecar={<><div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:8}}>PROGRESS</div>
        <div style={{height:6, background:'#e5e1d4', marginBottom:10}}><div style={{height:'100%', width:'25%', background:WF.ink}}/></div>
        <TextBlock lines={3} lastW="60%"/></>}>
      <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:6}}>QUESTION 3 OF 12</div>
      <Heading w="90%" h={22} style={{marginBottom:6}}/>
      <Heading w="55%" h={22} style={{marginBottom:20}}/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, maxWidth:440}}>
        {['Strongly agree','Agree','Neutral','Disagree','Strongly disagree'].map((a,i)=>(
          <Box key={i} pad={14} style={{background:i===1?WF.panel:'transparent'}}>{a}</Box>
        ))}
      </div>
      <div style={{display:'flex', gap:10, marginTop:24}}><Btn>← Back</Btn><Btn primary>Next →</Btn></div>
    </OnboardStepDesktop>
  );
}

// Step 5: Email + tier + add-on
function OnbMobStep5() {
  return (
    <OnboardStepMobile step={5}>
      <Heading w="80%" h={16} style={{marginBottom:10}}/>
      <Input label="Email" placeholder="you@email.com" style={{marginBottom:14}}/>
      <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:6}}>CHOOSE YOUR TIER</div>
      {[{t:'Free',p:'$0'},{t:'Blueprint',p:'$79'},{t:'Inner Circle',p:'$199'}].map((t,i)=>(
        <Box key={i} pad={10} style={{marginBottom:6, background:i===1?WF.panel:'transparent', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div><div style={{fontSize:12, fontWeight:500}}>{t.t}</div><div style={{fontSize:10, color:WF.ink2}}>1 sentence</div></div>
          <div style={{fontSize:15, fontWeight:600}}>{t.p}</div>
        </Box>
      ))}
      <Box pad={10} style={{marginTop:8, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div><div style={{fontSize:11}}>+ Relationship report</div><div style={{fontSize:9, color:WF.ink2}}>compare w/ partner</div></div>
        <div style={{fontSize:12}}>+$29 ☐</div>
      </Box>
      <div style={{flex:1}}/>
      <Btn primary w="100%" size="lg">Continue to checkout</Btn>
    </OnboardStepMobile>
  );
}
function OnbDeskStep5() {
  return (
    <OnboardStepDesktop step={5}
      sidecar={<><Note style={{marginBottom:10, fontFamily:WF.mono, fontSize:10}}>WHAT'S INCLUDED</Note><TextBlock lines={6} lastW="60%"/></>}>
      <Input label="Email" placeholder="you@email.com" style={{marginBottom:20, maxWidth:440}}/>
      <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:8}}>CHOOSE YOUR TIER</div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, maxWidth:560, marginBottom:14}}>
        {[{t:'Free',p:'$0'},{t:'Blueprint',p:'$79'},{t:'Inner',p:'$199'}].map((t,i)=>(
          <Box key={i} pad={12} style={{background:i===1?WF.panel:'transparent'}}>
            <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>{t.t.toUpperCase()}</div>
            <div style={{fontSize:18, fontWeight:600, margin:'2px 0 4px'}}>{t.p}</div>
            <TextLine w="70%"/>
          </Box>
        ))}
      </div>
      <Box pad={12} style={{maxWidth:560, marginBottom:20, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div><div style={{fontSize:12}}>+ Relationship Report add-on</div><div style={{fontSize:10, color:WF.ink2}}>compare with partner</div></div>
        <div style={{fontSize:13}}>+$29 ☐</div>
      </Box>
      <Btn primary size="lg" style={{alignSelf:'flex-start'}}>Continue to checkout →</Btn>
    </OnboardStepDesktop>
  );
}

// ═══════════════ SCREEN 4: REPORT GENERATION ═══════════════
function ReportGenDesktop() {
  const systems = [
    {n:'Astrology', s:'done'},
    {n:'Human Design', s:'done'},
    {n:'MBTI', s:'done'},
    {n:'Enneagram', s:'active'},
    {n:'Big Five', s:'pending'},
    {n:'Numerology', s:'pending'},
    {n:'Astrocartography', s:'pending'},
    {n:'I Ching', s:'pending'},
    {n:'Gene Keys', s:'pending'},
    {n:'Chinese', s:'pending'},
  ];
  return (
    <DesktopFrame>
      <div style={{ height:'100%', display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', padding:40, background:WF.paper }}>
        <ScreenTag>04 · REPORT GENERATION</ScreenTag>
        <ImgBox w={120} h={120} label="calm loop / orbital" style={{marginBottom:20, borderRadius:'50%'}}/>
        <Heading w={380} h={22} style={{marginBottom:10}}/>
        <TextBlock lines={1} lastW="60%" style={{width:380, marginBottom:8}}/>
        <div style={{fontFamily:WF.mono, fontSize:11, color:WF.ink2, marginBottom:18}}>~2 min remaining</div>
        <div style={{width:380, height:5, background:'#e5e1d4', marginBottom:28}}>
          <div style={{height:'100%', width:'36%', background:WF.ink}}/>
        </div>
        <div style={{width:420, display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
          {systems.map((s,i)=>(
            <div key={i} style={{display:'flex', alignItems:'center', gap:8, fontSize:12, padding:'4px 0', opacity: s.s==='pending'?0.4:1}}>
              <IconPh size={14} kind={s.s==='done'?'check':s.s==='active'?'dot':'x'} />
              <div>{s.n}</div>
              {s.s==='active' && <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2, marginLeft:'auto'}}>calculating…</div>}
            </div>
          ))}
        </div>
      </div>
      <DCPostIt top={40} right={-30} rotate={2} width={160}>Sequential checkmarks, calming. Tempting to distract w/ animation.</DCPostIt>
    </DesktopFrame>
  );
}

function ReportGenMobile() {
  return (
    <MobileFrame>
      <div style={{height:'100%', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:20}}>
        <ScreenTag>04 · GENERATING</ScreenTag>
        <ImgBox w={80} h={80} label="loop" style={{borderRadius:'50%', marginBottom:14}}/>
        <Heading w={200} h={14} style={{marginBottom:10}}/>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:14}}>~2 min</div>
        <div style={{width:200, height:4, background:'#e5e1d4', marginBottom:18}}><div style={{height:'100%', width:'36%', background:WF.ink}}/></div>
        <div style={{width:220}}>
          {[{n:'Astrology',s:'done'},{n:'Human Design',s:'done'},{n:'MBTI',s:'done'},{n:'Enneagram',s:'active'},{n:'Big Five',s:'pending'},{n:'Numerology',s:'pending'},{n:'+ 4 more',s:'pending'}].map((s,i)=>(
            <div key={i} style={{display:'flex', alignItems:'center', gap:8, fontSize:11, padding:'3px 0', opacity:s.s==='pending'?0.4:1}}>
              <IconPh size={12} kind={s.s==='done'?'check':s.s==='active'?'dot':'x'}/><div>{s.n}</div>
            </div>
          ))}
        </div>
      </div>
    </MobileFrame>
  );
}

// ═══════════════ SCREEN 5: BLUEPRINT VIEWER ═══════════════
function BlueprintDesktop() {
  const systems = ['Archetype','Astrology','Human Design','MBTI','Enneagram','Big Five','Numerology','Astrocarto','I Ching','Gene Keys','Chinese'];
  return (
    <DesktopFrame>
      <div style={{padding:'10px 32px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:`1px solid ${WF.ink3}`}}>
        <div style={{fontWeight:700, fontSize:13, letterSpacing:1}}>PERSONA · BLUEPRINT</div>
        <div style={{display:'flex', gap:8}}>
          <Btn size="sm">▶ Audio</Btn>
          <Btn size="sm">PDF</Btn>
          <Btn size="sm">Share</Btn>
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'180px 1fr', height:'calc(100% - 45px)'}}>
        {/* Sticky nav */}
        <div style={{borderRight:`1px solid ${WF.ink3}`, padding:'16px 12px', background:WF.panel, overflowY:'auto'}}>
          <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2, marginBottom:8}}>SYSTEMS</div>
          {systems.map((s,i)=>(
            <div key={i} style={{padding:'5px 8px', fontSize:11, background:i===2?WF.paper:'transparent', ...(i===2?roughBorder(1):{}), marginBottom:3}}>{s}</div>
          ))}
        </div>
        {/* Content */}
        <div style={{overflowY:'auto', padding:'24px 40px'}}>
          <ScreenTag>05 · BLUEPRINT VIEWER</ScreenTag>
          <Heading w="55%" h={28} style={{marginBottom:4}}/>
          <div style={{fontFamily:WF.hand, fontSize:14, color:WF.ink2, marginBottom:14}}>your archetype title</div>
          <div style={{display:'flex', gap:8, marginBottom:24}}>
            {['INTJ','5w4','T9','Scorpio ☉'].map((p,i)=>(
              <div key={i} style={{padding:'5px 10px', fontFamily:WF.mono, fontSize:10, ...roughBorder(1), background: WF.panel}}>{p}</div>
            ))}
          </div>
          {/* System section */}
          <div style={{marginBottom:24}}>
            <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:4}}>02 · HUMAN DESIGN</div>
            <Heading w="40%" h={18} style={{marginBottom:12}}/>
            <div style={{display:'grid', gridTemplateColumns:'220px 1fr', gap:22, alignItems:'start'}}>
              <ImgBox w={220} h={220} label="body graph chart" />
              <TextBlock lines={8} lastW="70%"/>
            </div>
          </div>
          {/* Locked section */}
          <div style={{marginBottom:24, position:'relative'}}>
            <div style={{filter:'blur(2px)', opacity:0.5}}>
              <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:4}}>03 · MBTI</div>
              <Heading w="30%" h={18} style={{marginBottom:12}}/>
              <TextBlock lines={4}/>
            </div>
            <Box pad={16} fill={WF.paper} style={{position:'absolute', top:'30%', left:'50%', transform:'translateX(-50%)', textAlign:'center'}}>
              <div style={{fontSize:13, marginBottom:6}}>🔒 Unlock to see more</div>
              <Btn primary size="sm">Upgrade — $79</Btn>
            </Box>
          </div>
        </div>
      </div>
      <DCPostIt bottom={20} right={-20} rotate={-3} width={160}>Sticky left nav jumps to system. Upgrade gate appears partway down.</DCPostIt>
    </DesktopFrame>
  );
}

function BlueprintMobile() {
  return (
    <MobileFrame>
      <div style={{padding:'10px 14px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:`1px solid ${WF.ink3}`}}>
        <div style={{fontWeight:700, fontSize:11}}>BLUEPRINT</div>
        <div style={{display:'flex', gap:4}}><IconPh size={20} kind="dot"/><IconPh size={20} kind="dot"/></div>
      </div>
      <div style={{height:'calc(100% - 42px)', overflowY:'auto', padding:'14px 16px'}}>
        <ScreenTag>05 · BLUEPRINT</ScreenTag>
        <Heading w="85%" h={18} style={{marginBottom:4}}/>
        <div style={{fontFamily:WF.hand, fontSize:12, color:WF.ink2, marginBottom:10}}>archetype title</div>
        <div style={{display:'flex', gap:4, flexWrap:'wrap', marginBottom:14}}>
          {['INTJ','5w4','T9','Scorpio'].map((p,i)=>(<div key={i} style={{padding:'3px 7px', fontFamily:WF.mono, fontSize:9, ...roughBorder(1)}}>{p}</div>))}
        </div>
        <Box pad={8} style={{display:'flex', alignItems:'center', gap:8, marginBottom:14}}>
          <div style={{width:26,height:26,...roughBorder(1), display:'flex', alignItems:'center', justifyContent:'center'}}>▶</div>
          <div style={{flex:1, height:3, background:'#e5e1d4'}}><div style={{height:'100%', width:'30%', background:WF.ink}}/></div>
          <div style={{fontFamily:WF.mono, fontSize:9}}>4:22</div>
        </Box>
        <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2, marginBottom:4}}>02 · HUMAN DESIGN</div>
        <Heading w="50%" h={14} style={{marginBottom:10}}/>
        <ImgBox w="100%" h={180} label="body graph" style={{marginBottom:12}}/>
        <TextBlock lines={6} lastW="60%"/>
      </div>
    </MobileFrame>
  );
}

// ═══════════════ SCREEN 6: DASHBOARD ═══════════════
function DashboardDesktop() {
  return (
    <DesktopFrame>
      <DeskNav/>
      <div style={{height:'calc(100% - 57px)', overflowY:'auto', padding:'28px 60px'}}>
        <ScreenTag>06 · DASHBOARD</ScreenTag>
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:20}}>
          <div><div style={{fontFamily:WF.hand, fontSize:16, color:WF.ink2}}>good morning, Jane</div><Heading w={360} h={22} style={{marginTop:6}}/></div>
          <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>TUE · APR 21 · 2026</div>
        </div>

        {/* Today's alignment widget */}
        <Box pad={24} style={{marginBottom:18, display:'grid', gridTemplateColumns:'160px 1fr', gap:24, background: WF.panel}}>
          <div style={{position:'relative', aspectRatio:'1/1'}}>
            <svg viewBox="0 0 100 100" style={{width:'100%', height:'100%'}}>
              <circle cx="50" cy="50" r="42" fill="none" stroke={WF.ink3} strokeWidth="6"/>
              <circle cx="50" cy="50" r="42" fill="none" stroke={WF.ink} strokeWidth="6" strokeDasharray="180 300" transform="rotate(-90 50 50)"/>
            </svg>
            <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
              <div style={{fontSize:24, fontWeight:600}}>72</div>
              <div style={{fontFamily:WF.mono, fontSize:8, color:WF.ink2}}>ALIGNMENT</div>
            </div>
          </div>
          <div>
            <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:6}}>TODAY'S ALIGNMENT · SUBSCRIBER</div>
            <Heading w="60%" h={18} style={{marginBottom:10}}/>
            <TextBlock lines={3} lastW="70%"/>
          </div>
        </Box>

        {/* Quick access cards */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginBottom:18}}>
          {[{t:'Blueprint',h:'→ re-read'},{t:'Chat',h:'→ ask your chart'},{t:'Relationships',h:'→ compare'}].map((c,i)=>(
            <Box key={i} pad={18}>
              <IconPh size={24} kind="star" style={{marginBottom:10}}/>
              <div style={{fontSize:14, fontWeight:500}}>{c.t}</div>
              <div style={{fontFamily:WF.hand, fontSize:12, color:WF.ink2, marginTop:2}}>{c.h}</div>
            </Box>
          ))}
        </div>

        {/* Transits + personal year */}
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:14, marginBottom:18}}>
          <Box pad={16}>
            <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:10}}>UPCOMING TRANSITS</div>
            {['Mars → 10H · Apr 24','Venus trine natal Sun · Apr 28','Full Moon in Scorpio · May 02'].map((t,i)=>(
              <div key={i} style={{padding:'8px 0', borderBottom: i<2?`1px dashed ${WF.ink3}`:'none', display:'flex', justifyContent:'space-between', fontSize:12}}>
                <span>{t}</span><span style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>→</span>
              </div>
            ))}
          </Box>
          <Box pad={16}>
            <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:8}}>PERSONAL YEAR 7</div>
            <Heading w="50%" h={14} style={{marginBottom:10}}/>
            <div style={{height:6, background:'#e5e1d4', marginBottom:6}}><div style={{height:'100%', width:'31%', background:WF.accent}}/></div>
            <div style={{display:'flex', justifyContent:'space-between', fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>
              <span>JAN</span><span>●</span><span>DEC</span>
            </div>
          </Box>
        </div>

        {/* Upsell banner */}
        <Box pad={14} fill={WF.ink} style={{color:WF.paper, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div><div style={{fontFamily:WF.mono, fontSize:10, opacity:0.7}}>INNER CIRCLE</div><div style={{fontSize:14}}>Add the relationship report — $29</div></div>
          <Btn style={{borderColor:WF.paper, color:WF.paper}} size="sm">Add</Btn>
        </Box>
      </div>
    </DesktopFrame>
  );
}

function DashboardMobile() {
  return (
    <MobileFrame>
      <MobNav/>
      <div style={{height:'calc(100% - 56px)', overflowY:'auto', padding:'12px 16px'}}>
        <ScreenTag>06 · DASHBOARD</ScreenTag>
        <div style={{fontFamily:WF.hand, fontSize:13, color:WF.ink2}}>good morning, Jane</div>
        <Heading w="80%" h={16} style={{margin:'4px 0 12px'}}/>

        <Box pad={14} style={{marginBottom:12, background:WF.panel, display:'flex', gap:12, alignItems:'center'}}>
          <div style={{width:60, height:60, position:'relative'}}>
            <svg viewBox="0 0 100 100" style={{width:'100%', height:'100%'}}>
              <circle cx="50" cy="50" r="40" fill="none" stroke={WF.ink3} strokeWidth="8"/>
              <circle cx="50" cy="50" r="40" fill="none" stroke={WF.ink} strokeWidth="8" strokeDasharray="180 300" transform="rotate(-90 50 50)"/>
            </svg>
            <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', fontSize:16, fontWeight:600}}>72</div>
          </div>
          <div style={{flex:1}}>
            <div style={{fontFamily:WF.mono, fontSize:8, color:WF.ink2}}>ALIGNMENT TODAY</div>
            <TextBlock lines={2} lastW="70%" style={{marginTop:4}}/>
          </div>
        </Box>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8, marginBottom:12}}>
          {['Blueprint','Chat','Pairs'].map((t,i)=>(
            <Box key={i} pad={10} style={{textAlign:'center'}}>
              <IconPh size={18} kind="star" style={{margin:'0 auto 6px'}}/>
              <div style={{fontSize:10}}>{t}</div>
            </Box>
          ))}
        </div>

        <Box pad={12} style={{marginBottom:10}}>
          <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2, marginBottom:6}}>TRANSITS</div>
          {['Mars → 10H','Venus trine Sun','Full Moon'].map((t,i)=>(
            <div key={i} style={{fontSize:11, padding:'4px 0', borderBottom: i<2?`1px dashed ${WF.ink3}`:'none'}}>{t}</div>
          ))}
        </Box>

        <Box pad={12} fill={WF.ink} style={{color:WF.paper, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div style={{fontSize:11}}>+ Relationship · $29</div>
          <div style={{fontFamily:WF.mono, fontSize:10}}>ADD →</div>
        </Box>
      </div>
    </MobileFrame>
  );
}

Object.assign(window, {
  OnbMobStep1, OnbDeskStep1, OnbMobStep2, OnbDeskStep2,
  OnbMobStep3, OnbDeskStep3, OnbMobStep4, OnbDeskStep4,
  OnbMobStep5, OnbDeskStep5,
  ReportGenDesktop, ReportGenMobile,
  BlueprintDesktop, BlueprintMobile,
  DashboardDesktop, DashboardMobile,
});