// SVG icon primitives — kept inline so colours can use currentColor and
// stroke widths stay consistent with the tmp landing.html source.

function IconArrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
  );
}

function IconDashboard() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>;
}

function IconTx() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/></svg>;
}

function IconClients() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="7" r="4"/><path d="M5 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2"/></svg>;
}

function IconShield() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3z"/></svg>;
}

function IconShadow() {
  return <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M10.29 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>;
}

function MockNav({ active }) {
  // Mock top-bar shared by every scene. `active` selects which mock-tab
  // gets the highlighted state ("dash" | "tx" | "cl" | "bl").
  const tabs = [
    { key: 'dash', label: 'Dashboard', icon: <IconDashboard /> },
    { key: 'tx',   label: 'Transactions', icon: <IconTx /> },
    { key: 'cl',   label: 'Clients', icon: <IconClients /> },
    { key: 'bl',   label: 'Blocklist', icon: <IconShield /> },
  ];
  return (
    <div className="mock-nav">
      <a className="brand"><img src="assets/logo.svg" alt="Dipoli" /></a>
      <div className="vsep"></div>
      <div className="mock-tabs">
        {tabs.map((t) => (
          <span key={t.key} className={'mock-tab' + (t.key === active ? ' is-active' : '')}>
            {t.icon}{t.label}
          </span>
        ))}
      </div>
      <div className="mock-pill pill-shadow"><IconShadow />Shadow Mode</div>
      <div className="mock-pill pill-healthy"><span className="dot"></span>Healthy</div>
      <span className="mock-avatar">JC</span>
    </div>
  );
}