// AcademiaDental — MINSAL guides
function MinsalScreen({ session, setRoute }) {
  const D = window.AD_DATA;
  const colorBg = (c) => ({teal:'var(--teal-pale)',purple:'var(--purple-pale)',amber:'var(--amber-pale)',blue:'var(--blue-pale)'}[c]||'var(--gray-100)');
  const colorFg = (c) => ({teal:'var(--teal)',purple:'var(--purple)',amber:'var(--amber)',blue:'var(--blue)'}[c]||'var(--gray-600)');
  return (
    <>
      <TopBar back={{onClick:()=>setRoute('home'),label:'Volver'}} title="Guías MINSAL"
        right={<span className="badge b-blue">Chile</span>}/>
      <div className="content-scroll">
        <div className="alert alert-blue" style={{marginBottom:14}}>Todas las guías GES y normativas MINSAL de odontología, con preguntas integradas y actualización automática.</div>

        <div className="sec-label">Guías GES</div>
        {D.minsal.filter(g => g.kind === 'GES').map((g) => (
          <button key={g.id} className="guide-row" style={{width:'100%',textAlign:'left'}} onClick={()=>window.AD_TOAST.show('Próximamente: ' + g.name)}>
            <div className="guide-icon" style={{background:colorBg(g.color),color:colorFg(g.color)}}>{g.kind}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:500}}>{g.name}</div>
              <div className="small muted">{g.meta}</div>
            </div>
            <div className="s-dot green"/>
          </button>
        ))}

        <div className="sec-label">Normativas y marco legal</div>
        {D.minsal.filter(g => g.kind !== 'GES').map((g) => (
          <button key={g.id} className="guide-row" style={{width:'100%',textAlign:'left'}} onClick={()=>window.AD_TOAST.show('Próximamente: ' + g.name)}>
            <div className="guide-icon" style={{background:colorBg(g.color),color:colorFg(g.color)}}>{g.kind}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:500}}>{g.name}</div>
              <div className="small muted">{g.meta}</div>
            </div>
          </button>
        ))}

        <div className="alert alert-teal" style={{marginTop:14}}>
          <div className="alert-title">Actualización automática</div>
          Las guías se sincronizan con minsal.cl. Nuevas versiones aparecen marcadas con "Actualizado".
        </div>
      </div>
    </>
  );
}

Object.assign(window, { MinsalScreen });