{"version":3,"file":"ProcessComparisonAnimation.B_E-a6tP.mjs","names":["React.useState"],"sources":["https:/framerusercontent.com/modules/qjVL7conylk99suxIvYR/toLYe3ncloFMXrKfqb43/ProcessComparisonAnimation.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion,AnimatePresence}from\"framer-motion\";// ── Static data — outside component to prevent recreation on every render ─────\nconst manualSteps=[\"Check BOM\",\"Cross-check diagram\",\"Verify specs\",\"Validate relationships\",\"Peer review\",\"Quality check\",\"Finished\"];const aiSteps=[\"Import data\",\"Auto-validate components\",\"Auto-check specs\",\"Auto-validate relationships\",\"Generate output\",\"Finished\"];const manualStepMs=3600// slow\n;const aiStepMs=1200// 3× faster\n;// ── Static style objects — outside component ──────────────────────────────────\nconst headlineH5={fontFamily:\"InterDisplay, Inter, -apple-system, BlinkMacSystemFont, sans-serif\",fontWeight:600,fontSize:18,lineHeight:\"27px\",letterSpacing:\"0px\",textTransform:\"uppercase\"};const paragraphBody={fontFamily:\"InterDisplay, Inter, -apple-system, BlinkMacSystemFont, sans-serif\",fontWeight:400,fontSize:16,lineHeight:\"24px\",letterSpacing:\"0px\"};const paragraphCaption={fontFamily:\"InterDisplay, Inter, -apple-system, BlinkMacSystemFont, sans-serif\",fontWeight:400,fontSize:14,lineHeight:\"21px\",letterSpacing:\"0px\"};/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicWidth 480\n * @framerIntrinsicHeight 320\n */export default function ProcessComparisonAnimation(props){const{autoPlay=true,loopDelay=2.5,style}=props;const[manualIdx,setManualIdx]=React.useState(-1);const[aiIdx,setAiIdx]=React.useState(-1);const[runId,setRunId]=React.useState(0);React.useEffect(()=>{if(!autoPlay)return;let timers=[];// Reset\nsetManualIdx(-1);setAiIdx(-1);// Kick off both workflows after a tiny delay so the 0% bars render first\ntimers.push(setTimeout(()=>{// Schedule manual steps\nmanualSteps.forEach((_,i)=>{timers.push(setTimeout(()=>setManualIdx(i),(i+1)*manualStepMs));});// Schedule AI steps\naiSteps.forEach((_,i)=>{timers.push(setTimeout(()=>setAiIdx(i),(i+1)*aiStepMs));});// Loop\nconst manualCompleteTime=manualSteps.length*manualStepMs;const totalMs=manualCompleteTime+loopDelay*1e3;timers.push(setTimeout(()=>setRunId(r=>r+1),totalMs));},400));return()=>{timers.forEach(t=>clearTimeout(t));};},[runId,autoPlay,loopDelay]);// Progress calculations\nconst manualProgress=manualIdx<0?0:(manualIdx+1)/manualSteps.length*100;const aiProgress=aiIdx<0?0:(aiIdx+1)/aiSteps.length*100;const currentManualStep=manualIdx>=0?manualSteps[manualIdx]:\"\";const currentAiStep=aiIdx>=0?aiSteps[aiIdx]:\"\";// Design tokens\nconst tokens={navyPanelBg:\"rgba(255,255,255,0.04)\",navyPanelBorder:\"rgba(255,255,255,0.08)\",trackBg:\"rgba(255,255,255,0.1)\",manualFill:\"rgba(255,255,255,0.4)\",aiFill:\"rgb(255, 68, 0)\",textWhite:\"rgb(255, 255, 255)\",textGray:\"rgb(105, 105, 112)\"};return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",height:\"100%\",background:tokens.navyPanelBg,borderRadius:16,border:`1px solid ${tokens.navyPanelBorder}`,padding:\"32px\",display:\"flex\",flexDirection:\"column\",gap:24,boxSizing:\"border-box\",...style},children:[/*#__PURE__*/_jsx(\"div\",{style:{...headlineH5,color:tokens.textWhite},children:\"PROCESS COMPARISON\"}),/*#__PURE__*/_jsx(WorkflowRow,{label:\"Manual Process\",stepText:currentManualStep,progress:manualProgress,fillColor:tokens.manualFill,trackColor:tokens.trackBg,textWhite:tokens.textWhite,textGray:tokens.textGray,paragraphBody:paragraphBody,paragraphCaption:paragraphCaption,isSmooth:false}),/*#__PURE__*/_jsx(WorkflowRow,{label:\"AI-Powered Workflow\",stepText:currentAiStep,progress:aiProgress,fillColor:tokens.aiFill,trackColor:tokens.trackBg,textWhite:tokens.textWhite,textGray:tokens.textGray,paragraphBody:paragraphBody,paragraphCaption:paragraphCaption,isSmooth:true,stepDuration:aiStepMs}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",justifyContent:\"space-between\",borderTop:`1px solid ${tokens.navyPanelBorder}`,paddingTop:20,minHeight:36},children:[/*#__PURE__*/_jsx(\"div\",{style:{...paragraphBody,color:tokens.textWhite},children:\"Validation Time Saved\"}),/*#__PURE__*/_jsx(motion.div,{style:{...headlineH5,color:tokens.textWhite},animate:{opacity:[1,.3,1]},transition:{duration:1.4,repeat:Infinity,ease:\"easeInOut\"},children:\"~70%\"})]})]});}function WorkflowRow(props){const{label,stepText,progress,fillColor,trackColor,textWhite,paragraphBody,paragraphCaption,isSmooth,stepDuration=1e3}=props;return /*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:8},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",justifyContent:\"space-between\",gap:16,minHeight:22},children:[/*#__PURE__*/_jsx(\"div\",{style:{...paragraphBody,color:textWhite,flexShrink:0},children:label}),/*#__PURE__*/_jsx(\"div\",{style:{...paragraphCaption,color:textWhite,textAlign:\"right\",overflow:\"hidden\",whiteSpace:\"nowrap\",textOverflow:\"ellipsis\",minWidth:0},children:/*#__PURE__*/_jsx(AnimatePresence,{mode:\"wait\",children:/*#__PURE__*/_jsx(motion.span,{initial:{opacity:0,y:6},animate:{opacity:1,y:0},exit:{opacity:0,y:-6},transition:{duration:.25},style:{display:\"inline-block\"},children:stepText||\" \"},stepText||\"empty\")})})]}),/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:8,background:trackColor,borderRadius:4,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(motion.div,{animate:{width:`${progress}%`},transition:isSmooth?{duration:stepDuration/1e3,ease:\"linear\"}:{duration:.4,ease:\"easeOut\"},style:{height:\"100%\",background:fillColor,borderRadius:4}},`progress-${isSmooth}`)})]});}addPropertyControls(ProcessComparisonAnimation,{autoPlay:{type:ControlType.Boolean,title:\"Auto Play\",defaultValue:true},loopDelay:{type:ControlType.Number,title:\"Loop Delay (s)\",defaultValue:2.5,min:0,max:10,step:.5}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProcessComparisonAnimation\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any\",\"framerIntrinsicHeight\":\"320\",\"framerIntrinsicWidth\":\"480\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProcessComparisonAnimation.map"],"mappings":"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"}