import{j as e}from"./query-vendor-CZu0EHPe.js";import{r as s}from"./react-vendor-0bvDbF03.js";import{m as o,A as w,W as y}from"./index-B8QAlx5l.js";import{u as g}from"./i18n-vendor-Bg2yf_Zw.js";import"./supabase-vendor-CNV44oIa.js";import"./helmet-vendor-NlTFkN97.js";const b="https://cdn.storysparkle.org/landing_assets/left-handle.webp",j="https://cdn.storysparkle.org/landing_assets/right-handle.webp",N="https://cdn.storysparkle.org/landing_assets/parchment.webp",I=({children:x,className:v="",aspectClassName:d="aspect-video"})=>{const m=s.useRef(null),i=s.useRef(null),[n,u]=s.useState(!1),[f,p]=s.useState(0);s.useEffect(()=>{const t=()=>{i.current&&p(i.current.offsetWidth)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]),s.useEffect(()=>{const t=i.current;if(!t)return;const l=new IntersectionObserver(([r])=>{r.isIntersecting&&r.intersectionRatio>.4&&u(!0)},{threshold:[.4,.5,.6]});return l.observe(t),()=>l.disconnect()},[]),s.useEffect(()=>{const t=i.current;if(!t)return;const l=new IntersectionObserver(([r])=>{r.isIntersecting||u(!1)},{threshold:[.2]});return l.observe(t),()=>l.disconnect()},[]);const c=f*.4,a={type:"spring",stiffness:200,damping:18,mass:1.2};return e.jsx("div",{ref:m,className:`relative flex items-center justify-center ${v} overflow-visible`,children:e.jsxs("div",{ref:i,className:`relative w-full max-w-2xl ${d} flex items-center justify-center overflow-visible`,children:[e.jsx(o.div,{initial:!1,animate:{width:n?"80%":"10%",opacity:n?.4:.1},transition:a,className:"absolute bottom-2 h-4 bg-black rounded-full blur-xl z-0"}),e.jsx(o.div,{initial:!1,animate:{scaleX:n?1:0,opacity:n?1:0},transition:a,className:"absolute inset-[0%] z-0 overflow-hidden",style:{backgroundImage:`url(${N})`,backgroundSize:"100% 100%",backgroundRepeat:"no-repeat",backgroundPosition:"center"},children:e.jsx(w,{children:n&&e.jsx(o.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{delay:.3,duration:.3},className:"absolute inset-[8%] overflow-hidden rounded-lg",children:x})})}),e.jsx(o.div,{initial:!1,animate:{x:n?-c:0,rotate:n?0:3},transition:a,className:"absolute left-1/2 top-0 z-10 flex h-full items-center justify-end pointer-events-none drop-shadow-[8px_8px_12px_rgba(0,0,0,0.4)]",style:{width:"6%",marginLeft:"-6%"},children:e.jsx("img",{src:b,alt:"Scroll handle decoration",role:"presentation",className:"h-[128%] w-auto max-w-none"})}),e.jsx(o.div,{initial:!1,animate:{x:n?c:0,rotate:n?0:-3},transition:a,className:"absolute left-1/2 top-0 z-10 flex h-full items-center justify-start pointer-events-none drop-shadow-[-8px_8px_12px_rgba(0,0,0,0.4)]",style:{width:"6%",marginLeft:"0%"},children:e.jsx("img",{src:j,alt:"Scroll handle decoration",role:"presentation",className:"h-[128%] w-auto max-w-none"})})]})})},k="https://cdn.storysparkle.org/landing_assets/interactive-words-demo.mp4?v=2",z=({videoSrc:x,onVideoUpload:v,onLumiTarget:d,isWordHovered:m=!1})=>{const i=s.useRef(null),n=s.useRef(null),[u,f]=s.useState(!1),[p,c]=s.useState(!1),{t:a}=g("landing"),t=m||u;s.useEffect(()=>{const r=new IntersectionObserver(([h])=>{h.isIntersecting&&!p&&n.current&&(c(!0),d?.(n.current))},{threshold:.5});return i.current&&r.observe(i.current),()=>r.disconnect()},[p,d]),s.useEffect(()=>{const r=new IntersectionObserver(([h])=>{h.isIntersecting||c(!1)},{threshold:0});return i.current&&r.observe(i.current),()=>r.disconnect()},[]);const l=k;return e.jsx("section",{ref:i,className:"min-h-screen flex items-center justify-center py-16 md:py-24",style:{background:"#FFECD2"},children:e.jsxs("div",{className:"container mx-auto px-6 flex flex-col items-center",children:[e.jsxs(o.h2,{className:"section-header text-[22px] lg:text-[32px] text-center mb-6",initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6},children:[e.jsx(o.span,{ref:n,"data-lumi-interactive":!0,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),animate:{color:t?"#BF0404":"inherit",y:t?-4:0,scale:t?1.05:1},transition:{type:"spring",stiffness:300,damping:15},className:"inline-block cursor-pointer",style:{fontStyle:t?"italic":"normal"},children:a("interactiveWords.interactive")})," ",a("interactiveWords.words")]}),e.jsx(o.h3,{className:"section-subtext text-sm lg:text-xl text-center max-w-2xl mb-10",initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6,delay:.2},children:a("interactiveWords.subtext")}),e.jsx(o.div,{className:"w-full max-w-2xl",initial:{opacity:0,y:30},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6,delay:.4},children:e.jsx(I,{children:e.jsx("video",{src:l,muted:!0,playsInline:!0,loop:!0,autoPlay:!0,className:"w-full h-full object-contain rounded-lg"})})}),e.jsx(o.div,{className:"mt-6 flex justify-center",initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6,delay:.5},children:e.jsx(y,{slug:"how-read-along-works"})})]})})};export{z as default};