// Screens 7-10 + Component library + Token sheet

// ═══════════════ SCREEN 7: CHAT INTERFACE ═══════════════
function ChatDesktop() {
  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 · CHAT</div>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>CLEAR · EXPORT</div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', height:'calc(100% - 45px)'}}>
        {/* Thread */}
        <div style={{display:'flex', flexDirection:'column', borderRight:`1px solid ${WF.ink3}`}}>
          <div style={{flex:1, overflowY:'auto', padding:'18px 28px'}}>
            <ScreenTag>07 · CHAT</ScreenTag>
            {/* User msg */}
            <div style={{display:'flex', justifyContent:'flex-end', marginBottom:12}}>
              <Box pad={12} fill={WF.panel} style={{maxWidth:'75%'}}><TextBlock lines={2} lastW="70%"/></Box>
            </div>
            {/* Assistant msg streaming */}
            <div style={{marginBottom:14}}>
              <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2, marginBottom:4}}>PERSONA</div>
              <TextBlock lines={5} lastW="30%"/>
              <div style={{display:'inline-block', width:8, height:14, background:WF.ink, marginLeft:2, verticalAlign:'bottom'}}/>
            </div>
          </div>
          {/* Prompt chips + input */}
          <div style={{padding:'12px 28px', borderTop:`1px solid ${WF.ink3}`}}>
            <div style={{display:'flex', gap:6, marginBottom:10, flexWrap:'wrap'}}>
              {['Why am I burned out?','What\'s my purpose?','Best career path?','Compatible w/ partner?'].map((p,i)=>(
                <div key={i} style={{padding:'4px 10px', fontSize:10, ...roughBorder(1), fontFamily:WF.sans}}>{p}</div>
              ))}
            </div>
            <Box pad={10} style={{display:'flex', alignItems:'center', gap:8}}>
              <div style={{flex:1, fontFamily:WF.sans, fontSize:12, color:WF.ink3}}>Ask about your chart…</div>
              <Btn primary size="sm">Send</Btn>
            </Box>
          </div>
        </div>
        {/* Context sidebar */}
        <div style={{padding:'18px 20px', background:WF.panel, overflowY:'auto'}}>
          <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:10}}>ACTIVE IN THIS ANSWER</div>
          <TextBlock lines={1} lastW="70%" style={{marginBottom:14}}/>
          <ImgBox w="100%" h={140} label="chart w/ highlights" style={{marginBottom:12}}/>
          <div style={{display:'flex', flexDirection:'column', gap:6}}>
            {[{n:'10th house', on:true},{n:'Saturn return', on:true},{n:'MBTI · Ni', on:true},{n:'Enneagram 9', on:false},{n:'Big Five · Conscientiousness', on:false}].map((c,i)=>(
              <div key={i} style={{padding:'6px 10px', fontSize:11, display:'flex', alignItems:'center', gap:8, ...roughBorder(1), background: c.on?WF.paper:'transparent', opacity: c.on?1:0.5}}>
                <div style={{width:6, height:6, background:c.on?WF.ink:WF.ink3, borderRadius:3}}/>
                {c.n}
              </div>
            ))}
          </div>
        </div>
      </div>
      <DCPostIt top={40} right={-10} rotate={2} width={160}>Right panel shows WHICH chart elements informed the answer. Builds trust.</DCPostIt>
    </DesktopFrame>
  );
}

