// Optimal Trade App UI Kit — shared primitives, icons, and mock data
const { useState, useEffect, useRef, useMemo } = React;

/* ============================== ICONS (Lucide path data, React-native) ============ */
const ICONS = {
  "arrow-right-left": '<path d="m16 3 4 4-4 4"/><path d="M20 7H4"/><path d="m8 21-4-4 4-4"/><path d="M4 17h16"/>',
  "arrow-up-down": '<path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/>',
  "arrow-down-left": '<path d="M17 7 7 17"/><path d="M17 17H7V7"/>',
  "arrow-up-right": '<path d="M7 7h10v10"/><path d="M7 17 17 7"/>',
  "plus": '<path d="M5 12h14"/><path d="M12 5v14"/>',
  "ship": '<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
  "truck": '<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/>',
  "plane": '<path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/>',
  "package": '<path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="M3.3 7 12 12l8.7-5"/><path d="M12 22V12"/>',
  "warehouse": '<path d="M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z"/><path d="M6 18h12"/><path d="M6 14h12"/><rect width="12" height="12" x="6" y="10"/>',
  "lock": '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
  "shield-check": '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
  "chevron-left": '<path d="m15 18-6-6 6-6"/>',
  "wallet": '<path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/>',
  "home": '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
  "file-text": '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/>',
  "search": '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
  "calculator": '<rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/>',
  "check": '<path d="M20 6 9 17l-5-5"/>',
  "check-check": '<path d="M18 6 7 17l-5-5"/><path d="m22 10-7.5 7.5L13 16"/>',
  "x": '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
  "bell": '<path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>',
  "smartphone": '<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>',
  "landmark": '<line x1="3" x2="21" y1="22" y2="22"/><line x1="6" x2="6" y1="18" y2="11"/><line x1="10" x2="10" y1="18" y2="11"/><line x1="14" x2="14" y1="18" y2="11"/><line x1="18" x2="18" y1="18" y2="11"/><polygon points="12 2 20 7 4 7"/>',
  "bitcoin": '<path d="M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727"/>',
  "coins": '<circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/>',
  "clock": '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
  "map-pin": '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',
  "user": '<circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/>',
  "users": '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
  "log-out": '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>',
  "settings": '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
  "more-horizontal": '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
  "activity": '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
  "trending-up": '<path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/>',
  "circle-check": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
  "dollar-sign": '<line x1="12" x2="12" y1="2" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
  "store": '<path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/>',
  "copy": '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
  "info": '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
  "filter": '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
  "signal": '<path d="M2 20h.01"/><path d="M7 20v-4"/><path d="M12 20v-8"/><path d="M17 20V8"/><path d="M22 4v16"/>',
  "wifi": '<path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/>',
  "battery": '<rect width="16" height="10" x="2" y="7" rx="2" ry="2"/><line x1="22" x2="22" y1="11" y2="13"/><path d="M4 9h11v6H4z" fill="currentColor" stroke="none"/>',
  "refresh-cw": '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/>',
  "banknote": '<rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/>',
  "star": '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
  "credit-card": '<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>',
  "monitor": '<rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/>',
  "external-link": '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
  "scan-line": '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/>',
  "sparkles": '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>',
  "upload": '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>',
  "send": '<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>',
  "paperclip": '<path d="M13.234 20.252 21 12.3a4.25 4.25 0 0 0-6-6L3.59 17.71a6 6 0 0 0 8.49 8.49l9.92-9.92"/>',
  "scale": '<path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="M7 21h10"/><path d="M12 3v18"/><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/>',
  "badge-check": '<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/>',
  "circle-dot": '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1" fill="currentColor"/>',
  "list": '<path d="M3 12h.01"/><path d="M3 18h.01"/><path d="M3 6h.01"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M8 6h13"/>',
  "headphones": '<path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM21 14h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2z"/><path d="M3 14a9 9 0 0 1 18 0"/>',
  "zap": '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
  "chevron-up": '<path d="m18 15-6-6-6 6"/>',
  "globe": '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
  "shield": '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
  "wifi-off": '<path d="M12 20h.01"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/><path d="M5 12.859a10 10 0 0 1 5.17-2.69"/><path d="M19 12.859a10 10 0 0 0-2.007-1.523"/><path d="M2 8.82a15 15 0 0 1 4.177-2.643"/><path d="M22 8.82a15 15 0 0 0-11.288-3.764"/><path d="m2 2 20 20"/>',
  "languages": '<path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/>',
  "file-check": '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="m9 15 2 2 4-4"/>',
  "git-compare": '<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><path d="M11 18H8a2 2 0 0 1-2-2V9"/>',
  "message-square": '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
  "radar": '<path d="M19.07 4.93A10 10 0 0 0 6.99 3.34"/><path d="M4 6h.01"/><path d="M2.29 9.62A10 10 0 1 0 21.31 8.35"/><path d="M16.24 7.76A6 6 0 1 0 8.23 16.67"/><path d="M12 18h.01"/><path d="M17.99 11.66A6 6 0 0 1 15.77 16.67"/><circle cx="12" cy="12" r="2"/><path d="m13.41 10.59 5.66-5.66"/>',
  "file-search": '<path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4.268 21a2 2 0 0 0 1.727 1H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3"/><path d="m9 18-1.5-1.5"/><circle cx="5" cy="14" r="3"/>',
  "handshake": '<path d="m11 17 2 2a1 1 0 1 0 3-3"/><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/><path d="m21 3 1 11h-2"/><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"/><path d="M3 4h8"/>',
};
function Icon({ name, size = 20, className = "", style = {}, strokeWidth = 2 }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      style={style} dangerouslySetInnerHTML={{ __html: ICONS[name] || "" }} />
  );
}

