/* ============================================================
   EDUCARE — Biblioteca de recursos
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;

  function Biblioteca() {
    const [view, setView] = useState("grid");
    return (
      <>
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">Biblioteca</span></div>
        <div className="page-head">
          <div>
            <h1><Icon name="book" size={26} /> Biblioteca de Recursos</h1>
            <p className="sub">Atividades, cards e e-books para enriquecer suas intervenções.</p>
          </div>
          <div className="view-toggle">
            <button className={view === "grid" ? "on" : ""} onClick={() => setView("grid")} aria-label="Grade"><Icon name="dashboard" size={17} /></button>
            <button className={view === "list" ? "on" : ""} onClick={() => setView("list")} aria-label="Lista"><Icon name="clipboardList" size={17} /></button>
          </div>
        </div>

        <div className="lib-grid">
          {window.RESOURCES.map((r, i) => (
            <div className="res-card" key={i}>
              <div className="res-cover" style={{ "--c1": r.c1, "--c2": r.c2 }}>
                <span className="rc-kicker">EDUCARE</span>
                <div>
                  <div className="rc-title">{r.title}</div>
                  <div className="rc-sub">{r.sub}</div>
                </div>
                <span className="rc-brand">RECURSO CLÍNICO</span>
                {r.pro && <div className="res-lock"><span className="ll"><Icon name="lock" size={20} /></span></div>}
              </div>
              <div className="res-body">
                <div className="rb-top">
                  <h4>{r.title} · {r.sub}</h4>
                  {r.pro && <span className="res-pro">PRO</span>}
                </div>
                <span className="res-cat">{r.cat}</span>
                {r.pro
                  ? <button className="btn btn-ghost btn-sm"><Icon name="lock" size={15} /> Desbloquear com Pro</button>
                  : <button className="btn btn-primary btn-sm"><Icon name="arrowRight" size={15} /> Abrir recurso</button>}
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }

  window.Biblioteca = Biblioteca;
})();