// Screens 1-5: Homepage Mystical, Homepage Science, Onboarding (5 steps combined), Report Gen, Blueprint

// Shared desktop header
function DeskNav() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', padding: '14px 32px', borderBottom: `1px solid ${WF.ink3}` }}>
      <div style={{ fontFamily: WF.sans, fontWeight: 700, fontSize: 15, letterSpacing: 1 }}>PERSONA</div>
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', gap: 28, fontSize: 12, color: WF.ink2 }}>
        <span>Blueprint</span><span>Science</span><span>Pricing</span><span>Journal</span>
      </div>
      <Btn size="sm">Sign in</Btn>
      <Btn size="sm" primary style={{ marginLeft: 8 }}>Get started</Btn>
    </div>
  );
}

function MobNav() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', borderBottom: `1px solid ${WF.ink3}` }}>
      <div style={{ fontFamily: WF.sans, fontWeight: 700, fontSize: 12, letterSpacing: 1 }}>PERSONA</div>
      <div style={{ fontSize: 16 }}>☰</div>
    </div>
  );
}

// ═══════════════ SCREEN 1: HOMEPAGE (MYSTICAL) ═══════════════
function HomeMysticalDesktop() {
  return (
    <DesktopFrame>
      <DeskNav />
      <div style={{ height: 'calc(100% - 57px)', overflow: 'auto' }}>
        {/* Hero */}
        <div style={{ padding: '44px 80px 40px', position: 'relative' }}>
          <ScreenTag>01 · HOMEPAGE — MYSTICAL</ScreenTag>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <Heading w="92%" h={26} style={{ marginBottom: 10 }} />
              <Heading w="70%" h={26} style={{ marginBottom: 18 }} />
              <TextBlock lines={3} lastW="55%" style={{ marginBottom: 22 }} />
              <Box pad={14} style={{ display: 'flex', gap: 10, alignItems: 'center', width: 420 }}>
                <div style={{ fontFamily: WF.mono, fontSize: 10, color: WF.ink2, flex: 1 }}>YYYY / MM / DD · your birth date</div>
                <Btn primary size="sm">Begin →</Btn>
              </Box>
              <Note style={{ marginTop: 10 }}>↑ single input — no signup yet</Note>
            </div>
            <ImgBox w="100%" h={240} label="hero imagery / celestial" />
          </div>
        </div>

        {/* Social proof */}
        <div style={{ padding: '18px 80px', borderTop: `0.5px dashed ${WF.ink3}`, borderBottom: `0.5px dashed ${WF.ink3}`, display: 'flex', alignItems: 'center', gap: 40, fontFamily: WF.mono, fontSize: 10, color: WF.ink2 }}>
          <span>AS SEEN IN</span>
          <Heading w={70} h={10} /><Heading w={60} h={10} /><Heading w={80} h={10} /><Heading w={55} h={10} /><Heading w={70} h={10} />
        </div>

        {/* 10-system grid */}
        <div style={{ padding: '40px 80px' }}>
          <Heading w="40%" h={18} style={{ marginBottom: 6 }} />
          <TextBlock lines={1} lastW="50%" style={{ marginBottom: 20 }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
            {['Astrology','Human Design','MBTI','Enneagram','Big Five','Numerology','Astrocarto.','I Ching','Gene Keys','Chinese'].map((n, i) => (
              <Box key={i} pad={14} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, aspectRatio: '1 / 1' }}>
                <IconPh size={28} kind={i % 2 ? 'star' : 'dot'} />
                <div style={{ fontSize: 10, textAlign: 'center' }}>{n}</div>
              </Box>
            ))}
          </div>
        </div>

        {/* Sample report preview */}
        <div style={{ padding: '20px 80px 40px' }}>
          <Heading w="35%" h={16} style={{ marginBottom: 14 }} />
          <Box pad={20} style={{ position: 'relative', minHeight: 180 }}>
            <div style={{ filter: 'blur(3px)', opacity: 0.55 }}>
              <Heading w="40%" h={14} style={{ marginBottom: 10 }} />
              <TextBlock lines={4} />
            </div>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Btn primary>Unlock your Blueprint</Btn>
            </div>
          </Box>
        </div>

        {/* 3-tier pricing */}
        <div style={{ padding: '30px 80px', background: WF.panel }}>
          <Heading w="30%" h={16} style={{ marginBottom: 16 }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {[{t:'Free', p:'$0'},{t:'Blueprint', p:'$79'},{t:'Inner Circle', p:'$199'}].map((tier, i) => (
              <Box key={i} pad={18} fill={WF.paper} style={{ position: 'relative' }}>
                {i === 1 && <Note style={{ position: 'absolute', top: -12, right: 10, background: WF.accent, color: WF.ink, padding: '2px 8px', fontSize: 10 }}>most chosen</Note>}
                <div style={{ fontFamily: WF.mono, fontSize: 10, color: WF.ink2 }}>{tier.t.toUpperCase()}</div>
                <div style={{ fontSize: 28, fontWeight: 600, margin: '6px 0 10px' }}>{tier.p}</div>
                <TextBlock lines={4} lastW="60%" style={{ marginBottom: 14 }} />
                <Btn primary={i === 1} w="100%" size="sm">Choose</Btn>
              </Box>
            ))}
          </div>
        </div>

        {/* Testimonials */}
        <div style={{ padding: '40px 80px' }}>
          <Heading w="25%" h={16} style={{ marginBottom: 16 }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {[0,1,2].map(i => (
              <Box key={i} pad={16}>
                <TextBlock lines={3} lastW="70%" />
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
                  <div style={{ width: 24, height: 24, borderRadius: 12, ...roughBorder(1) }} />
                  <div style={{ fontSize: 10, color: WF.ink2 }}>— name, city</div>
                </div>
              </Box>
            ))}
          </div>
        </div>

        {/* FAQ */}
        <div style={{ padding: '10px 80px 30px' }}>
          <Heading w="15%" h={16} style={{ marginBottom: 12 }} />
          {[0,1,2,3].map(i => (
            <div key={i} style={{ padding: '12px 0', borderBottom: `1px solid ${WF.ink3}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <TextLine w="55%" />
              <span style={{ fontSize: 16 }}>+</span>
            </div>
          ))}
        </div>

        {/* Footer */}
        <div style={{ padding: '24px 80px', background: WF.ink, color: WF.paper, display: 'flex', justifyContent: 'space-between', fontSize: 10, fontFamily: WF.mono }}>
          <div>PERSONA · © 2026</div>
          <div style={{ display: 'flex', gap: 18, opacity: 0.7 }}><span>about</span><span>science</span><span>privacy</span><span>contact</span></div>
        </div>
      </div>

      <DCPostIt top={20} right={-20} rotate={3} width={160}>
        Mystical tone: celestial imagery, serif display, warm cream paper
      </DCPostIt>
    </DesktopFrame>
  );
}

function HomeMysticalMobile() {
  return (
    <MobileFrame>
      <MobNav />
      <div style={{ height: 'calc(100% - 56px)', overflowY: 'auto', padding: '0 16px 16px' }}>
        <ScreenTag style={{ marginTop: 10 }}>01 · HOME MYSTICAL</ScreenTag>
        <Heading w="90%" h={18} style={{ marginBottom: 8 }} />
        <Heading w="60%" h={18} style={{ marginBottom: 10 }} />
        <TextBlock lines={2} lastW="70%" style={{ marginBottom: 14 }} />
        <ImgBox w="100%" h={120} label="hero imagery" style={{ marginBottom: 14 }} />
        <Input placeholder="YYYY / MM / DD" style={{ marginBottom: 8 }} />
        <Btn primary w="100%">Begin →</Btn>

        <div style={{ marginTop: 18, paddingTop: 10, borderTop: `0.5px dashed ${WF.ink3}`, fontFamily: WF.mono, fontSize: 8, color: WF.ink2, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <span>AS SEEN IN</span><Heading w={44} h={8}/><Heading w={40} h={8}/><Heading w={50} h={8}/>
        </div>

        <div style={{ marginTop: 18 }}>
          <Heading w="70%" h={13} style={{ marginBottom: 10 }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
            {Array.from({length:9}).map((_,i) => (
              <Box key={i} pad={8} style={{ aspectRatio:'1/1', display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
                <IconPh size={18} kind={i%2?'star':'dot'} /><div style={{fontSize:8}}>system</div>
              </Box>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 20 }}>
          <Heading w="60%" h={13} style={{ marginBottom: 10 }} />
          <Box pad={12} style={{ position:'relative', minHeight:100 }}>
            <div style={{ filter:'blur(2px)', opacity:0.5 }}><TextBlock lines={3}/></div>
            <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Btn primary size="sm">Unlock</Btn>
            </div>
          </Box>
        </div>

        <div style={{ marginTop: 20 }}>
          <Heading w="40%" h={13} style={{ marginBottom: 10 }} />
          {[{t:'Free',p:'$0'},{t:'Blueprint',p:'$79'},{t:'Inner Circle',p:'$199'}].map((t,i)=>(
            <Box key={i} pad={12} style={{marginBottom:8, position:'relative', background: i===1?WF.panel:'transparent'}}>
              <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>{t.t.toUpperCase()}</div>
              <div style={{fontSize:20, fontWeight:600, margin:'2px 0 6px'}}>{t.p}</div>
              <TextBlock lines={2} lastW="60%" />
            </Box>
          ))}
        </div>

        <div style={{ marginTop: 16 }}>
          <Heading w="40%" h={13} style={{ marginBottom: 8 }} />
          <Box pad={10}><TextBlock lines={3} lastW="70%" /><div style={{fontSize:9, color:WF.ink2, marginTop:6}}>— name</div></Box>
        </div>

        <div style={{ marginTop: 16 }}>
          <Heading w="20%" h={13} style={{ marginBottom: 6 }} />
          {[0,1,2].map(i => (
            <div key={i} style={{ padding: '8px 0', borderBottom: `1px solid ${WF.ink3}`, display:'flex', justifyContent:'space-between' }}>
              <TextLine w="70%" /><span>+</span>
            </div>
          ))}
        </div>
      </div>
    </MobileFrame>
  );
}

// ═══════════════ SCREEN 2: HOMEPAGE (SCIENCE) ═══════════════
function HomeScienceDesktop() {
  return (
    <DesktopFrame>
      <DeskNav />
      <div style={{ height: 'calc(100% - 57px)', overflow: 'auto', background: '#fafaf7' }}>
        <div style={{ padding: '44px 80px 30px' }}>
          <ScreenTag>02 · HOMEPAGE — SCIENCE</ScreenTag>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: WF.mono, fontSize: 10, color: WF.ink2, marginBottom: 8 }}>SELF-KNOWLEDGE, ENGINEERED.</div>
              <Heading w="95%" h={24} style={{ marginBottom: 8 }} />
              <Heading w="75%" h={24} style={{ marginBottom: 16 }} />
              <TextBlock lines={3} lastW="60%" style={{ marginBottom: 18 }} />
              <div style={{ display: 'flex', gap: 10 }}>
                <Btn primary>Take assessment</Btn>
                <Btn>How it works</Btn>
              </div>
              <Note style={{ marginTop: 12 }}>No celestial stuff — grid, charts, data-viz feel</Note>
            </div>
            {/* data-viz hero */}
            <Box pad={16} style={{ aspectRatio: '5/3' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, height: '100%' }}>
                <div><div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>BIG FIVE</div>
                  {['O','C','E','A','N'].map((l,i)=>(
                    <div key={i} style={{display:'flex', alignItems:'center', gap:6, marginTop:6}}>
                      <span style={{fontFamily:WF.mono, fontSize:10, width:12}}>{l}</span>
                      <div style={{flex:1, height:6, background:'#e5e1d4', position:'relative'}}>
                        <div style={{position:'absolute', left:0, top:0, height:'100%', width:`${40+i*10}%`, background:WF.ink}}/>
                      </div>
                    </div>
                  ))}
                </div>
                <div><div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>MBTI / ENNEAGRAM</div>
                  <div style={{display:'flex', gap:6, flexWrap:'wrap', marginTop:8}}>
                    {['INTJ','T9','5w4','Sp/Sx','Ni-dom'].map((c,i)=>(
                      <div key={i} style={{padding:'3px 7px', fontFamily:WF.mono, fontSize:10, ...roughBorder(1)}}>{c}</div>
                    ))}
                  </div>
                </div>
              </div>
            </Box>
          </div>
        </div>

        <div style={{ padding: '12px 80px', borderTop: `0.5px dashed ${WF.ink3}`, borderBottom: `0.5px dashed ${WF.ink3}`, display:'flex', gap:30, fontFamily:WF.mono, fontSize:10, color:WF.ink2 }}>
          <span>PEER-REVIEWED ·</span><Heading w={70} h={10}/><Heading w={60} h={10}/><Heading w={80} h={10}/>
        </div>

        <div style={{ padding: '34px 80px' }}>
          <Heading w="40%" h={18} style={{marginBottom:4}}/>
          <Note>Same 10 systems — reframed as models, frameworks, instruments</Note>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10, marginTop: 16 }}>
            {['Big Five','MBTI','Enneagram','Human Design','Astrology','Numerology','Astrocart.','I Ching','Gene Keys','Chinese'].map((n,i)=>(
              <Box key={i} pad={10} style={{display:'flex', flexDirection:'column', gap:6, minHeight:80}}>
                <div style={{fontFamily:WF.mono, fontSize:8, color:WF.ink2}}>0{i+1}</div>
                <div style={{fontSize:11, fontWeight:500}}>{n}</div>
                <TextLine w="70%" />
              </Box>
            ))}
          </div>
        </div>

        <div style={{ padding: '10px 80px 30px' }}>
          <Heading w="30%" h={16} style={{ marginBottom: 12 }} />
          <Box pad={20} style={{ position:'relative', minHeight: 160 }}>
            <div style={{ filter:'blur(3px)', opacity:0.55 }}>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14}}>
                <div><Heading w="50%" h={10}/><TextBlock lines={3} lastW="80%" style={{marginTop:6}}/></div>
                <div><Heading w="50%" h={10}/><TextBlock lines={3} lastW="80%" style={{marginTop:6}}/></div>
              </div>
            </div>
            <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
              <Btn primary>See your data</Btn>
            </div>
          </Box>
        </div>

        <div style={{ padding: '20px 80px', background: WF.panel }}>
          <Heading w="25%" h={16} style={{ marginBottom: 14 }} />
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14 }}>
            {[{t:'Free',p:'$0'},{t:'Blueprint',p:'$79'},{t:'Inner Circle',p:'$199'}].map((tier,i)=>(
              <Box key={i} pad={16} fill={WF.paper}>
                <div style={{fontFamily:WF.mono, fontSize:10, color:WF.ink2}}>{tier.t.toUpperCase()}</div>
                <div style={{fontSize:24, fontWeight:600, margin:'4px 0 8px'}}>{tier.p}</div>
                <TextBlock lines={3} lastW="60%" style={{marginBottom:10}}/>
                <Btn primary={i===1} w="100%" size="sm">Choose</Btn>
              </Box>
            ))}
          </div>
        </div>

        <div style={{ padding:'24px 80px', background: WF.ink, color: WF.paper, display: 'flex', justifyContent: 'space-between', fontSize: 10, fontFamily: WF.mono }}>
          <div>PERSONA · © 2026</div>
          <div style={{ display: 'flex', gap: 18, opacity: 0.7 }}><span>about</span><span>science</span><span>methodology</span></div>
        </div>
      </div>
      <DCPostIt top={20} right={-30} rotate={-3} width={160}>Science tone: grid, chart, mono labels. Same copy → reframed</DCPostIt>
    </DesktopFrame>
  );
}

function HomeScienceMobile() {
  return (
    <MobileFrame>
      <MobNav />
      <div style={{ height: 'calc(100% - 56px)', overflowY: 'auto', padding: '0 16px 16px' }}>
        <ScreenTag style={{ marginTop: 10 }}>02 · HOME SCIENCE</ScreenTag>
        <div style={{ fontFamily: WF.mono, fontSize: 9, color: WF.ink2, marginBottom: 6 }}>SELF-KNOWLEDGE, ENGINEERED.</div>
        <Heading w="95%" h={16} style={{marginBottom:6}}/>
        <Heading w="70%" h={16} style={{marginBottom:10}}/>
        <TextBlock lines={2} lastW="70%" style={{marginBottom:12}} />
        <Btn primary w="100%" style={{marginBottom:8}}>Take assessment</Btn>
        <Btn w="100%">How it works</Btn>

        <Box pad={12} style={{marginTop:16}}>
          <div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2, marginBottom:8}}>BIG FIVE</div>
          {['O','C','E','A','N'].map((l,i)=>(
            <div key={i} style={{display:'flex', alignItems:'center', gap:6, marginTop:4}}>
              <span style={{fontFamily:WF.mono, fontSize:9, width:10}}>{l}</span>
              <div style={{flex:1, height:5, background:'#e5e1d4', position:'relative'}}>
                <div style={{position:'absolute', left:0, top:0, height:'100%', width:`${40+i*10}%`, background:WF.ink}}/>
              </div>
            </div>
          ))}
        </Box>

        <div style={{marginTop:16}}>
          <Heading w="70%" h={12} style={{marginBottom:8}}/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:8}}>
            {['Big Five','MBTI','Enneagram','Human Design'].map((n,i)=>(
              <Box key={i} pad={8}><div style={{fontFamily:WF.mono, fontSize:8, color:WF.ink2}}>0{i+1}</div><div style={{fontSize:10, fontWeight:500}}>{n}</div></Box>
            ))}
          </div>
        </div>

        <div style={{marginTop:16}}>
          <Heading w="35%" h={12} style={{marginBottom:8}}/>
          {[{t:'Free',p:'$0'},{t:'Blueprint',p:'$79'},{t:'Inner',p:'$199'}].map((t,i)=>(
            <Box key={i} pad={10} style={{marginBottom:6, background:i===1?WF.panel:'transparent'}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <div><div style={{fontFamily:WF.mono, fontSize:9, color:WF.ink2}}>{t.t.toUpperCase()}</div><div style={{fontSize:16, fontWeight:600}}>{t.p}</div></div>
                <Btn size="sm" primary={i===1}>Pick</Btn>
              </div>
            </Box>
          ))}
        </div>
      </div>
    </MobileFrame>
  );
}

Object.assign(window, { DeskNav, MobNav, HomeMysticalDesktop, HomeMysticalMobile, HomeScienceDesktop, HomeScienceMobile });