/* ============================== FLAGS (circle-flags CDN, real SVGs) =============== */
function Flag({ code, size = 22, style = {} }) {
  return <img className="ot-flag" alt={code}
    src={`https://cdn.jsdelivr.net/gh/HatScripts/circle-flags/flags/${code}.svg`}
    width={size} height={size} style={{ width: size, height: size, ...style }} />;
}

/* ============================== LOGO (inline SVG, bundler-proof) ================ */
const LOGO_OPTIMAL = 'M 16.739 28.865 C 13.24 28.865 10.244 28.262 7.75 27.056 C 5.256 25.837 3.336 24.144 1.992 21.976 C 0.664 19.808 0 17.293 0 14.432 C 0 11.572 0.664 9.057 1.992 6.889 C 3.336 4.721 5.256 3.034 7.75 1.828 C 10.244 0.609 13.24 0 16.739 0 C 20.237 0 23.233 0.609 25.727 1.828 C 28.238 3.034 30.157 4.721 31.485 6.889 C 32.829 9.057 33.501 11.572 33.501 14.432 C 33.501 17.293 32.829 19.808 31.485 21.976 C 30.157 24.144 28.238 25.837 25.727 27.056 C 23.233 28.262 20.237 28.865 16.739 28.865 Z M 16.739 24.497 C 19.087 24.509 21.039 24.099 22.593 23.265 C 24.164 22.431 25.339 21.257 26.116 19.744 C 26.91 18.23 27.306 16.459 27.306 14.432 C 27.306 12.405 26.91 10.648 26.116 9.16 C 25.339 7.659 24.164 6.491 22.593 5.658 C 21.039 4.824 19.087 4.394 16.739 4.368 C 14.39 4.355 12.439 4.766 10.884 5.6 C 9.329 6.434 8.155 7.608 7.361 9.121 C 6.584 10.635 6.195 12.405 6.195 14.432 C 6.195 16.459 6.584 18.223 7.361 19.724 C 8.138 21.212 9.305 22.373 10.859 23.207 C 12.43 24.041 14.39 24.471 16.739 24.497 Z M 37.365 28.288 L 37.365 0.577 L 51.82 0.577 C 52.16 0.577 52.598 0.59 53.132 0.616 C 53.666 0.629 54.16 0.667 54.614 0.731 C 56.638 0.975 58.307 1.507 59.618 2.328 C 60.947 3.149 61.926 4.189 62.558 5.446 C 63.206 6.69 63.53 8.076 63.53 9.602 C 63.53 11.116 63.206 12.502 62.558 13.759 C 61.91 15.003 60.922 16.036 59.594 16.857 C 58.282 17.678 56.622 18.211 54.614 18.454 C 54.16 18.506 53.658 18.544 53.108 18.57 C 52.573 18.595 52.144 18.608 51.82 18.608 L 43.22 18.608 L 43.22 28.288 L 37.365 28.288 Z M 43.22 14.278 L 51.577 14.278 C 51.901 14.278 52.266 14.266 52.67 14.24 C 53.075 14.214 53.448 14.163 53.788 14.086 C 54.76 13.894 55.521 13.554 56.072 13.066 C 56.638 12.579 57.035 12.027 57.262 11.411 C 57.505 10.795 57.626 10.193 57.626 9.602 C 57.626 9.012 57.505 8.409 57.262 7.794 C 57.035 7.165 56.638 6.607 56.072 6.119 C 55.521 5.632 54.76 5.292 53.788 5.099 C 53.448 5.022 53.075 4.978 52.67 4.965 C 52.266 4.939 51.901 4.926 51.577 4.926 L 43.22 4.926 L 43.22 14.278 Z M 75.831 28.288 L 75.831 4.926 L 64.51 4.926 L 64.51 0.577 L 93.007 0.577 L 93.007 4.926 L 81.686 4.926 L 81.686 28.288 L 75.831 28.288 Z M 96.405 28.288 L 96.405 0.577 L 102.26 0.577 L 102.26 28.288 L 96.405 28.288 Z M 106.622 28.288 L 106.622 0.577 L 111.894 0.577 L 123.992 20.205 L 136.091 0.577 L 141.362 0.577 L 141.362 28.288 L 135.896 28.288 L 135.896 10.526 L 125.158 28.288 L 122.826 28.288 L 112.112 10.526 L 112.112 28.288 L 106.622 28.288 Z M 143.814 28.288 L 154.844 0.577 L 163.42 0.577 L 174.449 28.288 L 168.424 28.288 L 158.415 3.425 L 159.727 3.425 L 149.839 28.288 L 143.814 28.288 Z M 149.961 22.284 L 149.961 17.954 L 168.327 17.954 L 168.327 22.284 L 149.961 22.284 Z M 177.384 28.288 L 177.384 0.577 L 183.239 0.577 L 183.239 23.939 L 198.69 23.939 L 198.69 28.288 L 177.384 28.288 Z';
const LOGO_TRADE = 'M 4.377 2.109 L 0 2.109 L 0 0 L 11.159 0 L 11.159 2.109 L 6.782 2.109 L 6.782 11.857 L 4.377 11.857 L 4.377 2.109 Z M 13.42 0 L 19.451 0 C 20.361 0 21.15 0.096 21.818 0.288 C 22.485 0.475 23.039 0.748 23.479 1.108 C 23.919 1.467 24.245 1.904 24.457 2.42 C 24.675 2.936 24.784 3.52 24.784 4.172 C 24.784 4.612 24.731 5.032 24.624 5.432 C 24.518 5.826 24.354 6.19 24.131 6.524 C 23.914 6.858 23.638 7.156 23.304 7.419 C 22.971 7.677 22.579 7.892 22.129 8.064 L 24.708 11.857 L 21.764 11.857 L 19.534 8.489 L 19.466 8.489 L 15.825 8.481 L 15.825 11.857 L 13.42 11.857 L 13.42 0 Z M 19.511 6.403 C 19.967 6.403 20.364 6.349 20.702 6.243 C 21.046 6.137 21.332 5.988 21.56 5.796 C 21.792 5.603 21.964 5.371 22.075 5.098 C 22.192 4.82 22.25 4.511 22.25 4.172 C 22.25 3.51 22.022 2.999 21.567 2.64 C 21.112 2.276 20.427 2.094 19.511 2.094 L 15.825 2.094 L 15.825 6.403 L 19.511 6.403 Z M 31.369 0 L 33.917 0 L 39.652 11.857 L 37.126 11.857 L 36.178 9.862 L 29.252 9.862 L 28.334 11.857 L 25.8 11.857 L 31.369 0 Z M 35.23 7.882 L 32.666 2.496 L 30.17 7.882 L 35.23 7.882 Z M 41.185 0 L 45.532 0 C 46.801 0 47.904 0.137 48.839 0.41 C 49.775 0.683 50.549 1.075 51.161 1.585 C 51.778 2.091 52.235 2.708 52.534 3.436 C 52.837 4.16 52.989 4.974 52.989 5.879 C 52.989 6.739 52.84 7.535 52.541 8.269 C 52.243 8.997 51.788 9.629 51.176 10.165 C 50.564 10.696 49.79 11.113 48.855 11.417 C 47.919 11.715 46.816 11.864 45.547 11.864 L 41.185 11.857 L 41.185 0 Z M 46.124 9.778 C 46.842 9.778 47.471 9.687 48.012 9.505 C 48.554 9.318 49.004 9.055 49.363 8.716 C 49.727 8.377 50 7.968 50.182 7.487 C 50.364 7.007 50.455 6.471 50.455 5.879 C 50.455 5.298 50.364 4.774 50.182 4.309 C 50 3.838 49.727 3.441 49.363 3.118 C 49.004 2.789 48.554 2.536 48.012 2.359 C 47.471 2.182 46.842 2.094 46.124 2.094 L 43.59 2.094 L 43.59 9.778 L 46.124 9.778 Z M 55.09 0 L 65.187 0 L 65.187 2.109 L 57.495 2.109 L 57.495 4.476 L 64.307 4.476 L 64.307 6.456 L 57.495 6.456 L 57.495 9.756 L 65.347 9.756 L 65.347 11.857 L 55.09 11.857 L 55.09 0 Z';
const LOGO_T = 'M 36.354 0 C 51.296 0 63.409 12.113 63.409 27.055 C 63.409 41.996 51.296 54.109 36.354 54.109 L 34.562 54.109 L 38.355 22.673 L 48.161 20.244 C 49.371 19.944 50.329 19.023 50.675 17.825 L 52.109 12.857 L 18.546 12.857 C 16.991 12.857 15.624 13.886 15.192 15.38 L 13.928 19.761 L 26.578 22.673 C 26.572 22.736 25.653 32.293 24.833 39.467 C 24.133 45.593 14.509 48.557 11.662 49.304 C 4.616 44.42 0 36.277 0 27.055 C 0 12.113 12.113 0 27.055 0 L 36.354 0 Z';
function Logo({ height = 26, variant = "color" }) {
  const mark = variant === "white" ? "#fff" : "#FF5C00";
  const text = variant === "white" ? "#fff" : variant === "navy" ? "#1A2238" : "#1A2238";
  return (
    <svg height={height} viewBox="0 0 350 54.109" fill="none" style={{ display: "block" }} xmlns="http://www.w3.org/2000/svg">
      <svg x="0" y="0" width="63.409" height="54.109" viewBox="0 0 63.409 54.109"><path d={LOGO_T} fill={mark} fillRule="nonzero" /></svg>
      <svg x="78" y="12.6" width="198.69" height="28.865" viewBox="0 0 198.690 28.865"><path d={LOGO_OPTIMAL} fill={text} fillRule="nonzero" /></svg>
      <svg x="282" y="12.6" width="65.347" height="11.864" viewBox="0 0 65.347 11.864"><path d={LOGO_TRADE} fill={text} fillRule="nonzero" /></svg>
    </svg>
  );
}
function TMark({ size = 30, bg = "var(--ot-orange)", fg = "#fff", radius = 9 }) {
  return (
    <span style={{ width: size, height: size, borderRadius: radius, background: bg, display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
      <svg width={size * 0.56} height={size * 0.48} viewBox="0 0 63.409 54.109" style={{ color: fg }}>
        <path d="M 36.354 0 C 51.296 0 63.409 12.113 63.409 27.055 C 63.409 41.996 51.296 54.109 36.354 54.109 L 34.562 54.109 L 38.355 22.673 L 48.161 20.244 C 49.371 19.944 50.329 19.023 50.675 17.825 L 52.109 12.857 L 18.546 12.857 C 16.991 12.857 15.624 13.886 15.192 15.38 L 13.928 19.761 L 26.578 22.673 C 26.572 22.736 25.653 32.293 24.833 39.467 C 24.133 45.593 14.509 48.557 11.662 49.304 C 4.616 44.42 0 36.277 0 27.055 C 0 12.113 12.113 0 27.055 0 L 36.354 0 Z" fill="currentColor" />
      </svg>
    </span>
  );
}

/* ============================== SMALL PRIMITIVES ================================== */
function Button({ children, variant = "primary", icon, onClick, disabled, style }) {
  return (
    <button className={`ot-btn ot-btn-${variant}`} onClick={onClick} disabled={disabled} style={style}>
      {icon && <Icon name={icon} size={18} />}{children}
    </button>
  );
}
function Badge({ kind, children, icon, dot }) {
  return (
    <span className={`ot-badge ${kind}`}>
      {icon && <Icon name={icon} size={12} />}{dot && <span className="d" />}{children}
    </span>
  );
}
function StatusBar({ dark }) {
  return (
    <div className={`ot-statusbar ${dark ? "on-dark" : ""}`}>
      <span>9:41</span>
      <span className="si"><Icon name="signal" size={16} /><Icon name="wifi" size={16} /><Icon name="battery" size={20} /></span>
    </div>
  );
}
function ScreenHead({ title, onBack, right }) {
  return (
    <div className="ot-screen-head">
      {onBack && <button className="ot-iconbtn" onClick={onBack}><Icon name="chevron-left" /></button>}
      <h1>{title}</h1>
      {right}
    </div>
  );
}
function Row({ icon, iconEl, title, sub, right, onClick, chevron }) {
  return (
    <div className="ot-row" onClick={onClick}>
      {iconEl || (icon && <span className="ic"><Icon name={icon} /></span>)}
      <span className="tt"><b>{title}</b>{sub && <span>{sub}</span>}</span>
      {right}
      {chevron && <span className="chev"><Icon name="chevron-right" /></span>}
    </div>
  );
}

/* ============================== FORMATTERS ======================================= */
const fmt = (n, dp = 0) => n.toLocaleString("en-US", { minimumFractionDigits: dp, maximumFractionDigits: dp });
const money = (sym, n, dp = 0) => `${sym}\u00A0${fmt(n, dp)}`;

/* ============================== MOTION PRIMITIVES ================================ */
// Odometer: tweens a number from old→new (money recount). Manrope tabular via .ot-num.
function Odometer({ value, from, sym, dp = 0, className = "", style = {}, dur = 700 }) {
  const seed = from != null ? from : value;
  const [disp, setDisp] = useState(seed);
  const prev = useRef(seed);
  useEffect(() => {
    const a = prev.current, b = value; prev.current = value;
    if (a === b) { setDisp(b); return; }
    const t0 = performance.now(); let raf;
    const tick = (t) => {
      const k = Math.min(1, (t - t0) / dur);
      const e = 1 - Math.pow(1 - k, 3);
      setDisp(a + (b - a) * e);
      if (k < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value]);
  return <span className={"ot-num " + className} style={style}>{sym ? sym + "\u00A0" : ""}{fmt(disp, dp)}</span>;
}

// RateRing: 60s lock countdown ring; amber pulse in the last 10s.
function RateRing({ seconds = 60, size = 54, onExpire }) {
  const [s, setS] = useState(seconds);
  useEffect(() => {
    const t = setInterval(() => setS(v => {
      if (v <= 1) { onExpire && onExpire(); return seconds; }
      return v - 1;
    }), 1000);
    return () => clearInterval(t);
  }, []);
  const r = (size - 8) / 2, c = 2 * Math.PI * r, pct = s / seconds, amber = s <= 10;
  return (
    <span style={{ position: "relative", width: size, height: size, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
      <svg width={size} height={size} style={{ position: "absolute", transform: "rotate(-90deg)" }}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--ot-gray-200)" strokeWidth="3.5" />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={amber ? "var(--ot-warning)" : "var(--ot-orange)"} strokeWidth="3.5" strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - pct)} style={{ transition: "stroke-dashoffset 1s linear, stroke .3s" }} />
      </svg>
      <span className={"ot-num" + (amber ? " ot-amber-pulse" : "")} style={{ fontSize: 14, color: amber ? "var(--ot-warning)" : "var(--ot-orange-deep)" }}>0:{String(s).padStart(2, "0")}</span>
    </span>
  );
}

// Skeleton shimmer block
function Skeleton({ w = "100%", h = 14, r = 8, style = {} }) {
  return <span className="ot-skel" style={{ width: w, height: h, borderRadius: r, display: "block", ...style }} />;
}

// SwipeToPay: drag the knob to the end to confirm an irreversible payment.
function SwipeToPay({ label = "Slide to pay", onConfirm, disabled }) {
  const trackRef = useRef(null), knobRef = useRef(null);
  const [x, setX] = useState(0);
  const [armed, setArmed] = useState(false);
  const state = useRef({ dragging: false, max: 0 });
  const KN = 52;
  const begin = (e) => {
    if (disabled || armed) return;
    const track = trackRef.current;
    state.current.max = track.clientWidth - KN - 8;
    state.current.dragging = true;
    knobRef.current.setPointerCapture(e.pointerId);
  };
  const move = (e) => {
    if (!state.current.dragging) return;
    const track = trackRef.current.getBoundingClientRect();
    let nx = e.clientX - track.left - KN / 2;
    nx = Math.max(0, Math.min(state.current.max, nx));
    setX(nx);
  };
  const end = () => {
    if (!state.current.dragging) return;
    state.current.dragging = false;
    if (x >= state.current.max * 0.82) { setX(state.current.max); setArmed(true); setTimeout(() => onConfirm && onConfirm(), 220); }
    else setX(0);
  };
  return (
    <div ref={trackRef} className={"ot-swipe" + (disabled ? " disabled" : "") + (armed ? " armed" : "")}>
      <span className="ot-swipe-label" style={{ opacity: disabled ? .5 : 1 - x / 120 }}>{label}</span>
      <span className="ot-swipe-chev" style={{ opacity: disabled ? 0 : Math.max(0, 1 - x / 80) }}>
        <Icon name="chevron-right" size={16} /><Icon name="chevron-right" size={16} style={{ marginLeft: -10 }} /><Icon name="chevron-right" size={16} style={{ marginLeft: -10 }} />
      </span>
      <span ref={knobRef} className="ot-swipe-knob" onPointerDown={begin} onPointerMove={move} onPointerUp={end} onPointerCancel={end}
        style={{ transform: `translateX(${x}px)`, transition: state.current.dragging ? "none" : "transform .25s var(--ot-spring)" }}>
        <Icon name={armed ? "check" : "arrow-up-right"} size={22} strokeWidth={2.4} />
      </span>
    </div>
  );
}

// AI agent floating action button
function AIFab({ onClick, label = "Ask agent" }) {
  return (
    <button className="ot-fab" onClick={onClick}>
      <Icon name="sparkles" size={20} />
      <span>{label}</span>
    </button>
  );
}

// Confetti burst for success ceremony (transform/opacity only)
function Confetti() {
  const bits = useMemo(() => Array.from({ length: 26 }).map((_, i) => ({
    id: i, x: (Math.random() * 2 - 1) * 130, y: -(60 + Math.random() * 200), rot: Math.random() * 360,
    c: ["#FF5C00", "#FF7A00", "#1F8A5B", "#4842C8", "#FFBC8C"][i % 5], d: Math.random() * .12, s: 6 + Math.random() * 6
  })), []);
  return (
    <span className="ot-confetti">
      {bits.map(b => <i key={b.id} style={{ "--tx": b.x + "px", "--ty": b.y + "px", "--rot": b.rot + "deg", background: b.c, width: b.s, height: b.s * 1.6, animationDelay: b.d + "s" }} />)}
    </span>
  );
}

Object.assign(window, { React, useState, useEffect, useRef, useMemo, Icon, Flag, Logo, TMark, Button, Badge, StatusBar, ScreenHead, Row, fmt, money, Odometer, RateRing, Skeleton, SwipeToPay, AIFab, Confetti });
