// ============================================================
// Evidia · Mockups v2 · Recriação limpa do dashboard do Prontuário
// (seção 07) — sem os cards flutuantes, tela completa, não cortada.
// Fiel ao produto do site (evidiasaude.com.br), accent violeta.
// ============================================================

const V = "#6d44e0";          // accent violeta do produto
const PortalMock = () => {
  const si = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  const nav = [
    { t: "Pacientes", d: <svg {...si}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> },
    { t: "Fila de Espera", d: <svg {...si}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18"/></svg> },
    { t: "Triagem", d: <svg {...si}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21l8.84-8.61a5.5 5.5 0 0 0 0-7.78z"/></svg> },
    { t: "Prescrições", d: <svg {...si}><path d="m10.5 20.5 10-10a2.83 2.83 0 0 0-4-4l-10 10"/><path d="m3 11 6 6"/><path d="M3 3l6 6"/></svg> },
    { t: "Alertas", d: <svg {...si}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> },
    { t: "Notificações", d: <svg {...si}><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg> },
    { t: "Calculadores", d: <svg {...si}><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M8 6h8M8 10h8M8 14h2M8 18h2"/></svg> },
    { t: "Protocolos", d: <svg {...si}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg> },
    { t: "Relatórios", d: <svg {...si}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg> },
    { t: "Ranking", d: <svg {...si}><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21L7 19M14 14.66V17c0 .55.47.98.97 1.21L17 19M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg> },
  ];
  const stats = [
    { k: "Atendimentos hoje", v: "12", bg: "#f4effe", c: V, icon: <svg {...si} stroke={V}><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg> },
    { k: "Atendimentos semana", v: "47", bg: "#eef4fe", c: "#2a6fdb", icon: <svg {...si} stroke="#2a6fdb"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> },
    { k: "Tempo médio consulta", v: "53 min", bg: "#fef6e9", c: "#c2870f", icon: <svg {...si} stroke="#c2870f"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> },
    { k: "Pacientes no mês", v: "156", bg: "#edf9f1", c: "#1f8a5b", icon: <svg {...si} stroke="#1f8a5b"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg> },
  ];
  const bars = [["Qui", 4], ["Sex", 8], ["Sáb", 5], ["Dom", 6], ["Seg", 9], ["Ter", 12], ["Qua", 3]];
  const proc = [["I10", 0.92, "12 atendimentos"], ["J06", 0.66, "8 atendimentos"], ["M54", 0.34, "3 atendimentos"]];
  const card = { background: "#fff", border: "1px solid #eceef2", borderRadius: 14 };
  const lbl = { fontFamily: "var(--font-eyebrow)", fontSize: 9.5, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "#8b93a3" };

  return (
    <div style={{ width: 1248, display: "grid", gridTemplateColumns: "236px 1fr", background: "#fff", fontFamily: "var(--font-body)", color: "#1e2433" }}>
      {/* SIDEBAR */}
      <aside style={{ borderRight: "1px solid #eceef2", padding: "22px 18px", display: "flex", flexDirection: "column", background: "#fff" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={V} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4.8 2.3A.3.3 0 1 0 5 2.3M8 15a6 6 0 0 0 12 0v-3"/><path d="M8 15v-4a4 4 0 0 0-4-4"/><circle cx="20" cy="10" r="2"/></svg>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 700, color: V }}>Prontuário</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 12px", border: "1px solid #e6e1f8", background: "#f7f4fe", borderRadius: 10, marginBottom: 22 }}>
          <span style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 600, color: "#3a3550", whiteSpace: "nowrap" }}>
            <span style={{ width: 18, height: 18, borderRadius: "50%", background: V, display: "inline-block" }}></span>
            Dr. Roberto Silva
          </span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8b93a3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
        </div>
        <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {nav.map((n, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "9px 12px", borderRadius: 9, color: "#5c6477", fontSize: 13.5 }}>
              <span style={{ color: "#9aa1b1", display: "flex" }}>{n.d}</span>{n.t}
            </div>
          ))}
        </nav>
        <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 10, paddingTop: 16, borderTop: "1px solid #eceef2" }}>
          <span style={{ width: 32, height: 32, borderRadius: "50%", background: "#ede8fb", color: V, fontSize: 12, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center" }}>DR</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600 }}>Dr. Roberto Silva</div>
            <div style={{ fontSize: 11, color: "#8b93a3" }}>Médico</div>
          </div>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8b93a3" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        </div>
      </aside>

      {/* MAIN */}
      <main style={{ background: "#f7f8fb", padding: "26px 30px", overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 22 }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 700, color: "#1e2433" }}>Dashboard</div>
            <div style={{ fontSize: 13.5, color: "#8b93a3", marginTop: 4 }}>Visão geral do dia terça-feira, 14 de abril</div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 16px", ...card, fontSize: 13, color: "#5c6477", fontWeight: 600 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#5c6477" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
            Atualizar
          </div>
        </div>

        {/* stat cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 18 }}>
          {stats.map((s, i) => (
            <div key={i} style={{ background: s.bg, borderRadius: 14, padding: "16px 18px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
                <span style={lbl}>{s.k}</span>{s.icon}
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 700, color: "#1e2433" }}>{s.v}</div>
            </div>
          ))}
        </div>

        {/* agendamentos + fila */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 18 }}>
          <div style={{ ...card, padding: "18px 20px" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 700, marginBottom: 14 }}>Próximos Agendamentos</div>
            {[["Maria Santos", "14:30"], ["João Oliveira", "15:00"], ["Ana Clara", "15:45"]].map((r, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, color: "#5c6477", padding: "7px 0", whiteSpace: "nowrap" }}><span>{r[0]}</span><span style={{ color: "#8b93a3" }}>{r[1]}</span></div>
            ))}
          </div>
          <div style={{ ...card, padding: "18px 20px" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 700, marginBottom: 14 }}>Fila de Espera</div>
            {[["Pedro Alves", "5 min"], ["Sofia Costa", "12 min"]].map((r, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, color: "#5c6477", padding: "7px 0", whiteSpace: "nowrap" }}><span>{r[0]}</span><span style={{ color: "#8b93a3" }}>{r[1]}</span></div>
            ))}
          </div>
        </div>

        {/* chart + procedimentos */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <div style={{ ...card, padding: "18px 20px" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 700, marginBottom: 16 }}>Atendimentos por Dia</div>
            <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 10, height: 118 }}>
              {bars.map(([d, v], i) => (
                <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
                  <span style={{ fontSize: 11, fontWeight: 700, color: "#5c6477" }}>{v}</span>
                  <div style={{ width: "100%", maxWidth: 30, height: (v / 12) * 92, background: V, borderRadius: "5px 5px 0 0", opacity: 0.9 }}></div>
                  <span style={{ fontSize: 10.5, color: "#9aa1b1" }}>{d}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ ...card, padding: "18px 20px" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 700, marginBottom: 16 }}>Procedimentos Mais Frequentes</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              {proc.map(([c, w, n], i) => (
                <div key={i}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, color: "#5c6477", marginBottom: 7, whiteSpace: "nowrap" }}><span style={{ fontWeight: 600 }}>{c}</span><span style={{ color: "#9aa1b1" }}>{n}</span></div>
                  <div style={{ height: 8, borderRadius: 999, background: "#eceef2" }}><div style={{ width: (w * 100) + "%", height: "100%", borderRadius: 999, background: V, opacity: 0.85 }}></div></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

Object.assign(window, { PortalMock });