{"version":3,"file":"PhoneDemo.CoIXiTOp.mjs","names":["useRef","useState","startTransition"],"sources":["https:/framerusercontent.com/modules/Un4GqmtCAG31QwmmhzvH/bF4Zhsjl4JyVQhkPX04c/PhoneDemo.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{motion,AnimatePresence,useInView}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";// FieldHive brand tokens\nconst INK=\"#081E2B\";const BLUE=\"#1E6995\";const AMBER=\"#F59E0B\";const GREEN=\"#2E802E\";const WHITE=\"#FFFFFF\";const FONT='Inter, \"Inter Placeholder\", sans-serif';// Real iPhone frame PNG — transparent body background AND transparent screen,\n// opaque dark-navy body with the Dynamic Island baked in. Uploaded once and\n// reused across every FieldHive phone component.\nconst FRAME_URL=\"https://framerusercontent.com/images/zrj2jxrWzF5UjAXwrO9odzPaXM.png\";// The frame's transparent screen rectangle, as a % of the frame box. The app\n// screen (and any on-screen overlays) live inside this rect.\nconst SCREEN_LEFT=\"5.33%\";const SCREEN_TOP=\"2.61%\";const SCREEN_W=\"89.11%\";const SCREEN_H=\"94.67%\";/**\n * FieldHive Phone Demo\n *\n * A realistic iPhone device mock — built from a real iPhone frame PNG overlay —\n * that auto-cycles through four FieldHive app screens (Bookings -> Create Quote\n * -> Send Invoice -> Paid) with floating status chips synced to each beat.\n * Respects reduced motion and renders a sensible first frame on the server /\n * canvas.\n *\n * @framerIntrinsicWidth 300\n * @framerIntrinsicHeight 650\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function PhoneDemo(props){const{screenBookings={src:\"https://framerusercontent.com/images/aPLtHlAiN2hgMysW4UTlOga2nho.png\",alt:\"FieldHive bookings for the day\"},screenQuote={src:\"https://framerusercontent.com/images/uw0hmOlh4wE5HVBPlwbm6GfVg.png\",alt:\"Creating a quote on site in FieldHive\"},screenInvoice={src:\"https://framerusercontent.com/images/zTv35n7ZXGhUtuUZlMI5aiZJnM.png\",alt:\"Sending an invoice in FieldHive\"},screenPaid={src:\"https://framerusercontent.com/images/3c5NhMnpIY0vg2gQRKEHTBA4d4.png\",alt:\"Invoice marked paid in FieldHive\"},animate=true,showChips=true,intervalMs=2400,maxWidth=300}=props;const beats=[{img:screenBookings,alt:screenBookings?.alt??\"Bookings\",chip:{label:\"New booking \\xb7 9:00am\",color:BLUE,top:\"9%\",left:-14}},{img:screenQuote,alt:screenQuote?.alt??\"Create quote\",chip:{label:\"Quote sent ✓\",color:INK,top:\"28%\",right:-14}},{img:screenInvoice,alt:screenInvoice?.alt??\"Send invoice\",chip:{label:\"\\xa31,850 invoiced\",color:AMBER,bottom:\"22%\",left:-14}},{img:screenPaid,alt:screenPaid?.alt??\"Paid\",chip:{label:\"Paid ✓ \\xa31,850\",color:GREEN,bottom:\"10%\",right:-14}}];const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const deviceRef=useRef(null);const isInView=useInView(containerRef,{amount:.35});const[reducedMotion,setReducedMotion]=useState(false);const[index,setIndex]=useState(0);// Measured device width in px — drives the proportional screen corner\n// radius. Falls back to maxWidth for the first paint and SSR.\nconst[deviceWidth,setDeviceWidth]=useState(maxWidth);// Detect prefers-reduced-motion (SSR-safe)\nuseEffect(()=>{if(typeof window===\"undefined\"||!window.matchMedia)return;const mq=window.matchMedia(\"(prefers-reduced-motion: reduce)\");const update=()=>startTransition(()=>setReducedMotion(mq.matches));update();if(mq.addEventListener)mq.addEventListener(\"change\",update);else if(mq.addListener)mq.addListener(update);return()=>{if(mq.removeEventListener)mq.removeEventListener(\"change\",update);else if(mq.removeListener)mq.removeListener(update);};},[]);// Measure the rendered device width so the screen corner radius scales\n// correctly at any size.\nuseEffect(()=>{if(typeof window===\"undefined\")return;const el=deviceRef.current;if(!el)return;const measure=()=>{const w=el.getBoundingClientRect().width;if(w>0)startTransition(()=>setDeviceWidth(w));};measure();if(typeof ResizeObserver===\"undefined\")return;const ro=new ResizeObserver(measure);ro.observe(el);return()=>ro.disconnect();},[]);const shouldAnimate=animate&&!isStatic&&!reducedMotion&&isInView;// Auto-cycle the beats\nuseEffect(()=>{if(!shouldAnimate)return;const step=Math.max(800,intervalMs);const id=window.setInterval(()=>{startTransition(()=>setIndex(i=>(i+1)%beats.length));},step);return()=>window.clearInterval(id);},[shouldAnimate,intervalMs,beats.length]);// When not animating, always sit on the first beat\nuseEffect(()=>{if(!shouldAnimate&&index!==0){startTransition(()=>setIndex(0));}},[shouldAnimate,index]);const active=beats[index]??beats[0];// Proportional screen corner radius from the measured device width. The\n// frame PNG covers the corners, so this only softens the app image edge.\nconst w=deviceWidth||maxWidth;const screenRadius=Math.round(w*.1);const rootStyle={position:\"relative\",width:\"100%\",maxWidth,margin:\"0 auto\",// vertical room so top/bottom chips are never clipped; no horizontal\n// padding so the device uses the full maxWidth.\npaddingTop:showChips?14:0,paddingBottom:showChips?14:0,boxSizing:\"border-box\",fontFamily:FONT,overflow:\"visible\",...props.style};return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:rootStyle,children:[/*#__PURE__*/_jsxs(\"div\",{ref:deviceRef,style:{position:\"relative\",width:\"100%\",aspectRatio:\"450 / 920\",overflow:\"visible\",filter:\"drop-shadow(0 2px 4px rgba(0,0,0,0.28)) drop-shadow(0 22px 45px rgba(0,0,0,0.45))\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:SCREEN_LEFT,top:SCREEN_TOP,width:SCREEN_W,height:SCREEN_H,borderRadius:screenRadius,overflow:\"hidden\",background:INK},children:/*#__PURE__*/_jsx(AnimatePresence,{initial:false,mode:\"popLayout\",children:/*#__PURE__*/_jsx(motion.img,{src:active.img?.src,srcSet:active.img?.srcSet,alt:active.alt,initial:shouldAnimate?{opacity:0,x:\"6%\"}:false,animate:{opacity:1,x:\"0%\"},exit:shouldAnimate?{opacity:0,x:\"-6%\"}:{opacity:0},transition:{duration:.55,ease:[.4,0,.2,1]},style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",objectPosition:\"top center\"}},index)})}),/*#__PURE__*/_jsx(\"img\",{src:FRAME_URL,alt:\"FieldHive app shown on an iPhone\",style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",pointerEvents:\"none\",zIndex:4}})]}),showChips&&/*#__PURE__*/_jsx(AnimatePresence,{children:/*#__PURE__*/_jsxs(motion.div,{initial:shouldAnimate?{opacity:0,scale:.7,y:6}:{opacity:1,scale:1,y:0},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.7,y:-6},transition:{type:\"spring\",stiffness:520,damping:26},style:{position:\"absolute\",top:active.chip.top,bottom:active.chip.bottom,left:active.chip.left,right:active.chip.right,display:\"flex\",alignItems:\"center\",gap:8,padding:\"8px 12px\",background:WHITE,color:INK,borderRadius:12,fontFamily:FONT,fontSize:13,fontWeight:600,lineHeight:1,whiteSpace:\"nowrap\",boxShadow:\"0 10px 24px -8px rgba(8,30,43,0.35), 0 1px 2px rgba(8,30,43,0.14)\",zIndex:5},children:[/*#__PURE__*/_jsx(\"span\",{style:{width:8,height:8,borderRadius:999,background:active.chip.color,flexShrink:0}}),active.chip.label]},`chip-${index}`)})]});}addPropertyControls(PhoneDemo,{screenBookings:{type:ControlType.ResponsiveImage,title:\"Bookings\"},screenQuote:{type:ControlType.ResponsiveImage,title:\"Create Quote\"},screenInvoice:{type:ControlType.ResponsiveImage,title:\"Send Invoice\"},screenPaid:{type:ControlType.ResponsiveImage,title:\"Paid\"},animate:{type:ControlType.Boolean,title:\"Animate\",defaultValue:true},showChips:{type:ControlType.Boolean,title:\"Show Chips\",defaultValue:true},intervalMs:{type:ControlType.Number,title:\"Interval\",defaultValue:2400,min:1200,max:6e3,step:100,unit:\"ms\",hidden:p=>!p.animate},maxWidth:{type:ControlType.Number,title:\"Max Width\",defaultValue:300,min:160,max:420,step:10,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PhoneDemo\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicWidth\":\"300\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"650\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PhoneDemo.map"],"mappings":"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"}