https://duckdash.lovable.app/assets/CustomerJourneyMap-B52SIscE.js

1import{c as _,k as U,r as x,s as P,u as D,j as e,g as Y,R as T,L as A,A as K,e as V,b as X,d as z,X as W}from"./index-9RpNC89m.js";import{h as Q,E as Z}from"./jspdf.es.min-DvhJG9bP.js";import{M as ee,a as te}from"./minimize-2-DLo3Ff6I.js";import{C as se}from"./clock-DR4hKIT7.js";import{S as ne}from"./save-Iz8TWZJb.js";import{D as re}from"./download-BLe8anRJ.js";import{M as ae,H as oe,L as ie}from"./mouse-pointer-click-D9-TFNb0.js";import{T as le}from"./triangle-alert-vTWEa-nu.js";import{C as E}from"./chevron-up-n_0jSiul.js";import{G as ce}from"./grip-vertical-BNv9C1jW.js";import{P as de}from"./plus-GQazyifS.js";/**
2 * @license lucide-react v0.462.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const xe=_("Monitor",[["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",key:"48i651"}],["line",{x1:"8",x2:"16",y1:"21",y2:"21",key:"1svkeh"}],["line",{x1:"12",x2:"12",y1:"17",y2:"21",key:"vw1qmm"}]]);/**
7 * @license lucide-react v0.462.0 - ISC
8 *
9 * This source code is licensed under the ISC license.
10 * See the LICENSE file in the root directory of this source tree.
11 */const me=_("Share2",[["circle",{cx:"18",cy:"5",r:"3",key:"gq8acd"}],["circle",{cx:"6",cy:"12",r:"3",key:"w7nqdw"}],["circle",{cx:"18",cy:"19",r:"3",key:"1xt0gg"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49",key:"47mynk"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49",key:"1n3mei"}]]),g=[{key:"awareness",label:"Awareness",labelAr:"الوعي",color:"bg-blue-400",colorHex:"#60a5fa",lightBg:"bg-blue-50/50"},{key:"consideration",label:"Consideration",labelAr:"التقييم",color:"bg-indigo-400",colorHex:"#818cf8",lightBg:"bg-indigo-50/50"},{key:"decision",label:"Decision",labelAr:"القرار",color:"bg-purple-400",colorHex:"#c084fc",lightBg:"bg-purple-50/50"},{key:"onboarding",label:"Onboarding",labelAr:"البداية",color:"bg-emerald-400",colorHex:"#34d399",lightBg:"bg-emerald-50/50"},{key:"retention",label:"Retention",labelAr:"الاحتفاظ",color:"bg-amber-400",colorHex:"#fbbf24",lightBg:"bg-amber-50/50"},{key:"advocacy",label:"Advocacy",labelAr:"الترويج",color:"bg-rose-400",colorHex:"#fb7185",lightBg:"bg-rose-50/50"}],S=[{key:"touchpoints",label:"Touchpoints",labelAr:"نقاط التماس",

11icon:ae,prompt:"What specific interactions happen at this phase?",examples:{awareness:["Google search","LinkedIn ad","Friend referral","Blog article"],consideration:["Pricing page visit","Free trial signup","Demo call","Case study download"],decision:["Proposal review","Contract signing","Payment page"],onboarding:["Welcome email","Setup wizard","First dashboard view"],retention:["Weekly usage","Support ticket","Feature update email"],advocacy:["NPS survey","Referral link share","Testimonial request"]}},{key:"channels",label:"Channels",labelAr:"القنوات",icon:me,prompt:"What platforms and channels are involved?",examples:{awareness:["Google","LinkedIn","TikTok","Instagram","Podcast"],consideration:["Website","Email","YouTube","Webinar"],decision:["Sales call","WhatsApp","Zoom","Website checkout"],onboarding:["Email","In-app","Loom video"],retention:["Email","In-app notifications","Community (Slack/Discord)"],advocacy:["Social media","Review sites","Word of mouth"]}},{key:"emotions",label:"Customer Emotions",labelAr:"مشاعر العميل",icon:oe,prompt:"How does the customer feel at this stage? Use emoji + text.",examples:{awareness:["😐 Curious but skeptical","🤔 Problem-aware"],consideration:["😊 Excited about possibilities","😰 Overwhelmed by options"],decision:["😬 Anxious about spending","🤞 Hopeful"],onboarding:["🎉 Excited","😵 Confused by setup"],retention:["😊 Satisfied","😤 Frustrated by bug"],advocacy:["🥰 Loyal","😎 Proud to recommend"]}},{key:"painpoints",label:"Pain Points",labelAr:"نقاط الألم",icon:le,prompt:"What friction or problems exist at this stage?",examples:{awareness:["Can't find us on Google","Ad messaging unclear"],consideration:["Pricing not transparent","No case studies for their industry"],decision:["Long sales cycle","Contract too complex"],onboarding:["Setup takes too long","No guidance"],retention:["Feature requests ignored","Slow support"],advocacy:["No referral incentive","No easy way to share"]}},{key:"opportunities",label:"Opportunities",labelAr:"الفرص",icon:ie,prompt:"What can we improve or create at this stage?",examples:{awareness:["Launch SEO blog","Start YouTube channel"],consideration:["Add interactive demo","Create comparison page"],decision:["Simplify checkout","Add live chat"],onboarding:["Build guided wizard","Send day-1 tutorial email"],retention:["Monthly check-in calls","Loyalty program"],advocacy:["Referral rewards","Customer spotlight series"]}}];function j(s,i){return`${s}_${i}`}const G=g.flatMap(s=>S.map(i=>j(s.key,i.key))),R=Object.fromEntries(G.map(s=>[s,[]]));function O(){return Math.random().toString(36).slice(2,9)}const pe=({phase:s,layer:i,items:m,onClose:u})=>{const[p,l]=x.useState(m.length>0?m:[]),r=x.useRef(null),d=i.examples[s.key]||[];x.useEffect(()=>{const n=c=>{c.key==="Escape"&&h()};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[p]),x.useEffect(()=>{var n;r.current&&((n=document.getElementById(`cjm-input-${r.current}`))==null||n.focus(),r.current=null)},[p.length]);const h=()=>u(p.filter(n=>n.text.trim().length>0)),f=()=>{const n={id:O(),text:""};r.current=n.id,l(c=>[...c,n])},k=n=>{p.some(c=>c.text===n)||l(c=>[...c,{id:O(),text:n}])},v=(n,c)=>{l(b=>b.map(w=>w.id===n?{...w,text:c}:w))},C=n=>{l(c=>c.filter(b=>b.id!==n))},N=i.icon;return e.jsx("div",{className:"fixed inset-0 z-50 bg-stone-900/30 backdrop-blur-sm flex justify-center",onClick:h,children:e.jsxs("div",{className:"bg-white rounded-2xl shadow-2xl border border-stone-200 w-full max-w-md mx-auto mt-[12vh] h-fit max-h-[75vh] flex flex-col overflow-hidden animate-fade-in",onClick:n=>n.stopPropagation(),children:[e.jsxs("div",{className:`flex items-center justify-between px-4 py-3 border-b border-stone-100 ${s.lightBg}`,children:[e.jsxs("div",{className:"flex items-center gap-2 min-w-0",children:[e.jsx("span",{className:`w-2.5 h-2.5 rounded-full flex-shrink-0 ${s.color}`}),e.jsxs("div",{className:"min-w-0",children:[e.jsxs("p",{className:"text-sm font-bold text-stone-800 truncate",children:[s.label," → ",i.label]}),e.jsxs("p",{className:"font-arabic text-[10px] text-stone-400 truncate",dir:"rtl",children:[s.labelAr," → ",i.labelAr]})]})]}),e.jsx("button",{onClick:h,className:"p-1 rounded-lg hover:bg-stone-200/50 text-stone-400 hover:text-stone-600 transition-colors flex-shrink-0",children:e.jsx(W,{size:16})})]}),e.jsx("div",{className:"px-4 py-2.5 bg-stone-50 border-b border-stone-100",children:e.jsxs("div",{className:"flex items-center gap-1.5 mb-1",children:[e.jsx(N,{size:12,className:"text-stone-400"}),e.jsx("p",{className:"text-[11px] text-stone-500 leading-relaxed",children:i.prompt})]})}),e.jsxs("div",{className:"flex-1 overflow-y-auto min-h-0",children:[p.map(n=>e.jsxs("div",{className:"flex items-center border-b border-stone-100 group/item",children:[e.jsx(ce,{size:12,className:"text-stone-200 ml-3 flex-shrink-0"}),e.jsx("input",{id:`cjm-input-${n.id}`,value:n.text,onChange:c=>v(n.id,c.target.value),onKeyDown:c=>{c.key==="Enter"&&f()},placeholder:"Type here...",className:"flex-1 px-3 py-2.5 text-xs text-stone-800 bg-transparent outline-none placeholder:text-stone-300"}),e.jsx("button",{onClick:()=>C(n.id),className:"opacity-0 group-hover/item:opacity-100 p-2 text-stone-300 hover:text-red-400 transition-all flex-shrink-0",children:e.jsx(W,{size:12})})]},n.id)),e.jsxs("button",{onClick:f,className:"w-full py-2.5 text-center text-xs font-medium text-primary hover:bg-emerald-50 border-t border-stone-100 transition-colors flex items-center justify-center gap-1",children:[e.jsx(de,{size:12})," Add another"]})]}),e.jsxs("div",{className:"px-4 py-2.5 border-t border-stone-200 bg-stone-50 flex items-center justify-between gap-2",children:[e.jsxs("span",{className:"text-[10px] text-stone-400 font-medium",children:[p.filter(n=>n.text.trim()).length," item",p.filter(n=>n.text.trim()).length!==1?"s":""]}),e.jsx("div",{className:"flex items-center gap-1 flex-wrap justify-end",children:d.slice(0,3).map((n,c)=>e.jsx("button",{onClick:()=>k(n),className:"text-[9px] text-stone-400 bg-stone-100 hover:bg-stone-200 px-2 py-0.5 rounded-full transition-colors truncate max-w-[140px]",title:n,children:n},c))})]})]})})},F=3,he=({phase:s,layer:i,items:m,onChange:u})=>{const[p,l]=x.useState(!1),r=j(s.key,i.key);return e.jsxs(e.Fragment,{children:[e.jsx("div",{onClick:()=>l(!0),className:`flex flex-col border border-stone-200 rounded-lg cursor-pointer transition-all duration-150 hover:shadow-md hover:border-stone-300 ${s.lightBg} bg-white min-h-[90px]`,children:e.jsx("div",{className:"flex-1 px-2.5 py-2 overflow-hidden",children:m.length===0?e.jsx("p",{className:"text-[9px] text-stone-300 italic",children:"Click to add..."}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"flex items-center gap-1 mb-1",children:e.jsx("span",{className:`text-[8px] font-bold px-1.5 py-0.5 rounded-full ${s.color} text-white`,children:m.length})}),e.jsxs("ul",{className:"space-y-0.5",children:[m.slice(0,F).map(d=>e.jsxs("li",{className:"text-[9px] text-stone-600 truncate leading-snug",children:["• ",d.text]},d.id)),m.length>F&&e.jsxs("li",{className:"text-[9px] text-stone-400",children:["+",m.length-F," more"]})]})]})})}),p&&e.jsx(pe,{phase:s,layer:i,items:m,onClose:d=>{l(!1),u(r,d)}})]})},ue=()=>{const[s,i]=x.useState(!1),[m,u]=x.useState(!1),[p,l]=x.useState(!1);return e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"bg-white border border-stone-200 rounded-xl p-4 shadow-card",children:[e.jsx("p",{className:"text-xs font-bold text-stone-500 uppercase tracking-widest mb-2",children:"What is this?"}),e.jsx("p",{className:"text-xs text-stone-700 leading-relaxed",children:"A Customer Journey Map visualizes every phase your customer goes through — from first discovering you to becoming an advocate. It helps you identify touchpoints, emotions, pain points, and opportunities at each stage."}),e.jsx("p",{className:"font-arabic text-[10px] text-stone-400 mt-2 leading-relaxed",dir:"rtl",children:"خريطة رحلة العميل تصوّر كل مرحلة يمر بها العميل — من أول اكتشاف لك إلى أن يصبح مروّجاً."})]}),e.jsxs("div",{className:"bg-emerald-50 border border-emerald-100 rounded-xl p-4",children:[e.jsx("p",{className:"text-xs font-bold text-primary mb-1.5",children:"✦ Start Here"}),e.jsx("ol",{className:"space-y-1",children:["Start with Awareness touchpoints","Work right through each phase","Fill touchpoints first, then channels","Then emotions — how do they feel?","Identify pain points and opportunities"].map((r,d)=>e.jsxs("li",{className:"flex items-start gap-1.5 text-[11px] text-stone-600",children:[e.jsxs("span",{className:"font-mono text-stone-300 flex-shrink-0",children:[d+1,"."]}

11),r]},d))})]}),e.jsxs("div",{className:"bg-white border border-stone-200 rounded-xl overflow-hidden shadow-card",children:[e.jsxs("button",{onClick:()=>i(r=>!r),className:"w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-stone-500 uppercase tracking-widest",children:[e.jsx("span",{children:"Example: B2B SaaS Journey"}),s?e.jsx(E,{size:13}):e.jsx(z,{size:13})]}),s&&e.jsx("div",{className:"border-t border-stone-100 px-4 pb-4 pt-3 space-y-2.5",children:[{phase:"Awareness",layer:"Touchpoints",items:["Google search for 'marketing OS'","LinkedIn sponsored post","Blog article on marketing frameworks"]},{phase:"Consideration",layer:"Emotions",items:["😊 Excited about saving time","😰 Worried about learning curve"]},{phase:"Decision",layer:"Pain Points",items:["Pricing page confusing","No live chat support"]},{phase:"Retention",layer:"Opportunities",items:["Monthly check-in emails","Feature request portal","Loyalty discount"]}].map((r,d)=>e.jsxs("div",{className:"bg-stone-50 rounded-lg p-2.5",children:[e.jsxs("p",{className:"text-[9px] font-semibold text-stone-500 uppercase mb-1",children:[r.phase," → ",r.layer]}),e.jsx("ul",{className:"space-y-0.5",children:r.items.map((h,f)=>e.jsxs("li",{className:"text-[10px] text-stone-600 italic",children:["• ",h]},f))})]},d))})]}),e.jsxs("div",{className:"bg-white border border-stone-200 rounded-xl overflow-hidden shadow-card",children:[e.jsxs("button",{onClick:()=>u(r=>!r),className:"w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-stone-500 uppercase tracking-widest",children:[e.jsx("span",{children:"Phase Guide (6 phases)"}),m?e.jsx(E,{size:13}):e.jsx(z,{size:13})]}),m&&e.jsx("div",{className:"border-t border-stone-100 divide-y divide-stone-50",children:g.map(r=>e.jsx("div",{className:"px-4 py-2.5",children:e.jsxs("div",{className:"flex items-center gap-1.5 mb-0.5",children:[e.jsx("span",{className:`w-1.5 h-1.5 rounded-full ${r.color}`}),e.jsx("p",{className:"text-[10px] font-semibold text-stone-700",children:r.label}),e.jsx("p",{className:"font-arabic text-[9px] text-stone-400",dir:"rtl",children:r.labelAr})]})},r.key))})]}),e.jsxs("div",{className:"bg-white border border-stone-200 rounded-xl overflow-hidden shadow-card",children:[e.jsxs("button",{onClick:()=>l(r=>!r),className:"w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-stone-500 uppercase tracking-widest",children:[e.jsx("span",{children:"Layer Guide (5 layers)"}),p?e.jsx(E,{size:13}):e.jsx(z,{size:13})]}),p&&e.jsx("div",{className:"border-t border-stone-100 divide-y divide-stone-50",children:S.map(r=>{const d=r.icon;return e.jsxs("div",{className:"px-4 py-2.5",children:[e.jsxs("div",{className:"flex items-center gap-1.5 mb-0.5",children:[e.jsx(d,{size:11,className:"text-stone-400"}),e.jsx("p",{className:"text-[10px] font-semibold text-stone-700",children:r.label}),e.jsx("p",{className:"font-arabic text-[9px] text-stone-400",dir:"rtl",children:r.labelAr})]}),e.jsx("p",{className:"text-[10px] text-stone-500 leading-relaxed",children:r.prompt})]},r.key)})})]})]})};function ze(){const{workspace:s}=U(),[i,m]=x.useState(R),[u,p]=x.useState(""),[l,r]=x.useState("empty"),[d,h]=x.useState("idle"),[f,k]=x.useState(!1),[v,C]=x.useState(!1),N=x.useRef(null),n=x.useRef(null);x.useEffect(()=>{s!=null&&s.id&&(C(!1),(async()=>{const{data:t,error:a}=await P.from("tool_data").select("*").eq("workspace_id",s.id).eq("tool_slug","customer-journey").maybeSingle();if(a){console.error("[CustomerJourneyMap] Failed to load data:",a),D.error("Couldn't load your saved work. Check your connection and refresh — editing is disabled to protect your data.");return}if(t!=null&&t.data){const o=t.data;o.cells&&m({...R,...o.cells}),o.journeyName&&p(o.journeyName),r(t.status||"empty")}C(!0)})())},[s==null?void 0:s.id]);const c=x.useCallback(async(t,a,o)=>{if(!(s!=null&&s.id))return!1;h("saving");const y=G.filter(q=>(t[q]||[]).length>0).length,J=o==="done"?100:Math.min(Math.round(y/30*100),95),{error:L}=await P.from("tool_data").upsert([{workspace_id:s.id,tool_slug:"customer-journey",data:{cells:t,journeyName:a},status:o,progress_pct:J,updated_at:new Date().toISOString()}],{onConflict:"workspace_id,tool_slug"});return L?(console.error("[CustomerJourneyMap] Save failed:",L),h("idle"),D.error("Couldn't save your changes — check your connection and try again."),!1):(h("saved"),setTimeout(()=>h("idle"),2500),!0)},[s==null?void 0:s.id]),b=(t,a,o)=>{N.current&&clearTimeout(N.current),N.current=setTimeout(()=>c(t,a,o),1e3)},w=(t,a)=>{if(!v)return;const o={...i,[t]:a};m(o);const y=l==="done"?"done":"in_progress";l==="empty"&&r("in_progress"),b(o,u,y)},B=t=>{if(!v)return;p(t);const a=l==="done"?"done":l==="empty"&&t.trim()?"in_progress":l;a!==l&&r(a),b(i,t,a)},H=async()=>

11{if(!v)return;const t=l==="done"?"in_progress":"done";await c(i,u,t)&&r(t)},$=async()=>{if(n.current){h("saving");try{const t=await Q(n.current,{scale:2,backgroundColor:"#FAFAF9",useCORS:!0,logging:!1,width:1600,windowWidth:1600}),a=t.toDataURL("image/png",1),o=new Z({orientation:"landscape",unit:"px",format:[t.width,t.height]});o.addImage(a,"PNG",0,0,t.width,t.height),o.save(`CJM-${(u||"Journey").replace(/\s+/g,"-")}-${new Date().toISOString().slice(0,10)}.pdf`),h("saved"),setTimeout(()=>h("idle"),2500)}catch(t){console.error("PDF export failed:",t),h("idle")}}},M={empty:{label:"Not Started",color:"bg-stone-100 text-stone-400"},in_progress:{label:"In Progress",color:"bg-amber-50 text-amber-600"},done:{label:"Done ✓",color:"bg-emerald-50 text-primary"}}[l],I=e.jsxs("div",{className:"overflow-x-auto",children:[e.jsx("div",{className:"mb-4",children:e.jsx("input",{type:"text",value:u,onChange:t=>B(t.target.value),placeholder:"Name this journey (e.g., SaaS Buyer Journey)",className:"w-full max-w-lg px-4 py-2.5 text-sm font-semibold text-stone-800 bg-white border border-stone-200 rounded-xl placeholder:text-stone-300 outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/40 transition-all"})}),e.jsxs("div",{className:"inline-grid min-w-[900px]",style:{gridTemplateColumns:"140px repeat(6, 1fr)",gridTemplateRows:"auto repeat(5, 1fr)",gap:6},children:[e.jsx("div",{})," ",g.map((t,a)=>e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsxs("div",{className:`flex-1 rounded-xl px-3 py-2.5 ${t.color} text-white text-center`,children:[e.jsx("p",{className:"text-[11px] font-bold leading-tight",children:t.label}),e.jsx("p",{className:"font-arabic text-[9px] opacity-80 leading-tight mt-0.5",dir:"rtl",children:t.labelAr})]}),a<g.length-1&&e.jsx(Y,{size:14,className:"text-stone-300 flex-shrink-0 -mr-1"})]},t.key)),S.map(t=>{const a=t.icon;return e.jsxs(T.Fragment,{children:[e.jsxs("div",{className:"flex items-center gap-2 pr-2 py-1",children:[e.jsx(a,{size:14,className:"text-stone-400 flex-shrink-0"}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("p",{className:"text-[10px] font-bold text-stone-700 leading-tight truncate",children:t.label}),e.jsx("p",{className:"font-arabic text-[8px] text-stone-400 leading-tight mt-0.5 truncate",dir:"rtl",children:t.labelAr})]})]}),g.map(o=>e.jsx(he,{phase:o,layer:t,items:i[j(o.key,t.key)]||[],onChange:w},j(o.key,t.key)))]},t.key)})]})]});return f?e.jsxs("div",{className:"fixed inset-0 z-50 bg-stone-50 flex flex-col",children:[e.jsxs("div",{className:"flex items-center justify-between px-4 py-2 border-b border-stone-200 bg-white flex-shrink-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-base",children:"🗺️"}),e.jsx("span",{className:"font-bold text-stone-900 text-sm",children:"Customer Journey Map"}),e.jsx("span",{className:"font-arabic text-[9px] text-stone-400",dir:"rtl",children:"خريطة رحلة العميل"})]}),e.jsxs("button",{onClick:()=>k(!1),className:"flex items-center gap-1.5 text-xs text-stone-500 hover:text-stone-900 border border-stone-200 px-3 py-1.5 rounded-lg hover:bg-stone-50 transition-all",children:[e.jsx(ee,{size:12})," Exit Fullscreen"]})]}),e.jsx("div",{className:"flex-1 p-4 overflow-auto",children:I})]}):e.jsxs("div",{className:"min-h-full pb-8 animate-fade-in",children:[e.jsx("div",{className:"px-6 pt-5 pb-4 border-b border-stone-200 bg-white sticky top-0 z-10",children:e.jsxs("div",{className:"max-w-full mx-auto",children:[e.jsxs("nav",{className:"text-[10px] text-stone-400 mb-2 flex items-center gap-1.5 font-mono",children:[e.jsx(A,{to:"/os",className:"hover:text-stone-600 transition-colors",children:"Dashboard"}),e.jsx("span",{children:"/"}),e.jsx(A,{to:"/os/foundation",className:"hover:text-stone-600 transition-colors",children:"Foundation"}),e.jsx("span",{children:"/"}),e.jsx("span",{className:"text-stone-600",children:"Customer Journey Map"})]}),e.jsxs("div",{className:"flex items-center justify-between gap-4 flex-wrap",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(A,{to:"/os/foundation",className:"p-1.5 rounded-lg hover:bg-stone-100 text-stone-400 hover:text-stone-600 transition-colors",children:e.jsx(K,{size:15})}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"text-xl",children:"🗺️"}),e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 flex-wrap",children:[e.jsx("h1",{className:"text-lg font-bold text-stone-900",children:"Customer Journey Map"}),e.jsx("p",{className:"font-arabic text-[10px] text-stone-400",dir:"rtl",children:"خريطة رحلة العميل"}),e.jsx("span",{className:`text-[10px] font-semibold px-2 py-0.5 rounded-full ${M.color}`,children:M.label})]}),e.jsx("p",{className:"text-xs text-stone-500 mt-0.5",children:"Map every phase of your customer's experience from awareness to advocacy."})]})]})]}),e.jsxs("div",{className:"flex items-center gap-2 flex-shrink-0 flex-wrap",children:[e.jsxs("div",{className:"text-xs text-stone-400 flex items-center gap-1 min-w-[80px]",children:[d==="saving"&&e.jsxs(e.Fragment,{children:[e.jsx(se,{size:11,className:"animate-spin"})," Saving..."]}),d==="saved"&&e.jsxs(e.Fragment,{children:[e.jsx(V,{size:11,className:"text-primary"}),e.jsx("span",{className:"text-primary",children:"Saved ✓"})]}),d==="idle"&&s&&e.jsxs(e.Fragment,{children:[e.jsx(ne,{size:11})," Auto-save"]})]}),e.jsxs("button",{onClick:()=>k(!0),className:"flex items-center gap-1.5 text-xs text-stone-500 hover:text-stone-900 border border-stone-200 px-3 py-1.5 rounded-lg hover:bg-stone-50 transition-all",children:[e.jsx(te,{size:12})," Fullscreen"]}),e.jsxs("button",{onClick:$,disabled:d==="saving",className:"flex items-center gap-1.5 text-xs text-stone-500 hover:text-stone-900 border border-stone-200 px-3 py-1.5 rounded-lg hover:bg-stone-50 transition-all disabled:opacity-50",children:[e.jsx(re,{size:12})," Export PDF"]}),e.jsxs("button",{onClick:H,className:`flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg transition-all ${l==="done"?"bg-emerald-50 text-primary border border-emerald-200 hover:bg-red-50 hover:text-red-600 hover:border-red-200":"bg-stone-900 text-white hover:bg-stone-700"}`,children:[e.jsx(X,{size:12}),l==="done"?"Mark Undone":"Mark as Done"]})]})]})]})}

11),e.jsxs("div",{className:"md:hidden mx-4 mt-4 bg-amber-50 border border-amber-200 rounded-xl p-3 flex items-center gap-2",children:[e.jsx(xe,{size:16,className:"text-amber-500 flex-shrink-0"}),e.jsx("p",{className:"text-[11px] text-amber-700",children:"This canvas is best viewed on desktop for the full grid experience."})]}),e.jsxs("div",{className:"flex flex-col lg:flex-row gap-4 p-3 sm:p-4 min-h-[calc(100vh-120px)]",children:[e.jsx("div",{className:"flex-1 min-w-0 overflow-hidden",children:I}),e.jsx("div",{className:"w-64 xl:w-72 flex-shrink-0 overflow-y-auto hidden lg:block",children:e.jsxs("div",{className:"sticky top-0",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx("p",{className:"text-xs font-bold text-stone-500 uppercase tracking-widest",children:"Guide"}),e.jsx("p",{className:"font-arabic text-[9px] text-stone-400",dir:"rtl",children:"دليل"})]}),e.jsx(ue,{})]})})]}),e.jsxs("div",{ref:n,style:{position:"absolute",left:"-9999px",top:0,width:1600,padding:40,backgroundColor:"#FAFAF9",fontFamily:"system-ui, -apple-system, sans-serif"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:24},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",gap:6},children:e.jsxs("span",{style:{fontFamily:"'Quicksand', system-ui, sans-serif",fontSize:22,lineHeight:1},children:[e.jsx("span",{style:{fontWeight:700,color:"#1c1917"},children:"Duck"}),e.jsx("span",{style:{fontWeight:400,color:"#1c1917"},children:"Dash"})]})}),e.jsxs("div",{style:{textAlign:"right"},children:[e.jsxs("p",{style:{fontSize:16,fontWeight:700,color:"#1c1917",margin:0},children:["Customer Journey Map",u?` — ${u}`:""]}),e.jsxs("p",{style:{fontSize:11,color:"#78716c",margin:0},children:[(s==null?void 0:s.name)||"My Marketing OS"," · ",new Date().toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"})]})]})]}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"120px repeat(6, 1fr)",gap:6},children:[e.jsx("div",{}),g.map(t=>e.jsxs("div",{style:{backgroundColor:t.colorHex,borderRadius:8,padding:"8px 12px",textAlign:"center"},children:[e.jsx("p",{style:{fontSize:11,fontWeight:700,color:"#fff",margin:0},children:t.label}),e.jsx("p",{style:{fontSize:9,color:"rgba(255,255,255,0.8)",margin:0,direction:"rtl"},children:t.labelAr})]},t.key)),S.map(t=>e.jsxs(T.Fragment,{children:[e.jsx("div",{style:{display:"flex",alignItems:"center",paddingRight:8},children:e.jsxs("div",{children:[e.jsx("p",{style:{fontSize:10,fontWeight:700,color:"#44403c",margin:0},children:t.label}),e.jsx("p",{style:{fontSize:8,color:"#a8a29e",margin:0,direction:"rtl"},children:t.labelAr})]})}),g.map(a=>{const o=i[j(a.key,t.key)]||[];return e.jsx("div",{style:{border:"1px solid #e7e5e4",borderRadius:8,backgroundColor:"#fff",padding:8,minHeight:60},children:o.length>0?o.map(y=>e.jsxs("p",{style:{fontSize:9,color:"#44403c",margin:"1px 0",lineHeight:1.4},children:["• ",y.text]},y.id)):e.jsx("p",{style:{fontSize:9,color:"#d6d3d1",fontStyle:"italic"},children:"—"})},j(a.key,t.key))})]},t.key))]}),e.jsx("div",{style:{marginTop:24,borderTop:"1px solid #e7e5e4",paddingTop:12,textAlign:"center"},children:e.jsx("p",{style:{fontSize:10,color:"#a8a29e",margin:0},children:"Generated by DuckDash MarketingOS — tryduckdash.com"})})]})]})}export{ze as default};