/* Salz & Pfeffer Particle Badge — External JS (immune to WP encoding) */
(function(){
  const C=document.getElementById('sp-badge');
  if(!C)return;
  // Hide fallback when canvas is active
  const fb=document.getElementById('sp-badge-fallback');
  const ctx=C.getContext('2d',{willReadFrequently:true});
  const DPR=window.devicePixelRatio||1;
  const W=Math.min(480, window.innerWidth - 32), H=62;
  C.width=W*DPR; C.height=H*DPR;
  C.style.width=W+'px'; C.style.height=H+'px';
  ctx.scale(DPR,DPR);
  // Responsive split: left side shrinks on mobile
  const SEP_X=Math.min(235, Math.floor(W * 0.42));
  const TEXT_AREA_X=SEP_X+12;
  const TEXT_AREA_W=W-TEXT_AREA_X-10;
  const LEFT_FONT=W<400?10:12;
  const LEFT_SUB_FONT=W<400?8:10;
  const RIGHT_FONT=Math.min(24, Math.floor(TEXT_AREA_W * 0.14));
  let mouse={x:-999,y:-999};
  let particles=[];
  let floaters=[];
  let RET=0.06;
  let exploding=false;
  const GAP=1, MR=40, MF=5, DAMP=0.93;
  const off=document.createElement('canvas');
  off.width=TEXT_AREA_W*DPR; off.height=H*DPR;
  const oc=off.getContext('2d');
  oc.scale(DPR,DPR);

  function buildParticles(){
    oc.clearRect(0,0,TEXT_AREA_W,H);
    oc.fillStyle='#000'; oc.fillRect(0,0,TEXT_AREA_W,H);
    oc.fillStyle='#fff';
    oc.font='bold '+RIGHT_FONT+'px Unbounded,sans-serif';
    oc.textAlign='center'; oc.textBaseline='middle';
    oc.fillText('Salz & Pfeffer',TEXT_AREA_W/2,H/2);
    const d=oc.getImageData(0,0,TEXT_AREA_W*DPR,H*DPR).data;
    const scanW=TEXT_AREA_W*DPR, scanH=H*DPR;
    particles=[];
    for(let y=0;y<scanH;y+=DPR)for(let x=0;x<scanW;x+=DPR){
      const i=(y*scanW+x)*4;
      if(d[i]>20){
        const px=x/DPR+TEXT_AREA_X, py=y/DPR;
        particles.push({x:px,y:py,bx:px,by:py,vx:0,vy:0,sz:Math.random()*.6+.4,a:d[i]/255});
      }
    }
  }

  function initFloaters(){
    floaters=[];
    for(let i=0;i<50;i++){
      floaters.push({
        x:Math.random()*W, y:Math.random()*H,
        vx:(Math.random()-.5)*1.2, vy:(Math.random()-.5)*1.2,
        sz:Math.random()*1.4+.5, a:Math.random()*.35+.1
      });
    }
  }

  C.addEventListener('mousemove',function(e){
    const r=C.getBoundingClientRect();
    mouse.x=e.clientX-r.left; mouse.y=e.clientY-r.top;
  });
  C.addEventListener('mouseleave',function(){mouse.x=-999;mouse.y=-999});

  function animate(){
    ctx.clearRect(0,0,W*DPR,H*DPR);
    ctx.fillStyle='#050505';
    ctx.beginPath();
    ctx.roundRect(0,0,W,H,10);
    ctx.fill();
    ctx.fillStyle='rgba(127,164,62,0.25)';
    ctx.fillRect(SEP_X,8,1,H-16);
    ctx.fillStyle='#ddd';
    ctx.font='500 '+LEFT_FONT+'px Space Grotesk,sans-serif';
    ctx.textBaseline='middle';
    ctx.textAlign='left';
    ctx.fillText(W<400?'Design + Marketing by':'Design + Onlinemarketing by',12,H/2-8);
    ctx.fillStyle='#999';
    ctx.font='400 '+LEFT_SUB_FONT+'px Space Grotesk,sans-serif';
    ctx.fillText('www.salz-pfeffer.io',12,H/2+10);
    for(let i=0;i<floaters.length;i++){
      const f=floaters[i];
      f.x+=f.vx; f.y+=f.vy;
      if(f.x<-5)f.x=W+3;if(f.x>W+5)f.x=-3;
      if(f.y<-5)f.y=H+3;if(f.y>H+5)f.y=-3;
      ctx.fillStyle='rgba(255,255,255,'+f.a+')';
      ctx.beginPath();ctx.arc(f.x,f.y,f.sz/2,0,Math.PI*2);ctx.fill();
    }
    for(let i=0;i<particles.length;i++){
      const p=particles[i];
      const dx=mouse.x-p.x, dy=mouse.y-p.y;
      const dist=Math.sqrt(dx*dx+dy*dy);
      if(dist<MR){
        const f=(MR-dist)/MR;
        const ang=Math.atan2(dy,dx);
        p.vx-=Math.cos(ang)*f*MF;
        p.vy-=Math.sin(ang)*f*MF;
      }
      p.vx+=(p.bx-p.x)*RET;
      p.vy+=(p.by-p.y)*RET;
      p.vx*=DAMP; p.vy*=DAMP;
      p.x+=p.vx; p.y+=p.vy;
      if(p.x<2){p.x=2;p.vx*=-.5}
      if(p.x>W-2){p.x=W-2;p.vx*=-.5}
      if(p.y<2){p.y=2;p.vy*=-.5}
      if(p.y>H-2){p.y=H-2;p.vy*=-.5}
      const disp=Math.sqrt((p.x-p.bx)**2+(p.y-p.by)**2);
      if(disp>5){
        ctx.fillStyle='rgba(127,200,80,'+Math.min(1,0.5+disp/50)+')';
        ctx.fillRect(p.x,p.y,p.sz,p.sz);
        continue;
      } else if(disp>2){
        ctx.fillStyle='rgba(180,220,120,'+Math.min(1,p.a*.9)+')';
      } else {
        ctx.fillStyle='rgba(255,255,255,'+Math.min(1,p.a*1.3)+')';
      }
      ctx.fillRect(p.x,p.y,p.sz,p.sz);
    }
    requestAnimationFrame(animate);
  }

  setInterval(function(){
    if(mouse.x===-999 && !exploding && particles.length){
      const idx=Math.floor(Math.random()*particles.length);
      particles[idx].vx+=(Math.random()-.5)*1.5;
      particles[idx].vy+=(Math.random()-.5)*1.5;
    }
  },60);

  function explode(){
    exploding=true;
    for(let i=0;i<particles.length;i++){
      const p=particles[i];
      const ang=Math.random()*Math.PI*2;
      const force=15+Math.random()*20;
      p.vx=Math.cos(ang)*force;
      p.vy=Math.sin(ang)*force;
    }
    RET=0.002;
    setTimeout(function(){RET=0.004},2000);
    setTimeout(function(){RET=0.008},4000);
    setTimeout(function(){RET=0.015},5500);
    setTimeout(function(){RET=0.03},7000);
    setTimeout(function(){RET=0.06;exploding=false;setTimeout(explode,1500)},8500);
  }

  // Start only when visible
  let badgeStarted=false;
  function startBadge(){
    if(badgeStarted)return;
    badgeStarted=true;
    document.fonts.ready.then(function(){
      buildParticles();
      initFloaters();
      // Show canvas, hide fallback
      C.style.display='block';
      if(fb) fb.style.display='none';
      animate();
      setTimeout(explode,3000);
    });
  }
  var badgeObs=new IntersectionObserver(function(entries){
    if(entries[0].isIntersecting){ startBadge(); badgeObs.disconnect(); }
  },{threshold:0.01});
  badgeObs.observe(C);
  setTimeout(startBadge,5000);
})();