https://www.suigor.hk/_next/static/chunks/1050.edabd9a54148dfc0.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1050],{71050:(e,t,r)=>{r.r(t),r.d(t,{default:()=>u});var a=r(88082),n=r(52282),o=r(40400),s=r(61382),l=r(50860),i=r(15203),c=r(87231);let d=(0,n.memo)(e=>{let{show:t,onClose:r}=e,{getTextClass:d}=(0,c.e)(),[u,m]=(0,n.useState)(new Set),[g,p]=(0,n.useState)(new Set),[b,h]=(0,n.useState)(new Set),[x,w]=(0,n.useState)(new Set),f=(0,n.useRef)({}),k=(0,n.useRef)({}),y=(0,n.useRef)(null),j=(0,s.m)();if(n.useEffect(()=>{let e=()=>{document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement||h(new Set)};return document.addEventListener("fullscreenchange",e),document.addEventListener("webkitfullscreenchange",e),document.addEventListener("mozfullscreenchange",e),document.addEventListener("MSFullscreenChange",e),()=>{document.removeEventListener("fullscreenchange",e),document.removeEventListener("webkitfullscreenchange",e),document.removeEventListener("mozfullscreenchange",e),document.removeEventListener("MSFullscreenChange",e)}},[]),!t)return null;let v=async(e,t)=>{t&&(t.preventDefault(),t.stopPropagation());let r=f.current[e];if(r)try{if(r.paused){g.forEach(t=>{if(t!==e){let e=f.current[t];e&&!e.paused&&e.pause()}}),w(t=>new Set(t).add(e)),(0===r.networkState||3===r.networkState)&&r.load();try{await r.play(),p(new Set([e]))}catch(t){console.error("Play failed:",t),w(t=>{let r=new Set(t);return r.delete(e),r})}}else r.pause(),p(t=>{let r=new Set(t);return r.delete(e),r})}catch(t){console.error("Video toggle error:",t),w(t=>{let r=new Set(t);return r.delete(e),r})}},N=async(e,t)=>{t&&(t.preventDefault(),t.stopPropagation());let r=k.current[e],a=f.current[e];if(r&&a)try{document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement?(document.exitFullscreen?await document.exitFullscreen():document.webkitExitFullscreen?await document.webkitExitFullscreen():document.mozCancelFullScreen?await document.mozCancelFullScreen():document.msExitFullscreen?await document.msExitFullscreen():a.webkitExitFullscreen&&a.webkitExitFullscreen(),h(t=>{let r=new Set(t);return r.delete(e),r})):(r.requestFullscreen?await r.requestFullscreen():r.webkitRequestFullscreen?await r.webkitRequestFullscreen():r.mozRequestFullScreen?await r.mozRequestFullScreen():r.msRequestFullscreen?await r.msRequestFullscreen():a.webkitEnterFullscreen&&a.webkitEnterFullscreen(),h(t=>new Set(t).add(e)))}catch(e){console.error("Fullscreen error:",e)}},S=[{icon:o.rle,title:"Install App & Enable Notifications",color:"teal",videoUrl:"https://suigor-upload.s3.ap-northeast-2.amazonaws.com/junejune/tutorials/install-pwa.mp4",posterUrl:"https://suigor-upload.s3.ap-northeast-2.amazonaws.com/junejune/tutorials/posters/install-pwa-poster.jpg",description:"Install JuneJune as a standalone app on your phone and enable push notifications for booking updates."},{icon:o.itz,title:"How to Book a Class",color:"purple",videoUrl:"https://suigor-upload.s3.ap-northeast-2.amazonaws.com/junejune/tutorials/how-to-book.mp4",posterUrl:"https://suigor-upload.s3.ap-northeast-2.amazonaws.com/junejune/tutorials/posters/how-to-book-poster.jpg",description:"Learn how to browse classes, check availability, and book your spot in 30 seconds."},{icon:o._Hm,title:"How to Cancel My Booking",color:"red",videoUrl:"https://suigor-upload.s3.ap-northeast-2.amazonaws.com/junejune/tutorials/cancel-booking.mp4",posterUrl:"https://suigor-upload.s3.ap-northeast-2.amazonaws.com/junejune/tutorials/posters/cancel-booking-poster.jpg",description:"Learn how to cancel your class booking if your plans change."},{icon:o.A7C,title:"When You Are Promoted from Waitlist",color:"indigo",videoUrl:"https://suigor-upload.s3.ap-northeast-2.amazonaws.com/junejune/tutorials/waitlist-promotion.mp4",posterUrl:"https://suigor-upload.s3.ap-northeast-2.amazonaws.com/junejune/tutorials/posters/waitlist-promotion-poster.jpg",description:"Understand how automatic waitlist promotion works and what to expect when you get promoted."}],E={teal:{bg:"bg-teal-100 dark:bg-teal-900/30",icon:"text-teal-600 dar

