import{j as r}from"./query-vendor-CZu0EHPe.js";import{r as a}from"./react-vendor-0bvDbF03.js";import{u as T}from"./useIOSAudioContext-DtqQj9l7.js";import{u as R}from"./i18n-vendor-Cl4-lKeC.js";import{aS as j,aT as x,m as s}from"./index-D1vbIJ-B.js";import"./supabase-vendor-CNV44oIa.js";import"./helmet-vendor-NlTFkN97.js";const I="https://cdn.storysparkle.org/landing_assets/blotch-yellow.webp",N="https://cdn.storysparkle.org/landing_assets/blotch-magenta.webp",M=()=>{const p=a.useRef(null),u=a.useRef(-1),h=a.useRef(0),{getContext:f}=T(),{t:d}=R("landing"),c=d("syncedHighlights.sentence"),m=c.includes("|"),i=m?c.split("|").filter(o=>o.length>0):c.split(/\s+/).filter(o=>o.length>0),{scrollYProgress:l}=j({target:p,offset:["start start","end end"]}),y=x(l,[0,1],[0,180]),w=x(l,[0,1],[0,-180]),[g,v]=a.useState(-1),b=()=>{const o=Date.now();if(!(o-h.current<150)){h.current=o;try{const t=f();if(!t)return;const e=t.createOscillator(),n=t.createGain();e.connect(n),n.connect(t.destination),e.type="sine",e.frequency.setValueAtTime(800,t.currentTime),e.frequency.exponentialRampToValueAtTime(200,t.currentTime+.1),n.gain.setValueAtTime(.15,t.currentTime),n.gain.exponentialRampToValueAtTime(.01,t.currentTime+.1),e.start(t.currentTime),e.stop(t.currentTime+.1)}catch{}}};return a.useEffect(()=>{const o=l.on("change",t=>{const e=Math.floor(t*(i.length+1))-1,n=Math.max(-1,Math.min(e,i.length-1));n!==u.current&&n>=0&&b(),u.current=n,v(n)});return()=>o()},[l,i.length]),r.jsx("section",{ref:p,className:"relative z-10",style:{height:"250vh",background:"#E0F2FE"},children:r.jsxs("div",{className:"sticky top-14 h-[calc(100vh-3.5rem)] flex flex-col items-center justify-center px-6 md:px-12 lg:px-24 ipad-portrait:!px-2 overflow-visible",children:[r.jsx(s.img,{src:I,alt:"Background highlight blotch",role:"presentation",className:`absolute pointer-events-none opacity-80 z-10
            w-[70vw] h-auto lg:w-auto lg:h-[70vh] max-[1366px]:lg:h-[50vh]
            left-1/2 lg:left-[5vw]
            top-[10vh] lg:top-1/2
            ipad-portrait:!w-[45vw] ipad-portrait:!h-auto ipad-portrait:!left-1/2 ipad-portrait:!top-[10vh]`,style:{rotate:y,x:"-50%",y:"-50%"}}),r.jsx(s.img,{src:N,alt:"Background highlight blotch",role:"presentation",className:`absolute pointer-events-none opacity-80 z-10
            w-[70vw] h-auto lg:w-auto lg:h-[70vh] max-[1366px]:lg:h-[50vh]
            left-1/2 lg:left-[95vw]
            top-[90vh] lg:top-1/2
            ipad-portrait:!w-[45vw] ipad-portrait:!h-auto ipad-portrait:!left-1/2 ipad-portrait:!top-[90vh]`,style:{rotate:w,x:"-50%",y:"-50%"}}),r.jsx(s.h2,{className:"section-header text-[22px] lg:text-[32px] text-center mb-8",initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.6},children:d("syncedHighlights.heading")}),r.jsx(s.p,{className:"section-subtext text-center max-w-3xl ipad-portrait:!max-w-[680px]",initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0,amount:.5},transition:{duration:.6,delay:.2},children:i.map((o,t)=>{const e=t===g,n=t<g;return r.jsx(s.span,{className:`inline-block ${m?"px-0":"mr-2 px-1"} py-0.5 rounded transition-colors duration-200 ${e?"bg-[#BF0404] text-white":n?"text-foreground":"text-muted-foreground"}`,animate:{scale:e?1.1:1},transition:{type:"spring",stiffness:300,damping:20},children:o},t)})})]})})};export{M as default};
//# sourceMappingURL=SyncedHighlightsSection-yAfXbavN.js.map