e1:"ExplicitChatIdProvider" e2:I[903690,["$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67"],"$e1"] e3:I[838238,["$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67"],"SWRDataProvider"] 31:o1,~31:o434,2:"$Sreact.fragment" 3:"/chat-static/_next/static/immutable/chunks/3hgpkj-xzfw6u.js" 4:I[381307,["$3"],"default"] 5:I[934914,["$3"],"default"] 25:"ViewportBoundary" 26:I[176645,["$3"],"$25"] 28:"MetadataBoundary" 29:I[176645,["$3"],"$28"] 2a:"$Sreact.suspense" :HL["/chat-static/_next/static/immutable/chunks/136kzvysn1aig.css","style"] :HL["/chat-static/_next/static/immutable/chunks/23dt8aqwslw_4.css","style"] :HL["/chat-static/_next/static/immutable/chunks/176nhfyswbwwb.css","style"] :HL["/chat-static/_next/static/immutable/chunks/03jd14_hafawi.css","style"] 1:X 6:X 17:X 1a:X 1f:X 24:X 22:[["children",{"s":"__PAGE__","h":162,"d":{"r":"$L23","p":false,"v":"$24"}}]] 20:[["children",{"s":{"n":"id","t":"d","k":"RTz7dLt3u0c","s":null},"h":102,"d":{"r":"$L21","p":false,"v":"$6"},"c":"$Q22"}]] 1d:[["children",{"s":"(discover)","h":106,"d":{"r":"$L1e","p":false,"v":"$1f"},"c":"$Q20"}]] 1b:[["children",{"s":"templates","h":106,"d":{"r":"$L1c","p":false,"v":"$6"},"c":"$Q1d"}]] 18:[["children",{"s":"(no-sidebar)","h":74,"d":{"r":"$L19","p":false,"v":"$1a"},"c":"$Q1b"}]] 31:oc3c,8:[["children",{"s":"(dynamic-root)","h":58,"d":{"r":["$","$2","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/136kzvysn1aig.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/23dt8aqwslw_4.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/176nhfyswbwwb.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","3",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/03jd14_hafawi.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/3er7iewnhes8l.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/0w1lrom8rw5ju.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/11lyl92d5uidb.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1aewy7yrnlnw1.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/2rs4e_urgmfoi.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/2isb-ffyk13h1.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/2ooky3daf1w60.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/3_b2wbin-ikog.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/2hnc1lvy4flvw.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/44h450r9z0sbm.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/2jw9gbl0cyiu_.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/3upi5_u62q_gq.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/0y_gcmuhh_hkx.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/3ppx1kyz3ck5n.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/3vous1g45z_7y.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/13r8edmwzb6pq.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/18_-xblcdgpy1.js","async":true,"nonce":"$undefined"}],"$L9","$La","$Lb","$Lc","$Ld","$Le","$Lf","$L10","$L11","$L12","$L13","$L14","$L15"],"$L16"]}],"p":false,"v":"$17"},"c":"$Q18"}]] 31:o1d7,7:[["children",{"s":{"n":"variants","t":"d","k":"v0pprvariant-0-0-en-","s":null},"h":122,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q8"}]] 2c:X 2d:X 31:o716,0:{"q":"","i":false,"S":true,"r":"$1","t":{"t":{"s":"","h":90,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q7"},"h":{"r":["$","$2","h",{"children":[null,["$","$L26","F8MWUmQVt0T2UgzbQBUxJv",{"children":"$L27"}],["$","div","F8MWUmQVt0T2UgzbQBUxJm",{"hidden":true,"children":["$","$L29",null,{"children":["$","$2a",null,{"name":"Next.Metadata","children":"$L2b"}]}]}]]}],"p":false,"v":"$2c"}},"s":"$2d","a":"$@2e","w":"$@2f"} 31:o1000,30:"/chat-static/_next/static/immutable/chunks/3er7iewnhes8l.js" 31:"/chat-static/_next/static/immutable/chunks/0w1lrom8rw5ju.js" 32:"/chat-static/_next/static/immutable/chunks/11lyl92d5uidb.js" 33:"/chat-static/_next/static/immutable/chunks/1aewy7yrnlnw1.js" 34:"/chat-static/_next/static/immutable/chunks/2rs4e_urgmfoi.js" 35:"/chat-static/_next/static/immutable/chunks/2isb-ffyk13h1.js" 36:"/chat-static/_next/static/immutable/chunks/2ooky3daf1w60.js" 37:"/chat-static/_next/static/immutable/chunks/3_b2wbin-ikog.js" 38:"/chat-static/_next/static/immutable/chunks/2hnc1lvy4flvw.js" 39:"/chat-static/_next/static/immutable/chunks/44h450r9z0sbm.js" 3a:"/chat-static/_next/static/immutable/chunks/2jw9gbl0cyiu_.js" 3b:"/chat-static/_next/static/immutable/chunks/3upi5_u62q_gq.js" 3c:"/chat-static/_next/static/immutable/chunks/0y_gcmuhh_hkx.js" 3d:"/chat-static/_next/static/immutable/chunks/3ppx1kyz3ck5n.js" 3e:"/chat-static/_next/static/immutable/chunks/3vous1g45z_7y.js" 3f:"/chat-static/_next/static/immutable/chunks/13r8edmwzb6pq.js" 40:"/chat-static/_next/static/immutable/chunks/18_-xblcdgpy1.js" 41:"/chat-static/_next/static/immutable/chunks/1bmakg034cezp.js" 42:"/chat-static/_next/static/immutable/chunks/10nyt517pjj02.js" 43:"/chat-static/_next/static/immutable/chunks/1d2ye83-odk5w.js" 44:"/chat-static/_next/static/immutable/chunks/3xfqd79v-con1.js" 45:"/chat-static/_next/static/immutable/chunks/3941mm2kmjqco.js" 46:"/chat-static/_next/static/immutable/chunks/22d52d8i9k163.js" 47:"/chat-static/_next/static/immutable/chunks/1u_nmjbqxgy4f.js" 48:"/chat-static/_next/static/immutable/chunks/40b8hahwb3x3g.js" 49:"/chat-static/_next/static/immutable/chunks/0b_epuoqrnt9r.js" 4a:"/chat-static/_next/static/immutable/chunks/06_8_ggmz_iu8.js" 4b:"/chat-static/_next/static/immutable/chunks/3rcph1947ndk0.js" 4c:"/chat-static/_next/static/immutable/chunks/3eolggoa5syyo.js" 4d:"/chat-static/_next/static/immutable/chunks/3noaaw7xa00yr.js" 4e:"/chat-static/_next/static/immutable/chunks/0rji-kfe-9ldk.js" 4f:"/chat-static/_next/static/immutable/chunks/13chkuejbk5mz.js" 50:"/chat-static/_next/static/immutable/chunks/2f5fc91q588wa.js" 51:"/chat-static/_next/static/immutable/chunks/1f3soh6puizbj.js" 52:"ScopedPromiseContextProvider" 53:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"$52"] 5a:"SidebarUIProvider" 5b:I[475961,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"$5a"] 5c:I[990009,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"Header"] 5d:I[980088,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"DynamicCMDK"] 5f:"LoadingBoundaryProvider" 60:I[381307,["$3"],"$5f"] 61:"/chat-static/_next/static/immutable/chunks/25z7qph2amysi.js" 62:"/chat-static/_next/static/immutable/chunks/0iv1vmo68w9j8.js" 63:"/chat-static/_next/static/immutable/chunks/30_dynhkjsiew.js" 64:"/chat-static/_next/static/immutable/chunks/2kyj-n8-kfv47.js" 65:"/chat-static/_next/static/immutable/chunks/3n4xyedq-32gn.js" 66:"TemplatePreviewContainer" 67:I[959794,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$66"] 68:"TemplateInfoSection" 69:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62"31:oec5,,"$63","$64","$65"],"$68"] 6a:"TemplateInfoSectionGroup" 6b:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$6a"] 6e:I[176645,["$3"],"OutletBoundary"] 6:C 9:["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/1bmakg034cezp.js","async":true,"nonce":"$undefined"}] a:["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/10nyt517pjj02.js","async":true,"nonce":"$undefined"}] b:["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/1d2ye83-odk5w.js","async":true,"nonce":"$undefined"}] c:["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/3xfqd79v-con1.js","async":true,"nonce":"$undefined"}] d:["$","script","script-21",{"src":"/chat-static/_next/static/immutable/chunks/3941mm2kmjqco.js","async":true,"nonce":"$undefined"}] e:["$","script","script-22",{"src":"/chat-static/_next/static/immutable/chunks/22d52d8i9k163.js","async":true,"nonce":"$undefined"}] f:["$","script","script-23",{"src":"/chat-static/_next/static/immutable/chunks/1u_nmjbqxgy4f.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-24",{"src":"/chat-static/_next/static/immutable/chunks/40b8hahwb3x3g.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-25",{"src":"/chat-static/_next/static/immutable/chunks/0b_epuoqrnt9r.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-26",{"src":"/chat-static/_next/static/immutable/chunks/06_8_ggmz_iu8.js","async":true,"nonce":"$undefined"}] 13:["$","script","script-27",{"src":"/chat-static/_next/static/immutable/chunks/3rcph1947ndk0.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-28",{"src":"/chat-static/_next/static/immutable/chunks/3eolggoa5syyo.js","async":true,"nonce":"$undefined"}] 15:["$","script","script-29",{"src":"/chat-static/_next/static/immutable/chunks/3noaaw7xa00yr.js","async":true,"nonce":"$undefined"}] 19:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0rji-kfe-9ldk.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/13chkuejbk5mz.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/2f5fc91q588wa.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1f3soh6puizbj.js","async":true,"nonce":"$undefined"}]],["$","$L53",null,{"params":null,"promises":{"scopeUserDetails":"$@54","team":"$@55","vercelProjectsFavorites":"$@56","chats":"$@57","sidebarProjectGroups":"$@58","sidebarDrafts":"$@59"},"children":["$","$L5b",null,{"children":[["$","$L5c",null,{}],["$","div",null,{"className":"flex min-h-0 flex-1","children":["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","$L5d",null,{}]]}]}]]}] 1c:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1e:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/25z7qph2amysi.js","async":true,"nonce":"$undefined"}]],"$L5e"]}] 31:o10d9,21:["$","$L60",null,{"loading":[["$","div","l",{"data-testid":"template-detail-skeleton","className":"flex flex-1 w-full gap-y-6 flex-col items-center","children":[["$","div",null,{"className":"flex w-full flex-col items-start gap-6 max-w-[1600px]","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-5 w-20"}],["$","div",null,{"className":"flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-2","children":[["$","div",null,{"className":"flex flex-col gap-2 text-left","children":[["$","div",null,{"className":"mb-0.5 flex items-center sm:mb-0","children":["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-10 w-64 max-w-[60vw]"}]}],["$","div",null,{"className":"flex items-center gap-1.5","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-5 rounded-full sm:size-6"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-20"}]]}]]}],["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-20 rounded-lg sm:h-8 sm:w-24"}]}]]}]]}],["$","div",null,{"className":"flex w-full flex-1 flex-col py-4 pt-0 items-center text-sm gap-9 max-w-[1600px]","children":["$","div",null,{"className":"flex h-fit w-full flex-1 flex-col gap-9","children":[["$","$L67",null,{"children":["$","div",null,{"aria-hidden":true,"className":"flex size-full flex-col bg-v0-background-200","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-2 border-b border-v0-gray-300 px-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 mx-auto h-7 w-[min(40%,20rem)]"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 size-7"}]]}],["$","div",null,{"className":"flex flex-1 items-center justify-center p-8","children":["$","div",null,{"className":"flex w-full max-w-sm flex-col items-center gap-3","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-5 w-2/3"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3 w-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3 w-4/5"}]]}]}]]}]}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L69",null,{"className":"flex-1","title":"About","children":["$","div",null,{"className":"flex w-full max-w-xl flex-col gap-2","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-3/4"}]]}]}],["$","$L6b",null,{"className":"w-full lg:w-80","children":[["$","$L69",null,{"title":"Tags","children":["$","div",null,{"className":"flex flex-wrap gap-6","children":["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-16 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-20 rounded-full"}]]}]}]}],["$","$L69",null,{"title":"Share","children":["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}]]}]}],["$","$L69",null,{"children":["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-full max-w-44"}]}]]}]]}]]}]}]]}],[],[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/3zey2xxulb6al.js","async":true,"nonce":"$undefined"}]]],"children":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$L6c",[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 31:o293,23:["$","$2","c",{"children":["$L6d",[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0iv1vmo68w9j8.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/30_dynhkjsiew.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/2kyj-n8-kfv47.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/3n4xyedq-32gn.js","async":true,"nonce":"$undefined"}]],["$","$L6e",null,{"children":["$","$2a",null,{"name":"Next.MetadataOutlet","children":"$@6f"}]}]]}] 31:o5f4,76:I[339811,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"PageLayout"] 77:"ScrollFadeContainer" 78:I[388503,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"$77"] 79:"CommunityTabsClient" 7a:I[490134,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"$79"] 7b:"CommunityLiveSearch" 7c:I[803568,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"$7b"] 7d:I[32970,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"ZoneProvider"] 7e:I[532822,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"default"] 2d:300 17:T8,variants1f:T8,variants70:T18d6,31:o18d6,(({protect:a})=>{function b(a){return new Promise((b,c)=>{if(document.querySelector(`script[src="${a}"]`))return void b();let d=document.createElement("script");d.src=a,d.async=!0,d.onload=()=>b(),d.onerror=a=>{console.error("Error loading script",a),c(a)},document.head.appendChild(d)})}var c=class a{#a;#b;#c=0;constructor(){let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,this.#e(),window.addEventListener("online",this.#f),window.addEventListener("visibilitychange",this.#f)}getChallenge=async()=>(await this.#g(),await this.#a.then(a=>"function"==typeof a?a():a));#f=()=>{if(document.hidden)return;let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,window.V_C=[],window.V_C.push=c;let d=document.querySelector('script[src*="c.js"]');d&&d.remove(),this.#c+=1};#e=()=>{if(window.V_C){let a=window.V_C.pop();a&&this.#b(a)}else window.V_C=[],window.V_C.push=this.#b};#g=()=>{let a=new URL("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/a-4-a/c.js",window.location.origin);return a.searchParams.set("i",String(this.#c)),a.searchParams.set("v",String(3)),a.searchParams.set("h",window.location.host),b(a.pathname+a.search)};#h=()=>{window.V_C=void 0};static #d(){let a,b;return{promise:new Promise((c,d)=>{a=c,b=d}),resolve:a,reject:b}}},d=class a{#a=!1;#b;constructor(a){this.#b=a}get loaded(){return this.#a}load=async()=>{this.#a||await this.#f()};#c=()=>{if(typeof globalThis.window>"u")throw Error("KPSDK is not available in the server");if(!window.KPSDK)throw Error("KPSDK is not loaded");let b=this.#b.map(b=>{let c=a.#e(b.path);return{domain:c.host,path:c.pathname,method:b.method}});try{window.KPSDK.configure(b)}catch(a){console.error("Error configuring KPSDK...",a)}};#f=async()=>{let a=this;return new Promise((c,d)=>{let e=()=>{document.removeEventListener("kpsdk-load",e),this.#c()},f=()=>{document.removeEventListener("kpsdk-ready",f),a.#a=!0,c()};document.addEventListener("kpsdk-load",e,{once:!0}),document.addEventListener("kpsdk-ready",f,{once:!0}),b("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/p.js").catch(a=>{document.removeEventListener("kpsdk-load",e),document.removeEventListener("kpsdk-ready",f),d(a)})})};static #e(a){let b;try{b=new URL(a)}catch{b=new URL(a,location.origin)}return b}},e=a=>{let b=a.replace(/[.?+^$[\]\\(){}|-]/g,"\\$&").split("*").join(".*");return RegExp(`^${b}$`)},f=({path:a,pattern:b})=>-1!==a.search(b);async function g(a,b,c){let d=XMLHttpRequest.prototype.open,g=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(a,b,c,e,f){return this._requestUrl=b.toString(),this._requestMethod=a,d.call(this,a,b,c??!0,e,f)},XMLHttpRequest.prototype.send=async function(d){let h=this._requestUrl;if(!h||this._isReexecution)return g.call(this,d);let i=new URL(h,location.href),j=c.find(a=>f({path:i.pathname,pattern:e(a.path)}));if(null==j||j.method!==(this._requestMethod??"GET")&&"*"!==j.method)return g.call(this,d);let k=await a.getChallenge();if(this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET"),0!==k.b||b.loaded||((1===k.d||j?.advancedOptions?.checkLevel==="deepAnalysis")&&await b.load(),!b.loaded))return g.call(this,d);this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET");let l=new XMLHttpRequest;return l._isReexecution=!0,l.open(this._requestMethod||"GET",h,!0),l.setRequestHeader("x-is-human",JSON.stringify(k)),l.setRequestHeader("x-path",i.pathname),l.setRequestHeader("x-method",this._requestMethod||"GET"),this.timeout&&(l.timeout=this.timeout),this.responseType&&(l.responseType=this.responseType),this.withCredentials&&(l.withCredentials=this.withCredentials),l.onreadystatechange=()=>{Object.defineProperty(this,"readyState",{value:l.readyState,writable:!0,configurable:!0}),l.readyState===XMLHttpRequest.DONE&&(Object.defineProperty(this,"status",{value:l.status,writable:!0,configurable:!0}),Object.defineProperty(this,"statusText",{value:l.statusText,writable:!0,configurable:!0}),Object.defineProperty(this,"response",{value:l.response,writable:!0,configurable:!0}),Object.defineProperty(this,"responseText",{value:l.responseText,writable:!0,configurable:!0}),Object.defineProperty(this,"responseXML",{value:l.responseXML,writable:!0,configurable:!0}),this.getAllResponseHeaders=()=>l.getAllResponseHeaders(),this.getResponseHeader=a=>l.getResponseHeader(a)),this.onreadystatechange&&this.onreadystatechange.call(this,new Event("readystatechange"))},l.onload=a=>{this.onload&&this.onload.call(this,a)},l.onerror=a=>{this.onerror&&this.onerror.call(this,a)},l.onabort=a=>{this.onabort&&this.onabort.call(this,a)},l.ontimeout=a=>{this.ontimeout&&this.ontimeout.call(this,a)},l.onloadstart=a=>{this.onloadstart&&this.onloadstart.call(this,a)},l.onloadend=a=>{this.onloadend&&this.onloadend.call(this,a)},l.onprogress=a=>{this.onprogress&&this.onprogress.call(this,a)},l.send(d)}}!function({protect:a=[]}){let b;for(let b of a)if(b.advancedOptions?.checkLevel!==void 0&&"deepAnalysis"!==b.advancedOptions.checkLevel&&"basic"!==b.advancedOptions.checkLevel)throw Error(`Invalid checkLevel "${b.advancedOptions.checkLevel}" for route "${b.path}". Must be one of: deepAnalysis, basic`);let h=new c,i=new d(a);g(h,i,a).catch(a=>{console.error("Error patching XMLHttpRequest:",a)}),b=window.fetch,window.fetch=async(c,d)=>{let g=new URL(c instanceof Request?c.url:c,location.href),j=g.origin===location.origin,k=a.find(a=>f({path:g.pathname,pattern:e(a.path)})),l=d?.method??(c instanceof Request?c.method:"GET"),m=null!=k&&(k.method===l||"*"===k.method);if(null==k||!m||!j)return b(c,d);let n=await h.getChallenge(),o=new Headers(d?.headers||(c instanceof Request?c.headers:void 0));o.set("x-is-human",JSON.stringify(n)),o.set("x-path",g.pathname),o.set("x-method",l);let p={...d,headers:o};return i.loaded||0!==n.b?b(c,p):1===n.d||k?.advancedOptions?.checkLevel==="deepAnalysis"?(await i.load(),window.fetch(c,p)):b(c,p)}}({protect:a})})({ protect: [{"path":"/chat/api/vm/actions/run-pipeline","method":"POST","advancedOptions":{"checkLevel":"deepAnalysis"}},{"path":"/chat/api/chat","method":"POST"},{"path":"/chat/api/vm/actions/*","method":"POST"},{"path":"*/chat/api/vm/actions/*","method":"POST"}] });31:o534,16:["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","meta",null,{"name":"ahrefs-site-verification","content":"e2ef51ac3cec223624a89ee7790eda482d23374870bff86fe0e0c599b8de4b51"}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$70"}}],"$L71","$L72","$L73","$L74"]}],"$L75"]}] 5e:["$","$L76",null,{"actions":["$","div",null,{"className":"flex lg:pr-1 items-center w-full justify-between flex-row gap-2 relative","children":[["$","$L78",null,{"leftFadeClassName":"left-0 z-20","rightFadeClassName":"right-0 z-20","showButtons":false,"className":"flex-1 min-w-0","scrollableClassName":"px-0","children":["$","$L7a",null,{}]}],["$","$2a",null,{"children":["$","$L7c",null,{}]}]]}],"titleRowClassName":"hidden","className":"flex py-6 px-4 sm:p-9","contentWrapperClassName":"flex-1 min-h-max","headerClassName":"!border-t-0","title":"Community","children":[["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","div",null,{"className":"py-4","children":["$","$L7d",null,{"zone":"chat","children":["$","$L7e",null,{}]}]}]]}] 31:o1000,7f:"GeistThemeScript" 80:I[943185,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$7f"] 81:I[600033,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"AppStoreMetaTag"] 82:I[943185,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"GeistProvider"] 83:I[818362,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"LocaleProvider"] 84:I[841245,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"MotionConfig"] 85:"AtomicContextSWRProvider" 86:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"$85"] 87:"GlobalPromiseContextProvider" 88:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"$87"] 8b:I[827887,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"JotaiProvider"] 8c:"ServerQuerySWRRuntimeProvider" 8d:I[74757,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$8c"] 8f:I[815349,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"CleanupStorage"] 90:I[470669,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"Analytics"] 91:I[191173,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"SpeedInsights"] 93:"VercelianAppFlowMigrator" 94:I[23825,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$93"] 95:I[108762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"TrackInfo"] 96:I[578386,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"PageViewTracker"] 97:I[356301,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"AutoCapture"] 71:["$","$L80",null,{"storageKey":"theme"}] 72:["$","$2a",null,{"children":["$","$L81",null,{}]}] 73:["$","meta",null,{"name":"slack-app-id","content":"A09PS08K5R8"}] 74:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Vercel\",\"url\":\"https://vercel.com\",\"logo\":\"https://assets.vercel.com/image/upload/front/favicon/vercel/favicon.ico\",\"sameAs\":[\"https://x.com/vercel\",\"https://x.com/v0\",\"https://github.com/vercel\",\"https://www.linkedin.com/compan31:o1c4,y/vercel\",\"https://www.linkedin.com/company/v0dev\"]},{\"@context\":\"https://schema.org\",\"@type\":\"WebApplication\",\"name\":\"v0\",\"url\":\"https://v0.app\",\"description\":\"Your collaborative AI assistant to design, iterate, and scale full-stack applications for the web.\",\"applicationCategory\":[\"DeveloperApplication\",\"DesignApplication\"],\"operatingSystem\":\"All\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Vercel\"}}]"}}] 31:o93b,75:["$","body",null,{"className":"font-sans bg-v0-background-200 text-v0-gray-1000 antialiased kSVEZa_variable yCrHjW_variable hGs1mq_variable","children":[["$","$L82",null,{"storageKey":"theme","withScript":false,"children":["$","$L83",null,{"locale":"en","children":["$","$L84",null,{"reducedMotion":"user","children":["$","$L86",null,{"routes":{"scoped":{"scopeUserDetails":{"path":"/api/chat/scoped/user","method":"GET"},"team":{"path":"/api/chat/scoped/team","method":"GET"},"vercelProjectsFavorites":{"path":"/api/chat/scoped/vercel-projects/favorites","method":"GET"},"chats":{"path":"/api/chat/scoped/chats","method":"GET"},"paginatedChats":{"path":"/api/chat/scoped/get-paginated-chats","method":"GET"},"designSystems":{"path":"/api/chat/scoped/design-systems-with-registry/list","method":"GET"},"sidebarProjectGroups":{"path":"/api/chat/scoped/sidebar-project-groups","method":"GET"},"sidebarDrafts":{"path":"/api/v2/internal/chats/sidebar-drafts","method":"GET"}},"chat":{"attributes":{"path":"/api/chat/chat/attributes","method":"GET"},"externalMeta":{"path":"/api/chat/chat/latest-external-meta","method":"GET"},"latest":{"path":"/api/chat/chat/latest","method":"GET"},"template":{"path":"/api/chat/chat/template","method":"GET"},"messages":{"path":"/api/chat/chat/messages","method":"GET"},"messagesRange":{"path":"/api/chat/chat/messages/range","method":"GET"},"gitStatus":{"path":"/api/git/status","method":"GET"}},"library":{"chatsList":{"path":"/api/chat/library/chats/list","method":"GET"},"archivedChatsList":{"path":"/api/chat/library/chats/archived","method":"GET"},"projectsList":{"path":"/api/chat/library/projects/list","method":"GET"},"filters":{"path":"/api/chat/library/filters","method":"GET"}},"project":{},"global":{"dailyModelUsage":{"path":"/api/chat/global/daily-model-usage","method":"GET"},"freeFixWithV0Usage":{"path":"/api/chat/global/free-fix-with-v0-usage","method":"GET"}}},"children":["$","$L88",null,{"params":null,"promises":{"dailyModelUsage":"$@89","freeFixWithV0Usage":"$@8a"},"children":[["$","$L8b",null,{"children":["$","$L8d",null,{"children":"$L8e"}]}],["$","$L8f",null,{}]]}]}]}]}]}],["$","$L90",null,{}],["$","$L91",null,{"endpoint":"https://v0sdk.com/_vercel/speed-insights/vitals"}],["$","$2a",null,{"children":"$L92"}],["$","$L94",null,{}],["$","$L95",null,{}],["$","$L96",null,{}],["$","$L97",null,{}]]}] 31:o90,27:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1"}]] 31:oe,2c:T8,variants31:o1000,98:"HydrateDurableAtoms" 99:I[783749,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$98"] 9a:I[359783,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"DataProvider"] 9b:I[32170,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"UserProvider"] 9d:"AnimatedIconProvider" 9e:I[908887,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$9d"] 9f:I[30570,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"PortalProvider"] a0:"SnowflakePublishProvider" a1:I[966820,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a0"] a2:"UserInputProvider" a3:I[472914,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a2"] a4:I[69221,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"CmdkProvider"] a5:"VirtualMachineUIStateProvider" a6:I[319228,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a5"] a7:"DeployedPreviewIframeRefProvider" a8:I[166890,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a7"] a9:"PreviewSourceUIStateProvider" aa:I[197843,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a9"] ab:I[367078,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"LoaderProvider"] ac:"PromptFormUIProvider" ad:I[595358,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$ac"] ae:I[242759,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"FlagsProvider"] b0:I[723704,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"NuqsAdapter"] b1:"ChatTabsProvider" b2:I[568561,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b1"] b3:"PersonalScopeMigrationAnnouncementProvider" b4:I[206559,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b3"] b6:"AnnouncementVisibilityProvider" b7:I[878519,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b6"] ba:I[561588,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$3931:o5e1,","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"Toaster"] bb:I[407562,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"Toaster"] bc:"SuspendingDialogs" bd:I[840793,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$bc"] be:I[323194,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"SignInDialog"] bf:I[279070,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"ConsentBanner"] c0:"/chat-static/_next/static/immutable/chunks/2-hq5fh7i4qph.js" c1:I[192842,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$c0"],"ChatWarning"] c2:I[15279,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"SessionManager"] 31:o8ad,8e:["$","$L99",null,{"serverData":{"chat":null,"scoped":null,"root":{"root":{"sidebarCollapsed":false,"sidebarPreferenceSet":false,"sidebarWidth":250,"lastUpdated":0,"modelConfiguration":{"fast":false,"modelId":"v0-max","thinking":false,"thinkingEffort":null,"imageGenerations":false},"modelDisplayPreference":null,"lastModelPreference":null,"toolConfiguration":{"webSearch":true,"generateImages":true,"vercelProjectId":null,"vercelProjectName":null,"vercelProjectBranch":null,"vercelProjectGitOrg":null,"vercelProjectGitRepo":null,"customInstructionIds":[],"mcpServerIds":[],"marketplaceMcpIds":[],"autoAllowMcpTools":false},"shouldShowUpgrade":false,"chatMobilePanel":"input","chatPanelLayout":[{"id":"input","ratio":0.205,"visible":true},{"id":"output","ratio":0.795,"visible":true}],"dismissedFeatureDialogs":{},"dismissedConnectRepoCard":false,"permissionsModeV2":null}}},"children":["$","$L9a",null,{"children":["$","$L9b",null,{"expectUser":false,"userPromise":"$@9c","children":["$","$L9e",null,{"children":["$","$L9f",null,{"children":["$","$La1",null,{"children":["$","$La3",null,{"children":["$","$La4",null,{"children":["$","$La6",null,{"children":["$","$La8",null,{"children":["$","$Laa",null,{"children":["$","$Lab",null,{"children":["$","$Lad",null,{"children":["$","$Lae",null,{"promise":"$@af","middlewareFlags":[],"children":["$","$Lb0",null,{"children":["$","$Lb2",null,{"children":["$","$Lb4",null,{"destinationTeamIdPromise":"$@b5","children":["$","$Lb7",null,{"visiblePromise":"$@b8","children":["$","div",null,{"className":"max-h-screen-patched min-h-screen-patched flex w-full flex-col overflow-auto bg-v0-background-200","vaul-drawer-wrapper":"","children":[["$","$2a",null,{"fallback":null,"children":"$Lb9"}],["$","$Lba",null,{}],["$","$Lbb",null,{}],["$","$2a",null,{"fallback":null,"children":["$","$Lbd",null,{}]}],["$","$Lbe",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$Lbf",null,{}]]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}] 31:o2a2,59:null 6c:["$","$Lc1",null,{"description":"This generation was deleted, unpublished, or no longer exists.","icon":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"circular","style":{"color":"currentColor"},"className":"size-8","children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m1-5a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7.1 5.82a1 1 0 1 1 1.04 1.42c-.44.06-.89.44-.89 1.01v1h1.5v-.61a2.5 2.5 0 1 0-3-3.46l-.33.68 1.35.64z","clipRule":"evenodd"}]}],"title":"Not Found","children":null}] 92:["$","$Lc2",null,{"enabled":false}] 31:o20,9c:"$undefined" b8:true b9:null 31:o24,2c:T1,?24:T1,?2d:60 24:T2,id2c:T2,id31:o311,b5:null af:{"requested":null,"identity":null,"resolution":"anonymous","flags":{"aepe":false,"asse":false,"afre":false,"bvge":false,"ctbe":true,"igm":"gateway.google/gemini-3.1-flash-lite-image","caae":false,"ctv2":false,"lcw":false,"tbb":false,"oivs":false,"vmmt":false,"nfd":"","nfde":1,"iedm":true,"inb":true,"stve":true,"ci":true,"smpe":false,"dsie":false,"sie":false,"siv2":false,"cvod":false,"dce":false,"tse":false,"ftdml":true,"lmmo":false,"ubse":true,"dcpps":false,"spu":true,"kps":false,"tfam":false,"evmv":true,"f5e":true,"f51e":true,"gmpe":true,"impe":false,"gope":false,"awde":false,"awpse":false,"g56se":true,"g56spe":true,"g52e":false,"g46e":false,"kk3e":false,"o5e":true,"ept":false,"pwz":true,"shce":false,"shme":false,"idue":false,"ipc":true,"dsrr":false,"ftr":null}} 31:o652,c3:I[37565,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"S"] c4:"KeepClientOnUpToDateSlugPath" c5:I[983440,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$c4"] c6:"TemplateFlagDialog" c7:I[39126,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$c6"] c8:I[482195,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],""] c9:"TemplateStatusBadge" ca:I[484402,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$c9"] cb:I[834117,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"CommunityAvatar"] 31:o1154,6d:["$","$Lc3",null,{"value":{"fallback":{"template:RTz7dLt3u0c:likes":{"likeCount":249,"isLiked":false}}},"children":[["$","$Lc5",null,{"id":"RTz7dLt3u0c","title":"AppSport"}],["$","$Lc7",null,{"templateId":"RTz7dLt3u0c"}],["$","div",null,{"data-testid":"template-detail-content","className":"flex flex-1 w-full gap-y-6 flex-col items-center","children":[["$","div",null,{"data-testid":"template-detail-header","className":"flex w-full flex-col items-start gap-6 max-w-[1600px]","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"max-w-full","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"text-v0-gray-900 flex items-center text-sm break-words gap-0.5 flex-nowrap","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$Lc8",null,{"href":"/templates","prefetch":true,"children":"Templates","data-slot":"breadcrumb-link","className":"hover:text-v0-gray-1000 transition-colors","ref":null}]}],[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"m6.75 3.94.53.53 2.82 2.82a1 1 0 0 1 0 1.42l-2.82 2.82-.53.53L5.69 11l.53-.53L8.69 8 6.22 5.53 5.69 5z","clipRule":"evenodd"}]}]}],["$","$Lc8",null,{"className":"hover:text-v0-gray-1000 transition-colors capitalize truncate","href":"/templates/apps-and-games","prefetch":true,"children":"Apps & Games","data-slot":"breadcrumb-link","ref":null}]],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":"$6d:props:children:2:props:children:0:props:children:0:props:children:props:children:1:0:props:children:props:children"}]}],["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-v0-gray-1000 font-normal capitalize truncate","children":"AppSport"}]]}]}],["$","div",null,{"className":"flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-2","children":[["$","div",null,{"className":"flex flex-col gap-2 text-left","children":[["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"data-testid":"template-detail-title","className":"line-clamp-1 text-heading-32","children":"AppSport"}],["$","$Lca",null,{"status":"approved"}]]}],["$","div",null,{"className":"flex items-center flex-wrap gap-3","children":[["$","$Lc8",null,{"className":"flex items-center gap-1.5","href":"/@brianmoragap-4988","children":[["$","$Lcb",null,{"className":"size-5 sm:size-6","username":"brianmoragap-4988","teamId":"team_ajv1hhAGOCLkV1fj39QOkmv2","teamAvatarClassName":"size-3 sm:size-3.5"}],["$","p",null,{"className":"text-sm font-medium text-v0-gray-900","children":"brianmoragap-4988"}]]}],["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"className":"size-3","children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"M2.5 3.25C2.5 1.45 3.96 0 5.75 0h.5C8.05 0 9.5 1.46 9.5 3.25v.5C9.5 5.55 8.04 7 6.25 7h-.5A3.25 3.25 0 0 1 2.5 3.75zM5.75 1.5C4.78 1.5 4 2.28 4 3.25v.5c0 .97.78 1.75 1.75 1.75h.5C7.22 5.5 8 4.72 8 3.75v-.5c0-.97-.78-1.75-1.75-1.75zm-4.25 13v-1.33a4.8 4.8 0 0 1 4.33-2.67h.34a4.8 4.8 0 0 1 4.33 2.67v1.33zM5.83 9a6.3 6.3 0 0 0-5.76 3.69l-.07.15V16h12v-3.16l-.07-.15A6.3 6.3 0 0 0 6.17 9zm10.1 3.69a6.3 6.3 0 0 0-2.59-2.84l-.75 1.3c.8.46 1.48 1.16 1.91 2.02v1.33h-1V16H16v-3.16zM11.25 0h-.75v1.5h.75c.97 0 1.75.78 1.75 1.75v.5c0 .97-.78 1.75-1.75 1.75h-.75V7h.75c1.8 0 3.25-1.46 3.25-3.25v-.5c0-1.8-1.46-3.25-3.25-3.25","clipRule":"evenodd"}]}],["$","span",null,{"className":"text-[13px] leading-none","children":"2.3K"}]]}],"$Lcc","$Lcd"]}]]}]]}],"$Lce"]}]]}],"$Lcf"]}]]}] 31:o1000,d0:"TemplateCardStatsLikesClient" d1:I[441648,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$d0"] d2:"TemplateFlagButton" d3:I[39126,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$d2"] d4:"TemplateLikeButton" d5:I[605890,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$d4"] d6:"TemplateBlockButton" d7:I[411379,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$d6"] d9:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"TemplateTags"] da:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"TemplateShare"] db:"TemplateLastUpdated" dc:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$db"] cc:["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-dot size-4 -mx-1","children":[["$","circle","18d7e5",{"cx":"12.1","cy":"12.1","r":"1"}],"$undefined"]}] cd:["$","$Ld1",null,{"templateCanonId":"RTz7dLt3u0c"}] ce:["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":[null,null,null,["$","$Ld3",null,{}],null,null,["$","$Ld5","RTz7dLt3u0c",{"templateCanonId":"RTz7dLt3u0c"}],null,["$","$Ld7",null,{"buttonProps":{"className":"h-7 rounded-md px-2 sm:h-8 sm:rounded-lg sm:px-3"},"buttonType":"v0","template":{"blockId":"b_Laa3rB3mxTD","description":null,"imageUrl":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/thumbnail-m0y8FgcgFDPUi6eOvhkqObVrFOtl0Y.jpg","title":"AppSport","publishedToCommunity":"approved","templateCanonId":"RTz7dLt3u0c","templateVersionId":"tDBr58GWEkI","uses":2251,"isTeamTemplate":true,"likeCount":249,"vercelDeploymentUrl":null,"createdAt":"$D2025-10-20T01:49:52.450Z","category":"apps-and-games","tags":[],"authorUsername":"brianmoragap-4988","isVercel":false,"teamId":"team_ajv1hhAGOCLkV1fj39QOkmv2","liked":false},"isOwnTemplate":false}]]}] cf:["$","div",null,{"className":"flex w-full flex-1 flex-col py-4 pt-0 items-center text-sm gap-9 max-w-[1600px]","children":[["$","div",null,{"className":"flex h-fit w-full flex-1 flex-col gap-9","children":[["$","$L67","description",{"testId":"template-detail-preview","children":"$Ld8"}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L69",null,{"className":"flex-1","title":"About","children":["$","p",null,{"className":"text-sm text-v0-gray-900","children":"No description"}]}],["$","$L6b",null,{"className":"w-full lg:w-80","children":[["$","$Ld9",null,{"tags":"$ce:props:children:8:props:template:tags"}],["$","$Lda",null,{"templateUrl":"https://v0.app/templates/appsport-RTz7dLt3u0c"}],["$","$Ldc",null,{"updatedAt":"$D2025-10-20T15:34:55.853Z"}]]}]]}]]}],["$","$2a",null,{"fallback31:o1e,":null,"children":"$Ldd"}]]}] 31:o230,de:"ExplicitChatIdProvider" df:I[903690,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$de"] e0:I[838238,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"SWRDataProvider"] e1:T2805d,31:o2805d,[V0_FILE]sql:file="scripts/001_create_schema.sql" isMerged="true" -- Create profiles table create table if not exists public.profiles ( id uuid primary key references auth.users(id) on delete cascade, email text not null, full_name text, display_name text, bio text, profile_image_url text, phone text, date_of_birth date, city text, country text default 'Chile', -- Verification and safety is_verified boolean default false, verification_method text, -- 'id_card', 'social_media', etc. verification_date timestamptz, reputation_score integer default 0, total_events_attended integer default 0, total_events_created integer default 0, -- Preferences preferred_sports text[], -- array of sport types skill_levels jsonb, -- {cycling: 'intermediate', running: 'beginner'} -- Timestamps created_at timestamptz default now(), updated_at timestamptz default now() ); -- Create events table create table if not exists public.events ( id uuid primary key default gen_random_uuid(), creator_id uuid not null references public.profiles(id) on delete cascade, -- Event details title text not null, description text, sport_type text not null, -- 'cycling', 'mtb', 'trail_running', 'trekking', 'running' difficulty_level text not null, -- 'beginner', 'intermediate', 'advanced' -- Location meeting_point text not null, meeting_point_lat decimal(10, 8), meeting_point_lng decimal(11, 8), route_description text, distance_km decimal(6, 2), elevation_gain_m integer, -- Timing event_date date not null, event_time time not null, estimated_duration_minutes integer, -- Capacity max_participants integer, current_participants integer default 1, -- creator is first participant -- Status status text default 'open', -- 'open', 'full', 'cancelled', 'completed' is_public boolean default true, -- Safety emergency_contact text, required_equipment text[], safety_notes text, -- Timestamps created_at timestamptz default now(), updated_at timestamptz default now() ); -- Create event_participants table create table if not exists public.event_participants ( id uuid primary key default gen_random_uuid(), event_id uuid not null references public.events(id) on delete cascade, user_id uuid not null references public.profiles(id) on delete cascade, -- Participation details status text default 'confirmed', -- 'confirmed', 'cancelled', 'attended' joined_at timestamptz default now(), -- Unique constraint: one user per event unique(event_id, user_id) ); -- Create groups table (for influencers/leaders) create table if not exists public.groups ( id uuid primary key default gen_random_uuid(), leader_id uuid not null references public.profiles(id) on delete cascade, -- Group details name text not null, description text, sport_type text not null, group_image_url text, -- Settings is_private boolean default false, max_members integer, current_members integer default 1, -- Timestamps created_at timestamptz default now(), updated_at timestamptz default now() ); -- Create group_members table create table if not exists public.group_members ( id uuid primary key default gen_random_uuid(), group_id uuid not null references public.groups(id) on delete cascade, user_id uuid not null references public.profiles(id) on delete cascade, -- Membership details role text default 'member', -- 'leader', 'admin', 'member' joined_at timestamptz default now(), -- Unique constraint: one user per group unique(group_id, user_id) ); -- Create notifications table create table if not exists public.notifications ( id uuid primary key default gen_random_uuid(), user_id uuid not null references public.profiles(id) on delete cascade, -- Notification details type text not null, -- 'event_invite', 'event_reminder', 'group_invite', 'safety_alert' title text not null, message text not null, -- Related entities related_event_id uuid references public.events(id) on delete cascade, related_group_id uuid references public.groups(id) on delete cascade, -- Status is_read boolean default false, read_at timestamptz, -- Timestamps created_at timestamptz default now() ); -- Enable Row Level Security on all tables alter table public.profiles enable row level security; alter table public.events enable row level security; alter table public.event_participants enable row level security; alter table public.groups enable row level security; alter table public.group_members enable row level security; alter table public.notifications enable row level security; -- RLS Policies for profiles create policy "profiles_select_all" on public.profiles for select using (true); -- Everyone can view profiles create policy "profiles_insert_own" on public.profiles for insert with check (auth.uid() = id); create policy "profiles_update_own" on public.profiles for update using (auth.uid() = id); create policy "profiles_delete_own" on public.profiles for delete using (auth.uid() = id); -- RLS Policies for events create policy "events_select_all" on public.events for select using (true); -- Everyone can view public events create policy "events_insert_own" on public.events for insert with check (auth.uid() = creator_id); create policy "events_update_own" on public.events for update using (auth.uid() = creator_id); create policy "events_delete_own" on public.events for delete using (auth.uid() = creator_id); -- RLS Policies for event_participants create policy "participants_select_all" on public.event_participants for select using (true); -- Everyone can see who's participating create policy "participants_insert_own" on public.event_participants for insert with check (auth.uid() = user_id); create policy "participants_update_own" on public.event_participants for update using (auth.uid() = user_id); create policy "participants_delete_own" on public.event_participants for delete using (auth.uid() = user_id); -- RLS Policies for groups create policy "groups_select_all" on public.groups for select using (true); -- Everyone can view groups create policy "groups_insert_own" on public.groups for insert with check (auth.uid() = leader_id); create policy "groups_update_own" on public.groups for update using (auth.uid() = leader_id); create policy "groups_delete_own" on public.groups for delete using (auth.uid() = leader_id); -- RLS Policies for group_members create policy "group_members_select_all" on public.group_members for select using (true); -- Everyone can see group members create policy "group_members_insert_own" on public.group_members for insert with check (auth.uid() = user_id); create policy "group_members_update_own" on public.group_members for update using (auth.uid() = user_id); create policy "group_members_delete_own" on public.group_members for delete using (auth.uid() = user_id); -- RLS Policies for notifications create policy "notifications_select_own" on public.notifications for select using (auth.uid() = user_id); create policy "notifications_insert_own" on public.notifications for insert with check (auth.uid() = user_id); create policy "notifications_update_own" on public.notifications for update using (auth.uid() = user_id); create policy "notifications_delete_own" on public.notifications for delete using (auth.uid() = user_id); -- Create indexes for better performance create index if not exists idx_events_sport_type on public.events(sport_type); create index if not exists idx_events_date on public.events(event_date); create index if not exists idx_events_creator on public.events(creator_id); create index if not exists idx_event_participants_event on public.event_participants(event_id); create index if not exists idx_event_participants_user on public.event_participants(user_id); create index if not exists idx_groups_sport_type on public.groups(sport_type); create index if not exists idx_notifications_user on public.notifications(user_id); create index if not exists idx_notifications_unread on public.notifications(user_id, is_read); -- Create updated_at trigger function create or replace function public.handle_updated_at() returns trigger language plpgsql as $$ begin new.updated_at = now(); return new; end; $$; -- Add updated_at triggers create trigger profiles_updated_at before update on public.profiles for each row execute function public.handle_updated_at(); create trigger events_updated_at before update on public.events for each row execute function public.handle_updated_at(); create trigger groups_updated_at before update on public.groups for each row execute function public.handle_updated_at(); [V0_FILE]typescript:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"], } [V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { Mail } from "lucide-react" export default function SignUpSuccessPage() { return (

Check Your Email We've sent you a confirmation link

Please check your email and click the confirmation link to activate your account. Once confirmed, you'll be able to sign in and start using SafeMove.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import Link from "next/link" import { Shield, Users, MapPin, Award } from "lucide-react" export default function LandingPage() { return (

{/* Hero Section */}

SafeMove

Connect with verified women athletes for safe group sports activities

Join cycling, running, trekking, and trail adventures with a trusted community

{/* Features Grid */}

Verified Members

All members are identity-verified for your safety and peace of mind

Community Groups

Join groups led by experienced athletes and influencers

Local Events

Discover and join sports events in your area with detailed routes

Build Reputation

Earn reputation points by participating and creating events

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "@supabase/ssr": "0.7.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/sport-selector.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { useRouter } from "next/navigation" import { Bike, Mountain, Footprints, TreePine, PersonStanding } from "lucide-react" const sports = [ { id: "cycling", name: "Cycling", icon: Bike, color: "from-pink-400 to-pink-600", bgColor: "bg-pink-50 hover:bg-pink-100", description: "Road cycling adventures", }, { id: "mtb", name: "Mountain Bike", icon: Mountain, color: "from-purple-400 to-purple-600", bgColor: "bg-purple-50 hover:bg-purple-100", description: "Off-road trails", }, { id: "trail_running", name: "Trail Running", icon: TreePine, color: "from-teal-400 to-teal-600", bgColor: "bg-teal-50 hover:bg-teal-100", description: "Nature trail runs", }, { id: "trekking", name: "Trekking", icon: Footprints, color: "from-orange-400 to-orange-600", bgColor: "bg-orange-50 hover:bg-orange-100", description: "Hiking adventures", }, { id: "running", name: "Running", icon: PersonStanding, color: "from-rose-400 to-rose-600", bgColor: "bg-rose-50 hover:bg-rose-100", description: "Urban running groups", }, ] export function SportSelector() { const router = useRouter() const handleSportClick = (sportId: string) => { router.push(`/events?sport=${sportId}`) } return (

{sports.map((sport) => { const Icon = sport.icon return ( handleSportClick(sport.id)} >

{sport.name}

{sport.description}

) })}

) } [V0_FILE]typescriptreact:file="app/events/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { EventsList } from "@/components/events-list" import { Button } from "@/components/ui/button" import { Plus, ArrowLeft } from "lucide-react" import Link from "next/link" export default async function EventsPage({ searchParams }: { searchParams: Promise<{ sport?: string }> }) { const supabase = await createClient() const params = await searchParams const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const sportType = params.sport || "all" // Fetch events based on sport filter let query = supabase .from("events") .select( ` *, creator:profiles!events_creator_id_fkey(id, full_name, display_name, is_verified, reputation_score), participants:event_participants(count) `, ) .eq("status", "open") .gte("event_date", new Date().toISOString().split("T")[0]) .order("event_date", { ascending: true }) if (sportType !== "all") { query = query.eq("sport_type", sportType) } const { data: events } = await query const sportNames: Record = { cycling: "Cycling", mtb: "Mountain Bike", trail_running: "Trail Running", trekking: "Trekking", running: "Running", all: "All Sports", } return (

