const { StarField, CornerFrame, Button, NavLink, CharacterCard, ProgressRing, Badge, Chip, Modal } = window.BozUniverseDesignSystem_f18632;

const NAV = ['Hub','Codex','Library','Chronicle','World'];

const CAST = [
  { name:'Demir', tag:'Yok Twin', role:'Peasant POV · Our Door into Boz', accent:'var(--boz-ember-solid)', pov:true },
  { name:'Aydın', tag:'Var Twin', role:'The Bright Half', accent:'var(--boz-sky-solid)', pov:false },
  { name:'Liora', tag:'The Confidante', role:'Ambassador\u2019s Reader · Boz City', accent:'var(--boz-mute-3)', pov:true },
  { name:'?', tag:'Sealed Presence', locked:true },
  { name:'?', tag:'Sealed Presence', locked:true },
  { name:'Korkut', tag:'The Sworn Servant', role:'Grandfather · Yandag', accent:'var(--boz-mute-3)', pov:false },
];

function Header({ screen, setScreen }) {
  return (
    <header style={{position:'relative',zIndex:20,display:'flex',flexWrap:'wrap',alignItems:'center',gap:14,minHeight:66,padding:'10px 24px',borderBottom:'1px solid rgba(var(--boz-line),0.12)',background:'linear-gradient(180deg,rgba(var(--boz-bg),0.92),rgba(var(--boz-bg),0.55))'}}>
      <div style={{fontFamily:'var(--boz-font-display)',fontWeight:700,fontSize:20,color:'var(--boz-ink)',letterSpacing:1,flexShrink:0}}>BOZ<span style={{color:'var(--boz-mute-2)',fontWeight:400}}>UNIVERSE</span></div>
      <div style={{display:'flex',flexDirection:'column',gap:2,paddingLeft:16,borderLeft:'1px solid rgba(var(--boz-line),0.14)',flexShrink:0}}>
        <div style={{fontFamily:'var(--boz-font-mono)',fontSize:8.5,letterSpacing:2,color:'var(--boz-mute-3)',textTransform:'uppercase'}}>Living Codex Engine</div>
        <div style={{fontFamily:'var(--boz-font-mono)',fontSize:8.5,letterSpacing:2,color:'var(--boz-faint)',textTransform:'uppercase'}}>Loaded · The Twins</div>
      </div>
      <nav style={{display:'flex',flexWrap:'wrap',gap:4,marginLeft:8}}>
        {NAV.map(n=><NavLink key={n} label={n} active={screen===n.toLowerCase()} onClick={()=>setScreen(n.toLowerCase())} />)}
      </nav>
      <div style={{flex:1,minWidth:0}}/>
      <ProgressRing pct={22} label="You are reading"/>
      <Button variant="primary" size="sm" icon={<span style={{width:5,height:5,background:'var(--boz-btn-ink)',borderRadius:'50%'}}/>}>Subscribe</Button>
    </header>
  );
}

