/* global React */
const { useState, useEffect, useRef } = React;

/* ---------- hooks ---------- */
function useReveal(){
  useEffect(()=>{
    const els=[...document.querySelectorAll('.reveal')];
    if(!('IntersectionObserver' in window)){els.forEach(e=>e.classList.add('in'));return;}
    const io=new IntersectionObserver((ents)=>{
      ents.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });
    },{threshold:.16,rootMargin:'0px 0px -8% 0px'});
    els.forEach(e=>io.observe(e));
    // Fallback: if IO callbacks never fire (some embedded/iframe contexts),
    // force everything visible so content is never stuck at opacity:0.
    const t=setTimeout(()=>els.forEach(e=>e.classList.add('in')),650);
    return ()=>{io.disconnect();clearTimeout(t);};
  });
}

function useCountUp(target, run, opts={}){
  const {dur=1400, decimals=0}=opts;
  const [val,setVal]=useState(0);
  useEffect(()=>{
    if(!run) return;
    let raf, start;
    const step=(t)=>{
      if(start==null) start=t;
      const p=Math.min(1,(t-start)/dur);
      const e=1-Math.pow(1-p,3);
      setVal(target*e);
      if(p<1) raf=requestAnimationFrame(step);
      else setVal(target);
    };
    raf=requestAnimationFrame(step);
    return ()=>cancelAnimationFrame(raf);
  },[run,target,dur]);
  return decimals?val.toFixed(decimals):Math.round(val);
}

/* ---------- icons (simple geometric line glyphs) ---------- */
function Icon({name, size=24}){
  const p={width:size,height:size,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",
    strokeWidth:1.7,strokeLinecap:"round",strokeLinejoin:"round"};
  const paths={
    funnel:<><path d="M3 5h18l-7 8v6l-4 2v-8z"/></>,
    lock:<><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
    timer:<><circle cx="12" cy="13" r="7.5"/><path d="M12 13V9M9.5 3.5h5"/></>,
    shield:<><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/></>,
    chart:<><path d="M4 4v16h16"/><path d="M8 15l3-4 3 3 4-6"/></>,
    network:<><circle cx="6" cy="6" r="2.4"/><circle cx="18" cy="6" r="2.4"/><circle cx="12" cy="18" r="2.4"/><path d="M7.7 7.7L11 16M16.3 7.7L13 16M8.4 6h7.2"/></>,
    coins:<><ellipse cx="9" cy="7" rx="5.5" ry="2.6"/><path d="M3.5 7v5c0 1.4 2.5 2.6 5.5 2.6"/><ellipse cx="15" cy="14" rx="5.5" ry="2.6"/><path d="M9.5 14.4V17c0 1.4 2.5 2.6 5.5 2.6s5.5-1.2 5.5-2.6v-5"/></>,
    bell:<><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 19a2 2 0 0 0 4 0"/></>,
    users:<><circle cx="9" cy="8" r="3"/><path d="M3 19c0-3.3 2.7-5 6-5s6 1.7 6 5"/><path d="M16 5.2A3 3 0 0 1 17 11M21 19c0-2.6-1.6-4.2-4-4.8"/></>,
    route:<><circle cx="6" cy="18" r="2.4"/><circle cx="18" cy="6" r="2.4"/><path d="M8 18h6a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h6"/></>,
    layers:<><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></>,
    check:<><path d="M5 12.5l4.5 4.5L19 7"/></>,
    arrow:<><path d="M5 12h14M13 6l6 6-6 6"/></>,
    spark:<><path d="M12 3l1.8 6.2L20 11l-6.2 1.8L12 19l-1.8-6.2L4 11l6.2-1.8z"/></>,
    doc:<><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5M10 13h6M10 17h6"/></>,
  };
  return <svg {...p} aria-hidden="true">{paths[name]||null}</svg>;
}

function Logo({white=false, h=30}){
  return <img src={white?"assets/tovix-logo-white.png":"assets/tovix-logo.png"}
    alt="Tovix" style={{height:h+'px',width:'auto'}} />;
}

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