// Shared UI bits: Logo, icons, Badge, Spinner, Footer, Sidebar, Modal shell, etc.

const { useEffect, useState, useMemo, useRef, useCallback } = React;

// ─── Logo ──────────────────────────────────────────────────────────────────────
// Ícone: FontAwesome magnifying-glass-chart, amarelo #FFD43B (mesmo do favicon).
function Logo({ size = 'md', mono = false }) {
  const dims = { sm: 20, md: 24, lg: 30, xl: 42 }[size] || 24;
  const text = { sm: 'text-base', md: 'text-lg', lg: 'text-2xl', xl: 'text-4xl' }[size] || 'text-lg';
  const color = mono ? '#1a1a1a' : '#FFD43B';
  return (
    <div className="flex items-center gap-2.5 select-none">
      <svg width={dims} height={dims} viewBox="0 0 512 512" fill="none" aria-hidden="true">
        <circle cx="200" cy="200" r="150" stroke={color} strokeWidth="44"/>
        <rect x="132" y="220" width="34" height="60"  rx="6" fill={color}/>
        <rect x="185" y="185" width="34" height="95"  rx="6" fill={color}/>
        <rect x="237" y="150" width="34" height="130" rx="6" fill={color}/>
        <line x1="310" y1="310" x2="450" y2="450" stroke={color} strokeWidth="56" strokeLinecap="round"/>
      </svg>
      <span className={`font-bold tracking-tightish ${text}`} style={{ color: '#1a1a1a' }}>
        Periciei
      </span>
    </div>
  );
}

