/* ====================== OKTRA — shared helpers ====================== */
const { useState, useEffect, useRef, useCallback } = React;

/* Reveal-on-scroll: adds .is-in when element enters viewport */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal, .reveal-l, .reveal-line');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

/* Count-up when in view */
function Counter({ to, suffix = '', prefix = '', dur = 1600, decimals = 0 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  const done = useRef(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !done.current) {
          done.current = true;
          const start = performance.now();
          const motion = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--motion')) || 1;
          const d = dur / Math.max(0.4, motion);
          const tick = (now) => {
            const p = Math.min(1, (now - start) / d);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(to * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.5 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, dur]);
  return (
    <span ref={ref} className="counter">{prefix}{val.toFixed(decimals)}{suffix}</span>
  );
}

const ArrowUR = ({ size = 16, cls = 'arrow' }) => (
  <svg className={cls} width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M4 12L12 4M12 4H5M12 4V11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Plus = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M7 1V13M1 7H13" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
  </svg>
);

const Lock = ({ size = 13 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <rect x="2.5" y="6" width="9" height="6.5" rx="1" stroke="currentColor" strokeWidth="1.2"/>
    <path d="M4.3 6V4.3a2.7 2.7 0 0 1 5.4 0V6" stroke="currentColor" strokeWidth="1.2"/>
  </svg>
);

const Check = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
    <path d="M4 10.5L8 14.5L16 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

/* smooth-scroll to a section id */
function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) {
    const y = el.getBoundingClientRect().top + window.scrollY - 1;
    window.scrollTo({ top: y, behavior: 'smooth' });
  }
}

/* responsive: true when the media query matches */
function useMediaQuery(q) {
  const [m, setM] = useState(() => (typeof window !== 'undefined' ? window.matchMedia(q).matches : false));
  useEffect(() => {
    const mq = window.matchMedia(q);
    const h = (e) => setM(e.matches);
    setM(mq.matches);
    mq.addEventListener('change', h);
    return () => mq.removeEventListener('change', h);
  }, [q]);
  return m;
}

Object.assign(window, { useReveal, Counter, ArrowUR, Plus, Lock, Check, scrollToId, useMediaQuery });