https://boombam.app/assets/facebook-ad-mockup-BkALhgJj.js

1import{aM as J,r as R,j as e,ap as S,B as M,a4 as I,s as w,aF as K,$ as X,a0 as Z,a1 as V,a2 as F,a3 as G,ad as ee,cV as te,w as se}from"./index-CuSEeJFb.js";import{u as ae,F as U}from"./file-management-panel-CMp7oECT.js";import{E as re}from"./ellipsis-DL2QQYI6.js";import{S as le}from"./share-B5BYf7qZ.js";import{G as oe}from"./grid-3x3-CB6J-yDX.js";import{P as ne}from"./play-oR40AlEL.js";import"./image-fQC3p4ps.js";import"./video-AMZtj4XD.js";import"./upload-rep3KVPL.js";const v={apply_now:"Apply Now",book_now:"Book Now",buy_tickets:"Buy Tickets",call_now:"Call Now",contact_us:"Contact Us",donate_now:"Donate Now",download:"Download",get_directions:"Get Directions",get_offer:"Get Offer",get_quote:"Get Quote",get_showtimes:"Get Showtimes",install_now:"Install Now",learn_more:"Learn More",like_page:"Like Page",listen_now:"Listen Now",open_link:"Open Link",order_now:"Order Now",play_game:"Play Game",request_time:"Request Time",save:"Save",see_menu:"See Menu",send_message:"Send Message",send_whatsapp_message:"Send WhatsApp Message",shop_now:"Shop Now",sign_up:"Sign Up",subscribe:"Subscribe",use_app:"Use App",view_event:"View Event",watch_more:"Watch More"},ce={awareness:["apply_now","book_now","call_now","contact_us","download","get_directions","get_quote","get_showtimes","learn_more","listen_now","order_now","request_time","save","see_menu","send_message","send_whatsapp_message","shop_now","sign_up","subscribe","watch_more"],traffic:["apply_now","book_now","contact_us","donate_now","download","get_offer","get_quote","get_showtimes","learn_more","listen_now","open_link","order_now","play_game","request_time","see_menu","send_message","send_whatsapp_message","shop_now","sign_up","subscribe","use_app","watch_more"],engagement:["apply_now","book_now","call_now","contact_us","donate_now","download","get_offer","get_quote","get_showtimes","learn_more","like_page","listen_now","open_link","order_now","play_game","request_time","see_menu","send_message","send_whatsapp_message","shop_now","sign_up","subscribe","use_app","watch_more"],leads:["apply_now","book_now","contact_us","donate_now","download","get_offer","get_quote","get_showtimes","learn_more","listen_now","open_link","order_now","play_game","request_time","see_menu","send_message","shop_now","sign_up","subscribe","use_app","watch_more"],app_promotion:["book_now","download","install_now","learn_more","listen_now","play_game","shop_now","sign_up","subscribe","use_app","watch_more"],sales:["apply_now","book_now","contact_us","donate_now","download","get_offer","get_quote","get_showtimes","learn_more","listen_now","open_link","order_now","play_game","request_time","see_menu","send_message","send_whatsapp_message","shop_now","sign_up","subscribe","use_app","watch_more"]};function z(d){return ce[d]||[]}function W(d){return z(d).map(c=>({value:c,label:v[c]}))}function ie(d){const r=z(d);return r.includes("learn_more")?"learn_more":r.includes("shop_now")?"shop_now":r.includes("sign_up")?"sign_up":r.includes("contact_us")?"contact_us":r.includes("book_now")?"book_now":r.includes("download")?"download":r[0]||"learn_more"}function _e({register:d,setValue:r,watch:c,businessProfile:x,isGeneratingField:a,onGenerateField:m,creativeFormat:O}){var q;const E=c("platformContent.headline")||"",g=c("platformContent.primaryText")||"",D=c("platformContent.description")||"",H=c("platformContent.callToAction")||"Learn More",h=c("platformContent.adObjective")||"awareness",p=c("platformContent.callToActionType")||"learn_more",L=c("platformContent.imageUrl")||"",$=c("destinationUrl")||"",f=c("platformContent.creativeFormat")||O||"single_image",[y,P]=J.useState(!1),[n,_]=R.useState([]),j=s=>{_(l=>[...l,...s]),b([...n,...s],t)},N=s=>{const l=n.filter(o=>o.id!==s);_(l),b(l,t)},k=(s,l)=>{const o=n.findIndex(Y=>Y.id===s);if(o===-1)return;const i=[...n],u=l==="up"?o-1:o+1;u>=0&&u<i.length&&([i[o],i[u]]=[i[u],i[o]],_(i),b(i,t))},b=(s,l)=>{const o=[...l.map(i=>i.url),...s.map(i=>i.fileUrl)];r("platformContent.imageUrls",o),o.length>0&&r("platformContent.imageUrl",o[0])},{files:t,isUploading:de,addFiles:me,removeFile:A,moveFile:C,triggerFileSelect:T,canAddMore:xe}=ae({onFilesChange:s=>{b(n,s)},maxFiles:f==="carousel"?10:f==="collection"?4:1,initialFiles:L?[{id:"existing",url:L,name:"Existing Image",type:"image/jpeg",size:0}]:[]});R.useEffect(()=>{if(h){const s=ie(h),l=p;W(h).some(u=>u.value===l)||(r("platformContent.callToActionType",s),r("platformContent.callToAction",v[s]))}},[h,r,p]);const B=W(h),Q=()=>{switch(f){case"video":return e.jsxs("div",{className:"relative bg-black aspect-video flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 bg-gray-900 flex items-center justify-center",children:e.jsxs("div",{className:"text-center text-white",children:[e.jsx("div",{className:"w-20 h-20 bg-black/50 rounded-full mx-auto mb-3 flex items-center justify-center border-2 border-white",children:e.jsx(ne,{className:"w-8 h-8 text-white ml-1",fill:"white"})}),e.jsx("div",{className:"text-sm",children:"Video Ad"}),e.jsx("div",{className:"text-xs text-gray-300 mt-1",children:"Click to play"})]})}),e.jsx("div",{className:"absolute bottom-2 left-2 bg-black/70 text-white text-xs px-2 py-1 rounded",children:"0:15"}),null]});case"carousel":return e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"relative bg-gray-100 dark:bg-gray-700 aspect-[16/10] overflow-hidden",children:[e.jsxs("div",{className:"flex h-full",children:[e.jsx("div",{className:"flex-1 relative bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-600",children:t.length>0?e.jsxs("div",{className:"relative h-full",children:[e.jsx("img",{src:t[0].url,alt:"Carousel item 1",className:"w-full h-full object-cover"}),t.length>1&&e.jsx("div",{className:"absolute bottom-2 left-2",children:e.jsxs("div",{className:"flex space-x-1",children:[t.slice(0,5).map((l,o)=>e.jsx("div",{className:`w-2 h-2 rounded-full ${o===0?"bg-white":"bg-white/50"}`},o)),t.length>5&&e.jsxs("div",{className:"text-white text-xs ml-1",children:["+",t.length-5]})]})})]}):e.jsx("div",{className:"h-full flex items-center justify-center text-gray-500",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-lg mx-auto mb-2 flex items-center justify-center",children:"📷"}),e.jsx("div",{className:"text-xs",children:"Card 1"})]})})}),e.jsx("div",{className:"w-16 bg-gray-200 dark:bg-gray-600 flex items-center justify-center",children:t.length>1?e.jsx("img",{src:t[1].url,alt:"Carousel item 2",className:"w-full h-full object-cover"}):e.jsxs("div",{className:"text-center text-gray-500 dark:text-gray-400",children:[e.jsx("div",{className:"w-8 h-8 bg-gray-300 dark:bg-gray-500 rounded mx-auto mb-1 flex items-center justify-center text-xs",children:"📷"}),e.jsx("div",{className:"text-[10px]",children:"Card 2"})]})})]}),e.jsx("div",{className:"absolute top-1/2 right-1 transform -translate-y-1/2",children:e.jsx(se,{className:"w-6 h-6 text-white bg-black/50 rounded-full p-1"})}),null]}),e.jsx(U,{files:t,selectedAssets:n,onRemoveFile:A,onRemoveAsset:N,onMoveFile:C,onMoveAsset:k,onAddFiles:()=>T(!0),onSelectFromLibrary:j,canAddMore:t.length+n.length<10,maxFiles:10,title:"Carousel Images",className:"mt-3",onGenerateField:m,isGeneratingField:a})]});case"collection":return e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"relative bg-white dark:bg-gray-800 aspect-video",children:[e.jsxs("div",{className:"grid grid-cols-2 h-full gap-1 p-2",children:[e.jsx("div",{className:"row-span-2 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center",children:t.length>0?e.jsx("img",{src:t[0].url,alt:"Featured product",className:"w-full h-full object-cover rounded"}):e.jsxs("div",{className:"text-center text-gray-500",children:[e.jsx("div",{className:"w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-lg mx-auto mb-2 flex items-center justify-center",children:"🛍️"}),e.jsx("div",{className:"text-xs",children:"Featured"})]})}),e.jsx("div",{className:"bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center",children:t.length>1?e.jsx("img",{src:t[1].url,alt:"Item 2",className:"w-full h-full object-cover rounded"}):e.jsxs("div",{className:"text-center text-gray-500 text-xs",children:[e.jsx("div",{className:"w-8 h-8 bg-gray-300 dark:bg-gray-600 rounded mx-auto mb-1 flex items-center justify-center",children:"🛍️"}),e.jsx("div",{children:"Item 2"})]})}),e.jsx("div",{className:"bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center",children:t.length>2?e.jsx("img",{src:t[2].url,alt:"Item 3",className:"w-full h-full object-cover rounded"}):e.jsxs("div",{className:"text-center text-gray-500 text-xs",children:[e.jsx("div",{className:"w-8 h-8 bg-gray-300 dark:bg-gray-600 rounded mx-auto mb-1 flex items-center justify-center",children:"🛍️"}),e.jsx("div",{children:"Item 3"})]})})]}),e.jsx("div",{className:"absolute top-2 left-2",children:e.jsxs(w,{variant:"secondary",className:"text-xs bg-blue-600 text-white",children:[e.jsx(oe,{className:"w-3 h-3 mr-1"}),"Collection"]})}),null]}),e.jsx(U,{files:t,selectedAssets:n,onRemoveFile:A,onRemoveAsset:N,onMoveFile:C,onMoveAsset:k,onAddFiles:()=>T(!0),onSelectFromLibrary:j,canAddMore:t.length+n.length<4,maxFiles:4,title:"Collection Products",className:"mt-3",onGenerateField:m,isGeneratingField:a})]});default:return e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"relative bg-gray-100 dark:bg-gray-700 aspect-video flex items-center justify-center",children:[t.length>0?e.jsx("img",{src:t[0].url,alt:"Ad creative",className:"w-full h-full object-cover"}):n.length>0?e.jsx("img",{src:n[0].fileUrl,alt:"Ad creative",className:"w-full h-full object-cover"}):e.jsxs("div",{className:"text-center text-gray-500",children:[e.jsx("div",{className:"w-16 h-16 bg-gray-300 dark:bg-gray-600 rounded-lg mx-auto mb-2 flex items-center justify-center",children:"📷"}),e.jsx("div",{className:"text-sm",children:"Ad Creative"})]}),null]}),e.jsx(U,{files:t,selectedAssets:n,onRemoveFile:A,onRemoveAsset:N,onMoveFile:C,onMoveAsset:k,onAddFiles:()=>T(!0),onSelectFromLibrary:j,canAddMore:t.length+n.length<1,maxFiles:1,title:"Ad Creative",className:"mt-3",onGenerateField:m,isGeneratingField:a})]})}};return e.jsxs("div",{className:"max-w-md mx-auto bg-white dark:bg-gray-800 border rounded-lg overflow-hidden shadow-sm",children:[e.jsxs("div",{className:"flex items-center gap-3 p-3 border-b",children:[e.jsx("div",{className:"w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-medium",children:((q=x==null?void 0:x.companyName)==null?void 0:q.charAt(0))||"B"}),e.jsxs("div",{className:"flex-1",children:[e.jsx("div",{className:"font-semibold text-sm text-gray-900 dark:text-gray-100",children:(x==null?void 0:x.companyName)||"Your Business"}),e.jsx("div",{className:"text-xs text-gray-500 flex items-center gap-1",children:"Sponsored • 🌍"})]}),e.jsx(re,{className:"w-5 h-5 text-gray-500"})]}),e.jsxs("div",{className:"p-3",children:[e.jsxs("div",{className:"relative",children:[e.jsx(S,{...d("platformContent.primaryText"),placeholder:"What's the main message of your ad?",className:"min-h-[80px] border-0 p-0 pr-12 resize-none text-sm leading-relaxed focus:ring-0 focus:outline-none",style:{fontSize:"14px",lineHeight:"1.4"},rows:4}

1),m&&e.jsx(M,{type:"button",variant:"ghost",size:"sm",className:"absolute top-0 right-0 h-8 w-10 px-1 text-xs bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded",onClick:()=>m("primaryText"),disabled:a==null?void 0:a("primaryText"),children:a!=null&&a("primaryText")?e.jsx(I,{className:"h-3 w-3 animate-spin"}):"AI"})]}),g&&e.jsxs("div",{className:"mt-2 text-sm leading-relaxed text-gray-900 dark:text-gray-100",children:[y||g.length<=125?g:`${g.slice(0,125)}...`,g.length>125&&e.jsx("button",{type:"button",onClick:()=>P(!y),className:"ml-1 text-blue-600 hover:text-blue-700 text-sm font-medium",children:y?"See less":"See more"})]}),e.jsxs("div",{className:"flex justify-between items-center mt-1",children:[e.jsx("div",{className:"text-xs text-gray-500",children:"Primary text (no Facebook limit)"}),e.jsxs(w,{variant:"outline",className:"text-xs",children:[g.length," chars"]})]})]}),Q(),e.jsxs("div",{className:"p-3 border-b bg-gray-50 dark:bg-gray-900",children:[e.jsxs("div",{className:"space-y-2 max-w-full overflow-hidden",children:[e.jsxs("div",{className:"relative w-full max-w-full",children:[e.jsx(S,{...d("platformContent.headline"),placeholder:"Compelling headline for your ad",className:"border-0 p-0 pr-12 resize-none font-semibold text-base bg-transparent focus:ring-0 focus:outline-none min-h-0 leading-tight w-full break-words",maxLength:40,rows:1,style:{wordWrap:"break-word",overflowWrap:"break-word",wordBreak:"break-word",lineHeight:"1.25",minHeight:"auto",height:"auto",maxWidth:"100%"},onInput:s=>{const l=s.target;l.style.height="auto",l.style.height=l.scrollHeight+"px"}}),m&&e.jsx(M,{type:"button",variant:"ghost",size:"sm",className:"absolute top-0 right-0 h-6 w-10 px-1 text-xs bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded",onClick:()=>m("headline"),disabled:a==null?void 0:a("headline"),children:a!=null&&a("headline")?e.jsx(I,{className:"h-3 w-3 animate-spin"}):"AI"}),e.jsxs("div",{className:"flex justify-between items-center mt-1",children:[e.jsx("div",{className:"text-xs text-gray-500",children:"Headline"}),e.jsxs(w,{variant:"outline",className:"text-xs",children:[E.length,"/40"]})]})]}),e.jsxs("div",{className:"relative",children:[e.jsx(S,{...d("platformContent.description"),placeholder:"Tell people more about what you're promoting",className:"border-0 p-0 pr-12 resize-none text-sm bg-transparent focus:ring-0 focus:outline-none break-words",rows:2,maxLength:90,style:{wordWrap:"break-word",overflowWrap:"break-word"}}),m&&e.jsx(M,{type:"button",variant:"ghost",size:"sm",className:"absolute top-0 right-0 h-6 w-10 px-1 text-xs bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded",onClick:()=>m("description"),disabled:a==null?void 0:a("description"),children:a!=null&&a("description")?e.jsx(I,{className:"h-3 w-3 animate-spin"}):"AI"}),e.jsxs("div",{className:"flex justify-between items-center mt-1",children:[e.jsx("div",{className:"text-xs text-gray-500",children:"Description"}),e.jsxs(w,{variant:"outline",className:"text-xs",children:[D.length,"/90"]})]})]}),e.jsxs("div",{className:"relative",children:[e.jsx(K,{...d("destinationUrl"),placeholder:"https://your-website.com/landing-page",className:"border border-gray-200 dark:border-gray-600 text-xs text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 rounded px-2 py-1"}),e.jsxs("div",{className:"flex justify-between items-center mt-1",children:[e.jsx("div",{className:"text-xs text-gray-500",children:"Landing Page URL"}),e.jsx("div",{className:"text-xs text-gray-600",children:$?"✓ Set":"Optional"})]})]})]}),e.jsxs("div",{className:"mt-3 space-y-2",children:[e.jsx("div",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:"Call-to-Action Button"}),e.jsxs(X,{value:p,onValueChange:s=>{r("platformContent.callToActionType",s),r("platformContent.callToAction",v[s])},children:[e.jsx(Z,{className:"w-full",children:e.jsx(V,{placeholder:"Select CTA button"})}),e.jsx(F,{children:B.map(s=>e.jsx(G,{value:s.value,children:s.label},s.value))})]}),e.jsx("div",{className:"w-full bg-blue-600 text-white text-center border-blue-600 hover:bg-blue-700 font-medium h-9 rounded flex items-center justify-center cursor-pointer",children:v[p]||H}),e.jsxs("div",{className:"text-xs text-gray-500",children:['Available options based on "',h,'" objective • ',B.length," buttons available"]})]})]}),e.jsx("div",{className:"p-3",children:e.jsx("div",{className:"flex items-center justify-between text-gray-500",children:e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs("div",{className:"flex items-center gap-1 text-sm",children:[e.jsx(ee,{className:"w-4 h-4"}),"Like"]}),e.jsxs("div",{className:"flex items-center gap-1 text-sm",children:[e.jsx(te,{className:"w-4 h-4"}),"Comment"]}),e.jsxs("div",{className:"flex items-center gap-1 text-sm",children:[e.jsx(le,{className:"w-4 h-4"}),"Share"]})]})})})]})}export{_e as FacebookAdMockup};