// ─── Icons (minimal inline svg) ────────────────────────────────────────────────
const Icon = {
  Plus:    (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14" /></svg>,
  Search:  (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>,
  Home:    (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 11.5 12 4l9 7.5" /><path d="M5 10v10h14V10" /></svg>,
  Doc:     (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M7 3h8l5 5v13H7z" /><path d="M15 3v5h5" /></svg>,
  Coins:   (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><ellipse cx="12" cy="7" rx="8" ry="3" /><path d="M4 7v5c0 1.7 3.6 3 8 3s8-1.3 8-3V7" /><path d="M4 12v5c0 1.7 3.6 3 8 3s8-1.3 8-3v-5" /></svg>,
  Cog:     (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></svg>,
  Download:(p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3v12" /><path d="m7 10 5 5 5-5" /><path d="M5 21h14" /></svg>,
  Logout:  (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="m16 17 5-5-5-5" /><path d="M21 12H9" /></svg>,
  Menu:    (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M3 6h18M3 12h18M3 18h18" /></svg>,
  X:       (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="m6 6 12 12M18 6 6 18" /></svg>,
  ArrowR:  (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></svg>,
  Upload:  (p) => <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 19V8" /><path d="m6 13 6-6 6 6" /><path d="M5 21h14" /></svg>,
  Check:   (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m5 12 5 5 9-12" /></svg>,
  Alert:   (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 9v4" /><path d="M12 17h.01" /><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /></svg>,
  Info:    (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9" /><path d="M12 16v-4M12 8h.01" /></svg>,
  Pdf:     (p) => <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M7 3h8l5 5v13H7z" /><path d="M15 3v5h5" /><text x="9" y="17" fontSize="6" fontFamily="JetBrains Mono" fontWeight="700" fill="currentColor" stroke="none">PDF</text></svg>,
  Xlsx:    (p) => <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M7 3h8l5 5v13H7z" /><path d="M15 3v5h5" /><text x="9" y="17" fontSize="5.5" fontFamily="JetBrains Mono" fontWeight="700" fill="currentColor" stroke="none">XLS</text></svg>,
  Md:      (p) => <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M7 3h8l5 5v13H7z" /><path d="M15 3v5h5" /><text x="9.5" y="17" fontSize="6" fontFamily="JetBrains Mono" fontWeight="700" fill="currentColor" stroke="none">MD</text></svg>,
  Copy:    (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15V5a2 2 0 0 1 2-2h10" /></svg>,
};

// ─── Spinner ───────────────────────────────────────────────────────────────────
function Spinner({ size = 14, color = '#1e3a8a' }) {
  return (
    <svg className="inline-block animate-spin" width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke={color} strokeOpacity="0.18" strokeWidth="3" fill="none" />
      <path d="M12 3a9 9 0 0 1 9 9" stroke={color} strokeWidth="3" strokeLinecap="round" fill="none" />
    </svg>
  );
}

// ─── Badge ─────────────────────────────────────────────────────────────────────
const STATUS_LABEL = {
  QUEUED:     'Em fila',
  EXTRACTING: 'Extraindo PDF',
  COMPUTING:  'Calculando',
  DRAFTING:   'Redigindo',
  RENDERING:  'Renderizando',
  COMPLETE:   'Concluída',
  FAILED:     'Falhou',
};
const INPROGRESS = new Set(['EXTRACTING', 'COMPUTING', 'DRAFTING', 'RENDERING']);

function StatusBadge({ status, size = 'sm' }) {
  const sz = size === 'lg' ? 'px-3 py-1 text-[12.5px]' : 'px-2 py-0.5 text-[11.5px]';
  let cls, dot, pulse = false;
  if (status === 'COMPLETE') { cls = 'bg-ok-50 text-ok-700 border-ok-200'; dot = 'bg-ok-600'; }
  else if (status === 'FAILED') { cls = 'bg-danger-50 text-danger-700 border-danger-200'; dot = 'bg-danger-600'; }
  else if (status === 'QUEUED') { cls = 'bg-warn-50 text-warn-700 border-warn-200'; dot = 'bg-warn-600'; }
  else if (INPROGRESS.has(status)) { cls = 'bg-navy-50 text-navy-800 border-navy-200'; dot = 'bg-navy-800'; pulse = true; }
  else { cls = 'bg-ink-100 text-ink-700 border-ink-200'; dot = 'bg-ink-400'; }
  return (
    <span className={`inline-flex items-center gap-1.5 rounded-full border font-medium ${cls} ${sz}`}>
      <span className={`h-1.5 w-1.5 rounded-full ${dot} ${pulse ? 'pulse-soft' : ''}`} />
      {STATUS_LABEL[status] || status}
    </span>
  );
}

function ViabilityChip({ value, size = 'md' }) {
  if (!value) return <span className="text-ink-400 text-[12px]">—</span>;
  const sim = value === 'SIM';
  const sz = size === 'lg'
    ? 'px-3.5 py-1.5 text-[13px]'
    : 'px-2.5 py-0.5 text-[11.5px]';
  return sim ? (
    <span className={`inline-flex items-center gap-1.5 rounded-md border font-semibold tracking-wide ${sz} bg-ok-50 text-ok-700 border-ok-200`}>
      <Icon.Check /> VIÁVEL
    </span>
  ) : (
    <span className={`inline-flex items-center gap-1.5 rounded-md border font-semibold tracking-wide ${sz} bg-ink-100 text-ink-700 border-ink-200`}>
      INVIÁVEL
    </span>
  );
}

function TenantStatusBadge({ status }) {
  const map = {
    ACTIVE:    { cls: 'bg-ok-50 text-ok-700 border-ok-200',         label: 'Ativo' },
    TRIAL:     { cls: 'bg-warn-50 text-warn-700 border-warn-200',   label: 'Trial' },
    SUSPENDED: { cls: 'bg-danger-50 text-danger-700 border-danger-200', label: 'Suspenso' },
    CANCELLED: { cls: 'bg-ink-100 text-ink-700 border-ink-200',     label: 'Cancelado' },
  };
  const m = map[status] || map.ACTIVE;
  return <span className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11.5px] font-medium ${m.cls}`}>{m.label}</span>;
}

// ─── Buttons ──────────────────────────────────────────────────────────────────
function Button({ variant = 'primary', size = 'md', className = '', children, ...rest }) {
  const base = 'inline-flex items-center justify-center gap-2 font-medium rounded-md transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed select-none';
  const sizes = {
    sm: 'h-8 px-3 text-[13px]',
    md: 'h-9 px-4 text-[13.5px]',
    lg: 'h-11 px-5 text-[14.5px]',
  };
  const variants = {
    primary:   'bg-navy-800 text-white hover:bg-navy-900',
    secondary: 'bg-white text-ink-900 border border-ink-200 hover:border-ink-300 hover:bg-ink-50',
    ghost:     'text-ink-700 hover:bg-ink-100',
    danger:    'bg-white text-danger-700 border border-danger-200 hover:bg-danger-50',
    outline:   'bg-white text-navy-800 border border-navy-800/60 hover:bg-navy-50',
  };
  return (
    <button className={`${base} ${sizes[size]} ${variants[variant]} ${className}`} {...rest}>
      {children}
    </button>
  );
}

// ─── Inputs ────────────────────────────────────────────────────────────────────
function Field({ label, hint, error, children, suffix }) {
  return (
    <label className="block">
      {label && (
        <span className="block text-[12.5px] font-medium text-ink-700 mb-1.5">{label}</span>
      )}
      <div className="relative">
        {children}
        {suffix && <div className="absolute inset-y-0 right-2.5 flex items-center text-ink-400 text-[12px]">{suffix}</div>}
      </div>
      {hint && !error && <p className="mt-1.5 text-[12px] text-ink-500">{hint}</p>}
      {error && <p className="mt-1.5 text-[12px] text-danger-700">{error}</p>}
    </label>
  );
}

function TextInput({ className = '', ...rest }) {
  return (
    <input
      className={`w-full h-10 px-3 rounded-md border border-ink-200 bg-white text-[14px] text-ink-900 placeholder:text-ink-400 focus:border-navy-800 focus:ring-2 focus:ring-navy-800/15 transition-colors ${className}`}
      {...rest}
    />
  );
}

function Select({ className = '', children, ...rest }) {
  return (
    <select
      className={`w-full h-10 px-3 rounded-md border border-ink-200 bg-white text-[14px] text-ink-900 focus:border-navy-800 focus:ring-2 focus:ring-navy-800/15 transition-colors appearance-none pr-8 ${className}`}
      style={{
        backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27%236b6b6b%27><path d=%27M5.25 7.5 10 12.25 14.75 7.5z%27/></svg>")',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'right 8px center',
        backgroundSize: '16px',
      }}
      {...rest}
    >
      {children}
    </select>
  );
}

// ─── Sidebar / Topbar ──────────────────────────────────────────────────────────
function Sidebar({ current, onNavigate, tenant, user, usage, onLogout, isOpen, onClose }) {
  const isSuperadmin = user && user.role === 'SUPERADMIN';
  // SUPERADMIN acumula os dois chapéus: vê o admin de plataforma E o escritório dele.
  const items = isSuperadmin
    ? [
        { id: 'admin',     label: 'Painel admin',  icon: <Icon.Cog />,   group: 'PLATAFORMA' },
        { id: 'dashboard', label: 'Dashboard',     icon: <Icon.Home />,  group: 'ESCRITÓRIO' },
        { id: 'analises',  label: 'Análises',      icon: <Icon.Doc /> },
        { id: 'creditos',  label: 'Créditos',      icon: <Icon.Coins /> },
        { id: 'settings',  label: 'Configurações', icon: <Icon.Cog /> },
      ]
    : [
        { id: 'dashboard', label: 'Dashboard',     icon: <Icon.Home /> },
        { id: 'analises',  label: 'Análises',      icon: <Icon.Doc /> },
        { id: 'creditos',  label: 'Créditos',      icon: <Icon.Coins /> },
        { id: 'settings',  label: 'Configurações', icon: <Icon.Cog /> },
      ];
  return (
    <>
      {/* Backdrop só no mobile, quando o drawer está aberto */}
      {isOpen && (
        <div
          className="sm:hidden fixed inset-0 bg-ink-900/50 z-30 fade-in"
          onClick={onClose}
        />
      )}
      <aside className={`
        fixed sm:sticky inset-y-0 left-0 top-0 z-40 w-[260px] sm:w-[232px] h-full
        shrink-0 flex flex-col border-r border-ink-200 bg-white
        transform transition-transform duration-200 sm:transform-none
        ${isOpen ? 'translate-x-0' : '-translate-x-full sm:translate-x-0'}
      `}>
      <div className="px-5 pt-5 pb-4 border-b border-ink-100 flex items-center justify-between">
        <Logo size="md" />
        <button onClick={onClose} className="sm:hidden p-1 text-ink-500 hover:text-ink-900" aria-label="Fechar menu">
          <Icon.X />
        </button>
      </div>
      <div className="px-3 pt-3 pb-1 text-[11px] uppercase tracking-tracker text-ink-400 font-medium">
        Escritório
      </div>
      <div className="mx-3 mb-3 rounded-md border border-ink-200 px-3 py-2.5">
        <div className="text-[13px] font-semibold text-ink-900 leading-snug" title={tenant.name}>{tenant.name}</div>
        <div className="mt-1 flex items-center gap-2">
          <TenantStatusBadge status={tenant.status} />
        </div>
        {user && (
          <div className="mt-2 pt-2 border-t border-ink-100 text-[11.5px] text-ink-500 leading-snug">
            <div className="text-ink-700 font-medium truncate" title={user.full_name}>{user.full_name}</div>
            <div className="truncate" title={user.email}>{user.email}</div>
          </div>
        )}
      </div>
      <nav className="px-2 flex-1">
        {items.map((it, idx) => {
          const active = current === it.id || (current === 'analise-detalhe' && it.id === 'analises') || (current === 'comprar' && it.id === 'creditos');
          const groupHeader = it.group && (idx === 0 || items[idx - 1].group !== it.group);
          return (
            <React.Fragment key={it.id}>
              {groupHeader && (
                <div className={`px-3 ${idx === 0 ? 'pt-0' : 'pt-3'} pb-1 text-[10px] uppercase tracking-tracker text-ink-400 font-semibold`}>
                  {it.group}
                </div>
              )}
            <button
              onClick={() => onNavigate(it.id)}
              className={`w-full flex items-center gap-3 px-3 py-2 rounded-md text-[13.5px] transition-colors duration-200 ${
                active
                  ? 'bg-navy-50 text-navy-800 font-semibold'
                  : 'text-ink-700 hover:bg-ink-100'
              }`}
            >
              <span className={active ? 'text-navy-800' : 'text-ink-500'}>{it.icon}</span>
              {it.label}
            </button>
            </React.Fragment>
          );
        })}
      </nav>
      <div className="border-t border-ink-100 p-3">
        <div className="flex items-center justify-between text-[12px] text-ink-500 mb-1.5">
          <span>Saldo</span>
          <span className="tabular text-ink-900 font-semibold whitespace-nowrap">{usage.credit_balance} créditos</span>
        </div>
        <button
          onClick={onLogout}
          className="mt-3 w-full flex items-center justify-between text-[12.5px] text-ink-500 hover:text-ink-900 px-2 py-1.5 rounded-md hover:bg-ink-100 transition-colors"
        >
          <span>Sair</span>
          <Icon.Logout />
        </button>
      </div>
    </aside>
    </>
  );
}

function Topbar({ title, breadcrumb, right, onMenuClick }) {
  return (
    <div className="h-14 border-b border-ink-200 bg-white px-3 sm:px-6 flex items-center gap-2 sm:gap-4">
      {/* Burger só no mobile */}
      <button
        onClick={onMenuClick}
        className="sm:hidden p-2 -ml-1 rounded-md text-ink-700 hover:bg-ink-100 active:bg-ink-200 transition-colors"
        aria-label="Abrir menu"
      >
        <Icon.Menu />
      </button>
      <div className="min-w-0 flex-1">
        {breadcrumb && (
          <div className="text-[12px] text-ink-500 mb-0.5 flex items-center gap-1.5">{breadcrumb}</div>
        )}
        {title && <h1 className="text-[15px] sm:text-[16px] font-semibold text-ink-900 truncate">{title}</h1>}
      </div>
      <div className="flex items-center gap-2 sm:gap-3 shrink-0">{right}</div>
    </div>
  );
}

// ─── Footer legal ─────────────────────────────────────────────────────────────
function LegalFooter() {
  return (
    <footer className="border-t border-ink-200 bg-white shrink-0">
      <div className="px-3 sm:px-6 py-2 sm:py-2.5 text-[10px] sm:text-[10.5px] uppercase tracking-tracker text-ink-500 flex items-center gap-2 sm:gap-3 font-medium">
        <span className="inline-flex items-center gap-1.5 shrink-0">
          <span className="h-1.5 w-1.5 rounded-full bg-warn-600" />
          <span className="hidden sm:inline">Análise prévia sem validade jurídica</span>
          <span className="sm:hidden">Sem validade jurídica</span>
        </span>
        <span className="text-ink-300 shrink-0 hidden sm:inline">·</span>
        <span className="shrink-0 hidden sm:inline">Documento interno e comercial</span>
        <span className="text-ink-300 shrink-0 hidden lg:inline">·</span>
        <span className="hidden lg:inline truncate">Geração assistida por IA — confirme cálculos antes de protocolar</span>
        <span className="ml-auto text-ink-400 normal-case tracking-normal shrink-0">v1.0</span>
      </div>
    </footer>
  );
}

// ─── Modal shell ──────────────────────────────────────────────────────────────
function Modal({ open, onClose, children, width = 'max-w-xl', closeOnBack = true, label }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose?.(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center modal-back" aria-modal="true" role="dialog" aria-label={label}>
      <div className="absolute inset-0 bg-ink-900/40" onClick={closeOnBack ? onClose : undefined} />
      <div className={`relative bg-white rounded-lg shadow-raised w-full ${width} mx-4 max-h-[88vh] flex flex-col fade-in`}>
        {children}
      </div>
    </div>
  );
}

function ModalHeader({ title, subtitle, onClose }) {
  return (
    <div className="px-6 py-4 border-b border-ink-200 flex items-start justify-between gap-4">
      <div>
        <h2 className="text-[15.5px] font-semibold text-ink-900">{title}</h2>
        {subtitle && <p className="mt-0.5 text-[12.5px] text-ink-500">{subtitle}</p>}
      </div>
      <button onClick={onClose} className="text-ink-400 hover:text-ink-900 transition-colors p-1 -mr-1" aria-label="Fechar">
        <Icon.X />
      </button>
    </div>
  );
}

// ─── Stat tile ────────────────────────────────────────────────────────────────
function StatTile({ label, value, hint, accent }) {
  return (
    <div className="bg-white rounded-lg border border-ink-200 px-5 py-4">
      <div className="text-[11.5px] uppercase tracking-tracker text-ink-500 font-medium">{label}</div>
      <div className={`mt-1.5 text-[28px] leading-none font-bold tabular ${accent || 'text-ink-900'}`}>{value}</div>
      {hint && <div className="mt-2 text-[12px] text-ink-500">{hint}</div>}
    </div>
  );
}

// expose
Object.assign(window, {
  Logo, Icon, Spinner, StatusBadge, ViabilityChip, TenantStatusBadge,
  Button, Field, TextInput, Select,
  Sidebar, Topbar, LegalFooter, Modal, ModalHeader, StatTile,
  STATUS_LABEL, INPROGRESS,
});
