/* ============================================================
   CADENCE — Icons + Wordmark
   Minimal line icons (functional UI). Exposed via window.Icon
   ============================================================ */
(function () {
  const S = ({ children, size = 18, ...p }) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
      stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      {children}
    </svg>
  );

  const Icon = {
    discover: (p) => <S {...p}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.2-3.2" /></S>,
    grid: (p) => <S {...p}><rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="3" width="7" height="7" rx="1.5" /><rect x="3" y="14" width="7" height="7" rx="1.5" /><rect x="14" y="14" width="7" height="7" rx="1.5" /></S>,
    portfolio: (p) => <S {...p}><path d="M3 3v18h18" /><path d="M7 14l3.5-4 3 2.5L21 6" /></S>,
    trade: (p) => <S {...p}><path d="M7 7h13" /><path d="m16 3 4 4-4 4" /><path d="M17 17H4" /><path d="m8 21-4-4 4-4" /></S>,
    artist: (p) => <S {...p}><circle cx="12" cy="8" r="4" /><path d="M5.5 21a6.5 6.5 0 0 1 13 0" /></S>,
    wallet: (p) => <S {...p}><rect x="3" y="6" width="18" height="13" rx="3" /><path d="M16 12.5h2" /><path d="M3 9h13a2 2 0 0 1 2 2" /></S>,
    bell: (p) => <S {...p}><path d="M18 8a6 6 0 1 0-12 0c0 7-2 9-2 9h16s-2-2-2-9" /><path d="M10.5 21a2 2 0 0 0 3 0" /></S>,
    settings: (p) => <S {...p}><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M5 5l2 2M17 17l2 2M2 12h3M19 12h3M5 19l2-2M17 7l2-2" /></S>,
    play: (p) => <S {...p}><path d="M6 4.5v15l13-7.5z" fill="currentColor" stroke="none" /></S>,
    pause: (p) => <S {...p}><rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor" stroke="none" /><rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor" stroke="none" /></S>,
    skipfwd: (p) => <S {...p}><path d="M5 5v14l9-7z" fill="currentColor" stroke="none" /><rect x="16" y="5" width="2.5" height="14" rx="1" fill="currentColor" stroke="none" /></S>,
    skipback: (p) => <S {...p}><path d="M19 5v14l-9-7z" fill="currentColor" stroke="none" /><rect x="5.5" y="5" width="2.5" height="14" rx="1" fill="currentColor" stroke="none" /></S>,
    up: (p) => <S {...p}><path d="m6 14 6-6 6 6" /></S>,
    down: (p) => <S {...p}><path d="m6 10 6 6 6-6" /></S>,
    arrowUp: (p) => <S {...p}><path d="M12 19V5M6 11l6-6 6 6" /></S>,
    arrowRight: (p) => <S {...p}><path d="M5 12h14M13 6l6 6-6 6" /></S>,
    check: (p) => <S {...p}><path d="M5 12.5 10 17l9-10" /></S>,
    plus: (p) => <S {...p}><path d="M12 5v14M5 12h14" /></S>,
    minus: (p) => <S {...p}><path d="M5 12h14" /></S>,
    bolt: (p) => <S {...p}><path d="M13 2 4 14h7l-1 8 9-12h-7z" /></S>,
    flame: (p) => <S {...p}><path d="M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c0-1 0-2-.5-3 2 1.5 3.5 4 3.5 6.5a5 5 0 0 1-10 0C7 9 12 8 12 3z" /></S>,
    star: (p) => <S {...p}><path d="m12 3 2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8 6.8 19l1-5.8L3.6 9.1l5.8-.8z" /></S>,
    starFill: (p) => <S {...p}><path d="m12 3 2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8 6.8 19l1-5.8L3.6 9.1l5.8-.8z" fill="currentColor" /></S>,
    users: (p) => <S {...p}><circle cx="9" cy="8" r="3.2" /><path d="M3.5 20a5.5 5.5 0 0 1 11 0" /><path d="M16 5.5a3.2 3.2 0 0 1 0 6M21 20a5.5 5.5 0 0 0-4-5.3" /></S>,
    coins: (p) => <S {...p}><ellipse cx="9" cy="7" rx="6" ry="3" /><path d="M3 7v5c0 1.7 2.7 3 6 3M3 12v5c0 1.7 2.7 3 6 3" /><ellipse cx="15" cy="14" rx="6" ry="3" /><path d="M21 14v5c0 1.7-2.7 3-6 3" /></S>,
    chart: (p) => <S {...p}><path d="M4 19V9M9 19V5M14 19v-7M19 19v-4" /></S>,
    upload: (p) => <S {...p}><path d="M12 16V4m-5 5 5-5 5 5" /><path d="M5 20h14" /></S>,
    clock: (p) => <S {...p}><circle cx="12" cy="12" r="8" /><path d="M12 8v4.5l3 2" /></S>,
    dots: (p) => <S {...p}><circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none" /><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none" /><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none" /></S>,
    x: (p) => <S {...p}><path d="M6 6l12 12M18 6 6 18" /></S>,
    eye: (p) => <S {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" /><circle cx="12" cy="12" r="3" /></S>,
    info: (p) => <S {...p}><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 8h.01" /></S>,
    filter: (p) => <S {...p}><path d="M3 5h18l-7 8v6l-4-2v-4z" /></S>,
    heart: (p) => <S {...p}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" /></S>,
    tag: (p) => <S {...p}><path d="M3 12V4h8l9 9-8 8z" /><circle cx="7.5" cy="7.5" r="1.3" fill="currentColor" stroke="none" /></S>,
  };

  // ---- Wordmark: equalizer bars fused with rising bar-chart (blue -> green) ----
  function Mark({ size = 26 }) {
    const w = (size / 26) * 30;
    return (
      <svg className="brand-mark" width={w} height={size} viewBox="0 0 30 26" fill="none">
        <defs>
          <linearGradient id="cadGrad" x1="0" y1="26" x2="30" y2="0">
            <stop offset="0" stopColor="oklch(0.66 0.155 256)" />
            <stop offset="1" stopColor="oklch(0.78 0.16 158)" />
          </linearGradient>
        </defs>
        <rect x="0" y="16" width="5" height="10" rx="2" fill="url(#cadGrad)" opacity="0.55" />
        <rect x="6.2" y="10" width="5" height="16" rx="2" fill="url(#cadGrad)" opacity="0.75" />
        <rect x="12.4" y="4" width="5" height="22" rx="2" fill="url(#cadGrad)" opacity="0.9" />
        <rect x="18.6" y="9" width="5" height="17" rx="2" fill="url(#cadGrad)" />
        <rect x="24.8" y="0" width="5" height="26" rx="2" fill="url(#cadGrad)" />
      </svg>
    );
  }

  function Wordmark({ size = 26 }) {
    return (
      <div className="brand">
        <Mark size={size} />
        <span className="brand-name"><b>SoundExchange</b></span>
      </div>
    );
  }

  window.Icon = Icon;
  window.Mark = Mark;
  window.Wordmark = Wordmark;
})();