/* Wood OS — Portal do Cliente (variante pública) */
const { useState: useStatePortal, useEffect: useEffectPortal, useMemo: useMemoPortal } = React;

/* ============================================================
   ClientPortal
   ============================================================ */
const ClientPortal = ({ navigate }) => {
  // Pick which client to show. Set by sessionStorage when the admin opens the
  // portal from the Clientes drawer; otherwise default to the showcase client.
  const clientId = (typeof sessionStorage !== "undefined" && sessionStorage.getItem("portalClientId")) || "CLI-001";
  const client = MOCK.clients.find(c => c.id === clientId) || MOCK.clients[0];
  const content = MOCK.portalContent[client.id] || MOCK.portalContent["CLI-001"];

  // Find the active project for this client
  const project = useMemoPortal(() => {
    const matches = MOCK.projects.filter(p => client.projects.includes(p.id));
    return matches.find(p => p.status === "producao" || p.status === "analise" || p.status === "pronto") || matches[0];
  }, [client]);

  const quote = useMemoPortal(() => MOCK.quotes.find(q => q.clientId === client.id && (q.status === "aprovado" || q.status === "convertido")), [client]);

  const receivables = useMemoPortal(() => MOCK.financial.receivables.filter(r => r.clientId === client.id), [client]);
  const totalContract = receivables.reduce((s, r) => s + r.value, 0);
  const totalReceived = receivables.filter(r => r.status === "recebido").reduce((s, r) => s + r.value, 0);
  const totalPending = totalContract - totalReceived;

  const [tab, setTab] = useStatePortal("progresso");

  return (
    <div className="wood-page" style={{ minHeight: "100vh", overflowX: "hidden" }}>
      <AnimatedBackground intensity="high" variant="blueprint" />

      {/* Portal header */}
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        background: "rgba(11,10,7,0.78)",
        backdropFilter: "blur(20px) saturate(160%)",
        borderBottom: "1px solid var(--wood-border)",
      }}>
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
          <div className="flex items-center gap-4">
            <button className="wood-btn wood-btn-ghost wood-btn-icon-sm" onClick={() => navigate("dashboard")} title="Voltar ao painel admin">
              <Icon name="chevron-left" size={14} />
            </button>
            <WoodLogo size={32} textSize={15} />
            <span className="wood-badge" style={{ background: "rgba(56,189,248,0.14)", color: "#38BDF8", padding: "2px 9px" }}>
              <Icon name="users" size={10} /> Portal do Cliente
            </span>
          </div>
          <div className="flex items-center gap-3">
            <div className="text-right md-hide">
              <div className="text-xs text-3 uppercase tracking-widest" style={{ fontWeight: 500 }}>VOCÊ ESTÁ LOGADO COMO</div>
              <div className="text-sm" style={{ fontWeight: 600 }}>{client.name}</div>
            </div>
            <Avatar name={client.name} size={38} />
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8" style={{ position: "relative", zIndex: 1 }}>
        {/* Welcome hero */}
        <div className="wood-card wood-veneer relative overflow-hidden p-7 mb-7 slide-up" style={{ borderColor: "rgba(16,185,129,0.28)" }}>
          <div style={{
            position: "absolute", inset: 0, opacity: 0.5,
            background: content.coverGradient,
            pointerEvents: "none"
          }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 30%, rgba(11,10,7,0.92))" }} />
          <div className="grid grid-cols-12 gap-6 items-center relative">
            <div className="col-span-7">
              <div className="text-xs uppercase tracking-widest text-amber mb-2" style={{ fontWeight: 600 }}>
                {project?.client?.toUpperCase() || client.name.toUpperCase()} · {project?.address || `${client.address.neighborhood}, ${client.address.city}`}
              </div>
              <h1 className="text-3xl font-semibold tracking-tighter mb-3 text-balance">
                Olá, <em className="font-display italic" style={{ fontWeight: 400, color: "var(--amber-bright)" }}>{client.name.split(" ")[0]}</em>. Sua obra está em <em className="font-display italic" style={{ fontWeight: 400, color: "var(--amber-bright)" }}>{STATUS_MAP[project?.status]?.label?.toLowerCase() || "andamento"}</em>.
              </h1>
              <p className="text-2 text-md max-w-2xl text-pretty">
                Acompanhe em tempo real o progresso da sua obra <b>{project?.name}</b>, veja fotos do processo, aprove decisões pendentes e converse direto com a equipe.
              </p>
            </div>
            <div className="col-span-5">
              <div className="wood-card p-5 relative" style={{ background: "rgba(0,0,0,0.42)", borderColor: "rgba(16,185,129,0.32)" }}>
                <div className="text-xs uppercase tracking-widest text-3 mb-1" style={{ fontWeight: 500 }}>PROGRESSO ATUAL</div>
                <div className="flex items-baseline gap-2 mb-3">
                  <div className="text-5xl font-semibold tracking-tighter wood-gradient-text" style={{ fontVariantNumeric: "tabular-nums" }}>{project?.progress || 0}%</div>
                  <div className="text-md text-3">concluído</div>
                </div>
                <AnimatedProgress value={project?.progress || 0} max={100} height={8} />
                <div className="flex items-center justify-between text-xs text-3 mt-3">
                  <span className="flex items-center gap-1.5"><Icon name="calendar" size={11} /> Entrega prevista</span>
                  <span style={{ fontWeight: 600, color: "var(--cream)" }}>{project ? fmtDateLong(project.deadline) : "—"}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div className="wood-card p-2 mb-6 flex items-center gap-1 overflow-x-auto" style={{ background: "rgba(0,0,0,0.32)" }}>
          {[
            { id: "progresso",   label: "Progresso",        icon: "activity" },
            { id: "galeria",     label: "Galeria",          icon: "layers", count: content.gallery.length },
            { id: "aprovacoes",  label: "Aprovações",       icon: "check-circle", count: content.approvals.filter(a => a.status === "pending").length, urgent: true },
            { id: "financeiro",  label: "Pagamentos",       icon: "dollar" },
            { id: "documentos",  label: "Documentos",       icon: "file-text" },
            { id: "conversa",    label: "Conversa",         icon: "send", count: content.messages.length },
          ].map(t => (
            <button key={t.id} onClick={() => setTab(t.id)}
              className="px-4 py-2.5 rounded-lg flex items-center gap-2 text-sm flex-shrink-0"
              style={{
                background: tab === t.id ? "rgba(16,185,129,0.16)" : "transparent",
                border: `1px solid ${tab === t.id ? "rgba(16,185,129,0.45)" : "transparent"}`,
                color: tab === t.id ? "var(--amber-bright)" : "var(--text-2)",
                cursor: "pointer", fontWeight: tab === t.id ? 600 : 500,
                transition: "all 0.18s"
              }}>
              <Icon name={t.icon} size={13} /> {t.label}
              {t.count > 0 && (
                <span className="wood-badge" style={{
                  background: t.urgent ? "rgba(245,158,11,0.18)" : "rgba(255,255,255,0.08)",
                  color: t.urgent ? "#F59E0B" : "var(--text-3)",
                  padding: "1px 6px", fontSize: 10, fontVariantNumeric: "tabular-nums"
                }}>{t.count}</span>
              )}
            </button>
          ))}
        </div>

        {tab === "progresso"  && <PortalProgress content={content} project={project} />}
        {tab === "galeria"    && <PortalGallery gallery={content.gallery} />}
        {tab === "aprovacoes" && <PortalApprovals approvals={content.approvals} />}
        {tab === "financeiro" && <PortalFinancial receivables={receivables} total={totalContract} received={totalReceived} pending={totalPending} quote={quote} />}
        {tab === "documentos" && <PortalDocuments quote={quote} project={project} />}
        {tab === "conversa"   && <PortalMessages messages={content.messages} clientName={client.name} />}
      </main>

      {/* Footer */}
      <footer className="max-w-7xl mx-auto px-6 py-8 mt-8" style={{ borderTop: "1px solid var(--wood-border-soft)" }}>
        <div className="flex items-center justify-between flex-wrap gap-4">
          <div className="flex items-center gap-3">
            <WoodLogo size={24} textSize={13} />
            <span className="text-xs text-3">Sistema de gestão de marcenarias</span>
          </div>
          <div className="text-xs text-3 flex items-center gap-4 flex-wrap">
            <span className="flex items-center gap-1.5"><Icon name="shield-check" size={11} /> Conexão segura</span>
            <span className="flex items-center gap-1.5"><Icon name="support" size={11} /> contato@marcenarianorte.com.br</span>
          </div>
        </div>
      </footer>
    </div>
  );
};

