/* global React */
/* Freight AI — shared UI: icons, sidebar, topbar, activity panel, agent components */

/* ============== Icon set ============== */
window.Icon = function Icon({ name, size = 16, stroke = 1.75, color = 'currentColor', fill = 'none' }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill, stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'dashboard':   return <svg {...p}><rect x="3" y="3" width="8" height="9" rx="2"/><rect x="13" y="3" width="8" height="5" rx="2"/><rect x="13" y="10" width="8" height="11" rx="2"/><rect x="3" y="14" width="8" height="7" rx="2"/></svg>;
    case 'demand':      return <svg {...p}><path d="M4 5h13l-1.5 3L17 11H4z"/><path d="M4 5v14"/><circle cx="9" cy="20" r="1.5"/></svg>;
    case 'supply':      return <svg {...p}><rect x="2" y="6" width="13" height="11" rx="1"/><path d="M15 9h4l3 4v4h-7"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>;
    case 'planning':    return <svg {...p}><path d="M3 3v18h18"/><path d="M7 14l4-4 3 3 6-7"/><circle cx="11" cy="10" r="1" fill={color}/><circle cx="14" cy="13" r="1" fill={color}/></svg>;
    case 'operations':  return <svg {...p}><path d="M21 8l-9-5-9 5v8l9 5 9-5z"/><path d="M3 8l9 5 9-5M12 13v9"/></svg>;
    case 'search':      return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case 'bell':        return <svg {...p}><path d="M6 8a6 6 0 0 1 12 0c0 6 2 8 2 8H4s2-2 2-8"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>;
    case 'menu':        return <svg {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'plus':        return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'check':       return <svg {...p}><path d="M5 12l5 5L20 6"/></svg>;
    case 'check-circle':return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></svg>;
    case 'x':           return <svg {...p}><path d="M18 6L6 18M6 6l12 12"/></svg>;
    case 'chev-r':      return <svg {...p}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chev-l':      return <svg {...p}><path d="M15 6l-6 6 6 6"/></svg>;
    case 'chev-d':      return <svg {...p}><path d="M6 9l6 6 6-6"/></svg>;
    case 'chev-u':      return <svg {...p}><path d="M6 15l6-6 6 6"/></svg>;
    case 'arrow-r':     return <svg {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'sparkles':    return <svg {...p}><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6z"/><path d="M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8z"/></svg>;
    case 'wand':        return <svg {...p}><path d="M15 4l5 5L8 21H3v-5z"/><path d="M14 5l5 5"/></svg>;
    case 'mail':        return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>;
    case 'mail-out':    return <svg {...p}><path d="M3 7l9 7 9-7"/><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M16 3l5 2-2 5"/></svg>;
    case 'inbox':       return <svg {...p}><path d="M3 13l4-8h10l4 8v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M3 13h5l1 3h6l1-3h5"/></svg>;
    case 'doc':         return <svg {...p}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M9 13h6M9 17h4"/></svg>;
    case 'doc-check':   return <svg {...p}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M9 14l2 2 4-4"/></svg>;
    case 'upload':      return <svg {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>;
    case 'download':    return <svg {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>;
    case 'send':        return <svg {...p}><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></svg>;
    case 'edit':        return <svg {...p}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4z"/></svg>;
    case 'filter':      return <svg {...p}><path d="M3 5h18l-7 9v6l-4-2v-4z"/></svg>;
    case 'sliders':     return <svg {...p}><path d="M4 6h16M4 12h16M4 18h16"/><circle cx="8" cy="6" r="2" fill="#fff"/><circle cx="14" cy="12" r="2" fill="#fff"/><circle cx="10" cy="18" r="2" fill="#fff"/></svg>;
    case 'globe':       return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case 'route':       return <svg {...p}><circle cx="6" cy="19" r="2"/><circle cx="18" cy="5" r="2"/><path d="M6 17V9a4 4 0 0 1 4-4h6"/><path d="M18 7v8a4 4 0 0 1-4 4H8"/></svg>;
    case 'package':     return <svg {...p}><path d="M21 8l-9-5-9 5v8l9 5 9-5z"/><path d="M3 8l9 5 9-5M12 13v9"/></svg>;
    case 'ship':        return <svg {...p}><path d="M2 18a3 3 0 0 0 3 1c2 0 3-1 4-1s2 1 4 1 3-1 4-1a3 3 0 0 0 3-1l-2-5H4z"/><path d="M5 13V8h14v5M11 4h2v4"/></svg>;
    case 'plane':       return <svg {...p}><path d="M2 12l6-1 4-7 1 0 1 7 6 1v2l-6 1-1 7-1 0-1-7-6-1z"/></svg>;
    case 'truck':       return <svg {...p}><rect x="1" y="6" width="13" height="11"/><path d="M14 9h5l3 4v4H14"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></svg>;
    case 'clock':       return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'refresh':     return <svg {...p}><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>;
    case 'trend-up':    return <svg {...p}><path d="M3 17l6-6 4 4 8-8M14 7h7v7"/></svg>;
    case 'trend-down':  return <svg {...p}><path d="M3 7l6 6 4-4 8 8M14 17h7v-7"/></svg>;
    case 'alert':       return <svg {...p}><path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18v.01"/></svg>;
    case 'info':        return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v5h1"/></svg>;
    case 'star':        return <svg {...p}><path d="M12 2l3 6.5 7 .9-5 5 1.3 7.1L12 18l-6.3 3.5L7 14.4l-5-5 7-.9z"/></svg>;
    case 'user':        return <svg {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case 'users':       return <svg {...p}><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><circle cx="17" cy="9" r="3"/><path d="M16 21a6 6 0 0 1 6 0"/></svg>;
    case 'crown':       return <svg {...p}><path d="M3 8l4 5 5-7 5 7 4-5v11H3z"/></svg>;
    case 'gauge':       return <svg {...p}><path d="M12 14l5-5"/><circle cx="12" cy="14" r="1.5" fill={color}/><path d="M5 19a9 9 0 1 1 14 0"/></svg>;
    case 'help':        return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4"/><circle cx="12" cy="17" r=".5" fill={color}/></svg>;
    case 'bolt':        return <svg {...p} fill={color}><path d="M13 2L4 14h7l-1 8 9-12h-7z" stroke="none"/></svg>;
    case 'chat':        return <svg {...p}><path d="M21 12a8 8 0 0 1-12 7l-5 1 1-5a8 8 0 1 1 16-3z"/></svg>;
    case 'flame':       return <svg {...p}><path d="M12 2c1 4 6 5 6 11a6 6 0 1 1-12 0c0-2 1-3 2-4 2 2 2-4 4-7z"/></svg>;
    case 'building':    return <svg {...p}><rect x="4" y="3" width="16" height="18"/><path d="M9 7h2M9 11h2M9 15h2M13 7h2M13 11h2M13 15h2"/></svg>;
    case 'paperclip':   return <svg {...p}><path d="M21 11l-9 9a5 5 0 1 1-7-7l9-9a3 3 0 1 1 4 4l-9 9a1 1 0 1 1-1-1l8-8"/></svg>;
    case 'log':         return <svg {...p}><circle cx="6" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><path d="M6 8v8M12 6h8M12 18h8M12 12h6"/></svg>;
    case 'eye':         return <svg {...p}><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'dot':         return <svg {...p}><circle cx="12" cy="12" r="3" fill={color}/></svg>;
    case 'panel-r':     return <svg {...p}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16"/></svg>;
    case 'expand':      return <svg {...p}><path d="M15 3h6v6M21 3l-7 7M9 21H3v-6M3 21l7-7"/></svg>;
    case 'minus':       return <svg {...p}><path d="M5 12h14"/></svg>;
    case 'lightbulb':   return <svg {...p}><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a6 6 0 0 1 4 10c-1 1-1.5 2-1.5 4h-5c0-2-.5-3-1.5-4A6 6 0 0 1 12 2z"/></svg>;
    case 'flag':        return <svg {...p}><path d="M4 21V4M4 4h13l-2 4 2 4H4"/></svg>;
    case 'history':     return <svg {...p}><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5M12 7v5l3 2"/></svg>;
    case 'layers':      return <svg {...p}><path d="M12 2l10 5-10 5L2 7z"/><path d="M2 12l10 5 10-5M2 17l10 5 10-5"/></svg>;
    default:            return <svg {...p}><circle cx="12" cy="12" r="9"/></svg>;
  }
};

/* ============== Mode icon ============== */
window.ModeIcon = function ModeIcon({ mode, size = 14, color = '#667085' }) {
  const m = { air: 'plane', sea: 'ship', truck: 'truck' }[mode] || 'ship';
  return <window.Icon name={m} size={size} color={color}/>;
};

/* ============== Flag ============== */
window.COUNTRY_FLAG = {
  SG: '🇸🇬', CN: '🇨🇳', HK: '🇭🇰', NL: '🇳🇱',
  DE: '🇩🇪', AE: '🇦🇪', IN: '🇮🇳', US: '🇺🇸',
  GB: '🇬🇧', FR: '🇫🇷', JP: '🇯🇵', KR: '🇰🇷',
  IT: '🇮🇹', ES: '🇪🇸', BE: '🇧🇪', SA: '🇸🇦',
  QA: '🇶🇦', BR: '🇧🇷', AU: '🇦🇺', CA: '🇨🇦',
  MY: '🇲🇾', TH: '🇹🇭', VN: '🇻🇳', ID: '🇮🇩',
};
window.Flag = function Flag({ port, lg }) {
  const p = window.PortByCode[port];
  const cc = p ? p.country : null;
  const glyph = cc && window.COUNTRY_FLAG[cc] ? window.COUNTRY_FLAG[cc] : '🏳️';
  return <span className={`flag${lg ? ' flag-lg' : ''}`} title={p ? p.name : port}>{glyph}</span>;
};

/* ============== Route (origin → dest) ============== */
window.Route = function Route({ origin, dest, mode, compact = false }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: compact ? 12 : 12.5, fontWeight: 500 }}>
      <window.Flag port={origin}/>
      <span className="mono" style={{ fontWeight: 600 }}>{origin}</span>
      {mode && <window.ModeIcon mode={mode} size={12} color="#98A2B3"/>}
      {!mode && <window.Icon name="arrow-r" size={12} color="#98A2B3"/>}
      <span className="mono" style={{ fontWeight: 600 }}>{dest}</span>
      <window.Flag port={dest}/>
    </span>
  );
};

/* ============== Status badge ============== */
window.StatusBadge = function StatusBadge({ status }) {
  const s = window.STATUS_META[status] || { label: status, color: 'b-neutral', dot: '#98A2B3' };
  return (
    <span className={`badge ${s.color}`}>
      <span className="badge-dot" style={{ background: s.dot }}/>
      {s.label}
    </span>
  );
};

/* ============== Agent chip ============== */
window.AgentChip = function AgentChip({ pulse, children = 'Agent', icon = true }) {
  return (
    <span className="agent-chip">
      <span className={`agent-dot${pulse ? ' pulse' : ''}`}/>
      {children}
    </span>
  );
};

/* ============== "Why this?" expandable ============== */
window.WhyThis = function WhyThis({ children, label = 'Why this?' }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <button className="btn btn-sm btn-agent-ghost" onClick={() => setOpen(!open)} style={{ padding: '0 8px', height: 22 }}>
        <window.Icon name="sparkles" size={12}/> {label} <window.Icon name={open ? 'chev-u' : 'chev-d'} size={11}/>
      </button>
      {open && <div className="why" style={{ marginTop: 8 }}>{children}</div>}
    </div>
  );
};

