112:"ExplicitChatIdProvider" 113:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7e","$7c","$85","$8d","$89","$84","$7d","$82","$8e","$7f","$8a","$8f","$86","$83","$90","$80","$88","$91","$92","$93","$94","$95","$87"],"$112"] 114:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7e","$7c","$85","$8d","$89","$84","$7d","$82","$8e","$7f","$8a","$8f","$86","$83","$90","$80","$88","$91","$92","$93","$94","$95","$87"],"SWRDataProvider"] 116:[] 117:[["b_4uWwbVbDt1l",null],["b_3rEAKWZhGc8",null],["b_7Bevq04eWes",null],["b_NMPgkYxIUgo",null],["b_g5rlQAjBjnm",null],["b_5YGUG8j7SJd",null],["b_INU94xWXyiL",null],["b_euQ2sCtiZcB",null],["b_QcFxKlevL9k",null],["b_k7m13SWy2Rv",null],["b_DZdOe7CMDHv",null],["b_YelOYrHa9Lt",null],["b_TSHglhkLhqy",null],["b_J2GE9suC9wd",null],["b_33X30QLTy4M",null],["b_BPZhtb48gsg",null],["b_NE651eVKoub",null],["b_8mPHuMDW9Is",null],["b_4cbFF1q5xAo",null],["b_8Q0BXdbiwBk",null],["b_dAyxibtEWsu",null],["b_2x1KYwWw17i",null],["b_RDIhgp8shtR",null],["b_aa9oiN8ZNrX",null],["b_MSQWvHYPfvt",null]] 118:[["b_4uWwbVbDt1l",{"templateVersionId":null,"templateCanonId":null}],["b_3rEAKWZhGc8",{"templateVersionId":null,"templateCanonId":null}],["b_7Bevq04eWes",{"templateVersionId":null,"templateCanonId":null}],["b_NMPgkYxIUgo",{"templateVersionId":null,"templateCanonId":null}],["b_g5rlQAjBjnm",{"templateVersionId":null,"templateCanonId":null}],["b_5YGUG8j7SJd",{"templateVersionId":null,"templateCanonId":null}],["b_INU94xWXyiL",{"templateVersionId":null,"templateCanonId":null}],["b_euQ2sCtiZcB",{"templateVersionId":null,"templateCanonId":null}],["b_QcFxKlevL9k",{"templateVersionId":null,"templateCanonId":null}],["b_k7m13SWy2Rv",{"templateVersionId":null,"templateCanonId":null}],["b_DZdOe7CMDHv",{"templateVersionId":null,"templateCanonId":null}],["b_YelOYrHa9Lt",{"templateVersionId":null,"templateCanonId":null}],["b_TSHglhkLhqy",{"templateVersionId":null,"templateCanonId":null}],["b_J2GE9suC9wd",{"templateVersionId":null,"templateCanonId":null}],["b_33X30QLTy4M",{"templateVersionId":null,"templateCanonId":null}],["b_BPZhtb48gsg",{"templateVersionId":null,"templateCanonId":null}],["b_NE651eVKoub",{"templateVersionId":null,"templateCanonId":null}],["b_8mPHuMDW9Is",{"templateVersionId":null,"templateCanonId":null}],["b_4cbFF1q5xAo",{"templateVersionId":null,"templateCanonId":null}],["b_8Q0BXdbiwBk",{"templateVersionId":null,"templateCanonId":null}],["b_dAyxibtEWsu",{"templateVersionId":null,"templateCanonId":null}],["b_2x1KYwWw17i",{"templateVersionId":null,"templateCanonId":null}],["b_RDIhgp8shtR",{"templateVersionId":null,"templateCanonId":null}],["b_aa9oiN8ZNrX",{"templateVersionId":null,"templateCanonId":null}],["b_MSQWvHYPfvt",{"templateVersionId":null,"templateCanonId":null}]] 119:[["b_yhI9NDq4rX3","$D2025-11-21T09:27:34.795Z"],["b_FTsPgDB2wCy","$D2025-11-21T09:30:14.066Z"],["b_2TQ42HesHcU","$D2025-11-21T09:36:00.533Z"],["b_k4CkHQAcjfH","$D2025-11-21T09:38:40.803Z"],["b_Wwhji1rn54L","$D2025-11-21T09:39:33.319Z"],["b_6c1JUgDMf08","$D2025-11-21T09:44:52.236Z"],["b_tRuZg555AqW","$D2025-11-24T17:12:57.723Z"],["b_g4aDb3nAkLw","$D2025-11-24T17:15:25.866Z"],["b_iaGZ8coeb9C","$D2025-12-05T10:17:10.202Z"],["b_VVPT4DSRG7W","$D2025-12-05T10:17:26.485Z"],["b_QKrWNEulEBL","$D2025-12-05T10:20:27.565Z"],["b_zfEWcxOOLTZ","$D2025-12-05T10:24:40.282Z"],["b_akSVLQeIwt2","$D2026-01-13T02:54:12.494Z"],["b_tYjCEr4lkzH","$D2026-01-13T02:56:23.319Z"],["b_0IJtPHeXMQk","$D2026-01-13T02:56:55.246Z"],["b_j5nvh59txtY","$D2026-01-13T03:05:04.033Z"],["b_KkiR3xAGClx","$D2026-01-13T03:05:33.336Z"],["b_tPdV8fML9MN","$D2026-01-13T03:13:24.217Z"],["b_yKydIrWkCYQ","$D2026-01-13T03:14:34.164Z"],["b_7PxalkXfjzY","$D2026-01-13T03:14:51.762Z"],["b_omW4TCFKUYw","$D2026-01-13T03:15:44.695Z"],["b_qp7SPySMjYP","$D2026-01-13T03:21:59.433Z"],["b_hOSzKlbhhua","$D2026-01-13T03:22:04.308Z"],["b_Trf2QDFKtQs","$D2026-01-14T16:23:33.796Z"],["b_Tih60zRKJrA","$D2026-01-14T16:24:23.654Z"],["b_YUKsO7rHU4b","$D2026-01-14T16:35:30.061Z"],["b_eeFA5TOxfPu","$D2026-01-14T16:36:03.413Z"],["b_Btg6pzLd3Mg","$D2026-01-14T16:37:07.759Z"],["b_eGdw1aVVpkP","$D2026-01-14T16:37:56.871Z"],["b_wQbomhVyMkE","$D2026-02-23T14:12:05.214Z"],["b_JSHvIzF42YU","$D2026-02-23T14:13:14.982Z"],["b_njM89BTVtfL","$D2026-02-23T14:13:22.657Z"],["b_L5vsmjUfNHu","$D2026-02-25T11:06:11.930Z"],["b_xcyPxamOkyk","$D2026-02-25T11:06:27.527Z"],["b_lnPvcB7Ilyb","$D2026-02-25T11:06:35.473Z"],["b_lBN2BSqg0K6","$D2026-02-25T11:06:41.835Z"],["b_iE4J5QquMDB","$D2026-02-25T11:06:47.478Z"],["b_M7j2DH28RtQ","$D2026-02-25T11:07:04.429Z"],["b_bAsqgMe87Qw","$D2026-02-25T11:07:33.231Z"],["b_42SpIxajUyX","$D2026-02-25T11:07:47.402Z"],["b_b8hSzyBebda","$D2026-02-25T11:07:55.593Z"],["b_QCUIhUs0lmx","$D2026-02-25T11:08:19.964Z"],["b_BzKCmaMUXpZ","$D2026-02-25T11:08:26.634Z"],["b_nkFf8T0AyHW","$D2026-02-25T11:08:33.619Z"],["b_hqitwyKOv1c","$D2026-02-25T11:08:52.251Z"],["b_CNGVYfDFHlq","$D2026-02-25T11:09:03.805Z"],["b_gfKq3FF14Gu","$D2026-02-25T11:09:10.302Z"],["b_ofGY76y6u35","$D2026-02-25T11:09:19.467Z"],["b_DR5ZCQzQ0x1","$D2026-02-25T11:09:50.892Z"],["b_iORbiDi1VH5","$D2026-02-25T11:10:19.607Z"],["b_1jmj1dF7NEY","$D2026-02-25T11:10:38.171Z"],["b_C4siDNqOq7B","$D2026-02-25T11:10:55.935Z"],["b_KH40nWDVvFg","$D2026-02-25T11:11:05.559Z"],["b_DWQkm9LppXq","$D2026-02-25T11:11:17.894Z"],["b_RLWajr62mZJ","$D2026-02-25T11:11:25.120Z"],["b_lPprBE8OprB","$D2026-02-25T11:11:40.167Z"],["b_tvNiYXtfpKa","$D2026-02-25T11:11:49.630Z"],["b_mPCc0OoKQ8d","$D2026-02-25T11:12:40.962Z"],["b_FRs5nvpA413","$D2026-02-25T11:12:58.606Z"],["b_6L2eY7slijj","$D2026-02-25T11:13:10.067Z"],["b_rBjtMGxSLXE","$D2026-02-25T11:13:21.444Z"],["b_HLIRbeoaQYI","$D2026-02-25T11:13:48.502Z"],["b_0xSXN0q5dO7","$D2026-02-25T11:14:07.171Z"],["b_Aa720gveSjL","$D2026-02-25T11:14:44.941Z"],["b_v8zZ3NdXxft","$D2026-02-25T11:14:53.501Z"],["b_Nzqhii6ydgU","$D2026-02-25T11:15:01.942Z"],["b_a7WOTX2qoVP","$D2026-02-25T11:15:11.474Z"],["b_JLSbb4Rn9Tu","$D2026-02-25T11:15:35.866Z"],["b_ersNTueQSG7","$D2026-02-25T11:52:10.993Z"],["b_NNqGzYjreW3","$D2026-02-25T11:52:19.137Z"],["b_MnTknez5qE0","$D2026-02-25T11:52:33.975Z"],["b_5ikHP78fypv","$D2026-02-25T11:53:21.934Z"],["b_FbAO15cw95F","$D2026-02-25T11:53:29.099Z"],["b_3o8MUov7dD2","$D2026-02-25T11:53:38.482Z"],["b_gUDruBjTdEl","$D2026-02-25T11:53:55.982Z"],["b_P3Q69srCw7J","$D2026-02-25T11:54:09.152Z"],["b_ONM1p51k3uh","$D2026-02-25T11:54:31.707Z"],["b_mD2FB4j6Scg","$D2026-02-25T11:54:58.490Z"],["b_xbk5udZMs0V","$D2026-02-25T11:55:05.389Z"],["b_1XCZC8ySyl1","$D2026-02-25T11:55:22.455Z"],["b_lI0RwSzkRPd","$D2026-02-25T11:55:31.707Z"],["b_oa7rorPPv64","$D2026-02-25T11:55:41.294Z"],["b_DX6M4bNUsuN","$D2026-02-25T11:56:22.193Z"],["b_PxUulWDIzZH","$D2026-02-25T11:56:30.013Z"],["b_E2SsZ6WWsDI","$D2026-02-25T11:56:39.828Z"],["b_HSgyQx9I5pF","$D2026-02-25T11:57:29.994Z"],["b_gLeudNuFDkU","$D2026-02-25T11:57:53.359Z"],["b_cDKrvP7SAvf","$D2026-02-25T11:58:01.531Z"],["b_34aDta4pMTI","$D2026-02-25T11:58:11.858Z"],["b_TX9rXtsTQ82","$D2026-02-25T11:58:22.972Z"],["b_GIVVIJbDM6V","$D2026-02-25T11:58:38.839Z"],["b_Vo6IgJznNji","$D2026-02-25T11:58:54.209Z"],["b_DreHsD77MOR","$D2026-02-25T11:59:03.561Z"],["b_riaZwvmAfRN","$D2026-02-25T11:59:09.821Z"],["b_4itTUXD8hUC","$D2026-02-25T11:59:23.760Z"],["b_ZEQRVifAbhO","$D2026-02-25T11:59:29.885Z"],["b_DRWs1twsM5g","$D2026-02-25T11:59:45.992Z"],["b_qGHxf93VIKA","$D2026-02-25T11:59:51.766Z"],["b_Kt7vqrMv4w1","$D2026-02-25T12:00:19.571Z"],["b_96FEJ4zA1oq","$D2026-02-25T12:51:05.582Z"],["b_Q49McABIsUC","$D2026-02-25T12:51:14.713Z"],["b_h0BZRSo6TTR","$D2026-02-25T12:51:53.244Z"],["b_TqpGj6oWaKd","$D2026-02-25T12:52:06.458Z"],["b_J80BFoml2pl","$D2026-02-25T12:53:49.628Z"],["b_Fi0Tu4s07B3","$D2026-02-25T12:53:58.816Z"],["b_iqIxuCP3b1K","$D2026-02-25T12:54:07.284Z"],["b_lUBy841To79","$D2026-02-25T12:54:23.972Z"],["b_sqKO2voFO6B","$D2026-02-25T12:55:11.045Z"],["b_ckXOK3mxSHG","$D2026-02-25T12:55:20.111Z"],["b_3i9Gsts8Jht","$D2026-02-25T12:55:29.003Z"],["b_uaTA8D276r6","$D2026-02-25T12:55:42.584Z"],["b_BJYpIYbJv0E","$D2026-02-25T12:55:51.007Z"],["b_TFNAjabIVlp","$D2026-02-25T12:56:20.029Z"],["b_Ln1vQljQeHQ","$D2026-02-25T12:56:29.986Z"],["b_uf48xHHlTqE","$D2026-03-25T10:56:06.806Z"],["b_65IXXTK29rY","$D2026-03-25T10:56:13.304Z"],["b_sSBzS5ymekZ","$D2026-04-27T17:40:04.323Z"],["b_lV0X8G126ja","$D2026-04-27T17:40:09.806Z"],["b_6vS3RQlSQwg","$D2026-04-27T17:40:15.230Z"],["b_zcGHJDCVmLu","$D2026-04-27T17:40:30.935Z"],["b_Ms3imZ0YFeR","$D2026-04-27T17:40:36.690Z"],["b_4hITcO9nVBy","$D2026-04-27T17:40:43.699Z"],["b_gHZMollOOGs","$D2026-04-27T17:40:49.513Z"],["b_YeBVhaQbg6Z","$D2026-04-27T17:41:10.406Z"],["b_m6rnPASG3Yj","$D2026-04-27T17:41:30.934Z"],["b_avRGK9txito","$D2026-04-27T17:41:36.296Z"],["b_W57qXFv1cJw","$D2026-04-27T17:41:47.732Z"],["b_hQbSYaJ8ulg","$D2026-04-27T17:42:00.740Z"],["b_51nVfIF7akP","$D2026-04-27T17:43:20.402Z"],["b_6dPCSwApAMN","$D2026-04-27T17:43:30.648Z"],["b_Pk4RK1M4pmW","$D2026-04-27T17:43:38.804Z"],["b_SdMARU1HCsX","$D2026-04-30T08:46:13.016Z"],["b_5nWsX8saYMC","$D2026-04-30T08:46:26.407Z"],["b_a3qNROTcNhQ","$D2026-04-30T08:46:34.660Z"],["b_4uWwbVbDt1l","$D2026-04-30T08:56:31.059Z"],["b_3rEAKWZhGc8","$D2026-04-30T08:56:37.500Z"],["b_7Bevq04eWes","$D2026-04-30T08:56:46.870Z"],["b_NMPgkYxIUgo","$D2026-04-30T08:56:56.951Z"],["b_g5rlQAjBjnm","$D2026-04-30T08:57:18.254Z"],["b_5YGUG8j7SJd","$D2026-04-30T09:07:47.361Z"],["b_INU94xWXyiL","$D2026-04-30T09:07:55.069Z"],["b_euQ2sCtiZcB","$D2026-04-30T09:07:59.986Z"],["b_QcFxKlevL9k","$D2026-04-30T09:08:04.760Z"],["b_k7m13SWy2Rv","$D2026-04-30T09:08:09.666Z"],["b_DZdOe7CMDHv","$D2026-04-30T09:08:14.960Z"],["b_YelOYrHa9Lt","$D2026-04-30T09:08:33.304Z"],["b_TSHglhkLhqy","$D2026-04-30T09:08:41.332Z"],["b_J2GE9suC9wd","$D2026-04-30T09:08:47.423Z"],["b_33X30QLTy4M","$D2026-04-30T09:09:02.423Z"],["b_BPZhtb48gsg","$D2026-04-30T09:09:12.107Z"],["b_NE651eVKoub","$D2026-04-30T09:09:21.195Z"],["b_8mPHuMDW9Is","$D2026-04-30T09:16:00.745Z"],["b_4cbFF1q5xAo","$D2026-04-30T09:16:05.823Z"],["b_8Q0BXdbiwBk","$D2026-04-30T09:16:10.952Z"],["b_dAyxibtEWsu","$D2026-04-30T09:16:16.696Z"],["b_2x1KYwWw17i","$D2026-04-30T09:16:21.940Z"],["b_RDIhgp8shtR","$D2026-04-30T09:16:26.978Z"],["b_aa9oiN8ZNrX","$D2026-04-30T09:16:32.592Z"],["b_MSQWvHYPfvt","$D2026-04-30T09:16:37.886Z"]] 11a:[["b_4uWwbVbDt1l",false],["b_3rEAKWZhGc8",false],["b_7Bevq04eWes",false],["b_NMPgkYxIUgo",false],["b_g5rlQAjBjnm",false],["b_5YGUG8j7SJd",false],["b_INU94xWXyiL",false],["b_euQ2sCtiZcB",false],["b_QcFxKlevL9k",false],["b_k7m13SWy2Rv",false],["b_DZdOe7CMDHv",false],["b_YelOYrHa9Lt",false],["b_TSHglhkLhqy",false],["b_J2GE9suC9wd",false],["b_33X30QLTy4M",false],["b_BPZhtb48gsg",false],["b_NE651eVKoub",false],["b_8mPHuMDW9Is",false],["b_4cbFF1q5xAo",false],["b_8Q0BXdbiwBk",false],["b_dAyxibtEWsu",false],["b_2x1KYwWw17i",false],["b_RDIhgp8shtR",false],["b_aa9oiN8ZNrX",false],["b_MSQWvHYPfvt",false]] 11b:[["b_4uWwbVbDt1l","$undefined"],["b_3rEAKWZhGc8","$undefined"],["b_7Bevq04eWes","$undefined"],["b_NMPgkYxIUgo","$undefined"],["b_g5rlQAjBjnm",{"deploymentId":"dpl_8WhyZCNbJeH7MjDgQJ4D16fJ5YGP"}],["b_5YGUG8j7SJd","$undefined"],["b_INU94xWXyiL","$undefined"],["b_euQ2sCtiZcB","$undefined"],["b_QcFxKlevL9k","$undefined"],["b_k7m13SWy2Rv","$undefined"],["b_DZdOe7CMDHv","$undefined"],["b_YelOYrHa9Lt","$undefined"],["b_TSHglhkLhqy","$undefined"],["b_J2GE9suC9wd","$undefined"],["b_33X30QLTy4M","$undefined"],["b_BPZhtb48gsg","$undefined"],["b_NE651eVKoub","$undefined"],["b_8mPHuMDW9Is","$undefined"],["b_4cbFF1q5xAo","$undefined"],["b_8Q0BXdbiwBk","$undefined"],["b_dAyxibtEWsu","$undefined"],["b_2x1KYwWw17i","$undefined"],["b_RDIhgp8shtR","$undefined"],["b_aa9oiN8ZNrX","$undefined"],["b_MSQWvHYPfvt","$undefined"]] 11c:[["b_4uWwbVbDt1l",null],["b_3rEAKWZhGc8",null],["b_7Bevq04eWes",null],["b_NMPgkYxIUgo",null],["b_g5rlQAjBjnm",null],["b_5YGUG8j7SJd",null],["b_INU94xWXyiL",null],["b_euQ2sCtiZcB",null],["b_QcFxKlevL9k",null],["b_k7m13SWy2Rv",null],["b_DZdOe7CMDHv",null],["b_YelOYrHa9Lt",null],["b_TSHglhkLhqy",null],["b_J2GE9suC9wd",null],["b_33X30QLTy4M",null],["b_BPZhtb48gsg",null],["b_NE651eVKoub",null],["b_8mPHuMDW9Is",null],["b_4cbFF1q5xAo",null],["b_8Q0BXdbiwBk",null],["b_dAyxibtEWsu",null],["b_2x1KYwWw17i",null],["b_RDIhgp8shtR",null],["b_aa9oiN8ZNrX",null],["b_MSQWvHYPfvt",null]] 11d:[["b_4uWwbVbDt1l",true],["b_3rEAKWZhGc8",true],["b_7Bevq04eWes",true],["b_NMPgkYxIUgo",true],["b_g5rlQAjBjnm",true],["b_5YGUG8j7SJd",true],["b_INU94xWXyiL",true],["b_euQ2sCtiZcB",true],["b_QcFxKlevL9k",true],["b_k7m13SWy2Rv",true],["b_DZdOe7CMDHv",true],["b_YelOYrHa9Lt",true],["b_TSHglhkLhqy",true],["b_J2GE9suC9wd",true],["b_33X30QLTy4M",true],["b_BPZhtb48gsg",true],["b_NE651eVKoub",true],["b_8mPHuMDW9Is",true],["b_4cbFF1q5xAo",true],["b_8Q0BXdbiwBk",true],["b_dAyxibtEWsu",true],["b_2x1KYwWw17i",true],["b_RDIhgp8shtR",true],["b_aa9oiN8ZNrX",true],["b_MSQWvHYPfvt",true]] 11e:[["b_4uWwbVbDt1l",true],["b_3rEAKWZhGc8",true],["b_7Bevq04eWes",true],["b_NMPgkYxIUgo",true],["b_g5rlQAjBjnm",true],["b_5YGUG8j7SJd",true],["b_INU94xWXyiL",true],["b_euQ2sCtiZcB",true],["b_QcFxKlevL9k",true],["b_k7m13SWy2Rv",true],["b_DZdOe7CMDHv",true],["b_YelOYrHa9Lt",true],["b_TSHglhkLhqy",true],["b_J2GE9suC9wd",true],["b_33X30QLTy4M",true],["b_BPZhtb48gsg",true],["b_NE651eVKoub",true],["b_8mPHuMDW9Is",true],["b_4cbFF1q5xAo",true],["b_8Q0BXdbiwBk",true],["b_dAyxibtEWsu",true],["b_2x1KYwWw17i",true],["b_RDIhgp8shtR",true],["b_aa9oiN8ZNrX",true],["b_MSQWvHYPfvt",true]] 11f:[] 120:T76e5d,[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color palette for KILLMAY: dark theme with emerald accents */ --background: oklch(0.08 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.5 0.15 146.5); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.15 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.3 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.55 0.18 156); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.2 0 0); --input: oklch(0.15 0 0); --ring: oklch(0.55 0.18 156); --chart-1: oklch(0.55 0.18 156); --chart-2: oklch(0.6 0.12 200); --chart-3: oklch(0.5 0.15 146.5); --chart-4: oklch(0.4 0.1 180); --chart-5: oklch(0.45 0.15 170); --radius: 0.625rem; --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.55 0.18 156); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.5 0.15 146.5); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.55 0.18 156); } .dark { /* ... existing code ... */ } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [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": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.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" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/stats.tsx" isEdit="true" isMerged="true" export function Stats() { const stats = [ { number: "10K+", label: "Utilizadores Ativos" }, { number: "5000+", label: "Produtos Listados" }, { number: "200+", label: "Quintas Conectadas" }, { number: "50+", label: "Consultores Especializados" }, ] return (

{stats.map((stat) => (

{stat.number}

{stat.label}

))}

) } [V0_FILE]typescriptreact:file="components/pillars.tsx" isEdit="true" isMerged="true" export function Pillars() { const pillars = [ { title: "Marketplace", description: "Descubra e negocie produtos de tecnologia premium de vendedores verificados em toda Angola.", icon: "🛍️", }, { title: "AgroTech e Quinta Inteligente", description: "Capacitando agricultores com tecnologia moderna, insights de dados e orientação de especialistas.", icon: "🌾", }, { title: "Apoio Técnico", description: "Consultores especializados disponíveis sob demanda prontos para resolver seus desafios técnicos.", icon: "🔧", }, { title: "Academia", description: "Aprenda novas competências com nossos programas educacionais abrangentes e certificações.", icon: "📚", }, ] return (

Os Quatro Pilares da Inovação

Uma plataforma abrangente desenvolvida para o crescimento de Angola

{pillars.map((pillar) => (

{pillar.icon}

{pillar.title}

{pillar.description}

))}

) } [V0_FILE]typescriptreact:file="components/features.tsx" isEdit="true" isMerged="true" export function Features() { const features = [ { title: "Integração Perfeita", description: "Todos os serviços funcionam perfeitamente juntos, criando uma experiência unificada.", }, { title: "Análise em Tempo Real", description: "Acompanhe seu progresso com painéis e insights abrangentes.", }, { title: "Plataforma Segura", description: "Segurança de nível empresarial protegendo seus dados e transações.", }, { title: "Comunidade de Especialistas", description: "Conecte-se com milhares de especialistas e inovadores em toda Angola.", }, { title: "Apoio 24/7", description: "Atendimento ao cliente contínuo em português e inglês.", }, { title: "Mobile First", description: "Otimizado para dispositivos móveis com aplicativos nativos para iOS e Android.", }, ] return (

Por Que Escolher KILLMAY

Construído para Angolanos, por inovadores

{features.map((feature) => (

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/cta.tsx" isEdit="true" isMerged="true" export function CTA() { return (

Pronto para Transformar o Futuro de Angola?

Junte-se a milhares de inovadores, empreendedores e agricultores construindo o futuro com KILLMAY.

) } [V0_FILE]typescriptreact:file="app/(auth)/layout.tsx" isMerged="true" import type React from "react" export default function AuthLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/(auth)/login/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/app/auth-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { toast } from "sonner" import Link from "next/link" export default function LoginPage() { const router = useRouter() const { signIn, loading } = useAuth() const [email, setEmail] = useState("") const [password, setPassword] = useState("") const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() try { await signIn(email, password) toast.success("Login realizado com sucesso!") router.push("/dashboard") } catch (error) { toast.error(error instanceof Error ? error.message : "Erro ao fazer login") } } return (

KILLMAY

Iniciar Sessão Bem-vindo de volta ao KILLMAY

Não tem conta?{" "} Crie uma agora

Demo: use qualquer email/senha

) } [V0_FILE]typescriptreact:file="app/(auth)/signup/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/app/auth-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "sonner" import Link from "next/link" export default function SignupPage() { const router = useRouter() const { signUp, loading } = useAuth() const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [role, setRole] = useState("user") const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() try { await signUp(name, email, password, role) toast.success("Conta criada com sucesso!") router.push("/dashboard") } catch (error) { toast.error(error instanceof Error ? error.message : "Erro ao criar conta") } } return (

KILLMAY

Criar Conta Junte-se ao ecossistema KILLMAY

Já tem conta?{" "} Faça login

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Header } from "@/components/header" import { Hero } from "@/components/hero" import { Features } from "@/components/features" import { Stats } from "@/components/stats" import { Pillars } from "@/components/pillars" import { CTA } from "@/components/cta" import { Footer } from "@/components/footer" import { Suspense } from "react" function HomeContent() { return (

) } export default function Home() { return ( Carregando...}> ) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Menu, X } from "lucide-react" import Link from "next/link" import Image from "next/image" import { useAuth } from "@/app/auth-context" export function Header() { const [isOpen, setIsOpen] = useState(false) const { user } = useAuth() return (

KILLMAY

{user ? ( ) : ( <> )}

{isOpen && (

Recursos Plataforma Contacto {user ? ( ) : ( <> )}

)}

) } [V0_FILE]typescriptreact:file="app/(protected)/agrotech/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useAuth } from "@/app/auth-context" import { ProtectedLayout } from "@/components/protected-layout" import { PlantationDashboard } from "@/components/agrotech/plantation-dashboard" import { FisheryDashboard } from "@/components/agrotech/fishery-dashboard" import { WeatherSection } from "@/components/agrotech/weather-section" import { ReportsSection } from "@/components/agrotech/reports-section" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Leaf, Fish, Video } from "lucide-react" import { AgroTechVideos } from "@/components/agrotech/agrotech-videos" export default function AgroTechPage() { const { user } = useAuth() return (

Dashboard AgroTech

Gerencie suas plantações e piscicultura com dados em tempo real

Plantações Piscicultura

Relatórios

) } [V0_FILE]typescriptreact:file="components/agrotech/plantation-dashboard.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" import { Plus, Droplet, Thermometer } from "lucide-react" const plantationData = [ { name: "Jan", rendimento: 2400, humidade: 65 }, { name: "Fev", rendimento: 3200, humidade: 70 }, { name: "Mar", rendimento: 2800, humidade: 68 }, { name: "Abr", rendimento: 3900, humidade: 72 }, { name: "Mai", rendimento: 3490, humidade: 75 }, { name: "Jun", rendimento: 4300, humidade: 78 }, ] const plantations = [ { id: 1, name: "Milho - Lote A", area: 25.5, plantedDate: "2024-03-15", expectedHarvest: "2024-08-15", status: "Crescimento", humidity: 72, temperature: 28, }, { id: 2, name: "Feijão - Lote B", area: 18.3, plantedDate: "2024-04-01", expectedHarvest: "2024-07-01", status: "Floração", humidity: 68, temperature: 26, }, { id: 3, name: "Mandioca - Lote C", area: 32.0, plantedDate: "2024-02-20", expectedHarvest: "2024-12-20", status: "Desenvolvimento", humidity: 75, temperature: 27, }, ] export function PlantationDashboard() { return (

{/* Gráficos */}

Rendimento Mensal Produção em kg por mês Humidade do Solo Variação ao longo do mês

{/* Lista de Plantações */}

Suas Plantações Gerencie seus lotes de cultivo

{plantations.map((plantation) => (

{plantation.name}

Área: {plantation.area} hectares

{plantation.status}

Humidade

{plantation.humidity}%

Temperatura

{plantation.temperature}°C

Plantado em

{plantation.plantedDate}

Colheita prevista

{plantation.expectedHarvest}

))}

) } [V0_FILE]typescriptreact:file="components/agrotech/fishery-dashboard.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { PieChart, Pie, Cell, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" import { Plus } from "lucide-react" const fishSpecies = [ { name: "Tilápia", value: 45, color: "#10b981" }, { name: "Carpa", value: 30, color: "#3b82f6" }, { name: "Catfish", value: 25, color: "#f59e0b" }, ] const waterQualityData = [ { name: "Seg", pH: 7.2, oxigenio: 6.8 }, { name: "Ter", pH: 7.3, oxigenio: 7.1 }, { name: "Qua", pH: 7.1, oxigenio: 6.9 }, { name: "Qui", pH: 7.2, oxigenio: 7.2 }, { name: "Sex", pH: 7.3, oxigenio: 7.0 }, { name: "Sab", pH: 7.2, oxigenio: 7.3 }, { name: "Dom", pH: 7.1, oxigenio: 6.8 }, ] const fishPonds = [ { id: 1, name: "Tanque 1 - Tilápia", area: 500, depth: 2.0, fishCount: 5000, waterTemp: 28, pH: 7.2, status: "Ótimo", }, { id: 2, name: "Tanque 2 - Carpa", area: 400, depth: 1.8, fishCount: 3500, waterTemp: 27, pH: 7.1, status: "Bom", }, { id: 3, name: "Tanque 3 - Catfish", area: 350, depth: 2.2, fishCount: 2800, waterTemp: 29, pH: 7.3, status: "Ótimo", }, ] export function FisheryDashboard() { return (

{/* Gráficos */}

Distribuição de Espécies Percentual de peixes por espécie `${name}: ${value}%`} outerRadius={80} fill="#8884d8" dataKey="value" > {fishSpecies.map((entry, index) => ( ))} Qualidade da Água Monitoramento de pH e oxigênio

{/* Lista de Tanques */}

Seus Tanques Monitorar a saúde e produtividade

{fishPonds.map((pond) => (

{pond.name}

Área: {pond.area}m² | Profundidade: {pond.depth}m

{pond.status}

Número de Peixes

{pond.fishCount.toLocaleString()}

Temperatura

{pond.waterTemp}°C

{pond.pH}

Densidade de Estoque

{(pond.fishCount / pond.area).toFixed(1)} peixes/m²

))}

) } [V0_FILE]typescriptreact:file="components/agrotech/weather-section.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Cloud, Droplets, Wind, Sun } from "lucide-react" const weatherData = { current: { temp: 28, condition: "Parcialmente Nublado", humidity: 72, windSpeed: 12, uvIndex: 7, }, forecast: [ { day: "Segunda", high: 30, low: 22, condition: "Ensolarado", icon: "☀️" }, { day: "Terça", high: 29, low: 21, condition: "Parcialmente Nublado", icon: "⛅" }, { day: "Quarta", high: 27, low: 20, condition: "Chuva", icon: "🌧️" }, { day: "Quinta", high: 28, low: 21, condition: "Ensolarado", icon: "☀️" }, { day: "Sexta", high: 31, low: 23, condition: "Ensolarado", icon: "☀️" }, ], } export function WeatherSection() { return (

{/* Clima Atual */} Condições Climáticas Atuais Dados em tempo real da sua região

Temperatura

{weatherData.current.temp}°C

Humidade

{weatherData.current.humidity}%

Vento

{weatherData.current.windSpeed} km/h

UV Index

{weatherData.current.uvIndex}

{/* Previsão de 5 Dias */} Previsão de 5 Dias

{weatherData.forecast.map((day, index) => (

{day.day}

{day.icon}

{day.condition}

{day.high}° {day.low}°

))}

) } [V0_FILE]typescriptreact:file="components/agrotech/reports-section.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" import { Download, FileText } from "lucide-react" const productionData = [ { month: "Jan", plantacoes: 2400, piscicultura: 1800 }, { month: "Fev", plantacoes: 3200, piscicultura: 2100 }, { month: "Mar", plantacoes: 2800, piscicultura: 1900 }, { month: "Abr", plantacoes: 3900, piscicultura: 2400 }, { month: "Mai", plantacoes: 3490, piscicultura: 2800 }, { month: "Jun", plantacoes: 4300, piscicultura: 3200 }, ] const reportsList = [ { id: 1, name: "Relatório Mensal - Junho 2024", date: "2024-06-30", type: "PDF" }, { id: 2, name: "Análise de Rendimento Q2", date: "2024-06-15", type: "PDF" }, { id: 3, name: "Dados de Qualidade da Água", date: "2024-06-10", type: "CSV" }, { id: 4, name: "Previsão de Colheita", date: "2024-05-28", type: "PDF" }, ] export function ReportsSection() { return (

{/* Gráfico de Comparação */} Produção Comparativa Plantações vs Piscicultura (em kg) {/* Lucro Acumulado */} Receita Acumulada Evolução do faturamento ao longo do ano {/* Lista de Relatórios */} Relatórios Disponíveis Baixe e visualize seus relatórios

{reportsList.map((report) => (

{report.name}

{report.date}

{report.type}

))}

{/* Estatísticas Gerais */}

Produção Total (6 meses)

17.790 kg

+12% comparado ao período anterior

ROI Médio

42%

Retorno sobre investimento

Eficiência

87%

Taxa de utilização de recursos

) } [V0_FILE]typescriptreact:file="app/(protected)/marketplace/page.tsx" isMerged="true" "use client" import { useAuth } from "@/app/auth-context" import { ProtectedLayout } from "@/components/protected-layout" import { ProductCatalog } from "@/components/marketplace/product-catalog" import { CartSummary } from "@/components/marketplace/cart-summary" import { useState } from "react" export default function MarketplacePage() { const { user } = useAuth() const [cartItems, setCartItems] = useState([]) return (

Marketplace Tecnológico

Descobrir e compre os melhores produtos tecnológicos para o seu negócio

) } [V0_FILE]jpg:file="public/android-smartphone.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/android-smartphone-7aXcfvVLGxgcLyDEK6bWJw6Z1Ku53H.jpg" isMerged="true" [V0_FILE]png:file="public/gaming-laptop.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gaming-laptop-WoVwCXEMnDTq3rs0KT7IeDwJCG2nPp.png" isMerged="true" [V0_FILE]jpg:file="public/wifi-router.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wifi-router-eoeybQKoAiwXTKGmdPBEkrPzsolACg.jpg" isMerged="true" [V0_FILE]jpg:file="public/4k-monitor.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/4k-monitor-XRZkukXfQ5demGEVB2nqvses9OmJZv.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-camera.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-camera-iRTJt6Lfi0aUkF93riTr0TUjDo9S4L.jpg" isMerged="true" [V0_FILE]jpg:file="public/wireless-headphones.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wireless-headphones-FnHAPE4kAzQBfRz93yEU0uO6imXEd3.jpg" isMerged="true" [V0_FILE]jpg:file="public/tablet-pro.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tablet-pro-BAwCoXCkzJ2UFKZenck0S5l0bAzYfj.jpg" isMerged="true" [V0_FILE]png:file="public/modern-smartwatch.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-smartwatch-Qfq9e3mMHVwXcaGeqfYxFryfKJn7AR.png" isMerged="true" [V0_FILE]png:file="public/mechanical-keyboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mechanical-keyboard-gLToWT5pgcA8tVqmY6T1IfJllDE1iX.png" isMerged="true" [V0_FILE]typescriptreact:file="components/support/support-booking.tsx" isMerged="true" "use client" import type React from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { useState } from "react" import { toast } from "sonner" const SERVICES = [ "Reparação de Computador", "Instalação de Software", "Limpeza e Manutenção", "Suporte de Rede", "Recuperação de Dados", "Instalação de Equipamento", "Consultoria Técnica", ] const TECHNICIANS = [ { id: 1, name: "João Silva", specialties: "Computadores, Redes", rating: 4.9 }, { id: 2, name: "Maria Santos", specialties: "Software, Dados", rating: 4.8 }, { id: 3, name: "Pedro Oliveira", specialties: "Hardware, Manutenção", rating: 4.7 }, { id: 4, name: "Ana Costa", specialties: "Redes, Consultoria", rating: 4.9 }, ] const TIME_SLOTS = ["09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00"] export function SupportBooking() { const [formData, setFormData] = useState({ service: "", date: "", time: "", technician: "", description: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!formData.service || !formData.date || !formData.time || !formData.technician) { toast.error("Preencha todos os campos obrigatórios") return } toast.success("Serviço agendado com sucesso! Recebará confirmação por email.") setFormData({ service: "", date: "", time: "", technician: "", description: "" }) } return (

{/* Formulário */} Agendar Novo Serviço Preencha os dados abaixo para agendar um técnico

{/* Tipo de Serviço */}

Tipo de Serviço *

{/* Técnico */}

Selecione um Técnico *

{/* Data e Hora */}

Data * setFormData({ ...formData, date: e.target.value })} min={new Date().toISOString().split("T")[0]} />

Hora *

{/* Descrição */}

Descrição do Problema

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

<Button type="submit" className="w-full">
              Agendar Serviço
            </Button>
          </form>
        </CardContent>
      </Card>

{/* Técnicos Disponíveis */}
      <Card className="lg:col-span-1 h-fit">
        <CardHeader>
          <CardTitle className="text-lg">Técnicos Disponíveis</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {TECHNICIANS.map((tech) => (
            <div key={tech.id} className="border border-border rounded-lg p-3 hover:bg-muted/50 transition">
              <div className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-bold">
                  {tech.name.charAt(0)}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="font-semibold text-sm text-foreground">{tech.name}</p>
                  <p className="text-xs text-muted-foreground">{tech.specialties}</p>
                  <div className="flex items-center gap-1 mt-1">
                    <span className="text-xs text-yellow-500">⭐ {tech.rating}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/academy/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { ProtectedLayout } from "@/components/protected-layout"
import { AcademyCourses } from "@/components/academy/academy-courses"
import { AcademyProgress } from "@/components/academy/academy-progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, TrendingUp, Award } from "lucide-react"
import Link from "next/link"

export default function AcademyPage() {
  const { user } = useAuth()

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div className="flex justify-between items-start">
          <div>
            <h1 className="text-4xl font-bold text-foreground">Academia KILLMAY</h1>
            <p className="text-muted-foreground mt-2">
              Aprenda com os melhores cursos online sobre tecnologia e agricultura
            </p>
          </div>
          <Link href="/academy/certificates">
            <button className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
              <Award className="w-4 h-4" />
              Meus Certificados
            </button>
          </Link>
        </div>

<Tabs defaultValue="courses" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="courses" className="flex items-center gap-2">
              <BookOpen className="h-4 w-4" />
              Cursos
            </TabsTrigger>
            <TabsTrigger value="progress" className="flex items-center gap-2">
              <TrendingUp className="h-4 w-4" />
              Meu Progresso
            </TabsTrigger>
            <TabsTrigger value="certificates" className="flex items-center gap-2">
              <Award className="h-4 w-4" />
              Certificados
            </TabsTrigger>
          </TabsList>

<TabsContent value="certificates" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div className="text-center py-12">
                <Award className="w-16 h-16 text-muted-foreground/30 mx-auto mb-4" />
                <p className="text-muted-foreground">Complete cursos para desbloquear certificados</p>
                <Link href="/academy/certificates" className="mt-4 inline-block text-emerald-600 hover:text-emerald-700 font-semibold">
                  Ver todos os certificados
                </Link>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="components/academy/academy-courses.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Star, Users, Clock, Search, Award } from "lucide-react"
import { useState } from "react"
import Link from "next/link"
import { useCertificates } from "@/app/certificates-context"
import { useAuth } from "@/app/auth-context"

const COURSES = [
  {
    id: 1,
    title: "Introdução ao Linux",
    description: "Aprenda os fundamentos do sistema operacional Linux",
    category: "Tecnologia",
    level: "Iniciante",
    duration: "4 semanas",
    students: 1234,
    rating: 4.8,
    price: 15000,
    image: "/linux-course.jpg",
    instructor: "João Silva",
    lessons: 24,
  },
  {
    id: 2,
    title: "Agricultura Digital",
    description: "Modernize sua produção agrícola com tecnologia",
    category: "AgroTech",
    level: "Intermediário",
    duration: "6 semanas",
    students: 856,
    rating: 4.9,
    price: 25000,
    image: "/agriculture-tech.jpg",
    instructor: "Maria Santos",
    lessons: 32,
  },
  {
    id: 3,
    title: "Segurança em Redes",
    description: "Proteja sua infraestrutura de ataques cibernéticos",
    category: "Tecnologia",
    level: "Avançado",
    duration: "8 semanas",
    students: 567,
    rating: 4.7,
    price: 35000,
    image: "/cybersecurity-network.png",
    instructor: "Pedro Oliveira",
    lessons: 40,
  },
  {
    id: 4,
    title: "Gestão de Piscicultura",
    description: "Técnicas modernas para criação de peixes",
    category: "AgroTech",
    level: "Iniciante",
    duration: "5 semanas",
    students: 432,
    rating: 4.6,
    price: 18000,
    image: "/fish-farming.jpg",
    instructor: "Ana Costa",
    lessons: 28,
  },
  {
    id: 5,
    title: "Python para Iniciantes",
    description: "Domine a linguagem Python do zero",
    category: "Programação",
    level: "Iniciante",
    duration: "7 semanas",
    students: 2341,
    rating: 4.9,
    price: 20000,
    image: "/python-programming.jpg",
    instructor: "Mariana Ferreira",
    lessons: 35,
  },
  {
    id: 6,
    title: "Marketing Digital",
    description: "Estratégias para crescer seu negócio online",
    category: "Negócios",
    level: "Intermediário",
    duration: "4 semanas",
    students: 1678,
    rating: 4.5,
    price: 12000,
    image: "/digital-marketing.jpg",
    instructor: "Carlos Mendes",
    lessons: 20,
  },
]

const CATEGORIES = ["Todos", "Tecnologia", "AgroTech", "Programação", "Negócios"]
const LEVELS = ["Todos", "Iniciante", "Intermediário", "Avançado"]

export function AcademyCourses() {
  const { addCertificate, certificates } = useCertificates()
  const { user } = useAuth()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("Todos")
  const [selectedLevel, setSelectedLevel] = useState("Todos")
  const [completingCourseId, setCompletingCourseId] = useState<number | null>(null)

const completedCourses = certificates.map((cert) => cert.courseId)

const handleCompleteCourse = (course: (typeof COURSES)[0]) => {
    if (!user || completedCourses.includes(course.id)) return

setCompletingCourseId(course.id)
    setTimeout(() => {
      const certificateNumber = `KM-${Date.now()}-${Math.random().toString().slice(2, 8).toUpperCase()}`
      addCertificate({
        id: `cert-${course.id}-${Date.now()}`,
        courseId: course.id,
        courseName: course.title,
        studentName: user.name,
        completionDate: new Date(),
        certificateNumber,
        progress: 100,
      })
      setCompletingCourseId(null)
    }, 1500)
  }

const filteredCourses = COURSES.filter((course) => {
    const matchesSearch = course.title.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesCategory = selectedCategory === "Todos" || course.category === selectedCategory
    const matchesLevel = selectedLevel === "Todos" || course.level === selectedLevel
    return matchesSearch && matchesCategory && matchesLevel
  })

return (
    <div className="space-y-6">
      {/* Barra de Pesquisa e Filtros */}
      <div className="flex flex-col md:flex-row gap-3">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-3 h-5 w-5 text-muted-foreground" />
          <Input
            placeholder="Pesquisar cursos..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
        <Select value={selectedCategory} onValueChange={setSelectedCategory}>
          <SelectTrigger className="w-full md:w-48">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {CATEGORIES.map((cat) => (
              <SelectItem key={cat} value={cat}>
                {cat}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Select value={selectedLevel} onValueChange={setSelectedLevel}>
          <SelectTrigger className="w-full md:w-48">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {LEVELS.map((level) => (
              <SelectItem key={level} value={level}>
                {level}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

{/* Grid de Cursos */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredCourses.map((course) => (
          <Link key={course.id} href={`/academy/${course.id}`}>
            <Card className="overflow-hidden hover:shadow-lg transition-shadow flex flex-col cursor-pointer">
              {/* Imagem do Curso */}
              <div className="aspect-video overflow-hidden bg-muted">
                <img
                  src={course.image || "/placeholder.svg"}
                  alt={course.title}
                  className="w-full h-full object-cover hover:scale-105 transition-transform"
                />
              </div>

<CardContent className="pt-4 flex-1 flex flex-col">
                <div className="flex items-start justify-between mb-2">
                  <Badge variant="outline" className="text-xs">
                    {course.category}
                  </Badge>
                  <Badge variant="outline" className="text-xs bg-blue-500/20 text-blue-700 dark:text-blue-400">
                    {course.level}
                  </Badge>
                </div>

<h3 className="font-semibold text-foreground mb-1 line-clamp-2">{course.title}</h3>
                <p className="text-sm text-muted-foreground mb-3 line-clamp-2">{course.description}</p>

<p className="text-xs text-muted-foreground mb-2">Por {course.instructor}</p>

{/* Stats */}
                <div className="flex items-center justify-between text-xs text-muted-foreground mb-3">
                  <div className="flex items-center gap-1">
                    <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                    <span>{course.rating}</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Users className="h-3 w-3" />
                    <span>{course.students.toLocaleString("pt-PT")}</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Clock className="h-3 w-3" />
                    <span>{course.duration}</span>
                  </div>
                </div>

<div className="mt-auto pt-3 border-t border-border">
                  <div className="flex items-center justify-between mb-3">
                    <p className="text-lg font-bold text-foreground">{(course.price / 1000).toFixed(0)}k Kz</p>
                    <span className="text-xs text-muted-foreground">{course.lessons} aulas</span>
                  </div>
                  {completedCourses.includes(course.id) ? (
                    <Button className="w-full bg-emerald-600 hover:bg-emerald-700 text-white gap-2" disabled>
                      <Award className="w-4 h-4" />
                      Concluído
                    </Button>
                  ) : (
                    <Button
                      className="w-full"
                      onClick={(e) => {
                        e.preventDefault()
                        handleCompleteCourse(course)
                      }}
                      disabled={completingCourseId === course.id}
                    >
                      {completingCourseId === course.id ? "Gerando Certificado..." : "Completar Curso"}
                    </Button>
                  )}
                </div>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>

{filteredCourses.length === 0 && (
        <div className="text-center py-12">
          <p className="text-muted-foreground">Nenhum curso encontrado com esses filtros.</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/academy/academy-progress.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Award, Play, CheckCircle } from "lucide-react"

const enrolledCourses = [
  {
    id: 1,
    title: "Introdução ao Linux",
    progress: 75,
    lessons: 24,
    completed: 18,
    nextLesson: "Comandos Avançados",
    certificateEarned: false,
  },
  {
    id: 2,
    title: "Python para Iniciantes",
    progress: 45,
    lessons: 35,
    completed: 16,
    nextLesson: "Funções e Módulos",
    certificateEarned: false,
  },
  {
    id: 3,
    title: "Marketing Digital",
    progress: 100,
    lessons: 20,
    completed: 20,
    nextLesson: null,
    certificateEarned: true,
  },
  {
    id: 4,
    title: "Agricultura Digital",
    progress: 30,
    lessons: 32,
    completed: 10,
    nextLesson: "Sensores Inteligentes",
    certificateEarned: false,
  },
]

const certificates = [
  {
    id: 1,
    course: "Marketing Digital",
    date: "2024-10-15",
    certificateNumber: "CERT-2024-001",
  },
]

export function AcademyProgress() {
  return (
    <div className="space-y-6">
      {/* Certificados */}
      {certificates.length > 0 && (
        <Card className="border-green-500/50 bg-green-500/5">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Award className="h-5 w-5 text-green-600 dark:text-green-400" />
              Certificados Obtidos
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {certificates.map((cert) => (
              <div key={cert.id} className="border border-green-500/20 rounded-lg p-4 bg-green-500/10">
                <div className="flex items-start justify-between">
                  <div>
                    <p className="font-semibold text-foreground">{cert.course}</p>
                    <p className="text-sm text-muted-foreground">Obtido em {cert.date}</p>
                    <p className="text-xs text-muted-foreground mt-1">Certificado #{cert.certificateNumber}</p>
                  </div>
                  <Button size="sm" variant="outline" className="bg-transparent">
                    Descarregar
                  </Button>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      )}

{/* Cursos em Progresso */}
      <Card>
        <CardHeader>
          <CardTitle>Cursos em Progresso</CardTitle>
          <CardDescription>Acompanhe seu progresso em cada curso</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {enrolledCourses.map((course) => (
            <div key={course.id} className="border border-border rounded-lg p-4 space-y-4">
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <h3 className="font-semibold text-foreground">{course.title}</h3>
                  <p className="text-sm text-muted-foreground">
                    {course.completed} de {course.lessons} aulas concluídas
                  </p>
                </div>
                {course.certificateEarned && (
                  <Badge className="bg-green-500/20 text-green-700 dark:text-green-400">
                    <CheckCircle className="h-3 w-3 mr-1" />
                    Concluído
                  </Badge>
                )}
              </div>

<div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Progresso</span>
                  <span className="font-semibold">{course.progress}%</span>
                </div>
                <Progress value={course.progress} className="h-2" />
              </div>

{course.nextLesson && (
                <div className="bg-muted/50 rounded-lg p-3">
                  <p className="text-xs text-muted-foreground mb-1">Próxima aula</p>
                  <p className="font-semibold text-foreground text-sm">{course.nextLesson}</p>
                </div>
              )}

<Button className="w-full" variant={course.certificateEarned ? "outline" : "default"}>
                {course.certificateEarned ? (
                  "Visualizar Certificado"
                ) : (
                  <>
                    <Play className="h-4 w-4 mr-2" />
                    Continuar
                  </>
                )}
              </Button>
            </div>
          ))}
        </CardContent>
      </Card>

{/* Estatísticas */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="pt-6">
            <div className="text-center">
              <p className="text-3xl font-bold text-foreground">{enrolledCourses.length}</p>
              <p className="text-sm text-muted-foreground">Cursos Inscritos</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-center">
              <p className="text-3xl font-bold text-foreground">
                {enrolledCourses.reduce((acc, c) => acc + c.completed, 0)}
              </p>
              <p className="text-sm text-muted-foreground">Aulas Concluídas</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-center">
              <p className="text-3xl font-bold text-foreground">{certificates.length}</p>
              <p className="text-sm text-muted-foreground">Certificados</p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/linux-course.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/linux-course-cYOqlOtmN3UvE66DNxwg2w7cEGYB15.jpg" isMerged="true"
[V0_FILE]jpg:file="public/agriculture-tech.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/agriculture-tech-nEFYgNaxUkIXf78ExEi4LCsNJJpz4g.jpg" isMerged="true"
[V0_FILE]png:file="public/cybersecurity-network.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cybersecurity-network-fpPA1IHF2Dzj8LZF1AcnfVRJo8Psgr.png" isMerged="true"
[V0_FILE]jpg:file="public/fish-farming.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fish-farming-yjM0XDRrZxLdG4hG1nAb1owywI07O4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/python-programming.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/python-programming-X9MtAGuuUq9uf8dmnWZ2qVzGCVEACw.jpg" isMerged="true"
[V0_FILE]jpg:file="public/digital-marketing.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/digital-marketing-jehBrGEDGQQs1IMYdGn3YaHdtGVnHw.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/marketplace/product-catalog.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { Search, ShoppingCart, Star, Heart } from "lucide-react"
import { useState } from "react"
import Link from "next/link"
import { useWishlist } from "@/app/wishlist-context"

const PRODUCTS = [
  {
    id: 1,
    name: "Smartphone Android Pro",
    category: "Telemóveis",
    price: 45000,
    rating: 4.8,
    reviews: 234,
    image: "/android-smartphone.jpg",
    description: "Telemóvel de última geração com câmara profissional",
  },
  {
    id: 2,
    name: 'Laptop Gaming 15"',
    category: "Computadores",
    price: 125000,
    rating: 4.9,
    reviews: 189,
    image: "/gaming-laptop.png",
    description: "Laptop poderoso para jogos e edição profissional",
  },
  {
    id: 3,
    name: "Router WiFi 6",
    category: "Rede",
    price: 15000,
    rating: 4.6,
    reviews: 156,
    image: "/wifi-router.jpg",
    description: "Roteador ultra-rápido com cobertura de até 200m²",
  },
  {
    id: 4,
    name: 'Monitor 4K 32"',
    category: "Monitores",
    price: 55000,
    rating: 4.7,
    reviews: 98,
    image: "/4k-monitor.jpg",
    description: "Monitor profissional com cores precisas",
  },
  {
    id: 5,
    name: "Câmara DSLR Profissional",
    category: "Câmaras",
    price: 95000,
    rating: 4.9,
    reviews: 267,
    image: "/professional-camera.jpg",
    description: "Câmara de 24MP com vídeo em 4K",
  },
  {
    id: 6,
    name: "Auriculares Sem Fio",
    category: "Áudio",
    price: 8500,
    rating: 4.5,
    reviews: 412,
    image: "/wireless-headphones.jpg",
    description: "Auriculares com cancelamento de ruído ativo",
  },
  {
    id: 7,
    name: 'Tablet 12" Pro',
    category: "Tablets",
    price: 38000,
    rating: 4.8,
    reviews: 145,
    image: "/tablet-pro.jpg",
    description: "Tablet com stylus para profissionais de criação",
  },
  {
    id: 8,
    name: "Smartwatch Fitness",
    category: "Wearables",
    price: 12000,
    rating: 4.4,
    reviews: 223,
    image: "/modern-smartwatch.png",
    description: "Relógio inteligente com monitoramento de saúde",
  },
  {
    id: 9,
    name: "Teclado Mecânico RGB",
    category: "Periféricos",
    price: 18000,
    rating: 4.7,
    reviews: 334,
    image: "/mechanical-keyboard.png",
    description: "Teclado mecanicista com cores personalizáveis",
  },
  {
    id: 10,
    name: "iPhone 15 Pro Max",
    category: "Smartphones",
    subcategory: "Apple",
    price: 89000,
    rating: 4.9,
    reviews: 456,
    image: "/iphone-15-pro-max.jpg",
    description: "iPhone de última geração com câmara avançada",
  },
  {
    id: 11,
    name: "Samsung Galaxy S24 Ultra",
    category: "Smartphones",
    subcategory: "Samsung",
    price: 85000,
    rating: 4.8,
    reviews: 389,
    image: "/samsung-s24-ultra.jpg",
    description: "Smartphone flagship Samsung com tela AMOLED",
  },
  {
    id: 12,
    name: "iPhone 15",
    category: "Smartphones",
    subcategory: "Apple",
    price: 72000,
    rating: 4.8,
    reviews: 312,
    image: "/iphone-15.jpg",
    description: "iPhone versão padrão com excelente performance",
  },
  {
    id: 13,
    name: "Samsung Galaxy A55",
    category: "Smartphones",
    subcategory: "Samsung",
    price: 48000,
    rating: 4.7,
    reviews: 278,
    image: "/samsung-a55.jpg",
    description: "Smartphone com ótima relação custo-benefício",
  },
  {
    id: 14,
    name: "MacBook Pro 16 M3",
    category: "Computadores",
    subcategory: "Apple",
    price: 185000,
    rating: 4.9,
    reviews: 267,
    image: "/macbook-pro-16.jpg",
    description: "Laptop profissional com chip M3 Ultra",
  },
  {
    id: 15,
    name: "MacBook Air 15 M2",
    category: "Computadores",
    subcategory: "Apple",
    price: 125000,
    rating: 4.8,
    reviews: 198,
    image: "/macbook-air-15.jpg",
    description: "Laptop portátil com excelente performance",
  },
  {
    id: 16,
    name: "Dell XPS 17 i7",
    category: "Computadores",
    subcategory: "Windows",
    price: 145000,
    rating: 4.7,
    reviews: 156,
    image: "/dell-xps-17.jpg",
    description: "Laptop profissional com ecrã 4K",
  },
  {
    id: 17,
    name: "HP Pavilion 15 Ryzen",
    category: "Computadores",
    subcategory: "Windows",
    price: 65000,
    rating: 4.6,
    reviews: 142,
    image: "/hp-pavilion-15.jpg",
    description: "Laptop versátil para trabalho e lazer",
  },
  {
    id: 18,
    name: "Trator Agrícola Mini",
    category: "Equipamentos Agrícolas",
    subcategory: "Maquinaria",
    price: 450000,
    rating: 4.8,
    reviews: 89,
    image: "/trator-agricola.jpg",
    description: "Mini trator para pequenas explorações",
  },
  {
    id: 19,
    name: "Arador Mecânico",
    category: "Equipamentos Agrícolas",
    subcategory: "Maquinaria",
    price: 85000,
    rating: 4.7,
    reviews: 67,
    image: "/arador-mecanico.jpg",
    description: "Equipamento para preparação do solo",
  },
  {
    id: 20,
    name: "Sistema de Irrigação Automática",
    category: "Equipamentos Agrícolas",
    subcategory: "Irrigação",
    price: 125000,
    rating: 4.9,
    reviews: 134,
    image: "/sistema-irrigacao.jpg",
    description: "Sistema automático de rega para plantações",
  },
  {
    id: 21,
    name: "Sementes Premium Milho",
    category: "Equipamentos Agrícolas",
    subcategory: "Sementes",
    price: 12500,
    rating: 4.8,
    reviews: 89,
    image: "/sementes-milho.jpg",
    description: "Sementes certificadas com alto rendimento",
  },
  {
    id: 22,
    name: "Sistema Aeration Tanques",
    category: "Equipamentos Piscícolas",
    subcategory: "Aeration",
    price: 35000,
    rating: 4.8,
    reviews: 76,
    image: "/sistema-aeration.jpg",
    description: "Sistema de oxigenação para tanques de peixes",
  },
  {
    id: 23,
    name: "Ração Piscícola Premium",
    category: "Equipamentos Piscícolas",
    subcategory: "Alimentação",
    price: 8500,
    rating: 4.7,
    reviews: 134,
    image: "/racao-piscicola.jpg",
    description: "Ração de alta qualidade para piscicultura",
  },
  {
    id: 24,
    name: "Tanque Fibra Reforçada 3000L",
    category: "Equipamentos Piscícolas",
    subcategory: "Tanques",
    price: 45000,
    rating: 4.8,
    reviews: 98,
    image: "/tanque-fibra-3000.jpg",
    description: "Tanque durável para criação de peixes",
  },
  {
    id: 25,
    name: "Medidor pH e Qualidade Água",
    category: "Equipamentos Piscícolas",
    subcategory: "Monitoramento",
    price: 5800,
    rating: 4.9,
    reviews: 156,
    image: "/medidor-ph.jpg",
    description: "Equipamento para monitoramento de qualidade",
  },
]

const CATEGORIES = ["Todos", "Smartphones", "Computadores", "Equipamentos Agrícolas", "Equipamentos Piscícolas"]

interface ProductCatalogProps {
  onAddToCart: (items: any[]) => void
  cartItems: any[]
}

export function ProductCatalog({ onAddToCart, cartItems }: ProductCatalogProps) {
  const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist()
  const [selectedCategory, setSelectedCategory] = useState("Todos")
  const [priceRange, setPriceRange] = useState([0, 150000])
  const [searchQuery, setSearchQuery] = useState("")
  const [sortBy, setSortBy] = useState("popularity")

const filteredProducts = PRODUCTS.filter((product) => {
    const matchesCategory = selectedCategory === "Todos" || product.category === selectedCategory
    const matchesPrice = product.price >= priceRange[0] && product.price <= priceRange[1]
    const matchesSearch =
      product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      product.description.toLowerCase().includes(searchQuery.toLowerCase())
    return matchesCategory && matchesPrice && matchesSearch
  })

const sortedProducts = [...filteredProducts].sort((a, b) => {
    if (sortBy === "price-asc") return a.price - b.price
    if (sortBy === "price-desc") return b.price - a.price
    if (sortBy === "rating") return b.rating - a.rating
    return 0
  })

const handleAddToCart = (product: any) => {
    const existingItem = cartItems.find((item) => item.id === product.id)
    if (existingItem) {
      onAddToCart(cartItems.map((item) => (item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item)))
    } else {
      onAddToCart([...cartItems, { ...product, quantity: 1 }])
    }
  }

return (
    <div className="space-y-6">
      {/* Barra de Pesquisa */}
      <div className="flex gap-2">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-3 h-5 w-5 text-muted-foreground" />
          <Input
            placeholder="Pesquisar produtos..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
        <Select value={sortBy} onValueChange={setSortBy}>
          <SelectTrigger className="w-48">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="popularity">Mais Populares</SelectItem>
            <SelectItem value="rating">Melhor Classificação</SelectItem>
            <SelectItem value="price-asc">Preço: Menor para Maior</SelectItem>
            <SelectItem value="price-desc">Preço: Maior para Menor</SelectItem>
          </SelectContent>
        </Select>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Filtros Laterais */}
        <Card className="lg:col-span-1 h-fit sticky top-4">
          <CardHeader>
            <CardTitle className="text-lg">Filtros</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Categorias */}
            <div className="space-y-3">
              <Label className="font-semibold">Categorias</Label>
              {CATEGORIES.map((category) => (
                <div key={category} className="flex items-center gap-2">
                  <Checkbox
                    id={category}
                    checked={selectedCategory === category}
                    onCheckedChange={() => setSelectedCategory(category)}
                  />
                  <Label htmlFor={category} className="cursor-pointer font-normal">
                    {category}
                  </Label>
                </div>
              ))}
            </div>

{/* Preço */}
            <div className="space-y-4">
              <Label className="font-semibold">Preço (AOA)</Label>
              <Slider
                min={0}
                max={150000}
                step={5000}
                value={priceRange}
                onValueChange={setPriceRange}
                className="w-full"
              />
              <div className="flex justify-between text-sm">
                <span>{priceRange[0].toLocaleString("pt-PT")} Kz</span>
                <span>{priceRange[1].toLocaleString("pt-PT")} Kz</span>
              </div>
            </div>

{/* Rating */}
            <div className="space-y-2">
              <Label className="font-semibold">Classificação</Label>
              {[5, 4, 3].map((stars) => (
                <div key={stars} className="flex items-center gap-2 cursor-pointer">
                  <Checkbox id={`rating-${stars}`} />
                  <Label htmlFor={`rating-${stars}`} className="cursor-pointer font-normal flex items-center gap-1">
                    {[...Array(stars)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                    ))}
                    ({stars}+)
                  </Label>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Grid de Produtos */}
        <div className="lg:col-span-3">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {sortedProducts.length > 0 ? (
              sortedProducts.map((product) => (
                <Card key={product.id} className="hover:shadow-lg transition-shadow overflow-hidden flex flex-col">
                  <div className="aspect-square overflow-hidden bg-muted">
                    <img
                      src={product.image || "/placeholder.svg"}
                      alt={product.name}
                      className="w-full h-full object-cover hover:scale-105 transition-transform"
                    />
                  </div>
                  <CardContent className="pt-4 flex-1 flex flex-col">
                    <div className="flex items-start justify-between mb-2">
                      <Link href={`/marketplace/product/${product.id}`}>
                        <h3 className="font-semibold text-sm text-foreground line-clamp-2 hover:text-primary transition-colors cursor-pointer">
                          {product.name}
                        </h3>
                      </Link>
                    </div>
                    <p className="text-xs text-muted-foreground mb-3">{product.category}</p>
                    <p className="text-xs text-muted-foreground mb-3 line-clamp-2">{product.description}</p>

<div className="flex items-center gap-1 mb-3">
                      <div className="flex">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`h-3 w-3 ${i < Math.floor(product.rating) ? "fill-yellow-400 text-yellow-400" : "text-muted"}`}
                          />
                        ))}
                      </div>
                      <span className="text-xs text-muted-foreground">({product.reviews})</span>
                    </div>

<div className="flex items-center justify-between mt-auto">
                      <div>
                        <p className="text-lg font-bold text-foreground">{(product.price / 1000).toFixed(1)}k Kz</p>
                      </div>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => {
                          if (isInWishlist(product.id)) {
                            removeFromWishlist(product.id)
                          } else {
                            addToWishlist({
                              id: product.id,
                              name: product.name,
                              price: product.price,
                              image: product.image,
                              category: product.category,
                            })
                          }
                        }}
                        className="h-8 w-8 p-0"
                      >
                        <Heart
                          className={`h-4 w-4 ${
                            isInWishlist(product.id) ? "fill-emerald-500 text-emerald-500" : "text-muted-foreground"
                          }`}
                        />
                      </Button>
                    </div>

<Button className="w-full mt-3 gap-2" onClick={() => handleAddToCart(product)}>
                      <ShoppingCart className="h-4 w-4" />
                      Carrinho
                    </Button>
                  </CardContent>
                </Card>
              ))
            ) : (
              <div className="col-span-full text-center py-12">
                <p className="text-muted-foreground">Nenhum produto encontrado com esses filtros.</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace/cart-summary.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Trash2, Plus, Minus } from "lucide-react"

interface CartItem {
  id: number
  name: string
  price: number
  quantity: number
}

interface CartSummaryProps {
  items: CartItem[]
  onUpdateCart: (items: CartItem[]) => void
}

export function CartSummary({ items, onUpdateCart }: CartSummaryProps) {
  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  const tax = subtotal * 0.1 // 10% de imposto
  const total = subtotal + tax

const handleQuantityChange = (id: number, newQuantity: number) => {
    if (newQuantity <= 0) {
      handleRemoveItem(id)
    } else {
      onUpdateCart(items.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item)))
    }
  }

const handleRemoveItem = (id: number) => {
    onUpdateCart(items.filter((item) => item.id !== id))
  }

return (
    <Card className="sticky top-4">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          Carrinho
          <Badge variant="secondary">{items.length}</Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {items.length > 0 ? (
          <>
            <div className="space-y-3 max-h-80 overflow-y-auto">
              {items.map((item) => (
                <div key={item.id} className="p-3 bg-muted rounded-lg space-y-2">
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-semibold text-foreground line-clamp-2">{item.name}</p>
                      <p className="text-xs text-muted-foreground">{(item.price / 1000).toFixed(1)}k Kz</p>
                    </div>
                    <Button size="sm" variant="ghost" onClick={() => handleRemoveItem(item.id)} className="h-6 w-6 p-0">
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleQuantityChange(item.id, item.quantity - 1)}
                      className="h-6 w-6 p-0"
                    >
                      <Minus className="h-3 w-3" />
                    </Button>
                    <span className="flex-1 text-center text-sm font-semibold">{item.quantity}</span>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleQuantityChange(item.id, item.quantity + 1)}
                      className="h-6 w-6 p-0"
                    >
                      <Plus className="h-3 w-3" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>

{/* Resumo */}
            <div className="space-y-2 pt-4 border-t border-border">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Subtotal</span>
                <span className="font-semibold">{(subtotal / 1000).toFixed(1)}k Kz</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Imposto (10%)</span>
                <span className="font-semibold">{(tax / 1000).toFixed(1)}k Kz</span>
              </div>
              <div className="flex justify-between text-base font-bold border-t border-border pt-2 mt-2">
                <span>Total</span>
                <span className="text-primary">{(total / 1000).toFixed(1)}k Kz</span>
              </div>
            </div>

<Button className="w-full" onClick={() => (window.location.href = "/marketplace/checkout")}>
              Proceder com Checkout
            </Button>
          </>
        ) : (
          <div className="text-center py-8">
            <p className="text-muted-foreground text-sm">Seu carrinho está vazio</p>
            <p className="text-xs text-muted-foreground mt-1">Adicione produtos para começar</p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]png:file="public/killmay-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Lucid_Origin_Logotipo_moderno_e_minimalista_para_o_App_KILLMAY_2-byxNCHookt1D5nIQedKd1mpa6K3dru.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Image from "next/image"

export function Footer() {
  return (
    <footer className="bg-card border-t border-border py-16 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid md:grid-cols-4 gap-12 mb-12">
          <div>
            <div className="flex items-center space-x-2 mb-4">
              <Image src="/killmay-logo.png" alt="KILLMAY Logo" width={32} height={32} className="w-8 h-8" />
              <span className="text-lg font-bold text-foreground">KILLMAY</span>
            </div>
            <p className="text-muted-foreground text-sm">
              Construindo o futuro digital de Angola, uma inovação de cada vez.
            </p>
          </div>

<div>
            <h4 className="font-bold text-foreground mb-4">Plataforma</h4>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>
                <a href="#" className="hover:text-primary transition">
                  Marketplace
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition">
                  AgroTech
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition">
                  Apoio
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition">
                  Academia
                </a>
              </li>
            </ul>
          </div>

<div>
            <h4 className="font-bold text-foreground mb-4">Empresa</h4>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>
                <a href="#" className="hover:text-primary transition">
                  Sobre
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition">
                  Blog
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition">
                  Carreiras
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition">
                  Contacto
                </a>
              </li>
            </ul>
          </div>

<div>
            <h4 className="font-bold text-foreground mb-4">Legal</h4>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>
                <a href="#" className="hover:text-primary transition">
                  Privacidade
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition">
                  Termos
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition">
                  Segurança
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition">
                  Conformidade
                </a>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-border pt-8 text-center text-muted-foreground text-sm">
          <p>© 2025 KILLMAY. Todos os direitos reservados. Construindo o futuro de Angola.</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isMerged="true"
import Image from "next/image"

export function Hero() {
  return (
    <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
      <div className="absolute inset-0 opacity-30">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary rounded-full mix-blend-multiply filter blur-3xl"></div>
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-accent rounded-full mix-blend-multiply filter blur-3xl"></div>
      </div>

<div className="max-w-7xl mx-auto relative z-10">
        <div className="text-center max-w-4xl mx-auto">
          <div className="flex justify-center mb-8">
            <Image src="/killmay-logo.png" alt="KILLMAY Logo" width={80} height={80} className="w-20 h-20" />
          </div>
          <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-foreground mb-6 leading-tight">
            O Ecossistema Completo para o Futuro Digital de Angola
          </h1>
          <p className="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed">
            Conecte inovação de marketplace, transformação agrícola, excelência técnica e educação numa única plataforma
            unificada. Capacitando empreendedores, agricultores e inovadores em toda Angola.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-primary text-primary-foreground px-8 py-4 rounded-full font-bold text-lg hover:opacity-90 transition">
              Comece Hoje
            </button>
            <button className="border border-primary text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-primary/10 transition">
              Explorar Plataforma
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/support/support-history.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CheckCircle, Clock, AlertCircle } from "lucide-react"
import Link from "next/link"

const supportTickets = [
  {
    id: "ST-001",
    service: "Reparação de Computador",
    date: "2024-11-15",
    time: "10:00",
    technician: "João Silva",
    status: "Concluído",
    cost: 5000,
  },
  {
    id: "ST-002",
    service: "Instalação de Software",
    date: "2024-11-18",
    time: "14:00",
    technician: "Maria Santos",
    status: "Concluído",
    cost: 3000,
  },
  {
    id: "ST-003",
    service: "Suporte de Rede",
    date: "2024-11-21",
    time: "09:00",
    technician: "Ana Costa",
    status: "Agendado",
    cost: 7500,
  },
  {
    id: "ST-004",
    service: "Limpeza e Manutenção",
    date: "2024-11-22",
    time: "15:00",
    technician: "Pedro Oliveira",
    status: "Pendente",
    cost: 4500,
  },
]

const statusConfig = {
  Concluído: { icon: CheckCircle, color: "bg-green-500/20 text-green-700 dark:text-green-400" },
  Agendado: { icon: Clock, color: "bg-blue-500/20 text-blue-700 dark:text-blue-400" },
  Pendente: { icon: AlertCircle, color: "bg-yellow-500/20 text-yellow-700 dark:text-yellow-400" },
}

export function SupportHistory() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Histórico de Serviços</CardTitle>
        <CardDescription>Acompanhe todos os seus agendamentos e chamados</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {supportTickets.map((ticket) => {
            const Status = statusConfig[ticket.status as keyof typeof statusConfig]
            const StatusIcon = Status?.icon || Clock

return (
              <div key={ticket.id} className="border border-border rounded-lg p-4 hover:bg-muted/50 transition">
                <div className="flex items-start justify-between mb-3">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <p className="font-semibold text-foreground">{ticket.service}</p>
                      <Badge className={Status?.color}>
                        <StatusIcon className="h-3 w-3 mr-1" />
                        {ticket.status}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">ID: {ticket.id}</p>
                  </div>
                  <p className="font-semibold text-foreground">{(ticket.cost / 1000).toFixed(1)}k Kz</p>
                </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-3 text-sm">
                  <div>
                    <p className="text-xs text-muted-foreground">Data</p>
                    <p className="font-medium text-foreground">{ticket.date}</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Hora</p>
                    <p className="font-medium text-foreground">{ticket.time}</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Técnico</p>
                    <p className="font-medium text-foreground">{ticket.technician}</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Valor</p>
                    <p className="font-medium text-foreground">{(ticket.cost / 1000).toFixed(1)}k Kz</p>
                  </div>
                </div>

<div className="flex gap-2 pt-3 border-t border-border">
                  <Link href={`/support/ticket/${ticket.id}`} className="flex-1">
                    <Button variant="outline" size="sm" className="w-full bg-transparent">
                      Ver Detalhes
                    </Button>
                  </Link>
                  {ticket.status === "Agendado" && (
                    <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                      Cancelar
                    </Button>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/support/ticket/[id]/page.tsx" isMerged="true"
"use client"

import { useParams, useRouter } from "next/navigation"
import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CheckCircle, Clock, AlertCircle, ArrowLeft, Phone, Mail, MapPin } from "lucide-react"

const supportTickets = [
  {
    id: "ST-001",
    service: "Reparação de Computador",
    date: "2024-11-15",
    time: "10:00",
    technician: "João Silva",
    technicianPhone: "+244 923 456 789",
    technicianEmail: "joao.silva@killmay.ao",
    technicianRating: 4.9,
    status: "Concluído",
    cost: 5000,
    description: "Computador não ligava e apresentava ruído estranho no ventilador",
    notes:
      "Problema identificado na fonte de alimentação. Substituída com sucesso. Computador testado e funcionando normalmente.",
    startTime: "10:00",
    endTime: "11:30",
    location: "Zona 1, Luanda",
    completedDate: "2024-11-15",
    before: "Computador travando frequentemente",
    after: "Sistema funcionando perfeitamente, sem travamentos",
  },
  {
    id: "ST-002",
    service: "Instalação de Software",
    date: "2024-11-18",
    time: "14:00",
    technician: "Maria Santos",
    technicianPhone: "+244 923 111 222",
    technicianEmail: "maria.santos@killmay.ao",
    technicianRating: 4.8,
    status: "Concluído",
    cost: 3000,
    description: "Instalação de software de gestão e licenças",
    notes: "Software instalado, configurado e testado com sucesso. Usuários treinados.",
    startTime: "14:00",
    endTime: "15:45",
    location: "Escritório Central, Luanda",
    completedDate: "2024-11-18",
    before: "Sistema desatualizado",
    after: "Sistema completamente atualizado e otimizado",
  },
  {
    id: "ST-003",
    service: "Suporte de Rede",
    date: "2024-11-21",
    time: "09:00",
    technician: "Ana Costa",
    technicianPhone: "+244 923 333 444",
    technicianEmail: "ana.costa@killmay.ao",
    technicianRating: 4.9,
    status: "Agendado",
    cost: 7500,
    description: "Configuração de rede corporativa e segurança",
    notes: "Agendado para implementação. Aguardando confirmação.",
    startTime: "09:00",
    endTime: null,
    location: "Sede Corporativa, Luanda",
    completedDate: null,
    before: "Rede instável",
    after: "Rede segura e estável",
  },
  {
    id: "ST-004",
    service: "Limpeza e Manutenção",
    date: "2024-11-22",
    time: "15:00",
    technician: "Pedro Oliveira",
    technicianPhone: "+244 923 555 666",
    technicianEmail: "pedro.oliveira@killmay.ao",
    technicianRating: 4.7,
    status: "Pendente",
    cost: 4500,
    description: "Limpeza preventiva e manutenção de equipamentos",
    notes: "Aguardando confirmação de disponibilidade.",
    startTime: "15:00",
    endTime: null,
    location: "Escritório Secundário, Luanda",
    completedDate: null,
    before: "Equipamentos com poeira acumulada",
    after: "Equipamentos limpos e otimizados",
  },
]

export default function SupportTicketDetail() {
  const router = useRouter()
  const params = useParams()
  const ticketId = params.id as string

const ticket = supportTickets.find((t) => t.id === ticketId)

if (!ticket) {
    return (
      <ProtectedLayout>
        <div className="text-center py-12">
          <h1 className="text-2xl font-bold text-foreground">Chamado não encontrado</h1>
          <Button onClick={() => router.back()} className="mt-4">
            Voltar
          </Button>
        </div>
      </ProtectedLayout>
    )
  }

const Status = statusConfig[ticket.status as keyof typeof statusConfig]
  const StatusIcon = Status?.icon || Clock

return (
    <ProtectedLayout>
      <div className="space-y-6">
        {/* Botão Voltar */}
        <Button variant="outline" onClick={() => router.back()} className="gap-2">
          <ArrowLeft className="h-4 w-4" />
          Voltar ao Histórico
        </Button>

{/* Cabeçalho */}
        <div className="flex items-start justify-between gap-4">
          <div>
            <div className="flex items-center gap-3 mb-2">
              <h1 className="text-3xl font-bold text-foreground">{ticket.service}</h1>
              <Badge className={Status?.color}>
                <StatusIcon className="h-3 w-3 mr-1" />
                {ticket.status}
              </Badge>
            </div>
            <p className="text-muted-foreground text-lg">ID do Chamado: {ticket.id}</p>
          </div>
          <p className="text-3xl font-bold text-foreground">{(ticket.cost / 1000).toFixed(1)}k Kz</p>
        </div>

{/* Grid de Informações Principais */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">Data Agendada</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-2xl font-bold text-foreground">{ticket.date}</p>
              <p className="text-sm text-muted-foreground mt-1">Hora: {ticket.time}</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">Técnico Responsável</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-lg font-bold text-foreground">{ticket.technician}</p>
              <p className="text-sm text-yellow-500 mt-1">⭐ {ticket.technicianRating}</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">Localização</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-start gap-2">
                <MapPin className="h-4 w-4 text-muted-foreground mt-1 flex-shrink-0" />
                <p className="text-sm text-foreground">{ticket.location}</p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">Duração Estimada</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-lg font-bold text-foreground">
                {ticket.startTime} - {ticket.endTime || "Pendente"}
              </p>
              {ticket.endTime && (
                <p className="text-sm text-muted-foreground mt-1">
                  {Math.round(
                    (new Date(`2024-01-01 ${ticket.endTime}`).getTime() -
                      new Date(`2024-01-01 ${ticket.startTime}`).getTime()) /
                      60000,
                  )}{" "}
                  min
                </p>
              )}
            </CardContent>
          </Card>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Coluna Principal - Detalhes */}
          <div className="lg:col-span-2 space-y-6">
            {/* Descrição do Problema */}
            <Card>
              <CardHeader>
                <CardTitle>Descrição do Serviço</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <p className="text-sm font-medium text-muted-foreground mb-2">Solicitação Original:</p>
                  <p className="text-foreground">{ticket.description}</p>
                </div>
                <div className="grid grid-cols-2 gap-4 pt-4 border-t border-border">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground mb-2">Situação Antes:</p>
                    <div className="bg-muted p-3 rounded text-sm text-foreground">{ticket.before}</div>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-muted-foreground mb-2">Situação Depois:</p>
                    <div className="bg-green-500/10 p-3 rounded text-sm text-foreground">{ticket.after}</div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Notas e Observações */}
            <Card>
              <CardHeader>
                <CardTitle>Observações do Técnico</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-foreground leading-relaxed">{ticket.notes}</p>
              </CardContent>
            </Card>

{/* Timeline */}
            {ticket.status === "Concluído" && (
              <Card>
                <CardHeader>
                  <CardTitle>Resumo da Execução</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex gap-4">
                      <div className="flex flex-col items-center">
                        <div className="w-4 h-4 bg-green-500 rounded-full"></div>
                        <div className="w-0.5 h-12 bg-green-500/50"></div>
                      </div>
                      <div>
                        <p className="font-semibold text-foreground">Início do Atendimento</p>
                        <p className="text-sm text-muted-foreground">
                          {ticket.startTime} - {ticket.date}
                        </p>
                      </div>
                    </div>
                    <div className="flex gap-4">
                      <div className="flex flex-col items-center">
                        <div className="w-4 h-4 bg-green-500 rounded-full"></div>
                      </div>
                      <div>
                        <p className="font-semibold text-foreground">Conclusão do Serviço</p>
                        <p className="text-sm text-muted-foreground">
                          {ticket.endTime} - {ticket.completedDate}
                        </p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>

{/* Coluna Lateral - Técnico e Ações */}
          <div className="space-y-6">
            {/* Card do Técnico */}
            <Card>
              <CardHeader>
                <CardTitle>Técnico Responsável</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex gap-3 items-start">
                  <div className="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-bold text-lg">
                    {ticket.technician.charAt(0)}
                  </div>
                  <div className="flex-1">
                    <p className="font-semibold text-foreground">{ticket.technician}</p>
                    <p className="text-xs text-yellow-500">⭐ {ticket.technicianRating}</p>
                  </div>
                </div>

<div className="space-y-3 pt-3 border-t border-border">
                  <div className="flex items-center gap-3">
                    <Phone className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-xs text-muted-foreground">Telefone</p>
                      <p className="text-sm font-medium text-foreground">{ticket.technicianPhone}</p>
                    </div>
                  </div>

<div className="flex items-center gap-3">
                    <Mail className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-xs text-muted-foreground">Email</p>
                      <p className="text-sm font-medium text-foreground">{ticket.technicianEmail}</p>
                    </div>
                  </div>
                </div>

<Button variant="outline" className="w-full bg-transparent">
                  Contactar Técnico
                </Button>
              </CardContent>
            </Card>

{/* Ações */}
            <Card>
              <CardHeader>
                <CardTitle>Ações</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <Button variant="outline" className="w-full bg-transparent">
                  Imprimir Recibo
                </Button>
                <Button variant="outline" className="w-full bg-transparent">
                  Avaliar Serviço
                </Button>
                {ticket.status === "Agendado" && (
                  <Button variant="destructive" className="w-full">
                    Cancelar Agendamento
                  </Button>
                )}
                {ticket.status !== "Concluído" && <Button className="w-full">Agendar Novo Serviço</Button>}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/support/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { ProtectedLayout } from "@/components/protected-layout"
import { SupportBooking } from "@/components/support/support-booking"
import { SupportHistory } from "@/components/support/support-history"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Calendar, History, Phone } from "lucide-react"

export default function SupportPage() {
  const { user } = useAuth()

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Suporte Técnico</h1>
          <p className="text-muted-foreground mt-2">Agende e acompanhe seus serviços técnicos com facilidade</p>
        </div>

<div className="bg-accent/10 border border-accent rounded-lg p-6">
          <div className="flex items-center gap-3 mb-4">
            <Phone className="h-5 w-5 text-accent" />
            <h2 className="text-lg font-semibold text-foreground">Contacte nosso Call Center</h2>
          </div>
          <p className="text-muted-foreground mb-3">
            Precisa de ajuda imediata? Ligue para nosso call center disponível 24/7
          </p>
          <a
            href="tel:+244950522721"
            className="inline-flex items-center gap-2 bg-accent text-accent-foreground px-6 py-3 rounded-lg font-semibold hover:bg-accent/90 transition-colors"
          >
            <Phone className="h-4 w-4" />
            +244 950 522 721
          </a>
        </div>

<Tabs defaultValue="booking" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="booking" className="flex items-center gap-2">
              <Calendar className="h-4 w-4" />
              Agendar Serviço
            </TabsTrigger>
            <TabsTrigger value="history" className="flex items-center gap-2">
              <History className="h-4 w-4" />
              Histórico
            </TabsTrigger>
          </TabsList>

<TabsContent value="history" className="space-y-6">
            <SupportHistory />
          </TabsContent>
        </Tabs>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/contact/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { ProtectedLayout } from "@/components/protected-layout"
import { Button } from "@/components/ui/button"
import { Phone, Mail, MapPin, Send } from "lucide-react"

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const [submitted, setSubmitted] = useState(false)

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitted(true)
    setTimeout(() => {
      setFormData({ name: "", email: "", subject: "", message: "" })
      setSubmitted(false)
    }, 3000)
  }

return (
    <ProtectedLayout>
      <div className="space-y-12">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Entre em Contacto</h1>
          <p className="text-muted-foreground mt-2">Temos o prazer de ouvir de você. Contacte-nos de qualquer forma!</p>
        </div>

<div className="grid md:grid-cols-2 gap-8">
          {/* Informações de Contacto */}
          <div className="space-y-6">
            <h2 className="text-2xl font-bold text-foreground">Informações de Contacto</h2>

<div className="space-y-4">
              <div className="flex gap-4 p-4 bg-accent/10 rounded-lg border border-accent">
                <Phone className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
                <div>
                  <h3 className="font-semibold text-foreground">Call Center 24/7</h3>
                  <a href="tel:+244950522721" className="text-accent hover:underline">
                    +244 950 522 721
                  </a>
                  <p className="text-sm text-muted-foreground mt-1">Disponível 24 horas por dia, 7 dias por semana</p>
                </div>
              </div>

<div className="flex gap-4 p-4 bg-primary/10 rounded-lg border border-primary">
                <Mail className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                <div>
                  <h3 className="font-semibold text-foreground">Email</h3>
                  <a href="mailto:support@killmay.ao" className="text-primary hover:underline">
                    support@killmay.ao
                  </a>
                  <p className="text-sm text-muted-foreground mt-1">Responderemos em até 24 horas</p>
                </div>
              </div>

<div className="flex gap-4 p-4 bg-green-500/10 rounded-lg border border-green-500">
                <MapPin className="h-6 w-6 text-green-500 flex-shrink-0 mt-1" />
                <div>
                  <h3 className="font-semibold text-foreground">Localização</h3>
                  <p className="text-foreground">Luanda, Angola</p>
                  <p className="text-sm text-muted-foreground mt-1">Escritório central</p>
                </div>
              </div>
            </div>
          </div>

{/* Formulário */}
          <div className="bg-accent/5 p-6 rounded-lg border border-accent">
            <h2 className="text-2xl font-bold text-foreground mb-6">Enviar Mensagem</h2>

{submitted ? (
              <div className="flex items-center justify-center h-full">
                <div className="text-center space-y-2">
                  <div className="text-4xl">✓</div>
                  <p className="text-foreground font-semibold">Mensagem enviada com sucesso!</p>
                  <p className="text-sm text-muted-foreground">Obrigado por contactar-nos. Responderemos em breve.</p>
                </div>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">Nome Completo</label>
                  <input
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    required
                    placeholder="Seu nome"
                    className="w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium text-foreground mb-2">Email</label>
                  <input
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    required
                    placeholder="seu@email.com"
                    className="w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium text-foreground mb-2">Assunto</label>
                  <input
                    type="text"
                    name="subject"
                    value={formData.subject}
                    onChange={handleChange}
                    required
                    placeholder="Assunto da mensagem"
                    className="w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium text-foreground mb-2">Mensagem</label>
                  <textarea
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    required
                    placeholder="Sua mensagem aqui..."
                    rows={5}
                    className="w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent resize-none"
                  />
                </div>

<Button type="submit" className="w-full bg-accent text-accent-foreground hover:bg-accent/90">
                  <Send className="h-4 w-4 mr-2" />
                  Enviar Mensagem
                </Button>
              </form>
            )}
          </div>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/profile/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { ProtectedLayout } from "@/components/protected-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useRouter } from "next/navigation"
import { User, Mail, Shield, MapPin, ShoppingBag, Edit, LogOut } from "lucide-react"
import { useState } from "react"

interface Order {
  id: string
  date: string
  products: string
  total: number
  status: "Entregue" | "Em Trânsito" | "Processando"
}

interface Address {
  id: string
  type: "Residencial" | "Comercial"
  street: string
  city: string
  province: string
  zipCode: string
  isDefault: boolean
}

export default function ProfilePage() {
  const { user, signOut } = useAuth()
  const router = useRouter()
  const [isEditing, setIsEditing] = useState(false)
  const [editedName, setEditedName] = useState(user?.name || "")

const orders: Order[] = [
    {
      id: "PED-001",
      date: "2025-01-10",
      products: "Smartphone Android, Carregador Rápido",
      total: 45000,
      status: "Entregue",
    },
    {
      id: "PED-002",
      date: "2025-01-05",
      products: "Laptop Gamer, Mouse Wireless",
      total: 180000,
      status: "Entregue",
    },
    {
      id: "PED-003",
      date: "2025-01-02",
      products: "Monitor 4K, Cabo HDMI",
      total: 95000,
      status: "Em Trânsito",
    },
  ]

const addresses: Address[] = [
    {
      id: "END-001",
      type: "Residencial",
      street: "Rua 17 de Setembro, 123",
      city: "Luanda",
      province: "Luanda",
      zipCode: "1001",
      isDefault: true,
    },
    {
      id: "END-002",
      type: "Comercial",
      street: "Avenida Dezembrista, 456",
      city: "Luanda",
      province: "Luanda",
      zipCode: "1002",
      isDefault: false,
    },
  ]

const handleSaveProfile = () => {
    setIsEditing(false)
    // Aqui seria feita a chamada de API para atualizar o nome
  }

const handleLogout = () => {
    signOut()
    router.push("/")
  }

return (
    <ProtectedLayout>
      <div className="space-y-8">
        {/* Header */}
        <div>
          <h1 className="text-3xl font-bold text-foreground">Meu Perfil</h1>
          <p className="text-muted-foreground mt-2">Gerencie suas informações pessoais e histórico</p>
        </div>

{/* Informações Pessoais */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <User className="h-5 w-5" />
                Informações Pessoais
              </CardTitle>
              <CardDescription>Seus dados de conta</CardDescription>
            </div>
            <Button variant="outline" size="sm" onClick={() => setIsEditing(!isEditing)}>
              <Edit className="mr-2 h-4 w-4" />
              {isEditing ? "Cancelar" : "Editar"}
            </Button>
          </CardHeader>
          <CardContent className="space-y-6">
            <div>
              <p className="text-sm text-muted-foreground mb-2">Nome</p>
              {isEditing ? (
                <input
                  type="text"
                  value={editedName}
                  onChange={(e) => setEditedName(e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground"
                />
              ) : (
                <p className="text-lg font-medium text-foreground">{editedName}</p>
              )}
            </div>
            <div>
              <p className="text-sm text-muted-foreground mb-2">Email</p>
              <p className="text-lg font-medium text-foreground flex items-center gap-2">
                <Mail className="h-4 w-4" />
                {user?.email}
              </p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground mb-2">Tipo de Conta</p>
              <p className="text-lg font-medium text-foreground flex items-center gap-2">
                <Shield className="h-4 w-4" />
                {user?.role === "farmer"
                  ? "Agricultor/Piscicultor"
                  : user?.role === "technician"
                    ? "Técnico de Suporte"
                    : "Utilizador Geral"}
              </p>
            </div>
            {isEditing && (
              <Button onClick={handleSaveProfile} className="w-full">
                Guardar Alterações
              </Button>
            )}
          </CardContent>
        </Card>

{/* Histórico de Pedidos */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <ShoppingBag className="h-5 w-5" />
              Histórico de Pedidos
            </CardTitle>
            <CardDescription>Seus pedidos realizados no Marketplace</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {orders.map((order) => (
                <div key={order.id} className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors">
                  <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div className="flex-1">
                      <p className="font-medium text-foreground">{order.id}</p>
                      <p className="text-sm text-muted-foreground mt-1">{order.products}</p>
                      <p className="text-sm text-muted-foreground mt-1">
                        {new Date(order.date).toLocaleDateString("pt-PT")}
                      </p>
                    </div>
                    <div className="flex flex-col items-end gap-2">
                      <p className="font-medium text-foreground">{order.total.toLocaleString("pt-PT")} Kz</p>
                      <span
                        className={`text-xs font-medium px-3 py-1 rounded-full ${
                          order.status === "Entregue"
                            ? "bg-green-500/20 text-green-700"
                            : "bg-yellow-500/20 text-yellow-700"
                        }`}
                      >
                        {order.status}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Endereços */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MapPin className="h-5 w-5" />
              Endereços Salvos
            </CardTitle>
            <CardDescription>Seus endereços de entrega</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {addresses.map((address) => (
                <div
                  key={address.id}
                  className={`border rounded-lg p-4 ${
                    address.isDefault ? "border-green-500 bg-green-500/5" : "border-border"
                  }`}
                >
                  <div className="flex items-start justify-between mb-3">
                    <p className="font-medium text-foreground">{address.type}</p>
                    {address.isDefault && (
                      <span className="text-xs font-medium px-2 py-1 bg-green-500/20 text-green-700 rounded">
                        Padrão
                      </span>
                    )}
                  </div>
                  <p className="text-sm text-foreground">{address.street}</p>
                  <p className="text-sm text-muted-foreground">
                    {address.city}, {address.province} {address.zipCode}
                  </p>
                  <Button variant="outline" size="sm" className="mt-3 w-full bg-transparent">
                    Editar
                  </Button>
                </div>
              ))}
            </div>
            <Button variant="outline" className="w-full mt-4 bg-transparent">
              Adicionar Novo Endereço
            </Button>
          </CardContent>
        </Card>

{/* Segurança e Logout */}
        <Card>
          <CardHeader>
            <CardTitle>Segurança</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <Button variant="outline" className="w-full bg-transparent">
              Alterar Senha
            </Button>
            <Button variant="destructive" className="w-full" onClick={handleLogout}>
              <LogOut className="mr-2 h-4 w-4" />
              Sair da Conta
            </Button>
          </CardContent>
        </Card>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/auth-context.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

interface User {
  id: string
  email: string
  name: string
  role: "user" | "farmer" | "technician" | "admin"
}

interface AuthContextType {
  user: User | null
  loading: boolean
  signIn: (email: string, password: string) => Promise<void>
  signUp: (name: string, email: string, password: string, role: string) => Promise<void>
  signOut: () => void
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const storedUser = localStorage.getItem("killmay_user")
    if (storedUser) {
      try {
        setUser(JSON.parse(storedUser))
      } catch (error) {
        console.error("[v0] Erro ao parsear usuário:", error)
        localStorage.removeItem("killmay_user")
      }
    }
    setLoading(false)
  }, [])

const signIn = async (email: string, password: string) => {
    setLoading(true)
    try {
      if (!email || !password) {
        throw new Error("Email e senha são obrigatórios")
      }

await new Promise((resolve) => setTimeout(resolve, 500))

let role: User["role"] = "user"
      if (email.toLowerCase() === "admin@killmay.com") {
        role = "admin"
      } else if (email.toLowerCase().includes("farmer")) {
        role = "farmer"
      } else if (email.toLowerCase().includes("tech")) {
        role = "technician"
      }

const newUser: User = {
        id: `user_${Date.now()}`,
        email,
        name: email.split("@")[0],
        role,
      }

localStorage.setItem("killmay_user", JSON.stringify(newUser))
      setUser(newUser)
    } finally {
      setLoading(false)
    }
  }

const signUp = async (name: string, email: string, password: string, role: string) => {
    setLoading(true)
    try {
      if (!name || !email || !password || !role) {
        throw new Error("Todos os campos são obrigatórios")
      }

await new Promise((resolve) => setTimeout(resolve, 500))

const newUser: User = {
        id: `user_${Date.now()}`,
        email,
        name,
        role: (role as User["role"]) || "user",
      }

localStorage.setItem("killmay_user", JSON.stringify(newUser))
      setUser(newUser)
    } finally {
      setLoading(false)
    }
  }

const signOut = () => {
    localStorage.removeItem("killmay_user")
    setUser(null)
  }

return <AuthContext.Provider value={{ user, loading, signIn, signUp, signOut }}>{children}</AuthContext.Provider>
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error("useAuth deve ser usado dentro de AuthProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/admin/admin-stats.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Users, ShoppingCart, BookOpen, Headphones } from "lucide-react"

export function AdminStats() {
  const stats = [
    {
      title: "Total de Utilizadores",
      value: "1.234",
      description: "Utilizadores cadastrados",
      icon: Users,
      color: "bg-blue-500",
    },
    {
      title: "Pedidos Realizados",
      value: "456",
      description: "Transações no Marketplace",
      icon: ShoppingCart,
      color: "bg-green-500",
    },
    {
      title: "Cursos Ativos",
      value: "12",
      description: "Cursos disponíveis na Academia",
      icon: BookOpen,
      color: "bg-orange-500",
    },
    {
      title: "Serviços Técnicos",
      value: "328",
      description: "Agendamentos completados",
      icon: Headphones,
      color: "bg-purple-500",
    },
  ]

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat) => {
        const Icon = stat.icon
        return (
          <Card key={stat.title}>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-lg">{stat.title}</CardTitle>
                  <CardDescription>{stat.description}</CardDescription>
                </div>
                <div className={`${stat.color} p-3 rounded-lg`}>
                  <Icon className="h-6 w-6 text-white" />
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold text-foreground">{stat.value}</p>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/users-management.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Trash2, CheckCircle, XCircle } from "lucide-react"

interface User {
  id: string
  email: string
  name: string
  role: string
  status: "ativo" | "inativo"
  joinDate: string
}

export function UsersManagement() {
  const [users, setUsers] = useState<User[]>([])

useEffect(() => {
    // Simular dados de utilizadores
    const mockUsers: User[] = [
      {
        id: "1",
        email: "admin@killmay.com",
        name: "Admin",
        role: "admin",
        status: "ativo",
        joinDate: "2024-01-15",
      },
      {
        id: "2",
        email: "farmer@killmay.com",
        name: "João Silva",
        role: "farmer",
        status: "ativo",
        joinDate: "2024-02-20",
      },
      {
        id: "3",
        email: "user@killmay.com",
        name: "Maria Santos",
        role: "user",
        status: "ativo",
        joinDate: "2024-03-10",
      },
      {
        id: "4",
        email: "tech@killmay.com",
        name: "Pedro Oliveira",
        role: "technician",
        status: "ativo",
        joinDate: "2024-03-25",
      },
      {
        id: "5",
        email: "inactive@killmay.com",
        name: "Ana Costa",
        role: "user",
        status: "inativo",
        joinDate: "2024-01-05",
      },
    ]
    setUsers(mockUsers)
  }, [])

const toggleUserStatus = (id: string) => {
    setUsers(
      users.map((user) => (user.id === id ? { ...user, status: user.status === "ativo" ? "inativo" : "ativo" } : user)),
    )
  }

const deleteUser = (id: string) => {
    setUsers(users.filter((user) => user.id !== id))
  }

const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case "admin":
        return "bg-red-100 text-red-800"
      case "farmer":
        return "bg-green-100 text-green-800"
      case "technician":
        return "bg-blue-100 text-blue-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getRoleLabel = (role: string) => {
    switch (role) {
      case "admin":
        return "Administrador"
      case "farmer":
        return "Agricultor"
      case "technician":
        return "Técnico"
      default:
        return "Utilizador"
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Gestão de Utilizadores</CardTitle>
        <CardDescription>Gerencie e controle todos os utilizadores da plataforma</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-border">
                <th className="text-left py-3 px-4 font-medium">Nome</th>
                <th className="text-left py-3 px-4 font-medium">Email</th>
                <th className="text-left py-3 px-4 font-medium">Tipo de Conta</th>
                <th className="text-left py-3 px-4 font-medium">Status</th>
                <th className="text-left py-3 px-4 font-medium">Data de Adesão</th>
                <th className="text-left py-3 px-4 font-medium">Ações</th>
              </tr>
            </thead>
            <tbody>
              {users.map((user) => (
                <tr key={user.id} className="border-b border-border hover:bg-muted/50">
                  <td className="py-3 px-4">{user.name}</td>
                  <td className="py-3 px-4">{user.email}</td>
                  <td className="py-3 px-4">
                    <Badge className={getRoleBadgeColor(user.role)}>{getRoleLabel(user.role)}</Badge>
                  </td>
                  <td className="py-3 px-4">
                    <span
                      className={`flex items-center gap-1 ${
                        user.status === "ativo" ? "text-green-600" : "text-red-600"
                      }`}
                    >
                      {user.status === "ativo" ? <CheckCircle className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                      {user.status === "ativo" ? "Ativo" : "Inativo"}
                    </span>
                  </td>
                  <td className="py-3 px-4">{user.joinDate}</td>
                  <td className="py-3 px-4 space-x-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => toggleUserStatus(user.id)}
                      disabled={user.role === "admin"}
                    >
                      {user.status === "ativo" ? "Desativar" : "Ativar"}
                    </Button>
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={() => deleteUser(user.id)}
                      disabled={user.role === "admin"}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ProtectedLayout } from "@/components/protected-layout"
import { ShoppingCart, Leaf, Headphones, BookOpen, LogOut, UserCircle, BarChart3, Wrench } from "lucide-react"
import Link from "next/link"

export default function DashboardPage() {
  const { user, signOut } = useAuth()

const modules = [
    {
      title: "Marketplace",
      description: "Compre e venda produtos tecnológicos",
      icon: ShoppingCart,
      href: "/marketplace",
      color: "bg-blue-500",
    },
    {
      title: "AgroTech",
      description: "Gerencie suas plantações e piscicultura",
      icon: Leaf,
      href: "/agrotech",
      color: "bg-green-500",
    },
    {
      title: "Suporte Técnico",
      description: "Agende e acompanhe serviços técnicos",
      icon: Headphones,
      href: "/support",
      color: "bg-purple-500",
    },
    {
      title: "Reparação",
      description: "Serviços especializados de reparação",
      icon: Wrench,
      href: "/repair",
      color: "bg-cyan-500",
    },
    {
      title: "Academia",
      description: "Acesse cursos e treinamentos online",
      icon: BookOpen,
      href: "/academy",
      color: "bg-orange-500",
    },
    {
      title: "Meu Perfil",
      description: "Gerencie sua conta e informações",
      icon: UserCircle,
      href: "/profile",
      color: "bg-indigo-500",
    },
    ...(user?.role === "admin"
      ? [
          {
            title: "Administração",
            description: "Gerencie utilizadores e estatísticas",
            icon: BarChart3,
            href: "/admin",
            color: "bg-red-500",
          },
        ]
      : []),
  ]

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Bem-vindo de volta, {user?.name}!</h1>
            <p className="text-muted-foreground mt-2">Acesse os módulos do KILLMAY e gerencie seus serviços</p>
          </div>
          <Button
            variant="outline"
            className="w-full md:w-auto bg-transparent"
            onClick={() => {
              signOut()
            }}
          >
            <LogOut className="mr-2 h-4 w-4" />
            Sair
          </Button>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
          {modules.map((module) => {
            const Icon = module.icon
            return (
              <Link key={module.href} href={module.href}>
                <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
                  <CardHeader>
                    <div className={`w-12 h-12 ${module.color} rounded-lg flex items-center justify-center mb-4`}>
                      <Icon className="h-6 w-6 text-white" />
                    </div>
                    <CardTitle className="text-lg">{module.title}</CardTitle>
                    <CardDescription>{module.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Button className="w-full bg-transparent" variant="outline">
                      Acessar
                    </Button>
                  </CardContent>
                </Card>
              </Link>
            )
          })}
        </div>

<Card>
          <CardHeader>
            <CardTitle>Informações da Conta</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <p className="text-sm text-muted-foreground">Nome</p>
              <p className="text-foreground font-medium">{user?.name}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">Email</p>
              <p className="text-foreground font-medium">{user?.email}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">Tipo de Conta</p>
              <p className="text-foreground font-medium capitalize">
                {user?.role === "admin"
                  ? "Administrador"
                  : user?.role === "farmer"
                    ? "Agricultor/Piscicultor"
                    : user?.role === "technician"
                      ? "Técnico de Suporte"
                      : "Utilizador Geral"}
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="components/protected-layout.tsx" isMerged="true"
"use client"

import type React from "react"
import Image from "next/image"
import { useAuth } from "@/app/auth-context"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import Link from "next/link"
import { Home, Heart, Bell } from "lucide-react"
import { useNotifications } from "@/app/notifications-context"
import { useWishlist } from "@/app/wishlist-context"
import { ThemeSwitcher } from "@/components/theme-switcher"
import { MobileMenu } from "@/components/mobile-menu"
import { ChatWidget } from "@/components/chat-widget"

export function ProtectedLayout({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth()
  const { unreadCount } = useNotifications()
  const { wishlist } = useWishlist()
  const router = useRouter()

useEffect(() => {
    if (!loading && !user) {
      router.push("/login")
    }
  }, [user, loading, router])

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="text-center space-y-4">
          <Image
            src="/killmay-logo.png"
            alt="KILLMAY Logo"
            width={48}
            height={48}
            className="w-12 h-12 mx-auto animate-pulse"
          />
          <p className="text-muted-foreground">Carregando...</p>
        </div>
      </div>
    )
  }

if (!user) {
    return null
  }

return (
    <div className="min-h-screen bg-background">
      <header className="border-b border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex justify-between items-center">
            <Link href="/dashboard" className="flex items-center space-x-2">
              <Image
                src="/killmay-logo.png"
                alt="KILLMAY Logo"
                width={32}
                height={32}
                className="w-8 h-8"
              />
              <span className="text-lg font-bold text-foreground hidden sm:inline">KILLMAY</span>
            </Link>

<div className="flex items-center space-x-4 hidden md:flex">
              <ThemeSwitcher />
              {user?.role === "admin" && (
                <Link href="/admin/notifications" className="relative">
                  <Bell size={20} className="text-muted-foreground hover:text-foreground transition-colors" />
                  {unreadCount > 0 && (
                    <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                      {unreadCount > 9 ? "9+" : unreadCount}
                    </span>
                  )}
                </Link>
              )}
              <Link href="/wishlist" className="relative">
                <Heart size={20} className="text-muted-foreground hover:text-foreground transition-colors" />
                {wishlist.length > 0 && (
                  <span className="absolute -top-2 -right-2 bg-emerald-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {wishlist.length > 9 ? "9+" : wishlist.length}
                  </span>
                )}
              </Link>
              <Link
                href="/dashboard"
                className="flex items-center space-x-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                <Home size={18} />
                <span>Início</span>
              </Link>
              <Link href="/contact" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Contactos
              </Link>
            </div>
          </div>
        </div>
      </header>
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">{children}</main>
      <ChatWidget />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/admin/notifications/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { ProtectedLayout } from "@/components/protected-layout"
import { useNotifications } from "@/app/notifications-context"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Bell, Trash2, Check } from "lucide-react"

export default function NotificationsPage() {
  const { user } = useAuth()
  const router = useRouter()
  const { notifications, markAsRead, clearNotifications } = useNotifications()
  const [filter, setFilter] = useState<"all" | "unread">("all")

useEffect(() => {
    if (user && user.role !== "admin") {
      router.push("/dashboard")
    }
  }, [user, router])

if (!user || user.role !== "admin") {
    return null
  }

const displayedNotifications = filter === "unread" ? notifications.filter((n) => !n.read) : notifications

return (
    <ProtectedLayout>
      <div className="space-y-6">
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Notificações</h1>
            <p className="text-muted-foreground mt-2">
              {notifications.filter((n) => !n.read).length} notificações não lidas
            </p>
          </div>
          <Button variant="outline" onClick={clearNotifications} className="gap-2 bg-transparent">
            <Trash2 className="h-4 w-4" />
            Limpar Tudo
          </Button>
        </div>

<div className="flex gap-2">
          <button
            onClick={() => setFilter("all")}
            className={`px-4 py-2 rounded-lg transition-colors ${
              filter === "all"
                ? "bg-primary text-primary-foreground"
                : "bg-muted text-muted-foreground hover:bg-muted/80"
            }`}
          >
            Todas ({notifications.length})
          </button>
          <button
            onClick={() => setFilter("unread")}
            className={`px-4 py-2 rounded-lg transition-colors ${
              filter === "unread"
                ? "bg-primary text-primary-foreground"
                : "bg-muted text-muted-foreground hover:bg-muted/80"
            }`}
          >
            Não Lidas ({notifications.filter((n) => !n.read).length})
          </button>
        </div>

<div className="space-y-3">
          {displayedNotifications.length === 0 ? (
            <Card>
              <CardContent className="pt-12 pb-12 text-center">
                <Bell className="h-12 w-12 text-muted-foreground mx-auto mb-4 opacity-50" />
                <p className="text-muted-foreground">Sem notificações</p>
              </CardContent>
            </Card>
          ) : (
            displayedNotifications
              .sort((a, b) => b.timestamp - a.timestamp)
              .map((notification) => (
                <Card key={notification.id} className={!notification.read ? "border-primary bg-primary/5" : ""}>
                  <CardContent className="pt-6">
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-semibold text-foreground">{notification.title}</h3>
                          {!notification.read && <span className="w-2 h-2 bg-primary rounded-full"></span>}
                        </div>
                        <p className="text-sm text-muted-foreground">{notification.message}</p>

{notification.data && (
                          <div className="mt-3 p-3 bg-muted rounded-lg text-xs space-y-1">
                            {notification.data.customerName && (
                              <p>
                                <span className="font-semibold">Cliente:</span> {notification.data.customerName}
                              </p>
                            )}
                            {notification.data.orderNumber && (
                              <p>
                                <span className="font-semibold">Pedido:</span> {notification.data.orderNumber}
                              </p>
                            )}
                            {notification.data.total && (
                              <p>
                                <span className="font-semibold">Total:</span>{" "}
                                {(notification.data.total / 1000).toFixed(1)}k Kz
                              </p>
                            )}
                            {notification.data.paymentMethod && (
                              <p>
                                <span className="font-semibold">Método:</span> {notification.data.paymentMethod}
                              </p>
                            )}
                          </div>
                        )}

<p className="text-xs text-muted-foreground mt-3">
                          {new Date(notification.timestamp).toLocaleString("pt-PT")}
                        </p>
                      </div>

{!notification.read && (
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => markAsRead(notification.id)}
                          className="gap-2"
                        >
                          <Check className="h-4 w-4" />
                          Marcar como lido
                        </Button>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))
          )}
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-notifications.tsx" isMerged="true"
"use client"

import { useNotifications } from "@/app/notifications-context"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Bell, Check } from "lucide-react"

export function AdminNotifications() {
  const { notifications, markAsRead } = useNotifications()

const unreadNotifications = notifications.filter((n) => !n.read)
  const recentNotifications = notifications.slice(0, 10)

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="pt-6">
            <div className="text-center">
              <p className="text-3xl font-bold text-primary">{notifications.length}</p>
              <p className="text-sm text-muted-foreground">Total de Notificações</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-center">
              <p className="text-3xl font-bold text-orange-500">{unreadNotifications.length}</p>
              <p className="text-sm text-muted-foreground">Não Lidas</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-center">
              <p className="text-3xl font-bold text-green-500">
                {notifications.filter((n) => n.type === "order").length}
              </p>
              <p className="text-sm text-muted-foreground">Pedidos</p>
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardContent className="pt-6">
          <h3 className="font-semibold text-lg mb-4">Notificações Recentes</h3>
          <div className="space-y-3">
            {recentNotifications.length === 0 ? (
              <div className="text-center py-8">
                <Bell className="h-12 w-12 text-muted-foreground mx-auto mb-2 opacity-50" />
                <p className="text-muted-foreground">Nenhuma notificação ainda</p>
              </div>
            ) : (
              recentNotifications.map((notification) => (
                <div
                  key={notification.id}
                  className={`p-4 rounded-lg border ${
                    !notification.read ? "bg-primary/5 border-primary" : "bg-muted border-border"
                  }`}
                >
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        <h4 className="font-semibold text-sm">{notification.title}</h4>
                        {!notification.read && <span className="w-2 h-2 bg-primary rounded-full"></span>}
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">{notification.message}</p>

{notification.data && (
                        <div className="mt-2 text-xs space-y-1">
                          {notification.data.customerName && (
                            <p>
                              <span className="font-semibold">Cliente:</span> {notification.data.customerName}
                            </p>
                          )}
                          {notification.data.total && (
                            <p>
                              <span className="font-semibold">Total:</span>{" "}
                              {(notification.data.total / 1000).toFixed(1)}k Kz
                            </p>
                          )}
                        </div>
                      )}

<p className="text-xs text-muted-foreground mt-2">
                        {new Date(notification.timestamp).toLocaleString("pt-PT")}
                      </p>
                    </div>

{!notification.read && (
                      <Button size="sm" variant="outline" onClick={() => markAsRead(notification.id)} className="gap-1">
                        <Check className="h-3 w-3" />
                        Marcar
                      </Button>
                    )}
                  </div>
                </div>
              ))
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/notifications-context.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

export interface Notification {
  id: string
  type: "order" | "user_signup" | "course_enrollment" | "support_ticket"
  title: string
  message: string
  timestamp: number
  read: boolean
  data?: Record<string, any>
}

interface NotificationsContextType {
  notifications: Notification[]
  addNotification: (notification: Omit<Notification, "id" | "timestamp" | "read">) => void
  markAsRead: (id: string) => void
  clearNotifications: () => void
  unreadCount: number
}

const NotificationsContext = createContext<NotificationsContextType | undefined>(undefined)

const DEMO_NOTIFICATIONS: Notification[] = [
  {
    id: "notif_demo_1",
    type: "order",
    title: "Novo Pedido Realizado",
    message: "Cliente João Silva realizou uma compra no marketplace",
    timestamp: Date.now() - 5 * 60000,
    read: false,
    data: {
      customerName: "João Silva",
      orderNumber: "#ORD-2024-001",
      total: 85000,
      paymentMethod: "Cartão de Crédito",
    },
  },
  {
    id: "notif_demo_2",
    type: "order",
    title: "Novo Pedido Realizado",
    message: "Cliente Maria Neves realizou uma compra no marketplace",
    timestamp: Date.now() - 15 * 60000,
    read: false,
    data: {
      customerName: "Maria Neves",
      orderNumber: "#ORD-2024-002",
      total: 120000,
      paymentMethod: "Mobile Money (Kwanza Pay)",
    },
  },
  {
    id: "notif_demo_3",
    type: "order",
    title: "Novo Pedido Realizado",
    message: "Cliente Pedro Costa realizou uma compra no marketplace",
    timestamp: Date.now() - 25 * 60000,
    read: true,
    data: {
      customerName: "Pedro Costa",
      orderNumber: "#ORD-2024-003",
      total: 65000,
      paymentMethod: "Transferência Bancária",
    },
  },
  {
    id: "notif_demo_4",
    type: "order",
    title: "Novo Pedido Realizado",
    message: "Cliente Ana Ferreira realizou uma compra no marketplace",
    timestamp: Date.now() - 45 * 60000,
    read: true,
    data: {
      customerName: "Ana Ferreira",
      orderNumber: "#ORD-2024-004",
      total: 155000,
      paymentMethod: "Cartão de Débito",
    },
  },
  {
    id: "notif_demo_5",
    type: "user_signup",
    title: "Novo Utilizador Registado",
    message: "Carlos Mendes criou uma nova conta na plataforma",
    timestamp: Date.now() - 60 * 60000,
    read: true,
    data: {
      userName: "Carlos Mendes",
      email: "carlos@example.com",
    },
  },
  {
    id: "notif_demo_6",
    type: "order",
    title: "Novo Pedido Realizado",
    message: "Cliente Sofia Gomes realizou uma compra no marketplace",
    timestamp: Date.now() - 75 * 60000,
    read: true,
    data: {
      customerName: "Sofia Gomes",
      orderNumber: "#ORD-2024-005",
      total: 95000,
      paymentMethod: "Mobile Money (Emola)",
    },
  },
  {
    id: "notif_demo_7",
    type: "course_enrollment",
    title: "Novo Aluno em Curso",
    message: "Lúcia Barbosa se inscreveu no curso Linux Avançado",
    timestamp: Date.now() - 90 * 60000,
    read: true,
    data: {
      studentName: "Lúcia Barbosa",
      courseName: "Linux Avançado",
    },
  },
  {
    id: "notif_demo_8",
    type: "order",
    title: "Novo Pedido Realizado",
    message: "Cliente Gonçalo Santos realizou uma compra no marketplace",
    timestamp: Date.now() - 120 * 60000,
    read: true,
    data: {
      customerName: "Gonçalo Santos",
      orderNumber: "#ORD-2024-006",
      total: 78000,
      paymentMethod: "Cartão de Crédito",
    },
  },
  {
    id: "notif_demo_9",
    type: "support_ticket",
    title: "Novo Chamado de Suporte",
    message: "Novo serviço técnico agendado por Amaro Dias",
    timestamp: Date.now() - 150 * 60000,
    read: true,
    data: {
      customerName: "Amaro Dias",
      service: "Instalação de Router Wi-Fi",
    },
  },
  {
    id: "notif_demo_10",
    type: "order",
    title: "Novo Pedido Realizado",
    message: "Cliente Daniela Rocha realizou uma compra no marketplace",
    timestamp: Date.now() - 180 * 60000,
    read: true,
    data: {
      customerName: "Daniela Rocha",
      orderNumber: "#ORD-2024-007",
      total: 142000,
      paymentMethod: "Transferência Bancária",
    },
  },
  {
    id: "notif_demo_11",
    type: "user_signup",
    title: "Novo Utilizador Registado",
    message: "Filipe Monteiro criou uma nova conta na plataforma",
    timestamp: Date.now() - 210 * 60000,
    read: true,
    data: {
      userName: "Filipe Monteiro",
      email: "filipe@example.com",
    },
  },
  {
    id: "notif_demo_12",
    type: "course_enrollment",
    title: "Novo Aluno em Curso",
    message: "Lurdes Marques se inscreveu no curso Cibersegurança Básica",
    timestamp: Date.now() - 240 * 60000,
    read: true,
    data: {
      studentName: "Lurdes Marques",
      courseName: "Cibersegurança Básica",
    },
  },
  {
    id: "notif_demo_13",
    type: "order",
    title: "Novo Pedido Realizado",
    message: "Cliente Rui Pereira realizou uma compra no marketplace",
    timestamp: Date.now() - 270 * 60000,
    read: true,
    data: {
      customerName: "Rui Pereira",
      orderNumber: "#ORD-2024-008",
      total: 105000,
      paymentMethod: "Mobile Money (Unitel Money)",
    },
  },
  {
    id: "notif_demo_14",
    type: "order",
    title: "Novo Pedido Realizado",
    message: "Cliente Joana Silva realizou uma compra no marketplace",
    timestamp: Date.now() - 300 * 60000,
    read: true,
    data: {
      customerName: "Joana Silva",
      orderNumber: "#ORD-2024-009",
      total: 88000,
      paymentMethod: "Cartão de Débito",
    },
  },
  {
    id: "notif_demo_15",
    type: "support_ticket",
    title: "Novo Chamado de Suporte",
    message: "Novo serviço técnico agendado por Mateus Lopes",
    timestamp: Date.now() - 330 * 60000,
    read: true,
    data: {
      customerName: "Mateus Lopes",
      service: "Configuração de Sistema",
    },
  },
]

export function NotificationsProvider({ children }: { children: React.ReactNode }) {
  const [notifications, setNotifications] = useState<Notification[]>([])

useEffect(() => {
    const storedNotifications = localStorage.getItem("killmay_notifications")
    if (storedNotifications) {
      try {
        setNotifications(JSON.parse(storedNotifications))
      } catch (error) {
        console.error("[v0] Erro ao carregar notificações:", error)
      }
    } else {
      setNotifications(DEMO_NOTIFICATIONS)
      localStorage.setItem("killmay_notifications", JSON.stringify(DEMO_NOTIFICATIONS))
    }
  }, [])

const saveNotifications = (newNotifications: Notification[]) => {
    localStorage.setItem("killmay_notifications", JSON.stringify(newNotifications))
    setNotifications(newNotifications)
  }

const addNotification = (notification: Omit<Notification, "id" | "timestamp" | "read">) => {
    const newNotification: Notification = {
      ...notification,
      id: `notif_${Date.now()}`,
      timestamp: Date.now(),
      read: false,
    }
    saveNotifications([newNotification, ...notifications])
  }

const markAsRead = (id: string) => {
    const updated = notifications.map((notif) => (notif.id === id ? { ...notif, read: true } : notif))
    saveNotifications(updated)
  }

const clearNotifications = () => {
    saveNotifications([])
  }

const unreadCount = notifications.filter((n) => !n.read).length

return (
    <NotificationsContext.Provider
      value={{ notifications, addNotification, markAsRead, clearNotifications, unreadCount }}
    >
      {children}
    </NotificationsContext.Provider>
  )
}

export function useNotifications() {
  const context = useContext(NotificationsContext)
  if (!context) {
    throw new Error("useNotifications deve ser usado dentro de NotificationsProvider")
  }
  return context
}
[V0_FILE]jpg:file="public/iphone-15-pro-max.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/iphone-15-pro-max-pPrvPw6zychm7RuEBm6GddFQmKcwE9.jpg" isMerged="true"
[V0_FILE]jpg:file="public/samsung-s24-ultra.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/samsung-s24-ultra-VrwSwPBOUokWrLM5Ku8mchPvgWJ7PR.jpg" isMerged="true"
[V0_FILE]jpg:file="public/iphone-15.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/iphone-15-nPqg5C8RCt6czW3a5nI7DLEmXTrqu1.jpg" isMerged="true"
[V0_FILE]jpg:file="public/samsung-a55.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/samsung-a55-pZYk3okxsIfYz49iUwPXb9VXyoLwaj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/macbook-pro-16.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/macbook-pro-16-j733lQTNRgBv58hmyELCj1EDbBEF94.jpg" isMerged="true"
[V0_FILE]jpg:file="public/macbook-air-15.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/macbook-air-15-3yeIY67KV4cgS6CgMJVsp8WtWnTEFE.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dell-xps-17.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dell-xps-17-PQWPCyny0Tyhb393GSdjyputAymQND.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hp-pavilion-15.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hp-pavilion-15-Eu9nJAzYuvxQ3pfkZOn5OimxBC3Uwe.jpg" isMerged="true"
[V0_FILE]jpg:file="public/trator-agricola.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/trator-agricola-dVDLLPmph007XZ3YyWHq2i3x4swR9y.jpg" isMerged="true"
[V0_FILE]jpg:file="public/arador-mecanico.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/arador-mecanico-4A1y4RVYo81nEKEcbiVKDOob94AV3M.jpg" isMerged="true"
[V0_FILE]jpg:file="public/sistema-irrigacao.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sistema-irrigacao-8QkxOJ4zQLo9Mw1gK8zVkuUrrdHJJT.jpg" isMerged="true"
[V0_FILE]jpg:file="public/sementes-milho.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sementes-milho-cyzov6LVOgUaJkNLUkHBphowBwXOcT.jpg" isMerged="true"
[V0_FILE]jpg:file="public/sistema-aeration.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sistema-aeration-aLmw2uhebxPbhPW8VTGHZ90UC5eLyV.jpg" isMerged="true"
[V0_FILE]jpg:file="public/racao-piscicola.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/racao-piscicola-w2qVT7QVe2tTq31MxfoeSX3ivHSlx1.jpg" isMerged="true"
[V0_FILE]jpg:file="public/tanque-fibra-3000.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tanque-fibra-3000-xMFKJBSBXtvLL6FvJeaDW10WM4zOhg.jpg" isMerged="true"
[V0_FILE]jpg:file="public/medidor-ph.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/medidor-ph-Mpgi0KBUJXJwamlH5blnUsBCyIT1BD.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/agrotech/agrotech-videos.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Play, Clock, User } from "lucide-react"

const VIDEOS = [
  {
    id: 1,
    title: "Preparação do Solo para Plantação",
    description: "Aprenda as técnicas essenciais para preparar o solo antes de plantar",
    category: "Plantações",
    duration: 14,
    instructor: "João Silva",
    thumbnail: "/soil-preparation.jpg",
    videoUrl: "https://www.youtube.com/embed/iMLnLh_r0jw",
    views: 2341,
  },
  {
    id: 2,
    title: "Irrigação Eficiente em Cultivos",
    description: "Técnicas modernas de irrigação para economizar água",
    category: "Plantações",
    duration: 18,
    instructor: "Maria Santos",
    thumbnail: "/irrigation-system.jpg",
    videoUrl: "https://www.youtube.com/embed/YfxSCKjM-6Q",
    views: 1876,
  },
  {
    id: 3,
    title: "Controle de Pragas Naturalmente",
    description: "Métodos biológicos para combater pragas sem químicos",
    category: "Plantações",
    duration: 22,
    instructor: "Pedro Oliveira",
    thumbnail: "/pest-control.jpg",
    videoUrl: "https://www.youtube.com/embed/Xvz1Fd2x8iU",
    views: 1542,
  },
  {
    id: 4,
    title: "Cultivo de Milho de Alta Produção",
    description: "Passo a passo para aumentar a produção de milho",
    category: "Plantações",
    duration: 20,
    instructor: "Ana Costa",
    thumbnail: "/corn-farming.jpg",
    videoUrl: "https://www.youtube.com/embed/3xAkz8_PYOM",
    views: 2654,
  },
  {
    id: 5,
    title: "Criação de Peixes em Tanques",
    description: "Guia completo para piscicultura em tanques",
    category: "Piscicultura",
    duration: 25,
    instructor: "Carlos Mendes",
    thumbnail: "/fish-farming.jpg",
    videoUrl: "https://www.youtube.com/embed/vYaFczKA72Q",
    views: 1298,
  },
  {
    id: 6,
    title: "Qualidade da Água para Peixes",
    description: "Como manter a qualidade da água em sistemas de piscicultura",
    category: "Piscicultura",
    duration: 16,
    instructor: "Mariana Ferreira",
    thumbnail: "/water-quality.jpg",
    videoUrl: "https://www.youtube.com/embed/6JbhQKQzNR4",
    views: 1089,
  },
  {
    id: 7,
    title: "Nutrição e Alimentação de Peixes",
    description: "Otimize a nutrição dos seus peixes para melhor crescimento",
    category: "Piscicultura",
    duration: 19,
    instructor: "Roberto Silva",
    thumbnail: "/fish-nutrition.jpg",
    videoUrl: "https://www.youtube.com/embed/DQQb_lQ-vKc",
    views: 945,
  },
  {
    id: 8,
    title: "Colheita e Armazenamento de Produtos",
    description: "Técnicas para colheita e armazenamento adequado",
    category: "Plantações",
    duration: 21,
    instructor: "Helena Costa",
    thumbnail: "/harvest-storage.jpg",
    videoUrl: "https://www.youtube.com/embed/d_5RW3Yq5hI",
    views: 1734,
  },
]

const CATEGORIES = ["Todos", "Plantações", "Piscicultura"]

export function AgroTechVideos() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("Todos")
  const [selectedVideoId, setSelectedVideoId] = useState(VIDEOS[0].id)

const filteredVideos = VIDEOS.filter((video) => {
    const matchesSearch = video.title.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesCategory = selectedCategory === "Todos" || video.category === selectedCategory
    return matchesSearch && matchesCategory
  })

const selectedVideo = VIDEOS.find((v) => v.id === selectedVideoId)

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Player Principal */}
        <div className="lg:col-span-2 space-y-6">
          {selectedVideo && (
            <Card className="overflow-hidden">
              <div className="aspect-video bg-black">
                <iframe
                  width="100%"
                  height="100%"
                  src={selectedVideo.videoUrl}
                  title={selectedVideo.title}
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              </div>
              <CardContent className="pt-4">
                <h2 className="text-2xl font-bold text-foreground">{selectedVideo.title}</h2>
                <p className="text-muted-foreground mt-2">{selectedVideo.description}</p>
                <div className="flex flex-wrap items-center gap-3 mt-4">
                  <Badge variant="outline">{selectedVideo.category}</Badge>
                  <div className="flex items-center gap-1 text-sm text-muted-foreground">
                    <Clock className="h-4 w-4" />
                    {selectedVideo.duration} minutos
                  </div>
                  <div className="flex items-center gap-1 text-sm text-muted-foreground">
                    <User className="h-4 w-4" />
                    {selectedVideo.instructor}
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </div>

{/* Sidebar - Pesquisa e Playlist */}
        <div className="space-y-4">
          {/* Pesquisa */}
          <div className="space-y-3">
            <div className="relative">
              <Search className="absolute left-3 top-3 h-5 w-5 text-muted-foreground" />
              <Input
                placeholder="Pesquisar vídeos..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={selectedCategory} onValueChange={setSelectedCategory}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {CATEGORIES.map((cat) => (
                  <SelectItem key={cat} value={cat}>
                    {cat}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

{/* Lista de Vídeos */}
          <div className="space-y-2 max-h-[600px] overflow-y-auto">
            {filteredVideos.map((video) => (
              <button
                key={video.id}
                onClick={() => setSelectedVideoId(video.id)}
                className={`w-full text-left p-2 rounded-lg border transition-colors ${
                  selectedVideoId === video.id
                    ? "bg-primary text-primary-foreground border-primary"
                    : "hover:bg-muted border-border"
                }`}
              >
                <div className="flex gap-2">
                  <div className="relative w-16 h-12 flex-shrink-0 bg-muted rounded overflow-hidden">
                    <img
                      src={video.thumbnail || "/placeholder.svg"}
                      alt={video.title}
                      className="w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 flex items-center justify-center bg-black/40">
                      <Play className="h-3 w-3 text-white" />
                    </div>
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium line-clamp-2">{video.title}</p>
                    <p className="text-xs text-muted-foreground mt-0.5">{video.duration} min</p>
                    <p className="text-xs text-muted-foreground">{video.views.toLocaleString("pt-PT")} visualizações</p>
                  </div>
                </div>
              </button>
            ))}
          </div>

{filteredVideos.length === 0 && (
            <div className="text-center py-8 text-sm text-muted-foreground">Nenhum vídeo encontrado</div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/soil-preparation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/soil-preparation-3S6thzte3hGM72NPtFSSakfo2zHNPb.jpg" isMerged="true"
[V0_FILE]jpg:file="public/irrigation-system.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/irrigation-system-rmngOgWYhPigxAC0r2KwykQXdBxlPG.jpg" isMerged="true"
[V0_FILE]jpg:file="public/pest-control.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pest-control-m3yO6spPcpgXnV0Qtr2NpXfAtai4gm.jpg" isMerged="true"
[V0_FILE]jpg:file="public/corn-farming.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/corn-farming-vwcfJQTnh30TUe9Z3wMscLrYiMcZVh.jpg" isMerged="true"
[V0_FILE]jpg:file="public/water-quality.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/water-quality-sxCEDeR7QSINq9BMPYDkYCc1nytbcd.jpg" isMerged="true"
[V0_FILE]jpg:file="public/fish-nutrition.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fish-nutrition-1EFH3MYlykZQzgK7c63oYXbjfXarfB.jpg" isMerged="true"
[V0_FILE]jpg:file="public/harvest-storage.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/harvest-storage-1FiOGYPG3ilUC2vUb4WJInkDShTKno.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/(protected)/repair/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { ProtectedLayout } from "@/components/protected-layout"
import { RepairBooking } from "@/components/repair/repair-booking"
import { RepairHistory } from "@/components/repair/repair-history"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Wrench, History, Phone } from "lucide-react"

export default function RepairPage() {
  const { user } = useAuth()

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Assistência Técnica - Reparação</h1>
          <p className="text-muted-foreground mt-2">
            Serviços especializados de reparação de equipamentos tecnológicos
          </p>
        </div>

<div className="bg-accent/10 border border-accent rounded-lg p-6">
          <div className="flex items-center gap-3 mb-4">
            <Phone className="h-5 w-5 text-accent" />
            <h2 className="text-lg font-semibold text-foreground">Contacte nosso Call Center para Reparações</h2>
          </div>
          <p className="text-muted-foreground mb-3">
            Serviços de reparação de qualidade com diagnóstico gratuito. Disponível 24/7
          </p>
          <a
            href="tel:+244950522721"
            className="inline-flex items-center gap-2 bg-accent text-accent-foreground px-6 py-3 rounded-lg font-semibold hover:bg-accent/90 transition-colors"
          >
            <Phone className="h-4 w-4" />
            +244 950 522 721
          </a>
        </div>

<Tabs defaultValue="booking" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="booking" className="flex items-center gap-2">
              <Wrench className="h-4 w-4" />
              Solicitar Reparação
            </TabsTrigger>
            <TabsTrigger value="history" className="flex items-center gap-2">
              <History className="h-4 w-4" />
              Histórico
            </TabsTrigger>
          </TabsList>

<TabsContent value="history" className="space-y-6">
            <RepairHistory />
          </TabsContent>
        </Tabs>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="components/repair/repair-booking.tsx" isMerged="true"
"use client"

import type React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { useState } from "react"
import { toast } from "sonner"
import { Wrench, DollarSign } from "lucide-react"

const REPAIR_SERVICES = [
  { name: "Reparação de Computador", price: 8000 },
  { name: "Reparação de Notebook", price: 10000 },
  { name: "Reparação de Monitor", price: 5000 },
  { name: "Reparação de Impressora", price: 6000 },
  { name: "Reparação de Router", price: 4500 },
  { name: "Reparação de Periféricos", price: 3000 },
  { name: "Diagnóstico Técnico", price: 2000 },
  { name: "Limpeza Profissional", price: 3500 },
]

const REPAIR_TECHNICIANS = [
  { id: 1, name: "João Silva", specialties: "Computadores, Notebooks", rating: 4.9, experience: "8 anos" },
  { id: 2, name: "Carlos Mendes", specialties: "Periféricos, Diagnóstico", rating: 4.8, experience: "6 anos" },
  { id: 3, name: "Miguel Costa", specialties: "Hardware, Componentes", rating: 4.9, experience: "10 anos" },
  { id: 4, name: "Roberto Silva", specialties: "Redes, Impressoras", rating: 4.7, experience: "7 anos" },
]

const TIME_SLOTS = ["08:00", "09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00"]

export function RepairBooking() {
  const [formData, setFormData] = useState({
    service: "",
    equipmentType: "",
    brand: "",
    model: "",
    date: "",
    time: "",
    technician: "",
    description: "",
  })

const selectedService = REPAIR_SERVICES.find((s) => s.name === formData.service)

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.service || !formData.date || !formData.time || !formData.technician || !formData.equipmentType) {
      toast.error("Preencha todos os campos obrigatórios")
      return
    }
    toast.success("Reparação agendada com sucesso! Receberá confirmação por email.")
    setFormData({
      service: "",
      equipmentType: "",
      brand: "",
      model: "",
      date: "",
      time: "",
      technician: "",
      description: "",
    })
  }

return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {/* Formulário */}
      <Card className="lg:col-span-2">
        <CardHeader>
          <CardTitle>Solicitar Serviço de Reparação</CardTitle>
          <CardDescription>Preencha os dados do seu equipamento e agende um técnico especializado</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Tipo de Equipamento */}
            <div className="space-y-2">
              <Label htmlFor="equipment">Tipo de Equipamento *</Label>
              <Select
                value={formData.equipmentType}
                onValueChange={(value) => setFormData({ ...formData, equipmentType: value })}
              >
                <SelectTrigger id="equipment">
                  <SelectValue placeholder="Selecione o tipo de equipamento" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Computador">Computador Desktop</SelectItem>
                  <SelectItem value="Notebook">Notebook/Laptop</SelectItem>
                  <SelectItem value="Monitor">Monitor</SelectItem>
                  <SelectItem value="Impressora">Impressora</SelectItem>
                  <SelectItem value="Router">Router/Modem</SelectItem>
                  <SelectItem value="Periféricos">Periféricos (Teclado, Mouse, etc)</SelectItem>
                  <SelectItem value="Outro">Outro</SelectItem>
                </SelectContent>
              </Select>
            </div>

{/* Marca e Modelo */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="brand">Marca</Label>
                <Input
                  id="brand"
                  placeholder="Ex: Dell, HP, Lenovo"
                  value={formData.brand}
                  onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="model">Modelo</Label>
                <Input
                  id="model"
                  placeholder="Ex: XPS 13, Pavilion 15"
                  value={formData.model}
                  onChange={(e) => setFormData({ ...formData, model: e.target.value })}
                />
              </div>
            </div>

{/* Tipo de Serviço */}
            <div className="space-y-2">
              <Label htmlFor="service">Serviço Requerido *</Label>
              <Select value={formData.service} onValueChange={(value) => setFormData({ ...formData, service: value })}>
                <SelectTrigger id="service">
                  <SelectValue placeholder="Selecione o serviço" />
                </SelectTrigger>
                <SelectContent>
                  {REPAIR_SERVICES.map((service) => (
                    <SelectItem key={service.name} value={service.name}>
                      <div className="flex items-center gap-2">
                        <span>{service.name}</span>
                        <span className="text-xs text-muted-foreground">({(service.price / 1000).toFixed(0)}k Kz)</span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{/* Técnico */}
            <div className="space-y-2">
              <Label htmlFor="technician">Técnico Especializado *</Label>
              <Select
                value={formData.technician}
                onValueChange={(value) => setFormData({ ...formData, technician: value })}
              >
                <SelectTrigger id="technician">
                  <SelectValue placeholder="Escolha um técnico" />
                </SelectTrigger>
                <SelectContent>
                  {REPAIR_TECHNICIANS.map((tech) => (
                    <SelectItem key={tech.id} value={tech.id.toString()}>
                      <div className="flex items-center gap-2">
                        <span>{tech.name}</span>
                        <span className="text-xs text-muted-foreground">⭐ {tech.rating}</span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{/* Data e Hora */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="date">Data da Reparação *</Label>
                <Input
                  id="date"
                  type="date"
                  value={formData.date}
                  onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                  min={new Date().toISOString().split("T")[0]}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="time">Hora *</Label>
                <Select value={formData.time} onValueChange={(value) => setFormData({ ...formData, time: value })}>
                  <SelectTrigger id="time">
                    <SelectValue placeholder="Selecione hora" />
                  </SelectTrigger>
                  <SelectContent>
                    {TIME_SLOTS.map((slot) => (
                      <SelectItem key={slot} value={slot}>
                        {slot}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

{/* Descrição do Problema */}
            <div className="space-y-2">
              <Label htmlFor="description">Descrição do Problema *</Label>
              <Textarea
                id="description"
                placeholder="Descreva em detalhes qual é o problema do equipamento..."
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                rows={4}
              />
            </div>

<Button type="submit" className="w-full gap-2">
              <Wrench className="h-4 w-4" />
              Agendar Reparação
            </Button>
          </form>
        </CardContent>
      </Card>

{/* Sidebar - Técnicos e Preço */}
      <div className="space-y-4">
        {/* Preço do Serviço */}
        {selectedService && (
          <Card className="border-primary/50 bg-primary/5">
            <CardHeader>
              <CardTitle className="text-base flex items-center gap-2">
                <DollarSign className="h-4 w-4" />
                Valor Estimado
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold text-primary">{(selectedService.price / 1000).toFixed(0)}k Kz</p>
              <p className="text-xs text-muted-foreground mt-2">Pode variar conforme diagnóstico</p>
            </CardContent>
          </Card>
        )}

{/* Técnicos Disponíveis */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">Técnicos Especializados</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {REPAIR_TECHNICIANS.map((tech) => (
              <div key={tech.id} className="border border-border rounded-lg p-3 hover:bg-muted/50 transition">
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-bold text-sm">
                    {tech.name.charAt(0)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-semibold text-sm text-foreground">{tech.name}</p>
                    <p className="text-xs text-muted-foreground">{tech.specialties}</p>
                    <div className="flex items-center justify-between mt-1">
                      <span className="text-xs text-yellow-500">⭐ {tech.rating}</span>
                      <Badge variant="outline" className="text-xs">
                        {tech.experience}
                      </Badge>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>

{/* Informações */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Informações</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div>
              <p className="text-xs text-muted-foreground mb-1">Diagnóstico</p>
              <p className="text-foreground">Gratuito para todos os equipamentos</p>
            </div>
            <div>
              <p className="text-xs text-muted-foreground mb-1">Tempo de Entrega</p>
              <p className="text-foreground">24-48h (conforme complexidade)</p>
            </div>
            <div>
              <p className="text-xs text-muted-foreground mb-1">Garantia</p>
              <p className="text-foreground">90 dias na reparação</p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/repair/repair-history.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CheckCircle, Clock, AlertCircle, Wrench } from "lucide-react"
import Link from "next/link"

const repairTickets = [
  {
    id: "REP-001",
    equipment: "Computador Dell XPS 13",
    service: "Reparação de Hardware",
    date: "2024-11-10",
    time: "10:00",
    technician: "João Silva",
    status: "Concluído",
    cost: 8000,
    problem: "Ventilador com ruído anormal",
  },
  {
    id: "REP-002",
    equipment: "Notebook HP Pavilion",
    service: "Diagnóstico Técnico",
    date: "2024-11-15",
    time: "14:00",
    technician: "Carlos Mendes",
    status: "Concluído",
    cost: 2000,
    problem: "Bateria não carrega",
  },
  {
    id: "REP-003",
    equipment: "Monitor LG 24 polegadas",
    service: "Reparação de Monitor",
    date: "2024-11-20",
    time: "09:00",
    technician: "Miguel Costa",
    status: "Agendado",
    cost: 5000,
    problem: "Sem sinal de vídeo",
  },
  {
    id: "REP-004",
    equipment: "Impressora Canon",
    service: "Reparação de Impressora",
    date: "2024-11-22",
    time: "15:00",
    technician: "Roberto Silva",
    status: "Pendente",
    cost: 6000,
    problem: "Encravamento de papel",
  },
]

export function RepairHistory() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Histórico de Reparações</CardTitle>
        <CardDescription>Acompanhe todos os seus serviços de reparação</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {repairTickets.map((ticket) => {
            const Status = statusConfig[ticket.status as keyof typeof statusConfig]
            const StatusIcon = Status?.icon || Clock

return (
              <div key={ticket.id} className="border border-border rounded-lg p-4 hover:bg-muted/50 transition">
                <div className="flex items-start justify-between mb-3">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <p className="font-semibold text-foreground">{ticket.equipment}</p>
                      <Badge className={Status?.color}>
                        <StatusIcon className="h-3 w-3 mr-1" />
                        {ticket.status}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      ID: {ticket.id} | {ticket.problem}
                    </p>
                  </div>
                  <p className="font-semibold text-foreground">{(ticket.cost / 1000).toFixed(1)}k Kz</p>
                </div>

<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-3 text-sm">
                  <div>
                    <p className="text-xs text-muted-foreground">Data</p>
                    <p className="font-medium text-foreground">{ticket.date}</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Hora</p>
                    <p className="font-medium text-foreground">{ticket.time}</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Serviço</p>
                    <p className="font-medium text-foreground text-xs">{ticket.service}</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Técnico</p>
                    <p className="font-medium text-foreground">{ticket.technician}</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Valor</p>
                    <p className="font-medium text-foreground">{(ticket.cost / 1000).toFixed(1)}k Kz</p>
                  </div>
                </div>

<div className="flex gap-2 pt-3 border-t border-border">
                  <Link href={`/repair/ticket/${ticket.id}`} className="flex-1">
                    <Button variant="outline" size="sm" className="w-full bg-transparent">
                      Ver Detalhes
                    </Button>
                  </Link>
                  {ticket.status === "Agendado" && (
                    <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                      Cancelar
                    </Button>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/reviews-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"

export interface Review {
  id: string
  itemId: number | string
  itemType: "product" | "course" | "technician" | "repair"
  userId: string
  userName: string
  rating: number
  title: string
  comment: string
  date: string
  helpful: number
}

interface ReviewsContextType {
  reviews: Review[]
  addReview: (review: Omit<Review, "id" | "date">) => void
  getReviewsByItem: (itemId: number | string, itemType: string) => Review[]
  getAverageRating: (itemId: number | string, itemType: string) => number
}

const ReviewsContext = createContext<ReviewsContextType | undefined>(undefined)

export function ReviewsProvider({ children }: { children: React.ReactNode }) {
  const [reviews, setReviews] = useState<Review[]>([])

useEffect(() => {
    const storedReviews = localStorage.getItem("killmay_reviews")
    if (storedReviews) {
      try {
        setReviews(JSON.parse(storedReviews))
      } catch (error) {
        console.error("[v0] Erro ao carregar reviews:", error)
      }
    }
  }, [])

const addReview = (review: Omit<Review, "id" | "date">) => {
    const newReview: Review = {
      ...review,
      id: `review_${Date.now()}`,
      date: new Date().toISOString().split("T")[0],
      helpful: 0,
    }
    const updatedReviews = [...reviews, newReview]
    setReviews(updatedReviews)
    localStorage.setItem("killmay_reviews", JSON.stringify(updatedReviews))
  }

const getReviewsByItem = (itemId: number | string, itemType: string): Review[] => {
    return reviews.filter((r) => r.itemId === itemId && r.itemType === itemType)
  }

const getAverageRating = (itemId: number | string, itemType: string): number => {
    const itemReviews = getReviewsByItem(itemId, itemType)
    if (itemReviews.length === 0) return 0
    const total = itemReviews.reduce((sum, r) => sum + r.rating, 0)
    return Math.round((total / itemReviews.length) * 10) / 10
  }

return (
    <ReviewsContext.Provider value={{ reviews, addReview, getReviewsByItem, getAverageRating }}>
      {children}
    </ReviewsContext.Provider>
  )
}

export function useReviews() {
  const context = useContext(ReviewsContext)
  if (!context) {
    throw new Error("useReviews deve ser usado dentro de ReviewsProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/reviews/review-section.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useAuth } from "@/app/auth-context"
import { useReviews } from "@/app/reviews-context"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Star, ThumbsUp } from "lucide-react"
import { toast } from "sonner"

interface ReviewSectionProps {
  itemId: number | string
  itemType: "product" | "course" | "technician" | "repair"
  itemName: string
}

export function ReviewSection({ itemId, itemType, itemName }: ReviewSectionProps) {
  const { user } = useAuth()
  const { addReview, getReviewsByItem, getAverageRating } = useReviews()

const [showForm, setShowForm] = useState(false)
  const [formData, setFormData] = useState({
    rating: 5,
    title: "",
    comment: "",
  })

const itemReviews = getReviewsByItem(itemId, itemType)
  const averageRating = getAverageRating(itemId, itemType)

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.title || !formData.comment) {
      toast.error("Preencha todos os campos da avaliação")
      return
    }

if (!user) {
      toast.error("Faça login para deixar uma avaliação")
      return
    }

addReview({
      itemId,
      itemType,
      userId: user.id,
      userName: user.name,
      rating: formData.rating,
      title: formData.title,
      comment: formData.comment,
    })

toast.success("Avaliação adicionada com sucesso!")
    setFormData({ rating: 5, title: "", comment: "" })
    setShowForm(false)
  }

const getRatingColor = (rating: number) => {
    if (rating >= 4.5) return "text-green-600"
    if (rating >= 3.5) return "text-yellow-600"
    return "text-red-600"
  }

const getRatingBarColor = (rating: number) => {
    if (rating >= 4) return "bg-green-500"
    if (rating >= 3) return "bg-yellow-500"
    return "bg-red-500"
  }

return (
    <div className="space-y-6">
      {/* Resumo de Avaliações */}
      <Card>
        <CardHeader>
          <CardTitle>Avaliações e Opiniões</CardTitle>
          <CardDescription>{itemName}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Estatísticas */}
          <div className="flex flex-col sm:flex-row gap-6 pb-6 border-b border-border">
            <div className="flex items-center gap-4">
              <div>
                <p className={`text-4xl font-bold ${getRatingColor(averageRating)}`}>{averageRating.toFixed(1)}</p>
                <p className="text-sm text-muted-foreground">de 5 estrelas</p>
              </div>
              <div className="flex gap-1">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    className={`h-5 w-5 ${
                      i < Math.round(averageRating) ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
                    }`}
                  />
                ))}
              </div>
            </div>

<div className="flex-1">
              <p className="text-sm text-muted-foreground mb-2">
                Baseado em {itemReviews.length} {itemReviews.length === 1 ? "avaliação" : "avaliações"}
              </p>
              {[5, 4, 3, 2, 1].map((rating) => {
                const count = itemReviews.filter((r) => r.rating === rating).length
                const percentage = itemReviews.length > 0 ? (count / itemReviews.length) * 100 : 0
                return (
                  <div key={rating} className="flex items-center gap-2 mb-2">
                    <span className="text-xs text-muted-foreground w-4">{rating}</span>
                    <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                    <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                      <div className={`h-full ${getRatingBarColor(rating)}`} style={{ width: `${percentage}%` }} />
                    </div>
                    <span className="text-xs text-muted-foreground w-8">{count}</span>
                  </div>
                )
              })}
            </div>
          </div>

{/* Botão para adicionar avaliação */}
          {!showForm && (
            <Button onClick={() => setShowForm(true)} className="w-full">
              Deixar Avaliação
            </Button>
          )}

{/* Formulário de Avaliação */}
          {showForm && (
            <form onSubmit={handleSubmit} className="space-y-4 p-4 bg-muted/50 rounded-lg">
              <div className="space-y-2">
                <Label htmlFor="rating">Classificação</Label>
                <div className="flex gap-2">
                  {[1, 2, 3, 4, 5].map((rating) => (
                    <button
                      key={rating}
                      type="button"
                      onClick={() => setFormData({ ...formData, rating })}
                      className="transition-transform hover:scale-110"
                    >
                      <Star
                        className={`h-8 w-8 cursor-pointer ${
                          rating <= formData.rating ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
                        }`}
                      />
                    </button>
                  ))}
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="title">Título da Avaliação</Label>
                <Input
                  id="title"
                  placeholder="Resuma sua opinião em poucas palavras"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="comment">Sua Opinião</Label>
                <Textarea
                  id="comment"
                  placeholder="Compartilhe sua experiência com este produto/serviço"
                  value={formData.comment}
                  onChange={(e) => setFormData({ ...formData, comment: e.target.value })}
                  rows={4}
                />
              </div>

<div className="flex gap-2">
                <Button type="submit" className="flex-1">
                  Publicar Avaliação
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  className="flex-1 bg-transparent"
                  onClick={() => setShowForm(false)}
                >
                  Cancelar
                </Button>
              </div>
            </form>
          )}

{/* Lista de Avaliações */}
          <div className="space-y-4">
            {itemReviews.length === 0 ? (
              <p className="text-center text-muted-foreground py-8">Sem avaliações ainda. Seja o primeiro a avaliar!</p>
            ) : (
              itemReviews.map((review) => (
                <div key={review.id} className="border border-border rounded-lg p-4 hover:bg-muted/50 transition">
                  <div className="flex items-start justify-between mb-2">
                    <div>
                      <p className="font-semibold text-foreground">{review.title}</p>
                      <p className="text-sm text-muted-foreground">
                        por {review.userName} • {review.date}
                      </p>
                    </div>
                    <div className="flex gap-1">
                      {[...Array(5)].map((_, i) => (
                        <Star
                          key={i}
                          className={`h-4 w-4 ${
                            i < review.rating ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
                          }`}
                        />
                      ))}
                    </div>
                  </div>

<p className="text-foreground mb-3">{review.comment}</p>

<div className="flex items-center gap-2 pt-3 border-t border-border">
                    <Button size="sm" variant="ghost" className="gap-2 text-muted-foreground hover:text-foreground">
                      <ThumbsUp className="h-4 w-4" />
                      Útil ({review.helpful})
                    </Button>
                  </div>
                </div>
              ))
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/marketplace/product/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

const PRODUCTS = [
  {
    id: 1,
    name: "Smartphone Android Pro",
    category: "Telemóveis",
    price: 45000,
    rating: 4.8,
    reviews: 234,
    image: "/android-smartphone.jpg",
    description: "Telemóvel de última geração com câmara profissional",
    fullDescription:
      "Experimente o futuro com o Smartphone Android Pro. Com processador de última geração, câmara tripla profissional de 48MP, bateria de 5000mAh e tela AMOLED de 6.7 polegadas com taxa de atualização de 120Hz. Perfeito para fotografia, vídeo e gaming.",
    specs: [
      { label: "Processador", value: "Snapdragon 8 Gen 3" },
      { label: "RAM", value: "12GB LPDDR5X" },
      { label: "Armazenamento", value: "256GB UFS 4.0" },
      { label: "Câmara Frontal", value: "32MP" },
      { label: "Câmara Traseira", value: "48MP + 13MP + 8MP" },
      { label: "Bateria", value: "5000mAh" },
      { label: "Carga Rápida", value: "120W USB-C" },
      { label: "SO", value: "Android 15" },
    ],
    inStock: true,
    warranty: "2 anos",
  },
  {
    id: 2,
    name: 'Laptop Gaming 15"',
    category: "Computadores",
    price: 125000,
    rating: 4.9,
    reviews: 189,
    image: "/gaming-laptop.png",
    description: "Laptop poderoso para jogos e edição profissional",
    fullDescription:
      "Laptop Gaming 15 polegadas com processador Intel Core i9 de 13ª geração, GPU NVIDIA RTX 4070, 32GB RAM e SSD NVMe 1TB. Tela IPS 165Hz com cores precisas. Resfriamento avançado para desempenho máximo sustentado.",
    specs: [
      { label: "Processador", value: "Intel Core i9-13900H" },
      { label: "GPU", value: "NVIDIA RTX 4070" },
      { label: "RAM", value: "32GB DDR5" },
      { label: "Armazenamento", value: "1TB NVMe SSD" },
      { label: "Tela", value: '15.6" IPS 165Hz 2560x1440' },
      { label: "Peso", value: "2.3kg" },
      { label: "Bateria", value: "6 horas" },
      { label: "Conexões", value: "USB-C x2, USB-A x2, HDMI, Audio 3.5mm" },
    ],
    inStock: true,
    warranty: "3 anos",
  },
  {
    id: 3,
    name: "Router WiFi 6",
    category: "Rede",
    price: 15000,
    rating: 4.6,
    reviews: 156,
    image: "/wifi-router.jpg",
    description: "Roteador ultra-rápido com cobertura de até 200m²",
    fullDescription:
      "Roteador WiFi 6 (802.11ax) com velocidades de até 3.2 Gbps. Cobertura de 200m² com tecnologia Beamforming. 4 antenas externas para sinal forte e estável. Compatível com dispositivos legados.",
    specs: [
      { label: "Padrão", value: "WiFi 6 (802.11ax)" },
      { label: "Velocidade Máxima", value: "3.2 Gbps" },
      { label: "Cobertura", value: "200m²" },
      { label: "Portas", value: "4x Gigabit Ethernet" },
      { label: "Antenas", value: "4 externas" },
      { label: "Alimentação", value: "PoE 30W" },
      { label: "Protocolos", value: "IPv4/IPv6, DHCP, DNS" },
    ],
    inStock: true,
    warranty: "1 ano",
  },
  {
    id: 4,
    name: 'Monitor 4K 32"',
    category: "Monitores",
    price: 55000,
    rating: 4.7,
    reviews: 98,
    image: "/4k-monitor.jpg",
    description: "Monitor profissional com cores precisas",
    fullDescription:
      "Monitor profissional 4K de 32 polegadas com espaço de cor 100% DCI-P3. Resolução 3840x2160, taxa de atualização 60Hz. Calibração de fábrica com DeltaE < 2. Ideal para fotografia, vídeo e design gráfico.",
    specs: [
      { label: "Resolução", value: "4K (3840x2160)" },
      { label: "Tamanho", value: '32"' },
      { label: "Painel", value: "IPS" },
      { label: "Espaço de Cor", value: "100% DCI-P3" },
      { label: "Taxa de Atualização", value: "60Hz" },
      { label: "Tempo de Resposta", value: "5ms" },
      { label: "Conectividade", value: "DisplayPort x2, HDMI x2, USB-C" },
      { label: "Brilho", value: "400 nits" },
    ],
    inStock: true,
    warranty: "2 anos",
  },
  {
    id: 5,
    name: "Câmara DSLR Profissional",
    category: "Câmaras",
    price: 95000,
    rating: 4.9,
    reviews: 267,
    image: "/professional-camera.jpg",
    description: "Câmara de 24MP com vídeo em 4K",
    fullDescription:
      "Câmara DSLR profissional com sensor full-frame de 24MP, gravação de vídeo 4K a 30fps, autofoco de 51 pontos e buffer contínuo de 10fps. Construção durável à prova de intempéries. Ideal para fotografia profissional.",
    specs: [
      { label: "Sensor", value: "Full-Frame 24MP" },
      { label: "Processador", value: "DIGIC 8" },
      { label: "Vídeo", value: "4K 30fps / 1080p 120fps" },
      { label: "Autofoco", value: "51 pontos" },
      { label: "Taxa de Fotogramas", value: "10 fps" },
      { label: "ISO", value: "100-25600" },
      { label: "Visor", value: "Pentaprism 100%" },
      { label: "Conexões", value: "USB 3.1 Type-C, HDMI, Audio" },
    ],
    inStock: true,
    warranty: "2 anos",
  },
  {
    id: 6,
    name: "Auriculares Sem Fio",
    category: "Áudio",
    price: 8500,
    rating: 4.5,
    reviews: 412,
    image: "/wireless-headphones.jpg",
    description: "Auriculares com cancelamento de ruído ativo",
    fullDescription:
      "Auriculares premium com cancelamento de ruído ativo, duração de bateria de 40 horas, som de alta fidelidade com drivers de 40mm. Controlo sensível ao toque, modo ambiente transparente e emparelhamento de múltiplos dispositivos.",
    specs: [
      { label: "Driver", value: "40mm" },
      { label: "Impedância", value: "32 Ohms" },
      { label: "Frequência", value: "20Hz - 20kHz" },
      { label: "Bluetooth", value: "5.3" },
      { label: "Bateria", value: "40 horas" },
      { label: "Tempo de Carga", value: "2 horas" },
      { label: "Cancelamento de Ruído", value: "Ativo (ANC)" },
      { label: "Peso", value: "250g" },
    ],
    inStock: true,
    warranty: "1 ano",
  },
  {
    id: 7,
    name: 'Tablet 12" Pro',
    category: "Tablets",
    price: 38000,
    rating: 4.8,
    reviews: 145,
    image: "/tablet-pro.jpg",
    description: "Tablet com stylus para profissionais de criação",
    fullDescription:
      "Tablet premium de 12 polegadas com processador de última geração, tela Liquid Retina com 120Hz, 8GB RAM e 256GB armazenamento. Incluí stylus profissional e capa de teclado. Ideal para desenho, design e produtividade.",
    specs: [
      { label: "Tela", value: '12" Liquid Retina 2560x1664' },
      { label: "Processador", value: "Apple M2" },
      { label: "RAM", value: "8GB" },
      { label: "Armazenamento", value: "256GB" },
      { label: "Câmaras", value: "12MP frontal + 12MP traseira" },
      { label: "Bateria", value: "10 horas" },
      { label: "Conectividade", value: "WiFi 6E, Bluetooth 5.3" },
      { label: "Peso", value: "682g" },
    ],
    inStock: true,
    warranty: "1 ano",
  },
  {
    id: 8,
    name: "Smartwatch Fitness",
    category: "Wearables",
    price: 12000,
    rating: 4.4,
    reviews: 223,
    image: "/modern-smartwatch.png",
    description: "Relógio inteligente com monitoramento de saúde",
    fullDescription:
      "Smartwatch com GPS integrado, monitores de frequência cardíaca 24/7, oxigênio no sangue, rastreamento de sono e 100+ modos de exercício. Bateria de 14 dias, resistência à água 5ATM e notificações inteligentes.",
    specs: [
      { label: "Tela", value: '1.9" AMOLED' },
      { label: "Resolução", value: "454x454" },
      { label: "GPS", value: "GNSS de 5 sistemas" },
      { label: "Sensores", value: "FC, SpO2, Temperatura" },
      { label: "Bateria", value: "14 dias" },
      { label: "Resistência à Água", value: "5ATM" },
      { label: "Conectividade", value: "Bluetooth 5.2, WiFi" },
      { label: "Peso", value: "34g" },
    ],
    inStock: true,
    warranty: "1 ano",
  },
  {
    id: 9,
    name: "Teclado Mecânico RGB",
    category: "Periféricos",
    price: 18000,
    rating: 4.7,
    reviews: 334,
    image: "/mechanical-keyboard.png",
    description: "Teclado mecanicista com cores personalizáveis",
    fullDescription:
      "Teclado mecânico full-size com switches selecionáveis, iluminação RGB personalizável, layout português, construção de alumínio e software de configuração avançado. Perfeito para gaming e digitação profissional.",
    specs: [
      { label: "Switches", value: "Hot-swappable mecânicos" },
      { label: "Layout", value: "Português 104 teclas" },
      { label: "Iluminação", value: "RGB 16.8M cores" },
      { label: "Conectividade", value: "USB-C com fio" },
      { label: "Material", value: "Alumínio + ABS" },
      { label: "Tempo de Resposta", value: "1ms" },
      { label: "Taxa de Sondagem", value: "8000Hz" },
      { label: "Peso", value: "920g" },
    ],
    inStock: true,
    warranty: "2 anos",
  },
]

export default function ProductDetailPage() {
  const router = useRouter()
  const [quantity, setQuantity] = useState(1)
  const [product, setProduct] = useState<(typeof PRODUCTS)[0] | null>(null)
  const [loading, setLoading] = useState(true)
  const [addedToCart, setAddedToCart] = useState(false)
  const productId = Number.parseInt(router.query.id as string)

useEffect(() => {
    const loadProduct = async () => {
      const foundProduct = PRODUCTS.find((p) => p.id === productId)
      setProduct(foundProduct || null)
      setLoading(false)
    }
    loadProduct()
  }, [productId])

const handleAddToCart = () => {
    if (!product) return
    const cart = JSON.parse(localStorage.getItem("cart") || "[]")
    const existingItem = cart.find((item: any) => item.id === product.id)

if (existingItem) {
      existingItem.quantity += quantity
    } else {
      cart.push({
        id: product.id,
        name: product.name,
        price: product.price,
        quantity,
        image: product.image,
      })
    }

localStorage.setItem("cart", JSON.stringify(cart))
    setAddedToCart(true)
    setTimeout(() => setAddedToCart(false), 2000)
  }

if (loading) {
    return (
      <ProtectedLayout>
        <div className="text-center py-12">Carregando...</div>
      </ProtectedLayout>
    )
  }

if (!product) {
    return (
      <ProtectedLayout>
        <div className="text-center py-12">
          <h1 className="text-2xl font-bold mb-4">Produto não encontrado</h1>
          <Button onClick={() => router.back()}>Voltar</Button>
        </div>
      </ProtectedLayout>
    )
  }

return (
    <ProtectedLayout>
      <div className="space-y-6">
        <Button variant="outline" onClick={() => router.back()} className="gap-2">
          <ArrowLeft className="h-4 w-4" />
          Voltar
        </Button>

<div className="space-y-6">
            <div>
              <div className="flex items-center justify-between mb-4">
                <Badge variant="secondary">{product.category}</Badge>
                {product.inStock ? (
                  <Badge className="bg-green-600">Em Stock</Badge>
                ) : (
                  <Badge variant="destructive">Fora de Stock</Badge>
                )}
              </div>

<h1 className="text-3xl font-bold text-foreground mb-2">{product.name}</h1>

<div className="flex items-center gap-2 mb-4">
                <div className="flex">
                  {[...Array(5)].map((_, i) => (
                    <Star
                      key={i}
                      className={`h-5 w-5 ${i < Math.floor(product.rating) ? "fill-yellow-400 text-yellow-400" : "text-muted"}`}
                    />
                  ))}
                </div>
                <span className="text-sm text-muted-foreground">
                  {product.rating} ({product.reviews} avaliações)
                </span>
              </div>

<div className="text-4xl font-bold text-primary mb-6">{(product.price / 1000).toFixed(1)}k Kz</div>

<p className="text-muted-foreground mb-6">{product.fullDescription}</p>

<div className="space-y-2 mb-6">
                <div className="flex items-center gap-2 text-sm">
                  <Shield className="h-4 w-4 text-primary" />
                  <span>Garantia de {product.warranty}</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <Truck className="h-4 w-4 text-primary" />
                  <span>Envio grátis em toda Angola</span>
                </div>
              </div>

<div className="flex items-center gap-4 mb-6">
                <span className="text-sm font-semibold">Quantidade:</span>
                <div className="flex items-center border border-border rounded-lg">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    className="h-8 w-8"
                  >
                    -
                  </Button>
                  <span className="px-4 font-semibold">{quantity}</span>
                  <Button variant="ghost" size="sm" onClick={() => setQuantity(quantity + 1)} className="h-8 w-8">
                    +
                  </Button>
                </div>
              </div>

<div className="flex gap-3">
                <Button
                  className="flex-1"
                  size="lg"
                  onClick={handleAddToCart}
                  disabled={!product.inStock}
                  variant={addedToCart ? "default" : "default"}
                >
                  <ShoppingCart className="h-5 w-5 mr-2" />
                  {addedToCart ? "Adicionado!" : "Adicionar ao Carrinho"}
                </Button>
                <Button variant="outline" size="lg">
                  Guardar para Depois
                </Button>
              </div>
            </div>
          </div>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Especificações Técnicas</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {product.specs.map((spec, index) => (
                <div key={index} className="flex justify-between items-start gap-4">
                  <span className="text-muted-foreground font-medium">{spec.label}</span>
                  <span className="font-semibold text-foreground text-right">{spec.value}</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<ReviewSection itemId={productId} itemType="product" itemName={product?.name || ""} />
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/academy/[courseId]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useParams, useRouter } from "next/navigation"
import { useAuth } from "@/app/auth-context"
import { ProtectedLayout } from "@/components/protected-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Star, ArrowLeft, Play, CheckCircle, Download } from "lucide-react"
import { ReviewSection } from "@/components/reviews/review-section"

const COURSES_DATA = {
  1: {
    id: 1,
    title: "Introdução ao Linux",
    description: "Aprenda os fundamentos do sistema operacional Linux, desde a instalação até comandos avançados",
    category: "Tecnologia",
    level: "Iniciante",
    duration: "4 semanas",
    students: 1234,
    rating: 4.8,
    price: 15000,
    image: "/linux-course.jpg",
    instructor: "João Silva",
    lessons: 24,
    modules: [
      {
        id: 1,
        title: "Módulo 1: Introdução ao Linux",
        lessons: [
          {
            id: 1,
            title: "O que é Linux?",
            duration: 12,
            videoUrl: "https://www.youtube.com/embed/XnYvzz8gHj0",
            description: "Conheça a história e características do Linux",
          },
          {
            id: 2,
            title: "Instalação do Linux",
            duration: 18,
            videoUrl: "https://www.youtube.com/embed/aXqjXbMxHwY",
            description: "Passo a passo para instalar Linux no seu computador",
          },
          {
            id: 3,
            title: "Interface Gráfica vs Terminal",
            duration: 15,
            videoUrl: "https://www.youtube.com/embed/lFHwUJsDx8s",
            description: "Entenda as diferenças entre GUI e CLI",
          },
        ],
      },
      {
        id: 2,
        title: "Módulo 2: Comandos Básicos",
        lessons: [
          {
            id: 4,
            title: "Navegação no Sistema de Ficheiros",
            duration: 20,
            videoUrl: "https://www.youtube.com/embed/ZzLf0Kh1R40",
            description: "Aprenda a navegar entre pastas usando o terminal",
          },
          {
            id: 5,
            title: "Gestão de Ficheiros",
            duration: 22,
            videoUrl: "https://www.youtube.com/embed/mccz0p1g26w",
            description: "Criar, copiar, mover e deletar ficheiros",
          },
          {
            id: 6,
            title: "Permissões de Ficheiros",
            duration: 25,
            videoUrl: "https://www.youtube.com/embed/00JvSYUqNmA",
            description: "Entender e alterar permissões de segurança",
          },
        ],
      },
    ],
    requirements: ["Computador com pelo menos 2GB de RAM", "Conexão à internet estável", "Disposição para aprender"],
    learnings: [
      "Dominar navegação no terminal Linux",
      "Gerenciar ficheiros e diretórios",
      "Entender permissões de segurança",
      "Trabalhar com variáveis de ambiente",
      "Automatizar tarefas com scripts bash",
    ],
  },
  2: {
    id: 2,
    title: "Agricultura Digital",
    description: "Modernize sua produção agrícola com tecnologia e monitoramento inteligente",
    category: "AgroTech",
    level: "Intermediário",
    duration: "6 semanas",
    students: 856,
    rating: 4.9,
    price: 25000,
    image: "/agriculture-tech.jpg",
    instructor: "Maria Santos",
    lessons: 32,
    modules: [
      {
        id: 1,
        title: "Módulo 1: Sensores Agrícolas",
        lessons: [
          {
            id: 1,
            title: "Tipos de Sensores",
            duration: 15,
            videoUrl: "https://www.youtube.com/embed/5qcp2lLl1UY",
            description: "Conheça os diferentes tipos de sensores para agricultura",
          },
          {
            id: 2,
            title: "Instalação e Configuração",
            duration: 20,
            videoUrl: "https://www.youtube.com/embed/NG0n5AUJNTs",
            description: "Como instalar sensores no seu terreno",
          },
        ],
      },
    ],
    requirements: ["Conhecimento básico de agricultura", "Acesso a internet", "Disponibilidade de 3h por semana"],
    learnings: [
      "Usar sensores para monitoramento de plantações",
      "Analisar dados de humidade e temperatura",
      "Otimizar consumo de água",
      "Aumentar produtividade",
    ],
  },
}

export default function CourseDetailPage() {
  const params = useParams()
  const router = useRouter()
  const courseId = Number.parseInt(params.courseId as string)
  const { user } = useAuth()

const course = COURSES_DATA[courseId as keyof typeof COURSES_DATA]
  const [currentLessonId, setCurrentLessonId] = useState(course?.modules[0]?.lessons[0]?.id)
  const [completedLessons, setCompletedLessons] = useState<number[]>([])
  const [enrolled, setEnrolled] = useState(true)

if (!course) {
    return (
      <ProtectedLayout>
        <div className="text-center py-12">
          <p className="text-muted-foreground">Curso não encontrado</p>
          <Button onClick={() => router.back()} className="mt-4">
            Voltar
          </Button>
        </div>
      </ProtectedLayout>
    )
  }

const currentLesson = course.modules.flatMap((m) => m.lessons).find((l) => l.id === currentLessonId)

const totalLessons = course.modules.reduce((acc, m) => acc + m.lessons.length, 0)
  const progress = (completedLessons.length / totalLessons) * 100

const toggleLessonComplete = (lessonId: number) => {
    setCompletedLessons((prev) =>
      prev.includes(lessonId) ? prev.filter((id) => id !== lessonId) : [...prev, lessonId],
    )
  }

return (
    <ProtectedLayout>
      <div className="space-y-6">
        {/* Header com Voltar */}
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="sm" onClick={() => router.back()} className="gap-2">
            <ArrowLeft className="h-4 w-4" />
            Voltar
          </Button>
        </div>

{/* Informações do Curso */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Conteúdo Principal */}
          <div className="lg:col-span-2 space-y-6">
            {/* Player de Vídeo */}
            {currentLesson && (
              <Card className="overflow-hidden">
                <div className="aspect-video bg-black">
                  <iframe
                    width="100%"
                    height="100%"
                    src={currentLesson.videoUrl}
                    title={currentLesson.title}
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  />
                </div>
                <CardContent className="pt-4">
                  <h2 className="text-2xl font-bold text-foreground">{currentLesson.title}</h2>
                  <p className="text-muted-foreground mt-2">{currentLesson.description}</p>
                  <div className="flex items-center gap-2 mt-4">
                    <Badge variant="outline">{currentLesson.duration} minutos</Badge>
                    <Button
                      size="sm"
                      variant={completedLessons.includes(currentLesson.id) ? "default" : "outline"}
                      onClick={() => toggleLessonComplete(currentLesson.id)}
                      className="gap-2"
                    >
                      <CheckCircle className="h-4 w-4" />
                      {completedLessons.includes(currentLesson.id) ? "Concluído" : "Marcar como Concluído"}
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )}

{/* Abas de Conteúdo */}
            <Card>
              <CardHeader>
                <CardTitle>Conteúdo do Curso</CardTitle>
              </CardHeader>
              <CardContent>
                <Tabs defaultValue={`module-${course.modules[0].id}`} className="w-full">
                  <TabsList className="grid w-full grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                    {course.modules.map((module) => (
                      <TabsTrigger key={module.id} value={`module-${module.id}`} className="text-xs">
                        M{module.id}
                      </TabsTrigger>
                    ))}
                  </TabsList>

{course.modules.map((module) => (
                    <TabsContent key={module.id} value={`module-${module.id}`} className="space-y-3">
                      <h3 className="font-semibold mt-4">{module.title}</h3>
                      {module.lessons.map((lesson) => (
                        <button
                          key={lesson.id}
                          onClick={() => setCurrentLessonId(lesson.id)}
                          className={`w-full text-left p-3 rounded-lg border transition-colors ${
                            currentLessonId === lesson.id
                              ? "bg-primary text-primary-foreground border-primary"
                              : completedLessons.includes(lesson.id)
                                ? "bg-green-500/10 border-green-500/50"
                                : "hover:bg-muted border-border"
                          }`}
                        >
                          <div className="flex items-start gap-3">
                            <div className="mt-1">
                              {completedLessons.includes(lesson.id) ? (
                                <CheckCircle className="h-4 w-4 text-green-500" />
                              ) : (
                                <Play className="h-4 w-4" />
                              )}
                            </div>
                            <div className="flex-1">
                              <p className="font-medium text-sm">{lesson.title}</p>
                              <p className="text-xs text-muted-foreground">{lesson.duration} minutos</p>
                            </div>
                          </div>
                        </button>
                      ))}
                    </TabsContent>
                  ))}
                </Tabs>
              </CardContent>
            </Card>
          </div>

{/* Barra Lateral */}
          <div className="space-y-4">
            {/* Card do Curso */}
            <Card>
              <div className="aspect-video overflow-hidden bg-muted rounded-t-lg">
                <img
                  src={course.image || "/placeholder.svg"}
                  alt={course.title}
                  className="w-full h-full object-cover"
                />
              </div>
              <CardContent className="pt-4 space-y-4">
                <div>
                  <h3 className="font-bold text-lg">{course.title}</h3>
                  <p className="text-sm text-muted-foreground">Por {course.instructor}</p>
                </div>

<div className="flex items-center gap-2 text-sm">
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <span className="font-semibold">{course.rating}</span>
                  <span className="text-muted-foreground">({course.students.toLocaleString("pt-PT")} alunos)</span>
                </div>

{/* Progresso */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">Seu Progresso</span>
                    <span className="font-semibold">{Math.round(progress)}%</span>
                  </div>
                  <Progress value={progress} className="h-2" />
                  <p className="text-xs text-muted-foreground">
                    {completedLessons.length} de {totalLessons} aulas concluídas
                  </p>
                </div>

{enrolled && (
                  <Button className="w-full">
                    <Download className="h-4 w-4 mr-2" />
                    Certificado
                  </Button>
                )}
              </CardContent>
            </Card>

{/* Requisitos */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Requisitos</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {course.requirements.map((req, idx) => (
                    <li key={idx} className="text-sm text-muted-foreground flex gap-2">
                      <span className="text-primary font-bold">•</span>
                      {req}
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>

{/* O que Aprenderá */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">O que Aprenderá</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {course.learnings.map((learning, idx) => (
                    <li key={idx} className="text-sm text-muted-foreground flex gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" />
                      {learning}
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>

<ReviewSection itemId={courseId} itemType="course" itemName={course?.title || ""} />
          </div>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/wishlist-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

interface WishlistItem {
  id: number
  name: string
  price: number
  image: string
  category: string
}

interface WishlistContextType {
  wishlist: WishlistItem[]
  addToWishlist: (item: WishlistItem) => void
  removeFromWishlist: (id: number) => void
  isInWishlist: (id: number) => boolean
  clearWishlist: () => void
}

const WishlistContext = createContext<WishlistContextType | undefined>(undefined)

export function WishlistProvider({ children }: { children: React.ReactNode }) {
  const [wishlist, setWishlist] = useState<WishlistItem[]>([])

useEffect(() => {
    const storedWishlist = localStorage.getItem("killmay_wishlist")
    if (storedWishlist) {
      try {
        setWishlist(JSON.parse(storedWishlist))
      } catch (error) {
        console.error("[v0] Erro ao carregar wishlist:", error)
      }
    }
  }, [])

useEffect(() => {
    localStorage.setItem("killmay_wishlist", JSON.stringify(wishlist))
  }, [wishlist])

const addToWishlist = (item: WishlistItem) => {
    setWishlist((prev) => {
      const exists = prev.find((w) => w.id === item.id)
      if (exists) return prev
      return [...prev, item]
    })
  }

const removeFromWishlist = (id: number) => {
    setWishlist((prev) => prev.filter((item) => item.id !== id))
  }

const isInWishlist = (id: number) => {
    return wishlist.some((item) => item.id === id)
  }

const clearWishlist = () => {
    setWishlist([])
  }

return (
    <WishlistContext.Provider
      value={{
        wishlist,
        addToWishlist,
        removeFromWishlist,
        isInWishlist,
        clearWishlist,
      }}
    >
      {children}
    </WishlistContext.Provider>
  )
}

export function useWishlist() {
  const context = useContext(WishlistContext)
  if (context === undefined) {
    throw new Error("useWishlist deve ser usado dentro de WishlistProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/(protected)/wishlist/page.tsx" isMerged="true"
"use client"

import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useWishlist } from "@/app/wishlist-context"
import { Heart, ShoppingCart, Trash2 } from "lucide-react"
import Link from "next/link"
import { useState } from "react"

export default function WishlistPage() {
  const { wishlist, removeFromWishlist, clearWishlist } = useWishlist()
  const [addedToCart, setAddedToCart] = useState<number[]>([])

const handleAddToCart = (productId: number) => {
    const cart = JSON.parse(localStorage.getItem("cart") || "[]")
    const product = wishlist.find((p) => p.id === productId)

if (product) {
      const existingItem = cart.find((item: any) => item.id === productId)
      if (existingItem) {
        existingItem.quantity += 1
      } else {
        cart.push({
          id: productId,
          name: product.name,
          price: product.price,
          image: product.image,
          quantity: 1,
        })
      }
      localStorage.setItem("cart", JSON.stringify(cart))
      setAddedToCart([...addedToCart, productId])
      setTimeout(() => {
        setAddedToCart((prev) => prev.filter((id) => id !== productId))
      }, 2000)
    }
  }

const totalValue = wishlist.reduce((sum, item) => sum + item.price, 0)

return (
    <ProtectedLayout>
      <div className="min-h-screen bg-gradient-to-br from-background to-secondary/20 pt-20 pb-12">
        <div className="container max-w-6xl mx-auto px-4">
          <div className="mb-8">
            <h1 className="text-4xl font-bold text-foreground mb-2 flex items-center gap-3">
              <Heart className="w-10 h-10 text-emerald-500" />
              Meus Favoritos
            </h1>
            <p className="text-foreground/60">
              {wishlist.length} produto{wishlist.length !== 1 ? "s" : ""} salvos
            </p>
          </div>

{wishlist.length === 0 ? (
            <Card className="border-border/50">
              <CardContent className="pt-12 pb-12 text-center">
                <Heart className="w-16 h-16 text-muted-foreground/30 mx-auto mb-4" />
                <h2 className="text-2xl font-semibold text-foreground mb-2">Nenhum favorito ainda</h2>
                <p className="text-foreground/60 mb-6">Comece a adicionar produtos aos seus favoritos</p>
                <Link href="/marketplace">
                  <Button className="bg-emerald-600 hover:bg-emerald-700 text-white">
                    Ir para Marketplace
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ) : (
            <>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                {wishlist.map((product) => (
                  <Card key={product.id} className="border-border/50 hover:shadow-lg transition-shadow">
                    <CardContent className="p-4">
                      <div className="aspect-video bg-secondary rounded-lg mb-4 overflow-hidden">
                        <img
                          src={product.image}
                          alt={product.name}
                          className="w-full h-full object-cover hover:scale-105 transition-transform"
                        />
                      </div>
                      <div className="space-y-3">
                        <div>
                          <p className="text-sm text-emerald-600 font-medium">{product.category}</p>
                          <h3 className="text-lg font-semibold text-foreground line-clamp-2">{product.name}</h3>
                        </div>
                        <p className="text-2xl font-bold text-emerald-600">
                          {(product.price / 1000).toFixed(0)}K AOA
                        </p>
                        <div className="flex gap-2">
                          <Button
                            onClick={() => handleAddToCart(product.id)}
                            className={`flex-1 gap-2 ${
                              addedToCart.includes(product.id)
                                ? "bg-emerald-600 hover:bg-emerald-700"
                                : "bg-primary hover:bg-primary/90"
                            }`}
                          >
                            <ShoppingCart className="w-4 h-4" />
                            {addedToCart.includes(product.id) ? "Adicionado" : "Carrinho"}
                          </Button>
                          <Button
                            onClick={() => removeFromWishlist(product.id)}
                            variant="outline"
                            className="w-10 h-10 p-0"
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="lg:col-span-2">
                  <Card className="border-border/50">
                    <CardHeader>
                      <CardTitle>Resumo da Wishlist</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="flex justify-between text-foreground/60">
                        <span>Total de produtos:</span>
                        <span className="font-semibold">{wishlist.length}</span>
                      </div>
                      <div className="flex justify-between text-lg font-semibold text-foreground">
                        <span>Valor total:</span>
                        <span className="text-emerald-600">{(totalValue / 1000).toFixed(0)}K AOA</span>
                      </div>
                    </CardContent>
                  </Card>
                </div>

<div className="lg:col-span-1">
                  <Card className="border-border/50">
                    <CardHeader>
                      <CardTitle>Ações</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      <Button
                        onClick={clearWishlist}
                        variant="outline"
                        className="w-full text-destructive hover:text-destructive"
                      >
                        Limpar Wishlist
                      </Button>
                      <Link href="/marketplace" className="block">
                        <Button className="w-full bg-emerald-600 hover:bg-emerald-700 text-white">
                          Continuar Comprando
                        </Button>
                      </Link>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/orders-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

export interface OrderStatus {
  status: "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled"
  timestamp: Date
  description: string
}

export interface Order {
  id: string
  orderNumber: string
  date: Date
  total: number
  paymentMethod: string
  freight: string
  items: any[]
  status: "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled"
  timeline: OrderStatus[]
  estimatedDelivery: Date
  trackingNumber: string
  address: string
}

interface OrdersContextType {
  orders: Order[]
  addOrder: (order: Order) => void
  updateOrderStatus: (orderId: string, status: OrderStatus) => void
  getOrderById: (orderId: string) => Order | undefined
}

const OrdersContext = createContext<OrdersContextType | undefined>(undefined)

export function OrdersProvider({ children }: { children: React.ReactNode }) {
  const [orders, setOrders] = useState<Order[]>([])

useEffect(() => {
    const storedOrders = localStorage.getItem("killmay_orders")
    if (storedOrders) {
      try {
        const parsed = JSON.parse(storedOrders)
        setOrders(parsed.map((order: any) => ({
          ...order,
          date: new Date(order.date),
          estimatedDelivery: new Date(order.estimatedDelivery),
          timeline: order.timeline.map((t: any) => ({
            ...t,
            timestamp: new Date(t.timestamp),
          })),
        })))
      } catch (error) {
        console.error("[v0] Erro ao carregar pedidos:", error)
      }
    }
  }, [])

useEffect(() => {
    localStorage.setItem("killmay_orders", JSON.stringify(orders))
  }, [orders])

const addOrder = (order: Order) => {
    setOrders((prev) => [...prev, order])
  }

const updateOrderStatus = (orderId: string, status: OrderStatus) => {
    setOrders((prev) =>
      prev.map((order) => {
        if (order.id === orderId) {
          return {
            ...order,
            status: status.status,
            timeline: [...order.timeline, status],
          }
        }
        return order
      })
    )
  }

const getOrderById = (orderId: string) => {
    return orders.find((order) => order.id === orderId)
  }

return (
    <OrdersContext.Provider value={{ orders, addOrder, updateOrderStatus, getOrderById }}>
      {children}
    </OrdersContext.Provider>
  )
}

export function useOrders() {
  const context = useContext(OrdersContext)
  if (context === undefined) {
    throw new Error("useOrders deve ser usado dentro de OrdersProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/theme-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

type Theme = "light" | "dark" | "system"

interface ThemeContextType {
  theme: Theme
  setTheme: (theme: Theme) => void
  isDark: boolean
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setThemeState] = useState<Theme>("system")
  const [isDark, setIsDark] = useState(false)
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)

const savedTheme = localStorage.getItem("killmay_theme") as Theme | null
    if (savedTheme) {
      setThemeState(savedTheme)
    }

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    const effectiveTheme = savedTheme === "system" || !savedTheme ? (prefersDark ? "dark" : "light") : savedTheme
    updateTheme(effectiveTheme)
  }, [])

const updateTheme = (newTheme: "light" | "dark") => {
    const html = document.documentElement
    if (newTheme === "dark") {
      html.classList.add("dark")
      setIsDark(true)
    } else {
      html.classList.remove("dark")
      setIsDark(false)
    }
  }

const setTheme = (newTheme: Theme) => {
    setThemeState(newTheme)
    localStorage.setItem("killmay_theme", newTheme)

if (newTheme === "system") {
      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
      updateTheme(prefersDark ? "dark" : "light")
    } else {
      updateTheme(newTheme)
    }
  }

if (!mounted) {
    return <>{children}</>
  }

return (
    <ThemeContext.Provider value={{ theme, setTheme, isDark }}>
      {children}
    </ThemeContext.Provider>
  )
}

export function useTheme() {
  const context = useContext(ThemeContext)
  if (context === undefined) {
    throw new Error("useTheme deve ser usado dentro de ThemeProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isMerged="true"
"use client"

import { useTheme } from "@/app/theme-context"
import { Button } from "@/components/ui/button"
import { Moon, Sun, Monitor } from "lucide-react"
import { useState } from "react"

export function ThemeSwitcher() {
  const { theme, setTheme, isDark } = useTheme()
  const [isOpen, setIsOpen] = useState(false)

return (
    <div className="relative">
      <Button
        size="sm"
        variant="outline"
        onClick={() => setIsOpen(!isOpen)}
        className="w-9 h-9 p-0"
        title="Alterar tema"
      >
        {isDark ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
      </Button>

{isOpen && (
        <div className="absolute right-0 mt-2 w-48 bg-background border border-border rounded-lg shadow-lg z-50">
          <div className="p-2 space-y-1">
            <button
              onClick={() => {
                setTheme("light")
                setIsOpen(false)
              }}
              className={`w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm ${
                theme === "light" ? "bg-primary text-primary-foreground" : "hover:bg-secondary"
              }`}
            >
              <Sun className="h-4 w-4" />
              <span>Claro</span>
              {theme === "light" && <span className="ml-auto">✓</span>}
            </button>
            <button
              onClick={() => {
                setTheme("dark")
                setIsOpen(false)
              }}
              className={`w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm ${
                theme === "dark" ? "bg-primary text-primary-foreground" : "hover:bg-secondary"
              }`}
            >
              <Moon className="h-4 w-4" />
              <span>Escuro</span>
              {theme === "dark" && <span className="ml-auto">✓</span>}
            </button>
            <button
              onClick={() => {
                setTheme("system")
                setIsOpen(false)
              }}
              className={`w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm ${
                theme === "system" ? "bg-primary text-primary-foreground" : "hover:bg-secondary"
              }`}
            >
              <Monitor className="h-4 w-4" />
              <span>Sistema</span>
              {theme === "system" && <span className="ml-auto">✓</span>}
            </button>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/certificates-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

export interface Certificate {
  id: string
  courseId: number
  courseName: string
  studentName: string
  completionDate: Date
  certificateNumber: string
  progress: number
}

interface CertificatesContextType {
  certificates: Certificate[]
  addCertificate: (certificate: Certificate) => void
  getCertificateById: (id: string) => Certificate | undefined
  generatePDF: (certificate: Certificate) => void
}

const CertificatesContext = createContext<CertificatesContextType | undefined>(undefined)

export function CertificatesProvider({ children }: { children: React.ReactNode }) {
  const [certificates, setCertificates] = useState<Certificate[]>([])

useEffect(() => {
    const stored = localStorage.getItem("killmay_certificates")
    if (stored) {
      try {
        const parsed = JSON.parse(stored)
        setCertificates(
          parsed.map((cert: any) => ({
            ...cert,
            completionDate: new Date(cert.completionDate),
          }))
        )
      } catch (error) {
        console.error("[v0] Erro ao carregar certificados:", error)
      }
    }
  }, [])

useEffect(() => {
    localStorage.setItem("killmay_certificates", JSON.stringify(certificates))
  }, [certificates])

const addCertificate = (certificate: Certificate) => {
    setCertificates((prev) => {
      const exists = prev.find((c) => c.courseId === certificate.courseId)
      if (exists) return prev
      return [...prev, certificate]
    })
  }

const getCertificateById = (id: string) => {
    return certificates.find((cert) => cert.id === id)
  }

const generatePDF = (certificate: Certificate) => {
    const svgContent = `
      <svg width="1200" height="850" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="diagonal" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="20" y2="20" stroke="#e0e7ff" stroke-width="1"/>
          </pattern>
        </defs>
        <rect width="1200" height="850" fill="white"/>
        <rect width="1200" height="850" fill="url(#diagonal)" opacity="0.3"/>
        <rect x="30" y="30" width="1140" height="790" fill="none" stroke="#10b981" stroke-width="4" rx="10"/>
        <rect x="50" y="50" width="1100" height="750" fill="none" stroke="#059669" stroke-width="2" rx="8"/>
        
        
        <text x="600" y="120" font-size="48" font-weight="bold" text-anchor="middle" fill="#059669">
          CERTIFICADO DE CONCLUSÃO
        </text>
        
        
        <line x1="150" y1="160" x2="1050" y2="160" stroke="#10b981" stroke-width="2"/>
        
        
        <text x="600" y="280" font-size="32" text-anchor="middle" fill="#1f2937" font-weight="500">
          ${certificate.courseName}
        </text>
        
        
        <text x="600" y="380" font-size="20" text-anchor="middle" fill="#6b7280">
          Certificamos que
        </text>
        <text x="600" y="440" font-size="36" text-anchor="middle" fill="#059669" font-weight="bold">
          ${certificate.studentName}
        </text>
        <text x="600" y="500" font-size="20" text-anchor="middle" fill="#6b7280">
          completou com sucesso este curso
        </text>
        
        
        <text x="600" y="580" font-size="18" text-anchor="middle" fill="#6b7280">
          Concluído em ${new Date(certificate.completionDate).toLocaleDateString("pt-PT", {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </text>
        
        
        <text x="150" y="720" font-size="14" fill="#9ca3af">
          Nº Certificado: ${certificate.certificateNumber}
        </text>
        
        
        <text x="1050" y="720" font-size="14" fill="#9ca3af" text-anchor="end">
          KILLMAY - Ecossistema Digital
        </text>
      </svg>
    `

const canvas = document.createElement("canvas")
    canvas.width = 1200
    canvas.height = 850

const img = new Image()
    img.onload = () => {
      const ctx = canvas.getContext("2d")
      if (ctx) {
        ctx.drawImage(img, 0, 0)

const link = document.createElement("a")
        link.href = canvas.toDataURL("image/png")
        link.download = `certificado-${certificate.courseName.replace(/\s+/g, "-").toLowerCase()}.png`
        link.click()
      }
    }

img.src = `data:image/svg+xml;base64,${btoa(svgContent)}`
  }

return (
    <CertificatesContext.Provider value={{ certificates, addCertificate, getCertificateById, generatePDF }}>
      {children}
    </CertificatesContext.Provider>
  )
}

export function useCertificates() {
  const context = useContext(CertificatesContext)
  if (context === undefined) {
    throw new Error("useCertificates deve ser usado dentro de CertificatesProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/(protected)/academy/certificates/page.tsx" isMerged="true"
"use client"

import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useCertificates } from "@/app/certificates-context"
import { Award, Download, Calendar } from "lucide-react"
import Link from "next/link"

export default function CertificatesPage() {
  const { certificates, generatePDF } = useCertificates()

return (
    <ProtectedLayout>
      <div className="min-h-screen bg-gradient-to-br from-background to-secondary/20 pt-20 pb-12">
        <div className="container max-w-6xl mx-auto px-4">
          <div className="mb-8">
            <h1 className="text-4xl font-bold text-foreground mb-2 flex items-center gap-3">
              <Award className="w-10 h-10 text-emerald-600" />
              Meus Certificados
            </h1>
            <p className="text-foreground/60">
              {certificates.length} certificado{certificates.length !== 1 ? "s" : ""} conquistado{certificates.length !== 1 ? "s" : ""}
            </p>
          </div>

{certificates.length === 0 ? (
            <Card className="border-border/50">
              <CardContent className="pt-12 pb-12 text-center">
                <Award className="w-16 h-16 text-muted-foreground/30 mx-auto mb-4" />
                <h2 className="text-2xl font-semibold text-foreground mb-2">Nenhum certificado ainda</h2>
                <p className="text-foreground/60 mb-6">Complete cursos na Academia para ganhar certificados</p>
                <Link href="/academy">
                  <Button className="bg-emerald-600 hover:bg-emerald-700 text-white">Ir para Academia</Button>
                </Link>
              </CardContent>
            </Card>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {certificates.map((cert) => (
                <Card key={cert.id} className="border-border/50 hover:shadow-lg transition-shadow overflow-hidden group">
                  <div className="h-32 bg-gradient-to-br from-emerald-500 to-emerald-600 relative overflow-hidden">
                    <div className="absolute inset-0 opacity-10 pattern-diagonal" />
                    <div className="absolute inset-0 flex items-center justify-center">
                      <Award className="w-12 h-12 text-white" />
                    </div>
                  </div>

<CardContent className="pt-6 space-y-4">
                    <div>
                      <p className="text-xs text-foreground/60 uppercase tracking-wide mb-1">Curso</p>
                      <h3 className="text-lg font-semibold text-foreground">{cert.courseName}</h3>
                    </div>

<div className="space-y-2">
                      <div className="flex items-center gap-2 text-sm text-foreground/60">
                        <Calendar className="w-4 h-4" />
                        <span>{new Date(cert.completionDate).toLocaleDateString("pt-PT")}</span>
                      </div>
                      <div className="text-xs font-mono text-emerald-600">Nº {cert.certificateNumber}</div>
                    </div>

<div className="pt-2 border-t border-border">
                      <div className="mb-3">
                        <div className="flex justify-between items-center mb-1">
                          <span className="text-xs font-medium text-foreground">Progresso</span>
                          <span className="text-xs font-semibold text-emerald-600">{cert.progress}%</span>
                        </div>
                        <div className="w-full bg-secondary rounded-full h-1.5">
                          <div
                            className="bg-gradient-to-r from-emerald-500 to-emerald-600 h-1.5 rounded-full"
                            style={{ width: `${cert.progress}%` }}
                          />
                        </div>
                      </div>

<Button
                        onClick={() => generatePDF(cert)}
                        className="w-full bg-emerald-600 hover:bg-emerald-700 text-white gap-2"
                      >
                        <Download className="w-4 h-4" />
                        Descarregar
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/admin/analytics/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"
import { TrendingUp, Users, ShoppingCart, Award, DollarSign, FileText } from "lucide-react"
import { useOrders } from "@/app/orders-context"
import { useCertificates } from "@/app/certificates-context"

export default function AnalyticsPage() {
  const { user, loading } = useAuth()
  const router = useRouter()
  const { orders } = useOrders()
  const { certificates } = useCertificates()

useEffect(() => {
    if (!loading && (!user || user.role !== "admin")) {
      router.push("/dashboard")
    }
  }, [user, loading, router])

if (loading || !user || user.role !== "admin") {
    return null
  }

// Mock data for analytics
  const salesData = [
    { month: "Jan", sales: 45000, orders: 12 },
    { month: "Fev", sales: 52000, orders: 15 },
    { month: "Mar", sales: 48000, orders: 14 },
    { month: "Abr", sales: 61000, orders: 18 },
    { month: "Mai", sales: 55000, orders: 16 },
    { month: "Jun", sales: 67000, orders: 20 },
  ]

const categoryData = [
    { name: "Smartphones", value: 35, fill: "#10b981" },
    { name: "Computadores", value: 25, fill: "#3b82f6" },
    { name: "Equipamentos", value: 20, fill: "#f59e0b" },
    { name: "Acessórios", value: 20, fill: "#8b5cf6" },
  ]

const courseEnrollments = [
    { course: "Linux", students: 124 },
    { course: "Agri Digital", students: 98 },
    { course: "Segurança", students: 67 },
    { course: "Piscicultura", students: 54 },
    { course: "Python", students: 145 },
  ]

// Calculate metrics
  const totalRevenue = orders.reduce((sum, order) => sum + order.total, 0)
  const totalOrders = orders.length
  const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0
  const certificatesIssued = certificates.length

return (
    <ProtectedLayout>
      <div className="min-h-screen bg-gradient-to-br from-background to-secondary/20 pt-20 pb-12">
        <div className="container max-w-7xl mx-auto px-4">
          <div className="mb-8">
            <h1 className="text-4xl font-bold text-foreground mb-2">Dashboard Analytics</h1>
            <p className="text-foreground/60">Acompanhe o desempenho do KILLMAY em tempo real</p>
          </div>

{/* KPI Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <Card className="border-border/50">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Receita Total</CardTitle>
                <DollarSign className="h-4 w-4 text-emerald-600" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{(totalRevenue / 1000000).toFixed(1)}M AOA</div>
                <p className="text-xs text-foreground/60 mt-1">+12.5% vs mês anterior</p>
              </CardContent>
            </Card>

<Card className="border-border/50">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Pedidos</CardTitle>
                <ShoppingCart className="h-4 w-4 text-blue-600" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{totalOrders}</div>
                <p className="text-xs text-foreground/60 mt-1">Pedidos processados</p>
              </CardContent>
            </Card>

<Card className="border-border/50">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Valor Médio</CardTitle>
                <TrendingUp className="h-4 w-4 text-purple-600" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{(averageOrderValue / 1000).toFixed(0)}K AOA</div>
                <p className="text-xs text-foreground/60 mt-1">Por pedido</p>
              </CardContent>
            </Card>

<Card className="border-border/50">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Certificados</CardTitle>
                <Award className="h-4 w-4 text-orange-600" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{certificatesIssued}</div>
                <p className="text-xs text-foreground/60 mt-1">Emitidos</p>
              </CardContent>
            </Card>
          </div>

{/* Charts */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            {/* Sales Chart */}
            <Card className="border-border/50">
              <CardHeader>
                <CardTitle>Vendas Mensais</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={salesData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                    <XAxis dataKey="month" stroke="#666" />
                    <YAxis stroke="#666" />
                    <Tooltip
                      contentStyle={{ backgroundColor: "#1f2937", border: "1px solid #374151", borderRadius: "8px" }}
                      formatter={(value) => `${(value / 1000).toFixed(0)}K AOA`}
                    />
                    <Legend />
                    <Bar dataKey="sales" fill="#10b981" name="Vendas (AOA)" />
                    <Bar dataKey="orders" fill="#3b82f6" name="Pedidos" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

{/* Category Distribution */}
            <Card className="border-border/50">
              <CardHeader>
                <CardTitle>Distribuição por Categoria</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <PieChart>
                    <Pie
                      data={categoryData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, value }) => `${name} ${value}%`}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {categoryData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.fill} />
                      ))}
                    </Pie>
                    <Tooltip formatter={(value) => `${value}%`} />
                  </PieChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </div>

{/* Course Enrollments */}
          <Card className="border-border/50 mb-8">
            <CardHeader>
              <CardTitle>Inscrições por Curso</CardTitle>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={300}>
                <LineChart data={courseEnrollments}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                  <XAxis dataKey="course" stroke="#666" />
                  <YAxis stroke="#666" />
                  <Tooltip
                    contentStyle={{ backgroundColor: "#1f2937", border: "1px solid #374151", borderRadius: "8px" }}
                    formatter={(value) => `${value} alunos`}
                  />
                  <Legend />
                  <Line type="monotone" dataKey="students" stroke="#10b981" name="Alunos Inscritos" strokeWidth={2} dot={{ fill: "#10b981" }} />
                </LineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>

{/* Recent Orders */}
          <Card className="border-border/50">
            <CardHeader>
              <CardTitle>Pedidos Recentes</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {orders.slice(-5).reverse().map((order) => (
                  <div key={order.id} className="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
                    <div className="space-y-1">
                      <p className="font-semibold text-foreground">{order.orderNumber}</p>
                      <p className="text-sm text-foreground/60">{new Date(order.date).toLocaleDateString("pt-PT")}</p>
                    </div>
                    <div className="text-right space-y-1">
                      <p className="font-semibold text-emerald-600">{(order.total / 1000).toFixed(0)}K AOA</p>
                      <p className="text-sm text-foreground/60 capitalize">{order.status}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/coupons-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

export interface Coupon {
  id: string
  code: string
  discountType: "percentage" | "fixed"
  discountValue: number
  maxUses: number
  currentUses: number
  expiryDate: Date
  minPurchaseAmount: number
  isActive: boolean
  description: string
}

interface CouponsContextType {
  coupons: Coupon[]
  appliedCoupon: Coupon | null
  applyCoupon: (code: string) => { success: boolean; message: string; discount?: number }
  removeCoupon: () => void
  calculateDiscount: (subtotal: number) => number
  addCoupon: (coupon: Coupon) => void
}

const CouponsContext = createContext<CouponsContextType | undefined>(undefined)

const DEMO_COUPONS: Coupon[] = [
  {
    id: "1",
    code: "KILLMAY20",
    discountType: "percentage",
    discountValue: 20,
    maxUses: 100,
    currentUses: 45,
    expiryDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
    minPurchaseAmount: 5000,
    isActive: true,
    description: "20% de desconto em todas as compras",
  },
  {
    id: "2",
    code: "FRETE10",
    discountType: "fixed",
    discountValue: 2500,
    maxUses: 50,
    currentUses: 30,
    expiryDate: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000),
    minPurchaseAmount: 10000,
    isActive: true,
    description: "10k Kz de desconto no frete",
  },
  {
    id: "3",
    code: "NOVO2024",
    discountType: "percentage",
    discountValue: 15,
    maxUses: 200,
    currentUses: 120,
    expiryDate: new Date(Date.now() + 60 * 24 * 60 * 60 * 1000),
    minPurchaseAmount: 0,
    isActive: true,
    description: "15% para novos utilizadores",
  },
]

export function CouponsProvider({ children }: { children: React.ReactNode }) {
  const [coupons, setCoupons] = useState<Coupon[]>(DEMO_COUPONS)
  const [appliedCoupon, setAppliedCoupon] = useState<Coupon | null>(null)

useEffect(() => {
    const storedCoupon = localStorage.getItem("killmay_applied_coupon")
    if (storedCoupon) {
      try {
        const coupon = JSON.parse(storedCoupon)
        setAppliedCoupon(coupon)
      } catch (error) {
        console.error("[v0] Erro ao carregar cupão:", error)
      }
    }
  }, [])

const applyCoupon = (code: string): { success: boolean; message: string; discount?: number } => {
    const coupon = coupons.find((c) => c.code.toUpperCase() === code.toUpperCase())

if (!coupon) {
      return { success: false, message: "Cupão não encontrado" }
    }

if (!coupon.isActive) {
      return { success: false, message: "Cupão inativo" }
    }

if (coupon.currentUses >= coupon.maxUses) {
      return { success: false, message: "Cupão expirou (limite de usos atingido)" }
    }

if (new Date() > coupon.expiryDate) {
      return { success: false, message: "Cupão expirou (data de validade)" }
    }

setAppliedCoupon(coupon)
    localStorage.setItem("killmay_applied_coupon", JSON.stringify(coupon))

return { success: true, message: `Cupão "${code}" aplicado com sucesso!`, discount: coupon.discountValue }
  }

const removeCoupon = () => {
    setAppliedCoupon(null)
    localStorage.removeItem("killmay_applied_coupon")
  }

const calculateDiscount = (subtotal: number): number => {
    if (!appliedCoupon) return 0

if (subtotal < appliedCoupon.minPurchaseAmount) {
      removeCoupon()
      return 0
    }

if (appliedCoupon.discountType === "percentage") {
      return Math.round((subtotal * appliedCoupon.discountValue) / 100)
    } else {
      return Math.min(appliedCoupon.discountValue, subtotal)
    }
  }

const addCoupon = (coupon: Coupon) => {
    setCoupons((prev) => [...prev, coupon])
  }

return (
    <CouponsContext.Provider
      value={{
        coupons,
        appliedCoupon,
        applyCoupon,
        removeCoupon,
        calculateDiscount,
        addCoupon,
      }}
    >
      {children}
    </CouponsContext.Provider>
  )
}

export function useCoupons() {
  const context = useContext(CouponsContext)
  if (context === undefined) {
    throw new Error("useCoupons deve ser usado dentro de CouponsProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/checkout/coupon-input.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useCoupons } from "@/app/coupons-context"
import { X, Check } from "lucide-react"

export function CouponInput() {
  const { appliedCoupon, applyCoupon, removeCoupon, coupons } = useCoupons()
  const [couponCode, setCouponCode] = useState("")
  const [message, setMessage] = useState("")
  const [isSuccess, setIsSuccess] = useState(false)

const handleApplyCoupon = () => {
    if (!couponCode.trim()) {
      setMessage("Digite o código do cupom")
      setIsSuccess(false)
      return
    }

const result = applyCoupon(couponCode)
    setMessage(result.message)
    setIsSuccess(result.success)

if (result.success) {
      setCouponCode("")
    }
  }

if (appliedCoupon) {
    return (
      <div className="bg-emerald-50 dark:bg-emerald-950 border border-emerald-200 dark:border-emerald-800 rounded-lg p-4 space-y-3">
        <div className="flex items-start justify-between">
          <div className="flex items-start gap-3">
            <Check className="w-5 h-5 text-emerald-600 dark:text-emerald-400 mt-0.5 flex-shrink-0" />
            <div>
              <p className="font-semibold text-emerald-900 dark:text-emerald-100">Cupom Aplicado</p>
              <p className="text-sm text-emerald-700 dark:text-emerald-300">{appliedCoupon.code}</p>
              <p className="text-sm text-emerald-600 dark:text-emerald-400 mt-1">{appliedCoupon.description}</p>
            </div>
          </div>
          <Button size="sm" variant="ghost" onClick={removeCoupon} className="h-6 w-6 p-0">
            <X className="w-4 h-4" />
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-3">
      <p className="text-sm font-medium text-foreground">Tem um cupom? Digite aqui</p>
      <div className="flex gap-2">
        <Input
          placeholder="Ex: KILLMAY20"
          value={couponCode}
          onChange={(e) => setCouponCode(e.target.value.toUpperCase())}
          onKeyPress={(e) => e.key === "Enter" && handleApplyCoupon()}
          className="flex-1"
        />
        <Button onClick={handleApplyCoupon} variant="outline">
          Aplicar
        </Button>
      </div>
      {message && (
        <p className={`text-sm ${isSuccess ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"}`}>
          {message}
        </p>
      )}
      <details className="text-sm text-muted-foreground cursor-pointer">
        <summary className="font-medium">Ver cupons disponíveis</summary>
        <div className="mt-2 space-y-2 text-xs">
          {coupons
            .filter((c) => c.isActive)
            .map((c) => (
              <div key={c.id} className="p-2 bg-background border border-border rounded">
                <p className="font-mono font-semibold text-foreground">{c.code}</p>
                <p className="text-muted-foreground">{c.description}</p>
              </div>
            ))}
        </div>
      </details>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/marketplace/checkout/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, CheckCircle2, Package, CreditCard } from "lucide-react"
import { useAuth } from "@/app/auth-context"
import { useNotifications } from "@/app/notifications-context"
import { useOrders } from "@/app/orders-context"
import { useCoupons } from "@/app/coupons-context"
import { usePayments } from "@/app/payments-context"
import { CouponInput } from "@/components/checkout/coupon-input"

export default function CheckoutPage() {
  const router = useRouter()
  const { user } = useAuth()
  const { addNotification } = useNotifications()
  const { addOrder } = useOrders()
  const { calculateDiscount } = useCoupons()
  const { addTransaction } = usePayments()
  const [step, setStep] = useState<"shipping" | "freight" | "payment" | "confirmation">("shipping")
  const [freight, setFreight] = useState<"standard" | "express" | "priority">("standard")
  const [paymentMethod, setPaymentMethod] = useState<"credit" | "debit" | "transfer" | "mobile">("credit")
  const [cartItems, setCartItems] = useState<any[]>([])
  const [formData, setFormData] = useState({
    fullName: user?.name || "",
    email: user?.email || "",
    phone: "",
    address: "",
    city: "",
    province: "",
    postalCode: "",
    cardName: "",
    cardNumber: "",
    cardExpiry: "",
    cardCVC: "",
    bankName: "",
    accountNumber: "",
    accountHolder: "",
    mobileProvider: "",
    mobileNumber: "",
  })

useEffect(() => {
    const storedCart = JSON.parse(localStorage.getItem("cart") || "[]")
    setCartItems(storedCart)
  }, [])

const getFreightCost = (method: string) => {
    switch (method) {
      case "standard":
        return 2500 // 5-7 dias
      case "express":
        return 5000 // 2-3 dias
      case "priority":
        return 8000 // 24 horas
      default:
        return 2500
    }
  }

const getFreightDeliveryTime = (method: string) => {
    switch (method) {
      case "standard":
        return "5-7 dias úteis"
      case "express":
        return "2-3 dias úteis"
      case "priority":
        return "24 horas"
      default:
        return "5-7 dias úteis"
    }
  }
  const subtotal = cartItems.reduce((sum: number, item: any) => sum + item.price * item.quantity, 0)
  const discount = calculateDiscount(subtotal)
  const tax = (subtotal - discount) * 0.1
  const shipping = getFreightCost(freight)
  const total = subtotal - discount + tax + shipping

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

const handleShippingSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (formData.fullName && formData.email && formData.address && formData.city && formData.province) {
      setStep("freight")
    }
  }

const handleFreightSubmit = () => {
    setStep("payment")
  }

const handlePaymentSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    let isValid = false

if (paymentMethod === "credit" || paymentMethod === "debit") {
      isValid = formData.cardName && formData.cardNumber && formData.cardExpiry && formData.cardCVC
    } else if (paymentMethod === "transfer") {
      isValid = formData.bankName && formData.accountNumber && formData.accountHolder
    } else if (paymentMethod === "mobile") {
      isValid = formData.mobileProvider && formData.mobileNumber
    }

if (isValid) {
      const orderNumber = `KM-${Math.random().toString().slice(2, 10)}`
      const trackingNumber = `TRK-${Math.random().toString().slice(2, 15).toUpperCase()}`
      const now = new Date()
      const deliveryDays = freight === "standard" ? 7 : freight === "express" ? 3 : 1
      const estimatedDelivery = new Date(now.getTime() + deliveryDays * 24 * 60 * 60 * 1000)

// Registrar transação de pagamento
      addTransaction({
        orderId: orderNumber,
        customerName: formData.fullName,
        amount: total,
        method: paymentMethod,
        status: "pending",
        date: now,
        bankDetails: paymentMethod === "transfer" ? {
          bankName: formData.bankName,
          accountNumber: formData.accountNumber,
          accountHolder: formData.accountHolder,
        } : undefined,
        mobileDetails: paymentMethod === "mobile" ? {
          provider: formData.mobileProvider,
          phoneNumber: formData.mobileNumber,
        } : undefined,
      })

addNotification({
        type: "order",
        title: "Novo Pedido Recebido",
        message: `${user?.name} realizou uma compra no valor de ${(total / 1000).toFixed(1)}k Kz`,
        data: {
          orderNumber,
          customerName: formData.fullName,
          email: formData.email,
          total,
          items: cartItems,
          paymentMethod,
          freight,
        },
      })

addOrder({
        id: `order-${Date.now()}`,
        orderNumber,
        date: now,
        total,
        paymentMethod: paymentMethod === "credit" ? "Cartão de Crédito" : paymentMethod === "debit" ? "Cartão de Débito" : paymentMethod === "transfer" ? "Transferência Bancária" : "Mobile Money",
        freight: freight === "standard" ? "Frete Standard (5-7 dias)" : freight === "express" ? "Frete Expresso (2-3 dias)" : "Frete Prioritário (24h)",
        items: cartItems,
        status: "confirmed",
        timeline: [
          {
            status: "pending",
            timestamp: now,
            description: "Pedido Recebido",
          },
          {
            status: "confirmed",
            timestamp: now,
            description: "Pedido Confirmado",
          },
        ],
        estimatedDelivery,
        trackingNumber,
        address: `${formData.address}, ${formData.city}, ${formData.province}, ${formData.postalCode}`,
      })

setStep("confirmation")
      localStorage.removeItem("cart")
    }
  }

const handleNewOrder = () => {
    router.push("/marketplace")
  }

if (step === "confirmation") {
    return (
      <ProtectedLayout>
        <div className="max-w-md mx-auto text-center py-12 space-y-6">
          <div className="flex justify-center">
            <CheckCircle2 className="h-20 w-20 text-green-500" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-foreground mb-2">Pedido Confirmado!</h1>
            <p className="text-muted-foreground">Obrigado pela sua compra</p>
          </div>
          <Card className="bg-muted">
            <CardContent className="pt-6 space-y-3">
              <div className="flex justify-between">
                <span>Número do Pedido:</span>
                <span className="font-semibold">KM-{Math.random().toString().slice(2, 10)}</span>
              </div>
              <div className="flex justify-between">
                <span>Total:</span>
                <span className="font-semibold text-primary">{(total / 1000).toFixed(1)}k Kz</span>
              </div>
              <div className="flex justify-between">
                <span>Método de Pagamento:</span>
                <span className="font-semibold capitalize">
                  {paymentMethod === "credit" && "Cartão de Crédito"}
                  {paymentMethod === "debit" && "Cartão de Débito"}
                  {paymentMethod === "transfer" && "Transferência Bancária"}
                  {paymentMethod === "mobile" && "Mobile Money"}
                </span>
              </div>
              <div className="flex justify-between">
                <span>Frete:</span>
                <span className="font-semibold capitalize">
                  {freight === "standard" && "Frete Standard"}
                  {freight === "express" && "Frete Expresso"}
                  {freight === "priority" && "Frete Prioritário"}
                </span>
              </div>
              <div className="flex justify-between">
                <span>Entrega Estimada:</span>
                <span className="font-semibold">{getFreightDeliveryTime(freight)}</span>
              </div>
            </CardContent>
          </Card>
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-900">
            <p className="font-semibold mb-1">Próximos passos:</p>
            <p>Você receberá um email de confirmação com o número de rastreamento em breve.</p>
          </div>
          <div className="flex gap-3">
            <Button className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white" onClick={() => router.push("/orders")}>
              Rastrear Pedido
            </Button>
            <Button className="flex-1" variant="outline" onClick={handleNewOrder}>
              Continuar Comprando
            </Button>
          </div>
        </div>
      </ProtectedLayout>
    )
  }

return (
    <ProtectedLayout>
      <div className="max-w-6xl mx-auto space-y-6">
        <Button variant="outline" onClick={() => router.back()} className="gap-2 mb-6">
          <ArrowLeft className="h-4 w-4" />
          Voltar
        </Button>

<div>
          <h1 className="text-3xl font-bold text-foreground">Checkout</h1>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-6">
            <div className="flex gap-4">
              <div
                className={`flex-1 p-4 rounded-lg border-2 cursor-pointer transition ${step === "shipping" ? "border-primary bg-primary/5" : "border-border"}`}
                onClick={() => step !== "confirmation" && setStep("shipping")}
              >
                <p className="font-semibold text-sm">1. Endereço</p>
              </div>
              <div
                className={`flex-1 p-4 rounded-lg border-2 cursor-pointer transition ${step === "freight" ? "border-primary bg-primary/5" : "border-border"}`}
                onClick={() => (step === "freight" || step === "payment") && setStep("freight")}
              >
                <p className="font-semibold text-sm">2. Frete</p>
              </div>
              <div
                className={`flex-1 p-4 rounded-lg border-2 cursor-pointer transition ${step === "payment" ? "border-primary bg-primary/5" : "border-border"}`}
                onClick={() => step === "payment" && setStep("payment")}
              >
                <p className="font-semibold text-sm">3. Pagamento</p>
              </div>
              <div
                className={`flex-1 p-4 rounded-lg border-2 ${step === "confirmation" ? "border-primary bg-primary/5" : "border-border"}`}
              >
                <p className="font-semibold text-sm">4. Confirmação</p>
              </div>
            </div>

{step === "shipping" && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Package className="h-5 w-5" />
                    Endereço de Entrega
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <form onSubmit={handleShippingSubmit} className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <input
                        type="text"
                        name="fullName"
                        placeholder="Nome Completo"
                        value={formData.fullName}
                        onChange={handleInputChange}
                        className="col-span-2 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        required
                      />
                      <input
                        type="email"
                        name="email"
                        placeholder="Email"
                        value={formData.email}
                        onChange={handleInputChange}
                        className="col-span-2 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        required
                      />
                      <input
                        type="tel"
                        name="phone"
                        placeholder="Telefone"
                        value={formData.phone}
                        onChange={handleInputChange}
                        className="col-span-2 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        required
                      />
                      <input
                        type="text"
                        name="address"
                        placeholder="Endereço"
                        value={formData.address}
                        onChange={handleInputChange}
                        className="col-span-2 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        required
                      />
                      <input
                        type="text"
                        name="city"
                        placeholder="Cidade"
                        value={formData.city}
                        onChange={handleInputChange}
                        className="px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        required
                      />
                      <input
                        type="text"
                        name="province"
                        placeholder="Província"
                        value={formData.province}
                        onChange={handleInputChange}
                        className="px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        required
                      />
                      <input
                        type="text"
                        name="postalCode"
                        placeholder="Código Postal"
                        value={formData.postalCode}
                        onChange={handleInputChange}
                        className="col-span-2 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                      />
                    </div>
                    <Button type="submit" className="w-full">
                      Continuar para Frete
                    </Button>
                  </form>
                </CardContent>
              </Card>
            )}

{step === "freight" && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Package className="h-5 w-5" />
                    Selecionar Frete
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-3">
                    <label
                      className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-muted"
                      onClick={() => setFreight("standard")}
                    >
                      <input
                        type="radio"
                        name="freight"
                        value="standard"
                        checked={freight === "standard"}
                        onChange={() => setFreight("standard")}
                        className="mr-3"
                      />
                      <div className="flex-1">
                        <p className="font-semibold">Frete Padrão</p>
                        <p className="text-sm text-muted-foreground">Entrega em 5-7 dias úteis</p>
                      </div>
                      <p className="font-bold text-primary">{(getFreightCost("standard") / 1000).toFixed(1)}k Kz</p>
                    </label>

<label
                      className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-muted"
                      onClick={() => setFreight("express")}
                    >
                      <input
                        type="radio"
                        name="freight"
                        value="express"
                        checked={freight === "express"}
                        onChange={() => setFreight("express")}
                        className="mr-3"
                      />
                      <div className="flex-1">
                        <p className="font-semibold">Frete Expresso</p>
                        <p className="text-sm text-muted-foreground">Entrega em 2-3 dias úteis</p>
                      </div>
                      <p className="font-bold text-primary">{(getFreightCost("express") / 1000).toFixed(1)}k Kz</p>
                    </label>

<label
                      className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-muted"
                      onClick={() => setFreight("priority")}
                    >
                      <input
                        type="radio"
                        name="freight"
                        value="priority"
                        checked={freight === "priority"}
                        onChange={() => setFreight("priority")}
                        className="mr-3"
                      />
                      <div className="flex-1">
                        <p className="font-semibold">Frete Prioritário</p>
                        <p className="text-sm text-muted-foreground">Entrega em 24 horas</p>
                      </div>
                      <p className="font-bold text-primary">{(getFreightCost("priority") / 1000).toFixed(1)}k Kz</p>
                    </label>
                  </div>

<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-900 mt-4">
                    <p className="font-semibold mb-1">Método de Frete Selecionado:</p>
                    <p className="capitalize mb-1">
                      {freight === "standard" ? "Padrão" : freight === "express" ? "Expresso" : "Prioritário"}
                    </p>
                    <p>{getFreightDeliveryTime(freight)}</p>
                  </div>

<div className="flex gap-3 pt-4">
                    <Button
                      type="button"
                      variant="outline"
                      className="flex-1 bg-transparent"
                      onClick={() => setStep("shipping")}
                    >
                      Voltar
                    </Button>
                    <Button type="button" className="flex-1" onClick={handleFreightSubmit}>
                      Continuar para Pagamento
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )}

{step === "payment" && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <CreditCard className="h-5 w-5" />
                    Método de Pagamento
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                    <button
                      onClick={() => setPaymentMethod("credit")}
                      className={`p-3 rounded-lg border-2 transition ${
                        paymentMethod === "credit" ? "border-primary bg-primary/5" : "border-border"
                      }`}
                    >
                      <p className="font-semibold text-sm">Cartão Crédito</p>
                    </button>
                    <button
                      onClick={() => setPaymentMethod("debit")}
                      className={`p-3 rounded-lg border-2 transition ${
                        paymentMethod === "debit" ? "border-primary bg-primary/5" : "border-border"
                      }`}
                    >
                      <p className="font-semibold text-sm">Cartão Débito</p>
                    </button>
                    <button
                      onClick={() => setPaymentMethod("transfer")}
                      className={`p-3 rounded-lg border-2 transition ${
                        paymentMethod === "transfer" ? "border-primary bg-primary/5" : "border-border"
                      }`}
                    >
                      <p className="font-semibold text-sm">Transferência</p>
                    </button>
                    <button
                      onClick={() => setPaymentMethod("mobile")}
                      className={`p-3 rounded-lg border-2 transition ${
                        paymentMethod === "mobile" ? "border-primary bg-primary/5" : "border-border"
                      }`}
                    >
                      <p className="font-semibold text-sm">Mobile Money</p>
                    </button>
                  </div>

<form onSubmit={handlePaymentSubmit} className="space-y-4">
                    {(paymentMethod === "credit" || paymentMethod === "debit") && (
                      <>
                        <input
                          type="text"
                          name="cardName"
                          placeholder="Nome no Cartão"
                          value={formData.cardName}
                          onChange={handleInputChange}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                          required
                        />
                        <input
                          type="text"
                          name="cardNumber"
                          placeholder="Número do Cartão (16 dígitos)"
                          value={formData.cardNumber}
                          onChange={handleInputChange}
                          maxLength={16}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                          required
                        />
                        <div className="grid grid-cols-2 gap-4">
                          <input
                            type="text"
                            name="cardExpiry"
                            placeholder="MM/AA"
                            value={formData.cardExpiry}
                            onChange={handleInputChange}
                            className="px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                            required
                          />
                          <input
                            type="text"
                            name="cardCVC"
                            placeholder="CVC"
                            value={formData.cardCVC}
                            onChange={handleInputChange}
                            maxLength={3}
                            className="px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                            required
                          />
                        </div>
                      </>
                    )}

{paymentMethod === "transfer" && (
                      <>
                        <select
                          name="bankName"
                          value={formData.bankName}
                          onChange={handleInputChange}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                          required
                        >
                          <option value="">Selecione o Banco</option>
                          <option value="bai">Banco Angolano de Investimentos (BAI)</option>
                          <option value="bpc">Banco de Poupança e Crédito (BPC)</option>
                          <option value="banco_sol">Banco Privado Atlântico (BPA)</option>
                          <option value="millennium_bim">Millennium bim</option>
                          <option value="kreditbank">Crédito Bank</option>
                        </select>
                        <input
                          type="text"
                          name="accountNumber"
                          placeholder="Número da Conta"
                          value={formData.accountNumber}
                          onChange={handleInputChange}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                          required
                        />
                        <input
                          type="text"
                          name="accountHolder"
                          placeholder="Titular da Conta"
                          value={formData.accountHolder}
                          onChange={handleInputChange}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                          required
                        />
                        <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-900">
                          <p className="font-semibold mb-1">Dados de Transferência KILLMAY:</p>
                          <p>Banco: Banco Angolano de Investimentos (BAI)</p>
                          <p>Conta: 1234567890123</p>
                          <p>IBAN: AO06001400070370957302011</p>
                        </div>
                      </>
                    )}

{paymentMethod === "mobile" && (
                      <>
                        <select
                          name="mobileProvider"
                          value={formData.mobileProvider}
                          onChange={handleInputChange}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                          required
                        >
                          <option value="">Selecione o Provedor</option>
                          <option value="kwanzapay">Kwanza Pay</option>
                          <option value="emola">Emola</option>
                          <option value="unitel">Unitel Money</option>
                        </select>
                        <input
                          type="tel"
                          name="mobileNumber"
                          placeholder="Número de Telemóvel"
                          value={formData.mobileNumber}
                          onChange={handleInputChange}
                          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                          required
                        />
                        <div className="bg-green-50 border border-green-200 rounded-lg p-3 text-sm text-green-900">
                          <p className="font-semibold mb-1">Como Funciona:</p>
                          <p>1. Clique em Confirmar Pedido</p>
                          <p>2. Receberá um SMS com o código de confirmação</p>
                          <p>3. Insira o PIN do seu Mobile Money para confirmar o pagamento</p>
                        </div>
                      </>
                    )}

<div className="flex gap-3">
                      <Button
                        type="button"
                        variant="outline"
                        className="flex-1 bg-transparent"
                        onClick={() => setStep("shipping")}
                      >
                        Voltar
                      </Button>
                      <Button type="submit" className="flex-1">
                        Confirmar Pedido
                      </Button>
                    </div>
                  </form>
                </CardContent>
              </Card>
            )}
          </div>

<div className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Resumo do Pedido</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-3 max-h-64 overflow-y-auto">
                  {cartItems.map((item: any) => (
                    <div key={item.id} className="flex justify-between text-sm pb-2 border-b border-border">
                      <span className="text-muted-foreground">
                        {item.name} (x{item.quantity})
                      </span>
                      <span className="font-semibold">{((item.price * item.quantity) / 1000).toFixed(1)}k Kz</span>
                    </div>
                  ))}
                </div>

<div className="space-y-2 pt-4 border-t border-border">
                  <div className="flex justify-between">
                    <span>Subtotal:</span>
                    <span>{(subtotal / 1000).toFixed(1)}k Kz</span>
                  </div>
                  {discount > 0 && (
                    <div className="flex justify-between text-emerald-600 dark:text-emerald-400">
                      <span>Desconto:</span>
                      <span>-{(discount / 1000).toFixed(1)}k Kz</span>
                    </div>
                  )}
                  <div className="flex justify-between">
                    <span>Imposto (10%):</span>
                    <span>{(tax / 1000).toFixed(1)}k Kz</span>
                  </div>
                  <div className="flex justify-between">
                    <span>
                      Frete ({freight === "standard" ? "Padrão" : freight === "express" ? "Expresso" : "Prioritário"}):
                    </span>
                    <span>{(shipping / 1000).toFixed(1)}k Kz</span>
                  </div>
                  <div className="flex justify-between text-base font-bold pt-2 border-t border-border">
                    <span>Total</span>
                    <span className="text-primary">{(total / 1000).toFixed(1)}k Kz</span>
                  </div>
                </div>

<div className="bg-green-50 border border-green-200 rounded-lg p-3 text-xs text-green-900">
                  <p className="font-semibold mb-1">Envio Grátis</p>
                  <p>Envio grátis em toda Angola para pedidos acima de 20.000 Kz</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/payments-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

interface PaymentTransaction {
  id: string
  orderId: string
  customerName: string
  amount: number
  method: "credit" | "debit" | "transfer" | "mobile"
  status: "pending" | "confirmed" | "processing" | "completed" | "failed"
  date: Date
  bankDetails?: {
    bankName: string
    accountNumber: string
    accountHolder: string
  }
  mobileDetails?: {
    provider: string
    phoneNumber: string
  }
}

interface BankAccount {
  bankName: string
  accountNumber: string
  accountHolder: string
  iban: string
}

interface PaymentsContextType {
  transactions: PaymentTransaction[]
  bankAccount: BankAccount | null
  addTransaction: (transaction: Omit<PaymentTransaction, "id">) => void
  confirmPayment: (transactionId: string) => void
  setBankAccount: (account: BankAccount) => void
  getPendingTotal: () => number
  getConfirmedTotal: () => number
}

const PaymentsContext = createContext<PaymentsContextType | undefined>(undefined)

export function PaymentsProvider({ children }: { children: React.ReactNode }) {
  const [transactions, setTransactions] = useState<PaymentTransaction[]>([])
  const [bankAccount, setBankAccountState] = useState<BankAccount | null>(null)

useEffect(() => {
    const storedTransactions = localStorage.getItem("killmay_transactions")
    const storedBank = localStorage.getItem("killmay_bank_account")

if (storedTransactions) {
      try {
        const parsed = JSON.parse(storedTransactions)
        setTransactions(
          parsed.map((t: any) => ({
            ...t,
            date: new Date(t.date),
          }))
        )
      } catch (error) {
        console.error("[v0] Erro ao carregar transações:", error)
      }
    }

if (storedBank) {
      try {
        setBankAccountState(JSON.parse(storedBank))
      } catch (error) {
        console.error("[v0] Erro ao carregar conta bancária:", error)
      }
    }
  }, [])

useEffect(() => {
    localStorage.setItem("killmay_transactions", JSON.stringify(transactions))
  }, [transactions])

useEffect(() => {
    if (bankAccount) {
      localStorage.setItem("killmay_bank_account", JSON.stringify(bankAccount))
    }
  }, [bankAccount])

const addTransaction = (transaction: Omit<PaymentTransaction, "id">) => {
    const newTransaction: PaymentTransaction = {
      ...transaction,
      id: `txn-${Date.now()}`,
    }
    setTransactions((prev) => [newTransaction, ...prev])
  }

const confirmPayment = (transactionId: string) => {
    setTransactions((prev) =>
      prev.map((txn) =>
        txn.id === transactionId ? { ...txn, status: "confirmed" as const } : txn
      )
    )
  }

const setBankAccount = (account: BankAccount) => {
    setBankAccountState(account)
  }

const getPendingTotal = () => {
    return transactions
      .filter((t) => t.status === "pending")
      .reduce((sum, t) => sum + t.amount, 0)
  }

const getConfirmedTotal = () => {
    return transactions
      .filter((t) => t.status === "confirmed" || t.status === "completed")
      .reduce((sum, t) => sum + t.amount, 0)
  }

return (
    <PaymentsContext.Provider
      value={{
        transactions,
        bankAccount,
        addTransaction,
        confirmPayment,
        setBankAccount,
        getPendingTotal,
        getConfirmedTotal,
      }}
    >
      {children}
    </PaymentsContext.Provider>
  )
}

export function usePayments() {
  const context = useContext(PaymentsContext)
  if (context === undefined) {
    throw new Error("usePayments deve ser usado dentro de PaymentsProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/(protected)/admin/payments/page.tsx" isMerged="true"
"use client"

import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DollarSign, CheckCircle, Clock, Bank, Download } from "lucide-react"
import { usePayments } from "@/app/payments-context"
import { useState } from "react"

export default function PaymentsPage() {
  const { transactions, bankAccount, confirmPayment, setPendingTotal, getConfirmedTotal, getPendingTotal } =
    usePayments()
  const [showBankForm, setShowBankForm] = useState(!bankAccount)
  const [bankForm, setBankForm] = useState({
    bankName: bankAccount?.bankName || "",
    accountNumber: bankAccount?.accountNumber || "",
    accountHolder: bankAccount?.accountHolder || "",
    iban: bankAccount?.iban || "",
  })

const handleSaveBank = () => {
    if (bankForm.bankName && bankForm.accountNumber && bankForm.accountHolder) {
      usePayments().setBankAccount(bankForm)
      setShowBankForm(false)
    }
  }

const pendingTotal = getPendingTotal()
  const confirmedTotal = getConfirmedTotal()
  const pendingCount = transactions.filter((t) => t.status === "pending").length

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Gestão de Pagamentos</h1>
          <p className="text-muted-foreground mt-2">Gerencie todos os pagamentos e transações da KILLMAY</p>
        </div>

{/* Resumo de Pagamentos */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Pagamentos Pendentes</CardTitle>
              <Clock className="h-4 w-4 text-yellow-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{(pendingTotal / 1000).toFixed(1)}k Kz</div>
              <p className="text-xs text-muted-foreground">{pendingCount} transações aguardando confirmação</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Pagamentos Confirmados</CardTitle>
              <CheckCircle className="h-4 w-4 text-emerald-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{(confirmedTotal / 1000).toFixed(1)}k Kz</div>
              <p className="text-xs text-muted-foreground">Total recebido com sucesso</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Número de Transações</CardTitle>
              <DollarSign className="h-4 w-4 text-blue-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{transactions.length}</div>
              <p className="text-xs text-muted-foreground">Total de transações processadas</p>
            </CardContent>
          </Card>
        </div>

<Tabs defaultValue="bank" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="bank">Conta Bancária</TabsTrigger>
            <TabsTrigger value="pending">Pendentes ({pendingCount})</TabsTrigger>
            <TabsTrigger value="confirmed">Confirmados</TabsTrigger>
          </TabsList>

{/* Configuração de Conta Bancária */}
          <TabsContent value="bank" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Dados da Conta Bancária</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {bankAccount && !showBankForm ? (
                  <div className="space-y-4">
                    <div className="bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-800 rounded-lg p-4 space-y-3">
                      <div className="flex justify-between">
                        <span className="font-semibold">Banco:</span>
                        <span>{bankAccount.bankName}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="font-semibold">Titular:</span>
                        <span>{bankAccount.accountHolder}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="font-semibold">Conta:</span>
                        <span>{bankAccount.accountNumber}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="font-semibold">IBAN:</span>
                        <span className="font-mono">{bankAccount.iban}</span>
                      </div>
                    </div>
                    <Button variant="outline" onClick={() => setShowBankForm(true)}>
                      Editar Dados Bancários
                    </Button>
                  </div>
                ) : (
                  <div className="space-y-4">
                    <div>
                      <label className="text-sm font-medium">Nome do Banco</label>
                      <Input
                        placeholder="BPC, BAI, BIM, etc."
                        value={bankForm.bankName}
                        onChange={(e) => setBankForm({ ...bankForm, bankName: e.target.value })}
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium">Titular da Conta</label>
                      <Input
                        placeholder="Seu nome"
                        value={bankForm.accountHolder}
                        onChange={(e) => setBankForm({ ...bankForm, accountHolder: e.target.value })}
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium">Número da Conta</label>
                      <Input
                        placeholder="Seu número de conta"
                        value={bankForm.accountNumber}
                        onChange={(e) => setBankForm({ ...bankForm, accountNumber: e.target.value })}
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium">IBAN</label>
                      <Input
                        placeholder="IBAN Internacional"
                        value={bankForm.iban}
                        onChange={(e) => setBankForm({ ...bankForm, iban: e.target.value })}
                      />
                    </div>
                    <div className="flex gap-2">
                      <Button onClick={handleSaveBank} className="flex-1 bg-emerald-600 hover:bg-emerald-700">
                        Guardar Conta
                      </Button>
                      <Button
                        variant="outline"
                        onClick={() => setShowBankForm(false)}
                        disabled={!bankAccount}
                        className="flex-1"
                      >
                        Cancelar
                      </Button>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

{/* Transações Pendentes */}
          <TabsContent value="pending" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Pagamentos Aguardando Confirmação</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {transactions.filter((t) => t.status === "pending").length === 0 ? (
                    <p className="text-center text-muted-foreground py-8">Nenhum pagamento pendente</p>
                  ) : (
                    transactions
                      .filter((t) => t.status === "pending")
                      .map((transaction) => (
                        <div key={transaction.id} className="border border-border rounded-lg p-4 space-y-3">
                          <div className="flex justify-between items-start">
                            <div>
                              <p className="font-semibold">{transaction.customerName}</p>
                              <p className="text-sm text-muted-foreground">Pedido: {transaction.orderId}</p>
                            </div>
                            <Badge variant="outline" className="bg-yellow-50 text-yellow-800 dark:bg-yellow-950">
                              Pendente
                            </Badge>
                          </div>
                          <div className="flex justify-between text-sm">
                            <span>Método: {transaction.method}</span>
                            <span>{transaction.date.toLocaleDateString("pt-AO")}</span>
                          </div>
                          <div className="flex justify-between items-center pt-2 border-t border-border">
                            <span className="text-lg font-bold">{(transaction.amount / 1000).toFixed(1)}k Kz</span>
                            <Button
                              size="sm"
                              onClick={() => confirmPayment(transaction.id)}
                              className="bg-emerald-600 hover:bg-emerald-700"
                            >
                              <CheckCircle className="w-4 h-4 mr-2" />
                              Confirmar
                            </Button>
                          </div>
                        </div>
                      ))
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Transações Confirmadas */}
          <TabsContent value="confirmed" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Pagamentos Confirmados</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {transactions.filter((t) => t.status === "confirmed" || t.status === "completed").length === 0 ? (
                    <p className="text-center text-muted-foreground py-8">Nenhum pagamento confirmado</p>
                  ) : (
                    transactions
                      .filter((t) => t.status === "confirmed" || t.status === "completed")
                      .map((transaction) => (
                        <div key={transaction.id} className="border border-emerald-200 dark:border-emerald-800 rounded-lg p-4 space-y-3 bg-emerald-50/50 dark:bg-emerald-950/20">
                          <div className="flex justify-between items-start">
                            <div>
                              <p className="font-semibold">{transaction.customerName}</p>
                              <p className="text-sm text-muted-foreground">Pedido: {transaction.orderId}</p>
                            </div>
                            <Badge className="bg-emerald-600 text-white">Confirmado</Badge>
                          </div>
                          <div className="flex justify-between text-sm">
                            <span>Método: {transaction.method}</span>
                            <span>{transaction.date.toLocaleDateString("pt-AO")}</span>
                          </div>
                          <div className="flex justify-between items-center pt-2 border-t border-emerald-200 dark:border-emerald-800">
                            <span className="text-lg font-bold text-emerald-600">{(transaction.amount / 1000).toFixed(1)}k Kz</span>
                            <Button size="sm" variant="ghost">
                              <Download className="w-4 h-4" />
                            </Button>
                          </div>
                        </div>
                      ))
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-menu.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Menu, X, Home, ShoppingCart, BookOpen, Wrench, Heart, Bell, User, LogOut } from "lucide-react"
import { useAuth } from "@/app/auth-context"
import { useWishlist } from "@/app/wishlist-context"
import { useNotifications } from "@/app/notifications-context"
import { ThemeSwitcher } from "@/components/theme-switcher"

export function MobileMenu() {
  const { user, logout } = useAuth()
  const { wishlist } = useWishlist()
  const { unreadCount } = useNotifications()
  const [isOpen, setIsOpen] = useState(false)

const menuItems = [
    { label: "Dashboard", href: "/dashboard", icon: Home },
    { label: "Marketplace", href: "/marketplace", icon: ShoppingCart },
    { label: "AgroTech", href: "/agrotech", icon: Wrench },
    { label: "Academia", href: "/academy", icon: BookOpen },
    { label: "Suporte", href: "/support", icon: Wrench },
    { label: "Reparação", href: "/repair", icon: Wrench },
    { label: "Perfil", href: "/profile", icon: User },
  ]

return (
    <div className="md:hidden">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="p-2 hover:bg-muted rounded-lg transition-colors"
      >
        {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
      </button>

{isOpen && (
        <div className="absolute top-16 left-0 right-0 bg-background border-b border-border shadow-lg z-50">
          <div className="p-4 space-y-3">
            {menuItems.map((item) => {
              const Icon = item.icon
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setIsOpen(false)}
                  className="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-muted transition-colors"
                >
                  <Icon className="h-5 w-5 text-muted-foreground" />
                  <span className="font-medium">{item.label}</span>
                </Link>
              )
            })}

<Link
                href="/wishlist"
                onClick={() => setIsOpen(false)}
                className="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-muted transition-colors relative"
              >
                <Heart className="h-5 w-5 text-muted-foreground" />
                <span className="font-medium">Favoritos</span>
                {wishlist.length > 0 && (
                  <span className="ml-auto bg-emerald-600 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center">
                    {wishlist.length}
                  </span>
                )}
              </Link>

{user?.role === "admin" && (
                <Link
                  href="/admin"
                  onClick={() => setIsOpen(false)}
                  className="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-muted transition-colors"
                >
                  <Bell className="h-5 w-5 text-muted-foreground" />
                  <span className="font-medium">Admin</span>
                  {unreadCount > 0 && (
                    <span className="ml-auto bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center">
                      {unreadCount > 9 ? "9+" : unreadCount}
                    </span>
                  )}
                </Link>
              )}

<button
                onClick={() => {
                  logout()
                  setIsOpen(false)
                }}
                className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-muted transition-colors text-red-600"
              >
                <LogOut className="h-5 w-5" />
                <span className="font-medium">Sair</span>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/responsive-grid.tsx" isMerged="true"
"use client"

import type React from "react"

interface ResponsiveGridProps {
  children: React.ReactNode
  columns?: "auto" | "2" | "3" | "4"
}

export function ResponsiveGrid({ children, columns = "auto" }: ResponsiveGridProps) {
  const gridClass = {
    auto: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
    "2": "grid-cols-1 sm:grid-cols-2",
    "3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
    "4": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
  }[columns]

return <div className={`grid ${gridClass} gap-4 md:gap-6`}>{children}</div>
}
[V0_FILE]typescriptreact:file="app/chat-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

interface ChatMessage {
  id: string
  conversationId: string
  sender: "user" | "admin"
  senderName: string
  message: string
  timestamp: Date
  isRead: boolean
}

interface Conversation {
  id: string
  userId: string
  userName: string
  status: "open" | "closed" | "pending"
  createdAt: Date
  updatedAt: Date
  messages: ChatMessage[]
}

interface ChatContextType {
  conversations: Conversation[]
  currentConversation: Conversation | null
  createConversation: (userId: string, userName: string) => string
  sendMessage: (conversationId: string, sender: "user" | "admin", senderName: string, message: string) => void
  selectConversation: (conversationId: string) => void
  closeConversation: (conversationId: string) => void
  getUnreadCount: () => number
  markAsRead: (conversationId: string) => void
}

const ChatContext = createContext<ChatContextType | undefined>(undefined)

export function ChatProvider({ children }: { children: React.ReactNode }) {
  const [conversations, setConversations] = useState<Conversation[]>([])
  const [currentConversation, setCurrentConversation] = useState<Conversation | null>(null)

useEffect(() => {
    const storedConversations = localStorage.getItem("killmay_chat_conversations")
    if (storedConversations) {
      try {
        const parsed = JSON.parse(storedConversations)
        const conversations = parsed.map((c: any) => ({
          ...c,
          createdAt: new Date(c.createdAt),
          updatedAt: new Date(c.updatedAt),
          messages: c.messages.map((m: any) => ({
            ...m,
            timestamp: new Date(m.timestamp),
          })),
        }))
        setConversations(conversations)
      } catch (error) {
        console.error("[v0] Erro ao carregar conversas:", error)
      }
    }
  }, [])

useEffect(() => {
    localStorage.setItem("killmay_chat_conversations", JSON.stringify(conversations))
  }, [conversations])

const createConversation = (userId: string, userName: string) => {
    const conversationId = `conv-${Date.now()}`
    const newConversation: Conversation = {
      id: conversationId,
      userId,
      userName,
      status: "open",
      createdAt: new Date(),
      updatedAt: new Date(),
      messages: [],
    }
    setConversations((prev) => [newConversation, ...prev])
    return conversationId
  }

const sendMessage = (conversationId: string, sender: "user" | "admin", senderName: string, message: string) => {
    setConversations((prev) =>
      prev.map((conv) => {
        if (conv.id === conversationId) {
          const newMessage: ChatMessage = {
            id: `msg-${Date.now()}`,
            conversationId,
            sender,
            senderName,
            message,
            timestamp: new Date(),
            isRead: sender === "admin",
          }
          return {
            ...conv,
            messages: [...conv.messages, newMessage],
            updatedAt: new Date(),
          }
        }
        return conv
      })
    )
  }

const selectConversation = (conversationId: string) => {
    const conv = conversations.find((c) => c.id === conversationId)
    if (conv) {
      setCurrentConversation(conv)
    }
  }

const closeConversation = (conversationId: string) => {
    setConversations((prev) =>
      prev.map((conv) =>
        conv.id === conversationId ? { ...conv, status: "closed" as const } : conv
      )
    )
  }

const getUnreadCount = () => {
    return conversations.reduce(
      (sum, conv) => sum + conv.messages.filter((m) => !m.isRead && m.sender === "admin").length,
      0
    )
  }

const markAsRead = (conversationId: string) => {
    setConversations((prev) =>
      prev.map((conv) => {
        if (conv.id === conversationId) {
          return {
            ...conv,
            messages: conv.messages.map((m) => ({ ...m, isRead: true })),
          }
        }
        return conv
      })
    )
  }

return (
    <ChatContext.Provider
      value={{
        conversations,
        currentConversation,
        createConversation,
        sendMessage,
        selectConversation,
        closeConversation,
        getUnreadCount,
        markAsRead,
      }}
    >
      {children}
    </ChatContext.Provider>
  )
}

export function useChat() {
  const context = useContext(ChatContext)
  if (context === undefined) {
    throw new Error("useChat deve ser usado dentro de ChatProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/chat-widget.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { MessageCircle, X, Send } from "lucide-react"
import { useChat } from "@/app/chat-context"
import { useAuth } from "@/app/auth-context"
import { Button } from "@/components/ui/button"

export function ChatWidget() {
  const [isOpen, setIsOpen] = useState(false)
  const [message, setMessage] = useState("")
  const { conversations, createConversation, sendMessage, currentConversation, selectConversation } = useChat()
  const { user } = useAuth()

const handleSendMessage = () => {
    if (!message.trim() || !user) return

let conversationId = currentConversation?.id

if (!conversationId) {
      conversationId = createConversation(user.id, user.name)
    }

sendMessage(conversationId, "user", user.name, message)
    setMessage("")
  }

const activeConversation =
    conversations.find((c) => c.id === currentConversation?.id) || conversations[0]

if (!user || user.role === "admin") return null

return (
    <div className="fixed bottom-4 right-4 z-40">
      {isOpen ? (
        <div className="w-80 bg-background border border-border rounded-lg shadow-lg flex flex-col h-96">
          <div className="bg-emerald-600 text-white p-4 rounded-t-lg flex justify-between items-center">
            <h3 className="font-semibold">Suporte KILLMAY</h3>
            <button
              onClick={() => setIsOpen(false)}
              className="hover:bg-emerald-700 p-1 rounded transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
          </div>

<div className="flex-1 overflow-y-auto p-4 space-y-3">
            {activeConversation?.messages && activeConversation.messages.length > 0 ? (
              activeConversation.messages.map((msg) => (
                <div
                  key={msg.id}
                  className={`flex ${msg.sender === "user" ? "justify-end" : "justify-start"}`}
                >
                  <div
                    className={`max-w-xs px-3 py-2 rounded-lg ${
                      msg.sender === "user"
                        ? "bg-emerald-600 text-white"
                        : "bg-muted text-foreground"
                    }`}
                  >
                    <p className="text-sm">{msg.message}</p>
                    <p className="text-xs opacity-70 mt-1">
                      {msg.timestamp.toLocaleTimeString("pt-AO", { hour: "2-digit", minute: "2-digit" })}
                    </p>
                  </div>
                </div>
              ))
            ) : (
              <div className="text-center text-muted-foreground text-sm py-8">
                <p>Olá! Como podemos ajudar?</p>
                <p className="text-xs mt-2">Envie sua mensagem abaixo</p>
              </div>
            )}
          </div>

<div className="border-t border-border p-4 flex gap-2">
            <input
              type="text"
              placeholder="Digite sua mensagem..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
              className="flex-1 px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-600 text-sm"
            />
            <button
              onClick={handleSendMessage}
              className="bg-emerald-600 hover:bg-emerald-700 text-white p-2 rounded-lg transition-colors"
            >
              <Send className="w-4 h-4" />
            </button>
          </div>

<div className="border-t border-border px-4 py-2 text-center text-xs text-muted-foreground">
            <Link href="/support/chat" className="text-emerald-600 hover:underline">
              Ver histórico completo
            </Link>
          </div>
        </div>
      ) : (
        <button
          onClick={() => setIsOpen(true)}
          className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-full p-4 shadow-lg transition-all hover:scale-110 flex items-center justify-center"
        >
          <MessageCircle className="w-6 h-6" />
        </button>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/support/chat/page.tsx" isMerged="true"
"use client"

import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Send, MessageCircle, X } from "lucide-react"
import { useChat } from "@/app/chat-context"
import { useAuth } from "@/app/auth-context"
import { useState, useEffect, useRef } from "react"

export default function ChatSupportPage() {
  const { conversations, createConversation, sendMessage, selectConversation, currentConversation, markAsRead } =
    useChat()
  const { user } = useAuth()
  const [message, setMessage] = useState("")
  const [selectedConvId, setSelectedConvId] = useState<string | null>(null)
  const messagesEndRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (conversations.length > 0 && !selectedConvId) {
      const userConv = conversations.find((c) => c.userId === user?.id)
      if (userConv) {
        setSelectedConvId(userConv.id)
        selectConversation(userConv.id)
        markAsRead(userConv.id)
      }
    }
  }, [conversations])

useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [currentConversation?.messages])

const activeConversation = conversations.find((c) => c.id === selectedConvId)

const handleSendMessage = () => {
    if (!message.trim() || !user) return

let conversationId = selectedConvId

if (!conversationId) {
      conversationId = createConversation(user.id, user.name)
      setSelectedConvId(conversationId)
    }

sendMessage(conversationId, user.role === "admin" ? "admin" : "user", user.name, message)
    setMessage("")
  }

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Suporte KILLMAY</h1>
          <p className="text-muted-foreground mt-2">
            {user?.role === "admin"
              ? "Gerencie as conversas de suporte com os clientes"
              : "Entre em contato com nosso suporte"}
          </p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* Lista de Conversas */}
          {user?.role === "admin" && (
            <div className="lg:col-span-1">
              <Card className="h-full">
                <CardHeader>
                  <CardTitle className="text-lg">Conversas ({conversations.length})</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  {conversations.length === 0 ? (
                    <p className="text-sm text-muted-foreground text-center py-8">Nenhuma conversa</p>
                  ) : (
                    conversations.map((conv) => {
                      const unreadCount = conv.messages.filter((m) => !m.isRead && m.sender === "user").length
                      return (
                        <button
                          key={conv.id}
                          onClick={() => {
                            setSelectedConvId(conv.id)
                            selectConversation(conv.id)
                            markAsRead(conv.id)
                          }}
                          className={`w-full text-left p-3 rounded-lg transition-colors ${
                            selectedConvId === conv.id
                              ? "bg-emerald-600 text-white"
                              : "hover:bg-muted border border-border"
                          }`}
                        >
                          <div className="flex justify-between items-start">
                            <div>
                              <p className="font-semibold text-sm">{conv.userName}</p>
                              <p className="text-xs opacity-75">
                                {conv.messages.length > 0
                                  ? conv.messages[conv.messages.length - 1].message.slice(0, 30) + "..."
                                  : "Nenhuma mensagem"}
                              </p>
                            </div>
                            {unreadCount > 0 && (
                              <Badge className="bg-red-500 text-white">{unreadCount}</Badge>
                            )}
                          </div>
                        </button>
                      )
                    })
                  )}
                </CardContent>
              </Card>
            </div>
          )}

{/* Área de Chat */}
          <div className={user?.role === "admin" ? "lg:col-span-3" : "lg:col-span-4"}>
            <Card className="h-96 flex flex-col">
              {activeConversation ? (
                <>
                  <CardHeader className="border-b border-border flex-none">
                    <div className="flex justify-between items-center">
                      <div>
                        <CardTitle>{activeConversation.userName}</CardTitle>
                        <p className="text-sm text-muted-foreground">
                          {activeConversation.status === "open" ? "Ativo" : "Fechado"}
                        </p>
                      </div>
                      <Badge
                        className={
                          activeConversation.status === "open"
                            ? "bg-emerald-600"
                            : "bg-gray-500"
                        }
                      >
                        {activeConversation.status === "open" ? "Aberto" : "Fechado"}
                      </Badge>
                    </div>
                  </CardHeader>

<CardContent className="flex-1 overflow-y-auto space-y-4 p-4">
                    {activeConversation.messages.length === 0 ? (
                      <div className="flex items-center justify-center h-full text-muted-foreground">
                        <div className="text-center space-y-3">
                          <MessageCircle className="w-12 h-12 mx-auto opacity-50" />
                          <p>Nenhuma mensagem ainda</p>
                          <p className="text-sm">Comece a conversa enviando uma mensagem</p>
                        </div>
                      </div>
                    ) : (
                      activeConversation.messages.map((msg) => (
                        <div
                          key={msg.id}
                          className={`flex ${msg.sender === "user" ? "justify-start" : "justify-end"}`}
                        >
                          <div
                            className={`max-w-xs px-4 py-2 rounded-lg ${
                              msg.sender === "user"
                                ? "bg-muted text-foreground"
                                : "bg-emerald-600 text-white"
                            }`}
                          >
                            <p className="text-sm font-semibold">{msg.senderName}</p>
                            <p className="text-sm mt-1">{msg.message}</p>
                            <p className="text-xs opacity-70 mt-1">
                              {msg.timestamp.toLocaleTimeString("pt-AO", {
                                hour: "2-digit",
                                minute: "2-digit",
                              })}
                            </p>
                          </div>
                        </div>
                      ))
                    )}
                    <div ref={messagesEndRef} />
                  </CardContent>

<div className="border-t border-border p-4 flex gap-2 flex-none">
                    <input
                      type="text"
                      placeholder="Digite sua mensagem..."
                      value={message}
                      onChange={(e) => setMessage(e.target.value)}
                      onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
                      className="flex-1 px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-600"
                      disabled={activeConversation.status === "closed"}
                    />
                    <Button
                      onClick={handleSendMessage}
                      className="bg-emerald-600 hover:bg-emerald-700"
                      disabled={activeConversation.status === "closed"}
                    >
                      <Send className="w-4 h-4" />
                    </Button>
                  </div>
                </>
              ) : (
                <CardContent className="flex items-center justify-center h-full">
                  <div className="text-center space-y-3 text-muted-foreground">
                    <MessageCircle className="w-12 h-12 mx-auto opacity-50" />
                    <p>Selecione uma conversa para começar</p>
                  </div>
                </CardContent>
              )}
            </Card>
          </div>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/admin/reports/page.tsx" isMerged="true"
"use client"

import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Download, FileText, Calendar, TrendingUp, Users, ShoppingCart } from "lucide-react"
import { useOrders } from "@/app/orders-context"
import { usePayments } from "@/app/payments-context"
import { useAuth } from "@/app/auth-context"
import { useState } from "react"

interface Report {
  id: string
  name: string
  type: "sales" | "payments" | "users" | "orders"
  createdAt: Date
  format: "pdf" | "excel"
  size: string
}

export default function ReportsPage() {
  const { transactions } = usePayments()
  const { orders } = useOrders()
  const { user } = useAuth()
  const [reports, setReports] = useState<Report[]>([
    {
      id: "1",
      name: "Relatório de Vendas - Janeiro 2025",
      type: "sales",
      createdAt: new Date("2025-01-31"),
      format: "pdf",
      size: "2.4 MB",
    },
    {
      id: "2",
      name: "Relatório de Pagamentos - Janeiro 2025",
      type: "payments",
      createdAt: new Date("2025-01-31"),
      format: "excel",
      size: "1.8 MB",
    },
    {
      id: "3",
      name: "Relatório de Utilizadores - Janeiro 2025",
      type: "users",
      createdAt: new Date("2025-01-31"),
      format: "pdf",
      size: "890 KB",
    },
  ])

const handleGenerateReport = (type: "sales" | "payments" | "users" | "orders", format: "pdf" | "excel") => {
    const now = new Date()
    const monthYear = now.toLocaleDateString("pt-AO", { month: "long", year: "numeric" })

const typeNames = {
      sales: "Vendas",
      payments: "Pagamentos",
      users: "Utilizadores",
      orders: "Pedidos",
    }

const newReport: Report = {
      id: `report-${Date.now()}`,
      name: `Relatório de ${typeNames[type]} - ${monthYear}`,
      type,
      createdAt: now,
      format,
      size: `${Math.floor(Math.random() * 5) + 1}.${Math.floor(Math.random() * 10)} MB`,
    }

setReports((prev) => [newReport, ...prev])
    
    // Simular download
    if (format === "pdf") {
      downloadPDF(type, newReport)
    } else {
      downloadExcel(type, newReport)
    }
  }

const downloadPDF = (type: string, report: Report) => {
    const element = document.createElement("a")
    const file = new Blob(
      [generateReportContent(type)],
      { type: "application/pdf" }
    )
    element.href = URL.createObjectURL(file)
    element.download = `${report.name}.pdf`
    document.body.appendChild(element)
    element.click()
    document.body.removeChild(element)
  }

const downloadExcel = (type: string, report: Report) => {
    const element = document.createElement("a")
    const file = new Blob(
      [generateReportContent(type)],
      { type: "application/vnd.ms-excel" }
    )
    element.href = URL.createObjectURL(file)
    element.download = `${report.name}.xlsx`
    document.body.appendChild(element)
    element.click()
    document.body.removeChild(element)
  }

const generateReportContent = (type: string) => {
    const now = new Date()
    return `
RELATÓRIO ${type.toUpperCase()}
Data: ${now.toLocaleDateString("pt-AO")}
Hora: ${now.toLocaleTimeString("pt-AO")}

${type === "sales" ? `
RESUMO DE VENDAS
Total de Pedidos: ${orders?.length || 0}
Valor Total: ${transactions.reduce((sum, t) => sum + t.amount, 0)} Kz
Pagamentos Confirmados: ${transactions.filter((t) => t.status === "confirmed").length}
Pagamentos Pendentes: ${transactions.filter((t) => t.status === "pending").length}
` : ""}

${type === "payments" ? `
RESUMO DE PAGAMENTOS
Total de Transações: ${transactions.length}
Valor Confirmado: ${transactions.filter((t) => t.status === "confirmed").reduce((sum, t) => sum + t.amount, 0)} Kz
Valor Pendente: ${transactions.filter((t) => t.status === "pending").reduce((sum, t) => sum + t.amount, 0)} Kz
` : ""}

---
Gerado por KILLMAY Admin
    `
  }

const stats = [
    {
      label: "Relatórios Gerados",
      value: reports.length,
      icon: FileText,
    },
    {
      label: "Vendas Totais",
      value: orders?.length || 0,
      icon: ShoppingCart,
    },
    {
      label: "Receita Confirmada",
      value: `${(transactions.filter((t) => t.status === "confirmed").reduce((sum, t) => sum + t.amount, 0) / 1000).toFixed(1)}k Kz`,
      icon: TrendingUp,
    },
  ]

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Relatórios e Exportações</h1>
          <p className="text-muted-foreground mt-2">Gere e exporte relatórios em PDF ou Excel</p>
        </div>

{/* Estatísticas */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {stats.map((stat) => {
            const Icon = stat.icon
            return (
              <Card key={stat.label}>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">{stat.label}</CardTitle>
                  <Icon className="h-4 w-4 text-emerald-600" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{stat.value}</div>
                </CardContent>
              </Card>
            )
          })}
        </div>

<Tabs defaultValue="generate" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="generate">Gerar Relatório</TabsTrigger>
            <TabsTrigger value="history">Histórico ({reports.length})</TabsTrigger>
          </TabsList>

{/* Gerar Relatório */}
          <TabsContent value="generate" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Relatório de Vendas */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <ShoppingCart className="h-5 w-5" />
                    Vendas
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-muted-foreground">
                    Relatório detalhado de todas as vendas e pedidos
                  </p>
                  <div className="flex gap-2">
                    <Button
                      onClick={() => handleGenerateReport("sales", "pdf")}
                      className="flex-1 gap-2"
                    >
                      <Download className="w-4 h-4" />
                      PDF
                    </Button>
                    <Button
                      onClick={() => handleGenerateReport("sales", "excel")}
                      variant="outline"
                      className="flex-1 gap-2"
                    >
                      <Download className="w-4 h-4" />
                      Excel
                    </Button>
                  </div>
                </CardContent>
              </Card>

{/* Relatório de Pagamentos */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <TrendingUp className="h-5 w-5" />
                    Pagamentos
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-muted-foreground">
                    Resumo de todas as transações e pagamentos processados
                  </p>
                  <div className="flex gap-2">
                    <Button
                      onClick={() => handleGenerateReport("payments", "pdf")}
                      className="flex-1 gap-2"
                    >
                      <Download className="w-4 h-4" />
                      PDF
                    </Button>
                    <Button
                      onClick={() => handleGenerateReport("payments", "excel")}
                      variant="outline"
                      className="flex-1 gap-2"
                    >
                      <Download className="w-4 h-4" />
                      Excel
                    </Button>
                  </div>
                </CardContent>
              </Card>

{/* Relatório de Utilizadores */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Users className="h-5 w-5" />
                    Utilizadores
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-muted-foreground">
                    Lista completa de utilizadores registrados
                  </p>
                  <div className="flex gap-2">
                    <Button
                      onClick={() => handleGenerateReport("users", "pdf")}
                      className="flex-1 gap-2"
                    >
                      <Download className="w-4 h-4" />
                      PDF
                    </Button>
                    <Button
                      onClick={() => handleGenerateReport("users", "excel")}
                      variant="outline"
                      className="flex-1 gap-2"
                    >
                      <Download className="w-4 h-4" />
                      Excel
                    </Button>
                  </div>
                </CardContent>
              </Card>

{/* Relatório de Pedidos */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="h-5 w-5" />
                    Pedidos
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-muted-foreground">
                    Detalhes de todos os pedidos realizados
                  </p>
                  <div className="flex gap-2">
                    <Button
                      onClick={() => handleGenerateReport("orders", "pdf")}
                      className="flex-1 gap-2"
                    >
                      <Download className="w-4 h-4" />
                      PDF
                    </Button>
                    <Button
                      onClick={() => handleGenerateReport("orders", "excel")}
                      variant="outline"
                      className="flex-1 gap-2"
                    >
                      <Download className="w-4 h-4" />
                      Excel
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

{/* Histórico de Relatórios */}
          <TabsContent value="history" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Relatórios Gerados</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {reports.length === 0 ? (
                    <p className="text-center text-muted-foreground py-8">Nenhum relatório gerado</p>
                  ) : (
                    reports.map((report) => (
                      <div
                        key={report.id}
                        className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted transition-colors"
                      >
                        <div>
                          <p className="font-semibold">{report.name}</p>
                          <div className="flex items-center gap-3 mt-2 text-sm text-muted-foreground">
                            <div className="flex items-center gap-1">
                              <Calendar className="w-4 h-4" />
                              {report.createdAt.toLocaleDateString("pt-AO")}
                            </div>
                            <span>{report.size}</span>
                            <Badge variant="outline">
                              {report.format === "pdf" ? "PDF" : "Excel"}
                            </Badge>
                          </div>
                        </div>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => {
                            const element = document.createElement("a")
                            element.href = "#"
                            element.download = `${report.name}.${report.format}`
                            element.click()
                          }}
                        >
                          <Download className="w-4 h-4" />
                        </Button>
                      </div>
                    ))
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/admin/bank-settings/page.tsx" isMerged="true"
"use client"

import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useState, useEffect } from "react"
import { Check, AlertCircle } from "lucide-react"

const BANCOS_ANGOLA = [
  { code: "BPC", name: "Banco de Poupança e Crédito" },
  { code: "BIM", name: "Banco de Investimento Imobiliário" },
  { code: "BAI", name: "Banco Angolano de Investimentos" },
  { code: "BDA", name: "Banco de Desenvolvimento de Angola" },
  { code: "BESA", name: "Banco de Economia e Saúde" },
  { code: "BCA", name: "Banco de Crédito de Angola" },
  { code: "BCGA", name: "Banco Comercial do Gabinete de Angola" },
  { code: "ECOBANCO", name: "Ecobanco" },
  { code: "STANDARD", name: "Standard Bank Angola" },
  { code: "BANCO_SOL", name: "Banco Sol" },
]

export default function BankSettingsPage() {
  const [bankSettings, setBankSettings] = useState({
    bankCode: "",
    bankName: "",
    accountHolder: "",
    accountNumber: "",
    iban: "",
    swift: "",
    accountType: "corrente",
  })
  const [saved, setSaved] = useState(false)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const stored = localStorage.getItem("killmay_bank_settings")
    if (stored) {
      setBankSettings(JSON.parse(stored))
    }
    setLoading(false)
  }, [])

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setBankSettings((prev) => ({
      ...prev,
      [name]: value,
    }))
  }

const handleBankSelect = (bankCode: string) => {
    const selectedBank = BANCOS_ANGOLA.find((b) => b.code === bankCode)
    setBankSettings((prev) => ({
      ...prev,
      bankCode,
      bankName: selectedBank?.name || "",
    }))
  }

const handleAccountTypeChange = (value: string) => {
    setBankSettings((prev) => ({
      ...prev,
      accountType: value,
    }))
  }

const handleSave = () => {
    if (!bankSettings.bankCode || !bankSettings.accountHolder || !bankSettings.accountNumber) {
      alert("Por favor, preencha todos os campos obrigatórios")
      return
    }

localStorage.setItem("killmay_bank_settings", JSON.stringify(bankSettings))
    setSaved(true)
    setTimeout(() => setSaved(false), 3000)
  }

if (loading) {
    return (
      <ProtectedLayout>
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-muted-foreground">Carregando...</div>
        </div>
      </ProtectedLayout>
    )
  }

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Configurações Bancárias</h1>
          <p className="text-muted-foreground mt-2">Adicione suas coordenadas bancárias para receber pagamentos</p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  Dados Bancários
                  {saved && <Check className="h-5 w-5 text-emerald-600" />}
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <label className="block text-sm font-medium">Banco *</label>
                  <Select value={bankSettings.bankCode} onValueChange={handleBankSelect}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecione um banco" />
                    </SelectTrigger>
                    <SelectContent>
                      {BANCOS_ANGOLA.map((banco) => (
                        <SelectItem key={banco.code} value={banco.code}>
                          {banco.name} ({banco.code})
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <label className="block text-sm font-medium">Tipo de Conta *</label>
                  <Select value={bankSettings.accountType} onValueChange={handleAccountTypeChange}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="corrente">Conta Corrente</SelectItem>
                      <SelectItem value="poupanca">Conta Poupança</SelectItem>
                      <SelectItem value="negocio">Conta Negócio</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <label className="block text-sm font-medium">Titular da Conta *</label>
                  <Input
                    name="accountHolder"
                    value={bankSettings.accountHolder}
                    onChange={handleChange}
                    placeholder="Nome completo do titular"
                  />
                </div>

<div className="space-y-2">
                  <label className="block text-sm font-medium">Número da Conta *</label>
                  <Input
                    name="accountNumber"
                    value={bankSettings.accountNumber}
                    onChange={handleChange}
                    placeholder="Ex: 0123456789"
                  />
                </div>

<div className="space-y-2">
                  <label className="block text-sm font-medium">SWIFT/BIC</label>
                  <Input
                    name="swift"
                    value={bankSettings.swift}
                    onChange={handleChange}
                    placeholder="Ex: BPCAAOAV"
                  />
                </div>

<Button onClick={handleSave} className="w-full bg-emerald-600 hover:bg-emerald-700 text-white">
                  Guardar Configurações Bancárias
                </Button>
              </CardContent>
            </Card>
          </div>

<div className="space-y-4">
            <Card className="bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-blue-900 dark:text-blue-100">
                  <AlertCircle className="h-5 w-5" />
                  Informações
                </CardTitle>
              </CardHeader>
              <CardContent className="text-sm text-blue-800 dark:text-blue-200 space-y-3">
                <p>
                  <strong>Campos obrigatórios:</strong>
                </p>
                <ul className="list-disc list-inside space-y-1">
                  <li>Banco</li>
                  <li>Tipo de Conta</li>
                  <li>Titular da Conta</li>
                  <li>Número da Conta</li>
                </ul>

<div className="pt-3 border-t border-blue-200 dark:border-blue-800">
                  <p>
                    <strong>Após salvar:</strong>
                  </p>
                  <ul className="list-disc list-inside space-y-1 mt-2">
                    <li>Todos os pagamentos irão para esta conta</li>
                    <li>Os clientes verão os dados bancários no checkout</li>
                    <li>Você pode editar a qualquer momento</li>
                  </ul>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="text-base">Status</CardTitle>
              </CardHeader>
              <CardContent>
                {bankSettings.accountNumber ? (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <div className="w-2 h-2 rounded-full bg-emerald-600"></div>
                      <span className="text-sm font-medium">Conta Configurada</span>
                    </div>
                    <p className="text-xs text-muted-foreground pt-2">
                      {bankSettings.bankName} - {bankSettings.accountNumber}
                    </p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <div className="w-2 h-2 rounded-full bg-red-600"></div>
                      <span className="text-sm font-medium">Não Configurada</span>
                    </div>
                    <p className="text-xs text-muted-foreground pt-2">Configure sua conta bancária para receber pagamentos</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/orders/page.tsx" isMerged="true"
"use client"

import { ProtectedLayout } from "@/components/protected-layout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useOrders } from "@/app/orders-context"
import { Package, CheckCircle2, Truck, MapPin, Calendar, Copy, Phone, Mail } from "lucide-react"
import Link from "next/link"
import { useState } from "react"

const getStatusInfo = (status: string) => {
  const statuses: Record<string, { label: string; color: string; bgColor: string }> = {
    pending: { label: "Pendente", color: "text-yellow-600", bgColor: "bg-yellow-100" },
    confirmed: { label: "Confirmado", color: "text-blue-600", bgColor: "bg-blue-100" },
    processing: { label: "Processando", color: "text-purple-600", bgColor: "bg-purple-100" },
    shipped: { label: "Enviado", color: "text-indigo-600", bgColor: "bg-indigo-100" },
    delivered: { label: "Entregue", color: "text-emerald-600", bgColor: "bg-emerald-100" },
    cancelled: { label: "Cancelado", color: "text-red-600", bgColor: "bg-red-100" },
  }
  return statuses[status] || statuses.pending
}

const getStatusIcon = (status: string) => {
  switch (status) {
    case "delivered":
      return <CheckCircle2 className="w-5 h-5" />
    case "shipped":
      return <Truck className="w-5 h-5" />
    case "processing":
      return <Package className="w-5 h-5" />
    default:
      return <Package className="w-5 h-5" />
  }
}

export default function OrdersPage() {
  const { orders } = useOrders()
  const [copiedTrackingId, setCopiedTrackingId] = useState<string | null>(null)

const copyToClipboard = (text: string, trackingId: string) => {
    navigator.clipboard.writeText(text)
    setCopiedTrackingId(trackingId)
    setTimeout(() => setCopiedTrackingId(null), 2000)
  }

if (orders.length === 0) {
    return (
      <ProtectedLayout>
        <div className="min-h-screen bg-gradient-to-br from-background to-secondary/20 pt-20 pb-12">
          <div className="container max-w-6xl mx-auto px-4">
            <h1 className="text-4xl font-bold text-foreground mb-8 flex items-center gap-3">
              <Package className="w-10 h-10 text-emerald-600" />
              Meus Pedidos
            </h1>
            <Card className="border-border/50">
              <CardContent className="pt-12 pb-12 text-center">
                <Package className="w-16 h-16 text-muted-foreground/30 mx-auto mb-4" />
                <h2 className="text-2xl font-semibold text-foreground mb-2">Nenhum pedido ainda</h2>
                <p className="text-foreground/60 mb-6">Comece a comprar no marketplace</p>
                <Link href="/marketplace">
                  <Button className="bg-emerald-600 hover:bg-emerald-700 text-white">Ir para Marketplace</Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </ProtectedLayout>
    )
  }

<div className="space-y-6">
            {orders.map((order) => {
              const statusInfo = getStatusInfo(order.status)
              const progressPercentage = {
                pending: 25,
                confirmed: 50,
                processing: 75,
                shipped: 75,
                delivered: 100,
                cancelled: 0,
              }[order.status]

return (
                <Card key={order.id} className="border-border/50 overflow-hidden hover:shadow-lg transition-shadow">
                  <CardContent className="p-0">
                    {/* Cabeçalho do Pedido */}
                    <div className="bg-gradient-to-r from-emerald-50 to-emerald-100/50 dark:from-emerald-950 dark:to-emerald-900/50 p-6 border-b border-border">
                      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div>
                          <p className="text-sm text-foreground/60">Número do Pedido</p>
                          <p className="font-mono font-bold text-foreground">{order.orderNumber}</p>
                        </div>
                        <div>
                          <p className="text-sm text-foreground/60">Data</p>
                          <p className="font-semibold text-foreground">{new Date(order.date).toLocaleDateString("pt-PT")}</p>
                        </div>
                        <div>
                          <p className="text-sm text-foreground/60">Total</p>
                          <p className="font-bold text-emerald-600">{(order.total / 1000).toFixed(1)}K AOA</p>
                        </div>
                        <div>
                          <p className="text-sm text-foreground/60">Rastreamento</p>
                          <button
                            onClick={() => copyToClipboard(order.trackingNumber, order.id)}
                            className="flex items-center gap-2 font-mono font-bold text-blue-600 hover:text-blue-700 transition-colors"
                          >
                            {order.trackingNumber}
                            <Copy className="w-4 h-4" />
                          </button>
                          {copiedTrackingId === order.id && (
                            <p className="text-xs text-emerald-600 mt-1">Copiado!</p>
                          )}
                        </div>
                        <div className="flex items-end justify-between">
                          <div>
                            <p className="text-sm text-foreground/60">Status</p>
                            <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full ${statusInfo.bgColor}`}>
                              {getStatusIcon(order.status)}
                              <span className={`font-semibold text-sm ${statusInfo.color}`}>{statusInfo.label}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

{/* Progresso */}
                    <div className="p-6 border-b border-border">
                      <div className="space-y-3">
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-medium text-foreground">Progresso da Entrega</span>
                          <span className="text-sm text-foreground/60">{progressPercentage}%</span>
                        </div>
                        <div className="w-full bg-secondary rounded-full h-2">
                          <div
                            className="bg-gradient-to-r from-emerald-500 to-emerald-600 h-2 rounded-full transition-all duration-500"
                            style={{ width: `${progressPercentage}%` }}
                          />
                        </div>
                      </div>
                    </div>

{/* Timeline */}
                    <div className="p-6">
                      <p className="text-sm font-semibold text-foreground mb-4">Histórico do Pedido</p>
                      <div className="space-y-4">
                        {order.timeline.map((event, index) => (
                          <div key={index} className="flex gap-4">
                            <div className="flex flex-col items-center">
                              <div className="w-4 h-4 rounded-full bg-emerald-600 mt-1" />
                              {index < order.timeline.length - 1 && <div className="w-0.5 h-12 bg-border my-2" />}
                            </div>
                            <div className="pb-2">
                              <p className="font-semibold text-foreground text-sm">{event.description}</p>
                              <p className="text-xs text-foreground/60">
                                {new Date(event.timestamp).toLocaleDateString("pt-PT")} às{" "}
                                {new Date(event.timestamp).toLocaleTimeString("pt-PT", {
                                  hour: "2-digit",
                                  minute: "2-digit",
                                })}
                              </p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

{/* Informações de Entrega */}
                    <div className="p-6 bg-secondary/30 grid grid-cols-1 md:grid-cols-3 gap-4 border-t border-border">
                      <div className="flex items-start gap-3">
                        <Truck className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
                        <div>
                          <p className="text-xs text-foreground/60">Tipo de Frete</p>
                          <p className="font-semibold text-foreground capitalize">{order.freight}</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3">
                        <Calendar className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
                        <div>
                          <p className="text-xs text-foreground/60">Entrega Estimada</p>
                          <p className="font-semibold text-foreground">
                            {new Date(order.estimatedDelivery).toLocaleDateString("pt-PT")}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3">
                        <MapPin className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
                        <div>
                          <p className="text-xs text-foreground/60">Endereço</p>
                          <p className="font-semibold text-foreground text-sm line-clamp-2">{order.address}</p>
                        </div>
                      </div>
                    </div>

{/* Itens */}
                    <div className="p-6 border-t border-border">
                      <p className="text-sm font-semibold text-foreground mb-3">Itens ({order.items.length})</p>
                      <div className="space-y-2">
                        {order.items.map((item, index) => (
                          <div key={index} className="flex justify-between items-center text-sm">
                            <span className="text-foreground">{item.name}</span>
                            <span className="text-foreground/60">
                              {item.quantity}x {(item.price / 1000).toFixed(1)}K AOA
                            </span>
                          </div>
                        ))}
                      </div>
                    </div>

{/* Rodapé com botões de ação */}
                    <div className="p-6 bg-muted/30 border-t border-border flex flex-col md:flex-row gap-3 justify-between items-start md:items-center">
                      <div className="flex flex-col gap-2 text-sm text-foreground/60">
                        <div className="flex items-center gap-2">
                          <MapPin className="w-4 h-4" />
                          {order.address}
                        </div>
                        <div className="flex items-center gap-2">
                          <Calendar className="w-4 h-4" />
                          Entrega estimada: {new Date(order.estimatedDelivery).toLocaleDateString("pt-PT")}
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Link href="/support/chat">
                          <Button variant="outline" size="sm" className="gap-2">
                            <Phone className="w-4 h-4" />
                            Suporte
                          </Button>
                        </Link>
                        <Button size="sm" className="gap-2 bg-emerald-600 hover:bg-emerald-700">
                          <Mail className="w-4 h-4" />
                          Rastreamento
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/products-management-context.tsx" isMerged="true"
'use client'

import type React from 'react'
import { createContext, useContext, useEffect, useState } from 'react'

interface Product {
  id: number
  name: string
  price: number
  image: string
  category: string
  description: string
  rating: number
  reviews: number
  stock: number
}

interface ProductsContextType {
  products: Product[]
  categories: string[]
  addProduct: (product: Omit<Product, 'id'>) => void
  updateProduct: (id: number, product: Partial<Product>) => void
  deleteProduct: (id: number) => void
  updatePrice: (id: number, newPrice: number) => void
  addCategory: (category: string) => void
  removeCategory: (category: string) => void
}

const ProductsContext = createContext<ProductsContextType | undefined>(undefined)

export function ProductsManagementProvider({ children }: { children: React.ReactNode }) {
  const [products, setProducts] = useState<Product[]>([])
  const [categories, setCategories] = useState<string[]>([])

useEffect(() => {
    const storedProducts = localStorage.getItem('killmay_products')
    const storedCategories = localStorage.getItem('killmay_categories')

if (storedProducts) {
      try {
        setProducts(JSON.parse(storedProducts))
      } catch (error) {
        console.error('[v0] Erro ao carregar produtos:', error)
      }
    }

if (storedCategories) {
      try {
        setCategories(JSON.parse(storedCategories))
      } catch (error) {
        console.error('[v0] Erro ao carregar categorias:', error)
      }
    }
  }, [])

useEffect(() => {
    localStorage.setItem('killmay_products', JSON.stringify(products))
  }, [products])

useEffect(() => {
    localStorage.setItem('killmay_categories', JSON.stringify(categories))
  }, [categories])

const addProduct = (product: Omit<Product, 'id'>) => {
    const newId = Math.max(...products.map((p) => p.id), 0) + 1
    setProducts((prev) => [...prev, { ...product, id: newId }])
  }

const updateProduct = (id: number, updates: Partial<Product>) => {
    setProducts((prev) =>
      prev.map((product) =>
        product.id === id ? { ...product, ...updates } : product
      )
    )
  }

const deleteProduct = (id: number) => {
    setProducts((prev) => prev.filter((product) => product.id !== id))
  }

const updatePrice = (id: number, newPrice: number) => {
    setProducts((prev) =>
      prev.map((product) =>
        product.id === id ? { ...product, price: newPrice } : product
      )
    )
  }

const addCategory = (category: string) => {
    if (!categories.includes(category)) {
      setCategories((prev) => [...prev, category])
    }
  }

const removeCategory = (category: string) => {
    setCategories((prev) => prev.filter((cat) => cat !== category))
  }

return (
    <ProductsContext.Provider
      value={{
        products,
        categories,
        addProduct,
        updateProduct,
        deleteProduct,
        updatePrice,
        addCategory,
        removeCategory,
      }}
    >
      {children}
    </ProductsContext.Provider>
  )
}

export function useProductsManagement() {
  const context = useContext(ProductsContext)
  if (context === undefined) {
    throw new Error('useProductsManagement deve ser usado dentro de ProductsManagementProvider')
  }
  return context
}
[V0_FILE]typescriptreact:file="app/(protected)/admin/products-management/page.tsx" isMerged="true"
'use client'

import { ProtectedLayout } from '@/components/protected-layout'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { useProductsManagement } from '@/app/products-management-context'
import { Trash2, Edit2, Plus, Package } from 'lucide-react'
import { useState } from 'react'

export default function ProductsManagementPage() {
  const { products, categories, addProduct, updateProduct, deleteProduct, updatePrice, addCategory, removeCategory } = useProductsManagement()
  const [activeTab, setActiveTab] = useState<'products' | 'categories'>('products')
  const [showForm, setShowForm] = useState(false)
  const [editingId, setEditingId] = useState<number | null>(null)
  const [formData, setFormData] = useState({
    name: '',
    price: 0,
    category: '',
    description: '',
    image: '',
    stock: 0,
  })
  const [newCategory, setNewCategory] = useState('')

const handleAddProduct = () => {
    if (formData.name && formData.price > 0) {
      if (editingId) {
        updateProduct(editingId, formData)
        setEditingId(null)
      } else {
        addProduct({
          ...formData,
          id: 0,
          rating: 4.5,
          reviews: 0,
        })
      }
      setFormData({
        name: '',
        price: 0,
        category: '',
        description: '',
        image: '',
        stock: 0,
      })
      setShowForm(false)
    }
  }

const handleEdit = (product: any) => {
    setFormData({
      name: product.name,
      price: product.price,
      category: product.category,
      description: product.description,
      image: product.image,
      stock: product.stock,
    })
    setEditingId(product.id)
    setShowForm(true)
  }

const handleAddCategory = () => {
    if (newCategory.trim()) {
      addCategory(newCategory)
      setNewCategory('')
    }
  }

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Gerenciamento de Produtos</h1>
          <p className="text-muted-foreground mt-2">
            Adicione, edite ou remova produtos, categorias e altere preços
          </p>
        </div>

<div className="flex gap-4 border-b border-border">
          <button
            onClick={() => setActiveTab('products')}
            className={`px-4 py-2 font-medium transition-colors ${
              activeTab === 'products'
                ? 'border-b-2 border-foreground text-foreground'
                : 'text-muted-foreground hover:text-foreground'
            }`}
          >
            <Package className="inline mr-2 h-4 w-4" />
            Produtos
          </button>
          <button
            onClick={() => setActiveTab('categories')}
            className={`px-4 py-2 font-medium transition-colors ${
              activeTab === 'categories'
                ? 'border-b-2 border-foreground text-foreground'
                : 'text-muted-foreground hover:text-foreground'
            }`}
          >
            Categorias
          </button>
        </div>

{activeTab === 'products' && (
          <div className="space-y-6">
            <Button
              onClick={() => {
                setShowForm(!showForm)
                setEditingId(null)
                setFormData({
                  name: '',
                  price: 0,
                  category: '',
                  description: '',
                  image: '',
                  stock: 0,
                })
              }}
              className="gap-2 bg-emerald-600 hover:bg-emerald-700"
            >
              <Plus className="h-4 w-4" />
              Adicionar Produto
            </Button>

{showForm && (
              <Card>
                <CardHeader>
                  <CardTitle>{editingId ? 'Editar Produto' : 'Novo Produto'}</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium mb-2">Nome</label>
                      <Input
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        placeholder="Nome do produto"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2">Preço (AOA)</label>
                      <Input
                        type="number"
                        value={formData.price}
                        onChange={(e) => setFormData({ ...formData, price: parseFloat(e.target.value) })}
                        placeholder="0"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2">Categoria</label>
                      <select
                        value={formData.category}
                        onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                        className="w-full px-3 py-2 border border-border rounded-lg bg-background text-foreground"
                      >
                        <option value="">Selecione uma categoria</option>
                        {categories.map((cat) => (
                          <option key={cat} value={cat}>
                            {cat}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2">Stock</label>
                      <Input
                        type="number"
                        value={formData.stock}
                        onChange={(e) => setFormData({ ...formData, stock: parseInt(e.target.value) })}
                        placeholder="0"
                      />
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-sm font-medium mb-2">Descrição</label>
                      <textarea
                        value={formData.description}
                        onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                        placeholder="Descrição do produto"
                        className="w-full px-3 py-2 border border-border rounded-lg bg-background text-foreground"
                        rows={3}
                      />
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-sm font-medium mb-2">URL da Imagem</label>
                      <Input
                        value={formData.image}
                        onChange={(e) => setFormData({ ...formData, image: e.target.value })}
                        placeholder="https://..."
                      />
                    </div>
                  </div>
                  <div className="flex gap-3 justify-end">
                    <Button
                      variant="outline"
                      onClick={() => setShowForm(false)}
                    >
                      Cancelar
                    </Button>
                    <Button
                      onClick={handleAddProduct}
                      className="bg-emerald-600 hover:bg-emerald-700"
                    >
                      {editingId ? 'Atualizar' : 'Adicionar'}
                    </Button>
                  </div>
                </CardContent>
              </Card>
            )}

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {products.map((product) => (
                <Card key={product.id}>
                  <CardContent className="pt-6">
                    <img
                      src={product.image}
                      alt={product.name}
                      className="w-full h-48 object-cover rounded-lg mb-4"
                    />
                    <h3 className="font-semibold text-foreground mb-2">{product.name}</h3>
                    <p className="text-sm text-muted-foreground mb-2">{product.category}</p>
                    <div className="flex justify-between items-center mb-4">
                      <div>
                        <p className="text-lg font-bold text-emerald-600">{(product.price / 1000).toFixed(1)}k AOA</p>
                        <p className="text-xs text-muted-foreground">Stock: {product.stock}</p>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleEdit(product)}
                        className="gap-2"
                      >
                        <Edit2 className="h-4 w-4" />
                        Editar
                      </Button>
                      <Button
                        size="sm"
                        variant="destructive"
                        onClick={() => deleteProduct(product.id)}
                        className="gap-2"
                      >
                        <Trash2 className="h-4 w-4" />
                        Remover
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )}

{activeTab === 'categories' && (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Adicionar Categoria</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex gap-2">
                  <Input
                    value={newCategory}
                    onChange={(e) => setNewCategory(e.target.value)}
                    placeholder="Nome da categoria"
                  />
                  <Button onClick={handleAddCategory} className="bg-emerald-600 hover:bg-emerald-700">
                    Adicionar
                  </Button>
                </div>
              </CardContent>
            </Card>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {categories.map((category) => (
                <Card key={category}>
                  <CardContent className="pt-6 flex justify-between items-center">
                    <span className="font-semibold">{category}</span>
                    <Button
                      size="sm"
                      variant="destructive"
                      onClick={() => removeCategory(category)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )}
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { AuthProvider } from "@/app/auth-context"
import { NotificationsProvider } from "@/app/notifications-context"
import { ReviewsProvider } from "@/app/reviews-context"
import { WishlistProvider } from "@/app/wishlist-context"
import { OrdersProvider } from "@/app/orders-context"
import { ThemeProvider } from "@/app/theme-context"
import { CertificatesProvider } from "@/app/certificates-context"
import { CouponsProvider } from "@/app/coupons-context"
import { PaymentsProvider } from "@/app/payments-context"
import { ChatProvider } from "@/app/chat-context"
import { ProductsManagementProvider } from "@/app/products-management-context"
import { BetaTestingProvider } from "@/app/beta-testing-context"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "KILLMAY - Ecossistema Digital de Angola",
  description: "A plataforma completa para marketplace, AgroTech, apoio técnico e educação em Angola",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="pt" suppressHydrationWarning>
      <body className={`font-sans antialiased`}>
        <ThemeProvider>
          <AuthProvider>
            <BetaTestingProvider>
              <ProductsManagementProvider>
                <ChatProvider>
                  <PaymentsProvider>
                    <OrdersProvider>
                      <CertificatesProvider>
                        <CouponsProvider>
                          <NotificationsProvider>
                            <ReviewsProvider>
                              <WishlistProvider>{children}</WishlistProvider>
                            </ReviewsProvider>
                          </NotificationsProvider>
                        </CouponsProvider>
                      </CertificatesProvider>
                    </OrdersProvider>
                  </PaymentsProvider>
                </ChatProvider>
              </ProductsManagementProvider>
            </BetaTestingProvider>
          </AuthProvider>
        </ThemeProvider>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/admin/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { ProtectedLayout } from "@/components/protected-layout"
import { Users, BarChart3, Bell, LineChart, CreditCard, Package, TestTube, QrCode } from "lucide-react"
import { AdminStats } from "@/components/admin/admin-stats"
import { UsersManagement } from "@/components/admin/users-management"
import { AdminNotifications } from "@/components/admin/admin-notifications"
import Link from "next/link"

export default function AdminPage() {
  const { user } = useAuth()
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("dashboard")

useEffect(() => {
    if (user && user.role !== "admin") {
      router.push("/dashboard")
    }
  }, [user, router])

if (!user || user.role !== "admin") {
    return null
  }

<div className="flex gap-2 border-b border-border overflow-x-auto">
          <button
            onClick={() => setActiveTab("dashboard")}
            className={`px-4 py-2 font-medium transition-colors ${
              activeTab === "dashboard"
                ? "border-b-2 border-foreground text-foreground"
                : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <BarChart3 className="inline mr-2 h-4 w-4" />
            Dashboard
          </button>
          <button
            onClick={() => setActiveTab("users")}
            className={`px-4 py-2 font-medium transition-colors ${
              activeTab === "users"
                ? "border-b-2 border-foreground text-foreground"
                : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <Users className="inline mr-2 h-4 w-4" />
            Utilizadores
          </button>
          <button
            onClick={() => setActiveTab("notifications")}
            className={`px-4 py-2 font-medium transition-colors ${
              activeTab === "notifications"
                ? "border-b-2 border-foreground text-foreground"
                : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <Bell className="inline mr-2 h-4 w-4" />
            Notificações
          </button>
          <Link href="/admin/analytics">
            <button className="px-4 py-2 font-medium text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2">
              <LineChart className="h-4 w-4" />
              Analytics Avançado
            </button>
          </Link>
          <Link href="/admin/bank-settings">
            <button className="px-4 py-2 font-medium text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2">
              <CreditCard className="h-4 w-4" />
              Configurações Bancárias
            </button>
          </Link>
          <Link href="/admin/products-management">
            <button className="px-4 py-2 font-medium text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2">
              <Package className="h-4 w-4" />
              Gerenciar Produtos
            </button>
          </Link>
          <Link href="/admin/beta-testers">
            <button className="px-4 py-2 font-medium text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2">
              <TestTube className="h-4 w-4" />
              Beta Testers
            </button>
          </Link>
          <Link href="/admin/qrcodes">
            <button className="px-4 py-2 font-medium text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2">
              <QrCode className="h-4 w-4" />
              Gerar QR Codes
            </button>
          </Link>
        </div>

{activeTab === "dashboard" && <AdminStats />}
        {activeTab === "users" && <UsersManagement />}
        {activeTab === "notifications" && <AdminNotifications />}
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/beta-testing-context.tsx" isMerged="true"
'use client'

import type React from 'react'
import { createContext, useContext, useEffect, useState } from 'react'

interface BetaTester {
  id: string
  email: string
  name: string
  joinedDate: Date
  status: 'active' | 'pending' | 'inactive'
  feedback: string[]
  testAreas: string[]
}

interface BetaTestingContextType {
  betaTesters: BetaTester[]
  addBetaTester: (tester: Omit<BetaTester, 'id' | 'joinedDate' | 'feedback' | 'testAreas'>) => string
  removeBetaTester: (id: string) => void
  addFeedback: (testerId: string, feedback: string) => void
  activateBetaTester: (id: string) => void
  getBetaTesters: () => BetaTester[]
  getTesterCount: () => number
  generateInviteLink: () => string
}

const BetaTestingContext = createContext<BetaTestingContextType | undefined>(undefined)

export function BetaTestingProvider({ children }: { children: React.ReactNode }) {
  const [betaTesters, setBetaTesters] = useState<BetaTester[]>([])

useEffect(() => {
    const stored = localStorage.getItem('killmay_beta_testers')
    if (stored) {
      try {
        const parsed = JSON.parse(stored)
        setBetaTesters(parsed)
      } catch (error) {
        console.error('[v0] Erro ao carregar beta testers:', error)
      }
    }
  }, [])

useEffect(() => {
    localStorage.setItem('killmay_beta_testers', JSON.stringify(betaTesters))
  }, [betaTesters])

const addBetaTester = (tester: Omit<BetaTester, 'id' | 'joinedDate' | 'feedback' | 'testAreas'>) => {
    const id = `tester-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
    const newTester: BetaTester = {
      ...tester,
      id,
      joinedDate: new Date(),
      feedback: [],
      testAreas: [],
    }
    setBetaTesters((prev) => [...prev, newTester])
    return id
  }

const removeBetaTester = (id: string) => {
    setBetaTesters((prev) => prev.filter((t) => t.id !== id))
  }

const addFeedback = (testerId: string, feedback: string) => {
    setBetaTesters((prev) =>
      prev.map((t) =>
        t.id === testerId ? { ...t, feedback: [...t.feedback, feedback] } : t
      )
    )
  }

const activateBetaTester = (id: string) => {
    setBetaTesters((prev) =>
      prev.map((t) =>
        t.id === id ? { ...t, status: 'active' as const } : t
      )
    )
  }

const getBetaTesters = () => betaTesters

const getTesterCount = () => betaTesters.length

const generateInviteLink = () => {
    const baseUrl = typeof window !== 'undefined' ? window.location.origin : ''
    return `${baseUrl}/beta-testing?ref=${Math.random().toString(36).substr(2, 8)}`
  }

return (
    <BetaTestingContext.Provider
      value={{
        betaTesters,
        addBetaTester,
        removeBetaTester,
        addFeedback,
        activateBetaTester,
        getBetaTesters,
        getTesterCount,
        generateInviteLink,
      }}
    >
      {children}
    </BetaTestingContext.Provider>
  )
}

export function useBetaTesting() {
  const context = useContext(BetaTestingContext)
  if (context === undefined) {
    throw new Error('useBetaTesting deve ser usado dentro de BetaTestingProvider')
  }
  return context
}
[V0_FILE]typescriptreact:file="app/beta-testing/page.tsx" isMerged="true"
'use client'

import Image from 'next/image'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { useBetaTesting } from '@/app/beta-testing-context'
import { useAuth } from '@/app/auth-context'
import { useState, useEffect } from 'react'
import { CheckCircle2, Zap, Users, Globe } from 'lucide-react'

export default function BetaTestingPage() {
  const { addBetaTester, getTesterCount, generateInviteLink } = useBetaTesting()
  const { user } = useAuth()
  const [email, setEmail] = useState('')
  const [name, setName] = useState('')
  const [submitted, setSubmitted] = useState(false)
  const testerCount = getTesterCount()

// Carregar dados do QR code se existirem
  useEffect(() => {
    const qrName = localStorage.getItem('qr_tester_name')
    const qrEmail = localStorage.getItem('qr_tester_email')
    
    if (qrName && qrEmail) {
      setName(qrName)
      setEmail(qrEmail)
      localStorage.removeItem('qr_tester_name')
      localStorage.removeItem('qr_tester_email')
    }
  }, [])

const handleJoinBeta = (e: React.FormEvent) => {
    e.preventDefault()
    if (!email || !name) {
      alert('Por favor, preencha todos os campos')
      return
    }

addBetaTester({
      email,
      name,
      status: 'pending',
    })

setSubmitted(true)
    setEmail('')
    setName('')

setTimeout(() => setSubmitted(false), 3000)
  }

const inviteLink = generateInviteLink()

return (
    <div className="min-h-screen bg-gradient-to-b from-emerald-600 to-emerald-900 text-white">
      {/* Header */}
      <header className="border-b border-emerald-500/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
          <Link href="/" className="flex items-center space-x-2">
            <Image
              src="/killmay-logo.png"
              alt="KILLMAY Logo"
              width={40}
              height={40}
              className="w-10 h-10"
            />
            <span className="text-2xl font-bold">KILLMAY</span>
          </Link>
          <Link href={user ? '/dashboard' : '/login'}>
            <Button variant="outline" className="border-white text-white hover:bg-white/10">
              {user ? 'Ir para Dashboard' : 'Fazer Login'}
            </Button>
          </Link>
        </div>
      </header>

{/* Hero Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          <div>
            <div className="inline-block bg-emerald-500/20 rounded-full px-4 py-2 mb-6">
              <span className="text-emerald-100 text-sm font-semibold">Beta Testing</span>
            </div>
            <h1 className="text-5xl md:text-6xl font-bold mb-6 text-white">
              Seja um Beta Tester do KILLMAY
            </h1>
            <p className="text-xl text-emerald-100 mb-8">
              Junte-se a uma comunidade de utilizadores que estão ajudando a moldar o futuro da plataforma KILLMAY. Sua opinião é valiosa!
            </p>
            <div className="flex gap-4">
              <Button size="lg" className="bg-white text-emerald-600 hover:bg-gray-100">
                Aderir ao Beta
              </Button>
              <Link href="/">
                <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
                  Ver Plataforma
                </Button>
              </Link>
            </div>
          </div>

<div className="relative">
            <div className="bg-emerald-500/10 rounded-2xl p-8 border border-emerald-500/30">
              <div className="space-y-4">
                <div className="flex items-center gap-3 text-emerald-100">
                  <Zap className="w-5 h-5" />
                  <span>Acesso antecipado a todas as funcionalidades</span>
                </div>
                <div className="flex items-center gap-3 text-emerald-100">
                  <Users className="w-5 h-5" />
                  <span>Comunidade exclusiva de {testerCount} testers</span>
                </div>
                <div className="flex items-center gap-3 text-emerald-100">
                  <Globe className="w-5 h-5" />
                  <span>Sua voz influencia o desenvolvimento</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Formulário de Inscrição */}
      <section className="max-w-2xl mx-auto px-4 sm:px-6 py-20">
        <Card className="bg-white/10 border-white/20">
          <CardHeader>
            <CardTitle className="text-white text-2xl">Junte-se ao Beta Testing</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleJoinBeta} className="space-y-6">
              <div>
                <label className="block text-white mb-2 font-medium">Nome Completo</label>
                <Input
                  type="text"
                  placeholder="Seu nome"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50"
                  required
                />
              </div>
              <div>
                <label className="block text-white mb-2 font-medium">Email</label>
                <Input
                  type="email"
                  placeholder="seu@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50"
                  required
                />
              </div>

{submitted && (
                <div className="bg-emerald-500/20 border border-emerald-400 rounded-lg p-4 flex items-center gap-3 text-white">
                  <CheckCircle2 className="w-5 h-5 text-emerald-300" />
                  <span>Obrigado! Você foi adicionado como beta tester.</span>
                </div>
              )}

<Button
                type="submit"
                className="w-full bg-white text-emerald-600 hover:bg-gray-100 py-6 text-lg font-semibold"
              >
                Aderir ao Beta Testing
              </Button>

<p className="text-white/70 text-sm text-center">
                Partilhe este link com amigos:{' '}
                <code className="bg-white/10 px-2 py-1 rounded text-xs break-all">{inviteLink}</code>
              </p>
            </form>
          </CardContent>
        </Card>
      </section>

{/* Features */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <h2 className="text-4xl font-bold text-center mb-16">O que Você Vai Testar</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {[
            {
              title: 'Marketplace',
              description: 'Compra e venda de produtos com checkout completo',
            },
            {
              title: 'Rastreamento de Pedidos',
              description: 'Acompanhamento em tempo real de suas encomendas',
            },
            {
              title: 'Academia Online',
              description: 'Cursos com certificados digitais',
            },
            {
              title: 'AgroTech Dashboard',
              description: 'Dados climáticos e análise agrícola',
            },
            {
              title: 'Chat de Suporte',
              description: 'Comunicação em tempo real com equipa de suporte',
            },
            {
              title: 'Gestão de Contas',
              description: 'Perfil, pedidos, certificados e configurações',
            },
          ].map((feature, index) => (
            <Card key={index} className="bg-white/10 border-white/20 hover:bg-white/20 transition">
              <CardHeader>
                <CardTitle className="text-white text-lg">{feature.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-emerald-100">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* CTA Final */}
      <section className="max-w-4xl mx-auto px-4 sm:px-6 py-20 text-center">
        <h2 className="text-3xl font-bold mb-6">Pronto para começar?</h2>
        <p className="text-xl text-emerald-100 mb-8">
          Sua participação no beta testing é fundamental para melhorar a plataforma KILLMAY.
        </p>
        <Button size="lg" className="bg-white text-emerald-600 hover:bg-gray-100">
          Aderir ao Beta Testing Agora
        </Button>
      </section>

{/* Footer */}
      <footer className="border-t border-emerald-500/30 py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-emerald-100">
          <p>© 2024 KILLMAY. Todos os direitos reservados.</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/admin/beta-testers/page.tsx" isMerged="true"
'use client'

import { ProtectedLayout } from '@/components/protected-layout'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { useBetaTesting } from '@/app/beta-testing-context'
import { Users, Mail, CheckCircle2, Trash2, Copy } from 'lucide-react'
import { useState } from 'react'

export default function BetaTestersPage() {
  const { betaTesters, removeBetaTester, activateBetaTester, generateInviteLink, getTesterCount } = useBetaTesting()
  const [copiedLink, setCopiedLink] = useState(false)

const inviteLink = generateInviteLink()
  const activeTesterCount = betaTesters.filter((t) => t.status === 'active').length
  const pendingTesterCount = betaTesters.filter((t) => t.status === 'pending').length

const copyInviteLink = () => {
    navigator.clipboard.writeText(inviteLink)
    setCopiedLink(true)
    setTimeout(() => setCopiedLink(false), 2000)
  }

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Gerenciamento de Beta Testers</h1>
          <p className="text-muted-foreground mt-2">
            Gerencie os utilizadores que estão testando a plataforma KILLMAY
          </p>
        </div>

{/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Total de Beta Testers</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold">{getTesterCount()}</div>
              <p className="text-xs text-muted-foreground mt-1">Utilizadores inscritos</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Ativos</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold text-emerald-600">{activeTesterCount}</div>
              <p className="text-xs text-muted-foreground mt-1">Testando ativamente</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Pendentes</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold text-yellow-600">{pendingTesterCount}</div>
              <p className="text-xs text-muted-foreground mt-1">A aguardar ativação</p>
            </CardContent>
          </Card>
        </div>

{/* Invite Link Section */}
        <Card>
          <CardHeader>
            <CardTitle>Link de Convite para Beta Testing</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex gap-2 items-center">
              <input
                type="text"
                value={inviteLink}
                readOnly
                className="flex-1 px-3 py-2 bg-muted border border-border rounded-lg font-mono text-sm"
              />
              <Button
                onClick={copyInviteLink}
                variant="outline"
                className="gap-2"
              >
                <Copy className="w-4 h-4" />
                {copiedLink ? 'Copiado!' : 'Copiar'}
              </Button>
            </div>
            <p className="text-sm text-muted-foreground mt-2">
              Partilhe este link para convidar mais beta testers
            </p>
          </CardContent>
        </Card>

{/* Beta Testers List */}
        <div>
          <h2 className="text-2xl font-bold mb-4">Lista de Beta Testers</h2>
          {betaTesters.length === 0 ? (
            <Card>
              <CardContent className="py-12 text-center">
                <Users className="w-12 h-12 text-muted-foreground/30 mx-auto mb-4" />
                <p className="text-muted-foreground">Nenhum beta tester registado ainda</p>
                <p className="text-sm text-muted-foreground mt-2">
                  Partilhe o link de convite para começar a receber inscrições
                </p>
              </CardContent>
            </Card>
          ) : (
            <div className="grid grid-cols-1 gap-4">
              {betaTesters.map((tester) => (
                <Card key={tester.id} className="hover:border-foreground/50 transition">
                  <CardContent className="py-4">
                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-semibold text-lg">{tester.name}</h3>
                          <span
                            className={`px-2 py-1 rounded text-xs font-medium ${
                              tester.status === 'active'
                                ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'
                                : tester.status === 'pending'
                                  ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
                                  : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'
                            }`}
                          >
                            {tester.status === 'active'
                              ? 'Ativo'
                              : tester.status === 'pending'
                                ? 'Pendente'
                                : 'Inativo'}
                          </span>
                        </div>
                        <div className="flex items-center gap-2 text-muted-foreground mb-2">
                          <Mail className="w-4 h-4" />
                          {tester.email}
                        </div>
                        <p className="text-sm text-muted-foreground">
                          Inscrito em: {new Date(tester.joinedDate).toLocaleDateString('pt-PT')}
                        </p>
                        {tester.feedback.length > 0 && (
                          <p className="text-sm text-blue-600 dark:text-blue-400 mt-2">
                            {tester.feedback.length} feedback(s) recebido(s)
                          </p>
                        )}
                      </div>
                      <div className="flex gap-2 w-full md:w-auto">
                        {tester.status === 'pending' && (
                          <Button
                            onClick={() => activateBetaTester(tester.id)}
                            className="flex-1 md:flex-none gap-2 bg-emerald-600 hover:bg-emerald-700 text-white"
                          >
                            <CheckCircle2 className="w-4 h-4" />
                            Ativar
                          </Button>
                        )}
                        <Button
                          onClick={() => removeBetaTester(tester.id)}
                          variant="destructive"
                          className="flex-1 md:flex-none gap-2"
                        >
                          <Trash2 className="w-4 h-4" />
                          Remover
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]markdown:file="DEPLOYMENT_GUIDE.md" isMerged="true"
# Guia de Deployment do KILLMAY no Vercel

## Passo 1: Preparar o Projeto

O projeto já está totalmente pronto para deploy no Vercel. Certifique-se de que:

- Você tem o código no GitHub
- Tem uma conta no Vercel
- Tem uma conta no GitHub

## Passo 2: Conectar GitHub ao Vercel

1. Vá para https://vercel.com
2. Clique em "Sign Up" ou "Login"
3. Escolha "GitHub" como opção de autenticação
4. Autorize o Vercel a acessar seus repositórios

## Passo 3: Importar o Projeto

1. Clique em "Add New" → "Project"
2. Selecione o repositório KILLMAY do GitHub
3. Clique em "Import"

## Passo 4: Configurar o Deployment

Na tela de configuração:

- **Framework Preset**: Next.js (deve detectar automaticamente)
- **Root Directory**: ./ (deixe o padrão)
- **Build Command**: `npm run build` ou `bun run build`
- **Output Directory**: .next (deixe o padrão)

Clique em "Deploy"

## Passo 5: Esperar o Deploy

Vercel vai fazer:
1. Clone do repositório
2. Instalação de dependências
3. Build do projeto
4. Deploy em servidor global

Quando terminar, você receberá um URL como: `https://seu-projeto.vercel.app`

## Passo 6: Configurar Domínio Personalizado (Opcional)

1. Em Vercel, vá a "Settings" → "Domains"
2. Clique em "Add"
3. Digite seu domínio (ex: killmay.ao)
4. Configure o DNS no seu registador de domínio

## Deploy Contínuo

Após o primeiro deploy:
- Cada push ao GitHub faz deploy automático
- Vercel cria preview URLs para cada branch
- Pull requests têm URLs de preview

## Links Úteis

- **Página de Beta Testing**: `/beta-testing`
- **Painel Admin**: `/admin` (após fazer login)
- **Gerenciar Beta Testers**: `/admin/beta-testers`

## Troubleshooting

### Build Falhou?

1. Verifique se há erros de TypeScript: `npm run type-check`
2. Verifique se há imports faltando
3. Verifique se todas as variáveis de ambiente estão definidas

### App não carrega?

1. Verifique o console do navegador (F12)
2. Verifique os logs do Vercel em "Deployments"
3. Teste localmente: `npm run dev`

## Variáveis de Ambiente

Se precisar adicionar variáveis de ambiente:

1. Em Vercel, vá a "Settings" → "Environment Variables"
2. Adicione as variáveis necessárias
3. Re-deploy a aplicação

## Próximos Passos

1. Publicar a página de beta testing
2. Convidar utilizadores para teste
3. Recolher feedback
4. Implementar melhorias
5. Lançamento oficial

---

**Precisa de ajuda?** Contacte support@killmay.ao
[V0_FILE]typescriptreact:file="app/(protected)/feedback/page.tsx" isMerged="true"
'use client'

import { ProtectedLayout } from '@/components/protected-layout'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { useBetaTesting } from '@/app/beta-testing-context'
import { useAuth } from '@/app/auth-context'
import { useState } from 'react'
import { MessageSquare, Send, Star } from 'lucide-react'

export default function FeedbackPage() {
  const { addFeedback, betaTesters } = useBetaTesting()
  const { user } = useAuth()
  const [feedback, setFeedback] = useState('')
  const [category, setCategory] = useState('geral')
  const [rating, setRating] = useState(5)
  const [submitted, setSubmitted] = useState(false)

const currentTester = betaTesters.find((t) => t.email === user?.email)

const handleSubmitFeedback = (e: React.FormEvent) => {
    e.preventDefault()
    if (!feedback.trim()) {
      alert('Por favor, escreva algum feedback')
      return
    }

if (!currentTester) {
      alert('Você não está registado como beta tester')
      return
    }

const feedbackMessage = `[${new Date().toLocaleDateString('pt-PT')}] Categoria: ${category} | Rating: ${rating}/5 | ${feedback}`
    addFeedback(currentTester.id, feedbackMessage)

setFeedback('')
    setRating(5)
    setCategory('geral')
    setSubmitted(true)

setTimeout(() => setSubmitted(false), 3000)
  }

return (
    <ProtectedLayout>
      <div className="max-w-4xl mx-auto space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Enviar Feedback</h1>
          <p className="text-muted-foreground mt-2">
            Sua opinião é importante para melhorar o KILLMAY. Obrigado por estar testando!
          </p>
        </div>

{!currentTester ? (
          <Card className="border-yellow-500/50 bg-yellow-500/10">
            <CardContent className="py-6">
              <p className="text-yellow-800 dark:text-yellow-200">
                Você não está registado como beta tester. Para enviar feedback, por favor junte-se ao programa de beta testing em /beta-testing
              </p>
            </CardContent>
          </Card>
        ) : (
          <>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <MessageSquare className="w-5 h-5" />
                  Enviar Feedback
                </CardTitle>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleSubmitFeedback} className="space-y-6">
                  <div>
                    <label className="block text-sm font-medium mb-2">Categoria do Feedback</label>
                    <select
                      value={category}
                      onChange={(e) => setCategory(e.target.value)}
                      className="w-full px-3 py-2 border border-border rounded-lg bg-background"
                    >
                      <option value="geral">Geral</option>
                      <option value="marketplace">Marketplace</option>
                      <option value="academia">Academia</option>
                      <option value="agrotech">AgroTech</option>
                      <option value="suporte">Suporte Técnico</option>
                      <option value="performance">Performance</option>
                      <option value="ui-ux">Interface (UI/UX)</option>
                      <option value="bug">Reportar Bug</option>
                    </select>
                  </div>

<div>
                    <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                      <Star className="w-4 h-4" />
                      Avaliação Geral (1-5)
                    </label>
                    <div className="flex gap-2">
                      {[1, 2, 3, 4, 5].map((star) => (
                        <button
                          key={star}
                          onClick={() => setRating(star)}
                          className={`p-2 rounded-lg border transition ${
                            rating >= star
                              ? 'bg-yellow-500 border-yellow-500 text-white'
                              : 'border-border text-foreground/50 hover:border-foreground/50'
                          }`}
                        >
                          <Star className="w-5 h-5" fill="currentColor" />
                        </button>
                      ))}
                    </div>
                  </div>

<div>
                    <label className="block text-sm font-medium mb-2">Seu Feedback</label>
                    <textarea
                      value={feedback}
                      onChange={(e) => setFeedback(e.target.value)}
                      placeholder="Descreva sua experiência, sugestões de melhorias, bugs encontrados, etc."
                      rows={6}
                      className="w-full px-3 py-2 border border-border rounded-lg bg-background resize-none focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    />
                    <p className="text-xs text-muted-foreground mt-2">
                      {feedback.length}/500 caracteres
                    </p>
                  </div>

{submitted && (
                    <div className="bg-emerald-500/20 border border-emerald-500 rounded-lg p-4 text-emerald-700 dark:text-emerald-300">
                      Obrigado! Seu feedback foi registado com sucesso.
                    </div>
                  )}

<Button
                    type="submit"
                    className="w-full gap-2 bg-emerald-600 hover:bg-emerald-700 text-white"
                  >
                    <Send className="w-4 h-4" />
                    Enviar Feedback
                  </Button>
                </form>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Seu Progresso</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div>
                    <p className="text-sm text-muted-foreground">Status</p>
                    <p className="font-semibold capitalize">{currentTester.status}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Data de Inscrição</p>
                    <p className="font-semibold">{new Date(currentTester.joinedDate).toLocaleDateString('pt-PT')}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Feedbacks Enviados</p>
                    <p className="font-semibold">{currentTester.feedback.length}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </>
        )}
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  swcMinify: true,
}

export default nextConfig
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from 'lucide-react'
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'

import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = 'label',
  buttonVariant = 'ghost',
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>['variant']
}) {
  const defaultClassNames = getDefaultClassNames()

return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className,
      )}
      captionLayout={captionLayout}
      formatters={{
        formatMonthDropdown: (date) =>
          date.toLocaleString('default', { month: 'short' }),
        ...formatters,
      }}
      classNames={{
        root: cn('w-fit', defaultClassNames.root),
        months: cn(
          'flex gap-4 flex-col md:flex-row relative',
          defaultClassNames.months,
        ),
        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
        nav: cn(
          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
          defaultClassNames.nav,
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_previous,
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_next,
        ),
        month_caption: cn(
          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
          defaultClassNames.month_caption,
        ),
        dropdowns: cn(
          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
          defaultClassNames.dropdowns,
        ),
        dropdown_root: cn(
          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
          defaultClassNames.dropdown_root,
        ),
        dropdown: cn(
          'absolute bg-popover inset-0 opacity-0',
          defaultClassNames.dropdown,
        ),
        caption_label: cn(
          'select-none font-medium',
          captionLayout === 'label'
            ? 'text-sm'
            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
          defaultClassNames.caption_label,
        ),
        table: 'w-full border-collapse',
        weekdays: cn('flex', defaultClassNames.weekdays),
        weekday: cn(
          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
          defaultClassNames.weekday,
        ),
        week: cn('flex w-full mt-2', defaultClassNames.week),
        week_number_header: cn(
          'select-none w-(--cell-size)',
          defaultClassNames.week_number_header,
        ),
        week_number: cn(
          'text-[0.8rem] select-none text-muted-foreground',
          defaultClassNames.week_number,
        ),
        day: cn(
          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
          defaultClassNames.day,
        ),
        range_start: cn(
          'rounded-l-md bg-accent',
          defaultClassNames.range_start,
        ),
        range_middle: cn('rounded-none', defaultClassNames.range_middle),
        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
        today: cn(
          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
          defaultClassNames.today,
        ),
        outside: cn(
          'text-muted-foreground aria-selected:text-muted-foreground',
          defaultClassNames.outside,
        ),
        disabled: cn(
          'text-muted-foreground opacity-50',
          defaultClassNames.disabled,
        ),
        hidden: cn('invisible', defaultClassNames.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => {
          return (
            <div
              data-slot="calendar"
              ref={rootRef}
              className={cn(className)}
              {...props}
            />
          )
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === 'left') {
            return (
              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
            )
          }

if (orientation === 'right') {
            return (
              <ChevronRightIcon
                className={cn('size-4', className)}
                {...props}
              />
            )
          }

return (
            <ChevronDownIcon className={cn('size-4', className)} {...props} />
          )
        },
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
              <div className="flex size-(--cell-size) items-center justify-center text-center">
                {children}
              </div>
            </td>
          )
        },
        ...components,
      }}
      {...props}
    />
  )
}

function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const defaultClassNames = getDefaultClassNames()

const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toLocaleDateString()}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
        defaultClassNames.day,
        className,
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
[V0_FILE]markdown:file="VERCEL_DEPLOYMENT.md" isMerged="true"
# Guia de Deployment do KILLMAY no Vercel

## Pré-requisitos
- Conta GitHub (gratuita em https://github.com)
- Conta Vercel (gratuita em https://vercel.com)

## Passo 1: Baixe o Projeto do v0

1. No v0, clique nos **3 pontos** (⋮) no topo direito
2. Selecione **"Download ZIP"**
3. Extraia a pasta em seu computador
4. Abra um terminal/CMD na pasta do projeto

## Passo 2: Crie um Repositório GitHub

1. Vá para https://github.com/new
2. Crie um repositório chamado "killmay"
3. **NÃO** inicialize com README, .gitignore, ou licença
4. Clique **"Create repository"**

## Passo 3: Faça Push do Código

Abra o terminal na pasta do projeto e execute:

```bash
git init
git add .
git commit -m "Initial commit - KILLMAY platform"
git branch -M main
git remote add origin https://github.com/SEU-USUARIO/killmay.git
git push -u origin main
```

**Substitua `SEU-USUARIO` pelo seu nome de usuário do GitHub**

Se pedir autenticação, use:
- Username: seu email do GitHub
- Password: gere um token em https://github.com/settings/tokens

## Passo 4: Deploy no Vercel

1. Vá para https://vercel.com/new
2. Clique **"Continue with GitHub"**
3. Autorize Vercel a acessar seus repositórios
4. Selecione o repositório "killmay"
5. Clique **"Import"**
6. Na página de configuração:
   - **Project Name**: killmay
   - **Framework**: Next.js
   - **Environment Variables**: deixe em branco (opcional)
7. Clique **"Deploy"**

## Esperando o Deploy

- O build pode levar 2-5 minutos
- Você verá uma barra de progresso
- Quando terminar, clique em "Visit" para abrir o app

## Seu App Está Online!

A URL será algo como: `https://killmay-abc123.vercel.app`

Partilhe este link com seus beta testers!

## Se Houver Erro no Build

1. Vá em **Deployments** no Vercel
2. Clique no deploy com erro (vermelho)
3. Clique em **"Build Logs"**
4. Copie a mensagem de erro

## Próximos Passos (Opcional)

### Adicionar Domínio Personalizado
1. Em Vercel, vá a **Settings > Domains**
2. Adicione seu domínio (ex: killmay.com)
3. Configure o DNS conforme as instruções

### Atualizações Automáticas
- Toda vez que fizer push para o GitHub, Vercel fará deploy automaticamente
- Não precisa fazer mais nada!

## Suporte

Se tiver problemas, verifique:
- Seu repositório GitHub está público ou privado?
- A autenticação do Git funcionou?
- Há mensagens de erro nos Build Logs do Vercel?
[V0_FILE]markdown:file="PUBLICAR_AGORA.md" isMerged="true"
# Como Publicar o KILLMAY Gratuitamente em 2 Minutos

## Opção 1: Publicar Diretamente (Mais Fácil)

1. **No v0**, clique nos **3 pontos** (⋮) no topo direito
2. Clique em **"Publish"** ou **"Deploy to Vercel"**
3. Selecione sua conta GitHub (ou crie uma gratuitamente)
4. Clique **"Deploy"**
5. Aguarde 2-3 minutos
6. Você receberá um link: `seu-projeto.vercel.app`

## Opção 2: Via GitHub (Se Preferir Controlo)

1. Faça **Download ZIP** do projeto no v0
2. Crie um repositório no GitHub (https://github.com/new)
3. Faça upload dos arquivos
4. Vá para Vercel.com e conecte o repositório
5. Clique Deploy
6. Pronto!

## Credenciais de Admin para Testes

**Email:** admin@killmay.com
**Senha:** qualquer coisa (o sistema de demo aceita)

**O que você pode fazer como admin:**
- Ver todos os pedidos
- Confirmar pagamentos
- Gerenciar utilizadores
- Ver analytics e relatórios
- Gerenciar produtos e preços
- Ver feedback dos beta testers

## Link para Compartilhar com Utilizadores

Depois do deploy, você receberá um link tipo:
```
https://seu-projeto.vercel.app
```

**Partilhe este link com os utilizadores para:**
- Criar conta como cliente
- Testar marketplace
- Fazer pedidos
- Enviar feedback em `/feedback`

## Próximas Ações

1. Publique o projeto agora
2. Envie o link para os beta testers
3. Os utilizadores vão a `/beta-testing` para se inscrever
4. Você vê todo o feedback em `/admin/beta-testers`

Está tudo pronto para publicação!
[V0_FILE]markdown:file="CREDENCIAIS_TESTE.md" isMerged="true"
# Credenciais de Teste - KILLMAY

## Conta de Administrador

**Email:** admin@killmay.com
**Senha:** admin123 (ou qualquer senha, o sistema demo aceita)
**Acesso:** /admin

### O que Você Pode Fazer como Admin:

1. **Dashboard Principal** (`/admin`)
   - Ver estatísticas gerais
   - Gestão de utilizadores
   - Ver notificações

2. **Painel de Pagamentos** (`/admin/payments`)
   - Confirmar pagamentos recebidos
   - Ver status das transações
   - Rastrear dinheiro recebido

3. **Configurações Bancárias** (`/admin/bank-settings`)
   - Adicionar suas coordenadas bancárias
   - Configurar conta para receber pagamentos

4. **Gerenciar Produtos** (`/admin/products-management`)
   - Adicionar novos produtos
   - Editar preços
   - Gerenciar categorias
   - Eliminar produtos

5. **Analytics Avançado** (`/admin/analytics`)
   - Gráficos de vendas
   - Receita total
   - Produtos mais vendidos
   - Clientes mais ativos

6. **Beta Testers** (`/admin/beta-testers`)
   - Ver utilizadores inscritos para teste
   - Ver feedback recebido
   - Gerar link de convite

7. **Relatórios** (`/admin/reports`)
   - Exportar dados em PDF/Excel
   - Relatórios de vendas
   - Histórico de transações

## Contas de Cliente para Teste

**Email:** user@killmay.com
**Senha:** user123

Ou crie sua própria conta em `/signup`

## O que os Utilizadores Podem Testar

1. **Marketplace** - Navegar, comprar produtos
2. **Checkout** - Múltiplos métodos de pagamento
3. **Rastreamento** - Ver status de pedidos
4. **Wishlist** - Guardar produtos favoritos
5. **Academia** - Completar cursos e gerar certificados
6. **AgroTech** - Ver dados climáticos
7. **Suporte** - Chat com admin
8. **Feedback** - Enviar opiniões via `/feedback`

## Links Principais

- **Home:** `/`
- **Marketplace:** `/marketplace`
- **Painel Admin:** `/admin`
- **Beta Testing:** `/beta-testing`
- **Feedback:** `/feedback`
- **Chat Suporte:** `/support/chat`

Tudo pronto para testes!
[V0_FILE]typescriptreact:file="app/welcome/page.tsx" isMerged="true"
'use client'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import Link from 'next/link'
import { CheckCircle2, Zap, Users, MessageSquare, Award, ShoppingCart } from 'lucide-react'

export default function WelcomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white">
      {/* Header */}
      <header className="border-b border-slate-700">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <h1 className="text-3xl font-bold text-emerald-500">KILLMAY</h1>
          <p className="text-slate-300 mt-2">Plataforma Integrada de Comércio e Serviços</p>
        </div>
      </header>

{/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 py-12">
        {/* Welcome Section */}
        <div className="text-center mb-16">
          <h2 className="text-5xl font-bold mb-4">Bem-vindo ao KILLMAY Beta</h2>
          <p className="text-xl text-slate-300 max-w-2xl mx-auto">
            Você foi convidado a testar a plataforma KILLMAY. Explore, teste e envie seu feedback para ajudar-nos a melhorar.
          </p>
        </div>

{/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
          <Card className="bg-slate-800 border-slate-700 hover:border-emerald-500 transition">
            <CardHeader>
              <ShoppingCart className="w-8 h-8 text-emerald-500 mb-2" />
              <CardTitle className="text-white">Marketplace</CardTitle>
            </CardHeader>
            <CardContent className="text-slate-300">
              Navegue por produtos, adicione ao carrinho, faça checkout e rastreie sua encomenda.
            </CardContent>
          </Card>

<Card className="bg-slate-800 border-slate-700 hover:border-emerald-500 transition">
            <CardHeader>
              <Award className="w-8 h-8 text-emerald-500 mb-2" />
              <CardTitle className="text-white">Academia</CardTitle>
            </CardHeader>
            <CardContent className="text-slate-300">
              Complete cursos online e receba certificados profissionais.
            </CardContent>
          </Card>

<Card className="bg-slate-800 border-slate-700 hover:border-emerald-500 transition">
            <CardHeader>
              <Zap className="w-8 h-8 text-emerald-500 mb-2" />
              <CardTitle className="text-white">AgroTech</CardTitle>
            </CardHeader>
            <CardContent className="text-slate-300">
              Acesse dados climáticos e dashboards agrícolas em tempo real.
            </CardContent>
          </Card>

<Card className="bg-slate-800 border-slate-700 hover:border-emerald-500 transition">
            <CardHeader>
              <MessageSquare className="w-8 h-8 text-emerald-500 mb-2" />
              <CardTitle className="text-white">Suporte 24/7</CardTitle>
            </CardHeader>
            <CardContent className="text-slate-300">
              Chat em tempo real com nossa equipe de suporte disponível.
            </CardContent>
          </Card>

<Card className="bg-slate-800 border-slate-700 hover:border-emerald-500 transition">
            <CardHeader>
              <Users className="w-8 h-8 text-emerald-500 mb-2" />
              <CardTitle className="text-white">Comunidade</CardTitle>
            </CardHeader>
            <CardContent className="text-slate-300">
              Conecte-se com outros utilizadores e faça parte da revolução.
            </CardContent>
          </Card>

<Card className="bg-slate-800 border-slate-700 hover:border-emerald-500 transition">
            <CardHeader>
              <CheckCircle2 className="w-8 h-8 text-emerald-500 mb-2" />
              <CardTitle className="text-white">Seu Feedback</CardTitle>
            </CardHeader>
            <CardContent className="text-slate-300">
              Sua opinião é crucial. Compartilhe feedback e ajude a melhorar.
            </CardContent>
          </Card>
        </div>

{/* CTA Buttons */}
        <div className="bg-slate-800 border border-slate-700 rounded-lg p-8 text-center mb-16">
          <h3 className="text-2xl font-bold mb-6">Pronto para Começar?</h3>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/signup">
              <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 w-full sm:w-auto">
                Criar Conta
              </Button>
            </Link>
            <Link href="/login">
              <Button size="lg" variant="outline" className="border-emerald-500 text-emerald-400 hover:bg-slate-700 w-full sm:w-auto">
                Fazer Login
              </Button>
            </Link>
            <Link href="/beta-testing">
              <Button size="lg" variant="outline" className="border-slate-600 text-slate-300 hover:bg-slate-700 w-full sm:w-auto">
                Info Beta
              </Button>
            </Link>
          </div>
        </div>

{/* Instructions */}
        <Card className="bg-slate-800 border-slate-700">
          <CardHeader>
            <CardTitle className="text-white">Como Participar nos Testes</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4 text-slate-300">
            <div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-8 w-8 rounded-md bg-emerald-600 text-white font-bold">1</div>
              </div>
              <div>
                <h4 className="font-semibold text-white">Crie uma Conta</h4>
                <p>Clique em "Criar Conta" e preencha seus dados.</p>
              </div>
            </div>

<div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-8 w-8 rounded-md bg-emerald-600 text-white font-bold">2</div>
              </div>
              <div>
                <h4 className="font-semibold text-white">Explore a Plataforma</h4>
                <p>Teste todas as funcionalidades: marketplace, academia, suporte, etc.</p>
              </div>
            </div>

<div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-8 w-8 rounded-md bg-emerald-600 text-white font-bold">3</div>
              </div>
              <div>
                <h4 className="font-semibold text-white">Envie Feedback</h4>
                <p>Acesse "/feedback" e partilhe sua opinião, sugestões e problemas encontrados.</p>
              </div>
            </div>

<div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-8 w-8 rounded-md bg-emerald-600 text-white font-bold">4</div>
              </div>
              <div>
                <h4 className="font-semibold text-white">Use o Chat de Suporte</h4>
                <p>Tem dúvidas? Clique no widget de chat no canto inferior direito.</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Footer Info */}
        <div className="mt-12 text-center text-slate-400">
          <p>Obrigado por ser parte da jornada KILLMAY!</p>
          <p className="mt-2 text-sm">Este é um ambiente de teste. Todos os dados são apenas para demonstração.</p>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]markdown:file="PUBLICAR_E_TESTAR.md" isMerged="true"
# KILLMAY - Publicação e Testes com Utilizadores

## Resumo Executivo

O KILLMAY está **100% pronto para publicação gratuita** no Vercel. Você pode publicar em 2 minutos e começar a recolher feedback de 11-50 utilizadores.

---

## 1. PUBLICAR EM 2 MINUTOS

### Método Recomendado (Mais Fácil)

1. **No v0**, clique nos **3 pontos** (⋮) no topo direito
2. Clique em **"Publish"** ou **"Deploy to Vercel"**
3. Escolha sua conta GitHub
4. Clique **"Deploy"**
5. **Pronto!** Você receberá um link em 2-3 minutos

### Link Gerado
Após o deploy, você receberá:
```
https://seu-projeto.vercel.app
```

**Este é o link que você vai partilhar com os utilizadores.**

---

## 2. CREDENCIAIS DE ADMIN PARA VOCÊ

**Email:** `admin@killmay.com`
**Senha:** `admin123` (ou qualquer coisa)

### Acesso Admin
- Dashboard: `/admin`
- Pagamentos: `/admin/payments`
- Gerenciar Produtos: `/admin/products-management`
- Beta Testers: `/admin/beta-testers`
- Analytics: `/admin/analytics`
- Relatórios: `/admin/reports`

---

## 3. COMO PARTILHAR COM UTILIZADORES

### Opção A: Partilha Direta

Envie este texto aos utilizadores:

```
Você está convidado para testar o KILLMAY!

Link: https://seu-projeto.vercel.app

Instruções:
1. Clique no link
2. Clique em "Criar Conta"
3. Explore a plataforma
4. Envie feedback em /feedback

Obrigado por participar!
```

### Opção B: Página de Bem-vindo

Os utilizadores vão automaticamente para `/welcome` com instruções completas.

---

## 4. RECOLHER FEEDBACK

### Página de Beta Testing
Utilize a página dedicada: `/beta-testing`
- Formulário de inscrição
- Link de convite partilhável
- Sistema de feedback automático

### Painel de Admin para Ver Feedback
Vá a `/admin/beta-testers` para:
- Ver todos os inscritos
- Ler feedback recebido
- Aprovar/remover testers
- Gerar novos links de convite

### Página de Feedback dos Utilizadores
Os utilizadores acessam `/feedback` para:
- Avaliar a plataforma (1-5 estrelas)
- Enviar comentários por categoria
- Descrever problemas encontrados

---

## 5. O QUE OS UTILIZADORES PODEM TESTAR

✓ Marketplace (Compras, Checkout)
✓ Rastreamento de Pedidos
✓ Wishlist/Favoritos
✓ Academia (Cursos, Certificados)
✓ AgroTech (Dados Climáticos)
✓ Suporte (Chat 24/7)
✓ Sistema de Pagamentos
✓ Gestão de Conta

---

## 6. WORKFLOW COMPLETO

```
1. VOCÊ PUBLICA
   ↓
2. VOCÊ COMPARTILHA LINK COM UTILIZADORES
   ↓
3. UTILIZADORES CRIAM CONTA
   ↓
4. UTILIZADORES EXPLORAM A PLATAFORMA
   ↓
5. UTILIZADORES ENVIAM FEEDBACK (/feedback)
   ↓
6. VOCÊ LÊ FEEDBACK (/admin/beta-testers)
   ↓
7. VOCÊ FAZ MELHORIAS
   ↓
8. NOVA PUBLICAÇÃO NO VERCEL
```

---

## 7. LINKS IMPORTANTES

- **Página Inicial:** `/`
- **Bem-vindo Beta:** `/welcome`
- **Beta Testing:** `/beta-testing`
- **Marketplace:** `/marketplace`
- **Feedback:** `/feedback` (protegido)
- **Admin:** `/admin`
- **Chat:** `/support/chat`

---

## 8. PRÓXIMOS PASSOS

1. ✅ Clique em "Publish" agora mesmo
2. ✅ Copie o link gerado
3. ✅ Compartilhe com 11-50 utilizadores
4. ✅ Acompanhe feedback em `/admin/beta-testers`
5. ✅ Faça melhorias com base no feedback
6. ✅ Republique quando necessário

---

## Suporte

Se encontrar problemas:
1. Verifique os "Build Logs" no Vercel
2. Revise o arquivo `CREDENCIAIS_TESTE.md`
3. Acesse `/welcome` para instruções de utilizador

**Está tudo pronto! Publique agora e comece os testes!**
[V0_FILE]typescriptreact:file="app/(protected)/admin/qrcodes/page.tsx" isMerged="true"
'use client'

import { ProtectedLayout } from '@/components/protected-layout'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { useState } from 'react'
import { Download, Copy, Plus, Trash2 } from 'lucide-react'

interface QRCode {
  id: string
  testerName: string
  email: string
  qrUrl: string
  createdAt: Date
}

export default function QRCodeGeneratorPage() {
  const [qrcodes, setQrcodes] = useState<QRCode[]>([])
  const [testerName, setTesterName] = useState('')
  const [email, setEmail] = useState('')
  const [appUrl, setAppUrl] = useState('https://killmay.vercel.app')

const generateQRCode = () => {
    if (!testerName || !email) {
      alert('Por favor preencha nome e email')
      return
    }

const qrData = `${appUrl}?tester=${encodeURIComponent(testerName)}&email=${encodeURIComponent(email)}`
    const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(qrData)}`

const newQR: QRCode = {
      id: `qr-${Date.now()}`,
      testerName,
      email,
      qrUrl: qrCodeUrl,
      createdAt: new Date(),
    }

setQrcodes([newQR, ...qrcodes])
    setTesterName('')
    setEmail('')
  }

const downloadQRCode = (qrCode: QRCode) => {
    const link = document.createElement('a')
    link.href = qrCode.qrUrl
    link.download = `QR-${qrCode.testerName}.png`
    link.click()
  }

const copyQRLink = (qrUrl: string) => {
    navigator.clipboard.writeText(qrUrl)
    alert('Link do QR Code copiado!')
  }

const deleteQRCode = (id: string) => {
    setQrcodes(qrcodes.filter(qr => qr.id !== id))
  }

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Gerar QR Codes</h1>
          <p className="text-muted-foreground mt-2">
            Crie QR codes para os beta testers escanear e aceder rapidamente à app
          </p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-1">
            <Card>
              <CardHeader>
                <CardTitle>Criar Novo QR Code</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <label className="text-sm font-medium text-foreground">Nome do Beta Tester</label>
                  <Input
                    placeholder="ex: João Silva"
                    value={testerName}
                    onChange={(e) => setTesterName(e.target.value)}
                    className="mt-1"
                  />
                </div>

<div>
                  <label className="text-sm font-medium text-foreground">Email</label>
                  <Input
                    type="email"
                    placeholder="joao@example.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="mt-1"
                  />
                </div>

<div>
                  <label className="text-sm font-medium text-foreground">URL da App</label>
                  <Input
                    placeholder="https://killmay.vercel.app"
                    value={appUrl}
                    onChange={(e) => setAppUrl(e.target.value)}
                    className="mt-1"
                  />
                </div>

<Button onClick={generateQRCode} className="w-full gap-2">
                  <Plus className="h-4 w-4" />
                  Gerar QR Code
                </Button>
              </CardContent>
            </Card>
          </div>

<div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle>QR Codes Gerados ({qrcodes.length})</CardTitle>
              </CardHeader>
              <CardContent>
                {qrcodes.length === 0 ? (
                  <p className="text-center text-muted-foreground py-8">
                    Nenhum QR code gerado ainda. Crie um novo acima!
                  </p>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {qrcodes.map((qr) => (
                      <div key={qr.id} className="border border-border rounded-lg p-4 space-y-3">
                        <div>
                          <p className="font-semibold text-foreground">{qr.testerName}</p>
                          <p className="text-sm text-muted-foreground">{qr.email}</p>
                        </div>

<div className="flex gap-2">
                          <Button
                            size="sm"
                            variant="outline"
                            className="flex-1 gap-2"
                            onClick={() => downloadQRCode(qr)}
                          >
                            <Download className="h-4 w-4" />
                            Download
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            className="flex-1 gap-2"
                            onClick={() => copyQRLink(qr.qrUrl)}
                          >
                            <Copy className="h-4 w-4" />
                            Copiar Link
                          </Button>
                          <Button
                            size="sm"
                            variant="destructive"
                            className="gap-2"
                            onClick={() => deleteQRCode(qr.id)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>

<p className="text-xs text-muted-foreground">
                          Criado: {qr.createdAt.toLocaleDateString('pt-PT')}
                        </p>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="app/qr-redirect/page.tsx" isMerged="true"
'use client'

import { useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'

export default function QRRedirectPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const testerName = searchParams.get('tester')
  const email = searchParams.get('email')

useEffect(() => {
    // Se temos dados do QR code, armazenar em localStorage e redirecionar
    if (testerName && email) {
      localStorage.setItem('qr_tester_name', testerName)
      localStorage.setItem('qr_tester_email', email)
      router.push('/beta-testing')
    } else {
      // Se não temos dados, redirecionar para a página de beta testing
      router.push('/beta-testing')
    }
  }, [testerName, email, router])

return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center space-y-4">
        <h1 className="text-2xl font-bold text-foreground">Bem-vindo ao KILLMAY!</h1>
        <p className="text-muted-foreground">Carregando...</p>
      </div>
    </div>
  )
}
[V0_FILE]markdown:file="GUIA_QRCODES.md" isMerged="true"
# Guia de QR Codes para Beta Testing - KILLMAY

## O que é?

Sistema para gerar QR codes únicos para cada beta tester. Quando um utilizador escaneia o QR code com seu telemóvel, é redirecionado automaticamente para a página de beta testing com seus dados pré-preenchidos.

## Como Usar

### Passo 1: Aceder ao Painel de Geração

1. Faça login como admin
2. Vá a `/admin` (Painel Admin)
3. Clique em "Gerar QR Codes"

### Passo 2: Criar QR Code para Beta Tester

Na página de geração de QR codes:

1. **Nome do Beta Tester**: Digite o nome (ex: "João Silva")
2. **Email**: Digite o email (ex: "joao@example.com")
3. **URL da App**: Deixe como está (https://killmay.vercel.app) ou altere se necessário
4. Clique em "Gerar QR Code"

### Passo 3: Partilhar com Beta Testers

Você pode:
- **Download**: Descarregar a imagem do QR code e enviar por email/WhatsApp
- **Copiar Link**: Copiar o link e partilhar

### Como Beta Tester Usa

1. Abre a câmera do telemóvel
2. Aponta para o QR code
3. Clica na notificação que aparece
4. É redirecionado automaticamente para a página de inscrição
5. Seus dados (nome e email) já estão preenchidos
6. Clica em "Juntar-se ao Beta Testing"

## Fluxo Completo

```
Admin Gera QR Code
    ↓
Admin Descarrega ou Copia Link
    ↓
Admin Partilha com Beta Tester (Email/WhatsApp)
    ↓
Beta Tester Escaneia QR Code
    ↓
Redireciona para app com dados pré-preenchidos
    ↓
Beta Tester Confirma inscrição
    ↓
Entra na plataforma para testar
```

## Vantagens

- Rápido e fácil para os utilizadores
- Sem necessidade de digitar dados manualmente
- Reduz erros de preenchimento
- Acompanhamento automático de quem escaneou
- Profissional e moderno

## Exemplos de Uso

### Exemplo 1: Email com QR Code

```
Assunto: Teste o KILLMAY - Seu QR Code Exclusivo

Olá João,

Obrigado por participar no beta testing do KILLMAY!

Escaneia este QR code com teu telemóvel para começar os testes:

[IMAGEM DO QR CODE]

Basta apontar a câmera para o código e clique no link que aparece.

Seus dados já estarão preenchidos. Obrigado!

- Equipa KILLMAY
```

### Exemplo 2: WhatsApp

```
Olá! 👋

Seja beta tester do KILLMAY!

Escaneia este QR code:
[IMAGEM OU LINK DO QR CODE]

Seus dados já estarão preenchidos automaticamente!

Obrigado pela participação! 🚀
```

## Questões Frequentes

**P: Quantos QR codes posso criar?**
A: Ilimitados! Crie um para cada beta tester.

**P: Posso usar o mesmo QR code múltiplas vezes?**
A: Sim, mas recomendamos criar um por pessoa para rastreamento individual.

**P: E se o beta tester não conseguir escanear?**
A: Ele pode clicar no link do QR code diretamente ou ir para `/beta-testing`.

**P: Os dados são guardados automaticamente?**
A: Sim, quando o beta tester clica "Juntar-se", os dados são guardados no sistema.121:T76e4d,[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* <CHANGE> Updated color palette for KILLMAY: dark theme with emerald accents */
  --background: oklch(0.08 0 0);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.12 0 0);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.12 0 0);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.5 0.15 146.5);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.15 0 0);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.3 0 0);
  --muted-foreground: oklch(0.7 0 0);
  --accent: oklch(0.55 0.18 156);
  --accent-foreground: oklch(0.08 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.2 0 0);
  --input: oklch(0.15 0 0);
  --ring: oklch(0.55 0.18 156);
  --chart-1: oklch(0.55 0.18 156);
  --chart-2: oklch(0.6 0.12 200);
  --chart-3: oklch(0.5 0.15 146.5);
  --chart-4: oklch(0.4 0.1 180);
  --chart-5: oklch(0.45 0.15 170);
  --radius: 0.625rem;
  --sidebar: oklch(0.12 0 0);
  --sidebar-foreground: oklch(0.98 0 0);
  --sidebar-primary: oklch(0.55 0.18 156);
  --sidebar-primary-foreground: oklch(0.08 0 0);
  --sidebar-accent: oklch(0.5 0.15 146.5);
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(0.2 0 0);
  --sidebar-ring: oklch(0.55 0.18 156);
}

.dark {
  /* ... existing code ... */
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[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": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.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"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/stats.tsx" isEdit="true" isMerged="true"
export function Stats() {
  const stats = [
    { number: "10K+", label: "Utilizadores Ativos" },
    { number: "5000+", label: "Produtos Listados" },
    { number: "200+", label: "Quintas Conectadas" },
    { number: "50+", label: "Consultores Especializados" },
  ]

return (
    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card/50 border-t border-b border-border">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {stats.map((stat) => (
            <div key={stat.label} className="text-center">
              <div className="text-3xl sm:text-4xl font-bold text-primary mb-2">{stat.number}</div>
              <div className="text-muted-foreground text-sm sm:text-base">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/pillars.tsx" isEdit="true" isMerged="true"
export function Pillars() {
  const pillars = [
    {
      title: "Marketplace",
      description: "Descubra e negocie produtos de tecnologia premium de vendedores verificados em toda Angola.",
      icon: "🛍️",
    },
    {
      title: "AgroTech e Quinta Inteligente",
      description: "Capacitando agricultores com tecnologia moderna, insights de dados e orientação de especialistas.",
      icon: "🌾",
    },
    {
      title: "Apoio Técnico",
      description: "Consultores especializados disponíveis sob demanda prontos para resolver seus desafios técnicos.",
      icon: "🔧",
    },
    {
      title: "Academia",
      description: "Aprenda novas competências com nossos programas educacionais abrangentes e certificações.",
      icon: "📚",
    },
  ]

return (
    <section id="platform" className="py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl sm:text-5xl font-bold text-foreground mb-4">Os Quatro Pilares da Inovação</h2>
          <p className="text-xl text-muted-foreground">
            Uma plataforma abrangente desenvolvida para o crescimento de Angola
          </p>
        </div>

<div className="grid md:grid-cols-2 gap-8">
          {pillars.map((pillar) => (
            <div
              key={pillar.title}
              className="bg-card border border-border rounded-xl p-8 hover:border-primary transition-colors group"
            >
              <div className="text-5xl mb-4 group-hover:scale-110 transition-transform">{pillar.icon}</div>
              <h3 className="text-2xl font-bold text-foreground mb-3">{pillar.title}</h3>
              <p className="text-muted-foreground text-lg leading-relaxed">{pillar.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/features.tsx" isEdit="true" isMerged="true"
export function Features() {
  const features = [
    {
      title: "Integração Perfeita",
      description: "Todos os serviços funcionam perfeitamente juntos, criando uma experiência unificada.",
    },
    {
      title: "Análise em Tempo Real",
      description: "Acompanhe seu progresso com painéis e insights abrangentes.",
    },
    {
      title: "Plataforma Segura",
      description: "Segurança de nível empresarial protegendo seus dados e transações.",
    },
    {
      title: "Comunidade de Especialistas",
      description: "Conecte-se com milhares de especialistas e inovadores em toda Angola.",
    },
    {
      title: "Apoio 24/7",
      description: "Atendimento ao cliente contínuo em português e inglês.",
    },
    {
      title: "Mobile First",
      description: "Otimizado para dispositivos móveis com aplicativos nativos para iOS e Android.",
    },
  ]

return (
    <section id="features" className="py-20 px-4 sm:px-6 lg:px-8 bg-card/30">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl sm:text-5xl font-bold text-foreground mb-4">Por Que Escolher KILLMAY</h2>
          <p className="text-xl text-muted-foreground">Construído para Angolanos, por inovadores</p>
        </div>

<div className="grid md:grid-cols-3 gap-8">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="bg-background border border-border rounded-lg p-6 hover:border-primary transition-colors"
            >
              <h3 className="text-xl font-bold text-foreground mb-2">{feature.title}</h3>
              <p className="text-muted-foreground">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/cta.tsx" isEdit="true" isMerged="true"
export function CTA() {
  return (
    <section className="py-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
      <div className="absolute inset-0 opacity-20">
        <div className="absolute inset-0 bg-gradient-to-r from-primary/20 to-accent/20"></div>
      </div>

<div className="max-w-4xl mx-auto text-center relative z-10">
        <h2 className="text-4xl sm:text-5xl font-bold text-foreground mb-6">
          Pronto para Transformar o Futuro de Angola?
        </h2>
        <p className="text-xl text-muted-foreground mb-8 leading-relaxed">
          Junte-se a milhares de inovadores, empreendedores e agricultores construindo o futuro com KILLMAY.
        </p>
        <button className="bg-primary text-primary-foreground px-8 py-4 rounded-full font-bold text-lg hover:opacity-90 transition">
          Junte-se ao KILLMAY Hoje
        </button>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/(auth)/layout.tsx" isMerged="true"
import type React from "react"

export default function AuthLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <div className="min-h-screen bg-gradient-to-br from-background via-background to-primary/5 flex items-center justify-center px-4">
      {children}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(auth)/login/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/app/auth-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { toast } from "sonner"
import Link from "next/link"

export default function LoginPage() {
  const router = useRouter()
  const { signIn, loading } = useAuth()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      await signIn(email, password)
      toast.success("Login realizado com sucesso!")
      router.push("/dashboard")
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "Erro ao fazer login")
    }
  }

<div className="mt-4 text-center text-sm">
          Não tem conta?{" "}
          <Link href="/signup" className="text-primary hover:underline font-semibold">
            Crie uma agora
          </Link>
        </div>

<div className="mt-4 pt-4 border-t border-border text-center text-xs text-muted-foreground">
          <p>Demo: use qualquer email/senha</p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/(auth)/signup/page.tsx" isMerged="true"
"use client"

import type React from "react"

export default function SignupPage() {
  const router = useRouter()
  const { signUp, loading } = useAuth()
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [role, setRole] = useState("user")

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      await signUp(name, email, password, role)
      toast.success("Conta criada com sucesso!")
      router.push("/dashboard")
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "Erro ao criar conta")
    }
  }

return (
    <Card className="w-full max-w-md">
      <CardHeader className="space-y-1">
        <div className="flex items-center justify-center space-x-2 mb-4">
          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
            <span className="text-primary-foreground font-bold text-lg">K</span>
          </div>
          <span className="text-xl font-bold text-foreground">KILLMAY</span>
        </div>
        <CardTitle className="text-2xl">Criar Conta</CardTitle>
        <CardDescription>Junte-se ao ecossistema KILLMAY</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <label className="text-sm font-medium text-foreground">Nome Completo</label>
            <Input placeholder="João Silva" value={name} onChange={(e) => setName(e.target.value)} required />
          </div>
          <div className="space-y-2">
            <label className="text-sm font-medium text-foreground">Email</label>
            <Input
              type="email"
              placeholder="seu@email.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="space-y-2">
            <label className="text-sm font-medium text-foreground">Tipo de Conta</label>
            <Select value={role} onValueChange={setRole}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="user">Utilizador Geral</SelectItem>
                <SelectItem value="farmer">Agricultor/Piscicultor</SelectItem>
                <SelectItem value="technician">Técnico de Suporte</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <label className="text-sm font-medium text-foreground">Senha</label>
            <Input
              type="password"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <Button type="submit" className="w-full" disabled={loading}>
            {loading ? "Criando conta..." : "Criar Conta"}
          </Button>
        </form>

<div className="mt-4 text-center text-sm">
          Já tem conta?{" "}
          <Link href="/login" className="text-primary hover:underline font-semibold">
            Faça login
          </Link>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Hero } from "@/components/hero"
import { Features } from "@/components/features"
import { Stats } from "@/components/stats"
import { Pillars } from "@/components/pillars"
import { CTA } from "@/components/cta"
import { Footer } from "@/components/footer"
import { Suspense } from "react"

function HomeContent() {
  return (
    <main className="bg-background">
      <Header />
      <Hero />
      <Stats />
      <Pillars />
      <Features />
      <CTA />
      <Footer />
    </main>
  )
}

export default function Home() {
  return (
    <Suspense fallback={<div>Carregando...</div>}>
      <HomeContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Menu, X } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { useAuth } from "@/app/auth-context"

export function Header() {
  const [isOpen, setIsOpen] = useState(false)
  const { user } = useAuth()

return (
    <header className="fixed top-0 w-full bg-background/95 backdrop-blur-sm border-b border-border z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <Link href="/" className="flex items-center space-x-2">
            <Image src="/killmay-logo.png" alt="KILLMAY Logo" width={40} height={40} className="w-10 h-10" />
            <span className="text-xl font-bold text-foreground">KILLMAY</span>
          </Link>

<nav className="hidden md:flex items-center space-x-8">
            <a href="#features" className="text-foreground hover:text-primary transition">
              Recursos
            </a>
            <a href="#platform" className="text-foreground hover:text-primary transition">
              Plataforma
            </a>
            <a href="#contact" className="text-foreground hover:text-primary transition">
              Contacto
            </a>
          </nav>

<div className="hidden md:flex items-center space-x-4">
            {user ? (
              <Link href="/dashboard">
                <button className="bg-primary text-primary-foreground px-6 py-2 rounded-full font-semibold hover:opacity-90 transition">
                  Dashboard
                </button>
              </Link>
            ) : (
              <>
                <Link href="/login">
                  <button className="text-foreground hover:text-primary transition">Iniciar Sessão</button>
                </Link>
                <Link href="/signup">
                  <button className="bg-primary text-primary-foreground px-6 py-2 rounded-full font-semibold hover:opacity-90 transition">
                    Começar
                  </button>
                </Link>
              </>
            )}
          </div>

<button className="md:hidden" onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

{isOpen && (
          <nav className="md:hidden pb-4 space-y-2">
            <a href="#features" className="block px-4 py-2 text-foreground hover:text-primary">
              Recursos
            </a>
            <a href="#platform" className="block px-4 py-2 text-foreground hover:text-primary">
              Plataforma
            </a>
            <a href="#contact" className="block px-4 py-2 text-foreground hover:text-primary">
              Contacto
            </a>
            {user ? (
              <Link href="/dashboard">
                <button className="w-full text-left px-4 py-2 bg-primary text-primary-foreground rounded-full font-semibold">
                  Dashboard
                </button>
              </Link>
            ) : (
              <>
                <Link href="/login">
                  <button className="w-full text-left px-4 py-2 text-foreground">Iniciar Sessão</button>
                </Link>
                <Link href="/signup">
                  <button className="w-full bg-primary text-primary-foreground px-4 py-2 rounded-full font-semibold">
                    Começar
                  </button>
                </Link>
              </>
            )}
          </nav>
        )}
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/agrotech/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { ProtectedLayout } from "@/components/protected-layout"
import { PlantationDashboard } from "@/components/agrotech/plantation-dashboard"
import { FisheryDashboard } from "@/components/agrotech/fishery-dashboard"
import { WeatherSection } from "@/components/agrotech/weather-section"
import { ReportsSection } from "@/components/agrotech/reports-section"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Leaf, Fish, Video } from "lucide-react"
import { AgroTechVideos } from "@/components/agrotech/agrotech-videos"

export default function AgroTechPage() {
  const { user } = useAuth()

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Dashboard AgroTech</h1>
          <p className="text-muted-foreground mt-2">Gerencie suas plantações e piscicultura com dados em tempo real</p>
        </div>

<Tabs defaultValue="plantations" className="w-full">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="plantations" className="flex items-center gap-2">
              <Leaf className="h-4 w-4" />
              Plantações
            </TabsTrigger>
            <TabsTrigger value="fishery" className="flex items-center gap-2">
              <Fish className="h-4 w-4" />
              Piscicultura
            </TabsTrigger>
            <TabsTrigger value="videos" className="flex items-center gap-2">
              <Video className="h-4 w-4" />
              Vídeos
            </TabsTrigger>
            <TabsTrigger value="reports" className="flex items-center gap-2">
              Relatórios
            </TabsTrigger>
          </TabsList>

<TabsContent value="reports" className="space-y-6">
            <ReportsSection />
          </TabsContent>
        </Tabs>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]typescriptreact:file="components/agrotech/plantation-dashboard.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { Plus, Droplet, Thermometer } from "lucide-react"

const plantationData = [
  { name: "Jan", rendimento: 2400, humidade: 65 },
  { name: "Fev", rendimento: 3200, humidade: 70 },
  { name: "Mar", rendimento: 2800, humidade: 68 },
  { name: "Abr", rendimento: 3900, humidade: 72 },
  { name: "Mai", rendimento: 3490, humidade: 75 },
  { name: "Jun", rendimento: 4300, humidade: 78 },
]

const plantations = [
  {
    id: 1,
    name: "Milho - Lote A",
    area: 25.5,
    plantedDate: "2024-03-15",
    expectedHarvest: "2024-08-15",
    status: "Crescimento",
    humidity: 72,
    temperature: 28,
  },
  {
    id: 2,
    name: "Feijão - Lote B",
    area: 18.3,
    plantedDate: "2024-04-01",
    expectedHarvest: "2024-07-01",
    status: "Floração",
    humidity: 68,
    temperature: 26,
  },
  {
    id: 3,
    name: "Mandioca - Lote C",
    area: 32.0,
    plantedDate: "2024-02-20",
    expectedHarvest: "2024-12-20",
    status: "Desenvolvimento",
    humidity: 75,
    temperature: 27,
  },
]

export function PlantationDashboard() {
  return (
    <div className="space-y-6">
      {/* Gráficos */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="col-span-1">
          <CardHeader>
            <CardTitle>Rendimento Mensal</CardTitle>
            <CardDescription>Produção em kg por mês</CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={plantationData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="rendimento" fill="#10b981" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card className="col-span-1">
          <CardHeader>
            <CardTitle>Humidade do Solo</CardTitle>
            <CardDescription>Variação ao longo do mês</CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={plantationData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="humidade" stroke="#3b82f6" />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

{/* Lista de Plantações */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Suas Plantações</CardTitle>
            <CardDescription>Gerencie seus lotes de cultivo</CardDescription>
          </div>
          <Button size="sm" className="gap-2">
            <Plus className="h-4 w-4" />
            Adicionar Lote
          </Button>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {plantations.map((plantation) => (
              <div
                key={plantation.id}
                className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors"
              >
                <div className="flex items-start justify-between mb-3">
                  <div>
                    <h3 className="font-semibold text-foreground">{plantation.name}</h3>
                    <p className="text-sm text-muted-foreground">Área: {plantation.area} hectares</p>
                  </div>
                  <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-700 dark:text-green-400">
                    {plantation.status}
                  </span>
                </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-3">
                  <div className="flex items-center gap-2">
                    <Droplet className="h-4 w-4 text-blue-500" />
                    <div>
                      <p className="text-xs text-muted-foreground">Humidade</p>
                      <p className="font-semibold text-foreground">{plantation.humidity}%</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Thermometer className="h-4 w-4 text-orange-500" />
                    <div>
                      <p className="text-xs text-muted-foreground">Temperatura</p>
                      <p className="font-semibold text-foreground">{plantation.temperature}°C</p>
                    </div>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Plantado em</p>
                    <p className="font-semibold text-foreground text-sm">{plantation.plantedDate}</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Colheita prevista</p>
                    <p className="font-semibold text-foreground text-sm">{plantation.expectedHarvest}</p>
                  </div>
                </div>

<div className="flex gap-2 pt-3 border-t border-border">
                  <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                    Ver Detalhes
                  </Button>
                  <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                    Editar
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agrotech/fishery-dashboard.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  PieChart,
  Pie,
  Cell,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts"
import { Plus } from "lucide-react"

const fishSpecies = [
  { name: "Tilápia", value: 45, color: "#10b981" },
  { name: "Carpa", value: 30, color: "#3b82f6" },
  { name: "Catfish", value: 25, color: "#f59e0b" },
]

const waterQualityData = [
  { name: "Seg", pH: 7.2, oxigenio: 6.8 },
  { name: "Ter", pH: 7.3, oxigenio: 7.1 },
  { name: "Qua", pH: 7.1, oxigenio: 6.9 },
  { name: "Qui", pH: 7.2, oxigenio: 7.2 },
  { name: "Sex", pH: 7.3, oxigenio: 7.0 },
  { name: "Sab", pH: 7.2, oxigenio: 7.3 },
  { name: "Dom", pH: 7.1, oxigenio: 6.8 },
]

const fishPonds = [
  {
    id: 1,
    name: "Tanque 1 - Tilápia",
    area: 500,
    depth: 2.0,
    fishCount: 5000,
    waterTemp: 28,
    pH: 7.2,
    status: "Ótimo",
  },
  {
    id: 2,
    name: "Tanque 2 - Carpa",
    area: 400,
    depth: 1.8,
    fishCount: 3500,
    waterTemp: 27,
    pH: 7.1,
    status: "Bom",
  },
  {
    id: 3,
    name: "Tanque 3 - Catfish",
    area: 350,
    depth: 2.2,
    fishCount: 2800,
    waterTemp: 29,
    pH: 7.3,
    status: "Ótimo",
  },
]

export function FisheryDashboard() {
  return (
    <div className="space-y-6">
      {/* Gráficos */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="col-span-1">
          <CardHeader>
            <CardTitle>Distribuição de Espécies</CardTitle>
            <CardDescription>Percentual de peixes por espécie</CardDescription>
          </CardHeader>
          <CardContent className="flex justify-center">
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={fishSpecies}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name}: ${value}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {fishSpecies.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card className="col-span-1">
          <CardHeader>
            <CardTitle>Qualidade da Água</CardTitle>
            <CardDescription>Monitoramento de pH e oxigênio</CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={waterQualityData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis yAxisId="left" />
                <YAxis yAxisId="right" orientation="right" />
                <Tooltip />
                <Legend />
                <Line yAxisId="left" type="monotone" dataKey="pH" stroke="#f59e0b" name="pH" />
                <Line yAxisId="right" type="monotone" dataKey="oxigenio" stroke="#10b981" name="Oxigênio (mg/L)" />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

{/* Lista de Tanques */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Seus Tanques</CardTitle>
            <CardDescription>Monitorar a saúde e produtividade</CardDescription>
          </div>
          <Button size="sm" className="gap-2">
            <Plus className="h-4 w-4" />
            Adicionar Tanque
          </Button>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {fishPonds.map((pond) => (
              <div key={pond.id} className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors">
                <div className="flex items-start justify-between mb-3">
                  <div>
                    <h3 className="font-semibold text-foreground">{pond.name}</h3>
                    <p className="text-sm text-muted-foreground">
                      Área: {pond.area}m² | Profundidade: {pond.depth}m
                    </p>
                  </div>
                  <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-700 dark:text-green-400">
                    {pond.status}
                  </span>
                </div>

<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-3">
                  <div>
                    <p className="text-xs text-muted-foreground">Número de Peixes</p>
                    <p className="font-semibold text-foreground">{pond.fishCount.toLocaleString()}</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Temperatura</p>
                    <p className="font-semibold text-foreground">{pond.waterTemp}°C</p>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">pH</p>
                    <p className="font-semibold text-foreground">{pond.pH}</p>
                  </div>
                  <div className="col-span-2">
                    <p className="text-xs text-muted-foreground">Densidade de Estoque</p>
                    <p className="font-semibold text-foreground">{(pond.fishCount / pond.area).toFixed(1)} peixes/m²</p>
                  </div>
                </div>

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Cloud, Droplets, Wind, Sun } from "lucide-react"

const weatherData = {
  current: {
    temp: 28,
    condition: "Parcialmente Nublado",
    humidity: 72,
    windSpeed: 12,
    uvIndex: 7,
  },
  forecast: [
    { day: "Segunda", high: 30, low: 22, condition: "Ensolarado", icon: "☀️" },
    { day: "Terça", high: 29, low: 21, condition: "Parcialmente Nublado", icon: "⛅" },
    { day: "Quarta", high: 27, low: 20, condition: "Chuva", icon: "🌧️" },
    { day: "Quinta", high: 28, low: 21, condition: "Ensolarado", icon: "☀️" },
    { day: "Sexta", high: 31, low: 23, condition: "Ensolarado", icon: "☀️" },
  ],
}

export function WeatherSection() {
  return (
    <div className="space-y-4">
      {/* Clima Atual */}
      <Card>
        <CardHeader>
          <CardTitle>Condições Climáticas Atuais</CardTitle>
          <CardDescription>Dados em tempo real da sua região</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="flex items-center gap-3 p-4 bg-muted rounded-lg">
              <Sun className="h-8 w-8 text-yellow-500" />
              <div>
                <p className="text-sm text-muted-foreground">Temperatura</p>
                <p className="text-2xl font-bold text-foreground">{weatherData.current.temp}°C</p>
              </div>
            </div>
            <div className="flex items-center gap-3 p-4 bg-muted rounded-lg">
              <Droplets className="h-8 w-8 text-blue-500" />
              <div>
                <p className="text-sm text-muted-foreground">Humidade</p>
                <p className="text-2xl font-bold text-foreground">{weatherData.current.humidity}%</p>
              </div>
            </div>
            <div className="flex items-center gap-3 p-4 bg-muted rounded-lg">
              <Wind className="h-8 w-8 text-cyan-500" />
              <div>
                <p className="text-sm text-muted-foreground">Vento</p>
                <p className="text-2xl font-bold text-foreground">{weatherData.current.windSpeed} km/h</p>
              </div>
            </div>
            <div className="flex items-center gap-3 p-4 bg-muted rounded-lg">
              <Cloud className="h-8 w-8 text-purple-500" />
              <div>
                <p className="text-sm text-muted-foreground">UV Index</p>
                <p className="text-2xl font-bold text-foreground">{weatherData.current.uvIndex}</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Previsão de 5 Dias */}
      <Card>
        <CardHeader>
          <CardTitle>Previsão de 5 Dias</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            {weatherData.forecast.map((day, index) => (
              <div
                key={index}
                className="border border-border rounded-lg p-4 text-center hover:bg-muted/50 transition-colors"
              >
                <p className="font-semibold text-foreground mb-2">{day.day}</p>
                <p className="text-3xl mb-2">{day.icon}</p>
                <p className="text-xs text-muted-foreground mb-3">{day.condition}</p>
                <div className="flex justify-center gap-2">
                  <span className="text-sm font-semibold text-foreground">{day.high}°</span>
                  <span className="text-sm text-muted-foreground">{day.low}°</span>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agrotech/reports-section.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  BarChart,
  Bar,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts"
import { Download, FileText } from "lucide-react"

const productionData = [
  { month: "Jan", plantacoes: 2400, piscicultura: 1800 },
  { month: "Fev", plantacoes: 3200, piscicultura: 2100 },
  { month: "Mar", plantacoes: 2800, piscicultura: 1900 },
  { month: "Abr", plantacoes: 3900, piscicultura: 2400 },
  { month: "Mai", plantacoes: 3490, piscicultura: 2800 },
  { month: "Jun", plantacoes: 4300, piscicultura: 3200 },
]

const reportsList = [
  { id: 1, name: "Relatório Mensal - Junho 2024", date: "2024-06-30", type: "PDF" },
  { id: 2, name: "Análise de Rendimento Q2", date: "2024-06-15", type: "PDF" },
  { id: 3, name: "Dados de Qualidade da Água", date: "2024-06-10", type: "CSV" },
  { id: 4, name: "Previsão de Colheita", date: "2024-05-28", type: "PDF" },
]

export function ReportsSection() {
  return (
    <div className="space-y-6">
      {/* Gráfico de Comparação */}
      <Card>
        <CardHeader>
          <CardTitle>Produção Comparativa</CardTitle>
          <CardDescription>Plantações vs Piscicultura (em kg)</CardDescription>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={350}>
            <BarChart data={productionData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="plantacoes" fill="#10b981" name="Plantações" />
              <Bar dataKey="piscicultura" fill="#3b82f6" name="Piscicultura" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

{/* Lucro Acumulado */}
      <Card>
        <CardHeader>
          <CardTitle>Receita Acumulada</CardTitle>
          <CardDescription>Evolução do faturamento ao longo do ano</CardDescription>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={productionData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Line type="monotone" dataKey="plantacoes" stroke="#10b981" strokeWidth={2} name="Plantações" />
              <Line type="monotone" dataKey="piscicultura" stroke="#3b82f6" strokeWidth={2} name="Piscicultura" />
            </LineChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

{/* Lista de Relatórios */}
      <Card>
        <CardHeader>
          <CardTitle>Relatórios Disponíveis</CardTitle>
          <CardDescription>Baixe e visualize seus relatórios</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {reportsList.map((report) => (
              <div
                key={report.id}
                className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <FileText className="h-5 w-5 text-primary" />
                  <div>
                    <p className="font-semibold text-foreground">{report.name}</p>
                    <p className="text-sm text-muted-foreground">{report.date}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <span className="px-2 py-1 text-xs font-medium bg-muted rounded">{report.type}</span>
                  <Button size="sm" variant="outline" className="gap-2 bg-transparent">
                    <Download className="h-4 w-4" />
                    Baixar
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Estatísticas Gerais */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Produção Total (6 meses)</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-foreground">17.790 kg</div>
            <p className="text-xs text-muted-foreground mt-1">+12% comparado ao período anterior</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">ROI Médio</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-green-600">42%</div>
            <p className="text-xs text-muted-foreground mt-1">Retorno sobre investimento</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Eficiência</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-blue-600">87%</div>
            <p className="text-xs text-muted-foreground mt-1">Taxa de utilização de recursos</p>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(protected)/marketplace/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/app/auth-context"
import { ProtectedLayout } from "@/components/protected-layout"
import { ProductCatalog } from "@/components/marketplace/product-catalog"
import { CartSummary } from "@/components/marketplace/cart-summary"
import { useState } from "react"

export default function MarketplacePage() {
  const { user } = useAuth()
  const [cartItems, setCartItems] = useState<any[]>([])

return (
    <ProtectedLayout>
      <div className="space-y-8">
        <div>
          <h1 className="text-4xl font-bold text-foreground">Marketplace Tecnológico</h1>
          <p className="text-muted-foreground mt-2">
            Descobrir e compre os melhores produtos tecnológicos para o seu negócio
          </p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-4 md:gap-6">
          <div className="lg:col-span-3 order-1 lg:order-1">
            <ProductCatalog onAddToCart={setCartItems} cartItems={cartItems} />
          </div>
          <div className="lg:col-span-1 order-2 lg:order-2 sticky top-20 h-fit">
            <CartSummary items={cartItems} onUpdateCart={setCartItems} />
          </div>
        </div>
      </div>
    </ProtectedLayout>
  )
}
[V0_FILE]jpg:file="public/android-smartphone.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/android-smartphone-7aXcfvVLGxgcLyDEK6bWJw6Z1Ku53H.jpg" isMerged="true"
[V0_FILE]png:file="public/gaming-laptop.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gaming-laptop-WoVwCXEMnDTq3rs0KT7IeDwJCG2nPp.png" isMerged="true"
[V0_FILE]jpg:file="public/wifi-router.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wifi-router-eoeybQKoAiwXTKGmdPBEkrPzsolACg.jpg" isMerged="true"
[V0_FILE]jpg:file="public/4k-monitor.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/4k-monitor-XRZkukXfQ5demGEVB2nqvses9OmJZv.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-camera.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-camera-iRTJt6Lfi0aUkF93riTr0TUjDo9S4L.jpg" isMerged="true"
[V0_FILE]jpg:file="public/wireless-headphones.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wireless-headphones-FnHAPE4kAzQBfRz93yEU0uO6imXEd3.jpg" isMerged="true"
[V0_FILE]jpg:file="public/tablet-pro.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tablet-pro-BAwCoXCkzJ2UFKZenck0S5l0bAzYfj.jpg" isMerged="true"
[V0_FILE]png:file="public/modern-smartwatch.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-smartwatch-Qfq9e3mMHVwXcaGeqfYxFryfKJn7AR.png" isMerged="true"
[V0_FILE]png:file="public/mechanical-keyboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mechanical-keyboard-gLToWT5pgcA8tVqmY6T1IfJllDE1iX.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/support/support-booking.tsx" isMerged="true"
"use client"

import type React from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { useState } from "react"
import { toast } from "sonner"

const SERVICES = [
  "Reparação de Computador",
  "Instalação de Software",
  "Limpeza e Manutenção",
  "Suporte de Rede",
  "Recuperação de Dados",
  "Instalação de Equipamento",
  "Consultoria Técnica",
]

const TECHNICIANS = [
  { id: 1, name: "João Silva", specialties: "Computadores, Redes", rating: 4.9 },
  { id: 2, name: "Maria Santos", specialties: "Software, Dados", rating: 4.8 },
  { id: 3, name: "Pedro Oliveira", specialties: "Hardware, Manutenção", rating: 4.7 },
  { id: 4, name: "Ana Costa", specialties: "Redes, Consultoria", rating: 4.9 },
]

const TIME_SLOTS = ["09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00"]

export function SupportBooking() {
  const [formData, setFormData] = useState({
    service: "",
    date: "",
    time: "",
    technician: "",
    description: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.service || !formData.date || !formData.time || !formData.technician) {
      toast.error("Preencha todos os campos obrigatórios")
      return
    }
    toast.success("Serviço agendado com sucesso! Recebará confirmação por email.")
    setFormData({ service: "", date: "", time: "", technician: "", description: "" })
  }

return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {/* Formulário */}
      <Card className="lg:col-span-2">
        <CardHeader>
          <CardTitle>Agendar Novo Serviço</CardTitle>
          <CardDescription>Preencha os dados abaixo para agendar um técnico</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Tipo de Serviço */}
            <div className="space-y-2">
              <Label htmlFor="service">Tipo de Serviço *</Label>
              <Select value={formData.service} onValueChange={(value) => setFormData({ ...formData, service: value })}>
                <SelectTrigger id="service">
                  <SelectValue placeholder="Selecione um serviço" />
                </SelectTrigger>
                <SelectContent>
                  {SERVICES.map((service) => (
                    <SelectItem key={service} value={service}>
                      {service}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{/* Técnico */}
            <div className="space-y-2">
              <Label htmlFor="technician">Selecione um Técnico *</Label>
              <Select
                value={formData.technician}
                onValueChange={(value) => setFormData({ ...formData, technician: value })}
              >
                <SelectTrigger id="technician">
                  <SelectValue placeholder="Escolha um técnico" />
                </SelectTrigger>
                <SelectContent>
                  {TECHNICIANS.map((tech) => (
                    <SelectItem key={tech.id} value={tech.id.toString()}>
                      <div className="flex items-center gap-2">
                        <span>{tech.name}</span>
                        <span className="text-xs text-muted-foreground">({tech.rating}⭐)</span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{/* Data e Hora */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="date">Data *</Label>
                <Input
                  id="date"
                  type="date"
                  value={formData.date}
                  onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                  min={new Date().toISOString().split("T")[0]}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="time">Hora *</Label>
                <Select value={formData.time} onValueChange={(value) => setFormData({ ...formData, time: value })}>
                  <SelectTrigger id="time">
                    <SelectValue placeholder="Selecione hora" />
                  </SelectTrigger>
                  <SelectContent>
                    {TIME_SLOTS.map((slot) => (
                      <SelectItem key={slot} value={slot}>
                        {slot}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

{/* Descrição */}
            <div className="space-y-2">
              <Label htmlFor="description">Descrição do Problema</Label>
              <Textarea
                id="description"
                placeholder="Descreva o problema técnico ou o serviço que necessita..."
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                rows={4}
              />
            </div>