// t24-icons.jsx — icon renderers + brand logo
// Uses the project's SVG icon system: assets/icons/cat/, assets/icons/svc/, assets/icons/sub/.
// All icons are pre-built duotone tiles (rounded square with content). To render any of them
// without the built-in tile background (e.g. small inline use), wrap with <TaskerIcon raw>.

// Generic icon — uses <img> so we leverage the prebuilt SVGs as-is.
function TaskerIcon({ kind, name, size = 44, style = {}, alt }) {
  // kind: 'cat' | 'svc' | 'sub'
  const src = `assets/icons/${kind}/${name}.svg`;
  return (
    <img
      src={src}
      alt={alt ?? name}
      width={size}
      height={size}
      draggable={false}
      style={{ display: 'block', width: size, height: size, flexShrink: 0, ...style }}
    />
  );
}

// Brand logo (small): the T-chevron mark. Falls back to img of the PNG.
function TaskerMark({ size = 28, color, style = {} }) {
  // Renders a clean SVG version of the logo (chevron stack)
  const c = color || 'currentColor';
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={style} aria-label="Tasker 24">
      <defs>
        <linearGradient id="tm-g" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#0B1F3A"/>
          <stop offset="0.5" stopColor="#1E63D6"/>
          <stop offset="1" stopColor="#22D3EE"/>
        </linearGradient>
      </defs>
      <g stroke={color ? c : 'url(#tm-g)'} strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round" fill="none">
        <path d="M14 11 L50 11"/>
        <path d="M32 11 L32 56"/>
        <path d="M14 23 L32 32"/>
        <path d="M50 23 L32 32"/>
        <path d="M14 33 L32 42"/>
        <path d="M50 33 L32 42"/>
        <path d="M14 43 L32 52"/>
        <path d="M50 43 L32 52"/>
      </g>
    </svg>
  );
}

// Logo wordmark
function TaskerLogo({ size = 24, dark = false, compact = false }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <TaskerMark size={size + 4} />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <span style={{
          fontFamily: 'var(--t24-font-en)', fontWeight: 800, fontSize: size,
          color: dark ? '#fff' : 'var(--t24-navy)', letterSpacing: -0.3,
        }}>Tasker<span style={{ color: 'var(--t24-blue)' }}>24</span></span>
        {!compact && (
          <span style={{
            fontFamily: 'var(--t24-font-en)', fontWeight: 500, fontSize: 9,
            color: dark ? 'rgba(255,255,255,0.7)' : 'var(--t24-muted)',
            letterSpacing: 1.4, textTransform: 'uppercase', marginTop: 3,
          }}>Solutions</span>
        )}
      </div>
    </div>
  );
}

// Small line icons used throughout the UI (no design system files for these → inline SVG)
const L = ({ d, sw = 1.8, ...rest }) => (
  <path d={d} stroke="currentColor" strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round" {...rest}/>
);

const LineIcons = {
  search: (s=20) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M11 19a8 8 0 1 0-5.3-14M21 21l-5-5"/></svg>,
  bell:   (s=20) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9zM10 21a2 2 0 0 0 4 0"/></svg>,
  home:   (s=22) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-7H10v7H4a1 1 0 0 1-1-1z"/></svg>,
  grid:   (s=22) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/></svg>,
  list:   (s=22) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></svg>,
  user:   (s=22) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M20 21a8 8 0 0 0-16 0M12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg>,
  chat:   (s=22) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M21 12a8 8 0 0 1-11.6 7.1L4 21l1.9-5.4A8 8 0 1 1 21 12z"/></svg>,
  task:   (s=22) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M9 5h6a2 2 0 0 1 2 2v0H7v0a2 2 0 0 1 2-2z"/><L d="M5 7h14v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"/><L d="m9 13 2 2 4-4"/></svg>,
  briefcase: (s=22) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M3 8h18v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><L d="M9 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 14h18"/></svg>,
  swap:   (s=22) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M7 8h13l-3-3M17 16H4l3 3"/></svg>,
  plus:   (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 5v14M5 12h14"/></svg>,
  filter: (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M4 5h16l-6 8v6l-4-2v-4z"/></svg>,
  pin:    (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/><L d="M12 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>,
  clock:  (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18zM12 7v6l4 2"/></svg>,
  check:  (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="m5 12 5 5 9-12"/></svg>,
  x:      (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M6 6l12 12M18 6 6 18"/></svg>,
  chev:   (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="m9 6 6 6-6 6"/></svg>,
  back:   (s=20) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="m15 6-6 6 6 6"/></svg>,
  shield: (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><L d="m9 12 2 2 4-4"/></svg>,
  warn:   (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 4 2 21h20zM12 10v5M12 18v.01"/></svg>,
  star:   (s=14, fill='#F59E0B') => <svg width={s} height={s} viewBox="0 0 24 24"><path d="m12 3 2.7 5.7 6.3.9-4.5 4.4 1 6.2L12 17l-5.5 3 1-6.2L3 9.6l6.3-.9z" fill={fill} stroke={fill} strokeWidth="0.5"/></svg>,
  starO:  (s=14) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="m12 3 2.7 5.7 6.3.9-4.5 4.4 1 6.2L12 17l-5.5 3 1-6.2L3 9.6l6.3-.9z" sw={1.4}/></svg>,
  heart:  (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 21s-8-5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-8 11-8 11z"/></svg>,
  phone:  (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M22 17v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a1 1 0 0 1 1 1l1 4-2 2a14 14 0 0 0 7 7l2-2 4 1a1 1 0 0 1 1 1z"/></svg>,
  mail:   (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/><L d="m3 7 9 6 9-6"/></svg>,
  upload: (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>,
  doc:    (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z"/><L d="M14 3v5h5M8 13h8M8 17h5"/></svg>,
  lock:   (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M6 10h12v10H6zM8 10V7a4 4 0 0 1 8 0v3"/></svg>,
  eye:    (s=16) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><L d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>,
  moon:   (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z"/></svg>,
  sun:    (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5"/></svg>,
  globe:  (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>,
  gear:   (s=20) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/><L d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>,
  send:   (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/></svg>,
  camera: (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M3 8h4l2-3h6l2 3h4v12H3z"/><L d="M12 18a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg>,
  map:    (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M9 3 3 5v16l6-2 6 2 6-2V3l-6 2zM9 3v16M15 5v16"/></svg>,
  info:   (s=14) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 8h.01M11 12h1v5h1"/></svg>,
  logout: (s=18) => <svg width={s} height={s} viewBox="0 0 24 24"><L d="M9 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4M16 17l5-5-5-5M21 12H9"/></svg>,
};

Object.assign(window, { TaskerIcon, TaskerMark, TaskerLogo, LineIcons });