/* Parent → Documents: files the school has shared (reads jl_docs). */
function DocsScreen({ onNav, onBack }) {
  const SEED = [
    { name:'Family Handbook 2026–27', cat:'Policies', type:'PDF', size:'2.4 MB', when:'Jun 1', icon:'book-open', tint:'var(--blue-100)', ic:'var(--blue-500)' },
    { name:'June Newsletter', cat:'Newsletters', type:'PDF', size:'860 KB', when:'May 30', icon:'newspaper', tint:'var(--success-100)', ic:'var(--success-500)' },
    { name:'Bus Route Map — Fall', cat:'Transportation', type:'PDF', size:'1.1 MB', when:'May 28', icon:'map', tint:'var(--gold-100)', ic:'var(--gold-600)' },
  ];
  const [docs, setDocs] = React.useState([]);
  React.useEffect(() => {
    JLBackend.seed({ docs: SEED });
    setDocs(JLBackend.get('docs', SEED));
    return JLBackend.subscribe('docs', v => setDocs(v || []));
  }, []);

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title="Documents" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:11, background:'var(--color-grad-hero)', borderRadius:16, padding:'16px 18px', color:'#fff', boxShadow:'var(--shadow-navy)' }}>
          <span style={{ width:44, height:44, borderRadius:12, background:'rgba(255,255,255,.16)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="folder" size={22} color="var(--gold-400)" /></span>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:19, fontWeight:800 }}>{docs.length} shared {docs.length===1?'document':'documents'}</div>
            <div style={{ fontSize:12.5, color:'rgba(255,255,255,.8)' }}>Published by your school</div>
          </div>
        </div>

        <SectionLabel>{jlT('l_recent') || 'Recent'}</SectionLabel>
        <div style={cardWrap}>
          {docs.length===0 && <div style={{ padding:'20px', textAlign:'center', color:'var(--gray-400)', fontSize:13.5 }}>No documents shared yet.</div>}
          {docs.map((d,i) => (
            <React.Fragment key={i}>
              {i>0 && <Divider />}
              <button onClick={()=>jlToast('Opening ' + d.name, { icon:'download' })} style={{ width:'100%', display:'flex', alignItems:'center', gap:12, padding:'13px 14px', border:0, background:'transparent', cursor:'pointer', fontFamily:'var(--font-sans)', textAlign:'left' }}>
                <span style={{ width:40, height:40, borderRadius:11, background:d.tint||'var(--blue-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={d.icon||'file-text'} size={19} color={d.ic||'var(--blue-500)'} /></span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{d.name}</div>
                  <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{d.cat}{d.type?' · '+d.type:''}{d.size?' · '+d.size:''}{d.when?' · '+d.when:''}</div>
                </div>
                <Icon name="download" size={18} color="var(--gray-400)" />
              </button>
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { DocsScreen });