function TypePreview({ kind, big }) {
  const s = big ? 1.4 : 1;
  const wrap = { width:'100%', height:big?96:72, background:'var(--sitm-bg-light-dim)', border:'1px solid var(--sitm-border)', display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden', borderRadius:8 };
  const line = (w,h=3) => <div style={{width:w,height:h,background:'rgba(62,71,97,.25)'}}></div>;
  if (kind==='lines') return <div style={wrap}><div style={{width:'62%',display:'flex',flexDirection:'column',gap:5}}>
    <div style={{width:'50%',height:5,background:'var(--sitm-teal)'}}></div>{line('100%')}{line('88%')}{line('94%')}{line('70%')}</div></div>;
  if (kind==='cards') return <div style={wrap}><div style={{display:'flex',gap:6}}>
    {[0,1,2].map(i=><div key={i} style={{width:34*s,height:24*s,background:'#fff',border:'1px solid rgba(62,71,97,.3)',borderTop:'3px solid var(--sitm-teal)'}}></div>)}</div></div>;
  if (kind==='badge') return <div style={wrap}><div style={{width:26*s,height:40*s,background:'#fff',border:'1px solid rgba(62,71,97,.3)',position:'relative'}}>
    <div style={{width:6,height:6,borderRadius:'50%',border:'1.5px solid rgba(62,71,97,.4)',margin:'3px auto'}}></div>
    <div style={{margin:'0 4px',display:'flex',flexDirection:'column',gap:3}}>{line('100%',2)}{line('80%',2)}{line('90%',2)}</div></div></div>;
  if (kind==='quiz') return <div style={wrap}><div style={{width:'58%',display:'flex',flexDirection:'column',gap:5}}>
    {[0,1,2].map(i=><div key={i} style={{display:'flex',gap:6,alignItems:'center'}}>
      <div style={{width:9,height:9,borderRadius:'50%',border:'2px solid '+(i===1?'var(--sitm-teal)':'rgba(62,71,97,.35)'),background:i===1?'var(--sitm-teal)':'transparent'}}></div>
      <div style={{flex:1,height:3,background:'rgba(62,71,97,.25)'}}></div></div>)}</div></div>;
  if (kind==='cross') return <div style={wrap}><div style={{display:'grid',gridTemplateColumns:'repeat(5,'+12*s+'px)'}}>
    {[1,0,1,1,1, 1,1,1,0,1, 0,1,0,1,1, 1,1,1,1,0, 1,0,1,1,1].map((v,i)=><div key={i} style={{width:12*s,height:12*s,border:'0.5px solid rgba(62,71,97,.3)',background:v?'#fff':'var(--sitm-navy)'}}></div>)}</div></div>;
  if (kind==='search') return <div style={wrap}><div style={{display:'grid',gridTemplateColumns:'repeat(6,'+(11*s)+'px)',fontFamily:'var(--sitm-font-body)',fontSize:7*s,fontWeight:600,color:'rgba(62,71,97,.6)'}}>
    {'HERTZQWAVESFAXISNBEAMKPROBE'.slice(0,30).split('').map((c,i)=><div key={i} style={{width:11*s,height:11*s,display:'flex',alignItems:'center',justifyContent:'center',background:[7,8,9,10,11].includes(i)?'rgba(97,189,183,.3)':'transparent'}}>{c}</div>)}</div></div>;
  return <div style={wrap}></div>;
}
function ToolCard({ id, icon, title, desc, cta, onClick, accent }) {
  const [h,setH] = React.useState(false);
  return <div id={id} onClick={onClick} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
    style={{background:accent?'var(--sitm-navy)':'#fff',border:'1px solid '+(accent?'var(--sitm-navy)':'var(--sitm-border)'),padding:24,cursor:'pointer',borderRadius:14,
      boxShadow:h?'0 6px 18px rgba(62,71,97,.14)':'none',transition:'box-shadow .2s ease',display:'flex',flexDirection:'column',gap:10}}>
    <div style={{width:42,height:42,background:accent?'rgba(255,255,255,.14)':'rgba(97,189,183,.15)',color:accent?'#fff':'var(--sitm-teal-deep)',display:'flex',alignItems:'center',justifyContent:'center',borderRadius:10}}><Icon name={icon} size={20}/></div>
    <div style={{fontFamily:'var(--sitm-font-heading)',fontSize:18,color:accent?'#fff':'var(--sitm-navy)'}}>{title}</div>
    <div style={{fontSize:13,lineHeight:1.55,color:accent?'rgba(255,255,255,.85)':'var(--sitm-text)',flex:1}}>{desc}</div>
    <div style={{fontSize:12.5,fontWeight:600,color:accent?'#fff':'var(--sitm-teal-deep)',display:'flex',alignItems:'center',gap:6,textDecoration:h?'underline':'none'}}>{cta}<Icon name="chevR" size={14}/></div>
  </div>;
}
function HomePage({ go, onTour, firstVisit, files, onDeleteFile, toast }) {
  const D = window.CS_DATA;
  return <div style={{maxWidth:1240,margin:'0 auto',padding:'36px 28px 80px'}}>
    {firstVisit && <div style={{background:'rgba(97,189,183,.12)',border:'1px solid var(--sitm-teal)',padding:'14px 20px',marginBottom:28,borderRadius:12,display:'flex',alignItems:'center',gap:14}}>
      <span style={{color:'var(--sitm-teal-deep)'}}><Icon name="spark" size={20}/></span>
      <div style={{flex:1,fontSize:13.5}}><b>First time here?</b> A one minute walk through shows you where everything lives.</div>
      <Btn size="sm" onClick={onTour} icon="play">Show me around</Btn>
    </div>}
    <div style={{marginBottom:10,fontSize:12,fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--sitm-teal-deep)'}}>Hi Jenny</div>
    <div style={{fontFamily:'var(--sitm-font-heading)',fontSize:32,color:'var(--sitm-navy)',lineHeight:1.1,marginBottom:26}}>What would you like to make today?</div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))',gap:16,marginBottom:44}}>
      <ToolCard id="tool-create" accent icon="make" title="Make study materials" cta="Start"
        desc="Pick questions from your bank and turn them into worksheets, flashcards, quizzes, puzzles, and more." onClick={()=>go('create')}/>
      <ToolCard id="tool-pdf" icon="pdf" title="Edit a PDF" cta="Open a PDF"
        desc="Open one of your documents and edit it right on the page. Change text, swap things around, save it back as a PDF." onClick={()=>go('pdfpick')}/>
      <ToolCard id="tool-pdfimport" icon="upload" title="Import a PDF" cta="Import"
        desc="Bring an existing cheat sheet PDF in as an editable sheet. Its fonts, diagrams and layout come across as they are." onClick={()=>go('pdfimport')}/>
      <ToolCard id="tool-templates" icon="tpl" title="Templates" cta="Browse looks"
        desc="The looks your materials can use. Add your own from any PDF and reuse it whenever you like." onClick={()=>go('templates')}/>
      <ToolCard id="tool-elements" icon="shapes" title="Elements" cta="Browse elements"
        desc="Your own library of reusable pieces: header bands, word art, your logo. Drop them onto any page in the editor." onClick={()=>go('elements')}/>
      <ToolCard id="tool-files" icon="files" title="My files" cta="Open my files"
        desc="Everything you have made, in one place. Download again or keep editing." onClick={()=>go('files')}/>
    </div>
    <div id="home-types" style={{marginBottom:44}}>
      <div style={{display:'flex',alignItems:'baseline',gap:14,marginBottom:6}}>
        <H2>What can I make here?</H2>
        <span style={{fontSize:12.5,color:'var(--sitm-text)'}}>Your question bank holds <b>{D.bank.total.toLocaleString()}</b> questions, ready to use.</span>
      </div>
      <Sub style={{marginBottom:18}}>Six kinds of materials work today. Every one of them starts from your own questions.</Sub>
      <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:14}}>
        {D.contentTypes.map(t => <div key={t.id} onClick={()=>go('create', t.id)} style={{background:'#fff',border:'1px solid var(--sitm-border)',padding:14,cursor:'pointer',display:'flex',flexDirection:'column',gap:10,borderRadius:12}}>
          <TypePreview kind={t.preview}/>
          <div>
            <div style={{display:'flex',alignItems:'center',gap:8}}>
              <span style={{fontSize:13.5,fontWeight:600,color:'var(--sitm-navy)'}}>{t.name}</span>
              <Chip tone={t.out==='HTML'?'gold':'teal'}>{t.out==='HTML'?'Web page':'PDF'}</Chip>
            </div>
            <div style={{fontSize:12,lineHeight:1.5,marginTop:5,color:'var(--sitm-text)'}}>{t.desc}</div>
          </div>
        </div>)}
      </div>
    </div>
    <div>
      <div style={{display:'flex',alignItems:'center',marginBottom:16}}>
        <H2 style={{flex:1}}>Pick up where you left off</H2>
        <Btn kind="quiet" size="sm" onClick={()=>go('files')}>See all files</Btn>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:18}}>
        {files.slice(0,4).map(f => <FileCard key={f.id} file={f} go={go} toast={toast} onDelete={onDeleteFile}/>)}
      </div>
      {files.length===0 && <div style={{background:'#fff',border:'1px solid var(--sitm-border)',borderRadius:12,padding:'40px 20px',textAlign:'center'}}><Sub>Nothing here yet. Make something and it will show up here.</Sub></div>}
    </div>
  </div>;
}
function FileCard({ file, go, toast, onDelete }) {
  const [h,setH] = React.useState(false);
  return <div onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)} style={{background:'#fff',border:'1px solid var(--sitm-border)',padding:18,borderRadius:12,boxShadow:h?'0 4px 14px rgba(62,71,97,.12)':'none',transition:'box-shadow .2s ease'}}>
    <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
      <Chip tone={file.out==='HTML'?'gold':'teal'}>{file.type}</Chip>
    </div>
    <div style={{fontSize:14.5,fontWeight:600,color:'var(--sitm-navy)',lineHeight:1.35}}>{file.name}</div>
    <div style={{fontSize:12,color:'var(--sitm-text)',marginTop:5}}>{file.pages} &middot; {file.date}</div>
    <div style={{display:'flex',gap:8,marginTop:14,alignItems:'center'}}>
      <Btn size="sm" icon="download" onClick={()=>toast && toast('Downloading '+file.name+'.'+(file.out==='HTML'?'html':'pdf'))}>{file.out==='HTML'?'Download':'Download PDF'}</Btn>
      <Btn size="sm" kind="ghost" icon="edit" onClick={()=>go('editor', {fromFile:file})}>Edit</Btn>
      <span style={{marginLeft:'auto',opacity:h?1:0,transition:'opacity .15s ease'}}>{onDelete && <DeleteBtn onClick={()=>onDelete(file)}/>}</span>
    </div>
  </div>;
}
Object.assign(window, { HomePage, FileCard, TypePreview });