/* KYDT shared motion + helpers. GSAP-driven reveals, parallax, count-up. */
const { useEffect: mUseEffect, useRef: mUseRef, useState: mUseState } = React;

if(window.gsap && window.ScrollTrigger){ window.gsap.registerPlugin(window.ScrollTrigger); }
else { document.documentElement.classList.add('no-motion'); }

/* Build/refresh all scroll-driven animations for the elements currently in the DOM. */
function initScrollFX(){
  if(!window.gsap || !window.ScrollTrigger) return;
  const gsap = window.gsap, ST = window.ScrollTrigger;
  ST.getAll().forEach(t=>t.kill());
  gsap.utils.toArray('[data-reveal]').forEach(el=>{
    const delay = parseFloat(el.dataset.revealDelay||0);
    const x = parseFloat(el.dataset.revealX||0);
    gsap.fromTo(el,{opacity:0,y:34,x},{opacity:1,y:0,x:0,duration:0.85,delay,ease:'power3.out',
      scrollTrigger:{trigger:el,start:'top 86%'}, onStart(){ el.classList.add('is-in'); }});
  });
  gsap.utils.toArray('[data-parallax]').forEach(el=>{
    const amt = parseFloat(el.dataset.parallax||-40);
    gsap.fromTo(el,{y:-amt*0.5},{y:amt*0.5,ease:'none',
      scrollTrigger:{trigger:el.closest('[data-parallax-scope]')||el,start:'top bottom',end:'bottom top',scrub:0.6}});
  });
  gsap.utils.toArray('[data-count]').forEach(el=>{
    const end = parseFloat(el.dataset.count);
    const suffix = el.dataset.suffix||'';
    const dec = parseInt(el.dataset.dec||0,10);
    const obj = {v:0};
    ST.create({trigger:el,start:'top 90%',once:true,onEnter(){
      gsap.to(obj,{v:end,duration:1.6,ease:'power2.out',onUpdate(){ el.textContent = obj.v.toFixed(dec).replace(/\B(?=(\d{3})+(?!\d))/g,',') + suffix; }});
    }});
  });
  gsap.utils.toArray('[data-progress]').forEach(el=>{
    const pct = parseFloat(el.dataset.progress)+'%';
    gsap.fromTo(el,{width:'0%'},{width:pct,duration:1.6,ease:'power2.out',
      scrollTrigger:{trigger:el,start:'top 92%',once:true}});
  });
  ST.refresh();
}

/* Hook: run scroll FX after a page mounts / changes. */
function useScrollFX(dep){
  mUseEffect(()=>{
    const id = requestAnimationFrame(()=>requestAnimationFrame(()=>{ initScrollFX(); if(window.lucide) window.lucide.createIcons(); }));
    return ()=>{ cancelAnimationFrame(id); if(window.ScrollTrigger) window.ScrollTrigger.getAll().forEach(t=>t.kill()); };
  },[dep]);
}

/* Reveal wrapper */
function Reveal({children, delay=0, x=0, as='div', className, style, ...rest}){
  const Tag = as;
  return <Tag data-reveal="" data-reveal-delay={delay} data-reveal-x={x} className={className} style={style} {...rest}>{children}</Tag>;
}

/* Icon helper (Lucide) */
function I(name, size=20){ return <i data-lucide={name} style={{width:size,height:size,flexShrink:0}} />; }

/* Faded cultural motif backdrop for a section (never the manu). */
function MotifBackdrop({variant='wave-bottom', opacity=0.1}){
  const src = {
    'wave-bottom':'assets/pattern-pasifika-wave-light.png',
    'wave-top':'assets/pattern-pasifika-wave-light.png',
    'band-top':'assets/pattern-diamond-band-light.png',
    'band-jade':'assets/pattern-diamond-band-jade.png',
  }[variant];
  const pos = variant==='wave-top'||variant==='band-top'
    ? {top:0,left:0,width:'100%',transform:'scaleY(-1)'}
    : {bottom:0,left:0,width:'100%'};
  return <div className="kydt-motif-bg" aria-hidden="true"><img src={src} alt="" style={{...pos,opacity}} /></div>;
}

/* Ocean hero canvas (Three.js) */
function OceanCanvas(){
  const ref = mUseRef(null);
  mUseEffect(()=>{
    if(!ref.current || !window.KYDTOcean) return;
    const ctrl = window.KYDTOcean.init(ref.current);
    return ()=>{ ctrl && ctrl.dispose(); };
  },[]);
  return <div ref={ref} style={{position:'absolute',inset:0,zIndex:0}} aria-hidden="true" />;
}

Object.assign(window, { initScrollFX, useScrollFX, Reveal, KIcon:I, MotifBackdrop, OceanCanvas });