/* NINA — icon set (feather-style stroke) + small motion hooks.
   Exposed on window for the other Babel scripts. */
const { useState, useEffect, useRef, useCallback } = React;

// ---- icon paths ----
const ICON_PATHS = {
  home:        'M3 10.5 12 3l9 7.5M5 9.5V21h14V9.5',
  list:        'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
  repeat:      'M17 2l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3',
  calendar:    'M8 2v3M16 2v3M3 8h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z',
  card:        'M2 9h20M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zM6 15h4',
  target:      'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z',
  crown:       'M3 8l4 5 5-7 5 7 4-5v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z',
  activity:    'M3 12h4l3 8 4-16 3 8h4',
  user:        'M20 21a8 8 0 1 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
  plus:        'M12 5v14M5 12h14',
  arrowUp:     'M12 19V5M5 12l7-7 7 7',
  arrowDown:   'M12 5v14M19 12l-7 7-7-7',
  trendUp:     'M23 6l-9.5 9.5-5-5L1 18M17 6h6v6',
  check:       'M20 6 9 17l-5-5',
  checkCircle: 'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3',
  x:           'M18 6 6 18M6 6l12 12',
  chevronR:    'M9 6l6 6-6 6',
  chevronD:    'M6 9l6 6 6-6',
  chevronL:    'M15 18l-6-6 6-6',
  filter:      'M22 3H2l8 9.46V19l4 2v-8.54z',
  search:      'M21 21l-4.35-4.35M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z',
  menu:        'M3 12h18M3 6h18M3 18h18',
  bell:        'M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
  whatsapp:    'M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2z',
  edit:        'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z',
  trash:       'M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6',
  download:    'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3',
  logout:      'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9',
  shield:      'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
  sparkle:     'M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.4z',
  message:     'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
  mic:         'M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zM19 10a7 7 0 0 1-14 0M12 19v3',
  camera:      'M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
  copy:        'M9 9h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2zM5 15H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1',
  clock:       'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2',
  alert:       'M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01',
  wifi:        'M5 13a10 10 0 0 1 14 0M8.5 16.5a5 5 0 0 1 7 0M2 8.8a15 15 0 0 1 20 0M12 20h.01',
  inbox:       'M22 12h-6l-2 3h-4l-2-3H2M5.5 5.5 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.5A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.5z',
  settings:    'M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6',
  pie:         'M21.2 15.9A10 10 0 1 1 8.1 2.8M22 12A10 10 0 0 0 12 2v10z',
  refresh:     'M23 4v6h-6M1 20v-6h6M3.5 9a9 9 0 0 1 14.8-3.4L23 10M1 14l4.7 4.4A9 9 0 0 0 20.5 15',
  lock:        'M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zM7 11V7a5 5 0 0 1 10 0v4',
  image:       'M3 3h18a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM21 15l-5-5L5 21',
};

function Icon({ name, size, style, className }) {
  const d = ICON_PATHS[name];
  return (
    <svg className={className} width={size || 20} height={size || 20} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={style}>
      <path d={d} />
    </svg>
  );
}

// ---- count-up hook (0 → value, ~700ms ease-out) ----
function useCountUp(target, opts) {
  const { duration = 700, decimals = 0 } = opts || {};
  const [val, setVal] = useState(target); // default = final value, so a stalled rAF still shows the right number
  const reduced = typeof window !== 'undefined' && window.matchMedia &&
    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  useEffect(() => {
    if (reduced) { setVal(target); return; }
    let raf, startT;
    const ease = (t) => 1 - Math.pow(1 - t, 3);
    const tick = (ts) => {
      if (!startT) startT = ts;
      const p = Math.min(1, (ts - startT) / duration);
      setVal(target * ease(p));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration, reduced]);
  return decimals ? val.toFixed(decimals) : Math.round(val);
}

// money count-up → "R$ 1.234,56"
function useCountUpBRL(cents) {
  const v = useCountUp(cents, { duration: 750 });
  return 'R$ ' + (v / 100).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

// ---- in-view (animate once when entering viewport) ----
function useInView(opts) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let done = false;
    const trigger = () => { if (!done) { done = true; setSeen(true); } };
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { trigger(); io.disconnect(); } });
    }, { threshold: opts && opts.threshold || 0.01, rootMargin: '0px 0px -40px 0px' });
    io.observe(el);
    // fallback: if IO doesn't fire (offscreen iframes, throttled tabs), draw anyway
    const t = setTimeout(() => { trigger(); io.disconnect(); }, 450);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
  return [ref, seen];
}

Object.assign(window, { Icon, useCountUp, useCountUpBRL, useInView });

// ---- white-label palette (re-themes the whole project, persisted) ----
function applyNinaPalette(p) {
  if (!p) return;
  const r = document.documentElement.style;
  r.setProperty('--coral', p.accent);
  r.setProperty('--coral-strong', p.strong);
  r.setProperty('--coral-tint', p.tint);
  // paleta completa: o fundo, superfícies quentes e linhas derivam do acento
  r.setProperty('--page', `color-mix(in srgb, ${p.accent} 4%, #FFFFFF)`);
  r.setProperty('--surface-warm', `color-mix(in srgb, ${p.accent} 8%, #FFFFFF)`);
  r.setProperty('--line', `color-mix(in srgb, ${p.accent} 14%, #FFFFFF)`);
  r.setProperty('--amber-tint', `color-mix(in srgb, ${p.accent} 12%, #FFF7E8)`);
  try { localStorage.setItem('nina-palette', JSON.stringify(p)); } catch (e) {}
}
function loadNinaPalette() {
  try { const s = localStorage.getItem('nina-palette'); if (s) applyNinaPalette(JSON.parse(s)); } catch (e) {}
}
loadNinaPalette();
Object.assign(window, { applyNinaPalette, loadNinaPalette });