/* shared hooks + icon set → window */
const { useState, useEffect, useRef, useCallback } = React;

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

/* count-up number when in view */
function CountUp({ to, dur=1400, suffix='', prefix='', decimals=0 }){
  const ref = useRef(null);
  const [val,setVal] = useState(0);
  useEffect(()=>{
    let raf, started=false;
    const io = new IntersectionObserver((es)=>{
      es.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(to*eased);
            if(p<1) raf=requestAnimationFrame(tick);
          };
          raf=requestAnimationFrame(tick);
        }
      });
    },{threshold:0.4});
    if(ref.current) io.observe(ref.current);
    return ()=>{ io.disconnect(); cancelAnimationFrame(raf); };
  },[to,dur]);
  return React.createElement('span',{ref},
    prefix + val.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g,',') + suffix);
}

/* tiny inline icon set (stroke) */
const I = {
  arrow:   <path d="M5 12h14M13 6l6 6-6 6" />,
  spark:   <path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z" />,
  layers:  <path d="M12 3l9 5-9 5-9-5 9-5zM3 14l9 5 9-5" />,
  shield:  <path d="M12 3l8 3v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6z" />,
  truck:   <path d="M3 7h11v8H3zM14 10h4l3 3v2h-7zM7 19a2 2 0 100-4 2 2 0 000 4zM18 19a2 2 0 100-4 2 2 0 000 4z" />,
  moon:    <path d="M20 14a8 8 0 11-9-11 6.5 6.5 0 009 11z" />,
  cam:     <path d="M3 7h13v10H3zM16 10l5-3v10l-5-3z" />,
  clipboard:<path d="M9 4h6v3H9zM7 4h2v3H7M15 4h2v16H5V4h2M9 11h6M9 15h6" />,
  pin:     <path d="M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11zM12 12a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />,
  user:    <path d="M12 12a4 4 0 100-8 4 4 0 000 8zM4 21c0-4 3.6-6 8-6s8 2 8 6" />,
  wrench:  <path d="M14 7a4 4 0 01-5 5l-5 5 2 2 5-5a4 4 0 005-5l-2 2-2-2 2-2z" />,
  box:     <path d="M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8" />,
  doc:     <path d="M7 3h7l5 5v13H7zM14 3v5h5" />,
  chart:   <path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />,
  bed:     <path d="M3 8v10M3 12h14a4 4 0 014 4v2H3M7 12V9h6v3" />,
  cart:    <path d="M3 4h2l2 12h11l2-8H6M9 20a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM17 20a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />,
  cog:     <path d="M12 9a3 3 0 100 6 3 3 0 000-6zM4 12l-1.5-1 1-3 1.8.3a6 6 0 011.4-.8L7 5h4l.3 1.7a6 6 0 011.4.8l1.8-.3 1 3-1.5 1c.1.5.1 1 0 1.5l1.5 1-1 3-1.8-.3a6 6 0 01-1.4.8L11 19H7l-.3-1.7a6 6 0 01-1.4-.8L3.5 17l-1-3z" transform="scale(0.9) translate(1.3,1.3)" />,
  store:   <path d="M4 9l1-5h14l1 5M4 9h16v11H4zM4 9a2.5 2.5 0 005 0 2.5 2.5 0 005 0 2.5 2.5 0 005 0M9 20v-5h6v5" />,
  refresh: <path d="M20 12a8 8 0 11-2.3-5.6M20 4v4h-4" />,
  check:   <path d="M5 12l4 4L19 6" />,
  upload:  <path d="M12 16V4M7 9l5-5 5 5M5 20h14" />,
  send:    <path d="M4 12l16-7-7 16-2-7-7-2z" />,
  quote:   <path d="M7 7h5v5c0 3-2 4-4 4M14 7h5v5c0 3-2 4-4 4" />,
  flag:    <path d="M5 21V4h12l-2 4 2 4H5" />,
  bolt:    <path d="M13 3L4 14h6l-1 7 9-11h-6z" />,
};
function Icon({ name, size=22 }){
  return <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
    stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{I[name]}</svg>;
}

window.useReveal = useReveal;
window.CountUp = CountUp;
window.Icon = Icon;
window.PC_I = I;