{"version":3,"file":"HowItWorks3.C558AzIQ.mjs","names":["useState","useRef","__esmMin","init_npm_react_18_3_1","window","init_ssg_sandbox_shims","ce","init_jsx_runtime","K","p","_e","de","addPropertyControls","ControlType","init_framer_BL70qLPA","withFluidSize","element","HowItWorks","activeIndex","setActiveIndex","openIndex","setOpenIndex","isMobile","setIsMobile","mq","handler","stripRef","containerWidth","setContainerWidth","ro","entries","count","slots","tabLabels","items","i","totalStripWidth","maxScroll","offset","cardRefs","stripHeight","setStripHeight","recalc","heights","el","observers","cardContent","slot","item","demoDescriptions","fluid","style","colorGreySalt200","title","accentColor","isOpen","colorGreySalt100","init_HowItWorks3"],"sources":["https:/framerusercontent.com/modules/aNR95zzRIDT7Fh2LBZSw/btAOOHUccDBXRB5m0gm1/HowItWorks3.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useRef,useEffect,cloneElement,isValidElement}from\"react\";const colorGreySalt100=\"#F3F4F6\";const colorGreySalt200=\"#D1D5DC\";function withFluidSize(element){if(!/*#__PURE__*/isValidElement(element))return element;return /*#__PURE__*/cloneElement(element,{style:{...element.props.style,width:\"100%\",height:\"auto\"}});}export default function HowItWorks({title,tabLabels,slots,accentColor,style}){const[activeIndex,setActiveIndex]=useState(0);const[openIndex,setOpenIndex]=useState(0);const[isMobile,setIsMobile]=useState(false);useEffect(()=>{const mq=window.matchMedia(\"(max-width: 810px)\");const handler=e=>setIsMobile(e.matches);setIsMobile(mq.matches);mq.addEventListener(\"change\",handler);return()=>mq.removeEventListener(\"change\",handler);},[]);const stripRef=useRef(null);const[containerWidth,setContainerWidth]=useState(0);useEffect(()=>{if(!stripRef.current)return;const ro=new ResizeObserver(entries=>{setContainerWidth(entries[0].contentRect.width);});ro.observe(stripRef.current);return()=>ro.disconnect();},[]);const count=Math.max(slots?.length??0,tabLabels?.length??0);const items=Array.from({length:count},(_,i)=>({buttonLabel:tabLabels?.[i]??`Step ${i+1}`,content:slots?.[i]}));// ── Desktop scroll math ──────────────────────────────────────────\nconst cardWidth=535;const gap=1;const totalStripWidth=items.length*cardWidth+(items.length-1)*gap;const maxScroll=Math.max(0,totalStripWidth-containerWidth);const stepSize=items.length>1?maxScroll/(items.length-1):0;const offset=activeIndex*stepSize;// ── Desktop height equalisation ──────────────────────────────────\nconst cardRefs=useRef([]);const[stripHeight,setStripHeight]=useState(undefined);useEffect(()=>{const recalc=()=>{const heights=cardRefs.current.filter(el=>el!==null).map(el=>el.scrollHeight);if(heights.length>0)setStripHeight(Math.max(...heights));};const observers=[];cardRefs.current.forEach(el=>{if(!el)return;const ro=new ResizeObserver(recalc);ro.observe(el);observers.push(ro);});recalc();return()=>observers.forEach(ro=>ro.disconnect());},[items.length]);// ── Shared card content ──────────────────────────────────────────\nconst cardContent=(item,i,fluid)=>{const slot=item.content??/*#__PURE__*/_jsxs(\"div\",{style:{flex:1,padding:32,background:\"white\",color:\"#9CA3AF\",fontSize:14,fontFamily:\"Geist, sans-serif\",display:\"flex\",flexDirection:\"column\",alignItems:\"flex-start\",gap:8},children:[/*#__PURE__*/_jsx(\"span\",{style:{fontSize:20},children:\"🖼\"}),/*#__PURE__*/_jsx(\"strong\",{style:{color:\"#6B7280\"},children:item.buttonLabel}),/*#__PURE__*/_jsx(\"span\",{style:{lineHeight:1.6},children:demoDescriptions[i]??\"Connect a Frame in the panel →\"})]});return fluid?withFluidSize(slot):slot;};return /*#__PURE__*/_jsx(\"div\",{style:{fontFamily:\"sans-serif\",width:\"100%\",...style},children:/*#__PURE__*/_jsxs(\"div\",{style:{maxWidth:\"1280px\",margin:\"0 auto\",padding:isMobile?\"64px 0\":\"120px 0\",borderColor:colorGreySalt200,borderStyle:\"solid\",borderWidth:isMobile?0:\"0 1px\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{padding:\"0 16px\"},children:[/*#__PURE__*/_jsx(\"h2\",{style:{fontSize:isMobile?24:32,fontWeight:700,fontFamily:'\"ModeratExtended-Bold Regular\", \"ModeratExtended-Bold Regular Placeholder\", sans-serif',margin:\"0 0 24px\"},children:title}),!isMobile&&/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",gap:4,marginBottom:40,flexWrap:\"wrap\"},children:items.map((item,i)=>/*#__PURE__*/_jsx(\"button\",{onClick:()=>setActiveIndex(i),style:{padding:\"8px 20px\",borderRadius:4,border:\"none\",cursor:\"pointer\",fontSize:16,fontWeight:500,fontFamily:\"Geist\",lineHeight:\"24px\",background:activeIndex===i?accentColor:\"transparent\",color:activeIndex===i?\"#fff\":\"#333\",transition:\"all 0.15s ease\"},children:item.buttonLabel},i))})]}),!isMobile&&/*#__PURE__*/_jsx(\"div\",{ref:stripRef,style:{borderColor:colorGreySalt200,borderStyle:\"solid\",borderWidth:\"1px 0\",overflow:\"hidden\",height:stripHeight},children:/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",alignItems:\"stretch\",minWidth:\"fit-content\",gap:1,backgroundColor:colorGreySalt200,transform:`translateX(-${offset}px)`,transition:\"transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)\"},children:items.map((item,i)=>/*#__PURE__*/_jsx(\"div\",{ref:el=>{cardRefs.current[i]=el;},style:{minWidth:`${cardWidth}px`,width:`${cardWidth}px`,flexShrink:0,alignSelf:\"stretch\",display:\"flex\",overflow:\"hidden\",boxSizing:\"border-box\"},children:cardContent(item,i,false)},i))})}),isMobile&&/*#__PURE__*/_jsx(\"div\",{style:{borderColor:colorGreySalt200,borderStyle:\"solid\",borderWidth:\"1px\",margin:\"0 16px\"},children:items.map((item,i)=>{const isOpen=openIndex===i;return /*#__PURE__*/_jsxs(\"div\",{style:{borderBottom:i<items.length-1?`1px solid ${colorGreySalt200}`:\"none\"},children:[/*#__PURE__*/_jsxs(\"button\",{onClick:()=>setOpenIndex(isOpen?-1:i),style:{width:\"100%\",display:\"flex\",alignItems:\"center\",gap:12,padding:\"16px\",background:\"white\",border:\"none\",cursor:\"pointer\",textAlign:\"left\",boxSizing:\"border-box\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{flexShrink:0,width:24,height:24,borderRadius:\"2px\",background:isOpen?accentColor:colorGreySalt100,color:isOpen?\"#fff\":\"#6B7280\",fontSize:12,fontWeight:700,fontFamily:\"Geist, sans-serif\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",transition:\"all 0.2s ease\"},children:i+1}),/*#__PURE__*/_jsx(\"span\",{style:{flex:1,fontSize:15,fontWeight:isOpen?600:400,fontFamily:\"Geist, sans-serif\",color:isOpen?\"#111\":\"#555\",transition:\"color 0.2s ease, font-weight 0.1s\"},children:item.buttonLabel}),/*#__PURE__*/_jsx(\"svg\",{width:\"16\",height:\"16\",viewBox:\"0 0 16 16\",fill:\"none\",style:{flexShrink:0,transform:isOpen?\"rotate(180deg)\":\"rotate(0deg)\",transition:\"transform 0.25s ease\",color:\"#111\"},children:/*#__PURE__*/_jsx(\"path\",{d:\"M4 6L8 10L12 6\",stroke:\"currentColor\",strokeWidth:\"1.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})})]}),/*#__PURE__*/_jsx(\"div\",{style:{maxHeight:isOpen?\"800px\":\"0px\",overflow:\"hidden\",transition:isOpen?\"max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1)\":\"max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1)\"},children:/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",boxSizing:\"border-box\",borderTop:`1px solid ${colorGreySalt200}`},children:cardContent(item,i,true)})})]},i);})})]})});}HowItWorks.defaultProps={title:\"How it works\",accentColor:\"#0057FF\",tabLabels:[\"Create an invoice\",\"Receive payments\",\"Send an invoice\",\"Analyze Invoice\"],slots:[]};const demoDescriptions=[\"Add a product and customer details, set tax rates manually or automatically, and save everything to your dashboard.\",\"Accept payments in 25+ languages and 135+ currencies, with 100+ local payment methods shown dynamically based on your customer's location.\",\"Send a branded email via Stripe with a link to pay online or download the invoice as a PDF — on any device.\",\"Get an instant breakdown of any invoice: line items, tax, discounts, and payment status — all in one view.\"];addPropertyControls(HowItWorks,{title:{type:ControlType.String,title:\"Title\",defaultValue:\"How it works\"},accentColor:{type:ControlType.Color,title:\"Accent Color\",defaultValue:\"#0057FF\"},tabLabels:{type:ControlType.Array,title:\"Tab Labels\",control:{type:ControlType.String,defaultValue:\"Step\"}},slots:{type:ControlType.Array,title:\"Card Frames\",control:{type:ControlType.ComponentInstance}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HowItWorks\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HowItWorks3.map"],"mappings":"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"}