{/* Header */}

{sportNames[sportType]}

{/* Main Content */}

) } [V0_FILE]typescriptreact:file="components/events-list.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Calendar, MapPin, Users, TrendingUp, Shield } from "lucide-react" import Link from "next/link" import { format } from "date-fns" type Event = { id: string title: string description: string sport_type: string difficulty_level: string meeting_point: string event_date: string event_time: string max_participants: number current_participants: number distance_km: number creator: { full_name: string display_name: string is_verified: boolean reputation_score: number } } const difficultyColors: Record = { beginner: "bg-green-100 text-green-700 border-green-200", intermediate: "bg-yellow-100 text-yellow-700 border-yellow-200", advanced: "bg-red-100 text-red-700 border-red-200", } const sportColors: Record = { cycling: "from-pink-400 to-pink-600", mtb: "from-purple-400 to-purple-600", trail_running: "from-teal-400 to-teal-600", trekking: "from-orange-400 to-orange-600", running: "from-rose-400 to-rose-600", } export function EventsList({ events }: { events: Event[] }) { if (events.length === 0) { return (

No events found. Be the first to create one!

) } return (

{events.map((event) => (

{event.title}

{event.difficulty_level} {event.creator.is_verified && ( Verified )}

{event.description}

{format(new Date(event.event_date), "MMM d, yyyy")} at {event.event_time}

{event.meeting_point}

{event.current_participants}/{event.max_participants || "∞"} participants

{event.distance_km && (

{event.distance_km} km

)}

Organized by {event.creator.display_name || event.creator.full_name}

))}

) } [V0_FILE]typescriptreact:file="components/join-event-button.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { createClient } from "@/lib/supabase/client" import { useRouter } from "next/navigation" import { useState } from "react" import { UserPlus, UserMinus } from "lucide-react" export function JoinEventButton({ eventId, isParticipating }: { eventId: string; isParticipating: boolean }) { const [loading, setLoading] = useState(false) const [participating, setParticipating] = useState(isParticipating) const router = useRouter() const handleJoinEvent = async () => { setLoading(true) const supabase = createClient() try { const { data: { user }, } = await supabase.auth.getUser() if (!user) { router.push("/auth/login") return } if (participating) { // Leave event const { error } = await supabase .from("event_participants") .delete() .eq("event_id", eventId) .eq("user_id", user.id) if (error) throw error // Update event participant count const { data: event } = await supabase.from("events").select("current_participants").eq("id", eventId).single() if (event) { await supabase .from("events") .update({ current_participants: Math.max(0, event.current_participants - 1) }) .eq("id", eventId) } setParticipating(false) } else { // Join event const { error } = await supabase.from("event_participants").insert({ event_id: eventId, user_id: user.id, status: "confirmed", }) if (error) throw error // Update event participant count const { data: event } = await supabase.from("events").select("current_participants").eq("id", eventId).single() if (event) { await supabase .from("events") .update({ current_participants: event.current_participants + 1 }) .eq("id", eventId) } setParticipating(true) } router.refresh() } catch (error) { console.error("[v0] Error joining/leaving event:", error) alert("Failed to update participation status. Please try again.") } finally { setLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="app/events/create/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { CreateEventForm } from "@/components/create-event-form" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" import Link from "next/link" export default async function CreateEventPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } return (

