import{o as e}from"./rolldown-runtime-Bhmf7a9N.js";import{E as t}from"./analytics-p_StUAKk.js";import{h as n}from"./react-BbpeyRWK.js";import{c as r,o as i,r as a}from"./styled-components.browser.esm-CoTNGMDh.js";import{d as o,f as s,u as c}from"./index-CvkZuY26.js";var l=e(t()),u=`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`,d=`/assets/animLeftFreeze-CFOBEhWY.svg`,f=`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`,p=e(n()),m=e=>(0,p.jsxs)(`svg`,{width:20,height:20,viewBox:`0 0 20 20`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,...e,children:[(0,p.jsx)(`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`}),(0,p.jsx)(`path`,{d:`M6.66669 8.33325L3.33335 4.99992L6.66669 1.66659`,stroke:`#9CA3AF`,strokeWidth:1.5,strokeLinecap:`round`,strokeLinejoin:`round`})]});function h(){let e=(0,l.useRef)(null),t=(0,l.useRef)(null),n=(0,l.useRef)(null),r=(0,l.useRef)(null),[i,a]=(0,l.useState)(!1),[h,v]=(0,l.useState)(!1),[y,b]=(0,l.useState)(!1),[x,S]=(0,l.useState)(!1),C=(0,l.useRef)(!1),w=localStorage.getItem(`__goody_lp_how_it_works_next_play_iteration`),[T,E]=(0,l.useState)(w?parseInt(w):0);function D(e){return`https://assets.ongoody.com/static/web/landing/lp2/how-it-works/${e}?${T}`}function O(){C.current||(localStorage.setItem(`__goody_lp_how_it_works_next_play_iteration`,(T+1).toString()),C.current=!0,a(!0),e.current=setTimeout(()=>{v(!0)},1300),t.current=setTimeout(()=>{b(!0)},1700),n.current=setTimeout(()=>{S(!0)},5e3))}function k(){a(!1),v(!1),b(!1),S(!1),C.current=!1,E(T+1),setTimeout(()=>{setTimeout(()=>{O()},500)},30)}return(0,l.useEffect)(()=>()=>{e.current&&clearTimeout(e.current),t.current&&clearTimeout(t.current),n.current&&clearTimeout(n.current)},[]),(0,l.useEffect)(()=>{if(!r.current)return;let e=new IntersectionObserver(([e])=>{e.isIntersecting&&O()},{rootMargin:`-50% 0% -50% 0%`,threshold:0});return e.observe(r.current),()=>{r.current&&e.unobserve(r.current)}},[r.current]),(0,p.jsxs)(s,{ref:r,children:[(0,p.jsxs)(c,{withShadow:!0,children:[(0,p.jsx)(g,{src:d,className:`z-[1]`}),i&&(0,p.jsx)(g,{src:D(`animLeft.svg`),className:`z-[2]`})]}),(0,p.jsxs)(o,{children:[(0,p.jsx)(g,{src:u,className:`z-[1] object-contain`}),h&&(0,p.jsx)(g,{src:D(`animBar.svg`),className:`z-[2] object-contain`})]}),(0,p.jsxs)(c,{withShadow:!0,children:[(0,p.jsx)(g,{src:f,className:`z-[1]`}),y&&(0,p.jsx)(g,{src:D(`animRight.svg`),className:`z-[2]`}),x&&(0,p.jsx)(_,{className:``,onClick:()=>k(),children:(0,p.jsx)(m,{})})]})]})}var g=i.img`inset-0 w-full h-full absolute`,_=a.button.attrs(r(`-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{h as default};