https://mostreams-com.lovable.app/assets/demo-v8fp_in9.js

1import{u as Z,aa as G,r as s,z as X,y as A,j as e,Y as _,Z as ee,$ as te,p as se,H as ae,i as re,R as oe,m as ie,D as ne,a as le,b as M,e as T,f as B,ab as ce,B as j,v as L,t as de,ac as me}from"./index-BNrdOJig.js";import{P as ue}from"./PageShell-CWbrZUQJ.js";import{I as g}from"./input-CwAqzCK4.js";import{L as d}from"./label-5jAbssum.js";import{S as he,a as xe,b as pe,c as fe,d as ge}from"./select-F0D4_o6M.js";import{r as je,c as be}from"./demo.functions-Bst3WQXa.js";import{M as ye}from"./mic-vocal-1o-CIBe1.js";import{M as ve}from"./music-4-XSQW5tQl.js";import{R as Ne}from"./rotate-ccw-QMW-PIuT.js";import"./SiteNav-BcGgqsav.js";import"./dropdown-menu-KsqIXfPg.js";import"./index-Dc9JXvma.js";import"./index-xFoOlCOp.js";import"./index-BgFHfwbL.js";import"./chevron-down-Bsk54EUt.js";import"./globe-BA4Wl8PS.js";import"./SiteFooter-dnnZxriw.js";import"./mail-Dg76bAst.js";import"./YouTubeBackground-CCoqfn6u.js";import"./FanFreeBanner-Bn5Nkcw_.js";import"./gift-zW-OXeDx.js";import"./index-BdQq_4o_.js";import"./index-CknWoRzV.js";import"./chevron-up-CzmrE-s_.js";const U=[{key:"fan",label:"Fan",Icon:ae,accent:"from-fuchsia-500/30 to-amber-400/20",blurb:"Follow your artists. Build your library."},{key:"artist",label:"Artist",Icon:ye,accent:"from-orange-500/30 to-red-500/20",blurb:"Studio HQ — releases, events, analytics."},{key:"label",label:"Label",Icon:re,accent:"from-blue-500/30 to-indigo-500/20",blurb:"Run your roster. Watch the pipeline."},{key:"dj",label:"DJ",Icon:oe,accent:"from-teal-400/30 to-cyan-400/20",blurb:"Turntables, crates, live sets."},{key:"producer",label:"Producer",Icon:ve,accent:"from-violet-500/30 to-purple-500/20",blurb:"Upload beats. Sell them in the room."},{key:"podcaster",label:"Podcaster",Icon:ie,accent:"from-amber-500/30 to-stone-400/20",blurb:"Episodes, guests, audience."}];function Ke(){const m=Z({select:t=>t.location.pathname}),b=G({from:"/demo"}),I=["fan","artist","label","dj","producer","podcaster"],c=b.role&&I.includes(b.role)?b.role:null,[o,n]=s.useState(c),[u,y]=s.useState(""),[v,R]=s.useState(""),[h,D]=s.useState(""),[N,i]=s.useState(""),[r,x]=s.useState(""),[l,p]=s.useState(""),[S,f]=s.useState("form"),[E,k]=s.useState(null),[C,O]=s.useState(""),[w,F]=s.useState(!1),[Ce,P]=s.useState(null),H=X(),W=A(je),V=A(be);if(m!=="/demo")return e.jsxs(e.Fragment,{children:[e.jsx(_,{}),e.jsx(ee,{resetKey:m,children:e.jsx(te,{})})]});const z=t=>{if(t.preventDefault(),!u.trim()||!v.trim()||!h.includes("@")||!N||!r.trim()||!l.trim()){L.error("Please fill out every field.");return}f("face")},$=async t=>{F(!0);try{const a=await W({data:{firstName:u.trim(),lastName:v.trim(),email:h.trim(),role:o,country:N,state:r.trim(),city:l.trim(),faceImage:t}});k(a.code),f("code")}catch(a){L.error(a?.message??"Couldn't generate a code. Try again.")}finally{F(!1)}},J=async t=>{if(t.preventDefault(),!!C.trim()){F(!0);try{const a=await V({data:{code:C.trim()}}),q={sessionId:a.sessionId,firstName:a.firstName,lastName:a.lastName,email:a.email,role:a.role,expiresAt:a.expiresAt};try{localStorage.setItem("mostreams.demoSession",JSON.stringify(q))}catch{}H({to:"/demo/$role",params:{role:a.role}})}catch(a){L.error(a?.message??"Invalid or expired code.")}finally{F(!1)}}},Q=()=>{n(null),f("form"),k(null),O(""),P(null)};return e.jsxs(ue,{eyebrow:"Live Demo",title:"See MO STREAMS",highlight:"live, before you sign up",intro:"Step inside each dashboard with simulated, real-time activity — chat rooms, live sets, marketplace, podcasts. Pick a role to try it out.",children:[e.jsx("section",{className:"pt-4 pb-20",children:e.jsxs("div",{className:"max-w-4xl mx-auto px-6",children:[e.jsxs("div",{className:"rounded-2xl border border-primary/30 bg-primary/5 p-4 mb-8 flex items-start gap-3 text-sm",children:[e.jsx(se,{className:"w-5 h-5 text-primary shrink-0 mt-0.5"}),e.jsxs("p",{className:"text-muted-foreground",children:[e.jsx("span",{className:"text-foreground font-semibold",children:"Demo mode"})," gives you a one-time access code that's good for ",e.jsx("span",{className:"text-foreground font-semibold",children:"7 minutes"}),". After that you'll be signed out automatically and the code cannot be reused."]})]}),e.jsx("div",{className:"grid sm:grid-cols-2 lg:grid-cols-3 gap-4",children:U.map(({key:t,label:a,Icon:q,accent:Y,blurb:K})=>e.jsxs("button",{onClick:()=>n(t),className:`group relative text-left rounded-3xl border border-border bg-gradient-to-br ${Y} p-6 hover:border-primary/60 transition-colors flex flex-col`,children:[e.jsx(q,{className:"w-8 h-8 text-primary mb-4"}),e.jsx("div",{className:"font-display text-2xl font-black tracking-tight",children:a}),e.jsx("div",{className:"text-sm text-muted-foreground mt-1",children:K}),e.jsx("div",{className:"mt-6 text-[11px] font-bold uppercase tracking-wider text-primary",children:"Enter demo →"})]},t))}),e.jsxs("p",{className:"text-center text-xs text-muted-foreground mt-8",children:["Ready for a real account?"," ",e.jsx("a",{href:"/signup",className:"text-primary hover:underline font-semibold",children:"Sign up"})]})]})}),e.jsx(ne,{open:!!o,onOpenChange:t=>!t&&Q(),children:e.jsx(le,{children:S==="form"?e.jsxs(e.Fragment,{children:[e.jsxs(M,{children:[e.jsxs(T,{children:["Enter the ",U.find(t=>t.key===o)?.label," demo"]}),e.jsx(B,{children:"We'll snap a quick photo for the record, then generate a one-time access code that's valid for 7 minutes."})]}),e.jsxs("form",{onSubmit:z,className:"space-y-4",children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("div",{children:[e.jsx(d,{htmlFor:"fn",children:"First name"}),e.jsx(g,{id:"fn",value:u,onChange:t=>y(t.target.value),required:!0})]}),e.jsxs("div",{children:[e.jsx(d,{htmlFor:"ln",children:"Last name"}

1),e.jsx(g,{id:"ln",value:v,onChange:t=>R(t.target.value),required:!0})]})]}),e.jsxs("div",{children:[e.jsx(d,{htmlFor:"em",children:"Email"}),e.jsx(g,{id:"em",type:"email",value:h,onChange:t=>D(t.target.value),required:!0})]}),e.jsxs("div",{children:[e.jsx(d,{htmlFor:"country",children:"Country"}),e.jsxs(he,{value:N,onValueChange:i,children:[e.jsx(xe,{id:"country",children:e.jsx(pe,{placeholder:"Select your country"})}),e.jsx(fe,{className:"max-h-72",children:ce().map(t=>e.jsx(ge,{value:t.name,children:t.name},t.code))})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("div",{children:[e.jsx(d,{htmlFor:"state",children:"State / Region"}),e.jsx(g,{id:"state",value:r,onChange:t=>x(t.target.value),required:!0})]}),e.jsxs("div",{children:[e.jsx(d,{htmlFor:"city",children:"City"}),e.jsx(g,{id:"city",value:l,onChange:t=>p(t.target.value),required:!0})]})]}),e.jsx(j,{type:"submit",className:"w-full",disabled:w,children:"Continue to face scan →"})]})]}):S==="face"?e.jsx(Se,{busy:w,onCancel:()=>f("form"),onCaptured:t=>{P(t),$(t)}}):e.jsxs(e.Fragment,{children:[e.jsxs(M,{children:[e.jsx(T,{children:"Your one-time access code"}),e.jsx(B,{children:"Enter this code below to start your demo. It expires in 7 minutes and can only be used once."})]}),e.jsxs("div",{className:"rounded-xl border border-primary/40 bg-primary/10 px-6 py-5 text-center",children:[e.jsx("div",{className:"text-xs uppercase tracking-widest text-muted-foreground mb-2",children:"Access code"}),e.jsx("div",{className:"font-mono text-3xl font-black tracking-[0.4em] text-primary",children:E})]}),e.jsxs("form",{onSubmit:J,className:"space-y-3",children:[e.jsx(d,{htmlFor:"cd",children:"Enter code"}),e.jsx(g,{id:"cd",value:C,onChange:t=>O(t.target.value.toUpperCase()),maxLength:8,className:"font-mono tracking-[0.3em] text-center text-lg",autoFocus:!0,required:!0}),e.jsx(j,{type:"submit",className:"w-full",disabled:w,children:w?"Verifying…":"Start 7-minute demo →"}),e.jsx("p",{className:"text-[11px] text-muted-foreground text-center",children:"After 7 minutes you'll be signed out automatically. This code cannot be reused."})]})]})})})]})}function Se({busy:m,onCaptured:b,onCancel:I}){const c=s.useRef(null),o=s.useRef(null),[n,u]=s.useState(null),[y,v]=s.useState(null),[R,h]=s.useState(!1);s.useEffect(()=>{let i=!1;return(async()=>{try{const r=await navigator.mediaDevices.getUserMedia({video:{facingMode:"user",width:{ideal:640},height:{ideal:640}},audio:!1});if(i){r.getTracks().forEach(x=>x.stop());return}o.current=r,c.current&&(c.current.srcObject=r,await c.current.play().catch(()=>{}),h(!0))}catch(r){v(r?.message??"Couldn't access the camera. Please allow camera permission.")}})(),()=>{i=!0,o.current?.getTracks().forEach(r=>r.stop()),o.current=null}},[n]);const D=()=>{const i=c.current;if(!i)return;const r=i.videoWidth||480,x=i.videoHeight||480,l=Math.min(r,x),p=document.createElement("canvas");p.width=480,p.height=480;const S=p.getContext("2d");if(!S)return;const f=(r-l)/2,E=(x-l)/2;S.drawImage(i,f,E,l,l,0,0,480,480);const k=p.toDataURL("image/jpeg",.85);u(k),o.current?.getTracks().forEach(C=>C.stop()),o.current=null},N=()=>{u(null),h(!1)};return e.jsxs(e.Fragment,{children:[e.jsxs(M,{children:[e.jsx(T,{children:"Quick face scan"}),e.jsx(B,{children:"Snap a quick photo so we can keep a verified record of your demo session. Look straight at the camera and tap capture."})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx("div",{className:"relative mx-auto aspect-square w-full max-w-xs overflow-hidden rounded-2xl border-2 border-primary/40 bg-black",children:n?e.jsx("img",{src:de(n,960),alt:"Captured face",className:"w-full h-full object-cover",loading:"lazy",decoding:"async"}):e.jsxs(e.Fragment,{children:[e.jsx("video",{ref:c,playsInline:!0,muted:!0,className:"w-full h-full object-cover -scale-x-100"}),e.jsx("div",{className:"pointer-events-none absolute inset-6 rounded-full border-2 border-dashed border-primary/60"})]})}),y&&e.jsx("p",{className:"text-sm text-destructive text-center",children:y}),n?e.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[e.jsxs(j,{type:"button",variant:"outline",onClick:N,disabled:m,children:[e.jsx(Ne,{className:"w-4 h-4 mr-2"})," Retake"]}),e.jsx(j,{type:"button",onClick:()=>b(n),disabled:m,children:m?"Submitting…":"Use this photo →"})]}):e.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[e.jsx(j,{type:"button",variant:"outline",onClick:I,children:"Back"}),e.jsxs(j,{type:"button",onClick:D,disabled:!R||!!y,children:[e.jsx(me,{className:"w-4 h-4 mr-2"})," Capture"]})]})]})]})}export{Ke as component};