{/* Header */}

Create New Event

{/* Main Content */}

) } [V0_FILE]typescriptreact:file="components/create-event-form.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { createClient } from "@/lib/supabase/client" import { useRouter } from "next/navigation" import { useState } from "react" export function CreateEventForm({ userId }: { userId: string }) { const router = useRouter() const [loading, setLoading] = useState(false) const [formData, setFormData] = useState({ title: "", description: "", sport_type: "", difficulty_level: "", meeting_point: "", event_date: "", event_time: "", max_participants: "", distance_km: "", elevation_gain_m: "", estimated_duration_minutes: "", route_description: "", safety_notes: "", required_equipment: "", }) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) const supabase = createClient() try { const { data, error } = await supabase .from("events") .insert({ creator_id: userId, title: formData.title, description: formData.description, sport_type: formData.sport_type, difficulty_level: formData.difficulty_level, meeting_point: formData.meeting_point, event_date: formData.event_date, event_time: formData.event_time, max_participants: formData.max_participants ? Number.parseInt(formData.max_participants) : null, distance_km: formData.distance_km ? Number.parseFloat(formData.distance_km) : null, elevation_gain_m: formData.elevation_gain_m ? Number.parseInt(formData.elevation_gain_m) : null, estimated_duration_minutes: formData.estimated_duration_minutes ? Number.parseInt(formData.estimated_duration_minutes) : null, route_description: formData.route_description || null, safety_notes: formData.safety_notes || null, required_equipment: formData.required_equipment ? formData.required_equipment.split(",").map((item) => item.trim()) : null, status: "open", }) .select() .single() if (error) throw error // Add creator as first participant await supabase.from("event_participants").insert({ event_id: data.id, user_id: userId, status: "confirmed", }) // Update user's event count const { data: profile } = await supabase.from("profiles").select("total_events_created").eq("id", userId).single() if (profile) { await supabase .from("profiles") .update({ total_events_created: (profile.total_events_created || 0) + 1, reputation_score: (profile.total_events_created || 0) + 1 * 10, // 10 points per event created }) .eq("id", userId) } router.push(`/events/${data.id}`) } catch (error) { console.error("[v0] Error creating event:", error) alert("Failed to create event. Please try again.") } finally { setLoading(false) } } return ( Event Details

