/* ============================================================
   EDUCARE — Screens: Login, Dashboard, Placeholder
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon, Logo = window.Logo;

  /* Cena ilustrada da psicopedagogia: livro (registro/anamnese) com broto
     (desenvolvimento da criança) e faíscas (insight da IA). Self-contained. */
  function AuthArt() {
    return (
      <svg className="auth-illu" viewBox="0 0 360 280" fill="none" role="img"
        aria-label="Livro com broto e ideias — aprendizado e desenvolvimento">
        <defs>
          <linearGradient id="bkCover" x1="54" y1="150" x2="306" y2="216" gradientUnits="userSpaceOnUse">
            <stop stopColor="#14B8A6" /><stop offset="1" stopColor="#0F766E" />
          </linearGradient>
          <linearGradient id="bkLeaf" x1="146" y1="76" x2="180" y2="120" gradientUnits="userSpaceOnUse">
            <stop stopColor="#34D6BF" /><stop offset="1" stopColor="#14B8A6" />
          </linearGradient>
        </defs>

        <circle cx="180" cy="120" r="100" fill="#0F766E" fillOpacity="0.06" />
        <ellipse cx="180" cy="222" rx="118" ry="11" fill="#0F766E" fillOpacity="0.12" />

        {/* capa do livro */}
        <path d="M52 158 L180 132 L308 158 L308 214 Q308 221 301 219 L180 202 L59 219 Q52 221 52 214 Z" fill="url(#bkCover)" />
        {/* páginas */}
        <path d="M63 164 L180 142 L180 201 L67 197 Q61 197 61 191 L61 170 Q61 165 63 164 Z" fill="#FFFDF8" />
        <path d="M297 164 L180 142 L180 201 L293 197 Q299 197 299 191 L299 170 Q299 165 297 164 Z" fill="#FBF4E8" />
        {/* linhas de texto */}
        <g stroke="#D9CFBE" strokeWidth="3" strokeLinecap="round">
          <path d="M80 172 L166 156" /><path d="M84 182 L166 167" /><path d="M88 192 L150 181" />
          <path d="M280 172 L194 156" /><path d="M276 182 L194 167" /><path d="M272 192 L210 181" />
        </g>
        {/* lombada */}
        <path d="M180 142 L180 201" stroke="#0C5F58" strokeWidth="3.5" strokeLinecap="round" />

        {/* broto */}
        <path d="M180 142 C 177 116 177 96 180 80" stroke="#14B8A6" strokeWidth="6" strokeLinecap="round" />
        <path d="M180 116 C 150 116 136 98 146 80 C 168 84 181 100 180 118 Z" fill="url(#bkLeaf)" />
        <path d="M180 104 C 208 102 222 84 213 66 C 192 72 179 88 180 106 Z" fill="#0F9B8B" />
        <circle cx="180" cy="74" r="9.5" fill="#FB923C" />
        <circle cx="177" cy="71" r="3" fill="#FFD9B8" />

        {/* faíscas / ideias */}
        <path d="M252 84 Q252 98 266 98 Q252 98 252 112 Q252 98 238 98 Q252 98 252 84 Z" fill="#FB923C" />
        <path d="M108 104 Q108 114 118 114 Q108 114 108 124 Q108 114 98 114 Q108 114 108 104 Z" fill="#34D6BF" />
        <path d="M206 44 Q206 52 214 52 Q206 52 206 60 Q206 52 198 52 Q206 52 206 44 Z" fill="#FFD9B8" />
      </svg>
    );
  }

  const AUTH_FEATS = [
    { icon: "clipboardHeart", t: "Prontuário inteligente" },
    { icon: "sparkles", t: "Planejamento com IA" },
    { icon: "clipboardList", t: "Avaliações guiadas" },
  ];

  function authErrMsg(e) {
    const m = (e && e.message ? e.message : String(e || "")).toLowerCase();
    // Erro de REDE/SERVIDOR (não é credencial): "Failed to fetch" (Chrome),
    // "NetworkError" (Firefox), "Load failed" (Safari) ou TypeError de fetch.
    // Acontece quando o servidor está fora do ar (ex.: projeto Supabase pausado),
    // sem internet, DNS falhando ou bloqueio de rede.
    if (m.includes("failed to fetch") || m.includes("networkerror") || m.includes("load failed") ||
        (e && e.name === "TypeError" && m.includes("fetch"))) {
      return "Não foi possível conectar ao servidor. Verifique sua conexão e tente novamente em instantes.";
    }
    if (m.includes("invalid login")) return "E-mail ou senha inválidos.";
    if (m.includes("email not confirmed")) return "E-mail ainda não confirmado. Verifique sua caixa de entrada.";
    if (m.includes("already registered") || m.includes("already been registered")) return "Este e-mail já possui conta. Faça login.";
    if (m.includes("password") && m.includes("6")) return "A senha deve ter pelo menos 6 caracteres.";
    if (m.includes("rate limit")) return "Muitas tentativas. Aguarde um instante e tente novamente.";
    return (e && e.message) || "Não foi possível concluir. Tente novamente.";
  }

  /* A landing page manda quem quer testar direto para o cadastro:
     https://sistemaeducare.vercel.app/?cadastro=1 — sem isso a pessoa cai
     no login e ainda precisa achar o botão "Cadastre-se grátis". */
  function querCadastro() {
    try {
      return new URLSearchParams(window.location.search).get("cadastro") === "1";
    } catch (e) {
      return false;
    }
  }

  function LoginScreen({ onLogin }) {
    const [show, setShow] = useState(false);
    const [mode, setMode] = useState(querCadastro() ? "signup" : "signin"); // signin | signup
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [name, setName] = useState("");
    const [busy, setBusy] = useState(false);
    const [err, setErr] = useState("");
    const [notice, setNotice] = useState("");

    async function submit(e) {
      e.preventDefault();
      setErr(""); setNotice("");
      if (!window.sb) { setErr("Supabase não configurado. Copie app/env.example.js para app/env.js."); return; }
      if (!email.trim() || !password) { setErr("Preencha e-mail e senha."); return; }
      if (mode === "signup" && !name.trim()) { setErr("Informe seu nome."); return; }
      setBusy(true);
      try {
        if (mode === "signin") {
          const { error } = await window.sb.auth.signInWithPassword({ email: email.trim(), password });
          if (error) throw error;
          onLogin && onLogin();
        } else {
          const { data, error } = await window.sb.auth.signUp({
            email: email.trim(), password,
            options: { data: { name: name.trim() } },
          });
          if (error) throw error;
          if (data.session) { onLogin && onLogin(); }
          else { setNotice("Conta criada! Verifique seu e-mail para confirmar e depois faça login."); setMode("signin"); }
        }
      } catch (e2) {
        // Log detalhado para diagnóstico (nome, mensagem, status HTTP se houver).
        console.error("[Auth] Falha ao " + (mode === "signin" ? "entrar" : "cadastrar") + ":", {
          name: e2 && e2.name, message: e2 && e2.message, status: e2 && e2.status, error: e2,
        });
        setErr(authErrMsg(e2));
      } finally {
        setBusy(false);
      }
    }

    const isSignup = mode === "signup";
    return (
      <div className="auth-split">
        <aside className="auth-brand">
          <span className="ab-blob b1" aria-hidden="true" />
          <span className="ab-blob b2" aria-hidden="true" />
          <span className="ab-grain" aria-hidden="true" />

          <header className="ab-brandrow">
            <Logo size={38} />
            <span className="ab-word">Educare</span>
          </header>

          <div className="ab-main">
            <span className="ab-eyebrow">Plataforma para psicopedagogos</span>
            <h2 className="ab-title">Cuide do desenvolvimento.<br /><span>A Educare cuida dos dados.</span></h2>
            <p className="ab-lede">Prontuário, anamnese, planejamento com IA e avaliações reunidos num fluxo pensado para a prática clínica psicopedagógica.</p>

            <div className="ab-stage">
              <span className="ab-token tk1" aria-hidden="true">A</span>
              <span className="ab-token tk2" aria-hidden="true">1</span>
              <span className="ab-token tk3" aria-hidden="true"><Icon name="sparkles" size={20} /></span>
              <div className="ab-card"><AuthArt /></div>
            </div>
          </div>

          <ul className="ab-feats">
            {AUTH_FEATS.map((f) => (
              <li key={f.t}><span className="abf-ic"><Icon name={f.icon} size={17} /></span>{f.t}</li>
            ))}
          </ul>
        </aside>

        <main className="auth-pane">
          <div className="auth-card">
            <div className="auth-head">
              <Logo size={50} />
              <h1 className="login-title">{isSignup ? "Crie sua conta" : "Acesse sua conta"}</h1>
              <p className="login-sub">{isSignup ? "Comece a cuidar dos seus pacientes com a Educare." : "Entre para continuar cuidando dos seus pacientes com a Educare."}</p>
            </div>

            <form onSubmit={submit}>
              {isSignup && (
                <div className="field">
                  <label>Nome</label>
                  <div className="input-shell">
                    <Icon name="users" size={19} />
                    <input type="text" placeholder="Seu nome" value={name} onChange={(e) => setName(e.target.value)} autoComplete="name" />
                  </div>
                </div>
              )}

              <div className="field">
                <label>E-mail</label>
                <div className="input-shell">
                  <Icon name="mail" size={19} />
                  <input type="email" placeholder="seu@email.com" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" />
                </div>
              </div>

              <div className="field">
                <div className="row-between" style={{ marginBottom: 7 }}>
                  <label style={{ margin: 0 }}>Senha</label>
                  {!isSignup && <a className="link" href="#" onClick={(e) => e.preventDefault()}>Esqueceu a senha?</a>}
                </div>
                <div className="input-shell">
                  <Icon name="lock" size={19} />
                  <input type={show ? "text" : "password"} placeholder="••••••••" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete={isSignup ? "new-password" : "current-password"} />
                  <button type="button" className="icon-btn-plain" onClick={() => setShow(!show)} aria-label="Mostrar senha">
                    <Icon name={show ? "eyeOff" : "eye"} size={19} />
                  </button>
                </div>
              </div>

              {err && <p className="form-err" role="alert" style={{ display: "flex", alignItems: "center", gap: 7, color: "#EF4444", fontWeight: 700, fontSize: 13.5, margin: "2px 0 8px" }}><Icon name="x" size={15} /> {err}</p>}
              {notice && <p role="status" style={{ display: "flex", alignItems: "center", gap: 7, color: "#0F766E", fontWeight: 700, fontSize: 13.5, margin: "2px 0 8px" }}><Icon name="clipboardCheck" size={15} /> {notice}</p>}

              <button type="submit" className="btn btn-primary btn-block" style={{ marginTop: 6 }} disabled={busy}>
                {busy ? (isSignup ? "Criando…" : "Entrando…") : (isSignup ? "Criar conta" : "Entrar")} <Icon name="arrowRight" size={18} />
              </button>
            </form>

            <div className="divider">{isSignup ? "já tem conta?" : "novo por aqui?"}</div>
            <button className="btn btn-ghost btn-block" type="button" onClick={() => { setErr(""); setNotice(""); setMode(isSignup ? "signin" : "signup"); }}>
              {isSignup ? "Fazer login" : "Cadastre-se grátis"}
            </button>

            <p className="login-foot" style={{ display: "flex", gap: 7, justifyContent: "center", alignItems: "center" }}>
              <Icon name="lock" size={14} style={{ color: "var(--text-3)" }} />
              <span style={{ fontSize: 12.5, color: "var(--text-3)" }}>Dados de saúde protegidos conforme a LGPD</span>
            </p>
            <p style={{ textAlign: "center", fontSize: 12, color: "var(--text-3)", marginTop: 10 }}>
              Desenvolvido por <b style={{ fontWeight: 700 }}>JuFlow Digital</b> © 2026
            </p>
          </div>
        </main>
      </div>
    );
  }

  const PILLARS = [
    { icon: "clipboardHeart", label: "Prontuário", desc: "O hub do paciente: anamnese, avaliações, sessões e evolução num só lugar.", c: "var(--primary)", bg: "var(--primary-soft)" },
    { icon: "folderHeart",    label: "Anamnese",   desc: "Histórico completo da criança com formulário clínico guiado.", c: "var(--accent-strong)", bg: "var(--accent-soft)" },
    { icon: "sparkles",       label: "Planejamento com IA", desc: "Planos personalizados gerados em segundos a partir dos dados.", c: "var(--primary)", bg: "var(--primary-soft)" },
    { icon: "clipboardList",  label: "Avaliações", desc: "Triagens de TDAH, TEA, discalculia e mais, com insights da IA.", c: "var(--accent-strong)", bg: "var(--accent-soft)" },
  ];

  function Dashboard({ onNavigate, showBanner, onDismissBanner }) {
    // Abre no dashboard completo quando já há pacientes; senão, tela de boas-vindas.
    const [mode, setMode] = useState(() => (window.PATIENTS && window.PATIENTS.length > 0 ? "active" : "empty"));

    if (mode === "active") return <DashboardActive onNavigate={onNavigate} onBack={() => setMode("empty")} showBanner={showBanner} onDismissBanner={onDismissBanner} />;

    return (
      <>
        {showBanner && (
          <div className="banner">
            <span className="bi"><Icon name="mail" size={20} /></span>
            <span>Seu e-mail ainda não foi verificado.</span>
            <button className="pill-btn">Verificar e-mail</button>
            <button className="x" onClick={onDismissBanner} aria-label="Fechar"><Icon name="x" size={16} /></button>
          </div>
        )}

        <div className="welcome">
          <div className="wave">👋</div>
          <h2>Bem-vindo à Educare!</h2>
          <p>Comece cadastrando um paciente. A partir daí, a Educare gera planejamentos completos em segundos.</p>

          <button className="cta-primary" onClick={() => onNavigate("pacientes", { mode: "new" })}>
            <span className="ci"><Icon name="plusCircle" size={24} /></span>
            <span className="ct">
              <b>Cadastrar meu primeiro paciente</b>
              <span>Leva menos de 2 minutos</span>
            </span>
          </button>

          <button className="cta-secondary" onClick={() => setMode("active")}>
            <span className="ci"><Icon name="sparkles" size={22} /></span>
            <span className="ct">
              <b>Explorar com paciente de exemplo</b>
              <span>Veja a IA em ação antes de inserir seus dados</span>
            </span>
          </button>

          <button className="text-link" onClick={() => setMode("active")}>Explorar a plataforma por conta própria</button>
        </div>

        <div className="pillars-h">POR ONDE A EDUCARE TE AJUDA</div>
        <div className="pillars">
          {PILLARS.map((p) => (
            <div className="pillar" key={p.label}>
              <div className="pi" style={{ background: p.bg, color: p.c }}><Icon name={p.icon} size={22} /></div>
              <b>{p.label}</b>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
      </>
    );
  }

  /* ---- Dashboard ATIVO (com paciente de exemplo) ---- */
  const DASH_MOOD = { 5: "😄", 4: "🙂", 3: "😐", 2: "😕", 1: "😣" };
  const DOW = ["DOM", "SEG", "TER", "QUA", "QUI", "SEX", "SÁB"];
  const MON = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];

  function Spark({ pts, color }) {
    if (!pts || pts.length < 2) return null;
    const W = 92, H = 30, max = Math.max.apply(null, pts), min = Math.min.apply(null, pts);
    const x = (i) => i / (pts.length - 1) * W;
    const y = (v) => (max === min ? H / 2 : H - 3 - ((v - min) / (max - min)) * (H - 6));
    const d = pts.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(" ");
    return (
      <svg className="spark" width={W} height={H} viewBox={`0 0 ${W} ${H}`} aria-hidden="true">
        <path d={`${d} L${W} ${H} L0 ${H} Z`} fill={color} opacity="0.12" />
        <path d={d} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    );
  }

  function Ring({ pct, color }) {
    const R = 40, C = 2 * Math.PI * R, off = C * (1 - Math.max(0, Math.min(1, pct / 100)));
    return (
      <svg width="104" height="104" viewBox="0 0 104 104" className="ring-svg">
        <circle cx="52" cy="52" r={R} fill="none" stroke="var(--surface-3)" strokeWidth="9" />
        <circle cx="52" cy="52" r={R} fill="none" stroke={color} strokeWidth="9" strokeLinecap="round" strokeDasharray={C} strokeDashoffset={off} transform="rotate(-90 52 52)" />
      </svg>
    );
  }

  function DashboardActive({ onNavigate, onBack, showBanner, onDismissBanner }) {
    /* A data de hoje vinha fixa como "2026-06-04", herança dos dados de
       demonstração: o painel mostrava sempre 0 sessões hoje e listava
       como "próximas" sessões que já tinham passado. */
    const hojeISO = window.todayISO();
    const ativos = window.PATIENTS.filter((p) => p.status === "ativo").length;
    const upcoming = window.EVENTS
      .filter((e) => !e.allDay && e.date >= hojeISO && (e.type === "agendado" || e.type === "confirmado"))
      .sort((a, b) => (a.date + a.start).localeCompare(b.date + b.start))
      .slice(0, 5);
    const recent = window.ATEND.slice(0, 4);
    const brl = (n) => "R$ " + (Number(n) || 0).toLocaleString("pt-BR");

    const hoje = window.EVENTS.filter((e) => !e.allDay && e.date === hojeISO && (e.type === "agendado" || e.type === "confirmado"));
    const confirmadas = upcoming.filter((e) => e.type === "confirmado").length;
    const receita = (window.PAYMENTS || []).filter((p) => p.status === "pago").reduce((s, p) => s + (Number(p.value) || 0), 0);
    const avgMood = window.ATEND.length ? window.ATEND.reduce((s, a) => s + a.mood, 0) / window.ATEND.length : 3;
    const moodMax = Math.max.apply(null, [5, 4, 3, 2, 1].map((mv) => window.ATEND.filter((a) => a.mood === mv).length).concat([1]));
    const recMax = Math.max.apply(null, (window.FIN_MONTHLY || [{ receita: 1 }]).map((m) => m.receita).concat([1]));
    const KPIS = [
      { label: "Pacientes ativos", value: ativos, delta: "+2 no mês", up: true, icon: "users", c: "var(--primary)", bg: "var(--primary-soft)", spark: [3, 4, 4, 5, 6, 6, ativos] },
      { label: "Sessões na semana", value: upcoming.length, delta: "+1", up: true, icon: "calendar", c: "var(--accent-strong)", bg: "var(--accent-soft)", spark: [2, 3, 3, 4, 4, 5, upcoming.length] },
      { label: "Receita do mês", value: brl(receita), delta: "+12%", up: true, icon: "wallet", c: "var(--primary)", bg: "var(--primary-soft)", spark: (window.FIN_MONTHLY || []).map((m) => m.receita) },
      { label: "Atendimentos no mês", value: window.ATEND.length, delta: "+3", up: true, icon: "clipboardCheck", c: "var(--accent-strong)", bg: "var(--accent-soft)", spark: [4, 5, 5, 6, 7, 7, window.ATEND.length] },
    ];

    const SHORTCUTS = [
      { label: "Nova anamnese", icon: "folderHeart", c: "var(--primary)", bg: "var(--primary-soft)", go: () => onNavigate("pacientes") },
      { label: "Planejamento IA", icon: "sparkles", c: "var(--accent-strong)", bg: "var(--accent-soft)", go: () => onNavigate("planejamentos") },
      { label: "Nova avaliação", icon: "clipboardList", c: "var(--primary)", bg: "var(--primary-soft)", go: () => onNavigate("avaliacoes") },
      { label: "Registrar atendimento", icon: "clipboardCheck", c: "var(--accent-strong)", bg: "var(--accent-soft)", go: () => onNavigate("atendimentos", { mode: "new" }) },
    ];

    return (
      <>
        {showBanner && (
          <div className="banner">
            <span className="bi"><Icon name="mail" size={20} /></span>
            <span>Seu e-mail ainda não foi verificado.</span>
            <button className="pill-btn">Verificar e-mail</button>
            <button className="x" onClick={onDismissBanner} aria-label="Fechar"><Icon name="x" size={16} /></button>
          </div>
        )}

        <div className="dash-hero">
          <div className="dh-text">
            <span className="dh-eyebrow">Quinta-feira, 4 de junho de 2026</span>
            <h1>Olá, {(window.__USER && window.__USER.name ? window.__USER.name.split(" ")[0] : "bem-vindo(a)")} 👋</h1>
            <p>Aqui está o resumo da sua semana — <b>{upcoming.length} sessões</b> à frente e <b>{ativos} pacientes ativos</b>.</p>
            <div className="dh-cta">
              <button className="btn btn-primary btn-sm" onClick={() => onNavigate("atendimentos", { mode: "new" })}><Icon name="plus" size={16} /> Novo atendimento</button>
              <button className="dh-link" onClick={() => onNavigate("agenda")}><Icon name="calendar" size={15} /> Ver agenda</button>
              <button className="dh-link" onClick={onBack}>Tela de boas-vindas</button>
            </div>
          </div>
          <div className="dh-pills">
            <div className="dh-pill"><span>{hoje.length}</span>sessões hoje</div>
            <div className="dh-pill"><span>{confirmadas}</span>confirmadas</div>
            <div className="dh-pill"><span>{brl(receita)}</span>recebido</div>
          </div>
        </div>

        <div className="dash-kpis">
          {KPIS.map((k) => (
            <div className="kpi" key={k.label}>
              <div className="kpi-top">
                <span className="kpi-ic" style={{ background: k.bg, color: k.c }}><Icon name={k.icon} size={18} /></span>
                <span className={"kpi-delta" + (k.up ? " up" : " down")}>{k.up ? "▲" : "▼"} {k.delta}</span>
              </div>
              <div className="kpi-val">{k.value}</div>
              <div className="kpi-lbl">{k.label}</div>
              <Spark pts={k.spark} color={k.c} />
            </div>
          ))}
        </div>

        <div className="dash-charts">
          <div className="dash-card">
            <div className="dc-head"><b><Icon name="chart" size={18} /> Evolução da receita</b><button className="link" onClick={() => onNavigate("financeiro")}>Financeiro ›</button></div>
            <div className="dbars">
              {(window.FIN_MONTHLY || []).map((m) => (
                <div className="dbar-col" key={m.m}>
                  <div className="dbar-track"><i style={{ height: (m.receita / recMax * 100) + "%" }} title={brl(m.receita)}></i></div>
                  <span>{m.m}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="dash-card">
            <div className="dc-head"><b><Icon name="activity" size={18} /> Humor nos atendimentos</b></div>
            <div className="dmood">
              <div className="dmood-ring"><Ring pct={avgMood / 5 * 100} color="var(--primary)" /><div className="dmood-c"><b>{DASH_MOOD[Math.round(avgMood)]}</b><span>{avgMood.toFixed(1)}/5</span></div></div>
              <div className="dmood-bars">
                {[5, 4, 3, 2, 1].map((mv) => {
                  const n = window.ATEND.filter((a) => a.mood === mv).length;
                  return (
                    <div className="dmood-row" key={mv}>
                      <span className="dm-emo">{DASH_MOOD[mv]}</span>
                      <div className="dm-track"><i style={{ width: (n / moodMax * 100) + "%" }}></i></div>
                      <span className="dm-n">{n}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        <div className="dash-cols">
          <div className="dash-card">
            <div className="dc-head">
              <b><Icon name="calendar" size={18} /> Próximas sessões</b>
              <button className="link" onClick={() => onNavigate("agenda")}>Ver agenda ›</button>
            </div>
            {upcoming.map((e, i) => {
              const p = window.PATIENTS.find((x) => x.id === e.pid);
              const d = new Date(e.date + "T00:00:00");
              const st = window.STATUS[e.type === "confirmado" ? "ativo" : "avaliacao"];
              return (
                <button className="sess-row" key={i} onClick={() => p && onNavigate("pacientes", { mode: "detail", id: p.id })}>
                  <div className="sr-when"><b>{d.getDate()}</b><span>{MON[d.getMonth()]} · {DOW[d.getDay()]}</span></div>
                  {p && <span className={"avatar sm " + p.color}>{p.initials}</span>}
                  <div className="sr-info"><b>{e.title}</b><span>{e.start} · {e.end}</span></div>
                  <span className={"tag " + (e.type === "confirmado" ? "ok" : "warn")}><i className="d"></i>{e.type === "confirmado" ? "Confirmado" : "Agendado"}</span>
                </button>
              );
            })}
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div>
              <div className="pillars-h" style={{ margin: "0 0 12px", textAlign: "left" }}>ATALHOS RÁPIDOS</div>
              <div className="shortcut-grid">
                {SHORTCUTS.map((s) => (
                  <button className="shortcut" key={s.label} onClick={s.go}>
                    <span className="sc-ic" style={{ background: s.bg, color: s.c }}><Icon name={s.icon} size={20} /></span>
                    <b>{s.label}</b>
                  </button>
                ))}
              </div>
            </div>
            <div className="dash-card">
              <div className="dc-head"><b><Icon name="activity" size={18} /> Atividade recente</b></div>
              {recent.map((a, i) => {
                const p = window.PATIENTS.find((x) => x.id === a.pid);
                return (
                  <div className="act-row" key={i}>
                    <span className={"avatar sm " + p.color}>{p.initials}</span>
                    <div className="ar-info"><b>{p.name.split(" ")[0]} {p.name.split(" ")[1]?.[0]}.</b><span>{a.focus}</span></div>
                    <span style={{ fontSize: 18 }}>{DASH_MOOD[a.mood]}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </>
    );
  }

  function Placeholder({ title, icon, crumb }) {
    return (
      <>
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">{crumb || title}</span></div>
        <div className="ph">
          <div className="pbox">
            <span className="picon"><Icon name={icon || "sparkles"} size={28} /></span>
            <h2>{title}</h2>
            <p>Esta tela faz parte do próximo passo da construção. Vamos montá-la na sequência — tela por tela.</p>
          </div>
        </div>
      </>
    );
  }

  window.LoginScreen = LoginScreen;
  window.Dashboard = Dashboard;
  window.Placeholder = Placeholder;
})();