// PizzaArt.jsx — animated illustrated naan-pizzas for the website menu.
// Exposes window.PizzaArt = { NaanPizzaArt, FLAVOURS }.
(function () {
  // Inject keyframes + steam styling once.
  if (!document.getElementById('nv-pizza-art-css')) {
    var s = document.createElement('style');
    s.id = 'nv-pizza-art-css';
    s.textContent = [
      '.nv-pz-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;',
        'background:radial-gradient(120% 90% at 50% 38%, var(--char-700), var(--char-800));}',
      '.nv-pz-stage::after{content:"";position:absolute;left:50%;bottom:18%;width:62%;height:30%;transform:translateX(-50%);',
        'background:radial-gradient(ellipse at center, rgba(255,138,0,.22), transparent 70%);filter:blur(8px);pointer-events:none;}',
      '.nv-pz-float{position:relative;width:74%;z-index:2;animation:nvFloat 5s ease-in-out infinite;transform-origin:center bottom;}',
      '.nv-pz-float svg{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45));}',
      '.nv-pz-steam{position:absolute;left:50%;top:14%;width:96px;height:80px;transform:translateX(-50%);z-index:3;pointer-events:none;}',
      '.nv-pz-steam i{position:absolute;bottom:0;width:15px;height:15px;border-radius:50%;opacity:0;filter:blur(3px);',
        'background:radial-gradient(circle at 50% 50%, rgba(255,242,224,.55), rgba(255,242,224,0) 70%);}',
      '.nv-pz-steam i:nth-child(1){left:20px;animation:nvRise 3.4s ease-in infinite;}',
      '.nv-pz-steam i:nth-child(2){left:42px;animation:nvRise 3.4s ease-in .8s infinite;}',
      '.nv-pz-steam i:nth-child(3){left:64px;animation:nvRise 3.4s ease-in 1.7s infinite;}',
      '@keyframes nvFloat{0%,100%{transform:translateY(0) rotate(-.6deg);}50%{transform:translateY(-6px) rotate(.6deg);}}',
      '@keyframes nvRise{0%{opacity:0;transform:translateY(0) scale(.7);}25%{opacity:.9;}100%{opacity:0;transform:translateY(-64px) scale(1.7);}}',
      '@media (prefers-reduced-motion: reduce){.nv-pz-float{animation:none;}.nv-pz-steam i{display:none;}}'
    ].join('');
    document.head.appendChild(s);
  }

  var FLAVOURS = {
    'naangherita': { sauce:'#b23a22', scatter:[
        {color:'#f4ead4', n:13, r:[9,13], soft:true},
        {color:'#2f7d34', n:7,  r:[5,8], leaf:true} ] },
    'punjabi-pepperoni': { sauce:'#a8331c', scatter:[
        {color:'#f4ead4', n:9, r:[8,11], soft:true},
        {color:'#9c2b27', n:11, r:[10,13], rim:'#6f1c1a'},
        {color:'#ff8a00', n:9,  r:[2.5,4] } ] },
    'veggie-vibes': { sauce:'#bb4221', scatter:[
        {color:'#f4ead4', n:8, r:[8,11], soft:true},
        {color:'#d8392b', n:5, r:[6,9] }, {color:'#3a8a3a', n:5, r:[6,9] },
        {color:'#e7b32c', n:7, r:[3.5,5] },
        {color:'#8a3d6e', n:6, r:[4,7], leaf:true} ] },
    'tandoori-mixed-grill': { sauce:'#9c3318', scatter:[
        {color:'#f4ead4', n:7, r:[7,10], soft:true},
        {color:'#d4632a', n:12, r:[9,12], rim:'#a8431a'},
        {color:'#8a3d6e', n:6, r:[4,7], leaf:true},
        {color:'#3f8f3a', n:7, r:[2.5,4] } ] }
  };

  function mulberry32(a){ return function(){ a|=0; a=a+0x6D2B79F5|0; var t=Math.imul(a^a>>>15,1|a); t=t+Math.imul(t^t>>>7,61|t)^t; return ((t^t>>>14)>>>0)/4294967296; }; }
  function naanPath(){ return "M120 16 C168 14 214 50 216 100 C218 150 176 196 120 196 C66 196 24 152 24 102 C24 56 70 18 120 16 Z"; }

  function buildSvg(id){
    var f = FLAVOURS[id]; if (!f) return '';
    var rnd = mulberry32(id.split('').reduce(function(a,c){return a+c.charCodeAt(0);},7));
    var cx=120, cy=108, rx=84, ry=82;
    function pt(maxFrac){ var a=rnd()*Math.PI*2, rad=Math.sqrt(rnd())*maxFrac; return [cx+Math.cos(a)*rx*rad, cy+Math.sin(a)*ry*rad]; }
    var bits='';
    f.scatter.forEach(function(s){
      for(var i=0;i<s.n;i++){
        var p=pt(0.82), r=s.r[0]+rnd()*(s.r[1]-s.r[0]);
        if(s.leaf){
          var rot=Math.floor(rnd()*360);
          bits+='<ellipse cx="'+p[0].toFixed(1)+'" cy="'+p[1].toFixed(1)+'" rx="'+(r*1.5).toFixed(1)+'" ry="'+(r*0.7).toFixed(1)+'" fill="'+s.color+'" transform="rotate('+rot+' '+p[0].toFixed(1)+' '+p[1].toFixed(1)+')"/>';
        } else {
          if(s.rim) bits+='<circle cx="'+p[0].toFixed(1)+'" cy="'+p[1].toFixed(1)+'" r="'+(r+1.4).toFixed(1)+'" fill="'+s.rim+'"/>';
          bits+='<circle cx="'+p[0].toFixed(1)+'" cy="'+p[1].toFixed(1)+'" r="'+r.toFixed(1)+'" fill="'+s.color+'" opacity="'+(s.soft?0.92:1)+'"/>';
          if(s.soft) bits+='<circle cx="'+(p[0]-r*0.3).toFixed(1)+'" cy="'+(p[1]-r*0.3).toFixed(1)+'" r="'+(r*0.4).toFixed(1)+'" fill="#fff" opacity="0.35"/>';
        }
      }
    });
    var char='';
    for(var k=0;k<9;k++){ var a=rnd()*Math.PI*2; var x=cx+Math.cos(a)*rx*0.95, y=cy+Math.sin(a)*ry*0.95;
      char+='<circle cx="'+x.toFixed(1)+'" cy="'+y.toFixed(1)+'" r="'+(3+rnd()*4).toFixed(1)+'" fill="#4a2c14" opacity="0.55"/>'; }
    return '<svg viewBox="0 0 240 212" xmlns="http://www.w3.org/2000/svg">'+
      '<defs><radialGradient id="g-'+id+'" cx="42%" cy="38%" r="70%">'+
        '<stop offset="0%" stop-color="#f0d8a8"/><stop offset="70%" stop-color="#e3bd7e"/><stop offset="100%" stop-color="#c69552"/>'+
      '</radialGradient><clipPath id="clip-'+id+'"><path d="'+naanPath()+'"/></clipPath></defs>'+
      '<path d="'+naanPath()+'" fill="url(#g-'+id+')" stroke="#7a4a22" stroke-width="3"/>'+
      '<g clip-path="url(#clip-'+id+')">'+char+
        '<ellipse cx="120" cy="108" rx="68" ry="66" fill="'+f.sauce+'" opacity="0.92"/>'+
        '<ellipse cx="120" cy="108" rx="68" ry="66" fill="none" stroke="'+f.sauce+'" stroke-width="6" opacity="0.5"/>'+bits+
      '</g></svg>';
  }

  function NaanPizzaArt(props) {
    var svg = React.useMemo(function(){ return buildSvg(props.flavour); }, [props.flavour]);
    return React.createElement('div', { className: 'nv-pz-stage' },
      React.createElement('div', { className: 'nv-pz-steam' },
        React.createElement('i'), React.createElement('i'), React.createElement('i')),
      React.createElement('div', {
        className: 'nv-pz-float',
        style: { animationDelay: (-(Math.random()*4)).toFixed(2) + 's' },
        dangerouslySetInnerHTML: { __html: svg }
      })
    );
  }

  window.PizzaArt = { NaanPizzaArt: NaanPizzaArt, FLAVOURS: FLAVOURS, buildSvg: buildSvg };
})();