https://kotajoe.co.za/_next/static/chunks/app/(marketing)/kotas/page-aef2c05287b84bde.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7627],{6179:(e,t,r)=>{"use strict";r.d(t,{KotasKlapTitle:()=>w});var a=r(95155),n=r(12115),l=r(23763);r(93144);let s=["K","L","A","P"],o="cubic-bezier(.22,.9,.32,1)",i="cubic-bezier(.55,.06,.78,.2)",c="cubic-bezier(.34,1.56,.64,1)",u="drop-shadow(0 6px 10px rgba(0,0,0,0.45))",f="drop-shadow(0 10px 20px rgba(252,4,8,0.55)) drop-shadow(0 4px 8px rgba(0,0,0,0.35)) brightness(1.14)",d="brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0))",m=(e,t,r)=>Math.max(t,Math.min(r,e)),p=(e,t,r)=>e+(t-e)*r,h=e=>1-(1-e)**3;function x(e,t,r,a,n){e.style.transform="translate3d(".concat(t,"px,").concat(r,"px,0) rotate(").concat(a,"deg) scale(").concat(n,")")}function g(e,t){let r=e.getBoundingClientRect(),a=t.getBoundingClientRect();return{x:a.left-r.left,y:a.top-r.top,w:a.width,h:a.height,cx:a.left-r.left+a.width/2,cy:a.top-r.top+a.height/2}}let v=(e,t,r,a,n)=>"translate(".concat(e,"px,").concat(t,"px) rotate(").concat(r,"deg) scale(").concat(a,", ").concat(null!=n?n:a,")");function w(e){let{autoPlay:t=!0,autoPlayDelayMs:r=700,replayOnScrollUp:w=!0}=e,y=(0,n.useRef)(null),b=(0,n.useRef)(null),k=(0,n.useRef)(null),M=(0,n.useRef)(null),j=(0,n.useRef)(null),N=(0,n.useRef)([]),R=(0,n.useRef)(null),C=(0,n.useRef)(null),S=(0,n.useRef)(null),L=(0,n.useRef)([]),A=(0,n.useRef)(void 0),E=(0,n.useRef)([]),T=(0,n.useRef)({cancelled:!1}),P=(0,n.useRef)(!1),K=(0,n.useRef)(!1),I=(0,n.useRef)(!1),z=(0,n.useRef)(0),[F,_]=(0,n.use

