/* global React */
// Icons + Plug-bot mascot. All inherit currentColor.
const { createElement: h } = React;

const Ico = ({ d, size = 16, sw = 1.6, fill = false, ...rest }) =>
  h('svg', { viewBox: '0 0 24 24', width: size, height: size, fill: fill ? 'currentColor' : 'none', stroke: 'currentColor', strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round', ...rest }, h('path', { d }));

const Icons = {
  arrow:     (p) => h(Ico, { ...p, d: 'M5 12h14M13 5l7 7-7 7' }),
  arrowDown: (p) => h(Ico, { ...p, d: 'M12 5v14M5 12l7 7 7-7' }),
  arrowUp:   (p) => h(Ico, { ...p, d: 'M12 19V5M5 12l7-7 7 7' }),
  check:     (p) => h(Ico, { ...p, d: 'M4 12l5 5L20 6' }),
  x:         (p) => h(Ico, { ...p, d: 'M6 6l12 12M18 6L6 18' }),
  plus:      (p) => h(Ico, { ...p, d: 'M12 5v14M5 12h14' }),
  minus:     (p) => h(Ico, { ...p, d: 'M5 12h14' }),
  search:    (p) => h(Ico, { ...p, d: 'M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM21 21l-4.3-4.3' }),
  menu:      (p) => h(Ico, { ...p, d: 'M3 6h18M3 12h18M3 18h18' }),
  filter:    (p) => h(Ico, { ...p, d: 'M3 5h18M6 12h12M10 19h4' }),
  camera:    (p) => h(Ico, { ...p, d: 'M3 8a2 2 0 0 1 2-2h2l2-2h6l2 2h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z' }),
  mic:       (p) => h(Ico, { ...p, d: 'M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zM5 11a7 7 0 0 0 14 0M12 18v4M8 22h8' }),
  battery:   (p) => h(Ico, { ...p, d: 'M3 8h15v8H3zM18 11h2v2h-2zM6 10v4M9 10v4' }),
  signal:    (p) => h(Ico, { ...p, d: 'M2 20h2v-4H2zM7 20h2v-8H7zM12 20h2v-12h-2zM17 20h2v-16h-2z', fill: true, sw: 0 }),
  wifi:      (p) => h(Ico, { ...p, d: 'M5 12.55a11 11 0 0 1 14 0M8.5 16.05a6 6 0 0 1 7 0M12 20h.01M2 8.82a15 15 0 0 1 20 0' }),
  router:    (p) => h(Ico, { ...p, d: 'M3 14h18v6H3zM7 14V8a5 5 0 0 1 10 0v6M6 17h.01M10 17h.01M14 17h.01M18 17h.01' }),
  backpack:  (p) => h(Ico, { ...p, d: 'M6 9V7a6 6 0 0 1 12 0v2M5 9h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1zM7 14h10v3H7z' }),
  zap:       (p) => h(Ico, { ...p, d: 'M13 2L4 14h7l-1 8 9-12h-7z' }),
  shield:    (p) => h(Ico, { ...p, d: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' }),
  book:      (p) => h(Ico, { ...p, d: 'M4 4h6a3 3 0 0 1 3 3v13a3 3 0 0 0-3-3H4zM20 4h-6a3 3 0 0 0-3 3v13a3 3 0 0 1 3-3h6z' }),
  user:      (p) => h(Ico, { ...p, d: 'M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75' }),
  tag:       (p) => h(Ico, { ...p, d: 'M3 12V4a1 1 0 0 1 1-1h8l10 10-9 9zM7 7h.01' }),
  tool:      (p) => h(Ico, { ...p, d: 'M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94L4.7 22.3a2.4 2.4 0 1 1-3.41-3.41l9.83-8.83a6 6 0 0 1 7.94-7.94z' }),
  play:      (p) => h(Ico, { ...p, d: 'M6 4l14 8-14 8z', fill: true }),
  external:  (p) => h(Ico, { ...p, d: 'M7 17L17 7M7 7h10v10' }),
  dot:       (p) => h(Ico, { ...p, d: 'M12 12.01', sw: 4 }),
  clock:     (p) => h(Ico, { ...p, d: 'M12 6v6l4 2M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20z' }),
  star:      (p) => h(Ico, { ...p, d: 'M12 2l3 7h7l-6 5 2 8-6-4-6 4 2-8-6-5h7z', fill: true }),
  download:  (p) => h(Ico, { ...p, d: 'M12 3v12M5 12l7 7 7-7M5 21h14' }),
  share:     (p) => h(Ico, { ...p, d: 'M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v13' }),
  car:       (p) => h(Ico, { ...p, d: 'M3 17v-5l2-5h14l2 5v5M5 17h14M7 17v3M17 17v3M7 13h.01M17 13h.01' }),
  globe:     (p) => h(Ico, { ...p, d: 'M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20' }),
  twitch:    (p) => h(Ico, { ...p, d: 'M4 3h17v11l-4 4h-4l-3 3H8v-3H4zM10 7v6M15 7v6', sw: 1.6 }),
  youtube:   (p) => h(Ico, { ...p, d: 'M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4zM10 9l5 3-5 3z', sw: 1.6 }),
  tiktok:    (p) => h(Ico, { ...p, d: 'M15 2v12.5A4.5 4.5 0 1 1 10.5 10M15 2a5 5 0 0 0 5 5' }),
  kick:      (p) => h(Ico, { ...p, d: 'M4 4h4v6h2l4-6h5l-5 8 5 8h-5l-4-6H8v6H4z' }),
};

// Plug-bot mascot
const PlugBot = ({ size = 26, animate = true }) => (
  h('svg', { viewBox: '0 0 32 32', width: size, height: size, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
    // body — plug shape
    h('rect', { x: 7, y: 9, width: 18, height: 16, rx: 3, fill: 'var(--accent)' }),
    // prongs
    h('rect', { x: 11, y: 5, width: 2.5, height: 5, rx: 1, fill: 'var(--accent)' }),
    h('rect', { x: 18.5, y: 5, width: 2.5, height: 5, rx: 1, fill: 'var(--accent)' }),
    // eyes
    h('circle', { cx: 13, cy: 16, r: 1.8, fill: 'var(--accent-ink)' }),
    h('circle', { cx: 19, cy: 16, r: 1.8, fill: 'var(--accent-ink)' }),
    // mouth
    h('rect', { x: 13.5, y: 20, width: 5, height: 1.5, rx: 0.75, fill: 'var(--accent-ink)' }),
    // antenna dot
    animate && h('circle', { cx: 16, cy: 2, r: 1.5, fill: 'var(--accent)', opacity: 0.8 }),
    animate && h('line', { x1: 16, y1: 3, x2: 16, y2: 5, stroke: 'var(--accent)', strokeWidth: 1 }),
  )
);

// Brand wordmark
const Wordmark = ({ live = true }) => (
  h('div', { className: 'brand' },
    h('div', { className: 'brand-mark' }, h(PlugBot, { size: 24 })),
    h('span', null, 'livestreamers'),
    h('span', { style: { color: 'var(--fg-4)' } }, '.org'),
    live && h('span', { className: 'dot-live', title: 'live' }),
  )
);

window.Icons = Icons;
window.PlugBot = PlugBot;
window.Wordmark = Wordmark;