1import{r as a,j as e}from"./react-vendor-e65b4a99.js";import{O as x,P as j,Q as v}from"./icons-vendor-0dd24216.js";import"./vendor-9dd51875.js";const i=[{key:"bundle",title:"A bundle that doesn't exist.",Icon:x},{key:"question",title:"A question that went unanswered.",Icon:j},{key:"product",title:"A product you don't sell yet.",Icon:v,scaleClass:"scale-up"}],c="/assets/videos/cpg-cases",N=()=>{const[n,l]=a.useState(0),[r,h]=a.useState(!1),[m,d]=a.useState(0),u=a.useRef(null),p=a.useRef(null);a.useEffect(()=>{const s=u.current;if(!s||r)return;const t=new IntersectionObserver(([b])=>{b.isIntersecting&&(h(!0),t.disconnect())},{rootMargin:"200px"});return t.observe(s),()=>t.disconnect()},[r]),a.useEffect(()=>{d(0)},[n]);const g=()=>l(s=>(s+1)%i.length),y=()=>{const s=p.current;s&&s.duration&&d(s.currentTime/s.duration)},o=i[n];return e.jsx("section",{className:"gap-section",id:"visibility-gap",children:e.jsxs("div",{className:"gap-inner",children:[e.jsx("span",{className:"gap-eyebrow",children:"The visibility gap"}),e.jsxs("h2",{className:"gap-heading",children:["ChekOut shows you what your customers wanted.",e.jsx("br",{}),e.jsx("em",{children:"Post-sale analytics show you what sold."})]}),e.jsx("p",{className:"gap-sub",children:"Most dashboards confirm what worked. What they don't show is what products a customer wanted but couldn't find, the question they had but didn't ask, and the sale that quietly routed to Amazon instead. ChekOut captures the conversation that would have closed the gap, in real time, on your live D2C store."}),e.jsxs("div",{className:"gap-stage",ref:u,children:[e.jsxs("div",{className:"gap-stage-media",children:[r?e.jsxs("video",{ref:p,className:`gap-stage-video ${o.scaleClass||""}`,autoPlay:!0,muted:!0,playsInline:!0,preload:"auto",poster:`${c}/${o.key}-poster.jpg`,onEnded:g,onTimeUpdate:y,children:[e.jsx("source",{src:`${c}/${o.key}.webm`,type:"video/webm"}),e.jsx("source",{src:`${c}/${o.key}.mp4`,type:"video/mp4"})]},o.key):e.jsx("img",{className:"gap-stage-video is-active",src:`${c}/${i[0].key}-poster.jpg`,alt:""}),e.jsx("div",{className:"gap-stage-scrim"})]}),e.jsx("div",{className:"gap-stage-tabs",role:"tablist","aria-label":"Visibility gap examples",children:i.map((s,t)=>e.jsxs("button",{type:"button",role:"tab","aria-selected":t===n,className:`gap-tab ${t===n?"is-active":""}`,onClick:()=>l(t),children:[e.jsxs("span",{className:"gap-tab-title",children:[e.jsx(s.Icon,{className:"gap-tab-icon","aria-hidden":"true"}),s.title]}),e.jsx("span",{className:"gap-tab-bar",children:e.jsx("i",{style:{transform:`scaleX(${t===n?m:0})`}})})]},s.key))})]})]})})};export{N as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.