function ChatMobile() {
  return (
    <MobileFrame>
      <div style={{padding:'10px 14px', borderBottom:`1px solid ${WF.ink3}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div style={{fontWeight:700, fontSize:11}}>CHAT</div>
        <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>CONTEXT ▾</div>
      </div>
      <div style={{flex:1, overflowY:'auto', padding:'12px 14px', height:'calc(100% - 136px)'}}>
        <ScreenTag>07 · CHAT</ScreenTag>
        <div style={{display:'flex', justifyContent:'flex-end', marginBottom:10}}>
          <Box pad={8} fill={WF.panel} style={{maxWidth:'80%'}}><TextBlock lines={2} lastW="60%"/></Box>
        </div>
        <div style={{marginBottom:10}}>
          <div style={{fontFamily:WF.mono, fontSize:8, color:WF.ink2, marginBottom:2}}>PERSONA</div>
          <TextBlock lines={4} lastW="30%"/>
          <div style={{display:'inline-block', width:6, height:12, background:WF.ink}}/>
        </div>
      </div>
      <div style={{padding:'10px 14px', borderTop:`1px solid ${WF.ink3}`}}>
        <div style={{display:'flex', gap:5, marginBottom:8, overflowX:'auto'}}>
          {['Burnout?','Purpose?','Career?'].map((p,i)=>(<div key={i} style={{padding:'3px 8px', fontSize:9, ...roughBorder(1), whiteSpace:'nowrap'}}>{p}</div>))}
        </div>
        <Box pad={8} style={{display:'flex', gap:6, alignItems:'center'}}>
          <div style={{flex:1, fontSize:11, color:WF.ink3}}>Ask…</div>
          <Btn primary size="sm">↑</Btn>
        </Box>
      </div>
    </MobileFrame>
  );
}

// ═══════════════ SCREEN 8: ASTROCARTOGRAPHY MAP ═══════════════
function MapDesktop() {
  return (
    <DesktopFrame>
      <DeskNav/>
      <div style={{height:'calc(100% - 57px)', padding:'18px 40px 0', overflowY:'auto'}}>
        <ScreenTag>08 · ASTROCARTOGRAPHY</ScreenTag>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
          <Heading w={260} h={20}/>
          <div style={{display:'flex', gap:6}}>
            {['All','Career','Love','Spiritual','Challenges'].map((f,i)=>(
              <div key={i} style={{padding:'5px 12px', fontSize:11, fontFamily:WF.sans, ...roughBorder(1),
                background: i===1?WF.ink:'transparent', color: i===1?WF.paper:WF.ink}}>{f}</div>
            ))}
          </div>
        </div>

        {/* Map */}
        <Box pad={0} style={{position:'relative', aspectRatio:'2.2/1', background: WF.panel, overflow:'hidden'}}>
          <svg viewBox="0 0 600 260" preserveAspectRatio="none" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
            {/* rough continents */}
            <g fill="none" stroke={WF.ink2} strokeWidth="1">
              <path d="M40,90 Q80,60 130,70 T220,100 Q200,140 160,160 T90,170 Q50,150 40,90Z"/>
              <path d="M260,70 Q310,50 380,65 T500,100 Q520,150 480,180 T370,195 Q300,180 270,150 T260,70Z"/>
              <path d="M150,190 Q180,200 200,230 T150,240 Q120,230 150,190Z"/>
              <path d="M410,200 Q460,210 490,240 T430,245 Q400,230 410,200Z"/>
            </g>
            {/* planetary lines */}
            <g strokeWidth="1.5" fill="none">
              <path d="M100,0 L120,260" stroke={WF.accent}/>
              <path d="M240,0 L230,260" stroke={WF.rose}/>
              <path d="M380,0 L400,260" stroke={WF.indigo}/>
              <path d="M0,120 Q300,90 600,140" stroke={WF.accent} strokeDasharray="3,3"/>
            </g>
            {/* city pins */}
            {[{x:'20%',y:'38%',n:'NYC'},{x:'38%',y:'32%',n:'Paris'},{x:'66%',y:'46%',n:'Tokyo'},{x:'32%',y:'75%',n:'Rio'}].map((c,i)=>(
              <g key={i}>
                <circle cx={c.x} cy={c.y} r="3" fill={WF.ink}/>
              </g>
            ))}
          </svg>
          <div style={{position:'absolute', top:10, left:10, fontFamily:WF.mono, fontSize:9, color:WF.ink2, padding:'3px 6px', background:WF.paper, ...roughBorder(1)}}>
            LEGEND: ——— Sun · — — — Venus · ··· Jupiter
          </div>
          <Note style={{position:'absolute', bottom:10, right:10, padding:'4px 8px', background:WF.paper, ...roughBorder(1)}}>click city → panel below</Note>
        </Box>

        {/* Interpretation panel */}
        <Box pad={16} style={{marginTop:14}}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
            <div>
              <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>PARIS, FR · CAREER LINE</div>
              <Heading w={200} h={16} style={{marginTop:4}}/>
            </div>
            <div style={{display:'flex', gap:6}}>
              <div style={{padding:'3px 8px', fontSize:10, ...roughBorder(1)}}>Sun</div>
              <div style={{padding:'3px 8px', fontSize:10, ...roughBorder(1)}}>MC</div>
            </div>
          </div>
          <TextBlock lines={3} lastW="60%"/>
        </Box>
      </div>
    </DesktopFrame>
  );
}

function MapMobile() {
  return (
    <MobileFrame>
      <MobNav/>
      <div style={{height:'calc(100% - 56px)', overflowY:'auto', padding:'12px 14px'}}>
        <ScreenTag>08 · MAP</ScreenTag>
        <div style={{display:'flex', gap:4, marginBottom:8, overflowX:'auto'}}>
          {['All','Career','Love','Spirit.','Chall.'].map((f,i)=>(
            <div key={i} style={{padding:'3px 8px', fontSize:9, ...roughBorder(1), whiteSpace:'nowrap', background:i===1?WF.ink:'transparent', color:i===1?WF.paper:WF.ink}}>{f}</div>
          ))}
        </div>
        <Box pad={0} style={{aspectRatio:'1.4/1', background:WF.panel, position:'relative', overflow:'hidden'}}>
          <svg viewBox="0 0 600 260" preserveAspectRatio="none" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
            <g fill="none" stroke={WF.ink2} strokeWidth="1">
              <path d="M40,90 Q80,60 130,70 T220,100 Q200,140 160,160 T90,170 Q50,150 40,90Z"/>
              <path d="M260,70 Q310,50 380,65 T500,100 Q520,150 480,180 T370,195 Q300,180 270,150 T260,70Z"/>
            </g>
            <g strokeWidth="1.5" fill="none">
              <path d="M100,0 L120,260" stroke={WF.accent}/>
              <path d="M240,0 L230,260" stroke={WF.rose}/>
              <path d="M380,0 L400,260" stroke={WF.indigo}/>
            </g>
          </svg>
        </Box>
        <Box pad={10} style={{marginTop:10}}>
          <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>PARIS · CAREER</div>
          <Heading w="70%" h={13} style={{margin:'4px 0'}}/>
          <TextBlock lines={3} lastW="70%"/>
        </Box>
      </div>
    </MobileFrame>
  );
}

// ═══════════════ SCREEN 9: CHECKOUT ═══════════════
function CheckoutDesktop() {
  return (
    <DesktopFrame>
      <div style={{padding:'14px 40px', borderBottom:`1px solid ${WF.ink3}`, display:'flex', justifyContent:'space-between'}}>
        <div style={{fontWeight:700, fontSize:13, letterSpacing:1}}>PERSONA · CHECKOUT</div>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>SECURE · 🔒</div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', height:'calc(100% - 49px)'}}>
        {/* Order summary */}
        <div style={{padding:'28px 40px', background:WF.panel, overflowY:'auto'}}>
          <ScreenTag>09 · CHECKOUT</ScreenTag>
          <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:6}}>ORDER SUMMARY</div>
          <Heading w="50%" h={18} style={{marginBottom:16}}/>

          <div style={{padding:'14px 0', borderTop:`1px solid ${WF.ink3}`, borderBottom:`1px dashed ${WF.ink3}`, display:'flex', justifyContent:'space-between'}}>
            <div><div style={{fontSize:13, fontWeight:500}}>Blueprint</div><div style={{fontSize:11, color:WF.ink2}}>complete report · 10 systems</div></div>
            <div style={{fontSize:14}}>$79</div>
          </div>

          <div style={{padding:'14px 0', borderBottom:`1px dashed ${WF.ink3}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div><div style={{fontSize:13}}>+ Relationship Report</div><div style={{fontSize:11, color:WF.ink2}}>compare w/ partner</div></div>
            <div style={{display:'flex', alignItems:'center', gap:8}}><div style={{fontSize:13}}>$29</div><IconPh size={18} kind="check"/></div>
          </div>

          <div style={{padding:'14px 0', borderBottom:`1px dashed ${WF.ink3}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div><div style={{fontSize:13}}>Monthly subscription</div><div style={{fontSize:11, color:WF.ink2}}>dashboard + chat · $12/mo</div></div>
            <div style={{fontSize:11, fontFamily:WF.mono}}>☐ OFF</div>
          </div>

          <div style={{padding:'18px 0', display:'flex', justifyContent:'space-between', fontSize:16, fontWeight:600}}>
            <div>Total</div><div>$108</div>
          </div>

          <Note>promo code link →</Note>
        </div>

        {/* Payment */}
        <div style={{padding:'28px 40px', overflowY:'auto'}}>
          <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:6}}>PAYMENT</div>
          <Heading w="40%" h={18} style={{marginBottom:18}}/>

          <div style={{display:'flex', gap:8, marginBottom:14}}>
            <Btn primary w="50%" size="md">💳 Card</Btn>
            <Btn w="25%" size="md">Apple</Btn>
            <Btn w="25%" size="md">Link</Btn>
          </div>

          <Input label="Card number" placeholder="1234 1234 1234 1234" style={{marginBottom:10}}/>
          <div style={{display:'flex', gap:10, marginBottom:10}}>
            <Input label="Expiry" placeholder="MM / YY" w="50%"/>
            <Input label="CVC" placeholder="•••" w="50%"/>
          </div>
          <Input label="Country" placeholder="United States" style={{marginBottom:10}}/>
          <Input label="ZIP" placeholder="10001" style={{marginBottom:20}}/>

          <Btn primary w="100%" size="lg">Pay $108 →</Btn>
          <Note style={{marginTop:10, textAlign:'center'}}>Stripe-embedded form · PCI handled</Note>
        </div>
      </div>
    </DesktopFrame>
  );
}

function CheckoutMobile() {
  return (
    <MobileFrame>
      <div style={{padding:'10px 14px', borderBottom:`1px solid ${WF.ink3}`, display:'flex', justifyContent:'space-between'}}>
        <div style={{fontWeight:700, fontSize:11}}>CHECKOUT</div>
        <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>🔒 SECURE</div>
      </div>
      <div style={{height:'calc(100% - 42px)', overflowY:'auto', padding:'14px 16px'}}>
        <ScreenTag>09 · CHECKOUT</ScreenTag>
        <Box pad={12} fill={WF.panel} style={{marginBottom:14}}>
          <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>ORDER</div>
          <div style={{display:'flex', justifyContent:'space-between', padding:'6px 0', fontSize:11}}><span>Blueprint</span><span>$79</span></div>
          <div style={{display:'flex', justifyContent:'space-between', padding:'6px 0', fontSize:11}}><span>+ Relationship</span><span>$29</span></div>
          <div style={{display:'flex', justifyContent:'space-between', padding:'6px 0', fontSize:11, color:WF.ink2}}><span>Subscription (off)</span><span>—</span></div>
          <div style={{display:'flex', justifyContent:'space-between', padding:'8px 0 0', fontSize:14, fontWeight:600, borderTop:`1px solid ${WF.ink3}`}}><span>Total</span><span>$108</span></div>
        </Box>

        <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2, marginBottom:6}}>PAYMENT</div>
        <div style={{display:'flex', gap:6, marginBottom:10}}>
          <Btn primary size="sm" w="40%">Card</Btn>
          <Btn size="sm" w="30%">Apple</Btn>
          <Btn size="sm" w="30%">Link</Btn>
        </div>
        <Input label="Card #" placeholder="1234 1234 1234 1234" style={{marginBottom:8}}/>
        <div style={{display:'flex', gap:6, marginBottom:8}}>
          <Input label="MM/YY" placeholder="01/28" w="50%"/>
          <Input label="CVC" placeholder="•••" w="50%"/>
        </div>
        <Input label="ZIP" placeholder="10001" style={{marginBottom:14}}/>
        <Btn primary w="100%" size="lg">Pay $108 →</Btn>
      </div>
    </MobileFrame>
  );
}

// ═══════════════ SCREEN 10: POST-PURCHASE CONFIRMATION ═══════════════
function ConfirmDesktop() {
  return (
    <DesktopFrame>
      <DeskNav/>
      <div style={{height:'calc(100% - 57px)', display:'flex', flexDirection:'column', alignItems:'center', padding:'40px 40px 20px', overflowY:'auto'}}>
        <ScreenTag>10 · POST-PURCHASE</ScreenTag>
        <IconPh size={48} kind="check" style={{marginBottom:18}}/>
        <Heading w={420} h={26} style={{marginBottom:10}}/>
        <TextBlock lines={2} lastW="60%" style={{width:440, textAlign:'center', marginBottom:24}}/>

        <Box pad={24} style={{width:520, marginBottom:14, background:WF.panel, textAlign:'center'}}>
          <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:6}}>YOUR BLUEPRINT</div>
          <Heading w="70%" h={18} style={{margin:'0 auto 12px'}}/>
          <div style={{height:4, background:'#e5e1d4', marginBottom:10}}><div style={{height:'100%', width:'42%', background:WF.ink}}/></div>
          <div style={{fontSize:11, color:WF.ink2}}>writing your report · est. 2 min</div>
          <Btn primary style={{marginTop:14}}>View progress →</Btn>
        </Box>

        <div style={{width:520, padding:14, ...roughBorder(1), display:'flex', gap:10, alignItems:'center', marginBottom:14}}>
          <IconPh size={22} kind="dot"/>
          <div style={{flex:1, fontSize:12}}>We sent a confirmation to <u>jane@email.com</u></div>
        </div>

        {/* Upsell */}
        <Box pad={16} fill={WF.ink} style={{width:520, color:WF.paper, display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <div>
            <div style={{fontFamily:WF.mono, fontSize:10, opacity:0.7}}>UNLOCK EVERYTHING</div>
            <div style={{fontSize:14}}>Go Inner Circle — $120 more</div>
          </div>
          <Btn style={{borderColor:WF.paper, color:WF.paper}} size="sm">Upgrade</Btn>
        </Box>

        {/* Share */}
        <div style={{width:520, textAlign:'center'}}>
          <div style={{fontFamily:WF.hand, fontSize:13, color:WF.ink2, marginBottom:8}}>tell a friend →</div>
          <div style={{display:'flex', gap:8, justifyContent:'center'}}>
            {['IG','X','Messages','Link'].map((p,i)=>(<Btn key={i} size="sm" w={90}>{p}</Btn>))}
          </div>
        </div>
      </div>
    </DesktopFrame>
  );
}

function ConfirmMobile() {
  return (
    <MobileFrame>
      <div style={{height:'100%', overflowY:'auto', padding:'22px 16px', display:'flex', flexDirection:'column', alignItems:'center'}}>
        <ScreenTag>10 · CONFIRMED</ScreenTag>
        <IconPh size={40} kind="check" style={{marginBottom:12}}/>
        <Heading w="85%" h={16} style={{marginBottom:6}}/>
        <Heading w="65%" h={16} style={{marginBottom:12}}/>
        <TextBlock lines={2} lastW="70%" style={{width:'100%', textAlign:'center', marginBottom:16}}/>
        <Box pad={14} style={{width:'100%', background:WF.panel, marginBottom:10, textAlign:'center'}}>
          <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>WRITING YOUR REPORT</div>
          <div style={{height:3, background:'#e5e1d4', margin:'8px 0'}}><div style={{height:'100%', width:'42%', background:WF.ink}}/></div>
          <div style={{fontSize:10}}>~2 min</div>
          <Btn primary size="sm" style={{marginTop:8}}>See progress</Btn>
        </Box>
        <div style={{width:'100%', padding:10, ...roughBorder(1), display:'flex', gap:8, marginBottom:10, fontSize:11}}>
          <IconPh size={16} kind="dot"/><div>Confirmation sent to <u>jane@em…</u></div>
        </div>
        <Box pad={12} fill={WF.ink} style={{width:'100%', color:WF.paper, marginBottom:12}}>
          <div style={{fontFamily:WF.mono, fontSize:9, opacity:0.7}}>UPGRADE</div>
          <div style={{fontSize:12, marginBottom:6}}>Inner Circle — $120 more</div>
          <Btn style={{borderColor:WF.paper, color:WF.paper}} size="sm" w="100%">Upgrade</Btn>
        </Box>
        <div style={{width:'100%', textAlign:'center'}}>
          <div style={{fontFamily:WF.hand, fontSize:12, color:WF.ink2, marginBottom:6}}>share →</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:4}}>
            {['IG','X','Msg','Link'].map((p,i)=>(<Btn key={i} size="sm">{p}</Btn>))}
          </div>
        </div>
      </div>
    </MobileFrame>
  );
}

// ═══════════════ COMPONENT LIBRARY ═══════════════
function ComponentLibrary() {
  return (
    <div style={{width:1200, minHeight:700, background:WF.paper, padding:'36px 44px', fontFamily:WF.sans, color:WF.ink}}>
      <ScreenTag>COMPONENT LIBRARY · LO-FI KIT</ScreenTag>
      <div style={{fontSize:26, fontWeight:600, marginBottom:6}}>Component library sheet</div>
      <div style={{fontFamily:WF.hand, fontSize:14, color:WF.ink2, marginBottom:24}}>
        reference for the 10 screens — buttons, cards, inputs, nav, pricing
      </div>

      {/* Buttons */}
      <div style={{marginBottom:28}}>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:8}}>01 · BUTTONS</div>
        <div style={{display:'flex', gap:12, alignItems:'center', flexWrap:'wrap'}}>
          <Btn primary size="lg">Primary · lg</Btn>
          <Btn primary>Primary · md</Btn>
          <Btn primary size="sm">Primary · sm</Btn>
          <Btn size="lg">Secondary · lg</Btn>
          <Btn>Secondary · md</Btn>
          <Btn size="sm">Secondary · sm</Btn>
          <Btn style={{opacity:0.4}}>Disabled</Btn>
        </div>
      </div>

      {/* Inputs */}
      <div style={{marginBottom:28}}>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:8}}>02 · INPUTS</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14}}>
          <Input label="Text · default" placeholder="Jane Doe"/>
          <Input label="Date" placeholder="YYYY / MM / DD" helper="format we accept"/>
          <Input label="With helper" placeholder="you@email.com" helper="we'll send confirmation"/>
        </div>
      </div>

      {/* Cards */}
      <div style={{marginBottom:28}}>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:8}}>03 · CARDS</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12}}>
          <Box pad={14}><IconPh size={20} kind="star" style={{marginBottom:8}}/><div style={{fontSize:12, fontWeight:500}}>System card</div><TextLine w="70%" style={{marginTop:6}}/></Box>
          <Box pad={14} fill={WF.panel}><div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>MUTED</div><div style={{fontSize:12, marginTop:4}}>Muted card</div><TextLine w="60%" style={{marginTop:6}}/></Box>
          <Box pad={14} style={{background:WF.ink, color:WF.paper}}><div style={{fontFamily:WF.mono, fontSize:9, opacity:0.7}}>DARK</div><div style={{fontSize:12, marginTop:4}}>Inverted card</div></Box>
          <Box pad={14} style={{textAlign:'center'}}>
            <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>STAT</div>
            <div style={{fontSize:28, fontWeight:600, margin:'4px 0'}}>72</div>
            <div style={{fontSize:10, color:WF.ink2}}>alignment</div>
          </Box>
        </div>
      </div>

      {/* Nav */}
      <div style={{marginBottom:28}}>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:8}}>04 · NAV</div>
        <div style={{border:`1px solid ${WF.ink3}`, borderRadius:4, marginBottom:8}}><DeskNav/></div>
        <div style={{display:'flex', gap:8, alignItems:'center'}}>
          <Dots count={5} active={2}/>
          <span style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginLeft:8}}>progress dots · 5-step</span>
        </div>
      </div>

      {/* Pricing table */}
      <div style={{marginBottom:28}}>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:8}}>05 · PRICING TABLE</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14}}>
          {[{t:'Free',p:'$0',f:['Basic chart','1 system']},{t:'Blueprint',p:'$79',f:['All 10 systems','PDF + audio','Share link']},{t:'Inner Circle',p:'$199',f:['Everything','Relationships','Monthly updates','Private chat']}].map((tier,i)=>(
            <Box key={i} pad={16} fill={i===1?WF.panel:WF.paper} style={{position:'relative'}}>
              {i===1 && <div style={{position:'absolute', top:-10, left:14, background:WF.accent, padding:'2px 8px', fontFamily:WF.mono, fontSize:9}}>most chosen</div>}
              <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>{tier.t.toUpperCase()}</div>
              <div style={{fontSize:28, fontWeight:600, margin:'4px 0 10px'}}>{tier.p}</div>
              {tier.f.map((feat,j)=>(<div key={j} style={{display:'flex', gap:6, fontSize:11, marginBottom:4}}><IconPh size={12} kind="check"/>{feat}</div>))}
              <Btn primary={i===1} w="100%" size="sm" style={{marginTop:10}}>Choose</Btn>
            </Box>
          ))}
        </div>
      </div>

      {/* Chips, stat pills, dots */}
      <div style={{marginBottom:20}}>
        <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:8}}>06 · CHIPS · PILLS · UTILITIES</div>
        <div style={{display:'flex', gap:10, alignItems:'center', flexWrap:'wrap'}}>
          {['Career','Love','Spiritual','Challenges'].map((f,i)=>(<div key={i} style={{padding:'5px 10px', fontSize:11, ...roughBorder(1), background:i===1?WF.ink:'transparent', color:i===1?WF.paper:WF.ink}}>{f}</div>))}
          <span style={{width:1, height:20, background:WF.ink3, margin:'0 6px'}}/>
          {['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>))}
          <span style={{width:1, height:20, background:WF.ink3, margin:'0 6px'}}/>
          <IconPh size={24} kind="check"/><IconPh size={24} kind="dot"/><IconPh size={24} kind="x"/><IconPh size={24} kind="star"/>
        </div>
      </div>
    </div>
  );
}

// ═══════════════ TOKEN SHEET ═══════════════
function TokenSheet() {
  const palette = [
    {n:'indigo',    v:'#1a1a2e', role:'primary ink · mystical bg'},
    {n:'cream',     v:'#f5f1e8', role:'paper · canvas'},
    {n:'gold',      v:'#c9a961', role:'accent · "most chosen"'},
    {n:'rose',      v:'#d4a5a5', role:'accent · relational warmth'},
    {n:'ink',       v:'#1c1c1c', role:'body text'},
    {n:'ink2',      v:'#4a4a4a', role:'secondary text'},
    {n:'ink3',      v:'#8a8a8a', role:'divider · placeholder'},
    {n:'panel',     v:'#f2efe6', role:'muted surface'},
  ];
  return (
    <div style={{width:1200, minHeight:640, background:WF.paper, padding:'36px 44px', fontFamily:WF.sans, color:WF.ink}}>
      <ScreenTag>TOKEN REFERENCE</ScreenTag>
      <div style={{fontSize:26, fontWeight:600, marginBottom:6}}>Color + type tokens</div>
      <div style={{fontFamily:WF.hand, fontSize:14, color:WF.ink2, marginBottom:24}}>
        low-fi draft — brand palette is set, type pairing to be confirmed in hi-fi
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:32}}>
        {/* Colors */}
        <div>
          <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:10}}>COLOR · BRAND + UI</div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            {palette.map((c,i)=>(
              <Box key={i} pad={0} style={{display:'flex', overflow:'hidden'}}>
                <div style={{width:72, height:72, background:c.v, flexShrink:0}}/>
                <div style={{padding:'10px 12px', flex:1}}>
                  <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>{c.n.toUpperCase()}</div>
                  <div style={{fontFamily:WF.mono, fontSize:11, margin:'2px 0 4px'}}>{c.v}</div>
                  <div style={{fontSize:10, color:WF.ink2, lineHeight:1.3}}>{c.role}</div>
                </div>
              </Box>
            ))}
          </div>
        </div>

        {/* Type */}
        <div>
          <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:10}}>TYPE · HIERARCHY</div>
          <Box pad={16} style={{marginBottom:10}}>
            <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>DISPLAY · SERIF (Canela / GT Sectra)</div>
            <div style={{fontFamily:'"Canela","GT Sectra","Cormorant Garamond",serif', fontSize:38, lineHeight:1.05, marginTop:6}}>Know thyself.</div>
          </Box>
          <Box pad={16} style={{marginBottom:10}}>
            <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>H1 · 32 / 38</div>
            <div style={{fontFamily:'"Canela","Cormorant Garamond",serif', fontSize:32, lineHeight:1.1, marginTop:4}}>Section heading</div>
          </Box>
          <Box pad={16} style={{marginBottom:10}}>
            <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>H2 · 20 / 26 · Inter 600</div>
            <div style={{fontFamily:'Inter,sans-serif', fontSize:20, fontWeight:600, marginTop:4}}>Subsection heading</div>
          </Box>
          <Box pad={16} style={{marginBottom:10}}>
            <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>BODY · 15 / 24 · Inter 400</div>
            <div style={{fontFamily:'Inter,sans-serif', fontSize:15, lineHeight:1.55, marginTop:4}}>
              Self-knowledge, engineered. Ten systems. One clear blueprint. Your inner map, drawn in editorial type and calm color.
            </div>
          </Box>
          <Box pad={16}>
            <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>LABEL · 10 · MONO · TRACKING +0.5</div>
            <div style={{fontFamily:'"JetBrains Mono",monospace', fontSize:10, letterSpacing:0.5, marginTop:4}}>CHAPTER 02 · HUMAN DESIGN</div>
          </Box>
        </div>
      </div>

      {/* Spacing + radii */}
      <div style={{marginTop:28, display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
        <div>
          <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:10}}>SPACING · 4PT BASE</div>
          <div style={{display:'flex', gap:10, alignItems:'flex-end'}}>
            {[4,8,12,16,24,32,48,64].map((s,i)=>(
              <div key={i} style={{textAlign:'center'}}>
                <div style={{width:s, height:s, background:WF.ink, margin:'0 auto 4px'}}/>
                <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>{s}</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2, marginBottom:10}}>RADII · HIGH-FIDELITY</div>
          <div style={{display:'flex', gap:14}}>
            {[{r:0,n:'square'},{r:2,n:'2·crisp'},{r:4,n:'4·ui'},{r:999,n:'full·pill'}].map((r,i)=>(
              <div key={i} style={{textAlign:'center'}}>
                <div style={{width:54, height:54, border:`1.5px solid ${WF.ink}`, borderRadius:r.r, marginBottom:4}}/>
                <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>{r.n}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ChatDesktop, ChatMobile, MapDesktop, MapMobile,
  CheckoutDesktop, CheckoutMobile, ConfirmDesktop, ConfirmMobile,
  ComponentLibrary, TokenSheet,
});