/* ============== Streaming text — character-by-character ============== */
window.StreamingText = function StreamingText({ text, speed = 18, onDone, style }) {
  const [out, setOut] = React.useState('');
  const [done, setDone] = React.useState(false);
  React.useEffect(() => {
    setOut(''); setDone(false);
    let i = 0;
    const t = setInterval(() => {
      i++;
      setOut(text.slice(0, i));
      if (i >= text.length) {
        clearInterval(t); setDone(true); onDone?.();
      }
    }, speed);
    return () => clearInterval(t);
  }, [text]);
  return (
    <span style={style}>
      {out}
      {!done && <span className="caret"/>}
    </span>
  );
};

/* ============== Sparkline / mini bar ============== */
window.Sparkline = function Sparkline({ data, color = '#1659CB', w = 100, h = 28, fill = true }) {
  if (!data || !data.length) return null;
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => [(i / (data.length - 1)) * w, h - ((v - min) / range) * (h - 2) - 1]);
  const line = pts.map(([x,y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
  const area = `0,${h} ${line} ${w},${h}`;
  return (
    <svg width={w} height={h} className="sparkline">
      {fill && <polygon points={area} fill={color} opacity={0.10}/>}
      <polyline points={line} fill="none" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
};

/* ============== Sidebar ============== */
window.Sidebar = function Sidebar({ active, onNavigate, role }) {
  const items = [
    { id: 'dashboard',  label: 'Home',     icon: 'dashboard' },
    { id: 'demand',     label: 'Demand',   icon: 'demand',     badge: 12, badgeKind: '' },
    { id: 'supply',     label: 'Supply',   icon: 'supply' },
    { id: 'rate-query', label: 'Rate\nQuery', icon: 'search' },
    { id: 'planning',   label: 'Demand\nProfiling', icon: 'planning',   badge: 3,  badgeKind: 'agent', shortLabel: 'Demand'  },
    { id: 'operations', label: 'Ops',      icon: 'operations', badge: 5 },
  ];
  // reorder for leadership: planning first
  const order = role === 'leadership'
    ? ['dashboard', 'planning', 'demand', 'supply', 'rate-query', 'operations']
    : ['dashboard', 'demand', 'supply', 'rate-query', 'planning', 'operations'];
  const items2 = order.map(id => items.find(i => i.id === id));

  return (
    <aside className="sidebar">
      {items2.map(it => (
        <button key={it.id} className={`nav-item ${active === it.id ? 'active' : ''}`} onClick={() => onNavigate(it.id)}>
          <window.Icon name={it.icon} size={20} stroke={active === it.id ? 2 : 1.75}/>
          <span style={{ whiteSpace: 'pre-line', textAlign: 'center' }}>{it.label}</span>
          {it.badge && <span className={`badge ${it.badgeKind || ''}`}>{it.badge}</span>}
        </button>
      ))}
      <div style={{ flex: 1 }}/>
      <button className="nav-item" title="Help">
        <window.Icon name="help" size={18}/>
        <span>Help</span>
      </button>
    </aside>
  );
};

/* ============== Topbar ============== */
window.Topbar = function Topbar({ role, onRoleChange, onToggleActivity, onSearchOpen, showActivityToggle = true }) {
  return (
    <header className="topbar">
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div className="brand-mark">F</div>
        <div className="brand-name">Freight <span className="accent">AI</span></div>
      </div>
      <div className="divider-v"/>
      <button className="global-search" onClick={onSearchOpen} style={{ cursor: 'pointer' }}>
        <window.Icon name="search" size={14}/>
        <span style={{ flex: 1, textAlign: 'left' }}>Search RFQs, shipments, customers, lanes…</span>
        <span className="kbd">⌘K</span>
      </button>
      <div style={{ flex: 1 }}/>

      {/* Role switcher */}
      <div className="role-switch" title="Switch perspective">
        <button className={role === 'ops' ? 'active' : ''} onClick={() => onRoleChange('ops')}>
          <window.Icon name="user" size={13}/> Operations
        </button>
        <button className={role === 'leadership' ? 'active' : ''} onClick={() => onRoleChange('leadership')}>
          <window.Icon name="crown" size={13}/> Leadership
        </button>
      </div>

      <button className="icon-btn bell-dot" title="Notifications"><window.Icon name="bell" size={16}/></button>
      {showActivityToggle && <button className="icon-btn" onClick={onToggleActivity} title="Toggle Live Activity"><window.Icon name="panel-r" size={16}/></button>}
      <div className="divider-v"/>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div className="avatar">{role === 'leadership' ? 'RN' : 'PK'}</div>
        <div style={{ lineHeight: 1.2 }}>
          <div style={{ fontSize: 12, fontWeight: 600 }}>{role === 'leadership' ? 'Rohan Nair' : 'Priya Krishnan'}</div>
          <div style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>{role === 'leadership' ? 'VP Operations · Singapore' : 'Senior Ops · Mumbai'}</div>
        </div>
        <window.Icon name="chev-d" size={12} color="#98A2B3"/>
      </div>
    </header>
  );
};

/* ============== Activity Panel ============== */
window.ActivityPanel = function ActivityPanel({ collapsed, onToggle, onJump }) {
  const iconFor = (kind) => {
    if (kind === 'agent') return { icon: 'sparkles', cls: '' };
    if (kind === 'inbound') return { icon: 'mail', cls: 'b' };
    if (kind === 'system') return { icon: 'check-circle', cls: 's' };
    return { icon: 'info', cls: 'w' };
  };

  if (collapsed) {
    return (
      <aside className="activity-panel" style={{ alignItems: 'center', paddingTop: 12 }}>
        <button className="icon-btn" onClick={onToggle} title="Show Live Activity">
          <window.Icon name="panel-r" size={16}/>
        </button>
        <div style={{ marginTop: 12, writingMode: 'vertical-rl', fontSize: 11.5, fontWeight: 600, color: 'var(--fg-3)', letterSpacing: '0.05em' }}>
          Live Activity
        </div>
        <div style={{ marginTop: 8 }}><span className="agent-dot pulse"/></div>
      </aside>
    );
  }

  return (
    <aside className="activity-panel">
      <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--n-100)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <window.Icon name="sparkles" size={14} color="#7C5CFF"/>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Live Activity</div>
          <span className="agent-dot pulse"/>
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          <button className="icon-btn" title="Filter"><window.Icon name="filter" size={14}/></button>
          <button className="icon-btn" onClick={onToggle} title="Collapse"><window.Icon name="x" size={14}/></button>
        </div>
      </div>
      <div style={{ padding: '8px 16px', borderBottom: '1px solid var(--n-100)', fontSize: 11, color: 'var(--fg-3)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span>Agent has acted <strong style={{ color: 'var(--fg-1)' }}>34 times</strong> today</span>
        <button className="btn-ghost btn btn-sm" style={{ height: 20, padding: '0 6px', fontSize: 11 }}>All <window.Icon name="chev-d" size={11}/></button>
      </div>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {window.ACTIVITY.map((a, i) => {
          const ic = iconFor(a.kind);
          return (
            <div key={i} className="activity-item" onClick={() => onJump?.(a)}>
              <div className={`activity-icon ${ic.cls}`}>
                <window.Icon name={ic.icon} size={13}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, color: 'var(--fg-1)', lineHeight: 1.4 }}>
                  {a.text}
                </div>
                {a.meta && <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{a.meta}</div>}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                  <span style={{ fontSize: 10.5, color: 'var(--fg-4)' }}>{a.ts}</span>
                  {a.target && <span style={{ fontSize: 10.5, color: 'var(--brand-600)', fontWeight: 600 }}>{a.target}</span>}
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ padding: '10px 16px', borderTop: '1px solid var(--n-100)', display: 'flex', gap: 8, alignItems: 'center' }}>
        <window.Icon name="chat" size={13} color="#7C5CFF"/>
        <span style={{ fontSize: 11.5, color: 'var(--fg-3)', flex: 1 }}>Ask the agent…</span>
        <span className="kbd">⌘J</span>
      </div>
    </aside>
  );
};

/* ============== Cmd+K palette (stub) ============== */
window.CommandPalette = function CommandPalette({ open, onClose, onNavigate }) {
  if (!open) return null;
  const items = [
    { kind: 'nav', label: 'Go to Dashboard', icon: 'dashboard', target: 'dashboard' },
    { kind: 'nav', label: 'Go to Demand', icon: 'demand', target: 'demand' },
    { kind: 'nav', label: 'Go to Supply', icon: 'supply', target: 'supply' },
    { kind: 'nav', label: 'Go to Profiling', icon: 'planning', target: 'planning' },
    { kind: 'nav', label: 'Go to Operations', icon: 'operations', target: 'operations' },
    { kind: 'act', label: 'New RFQ', icon: 'plus' },
    { kind: 'act', label: 'Ask the agent…', icon: 'sparkles' },
    { kind: 'rfq', label: 'RFQ-2041 · Acme Logistics · SIN → RTM', icon: 'demand', target: 'demand' },
    { kind: 'rfq', label: 'RFQ-2039 · Bharat Industries · NSA → JEB', icon: 'demand', target: 'demand' },
    { kind: 'shp', label: 'SHP-104822 · Acme · on vessel', icon: 'package', target: 'operations' },
  ];
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ width: 540, padding: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', borderBottom: '1px solid var(--n-100)' }}>
          <window.Icon name="search" size={16} color="#667085"/>
          <input autoFocus placeholder="Search anything…" style={{ flex: 1, border: 0, outline: 0, fontSize: 14, background: 'transparent' }}/>
          <span className="kbd">ESC</span>
        </div>
        <div style={{ maxHeight: 380, overflow: 'auto', padding: 8 }}>
          {items.map((it, i) => (
            <button key={i} onClick={() => { if (it.target) onNavigate(it.target); onClose(); }}
              style={{
                display: 'flex', alignItems: 'center', gap: 10, width: '100%',
                padding: '10px 12px', border: 0, background: 'transparent', borderRadius: 8,
                textAlign: 'left', fontSize: 13, color: 'var(--fg-1)', fontWeight: 500, cursor: 'pointer',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--n-50)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <window.Icon name={it.icon} size={15} color="#667085"/>
              <span style={{ flex: 1 }}>{it.label}</span>
              <span className="badge b-neutral" style={{ fontSize: 10 }}>{it.kind === 'nav' ? 'Navigate' : it.kind === 'rfq' ? 'RFQ' : it.kind === 'shp' ? 'Shipment' : 'Action'}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};