/* <FlutedImage> — image with fluted-glass WebGL layer. Plain <img> stays underneath as fallback (no WebGL / reduced motion). */
function FlutedImage(p){
  const cv=React.useRef(null);
  const list=p.srcs||[p.src];
  const [gl,setGl]=React.useState(false);
  const [idx,setIdx]=React.useState(0);
  const onChange=React.useRef(p.onChange);onChange.current=p.onChange;
  React.useEffect(function(){
    if(matchMedia('(prefers-reduced-motion: reduce)').matches||!window.Fluted)return;
    const f=window.Fluted(cv.current,{src:list[0],strength:p.strength||0,ribs:p.ribs||48,radius:p.radius||0,dark:p.dark==null?1:p.dark,pos:p.pos,auto:p.auto,zone:p.zone,zoneFollow:p.zoneFollow,tones:p.tones,tone:p.tone});
    if(!f)return;
    f.ready.then(function(){setGl(true);}).catch(function(){});
    let i=0,timer=null,half=null;const dur=p.duration||1700;
    if(list.length>1){timer=setInterval(function(){i=(i+1)%list.length;const n=i;f.transitionTo(list[n],dur);half=setTimeout(function(){setIdx(n);if(onChange.current)onChange.current(n);},dur/2);},p.interval||6000);}
    return function(){clearInterval(timer);clearTimeout(half);f.destroy();};
  },[]);
  return (<div className={'fl'+(gl?' is-gl':'')+(p.className?' '+p.className:'')} style={p.style}>
    <img className="fl__img" src={list[idx]} alt={p.alt||''} fetchpriority={p.priority?'high':undefined} loading={p.priority?undefined:'lazy'} />
    <canvas ref={cv} className="fl__c" aria-hidden="true"></canvas>
  </div>);
}
window.FlutedImage=FlutedImage;