/* ============================================================
   PortalProgress — timeline of milestones
   ============================================================ */
const PortalProgress = ({ content, project }) => {
  return (
    <div className="grid grid-cols-12 gap-5">
      <div className="col-span-8">
        <div className="wood-card p-6">
          <div className="flex items-center justify-between mb-5">
            <div>
              <div className="text-md font-semibold tracking-tight">Linha do tempo</div>
              <div className="text-xs text-3">cada etapa do processo da sua obra</div>
            </div>
            <span className="wood-badge wood-badge-success">
              <span className="wood-dot wood-dot-pulse" style={{ background: "var(--success)", color: "var(--success)" }} />
              Em andamento
            </span>
          </div>

          <div className="relative">
            <div style={{ position: "absolute", left: 19, top: 18, bottom: 18, width: 2, background: "linear-gradient(180deg, var(--amber) 0%, var(--wood-border) 65%, var(--wood-border-soft))" }} />
            {content.timeline.map((e, i) => {
              const isDone = e.status === "done";
              const isCurrent = e.status === "current";
              const color = isDone ? "var(--amber-bright)" : isCurrent ? "var(--success)" : "var(--text-4)";
              const bgColor = isDone ? "rgba(16,185,129,0.18)" : isCurrent ? "rgba(34,197,94,0.18)" : "rgba(115,115,115,0.12)";
              const border = isDone ? "rgba(16,185,129,0.45)" : isCurrent ? "rgba(34,197,94,0.55)" : "var(--wood-border)";
              return (
                <div key={i} className="flex gap-4 relative pb-5 slide-up" style={{ animationDelay: `${i * 60}ms` }}>
                  <div style={{ width: 40, flexShrink: 0 }}>
                    <div style={{
                      width: 40, height: 40, borderRadius: "50%",
                      background: bgColor,
                      border: `1.5px solid ${border}`,
                      color, position: "relative", zIndex: 2,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      boxShadow: isCurrent ? "0 0 0 4px rgba(34,197,94,0.1), 0 0 16px rgba(34,197,94,0.3)" : "var(--shadow-sm)"
                    }}>
                      <Icon name={isDone ? "check" : e.icon} size={16} />
                    </div>
                  </div>
                  <div className="flex-1 pt-1.5">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-md" style={{ fontWeight: 600, color: isCurrent ? "var(--success)" : isDone ? "var(--text)" : "var(--text-3)" }}>{e.title}</span>
                      {isCurrent && <span className="wood-badge wood-badge-success" style={{ padding: "1px 7px", fontSize: 10 }}>AGORA</span>}
                    </div>
                    <div className="text-sm text-3 mb-1 text-pretty">{e.description}</div>
                    <div className="text-xs text-4">{fmtDateLong(e.date)}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="col-span-4 flex flex-col gap-5">
        <div className="wood-card p-5">
          <div className="text-md font-semibold tracking-tight mb-3">Resumo da obra</div>
          {[
            { label: "Obra",        value: project?.name, icon: "hammer" },
            { label: "Endereço",    value: project?.address, icon: "map-pin" },
            { label: "Equipe",      value: project?.team, icon: "users" },
            { label: "Início",      value: "10 abr 2026", icon: "calendar" },
            { label: "Entrega",     value: project ? fmtDateLong(project.deadline) : "—", icon: "flag", highlight: true },
          ].map(d => (
            <div key={d.label} className="flex items-start gap-3 py-2.5" style={{ borderBottom: "1px solid var(--wood-border-soft)" }}>
              <Icon name={d.icon} size={14} className="text-3 mt-0.5" />
              <div className="flex-1 min-w-0">
                <div className="text-xs text-4 uppercase tracking-widest" style={{ fontWeight: 500 }}>{d.label}</div>
                <div className="text-sm" style={{ fontWeight: 500, color: d.highlight ? "var(--amber-bright)" : "var(--text)" }}>{d.value || "—"}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="wood-card p-5" style={{ background: "rgba(16,185,129,0.06)", borderColor: "rgba(16,185,129,0.2)" }}>
          <div className="flex items-center gap-2 text-amber mb-2">
            <Icon name="info" size={14} />
            <div className="text-xs uppercase tracking-widest" style={{ fontWeight: 600 }}>DICA</div>
          </div>
          <p className="text-sm text-2 text-pretty">
            Você pode aprovar decisões e conversar com a equipe direto aqui. Cada confirmação economiza dias na entrega final.
          </p>
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   PortalGallery — visual cards of each progress photo
   ============================================================ */
const PortalGallery = ({ gallery }) => {
  const gradients = {
    "from-emerald-700 to-emerald-900":  "linear-gradient(135deg, #047857, #022C22)",
    "from-amber-600 to-amber-900":      "linear-gradient(135deg, #B45309, #78350F)",
    "from-emerald-600 to-teal-900":     "linear-gradient(135deg, #059669, #134E4A)",
    "from-purple-700 to-indigo-900":    "linear-gradient(135deg, #6D28D9, #312E81)",
    "from-cyan-700 to-blue-900":        "linear-gradient(135deg, #0E7490, #1E3A8A)",
    "from-orange-700 to-red-900":       "linear-gradient(135deg, #C2410C, #7F1D1D)",
  };
  return (
    <div className="grid grid-cols-3 gap-5">
      {gallery.map((g, i) => (
        <div key={g.id} className="wood-card overflow-hidden slide-up wood-card-hover cursor-pointer" style={{ animationDelay: `${i * 50}ms`, padding: 0 }}>
          <div style={{
            height: 220,
            background: gradients[g.tone] || "linear-gradient(135deg, #1E293B, #0F172A)",
            position: "relative", display: "flex", alignItems: "flex-end", padding: 16
          }}>
            <div style={{
              position: "absolute", top: 0, right: 0, padding: 12, display: "flex", gap: 6
            }}>
              <span className="wood-badge" style={{ background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)", color: "var(--amber-bright)", padding: "2px 8px", border: "1px solid rgba(16,185,129,0.4)" }}>
                <Icon name="check-circle" size={10} /> Marco
              </span>
            </div>
            {/* Diagonal blueprint hatch overlay */}
            <div style={{
              position: "absolute", inset: 0,
              backgroundImage: "repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,0.04) 18px 19px)",
              pointerEvents: "none"
            }} />
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6))",
              pointerEvents: "none"
            }} />
            <div className="relative">
              <div className="text-xs uppercase tracking-widest text-amber" style={{ fontWeight: 600 }}>{g.milestone}</div>
              <div className="text-md font-semibold tracking-tight">{g.label}</div>
            </div>
          </div>
          <div className="p-3 flex items-center justify-between">
            <span className="text-xs text-3 flex items-center gap-1.5"><Icon name="calendar" size={11} /> {fmtDateLong(g.date)}</span>
            <button className="wood-btn wood-btn-ghost wood-btn-icon-sm"><Icon name="external" size={12} /></button>
          </div>
        </div>
      ))}
    </div>
  );
};

/* ============================================================
   PortalApprovals — list of pending and approved sign-offs
   ============================================================ */
const PortalApprovals = ({ approvals }) => {
  const pending = approvals.filter(a => a.status === "pending");
  const approved = approvals.filter(a => a.status === "approved");
  return (
    <>
      {pending.length > 0 && (
        <div className="wood-card p-5 mb-5" style={{ background: "rgba(245,158,11,0.04)", borderColor: "rgba(245,158,11,0.25)" }}>
          <div className="flex items-center gap-3 mb-4">
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "rgba(245,158,11,0.16)", color: "var(--warning)", border: "1px solid rgba(245,158,11,0.4)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="alert" size={18} />
            </div>
            <div>
              <div className="text-md font-semibold tracking-tight">Aguardando sua decisão</div>
              <div className="text-xs text-warning">{pending.length} {pending.length === 1 ? "aprovação pendente" : "aprovações pendentes"} — sua confirmação destrava as próximas etapas</div>
            </div>
          </div>
          <div className="flex flex-col gap-3">
            {pending.map(a => (
              <div key={a.id} className="wood-card p-4">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1">
                    <div className="text-md font-semibold tracking-tight mb-1">{a.title}</div>
                    <div className="text-sm text-3 text-pretty">{a.description}</div>
                    <div className="text-xs text-warning mt-2 flex items-center gap-1.5"><Icon name="clock" size={11} /> Prazo até {fmtDateLong(a.due)}</div>
                  </div>
                  <div className="flex items-center gap-2 flex-shrink-0">
                    <button className="wood-btn wood-btn-ghost" style={{ color: "var(--error)" }}><Icon name="x" size={13} /> Solicitar mudança</button>
                    <button className="wood-btn wood-btn-primary"><Icon name="check" size={13} /> Aprovar</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {approved.length > 0 && (
        <div className="wood-card p-5">
          <div className="text-md font-semibold tracking-tight mb-3">Aprovações concluídas</div>
          <div className="flex flex-col gap-2">
            {approved.map(a => (
              <div key={a.id} className="flex items-center gap-3 px-3 py-3 rounded-lg" style={{ background: "rgba(34,197,94,0.05)", border: "1px solid rgba(34,197,94,0.15)" }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: "rgba(34,197,94,0.16)", color: "var(--success)", border: "1px solid rgba(34,197,94,0.3)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name="check" size={14} />
                </div>
                <div className="flex-1">
                  <div className="text-sm" style={{ fontWeight: 600 }}>{a.title}</div>
                  <div className="text-xs text-3">{a.description}</div>
                </div>
                <div className="text-xs text-success">{fmtDate(a.date)}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </>
  );
};

/* ============================================================
   PortalFinancial
   ============================================================ */
const PortalFinancial = ({ receivables, total, received, pending, quote }) => {
  const percent = total ? (received / total) * 100 : 0;
  return (
    <>
      <div className="wood-card wood-veneer p-6 mb-5">
        <div className="grid grid-cols-3 gap-5 mb-5">
          <div>
            <div className="text-xs text-3 uppercase tracking-widest mb-1" style={{ fontWeight: 500 }}>VALOR TOTAL DO CONTRATO</div>
            <div className="text-2xl font-semibold tracking-tight wood-gradient-text">{fmtBRL(total)}</div>
          </div>
          <div>
            <div className="text-xs text-3 uppercase tracking-widest mb-1" style={{ fontWeight: 500 }}>PAGO</div>
            <div className="text-2xl font-semibold tracking-tight" style={{ color: "var(--success)" }}>{fmtBRL(received)}</div>
          </div>
          <div>
            <div className="text-xs text-3 uppercase tracking-widest mb-1" style={{ fontWeight: 500 }}>A PAGAR</div>
            <div className="text-2xl font-semibold tracking-tight" style={{ color: "var(--warning)" }}>{fmtBRL(pending)}</div>
          </div>
        </div>
        <AnimatedProgress value={percent} max={100} height={10} />
        <div className="text-xs text-3 mt-2 text-right">{percent.toFixed(1)}% pago</div>
      </div>

      <div className="text-sm font-semibold mb-2">Parcelas</div>
      <div className="flex flex-col gap-2">
        {receivables.map(r => {
          const meta = r.status === "recebido" ? { label: "Pago", bg: "rgba(34,197,94,0.14)", fg: "#22C55E", icon: "check" }
                     : r.status === "atrasado" ? { label: "Em atraso", bg: "rgba(239,68,68,0.14)", fg: "#EF4444", icon: "alert" }
                     : { label: "Pendente", bg: "rgba(56,189,248,0.12)", fg: "#38BDF8", icon: "clock" };
          return (
            <div key={r.id} className="wood-card p-4 flex items-center gap-4">
              <div style={{ width: 40, height: 40, borderRadius: 10, background: meta.bg, color: meta.fg, border: "1px solid var(--wood-border)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={meta.icon} size={16} />
              </div>
              <div className="flex-1">
                <div className="text-md" style={{ fontWeight: 600 }}>{r.description}</div>
                <div className="text-xs text-3">Vencimento {fmtDateLong(r.dueDate)} · {r.method}</div>
              </div>
              <div className="text-right">
                <div className="text-md font-semibold tracking-tight" style={{ fontVariantNumeric: "tabular-nums" }}>{fmtBRL(r.value)}</div>
                <span className="wood-badge" style={{ background: meta.bg, color: meta.fg, padding: "2px 8px" }}>{meta.label}</span>
              </div>
              {r.status !== "recebido" && (
                <button className="wood-btn wood-btn-primary"><Icon name="dollar" size={13} /> Pagar</button>
              )}
            </div>
          );
        })}
      </div>
    </>
  );
};

/* ============================================================
   PortalDocuments
   ============================================================ */
const PortalDocuments = ({ quote, project }) => {
  const docs = [
    quote && { name: `Orçamento ${quote.id}.pdf`, type: "PDF", size: "284 KB", date: quote.createdAt, icon: "file-text", color: "#34D399" },
    { name: "Contrato_assinado.pdf",        type: "PDF", size: "612 KB", date: "2026-04-12", icon: "file-text", color: "#38BDF8" },
    { name: "Plantas_baixas.dwg",           type: "DWG", size: "2.4 MB", date: "2026-04-15", icon: "ruler", color: "#A78BFA" },
    { name: "Memorial_descritivo.pdf",     type: "PDF", size: "428 KB", date: "2026-04-18", icon: "file-text", color: "#F472B6" },
    { name: "Cronograma_executivo.pdf",     type: "PDF", size: "192 KB", date: "2026-04-22", icon: "file-text", color: "#F59E0B" },
    project && { name: "Termo_de_garantia.pdf",     type: "PDF", size: "168 KB", date: "2026-04-22", icon: "file-text", color: "#22D3EE" },
  ].filter(Boolean);

  return (
    <div className="grid grid-cols-2 gap-4">
      {docs.map((d, i) => (
        <div key={i} className="wood-card wood-card-hover p-4 cursor-pointer flex items-center gap-4">
          <div style={{
            width: 52, height: 52, borderRadius: 11,
            background: `${d.color}14`, color: d.color, border: `1px solid ${d.color}44`,
            display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0
          }}>
            <Icon name={d.icon} size={22} />
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-sm truncate" style={{ fontWeight: 600 }}>{d.name}</div>
            <div className="text-xs text-3">{d.type} · {d.size} · enviado em {fmtDate(d.date)}</div>
          </div>
          <button className="wood-btn wood-btn-secondary"><Icon name="external" size={13} /> Baixar</button>
        </div>
      ))}
    </div>
  );
};

/* ============================================================
   PortalMessages
   ============================================================ */
const PortalMessages = ({ messages, clientName }) => {
  return (
    <div className="grid grid-cols-12 gap-5">
      <div className="col-span-8">
        <div className="wood-card p-5">
          <div className="flex items-center justify-between mb-5 pb-4" style={{ borderBottom: "1px solid var(--wood-border-soft)" }}>
            <div className="flex items-center gap-3">
              <Avatar name="Eduardo Marques" size={38} />
              <div>
                <div className="text-md font-semibold tracking-tight">Marcenaria Norte</div>
                <div className="text-xs text-success flex items-center gap-1.5">
                  <span className="wood-dot wood-dot-pulse" style={{ background: "var(--success)", color: "var(--success)" }} />
                  Online agora
                </div>
              </div>
            </div>
            <button className="wood-btn wood-btn-ghost wood-btn-icon-sm"><Icon name="more" size={14} /></button>
          </div>

          <div className="flex flex-col gap-3 mb-5" style={{ minHeight: 360 }}>
            {messages.map((m, i) => (
              <div key={i} className={`flex gap-3 ${m.from === "client" ? "flex-row-reverse" : ""}`}>
                <Avatar name={m.author} size={32} />
                <div style={{ maxWidth: "70%" }}>
                  <div className={`flex items-center gap-2 mb-1 ${m.from === "client" ? "justify-end" : ""}`}>
                    <span className="text-xs" style={{ fontWeight: 600 }}>{m.author}</span>
                    <span className="text-xs text-4">· {m.role}</span>
                  </div>
                  <div className="px-4 py-3 rounded-lg text-sm" style={{
                    background: m.from === "client" ? "rgba(16,185,129,0.16)" : "rgba(0,0,0,0.28)",
                    border: `1px solid ${m.from === "client" ? "rgba(16,185,129,0.3)" : "var(--wood-border-soft)"}`,
                    color: "var(--text)",
                  }}>
                    {m.text}
                  </div>
                  <div className={`text-xs text-4 mt-1 ${m.from === "client" ? "text-right" : ""}`}>{m.date}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="flex items-center gap-2 pt-4" style={{ borderTop: "1px solid var(--wood-border-soft)" }}>
            <button className="wood-btn wood-btn-ghost wood-btn-icon-sm"><Icon name="paperclip" size={14} /></button>
            <input className="wood-input flex-1" placeholder="Digite uma mensagem…" />
            <button className="wood-btn wood-btn-primary"><Icon name="send" size={13} /> Enviar</button>
          </div>
        </div>
      </div>

      <div className="col-span-4">
        <div className="wood-card p-5 mb-5">
          <div className="text-md font-semibold tracking-tight mb-3">Sua equipe</div>
          {[
            { name: "Eduardo Marques", role: "Gerente operacional", active: true },
            { name: "Ricardo Tavares", role: "Líder de marcenaria", active: true },
            { name: "Vanderlei Souza", role: "Logística", active: false },
          ].map(p => (
            <div key={p.name} className="flex items-center gap-3 py-2.5" style={{ borderBottom: "1px solid var(--wood-border-soft)" }}>
              <div style={{ position: "relative" }}>
                <Avatar name={p.name} size={36} />
                {p.active && <span style={{ position: "absolute", bottom: 0, right: 0, width: 10, height: 10, borderRadius: "50%", background: "var(--success)", border: "2px solid var(--wood-bg)" }} />}
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-sm" style={{ fontWeight: 600 }}>{p.name}</div>
                <div className="text-xs text-3">{p.role}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="wood-card p-5" style={{ background: "rgba(56,189,248,0.06)", borderColor: "rgba(56,189,248,0.2)" }}>
          <div className="flex items-center gap-2 text-info mb-2">
            <Icon name="info" size={14} />
            <div className="text-xs uppercase tracking-widest" style={{ fontWeight: 600 }}>RESPOSTA RÁPIDA</div>
          </div>
          <p className="text-sm text-2 text-pretty">
            Nossa equipe responde em até 2h em dias úteis. Para urgências, use o WhatsApp: <b className="text-amber">(21) 99876-5432</b>.
          </p>
        </div>
      </div>
    </div>
  );
};

/* expose */
Object.assign(window, { ClientPortal });