// icons.jsx — inline-SVG icons (lucide geometry) + shared hooks
// Robust under React re-render; no external icon font.

function Icon({ name, size = 18, stroke = 1.75, className, style }) {
  const common = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round',
    strokeLinejoin: 'round', className, style,
  };
  switch (name) {
    case 'arrow-up-right':
      return <svg {...common}><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg>;
    case 'arrow-right':
      return <svg {...common}><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>;
    case 'arrow-down':
      return <svg {...common}><path d="M12 5v14"/><path d="m6 13 6 6 6-6"/></svg>;
    case 'sun':
      return <svg {...common}><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 'moon':
      return <svg {...common}><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>;
    case 'plus':
      return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus':
      return <svg {...common}><path d="M5 12h14"/></svg>;
    case 'check':
      return <svg {...common}><path d="M20 6 9 17l-5-5"/></svg>;
    case 'spark':
      return <svg {...common}><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg>;
    case 'sparkle':
      return <svg {...common}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>;
    case 'zap':
      return <svg {...common}><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>;
    case 'layers':
      return <svg {...common}><path d="m12 2 9 5-9 5-9-5z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></svg>;
    case 'target':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></svg>;
    case 'compass':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2 5-5 2 2-5z"/></svg>;
    case 'pen':
      return <svg {...common}><path d="M12 19l7-7-4-4-7 7-1 5z"/><path d="m15 8 1-1"/></svg>;
    case 'mega':
      return <svg {...common}><path d="M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1Z"/><path d="M15 8a4 4 0 0 1 0 8"/></svg>;
    case 'layout':
      return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>;
    case 'globe':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z"/></svg>;
    case 'gauge':
      return <svg {...common}><path d="M12 14 16 9"/><path d="M4 18a9 9 0 1 1 16 0"/></svg>;
    case 'route':
      return <svg {...common}><circle cx="6" cy="19" r="2.5"/><circle cx="18" cy="5" r="2.5"/><path d="M8.5 19H14a3 3 0 0 0 0-6h-4a3 3 0 0 1 0-6h5.5"/></svg>;
    default:
      return <svg {...common}><circle cx="12" cy="12" r="9"/></svg>;
  }
}

// shared IntersectionObserver reveal
function useReveal() {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll('.reveal'));
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } });
    }, { threshold: 0.16, rootMargin: '0px 0px -8% 0px' });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  });
}

// scroll progress (0..1) for nav + parallax
function useScroll() {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    let t = 0;
    const on = () => { if (t) return; t = requestAnimationFrame(() => { setY(window.scrollY); t = 0; }); };
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  return y;
}

// the DA beacon mark (inline, currentColor + cyan beam)
function BeaconMark({ size = 26 }) {
  return (
    <svg width={size} height={size * 1.33} viewBox="0 0 120 160" fill="none" style={{ display: 'block' }} aria-hidden="true">
      <path d="M54 26 L66 26 L70 116 L50 116 Z" fill="currentColor"/>
      <path d="M52 26 L68 26 L60 12 Z" fill="currentColor"/>
      <circle cx="60" cy="138" r="11" fill="currentColor"/>
      <line x1="60" y1="20" x2="118" y2="20" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"/>
      <line x1="60" y1="20" x2="2" y2="20" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" opacity="0.5"/>
      <circle cx="60" cy="20" r="3.5" fill="var(--accent)"/>
    </svg>
  );
}

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