// Shared icons + small UI atoms for Parasitas em Foco

const { useState, useEffect, useRef, useMemo } = React;

window.Icon = function Icon({ name, size = 22, color = 'currentColor', stroke = 1.8 }) {
  const p = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    home: <><path d="M3 11l9-7 9 7v9a1 1 0 01-1 1h-5v-7H9v7H4a1 1 0 01-1-1v-9z" {...p}/></>,
    scan: <><path d="M4 8V5a1 1 0 011-1h3M20 8V5a1 1 0 00-1-1h-3M4 16v3a1 1 0 001 1h3M20 16v3a1 1 0 01-1 1h-3" {...p}/><path d="M4 12h16" {...p}/></>,
    book: <><path d="M4 4h7a3 3 0 013 3v13a2 2 0 00-2-2H4V4zM20 4h-2a3 3 0 00-3 3v13a2 2 0 012-2h3V4z" {...p}/></>,
    more: <><circle cx="12" cy="6" r="1.4" fill={color} stroke="none"/><circle cx="12" cy="12" r="1.4" fill={color} stroke="none"/><circle cx="12" cy="18" r="1.4" fill={color} stroke="none"/></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6" {...p}/></>,
    chevron: <><path d="M9 6l6 6-6 6" {...p}/></>,
    chevronDown: <><path d="M6 9l6 6 6-6" {...p}/></>,
    chevronUp: <><path d="M6 15l6-6 6 6" {...p}/></>,
    sparkle: <><path d="M12 3l1.6 4.8L18 9.4l-4.4 1.6L12 16l-1.6-5L6 9.4l4.4-1.6L12 3z" {...p}/></>,
    shield: <><path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z" {...p}/></>,
    flask: <><path d="M9 3h6M10 3v6l-5 9a2 2 0 001.7 3h10.6a2 2 0 001.7-3l-5-9V3" {...p}/></>,
    heart: <><path d="M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z" {...p}/></>,
    print: <><path d="M6 9V3h12v6M6 18H4a1 1 0 01-1-1v-6a2 2 0 012-2h14a2 2 0 012 2v6a1 1 0 01-1 1h-2M6 14h12v7H6z" {...p}/></>,
    leaf: <><path d="M4 20c0-8 6-14 16-14 0 10-6 16-14 16-1 0-2-1-2-2z" {...p}/><path d="M4 20l10-10" {...p}/></>,
    drop: <><path d="M12 3c0 0-6 7-6 11a6 6 0 0012 0c0-4-6-11-6-11z" {...p}/></>,
    bug: <><path d="M9 5l1.5 1.5h3L15 5M6 12H3M6 8H4M6 16H4M21 12h-3M20 8h-2M20 16h-2" {...p}/><rect x="7" y="7" width="10" height="13" rx="5" {...p}/></>,
    check: <><path d="M4 12l5 5L20 6" {...p}/></>,
    close: <><path d="M6 6l12 12M18 6L6 18" {...p}/></>,
    alert: <><path d="M12 4l10 17H2L12 4z" {...p}/><path d="M12 10v4M12 18h.01" {...p}/></>,
    info: <><circle cx="12" cy="12" r="9" {...p}/><path d="M12 8h.01M12 12v4" {...p}/></>,
    lock: <><rect x="3" y="11" width="18" height="11" rx="2" ry="2" {...p}/><path d="M7 11V7a5 5 0 0110 0v4" {...p}/></>,
    bell: <><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" {...p}/></>,
    download: <><path d="M12 3v12M6 11l6 6 6-6M4 21h16" {...p}/></>,
    filter: <><path d="M4 6h16M7 12h10M10 18h4" {...p}/></>,
    search: <><circle cx="11" cy="11" r="7" {...p}/><path d="M21 21l-5-5" {...p}/></>,
    clock: <><circle cx="12" cy="12" r="9" {...p}/><path d="M12 7v5l3 2" {...p}/></>,
    user: <><circle cx="12" cy="8" r="4" {...p}/><path d="M4 21c0-4 4-7 8-7s8 3 8 7" {...p}/></>,
    pregnant: <><circle cx="12" cy="5" r="2" {...p}/><path d="M12 7c-2 0-3 2-3 4v3a3 3 0 003 3 3 3 0 003-3v-3c0-2-1-4-3-4z" {...p}/><path d="M9 17v4M15 17v4" {...p}/></>,
    plus: <><path d="M12 5v14M5 12h14" {...p}/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block', flexShrink: 0 }}>
      {paths[name]}
    </svg>
  );
};

window.Pill = function Pill({ children, color, bg, style = {} }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
      fontSize: 11, letterSpacing: 0.5, textTransform: 'uppercase',
      color: color || '#fff', background: bg || 'rgba(255,255,255,0.12)',
      fontWeight: 600, lineHeight: 1,
      ...style,
    }}>{children}</span>
  );
};

window.SectionLabel = function SectionLabel({ children, color, style = {} }) {
  return (
    <div style={{
      fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
      fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase',
      color: color || 'rgba(22,32,31,0.5)', fontWeight: 500,
      ...style,
    }}>{children}</div>
  );
};

window.ProbBar = function ProbBar({ value, color, height = 6, bg = 'rgba(22,32,31,0.08)' }) {
  return (
    <div style={{ height, background: bg, borderRadius: 999, overflow: 'hidden', width: '100%' }}>
      <div style={{
        width: `${Math.max(2, Math.min(100, value * 100))}%`,
        height: '100%', background: color,
        borderRadius: 999,
        transition: 'width 0.6s cubic-bezier(0.22, 1, 0.36, 1)',
      }}/>
    </div>
  );
};