https://heybutler.io/_nuxt/9yoabrxW.js

1import{an as e,az as t,aw as a,aM as s,aB as l,aJ as r,r as o,a6 as i,aA as c,E as d,ax as n,x as v,aC as u,aF as p,aD as x,aE as m,C as f}from"./Bk4gYN7e.js";import{P as h}from"./2_fh3gE6.js";import{C as b}from"./D4dXWmt0.js";import{_ as y}from"./C0pMlZII.js";import{P as w}from"./CHEP_Krp.js";import{_ as g}from"./CBik67t8.js";import{s as k}from"./DSXY0Md2.js";import"./ChbGje9x.js";const j={class:"space-y-2"},C={class:"flex gap-1 items-center text-[10px] font-semibold text-black"},M=["src","alt"],_={class:"self-stretch my-auto flex-1 min-w-0"},H={class:"truncate"},B=["onClick"],q=y({__name:"MenuItems",emits:["quantity-change"],setup(o,{emit:i}){const c=i,d=[{name:"Sushi",price:"45",description:"Mushroom stuffed with wasabi...",image:"https://cached.heybutler.io/api-uploads/ace191f39076b40d7bb7dd493d73180fe8e1c34304747a8917ffeb3283991fb5-kn0qzpls.png"},{name:"Cheese Cake",price:"45",description:"Classic New York style...",image:"https://cached.heybutler.io/api-uploads/3177730ed52b43ab4b78455d95aafa70bad2a11b62d4e9103f6d7fa99028e671-ia2uu9js.png"}];return(o,i)=>(t(),e("div",j,[(t(),e(a,null,s(d,((e,t)=>l("div",{key:t,class:"flex w-full rounded-none max-w-full hover:bg-gray-50 transition-colors cursor-pointer"},[l("div",C,[l("img",{src:e.image,class:"object-cover overflow-hidden shrink-0 self-stretch my-auto rounded-lg aspect-square w-[30px]",alt:e.name},null,8,M),l("div",_,[l("div",null,r(e.name),1),l("div",null,"$"+r(e.price),1),l("div",H,r(e.description),1)])]),l("div",{onClick:t=>(e=>{c("quantity-change",{id:e.name,name:e.name,price:parseFloat(e.price),quantity:1,menuName:"Sample Menu",category:"Sample Category"})})(e),class:"flex gap-2 items-center self-start px-1 py-px rounded border border-solid border-zinc-300 min-h-[12px] hover:bg-gray-200 transition-colors"},i[0]||(i[0]=[l("img",{src:"https://cached.heybutler.io/api-uploads/6144520183a8e354494c17a917b84cc0352c180460da4529eacbed15bb6ed870-w7nyzwtb",class:"object-contain overflow-hidden self-stretch my-auto aspect-square w-[10px]",alt:"Add"},null,-1)]),8,B)]))),64))]))}},[["__scopeId","data-v-70bcf715"]]),A={class:"relative w-full max-w-[300px] max-md:max-w-[280px] max-sm:max-w-[250px]"},L={class:"flex overflow-hidden flex-col px-3 pt-3 pb-3 mx-auto w-full border-black border-solid bg-zinc-100 border-[6px] rounded-[31px] min-h-[500px]",style:{"aspect-ratio":"9/20",display:"flex","flex-direction":"column"}},T={class:"flex justify-start mx-3 mt-2"},z={class:"flex flex-col items-start"},I={class:"mt-2 mx-3"},S={class:"flex flex-col px-2 w-full"},V={class:"mt-3 w-full"},W={class:"flex justify-start mx-3 mt-2"},G={class:"flex flex-col items-start"},O={class:"flex justify-end mx-3 mt-2"},E={class:"flex flex-col items-end"},F=y({__name:"PhoneDemo",setup(a){const s=o(null),r=o(null),n=o(null),v=o(null),u=o(null),p=o(null),x=o(null),m=()=>{if(s.value){const e=s.value.scrollHeight,t=s.value.scrollTop,a=e-s.value.clientHeight;if(a-t>10){const e=performance.now(),l=300,r=o=>{const i=o-e,c=Math.min(i/l,1),d=1-(1-c)*(1-c);s.value.scrollTop=t+(a-t)*d,c<1&&requestAnimationFrame(r)};requestAnimationFrame(r)}else s.value.scrollTop=a}},f=()=>{setTimeout((()=>{r.value&&(r.value.classList.remove("opacity-0","translate-y-2"),r.value.classList.add("opacity-100","translate-y-0"),m()),setTimeout((()=>{n.value&&(n.value.classList.remove("opacity-0","translate-y-2"),n.value.classList.add("opacity-100","translate-y-0"),m()),setTimeout((()=>{v.value&&(v.value.classList.remove("opacity-0","translate-y-2"),v.value.classList.add("opacity-100","translate-y-0"),m()),setTimeout((()=>{u.value&&(u.value.classList.remove("opacity-0","translate-y-2"),u.value.classList.add("opacity-100","translate-y-0"),m()),setTimeout((()=>{p.value&&(p.value.classList.remove("opacity-0","translate-y-2"),p.value.classList.add("opacity-100","translate-y-0"),m(),setTimeout((()=>{x.value&&(x.value.classList.remove("opacity-0","translate-y-2"),x.value.classList.add("opacity-100","translate-y-0"),m())}),800))}),1e3)}),1500)}),800)}),1e3)}),1e3)};return i((()=>{setTimeout((()=>{f()}),450)})),(a,o)=>(t(),e("div",A,[l("div",L,[c(h),o[5]||(o[5]=d('<div class="flex shrink-0 self-center mt-0 h-4 bg-black rounded-2xl w-[50px]" data-v-2c42f6b3></div><div class="flex gap-5 justify-between mx-3 mt-3 max-md:mx-2" data-v-2c42f6b3><img src="https://cached.heybutler.io/api-uploads/b5025a85473e09b384d99235bec60eadcb0e306275430568f54cd6b66274a620-cr0lcw99" class="object-contain overflow-hidden shrink-0 aspect-square w-[15px]" alt="Back" data-v-2c42f6b3><div class="text-xs font-semibold text-center text-neutral-400" data-v-2c42f6b3> Room no. 508 </div><div class="flex gap-2" data-v-2c42f6b3><img src="https://cached.heybutler.io/api-uploads/8451c89629ca04150b16be81fd7541f0026219e8b23b060e34283f391d1ede59-vnvvnlpv" class="object-contain overflow-hidden shrink-0 aspect-square w-[15px] hover:opacity-70 transition-opacity cursor-pointer" alt="Call" data-v-2c42f6b3><img src="https://cached.heybutler.io/api-uploads/702dc86efdce02a6e562b89ba4b98bcbd40eefae10c4f0fcb2e09784fc000de4-hr4516ld" class="object-contain overflow-hidden shrink-0 aspect-square w-[15px] hover:opacity-70 transition-opacity cursor-pointer" alt="Menu" data-v-2c42f6b3></div></div>',2)),l("div",{class:"flex flex-col flex-grow overflow-y-auto scrollbar-hide",ref_key:"chatContainer",ref:s},[o[4]||(o[4]=d('<div class="flex flex-col self-center mt-3 max-w-full text-center text-black w-[180px] animate-fade-in" data-v-2c42f6b3><img src="https://cached.heybutler.io/api-uploads/d712c30abe62b221bc88de8c9a02701140e756c9eb85d686d932927b31b1f62c-pn54j4w0" class="object-contain overflow-hidden self-center aspect-square w-[28px] animate-pulse-subtle" alt="Butler icon" data-v-2c42f6b3><div class="flex flex-col items-start mt-2 w-full" data-v-2c42f6b3><h3 class="text-sm font-semibold" data-v-2c42f6b3>Hi, I&#39;m your Butler</h3><p class="mt-1 text-xs" data-v-2c42f6b3>How can I help you today?</p></div></div>',1)),c(b,{onCardsAnimationComplete:f}),l("div",T,[l("div",z,[l("div",{ref_key:"userMessageBubble",ref:r,class:"flex gap-2 items-center p-2 bg-gray-200 rounded-lg rounded-bl-none shadow-sm opacity-0 transform translate-y-2 transition-all duration-500 ease-out"},o[0]||(o[0]=[l("div",{class:"text-xs text-center text-black"},"Can I see the menu please?",-1)]),512)])]),l("div",I,[l("div",{ref_key:"menuBubble",ref:n,class:"gap-2 p-2 text-xs leading-none bg-white rounded-lg rounded-br-none shadow-sm text-neutral-700 opacity-0 transform translate-y-2 transition-all duration-500 ease-out"}," Sure, here's the menu ",512),l("div",{ref_key:"menuContent",ref:v,class:"overflow-hidden pt-2 pb-4 mt-3 max-w-full bg-white rounded-md shadow-sm w-full opacity-0 transform translate-y-2 transition-all duration-500 ease-out"}

1,[l("div",S,[o[1]||(o[1]=d('<h3 class="self-start text-xs font-semibold text-center text-black" data-v-2c42f6b3> Clayton Hotel Menu </h3><div class="flex gap-2 items-center mt-2 text-[10px] text-center text-neutral-400" data-v-2c42f6b3><span class="self-stretch my-auto font-semibold text-black" data-v-2c42f6b3>Starters</span><span class="self-stretch my-auto" data-v-2c42f6b3>Main Dishes</span><span class="self-stretch my-auto" data-v-2c42f6b3>Snacks</span><span class="self-stretch my-auto" data-v-2c42f6b3>Beverages</span></div>',2)),l("div",V,[c(q)])])],512)]),l("div",W,[l("div",G,[l("div",{ref_key:"secondUserMessageBubble",ref:u,class:"flex gap-2 items-center p-2 bg-gray-200 rounded-lg rounded-bl-none shadow-sm opacity-0 transform translate-y-2 transition-all duration-500 ease-out"},o[2]||(o[2]=[l("div",{class:"text-xs text-center text-black"},"I will have the sushi and cheese cake",-1)]),512)])]),l("div",O,[l("div",E,[l("div",{ref_key:"notificationBubble",ref:p,class:"flex gap-2 items-center p-2 bg-white rounded-lg rounded-br-none shadow-sm opacity-0 transform translate-y-2 transition-all duration-500 ease-out"},o[3]||(o[3]=[l("div",{class:"text-xs text-center"},"Your request is received!",-1),l("div",{class:"flex justify-center items-center p-1 bg-amber-100 rounded-full animate-pulse-subtle"},[l("svg",{class:"w-3 h-3 text-amber-600",fill:"currentColor",viewBox:"0 0 20 20"},[l("path",{d:"M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"})])],-1)]),512),l("div",{ref_key:"expectShortly",ref:x,class:"mt-1 text-[8px] text-neutral-500 opacity-0 transform translate-y-2 transition-all duration-500 ease-out"}," Expect it in 30 minutes ",512)])])],512),o[6]||(o[6]=d('<div class="flex overflow-hidden gap-5 justify-between px-3 py-1.5 mx-3 mt-2 mb-1 bg-white rounded-xl" data-v-2c42f6b3><div class="my-auto text-xs font-medium leading-none text-neutral-400 animate-pulse-text" data-v-2c42f6b3> Ask your butler </div><div class="flex gap-2" data-v-2c42f6b3><img src="https://cached.heybutler.io/api-uploads/576d8d78394e1bb72a89f719b84844dfeb8fae4aebb7749ee9f626677333f221-r9951o60" class="object-contain overflow-hidden shrink-0 my-auto aspect-square w-[15px] hover:opacity-70 transition-opacity cursor-pointer" alt="Microphone" data-v-2c42f6b3><div class="flex overflow-hidden flex-col justify-center items-center pr-1 pl-1 bg-black h-[18px] min-h-[18px] rounded-[31px] w-[18px] hover:bg-gray-700 transition-colors cursor-pointer" data-v-2c42f6b3><img src="https://cached.heybutler.io/api-uploads/f675f886e0cd4cdaea7970c9c78f24bac3510b1714cb333e837ba7a9c07dd034-vrp3quyw" class="object-contain overflow-hidden w-3 aspect-square" alt="Send" data-v-2c42f6b3></div></div></div>',1))])]))}},[["__scopeId","data-v-2c42f6b3"]]),Y={class:"relative w-full max-w-[300px] max-md:max-w-[280px] max-sm:max-w-[250px]"},P={class:"flex overflow-hidden flex-col px-3 pt-0 pb-3 mx-auto w-full border-black border-solid bg-zinc-100 border-[6px] rounded-[31px] min-h-[500px]",style:{"aspect-ratio":"9/20",display:"flex","flex-direction":"column"}},D=y({__name:"PhoneDemoGmail",setup(a){const s=o(null),r=o(null),c=o(null),n=o(null),v=o(null),u=o(null),p=()=>{[{ref:r,delay:500},{ref:c,delay:1e3},{ref:n,delay:1500},{ref:v,delay:2e3},{ref:u,delay:2500}].forEach((({ref:e,delay:t})=>{setTimeout((()=>{e.value&&(e.value.classList.remove("opacity-0","translate-y-2"),e.value.classList.add("opacity-100","translate-y-0"),(()=>{if(s.value){const e=s.value.scrollHeight,t=s.value.scrollTop,a=e-s.value.clientHeight;if(a-t>10){const e=performance.now(),l=300,r=o=>{const i=o-e,c=Math.min(i/l,1),d=1-(1-c)*(1-c);s.value.scrollTop=t+(a-t)*d,c<1&&requestAnimationFrame(r)};requestAnimationFrame(r)}else s.value.scrollTop=a}})())}),t)}))};return i((()=>{setTimeout((()=>{p()}),450)})),(a,o)=>(t(),e("div",Y,[l("div",P,[o[5]||(o[5]=d('<div class="relative -mx-3 bg-white rounded-t-[24px] border-b border-gray-200" data-v-c93c5775><div class="flex justify-between items-center px-3 pt-2 pb-1 text-[10px] font-medium text-gray-900" data-v-c93c5775><div data-v-c93c5775>9:41</div><div class="flex items-center gap-1" data-v-c93c5775>

1<svg class="w-3 h-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-c93c5775><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2Z" stroke="currentColor" stroke-width="2" data-v-c93c5775></path><path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-c93c5775></path></svg><svg class="w-3 h-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-c93c5775><path d="M4 4H20V20H4V4Z" stroke="currentColor" stroke-width="2" data-v-c93c5775></path><path d="M4 9H20" stroke="currentColor" stroke-width="2" data-v-c93c5775></path><path d="M9 4V20" stroke="currentColor" stroke-width="2" data-v-c93c5775></path></svg><svg class="w-3 h-3 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-c93c5775><path d="M18 10L21 7L18 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-v-c93c5775></path><path d="M21 7H7C4.79086 7 3 8.79086 3 11V20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-v-c93c5775></path></svg></div></div><div class="flex justify-center pb-1" data-v-c93c5775><div class="h-4 w-[50px] bg-black rounded-full" data-v-c93c5775></div></div><div class="flex items-center gap-3 px-3 py-2 pb-2 border-b border-gray-200" data-v-c93c5775><svg class="w-5 h-5 text-gray-700 cursor-pointer hover:opacity-80 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-c93c5775><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-v-c93c5775></path></svg><div class="flex-1 flex items-center gap-2" data-v-c93c5775><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" data-v-c93c5775><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z" fill="#EA4335" data-v-c93c5775></path></svg><span class="text-sm font-medium text-gray-700" data-v-c93c5775>Gmail</span></div><svg class="w-5 h-5 text-gray-700 cursor-pointer hover:opacity-80 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-c93c5775><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" data-v-c93c5775></path></svg><div class="w-7 h-7 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-xs font-semibold" data-v-c93c5775> G </div></div></div>',1)),l("div",{class:"flex flex-col flex-grow overflow-y-auto scrollbar-hide bg-white -mx-3 px-3 mt-1 pb-1",ref_key:"emailContainer",ref:s},[l("div",{ref_key:"email1",ref:r,class:"border-b border-gray-200 py-3 px-2 cursor-pointer hover:bg-gray-50 transition-colors opacity-0 transform translate-y-2 transition-all duration-500 ease-out"},o[0]||(o[0]=[d('<div class="flex items-start gap-2" data-v-c93c5775><div class="w-8 h-8 rounded-full bg-white flex items-center justify-center flex-shrink-0 border border-gray-200" data-v-c93c5775><img src="https://assets.heybutler.io/api-uploads/mira-icon-2_5pqri7.svg" class="w-6 h-6" alt="Hotel" data-v-c93c5775></div><div class="flex-1 min-w-0" data-v-c93c5775><div class="flex items-center justify-between mb-1" data-v-c93c5775><div class="text-xs font-semibold text-gray-900 truncate" data-v-c93c5775>The Grand Hotel</div><div class="text-[9px] text-gray-500 ml-2" data-v-c93c5775>2 days ago</div></div><div class="text-xs font-semibold text-gray-900 mb-0.5 truncate" data-v-c93c5775>Welcome to The Grand Hotel! 🎉</div><div class="text-[10px] text-gray-600 line-clamp-2" data-v-c93c5775> We&#39;re excited to host you! Here&#39;s everything you need to know about your upcoming stay... </div></div><svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-c93c5775><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" data-v-c93c5775></path></svg></div>',1)]),512),l("div",{ref_key:"email2",ref:c,class:"border-b border-gray-200 py-3 px-2 cursor-pointer hover:bg-gray-50 transition-colors opacity-0 transform translate-y-2 transition-all duration-500 ease-out"},o[1]||(o[1]=[d('<div class="flex items-start gap-2" data-v-c93c5775><div class="w-8 h-8 rounded-full bg-white flex items-center justify-center flex-shrink-0 border border-gray-200" data-v-c93c5775><img src="https://assets.heybutler.io/api-uploads/mira-icon-2_5pqri7.svg" class="w-6 h-6" alt="Hotel" data-v-c93c5775></div><div class="flex-1 min-w-0" data-v-c93c5775><div class="flex items-center justify-between mb-1" data-v-c93c5775><div class="text-xs font-semibold text-gray-900 truncate" data-v-c93c5775>The Grand Hotel</div><div class="text-[9px] text-gray-500 ml-2" data-v-c93c5775>Yesterday</div></div><div class="text-xs font-semibold text-gray-900 mb-0.5 truncate" data-v-c93c5775>Check-in Tomorrow - Quick Guide 📋</div><div class="text-[10px] text-gray-600 line-clamp-2" data-v-c93c5775> Your check-in is tomorrow at 3:00 PM. Here&#39;s what to expect and how to make it seamless... </div></div><svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-c93c5775><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" data-v-c93c5775></path></svg></div>',1)]),512),l("div",{ref_key:"email3",ref:n,class:"border-b border-gray-200 py-3 px-2 cursor-pointer hover:bg-gray-50 transition-colors bg-blue-50/30 opacity-0 transform translate-y-2 transition-all duration-500 ease-out"},o[2]||(o[2]=[d('<div class="flex items-start gap-2" data-v-c93c5775><div class="w-8 h-8 rounded-full bg-white flex items-center justify-center flex-shrink-0 border border-gray-200" data-v-c93c5775><img src="https://assets.heybutler.io/api-uploads/mira-icon-2_5pqri7.svg" class="w-6 h-6" alt="Hotel" data-v-c93c5775></div><div class="flex-1 min-w-0" data-v-c93c5775><div class="flex items-center justify-between mb-1" data-v-c93c5775><div class="text-xs font-semibold text-gray-900 truncate" data-v-c93c5775>The Grand Hotel</div><div class="text-[9px] text-gray-500 ml-2" data-v-c93c5775>Today</div></div><div class="text-xs font-semibold text-gray-900 mb-0.5 truncate" data-v-c93c5775>Room Service Menu - Order Now 🍽️</div><div class="text-[10px] text-gray-600 line-clamp-2" data-v-c93c5775> Browse our delicious room service menu. Order directly from this email or reply with your preferences... </div></div><div class="w-2 h-2 rounded-full bg-blue-600 flex-shrink-0 mt-1" data-v-c93c5775></div></div>',1)]),512),l("div",{ref_key:"email4",ref:v,class:"border-b border-gray-200 py-3 px-2 cursor-pointer hover:bg-gray-50 transition-colors opacity-0 transform translate-y-2 transition-all duration-500 ease-out"},o[3]||(o[3]=[d('<div class="flex items-start gap-2" data-v-c93c5775><div class="w-8 h-8 rounded-full bg-white flex items-center justify-center flex-shrink-0 border border-gray-200" data-v-c93c5775><img src="https://assets.heybutler.io/api-uploads/mira-icon-2_5pqri7.svg" class="w-6 h-6" alt="Hotel" data-v-c93c5775></div><div class="flex-1 min-w-0" data-v-c93c5775><div class="flex items-center justify-between mb-1" data-v-c93c5775><div class="text-xs font-semibold text-gray-900 truncate" data-v-c93c5775>The Grand Hotel</div><div class="text-[9px] text-gray-500 ml-2" data-v-c93c5775>1 week ago</div></div><div class="text-xs font-semibold text-gray-900 mb-0.5 truncate" data-v-c93c5775>How was your stay? ⭐</div><div class="text-[10px] text-gray-600 line-clamp-2" data-v-c93c5775> We&#39;d love to hear about your experience! Your feedback helps us improve and serve you better... </div></div><svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-c93c5775><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" data-v-c93c5775></path></svg></div>',1)]),512),l("div",{ref_key:"email5",ref:u,class:"border-b border-gray-200 py-3 px-2 cursor-pointer hover:bg-gray-50 transition-colors opacity-0 transform translate-y-2 transition-all duration-500 ease-out"},o[4]||(o[4]=[d('<div class="flex items-start gap-2" data-v-c93c5775><div class="w-8 h-8 rounded-full bg-white flex items-center justify-center flex-shrink-0 border border-gray-200" data-v-c93c5775><img src="https://assets.heybutler.io/api-uploads/mira-icon-2_5pqri7.svg" class="w-6 h-6" alt="Hotel" data-v-c93c5775></div><div class="flex-1 min-w-0" data-v-c93c5775><div class="flex items-center justify-between mb-1" data-v-c93c5775><div class="text-xs font-semibold text-gray-900 truncate" data-v-c93c5775>The Grand Hotel</div><div class="text-[9px] text-gray-500 ml-2" data-v-c93c5775>2 weeks ago</div></div><div class="text-xs font-semibold text-gray-900 mb-0.5 truncate" data-v-c93c5775>Exclusive Offer: 20% Off Your Next Stay 🎁</div><div class="text-[10px] text-gray-600 line-clamp-2" data-v-c93c5775> As a valued guest, enjoy 20% off your next booking. Book within 30 days to redeem... </div></div><svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-c93c5775><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" data-v-c93c5775></path></svg></div>',1)]),512)],512),o[6]||(o[6]=l("div",{class:"absolute bottom-4 right-4"},[l("div",{class:"w-12 h-12 bg-blue-600 rounded-full shadow-lg flex items-center justify-center cursor-pointer hover:bg-blue-700 transition-colors"}

1,[l("svg",{class:"w-6 h-6 text-white",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[l("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M12 4v16m8-8H4"})])])],-1))])]))}},[["__scopeId","data-v-c93c5775"]]),N={class:"relative w-full"},R={class:"flex flex-col items-center gap-1 mb-2 relative z-40"},U={key:0,class:"flex items-center gap-1.5 text-[10px] text-gray-500 animate-pulse-hint"},Z={class:"inline-flex items-center gap-1 bg-gray-100/80 backdrop-blur-sm p-0.5 rounded-lg border border-gray-200/50 shadow-sm"},J={class:"relative z-10 flex justify-center w-full"},Q={class:"relative shrink-0 w-[250px] max-sm:w-[250px] sm:w-[280px] lg:w-[300px]"},$={class:"transition-wrapper min-h-[520px] relative z-10"},K=y({__name:"MobileFrameWithFeatures",props:{showWhatsApp:{type:Boolean,default:!1},activeScenario:{type:Object,default:()=>({name:"room-service",messages:[{type:"butler",text:"Hi! I'm your Butler AI assistant. How can I help you today?",time:"9:41 AM"},{type:"user",text:"I'd like to order room service please",time:"9:41 AM"},{type:"butler",text:"I'd be happy to help you order room service! Here's our menu. What would you like to order?",time:"9:42 AM"},{type:"butler",text:"Your order has been confirmed! ✨ I'll make sure it's delivered fresh and hot to your room.",time:"9:42 AM"}]})}},setup(a){const s=a,r=o(s.showWhatsApp?"whatsapp":"web"),d=o(!0),h=o(!0);let b=null;const y=["whatsapp","email","web"],j=e=>{r.value=e,d.value&&(d.value=!1,h.value=!1,b&&(clearInterval(b),b=null))};i((()=>{b&&clearInterval(b),b=k((()=>{if(d.value){const e=(y.indexOf(r.value)+1)%y.length;r.value=y[e]}}),1e4),setTimeout((()=>{h.value=!1}),5e3)})),n((()=>{b&&clearInterval(b)}));const C=v((()=>s.activeScenario));return(a,s)=>(t(),e("div",N,[l("div",R,[h.value?(t(),e("div",U,s[3]||(s[3]=[l("svg",{class:"w-3 h-3 text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[l("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"})],-1),l("span",null,"Click to explore or wait to see all options",-1)]))):u("",!0),l("div",Z,[l("button",{type:"button","aria-label":"WhatsApp",onClick:s[0]||(s[0]=e=>j("whatsapp")),class:p(["relative px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-300 ease-out","flex items-center gap-1.5 justify-center min-h-9","whatsapp"===r.value?"bg-[#075E54] text-white shadow-md shadow-[#075E54]/30 scale-105":"text-gray-600 hover:text-gray-900 hover:bg-white/60"])},s[4]||(s[4]=[l("svg",{class:"w-3 h-3",fill:"currentColor",viewBox:"0 0 24 24"},[l("path",{d:"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214a10.002 10.002 0 01-3.5-3.5l-.214-.361a9.87 9.87 0 01-1.378-5.031c0-5.523 4.477-10 10-10s10 4.477 10 10c0 5.523-4.477 10-10 10m0-22a12 12 0 100 24 12 12 0 000-24"})],-1),l("span",{class:"hidden sm:inline"},"WhatsApp",-1)]),2),l("button",{type:"button","aria-label":"Email",onClick:s[1]||(s[1]=e=>j("email")),class:p(["relative px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-300 ease-out","flex items-center gap-1.5 justify-center min-h-9","email"===r.value?"bg-blue-600 text-white shadow-md shadow-blue-600/30 scale-105":"text-gray-600 hover:text-gray-900 hover:bg-white/60"])},s[5]||(s[5]=[l("svg",{class:"w-3 h-3",fill:"currentColor",viewBox:"0 0 24 24"},[l("path",{d:"M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.45

15 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"})],-1),l("span",{class:"hidden sm:inline"},"Email",-1)]),2),l("button",{type:"button","aria-label":"Web Chat",onClick:s[2]||(s[2]=e=>j("web")),class:p(["relative px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-300 ease-out","flex items-center gap-1.5 justify-center min-h-9","web"===r.value?"bg-gray-900 text-white shadow-md shadow-gray-900/30 scale-105":"text-gray-600 hover:text-gray-900 hover:bg-white/60"])},s[6]||(s[6]=[l("svg",{class:"w-3 h-3",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},[l("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"})],-1),l("span",{class:"hidden sm:inline"},"Web Chat",-1)]),2)])]),l("div",J,[l("div",Q,[l("div",$,[c(f,{name:"fade-slide",mode:"out-in"},{default:x((()=>[(t(),e("div",{key:r.value,class:"transition-container"},["whatsapp"===r.value?(t(),m(w,{key:0})):"email"===r.value?(t(),m(D,{key:1})):(t(),m(F,{key:2,messages:C.value.messages,scenario:C.value.name},null,8,["messages","scenario"]))]))])),_:1})]),c(g,{title:"+93.9% Upsell Revenue",description:"Verified at Sunday Morning Collection — contextual offers timed to the stay",icon:"plus",color:"blue",transform:"rotate-2",delay:300,visibleOn:"desktop","overlap-frame":"",class:"absolute top-[12%] left-full ml-3 w-[220px] max-w-[220px] lg:w-[240px] lg:max-w-[240px] xl:ml-4 xl:w-[250px] xl:max-w-[250px]"}),c(g,{title:"38-Second Resolution",description:"295 guest requests handled at a 38-second average, without extra staff",icon:"chart",color:"purple",transform:"-rotate-2",delay:400,visibleOn:"desktop","overlap-frame":"",class:"absolute top-[10%] right-full mr-3 w-[220px] max-w-[220px] lg:w-[240px] lg:max-w-[240px] xl:mr-4 xl:w-[250px] xl:max-w-[250px]"}),c(g,{title:"Works on WhatsApp",description:"Guests stay on the channel they know — no app download required",icon:"whatsapp",color:"green",transform:"-rotate-1",delay:500,visibleOn:"desktop","overlap-frame":"",class:"absolute bottom-[14%] left-full ml-3 w-[220px] max-w-[220px] lg:w-[240px] lg:max-w-[240px] xl:ml-4 xl:w-[250px] xl:max-w-[250px]"}),c(g,{title:"Full Ops Visibility",description:"Assignments, SLAs, and audit logs — supervisors see everything",icon:"star",color:"amber",transform:"rotate-1",delay:600,visibleOn:"desktop","overlap-frame":"",class:"absolute bottom-[16%] right-full mr-3 w-[220px] max-w-[220px] lg:w-[240px] lg:max-w-[240px] xl:mr-4 xl:w-[250px] xl:max-w-[250px]"}),s[7]||(s[7]=l("div",{class:"absolute top-1/4 -right-6 w-40 h-40 bg-primary-100/35 rounded-full filter blur-[36px] animate-pulse-subtle pointer-events-none -z-10","aria-hidden":"true"},null,-1)),s[8]||(s[8]=l("div",{class:"absolute bottom-1/4 -left-6 w-40 h-40 bg-primary-200/35 rounded-full filter blur-[36px] animate-pulse-subtle delay-500 pointer-events-none -z-10","aria-hidden":"true"},null,-1))])])]))}},[["__scopeId","data-v-a40ea37a"]]);export{K as default};