10a:"ExplicitChatIdProvider" 10b:I[903690,["$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","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"$10a"] 10c:I[838238,["$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","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"SWRDataProvider"] 10e:[] 10f:[["b_7irvqtzR3Ps",null],["b_2pSEcQ5ZmbP",null],["b_McJ8hXVGg7G",null]] 110:[["b_7irvqtzR3Ps",{"templateVersionId":null,"templateCanonId":null}],["b_2pSEcQ5ZmbP",{"templateVersionId":null,"templateCanonId":null}],["b_McJ8hXVGg7G",{"templateVersionId":null,"templateCanonId":null}]] 111:[["b_cAORq4EZJom","$D2025-05-23T11:12:54.583Z"],["b_FzEDmJNfG7q","$D2025-05-23T11:20:26.406Z"],["b_mtVZlR1ICCH","$D2025-05-23T11:25:03.455Z"],["b_r2eoWhDejgO","$D2025-05-23T11:30:47.625Z"],["b_NLpiIjDkpEr","$D2025-05-23T11:40:24.616Z"],["b_nz8n5V663dh","$D2025-05-23T12:02:47.825Z"],["b_jNs3zwXBmmJ","$D2025-05-23T12:07:02.817Z"],["b_XciWGerbNu9","$D2025-05-23T12:12:20.348Z"],["b_kxPEPUhewmS","$D2025-05-23T12:35:10.364Z"],["b_us96M1uZZnp","$D2025-05-23T12:37:37.790Z"],["b_j3mFOAH46Jr","$D2025-05-23T12:43:22.382Z"],["b_ShAHmFdBJcf","$D2025-05-23T16:44:37.622Z"],["b_Dp7Ax8efgMF","$D2025-05-23T17:17:50.989Z"],["b_P15vp8Lh4kw","$D2025-05-23T17:20:19.448Z"],["b_bMD3r2OUYL1","$D2025-05-23T17:25:22.717Z"],["b_vhS2tFB5Cjo","$D2025-05-23T17:47:17.732Z"],["b_SrB9WWFkwaL","$D2025-05-23T17:52:06.393Z"],["b_Lxmj5UjObcX","$D2025-05-23T17:53:28.562Z"],["b_ma4QOyUyHY7","$D2025-05-23T18:01:38.479Z"],["b_lZ8MFEvqyyJ","$D2025-05-23T18:09:32.559Z"],["b_n898YQjxsgM","$D2025-05-23T18:15:13.299Z"],["b_KRcREGv07GO","$D2025-05-25T04:01:24.156Z"],["b_lNqrtBVGJUr","$D2025-05-25T04:05:32.785Z"],["b_R7X4gk8VZw2","$D2025-05-25T04:31:42.144Z"],["b_1jzxWLOeCpO","$D2025-05-25T04:41:07.241Z"],["b_05uaATyUQgc","$D2025-05-25T04:50:23.013Z"],["b_trUSuH2ArHN","$D2025-05-25T04:54:19.551Z"],["b_MndKV64Wjnq","$D2025-05-25T05:01:41.320Z"],["b_q2jKzngArcr","$D2025-05-25T07:26:05.074Z"],["b_NjpUju3AEnI","$D2025-05-25T07:33:27.375Z"],["b_QV0vKpf3Jll","$D2025-05-25T07:40:49.117Z"],["b_TeZ32iXjQY4","$D2025-05-25T08:09:53.590Z"],["b_HqjjSQiOTyu","$D2025-05-25T08:15:48.390Z"],["b_9wLFmUNTLzF","$D2025-05-25T09:09:03.025Z"],["b_Pga23n2XItx","$D2025-05-25T11:40:31.277Z"],["b_zQQ14mFrR3V","$D2025-05-25T11:46:15.773Z"],["b_DyItDXDcV0h","$D2025-05-25T11:52:12.299Z"],["b_989PmcUvlHK","$D2025-05-26T10:52:19.380Z"],["b_f6gytcy1T5i","$D2025-05-26T11:09:19.410Z"],["b_ESYN9WnyYHv","$D2025-05-26T11:26:08.838Z"],["b_1qXFa3uFabm","$D2025-05-26T11:33:49.404Z"],["b_wzokW0YsVUK","$D2025-05-26T11:37:24.009Z"],["b_cIoL44f3OLm","$D2025-05-26T11:41:40.369Z"],["b_5dJHJxP5Ero","$D2025-05-26T11:59:11.178Z"],["b_kN7FxuOTOSZ","$D2025-05-27T04:24:02.748Z"],["b_XwD3S8Hdu6O","$D2025-05-27T05:02:20.828Z"],["b_bgrj34F7T2r","$D2025-06-03T10:43:01.719Z"],["b_I2r946bgidQ","$D2025-06-03T10:50:22.014Z"],["b_L6e7alebTfu","$D2025-06-03T10:56:35.415Z"],["b_GdUqbV4fARi","$D2025-06-03T11:03:46.572Z"],["b_uq7JqOUwM0V","$D2025-06-03T11:13:59.508Z"],["b_FTLqRRt52zb","$D2025-06-03T11:21:55.622Z"],["b_ng2QK22fatL","$D2025-06-03T11:24:03.234Z"],["b_RTHbxNhNhkH","$D2025-06-03T11:26:27.355Z"],["b_aALoDSQWMLy","$D2025-06-03T11:28:44.836Z"],["b_XqAKZAmWOji","$D2025-06-03T11:32:06.993Z"],["b_n6wY2C68B27","$D2025-06-03T11:35:34.302Z"],["b_LjDlbnEbD3q","$D2025-06-03T11:37:43.358Z"],["b_kT8NFbDomP4","$D2025-06-03T11:41:00.740Z"],["b_lahYVubcI1w","$D2025-06-03T11:43:45.268Z"],["b_eEB0Mu6kJv6","$D2025-06-03T11:50:48.490Z"],["b_Bs8931pvS3c","$D2025-06-03T11:52:16.098Z"],["b_bCc5xo9evKM","$D2025-06-03T11:52:29.342Z"],["b_x1F7hutOcwB","$D2025-06-03T11:56:02.372Z"],["b_K5ulyfax2ix","$D2025-06-03T11:59:57.625Z"],["b_J3Z0lgULLiF","$D2025-06-04T10:39:32.031Z"],["b_gmrThBXj461","$D2025-06-04T10:43:12.996Z"],["b_ALsP55i2PlD","$D2025-06-04T10:49:57.739Z"],["b_dmfowo1xzzl","$D2025-06-04T11:21:01.541Z"],["b_8QzofNbktKv","$D2025-06-04T11:24:48.889Z"],["b_ZC1D6HEQPt7","$D2025-06-04T11:26:31.841Z"],["b_bTFINUllUlc","$D2025-06-04T11:28:28.118Z"],["b_z46g7BRbqgH","$D2025-06-04T11:31:18.226Z"],["b_hW5N5HIdGTP","$D2025-06-04T11:33:15.271Z"],["b_lbID0AlBC2D","$D2025-06-04T11:35:09.201Z"],["b_YqQJffEJ66p","$D2025-06-04T11:39:55.665Z"],["b_sCgr7gZIkxT","$D2025-06-04T11:42:31.245Z"],["b_l9xedcSL3wu","$D2025-06-04T11:48:13.465Z"],["b_K1Ok8kZuTZs","$D2025-06-04T11:51:27.555Z"],["b_IOR0qAUXbuN","$D2025-06-09T07:43:03.230Z"],["b_VSVOjMDcXoh","$D2025-06-09T07:45:52.324Z"],["b_Gn07slCkT6q","$D2025-06-09T07:52:22.436Z"],["b_TDMwieSCEfE","$D2025-06-09T07:55:22.571Z"],["b_qRbkcPUqoVH","$D2025-06-10T09:22:23.466Z"],["b_Q3de2MZUjo9","$D2025-06-10T09:25:22.763Z"],["b_hDhpwIiiiP9","$D2025-06-10T09:28:29.737Z"],["b_rMEYdNkcMQC","$D2025-06-10T09:30:27.716Z"],["b_8xOek2PAHPa","$D2025-06-10T09:36:34.013Z"],["b_KnK0wU0xDLQ","$D2025-06-10T09:36:39.177Z"],["b_c3iV3I6Ko5M","$D2025-06-10T09:37:07.809Z"],["b_KJgSMx9Dxm3","$D2025-06-10T09:43:03.528Z"],["b_SZb69s1HDPX","$D2025-06-10T09:45:39.182Z"],["b_o6kzj2tKCjD","$D2025-06-10T09:50:02.031Z"],["b_kVLDhBK65Z6","$D2025-06-10T09:55:39.662Z"],["b_yTCqo9sHfFn","$D2025-06-10T09:58:03.782Z"],["b_MBU6SkcWyfg","$D2025-06-10T10:00:08.983Z"],["b_H5ZVS5tF1eO","$D2025-06-10T10:02:26.017Z"],["b_fkfuSRVSDuG","$D2025-06-10T10:16:04.295Z"],["b_Y6ATsYzpUAW","$D2025-06-10T10:18:27.268Z"],["b_SaG7A9eOc0g","$D2025-06-10T10:21:39.743Z"],["b_OI1xhbG39eN","$D2025-06-10T10:23:34.105Z"],["b_kRmoBDIAAgk","$D2025-06-10T10:25:37.670Z"],["b_rR9PXQyRY3J","$D2025-06-10T10:28:08.237Z"],["b_pKAF2MFbHan","$D2025-06-10T10:30:55.958Z"],["b_gXbEkWxL3aA","$D2025-06-10T10:41:28.840Z"],["b_2hrROFI8WMm","$D2025-06-10T10:45:42.735Z"],["b_5vWmNn4TRI7","$D2025-06-10T10:47:19.956Z"],["b_X29QZiK3GjI","$D2025-06-10T10:48:32.836Z"],["b_12v4REghzuF","$D2025-06-10T10:50:18.454Z"],["b_9bqZDh3TZz7","$D2025-06-10T10:51:58.300Z"],["b_W2dWKXFOBpZ","$D2025-06-10T10:53:41.931Z"],["b_1Uqv9wUzW2I","$D2025-06-10T10:55:23.431Z"],["b_Cll1utGpuXY","$D2025-06-11T08:34:34.311Z"],["b_gbvjw9hXNZr","$D2025-06-11T08:50:57.858Z"],["b_LZHVdrTj0eM","$D2025-06-11T08:55:54.326Z"],["b_9RQOBX0Xhof","$D2025-06-11T09:28:03.346Z"],["b_4F5oXbHzgoV","$D2025-06-12T07:28:33.118Z"],["b_a6TL21nVMMP","$D2025-06-12T07:33:12.192Z"],["b_Jk0RJewcdbW","$D2025-06-12T07:41:00.593Z"],["b_3WWQi69hgBA","$D2025-06-12T07:45:53.087Z"],["b_OsZfqZMyG9h","$D2025-06-12T07:47:44.874Z"],["b_mMLBT9geedK","$D2025-06-12T07:50:12.944Z"],["b_0jLe0qqkd0T","$D2025-06-12T07:52:16.903Z"],["b_dMxGiJKKHsB","$D2025-06-12T08:30:08.760Z"],["b_0tRCWolf0Tm","$D2025-06-12T08:30:34.538Z"],["b_VdPnVoiO4p6","$D2025-06-12T08:30:48.209Z"],["b_39NNdTEkggV","$D2025-06-12T08:31:09.607Z"],["b_nGSrEAczo6c","$D2025-06-12T08:39:51.612Z"],["b_YgZTmrLcvGz","$D2025-06-12T08:44:01.365Z"],["b_RSwU5PWb3Bg","$D2025-06-12T08:47:04.375Z"],["b_HkNNHT0SKt1","$D2025-06-12T08:53:06.581Z"],["b_XtQelUldHbu","$D2025-06-12T09:46:04.143Z"],["b_xViKfFqFjGK","$D2025-06-12T09:49:08.822Z"],["b_CQZkXd4Wppe","$D2025-06-12T09:50:57.405Z"],["b_FldiiNKJhhb","$D2025-06-12T09:55:16.296Z"],["b_jSsPFakyi5O","$D2025-06-12T09:56:54.971Z"],["b_PIP6omlrJ5m","$D2025-06-12T10:07:01.118Z"],["b_U1r9hU4btgQ","$D2025-06-12T10:12:20.144Z"],["b_SNlU3VFiATh","$D2025-06-15T05:00:28.735Z"],["b_ftQPf96YPgE","$D2025-06-17T07:16:23.515Z"],["b_hePj1VOH2ms","$D2025-06-17T07:17:25.415Z"],["b_FPdSCywvyly","$D2025-06-17T07:27:03.896Z"],["b_DYEShjunx6t","$D2025-06-17T07:27:22.158Z"],["b_mB6YjL2kmIW","$D2025-06-17T07:27:23.458Z"],["b_0oyNabNtL0Y","$D2025-06-17T07:28:00.485Z"],["b_ORocne8Fg3l","$D2025-06-17T07:28:08.755Z"],["b_Rf6snY5WtiC","$D2025-06-17T07:28:14.342Z"],["b_331dkqkFZdk","$D2025-07-01T05:18:00.243Z"],["b_gqjVG5nH3Sg","$D2025-07-01T05:27:29.234Z"],["b_GzVotI29bj5","$D2025-07-01T05:47:34.228Z"],["b_AtZHaQH1S6o","$D2025-07-01T05:50:56.375Z"],["b_ARIqwzSAFMI","$D2025-07-01T05:54:54.708Z"],["b_mTioBOwSIG3","$D2025-07-02T07:11:48.222Z"],["b_q9UlDFf1coH","$D2025-07-14T08:44:06.986Z"],["b_a8gUfG0fyDu","$D2025-07-14T10:34:15.422Z"],["b_wMhSM2EHKwq","$D2025-07-14T10:38:50.653Z"],["b_iNH0qwIyRbl","$D2025-07-14T11:06:29.072Z"],["b_mcM5Q78pDWF","$D2025-07-14T17:08:28.101Z"],["b_gvi3W8erlHI","$D2025-07-14T17:14:10.145Z"],["b_V5bD7BnQOp4","$D2025-07-14T17:21:38.486Z"],["b_1vW17VNhvcA","$D2025-07-14T17:34:35.875Z"],["b_odjvOAlYPVv","$D2025-07-14T17:39:51.197Z"],["b_tKjaCpyife4","$D2025-07-14T17:44:15.688Z"],["b_6sXZQtwZhtF","$D2025-07-14T17:48:57.861Z"],["b_AYkvUrLutt5","$D2025-07-14T17:53:28.374Z"],["b_1leCoX4mgDU","$D2025-07-14T18:08:55.042Z"],["b_hwTmHnXUIuV","$D2025-07-14T18:27:56.619Z"],["b_ZKUGhn896fv","$D2025-07-14T18:31:56.116Z"],["b_bcnn6J7gbeV","$D2025-07-14T18:45:08.199Z"],["b_hasPANOxyiM","$D2025-07-14T18:53:52.636Z"],["b_2QZvpE5r6TF","$D2025-07-14T18:58:17.819Z"],["b_oU4nxDPhJOV","$D2025-07-14T19:11:51.671Z"],["b_SHkn4xn4EVN","$D2025-07-14T19:14:31.770Z"],["b_54zSUlwvE5Y","$D2025-07-14T19:24:18.346Z"],["b_aYjKMgeAQiP","$D2025-07-14T19:29:28.672Z"],["b_ZHWczI8WlqZ","$D2025-07-14T19:33:21.421Z"],["b_BoeIXIRX5Zx","$D2025-07-14T19:36:21.439Z"],["b_RMyc9ilVkUm","$D2025-07-14T19:39:45.106Z"],["b_JQiakxvKTac","$D2025-07-16T06:34:59.438Z"],["b_i5INf3vTIoG","$D2025-07-16T06:39:50.065Z"],["b_LW9XySBJ57I","$D2025-07-16T06:45:52.892Z"],["b_8EvCPPGkE7A","$D2025-07-16T06:55:20.808Z"],["b_HtwaqeZyYrk","$D2025-07-16T07:02:03.707Z"],["b_9GxSD9qQ3ys","$D2025-07-16T07:09:32.590Z"],["b_SgQcUPt2Api","$D2025-07-16T07:13:57.145Z"],["b_QlfslacCp9e","$D2025-07-16T07:36:50.958Z"],["b_bD24IK7ndtB","$D2025-07-16T07:42:20.681Z"],["b_U3ZA5fWpbBQ","$D2025-07-16T07:53:36.416Z"],["b_TViwJATgBmH","$D2025-07-16T08:03:01.421Z"],["b_Q1Q5NBRN38i","$D2025-07-16T08:23:18.552Z"],["b_StEcNfokHA5","$D2025-07-16T08:34:11.561Z"],["b_dGVlAHV7WgY","$D2025-07-16T08:44:19.402Z"],["b_wvzoN5XWXcr","$D2025-07-16T08:57:18.164Z"],["b_FL3YYZ8ZzbS","$D2025-07-16T08:58:28.807Z"],["b_FmvIDsZdjVU","$D2025-07-16T09:19:53.672Z"],["b_k9N2XkKWYrU","$D2025-07-16T09:31:02.876Z"],["b_P4sm2CIi8M9","$D2025-07-16T09:44:15.513Z"],["b_v0mo2ui91X5","$D2025-07-16T09:46:26.146Z"],["b_9pSylBU9rsj","$D2025-07-16T09:58:19.385Z"],["b_mc2YTWUFm6B","$D2025-07-16T10:03:39.371Z"],["b_56042PF9IN1","$D2025-07-16T10:14:36.953Z"],["b_4ZM4cj4EWJS","$D2025-07-16T10:21:32.144Z"],["b_yr0khCVSo0f","$D2025-07-16T10:37:07.291Z"],["b_Z8foFPDxQyb","$D2025-07-16T10:42:12.692Z"],["b_6aeOGXB9e7U","$D2025-07-16T11:00:39.938Z"],["b_Il4hvRWl0Am","$D2025-07-16T11:02:01.793Z"],["b_mJevJt8NCxq","$D2025-07-16T11:09:35.827Z"],["b_WpH6NYbMkfi","$D2025-07-16T11:17:40.841Z"],["b_q9C5iKqOyNk","$D2025-07-16T11:21:37.091Z"],["b_AojIHEtouMZ","$D2025-07-16T11:35:25.641Z"],["b_u02D0ywz3Iy","$D2025-07-16T11:37:58.242Z"],["b_XA98e2mmZ3j","$D2025-07-16T11:42:57.597Z"],["b_O8XfKzEey6O","$D2025-07-16T11:56:51.576Z"],["b_F96XrzjxvWc","$D2025-07-16T12:11:13.648Z"],["b_wcu7Jfziesv","$D2025-07-16T12:20:36.587Z"],["b_9CDMwu1i6tp","$D2025-07-16T12:26:01.285Z"],["b_8IAxLkBwfzm","$D2025-07-16T12:32:34.582Z"],["b_Jkid8I99vXG","$D2025-07-16T12:35:05.475Z"],["b_HRUcYMe22K3","$D2025-07-16T12:39:18.947Z"],["b_H5a7nhsx5zB","$D2025-07-16T12:42:08.295Z"],["b_ibitHN0aitW","$D2025-07-16T12:49:50.651Z"],["b_8jXvUmI4fnu","$D2025-07-16T12:56:55.410Z"],["b_2s714mHO3VK","$D2025-07-16T13:04:58.615Z"],["b_Dt8hNOR33RJ","$D2025-07-16T14:05:35.173Z"],["b_qloOIWs5MAt","$D2025-07-16T14:09:25.463Z"],["b_JMdOJp7FUyJ","$D2025-07-16T14:17:43.828Z"],["b_mrPWC1dtdRB","$D2025-07-16T14:43:42.053Z"],["b_G68PX8nVn8I","$D2025-07-16T14:47:00.973Z"],["b_pl9S43v94U4","$D2025-07-16T14:52:09.678Z"],["b_rHn6q4bU7XC","$D2025-08-09T06:47:25.446Z"],["b_nKWr42htdti","$D2025-08-09T06:56:34.196Z"],["b_mMEeVF17nK0","$D2025-08-09T07:04:12.422Z"],["b_PwtNqQRFKLl","$D2025-08-09T07:04:52.932Z"],["b_qu3X7Yrztui","$D2025-08-09T07:07:42.549Z"],["b_6CE7kfkeEhq","$D2025-08-09T07:10:19.833Z"],["b_g04qHzZ0EC1","$D2025-08-09T07:12:47.697Z"],["b_pmKNr9Kjlaq","$D2025-08-09T07:23:38.981Z"],["b_SzUlf9Bw09Y","$D2025-08-09T07:31:19.678Z"],["b_ribBVoArMKQ","$D2025-08-09T08:20:48.759Z"],["b_7rrJYSYv7g7","$D2025-09-17T11:43:07.176Z"],["b_wuOAYD941BH","$D2025-09-18T04:16:56.525Z"],["b_fRb90Y2xRPq","$D2025-09-18T04:20:28.964Z"],["b_LUqwKEEogHI","$D2025-09-18T08:33:11.927Z"],["b_zbn3kDFRXMn","$D2025-09-18T08:37:04.500Z"],["b_t8p5XOJ9lea","$D2025-09-28T04:20:04.408Z"],["b_6ptqjh252oR","$D2025-09-28T07:31:14.975Z"],["b_v7TGcte6UsX","$D2025-09-28T07:46:04.646Z"],["b_gF22FJ9E20q","$D2025-09-28T08:01:54.610Z"],["b_MFrTcXKGJGL","$D2025-09-28T08:18:33.511Z"],["b_jrFk0kfDgwl","$D2025-09-28T08:36:13.818Z"],["b_sbJqwT5t321","$D2025-09-28T08:42:20.429Z"],["b_rtrmawkbAAJ","$D2025-09-28T08:45:49.316Z"],["b_nvAmgGxaflv","$D2025-09-28T08:50:09.100Z"],["b_sMVSOjEis5H","$D2025-09-28T08:50:54.679Z"],["b_d3gS6vL3ogf","$D2025-09-28T08:52:14.540Z"],["b_wNFKlKthgO0","$D2025-09-28T08:58:01.549Z"],["b_1ExIqHIeAOg","$D2025-09-28T09:05:45.903Z"],["b_4eKeN56RuiD","$D2025-09-28T09:11:50.866Z"],["b_RSAzmNsfJZj","$D2025-09-28T09:52:26.394Z"],["b_Vryu3atVvQq","$D2025-09-28T10:07:51.855Z"],["b_23cu57U3782","$D2025-09-28T10:11:42.092Z"],["b_BPTSKqKyHY3","$D2025-09-28T10:15:50.343Z"],["b_W38YJ4wEJ4U","$D2025-09-28T10:22:18.209Z"],["b_9boXT56j9TA","$D2025-09-28T10:28:56.826Z"],["b_uYFFIKjGfHH","$D2025-09-28T10:31:07.424Z"],["b_1RJNnKhw7W1","$D2025-09-28T10:33:17.133Z"],["b_VreII6ACuVA","$D2025-09-28T10:36:29.587Z"],["b_ipWfieF7dQ8","$D2025-09-28T10:44:43.560Z"],["b_cAmKvOVa2RI","$D2025-09-28T11:34:02.952Z"],["b_tGQuG2gMiiJ","$D2025-09-28T11:46:17.742Z"],["b_imciT7F0SMH","$D2025-09-28T12:05:09.762Z"],["b_bG4JTVetTWi","$D2025-09-29T04:04:02.286Z"],["b_cRxHIvErBSl","$D2025-09-29T04:07:35.343Z"],["b_Yb9U5sUGIBm","$D2025-09-29T04:31:49.343Z"],["b_8EoPyQzukUx","$D2025-09-29T04:44:12.273Z"],["b_Hr0mElrk0YD","$D2025-09-29T04:44:28.807Z"],["b_odDjBe8on19","$D2025-09-29T04:55:03.470Z"],["b_4DiJLL0BRgv","$D2025-09-29T05:01:18.562Z"],["b_br8cVmLwIMz","$D2025-09-29T05:10:15.739Z"],["b_46MX7JVME4b","$D2025-09-29T05:33:56.967Z"],["b_cFxDVOcS6ni","$D2025-09-29T05:48:38.375Z"],["b_0jm1ea1qi8Y","$D2025-09-29T05:54:10.339Z"],["b_sN31xnnO3lq","$D2025-09-29T05:58:54.971Z"],["b_IrkSMEQosnd","$D2025-09-29T07:02:18.889Z"],["b_TAKFJx9HWfi","$D2025-09-29T07:09:47.975Z"],["b_7irvqtzR3Ps","$D2025-09-29T07:26:40.830Z"],["b_2pSEcQ5ZmbP","$D2025-09-29T07:39:55.463Z"],["b_McJ8hXVGg7G","$D2026-05-01T14:51:22.660Z"]] 112:[["b_7irvqtzR3Ps",false],["b_2pSEcQ5ZmbP",false],["b_McJ8hXVGg7G",false]] 113:[["b_7irvqtzR3Ps","$undefined"],["b_2pSEcQ5ZmbP","$undefined"],["b_McJ8hXVGg7G","$undefined"]] 114:[["b_7irvqtzR3Ps",null],["b_2pSEcQ5ZmbP",null],["b_McJ8hXVGg7G",null]] 115:[["b_7irvqtzR3Ps",true],["b_2pSEcQ5ZmbP",true],["b_McJ8hXVGg7G",true]] 116:[["b_7irvqtzR3Ps",true],["b_2pSEcQ5ZmbP",true],["b_McJ8hXVGg7G",true]] 117:[] 118:Tc75d1,[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Progress } from "@/components/ui/progress" import { Bookmark, FileText, User } from "lucide-react" export default function Dashboard() { const [progress, setProgress] = useState({ biology: 45, chemistry: 30, physics: 15, geography: 60, quran: 75, }) return (

Student Dashboard

Track your progress, access your courses, and manage your learning journey.

Profile

Ahmed Abdullah

Student

Email: ahmed@example.com

Joined: January 2023

Courses: 5

My Courses Bookmarks Notes

Biology Human Anatomy, Plants, Life Cycles

Progress: {progress.biology}%

Last Lesson

Human Digestive System

Next Quiz

Cellular Structure

Resources

12 Videos, 8 PDFs

Chemistry Matter, Elements, Reactions

Progress: {progress.chemistry}%

Last Lesson

Periodic Table

Next Quiz

Chemical Bonds

Resources

8 Videos, 5 PDFs

Quran Tafsir, Thematic Exploration

Progress: {progress.quran}%

Last Lesson

Verses on Creation

Next Quiz

Scientific Miracles

Resources

15 Videos, 10 PDFs

Human Digestive System

Biology

The digestive system breaks down food into nutrients that the body can use for energy, growth, and cell repair.

Verses on Light

Quran

Exploration of Quranic verses that discuss light and their connection to modern physics concepts.

Periodic Table

Chemistry

The organization of elements and their properties, with connections to Quranic verses on creation.

Photosynthesis Process

Biology - Plants

My notes on the photosynthesis process and its importance in plant life.

Last edited: 2 days ago

Quranic Verses on Mountains

Geography - Earth

Notes on Quranic verses that describe mountains and their geological significance.

Last edited: 1 week ago

) } [V0_FILE]png:file="public/dna-structure-illustration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dna-structure-illustration-t3Rq4XT1664rMWVjdwrQRI9LqXKKrg.png" isMerged="true" [V0_FILE]png:file="public/abstract-geometric-sculpture.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-sculpture-jZigpBQzxPWCZ5K5VjXio6GRBhKXzL.png" isMerged="true" [V0_FILE]png:file="public/islamic-education.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/islamic-education-lVwFBJePP8NnIulvlmfjgU5PMU6rwV.png" isMerged="true" [V0_FILE]png:file="public/marine-biology-ocean.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/marine-biology-ocean-iumwdByJDGUxzZy6XKtfnhc7mNi4Yb.png" isMerged="true" [V0_FILE]png:file="public/immunology-immune-system.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/immunology-immune-system-FffUtQVvxQNaJldM0zgXHg6xeQ70tN.png" isMerged="true" [V0_FILE]png:file="public/neurobiology-brain.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/neurobiology-brain-t18qyxx5wmsJyfxFZtKPR4zJ2bbB7n.png" isMerged="true" [V0_FILE]png:file="public/forensic-biology.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/forensic-biology-X43sRZe0bfZHFbbu9mZS4iN3saxsGo.png" isMerged="true" [V0_FILE]png:file="public/student-hijab.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/student-cap.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/student-boy.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/everything-came-from-water.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/natures-majestic-anchors.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/five-senses.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/muslim-family-education.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/muslim-family-education-axeEG1GVm5R3fBce5pvyCHldyRQdPI.png" isMerged="true" [V0_FILE]typescriptreact:file="app/subjects/biology/quizzes/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Progress } from "@/components/ui/progress" import { CheckCircle2, XCircle, ArrowLeft, ArrowRight } from "lucide-react" import { ColoredHeading } from "@/components/colored-heading" const quizQuestions = [ { id: 1, question: "What is the main function of the digestive system?", options: [ "To pump blood throughout the body", "To break down food and absorb nutrients", "To filter waste from the blood", "To exchange oxygen and carbon dioxide", ], correct: 1, explanation: "The digestive system's primary function is to break down food into nutrients that can be absorbed and used by the body.", }, { id: 2, question: "Which Quranic verse mentions the creation of humans from clay?", options: ["Quran 2:30", "Quran 23:12", "Quran 21:30", "Quran 15:26"], correct: 1, explanation: "Quran 23:12 states: 'And certainly We created man of an extract of clay.'", }, { id: 3, question: "What is photosynthesis?", options: [ "The process by which plants absorb water", "The process by which plants convert light energy into chemical energy", "The process by which plants reproduce", "The process by which plants grow taller", ], correct: 1, explanation: "Photosynthesis is the process by which plants use sunlight, water, and carbon dioxide to produce glucose and oxygen.", }, { id: 4, question: "According to the Quran, what is everything made from?", options: ["Fire", "Air", "Water", "Earth"], correct: 2, explanation: "Quran 21:30 states: 'And We made from water every living thing.'", }, { id: 5, question: "What is the basic unit of life?", options: ["Tissue", "Organ", "Cell", "Organism"], correct: 2, explanation: "The cell is the basic structural and functional unit of all living organisms.", }, ] export default function BiologyQuizPage() { const [currentQuestion, setCurrentQuestion] = useState(0) const [selectedAnswers, setSelectedAnswers] = useState([]) const [showResults, setShowResults] = useState(false) const [quizCompleted, setQuizCompleted] = useState(false) const handleAnswerSelect = (answerIndex: number) => { const newAnswers = [...selectedAnswers] newAnswers[currentQuestion] = answerIndex setSelectedAnswers(newAnswers) } const handleNext = () => { if (currentQuestion < quizQuestions.length - 1) { setCurrentQuestion(currentQuestion + 1) } else { setQuizCompleted(true) setShowResults(true) } } const handlePrevious = () => { if (currentQuestion > 0) { setCurrentQuestion(currentQuestion - 1) } } const calculateScore = () => { let correct = 0 selectedAnswers.forEach((answer, index) => { if (answer === quizQuestions[index].correct) { correct++ } }) return correct } const progress = ((currentQuestion + 1) / quizQuestions.length) * 100 if (showResults) { const score = calculateScore() const percentage = (score / quizQuestions.length) * 100 return (

Your Score: {score} / {quizQuestions.length} {percentage >= 80 ? "Excellent work!" : percentage >= 60 ? "Good job!" : "Keep studying!"}

{percentage.toFixed(0)}% Correct

{quizQuestions.map((question, index) => { const userAnswer = selectedAnswers[index] const isCorrect = userAnswer === question.correct return (

{isCorrect ? ( ) : ( )} Question {index + 1}

{question.question}

{question.options.map((option, optionIndex) => (

{option}

))}

Explanation: {question.explanation}

) })}

) } return (

Question {currentQuestion + 1} of {quizQuestions.length}

{Math.round(progress)}% Complete

{quizQuestions[currentQuestion].question}

handleAnswerSelect(Number.parseInt(value))} > {quizQuestions[currentQuestion].options.map((option, index) => (

{option}

))}

) } [V0_FILE]typescriptreact:file="app/admin/materials/edit/[id]/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { getLearningMaterialById, updateLearningMaterial } from "@/app/admin/actions" import { useToast } from "@/components/ui/use-toast" import { ColoredHeading } from "@/components/colored-heading" import Link from "next/link" export default function EditMaterialPage({ params }: { params: { id: string } }) { const router = useRouter() const { toast } = useToast() const { id } = params const [isLoading, setIsLoading] = useState(true) const [isSaving, setIsSaving] = useState(false) const [title, setTitle] = useState("") const [subject, setSubject] = useState("biology") const [topic, setTopic] = useState("") const [contentType, setContentType] = useState("video") const [description, setDescription] = useState("") const [quranicIntegration, setQuranicIntegration] = useState("") useEffect(() => { async function fetchMaterial() { setIsLoading(true) try { const material = await getLearningMaterialById(id) if (material) { setTitle(material.title) setSubject(material.subject.toLowerCase()) setContentType(material.type.toLowerCase()) setTopic(material.topic || "") setDescription(material.description || "") setQuranicIntegration(material.quranicIntegration || "") } else { toast({ title: "Error", description: "Material not found.", variant: "destructive", }) router.push("/admin") } } catch (error) { toast({ title: "Error", description: "Failed to load material details.", variant: "destructive", }) } finally { setIsLoading(false) } } fetchMaterial() }, [id, router, toast]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSaving(true) try { const formData = new FormData() formData.set("title", title) formData.set("subject", subject) formData.set("topic", topic) formData.set("content-type", contentType) formData.set("description", description) formData.set("quranic-integration", quranicIntegration) const result = await updateLearningMaterial(id, formData) if (result.success) { toast({ title: "Success!", description: "Material updated successfully.", }) router.push("/admin") } else { throw new Error(result.error) } } catch (error) { toast({ title: "Error", description: "Failed to update material. Please try again.", variant: "destructive", }) } finally { setIsSaving(false) } } if (isLoading) { return (

Loading material details...

) } return (

Edit Material{" "} Details Update the information for this learning material

Title setTitle(e.target.value)} required className="gradient-border" />

Subject

Topic setTopic(e.target.value)} required className="gradient-border" />

Content Type

Description

setDescription(e.target.value)}
                  required
                  className="gradient-border"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="quranic-integration">Quranic Integration</Label>
                <Textarea
                  id="quranic-integration"
                  value={quranicIntegration}
                  onChange={(e) => setQuranicIntegration(e.target.value)}
                  required
                  className="gradient-border"
                />
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" type="button" onClick={() => router.push("/admin")} className="gradient-border">
                Cancel
              </Button>
              <Button
                type="submit"
                className="bg-qnekt-green hover:bg-qnekt-green/90 gradient-border"
                disabled={isSaving}
              >
                {isSaving ? "Saving..." : "Save Changes"}
              </Button>
            </CardFooter>
          </form>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/edit/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { getUserById, updateUser } from "@/app/admin/actions"
import { useToast } from "@/components/ui/use-toast"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"

export default function EditUserPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { id } = params
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [role, setRole] = useState("student")

useEffect(() => {
    async function fetchUser() {
      setIsLoading(true)
      try {
        const user = await getUserById(id)

if (user) {
          setName(user.name)
          setEmail(user.email)
          setRole(user.role.toLowerCase())
        } else {
          toast({
            title: "Error",
            description: "User not found.",
            variant: "destructive",
          })
          router.push("/admin")
        }
      } catch (error) {
        toast({
          title: "Error",
          description: "Failed to load user details.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchUser()
  }, [id, router, toast])

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

try {
      const formData = new FormData()
      formData.set("name", name)
      formData.set("email", email)
      formData.set("role", role)

const result = await updateUser(id, formData)

if (result.success) {
        toast({
          title: "Success!",
          description: "User updated successfully.",
        })
        router.push("/admin")
      } else {
        throw new Error(result.error)
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to update user. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

if (isLoading) {
    return (
      <div className="container py-10">
        <div className="text-center">Loading user details...</div>
      </div>
    )
  }

return (
    <div className="container py-10">
      <div className="flex flex-col space-y-6 max-w-3xl mx-auto">
        <div className="flex justify-between items-center">
          <ColoredHeading text="Edit User" element="h1" className="text-3xl font-bold tracking-tight" />
          <Button variant="outline" asChild className="gradient-border">
            <Link href="/admin">Back to Admin Panel</Link>
          </Button>
        </div>

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { getAnnouncementById, updateAnnouncement } from "@/app/admin/actions"
import { useToast } from "@/components/ui/use-toast"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"

export default function EditAnnouncementPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { id } = params
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [title, setTitle] = useState("")
  const [recipients, setRecipients] = useState("all")
  const [message, setMessage] = useState("")

useEffect(() => {
    async function fetchAnnouncement() {
      setIsLoading(true)
      try {
        const announcement = await getAnnouncementById(id)

if (announcement) {
          setTitle(announcement.title)
          setRecipients(announcement.recipients.toLowerCase().replace(" users", "").replace(" only", ""))
          setMessage(announcement.message)
        } else {
          toast({
            title: "Error",
            description: "Announcement not found.",
            variant: "destructive",
          })
          router.push("/admin")
        }
      } catch (error) {
        toast({
          title: "Error",
          description: "Failed to load announcement details.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchAnnouncement()
  }, [id, router, toast])

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

try {
      const formData = new FormData()
      formData.set("title", title)
      formData.set("recipients", recipients)
      formData.set("message", message)

const result = await updateAnnouncement(id, formData)

if (result.success) {
        toast({
          title: "Success!",
          description: "Announcement updated successfully.",
        })
        router.push("/admin")
      } else {
        throw new Error(result.error)
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to update announcement. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

if (isLoading) {
    return (
      <div className="container py-10">
        <div className="text-center">Loading announcement details...</div>
      </div>
    )
  }

return (
    <div className="container py-10">
      <div className="flex flex-col space-y-6 max-w-3xl mx-auto">
        <div className="flex justify-between items-center">
          <ColoredHeading text="Edit Announcement" element="h1" className="text-3xl font-bold tracking-tight" />
          <Button variant="outline" asChild className="gradient-border">
            <Link href="/admin">Back to Admin Panel</Link>
          </Button>
        </div>

<Card className="gradient-border-animated">
          <form onSubmit={handleSubmit}>
            <CardHeader>
              <CardTitle>
                <span className="text-qnekt-black">Edit</span> <span className="text-qnekt-red">Announcement</span>{" "}
                <span className="text-qnekt-green">Details</span>
              </CardTitle>
              <CardDescription>Update the information for this announcement</CardDescription>
              <div className="gradient-line w-full"></div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="title">Title</Label>
                <Input
                  id="title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  required
                  className="gradient-border"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="recipients">Recipients</Label>
                <Select value={recipients} onValueChange={setRecipients}>
                  <SelectTrigger className="gradient-border">
                    <SelectValue placeholder="Select recipients" />
                  </SelectTrigger>
                  <SelectContent className="gradient-border">
                    <SelectItem value="all">All Users</SelectItem>
                    <SelectItem value="students">Students Only</SelectItem>
                    <SelectItem value="educators">Educators Only</SelectItem>
                    <SelectItem value="admins">Admins Only</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="message">Message</Label>
                <Textarea
                  id="message"
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  className="min-h-[150px] gradient-border"
                  required
                />
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" type="button" onClick={() => router.push("/admin")} className="gradient-border">
                Cancel
              </Button>
              <Button
                type="submit"
                className="bg-qnekt-green hover:bg-qnekt-green/90 gradient-border"
                disabled={isSaving}
              >
                {isSaving ? "Saving..." : "Save Changes"}
              </Button>
            </CardFooter>
          </form>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/biology/resources/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Download, Play, FileText, BookOpen, Video, ImageIcon } from "lucide-react"
import { ColoredHeading } from "@/components/colored-heading"

export default function BiologyResourcesPage() {
  return (
    <div className="container py-10">
      <div className="flex items-center justify-between mb-8">
        <Button variant="outline" asChild className="gradient-border">
          <Link href="/subjects/biology">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Biology
          </Link>
        </Button>
        <ColoredHeading text="Biology Resources" className="text-3xl font-bold" />
        <div className="w-24"></div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* Videos Section */}
        <Card className="gradient-border-animated">
          <CardHeader>
            <div className="flex items-center gap-2">
              <Video className="h-6 w-6 text-qnekt-red" />
              <CardTitle className="text-qnekt-red">Video Lectures</CardTitle>
            </div>
            <CardDescription>Comprehensive video lessons covering all biology topics</CardDescription>
            <div className="gradient-line w-full"></div>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Human Digestive System</span>
                <Button size="sm" className="bg-qnekt-green hover:bg-qnekt-green/90">
                  <Play className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Circulatory System</span>
                <Button size="sm" className="bg-qnekt-green hover:bg-qnekt-green/90">
                  <Play className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Respiratory System</span>
                <Button size="sm" className="bg-qnekt-green hover:bg-qnekt-green/90">
                  <Play className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <Button asChild className="w-full mt-4 bg-qnekt-red hover:bg-qnekt-red/90 gradient-border">
              <Link href="/subjects/biology/videos">View All Videos</Link>
            </Button>
          </CardContent>
        </Card>

{/* PDF Notes Section */}
        <Card className="gradient-border-animated">
          <CardHeader>
            <div className="flex items-center gap-2">
              <FileText className="h-6 w-6 text-qnekt-green" />
              <CardTitle className="text-qnekt-green">PDF Notes</CardTitle>
            </div>
            <CardDescription>Downloadable study materials and comprehensive notes</CardDescription>
            <div className="gradient-line w-full"></div>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Human Anatomy Guide</span>
                <Button size="sm" className="bg-qnekt-black hover:bg-qnekt-black/90 text-white">
                  <Download className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Plant Biology Notes</span>
                <Button size="sm" className="bg-qnekt-black hover:bg-qnekt-black/90 text-white">
                  <Download className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Life Cycles Summary</span>
                <Button size="sm" className="bg-qnekt-black hover:bg-qnekt-black/90 text-white">
                  <Download className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <Button asChild className="w-full mt-4 bg-qnekt-green hover:bg-qnekt-green/90 gradient-border">
              <Link href="/subjects/biology/pdf-notes">View All PDFs</Link>
            </Button>
          </CardContent>
        </Card>

{/* Infographics Section */}
        <Card className="gradient-border-animated">
          <CardHeader>
            <div className="flex items-center gap-2">
              <ImageIcon className="h-6 w-6 text-qnekt-black" />
              <CardTitle className="text-qnekt-black">Infographics</CardTitle>
            </div>
            <CardDescription>Visual representations of complex biological processes</CardDescription>
            <div className="gradient-line w-full"></div>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Cell Structure</span>
                <Button size="sm" className="bg-qnekt-red hover:bg-qnekt-red/90">
                  <ImageIcon className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Photosynthesis Process</span>
                <Button size="sm" className="bg-qnekt-red hover:bg-qnekt-red/90">
                  <ImageIcon className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">DNA Structure</span>
                <Button size="sm" className="bg-qnekt-red hover:bg-qnekt-red/90">
                  <ImageIcon className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <Button asChild className="w-full mt-4 bg-qnekt-black hover:bg-qnekt-black/90 text-white gradient-border">
              <Link href="/subjects/biology/infographics">View All Infographics</Link>
            </Button>
          </CardContent>
        </Card>

{/* Interactive Quizzes */}
        <Card className="gradient-border-animated">
          <CardHeader>
            <div className="flex items-center gap-2">
              <BookOpen className="h-6 w-6 text-qnekt-red" />
              <CardTitle className="text-qnekt-red">Interactive Quizzes</CardTitle>
            </div>
            <CardDescription>Test your knowledge with interactive assessments</CardDescription>
            <div className="gradient-line w-full"></div>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Human Anatomy Quiz</span>
                <Button size="sm" className="bg-qnekt-green hover:bg-qnekt-green/90">
                  Start
                </Button>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Plant Biology Quiz</span>
                <Button size="sm" className="bg-qnekt-green hover:bg-qnekt-green/90">
                  Start
                </Button>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span className="text-sm text-qnekt-black">Life Cycles Quiz</span>
                <Button size="sm" className="bg-qnekt-green hover:bg-qnekt-green/90">
                  Start
                </Button>
              </div>
            </div>
            <Button asChild className="w-full mt-4 bg-qnekt-red hover:bg-qnekt-red/90 gradient-border">
              <Link href="/subjects/biology/quizzes">Take All Quizzes</Link>
            </Button>
          </CardContent>
        </Card>

{/* Quranic Integration */}
        <Card className="gradient-border-animated">
          <CardHeader>
            <div className="flex items-center gap-2">
              <BookOpen className="h-6 w-6 text-qnekt-green" />
              <CardTitle className="text-qnekt-green">Quranic Integration</CardTitle>
            </div>
            <CardDescription>Explore how biology connects with Quranic wisdom</CardDescription>
            <div className="gradient-line w-full"></div>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="p-3 bg-qnekt-green/10 rounded border border-qnekt-green">
                <p className="text-sm text-qnekt-black font-semibold">Verses on Human Creation</p>
                <p className="text-xs text-qnekt-black mt-1">Quran 23:12-14</p>
              </div>
              <div className="p-3 bg-qnekt-green/10 rounded border border-qnekt-green">
                <p className="text-sm text-qnekt-black font-semibold">Plant Life and Water</p>
                <p className="text-xs text-qnekt-black mt-1">Quran 6:99</p>
              </div>
              <div className="p-3 bg-qnekt-green/10 rounded border border-qnekt-green">
                <p className="text-sm text-qnekt-black font-semibold">Life from Water</p>
                <p className="text-xs text-qnekt-black mt-1">Quran 21:30</p>
              </div>
            </div>
            <Button asChild className="w-full mt-4 bg-qnekt-green hover:bg-qnekt-green/90 gradient-border">
              <Link href="/subjects/quran">Explore Quranic Studies</Link>
            </Button>
          </CardContent>
        </Card>

{/* Study Tools */}
        <Card className="gradient-border-animated">
          <CardHeader>
            <div className="flex items-center gap-2">
              <BookOpen className="h-6 w-6 text-qnekt-black" />
              <CardTitle className="text-qnekt-black">Study Tools</CardTitle>
            </div>
            <CardDescription>Additional tools to enhance your learning experience</CardDescription>
            <div className="gradient-line w-full"></div>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <Button className="w-full justify-start bg-qnekt-red hover:bg-qnekt-red/90 gradient-border">
                <BookOpen className="h-4 w-4 mr-2" />
                Glossary
              </Button>
              <Button className="w-full justify-start bg-qnekt-green hover:bg-qnekt-green/90 gradient-border">
                <FileText className="h-4 w-4 mr-2" />
                Study Planner
              </Button>
              <Button className="w-full justify-start bg-qnekt-black hover:bg-qnekt-black/90 text-white gradient-border">
                <Download className="h-4 w-4 mr-2" />
                Progress Tracker
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/biology/videos/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Play, Clock, Eye } from "lucide-react"
import { ColoredHeading } from "@/components/colored-heading"

export default function BiologyVideosPage() {
  const videos = [
    {
      id: 1,
      title: "Human Digestive System",
      description: "Complete overview of how food is processed in the human body",
      duration: "15:30",
      views: "2.5K",
      thumbnail: "/placeholder.svg?height=200&width=350&query=digestive+system+educational",
      quranicConnection: "Quran 23:12-14 - Human Creation",
    },
    {
      id: 2,
      title: "Circulatory System and Heart",
      description: "Understanding blood circulation and heart function",
      duration: "18:45",
      views: "3.1K",
      thumbnail: "/placeholder.svg?height=200&width=350&query=heart+circulatory+system",
      quranicConnection: "Quran 16:78 - Hearing, Sight, and Hearts",
    },
    {
      id: 3,
      title: "Respiratory System",
      description: "How we breathe and exchange gases",
      duration: "12:20",
      views: "1.8K",
      thumbnail: "/placeholder.svg?height=200&width=350&query=lungs+respiratory+system",
      quranicConnection: "Quran 15:29 - Breathing Life into Creation",
    },
    {
      id: 4,
      title: "Plant Photosynthesis",
      description: "How plants convert sunlight into energy",
      duration: "14:15",
      views: "2.2K",
      thumbnail: "/placeholder.svg?height=200&width=350&query=photosynthesis+plants",
      quranicConnection: "Quran 6:99 - Plant Growth and Water",
    },
    {
      id: 5,
      title: "Cell Structure and Function",
      description: "The basic unit of life and its components",
      duration: "16:40",
      views: "2.9K",
      thumbnail: "/placeholder.svg?height=200&width=350&query=cell+structure+biology",
      quranicConnection: "Quran 21:30 - Everything Made from Water",
    },
    {
      id: 6,
      title: "DNA and Genetics",
      description: "Understanding heredity and genetic information",
      duration: "20:10",
      views: "3.5K",
      thumbnail: "/placeholder.svg?height=200&width=350&query=dna+genetics+biology",
      quranicConnection: "Quran 32:7 - Perfect Creation",
    },
  ]

return (
    <div className="container py-10">
      <div className="flex items-center justify-between mb-8">
        <Button variant="outline" asChild className="gradient-border">
          <Link href="/subjects/biology/resources">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Resources
          </Link>
        </Button>
        <ColoredHeading text="Biology Video Lectures" className="text-3xl font-bold" />
        <div className="w-24"></div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {videos.map((video) => (
          <Card key={video.id} className="gradient-border-animated overflow-hidden">
            <div className="relative">
              <img src={video.thumbnail || "/placeholder.svg"} alt={video.title} className="w-full h-48 object-cover" />
              <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300">
                <Button size="lg" className="bg-qnekt-red hover:bg-qnekt-red/90 rounded-full p-4">
                  <Play className="h-8 w-8" />
                </Button>
              </div>
              <div className="absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-xs flex items-center gap-1">
                <Clock className="h-3 w-3" />
                {video.duration}
              </div>
            </div>
            <CardHeader>
              <CardTitle className="text-lg text-qnekt-red">{video.title}</CardTitle>
              <CardDescription>{video.description}</CardDescription>
              <div className="gradient-line w-full"></div>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-between text-sm text-qnekt-black mb-3">
                <div className="flex items-center gap-1">
                  <Eye className="h-4 w-4" />
                  {video.views} views
                </div>
              </div>
              <div className="bg-qnekt-green/10 p-3 rounded border border-qnekt-green mb-4">
                <p className="text-xs text-qnekt-black font-semibold">Quranic Connection:</p>
                <p className="text-xs text-qnekt-black">{video.quranicConnection}</p>
              </div>
              <Button className="w-full bg-qnekt-green hover:bg-qnekt-green/90 gradient-border">
                <Play className="h-4 w-4 mr-2" />
                Watch Video
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/biology/pdf-notes/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Download, FileText, Calendar } from "lucide-react"
import { ColoredHeading } from "@/components/colored-heading"

export default function BiologyPDFNotesPage() {
  const pdfNotes = [
    {
      id: 1,
      title: "Human Anatomy Complete Guide",
      description: "Comprehensive study guide covering all human body systems",
      pages: 45,
      size: "2.3 MB",
      lastUpdated: "2023-11-15",
      category: "Human Anatomy",
      quranicIntegration: true,
    },
    {
      id: 2,
      title: "Plant Biology and Photosynthesis",
      description: "Detailed notes on plant structure, function, and photosynthesis",
      pages: 32,
      size: "1.8 MB",
      lastUpdated: "2023-11-10",
      category: "Plant Biology",
      quranicIntegration: true,
    },
    {
      id: 3,
      title: "Cell Structure and Function",
      description: "In-depth study of cellular components and processes",
      pages: 28,
      size: "1.5 MB",
      lastUpdated: "2023-11-08",
      category: "Cell Biology",
      quranicIntegration: true,
    },
    {
      id: 4,
      title: "Life Cycles and Reproduction",
      description: "Study guide on various life cycles in the biological world",
      pages: 38,
      size: "2.1 MB",
      lastUpdated: "2023-11-05",
      category: "Life Cycles",
      quranicIntegration: true,
    },
    {
      id: 5,
      title: "Genetics and DNA",
      description: "Comprehensive notes on heredity and genetic principles",
      pages: 42,
      size: "2.5 MB",
      lastUpdated: "2023-11-01",
      category: "Genetics",
      quranicIntegration: true,
    },
    {
      id: 6,
      title: "Ecology and Environment",
      description: "Study of ecosystems and environmental interactions",
      pages: 35,
      size: "1.9 MB",
      lastUpdated: "2023-10-28",
      category: "Ecology",
      quranicIntegration: true,
    },
  ]

return (
    <div className="container py-10">
      <div className="flex items-center justify-between mb-8">
        <Button variant="outline" asChild className="gradient-border">
          <Link href="/subjects/biology/resources">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Resources
          </Link>
        </Button>
        <ColoredHeading text="Biology PDF Notes" className="text-3xl font-bold" />
        <div className="w-24"></div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {pdfNotes.map((pdf) => (
          <Card key={pdf.id} className="gradient-border-animated">
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-2">
                  <FileText className="h-6 w-6 text-qnekt-red" />
                  <div>
                    <CardTitle className="text-lg text-qnekt-red">{pdf.title}</CardTitle>
                    <div className="text-xs text-qnekt-green font-semibold mt-1">{pdf.category}</div>
                  </div>
                </div>
                {pdf.quranicIntegration && (
                  <div className="bg-qnekt-green text-qnekt-black px-2 py-1 rounded text-xs font-bold">Quranic</div>
                )}
              </div>
              <CardDescription>{pdf.description}</CardDescription>
              <div className="gradient-line w-full"></div>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex justify-between text-sm text-qnekt-black">
                  <span>Pages:</span>
                  <span className="font-semibold">{pdf.pages}</span>
                </div>
                <div className="flex justify-between text-sm text-qnekt-black">
                  <span>Size:</span>
                  <span className="font-semibold">{pdf.size}</span>
                </div>
                <div className="flex justify-between text-sm text-qnekt-black">
                  <span>Updated:</span>
                  <div className="flex items-center gap-1">
                    <Calendar className="h-3 w-3" />
                    <span className="font-semibold">{pdf.lastUpdated}</span>
                  </div>
                </div>
              </div>

<div className="mt-4 space-y-2">
                <Button className="w-full bg-qnekt-green hover:bg-qnekt-green/90 gradient-border">
                  <Download className="h-4 w-4 mr-2" />
                  Download PDF
                </Button>
                <Button variant="outline" className="w-full gradient-border">
                  <FileText className="h-4 w-4 mr-2" />
                  Preview
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

<div className="mt-12 text-center">
        <Card className="gradient-border-animated p-6">
          <CardHeader>
            <CardTitle className="text-qnekt-green">Need More Resources?</CardTitle>
            <div className="gradient-line w-32 mx-auto"></div>
          </CardHeader>
          <CardContent>
            <p className="text-qnekt-black mb-4">
              Can't find what you're looking for? Request additional study materials or suggest new topics.
            </p>
            <div className="flex gap-4 justify-center">
              <Button className="bg-qnekt-red hover:bg-qnekt-red/90 gradient-border">Request Material</Button>
              <Button variant="outline" className="gradient-border">
                Suggest Topic
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/biology/infographics/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Download, Eye, ImageIcon } from "lucide-react"
import { ColoredHeading } from "@/components/colored-heading"

export default function BiologyInfographicsPage() {
  const infographics = [
    {
      id: 1,
      title: "Human Body Systems Overview",
      description: "Visual guide to all major human body systems",
      category: "Human Anatomy",
      size: "1.2 MB",
      format: "PNG",
      thumbnail: "/placeholder.svg?height=300&width=400&query=human+body+systems+infographic",
      quranicConnection: "Quran 23:12-14",
    },
    {
      id: 2,
      title: "Photosynthesis Process",
      description: "Step-by-step visual of how plants make food",
      category: "Plant Biology",
      size: "950 KB",
      format: "PNG",
      thumbnail: "/placeholder.svg?height=300&width=400&query=photosynthesis+process+infographic",
      quranicConnection: "Quran 6:99",
    },
    {
      id: 3,
      title: "Cell Structure Diagram",
      description: "Detailed diagram of plant and animal cells",
      category: "Cell Biology",
      size: "1.1 MB",
      format: "PNG",
      thumbnail: "/placeholder.svg?height=300&width=400&query=cell+structure+diagram",
      quranicConnection: "Quran 21:30",
    },
    {
      id: 4,
      title: "DNA Structure and Replication",
      description: "Visual representation of DNA structure",
      category: "Genetics",
      size: "1.3 MB",
      format: "PNG",
      thumbnail: "/placeholder.svg?height=300&width=400&query=dna+structure+infographic",
      quranicConnection: "Quran 32:7",
    },
    {
      id: 5,
      title: "Food Chain and Ecosystem",
      description: "How energy flows through ecosystems",
      category: "Ecology",
      size: "1.0 MB",
      format: "PNG",
      thumbnail: "/placeholder.svg?height=300&width=400&query=food+chain+ecosystem",
      quranicConnection: "Quran 15:19",
    },
    {
      id: 6,
      title: "Life Cycle of Plants",
      description: "Complete plant life cycle visualization",
      category: "Plant Biology",
      size: "890 KB",
      format: "PNG",
      thumbnail: "/placeholder.svg?height=300&width=400&query=plant+life+cycle",
      quranicConnection: "Quran 50:9-11",
    },
  ]

return (
    <div className="container py-10">
      <div className="flex items-center justify-between mb-8">
        <Button variant="outline" asChild className="gradient-border">
          <Link href="/subjects/biology/resources">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Resources
          </Link>
        </Button>
        <ColoredHeading text="Biology Infographics" className="text-3xl font-bold" />
        <div className="w-24"></div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {infographics.map((infographic) => (
          <Card key={infographic.id} className="gradient-border-animated overflow-hidden">
            <div className="relative group">
              <img
                src={infographic.thumbnail || "/placeholder.svg"}
                alt={infographic.title}
                className="w-full h-48 object-cover"
              />
              <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <Button size="lg" className="bg-qnekt-green hover:bg-qnekt-green/90 rounded-full p-4">
                  <Eye className="h-8 w-8" />
                </Button>
              </div>
              <div className="absolute top-2 right-2 bg-qnekt-red text-white px-2 py-1 rounded text-xs font-bold">
                {infographic.format}
              </div>
            </div>
            <CardHeader>
              <div className="flex items-start justify-between">
                <div>
                  <CardTitle className="text-lg text-qnekt-red">{infographic.title}</CardTitle>
                  <div className="text-xs text-qnekt-green font-semibold mt-1">{infographic.category}</div>
                </div>
                <ImageIcon className="h-5 w-5 text-qnekt-black" />
              </div>
              <CardDescription>{infographic.description}</CardDescription>
              <div className="gradient-line w-full"></div>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex justify-between text-sm text-qnekt-black">
                  <span>Size:</span>
                  <span className="font-semibold">{infographic.size}</span>
                </div>
                <div className="bg-qnekt-green/10 p-3 rounded border border-qnekt-green">
                  <p className="text-xs text-qnekt-black font-semibold">Quranic Reference:</p>
                  <p className="text-xs text-qnekt-black">{infographic.quranicConnection}</p>
                </div>
              </div>

<div className="mt-4 space-y-2">
                <Button className="w-full bg-qnekt-green hover:bg-qnekt-green/90 gradient-border">
                  <Download className="h-4 w-4 mr-2" />
                  Download Image
                </Button>
                <Button variant="outline" className="w-full gradient-border">
                  <Eye className="h-4 w-4 mr-2" />
                  View Full Size
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

<div className="mt-12 text-center">
        <Card className="gradient-border-animated p-6">
          <CardHeader>
            <CardTitle className="text-qnekt-green">Custom Infographics</CardTitle>
            <div className="gradient-line w-32 mx-auto"></div>
          </CardHeader>
          <CardContent>
            <p className="text-qnekt-black mb-4">
              Need a specific diagram or infographic? Our team can create custom visuals for your learning needs.
            </p>
            <Button className="bg-qnekt-red hover:bg-qnekt-red/90 gradient-border">Request Custom Infographic</Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/storage.ts" isMerged="true"
"use client"

// Storage utilities for persistent data
export class LocalStorage {
  static get<T>(key: string, defaultValue: T): T {
    if (typeof window === "undefined") return defaultValue

try {
      const item = localStorage.getItem(key)
      return item ? JSON.parse(item) : defaultValue
    } catch (error) {
      console.error(`Error reading from localStorage key "${key}":`, error)
      return defaultValue
    }
  }

static set<T>(key: string, value: T): void {
    if (typeof window === "undefined") return

try {
      localStorage.setItem(key, JSON.stringify(value))
    } catch (error) {
      console.error(`Error writing to localStorage key "${key}":`, error)
    }
  }

static remove(key: string): void {
    if (typeof window === "undefined") return

try {
      localStorage.removeItem(key)
    } catch (error) {
      console.error(`Error removing localStorage key "${key}":`, error)
    }
  }
}

// Storage keys
export const STORAGE_KEYS = {
  LEARNING_MATERIALS: "qnekt_learning_materials",
  USERS: "qnekt_users",
  ANNOUNCEMENTS: "qnekt_announcements",
} as const
[V0_FILE]typescriptreact:file="app/admin/actions.ts" isEdit="true" isMerged="true"
"use server"

import { revalidatePath } from "next/cache"

// Types for our data
export type LearningMaterial = {
  id: string
  title: string
  subject: string
  type: string
  dateAdded: string
  topic?: string
  description?: string
  quranicIntegration?: string
}

export type User = {
  id: string
  name: string
  email: string
  role: string
  joinDate: string
}

export type Announcement = {
  id: string
  title: string
  recipients: string
  message: string
  date: string
}

// Default data that will be used if no data exists in storage
const defaultLearningMaterials: LearningMaterial[] = [
  {
    id: "1",
    title: "Human Digestive System",
    subject: "Biology",
    type: "Video",
    dateAdded: "2023-10-15",
    topic: "Human Anatomy",
    description: "Learn about the digestive system",
    quranicIntegration: "Quranic verses about human creation",
  },
  {
    id: "2",
    title: "Periodic Table of Elements",
    subject: "Chemistry",
    type: "Infographic",
    dateAdded: "2023-09-28",
    topic: "Elements",
    description: "Understanding the periodic table",
    quranicIntegration: "Verses about creation and elements",
  },
  {
    id: "3",
    title: "Light and Optics",
    subject: "Physics",
    type: "Quiz",
    dateAdded: "2023-11-05",
    topic: "Light",
    description: "Physics of light and optics",
    quranicIntegration: "Quranic verses about light",
  },
  {
    id: "4",
    title: "Quranic Verses on Creation",
    subject: "Quran",
    type: "PDF Notes",
    dateAdded: "2023-10-22",
    topic: "Creation",
    description: "Verses about creation",
    quranicIntegration: "Direct Quranic study",
  },
]

const defaultUsers: User[] = [
  {
    id: "1",
    name: "Ahmed Abdullah",
    email: "ahmed@example.com",
    role: "Student",
    joinDate: "2023-01-15",
  },
  {
    id: "2",
    name: "Fatima Khan",
    email: "fatima@example.com",
    role: "Educator",
    joinDate: "2022-11-08",
  },
  {
    id: "3",
    name: "Omar Yusuf",
    email: "omar@example.com",
    role: "Admin",
    joinDate: "2022-09-20",
  },
  {
    id: "4",
    name: "Aisha Rahman",
    email: "aisha@example.com",
    role: "Student",
    joinDate: "2023-03-05",
  },
]

const defaultAnnouncements: Announcement[] = [
  {
    id: "1",
    title: "New Biology Course Available",
    recipients: "All Users",
    message:
      "We are excited to announce the launch of our new Biology course on Human Anatomy. This course includes interactive videos, quizzes, and Quranic integration.",
    date: "2023-11-10",
  },
  {
    id: "2",
    title: "Platform Maintenance",
    recipients: "All Users",
    message:
      "The platform will be undergoing maintenance on October 30th from 2:00 AM to 5:00 AM UTC. During this time, the website may be temporarily unavailable.",
    date: "2023-10-25",
  },
  {
    id: "3",
    title: "New Educator Onboarding",
    recipients: "Educators Only",
    message:
      "Welcome to our new educators! We will be hosting an onboarding session on October 20th to help you get familiar with our platform and content creation tools.",
    date: "2023-10-15",
  },
]

// Helper functions to get data from storage (these will be called from client components)
function getStoredData<T>(key: string, defaultData: T[]): T[] {
  // This is a server action, so we can't access localStorage directly
  // We'll return default data and let client components handle storage
  return defaultData
}

// Server actions
export async function getLearningMaterials(subject = "all") {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 100))

// Return default data - client components will handle storage
  const materials = defaultLearningMaterials

if (subject === "all") {
    return [...materials]
  }

return materials.filter((material) => material.subject.toLowerCase() === subject.toLowerCase())
}

export async function getLearningMaterialById(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 100))
  return defaultLearningMaterials.find((material) => material.id === id) || null
}

export async function addLearningMaterial(formData: FormData) {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 500))

const title = formData.get("title") as string
  const subject = formData.get("subject") as string
  const topic = formData.get("topic") as string
  const contentType = formData.get("content-type") as string
  const description = formData.get("description") as string
  const quranicIntegration = formData.get("quranic-integration") as string

// Validate data
  if (!title || !subject || !contentType) {
    throw new Error("Missing required fields")
  }

// Create new material
  const newMaterial: LearningMaterial = {
    id: Date.now().toString(),
    title,
    subject,
    type: contentType,
    dateAdded: new Date().toISOString().split("T")[0],
    topic,
    description,
    quranicIntegration,
  }

// Revalidate the admin page
  revalidatePath("/admin")

return { success: true, material: newMaterial }
}

export async function updateLearningMaterial(id: string, formData: FormData) {
  await new Promise((resolve) => setTimeout(resolve, 500))

const updatedMaterial: LearningMaterial = {
    id,
    title,
    subject,
    type: contentType,
    dateAdded: new Date().toISOString().split("T")[0],
    topic,
    description,
    quranicIntegration,
  }

revalidatePath("/admin")
  return { success: true, material: updatedMaterial }
}

export async function deleteLearningMaterial(id: string) {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 300))

revalidatePath("/admin")
  return { success: true }
}

export async function getUsers(role = "all") {
  await new Promise((resolve) => setTimeout(resolve, 100))

const users = defaultUsers

if (role === "all") {
    return [...users]
  }

return users.filter((user) => user.role.toLowerCase() === role.toLowerCase())
}

export async function getUserById(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 100))
  return defaultUsers.find((user) => user.id === id) || null
}

export async function addUser(formData: FormData) {
  await new Promise((resolve) => setTimeout(resolve, 500))

const name = formData.get("name") as string
  const email = formData.get("email") as string
  const role = formData.get("role") as string

if (!name || !email || !role) {
    throw new Error("Missing required fields")
  }

const newUser: User = {
    id: Date.now().toString(),
    name,
    email,
    role,
    joinDate: new Date().toISOString().split("T")[0],
  }

revalidatePath("/admin")

return { success: true, user: newUser }
}

export async function updateUser(id: string, formData: FormData) {
  await new Promise((resolve) => setTimeout(resolve, 500))

const name = formData.get("name") as string
  const email = formData.get("email") as string
  const role = formData.get("role") as string

const updatedUser: User = {
    id,
    name,
    email,
    role,
    joinDate: new Date().toISOString().split("T")[0],
  }

revalidatePath("/admin")
  return { success: true, user: updatedUser }
}

export async function deleteUser(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 300))

revalidatePath("/admin")
  return { success: true }
}

export async function getAnnouncements() {
  await new Promise((resolve) => setTimeout(resolve, 100))
  return [...defaultAnnouncements]
}

export async function getAnnouncementById(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 100))
  return defaultAnnouncements.find((announcement) => announcement.id === id) || null
}

export async function addAnnouncement(formData: FormData) {
  await new Promise((resolve) => setTimeout(resolve, 500))

const title = formData.get("title") as string
  const recipients = formData.get("recipients") as string
  const message = formData.get("message") as string

if (!title || !recipients || !message) {
    throw new Error("Missing required fields")
  }

const newAnnouncement: Announcement = {
    id: Date.now().toString(),
    title,
    recipients,
    message,
    date: new Date().toISOString().split("T")[0],
  }

revalidatePath("/admin")

return { success: true, announcement: newAnnouncement }
}

export async function updateAnnouncement(id: string, formData: FormData) {
  await new Promise((resolve) => setTimeout(resolve, 500))

const title = formData.get("title") as string
  const recipients = formData.get("recipients") as string
  const message = formData.get("message") as string

const updatedAnnouncement: Announcement = {
    id,
    title,
    recipients,
    message,
    date: new Date().toISOString().split("T")[0],
  }

revalidatePath("/admin")
  return { success: true, announcement: updatedAnnouncement }
}

export async function deleteAnnouncement(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 300))

revalidatePath("/admin")
  return { success: true }
}
[V0_FILE]typescriptreact:file="components/admin/users-list.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { useRouter } from "next/navigation"
import { UserIcon } from "lucide-react"
import { usePersistentUsers } from "@/hooks/use-persistent-storage"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { AddUserForm } from "./add-user-form"

export function UsersList() {
  const router = useRouter()
  const { toast } = useToast()
  const { users, isLoaded, getUsersByRole, deleteUser } = usePersistentUsers()
  const [selectedRole, setSelectedRole] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [deleteId, setDeleteId] = useState<string | null>(null)
  const [isDeleting, setIsDeleting] = useState(false)

const filteredUsers = getUsersByRole(selectedRole).filter(
    (user) =>
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.email.toLowerCase().includes(searchQuery.toLowerCase()),
  )

async function handleDelete(id: string) {
    setIsDeleting(true)
    try {
      deleteUser(id)

toast({
        title: "Success!",
        description: "User has been deleted permanently.",
      })

router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to delete user. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsDeleting(false)
      setDeleteId(null)
    }
  }

if (!isLoaded) {
    return <div className="text-center py-8">Loading users...</div>
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Input
            placeholder="Search users..."
            className="max-w-sm"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
          <Select value={selectedRole} onValueChange={setSelectedRole}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by role" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Roles ({users.length})</SelectItem>
              <SelectItem value="student">Student ({getUsersByRole("student").length})</SelectItem>
              <SelectItem value="educator">Educator ({getUsersByRole("educator").length})</SelectItem>
              <SelectItem value="admin">Admin ({getUsersByRole("admin").length})</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <AddUserForm />
      </div>

<Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Email</TableHead>
            <TableHead>Role</TableHead>
            <TableHead>Join Date</TableHead>
            <TableHead className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {filteredUsers.length === 0 ? (
            <TableRow>
              <TableCell colSpan={5} className="text-center py-8">
                No users found matching your search.
              </TableCell>
            </TableRow>
          ) : (
            filteredUsers.map((user) => (
              <TableRow key={user.id}>
                <TableCell className="font-medium">
                  <div className="flex items-center gap-2">
                    <UserIcon className="h-4 w-4 text-muted-foreground" />
                    {user.name}
                  </div>
                </TableCell>
                <TableCell>{user.email}</TableCell>
                <TableCell>{user.role}</TableCell>
                <TableCell>{user.joinDate}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button variant="outline" size="sm" onClick={() => router.push(`/admin/users/edit/${user.id}`)}>
                      Edit
                    </Button>
                    <AlertDialog open={deleteId === user.id} onOpenChange={(open) => !open && setDeleteId(null)}>
                      <AlertDialogTrigger asChild>
                        <Button variant="destructive" size="sm" onClick={() => setDeleteId(user.id)}>
                          Delete
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                          <AlertDialogDescription>
                            This will permanently delete the user "{user.name}". This action cannot be undone.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() => handleDelete(user.id)}
                            disabled={isDeleting}
                            className="bg-red-600 hover:bg-red-700"
                          >
                            {isDeleting ? "Deleting..." : "Delete"}
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/quiz-generation.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Brain, CheckCircle, Clock, Target, Zap } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { EnhancedStorage, type EnhancedLearningMaterial, type Quiz, type QuizQuestion } from "@/lib/enhanced-storage"

export function QuizGeneration() {
  const [materials, setMaterials] = useState<EnhancedLearningMaterial[]>([])
  const [quizzes, setQuizzes] = useState<Quiz[]>([])
  const [generatingFor, setGeneratingFor] = useState<string | null>(null)
  const { toast } = useToast()

useEffect(() => {
    setMaterials(EnhancedStorage.getMaterials())
    setQuizzes(EnhancedStorage.getQuizzes())
  }, [])

// Quiz generation templates based on content
  const generateQuizQuestions = (material: EnhancedLearningMaterial): QuizQuestion[] => {
    const baseQuestions: QuizQuestion[] = [
      {
        id: "1",
        question: `What is the main topic covered in "${material.title}"?`,
        options: [material.title, "Alternative topic A", "Alternative topic B", "Alternative topic C"],
        correctAnswer: 0,
        explanation: `The main topic is ${material.title} as described in the learning material.`,
        difficulty: "easy",
      },
      {
        id: "2",
        question: `Based on the learning objectives, what will students understand after studying ${material.title}?`,
        options: [
          material.learningObjectives[0] || "Primary learning objective",
          "Unrelated concept A",
          "Unrelated concept B",
          "Unrelated concept C",
        ],
        correctAnswer: 0,
        explanation: `Students will understand: ${material.learningObjectives[0] || "the primary learning objective"}.`,
        difficulty: "medium",
      },
    ]

// Add subject-specific questions
    if (material.subjectName.toLowerCase().includes("biology")) {
      baseQuestions.push({
        id: "3",
        question: "Which of the following is a key biological concept related to this topic?",
        options: [
          "Cellular structure and function",
          "Mathematical equations",
          "Historical events",
          "Chemical reactions only",
        ],
        correctAnswer: 0,
        explanation: "Biology focuses on living organisms and their cellular structures and functions.",
        difficulty: "medium",
      })
    } else if (material.subjectName.toLowerCase().includes("chemistry")) {
      baseQuestions.push({
        id: "3",
        question: "What type of chemical processes might be involved in this topic?",
        options: [
          "Molecular interactions and reactions",
          "Only physical movements",
          "Historical documentation",
          "Mathematical proofs",
        ],
        correctAnswer: 0,
        explanation: "Chemistry involves the study of molecular interactions and chemical reactions.",
        difficulty: "medium",
      })
    } else if (material.subjectName.toLowerCase().includes("physics")) {
      baseQuestions.push({
        id: "3",
        question: "What physical principles are most relevant to this topic?",
        options: [
          "Energy, motion, and forces",
          "Only biological processes",
          "Historical events",
          "Chemical compositions",
        ],
        correctAnswer: 0,
        explanation: "Physics deals with fundamental principles of energy, motion, and forces.",
        difficulty: "medium",
      })
    }

// Add a challenging question
    baseQuestions.push({
      id: "4",
      question: `How does the content of "${material.title}" relate to real-world applications?`,
      options: [
        "It provides practical knowledge applicable to everyday situations",
        "It has no real-world relevance",
        "It only applies to theoretical scenarios",
        "It contradicts real-world observations",
      ],
      correctAnswer: 0,
      explanation:
        "Educational content is designed to provide practical, applicable knowledge for real-world understanding.",
      difficulty: "hard",
    })

return baseQuestions
  }

const generateQuiz = async (material: EnhancedLearningMaterial) => {
    setGeneratingFor(material.id)

try {
      // Simulate AI processing time
      await new Promise((resolve) => setTimeout(resolve, 3000))

const questions = generateQuizQuestions(material)

const quiz: Quiz = {
        id: Date.now().toString(),
        materialId: material.id,
        title: `Quiz: ${material.title}`,
        description: `Test your understanding of ${material.title} with this automatically generated quiz.`,
        questions,
        timeLimit: 15, // 15 minutes
        passingScore: 70, // 70%
        createdDate: new Date().toISOString().split("T")[0],
      }

EnhancedStorage.addQuiz(quiz)
      setQuizzes(EnhancedStorage.getQuizzes())

toast({
        title: "Quiz Generated Successfully!",
        description: `A ${questions.length}-question quiz has been created for "${material.title}".`,
      })
    } catch (error) {
      toast({
        title: "Generation Failed",
        description: "Failed to generate quiz. Please try again.",
        variant: "destructive",
      })
    } finally {
      setGeneratingFor(null)
    }
  }

const materialsWithoutQuizzes = materials.filter(
    (material) => !quizzes.some((quiz) => quiz.materialId === material.id),
  )

return (
    <div className="space-y-6">
      {/* Generation Status */}
      <Card className="gradient-border">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Brain className="h-5 w-5" />
            Quiz Generation Status
          </CardTitle>
          <CardDescription>Automatically generate quizzes based on uploaded learning materials</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="text-center p-4 bg-blue-50 rounded-lg">
              <div className="text-2xl font-bold text-blue-600">{materials.length}</div>
              <div className="text-sm text-blue-600">Total Materials</div>
            </div>
            <div className="text-center p-4 bg-green-50 rounded-lg">
              <div className="text-2xl font-bold text-green-600">{quizzes.length}</div>
              <div className="text-sm text-green-600">Quizzes Generated</div>
            </div>
            <div className="text-center p-4 bg-orange-50 rounded-lg">
              <div className="text-2xl font-bold text-orange-600">{materialsWithoutQuizzes.length}</div>
              <div className="text-sm text-orange-600">Pending Generation</div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Materials Awaiting Quiz Generation */}
      {materialsWithoutQuizzes.length > 0 && (
        <Card className="gradient-border">
          <CardHeader>
            <CardTitle>Materials Ready for Quiz Generation</CardTitle>
            <CardDescription>These materials don't have quizzes yet. Click to generate automatically.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {materialsWithoutQuizzes.map((material) => (
              <div key={material.id} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <h4 className="font-medium">{material.title}</h4>
                    <Badge variant="outline">{material.subjectName}</Badge>
                  </div>
                  <p className="text-sm text-gray-600 mb-2">{material.description}</p>
                  <div className="flex items-center gap-4 text-xs text-gray-500">
                    <span>{material.learningObjectives.length} objectives</span>
                    <span>Added {material.dateAdded}</span>
                  </div>
                </div>
                <div className="ml-4">
                  {generatingFor === material.id ? (
                    <div className="flex items-center gap-2">
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-qnekt-green"></div>
                      <span className="text-sm">Generating...</span>
                    </div>
                  ) : (
                    <Button
                      onClick={() => generateQuiz(material)}
                      className="bg-qnekt-green hover:bg-qnekt-green/90"
                      size="sm"
                    >
                      <Zap className="h-4 w-4 mr-1" />
                      Generate Quiz
                    </Button>
                  )}
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      )}

{/* Generated Quizzes */}
      <Card className="gradient-border">
        <CardHeader>
          <CardTitle>Generated Quizzes</CardTitle>
          <CardDescription>Successfully generated quizzes ready for student assessment</CardDescription>
        </CardHeader>
        <CardContent>
          {quizzes.length === 0 ? (
            <div className="text-center py-8 text-gray-500">
              <Brain className="h-12 w-12 mx-auto mb-4 opacity-50" />
              <p>No quizzes generated yet. Upload materials and generate quizzes above!</p>
            </div>
          ) : (
            <div className="space-y-4">
              {quizzes.map((quiz) => {
                const material = materials.find((m) => m.id === quiz.materialId)
                return (
                  <div key={quiz.id} className="p-4 border rounded-lg gradient-border">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex-1">
                        <h4 className="font-medium mb-1">{quiz.title}</h4>
                        <p className="text-sm text-gray-600 mb-2">{quiz.description}</p>
                        {material && (
                          <Badge variant="outline" className="mb-2">
                            {material.subjectName}
                          </Badge>
                        )}
                      </div>
                      <Badge variant="secondary" className="flex items-center gap-1">
                        <CheckCircle className="h-3 w-3" />
                        Ready
                      </Badge>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                      <div className="flex items-center gap-2">
                        <Target className="h-4 w-4 text-blue-500" />
                        <span>{quiz.questions.length} Questions</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Clock className="h-4 w-4 text-orange-500" />
                        <span>{quiz.timeLimit} Minutes</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <CheckCircle className="h-4 w-4 text-green-500" />
                        <span>{quiz.passingScore}% to Pass</span>
                      </div>
                    </div>

<div className="mt-3 text-xs text-gray-500">Generated on {quiz.createdDate}</div>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>

{/* Generation Progress */}
      {generatingFor && (
        <Card className="gradient-border border-qnekt-green">
          <CardContent className="pt-6">
            <div className="text-center space-y-4">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-qnekt-green mx-auto"></div>
              <h3 className="font-medium">Generating Quiz with AI</h3>
              <p className="text-sm text-gray-600">
                Analyzing content, creating questions, and setting up assessment criteria...
              </p>
              <Progress value={66} className="w-full" />
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/chemistry/periodic-table/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function PeriodicTablePage() {
  return (
    <div className="container py-10">
      <ColoredHeading text="Periodic Table" element="h1" className="text-3xl font-bold mb-4 text-qnekt-red" />
      <p className="text-qnekt-black mb-6">
        Study the organization of elements, their properties, and how these patterns reflect divine order.
      </p>
      <div className="gradient-line w-full my-6"></div>
      <p className="text-qnekt-black mb-6">Content for Periodic Table is under development. Please check back soon!</p>
      <Button asChild className="bg-qnekt-red hover:bg-qnekt-red/90 text-qnekt-black">
        <Link href="/subjects/chemistry">Back to Chemistry</Link>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/chemistry/reactions/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function ChemicalReactionsPage() {
  return (
    <div className="container py-10">
      <ColoredHeading text="Chemical Reactions" element="h1" className="text-3xl font-bold mb-4 text-qnekt-red" />
      <p className="text-qnekt-black mb-6">
        Understand how substances interact and transform, and the Quranic concept of balance in creation.
      </p>
      <div className="gradient-line w-full my-6"></div>
      <p className="text-qnekt-black mb-6">
        Content for Chemical Reactions is under development. Please check back soon!
      </p>
      <Button asChild className="bg-qnekt-red hover:bg-qnekt-red/90 text-qnekt-black">
        <Link href="/subjects/chemistry">Back to Chemistry</Link>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/physics/motion/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function MotionPage() {
  return (
    <div className="container py-10">
      <ColoredHeading text="Motion and Forces" element="h1" className="text-3xl font-bold mb-4 text-qnekt-black" />
      <p className="text-qnekt-black mb-6">
        Learn about Newton's laws, velocity, acceleration, and the forces governing motion, with reflections from the
        Quran.
      </p>
      <div className="gradient-line w-full my-6"></div>
      <p className="text-qnekt-black mb-6">
        Content for Motion and Forces is under development. Please check back soon!
      </p>
      <Button asChild className="bg-qnekt-black hover:bg-qnekt-black/90 text-qnekt-white">
        <Link href="/subjects/physics">Back to Physics</Link>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/physics/light/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function LightPage() {
  return (
    <div className="container py-10">
      <ColoredHeading text="Light and Optics" element="h1" className="text-3xl font-bold mb-4 text-qnekt-black" />
      <p className="text-qnekt-black mb-6">
        Explore the nature of light, reflection, refraction, and Quranic verses on light (An-Nur).
      </p>
      <div className="gradient-line w-full my-6"></div>
      <p className="text-qnekt-black mb-6">
        Content for Light and Optics is under development. Please check back soon!
      </p>
      <Button asChild className="bg-qnekt-black hover:bg-qnekt-black/90 text-qnekt-white">
        <Link href="/subjects/physics">Back to Physics</Link>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/physics/energy/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function EnergyPage() {
  return (
    <div className="container py-10">
      <ColoredHeading text="Energy and Work" element="h1" className="text-3xl font-bold mb-4 text-qnekt-black" />
      <p className="text-qnekt-black mb-6">
        Understand different forms of energy, conservation laws, and their significance in the universe as described in
        the Quran.
      </p>
      <div className="gradient-line w-full my-6"></div>
      <p className="text-qnekt-black mb-6">Content for Energy and Work is under development. Please check back soon!</p>
      <Button asChild className="bg-qnekt-black hover:bg-qnekt-black/90 text-qnekt-white">
        <Link href="/subjects/physics">Back to Physics</Link>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/quran/tafsir/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function QuranTafsirPage() {
  return (
    <div className="container py-10">
      <ColoredHeading text="Tafsir Materials" element="h1" className="text-3xl font-bold mb-4 text-qnekt-red" />
      <p className="text-qnekt-black mb-6">
        Access Tafsir materials related to Quranic studies, focusing on scientific and thematic explorations.
      </p>
      <div className="gradient-line w-full my-6"></div>
      <p className="text-qnekt-black mb-6">Tafsir materials are under development. Please check back soon!</p>
      <Button asChild className="bg-qnekt-red hover:bg-qnekt-red/90 text-qnekt-black">
        <Link href="/subjects/quran">Back to Quranic Studies</Link>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/quran/study-guides/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function QuranStudyGuidesPage() {
  return (
    <div className="container py-10">
      <ColoredHeading text="Quranic Study Guides" element="h1" className="text-3xl font-bold mb-4 text-qnekt-red" />
      <p className="text-qnekt-black mb-6">
        Downloadable study guides to aid your exploration of the Quran and its connection to science.
      </p>
      <div className="gradient-line w-full my-6"></div>
      <p className="text-qnekt-black mb-6">Study guides are under development. Please check back soon!</p>
      <Button asChild className="bg-qnekt-red hover:bg-qnekt-red/90 text-qnekt-black">
        <Link href="/subjects/quran">Back to Quranic Studies</Link>
      </Button>
    </div>
  )
}
[V0_FILE]png:file="public/al-khwarizmi-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/al-khwarizmi-portrait-fUrF4yC2WTA4MMdnwFLaGjEfopSFoT.png" isMerged="true"
[V0_FILE]png:file="public/ibn-sina-avicenna-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ibn-sina-avicenna-portrait-uasjedUtSyRxWDzUxB43ht4fLaTVRA.png" isMerged="true"
[V0_FILE]png:file="public/ibn-al-haytham-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ibn-al-haytham-portrait-yN999ajTKOuhsPKncMuoQA64OHHqE4.png" isMerged="true"
[V0_FILE]png:file="public/al-zahrawi-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/al-zahrawi-portrait-Og6zfkszdqLgzHXOZGzqK6fEaO97mt.png" isMerged="true"
[V0_FILE]png:file="public/jabir-ibn-hayyan-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/jabir-ibn-hayyan-portrait-SrvS1NbHOLYg7wr5iNT2RtMJRoibYi.png" isMerged="true"
[V0_FILE]png:file="public/al-battani-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/al-battani-portrait-CAx6sNOALgWM4UuhFHd0uuDDniKtuw.png" isMerged="true"
[V0_FILE]png:file="public/al-farabi-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/al-farabi-portrait-UiTuIOJGDwfc3j8hvdvWsgsBMsliDE.png" isMerged="true"
[V0_FILE]png:file="public/omar-khayyam-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/omar-khayyam-portrait-I8G2dYcUpzUETiOw4RXa1pupBqpLAD.png" isMerged="true"
[V0_FILE]png:file="public/ibn-rushd-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ibn-rushd-portrait-Tmj1wlQN6ICDE38W1hDtWJUYfFBTUp.png" isMerged="true"
[V0_FILE]png:file="public/nasir-al-din-al-tusi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/nasir-al-din-al-tusi-oRLivPS3gYbcmPcu2tPjL3lFmp6Qad.png" isMerged="true"
[V0_FILE]png:file="public/about-us-qnekt.png" url="https://blob.v0.dev/h/cku0o88g0000208l09g3h4j5k" isMerged="true"
[V0_FILE]plaintext:file="public/holy-quran-light.avif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/holy-quran-with-rays-light-coming-out-ai-generative_475575-20200-70WH6CbK6uKcmXoUSAD5WlDYWrvo0q.avif" isMerged="true"
[V0_FILE]typescriptreact:file="components/admin/add-material-form.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react" // Ensured React import
import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { usePersistentLearningMaterials } from "@/hooks/use-persistent-storage"
import type { LearningMaterial } from "@/app/admin/actions"

export function AddMaterialForm({ onSuccess }: { onSuccess?: () => void }) {
  const router = useRouter()
  const { toast } = useToast()
  const { addMaterial } = usePersistentLearningMaterials()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [subject, setSubject] = useState("biology")
  const [contentType, setContentType] = useState("video")

async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setIsSubmitting(true)

try {
      const formDataObject = new FormData(event.currentTarget)

const title = formDataObject.get("title") as string
      const topic = formDataObject.get("topic") as string
      const description = formDataObject.get("description") as string
      const quranicIntegration = formDataObject.get("quranic-integration") as string

if (!title || !subject || !contentType) {
        throw new Error("Missing required fields")
      }

const newMaterial: LearningMaterial = {
        id: Date.now().toString(),
        title,
        subject, // This comes from state
        type: contentType, // This comes from state
        dateAdded: new Date().toISOString().split("T")[0],
        topic,
        description,
        quranicIntegration,
      }

addMaterial(newMaterial)

toast({
        title: "Success!",
        description: `${newMaterial.title} has been added to ${newMaterial.subject} and saved permanently. Page will refresh to show changes.`,
      })

setTimeout(() => {
        window.location.reload()
      }, 1000)

event.currentTarget.reset()
      setSubject("biology")
      setContentType("video")

if (onSuccess) {
        onSuccess()
      }

router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to add learning material. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <form className="space-y-4" onSubmit={handleSubmit}>
      <div className="space-y-2">
        <Label htmlFor="title">Title</Label>
        <Input id="title" name="title" placeholder="Enter content title" required={true} className="gradient-border" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="subjectState">Subject</Label>{" "}
        {/* Changed htmlFor to avoid conflict if 'subject' is a name attribute */}
        <Select value={subject} onValueChange={setSubject} name="subjectStateName">
          {" "}
          {/* Changed name to avoid conflict if 'subject' is a name attribute on form */}
          <SelectTrigger className="gradient-border">
            <SelectValue placeholder="Select subject" />
          </SelectTrigger>
          <SelectContent className="gradient-border">
            <SelectItem value="biology">Biology</SelectItem>
            <SelectItem value="chemistry">Chemistry</SelectItem>
            <SelectItem value="physics">Physics</SelectItem>
            <SelectItem value="geography">Geography</SelectItem>
            <SelectItem value="quran">Quran</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-2">
        <Label htmlFor="topic">Topic</Label>
        <Input id="topic" name="topic" placeholder="Enter topic" required={true} className="gradient-border" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="contentTypeState">Content Type</Label> {/* Changed htmlFor */}
        <Select value={contentType} onValueChange={setContentType} name="contentTypeStateName">
          {" "}
          {/* Changed name */}
          <SelectTrigger className="gradient-border">
            <SelectValue placeholder="Select content type" />
          </SelectTrigger>
          <SelectContent className="gradient-border">
            <SelectItem value="video">Video</SelectItem>
            <SelectItem value="infographic">Infographic</SelectItem>
            <SelectItem value="quiz">Quiz</SelectItem>
            <SelectItem value="pdf">PDF Notes</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-2">
        <Label htmlFor="description">Description</Label>
        <Textarea
          id="description"
          name="description"
          placeholder="Enter content description"
          required={true}
          className="gradient-border"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="quranic-integration">Quranic Integration</Label>
        <Textarea
          id="quranic-integration"
          name="quranic-integration"
          placeholder="Enter relevant Quranic verses and explanations"
          required={true}
          className="gradient-border"
        />
      </div>
      <Button
        type="submit"
        className="w-full bg-qnekt-green hover:bg-qnekt-green/90 gradient-border"
        disabled={isSubmitting}
      >
        {isSubmitting ? "Adding..." : "Add Content Permanently"}
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/admin/add-user-form.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react" // Ensured React import
import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { usePersistentUsers } from "@/hooks/use-persistent-storage"
import type { User } from "@/app/admin/actions"

export function AddUserForm() {
  const router = useRouter()
  const { toast } = useToast()
  const { addUser } = usePersistentUsers()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [role, setRole] = useState("student")
  const [open, setOpen] = useState(false)

async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setIsSubmitting(true)

try {
      const formData = new FormData(event.currentTarget)

const name = formData.get("name") as string
      const email = formData.get("email") as string
      // role is taken from state, not directly from formData for the Select component

if (!name || !email || !role) {
        throw new Error("Missing required fields")
      }

const newUser: User = {
        id: Date.now().toString(),
        name,
        email,
        role, // role from state
        joinDate: new Date().toISOString().split("T")[0],
      }

addUser(newUser)

toast({
        title: "Success!",
        description: `${newUser.name} has been added as a ${newUser.role} permanently.`,
      })

event.currentTarget.reset()
      setRole("student")
      setOpen(false)
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to add user. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size="sm" className="bg-qnekt-green hover:bg-qnekt-green/90">
          <span className="h-4 w-4 mr-2">+</span> Add User
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>
            <span className="text-qnekt-black">Add</span> <span className="text-qnekt-red">New</span>{" "}
            <span className="text-qnekt-green">User</span>
          </DialogTitle>
        </DialogHeader>
        <form className="space-y-4" onSubmit={handleSubmit}>
          <div className="space-y-2">
            <Label htmlFor="name">Full Name</Label>
            <Input id="name" name="name" placeholder="Enter user's full name" required={true} />
          </div>
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" name="email" type="email" placeholder="Enter user's email" required={true} />
          </div>
          <div className="space-y-2">
            <Label htmlFor="role-select">Role</Label> {/* Changed htmlFor to be unique */}
            <Select value={role} onValueChange={setRole} name="roleValue">
              {" "}
              {/* name attribute can be different if not directly used by FormData for this field */}
              <SelectTrigger id="role-select">
                <SelectValue placeholder="Select role" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="student">Student</SelectItem>
                <SelectItem value="educator">Educator</SelectItem>
                <SelectItem value="admin">Admin</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" className="bg-qnekt-green hover:bg-qnekt-green/90" disabled={isSubmitting}>
              {isSubmitting ? "Adding..." : "Add User Permanently"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/admin/add-announcement-form.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { usePersistentAnnouncements } from "@/hooks/use-persistent-storage"
import type { Announcement } from "@/app/admin/actions"

export function AddAnnouncementForm({ onAnnouncementAdded }: { onAnnouncementAdded?: () => void }) {
  const { toast } = useToast()
  const { addAnnouncement } = usePersistentAnnouncements()
  const [title, setTitle] = useState("")
  const [content, setContent] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!title.trim() || !content.trim()) {
      toast({
        title: "Missing Fields",
        description: "Please provide both a title and content for the announcement.",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)
    try {
      const newAnnouncement: Announcement = {
        id: Date.now().toString(),
        title,
        content,
        date: new Date().toISOString().split("T")[0],
      }
      addAnnouncement(newAnnouncement)

toast({
        title: "Announcement Created!",
        description: `"${title}" has been successfully posted.`,
      })

setTitle("")
      setContent("")

if (onAnnouncementAdded) {
        onAnnouncementAdded()
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Could not create announcement. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="announcementTitle" className="text-qnekt-black font-medium">
          Title
        </Label>
        <Input
          id="announcementTitle"
          name="announcementTitle"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Important Update"
          required={true}
          className="gradient-border"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="announcementContent" className="text-qnekt-black font-medium">
          Content
        </Label>
        <Textarea
          id="announcementContent"
          name="announcementContent"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Details about the announcement..."
          required={true}
          rows={5}
          className="gradient-border min-h-[120px]"
        />
      </div>
      <Button
        type="submit"
        className="w-full bg-qnekt-green hover:bg-qnekt-green/90 gradient-border"
        disabled={isSubmitting}
      >
        {isSubmitting ? "Creating..." : "Create Announcement"}
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        "qnekt-red": "#DC2626", // Example Red (Tailwind red-600)
        "qnekt-green": "#16A34A", // Example Green (Tailwind green-600)
        "qnekt-black": "#171717", // Example Black (Tailwind neutral-900)
        "qnekt-white": "#FFFFFF",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
        marquee: {
          // Added marquee keyframes
          "0%": { transform: "translateX(100%)" },
          "100%": { transform: "translateX(-125%)" }, // Adjust -100% or more depending on content length vs container
        },
        "gradient-border-animation": {
          "0%": { "border-image-source": "linear-gradient(to right, #DC2626, #16A34A, #171717)" },
          "25%": { "border-image-source": "linear-gradient(to right, #16A34A, #171717, #DC2626)" },
          "50%": { "border-image-source": "linear-gradient(to right, #171717, #DC2626, #16A34A)" },
          "75%": { "border-image-source": "linear-gradient(to right, #DC2626, #171717, #16A34A)" },
          "100%": { "border-image-source": "linear-gradient(to right, #DC2626, #16A34A, #171717)" },
        },
        "testimonial-image": {
          "0%, 100%": { transform: "translateY(0) scale(1)" },
          "50%": { transform: "translateY(-10px) scale(1.05)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        marquee: "marquee 30s linear infinite", // Added marquee animation, adjust duration as needed
        "gradient-border": "gradient-border-animation 10s ease infinite",
        "testimonial-image-float": "testimonial-image 6s ease-in-out infinite",
      },
      fontFamily: {
        arabic: ["var(--font-noto-naskh-arabic)", "serif"], // Example, ensure this font is configured
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
[V0_FILE]png:file="public/yt-thumb-five-senses.png" query="YouTube thumbnail for " The="true" Five="true" Senses="true" video="true" with="true" text="true" WHAT="true" CAME="true" FIRST="true" HEARING="true" OR="true" SIGHT="true" and="true" illustrations="true" of="true" an="true" eye="true" ear="true" dark="true" background="true" colorful="true" doodles="true" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-everything-came-from-water.png" query="YouTube thumbnail for " Everything="true" Came="true" From="true" Water="true" video="true" with="true" text="true" H2O="true" EVERYTHING="true" CAME="true" FROM="true" WATER="true" and="true" water="true" drop="true" illustrations="true" light="true" blue="true" background="true" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-natures-majestic-anchors.png" query="YouTube thumbnail for " Nature="true" s="true" Majestic="true" Anchors="true" video="true" with="true" text="true" NATURES="true" MAJESTIC="true" ANCHORS="true" in="true" bold="true" green="true" font="true" over="true" a="true" scenic="true" mountain="true" landscape="true" photo="true" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-five-senses-v2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yt-thumb-five-senses-v2-sj6y8qyQxYYAYEMzxYCOgV7jXgJxNu.png" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-everything-came-from-water-v2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yt-thumb-everything-came-from-water-v2-R64ZoQr4QGX7lgiT3P0bA1cyxeMy53.png" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-natures-majestic-anchors-v2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yt-thumb-natures-majestic-anchors-v2-BDodftW26f1pnayZU6QBtJFNEbwEdL.png" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-small-creatures-v2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yt-thumb-small-creatures-v2-j7P6fSpkpmbWWarIOeUiXdh134ehrW.png" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-miracle-workers-v2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yt-thumb-miracle-workers-v2-Kh4zboDvduvXIiwwgKrRyP9TBJICgT.png" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-miracle-iron-v2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yt-thumb-miracle-iron-v2-VbtnG1kKeWTJCfIZWEdhZigyC3B3GT.png" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-sky-canopy-v2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yt-thumb-sky-canopy-v2-8iR7DJ6KDBvaAqXZ7IzQPsL3jCARFn.png" isMerged="true"
[V0_FILE]png:file="public/yt-thumb-nitrogen-cycle-v2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yt-thumb-nitrogen-cycle-v2-9TuMMObrYThDPea3DBtATKtNWzXR2y.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Image from "next/image"

export default function AboutPage() {
  return (
    <div className="container py-10">
      <div className="text-center mb-12">
        <ColoredHeading text="About Qnekt" element="h1" className="text-4xl font-bold tracking-tight" />
        <p className="mt-4 text-xl text-qnekt-black max-w-3xl mx-auto">
          Learn more about our mission to bridge scientific discovery with Quranic wisdom.
        </p>
        <div className="gradient-line w-32 mx-auto mt-6"></div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
        <div>
          <h2 className="text-2xl font-bold text-qnekt-red mb-4">Our Vision</h2>
          <p className="text-qnekt-black mb-4 leading-relaxed">
            Qnekt is dedicated to providing a unique educational platform where modern scientific education is
            harmoniously integrated with Islamic teachings. We aim to illuminate the connections between scientific
            discoveries and Quranic wisdom, fostering a generation of learners who are both knowledgeable in
            contemporary sciences and deeply rooted in their faith.
          </p>
          <h2 className="text-2xl font-bold text-qnekt-green mb-4">Our Mission</h2>
          <p className="text-qnekt-black mb-4 leading-relaxed">
            Our mission is to create engaging and comprehensive learning modules across various scientific disciplines,
            each enriched with relevant Quranic insights. We strive to empower students, parents, and educators with
            resources that promote critical thinking, intellectual curiosity, and a profound appreciation for the
            interconnectedness of knowledge and faith.
          </p>
        </div>
        <div className="flex justify-center">
          <Image
            src="/animated-qnekt-community.png" // Updated src
            alt="Animated illustration of the Qnekt community learning together with symbols of science and faith" // Updated alt
            width={500}
            height={400}
            className="rounded-lg gradient-border-thick"
          />
        </div>
      </div>

<div className="mt-16">
        <h2 className="text-3xl font-bold text-center text-qnekt-black mb-8">Why Choose Qnekt?</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="p-6 rounded-lg gradient-border-animated bg-qnekt-red/5">
            <h3 className="text-xl font-bold text-qnekt-red mb-2">Integrated Curriculum</h3>
            <p className="text-qnekt-black">
              Seamlessly blending science with Quranic teachings for a holistic understanding.
            </p>
          </div>
          <div className="p-6 rounded-lg gradient-border-animated bg-qnekt-green/5">
            <h3 className="text-xl font-bold text-qnekt-green mb-2">Expert Educators</h3>
            <p className="text-qnekt-black">Learn from passionate teachers dedicated to faith-integrated education.</p>
          </div>
          <div className="p-6 rounded-lg gradient-border-animated bg-qnekt-black/5">
            <h3 className="text-xl font-bold text-qnekt-black mb-2">Engaging Content</h3>
            <p className="text-qnekt-black">
              Interactive videos, quizzes, and resources designed for effective learning.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/animated-qnekt-community.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-qnekt-community-52Xa3PED8C1RVeM7WWYBrdlhi3hDJN.png" isMerged="true"
[V0_FILE]png:file="public/animated-fatima-al-fihri.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-fatima-al-fihri-XhybJMIStd5YH7j77i1L8LzslytQdT.png" isMerged="true"
[V0_FILE]png:file="public/animated-ibn-khaldun.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-ibn-khaldun-duWyYjsT1KejnUnFna5dBiwDQVMfNR.png" isMerged="true"
[V0_FILE]png:file="public/animated-al-kindi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-al-kindi-U1rngKU8rXAn8FbUscccttZIYM1l6S.png" isMerged="true"
[V0_FILE]png:file="public/animated-thabit-ibn-qurra.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-thabit-ibn-qurra-zK57jR1Z6t3g2OHmfXZUPPRZInF8fZ.png" isMerged="true"
[V0_FILE]png:file="public/animated-mariam-al-asturlabi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-ibn-al-nafis.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-students-learning.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-human-anatomy-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-plant-biology-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-life-cycles-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-human-anatomy-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-chemistry-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-chemistry-overview-9Nkeg3Wu6PTLd68DbuxAN0ZvbcMSTs.png" isMerged="true"
[V0_FILE]png:file="public/animated-atomic-structure-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-atomic-structure-topic-iS21hjKxh5SU0wpB0g1re34kcpAtfW.png" isMerged="true"
[V0_FILE]png:file="public/animated-periodic-table-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-periodic-table-topic-ze3wGnaaWMbn61GlkeeDKqgnuAOet4.png" isMerged="true"
[V0_FILE]png:file="public/animated-chemical-reactions-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-chemical-reactions-topic-WQgrOjagAHnYRDnNcOCTxYZ86p3Vgy.png" isMerged="true"
[V0_FILE]png:file="public/animated-physics-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-physics-overview-tkBN37ZOxOWU9LDiwu605QKWppi4zE.png" isMerged="true"
[V0_FILE]png:file="public/animated-motion-forces-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-motion-forces-topic-wuLxZNDpJi2XW0NGWC3jPt9OYsck3U.png" isMerged="true"
[V0_FILE]png:file="public/animated-light-optics-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-light-optics-topic-wBN3sje5mnnlPWJQ6IUzTuG1n1Tshc.png" isMerged="true"
[V0_FILE]png:file="public/animated-energy-work-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-energy-work-topic-ojYt84qOX8QHhocIBPVtnRUKjudAJl.png" isMerged="true"
[V0_FILE]png:file="public/animated-geography-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-landforms-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-climate-weather-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-water-bodies-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-quran-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-quran-overview-1m3PIWdAyocu2M5sWF8NODv7h1qDl7.png" isMerged="true"
[V0_FILE]png:file="public/animated-creation-cosmology-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-creation-cosmology-topic-UwVTuDXriphYN9qX4BiDlYEkuyNbbB.png" isMerged="true"
[V0_FILE]png:file="public/animated-human-development-quran-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-human-development-quran-topic-0Tap44WvMh6MePZxPOEMdbiSUOToBK.png" isMerged="true"
[V0_FILE]png:file="public/animated-natural-phenomena-quran-topic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/animated-natural-phenomena-quran-topic-gkLrIglf5r9c64P7jdZ3ipTduvEzJJ.png" isMerged="true"
[V0_FILE]png:file="public/animated-atomic-structure-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-landforms-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-climate-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-water-bodies-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-quran-creation-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-quran-human-development-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-quran-natural-phenomena-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-plant-biology-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/animated-life-cycles-detail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/admin/materials-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { useToast } from "@/components/ui/use-toast"
import { useRouter } from "next/navigation"
import { usePersistentLearningMaterials, type LearningMaterial } from "@/hooks/use-persistent-storage"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

export function MaterialsList({ refreshTrigger }: { refreshTrigger?: number }) {
  const router = useRouter()
  const { toast } = useToast()
  const { materials, isLoaded, getMaterialsBySubject, deleteMaterial } = usePersistentLearningMaterials()
  const [selectedSubject, setSelectedSubject] = useState("all")
  const [currentMaterials, setCurrentMaterials] = useState<LearningMaterial[]>([])
  const [deleteId, setDeleteId] = useState<string | null>(null)
  const [isDeleting, setIsDeleting] = useState(false)

useEffect(() => {
    if (isLoaded) {
      setCurrentMaterials(materials)
    }
  }, [isLoaded, materials])

const filteredMaterials =
    selectedSubject === "all"
      ? currentMaterials
      : currentMaterials.filter((material) => material.subject.toLowerCase() === selectedSubject.toLowerCase())

async function handleDelete(id: string) {
    setIsDeleting(true)
    try {
      deleteMaterial(id)

toast({
        title: "Success!",
        description: "Learning material has been deleted.",
      })
      setCurrentMaterials((prev) => prev.filter((m) => m.id !== id)) // Optimistically update UI
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to delete learning material. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsDeleting(false)
      setDeleteId(null)
    }
  }

if (!isLoaded) {
    return <div className="text-center py-8">Loading materials...</div>
  }

return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        <Button
          variant={selectedSubject === "all" ? "default" : "outline"}
          size="sm"
          // DEV-NOTE: Making a button invisible on hover is unconventional UX. Consider alternative styling if this is not the desired effect.
          className="gradient-border visible hover:invisible"
          onClick={() => setSelectedSubject("all")}
        >
          All ({materials.length})
        </Button>
        <Button
          variant={selectedSubject === "biology" ? "default" : "outline"}
          size="sm"
          onClick={() => setSelectedSubject("biology")}
          className="gradient-border"
        >
          Biology ({getMaterialsBySubject("biology").length})
        </Button>
        <Button
          variant={selectedSubject === "chemistry" ? "default" : "outline"}
          size="sm"
          onClick={() => setSelectedSubject("chemistry")}
          className="gradient-border"
        >
          Chemistry ({getMaterialsBySubject("chemistry").length})
        </Button>
        <Button
          variant={selectedSubject === "physics" ? "default" : "outline"}
          size="sm"
          onClick={() => setSelectedSubject("physics")}
          className="gradient-border"
        >
          Physics ({getMaterialsBySubject("physics").length})
        </Button>
        <Button
          variant={selectedSubject === "geography" ? "default" : "outline"}
          size="sm"
          onClick={() => setSelectedSubject("geography")}
          className="gradient-border"
        >
          Geography ({getMaterialsBySubject("geography").length})
        </Button>
        <Button
          variant={selectedSubject === "quran" ? "default" : "outline"}
          size="sm"
          onClick={() => setSelectedSubject("quran")}
          className="gradient-border"
        >
          Quran ({getMaterialsBySubject("quran").length})
        </Button>
      </div>

<div className="gradient-border rounded-lg overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Title</TableHead>
              <TableHead>Subject</TableHead>
              <TableHead>Type</TableHead>
              <TableHead>Date Added</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredMaterials.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="text-center py-8">
                  No learning materials found for this subject.
                </TableCell>
              </TableRow>
            ) : (
              filteredMaterials.map((material) => (
                <TableRow key={material.id}>
                  <TableCell className="font-medium">{material.title}</TableCell>
                  <TableCell>{material.subject}</TableCell>
                  <TableCell>{material.type}</TableCell>
                  <TableCell>{material.dateAdded}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => router.push(`/admin/materials/edit/${material.id}`)}
                        className="gradient-border"
                      >
                        Edit
                      </Button>
                      <AlertDialog open={deleteId === material.id} onOpenChange={(open) => !open && setDeleteId(null)}>
                        <AlertDialogTrigger asChild>
                          <Button
                            variant="destructive"
                            size="sm"
                            onClick={() => setDeleteId(material.id)}
                            className="gradient-border"
                          >
                            Delete
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent className="gradient-border">
                          <AlertDialogHeader>
                            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                            <AlertDialogDescription>
                              This will permanently delete the learning material "{material.title}". This action cannot
                              be undone.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel className="gradient-border">Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleDelete(material.id)}
                              disabled={isDeleting}
                              className="bg-red-600 hover:bg-red-700 gradient-border"
                            >
                              {isDeleting ? "Deleting..." : "Delete"}
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/announcements-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import { usePersistentAnnouncements, type Announcement } from "@/hooks/use-persistent-storage"
import { useRouter } from "next/navigation"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { MessageSquare, Calendar, Trash2 } from "lucide-react"

export function AnnouncementsList() {
  const { toast } = useToast()
  const router = useRouter()
  const { announcements, isLoaded, deleteAnnouncement } = usePersistentAnnouncements()
  const [deleteId, setDeleteId] = useState<string | null>(null)
  const [isDeleting, setIsDeleting] = useState(false)
  const [currentAnnouncements, setCurrentAnnouncements] = useState<Announcement[]>([])

useEffect(() => {
    if (isLoaded) {
      setCurrentAnnouncements(announcements)
    }
  }, [isLoaded, announcements])

async function handleDelete(id: string) {
    setIsDeleting(true)
    try {
      deleteAnnouncement(id)

toast({
        title: "Success!",
        description: "Announcement has been deleted.",
      })
      setCurrentAnnouncements((prev) => prev.filter((a) => a.id !== id)) // Optimistically update UI
      router.refresh() // Ensure data consistency if it were server-fetched & re-renders page components
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to delete announcement. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsDeleting(false)
      setDeleteId(null)
    }
  }

if (!isLoaded) {
    return (
      <div className="text-center py-8">
        <MessageSquare className="h-12 w-12 mx-auto mb-4 text-gray-400" />
        <p>Loading announcements...</p>
      </div>
    )
  }

if (currentAnnouncements.length === 0 && isLoaded) {
    return (
      <div className="text-center py-12">
        <MessageSquare className="h-16 w-16 mx-auto mb-4 text-gray-400" />
        <p className="text-gray-600">Create your first announcement to get started.</p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {currentAnnouncements.map((announcement) => (
        <Card key={announcement.id} className="gradient-border">
          <CardHeader className="pb-3">
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <CardTitle className="text-lg mb-1">
                  <span className="text-qnekt-black">{announcement.title}</span>
                </CardTitle>
                <CardDescription className="flex items-center gap-2">
                  <Calendar className="h-4 w-4" />
                  {announcement.date}
                </CardDescription>
              </div>
              <AlertDialog open={deleteId === announcement.id} onOpenChange={(open) => !open && setDeleteId(null)}>
                <AlertDialogTrigger asChild>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setDeleteId(announcement.id)}
                    className="text-red-600 hover:text-red-700 hover:bg-red-50"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent className="gradient-border">
                  <AlertDialogHeader>
                    <AlertDialogTitle>Delete Announcement</AlertDialogTitle>
                    <AlertDialogDescription>
                      Are you sure you want to delete "{announcement.title}"? This action cannot be undone.
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel className="gradient-border">Cancel</AlertDialogCancel>
                    <AlertDialogAction
                      onClick={() => handleDelete(announcement.id)}
                      disabled={isDeleting}
                      className="bg-red-600 hover:bg-red-700 gradient-border"
                    >
                      {isDeleting ? "Deleting..." : "Delete"}
                    </AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </div>
          </CardHeader>
          <CardContent className="pt-0">
            <p className="text-gray-700 leading-relaxed">{announcement.content}</p>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/subject-creation-demo.tsx" isEdit="true" isQuickEdit="true" 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 { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Sparkles, Palette, BookOpen, CheckCircle } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { EnhancedStorage, type Subject } from "@/lib/enhanced-storage"

export function SubjectCreationDemo() {
  const [currentStep, setCurrentStep] = useState(1)
  const [subjects, setSubjects] = useState<Subject[]>([])
  const [isCreating, setIsCreating] = useState(false)
  const [isCompleted, setIsCompleted] = useState(false)
  const { toast } = useToast()

const [formData, setFormData] = useState({
    name: "",
    description: "",
    color: "#0EA5E9",
    icon: "🐠",
  })

useEffect(() => {
    setSubjects(EnhancedStorage.getSubjects())
  }, [])

const popularIcons = ["🧬", "⚗️", "⚛️", "🌍", "☪️", "🐠", "🔬", "📚", "🌱", "🧪", "🌊", "🔭"]
  const popularColors = ["#10B981", "#F59E0B", "#3B82F6", "#059669", "#DC2626", "#0EA5E9", "#8B5CF6", "#EC4899"]

const steps = [
    {
      title: "Choose Subject Name",
      description: "Pick a descriptive name for your subject",
    },
    {
      title: "Add Description",
      description: "Explain what this subject covers",
    },
    {
      title: "Select Icon & Color",
      description: "Customize the visual appearance",
    },
    {
      title: "Review & Create",
      description: "Confirm your subject details",
    },
  ]

const handleCreateSubject = async () => {
    if (subjects.length >= 5) {
      toast({
        title: "Limit Reached",
        description: "You can only create up to 5 subjects.",
        variant: "destructive",
      })
      return
    }

setIsCreating(true)

try {
      const newSubject: Subject = {
        id: Date.now().toString(),
        name: formData.name,
        description: formData.description,
        color: formData.color,
        icon: formData.icon,
        createdDate: new Date().toISOString().split("T")[0],
        materialsCount: 0,
      }

// Add to storage
      EnhancedStorage.addSubject(newSubject)

// Update local state
      const updatedSubjects = EnhancedStorage.getSubjects()
      setSubjects(updatedSubjects)

// Show success
      toast({
        title: "Subject Created Successfully! 🎉",
        description: `${formData.name} has been added to your platform.`,
      })

setIsCompleted(true)
    } catch (error) {
      toast({
        title: "Creation Failed",
        description: "Failed to create subject. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsCreating(false)
    }
  }

const resetDemo = () => {
    setCurrentStep(1)
    setIsCompleted(false)
    setFormData({
      name: "",
      description: "",
      color: "#0EA5E9",
      icon: "🐠",
    })
  }

if (isCompleted) {
    return (
      <div className="text-center space-y-6">
        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto">
          <CheckCircle className="h-10 w-10 text-green-600" />
        </div>
        <div>
          <h3 className="text-2xl font-bold text-green-600 mb-2">Subject Created Successfully!</h3>
          <p className="text-gray-600">
            <strong>{formData.name}</strong> has been added to your platform.
          </p>
        </div>

<div className="bg-green-50 p-4 rounded-lg border border-green-200">
          <h4 className="font-medium text-green-900 mb-2">🎯 What's Next?</h4>
          <ul className="text-sm text-green-800 space-y-1 text-left">
            <li>• Go to "Material Upload" tab to add learning content</li>
            <li>• Upload videos and create detailed learning objectives</li>
            <li>• Generate automatic quizzes for your materials</li>
            <li>• Publish content for students to access</li>
          </ul>
        </div>

<div className="flex gap-3 justify-center">
          <Button onClick={resetDemo} variant="outline">
            Create Another Subject
          </Button>
          <Button
            onClick={() => (window.location.hash = "#materials")}
            className="bg-qnekt-green hover:bg-qnekt-green/90"
          >
            Upload Materials
          </Button>
        </div>

<div className="text-sm text-gray-500">Total Subjects: {subjects.length}/5</div>
      </div>
    )
  }

return (
    <div className="max-w-2xl mx-auto space-y-6">
      {/* Progress Steps */}
      <div className="flex items-center justify-between mb-8">
        {steps.map((step, index) => (
          <div key={index} className="flex items-center">
            <div
              className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
                currentStep > index + 1
                  ? "bg-qnekt-green text-white"
                  : currentStep === index + 1
                    ? "bg-qnekt-red text-white"
                    : "bg-gray-200 text-gray-600"
              }`}
            >
              {currentStep > index + 1 ? "✓" : index + 1}
            </div>
            {index < steps.length - 1 && (
              <div className={`w-16 h-1 mx-2 ${currentStep > index + 1 ? "bg-qnekt-green" : "bg-gray-200"}`} />
            )}
          </div>
        ))}
      </div>

<Card className="gradient-border-animated">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-qnekt-green" />
            Create Your First Subject ({subjects.length}/5)
          </CardTitle>
          <CardDescription>{steps[currentStep - 1].description}</CardDescription>
          <div className="gradient-line w-full"></div>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Step 1: Subject Name */}
          {currentStep === 1 && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="name" className="text-base font-medium">
                  Subject Name
                </Label>
                <Input
                  id="name"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="e.g., Marine Biology, Organic Chemistry, Quantum Physics"
                  className="gradient-border text-lg"
                />
              </div>
              <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <h4 className="font-medium text-blue-900 mb-2">💡 Naming Tips:</h4>
                <ul className="text-sm text-blue-800 space-y-1">
                  <li>• Be specific (e.g., "Marine Biology" vs "Biology")</li>
                  <li>• Use clear, descriptive names</li>
                  <li>• Consider your target audience level</li>
                </ul>
              </div>
            </div>
          )}

{/* Step 2: Description */}
          {currentStep === 2 && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="description" className="text-base font-medium">
                  Subject Description
                </Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="Describe what students will learn in this subject..."
                  className="gradient-border min-h-[100px]"
                />
              </div>
              <div className="bg-green-50 p-4 rounded-lg border border-green-200">
                <h4 className="font-medium text-green-900 mb-2">📝 Description Guidelines:</h4>
                <ul className="text-sm text-green-800 space-y-1">
                  <li>• Explain the main topics covered</li>
                  <li>• Mention any prerequisites</li>
                  <li>• Highlight unique aspects</li>
                  <li>• Keep it engaging and informative</li>
                </ul>
              </div>
            </div>
          )}

{/* Step 3: Icon & Color */}
          {currentStep === 3 && (
            <div className="space-y-6">
              <div className="space-y-3">
                <Label className="text-base font-medium flex items-center gap-2">
                  <Palette className="h-4 w-4" />
                  Choose Icon
                </Label>
                <div className="grid grid-cols-6 gap-2">
                  {popularIcons.map((icon) => (
                    <Button
                      key={icon}
                      variant={formData.icon === icon ? "default" : "outline"}
                      className={`h-12 text-xl ${formData.icon === icon ? "bg-qnekt-green" : ""}`}
                      onClick={() => setFormData({ ...formData, icon })}
                    >
                      {icon}
                    </Button>
                  ))}
                </div>
                <Input
                  value={formData.icon}
                  onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
                  placeholder="Or type your own emoji"
                  className="gradient-border"
                />
              </div>

<div className="space-y-3">
                <Label className="text-base font-medium">Choose Theme Color</Label>
                <div className="grid grid-cols-4 gap-2">
                  {popularColors.map((color) => (
                    <Button
                      key={color}
                      variant="outline"
                      className={`h-12 border-2 ${formData.color === color ? "border-black" : "border-gray-300"}`}
                      style={{ backgroundColor: color }}
                      onClick={() => setFormData({ ...formData, color })}
                    >
                      {formData.color === color && <span className="text-white">✓</span>}
                    </Button>
                  ))}
                </div>
                <Input
                  type="color"
                  value={formData.color}
                  onChange={(e) => setFormData({ ...formData, color: e.target.value })}
                  className="gradient-border h-12"
                />
              </div>
            </div>
          )}

{/* Step 4: Review */}
          {currentStep === 4 && (
            <div className="space-y-6">
              <div className="bg-gray-50 p-6 rounded-lg border">
                <h3 className="font-medium mb-4">Subject Preview:</h3>
                <div className="flex items-start gap-4">
                  <div
                    className="w-16 h-16 rounded-lg flex items-center justify-center text-2xl"
                    style={{ backgroundColor: formData.color + "20", border: `2px solid ${formData.color}` }}
                  >
                    {formData.icon}
                  </div>
                  <div className="flex-1">
                    <h4 className="text-xl font-semibold text-gray-900">{formData.name}</h4>
                    <p className="text-gray-600 mt-1">{formData.description}</p>
                    <div className="flex items-center gap-2 mt-3">
                      <Badge variant="secondary">0 Materials</Badge>
                      <div className="w-4 h-4 rounded-full" style={{ backgroundColor: formData.color }} />
                    </div>
                  </div>
                </div>
              </div>

<div className="bg-green-50 p-4 rounded-lg border border-green-200">
                <h4 className="font-medium text-green-900 mb-2">🎉 Ready to Create!</h4>
                <p className="text-sm text-green-800">
                  Your subject looks great! Click "Create Subject" to add it to your platform.
                </p>
              </div>
            </div>
          )}

{/* Navigation Buttons */}
          <div className="flex justify-between pt-4">
            <Button
              variant="outline"
              onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
              disabled={currentStep === 1}
            >
              Previous
            </Button>

{currentStep < 4 ? (
              <Button
                onClick={() => setCurrentStep(currentStep + 1)}
                className={`
                ${
                  (currentStep === 1 && !formData.name) || (currentStep === 2 && !formData.description)
                    ? "bg-gray-400 cursor-not-allowed"
                    : "bg-qnekt-green hover:bg-qnekt-green/90"
                }
              `}
                disabled={(currentStep === 1 && !formData.name) || (currentStep === 2 && !formData.description)}
              >
                Next Step
              </Button>
            ) : (
              <Button
                onClick={handleCreateSubject}
                className="bg-qnekt-red hover:bg-qnekt-red/90"
                disabled={isCreating || subjects.length >= 5}
              >
                {isCreating ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                    Creating...
                  </>
                ) : (
                  <>
                    <BookOpen className="h-4 w-4 mr-2" />
                    Create Subject
                  </>
                )}
              </Button>
            )}
          </div>
        </CardContent>
      </Card>

{/* Quick Tips */}
      <Card className="gradient-border">
        <CardContent className="p-4">
          <h4 className="font-medium mb-2">🚀 Next Steps After Creating:</h4>
          <ul className="text-sm space-y-1 text-gray-600">
            <li>1. Upload learning materials with videos</li>
            <li>2. Add detailed learning objectives</li>
            <li>3. Generate automatic quizzes</li>
            <li>4. Publish content for students</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/enhanced/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, Upload, Brain, Sparkles } from "lucide-react"
import { ColoredHeading } from "@/components/colored-heading"
import { SubjectManagement } from "@/components/admin/subject-management"
import { MaterialUpload } from "@/components/admin/material-upload"
import { QuizGeneration } from "@/components/admin/quiz-generation"
import { SubjectCreationDemo } from "@/components/admin/subject-creation-demo"

export default function EnhancedAdminPanel() {
  const [activeTab, setActiveTab] = useState("demo")

// Handle hash navigation
  useEffect(() => {
    const hash = window.location.hash.replace("#", "")
    if (hash && ["demo", "subjects", "materials", "quizzes"].includes(hash)) {
      setActiveTab(hash)
    }
  }, [])

// Update URL when tab changes
  const handleTabChange = (value: string) => {
    setActiveTab(value)
    if (typeof window !== "undefined") {
      window.history.pushState(null, "", `#${value}`)
    }
  }

return (
    <div className="container py-10">
      <div className="flex flex-col space-y-6">
        <div className="flex flex-col space-y-2">
          <ColoredHeading text="Enhanced Admin Panel" element="h1" className="text-3xl font-bold tracking-tight" />
          <p className="text-qnekt-black">
            Create subjects, upload materials with videos, and generate automatic quizzes.
          </p>
          <div className="gradient-line w-32"></div>
        </div>

<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
          <TabsList className="grid w-full grid-cols-4 bg-transparent gradient-border">
            <TabsTrigger
              TabTriggerProps={{ style: { borderRadius: "0.375rem 0 0 0.375rem" } }}
              value="demo"
              className="data-[state=active]:bg-qnekt-red data-[state=active]:text-white text-qnekt-black flex items-center justify-center gap-2 py-2.5"
            >
              <Sparkles className="h-4 w-4" />
              Demo
            </TabsTrigger>
            <TabsTrigger
              value="subjects"
              className="data-[state=active]:bg-qnekt-green data-[state=active]:text-white text-qnekt-black flex items-center justify-center gap-2 py-2.5"
            >
              <BookOpen className="h-4 w-4" />
              Subject Management
            </TabsTrigger>
            <TabsTrigger
              value="materials"
              className="data-[state=active]:bg-qnekt-red data-[state=active]:text-white text-qnekt-black flex items-center justify-center gap-2 py-2.5"
            >
              <Upload className="h-4 w-4" />
              Material Upload
            </TabsTrigger>
            <TabsTrigger
              TabTriggerProps={{ style: { borderRadius: "0 0.375rem 0.375rem 0" } }}
              value="quizzes"
              className="data-[state=active]:bg-qnekt-black data-[state=active]:text-white text-qnekt-black flex items-center justify-center gap-2 py-2.5"
            >
              <Brain className="h-4 w-4" />
              Quiz Generation
            </TabsTrigger>
          </TabsList>

<TabsContent value="demo" className="py-6">
            <Card className="gradient-border-animated">
              <CardHeader>
                <CardTitle>
                  <span className="text-qnekt-black">Subject Creation</span>{" "}
                  <span className="text-qnekt-red">Demo</span>
                </CardTitle>
                <CardDescription>Follow this interactive guide to create your first subject</CardDescription>
                <div className="gradient-line w-full"></div>
              </CardHeader>
              <CardContent>
                <SubjectCreationDemo />
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="subjects" className="py-6">
            <Card className="gradient-border-animated">
              <CardHeader>
                <CardTitle>
                  <span className="text-qnekt-black">Subject</span> <span className="text-qnekt-green">Management</span>
                </CardTitle>
                <CardDescription>
                  Create and manage the five core subjects for your educational platform
                </CardDescription>
                <div className="gradient-line w-full"></div>
              </CardHeader>
              <CardContent>
                <SubjectManagement />
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="materials" className="py-6">
            <Card className="gradient-border-animated">
              <CardHeader>
                <CardTitle>
                  <span className="text-qnekt-black">Material</span> <span className="text-qnekt-red">Upload</span>
                </CardTitle>
                <CardDescription>
                  Upload comprehensive learning materials with videos and detailed content
                </CardDescription>
                <div className="gradient-line w-full"></div>
              </CardHeader>
              <CardContent>
                <MaterialUpload />
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="quizzes" className="py-6">
            <Card className="gradient-border-animated">
              <CardHeader>
                <CardTitle>
                  <span className="text-qnekt-black">Quiz</span> <span className="text-qnekt-red">Generation</span>
                </CardTitle>
                <CardDescription>Automatically generate quizzes based on uploaded materials</CardDescription>
                <div className="gradient-line w-full"></div>
              </CardHeader>
              <CardContent>
                <QuizGeneration />
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/content/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { UploadCloud } from "lucide-react"

export default function AdminContentPage() {
  return (
    <div className="container mx-auto py-10 px-4">
      <div className="mb-8">
        <ColoredHeading text="Content Management" element="h1" className="text-3xl font-bold" />
        <p className="text-gray-600 mt-1">
          Upload, organize, and manage all learning materials, including videos, articles, and downloadable resources.
        </p>
        <div className="gradient-line w-32 mt-2"></div>
      </div>

<Card className="gradient-border">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <UploadCloud className="h-5 w-5 text-qnekt-primary" />
            Manage Your Content
          </CardTitle>
          <CardDescription>
            This section will provide tools to manage all educational content on the Qnekt platform.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-center text-gray-500 py-8">
            <UploadCloud className="h-16 w-16 mx-auto mb-4 opacity-30" />
            <p className="text-xl font-semibold">Content Management Tools Coming Soon</p>
            <p>
              Features for uploading, editing, categorizing, and publishing learning materials will be available here.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/ai-settings/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Brain } from "lucide-react"

export default function AdminAiSettingsPage() {
  return (
    <div className="container mx-auto py-10 px-4">
      <div className="mb-8">
        <ColoredHeading text="AI Settings" element="h1" className="text-3xl font-bold" />
        <p className="text-gray-600 mt-1">
          Configure and manage AI-powered tools for content creation, quiz generation, and student assistance.
        </p>
        <div className="gradient-line w-32 mt-2"></div>
      </div>

<Card className="gradient-border">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Brain className="h-5 w-5 text-qnekt-primary" />
            Artificial Intelligence Configuration
          </CardTitle>
          <CardDescription>
            This section will allow you to manage settings related to AI integrations and features.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-center text-gray-500 py-8">
            <Brain className="h-16 w-16 mx-auto mb-4 opacity-30" />
            <p className="text-xl font-semibold">AI Settings Panel Coming Soon</p>
            <p>
              Options to configure AI models, content generation parameters, and other AI-driven functionalities will be
              available here.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/appearance/page.tsx" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Palette } from "lucide-react"

export default function AdminAppearancePage() {
  return (
    <div className="container mx-auto py-10 px-4">
      <div className="mb-8">
        <ColoredHeading text="Appearance Settings" element="h1" className="text-3xl font-bold" />
        <p className="text-gray-600 mt-1">Customize the visual theme, branding, and layout of the Qnekt platform.</p>
        <div className="gradient-line w-32 mt-2"></div>
      </div>

<Card className="gradient-border">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Palette className="h-5 w-5 text-qnekt-primary" />
            Platform Customization
          </CardTitle>
          <CardDescription>
            This section will provide options to tailor the look and feel of your Qnekt instance.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-center text-gray-500 py-8">
            <Palette className="h-16 w-16 mx-auto mb-4 opacity-30" />
            <p className="text-xl font-semibold">Appearance Customization Tools Coming Soon</p>
            <p>Features for managing themes, logos, color schemes, and other visual elements will be available here.</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]png:file="public/testimonials/nusaiba-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/little-women-muslim-character-with-hijab-and-dress-vector-removebg-preview-LoAfWWs4YVlx8Mx6F3aPQUpE4Onku9.png" isMerged="true"
[V0_FILE]png:file="public/testimonials/inaya-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cartoon-muslim-girl-wearing-glasses-and-a-hijab-vector-removebg-preview-RSZixlrJF85SFNVqjiLlHzmVZbOGJQ.png" isMerged="true"
[V0_FILE]png:file="public/testimonials/aariz-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/illustration-little-muslim-boy-giving-thumbs-up-with-cartoon-vector-design_995281-1689-removebg-preview-oNyQIiuIevQwwyE2QGhTeFDZSiSNl8.png" isMerged="true"
[V0_FILE]png:file="public/subjects/biology-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/biology-overview-KO4lfIs0qOf7LY7lXl3lpyxNeLeJuF.png" isMerged="true"
[V0_FILE]png:file="public/subjects/chemistry-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/chemistry-overview-5opb3ZphXpfJX0mbQJ9gqLkz2ciIs4.png" isMerged="true"
[V0_FILE]png:file="public/subjects/physics-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/physics-overview-5ElLdhvNxM9xTNuw4QJG5p4vqEog7i.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/geography-overview-FChTOyeZKne2fZRRj84wppRXs9odlv.png" isMerged="true"
[V0_FILE]png:file="public/subjects/quranic-studies-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/overview-main.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/biology-overview-KO4lfIs0qOf7LY7lXl3lpyxNeLeJuF.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/topic-landforms.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/chemistry-overview-5opb3ZphXpfJX0mbQJ9gqLkz2ciIs4.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/topic-climate.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/physics-overview-5ElLdhvNxM9xTNuw4QJG5p4vqEog7i.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/topic-water-bodies.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/geography-overview-FChTOyeZKne2fZRRj84wppRXs9odlv.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/subjects/biology/plant-biology/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import Image from "next/image" // Added Image import
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function PlantBiologyPage() {
  return (
    <div className="container py-10">
      <Button asChild variant="outline" className="mb-6">
        <Link href="/subjects/biology">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Biology
        </Link>
      </Button>
      <ColoredHeading text="Plant Biology" element="h1" className="text-3xl font-bold mb-4" />
      <p className="text-qnekt-black mb-6 text-lg">
        This page will cover topics related to Plant Biology, including plant structures, photosynthesis, and their
        ecological importance, all viewed through the lens of Quranic wisdom.
      </p>
      <div className="my-8 flex justify-center">
        <Image
          src="/subjects/biology/detail_plant_biology.png" // Added new image
          alt="Detailed illustration of various plants, showcasing leaf structure and flowers"
          width={700}
          height={400}
          className="rounded-lg shadow-lg object-cover"
        />
      </div>
      <div className="gradient-line w-full my-6"></div>
      <p className="text-qnekt-black mb-6">Content for Plant Biology is under development. Please check back soon!</p>
      <Button asChild className="bg-qnekt-green hover:bg-qnekt-green/90 text-qnekt-black">
        <Link href="/subjects/biology">Back to Biology</Link>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/biology/life-cycles/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import Image from "next/image" // Added Image import
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function LifeCyclesPage() {
  return (
    <div className="container py-10">
      <Button asChild variant="outline" className="mb-6">
        <Link href="/subjects/biology">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Biology
        </Link>
      </Button>
      <ColoredHeading text="Life Cycles" element="h1" className="text-3xl font-bold mb-4" />
      <p className="text-qnekt-black mb-6 text-lg">
        This page will explore the fascinating life cycles of various organisms, from simple cells to complex animals,
        integrating scientific understanding with Quranic perspectives.
      </p>
      <div className="my-8 flex justify-center">
        <Image
          src="/subjects/biology/detail_life_cycles.png" // Added new image
          alt="Engaging visual montage of different life cycles: butterfly, plant, and amphibian"
          width={700}
          height={400}
          className="rounded-lg shadow-lg object-cover"
        />
      </div>
      <div className="gradient-line w-full my-6"></div>
      <p className="text-qnekt-black mb-6">Content for Life Cycles is under development. Please check back soon!</p>
      <Button asChild className="bg-qnekt-green hover:bg-qnekt-green/90 text-qnekt-black">
        <Link href="/subjects/biology">Back to Biology</Link>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/chemistry/atomic-structure/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function AtomicStructurePage() {
  return (
    <div className="container py-10">
      <Button asChild variant="outline" className="mb-6 gradient-border">
        <Link href="/subjects/chemistry">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Chemistry
        </Link>
      </Button>

<ColoredHeading text="Atomic Structure" element="h1" className="text-3xl font-bold mb-2 text-qnekt-red" />
      <p className="text-lg text-muted-foreground mb-8">
        Explore the fundamental building blocks of matter: atoms, electrons, protons, and neutrons, and their Quranic
        parallels.
      </p>

<div className="prose dark:prose-invert max-w-none">
        <p className="text-qnekt-black">
          The concept of the atom (<em>dharrah</em> in Arabic) is mentioned in the Quran, often to emphasize Allah's
          knowledge of even the smallest things. Modern science has unveiled the intricate structure of the atom,
          consisting of a nucleus with protons and neutrons, and electrons orbiting this nucleus.
        </p>
        <h2 className="text-qnekt-red">Components of an Atom</h2>
        <ul className="text-qnekt-black">
          <li>
            <strong>Protons:</strong> Positively charged particles found in the nucleus.
          </li>
          <li>
            <strong>Neutrons:</strong> Neutral particles found in the nucleus.
          </li>
          <li>
            <strong>Electrons:</strong> Negatively charged particles orbiting the nucleus in specific energy levels or
            shells.
          </li>
        </ul>

<h2 className="text-qnekt-red">Quranic Connection</h2>
        <div className="mt-4 p-6 bg-qnekt-red/10 rounded-lg border border-qnekt-red">
          <blockquote className="border-l-4 border-qnekt-red pl-4 italic">
            <p className="font-arabic text-lg text-qnekt-black">
              وَمَا يَعْزُبُ عَنْ رَبِّكَ مِنْ مِثْقَالِ ذَرَّةٍ فِي الْأَرْضِ وَلَا فِي السَّمَاءِ وَلَا أَصْغَرَ مِنْ ذَٰلِكَ وَلَا أَكْبَرَ إِلَّا فِي كِتَابٍ مُبِينٍ
            </p>
            <p className="mt-2 text-sm">
              "And not absent from your Lord is any particle's weight within the earth or within the heaven or anything
              smaller than that or greater but that it is in a clear register." (Quran 10:61)
            </p>
          </blockquote>
          <p className="mt-3 text-sm text-qnekt-black">
            This verse highlights the omniscience of Allah, extending to the smallest particles, which can be understood
            in the context of atoms and their subatomic components. The order and precision within atomic structures
            also reflect divine mastery.
          </p>
        </div>
        <p className="text-qnekt-black mt-6">
          Further content for Atomic Structure, including detailed explanations of electron shells, isotopes, and their
          significance, is under development. Please check back soon!
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/geography/landforms/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function LandformsPage() {
  return (
    <div className="container py-10">
      <Button asChild variant="outline" className="mb-6">
        <Link href="/subjects/geography">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Geography
        </Link>
      </Button>
      <ColoredHeading
        text="Mountains and Landforms"
        element="h1"
        className="text-3xl font-bold mb-4 text-qnekt-green"
      />
      <p className="text-qnekt-black mb-6 text-lg">
        Study Earth's diverse physical features, the processes of mountain formation, and reflect on Quranic
        descriptions of mountains as pegs that stabilize the Earth.
      </p>

<div className="prose prose-lg max-w-none text-qnekt-black">
        <h2 className="text-2xl font-semibold text-qnekt-green mb-4">Key Concepts</h2>
        <ul className="list-disc pl-5 space-y-2">
          <li>Types of landforms (mountains, valleys, plateaus, plains, etc.)</li>
          <li>Tectonic plate movements and mountain building (orogeny)</li>
          <li>Erosion and weathering processes shaping landforms</li>
          <li>The role of mountains in ecosystems and water cycles</li>
        </ul>

<h2 className="text-2xl font-semibold text-qnekt-green mt-8 mb-4">Quranic Connection</h2>
        <blockquote className="border-l-4 border-qnekt-red pl-4 italic">
          "And the mountains He has fixed firmly" (Quran 79:32)
        </blockquote>
        <p>
          Explore verses that describe mountains and their significance, reflecting on the wisdom behind their creation.
        </p>
        <p className="mt-6 text-center text-muted-foreground">
          Detailed lesson content for Landforms is under development. Please check back soon!
        </p>
      </div>

<div className="mt-10 text-center">
        <Button asChild className="bg-qnekt-green hover:bg-qnekt-green/90 text-white">
          <Link href="/subjects/geography">Back to Geography</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/geography/climate/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function ClimatePage() {
  return (
    <div className="container py-10">
      <Button asChild variant="outline" className="mb-6">
        <Link href="/subjects/geography">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Geography
        </Link>
      </Button>
      <ColoredHeading text="Climate and Weather" element="h1" className="text-3xl font-bold mb-4 text-qnekt-green" />
      <p className="text-qnekt-black mb-6 text-lg">
        Understand the Earth's diverse climate zones, weather patterns, and atmospheric phenomena, alongside Quranic
        references to wind, rain, and the balance in nature.
      </p>

<div className="prose prose-lg max-w-none text-qnekt-black">
        <h2 className="text-2xl font-semibold text-qnekt-green mb-4">Key Concepts</h2>
        <ul className="list-disc pl-5 space-y-2">
          <li>Factors influencing climate (latitude, altitude, ocean currents)</li>
          <li>Major climate zones (tropical, temperate, polar)</li>
          <li>Weather systems, atmospheric pressure, and wind patterns</li>
          <li>The role of climate in shaping ecosystems and human life</li>
        </ul>

<h2 className="text-2xl font-semibold text-qnekt-green mt-8 mb-4">Quranic Connection</h2>
        <blockquote className="border-l-4 border-qnekt-red pl-4 italic">
          "And it is He who sends the winds as good tidings before His mercy..." (Quran 7:57)
        </blockquote>
        <p>
          Reflect on Quranic verses that describe meteorological phenomena and the intricate systems that govern our
          planet's climate.
        </p>
        <p className="mt-6 text-center text-muted-foreground">
          Detailed lesson content for Climate and Weather is under development. Please check back soon!
        </p>
      </div>

<div className="mt-10 text-center">
        <Button asChild className="bg-qnekt-green hover:bg-qnekt-green/90 text-white">
          <Link href="/subjects/geography">Back to Geography</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/geography/water-bodies/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function WaterBodiesPage() {
  return (
    <div className="container py-10">
      <Button asChild variant="outline" className="mb-6">
        <Link href="/subjects/geography">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Geography
        </Link>
      </Button>
      <ColoredHeading
        text="Water Bodies and Cycles"
        element="h1"
        className="text-3xl font-bold mb-4 text-qnekt-green"
      />
      <p className="text-qnekt-black mb-6 text-lg">
        Explore the Earth's oceans, rivers, and lakes, understand the vital water cycle, and contemplate the
        significance of water as described in the Quran.
      </p>

<div className="prose prose-lg max-w-none text-qnekt-black">
        <h2 className="text-2xl font-semibold text-qnekt-green mb-4">Key Concepts</h2>
        <ul className="list-disc pl-5 space-y-2">
          <li>Types of water bodies (oceans, seas, rivers, lakes, groundwater)</li>
          <li>The hydrological (water) cycle: evaporation, condensation, precipitation, collection</li>
          <li>Ocean currents and their impact on climate</li>
          <li>The importance of water for life and ecosystems</li>
        </ul>

<h2 className="text-2xl font-semibold text-qnekt-green mt-8 mb-4">Quranic Connection</h2>
        <blockquote className="border-l-4 border-qnekt-red pl-4 italic">
          "And We send down from the sky rain charted with blessing, and We produce therewith gardens and grain for
          harvest..." (Quran 50:9)
        </blockquote>
        <p>
          Discover Quranic verses that beautifully describe the water cycle and the life-giving properties of water.
        </p>
        <p className="mt-6 text-center text-muted-foreground">
          Detailed lesson content for Water Bodies is under development. Please check back soon!
        </p>
      </div>

<div className="mt-10 text-center">
        <Button asChild className="bg-qnekt-green hover:bg-qnekt-green/90 text-white">
          <Link href="/subjects/geography">Back to Geography</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/quran/creation/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function QuranCreationPage() {
  return (
    <div className="container py-10">
      <Button asChild variant="outline" className="mb-6">
        <Link href="/subjects/quran">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Quranic Studies
        </Link>
      </Button>
      <ColoredHeading
        text="Creation and Cosmology in the Quran"
        element="h1"
        className="text-3xl font-bold mb-4 text-qnekt-red"
      />
      <p className="text-qnekt-black mb-6 text-lg">
        Study Quranic verses about the creation of the heavens, the Earth, and the cosmos, and explore their profound
        alignment with modern cosmological understanding.
      </p>

<div className="prose prose-lg max-w-none text-qnekt-black">
        <h2 className="text-2xl font-semibold text-qnekt-red mb-4">Key Themes</h2>
        <ul className="list-disc pl-5 space-y-2">
          <li>The concept of "Kun Faya Kun" (Be, and it is)</li>
          <li>The six days (periods) of creation</li>
          <li>The expansion of the universe</li>
          <li>The creation of celestial bodies: sun, moon, stars</li>
          <li>The purpose and balance in creation</li>
        </ul>

<h2 className="text-2xl font-semibold text-qnekt-red mt-8 mb-4">Reflective Verses</h2>
        <blockquote className="border-l-4 border-qnekt-green pl-4 italic">
          "Have those who disbelieved not considered that the heavens and the earth were a joined entity, and We
          separated them and made from water every living thing? Then will they not believe?" (Quran 21:30)
        </blockquote>
        <p>
          Delve into the meanings of these verses and their implications for understanding our origins and the universe.
        </p>
        <p className="mt-6 text-center text-muted-foreground">
          Detailed lesson content for Creation and Cosmology is under development. Please check back soon!
        </p>
      </div>

<div className="mt-10 text-center">
        <Button asChild className="bg-qnekt-red hover:bg-qnekt-red/90 text-white">
          <Link href="/subjects/quran">Back to Quranic Studies</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/quran/human-development/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function QuranHumanDevelopmentPage() {
  return (
    <div className="container py-10">
      <Button asChild variant="outline" className="mb-6">
        <Link href="/subjects/quran">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Quranic Studies
        </Link>
      </Button>
      <ColoredHeading
        text="Human Development in the Quran"
        element="h1"
        className="text-3xl font-bold mb-4 text-qnekt-red"
      />
      <p className="text-qnekt-black mb-6 text-lg">
        Explore the miraculous Quranic verses describing the stages of human embryonic development, noting their
        remarkable accuracy with modern scientific discoveries.
      </p>

<div className="prose prose-lg max-w-none text-qnekt-black">
        <h2 className="text-2xl font-semibold text-qnekt-red mb-4">Key Stages Mentioned</h2>
        <ul className="list-disc pl-5 space-y-2">
          <li>Nutfah (mixed drop of fluid)</li>
          <li>Alaqah (clinging clot or leech-like substance)</li>
          <li>Mudghah (chewed-like lump of flesh)</li>
          <li>Izam (bones) and Lahm (flesh clothing the bones)</li>
          <li>The ensoulment and shaping</li>
        </ul>

<h2 className="text-2xl font-semibold text-qnekt-red mt-8 mb-4">Reflective Verses</h2>
        <blockquote className="border-l-4 border-qnekt-green pl-4 italic">
          "Then We made the Nutfah into an Alaqah, then We made the Alaqah into a Mudghah, then We made the Mudghah into
          bones, and We clothed the bones with flesh; then We developed him into another creation. So blessed is Allah,
          the best of creators." (Quran 23:14)
        </blockquote>
        <p>Contemplate the precision and depth of these descriptions revealed centuries before modern embryology.</p>
        <p className="mt-6 text-center text-muted-foreground">
          Detailed lesson content for Human Development in the Quran is under development. Please check back soon!
        </p>
      </div>

<div className="mt-10 text-center">
        <Button asChild className="bg-qnekt-red hover:bg-qnekt-red/90 text-white">
          <Link href="/subjects/quran">Back to Quranic Studies</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/quran/natural-phenomena/page.tsx" isEdit="true" isMerged="true"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function QuranNaturalPhenomenaPage() {
  return (
    <div className="container py-10">
      <Button asChild variant="outline" className="mb-6">
        <Link href="/subjects/quran">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Quranic Studies
        </Link>
      </Button>
      <ColoredHeading
        text="Natural Phenomena in the Quran"
        element="h1"
        className="text-3xl font-bold mb-4 text-qnekt-red"
      />
      <p className="text-qnekt-black mb-6 text-lg">
        Discover Quranic verses that describe various natural phenomena, from the water cycle to the function of
        mountains, highlighting the harmony between revelation and scientific observation.
      </p>

<div className="prose prose-lg max-w-none text-qnekt-black">
        <h2 className="text-2xl font-semibold text-qnekt-red mb-4">Examples from the Quran</h2>
        <ul className="list-disc pl-5 space-y-2">
          <li>The Water Cycle: Evaporation, cloud formation, and rain.</li>
          <li>Mountains: Their role as stabilizers ("pegs").</li>
          <li>The Barrier Between Seas: Fresh and saltwater meeting but not mixing.</li>
          <li>Wind and Pollination: Winds as fertilizers.</li>
          <li>The Sun and Moon: Their ordained courses and light.</li>
        </ul>

<h2 className="text-2xl font-semibold text-qnekt-red mt-8 mb-4">Reflective Verses</h2>
        <blockquote className="border-l-4 border-qnekt-green pl-4 italic">
          "Do you not see that Allah sends down rain from the sky and makes it flow as springs [and rivers] in the
          earth; then He brings forth thereby crops of varying colors; then they dry and you see them turned yellow;
          then He makes them [scattered] debris. Indeed in that is a reminder for those of understanding." (Quran 39:21)
        </blockquote>
        <p>These verses invite contemplation and study of the natural world as signs of the Creator.</p>
        <p className="mt-6 text-center text-muted-foreground">
          Detailed lesson content for Natural Phenomena in the Quran is under development. Please check back soon!
        </p>
      </div>

<div className="mt-10 text-center">
        <Button asChild className="bg-qnekt-red hover:bg-qnekt-red/90 text-white">
          <Link href="/subjects/quran">Back to Quranic Studies</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/subjects/geography/overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/geography/overview-xl9Cj7h6vUbSWU70XKY4PkgtZpmqJY.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/topic_landforms.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/geography/topic_landforms-4jtfD9f5Ov9QmkvGR6wjw5Qc7xBeCQ.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/topic_climate.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/geography/topic_climate-INqghN4KzRW4chJWqQ7dHCj8Q2vBhI.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/topic_water_bodies.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/geography/topic_water_bodies-FvEmAXLkjRgtzfTdRHPdgcGqwdGPWa.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/detail_landforms.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/geography/detail_landforms-QfVfvuBKaOiihWEim7ewCpjYfP1f2G.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/detail_climate.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/geography/detail_water_bodies.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/biology/detail_human_anatomy.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/biology/detail_plant_biology.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/biology/detail_life_cycles.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/chemistry/detail_atomic_structure.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/quran/detail_creation_cosmology.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/quran/detail_human_development.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/quran/detail_natural_phenomena.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/biology/overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/biology/overview-2Plfzve8r4P93nolKcBrULC0bTP90b.png" isMerged="true"
[V0_FILE]png:file="public/subjects/biology/topic_human_anatomy.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/biology/topic_human_anatomy-cTCx29rLReQ7VjjcBsmQ0iMsX6ogSk.png" isMerged="true"
[V0_FILE]png:file="public/subjects/biology/topic_plant_biology.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/biology/topic_plant_biology-Sg8jlBLRsBMDHm0REjZOdHcaaKZ7vX.png" isMerged="true"
[V0_FILE]png:file="public/subjects/biology/topic_life_cycles.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/biology/topic_life_cycles-kHBJAV3OaqS0n8wKnmVF9YqccrC1hv.png" isMerged="true"
[V0_FILE]png:file="public/subjects/chemistry/overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/chemistry/overview-VWBf2DmDb8QYRWBOxY2UG9ed0jS6p3.png" isMerged="true"
[V0_FILE]png:file="public/subjects/chemistry/topic_atomic_structure.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/chemistry/topic_atomic_structure-Xm5AR3EhszCrwdbuDefylNmO3dgr4n.png" isMerged="true"
[V0_FILE]png:file="public/subjects/chemistry/topic_periodic_table.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/chemistry/topic_periodic_table-Q5jdMp70qaThlhM4QBYLbnCzDgWPSF.png" isMerged="true"
[V0_FILE]png:file="public/subjects/chemistry/topic_chemical_reactions.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/chemistry/topic_chemical_reactions-QyYL0qT1z1rkwBagBkK9iRTS5z3fXP.png" isMerged="true"
[V0_FILE]png:file="public/subjects/physics/overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/physics/overview-t0evh0syfXE0eoLCQdJ9jgK5Sswyis.png" isMerged="true"
[V0_FILE]png:file="public/subjects/physics/topic_motion_forces.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/physics/topic_motion_forces-rbPDUFi4cokGPTCh3ikoEal3jmi2Lk.png" isMerged="true"
[V0_FILE]png:file="public/subjects/physics/topic_light_optics.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/physics/topic_light_optics-VBHWEK40pGucKd4SeSuqxIOaKCmUi3.png" isMerged="true"
[V0_FILE]png:file="public/subjects/physics/topic_energy_work.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/physics/topic_energy_work-aj80nlxwScLwJiyQLj7RMcn3RJqu0W.png" isMerged="true"
[V0_FILE]png:file="public/subjects/quran/overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/quran/overview-DvJBy7wYkB0ypIY1Tv0yNKA3Vn44Qf.png" isMerged="true"
[V0_FILE]png:file="public/subjects/quran/topic_creation_cosmology.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/quran/topic_human_development.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/subjects/quran/topic_natural_phenomena.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/qnekt-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Qnekt_Black_logo-ZnjJLAEVmW7W7wVyQPQSrZuPawNNOw.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/use-toast.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"

import type { ToastActionElement, ToastProps } from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isEdit="true" isMerged="true"
"use client"

import { useToast } from "@/components/ui/use-toast"
import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/video-player-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Play } from "lucide-react"

interface Video {
  id: string
  title: string
  description: string
  thumbnail: string
  duration: string
  views: string
}

interface VideoPlayerModalProps {
  video?: Video
  isOpen?: boolean
  onClose?: () => void
  videoId?: string
  title?: string
}

export function VideoPlayerModal({ video, isOpen, onClose, videoId, title }: VideoPlayerModalProps) {
  const [isPlaying, setIsPlaying] = useState(false)

const handlePlay = () => {
    setIsPlaying(true)
  }

const handleClose = () => {
    setIsPlaying(false)
    onClose?.()
  }

if (video) {
    return (
      <Dialog open={isOpen} onOpenChange={handleClose}>
        <DialogContent className="max-w-4xl">
          <DialogHeader>
            <DialogTitle>{video.title}</DialogTitle>
          </DialogHeader>
          <div className="aspect-video bg-gray-900 rounded-lg overflow-hidden relative">
            {!isPlaying ? (
              <div className="absolute inset-0 flex items-center justify-center">
                <img
                  src={video.thumbnail || "/placeholder.svg"}
                  alt={video.title}
                  className="w-full h-full object-cover"
                />
                <Button
                  onClick={handlePlay}
                  className="absolute bg-qnekt-red hover:bg-qnekt-red/90 rounded-full w-16 h-16"
                >
                  <Play className="h-8 w-8 text-white ml-1" />
                </Button>
              </div>
            ) : (
              <div className="w-full h-full flex items-center justify-center text-white">
                <div className="text-center">
                  <Play className="h-16 w-16 mx-auto mb-4" />
                  <p>Video Player Placeholder</p>
                  <p className="text-sm opacity-75">In a real app, this would be a YouTube embed</p>
                </div>
              </div>
            )}
          </div>
          <div className="mt-4">
            <p className="text-gray-600">{video.description}</p>
            <div className="flex items-center justify-between mt-2 text-sm text-gray-500">
              <span>{video.duration}</span>
              <span>{video.views} views</span>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    )
  }

return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="max-w-4xl">
        <DialogHeader>
          <DialogTitle>{title || "Video Player"}</DialogTitle>
        </DialogHeader>
        <div className="aspect-video bg-gray-900 rounded-lg overflow-hidden relative">
          <div className="w-full h-full flex items-center justify-center text-white">
            <div className="text-center">
              <Play className="h-16 w-16 mx-auto mb-4" />
              <p>Video Player Placeholder</p>
              <p className="text-sm opacity-75">Video ID: {videoId}</p>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/educator-guide.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } 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 { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  BookOpen,
  Video,
  FileText,
  Users,
  Settings,
  Plus,
  Upload,
  Edit,
  CheckCircle,
  ArrowRight,
  Lightbulb,
  Target,
  Clock,
} from "lucide-react"
import Link from "next/link"

const guideSteps = [
  {
    id: 1,
    title: "Getting Started",
    icon: <BookOpen className="h-5 w-5" />,
    description: "Set up your educator profile and understand the platform",
    duration: "10 minutes",
    difficulty: "Beginner",
    tasks: [
      "Complete your educator profile",
      "Understand the Qnekt mission and values",
      "Explore the admin dashboard",
      "Review content guidelines",
    ],
    tips: [
      "Upload a professional profile photo",
      "Write a compelling bio that highlights your expertise",
      "Familiarize yourself with Islamic integration principles",
    ],
  },
  {
    id: 2,
    title: "Creating Subjects",
    icon: <Plus className="h-5 w-5" />,
    description: "Learn how to create and organize subject categories",
    duration: "15 minutes",
    difficulty: "Beginner",
    tasks: [
      "Navigate to Subject Management",
      "Create a new subject category",
      "Set subject description and objectives",
      "Add Quranic integration themes",
    ],
    tips: [
      "Choose clear, descriptive subject names",
      "Include relevant Quranic verses for each subject",
      "Consider age-appropriate content organization",
    ],
  },
  {
    id: 3,
    title: "Adding Topics",
    icon: <Edit className="h-5 w-5" />,
    description: "Structure your content with organized topics and subtopics",
    duration: "20 minutes",
    difficulty: "Intermediate",
    tasks: [
      "Create topic hierarchies",
      "Write engaging topic descriptions",
      "Link topics to Quranic verses",
      "Set learning objectives",
    ],
    tips: [
      "Use clear, student-friendly language",
      "Include prerequisite topics when necessary",
      "Balance scientific content with Islamic teachings",
    ],
  },
  {
    id: 4,
    title: "Uploading Videos",
    icon: <Video className="h-5 w-5" />,
    description: "Add engaging video content to your lessons",
    duration: "25 minutes",
    difficulty: "Intermediate",
    tasks: [
      "Prepare video files in supported formats",
      "Upload videos with proper metadata",
      "Create engaging thumbnails",
      "Add video descriptions and tags",
    ],
    tips: [
      "Keep videos between 5-15 minutes for optimal engagement",
      "Include both Arabic and English subtitles when possible",
      "Test video quality before publishing",
    ],
  },
  {
    id: 5,
    title: "Creating PDF Resources",
    icon: <FileText className="h-5 w-5" />,
    description: "Develop comprehensive PDF materials for students",
    duration: "30 minutes",
    difficulty: "Intermediate",
    tasks: [
      "Design educational PDF templates",
      "Include Quranic verses with translations",
      "Add interactive elements and exercises",
      "Optimize for mobile viewing",
    ],
    tips: [
      "Use consistent formatting and branding",
      "Include visual aids and diagrams",
      "Provide answer keys for exercises",
    ],
  },
  {
    id: 6,
    title: "Managing Quizzes",
    icon: <Target className="h-5 w-5" />,
    description: "Create assessments that test both scientific and Islamic knowledge",
    duration: "20 minutes",
    difficulty: "Advanced",
    tasks: [
      "Design multiple-choice questions",
      "Create essay-style questions",
      "Set up automatic grading",
      "Include Quranic verse identification",
    ],
    tips: [
      "Mix different question types for variety",
      "Include explanations for correct answers",
      "Test quizzes before publishing",
    ],
  },
  {
    id: 7,
    title: "User Management",
    icon: <Users className="h-5 w-5" />,
    description: "Monitor student progress and engagement",
    duration: "15 minutes",
    difficulty: "Intermediate",
    tasks: [
      "View student enrollment data",
      "Track learning progress",
      "Respond to student questions",
      "Generate progress reports",
    ],
    tips: [
      "Regularly check student feedback",
      "Provide personalized encouragement",
      "Identify struggling students early",
    ],
  },
  {
    id: 8,
    title: "Platform Settings",
    icon: <Settings className="h-5 w-5" />,
    description: "Customize your teaching environment and preferences",
    duration: "10 minutes",
    difficulty: "Beginner",
    tasks: [
      "Configure notification preferences",
      "Set up grading scales",
      "Customize dashboard layout",
      "Update privacy settings",
    ],
    tips: ["Enable important notifications", "Regularly backup your content", "Keep your contact information updated"],
  },
]

export function EducatorGuide() {
  const [currentStep, setCurrentStep] = useState(1)
  const [completedSteps, setCompletedSteps] = useState<number[]>([])

const handleStepComplete = (stepId: number) => {
    if (!completedSteps.includes(stepId)) {
      setCompletedSteps([...completedSteps, stepId])
    }
  }

const currentStepData = guideSteps.find((step) => step.id === currentStep)
  const progressPercentage = (completedSteps.length / guideSteps.length) * 100

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "Beginner":
        return "bg-green-100 text-green-800"
      case "Intermediate":
        return "bg-yellow-100 text-yellow-800"
      case "Advanced":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="max-w-6xl mx-auto p-6">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-qnekt-black mb-4">Educator's Step-by-Step Guide</h1>
        <p className="text-lg text-gray-600 mb-6">
          Master the Qnekt platform with our comprehensive guide. Learn how to create engaging content that bridges
          science with Islamic teachings.
        </p>

<div className="mb-6">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium text-qnekt-green">Overall Progress</span>
            <span className="text-sm text-gray-600">
              {completedSteps.length} of {guideSteps.length} completed
            </span>
          </div>
          <Progress value={progressPercentage} className="h-2" />
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Steps Navigation */}
        <div className="lg:col-span-1">
          <Card className="gradient-border">
            <CardHeader>
              <CardTitle className="text-lg">Guide Steps</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <div className="space-y-1">
                {guideSteps.map((step) => (
                  <button
                    key={step.id}
                    onClick={() => setCurrentStep(step.id)}
                    className={`w-full text-left p-3 rounded-lg transition-colors ${
                      currentStep === step.id
                        ? "bg-qnekt-green text-white"
                        : completedSteps.includes(step.id)
                          ? "bg-green-50 text-green-800"
                          : "hover:bg-gray-50"
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <div className="flex-shrink-0">
                        {completedSteps.includes(step.id) ? <CheckCircle className="h-5 w-5" /> : step.icon}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="font-medium text-sm truncate">{step.title}</div>
                        <div className="text-xs opacity-75 flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {step.duration}
                        </div>
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Main Content */}
        <div className="lg:col-span-3">
          {currentStepData && (
            <Card className="gradient-border-animated">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="p-2 bg-qnekt-green/10 rounded-lg text-qnekt-green">{currentStepData.icon}</div>
                    <div>
                      <CardTitle className="text-xl">
                        Step {currentStepData.id}: {currentStepData.title}
                      </CardTitle>
                      <CardDescription>{currentStepData.description}</CardDescription>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge className={getDifficultyColor(currentStepData.difficulty)}>
                      {currentStepData.difficulty}
                    </Badge>
                    <Badge variant="outline" className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      {currentStepData.duration}
                    </Badge>
                  </div>
                </div>
              </CardHeader>

<CardContent>
                <Tabs defaultValue="tasks" className="w-full">
                  <TabsList className="grid w-full grid-cols-3">
                    <TabsTrigger value="tasks">Tasks</TabsTrigger>
                    <TabsTrigger value="tips">Pro Tips</TabsTrigger>
                    <TabsTrigger value="resources">Resources</TabsTrigger>
                  </TabsList>

<TabsContent value="tasks" className="mt-6">
                    <div className="space-y-4">
                      <h3 className="font-semibold text-qnekt-black mb-4">Complete these tasks:</h3>
                      <div className="space-y-3">
                        {currentStepData.tasks.map((task, index) => (
                          <div key={index} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
                            <div className="flex-shrink-0 w-6 h-6 bg-qnekt-green text-white rounded-full flex items-center justify-center text-sm font-medium mt-0.5">
                              {index + 1}
                            </div>
                            <p className="text-gray-700">{task}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  </TabsContent>

<TabsContent value="tips" className="mt-6">
                    <div className="space-y-4">
                      <h3 className="font-semibold text-qnekt-black mb-4 flex items-center gap-2">
                        <Lightbulb className="h-5 w-5 text-yellow-500" />
                        Pro Tips for Success:
                      </h3>
                      <div className="space-y-3">
                        {currentStepData.tips.map((tip, index) => (
                          <div
                            key={index}
                            className="flex items-start gap-3 p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-400"
                          >
                            <div className="flex-shrink-0">
                              <Lightbulb className="h-4 w-4 text-yellow-600 mt-0.5" />
                            </div>
                            <p className="text-gray-700">{tip}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  </TabsContent>

<TabsContent value="resources" className="mt-6">
                    <div className="space-y-4">
                      <h3 className="font-semibold text-qnekt-black mb-4">Quick Access Links:</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <Button asChild variant="outline" className="justify-start h-auto p-4 bg-transparent">
                          <Link href="/admin/materials">
                            <Upload className="mr-2 h-4 w-4" />
                            <div className="text-left">
                              <div className="font-medium">Material Upload</div>
                              <div className="text-sm text-gray-500">Add videos, PDFs, and resources</div>
                            </div>
                          </Link>
                        </Button>

<Button asChild variant="outline" className="justify-start h-auto p-4 bg-transparent">
                          <Link href="/admin/enhanced">
                            <Plus className="mr-2 h-4 w-4" />
                            <div className="text-left">
                              <div className="font-medium">Subject Creation</div>
                              <div className="text-sm text-gray-500">Create new subjects and topics</div>
                            </div>
                          </Link>
                        </Button>

<Button asChild variant="outline" className="justify-start h-auto p-4 bg-transparent">
                          <Link href="/admin/users">
                            <Users className="mr-2 h-4 w-4" />
                            <div className="text-left">
                              <div className="font-medium">User Management</div>
                              <div className="text-sm text-gray-500">Monitor student progress</div>
                            </div>
                          </Link>
                        </Button>

<Button asChild variant="outline" className="justify-start h-auto p-4 bg-transparent">
                          <Link href="/admin/settings">
                            <Settings className="mr-2 h-4 w-4" />
                            <div className="text-left">
                              <div className="font-medium">Platform Settings</div>
                              <div className="text-sm text-gray-500">Customize your preferences</div>
                            </div>
                          </Link>
                        </Button>
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>

<div className="flex items-center justify-between mt-8 pt-6 border-t">
                  <Button
                    variant="outline"
                    onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
                    disabled={currentStep === 1}
                    className="border-qnekt-green text-qnekt-green hover:bg-qnekt-green hover:text-white bg-transparent"
                  >
                    Previous Step
                  </Button>

<div className="flex items-center gap-4">
                    {!completedSteps.includes(currentStep) && (
                      <Button
                        onClick={() => handleStepComplete(currentStep)}
                        variant="outline"
                        className="border-qnekt-green text-qnekt-green hover:bg-qnekt-green hover:text-white bg-transparent"
                      >
                        <CheckCircle className="mr-2 h-4 w-4" />
                        Mark Complete
                      </Button>
                    )}

<Button
                      onClick={() => setCurrentStep(Math.min(guideSteps.length, currentStep + 1))}
                      disabled={currentStep === guideSteps.length}
                      className="bg-qnekt-green hover:bg-qnekt-green/90"
                    >
                      Next Step
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>

{/* Completion Celebration */}
      {completedSteps.length === guideSteps.length && (
        <Card className="mt-8 gradient-border bg-gradient-to-r from-qnekt-green/10 to-qnekt-red/10">
          <CardContent className="p-8 text-center">
            <div className="mb-4">
              <CheckCircle className="h-16 w-16 text-qnekt-green mx-auto mb-4" />
              <h2 className="text-2xl font-bold text-qnekt-black mb-2">Congratulations! 🎉</h2>
              <p className="text-lg text-gray-600">
                You've completed the Educator's Guide. You're now ready to create amazing content on Qnekt!
              </p>
            </div>
            <Button asChild className="bg-qnekt-green hover:bg-qnekt-green/90">
              <Link href="/admin">
                Go to Admin Dashboard
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/materials/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/announcements/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/educator-guide/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/settings/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import {
  Users,
  Search,
  Filter,
  MoreHorizontal,
  UserPlus,
  Mail,
  Shield,
  Trash2,
  ArrowLeft,
  Eye,
  Edit,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/components/ui/use-toast"

interface User {
  id: string
  name: string
  email: string
  role: "student" | "educator" | "admin"
  status: "active" | "inactive" | "pending"
  joinDate: string
  lastActive: string
  coursesEnrolled: number
}

const mockUsers: User[] = [
  {
    id: "1",
    name: "Fatima Ahmed",
    email: "fatima.ahmed@email.com",
    role: "student",
    status: "active",
    joinDate: "2024-01-15",
    lastActive: "2 hours ago",
    coursesEnrolled: 5,
  },
  {
    id: "2",
    name: "Dr. Omar Hassan",
    email: "omar.hassan@qnekt.edu",
    role: "educator",
    status: "active",
    joinDate: "2023-09-10",
    lastActive: "1 day ago",
    coursesEnrolled: 0,
  },
  {
    id: "3",
    name: "Aisha Rahman",
    email: "aisha.rahman@email.com",
    role: "student",
    status: "pending",
    joinDate: "2024-01-20",
    lastActive: "Never",
    coursesEnrolled: 0,
  },
  {
    id: "4",
    name: "Prof. Yusuf Ali",
    email: "yusuf.ali@qnekt.edu",
    role: "educator",
    status: "active",
    joinDate: "2023-08-05",
    lastActive: "3 hours ago",
    coursesEnrolled: 0,
  },
  {
    id: "5",
    name: "Zainab Malik",
    email: "zainab.malik@email.com",
    role: "student",
    status: "inactive",
    joinDate: "2023-12-01",
    lastActive: "2 weeks ago",
    coursesEnrolled: 3,
  },
]

export default function UsersManagement() {
  const router = useRouter()
  const { toast } = useToast()
  const [users, setUsers] = useState<User[]>(mockUsers)
  const [searchTerm, setSearchTerm] = useState("")
  const [roleFilter, setRoleFilter] = useState<string>("all")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [selectedUsers, setSelectedUsers] = useState<string[]>([])

const filteredUsers = users.filter((user) => {
    const matchesSearch =
      user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.email.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesRole = roleFilter === "all" || user.role === roleFilter
    const matchesStatus = statusFilter === "all" || user.status === statusFilter

return matchesSearch && matchesRole && matchesStatus
  })

const getRoleColor = (role: User["role"]) => {
    switch (role) {
      case "admin":
        return "bg-qnekt-red text-white"
      case "educator":
        return "bg-qnekt-green text-white"
      case "student":
        return "bg-qnekt-black text-white"
      default:
        return "bg-gray-500 text-white"
    }
  }

const getStatusColor = (status: User["status"]) => {
    switch (status) {
      case "active":
        return "bg-green-100 text-green-800"
      case "inactive":
        return "bg-red-100 text-red-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const handleSelectUser = (userId: string) => {
    setSelectedUsers((prev) => (prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]))
  }

const handleSelectAll = () => {
    setSelectedUsers(selectedUsers.length === filteredUsers.length ? [] : filteredUsers.map((user) => user.id))
  }

const handleDeleteUser = (userId: string) => {
    setUsers((prev) => prev.filter((user) => user.id !== userId))
    toast({
      title: "User deleted",
      description: "User has been successfully removed",
    })
  }

const handleBulkAction = (action: string) => {
    if (selectedUsers.length === 0) {
      toast({
        title: "No users selected",
        description: "Please select users to perform bulk actions",
        variant: "destructive",
      })
      return
    }

switch (action) {
      case "activate":
        setUsers((prev) =>
          prev.map((user) => (selectedUsers.includes(user.id) ? { ...user, status: "active" as const } : user)),
        )
        toast({
          title: "Users activated",
          description: `${selectedUsers.length} user(s) have been activated`,
        })
        break
      case "deactivate":
        setUsers((prev) =>
          prev.map((user) => (selectedUsers.includes(user.id) ? { ...user, status: "inactive" as const } : user)),
        )
        toast({
          title: "Users deactivated",
          description: `${selectedUsers.length} user(s) have been deactivated`,
        })
        break
      case "delete":
        setUsers((prev) => prev.filter((user) => !selectedUsers.includes(user.id)))
        toast({
          title: "Users deleted",
          description: `${selectedUsers.length} user(s) have been deleted`,
        })
        break
    }
    setSelectedUsers([])
  }

const stats = [
    { title: "Total Users", value: users.length, color: "text-qnekt-black" },
    { title: "Active Users", value: users.filter((u) => u.status === "active").length, color: "text-qnekt-green" },
    { title: "Educators", value: users.filter((u) => u.role === "educator").length, color: "text-qnekt-red" },
    { title: "Pending", value: users.filter((u) => u.status === "pending").length, color: "text-yellow-600" },
  ]

return (
    <div className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="flex items-center gap-4 mb-8">
        <Button variant="outline" onClick={() => router.push("/admin")} className="flex items-center gap-2">
          <ArrowLeft className="h-4 w-4" />
          Back to Dashboard
        </Button>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-qnekt-black">User Management</h1>
          <p className="text-gray-600">Manage user accounts and permissions</p>
        </div>
        <Button className="bg-qnekt-green hover:bg-qnekt-green/90">
          <UserPlus className="h-4 w-4 mr-2" />
          Add User
        </Button>
      </div>

{/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        {stats.map((stat, index) => (
          <Card key={index} className="gradient-border-animated">
            <CardContent className="p-6">
              <div className="text-center">
                <p className="text-2xl font-bold text-qnekt-black">{stat.value}</p>
                <p className={`text-sm ${stat.color}`}>{stat.title}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Filters and Search */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="h-5 w-5 text-qnekt-green" />
            Search & Filter
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search users by name or email..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <Select value={roleFilter} onValueChange={setRoleFilter}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Filter by role" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Roles</SelectItem>
                <SelectItem value="student">Students</SelectItem>
                <SelectItem value="educator">Educators</SelectItem>
                <SelectItem value="admin">Admins</SelectItem>
              </SelectContent>
            </Select>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="inactive">Inactive</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Bulk Actions */}
      {selectedUsers.length > 0 && (
        <Card className="mb-6 border-qnekt-green">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">{selectedUsers.length} user(s) selected</span>
              <div className="flex gap-2">
                <Button variant="outline" size="sm" onClick={() => handleBulkAction("activate")}>
                  Activate
                </Button>
                <Button variant="outline" size="sm" onClick={() => handleBulkAction("deactivate")}>
                  Deactivate
                </Button>
                <Button variant="destructive" size="sm" onClick={() => handleBulkAction("delete")}>
                  Delete
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Users Table */}
      <Card className="gradient-border-newsletter">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5 text-qnekt-green" />
            Users ({filteredUsers.length})
          </CardTitle>
          <CardDescription>Manage all platform users</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">
                  <Checkbox
                    checked={selectedUsers.length === filteredUsers.length && filteredUsers.length > 0}
                    onCheckedChange={handleSelectAll}
                  />
                </TableHead>
                <TableHead>User</TableHead>
                <TableHead>Role</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Join Date</TableHead>
                <TableHead>Last Active</TableHead>
                <TableHead>Courses</TableHead>
                <TableHead className="w-12">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredUsers.map((user) => (
                <TableRow key={user.id}>
                  <TableCell>
                    <Checkbox
                      checked={selectedUsers.includes(user.id)}
                      onCheckedChange={() => handleSelectUser(user.id)}
                    />
                  </TableCell>
                  <TableCell>
                    <div>
                      <p className="font-medium text-qnekt-black">{user.name}</p>
                      <p className="text-sm text-gray-500">{user.email}</p>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge className={getRoleColor(user.role)}>{user.role}</Badge>
                  </TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={getStatusColor(user.status)}>
                      {user.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-sm text-gray-600">
                    {new Date(user.joinDate).toLocaleDateString()}
                  </TableCell>
                  <TableCell className="text-sm text-gray-600">{user.lastActive}</TableCell>
                  <TableCell className="text-sm text-gray-600">{user.coursesEnrolled}</TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>
                          <Eye className="h-4 w-4 mr-2" />
                          View Profile
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <Edit className="h-4 w-4 mr-2" />
                          Edit User
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <Mail className="h-4 w-4 mr-2" />
                          Send Message
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <Shield className="h-4 w-4 mr-2" />
                          Change Role
                        </DropdownMenuItem>
                        <DropdownMenuItem className="text-red-600" onClick={() => handleDeleteUser(user.id)}>
                          <Trash2 className="h-4 w-4 mr-2" />
                          Delete User
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/announcements/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import {
  MessageSquare,
  Plus,
  Search,
  Filter,
  MoreHorizontal,
  Send,
  Calendar,
  Users,
  ArrowLeft,
  Eye,
  Edit,
  Trash2,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/components/ui/use-toast"

interface Announcement {
  id: string
  title: string
  content: string
  type: "general" | "urgent" | "maintenance" | "feature"
  audience: "all" | "students" | "educators" | "admins"
  status: "draft" | "scheduled" | "published" | "archived"
  publishDate: string
  author: string
  views: number
}

const mockAnnouncements: Announcement[] = [
  {
    id: "1",
    title: "New Biology Course Available",
    content:
      "We are excited to announce the launch of our new Advanced Biology course featuring interactive content and Quranic connections.",
    type: "general",
    audience: "all",
    status: "published",
    publishDate: "2024-01-15",
    author: "Admin Team",
    views: 456,
  },
  {
    id: "2",
    title: "System Maintenance Scheduled",
    content:
      "The platform will undergo maintenance on January 20th from 2:00 AM to 4:00 AM UTC. Please plan accordingly.",
    type: "maintenance",
    audience: "all",
    status: "scheduled",
    publishDate: "2024-01-18",
    author: "Tech Team",
    views: 0,
  },
  {
    id: "3",
    title: "Educator Training Workshop",
    content:
      "Join us for a comprehensive training workshop on integrating Islamic values with modern science education.",
    type: "general",
    audience: "educators",
    status: "published",
    publishDate: "2024-01-14",
    author: "Dr. Omar Hassan",
    views: 123,
  },
  {
    id: "4",
    title: "New Quiz Feature Released",
    content:
      "We have added interactive quizzes to all subjects. Students can now test their knowledge after each lesson.",
    type: "feature",
    audience: "students",
    status: "draft",
    publishDate: "2024-01-16",
    author: "Product Team",
    views: 0,
  },
]

export default function AnnouncementsManagement() {
  const router = useRouter()
  const { toast } = useToast()
  const [announcements, setAnnouncements] = useState<Announcement[]>(mockAnnouncements)
  const [searchTerm, setSearchTerm] = useState("")
  const [typeFilter, setTypeFilter] = useState<string>("all")
  const [audienceFilter, setAudienceFilter] = useState<string>("all")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [selectedAnnouncements, setSelectedAnnouncements] = useState<string[]>([])
  const [showCreateForm, setShowCreateForm] = useState(false)
  const [newAnnouncement, setNewAnnouncement] = useState({
    title: "",
    content: "",
    type: "general" as Announcement["type"],
    audience: "all" as Announcement["audience"],
    publishDate: "",
  })

const filteredAnnouncements = announcements.filter((announcement) => {
    const matchesSearch =
      announcement.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      announcement.content.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesType = typeFilter === "all" || announcement.type === typeFilter
    const matchesAudience = audienceFilter === "all" || announcement.audience === audienceFilter
    const matchesStatus = statusFilter === "all" || announcement.status === statusFilter

return matchesSearch && matchesType && matchesAudience && matchesStatus
  })

const getTypeColor = (type: Announcement["type"]) => {
    switch (type) {
      case "urgent":
        return "bg-red-100 text-red-800"
      case "maintenance":
        return "bg-yellow-100 text-yellow-800"
      case "feature":
        return "bg-blue-100 text-blue-800"
      case "general":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusColor = (status: Announcement["status"]) => {
    switch (status) {
      case "published":
        return "bg-green-100 text-green-800"
      case "scheduled":
        return "bg-blue-100 text-blue-800"
      case "draft":
        return "bg-yellow-100 text-yellow-800"
      case "archived":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const handleSelectAnnouncement = (announcementId: string) => {
    setSelectedAnnouncements((prev) =>
      prev.includes(announcementId) ? prev.filter((id) => id !== announcementId) : [...prev, announcementId],
    )
  }

const handleSelectAll = () => {
    setSelectedAnnouncements(
      selectedAnnouncements.length === filteredAnnouncements.length
        ? []
        : filteredAnnouncements.map((announcement) => announcement.id),
    )
  }

const handleDeleteAnnouncement = (announcementId: string) => {
    setAnnouncements((prev) => prev.filter((announcement) => announcement.id !== announcementId))
    toast({
      title: "Announcement deleted",
      description: "Announcement has been successfully removed",
    })
  }

const handleCreateAnnouncement = (e: React.FormEvent) => {
    e.preventDefault()

if (!newAnnouncement.title || !newAnnouncement.content) {
      toast({
        title: "Missing information",
        description: "Please fill in title and content",
        variant: "destructive",
      })
      return
    }

const announcement: Announcement = {
      id: Math.random().toString(36).substr(2, 9),
      ...newAnnouncement,
      status: newAnnouncement.publishDate ? "scheduled" : "draft",
      publishDate: newAnnouncement.publishDate || new Date().toISOString().split("T")[0],
      author: "Admin Team",
      views: 0,
    }

setAnnouncements((prev) => [announcement, ...prev])
    setNewAnnouncement({
      title: "",
      content: "",
      type: "general",
      audience: "all",
      publishDate: "",
    })
    setShowCreateForm(false)

toast({
      title: "Announcement created",
      description: "Your announcement has been created successfully",
    })
  }

const handleBulkAction = (action: string) => {
    if (selectedAnnouncements.length === 0) {
      toast({
        title: "No announcements selected",
        description: "Please select announcements to perform bulk actions",
        variant: "destructive",
      })
      return
    }

switch (action) {
      case "publish":
        setAnnouncements((prev) =>
          prev.map((announcement) =>
            selectedAnnouncements.includes(announcement.id)
              ? { ...announcement, status: "published" as const }
              : announcement,
          ),
        )
        toast({
          title: "Announcements published",
          description: `${selectedAnnouncements.length} announcement(s) have been published`,
        })
        break
      case "archive":
        setAnnouncements((prev) =>
          prev.map((announcement) =>
            selectedAnnouncements.includes(announcement.id)
              ? { ...announcement, status: "archived" as const }
              : announcement,
          ),
        )
        toast({
          title: "Announcements archived",
          description: `${selectedAnnouncements.length} announcement(s) have been archived`,
        })
        break
      case "delete":
        setAnnouncements((prev) => prev.filter((announcement) => !selectedAnnouncements.includes(announcement.id)))
        toast({
          title: "Announcements deleted",
          description: `${selectedAnnouncements.length} announcement(s) have been deleted`,
        })
        break
    }
    setSelectedAnnouncements([])
  }

const stats = [
    { title: "Total Announcements", value: announcements.length, color: "text-qnekt-black" },
    {
      title: "Published",
      value: announcements.filter((a) => a.status === "published").length,
      color: "text-qnekt-green",
    },
    { title: "Scheduled", value: announcements.filter((a) => a.status === "scheduled").length, color: "text-blue-600" },
    { title: "Total Views", value: announcements.reduce((sum, a) => sum + a.views, 0), color: "text-qnekt-red" },
  ]

return (
    <div className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="flex items-center gap-4 mb-8">
        <Button variant="outline" onClick={() => router.push("/admin")} className="flex items-center gap-2">
          <ArrowLeft className="h-4 w-4" />
          Back to Dashboard
        </Button>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-qnekt-black">Announcements</h1>
          <p className="text-gray-600">Manage platform announcements and notifications</p>
        </div>
        <Button className="bg-qnekt-green hover:bg-qnekt-green/90" onClick={() => setShowCreateForm(true)}>
          <Plus className="h-4 w-4 mr-2" />
          Create Announcement
        </Button>
      </div>

{/* Create Announcement Form */}
      {showCreateForm && (
        <Card className="mb-6 border-qnekt-green">
          <CardHeader>
            <CardTitle>Create New Announcement</CardTitle>
            <CardDescription>Send updates and notifications to your users</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleCreateAnnouncement} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm font-medium">Title *</label>
                  <Input
                    value={newAnnouncement.title}
                    onChange={(e) => setNewAnnouncement((prev) => ({ ...prev, title: e.target.value }))}
                    placeholder="Enter announcement title"
                    required
                  />
                </div>
                <div>
                  <label className="text-sm font-medium">Type</label>
                  <Select
                    value={newAnnouncement.type}
                    onValueChange={(value: Announcement["type"]) =>
                      setNewAnnouncement((prev) => ({ ...prev, type: value }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="general">General</SelectItem>
                      <SelectItem value="urgent">Urgent</SelectItem>
                      <SelectItem value="maintenance">Maintenance</SelectItem>
                      <SelectItem value="feature">Feature</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm font-medium">Audience</label>
                  <Select
                    value={newAnnouncement.audience}
                    onValueChange={(value: Announcement["audience"]) =>
                      setNewAnnouncement((prev) => ({ ...prev, audience: value }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Users</SelectItem>
                      <SelectItem value="students">Students Only</SelectItem>
                      <SelectItem value="educators">Educators Only</SelectItem>
                      <SelectItem value="admins">Admins Only</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <label className="text-sm font-medium">Schedule (Optional)</label>
                  <Input
                    type="datetime-local"
                    value={newAnnouncement.publishDate}
                    onChange={(e) => setNewAnnouncement((prev) => ({ ...prev, publishDate: e.target.value }))}
                  />
                </div>
              </div>

<div>
                <label className="text-sm font-medium">Content *</label>
                <Textarea
                  value={newAnnouncement.content}
                  onChange={(e) => setNewAnnouncement((prev) => ({ ...prev, content: e.target.value }))}
                  placeholder="Enter announcement content"
                  rows={4}
                  required
                />
              </div>

<div className="flex gap-2">
                <Button type="submit" className="bg-qnekt-green hover:bg-qnekt-green/90">
                  <Send className="h-4 w-4 mr-2" />
                  Create Announcement
                </Button>
                <Button type="button" variant="outline" onClick={() => setShowCreateForm(false)}>
                  Cancel
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

{/* Filters and Search */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="h-5 w-5 text-qnekt-green" />
            Search & Filter
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search announcements..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <Select value={typeFilter} onValueChange={setTypeFilter}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Filter by type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Types</SelectItem>
                <SelectItem value="general">General</SelectItem>
                <SelectItem value="urgent">Urgent</SelectItem>
                <SelectItem value="maintenance">Maintenance</SelectItem>
                <SelectItem value="feature">Feature</SelectItem>
              </SelectContent>
            </Select>
            <Select value={audienceFilter} onValueChange={setAudienceFilter}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Filter by audience" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Audiences</SelectItem>
                <SelectItem value="students">Students</SelectItem>
                <SelectItem value="educators">Educators</SelectItem>
                <SelectItem value="admins">Admins</SelectItem>
              </SelectContent>
            </Select>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="published">Published</SelectItem>
                <SelectItem value="scheduled">Scheduled</SelectItem>
                <SelectItem value="draft">Draft</SelectItem>
                <SelectItem value="archived">Archived</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Bulk Actions */}
      {selectedAnnouncements.length > 0 && (
        <Card className="mb-6 border-qnekt-green">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">{selectedAnnouncements.length} announcement(s) selected</span>
              <div className="flex gap-2">
                <Button variant="outline" size="sm" onClick={() => handleBulkAction("publish")}>
                  Publish
                </Button>
                <Button variant="outline" size="sm" onClick={() => handleBulkAction("archive")}>
                  Archive
                </Button>
                <Button variant="destructive" size="sm" onClick={() => handleBulkAction("delete")}>
                  Delete
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Announcements List */}
      <Card className="gradient-border-newsletter">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <MessageSquare className="h-5 w-5 text-qnekt-green" />
                Announcements ({filteredAnnouncements.length})
              </CardTitle>
              <CardDescription>Manage all platform announcements</CardDescription>
            </div>
            <div className="flex items-center gap-2">
              <Checkbox
                checked={
                  selectedAnnouncements.length === filteredAnnouncements.length && filteredAnnouncements.length > 0
                }
                onCheckedChange={handleSelectAll}
              />
              <span className="text-sm text-gray-600">Select All</span>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {filteredAnnouncements.map((announcement) => (
              <Card key={announcement.id} className="hover:shadow-lg transition-shadow">
                <CardContent className="p-4">
                  <div className="flex items-start gap-4">
                    <Checkbox
                      checked={selectedAnnouncements.includes(announcement.id)}
                      onCheckedChange={() => handleSelectAnnouncement(announcement.id)}
                      className="mt-1"
                    />

<div className="flex-1">
                      <div className="flex items-start justify-between mb-2">
                        <div>
                          <h3 className="font-semibold text-qnekt-black">{announcement.title}</h3>
                          <p className="text-sm text-gray-600 mt-1">{announcement.content}</p>
                        </div>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="sm">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem>
                              <Eye className="h-4 w-4 mr-2" />
                              View
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Edit className="h-4 w-4 mr-2" />
                              Edit
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Send className="h-4 w-4 mr-2" />
                              Send Now
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              className="text-red-600"
                              onClick={() => handleDeleteAnnouncement(announcement.id)}
                            >
                              <Trash2 className="h-4 w-4 mr-2" />
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>

<div className="flex items-center gap-4 text-sm text-gray-500">
                        <div className="flex items-center gap-2">
                          <Badge variant="secondary" className={getTypeColor(announcement.type)}>
                            {announcement.type}
                          </Badge>
                          <Badge variant="secondary" className={getStatusColor(announcement.status)}>
                            {announcement.status}
                          </Badge>
                        </div>

<div className="flex items-center gap-4">
                          <span className="flex items-center gap-1">
                            <Users className="h-3 w-3" />
                            {announcement.audience}
                          </span>
                          <span className="flex items-center gap-1">
                            <Eye className="h-3 w-3" />
                            {announcement.views} views
                          </span>
                          <span className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            {new Date(announcement.publishDate).toLocaleDateString()}
                          </span>
                          <span>by {announcement.author}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/educator-guide/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import {
  GraduationCap,
  CheckCircle,
  Circle,
  Play,
  FileText,
  Download,
  ArrowLeft,
  BookOpen,
  Video,
  Settings,
} from "lucide-react"
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"

interface GuideStep {
  id: string
  title: string
  description: string
  type: "video" | "article" | "interactive" | "quiz"
  duration: string
  completed: boolean
  resources: string[]
}

interface GuideSection {
  id: string
  title: string
  description: string
  steps: GuideStep[]
}

const mockGuideData: GuideSection[] = [
  {
    id: "getting-started",
    title: "Getting Started",
    description: "Learn the basics of the Qnekt platform and how to navigate the admin interface",
    steps: [
      {
        id: "platform-overview",
        title: "Platform Overview",
        description: "Understanding Qnekt's mission and educational approach",
        type: "video",
        duration: "10 min",
        completed: true,
        resources: ["Platform Guide PDF", "Quick Reference Card"],
      },
      {
        id: "admin-dashboard",
        title: "Admin Dashboard Tour",
        description: "Navigate through the admin interface and key features",
        type: "interactive",
        duration: "15 min",
        completed: true,
        resources: ["Dashboard Guide", "Feature Checklist"],
      },
      {
        id: "user-management",
        title: "User Management Basics",
        description: "Learn how to manage students and educators",
        type: "video",
        duration: "12 min",
        completed: false,
        resources: ["User Management Guide", "Best Practices PDF"],
      },
    ],
  },
  {
    id: "content-creation",
    title: "Content Creation",
    description: "Master the art of creating engaging educational content with Islamic integration",
    steps: [
      {
        id: "content-guidelines",
        title: "Content Creation Guidelines",
        description: "Understanding Qnekt's content standards and Islamic integration principles",
        type: "article",
        duration: "20 min",
        completed: false,
        resources: ["Content Guidelines PDF", "Islamic Integration Examples"],
      },
      {
        id: "upload-materials",
        title: "Uploading Learning Materials",
        description: "Step-by-step guide to uploading videos, PDFs, and images",
        type: "video",
        duration: "18 min",
        completed: false,
        resources: ["Upload Tutorial", "File Format Guide"],
      },
      {
        id: "quiz-creation",
        title: "Creating Interactive Quizzes",
        description: "Build engaging quizzes that test understanding and reinforce learning",
        type: "interactive",
        duration: "25 min",
        completed: false,
        resources: ["Quiz Builder Guide", "Question Bank Templates"],
      },
    ],
  },
  {
    id: "islamic-integration",
    title: "Islamic Integration",
    description: "Learn how to seamlessly integrate Islamic teachings with modern science",
    steps: [
      {
        id: "quranic-connections",
        title: "Making Quranic Connections",
        description: "Techniques for connecting scientific concepts with Quranic verses",
        type: "video",
        duration: "30 min",
        completed: false,
        resources: ["Quranic Science Guide", "Verse Reference Database"],
      },
      {
        id: "islamic-scientists",
        title: "Highlighting Islamic Scientists",
        description: "Incorporating the contributions of Muslim scholars in your content",
        type: "article",
        duration: "15 min",
        completed: false,
        resources: ["Islamic Scientists Database", "Biography Templates"],
      },
      {
        id: "values-integration",
        title: "Values-Based Learning",
        description: "Embedding Islamic values and ethics in educational content",
        type: "interactive",
        duration: "22 min",
        completed: false,
        resources: ["Values Framework", "Case Study Examples"],
      },
    ],
  },
  {
    id: "advanced-features",
    title: "Advanced Features",
    description: "Explore advanced platform features and optimization techniques",
    steps: [
      {
        id: "analytics-insights",
        title: "Understanding Analytics",
        description: "Use platform analytics to improve content and engagement",
        type: "video",
        duration: "16 min",
        completed: false,
        resources: ["Analytics Guide", "Metrics Interpretation"],
      },
      {
        id: "community-building",
        title: "Building Learning Communities",
        description: "Foster engagement and collaboration among students",
        type: "article",
        duration: "14 min",
        completed: false,
        resources: ["Community Guidelines", "Engagement Strategies"],
      },
      {
        id: "platform-optimization",
        title: "Platform Optimization",
        description: "Advanced tips for maximizing platform effectiveness",
        type: "quiz",
        duration: "10 min",
        completed: false,
        resources: ["Optimization Checklist", "Best Practices Guide"],
      },
    ],
  },
]

export default function EducatorGuide() {
  const router = useRouter()
  const [selectedSection, setSelectedSection] = useState("getting-started")
  const [currentStep, setCurrentStep] = useState(0)

const currentSectionData = mockGuideData.find((section) => section.id === selectedSection)
  const totalSteps = mockGuideData.reduce((total, section) => total + section.steps.length, 0)
  const completedSteps = mockGuideData.reduce(
    (total, section) => total + section.steps.filter((step) => step.completed).length,
    0,
  )
  const progressPercentage = (completedSteps / totalSteps) * 100

const getStepIcon = (type: GuideStep["type"]) => {
    switch (type) {
      case "video":
        return Video
      case "article":
        return FileText
      case "interactive":
        return Settings
      case "quiz":
        return BookOpen
      default:
        return Circle
    }
  }

const getTypeColor = (type: GuideStep["type"]) => {
    switch (type) {
      case "video":
        return "bg-qnekt-red text-white"
      case "article":
        return "bg-qnekt-green text-white"
      case "interactive":
        return "bg-qnekt-black text-white"
      case "quiz":
        return "bg-blue-500 text-white"
      default:
        return "bg-gray-500 text-white"
    }
  }

const handleStepComplete = (sectionId: string, stepId: string) => {
    // In a real app, this would update the backend
    console.log(`Completing step ${stepId} in section ${sectionId}`)
  }

return (
    <div className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="flex items-center gap-4 mb-8">
        <Button variant="outline" onClick={() => router.push("/admin")} className="flex items-center gap-2">
          <ArrowLeft className="h-4 w-4" />
          Back to Dashboard
        </Button>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-qnekt-black">Educator Guide</h1>
          <p className="text-gray-600">Step-by-step training for platform mastery</p>
        </div>
      </div>

{/* Progress Overview */}
      <Card className="mb-8 gradient-border-newsletter">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <GraduationCap className="h-5 w-5 text-qnekt-green" />
            Training Progress
          </CardTitle>
          <CardDescription>Track your learning journey</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-4 mb-4">
            <div className="flex-1">
              <div className="flex justify-between text-sm mb-2">
                <span>Overall Progress</span>
                <span>
                  {completedSteps}/{totalSteps} steps completed
                </span>
              </div>
              <Progress value={progressPercentage} className="h-3" />
            </div>
            <div className="text-right">
              <p className="text-2xl font-bold text-qnekt-green">{Math.round(progressPercentage)}%</p>
              <p className="text-sm text-gray-600">Complete</p>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            {mockGuideData.map((section) => {
              const sectionCompleted = section.steps.filter((step) => step.completed).length
              const sectionTotal = section.steps.length
              const sectionProgress = (sectionCompleted / sectionTotal) * 100

return (
                <div key={section.id} className="text-center p-4 bg-gray-50 rounded-lg">
                  <h3 className="font-semibold text-qnekt-black text-sm mb-2">{section.title}</h3>
                  <Progress value={sectionProgress} className="h-2 mb-2" />
                  <p className="text-xs text-gray-600">
                    {sectionCompleted}/{sectionTotal} steps
                  </p>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {/* Section Navigation */}
        <div className="lg:col-span-1">
          <Card className="gradient-border-animated">
            <CardHeader>
              <CardTitle className="text-lg">Training Sections</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2">
              {mockGuideData.map((section) => {
                const sectionCompleted = section.steps.filter((step) => step.completed).length
                const sectionTotal = section.steps.length
                const isActive = selectedSection === section.id

return (
                  <Button
                    key={section.id}
                    variant={isActive ? "default" : "outline"}
                    className={`w-full justify-start h-auto p-3 ${
                      isActive ? "bg-qnekt-green hover:bg-qnekt-green/90" : "bg-transparent"
                    }`}
                    onClick={() => setSelectedSection(section.id)}
                  >
                    <div className="text-left w-full">
                      <div className="flex items-center justify-between mb-1">
                        <span className="font-medium text-sm">{section.title}</span>
                        {sectionCompleted === sectionTotal && <CheckCircle className="h-4 w-4 text-green-500" />}
                      </div>
                      <p className="text-xs opacity-75">
                        {sectionCompleted}/{sectionTotal} completed
                      </p>
                    </div>
                  </Button>
                )
              })}
            </CardContent>
          </Card>
        </div>

{/* Main Content */}
        <div className="lg:col-span-3">
          {currentSectionData && (
            <Card className="gradient-border-newsletter">
              <CardHeader>
                <CardTitle>{currentSectionData.title}</CardTitle>
                <CardDescription>{currentSectionData.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  {currentSectionData.steps.map((step, index) => {
                    const StepIcon = getStepIcon(step.type)

return (
                      <Card
                        key={step.id}
                        className={`transition-all ${step.completed ? "bg-green-50 border-green-200" : "hover:shadow-md"}`}
                      >
                        <CardContent className="p-6">
                          <div className="flex items-start gap-4">
                            <div className="flex-shrink-0">
                              {step.completed ? (
                                <CheckCircle className="h-6 w-6 text-green-500" />
                              ) : (
                                <Circle className="h-6 w-6 text-gray-400" />
                              )}
                            </div>

<div className="flex-1">
                              <div className="flex items-start justify-between mb-2">
                                <div>
                                  <h3 className="font-semibold text-qnekt-black">{step.title}</h3>
                                  <p className="text-gray-600 text-sm mt-1">{step.description}</p>
                                </div>
                                <div className="flex items-center gap-2">
                                  <Badge className={getTypeColor(step.type)}>
                                    <StepIcon className="h-3 w-3 mr-1" />
                                    {step.type}
                                  </Badge>
                                  <Badge variant="outline">{step.duration}</Badge>
                                </div>
                              </div>

{step.resources.length > 0 && (
                                <div className="mb-4">
                                  <p className="text-sm font-medium text-gray-700 mb-2">Resources:</p>
                                  <div className="flex flex-wrap gap-2">
                                    {step.resources.map((resource, idx) => (
                                      <Button
                                        key={idx}
                                        variant="outline"
                                        size="sm"
                                        className="h-7 text-xs bg-transparent"
                                      >
                                        <Download className="h-3 w-3 mr-1" />
                                        {resource}
                                      </Button>
                                    ))}
                                  </div>
                                </div>
                              )}

<div className="flex gap-2">
                                {!step.completed ? (
                                  <Button
                                    className="bg-qnekt-green hover:bg-qnekt-green/90"
                                    onClick={() => handleStepComplete(currentSectionData.id, step.id)}
                                  >
                                    <Play className="h-4 w-4 mr-2" />
                                    Start Step
                                  </Button>
                                ) : (
                                  <Button variant="outline">
                                    <CheckCircle className="h-4 w-4 mr-2 text-green-500" />
                                    Completed
                                  </Button>
                                )}
                                <Button variant="outline">
                                  <FileText className="h-4 w-4 mr-2" />
                                  View Details
                                </Button>
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    )
                  })}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>

{/* Quick Actions */}
      <Card className="mt-8">
        <CardHeader>
          <CardTitle>Quick Actions</CardTitle>
          <CardDescription>Common tasks and helpful resources</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Button
              variant="outline"
              className="h-auto p-4 justify-start bg-transparent"
              onClick={() => router.push("/admin/content-upload")}
            >
              <div className="text-left">
                <h3 className="font-semibold">Upload Content</h3>
                <p className="text-sm text-gray-600">Add new learning materials</p>
              </div>
            </Button>
            <Button
              variant="outline"
              className="h-auto p-4 justify-start bg-transparent"
              onClick={() => router.push("/admin/materials")}
            >
              <div className="text-left">
                <h3 className="font-semibold">Manage Materials</h3>
                <p className="text-sm text-gray-600">Organize your content library</p>
              </div>
            </Button>
            <Button
              variant="outline"
              className="h-auto p-4 justify-start bg-transparent"
              onClick={() => router.push("/admin/users")}
            >
              <div className="text-left">
                <h3 className="font-semibold">User Management</h3>
                <p className="text-sm text-gray-600">Manage students and educators</p>
              </div>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/materials/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import {
  BookOpen,
  Search,
  Filter,
  MoreHorizontal,
  Plus,
  Video,
  FileText,
  ImageIcon,
  ArrowLeft,
  Eye,
  Edit,
  Trash2,
  Download,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/components/ui/use-toast"

interface Material {
  id: string
  title: string
  type: "video" | "pdf" | "image" | "quiz"
  subject: string
  topic: string
  uploadDate: string
  size: string
  views: number
  status: "published" | "draft" | "archived"
  author: string
}

const mockMaterials: Material[] = [
  {
    id: "1",
    title: "Human Anatomy Overview",
    type: "video",
    subject: "Biology",
    topic: "Human Anatomy",
    uploadDate: "2024-01-15",
    size: "45.2 MB",
    views: 234,
    status: "published",
    author: "Dr. Omar Hassan",
  },
  {
    id: "2",
    title: "Periodic Table Guide",
    type: "pdf",
    subject: "Chemistry",
    topic: "Periodic Table",
    uploadDate: "2024-01-14",
    size: "2.1 MB",
    views: 156,
    status: "published",
    author: "Prof. Yusuf Ali",
  },
  {
    id: "3",
    title: "Cell Structure Diagram",
    type: "image",
    subject: "Biology",
    topic: "Cell Biology",
    uploadDate: "2024-01-13",
    size: "1.8 MB",
    views: 89,
    status: "draft",
    author: "Dr. Omar Hassan",
  },
  {
    id: "4",
    title: "Physics Motion Quiz",
    type: "quiz",
    subject: "Physics",
    topic: "Motion",
    uploadDate: "2024-01-12",
    size: "0.5 MB",
    views: 67,
    status: "published",
    author: "Prof. Yusuf Ali",
  },
  {
    id: "5",
    title: "Geography Climate Video",
    type: "video",
    subject: "Geography",
    topic: "Climate",
    uploadDate: "2024-01-11",
    size: "78.9 MB",
    views: 123,
    status: "archived",
    author: "Dr. Omar Hassan",
  },
]

export default function MaterialsManagement() {
  const router = useRouter()
  const { toast } = useToast()
  const [materials, setMaterials] = useState<Material[]>(mockMaterials)
  const [searchTerm, setSearchTerm] = useState("")
  const [typeFilter, setTypeFilter] = useState("all")
  const [subjectFilter, setSubjectFilter] = useState("all")
  const [statusFilter, setStatusFilter] = useState("all")
  const [selectedMaterials, setSelectedMaterials] = useState<string[]>([])

const filteredMaterials = materials.filter((material) => {
    const matchesSearch =
      material.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      material.topic.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesType = typeFilter === "all" || material.type === typeFilter
    const matchesSubject = subjectFilter === "all" || material.subject === subjectFilter
    const matchesStatus = statusFilter === "all" || material.status === statusFilter
    return matchesSearch && matchesType && matchesSubject && matchesStatus
  })

const getTypeIcon = (type: Material["type"]) => {
    switch (type) {
      case "video":
        return Video
      case "pdf":
        return FileText
      case "image":
        return ImageIcon
      case "quiz":
        return BookOpen
      default:
        return FileText
    }
  }

const getTypeColor = (type: Material["type"]) => {
    switch (type) {
      case "video":
        return "bg-qnekt-red text-white"
      case "pdf":
        return "bg-qnekt-green text-white"
      case "image":
        return "bg-qnekt-black text-white"
      case "quiz":
        return "bg-blue-500 text-white"
      default:
        return "bg-gray-500 text-white"
    }
  }

const getStatusColor = (status: Material["status"]) => {
    switch (status) {
      case "published":
        return "bg-green-100 text-green-800"
      case "draft":
        return "bg-yellow-100 text-yellow-800"
      case "archived":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const handleSelectMaterial = (materialId: string) => {
    setSelectedMaterials((prev) =>
      prev.includes(materialId) ? prev.filter((id) => id !== materialId) : [...prev, materialId],
    )
  }

const handleSelectAll = () => {
    setSelectedMaterials(
      selectedMaterials.length === filteredMaterials.length ? [] : filteredMaterials.map((material) => material.id),
    )
  }

const handleDeleteMaterial = (materialId: string) => {
    setMaterials((prev) => prev.filter((material) => material.id !== materialId))
    setSelectedMaterials((prev) => prev.filter((id) => id !== materialId))
    toast({
      title: "Material deleted",
      description: "Material has been successfully removed",
    })
  }

const handleBulkAction = (action: string) => {
    if (selectedMaterials.length === 0) {
      toast({
        title: "No materials selected",
        description: "Please select materials to perform bulk actions",
        variant: "destructive",
      })
      return
    }

switch (action) {
      case "publish":
        setMaterials((prev) =>
          prev.map((material) =>
            selectedMaterials.includes(material.id) ? { ...material, status: "published" as const } : material,
          ),
        )
        toast({
          title: "Materials published",
          description: `${selectedMaterials.length} material(s) have been published`,
        })
        break
      case "archive":
        setMaterials((prev) =>
          prev.map((material) =>
            selectedMaterials.includes(material.id) ? { ...material, status: "archived" as const } : material,
          ),
        )
        toast({
          title: "Materials archived",
          description: `${selectedMaterials.length} material(s) have been archived`,
        })
        break
      case "delete":
        setMaterials((prev) => prev.filter((material) => !selectedMaterials.includes(material.id)))
        toast({
          title: "Materials deleted",
          description: `${selectedMaterials.length} material(s) have been deleted`,
        })
        break
    }
    setSelectedMaterials([])
  }

const handleMaterialAction = (action: string, materialId: string, materialTitle: string) => {
    switch (action) {
      case "view":
        toast({ title: "Opening material", description: `Viewing "${materialTitle}"` })
        break
      case "edit":
        router.push(`/admin/materials/edit/${materialId}`)
        break
      case "download":
        toast({ title: "Download started", description: `Downloading "${materialTitle}"` })
        break
      case "delete":
        handleDeleteMaterial(materialId)
        break
    }
  }

const stats = [
    { title: "Total Materials", value: materials.length, color: "text-qnekt-black" },
    { title: "Published", value: materials.filter((m) => m.status === "published").length, color: "text-qnekt-green" },
    { title: "Videos", value: materials.filter((m) => m.type === "video").length, color: "text-qnekt-red" },
    { title: "Total Views", value: materials.reduce((sum, m) => sum + m.views, 0), color: "text-blue-600" },
  ]

return (
    <div className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="flex items-center gap-4 mb-8">
        <Button variant="outline" onClick={() => router.push("/admin")} className="flex items-center gap-2">
          <ArrowLeft className="h-4 w-4" />
          Back to Dashboard
        </Button>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-qnekt-black">Course Materials</h1>
          <p className="text-gray-600">Manage learning content and resources</p>
        </div>
        <Button className="bg-qnekt-green hover:bg-qnekt-green/90" onClick={() => router.push("/admin/content-upload")}>
          <Plus className="h-4 w-4 mr-2" />
          Add Material
        </Button>
      </div>

{/* Filters and Search */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="h-5 w-5 text-qnekt-green" />
            Search & Filter
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search materials by title or topic..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <Select value={typeFilter} onValueChange={(value) => setTypeFilter(value)}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Filter by type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Types</SelectItem>
                <SelectItem value="video">Videos</SelectItem>
                <SelectItem value="pdf">PDFs</SelectItem>
                <SelectItem value="image">Images</SelectItem>
                <SelectItem value="quiz">Quizzes</SelectItem>
              </SelectContent>
            </Select>
            <Select value={subjectFilter} onValueChange={(value) => setSubjectFilter(value)}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Filter by subject" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Subjects</SelectItem>
                <SelectItem value="Biology">Biology</SelectItem>
                <SelectItem value="Chemistry">Chemistry</SelectItem>
                <SelectItem value="Physics">Physics</SelectItem>
                <SelectItem value="Geography">Geography</SelectItem>
              </SelectContent>
            </Select>
            <Select value={statusFilter} onValueChange={(value) => setStatusFilter(value)}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="published">Published</SelectItem>
                <SelectItem value="draft">Draft</SelectItem>
                <SelectItem value="archived">Archived</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Bulk Actions */}
      {selectedMaterials.length > 0 && (
        <Card className="mb-6 border-qnekt-green">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">{selectedMaterials.length} material(s) selected</span>
              <div className="flex gap-2">
                <Button variant="outline" size="sm" onClick={() => handleBulkAction("publish")}>
                  Publish
                </Button>
                <Button variant="outline" size="sm" onClick={() => handleBulkAction("archive")}>
                  Archive
                </Button>
                <Button variant="destructive" size="sm" onClick={() => handleBulkAction("delete")}>
                  Delete
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Materials Grid */}
      <Card className="gradient-border-newsletter">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <BookOpen className="h-5 w-5 text-qnekt-green" />
                Materials ({filteredMaterials.length})
              </CardTitle>
              <CardDescription>Manage all learning materials</CardDescription>
            </div>
            <div className="flex items-center gap-2">
              <Checkbox
                checked={selectedMaterials.length === filteredMaterials.length && filteredMaterials.length > 0}
                onCheckedChange={handleSelectAll}
              />
              <span className="text-sm text-gray-600">Select All</span>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredMaterials.map((material) => {
              const TypeIcon = getTypeIcon(material.type)
              return (
                <Card key={material.id} className="hover:shadow-lg transition-shadow">
                  <CardContent className="p-4">
                    <div className="flex items-start justify-between mb-3">
                      <Checkbox
                        checked={selectedMaterials.includes(material.id)}
                        onCheckedChange={() => handleSelectMaterial(material.id)}
                      />
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="sm">
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem onClick={() => handleMaterialAction("view", material.id, material.title)}>
                            <Eye className="h-4 w-4 mr-2" />
                            View
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleMaterialAction("edit", material.id, material.title)}>
                            <Edit className="h-4 w-4 mr-2" />
                            Edit
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={() => handleMaterialAction("download", material.id, material.title)}
                          >
                            <Download className="h-4 w-4 mr-2" />
                            Download
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            className="text-red-600"
                            onClick={() => handleMaterialAction("delete", material.id, material.title)}
                          >
                            <Trash2 className="h-4 w-4 mr-2" />
                            Delete
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>

<div className="flex items-center gap-3 mb-3">
                      <div className={`p-2 rounded-lg ${getTypeColor(material.type)}`}>
                        <TypeIcon className="h-4 w-4" />
                      </div>
                      <div className="flex-1">
                        <h3 className="font-semibold text-qnekt-black text-sm">{material.title}</h3>
                        <p className="text-xs text-gray-500">
                          {material.subject} • {material.topic}
                        </p>
                      </div>
                    </div>

<div className="flex items-center justify-between mb-3">
                      <Badge variant="secondary" className={getStatusColor(material.status)}>
                        {material.status}
                      </Badge>
                      <span className="text-xs text-gray-500">{material.views} views</span>
                    </div>

<div className="text-xs text-gray-500 space-y-1">
                      <p>Size: {material.size}</p>
                      <p>Author: {material.author}</p>
                      <p>Uploaded: {new Date(material.uploadDate).toLocaleDateString()}</p>
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>

{filteredMaterials.length === 0 && (
            <div className="text-center py-8">
              <p className="text-gray-500">No materials found matching your criteria.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Save, ArrowLeft, Globe, Shield, Bell, Palette, Database, BookOpen, Eye, EyeOff } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/components/ui/use-toast"

export default function PlatformSettings() {
  const router = useRouter()
  const { toast } = useToast()
  const [showApiKey, setShowApiKey] = useState(false)

// General Settings State
  const [siteName, setSiteName] = useState("Qnekt")
  const [siteDescription, setSiteDescription] = useState("Bridging Scientific Discovery with Quranic Wisdom")
  const [contactEmail, setContactEmail] = useState("admin@qnekt.edu")
  const [supportEmail, setSupportEmail] = useState("support@qnekt.edu")
  const [timezone, setTimezone] = useState("UTC")
  const [language, setLanguage] = useState("en")
  const [maintenanceMode, setMaintenanceMode] = useState(false)

// Security Settings State
  const [requireEmailVerification, setRequireEmailVerification] = useState(true)
  const [enableTwoFactor, setEnableTwoFactor] = useState(false)
  const [passwordMinLength, setPasswordMinLength] = useState("8")
  const [sessionTimeout, setSessionTimeout] = useState("30")
  const [maxLoginAttempts, setMaxLoginAttempts] = useState("5")
  const [apiKey, setApiKey] = useState("qnekt_sk_1234567890abcdef")
  const [enableApiAccess, setEnableApiAccess] = useState(true)

// Notification Settings State
  const [emailNotifications, setEmailNotifications] = useState(true)
  const [newUserRegistration, setNewUserRegistration] = useState(true)
  const [contentUploaded, setContentUploaded] = useState(true)
  const [systemAlerts, setSystemAlerts] = useState(true)
  const [weeklyReports, setWeeklyReports] = useState(false)
  const [marketingEmails, setMarketingEmails] = useState(false)

// Appearance Settings State
  const [primaryColor, setPrimaryColor] = useState("#22c55e")
  const [secondaryColor, setSecondaryColor] = useState("#ef4444")
  const [accentColor, setAccentColor] = useState("#000000")
  const [logoUrl, setLogoUrl] = useState("/qnekt-logo.png")
  const [faviconUrl, setFaviconUrl] = useState("/favicon.ico")
  const [customCSS, setCustomCSS] = useState("")
  const [darkModeEnabled, setDarkModeEnabled] = useState(true)

// Content Settings State
  const [autoApproveContent, setAutoApproveContent] = useState(false)
  const [requireModeration, setRequireModeration] = useState(true)
  const [maxFileSize, setMaxFileSize] = useState("100")
  const [allowedFileTypes, setAllowedFileTypes] = useState("mp4,pdf,jpg,png,gif")
  const [defaultContentLanguage, setDefaultContentLanguage] = useState("en")
  const [enableComments, setEnableComments] = useState(true)
  const [enableRatings, setEnableRatings] = useState(true)

// Integration Settings State
  const [googleAnalyticsId, setGoogleAnalyticsId] = useState("")
  const [facebookPixelId, setFacebookPixelId] = useState("")
  const [emailProvider, setEmailProvider] = useState("smtp")
  const [smtpHost, setSmtpHost] = useState("smtp.gmail.com")
  const [smtpPort, setSmtpPort] = useState("587")
  const [smtpUsername, setSmtpUsername] = useState("")
  const [smtpPassword, setSmtpPassword] = useState("")
  const [cloudStorageProvider, setCloudStorageProvider] = useState("local")
  const [awsAccessKey, setAwsAccessKey] = useState("")
  const [awsSecretKey, setAwsSecretKey] = useState("")
  const [awsBucket, setAwsBucket] = useState("")

const handleSaveSettings = (settingsType: string) => {
    toast({
      title: "Settings saved",
      description: `${settingsType} settings have been updated successfully`,
    })
  }

const generateNewApiKey = () => {
    const newKey = `qnekt_sk_${Math.random().toString(36).substr(2, 20)}`
    setApiKey(newKey)
    toast({
      title: "API Key regenerated",
      description: "A new API key has been generated",
    })
  }

return (
    <div className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="flex items-center gap-4 mb-8">
        <Button variant="outline" onClick={() => router.push("/admin")} className="flex items-center gap-2">
          <ArrowLeft className="h-4 w-4" />
          Back to Dashboard
        </Button>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-qnekt-black">Platform Settings</h1>
          <p className="text-gray-600">Configure your Qnekt platform</p>
        </div>
      </div>

<Tabs defaultValue="general" className="space-y-6">
        <TabsList className="grid w-full grid-cols-6">
          <TabsTrigger value="general" className="flex items-center gap-2">
            <Globe className="h-4 w-4" />
            General
          </TabsTrigger>
          <TabsTrigger value="security" className="flex items-center gap-2">
            <Shield className="h-4 w-4" />
            Security
          </TabsTrigger>
          <TabsTrigger value="notifications" className="flex items-center gap-2">
            <Bell className="h-4 w-4" />
            Notifications
          </TabsTrigger>
          <TabsTrigger value="appearance" className="flex items-center gap-2">
            <Palette className="h-4 w-4" />
            Appearance
          </TabsTrigger>
          <TabsTrigger value="content" className="flex items-center gap-2">
            <BookOpen className="h-4 w-4" />
            Content
          </TabsTrigger>
          <TabsTrigger value="integrations" className="flex items-center gap-2">
            <Database className="h-4 w-4" />
            Integrations
          </TabsTrigger>
        </TabsList>

{/* General Settings */}
        <TabsContent value="general">
          <Card className="gradient-border-newsletter">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Globe className="h-5 w-5 text-qnekt-green" />
                General Settings
              </CardTitle>
              <CardDescription>Basic platform configuration</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="site-name">Site Name</Label>
                  <Input id="site-name" type="text" value={siteName} onChange={(e) => setSiteName(e.target.value)} />
                </div>
                <div>
                  <Label htmlFor="contact-email">Contact Email</Label>
                  <Input
                    id="contact-email"
                    type="email"
                    value={contactEmail}
                    onChange={(e) => setContactEmail(e.target.value)}
                  />
                </div>
              </div>

<div>
                <Label htmlFor="site-description">Site Description</Label>
                <Textarea
                  id="site-description"
                  value={siteDescription}
                  onChange={(e) => setSiteDescription(e.target.value)}
                  rows={3}
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                  <Label htmlFor="timezone-select">Timezone</Label>
                  <Select value={timezone} onValueChange={(value) => setTimezone(value)}>
                    <SelectTrigger id="timezone-select">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="UTC">UTC</SelectItem>
                      <SelectItem value="EST">Eastern Time</SelectItem>
                      <SelectItem value="PST">Pacific Time</SelectItem>
                      <SelectItem value="GMT">Greenwich Mean Time</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="language-select">Default Language</Label>
                  <Select value={language} onValueChange={(value) => setLanguage(value)}>
                    <SelectTrigger id="language-select">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="en">English</SelectItem>
                      <SelectItem value="ar">Arabic</SelectItem>
                      <SelectItem value="ur">Urdu</SelectItem>
                      <SelectItem value="fr">French</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="support-email">Support Email</Label>
                  <Input
                    id="support-email"
                    type="email"
                    value={supportEmail}
                    onChange={(e) => setSupportEmail(e.target.value)}
                  />
                </div>
              </div>

<div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="maintenance-mode">Maintenance Mode</Label>
                  <p className="text-sm text-gray-600">Temporarily disable public access to the platform</p>
                </div>
                <Switch
                  id="maintenance-mode"
                  checked={maintenanceMode}
                  onCheckedChange={(checked) => setMaintenanceMode(checked)}
                />
              </div>

<Button onClick={() => handleSaveSettings("General")} className="bg-qnekt-green hover:bg-qnekt-green/90">
                <Save className="h-4 w-4 mr-2" />
                Save General Settings
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* Security Settings */}
        <TabsContent value="security">
          <Card className="gradient-border-newsletter">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Shield className="h-5 w-5 text-qnekt-red" />
                Security Settings
              </CardTitle>
              <CardDescription>Configure security and authentication options</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="password-min-length">Minimum Password Length</Label>
                  <Input
                    id="password-min-length"
                    type="number"
                    value={passwordMinLength}
                    onChange={(e) => setPasswordMinLength(e.target.value)}
                  />
                </div>
                <div>
                  <Label htmlFor="session-timeout">Session Timeout (minutes)</Label>
                  <Input
                    id="session-timeout"
                    type="number"
                    value={sessionTimeout}
                    onChange={(e) => setSessionTimeout(e.target.value)}
                  />
                </div>
              </div>

<div>
                <Label htmlFor="max-login-attempts">Maximum Login Attempts</Label>
                <Input
                  id="max-login-attempts"
                  type="number"
                  value={maxLoginAttempts}
                  onChange={(e) => setMaxLoginAttempts(e.target.value)}
                  className="w-full md:w-48"
                />
              </div>

<div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="require-email-verification">Require Email Verification</Label>
                    <p className="text-sm text-gray-600">Users must verify their email before accessing the platform</p>
                  </div>
                  <Switch
                    id="require-email-verification"
                    checked={requireEmailVerification}
                    onCheckedChange={(checked) => setRequireEmailVerification(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="enable-two-factor">Enable Two-Factor Authentication</Label>
                    <p className="text-sm text-gray-600">Require 2FA for admin accounts</p>
                  </div>
                  <Switch
                    id="enable-two-factor"
                    checked={enableTwoFactor}
                    onCheckedChange={(checked) => setEnableTwoFactor(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="enable-api-access">Enable API Access</Label>
                    <p className="text-sm text-gray-600">Allow external applications to access the platform API</p>
                  </div>
                  <Switch
                    id="enable-api-access"
                    checked={enableApiAccess}
                    onCheckedChange={(checked) => setEnableApiAccess(checked)}
                  />
                </div>
              </div>

<div>
                <Label htmlFor="api-key">API Key</Label>
                <div className="flex gap-2">
                  <Input
                    id="api-key"
                    type={showApiKey ? "text" : "password"}
                    value={apiKey}
                    onChange={(e) => setApiKey(e.target.value)}
                    className="flex-1"
                  />
                  <Button variant="outline" onClick={() => setShowApiKey(!showApiKey)}>
                    {showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                  <Button variant="outline" onClick={generateNewApiKey}>
                    Regenerate
                  </Button>
                </div>
              </div>

<Button onClick={() => handleSaveSettings("Security")} className="bg-qnekt-red hover:bg-qnekt-red/90">
                <Save className="h-4 w-4 mr-2" />
                Save Security Settings
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* Notification Settings */}
        <TabsContent value="notifications">
          <Card className="gradient-border-newsletter">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Bell className="h-5 w-5 text-qnekt-black" />
                Notification Settings
              </CardTitle>
              <CardDescription>Configure email notifications and alerts</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="email-notifications">Email Notifications</Label>
                    <p className="text-sm text-gray-600">Enable email notifications for platform events</p>
                  </div>
                  <Switch
                    id="email-notifications"
                    checked={emailNotifications}
                    onCheckedChange={(checked) => setEmailNotifications(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="new-user-registration">New User Registration</Label>
                    <p className="text-sm text-gray-600">Notify when new users register</p>
                  </div>
                  <Switch
                    id="new-user-registration"
                    checked={newUserRegistration}
                    onCheckedChange={(checked) => setNewUserRegistration(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="content-uploaded">Content Uploaded</Label>
                    <p className="text-sm text-gray-600">Notify when new content is uploaded</p>
                  </div>
                  <Switch
                    id="content-uploaded"
                    checked={contentUploaded}
                    onCheckedChange={(checked) => setContentUploaded(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="system-alerts">System Alerts</Label>
                    <p className="text-sm text-gray-600">Notify about system issues and maintenance</p>
                  </div>
                  <Switch
                    id="system-alerts"
                    checked={systemAlerts}
                    onCheckedChange={(checked) => setSystemAlerts(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="weekly-reports">Weekly Reports</Label>
                    <p className="text-sm text-gray-600">Send weekly platform usage reports</p>
                  </div>
                  <Switch
                    id="weekly-reports"
                    checked={weeklyReports}
                    onCheckedChange={(checked) => setWeeklyReports(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="marketing-emails">Marketing Emails</Label>
                    <p className="text-sm text-gray-600">Send promotional and marketing emails</p>
                  </div>
                  <Switch
                    id="marketing-emails"
                    checked={marketingEmails}
                    onCheckedChange={(checked) => setMarketingEmails(checked)}
                  />
                </div>
              </div>

<Button
                onClick={() => handleSaveSettings("Notification")}
                className="bg-qnekt-black hover:bg-qnekt-black/90"
              >
                <Save className="h-4 w-4 mr-2" />
                Save Notification Settings
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* Appearance Settings */}
        <TabsContent value="appearance">
          <Card className="gradient-border-newsletter">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Palette className="h-5 w-5 text-qnekt-green" />
                Appearance Settings
              </CardTitle>
              <CardDescription>Customize the look and feel of your platform</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                  <Label htmlFor="primary-color">Primary Color</Label>
                  <div className="flex gap-2">
                    <Input
                      id="primary-color"
                      type="color"
                      value={primaryColor}
                      onChange={(e) => setPrimaryColor(e.target.value)}
                      className="w-16 h-10"
                    />
                    <Input value={primaryColor} onChange={(e) => setPrimaryColor(e.target.value)} className="flex-1" />
                  </div>
                </div>
                <div>
                  <Label htmlFor="secondary-color">Secondary Color</Label>
                  <div className="flex gap-2">
                    <Input
                      id="secondary-color"
                      type="color"
                      value={secondaryColor}
                      onChange={(e) => setSecondaryColor(e.target.value)}
                      className="w-16 h-10"
                    />
                    <Input
                      value={secondaryColor}
                      onChange={(e) => setSecondaryColor(e.target.value)}
                      className="flex-1"
                    />
                  </div>
                </div>
                <div>
                  <Label htmlFor="accent-color">Accent Color</Label>
                  <div className="flex gap-2">
                    <Input
                      id="accent-color"
                      type="color"
                      value={accentColor}
                      onChange={(e) => setAccentColor(e.target.value)}
                      className="w-16 h-10"
                    />
                    <Input value={accentColor} onChange={(e) => setAccentColor(e.target.value)} className="flex-1" />
                  </div>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="logo-url">Logo URL</Label>
                  <Input id="logo-url" type="text" value={logoUrl} onChange={(e) => setLogoUrl(e.target.value)} />
                </div>
                <div>
                  <Label htmlFor="favicon-url">Favicon URL</Label>
                  <Input
                    id="favicon-url"
                    type="text"
                    value={faviconUrl}
                    onChange={(e) => setFaviconUrl(e.target.value)}
                  />
                </div>
              </div>

<div>
                <Label htmlFor="custom-css">Custom CSS</Label>
                <Textarea
                  id="custom-css"
                  value={customCSS}
                  onChange={(e) => setCustomCSS(e.target.value)}
                  rows={6}
                  placeholder="/* Add your custom CSS here */"
                />
              </div>

<div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="dark-mode-enabled">Enable Dark Mode</Label>
                  <p className="text-sm text-gray-600">Allow users to switch to dark mode</p>
                </div>
                <Switch
                  id="dark-mode-enabled"
                  checked={darkModeEnabled}
                  onCheckedChange={(checked) => setDarkModeEnabled(checked)}
                />
              </div>

<Button
                onClick={() => handleSaveSettings("Appearance")}
                className="bg-qnekt-green hover:bg-qnekt-green/90"
              >
                <Save className="h-4 w-4 mr-2" />
                Save Appearance Settings
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* Content Settings */}
        <TabsContent value="content">
          <Card className="gradient-border-newsletter">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <BookOpen className="h-5 w-5 text-qnekt-red" />
                Content Settings
              </CardTitle>
              <CardDescription>Configure content management and moderation</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="max-file-size">Max File Size (MB)</Label>
                  <Input
                    id="max-file-size"
                    type="number"
                    value={maxFileSize}
                    onChange={(e) => setMaxFileSize(e.target.value)}
                  />
                </div>
                <div>
                  <Label htmlFor="default-content-language">Default Content Language</Label>
                  <Select value={defaultContentLanguage} onValueChange={(value) => setDefaultContentLanguage(value)}>
                    <SelectTrigger id="default-content-language">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="en">English</SelectItem>
                      <SelectItem value="ar">Arabic</SelectItem>
                      <SelectItem value="ur">Urdu</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div>
                <Label htmlFor="allowed-file-types">Allowed File Types</Label>
                <Input
                  id="allowed-file-types"
                  type="text"
                  value={allowedFileTypes}
                  onChange={(e) => setAllowedFileTypes(e.target.value)}
                  placeholder="mp4,pdf,jpg,png,gif"
                />
              </div>

<div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="auto-approve-content">Auto-approve Content</Label>
                    <p className="text-sm text-gray-600">Automatically publish uploaded content</p>
                  </div>
                  <Switch
                    id="auto-approve-content"
                    checked={autoApproveContent}
                    onCheckedChange={(checked) => setAutoApproveContent(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="require-moderation">Require Moderation</Label>
                    <p className="text-sm text-gray-600">All content must be reviewed before publishing</p>
                  </div>
                  <Switch
                    id="require-moderation"
                    checked={requireModeration}
                    onCheckedChange={(checked) => setRequireModeration(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="enable-comments">Enable Comments</Label>
                    <p className="text-sm text-gray-600">Allow users to comment on content</p>
                  </div>
                  <Switch
                    id="enable-comments"
                    checked={enableComments}
                    onCheckedChange={(checked) => setEnableComments(checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="enable-ratings">Enable Ratings</Label>
                    <p className="text-sm text-gray-600">Allow users to rate content</p>
                  </div>
                  <Switch
                    id="enable-ratings"
                    checked={enableRatings}
                    onCheckedChange={(checked) => setEnableRatings(checked)}
                  />
                </div>
              </div>

<Button onClick={() => handleSaveSettings("Content")} className="bg-qnekt-red hover:bg-qnekt-red/90">
                <Save className="h-4 w-4 mr-2" />
                Save Content Settings
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* Integration Settings */}
        <TabsContent value="integrations">
          <Card className="gradient-border-newsletter">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Database className="h-5 w-5 text-qnekt-black" />
                Integration Settings
              </CardTitle>
              <CardDescription>Configure third-party integrations and services</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold mb-4">Analytics</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="google-analytics-id">Google Analytics ID</Label>
                      <Input
                        id="google-analytics-id"
                        type="text"
                        value={googleAnalyticsId}
                        onChange={(e) => setGoogleAnalyticsId(e.target.value)}
                        placeholder="GA-XXXXXXXXX-X"
                      />
                    </div>
                    <div>
                      <Label htmlFor="facebook-pixel-id">Facebook Pixel ID</Label>
                      <Input
                        id="facebook-pixel-id"
                        type="text"
                        value={facebookPixelId}
                        onChange={(e) => setFacebookPixelId(e.target.value)}
                        placeholder="123456789012345"
                      />
                    </div>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-semibold mb-4">Email Configuration</h3>
                  <div className="space-y-4">
                    <div>
                      <Label htmlFor="email-provider">Email Provider</Label>
                      <Select value={emailProvider} onValueChange={setEmailProvider}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="smtp">SMTP</SelectItem>
                          <SelectItem value="sendgrid">SendGrid</SelectItem>
                          <SelectItem value="mailgun">Mailgun</SelectItem>
                          <SelectItem value="ses">Amazon SES</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

{emailProvider === "smtp" && (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="smtpHost">SMTP Host</Label>
                          <Input id="smtpHost" value={smtpHost} onChange={(e) => setSmtpHost(e.target.value)} />
                        </div>
                        <div>
                          <Label htmlFor="smtpPort">SMTP Port</Label>
                          <Input
                            id="smtpPort"
                            type="number"
                            value={smtpPort}
                            onChange={(e) => setSmtpPort(Number.parseInt(e.target.value))}
                          />
                        </div>
                        <div>
                          <Label htmlFor="smtpUsername">SMTP Username</Label>
                          <Input
                            id="smtpUsername"
                            value={smtpUsername}
                            onChange={(e) => setSmtpUsername(e.target.value)}
                          />
                        </div>
                        <div>
                          <Label htmlFor="smtpPassword">SMTP Password</Label>
                          <Input
                            id="smtpPassword"
                            type="password"
                            value={smtpPassword}
                            onChange={(e) => setSmtpPassword(e.target.value)}
                          />
                        </div>
                      </div>
                    )}
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-semibold mb-4">Cloud Storage</h3>
                  <div className="space-y-4">
                    <div>
                      <Label htmlFor="cloudStorageProvider">Storage Provider</Label>
                      <Select value={cloudStorageProvider} onValueChange={setCloudStorageProvider}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="local">Local Storage</SelectItem>
                          <SelectItem value="aws">Amazon S3</SelectItem>
                          <SelectItem value="gcp">Google Cloud Storage</SelectItem>
                          <SelectItem value="azure">Azure Blob Storage</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

{cloudStorageProvider === "aws" && (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="awsAccessKey">AWS Access Key</Label>
                          <Input
                            id="awsAccessKey"
                            value={awsAccessKey}
                            onChange={(e) => setAwsAccessKey(e.target.value)}
                          />
                        </div>
                        <div>
                          <Label htmlFor="awsSecretKey">AWS Secret Key</Label>
                          <Input
                            id="awsSecretKey"
                            type="password"
                            value={awsSecretKey}
                            onChange={(e) => setAwsSecretKey(e.target.value)}
                          />
                        </div>
                        <div className="md:col-span-2">
                          <Label htmlFor="awsBucket">S3 Bucket Name</Label>
                          <Input id="awsBucket" value={awsBucket} onChange={(e) => setAwsBucket(e.target.value)} />
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>

<Button
                onClick={() => handleSaveSettings("Integration")}
                className="bg-qnekt-black hover:bg-qnekt-black/90"
              >
                <Save className="h-4 w-4 mr-2" />
                Save Integration Settings
              </Button>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
      inset && "pl-8",
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className,
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
  ({ className, ...props }, ref) => (
    <div className="relative w-full overflow-auto">
      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
    </div>
  ),
)
Table.displayName = "Table"

const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
)
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
  ),
)
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
  ),
)
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
  ({ className, ...props }, ref) => (
    <tr
      ref={ref}
      className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
      {...props}
    />
  ),
)
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <th
      ref={ref}
      className={cn(
        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
        className,
      )}
      {...props}
    />
  ),
)
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
  ),
)
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
  ({ className, ...props }, ref) => (
    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
  ),
)
TableCaption.displayName = "TableCaption"

export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/admin/material-upload.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Upload, X, Plus } from "lucide-react"
import { addMaterial, type LearningMaterial } from "@/lib/enhanced-storage"
import { useToast } from "@/hooks/use-toast"

const SUBJECTS = ["Biology", "Chemistry", "Physics", "Geography", "Quran"]

const TOPICS_BY_SUBJECT: Record<string, string[]> = {
  Biology: ["Human Anatomy", "Plant Biology", "Life Cycles"],
  Chemistry: ["Atomic Structure", "Periodic Table", "Chemical Reactions"],
  Physics: ["Motion & Forces", "Light & Optics", "Energy & Work"],
  Geography: ["Landforms", "Climate & Weather", "Water Bodies"],
  Quran: ["Creation & Cosmology", "Human Development", "Natural Phenomena"],
}

const MATERIAL_TYPES = [
  { value: "video", label: "Video" },
  { value: "pdf", label: "PDF Document" },
  { value: "infographic", label: "Infographic" },
  { value: "quiz", label: "Quiz" },
  { value: "article", label: "Article" },
]

const DIFFICULTY_LEVELS = [
  { value: "beginner", label: "Beginner" },
  { value: "intermediate", label: "Intermediate" },
  { value: "advanced", label: "Advanced" },
]

export function MaterialUpload() {
  const { toast } = useToast()
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    subject: "",
    topic: "",
    type: "article" as LearningMaterial["type"],
    content: "",
    thumbnailUrl: "",
    duration: "",
    difficulty: "beginner" as LearningMaterial["difficulty"],
    quranicConnection: "",
    tags: [] as string[],
  })
  const [newTag, setNewTag] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))

// Reset topic when subject changes
    if (field === "subject") {
      setFormData((prev) => ({ ...prev, topic: "" }))
    }
  }

const addTag = () => {
    if (newTag.trim() && !formData.tags.includes(newTag.trim())) {
      setFormData((prev) => ({
        ...prev,
        tags: [...prev.tags, newTag.trim()],
      }))
      setNewTag("")
    }
  }

const removeTag = (tagToRemove: string) => {
    setFormData((prev) => ({
      ...prev,
      tags: prev.tags.filter((tag) => tag !== tagToRemove),
    }))
  }

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

if (!formData.title || !formData.subject || !formData.topic || !formData.content) {
      toast({
        title: "Missing Information",
        description: "Please fill in all required fields.",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      const newMaterial = addMaterial({
        title: formData.title,
        description: formData.description,
        subject: formData.subject,
        topic: formData.topic,
        type: formData.type,
        content: formData.content,
        thumbnailUrl: formData.thumbnailUrl || undefined,
        duration: formData.duration || undefined,
        difficulty: formData.difficulty,
        quranicConnection: formData.quranicConnection || undefined,
        tags: formData.tags,
      })

toast({
        title: "Material Added Successfully!",
        description: `"${newMaterial.title}" has been added to ${newMaterial.subject} - ${newMaterial.topic}.`,
      })

// Reset form
      setFormData({
        title: "",
        description: "",
        subject: "",
        topic: "",
        type: "article",
        content: "",
        thumbnailUrl: "",
        duration: "",
        difficulty: "beginner",
        quranicConnection: "",
        tags: [],
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to add material. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const availableTopics = formData.subject ? TOPICS_BY_SUBJECT[formData.subject] || [] : []

return (
    <Card className="max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Upload className="h-5 w-5" />
          Upload Learning Material
        </CardTitle>
        <CardDescription>Add new educational content to the Qnekt platform</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Basic Information */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="title">Title *</Label>
              <Input
                id="title"
                value={formData.title}
                onChange={(e) => handleInputChange("title", e.target.value)}
                placeholder="Enter material title"
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="type">Material Type *</Label>
              <Select value={formData.type} onValueChange={(value) => handleInputChange("type", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select material type" />
                </SelectTrigger>
                <SelectContent>
                  {MATERIAL_TYPES.map((type) => (
                    <SelectItem key={type.value} value={type.value}>
                      {type.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

{/* Subject and Topic */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="subject">Subject *</Label>
              <Select value={formData.subject} onValueChange={(value) => handleInputChange("subject", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select subject" />
                </SelectTrigger>
                <SelectContent>
                  {SUBJECTS.map((subject) => (
                    <SelectItem key={subject} value={subject}>
                      {subject}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="topic">Topic *</Label>
              <Select
                value={formData.topic}
                onValueChange={(value) => handleInputChange("topic", value)}
                disabled={!formData.subject}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select topic" />
                </SelectTrigger>
                <SelectContent>
                  {availableTopics.map((topic) => (
                    <SelectItem key={topic} value={topic}>
                      {topic}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

{/* Description */}
          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) => handleInputChange("description", e.target.value)}
              placeholder="Brief description of the material"
              rows={3}
            />
          </div>

{/* Content */}
          <div className="space-y-2">
            <Label htmlFor="content">Content *</Label>
            <Textarea
              id="content"
              value={formData.content}
              onChange={(e) => handleInputChange("content", e.target.value)}
              placeholder="Main content of the material"
              rows={6}
              required
            />
          </div>

{/* Additional Fields */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <Label htmlFor="difficulty">Difficulty Level</Label>
              <Select value={formData.difficulty} onValueChange={(value) => handleInputChange("difficulty", value)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {DIFFICULTY_LEVELS.map((level) => (
                    <SelectItem key={level.value} value={level.value}>
                      {level.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="duration">Duration (optional)</Label>
              <Input
                id="duration"
                value={formData.duration}
                onChange={(e) => handleInputChange("duration", e.target.value)}
                placeholder="e.g., 10 minutes"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="thumbnailUrl">Thumbnail URL (optional)</Label>
              <Input
                id="thumbnailUrl"
                value={formData.thumbnailUrl}
                onChange={(e) => handleInputChange("thumbnailUrl", e.target.value)}
                placeholder="Image URL"
              />
            </div>
          </div>

{/* Quranic Connection */}
          <div className="space-y-2">
            <Label htmlFor="quranicConnection">Quranic Connection (optional)</Label>
            <Textarea
              id="quranicConnection"
              value={formData.quranicConnection}
              onChange={(e) => handleInputChange("quranicConnection", e.target.value)}
              placeholder="Related Quranic verse or concept"
              rows={2}
            />
          </div>

{/* Tags */}
          <div className="space-y-2">
            <Label>Tags</Label>
            <div className="flex gap-2 mb-2">
              <Input
                value={newTag}
                onChange={(e) => setNewTag(e.target.value)}
                placeholder="Add a tag"
                onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addTag())}
              />
              <Button type="button" onClick={addTag} size="sm">
                <Plus className="h-4 w-4" />
              </Button>
            </div>
            <div className="flex flex-wrap gap-2">
              {formData.tags.map((tag) => (
                <Badge key={tag} variant="secondary" className="flex items-center gap-1">
                  {tag}
                  <X className="h-3 w-3 cursor-pointer" onClick={() => removeTag(tag)} />
                </Badge>
              ))}
            </div>
          </div>

{/* Submit Button */}
          <Button type="submit" className="w-full bg-qnekt-green hover:bg-qnekt-green/90" disabled={isSubmitting}>
            {isSubmitting ? "Adding Material..." : "Add Material"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function PrivacyPolicyPage() {
  return (
    <div className="min-h-screen bg-white py-12">
      <div className="container max-w-4xl">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-qnekt-red mb-4">Privacy Policy</h1>
          <p className="text-lg text-qnekt-black">Last updated: January 2024</p>
        </div>

<Card className="gradient-border bg-white">
          <CardHeader>
            <CardTitle className="text-qnekt-green">Our Commitment to Privacy</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6 text-qnekt-black">
            <p>
              At Qnekt, operated by ALMM Groups, we are committed to protecting your privacy and the privacy of your
              children. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when
              you use our educational platform that integrates modern scientific education with Islamic teachings.
            </p>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">1. Information We Collect</h3>
              <div className="space-y-3">
                <h4 className="font-semibold text-qnekt-green">Personal Information</h4>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Name, email address, and contact information</li>
                  <li>Student grade level and age (for educational content customization)</li>
                  <li>Parent/guardian information for minors</li>
                  <li>Learning preferences and progress data</li>
                  <li>Communication preferences</li>
                </ul>

<h4 className="font-semibold text-qnekt-green">Usage Information</h4>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Learning activities and quiz results</li>
                  <li>Time spent on educational content</li>
                  <li>Device information and IP address</li>
                  <li>Browser type and operating system</li>
                </ul>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">2. How We Use Your Information</h3>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Provide personalized educational content aligned with Islamic values</li>
                <li>Track learning progress and provide feedback</li>
                <li>Communicate with parents about their child's progress</li>
                <li>Improve our educational platform and services</li>
                <li>Send educational updates and newsletters (with consent)</li>
                <li>Ensure platform security and prevent misuse</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">3. Children's Privacy</h3>
              <p>
                We take children's privacy seriously and comply with applicable children's privacy laws. We do not
                knowingly collect personal information from children under 13 without parental consent. Parents have the
                right to:
              </p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Review their child's personal information</li>
                <li>Request deletion of their child's information</li>
                <li>Refuse further collection of their child's information</li>
                <li>Monitor their child's learning activities</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">4. Information Sharing</h3>
              <p>
                We do not sell, trade, or rent your personal information. We may share information only in these
                circumstances:
              </p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>With your explicit consent</li>
                <li>With qualified educators and tutors (for educational purposes only)</li>
                <li>To comply with legal obligations</li>
                <li>To protect the safety and security of our users</li>
                <li>
                  With service providers who assist in platform operations (under strict confidentiality agreements)
                </li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">5. Data Security</h3>
              <p>
                We implement appropriate technical and organizational measures to protect your information, including:
              </p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Encryption of sensitive data</li>
                <li>Secure server infrastructure</li>
                <li>Regular security audits and updates</li>
                <li>Limited access to personal information</li>
                <li>Staff training on privacy and security practices</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">6. Your Rights</h3>
              <p>You have the right to:</p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Access your personal information</li>
                <li>Correct inaccurate information</li>
                <li>Request deletion of your information</li>
                <li>Object to processing of your information</li>
                <li>Data portability (receive your data in a structured format)</li>
                <li>Withdraw consent at any time</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">7. International Data Transfers</h3>
              <p>
                As we operate from Doha, Qatar, your information may be processed in Qatar or other countries where our
                service providers operate. We ensure appropriate safeguards are in place for international data
                transfers.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">8. Cookies and Tracking</h3>
              <p>
                We use cookies and similar technologies to enhance your experience. For detailed information about our
                cookie practices, please see our{" "}
                <a href="/cookie-policy" className="text-qnekt-green hover:underline">
                  Cookie Policy
                </a>
                .
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">9. Changes to This Policy</h3>
              <p>
                We may update this Privacy Policy periodically. We will notify you of significant changes through our
                platform or by email. Your continued use of our services after changes indicates acceptance of the
                updated policy.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">10. Contact Us</h3>
              <p>If you have questions about this Privacy Policy or our privacy practices, please contact us:</p>
              <div className="bg-gray-50 p-4 rounded-lg">
                <p>
                  <strong>ALMM Groups</strong>
                </p>
                <p>Email: info@qnektonline.com</p>
                <p>Address: Doha, Qatar</p>
                <p>Phone: +974 123-4567</p>
              </div>
            </div>

<div className="border-t pt-4">
              <p className="text-sm text-gray-600">
                This Privacy Policy is designed to comply with applicable privacy laws and reflects our commitment to
                Islamic principles of trust, transparency, and protection of personal information.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/terms-of-service/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function TermsOfServicePage() {
  return (
    <div className="min-h-screen bg-white py-12">
      <div className="container max-w-4xl">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-qnekt-red mb-4">Terms of Service</h1>
          <p className="text-lg text-qnekt-black">Last updated: January 2024</p>
        </div>

<Card className="gradient-border bg-white">
          <CardHeader>
            <CardTitle className="text-qnekt-green">Terms and Conditions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6 text-qnekt-black">
            <p>
              Welcome to Qnekt, an educational platform operated by ALMM Groups. These Terms of Service govern your use
              of our platform that integrates modern scientific education with Islamic teachings. By accessing or using
              our services, you agree to be bound by these terms.
            </p>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">1. Acceptance of Terms</h3>
              <p>
                By creating an account or using our services, you acknowledge that you have read, understood, and agree
                to be bound by these Terms of Service and our Privacy Policy. If you are under 18, your parent or
                guardian must agree to these terms on your behalf.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">2. Educational Purpose and Islamic Values</h3>
              <p>
                Qnekt is designed to provide quality education that aligns with Islamic principles and values. Our
                content integrates scientific knowledge with Quranic wisdom and Islamic teachings. Users are expected to
                respect these values and use the platform for legitimate educational purposes.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">3. User Accounts and Registration</h3>
              <div className="space-y-3">
                <h4 className="font-semibold text-qnekt-green">Account Requirements</h4>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>You must provide accurate and complete information during registration</li>
                  <li>You are responsible for maintaining the security of your account</li>
                  <li>You must notify us immediately of any unauthorized use of your account</li>
                  <li>One person may not maintain multiple accounts</li>
                </ul>

<h4 className="font-semibold text-qnekt-green">Age Requirements</h4>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Users under 13 require parental consent and supervision</li>
                  <li>Users aged 13-17 require parental awareness and may require consent</li>
                  <li>Parents are responsible for monitoring their child's use of the platform</li>
                </ul>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">4. Acceptable Use Policy</h3>
              <div className="space-y-3">
                <h4 className="font-semibold text-qnekt-green">Permitted Uses</h4>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Access educational content for personal learning</li>
                  <li>Participate in quizzes and educational activities</li>
                  <li>Interact respectfully with other users and educators</li>
                  <li>Download materials for personal educational use</li>
                </ul>

<h4 className="font-semibold text-qnekt-green">Prohibited Activities</h4>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Sharing account credentials with others</li>
                  <li>Uploading or sharing inappropriate, offensive, or non-Islamic content</li>
                  <li>Attempting to hack, disrupt, or damage the platform</li>
                  <li>Using the platform for commercial purposes without permission</li>
                  <li>Plagiarizing or cheating on assessments</li>
                  <li>Harassing or bullying other users</li>
                </ul>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">5. Educational Content and Standards</h3>
              <p>
                Our educational content is carefully curated to maintain high academic standards while ensuring
                alignment with Islamic values. We reserve the right to:
              </p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Update and modify educational content</li>
                <li>Remove content that doesn't meet our standards</li>
                <li>Set academic and behavioral expectations for users</li>
                <li>Provide feedback and assessments on student progress</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">6. Educator Guidelines</h3>
              <p>Educators using our platform must:</p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Maintain professional conduct at all times</li>
                <li>Ensure content aligns with Islamic values and educational standards</li>
                <li>Respect student privacy and confidentiality</li>
                <li>Provide constructive and encouraging feedback</li>
                <li>Report any concerns about student welfare</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">7. Payment Terms</h3>
              <p>For paid services:</p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Payment is due in advance for subscription services</li>
                <li>Refunds are subject to our refund policy</li>
                <li>Prices may change with 30 days notice</li>
                <li>Failed payments may result in service suspension</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">8. Intellectual Property Rights</h3>
              <p>
                All content on Qnekt, including text, graphics, videos, and software, is owned by ALMM Groups or our
                licensors. You may:
              </p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Use content for personal educational purposes</li>
                <li>Download materials for offline study</li>
                <li>Share content with family members for educational use</li>
              </ul>
              <p>You may not:</p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Reproduce content for commercial purposes</li>
                <li>Distribute content to unauthorized third parties</li>
                <li>Modify or create derivative works without permission</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">9. Privacy and Data Protection</h3>
              <p>
                Your privacy is important to us. Please review our{" "}
                <a href="/privacy-policy" className="text-qnekt-green hover:underline">
                  Privacy Policy
                </a>
                to understand how we collect, use, and protect your information.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">10. Service Availability</h3>
              <p>We strive to provide continuous service but cannot guarantee 100% uptime. We reserve the right to:</p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Perform maintenance and updates</li>
                <li>Temporarily suspend service for technical reasons</li>
                <li>Modify or discontinue features with notice</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">11. Limitation of Liability</h3>
              <p>
                ALMM Groups and Qnekt are not liable for indirect, incidental, or consequential damages arising from
                your use of our services. Our total liability is limited to the amount you paid for our services.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">12. Termination</h3>
              <p>
                We may terminate or suspend your account for violation of these terms. You may terminate your account at
                any time by contacting us. Upon termination:
              </p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>Your access to the platform will cease</li>
                <li>Your data may be deleted according to our retention policy</li>
                <li>Outstanding payments remain due</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">13. Governing Law</h3>
              <p>
                These terms are governed by the laws of Qatar. Any disputes will be resolved through arbitration in
                Doha, Qatar, in accordance with Islamic principles of justice and fairness.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">14. Changes to Terms</h3>
              <p>
                We may update these terms periodically. Significant changes will be communicated through our platform or
                by email. Continued use after changes indicates acceptance of the updated terms.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">15. Contact Information</h3>
              <p>For questions about these Terms of Service, please contact us:</p>
              <div className="bg-gray-50 p-4 rounded-lg">
                <p>
                  <strong>ALMM Groups</strong>
                </p>
                <p>Email: info@qnektonline.com</p>
                <p>Address: Doha, Qatar</p>
                <p>Phone: +974 123-4567</p>
              </div>
            </div>

<div className="border-t pt-4">
              <p className="text-sm text-gray-600">
                These Terms of Service reflect our commitment to providing quality Islamic education while maintaining
                the highest standards of service and user protection.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/cookie-policy/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function CookiePolicyPage() {
  return (
    <div className="min-h-screen bg-white py-12">
      <div className="container max-w-4xl">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-qnekt-red mb-4">Cookie Policy</h1>
          <p className="text-lg text-qnekt-black">Last updated: January 2024</p>
        </div>

<Card className="gradient-border bg-white">
          <CardHeader>
            <CardTitle className="text-qnekt-green">Our Use of Cookies</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6 text-qnekt-black">
            <p>
              This Cookie Policy explains how Qnekt, operated by ALMM Groups, uses cookies and similar technologies on
              our educational platform. We are committed to transparency about our data practices while providing you
              with an excellent learning experience.
            </p>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">1. What Are Cookies?</h3>
              <p>
                Cookies are small text files that are stored on your device when you visit our website. They help us
                remember your preferences, improve your experience, and provide personalized educational content that
                aligns with Islamic values.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">2. Types of Cookies We Use</h3>

<div className="space-y-3">
                <h4 className="font-semibold text-qnekt-green">Essential Cookies</h4>
                <p>These cookies are necessary for the website to function properly:</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Authentication cookies to keep you logged in</li>
                  <li>Security cookies to protect against fraud</li>
                  <li>Session cookies to maintain your learning progress</li>
                  <li>Load balancing cookies for optimal performance</li>
                </ul>

<h4 className="font-semibold text-qnekt-green">Functional Cookies</h4>
                <p>These cookies enhance your experience on our platform:</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Language and region preferences</li>
                  <li>Customized learning dashboard settings</li>
                  <li>Accessibility preferences</li>
                  <li>Theme and display preferences</li>
                </ul>

<h4 className="font-semibold text-qnekt-green">Analytics Cookies</h4>
                <p>These cookies help us understand how our platform is used:</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Learning progress and engagement metrics</li>
                  <li>Popular educational content tracking</li>
                  <li>Platform performance monitoring</li>
                  <li>Error tracking and debugging</li>
                </ul>

<h4 className="font-semibold text-qnekt-green">Marketing Cookies</h4>
                <p>These cookies help us provide relevant educational content:</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Personalized educational recommendations</li>
                  <li>Newsletter and communication preferences</li>
                  <li>Educational event notifications</li>
                </ul>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">3. Third-Party Cookies</h3>
              <p>We may use third-party services that set their own cookies:</p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>
                  <strong>Google Analytics:</strong> To understand website usage and improve our services
                </li>
                <li>
                  <strong>Video Platforms:</strong> For educational video content delivery
                </li>
                <li>
                  <strong>Payment Processors:</strong> For secure payment processing
                </li>
                <li>
                  <strong>Educational Tools:</strong> For interactive learning experiences
                </li>
              </ul>
              <p>
                These third parties have their own privacy policies and cookie practices, which we encourage you to
                review.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">4. Children's Privacy and Cookies</h3>
              <p>We take special care with children's privacy:</p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>We do not use tracking cookies for children under 13 without parental consent</li>
                <li>Educational progress cookies are used only for legitimate educational purposes</li>
                <li>Parents can review and control cookie settings for their children's accounts</li>
                <li>We do not use behavioral advertising cookies for children</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">5. Managing Your Cookie Preferences</h3>

<div className="space-y-3">
                <h4 className="font-semibold text-qnekt-green">Browser Settings</h4>
                <p>You can control cookies through your browser settings:</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>
                    <strong>Chrome:</strong> Settings → Privacy and Security → Cookies and other site data
                  </li>
                  <li>
                    <strong>Firefox:</strong> Options → Privacy & Security → Cookies and Site Data
                  </li>
                  <li>
                    <strong>Safari:</strong> Preferences → Privacy → Cookies and website data
                  </li>
                  <li>
                    <strong>Edge:</strong> Settings → Cookies and site permissions
                  </li>
                </ul>

<h4 className="font-semibold text-qnekt-green">Platform Settings</h4>
                <p>You can also manage cookies through your Qnekt account:</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Visit your account settings page</li>
                  <li>Navigate to Privacy Preferences</li>
                  <li>Adjust cookie settings according to your preferences</li>
                  <li>Save your changes</li>
                </ul>
              </div>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">6. Cookie Retention</h3>
              <p>Different cookies have different retention periods:</p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>
                  <strong>Session Cookies:</strong> Deleted when you close your browser
                </li>
                <li>
                  <strong>Persistent Cookies:</strong> Remain for a specified period (usually 1-2 years)
                </li>
                <li>
                  <strong>Essential Cookies:</strong> Retained as long as necessary for platform functionality
                </li>
                <li>
                  <strong>Analytics Cookies:</strong> Typically retained for 2 years
                </li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">7. Impact of Disabling Cookies</h3>
              <p>Disabling certain cookies may affect your experience:</p>
              <ul className="list-disc list-inside space-y-1 ml-4">
                <li>You may need to log in repeatedly</li>
                <li>Your learning progress may not be saved properly</li>
                <li>Personalized content recommendations may not work</li>
                <li>Some interactive features may be unavailable</li>
              </ul>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">8. International Data Transfers</h3>
              <p>
                Some cookies may involve data transfers to countries outside Qatar. We ensure appropriate safeguards are
                in place for such transfers, in compliance with applicable data protection laws.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">9. Updates to This Policy</h3>
              <p>
                We may update this Cookie Policy periodically to reflect changes in our practices or applicable laws. We
                will notify you of significant changes through our platform or by email.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">10. Islamic Principles and Transparency</h3>
              <p>
                In accordance with Islamic principles of honesty and transparency (Amanah), we are committed to being
                clear about our cookie practices. We believe in treating your data with the same respect and care that
                we would want for our own families.
              </p>
            </div>

<div className="space-y-4">
              <h3 className="text-xl font-semibold text-qnekt-red">11. Contact Us</h3>
              <p>If you have questions about our cookie practices, please contact us:</p>
              <div className="bg-gray-50 p-4 rounded-lg">
                <p>
                  <strong>ALMM Groups</strong>
                </p>
                <p>Email: info@qnektonline.com</p>
                <p>Address: Doha, Qatar</p>
                <p>Phone: +974 123-4567</p>
              </div>
            </div>

<div className="border-t pt-4">
              <p className="text-sm text-gray-600">
                This Cookie Policy is designed to provide transparency about our data practices while ensuring the best
                possible educational experience for our users.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/parents-students/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  BookOpen,
  Users,
  Award,
  Heart,
  Star,
  CheckCircle,
  ArrowRight,
  GraduationCap,
  Shield,
  Clock,
} from "lucide-react"

export default function ParentsStudentsPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <section className="py-20 px-4 text-center bg-white">
        <div className="container mx-auto max-w-4xl">
          <h1 className="text-4xl md:text-6xl font-bold mb-6 text-qnekt-black">
            Empowering Families Through <span className="text-qnekt-red">Faith-Based</span>{" "}
            <span className="text-qnekt-green">Education</span>
          </h1>
          <p className="text-xl text-qnekt-black mb-8 leading-relaxed">
            Join thousands of families who trust Qnekt to provide their children with world-class education that honors
            Islamic values and scientific excellence.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button asChild size="lg" className="bg-qnekt-red hover:bg-red-700 text-white">
              <Link href="/join">
                <GraduationCap className="mr-2 h-5 w-5" />
                Register Your Child
              </Link>
            </Button>
            <Button
              asChild
              variant="outline"
              size="lg"
              className="border-qnekt-green text-qnekt-green hover:bg-qnekt-green hover:text-white bg-transparent"
            >
              <Link href="/dashboard">
                <BookOpen className="mr-2 h-5 w-5" />
                Explore Curriculum
              </Link>
            </Button>
          </div>
        </div>
      </section>

{/* Why Choose Qnekt Section */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-qnekt-black">
              Why Parents Choose <span className="text-qnekt-green">Qnekt</span>
            </h2>
            <p className="text-lg text-qnekt-black max-w-2xl mx-auto">
              We understand the importance of providing education that aligns with your family's values while preparing
              your children for academic success.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="gradient-border hover-lift bg-white">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-qnekt-green/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Heart className="h-8 w-8 text-qnekt-green" />
                </div>
                <CardTitle className="text-qnekt-black">Islamic Values Integration</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-qnekt-black text-center">
                  Every lesson connects scientific concepts with Quranic wisdom, fostering both intellectual and
                  spiritual growth.
                </p>
              </CardContent>
            </Card>

<Card className="gradient-border hover-lift bg-white">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-qnekt-red/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Award className="h-8 w-8 text-qnekt-red" />
                </div>
                <CardTitle className="text-qnekt-black">Academic Excellence</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-qnekt-black text-center">
                  Curriculum designed by expert educators to meet international standards while maintaining Islamic
                  perspective.
                </p>
              </CardContent>
            </Card>

<Card className="gradient-border hover-lift bg-white">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-qnekt-black/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Shield className="h-8 w-8 text-qnekt-black" />
                </div>
                <CardTitle className="text-qnekt-black">Safe Learning Environment</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-qnekt-black text-center">
                  Child-safe platform with parental controls and content that aligns with Islamic family values.
                </p>
              </CardContent>
            </Card>

<Card className="gradient-border hover-lift bg-white">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-qnekt-green/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Users className="h-8 w-8 text-qnekt-green" />
                </div>
                <CardTitle className="text-qnekt-black">Community Support</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-qnekt-black text-center">
                  Connect with like-minded families and educators who share your commitment to faith-based education.
                </p>
              </CardContent>
            </Card>

<Card className="gradient-border hover-lift bg-white">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-qnekt-red/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Clock className="h-8 w-8 text-qnekt-red" />
                </div>
                <CardTitle className="text-qnekt-black">Flexible Learning</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-qnekt-black text-center">
                  Self-paced learning that adapts to your family's schedule and your child's learning style.
                </p>
              </CardContent>
            </Card>

<Card className="gradient-border hover-lift bg-white">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-qnekt-black/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <BookOpen className="h-8 w-8 text-qnekt-black" />
                </div>
                <CardTitle className="text-qnekt-black">Comprehensive Resources</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-qnekt-black text-center">
                  Videos, interactive content, quizzes, and downloadable materials for complete learning experience.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Student Success Stories */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-qnekt-black">
              Student <span className="text-qnekt-red">Success</span> Stories
            </h2>
            <p className="text-lg text-qnekt-black max-w-2xl mx-auto">
              Hear from families who have experienced the transformative power of faith-integrated education.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="bg-white border-2 border-qnekt-green/20 hover-lift">
              <CardHeader className="text-center">
                <Image
                  src="/testimonials/nusaiba-new.png"
                  alt="Nusaiba"
                  width={80}
                  height={80}
                  className="rounded-full mx-auto mb-4"
                />
                <CardTitle className="text-qnekt-black">Nusaiba, Age 12</CardTitle>
                <div className="flex justify-center space-x-1 mb-2">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  ))}
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-qnekt-black text-center italic">
                  "I love how Qnekt shows me how Allah's creation works in science. It makes learning so much more
                  meaningful!"
                </p>
              </CardContent>
            </Card>

<Card className="bg-white border-2 border-qnekt-red/20 hover-lift">
              <CardHeader className="text-center">
                <Image
                  src="/testimonials/aariz-new.png"
                  alt="Aariz"
                  width={80}
                  height={80}
                  className="rounded-full mx-auto mb-4"
                />
                <CardTitle className="text-qnekt-black">Aariz, Age 14</CardTitle>
                <div className="flex justify-center space-x-1 mb-2">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  ))}
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-qnekt-black text-center italic">
                  "The chemistry lessons with Quranic connections helped me understand both subjects better. My grades
                  improved a lot!"
                </p>
              </CardContent>
            </Card>

<Card className="bg-white border-2 border-qnekt-black/20 hover-lift">
              <CardHeader className="text-center">
                <Image
                  src="/testimonials/inaya-new.png"
                  alt="Inaya"
                  width={80}
                  height={80}
                  className="rounded-full mx-auto mb-4"
                />
                <CardTitle className="text-qnekt-black">Inaya, Age 13</CardTitle>
                <div className="flex justify-center space-x-1 mb-2">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  ))}
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-qnekt-black text-center italic">
                  "Learning about Muslim scientists inspired me to pursue STEM. I want to be like Fatima al-Fihri!"
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Curriculum Overview */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-qnekt-black">
              Our <span className="text-qnekt-green">Curriculum</span>
            </h2>
            <p className="text-lg text-qnekt-black max-w-2xl mx-auto">
              Comprehensive subjects designed to nurture both academic excellence and spiritual growth.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Card className="bg-white border-l-4 border-qnekt-green hover-lift">
              <CardHeader>
                <CardTitle className="text-qnekt-black flex items-center">
                  <div className="w-8 h-8 bg-qnekt-green rounded mr-3"></div>
                  Biology
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-qnekt-black">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-green mr-2" />
                    Human Anatomy & Quranic Verses
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-green mr-2" />
                    Plant Biology & Creation
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-green mr-2" />
                    Life Cycles & Divine Wisdom
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="bg-white border-l-4 border-qnekt-red hover-lift">
              <CardHeader>
                <CardTitle className="text-qnekt-black flex items-center">
                  <div className="w-8 h-8 bg-qnekt-red rounded mr-3"></div>
                  Chemistry
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-qnekt-black">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-red mr-2" />
                    Atomic Structure & Creation
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-red mr-2" />
                    Periodic Table & Elements
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-red mr-2" />
                    Chemical Reactions & Balance
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="bg-white border-l-4 border-qnekt-black hover-lift">
              <CardHeader>
                <CardTitle className="text-qnekt-black flex items-center">
                  <div className="w-8 h-8 bg-qnekt-black rounded mr-3"></div>
                  Physics
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-qnekt-black">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-black mr-2" />
                    Motion & Forces
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-black mr-2" />
                    Light & Optics
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-black mr-2" />
                    Energy & Work
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="bg-white border-l-4 border-qnekt-green hover-lift">
              <CardHeader>
                <CardTitle className="text-qnekt-black flex items-center">
                  <div className="w-8 h-8 bg-qnekt-green rounded mr-3"></div>
                  Geography
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-qnekt-black">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-green mr-2" />
                    Earth's Landforms
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-green mr-2" />
                    Climate & Weather
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-green mr-2" />
                    Water Bodies & Ecosystems
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="bg-white border-l-4 border-qnekt-red hover-lift">
              <CardHeader>
                <CardTitle className="text-qnekt-black flex items-center">
                  <div className="w-8 h-8 bg-qnekt-red rounded mr-3"></div>
                  Quranic Studies
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-qnekt-black">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-red mr-2" />
                    Creation & Cosmology
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-red mr-2" />
                    Human Development
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-red mr-2" />
                    Natural Phenomena
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="bg-white border-l-4 border-qnekt-black hover-lift">
              <CardHeader>
                <CardTitle className="text-qnekt-black flex items-center">
                  <div className="w-8 h-8 bg-qnekt-black rounded mr-3"></div>
                  Muslim Scientists
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-qnekt-black">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-black mr-2" />
                    Historical Contributions
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-black mr-2" />
                    Scientific Discoveries
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-black mr-2" />
                    Legacy & Inspiration
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Parent Resources */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-qnekt-black">
              Resources for <span className="text-qnekt-green">Parents</span>
            </h2>
            <p className="text-lg text-qnekt-black max-w-2xl mx-auto">
              Tools and guidance to support your child's learning journey at home.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <Card className="bg-white border-2 border-qnekt-green/20 hover-lift">
              <CardHeader>
                <CardTitle className="text-qnekt-black">Progress Tracking</CardTitle>
                <CardDescription className="text-qnekt-black">
                  Monitor your child's learning progress with detailed analytics and reports.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-qnekt-black">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-green mr-2" />
                    Weekly progress reports
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-green mr-2" />
                    Subject-wise performance
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-green mr-2" />
                    Learning recommendations
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="bg-white border-2 border-qnekt-red/20 hover-lift">
              <CardHeader>
                <CardTitle className="text-qnekt-black">Family Discussion Guides</CardTitle>
                <CardDescription className="text-qnekt-black">
                  Conversation starters to discuss lessons and Islamic connections at home.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-qnekt-black">
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-red mr-2" />
                    Topic-based discussions
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-red mr-2" />
                    Quranic reflection questions
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-4 w-4 text-qnekt-red mr-2" />
                    Family activity suggestions
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Call to Action */}
      <section className="py-20 px-4 text-center bg-white">
        <div className="container mx-auto max-w-4xl">
          <h2 className="text-3xl md:text-5xl font-bold mb-6 text-qnekt-black">
            Ready to Begin Your Child's <span className="text-qnekt-red">Educational</span>{" "}
            <span className="text-qnekt-green">Journey</span>?
          </h2>
          <p className="text-xl text-qnekt-black mb-8 leading-relaxed">
            Join our community of families committed to excellence in both academic achievement and Islamic values.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button asChild size="lg" className="bg-qnekt-red hover:bg-red-700 text-white">
              <Link href="/join">
                <GraduationCap className="mr-2 h-5 w-5" />
                Register Your Child Today
              </Link>
            </Button>
            <Button
              asChild
              variant="outline"
              size="lg"
              className="border-qnekt-green text-qnekt-green hover:bg-qnekt-green hover:text-white bg-transparent"
            >
              <Link href="/about">
                <ArrowRight className="mr-2 h-5 w-5" />
                Learn More About Qnekt
              </Link>
            </Button>
          </div>
          <p className="text-sm text-qnekt-black mt-6 opacity-80">
            Free trial available • No commitment required • Cancel anytime
          </p>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isEdit="true" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]png:file="public/hero-quran-education.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/83776942c6b15cbe873a021280f09e46-removebg-preview-0gBwDaBzfrqHaYKojcBKuTdCt2Fe2l.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/muslim-scientists/page.tsx" isEdit="true" isMerged="true"
import Image from "next/image"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ColoredHeading } from "@/components/colored-heading"
import { CheckCircle } from "lucide-react"

const scientists = [
  {
    name: "Al-Khwarizmi (Algoritmi)",
    period: "c. 780 – c. 850",
    imageUrl: "/al-khwarizmi-portrait.png",
    bio: "A Persian polymath who produced vastly influential works in mathematics, astronomy, and geography. Known as the 'father of algebra'.",
    achievements: [
      "Developed algebra and systematic methods for solving linear and quadratic equations.",
      "Introduced Hindu-Arabic numerals and decimal positional numbering to the Western world.",
      "Wrote 'The Compendious Book on Calculation by Completion and Balancing' (Al-Jabr).",
      "Refined Ptolemy's data on geography.",
    ],
    colors: {
      bg: "bg-qnekt-red/5",
      text: "text-qnekt-red",
      border: "border-qnekt-red",
    },
  },
  {
    name: "Ibn Sina (Avicenna)",
    period: "c. 980 – 1037",
    imageUrl: "/ibn-sina-avicenna-portrait.png",
    bio: "A Persian polymath regarded as one of the most significant physicians, astronomers, thinkers and writers of the Islamic Golden Age.",
    achievements: [
      "Authored 'The Canon of Medicine', a medical encyclopedia that became a standard medical text in Europe for centuries.",
      "Made significant contributions to philosophy, particularly Aristotelian logic.",
      "Wrote 'The Book of Healing', a vast philosophical and scientific encyclopedia.",
      "Contributed to astronomy, alchemy, psychology, and geology.",
    ],
    colors: {
      bg: "bg-qnekt-green/5",
      text: "text-qnekt-green",
      border: "border-qnekt-green",
    },
  },
  {
    name: "Ibn al-Haytham (Alhazen)",
    period: "c. 965 – c. 1040",
    imageUrl: "/ibn-al-haytham-portrait.png",
    bio: "An Arab mathematician, astronomer, and physicist of the Islamic Golden Age. Considered the 'father of modern optics'.",
    achievements: [
      "Pioneered the scientific method and experimental physics.",
      "Made significant contributions to optics, particularly vision theory, in his 'Book of Optics'.",
      "Explained the nature of light and vision, correctly stating that vision occurs when light reflects from an object into the eyes.",
      "Studied catoptrics and dioptrics.",
    ],
    colors: {
      bg: "bg-qnekt-black/5",
      text: "text-qnekt-black",
      border: "border-qnekt-black",
    },
  },
  {
    name: "Al-Zahrawi (Abulcasis)",
    period: "936–1013",
    imageUrl: "/al-zahrawi-portrait.png",
    bio: "An Arab Muslim physician, surgeon, and chemist from Al-Andalus. Considered the 'father of modern surgery'.",
    achievements: [
      "Wrote 'Al-Tasrif', a thirty-volume encyclopedia of medical practices.",
      "Invented numerous surgical instruments, including the forceps, scalpel, and surgical needle.",
      "Described surgical procedures for cauterization, tracheotomy, and lithotomy.",
      "Pioneered neurosurgery and ophthalmology.",
    ],
    colors: {
      bg: "bg-qnekt-red/5",
      text: "text-qnekt-red",
      border: "border-qnekt-red",
    },
  },
  {
    name: "Jabir ibn Hayyan (Geber)",
    period: "c. 721 – c. 815",
    imageUrl: "/jabir-ibn-hayyan-portrait.png",
    bio: "A polymath: a chemist and alchemist, astronomer and astrologer, engineer, geographer, philosopher, physicist, and pharmacist and physician.",
    achievements: [
      "Considered the 'father of chemistry'.",
      "Emphasized systematic experimentation and introduced over twenty laboratory instruments.",
      "Developed methods for distillation, crystallization, calcination, and sublimation.",
      "Synthesized many chemical compounds, including nitric acid and sulfuric acid.",
    ],
    colors: {
      bg: "bg-qnekt-green/5",
      text: "text-qnekt-green",
      border: "border-qnekt-green",
    },
  },
  {
    name: "Fatima al-Fihri",
    period: "Died 880 AD",
    imageUrl: "/animated-fatima-al-fihri.png",
    bio: "An Arab Muslim woman credited with founding the al-Qarawiyyin mosque and madrasa in 859 AD in Fez, Morocco, which later developed into the University of al-Qarawiyyin.",
    achievements: [
      "Founded the University of al-Qarawiyyin, considered by some to be the oldest existing, continually operating higher educational institution in the world.",
      "Championed education and knowledge.",
      "Her work established a major center for learning that attracted scholars from around the world.",
    ],
    colors: {
      bg: "bg-qnekt-black/5",
      text: "text-qnekt-black",
      border: "border-qnekt-black",
    },
  },
  {
    name: "Al-Battani (Albatenius)",
    period: "c. 858 – c. 929",
    imageUrl: "/al-battani-portrait.png",
    bio: "An Arab astronomer and mathematician. Made significant contributions to trigonometry and accurate astronomical observations.",
    achievements: [
      "Accurately determined the solar year as 365 days, 5 hours, 46 minutes and 24 seconds.",
      "Cataloged 489 stars and refined Ptolemy's astronomical data.",
      "Introduced the use of sines and cotangents in calculations.",
      "Authored 'Kitāb az-Zīj' (Book of Astronomical Tables), highly influential in Europe.",
    ],
    colors: {
      bg: "bg-qnekt-red/5",
      text: "text-qnekt-red",
      border: "border-qnekt-red",
    },
  },
  {
    name: "Al-Farabi (Alpharabius)",
    period: "c. 872 – c. 950",
    imageUrl: "/al-farabi-portrait.png",
    bio: "A renowned philosopher, logician, and musician, known as 'The Second Teacher' after Aristotle. He sought to synthesize philosophy with Islamic thought.",
    achievements: [
      "Wrote extensively on logic, metaphysics, ethics, and political philosophy.",
      "Authored 'The Virtuous City' (Al-Madina al-Fadila), a key work in political philosophy.",
      "Made significant contributions to music theory in 'Kitab al-Musiqa al-Kabir' (Great Book of Music).",
      "Distinguished between Aristotelian logic and Stoic logic.",
    ],
    colors: {
      bg: "bg-qnekt-green/5",
      text: "text-qnekt-green",
      border: "border-qnekt-green",
    },
  },
  {
    name: "Omar Khayyam",
    period: "1048 – 1131",
    imageUrl: "/omar-khayyam-portrait.png",
    bio: "A Persian polymath: mathematician, astronomer, philosopher, and poet, famous for his 'Rubaiyat'.",
    achievements: [
      "Wrote 'Treatise on Demonstration of Problems of Algebra', including geometric solutions for cubic equations.",
      "Contributed to the Jalali calendar, a highly accurate solar calendar.",
      "Made significant astronomical observations and reformed the Persian calendar.",
      "His quatrains (Rubaiyat) are celebrated worldwide for their philosophical depth.",
    ],
    colors: {
      bg: "bg-qnekt-black/5",
      text: "text-qnekt-black",
      border: "border-qnekt-black",
    },
  },
  {
    name: "Ibn Rushd (Averroes)",
    period: "1126 – 1198",
    imageUrl: "/ibn-rushd-portrait.png",
    bio: "An Andalusian philosopher and thinker who wrote on logic, Aristotelian philosophy, Islamic theology, law, medicine, astronomy, and physics.",
    achievements: [
      "Authored extensive commentaries on Aristotle's works, profoundly influencing Western European thought.",
      "Wrote 'The Incoherence of the Incoherence,' defending Aristotelian philosophy.",
      "Served as a judge and physician in Seville and Cordoba.",
      "Contributed to medical knowledge with his work 'Colliget' (Kulliyat).",
    ],
    colors: {
      bg: "bg-qnekt-red/5",
      text: "text-qnekt-red",
      border: "border-qnekt-red",
    },
  },
  {
    name: "Nasir al-Din al-Tusi",
    period: "1201 – 1274",
    imageUrl: "/nasir-al-din-al-tusi.png",
    bio: "A Persian polymath, architect, philosopher, physician, scientist, and theologian. One of the greatest scientists of medieval Islam.",
    achievements: [
      "Developed the Tusi couple, a geometrical device significant in non-Ptolemaic astronomy.",
      "Made major contributions to trigonometry, particularly spherical trigonometry.",
      "Established and directed the Maragheh observatory, a leading astronomical research center.",
      "Authored 'Zij-i Ilkhani' (Ilkhanic Tables), an influential astronomical handbook.",
    ],
    colors: {
      bg: "bg-qnekt-green/5",
      text: "text-qnekt-green",
      border: "border-qnekt-green",
    },
  },
  {
    name: "Ibn Khaldun",
    period: "1332 – 1406",
    imageUrl: "/animated-ibn-khaldun.png",
    bio: "An Arab sociologist, philosopher, and historian. Widely acknowledged as a founder of modern historiography, sociology, economics, and demography.",
    achievements: [
      "Authored 'Muqaddimah' (Prolegomena), a groundbreaking work on social science and historiography.",
      "Developed the concept of 'Asabiyyah' (social cohesion or group solidarity).",
      "Provided profound insights into the rise and fall of dynasties and civilizations.",
      "Served in various governmental and judicial roles across North Africa and the Middle East.",
    ],
    colors: {
      bg: "bg-qnekt-black/5",
      text: "text-qnekt-black",
      border: "border-qnekt-black",
    },
  },
  {
    name: "Al-Kindi (Alkindus)",
    period: "c. 801 – c. 873",
    imageUrl: "/animated-al-kindi.png",
    bio: "An Arab Muslim philosopher, polymath, mathematician, physician, and musician. Known as 'the Philosopher of the Arabs'.",
    achievements: [
      "Introduced and popularized Greek philosophy in the Muslim world.",
      "Wrote extensively on metaphysics, ethics, logic, psychology, medicine, mathematics, astronomy, optics, and music.",
      "Pioneered cryptanalysis and frequency analysis, crucial for code-breaking.",
      "Contributed significantly to the development of musical theory in the Arab world.",
    ],
    colors: {
      bg: "bg-qnekt-red/5",
      text: "text-qnekt-red",
      border: "border-qnekt-red",
    },
  },
  {
    name: "Thabit ibn Qurra (Thebit)",
    period: "c. 836 – 901",
    imageUrl: "/animated-thabit-ibn-qurra.png",
    bio: "A Sabian mathematician, physician, astronomer, and translator who lived in Baghdad. Known for his work in algebra, geometry, and astronomy.",
    achievements: [
      "Translated numerous important Greek scientific and mathematical works into Arabic.",
      "Discovered an equation for determining amicable numbers and contributed to number theory.",
      "Made significant contributions to the foundations of geometry and mechanics.",
      "Proposed a theory of trepidation for the equinoxes in astronomy.",
    ],
    colors: {
      bg: "bg-qnekt-green/5",
      text: "text-qnekt-green",
      border: "border-qnekt-green",
    },
  },
  {
    name: "Mariam al-Asturlabi (Al-Ijliya)",
    period: "10th century",
    imageUrl: "/animated-mariam-al-asturlabi.png",
    bio: "An Arab Muslim woman from Aleppo who was a skilled maker of astrolabes, complex astronomical instruments.",
    achievements: [
      "Designed and constructed astrolabes, which were vital for navigation, timekeeping, and astronomical calculations.",
      "Worked in the court of Sayf al-Dawla in Aleppo, a center of learning.",
      "Her work highlights female participation in scientific and technical fields during the Islamic Golden Age.",
      "Contributed to the advancement of precision instrument making.",
    ],
    colors: {
      bg: "bg-qnekt-black/5",
      text: "text-qnekt-black",
      border: "border-qnekt-black",
    },
  },
  {
    name: "Ibn al-Nafis",
    period: "1213 – 1288",
    imageUrl: "/animated-ibn-al-nafis.png",
    bio: "An Arab physician from Damascus, most famous for being the first to describe the pulmonary circulation of blood.",
    achievements: [
      "Provided the first accurate description of pulmonary circulation, centuries before European scholars.",
      "Authored 'The Comprehensive Book on Medicine' (Al-Shamil fi al-Tibb), a vast medical encyclopedia.",
      "Wrote critical commentaries on the works of Hippocrates, Avicenna, and Galen.",
      "Made significant contributions to physiology, anatomy, and ophthalmology.",
    ],
    colors: {
      bg: "bg-qnekt-red/5",
      text: "text-qnekt-red",
      border: "border-qnekt-red",
    },
  },
]

export default function MuslimScientistsPage() {
  return (
    <div className="container py-10">
      <div className="text-center mb-12">
        <ColoredHeading element="h1" className="text-4xl font-bold tracking-tight">
          Pioneers of Knowledge: Great Muslim Scientists
        </ColoredHeading>
        <p className="mt-4 text-xl text-qnekt-black max-w-3xl mx-auto">
          Discover the profound contributions of Muslim scholars to science, mathematics, medicine, and more, shaping
          the course of human civilization.
        </p>
        <div className="gradient-line w-32 mx-auto mt-6"></div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {scientists.map((scientist) => (
          <Card
            key={scientist.name}
            className={`overflow-hidden gradient-border-animated flex flex-col ${scientist.colors.bg}`}
          >
            <CardHeader className="items-center text-center">
              <div className={`relative w-40 h-40 rounded-full overflow-hidden border-4 ${scientist.colors.border}`}>
                <Image
                  src={scientist.imageUrl || "/placeholder.svg"}
                  alt={`Portrait of ${scientist.name}`}
                  fill
                  className="object-cover"
                />
              </div>
              <CardTitle className={`mt-4 text-2xl font-bold ${scientist.colors.text}`}>{scientist.name}</CardTitle>
              <CardDescription className="text-sm text-qnekt-black font-semibold">{scientist.period}</CardDescription>
            </CardHeader>
            <CardContent className="flex-grow">
              <p className="text-sm text-qnekt-black mb-4 text-center">{scientist.bio}</p>
              <div className={`gradient-line w-full my-3 ${scientist.colors.border}`}></div>
              <h4 className={`font-semibold mb-2 ${scientist.colors.text}`}>Key Achievements:</h4>
              <ul className="space-y-1">
                {scientist.achievements.map((achievement, index) => (
                  <li key={index} className="flex items-start text-xs text-qnekt-black">
                    <CheckCircle className={`h-4 w-4 mr-2 flex-shrink-0 ${scientist.colors.text}`} />
                    <span>{achievement}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/enhanced-storage.ts" isEdit="true" isMerged="true"
// Enhanced Storage System for Qnekt Educational Platform
// Provides comprehensive data management for materials, subjects, users, and announcements

export interface EnhancedLearningMaterial {
  id: string
  title: string
  subject: string
  topic: string
  type: "video" | "pdf" | "infographic" | "quiz" | "interactive"
  difficulty: "beginner" | "intermediate" | "advanced"
  duration: number // in minutes
  description: string
  content: string
  quranicConnection: {
    verse: string
    reference: string
    explanation: string
  }
  tags: string[]
  createdAt: Date
  updatedAt: Date
  createdBy: string
  isPublished: boolean
  viewCount: number
  rating: number
}

export interface EnhancedSubject {
  id: string
  name: string
  description: string
  icon: string
  color: string
  totalMaterials: number
  topics: string[]
  createdAt: Date
  isActive: boolean
}

export interface EnhancedUser {
  id: string
  name: string
  email: string
  role: "student" | "educator" | "admin"
  avatar?: string
  bio?: string
  subjects: string[]
  joinedAt: Date
  lastActive: Date
  isVerified: boolean
  stats: {
    materialsCreated: number
    materialsCompleted: number
    totalViewTime: number
  }
}

export interface EnhancedAnnouncement {
  id: string
  title: string
  content: string
  type: "info" | "warning" | "success" | "error"
  targetAudience: "all" | "students" | "educators" | "admins"
  isPublished: boolean
  createdAt: Date
  createdBy: string
  expiresAt?: Date
}

// Sample data for development and testing
const sampleMaterials: EnhancedLearningMaterial[] = [
  {
    id: "1",
    title: "Human Anatomy: The Miracle of Creation",
    subject: "biology",
    topic: "human-anatomy",
    type: "video",
    difficulty: "intermediate",
    duration: 45,
    description:
      "Explore the intricate design of the human body through the lens of Islamic teachings and modern science.",
    content: "Detailed exploration of human anatomy with Quranic references...",
    quranicConnection: {
      verse: "وَلَقَدْ خَلَقْنَا الْإِنسَانَ فِي أَحْسَنِ تَقْوِيمٍ",
      reference: "At-Tin 95:4",
      explanation: "Allah created humans in the best form, highlighting the perfect design of human anatomy.",
    },
    tags: ["anatomy", "creation", "human-body", "islamic-science"],
    createdAt: new Date("2024-01-15"),
    updatedAt: new Date("2024-01-20"),
    createdBy: "educator-1",
    isPublished: true,
    viewCount: 1250,
    rating: 4.8,
  },
  {
    id: "2",
    title: "Plant Biology: Signs in Nature",
    subject: "biology",
    topic: "plant-biology",
    type: "interactive",
    difficulty: "beginner",
    duration: 30,
    description: "Discover how plants function and their role in Allah's creation through interactive lessons.",
    content: "Interactive exploration of plant biology with Quranic insights...",
    quranicConnection: {
      verse: "وَهُوَ الَّذِي أَنزَلَ مِنَ السَّمَاءِ مَاءً فَأَخْرَجْنَا بِهِ نَبَاتَ كُلِّ شَيْءٍ",
      reference: "Al-An'am 6:99",
      explanation:
        "Allah sends down water from the sky to bring forth vegetation of every kind, showing His power in plant growth.",
    },
    tags: ["plants", "photosynthesis", "nature", "creation"],
    createdAt: new Date("2024-01-10"),
    updatedAt: new Date("2024-01-15"),
    createdBy: "educator-2",
    isPublished: true,
    viewCount: 890,
    rating: 4.6,
  },
  {
    id: "3",
    title: "Life Cycles: The Wisdom of Renewal",
    subject: "biology",
    topic: "life-cycles",
    type: "pdf",
    difficulty: "intermediate",
    duration: 25,
    description: "Study the fascinating cycles of life and how they reflect divine wisdom.",
    content: "Comprehensive study of life cycles with Islamic perspectives...",
    quranicConnection: {
      verse: "وَاللَّهُ أَنبَتَكُم مِّنَ الْأَرْضِ نَبَاتًا ثُمَّ يُعِيدُكُمْ فِيهَا وَيُخْرِجُكُمْ إِخْرَاجًا",
      reference: "Nuh 71:17-18",
      explanation:
        "Allah grows you from the earth like plants, then returns you to it, and will bring you forth again, showing the cycle of life and death.",
    },
    tags: ["life-cycles", "reproduction", "growth", "development"],
    createdAt: new Date("2024-01-05"),
    updatedAt: new Date("2024-01-10"),
    createdBy: "educator-1",
    isPublished: true,
    viewCount: 675,
    rating: 4.7,
  },
]

const sampleSubjects: EnhancedSubject[] = [
  {
    id: "biology",
    name: "Biology",
    description: "Study of life and living organisms through Islamic perspective",
    icon: "🧬",
    color: "#10B981",
    totalMaterials: 45,
    topics: ["human-anatomy", "plant-biology", "life-cycles", "genetics", "ecology"],
    createdAt: new Date("2024-01-01"),
    isActive: true,
  },
  {
    id: "chemistry",
    name: "Chemistry",
    description: "Understanding matter and its properties in Allah's creation",
    icon: "⚗️",
    color: "#EF4444",
    totalMaterials: 38,
    topics: ["atomic-structure", "periodic-table", "chemical-reactions", "organic-chemistry"],
    createdAt: new Date("2024-01-01"),
    isActive: true,
  },
  {
    id: "physics",
    name: "Physics",
    description: "Exploring the fundamental laws governing the universe",
    icon: "⚛️",
    color: "#3B82F6",
    totalMaterials: 42,
    topics: ["motion-forces", "light-optics", "energy-work", "waves", "electricity"],
    createdAt: new Date("2024-01-01"),
    isActive: true,
  },
  {
    id: "geography",
    name: "Geography",
    description: "Understanding Earth's features and Allah's signs in nature",
    icon: "🌍",
    color: "#8B5CF6",
    totalMaterials: 35,
    topics: ["landforms", "climate", "water-bodies", "ecosystems", "natural-resources"],
    createdAt: new Date("2024-01-01"),
    isActive: true,
  },
  {
    id: "quran",
    name: "Quranic Studies",
    description: "Deep study of the Quran and its scientific insights",
    icon: "📖",
    color: "#F59E0B",
    totalMaterials: 28,
    topics: ["creation", "human-development", "natural-phenomena", "scientific-miracles"],
    createdAt: new Date("2024-01-01"),
    isActive: true,
  },
]

// Storage functions
let materials: EnhancedLearningMaterial[] = [...sampleMaterials]
let subjects: EnhancedSubject[] = [...sampleSubjects]
let users: EnhancedUser[] = []
let announcements: EnhancedAnnouncement[] = []

// Material Management Functions
export const getAllMaterials = (): EnhancedLearningMaterial[] => {
  return materials.filter((material) => material.isPublished)
}

export const getMaterialById = (id: string): EnhancedLearningMaterial | undefined => {
  return materials.find((material) => material.id === id)
}

export const getMaterialsBySubject = (subject: string): EnhancedLearningMaterial[] => {
  return materials.filter((material) => material.subject === subject && material.isPublished)
}

export const getMaterialsByTopic = (subject: string, topic: string): EnhancedLearningMaterial[] => {
  return materials.filter(
    (material) => material.subject === subject && material.topic === topic && material.isPublished,
  )
}

export const addMaterial = (
  material: Omit<EnhancedLearningMaterial, "id" | "createdAt" | "updatedAt" | "viewCount" | "rating">,
): EnhancedLearningMaterial => {
  const newMaterial: EnhancedLearningMaterial = {
    ...material,
    id: Date.now().toString(),
    createdAt: new Date(),
    updatedAt: new Date(),
    viewCount: 0,
    rating: 0,
  }
  materials.push(newMaterial)
  return newMaterial
}

export const updateMaterial = (
  id: string,
  updates: Partial<EnhancedLearningMaterial>,
): EnhancedLearningMaterial | null => {
  const index = materials.findIndex((material) => material.id === id)
  if (index === -1) return null

materials[index] = {
    ...materials[index],
    ...updates,
    updatedAt: new Date(),
  }
  return materials[index]
}

export const deleteMaterial = (id: string): boolean => {
  const index = materials.findIndex((material) => material.id === id)
  if (index === -1) return false

materials.splice(index, 1)
  return true
}

export const searchMaterials = (query: string): EnhancedLearningMaterial[] => {
  const lowercaseQuery = query.toLowerCase()
  return materials.filter(
    (material) =>
      material.isPublished &&
      (material.title.toLowerCase().includes(lowercaseQuery) ||
        material.description.toLowerCase().includes(lowercaseQuery) ||
        material.tags.some((tag) => tag.toLowerCase().includes(lowercaseQuery))),
  )
}

// Subject Management Functions
export const getAllSubjects = (): EnhancedSubject[] => {
  return subjects.filter((subject) => subject.isActive)
}

export const getSubjectById = (id: string): EnhancedSubject | undefined => {
  return subjects.find((subject) => subject.id === id)
}

export const addSubject = (subject: Omit<EnhancedSubject, "id" | "createdAt" | "totalMaterials">): EnhancedSubject => {
  const newSubject: EnhancedSubject = {
    ...subject,
    id: Date.now().toString(),
    createdAt: new Date(),
    totalMaterials: 0,
  }
  subjects.push(newSubject)
  return newSubject
}

export const updateSubject = (id: string, updates: Partial<EnhancedSubject>): EnhancedSubject | null => {
  const index = subjects.findIndex((subject) => subject.id === id)
  if (index === -1) return null

subjects[index] = { ...subjects[index], ...updates }
  return subjects[index]
}

// User Management Functions
export const getAllUsers = (): EnhancedUser[] => {
  return users
}

export const getUserById = (id: string): EnhancedUser | undefined => {
  return users.find((user) => user.id === id)
}

export const addUser = (user: Omit<EnhancedUser, "id" | "joinedAt" | "lastActive" | "stats">): EnhancedUser => {
  const newUser: EnhancedUser = {
    ...user,
    id: Date.now().toString(),
    joinedAt: new Date(),
    lastActive: new Date(),
    stats: {
      materialsCreated: 0,
      materialsCompleted: 0,
      totalViewTime: 0,
    },
  }
  users.push(newUser)
  return newUser
}

export const updateUser = (id: string, updates: Partial<EnhancedUser>): EnhancedUser | null => {
  const index = users.findIndex((user) => user.id === id)
  if (index === -1) return null

users[index] = {
    ...users[index],
    ...updates,
    lastActive: new Date(),
  }
  return users[index]
}

export const deleteUser = (id: string): boolean => {
  const index = users.findIndex((user) => user.id === id)
  if (index === -1) return false

users.splice(index, 1)
  return true
}

// Announcement Management Functions
export const getAllAnnouncements = (): EnhancedAnnouncement[] => {
  return announcements.filter(
    (announcement) => announcement.isPublished && (!announcement.expiresAt || announcement.expiresAt > new Date()),
  )
}

export const getAnnouncementById = (id: string): EnhancedAnnouncement | undefined => {
  return announcements.find((announcement) => announcement.id === id)
}

export const addAnnouncement = (announcement: Omit<EnhancedAnnouncement, "id" | "createdAt">): EnhancedAnnouncement => {
  const newAnnouncement: EnhancedAnnouncement = {
    ...announcement,
    id: Date.now().toString(),
    createdAt: new Date(),
  }
  announcements.push(newAnnouncement)
  return newAnnouncement
}

export const updateAnnouncement = (id: string, updates: Partial<EnhancedAnnouncement>): EnhancedAnnouncement | null => {
  const index = announcements.findIndex((announcement) => announcement.id === id)
  if (index === -1) return null

announcements[index] = { ...announcements[index], ...updates }
  return announcements[index]
}

export const deleteAnnouncement = (id: string): boolean => {
  const index = announcements.findIndex((announcement) => announcement.id === id)
  if (index === -1) return false

announcements.splice(index, 1)
  return true
}

// Statistics Functions
export const getStatistics = () => {
  return {
    totalMaterials: materials.filter((m) => m.isPublished).length,
    totalSubjects: subjects.filter((s) => s.isActive).length,
    totalUsers: users.length,
    totalViews: materials.reduce((sum, material) => sum + material.viewCount, 0),
    averageRating: materials.reduce((sum, material) => sum + material.rating, 0) / materials.length || 0,
    materialsBySubject: subjects.map((subject) => ({
      subject: subject.name,
      count: materials.filter((m) => m.subject === subject.id && m.isPublished).length,
    })),
    usersByRole: {
      students: users.filter((u) => u.role === "student").length,
      educators: users.filter((u) => u.role === "educator").length,
      admins: users.filter((u) => u.role === "admin").length,
    },
  }
}

// Enhanced Storage Object (for backward compatibility)
export const EnhancedStorage = {
  // Material functions
  getAllMaterials,
  getMaterialById,
  getMaterialsBySubject,
  getMaterialsByTopic,
  addMaterial,
  updateMaterial,
  deleteMaterial,
  searchMaterials,

// Subject functions
  getAllSubjects,
  getSubjectById,
  addSubject,
  updateSubject,

// User functions
  getAllUsers,
  getUserById,
  addUser,
  updateUser,
  deleteUser,

// Announcement functions
  getAllAnnouncements,
  getAnnouncementById,
  addAnnouncement,
  updateAnnouncement,
  deleteAnnouncement,

// Statistics
  getStatistics,
}

// Initialize sample data
export const initializeSampleData = () => {
  materials = [...sampleMaterials]
  subjects = [...sampleSubjects]
  users = []
  announcements = []
}
[V0_FILE]typescriptreact:file="components/colored-heading.tsx" isEdit="true" isMerged="true"
"use client"

import type { ReactNode } from "react"
import { cn } from "@/lib/utils"

interface ColoredHeadingProps {
  element?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
  children: ReactNode
  className?: string
}

export function ColoredHeading({ element: Element = "h2", children, className }: ColoredHeadingProps) {
  return (
    <Element
      className={cn(
        "bg-gradient-to-r from-qnekt-green via-qnekt-black to-qnekt-red bg-clip-text text-transparent font-bold",
        className,
      )}
    >
      {children}
    </Element>
  )
}
[V0_FILE]typescriptreact:file="app/join/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Textarea } from "@/components/ui/textarea"
import { ColoredHeading } from "@/components/colored-heading"
import { GraduationCap, Users, BookOpen, CheckCircle } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"

interface StudentFormData {
  firstName: string
  lastName: string
  email: string
  password: string
  confirmPassword: string
  dateOfBirth: string
  grade: string
  school: string
  parentName: string
  parentEmail: string
  parentPhone: string
  subjects: string[]
  learningGoals: string
  howDidYouHear: string
  agreeToTerms: boolean
  agreeToNewsletter: boolean
}

export default function JoinPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [formData, setFormData] = useState<StudentFormData>({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    confirmPassword: "",
    dateOfBirth: "",
    grade: "",
    school: "",
    parentName: "",
    parentEmail: "",
    parentPhone: "",
    subjects: [],
    learningGoals: "",
    howDidYouHear: "",
    agreeToTerms: false,
    agreeToNewsletter: false,
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [errors, setErrors] = useState<Partial<StudentFormData>>({})

const handleInputChange = (field: keyof StudentFormData, value: string | boolean | string[]) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }))

// Clear error when user starts typing
    if (errors[field]) {
      setErrors((prev) => ({
        ...prev,
        [field]: undefined,
      }))
    }
  }

const handleSubjectChange = (subject: string, checked: boolean) => {
    const updatedSubjects = checked ? [...formData.subjects, subject] : formData.subjects.filter((s) => s !== subject)

handleInputChange("subjects", updatedSubjects)
  }

const validateForm = (): boolean => {
    const newErrors: Partial<StudentFormData> = {}

// Required field validation
    if (!formData.firstName.trim()) newErrors.firstName = "First name is required"
    if (!formData.lastName.trim()) newErrors.lastName = "Last name is required"
    if (!formData.email.trim()) newErrors.email = "Email is required"
    if (!formData.password) newErrors.password = "Password is required"
    if (!formData.confirmPassword) newErrors.confirmPassword = "Please confirm your password"
    if (!formData.dateOfBirth) newErrors.dateOfBirth = "Date of birth is required"
    if (!formData.grade) newErrors.grade = "Grade level is required"
    if (!formData.parentName.trim()) newErrors.parentName = "Parent/Guardian name is required"
    if (!formData.parentEmail.trim()) newErrors.parentEmail = "Parent/Guardian email is required"
    if (!formData.agreeToTerms) newErrors.agreeToTerms = "You must agree to the terms and conditions"

// Email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (formData.email && !emailRegex.test(formData.email)) {
      newErrors.email = "Please enter a valid email address"
    }
    if (formData.parentEmail && !emailRegex.test(formData.parentEmail)) {
      newErrors.parentEmail = "Please enter a valid parent email address"
    }

// Password validation
    if (formData.password && formData.password.length < 8) {
      newErrors.password = "Password must be at least 8 characters long"
    }
    if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Passwords do not match"
    }

// Subject validation
    if (formData.subjects.length === 0) {
      newErrors.subjects = "Please select at least one subject"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

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

if (!validateForm()) {
      toast({
        title: "Form Validation Error",
        description: "Please correct the errors in the form before submitting.",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000))

toast({
        title: "Registration Successful!",
        description: "Welcome to Qnekt! Please check your email for verification instructions.",
      })

// Redirect to dashboard or login
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Registration Failed",
        description: "There was an error creating your account. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const subjects = [
    { id: "biology", name: "Biology", icon: "🧬" },
    { id: "chemistry", name: "Chemistry", icon: "⚗️" },
    { id: "physics", name: "Physics", icon: "⚛️" },
    { id: "geography", name: "Geography", icon: "🌍" },
    { id: "quran", name: "Quranic Studies", icon: "📖" },
  ]

const grades = [
    "Grade 6",
    "Grade 7",
    "Grade 8",
    "Grade 9",
    "Grade 10",
    "Grade 11",
    "Grade 12",
    "University/College",
    "Adult Learner",
  ]

const hearAboutOptions = [
    "Search Engine (Google, Bing, etc.)",
    "Social Media (Facebook, Instagram, Twitter)",
    "Friend or Family Recommendation",
    "Educational Website or Blog",
    "Islamic Community or Mosque",
    "Teacher or School Recommendation",
    "Online Advertisement",
    "Other",
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-qnekt-green/5 via-white to-qnekt-red/5 py-12">
      <div className="container max-w-4xl mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-12">
          <ColoredHeading element="h1" className="text-4xl md:text-5xl font-bold mb-4">
            Join Qnekt as a Student
          </ColoredHeading>
          <p className="text-lg text-qnekt-black/70 max-w-2xl mx-auto">
            Begin your journey of learning science through the beautiful lens of Islamic teachings. Create your account
            to access our comprehensive educational platform.
          </p>
        </div>

{/* Benefits Cards */}
        <div className="grid md:grid-cols-3 gap-6 mb-12">
          <Card className="text-center hover:shadow-lg transition-shadow">
            <CardHeader>
              <GraduationCap className="h-12 w-12 text-qnekt-green mx-auto mb-4" />
              <CardTitle className="text-qnekt-black">Quality Education</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-qnekt-black/70">
                Access high-quality educational content that bridges modern science with Islamic wisdom.
              </p>
            </CardContent>
          </Card>

<Card className="text-center hover:shadow-lg transition-shadow">
            <CardHeader>
              <Users className="h-12 w-12 text-qnekt-green mx-auto mb-4" />
              <CardTitle className="text-qnekt-black">Community Learning</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-qnekt-black/70">
                Join a community of like-minded students and educators committed to holistic learning.
              </p>
            </CardContent>
          </Card>

<Card className="text-center hover:shadow-lg transition-shadow">
            <CardHeader>
              <BookOpen className="h-12 w-12 text-qnekt-green mx-auto mb-4" />
              <CardTitle className="text-qnekt-black">Islamic Integration</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-qnekt-black/70">
                Learn how scientific discoveries align with Quranic teachings and Islamic principles.
              </p>
            </CardContent>
          </Card>
        </div>

{/* Registration Form */}
        <Card className="shadow-xl">
          <CardHeader>
            <CardTitle className="text-2xl text-qnekt-black">Student Registration</CardTitle>
            <CardDescription>Please fill out all required information to create your student account.</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Personal Information */}
              <div className="space-y-4">
                <h3 className="text-lg font-semibold text-qnekt-black border-b border-qnekt-green/20 pb-2">
                  Personal Information
                </h3>

<div className="grid md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="firstName">First Name *</Label>
                    <Input
                      id="firstName"
                      type="text"
                      value={formData.firstName}
                      onChange={(e) => handleInputChange("firstName", e.target.value)}
                      className={errors.firstName ? "border-red-500" : ""}
                      placeholder="Enter your first name"
                    />
                    {errors.firstName && <p className="text-sm text-red-500">{errors.firstName}</p>}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="lastName">Last Name *</Label>
                    <Input
                      id="lastName"
                      type="text"
                      value={formData.lastName}
                      onChange={(e) => handleInputChange("lastName", e.target.value)}
                      className={errors.lastName ? "border-red-500" : ""}
                      placeholder="Enter your last name"
                    />
                    {errors.lastName && <p className="text-sm text-red-500">{errors.lastName}</p>}
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="email">Email Address *</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => handleInputChange("email", e.target.value)}
                    className={errors.email ? "border-red-500" : ""}
                    placeholder="Enter your email address"
                  />
                  {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
                </div>

<div className="grid md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="password">Password *</Label>
                    <Input
                      id="password"
                      type="password"
                      value={formData.password}
                      onChange={(e) => handleInputChange("password", e.target.value)}
                      className={errors.password ? "border-red-500" : ""}
                      placeholder="Create a password (min. 8 characters)"
                    />
                    {errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="confirmPassword">Confirm Password *</Label>
                    <Input
                      id="confirmPassword"
                      type="password"
                      value={formData.confirmPassword}
                      onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
                      className={errors.confirmPassword ? "border-red-500" : ""}
                      placeholder="Confirm your password"
                    />
                    {errors.confirmPassword && <p className="text-sm text-red-500">{errors.confirmPassword}</p>}
                  </div>
                </div>

<div className="grid md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="dateOfBirth">Date of Birth *</Label>
                    <Input
                      id="dateOfBirth"
                      type="date"
                      value={formData.dateOfBirth}
                      onChange={(e) => handleInputChange("dateOfBirth", e.target.value)}
                      className={errors.dateOfBirth ? "border-red-500" : ""}
                    />
                    {errors.dateOfBirth && <p className="text-sm text-red-500">{errors.dateOfBirth}</p>}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="grade">Grade Level *</Label>
                    <Select value={formData.grade} onValueChange={(value) => handleInputChange("grade", value)}>
                      <SelectTrigger className={errors.grade ? "border-red-500" : ""}>
                        <SelectValue placeholder="Select your grade level" />
                      </SelectTrigger>
                      <SelectContent>
                        {grades.map((grade) => (
                          <SelectItem key={grade} value={grade}>
                            {grade}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {errors.grade && <p className="text-sm text-red-500">{errors.grade}</p>}
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="school">School/Institution (Optional)</Label>
                  <Input
                    id="school"
                    type="text"
                    value={formData.school}
                    onChange={(e) => handleInputChange("school", e.target.value)}
                    placeholder="Enter your school or institution name"
                  />
                </div>
              </div>

{/* Parent/Guardian Information */}
              <div className="space-y-4">
                <h3 className="text-lg font-semibold text-qnekt-black border-b border-qnekt-green/20 pb-2">
                  Parent/Guardian Information
                </h3>

<div className="space-y-2">
                  <Label htmlFor="parentName">Parent/Guardian Name *</Label>
                  <Input
                    id="parentName"
                    type="text"
                    value={formData.parentName}
                    onChange={(e) => handleInputChange("parentName", e.target.value)}
                    className={errors.parentName ? "border-red-500" : ""}
                    placeholder="Enter parent/guardian full name"
                  />
                  {errors.parentName && <p className="text-sm text-red-500">{errors.parentName}</p>}
                </div>

<div className="grid md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="parentEmail">Parent/Guardian Email *</Label>
                    <Input
                      id="parentEmail"
                      type="email"
                      value={formData.parentEmail}
                      onChange={(e) => handleInputChange("parentEmail", e.target.value)}
                      className={errors.parentEmail ? "border-red-500" : ""}
                      placeholder="Enter parent/guardian email"
                    />
                    {errors.parentEmail && <p className="text-sm text-red-500">{errors.parentEmail}</p>}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="parentPhone">Parent/Guardian Phone (Optional)</Label>
                    <Input
                      id="parentPhone"
                      type="tel"
                      value={formData.parentPhone}
                      onChange={(e) => handleInputChange("parentPhone", e.target.value)}
                      placeholder="Enter phone number"
                    />
                  </div>
                </div>
              </div>

{/* Learning Preferences */}
              <div className="space-y-4">
                <h3 className="text-lg font-semibold text-qnekt-black border-b border-qnekt-green/20 pb-2">
                  Learning Preferences
                </h3>

<div className="space-y-3">
                  <Label>Subjects of Interest * (Select at least one)</Label>
                  <div className="grid md:grid-cols-2 gap-3">
                    {subjects.map((subject) => (
                      <div key={subject.id} className="flex items-center space-x-2">
                        <Checkbox
                          id={subject.id}
                          checked={formData.subjects.includes(subject.id)}
                          onCheckedChange={(checked) => handleSubjectChange(subject.id, checked as boolean)}
                        />
                        <Label htmlFor={subject.id} className="flex items-center cursor-pointer">
                          <span className="mr-2">{subject.icon}</span>
                          {subject.name}
                        </Label>
                      </div>
                    ))}
                  </div>
                  {errors.subjects && <p className="text-sm text-red-500">{errors.subjects}</p>}
                </div>

<div className="space-y-2">
                  <Label htmlFor="learningGoals">Learning Goals (Optional)</Label>
                  <Textarea
                    id="learningGoals"
                    value={formData.learningGoals}
                    onChange={(e) => handleInputChange("learningGoals", e.target.value)}
                    placeholder="Tell us about your learning goals and what you hope to achieve with Qnekt..."
                    rows={3}
                  />
                </div>

<div className="space-y-2">
                  <Label>How did you hear about Qnekt? (Optional)</Label>
                  <RadioGroup
                    value={formData.howDidYouHear}
                    onValueChange={(value) => handleInputChange("howDidYouHear", value)}
                  >
                    {hearAboutOptions.map((option) => (
                      <div key={option} className="flex items-center space-x-2">
                        <RadioGroupItem value={option} id={option} />
                        <Label htmlFor={option} className="cursor-pointer">
                          {option}
                        </Label>
                      </div>
                    ))}
                  </RadioGroup>
                </div>
              </div>

{/* Terms and Conditions */}
              <div className="space-y-4">
                <h3 className="text-lg font-semibold text-qnekt-black border-b border-qnekt-green/20 pb-2">
                  Terms and Conditions
                </h3>

<div className="space-y-3">
                  <div className="flex items-start space-x-2">
                    <Checkbox
                      id="agreeToTerms"
                      checked={formData.agreeToTerms}
                      onCheckedChange={(checked) => handleInputChange("agreeToTerms", checked as boolean)}
                      className={errors.agreeToTerms ? "border-red-500" : ""}
                    />
                    <Label htmlFor="agreeToTerms" className="text-sm cursor-pointer">
                      I agree to the{" "}
                      <a
                        href="/terms-of-service"
                        className="text-qnekt-green hover:underline"
                        target="_blank"
                        rel="noreferrer"
                      >
                        Terms of Service
                      </a>{" "}
                      and{" "}
                      <a
                        href="/privacy-policy"
                        className="text-qnekt-green hover:underline"
                        target="_blank"
                        rel="noreferrer"
                      >
                        Privacy Policy
                      </a>{" "}
                      *
                    </Label>
                  </div>
                  {errors.agreeToTerms && <p className="text-sm text-red-500">{errors.agreeToTerms}</p>}

<div className="flex items-start space-x-2">
                    <Checkbox
                      id="agreeToNewsletter"
                      checked={formData.agreeToNewsletter}
                      onCheckedChange={(checked) => handleInputChange("agreeToNewsletter", checked as boolean)}
                    />
                    <Label htmlFor="agreeToNewsletter" className="text-sm cursor-pointer">
                      I would like to receive educational updates and newsletters from Qnekt (Optional)
                    </Label>
                  </div>
                </div>
              </div>

{/* Submit Button */}
              <div className="pt-6">
                <Button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full bg-qnekt-green hover:bg-qnekt-green/90 text-white py-3 text-lg"
                >
                  {isSubmitting ? (
                    <>
                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
                      Creating Account...
                    </>
                  ) : (
                    <>
                      <CheckCircle className="h-5 w-5 mr-2" />
                      Create Student Account
                    </>
                  )}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>

{/* Additional Information */}
        <div className="text-center mt-8">
          <p className="text-qnekt-black/70">
            Already have an account?{" "}
            <a href="/login" className="text-qnekt-green hover:underline font-semibold">
              Sign in here
            </a>
          </p>
          <p className="text-sm text-qnekt-black/50 mt-2">
            Are you an educator?{" "}
            <a href="/join-as-educator" className="text-qnekt-green hover:underline">
              Apply to join as an educator
            </a>
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Toaster } from "@/components/ui/toaster"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Qnekt - Bridging Scientific Discovery with Quranic Wisdom",
  description:
    "Integrate modern scientific education with Islamic teachings through comprehensive educational content that aligns concepts with verses from the Quran.",
  keywords: "Islamic education, science, Quran, biology, chemistry, physics, geography, Muslim students",
  authors: [{ name: "Qnekt Team" }],
  openGraph: {
    title: "Qnekt - Bridging Scientific Discovery with Quranic Wisdom",
    description:
      "Integrate modern scientific education with Islamic teachings through comprehensive educational content that aligns concepts with verses from the Quran.",
    type: "website",
    locale: "en_US",
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap" rel="stylesheet" />
      </head>
      <body className={inter.className}>
        <Navbar />
        <main>{children}</main>
        <Footer />
        <Toaster />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/learn/[subject]/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { useParams, useRouter } from "next/navigation"
import {
  ArrowLeft,
  ArrowRight,
  BookOpen,
  CheckCircle,
  Clock,
  Target,
  Users,
  Play,
  FileText,
  Brain,
  Heart,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { usePersistentLearningMaterials } from "@/hooks/use-persistent-storage"

interface LearningProgress {
  currentSection: number
  completedSections: number[]
  startedAt: string
  lastAccessedAt: string
}

const sections = [
  { id: 0, title: "Overview", icon: Target },
  { id: 1, title: "Content", icon: BookOpen },
  { id: 2, title: "Quranic Connection", icon: Heart },
  { id: 3, title: "Knowledge Check", icon: Brain },
]

export default function LearnPage() {
  const params = useParams()
  const router = useRouter()
  const subject = params.subject as string
  const materialId = params.id as string

const { materials } = usePersistentLearningMaterials()

const [material, setMaterial] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [currentSection, setCurrentSection] = useState(0)
  const [progress, setProgress] = useState<LearningProgress>({
    currentSection: 0,
    completedSections: [],
    startedAt: new Date().toISOString(),
    lastAccessedAt: new Date().toISOString(),
  })
  const [showCompletionModal, setShowCompletionModal] = useState(false)

// Load material and progress
  useEffect(() => {
    const loadMaterialAndProgress = () => {
      try {
        setLoading(true)

// Find the material
        const foundMaterial = materials.find(
          (m) => m.id === Number.parseInt(materialId) && m.subject.toLowerCase() === subject.toLowerCase(),
        )

if (!foundMaterial) {
          router.push(`/subjects/${subject}`)
          return
        }

setMaterial(foundMaterial)

// Load saved progress
        const savedProgress = localStorage.getItem(`learning_progress_${subject}_${materialId}`)
        if (savedProgress) {
          const parsedProgress = JSON.parse(savedProgress)
          setProgress((prev) => ({
            ...prev,
            ...parsedProgress,
            lastAccessedAt: new Date().toISOString(),
          }))
          setCurrentSection(parsedProgress.currentSection || 0)
        }
      } catch (error) {
        console.error("Error loading material:", error)
        router.push(`/subjects/${subject}`)
      } finally {
        setLoading(false)
      }
    }

if (materials.length > 0) {
      loadMaterialAndProgress()
    }
  }, [materials, subject, materialId, router])

// Save progress function
  const saveProgress = useCallback(
    (newProgress: Partial<LearningProgress>) => {
      try {
        const updatedProgress = {
          ...progress,
          ...newProgress,
          lastAccessedAt: new Date().toISOString(),
        }
        setProgress(updatedProgress)
        localStorage.setItem(`learning_progress_${subject}_${materialId}`, JSON.stringify(updatedProgress))
      } catch (error) {
        console.error("Error saving progress:", error)
      }
    },
    [progress, subject, materialId],
  )

// Navigate to section
  const goToSection = useCallback(
    (sectionIndex: number) => {
      setCurrentSection(sectionIndex)

const newCompletedSections = [...progress.completedSections]
      if (!newCompletedSections.includes(currentSection)) {
        newCompletedSections.push(currentSection)
      }

saveProgress({
        currentSection: sectionIndex,
        completedSections: newCompletedSections,
      })

// Check if all sections are completed
      if (newCompletedSections.length === sections.length && sectionIndex === sections.length - 1) {
        setShowCompletionModal(true)
      }
    },
    [currentSection, progress.completedSections, saveProgress],
  )

// Navigation functions
  const goToPreviousSection = () => {
    if (currentSection > 0) {
      goToSection(currentSection - 1)
    }
  }

const goToNextSection = () => {
    if (currentSection < sections.length - 1) {
      goToSection(currentSection + 1)
    }
  }

if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-qnekt-green mx-auto mb-4"></div>
          <p className="text-qnekt-black">Loading your learning material...</p>
        </div>
      </div>
    )
  }

if (!material) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-qnekt-black mb-4">Material Not Found</h1>
          <p className="text-qnekt-black mb-6">The learning material you're looking for doesn't exist.</p>
          <Button
            onClick={() => router.push(`/subjects/${subject}`)}
            className="bg-qnekt-green hover:bg-qnekt-green/90"
          >
            Back to {subject.charAt(0).toUpperCase() + subject.slice(1)}
          </Button>
        </div>
      </div>
    )
  }

const progressPercentage = (progress.completedSections.length / sections.length) * 100

const renderSection = () => {
    const section = sections[currentSection]

switch (currentSection) {
      case 0: // Overview
        return (
          <div className="space-y-6">
            <div className="text-center mb-8">
              <h1 className="text-3xl font-bold text-qnekt-black mb-4">{material.title}</h1>
              <p className="text-xl text-qnekt-black leading-relaxed">{material.description}</p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card>
                <CardContent className="p-6 text-center">
                  <Target className="h-8 w-8 text-qnekt-green mx-auto mb-4" />
                  <h3 className="font-semibold text-qnekt-black mb-2">Learning Objectives</h3>
                  <ul className="text-sm text-qnekt-black space-y-1">
                    <li>• Understand core concepts</li>
                    <li>• Connect with Quranic wisdom</li>
                    <li>• Apply knowledge practically</li>
                  </ul>
                </CardContent>
              </Card>

<Card>
                <CardContent className="p-6 text-center">
                  <Clock className="h-8 w-8 text-qnekt-red mx-auto mb-4" />
                  <h3 className="font-semibold text-qnekt-black mb-2">Duration</h3>
                  <p className="text-sm text-qnekt-black">Estimated 15-20 minutes</p>
                  <Badge className="mt-2 bg-qnekt-green/10 text-qnekt-green">
                    {material.difficulty || "Intermediate"}
                  </Badge>
                </CardContent>
              </Card>

<Card>
                <CardContent className="p-6 text-center">
                  <Users className="h-8 w-8 text-qnekt-black mx-auto mb-4" />
                  <h3 className="font-semibold text-qnekt-black mb-2">Prerequisites</h3>
                  <p className="text-sm text-qnekt-black">Basic understanding of {subject}</p>
                </CardContent>
              </Card>
            </div>

<div className="bg-gradient-to-r from-qnekt-green/10 to-qnekt-red/10 p-6 rounded-lg">
              <h3 className="font-semibold text-qnekt-black mb-2">What You'll Learn</h3>
              <p className="text-qnekt-black">
                {material.content ||
                  `Explore the fascinating world of ${material.title} through both scientific understanding and Quranic wisdom. This comprehensive lesson will guide you through key concepts while highlighting the beautiful connections between modern science and Islamic teachings.`}
              </p>
            </div>
          </div>
        )

case 1: // Content
        return (
          <div className="space-y-6">
            <div className="text-center mb-8">
              <h2 className="text-2xl font-bold text-qnekt-black mb-4">Main Content</h2>
              <Badge className="bg-qnekt-green/10 text-qnekt-green">{material.type || "Interactive Lesson"}</Badge>
            </div>

{material.type === "video" ? (
              <Card>
                <CardContent className="p-6">
                  <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center mb-4">
                    <div className="text-center">
                      <Play className="h-16 w-16 text-qnekt-green mx-auto mb-4" />
                      <p className="text-qnekt-black">Video: {material.title}</p>
                    </div>
                  </div>
                  <h3 className="font-semibold text-qnekt-black mb-2">Video Content</h3>
                  <p className="text-qnekt-black">
                    {material.content ||
                      `Watch this comprehensive video about ${material.title} to understand the key concepts and their practical applications.`}
                  </p>
                </CardContent>
              </Card>
            ) : material.type === "interactive" ? (
              <Card>
                <CardContent className="p-6">
                  <div className="aspect-video bg-gradient-to-br from-qnekt-green/10 to-qnekt-red/10 rounded-lg flex items-center justify-center mb-4">
                    <div className="text-center">
                      <Target className="h-16 w-16 text-qnekt-green mx-auto mb-4" />
                      <p className="text-qnekt-black">Interactive: {material.title}</p>
                    </div>
                  </div>
                  <h3 className="font-semibold text-qnekt-black mb-2">Interactive Content</h3>
                  <p className="text-qnekt-black">
                    {material.content ||
                      `Engage with this interactive lesson about ${material.title}. Explore 3D models, simulations, and hands-on activities.`}
                  </p>
                </CardContent>
              </Card>
            ) : (
              <Card>
                <CardContent className="p-6">
                  <div className="aspect-video bg-gray-50 rounded-lg flex items-center justify-center mb-4">
                    <div className="text-center">
                      <FileText className="h-16 w-16 text-qnekt-black mx-auto mb-4" />
                      <p className="text-qnekt-black">Reading: {material.title}</p>
                    </div>
                  </div>
                  <h3 className="font-semibold text-qnekt-black mb-2">Study Material</h3>
                  <div className="prose max-w-none text-qnekt-black">
                    <p>
                      {material.content ||
                        `This comprehensive study material covers all aspects of ${material.title}. Take your time to read through and understand each concept thoroughly.`}
                    </p>

<h4 className="text-lg font-semibold mt-6 mb-3">Key Concepts:</h4>
                    <ul className="space-y-2">
                      <li>• Fundamental principles and definitions</li>
                      <li>• Real-world applications and examples</li>
                      <li>• Scientific methodology and evidence</li>
                      <li>• Historical context and discoveries</li>
                    </ul>

<h4 className="text-lg font-semibold mt-6 mb-3">Learning Outcomes:</h4>
                    <p>
                      By the end of this section, you will have a comprehensive understanding of {material.title} and be
                      able to explain its significance in both scientific and Islamic contexts.
                    </p>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        )

case 2: // Quranic Connection
        return (
          <div className="space-y-6">
            <div className="text-center mb-8">
              <h2 className="text-2xl font-bold text-qnekt-black mb-4">Quranic Connection</h2>
              <p className="text-qnekt-black">
                Discover how this scientific concept beautifully aligns with Quranic teachings
              </p>
            </div>

<Card className="bg-gradient-to-r from-qnekt-green/5 to-qnekt-red/5">
              <CardContent className="p-8">
                <div className="text-center mb-6">
                  <BookOpen className="h-12 w-12 text-qnekt-green mx-auto mb-4" />
                  <h3 className="text-xl font-semibold text-qnekt-black mb-4">Quranic Verse</h3>
                </div>

<div className="bg-white p-6 rounded-lg shadow-sm mb-6">
                  <p className="text-2xl font-arabic text-center text-qnekt-black mb-4 leading-relaxed">
                    {material.quranicConnection?.verse || "وَفِي أَنفُسِكُمْ ۚ أَفَلَا تُبْصِرُونَ"}
                  </p>
                  <p className="text-lg italic text-center text-qnekt-black mb-2">
                    "{material.quranicConnection?.translation || "And within yourselves. Then will you not see?"}"
                  </p>
                  <p className="text-center text-qnekt-black font-semibold">
                    - {material.quranicConnection?.reference || "Adh-Dhariyat 51:21"}
                  </p>
                </div>

<div className="space-y-4">
                  <h4 className="text-lg font-semibold text-qnekt-black">Scientific Connection:</h4>
                  <p className="text-qnekt-black leading-relaxed">
                    {material.quranicConnection?.explanation ||
                      `This verse beautifully connects to our study of ${material.title}. The Quran encourages us to observe and reflect upon the signs within ourselves and the natural world around us. Modern scientific understanding of ${material.title} reveals the intricate design and wisdom in Allah's creation, confirming what was revealed over 1400 years ago.`}
                  </p>

<h4 className="text-lg font-semibold text-qnekt-black mt-6">Reflection Points:</h4>
                  <ul className="space-y-2 text-qnekt-black">
                    <li>• How does this scientific knowledge increase your appreciation of Allah's creation?</li>
                    <li>• What aspects of {material.title} demonstrate divine wisdom and design?</li>
                    <li>• How can this knowledge strengthen your faith and understanding?</li>
                  </ul>
                </div>
              </CardContent>
            </Card>
          </div>
        )

case 3: // Knowledge Check
        return (
          <div className="space-y-6">
            <div className="text-center mb-8">
              <h2 className="text-2xl font-bold text-qnekt-black mb-4">Knowledge Check</h2>
              <p className="text-qnekt-black">Test your understanding and reflect on what you've learned</p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center text-qnekt-black">
                    <Brain className="h-5 w-5 mr-2 text-qnekt-green" />
                    Quick Quiz
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="p-4 bg-gray-50 rounded-lg">
                      <p className="font-medium text-qnekt-black mb-3">
                        What is the main concept covered in this lesson about {material.title}?
                      </p>
                      <div className="space-y-2">
                        <label className="flex items-center text-qnekt-black">
                          <input type="radio" name="q1" className="mr-2" />
                          Option A: Basic definition only
                        </label>
                        <label className="flex items-center text-qnekt-black">
                          <input type="radio" name="q1" className="mr-2" />
                          Option B: Comprehensive understanding with Quranic connection
                        </label>
                        <label className="flex items-center text-qnekt-black">
                          <input type="radio" name="q1" className="mr-2" />
                          Option C: Historical overview only
                        </label>
                      </div>
                    </div>

<Button className="w-full bg-qnekt-green hover:bg-qnekt-green/90">Submit Quiz</Button>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="flex items-center text-qnekt-black">
                    <Heart className="h-5 w-5 mr-2 text-qnekt-red" />
                    Reflection
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <p className="text-qnekt-black">
                      Take a moment to reflect on how this lesson has enhanced your understanding:
                    </p>
                    <textarea
                      className="w-full p-3 border rounded-lg resize-none h-32 text-qnekt-black"
                      placeholder="Write your thoughts about how this scientific knowledge connects with your faith and understanding of Allah's creation..."
                    />
                    <Button className="w-full bg-qnekt-red hover:bg-qnekt-red/90">Save Reflection</Button>
                  </div>
                </CardContent>
              </Card>
            </div>

<Card className="bg-gradient-to-r from-qnekt-green/10 to-qnekt-red/10">
              <CardContent className="p-6 text-center">
                <CheckCircle className="h-12 w-12 text-qnekt-green mx-auto mb-4" />
                <h3 className="text-xl font-semibold text-qnekt-black mb-2">Lesson Complete!</h3>
                <p className="text-qnekt-black mb-4">
                  Congratulations on completing this lesson. May Allah bless your pursuit of knowledge.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Button
                    onClick={() => router.push(`/subjects/${subject}`)}
                    className="bg-qnekt-green hover:bg-qnekt-green/90"
                  >
                    Back to {subject.charAt(0).toUpperCase() + subject.slice(1)}
                  </Button>
                  <Button
                    variant="outline"
                    className="border-qnekt-red text-qnekt-red hover:bg-qnekt-red hover:text-white bg-transparent"
                  >
                    Next Lesson
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        )

default:
        return <div>Section not found</div>
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button
                variant="ghost"
                onClick={() => router.push(`/subjects/${subject}`)}
                className="text-qnekt-black hover:bg-gray-100"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to {subject.charAt(0).toUpperCase() + subject.slice(1)}
              </Button>
              <div className="hidden md:block">
                <h1 className="text-xl font-semibold text-qnekt-black">{material.title}</h1>
              </div>
            </div>

<div className="flex items-center space-x-4">
              <div className="text-sm text-qnekt-black">Progress: {Math.round(progressPercentage)}%</div>
              <div className="w-32">
                <Progress value={progressPercentage} className="h-2" />
              </div>
            </div>
          </div>
        </div>
      </div>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* Sidebar Navigation */}
          <div className="lg:col-span-1">
            <Card className="sticky top-8">
              <CardHeader>
                <CardTitle className="text-qnekt-black">Lesson Sections</CardTitle>
              </CardHeader>
              <CardContent>
                <nav className="space-y-2">
                  {sections.map((section, index) => {
                    const Icon = section.icon
                    const isCompleted = progress.completedSections.includes(index)
                    const isCurrent = currentSection === index

return (
                      <button
                        key={section.id}
                        onClick={() => goToSection(index)}
                        className={`w-full flex items-center space-x-3 p-3 rounded-lg text-left transition-colors ${
                          isCurrent
                            ? "bg-qnekt-green text-white"
                            : isCompleted
                              ? "bg-qnekt-green/10 text-qnekt-green"
                              : "hover:bg-gray-100 text-qnekt-black"
                        }`}
                      >
                        <Icon className="h-5 w-5" />
                        <span className="font-medium">{section.title}</span>
                        {isCompleted && <CheckCircle className="h-4 w-4 ml-auto" />}
                      </button>
                    )
                  })}
                </nav>
              </CardContent>
            </Card>
          </div>

{/* Main Content */}
          <div className="lg:col-span-3">
            <Card>
              <CardContent className="p-8">
                {renderSection()}

{/* Navigation Buttons */}
                <div className="flex justify-between mt-8 pt-6 border-t">
                  <Button
                    variant="outline"
                    onClick={goToPreviousSection}
                    disabled={currentSection === 0}
                    className="border-qnekt-black text-qnekt-black hover:bg-qnekt-black hover:text-white bg-transparent"
                  >
                    <ArrowLeft className="h-4 w-4 mr-2" />
                    Previous
                  </Button>

{/* Completion Modal */}
      {showCompletionModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <Card className="max-w-md mx-4">
            <CardContent className="p-8 text-center">
              <CheckCircle className="h-16 w-16 text-qnekt-green mx-auto mb-4" />
              <h2 className="text-2xl font-bold text-qnekt-black mb-4">Lesson Completed!</h2>
              <p className="text-qnekt-black mb-6">
                Excellent work! You have successfully completed this lesson. May Allah bless your pursuit of knowledge
                and grant you success in your studies.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button
                  onClick={() => {
                    setShowCompletionModal(false)
                    router.push(`/subjects/${subject}`)
                  }}
                  className="bg-qnekt-green hover:bg-qnekt-green/90"
                >
                  Back to Subject
                </Button>
                <Button
                  variant="outline"
                  onClick={() => setShowCompletionModal(false)}
                  className="border-qnekt-red text-qnekt-red hover:bg-qnekt-red hover:text-white"
                >
                  Continue Learning
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-persistent-storage.ts" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export interface LearningMaterial {
  id: number
  title: string
  description: string
  subject: string
  type: "video" | "pdf" | "interactive" | "quiz"
  difficulty: "Beginner" | "Intermediate" | "Advanced"
  duration: string
  content: string
  quranicConnection: {
    verse: string
    translation: string
    reference: string
    explanation: string
  }
  createdAt: string
  updatedAt: string
}

export interface User {
  id: number
  name: string
  email: string
  role: "student" | "educator" | "admin"
  subject?: string
  joinedAt: string
  lastActive: string
  status: "active" | "inactive" | "pending"
}

export interface Announcement {
  id: number
  title: string
  content: string
  type: "general" | "urgent" | "update" | "event"
  targetAudience: "all" | "students" | "educators" | "parents"
  createdAt: string
  expiresAt?: string
  isActive: boolean
}

const STORAGE_KEYS = {
  MATERIALS: "qnekt_learning_materials",
  USERS: "qnekt_users",
  ANNOUNCEMENTS: "qnekt_announcements",
}

// Default data
const defaultMaterials: LearningMaterial[] = [
  {
    id: 1,
    title: "Human Anatomy and Physiology",
    description: "Explore the intricate design of the human body as mentioned in the Quran",
    subject: "biology",
    type: "interactive",
    difficulty: "Intermediate",
    duration: "25 minutes",
    content:
      "Discover the amazing complexity of human anatomy and how it reflects divine creation. This lesson covers major body systems and their functions.",
    quranicConnection: {
      verse: "وَلَقَدْ خَلَقْنَا الْإِنسَانَ فِي أَحْسَنِ تَقْوِيمٍ",
      translation: "We have certainly created man in the best of stature.",
      reference: "At-Tin 95:4",
      explanation:
        "This verse highlights the perfect design and proportion of human creation, which modern anatomy confirms through detailed study of body systems.",
    },
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: 2,
    title: "Plant Biology and Photosynthesis",
    description: "Learn about plant life and the miracle of photosynthesis",
    subject: "biology",
    type: "video",
    difficulty: "Beginner",
    duration: "20 minutes",
    content: "Understanding how plants convert sunlight into energy and their role in sustaining life on Earth.",
    quranicConnection: {
      verse: "وَهُوَ الَّذِي أَنزَلَ مِنَ السَّمَاءِ مَاءً فَأَخْرَجْنَا بِهِ نَبَاتَ كُلِّ شَيْءٍ",
      translation:
        "And it is He who sends down rain from the sky, and We produce thereby the vegetation of every kind.",
      reference: "Al-An'am 6:99",
      explanation:
        "This verse describes the divine process of plant growth, which science explains through photosynthesis and cellular biology.",
    },
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: 3,
    title: "Atomic Structure and Elements",
    description: "Discover the building blocks of matter and their divine arrangement",
    subject: "chemistry",
    type: "interactive",
    difficulty: "Intermediate",
    duration: "30 minutes",
    content:
      "Explore atoms, electrons, protons, and neutrons, and how they form the basis of all matter in the universe.",
    quranicConnection: {
      verse: "وَخَلَقَ كُلَّ شَيْءٍ فَقَدَّرَهُ تَقْدِيرًا",
      translation: "And He created each thing and determined it with [precise] determination.",
      reference: "Al-Furqan 25:2",
      explanation:
        "The precise arrangement of subatomic particles demonstrates the divine order and measurement in creation.",
    },
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: 4,
    title: "Motion and Forces in Physics",
    description: "Understanding the laws of motion as signs of divine order",
    subject: "physics",
    type: "interactive",
    difficulty: "Intermediate",
    duration: "35 minutes",
    content: "Learn about Newton's laws of motion and how they govern movement in the universe.",
    quranicConnection: {
      verse: "وَالشَّمْسُ تَجْرِي لِمُسْتَقَرٍّ لَّهَا ۚ ذَٰلِكَ تَقْدِيرُ الْعَزِيزِ الْعَلِيمِ",
      translation:
        "And the sun runs [on course] toward its stopping point. That is the determination of the Exalted in Might, the Knowing.",
      reference: "Ya-Sin 36:38",
      explanation:
        "The precise motion of celestial bodies demonstrates the divine laws that govern all movement in the universe.",
    },
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: 5,
    title: "Earth's Landforms and Geology",
    description: "Explore the formation of mountains, valleys, and geological features",
    subject: "geography",
    type: "video",
    difficulty: "Beginner",
    duration: "25 minutes",
    content:
      "Understanding how Earth's surface features were formed and their importance in maintaining ecological balance.",
    quranicConnection: {
      verse: "وَجَعَلْنَا فِي الْأَرْضِ رَوَاسِيَ أَن تَمِيدَ بِهِمْ",
      translation: "And We placed within the earth firmly set mountains, lest it should shift with them.",
      reference: "Al-Anbiya 21:31",
      explanation:
        "Mountains serve as stabilizers for the Earth's crust, preventing excessive movement and maintaining geological balance.",
    },
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
  {
    id: 6,
    title: "Creation and Cosmology in the Quran",
    description: "Explore Quranic verses about the creation of the universe",
    subject: "quran",
    type: "pdf",
    difficulty: "Advanced",
    duration: "40 minutes",
    content:
      "A comprehensive study of Quranic verses that describe the creation of the heavens and earth, and their scientific implications.",
    quranicConnection: {
      verse: "أَوَلَمْ يَرَ الَّذِينَ كَفَرُوا أَنَّ السَّمَاوَاتِ وَالْأَرْضَ كَانَتَا رَتْقًا فَفَتَقْنَاهُمَا",
      translation:
        "Have those who disbelieved not considered that the heavens and the earth were a joined entity, and We separated them?",
      reference: "Al-Anbiya 21:30",
      explanation:
        "This verse describes the Big Bang theory - the universe beginning as a single point and then expanding, which modern cosmology has confirmed.",
    },
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
]

const defaultUsers: User[] = [
  {
    id: 1,
    name: "Ahmed Hassan",
    email: "ahmed.hassan@example.com",
    role: "student",
    joinedAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
    lastActive: new Date().toISOString(),
    status: "active",
  },
  {
    id: 2,
    name: "Dr. Fatima Al-Zahra",
    email: "fatima.alzahra@example.com",
    role: "educator",
    subject: "biology",
    joinedAt: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000).toISOString(),
    lastActive: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
    status: "active",
  },
  {
    id: 3,
    name: "Omar Ibrahim",
    email: "omar.ibrahim@example.com",
    role: "student",
    joinedAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(),
    lastActive: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
    status: "active",
  },
]

const defaultAnnouncements: Announcement[] = [
  {
    id: 1,
    title: "Welcome to Qnekt Platform",
    content:
      "We're excited to launch our new Islamic educational platform that bridges science and faith. Explore our comprehensive curriculum and start your learning journey today!",
    type: "general",
    targetAudience: "all",
    createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
    isActive: true,
  },
  {
    id: 2,
    title: "New Biology Course Available",
    content:
      "Our comprehensive Biology course with Quranic connections is now live. Discover the wonders of life through both scientific understanding and Islamic teachings.",
    type: "update",
    targetAudience: "students",
    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
    isActive: true,
  },
]

export function usePersistentLearningMaterials() {
  const [materials, setMaterials] = useState<LearningMaterial[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    try {
      const stored = localStorage.getItem(STORAGE_KEYS.MATERIALS)
      if (stored) {
        setMaterials(JSON.parse(stored))
      } else {
        setMaterials(defaultMaterials)
        localStorage.setItem(STORAGE_KEYS.MATERIALS, JSON.stringify(defaultMaterials))
      }
    } catch (error) {
      console.error("Error loading materials:", error)
      setMaterials(defaultMaterials)
    } finally {
      setLoading(false)
    }
  }, [])

const addMaterial = (material: Omit<LearningMaterial, "id" | "createdAt" | "updatedAt">) => {
    try {
      const newMaterial: LearningMaterial = {
        ...material,
        id: Date.now(),
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      }
      const updatedMaterials = [...materials, newMaterial]
      setMaterials(updatedMaterials)
      localStorage.setItem(STORAGE_KEYS.MATERIALS, JSON.stringify(updatedMaterials))
      return newMaterial
    } catch (error) {
      console.error("Error adding material:", error)
      throw error
    }
  }

const updateMaterial = (id: number, updates: Partial<LearningMaterial>) => {
    try {
      const updatedMaterials = materials.map((material) =>
        material.id === id ? { ...material, ...updates, updatedAt: new Date().toISOString() } : material,
      )
      setMaterials(updatedMaterials)
      localStorage.setItem(STORAGE_KEYS.MATERIALS, JSON.stringify(updatedMaterials))
    } catch (error) {
      console.error("Error updating material:", error)
      throw error
    }
  }

const deleteMaterial = (id: number) => {
    try {
      const updatedMaterials = materials.filter((material) => material.id !== id)
      setMaterials(updatedMaterials)
      localStorage.setItem(STORAGE_KEYS.MATERIALS, JSON.stringify(updatedMaterials))
    } catch (error) {
      console.error("Error deleting material:", error)
      throw error
    }
  }

const getMaterialsBySubject = (subject: string) => {
    return materials.filter((material) => material.subject.toLowerCase() === subject.toLowerCase())
  }

return {
    materials,
    loading,
    addMaterial,
    updateMaterial,
    deleteMaterial,
    getMaterialsBySubject,
  }
}

export function usePersistentUsers() {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    try {
      const stored = localStorage.getItem(STORAGE_KEYS.USERS)
      if (stored) {
        setUsers(JSON.parse(stored))
      } else {
        setUsers(defaultUsers)
        localStorage.setItem(STORAGE_KEYS.USERS, JSON.stringify(defaultUsers))
      }
    } catch (error) {
      console.error("Error loading users:", error)
      setUsers(defaultUsers)
    } finally {
      setLoading(false)
    }
  }, [])

const addUser = (user: Omit<User, "id" | "joinedAt" | "lastActive">) => {
    try {
      const newUser: User = {
        ...user,
        id: Date.now(),
        joinedAt: new Date().toISOString(),
        lastActive: new Date().toISOString(),
      }
      const updatedUsers = [...users, newUser]
      setUsers(updatedUsers)
      localStorage.setItem(STORAGE_KEYS.USERS, JSON.stringify(updatedUsers))
      return newUser
    } catch (error) {
      console.error("Error adding user:", error)
      throw error
    }
  }

const updateUser = (id: number, updates: Partial<User>) => {
    try {
      const updatedUsers = users.map((user) =>
        user.id === id ? { ...user, ...updates, lastActive: new Date().toISOString() } : user,
      )
      setUsers(updatedUsers)
      localStorage.setItem(STORAGE_KEYS.USERS, JSON.stringify(updatedUsers))
    } catch (error) {
      console.error("Error updating user:", error)
      throw error
    }
  }

const deleteUser = (id: number) => {
    try {
      const updatedUsers = users.filter((user) => user.id !== id)
      setUsers(updatedUsers)
      localStorage.setItem(STORAGE_KEYS.USERS, JSON.stringify(updatedUsers))
    } catch (error) {
      console.error("Error deleting user:", error)
      throw error
    }
  }

return {
    users,
    loading,
    addUser,
    updateUser,
    deleteUser,
  }
}

export function usePersistentAnnouncements() {
  const [announcements, setAnnouncements] = useState<Announcement[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    try {
      const stored = localStorage.getItem(STORAGE_KEYS.ANNOUNCEMENTS)
      if (stored) {
        setAnnouncements(JSON.parse(stored))
      } else {
        setAnnouncements(defaultAnnouncements)
        localStorage.setItem(STORAGE_KEYS.ANNOUNCEMENTS, JSON.stringify(defaultAnnouncements))
      }
    } catch (error) {
      console.error("Error loading announcements:", error)
      setAnnouncements(defaultAnnouncements)
    } finally {
      setLoading(false)
    }
  }, [])

const addAnnouncement = (announcement: Omit<Announcement, "id" | "createdAt">) => {
    try {
      const newAnnouncement: Announcement = {
        ...announcement,
        id: Date.now(),
        createdAt: new Date().toISOString(),
      }
      const updatedAnnouncements = [...announcements, newAnnouncement]
      setAnnouncements(updatedAnnouncements)
      localStorage.setItem(STORAGE_KEYS.ANNOUNCEMENTS, JSON.stringify(updatedAnnouncements))
      return newAnnouncement
    } catch (error) {
      console.error("Error adding announcement:", error)
      throw error
    }
  }

const updateAnnouncement = (id: number, updates: Partial<Announcement>) => {
    try {
      const updatedAnnouncements = announcements.map((announcement) =>
        announcement.id === id ? { ...announcement, ...updates } : announcement,
      )
      setAnnouncements(updatedAnnouncements)
      localStorage.setItem(STORAGE_KEYS.ANNOUNCEMENTS, JSON.stringify(updatedAnnouncements))
    } catch (error) {
      console.error("Error updating announcement:", error)
      throw error
    }
  }

const deleteAnnouncement = (id: number) => {
    try {
      const updatedAnnouncements = announcements.filter((announcement) => announcement.id !== id)
      setAnnouncements(updatedAnnouncements)
      localStorage.setItem(STORAGE_KEYS.ANNOUNCEMENTS, JSON.stringify(updatedAnnouncements))
    } catch (error) {
      console.error("Error deleting announcement:", error)
      throw error
    }
  }

const getActiveAnnouncements = () => {
    return announcements.filter((announcement) => {
      if (!announcement.isActive) return false
      if (announcement.expiresAt) {
        return new Date(announcement.expiresAt) > new Date()
      }
      return true
    })
  }

return {
    announcements,
    loading,
    addAnnouncement,
    updateAnnouncement,
    deleteAnnouncement,
    getActiveAnnouncements,
  }
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isEdit="true" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
[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": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@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",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.35",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "@neondatabase/serverless": "1.0.1",
    "events": "3.3.0"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Facebook, Twitter, Instagram, Youtube, Mail, Phone, MapPin } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-gradient-to-r from-qnekt-black via-qnekt-red to-qnekt-green">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-center">
          {/* Logo and Description */}
          <div className="flex flex-col items-center">
            <div className="flex items-center justify-center space-x-3 mb-4">
              <Image src="/qnekt-logo.png" alt="Qnekt Logo" width={300} height={300} className="object-contain" />
            </div>
            <p className="text-lg font-semibold italic text-white">Cultivating Connections</p>
          </div>

{/* Quick Links */}
          <div className="flex flex-col items-center">
            <h3 className="text-lg font-semibold mb-4 text-white">Quick Links</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/subjects" className="text-sm text-white hover:text-gray-200 transition-colors">
                  Subjects
                </Link>
              </li>
              <li>
                <Link href="/muslim-scientists" className="text-sm text-white hover:text-gray-200 transition-colors">
                  Muslim Scientists
                </Link>
              </li>
              <li>
                <Link href="/parents-students" className="text-sm text-white hover:text-gray-200 transition-colors">
                  Parents & Students
                </Link>
              </li>
            </ul>
          </div>

{/* Subjects */}
          <div className="flex flex-col items-center">
            <h3 className="text-lg font-semibold mb-4 text-white">Subjects</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/subjects/biology" className="text-sm text-white hover:text-gray-200 transition-colors">
                  Biology
                </Link>
              </li>
              <li>
                <Link href="/subjects/chemistry" className="text-sm text-white hover:text-gray-200 transition-colors">
                  Chemistry
                </Link>
              </li>
              <li>
                <Link href="/subjects/physics" className="text-sm text-white hover:text-gray-200 transition-colors">
                  Physics
                </Link>
              </li>
              <li>
                <Link href="/subjects/geography" className="text-sm text-white hover:text-gray-200 transition-colors">
                  Geography
                </Link>
              </li>
              <li>
                <Link href="/subjects/quran" className="text-sm text-white hover:text-gray-200 transition-colors">
                  Quran
                </Link>
              </li>
            </ul>
          </div>

{/* Contact Info */}
          <div className="flex flex-col items-center">
            <h3 className="text-lg font-semibold mb-4 text-white">Contact Us</h3>
            <div className="space-y-3">
              <div className="flex items-center justify-center space-x-2">
                <Mail size={16} className="text-white" />
                <span className="text-sm text-white">info@qnektonline.com</span>
              </div>
              <div className="flex items-center justify-center space-x-2">
                <Phone size={16} className="text-white" />
                <span className="text-sm text-white">+974 123-4567</span>
              </div>
              <div className="flex items-center justify-center space-x-2">
                <MapPin size={16} className="text-white" />
                <span className="text-sm text-white">Doha, Qatar</span>
              </div>
            </div>

{/* Social Media */}
            <div className="flex justify-center space-x-4 mt-6">
              <Link href="#" className="text-white hover:text-gray-200 transition-colors">
                <Facebook size={20} />
              </Link>
              <Link href="#" className="text-white hover:text-gray-200 transition-colors">
                <Twitter size={20} />
              </Link>
              <Link href="#" className="text-white hover:text-gray-200 transition-colors">
                <Instagram size={20} />
              </Link>
              <Link href="#" className="text-white hover:text-gray-200 transition-colors">
                <Youtube size={20} />
              </Link>
            </div>
          </div>
        </div>

{/* Bottom Bar */}
        <div className="border-t border-white/20 mt-8 pt-8 text-center">
          <p className="text-sm text-white">
            © 2025 ALMM Groups. All rights reserved. |{" "}
            <Link href="/privacy-policy" className="text-white hover:text-gray-200 ml-1">
              Privacy Policy
            </Link>{" "}
            |{" "}
            <Link href="/terms-of-service" className="text-white hover:text-gray-200 ml-1">
              Terms of Service
            </Link>{" "}
            |{" "}
            <Link href="/cookie-policy" className="text-white hover:text-gray-200 ml-1">
              Cookie Policy
            </Link>
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/admin/subject-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2, BookOpen, RefreshCw, X } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import {
  getSubjects,
  addSubject,
  updateSubject,
  deleteSubject,
  addTopicToSubject,
  type Subject,
} from "@/lib/unified-storage"

export function SubjectManagement() {
  const [subjects, setSubjects] = useState<Subject[]>([])
  const [isCreating, setIsCreating] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [addingTopicTo, setAddingTopicTo] = useState<string | null>(null)
  const [newTopic, setNewTopic] = useState("")
  const { toast } = useToast()

useEffect(() => {
    loadSubjects()
  }, [])

const loadSubjects = () => {
    setIsLoading(true)
    try {
      const loadedSubjects = getSubjects()
      setSubjects(loadedSubjects)
      console.log("Loaded subjects:", loadedSubjects)
    } catch (error) {
      console.error("Failed to load subjects:", error)
      toast({
        title: "Loading Error",
        description: "Failed to load subjects. Please refresh the page.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const [formData, setFormData] = useState({
    name: "",
    description: "",
    color: "#10B981",
    icon: "📚",
    topics: [] as string[],
  })

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

if (subjects.length >= 10 && !editingId) {
      toast({
        title: "Limit Reached",
        description: "You can only create up to 10 subjects.",
        variant: "destructive",
      })
      return
    }

try {
      if (editingId) {
        const updatedSubject = updateSubject(editingId, {
          name: formData.name,
          description: formData.description,
          color: formData.color,
          icon: formData.icon,
          topics: formData.topics,
        })

if (updatedSubject) {
          toast({
            title: "Subject Updated",
            description: `${formData.name} has been updated successfully.`,
          })
        }
      } else {
        addSubject({
          name: formData.name,
          description: formData.description,
          color: formData.color,
          icon: formData.icon,
          topics: formData.topics,
        })

toast({
          title: "Subject Created",
          description: `${formData.name} has been created successfully.`,
        })
      }

loadSubjects()
      resetForm()
    } catch (error) {
      toast({
        title: "Operation Failed",
        description: "Failed to save subject. Please try again.",
        variant: "destructive",
      })
    }
  }

const handleAddTopic = (subjectId: string) => {
    if (!newTopic.trim()) return

const success = addTopicToSubject(subjectId, newTopic.trim())
    if (success) {
      toast({
        title: "Topic Added",
        description: `"${newTopic}" has been added to the subject.`,
      })
      loadSubjects()
      setNewTopic("")
      setAddingTopicTo(null)
    } else {
      toast({
        title: "Failed to Add Topic",
        description: "Topic already exists or subject not found.",
        variant: "destructive",
      })
    }
  }

const removeTopic = (subjectIndex: number, topicIndex: number) => {
    const subject = subjects[subjectIndex]
    const updatedTopics = subject.topics.filter((_, index) => index !== topicIndex)

updateSubject(subject.id, { topics: updatedTopics })
    loadSubjects()

toast({
      title: "Topic Removed",
      description: "Topic has been removed successfully.",
    })
  }

const resetForm = () => {
    setFormData({ name: "", description: "", color: "#10B981", icon: "📚", topics: [] })
    setIsCreating(false)
    setEditingId(null)
  }

const handleEdit = (subject: Subject) => {
    setFormData({
      name: subject.name,
      description: subject.description,
      color: subject.color,
      icon: subject.icon,
      topics: [...subject.topics],
    })
    setEditingId(subject.id)
    setIsCreating(true)
  }

const handleDelete = (id: string) => {
    try {
      const subject = subjects.find((s) => s.id === id)
      deleteSubject(id)
      loadSubjects()
      toast({
        title: "Subject Deleted",
        description: `${subject?.name || "Subject"} has been deleted successfully.`,
      })
    } catch (error) {
      toast({
        title: "Delete Failed",
        description: "Failed to delete subject. Please try again.",
        variant: "destructive",
      })
    }
  }

if (isLoading) {
    return (
      <div className="flex items-center justify-center py-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-qnekt-green"></div>
        <span className="ml-2">Loading subjects...</span>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header with Refresh Button */}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-medium">Manage Subjects ({subjects.length}/10)</h3>
          <p className="text-sm text-gray-600">Create and organize your educational subjects and topics</p>
        </div>
        <Button variant="outline" onClick={loadSubjects} size="sm">
          <RefreshCw className="h-4 w-4 mr-2" />
          Refresh
        </Button>
      </div>

{/* Create/Edit Form */}
      {isCreating && (
        <Card className="gradient-border">
          <CardHeader>
            <CardTitle>{editingId ? "Edit Subject" : "Create New Subject"}</CardTitle>
            <CardDescription>
              {editingId
                ? "Update the subject details and manage topics"
                : `Create a new subject (${subjects.length}/10 subjects created)`}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Subject Name</Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    placeholder="e.g., Advanced Biology"
                    required
                    className="gradient-border"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="icon">Icon (Emoji)</Label>
                  <Input
                    id="icon"
                    value={formData.icon}
                    onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
                    placeholder="📚"
                    className="gradient-border"
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="Describe what this subject covers..."
                  required
                  className="gradient-border"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="color">Theme Color</Label>
                <Input
                  id="color"
                  type="color"
                  value={formData.color}
                  onChange={(e) => setFormData({ ...formData, color: e.target.value })}
                  className="gradient-border h-12"
                />
              </div>

{/* Topics Management */}
              <div className="space-y-3">
                <Label>Topics</Label>
                <div className="flex flex-wrap gap-2 mb-3">
                  {formData.topics.map((topic, index) => (
                    <Badge key={index} variant="secondary" className="flex items-center gap-2">
                      {topic}
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="h-4 w-4 p-0 hover:bg-red-100"
                        onClick={() => {
                          const newTopics = formData.topics.filter((_, i) => i !== index)
                          setFormData({ ...formData, topics: newTopics })
                        }}
                      >
                        <X className="h-3 w-3" />
                      </Button>
                    </Badge>
                  ))}
                </div>

<div className="flex gap-2">
                  <Input
                    placeholder="Add a new topic"
                    value={newTopic}
                    onChange={(e) => setNewTopic(e.target.value)}
                    onKeyPress={(e) => {
                      if (e.key === "Enter") {
                        e.preventDefault()
                        if (newTopic.trim() && !formData.topics.includes(newTopic.trim())) {
                          setFormData({ ...formData, topics: [...formData.topics, newTopic.trim()] })
                          setNewTopic("")
                        }
                      }
                    }}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      if (newTopic.trim() && !formData.topics.includes(newTopic.trim())) {
                        setFormData({ ...formData, topics: [...formData.topics, newTopic.trim()] })
                        setNewTopic("")
                      }
                    }}
                  >
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
              </div>

<div className="flex gap-2">
                <Button type="submit" className="bg-qnekt-green hover:bg-qnekt-green/90">
                  {editingId ? "Update Subject" : "Create Subject"}
                </Button>
                <Button type="button" variant="outline" onClick={resetForm}>
                  Cancel
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

{/* Add New Button */}
      {!isCreating && subjects.length < 10 && (
        <Button onClick={() => setIsCreating(true)} className="bg-qnekt-green hover:bg-qnekt-green/90 gradient-border">
          <Plus className="h-4 w-4 mr-2" />
          Create New Subject ({subjects.length}/10)
        </Button>
      )}

{/* Subjects Grid */}
      {subjects.length === 0 ? (
        <Card className="gradient-border">
          <CardContent className="text-center py-8">
            <BookOpen className="h-12 w-12 mx-auto mb-4 opacity-50" />
            <h3 className="font-medium mb-2">No Subjects Created Yet</h3>
            <p className="text-gray-600 mb-4">
              Create your first subject to get started with your educational platform.
            </p>
            <Button onClick={() => setIsCreating(true)} className="bg-qnekt-green hover:bg-qnekt-green/90">
              <Plus className="h-4 w-4 mr-2" />
              Create First Subject
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {subjects.map((subject) => (
            <Card key={subject.id} className="gradient-border-animated">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="text-2xl">{subject.icon}</span>
                    <CardTitle className="text-lg">{subject.name}</CardTitle>
                  </div>
                  <div className="flex gap-1">
                    <Button size="sm" variant="outline" onClick={() => handleEdit(subject)} className="h-8 w-8 p-0">
                      <Edit className="h-3 w-3" />
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleDelete(subject.id)}
                      className="h-8 w-8 p-0 text-red-600 hover:text-red-700"
                    >
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-3">
                <p className="text-sm text-gray-600">{subject.description}</p>

{/* Topics Display */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="text-sm font-medium">Topics</Label>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => setAddingTopicTo(addingTopicTo === subject.id ? null : subject.id)}
                      className="h-6 px-2 text-xs"
                    >
                      <Plus className="h-3 w-3 mr-1" />
                      Add Topic
                    </Button>
                  </div>

<div className="flex flex-wrap gap-1 min-h-[24px]">
                    {subject.topics.map((topic, topicIndex) => (
                      <Badge key={topic} variant="outline" className="text-xs flex items-center gap-1">
                        {topic}
                        <Button
                          size="sm"
                          variant="ghost"
                          className="h-3 w-3 p-0 hover:bg-red-100"
                          onClick={() => removeTopic(subjects.indexOf(subject), topicIndex)}
                        >
                          <X className="h-2 w-2" />
                        </Button>
                      </Badge>
                    ))}
                    {subject.topics.length === 0 && <span className="text-xs text-gray-400 italic">No topics yet</span>}
                  </div>

{/* Add Topic Input */}
                  {addingTopicTo === subject.id && (
                    <div className="flex gap-2 mt-2">
                      <Input
                        size="sm"
                        placeholder="Topic name"
                        value={newTopic}
                        onChange={(e) => setNewTopic(e.target.value)}
                        onKeyPress={(e) => {
                          if (e.key === "Enter") {
                            handleAddTopic(subject.id)
                          }
                        }}
                        className="text-xs"
                      />
                      <Button
                        size="sm"
                        onClick={() => handleAddTopic(subject.id)}
                        className="bg-qnekt-green hover:bg-qnekt-green/90 px-2"
                      >
                        Add
                      </Button>
                    </div>
                  )}
                </div>

<div className="flex items-center justify-between">
                  <Badge variant="secondary" className="flex items-center gap-1">
                    <BookOpen className="h-3 w-3" />
                    {subject.materialsCount} Materials
                  </Badge>
                  <div className="w-4 h-4 rounded-full border" style={{ backgroundColor: subject.color }} />
                </div>
                <div className="text-xs text-gray-500">Created: {subject.createdDate}</div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

{subjects.length === 10 && (
        <div className="text-center p-4 bg-green-50 rounded-lg border border-green-200">
          <p className="text-green-800 font-medium">
            ✅ Maximum subjects reached! You can now manage topics and upload materials for each subject.
          </p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]jpg:file="public/subjects/biology/human-anatomy-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/biology/human-anatomy-hero-fS7ZM6VNNd4wBsbApppfpgRsEzku8T.jpg" isMerged="true"
[V0_FILE]jpg:file="public/subjects/biology/plant-biology-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/biology/plant-biology-icon-aoDe9Oqt2iU4ZcPMByvE7sOiGI29cD.jpg" isMerged="true"
[V0_FILE]jpg:file="public/subjects/biology/life-cycles-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/biology/life-cycles-icon-EG5O8tjItFxU0mENMhBr7U866y52wU.jpg" isMerged="true"
[V0_FILE]jpg:file="public/subjects/chemistry/atomic-structure-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/chemistry/atomic-structure-hero-xDUdYGMU4HUYat6ZdcLvyPDHoOL1UH.jpg" isMerged="true"
[V0_FILE]jpg:file="public/subjects/physics/light-optics-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/physics/light-optics-hero-Bdaonh0CCEDF1wWpvI7MdGcCbX1W1u.jpg" isMerged="true"
[V0_FILE]jpg:file="public/subjects/geography/landforms-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/geography/landforms-hero-9EshpkU6i6WMm9BybZ4PcouMbTA8Rj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/subjects/quran/creation-cosmology-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/subjects/quran/creation-cosmology-hero-X5C4qnsiczoUpPLgv7v8tCCSs805N0.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="app/subjects/biology/human-anatomy/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { ArrowLeft, BookOpen, Clock, User, Eye, Play, FileText, ImageIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { QuranicVerse } from "@/components/quranic-verse"
import { MaterialViewerModal } from "@/components/material-viewer-modal"
import { getMaterialsBySubjectAndTopic, type Material } from "@/lib/unified-storage"

export default function HumanAnatomyPage() {
  const [materials, setMaterials] = useState<Material[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const loadMaterials = () => {
      try {
        const subjectMaterials = getMaterialsBySubjectAndTopic("Biology", "Human Anatomy")
        setMaterials(subjectMaterials)
      } catch (error) {
        console.error("Failed to load materials:", error)
      } finally {
        setIsLoading(false)
      }
    }

loadMaterials()
  }, [])

const getTypeIcon = (type: string) => {
    switch (type) {
      case "video":
        return <Play className="h-4 w-4" />
      case "pdf":
        return <FileText className="h-4 w-4" />
      case "infographic":
        return <ImageIcon className="h-4 w-4" />
      default:
        return <BookOpen className="h-4 w-4" />
    }
  }

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "beginner":
        return "bg-green-100 text-green-800"
      case "intermediate":
        return "bg-yellow-100 text-yellow-800"
      case "advanced":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-qnekt-black via-qnekt-red to-qnekt-green flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
          <p className="text-white">Loading materials...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-qnekt-black via-qnekt-red to-qnekt-green">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="flex items-center gap-4 mb-8">
          <Button variant="outline" asChild className="bg-white/90 backdrop-blur">
            <Link href="/subjects/biology" className="flex items-center gap-2">
              <ArrowLeft className="h-4 w-4" />
              Back to Biology
            </Link>
          </Button>
          <div>
            <h1 className="text-4xl font-bold text-white drop-shadow-lg">Human Anatomy</h1>
            <p className="text-white/90">Explore the miraculous design of the human body</p>
          </div>
        </div>

{/* Hero Section */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
          <div className="space-y-6">
            <Card className="gradient-border-animated bg-white/95 backdrop-blur">
              <CardHeader>
                <CardTitle className="text-2xl text-qnekt-black">The Human Body: A Divine Creation</CardTitle>
                <CardDescription>
                  Discover the intricate systems that make up the human body and understand how each part reflects
                  Allah's perfect design.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="font-semibold text-qnekt-black">Subject:</span>
                    <p className="text-gray-600">Biology</p>
                  </div>
                  <div>
                    <span className="font-semibold text-qnekt-black">Topic:</span>
                    <p className="text-gray-600">Human Anatomy</p>
                  </div>
                  <div>
                    <span className="font-semibold text-qnekt-black">Materials:</span>
                    <p className="text-gray-600">{materials.length} Resources</p>
                  </div>
                  <div>
                    <span className="font-semibold text-qnekt-black">Level:</span>
                    <p className="text-gray-600">All Levels</p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Key Learning Points */}
            <Card className="gradient-border bg-white/95 backdrop-blur">
              <CardHeader>
                <CardTitle className="text-lg text-qnekt-black">What You'll Learn</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-gray-700">
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-qnekt-green rounded-full"></div>
                    The structure and function of major body systems
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-qnekt-green rounded-full"></div>
                    How organs work together in harmony
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-qnekt-green rounded-full"></div>
                    The miraculous design of human creation
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-qnekt-green rounded-full"></div>
                    Quranic verses about human development
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>

{/* Quranic Verse */}
        <div className="mb-12">
          <QuranicVerse
            arabic="وَلَقَدْ خَلَقْنَا الْإِنسَانَ مِن سُلَالَةٍ مِّن طِينٍ"
            translation="And certainly did We create man from an extract of clay"
            reference="Quran 23:12"
            className="text-center bg-white/10 backdrop-blur-sm rounded-2xl p-8"
          />
        </div>

{/* Materials Section */}
        <div className="space-y-8">
          <div className="text-center">
            <h2 className="text-3xl font-bold text-white mb-4 drop-shadow-lg">Learning Materials</h2>
            <p className="text-white/90 max-w-2xl mx-auto">
              Explore our comprehensive collection of materials designed to help you understand human anatomy through
              both scientific and Islamic perspectives.
            </p>
          </div>

{materials.length === 0 ? (
            <Card className="gradient-border bg-white/95 backdrop-blur">
              <CardContent className="text-center py-12">
                <BookOpen className="h-16 w-16 mx-auto mb-4 text-gray-400" />
                <h3 className="text-xl font-semibold text-qnekt-black mb-2">No Materials Yet</h3>
                <p className="text-gray-600 mb-6">
                  Materials for this topic are being prepared. Check back soon for comprehensive learning resources.
                </p>
                <Button asChild className="bg-qnekt-green hover:bg-qnekt-green/90">
                  <Link href="/admin/content-upload">Add Materials</Link>
                </Button>
              </CardContent>
            </Card>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {materials.map((material) => (
                <Card key={material.id} className="gradient-border-animated bg-white/95 backdrop-blur card-hover">
                  <CardHeader>
                    <div className="flex items-center justify-between mb-2">
                      <Badge variant="outline" className="flex items-center gap-1">
                        {getTypeIcon(material.type)}
                        {material.type.charAt(0).toUpperCase() + material.type.slice(1)}
                      </Badge>
                      <Badge className={getDifficultyColor(material.difficulty)}>{material.difficulty}</Badge>
                    </div>
                    <CardTitle className="text-lg text-qnekt-black line-clamp-2">{material.title}</CardTitle>
                    <CardDescription className="line-clamp-3">{material.description}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-center justify-between text-sm text-gray-600">
                      <div className="flex items-center gap-1">
                        <Clock className="h-3 w-3" />
                        {material.duration || "Self-paced"}
                      </div>
                      <div className="flex items-center gap-1">
                        <Eye className="h-3 w-3" />
                        {material.views || 0} views
                      </div>
                    </div>

{material.tags && material.tags.length > 0 && (
                      <div className="flex flex-wrap gap-1">
                        {material.tags.slice(0, 3).map((tag, index) => (
                          <Badge key={index} variant="secondary" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                        {material.tags.length > 3 && (
                          <Badge variant="secondary" className="text-xs">
                            +{material.tags.length - 3} more
                          </Badge>
                        )}
                      </div>
                    )}

<div className="flex gap-2">
                      <MaterialViewerModal material={material}>
                        <Button className="flex-1 bg-qnekt-green hover:bg-qnekt-green/90">
                          <Eye className="h-4 w-4 mr-2" />
                          View Material
                        </Button>
                      </MaterialViewerModal>
                    </div>

<div className="flex items-center gap-2 text-xs text-gray-500 pt-2 border-t">
                      <User className="h-3 w-3" />
                      <span>By {material.createdBy}</span>
                      <span>•</span>
                      <span>{material.createdAt}</span>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>

{/* Related Topics */}
        <div className="mt-16">
          <h3 className="text-2xl font-bold text-white mb-6 text-center drop-shadow-lg">Explore Related Topics</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card className="gradient-border bg-white/95 backdrop-blur card-hover">
              <CardHeader>
                <CardTitle className="text-qnekt-black">Plant Biology</CardTitle>
                <CardDescription>Discover the fascinating world of plants and their role in creation</CardDescription>
              </CardHeader>
              <CardContent>
                <Button asChild variant="outline" className="w-full bg-transparent">
                  <Link href="/subjects/biology/plant-biology">Explore Plant Biology</Link>
                </Button>
              </CardContent>
            </Card>

<Card className="gradient-border bg-white/95 backdrop-blur card-hover">
              <CardHeader>
                <CardTitle className="text-qnekt-black">Life Cycles</CardTitle>
                <CardDescription>Learn about the stages of life and growth in living organisms</CardDescription>
              </CardHeader>
              <CardContent>
                <Button asChild variant="outline" className="w-full bg-transparent">
                  <Link href="/subjects/biology/life-cycles">Explore Life Cycles</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowRight, BookOpen, Users, Play, Star, ChevronRight, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import { QuranicVerse } from "@/components/quranic-verse"

export default function HomePage() {
  const [email, setEmail] = useState("")
  const { toast } = useToast()

const handleNewsletterSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (email) {
      toast({
        title: "Subscribed!",
        description: "Thank you for subscribing to our newsletter.",
      })
      setEmail("")
    }
  }

const subjects = [
    {
      name: "Biology",
      icon: "🧬",
      description: "Explore life sciences through Quranic wisdom",
      href: "/subjects/biology",
      image: "/subjects/biology-overview.png",
      topics: ["Human Anatomy", "Plant Biology", "Life Cycles"],
    },
    {
      name: "Chemistry",
      icon: "⚗️",
      description: "Discover elements and reactions in creation",
      href: "/subjects/chemistry",
      image: "/subjects/chemistry-overview.png",
      topics: ["Atomic Structure", "Periodic Table", "Chemical Reactions"],
    },
    {
      name: "Physics",
      icon: "⚡",
      description: "Understand forces and energy in the universe",
      href: "/subjects/physics",
      image: "/subjects/physics-overview.png",
      topics: ["Motion & Forces", "Light & Optics", "Energy & Work"],
    },
    {
      name: "Geography",
      icon: "🌍",
      description: "Study Earth's features and phenomena",
      href: "/subjects/geography",
      image: "/subjects/geography-overview.png",
      topics: ["Landforms", "Climate & Weather", "Water Bodies"],
    },
    {
      name: "Quranic Studies",
      icon: "📖",
      description: "Connect scientific concepts with Quranic verses",
      href: "/subjects/quran",
      image: "/subjects/quranic-studies-overview.png",
      topics: ["Creation & Cosmology", "Human Development", "Natural Phenomena"],
    },
  ]

const testimonials = [
    {
      name: "Nusaiba Ahmed",
      role: "Student, Grade 10",
      image: "/testimonials/nusaiba-new.png",
      quote: "Qnekt helped me understand how science and Islam connect beautifully. The videos are amazing!",
    },
    {
      name: "Inaya Hassan",
      role: "Parent",
      image: "/testimonials/inaya-new.png",
      quote:
        "Finally, an educational platform that aligns with our values while providing excellent science education.",
    },
    {
      name: "Aariz Khan",
      role: "Student, Grade 8",
      image: "/testimonials/aariz-new.png",
      quote: "The Quranic integration makes learning science more meaningful and engaging for Muslim students.",
    },
  ]

const features = [
    {
      icon: BookOpen,
      title: "Comprehensive Curriculum",
      description: "Complete coverage of Biology, Chemistry, Physics, Geography, and Quranic Studies",
    },
    {
      icon: Users,
      title: "Interactive Learning",
      description: "Engaging videos, quizzes, and activities that make learning enjoyable and memorable",
    },
    {
      icon: Star,
      title: "Quranic Integration",
      description: "Every lesson connects scientific concepts with relevant verses from the Holy Quran",
    },
  ]

return (
    <div className="min-h-screen bg-white">
      {/* Quranic Verse Banner - ONLY ONE INSTANCE */}
      <QuranicVerse />

{/* Hero Section */}
      <section className="bg-gradient-to-br from-qnekt-green/10 via-white to-qnekt-red/10 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <div className="space-y-4">
                <Badge className="bg-qnekt-green/10 text-qnekt-green border-qnekt-green/20">
                  🌟 New Platform Launch
                </Badge>
                <h1 className="text-4xl md:text-6xl font-bold leading-tight text-qnekt-black">
                  <span className="text-qnekt-black">Bridging</span>{" "}
                  <span className="text-qnekt-red">Scientific Discovery</span>{" "}
                  <span className="text-qnekt-green">with Quranic Wisdom</span>
                </h1>
                <p className="text-xl text-qnekt-black leading-relaxed">
                  Integrate modern scientific education with Islamic teachings through comprehensive educational content
                  that aligns concepts with verses from the Quran.
                </p>
              </div>

<div className="flex flex-col sm:flex-row gap-4">
                <Link href="/subjects">
                  <Button size="lg" className="hover:bg-qnekt-green/90 text-white bg-qnekt-red">
                    <BookOpen className="mr-2 h-5 w-5" />
                    Explore Courses
                  </Button>
                </Link>
              </div>

<div className="flex items-center space-x-8 text-sm text-qnekt-black">
                <div className="flex items-center space-x-2">
                  <div className="flex -space-x-2">
                    <Image
                      src="/student-hijab.png"
                      alt="Student"
                      width={32}
                      height={32}
                      className="rounded-full border-2 border-white"
                    />
                    <Image
                      src="/student-cap.png"
                      alt="Student"
                      width={32}
                      height={32}
                      className="rounded-full border-2 border-white"
                    />
                    <Image
                      src="/student-boy.png"
                      alt="Student"
                      width={32}
                      height={32}
                      className="rounded-full border-2 border-white"
                    />
                  </div>
                  <span className="text-qnekt-black">1000+ Students</span>
                </div>
                <div className="flex items-center space-x-1">
                  <Star className="h-4 w-4 text-yellow-400 fill-current" />
                  <span className="text-qnekt-black">4.9/5 Rating</span>
                </div>
              </div>
            </div>

{/* Features Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-qnekt-black mb-4">Why Choose Qnekt?</h2>
            <p className="text-xl text-qnekt-black max-w-3xl mx-auto">
              Experience education that honors both scientific inquiry and Islamic values
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="gradient-border hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
              >
                <Card className="text-center border-0 h-full bg-white">
                  <CardContent className="p-8">
                    <div className="bg-qnekt-green/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
                      <feature.icon className="h-8 w-8 text-qnekt-green" />
                    </div>
                    <h3 className="text-xl font-semibold text-qnekt-black mb-4">{feature.title}</h3>
                    <p className="text-qnekt-black">{feature.description}</p>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Subjects Section */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-qnekt-black mb-4">Explore Our Subjects</h2>
            <p className="text-xl text-qnekt-black max-w-3xl mx-auto">
              Comprehensive curriculum covering essential scientific disciplines with Quranic integration
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {subjects.map((subject, index) => (
              <div
                key={index}
                className="gradient-border group hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
              >
                <Card className="border-0 h-full bg-white">
                  <div className="relative overflow-hidden rounded-t-lg">
                    <Image
                      src={subject.image || "/placeholder.svg"}
                      alt={subject.name}
                      width={400}
                      height={200}
                      className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                    <div className="absolute top-4 left-4">
                      <div className="bg-white/90 backdrop-blur-sm rounded-full p-2">
                        <span className="text-2xl">{subject.icon}</span>
                      </div>
                    </div>
                  </div>
                  <CardContent className="p-6">
                    <h3 className="text-xl font-semibold text-qnekt-black mb-2">{subject.name}</h3>
                    <p className="text-qnekt-black mb-4">{subject.description}</p>
                    <div className="space-y-2 mb-4">
                      {subject.topics.map((topic, topicIndex) => (
                        <div key={topicIndex} className="flex items-center text-sm text-qnekt-black">
                          <ChevronRight className="h-3 w-3 mr-1" />
                          {topic}
                        </div>
                      ))}
                    </div>
                    <Link href={subject.href}>
                      <Button className="w-full hover:bg-qnekt-green/90 text-white bg-qnekt-red">
                        Explore {subject.name}
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </Button>
                    </Link>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Testimonials Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-qnekt-black mb-4">What Our Community Says</h2>
            <p className="text-xl text-qnekt-black">Hear from students and parents who are part of the Qnekt family</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <div
                key={index}
                className="gradient-border hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
              >
                <Card className="border-0 h-full bg-white">
                  <CardContent className="p-6">
                    <div className="flex items-center mb-4">
                      <Image
                        src={testimonial.image || "/placeholder.svg"}
                        alt={testimonial.name}
                        width={48}
                        height={48}
                        className="rounded-full mr-4"
                      />
                      <div>
                        <h4 className="font-semibold text-qnekt-black">{testimonial.name}</h4>
                        <p className="text-sm text-qnekt-black">{testimonial.role}</p>
                      </div>
                    </div>
                    <p className="text-qnekt-black italic">"{testimonial.quote}"</p>
                    <div className="flex mt-4">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="h-4 w-4 text-yellow-400 fill-current" />
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Newsletter Section */}
      <section className="py-20 bg-gradient-to-r from-qnekt-black via-qnekt-red to-qnekt-green">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 md:p-12">
            <Mail className="h-12 w-12 text-white mx-auto mb-6" />
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Stay Updated with Qnekt</h2>
            <p className="text-xl text-white mb-8">
              Get the latest educational content, Quranic insights, and platform updates delivered to your inbox
            </p>

<form onSubmit={handleNewsletterSubmit} className="max-w-md mx-auto">
              <div className="flex gap-4">
                <Input
                  type="email"
                  placeholder="Enter your email address"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="flex-1 bg-white/20 border-white/30 text-white placeholder-white/70"
                  required
                />
                <Button type="submit" className="bg-white text-qnekt-green hover:bg-white/90">
                  Subscribe
                </Button>
              </div>
            </form>

<p className="text-sm text-white mt-4">Join 5,000+ students and parents in our community</p>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-qnekt-black mb-4">Ready to Begin Your Journey?</h2>
          <p className="text-xl text-qnekt-black mb-8">
            Join thousands of students who are bridging science and faith through Qnekt
          </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/subjects">
              <Button size="lg" className="bg-qnekt-green hover:bg-qnekt-green/90 text-white">
                <BookOpen className="mr-2 h-5 w-5" />
                Start Learning Today
              </Button>
            </Link>
            <Link href="/about">
              <Button
                size="lg"
                variant="outline"
                className="border-qnekt-black text-qnekt-black hover:bg-qnekt-black hover:text-white bg-transparent"
              >
                Learn More About Us
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/material-viewer-modal.tsx" isEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  BookOpen,
  Clock,
  User,
  Calendar,
  Tag,
  Star,
  Play,
  FileText,
  ImageIcon,
  Video,
  X,
  ExternalLink,
} from "lucide-react"

interface Material {
  id: string
  title: string
  subject: string
  topic: string
  type: "video" | "pdf" | "infographic" | "quiz" | "article" | "interactive"
  difficulty: "beginner" | "intermediate" | "advanced"
  duration?: string
  description: string
  content: string
  quranicConnection?: string
  tags: string[]
  createdBy: string
  createdAt: string
  isPublished: boolean
  thumbnailUrl?: string
  views?: number
  rating?: number
}

interface MaterialViewerModalProps {
  material: Material | null
  isOpen: boolean
  onClose: () => void
}

export function MaterialViewerModal({ material, isOpen, onClose }: MaterialViewerModalProps) {
  const [isStarted, setIsStarted] = useState(false)

if (!material) return null

const getTypeIcon = (type: Material["type"]) => {
    switch (type) {
      case "video":
        return Video
      case "pdf":
        return FileText
      case "infographic":
        return ImageIcon
      case "quiz":
        return BookOpen
      case "article":
        return FileText
      case "interactive":
        return Play
      default:
        return BookOpen
    }
  }

const getDifficultyColor = (difficulty: Material["difficulty"]) => {
    switch (difficulty) {
      case "beginner":
        return "bg-green-100 text-green-800"
      case "intermediate":
        return "bg-yellow-100 text-yellow-800"
      case "advanced":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const TypeIcon = getTypeIcon(material.type)

const handleStartLearning = () => {
    setIsStarted(true)
    // Here you would typically navigate to the actual learning content
    // For now, we'll just show a success state
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] p-0 overflow-hidden">
        <div className="gradient-border-newsletter">
          <div className="bg-white rounded-lg">
            {/* Header */}
            <DialogHeader className="p-6 pb-4">
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 bg-qnekt-green/10 rounded-lg">
                      <TypeIcon className="h-5 w-5 text-qnekt-green" />
                    </div>
                    <Badge variant="outline" className="capitalize">
                      {material.type}
                    </Badge>
                    <Badge className={getDifficultyColor(material.difficulty)}>{material.difficulty}</Badge>
                  </div>
                  <DialogTitle className="text-2xl font-bold text-qnekt-black mb-2">{material.title}</DialogTitle>
                  <DialogDescription className="text-gray-600 text-base">
                    {material.subject} • {material.topic}
                  </DialogDescription>
                </div>
                <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-500 hover:text-gray-700">
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </DialogHeader>

<ScrollArea className="max-h-[70vh]">
              <div className="p-6 pt-0">
                {/* Thumbnail/Preview */}
                {material.thumbnailUrl && (
                  <div className="relative mb-6 rounded-lg overflow-hidden">
                    <img
                      src={material.thumbnailUrl || "/placeholder.svg"}
                      alt={material.title}
                      className="w-full h-48 object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
                    <Button
                      onClick={handleStartLearning}
                      className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 hover:bg-white text-qnekt-black rounded-full p-4"
                    >
                      <Play className="h-6 w-6" />
                    </Button>
                  </div>
                )}

{/* Material Info */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                  <div className="md:col-span-2">
                    <h3 className="text-lg font-semibold text-qnekt-black mb-3">Description</h3>
                    <p className="text-gray-700 leading-relaxed mb-4">{material.description}</p>

{/* Content Preview */}
                    <div className="bg-gray-50 rounded-lg p-4">
                      <h4 className="font-medium text-qnekt-black mb-2">Content Preview</h4>
                      <p className="text-gray-600 text-sm line-clamp-3">{material.content}</p>
                    </div>
                  </div>

<div className="space-y-4">
                    {/* Metadata */}
                    <div className="bg-gray-50 rounded-lg p-4">
                      <h4 className="font-medium text-qnekt-black mb-3">Details</h4>
                      <div className="space-y-3">
                        {material.duration && (
                          <div className="flex items-center gap-2 text-sm">
                            <Clock className="h-4 w-4 text-gray-500" />
                            <span className="text-gray-600">{material.duration}</span>
                          </div>
                        )}
                        <div className="flex items-center gap-2 text-sm">
                          <User className="h-4 w-4 text-gray-500" />
                          <span className="text-gray-600">By {material.createdBy}</span>
                        </div>
                        <div className="flex items-center gap-2 text-sm">
                          <Calendar className="h-4 w-4 text-gray-500" />
                          <span className="text-gray-600">{material.createdAt}</span>
                        </div>
                        {material.views && (
                          <div className="flex items-center gap-2 text-sm">
                            <BookOpen className="h-4 w-4 text-gray-500" />
                            <span className="text-gray-600">{material.views} views</span>
                          </div>
                        )}
                        {material.rating && (
                          <div className="flex items-center gap-2 text-sm">
                            <Star className="h-4 w-4 text-yellow-500 fill-current" />
                            <span className="text-gray-600">{material.rating}/5</span>
                          </div>
                        )}
                      </div>
                    </div>

{/* Tags */}
                    {material.tags.length > 0 && (
                      <div className="bg-gray-50 rounded-lg p-4">
                        <h4 className="font-medium text-qnekt-black mb-3 flex items-center gap-2">
                          <Tag className="h-4 w-4" />
                          Tags
                        </h4>
                        <div className="flex flex-wrap gap-2">
                          {material.tags.map((tag, index) => (
                            <Badge key={index} variant="secondary" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>

{/* Quranic Connection */}
                {material.quranicConnection && (
                  <div className="mb-6">
                    <Separator className="mb-4" />
                    <h3 className="text-lg font-semibold text-qnekt-black mb-3 flex items-center gap-2">
                      <BookOpen className="h-5 w-5 text-qnekt-green" />
                      Quranic Connection
                    </h3>
                    <div className="bg-gradient-to-r from-qnekt-green/5 to-qnekt-red/5 rounded-lg p-4 border-l-4 border-qnekt-green">
                      <p className="text-gray-700 italic leading-relaxed">{material.quranicConnection}</p>
                    </div>
                  </div>
                )}

{/* Action Buttons */}
                <div className="flex flex-col sm:flex-row gap-3 pt-4">
                  <Button
                    onClick={handleStartLearning}
                    className="flex-1 bg-qnekt-green hover:bg-qnekt-green/90 text-white"
                    disabled={isStarted}
                  >
                    {isStarted ? (
                      <>
                        <BookOpen className="mr-2 h-4 w-4" />
                        Started Learning
                      </>
                    ) : (
                      <>
                        <Play className="mr-2 h-4 w-4" />
                        Start Learning
                      </>
                    )}
                  </Button>
                  <Button variant="outline" className="flex-1 bg-transparent">
                    <ExternalLink className="mr-2 h-4 w-4" />
                    Open in New Tab
                  </Button>
                </div>

{/* Success Message */}
                {isStarted && (
                  <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
                    <div className="flex items-center gap-2 text-green-800">
                      <BookOpen className="h-4 w-4" />
                      <span className="font-medium">Learning Started!</span>
                    </div>
                    <p className="text-green-700 text-sm mt-1">You can now access this material from your dashboard.</p>
                  </div>
                )}
              </div>
            </ScrollArea>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="app/admin/topic-upload/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft, Plus, X, CheckCircle, RefreshCw } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import {
  getSubjects,
  addTopicToSubject,
  getTopicsBySubject,
  storageEvents,
  type Subject,
  type Topic,
} from "@/lib/unified-storage"

export default function TopicUpload() {
  const router = useRouter()
  const { toast } = useToast()
  const [subjects, setSubjects] = useState<Subject[]>([])
  const [selectedSubject, setSelectedSubject] = useState("")
  const [topicName, setTopicName] = useState("")
  const [topicDescription, setTopicDescription] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [createdTopics, setCreatedTopics] = useState<Array<{ subject: string; topic: string; description: string }>>([])
  const [subjectTopics, setSubjectTopics] = useState<Topic[]>([])

useEffect(() => {
    loadSubjects()

// Listen for real-time updates
    const handleSubjectsUpdate = (updatedSubjects: Subject[]) => {
      setSubjects(updatedSubjects)
    }

const handleTopicsUpdate = () => {
      if (selectedSubject) {
        loadSubjectTopics(selectedSubject)
      }
    }

storageEvents.on("subjectsUpdated", handleSubjectsUpdate)
    storageEvents.on("topicsUpdated", handleTopicsUpdate)

return () => {
      storageEvents.off("subjectsUpdated", handleSubjectsUpdate)
      storageEvents.off("topicsUpdated", handleTopicsUpdate)
    }
  }, [selectedSubject])

useEffect(() => {
    if (selectedSubject) {
      loadSubjectTopics(selectedSubject)
    }
  }, [selectedSubject])

const loadSubjects = () => {
    try {
      const loadedSubjects = getSubjects()
      setSubjects(loadedSubjects)
    } catch (error) {
      console.error("Failed to load subjects:", error)
      toast({
        title: "Loading Error",
        description: "Failed to load subjects. Please refresh the page.",
        variant: "destructive",
      })
    }
  }

const loadSubjectTopics = (subjectName: string) => {
    try {
      const subject = subjects.find((s) => s.name === subjectName)
      if (subject) {
        const topics = getTopicsBySubject(subject.id)
        setSubjectTopics(topics)
      }
    } catch (error) {
      console.error("Failed to load subject topics:", error)
    }
  }

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

try {
      if (!topicName.trim() || !selectedSubject) {
        toast({
          title: "Missing Information",
          description: "Please fill in topic name and select a subject.",
          variant: "destructive",
        })
        return
      }

const selectedSubjectData = subjects.find((s) => s.name === selectedSubject)
      if (!selectedSubjectData) {
        toast({
          title: "Subject Not Found",
          description: "Please select a valid subject.",
          variant: "destructive",
        })
        return
      }

const success = addTopicToSubject(selectedSubjectData.id, topicName.trim(), topicDescription.trim())
      if (success) {
        // Add to created topics list for display
        setCreatedTopics((prev) => [
          ...prev,
          {
            subject: selectedSubject,
            topic: topicName.trim(),
            description: topicDescription.trim() || "No description provided",
          },
        ])

toast({
          title: "Topic Created Successfully!",
          description: `"${topicName.trim()}" has been added to ${selectedSubject}.`,
        })

// Reset form
        setTopicName("")
        setTopicDescription("")

// Reload data - this will trigger real-time updates
        loadSubjects()
        loadSubjectTopics(selectedSubject)
      } else {
        toast({
          title: "Topic Already Exists",
          description: "This topic already exists for the selected subject.",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error creating topic:", error)
      toast({
        title: "Creation Failed",
        description: "There was an error creating the topic. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const removeCreatedTopic = (index: number) => {
    setCreatedTopics((prev) => prev.filter((_, i) => i !== index))
  }

const refreshData = () => {
    loadSubjects()
    if (selectedSubject) {
      loadSubjectTopics(selectedSubject)
    }
    toast({
      title: "Data Refreshed",
      description: "All data has been reloaded successfully.",
    })
  }

const selectedSubjectData = subjects.find((s) => s.name === selectedSubject)

return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center gap-4">
            <Button
              variant="outline"
              onClick={() => router.push("/admin")}
              className="flex items-center gap-2 btn-gradient text-white border-0"
            >
              <ArrowLeft className="h-4 w-4" />
              Back to Dashboard
            </Button>
            <div>
              <h1 className="text-3xl font-bold text-qnekt-black">Create Topics</h1>
              <p className="text-gray-600">Add new topics to subjects for organizing course materials</p>
            </div>
          </div>
          <Button
            onClick={refreshData}
            variant="outline"
            className="flex items-center gap-2 btn-gradient text-white border-0 bg-transparent"
          >
            <RefreshCw className="h-4 w-4" />
            Refresh
          </Button>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Topic Creation Form */}
          <div className="lg:col-span-2">
            <Card className="gradient-border">
              <CardHeader className="bg-white rounded-t-lg">
                <CardTitle className="flex items-center gap-2">
                  <Plus className="h-5 w-5 text-qnekt-green" />
                  Create New Topic
                </CardTitle>
                <CardDescription>Add topics to subjects for better organization of course materials</CardDescription>
              </CardHeader>
              <CardContent className="bg-white rounded-b-lg">
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div>
                    <Label htmlFor="subject-select">Select Subject *</Label>
                    <Select value={selectedSubject} onValueChange={setSelectedSubject} required>
                      <SelectTrigger id="subject-select">
                        <SelectValue placeholder="Choose a subject" />
                      </SelectTrigger>
                      <SelectContent>
                        {subjects.map((subject) => (
                          <SelectItem key={subject.id} value={subject.name}>
                            <div className="flex items-center gap-2">
                              <span>{subject.icon}</span>
                              <span>{subject.name}</span>
                              <Badge variant="outline" className="ml-2">
                                {subjectTopics.filter((t) => t.subjectId === subject.id).length} topics
                              </Badge>
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

{selectedSubjectData && (
                    <div className="p-4 bg-gray-50 rounded-lg">
                      <h4 className="font-medium text-qnekt-black mb-2">Existing Topics in {selectedSubject}:</h4>
                      <div className="flex flex-wrap gap-2">
                        {subjectTopics.length > 0 ? (
                          subjectTopics.map((topic, index) => (
                            <Badge key={index} variant="secondary">
                              {topic.name}
                            </Badge>
                          ))
                        ) : (
                          <span className="text-gray-500 italic">No topics yet</span>
                        )}
                      </div>
                    </div>
                  )}

<div>
                    <Label htmlFor="topic-name">Topic Name *</Label>
                    <Input
                      id="topic-name"
                      type="text"
                      value={topicName}
                      onChange={(e) => setTopicName(e.target.value)}
                      placeholder="e.g., Human Digestive System"
                      required
                    />
                  </div>

<div>
                    <Label htmlFor="topic-description">Topic Description (Optional)</Label>
                    <Textarea
                      id="topic-description"
                      value={topicDescription}
                      onChange={(e) => setTopicDescription(e.target.value)}
                      placeholder="Brief description of what this topic covers..."
                      rows={3}
                    />
                  </div>

<Button type="submit" className="w-full btn-gradient text-white" disabled={isSubmitting}>
                    {isSubmitting ? "Creating Topic..." : "Create Topic"}
                  </Button>
                </form>
              </CardContent>
            </Card>

{/* Recently Created Topics */}
            {createdTopics.length > 0 && (
              <Card className="mt-6">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <CheckCircle className="h-5 w-5 text-green-500" />
                    Recently Created Topics
                  </CardTitle>
                  <CardDescription>Topics created in this session</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {createdTopics.map((item, index) => (
                      <div key={index} className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                        <div>
                          <div className="font-medium text-qnekt-black">{item.topic}</div>
                          <div className="text-sm text-gray-600">
                            Subject: {item.subject} • {item.description}
                          </div>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => removeCreatedTopic(index)}
                          className="text-gray-500 hover:text-red-500"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}
          </div>

{/* Subject Overview */}
          <div>
            <Card className="gradient-border-animated">
              <CardHeader className="bg-white rounded-t-lg">
                <CardTitle>Subject Overview</CardTitle>
                <CardDescription>Current subjects and their topics</CardDescription>
              </CardHeader>
              <CardContent className="bg-white rounded-b-lg">
                <div className="space-y-4">
                  {subjects.map((subject) => (
                    <div key={subject.id} className="p-4 border rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="text-xl">{subject.icon}</span>
                        <h4 className="font-medium text-qnekt-black">{subject.name}</h4>
                      </div>
                      <p className="text-sm text-gray-600 mb-3">{subject.description}</p>
                      <div className="flex items-center justify-between">
                        <Badge variant="outline">
                          {subjectTopics.filter((t) => t.subjectId === subject.id).length} topics
                        </Badge>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => setSelectedSubject(subject.name)}
                          className="text-qnekt-green hover:text-qnekt-green/80 btn-gradient-hover"
                        >
                          Select
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* Quick Stats */}
            <Card className="mt-6">
              <CardHeader>
                <CardTitle className="text-lg">Quick Statistics</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">Total Subjects:</span>
                  <Badge variant="secondary">{subjects.length}</Badge>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">Total Topics:</span>
                  <Badge variant="default">{subjectTopics.length}</Badge>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">Created This Session:</span>
                  <Badge variant="outline">{createdTopics.length}</Badge>
                </div>
              </CardContent>
            </Card>

{/* Next Steps */}
            <Card className="mt-6 bg-blue-50">
              <CardHeader>
                <CardTitle className="text-lg text-blue-800">Next Steps</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2 text-sm text-blue-700">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                    <span>Create topics for your subjects</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                    <span>Go to Course Materials to add content</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                    <span>Organize materials by topics</span>
                  </div>
                </div>
                <Button className="w-full mt-4 btn-gradient text-white" onClick={() => router.push("/admin/materials")}>
                  Go to Course Materials
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap");

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom Qnekt Colors */
:root {
  --qnekt-green: #22c55e;
  --qnekt-red: #ef4444;
  --qnekt-black: #1f2937;
}

.text-qnekt-green {
  color: var(--qnekt-green);
}

.text-qnekt-red {
  color: var(--qnekt-red);
}

.text-qnekt-black {
  color: var(--qnekt-black);
}

.bg-qnekt-green {
  background-color: var(--qnekt-green);
}

.bg-qnekt-red {
  background-color: var(--qnekt-red);
}

.bg-qnekt-black {
  background-color: var(--qnekt-black);
}

.border-qnekt-green {
  border-color: var(--qnekt-green);
}

.border-qnekt-red {
  border-color: var(--qnekt-red);
}

.border-qnekt-black {
  border-color: var(--qnekt-black);
}

.from-qnekt-green {
  --tw-gradient-from: var(--qnekt-green);
}

.to-qnekt-red {
  --tw-gradient-to: var(--qnekt-red);
}

.via-qnekt-black {
  --tw-gradient-via: var(--qnekt-black);
}

/* Arabic Font */
.font-arabic {
  font-family: "Amiri", serif;
}

/* Button Gradients */
.btn-gradient {
  background: linear-gradient(135deg, var(--qnekt-black) 0%, var(--qnekt-red) 50%, var(--qnekt-green) 100%);
  color: white !important;
  border: none !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, var(--qnekt-green) 0%, var(--qnekt-red) 50%, var(--qnekt-black) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  color: white !important;
}

.btn-gradient:focus {
  color: white !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5);
}

.btn-gradient:active {
  transform: translateY(0);
  color: white !important;
}

.btn-gradient-hover:hover {
  background: linear-gradient(135deg, var(--qnekt-black) 0%, var(--qnekt-red) 50%, var(--qnekt-green) 100%);
  color: white !important;
  transition: all 0.3s ease;
}

/* Gradient Border Effect */
.gradient-border {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(45deg, var(--qnekt-black), var(--qnekt-red), var(--qnekt-green));
}

.gradient-border > * {
  background: white;
  border-radius: 10px;
}

.gradient-border-animated {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(45deg, var(--qnekt-black), var(--qnekt-red), var(--qnekt-green), var(--qnekt-black));
  background-size: 300% 300%;
  animation: gradient-rotate 3s ease infinite;
}

.gradient-border-animated > * {
  background: white;
  border-radius: 10px;
}

.gradient-border-newsletter {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 3px;
  background: linear-gradient(45deg, var(--qnekt-black), var(--qnekt-red), var(--qnekt-green));
}

.gradient-border-newsletter > * {
  background: white;
  border-radius: 9px;
}

@keyframes gradient-rotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Quranic Verse Scrolling Animation */
.quranic-verse-scroll-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.quranic-verse-scroll-content {
  display: flex;
  animation: scrollRightToLeft 60s linear infinite;
  will-change: transform;
}

.quranic-verse-scroll-content:hover {
  animation-play-state: paused;
}

@keyframes scrollRightToLeft {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Responsive animation speed */
@media (max-width: 768px) {
  .quranic-verse-scroll-content {
    animation-duration: 45s;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .quranic-verse-scroll-content {
    animation: none;
    transform: translateX(0);
    justify-content: center;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .quranic-verse-scroll-content {
    background: black;
    color: white;
  }
}

/* Loading animations */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--qnekt-green);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--qnekt-red);
}

/* Focus styles for accessibility */
.focus\:ring-qnekt-green:focus {
  --tw-ring-color: var(--qnekt-green);
}

.focus\:border-qnekt-green:focus {
  border-color: var(--qnekt-green);
}

/* Hover effects */
.hover\:bg-qnekt-green\/90:hover {
  background-color: rgb(34 197 94 / 0.9);
}

.hover\:bg-qnekt-red\/90:hover {
  background-color: rgb(239 68 68 / 0.9);
}

.hover\:bg-qnekt-black\/90:hover {
  background-color: rgb(31 41 55 / 0.9);
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
}

/* Islamic geometric patterns (optional decorative elements) */
.islamic-pattern {
  background-image: radial-gradient(circle at 25% 25%, var(--qnekt-green) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, var(--qnekt-red) 2px, transparent 2px);
  background-size: 20px 20px;
  opacity: 0.1;
}

/* Print styles */
@media print {
  .quranic-verse-scroll-content {
    animation: none;
    transform: none;
  }

.no-print {
    display: none;
  }
}
[V0_FILE]sql:file="scripts/init-database.sql" isEdit="true" isMerged="true"
-- Create the database schema for Qnekt platform
-- This script initializes all tables with proper relationships and sample data

-- Enable UUID extension
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

-- Create subjects table
CREATE TABLE IF NOT EXISTS subjects (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL UNIQUE,
    description TEXT,
    icon VARCHAR(50) DEFAULT '📚',
    color VARCHAR(50) DEFAULT '#3B82F6',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create topics table
CREATE TABLE IF NOT EXISTS topics (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    subject_id INTEGER NOT NULL REFERENCES subjects(id) ON DELETE CASCADE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(name, subject_id)
);

-- Create materials table
CREATE TABLE IF NOT EXISTS materials (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    description TEXT,
    content TEXT,
    type VARCHAR(50) NOT NULL DEFAULT 'article',
    subject_id INTEGER NOT NULL REFERENCES subjects(id) ON DELETE CASCADE,
    topic_id INTEGER NOT NULL REFERENCES topics(id) ON DELETE CASCADE,
    quranic_connection TEXT,
    tags TEXT[] DEFAULT '{}',
    difficulty VARCHAR(20) DEFAULT 'beginner',
    duration VARCHAR(50),
    thumbnail_url TEXT,
    file_url TEXT,
    is_published BOOLEAN DEFAULT false,
    views INTEGER DEFAULT 0,
    rating DECIMAL(3,2) DEFAULT 0.0,
    created_by VARCHAR(255) DEFAULT 'admin',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create users table
CREATE TABLE IF NOT EXISTS users (
    id SERIAL PRIMARY KEY,
    email VARCHAR(255) NOT NULL UNIQUE,
    name VARCHAR(255) NOT NULL,
    role VARCHAR(50) DEFAULT 'student',
    avatar_url TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create announcements table
CREATE TABLE IF NOT EXISTS announcements (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    type VARCHAR(50) DEFAULT 'general',
    is_published BOOLEAN DEFAULT false,
    created_by VARCHAR(255) DEFAULT 'admin',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_topics_subject_id ON topics(subject_id);
CREATE INDEX IF NOT EXISTS idx_materials_subject_id ON materials(subject_id);
CREATE INDEX IF NOT EXISTS idx_materials_topic_id ON materials(topic_id);
CREATE INDEX IF NOT EXISTS idx_materials_published ON materials(is_published);
CREATE INDEX IF NOT EXISTS idx_materials_type ON materials(type);

-- Create a view for materials with subject and topic names
CREATE OR REPLACE VIEW materials_with_names AS
SELECT 
    m.*,
    s.name as subject_name,
    t.name as topic_name
FROM materials m
JOIN subjects s ON m.subject_id = s.id
JOIN topics t ON m.topic_id = t.id;

-- Create triggers for updating timestamps
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = CURRENT_TIMESTAMP;
    RETURN NEW;
END;
$$ language 'plpgsql';

CREATE TRIGGER update_subjects_updated_at BEFORE UPDATE ON subjects
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_topics_updated_at BEFORE UPDATE ON topics
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_materials_updated_at BEFORE UPDATE ON materials
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_users_updated_at BEFORE UPDATE ON users
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_announcements_updated_at BEFORE UPDATE ON announcements
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

-- Insert default subjects
INSERT INTO subjects (name, description, icon, color) VALUES
('Biology', 'Study of living organisms and their interactions with the environment', '🧬', '#10B981'),
('Chemistry', 'Science of matter, its properties, composition, and reactions', '⚗️', '#F59E0B'),
('Physics', 'Study of matter, energy, and their interactions', '⚛️', '#3B82F6'),
('Geography', 'Study of Earth''s physical features and human activities', '🌍', '#8B5CF6'),
('Quran', 'Islamic studies and Quranic teachings', '📖', '#EF4444')
ON CONFLICT (name) DO NOTHING;

-- Insert default topics for Biology
INSERT INTO topics (name, description, subject_id) VALUES
('Human Anatomy', 'Structure and organization of the human body', (SELECT id FROM subjects WHERE name = 'Biology')),
('Plant Biology', 'Study of plant structure, growth, and reproduction', (SELECT id FROM subjects WHERE name = 'Biology')),
('Life Cycles', 'Biological processes of growth, reproduction, and death', (SELECT id FROM subjects WHERE name = 'Biology')),
('Cell Structure', 'Basic unit of life and cellular components', (SELECT id FROM subjects WHERE name = 'Biology')),
('Genetics', 'Study of heredity and genetic variation', (SELECT id FROM subjects WHERE name = 'Biology'))
ON CONFLICT (name, subject_id) DO NOTHING;

-- Insert default topics for Chemistry
INSERT INTO topics (name, description, subject_id) VALUES
('Atomic Structure', 'Structure of atoms and their components', (SELECT id FROM subjects WHERE name = 'Chemistry')),
('Periodic Table', 'Organization of chemical elements', (SELECT id FROM subjects WHERE name = 'Chemistry')),
('Chemical Reactions', 'Processes that lead to chemical transformation', (SELECT id FROM subjects WHERE name = 'Chemistry')),
('Acids and Bases', 'Properties and reactions of acids and bases', (SELECT id FROM subjects WHERE name = 'Chemistry')),
('Organic Chemistry', 'Study of carbon-containing compounds', (SELECT id FROM subjects WHERE name = 'Chemistry'))
ON CONFLICT (name, subject_id) DO NOTHING;

-- Insert default topics for Physics
INSERT INTO topics (name, description, subject_id) VALUES
('Motion and Forces', 'Study of movement and the forces that cause it', (SELECT id FROM subjects WHERE name = 'Physics')),
('Light and Optics', 'Properties and behavior of light', (SELECT id FROM subjects WHERE name = 'Physics')),
('Energy and Work', 'Forms of energy and energy transformations', (SELECT id FROM subjects WHERE name = 'Physics')),
('Electricity', 'Electric charge, current, and circuits', (SELECT id FROM subjects WHERE name = 'Physics')),
('Waves and Sound', 'Properties of waves and sound phenomena', (SELECT id FROM subjects WHERE name = 'Physics'))
ON CONFLICT (name, subject_id) DO NOTHING;

-- Insert default topics for Geography
INSERT INTO topics (name, description, subject_id) VALUES
('Landforms', 'Physical features of Earth''s surface', (SELECT id FROM subjects WHERE name = 'Geography')),
('Climate and Weather', 'Atmospheric conditions and patterns', (SELECT id FROM subjects WHERE name = 'Geography')),
('Water Bodies', 'Oceans, rivers, lakes, and their characteristics', (SELECT id FROM subjects WHERE name = 'Geography')),
('Natural Resources', 'Earth''s materials used by humans', (SELECT id FROM subjects WHERE name = 'Geography')),
('Human Geography', 'Human activities and their spatial distribution', (SELECT id FROM subjects WHERE name = 'Geography'))
ON CONFLICT (name, subject_id) DO NOTHING;

-- Insert default topics for Quran
INSERT INTO topics (name, description, subject_id) VALUES
('Creation and Cosmology', 'Quranic verses about the creation of the universe', (SELECT id FROM subjects WHERE name = 'Quran')),
('Human Development', 'Stages of human development mentioned in the Quran', (SELECT id FROM subjects WHERE name = 'Quran')),
('Natural Phenomena', 'Natural processes described in the Quran', (SELECT id FROM subjects WHERE name = 'Quran')),
('Scientific Miracles', 'Scientific facts mentioned in the Quran', (SELECT id FROM subjects WHERE name = 'Quran')),
('Environmental Stewardship', 'Islamic teachings on caring for the environment', (SELECT id FROM subjects WHERE name = 'Quran'))
ON CONFLICT (name, subject_id) DO NOTHING;

-- Insert sample materials
INSERT INTO materials (title, description, content, type, subject_id, topic_id, quranic_connection, tags, difficulty, duration, is_published, created_by) VALUES
(
    'The Five Senses in Islam',
    'Exploring how the Quran describes human senses',
    'The Quran mentions the five senses as gifts from Allah...',
    'video',
    (SELECT id FROM subjects WHERE name = 'Biology'),
    (SELECT id FROM topics WHERE name = 'Human Anatomy'),
    'And Allah brought you out from the wombs of your mothers while you knew nothing, and He gave you hearing and sight and hearts (i.e. the power of understanding) that you might give thanks. (Quran 16:78)',
    ARRAY['senses', 'islam', 'biology'],
    'beginner',
    '15 minutes',
    true,
    'admin'
),
(
    'Everything Came from Water',
    'Scientific accuracy of Quranic statement about water and life',
    'The Quran states that all living things are made from water...',
    'article',
    (SELECT id FROM subjects WHERE name = 'Biology'),
    (SELECT id FROM topics WHERE name = 'Life Cycles'),
    'And We made from water every living thing. Will they not believe? (Quran 21:30)',
    ARRAY['water', 'life', 'quran', 'science'],
    'intermediate',
    '20 minutes',
    true,
    'admin'
),
(
    'Mountains as Pegs',
    'Geological accuracy of Quranic description of mountains',
    'The Quran describes mountains as pegs that stabilize the earth...',
    'infographic',
    (SELECT id FROM subjects WHERE name = 'Geography'),
    (SELECT id FROM topics WHERE name = 'Landforms'),
    'And the mountains as pegs? (Quran 78:7)',
    ARRAY['mountains', 'geology', 'quran'],
    'intermediate',
    '10 minutes',
    true,
    'admin'
)
ON CONFLICT DO NOTHING;

-- Insert sample users
INSERT INTO users (email, name, role) VALUES
('admin@qnekt.com', 'Admin User', 'admin'),
('teacher@qnekt.com', 'Teacher User', 'teacher'),
('student@qnekt.com', 'Student User', 'student')
ON CONFLICT (email) DO NOTHING;

-- Insert sample announcements
INSERT INTO announcements (title, content, type, is_published, created_by) VALUES
('Welcome to Qnekt Platform', 'Welcome to our Islamic educational platform where science meets faith.', 'welcome', true, 'admin'),
('New Biology Course Available', 'We have added new content to our Biology section with Quranic connections.', 'course', true, 'admin')
ON CONFLICT DO NOTHING;

-- Create a function to get statistics
CREATE OR REPLACE FUNCTION get_platform_statistics()
RETURNS TABLE (
    total_subjects BIGINT,
    total_topics BIGINT,
    total_materials BIGINT,
    published_materials BIGINT,
    video_count BIGINT,
    pdf_count BIGINT,
    infographic_count BIGINT,
    quiz_count BIGINT
) AS $$
BEGIN
    RETURN QUERY
    SELECT 
        (SELECT COUNT(*) FROM subjects) as total_subjects,
        (SELECT COUNT(*) FROM topics) as total_topics,
        (SELECT COUNT(*) FROM materials) as total_materials,
        (SELECT COUNT(*) FROM materials WHERE is_published = true) as published_materials,
        (SELECT COUNT(*) FROM materials WHERE type = 'video') as video_count,
        (SELECT COUNT(*) FROM materials WHERE type = 'pdf') as pdf_count,
        (SELECT COUNT(*) FROM materials WHERE type = 'infographic') as infographic_count,
        (SELECT COUNT(*) FROM materials WHERE type = 'quiz') as quiz_count;
END;
$$ LANGUAGE plpgsql;

-- Grant necessary permissions (adjust as needed for your setup)
-- GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO your_user;
-- GRANT ALL PRIVILEGES ON ALL SEQUENCES IN SCHEMA public TO your_user;

-- Display success message
DO $$
BEGIN
    RAISE NOTICE 'Qnekt database initialized successfully!';
    RAISE NOTICE 'Created % subjects, % topics, and % materials', 
        (SELECT COUNT(*) FROM subjects),
        (SELECT COUNT(*) FROM topics),
        (SELECT COUNT(*) FROM materials);
END $$;
[V0_FILE]typescript:file="app/actions/topic-actions.ts" isEdit="true" isMerged="true"
"use server"

import { revalidatePath } from "next/cache"
import {
  getAllSubjects,
  getAllTopics,
  createTopic,
  deleteTopic,
  getTopicsBySubject,
  getSubjectById,
} from "@/lib/db-operations"
import type { Subject, Topic } from "@/lib/database"

// Action result type
type ActionResult<T> = {
  success: boolean
  data: T
  error?: string
}

// Get all subjects
export async function getSubjectsAction(): Promise<ActionResult<Subject[]>> {
  try {
    console.log("🔄 Fetching subjects...")
    const subjects = await getAllSubjects()
    console.log(`✅ Found ${subjects.length} subjects`)

return {
      success: true,
      data: subjects,
    }
  } catch (error) {
    console.error("❌ Error in getSubjectsAction:", error)
    return {
      success: false,
      data: [],
      error: error instanceof Error ? error.message : "Failed to fetch subjects",
    }
  }
}

// Get all topics
export async function getTopicsAction(): Promise<ActionResult<Topic[]>> {
  try {
    console.log("🔄 Fetching topics...")
    const topics = await getAllTopics()
    console.log(`✅ Found ${topics.length} topics`)

return {
      success: true,
      data: topics,
    }
  } catch (error) {
    console.error("❌ Error in getTopicsAction:", error)
    return {
      success: false,
      data: [],
      error: error instanceof Error ? error.message : "Failed to fetch topics",
    }
  }
}

// Get topics by subject
export async function getTopicsBySubjectAction(subjectId: number): Promise<ActionResult<Topic[]>> {
  try {
    console.log(`🔄 Fetching topics for subject ${subjectId}...`)
    const topics = await getTopicsBySubject(subjectId)
    console.log(`✅ Found ${topics.length} topics for subject ${subjectId}`)

return {
      success: true,
      data: topics,
    }
  } catch (error) {
    console.error("❌ Error in getTopicsBySubjectAction:", error)
    return {
      success: false,
      data: [],
      error: error instanceof Error ? error.message : "Failed to fetch topics for subject",
    }
  }
}

// Create a new topic
export async function createTopicAction(formData: FormData): Promise<ActionResult<Topic>> {
  try {
    const name = formData.get("name") as string
    const subjectId = formData.get("subjectId") as string
    const description = formData.get("description") as string

console.log("🔄 Creating topic:", { name, subjectId, description })

// Validation
    if (!name || !name.trim()) {
      return {
        success: false,
        data: {} as Topic,
        error: "Topic name is required",
      }
    }

if (!subjectId || isNaN(Number(subjectId))) {
      return {
        success: false,
        data: {} as Topic,
        error: "Valid subject ID is required",
      }
    }

// Verify subject exists
    const subject = await getSubjectById(Number(subjectId))
    if (!subject) {
      return {
        success: false,
        data: {} as Topic,
        error: "Subject not found",
      }
    }

// Create the topic
    const topic = await createTopic(name.trim(), Number(subjectId), description?.trim() || undefined)

console.log("✅ Topic created successfully:", topic)

// Revalidate relevant paths
    revalidatePath("/admin/content-upload")
    revalidatePath("/admin/topic-upload")
    revalidatePath("/admin")
    revalidatePath("/subjects")

return {
      success: true,
      data: topic,
    }
  } catch (error) {
    console.error("❌ Error in createTopicAction:", error)
    return {
      success: false,
      data: {} as Topic,
      error: error instanceof Error ? error.message : "Failed to create topic",
    }
  }
}

// Delete a topic
export async function deleteTopicAction(topicId: number): Promise<ActionResult<boolean>> {
  try {
    console.log(`🔄 Deleting topic ${topicId}...`)

if (!topicId || isNaN(topicId)) {
      return {
        success: false,
        data: false,
        error: "Valid topic ID is required",
      }
    }

const success = await deleteTopic(topicId)

if (!success) {
      return {
        success: false,
        data: false,
        error: "Topic not found or could not be deleted",
      }
    }

console.log(`✅ Topic ${topicId} deleted successfully`)

// Revalidate relevant paths
    revalidatePath("/admin/content-upload")
    revalidatePath("/admin/topic-upload")
    revalidatePath("/admin")
    revalidatePath("/subjects")

return {
      success: true,
      data: true,
    }
  } catch (error) {
    console.error("❌ Error in deleteTopicAction:", error)
    return {
      success: false,
      data: false,
      error: error instanceof Error ? error.message : "Failed to delete topic",
    }
  }
}

// Test database connection
export async function testDatabaseAction(): Promise<ActionResult<boolean>> {
  try {
    console.log("🔄 Testing database connection...")
    const subjects = await getAllSubjects()
    console.log("✅ Database connection test successful")

return {
      success: true,
      data: true,
    }
  } catch (error) {
    console.error("❌ Database connection test failed:", error)
    return {
      success: false,
      data: false,
      error: error instanceof Error ? error.message : "Database connection failed",
    }
  }
}

// Get topics and subjects (combined action)
export async function getTopicsAndSubjects() {
  try {
    console.log("🔄 Fetching topics and subjects...")
    const [topics, subjects] = await Promise.all([getAllTopics(), getAllSubjects()])

console.log(`✅ Loaded ${subjects.length} subjects and ${topics.length} topics`)

return { topics, subjects }
  } catch (error) {
    console.error("❌ Error fetching topics and subjects:", error)
    return { topics: [], subjects: [] }
  }
}
[V0_FILE]typescript:file="lib/database.ts" isEdit="true" isMerged="true"
import { neon } from "@neondatabase/serverless"

// Get database URL from environment variables with fallback options
const getDatabaseUrl = () => {
  const possibleUrls = [
    process.env.NEON_NEON_DATABASE_URL,
    process.env.NEON_POSTGRES_URL,
    process.env.NEON_POSTGRES_PRISMA_URL,
    process.env.DATABASE_URL,
  ]

for (const url of possibleUrls) {
    if (url && url.trim()) {
      console.log(`Using database URL from environment variable`)
      return url
    }
  }

// If no URL found, return a placeholder that will cause a more graceful error
  console.warn("No database URL found in environment variables")
  return null
}

// Initialize database connection with error handling
let sql: any = null
let connectionError: string | null = null

try {
  const databaseUrl = getDatabaseUrl()
  if (databaseUrl) {
    sql = neon(databaseUrl)
    console.log("✅ Database connection initialized")
  } else {
    connectionError =
      "No database URL found. Please set one of: NEON_DATABASE_URL, NEON_POSTGRES_URL, NEON_POSTGRES_PRISMA_URL, or DATABASE_URL"
    console.error("❌", connectionError)
  }
} catch (error) {
  connectionError = `Failed to initialize database connection: ${error}`
  console.error("❌", connectionError)
}

// Database types
export interface Subject {
  id: number
  name: string
  description: string | null
  icon: string
  color: string
  created_at: string
  updated_at: string
  topic_count?: number
}

export interface Topic {
  id: number
  name: string
  description: string | null
  subject_id: number
  subject_name?: string
  created_at: string
  updated_at: string
}

export interface Material {
  id: number
  title: string
  description: string | null
  content: string | null
  type: string
  subject_id: number
  topic_id: number
  subject_name?: string
  topic_name?: string
  quranic_connection: string | null
  tags: string[]
  difficulty: string
  duration: string | null
  thumbnail_url: string | null
  file_url: string | null
  is_published: boolean
  views: number
  rating: number
  created_by: string
  created_at: string
  updated_at: string
}

export interface User {
  id: number
  email: string
  name: string
  role: string
  avatar_url: string | null
  created_at: string
  updated_at: string
}

export interface Announcement {
  id: number
  title: string
  content: string
  type: string
  is_published: boolean
  created_by: string
  created_at: string
  updated_at: string
}

// Error handling utility
export function handleDatabaseError(error: any): string {
  console.error("Database error:", error)

if (error.code === "23505") {
    return "A record with this information already exists"
  }

if (error.code === "23503") {
    return "Referenced record not found"
  }

if (error.code === "42P01") {
    return "Database table not found. Please run the initialization script."
  }

if (error.message?.includes("connect")) {
    return "Unable to connect to database. Please check your connection."
  }

return error.message || "An unexpected database error occurred"
}

// Test database connection
export async function testConnection(): Promise<{ success: boolean; error?: string }> {
  if (connectionError) {
    return { success: false, error: connectionError }
  }

if (!sql) {
    return { success: false, error: "Database connection not initialized" }
  }

try {
    const result = await sql`SELECT 1 as test, NOW() as timestamp`
    console.log("✅ Database connection test successful:", result[0])
    return { success: true }
  } catch (error: any) {
    console.error("❌ Database connection test failed:", error)
    return { success: false, error: error.message || "Connection test failed" }
  }
}

// Initialize database connection
export async function initializeDatabase(): Promise<{ success: boolean; error?: string }> {
  try {
    console.log("🔄 Testing database connection...")
    const connectionTest = await testConnection()

if (!connectionTest.success) {
      return { success: false, error: connectionTest.error }
    }

// Test if tables exist
    const tablesExist = await sql`
      SELECT COUNT(*) as count 
      FROM information_schema.tables 
      WHERE table_schema = 'public' 
      AND table_name IN ('subjects', 'topics', 'materials')
    `

if (Number(tablesExist[0].count) < 3) {
      console.log("⚠️  Database tables not found. Please run the initialization script.")
      return {
        success: false,
        error: "Database tables not found. Please run the initialization script.",
      }
    } else {
      console.log("✅ Database tables found")
    }

console.log("✅ Database initialized successfully")
    return { success: true }
  } catch (error: any) {
    console.error("❌ Failed to initialize database:", error)
    return { success: false, error: error.message || "Database initialization failed" }
  }
}

// Export sql with null check
export { sql, connectionError }
[V0_FILE]typescript:file="lib/db-operations.ts" isEdit="true" isMerged="true"
import { sql, handleDatabaseError, type Subject, type Topic, type Material } from "./database"

// Check if database is available
function checkDatabase() {
  if (!sql) {
    throw new Error("Database connection not available. Please check your environment variables.")
  }
}

// Subject operations
export async function getAllSubjects(): Promise<Subject[]> {
  try {
    checkDatabase()
    const subjects = await sql`
      SELECT s.*, 
             COUNT(t.id) as topic_count
      FROM subjects s
      LEFT JOIN topics t ON s.id = t.subject_id
      GROUP BY s.id, s.name, s.description, s.icon, s.color, s.created_at, s.updated_at
      ORDER BY s.name
    `
    return subjects.map((subject: any) => ({
      ...subject,
      topic_count: Number(subject.topic_count),
    }))
  } catch (error) {
    console.error("Error fetching subjects:", error)
    return []
  }
}

export async function getSubjectById(id: number): Promise<Subject | null> {
  try {
    checkDatabase()
    const result = await sql`
      SELECT s.*, 
             COUNT(t.id) as topic_count
      FROM subjects s
      LEFT JOIN topics t ON s.id = t.subject_id
      WHERE s.id = ${id}
      GROUP BY s.id, s.name, s.description, s.icon, s.color, s.created_at, s.updated_at
    `

if (result.length === 0) return null

return {
      ...result[0],
      topic_count: Number(result[0].topic_count),
    }
  } catch (error) {
    console.error("Error fetching subject:", error)
    return null
  }
}

export async function createSubject(subject: Omit<Subject, "id" | "created_at" | "updated_at">): Promise<Subject> {
  try {
    checkDatabase()
    const result = await sql`
      INSERT INTO subjects (name, description, icon, color)
      VALUES (${subject.name}, ${subject.description}, ${subject.icon}, ${subject.color})
      RETURNING *
    `
    return result[0]
  } catch (error) {
    throw new Error(handleDatabaseError(error))
  }
}

export async function updateSubject(id: number, updates: Partial<Subject>): Promise<Subject> {
  try {
    checkDatabase()
    const result = await sql`
      UPDATE subjects 
      SET name = COALESCE(${updates.name}, name),
          description = COALESCE(${updates.description}, description),
          icon = COALESCE(${updates.icon}, icon),
          color = COALESCE(${updates.color}, color),
          updated_at = NOW()
      WHERE id = ${id}
      RETURNING *
    `

if (result.length === 0) {
      throw new Error("Subject not found")
    }

return result[0]
  } catch (error) {
    throw new Error(handleDatabaseError(error))
  }
}

export async function deleteSubject(id: number): Promise<boolean> {
  try {
    checkDatabase()
    const result = await sql`DELETE FROM subjects WHERE id = ${id}`
    return result.count > 0
  } catch (error) {
    throw new Error(handleDatabaseError(error))
  }
}

// Topic operations
export async function getAllTopics(): Promise<Topic[]> {
  try {
    checkDatabase()
    const topics = await sql`
      SELECT t.*, s.name as subject_name
      FROM topics t
      LEFT JOIN subjects s ON t.subject_id = s.id
      ORDER BY s.name, t.name
    `
    return topics
  } catch (error) {
    console.error("Error fetching topics:", error)
    return []
  }
}

export async function getTopicsBySubject(subjectId: number): Promise<Topic[]> {
  try {
    checkDatabase()
    const topics = await sql`
      SELECT t.*, s.name as subject_name
      FROM topics t
      LEFT JOIN subjects s ON t.subject_id = s.id
      WHERE t.subject_id = ${subjectId}
      ORDER BY t.name
    `
    return topics
  } catch (error) {
    console.error("Error fetching topics by subject:", error)
    return []
  }
}

export async function getTopicById(id: number): Promise<Topic | null> {
  try {
    checkDatabase()
    const result = await sql`
      SELECT t.*, s.name as subject_name
      FROM topics t
      LEFT JOIN subjects s ON t.subject_id = s.id
      WHERE t.id = ${id}
    `
    return result.length > 0 ? result[0] : null
  } catch (error) {
    console.error("Error fetching topic:", error)
    return null
  }
}

export async function createTopic(
  topic: Omit<Topic, "id" | "created_at" | "updated_at" | "subject_name">,
): Promise<Topic> {
  try {
    checkDatabase()
    const result = await sql`
      INSERT INTO topics (name, description, subject_id)
      VALUES (${topic.name}, ${topic.description}, ${topic.subject_id})
      RETURNING *
    `
    return result[0]
  } catch (error) {
    throw new Error(handleDatabaseError(error))
  }
}

export async function updateTopic(id: number, updates: Partial<Topic>): Promise<Topic> {
  try {
    checkDatabase()
    const result = await sql`
      UPDATE topics 
      SET name = COALESCE(${updates.name}, name),
          description = COALESCE(${updates.description}, description),
          subject_id = COALESCE(${updates.subject_id}, subject_id),
          updated_at = NOW()
      WHERE id = ${id}
      RETURNING *
    `

if (result.length === 0) {
      throw new Error("Topic not found")
    }

return result[0]
  } catch (error) {
    throw new Error(handleDatabaseError(error))
  }
}

export async function deleteTopic(id: number): Promise<boolean> {
  try {
    checkDatabase()
    const result = await sql`DELETE FROM topics WHERE id = ${id}`
    return result.count > 0
  } catch (error) {
    throw new Error(handleDatabaseError(error))
  }
}

// Material operations
export async function getAllMaterials(): Promise<Material[]> {
  try {
    checkDatabase()
    const materials = await sql`
      SELECT m.*, s.name as subject_name, t.name as topic_name
      FROM materials m
      LEFT JOIN subjects s ON m.subject_id = s.id
      LEFT JOIN topics t ON m.topic_id = t.id
      ORDER BY m.created_at DESC
    `
    return materials.map((material: any) => ({
      ...material,
      tags: Array.isArray(material.tags) ? material.tags : [],
    }))
  } catch (error) {
    console.error("Error fetching materials:", error)
    return []
  }
}

export async function getMaterialsBySubject(subjectId: number): Promise<Material[]> {
  try {
    checkDatabase()
    const materials = await sql`
      SELECT m.*, s.name as subject_name, t.name as topic_name
      FROM materials m
      LEFT JOIN subjects s ON m.subject_id = s.id
      LEFT JOIN topics t ON m.topic_id = t.id
      WHERE m.subject_id = ${subjectId}
      ORDER BY m.created_at DESC
    `
    return materials.map((material: any) => ({
      ...material,
      tags: Array.isArray(material.tags) ? material.tags : [],
    }))
  } catch (error) {
    console.error("Error fetching materials by subject:", error)
    return []
  }
}

export async function getMaterialsByTopic(topicId: number): Promise<Material[]> {
  try {
    checkDatabase()
    const materials = await sql`
      SELECT m.*, s.name as subject_name, t.name as topic_name
      FROM materials m
      LEFT JOIN subjects s ON m.subject_id = s.id
      LEFT JOIN topics t ON m.topic_id = t.id
      WHERE m.topic_id = ${topicId}
      ORDER BY m.created_at DESC
    `
    return materials.map((material: any) => ({
      ...material,
      tags: Array.isArray(material.tags) ? material.tags : [],
    }))
  } catch (error) {
    console.error("Error fetching materials by topic:", error)
    return []
  }
}

export async function getMaterialById(id: number): Promise<Material | null> {
  try {
    checkDatabase()
    const result = await sql`
      SELECT m.*, s.name as subject_name, t.name as topic_name
      FROM materials m
      LEFT JOIN subjects s ON m.subject_id = s.id
      LEFT JOIN topics t ON m.topic_id = t.id
      WHERE m.id = ${id}
    `

if (result.length === 0) return null

return {
      ...result[0],
      tags: Array.isArray(result[0].tags) ? result[0].tags : [],
    }
  } catch (error) {
    console.error("Error fetching material:", error)
    return null
  }
}

export async function createMaterial(
  material: Omit<Material, "id" | "created_at" | "updated_at" | "subject_name" | "topic_name">,
): Promise<Material> {
  try {
    checkDatabase()
    const result = await sql`
      INSERT INTO materials (
        title, description, content, type, subject_id, topic_id,
        quranic_connection, tags, difficulty, duration, thumbnail_url,
        file_url, is_published, views, rating, created_by
      )
      VALUES (
        ${material.title}, ${material.description}, ${material.content},
        ${material.type}, ${material.subject_id}, ${material.topic_id},
        ${material.quranic_connection}, ${JSON.stringify(material.tags)}, 
        ${material.difficulty}, ${material.duration}, ${material.thumbnail_url},
        ${material.file_url}, ${material.is_published}, ${material.views},
        ${material.rating}, ${material.created_by}
      )
      RETURNING *
    `
    return {
      ...result[0],
      tags: Array.isArray(result[0].tags) ? result[0].tags : [],
    }
  } catch (error) {
    throw new Error(handleDatabaseError(error))
  }
}

export async function updateMaterial(id: number, updates: Partial<Material>): Promise<Material> {
  try {
    checkDatabase()
    const result = await sql`
      UPDATE materials 
      SET title = COALESCE(${updates.title}, title),
          description = COALESCE(${updates.description}, description),
          content = COALESCE(${updates.content}, content),
          type = COALESCE(${updates.type}, type),
          subject_id = COALESCE(${updates.subject_id}, subject_id),
          topic_id = COALESCE(${updates.topic_id}, topic_id),
          quranic_connection = COALESCE(${updates.quranic_connection}, quranic_connection),
          tags = COALESCE(${updates.tags ? JSON.stringify(updates.tags) : null}, tags),
          difficulty = COALESCE(${updates.difficulty}, difficulty),
          duration = COALESCE(${updates.duration}, duration),
          thumbnail_url = COALESCE(${updates.thumbnail_url}, thumbnail_url),
          file_url = COALESCE(${updates.file_url}, file_url),
          is_published = COALESCE(${updates.is_published}, is_published),
          views = COALESCE(${updates.views}, views),
          rating = COALESCE(${updates.rating}, rating),
          updated_at = NOW()
      WHERE id = ${id}
      RETURNING *
    `

if (result.length === 0) {
      throw new Error("Material not found")
    }

return {
      ...result[0],
      tags: Array.isArray(result[0].tags) ? result[0].tags : [],
    }
  } catch (error) {
    throw new Error(handleDatabaseError(error))
  }
}

export async function deleteMaterial(id: number): Promise<boolean> {
  try {
    checkDatabase()
    const result = await sql`DELETE FROM materials WHERE id = ${id}`
    return result.count > 0
  } catch (error) {
    throw new Error(handleDatabaseError(error))
  }
}

// Statistics
export async function getStorageStats() {
  try {
    checkDatabase()
    const [subjectCount, topicCount, materialCount] = await Promise.all([
      sql`SELECT COUNT(*) as count FROM subjects`,
      sql`SELECT COUNT(*) as count FROM topics`,
      sql`SELECT COUNT(*) as count FROM materials`,
    ])

return {
      subjects: Number(subjectCount[0].count),
      topics: Number(topicCount[0].count),
      materials: Number(materialCount[0].count),
    }
  } catch (error) {
    console.error("Error fetching storage stats:", error)
    return {
      subjects: 0,
      topics: 0,
      materials: 0,
    }
  }
}
[V0_FILE]typescriptreact:file="app/subjects/chemistry/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="lib/unified-storage.ts" isEdit="true" isQuickEdit="true" isMerged="true"
// Unified Storage System for Qnekt Platform
// This module provides a unified interface for data storage operations
// It maintains backward compatibility while using the new database backend

import { EventEmitter } from "events"
import {
  getAllSubjects,
  getAllTopics,
  getAllMaterials,
  getSubjectById,
  getTopicById,
  getMaterialById,
  createSubject,
  createTopic,
  deleteTopic,
  searchMaterials,
  getMaterialsBySubjectName,
  addSampleMaterials,
} from "./simple-storage"
import type { Material } from "./simple-storage"

// Event emitter for real-time updates
export const storageEvents = new EventEmitter()

// Legacy types for backward compatibility
export interface LearningMaterial {
  id: string
  title: string
  subject: string
  topic: string
  type: "video" | "pdf" | "infographic" | "quiz" | "article" | "interactive"
  difficulty: "beginner" | "intermediate" | "advanced"
  duration: string
  description: string
  content: string
  quranicConnection?: string
  tags: string[]
  createdBy: string
  isPublished: boolean
  thumbnailUrl?: string
  fileUrl?: string
  views: number
  rating: number
  createdAt: string
  updatedAt: string
}

// Storage statistics interface
export interface StorageStats {
  totalMaterials: number
  totalSubjects: number
  totalTopics: number
  materialsByType: {
    video: number
    pdf: number
    infographic: number
    quiz: number
  }
  materialsBySubject: Record<string, number>
}

// Conversion functions between database and legacy formats
function convertToLearningMaterial(material: Material): LearningMaterial {
  return {
    id: material.id.toString(),
    title: material.title,
    subject: material.subject_name || "",
    topic: material.topic_name || "",
    type: material.type,
    difficulty: material.difficulty,
    duration: material.duration || "",
    description: material.description,
    content: material.content,
    quranicConnection: material.quranic_connection,
    tags: material.tags,
    createdBy: material.created_by,
    isPublished: material.is_published,
    thumbnailUrl: material.thumbnail_url,
    fileUrl: material.file_url,
    views: material.views,
    rating: material.rating,
    createdAt: material.created_at,
    updatedAt: material.updated_at,
  }
}

// Subject operations
export async function getSubjects(): Promise<LearningMaterial[]> {
  try {
    const dbSubjects = getAllSubjects()
    const dbTopics = getAllTopics()

const subjects: LearningMaterial[] = []
    dbSubjects.forEach((subject) => {
      const legacySubject: LearningMaterial = {
        id: subject.id.toString(),
        title: subject.name,
        subject: subject.name,
        topic: "",
        type: "article",
        difficulty: "beginner",
        duration: "",
        description: subject.description || "",
        content: "",
        quranicConnection: undefined,
        tags: [],
        createdBy: "",
        isPublished: true,
        thumbnailUrl: undefined,
        fileUrl: undefined,
        views: 0,
        rating: 0,
        createdAt: subject.created_at,
        updatedAt: subject.updated_at,
      }
      subjects.push(legacySubject)
    })

return subjects
  } catch (error) {
    console.error("Error getting subjects:", error)
    return []
  }
}

export async function getSubject(id: string): Promise<LearningMaterial | null> {
  try {
    const dbSubject = getSubjectById(Number(id))
    if (!dbSubject) return null

const legacySubject: LearningMaterial = {
      id: dbSubject.id.toString(),
      title: dbSubject.name,
      subject: dbSubject.name,
      topic: "",
      type: "article",
      difficulty: "beginner",
      duration: "",
      description: dbSubject.description || "",
      content: "",
      quranicConnection: undefined,
      tags: [],
      createdBy: "",
      isPublished: true,
      thumbnailUrl: undefined,
      fileUrl: undefined,
      views: 0,
      rating: 0,
      createdAt: dbSubject.created_at,
      updatedAt: dbSubject.updated_at,
    }

return legacySubject
  } catch (error) {
    console.error("Error getting subject:", error)
    return null
  }
}

export function addSubject(subjectData: {
  name: string
  description: string
  icon: string
  color: string
}): LearningMaterial {
  // This is a synchronous function in the legacy API, but we need to handle async operations
  // For now, we'll throw an error and recommend using the async version
  throw new Error("Use createSubjectAsync instead for database operations")
}

export async function createSubjectAsync(subjectData: {
  name: string
  description: string
  icon: string
  color: string
}): Promise<LearningMaterial> {
  try {
    const dbSubject = await createSubject(
      subjectData.name,
      subjectData.description,
      subjectData.icon,
      subjectData.color,
    )

// Emit update event
    storageEvents.emit("subjectsUpdated", await getSubjects())

return legacySubject
  } catch (error) {
    console.error("Error creating subject:", error)
    throw error
  }
}

// Topic operations
export async function getTopics(): Promise<LearningMaterial[]> {
  try {
    const dbTopics = getAllTopics()
    return dbTopics.map(convertToLearningMaterial)
  } catch (error) {
    console.error("Error getting topics:", error)
    return []
  }
}

export async function getTopic(id: string): Promise<LearningMaterial | null> {
  try {
    const dbTopic = getTopicById(Number(id))
    return dbTopic ? convertToLearningMaterial(dbTopic) : null
  } catch (error) {
    console.error("Error getting topic:", error)
    return null
  }
}

export function addTopicToSubject(subjectId: string, topicName: string, description?: string): boolean {
  // This is a synchronous function in the legacy API
  // For now, we'll return false and recommend using the async version
  console.warn("Use addTopicToSubjectAsync instead for database operations")
  return false
}

export async function addTopicToSubjectAsync(
  subjectId: string,
  topicName: string,
  description?: string,
): Promise<LearningMaterial> {
  try {
    const dbTopic = await createTopic(topicName, Number(subjectId), description)
    const legacyTopic = convertToLearningMaterial(dbTopic)

// Emit update events
    storageEvents.emit("topicsUpdated", await getTopics())
    storageEvents.emit("subjectsUpdated", await getSubjects())

return legacyTopic
  } catch (error) {
    console.error("Error adding topic to subject:", error)
    throw error
  }
}

export async function deleteTopicFromSubject(subjectId: string, topicName: string): Promise<boolean> {
  try {
    const dbTopics = getAllTopics()
    const topicToDelete = dbTopics.find((topic) => topic.name === topicName && topic.subject_id === Number(subjectId))

if (!topicToDelete) {
      return false
    }

const success = await deleteTopic(topicToDelete.id)

if (success) {
      // Emit update events
      storageEvents.emit("topicsUpdated", await getTopics())
      storageEvents.emit("subjectsUpdated", await getSubjects())
    }

return success
  } catch (error) {
    console.error("Error deleting topic from subject:", error)
    return false
  }
}

// Material operations
export function getMaterials(): LearningMaterial[] {
  addSampleMaterials() // Ensure sample data exists
  const materials = getAllMaterials()
  return materials.map(convertToLearningMaterial)
}

export function getMaterial(id: string): LearningMaterial | null {
  addSampleMaterials() // Ensure sample data exists
  const material = getMaterialById(Number(id))
  return material ? convertToLearningMaterial(material) : null
}

export function getMaterialsBySubject(subjectName: string): LearningMaterial[] {
  addSampleMaterials() // Ensure sample data exists
  const materials = getMaterialsBySubjectName(subjectName)
  return materials.map(convertToLearningMaterial)
}

export function getMaterialsByTopic(subjectName: string, topicName: string): LearningMaterial[] {
  addSampleMaterials() // Ensure sample data exists
  const allMaterials = getAllMaterials()
  const filteredMaterials = allMaterials.filter(
    (material) => material.subject_name === subjectName && material.topic_name === topicName,
  )
  return filteredMaterials.map(convertToLearningMaterial)
}

export function searchMaterialsAsync(query: string): Promise<LearningMaterial[]> {
  return new Promise((resolve) => {
    addSampleMaterials() // Ensure sample data exists
    const results = searchMaterials(query)
    resolve(results.map(convertToLearningMaterial))
  })
}

// Statistics - This is the missing function that was causing the error
export function getStorageStats(): StorageStats {
  // This is a synchronous function, but we need async database operations
  // Return default values and recommend using the async version
  console.warn("Use getStorageStatsAsync instead for database operations")
  return {
    totalMaterials: 0,
    totalSubjects: 0,
    totalTopics: 0,
    materialsByType: {
      video: 0,
      pdf: 0,
      infographic: 0,
      quiz: 0,
    },
    materialsBySubject: {},
  }
}

export async function getStorageStatsAsync(): Promise<StorageStats> {
  try {
    const stats = await getStorageStats()
    const subjects = getAllSubjects()
    const materials = getAllMaterials()

// Calculate materials by subject
    const materialsBySubject: Record<string, number> = {}
    subjects.forEach((subject) => {
      const count = materials.filter((material) => material.subject_id === subject.id).length
      if (count > 0) {
        materialsBySubject[subject.name] = count
      }
    })

return {
      totalMaterials: Number(stats.total_materials) || 0,
      totalSubjects: Number(stats.total_subjects) || 0,
      totalTopics: Number(stats.total_topics) || 0,
      materialsByType: {
        video: Number(stats.video_count) || 0,
        pdf: Number(stats.pdf_count) || 0,
        infographic: Number(stats.infographic_count) || 0,
        quiz: Number(stats.quiz_count) || 0,
      },
      materialsBySubject,
    }
  } catch (error) {
    console.error("Error getting storage stats:", error)
    return {
      totalMaterials: 0,
      totalSubjects: 0,
      totalTopics: 0,
      materialsByType: {
        video: 0,
        pdf: 0,
        infographic: 0,
        quiz: 0,
      },
      materialsBySubject: {},
    }
  }
}

// Export types for backward compatibility
export type { LearningMaterial }

// Default export for convenience
export default {
  getSubjects,
  getSubject,
  addSubject,
  createSubjectAsync,
  getTopics,
  getTopic,
  addTopicToSubject,
  addTopicToSubjectAsync,
  deleteTopicFromSubject,
  getMaterials,
  getMaterial,
  getMaterialsBySubject,
  getMaterialsByTopic,
  searchMaterialsAsync,
  getStorageStats,
  getStorageStatsAsync,
  storageEvents,
}
[V0_FILE]typescript:file="hooks/use-materials.ts" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { getMaterialsBySubjectName, addSampleMaterials, type Material } from "@/lib/simple-storage"

export function useMaterials() {
  const [materials, setMaterials] = useState<Material[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const loadMaterials = () => {
      try {
        setLoading(true)
        addSampleMaterials()
        // For now, return empty array since we don't have a getAllMaterials function
        setMaterials([])
      } catch (error) {
        console.error("Error loading materials:", error)
        setMaterials([])
      } finally {
        setLoading(false)
      }
    }

loadMaterials()
  }, [])

return { materials, loading }
}

export function useMaterialsBySubject(subjectName: string) {
  const [materials, setMaterials] = useState<Material[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const loadMaterials = async () => {
      try {
        setLoading(true)
        setError(null)

// Add sample materials if none exist
        addSampleMaterials()

const subjectMaterials = getMaterialsBySubjectName(subjectName)
        setMaterials(subjectMaterials)

console.log(`📚 Loaded ${subjectMaterials.length} materials for ${subjectName}`)
      } catch (err) {
        console.error(`❌ Error loading materials for ${subjectName}:`, err)
        setError("Failed to load materials")
        setMaterials([])
      } finally {
        setLoading(false)
      }
    }

loadMaterials()
  }, [subjectName])

return { materials, loading, error }
}

export function useMaterialsByTopic(subject: string, topic: string) {
  const [materials, setMaterials] = useState<Material[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const loadMaterials = () => {
      try {
        setLoading(true)
        addSampleMaterials()

const allMaterials = getMaterialsBySubjectName(subject)
        const topicMaterials = allMaterials.filter((m) => m.topic_name === topic)
        setMaterials(topicMaterials)
      } catch (error) {
        console.error("Error loading materials:", error)
        setMaterials([])
      } finally {
        setLoading(false)
      }
    }

loadMaterials()
  }, [subject, topic])

return { materials, loading }
}

export function useMaterial(id: string) {
  const [material, setMaterial] = useState<Material | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const loadMaterial = () => {
      try {
        setLoading(true)
        addSampleMaterials()

// Find material by ID
        const allMaterials = getMaterialsBySubjectName("Chemistry") // For now, just check Chemistry
        const foundMaterial = allMaterials.find((m) => m.id.toString() === id)
        setMaterial(foundMaterial || null)
      } catch (error) {
        console.error("Error loading material:", error)
        setMaterial(null)
      } finally {
        setLoading(false)
      }
    }

loadMaterial()
  }, [id])

return { material, loading }
}

export function useSimpleMaterialsBySubject(subjectName: string) {
  const [materials, setMaterials] = useState<Material[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const loadMaterials = async () => {
      try {
        setLoading(true)
        setError(null)

// Add sample materials if none exist
        addSampleMaterials()

const subjectMaterials = getMaterialsBySubjectName(subjectName)
        setMaterials(subjectMaterials)

loadMaterials()
  }, [subjectName])

return { materials, loading, error }
}
[V0_FILE]typescript:file="lib/simple-storage.ts" isEdit="true" isMerged="true"
// Simple Storage System for Qnekt Platform
// This is a lightweight, in-memory storage system for development and testing

export interface Subject {
  id: number
  name: string
  description: string
  icon: string
  color: string
  created_at: string
  updated_at: string
}

export interface Topic {
  id: number
  name: string
  description?: string
  subject_id: number
  subject_name?: string
  created_at: string
  updated_at: string
}

export interface Material {
  id: number
  title: string
  description: string
  content: string
  type: "video" | "pdf" | "infographic" | "quiz" | "article" | "interactive"
  subject_id: number
  topic_id: number
  subject_name?: string
  topic_name?: string
  quranic_connection?: string
  tags: string[]
  difficulty: "beginner" | "intermediate" | "advanced"
  duration?: string
  thumbnail_url?: string
  file_url?: string
  is_published: boolean
  views: number
  rating: number
  created_by: string
  created_at: string
  updated_at: string
}

// In-memory storage
const subjects: Subject[] = [
  {
    id: 1,
    name: "Biology",
    description: "Study of living organisms and their interactions",
    icon: "🧬",
    color: "#10B981",
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
  },
  {
    id: 2,
    name: "Chemistry",
    description: "Science of matter, its properties and reactions",
    icon: "⚗️",
    color: "#3B82F6",
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
  },
  {
    id: 3,
    name: "Physics",
    description: "Study of matter, energy, and their interactions",
    icon: "⚛️",
    color: "#8B5CF6",
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
  },
  {
    id: 4,
    name: "Geography",
    description: "Study of Earth's features and human interactions",
    icon: "🌍",
    color: "#F59E0B",
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
  },
  {
    id: 5,
    name: "Quran",
    description: "Islamic studies and Quranic teachings",
    icon: "📖",
    color: "#059669",
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
  },
]

let topics: Topic[] = []
let materials: Material[] = []
const nextId = { subject: 6, topic: 1, material: 1 }

// Helper function to add sample materials
export function addSampleMaterials() {
  if (materials.length > 0) return // Already added

// Add some sample topics first
  if (topics.length === 0) {
    topics = [
      // Chemistry topics
      {
        id: 1,
        name: "Atomic Structure",
        description: "Understanding atoms and their components",
        subject_id: 2,
        subject_name: "Chemistry",
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      },
      {
        id: 2,
        name: "Chemical Reactions",
        description: "How substances interact and transform",
        subject_id: 2,
        subject_name: "Chemistry",
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      },
      {
        id: 3,
        name: "Periodic Table",
        description: "Organization of chemical elements",
        subject_id: 2,
        subject_name: "Chemistry",
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      },
      // Biology topics
      {
        id: 4,
        name: "Human Anatomy",
        description: "Structure of the human body",
        subject_id: 1,
        subject_name: "Biology",
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      },
      {
        id: 5,
        name: "Plant Biology",
        description: "Study of plants and their processes",
        subject_id: 1,
        subject_name: "Biology",
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      },
      {
        id: 6,
        name: "Life Cycles",
        description: "Cycles of life in nature",
        subject_id: 1,
        subject_name: "Biology",
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      },
    ]
    nextId.topic = 7
  }

// Add sample materials
  materials = [
    // Chemistry materials
    {
      id: 1,
      title: "Introduction to Atoms",
      description: "Learn about the basic building blocks of matter and how they relate to Allah's creation",
      content: "Atoms are the fundamental units of matter...",
      type: "video",
      subject_id: 2,
      topic_id: 1,
      subject_name: "Chemistry",
      topic_name: "Atomic Structure",
      quranic_connection: "Allah created everything in pairs and perfect balance",
      tags: ["atoms", "matter", "basics"],
      difficulty: "beginner",
      duration: "15 minutes",
      is_published: true,
      views: 0,
      rating: 5,
      created_by: "Admin",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
    {
      id: 2,
      title: "Chemical Bonding Basics",
      description: "Understanding how atoms connect to form molecules",
      content: "Chemical bonds are the forces that hold atoms together...",
      type: "pdf",
      subject_id: 2,
      topic_id: 2,
      subject_name: "Chemistry",
      topic_name: "Chemical Reactions",
      quranic_connection: "Allah joins things together with perfect wisdom",
      tags: ["bonding", "molecules", "chemistry"],
      difficulty: "intermediate",
      duration: "20 minutes",
      is_published: true,
      views: 0,
      rating: 4,
      created_by: "Admin",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
    {
      id: 3,
      title: "Elements and Compounds Quiz",
      description: "Test your knowledge of chemical elements and compounds",
      content: "Interactive quiz about elements and compounds...",
      type: "quiz",
      subject_id: 2,
      topic_id: 3,
      subject_name: "Chemistry",
      topic_name: "Periodic Table",
      quranic_connection: "Each element has unique properties by Allah's design",
      tags: ["quiz", "elements", "compounds"],
      difficulty: "beginner",
      duration: "10 minutes",
      is_published: true,
      views: 0,
      rating: 5,
      created_by: "Admin",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
    // Biology materials
    {
      id: 4,
      title: "The Human Heart",
      description: "Explore the amazing design of the human heart and its functions",
      content: "The human heart is a remarkable organ...",
      type: "video",
      subject_id: 1,
      topic_id: 4,
      subject_name: "Biology",
      topic_name: "Human Anatomy",
      quranic_connection: "Allah created humans in the best form",
      tags: ["heart", "anatomy", "circulation"],
      difficulty: "beginner",
      duration: "18 minutes",
      is_published: true,
      views: 0,
      rating: 5,
      created_by: "Admin",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
    {
      id: 5,
      title: "Photosynthesis Process",
      description: "Learn how plants convert sunlight into energy",
      content: "Photosynthesis is the process by which plants...",
      type: "infographic",
      subject_id: 1,
      topic_id: 5,
      subject_name: "Biology",
      topic_name: "Plant Biology",
      quranic_connection: "Allah made plants to produce oxygen for all living beings",
      tags: ["photosynthesis", "plants", "energy"],
      difficulty: "intermediate",
      duration: "12 minutes",
      is_published: true,
      views: 0,
      rating: 4,
      created_by: "Admin",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
    {
      id: 6,
      title: "Butterfly Life Cycle",
      description: "Discover the amazing transformation of butterflies",
      content: "The butterfly life cycle consists of four stages...",
      type: "article",
      subject_id: 1,
      topic_id: 6,
      subject_name: "Biology",
      topic_name: "Life Cycles",
      quranic_connection: "Allah shows us signs of resurrection through nature's cycles",
      tags: ["butterfly", "metamorphosis", "life cycle"],
      difficulty: "beginner",
      duration: "8 minutes",
      is_published: true,
      views: 0,
      rating: 5,
      created_by: "Admin",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
  ]
  nextId.material = 7

console.log("✅ Sample materials added:", materials.length)
}

// Subject operations
export function getAllSubjects(): Subject[] {
  return [...subjects]
}

export function getSubjectById(id: number): Subject | null {
  return subjects.find((s) => s.id === id) || null
}

export function getSubjectByName(name: string): Subject | null {
  return subjects.find((s) => s.name === name) || null
}

export function createSubject(data: Omit<Subject, "id" | "created_at" | "updated_at">): Subject {
  const newSubject: Subject = {
    ...data,
    id: nextId.subject++,
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
  }
  subjects.push(newSubject)
  return newSubject
}

// Topic operations
export function getAllTopics(): Topic[] {
  return topics.map((topic) => ({
    ...topic,
    subject_name: subjects.find((s) => s.id === topic.subject_id)?.name,
  }))
}

export function getTopicById(id: number): Topic | null {
  const topic = topics.find((t) => t.id === id)
  if (!topic) return null
  return {
    ...topic,
    subject_name: subjects.find((s) => s.id === topic.subject_id)?.name,
  }
}

export function getTopicsBySubject(subjectId: number): Topic[] {
  return topics
    .filter((t) => t.subject_id === subjectId)
    .map((topic) => ({
      ...topic,
      subject_name: subjects.find((s) => s.id === topic.subject_id)?.name,
    }))
}

export function createTopic(data: Omit<Topic, "id" | "created_at" | "updated_at" | "subject_name">): Topic {
  const newTopic: Topic = {
    ...data,
    id: nextId.topic++,
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
  }
  topics.push(newTopic)
  return {
    ...newTopic,
    subject_name: subjects.find((s) => s.id === newTopic.subject_id)?.name,
  }
}

// Material operations
export function getAllMaterials(): Material[] {
  return materials.map((material) => ({
    ...material,
    subject_name: subjects.find((s) => s.id === material.subject_id)?.name,
    topic_name: topics.find((t) => t.id === material.topic_id)?.name,
  }))
}

export function getMaterialById(id: number): Material | null {
  const material = materials.find((m) => m.id === id)
  if (!material) return null
  return {
    ...material,
    subject_name: subjects.find((s) => s.id === material.subject_id)?.name,
    topic_name: topics.find((t) => t.id === material.topic_id)?.name,
  }
}

export function getMaterialsBySubjectName(subjectName: string): Material[] {
  const subject = subjects.find((s) => s.name === subjectName)
  if (!subject) return []

return materials
    .filter((m) => m.subject_id === subject.id)
    .map((material) => ({
      ...material,
      subject_name: subject.name,
      topic_name: topics.find((t) => t.id === material.topic_id)?.name,
    }))
}

export function getMaterialsByTopic(topicId: number): Material[] {
  return materials
    .filter((m) => m.topic_id === topicId)
    .map((material) => ({
      ...material,
      subject_name: subjects.find((s) => s.id === material.subject_id)?.name,
      topic_name: topics.find((t) => t.id === material.topic_id)?.name,
    }))
}

export function createMaterial(
  data: Omit<Material, "id" | "created_at" | "updated_at" | "subject_name" | "topic_name">,
): Material {
  const newMaterial: Material = {
    ...data,
    id: nextId.material++,
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
  }
  materials.push(newMaterial)
  return {
    ...newMaterial,
    subject_name: subjects.find((s) => s.id === newMaterial.subject_id)?.name,
    topic_name: topics.find((t) => t.id === newMaterial.topic_id)?.name,
  }
}

// Statistics
export function getStorageStats() {
  const materialsByType = materials.reduce(
    (acc, material) => {
      acc[material.type] = (acc[material.type] || 0) + 1
      return acc
    },
    {} as Record<string, number>,
  )

const materialsBySubject = materials.reduce(
    (acc, material) => {
      const subjectName = subjects.find((s) => s.id === material.subject_id)?.name || "Unknown"
      acc[subjectName] = (acc[subjectName] || 0) + 1
      return acc
    },
    {} as Record<string, number>,
  )

return {
    subjects: subjects.length,
    topics: topics.length,
    materials: materials.length,
    materialsByType: {
      video: materialsByType.video || 0,
      pdf: materialsByType.pdf || 0,
      infographic: materialsByType.infographic || 0,
      quiz: materialsByType.quiz || 0,
    },
    materialsBySubject,
  }
}

// Search function
export function searchMaterials(query: string): Material[] {
  const lowercaseQuery = query.toLowerCase()
  return materials
    .filter(
      (material) =>
        material.title.toLowerCase().includes(lowercaseQuery) ||
        material.description.toLowerCase().includes(lowercaseQuery) ||
        material.tags.some((tag) => tag.toLowerCase().includes(lowercaseQuery)),
    )
    .map((material) => ({
      ...material,
      subject_name: subjects.find((s) => s.id === material.subject_id)?.name,
      topic_name: topics.find((t) => t.id === material.topic_id)?.name,
    }))
}
[V0_FILE]typescript:file="app/actions/simple-actions.ts" isEdit="true" isMerged="true"
"use server"

import {
  getAllSubjects,
  getAllTopics,
  createTopic,
  createMaterial,
  getSubjectByName,
  getTopicById,
  type Material,
} from "@/lib/simple-storage"

export async function getTopicsAndSubjects() {
  try {
    const subjects = getAllSubjects()
    const topics = getAllTopics()

console.log("📊 Fetched data:", {
      subjects: subjects.length,
      topics: topics.length,
    })

return {
      success: true,
      subjects,
      topics,
    }
  } catch (error) {
    console.error("❌ Error fetching topics and subjects:", error)
    return {
      success: false,
      error: "Failed to fetch data",
      subjects: [],
      topics: [],
    }
  }
}

export async function createTopicAction(formData: FormData) {
  try {
    const topicName = formData.get("topicName") as string
    const subjectName = formData.get("subjectName") as string
    const description = formData.get("description") as string

console.log("🔄 Creating topic:", { topicName, subjectName, description })

if (!topicName || !subjectName) {
      return {
        success: false,
        error: "Topic name and subject are required",
      }
    }

// Find the subject
    const subject = getSubjectByName(subjectName)
    if (!subject) {
      return {
        success: false,
        error: `Subject "${subjectName}" not found`,
      }
    }

// Create the topic
    const newTopic = createTopic({
      name: topicName,
      description: description || undefined,
      subject_id: subject.id,
    })

console.log("✅ Topic created successfully:", newTopic)

return {
      success: true,
      topic: newTopic,
      message: `Topic "${topicName}" created successfully!`,
    }
  } catch (error) {
    console.error("❌ Error creating topic:", error)
    return {
      success: false,
      error: "Failed to create topic",
    }
  }
}

export async function createMaterialAction(formData: FormData) {
  try {
    const title = formData.get("title") as string
    const description = formData.get("description") as string
    const content = formData.get("content") as string
    const type = formData.get("type") as Material["type"]
    const topicId = formData.get("topicId") as string
    const difficulty = formData.get("difficulty") as Material["difficulty"]
    const duration = formData.get("duration") as string
    const quranicConnection = formData.get("quranicConnection") as string
    const tags = formData.get("tags") as string

console.log("🔄 Creating material:", {
      title,
      type,
      topicId,
      difficulty,
    })

if (!title || !type || !topicId) {
      return {
        success: false,
        error: "Title, type, and topic are required",
      }
    }

// Find the topic
    const topic = getTopicById(Number(topicId))
    if (!topic) {
      return {
        success: false,
        error: "Topic not found",
      }
    }

// Parse tags
    const tagArray = tags
      ? tags
          .split(",")
          .map((tag) => tag.trim())
          .filter((tag) => tag.length > 0)
      : []

// Create the material
    const newMaterial = createMaterial({
      title,
      description: description || "",
      content: content || "",
      type,
      subject_id: topic.subject_id,
      topic_id: Number(topicId),
      quranic_connection: quranicConnection || undefined,
      tags: tagArray,
      difficulty: difficulty || "beginner",
      duration: duration || undefined,
      is_published: true,
      views: 0,
      rating: 0,
      created_by: "Admin",
    })

console.log("✅ Material created successfully:", newMaterial)

return {
      success: true,
      material: newMaterial,
      message: `Material "${title}" created successfully!`,
    }
  } catch (error) {
    console.error("❌ Error creating material:", error)
    return {
      success: false,
      error: "Failed to create material",
    }
  }
}
[V0_FILE]typescript:file="app/admin/content-upload/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } 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 { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { createTopicAction, createMaterialAction, getTopicsAndSubjects } from "@/app/actions/simple-actions"
import { Upload, BookOpen, FileText, CheckCircle, AlertCircle } from "lucide-react"
import type { Subject, Topic } from "@/lib/simple-storage"

export default function ContentUploadPage() {
  const [subjects, setSubjects] = useState<Subject[]>([])
  const [topics, setTopics] = useState<Topic[]>([])
  const [selectedSubject, setSelectedSubject] = useState<string>("")
  const [filteredTopics, setFilteredTopics] = useState<Topic[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [isDataLoading, setIsDataLoading] = useState(true)

const topicFormRef = useRef<HTMLFormElement>(null)
  const materialFormRef = useRef<HTMLFormElement>(null)
  const { toast } = useToast()

// Load subjects and topics
  const loadData = async () => {
    try {
      setIsDataLoading(true)
      const result = await getTopicsAndSubjects()
      if (result.success) {
        setSubjects(result.subjects)
        setTopics(result.topics)
        console.log("✅ Data loaded:", {
          subjects: result.subjects.length,
          topics: result.topics.length,
        })
      } else {
        console.error("❌ Failed to load data:", result.error)
        toast({
          title: "Error",
          description: result.error || "Failed to load data",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("❌ Error loading data:", error)
      toast({
        title: "Error",
        description: "Failed to load subjects and topics",
        variant: "destructive",
      })
    } finally {
      setIsDataLoading(false)
    }
  }

useEffect(() => {
    loadData()
  }, [])

// Filter topics when subject changes
  useEffect(() => {
    if (selectedSubject) {
      const subject = subjects.find((s) => s.name === selectedSubject)
      if (subject) {
        const subjectTopics = topics.filter((t) => t.subject_id === subject.id)
        setFilteredTopics(subjectTopics)
      }
    } else {
      setFilteredTopics([])
    }
  }, [selectedSubject, subjects, topics])

const handleCreateTopic = async (formData: FormData) => {
    try {
      setIsLoading(true)
      console.log("🔄 Submitting topic form...")

const result = await createTopicAction(formData)

if (result.success) {
        console.log("✅ Topic created:", result.topic)
        toast({
          title: "Success!",
          description: result.message,
        })

// Reset form
        if (topicFormRef.current) {
          topicFormRef.current.reset()
        }

// Reload data to show new topic
        await loadData()
      } else {
        console.error("❌ Topic creation failed:", result.error)
        toast({
          title: "Error",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("❌ Error creating topic:", error)
      toast({
        title: "Error",
        description: "Failed to create topic",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleCreateMaterial = async (formData: FormData) => {
    try {
      setIsLoading(true)
      console.log("🔄 Submitting material form...")

const result = await createMaterialAction(formData)

if (result.success) {
        console.log("✅ Material created:", result.material)
        toast({
          title: "Success!",
          description: result.message,
        })

// Reset form
        if (materialFormRef.current) {
          materialFormRef.current.reset()
        }
        setSelectedSubject("")
      } else {
        console.error("❌ Material creation failed:", result.error)
        toast({
          title: "Error",
          description: result.error,
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("❌ Error creating material:", error)
      toast({
        title: "Error",
        description: "Failed to create material",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

if (isDataLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-qnekt-green mx-auto mb-4"></div>
          <p className="text-gray-600">Loading content management...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-qnekt-black mb-2">Content Upload</h1>
          <p className="text-gray-600">Create topics and upload learning materials</p>

{/* Status */}
          <div className="mt-4 flex items-center gap-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
            <CheckCircle className="h-5 w-5 text-blue-600" />
            <span className="text-blue-800 font-medium">Content Management Ready</span>
            <span className="text-blue-600 text-sm ml-2">
              {subjects.length} subjects, {topics.length} topics
            </span>
          </div>
        </div>

<Tabs defaultValue="topics" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="topics" className="flex items-center gap-2">
              <BookOpen className="h-4 w-4" />
              Create Topics
            </TabsTrigger>
            <TabsTrigger value="materials" className="flex items-center gap-2">
              <Upload className="h-4 w-4" />
              Upload Materials
            </TabsTrigger>
          </TabsList>

{/* Create Topics Tab */}
          <TabsContent value="topics">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <BookOpen className="h-5 w-5" />
                  Create New Topic
                </CardTitle>
                <CardDescription>Add a new topic to an existing subject</CardDescription>
              </CardHeader>
              <CardContent>
                <form ref={topicFormRef} action={handleCreateTopic} className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label htmlFor="topicName">Topic Name *</Label>
                      <Input
                        id="topicName"
                        name="topicName"
                        placeholder="e.g., Atomic Structure"
                        required
                        disabled={isLoading}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="subjectName">Subject *</Label>
                      <Select name="subjectName" required disabled={isLoading}>
                        <SelectTrigger>
                          <SelectValue placeholder="Select a subject" />
                        </SelectTrigger>
                        <SelectContent>
                          {subjects.map((subject) => (
                            <SelectItem key={subject.id} value={subject.name}>
                              {subject.icon} {subject.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="description">Description</Label>
                    <Textarea
                      id="description"
                      name="description"
                      placeholder="Brief description of the topic..."
                      rows={3}
                      disabled={isLoading}
                    />
                  </div>

{/* Topics Overview */}
            <Card className="mt-6">
              <CardHeader>
                <CardTitle>Existing Topics</CardTitle>
                <CardDescription>Overview of all created topics</CardDescription>
              </CardHeader>
              <CardContent>
                {topics.length === 0 ? (
                  <div className="text-center py-8 text-gray-500">
                    <FileText className="h-12 w-12 mx-auto mb-3 opacity-50" />
                    <p className="font-medium">No topics created yet</p>
                    <p className="text-sm">Create your first topic above</p>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {topics.map((topic) => (
                      <div key={topic.id} className="p-4 border rounded-lg bg-white">
                        <h3 className="font-medium text-gray-900">{topic.name}</h3>
                        <p className="text-sm text-gray-600 mt-1">{topic.subject_name}</p>
                        {topic.description && <p className="text-xs text-gray-500 mt-2">{topic.description}</p>}
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

{/* Upload Materials Tab */}
          <TabsContent value="materials">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Upload className="h-5 w-5" />
                  Upload Learning Material
                </CardTitle>
                <CardDescription>Add new learning content to a topic</CardDescription>
              </CardHeader>
              <CardContent>
                {topics.length === 0 ? (
                  <div className="text-center py-12">
                    <AlertCircle className="h-12 w-12 mx-auto mb-4 text-orange-500" />
                    <h3 className="text-lg font-medium text-gray-900 mb-2">No Topics Available</h3>
                    <p className="text-gray-600 mb-4">You need to create topics before uploading materials.</p>
                    <Button
                      onClick={() => {
                        const tabsList = document.querySelector('[role="tablist"]')
                        const topicsTab = tabsList?.querySelector('[value="topics"]') as HTMLElement
                        topicsTab?.click()
                      }}
                      className="bg-qnekt-green hover:bg-qnekt-green/90"
                    >
                      <BookOpen className="h-4 w-4 mr-2" />
                      Create Topics First
                    </Button>
                  </div>
                ) : (
                  <form ref={materialFormRef} action={handleCreateMaterial} className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="title">Material Title *</Label>
                        <Input
                          id="title"
                          name="title"
                          placeholder="e.g., Introduction to Atoms"
                          required
                          disabled={isLoading}
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="type">Material Type *</Label>
                        <Select name="type" required disabled={isLoading}>
                          <SelectTrigger>
                            <SelectValue placeholder="Select material type" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="video">📹 Video</SelectItem>
                            <SelectItem value="pdf">📄 PDF Document</SelectItem>
                            <SelectItem value="infographic">🎨 Infographic</SelectItem>
                            <SelectItem value="quiz">❓ Quiz</SelectItem>
                            <SelectItem value="article">📝 Article</SelectItem>
                            <SelectItem value="interactive">🎮 Interactive</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="materialSubject">Subject *</Label>
                        <Select
                          value={selectedSubject}
                          onValueChange={setSelectedSubject}
                          required
                          disabled={isLoading}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select subject" />
                          </SelectTrigger>
                          <SelectContent>
                            {subjects.map((subject) => (
                              <SelectItem key={subject.id} value={subject.name}>
                                {subject.icon} {subject.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="topicId">Topic *</Label>
                        <Select name="topicId" required disabled={isLoading || !selectedSubject}>
                          <SelectTrigger>
                            <SelectValue placeholder="Select topic" />
                          </SelectTrigger>
                          <SelectContent>
                            {filteredTopics.map((topic) => (
                              <SelectItem key={topic.id} value={topic.id.toString()}>
                                {topic.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="description">Description *</Label>
                      <Textarea
                        id="description"
                        name="description"
                        placeholder="Describe what students will learn..."
                        rows={3}
                        required
                        disabled={isLoading}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="content">Content</Label>
                      <Textarea
                        id="content"
                        name="content"
                        placeholder="Main content or lesson text..."
                        rows={4}
                        disabled={isLoading}
                      />
                    </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="difficulty">Difficulty Level</Label>
                        <Select name="difficulty" disabled={isLoading}>
                          <SelectTrigger>
                            <SelectValue placeholder="Select difficulty" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="beginner">🟢 Beginner</SelectItem>
                            <SelectItem value="intermediate">🟡 Intermediate</SelectItem>
                            <SelectItem value="advanced">🔴 Advanced</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="duration">Duration</Label>
                        <Input id="duration" name="duration" placeholder="e.g., 15 minutes" disabled={isLoading} />
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="quranicConnection">Quranic Connection</Label>
                      <Textarea
                        id="quranicConnection"
                        name="quranicConnection"
                        placeholder="How does this topic relate to Quranic teachings?"
                        rows={2}
                        disabled={isLoading}
                      />
                    </div>

<Button
                      type="submit"
                      disabled={isLoading}
                      className="w-full bg-qnekt-green hover:bg-qnekt-green/90"
                    >
                      {isLoading ? (
                        <>
                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                          Uploading Material...
                        </>
                      ) : (
                        <>
                          <Upload className="h-4 w-4 mr-2" />
                          Upload Material
                        </>
                      )}
                    </Button>
                  </form>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/data.ts" isMerged="true"
// Simple hardcoded data for the frontend
export interface Subject {
  id: string
  name: string
  description: string
  icon: string
  color: string
  topics: Topic[]
}

export interface Topic {
  id: string
  name: string
  description: string
  materials: Material[]
}

export interface Material {
  id: string
  title: string
  description: string
  type: "video" | "pdf" | "infographic" | "quiz" | "article"
  difficulty: "beginner" | "intermediate" | "advanced"
  duration: string
  quranicConnection?: string
  tags: string[]
  thumbnailUrl?: string
}

export const subjects: Subject[] = [
  {
    id: "biology",
    name: "Biology",
    description: "Study of living organisms and their interactions",
    icon: "🧬",
    color: "#10B981",
    topics: [
      {
        id: "human-anatomy",
        name: "Human Anatomy",
        description: "Explore the intricate design of the human body",
        materials: [
          {
            id: "heart-structure",
            title: "The Human Heart",
            description: "Discover the amazing design of the human heart and its functions",
            type: "video",
            difficulty: "beginner",
            duration: "15 minutes",
            quranicConnection: "Allah created humans in the best form (Quran 95:4)",
            tags: ["heart", "circulation", "anatomy"],
            thumbnailUrl: "/subjects/biology/heart-thumbnail.jpg",
          },
          {
            id: "respiratory-system",
            title: "Breathing and Life",
            description: "Learn how Allah designed our respiratory system",
            type: "infographic",
            difficulty: "beginner",
            duration: "10 minutes",
            quranicConnection: "And We breathed into him of Our spirit (Quran 15:29)",
            tags: ["lungs", "breathing", "oxygen"],
          },
        ],
      },
      {
        id: "plant-biology",
        name: "Plant Biology",
        description: "Learn about photosynthesis and plant structures",
        materials: [
          {
            id: "photosynthesis",
            title: "Photosynthesis: Nature's Solar Power",
            description: "How plants convert sunlight into energy",
            type: "video",
            difficulty: "intermediate",
            duration: "20 minutes",
            quranicConnection:
              "And We send down blessed rain from the sky and make grow thereby gardens and grain (Quran 50:9)",
            tags: ["photosynthesis", "plants", "energy", "chlorophyll"],
          },
          {
            id: "plant-growth",
            title: "How Plants Grow",
            description: "The miracle of plant growth and development",
            type: "article",
            difficulty: "beginner",
            duration: "12 minutes",
            quranicConnection: "And Allah has caused you to grow from the earth like plants (Quran 71:17)",
            tags: ["growth", "development", "roots", "stems"],
          },
        ],
      },
      {
        id: "life-cycles",
        name: "Life Cycles",
        description: "Study the fascinating cycles of life",
        materials: [
          {
            id: "butterfly-cycle",
            title: "Butterfly Metamorphosis",
            description: "The amazing transformation of butterflies",
            type: "infographic",
            difficulty: "beginner",
            duration: "8 minutes",
            quranicConnection: "Allah shows us signs of resurrection through nature's cycles",
            tags: ["butterfly", "metamorphosis", "transformation"],
          },
        ],
      },
    ],
  },
  {
    id: "chemistry",
    name: "Chemistry",
    description: "Science of matter, its properties and reactions",
    icon: "⚗️",
    color: "#3B82F6",
    topics: [
      {
        id: "atomic-structure",
        name: "Atomic Structure",
        description: "Understanding atoms and their components",
        materials: [
          {
            id: "intro-atoms",
            title: "Introduction to Atoms",
            description: "Learn about the basic building blocks of matter",
            type: "video",
            difficulty: "beginner",
            duration: "15 minutes",
            quranicConnection: "Allah created everything in pairs and perfect balance",
            tags: ["atoms", "protons", "neutrons", "electrons"],
          },
          {
            id: "electron-shells",
            title: "Electron Shells and Orbitals",
            description: "How electrons orbit around the nucleus",
            type: "article",
            difficulty: "intermediate",
            duration: "18 minutes",
            quranicConnection: "Everything moves in its own orbit by Allah's design",
            tags: ["electrons", "orbitals", "shells", "energy levels"],
          },
        ],
      },
      {
        id: "chemical-reactions",
        name: "Chemical Reactions",
        description: "How substances interact and transform",
        materials: [
          {
            id: "chemical-bonding",
            title: "Chemical Bonding Basics",
            description: "Understanding how atoms connect to form molecules",
            type: "pdf",
            difficulty: "intermediate",
            duration: "20 minutes",
            quranicConnection: "Allah joins things together with perfect wisdom",
            tags: ["bonding", "molecules", "ionic", "covalent"],
          },
        ],
      },
      {
        id: "periodic-table",
        name: "Periodic Table",
        description: "Organization of chemical elements",
        materials: [
          {
            id: "elements-quiz",
            title: "Elements and Compounds Quiz",
            description: "Test your knowledge of chemical elements",
            type: "quiz",
            difficulty: "beginner",
            duration: "10 minutes",
            quranicConnection: "Each element has unique properties by Allah's design",
            tags: ["elements", "compounds", "periodic table"],
          },
        ],
      },
    ],
  },
  {
    id: "physics",
    name: "Physics",
    description: "Study of matter, energy, and their interactions",
    icon: "⚛️",
    color: "#8B5CF6",
    topics: [
      {
        id: "motion-forces",
        name: "Motion & Forces",
        description: "Understanding how things move",
        materials: [
          {
            id: "newtons-laws",
            title: "Newton's Laws of Motion",
            description: "The fundamental laws governing motion",
            type: "video",
            difficulty: "intermediate",
            duration: "25 minutes",
            quranicConnection: "Allah has set everything in motion with perfect laws",
            tags: ["motion", "forces", "newton", "physics"],
          },
        ],
      },
      {
        id: "light-optics",
        name: "Light & Optics",
        description: "The nature of light and vision",
        materials: [
          {
            id: "light-properties",
            title: "Properties of Light",
            description: "Understanding light waves and particles",
            type: "article",
            difficulty: "beginner",
            duration: "15 minutes",
            quranicConnection: "Allah is the light of the heavens and the earth (Quran 24:35)",
            tags: ["light", "waves", "optics", "vision"],
          },
        ],
      },
    ],
  },
  {
    id: "geography",
    name: "Geography",
    description: "Study of Earth's features and human interactions",
    icon: "🌍",
    color: "#F59E0B",
    topics: [
      {
        id: "landforms",
        name: "Landforms",
        description: "Mountains, valleys, and Earth's features",
        materials: [
          {
            id: "mountain-formation",
            title: "How Mountains Are Formed",
            description: "The geological processes that create mountains",
            type: "video",
            difficulty: "intermediate",
            duration: "18 minutes",
            quranicConnection: "And We placed therein lofty, firmly set mountains (Quran 77:27)",
            tags: ["mountains", "geology", "tectonic plates"],
          },
        ],
      },
      {
        id: "water-bodies",
        name: "Water Bodies",
        description: "Oceans, rivers, and the water cycle",
        materials: [
          {
            id: "water-cycle",
            title: "The Water Cycle",
            description: "How water moves through our planet",
            type: "infographic",
            difficulty: "beginner",
            duration: "12 minutes",
            quranicConnection: "And We send down water from the sky in due measure (Quran 23:18)",
            tags: ["water cycle", "evaporation", "precipitation"],
          },
        ],
      },
    ],
  },
  {
    id: "quran",
    name: "Quran",
    description: "Islamic studies and Quranic teachings",
    icon: "📖",
    color: "#059669",
    topics: [
      {
        id: "creation-cosmology",
        name: "Creation & Cosmology",
        description: "Quranic verses about the creation of the universe",
        materials: [
          {
            id: "big-bang-quran",
            title: "The Big Bang in the Quran",
            description: "Quranic verses that describe the beginning of the universe",
            type: "article",
            difficulty: "intermediate",
            duration: "20 minutes",
            quranicConnection:
              "Have those who disbelieved not considered that the heavens and the earth were a joined entity, and We separated them (Quran 21:30)",
            tags: ["creation", "universe", "big bang", "cosmology"],
          },
        ],
      },
      {
        id: "human-development",
        name: "Human Development",
        description: "Quranic description of human embryology",
        materials: [
          {
            id: "embryology-quran",
            title: "Human Development in the Quran",
            description: "The stages of human development as described in the Quran",
            type: "video",
            difficulty: "beginner",
            duration: "22 minutes",
            quranicConnection: "And certainly did We create man from an extract of clay (Quran 23:12)",
            tags: ["embryology", "human development", "creation"],
          },
        ],
      },
    ],
  },
]

// Helper functions
export function getSubjectById(id: string): Subject | undefined {
  return subjects.find((subject) => subject.id === id)
}

export function getTopicById(subjectId: string, topicId: string): Topic | undefined {
  const subject = getSubjectById(subjectId)
  return subject?.topics.find((topic) => topic.id === topicId)
}

export function getMaterialById(subjectId: string, topicId: string, materialId: string): Material | undefined {
  const topic = getTopicById(subjectId, topicId)
  return topic?.materials.find((material) => material.id === materialId)
}

export function getAllMaterials(): Material[] {
  return subjects.flatMap((subject) => subject.topics.flatMap((topic) => topic.materials))
}

export function getMaterialsBySubject(subjectId: string): Material[] {
  const subject = getSubjectById(subjectId)
  if (!subject) return []

return subject.topics.flatMap((topic) => topic.materials)
}

export function searchMaterials(query: string): Material[] {
  const allMaterials = getAllMaterials()
  const lowercaseQuery = query.toLowerCase()

return allMaterials.filter(
    (material) =>
      material.title.toLowerCase().includes(lowercaseQuery) ||
      material.description.toLowerCase().includes(lowercaseQuery) ||
      material.tags.some((tag) => tag.toLowerCase().includes(lowercaseQuery)),
  )
}
[V0_FILE]typescriptreact:file="app/subjects/biology/page.tsx" isEdit="true" isMerged="true"
"use client"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight, Dna, Leaf, RotateCcw, Play, FileText, ImageIcon, HelpCircle, Clock } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ColoredHeading } from "@/components/colored-heading"
import { getSubjectById } from "@/lib/data"

export default function BiologyPage() {
  const subject = getSubjectById("biology")

if (!subject) {
    return <div>Subject not found</div>
  }

const topicIcons = {
    "human-anatomy": Dna,
    "plant-biology": Leaf,
    "life-cycles": RotateCcw,
  }

const materialTypeIcons = {
    video: Play,
    pdf: FileText,
    infographic: ImageIcon,
    quiz: HelpCircle,
    article: FileText,
  }

const difficultyColors = {
    beginner: "bg-green-100 text-green-800",
    intermediate: "bg-yellow-100 text-yellow-800",
    advanced: "bg-red-100 text-red-800",
  }

const allMaterials = subject.topics.flatMap((topic) =>
    topic.materials.map((material) => ({ ...material, topicName: topic.name })),
  )

return (
    <div className="bg-gray-50 dark:bg-gray-900">
      <header className="relative h-[400px] text-white">
        <Image
          src="/subjects/biology/overview.png"
          alt="Biology illustration"
          fill
          className="object-cover brightness-50"
        />
        <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-4">
          <ColoredHeading element="h1" className="text-4xl md:text-6xl font-bold mb-4">
            The Study of Life: Biology
          </ColoredHeading>
          <p className="text-lg md:text-xl max-w-3xl">
            Biology is the natural science that studies life and living organisms, including their physical structure,
            chemical processes, molecular interactions, physiological mechanisms, development and evolution.
          </p>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <section id="topics" className="mb-16">
          <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Explore Biology Topics</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {subject.topics.map((topic) => {
              const IconComponent = topicIcons[topic.id as keyof typeof topicIcons] || Dna
              return (
                <Card
                  key={topic.id}
                  className="overflow-hidden hover:shadow-xl transition-shadow duration-300 bg-white dark:bg-gray-800"
                >
                  <CardHeader className="p-0">
                    <Image
                      src={`/subjects/biology/topic_${topic.id.replace("-", "_")}.png`}
                      alt={topic.name}
                      width={400}
                      height={250}
                      className="w-full h-48 object-cover"
                    />
                  </CardHeader>
                  <CardContent className="p-6">
                    <div className="flex items-center mb-4">
                      <IconComponent className="h-8 w-8 text-qnekt-green mr-4" />
                      <CardTitle className="text-xl font-semibold text-gray-900 dark:text-white">
                        {topic.name}
                      </CardTitle>
                    </div>
                    <p className="text-gray-600 dark:text-gray-300 mb-4">{topic.description}</p>
                    <Badge variant="secondary">{topic.materials.length} materials</Badge>
                  </CardContent>
                  <CardFooter className="p-6 pt-0">
                    <Button asChild className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Link href={`/subjects/biology/${topic.id}`}>
                        Learn More <ArrowRight className="ml-2 h-4 w-4" />
                      </Link>
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>

<section id="learning-materials">
          <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">
            Latest Learning Materials
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {allMaterials.map((material) => {
              const TypeIcon = materialTypeIcons[material.type]
              return (
                <Card
                  key={material.id}
                  className="flex flex-col bg-white dark:bg-gray-800 hover:shadow-lg transition-shadow"
                >
                  <CardHeader>
                    <div className="flex items-center justify-between mb-2">
                      <div className="flex items-center gap-2">
                        <TypeIcon className="h-5 w-5 text-blue-600" />
                        <Badge variant="outline">{material.type}</Badge>
                      </div>
                      <Badge className={difficultyColors[material.difficulty]}>{material.difficulty}</Badge>
                    </div>
                    <CardTitle className="text-gray-900 dark:text-white">{material.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="flex-grow">
                    <p className="text-gray-600 dark:text-gray-300 mb-4">{material.description}</p>

<div className="flex items-center gap-2 text-sm text-gray-600 mb-3">
                      <Clock className="h-4 w-4" />
                      <span>{material.duration}</span>
                    </div>

<div className="text-sm text-gray-600 mb-3">
                      <strong>Topic:</strong> {material.topicName}
                    </div>

{material.quranicConnection && (
                      <div className="mt-4 p-3 bg-qnekt-green/5 rounded-lg border border-qnekt-green/20">
                        <h4 className="font-semibold text-qnekt-green text-sm mb-1">Quranic Connection</h4>
                        <p className="text-xs text-gray-600 italic">{material.quranicConnection}</p>
                      </div>
                    )}

{material.tags.length > 0 && (
                      <div className="mt-3 flex flex-wrap gap-1">
                        {material.tags.slice(0, 3).map((tag) => (
                          <span key={tag} className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Play className="h-4 w-4 mr-2" />
                      Start Learning
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/chemistry/page.tsx" isEdit="true" isMerged="true"
"use client"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight, Atom, FlaskConical, Table, Play, FileText, ImageIcon, HelpCircle, Clock } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ColoredHeading } from "@/components/colored-heading"
import { getSubjectById } from "@/lib/data"

export default function ChemistryPage() {
  const subject = getSubjectById("chemistry")

if (!subject) {
    return <div>Subject not found</div>
  }

const topicIcons = {
    "atomic-structure": Atom,
    "chemical-reactions": FlaskConical,
    "periodic-table": Table,
  }

const materialTypeIcons = {
    video: Play,
    pdf: FileText,
    infographic: ImageIcon,
    quiz: HelpCircle,
    article: FileText,
  }

const difficultyColors = {
    beginner: "bg-green-100 text-green-800",
    intermediate: "bg-yellow-100 text-yellow-800",
    advanced: "bg-red-100 text-red-800",
  }

const allMaterials = subject.topics.flatMap((topic) =>
    topic.materials.map((material) => ({ ...material, topicName: topic.name })),
  )

return (
    <div className="bg-gray-50 dark:bg-gray-900">
      <header className="relative h-[400px] text-white">
        <Image
          src="/subjects/chemistry/overview.png"
          alt="Chemistry illustration"
          fill
          className="object-cover brightness-50"
        />
        <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-4">
          <ColoredHeading element="h1" className="text-4xl md:text-6xl font-bold mb-4">
            The Science of Matter: Chemistry
          </ColoredHeading>
          <p className="text-lg md:text-xl max-w-3xl">
            Chemistry is the scientific study of matter, its properties, composition, structure, and the changes it
            undergoes during chemical reactions.
          </p>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <section id="topics" className="mb-16">
          <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">
            Explore Chemistry Topics
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            {subject.topics.map((topic) => {
              const IconComponent = topicIcons[topic.id as keyof typeof topicIcons] || Atom
              return (
                <Card
                  key={topic.id}
                  className="overflow-hidden hover:shadow-xl transition-shadow duration-300 bg-white dark:bg-gray-800"
                >
                  <CardHeader className="p-0">
                    <Image
                      src={`/subjects/chemistry/topic_${topic.id.replace("-", "_")}.png`}
                      alt={topic.name}
                      width={400}
                      height={250}
                      className="w-full h-48 object-cover"
                    />
                  </CardHeader>
                  <CardContent className="p-6">
                    <div className="flex items-center mb-4">
                      <IconComponent className="h-8 w-8 text-qnekt-green mr-4" />
                      <CardTitle className="text-xl font-semibold text-gray-900 dark:text-white">
                        {topic.name}
                      </CardTitle>
                    </div>
                    <p className="text-gray-600 dark:text-gray-300 mb-4">{topic.description}</p>
                    <Badge variant="secondary">{topic.materials.length} materials</Badge>
                  </CardContent>
                  <CardFooter className="p-6 pt-0">
                    <Button asChild className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Link href={`/subjects/chemistry/${topic.id}`}>
                        Learn More <ArrowRight className="ml-2 h-4 w-4" />
                      </Link>
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>

<div className="text-sm text-gray-600 mb-3">
                      <strong>Topic:</strong> {material.topicName}
                    </div>

{material.tags.length > 0 && (
                      <div className="mt-3 flex flex-wrap gap-1">
                        {material.tags.slice(0, 3).map((tag) => (
                          <span key={tag} className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Play className="h-4 w-4 mr-2" />
                      Start Learning
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/physics/page.tsx" isEdit="true" isMerged="true"
"use client"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight, Zap, Lightbulb, Play, FileText, Clock } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ColoredHeading } from "@/components/colored-heading"
import { getSubjectById } from "@/lib/data"

export default function PhysicsPage() {
  const subject = getSubjectById("physics")

if (!subject) {
    return <div>Subject not found</div>
  }

const topicIcons = {
    "motion-forces": Zap,
    "light-optics": Lightbulb,
  }

const materialTypeIcons = {
    video: Play,
    pdf: FileText,
    infographic: FileText,
    quiz: FileText,
    article: FileText,
  }

const difficultyColors = {
    beginner: "bg-green-100 text-green-800",
    intermediate: "bg-yellow-100 text-yellow-800",
    advanced: "bg-red-100 text-red-800",
  }

const allMaterials = subject.topics.flatMap((topic) =>
    topic.materials.map((material) => ({ ...material, topicName: topic.name })),
  )

return (
    <div className="bg-gray-50 dark:bg-gray-900">
      <header className="relative h-[400px] text-white">
        <Image
          src="/subjects/physics/overview.png"
          alt="Physics illustration"
          fill
          className="object-cover brightness-50"
        />
        <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-4">
          <ColoredHeading element="h1" className="text-4xl md:text-6xl font-bold mb-4">
            The Science of Energy: Physics
          </ColoredHeading>
          <p className="text-lg md:text-xl max-w-3xl">
            Physics is the natural science that studies matter, its motion and behavior through space and time, and the
            related entities of energy and force.
          </p>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <section id="topics" className="mb-16">
          <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Explore Physics Topics</h2>
          <div className="grid md:grid-cols-2 gap-8">
            {subject.topics.map((topic) => {
              const IconComponent = topicIcons[topic.id as keyof typeof topicIcons] || Zap
              return (
                <Card
                  key={topic.id}
                  className="overflow-hidden hover:shadow-xl transition-shadow duration-300 bg-white dark:bg-gray-800"
                >
                  <CardHeader className="p-0">
                    <Image
                      src={`/subjects/physics/topic_${topic.id.replace("-", "_")}.png`}
                      alt={topic.name}
                      width={400}
                      height={250}
                      className="w-full h-48 object-cover"
                    />
                  </CardHeader>
                  <CardContent className="p-6">
                    <div className="flex items-center mb-4">
                      <IconComponent className="h-8 w-8 text-qnekt-green mr-4" />
                      <CardTitle className="text-xl font-semibold text-gray-900 dark:text-white">
                        {topic.name}
                      </CardTitle>
                    </div>
                    <p className="text-gray-600 dark:text-gray-300 mb-4">{topic.description}</p>
                    <Badge variant="secondary">{topic.materials.length} materials</Badge>
                  </CardContent>
                  <CardFooter className="p-6 pt-0">
                    <Button asChild className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Link href={`/subjects/physics/${topic.id}`}>
                        Learn More <ArrowRight className="ml-2 h-4 w-4" />
                      </Link>
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>

<div className="text-sm text-gray-600 mb-3">
                      <strong>Topic:</strong> {material.topicName}
                    </div>

{material.tags.length > 0 && (
                      <div className="mt-3 flex flex-wrap gap-1">
                        {material.tags.slice(0, 3).map((tag) => (
                          <span key={tag} className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Play className="h-4 w-4 mr-2" />
                      Start Learning
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/geography/page.tsx" isEdit="true" isMerged="true"
"use client"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight, Mountain, Waves, Play, FileText, ImageIcon, Clock } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ColoredHeading } from "@/components/colored-heading"
import { getSubjectById } from "@/lib/data"

export default function GeographyPage() {
  const subject = getSubjectById("geography")

if (!subject) {
    return <div>Subject not found</div>
  }

const topicIcons = {
    landforms: Mountain,
    "water-bodies": Waves,
  }

const materialTypeIcons = {
    video: Play,
    pdf: FileText,
    infographic: ImageIcon,
    quiz: FileText,
    article: FileText,
  }

const difficultyColors = {
    beginner: "bg-green-100 text-green-800",
    intermediate: "bg-yellow-100 text-yellow-800",
    advanced: "bg-red-100 text-red-800",
  }

const allMaterials = subject.topics.flatMap((topic) =>
    topic.materials.map((material) => ({ ...material, topicName: topic.name })),
  )

return (
    <div className="bg-gray-50 dark:bg-gray-900">
      <header className="relative h-[400px] text-white">
        <Image
          src="/subjects/geography/overview.png"
          alt="Geography illustration"
          fill
          className="object-cover brightness-50"
        />
        <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-4">
          <ColoredHeading element="h1" className="text-4xl md:text-6xl font-bold mb-4">
            Our Beautiful Earth: Geography
          </ColoredHeading>
          <p className="text-lg md:text-xl max-w-3xl">
            Geography is the study of places and the relationships between people and their environments. It examines
            both the physical properties of Earth's surface and human societies.
          </p>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <section id="topics" className="mb-16">
          <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">
            Explore Geography Topics
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            {subject.topics.map((topic) => {
              const IconComponent = topicIcons[topic.id as keyof typeof topicIcons] || Mountain
              return (
                <Card
                  key={topic.id}
                  className="overflow-hidden hover:shadow-xl transition-shadow duration-300 bg-white dark:bg-gray-800"
                >
                  <CardHeader className="p-0">
                    <Image
                      src={`/subjects/geography/topic_${topic.id.replace("-", "_")}.png`}
                      alt={topic.name}
                      width={400}
                      height={250}
                      className="w-full h-48 object-cover"
                    />
                  </CardHeader>
                  <CardContent className="p-6">
                    <div className="flex items-center mb-4">
                      <IconComponent className="h-8 w-8 text-qnekt-green mr-4" />
                      <CardTitle className="text-xl font-semibold text-gray-900 dark:text-white">
                        {topic.name}
                      </CardTitle>
                    </div>
                    <p className="text-gray-600 dark:text-gray-300 mb-4">{topic.description}</p>
                    <Badge variant="secondary">{topic.materials.length} materials</Badge>
                  </CardContent>
                  <CardFooter className="p-6 pt-0">
                    <Button asChild className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Link href={`/subjects/geography/${topic.id}`}>
                        Learn More <ArrowRight className="ml-2 h-4 w-4" />
                      </Link>
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>

<div className="text-sm text-gray-600 mb-3">
                      <strong>Topic:</strong> {material.topicName}
                    </div>

{material.tags.length > 0 && (
                      <div className="mt-3 flex flex-wrap gap-1">
                        {material.tags.slice(0, 3).map((tag) => (
                          <span key={tag} className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Play className="h-4 w-4 mr-2" />
                      Start Learning
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/quran/page.tsx" isEdit="true" isMerged="true"
"use client"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight, BookOpen, Heart, Play, FileText, Clock } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ColoredHeading } from "@/components/colored-heading"
import { getSubjectById } from "@/lib/data"

export default function QuranPage() {
  const subject = getSubjectById("quran")

if (!subject) {
    return <div>Subject not found</div>
  }

const topicIcons = {
    "creation-cosmology": BookOpen,
    "human-development": Heart,
  }

const materialTypeIcons = {
    video: Play,
    pdf: FileText,
    infographic: FileText,
    quiz: FileText,
    article: FileText,
  }

const difficultyColors = {
    beginner: "bg-green-100 text-green-800",
    intermediate: "bg-yellow-100 text-yellow-800",
    advanced: "bg-red-100 text-red-800",
  }

const allMaterials = subject.topics.flatMap((topic) =>
    topic.materials.map((material) => ({ ...material, topicName: topic.name })),
  )

return (
    <div className="bg-gray-50 dark:bg-gray-900">
      <header className="relative h-[400px] text-white">
        <Image
          src="/subjects/quran/overview.png"
          alt="Quran illustration"
          fill
          className="object-cover brightness-50"
        />
        <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-4">
          <ColoredHeading element="h1" className="text-4xl md:text-6xl font-bold mb-4">
            The Holy Quran: Divine Guidance
          </ColoredHeading>
          <p className="text-lg md:text-xl max-w-3xl">
            The Quran is the holy book of Islam, believed by Muslims to be a revelation from God. It contains guidance
            for all aspects of life and remarkable scientific insights.
          </p>
        </div>
      </header>

<main className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <section id="topics" className="mb-16">
          <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Explore Quranic Topics</h2>
          <div className="grid md:grid-cols-2 gap-8">
            {subject.topics.map((topic) => {
              const IconComponent = topicIcons[topic.id as keyof typeof topicIcons] || BookOpen
              return (
                <Card
                  key={topic.id}
                  className="overflow-hidden hover:shadow-xl transition-shadow duration-300 bg-white dark:bg-gray-800"
                >
                  <CardHeader className="p-0">
                    <Image
                      src={`/subjects/quran/topic_${topic.id.replace("-", "_")}.png`}
                      alt={topic.name}
                      width={400}
                      height={250}
                      className="w-full h-48 object-cover"
                    />
                  </CardHeader>
                  <CardContent className="p-6">
                    <div className="flex items-center mb-4">
                      <IconComponent className="h-8 w-8 text-qnekt-green mr-4" />
                      <CardTitle className="text-xl font-semibold text-gray-900 dark:text-white">
                        {topic.name}
                      </CardTitle>
                    </div>
                    <p className="text-gray-600 dark:text-gray-300 mb-4">{topic.description}</p>
                    <Badge variant="secondary">{topic.materials.length} materials</Badge>
                  </CardContent>
                  <CardFooter className="p-6 pt-0">
                    <Button asChild className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Link href={`/subjects/quran/${topic.id}`}>
                        Learn More <ArrowRight className="ml-2 h-4 w-4" />
                      </Link>
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>

<div className="text-sm text-gray-600 mb-3">
                      <strong>Topic:</strong> {material.topicName}
                    </div>

{material.tags.length > 0 && (
                      <div className="mt-3 flex flex-wrap gap-1">
                        {material.tags.slice(0, 3).map((tag) => (
                          <span key={tag} className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </CardContent>
                  <CardFooter>
                    <Button className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                      <Play className="h-4 w-4 mr-2" />
                      Start Learning
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/subjects/page.tsx" isEdit="true" isMerged="true"
"use client"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight, BookOpen, Users, GraduationCap } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ColoredHeading } from "@/components/colored-heading"
import { subjects } from "@/lib/data"

export default function SubjectsPage() {
  const totalMaterials = subjects.reduce(
    (total, subject) => total + subject.topics.reduce((topicTotal, topic) => topicTotal + topic.materials.length, 0),
    0,
  )

const totalTopics = subjects.reduce((total, subject) => total + subject.topics.length, 0)

return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="relative py-20 bg-gradient-to-br from-qnekt-green to-qnekt-black text-white">
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <ColoredHeading element="h1" className="text-4xl md:text-6xl font-bold mb-6">
            Explore Our Subjects
          </ColoredHeading>
          <p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
            Discover the beauty of science through the lens of Islamic teachings. Each subject integrates modern
            knowledge with Quranic wisdom.
          </p>

{/* Stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="text-3xl font-bold">{subjects.length}</div>
              <div className="text-sm opacity-90">Subjects</div>
            </div>
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="text-3xl font-bold">{totalTopics}</div>
              <div className="text-sm opacity-90">Topics</div>
            </div>
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="text-3xl font-bold">{totalMaterials}</div>
              <div className="text-sm opacity-90">Materials</div>
            </div>
          </div>
        </div>
      </section>

{/* Subjects Grid */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Choose Your Learning Path</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Each subject is carefully designed to show the harmony between scientific discovery and Islamic teachings.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {subjects.map((subject) => {
              const materialCount = subject.topics.reduce((total, topic) => total + topic.materials.length, 0)

return (
                <Card
                  key={subject.id}
                  className="group hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 bg-white"
                >
                  <CardHeader className="p-0">
                    <div className="relative h-48 overflow-hidden rounded-t-lg">
                      <Image
                        src={`/subjects/${subject.id}/overview.png`}
                        alt={subject.name}
                        fill
                        className="object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                      <div className="absolute bottom-4 left-4">
                        <div className="text-4xl mb-2">{subject.icon}</div>
                        <Badge className="bg-white/20 backdrop-blur-sm text-white border-white/30">
                          {subject.topics.length} topics
                        </Badge>
                      </div>
                    </div>
                  </CardHeader>

<CardContent className="p-6">
                    <CardTitle className="text-2xl font-bold text-gray-900 mb-3 group-hover:text-qnekt-green transition-colors">
                      {subject.name}
                    </CardTitle>
                    <p className="text-gray-600 mb-4 line-clamp-3">{subject.description}</p>

<div className="flex items-center justify-between text-sm text-gray-500">
                      <div className="flex items-center gap-1">
                        <BookOpen className="h-4 w-4" />
                        <span>{materialCount} materials</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <GraduationCap className="h-4 w-4" />
                        <span>All levels</span>
                      </div>
                    </div>
                  </CardContent>

<CardFooter className="p-6 pt-0">
                    <Button
                      asChild
                      className="w-full group-hover:bg-qnekt-green group-hover:text-white transition-colors"
                      style={{ backgroundColor: subject.color }}
                    >
                      <Link href={`/subjects/${subject.id}`}>
                        Start Learning
                        <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                      </Link>
                    </Button>
                  </CardFooter>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

{/* Call to Action */}
      <section className="py-16 bg-qnekt-green text-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Begin Your Journey?</h2>
          <p className="text-xl mb-8 opacity-90">
            Join thousands of students discovering the harmony between science and faith.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button asChild size="lg" variant="secondary">
              <Link href="/join">
                <Users className="mr-2 h-5 w-5" />
                Join as Student
              </Link>
            </Button>
            <Button
              asChild
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-qnekt-green bg-transparent"
            >
              <Link href="/join">
                <GraduationCap className="mr-2 h-5 w-5" />
                Become an Educator
              </Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true"
"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { BookOpen, Users, FileText, Settings, CheckCircle, Upload, BarChart3 } from "lucide-react"
import Link from "next/link"
import { subjects } from "@/lib/data"

export default function AdminDashboard() {
  const totalTopics = subjects.reduce((total, subject) => total + subject.topics.length, 0)
  const totalMaterials = subjects.reduce(
    (total, subject) => total + subject.topics.reduce((topicTotal, topic) => topicTotal + topic.materials.length, 0),
    0,
  )

const materialsByType = subjects
    .flatMap((subject) => subject.topics.flatMap((topic) => topic.materials))
    .reduce(
      (acc, material) => {
        acc[material.type] = (acc[material.type] || 0) + 1
        return acc
      },
      {} as Record<string, number>,
    )

const quickActions = [
    {
      title: "View Content",
      description: "Browse all subjects and materials",
      icon: BookOpen,
      href: "/subjects",
      color: "bg-green-500",
    },
    {
      title: "User Management",
      description: "Manage users and permissions",
      icon: Users,
      href: "/admin/users",
      color: "bg-blue-500",
    },
    {
      title: "Content Upload",
      description: "Add new learning materials",
      icon: Upload,
      href: "/admin/content-upload",
      color: "bg-purple-500",
    },
    {
      title: "Settings",
      description: "System configuration",
      icon: Settings,
      href: "/admin/settings",
      color: "bg-gray-500",
    },
  ]

return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-qnekt-black mb-2">Admin Dashboard</h1>
          <p className="text-gray-600">Manage your Qnekt educational platform</p>

{/* System Status */}
          <div className="mt-4 flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg">
            <CheckCircle className="h-5 w-5 text-green-600" />
            <span className="text-green-800 font-medium">System Online</span>
            <Badge variant="secondary" className="ml-2">
              Frontend Only Mode
            </Badge>
          </div>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Subjects</CardTitle>
              <BookOpen className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{subjects.length}</div>
              <p className="text-xs text-muted-foreground">Available subjects</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Topics</CardTitle>
              <FileText className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalTopics}</div>
              <p className="text-xs text-muted-foreground">Learning topics</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Materials</CardTitle>
              <BarChart3 className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalMaterials}</div>
              <p className="text-xs text-muted-foreground">Learning materials</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Users</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">-</div>
              <p className="text-xs text-muted-foreground">Frontend only</p>
            </CardContent>
          </Card>
        </div>

{/* Quick Actions */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
            <CardDescription>Common administrative tasks</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {quickActions.map((action) => (
                <Link key={action.title} href={action.href}>
                  <div className="p-4 border rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                    <div className={`w-10 h-10 ${action.color} rounded-lg flex items-center justify-center mb-3`}>
                      <action.icon className="h-5 w-5 text-white" />
                    </div>
                    <h3 className="font-medium mb-1">{action.title}</h3>
                    <p className="text-sm text-gray-600">{action.description}</p>
                  </div>
                </Link>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Content Overview */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Subjects Overview */}
          <Card>
            <CardHeader>
              <CardTitle>Subjects Overview</CardTitle>
              <CardDescription>All available learning subjects</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {subjects.map((subject) => {
                  const materialCount = subject.topics.reduce((total, topic) => total + topic.materials.length, 0)
                  return (
                    <div key={subject.id} className="flex items-center justify-between p-3 border rounded-lg">
                      <div className="flex items-center gap-3">
                        <span className="text-2xl">{subject.icon}</span>
                        <div>
                          <h3 className="font-medium">{subject.name}</h3>
                          <p className="text-sm text-gray-600">{subject.description}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <Badge variant="secondary">{subject.topics.length} topics</Badge>
                        <p className="text-xs text-gray-500 mt-1">{materialCount} materials</p>
                      </div>
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>

{/* Material Types */}
          <Card>
            <CardHeader>
              <CardTitle>Content Analytics</CardTitle>
              <CardDescription>Breakdown of learning materials</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-green-600">{subjects.length}</div>
                    <p className="text-sm text-gray-600">Subjects</p>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-600">{totalTopics}</div>
                    <p className="text-sm text-gray-600">Topics</p>
                  </div>
                </div>

<div className="space-y-2">
                  <h4 className="font-medium">Materials by Type</h4>
                  {Object.entries(materialsByType).map(([type, count]) => (
                    <div key={type} className="flex items-center justify-between">
                      <span className="text-sm capitalize">{type}</span>
                      <Badge variant="outline">{count}</Badge>
                    </div>
                  ))}
                </div>

<div className="pt-4 border-t">
                  <div className="text-center">
                    <div className="text-lg font-semibold text-purple-600">{totalMaterials}</div>
                    <p className="text-sm text-gray-600">Total Materials</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { ChevronDown, Menu, X } from "lucide-react"

export function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
  const [isSubjectsOpen, setIsSubjectsOpen] = useState(false)

const subjects = [
    { name: "Biology", href: "/subjects/biology" },
    { name: "Chemistry", href: "/subjects/chemistry" },
    { name: "Physics", href: "/subjects/physics" },
    { name: "Geography", href: "/subjects/geography" },
    { name: "Quranic Studies", href: "/subjects/quran" },
  ]

return (
    <nav className="bg-white shadow-lg border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-20">
          {/* Logo */}
          <div className="flex-shrink-0">
            <Link href="/" className="flex items-center">
              <Image
                src="/qnekt-logo.png"
                alt="Qnekt Logo"
                width={160}
                height={160}
                className="w-auto h-20"
                priority
                style={{
                  filter:
                    "drop-shadow(0 15px 35px rgba(0, 0, 0, 0.8)) drop-shadow(0 8px 15px rgba(0, 0, 0, 0.6)) brightness(1.3) contrast(1.2) saturate(1.1)",
                }}
              />
            </Link>
          </div>

{/* Desktop Navigation */}
          <div className="hidden md:block font-semibold">
            <div className="ml-10 flex items-baseline space-x-8">
              <Link
                href="/"
                className="text-qnekt-black hover:text-qnekt-green px-3 py-2 text-sm transition-colors duration-200 font-bold"
              >
                Home
              </Link>

{/* Subjects Dropdown */}
              <div className="relative">
                <button
                  onClick={() => setIsSubjectsOpen(!isSubjectsOpen)}
                  className="hover:text-qnekt-green px-3 py-2 text-sm flex items-center transition-colors duration-200 font-bold text-red-500"
                >
                  Subjects
                  <ChevronDown
                    className={`ml-1 h-4 w-4 transition-transform duration-200 ${isSubjectsOpen ? "rotate-180" : ""}`}
                  />
                </button>

{isSubjectsOpen && (
                  <div className="absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50 backdrop-blur-sm">
                    <div className="py-1">
                      {subjects.map((subject) => (
                        <Link
                          key={subject.name}
                          href={subject.href}
                          className="block px-4 py-2 text-sm text-qnekt-black hover:bg-gradient-to-r hover:from-qnekt-black/10 hover:via-qnekt-red/10 hover:to-qnekt-green/10 hover:text-qnekt-green transition-colors duration-200"
                          onClick={() => setIsSubjectsOpen(false)}
                        >
                          {subject.name}
                        </Link>
                      ))}
                    </div>
                  </div>
                )}
              </div>

<Link
                href="/muslim-scientists"
                className="hover:text-qnekt-green px-3 py-2 text-sm transition-colors duration-200 font-bold text-green-500"
              >
                Muslim Scientists
              </Link>

<Link
                href="/parents-students"
                className="text-qnekt-black hover:text-qnekt-green px-3 py-2 text-sm transition-colors duration-200 font-bold"
              >
                Parents & Students
              </Link>
            </div>
          </div>

{/* Mobile menu button */}
          <div className="md:hidden">
            <button onClick={() => setIsOpen(!isOpen)} className="text-qnekt-black hover:text-qnekt-green p-2">
              {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>
      </div>

{/* Mobile Navigation */}
      {isOpen && (
        <div className="md:hidden">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
            <Link
              href="/"
              className="text-qnekt-black hover:text-qnekt-green block px-3 py-2 text-base font-medium"
              onClick={() => setIsOpen(false)}
            >
              Home
            </Link>

{/* Mobile Subjects */}
            <div className="px-3 py-2">
              <button
                onClick={() => setIsSubjectsOpen(!isSubjectsOpen)}
                className="text-qnekt-black hover:text-qnekt-green text-base font-medium flex items-center w-full"
              >
                Subjects
                <ChevronDown
                  className={`ml-1 h-4 w-4 transition-transform duration-200 ${isSubjectsOpen ? "rotate-180" : ""}`}
                />
              </button>
              {isSubjectsOpen && (
                <div className="mt-2 pl-4 space-y-1">
                  {subjects.map((subject) => (
                    <Link
                      key={subject.name}
                      href={subject.href}
                      className="text-qnekt-black hover:text-qnekt-green block px-3 py-2 text-sm"
                      onClick={() => {
                        setIsOpen(false)
                        setIsSubjectsOpen(false)
                      }}
                    >
                      {subject.name}
                    </Link>
                  ))}
                </div>
              )}
            </div>

<Link
              href="/muslim-scientists"
              className="text-qnekt-black hover:text-qnekt-green block px-3 py-2 text-base font-medium"
              onClick={() => setIsOpen(false)}
            >
              Muslim Scientists
            </Link>

<Link
              href="/parents-students"
              className="text-qnekt-black hover:text-qnekt-green block px-3 py-2 text-base font-medium"
              onClick={() => setIsOpen(false)}
            >
              Parents & Students
            </Link>
          </div>
        </div>
      )}
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/quranic-verse.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { BookOpen } from "lucide-react"

interface QuranicVerse {
  arabic: string
  translation: string
  reference: string
  theme: string
}

const verses: QuranicVerse[] = [
  {
    arabic: "وَفِي أَنفُسِكُمْ ۚ أَفَلَا تُبْصِرُونَ",
    translation: "And within yourselves. Then will you not see?",
    reference: "Adh-Dhariyat 51:21",
    theme: "Self-reflection and inner signs",
  },
  {
    arabic: "وَهُوَ الَّذِي أَنزَلَ مِنَ السَّمَاءِ مَاءً فَأَخْرَجْنَا بِهِ نَبَاتَ كُلِّ شَيْءٍ",
    translation: "And it is He who sends down rain from the sky, and We produce thereby the vegetation of every kind.",
    reference: "Al-An'am 6:99",
    theme: "Nature and plant life",
  },
  {
    arabic: "وَلَقَدْ خَلَقْنَا الْإِنسَانَ فِي أَحْسَنِ تَقْوِيمٍ",
    translation: "We have certainly created man in the best of stature.",
    reference: "At-Tin 95:4",
    theme: "Human creation and anatomy",
  },
  {
    arabic: "وَجَعَلْنَا مِنَ الْمَاءِ كُلَّ شَيْءٍ حَيٍّ",
    translation: "And We made from water every living thing.",
    reference: "Al-Anbiya 21:30",
    theme: "Water as the source of life",
  },
  {
    arabic: "وَالْأَرْضَ مَدَدْنَاهَا وَأَلْقَيْنَا فِيهَا رَوَاسِيَ وَأَنبَتْنَا فِيهَا مِن كُلِّ شَيْءٍ مَّوْزُونٍ",
    translation:
      "And the earth - We have spread it and cast therein firmly set mountains and made to grow therein all kinds of things in good proportion.",
    reference: "Al-Hijr 15:19",
    theme: "Earth's geography and balance",
  },
  {
    arabic: "وَالشَّمْسُ تَجْرِي لِمُسْتَقَرٍّ لَّهَا ۚ ذَٰلِكَ تَقْدِيرُ الْعَزِيزِ الْعَلِيمِ",
    translation:
      "And the sun runs [on course] toward its stopping point. That is the determination of the Exalted in Might, the Knowing.",
    reference: "Ya-Sin 36:38",
    theme: "Astronomy and celestial mechanics",
  },
  {
    arabic: "وَمِنْ آيَاتِهِ خَلْقُ السَّمَاوَاتِ وَالْأَرْضِ وَمَا بَثَّ فِيهِمَا مِن دَابَّةٍ",
    translation:
      "And of His signs is the creation of the heavens and earth and what He has dispersed throughout them of creatures.",
    reference: "Ash-Shura 42:29",
    theme: "Creation and biodiversity",
  },
  {
    arabic: "أَلَمْ تَرَ أَنَّ اللَّهَ أَنزَلَ مِنَ السَّمَاءِ مَاءً فَأَخْرَجْنَا بِهِ ثَمَرَاتٍ مُّخْتَلِفًا أَلْوَانُهَا",
    translation:
      "Do you not see that Allah sends down rain from the sky, and We produce thereby fruits of varying colors?",
    reference: "Fatir 35:27",
    theme: "Natural diversity and colors",
  },
  {
    arabic: "وَهُوَ الَّذِي مَرَجَ الْبَحْرَيْنِ هَٰذَا عَذْبٌ فُرَاتٌ وَهَٰذَا مِلْحٌ أُجَاجٌ",
    translation:
      "And it is He who has released [simultaneously] the two seas, one fresh and sweet and one salty and bitter.",
    reference: "Al-Furqan 25:53",
    theme: "Ocean currents and water systems",
  },
  {
    arabic: "وَمِنْ كُلِّ شَيْءٍ خَلَقْنَا زَوْجَيْنِ لَعَلَّكُمْ تَذَكَّرُونَ",
    translation: "And of all things We created two mates; perhaps you will remember.",
    reference: "Adh-Dhariyat 51:49",
    theme: "Pairs and duality in nature",
  },
  {
    arabic: "وَأَرْسَلْنَا الرِّيَاحَ لَوَاقِحَ فَأَنزَلْنَا مِنَ السَّمَاءِ مَاءً فَأَسْقَيْنَاكُمُوهُ",
    translation: "And We have sent the fertilizing winds and sent down water from the sky and given you drink from it.",
    reference: "Al-Hijr 15:22",
    theme: "Weather patterns and water cycle",
  },
  {
    arabic: "وَجَعَلْنَا فِي الْأَرْضِ رَوَاسِيَ أَن تَمِيدَ بِهِمْ وَجَعَلْنَا فِيهَا فِجَاجًا سُبُلًا",
    translation:
      "And We placed within the earth firmly set mountains, lest it should shift with them, and We made therein [mountain] passes [as] roads.",
    reference: "Al-Anbiya 21:31",
    theme: "Geological stability and mountains",
  },
  {
    arabic: "وَاللَّهُ خَلَقَ كُلَّ دَابَّةٍ مِن مَّاءٍ ۖ فَمِنْهُم مَّن يَمْشِي عَلَىٰ بَطْنِهِ",
    translation: "Allah has created every [living] creature from water. Some of them move on their bellies.",
    reference: "An-Nur 24:45",
    theme: "Evolution and animal locomotion",
  },
  {
    arabic: "وَلَقَدْ زَيَّنَّا السَّمَاءَ الدُّنْيَا بِمَصَابِيحَ وَجَعَلْنَاهَا رُجُومًا لِّلشَّيَاطِينِ",
    translation:
      "And We have certainly beautified the nearest heaven with stars and have made [from] them what is thrown at the devils.",
    reference: "Al-Mulk 67:5",
    theme: "Stars and cosmic phenomena",
  },
  {
    arabic: "وَهُوَ الَّذِي يُرْسِلُ الرِّيَاحَ بُشْرًا بَيْنَ يَدَيْ رَحْمَتِهِ",
    translation: "And it is He who sends the winds as good tidings before His mercy.",
    reference: "Al-A'raf 7:57",
    theme: "Atmospheric circulation",
  },
  {
    arabic: "أَوَلَمْ يَرَ الَّذِينَ كَفَرُوا أَنَّ السَّمَاوَاتِ وَالْأَرْضَ كَانَتَا رَتْقًا فَفَتَقْنَاهُمَا",
    translation:
      "Have those who disbelieved not considered that the heavens and the earth were a joined entity, and We separated them?",
    reference: "Al-Anbiya 21:30",
    theme: "Big Bang theory and cosmic expansion",
  },
  {
    arabic: "وَالسَّمَاءَ بَنَيْنَاهَا بِأَيْدٍ وَإِنَّا لَمُوسِعُونَ",
    translation: "And the heaven We constructed with strength, and indeed, We are [its] expander.",
    reference: "Adh-Dhariyat 51:47",
    theme: "Expanding universe",
  },
  {
    arabic: "وَجَعَلْنَا مِنَ الْمَاءِ كُلَّ شَيْءٍ حَيٍّ ۖ أَفَلَا يُؤْمِنُونَ",
    translation: "And We made from water every living thing. Then will they not believe?",
    reference: "Al-Anbiya 21:30",
    theme: "Origin of life",
  },
  {
    arabic: "وَمِنْ آيَاتِهِ أَنْ خَلَقَكُم مِّن تُرَابٍ ثُمَّ إِذَا أَنتُم بَشَرٌ تَنتَشِرُونَ",
    translation:
      "And of His signs is that He created you from dust; then, suddenly you were human beings dispersing [throughout the earth].",
    reference: "Ar-Rum 30:20",
    theme: "Human origins and elements",
  },
  {
    arabic: "وَلَقَدْ خَلَقْنَا الْإِنسَانَ مِن سُلَالَةٍ مِّن طِينٍ",
    translation: "And certainly did We create man from an extract of clay.",
    reference: "Al-Mu'minun 23:12",
    theme: "Human creation from earth elements",
  },
  {
    arabic: "وَاللَّيْلِ إِذَا يَغْشَىٰ * وَالنَّهَارِ إِذَا تَجَلَّىٰ",
    translation: "By the night when it covers * And [by] the day when it appears.",
    reference: "Al-Layl 92:1-2",
    theme: "Day and night cycle",
  },
  {
    arabic: "وَهُوَ الَّذِي جَعَلَ لَكُمُ النُّجُومَ لِتَهْتَدُوا بِهَا فِي ظُلُمَاتِ الْبَرِّ وَالْبَحْرِ",
    translation:
      "And it is He who placed for you the stars that you may be guided by them through the dark spaces of the land and sea.",
    reference: "Al-An'am 6:97",
    theme: "Navigation and astronomy",
  },
  {
    arabic: "وَمِنْ آيَاتِهِ مَنَامُكُم بِاللَّيْلِ وَالنَّهَارِ وَابْتِغَاؤُكُم مِّن فَضْلِهِ",
    translation: "And of His signs is your sleep by night and day and your seeking of His bounty.",
    reference: "Ar-Rum 30:23",
    theme: "Sleep cycles and circadian rhythms",
  },
  {
    arabic: "وَمِنْ آيَاتِهِ يُرِيكُمُ الْبَرْقَ خَوْفًا وَطَمَعًا وَيُنَزِّلُ مِنَ السَّمَاءِ مَاءً",
    translation:
      "And of His signs is [that] He shows you the lightning [causing] fear and aspiration, and He sends down rain from the sky.",
    reference: "Ar-Rum 30:24",
    theme: "Lightning and electrical phenomena",
  },
  {
    arabic: "وَمِنْ آيَاتِهِ أَنْ تَقُومَ السَّمَاءُ وَالْأَرْضُ بِأَمْرِهِ",
    translation: "And of His signs is that the heaven and earth remain by His command.",
    reference: "Ar-Rum 30:25",
    theme: "Gravitational forces and cosmic order",
  },
  {
    arabic: "وَلَقَدْ جَعَلْنَا فِي السَّمَاءِ بُرُوجًا وَزَيَّنَّاهَا لِلنَّاظِرِينَ",
    translation: "And We have placed within the heaven great stars and have beautified it for the observers.",
    reference: "Al-Hijr 15:16",
    theme: "Constellations and stellar formations",
  },
  {
    arabic: "وَهُوَ الَّذِي خَلَقَ مِنَ الْمَاءِ بَشَرًا فَجَعَلَهُ نَسَبًا وَصِهْرًا",
    translation:
      "And it is He who has created from water a human being and made him [a relative by] lineage and marriage.",
    reference: "Al-Furqan 25:54",
    theme: "Human genetics and relationships",
  },
  {
    arabic: "وَمِنْ آيَاتِهِ اخْتِلَافُ أَلْسِنَتِكُمْ وَأَلْوَانِكُمْ ۚ إِنَّ فِي ذَٰلِكَ لَآيَاتٍ لِّلْعَالِمِينَ",
    translation:
      "And of His signs is the creation of the heavens and earth and the diversity of your languages and your colors. Indeed in that are signs for those of knowledge.",
    reference: "Ar-Rum 30:22",
    theme: "Human diversity and linguistics",
  },
  {
    arabic: "وَمَا مِن دَابَّةٍ فِي الْأَرْضِ وَلَا طَائِرٍ يَطِيرُ بِجَنَاحَيْهِ إِلَّا أُمَمٌ أَمْثَالُكُم",
    translation:
      "And there is no creature on earth or bird that flies with its wings except [that they are] communities like you.",
    reference: "Al-An'am 6:38",
    theme: "Animal societies and behavior",
  },
  {
    arabic: "وَأَوْحَىٰ رَبُّكَ إِلَى النَّحْلِ أَنِ اتَّخِذِي مِنَ الْجِبَالِ بُيُوتًا وَمِنَ الشَّجَرِ",
    translation:
      "And your Lord inspired to the bee, 'Take for yourself among the hills and among the trees and in that which they construct.'",
    reference: "An-Nahl 16:68",
    theme: "Bee behavior and instinct",
  },
  {
    arabic: "وَمَا تَسْقُطُ مِن وَرَقَةٍ إِلَّا يَعْلَمُهَا وَلَا حَبَّةٍ فِي ظُلُمَاتِ الْأَرْضِ",
    translation: "And not a leaf falls but that He knows it. And no grain is there within the darknesses of the earth.",
    reference: "Al-An'am 6:59",
    theme: "Ecological balance and divine knowledge",
  },
]

export function QuranicVerse() {
  const [currentVerse, setCurrentVerse] = useState<QuranicVerse>(verses[0])

useEffect(() => {
    // Calculate verse based on current date to ensure it changes daily
    const today = new Date()
    const year = today.getFullYear()
    const month = today.getMonth() + 1 // getMonth() returns 0-11
    const day = today.getDate()

// Create a unique number for each day that will be consistent across page loads
    const dayNumber = year * 10000 + month * 100 + day

// Use modulo to get a verse index that changes daily
    const verseIndex = dayNumber % verses.length

setCurrentVerse(verses[verseIndex])

// Optional: Log for debugging (remove in production)
    console.log(`Today's verse index: ${verseIndex}, Date: ${year}-${month}-${day}`)
  }, []) // Empty dependency array - only runs once on mount

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { Bookmark, FileText, User } from "lucide-react"

export default function Dashboard() {
  const [progress, setProgress] = useState({
    biology: 45,
    chemistry: 30,
    physics: 15,
    geography: 60,
    quran: 75,
  })

return (
    <div className="container py-10">
      <div className="flex flex-col space-y-6">
        <div className="flex flex-col space-y-2">
          <h1 className="text-3xl font-bold tracking-tight">Student Dashboard</h1>
          <p className="text-muted-foreground">
            Track your progress, access your courses, and manage your learning journey.
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          <Card className="md:col-span-1">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <User className="h-5 w-5" />
                Profile
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col items-center space-y-4">
                <div className="relative h-24 w-24">
                  <Image
                    src="/placeholder.svg?height=96&width=96&query=avatar"
                    alt="User Avatar"
                    fill
                    className="rounded-full object-cover"
                  />
                </div>
                <div className="text-center">
                  <h3 className="font-medium">Ahmed Abdullah</h3>
                  <p className="text-sm text-muted-foreground">Student</p>
                </div>
              </div>
              <div className="mt-6 space-y-2">
                <div className="flex justify-between text-sm">
                  <span>Email:</span>
                  <span className="text-muted-foreground">ahmed@example.com</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>Joined:</span>
                  <span className="text-muted-foreground">January 2023</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>Courses:</span>
                  <span className="text-muted-foreground">5</span>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button asChild variant="outline" className="w-full">
                <Link href="/dashboard/settings">Edit Profile</Link>
              </Button>
            </CardFooter>
          </Card>

<div className="md:col-span-3">
            <Tabs defaultValue="courses" className="w-full">
              <TabsList className="grid w-full grid-cols-3">
                <TabsTrigger value="courses">My Courses</TabsTrigger>
                <TabsTrigger value="bookmarks">Bookmarks</TabsTrigger>
                <TabsTrigger value="notes">Notes</TabsTrigger>
              </TabsList>
              <TabsContent value="courses" className="py-4">
                <div className="grid grid-cols-1 gap-6">
                  <Card>
                    <CardHeader>
                      <CardTitle>Biology</CardTitle>
                      <CardDescription>Human Anatomy, Plants, Life Cycles</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between text-sm">
                          <span>Progress:</span>
                          <span className="text-muted-foreground">{progress.biology}%</span>
                        </div>
                        <Progress value={progress.biology} className="h-2" />
                      </div>
                      <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div className="bg-muted p-3 rounded-lg">
                          <h4 className="font-medium text-sm">Last Lesson</h4>
                          <p className="text-xs text-muted-foreground">Human Digestive System</p>
                        </div>
                        <div className="bg-muted p-3 rounded-lg">
                          <h4 className="font-medium text-sm">Next Quiz</h4>
                          <p className="text-xs text-muted-foreground">Cellular Structure</p>
                        </div>
                        <div className="bg-muted p-3 rounded-lg">
                          <h4 className="font-medium text-sm">Resources</h4>
                          <p className="text-xs text-muted-foreground">12 Videos, 8 PDFs</p>
                        </div>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button asChild className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                        <Link href="/subjects/biology">Continue Learning</Link>
                      </Button>
                    </CardFooter>
                  </Card>

<Card>
                    <CardHeader>
                      <CardTitle>Chemistry</CardTitle>
                      <CardDescription>Matter, Elements, Reactions</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between text-sm">
                          <span>Progress:</span>
                          <span className="text-muted-foreground">{progress.chemistry}%</span>
                        </div>
                        <Progress value={progress.chemistry} className="h-2" />
                      </div>
                      <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div className="bg-muted p-3 rounded-lg">
                          <h4 className="font-medium text-sm">Last Lesson</h4>
                          <p className="text-xs text-muted-foreground">Periodic Table</p>
                        </div>
                        <div className="bg-muted p-3 rounded-lg">
                          <h4 className="font-medium text-sm">Next Quiz</h4>
                          <p className="text-xs text-muted-foreground">Chemical Bonds</p>
                        </div>
                        <div className="bg-muted p-3 rounded-lg">
                          <h4 className="font-medium text-sm">Resources</h4>
                          <p className="text-xs text-muted-foreground">8 Videos, 5 PDFs</p>
                        </div>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button asChild className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                        <Link href="/subjects/chemistry">Continue Learning</Link>
                      </Button>
                    </CardFooter>
                  </Card>

<Card>
                    <CardHeader>
                      <CardTitle>Quran</CardTitle>
                      <CardDescription>Tafsir, Thematic Exploration</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between text-sm">
                          <span>Progress:</span>
                          <span className="text-muted-foreground">{progress.quran}%</span>
                        </div>
                        <Progress value={progress.quran} className="h-2" />
                      </div>
                      <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div className="bg-muted p-3 rounded-lg">
                          <h4 className="font-medium text-sm">Last Lesson</h4>
                          <p className="text-xs text-muted-foreground">Verses on Creation</p>
                        </div>
                        <div className="bg-muted p-3 rounded-lg">
                          <h4 className="font-medium text-sm">Next Quiz</h4>
                          <p className="text-xs text-muted-foreground">Scientific Miracles</p>
                        </div>
                        <div className="bg-muted p-3 rounded-lg">
                          <h4 className="font-medium text-sm">Resources</h4>
                          <p className="text-xs text-muted-foreground">15 Videos, 10 PDFs</p>
                        </div>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button asChild className="w-full bg-qnekt-green hover:bg-qnekt-green/90">
                        <Link href="/subjects/quran">Continue Learning</Link>
                      </Button>
                    </CardFooter>
                  </Card>
                </div>
              </TabsContent>
              <TabsContent value="bookmarks" className="py-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card>
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Human Digestive System</CardTitle>
                        <Bookmark className="h-4 w-4 text-qnekt-red fill-qnekt-red" />
                      </div>
                      <CardDescription>Biology</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">
                        The digestive system breaks down food into nutrients that the body can use for energy, growth,
                        and cell repair.
                      </p>
                    </CardContent>
                    <CardFooter>
                      <Button asChild variant="ghost" className="w-full">
                        <Link href="/subjects/biology/human-anatomy/digestive-system">View Content</Link>
                      </Button>
                    </CardFooter>
                  </Card>
                  <Card>
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Verses on Light</CardTitle>
                        <Bookmark className="h-4 w-4 text-qnekt-red fill-qnekt-red" />
                      </div>
                      <CardDescription>Quran</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">
                        Exploration of Quranic verses that discuss light and their connection to modern physics
                        concepts.
                      </p>
                    </CardContent>
                    <CardFooter>
                      <Button asChild variant="ghost" className="w-full">
                        <Link href="/subjects/quran/themes/light">View Content</Link>
                      </Button>
                    </CardFooter>
                  </Card>
                  <Card>
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Periodic Table</CardTitle>
                        <Bookmark className="h-4 w-4 text-qnekt-red fill-qnekt-red" />
                      </div>
                      <CardDescription>Chemistry</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">
                        The organization of elements and their properties, with connections to Quranic verses on
                        creation.
                      </p>
                    </CardContent>
                    <CardFooter>
                      <Button asChild variant="ghost" className="w-full">
                        <Link href="/subjects/chemistry/elements/periodic-table">View Content</Link>
                      </Button>
                    </CardFooter>
                  </Card>
                </div>
              </TabsContent>
              <TabsContent value="notes" className="py-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card>
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Photosynthesis Process</CardTitle>
                        <FileText className="h-4 w-4 text-qnekt-green" />
                      </div>
                      <CardDescription>Biology - Plants</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">
                        My notes on the photosynthesis process and its importance in plant life.
                      </p>
                      <p className="text-xs text-muted-foreground mt-2">Last edited: 2 days ago</p>
                    </CardContent>
                    <CardFooter>
                      <Button asChild variant="ghost" className="w-full">
                        <Link href="/dashboard/notes/1">View Note</Link>
                      </Button>
                    </CardFooter>
                  </Card>
                  <Card>
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Quranic Verses on Mountains</CardTitle>
                        <FileText className="h-4 w-4 text-qnekt-green" />
                      </div>
                      <CardDescription>Geography - Earth</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">
                        Notes on Quranic verses that describe mountains and their geological significance.
                      </p>
                      <p className="text-xs text-muted-foreground mt-2">Last edited: 1 week ago</p>
                    </CardContent>
                    <CardFooter>
                      <Button asChild variant="ghost" className="w-full">
                        <Link href="/dashboard/notes/2">View Note</Link>
                      </Button>
                    </CardFooter>
                  </Card>
                </div>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/dna-structure-illustration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dna-structure-illustration-t3Rq4XT1664rMWVjdwrQRI9LqXKKrg.png" isMerged="true"
[V0_FILE]png:file="public/abstract-geometric-sculpture.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-sculpture-jZigpBQzxPWCZ5K5VjXio6GRBhKXzL.png" isMerged="true"
[V0_FILE]png:file="public/islamic-education.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/islamic-education-lVwFBJePP8NnIulvlmfjgU5PMU6rwV.png" isMerged="true"
[V0_FILE]png:file="public/marine-biology-ocean.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/marine-biology-ocean-iumwdByJDGUxzZy6XKtfnhc7mNi4Yb.png" isMerged="true"
[V0_FILE]png:file="public/immunology-immune-system.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/immunology-immune-system-FffUtQVvxQNaJldM0zgXHg6xeQ70tN.png" isMerged="true"
[V0_FILE]png:file="public/neurobiology-brain.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/neurobiology-brain-t18qyxx5wmsJyfxFZtKPR4zJ2bbB7n.png" isMerged="true"
[V0_FILE]png:file="public/forensic-biology.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/forensic-biology-X43sRZe0bfZHFbbu9mZS4iN3saxsGo.png" isMerged="true"
[V0_FILE]png:file="public/student-hijab.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/student-cap.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/student-boy.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/everything-came-from-water.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/natures-majestic-anchors.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/five-senses.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/muslim-family-education.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/muslim-family-education-axeEG1GVm5R3fBce5pvyCHldyRQdPI.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/subjects/biology/quizzes/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Progress } from "@/components/ui/progress"
import { CheckCircle2, XCircle, ArrowLeft, ArrowRight } from "lucide-react"
import { ColoredHeading } from "@/components/colored-heading"

const quizQuestions = [
  {
    id: 1,
    question: "What is the main function of the digestive system?",
    options: [
      "To pump blood throughout the body",
      "To break down food and absorb nutrients",
      "To filter waste from the blood",
      "To exchange oxygen and carbon dioxide",
    ],
    correct: 1,
    explanation:
      "The digestive system's primary function is to break down food into nutrients that can be absorbed and used by the body.",
  },
  {
    id: 2,
    question: "Which Quranic verse mentions the creation of humans from clay?",
    options: ["Quran 2:30", "Quran 23:12", "Quran 21:30", "Quran 15:26"],
    correct: 1,
    explanation: "Quran 23:12 states: 'And certainly We created man of an extract of clay.'",
  },
  {
    id: 3,
    question: "What is photosynthesis?",
    options: [
      "The process by which plants absorb water",
      "The process by which plants convert light energy into chemical energy",
      "The process by which plants reproduce",
      "The process by which plants grow taller",
    ],
    correct: 1,
    explanation:
      "Photosynthesis is the process by which plants use sunlight, water, and carbon dioxide to produce glucose and oxygen.",
  },
  {
    id: 4,
    question: "According to the Quran, what is everything made from?",
    options: ["Fire", "Air", "Water", "Earth"],
    correct: 2,
    explanation: "Quran 21:30 states: 'And We made from water every living thing.'",
  },
  {
    id: 5,
    question: "What is the basic unit of life?",
    options: ["Tissue", "Organ", "Cell", "Organism"],
    correct: 2,
    explanation: "The cell is the basic structural and functional unit of all living organisms.",
  },
]

export default function BiologyQuizPage() {
  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [selectedAnswers, setSelectedAnswers] = useState<number[]>([])
  const [showResults, setShowResults] = useState(false)
  const [quizCompleted, setQuizCompleted] = useState(false)

const handleAnswerSelect = (answerIndex: number) => {
    const newAnswers = [...selectedAnswers]
    newAnswers[currentQuestion] = answerIndex
    setSelectedAnswers(newAnswers)
  }

const handleNext = () => {
    if (currentQuestion < quizQuestions.length - 1) {
      setCurrentQuestion(currentQuestion + 1)
    } else {
      setQuizCompleted(true)
      setShowResults(true)
    }
  }

const handlePrevious = () => {
    if (currentQuestion > 0) {
      setCurrentQuestion(currentQuestion - 1)
    }
  }

const calculateScore = () => {
    let correct = 0
    selectedAnswers.forEach((answer, index) => {
      if (answer === quizQuestions[index].correct) {
        correct++
      }
    })
    return correct
  }

const progress = ((currentQuestion + 1) / quizQuestions.length) * 100

if (showResults) {
    const score = calculateScore()
    const percentage = (score / quizQuestions.length) * 100

return (
      <div className="container py-10">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <ColoredHeading text="Quiz Results" className="text-3xl font-bold mb-4" />
            <div className="gradient-line w-32 mx-auto"></div>
          </div>

<Card className="gradient-border-animated mb-6">
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">
                <span className="text-qnekt-black">Your Score:</span>
                <span className="text-qnekt-green"> {score}</span>
                <span className="text-qnekt-black">/</span>
                <span className="text-qnekt-red">{quizQuestions.length}</span>
              </CardTitle>
              <CardDescription className="text-lg">
                {percentage >= 80 ? "Excellent work!" : percentage >= 60 ? "Good job!" : "Keep studying!"}
              </CardDescription>
              <div className="gradient-line w-full mt-4"></div>
            </CardHeader>
            <CardContent>
              <Progress value={percentage} className="h-4 mb-4" />
              <p className="text-center text-qnekt-black font-semibold">{percentage.toFixed(0)}% Correct</p>
            </CardContent>
          </Card>

<div className="space-y-4">
            {quizQuestions.map((question, index) => {
              const userAnswer = selectedAnswers[index]
              const isCorrect = userAnswer === question.correct

return (
                <Card key={question.id} className="gradient-border">
                  <CardHeader>
                    <div className="flex items-center gap-2">
                      {isCorrect ? (
                        <CheckCircle2 className="h-6 w-6 text-qnekt-green" />
                      ) : (
                        <XCircle className="h-6 w-6 text-qnekt-red" />
                      )}
                      <CardTitle className="text-lg">Question {index + 1}</CardTitle>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <p className="font-medium mb-4 text-qnekt-black">{question.question}</p>
                    <div className="space-y-2">
                      {question.options.map((option, optionIndex) => (
                        <div
                          key={optionIndex}
                          className={`p-2 rounded border ${
                            optionIndex === question.correct
                              ? "bg-qnekt-green/20 border-qnekt-green"
                              : optionIndex === userAnswer && !isCorrect
                                ? "bg-qnekt-red/20 border-qnekt-red"
                                : "border-gray-200"
                          }`}
                        >
                          {option}
                        </div>
                      ))}
                    </div>
                    <div className="mt-4 p-3 bg-qnekt-green/10 rounded border border-qnekt-green">
                      <p className="text-sm text-qnekt-black">
                        <strong>Explanation:</strong> {question.explanation}
                      </p>
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>

<div className="flex justify-center gap-4 mt-8">
            <Button asChild className="bg-qnekt-green hover:bg-qnekt-green/90 gradient-border">
              <Link href="/subjects/biology">Back to Biology</Link>
            </Button>
            <Button
              onClick={() => {
                setCurrentQuestion(0)
                setSelectedAnswers([])
                setShowResults(false)
                setQuizCompleted(false)
              }}
              className="bg-qnekt-red hover:bg-qnekt-red/90 gradient-border"
            >
              Retake Quiz
            </Button>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="container py-10">
      <div className="max-w-4xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <Button variant="outline" asChild className="gradient-border">
            <Link href="/subjects/biology">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Biology
            </Link>
          </Button>
          <ColoredHeading text="Biology Quiz" className="text-3xl font-bold" />
          <div className="w-24"></div>
        </div>

<Card className="gradient-border-animated">
          <CardHeader>
            <div className="flex justify-between items-center">
              <CardTitle>
                <span className="text-qnekt-black">Question</span>
                <span className="text-qnekt-red"> {currentQuestion + 1}</span>
                <span className="text-qnekt-black"> of </span>
                <span className="text-qnekt-green">{quizQuestions.length}</span>
              </CardTitle>
              <div className="text-sm text-qnekt-black font-semibold">{Math.round(progress)}% Complete</div>
            </div>
            <Progress value={progress} className="h-2" />
            <div className="gradient-line w-full"></div>
          </CardHeader>
          <CardContent className="space-y-6">
            <h3 className="text-xl font-semibold text-qnekt-black">{quizQuestions[currentQuestion].question}</h3>

<RadioGroup
              value={selectedAnswers[currentQuestion]?.toString()}
              onValueChange={(value) => handleAnswerSelect(Number.parseInt(value))}
            >
              {quizQuestions[currentQuestion].options.map((option, index) => (
                <div
                  key={index}
                  className="flex items-center space-x-2 p-3 rounded border gradient-border hover:bg-gray-50"
                >
                  <RadioGroupItem value={index.toString()} id={`option-${index}`} />
                  <Label htmlFor={`option-${index}`} className="flex-1 cursor-pointer text-qnekt-black">
                    {option}
                  </Label>
                </div>
              ))}
            </RadioGroup>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={handlePrevious}
              disabled={currentQuestion === 0}
              className="gradient-border"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Previous
            </Button>
            <Button
              onClick={handleNext}
              disabled={selectedAnswers[currentQuestion] === undefined}
              className="bg-qnekt-green hover:bg-qnekt-green/90 gradient-border"
            >
              {currentQuestion === quizQuestions.length - 1 ? "Finish Quiz" : "Next"}
              <ArrowRight className="h-4 w-4 ml-2" />
            </Button>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/materials/edit/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { getLearningMaterialById, updateLearningMaterial } from "@/app/admin/actions"
import { useToast } from "@/components/ui/use-toast"
import { ColoredHeading } from "@/components/colored-heading"
import Link from "next/link"

export default function EditMaterialPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { toast } = useToast()
  const { id } = params
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [title, setTitle] = useState("")
  const [subject, setSubject] = useState("biology")
  const [topic, setTopic] = useState("")
  const [contentType, setContentType] = useState("video")
  const [description, setDescription] = useState("")
  const [quranicIntegration, setQuranicIntegration] = useState("")

useEffect(() => {
    async function fetchMaterial() {
      setIsLoading(true)
      try {
        const material = await getLearningMaterialById(id)

if (material) {
          setTitle(material.title)
          setSubject(material.subject.toLowerCase())
          setContentType(material.type.toLowerCase())
          setTopic(material.topic || "")
          setDescription(material.description || "")
          setQuranicIntegration(material.quranicIntegration || "")
        } else {
          toast({
            title: "Error",
            description: "Material not found.",
            variant: "destructive",
          })
          router.push("/admin")
        }
      } catch (error) {
        toast({
          title: "Error",
          description: "Failed to load material details.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchMaterial()
  }, [id, router, toast])

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

try {
      const formData = new FormData()
      formData.set("title", title)
      formData.set("subject", subject)
      formData.set("topic", topic)
      formData.set("content-type", contentType)
      formData.set("description", description)
      formData.set("quranic-integration", quranicIntegration)

const result = await updateLearningMaterial(id, formData)

if (result.success) {
        toast({
          title: "Success!",
          description: "Material updated successfully.",
        })
        router.push("/admin")
      } else {
        throw new Error(result.error)
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to update material. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

if (isLoading) {
    return (
      <div className="container py-10">
        <div className="text-center">Loading material details...</div>
      </div>
    )
  }

return (
    <div className="container py-10">
      <div className="flex flex-col space-y-6 max-w-3xl mx-auto">
        <div className="flex justify-between items-center">
          <ColoredHeading text="Edit Learning Material" element="h1" className="text-3xl font-bold tracking-tight" />
          <Button variant="outline" asChild className="gradient-border">
            <Link href="/admin">Back to Admin Panel</Link>
          </Button>
        </div>

<Card className="gradient-border-animated">
          <form onSubmit={handleSubmit}>
            <CardHeader>
              <CardTitle>
                <span className="text-qnekt-black">Edit</span> <span className="text-qnekt-red">Material</span>{" "}
                <span className="text-qnekt-green">Details</span>
              </CardTitle>
              <CardDescription>Update the information for this learning material</CardDescription>
              <div className="gradient-line w-full"></div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="title">Title</Label>
                <Input
                  id="title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  required
                  className="gradient-border"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="subject">Subject</Label>
                <Select value={subject} onValueChange={setSubject}>
                  <SelectTrigger className="gradient-border">
                    <SelectValue placeholder="Select subject" />
                  </SelectTrigger>
                  <SelectContent className="gradient-border">
                    <SelectItem value="biology">Biology</SelectItem>
                    <SelectItem value="chemistry">Chemistry</SelectItem>
                    <SelectItem value="physics">Physics</SelectItem>
                    <SelectItem value="geography">Geography</SelectItem>
                    <SelectItem value="quran">Quran</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="topic">Topic</Label>
                <Input
                  id="topic"
                  value={topic}
                  onChange={(e) => setTopic(e.target.value)}
                  required
                  className="gradient-border"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="content-type">Content Type</Label>
                <Select value={contentType} onValueChange={setContentType}>
                  <SelectTrigger className="gradient-border">
                    <SelectValue placeholder="Select content type" />
                  </SelectTrigger>
                  <SelectContent className="gradient-border">
                    <SelectItem value="video">Video</SelectItem>
                    <SelectItem value="infographic">Infographic</SelectItem>
                    <SelectItem value="quiz">Quiz</SelectItem>
                    <SelectItem value="pdf">PDF Notes</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  required
                  className="gradient-border"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="quranic-integration">Quranic Integration</Label>
                <Textarea
                  id="quranic-integration"
                  value={quranicIntegration}
                  onChange={(e) => setQuranicIntegration(e.target.value)}
                  required
                  className="gradient-border"
                />
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" type="button" onClick={() => router.push("/admin")} className="gradient-border">
                Cancel
              </Button>
              <Button
                type="submit"
                className="bg-qnekt-green hover:bg-qnekt-green/90 gradient-border"
                disabled={isSaving}
              >
                {isSaving ? "Saving..." : "Save Changes"}
              </Button>
            </CardFooter>
          </form>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/edit/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"