{"version":3,"file":"CaseStudyNav.CgPvfvF3.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/brsoLe3xfx9w3XCfRjFf/6dvWVWaYsrCTpxNCPmtx/CaseStudyNav.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";const norm=s=>s.toLowerCase().replace(/[‘’‛′]/g,\"'\").replace(/[“”]/g,'\"').replace(/\\s+/g,\" \").trim();function parse(src){return src.split(\"\\n\").map(l=>l.trim()).filter(Boolean).map(l=>{const[label,match=\"\"]=l.split(\"|\").map(p=>p.trim());return{label,match};});}function findHeading(match){if(!match||typeof document===\"undefined\")return null;const needle=norm(match);const nodes=document.querySelectorAll(\"h1,h2,h3,h4,h5,h6,p\");for(const n of Array.from(nodes)){const t=norm(n.textContent||\"\");if(t.length<220&&t.startsWith(needle)){const r=n.getBoundingClientRect();if(r.width>0&&r.height>0)return n;}}return null;}export default function CaseStudyNav(props){const{title,sections,topOffset,accent,background,text,muted,line,font}=props;const items=parse(sections||\"\");const[active,setActive]=useState(0);const[progress,setProgress]=useState(0);const listRef=useRef(null);const linkRefs=useRef([]);useEffect(()=>{if(typeof window===\"undefined\")return;let raf=0;const update=()=>{raf=0;const line=topOffset+80;let cur=0;items.forEach((it,i)=>{if(i===0&&!it.match)return;const el=findHeading(it.match);if(el&&el.getBoundingClientRect().top-120=max-4)cur=items.length-1;setActive(cur);setProgress(Math.min(1,Math.max(0,y/max)));};const onScroll=()=>{if(!raf)raf=requestAnimationFrame(update);};update();window.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onScroll);const t=setTimeout(update,600);return()=>{window.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onScroll);clearTimeout(t);if(raf)cancelAnimationFrame(raf);};},[sections,topOffset]);// keep the active link visible when the list scrolls sideways\nuseEffect(()=>{const list=listRef.current;const a=linkRefs.current[active];if(!list||!a)return;const l=a.offsetLeft-list.offsetLeft-24;const r=a.offsetLeft-list.offsetLeft+a.offsetWidth+24;if(llist.scrollLeft+list.clientWidth){list.scrollTo({left:l,behavior:\"smooth\"});}},[active]);const go=i=>{const it=items[i];const el=findHeading(it.match);const reduce=typeof window!==\"undefined\"&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;const behavior=reduce?\"auto\":\"smooth\";if(!el){window.scrollTo({top:0,behavior});return;}const y=el.getBoundingClientRect().top+window.scrollY-topOffset-150;window.scrollTo({top:Math.max(0,y),behavior});setActive(i);};return /*#__PURE__*/_jsxs(\"nav\",{\"aria-label\":\"On this page\",style:{width:\"100%\",background,backdropFilter:\"blur(10px)\",WebkitBackdropFilter:\"blur(10px)\",borderBottom:`1px solid ${line}`,position:\"relative\",fontFamily:font},children:[/*#__PURE__*/_jsxs(\"div\",{style:{maxWidth:1200,margin:\"0 auto\",display:\"flex\",alignItems:\"center\",gap:20,padding:\"0 clamp(16px, 2.6vw, 30px)\",height:52},children:[/*#__PURE__*/_jsx(\"span\",{style:{flex:\"none\",fontFamily:\"ui-monospace, SFMono-Regular, Menlo, monospace\",fontSize:11,letterSpacing:\"0.14em\",textTransform:\"uppercase\",color:muted,whiteSpace:\"nowrap\"},children:title}),/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":true,style:{flex:\"none\",width:1,height:18,background:line}}),/*#__PURE__*/_jsx(\"div\",{ref:listRef,style:{flex:1,minWidth:0,display:\"flex\",gap:4,overflowX:\"auto\",scrollbarWidth:\"none\",maskImage:\"linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent)\",WebkitMaskImage:\"linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent)\"},children:items.map((it,i)=>{const on=i===active;return /*#__PURE__*/_jsxs(\"button\",{ref:el=>linkRefs.current[i]=el,onClick:()=>go(i),\"aria-current\":on?\"true\":undefined,style:{all:\"unset\",cursor:\"pointer\",flex:\"none\",position:\"relative\",padding:\"8px 12px\",borderRadius:999,fontSize:13.5,lineHeight:1.2,whiteSpace:\"nowrap\",color:on?text:muted,background:on?\"rgba(255,255,255,0.06)\":\"transparent\",transition:\"color .2s ease, background .2s ease\"},onMouseEnter:e=>e.currentTarget.style.color=text,onMouseLeave:e=>e.currentTarget.style.color=on?text:muted,children:[/*#__PURE__*/_jsx(\"span\",{style:{fontFamily:\"ui-monospace, SFMono-Regular, Menlo, monospace\",fontSize:10.5,marginRight:7,color:on?accent:muted,opacity:on?1:.7},children:String(i+1).padStart(2,\"0\")}),it.label]},i);})})]}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{position:\"absolute\",left:0,bottom:-1,height:2,width:`${progress*100}%`,background:accent,transition:\"width .12s linear\"}})]});}CaseStudyNav.defaultProps={title:\"Case study\",sections:\"Overview\\nThe problem | The problem\",topOffset:64,accent:\"#F5C162\",background:\"rgba(11,15,20,0.88)\",text:\"#EDEAE4\",muted:\"#8A8F98\",line:\"rgba(255,255,255,0.08)\",font:\"Inter, system-ui, sans-serif\"};addPropertyControls(CaseStudyNav,{title:{type:ControlType.String,title:\"Title\"},sections:{type:ControlType.String,title:\"Sections\",displayTextArea:true,description:\"One per line: Label | start of the section heading\"},topOffset:{type:ControlType.Number,title:\"Header height\",min:0,max:200,step:1},accent:{type:ControlType.Color,title:\"Accent\"},background:{type:ControlType.Color,title:\"Background\"},text:{type:ControlType.Color,title:\"Text\"},muted:{type:ControlType.Color,title:\"Muted\"},line:{type:ControlType.Color,title:\"Line\"},font:{type:ControlType.String,title:\"Font\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CaseStudyNav\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CaseStudyNav.map"],"mappings":"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"}