// Shared UI primitives: TopBar, MiniSpark, helpers
const { useState, useEffect, useRef, useMemo, useCallback } = React;

function TopBar({ route, navigate, onSearch }) {
  const [q, setQ] = useState('');
  const onSubmit = (e) => {
    e.preventDefault();
    if (q.trim()) navigate({ name: 'search', q: q.trim() });
  };
  return (
    <div className="topbar">
      <a className="brand" href="#/" onClick={(e) => { e.preventDefault(); navigate({ name: 'home' }); }}>
        <span className="brand-mark"></span>
        CREInsights
      </a>
      <nav className="nav">
        <a href="#/deals"
           className={route.name === 'deals' || route.name === 'deal' ? 'active' : ''}
           onClick={(e) => { e.preventDefault(); navigate({ name: 'deals' }); }}>Deals</a>
        <a href="#/sponsors"
           className={route.name === 'sponsors' || route.name === 'sponsor' ? 'active' : ''}
           onClick={(e) => { e.preventDefault(); navigate({ name: 'sponsors' }); }}>Sponsors</a>
        <a href="#/activity"
           className={route.name === 'activity' ? 'active' : ''}
           onClick={(e) => { e.preventDefault(); navigate({ name: 'activity' }); }}>Activity</a>
        <a href="#/research"
           className={route.name === 'research' ? 'active' : ''}
           onClick={(e) => { e.preventDefault(); navigate({ name: 'research' }); }}>Research</a>
      </nav>
      <div className="topbar-spacer"></div>
      <span className="live-pill">
        <span className="live-dot"></span>
        Live · 52,028 deals
      </span>
      <form className="search-mini" onSubmit={onSubmit}>
        <input type="text"
               placeholder="Search deals, sponsors…"
               value={q}
               onChange={(e) => setQ(e.target.value)} />
      </form>
    </div>
  );
}

// Tiny inline icon helpers
const I = {
  arrow: (props) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  ext: (props) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="M7 17 17 7M8 7h9v9"/></svg>,
  search: (props) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>,
  filter: (props) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="M3 6h18M6 12h12M10 18h4"/></svg>,
  chevR: (props) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="m9 6 6 6-6 6"/></svg>,
  chevL: (props) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="m15 6-6 6 6 6"/></svg>,
  asc: (props) => <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" {...props}><path d="M12 4l8 12H4z"/></svg>,
  desc: (props) => <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" {...props}><path d="M12 20L4 8h16z"/></svg>,
  building: (props) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h.01M15 17h.01"/></svg>,
  pin: (props) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="M12 21s-7-7.6-7-12a7 7 0 1 1 14 0c0 4.4-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  phone: (props) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="M22 16.92V21a1 1 0 0 1-1.1 1A19 19 0 0 1 2 4.1 1 1 0 0 1 3 3h4.1a1 1 0 0 1 1 .8l1 4a1 1 0 0 1-.3 1L7 10.6a16 16 0 0 0 6.4 6.4l1.8-1.8a1 1 0 0 1 1-.3l4 1a1 1 0 0 1 .8 1z"/></svg>,
  doc: (props) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg>,
  layers: (props) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="m12 2 10 5-10 5L2 7zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>,
  tag: (props) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>,
};

window.I = I;
window.TopBar = TopBar;
