/* Shared UI: brand mark, icons, hooks. Exports to window. */
const { useEffect: useEffectUI, useRef: useRefUI, useState: useStateUI } = React;

/* Brand mark — inlines the traced logo so currentColor themes it. */
function Mark({ size = 28, style }) {
  return (
    <svg viewBox={window.CURIOUSER_VIEWBOX} width={size} height={size}
         style={{ display: 'block', ...style }} aria-hidden="true"
         dangerouslySetInnerHTML={{ __html: window.CURIOUSER_PATH_D
           ? `<path fill="currentColor" fill-rule="evenodd" d="${window.CURIOUSER_PATH_D}"/>` : '' }} />
  );
}

/* Lucide-ish line icons, 1.5px stroke, currentColor. */
function Icon({ name, size = 18, style }) {
  const p = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round',
    strokeLinejoin: 'round', style: { display: 'block', ...style },
  };
  switch (name) {
    case 'arrow-up':   return <svg {...p}><path d="M12 19V5M5 12l7-7 7 7"/></svg>;
    case 'arrow-right':return <svg {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-left': return <svg {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>;
    case 'sparkle':    return <svg {...p}><path d="M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6L12 3Z"/><path d="M19 15l.7 2.3L22 18l-2.3.7L19 21l-.7-2.3L16 18l2.3-.7L19 15Z"/></svg>;
    case 'moon':       return <svg {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>;
    case 'sun':        return <svg {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>;
    case 'copy':       return <svg {...p}><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>;
    case 'check':      return <svg {...p}><path d="M20 6 9 17l-5-5"/></svg>;
    case 'corner':     return <svg {...p}><path d="M9 10l-5 5 5 5"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/></svg>;
    case 'menu':       return <svg {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'x':          return <svg {...p}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    default: return null;
  }
}

/* Reveal-on-scroll. Pass the current view so it re-arms per route
   (NOT every render — otherwise the observer churns and never fires).
   A timeout fallback guarantees content is never stranded at opacity:0. */
function useReveal(dep) {
  useEffectUI(() => {
    const els = Array.from(document.querySelectorAll('.reveal:not(.in)'));
    if (!els.length) return;
    const show = (el) => el.classList.add('in');
    let io = null;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver((ents, obs) => {
        ents.forEach(en => { if (en.isIntersecting) { show(en.target); obs.unobserve(en.target); } });
      }, { threshold: 0.06, rootMargin: '0px 0px -5% 0px' });
      els.forEach((e, i) => { e.style.transitionDelay = Math.min(i * 40, 260) + 'ms'; io.observe(e); });
    } else {
      els.forEach(show);
    }
    // safety net: anything still hidden after a beat becomes visible
    const fallback = setTimeout(() => els.forEach(show), 1400);
    return () => { clearTimeout(fallback); if (io) io.disconnect(); };
  }, [dep]);
}

Object.assign(window, { Mark, Icon, useReveal });