{"version":3,"file":"ProcessSteps.CdW4ZWlr.mjs","names":["useState","useRef","useLayoutEffect","useEffect"],"sources":["https:/framerusercontent.com/modules/IkiCMSwdEXvcv7Gtlp4j/M8l2lMUraWE7bbjTfQDu/ProcessSteps.js"],"sourcesContent":["// ProcessSteps — MR. BRANDS · proceso paso a paso (modelo: \"The Process\" de How it works en mellomfg: columna sticky + lista de pasos)\n// Izquierda fija (sticky) con título, texto y foto. Derecha: pasos con una línea que se llena de rojo con el scroll\n// y números que se \"encienden\" al pasar.\n// Pegar en Framer: Assets → Code → New component → \"ProcessSteps\". Width: Fill · Height: Fit. El padre debe tener Overflow: Visible.\n// Datos: una línea por paso →  Título | Texto | Nota en itálica (opcional, p. ej. tiempo)\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useLayoutEffect,useRef,useState}from\"react\";import{motion,useMotionValueEvent,useReducedMotion,useScroll,useTransform}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";const INK=\"#111111\";const CREAM=\"#F5ECDD\";const RED=\"#E3001B\";const DISPLAY=\"'Archivo Black', 'Arial Black', sans-serif\";const MONO=\"'Space Mono', ui-monospace, monospace\";const SANS=\"'Space Grotesk', system-ui, sans-serif\";const EASE=[.25,1,.5,1];const useIso=typeof window!==\"undefined\"?useLayoutEffect:useEffect;function useFonts(){useEffect(()=>{if(typeof document===\"undefined\"||document.getElementById(\"mr-fonts\"))return;const l=document.createElement(\"link\");l.id=\"mr-fonts\";l.rel=\"stylesheet\";l.href=\"https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap\";document.head.appendChild(l);},[]);}function useWidth(ref){const[w,setW]=useState(1200);useIso(()=>{const el=ref.current;if(!el)return;const m=()=>setW(el.getBoundingClientRect().width||1200);m();const ro=typeof ResizeObserver!==\"undefined\"?new ResizeObserver(m):null;ro?.observe(el);return()=>ro?.disconnect();},[]);return w;}const srcOf=i=>typeof i===\"string\"?i:i?.src||\"\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function ProcessSteps(props){const{eyebrow,heading,text,image,data,ctaLabel,ctaLink,background=CREAM,accent=RED,style}=props;useFonts();const reduce=useReducedMotion();const root=useRef(null);const list=useRef(null);const w=useWidth(root);const phone=w<640;const stacked=w<900;const steps=String(data||\"\").split(\"\\n\").map(l=>l.trim()).filter(Boolean).map(l=>{const[title=\"\",body=\"\",note=\"\"]=l.split(\"|\").map(s=>s.trim());return{title,body,note};});const{scrollYProgress}=useScroll({target:list,offset:[\"start 0.7\",\"end 0.6\"]});const fill=useTransform(scrollYProgress,[0,1],[0,1]);const[active,setActive]=useState(reduce?99:-1);useMotionValueEvent(scrollYProgress,\"change\",v=>{if(reduce)return;setActive(Math.floor(v*steps.length+.15));});const pad=phone?20:w<1e3?32:40;const src=srcOf(image);const dot=phone?40:52;return /*#__PURE__*/_jsxs(\"section\",{ref:root,style:{...style,width:\"100%\",background,color:INK,padding:`${phone?72:120}px ${pad}px`,boxSizing:\"border-box\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n.mrps-btn{display:inline-flex;align-self:flex-start;padding:16px 30px;border-radius:999px;border:3px solid ${INK};background:${INK};color:${CREAM};font-family:${DISPLAY};font-size:15px;text-decoration:none;box-shadow:6px 6px 0 ${INK};transition:background .3s,box-shadow .3s,transform .3s}\n.mrps-btn:hover{background:${accent};box-shadow:10px 10px 0 ${INK};transform:translate(-2px,-2px)}\n.mrps-roll{display:block;overflow:hidden;height:1.25em;line-height:1.25em}\n.mrps-roll span{display:block;transition:transform .55s cubic-bezier(.25,1,.33,1)}\n.mrps-btn:hover .mrps-roll span{transform:translateY(-100%)}\n`}),/*#__PURE__*/_jsxs(\"div\",{style:{maxWidth:1300,margin:\"0 auto\",display:\"flex\",flexDirection:stacked?\"column\":\"row\",gap:stacked?48:80,alignItems:\"flex-start\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{flex:stacked?\"none\":\"0 0 40%\",position:stacked?\"relative\":\"sticky\",top:stacked?undefined:120,display:\"flex\",flexDirection:\"column\",gap:20},children:[eyebrow?/*#__PURE__*/_jsx(\"span\",{style:{fontFamily:MONO,fontWeight:700,fontSize:13,letterSpacing:\"0.1em\",textTransform:\"uppercase\",opacity:.8},children:eyebrow}):null,heading?/*#__PURE__*/_jsx(\"h2\",{style:{margin:0,fontFamily:DISPLAY,fontWeight:400,fontSize:phone?36:w<1e3?48:60,lineHeight:1,textTransform:\"uppercase\"},children:heading}):null,text?/*#__PURE__*/_jsx(\"p\",{style:{margin:0,fontFamily:SANS,fontSize:phone?16:18,lineHeight:1.5,maxWidth:480,whiteSpace:\"pre-line\"},children:text}):null,src?/*#__PURE__*/_jsx(\"div\",{style:{width:stacked?\"min(100%, 360px)\":\"78%\",aspectRatio:\"4 / 5\",borderRadius:22,border:`3px solid ${INK}`,boxShadow:`6px 6px 0 ${INK}`,overflow:\"hidden\",transform:\"rotate(-2deg)\",marginTop:8},children:/*#__PURE__*/_jsx(\"img\",{src:src,alt:\"\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"}})}):null,ctaLabel?/*#__PURE__*/_jsx(\"a\",{className:\"mrps-btn\",href:ctaLink||\"/cotiza\",style:{marginTop:8},children:/*#__PURE__*/_jsxs(\"span\",{className:\"mrps-roll\",children:[/*#__PURE__*/_jsx(\"span\",{children:ctaLabel}),/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":true,children:ctaLabel})]})}):null]}),/*#__PURE__*/_jsxs(\"div\",{ref:list,role:\"list\",style:{flex:\"1 1 0\",width:\"100%\",margin:0,padding:0,listStyle:\"none\",position:\"relative\",display:\"flex\",flexDirection:\"column\",gap:phone?40:64},children:[/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{position:\"absolute\",left:dot/2-2,top:dot/2,bottom:dot/2,width:4,background:\"rgba(17,17,17,.14)\",borderRadius:4}}),/*#__PURE__*/_jsx(motion.div,{\"aria-hidden\":true,style:{position:\"absolute\",left:dot/2-2,top:dot/2,bottom:dot/2,width:4,background:accent,borderRadius:4,scaleY:reduce?1:fill,transformOrigin:\"top\"}}),steps.map((s,i)=>{const on=i<=active;return /*#__PURE__*/_jsxs(motion.div,{role:\"listitem\",initial:reduce?false:{y:40,opacity:0},whileInView:{y:0,opacity:1},viewport:{once:true,amount:.5},transition:{duration:1.2,ease:EASE},style:{position:\"relative\",display:\"flex\",gap:phone?16:28,alignItems:\"flex-start\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{flex:\"none\",width:dot,height:dot,borderRadius:999,border:`3px solid ${INK}`,display:\"grid\",placeItems:\"center\",fontFamily:DISPLAY,fontSize:phone?16:20,background:on?accent:CREAM,color:on?CREAM:INK,boxShadow:on?`4px 4px 0 ${INK}`:\"none\",transition:\"background .35s, color .35s, box-shadow .35s\",zIndex:1},children:i+1}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:8,paddingTop:phone?4:8},children:[/*#__PURE__*/_jsx(\"h3\",{style:{margin:0,fontFamily:DISPLAY,fontWeight:400,fontSize:phone?22:30,lineHeight:1.1},children:s.title}),s.body?/*#__PURE__*/_jsx(\"p\",{style:{margin:0,fontFamily:SANS,fontSize:phone?16:18,lineHeight:1.5,maxWidth:560},children:s.body}):null,s.note?/*#__PURE__*/_jsx(\"p\",{style:{margin:0,fontFamily:SANS,fontStyle:\"italic\",fontWeight:500,fontSize:15,opacity:.75},children:s.note}):null]})]},i);})]})]})]});}addPropertyControls(ProcessSteps,{eyebrow:{type:ControlType.String,title:\"Etiqueta\",defaultValue:\"C\\xf3mo trabajamos\"},heading:{type:ControlType.String,title:\"T\\xedtulo\",defaultValue:\"El proceso\"},text:{type:ControlType.String,title:\"Texto\",displayTextArea:true,defaultValue:\"Seis pasos claros, de tu idea a tus manos. En cada uno sabes qu\\xe9 sigue y qu\\xe9 necesitamos de ti.\"},image:{type:ControlType.ResponsiveImage,title:\"Foto\"},data:{type:ControlType.String,title:\"Pasos\",displayTextArea:true,defaultValue:\"Cu\\xe9ntanos tu idea | Llena el formulario o escr\\xedbenos: qu\\xe9 quieres hacer, para qui\\xe9n, cu\\xe1ntas piezas y para cu\\xe1ndo.\\nPropuesta y cotizaci\\xf3n | Te proponemos piezas, materiales y t\\xe9cnicas, con precio y tiempos. | [CONFIRMAR tiempo de respuesta]\\nDise\\xf1o y muestra | Aterrizamos el dise\\xf1o y, si el proyecto lo pide, hacemos una muestra f\\xedsica. | Opcional\\nApruebas | Revisas la prueba final. Nada entra a producci\\xf3n sin tu visto bueno.\\nProducci\\xf3n | Fabricamos y revisamos calidad pieza por pieza. | [CONFIRMAR tiempos]\\nEntrega | Empacamos y enviamos a donde lo necesites. | [CONFIRMAR cobertura de env\\xedo]\"},ctaLabel:{type:ControlType.String,title:\"Bot\\xf3n\",defaultValue:\"Empieza tu proyecto\"},ctaLink:{type:ControlType.Link,title:\"Link\",defaultValue:\"/cotiza\"},background:{type:ControlType.Color,title:\"Fondo\",defaultValue:CREAM},accent:{type:ControlType.Color,title:\"Acento\",defaultValue:RED}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProcessSteps\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProcessSteps.map"],"mappings":"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"}