/* Sound catalog + inline SVG icons (stroke-based, monochrome) */

const SOUNDS = [
  { id: 'white',  name: 'White Noise',  desc: 'Full spectrum hiss',    group: 'noise' },
  { id: 'pink',   name: 'Pink Noise',   desc: 'Balanced low hum',      group: 'noise' },
  { id: 'brown',  name: 'Brown Noise',  desc: 'Deep rumble',           group: 'noise' },
  { id: 'rain',   name: 'Rain',         desc: 'Steady pattering',      group: 'nature' },
  { id: 'storm',  name: 'Thunder',      desc: 'Rolling low storm',     group: 'nature' },
  { id: 'ocean',  name: 'Ocean',        desc: 'Breathing surf',        group: 'nature' },
  { id: 'forest', name: 'Forest',       desc: 'Leaves and song',       group: 'nature' },
  { id: 'stream', name: 'Stream',       desc: 'Running water',         group: 'nature' },
  { id: 'wind',   name: 'Wind',         desc: 'Open air drift',        group: 'nature' },
  { id: 'fan',    name: 'Fan',          desc: 'Soft mechanical hum',   group: 'mech' },
];

// Monoline SVG icons — 24×24 viewBox
const ICONS = {
  white: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
      <path d="M3 12h2M7 8v8M11 5v14M15 9v6M19 11v2M21 12h0" />
    </svg>
  ),
  pink: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
      <path d="M3 13c2-6 4-6 6 0s4 6 6 0 4-6 6 0" />
    </svg>
  ),
  brown: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
      <path d="M3 14c3-2 3 2 6 0s3 2 6 0 3 2 6 0" />
      <path d="M3 10c3-2 3 2 6 0s3 2 6 0 3 2 6 0" opacity="0.5"/>
    </svg>
  ),
  rain: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 13a4 4 0 010-8 5 5 0 019.5 1.5A3.5 3.5 0 0116 13"/>
      <path d="M8 17l-1 3M12 17l-1 3M16 17l-1 3"/>
    </svg>
  ),
  storm: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 13a4 4 0 010-8 5 5 0 019.5 1.5A3.5 3.5 0 0116 13"/>
      <path d="M12 14l-2 4h3l-2 4"/>
    </svg>
  ),
  ocean: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
      <path d="M3 10c2 0 3-2 5-2s3 2 5 2 3-2 5-2 2 1 3 1"/>
      <path d="M3 15c2 0 3-2 5-2s3 2 5 2 3-2 5-2 2 1 3 1"/>
      <path d="M3 20c2 0 3-2 5-2s3 2 5 2 3-2 5-2 2 1 3 1"/>
    </svg>
  ),
  forest: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M8 20v-3M8 17l-3-4h2L4 9h2L5 6h6l-1 3h2l-2 4h2l-3 4z"/>
      <path d="M17 20v-4M17 16l-2-3h1l-2-3h2V8h3v2h2l-2 3h1l-2 3z"/>
    </svg>
  ),
  stream: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
      <path d="M4 8c2-2 4 0 6-1s4 2 6 0 3 1 4 0"/>
      <path d="M4 14c2-2 4 0 6-1s4 2 6 0 3 1 4 0"/>
      <path d="M4 20c2-2 4 0 6-1s4 2 6 0 3 1 4 0"/>
    </svg>
  ),
  wind: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 8h11a3 3 0 100-6"/>
      <path d="M3 14h15a3 3 0 110 6"/>
      <path d="M3 11h7"/>
    </svg>
  ),
  fan: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="1.6"/>
      <path d="M12 10.4C12 6 13 4 15 4s3 2 2 4-3 2.4-5 2.4zM12 13.6C12 18 11 20 9 20s-3-2-2-4 3-2.4 5-2.4zM10.4 12C6 12 4 11 4 9s2-3 4-2 2.4 3 2.4 5zM13.6 12c4.4 0 6.4 1 6.4 3s-2 3-4 2-2.4-3-2.4-5z"/>
    </svg>
  ),
};

const GROUP_LABELS = {
  noise: 'Noise Colors',
  nature: 'Nature',
  mech: 'Mechanical',
};

window.SOUNDS = SOUNDS;
window.ICONS = ICONS;
window.GROUP_LABELS = GROUP_LABELS;
