/* Shared primitives: icons (SVG), hooks, helpers */
const { useState, useEffect, useRef, useLayoutEffect, useMemo } = React;

// Icons — simple SVGs, sharp, 1.5 stroke
const Icon = ({ name, size = 18, stroke = 1.5, className = "" }) => {
  const paths = {
    arrow:  <><path d="M5 12h14" /><path d="m13 5 7 7-7 7" /></>,
    arrowDown: <><path d="M12 5v14" /><path d="m5 13 7 7 7-7" /></>,
    play:   <path d="M8 5v14l11-7z" />,
    plus:   <><path d="M12 5v14" /><path d="M5 12h14" /></>,
    minus:  <path d="M5 12h14" />,
    check:  <path d="M20 6 9 17l-5-5" />,
    spark:  <><path d="M12 3v4"/><path d="M12 17v4"/><path d="M3 12h4"/><path d="M17 12h4"/><path d="m5.6 5.6 2.8 2.8"/><path d="m15.6 15.6 2.8 2.8"/><path d="m18.4 5.6-2.8 2.8"/><path d="m8.4 15.6-2.8 2.8"/></>,
    dot:    <circle cx="12" cy="12" r="3"/>,
    home:   <><path d="M3 10 12 3l9 7"/><path d="M5 9v12h14V9"/></>,
    box:    <><path d="M3 7h18v12H3z"/><path d="M3 7V4h18v3"/><path d="M9 7v12"/></>,
    layers: <><path d="m12 3 9 5-9 5-9-5 9-5z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></>,
    pen:    <><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></>,
    grid:   <><path d="M3 3h8v8H3z"/><path d="M13 3h8v8h-8z"/><path d="M3 13h8v8H3z"/><path d="M13 13h8v8h-8z"/></>,
    video:  <><rect x="3" y="5" width="14" height="14" rx="2"/><path d="m17 9 4-2v10l-4-2"/></>,
    upload: <><path d="M12 3v14"/><path d="m5 10 7-7 7 7"/><path d="M3 21h18"/></>,
    cpu:    <><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></>,
    check2: <path d="M20 6 9 17l-5-5"/>,
    menu:   <><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></>,
    close:  <><path d="m6 6 12 12"/><path d="m18 6-12 12"/></>,
    linked: <><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 1 0-4 0v7h-4v-12h4v2a4 4 0 0 1 2-2Z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></>,
    mail:   <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>,
    phone:  <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/>,
    clock:  <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
    chev:   <path d="m6 9 6 6 6-6"/>,
    ext:    <><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14 21 3"/></>,
    monitor:<><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></>,
    chart:  <><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></>,
    bolt:   <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/>,
    wrench: <path d="M14.7 6.3a4 4 0 1 1-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.5-2.5 2.5-2.5z"/>,
  };
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24"
         fill="none" stroke="currentColor" strokeWidth={stroke}
         strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

// Reveal-on-scroll hook
const useReveal = () => {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
};

// Smooth scroll helper
const scrollTo = (id) => {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

// Tweak context (simple)
const TweakCtx = React.createContext({});

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