/* ===== Pago na Hora — shared UI (icons, avatar, badge, logo) ===== */
const { useState, useEffect, useRef, useMemo } = React;

const ICONS = {
  grid: 'M4 13h6V4H4v9Zm10 7h6V4h-6v16ZM4 20h6v-5H4v5Z',
  contract: 'M7 3h7l5 5v13H5V5a2 2 0 0 1 2-2ZM9 13h6M9 16h6M9 10h2',
  pay: 'M3 7h18v12H3zM3 11h18M7 16h3',
  users: 'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 9a7 7 0 0 1 14 0M17 11a4 4 0 0 0 0-8M23 20a7 7 0 0 0-5-6.7',
  doc: 'M14 3v5h5M7 3h7l5 5v13H5V5a2 2 0 0 1 2-2ZM9 13h6M9 17h6',
  settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8-3a8 8 0 0 0-.2-1.8l2-1.5-2-3.4-2.3 1a8 8 0 0 0-3-1.8L14 2h-4l-.5 2.7a8 8 0 0 0-3 1.8l-2.3-1-2 3.4 2 1.5A8 8 0 0 0 4 12c0 .6 0 1.2.2 1.8l-2 1.5 2 3.4 2.3-1a8 8 0 0 0 3 1.8L10 22h4l.5-2.7a8 8 0 0 0 3-1.8l2.3 1 2-3.4-2-1.5c.1-.6.2-1.2.2-1.8Z',
  bell: 'M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
  search: 'M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14ZM21 21l-4-4',
  plus: 'M12 5v14M5 12h14',
  check: 'm5 13 4 4L19 7',
  arrowR: 'M5 12h14M13 6l6 6-6 6',
  arrowL: 'M19 12H5M11 18l-6-6 6-6',
  chevR: 'm9 6 6 6-6 6',
  chevD: 'm6 9 6 6 6-6',
  x: 'M18 6 6 18M6 6l12 12',
  building: 'M3 21h18M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16M9 7h2M9 11h2M9 15h2M19 21v-9a2 2 0 0 0-2-2h-2',
  user: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM5 21a7 7 0 0 1 14 0',
  bolt: 'M13 2 4 14h6l-1 8 9-12h-6l1-8Z',
  calendar: 'M8 2v4M16 2v4M3 9h18M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z',
  download: 'M12 3v12m0 0 4-4m-4 4-4-4M4 21h16',
  filter: 'M3 5h18l-7 8v6l-4-2v-4L3 5Z',
  more: 'M12 6h.01M12 12h.01M12 18h.01',
  logout: 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9',
  wallet: 'M3 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12M17 13h.01',
  clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM12 7v5l3 2',
  trend: 'M3 17l6-6 4 4 7-7M21 8v5M21 8h-5',
  shield: 'M12 3 4 6v5c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6l-8-3ZM9 12l2 2 4-4',
  copy: 'M9 9h10v10H9zM5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1',
  send: 'M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z',
  link: 'M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1',
  spark: 'M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z',
  chat: 'M21 11.5a8.4 8.4 0 0 1-12.6 7.4L4 21l1.9-4.5A8.4 8.4 0 1 1 21 11.5Z',
  mic: 'M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3ZM5 11a7 7 0 0 0 14 0M12 18v3',
};

function Icon({ name, size = 18, color, sw = 1.8, style }) {
  const fill = name === 'bolt' || name === 'spark';
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={fill ? (color || 'currentColor') : 'none'}
      style={{ flex: 'none', color, ...style }}>
      <path d={ICONS[name]} stroke={fill ? 'none' : 'currentColor'} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Avatar({ name, size = 36, color, src }) {
  const bg = color || PNH.colorFor(name);
  return (
    <div className="av" style={{ width: size, height: size, background: bg, fontSize: size * 0.36 }}>
      {PNH.initials(name).toUpperCase()}
    </div>
  );
}

function Badge({ status }) {
  const m = PNH.statusMeta[status] || PNH.statusMeta.rascunho;
  return (
    <span className={'badge ' + m.cls}>
      <span className="dot" style={{ background: m.dot }}></span>{m.label}
    </span>
  );
}

function KindTag({ kind }) {
  const colors = { PJ: { bg: 'var(--blue-50)', c: 'var(--blue-700)' }, MEI: { bg: 'var(--green-tint)', c: 'var(--green-600)' }, PF: { bg: '#F0EBFB', c: 'var(--violet)' } };
  const s = colors[kind] || colors.PF;
  return <span className="kindtag" style={{ background: s.bg, color: s.c }}>{kind}</span>;
}

function Logo({ light }) {
  return (
    <div className="logo">
      <span className="mark"><Icon name="bolt" size={17} color="#fff" /></span>
      Pago <span className="thin">na Hora</span>
    </div>
  );
}

function BrandMark({ size = 32 }) {
  return (
    <span className="mark" style={{ width: size, height: size, borderRadius: size * 0.28 }}>
      <Icon name="bolt" size={size * 0.53} color="#fff" />
    </span>
  );
}

Object.assign(window, { Icon, Avatar, Badge, KindTag, Logo, BrandMark, useState, useEffect, useRef, useMemo });