{/* Basic Information */}

Event Title * setFormData({ ...formData, title: e.target.value })} placeholder="Morning Trail Run at Cerro San Cristóbal" />

Description *

setFormData({ ...formData, description: e.target.value })}
                placeholder="Describe your event..."
                rows={4}
              />
            </div>

<div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="sport_type">Sport Type *</Label>
                <Select
                  value={formData.sport_type}
                  onValueChange={(value) => setFormData({ ...formData, sport_type: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select sport" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="cycling">Cycling</SelectItem>
                    <SelectItem value="mtb">Mountain Bike</SelectItem>
                    <SelectItem value="trail_running">Trail Running</SelectItem>
                    <SelectItem value="trekking">Trekking</SelectItem>
                    <SelectItem value="running">Running</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="difficulty_level">Difficulty Level *</Label>
                <Select
                  value={formData.difficulty_level}
                  onValueChange={(value) => setFormData({ ...formData, difficulty_level: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select difficulty" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="beginner">Beginner</SelectItem>
                    <SelectItem value="intermediate">Intermediate</SelectItem>
                    <SelectItem value="advanced">Advanced</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>

{/* Location & Time */}
          <div className="space-y-4 pt-4 border-t border-gray-100">
            <h3 className="font-semibold text-gray-800">Location & Time</h3>

<div>
              <Label htmlFor="meeting_point">Meeting Point *</Label>
              <Input
                id="meeting_point"
                required
                value={formData.meeting_point}
                onChange={(e) => setFormData({ ...formData, meeting_point: e.target.value })}
                placeholder="Plaza de Armas, Santiago"
              />
            </div>

<div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="event_date">Date *</Label>
                <Input
                  id="event_date"
                  type="date"
                  required
                  value={formData.event_date}
                  onChange={(e) => setFormData({ ...formData, event_date: e.target.value })}
                />
              </div>

<div>
                <Label htmlFor="event_time">Time *</Label>
                <Input
                  id="event_time"
                  type="time"
                  required
                  value={formData.event_time}
                  onChange={(e) => setFormData({ ...formData, event_time: e.target.value })}
                />
              </div>
            </div>
          </div>

{/* Event Details */}
          <div className="space-y-4 pt-4 border-t border-gray-100">
            <h3 className="font-semibold text-gray-800">Event Details</h3>

<div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="max_participants">Max Participants</Label>
                <Input
                  id="max_participants"
                  type="number"
                  value={formData.max_participants}
                  onChange={(e) => setFormData({ ...formData, max_participants: e.target.value })}
                  placeholder="Leave empty for unlimited"
                />
              </div>

<div>
                <Label htmlFor="distance_km">Distance (km)</Label>
                <Input
                  id="distance_km"
                  type="number"
                  step="0.1"
                  value={formData.distance_km}
                  onChange={(e) => setFormData({ ...formData, distance_km: e.target.value })}
                  placeholder="10.5"
                />
              </div>

<div>
                <Label htmlFor="elevation_gain_m">Elevation Gain (m)</Label>
                <Input
                  id="elevation_gain_m"
                  type="number"
                  value={formData.elevation_gain_m}
                  onChange={(e) => setFormData({ ...formData, elevation_gain_m: e.target.value })}
                  placeholder="250"
                />
              </div>

<div>
                <Label htmlFor="estimated_duration_minutes">Duration (minutes)</Label>
                <Input
                  id="estimated_duration_minutes"
                  type="number"
                  value={formData.estimated_duration_minutes}
                  onChange={(e) => setFormData({ ...formData, estimated_duration_minutes: e.target.value })}
                  placeholder="120"
                />
              </div>
            </div>

<div>
              <Label htmlFor="route_description">Route Description</Label>
              <Textarea
                id="route_description"
                value={formData.route_description}
                onChange={(e) => setFormData({ ...formData, route_description: e.target.value })}
                placeholder="Describe the route, terrain, and any notable landmarks..."
                rows={3}
              />
            </div>
          </div>

{/* Safety Information */}
          <div className="space-y-4 pt-4 border-t border-gray-100">
            <h3 className="font-semibold text-gray-800">Safety Information</h3>

<div>
              <Label htmlFor="safety_notes">Safety Notes</Label>
              <Textarea
                id="safety_notes"
                value={formData.safety_notes}
                onChange={(e) => setFormData({ ...formData, safety_notes: e.target.value })}
                placeholder="Any safety considerations participants should know..."
                rows={3}
              />
            </div>

<div>
              <Label htmlFor="required_equipment">Required Equipment (comma-separated)</Label>
              <Input
                id="required_equipment"
                value={formData.required_equipment}
                onChange={(e) => setFormData({ ...formData, required_equipment: e.target.value })}
                placeholder="Helmet, Water bottle, Sunscreen"
              />
            </div>
          </div>

<Button
            type="submit"
            disabled={loading}
            className="w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
          >
            {loading ? "Creating Event..." : "Create Event"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/groups/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { GroupsList } from "@/components/groups-list"
import { Button } from "@/components/ui/button"
import { Plus, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function GroupsPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Fetch all groups
  const { data: groups } = await supabase
    .from("groups")
    .select(
      `
      *,
      leader:profiles!groups_leader_id_fkey(id, full_name, display_name, is_verified, reputation_score)
    `,
    )
    .order("created_at", { ascending: false })

{/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        <GroupsList groups={groups || []} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/groups-list.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Users, Shield, Lock } from "lucide-react"
import Link from "next/link"

type Group = {
  id: string
  name: string
  description: string
  sport_type: string
  is_private: boolean
  max_members: number
  current_members: number
  leader: {
    full_name: string
    display_name: string
    is_verified: boolean
    reputation_score: number
  }
}

const sportColors: Record<string, string> = {
  cycling: "from-pink-400 to-pink-600",
  mtb: "from-purple-400 to-purple-600",
  trail_running: "from-teal-400 to-teal-600",
  trekking: "from-orange-400 to-orange-600",
  running: "from-rose-400 to-rose-600",
}

export function GroupsList({ groups }: { groups: Group[] }) {
  if (groups.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-lg text-gray-600">No groups found. Be the first to create one!</p>
      </div>
    )
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {groups.map((group) => (
        <Link key={group.id} href={`/groups/${group.id}`}>
          <Card className="hover:shadow-lg transition-all hover:scale-[1.02] cursor-pointer border-0 bg-white/80 backdrop-blur h-full">
            <CardHeader className="space-y-3">
              <div className="flex items-start justify-between gap-2">
                <h3 className="font-semibold text-lg text-gray-800 line-clamp-2">{group.name}</h3>
                <div
                  className={`w-10 h-10 rounded-full bg-gradient-to-r ${sportColors[group.sport_type]} flex-shrink-0`}
                />
              </div>
              <div className="flex items-center gap-2 flex-wrap">
                <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                  {group.sport_type.replace("_", " ")}
                </Badge>
                {group.is_private && (
                  <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-200">
                    <Lock className="w-3 h-3 mr-1" />
                    Private
                  </Badge>
                )}
                {group.leader.is_verified && (
                  <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                    <Shield className="w-3 h-3 mr-1" />
                    Verified
                  </Badge>
                )}
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <p className="text-sm text-gray-600 line-clamp-3">{group.description}</p>

<div className="flex items-center gap-2 text-sm text-gray-600">
                <Users className="w-4 h-4" />
                <span>
                  {group.current_members}/{group.max_members || "∞"} members
                </span>
              </div>

<div className="pt-2 border-t border-gray-100">
                <p className="text-xs text-gray-500">Led by {group.leader.display_name || group.leader.full_name}</p>
              </div>
            </CardContent>
          </Card>
        </Link>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/groups/[id]/page.tsx" isMerged="true"
import { redirect, notFound } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Users, Shield, Lock, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { JoinGroupButton } from "@/components/join-group-button"

export default async function GroupDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const supabase = await createClient()
  const { id } = await params

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Fetch group details
  const { data: group, error } = await supabase
    .from("groups")
    .select(
      `
      *,
      leader:profiles!groups_leader_id_fkey(id, full_name, display_name, is_verified, reputation_score, profile_image_url)
    `,
    )
    .eq("id", id)
    .single()

if (error || !group) {
    notFound()
  }

// Check if user is already a member
  const { data: membership } = await supabase
    .from("group_members")
    .select("*")
    .eq("group_id", id)
    .eq("user_id", user.id)
    .single()

const isMember = !!membership
  const isLeader = group.leader_id === user.id

// Fetch members
  const { data: members } = await supabase
    .from("group_members")
    .select(
      `
      *,
      user:profiles!group_members_user_id_fkey(id, full_name, display_name, is_verified, reputation_score, profile_image_url)
    `,
    )
    .eq("group_id", id)

// Fetch group events
  const { data: groupEvents } = await supabase
    .from("events")
    .select("*")
    .eq("creator_id", group.leader_id)
    .eq("sport_type", group.sport_type)
    .gte("event_date", new Date().toISOString().split("T")[0])
    .order("event_date", { ascending: true })
    .limit(5)

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="space-y-6">
          {/* Group Header Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader className="space-y-4">
              <div className="flex items-start justify-between gap-4">
                <div className="flex-1">
                  <h2 className="text-3xl font-bold text-gray-800 mb-3">{group.name}</h2>
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                      {group.sport_type.replace("_", " ")}
                    </Badge>
                    {group.is_private && (
                      <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-200">
                        <Lock className="w-3 h-3 mr-1" />
                        Private Group
                      </Badge>
                    )}
                    {group.leader.is_verified && (
                      <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                        <Shield className="w-3 h-3 mr-1" />
                        Verified Leader
                      </Badge>
                    )}
                  </div>
                </div>
              </div>

<p className="text-gray-700 leading-relaxed">{group.description}</p>
            </CardHeader>

<CardContent className="space-y-6">
              {/* Group Stats */}
              <div className="flex items-center gap-6">
                <div className="flex items-center gap-2">
                  <Users className="w-5 h-5 text-purple-600" />
                  <span className="font-semibold text-gray-800">
                    {group.current_members}/{group.max_members || "∞"} members
                  </span>
                </div>
              </div>

{/* Join Button */}
              {!isLeader && <JoinGroupButton groupId={group.id} isMember={isMember} />}

{isLeader && (
                <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                  You are the leader of this group
                </Badge>
              )}
            </CardContent>
          </Card>

{/* Leader Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <CardTitle>Group Leader</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center text-white font-semibold text-lg">
                  {(group.leader.display_name || group.leader.full_name || "U")[0].toUpperCase()}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <p className="font-semibold text-gray-800">{group.leader.display_name || group.leader.full_name}</p>
                    {group.leader.is_verified && <Shield className="w-4 h-4 text-blue-600" />}
                  </div>
                  <p className="text-sm text-gray-600">Reputation: {group.leader.reputation_score} points</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Members Card */}
          {members && members.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Members ({members.length})</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {members.map((member) => (
                    <div key={member.id} className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-r from-teal-400 to-teal-600 flex items-center justify-center text-white font-semibold">
                        {(member.user.display_name || member.user.full_name || "U")[0].toUpperCase()}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <p className="font-medium text-gray-800">
                            {member.user.display_name || member.user.full_name}
                          </p>
                          {member.user.is_verified && <Shield className="w-3 h-3 text-blue-600" />}
                          {member.role === "leader" && (
                            <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200 text-xs">
                              Leader
                            </Badge>
                          )}
                        </div>
                        <p className="text-xs text-gray-500">Reputation: {member.user.reputation_score} points</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

{/* Upcoming Events */}
          {groupEvents && groupEvents.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Upcoming Events</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {groupEvents.map((event) => (
                    <Link
                      key={event.id}
                      href={`/events/${event.id}`}
                      className="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                    >
                      <p className="font-medium text-gray-800">{event.title}</p>
                      <p className="text-sm text-gray-600">
                        {new Date(event.event_date).toLocaleDateString()} at {event.event_time}
                      </p>
                    </Link>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/join-group-button.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { UserPlus, UserMinus } from "lucide-react"

export function JoinGroupButton({ groupId, isMember }: { groupId: string; isMember: boolean }) {
  const [loading, setLoading] = useState(false)
  const [member, setMember] = useState(isMember)
  const router = useRouter()

const handleJoinGroup = async () => {
    setLoading(true)
    const supabase = createClient()

try {
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        router.push("/auth/login")
        return
      }

if (member) {
        // Leave group
        const { error } = await supabase.from("group_members").delete().eq("group_id", groupId).eq("user_id", user.id)

if (error) throw error

// Update group member count
        const { data: group } = await supabase.from("groups").select("current_members").eq("id", groupId).single()

if (group) {
          await supabase
            .from("groups")
            .update({ current_members: Math.max(0, group.current_members - 1) })
            .eq("id", groupId)
        }

setMember(false)
      } else {
        // Join group
        const { error } = await supabase.from("group_members").insert({
          group_id: groupId,
          user_id: user.id,
          role: "member",
        })

if (error) throw error

// Update group member count
        const { data: group } = await supabase.from("groups").select("current_members").eq("id", groupId).single()

if (group) {
          await supabase
            .from("groups")
            .update({ current_members: group.current_members + 1 })
            .eq("id", groupId)
        }

setMember(true)
      }

router.refresh()
    } catch (error) {
      console.error("[v0] Error joining/leaving group:", error)
      alert("Failed to update membership status. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <Button
      onClick={handleJoinGroup}
      disabled={loading}
      className={
        member
          ? "w-full h-12 bg-gray-200 hover:bg-gray-300 text-gray-700"
          : "w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
      }
    >
      {loading ? (
        "Processing..."
      ) : member ? (
        <>
          <UserMinus className="w-4 h-4 mr-2" />
          Leave Group
        </>
      ) : (
        <>
          <UserPlus className="w-4 h-4 mr-2" />
          Join Group
        </>
      )}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/groups/create/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { CreateGroupForm } from "@/components/create-group-form"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function CreateGroupPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-2xl">
        <CreateGroupForm userId={user.id} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/create-group-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { useState } from "react"

export function CreateGroupForm({ userId }: { userId: string }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    sport_type: "",
    is_private: false,
    max_members: "",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

const supabase = createClient()

try {
      const { data, error } = await supabase
        .from("groups")
        .insert({
          leader_id: userId,
          name: formData.name,
          description: formData.description,
          sport_type: formData.sport_type,
          is_private: formData.is_private,
          max_members: formData.max_members ? Number.parseInt(formData.max_members) : null,
        })
        .select()
        .single()

if (error) throw error

// Add leader as first member
      await supabase.from("group_members").insert({
        group_id: data.id,
        user_id: userId,
        role: "leader",
      })

router.push(`/groups/${data.id}`)
    } catch (error) {
      console.error("[v0] Error creating group:", error)
      alert("Failed to create group. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
      <CardHeader>
        <CardTitle>Group Details</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <Label htmlFor="name">Group Name *</Label>
            <Input
              id="name"
              required
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="Santiago Women Cyclists"
            />
          </div>

<div>
            <Label htmlFor="description">Description *</Label>
            <Textarea
              id="description"
              required
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              placeholder="Describe your group and what makes it special..."
              rows={4}
            />
          </div>

<div>
            <Label htmlFor="sport_type">Sport Type *</Label>
            <Select
              value={formData.sport_type}
              onValueChange={(value) => setFormData({ ...formData, sport_type: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select sport" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="cycling">Cycling</SelectItem>
                <SelectItem value="mtb">Mountain Bike</SelectItem>
                <SelectItem value="trail_running">Trail Running</SelectItem>
                <SelectItem value="trekking">Trekking</SelectItem>
                <SelectItem value="running">Running</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div>
            <Label htmlFor="max_members">Max Members</Label>
            <Input
              id="max_members"
              type="number"
              value={formData.max_members}
              onChange={(e) => setFormData({ ...formData, max_members: e.target.value })}
              placeholder="Leave empty for unlimited"
            />
          </div>

<div className="flex items-center space-x-2">
            <Checkbox
              id="is_private"
              checked={formData.is_private}
              onCheckedChange={(checked) => setFormData({ ...formData, is_private: checked as boolean })}
            />
            <Label htmlFor="is_private" className="text-sm font-normal cursor-pointer">
              Make this a private group (members need approval to join)
            </Label>
          </div>

<Button
            type="submit"
            disabled={loading}
            className="w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
          >
            {loading ? "Creating Group..." : "Create Group"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Shield, Award, Calendar, Users, ArrowLeft, Edit } from "lucide-react"
import Link from "next/link"

export default async function ProfilePage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get user profile
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

// Get user's events
  const { data: createdEvents } = await supabase
    .from("events")
    .select("*")
    .eq("creator_id", user.id)
    .order("event_date", { ascending: false })
    .limit(5)

const { data: joinedEvents } = await supabase
    .from("event_participants")
    .select(
      `
      *,
      event:events(*)
    `,
    )
    .eq("user_id", user.id)
    .order("joined_at", { ascending: false })
    .limit(5)

// Get user's groups
  const { data: groups } = await supabase
    .from("group_members")
    .select(
      `
      *,
      group:groups(*)
    `,
    )
    .eq("user_id", user.id)

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="space-y-6">
          {/* Profile Header Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardContent className="pt-6">
              <div className="flex flex-col md:flex-row items-center md:items-start gap-6">
                <div className="w-24 h-24 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center text-white font-bold text-3xl">
                  {(profile?.display_name || profile?.full_name || user.email || "U")[0].toUpperCase()}
                </div>
                <div className="flex-1 text-center md:text-left space-y-3">
                  <div>
                    <div className="flex items-center justify-center md:justify-start gap-2 mb-2">
                      <h2 className="text-2xl font-bold text-gray-800">
                        {profile?.display_name || profile?.full_name || "User"}
                      </h2>
                      {profile?.is_verified && (
                        <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                          <Shield className="w-3 h-3 mr-1" />
                          Verified
                        </Badge>
                      )}
                    </div>
                    <p className="text-gray-600">{user.email}</p>
                    {profile?.city && (
                      <p className="text-sm text-gray-500">
                        {profile.city}, {profile.country}
                      </p>
                    )}
                  </div>
                  {profile?.bio && <p className="text-gray-700 leading-relaxed">{profile.bio}</p>}
                </div>
              </div>

{/* Stats Grid */}
              <div className="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-gray-100">
                <div className="text-center">
                  <div className="flex items-center justify-center gap-1 mb-1">
                    <Calendar className="w-4 h-4 text-purple-600" />
                    <span className="text-2xl font-bold text-purple-600">{profile?.total_events_attended || 0}</span>
                  </div>
                  <p className="text-sm text-gray-600">Events Joined</p>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center gap-1 mb-1">
                    <Users className="w-4 h-4 text-pink-600" />
                    <span className="text-2xl font-bold text-pink-600">{profile?.total_events_created || 0}</span>
                  </div>
                  <p className="text-sm text-gray-600">Events Created</p>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center gap-1 mb-1">
                    <Award className="w-4 h-4 text-teal-600" />
                    <span className="text-2xl font-bold text-teal-600">{profile?.reputation_score || 0}</span>
                  </div>
                  <p className="text-sm text-gray-600">Reputation</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Verification Status Card */}
          {!profile?.is_verified && (
            <Card className="border-0 bg-gradient-to-r from-blue-50 to-purple-50 shadow-lg">
              <CardContent className="pt-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                    <Shield className="w-6 h-6 text-blue-600" />
                  </div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-gray-800 mb-2">Get Verified</h3>
                    <p className="text-sm text-gray-600 mb-4">
                      Verify your identity to build trust with the community and unlock additional features.
                    </p>
                    <Button
                      className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
                      asChild
                    >
                      <Link href="/profile/verify">Start Verification</Link>
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

{/* Preferred Sports */}
          {profile?.preferred_sports && profile.preferred_sports.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Preferred Sports</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {profile.preferred_sports.map((sport) => (
                    <Badge key={sport} variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                      {sport.replace("_", " ")}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

{/* Groups */}
          {groups && groups.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>My Groups ({groups.length})</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {groups.map((membership) => (
                    <Link
                      key={membership.id}
                      href={`/groups/${membership.group.id}`}
                      className="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                    >
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-medium text-gray-800">{membership.group.name}</p>
                          <p className="text-sm text-gray-600">{membership.group.sport_type.replace("_", " ")}</p>
                        </div>
                        {membership.role === "leader" && (
                          <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                            Leader
                          </Badge>
                        )}
                      </div>
                    </Link>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

{/* Created Events */}
          {createdEvents && createdEvents.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Events I Created</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {createdEvents.map((event) => (
                    <Link
                      key={event.id}
                      href={`/events/${event.id}`}
                      className="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                    >
                      <p className="font-medium text-gray-800">{event.title}</p>
                      <p className="text-sm text-gray-600">
                        {new Date(event.event_date).toLocaleDateString()} at {event.event_time}
                      </p>
                    </Link>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

{/* Joined Events */}
          {joinedEvents && joinedEvents.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Events I Joined</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {joinedEvents.map((participation) => (
                    <Link
                      key={participation.id}
                      href={`/events/${participation.event.id}`}
                      className="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                    >
                      <p className="font-medium text-gray-800">{participation.event.title}</p>
                      <p className="text-sm text-gray-600">
                        {new Date(participation.event.event_date).toLocaleDateString()} at{" "}
                        {participation.event.event_time}
                      </p>
                    </Link>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/edit/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { EditProfileForm } from "@/components/edit-profile-form"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function EditProfilePage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get user profile
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-2xl">
        <EditProfileForm profile={profile} userId={user.id} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/edit-profile-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { Checkbox } from "@/components/ui/checkbox"

type Profile = {
  full_name: string | null
  display_name: string | null
  bio: string | null
  phone: string | null
  city: string | null
  country: string | null
  preferred_sports: string[] | null
}

const sportOptions = [
  { id: "cycling", label: "Cycling" },
  { id: "mtb", label: "Mountain Bike" },
  { id: "trail_running", label: "Trail Running" },
  { id: "trekking", label: "Trekking" },
  { id: "running", label: "Running" },
]

export function EditProfileForm({ profile, userId }: { profile: Profile | null; userId: string }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    full_name: profile?.full_name || "",
    display_name: profile?.display_name || "",
    bio: profile?.bio || "",
    phone: profile?.phone || "",
    city: profile?.city || "",
    country: profile?.country || "Chile",
    preferred_sports: profile?.preferred_sports || [],
  })

const handleSportToggle = (sportId: string) => {
    setFormData((prev) => ({
      ...prev,
      preferred_sports: prev.preferred_sports.includes(sportId)
        ? prev.preferred_sports.filter((s) => s !== sportId)
        : [...prev.preferred_sports, sportId],
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

const supabase = createClient()

try {
      const { error } = await supabase
        .from("profiles")
        .update({
          full_name: formData.full_name || null,
          display_name: formData.display_name || null,
          bio: formData.bio || null,
          phone: formData.phone || null,
          city: formData.city || null,
          country: formData.country || null,
          preferred_sports: formData.preferred_sports.length > 0 ? formData.preferred_sports : null,
        })
        .eq("id", userId)

if (error) throw error

router.push("/profile")
    } catch (error) {
      console.error("[v0] Error updating profile:", error)
      alert("Failed to update profile. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
      <CardHeader>
        <CardTitle>Profile Information</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="full_name">Full Name</Label>
              <Input
                id="full_name"
                value={formData.full_name}
                onChange={(e) => setFormData({ ...formData, full_name: e.target.value })}
                placeholder="Maria Silva"
              />
            </div>

<div>
              <Label htmlFor="display_name">Display Name</Label>
              <Input
                id="display_name"
                value={formData.display_name}
                onChange={(e) => setFormData({ ...formData, display_name: e.target.value })}
                placeholder="Maria S."
              />
            </div>
          </div>

<div>
            <Label htmlFor="bio">Bio</Label>
            <Textarea
              id="bio"
              value={formData.bio}
              onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
              placeholder="Tell us about yourself and your sports interests..."
              rows={4}
            />
          </div>

<div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="phone">Phone</Label>
              <Input
                id="phone"
                type="tel"
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                placeholder="+56 9 1234 5678"
              />
            </div>

<div>
              <Label htmlFor="city">City</Label>
              <Input
                id="city"
                value={formData.city}
                onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                placeholder="Santiago"
              />
            </div>
          </div>

<div>
            <Label htmlFor="country">Country</Label>
            <Input
              id="country"
              value={formData.country}
              onChange={(e) => setFormData({ ...formData, country: e.target.value })}
              placeholder="Chile"
            />
          </div>

<div className="space-y-3">
            <Label>Preferred Sports</Label>
            <div className="space-y-2">
              {sportOptions.map((sport) => (
                <div key={sport.id} className="flex items-center space-x-2">
                  <Checkbox
                    id={sport.id}
                    checked={formData.preferred_sports.includes(sport.id)}
                    onCheckedChange={() => handleSportToggle(sport.id)}
                  />
                  <Label htmlFor={sport.id} className="text-sm font-normal cursor-pointer">
                    {sport.label}
                  </Label>
                </div>
              ))}
            </div>
          </div>

<Button
            type="submit"
            disabled={loading}
            className="w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
          >
            {loading ? "Saving..." : "Save Changes"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/profile/verify/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Shield, CheckCircle, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function VerifyProfilePage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get user profile
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (profile?.is_verified) {
    redirect("/profile")
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-3xl">
        <div className="space-y-6">
          {/* Info Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader className="text-center">
              <div className="mx-auto w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mb-4">
                <Shield className="w-8 h-8 text-white" />
              </div>
              <CardTitle className="text-2xl">Get Verified</CardTitle>
              <CardDescription className="text-base">
                Build trust with the SafeMove community by verifying your identity
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <h3 className="font-semibold text-gray-800">Why verify your identity?</h3>
                <ul className="space-y-3">
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">Build trust with other members of the community</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">Get a verified badge on your profile</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">Increase your reputation score</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">Access exclusive verified-only events</span>
                  </li>
                </ul>
              </div>

<div className="pt-4 border-t border-gray-100">
                <h3 className="font-semibold text-gray-800 mb-3">Verification Methods</h3>
                <p className="text-sm text-gray-600 mb-4">
                  Choose one of the following methods to verify your identity:
                </p>
                <div className="space-y-3">
                  <Card className="bg-gray-50 border-gray-200">
                    <CardContent className="p-4">
                      <h4 className="font-medium text-gray-800 mb-1">Government ID</h4>
                      <p className="text-sm text-gray-600 mb-3">
                        Upload a photo of your government-issued ID (passport, driver's license, or national ID)
                      </p>
                      <Button variant="outline" className="w-full bg-transparent" disabled>
                        Coming Soon
                      </Button>
                    </CardContent>
                  </Card>

<Card className="bg-gray-50 border-gray-200">
                    <CardContent className="p-4">
                      <h4 className="font-medium text-gray-800 mb-1">Social Media Verification</h4>
                      <p className="text-sm text-gray-600 mb-3">
                        Connect your verified social media account (Instagram, Facebook, or LinkedIn)
                      </p>
                      <Button variant="outline" className="w-full bg-transparent" disabled>
                        Coming Soon
                      </Button>
                    </CardContent>
                  </Card>

<Card className="bg-gray-50 border-gray-200">
                    <CardContent className="p-4">
                      <h4 className="font-medium text-gray-800 mb-1">Video Verification</h4>
                      <p className="text-sm text-gray-600 mb-3">
                        Complete a quick video verification call with our team
                      </p>
                      <Button variant="outline" className="w-full bg-transparent" disabled>
                        Coming Soon
                      </Button>
                    </CardContent>
                  </Card>
                </div>
              </div>

<div className="pt-4 border-t border-gray-100">
                <p className="text-xs text-gray-500 text-center">
                  Your personal information is encrypted and stored securely. We never share your verification details
                  with other users.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/notifications/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Bell, Calendar, Users, AlertTriangle } from "lucide-react"
import Link from "next/link"

export default async function NotificationsPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Fetch notifications
  const { data: notifications } = await supabase
    .from("notifications")
    .select("*")
    .eq("user_id", user.id)
    .order("created_at", { ascending: false })

const getIcon = (type: string) => {
    switch (type) {
      case "event_invite":
        return <Calendar className="w-5 h-5 text-purple-600" />
      case "event_reminder":
        return <Bell className="w-5 h-5 text-pink-600" />
      case "group_invite":
        return <Users className="w-5 h-5 text-teal-600" />
      case "safety_alert":
        return <AlertTriangle className="w-5 h-5 text-orange-600" />
      default:
        return <Bell className="w-5 h-5 text-gray-600" />
    }
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-3xl">
        {!notifications || notifications.length === 0 ? (
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardContent className="py-12 text-center">
              <Bell className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <p className="text-lg text-gray-600">No notifications yet</p>
              <p className="text-sm text-gray-500 mt-2">
                You'll see notifications here when you receive event invites, reminders, and updates
              </p>
            </CardContent>
          </Card>
        ) : (
          <div className="space-y-3">
            {notifications.map((notification) => (
              <Card
                key={notification.id}
                className={`border-0 shadow-sm transition-all hover:shadow-md ${
                  notification.is_read ? "bg-white/60" : "bg-white/90"
                } backdrop-blur`}
              >
                <CardContent className="p-4">
                  <div className="flex items-start gap-4">
                    <div className="flex-shrink-0">{getIcon(notification.type)}</div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-2 mb-1">
                        <h3 className="font-semibold text-gray-800">{notification.title}</h3>
                        {!notification.is_read && (
                          <Badge
                            variant="outline"
                            className="bg-purple-50 text-purple-700 border-purple-200 flex-shrink-0"
                          >
                            New
                          </Badge>
                        )}
                      </div>
                      <p className="text-sm text-gray-600 mb-2">{notification.message}</p>
                      <p className="text-xs text-gray-500">
                        {new Date(notification.created_at).toLocaleDateString()} at{" "}
                        {new Date(notification.created_at).toLocaleTimeString()}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/event-map.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

type EventMapProps = {
  meetingPoint: string
  lat?: number
  lng?: number
}

export function EventMap({ meetingPoint, lat, lng }: EventMapProps) {
  const mapRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    // In a real implementation, this would use Mapbox or Google Maps
    // For now, we'll show a placeholder with the meeting point
    if (mapRef.current) {
      // Map initialization would go here
    }
  }, [lat, lng])

return (
    <div className="space-y-3">
      <div
        ref={mapRef}
        className="w-full h-64 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg flex items-center justify-center relative overflow-hidden"
      >
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2UwZTBlMCIgb3BhY2l0eT0iMC41IiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=')] opacity-30" />
        <div className="relative z-10 text-center p-6">
          <div className="w-12 h-12 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-3">
            <svg
              className="w-6 h-6 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
              />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <p className="text-sm font-medium text-gray-700">Meeting Point</p>
          <p className="text-xs text-gray-500 mt-1">{meetingPoint}</p>
          <p className="text-xs text-gray-400 mt-2">Map integration coming soon</p>
        </div>
      </div>
      <a
        href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(meetingPoint)}`}
        target="_blank"
        rel="noopener noreferrer"
        className="block text-center text-sm text-purple-600 hover:text-purple-700 underline"
      >
        Open in Google Maps
      </a>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/safety/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Shield, AlertTriangle, Phone, Users, MapPin, CheckCircle } from "lucide-react"
import Link from "next/link"

export default async function SafetyPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="space-y-6">
          {/* Emergency Contact Card */}
          <Card className="border-0 bg-gradient-to-r from-red-50 to-orange-50 shadow-lg">
            <CardContent className="pt-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                  <Phone className="w-6 h-6 text-red-600" />
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold text-gray-800 mb-2">Emergency Contacts</h3>
                  <div className="space-y-2 text-sm">
                    <p className="text-gray-700">
                      <strong>Emergency Services (Chile):</strong> 133 (Police), 131 (Ambulance), 132 (Fire)
                    </p>
                    <p className="text-gray-700">
                      <strong>SafeMove Support:</strong> +56 9 XXXX XXXX (24/7)
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Safety Tips */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <div className="flex items-center gap-2">
                <Shield className="w-6 h-6 text-purple-600" />
                <CardTitle>Safety Tips for Group Activities</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-3">
                <div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Always inform someone</h4>
                    <p className="text-sm text-gray-600">
                      Let a friend or family member know where you're going and when you expect to return
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Meet in public places</h4>
                    <p className="text-sm text-gray-600">
                      Always choose well-known, public meeting points for the start of your activities
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Check participant profiles</h4>
                    <p className="text-sm text-gray-600">
                      Review the profiles and reputation scores of other participants before joining
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Bring essential equipment</h4>
                    <p className="text-sm text-gray-600">
                      Always carry water, phone, ID, and any sport-specific safety gear
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Stay with the group</h4>
                    <p className="text-sm text-gray-600">
                      Don't separate from the group, especially in unfamiliar areas
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Trust your instincts</h4>
                    <p className="text-sm text-gray-600">
                      If something doesn't feel right, it's okay to leave or not participate
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Verification Importance */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <div className="flex items-center gap-2">
                <Users className="w-6 h-6 text-teal-600" />
                <CardTitle>Why Verification Matters</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <p className="text-gray-700">
                SafeMove uses identity verification to create a trusted community. Verified members have completed one
                of our verification processes, which helps ensure everyone's safety.
              </p>
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <p className="text-sm text-blue-800">
                  <strong>Look for the verified badge</strong> when joining events. Verified members have proven their
                  identity and are more trustworthy.
                </p>
              </div>
            </CardContent>
          </Card>

{/* Route Safety */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <div className="flex items-center gap-2">
                <MapPin className="w-6 h-6 text-orange-600" />
                <CardTitle>Route Safety Checklist</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <ul className="space-y-2 text-sm text-gray-700">
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Review the route description and difficulty level before joining</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Check weather conditions for the day of the event</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Ensure you have the required equipment listed by the organizer</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Know your physical limits and choose appropriate difficulty levels</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Carry a fully charged phone with emergency contacts saved</span>
                </li>
              </ul>
            </CardContent>
          </Card>

{/* Report Issues */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <div className="flex items-center gap-2">
                <AlertTriangle className="w-6 h-6 text-red-600" />
                <CardTitle>Report Safety Concerns</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <p className="text-gray-700">
                If you experience or witness any safety concerns, inappropriate behavior, or suspicious activity, please
                report it immediately.
              </p>
              <Button className="w-full bg-gradient-to-r from-red-500 to-orange-600 hover:from-red-600 hover:to-orange-700">
                Report an Issue
              </Button>
              <p className="text-xs text-gray-500 text-center">
                All reports are confidential and reviewed by our safety team
              </p>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/events/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { redirect, notFound } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Calendar, MapPin, Users, TrendingUp, Clock, Shield, AlertTriangle, ArrowLeft, Mountain } from "lucide-react"
import Link from "next/link"
import { format } from "date-fns"
import { JoinEventButton } from "@/components/join-event-button"
import { EventMap } from "@/components/event-map"

export default async function EventDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const supabase = await createClient()
  const { id } = await params

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Fetch event details
  const { data: event, error } = await supabase
    .from("events")
    .select(
      `
      *,
      creator:profiles!events_creator_id_fkey(id, full_name, display_name, is_verified, reputation_score, profile_image_url)
    `,
    )
    .eq("id", id)
    .single()

if (error || !event) {
    notFound()
  }

// Check if user is already participating
  const { data: participation } = await supabase
    .from("event_participants")
    .select("*")
    .eq("event_id", id)
    .eq("user_id", user.id)
    .single()

const isParticipating = !!participation
  const isCreator = event.creator_id === user.id

// Fetch participants
  const { data: participants } = await supabase
    .from("event_participants")
    .select(
      `
      *,
      user:profiles!event_participants_user_id_fkey(id, full_name, display_name, is_verified, reputation_score, profile_image_url)
    `,
    )
    .eq("event_id", id)

const difficultyColors: Record<string, string> = {
    beginner: "bg-green-100 text-green-700 border-green-200",
    intermediate: "bg-yellow-100 text-yellow-700 border-yellow-200",
    advanced: "bg-red-100 text-red-700 border-red-200",
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="space-y-6">
          {/* Event Header Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader className="space-y-4">
              <div className="flex items-start justify-between gap-4">
                <div className="flex-1">
                  <h2 className="text-3xl font-bold text-gray-800 mb-3">{event.title}</h2>
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge variant="outline" className={difficultyColors[event.difficulty_level]}>
                      {event.difficulty_level}
                    </Badge>
                    <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                      {event.sport_type.replace("_", " ")}
                    </Badge>
                    {event.creator.is_verified && (
                      <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                        <Shield className="w-3 h-3 mr-1" />
                        Verified Host
                      </Badge>
                    )}
                  </div>
                </div>
              </div>

<p className="text-gray-700 leading-relaxed">{event.description}</p>
            </CardHeader>

<CardContent className="space-y-6">
              {/* Event Details Grid */}
              <div className="grid md:grid-cols-2 gap-4">
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0">
                    <Calendar className="w-5 h-5 text-pink-600" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">Date & Time</p>
                    <p className="font-semibold text-gray-800">
                      {format(new Date(event.event_date), "EEEE, MMMM d, yyyy")}
                    </p>
                    <p className="text-sm text-gray-600">{event.event_time}</p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
                    <MapPin className="w-5 h-5 text-purple-600" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">Meeting Point</p>
                    <p className="font-semibold text-gray-800">{event.meeting_point}</p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0">
                    <Users className="w-5 h-5 text-teal-600" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">Participants</p>
                    <p className="font-semibold text-gray-800">
                      {event.current_participants}/{event.max_participants || "Unlimited"}
                    </p>
                  </div>
                </div>

{event.distance_km && (
                  <div className="flex items-start gap-3">
                    <div className="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0">
                      <TrendingUp className="w-5 h-5 text-orange-600" />
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Distance</p>
                      <p className="font-semibold text-gray-800">{event.distance_km} km</p>
                    </div>
                  </div>
                )}

{event.estimated_duration_minutes && (
                  <div className="flex items-start gap-3">
                    <div className="w-10 h-10 rounded-full bg-rose-100 flex items-center justify-center flex-shrink-0">
                      <Clock className="w-5 h-5 text-rose-600" />
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Duration</p>
                      <p className="font-semibold text-gray-800">
                        {Math.floor(event.estimated_duration_minutes / 60)}h {event.estimated_duration_minutes % 60}m
                      </p>
                    </div>
                  </div>
                )}

{event.elevation_gain_m && (
                  <div className="flex items-start gap-3">
                    <div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
                      <Mountain className="w-5 h-5 text-indigo-600" />
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Elevation Gain</p>
                      <p className="font-semibold text-gray-800">{event.elevation_gain_m}m</p>
                    </div>
                  </div>
                )}
              </div>

<div className="pt-4 border-t border-gray-100">
                <h3 className="font-semibold text-gray-800 mb-3">Location</h3>
                <EventMap
                  meetingPoint={event.meeting_point}
                  lat={event.meeting_point_lat}
                  lng={event.meeting_point_lng}
                />
              </div>

{/* Route Description */}
              {event.route_description && (
                <div className="pt-4 border-t border-gray-100">
                  <h3 className="font-semibold text-gray-800 mb-2">Route Description</h3>
                  <p className="text-gray-600 leading-relaxed">{event.route_description}</p>
                </div>
              )}

{/* Safety Information */}
              {(event.safety_notes || event.required_equipment) && (
                <div className="pt-4 border-t border-gray-100">
                  <div className="flex items-center gap-2 mb-3">
                    <AlertTriangle className="w-5 h-5 text-orange-600" />
                    <h3 className="font-semibold text-gray-800">Safety Information</h3>
                  </div>
                  {event.safety_notes && <p className="text-gray-600 mb-2">{event.safety_notes}</p>}
                  {event.required_equipment && event.required_equipment.length > 0 && (
                    <div>
                      <p className="text-sm font-medium text-gray-700 mb-1">Required Equipment:</p>
                      <ul className="list-disc list-inside text-sm text-gray-600 space-y-1">
                        {event.required_equipment.map((item, index) => (
                          <li key={index}>{item}</li>
                        ))}
                      </ul>
                    </div>
                  )}
                  <div className="mt-3">
                    <Link
                      href="/safety"
                      className="text-sm text-purple-600 hover:text-purple-700 underline inline-flex items-center gap-1"
                    >
                      <Shield className="w-4 h-4" />
                      View Safety Guidelines
                    </Link>
                  </div>
                </div>
              )}

{/* Join Button */}
              {!isCreator && (
                <div className="pt-4">
                  <JoinEventButton eventId={event.id} isParticipating={isParticipating} />
                </div>
              )}

{isCreator && (
                <div className="pt-4">
                  <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                    You are the organizer of this event
                  </Badge>
                </div>
              )}
            </CardContent>
          </Card>

{/* Organizer Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <CardTitle>Organized by</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center text-white font-semibold text-lg">
                  {(event.creator.display_name || event.creator.full_name || "U")[0].toUpperCase()}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <p className="font-semibold text-gray-800">
                      {event.creator.display_name || event.creator.full_name}
                    </p>
                    {event.creator.is_verified && <Shield className="w-4 h-4 text-blue-600" />}
                  </div>
                  <p className="text-sm text-gray-600">Reputation: {event.creator.reputation_score} points</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Participants Card */}
          {participants && participants.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Participants ({participants.length})</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {participants.map((participant) => (
                    <div key={participant.id} className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-r from-teal-400 to-teal-600 flex items-center justify-center text-white font-semibold">
                        {(participant.user.display_name || participant.user.full_name || "U")[0].toUpperCase()}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <p className="font-medium text-gray-800">
                            {participant.user.display_name || participant.user.full_name}
                          </p>
                          {participant.user.is_verified && <Shield className="w-3 h-3 text-blue-600" />}
                        </div>
                        <p className="text-xs text-gray-500">Reputation: {participant.user.reputation_score} points</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/home/page.tsx" isEdit="true" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { SportSelector } from "@/components/sport-selector"
import { Button } from "@/components/ui/button"
import { Bell, User, LogOut, Users, Shield } from "lucide-react"
import Link from "next/link"

export default async function HomePage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get user profile
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

// If profile doesn't exist, create one
  if (!profile) {
    await supabase.from("profiles").insert({
      id: user.id,
      email: user.email!,
      full_name: user.user_metadata?.full_name || null,
    })
  }

const handleSignOut = async () => {
    "use server"
    const supabase = await createClient()
    await supabase.auth.signOut()
    redirect("/")
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur border-b border-purple-100 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">
              SafeMove
            </h1>
            <div className="flex items-center gap-3">
              <Button variant="ghost" size="icon" asChild>
                <Link href="/safety">
                  <Shield className="w-5 h-5" />
                  <span className="sr-only">Safety</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" asChild>
                <Link href="/groups">
                  <Users className="w-5 h-5" />
                  <span className="sr-only">Groups</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" className="relative" asChild>
                <Link href="/notifications">
                  <Bell className="w-5 h-5" />
                  <span className="sr-only">Notifications</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" asChild>
                <Link href="/profile">
                  <User className="w-5 h-5" />
                  <span className="sr-only">Profile</span>
                </Link>
              </Button>
              <form action={handleSignOut}>
                <Button variant="ghost" size="icon" type="submit">
                  <LogOut className="w-5 h-5" />
                  <span className="sr-only">Sign out</span>
                </Button>
              </form>
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto space-y-8">
          {/* Welcome Section */}
          <div className="text-center space-y-3">
            <h2 className="text-3xl font-bold text-gray-800">
              Welcome back, {profile?.full_name || user.email?.split("@")[0]}!
            </h2>
            <p className="text-lg text-gray-600">What sport are you interested in today?</p>
          </div>

{/* Sport Selector */}
          <SportSelector />

{/* Quick Stats */}
          <div className="grid grid-cols-3 gap-4">
            <div className="bg-white/80 backdrop-blur rounded-xl p-4 text-center shadow-sm">
              <div className="text-2xl font-bold text-purple-600">{profile?.total_events_attended || 0}</div>
              <div className="text-sm text-gray-600">Events Joined</div>
            </div>
            <div className="bg-white/80 backdrop-blur rounded-xl p-4 text-center shadow-sm">
              <div className="text-2xl font-bold text-pink-600">{profile?.total_events_created || 0}</div>
              <div className="text-sm text-gray-600">Events Created</div>
            </div>
            <div className="bg-white/80 backdrop-blur rounded-xl p-4 text-center shadow-sm">
              <div className="text-2xl font-bold text-teal-600">{profile?.reputation_score || 0}</div>
              <div className="text-sm text-gray-600">Reputation</div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isEdit="true" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(
    process.env.SUPABASE_SUPABASE_NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
          } catch {
            // The "setAll" method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    },
  )
}
[V0_FILE]typescriptreact:file="app/diagnostics/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"

export default async function DiagnosticsPage() {
  let connectionStatus = "Unknown"
  let errorMessage = ""
  const envVarsStatus = {
    serverUrl: !!process.env.SUPABASE_SUPABASE_NEXT_PUBLIC_SUPABASE_URL,
    serverKey: !!process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY_ANON_KEY,
    clientUrl: !!process.env.NEXT_PUBLIC_SUPABASE_URL,
    clientKey: !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  }

try {
    const supabase = await createClient()
    const { data, error } = await supabase.from("profiles").select("count").limit(1)

if (error) {
      connectionStatus = "Error"
      errorMessage = error.message
    } else {
      connectionStatus = "Connected"
    }
  } catch (error) {
    connectionStatus = "Failed"
    errorMessage = error instanceof Error ? error.message : "Unknown error"
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50 p-8">
      <div className="mx-auto max-w-2xl">
        <h1 className="mb-8 text-3xl font-bold text-gray-900">Diagnóstico de Supabase</h1>

<div className="space-y-4">
          <div className="rounded-lg bg-white p-6 shadow-md">
            <h2 className="mb-4 text-xl font-semibold text-gray-800">Estado de Conexión</h2>
            <div className="flex items-center gap-3">
              <div
                className={`h-4 w-4 rounded-full ${
                  connectionStatus === "Connected"
                    ? "bg-green-500"
                    : connectionStatus === "Error" || connectionStatus === "Failed"
                      ? "bg-red-500"
                      : "bg-yellow-500"
                }`}
              />
              <span className="text-lg font-medium">{connectionStatus}</span>
            </div>
            {errorMessage && <p className="mt-3 text-sm text-red-600">Error: {errorMessage}</p>}
          </div>

<div className="rounded-lg bg-white p-6 shadow-md">
            <h2 className="mb-4 text-xl font-semibold text-gray-800">Variables de Entorno (Servidor)</h2>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-gray-700">SUPABASE_NEXT_PUBLIC_SUPABASE_URL</span>
                <span className={`font-medium ${envVarsStatus.serverUrl ? "text-green-600" : "text-red-600"}`}>
                  {envVarsStatus.serverUrl ? "✓ Configurada" : "✗ Falta"}
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-700">SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY</span>
                <span className={`font-medium ${envVarsStatus.serverKey ? "text-green-600" : "text-red-600"}`}>
                  {envVarsStatus.serverKey ? "✓ Configurada" : "✗ Falta"}
                </span>
              </div>
            </div>
          </div>

<div className="rounded-lg bg-white p-6 shadow-md">
            <h2 className="mb-4 text-xl font-semibold text-gray-800">Variables de Entorno (Cliente)</h2>
            <p className="mb-3 text-sm text-gray-600">
              Estas variables son necesarias para autenticación en el navegador
            </p>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-gray-700">NEXT_PUBLIC_SUPABASE_URL</span>
                <span className={`font-medium ${envVarsStatus.clientUrl ? "text-green-600" : "text-red-600"}`}>
                  {envVarsStatus.clientUrl ? "✓ Configurada" : "✗ Falta"}
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-700">NEXT_PUBLIC_SUPABASE_ANON_KEY</span>
                <span className={`font-medium ${envVarsStatus.clientKey ? "text-green-600" : "text-red-600"}`}>
                  {envVarsStatus.clientKey ? "✓ Falta" : "✗ Falta"}
                </span>
              </div>
            </div>
            {(!envVarsStatus.clientUrl || !envVarsStatus.clientKey) && (
              <div className="mt-4 rounded-md bg-yellow-50 p-3 text-sm text-yellow-800">
                <p className="font-semibold">Acción requerida:</p>
                <p className="mt-1">
                  Agrega estas variables en la sección "Vars" del sidebar con los mismos valores de las variables del
                  servidor (sin el prefijo SUPABASE_)
                </p>
              </div>
            )}
          </div>

<div className="rounded-lg bg-white p-6 shadow-md">
            <h2 className="mb-4 text-xl font-semibold text-gray-800">Valores de Variables (parcial)</h2>
            <div className="space-y-2 text-sm">
              <div>
                <span className="font-medium text-gray-700">URL: </span>
                <span className="font-mono text-gray-600">
                  {process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_URL?.substring(0, 30)}...
                </span>
              </div>
              <div>
                <span className="font-medium text-gray-700">Key: </span>
                <span className="font-mono text-gray-600">
                  {process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY?.substring(0, 20)}...
                </span>
              </div>
            </div>
          </div>
        </div>

<div className="mt-8">
          <a
            href="/"
            className="inline-block rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 px-6 py-3 font-semibold text-white shadow-md transition-all hover:shadow-lg"
          >
            Volver al Inicio
          </a>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isEdit="true" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  console.log("[v0] Supabase URL:", process.env.NEXT_PUBLIC_SUPABASE_URL)
  console.log("[v0] Supabase Key exists:", !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)

return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}
[V0_FILE]sql:file="scripts/002_add_profile_completion.sql" isMerged="true"
-- Add profile completion fields to profiles table
alter table public.profiles
add column if not exists profile_completed boolean default false,
add column if not exists emergency_contact_name text,
add column if not exists emergency_contact_phone text,
add column if not exists address text,
add column if not exists identity_verified boolean default false,
add column if not exists identity_verification_provider text,
add column if not exists identity_verification_id text,
add column if not exists identity_verification_date timestamptz;

-- Create index for profile completion checks
create index if not exists idx_profiles_completed on public.profiles(id, profile_completed);
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isEdit="true" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

const supabase = createServerClient(
    process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options))
        },
      },
    },
  )

const {
    data: { user },
  } = await supabase.auth.getUser()

const publicRoutes = [
    "/",
    "/auth/login",
    "/auth/sign-up",
    "/auth/sign-up-success",
    "/auth/verify-email",
    "/diagnostics",
  ]
  const isPublicRoute = publicRoutes.some((route) => request.nextUrl.pathname.startsWith(route))

// Redirect unauthenticated users to login (except for public routes)
  if (!user && !isPublicRoute) {
    const url = request.nextUrl.clone()
    url.pathname = "/auth/login"
    return NextResponse.redirect(url)
  }

if (user && !user.email_confirmed_at && !isPublicRoute && !request.nextUrl.pathname.startsWith("/complete-profile")) {
    const url = request.nextUrl.clone()
    url.pathname = "/auth/verify-email"
    return NextResponse.redirect(url)
  }

if (user && user.email_confirmed_at && !request.nextUrl.pathname.startsWith("/complete-profile") && !isPublicRoute) {
    const { data: profile } = await supabase.from("profiles").select("profile_completed").eq("id", user.id).single()

// Redirect to profile completion if not completed
    if (profile && !profile.profile_completed) {
      const url = request.nextUrl.clone()
      url.pathname = "/complete-profile"
      return NextResponse.redirect(url)
    }
  }

return supabaseResponse
}
[V0_FILE]typescriptreact:file="app/complete-profile/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Camera, Upload, Shield, AlertCircle } from "lucide-react"
import { Alert, AlertDescription } from "@/components/ui/alert"

export default function CompleteProfilePage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [showCamera, setShowCamera] = useState(false)
  const [photoPreview, setPhotoPreview] = useState<string | null>(null)
  const [photoFile, setPhotoFile] = useState<File | null>(null)
  const videoRef = useRef<HTMLVideoElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

const [formData, setFormData] = useState({
    phone: "",
    address: "",
    dateOfBirth: "",
    emergencyContactName: "",
    emergencyContactPhone: "",
  })

const startCamera = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
      if (videoRef.current) {
        videoRef.current.srcObject = stream
        setShowCamera(true)
      }
    } catch (err) {
      setError("No se pudo acceder a la cámara. Por favor, sube una foto desde archivo.")
    }
  }

const capturePhoto = () => {
    if (videoRef.current && canvasRef.current) {
      const video = videoRef.current
      const canvas = canvasRef.current
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      const ctx = canvas.getContext("2d")
      if (ctx) {
        ctx.drawImage(video, 0, 0)
        canvas.toBlob((blob) => {
          if (blob) {
            const file = new File([blob], "profile-photo.jpg", { type: "image/jpeg" })
            setPhotoFile(file)
            setPhotoPreview(canvas.toDataURL())
            stopCamera()
          }
        }, "image/jpeg")
      }
    }
  }

const stopCamera = () => {
    if (videoRef.current && videoRef.current.srcObject) {
      const stream = videoRef.current.srcObject as MediaStream
      stream.getTracks().forEach((track) => track.stop())
      setShowCamera(false)
    }
  }

const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setPhotoFile(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        setPhotoPreview(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

if (!photoFile) {
      setError("La foto de perfil es obligatoria")
      setIsLoading(false)
      return
    }

try {
      const supabase = createClient()
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) throw new Error("No user found")

// Upload photo to Vercel Blob (placeholder - you'll need to implement this)
      // For now, we'll use a placeholder URL
      const photoUrl = photoPreview // In production, upload to Vercel Blob

// Update profile
      const { error: updateError } = await supabase
        .from("profiles")
        .update({
          phone: formData.phone,
          address: formData.address,
          date_of_birth: formData.dateOfBirth,
          emergency_contact_name: formData.emergencyContactName,
          emergency_contact_phone: formData.emergencyContactPhone,
          profile_image_url: photoUrl,
          profile_completed: true,
        })
        .eq("id", user.id)

if (updateError) throw updateError

router.push("/home")
    } catch (err) {
      setError(err instanceof Error ? err.message : "Error al completar el perfil")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50 p-6">
      <div className="mx-auto max-w-2xl">
        <Card className="shadow-xl border-0">
          <CardHeader className="space-y-2 text-center">
            <div className="mx-auto w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center mb-4">
              <Shield className="w-8 h-8 text-white" />
            </div>
            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">
              Completa tu Perfil
            </CardTitle>
            <CardDescription className="text-base">
              Por seguridad, necesitamos verificar tu identidad antes de continuar
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Alert className="mb-6 border-purple-200 bg-purple-50">
              <AlertCircle className="h-4 w-4 text-purple-600" />
              <AlertDescription className="text-purple-900">
                Todos los campos son obligatorios. Tu información está protegida y solo será visible para ti y en caso
                de emergencia.
              </AlertDescription>
            </Alert>

<form onSubmit={handleSubmit} className="space-y-6">
              {/* Photo Section */}
              <div className="space-y-4">
                <Label className="text-base font-semibold">Foto de Perfil *</Label>
                <div className="flex flex-col items-center gap-4">
                  {photoPreview ? (
                    <div className="relative">
                      <img
                        src={photoPreview || "/placeholder.svg"}
                        alt="Preview"
                        className="w-32 h-32 rounded-full object-cover border-4 border-purple-200"
                      />
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        className="mt-2 bg-transparent"
                        onClick={() => {
                          setPhotoPreview(null)
                          setPhotoFile(null)
                        }}
                      >
                        Cambiar foto
                      </Button>
                    </div>
                  ) : (
                    <div className="flex gap-3">
                      <Button
                        type="button"
                        variant="outline"
                        className="gap-2 bg-transparent"
                        onClick={startCamera}
                        disabled={showCamera}
                      >
                        <Camera className="w-4 h-4" />
                        Tomar Foto
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        className="gap-2 bg-transparent"
                        onClick={() => fileInputRef.current?.click()}
                      >
                        <Upload className="w-4 h-4" />
                        Subir Archivo
                      </Button>
                      <input
                        ref={fileInputRef}
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={handleFileUpload}
                      />
                    </div>
                  )}

{showCamera && (
                    <div className="space-y-3">
                      <video
                        ref={videoRef}
                        autoPlay
                        className="w-full max-w-md rounded-lg border-2 border-purple-200"
                      />
                      <canvas ref={canvasRef} className="hidden" />
                      <div className="flex gap-2">
                        <Button type="button" onClick={capturePhoto} className="flex-1">
                          Capturar
                        </Button>
                        <Button type="button" variant="outline" onClick={stopCamera} className="flex-1 bg-transparent">
                          Cancelar
                        </Button>
                      </div>
                    </div>
                  )}
                </div>
              </div>

{/* Personal Information */}
              <div className="grid gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="phone">Teléfono *</Label>
                  <Input
                    id="phone"
                    type="tel"
                    placeholder="+56 9 1234 5678"
                    required
                    value={formData.phone}
                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  />
                </div>

<div className="grid gap-2">
                  <Label htmlFor="address">Dirección *</Label>
                  <Textarea
                    id="address"
                    placeholder="Calle, número, comuna, ciudad"
                    required
                    value={formData.address}
                    onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                    rows={3}
                  />
                </div>

<div className="grid gap-2">
                  <Label htmlFor="dateOfBirth">Fecha de Nacimiento *</Label>
                  <Input
                    id="dateOfBirth"
                    type="date"
                    required
                    value={formData.dateOfBirth}
                    onChange={(e) => setFormData({ ...formData, dateOfBirth: e.target.value })}
                  />
                </div>
              </div>

{/* Emergency Contact */}
              <div className="space-y-4 pt-4 border-t">
                <h3 className="font-semibold text-lg">Contacto de Emergencia</h3>
                <div className="grid gap-4">
                  <div className="grid gap-2">
                    <Label htmlFor="emergencyName">Nombre Completo *</Label>
                    <Input
                      id="emergencyName"
                      type="text"
                      placeholder="Nombre del contacto de emergencia"
                      required
                      value={formData.emergencyContactName}
                      onChange={(e) => setFormData({ ...formData, emergencyContactName: e.target.value })}
                    />
                  </div>

<div className="grid gap-2">
                    <Label htmlFor="emergencyPhone">Teléfono *</Label>
                    <Input
                      id="emergencyPhone"
                      type="tel"
                      placeholder="+56 9 1234 5678"
                      required
                      value={formData.emergencyContactPhone}
                      onChange={(e) => setFormData({ ...formData, emergencyContactPhone: e.target.value })}
                    />
                  </div>
                </div>
              </div>

{error && (
                <Alert variant="destructive">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

<Button
                type="submit"
                className="w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-lg"
                disabled={isLoading}
              >
                {isLoading ? "Guardando..." : "Completar Perfil"}
              </Button>

<div className="text-center text-sm text-gray-600 pt-4">
                <p>
                  Para verificación de identidad adicional, recomendamos usar{" "}
                  <a
                    href="https://www.veriff.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-purple-600 underline"
                  >
                    Veriff
                  </a>{" "}
                  o{" "}
                  <a
                    href="https://onfido.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-purple-600 underline"
                  >
                    Onfido
                  </a>
                </p>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/verify-email/page.tsx" isMerged="true"
import { Mail, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function VerifyEmailPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <div className="bg-white rounded-3xl shadow-lg p-8 text-center">
          <div className="w-20 h-20 bg-gradient-to-br from-pink-400 to-purple-400 rounded-full flex items-center justify-center mx-auto mb-6">
            <Mail className="w-10 h-10 text-white" />
          </div>

<h1 className="text-3xl font-bold text-gray-900 mb-4">Verifica tu Email</h1>

<p className="text-gray-600 mb-6 leading-relaxed">
            Te hemos enviado un correo de verificación. Por favor revisa tu bandeja de entrada y haz clic en el enlace
            para verificar tu cuenta.
          </p>

<div className="bg-pink-50 border border-pink-200 rounded-2xl p-4 mb-6">
            <p className="text-sm text-pink-800">
              <strong>Importante:</strong> No podrás iniciar sesión hasta que verifiques tu email. Si no ves el correo,
              revisa tu carpeta de spam.
            </p>
          </div>

<Link href="/auth/login">
            <Button className="w-full bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white rounded-full h-12 text-lg font-semibold">
              <ArrowLeft className="w-5 h-5 mr-2" />
              Volver al Login
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password,
      })
      if (error) throw error

if (data.user && !data.user.email_confirmed_at) {
        setError("Por favor verifica tu email antes de iniciar sesión. Revisa tu bandeja de entrada.")
        await supabase.auth.signOut()
        setIsLoading(false)
        return
      }

router.push("/home")
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

-- Trigger the function every time a user is created
drop trigger if exists on_auth_user_created on auth.users;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute function public.handle_new_user();
[V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

export default function SignUpPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [fullName, setFullName] = useState("")
  const [repeatPassword, setRepeatPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [showSuccess, setShowSuccess] = useState(false)
  const router = useRouter()

const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

if (password !== repeatPassword) {
      setError("Las contraseñas no coinciden")
      setIsLoading(false)
      return
    }

if (password.length < 6) {
      setError("La contraseña debe tener al menos 6 caracteres")
      setIsLoading(false)
      return
    }

try {
      const { data, error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/auth/login`,
          data: {
            full_name: fullName,
          },
        },
      })

if (error) throw error

if (data.user) {
        setShowSuccess(true)
      }
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "Ocurrió un error")
    } finally {
      setIsLoading(false)
    }
  }

if (showSuccess) {
    return (
      <div className="flex min-h-screen w-full items-center justify-center p-6 bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50">
        <div className="w-full max-w-md">
          <Card className="shadow-lg border-0">
            <CardHeader className="space-y-2 text-center">
              <div className="mx-auto w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center mb-4">
                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                  />
                </svg>
              </div>
              <CardTitle className="text-2xl font-bold">Revisa tu correo</CardTitle>
              <CardDescription className="text-base">
                Hemos enviado un enlace de verificación a <strong>{email}</strong>
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-sm text-center text-muted-foreground">
                Haz clic en el enlace del correo para verificar tu cuenta. Después de verificar, podrás iniciar sesión y
                completar tu perfil.
              </p>
              <Button
                onClick={() => router.push("/auth/login")}
                className="w-full h-11 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
              >
                Ir a Iniciar Sesión
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    )
  }

return (
    <div className="flex min-h-screen w-full items-center justify-center p-6 bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50">
      <div className="w-full max-w-sm">
        <Card className="shadow-lg border-0">
          <CardHeader className="space-y-2 text-center">
            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">
              Join SafeMove
            </CardTitle>
            <CardDescription className="text-base">Create your account and start connecting</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSignUp}>
              <div className="flex flex-col gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="fullName">Full Name</Label>
                  <Input
                    id="fullName"
                    type="text"
                    placeholder="Maria Silva"
                    required
                    value={fullName}
                    onChange={(e) => setFullName(e.target.value)}
                    className="h-11"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="tu@email.com"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="h-11"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="password">Password</Label>
                  <Input
                    id="password"
                    type="password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="h-11"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="repeat-password">Confirm Password</Label>
                  <Input
                    id="repeat-password"
                    type="password"
                    required
                    value={repeatPassword}
                    onChange={(e) => setRepeatPassword(e.target.value)}
                    className="h-11"
                  />
                </div>
                {error && <p className="text-sm text-red-500 bg-red-50 p-3 rounded-lg">{error}</p>}
                <Button
                  type="submit"
                  className="w-full h-11 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
                  disabled={isLoading}
                >
                  {isLoading ? "Creating account..." : "Sign Up"}
                </Button>
              </div>
              <div className="mt-6 text-center text-sm">
                Already have an account?{" "}
                <Link
                  href="/auth/login"
                  className="font-semibold text-purple-600 hover:text-purple-700 underline underline-offset-4"
                >
                  Sign in
                </Link>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}31:o232,d8:["$","$Ldf",null,{"chatId":"jzYaK7BHInc","children":["$","$Le0",null,{"data":{"@\"active-block\",\"jzYaK7BHInc\",":{"id":"b_Laa3rB3mxTD","messageId":"Wv89tzmxJ1sCcQM6C5RPcbMXlGZXDSHA","source":"$e1","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"safemove-mvp","type":"code-project","project":"safemove-mvp","taskNameActive":"Fixing email verification","taskNameComplete":"Fixed email verification"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"jzYaK7BHInc\",":false},"children":"$Le2"}]}]
31:o4ef,e3:"PublishedPageProvider"
e4:I[845210,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$e3"]
e5:"FullscreenContainer"
e6:I[481556,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$e5"]
e7:"TemplateBlockViewClient"
e8:I[552151,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$e7"]
e2:["$","$Le4",null,{"children":["$","$Le6",null,{"mode":"$undefined","children":["$","$Le8",null,{"block":"$d8:props:children:props:data:@\"active-block\",\"jzYaK7BHInc\",","allowMobileFullscreen":true,"initialSize":"$undefined","title":"AppSport","templateCanonId":"RTz7dLt3u0c","templateVersionId":"tDBr58GWEkI","authorizePublicFrame":true,"vmEnabled":false,"canViewConsole":false,"vercelDeploymentUrl":null}]}]}]
31:o11,2f:true
2e:44153
31:o22,2d:C
2c:C
1:C
24:C
1f:C
1a:C
17:C
31:C
e4:T2805d,[V0_FILE]sql:file="scripts/001_create_schema.sql" isMerged="true"
-- Create profiles table
create table if not exists public.profiles (
  id uuid primary key references auth.users(id) on delete cascade,
  email text not null,
  full_name text,
  display_name text,
  bio text,
  profile_image_url text,
  phone text,
  date_of_birth date,
  city text,
  country text default 'Chile',
  
  -- Verification and safety
  is_verified boolean default false,
  verification_method text, -- 'id_card', 'social_media', etc.
  verification_date timestamptz,
  reputation_score integer default 0,
  total_events_attended integer default 0,
  total_events_created integer default 0,
  
  -- Preferences
  preferred_sports text[], -- array of sport types
  skill_levels jsonb, -- {cycling: 'intermediate', running: 'beginner'}
  
  -- Timestamps
  created_at timestamptz default now(),
  updated_at timestamptz default now()
);

-- Create events table
create table if not exists public.events (
  id uuid primary key default gen_random_uuid(),
  creator_id uuid not null references public.profiles(id) on delete cascade,
  
  -- Event details
  title text not null,
  description text,
  sport_type text not null, -- 'cycling', 'mtb', 'trail_running', 'trekking', 'running'
  difficulty_level text not null, -- 'beginner', 'intermediate', 'advanced'
  
  -- Location
  meeting_point text not null,
  meeting_point_lat decimal(10, 8),
  meeting_point_lng decimal(11, 8),
  route_description text,
  distance_km decimal(6, 2),
  elevation_gain_m integer,
  
  -- Timing
  event_date date not null,
  event_time time not null,
  estimated_duration_minutes integer,
  
  -- Capacity
  max_participants integer,
  current_participants integer default 1, -- creator is first participant
  
  -- Status
  status text default 'open', -- 'open', 'full', 'cancelled', 'completed'
  is_public boolean default true,
  
  -- Safety
  emergency_contact text,
  required_equipment text[],
  safety_notes text,
  
  -- Timestamps
  created_at timestamptz default now(),
  updated_at timestamptz default now()
);

-- Create event_participants table
create table if not exists public.event_participants (
  id uuid primary key default gen_random_uuid(),
  event_id uuid not null references public.events(id) on delete cascade,
  user_id uuid not null references public.profiles(id) on delete cascade,
  
  -- Participation details
  status text default 'confirmed', -- 'confirmed', 'cancelled', 'attended'
  joined_at timestamptz default now(),
  
  -- Unique constraint: one user per event
  unique(event_id, user_id)
);

-- Create groups table (for influencers/leaders)
create table if not exists public.groups (
  id uuid primary key default gen_random_uuid(),
  leader_id uuid not null references public.profiles(id) on delete cascade,
  
  -- Group details
  name text not null,
  description text,
  sport_type text not null,
  group_image_url text,
  
  -- Settings
  is_private boolean default false,
  max_members integer,
  current_members integer default 1,
  
  -- Timestamps
  created_at timestamptz default now(),
  updated_at timestamptz default now()
);

-- Create group_members table
create table if not exists public.group_members (
  id uuid primary key default gen_random_uuid(),
  group_id uuid not null references public.groups(id) on delete cascade,
  user_id uuid not null references public.profiles(id) on delete cascade,
  
  -- Membership details
  role text default 'member', -- 'leader', 'admin', 'member'
  joined_at timestamptz default now(),
  
  -- Unique constraint: one user per group
  unique(group_id, user_id)
);

-- Create notifications table
create table if not exists public.notifications (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null references public.profiles(id) on delete cascade,
  
  -- Notification details
  type text not null, -- 'event_invite', 'event_reminder', 'group_invite', 'safety_alert'
  title text not null,
  message text not null,
  
  -- Related entities
  related_event_id uuid references public.events(id) on delete cascade,
  related_group_id uuid references public.groups(id) on delete cascade,
  
  -- Status
  is_read boolean default false,
  read_at timestamptz,
  
  -- Timestamps
  created_at timestamptz default now()
);

-- Enable Row Level Security on all tables
alter table public.profiles enable row level security;
alter table public.events enable row level security;
alter table public.event_participants enable row level security;
alter table public.groups enable row level security;
alter table public.group_members enable row level security;
alter table public.notifications enable row level security;

-- RLS Policies for profiles
create policy "profiles_select_all"
  on public.profiles for select
  using (true); -- Everyone can view profiles

create policy "profiles_insert_own"
  on public.profiles for insert
  with check (auth.uid() = id);

create policy "profiles_update_own"
  on public.profiles for update
  using (auth.uid() = id);

create policy "profiles_delete_own"
  on public.profiles for delete
  using (auth.uid() = id);

-- RLS Policies for events
create policy "events_select_all"
  on public.events for select
  using (true); -- Everyone can view public events

create policy "events_insert_own"
  on public.events for insert
  with check (auth.uid() = creator_id);

create policy "events_update_own"
  on public.events for update
  using (auth.uid() = creator_id);

create policy "events_delete_own"
  on public.events for delete
  using (auth.uid() = creator_id);

-- RLS Policies for event_participants
create policy "participants_select_all"
  on public.event_participants for select
  using (true); -- Everyone can see who's participating

create policy "participants_insert_own"
  on public.event_participants for insert
  with check (auth.uid() = user_id);

create policy "participants_update_own"
  on public.event_participants for update
  using (auth.uid() = user_id);

create policy "participants_delete_own"
  on public.event_participants for delete
  using (auth.uid() = user_id);

-- RLS Policies for groups
create policy "groups_select_all"
  on public.groups for select
  using (true); -- Everyone can view groups

create policy "groups_insert_own"
  on public.groups for insert
  with check (auth.uid() = leader_id);

create policy "groups_update_own"
  on public.groups for update
  using (auth.uid() = leader_id);

create policy "groups_delete_own"
  on public.groups for delete
  using (auth.uid() = leader_id);

-- RLS Policies for group_members
create policy "group_members_select_all"
  on public.group_members for select
  using (true); -- Everyone can see group members

create policy "group_members_insert_own"
  on public.group_members for insert
  with check (auth.uid() = user_id);

create policy "group_members_update_own"
  on public.group_members for update
  using (auth.uid() = user_id);

create policy "group_members_delete_own"
  on public.group_members for delete
  using (auth.uid() = user_id);

-- RLS Policies for notifications
create policy "notifications_select_own"
  on public.notifications for select
  using (auth.uid() = user_id);

create policy "notifications_insert_own"
  on public.notifications for insert
  with check (auth.uid() = user_id);

create policy "notifications_update_own"
  on public.notifications for update
  using (auth.uid() = user_id);

create policy "notifications_delete_own"
  on public.notifications for delete
  using (auth.uid() = user_id);

-- Create indexes for better performance
create index if not exists idx_events_sport_type on public.events(sport_type);
create index if not exists idx_events_date on public.events(event_date);
create index if not exists idx_events_creator on public.events(creator_id);
create index if not exists idx_event_participants_event on public.event_participants(event_id);
create index if not exists idx_event_participants_user on public.event_participants(user_id);
create index if not exists idx_groups_sport_type on public.groups(sport_type);
create index if not exists idx_notifications_user on public.notifications(user_id);
create index if not exists idx_notifications_unread on public.notifications(user_id, is_read);

-- Create updated_at trigger function
create or replace function public.handle_updated_at()
returns trigger
language plpgsql
as $$
begin
  new.updated_at = now();
  return new;
end;
$$;

-- Add updated_at triggers
create trigger profiles_updated_at
  before update on public.profiles
  for each row
  execute function public.handle_updated_at();

create trigger events_updated_at
  before update on public.events
  for each row
  execute function public.handle_updated_at();

create trigger groups_updated_at
  before update on public.groups
  for each row
  execute function public.handle_updated_at();
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { updateSession } from "@/lib/supabase/middleware"
import type { NextRequest } from "next/server"

export async function middleware(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
}
[V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Mail } from "lucide-react"

export default function SignUpSuccessPage() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-6 bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50">
      <div className="w-full max-w-md">
        <Card className="shadow-lg border-0">
          <CardHeader className="space-y-4 text-center">
            <div className="mx-auto w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center">
              <Mail className="w-8 h-8 text-white" />
            </div>
            <CardTitle className="text-2xl font-bold">Check Your Email</CardTitle>
            <CardDescription className="text-base">We've sent you a confirmation link</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-muted-foreground text-center">
              Please check your email and click the confirmation link to activate your account. Once confirmed, you'll
              be able to sign in and start using SafeMove.
            </p>
            <Button asChild variant="outline" className="w-full bg-transparent">
              <Link href="/auth/login">Back to Sign In</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Shield, Users, MapPin, Award } from "lucide-react"

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50">
      {/* Hero Section */}
      <div className="container mx-auto px-4 py-16">
        <div className="flex flex-col items-center text-center space-y-8 max-w-4xl mx-auto">
          <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-pink-500 via-purple-600 to-teal-500 bg-clip-text text-transparent leading-tight">
            SafeMove
          </h1>
          <p className="text-xl md:text-2xl text-gray-700 max-w-2xl leading-relaxed">
            Connect with verified women athletes for safe group sports activities
          </p>
          <p className="text-lg text-gray-600 max-w-xl">
            Join cycling, running, trekking, and trail adventures with a trusted community
          </p>
          <div className="flex flex-col sm:flex-row gap-4 pt-4">
            <Button
              asChild
              size="lg"
              className="h-12 px-8 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-lg"
            >
              <Link href="/auth/sign-up">Get Started</Link>
            </Button>
            <Button
              asChild
              size="lg"
              variant="outline"
              className="h-12 px-8 text-lg border-2 border-purple-300 hover:bg-purple-50 bg-transparent"
            >
              <Link href="/auth/login">Sign In</Link>
            </Button>
          </div>
        </div>

{/* Features Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-20 max-w-6xl mx-auto">
          <div className="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
            <div className="w-12 h-12 bg-gradient-to-r from-pink-500 to-purple-600 rounded-xl flex items-center justify-center mb-4">
              <Shield className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-lg font-semibold mb-2">Verified Members</h3>
            <p className="text-sm text-gray-600">All members are identity-verified for your safety and peace of mind</p>
          </div>

<div className="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
            <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-teal-500 rounded-xl flex items-center justify-center mb-4">
              <Users className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-lg font-semibold mb-2">Community Groups</h3>
            <p className="text-sm text-gray-600">Join groups led by experienced athletes and influencers</p>
          </div>

<div className="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
            <div className="w-12 h-12 bg-gradient-to-r from-teal-500 to-pink-500 rounded-xl flex items-center justify-center mb-4">
              <MapPin className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-lg font-semibold mb-2">Local Events</h3>
            <p className="text-sm text-gray-600">Discover and join sports events in your area with detailed routes</p>
          </div>

<div className="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
            <div className="w-12 h-12 bg-gradient-to-r from-pink-500 to-teal-500 rounded-xl flex items-center justify-center mb-4">
              <Award className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-lg font-semibold mb-2">Build Reputation</h3>
            <p className="text-sm text-gray-600">Earn reputation points by participating and creating events</p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.4",
    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.1.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.76",
    "@supabase/ssr": "0.7.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/sport-selector.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { useRouter } from "next/navigation"
import { Bike, Mountain, Footprints, TreePine, PersonStanding } from "lucide-react"

const sports = [
  {
    id: "cycling",
    name: "Cycling",
    icon: Bike,
    color: "from-pink-400 to-pink-600",
    bgColor: "bg-pink-50 hover:bg-pink-100",
    description: "Road cycling adventures",
  },
  {
    id: "mtb",
    name: "Mountain Bike",
    icon: Mountain,
    color: "from-purple-400 to-purple-600",
    bgColor: "bg-purple-50 hover:bg-purple-100",
    description: "Off-road trails",
  },
  {
    id: "trail_running",
    name: "Trail Running",
    icon: TreePine,
    color: "from-teal-400 to-teal-600",
    bgColor: "bg-teal-50 hover:bg-teal-100",
    description: "Nature trail runs",
  },
  {
    id: "trekking",
    name: "Trekking",
    icon: Footprints,
    color: "from-orange-400 to-orange-600",
    bgColor: "bg-orange-50 hover:bg-orange-100",
    description: "Hiking adventures",
  },
  {
    id: "running",
    name: "Running",
    icon: PersonStanding,
    color: "from-rose-400 to-rose-600",
    bgColor: "bg-rose-50 hover:bg-rose-100",
    description: "Urban running groups",
  },
]

export function SportSelector() {
  const router = useRouter()

const handleSportClick = (sportId: string) => {
    router.push(`/events?sport=${sportId}`)
  }

return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {sports.map((sport) => {
        const Icon = sport.icon
        return (
          <Card
            key={sport.id}
            className={`cursor-pointer transition-all hover:shadow-lg hover:scale-105 border-0 ${sport.bgColor}`}
            onClick={() => handleSportClick(sport.id)}
          >
            <CardContent className="p-6 flex flex-col items-center text-center space-y-3">
              <div
                className={`w-16 h-16 rounded-full bg-gradient-to-r ${sport.color} flex items-center justify-center`}
              >
                <Icon className="w-8 h-8 text-white" />
              </div>
              <div>
                <h3 className="font-semibold text-lg text-gray-800">{sport.name}</h3>
                <p className="text-sm text-gray-600">{sport.description}</p>
              </div>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/events/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { EventsList } from "@/components/events-list"
import { Button } from "@/components/ui/button"
import { Plus, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function EventsPage({ searchParams }: { searchParams: Promise<{ sport?: string }> }) {
  const supabase = await createClient()
  const params = await searchParams

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

const sportType = params.sport || "all"

// Fetch events based on sport filter
  let query = supabase
    .from("events")
    .select(
      `
      *,
      creator:profiles!events_creator_id_fkey(id, full_name, display_name, is_verified, reputation_score),
      participants:event_participants(count)
    `,
    )
    .eq("status", "open")
    .gte("event_date", new Date().toISOString().split("T")[0])
    .order("event_date", { ascending: true })

if (sportType !== "all") {
    query = query.eq("sport_type", sportType)
  }

const { data: events } = await query

const sportNames: Record<string, string> = {
    cycling: "Cycling",
    mtb: "Mountain Bike",
    trail_running: "Trail Running",
    trekking: "Trekking",
    running: "Running",
    all: "All Sports",
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        <EventsList events={events || []} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/events-list.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Calendar, MapPin, Users, TrendingUp, Shield } from "lucide-react"
import Link from "next/link"
import { format } from "date-fns"

type Event = {
  id: string
  title: string
  description: string
  sport_type: string
  difficulty_level: string
  meeting_point: string
  event_date: string
  event_time: string
  max_participants: number
  current_participants: number
  distance_km: number
  creator: {
    full_name: string
    display_name: string
    is_verified: boolean
    reputation_score: number
  }
}

const difficultyColors: Record<string, string> = {
  beginner: "bg-green-100 text-green-700 border-green-200",
  intermediate: "bg-yellow-100 text-yellow-700 border-yellow-200",
  advanced: "bg-red-100 text-red-700 border-red-200",
}

export function EventsList({ events }: { events: Event[] }) {
  if (events.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-lg text-gray-600">No events found. Be the first to create one!</p>
      </div>
    )
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {events.map((event) => (
        <Link key={event.id} href={`/events/${event.id}`}>
          <Card className="hover:shadow-lg transition-all hover:scale-[1.02] cursor-pointer border-0 bg-white/80 backdrop-blur h-full">
            <CardHeader className="space-y-3">
              <div className="flex items-start justify-between gap-2">
                <h3 className="font-semibold text-lg text-gray-800 line-clamp-2">{event.title}</h3>
                <div
                  className={`w-10 h-10 rounded-full bg-gradient-to-r ${sportColors[event.sport_type]} flex-shrink-0`}
                />
              </div>
              <div className="flex items-center gap-2 flex-wrap">
                <Badge variant="outline" className={difficultyColors[event.difficulty_level]}>
                  {event.difficulty_level}
                </Badge>
                {event.creator.is_verified && (
                  <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                    <Shield className="w-3 h-3 mr-1" />
                    Verified
                  </Badge>
                )}
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <p className="text-sm text-gray-600 line-clamp-2">{event.description}</p>

<div className="space-y-2 text-sm">
                <div className="flex items-center gap-2 text-gray-600">
                  <Calendar className="w-4 h-4 flex-shrink-0" />
                  <span>
                    {format(new Date(event.event_date), "MMM d, yyyy")} at {event.event_time}
                  </span>
                </div>
                <div className="flex items-center gap-2 text-gray-600">
                  <MapPin className="w-4 h-4 flex-shrink-0" />
                  <span className="line-clamp-1">{event.meeting_point}</span>
                </div>
                <div className="flex items-center gap-2 text-gray-600">
                  <Users className="w-4 h-4 flex-shrink-0" />
                  <span>
                    {event.current_participants}/{event.max_participants || "∞"} participants
                  </span>
                </div>
                {event.distance_km && (
                  <div className="flex items-center gap-2 text-gray-600">
                    <TrendingUp className="w-4 h-4 flex-shrink-0" />
                    <span>{event.distance_km} km</span>
                  </div>
                )}
              </div>

<div className="pt-2 border-t border-gray-100">
                <p className="text-xs text-gray-500">
                  Organized by {event.creator.display_name || event.creator.full_name}
                </p>
              </div>
            </CardContent>
          </Card>
        </Link>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/join-event-button.tsx" isMerged="true"
"use client"

export function JoinEventButton({ eventId, isParticipating }: { eventId: string; isParticipating: boolean }) {
  const [loading, setLoading] = useState(false)
  const [participating, setParticipating] = useState(isParticipating)
  const router = useRouter()

const handleJoinEvent = async () => {
    setLoading(true)
    const supabase = createClient()

try {
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        router.push("/auth/login")
        return
      }

if (participating) {
        // Leave event
        const { error } = await supabase
          .from("event_participants")
          .delete()
          .eq("event_id", eventId)
          .eq("user_id", user.id)

if (error) throw error

// Update event participant count
        const { data: event } = await supabase.from("events").select("current_participants").eq("id", eventId).single()

if (event) {
          await supabase
            .from("events")
            .update({ current_participants: Math.max(0, event.current_participants - 1) })
            .eq("id", eventId)
        }

setParticipating(false)
      } else {
        // Join event
        const { error } = await supabase.from("event_participants").insert({
          event_id: eventId,
          user_id: user.id,
          status: "confirmed",
        })

if (error) throw error

// Update event participant count
        const { data: event } = await supabase.from("events").select("current_participants").eq("id", eventId).single()

if (event) {
          await supabase
            .from("events")
            .update({ current_participants: event.current_participants + 1 })
            .eq("id", eventId)
        }

setParticipating(true)
      }

router.refresh()
    } catch (error) {
      console.error("[v0] Error joining/leaving event:", error)
      alert("Failed to update participation status. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <Button
      onClick={handleJoinEvent}
      disabled={loading}
      className={
        participating
          ? "w-full h-12 bg-gray-200 hover:bg-gray-300 text-gray-700"
          : "w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
      }
    >
      {loading ? (
        "Processing..."
      ) : participating ? (
        <>
          <UserMinus className="w-4 h-4 mr-2" />
          Leave Event
        </>
      ) : (
        <>
          <UserPlus className="w-4 h-4 mr-2" />
          Join Event
        </>
      )}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/events/create/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { CreateEventForm } from "@/components/create-event-form"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function CreateEventPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-2xl">
        <CreateEventForm userId={user.id} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/create-event-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { useState } from "react"

export function CreateEventForm({ userId }: { userId: string }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    sport_type: "",
    difficulty_level: "",
    meeting_point: "",
    event_date: "",
    event_time: "",
    max_participants: "",
    distance_km: "",
    elevation_gain_m: "",
    estimated_duration_minutes: "",
    route_description: "",
    safety_notes: "",
    required_equipment: "",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

const supabase = createClient()

try {
      const { data, error } = await supabase
        .from("events")
        .insert({
          creator_id: userId,
          title: formData.title,
          description: formData.description,
          sport_type: formData.sport_type,
          difficulty_level: formData.difficulty_level,
          meeting_point: formData.meeting_point,
          event_date: formData.event_date,
          event_time: formData.event_time,
          max_participants: formData.max_participants ? Number.parseInt(formData.max_participants) : null,
          distance_km: formData.distance_km ? Number.parseFloat(formData.distance_km) : null,
          elevation_gain_m: formData.elevation_gain_m ? Number.parseInt(formData.elevation_gain_m) : null,
          estimated_duration_minutes: formData.estimated_duration_minutes
            ? Number.parseInt(formData.estimated_duration_minutes)
            : null,
          route_description: formData.route_description || null,
          safety_notes: formData.safety_notes || null,
          required_equipment: formData.required_equipment
            ? formData.required_equipment.split(",").map((item) => item.trim())
            : null,
          status: "open",
        })
        .select()
        .single()

if (error) throw error

// Add creator as first participant
      await supabase.from("event_participants").insert({
        event_id: data.id,
        user_id: userId,
        status: "confirmed",
      })

// Update user's event count
      const { data: profile } = await supabase.from("profiles").select("total_events_created").eq("id", userId).single()

if (profile) {
        await supabase
          .from("profiles")
          .update({
            total_events_created: (profile.total_events_created || 0) + 1,
            reputation_score: (profile.total_events_created || 0) + 1 * 10, // 10 points per event created
          })
          .eq("id", userId)
      }

router.push(`/events/${data.id}`)
    } catch (error) {
      console.error("[v0] Error creating event:", error)
      alert("Failed to create event. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
      <CardHeader>
        <CardTitle>Event Details</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Basic Information */}
          <div className="space-y-4">
            <div>
              <Label htmlFor="title">Event Title *</Label>
              <Input
                id="title"
                required
                value={formData.title}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                placeholder="Morning Trail Run at Cerro San Cristóbal"
              />
            </div>

<div>
              <Label htmlFor="description">Description *</Label>
              <Textarea
                id="description"
                required
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="Describe your event..."
                rows={4}
              />
            </div>

About

Tags

Share

About

Tags

Share

More Templates Like This

More Templates Like This