1k:text-teal-400",border:"border-teal-200 dark:border-teal-800"},purple:{bg:"bg-purple-100 dark:bg-purple-900/30",icon:"text-purple-600 dark:text-purple-400",border:"border-purple-200 dark:border-purple-800"},red:{bg:"bg-red-100 dark:bg-red-900/30",icon:"text-red-600 dark:text-red-400",border:"border-red-200 dark:border-red-800"},blue:{bg:"bg-blue-100 dark:bg-blue-900/30",icon:"text-blue-600 dark:text-blue-400",border:"border-blue-200 dark:border-blue-800"},indigo:{bg:"bg-indigo-100 dark:bg-indigo-900/30",icon:"text-indigo-600 dark:text-indigo-400",border:"border-indigo-200 dark:border-indigo-800"},green:{bg:"bg-green-100 dark:bg-green-900/30",icon:"text-green-600 dark:text-green-400",border:"border-green-200 dark:border-green-800"},orange:{bg:"bg-orange-100 dark:bg-orange-900/30",icon:"text-orange-600 dark:text-orange-400",border:"border-orange-200 dark:border-orange-800"}};return(0,a.jsx)(l.N,{children:(0,a.jsx)("div",{className:"fixed inset-0 bg-black/60 flex items-end justify-center overflow-hidden",style:{zIndex:999999,touchAction:"none"},onClick:e=>{e.target===e.currentTarget&&r()},children:(0,a.jsxs)(i.P.div,{ref:y,initial:{y:"100%"},animate:{y:0},exit:{y:"100%"},transition:{type:"tween",duration:.25,ease:"easeOut"},drag:"y",dragControls:j,dragListener:!1,dragConstraints:{top:0,bottom:0},dragElastic:{top:0,bottom:.5},onDragEnd:(e,t)=>{(t.offset.y>100||t.velocity.y>500)&&r()},className:"bg-white dark:bg-gray-900 rounded-t-3xl shadow-2xl w-full flex flex-col",style:{maxHeight:"85vh",touchAction:"auto"},onClick:e=>e.stopPropagation(),children:[(0,a.jsx)("div",{className:"flex justify-center py-4 cursor-grab active:cursor-grabbing touch-none flex-shrink-0",onPointerDown:e=>j.start(e),children:(0,a.jsx)("div",{className:"w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full"})}),(0,a.jsxs)("div",{className:"px-6 pb-4 flex items-center gap-3",children:[(0,a.jsx)("div",{className:"w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center",children:(0,a.jsx)(o.vd0,{className:"w-5 h-5 text-white"})}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h2",{className:"text-2xl font-bold text-gray-900 dark:text-white ".concat(d("xl")),children:"Tutorial"}),(0,a.jsx)("p",{className:"text-gray-600 dark:text-gray-400 mt-1 ".concat(d("sm")),children:"Learn how to use the app"})]})]}),(0,a.jsxs)("div",{className:"overflow-y-auto flex-1 px-6 pb-24",style:{maxHeight:"calc(95vh - 120px)",paddingBottom:"max(6rem, calc(6rem + env(safe-area-inset-bottom)))",overscrollBehavior:"contain",WebkitOverflowScrolling:"touch"},children:[(0,a.jsxs)("div",{className:"bg-gradient-to-r from-purple-500 to-indigo-500 rounded-xl p-6 mb-6 text-white",children:[(0,a.jsx)("h3",{className:"text-xl font-bold mb-2 ".concat(d("lg")),children:"Welcome to JuneJune! \uD83D\uDC4B"}),(0,a.jsx)("p",{className:"text-purple-100 leading-relaxed ".concat(d("sm")),children:"This tutorial will guide you through the main features of the booking system. Learn how to book classes, manage reservations, and stay updated with notifications."})]}),(0,a.jsx)("div",{className:"space-y-6",children:S.map((e,t)=>{let r=e.icon,n=E[e.color],s=u.has(t);return(0,a.jsxs)("div",{className:"bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden",children:[(0,a.jsx)("button",{onClick:()=>(e=>{let t=new Set(u);if(t.has(e)){let r=f.current[e];r&&!r.paused&&(r.pause(),p(t=>{let r=new Set(t);return r.delete(e),r})),t.delete(e)}else g.forEach(e=>{let t=f.current[e];t&&!t.paused&&t.pause()}),p(new Set),t.add(e);m(t)})(t),className:"".concat(n.bg," px-6 py-4 border-b ").concat(n.border," w-full text-left hover:opacity-80 transition-opacity"),children:(0,a.jsxs)("div",{className:"flex items-center justify-between gap-3",children:[(0,a.jsxs)("div",{className:"flex items-center gap-3",children:[(0,a.jsx)("div",{className:"w-10 h-10 ".concat(n.bg," rounded-lg flex items-center justify-center"),children:(0,a.jsx)(r,{className:"w-5 h-5 ".concat(n.icon)})}),(0,a.jsx)("h3",{className:"font-bold text-gray-900 dark:text-white ".concat(d("base")),children:e.title})]}),s?(0,a.jsx)(o.Ucs,{className:"w-5 h-5 ".concat(n.icon," flex-shrink-0")}):(0,a.jsx)(o.Vr3,{className:"w-5 h-5 ".concat(n.icon," flex-shrink-0")})]})}),s&&(0,a.jsxs)("div",{className:"p-6",children:[(0,a.jsx)("p",{className:"text-gray-600 dark:text-gray-400 mb-4 ".concat(d("sm")),children:e.description}),e.videoUrl?(0,a.jsxs)("div",{ref:e=>{e&&(k.current[t]=e)},className:"relative aspect-video rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800",onTouchStart:e=>e.stopPropagation(),onTouchEnd:e=>e.stopPropagation(),children:[(0,a.jsxs)("video",{ref:e=>{e&&(f.current[t]=e,e.setAttribute("playsinline",""),e.setAttribute("webkit-playsinline",""))}

1,playsInline:!0,"webkit-playsinline":"true",className:"w-full h-full bg-black",preload:"auto",poster:e.posterUrl,onPlay:()=>p(e=>new Set(e).add(t)),onPause:()=>p(e=>{let r=new Set(e);return r.delete(t),r}),onWaiting:()=>{w(e=>new Set(e).add(t))},onPlaying:()=>{w(e=>{let r=new Set(e);return r.delete(t),r})},onCanPlay:()=>{w(e=>{let r=new Set(e);return r.delete(t),r})},children:[(0,a.jsx)("source",{src:e.videoUrl,type:"video/mp4"}),"Your browser does not support the video tag."]}),!g.has(t)&&(0,a.jsx)("button",{onClick:e=>v(t,e),className:"absolute inset-0 flex items-center justify-center bg-black/30 active:bg-black/40",children:(0,a.jsx)("div",{className:"w-20 h-20 bg-white/95 rounded-full flex items-center justify-center shadow-2xl",children:(0,a.jsx)(o.gSK,{className:"w-8 h-8 text-purple-600 ml-1"})})}),x.has(t)&&(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-black/40 pointer-events-none",children:(0,a.jsx)("div",{className:"w-16 h-16 border-4 border-white/30 border-t-white rounded-full animate-spin"})}),g.has(t)&&!x.has(t)&&(0,a.jsx)("button",{onClick:e=>v(t,e),className:"absolute inset-0 bg-transparent","aria-label":"Pause video"}),g.has(t)&&!x.has(t)&&(0,a.jsx)("button",{onClick:e=>N(t,e),className:"absolute bottom-4 right-4 w-10 h-10 bg-black/70 hover:bg-black/90 rounded-lg flex items-center justify-center z-10 transition-colors","aria-label":"Toggle fullscreen",children:b.has(t)?(0,a.jsx)(o.Wsx,{className:"w-4 h-4 text-white"}):(0,a.jsx)(o._AH,{className:"w-4 h-4 text-white"})})]}):(0,a.jsx)("div",{className:"relative aspect-video rounded-lg overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 flex items-center justify-center border-2 border-dashed border-gray-300 dark:border-gray-600",children:(0,a.jsxs)("div",{className:"text-center",children:[(0,a.jsx)(o.HiP,{className:"w-12 h-12 mx-auto mb-3 ".concat(n.icon," opacity-50")}),(0,a.jsx)("p",{className:"text-gray-500 dark:text-gray-400 ".concat(d("sm")),children:"Tutorial video coming soon"})]})})]})]},t)})})]})]})})})});d.displayName="TutorialModal";let u=d}}]);