// Shared helpers for the Armaek marketing site.
const { useState, useEffect, useRef, useCallback } = React;

/* Reveal-on-scroll: attaches to a ref, adds .in when it enters view. */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const nodes = ref.current ? [ref.current, ...ref.current.querySelectorAll('.reveal')] : [];
    const targets = (ref.current && ref.current.classList.contains('reveal'))
      ? [ref.current, ...ref.current.querySelectorAll('.reveal')]
      : ref.current ? [...ref.current.querySelectorAll('.reveal')] : [];
    if (!targets.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
    targets.forEach((t) => io.observe(t));
    return () => io.disconnect();
  }, []);
  return ref;
}

/* Count-up number that animates when scrolled into view. */
function Counter({ to, suffix = '', prefix = '', dur = 1600 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let raf, started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const t0 = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(Math.round(to * eased));
            if (p < 1) raf = requestAnimationFrame(tick);
          };
          raf = requestAnimationFrame(tick);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.5 });
    io.observe(el);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, [to, dur]);
  return <span ref={ref}>{prefix}{val.toLocaleString('sk-SK')}{suffix}</span>;
}

/* Brand image panel. With `src` renders a photo; otherwise the tactical
   blueprint graphic. Both keep the gold corner ticks + caption frame. */
function ImagePanel({ icon = 'crosshair', label, src, style = {}, className = '' }) {
  const { Icon } = window.ArmaekDesignSystem_06a5c5;
  return (
    <div className={`imgpanel ${className}`} style={style} role="img" aria-label={label || 'Armaek'}>
      {src ? (
        <>
          {/* background-image survives WP lazy-load/optimizer plugins that rewrite <img> tags */}
          <div className="ip-photo-bg" style={{ backgroundImage: `url("${window.AURL(src)}")` }} />
          <div className="ip-shade" />
        </>
      ) : (
        <>
          <div className="ip-grid" />
          <div className="ip-rings" />
          <div className="ip-cross" />
          <div className="ip-emblem"><Icon name={icon} size={64} strokeWidth={1.1} /></div>
        </>
      )}
      <span className="ip-tick tl" /><span className="ip-tick tr" />
      <span className="ip-tick bl" /><span className="ip-tick br" />
      {label && <div className="ip-tag">{label}</div>}
    </div>
  );
}

window.ArmaekLib = { useReveal, Counter, ImagePanel };