1State)(!1),[q,B]=(0,n.useState)(!1),D=(0,n.useCallback)(()=>{let e=b.current,t=k.current,r=M.current,a=j.current,n=R.current,l=C.current,s=S.current,m=N.current.filter(Boolean);if(!e||!t||!r||!a||!n||!l||!s||4!==m.length)return{anims:[],letterPlans:[]};L.current.forEach(e=>e.cancel()),L.current=[],s.innerHTML="",m.forEach(e=>{e.style.transition="",e.style.transform="",e.style.filter=d,e.style.opacity=""}),t.style.transform="",r.style.transform="",r.style.opacity="",r.style.filter="",a.style.transform="",a.style.filter="",l.style.transform="",l.style.opacity="",l.style.filter="";let p=parseFloat(getComputedStyle(t).fontSize),h=g(e,r),x=g(e,a),w=1.56*p,y=563.02/642.16*w;n.style.width="".concat(w,"px"),n.style.height="".concat(y,"px"),n.style.left="".concat(h.cx,"px"),n.style.top="".concat(h.cy,"px");let A=x.cx-h.cx,E=A-.12*x.w,T=x.y-h.cy-1.05*y,P=A-.04*x.w,K=x.y-h.cy-.52*y,I=function(e,t,r,a,n){var l;let s=e.closest("section"),o=null==s?void 0:s.getBoundingClientRect(),i=t.getBoundingClientRect().bottom,c=null!=(l=null==o?void 0:o.bottom)?l:window.innerHeight,u=Math.max(20,.65*n),f=Math.max(1.6*n,c-i-u),d=Math.min(.96*f,Math.max(2.6*n,.38*window.innerHeight)),m=Math.min(7.2*n,.42*e.getBoundingClientRect().width);return r.map((t,r)=>{let l=g(e,t).cx-a,s=(r-1.5)*n*.48;return{landX:Math.max(-m,Math.min(m,l+((Math.random()-.5)*n*5.4+s))),landY:Math.max(1.65*n,Math.min(.98*f,d*(.82+.28*Math.random())+Math.random()*n*1.35+(r-1.5)*n*.42)),tumble:(Math.random()-.5)*72,landedScale:.58+.32*Math.random(),hitDelay:.0055*r+.012*Math.random(),hitLift:5+14*Math.random(),hitKnockX:(Math.random()-.5)*n*.95+.4*s,hitScale:1.2+.18*Math.random(),dropDelay:.008*r+.012*Math.random()}})}(e,a,m,x.cx,p),z={duration:8e3,iterations:1,fill:"forwards"},F=[];F.push(l.animate([{offset:0,transform:v(0,0,-8,0),opacity:0,filter:"none"},{offset:.04,transform:v(0,0,-8,0),opacity:0,filter:"none",easing:o},{offset:.065,transform:v(0,0,-8,1.16),opacity:1,filter:"none",easing:o},{offset:.088,transform:v(0,0,-6,1),opacity:1,filter:"none",easing:"ease-in-out"},{offset:.143,transform:v(1.18*A,.45*T,-28,1.16),opacity:1,filter:"none",easing:"ease-in-out"},{offset:.208,transform:v(.78*E,1.04*T,-56,1.34),opacity:1,filter:"none",easing:i},{offset:.247,transform:v(.7*E,1.08*T,-64,1.3668),opacity:1,filter:"none",easing:"cubic-bezier(.7,0,.84,.2)"},{offset:.283-.002,transform:v(.68*E,1.06*T,-58,1.34),opacity:1,filter:"none"},{offset:.283,transform:v(P,K,96,1.52),opacity:1,filter:f,easing:o},{offset:.292,transform:v(P,K+4,103,1.4592,1.2768),opacity:1,filter:f,easing:o},{offset:.308,transform:v(P,K+2,100,1.368,1.3376000000000001),opacity:1,filter:"none",easing:o},{offset:.325,transform:v(P,K-16,92,1.12),opacity:1,filter:u,easing:o},{offset:.377,transform:v(P,K-6,96,1),opacity:1,filter:u,easing:"ease-in-out"},{offset:.455,transform:v(.55*A,.85*T,40,1),opacity:1,filter:u,easing:"ease-in-out"},{offset:.52,transform:v(0,0,-4,1),opacity:1,filter:u,easing:i},{offset:.553,transform:v(0,0,-10,0),opacity:0,filter:"none",easing:i},{offset:1,transform:v(0,0,-8,0),opacity:0,filter:"none"}],z)),F.push(r.animate([{offset:0,transform:"scale(1) rotate(0deg)",opacity:1},{offset:.04,transform:"scale(1) rotate(0deg)",opacity:1,easing:i},{offset:.068,transform:"scale(.15) rotate(190deg)",opacity:0,easing:"linear"},{offset:.553,transform:"scale(.15) rotate(190deg)",opacity:0,easing:c},{offset:.585,transform:"scale(1.12) rotate(0deg)",opacity:1,easing:o},{offset:.61,transform:"scale(1) rotate(0deg)",opacity:1},{offset:1,transform:"scale(1) rotate(0deg)",opacity:1}],z)),F.push(a.animate([{offset:0,transform:"translateY(0) scale(1,1)",filter:"none"},{offset:.283-.002,transform:"translateY(0) scale(1,1)",filter:"none"},{offset:.292,transform:"translateY(9px) scale(1.06,.78)",filter:"brightness(1.85) drop-shadow(0 0 18px rgba(252,4,8,0.5))",easing:c},{offset:.308,transform:"translateY(4px) scale(1.03,.9)",filter:"none",easing:o},{offset:.34,transform:"translateY(0) scale(1,1)",filter:"none",easing:o},{offset:1,transform:"translateY(0) scale(1,1)",filter:"none"}],z)),F.push(t.animate([{offset:0,transform:"translate(0,0)"},{offset:.283,transform:"translate(0,0)"},{offset:.288,transform:"translate(-3px,2px)"},{offset:.294,transform:"translate(3px,-2px)"},{offset:.3,transform:"translate(-2px,1px)"},{offset:.312,transform:"translate(0,0)"},{offset:1,transform:"translate(0,0)"}],z));let _=x.cx,q=x.y+2,B=document.createElement("div");

1B.className="kotas-klap-bloom",B.style.left="".concat(_,"px"),B.style.top="".concat(q,"px"),s.appendChild(B),F.push(B.animate([{offset:0,transform:"scale(0.2)",opacity:0},{offset:.283,transform:"scale(0.2)",opacity:0},{offset:.292,transform:"scale(1.1)",opacity:.95,easing:o},{offset:.328,transform:"scale(2.4)",opacity:0},{offset:1,transform:"scale(2.4)",opacity:0}],z));let D=document.createElement("div");D.className="kotas-klap-ring",D.style.left="".concat(_,"px"),D.style.top="".concat(q,"px"),s.appendChild(D),F.push(D.animate([{offset:0,transform:"scale(.2)",opacity:0},{offset:.283,transform:"scale(.2)",opacity:0},{offset:.292,transform:"scale(.5)",opacity:.9,easing:o},{offset:.328,transform:"scale(3.2)",opacity:0},{offset:1,transform:"scale(3.2)",opacity:0}],z));let W=document.createElement("div");W.className="kotas-klap-ring kotas-klap-ring--soft",W.style.left="".concat(_,"px"),W.style.top="".concat(q,"px"),W.style.width="52px",W.style.height="52px",W.style.margin="-26px 0 0 -26px",s.appendChild(W),F.push(W.animate([{offset:0,transform:"scale(0.15)",o

1pacity:0},{offset:.283,transform:"scale(0.15)",opacity:0},{offset:.292,transform:"scale(0.7)",opacity:.65,easing:o},{offset:.348,transform:"scale(4.2)",opacity:0},{offset:1,transform:"scale(4.2)",opacity:0}],z));let Y=["#fc0408","#ff5757","#ffffff","#ffd2d2"];for(let e=0;e<20;e++){var O;let t=document.createElement("div");t.className="kotas-klap-shard";let r=5+8*Math.random();t.style.width="".concat(r,"px"),t.style.height="".concat(r,"px"),t.style.left="".concat(_,"px"),t.style.top="".concat(q,"px"),t.style.background=null!=(O=Y[e%Y.length])?O:Y[0],t.style.borderRadius=.5>Math.random()?"2px":"50%",s.appendChild(t);let a=-Math.PI/2+(Math.random()-.5)*Math.PI*1.25,n=40+90*Math.random(),l=Math.cos(a)*n,o=Math.sin(a)*n-10,i=540*Math.random()-270;F.push(t.animate([{offset:0,transform:"translate(-50%,-50%) scale(0) rotate(0deg)",opacity:0},{offset:.283,transform:"translate(-50%,-50%) scale(0) rotate(0deg)",opacity:0},{offset:.292,transform:"translate(-50%,-50%) scale(1) rotate(0deg)",opacity:1,easing:"cubic-bezier(.15,.6,.3,1)"},{offset:.39,transform:"translate(calc(-50% + ".concat(l,"px), calc(-50% + ").concat(o,"px)) scale(.6) rotate(").concat(i,"deg)"),opacity:0},{offset:1,transform:"translate(calc(-50% + ".concat(l,"px), calc(-50% + ").concat(o,"px)) scale(.6) rotate(").concat(i,"deg)"),opacity:0}],z))}return L.current=F,{anims:F,letterPlans:I}},[]),W=(0,n.useCallback)(()=>{var e,t;if(P.current||K.current)return;T.current.cancelled=!0,E.current.forEach(clearTimeout),E.current=[],T.current={cancelled:!1},A.current&&(clearTimeout(A.current),A.current=void 0),P.current=!0;let{anims:r,letterPlans:a}=D();if(0===r.length){P.current=!1;return}let n=N.current.filter(Boolean),l=(e=T.current,t=E.current,new Promise(r=>{if(0===n.length)return void r();let l=0,s=()=>{(l+=1)===n.length&&r()},o=(r,a)=>{t.push(setTimeout(()=>{e.cancelled||a()},r))};n.forEach((t,r)=>{let n=a[r];if(!n)return void s();let l=(.283+n.hitDelay)*8e3,i=l+105+8e3*n.dropDelay,c=-(n.hitLift+5);o(l,()=>{t.style.transition="transform 95ms cubic-bezier(0.15, 1.55, 0.35, 1), filter 95ms ease-out",t.style.filter="brightness(2.35) drop-shadow(0 0 14px rgba(252,4,8,0.62)) drop-shadow(0 0 4px rgba(255,255,255,0.35))",x(t,n.hitKnockX,c,0,n.hitScale)}),o(i,()=>{t.style.transition="",t.style.filter=d;let a=n.hitKnockX,l=780+48*r,s=performance.now();!function r(o){if(e.cancelled)return;let i=m((o-s)/l,0,1),u=p(a,n.landX,h(i)),f=p(c,n.landY,i**3);x(t,u,f,p(0,n.tumble,h(i)),p(n.hitScale,n.landedScale,1-(1-i)**4)),i<1&&requestAnimationFrame(r)}(s)}),o((.778+.008*r)*8e3,()=>{let a=n.landX,l=n.landY,o=n.tumble;!function(e,t,r,a){let n=performance.now();!function l(s){if(null==a?void 0:a.cancelled)return;let o=m((s-n)/e,0,1);t(o),o<1?requestAnimationFrame(l):(null==a?void 0:a.cancelled)||null==r||r()}(n)}(1300+180*r,e=>{let r=1-(1-e)**4;x(t,p(a,0,r),p(l,0,r),p(o,0,r),p(n.landedScale,1,r))},()=>{x(t,0,0,0,1),t.style.filter=d,s()},e)})})})),s=k.current;s&&(s.classList.remove("kotas-klap-display--impact"),A.current=setTimeout(()=>{s.classList.remove("kotas-klap-display--impact"),s.offsetWidth,s.classList.add("kotas-klap-display--impact"),window.setTimeout(()=>s.classList.remove("kotas-klap-display--impact"),520)},2264)),Promise.all([...r.map(e=>e.finished.catch(()=>void 0)),l]).then(()=>{P.current=!1})},[D]);return((0,n.useEffect)(()=>{let e=window.matchMedia("(prefers-reduced-motion: reduce)").matches;K.current=e,_(e),B(!0)},[]),(0,n.useEffect)(()=>{var e;let a;if(!q||F)return;let n=!1,s=++z.current,o=()=>{n||s!==z.current||requestAnimationFrame(()=>{requestAnimationFrame(()=>{n||s!==z.current||W()})})},i=()=>{n||s!==z.current||(a=setTimeout(o,r))};t&&Promise.race([(0,l.Mx)(),new Promise(e=>{window.setTimeout(e,2200)})]).then(()=>{n||i()});let c=e=>{e.persisted&&t&&!P.current&&!K.current&&i()};window.addEventListener("pageshow",c);let u=null!=(e=b.current)?e:y.current,f=u&&w?new IntersectionObserver(e=>{var t;let[r]=e;I.current=null!=(t=null==r?void 0:r.isIntersecting)&&t},{threshold:[0,.12,.3],rootMargin:"12% 0px 12% 0px"}):null;u&&f&&f.observe(u);let d=window.scrollY,m="down",p=!1,h=!1,x=()=>{w&&!h&&(h=!0,requestAnimationFrame(()=>{let e=window.scrollY,t=e-d;if(Math.abs(t)>=1){var r;let a=t>0?"down":"up";a!==m&&(m=a,"down"===a&&(p=!1)),d=e;let n=I.current||(null!=(r=null==u?void 0:u.getBoundingClientRect().top)?r:9999)<.72*window.innerHeight;"up"!==a||p||!n||P.current||(p=!0,W())}h=!1}))};return w&&window.addEventListener("scroll",x,{passive:!0}),()=>{n=!0,a&&clearTimeout(a),A.current&&clearTimeout(A.current),T.current.cancelled=!0,E.current.forEach(clearTimeout),E.current=[],window.removeEventListener("pageshow",c),null==f||f.disconnect(),window.removeEventListener("scroll",x),L.current.forEach(e

1=>e.cancel())}},[q,F,t,r,W,w]),!q||F)?(0,a.jsx)("span",{className:"kotas-klap-title-wrap",children:(0,a.jsx)("span",{className:"kotas-klap-display",children:"OUR KOTAS KLAP"})}):(0,a.jsxs)("span",{className:"kotas-klap-title-wrap",ref:y,children:[(0,a.jsxs)("span",{className:"kotas-klap-stage",ref:b,children:[(0,a.jsxs)("span",{className:"kotas-klap-display",ref:k,children:[(0,a.jsx)("span",{className:"kotas-klap-word",children:"OUR\xa0KOTA"}),(0,a.jsx)("span",{className:"kotas-klap-morph-s",ref:M,children:"S"}),"\xa0",(0,a.jsx)("span",{className:"kotas-klap-klap",ref:j,children:s.map((e,t)=>(0,a.jsx)("span",{className:"kotas-klap-ltr",ref:e=>{N.current[t]=e},children:e},e))})]}),(0,a.jsx)("div",{className:"kotas-klap-hand-anchor",ref:R,"aria-hidden":!0,children:(0,a.jsx)("div",{className:"kotas-klap-hand",ref:C,children:(0,a.jsx)("img",{src:"/images/kotas/klap-hand.svg",alt:"",className:"kotas-klap-hand-img",width:642,height:563,draggable:!1})})}),(0,a.jsx)("div",{className:"kotas-klap-fx",ref:S,"aria-hidden":!0})]}),(0,a.jsx)("span",{className:"sr-only",children:"Our Kotas Klap"})]})}},25297:(e,t,r)=>{"use strict";r.d(t,{KotaNamesWordScroll:()=>g});var a=r(95155),n=r(12115),l=r(15848);

1let s=[{id:"cwsVZGyOmgs",title:"No Forks Given!"},{id:"i45BgHlmuIE",title:"Chicken Mayo Kota — our KOTAS KLAP"},{id:"APugffpJKQ4",title:"Kota Joe Short"},{id:"xJFDnqCQefU",title:"Kota Joe Short"},{id:"WMqz0guMznU",title:"Kota Joe Short"}];function o(){return(0,a.jsx)(l.x,{items:s,instancePrefix:"kotas",headingId:"kotas-shorts-heading",heading:"Kotas on camera",desktopAlign:"center",wideSection:!0})}let i=[{label:"Spatlo?",description:"A township favourite from the streets — a hollowed-out quarter loaf packed with chips, meat, cheese, sauces, and serious flavour."},{label:"Sphatlho?",description:"Another name for the same legend. Different spelling, same loaded quarter loaf energy."},{label:"Quarter Loaf?",description:"The base of every Kota — a quarter loaf of bread, opened up and filled until it becomes a full meal."},{label:"Kota?",description:"A Kota is a filled quarter loaf packed with slap chips, meat, cheese, sauces, and extras — a South African road-style favourite built for big flavour."},{label:"Quarter?",description:"Not just bread. It is the start of the build — the part that holds the flavour, the sauce, the chips, and the whole Kota experience."}],c=i.map(e=>e.label),u=i.map(e=>e.description),f=Math.floor(2.5),d=c.length,m=i.findIndex(e=>"Kota?"===e.label),p=d+(m>=0?m:0),h="font-american max-w-prose text-base leading-relaxed md:text-lg",x=function(){let e=[];for(let t=0;t<3;t++)c.forEach((r,a)=>{e.push({key:"c".concat(t,"-i").concat(a),label:r,index:t*d+a})});return e}();function g(){let e=(0,n.useRef)(null),t=(0,n.useRef)(null),r=(0,n.useRef)(null),l=(0,n.useRef)(null),s=(0,n.useRef)(p),i=(0,n.useRef)(null),m=(0,n.useRef)(0),g=(0,n.useRef)(0),v=(0,n.useRef)(null),[w,y]=(0,n.useState)(p),[b,k]=(0,n.useState)(0),[M,j]=(0,n.useState)(void 0),[N,R]=(0,n.useState)(0),[C,S]=(0,n.useState)(!1);s.current=w;let L=(Math.round(w)%d+d)%d,A=c[L],E=u[L],T=b>0?(f-w)*b:0,P=(0,n.useCallback)(()=>{let e=t.current;if(!e)return;let r=0;e.querySelectorAll("[data-label-measure]").forEach(e=>{r=Math.max(r,e.getBoundingClientRect().width)});let a=Math.ceil(r)+8;a>0&&j(a)},[]),K=(0,n.useCallback)(()=>{let e=l.current,t=null==e?void 0:e.firstElementChild;if(!t)return;let r=t.getBoundingClientRect().height;r>0&&k(r)},[]),I=(0,n.useCallback)(()=>{let e=r.current;if(!e)return;let t=0;e.querySelectorAll("[data-desc-measure]").forEach(e=>{t=Math.max(t,e.getBoundingClientRect().height)});let a=Math.ceil(t);a>0&&R(a)},[]),z=(0,n.useCallback)(()=>{null!=i.current&&(cancelAnimationFrame(i.current),i.current=null),S(!1)},[]),F=(0,n.useCallback)(e=>{var t;let r=(t=Math.round(e))>=2*d?t-d:t<d?t+d:t;y(r),s.current=r},[]),_=(0,n.useCallback)(e=>{if(b<=0)return void F(e);z();let t=s.current;if(1e-6>Math.abs(e-t))return void S(!1);if(window.matchMedia("(prefers-reduced-motion: reduce)").matches){F(e),S(!1);return}S(!0);let r=performance.now(),a=n=>{let l=Math.min(1,(n-r)/480);if(y(t+(e-t)*(1-(1-l)**3)),l<1)i.current=requestAnimationFrame(a);else if(i.current=null,F(e),S(!1),0!==g.current){let e=g.current>0?1:-1;g.current-=e,_(s.current+e)}};i.current=requestAnimationFrame(a)},[b,z,F]),q=(0,n.useCallback)(e=>{if(C){g.current+=e;return}_(Math.round(s.current)+e)},[C,_]),B=(0,n.useRef)(q);B.current=q;let D=(0,n.useRef)(b);D.current=b,(0,n.useLayoutEffect)(()=>{K(),P(),I()},[K,P,I]),(0,n.useEffect)(()=>{var t,a;let n=new ResizeObserver(()=>{K(),P(),I()}),s=e.current,o=l.current,i=r.current;s&&n.observe(s),o&&n.observe(o),i&&n.observe(i);let c=()=>{P(),I()};return window.addEventListener("resize",c,{passive:!0}),null==(a=document.fonts)||null==(t=a.ready)||t.then(()=>{K(),P(),I()}),()=>{n.disconnect(),window.removeEventListener("resize",c),z()}},[K,P,I,z]),(0,n.useEffect)(()=>{let t=e.current;if(!t)return;let r=e=>{if(e.preventDefault(),D.current<=0||v.current||(m.current+=e.deltaY,36>Math.abs(m.current)))return;let t=m.current>0?1:-1;m.current=0,B.current(t)};return t.addEventListener("wheel",r,{passive:!1}),()=>t.removeEventListener("wheel",r)},[]);let W=(0,n.useCallback)(e=>{let t=v.current;if(!t||b<=0)return;v.current=null;let r=e-t.startY;_(Math.round(t.startPos+r/b))},[b,_]),Y=(0,n.useCallback)(e=>{0!==e.button||b<=0||(z(),g.current=0,v.current={startY:e.clientY,startPos:s.current,pointerId:e.pointerId},e.currentTarget.setPointerCapture(e.pointerId))},[b,z]),O=(0,n.useCallback)(e=>{let t=v.current;if(!t||t.pointerId!==e.pointerId||b<=0)return;let r=e.clientY-t.startY;y(t.startPos+r/b)},[b]),H=(0,n.useCallback)(e=>{let t=v.current;t&&t.pointerId===e.pointerId&&(e.currentTarget.releasePointerCapture(e.pointerId),W(e.clientY))},[W]),U=(0,n.useCallback)(e=>{let t=v.current;t&&t.pointerId===e.pointerId&&W(e.clientY)},[W]),G="calc(".concat(1.32,"em * ").concat(5," + ").concat(.44,"em)"),Q="".concat(1.32,"em"),X="linear-gradient(to bottom, transparent 0%, black 11%, black 89%, transparent 100%)";return(0,a.jsx)("section",{className:"border-y border-neutral-200 bg-background pt-10 pb-6 dark:border-neutral-800 sm:pt-12 sm:pb-7 md:pt-14 md:pb-8","aria-labelledby":"kota-names-heading-sr",children:(0,a.jsxs)("div",{className:"mx-auto max-w-6xl px-4 sm:px-6",children:[(0,a.jsx)("h2",{id:"kota-names-heading-sr",className:"sr-only",children:"What is a Kota? A South African street-food classic made from a filled quarter loaf — also called Spatlo, Sphatlho, Quarter Loaf, or Quarter."}),(0,a.jsxs)("div",{className:"grid grid-cols-1 items-start gap-10 overflow-visible max-lg:gap-14 lg:grid-cols-[minmax(0,1fr)_minmax(26rem,1.2fr)] lg:gap-12 xl:gap-14",children:[(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("div",{className:"relative font-oswald text-3xl font-bold uppercase leading-none tracking-wide text-foreground sm:text-4xl md:text-5xl",children:[(0,a.jsx)("div",{ref:t,className:"pointer-events-none absolute left-0 top-0 -z-10 flex flex-col gap-0 font-oswald text-3xl font-bold uppercase leading-none tracking-wide opacity-0 sm:text-4xl md:text-5xl","aria-hidden":!0,

1children:c.map(e=>(0,a.jsx)("span",{"data-label-measure":!0,className:"block w-max whitespace-nowrap",children:e},e))}),(0,a.jsxs)("div",{className:"flex min-w-0 flex-nowrap items-center gap-x-1 sm:gap-x-2",children:[(0,a.jsx)("span",{"aria-hidden":"true",className:"inline-flex shrink-0 items-center self-center leading-none",style:{height:Q,minHeight:Q},children:"What is a\xa0"}),(0,a.jsxs)("div",{ref:e,tabIndex:0,role:"group","aria-roledescription":"carousel","aria-label":"What is a ".concat(A.replace("?",""),". Scroll or swipe to see other local names; the list loops endlessly."),style:{width:M?"".concat(M,"px"):void 0,height:G,maxHeight:G,paddingTop:"".concat(.22,"em"),paddingBottom:"".concat(.22,"em"),WebkitMaskImage:X,maskImage:X},className:"relative inline-block shrink-0 touch-none self-center overflow-hidden overscroll-y-contain select-none [-webkit-mask-size:100%_100%] [mask-size:100%_100%]",onPointerDown:Y,onPointerMove:O,onPointerUp:H,onPointerCancel:U,onKeyDown:e=>{"ArrowDown"===e.key?(e.preventDefault(),q(1)):"ArrowUp"===e.key&&(e.preventDefault(),q(-1))},children:[(0,a.jsxs)("p",{className:"sr-only","aria-live":"polite","aria-atomic":"true",children:["What is a ",A.replace("?",""),". ",E]}),(0,a.jsx)("ul",{ref:l,className:"m-0 list-none p-0 will-change-transform",style:{transform:"translate3d(0, ".concat(T,"px, 0)")},children:x.map(e=>{let t=Math.abs(e.index-w),r=t<.4;return(0,a.jsx)("li",{"aria-hidden":!r,"data-index":e.index,style:{minHeight:Q,height:Q},className:"flex items-center justify-start whitespace-nowrap leading-none transition-[color,opacity] duration-200 ease-out ".concat(r?"text-red opacity-100":t<1.1?"text-foreground/40 opacity-50 dark:text-foreground/35":"pointer-events-none text-foreground/25 opacity-[0.38] dark:text-red/20"),children:e.label},e.key)})})]})]})]}),(0,a.jsxs)("div",{className:"relative mt-6 md:mt-8",children:[(0,a.jsx)("div",{ref:r,className:"pointer-events-none absolute inset-x-0 top-0 -z-10 w-full opacity-0","aria-hidden":!0,children:u.map((e,t)=>(0,a.jsx)("p",{"data-desc-measure":!0,className:h,children:e},t))}),(0,a.jsx)("p",{className:"".concat(h," text-foreground/85 transition-opacity duration-300 ease-out motion-reduce:transition-none"),style:N>0?{minHeight:"".concat(N,"px")}:void 0,children:E})]})]}),(0,a.jsx)("div",{className:"min-w-0 overflow-visible",children:(0,a.jsx)(o,{})})]})]})})}},38205:(e,t,r)=>{"use strict";r.d(t,{FoodMenuVideoScrollSection:()=>i});var a=r(95155),n=r(49511);function l(e,t){return Array.from({length:t},(t,r)=>{let a=String(r+1).padStart(3,"0");return"".concat(e,"/frame-").concat(a,".jpg")})}let s=l("/images/food-menu/open-kota-scroll/desktop",134),o=l("/images/food-menu/open-kota-scroll/mobile",94);function i(){return(0,a.jsx)(n.N,{stableVhCssVar:"--kota-open-video-vh",desktopFrames:s,mobileFrames:o,halfDurationScrub:!0,scrollMultiplierDesktop:4,scrollMultiplierTouch:2.4,scrubScrollFractionTouch:1,edgeToEdge:!0,outerAriaLabel:"How to open a Kota",innerAriaLabel:"Food menu scroll sequence",showScrollHints:!0})}},38328:e=>{e.exports={laneScroller:"KotaMenuGallery_laneScroller__BB3U_",snapDisabled:"KotaMenuGallery_snapDisabled__I8l3L"}},40849:(e,t,r)=>{Promise.resolve().then(r.bind(r,99500)),Promise.resolve().then(r.bind(r,38205)),Promise.resolve().then(r.bind(r,59239)),Promise.resolve().then(r.bind(r,25297)),Promise.resolve().then(r.bind(r,6179)),Promise.resolve().then(r.bind(r,10301))},59239:(e,t,r)=>{"use strict";r.d(t,{KotaMenuGallery:()=>A});var a=r(95155),n=r(12115),l=r(52619),s=r.n(l),o=r(90368),i=r(27937),c=r(96274),u=r(50616),f=r(85906),d=r(17841),m=r(13406),p=r(38328),h=r.n(p);let x=(0,d.GP)(d.iB);function g(e,t){return e.findIndex(e=>e.id===t)}function v(e,t,r){let a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2,n=g(t,e);return n<0?null:r?t.length*a+n:n}function w(e){return[...e].sort((e,t)=>{var r,a;return(null!=(r=e.sort_order)?r:0)-(null!=(a=t.sort_order)?a:0)})}function y(e){var t,r,a;let n=w(e);return null!=(a=null!=(r=function(e){for(let t of e)if(function(e){var t,r;let a=e.name.trim().toLowerCase();return(null!=(r=null==(t=e.slug)?void 0:t.trim().toLowerCase())?r:"").startsWith("kotas-jozi")||"jozi"===a||"jozi kota"===a||a.startsWith("jozi ")}(t))return t.id;return null}(n))?r:null==(t=n[0])?void 0:t.id)?a:null}function b(e,t,r){return t?r?v(t,e,!0,2):v(t,e,!1):null}let k="shrink-0 min-w-[var(--kota-lane-edge-inset,1rem)]";function M(e,t){var r;let a,n=window.innerWidth,l=n>=640,s=n>=768&&n<1024,o=l?s?14:12:14;e.style.setProperty("--kota-lane-item-gutter","".concat(o,"px")),a=l?s?Math.min(300,Math.max(260,Math.round(.34*e.clientWidth))):272:Math.min(280,Math.max(232,e.clientWidth-2*o)),e.style.setProperty("--kota-lane-card-width","".concat(a,"px"));let i=null!=(r=null==t?void 0:t.offsetWidth)?r:a+2*o,c=Math.max(0,(e.clientWidth-i)/2),u=l?Math.max(44,c):c;e.style.setProperty("--kota-lane-edge-inset","".concat(u,"px"))}function j(e){let{left:t,right:r}=function(e){let t=getComputedStyle(e);return{left:parseFloat(t.scrollPaddingLeft)||0,right:parseFloat(t.scrollPaddingRight)||0}}(e);return t+(e.clientWidth-t-r)/2}function N(e,t){let r=e.getBoundingClientRect().left+j(e),a=null,n=1/0;for(let[e,l]of t){let t=l.getBoundingClientRect(),s=Math.abs(t.left+t.width/2-r);s<n&&(n=s,a=e)}return a}function R(e,t,r,a){if(r<2)return t;let n=Math.floor(t/r);if(0!==n&&4!==n)return t;let l=function(e,t){let r=t.get(0),a=t.get(e);return r&&a?a.offsetLeft-r.offsetLeft:0}(r,a);return l<=0?t:0===n?(e.scrollLeft+=l,t+r):(e.scrollLeft-=l,t-r)}function C(e,t,r){if(t<2)return N(e,r);let a=N(e,r);if(null==a)return null;let n=!1;for(let l=0;l<5;l++){let l=Math.floor(a/t);if(0!==l&&4!==l)break;e.classList.add(h().snapDisabled),a=R(e,a,t,r),n=!0}return n&&requestAnimationFrame(()=>e.classList.remove(h().snapDisabled)),a}function S(e,t,r,a){var n;let l=j(e),s=e.getBoundingClientRect(),o=t.getBoundingClientRect(),i=Math.max(0,Math.min(e.scrollLeft+(o.left-s.left)+o.width/2-l,Math.max(0,e.scrollWidth-e.clientWidth))),c=null!=(n=null==a?void 0:a.disableSnap)&&n;c&&e.classList.add(h().snapDisabled);let u=()=>{c&&e.classList.remove(h().snapDisabled)};if("auto"===r){e.scrollLeft=i,requestAnimationFrame(u);return}e.scrollTo({left:i,behavior:r}),window.setTimeout(u,480)}

1function L(e){let{title:t,items:r,selectedItemId:l,onActiveItemChange:s,onOpenPreview:c,footer:d}=e,p=(0,n.useMemo)(()=>(function(e){if(e.length<2)return e.map((e,t)=>({loopKey:"0-".concat(e.id),item:e,physicalIndex:t,copyIndex:0}));let t=[],r=0;for(let a=0;a<5;a++)for(let n of e)t.push({loopKey:"".concat(a,"-").concat(n.id),item:n,physicalIndex:r++,copyIndex:a});return t})(r),[r]),x=r.length>=2,w=(0,n.useRef)(null),y=(0,n.useRef)(new Map),L=(0,n.useRef)(l),A=(0,n.useRef)(!0),E=(0,n.useRef)(!1),T=(0,n.useRef)(!1),P=(0,n.useRef)(!1),K=(0,n.useRef)(!1),I=(0,n.useRef)(!1),[z,F]=(0,n.useState)(()=>b(r,l,x));L.current=l;let _=(0,n.useCallback)((e,t)=>{var a,n;let l=w.current,s=null!=(n=null==t?void 0:t.itemId)?n:L.current;if(!l||!s)return!1;let o=(()=>{if("auto"===e&&x){var t;let e=v(s,r,x,2);if(null!=e)return null!=(t=y.current.get(e))?t:null}return function(e,t,r,a){var n;let l=g(r,t);if(l<0)return null;let s=r.length;if(s<2)return null!=(n=a.get(l))?n:null;let o=e.getBoundingClientRect(),i=j(e),c=e.scrollLeft+i,u=null,f=1/0;for(let t=0;t<5;t++){let r=t*s+l,n=a.get(r);if(!n)continue;let i=n.getBoundingClientRect(),d=Math.abs(e.scrollLeft+(i.left-o.left)+i.width/2-c);d<f&&(f=d,u=n)}return u}(l,s,r,y.current)})();if(!o)return!1;let i=(0,m.ex)();T.current=!0,M(l,o),S(l,o,e,{disableSnap:i||"smooth"===e});let c=null==(a=[...y.current.entries()].find(e=>{let[,t]=e;return t===o}))?void 0:a[0];return null!=c&&F(c),window.setTimeout(()=>{var e;T.current=!1,null==t||null==(e=t.onComplete)||e.call(t)},"smooth"===e?520:i?460:80),!0},[r,x]),q=(0,n.useCallback)(()=>{var e;let t=w.current;if(!t||!E.current||T.current||P.current||K.current)return;let r=N(t,y.current);if(null==r)return;F(r);let a=null==(e=p[r])?void 0:e.item;a&&a.id!==L.current&&(P.current=!0,s(a.id))},[p,s]),B=(0,n.useCallback)((e,t)=>{let r=w.current,a=y.current.get(t);if(!r||!a)return void s(e);T.current=!0,F(t),s(e);let n=(0,m.ex)();M(r,a),S(r,a,"smooth",{disableSnap:n}),window.setTimeout(()=>{T.current=!1},520)},[s]);(0,n.useEffect)(()=>{let e=w.current;if(!e)return;let t=null,a=null,n=()=>{I.current=!1;let e=w.current;if(e&&!T.current){if(x&&!K.current){K.current=!0;let t=C(e,r.length,y.current);null!=t&&F(t),requestAnimationFrame(()=>{K.current=!1})}E.current&&q()}},l=()=>{T.current||(I.current=!0),x&&E.current&&!T.current&&!K.current&&null==t&&(t=window.requestAnimationFrame(()=>{t=null;let e=w.current;if(!e||T.current||K.current)return;let a=N(e,y.current);if(null==a)return;let n=Math.floor(a/r.length);(0===n||4===n)&&(K.current=!0,function(e,t,r){if(t<2)return;let a=N(e,r);if(null==a)return;let n=!1;for(let l=0;l<5;l++){let l=Math.floor(a/t);if(0!==l&&4!==l)break;e.classList.add(h().snapDisabled),a=R(e,a,t,r),n=!0}n&&requestAnimationFrame(()=>e.classList.remove(h().snapDisabled))}(e,r.length,y.current),requestAnimationFrame(()=>{K.current=!1}))})),a&&clearTimeout(a),a=setTimeout(n,120)},s=()=>{a&&clearTimeout(a),n()},o=w.current;o&&M(o,y.current.values().next().value),e.addEventListener("scroll",l,{passive:!0}),e.addEventListener("scrollend",s);let i=new ResizeObserver(()=>{let e=w.current;e&&(M(e,y.current.values().next().value),E.current&&L.current&&!I.current&&_("auto",{itemId:L.current}))});return i.observe(e),()=>{e.removeEventListener("scroll",l),e.removeEventListener("scrollend",s),i.disconnect(),a&&clearTimeout(a),null!=t&&window.cancelAnimationFrame(t)}},[q,_,x,r.length]),(0,n.useLayoutEffect)(()=>{if(E.current=!1,A.current=!0,F(b(r,l,x)),!l){E.current=!0;return}let e=(0,m.ex)(),t=!1,a=0,n=null,s=()=>{t||E.current||(E.current=!0,A.current=!1,T.current=!1)},o=()=>{if(!t&&!E.current){if(_("auto",{itemId:l})){n||(n=window.setTimeout(s,e?460:80));return}if(a<12){a+=1,requestAnimationFrame(o);return}s()}};o();let i=window.setTimeout(o,48),c=e?window.setTimeout(o,160):void 0,u=e?window.setTimeout(o,420):void 0;return()=>{t=!0,window.clearTimeout(i),c&&window.clearTimeout(c),u&&window.clearTimeout(u),n&&window.clearTimeout(n)}},[r,l,x,_]);let D=e=>{var t,a;let n=w.current;if(!n||r.length<2)return;let l=N(n,y.current);if(null==l)return;let o=r.length,i=5*o-1,c=l+e;(c<0||c>

1i)&&(K.current=!0,c=(l=null!=(a=C(n,o,y.current))?a:l)+e,K.current=!1);let u=y.current.get(c),f=null==(t=p[c])?void 0:t.item;if(!u||!f)return;let d=(0,m.ex)();T.current=!0,F(c),S(n,u,"smooth",{disableSnap:d}),s(f.id),window.setTimeout(()=>{T.current=!1},520)};return(0,a.jsxs)("section",{"aria-label":t,className:"relative left-1/2 w-screen max-w-[100vw] -translate-x-1/2 overflow-visible bg-background",children:[(0,a.jsxs)("div",{className:"mx-auto flex w-full max-w-6xl items-end justify-between gap-3 px-4 pt-3 sm:px-6 sm:pt-4 md:pt-5",children:[(0,a.jsx)("h2",{className:"font-oswald text-3xl font-bold uppercase leading-none tracking-wide text-foreground sm:text-4xl md:text-5xl",children:t}),(0,a.jsxs)("span",{className:"pb-1 text-xs font-american text-foreground/70 sm:pb-1.5 sm:text-sm",children:[r.length," items"]})]}),(0,a.jsxs)("div",{className:"relative w-full min-w-0 overflow-visible",children:[(0,a.jsx)("button",{type:"button","aria-label":"Scroll ".concat(t," left"),onClick:()=>D(-1),className:"".concat(f.Z," absolute left-2 top-1/2 z-20 -translate-y-1/2 sm:left-3"),children:(0,a.jsx)(o.A,{className:"h-7 w-7",strokeWidth:2,"aria-hidden":!0})}),(0,a.jsx)("div",{ref:w,className:"".concat(h().laneScroller," relative z-0 overflow-x-auto overscroll-x-contain snap-x snap-mandatory py-5 sm:py-6 md:py-5 ").concat("sm:scroll-px-11"),children:(0,a.jsxs)("div",{className:"flex w-max items-center gap-2 sm:gap-3",children:[(0,a.jsx)("div",{className:k,"aria-hidden":!0}),p.map(e=>{let{loopKey:t,item:r,physicalIndex:n}=e,s=l===r.id&&z===n;return(0,a.jsx)("div",{"data-kota-physical-index":n,ref:e=>{e?y.current.set(n,e):y.current.delete(n)},className:"flex flex-col justify-center ".concat("snap-center"," shrink-0 ").concat("p-[var(--kota-lane-item-gutter,0.625rem)]"," ").concat("w-[calc(var(--kota-lane-card-width,280px)+var(--kota-lane-item-gutter,12px)*2)] min-w-[calc(var(--kota-lane-card-width,280px)+var(--kota-lane-item-gutter,12px)*2)] max-w-[calc(var(--kota-lane-card-width,280px)+var(--kota-lane-item-gutter,12px)*2)]"," ").concat(s?"z-10":"z-0"),children:(0,a.jsx)("div",{className:"".concat("flex h-[min(24rem,62svh)] w-[var(--kota-lane-card-width,280px)] min-h-0 min-w-[var(--kota-lane-card-width,280px)] max-w-[var(--kota-lane-card-width,280px)] flex-col justify-center sm:h-[min(23rem,52svh)] md:h-[min(24rem,48svh)] lg:h-[23.5rem] origin-center transition-transform duration-300 ease-out will-change-transform [&_>_*]:min-h-0 [&_>_*]:w-full"," ").concat(s?"z-10 scale-[1.08] sm:scale-[1.09] md:scale-[1.1]":"scale-100"),children:(0,a.jsx)(u.AA,{item:r,uniformHeight:!0,kotaLane:{selected:s,onSelect:()=>B(r.id,n),onOpenPreview:c?()=>c(r):void 0}})})},t)}),(0,a.jsx)("div",{className:k,"aria-hidden":!0})]})}),(0,a.jsx)("button",{type:"button","aria-label":"Scroll ".concat(t," right"),onClick:()=>D(1),className:"".concat(f.Z," absolute right-2 top-1/2 z-20 -translate-y-1/2 sm:right-3"),children:(0,a.jsx)(i.A,{className:"h-7 w-7",strokeWidth:2,"aria-hidden":!0})})]}),d?(0,a.jsx)("div",{className:"flex justify-center px-4 pb-5 pt-1 sm:px-6 sm:pb-6 sm:pt-2",children:(0,a.jsx)("div",{className:"flex w-full max-w-6xl justify-center",children:d})}):null]})}function A(e){let{items:t,categoryName:r}=e,l=(0,n.useMemo)(()=>

1w(t).slice(0,8),[t]),[o,u]=(0,n.useState)(()=>y(l)),[f,d]=(0,n.useState)(null),m=r.trim()||"Kotas";(0,n.useEffect)(()=>{null==o||l.some(e=>e.id===o)||u(y(l))},[l,o]);let p=(0,n.useCallback)(e=>{u(e)},[]),h=(0,n.useCallback)(e=>{d(e)},[]);return 0===t.length?(0,a.jsx)("p",{className:"text-foreground/70 font-american",children:"No kotas listed yet. Check back soon."}):(0,a.jsxs)("section",{"aria-label":"Kota menu gallery",children:[f?(0,a.jsx)(c.O,{item:f,onClose:()=>d(null)}):null,(0,a.jsx)(L,{title:m,items:l,selectedItemId:o,onActiveItemChange:p,onOpenPreview:h,footer:(0,a.jsxs)(s(),{href:x,scroll:!1,className:"flex min-h-[52px] w-1/2 items-center justify-center gap-2 rounded-xl bg-red px-4 py-3.5 font-oswald text-sm sm:text-base uppercase tracking-wide text-white shadow-[0_2px_8px_rgba(252,4,8,0.35)] transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-red focus-visible:ring-offset-2 focus-visible:ring-offset-background",children:["See more",(0,a.jsx)(i.A,{className:"size-5 shrink-0 opacity-95","aria-hidden":!0})]})})]})}},93144:()=>{}},e=>{e.O(0,[2157,5592,2619,1356,6210,7605,5580,548,8572,5848,5508,8441,4696,7358],()=>e(e.s=40849)),_N_E=e.O()}]);