import{j as t}from"./vendors-CmRCG4VZ.js";import{r as e}from"./react-BQJ3vM8c.js";import{b0 as I,b1 as u,b2 as S,a3 as R,a0 as T,a1 as P}from"./index-CyKJD2qY.js";import"./analytics-qiEaE68j.js";import"./utils-UGpZp815.js";import"./dateTime-FJNQ5wKp.js";import"./ui-U0k5r-PZ.js";import"./media-FjyeDiAY.js";import"./icons-C2ov2Ukk.js";(function(){try{var r=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},i=new Error().stack;i&&(r._sentryDebugIds=r._sentryDebugIds||{},r._sentryDebugIds[i]="80197df0-4d86-4ecd-9e0b-7962ad03a435",r._sentryDebugIdIdentifier="sentry-dbid-80197df0-4d86-4ecd-9e0b-7962ad03a435")}catch{}})();const L="data:image/svg+xml,%3csvg%20id='lphowitworksanimbar-freeze'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2092%204'%20shape-rendering='geometricPrecision'%20text-rendering='geometricPrecision'%20style='background-color:%23eceef1'%3e%3cdefs%3e%3clinearGradient%20id='lphowitworksanimbar-freeze-s-line1-stroke'%20x1='0'%20y1='4.5'%20x2='92'%20y2='4.5'%20spreadMethod='pad'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(0%200)'%3e%3cstop%20id='lphowitworksanimbar-freeze-s-line1-stroke-0'%20offset='0%25'%20stop-color='%23cdccfc'/%3e%3cstop%20id='lphowitworksanimbar-freeze-s-line1-stroke-1'%20offset='100%25'%20stop-color='%236865f5'/%3e%3c/linearGradient%3e%3c/defs%3e%3cg%20id='lphowitworksanimbar-freeze-s-g1'%20transform='translate(-92%200)'%20clip-path='url(%23lphowitworksanimbar-freeze-u-clip0_314_8)'%3e%3cg%20id='lphowitworksanimbar-freeze-s-g2'%3e%3crect%20id='lphowitworksanimbar-freeze-s-rect1'%20width='92'%20height='4'%20rx='0'%20ry='0'%20fill='%23eceef1'/%3e%3cline%20id='lphowitworksanimbar-freeze-s-line1'%20x1='0'%20y1='2'%20x2='92'%20y2='2'%20opacity='0.5'%20fill='none'%20stroke='url(%23lphowitworksanimbar-freeze-s-line1-stroke)'%20stroke-width='4'/%3e%3c/g%3e%3cclipPath%20id='lphowitworksanimbar-freeze-u-clip0_314_8'%3e%3crect%20id='lphowitworksanimbar-freeze-s-rect2'%20width='92'%20height='4'%20rx='0'%20ry='0'%20fill='%23fff'/%3e%3c/clipPath%3e%3c/g%3e%3c/svg%3e",C="/assets/animLeftFreeze-CFOBEhWY.svg",U="data:image/svg+xml,%3csvg%20id='lphowitworksanimright-freeze'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20560%20369'%20shape-rendering='geometricPrecision'%20text-rendering='geometricPrecision'%3e%3cdefs%3e%3clinearGradient%20id='lphowitworksanimright-freeze-u-bgleft-fill'%20x1='153'%20y1='74.5019'%20x2='153'%20y2='199.413'%20spreadMethod='pad'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(0%200)'%3e%3cstop%20id='lphowitworksanimright-freeze-u-bgleft-fill-0'%20offset='0%25'%20stop-color='%23ececfd'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bgleft-fill-1'%20offset='100%25'%20stop-color='%23f6eef8'/%3e%3c/linearGradient%3e%3clinearGradient%20id='lphowitworksanimright-freeze-u-bgright-fill'%20x1='141'%20y1='74.5019'%20x2='141'%20y2='199.413'%20spreadMethod='pad'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(0%200)'%3e%3cstop%20id='lphowitworksanimright-freeze-u-bgright-fill-0'%20offset='0%25'%20stop-color='%23ececfd'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bgright-fill-1'%20offset='100%25'%20stop-color='%23f6eef8'/%3e%3c/linearGradient%3e%3clinearGradient%20id='lphowitworksanimright-freeze-u-bowv-fill'%20x1='20'%20y1='0'%20x2='20'%20y2='508'%20spreadMethod='pad'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(0%200)'%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowv-fill-0'%20offset='0%25'%20stop-color='rgba(159,158,240,0)'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowv-fill-1'%20offset='1.9557%25'%20stop-color='%239f9ef0'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowv-fill-2'%20offset='28.5%25'%20stop-color='rgba(159,158,240,0.15)'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowv-fill-3'%20offset='100%25'%20stop-color='%239f9ef0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='lphowitworksanimright-freeze-u-bowh-fill'%20x1='-7.143'%20y1='-7.181'%20x2='127.378'%20y2='760.188'%20spreadMethod='pad'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(0%200)'%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowh-fill-0'%20offset='7.5%25'%20stop-color='rgba(159,158,240,0)'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowh-fill-1'%20offset='12.6489%25'%20stop-color='rgba(159,158,240,0.1)'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowh-fill-2'%20offset='24.6924%25'%20stop-color='rgba(159,158,240,0.9)'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowh-fill-3'%20offset='28.5%25'%20stop-color='%239f9ef0'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowh-fill-4'%20offset='33.7907%25'%20stop-color='rgba(159,158,240,0.95)'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowh-fill-5'%20offset='79.5%25'%20stop-color='rgba(159,158,240,0.25)'/%3e%3cstop%20id='lphowitworksanimright-freeze-u-bowh-fill-6'%20offset='100%25'%20stop-color='rgba(159,158,240,0)'/%3e%3c/linearGradient%3e%3c/defs%3e%3cg%20id='lphowitworksanimright-freeze-u-frame-1940'%20transform='translate(-12-9.996014)'%3e%3cg%20id='lphowitworksanimright-freeze-s-g1'%20clip-path='url(%23lphowitworksanimright-freeze-u-clip0_207_2677)'%3e%3cg%20id='lphowitworksanimright-freeze-s-g2'%3e%3crect%20id='lphowitworksanimright-freeze-s-rect1'%20width='560'%20height='369'%20rx='16'%20ry='16'%20transform='translate(12%2010)'%20fill='%23fff'/%3e%3cg%20id='lphowitworksanimright-freeze-u-page1'%3e%3crect%20id='lphowitworksanimright-freeze-u-bgleft'%20width='306'%20height='384'%20rx='0'%20ry='0'%20transform='matrix(.920596%200%200%201%2011.299647%202)'%20fill='url(%23lphowitworksanimright-freeze-u-bgleft-fill)'/%3e%3crect%20id='lphowitworksanimright-freeze-u-bgright'%20width='282'%20height='384'%20rx='0'%20ry='0'%20transform='translate(290%202)'%20fill='url(%23lphowitworksanimright-freeze-u-bgright-fill)'/%3e%3crect%20id='lphowitworksanimright-freeze-u-bowv'%20width='40'%20height='508'%20rx='0'%20ry='0'%20transform='translate(271-60)'%20fill='url(%23lphowitworksanimright-freeze-u-bowv-fill)'/%3e%3crect%20id='lphowitworksanimright-freeze-u-bowh'%20width='40'%20height='766'%20rx='0'%20ry='0'%20transform='matrix(0%201-1%200%20675%20174)'%20fill='url(%23lphowitworksanimright-freeze-u-bowh-fill)'/%3e%3c/g%3e%3c/g%3e%3cclipPath%20id='lphowitworksanimright-freeze-u-clip0_207_2677'%3e%3crect%20id='lphowitworksanimright-freeze-s-rect2'%20width='560'%20height='369'%20rx='16'%20ry='16'%20transform='translate(12%2010)'%20fill='%23fff'/%3e%3c/clipPath%3e%3c/g%3e%3c/g%3e%3c/svg%3e",B=r=>e.createElement("svg",{width:20,height:20,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...r},e.createElement("path",{d:"M3.33335 11.6666C3.33335 15.3333 6.33335 18.3333 10 18.3333C13.6667 18.3333 16.6667 15.3333 16.6667 11.6666C16.6667 7.99992 13.6667 4.99992 10 4.99992L3.33335 4.99992",stroke:"#9CA3AF",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M6.66669 8.33325L3.33335 4.99992L6.66669 1.66659",stroke:"#9CA3AF",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}));function q(){const r=e.useRef(null),i=e.useRef(null),c=e.useRef(null),o=e.useRef(null),[b,h]=e.useState(!1),[k,w]=e.useState(!1),[x,g]=e.useState(!1),[z,p]=e.useState(!1),n=e.useRef(!1),d=localStorage.getItem("__goody_lp_how_it_works_next_play_iteration"),y=d?parseInt(d):0,[l,v]=e.useState(y);function f(a){return`https://assets.ongoody.com/static/web/landing/lp2/how-it-works/${a}?${l}`}function m(){n.current||(localStorage.setItem("__goody_lp_how_it_works_next_play_iteration",(l+1).toString()),n.current=!0,h(!0),r.current=setTimeout(()=>{w(!0)},1300),i.current=setTimeout(()=>{g(!0)},1700),c.current=setTimeout(()=>{p(!0)},5e3))}function _(){h(!1),w(!1),g(!1),p(!1),n.current=!1,v(l+1),setTimeout(()=>{setTimeout(()=>{m()},500)},30)}return e.useEffect(()=>()=>{r.current&&clearTimeout(r.current),i.current&&clearTimeout(i.current)},[]),e.useEffect(()=>{if(!o.current)return;const a=new IntersectionObserver(([j])=>{j.isIntersecting&&m()},{rootMargin:"-50% 0% -50% 0%",threshold:0});return a.observe(o.current),()=>{o.current&&a.unobserve(o.current)}},[o.current]),t.jsxs(I,{ref:o,children:[t.jsxs(u,{withShadow:!0,children:[t.jsx(s,{src:C,className:"z-[1]"}),b&&t.jsx(s,{src:f("animLeft.svg"),className:"z-[2]"})]}),t.jsxs(S,{children:[t.jsx(s,{src:L,className:"z-[1] object-contain"}),k&&t.jsx(s,{src:f("animBar.svg"),className:"z-[2] object-contain"})]}),t.jsxs(u,{withShadow:!0,children:[t.jsx(s,{src:U,className:"z-[1]"}),x&&t.jsx(s,{src:f("animRight.svg"),className:"z-[2]"}),z&&t.jsx(F,{className:"",onClick:()=>_(),children:t.jsx(B,{})})]})]})}const s=R.img`inset-0 w-full h-full absolute`,F=T.button.attrs(P("-top-12 right-0 rounded-lg p-2 absolute z-[1] hover:bg-gray-100 active:bg-gray-200 active:scale-90 active:transition-all hidden md:block"))`
  // When mounted, fade in the button
  opacity: 0;

  animation: fadeIn 2s forwards;

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;export{q as default};
//# sourceMappingURL=HowItWorksAnimation-D5gTxavq.js.map