function Hub({ setScreen }) {
  return (
    <div style={{position:'relative',minHeight:600,display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden',padding:'0 20px'}}>
      <StarField density={170}/>
      <div style={{position:'relative',zIndex:2,textAlign:'center',maxWidth:760,width:'100%'}}>
        <div style={{fontFamily:'var(--boz-font-mono)',fontSize:11,letterSpacing:5,color:'var(--boz-mute-3)',textTransform:'uppercase',marginBottom:20}}>Book One &nbsp;·&nbsp; <span style={{color:'var(--boz-ember-solid)'}}>Now Serializing</span></div>
        <h1 style={{fontFamily:'var(--boz-font-display)',fontWeight:800,fontSize:88,lineHeight:0.92,letterSpacing:3,margin:0,color:'var(--boz-ink)'}}>THE TWINS</h1>
        <div style={{fontFamily:'var(--boz-font-mono)',fontSize:14,letterSpacing:4,color:'var(--boz-mute-2)',textTransform:'uppercase',marginTop:20}}>The Var · Yok Split</div>
        <p style={{fontFamily:'var(--boz-font-body)',fontWeight:300,fontSize:18,lineHeight:1.7,color:'var(--boz-ash)',margin:'26px auto 0',maxWidth:560}}>One soul, split at birth into two bodies. Apart, they are safe. Together, they could begin to unmake the world — and a god's seal has just begun to fail.</p>
        <div style={{display:'flex',flexWrap:'wrap',gap:16,justifyContent:'center',marginTop:36}}>
          <Button variant="primary" icon={<span>▶</span>} onClick={()=>setScreen('library')}>Read Chapter 1 — Free</Button>
          <Button variant="ghost" icon={<span>+</span>}>My Saga</Button>
        </div>
      </div>
    </div>
  );
}

function Codex({ setScreen }) {
  const [filter,setFilter]=React.useState('All');
  return (
    <div style={{padding:'40px 24px',maxWidth:1180,margin:'0 auto'}}>
      <div style={{fontFamily:'var(--boz-font-mono)',fontSize:10,letterSpacing:2,color:'var(--boz-mute-3)',textTransform:'uppercase'}}>Section 01 / Dramatis Personae</div>
      <h1 style={{fontFamily:'var(--boz-font-display)',fontWeight:800,fontSize:46,color:'var(--boz-ink)',margin:'10px 0 14px'}}>THE CODEX</h1>
      <p style={{fontFamily:'var(--boz-font-body)',fontWeight:300,fontSize:16,color:'var(--boz-ash)',maxWidth:560,margin:'0 0 24px'}}>Every soul is built around what drives a story: Want, Wound, Contradiction, Stakes. No pure heroes. No cartoon villains.</p>
      <div style={{display:'flex',flexWrap:'wrap',gap:0,border:'1px solid rgba(var(--boz-line),0.2)',width:'fit-content',marginBottom:30}}>
        {['All','POV','The Tengri','Yandag','Boz City','The Twins'].map(c=><Chip key={c} active={filter===c} onClick={()=>setFilter(c)}>{c}</Chip>)}
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:14}}>
        {CAST.map((c,i)=><CharacterCard key={i} {...c} onClick={()=>setScreen('library')} />)}
      </div>
    </div>
  );
}

function Library({ setScreen }) {
  return (
    <div style={{padding:'30px 24px',maxWidth:1180,margin:'0 auto',display:'grid',gridTemplateColumns:'minmax(0,260px) minmax(0,1fr)',gap:40}}>
      <div>
        <div style={{fontFamily:'var(--boz-font-mono)',fontSize:9,letterSpacing:2,color:'var(--boz-mute-3)',textTransform:'uppercase',marginBottom:8}}>You are here</div>
        <div style={{border:'1px solid rgba(var(--boz-line),0.22)',padding:14,marginBottom:20}}>
          <div style={{fontFamily:'var(--boz-font-display)',fontSize:18,color:'var(--boz-ink)'}}>Yandag</div>
          <div style={{fontFamily:'var(--boz-font-mono)',fontSize:9,letterSpacing:1,color:'var(--boz-mute-3)',textTransform:'uppercase'}}>Kingdom · Capital</div>
        </div>
        <Button variant="ghost" onClick={()=>setScreen('codex')}>← Codex</Button>
      </div>
      <div>
        <div style={{fontFamily:'var(--boz-font-mono)',fontSize:9,letterSpacing:2,color:'var(--boz-mute-3)',textTransform:'uppercase',marginBottom:14}}>Book One · The Twins · Prologue</div>
        <h1 style={{fontFamily:'var(--boz-font-display)',fontWeight:700,fontSize:46,lineHeight:1.05,color:'var(--boz-ink)',margin:'0 0 20px'}}>THE EYE<br/>THAT CLOSED</h1>
        <p style={{fontFamily:'var(--boz-font-body)',fontSize:18,lineHeight:1.75,color:'var(--boz-ink-3)',maxWidth:600}}>For nine hundred years the Eye of Yandag had never closed. Now, for the first time, a seam of dark crept across it — and Demir was the only soul awake to see the god blink.</p>
      </div>
    </div>
  );
}

function App(){
  const [screen,setScreen]=React.useState('hub');
  return (
    <div style={{position:'relative',minHeight:'100vh',background:'var(--boz-bg-solid)',fontFamily:'var(--boz-font-body)'}}>
      <Header screen={screen} setScreen={setScreen}/>
      {screen==='hub' && <Hub setScreen={setScreen}/>}
      {screen==='codex' && <Codex setScreen={setScreen}/>}
      {screen==='library' && <Library setScreen={setScreen}/>}
      {(screen==='chronicle'||screen==='world') && <div style={{padding:80,textAlign:'center',fontFamily:'var(--boz-font-mono)',color:'var(--boz-mute-3)',letterSpacing:2,textTransform:'uppercase'}}>Not built in this kit yet</div>}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);