/* Tabler-style outline icons (recreated, stroke-based) */
const ICON_PATHS = {
  home: 'M5 12l-2 0l9 -9l9 9l-2 0 M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7 M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6',
  mic: 'M9 2m0 3a3 3 0 0 1 3 -3a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3a3 3 0 0 1 -3 -3z M5 10a7 7 0 0 0 14 0 M8 21l8 0 M12 17l0 4',
  message: 'M8 9h8 M8 13h6 M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3z',
  history: 'M12 8l0 4l2 2 M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5',
  progress: 'M3 17l6 -6l4 4l8 -8 M14 7l7 0l0 7',
  plan: 'M5 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0 M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0 M7 19v-4a4 4 0 0 1 4 -4h2a4 4 0 0 0 4 -4',
  flame: 'M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 2z',
  target: 'M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0 M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0',
  play: 'M7 4v16l13 -8z',
  arrowRight: 'M5 12l14 0 M13 18l6 -6 M13 6l6 6',
  user: 'M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0 M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2',
  logout: 'M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2 M9 12h12l-3 -3 M18 15l3 -3',
  mail: 'M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z M3 7l9 6l9 -6',
  lock: 'M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0 M8 11v-4a4 4 0 1 1 8 0v4',
  eye: 'M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0 M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6',
  eyeOff: 'M10.585 10.587a2 2 0 0 0 2.829 2.828 M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87 M3 3l18 18',
  check: 'M5 12l5 5l10 -10',
  send: 'M10 14l11 -11 M21 3l-6.5 19a.55 .55 0 0 1 -1 0l-3.5 -8l-8 -3.5a.55 .55 0 0 1 0 -1l19 -6.5',
  clock: 'M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M12 7v5l3 3',
  calendar: 'M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z M16 3v4 M8 3v4 M4 11h16',
  chevronRight: 'M9 6l6 6l-6 6',
  chevronDown: 'M6 9l6 6l6 -6',
  sparkle: 'M12 3l1.5 5.5l5.5 1.5l-5.5 1.5l-1.5 5.5l-1.5 -5.5l-5.5 -1.5l5.5 -1.5z',
  refresh: 'M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4 M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4',
  volume: 'M15 8a5 5 0 0 1 0 8 M17.7 5a9 9 0 0 1 0 14 M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5',
  volumeOff: 'M15 8a5 5 0 0 1 1.912 4.934m-1.377 2.602a5 5 0 0 1 -.535 .464 M17.7 5a9 9 0 0 1 2.362 11.086m-1.676 2.299a9 9 0 0 1 -.686 .615 M9.069 5.054l.431 -.554a.8 .8 0 0 1 1.5 .5v2 M11 11v8a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l1 -1.286 M3 3l18 18',
  bulb: 'M3 12h1 M12 3v1 M20 12h1 M5.6 5.6l.7 .7 M18.4 5.6l-.7 .7 M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3 M9.7 17h4.6',
  trophy: 'M8 21l8 0 M12 17l0 4 M7 4l10 0 M17 4v8a5 5 0 0 1 -10 0v-8 M5 9a2 2 0 0 1 -2 -2v-1a1 1 0 0 1 1 -1h3 M19 9a2 2 0 0 0 2 -2v-1a1 1 0 0 0 -1 -1h-3',
  bookmark: 'M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2',
  search: 'M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0 M21 21l-6 -6',
  settings: 'M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065 M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0',
  google: 'GOOGLE',
};

function Icon({ name, size = 22, stroke = 1.75, className = '', style }) {
  if (name === 'waves') {
    return (
      <svg className={'icon ' + className} width={size} height={size} viewBox="0 0 24 24"
        fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" style={style}>
        <line x1="4" y1="10" x2="4" y2="14" />
        <line x1="8.5" y1="7" x2="8.5" y2="17" />
        <line x1="13" y1="4" x2="13" y2="20" />
        <line x1="17.5" y1="8" x2="17.5" y2="16" />
        <line x1="21" y1="10.5" x2="21" y2="13.5" />
      </svg>
    );
  }
  if (name === 'google') {
    return (
      <svg className={'icon ' + className} width={size} height={size} viewBox="0 0 24 24" style={style}>
        <path fill="#4285F4" d="M21.6 12.227c0 -.709 -.064 -1.39 -.182 -2.045H12v3.868h5.382a4.6 4.6 0 0 1 -1.996 3.018v2.51h3.232c1.891 -1.742 2.982 -4.305 2.982 -7.35z" />
        <path fill="#34A853" d="M12 22c2.7 0 4.964 -.895 6.618 -2.423l-3.232 -2.509c-.895 .6 -2.04 .955 -3.386 .955 -2.605 0 -4.81 -1.76 -5.595 -4.123H3.064v2.59A9.996 9.996 0 0 0 12 22z" />
        <path fill="#FBBC05" d="M6.405 13.9a6 6 0 0 1 0 -3.8V7.51H3.064a10 10 0 0 0 0 8.98z" />
        <path fill="#EA4335" d="M12 5.977c1.468 0 2.786 .505 3.823 1.496l2.868 -2.868C16.96 2.99 14.695 2 12 2A9.996 9.996 0 0 0 3.064 7.51l3.341 2.59C7.19 7.736 9.395 5.977 12 5.977z" />
      </svg>
    );
  }
  const d = ICON_PATHS[name];
  return (
    <svg className={'icon ' + className} width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {(d || '').split(' M').map((seg, i) => (
        <path key={i} d={(i === 0 ? seg : 'M' + seg)} />
      ))}
    </svg>
  );
}

function Wordmark({ size }) {
  return (
    <div className="wordmark">
      <span className="wordmark-glyph">
        <Icon name="message" size={18} stroke={2} />
      </span>
      <span className="wordmark-text" style={size ? { fontSize: size } : undefined}>Talk <b>English</b></span>
    </div>
  );
}

Object.assign(window, { Icon, Wordmark });