9e:I[903690,["/chat-static/_next/static/immutable/chunks/2adwzq39--o0u.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/1z5djiupv-o07.js","/chat-static/_next/static/immutable/chunks/0ai904ok7xmqu.js","/chat-static/_next/static/immutable/chunks/1nwzd05fjwfah.js","/chat-static/_next/static/immutable/chunks/1spqqj78e1ykn.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/1d0-ugkvq77it.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/2kv6vo--6ni6k.js","/chat-static/_next/static/immutable/chunks/3332kezoeio7-.js","/chat-static/_next/static/immutable/chunks/0mypak46se3mn.js","/chat-static/_next/static/immutable/chunks/44kjwr51vqfu6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0onb5ct4ai6ra.js","/chat-static/_next/static/immutable/chunks/2-0g3vx4_esh3.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/3_plm-kff5p9j.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3ldgj5vn7sd9j.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/37_jsnlma3buw.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/3hyzknxyslfo7.js","/chat-static/_next/static/immutable/chunks/23k0835fsuiw2.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/1cfvmi1c07pve.js","/chat-static/_next/static/immutable/chunks/0nspmgdomfjot.js","/chat-static/_next/static/immutable/chunks/14jtbeh3_arkm.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/13l_we43-exb_.js","/chat-static/_next/static/immutable/chunks/1u-i1kc_4n0sa.js","/chat-static/_next/static/immutable/chunks/1l2a-289elipf.js","/chat-static/_next/static/immutable/chunks/31ajlu82xxhh-.js","/chat-static/_next/static/immutable/chunks/3v533mjmmzne6.js","/chat-static/_next/static/immutable/chunks/3qndnuev6ehgi.js","/chat-static/_next/static/immutable/chunks/1z2_gts9yak4p.js","/chat-static/_next/static/immutable/chunks/327hbv5evqdpp.js","/chat-static/_next/static/immutable/chunks/1tz7piv4s9av5.js","/chat-static/_next/static/immutable/chunks/2pfntbtod00n6.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0zbio1k8sn41_.js","/chat-static/_next/static/immutable/chunks/12n8-9xu3_dim.js","/chat-static/_next/static/immutable/chunks/058hq6c70kfwv.js","/chat-static/_next/static/immutable/chunks/2_8w13-3-h0_i.js","/chat-static/_next/static/immutable/chunks/0njscgz9wcd9r.js","/chat-static/_next/static/immutable/chunks/1hpztq2mtp1d-.js"],"ExplicitChatIdProvider"] 9f:I[838238,["/chat-static/_next/static/immutable/chunks/2adwzq39--o0u.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/1z5djiupv-o07.js","/chat-static/_next/static/immutable/chunks/0ai904ok7xmqu.js","/chat-static/_next/static/immutable/chunks/1nwzd05fjwfah.js","/chat-static/_next/static/immutable/chunks/1spqqj78e1ykn.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/1d0-ugkvq77it.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/2kv6vo--6ni6k.js","/chat-static/_next/static/immutable/chunks/3332kezoeio7-.js","/chat-static/_next/static/immutable/chunks/0mypak46se3mn.js","/chat-static/_next/static/immutable/chunks/44kjwr51vqfu6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0onb5ct4ai6ra.js","/chat-static/_next/static/immutable/chunks/2-0g3vx4_esh3.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/3_plm-kff5p9j.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3ldgj5vn7sd9j.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/37_jsnlma3buw.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/3hyzknxyslfo7.js","/chat-static/_next/static/immutable/chunks/23k0835fsuiw2.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/1cfvmi1c07pve.js","/chat-static/_next/static/immutable/chunks/0nspmgdomfjot.js","/chat-static/_next/static/immutable/chunks/14jtbeh3_arkm.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/13l_we43-exb_.js","/chat-static/_next/static/immutable/chunks/1u-i1kc_4n0sa.js","/chat-static/_next/static/immutable/chunks/1l2a-289elipf.js","/chat-static/_next/static/immutable/chunks/31ajlu82xxhh-.js","/chat-static/_next/static/immutable/chunks/3v533mjmmzne6.js","/chat-static/_next/static/immutable/chunks/3qndnuev6ehgi.js","/chat-static/_next/static/immutable/chunks/1z2_gts9yak4p.js","/chat-static/_next/static/immutable/chunks/327hbv5evqdpp.js","/chat-static/_next/static/immutable/chunks/1tz7piv4s9av5.js","/chat-static/_next/static/immutable/chunks/2pfntbtod00n6.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0zbio1k8sn41_.js","/chat-static/_next/static/immutable/chunks/12n8-9xu3_dim.js","/chat-static/_next/static/immutable/chunks/058hq6c70kfwv.js","/chat-static/_next/static/immutable/chunks/2_8w13-3-h0_i.js","/chat-static/_next/static/immutable/chunks/0njscgz9wcd9r.js","/chat-static/_next/static/immutable/chunks/1hpztq2mtp1d-.js"],"SWRDataProvider"] a1:[] a2:[["b_fO328ngqzwo",null],["b_R0oRYhO1x7k",null],["b_ru3qO4GqJrh",null],["b_thklmRT19RC",null],["b_sMXGNhyZHqH",null],["b_M3ripPp3AdE",null]] a3:[["b_fO328ngqzwo",{"templateVersionId":null,"templateCanonId":null}],["b_R0oRYhO1x7k",{"templateVersionId":null,"templateCanonId":null}],["b_ru3qO4GqJrh",{"templateVersionId":null,"templateCanonId":null}],["b_thklmRT19RC",{"templateVersionId":null,"templateCanonId":null}],["b_sMXGNhyZHqH",{"templateVersionId":null,"templateCanonId":null}],["b_M3ripPp3AdE",{"templateVersionId":null,"templateCanonId":null}]] a4:[["b_s7Nwup91VoA","$D2026-02-03T12:53:25.962Z"],["b_BruUclGU6JI","$D2026-02-03T13:37:17.951Z"],["b_PnWam7Odxh3","$D2026-02-03T13:37:39.277Z"],["b_GaRpJ8481Sp","$D2026-02-03T13:42:17.319Z"],["b_cVj7CW9qvJr","$D2026-02-03T13:42:29.509Z"],["b_RUIACSdoGzE","$D2026-02-03T13:42:45.449Z"],["b_BAizXMx3xAL","$D2026-02-03T13:42:56.785Z"],["b_7E0dFmu07pV","$D2026-02-03T13:43:14.135Z"],["b_zKSTMsZwt3C","$D2026-02-03T13:43:25.819Z"],["b_2AwYGyMyxNT","$D2026-02-03T13:43:37.651Z"],["b_gtYhZOOibyo","$D2026-02-03T13:43:44.258Z"],["b_LSsIDQsQegy","$D2026-02-03T13:43:50.391Z"],["b_OKmGGzBM04m","$D2026-02-03T13:44:32.365Z"],["b_etxsTZaxzEV","$D2026-02-03T13:45:04.482Z"],["b_tSPVdnibN4P","$D2026-02-03T13:58:54.242Z"],["b_WniCii8Pu6m","$D2026-02-03T13:59:08.689Z"],["b_artGiVGIkl5","$D2026-02-03T13:59:23.899Z"],["b_TQJFeZpfYEm","$D2026-02-03T13:59:33.566Z"],["b_fpkNarqEQhS","$D2026-02-03T13:59:56.637Z"],["b_LRhvnpig2iJ","$D2026-02-03T14:00:12.688Z"],["b_Uq293xD2XdR","$D2026-02-03T14:00:19.022Z"],["b_4PDgADyE2I1","$D2026-02-03T14:00:34.593Z"],["b_OtfqT5FTtSi","$D2026-02-03T14:00:53.021Z"],["b_xPGKSSP6BvZ","$D2026-02-03T14:01:05.478Z"],["b_rP7dVvczoid","$D2026-02-03T14:01:24.577Z"],["b_GKtFFZlApGa","$D2026-02-03T14:02:00.349Z"],["b_76g3w8g4IZf","$D2026-02-03T14:23:33.218Z"],["b_McZBkSMGOC2","$D2026-02-03T14:23:44.834Z"],["b_KYawrelkhXa","$D2026-02-03T14:23:56.832Z"],["b_2XeldY2xGy6","$D2026-02-03T14:24:16.604Z"],["b_oLcvJp0XORR","$D2026-02-03T14:24:48.366Z"],["b_BlTlqOMmNvU","$D2026-02-03T14:25:01.320Z"],["b_dmeVH3SyISZ","$D2026-02-03T14:25:17.932Z"],["b_GW5WxcqxQMj","$D2026-02-03T14:25:28.187Z"],["b_2Ycc3XTO8lA","$D2026-02-03T14:26:05.447Z"],["b_p9JT5OfStKP","$D2026-02-03T14:26:42.168Z"],["b_F2bOo4u3sR3","$D2026-02-03T14:27:40.158Z"],["b_8xWXPxlf6ZN","$D2026-02-03T14:27:47.775Z"],["b_1LHSTT7YnZy","$D2026-02-03T14:27:59.518Z"],["b_TGZdeATHEYO","$D2026-02-03T14:28:19.876Z"],["b_O5O4APiGKmn","$D2026-02-03T14:28:31.485Z"],["b_CIweSKjxSyL","$D2026-02-03T14:28:51.394Z"],["b_NmP2GQXTq8X","$D2026-02-03T14:29:12.423Z"],["b_Dj52d85b3Zy","$D2026-02-03T14:29:36.499Z"],["b_HS3S0s2PWOw","$D2026-02-03T14:30:09.425Z"],["b_pLVxhelvKJD","$D2026-02-05T01:44:28.689Z"],["b_f6GPFTG5Cwb","$D2026-02-06T09:14:38.752Z"],["b_cq1KHr3xSmb","$D2026-02-06T09:15:12.125Z"],["b_D12KeX7Iycj","$D2026-02-06T09:15:50.143Z"],["b_aNA90JLsQvi","$D2026-02-06T09:16:07.519Z"],["b_EB61zqRZBd6","$D2026-02-06T09:16:23.417Z"],["b_x53WM2A9oVa","$D2026-02-06T09:16:54.553Z"],["b_jcJOqzvRYDT","$D2026-02-06T10:33:03.255Z"],["b_j7oJYMBcKxp","$D2026-02-06T10:57:38.771Z"],["b_QdBBmdP6kHo","$D2026-02-06T11:06:36.883Z"],["b_H5KDJ7d67qG","$D2026-02-06T11:06:48.710Z"],["b_ZE581FNyfJO","$D2026-02-06T11:44:20.636Z"],["b_AnUnBHI8zQo","$D2026-02-06T11:44:30.296Z"],["b_YfVYnhoCPQl","$D2026-02-06T11:44:44.650Z"],["b_YkytKbyl6zh","$D2026-02-06T11:44:55.519Z"],["b_oPt6ZHQD7wv","$D2026-02-06T20:55:46.869Z"],["b_gm9nTht5o7M","$D2026-02-06T20:56:01.841Z"],["b_CYbdtlkSELs","$D2026-02-06T20:56:22.125Z"],["b_Cl1bj9ftVE0","$D2026-02-06T20:56:30.984Z"],["b_zqbUK11V6rf","$D2026-02-06T20:56:45.605Z"],["b_A5bX0KSQ4Ov","$D2026-02-06T20:56:50.727Z"],["b_laDso65JcY2","$D2026-02-06T21:20:33.666Z"],["b_4AwwrJgEj9d","$D2026-02-06T22:02:11.617Z"],["b_50qCIiSGieH","$D2026-02-06T22:02:23.148Z"],["b_pnSpQMCAQL5","$D2026-02-06T22:06:30.678Z"],["b_MZBOpp7ZfHv","$D2026-02-06T22:06:46.931Z"],["b_qPKXWz0zF1P","$D2026-02-06T22:07:00.107Z"],["b_796yPXfTVxY","$D2026-02-06T22:07:16.799Z"],["b_cgMDIEHbZp6","$D2026-02-06T22:10:49.843Z"],["b_uM0HSHlevMD","$D2026-02-06T22:11:10.603Z"],["b_UWHYoSuOuaV","$D2026-02-06T22:52:39.736Z"],["b_MSvJzPIXfZT","$D2026-02-06T22:52:57.895Z"],["b_51DMZZ8HPRK","$D2026-02-06T22:53:05.885Z"],["b_qq36ULCPZFK","$D2026-02-06T22:53:15.230Z"],["b_2MLNE52ephC","$D2026-02-06T22:53:22.964Z"],["b_i4HmkaEDXHZ","$D2026-02-06T22:53:38.829Z"],["b_tZX6qYMpy8m","$D2026-02-06T22:53:54.821Z"],["b_NgM4xSNzYLq","$D2026-02-07T11:49:55.703Z"],["b_5EtXcZIBiKI","$D2026-02-08T12:32:47.045Z"],["b_qM1f5Tg5cvu","$D2026-02-08T12:33:07.225Z"],["b_EoGW6XW75Pz","$D2026-02-08T12:33:30.359Z"],["b_mwhYiIwxs6U","$D2026-02-08T12:33:38.143Z"],["b_wvKNWPNt51A","$D2026-02-08T12:33:44.048Z"],["b_nt91zJsZVSQ","$D2026-02-08T12:33:53.162Z"],["b_JwwC32MqjFW","$D2026-02-08T12:36:14.768Z"],["b_JOrCrzHGnSX","$D2026-02-08T12:40:41.872Z"],["b_x8PdYAFaqdI","$D2026-02-08T12:41:03.007Z"],["b_TKtHb13CW5A","$D2026-02-08T12:48:26.408Z"],["b_9sUR94nFtGu","$D2026-02-08T12:48:41.693Z"],["b_hbd1tRitG9t","$D2026-02-08T12:48:52.929Z"],["b_s62MpWo8gfb","$D2026-02-08T12:49:14.802Z"],["b_hTkAOxztnpe","$D2026-02-08T17:45:26.491Z"],["b_OadCVNoNAgn","$D2026-02-08T17:46:16.131Z"],["b_i1fLddJrDeL","$D2026-02-08T17:46:31.276Z"],["b_yDHWgzmEIiL","$D2026-02-08T17:47:04.866Z"],["b_L8eBpFpnwGB","$D2026-02-10T13:49:18.506Z"],["b_OFCGzLAJDyW","$D2026-02-10T13:50:31.513Z"],["b_6Spjoon3tEn","$D2026-02-11T11:49:01.960Z"],["b_alimVYnkDtz","$D2026-02-11T11:49:37.138Z"],["b_MddAiOVyCl4","$D2026-02-11T12:01:14.799Z"],["b_eGs50hPFSPf","$D2026-02-11T14:41:18.079Z"],["b_Mln4xiBXNUB","$D2026-02-11T14:41:48.634Z"],["b_QBRDJKGhyTP","$D2026-02-11T14:43:21.505Z"],["b_xZDDlIqCfBf","$D2026-02-11T14:44:50.794Z"],["b_AnI5RCZ7cLa","$D2026-02-11T14:45:07.016Z"],["b_auht42Vhqy3","$D2026-02-12T12:43:17.378Z"],["b_avQzAvrZq36","$D2026-02-12T12:43:27.825Z"],["b_c5xrEO72qMg","$D2026-02-12T12:43:43.572Z"],["b_hkngmOAK9TG","$D2026-02-12T12:44:32.625Z"],["b_P2uKor0NIfp","$D2026-02-13T01:16:03.639Z"],["b_26pA6qJRwHb","$D2026-02-13T01:16:15.611Z"],["b_rwSTUhVmc17","$D2026-02-13T01:16:34.712Z"],["b_r54L6i8hKaw","$D2026-02-13T01:17:10.882Z"],["b_5QQSnxXhOL6","$D2026-02-13T01:17:29.066Z"],["b_efFooSRErjI","$D2026-02-13T01:17:43.414Z"],["b_LBr0pirDOKy","$D2026-02-13T01:17:57.213Z"],["b_sWKdO6QvKq4","$D2026-02-13T01:18:24.833Z"],["b_Wldch9NVBso","$D2026-02-13T01:18:45.366Z"],["b_6DcU3DhIuoq","$D2026-02-13T01:18:53.381Z"],["b_3NW6SxqWHYQ","$D2026-02-14T01:19:44.619Z"],["b_xwquNYxjOoV","$D2026-02-14T01:19:58.920Z"],["b_XaUUfeE6y6p","$D2026-02-14T01:26:40.469Z"],["b_QklqlL6Cqpg","$D2026-02-15T14:00:41.664Z"],["b_fm99JsER2Ua","$D2026-02-15T14:00:55.020Z"],["b_FalAr5sbFVO","$D2026-02-15T14:01:07.297Z"],["b_fO328ngqzwo","$D2026-03-19T21:06:07.469Z"],["b_R0oRYhO1x7k","$D2026-03-19T21:08:04.547Z"],["b_ru3qO4GqJrh","$D2026-03-19T21:08:23.966Z"],["b_thklmRT19RC","$D2026-03-19T21:19:10.357Z"],["b_sMXGNhyZHqH","$D2026-03-19T21:34:51.798Z"],["b_M3ripPp3AdE","$D2026-03-19T21:35:04.616Z"]] a5:[["b_fO328ngqzwo",false],["b_R0oRYhO1x7k",false],["b_ru3qO4GqJrh",false],["b_thklmRT19RC",false],["b_sMXGNhyZHqH",false],["b_M3ripPp3AdE",false]] a6:[["b_fO328ngqzwo","$undefined"],["b_R0oRYhO1x7k","$undefined"],["b_ru3qO4GqJrh","$undefined"],["b_thklmRT19RC",{"deploymentId":"dpl_8vk7nMdXbrcrquaqEjyrvrXVpCXU"}],["b_sMXGNhyZHqH","$undefined"],["b_M3ripPp3AdE",{"git":{"ref":"v0/elprogrammateur-4825-f009f6cc","sha":"23abec15064a2f3416665684b64c283c51eb4262","type":"github","repoId":0,"repoName":"hasilaza","ownerName":"pectinecellulose","commitMessage":"Connected via create branch"}}]] a7:[["b_fO328ngqzwo",null],["b_R0oRYhO1x7k",null],["b_ru3qO4GqJrh",null],["b_thklmRT19RC",null],["b_sMXGNhyZHqH",null],["b_M3ripPp3AdE",null]] a8:[["b_fO328ngqzwo",true],["b_R0oRYhO1x7k",true],["b_ru3qO4GqJrh",true],["b_thklmRT19RC",true],["b_sMXGNhyZHqH",true],["b_M3ripPp3AdE",true]] a9:[["b_fO328ngqzwo",true],["b_R0oRYhO1x7k",true],["b_ru3qO4GqJrh",true],["b_thklmRT19RC",true],["b_sMXGNhyZHqH",true],["b_M3ripPp3AdE",true]] aa:[] ab:Tc9aa0,[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/HasilazaMotor-aQYnu0UKMfJpMgQjrKhCFbXfSZYd9R.png" isMerged="true" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/icon-dark-32x32-Mua2Ua73NiDtuQUVRLUDDVfBITuGow.png" isMerged="true" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/icon-light-32x32-AF40gom8o8IxWIR2Tq7NyvUuYk2F0C.png" isMerged="true" [V0_FILE]jpg:file="public/images/motorcycle-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/images/motorcycle-product-o9Wh0PEg3RBt6Khv9woaqsljA2sitI.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/spare-parts.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/images/spare-parts-xHVfD8VUASw1j1TFRtC7qWZraHQ22U.jpg" isMerged="true" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/placeholder-logo-x8Lt0QTBNoNwMwQCYGmC5SoxxjhROW.png" isMerged="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/placeholder-user-AeGvaN4rcXdDfnVvBmJWhH4YapP7pZ.jpg" isMerged="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/placeholder-jjGH4vwQN9ZtrFjbarPwMGYDz40wYW.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/a-propos/page.tsx" isMerged="true" "use client" import { useRef } from "react" import Image from "next/image" import Link from "next/link" import { motion, useInView } from "framer-motion" import { Eye, Target, Flag, Heart, Users, Award, TrendingUp, Shield, CheckCircle, ArrowRight, Sparkles, Zap, Handshake } from "lucide-react" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" const timeline = [ { year: "2018", title: "Création", description: "Fondation de Hasilaza Motor à Dakar avec une vision claire: démocratiser la mobilité au Sénégal." }, { year: "2019", title: "Expansion", description: "Ouverture de notre premier showroom et développement de notre réseau de distribution." }, { year: "2020", title: "Partenariats", description: "Signature de partenariats stratégiques avec des organisations internationales." }, { year: "2021", title: "Innovation", description: "Lancement de notre service d'usinage de tricycles sur mesure." }, { year: "2022", title: "Croissance", description: "Atteinte du cap des 5000 véhicules vendus et expansion nationale." }, { year: "2023", title: "Excellence", description: "Certification qualité et reconnaissance comme leader du marché sénégalais." }, ] const values = [ { icon: Sparkles, title: "Qualité", description: "Nous sélectionnons rigoureusement nos produits pour garantir fiabilité et durabilité." }, { icon: Handshake, title: "Proximité", description: "Un service personnalisé et une relation de confiance avec chaque client." }, { icon: Shield, title: "Intégrité", description: "Transparence totale dans nos pratiques commerciales et nos engagements." }, { icon: Zap, title: "Engagement", description: "Nous nous investissons pleinement pour la satisfaction de nos clients." }, ] const stats = [ { icon: Users, value: "5000+", label: "Clients satisfaits" }, { icon: Award, value: "8+", label: "Partenaires officiels" }, { icon: TrendingUp, value: "10000+", label: "Véhicules vendus" }, { icon: Shield, value: "5+", label: "Années d'expérience" }, ] const partners = [ { name: "ANCS", fullName: "Alliance Nationale Contre le Sida", logo: "/images/partners/ancs.png" }, { name: "Enabel", fullName: "Agence Belge de Developpement", logo: "/images/partners/enabel.png" }, { name: "Human Appeal", fullName: "Human Appeal International", logo: "/images/partners/human-appeal.png" }, { name: "Qatar Charity", fullName: "Qatar Charity Organization", logo: "/images/partners/qatar-charity.png" }, { name: "SOCODEVI", fullName: "Societe de Cooperation pour le Developpement International", logo: "/images/partners/socodevi.png" }, { name: "Somaphy West Africa", fullName: "Somaphy West Africa SA", logo: "/images/partners/somaphy.png" }, ] function HeroSection() { return (

{/* Background */}

Notre Histoire

Qui sommes-nous chez Hasilaza Motor?

Depuis 2018, nous accompagnons les entrepreneurs, artisans et particuliers sénégalais dans leurs projets de mobilité avec des véhicules de qualité à prix compétitifs.

) } function StorySection() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

{/* Image */}

{/* Experience Badge */}

Années d{"'"}expérience

{/* Decorative */}

{/* Content */}

Une entreprise née de la passion pour la mobilité

Hasilaza Motor est une entreprise commerciale spécialisée dans l{"'"}usinage de tricycles et la grande distribution. Notre aventure a commencé en 2018 avec une vision simple mais ambitieuse: rendre la mobilité accessible à tous les Sénégalais.

Aujourd{"'"}hui, nous sommes fiers d{"'"}être reconnus comme le leader du marché des tricycles et motos au Sénégal, servant des milliers de clients satisfaits à travers le pays.

Notre succès repose sur trois piliers fondamentaux: des produits de qualité, des prix compétitifs et un service client exceptionnel.

) } function TimelineSection() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

Notre Parcours

Découvrez les étapes clés de notre croissance

{/* Timeline Line */}

{/* Timeline Items */}

{timeline.map((item, index) => ( {/* Content */}

{item.year}

{item.title}

{item.description}

{/* Dot */}

{/* Empty space for alignment */}

))}

) } function ValuesSection() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

Nos Valeurs

Les piliers de notre succès

Ces valeurs guident chacune de nos actions et nos relations avec nos clients

{/* Values Grid */}

{values.map((value, index) => { const Icon = value.icon return (

{value.title}

{value.description}

) })}

{/* Mission/Vision Cards */}

{[ { icon: Eye, title: "Notre Vision", description: "Devenir le leader incontournable de la mobilité durable au Sénégal et en Afrique de l'Ouest, en offrant des solutions de transport accessibles et de qualité à tous.", color: "from-blue-500 to-cyan-500" }, { icon: Target, title: "Notre Mission", description: "Fournir des tricycles, motos et pièces détachées de haute qualité à des prix compétitifs, tout en garantissant un service client exceptionnel.", color: "from-purple-500 to-pink-500" }, ].map((item, index) => { const Icon = item.icon return (

{item.title}

{item.description}

) })}

) } function StatsSection() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

{stats.map((stat, index) => { const Icon = stat.icon return (

{stat.value}

{stat.label}

) })}

) } function PartnersSection() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

Nos Partenaires

Ils nous font confiance

Nous collaborons avec des organisations de renom pour fournir des solutions de mobilité adaptées aux besoins de développement local

{/* Partners Grid */}

{partners.map((partner, index) => (

{partner.name}

{partner.fullName}

))}

) } function CTASection() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

{/* Background decoration */}

Prêt à travailler avec nous?

Que vous soyez un particulier, une entreprise ou une organisation, nous avons des solutions adaptées à vos besoins.

) } export default function AboutPage() { return (

) } [V0_FILE]typescriptreact:file="app/admin/clients/page.tsx" isMerged="true" "use client" import { useState, useEffect } 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Search, Phone, Mail, MapPin, User, ShoppingCart, Loader2, Users } from "lucide-react" import { formatPrice } from "@/lib/supabase/products" import { Badge } from "@/components/ui/badge" import { useToast } from "@/hooks/use-toast" interface Client { id: string name: string phone: string email: string | null city: string address: string ordersCount: number totalSpent: number lastOrderDate: string } export default function ClientsPage() { const [clients, setClients] = useState([]) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") const { toast } = useToast() useEffect(() => { loadClients() }, []) async function loadClients() { setLoading(true) try { const response = await fetch("/api/orders") if (response.ok) { const orders = await response.json() // Group orders by customer phone (unique identifier) const clientMap = new Map() for (const order of orders) { const key = order.customer_phone if (clientMap.has(key)) { const existing = clientMap.get(key)! existing.ordersCount += 1 existing.totalSpent += order.total_price || 0 if (new Date(order.created_at) > new Date(existing.lastOrderDate)) { existing.lastOrderDate = order.created_at } } else { clientMap.set(key, { id: key, name: order.customer_name, phone: order.customer_phone, email: order.customer_email, city: order.customer_city, address: order.customer_address, ordersCount: 1, totalSpent: order.total_price || 0, lastOrderDate: order.created_at, }) } } setClients(Array.from(clientMap.values()).sort((a, b) => new Date(b.lastOrderDate).getTime() - new Date(a.lastOrderDate).getTime() )) } else { toast({ title: "Erreur", description: "Impossible de charger les clients", variant: "destructive", }) } } catch (error) { console.error("Error loading clients:", error) } setLoading(false) } const filteredClients = clients.filter((client) => { return ( client.name.toLowerCase().includes(searchQuery.toLowerCase()) || client.phone.includes(searchQuery) || (client.email && client.email.toLowerCase().includes(searchQuery.toLowerCase())) || client.city.toLowerCase().includes(searchQuery.toLowerCase()) ) }) const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("fr-FR", { day: "2-digit", month: "short", year: "numeric", }) } const totalClients = clients.length const totalRevenue = clients.reduce((sum, c) => sum + c.totalSpent, 0) const totalOrders = clients.reduce((sum, c) => sum + c.ordersCount, 0) const avgOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0 if (loading) { return (

) } return (

{/* Page Header */}

Clients

Liste des clients ayant passe des commandes

{/* Stats Cards */}

Total clients

{totalClients}

CA total clients

{formatPrice(totalRevenue)}

Panier moyen

{formatPrice(Math.round(avgOrderValue))}

{/* Clients Table */} Liste des clients {filteredClients.length} client(s) trouve(s)

setSearchQuery(e.target.value)} className="pl-10" />

{clients.length === 0 ? (

Aucun client

Les clients apparaitront ici lorsqu'ils passeront des commandes

) : (

Client Contact Ville Commandes Total depense Derniere commande Actions {filteredClients.map((client) => (

{client.name.split(" ").map((n) => n[0]).join("").slice(0, 2)}

{client.name}

{client.phone}

{client.email && (

{client.email}

)}

{client.city}

{client.ordersCount} commande{client.ordersCount > 1 ? 's' : ''} {formatPrice(client.totalSpent)} {formatDate(client.lastOrderDate)}

{client.email && ( )}

))}

)}

) } [V0_FILE]typescriptreact:file="app/admin/commandes/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Search, Eye, Phone, Mail, MapPin, Calendar, Package, MoreHorizontal, Loader2 } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { formatPrice } from "@/lib/supabase/products" interface Order { id: string order_number: string customer_name: string customer_phone: string customer_email: string | null customer_address: string customer_city: string product_name: string product_slug: string quantity: number unit_price: number total_price: number status: "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled" notes: string | null created_at: string updated_at: string } import { Separator } from "@/components/ui/separator" import { useToast } from "@/hooks/use-toast" const statusMap: Record = { pending: { label: "En attente", variant: "secondary", color: "bg-yellow-500" }, confirmed: { label: "Confirme", variant: "default", color: "bg-blue-500" }, processing: { label: "En cours", variant: "outline", color: "bg-orange-500" }, shipped: { label: "Expedie", variant: "default", color: "bg-indigo-500" }, delivered: { label: "Livre", variant: "default", color: "bg-green-500" }, cancelled: { label: "Annule", variant: "destructive", color: "bg-red-500" }, } export default function OrdersAdminPage() { const [orders, setOrders] = useState([]) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [selectedOrder, setSelectedOrder] = useState(null) const { toast } = useToast() useEffect(() => { loadOrders() }, []) async function loadOrders() { setLoading(true) try { const response = await fetch("/api/orders") if (response.ok) { const data = await response.json() setOrders(data) } else { toast({ title: "Erreur", description: "Impossible de charger les commandes", variant: "destructive", }) } } catch (error) { console.error("Error loading orders:", error) } setLoading(false) } const filteredOrders = orders.filter((order) => { const matchesSearch = order.customer_name.toLowerCase().includes(searchQuery.toLowerCase()) || order.order_number.toLowerCase().includes(searchQuery.toLowerCase()) || order.customer_phone.includes(searchQuery) const matchesStatus = statusFilter === "all" || order.status === statusFilter return matchesSearch && matchesStatus }) const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("fr-FR", { day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit", }) } const statusCounts = { pending: orders.filter((o) => o.status === "pending").length, confirmed: orders.filter((o) => o.status === "confirmed").length, processing: orders.filter((o) => o.status === "processing").length, shipped: orders.filter((o) => o.status === "shipped").length, delivered: orders.filter((o) => o.status === "delivered").length, cancelled: orders.filter((o) => o.status === "cancelled").length, } const handleStatusChange = async (orderId: string, newStatus: Order["status"]) => { try { const response = await fetch(`/api/orders/${orderId}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ status: newStatus }), }) if (response.ok) { toast({ title: "Succes", description: `Statut mis a jour: ${statusMap[newStatus].label}`, }) loadOrders() } else { toast({ title: "Erreur", description: "Erreur lors de la mise a jour du statut", variant: "destructive", }) } } catch (error) { console.error("Error updating status:", error) toast({ title: "Erreur", description: "Erreur lors de la mise a jour du statut", variant: "destructive", }) } } if (loading) { return (

) } return (

{/* Page Header */}

Commandes

Gerez et suivez toutes les commandes

{/* Stats Cards */}

En attente

{statusCounts.pending}

Confirmees

{statusCounts.confirmed}

En cours

{statusCounts.processing}

Expediees

{statusCounts.shipped}

Livrees

{statusCounts.delivered}

Annulees

{statusCounts.cancelled}

{/* Orders Table */} Liste des commandes {filteredOrders.length} commande(s) trouvee(s)

setSearchQuery(e.target.value)} className="pl-10" />

{orders.length === 0 ? (

Aucune commande pour le moment

) : (

Commande Client Produit Statut Total Actions {filteredOrders.map((order) => (

{order.order_number} {formatDate(order.created_at)}

{order.customer_name} {order.customer_city}

{order.product_name} Qte: {order.quantity}

{statusMap[order.status]?.label || order.status} {formatPrice(order.total_price)} setSelectedOrder(order)}> Voir details Changer le statut handleStatusChange(order.id, "confirmed")}> Confirmer handleStatusChange(order.id, "processing")}> Marquer en cours handleStatusChange(order.id, "shipped")}> Marquer expedie handleStatusChange(order.id, "delivered")}> Marquer livre handleStatusChange(order.id, "cancelled")} > Annuler ))}

)} {/* Order Details Dialog */}

) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true" "use client" import React, { useEffect, useState } from "react" import { useRouter, usePathname } from "next/navigation" import { AdminSidebar } from "@/components/admin/admin-sidebar" import { AdminHeader } from "@/components/admin/admin-header" import { Loader2 } from "lucide-react" function getCookie(name: string): string | null { if (typeof document === "undefined") return null const value = `; ${document.cookie}` const parts = value.split(`; ${name}=`) if (parts.length === 2) return parts.pop()?.split(";").shift() || null return null } export default function AdminLayout({ children, }: { children: React.ReactNode }) { const router = useRouter() const pathname = usePathname() const [isAuthenticated, setIsAuthenticated] = useState(false) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Skip auth check for login page if (pathname === "/admin/login") { setIsLoading(false) setIsAuthenticated(true) return } // Check for admin session cookie const sessionCookie = getCookie("admin_session") if (sessionCookie === "authenticated_admin_user_2026") { setIsAuthenticated(true) } else { router.push("/admin/login") } setIsLoading(false) }, [pathname, router]) // Show loading state if (isLoading) { return (

) } // For login page, render without admin layout if (pathname === "/admin/login") { return <>{children} } // If not authenticated, show nothing (will redirect) if (!isAuthenticated) { return (

) } return (

{children}

) } [V0_FILE]typescriptreact:file="app/admin/login/layout.tsx" isMerged="true" import React from "react" export default function LoginLayout({ children, }: { children: React.ReactNode }) { // Login page has its own layout without admin sidebar return <>{children} } [V0_FILE]typescriptreact:file="app/admin/statistiques/page.tsx" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { TrendingUp, DollarSign, ShoppingCart, Package, Users, Loader2 } from "lucide-react" import { formatPrice } from "@/lib/supabase/products" import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Legend } from "recharts" interface StatsData { summary: { totalRevenue: number totalOrders: number pendingOrders: number completedOrders: number cancelledOrders: number uniqueClients: number totalProducts: number } monthlyData: { month: string; orders: number; revenue: number }[] categoryData: { name: string; value: number }[] topProducts: { name: string; orders: number; revenue: number }[] recentOrders: { id: string; orderNumber: string; customer: string; product: string; total: number; status: string; date: string }[] } const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'] export default function StatisticsPage() { const [stats, setStats] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { loadStats() }, []) async function loadStats() { setLoading(true) try { const response = await fetch("/api/stats") if (response.ok) { const data = await response.json() setStats(data) } } catch (error) { console.error("Error loading stats:", error) } setLoading(false) } if (loading) { return (

) } if (!stats) { return (

Impossible de charger les statistiques

) } const avgOrderValue = stats.summary.totalOrders > 0 ? stats.summary.totalRevenue / stats.summary.totalOrders : 0 return (

{/* Page Header */}

Statistiques

Analysez les performances de votre activite

{/* Stats Grid */}

Chiffre d'affaires

{formatPrice(stats.summary.totalRevenue)}

Commandes livrees/completees

Total commandes

{stats.summary.totalOrders}

{stats.summary.pendingOrders} en attente {stats.summary.completedOrders} completees

Panier moyen

{formatPrice(Math.round(avgOrderValue))}

Par commande

Clients uniques

{stats.summary.uniqueClients}

{stats.summary.totalProducts} produits en catalogue

{/* Charts */} Revenus Commandes Categories Evolution du chiffre d'affaires Revenus mensuels sur les 6 derniers mois {stats.monthlyData.length > 0 ? ( `${(value / 1000000).toFixed(1)}M`} /> [formatPrice(value), "Revenu"]} labelFormatter={(label) => `Mois: ${label}`} /> ) : (

Aucune donnee disponible

)} Evolution des commandes Nombre de commandes par mois {stats.monthlyData.length > 0 ? ( ) : (

Aucune donnee disponible

)} Commandes par categorie Repartition des commandes par categorie de produits {stats.categoryData.length > 0 ? ( `${name} (${(percent * 100).toFixed(0)}%)`} outerRadius={120} fill="#8884d8" dataKey="value" > {stats.categoryData.map((entry, index) => ( ))} ) : (

Aucune donnee disponible

)} {/* Bottom Grid */}

{/* Top Products */} Produits les plus commandes Top 5 des produits {stats.topProducts.length > 0 ? (

{stats.topProducts.map((product, index) => (

{index + 1}

{product.name}

{product.orders} commande{product.orders > 1 ? 's' : ''}

{formatPrice(product.revenue)}

))}

) : (

Aucun produit commande

)} {/* Recent Orders */} Commandes recentes 10 dernieres commandes {stats.recentOrders.length > 0 ? (

{stats.recentOrders.map((order) => (

{order.customer}

{order.product}

{formatPrice(order.total)}

{new Date(order.date).toLocaleDateString("fr-FR")}

))}

) : (

Aucune commande

)}

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" "use client" import React from "react" import { useState, useRef } from "react" import { motion, useInView } from "framer-motion" import { Phone, Mail, MapPin, Clock, Send, MessageCircle, CheckCircle, ArrowRight } from "lucide-react" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" const contactInfo = [ { icon: Phone, title: "Téléphone", value: "+221 781094091", href: "tel:+221781094091", description: "Appelez-nous directement" }, { icon: Mail, title: "Email", value: "Mortalla581@gmail.com", href: "mailto:Mortalla581@gmail.com", description: "Envoyez-nous un email" }, { icon: MapPin, title: "Adresse", value: "HLM 2, Dakar, Senegal", href: "https://maps.google.com/?q=HLM+2+Dakar+Senegal", description: "Visitez notre showroom" }, { icon: Clock, title: "Horaires", value: "Lun-Sam: 9h - 18h", href: "#", description: "Nous sommes disponibles" }, ] const faqs = [ { question: "Comment puis-je passer commande?", answer: "Vous pouvez passer commande en nous contactant par téléphone, WhatsApp ou email. Nous vous accompagnons dans le choix du produit adapté à vos besoins et vous envoyons un devis détaillé." }, { question: "Quels sont les modes de paiement acceptés?", answer: "Nous acceptons les paiements par virement bancaire, chèque, Wave et Orange Money. Des facilités de paiement peuvent être accordées selon les cas." }, { question: "Livrez-vous en dehors de Dakar?", answer: "Oui, nous livrons dans tout le Sénégal. La livraison est gratuite sur Dakar. Pour les autres régions, des frais de transport peuvent s'appliquer." }, { question: "Quelle est la durée de la garantie?", answer: "Tous nos véhicules sont garantis 2 ans (pièces et main d'oeuvre). Les pièces détachées sont garanties selon leur catégorie (1 à 6 mois)." }, { question: "Proposez-vous un service après-vente?", answer: "Absolument! Nous disposons d'un atelier équipé et d'une équipe de techniciens qualifiés pour l'entretien et les réparations de vos véhicules." }, ] function HeroSection() { return (

{/* Background */}

Contactez-nous

Nous sommes là pour vous aider

Une question? Un projet? Notre équipe est à votre écoute pour vous accompagner dans votre choix et répondre à toutes vos interrogations.

) } function ContactInfoSection() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) return (

{contactInfo.map((info, index) => { const Icon = info.icon return (

{info.title}

{info.value}

{info.description}

) })}

) } function ContactFormSection() { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px" }) const [formData, setFormData] = useState({ name: "", email: "", phone: "", subject: "", message: "" }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission await new Promise(resolve => setTimeout(resolve, 1500)) setIsSubmitting(false) setIsSubmitted(true) // Reset after 3 seconds setTimeout(() => { setIsSubmitted(false) setFormData({ name: "", email: "", phone: "", subject: "", message: "" }) }, 3000) } return (

{/* Form */}

Envoyez-nous un message

Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.

{isSubmitted ? (

Message envoyé!

Nous avons bien reçu votre message et vous répondrons très bientôt.

) : (

Nom complet * setFormData({ ...formData, name: e.target.value })} placeholder="Votre nom" className="h-12 rounded-xl" />

Téléphone * setFormData({ ...formData, phone: e.target.value })} placeholder="+221 7X XXX XX XX" className="h-12 rounded-xl" />

Email setFormData({ ...formData, email: e.target.value })} placeholder="votre@email.com" className="h-12 rounded-xl" />

Sujet *

Message *

setFormData({ ...formData, message: e.target.value })}
                    placeholder="Décrivez votre demande..."
                    rows={5}
                    className="w-full px-4 py-3 bg-background border border-input rounded-xl text-foreground resize-none"
                  />
                </div>

<Button
                  type="submit"
                  size="lg"
                  disabled={isSubmitting}
                  className="w-full bg-primary hover:bg-primary/90 text-primary-foreground h-14"
                >
                  {isSubmitting ? (
                    <span className="flex items-center gap-2">
                      <svg className="animate-spin w-5 h-5" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                      </svg>
                      Envoi en cours...
                    </span>
                  ) : (
                    <span className="flex items-center gap-2">
                      <Send className="w-5 h-5" />
                      Envoyer le message
                    </span>
                  )}
                </Button>
              </form>
            )}
          </motion.div>

{/* WhatsApp CTA & Map */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="space-y-8"
          >
            {/* WhatsApp Card */}
            <div className="bg-primary rounded-3xl p-8 text-primary-foreground">
              <div className="flex items-start gap-4 mb-6">
                <div className="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center shrink-0">
                  <MessageCircle className="w-7 h-7" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold mb-2">Réponse rapide via WhatsApp</h3>
                  <p className="text-primary-foreground/80">
                    Besoin d{"'"}une réponse immédiate? Contactez-nous directement sur WhatsApp 
                    pour une assistance en temps réel.
                  </p>
                </div>
              </div>
              <motion.a
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                href="https://wa.me/221781094091?text=Bonjour, je vous contacte depuis votre site web"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center justify-center gap-2 w-full py-4 bg-white text-primary rounded-xl font-bold hover:bg-white/90 transition-colors"
              >
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
                Discuter sur WhatsApp
              </motion.a>
            </div>

{/* Map Placeholder */}
            <div className="bg-muted rounded-3xl overflow-hidden h-[300px] relative">
              <div className="absolute inset-0 flex items-center justify-center bg-muted">
                <div className="text-center">
                  <MapPin className="w-12 h-12 text-primary mx-auto mb-4" />
                  <h3 className="font-bold text-foreground mb-2">Notre Showroom</h3>
                    <p className="text-muted-foreground">HLM 2, Dakar, Senegal</p>
                  <a 
                    href="https://maps.google.com/?q=HLM+2+Dakar+Senegal" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-1 text-primary font-medium mt-4 hover:underline"
                  >
                    Voir sur Google Maps
                    <ArrowRight className="w-4 h-4" />
                  </a>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}

function FAQSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })
  const [openIndex, setOpenIndex] = useState<number | null>(0)

return (
    <section ref={ref} className="py-24 bg-background">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center max-w-3xl mx-auto mb-16"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={isInView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
          >
            <span className="text-sm font-semibold text-primary">FAQ</span>
          </motion.div>
          <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-6">
            Questions <span className="text-primary">fréquentes</span>
          </h2>
          <p className="text-lg text-muted-foreground">
            Retrouvez les réponses aux questions les plus posées par nos clients
          </p>
        </motion.div>

<div className="max-w-3xl mx-auto space-y-4">
          {faqs.map((faq, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
              className="bg-muted/50 rounded-2xl overflow-hidden"
            >
              <button
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                className="w-full flex items-center justify-between p-6 text-left"
              >
                <span className="font-semibold text-foreground pr-4">{faq.question}</span>
                <motion.div
                  animate={{ rotate: openIndex === index ? 180 : 0 }}
                  transition={{ duration: 0.2 }}
                  className="shrink-0 w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center"
                >
                  <svg className="w-5 h-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </motion.div>
              </button>
              <motion.div
                initial={false}
                animate={{
                  height: openIndex === index ? "auto" : 0,
                  opacity: openIndex === index ? 1 : 0
                }}
                transition={{ duration: 0.3 }}
                className="overflow-hidden"
              >
                <p className="px-6 pb-6 text-muted-foreground">
                  {faq.answer}
                </p>
              </motion.div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default function ContactPage() {
  return (
    <main className="min-h-screen bg-background">
      <Header />
      <HeroSection />
      <ContactInfoSection />
      <ContactFormSection />
      <FAQSection />
      <Footer />
    </main>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0 0);
  --primary: oklch(0.55 0.22 25);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.96 0.01 90);
  --secondary-foreground: oklch(0.25 0 0);
  --muted: oklch(0.94 0 0);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.45 0.18 25);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0 0);
  --input: oklch(0.92 0 0);
  --ring: oklch(0.55 0.22 25);
  --chart-1: oklch(0.55 0.22 25);
  --chart-2: oklch(0.6 0.15 45);
  --chart-3: oklch(0.5 0.1 200);
  --chart-4: oklch(0.7 0.15 80);
  --chart-5: oklch(0.65 0.18 60);
  --radius: 0.75rem;
  --sidebar: oklch(0.98 0 0);
  --sidebar-foreground: oklch(0.15 0 0);
  --sidebar-primary: oklch(0.55 0.22 25);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.96 0.01 90);
  --sidebar-accent-foreground: oklch(0.25 0 0);
  --sidebar-border: oklch(0.9 0 0);
  --sidebar-ring: oklch(0.55 0.22 25);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.18 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.18 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.60 0.22 25);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.25 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.22 0 0);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.50 0.18 25);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.28 0 0);
  --input: oklch(0.25 0 0);
  --ring: oklch(0.60 0.22 25);
  --chart-1: oklch(0.60 0.22 25);
  --chart-2: oklch(0.65 0.15 45);
  --chart-3: oklch(0.55 0.1 200);
  --chart-4: oklch(0.75 0.15 80);
  --chart-5: oklch(0.70 0.18 60);
  --sidebar: oklch(0.18 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.60 0.22 25);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.25 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.28 0 0);
  --sidebar-ring: oklch(0.60 0.22 25);
}

@theme inline {
  --font-sans: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Hide v0 badge/watermark globally */
[id^="v0-built-with"],
a[href*="v0.app/chat/api/open/built-with"],
div[style*="v0-built-with"],
div[style*="position: fixed"][style*="bottom: 24px"][style*="right: 24px"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
[V0_FILE]typescriptreact:file="app/produits/[slug]/not-found.tsx" isMerged="true"
import Link from "next/link"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Search } from "lucide-react"

export default function ProductNotFound() {
  return (
    <main className="min-h-screen bg-background">
      <Header />
      
      <section className="pt-32 pb-20">
        <div className="container mx-auto px-4">
          <div className="max-w-lg mx-auto text-center">
            <div className="w-24 h-24 bg-muted rounded-full flex items-center justify-center mx-auto mb-8">
              <Search className="w-12 h-12 text-muted-foreground" />
            </div>
            
            <h1 className="text-3xl font-bold text-foreground mb-4">
              Produit introuvable
            </h1>
            
            <p className="text-muted-foreground mb-8">
              Le produit que vous recherchez n{"'"}existe pas ou n{"'"}est plus disponible. 
              Parcourez notre catalogue pour découvrir nos autres produits.
            </p>

<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Button asChild variant="outline" className="bg-transparent">
                <Link href="/produits" className="flex items-center gap-2">
                  <ArrowLeft className="w-5 h-5" />
                  Retour aux produits
                </Link>
              </Button>
              <Button asChild className="bg-primary hover:bg-primary/90 text-primary-foreground">
                <Link href="/">
                  Page d{"'"}accueil
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/produits/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]plaintext:file="bun.lock" isMerged="true"
{
  "lockfileVersion": 1,
  "configVersion": 1,
  "workspaces": {
    "": {
      "name": "my-v0-project",
      "dependencies": {
        "@emotion/is-prop-valid": "latest",
        "@hookform/resolvers": "^3.10.0",
        "@radix-ui/react-accordion": "1.2.2",
        "@radix-ui/react-alert-dialog": "1.1.4",
        "@radix-ui/react-aspect-ratio": "1.1.1",
        "@radix-ui/react-avatar": "1.1.2",
        "@radix-ui/react-checkbox": "1.1.3",
        "@radix-ui/react-collapsible": "1.1.2",
        "@radix-ui/react-context-menu": "2.2.4",
        "@radix-ui/react-dialog": "1.1.4",
        "@radix-ui/react-dropdown-menu": "2.1.4",
        "@radix-ui/react-hover-card": "1.1.4",
        "@radix-ui/react-label": "2.1.1",
        "@radix-ui/react-menubar": "1.1.4",
        "@radix-ui/react-navigation-menu": "1.2.3",
        "@radix-ui/react-popover": "1.1.4",
        "@radix-ui/react-progress": "1.1.1",
        "@radix-ui/react-radio-group": "1.2.2",
        "@radix-ui/react-scroll-area": "1.2.2",
        "@radix-ui/react-select": "2.1.4",
        "@radix-ui/react-separator": "1.1.1",
        "@radix-ui/react-slider": "1.2.2",
        "@radix-ui/react-slot": "1.1.1",
        "@radix-ui/react-switch": "1.1.2",
        "@radix-ui/react-tabs": "1.1.2",
        "@radix-ui/react-toast": "1.2.4",
        "@radix-ui/react-toggle": "1.1.1",
        "@radix-ui/react-toggle-group": "1.1.1",
        "@radix-ui/react-tooltip": "1.1.6",
        "@supabase/ssr": "latest",
        "@supabase/supabase-js": "latest",
        "@vercel/analytics": "latest",
        "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",
        "framer-motion": "latest",
        "input-otp": "1.4.1",
        "lucide-react": "^0.454.0",
        "next": "16.0.10",
        "next-themes": "^0.4.6",
        "react": "19.2.0",
        "react-day-picker": "9.8.0",
        "react-dom": "19.2.0",
        "react-hook-form": "^7.60.0",
        "react-resizable-panels": "^2.1.7",
        "recharts": "latest",
        "sonner": "^1.7.4",
        "tailwind-merge": "^2.5.5",
        "tailwindcss-animate": "^1.0.7",
        "vaul": "^1.1.2",
        "zod": "3.25.76",
      },
      "devDependencies": {
        "@tailwindcss/postcss": "^4.1.9",
        "@types/node": "^22",
        "@types/react": "^19",
        "@types/react-dom": "^19",
        "postcss": "^8.5",
        "tailwindcss": "^4.1.9",
        "tw-animate-css": "1.3.3",
        "typescript": "^5",
      },
    },
  },
  "packages": {
    "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],

"@date-fns/tz": ["@date-fns/tz@1.2.0", "", {}, "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="],

"@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],

"@emotion/is-prop-valid": ["@emotion/is-prop-valid@1.4.0", "", { "dependencies": { "@emotion/memoize": "^0.9.0" } }, "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw=="],

"@emotion/memoize": ["@emotion/memoize@0.9.0", "", {}, "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="],

"@floating-ui/core": ["@floating-ui/core@1.7.4", "", { "dependencies": { "@floating-ui/utils": "^0.2.10" } }, "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg=="],

"@floating-ui/dom": ["@floating-ui/dom@1.7.5", "", { "dependencies": { "@floating-ui/core": "^1.7.4", "@floating-ui/utils": "^0.2.10" } }, "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg=="],

"@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.7", "", { "dependencies": { "@floating-ui/dom": "^1.7.5" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg=="],

"@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],

"@hookform/resolvers": ["@hookform/resolvers@3.10.0", "", { "peerDependencies": { "react-hook-form": "^7.0.0" } }, "sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag=="],

"@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],

"@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],

"@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.4" }, "os": "darwin", "cpu": "x64" }, "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw=="],

"@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g=="],

"@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg=="],

"@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A=="],

"@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw=="],

"@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.2.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA=="],

"@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.2.4", "", { "os": "linux", "cpu": "none" }, "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA=="],

"@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.2.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ=="],

"@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw=="],

"@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw=="],

"@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg=="],

"@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.2.4" }, "os": "linux", "cpu": "arm" }, "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw=="],

"@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg=="],

"@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.2.4" }, "os": "linux", "cpu": "ppc64" }, "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA=="],

"@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.2.4" }, "os": "linux", "cpu": "none" }, "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw=="],

"@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.2.4" }, "os": "linux", "cpu": "s390x" }, "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg=="],

"@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ=="],

"@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg=="],

"@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q=="],

"@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.5", "", { "dependencies": { "@emnapi/runtime": "^1.7.0" }, "cpu": "none" }, "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw=="],

"@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.34.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g=="],

"@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg=="],

"@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],

"@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],

"@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],

"@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],

"@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],

"@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],

"@next/env": ["@next/env@16.0.10", "", {}, "sha512-8tuaQkyDVgeONQ1MeT9Mkk8pQmZapMKFh5B+OrFUlG3rVmYTXcXlBetBgTurKXGaIZvkoqRT9JL5K3phXcgang=="],

"@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.0.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-4XgdKtdVsaflErz+B5XeG0T5PeXKDdruDf3CRpnhN+8UebNa5N2H58+3GDgpn/9GBurrQ1uWW768FfscwYkJRg=="],

"@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.0.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-spbEObMvRKkQ3CkYVOME+ocPDFo5UqHb8EMTS78/0mQ+O1nqE8toHJVioZo4TvebATxgA8XMTHHrScPrn68OGw=="],

"@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.0.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-uQtWE3X0iGB8apTIskOMi2w/MKONrPOUCi5yLO+v3O8Mb5c7K4Q5KD1jvTpTF5gJKa3VH/ijKjKUq9O9UhwOYw=="],

"@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.0.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-llA+hiDTrYvyWI21Z0L1GiXwjQaanPVQQwru5peOgtooeJ8qx3tlqRV2P7uH2pKQaUfHxI/WVarvI5oYgGxaTw=="],

"@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.0.10", "", { "os": "linux", "cpu": "x64" }, "sha512-AK2q5H0+a9nsXbeZ3FZdMtbtu9jxW4R/NgzZ6+lrTm3d6Zb7jYrWcgjcpM1k8uuqlSy4xIyPR2YiuUr+wXsavA=="],

"@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.0.10", "", { "os": "linux", "cpu": "x64" }, "sha512-1TDG9PDKivNw5550S111gsO4RGennLVl9cipPhtkXIFVwo31YZ73nEbLjNC8qG3SgTz/QZyYyaFYMeY4BKZR/g=="],

"@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.0.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-aEZIS4Hh32xdJQbHz121pyuVZniSNoqDVx1yIr2hy+ZwJGipeqnMZBJHyMxv2tiuAXGx6/xpTcQJ6btIiBjgmg=="],

"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.0.10", "", { "os": "win32", "cpu": "x64" }, "sha512-E+njfCoFLb01RAFEnGZn6ERoOqhK1Gl3Lfz1Kjnj0Ulfu7oJbuMyvBKNj/bw8XZnenHDASlygTjZICQW+rYW1Q=="],

"@radix-ui/number": ["@radix-ui/number@1.1.0", "", {}, "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="],

"@radix-ui/primitive": ["@radix-ui/primitive@1.1.1", "", {}, "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="],

"@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-collection": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g=="],

"@radix-ui/react-alert-dialog": ["@radix-ui/react-alert-dialog@1.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-slot": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-A6Kh23qZDLy3PSU4bh2UJZznOrUdHImIXqF8YtUa6CN73f8EOO9XlXSCd9IHyPvIquTaa/kwaSWzZTtUvgXVGw=="],

"@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.1", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w=="],

"@radix-ui/react-aspect-ratio": ["@radix-ui/react-aspect-ratio@1.1.1", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kNU4FIpcFMBLkOUcgeIteH06/8JLBcYY6Le1iKenDGCYNYFX3TQqCZjzkOsz37h7r94/99GTb7YhEr98ZBJibw=="],

"@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.2", "", { "dependencies": { "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig=="],

"@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.1.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-HD7/ocp8f1B3e6OHygH0n7ZKjONkhciy1Nh0yuBgObqThc3oyx+vuMfFHKAknXRHHWVE9XvXStxJFyjUmB8PIw=="],

"@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A=="],

"@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-slot": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA=="],

"@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw=="],

"@radix-ui/react-context": ["@radix-ui/react-context@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q=="],

"@radix-ui/react-context-menu": ["@radix-ui/react-context-menu@2.2.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-menu": "2.1.4", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ap4wdGwK52rJxGkwukU1NrnEodsUFQIooANKu+ey7d6raQ2biTcEf8za1zr0mgFHieevRTB2nK4dJeN8pTAZGQ=="],

"@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.3", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.1", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-portal": "1.1.3", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-use-controllable-state": "1.1.0", "aria-hidden": "^1.1.1", "react-remove-scroll": "^2.6.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA=="],

"@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg=="],

"@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-escape-keydown": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg=="],

"@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-menu": "2.1.4", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-iXU1Ab5ecM+yEepGAWK8ZhMyKX4ubFdCNtol4sT9D0OVErG9PNElfx3TQhjw7n7BC5nFVz68/5//clWy+8TXzA=="],

"@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg=="],

"@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA=="],

"@radix-ui/react-hover-card": ["@radix-ui/react-hover-card@1.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.3", "@radix-ui/react-popper": "1.2.1", "@radix-ui/react-portal": "1.1.3", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-QSUUnRA3PQ2UhvoCv3eYvMnCAgGQW+sTu86QPuNb+ZMi+ZENd6UWpiXbcWDQ4AEaKF9KKpCHBeaJz9Rw6lRlaQ=="],

"@radix-ui/react-id": ["@radix-ui/react-id@1.1.0", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA=="],

"@radix-ui/react-label": ["@radix-ui/react-label@2.1.1", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw=="],

"@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-dismissable-layer": "1.1.3", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.1", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.1", "@radix-ui/react-portal": "1.1.3", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-roving-focus": "1.1.1", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-use-callback-ref": "1.1.0", "aria-hidden": "^1.1.1", "react-remove-scroll": "^2.6.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A=="],

"@radix-ui/react-menubar": ["@radix-ui/react-menubar@1.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-menu": "2.1.4", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-roving-focus": "1.1.1", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-+KMpi7VAZuB46+1LD7a30zb5IxyzLgC8m8j42gk3N4TUCcViNQdX8FhoH1HDvYiA8quuqcek4R4bYpPn/SY1GA=="],

"@radix-ui/react-navigation-menu": ["@radix-ui/react-navigation-menu@1.2.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-dismissable-layer": "1.1.3", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-visually-hidden": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IQWAsQ7dsLIYDrn0WqPU+cdM7MONTv9nqrLVYoie3BPiabSfUVDe6Fr+oEt0Cofsr9ONDcDe9xhmJbL1Uq1yKg=="],

"@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.3", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.1", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.1", "@radix-ui/react-portal": "1.1.3", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-use-controllable-state": "1.1.0", "aria-hidden": "^1.1.1", "react-remove-scroll": "^2.6.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw=="],

"@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.1", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-rect": "1.1.0", "@radix-ui/react-use-size": "1.1.0", "@radix-ui/rect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw=="],

"@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw=="],

"@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg=="],

"@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.0.1", "", { "dependencies": { "@radix-ui/react-slot": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg=="],

"@radix-ui/react-progress": ["@radix-ui/react-progress@1.1.1", "", { "dependencies": { "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA=="],

"@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.2.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-roving-focus": "1.1.1", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ=="],

"@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.1", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw=="],

"@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.2", "", { "dependencies": { "@radix-ui/number": "1.1.0", "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g=="],

"@radix-ui/react-select": ["@radix-ui/react-select@2.1.4", "", { "dependencies": { "@radix-ui/number": "1.1.0", "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-dismissable-layer": "1.1.3", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.1", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.1", "@radix-ui/react-portal": "1.1.3", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-visually-hidden": "1.1.1", "aria-hidden": "^1.1.1", "react-remove-scroll": "^2.6.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pOkb2u8KgO47j/h7AylCj7dJsm69BXcjkrvTqMptFqsE2i0p8lHkfgneXKjAgPzBMivnoMyt8o4KiV4wYzDdyQ=="],

"@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.1", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw=="],

"@radix-ui/react-slider": ["@radix-ui/react-slider@1.2.2", "", { "dependencies": { "@radix-ui/number": "1.1.0", "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sNlU06ii1/ZcbHf8I9En54ZPW0Vil/yPVg4vQMcFNjrIx51jsHbFl1HYHQvCIWJSr1q0ZmA+iIs/ZTv8h7HHSA=="],

"@radix-ui/react-slot": ["@radix-ui/react-slot@1.1.1", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g=="],

"@radix-ui/react-switch": ["@radix-ui/react-switch@1.1.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g=="],

"@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-roving-focus": "1.1.1", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ=="],

"@radix-ui/react-toast": ["@radix-ui/react-toast@1.2.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.3", "@radix-ui/react-portal": "1.1.3", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-visually-hidden": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Sch9idFJHJTMH9YNpxxESqABcAFweJG4tKv+0zo0m5XBvUSL8FM5xKcJLFLXononpePs8IclyX1KieL5SDUNgA=="],

"@radix-ui/react-toggle": ["@radix-ui/react-toggle@1.1.1", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-i77tcgObYr743IonC1hrsnnPmszDRn8p+EGUsUt+5a/JFn28fxaM88Py6V2mc8J5kELMWishI0rLnuGLFD/nnQ=="],

"@radix-ui/react-toggle-group": ["@radix-ui/react-toggle-group@1.1.1", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-roving-focus": "1.1.1", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-OgDLZEA30Ylyz8YSXvnGqIHtERqnUt1KUYTKdw/y8u7Ci6zGiJfXc02jahmcSNK3YcErqioj/9flWC9S1ihfwg=="],

"@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.1.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.3", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.1", "@radix-ui/react-portal": "1.1.3", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.1", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-visually-hidden": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA=="],

"@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw=="],

"@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.1.0", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw=="],

"@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.0", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw=="],

"@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w=="],

"@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og=="],

"@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.0", "", { "dependencies": { "@radix-ui/rect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ=="],

"@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.0", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw=="],

"@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.1.1", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg=="],

"@radix-ui/rect": ["@radix-ui/rect@1.1.0", "", {}, "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="],

"@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ=="],

"@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],

"@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],

"@supabase/auth-js": ["@supabase/auth-js@2.93.3", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-JdnkHZPKexVGSNONtu89RHU4bxz3X9kxx+f5ZnR5osoCIX+vs/MckwWRPZEybAEvlJXt5xjomDb3IB876QCxWQ=="],

"@supabase/functions-js": ["@supabase/functions-js@2.93.3", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-qWO0gHNDm/5jRjROv/nv9L6sYabCWS1kzorOLUv3kqCwRvEJLYZga93ppJPrZwOgoZfXmJzvpjY8fODA4HQfBw=="],

"@supabase/postgrest-js": ["@supabase/postgrest-js@2.93.3", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-+iJ96g94skO2e4clsRSmEXg22NUOjh9BziapsJSAvnB1grOBf/BA8vGtCHjNOA+Z6lvKXL1jwBqcL9+fS1W/Lg=="],

"@supabase/realtime-js": ["@supabase/realtime-js@2.93.3", "", { "dependencies": { "@types/phoenix": "^1.6.6", "@types/ws": "^8.18.1", "tslib": "2.8.1", "ws": "^8.18.2" } }, "sha512-gnYpcFzwy8IkezRP4CDbT5I8jOsiOjrWrqTY1B+7jIriXsnpifmlM6RRjLBm9oD7OwPG0/WksniGPdKW67sXOA=="],

"@supabase/ssr": ["@supabase/ssr@0.8.0", "", { "dependencies": { "cookie": "^1.0.2" }, "peerDependencies": { "@supabase/supabase-js": "^2.76.1" } }, "sha512-/PKk8kNFSs8QvvJ2vOww1mF5/c5W8y42duYtXvkOSe+yZKRgTTZywYG2l41pjhNomqESZCpZtXuWmYjFRMV+dw=="],

"@supabase/storage-js": ["@supabase/storage-js@2.93.3", "", { "dependencies": { "iceberg-js": "^0.8.1", "tslib": "2.8.1" } }, "sha512-cw4qXiLrx3apglDM02Tx/w/stvFlrkKocC6vCvuFAz3JtVEl1zH8MUfDQDTH59kJAQVaVdbewrMWSoBob7REnA=="],

"@supabase/supabase-js": ["@supabase/supabase-js@2.93.3", "", { "dependencies": { "@supabase/auth-js": "2.93.3", "@supabase/functions-js": "2.93.3", "@supabase/postgrest-js": "2.93.3", "@supabase/realtime-js": "2.93.3", "@supabase/storage-js": "2.93.3" } }, "sha512-paUqEqdBI9ztr/4bbMoCgeJ6M8ZTm2fpfjSOlzarPuzYveKFM20ZfDZqUpi9CFfYagYj5Iv3m3ztUjaI9/tM1w=="],

"@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],

"@tailwindcss/node": ["@tailwindcss/node@4.1.18", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.18" } }, "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ=="],

"@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.18", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.18", "@tailwindcss/oxide-darwin-arm64": "4.1.18", "@tailwindcss/oxide-darwin-x64": "4.1.18", "@tailwindcss/oxide-freebsd-x64": "4.1.18", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18", "@tailwindcss/oxide-linux-arm64-musl": "4.1.18", "@tailwindcss/oxide-linux-x64-gnu": "4.1.18", "@tailwindcss/oxide-linux-x64-musl": "4.1.18", "@tailwindcss/oxide-wasm32-wasi": "4.1.18", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18", "@tailwindcss/oxide-win32-x64-msvc": "4.1.18" } }, "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A=="],

"@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.18", "", { "os": "android", "cpu": "arm64" }, "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q=="],

"@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.18", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A=="],

"@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.18", "", { "os": "darwin", "cpu": "x64" }, "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw=="],

"@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.18", "", { "os": "freebsd", "cpu": "x64" }, "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA=="],

"@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18", "", { "os": "linux", "cpu": "arm" }, "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA=="],

"@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.18", "", { "os": "linux", "cpu": "arm64" }, "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw=="],

"@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.18", "", { "os": "linux", "cpu": "arm64" }, "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg=="],

"@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.18", "", { "os": "linux", "cpu": "x64" }, "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g=="],

"@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.18", "", { "os": "linux", "cpu": "x64" }, "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ=="],

"@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.18", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.0", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.4.0" }, "cpu": "none" }, "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA=="],

"@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.18", "", { "os": "win32", "cpu": "arm64" }, "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA=="],

"@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.18", "", { "os": "win32", "cpu": "x64" }, "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q=="],

"@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.18", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "postcss": "^8.4.41", "tailwindcss": "4.1.18" } }, "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g=="],

"@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],

"@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],

"@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],

"@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],

"@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],

"@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],

"@types/d3-shape": ["@types/d3-shape@3.1.8", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w=="],

"@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],

"@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],

"@types/node": ["@types/node@22.19.8", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-ebO/Yl+EAvVe8DnMfi+iaAyIqYdK0q/q0y0rw82INWEKJOBe6b/P3YWE8NW7oOlF/nXFNrHwhARrN/hdgDkraA=="],

"@types/phoenix": ["@types/phoenix@1.6.7", "", {}, "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q=="],

"@types/react": ["@types/react@19.2.10", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw=="],

"@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],

"@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],

"@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],

"@vercel/analytics": ["@vercel/analytics@1.6.1", "", { "peerDependencies": { "@remix-run/react": "^2", "@sveltejs/kit": "^1 || ^2", "next": ">= 13", "react": "^18 || ^19 || ^19.0.0-rc", "svelte": ">= 4", "vue": "^3", "vue-router": "^4" }, "optionalPeers": ["@remix-run/react", "@sveltejs/kit", "next", "react", "svelte", "vue", "vue-router"] }, "sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg=="],

"aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],

"autoprefixer": ["autoprefixer@10.4.24", "", { "dependencies": { "browserslist": "^4.28.1", "caniuse-lite": "^1.0.30001766", "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw=="],

"baseline-browser-mapping": ["baseline-browser-mapping@2.9.19", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg=="],

"browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="],

"caniuse-lite": ["caniuse-lite@1.0.30001767", "", {}, "sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ=="],

"class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],

"client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],

"clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],

"cmdk": ["cmdk@1.0.4", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-id": "^1.1.0", "@radix-ui/react-primitive": "^2.0.0", "use-sync-external-store": "^1.2.2" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg=="],

"cookie": ["cookie@1.1.1", "", {}, "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="],

"csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],

"d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],

"d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],

"d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],

"d3-format": ["d3-format@3.1.2", "", {}, "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg=="],

"d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],

"d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],

"d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],

"d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],

"d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],

"d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],

"d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],

"date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],

"date-fns-jalali": ["date-fns-jalali@4.1.0-0", "", {}, "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="],

"decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],

"detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],

"detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],

"electron-to-chromium": ["electron-to-chromium@1.5.286", "", {}, "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A=="],

"embla-carousel": ["embla-carousel@8.5.1", "", {}, "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A=="],

"embla-carousel-react": ["embla-carousel-react@8.5.1", "", { "dependencies": { "embla-carousel": "8.5.1", "embla-carousel-reactive-utils": "8.5.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-z9Y0K84BJvhChXgqn2CFYbfEi6AwEr+FFVVKm/MqbTQ2zIzO1VQri6w67LcfpVF0AjbhwVMywDZqY4alYkjW5w=="],

"embla-carousel-reactive-utils": ["embla-carousel-reactive-utils@8.5.1", "", { "peerDependencies": { "embla-carousel": "8.5.1" } }, "sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A=="],

"enhanced-resolve": ["enhanced-resolve@5.18.4", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q=="],

"es-toolkit": ["es-toolkit@1.44.0", "", {}, "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg=="],

"escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],

"eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],

"fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],

"framer-motion": ["framer-motion@12.30.1", "", { "dependencies": { "motion-dom": "^12.30.1", "motion-utils": "^12.29.2", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-nt3NMBb9wrsC/TlPi6Blg3Zzzf8DkSidCT8dFa3ha3ierU8AF20tqP0eQ3CyGVZdwytVjd4vF/fWE0Uoa+qzdg=="],

"get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],

"graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],

"iceberg-js": ["iceberg-js@0.8.1", "", {}, "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA=="],

"immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="],

"input-otp": ["input-otp@1.4.1", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw=="],

"internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],

"jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],

"lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="],

"lightningcss-android-arm64": ["lightningcss-android-arm64@1.30.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A=="],

"lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA=="],

"lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ=="],

"lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA=="],

"lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.2", "", { "os": "linux", "cpu": "arm" }, "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA=="],

"lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A=="],

"lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA=="],

"lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w=="],

"lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA=="],

"lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ=="],

"lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],

"lucide-react": ["lucide-react@0.454.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" } }, "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ=="],

"magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],

"motion-dom": ["motion-dom@12.30.1", "", { "dependencies": { "motion-utils": "^12.29.2" } }, "sha512-QXB+iFJRzZTqL+Am4a1CRoHdH+0Nq12wLdqQQZZsfHlp9AMt6PA098L/61oVZsDA+Ep3QSGudzpViyRrhYhGcQ=="],

"motion-utils": ["motion-utils@12.29.2", "", {}, "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A=="],

"nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],

"next": ["next@16.0.10", "", { "dependencies": { "@next/env": "16.0.10", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.0.10", "@next/swc-darwin-x64": "16.0.10", "@next/swc-linux-arm64-gnu": "16.0.10", "@next/swc-linux-arm64-musl": "16.0.10", "@next/swc-linux-x64-gnu": "16.0.10", "@next/swc-linux-x64-musl": "16.0.10", "@next/swc-win32-arm64-msvc": "16.0.10", "@next/swc-win32-x64-msvc": "16.0.10", "sharp": "^0.34.4" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-RtWh5PUgI+vxlV3HdR+IfWA1UUHu0+Ram/JBO4vWB54cVPentCD0e+lxyAYEsDTqGGMg7qpjhKh6dc6aW7W/sA=="],

"next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],

"node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],

"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],

"postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],

"postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],

"react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],

"react-day-picker": ["react-day-picker@9.8.0", "", { "dependencies": { "@date-fns/tz": "1.2.0", "date-fns": "4.1.0", "date-fns-jalali": "4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-E0yhhg7R+pdgbl/2toTb0xBhsEAtmAx1l7qjIWYfcxOy8w4rTSVfbtBoSzVVhPwKP/5E9iL38LivzoE3AQDhCQ=="],

"react-dom": ["react-dom@19.2.0", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.0" } }, "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ=="],

"react-hook-form": ["react-hook-form@7.71.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w=="],

"react-is": ["react-is@19.2.4", "", {}, "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA=="],

"react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],

"react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],

"react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],

"react-resizable-panels": ["react-resizable-panels@2.1.9", "", { "peerDependencies": { "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ=="],

"react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],

"recharts": ["recharts@3.7.0", "", { "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew=="],

"redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],

"redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],

"reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],

"scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],

"semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],

"sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],

"sonner": ["sonner@1.7.4", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw=="],

"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],

"styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "peerDependencies": { "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" } }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],

"tailwind-merge": ["tailwind-merge@2.6.1", "", {}, "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ=="],

"tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],

"tailwindcss-animate": ["tailwindcss-animate@1.0.7", "", { "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } }, "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA=="],

"tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],

"tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],

"tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],

"tw-animate-css": ["tw-animate-css@1.3.3", "", {}, "sha512-tXE2TRWrskc4TU3RDd7T8n8Np/wCfoeH9gz22c7PzYqNPQ9FBGFbWWzwL0JyHcFp+jHozmF76tbHfPAx22ua2Q=="],

"typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],

"undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],

"update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],

"use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],

"use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],

"use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],

"vaul": ["vaul@1.1.2", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA=="],

"victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],

"ws": ["ws@8.19.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg=="],

"zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],

"@reduxjs/toolkit/immer": ["immer@11.1.3", "", {}, "sha512-6jQTc5z0KJFtr1UgFpIL3N9XSC3saRaI9PwWtzM2pSqkNGtiNkYY2OSwkOGDK2XcTRcLb1pi/aNkKZz0nxVH4Q=="],

"@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],

"@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],

"@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.1.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ=="],

"@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.1", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@tybys/wasm-util": "^0.10.1" }, "bundled": true }, "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A=="],

"@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],

"@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],

"next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
  }
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/about.tsx" isMerged="true"
import { Building2 } from "lucide-react"

export function About() {
  return (
    <section id="qui-sommes-nous" className="py-20 md:py-28 bg-background">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          {/* Section Header */}
          <div className="flex items-center gap-2 mb-4">
            <Building2 className="w-5 h-5 text-primary" />
            <span className="text-primary font-medium">Notre histoire</span>
          </div>
          
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-8 text-balance">
            Qui Sommes-Nous ?
          </h2>

<div className="space-y-6 text-lg text-muted-foreground leading-relaxed">
            <p>
              Hasilaza est une entreprise commerciale spécialisée dans l{"'"}usinage de tricycles 
              et la grande distribution.
            </p>
            <p>
              Excellant dans les prestations de service depuis quelques années, elle a attiré 
              de nombreuses structures désireuses d{"'"}acquérir ses produits. La société et ses 
              cadres dirigeants disposent d{"'"}une expérience solide et d{"'"}une grande compréhension 
              des affaires.
            </p>
          </div>

{/* Stats Cards */}
          <div className="grid md:grid-cols-3 gap-6 mt-12">
            <div className="bg-card border border-border rounded-2xl p-6 text-center hover:shadow-lg transition-shadow">
              <div className="text-4xl md:text-5xl font-bold text-primary mb-2">+5</div>
              <div className="text-muted-foreground">Années d{"'"}expérience</div>
            </div>
            <div className="bg-card border border-border rounded-2xl p-6 text-center hover:shadow-lg transition-shadow">
              <div className="text-4xl md:text-5xl font-bold text-primary mb-2">100%</div>
              <div className="text-muted-foreground">Satisfaction client</div>
            </div>
            <div className="bg-card border border-border rounded-2xl p-6 text-center hover:shadow-lg transition-shadow">
              <div className="text-4xl md:text-5xl font-bold text-primary mb-2">N°1</div>
              <div className="text-muted-foreground">En tricycles</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-header.tsx" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import { Bell, Search, User, LogOut } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { ThemeToggle } from "@/components/theme-toggle"

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

const handleLogout = () => {
    // Clear the session cookie
    document.cookie = "admin_session=; path=/; max-age=0"
    router.push("/admin/login")
  }

return (
    <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-border bg-card px-4 md:px-6">
      {/* Spacer for mobile menu button */}
      <div className="w-10 lg:hidden" />
      
      {/* Search */}
      <div className="relative hidden flex-1 md:flex md:max-w-md">
        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          type="search"
          placeholder="Rechercher..."
          className="pl-10"
        />
      </div>

<div className="ml-auto flex items-center gap-2">
        <ThemeToggle />
        
        {/* Notifications */}
        <Button variant="ghost" size="icon" className="relative">
          <Bell className="h-5 w-5" />
          <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
            3
          </span>
          <span className="sr-only">Notifications</span>
        </Button>

{/* User Menu */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon">
              <User className="h-5 w-5" />
              <span className="sr-only">Menu utilisateur</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <DropdownMenuLabel>Mon compte</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Profil</DropdownMenuItem>
            <DropdownMenuItem>Parametres</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="text-destructive" onClick={handleLogout}>
              <LogOut className="mr-2 h-4 w-4" />
              Deconnexion
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/admin/charts/category-chart.tsx" isMerged="true"
"use client"

import {
  PieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Tooltip,
  Legend,
} from "recharts"

const data = [
  { name: "Tricycles", value: 65, color: "hsl(var(--chart-1))" },
  { name: "Motos", value: 25, color: "hsl(var(--chart-2))" },
  { name: "Pieces detachees", value: 10, color: "hsl(var(--chart-3))" },
]

export function CategoryChart() {
  return (
    <div className="flex flex-col items-center lg:flex-row lg:justify-around">
      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={100}
            paddingAngle={5}
            dataKey="value"
            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
            labelLine={false}
          >
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={entry.color} />
            ))}
          </Pie>
          <Tooltip
            contentStyle={{
              backgroundColor: "hsl(var(--card))",
              border: "1px solid hsl(var(--border))",
              borderRadius: "8px",
            }}
            formatter={(value: number) => [`${value}%`, "Part"]}
          />
        </PieChart>
      </ResponsiveContainer>
      
      <div className="mt-4 space-y-3 lg:mt-0">
        {data.map((item) => (
          <div key={item.name} className="flex items-center gap-3">
            <div
              className="h-4 w-4 rounded-full"
              style={{ backgroundColor: item.color }}
            />
            <div>
              <div className="font-medium">{item.name}</div>
              <div className="text-sm text-muted-foreground">{item.value}% du CA</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/charts/geography-chart.tsx" isMerged="true"
"use client"

import {
  Bar,
  BarChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
  Cell,
} from "recharts"

const data = [
  { name: "Dakar", orders: 89, revenue: 7250000, color: "hsl(var(--chart-1))" },
  { name: "Thies", orders: 24, revenue: 1980000, color: "hsl(var(--chart-2))" },
  { name: "Saint-Louis", orders: 18, revenue: 1450000, color: "hsl(var(--chart-3))" },
  { name: "Mbour", orders: 12, revenue: 890000, color: "hsl(var(--chart-4))" },
  { name: "Rufisque", orders: 8, revenue: 520000, color: "hsl(var(--chart-5))" },
  { name: "Autres", orders: 5, revenue: 360000, color: "hsl(var(--muted-foreground))" },
]

export function GeographyChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart data={data} layout="vertical">
        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" horizontal={false} />
        <XAxis
          type="number"
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
          tickLine={false}
          axisLine={false}
          tickFormatter={(value) => `${(value / 1000000).toFixed(1)}M`}
        />
        <YAxis
          type="category"
          dataKey="name"
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
          tickLine={false}
          axisLine={false}
          width={80}
        />
        <Tooltip
          cursor={{ fill: "hsl(var(--muted))" }}
          contentStyle={{
            backgroundColor: "hsl(var(--card))",
            border: "1px solid hsl(var(--border))",
            borderRadius: "8px",
          }}
          formatter={(value: number, name: string) => {
            if (name === "revenue") {
              return [`${new Intl.NumberFormat("fr-FR").format(value)} FCFA`, "Revenus"]
            }
            return [value, "Commandes"]
          }}
        />
        <Bar dataKey="revenue" radius={[0, 4, 4, 0]}>
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={entry.color} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/admin/charts/orders-chart.tsx" isMerged="true"
"use client"

import {
  Bar,
  BarChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
} from "recharts"

// Generate last 30 days of data
const generateData = () => {
  const data = []
  const now = new Date()
  for (let i = 29; i >= 0; i--) {
    const date = new Date(now)
    date.setDate(date.getDate() - i)
    data.push({
      date: date.toLocaleDateString("fr-FR", { day: "2-digit", month: "short" }),
      orders: Math.floor(Math.random() * 12) + 2,
    })
  }
  return data
}

const data = generateData()

export function OrdersChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
        <XAxis
          dataKey="date"
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
          tickLine={false}
          axisLine={false}
        />
        <YAxis
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
          tickLine={false}
          axisLine={false}
        />
        <Tooltip
          cursor={{ fill: "hsl(var(--muted))" }}
          contentStyle={{
            backgroundColor: "hsl(var(--card))",
            border: "1px solid hsl(var(--border))",
            borderRadius: "8px",
          }}
          formatter={(value: number) => [value, "Commandes"]}
        />
        <Bar
          dataKey="orders"
          fill="hsl(var(--primary))"
          radius={[4, 4, 0, 0]}
        />
      </BarChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/admin/charts/revenue-chart.tsx" isMerged="true"
"use client"

import {
  Area,
  AreaChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
} from "recharts"

// Generate last 30 days of data
const generateData = () => {
  const data = []
  const now = new Date()
  for (let i = 29; i >= 0; i--) {
    const date = new Date(now)
    date.setDate(date.getDate() - i)
    data.push({
      date: date.toLocaleDateString("fr-FR", { day: "2-digit", month: "short" }),
      revenue: Math.floor(Math.random() * 800000) + 200000,
    })
  }
  return data
}

const data = generateData()

export function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <AreaChart data={data}>
        <defs>
          <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.3} />
            <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0} />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
        <XAxis
          dataKey="date"
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
          tickLine={false}
          axisLine={false}
        />
        <YAxis
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
          tickLine={false}
          axisLine={false}
          tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
        />
        <Tooltip
          contentStyle={{
            backgroundColor: "hsl(var(--card))",
            border: "1px solid hsl(var(--border))",
            borderRadius: "8px",
          }}
          formatter={(value: number) => [
            `${new Intl.NumberFormat("fr-FR").format(value)} FCFA`,
            "Revenus",
          ]}
        />
        <Area
          type="monotone"
          dataKey="revenue"
          stroke="hsl(var(--primary))"
          fillOpacity={1}
          fill="url(#colorRevenue)"
          strokeWidth={2}
        />
      </AreaChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/admin/recent-orders.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { formatPrice, getRecentOrders, type Order } from "@/lib/supabase/products"

const statusMap: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
  pending: { label: "En attente", variant: "secondary" },
  confirmed: { label: "Confirme", variant: "default" },
  processing: { label: "En cours", variant: "outline" },
  shipped: { label: "Expedie", variant: "default" },
  delivered: { label: "Livre", variant: "default" },
  cancelled: { label: "Annule", variant: "destructive" },
}

export function RecentOrders() {
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function loadOrders() {
      const data = await getRecentOrders(5)
      setOrders(data)
      setLoading(false)
    }
    loadOrders()
  }, [])

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("fr-FR", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    })
  }

if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
      </div>
    )
  }

if (orders.length === 0) {
    return (
      <div className="flex items-center justify-center py-8 text-muted-foreground">
        Aucune commande pour le moment
      </div>
    )
  }

return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Commande</TableHead>
          <TableHead>Client</TableHead>
          <TableHead className="hidden md:table-cell">Produit</TableHead>
          <TableHead>Statut</TableHead>
          <TableHead className="text-right">Total</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {orders.map((order) => (
          <TableRow key={order.id}>
            <TableCell className="font-medium">
              <div className="flex flex-col">
                <span className="text-xs text-muted-foreground">{order.order_number}</span>
                <span className="text-xs text-muted-foreground md:hidden">
                  {formatDate(order.created_at)}
                </span>
              </div>
            </TableCell>
            <TableCell>{order.customer_name}</TableCell>
            <TableCell className="hidden md:table-cell">{order.product_name}</TableCell>
            <TableCell>
              <Badge variant={statusMap[order.status]?.variant || "secondary"}>
                {statusMap[order.status]?.label || order.status}
              </Badge>
            </TableCell>
            <TableCell className="text-right font-medium">
              {formatPrice(order.total_price)}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
[V0_FILE]typescriptreact:file="components/admin/sales-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import {
  Bar,
  BarChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
  Tooltip,
} from "recharts"
import { createClient } from "@/lib/supabase/client"

interface MonthData {
  name: string
  total: number
}

export function SalesChart() {
  const [data, setData] = useState<MonthData[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function loadSalesData() {
      const supabase = createClient()
      
      // Get last 6 months
      const months = []
      const monthNames = ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"]
      
      for (let i = 5; i >= 0; i--) {
        const date = new Date()
        date.setMonth(date.getMonth() - i)
        const startOfMonth = new Date(date.getFullYear(), date.getMonth(), 1)
        const endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59)
        
        const { data: orders } = await supabase
          .from("orders")
          .select("total_price")
          .gte("created_at", startOfMonth.toISOString())
          .lte("created_at", endOfMonth.toISOString())
          .in("status", ["confirmed", "processing", "shipped", "delivered"])
        
        const total = orders?.reduce((sum, order) => sum + order.total_price, 0) || 0
        months.push({
          name: monthNames[date.getMonth()],
          total,
        })
      }
      
      setData(months)
      setLoading(false)
    }
    
    loadSalesData()
  }, [])

if (loading) {
    return (
      <div className="flex h-[350px] items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
      </div>
    )
  }

const hasData = data.some(d => d.total > 0)

if (!hasData) {
    return (
      <div className="flex h-[350px] flex-col items-center justify-center text-muted-foreground">
        <p>Aucune vente enregistree</p>
        <p className="text-sm">Les statistiques apparaitront ici</p>
      </div>
    )
  }

return (
    <ResponsiveContainer width="100%" height={350}>
      <BarChart data={data}>
        <XAxis
          dataKey="name"
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
          tickLine={false}
          axisLine={false}
        />
        <YAxis
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
          tickLine={false}
          axisLine={false}
          tickFormatter={(value) => `${(value / 1000000).toFixed(0)}M`}
        />
        <Tooltip
          cursor={{ fill: "hsl(var(--muted))" }}
          contentStyle={{
            backgroundColor: "hsl(var(--card))",
            border: "1px solid hsl(var(--border))",
            borderRadius: "8px",
          }}
          formatter={(value: number) => [
            `${new Intl.NumberFormat("fr-FR").format(value)} FCFA`,
            "Ventes",
          ]}
        />
        <Bar
          dataKey="total"
          fill="hsl(var(--primary))"
          radius={[4, 4, 0, 0]}
        />
      </BarChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/admin/top-products.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Progress } from "@/components/ui/progress"
import { createClient } from "@/lib/supabase/client"

interface TopProduct {
  name: string
  sales: number
  percentage: number
}

export function TopProducts() {
  const [topProducts, setTopProducts] = useState<TopProduct[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function loadTopProducts() {
      const supabase = createClient()
      
      // Get order counts by product
      const { data: orders } = await supabase
        .from("orders")
        .select("product_name, quantity")
        .in("status", ["confirmed", "processing", "shipped", "delivered"])

if (!orders || orders.length === 0) {
        setTopProducts([])
        setLoading(false)
        return
      }

// Aggregate by product name
      const productSales: Record<string, number> = {}
      orders.forEach(order => {
        productSales[order.product_name] = (productSales[order.product_name] || 0) + order.quantity
      })

// Sort and get top 5
      const sorted = Object.entries(productSales)
        .sort(([, a], [, b]) => b - a)
        .slice(0, 5)
      
      const maxSales = sorted[0]?.[1] || 1
      
      const topList = sorted.map(([name, sales]) => ({
        name,
        sales,
        percentage: Math.round((sales / maxSales) * 100),
      }))

setTopProducts(topList)
      setLoading(false)
    }

loadTopProducts()
  }, [])

if (topProducts.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
        <p>Aucune vente enregistree</p>
        <p className="text-sm">Le classement apparaitra ici</p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {topProducts.map((product, index) => (
        <div key={product.name} className="space-y-2">
          <div className="flex items-center justify-between text-sm">
            <div className="flex items-center gap-2">
              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
                {index + 1}
              </span>
              <span className="font-medium">{product.name}</span>
            </div>
            <span className="text-muted-foreground">{product.sales} ventes</span>
          </div>
          <Progress value={product.percentage} className="h-2" />
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/advantages.tsx" isMerged="true"
import { Sparkles, Eye, Target, Flag, Heart } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function Advantages() {
  return (
    <section className="py-20 md:py-28 bg-muted/30">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="flex items-center justify-center gap-2 mb-4">
            <Sparkles className="w-5 h-5 text-primary" />
            <span className="text-primary font-medium">Nos avantages</span>
          </div>
          <p className="text-lg text-muted-foreground leading-relaxed">
            Plus qu{"'"}un simple vendeur, nous sommes votre partenaire de confiance 
            pour une mobilité durable et performante.
          </p>
        </div>

{/* Cards Grid */}
        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          {/* Vision */}
          <Card className="bg-card border-border hover:shadow-xl transition-shadow duration-300">
            <CardHeader>
              <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
                <Eye className="w-6 h-6 text-primary" />
              </div>
              <CardTitle className="text-xl font-bold text-foreground">Vision</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground leading-relaxed">
                D{"'"}ici 2035, Hasilaza Motor vise à devenir le leader dans la vente de motos 
                au Sénégal. À l{"'"}horizon 2035, nous aspirons à nous imposer comme la référence 
                incontournable sur le marché africain, en devenant le leader de la vente de 
                motos et de pièces détachées.
              </p>
            </CardContent>
          </Card>

{/* Mission */}
          <Card className="bg-card border-border hover:shadow-xl transition-shadow duration-300">
            <CardHeader>
              <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
                <Target className="w-6 h-6 text-primary" />
              </div>
              <CardTitle className="text-xl font-bold text-foreground">Mission</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground leading-relaxed">
                Notre mission est de fournir à nos clients des motos performantes à des prix 
                abordables, accompagnées d{"'"}un service après-vente et d{"'"}un savoir-faire technique. 
                Nous offrons des solutions fiables et innovantes pour qu{"'"}ils puissent rouler en 
                toute sécurité et sérénité.
              </p>
            </CardContent>
          </Card>

{/* Objectifs */}
          <Card className="bg-card border-border hover:shadow-xl transition-shadow duration-300">
            <CardHeader>
              <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
                <Flag className="w-6 h-6 text-primary" />
              </div>
              <CardTitle className="text-xl font-bold text-foreground">Objectifs</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground leading-relaxed">
                Proposer une gamme diversifiée de motos neuves et pièces détachées de qualité, 
                adaptée aux besoins de notre clientèle particulière et professionnelle ; 
                Assurer la fiabilité de nos produits ainsi qu{"'"}un accompagnement technique 
                d{"'"}excellence ; Maintenir un service client exceptionnel avec conseils adaptés, 
                assistance rapide et SAV efficace pour renforcer les relations clients et 
                développer notre communauté.
              </p>
            </CardContent>
          </Card>

{/* Valeurs */}
          <Card className="bg-card border-border hover:shadow-xl transition-shadow duration-300">
            <CardHeader>
              <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
                <Heart className="w-6 h-6 text-primary" />
              </div>
              <CardTitle className="text-xl font-bold text-foreground">Nos Valeurs</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-3">
                {["Qualité", "Proximité", "Intégrité", "Engagement"].map((value) => (
                  <span 
                    key={value}
                    className="bg-primary/10 text-primary px-4 py-2 rounded-full font-medium"
                  >
                    {value}
                  </span>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/cta.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { MessageCircle, ShieldCheck, Truck } from "lucide-react"

export function CTA() {
  return (
    <section className="py-20 md:py-28 bg-primary">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto text-center">
          {/* Badge */}
          <div className="inline-flex items-center gap-2 bg-primary-foreground/10 text-primary-foreground px-4 py-2 rounded-full text-sm font-medium mb-8">
            <span className="w-2 h-2 bg-primary-foreground rounded-full animate-pulse" />
            Commandez dès maintenant
          </div>

<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-primary-foreground mb-6 text-balance">
            Prêt à transformer<br />votre activité ?
          </h2>

<p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-10 leading-relaxed">
            Rejoignez plus de 500 entrepreneurs qui ont fait confiance à Hasilaza 
            pour développer leur business. Commandez votre tricycle aujourd{"'"}hui.
          </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <Button 
              asChild 
              size="lg" 
              className="bg-primary-foreground text-primary hover:bg-primary-foreground/90"
            >
              <a href="#produits">
                Voir le catalogue
              </a>
            </Button>
            <Button 
              asChild 
              size="lg" 
              variant="outline" 
              className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary bg-transparent"
            >
              <a 
                href="https://wa.me/221781094091" 
                target="_blank" 
                rel="noopener noreferrer"
                className="flex items-center gap-2"
              >
                <MessageCircle className="w-5 h-5" />
                Discuter sur WhatsApp
              </a>
            </Button>
          </div>

{/* Features */}
          <div className="grid sm:grid-cols-2 gap-6 max-w-lg mx-auto">
            <div className="flex items-center gap-3 text-primary-foreground">
              <div className="w-10 h-10 bg-primary-foreground/10 rounded-full flex items-center justify-center">
                <ShieldCheck className="w-5 h-5" />
              </div>
              <span>Paiement sécurisé</span>
            </div>
            <div className="flex items-center gap-3 text-primary-foreground">
              <div className="w-10 h-10 bg-primary-foreground/10 rounded-full flex items-center justify-center">
                <Truck className="w-5 h-5" />
              </div>
              <span>Livraison partout au Sénégal</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { usePathname } from "next/navigation"
import { motion, AnimatePresence } from "framer-motion"
import { Menu, X, Phone, ShoppingBag, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ThemeToggle } from "@/components/theme-toggle"

const navLinks = [
  { href: "/", label: "Accueil" },
  { 
    href: "/produits", 
    label: "Produits",
    submenu: [
      { href: "/produits?category=tricycle", label: "Tricycles" },
      { href: "/produits?category=moto", label: "Motos" },
      { href: "/produits?category=piece", label: "Pièces détachées" },
    ]
  },
  { href: "/depannage", label: "Depannage" },
  { href: "/a-propos", label: "A Propos" },
  { href: "/contact", label: "Contact" },
]

export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)
  const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null)
  const pathname = usePathname()

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20)
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

useEffect(() => {
    setIsMenuOpen(false)
  }, [pathname])

return (
    <motion.header
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.6, ease: [0.43, 0.13, 0.23, 0.96] }}
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled 
          ? "bg-background/98 backdrop-blur-md shadow-lg border-b border-border" 
          : "bg-transparent"
      }`}
    >
      {/* Top Bar - hidden on mobile */}
      <div className={`hidden md:block bg-primary text-primary-foreground text-sm transition-all duration-300 ${isScrolled ? "h-0 overflow-hidden" : "h-10"}`}>
        <div className="container mx-auto px-4 h-full flex items-center justify-between">
          <span>Livraison gratuite sur Dakar pour toute commande</span>
          <div className="flex items-center gap-4">
            <a href="tel:+221781094091" className="flex items-center gap-1 hover:underline">
              <Phone className="w-3 h-3" />
              +221 781094091
            </a>
          </div>
        </div>
      </div>

<div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-14 md:h-20">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 md:gap-3 group">
            <motion.div 
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="w-9 h-9 md:w-11 md:h-11 rounded-xl overflow-hidden shadow-lg"
            >
              <Image 
                src="/images/logo-hasilaza.png" 
                alt="Hasilaza Motor" 
                width={44} 
                height={44} 
                className="w-full h-full object-contain"
                priority
              />
            </motion.div>
            <div className="flex flex-col">
              <span className="font-bold text-base md:text-lg leading-tight text-foreground">
                Hasilaza
              </span>
              <span className="text-[10px] md:text-xs text-muted-foreground hidden sm:block">Leader au Senegal</span>
            </div>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center gap-1">
            {navLinks.map((link) => (
              <div 
                key={link.href}
                className="relative"
                onMouseEnter={() => link.submenu && setActiveSubmenu(link.label)}
                onMouseLeave={() => setActiveSubmenu(null)}
              >
                <Link 
                  href={link.href}
                  className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-1 ${
                    pathname === link.href 
                      ? "text-primary bg-primary/10" 
                      : "text-foreground/80 hover:text-primary hover:bg-primary/5"
                  }`}
                >
                  {link.label}
                  {link.submenu && <ChevronDown className="w-4 h-4" />}
                </Link>
                
                {/* Submenu */}
                <AnimatePresence>
                  {link.submenu && activeSubmenu === link.label && (
                    <motion.div
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 10 }}
                      transition={{ duration: 0.2 }}
                      className="absolute top-full left-0 pt-2"
                    >
                      <div className="bg-background rounded-xl shadow-xl border border-border p-2 min-w-[200px]">
                        {link.submenu.map((sublink) => (
                          <Link
                            key={sublink.href}
                            href={sublink.href}
                            className="block px-4 py-2 rounded-lg text-foreground/80 hover:text-primary hover:bg-primary/5 transition-colors"
                          >
                            {sublink.label}
                          </Link>
                        ))}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            ))}
          </nav>

{/* CTA Buttons */}
          <div className="hidden lg:flex items-center gap-3">
            <ThemeToggle />
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button variant="outline" size="sm" asChild className="border-primary/30 hover:border-primary hover:bg-primary/5 bg-transparent">
                <Link href="/produits" className="flex items-center gap-2">
                  <ShoppingBag className="w-4 h-4" />
                  Catalogue
                </Link>
              </Button>
            </motion.div>
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button asChild className="bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg shadow-primary/30">
                <a 
                  href="https://wa.me/221781094091?text=Bonjour, je suis intéressé par vos produits" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="flex items-center gap-2"
                >
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                  </svg>
                  WhatsApp
                </a>
              </Button>
            </motion.div>
          </div>

{/* Mobile Actions */}
          <div className="lg:hidden flex items-center gap-2">
            <ThemeToggle />
            <motion.button
              whileTap={{ scale: 0.9 }}
              className="p-2 rounded-lg hover:bg-muted"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              aria-label="Toggle menu"
            >
              {isMenuOpen ? (
                <X className="w-6 h-6 text-foreground" />
              ) : (
                <Menu className="w-6 h-6 text-foreground" />
              )}
            </motion.button>
          </div>
        </div>
      </div>

{/* Mobile Menu */}
      <AnimatePresence>
        {isMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="lg:hidden bg-background border-t border-border overflow-hidden"
          >
            <div className="container mx-auto px-4 py-6">
              <nav className="flex flex-col gap-2">
                {navLinks.map((link, index) => (
                  <motion.div
                    key={link.href}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <Link 
                      href={link.href}
                      className={`block px-4 py-3 rounded-lg font-medium transition-colors ${
                        pathname === link.href 
                          ? "text-primary bg-primary/10" 
                          : "text-foreground/80 hover:text-primary hover:bg-primary/5"
                      }`}
                      onClick={() => setIsMenuOpen(false)}
                    >
                      {link.label}
                    </Link>
                    {link.submenu && (
                      <div className="ml-4 mt-1 space-y-1">
                        {link.submenu.map((sublink) => (
                          <Link
                            key={sublink.href}
                            href={sublink.href}
                            className="block px-4 py-2 text-sm text-foreground/60 hover:text-primary transition-colors"
                            onClick={() => setIsMenuOpen(false)}
                          >
                            {sublink.label}
                          </Link>
                        ))}
                      </div>
                    )}
                  </motion.div>
                ))}
              </nav>
              
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 }}
                className="flex flex-col gap-3 mt-6 pt-6 border-t border-border"
              >
                <a 
                  href="tel:+221781094091" 
                  className="flex items-center gap-3 text-primary font-semibold px-4 py-2"
                >
                  <Phone className="w-5 h-5" />
                  +221 781094091
                </a>
                <Button asChild className="bg-primary hover:bg-primary/90 text-primary-foreground w-full">
                  <a 
                    href="https://wa.me/221781094091?text=Bonjour, je suis intéressé par vos produits" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="flex items-center justify-center gap-2"
                  >
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                    </svg>
                    Discuter sur WhatsApp
                  </a>
                </Button>
              </motion.div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.header>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { MessageCircle } from "lucide-react"

export function Hero() {
  return (
    <section id="accueil" className="relative min-h-screen flex items-center pt-20 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Content */}
          <div className="space-y-8">
            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium">
              <span className="w-2 h-2 bg-primary rounded-full animate-pulse" />
              N°1 en tricycles au Sénégal
            </div>
            
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground leading-tight text-balance">
              Motos et Pièces Détachées au{" "}
              <span className="text-primary">Sénégal</span>
            </h1>
            
            <p className="text-lg text-muted-foreground max-w-lg leading-relaxed">
              Hasilaza est une entreprise commerciale spécialisée dans l{"'"}usinage de tricycles 
              et la grande distribution. Excellant dans les prestations de service depuis quelques années.
            </p>

<div className="flex flex-col sm:flex-row gap-4">
              <Button asChild size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground">
                <a href="#produits">
                  Voir le catalogue
                </a>
              </Button>
              <Button asChild variant="outline" size="lg" className="border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent">
                <a 
                  href="https://wa.me/221781094091" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="flex items-center gap-2"
                >
                  <MessageCircle className="w-5 h-5" />
                  Discuter sur WhatsApp
                </a>
              </Button>
            </div>

{/* Stats */}
            <div className="grid grid-cols-3 gap-6 pt-8 border-t border-border">
              <div className="text-center sm:text-left">
                <div className="text-3xl md:text-4xl font-bold text-primary">+5</div>
                <div className="text-sm text-muted-foreground mt-1">Années d{"'"}expérience</div>
              </div>
              <div className="text-center sm:text-left">
                <div className="text-3xl md:text-4xl font-bold text-primary">100%</div>
                <div className="text-sm text-muted-foreground mt-1">Satisfaction client</div>
              </div>
              <div className="text-center sm:text-left">
                <div className="text-3xl md:text-4xl font-bold text-primary">N°1</div>
                <div className="text-sm text-muted-foreground mt-1">En tricycles</div>
              </div>
            </div>
          </div>

{/* Image */}
          <div className="relative">
            <div className="relative aspect-square rounded-3xl overflow-hidden bg-muted">
              <Image
                src="/images/tricycle-200cc.jpg"
                alt="Tricycle Hasilaza Motor"
                fill
                className="object-cover"
                priority
              />
            </div>
            {/* Decorative elements */}
            <div className="absolute -bottom-6 -left-6 w-24 h-24 bg-primary/20 rounded-full blur-2xl" />
            <div className="absolute -top-6 -right-6 w-32 h-32 bg-primary/10 rounded-full blur-3xl" />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/about-section.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import { motion, useInView } from "framer-motion"
import { ArrowRight, Users, Award, TrendingUp, Shield } from "lucide-react"
import { Button } from "@/components/ui/button"

const achievements = [
  { icon: Users, value: "5000+", label: "Clients satisfaits" },
  { icon: Award, value: "8+", label: "Partenaires officiels" },
  { icon: TrendingUp, value: "10000+", label: "Véhicules vendus" },
  { icon: Shield, value: "100%", label: "Produits garantis" },
]

export function AboutSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-24 lg:py-32 bg-muted/30 overflow-hidden">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
          {/* Image Side */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="relative"
          >
            <div className="relative">
              {/* Main Image */}
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={isInView ? { opacity: 1, scale: 1 } : {}}
                transition={{ duration: 0.8, delay: 0.2 }}
                className="relative z-10"
              >
                <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl">
                  <Image
                    src="/images/tricycle-200cc.jpg"
                    alt="Hasilaza Motor - Notre équipe"
                    fill
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-foreground/40 to-transparent" />
                </div>
              </motion.div>

{/* Decorative Elements */}
              <div className="absolute -top-6 -left-6 w-24 h-24 bg-primary/20 rounded-2xl -z-10" />
              <div className="absolute -bottom-6 -right-6 w-32 h-32 bg-primary/10 rounded-2xl -z-10" />

{/* Experience Badge */}
              <motion.div
                initial={{ opacity: 0, scale: 0 }}
                animate={isInView ? { opacity: 1, scale: 1 } : {}}
                transition={{ duration: 0.5, delay: 0.6, type: "spring" }}
                className="absolute -bottom-8 -right-8 lg:right-8 bg-primary text-primary-foreground p-6 rounded-2xl shadow-xl z-20"
              >
                <div className="text-4xl font-black">+5</div>
                <div className="text-sm font-medium opacity-90">Années d{"'"}expérience</div>
              </motion.div>
            </div>
          </motion.div>

{/* Content Side */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            {/* Section Label */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.3 }}
              className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
            >
              <span className="text-sm font-semibold text-primary">Qui sommes-nous</span>
            </motion.div>

{/* Heading */}
            <motion.h2
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.4 }}
              className="text-3xl lg:text-4xl xl:text-5xl font-bold text-foreground mb-6 leading-tight"
            >
              <span className="text-balance">Votre partenaire de confiance pour la </span>
              <span className="text-primary">mobilité au Sénégal</span>
            </motion.h2>

{/* Description */}
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.5 }}
              className="text-lg text-muted-foreground mb-8 leading-relaxed"
            >
              Hasilaza Motor est une entreprise commerciale spécialisée dans l{"'"}usinage de tricycles 
              et la grande distribution. Depuis 2018, nous accompagnons les entrepreneurs, artisans 
              et particuliers dans leurs projets de mobilité avec des véhicules de qualité à prix compétitifs.
            </motion.p>

{/* Values */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.6 }}
              className="space-y-4 mb-10"
            >
              {[
                { title: "Qualité Premium", desc: "Produits sélectionnés et testés pour leur fiabilité" },
                { title: "Prix Compétitifs", desc: "Les meilleurs tarifs du marché sénégalais" },
                { title: "Service Client", desc: "Accompagnement personnalisé et SAV réactif" },
              ].map((item, index) => (
                <motion.div
                  key={item.title}
                  initial={{ opacity: 0, x: -20 }}
                  animate={isInView ? { opacity: 1, x: 0 } : {}}
                  transition={{ duration: 0.4, delay: 0.7 + index * 0.1 }}
                  className="flex items-start gap-4"
                >
                  <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-1">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-foreground">{item.title}</h4>
                    <p className="text-sm text-muted-foreground">{item.desc}</p>
                  </div>
                </motion.div>
              ))}
            </motion.div>

{/* CTA */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.9 }}
            >
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="inline-block">
                <Button asChild size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground">
                  <Link href="/a-propos" className="flex items-center gap-2">
                    En savoir plus
                    <ArrowRight className="w-5 h-5" />
                  </Link>
                </Button>
              </motion.div>
            </motion.div>
          </motion.div>
        </div>

{/* Achievement Stats */}
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.5 }}
          className="grid grid-cols-2 lg:grid-cols-4 gap-6 mt-20"
        >
          {achievements.map((item, index) => {
            const Icon = item.icon
            return (
              <motion.div
                key={item.label}
                initial={{ opacity: 0, y: 30 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
                whileHover={{ y: -5 }}
                className="bg-background p-6 rounded-2xl shadow-lg border border-border text-center group hover:shadow-xl transition-all"
              >
                <div className="w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors">
                  <Icon className="w-7 h-7 text-primary" />
                </div>
                <div className="text-3xl font-bold text-foreground mb-1">{item.value}</div>
                <div className="text-sm text-muted-foreground">{item.label}</div>
              </motion.div>
            )
          })}
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/cta-section.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import Link from "next/link"
import { motion, useInView } from "framer-motion"
import { Phone, ArrowRight, Download, MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

export function CTASection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-24 lg:py-32 bg-primary relative overflow-hidden">
      {/* Background Decorations */}
      <div className="absolute inset-0 overflow-hidden">
        <motion.div
          animate={{ 
            rotate: [0, 360],
            scale: [1, 1.1, 1]
          }}
          transition={{ 
            duration: 20, 
            repeat: Infinity,
            ease: "linear"
          }}
          className="absolute -top-40 -right-40 w-80 h-80 bg-white/10 rounded-full"
        />
        <motion.div
          animate={{ 
            rotate: [360, 0],
            scale: [1, 1.2, 1]
          }}
          transition={{ 
            duration: 25, 
            repeat: Infinity,
            ease: "linear"
          }}
          className="absolute -bottom-40 -left-40 w-96 h-96 bg-white/5 rounded-full"
        />
        {/* Grid Pattern */}
        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px]" />
      </div>

<div className="container mx-auto px-4 relative z-10">
        <div className="max-w-4xl mx-auto text-center">
          {/* Badge */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 rounded-full mb-8"
          >
            <span className="w-2 h-2 bg-white rounded-full animate-pulse" />
            <span className="text-sm font-medium text-white">Commandez dès maintenant</span>
          </motion.div>

{/* Heading */}
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold text-white mb-6 text-balance"
          >
            Prêt à transformer votre activité?
          </motion.h2>

{/* Description */}
          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-lg lg:text-xl text-white/80 mb-10 max-w-2xl mx-auto leading-relaxed"
          >
            Contactez-nous dès aujourd{"'"}hui pour obtenir un devis personnalisé et découvrir 
            nos offres spéciales sur les tricycles et motos.
          </motion.p>

{/* CTA Buttons */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12"
          >
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button asChild size="lg" className="bg-white text-primary hover:bg-white/90 h-14 px-8 text-base shadow-xl">
                <Link href="/produits" className="flex items-center gap-2">
                  <Download className="w-5 h-5" />
                  Voir le catalogue
                </Link>
              </Button>
            </motion.div>
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button asChild size="lg" variant="outline" className="border-2 border-white text-white hover:bg-white hover:text-primary h-14 px-8 text-base bg-transparent">
                <a 
                  href="https://wa.me/221781094091?text=Bonjour, je souhaite obtenir un devis" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="flex items-center gap-2"
                >
                  <MessageCircle className="w-5 h-5" />
                  Demander un devis
                </a>
              </Button>
            </motion.div>
          </motion.div>

{/* Contact Info */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-6 text-white/80"
          >
            <a 
              href="tel:+221781094091" 
              className="flex items-center gap-2 hover:text-white transition-colors group"
            >
              <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center group-hover:bg-white/30 transition-colors">
                <Phone className="w-5 h-5" />
              </div>
              <span className="font-semibold">+221 781094091</span>
            </a>
            <span className="hidden sm:block">|</span>
            <span className="flex items-center gap-2">
              <span className="text-sm">Disponible du Lundi au Samedi</span>
              <ArrowRight className="w-4 h-4" />
              <span className="text-sm font-semibold text-white">9h - 18h</span>
            </span>
          </motion.div>
        </div>

{/* Floating Elements */}
        <motion.div
          initial={{ opacity: 0, x: -100 }}
          animate={isInView ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.5 }}
          className="hidden lg:block absolute left-10 top-1/2 -translate-y-1/2"
        >
          <motion.div
            animate={{ y: [0, -20, 0] }}
            transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
            className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20"
          >
            <div className="text-white text-sm font-medium">Livraison gratuite</div>
            <div className="text-white/60 text-xs">Sur Dakar</div>
          </motion.div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, x: 100 }}
          animate={isInView ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.6 }}
          className="hidden lg:block absolute right-10 top-1/2 -translate-y-1/2"
        >
          <motion.div
            animate={{ y: [0, 20, 0] }}
            transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
            className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20"
          >
            <div className="text-white text-sm font-medium">Garantie 2 ans</div>
            <div className="text-white/60 text-xs">Sur tous les véhicules</div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/partners-section.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import Image from "next/image"
import { motion, useInView } from "framer-motion"

const partners = [
  { name: "ANCS", fullName: "Alliance Nationale Contre le Sida", logo: "/images/partners/ancs.png" },
  { name: "Enabel", fullName: "Agence Belge de Developpement", logo: "/images/partners/enabel.png" },
  { name: "Human Appeal", fullName: "Human Appeal International", logo: "/images/partners/human-appeal.png" },
  { name: "Qatar Charity", fullName: "Qatar Charity Organization", logo: "/images/partners/qatar-charity.png" },
  { name: "SOCODEVI", fullName: "Societe de Cooperation pour le Developpement International", logo: "/images/partners/socodevi.png" },
  { name: "Somaphy West Africa", fullName: "Somaphy West Africa SA", logo: "/images/partners/somaphy.png" },
]

export function PartnersSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-24 lg:py-32 bg-background overflow-hidden">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center max-w-3xl mx-auto mb-16"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={isInView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
          >
            <span className="text-sm font-semibold text-primary">Nos Partenaires</span>
          </motion.div>
          <h2 className="text-3xl lg:text-4xl xl:text-5xl font-bold text-foreground mb-6">
            <span className="text-balance">Ils nous font </span>
            <span className="text-primary">confiance</span>
          </h2>
          <p className="text-lg text-muted-foreground leading-relaxed">
            Nous collaborons avec des organisations de renom pour fournir des solutions de mobilité 
            adaptées aux besoins de développement local
          </p>
        </motion.div>

{/* Partners Grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
          {partners.map((partner, index) => (
            <motion.div
              key={partner.name}
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
              whileHover={{ y: -8, scale: 1.05 }}
              className="group relative bg-muted/50 rounded-2xl p-6 flex flex-col items-center justify-center text-center hover:bg-primary/10 transition-all duration-300 border border-transparent hover:border-primary/20"
            >
              {/* Partner Logo */}
              <div className="w-full h-16 flex items-center justify-center mb-4">
                <Image
                  src={partner.logo || "/placeholder.svg"}
                  alt={partner.name}
                  width={120}
                  height={60}
                  className="max-h-14 w-auto object-contain"
                />
              </div>
              
              {/* Partner Name */}
              <h3 className="font-bold text-foreground text-sm">{partner.name}</h3>
              
              {/* Full Name on Hover */}
              <motion.p
                initial={{ opacity: 0, height: 0 }}
                whileHover={{ opacity: 1, height: "auto" }}
                className="text-xs text-muted-foreground mt-2 line-clamp-2"
              >
                {partner.fullName}
              </motion.p>
            </motion.div>
          ))}
        </div>

{/* CTA */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.8 }}
          className="text-center mt-16"
        >
          <p className="text-muted-foreground mb-4">
            Vous souhaitez devenir partenaire?
          </p>
          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="inline-block">
            <a
              href="mailto:Mortalla581@gmail.com?subject=Demande de partenariat"
              className="inline-flex items-center gap-2 px-6 py-3 bg-foreground text-background rounded-xl font-semibold hover:bg-foreground/90 transition-colors"
            >
              Contactez-nous
            </a>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/order-modal.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { 
  X, 
  ShoppingCart, 
  MessageCircle, 
  Mail, 
  Phone, 
  User, 
  MapPin,
  Loader2,
  CheckCircle,
  AlertCircle
} from "lucide-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 { type Product, formatPrice } from "@/lib/supabase/products"

interface OrderModalProps {
  product: Product
  quantity: number
  isOpen: boolean
  onClose: () => void
}

type OrderStatus = "idle" | "loading" | "success" | "error"

export function OrderModal({ product, quantity, isOpen, onClose }: OrderModalProps) {
  const [formData, setFormData] = useState({
    fullName: "",
    phone: "",
    email: "",
    address: "",
    city: "",
    message: ""
  })
  const [status, setStatus] = useState<OrderStatus>("idle")
  const [errorMessage, setErrorMessage] = useState("")

const totalPrice = product.price * quantity

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

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setStatus("loading")
    setErrorMessage("")

try {
      const response = await fetch("/api/order", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          product: {
            id: product.id,
            name: product.name,
            price: product.price,
            quantity
          },
          customer: formData,
          totalPrice
        })
      })

const data = await response.json()

if (!response.ok) {
        throw new Error(data.error || "Une erreur est survenue")
      }

setStatus("success")
      
      // Reset form after 3 seconds and close
      setTimeout(() => {
        setFormData({
          fullName: "",
          phone: "",
          email: "",
          address: "",
          city: "",
          message: ""
        })
        setStatus("idle")
        onClose()
      }, 3000)

} catch (error) {
      setStatus("error")
      setErrorMessage(error instanceof Error ? error.message : "Une erreur est survenue")
    }
  }

const handleWhatsAppOrder = () => {
    const priceInfo = product.category === "piece" 
      ? `- Prix: A confirmer` 
      : `- Prix unitaire: ${formatPrice(product.price)}
- Total: ${formatPrice(totalPrice)}`
    const message = `Bonjour Hasilaza Motor,

Je souhaite commander:
- Produit: ${product.name}
- Quantite: ${quantity}
${priceInfo}

Mes informations:
- Nom: ${formData.fullName || "[A completer]"}
- Telephone: ${formData.phone || "[A completer]"}
- Email: ${formData.email || "[Non fourni]"}
- Adresse: ${formData.address || "[A completer]"}, ${formData.city || "[A completer]"}

${formData.message ? `Message: ${formData.message}` : ""}

Merci de me confirmer la disponibilite et les modalites de livraison.`

const encodedMessage = encodeURIComponent(message)
    window.open(`https://wa.me/221781094091?text=${encodedMessage}`, "_blank")
  }

return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50"
          />

{/* Modal */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}
            transition={{ type: "spring", duration: 0.5 }}
            className="fixed inset-4 md:inset-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:w-full md:max-w-2xl md:max-h-[90vh] bg-background rounded-3xl shadow-2xl z-50 overflow-hidden flex flex-col"
          >
            {/* Header */}
            <div className="p-6 border-b border-border flex items-center justify-between shrink-0">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
                  <ShoppingCart className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <h2 className="text-xl font-bold text-foreground">Commander ce produit</h2>
                  <p className="text-sm text-muted-foreground">Remplissez vos informations</p>
                </div>
              </div>
              <button
                onClick={onClose}
                className="w-10 h-10 rounded-full bg-muted flex items-center justify-center hover:bg-muted/80 transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

{/* Content */}
            <div className="flex-1 overflow-y-auto p-6">
              {status === "success" ? (
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  className="flex flex-col items-center justify-center py-12 text-center"
                >
                  <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6">
                    <CheckCircle className="w-10 h-10 text-green-600" />
                  </div>
                  <h3 className="text-2xl font-bold text-foreground mb-2">Commande envoyee!</h3>
                  <p className="text-muted-foreground max-w-sm">
                    Votre commande a ete transmise. Vous recevrez une confirmation par email et WhatsApp tres bientot.
                  </p>
                </motion.div>
              ) : (
                <>
                  {/* Product Summary */}
                  <div className="bg-muted/50 rounded-2xl p-4 mb-6">
                    <div className="flex gap-4">
                      <div className="w-20 h-20 bg-muted rounded-xl overflow-hidden shrink-0">
                        <img 
                          src={product.images[0] || "/placeholder.svg"} 
                          alt={product.name}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div className="flex-1 min-w-0">
                        <h3 className="font-semibold text-foreground truncate">{product.name}</h3>
                        <p className="text-sm text-muted-foreground">Quantite: {quantity}</p>
                        {product.category !== "piece" && (
                          <>
                            <div className="flex items-center justify-between mt-2">
                              <span className="text-sm text-muted-foreground">Prix unitaire:</span>
                              <span className="font-medium">{formatPrice(product.price)}</span>
                            </div>
                            <div className="flex items-center justify-between border-t border-border mt-2 pt-2">
                              <span className="font-semibold">Total:</span>
                              <span className="text-lg font-bold text-primary">{formatPrice(totalPrice)}</span>
                            </div>
                          </>
                        )}
                        {product.category === "piece" && (
                          <div className="mt-2 pt-2 border-t border-border">
                            <span className="text-sm text-muted-foreground">Prix sur demande</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

{status === "error" && (
                    <motion.div
                      initial={{ opacity: 0, y: -10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className="bg-red-50 border border-red-200 rounded-xl p-4 mb-6 flex items-start gap-3"
                    >
                      <AlertCircle className="w-5 h-5 text-red-600 shrink-0 mt-0.5" />
                      <div>
                        <p className="font-medium text-red-800">Erreur</p>
                        <p className="text-sm text-red-600">{errorMessage}</p>
                      </div>
                    </motion.div>
                  )}

{/* Order Form */}
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid sm:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="fullName" className="flex items-center gap-2">
                          <User className="w-4 h-4 text-muted-foreground" />
                          Nom complet *
                        </Label>
                        <Input
                          id="fullName"
                          name="fullName"
                          value={formData.fullName}
                          onChange={handleChange}
                          placeholder="Votre nom complet"
                          required
                          className="h-12 rounded-xl"
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="phone" className="flex items-center gap-2">
                          <Phone className="w-4 h-4 text-muted-foreground" />
                          Telephone *
                        </Label>
                        <Input
                          id="phone"
                          name="phone"
                          type="tel"
                          value={formData.phone}
                          onChange={handleChange}
                          placeholder="+221 XX XXX XX XX"
                          required
                          className="h-12 rounded-xl"
                        />
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="email" className="flex items-center gap-2">
                        <Mail className="w-4 h-4 text-muted-foreground" />
                        Email
                      </Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        value={formData.email}
                        onChange={handleChange}
                        placeholder="votre@email.com"
                        className="h-12 rounded-xl"
                      />
                    </div>

<div className="grid sm:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="address" className="flex items-center gap-2">
                          <MapPin className="w-4 h-4 text-muted-foreground" />
                          Adresse *
                        </Label>
                        <Input
                          id="address"
                          name="address"
                          value={formData.address}
                          onChange={handleChange}
                          placeholder="Votre adresse"
                          required
                          className="h-12 rounded-xl"
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="city">Ville *</Label>
                        <Input
                          id="city"
                          name="city"
                          value={formData.city}
                          onChange={handleChange}
                          placeholder="Ex: Dakar"
                          required
                          className="h-12 rounded-xl"
                        />
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="message">Message (optionnel)</Label>
                      <Textarea
                        id="message"
                        name="message"
                        value={formData.message}
                        onChange={handleChange}
                        placeholder="Instructions speciales, questions..."
                        rows={3}
                        className="rounded-xl resize-none"
                      />
                    </div>

{/* Action Buttons */}
                    <div className="flex flex-col sm:flex-row gap-3 pt-4">
                      <Button
                        type="submit"
                        disabled={status === "loading"}
                        className="flex-1 h-14 bg-primary hover:bg-primary/90 text-primary-foreground rounded-xl text-base font-semibold"
                      >
                        {status === "loading" ? (
                          <>
                            <Loader2 className="w-5 h-5 mr-2 animate-spin" />
                            Envoi en cours...
                          </>
                        ) : (
                          <>
                            <Mail className="w-5 h-5 mr-2" />
                            Commander par email
                          </>
                        )}
                      </Button>

<Button
                        type="button"
                        onClick={handleWhatsAppOrder}
                        variant="outline"
                        className="flex-1 h-14 border-2 border-green-500 text-green-600 hover:bg-green-50 rounded-xl text-base font-semibold bg-transparent"
                      >
                        <MessageCircle className="w-5 h-5 mr-2" />
                        Commander via WhatsApp
                      </Button>
                    </div>

<p className="text-xs text-muted-foreground text-center pt-2">
                      En commandant, vous acceptez nos conditions de vente. 
                      Le proprietaire recevra votre commande par email et WhatsApp.
                    </p>
                  </form>
                </>
              )}
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescriptreact:file="components/partners.tsx" isMerged="true"
import { Handshake } from "lucide-react"

const partners = [
  { name: "ANCS", initials: "AN" },
  { name: "ENABEL", initials: "EN" },
  { name: "HUMAN APPEAL", initials: "HA" },
  { name: "QATAR CHARITY", initials: "QC" },
  { name: "SOCODEVI", initials: "SO" },
  { name: "SOMAPHY", initials: "SM" },
]

export function Partners() {
  return (
    <section id="partenaires" className="py-20 md:py-28 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <div className="flex items-center justify-center gap-2 mb-4">
            <Handshake className="w-5 h-5 text-primary" />
            <span className="text-primary font-medium">Nos partenaires</span>
          </div>
          
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            Ils nous font confiance
          </h2>
          
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Rejoignez les entreprises et organisations qui nous font confiance
          </p>
        </div>

{/* Partners Grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
          {partners.map((partner) => (
            <div 
              key={partner.name}
              className="bg-card border border-border rounded-2xl p-6 flex flex-col items-center justify-center hover:shadow-lg transition-shadow duration-300"
            >
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <span className="text-xl font-bold text-primary">{partner.initials}</span>
              </div>
              <span className="text-sm font-medium text-foreground text-center">{partner.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/products.tsx" isMerged="true"
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ShoppingCart, Star } from "lucide-react"

const bestSellers = [
  {
    id: 1,
    name: "Tricycle Cargo 250cc",
    price: "2 500 000 FCFA",
    image: "/images/tricycle-250cc.jpg",
    rating: 5,
    badge: "Best-seller"
  },
  {
    id: 2,
    name: "Moto Sport 150cc",
    price: "850 000 FCFA",
    image: "/images/motorcycle-product.jpg",
    rating: 5,
    badge: "Populaire"
  },
  {
    id: 3,
    name: "Tricycle Transport 200cc",
    price: "2 200 000 FCFA",
    image: "/images/tricycle-200cc.jpg",
    rating: 4,
    badge: "Nouveau"
  },
]

const spareParts = [
  {
    id: 1,
    name: "Kit Chaîne Complet",
    price: "45 000 FCFA",
    image: "/images/spare-parts.jpg",
  },
  {
    id: 2,
    name: "Plaquettes de Frein",
    price: "15 000 FCFA",
    image: "/images/spare-parts.jpg",
  },
  {
    id: 3,
    name: "Filtre à Huile",
    price: "8 000 FCFA",
    image: "/images/spare-parts.jpg",
  },
]

export function Products() {
  return (
    <section id="produits" className="py-20 md:py-28 bg-background">
      <div className="container mx-auto px-4">
        {/* Best Sellers */}
        <div className="mb-20">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Nos Best-Sellers
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Découvrez nos tricycles et motos les plus populaires, choisis par des centaines 
              d{"'"}entrepreneurs au Sénégal.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {bestSellers.map((product) => (
              <Card key={product.id} className="group overflow-hidden border-border hover:shadow-xl transition-all duration-300">
                <div className="relative aspect-[4/3] overflow-hidden">
                  <Image
                    src={product.image || "/placeholder.svg"}
                    alt={product.name}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  {product.badge && (
                    <span className="absolute top-4 left-4 bg-primary text-primary-foreground px-3 py-1 rounded-full text-sm font-medium">
                      {product.badge}
                    </span>
                  )}
                </div>
                <CardContent className="p-6">
                  <div className="flex items-center gap-1 mb-2">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star 
                        key={i} 
                        className={`w-4 h-4 ${i < product.rating ? 'fill-primary text-primary' : 'text-muted'}`}
                      />
                    ))}
                  </div>
                  <h3 className="text-lg font-bold text-foreground mb-2">{product.name}</h3>
                  <div className="flex items-center justify-between">
                    <span className="text-xl font-bold text-primary">{product.price}</span>
                    <Button size="sm" className="bg-primary hover:bg-primary/90 text-primary-foreground">
                      <ShoppingCart className="w-4 h-4 mr-2" />
                      Commander
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{/* Spare Parts */}
        <div>
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Pièces Détachées
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Toutes les pièces détachées dont vous avez besoin pour l{"'"}entretien 
              et la réparation de vos véhicules.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {spareParts.map((part) => (
              <Card key={part.id} className="group overflow-hidden border-border hover:shadow-xl transition-all duration-300">
                <div className="relative aspect-[4/3] overflow-hidden bg-muted">
                  <Image
                    src={part.image || "/placeholder.svg"}
                    alt={part.name}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                </div>
                <CardContent className="p-6">
                  <h3 className="text-lg font-bold text-foreground mb-2">{part.name}</h3>
                  <div className="flex items-center justify-between">
                    <span className="text-xl font-bold text-primary">{part.price}</span>
                    <Button size="sm" variant="outline" className="border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent">
                      Voir détails
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Moon, Sun } from "lucide-react"
import { motion } from "framer-motion"

export function ThemeToggle() {
  const [isDark, setIsDark] = useState(false)
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    const saved = localStorage.getItem("theme")
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    const shouldBeDark = saved === "dark" || (!saved && prefersDark)
    setIsDark(shouldBeDark)
    if (shouldBeDark) {
      document.documentElement.classList.add("dark")
    }
  }, [])

const toggleTheme = () => {
    const newIsDark = !isDark
    setIsDark(newIsDark)
    if (newIsDark) {
      document.documentElement.classList.add("dark")
      localStorage.setItem("theme", "dark")
    } else {
      document.documentElement.classList.remove("dark")
      localStorage.setItem("theme", "light")
    }
  }

if (!mounted) {
    return (
      <button
        className="p-2 rounded-lg hover:bg-muted transition-colors"
        aria-label="Toggle theme"
      >
        <Sun className="w-5 h-5" />
      </button>
    )
  }

return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      onClick={toggleTheme}
      className="p-2 rounded-lg hover:bg-muted transition-colors"
      aria-label={isDark ? "Passer en mode clair" : "Passer en mode sombre"}
    >
      {isDark ? (
        <Sun className="w-5 h-5 text-foreground" />
      ) : (
        <Moon className="w-5 h-5 text-foreground" />
      )}
    </motion.button>
  )
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { ChevronDownIcon } from 'lucide-react'

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

function Accordion({
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}

function AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn('border-b last:border-b-0', className)}
      {...props}
    />
  )
}

function AccordionTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
          className,
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}

function AccordionContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
      {...props}
    >
      <div className={cn('pt-0 pb-4', className)}>{children}</div>
    </AccordionPrimitive.Content>
  )
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[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'

function AlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
  )
}

function AlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  )
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogContent({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      />
    </AlertDialogPortal>
  )
}

function AlertDialogHeader({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function AlertDialogFooter({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn('text-lg font-semibold', className)}
      {...props}
    />
  )
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function AlertDialogAction({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
  return (
    <AlertDialogPrimitive.Action
      className={cn(buttonVariants(), className)}
      {...props}
    />
  )
}

function AlertDialogCancel({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(buttonVariants({ variant: 'outline' }), className)}
      {...props}
    />
  )
}

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true"
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

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

const alertVariants = cva(
  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
  {
    variants: {
      variant: {
        default: 'bg-card text-card-foreground',
        destructive:
          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
        className,
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
        className,
      )}
      {...props}
    />
  )
}

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true"
'use client'

import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

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

import * as React from 'react'
import * as AvatarPrimitive from '@radix-ui/react-avatar'

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

function Avatar({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
        className,
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn('aspect-square size-full', className)}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        'bg-muted flex size-full items-center justify-center rounded-full',
        className,
      )}
      {...props}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

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

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { ChevronRight, MoreHorizontal } from 'lucide-react'

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

function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
        className,
      )}
      {...props}
    />
  )
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn('inline-flex items-center gap-1.5', className)}
      {...props}
    />
  )
}

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: React.ComponentProps<'a'> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn('hover:text-foreground transition-colors', className)}
      {...props}
    />
  )
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn('text-foreground font-normal', className)}
      {...props}
    />
  )
}

function BreadcrumbSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn('[&>svg]:size-3.5', className)}
      {...props}
    >
      {children ?? <ChevronRight />}
    </li>
  )
}

function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn('flex size-9 items-center justify-center', className)}
      {...props}
    >
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
  )
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button-group.tsx" isMerged="true"
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

const buttonGroupVariants = cva(
  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
  {
    variants: {
      orientation: {
        horizontal:
          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
        vertical:
          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
      },
    },
    defaultVariants: {
      orientation: 'horizontal',
    },
  },
)

function ButtonGroup({
  className,
  orientation,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
  return (
    <div
      role="group"
      data-slot="button-group"
      data-orientation={orientation}
      className={cn(buttonGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

function ButtonGroupText({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : 'div'

return (
    <Comp
      className={cn(
        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function ButtonGroupSeparator({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="button-group-separator"
      orientation={orientation}
      className={cn(
        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
        className,
      )}
      {...props}
    />
  )
}

export {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
  buttonGroupVariants,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

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

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
'use client'

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

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

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

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

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

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

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

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

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

export { Calendar, CalendarDayButton }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

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

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isMerged="true"
'use client'

import * as React from 'react'
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from 'embla-carousel-react'
import { ArrowLeft, ArrowRight } from 'lucide-react'

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

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: 'horizontal' | 'vertical'
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error('useCarousel must be used within a <Carousel />')
  }

return context
}

function Carousel({
  orientation = 'horizontal',
  opts,
  setApi,
  plugins,
  className,
  children,
  ...props
}: React.ComponentProps<'div'> & CarouselProps) {
  const [carouselRef, api] = useEmblaCarousel(
    {
      ...opts,
      axis: orientation === 'horizontal' ? 'x' : 'y',
    },
    plugins,
  )
  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
  const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
    if (!api) return
    setCanScrollPrev(api.canScrollPrev())
    setCanScrollNext(api.canScrollNext())
  }, [])

const scrollPrev = React.useCallback(() => {
    api?.scrollPrev()
  }, [api])

const scrollNext = React.useCallback(() => {
    api?.scrollNext()
  }, [api])

const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key === 'ArrowLeft') {
        event.preventDefault()
        scrollPrev()
      } else if (event.key === 'ArrowRight') {
        event.preventDefault()
        scrollNext()
      }
    },
    [scrollPrev, scrollNext],
  )

React.useEffect(() => {
    if (!api || !setApi) return
    setApi(api)
  }, [api, setApi])

React.useEffect(() => {
    if (!api) return
    onSelect(api)
    api.on('reInit', onSelect)
    api.on('select', onSelect)

return () => {
      api?.off('select', onSelect)
    }
  }, [api, onSelect])

return (
    <CarouselContext.Provider
      value={{
        carouselRef,
        api: api,
        opts,
        orientation:
          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
        scrollPrev,
        scrollNext,
        canScrollPrev,
        canScrollNext,
      }}
    >
      <div
        onKeyDownCapture={handleKeyDown}
        className={cn('relative', className)}
        role="region"
        aria-roledescription="carousel"
        data-slot="carousel"
        {...props}
      >
        {children}
      </div>
    </CarouselContext.Provider>
  )
}

function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
  const { carouselRef, orientation } = useCarousel()

return (
    <div
      ref={carouselRef}
      className="overflow-hidden"
      data-slot="carousel-content"
    >
      <div
        className={cn(
          'flex',
          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
  const { orientation } = useCarousel()

return (
    <div
      role="group"
      aria-roledescription="slide"
      data-slot="carousel-item"
      className={cn(
        'min-w-0 shrink-0 grow-0 basis-full',
        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
        className,
      )}
      {...props}
    />
  )
}

function CarouselPrevious({
  className,
  variant = 'outline',
  size = 'icon',
  ...props
}: React.ComponentProps<typeof Button>) {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
    <Button
      data-slot="carousel-previous"
      variant={variant}
      size={size}
      className={cn(
        'absolute size-8 rounded-full',
        orientation === 'horizontal'
          ? 'top-1/2 -left-12 -translate-y-1/2'
          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
}

function CarouselNext({
  className,
  variant = 'outline',
  size = 'icon',
  ...props
}: React.ComponentProps<typeof Button>) {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
    <Button
      data-slot="carousel-next"
      variant={variant}
      size={size}
      className={cn(
        'absolute size-8 rounded-full',
        orientation === 'horizontal'
          ? 'top-1/2 -right-12 -translate-y-1/2'
          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight />
      <span className="sr-only">Next slide</span>
    </Button>
  )
}

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as RechartsPrimitive from 'recharts'

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

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error('useChart must be used within a <ChartContainer />')
  }

return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<'div'> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >['children']
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color,
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join('\n')}
}
`,
          )
          .join('\n'),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = 'dot',
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<'div'> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: 'line' | 'dot' | 'dashed'
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === 'string'
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

if (labelFormatter) {
      return (
        <div className={cn('font-medium', labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

if (!value) {
      return null
    }

return <div className={cn('font-medium', labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

if (!active || !payload?.length) {
    return null
  }

const nestLabel = payload.length === 1 && indicator !== 'dot'

return (
    <div
      className={cn(
        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
        className,
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload.map((item, index) => {
          const key = `${nameKey || item.name || item.dataKey || 'value'}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
          const indicatorColor = color || item.payload.fill || item.color

return (
            <div
              key={item.dataKey}
              className={cn(
                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
                indicator === 'dot' && 'items-center',
              )}
            >
              {formatter && item?.value !== undefined && item.name ? (
                formatter(item.value, item.name, item, index, item.payload)
              ) : (
                <>
                  {itemConfig?.icon ? (
                    <itemConfig.icon />
                  ) : (
                    !hideIndicator && (
                      <div
                        className={cn(
                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
                          {
                            'h-2.5 w-2.5': indicator === 'dot',
                            'w-1': indicator === 'line',
                            'w-0 border-[1.5px] border-dashed bg-transparent':
                              indicator === 'dashed',
                            'my-0.5': nestLabel && indicator === 'dashed',
                          },
                        )}
                        style={
                          {
                            '--color-bg': indicatorColor,
                            '--color-border': indicatorColor,
                          } as React.CSSProperties
                        }
                      />
                    )
                  )}
                  <div
                    className={cn(
                      'flex flex-1 justify-between leading-none',
                      nestLabel ? 'items-end' : 'items-center',
                    )}
                  >
                    <div className="grid gap-1.5">
                      {nestLabel ? tooltipLabel : null}
                      <span className="text-muted-foreground">
                        {itemConfig?.label || item.name}
                      </span>
                    </div>
                    {item.value && (
                      <span className="text-foreground font-mono font-medium tabular-nums">
                        {item.value.toLocaleString()}
                      </span>
                    )}
                  </div>
                </>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = 'bottom',
  nameKey,
}: React.ComponentProps<'div'> &
  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

if (!payload?.length) {
    return null
  }

return (
    <div
      className={cn(
        'flex items-center justify-center gap-4',
        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
        className,
      )}
    >
      {payload.map((item) => {
        const key = `${nameKey || item.dataKey || 'value'}`
        const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
          <div
            key={item.value}
            className={
              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
            }
          >
            {itemConfig?.icon && !hideIcon ? (
              <itemConfig.icon />
            ) : (
              <div
                className="h-2 w-2 shrink-0 rounded-[2px]"
                style={{
                  backgroundColor: item.color,
                }}
              />
            )}
            {itemConfig?.label}
          </div>
        )
      })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string,
) {
  if (typeof payload !== 'object' || payload === null) {
    return undefined
  }

const payloadPayload =
    'payload' in payload &&
    typeof payload.payload === 'object' &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === 'string'
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[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 { CheckIcon } from 'lucide-react'

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

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

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

import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { Command as CommandPrimitive } from 'cmdk'
import { SearchIcon } from 'lucide-react'

import { cn } from '@/lib/utils'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'

function Command({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive>) {
  return (
    <CommandPrimitive
      data-slot="command"
      className={cn(
        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
        className,
      )}
      {...props}
    />
  )
}

function CommandDialog({
  title = 'Command Palette',
  description = 'Search for a command to run...',
  children,
  className,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof Dialog> & {
  title?: string
  description?: string
  className?: string
  showCloseButton?: boolean
}) {
  return (
    <Dialog {...props}>
      <DialogHeader className="sr-only">
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      <DialogContent
        className={cn('overflow-hidden p-0', className)}
        showCloseButton={showCloseButton}
      >
        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

function CommandInput({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
  return (
    <div
      data-slot="command-input-wrapper"
      className="flex h-9 items-center gap-2 border-b px-3"
    >
      <SearchIcon className="size-4 shrink-0 opacity-50" />
      <CommandPrimitive.Input
        data-slot="command-input"
        className={cn(
          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function CommandList({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
  return (
    <CommandPrimitive.List
      data-slot="command-list"
      className={cn(
        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
        className,
      )}
      {...props}
    />
  )
}

function CommandEmpty({
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
  return (
    <CommandPrimitive.Empty
      data-slot="command-empty"
      className="py-6 text-center text-sm"
      {...props}
    />
  )
}

function CommandGroup({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
  return (
    <CommandPrimitive.Group
      data-slot="command-group"
      className={cn(
        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
        className,
      )}
      {...props}
    />
  )
}

function CommandSeparator({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
  return (
    <CommandPrimitive.Separator
      data-slot="command-separator"
      className={cn('bg-border -mx-1 h-px', className)}
      {...props}
    />
  )
}

function CommandItem({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
  return (
    <CommandPrimitive.Item
      data-slot="command-item"
      className={cn(
        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function CommandShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="command-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

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

function ContextMenu({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
}

function ContextMenuTrigger({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
  return (
    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
  )
}

function ContextMenuGroup({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
  return (
    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
  )
}

function ContextMenuPortal({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
  return (
    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
  )
}

function ContextMenuSub({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
}

function ContextMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
  return (
    <ContextMenuPrimitive.RadioGroup
      data-slot="context-menu-radio-group"
      {...props}
    />
  )
}

function ContextMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <ContextMenuPrimitive.SubTrigger
      data-slot="context-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto" />
    </ContextMenuPrimitive.SubTrigger>
  )
}

function ContextMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
  return (
    <ContextMenuPrimitive.SubContent
      data-slot="context-menu-sub-content"
      className={cn(
        'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

function ContextMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
  return (
    <ContextMenuPrimitive.Portal>
      <ContextMenuPrimitive.Content
        data-slot="context-menu-content"
        className={cn(
          'bg-popover text-popover-foreground 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </ContextMenuPrimitive.Portal>
  )
}

function ContextMenuItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <ContextMenuPrimitive.Item
      data-slot="context-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function ContextMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
  return (
    <ContextMenuPrimitive.CheckboxItem
      data-slot="context-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.CheckboxItem>
  )
}

function ContextMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
  return (
    <ContextMenuPrimitive.RadioItem
      data-slot="context-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.RadioItem>
  )
}

function ContextMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <ContextMenuPrimitive.Label
      data-slot="context-menu-label"
      data-inset={inset}
      className={cn(
        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function ContextMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
  return (
    <ContextMenuPrimitive.Separator
      data-slot="context-menu-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function ContextMenuShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="context-menu-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

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

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn('text-lg leading-none font-semibold', className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { Drawer as DrawerPrimitive } from 'vaul'

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

function Drawer({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
}

function DrawerTrigger({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}

function DrawerPortal({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}

function DrawerClose({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}

function DrawerOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
  return (
    <DrawerPrimitive.Overlay
      data-slot="drawer-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DrawerContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
  return (
    <DrawerPortal data-slot="drawer-portal">
      <DrawerOverlay />
      <DrawerPrimitive.Content
        data-slot="drawer-content"
        className={cn(
          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
          className,
        )}
        {...props}
      >
        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
        {children}
      </DrawerPrimitive.Content>
    </DrawerPortal>
  )
}

function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="drawer-header"
      className={cn(
        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
        className,
      )}
      {...props}
    />
  )
}

function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="drawer-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function DrawerTitle({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function DrawerDescription({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
  return (
    <DrawerPrimitive.Description
      data-slot="drawer-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[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 { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

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

function DropdownMenu({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
  )
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot="dropdown-menu-trigger"
      {...props}
    />
  )
}

function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  )
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
  )
}

function DropdownMenuItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  )
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  )
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  )
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
  )
}

function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
        'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
}
[V0_FILE]typescriptreact:file="components/ui/empty.tsx" isMerged="true"
import { cva, type VariantProps } from 'class-variance-authority'

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

function Empty({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty"
      className={cn(
        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
        className,
      )}
      {...props}
    />
  )
}

function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-header"
      className={cn(
        'flex max-w-sm flex-col items-center gap-2 text-center',
        className,
      )}
      {...props}
    />
  )
}

const emptyMediaVariants = cva(
  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function EmptyMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
  return (
    <div
      data-slot="empty-icon"
      data-variant={variant}
      className={cn(emptyMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-title"
      className={cn('text-lg font-medium tracking-tight', className)}
      {...props}
    />
  )
}

function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <div
      data-slot="empty-description"
      className={cn(
        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-content"
      className={cn(
        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
        className,
      )}
      {...props}
    />
  )
}

export {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
}
[V0_FILE]typescriptreact:file="components/ui/field.tsx" isMerged="true"
'use client'

import { useMemo } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
  return (
    <fieldset
      data-slot="field-set"
      className={cn(
        'flex flex-col gap-6',
        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
        className,
      )}
      {...props}
    />
  )
}

function FieldLegend({
  className,
  variant = 'legend',
  ...props
}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
  return (
    <legend
      data-slot="field-legend"
      data-variant={variant}
      className={cn(
        'mb-3 font-medium',
        'data-[variant=legend]:text-base',
        'data-[variant=label]:text-sm',
        className,
      )}
      {...props}
    />
  )
}

function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-group"
      className={cn(
        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
        className,
      )}
      {...props}
    />
  )
}

const fieldVariants = cva(
  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
  {
    variants: {
      orientation: {
        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
        horizontal: [
          'flex-row items-center',
          '[&>[data-slot=field-label]]:flex-auto',
          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
        ],
        responsive: [
          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
        ],
      },
    },
    defaultVariants: {
      orientation: 'vertical',
    },
  },
)

function Field({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
  return (
    <div
      role="group"
      data-slot="field"
      data-orientation={orientation}
      className={cn(fieldVariants({ orientation }), className)}
      {...props}
    />
  )
}

function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-content"
      className={cn(
        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
        className,
      )}
      {...props}
    />
  )
}

function FieldLabel({
  className,
  ...props
}: React.ComponentProps<typeof Label>) {
  return (
    <Label
      data-slot="field-label"
      className={cn(
        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
        className,
      )}
      {...props}
    />
  )
}

function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-label"
      className={cn(
        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="field-description"
      className={cn(
        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function FieldSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<'div'> & {
  children?: React.ReactNode
}) {
  return (
    <div
      data-slot="field-separator"
      data-content={!!children}
      className={cn(
        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
        className,
      )}
      {...props}
    >
      <Separator className="absolute inset-0 top-1/2" />
      {children && (
        <span
          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
          data-slot="field-separator-content"
        >
          {children}
        </span>
      )}
    </div>
  )
}

function FieldError({
  className,
  children,
  errors,
  ...props
}: React.ComponentProps<'div'> & {
  errors?: Array<{ message?: string } | undefined>
}) {
  const content = useMemo(() => {
    if (children) {
      return children
    }

if (!errors) {
      return null
    }

if (errors.length === 1 && errors[0]?.message) {
      return errors[0].message
    }

return (
      <ul className="ml-4 flex list-disc flex-col gap-1">
        {errors.map(
          (error, index) =>
            error?.message && <li key={index}>{error.message}</li>,
        )}
      </ul>
    )
  }, [children, errors])

if (!content) {
    return null
  }

return (
    <div
      role="alert"
      data-slot="field-error"
      className={cn('text-destructive text-sm font-normal', className)}
      {...props}
    >
      {content}
    </div>
  )
}

export {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldContent,
  FieldTitle,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { Slot } from '@radix-ui/react-slot'
import {
  Controller,
  FormProvider,
  useFormContext,
  useFormState,
  type ControllerProps,
  type FieldPath,
  type FieldValues,
} from 'react-hook-form'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue,
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState } = useFormContext()
  const formState = useFormState({ name: fieldContext.name })
  const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error('useFormField should be used within <FormField>')
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue,
)

function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div
        data-slot="form-item"
        className={cn('grid gap-2', className)}
        {...props}
      />
    </FormItemContext.Provider>
  )
}

function FormLabel({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  const { error, formItemId } = useFormField()

return (
    <Label
      data-slot="form-label"
      data-error={!!error}
      className={cn('data-[error=true]:text-destructive', className)}
      htmlFor={formItemId}
      {...props}
    />
  )
}

function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      data-slot="form-control"
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
}

function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
  const { formDescriptionId } = useFormField()

return (
    <p
      data-slot="form-description"
      id={formDescriptionId}
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message ?? '') : props.children

if (!body) {
    return null
  }

return (
    <p
      data-slot="form-message"
      id={formMessageId}
      className={cn('text-destructive text-sm', className)}
      {...props}
    >
      {body}
    </p>
  )
}

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as HoverCardPrimitive from '@radix-ui/react-hover-card'

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

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = 'center',
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          className,
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-group.tsx" isMerged="true"
'use client'

import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="input-group"
      role="group"
      className={cn(
        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
        'h-9 has-[>textarea]:h-auto',

// Variants based on alignment.
        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',

// Focus state.
        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',

// Error state.
        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',

className,
      )}
      {...props}
    />
  )
}

const inputGroupAddonVariants = cva(
  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
  {
    variants: {
      align: {
        'inline-start':
          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
        'inline-end':
          'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
        'block-start':
          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
        'block-end':
          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
      },
    },
    defaultVariants: {
      align: 'inline-start',
    },
  },
)

function InputGroupAddon({
  className,
  align = 'inline-start',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
  return (
    <div
      role="group"
      data-slot="input-group-addon"
      data-align={align}
      className={cn(inputGroupAddonVariants({ align }), className)}
      onClick={(e) => {
        if ((e.target as HTMLElement).closest('button')) {
          return
        }
        e.currentTarget.parentElement?.querySelector('input')?.focus()
      }}
      {...props}
    />
  )
}

const inputGroupButtonVariants = cva(
  'text-sm shadow-none flex gap-2 items-center',
  {
    variants: {
      size: {
        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
        'icon-xs':
          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
      },
    },
    defaultVariants: {
      size: 'xs',
    },
  },
)

function InputGroupButton({
  className,
  type = 'button',
  variant = 'ghost',
  size = 'xs',
  ...props
}: Omit<React.ComponentProps<typeof Button>, 'size'> &
  VariantProps<typeof inputGroupButtonVariants>) {
  return (
    <Button
      type={type}
      data-size={size}
      variant={variant}
      className={cn(inputGroupButtonVariants({ size }), className)}
      {...props}
    />
  )
}

function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      className={cn(
        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function InputGroupInput({
  className,
  ...props
}: React.ComponentProps<'input'>) {
  return (
    <Input
      data-slot="input-group-control"
      className={cn(
        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

function InputGroupTextarea({
  className,
  ...props
}: React.ComponentProps<'textarea'>) {
  return (
    <Textarea
      data-slot="input-group-control"
      className={cn(
        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

export {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupInput,
  InputGroupTextarea,
}
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { OTPInput, OTPInputContext } from 'input-otp'
import { MinusIcon } from 'lucide-react'

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

function InputOTP({
  className,
  containerClassName,
  ...props
}: React.ComponentProps<typeof OTPInput> & {
  containerClassName?: string
}) {
  return (
    <OTPInput
      data-slot="input-otp"
      containerClassName={cn(
        'flex items-center gap-2 has-disabled:opacity-50',
        containerClassName,
      )}
      className={cn('disabled:cursor-not-allowed', className)}
      {...props}
    />
  )
}

function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="input-otp-group"
      className={cn('flex items-center', className)}
      {...props}
    />
  )
}

function InputOTPSlot({
  index,
  className,
  ...props
}: React.ComponentProps<'div'> & {
  index: number
}) {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}

return (
    <div
      data-slot="input-otp-slot"
      data-active={isActive}
      className={cn(
        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
        className,
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
        </div>
      )}
    </div>
  )
}

function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
  return (
    <div data-slot="input-otp-separator" role="separator" {...props}>
      <MinusIcon />
    </div>
  )
}

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

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

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/item.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      role="list"
      data-slot="item-group"
      className={cn('group/item-group flex flex-col', className)}
      {...props}
    />
  )
}

function ItemSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="item-separator"
      orientation="horizontal"
      className={cn('my-0', className)}
      {...props}
    />
  )
}

const itemVariants = cva(
  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a&]:hover:bg-accent/50 [a&]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border-border',
        muted: 'bg-muted/50',
      },
      size: {
        default: 'p-4 gap-4 ',
        sm: 'py-3 px-4 gap-2.5',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Item({
  className,
  variant = 'default',
  size = 'default',
  asChild = false,
  ...props
}: React.ComponentProps<'div'> &
  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'
  return (
    <Comp
      data-slot="item"
      data-variant={variant}
      data-size={size}
      className={cn(itemVariants({ variant, size, className }))}
      {...props}
    />
  )
}

const itemMediaVariants = cva(
  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
        image:
          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function ItemMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
  return (
    <div
      data-slot="item-media"
      data-variant={variant}
      className={cn(itemMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-content"
      className={cn(
        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
        className,
      )}
      {...props}
    />
  )
}

function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-title"
      className={cn(
        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
        className,
      )}
      {...props}
    />
  )
}

function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="item-description"
      className={cn(
        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-actions"
      className={cn('flex items-center gap-2', className)}
      {...props}
    />
  )
}

function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-header"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-footer"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

export {
  Item,
  ItemMedia,
  ItemContent,
  ItemActions,
  ItemGroup,
  ItemSeparator,
  ItemTitle,
  ItemDescription,
  ItemHeader,
  ItemFooter,
}
[V0_FILE]typescriptreact:file="components/ui/kbd.tsx" isMerged="true"
import { cn } from '@/lib/utils'

function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        'bg-muted w-fit text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
        "[&_svg:not([class*='size-'])]:size-3",
        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
        className,
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn('inline-flex items-center gap-1', className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

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

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

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

import * as React from 'react'
import * as MenubarPrimitive from '@radix-ui/react-menubar'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

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

function Menubar({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
  return (
    <MenubarPrimitive.Root
      data-slot="menubar"
      className={cn(
        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
        className,
      )}
      {...props}
    />
  )
}

function MenubarMenu({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
}

function MenubarGroup({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
}

function MenubarPortal({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
}

function MenubarRadioGroup({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
  return (
    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
  )
}

function MenubarTrigger({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
  return (
    <MenubarPrimitive.Trigger
      data-slot="menubar-trigger"
      className={cn(
        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
        className,
      )}
      {...props}
    />
  )
}

function MenubarContent({
  className,
  align = 'start',
  alignOffset = -4,
  sideOffset = 8,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
  return (
    <MenubarPortal>
      <MenubarPrimitive.Content
        data-slot="menubar-content"
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </MenubarPortal>
  )
}

function MenubarItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <MenubarPrimitive.Item
      data-slot="menubar-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function MenubarCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
  return (
    <MenubarPrimitive.CheckboxItem
      data-slot="menubar-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <MenubarPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </MenubarPrimitive.ItemIndicator>
      </span>
      {children}
    </MenubarPrimitive.CheckboxItem>
  )
}

function MenubarRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
  return (
    <MenubarPrimitive.RadioItem
      data-slot="menubar-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <MenubarPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </MenubarPrimitive.ItemIndicator>
      </span>
      {children}
    </MenubarPrimitive.RadioItem>
  )
}

function MenubarLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <MenubarPrimitive.Label
      data-slot="menubar-label"
      data-inset={inset}
      className={cn(
        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function MenubarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
  return (
    <MenubarPrimitive.Separator
      data-slot="menubar-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function MenubarShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="menubar-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

function MenubarSub({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
}

function MenubarSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <MenubarPrimitive.SubTrigger
      data-slot="menubar-sub-trigger"
      data-inset={inset}
      className={cn(
        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto h-4 w-4" />
    </MenubarPrimitive.SubTrigger>
  )
}

function MenubarSubContent({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
  return (
    <MenubarPrimitive.SubContent
      data-slot="menubar-sub-content"
      className={cn(
        'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

export {
  Menubar,
  MenubarPortal,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarGroup,
  MenubarSeparator,
  MenubarLabel,
  MenubarItem,
  MenubarShortcut,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx" isMerged="true"
import * as React from 'react'
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
import { cva } from 'class-variance-authority'
import { ChevronDownIcon } from 'lucide-react'

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

function NavigationMenu({
  className,
  children,
  viewport = true,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
  viewport?: boolean
}) {
  return (
    <NavigationMenuPrimitive.Root
      data-slot="navigation-menu"
      data-viewport={viewport}
      className={cn(
        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
        className,
      )}
      {...props}
    >
      {children}
      {viewport && <NavigationMenuViewport />}
    </NavigationMenuPrimitive.Root>
  )
}

function NavigationMenuList({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
  return (
    <NavigationMenuPrimitive.List
      data-slot="navigation-menu-list"
      className={cn(
        'group flex flex-1 list-none items-center justify-center gap-1',
        className,
      )}
      {...props}
    />
  )
}

function NavigationMenuItem({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
  return (
    <NavigationMenuPrimitive.Item
      data-slot="navigation-menu-item"
      className={cn('relative', className)}
      {...props}
    />
  )
}

const navigationMenuTriggerStyle = cva(
  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
)

function NavigationMenuTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot="navigation-menu-trigger"
      className={cn(navigationMenuTriggerStyle(), 'group', className)}
      {...props}
    >
      {children}{' '}
      <ChevronDownIcon
        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
        aria-hidden="true"
      />
    </NavigationMenuPrimitive.Trigger>
  )
}

function NavigationMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
  return (
    <NavigationMenuPrimitive.Content
      data-slot="navigation-menu-content"
      className={cn(
        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
        className,
      )}
      {...props}
    />
  )
}

function NavigationMenuViewport({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
  return (
    <div
      className={'absolute top-full left-0 isolate z-50 flex justify-center'}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function NavigationMenuLink({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
  return (
    <NavigationMenuPrimitive.Link
      data-slot="navigation-menu-link"
      className={cn(
        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function NavigationMenuIndicator({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
  return (
    <NavigationMenuPrimitive.Indicator
      data-slot="navigation-menu-indicator"
      className={cn(
        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
        className,
      )}
      {...props}
    >
      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
    </NavigationMenuPrimitive.Indicator>
  )
}

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx" isMerged="true"
import * as React from 'react'
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
} from 'lucide-react'

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

function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
  return (
    <nav
      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
      className={cn('mx-auto flex w-full justify-center', className)}
      {...props}
    />
  )
}

function PaginationContent({
  className,
  ...props
}: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="pagination-content"
      className={cn('flex flex-row items-center gap-1', className)}
      {...props}
    />
  )
}

function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
  return <li data-slot="pagination-item" {...props} />
}

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, 'size'> &
  React.ComponentProps<'a'>

function PaginationLink({
  className,
  isActive,
  size = 'icon',
  ...props
}: PaginationLinkProps) {
  return (
    <a
      aria-current={isActive ? 'page' : undefined}
      data-slot="pagination-link"
      data-active={isActive}
      className={cn(
        buttonVariants({
          variant: isActive ? 'outline' : 'ghost',
          size,
        }),
        className,
      )}
      {...props}
    />
  )
}

function PaginationPrevious({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size="default"
      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
      {...props}
    >
      <ChevronLeftIcon />
      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
  )
}

function PaginationNext({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size="default"
      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
      {...props}
    >
      <span className="hidden sm:block">Next</span>
      <ChevronRightIcon />
    </PaginationLink>
  )
}

function PaginationEllipsis({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
      className={cn('flex size-9 items-center justify-center', className)}
      {...props}
    >
      <MoreHorizontalIcon className="size-4" />
      <span className="sr-only">More pages</span>
    </span>
  )
}

export {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'

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

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = 'center',
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
[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'

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
        className,
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="bg-primary h-full w-full flex-1 transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

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

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

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

function RadioGroup({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn('grid gap-3', className)}
      {...props}
    />
  )
}

function RadioGroupItem({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radio-group-indicator"
        className="relative flex items-center justify-center"
      >
        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
}

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { GripVerticalIcon } from 'lucide-react'
import * as ResizablePrimitive from 'react-resizable-panels'

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

function ResizablePanelGroup({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
  return (
    <ResizablePrimitive.PanelGroup
      data-slot="resizable-panel-group"
      className={cn(
        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
        className,
      )}
      {...props}
    />
  )
}

function ResizablePanel({
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}

function ResizableHandle({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) {
  return (
    <ResizablePrimitive.PanelResizeHandle
      data-slot="resizable-handle"
      className={cn(
        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
        className,
      )}
      {...props}
    >
      {withHandle && (
        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
          <GripVerticalIcon className="size-2.5" />
        </div>
      )}
    </ResizablePrimitive.PanelResizeHandle>
  )
}

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[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'

function ScrollArea({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn('relative', className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

function ScrollBar({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        'flex touch-none p-px transition-colors select-none',
        orientation === 'vertical' &&
          'h-full w-2.5 border-l border-l-transparent',
        orientation === 'horizontal' &&
          'h-2.5 flex-col border-t border-t-transparent',
        className,
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="bg-border relative flex-1 rounded-full"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

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

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = 'default',
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: 'sm' | 'default'
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = 'popper',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          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)] scroll-my-1',
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[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'

function Separator({
  className,
  orientation = 'horizontal',
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
        className,
      )}
      {...props}
    />
  )
}

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

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

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

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />
}

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}

function SheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function SheetContent({
  className,
  children,
  side = 'right',
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: 'top' | 'right' | 'bottom' | 'left'
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
          side === 'right' &&
            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
          side === 'left' &&
            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
          side === 'top' &&
            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
          side === 'bottom' &&
            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
          className,
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  )
}

function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-header"
      className={cn('flex flex-col gap-1.5 p-4', className)}
      {...props}
    />
  )
}

function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, VariantProps } from 'class-variance-authority'
import { PanelLeftIcon } from 'lucide-react'

import { useIsMobile } from '@/hooks/use-mobile'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

const SIDEBAR_COOKIE_NAME = 'sidebar_state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

type SidebarContextProps = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }

return context
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}) {
  const isMobile = useIsMobile()
  const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen)
  const open = openProp ?? _open
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === 'function' ? value(open) : value
      if (setOpenProp) {
        setOpenProp(openState)
      } else {
        _setOpen(openState)
      }

// This sets the cookie to keep the sidebar state.
      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
    },
    [setOpenProp, open],
  )

// Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
  }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault()
        toggleSidebar()
      }
    }

window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? 'expanded' : 'collapsed'

const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
  )

return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH,
              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
            className,
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
}

function Sidebar({
  side = 'left',
  variant = 'sidebar',
  collapsible = 'offcanvas',
  className,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  side?: 'left' | 'right'
  variant?: 'sidebar' | 'floating' | 'inset'
  collapsible?: 'offcanvas' | 'icon' | 'none'
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === 'none') {
    return (
      <div
        data-slot="sidebar"
        className={cn(
          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
          className,
        )}
        {...props}
      >
        {children}
      </div>
    )
  }

if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar="sidebar"
          data-slot="sidebar"
          data-mobile="true"
          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side={side}
        >
          <SheetHeader className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    )
  }

return (
    <div
      className="group peer text-sidebar-foreground hidden md:block"
      data-state={state}
      data-collapsible={state === 'collapsed' ? collapsible : ''}
      data-variant={variant}
      data-side={side}
      data-slot="sidebar"
    >
      {/* This is what handles the sidebar gap on desktop */}
      <div
        data-slot="sidebar-gap"
        className={cn(
          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
          'group-data-[collapsible=offcanvas]:w-0',
          'group-data-[side=right]:rotate-180',
          variant === 'floating' || variant === 'inset'
            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
        )}
      />
      <div
        data-slot="sidebar-container"
        className={cn(
          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
          side === 'left'
            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
          // Adjust the padding for floating and inset variants.
          variant === 'floating' || variant === 'inset'
            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
          className,
        )}
        {...props}
      >
        <div
          data-sidebar="sidebar"
          data-slot="sidebar-inner"
          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
        >
          {children}
        </div>
      </div>
    </div>
  )
}

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon"
      className={cn('size-7', className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
}

function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
  const { toggleSidebar } = useSidebar()

return (
    <button
      data-sidebar="rail"
      data-slot="sidebar-rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
  return (
    <main
      data-slot="sidebar-inset"
      className={cn(
        'bg-background relative flex w-full flex-1 flex-col',
        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInput({
  className,
  ...props
}: React.ComponentProps<typeof Input>) {
  return (
    <Input
      data-slot="sidebar-input"
      data-sidebar="input"
      className={cn('bg-background h-8 w-full shadow-none', className)}
      {...props}
    />
  )
}

function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="sidebar-separator"
      data-sidebar="separator"
      className={cn('bg-sidebar-border mx-2 w-auto', className)}
      {...props}
    />
  )
}

function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
      {...props}
    />
  )
}

function SidebarGroupLabel({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'

return (
    <Comp
      data-slot="sidebar-group-label"
      data-sidebar="group-label"
      className={cn(
        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupAction({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-group-action"
      data-sidebar="group-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupContent({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group-content"
      data-sidebar="group-content"
      className={cn('w-full text-sm', className)}
      {...props}
    />
  )
}

function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
      {...props}
    />
  )
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn('group/menu-item relative', className)}
      {...props}
    />
  )
}

const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
      },
      size: {
        default: 'h-8 text-sm',
        sm: 'h-7 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function SidebarMenuButton({
  asChild = false,
  isActive = false,
  variant = 'default',
  size = 'default',
  tooltip,
  className,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  isActive?: boolean
  tooltip?: string | React.ComponentProps<typeof TooltipContent>
} & VariantProps<typeof sidebarMenuButtonVariants>) {
  const Comp = asChild ? Slot : 'button'
  const { isMobile, state } = useSidebar()

const button = (
    <Comp
      data-slot="sidebar-menu-button"
      data-sidebar="menu-button"
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
  )

if (!tooltip) {
    return button
  }

if (typeof tooltip === 'string') {
    tooltip = {
      children: tooltip,
    }
  }

return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        side="right"
        align="center"
        hidden={state !== 'collapsed' || isMobile}
        {...tooltip}
      />
    </Tooltip>
  )
}

function SidebarMenuAction({
  className,
  asChild = false,
  showOnHover = false,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  showOnHover?: boolean
}) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-menu-action"
      data-sidebar="menu-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        showOnHover &&
          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuBadge({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<'div'> & {
  showIcon?: boolean
}) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            '--skeleton-width': width,
          } as React.CSSProperties
        }
      />
    </div>
  )
}

function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSubItem({
  className,
  ...props
}: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn('group/menu-sub-item relative', className)}
      {...props}
    />
  )
}

function SidebarMenuSubButton({
  asChild = false,
  size = 'md',
  isActive = false,
  className,
  ...props
}: React.ComponentProps<'a'> & {
  asChild?: boolean
  size?: 'sm' | 'md'
  isActive?: boolean
}) {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      data-slot="sidebar-menu-sub-button"
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
        size === 'sm' && 'text-xs',
        size === 'md' && 'text-sm',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true"
import { cn } from '@/lib/utils'

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      className={cn('bg-accent animate-pulse rounded-md', className)}
      {...props}
    />
  )
}

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

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'

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

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
  const _values = React.useMemo(
    () =>
      Array.isArray(value)
        ? value
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
    [value, defaultValue, min, max],
  )

return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      className={cn(
        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
        className,
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={
          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
        }
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={
            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
          }
        />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
        />
      ))}
    </SliderPrimitive.Root>
  )
}

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

import { useTheme } from 'next-themes'
import { Toaster as Sonner, ToasterProps } from 'sonner'

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      className="toaster group"
      style={
        {
          '--normal-bg': 'var(--popover)',
          '--normal-text': 'var(--popover-foreground)',
          '--normal-border': 'var(--border)',
        } as React.CSSProperties
      }
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/spinner.tsx" isMerged="true"
import { Loader2Icon } from 'lucide-react'

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

function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn('size-4 animate-spin', className)}
      {...props}
    />
  )
}

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

import * as React from 'react'
import * as SwitchPrimitive from '@radix-ui/react-switch'

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

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={
          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
        }
      />
    </SwitchPrimitive.Root>
  )
}

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

import * as React from 'react'

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

function Table({ className, ...props }: React.ComponentProps<'table'>) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto"
    >
      <table
        data-slot="table"
        className={cn('w-full caption-bottom text-sm', className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
  return (
    <thead
      data-slot="table-header"
      className={cn('[&_tr]:border-b', className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
  return (
    <tbody
      data-slot="table-body"
      className={cn('[&_tr:last-child]:border-0', className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
        className,
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
        className,
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<'caption'>) {
  return (
    <caption
      data-slot="table-caption"
      className={cn('text-muted-foreground mt-4 text-sm', className)}
      {...props}
    />
  )
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[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'

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn('flex flex-col gap-2', className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
        className,
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn('flex-1 outline-none', className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

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

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" 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/ui/toaster.tsx" isMerged="true"
'use client'

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

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

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <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/toggle-group.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
import { type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { toggleVariants } from '@/components/ui/toggle'

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: 'default',
  variant: 'default',
})

function ToggleGroup({
  className,
  variant,
  size,
  children,
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
  VariantProps<typeof toggleVariants>) {
  return (
    <ToggleGroupPrimitive.Root
      data-slot="toggle-group"
      data-variant={variant}
      data-size={size}
      className={cn(
        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
        className,
      )}
      {...props}
    >
      <ToggleGroupContext.Provider value={{ variant, size }}>
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive.Root>
  )
}

function ToggleGroupItem({
  className,
  children,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
  VariantProps<typeof toggleVariants>) {
  const context = React.useContext(ToggleGroupContext)

return (
    <ToggleGroupPrimitive.Item
      data-slot="toggle-group-item"
      data-variant={context.variant || variant}
      data-size={context.size || size}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
        className,
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
}

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TogglePrimitive from '@radix-ui/react-toggle'
import { cva, type VariantProps } from 'class-variance-authority'

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

const toggleVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline:
          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-9 px-2 min-w-9',
        sm: 'h-8 px-1.5 min-w-8',
        lg: 'h-10 px-2.5 min-w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Toggle({
  className,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof TogglePrimitive.Root> &
  VariantProps<typeof toggleVariants>) {
  return (
    <TogglePrimitive.Root
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'

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

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
          className,
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx" isMerged="true"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts" isMerged="true"
'use client'

// Inspired by react-hot-toast library
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]typescript:file="hooks/use-mobile.ts" isMerged="true"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts" isMerged="true"
'use client'

// Inspired by react-hot-toast library
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

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)
}

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

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)

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

export { useToast, toast }
[V0_FILE]typescript:file="lib/animations.ts" isMerged="true"
// Animation variants for Framer Motion
export const fadeInUp = {
  initial: { opacity: 0, y: 60 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: 20 }
}

export const fadeInDown = {
  initial: { opacity: 0, y: -60 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -20 }
}

export const fadeInLeft = {
  initial: { opacity: 0, x: -60 },
  animate: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: -20 }
}

export const fadeInRight = {
  initial: { opacity: 0, x: 60 },
  animate: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: 20 }
}

export const fadeIn = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 }
}

export const scaleIn = {
  initial: { opacity: 0, scale: 0.8 },
  animate: { opacity: 1, scale: 1 },
  exit: { opacity: 0, scale: 0.9 }
}

export const scaleInBounce = {
  initial: { opacity: 0, scale: 0.5 },
  animate: { 
    opacity: 1, 
    scale: 1,
    transition: {
      type: "spring",
      stiffness: 260,
      damping: 20
    }
  },
  exit: { opacity: 0, scale: 0.8 }
}

export const slideInFromBottom = {
  initial: { y: "100%" },
  animate: { y: 0 },
  exit: { y: "100%" }
}

export const staggerContainer = {
  initial: {},
  animate: {
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.1
    }
  }
}

export const staggerContainerFast = {
  initial: {},
  animate: {
    transition: {
      staggerChildren: 0.05,
      delayChildren: 0.05
    }
  }
}

export const staggerContainerSlow = {
  initial: {},
  animate: {
    transition: {
      staggerChildren: 0.2,
      delayChildren: 0.2
    }
  }
}

export const rotateIn = {
  initial: { opacity: 0, rotate: -10, scale: 0.9 },
  animate: { opacity: 1, rotate: 0, scale: 1 },
  exit: { opacity: 0, rotate: 10, scale: 0.9 }
}

export const floatAnimation = {
  animate: {
    y: [0, -10, 0],
    transition: {
      duration: 3,
      repeat: Infinity,
      ease: "easeInOut"
    }
  }
}

export const pulseAnimation = {
  animate: {
    scale: [1, 1.05, 1],
    transition: {
      duration: 2,
      repeat: Infinity,
      ease: "easeInOut"
    }
  }
}

export const shimmer = {
  animate: {
    backgroundPosition: ["200% 0", "-200% 0"],
    transition: {
      duration: 8,
      repeat: Infinity,
      ease: "linear"
    }
  }
}

export const letterAnimation = {
  initial: { opacity: 0, y: 50 },
  animate: { opacity: 1, y: 0 }
}

export const textContainer = {
  initial: { opacity: 1 },
  animate: {
    opacity: 1,
    transition: {
      staggerChildren: 0.03,
      delayChildren: 0.04
    }
  }
}

export const pageTransition = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 },
  transition: { duration: 0.3 }
}

export const springTransition = {
  type: "spring",
  stiffness: 100,
  damping: 15
}

export const smoothTransition = {
  duration: 0.6,
  ease: [0.43, 0.13, 0.23, 0.96]
}

export const slowTransition = {
  duration: 0.8,
  ease: "easeOut"
}

// Counter animation helper
export const counterAnimation = (end: number, duration: number = 2) => ({
  initial: { count: 0 },
  animate: {
    count: end,
    transition: { duration, ease: "easeOut" }
  }
})

// Hover animations
export const hoverScale = {
  scale: 1.05,
  transition: { duration: 0.2 }
}

export const hoverLift = {
  y: -5,
  transition: { duration: 0.2 }
}

export const tapScale = {
  scale: 0.95
}

// Card hover effect
export const cardHover = {
  rest: { scale: 1, y: 0 },
  hover: { 
    scale: 1.02, 
    y: -8,
    transition: {
      duration: 0.3,
      ease: "easeOut"
    }
  }
}

// Image reveal effect
export const imageReveal = {
  initial: { clipPath: "inset(100% 0 0 0)" },
  animate: { 
    clipPath: "inset(0% 0 0 0)",
    transition: { duration: 0.8, ease: [0.43, 0.13, 0.23, 0.96] }
  }
}

// Parallax helper
export const parallaxY = (offset: number) => ({
  y: offset
})
[V0_FILE]typescript:file="lib/products-data.ts" isMerged="true"
export interface Product {
  id: string
  slug: string
  name: string
  category: "tricycle" | "moto" | "piece"
  subcategory?: string
  price: number
  oldPrice?: number
  description: string
  shortDescription: string
  specifications: {
    label: string
    value: string
  }[]
  features: string[]
  images: string[]
  inStock: boolean
  isBestSeller?: boolean
  isNew?: boolean
  rating: number
  reviews: number
}

export const products: Product[] = [
  // TRICYCLES
  {
    id: "tric-001",
    slug: "tricycle-cargo-200cc",
    name: "Tricycle Cargo 200cc",
    category: "tricycle",
    subcategory: "Cargo",
    price: 1850000,
    oldPrice: 2100000,
    description: "Le Tricycle Cargo 200cc est notre modèle phare pour le transport de marchandises. Conçu pour les professionnels du commerce et de la livraison au Sénégal, ce tricycle robuste peut transporter jusqu'à 800kg de charge utile. Son moteur 200cc offre un excellent équilibre entre puissance et économie de carburant. La benne arrière galvanisée résiste à la corrosion et aux chocs, idéale pour un usage intensif quotidien.",
    shortDescription: "Tricycle cargo robuste avec moteur 200cc et capacité de charge 800kg",
    specifications: [
      { label: "Moteur", value: "200cc, 4 temps, refroidi par air" },
      { label: "Puissance", value: "12 CV / 7500 tr/min" },
      { label: "Capacité réservoir", value: "15 litres" },
      { label: "Charge utile", value: "800 kg" },
      { label: "Dimensions benne", value: "150 x 100 x 40 cm" },
      { label: "Transmission", value: "5 vitesses + marche arrière" },
      { label: "Freins", value: "Tambour avant et arrière" },
      { label: "Poids à vide", value: "320 kg" },
      { label: "Vitesse max", value: "55 km/h" },
      { label: "Consommation", value: "4L/100km" }
    ],
    features: [
      "Moteur japonais haute performance",
      "Benne galvanisée anti-corrosion",
      "Suspension renforcée pour charges lourdes",
      "Démarrage électrique + kick",
      "Phares LED longue durée",
      "Garantie 2 ans / 20 000 km",
      "Service après-vente inclus"
    ],
    images: ["/images/tricycle-200cc.jpg"],
    inStock: true,
    isBestSeller: true,
    rating: 4.8,
    reviews: 127
  },
  {
    id: "tric-002",
    slug: "tricycle-cargo-250cc-xl",
    name: "Tricycle Cargo 250cc XL",
    category: "tricycle",
    subcategory: "Cargo XL",
    price: 2350000,
    oldPrice: 2600000,
    description: "Le Tricycle Cargo 250cc XL est notre modèle le plus puissant pour les charges lourdes et les longues distances. Équipé d'un moteur 250cc performant, il peut transporter jusqu'à 1200kg de marchandises. Idéal pour les entreprises de BTP, les grossistes et les transporteurs professionnels qui ont besoin d'une capacité de charge maximale.",
    shortDescription: "Tricycle cargo haute capacité 250cc pour charges jusqu'à 1200kg",
    specifications: [
      { label: "Moteur", value: "250cc, 4 temps, refroidi par eau" },
      { label: "Puissance", value: "16 CV / 7000 tr/min" },
      { label: "Capacité réservoir", value: "20 litres" },
      { label: "Charge utile", value: "1200 kg" },
      { label: "Dimensions benne", value: "180 x 120 x 50 cm" },
      { label: "Transmission", value: "5 vitesses + marche arrière" },
      { label: "Freins", value: "Disque avant, tambour arrière" },
      { label: "Poids à vide", value: "380 kg" },
      { label: "Vitesse max", value: "60 km/h" },
      { label: "Consommation", value: "5L/100km" }
    ],
    features: [
      "Moteur refroidi par eau pour usage intensif",
      "Benne XL renforcée double paroi",
      "Suspension pneumatique arrière",
      "Cabine semi-fermée optionnelle",
      "Système de freinage ABS",
      "Garantie 3 ans / 30 000 km",
      "Assistance dépannage 24h/24"
    ],
    images: ["/images/tricycle-250cc.jpg"],
    inStock: true,
    isNew: true,
    rating: 4.9,
    reviews: 84
  },
  {
    id: "tric-003",
    slug: "tricycle-passager-150cc",
    name: "Tricycle Passager 150cc",
    category: "tricycle",
    subcategory: "Passager",
    price: 1650000,
    description: "Le Tricycle Passager 150cc est conçu pour le transport de personnes en toute sécurité et confort. Pouvant accueillir jusqu'à 4 passagers, il est idéal pour les taxis urbains, les navettes et le transport familial. Sa cabine fermée protège les passagers des intempéries et de la poussière.",
    shortDescription: "Tricycle passager 4 places avec cabine fermée et confort optimal",
    specifications: [
      { label: "Moteur", value: "150cc, 4 temps, refroidi par air" },
      { label: "Puissance", value: "10 CV / 7500 tr/min" },
      { label: "Capacité réservoir", value: "12 litres" },
      { label: "Passagers", value: "4 personnes + conducteur" },
      { label: "Type cabine", value: "Fermée avec portes" },
      { label: "Transmission", value: "4 vitesses + marche arrière" },
      { label: "Freins", value: "Tambour avant et arrière" },
      { label: "Poids à vide", value: "290 kg" },
      { label: "Vitesse max", value: "50 km/h" },
      { label: "Consommation", value: "3.5L/100km" }
    ],
    features: [
      "Cabine fermée climatisable",
      "Sièges rembourrés confortables",
      "Vitres teintées anti-UV",
      "Système audio intégré",
      "Éclairage intérieur LED",
      "Garantie 2 ans / 20 000 km"
    ],
    images: ["/images/tricycle-200cc.jpg"],
    inStock: true,
    rating: 4.6,
    reviews: 63
  },
  // MOTOS
  {
    id: "moto-001",
    slug: "moto-sport-150cc",
    name: "Moto Sport 150cc",
    category: "moto",
    subcategory: "Sport",
    price: 750000,
    oldPrice: 850000,
    description: "La Moto Sport 150cc allie style et performance pour les amateurs de sensations. Son design agressif et aérodynamique cache un moteur nerveux de 150cc capable de vous emmener partout. Idéale pour la ville comme pour les escapades du week-end.",
    shortDescription: "Moto sportive 150cc au design agressif et performant",
    specifications: [
      { label: "Moteur", value: "150cc, 4 temps, SOHC" },
      { label: "Puissance", value: "14 CV / 8500 tr/min" },
      { label: "Capacité réservoir", value: "12 litres" },
      { label: "Transmission", value: "5 vitesses" },
      { label: "Freins", value: "Disque avant, tambour arrière" },
      { label: "Poids à vide", value: "125 kg" },
      { label: "Hauteur selle", value: "780 mm" },
      { label: "Vitesse max", value: "110 km/h" },
      { label: "Consommation", value: "2.5L/100km" }
    ],
    features: [
      "Carénage sport intégral",
      "Compteur digital multifonction",
      "Phares LED avec feux de jour",
      "Pneus tubeless haute adhérence",
      "Repose-pieds passager",
      "Garantie 1 an / 12 000 km"
    ],
    images: ["/images/motorcycle-product.jpg"],
    inStock: true,
    isBestSeller: true,
    rating: 4.7,
    reviews: 215
  },
  {
    id: "moto-002",
    slug: "moto-city-125cc",
    name: "Moto City 125cc",
    category: "moto",
    subcategory: "Urbaine",
    price: 550000,
    description: "La Moto City 125cc est votre compagne idéale pour naviguer dans le trafic urbain. Légère, maniable et économique, elle se faufile partout et consomme très peu. Son entretien simple et ses pièces disponibles en font un choix pratique et durable.",
    shortDescription: "Moto urbaine 125cc économique et maniable pour la ville",
    specifications: [
      { label: "Moteur", value: "125cc, 4 temps" },
      { label: "Puissance", value: "10 CV / 8000 tr/min" },
      { label: "Capacité réservoir", value: "10 litres" },
      { label: "Transmission", value: "4 vitesses" },
      { label: "Freins", value: "Tambour avant et arrière" },
      { label: "Poids à vide", value: "105 kg" },
      { label: "Hauteur selle", value: "760 mm" },
      { label: "Vitesse max", value: "95 km/h" },
      { label: "Consommation", value: "2L/100km" }
    ],
    features: [
      "Design classique intemporel",
      "Consommation ultra basse",
      "Démarrage électrique + kick",
      "Porte-bagages arrière",
      "Pièces détachées disponibles",
      "Garantie 1 an / 10 000 km"
    ],
    images: ["/images/motorcycle-product.jpg"],
    inStock: true,
    rating: 4.5,
    reviews: 342
  },
  {
    id: "moto-003",
    slug: "moto-trail-200cc",
    name: "Moto Trail 200cc",
    category: "moto",
    subcategory: "Trail",
    price: 950000,
    description: "La Moto Trail 200cc est conçue pour ceux qui aiment sortir des sentiers battus. Avec sa suspension longue débattement, ses pneus crampons et sa garde au sol élevée, elle affronte tous les terrains. Parfaite pour l'aventure et les zones rurales.",
    shortDescription: "Moto trail 200cc tout-terrain pour l'aventure",
    specifications: [
      { label: "Moteur", value: "200cc, 4 temps, refroidi par air" },
      { label: "Puissance", value: "16 CV / 7500 tr/min" },
      { label: "Capacité réservoir", value: "14 litres" },
      { label: "Transmission", value: "5 vitesses" },
      { label: "Freins", value: "Disque avant et arrière" },
      { label: "Poids à vide", value: "135 kg" },
      { label: "Hauteur selle", value: "850 mm" },
      { label: "Garde au sol", value: "250 mm" },
      { label: "Vitesse max", value: "120 km/h" },
      { label: "Consommation", value: "3L/100km" }
    ],
    features: [
      "Suspension long débattement",
      "Pneus tout-terrain",
      "Protection moteur incluse",
      "Guidon haut enduro",
      "Phares haute puissance",
      "Garantie 1 an / 12 000 km"
    ],
    images: ["/images/motorcycle-product.jpg"],
    inStock: true,
    isNew: true,
    rating: 4.8,
    reviews: 89
  },
  {
    id: "moto-004",
    slug: "scooter-125cc",
    name: "Scooter 125cc",
    category: "moto",
    subcategory: "Scooter",
    price: 650000,
    description: "Le Scooter 125cc offre le summum du confort urbain. Avec sa transmission automatique, son coffre spacieux et sa protection contre les intempéries, il rend vos trajets quotidiens agréables et sans effort.",
    shortDescription: "Scooter automatique 125cc confortable avec grand coffre",
    specifications: [
      { label: "Moteur", value: "125cc, 4 temps" },
      { label: "Puissance", value: "9 CV / 7500 tr/min" },
      { label: "Capacité réservoir", value: "8 litres" },
      { label: "Transmission", value: "CVT automatique" },
      { label: "Freins", value: "Disque avant, tambour arrière" },
      { label: "Poids à vide", value: "115 kg" },
      { label: "Coffre", value: "35 litres (2 casques)" },
      { label: "Vitesse max", value: "90 km/h" },
      { label: "Consommation", value: "2.2L/100km" }
    ],
    features: [
      "Transmission automatique CVT",
      "Grand coffre sous selle",
      "Tablier de protection",
      "Crochets pour sacs",
      "Prise USB intégrée",
      "Garantie 1 an / 10 000 km"
    ],
    images: ["/images/motorcycle-product.jpg"],
    inStock: true,
    rating: 4.6,
    reviews: 178
  },
  // PIECES DETACHEES
  {
    id: "piece-001",
    slug: "kit-chaine-renforcee",
    name: "Kit Chaîne Renforcée 428H",
    category: "piece",
    subcategory: "Transmission",
    price: 35000,
    description: "Kit chaîne complet renforcé comprenant chaîne 428H de qualité supérieure, pignon et couronne. Conçu pour résister aux conditions difficiles et offrir une durée de vie prolongée. Compatible avec la plupart des motos 125-150cc.",
    shortDescription: "Kit chaîne complet renforcé pour motos 125-150cc",
    specifications: [
      { label: "Type chaîne", value: "428H renforcée" },
      { label: "Nombre maillons", value: "130" },
      { label: "Pignon", value: "14 dents" },
      { label: "Couronne", value: "42 dents" },
      { label: "Matériau", value: "Acier traité" },
      { label: "Compatibilité", value: "125-150cc universelle" }
    ],
    features: [
      "Chaîne renforcée haute résistance",
      "Traitement anti-corrosion",
      "Joints toriques étanches",
      "Installation facile",
      "Durée de vie prolongée"
    ],
    images: ["/images/spare-parts.jpg"],
    inStock: true,
    isBestSeller: true,
    rating: 4.7,
    reviews: 456
  },
  {
    id: "piece-002",
    slug: "plaquettes-frein-avant",
    name: "Plaquettes de Frein Avant",
    category: "piece",
    subcategory: "Freinage",
    price: 12000,
    description: "Plaquettes de frein avant haute performance pour un freinage optimal et sécurisé. Composé de matériaux de friction de qualité pour une durée de vie prolongée et un freinage constant même à haute température.",
    shortDescription: "Plaquettes de frein avant haute performance",
    specifications: [
      { label: "Type", value: "Semi-métallique" },
      { label: "Compatibilité", value: "Universelle moto/tricycle" },
      { label: "Dimensions", value: "Standard" },
      { label: "Durée de vie", value: "15 000 - 20 000 km" }
    ],
    features: [
      "Freinage progressif et puissant",
      "Résistance haute température",
      "Usure uniforme",
      "Faible bruit de freinage"
    ],
    images: ["/images/spare-parts.jpg"],
    inStock: true,
    rating: 4.5,
    reviews: 289
  },
  {
    id: "piece-003",
    slug: "filtre-huile-moteur",
    name: "Filtre à Huile Moteur",
    category: "piece",
    subcategory: "Moteur",
    price: 5000,
    description: "Filtre à huile de qualité OEM pour une filtration optimale des impuretés et une protection maximale du moteur. Changement recommandé tous les 3000 km pour maintenir les performances du moteur.",
    shortDescription: "Filtre à huile qualité OEM",
    specifications: [
      { label: "Type", value: "Cartouche" },
      { label: "Compatibilité", value: "125-250cc" },
      { label: "Intervalle", value: "3000 km" },
      { label: "Filtration", value: "99.9%" }
    ],
    features: [
      "Filtration haute efficacité",
      "Joint d'étanchéité inclus",
      "Qualité équipement d'origine",
      "Installation facile"
    ],
    images: ["/images/spare-parts.jpg"],
    inStock: true,
    rating: 4.8,
    reviews: 567
  },
  {
    id: "piece-004",
    slug: "bougie-allumage-ngk",
    name: "Bougie d'Allumage NGK",
    category: "piece",
    subcategory: "Allumage",
    price: 3500,
    description: "Bougie d'allumage NGK originale pour un démarrage fiable et des performances optimales. L'électrode en nickel assure une étincelle puissante et constante pour une combustion efficace.",
    shortDescription: "Bougie NGK originale pour démarrage fiable",
    specifications: [
      { label: "Marque", value: "NGK" },
      { label: "Type", value: "Standard" },
      { label: "Écartement", value: "0.7-0.8mm" },
      { label: "Culot", value: "10mm" }
    ],
    features: [
      "Marque de confiance NGK",
      "Étincelle puissante",
      "Durée de vie 10 000 km",
      "Résistance aux dépôts"
    ],
    images: ["/images/spare-parts.jpg"],
    inStock: true,
    rating: 4.9,
    reviews: 892
  },
  {
    id: "piece-005",
    slug: "pneu-arriere-300-18",
    name: "Pneu Arrière 3.00-18",
    category: "piece",
    subcategory: "Pneumatiques",
    price: 28000,
    description: "Pneu arrière haute qualité dimension 3.00-18 pour motos. Composé de gomme durable offrant une excellente adhérence sur route sèche et mouillée. Profil optimisé pour un kilométrage élevé.",
    shortDescription: "Pneu arrière 3.00-18 haute adhérence",
    specifications: [
      { label: "Dimension", value: "3.00-18" },
      { label: "Type", value: "Route/Mixte" },
      { label: "Indice charge", value: "52P" },
      { label: "Chambre", value: "Avec chambre à air" }
    ],
    features: [
      "Gomme haute durabilité",
      "Adhérence optimale",
      "Évacuation d'eau efficace",
      "Kilométrage élevé"
    ],
    images: ["/images/spare-parts.jpg"],
    inStock: true,
    rating: 4.6,
    reviews: 234
  },
  {
    id: "piece-006",
    slug: "batterie-12v-7ah",
    name: "Batterie 12V 7Ah",
    category: "piece",
    subcategory: "Électrique",
    price: 25000,
    description: "Batterie 12V 7Ah sans entretien pour moto et tricycle. Technologie gel pour une durée de vie prolongée et une résistance aux vibrations. Idéale pour le démarrage électrique.",
    shortDescription: "Batterie 12V 7Ah sans entretien",
    specifications: [
      { label: "Tension", value: "12V" },
      { label: "Capacité", value: "7Ah" },
      { label: "Type", value: "Gel sans entretien" },
      { label: "Dimensions", value: "150x65x95mm" }
    ],
    features: [
      "Sans entretien",
      "Technologie gel",
      "Résistante aux vibrations",
      "Démarrage puissant"
    ],
    images: ["/images/spare-parts.jpg"],
    inStock: true,
    rating: 4.4,
    reviews: 156
  },
  {
    id: "piece-007",
    slug: "amortisseur-arriere",
    name: "Amortisseur Arrière Renforcé",
    category: "piece",
    subcategory: "Suspension",
    price: 45000,
    description: "Amortisseur arrière renforcé pour moto et tricycle. Réglable en précharge pour s'adapter à votre charge et votre style de conduite. Offre un confort optimal et une tenue de route améliorée.",
    shortDescription: "Amortisseur arrière réglable renforcé",
    specifications: [
      { label: "Type", value: "Hydraulique" },
      { label: "Réglage", value: "Précharge 5 positions" },
      { label: "Longueur", value: "320mm (standard)" },
      { label: "Ressort", value: "Renforcé" }
    ],
    features: [
      "Réglage précharge",
      "Huile hydraulique haute qualité",
      "Ressort renforcé",
      "Installation directe"
    ],
    images: ["/images/spare-parts.jpg"],
    inStock: true,
    isNew: true,
    rating: 4.7,
    reviews: 78
  },
  {
    id: "piece-008",
    slug: "kit-carburateur-complet",
    name: "Kit Carburateur Complet",
    category: "piece",
    subcategory: "Alimentation",
    price: 55000,
    description: "Kit carburateur complet avec tous les joints et gicleurs. Remplace le carburateur d'origine pour retrouver les performances optimales de votre moteur. Inclut les instructions de montage.",
    shortDescription: "Kit carburateur complet avec joints et gicleurs",
    specifications: [
      { label: "Diamètre", value: "26mm (standard)" },
      { label: "Type", value: "À dépression" },
      { label: "Contenu", value: "Carbu + joints + gicleurs" },
      { label: "Compatibilité", value: "125-150cc" }
    ],
    features: [
      "Carburateur complet",
      "Tous joints inclus",
      "Jeu de gicleurs",
      "Instructions incluses"
    ],
    images: ["/images/spare-parts.jpg"],
    inStock: true,
    rating: 4.5,
    reviews: 112
  }
]

export const categories = [
  { id: "all", name: "Tous les produits", count: products.length },
  { id: "tricycle", name: "Tricycles", count: products.filter(p => p.category === "tricycle").length },
  { id: "moto", name: "Motos", count: products.filter(p => p.category === "moto").length },
  { id: "piece", name: "Pièces détachées", count: products.filter(p => p.category === "piece").length }
]

export const subcategories = {
  tricycle: ["Cargo", "Cargo XL", "Passager"],
  moto: ["Sport", "Urbaine", "Trail", "Scooter"],
  piece: ["Transmission", "Freinage", "Moteur", "Allumage", "Pneumatiques", "Électrique", "Suspension", "Alimentation"]
}

export function getProductBySlug(slug: string): Product | undefined {
  return products.find(p => p.slug === slug)
}

export function getProductsByCategory(category: string): Product[] {
  if (category === "all") return products
  return products.filter(p => p.category === category)
}

export function getBestSellers(): Product[] {
  return products.filter(p => p.isBestSeller)
}

export function getNewProducts(): Product[] {
  return products.filter(p => p.isNew)
}

export function formatPrice(price: number): string {
  return new Intl.NumberFormat("fr-SN", {
    style: "decimal",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(price) + " FCFA"
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true"
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )
}
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true"
import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

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

// Skip Supabase auth if environment variables are not configured
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

if (!supabaseUrl || !supabaseAnonKey) {
    // Supabase not configured, skip auth middleware
    return supabaseResponse
  }

// With Fluid compute, don't put this client in a global environment
  // variable. Always create a new one on each request.
  const supabase = createServerClient(
    supabaseUrl,
    supabaseAnonKey,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value),
          )
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options),
          )
        },
      },
    },
  )

// Do not run code between createServerClient and
  // supabase.auth.getUser(). A simple mistake could make it very hard to debug
  // issues with users being randomly logged out.

// IMPORTANT: If you remove getUser() and you use server-side rendering
  // with the Supabase client, your users may be randomly logged out.
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (
    // if the user is not logged in and the app path, in this case, /protected, is accessed, redirect to the login page
    request.nextUrl.pathname.startsWith('/protected') &&
    !user
  ) {
    // no user, potentially respond by redirecting the user to the login page
    const url = request.nextUrl.clone()
    url.pathname = '/auth/login'
    return NextResponse.redirect(url)
  }

// IMPORTANT: You *must* return the supabaseResponse object as it is.
  // If you're creating a new response object with NextResponse.next() make sure to:
  // 1. Pass the request in it, like so:
  //    const myNewResponse = NextResponse.next({ request })
  // 2. Copy over the cookies, like so:
  //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
  // 3. Change the myNewResponse object to fit your needs, but avoid changing
  //    the cookies!
  // 4. Finally:
  //    return myNewResponse
  // If this is not done, you may be causing the browser and server to go out
  // of sync and terminate the user's session prematurely!

return supabaseResponse
}
[V0_FILE]typescript:file="lib/supabase/products.ts" isMerged="true"
import { createClient } from "@/lib/supabase/client"

export interface Product {
  id: string
  slug: string
  name: string
  category: "tricycle" | "moto" | "piece"
  subcategory?: string
  price: number
  old_price?: number
  description: string
  short_description: string
  specifications: Record<string, string>
  features: string[]
  images: string[]
  in_stock: boolean
  is_best_seller?: boolean
  is_new?: boolean
  rating: number
  reviews: number
  created_at: string
  updated_at: string
}

export interface Order {
  id: string
  order_number: string
  customer_name: string
  customer_phone: string
  customer_email?: string
  customer_address: string
  customer_city: string
  product_id?: string
  product_name: string
  product_slug: string
  quantity: number
  unit_price: number
  total_price: number
  status: "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled"
  notes?: string
  created_at: string
  updated_at: string
}

// Product functions
export async function getProducts() {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("products")
    .select("*")
    .order("created_at", { ascending: false })

if (error) {
    console.error("Error fetching products:", error)
    return []
  }
  return data as Product[]
}

export async function getProductBySlug(slug: string) {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("products")
    .select("*")
    .eq("slug", slug)
    .single()

if (error) {
    console.error("Error fetching product:", error)
    return null
  }
  return data as Product
}

export async function getProductsByCategory(category: string) {
  const supabase = createClient()
  
  if (category === "all") {
    return getProducts()
  }

const { data, error } = await supabase
    .from("products")
    .select("*")
    .eq("category", category)
    .order("created_at", { ascending: false })

if (error) {
    console.error("Error fetching products by category:", error)
    return []
  }
  return data as Product[]
}

export async function getBestSellers() {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("products")
    .select("*")
    .eq("is_best_seller", true)
    .limit(6)

if (error) {
    console.error("Error fetching best sellers:", error)
    return []
  }
  return data as Product[]
}

export async function getNewProducts() {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("products")
    .select("*")
    .eq("is_new", true)
    .limit(6)

if (error) {
    console.error("Error fetching new products:", error)
    return []
  }
  return data as Product[]
}

export async function createProduct(product: Omit<Product, "id" | "created_at" | "updated_at">) {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("products")
    .insert(product)
    .select()
    .single()

if (error) {
    console.error("Error creating product:", error)
    return null
  }
  return data as Product
}

export async function updateProduct(id: string, updates: Partial<Product>) {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("products")
    .update(updates)
    .eq("id", id)
    .select()
    .single()

if (error) {
    console.error("Error updating product:", error)
    return null
  }
  return data as Product
}

export async function deleteProduct(id: string) {
  const supabase = createClient()
  const { error } = await supabase
    .from("products")
    .delete()
    .eq("id", id)

if (error) {
    console.error("Error deleting product:", error)
    return false
  }
  return true
}

// Order functions
export async function getOrders() {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("orders")
    .select("*")
    .order("created_at", { ascending: false })

if (error) {
    console.error("Error fetching orders:", error)
    return []
  }
  return data as Order[]
}

export async function getRecentOrders(limit = 5) {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("orders")
    .select("*")
    .order("created_at", { ascending: false })
    .limit(limit)

if (error) {
    console.error("Error fetching recent orders:", error)
    return []
  }
  return data as Order[]
}

export async function getOrdersByStatus(status: string) {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("orders")
    .select("*")
    .eq("status", status)
    .order("created_at", { ascending: false })

if (error) {
    console.error("Error fetching orders by status:", error)
    return []
  }
  return data as Order[]
}

export async function createOrder(order: Omit<Order, "id" | "order_number" | "created_at" | "updated_at">) {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("orders")
    .insert(order)
    .select()
    .single()

if (error) {
    console.error("Error creating order:", error)
    return null
  }
  return data as Order
}

export async function updateOrderStatus(id: string, status: Order["status"]) {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("orders")
    .update({ status })
    .eq("id", id)
    .select()
    .single()

if (error) {
    console.error("Error updating order status:", error)
    return null
  }
  return data as Order
}

// Statistics functions
export async function getProductsCount() {
  const supabase = createClient()
  const { count, error } = await supabase
    .from("products")
    .select("*", { count: "exact", head: true })

if (error) {
    console.error("Error fetching products count:", error)
    return 0
  }
  return count || 0
}

export async function getOrdersCount() {
  const supabase = createClient()
  const { count, error } = await supabase
    .from("orders")
    .select("*", { count: "exact", head: true })

if (error) {
    console.error("Error fetching orders count:", error)
    return 0
  }
  return count || 0
}

export async function getTotalRevenue() {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("orders")
    .select("total_price")
    .in("status", ["confirmed", "processing", "shipped", "delivered"])

if (error) {
    console.error("Error fetching total revenue:", error)
    return 0
  }
  return data.reduce((sum, order) => sum + order.total_price, 0)
}

export async function getOrdersStats() {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("orders")
    .select("status")

if (error) {
    console.error("Error fetching orders stats:", error)
    return {
      pending: 0,
      confirmed: 0,
      processing: 0,
      shipped: 0,
      delivered: 0,
      cancelled: 0,
    }
  }

const stats = {
    pending: 0,
    confirmed: 0,
    processing: 0,
    shipped: 0,
    delivered: 0,
    cancelled: 0,
  }

data.forEach((order) => {
    if (order.status in stats) {
      stats[order.status as keyof typeof stats]++
    }
  })

return stats
}

export function formatPrice(price: number): string {
  return new Intl.NumberFormat("fr-SN", {
    style: "decimal",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(price) + " FCFA"
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true"
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

/**
 * Especially important if using Fluid compute: Don't put this client in a
 * global variable. Always create a new client within each function when using
 * it.
 */
export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options),
            )
          } catch {
            // The "setAll" method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    },
  )
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { updateSession } from '@/lib/supabase/middleware'
import { type NextRequest } from 'next/server'

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

export const config = {
  matcher: [
    /*
     * Match all request paths except:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
     * Feel free to modify this pattern to include more paths.
     */
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/is-prop-valid": "latest",
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@supabase/ssr": "latest",
    "@supabase/supabase-js": "latest",
    "@vercel/analytics": "latest",
    "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",
    "framer-motion": "latest",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "latest",
    "sonner": "^1.7.4",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76",
    "@vercel/blob": "2.0.1",
    "jspdf": "4.2.1",
    "jspdf-autotable": "5.0.7"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]xml:file="public/icon.svg" isMerged="true"
<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    @media (prefers-color-scheme: light) {
      .background { fill: black; }
      .foreground { fill: white; }
    }
    @media (prefers-color-scheme: dark) {
      .background { fill: white; }
      .foreground { fill: black; }
    }
  </style>
  <g clip-path="url(#clip0_7960_43945)">
    <rect class="background" width="180" height="180" rx="37" />
    <g style="transform: scale(95%); transform-origin: center">
      <path class="foreground"
        d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
      <path class="foreground"
        d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
    </g>
  </g>
  <defs>
    <clipPath id="clip0_7960_43945">
      <rect width="180" height="180" fill="white" />
    </clipPath>
  </defs>
</svg>
[V0_FILE]xml:file="public/placeholder-logo.svg" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
[V0_FILE]xml:file="public/placeholder.svg" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
[V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true"
-- Create products table
CREATE TABLE IF NOT EXISTS public.products (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  slug TEXT UNIQUE NOT NULL,
  name TEXT NOT NULL,
  category TEXT NOT NULL CHECK (category IN ('tricycle', 'moto', 'piece')),
  subcategory TEXT,
  price INTEGER NOT NULL,
  old_price INTEGER,
  description TEXT NOT NULL,
  short_description TEXT NOT NULL,
  specifications JSONB DEFAULT '[]'::jsonb,
  features TEXT[] DEFAULT '{}',
  images TEXT[] DEFAULT '{}',
  in_stock BOOLEAN DEFAULT true,
  is_best_seller BOOLEAN DEFAULT false,
  is_new BOOLEAN DEFAULT false,
  rating DECIMAL(2,1) DEFAULT 0,
  reviews INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create orders table
CREATE TABLE IF NOT EXISTS public.orders (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  order_number TEXT UNIQUE NOT NULL,
  customer_name TEXT NOT NULL,
  customer_phone TEXT NOT NULL,
  customer_email TEXT,
  customer_address TEXT NOT NULL,
  customer_city TEXT NOT NULL,
  product_id UUID REFERENCES public.products(id) ON DELETE SET NULL,
  product_name TEXT NOT NULL,
  product_slug TEXT NOT NULL,
  quantity INTEGER NOT NULL DEFAULT 1,
  unit_price INTEGER NOT NULL,
  total_price INTEGER NOT NULL,
  status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'confirmed', 'processing', 'shipped', 'delivered', 'cancelled')),
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create admin_users table for role management
CREATE TABLE IF NOT EXISTS public.admin_users (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  email TEXT NOT NULL,
  role TEXT DEFAULT 'admin' CHECK (role IN ('admin', 'super_admin')),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS on all tables
ALTER TABLE public.products ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.orders ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.admin_users ENABLE ROW LEVEL SECURITY;

-- Products policies (public read, admin write)
CREATE POLICY "Anyone can view products" ON public.products FOR SELECT USING (true);
CREATE POLICY "Admins can insert products" ON public.products FOR INSERT WITH CHECK (
  EXISTS (SELECT 1 FROM public.admin_users WHERE id = auth.uid())
);
CREATE POLICY "Admins can update products" ON public.products FOR UPDATE USING (
  EXISTS (SELECT 1 FROM public.admin_users WHERE id = auth.uid())
);
CREATE POLICY "Admins can delete products" ON public.products FOR DELETE USING (
  EXISTS (SELECT 1 FROM public.admin_users WHERE id = auth.uid())
);

-- Orders policies (admin only)
CREATE POLICY "Admins can view orders" ON public.orders FOR SELECT USING (
  EXISTS (SELECT 1 FROM public.admin_users WHERE id = auth.uid())
);
CREATE POLICY "Anyone can create orders" ON public.orders FOR INSERT WITH CHECK (true);
CREATE POLICY "Admins can update orders" ON public.orders FOR UPDATE USING (
  EXISTS (SELECT 1 FROM public.admin_users WHERE id = auth.uid())
);
CREATE POLICY "Admins can delete orders" ON public.orders FOR DELETE USING (
  EXISTS (SELECT 1 FROM public.admin_users WHERE id = auth.uid())
);

-- Admin users policies
CREATE POLICY "Admins can view admin_users" ON public.admin_users FOR SELECT USING (
  auth.uid() = id OR EXISTS (SELECT 1 FROM public.admin_users WHERE id = auth.uid() AND role = 'super_admin')
);
CREATE POLICY "Super admins can manage admin_users" ON public.admin_users FOR ALL USING (
  EXISTS (SELECT 1 FROM public.admin_users WHERE id = auth.uid() AND role = 'super_admin')
);

-- Create function to update updated_at timestamp
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create triggers for updated_at
DROP TRIGGER IF EXISTS update_products_updated_at ON public.products;
CREATE TRIGGER update_products_updated_at
  BEFORE UPDATE ON public.products
  FOR EACH ROW
  EXECUTE FUNCTION update_updated_at_column();

DROP TRIGGER IF EXISTS update_orders_updated_at ON public.orders;
CREATE TRIGGER update_orders_updated_at
  BEFORE UPDATE ON public.orders
  FOR EACH ROW
  EXECUTE FUNCTION update_updated_at_column();

-- Create function to generate order number
CREATE OR REPLACE FUNCTION generate_order_number()
RETURNS TRIGGER AS $$
BEGIN
  NEW.order_number = 'YBK-' || TO_CHAR(NOW(), 'YYYYMMDD') || '-' || LPAD(FLOOR(RANDOM() * 10000)::TEXT, 4, '0');
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger for order number generation
DROP TRIGGER IF EXISTS generate_order_number_trigger ON public.orders;
CREATE TRIGGER generate_order_number_trigger
  BEFORE INSERT ON public.orders
  FOR EACH ROW
  EXECUTE FUNCTION generate_order_number();

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_products_category ON public.products(category);
CREATE INDEX IF NOT EXISTS idx_products_slug ON public.products(slug);
CREATE INDEX IF NOT EXISTS idx_orders_status ON public.orders(status);
CREATE INDEX IF NOT EXISTS idx_orders_created_at ON public.orders(created_at DESC);
CREATE INDEX IF NOT EXISTS idx_orders_customer_phone ON public.orders(customer_phone);
[V0_FILE]sql:file="scripts/002_seed_products.sql" isMerged="true"
-- Seed products data
INSERT INTO public.products (slug, name, category, subcategory, price, old_price, description, short_description, specifications, features, images, in_stock, is_best_seller, is_new, rating, reviews) VALUES
-- TRICYCLES
('tricycle-cargo-200cc', 'Tricycle Cargo 200cc', 'tricycle', 'Cargo', 1850000, 2100000, 
 'Le Tricycle Cargo 200cc est notre modèle phare pour le transport de marchandises. Conçu pour les professionnels du commerce et de la livraison au Sénégal, ce tricycle robuste peut transporter jusqu''à 800kg de charge utile.',
 'Tricycle cargo robuste avec moteur 200cc et capacité de charge 800kg',
 '[{"label": "Moteur", "value": "200cc, 4 temps, refroidi par air"}, {"label": "Puissance", "value": "12 CV / 7500 tr/min"}, {"label": "Capacité réservoir", "value": "15 litres"}, {"label": "Charge utile", "value": "800 kg"}, {"label": "Dimensions benne", "value": "150 x 100 x 40 cm"}, {"label": "Transmission", "value": "5 vitesses + marche arrière"}, {"label": "Freins", "value": "Tambour avant et arrière"}, {"label": "Poids à vide", "value": "320 kg"}, {"label": "Vitesse max", "value": "55 km/h"}, {"label": "Consommation", "value": "4L/100km"}]',
 ARRAY['Moteur japonais haute performance', 'Benne galvanisée anti-corrosion', 'Suspension renforcée pour charges lourdes', 'Démarrage électrique + kick', 'Phares LED longue durée', 'Garantie 2 ans / 20 000 km', 'Service après-vente inclus'],
 ARRAY['/images/tricycle-hero.jpg'], true, true, false, 4.8, 127),

('tricycle-cargo-250cc-xl', 'Tricycle Cargo 250cc XL', 'tricycle', 'Cargo XL', 2350000, 2600000,
 'Le Tricycle Cargo 250cc XL est notre modèle le plus puissant pour les charges lourdes et les longues distances. Équipé d''un moteur 250cc performant, il peut transporter jusqu''à 1200kg de marchandises.',
 'Tricycle cargo haute capacité 250cc pour charges jusqu''à 1200kg',
 '[{"label": "Moteur", "value": "250cc, 4 temps, refroidi par eau"}, {"label": "Puissance", "value": "16 CV / 7000 tr/min"}, {"label": "Capacité réservoir", "value": "20 litres"}, {"label": "Charge utile", "value": "1200 kg"}, {"label": "Dimensions benne", "value": "180 x 120 x 50 cm"}, {"label": "Transmission", "value": "5 vitesses + marche arrière"}, {"label": "Freins", "value": "Disque avant, tambour arrière"}, {"label": "Poids à vide", "value": "380 kg"}, {"label": "Vitesse max", "value": "60 km/h"}, {"label": "Consommation", "value": "5L/100km"}]',
 ARRAY['Moteur refroidi par eau pour usage intensif', 'Benne XL renforcée double paroi', 'Suspension pneumatique arrière', 'Cabine semi-fermée optionnelle', 'Système de freinage ABS', 'Garantie 3 ans / 30 000 km', 'Assistance dépannage 24h/24'],
 ARRAY['/images/tricycle-hero.jpg'], true, false, true, 4.9, 84),

('tricycle-passager-150cc', 'Tricycle Passager 150cc', 'tricycle', 'Passager', 1650000, NULL,
 'Le Tricycle Passager 150cc est conçu pour le transport de personnes en toute sécurité et confort. Pouvant accueillir jusqu''à 4 passagers, il est idéal pour les taxis urbains.',
 'Tricycle passager 4 places avec cabine fermée et confort optimal',
 '[{"label": "Moteur", "value": "150cc, 4 temps, refroidi par air"}, {"label": "Puissance", "value": "10 CV / 7500 tr/min"}, {"label": "Capacité réservoir", "value": "12 litres"}, {"label": "Passagers", "value": "4 personnes + conducteur"}, {"label": "Type cabine", "value": "Fermée avec portes"}, {"label": "Transmission", "value": "4 vitesses + marche arrière"}, {"label": "Freins", "value": "Tambour avant et arrière"}, {"label": "Poids à vide", "value": "290 kg"}, {"label": "Vitesse max", "value": "50 km/h"}, {"label": "Consommation", "value": "3.5L/100km"}]',
 ARRAY['Cabine fermée climatisable', 'Sièges rembourrés confortables', 'Vitres teintées anti-UV', 'Système audio intégré', 'Éclairage intérieur LED', 'Garantie 2 ans / 20 000 km'],
 ARRAY['/images/tricycle-hero.jpg'], true, false, false, 4.6, 63),

-- MOTOS
('moto-sport-150cc', 'Moto Sport 150cc', 'moto', 'Sport', 750000, 850000,
 'La Moto Sport 150cc allie style et performance pour les amateurs de sensations. Son design agressif et aérodynamique cache un moteur nerveux de 150cc.',
 'Moto sportive 150cc au design agressif et performant',
 '[{"label": "Moteur", "value": "150cc, 4 temps, SOHC"}, {"label": "Puissance", "value": "14 CV / 8500 tr/min"}, {"label": "Capacité réservoir", "value": "12 litres"}, {"label": "Transmission", "value": "5 vitesses"}, {"label": "Freins", "value": "Disque avant, tambour arrière"}, {"label": "Poids à vide", "value": "125 kg"}, {"label": "Hauteur selle", "value": "780 mm"}, {"label": "Vitesse max", "value": "110 km/h"}, {"label": "Consommation", "value": "2.5L/100km"}]',
 ARRAY['Carénage sport intégral', 'Compteur digital multifonction', 'Phares LED avec feux de jour', 'Pneus tubeless haute adhérence', 'Repose-pieds passager', 'Garantie 1 an / 12 000 km'],
 ARRAY['/images/motorcycle-product.jpg'], true, true, false, 4.7, 215),

('moto-city-125cc', 'Moto City 125cc', 'moto', 'Urbaine', 550000, NULL,
 'La Moto City 125cc est votre compagne idéale pour naviguer dans le trafic urbain. Légère, maniable et économique.',
 'Moto urbaine 125cc économique et maniable pour la ville',
 '[{"label": "Moteur", "value": "125cc, 4 temps"}, {"label": "Puissance", "value": "10 CV / 8000 tr/min"}, {"label": "Capacité réservoir", "value": "10 litres"}, {"label": "Transmission", "value": "4 vitesses"}, {"label": "Freins", "value": "Tambour avant et arrière"}, {"label": "Poids à vide", "value": "105 kg"}, {"label": "Hauteur selle", "value": "760 mm"}, {"label": "Vitesse max", "value": "95 km/h"}, {"label": "Consommation", "value": "2L/100km"}]',
 ARRAY['Design classique intemporel', 'Consommation ultra basse', 'Démarrage électrique + kick', 'Porte-bagages arrière', 'Pièces détachées disponibles', 'Garantie 1 an / 10 000 km'],
 ARRAY['/images/motorcycle-product.jpg'], true, false, false, 4.5, 342),

('moto-trail-200cc', 'Moto Trail 200cc', 'moto', 'Trail', 950000, NULL,
 'La Moto Trail 200cc est conçue pour ceux qui aiment sortir des sentiers battus.',
 'Moto trail 200cc tout-terrain pour l''aventure',
 '[{"label": "Moteur", "value": "200cc, 4 temps, refroidi par air"}, {"label": "Puissance", "value": "16 CV / 7500 tr/min"}, {"label": "Capacité réservoir", "value": "14 litres"}, {"label": "Transmission", "value": "5 vitesses"}, {"label": "Freins", "value": "Disque avant et arrière"}, {"label": "Poids à vide", "value": "135 kg"}, {"label": "Hauteur selle", "value": "850 mm"}, {"label": "Garde au sol", "value": "250 mm"}, {"label": "Vitesse max", "value": "120 km/h"}, {"label": "Consommation", "value": "3L/100km"}]',
 ARRAY['Suspension long débattement', 'Pneus tout-terrain', 'Protection moteur incluse', 'Guidon haut enduro', 'Phares haute puissance', 'Garantie 1 an / 12 000 km'],
 ARRAY['/images/motorcycle-product.jpg'], true, false, true, 4.8, 89),

('scooter-125cc', 'Scooter 125cc', 'moto', 'Scooter', 650000, NULL,
 'Le Scooter 125cc offre le summum du confort urbain avec sa transmission automatique.',
 'Scooter automatique 125cc confortable avec grand coffre',
 '[{"label": "Moteur", "value": "125cc, 4 temps"}, {"label": "Puissance", "value": "9 CV / 7500 tr/min"}, {"label": "Capacité réservoir", "value": "8 litres"}, {"label": "Transmission", "value": "CVT automatique"}, {"label": "Freins", "value": "Disque avant, tambour arrière"}, {"label": "Poids à vide", "value": "115 kg"}, {"label": "Coffre", "value": "35 litres (2 casques)"}, {"label": "Vitesse max", "value": "90 km/h"}, {"label": "Consommation", "value": "2.2L/100km"}]',
 ARRAY['Transmission automatique CVT', 'Grand coffre sous selle', 'Tablier de protection', 'Crochets pour sacs', 'Prise USB intégrée', 'Garantie 1 an / 10 000 km'],
 ARRAY['/images/motorcycle-product.jpg'], true, false, false, 4.6, 178),

-- PIECES DETACHEES
('kit-chaine-renforcee', 'Kit Chaîne Renforcée 428H', 'piece', 'Transmission', 35000, NULL,
 'Kit chaîne complet renforcé comprenant chaîne 428H de qualité supérieure, pignon et couronne.',
 'Kit chaîne complet renforcé pour motos 125-150cc',
 '[{"label": "Type chaîne", "value": "428H renforcée"}, {"label": "Nombre maillons", "value": "130"}, {"label": "Pignon", "value": "14 dents"}, {"label": "Couronne", "value": "42 dents"}, {"label": "Matériau", "value": "Acier traité"}, {"label": "Compatibilité", "value": "125-150cc universelle"}]',
 ARRAY['Chaîne renforcée haute résistance', 'Traitement anti-corrosion', 'Joints toriques étanches', 'Installation facile', 'Durée de vie prolongée'],
 ARRAY['/images/spare-parts.jpg'], true, true, false, 4.7, 456),

('plaquettes-frein-avant', 'Plaquettes de Frein Avant', 'piece', 'Freinage', 12000, NULL,
 'Plaquettes de frein avant haute performance pour un freinage optimal et sécurisé.',
 'Plaquettes de frein avant haute performance',
 '[{"label": "Type", "value": "Semi-métallique"}, {"label": "Compatibilité", "value": "Universelle moto/tricycle"}, {"label": "Dimensions", "value": "Standard"}, {"label": "Durée de vie", "value": "15 000 - 20 000 km"}]',
 ARRAY['Freinage progressif et puissant', 'Résistance haute température', 'Usure uniforme', 'Faible bruit de freinage'],
 ARRAY['/images/spare-parts.jpg'], true, false, false, 4.5, 289),

('filtre-huile-moteur', 'Filtre à Huile Moteur', 'piece', 'Moteur', 5000, NULL,
 'Filtre à huile de qualité OEM pour une filtration optimale des impuretés.',
 'Filtre à huile qualité OEM',
 '[{"label": "Type", "value": "Cartouche"}, {"label": "Compatibilité", "value": "125-250cc"}, {"label": "Intervalle", "value": "3000 km"}, {"label": "Filtration", "value": "99.9%"}]',
 ARRAY['Filtration haute efficacité', 'Joint d''étanchéité inclus', 'Qualité équipement d''origine', 'Installation facile'],
 ARRAY['/images/spare-parts.jpg'], true, false, false, 4.8, 567),

('bougie-allumage-ngk', 'Bougie d''Allumage NGK', 'piece', 'Allumage', 3500, NULL,
 'Bougie d''allumage NGK originale pour un démarrage fiable et des performances optimales.',
 'Bougie NGK originale pour démarrage fiable',
 '[{"label": "Marque", "value": "NGK"}, {"label": "Type", "value": "Standard"}, {"label": "Écartement", "value": "0.7-0.8mm"}, {"label": "Culot", "value": "10mm"}]',
 ARRAY['Marque de confiance NGK', 'Étincelle puissante', 'Durée de vie 10 000 km', 'Résistance aux dépôts'],
 ARRAY['/images/spare-parts.jpg'], true, false, false, 4.9, 892),

('pneu-arriere-300-18', 'Pneu Arrière 3.00-18', 'piece', 'Pneumatiques', 28000, NULL,
 'Pneu arrière haute qualité dimension 3.00-18 pour motos.',
 'Pneu arrière 3.00-18 haute adhérence',
 '[{"label": "Dimension", "value": "3.00-18"}, {"label": "Type", "value": "Route/Mixte"}, {"label": "Indice charge", "value": "52P"}, {"label": "Chambre", "value": "Avec chambre à air"}]',
 ARRAY['Gomme haute durabilité', 'Adhérence optimale', 'Évacuation d''eau efficace', 'Kilométrage élevé'],
 ARRAY['/images/spare-parts.jpg'], true, false, false, 4.6, 234),

('batterie-12v-7ah', 'Batterie 12V 7Ah', 'piece', 'Électrique', 25000, NULL,
 'Batterie 12V 7Ah sans entretien pour moto et tricycle.',
 'Batterie 12V 7Ah sans entretien',
 '[{"label": "Tension", "value": "12V"}, {"label": "Capacité", "value": "7Ah"}, {"label": "Type", "value": "Gel sans entretien"}, {"label": "Dimensions", "value": "150x65x95mm"}]',
 ARRAY['Sans entretien', 'Technologie gel', 'Résistante aux vibrations', 'Démarrage puissant'],
 ARRAY['/images/spare-parts.jpg'], true, false, false, 4.4, 156),

('amortisseur-arriere', 'Amortisseur Arrière Renforcé', 'piece', 'Suspension', 45000, NULL,
 'Amortisseur arrière renforcé pour moto et tricycle.',
 'Amortisseur arrière réglable renforcé',
 '[{"label": "Type", "value": "Hydraulique"}, {"label": "Réglage", "value": "Précharge 5 positions"}, {"label": "Longueur", "value": "320mm (standard)"}, {"label": "Ressort", "value": "Renforcé"}]',
 ARRAY['Réglage précharge', 'Huile hydraulique haute qualité', 'Ressort renforcé', 'Installation directe'],
 ARRAY['/images/spare-parts.jpg'], true, false, true, 4.7, 78),

('kit-carburateur-complet', 'Kit Carburateur Complet', 'piece', 'Alimentation', 55000, NULL,
 'Kit carburateur complet avec tous les joints et gicleurs.',
 'Kit carburateur complet avec joints et gicleurs',
 '[{"label": "Diamètre", "value": "26mm (standard)"}, {"label": "Type", "value": "À dépression"}, {"label": "Contenu", "value": "Carbu + joints + gicleurs"}, {"label": "Compatibilité", "value": "125-150cc"}]',
 ARRAY['Carburateur complet', 'Tous joints inclus', 'Jeu de gicleurs', 'Instructions incluses'],
 ARRAY['/images/spare-parts.jpg'], true, false, false, 4.5, 112)
ON CONFLICT (slug) DO NOTHING;
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]jpg:file="public/images/tricycle-300cc.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/tricycle-300cc-oUYsB911OqNM3DfoQwojDGADDUTPQG.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/moto-150cc.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/moto-150cc-q8vofVJ7lR0DXWJpoI7JvsIvBUqn5b.jpg" isMerged="true"
[V0_FILE]sql:file="scripts/003_reset_products_catalog.sql" isMerged="true"
-- Reset products table and insert Hasilaza catalog products
-- This script deletes all existing products and inserts only the 4 products from the PDF catalog

-- Delete all existing products
DELETE FROM public.products;

-- Insert products from Hasilaza catalog
INSERT INTO public.products (name, slug, description, short_description, price, category, subcategory, images, features, specifications, in_stock, is_best_seller, is_new, rating, reviews)
VALUES 
(
  'Tricycle 200CC Benne',
  'tricycle-200cc-benne',
  'Tricycle robuste avec benne basculante, idéal pour le transport de marchandises et matériaux. Moteur 200CC refroidi par eau pour une performance optimale. Ce véhicule polyvalent est parfait pour les entrepreneurs et les petites entreprises qui ont besoin d''un moyen de transport fiable et économique.',
  'Tricycle robuste 200CC avec benne basculante pour le transport de marchandises.',
  8500000,
  'tricycle',
  'Benne',
  ARRAY['/images/tricycle-200cc.jpg'],
  ARRAY['Moteur 200CC refroidi par eau', 'Benne basculante hydraulique', 'Charge utile importante', 'Robuste et fiable', 'Idéal transport marchandises', 'Faible consommation'],
  '[{"label": "Moteur", "value": "200CC refroidi par eau"}, {"label": "Nombre de roues", "value": "3"}, {"label": "Type", "value": "Benne basculante"}, {"label": "Usage", "value": "Transport de marchandises"}, {"label": "Capacité de charge", "value": "500kg"}, {"label": "Transmission", "value": "Manuelle"}]'::jsonb,
  true,
  true,
  true,
  4.8,
  24
),
(
  'Tricycle 250CC',
  'tricycle-250cc',
  'Tricycle polyvalent avec moteur 250CC refroidi par eau. Parfait pour les longues distances et le transport de charges lourdes. Conçu pour offrir un confort optimal au conducteur tout en maximisant la capacité de chargement.',
  'Tricycle polyvalent 250CC pour longues distances et charges lourdes.',
  9500000,
  'tricycle',
  'Transport',
  ARRAY['/images/tricycle-250cc.jpg'],
  ARRAY['Moteur 250CC refroidi par eau', 'Grande capacité de charge', 'Confort de conduite supérieur', 'Économique en carburant', 'Adapté longues distances', 'Suspension renforcée'],
  '[{"label": "Moteur", "value": "250CC refroidi par eau"}, {"label": "Nombre de roues", "value": "3"}, {"label": "Type", "value": "Transport"}, {"label": "Usage", "value": "Longues distances et charges lourdes"}, {"label": "Capacité de charge", "value": "800kg"}, {"label": "Transmission", "value": "Manuelle"}]'::jsonb,
  true,
  true,
  false,
  4.7,
  18
),
(
  'Tricycle 300CC 5 Roues',
  'tricycle-300cc-5-roues',
  'Tricycle haute capacité avec 5 roues et moteur 300CC refroidi par eau. Conçu pour les travaux lourds et le transport de matériaux de construction. La configuration à 5 roues offre une stabilité exceptionnelle même avec des charges très lourdes.',
  'Tricycle haute capacité 300CC avec 5 roues pour travaux lourds.',
  12000000,
  'tricycle',
  'Heavy Duty',
  ARRAY['/images/tricycle-300cc.jpg'],
  ARRAY['Moteur 300CC refroidi par eau', '5 roues pour stabilité maximale', 'Capacité de charge exceptionnelle', 'Idéal chantiers et construction', 'Structure renforcée', 'Freins à tambour'],
  '[{"label": "Moteur", "value": "300CC refroidi par eau"}, {"label": "Nombre de roues", "value": "5"}, {"label": "Type", "value": "Heavy duty"}, {"label": "Usage", "value": "Travaux lourds et construction"}, {"label": "Capacité de charge", "value": "1500kg"}, {"label": "Transmission", "value": "Manuelle"}]'::jsonb,
  true,
  true,
  true,
  4.9,
  31
),
(
  'Moto 150CC',
  'moto-150cc',
  'Moto polyvalente 150CC, parfaite pour les déplacements urbains et les livraisons. Économique et facile à entretenir. Design moderne et sportif qui allie performance et élégance.',
  'Moto polyvalente 150CC pour déplacements urbains et livraisons.',
  3500000,
  'moto',
  'Urbain',
  ARRAY['/images/moto-150cc.jpg'],
  ARRAY['Moteur 150CC performant', 'Économique en carburant', 'Idéal déplacements urbains', 'Facile à entretenir', 'Parfait pour livraisons', 'Design moderne'],
  '[{"label": "Moteur", "value": "150CC"}, {"label": "Nombre de roues", "value": "2"}, {"label": "Type", "value": "Sport/Utilitaire"}, {"label": "Usage", "value": "Déplacements urbains et livraisons"}, {"label": "Vitesse max", "value": "110 km/h"}, {"label": "Transmission", "value": "Manuelle 5 vitesses"}]'::jsonb,
  true,
  false,
  true,
  4.6,
  42
);
[V0_FILE]typescript:file="app/api/products/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function GET() {
  try {
    const supabase = await createClient()
    const { data, error } = await supabase
      .from("products")
      .select("*")
      .order("created_at", { ascending: false })

if (error) {
      console.error("Error fetching products:", error)
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

return NextResponse.json(data)
  } catch (error) {
    console.error("Server error:", error)
    return NextResponse.json({ error: "Erreur serveur" }, { status: 500 })
  }
}

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const supabase = await createClient()

// Validate required fields
    if (!body.name || !body.slug || !body.price || !body.description || !body.short_description || !body.category) {
      return NextResponse.json(
        { error: "Champs obligatoires manquants" },
        { status: 400 }
      )
    }

const productData = {
      name: body.name,
      slug: body.slug,
      category: body.category,
      subcategory: body.subcategory || null,
      price: parseInt(body.price),
      old_price: body.old_price ? parseInt(body.old_price) : null,
      description: body.description,
      short_description: body.short_description,
      specifications: body.specifications || {},
      features: body.features || [],
      images: body.images || ["/placeholder.jpg"],
      in_stock: body.in_stock ?? true,
      is_best_seller: body.is_best_seller ?? false,
      is_new: body.is_new ?? false,
      rating: body.rating ?? 0,
      reviews: body.reviews ?? 0,
    }

const { data, error } = await supabase
      .from("products")
      .insert(productData)
      .select()
      .single()

if (error) {
      console.error("Error creating product:", error)
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

return NextResponse.json(data, { status: 201 })
  } catch (error) {
    console.error("Server error:", error)
    return NextResponse.json({ error: "Erreur serveur" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/products/[id]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  try {
    const { id } = await params
    const supabase = await createClient()
    
    const { data, error } = await supabase
      .from("products")
      .select("*")
      .eq("id", id)
      .single()

if (error) {
      console.error("Error fetching product:", error)
      return NextResponse.json({ error: error.message }, { status: 404 })
    }

return NextResponse.json(data)
  } catch (error) {
    console.error("Server error:", error)
    return NextResponse.json({ error: "Erreur serveur" }, { status: 500 })
  }
}

// Build update object with only provided fields
    const updates: Record<string, unknown> = {}
    
    if (body.name !== undefined) updates.name = body.name
    if (body.slug !== undefined) updates.slug = body.slug
    if (body.category !== undefined) updates.category = body.category
    if (body.subcategory !== undefined) updates.subcategory = body.subcategory || null
    if (body.price !== undefined) updates.price = parseInt(body.price)
    if (body.old_price !== undefined) updates.old_price = body.old_price ? parseInt(body.old_price) : null
    if (body.description !== undefined) updates.description = body.description
    if (body.short_description !== undefined) updates.short_description = body.short_description
    if (body.specifications !== undefined) updates.specifications = body.specifications
    if (body.features !== undefined) updates.features = body.features
    if (body.images !== undefined) updates.images = body.images
    if (body.in_stock !== undefined) updates.in_stock = body.in_stock
    if (body.is_best_seller !== undefined) updates.is_best_seller = body.is_best_seller
    if (body.is_new !== undefined) updates.is_new = body.is_new
    if (body.rating !== undefined) updates.rating = body.rating
    if (body.reviews !== undefined) updates.reviews = body.reviews

const { data, error } = await supabase
      .from("products")
      .update(updates)
      .eq("id", id)
      .select()
      .single()

if (error) {
      console.error("Error updating product:", error)
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

return NextResponse.json(data)
  } catch (error) {
    console.error("Server error:", error)
    return NextResponse.json({ error: "Erreur serveur" }, { status: 500 })
  }
}

export async function DELETE(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  try {
    const { id } = await params
    const supabase = await createClient()

const { error } = await supabase
      .from("products")
      .delete()
      .eq("id", id)

if (error) {
      console.error("Error deleting product:", error)
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Server error:", error)
    return NextResponse.json({ error: "Erreur serveur" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/produits/loading.tsx" isMerged="true"
import { Loader2 } from "lucide-react"

export default function Loading() {
  return (
    <div className="flex items-center justify-center py-16">
      <Loader2 className="h-8 w-8 animate-spin text-primary" />
    </div>
  )
}
[V0_FILE]typescript:file="app/api/upload/route.ts" isMerged="true"
import { put } from '@vercel/blob'
import { type NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData()
    const file = formData.get('file') as File

if (!file) {
      return NextResponse.json({ error: 'No file provided' }, { status: 400 })
    }

// Validate file type
    const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif']
    if (!allowedTypes.includes(file.type)) {
      return NextResponse.json({ error: 'Invalid file type. Only images are allowed.' }, { status: 400 })
    }

// Validate file size (max 5MB)
    const maxSize = 5 * 1024 * 1024
    if (file.size > maxSize) {
      return NextResponse.json({ error: 'File too large. Max size is 5MB.' }, { status: 400 })
    }

// Generate unique filename
    const timestamp = Date.now()
    const extension = file.name.split('.').pop()
    const filename = `products/${timestamp}-${Math.random().toString(36).substring(7)}.${extension}`

// Upload to Vercel Blob
    const blob = await put(filename, file, {
      access: 'public',
    })

return NextResponse.json({
      url: blob.url,
      filename: file.name,
      size: file.size,
      type: file.type,
    })
  } catch (error) {
    console.error('Upload error:', error)
    return NextResponse.json({ error: 'Upload failed' }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/orders/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    const supabase = await createClient()
    
    const { data: orders, error } = await supabase
      .from("orders")
      .select("*")
      .order("created_at", { ascending: false })

if (error) {
      console.error("Error fetching orders:", error)
      return NextResponse.json({ error: "Failed to fetch orders" }, { status: 500 })
    }

return NextResponse.json(orders || [])
  } catch (error) {
    console.error("Orders API error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/orders/[id]/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  try {
    const { id } = await params
    const supabase = await createClient()
    
    const { data: order, error } = await supabase
      .from("orders")
      .select("*")
      .eq("id", id)
      .single()

if (error) {
      return NextResponse.json({ error: "Order not found" }, { status: 404 })
    }

return NextResponse.json(order)
  } catch (error) {
    console.error("Order API error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function PUT(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  try {
    const { id } = await params
    const body = await request.json()
    const supabase = await createClient()
    
    const { data: order, error } = await supabase
      .from("orders")
      .update({
        status: body.status,
        notes: body.notes,
        updated_at: new Date().toISOString(),
      })
      .eq("id", id)
      .select()
      .single()

if (error) {
      console.error("Error updating order:", error)
      return NextResponse.json({ error: "Failed to update order" }, { status: 500 })
    }

return NextResponse.json(order)
  } catch (error) {
    console.error("Order update error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function DELETE(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  try {
    const { id } = await params
    const supabase = await createClient()
    
    const { error } = await supabase
      .from("orders")
      .delete()
      .eq("id", id)

if (error) {
      console.error("Error deleting order:", error)
      return NextResponse.json({ error: "Failed to delete order" }, { status: 500 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Order delete error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/stats/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    const supabase = await createClient()
    
    // Fetch orders
    const { data: orders, error: ordersError } = await supabase
      .from("orders")
      .select("*")
      .order("created_at", { ascending: false })

if (ordersError) {
      console.error("Error fetching orders:", ordersError)
    }

// Fetch products
    const { data: products, error: productsError } = await supabase
      .from("products")
      .select("*")

if (productsError) {
      console.error("Error fetching products:", productsError)
    }

const ordersList = orders || []
    const productsList = products || []

// Calculate statistics
    const totalRevenue = ordersList
      .filter(o => o.status === 'completed' || o.status === 'delivered')
      .reduce((sum, o) => sum + (o.total_price || 0), 0)

const totalOrders = ordersList.length
    const pendingOrders = ordersList.filter(o => o.status === 'pending').length
    const completedOrders = ordersList.filter(o => o.status === 'completed' || o.status === 'delivered').length
    const cancelledOrders = ordersList.filter(o => o.status === 'cancelled').length

// Unique clients (by phone or email)
    const uniqueClients = new Set(ordersList.map(o => o.customer_phone || o.customer_email)).size

// Orders by month (last 6 months)
    const now = new Date()
    const monthlyData = []
    for (let i = 5; i >= 0; i--) {
      const date = new Date(now.getFullYear(), now.getMonth() - i, 1)
      const monthName = date.toLocaleDateString('fr-FR', { month: 'short' })
      const monthOrders = ordersList.filter(o => {
        const orderDate = new Date(o.created_at)
        return orderDate.getMonth() === date.getMonth() && 
               orderDate.getFullYear() === date.getFullYear()
      })
      const monthRevenue = monthOrders
        .filter(o => o.status === 'completed' || o.status === 'delivered')
        .reduce((sum, o) => sum + (o.total_price || 0), 0)
      
      monthlyData.push({
        month: monthName,
        orders: monthOrders.length,
        revenue: monthRevenue
      })
    }

// Orders by category
    const categoryData = productsList.reduce((acc, product) => {
      const category = product.category || 'Autre'
      if (!acc[category]) acc[category] = 0
      // Count orders for this product
      const productOrders = ordersList.filter(o => o.product_slug === product.slug)
      acc[category] += productOrders.length
      return acc
    }, {} as Record<string, number>)

// Top products
    const productOrderCounts = productsList.map(product => {
      const productOrders = ordersList.filter(o => o.product_slug === product.slug || o.product_name === product.name)
      const revenue = productOrders
        .filter(o => o.status === 'completed' || o.status === 'delivered')
        .reduce((sum, o) => sum + (o.total_price || 0), 0)
      return {
        name: product.name,
        orders: productOrders.length,
        revenue
      }
    }).sort((a, b) => b.orders - a.orders).slice(0, 5)

// Recent orders
    const recentOrders = ordersList.slice(0, 10).map(order => ({
      id: order.id,
      orderNumber: order.order_number,
      customer: order.customer_name,
      product: order.product_name,
      total: order.total_price,
      status: order.status,
      date: order.created_at
    }))

return NextResponse.json({
      summary: {
        totalRevenue,
        totalOrders,
        pendingOrders,
        completedOrders,
        cancelledOrders,
        uniqueClients,
        totalProducts: productsList.length
      },
      monthlyData,
      categoryData: Object.entries(categoryData).map(([name, value]) => ({ name, value })),
      topProducts: productOrderCounts,
      recentOrders
    })
  } catch (error) {
    console.error("Stats API error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/clients/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]png:file="public/images/logo-hasilaza.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/HasilazaMotor-aQYnu0UKMfJpMgQjrKhCFbXfSZYd9R.png" isMerged="true"
[V0_FILE]png:file="public/images/partners/socodevi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/SOCODEVI-PnvRYdcaoc6Un7bzcSshiL607B4XDn.png" isMerged="true"
[V0_FILE]png:file="public/images/partners/enabel.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Enabel-Jhh7C68ybJkMoLFHHF8OvXHfxEu4IG.png" isMerged="true"
[V0_FILE]png:file="public/images/partners/ancs.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ANCS-aizP0kI0kUbCUIcWGfcXfk8YkrxZ1k.png" isMerged="true"
[V0_FILE]png:file="public/images/partners/somaphy.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/somaphy-pMuN3di0GcOYz7tAh14rxaeV5nGRm9.png" isMerged="true"
[V0_FILE]png:file="public/images/partners/qatar-charity.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/QATAR%20CHARITY-f4Rlz9BMNL71IDveUM2rmwFgaGtveZ.png" isMerged="true"
[V0_FILE]png:file="public/images/partners/human-appeal.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/HUMAN%20APPEAL-6PFJetaqdhcQqAOkWu00ntG3weqEsT.png" isMerged="true"
[V0_FILE]png:file="public/favicon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/HasilazaMotor-aQYnu0UKMfJpMgQjrKhCFbXfSZYd9R.png" isMerged="true"
[V0_FILE]png:file="app/icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/HasilazaMotor-aQYnu0UKMfJpMgQjrKhCFbXfSZYd9R.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isMerged="true"
"use client"

import React from "react"

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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Eye, EyeOff, Loader2 } from "lucide-react"
import Image from "next/image"

export default function AdminLoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const router = useRouter()

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

// Admin authentication
    const validCredentials = [
      { email: "admin@mortallasene", password: "mortallasene@admin123" },
    ]

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

const isValid = validCredentials.some(
      (cred) => cred.email.toLowerCase() === email.toLowerCase() && cred.password === password
    )

if (isValid) {
      // Set a secure session cookie
      document.cookie = "admin_session=authenticated_admin_user_2026; path=/; max-age=86400; SameSite=Strict"
      router.push("/admin")
    } else {
      setError("Email ou mot de passe incorrect")
    }

setIsLoading(false)
  }

return (
    <div className="flex min-h-screen items-center justify-center bg-muted/30 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1 text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl overflow-hidden">
            <Image src="/images/logo-hasilaza.png" alt="Hasilaza" width={48} height={48} className="w-full h-full object-contain" />
          </div>
          <CardTitle className="text-2xl font-bold">Administration</CardTitle>
          <CardDescription>
            Connectez-vous pour acceder au tableau de bord
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            {error && (
              <div className="rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
                {error}
              </div>
            )}

<div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="admin@hasilaza.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                disabled={isLoading}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Mot de passe</Label>
              <div className="relative">
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="********"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  disabled={isLoading}
                  className="pr-10"
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
                  onClick={() => setShowPassword(!showPassword)}
                  disabled={isLoading}
                >
                  {showPassword ? (
                    <EyeOff className="h-4 w-4 text-muted-foreground" />
                  ) : (
                    <Eye className="h-4 w-4 text-muted-foreground" />
                  )}
                  <span className="sr-only">
                    {showPassword ? "Masquer" : "Afficher"} le mot de passe
                  </span>
                </Button>
              </div>
            </div>

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Connexion...
                </>
              ) : (
                "Se connecter"
              )}
            </Button>

</form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Package, ShoppingCart, Users, TrendingUp, ArrowUpRight, ArrowDownRight } from "lucide-react"
import { RecentOrders } from "@/components/admin/recent-orders"
import { SalesChart } from "@/components/admin/sales-chart"
import { TopProducts } from "@/components/admin/top-products"
import { createClient } from "@/lib/supabase/server"
import { formatPrice } from "@/lib/supabase/products"

async function getStats() {
  const supabase = await createClient()

// Get products count
  const { count: productsCount } = await supabase
    .from("products")
    .select("*", { count: "exact", head: true })

// Get orders
  const { data: orders } = await supabase
    .from("orders")
    .select("total_price, status, created_at")

// Calculate revenue from non-cancelled orders
  const totalRevenue = orders
    ?.filter(o => o.status !== "cancelled")
    .reduce((sum, o) => sum + o.total_price, 0) || 0

// Get unique customers
  const { data: customers } = await supabase
    .from("orders")
    .select("customer_phone")
  
  const uniqueCustomers = new Set(customers?.map(c => c.customer_phone)).size

return {
    revenue: totalRevenue,
    ordersCount: orders?.length || 0,
    productsCount: productsCount || 0,
    customersCount: uniqueCustomers,
  }
}

export default async function AdminDashboard() {
  const stats = await getStats()

const statsConfig = [
    {
      title: "Chiffre d'affaires",
      value: formatPrice(stats.revenue),
      change: stats.revenue > 0 ? "actif" : "0",
      trend: stats.revenue > 0 ? "up" : "neutral",
      icon: TrendingUp,
      description: "total",
    },
    {
      title: "Commandes",
      value: stats.ordersCount.toString(),
      change: stats.ordersCount > 0 ? "actif" : "0",
      trend: stats.ordersCount > 0 ? "up" : "neutral",
      icon: ShoppingCart,
      description: "total",
    },
    {
      title: "Produits",
      value: stats.productsCount.toString(),
      change: `${stats.productsCount}`,
      trend: stats.productsCount > 0 ? "up" : "neutral",
      icon: Package,
      description: "en catalogue",
    },
    {
      title: "Clients",
      value: stats.customersCount.toString(),
      change: stats.customersCount > 0 ? "actif" : "0",
      trend: stats.customersCount > 0 ? "up" : "neutral",
      icon: Users,
      description: "clients uniques",
    },
  ]

return (
    <div className="space-y-6">
      {/* Page Header */}
      <div>
        <h1 className="text-2xl font-bold tracking-tight md:text-3xl">
          Tableau de bord
        </h1>
        <p className="text-muted-foreground">
          Bienvenue sur votre espace d{"'"}administration Hasilaza
        </p>
      </div>

{/* Stats Grid */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {statsConfig.map((stat) => (
          <Card key={stat.title}>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {stat.title}
              </CardTitle>
              <stat.icon className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stat.value}</div>
              <div className="flex items-center gap-1 text-xs">
                {stat.trend === "up" && (
                  <ArrowUpRight className="h-3 w-3 text-green-600" />
                )}
                <span
                  className={
                    stat.trend === "up" ? "text-green-600" : "text-muted-foreground"
                  }
                >
                  {stat.change}
                </span>
                <span className="text-muted-foreground">{stat.description}</span>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Charts Row */}
      <div className="grid gap-4 lg:grid-cols-7">
        <Card className="lg:col-span-4">
          <CardHeader>
            <CardTitle>Ventes mensuelles</CardTitle>
            <CardDescription>
              Evolution du chiffre d'affaires sur les 6 derniers mois
            </CardDescription>
          </CardHeader>
          <CardContent>
            <SalesChart />
          </CardContent>
        </Card>

<Card className="lg:col-span-3">
          <CardHeader>
            <CardTitle>Produits les plus vendus</CardTitle>
            <CardDescription>Top 5 des ventes ce mois</CardDescription>
          </CardHeader>
          <CardContent>
            <TopProducts />
          </CardContent>
        </Card>
      </div>

{/* Recent Orders */}
      <Card>
        <CardHeader>
          <CardTitle>Commandes recentes</CardTitle>
          <CardDescription>
            Les 5 dernieres commandes recues
          </CardDescription>
        </CardHeader>
        <CardContent>
          <RecentOrders />
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/order/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

const OWNER_EMAILS = ["Mortalla581@gmail.com", "jobken080@gmail.com"]
const OWNER_PHONE = "221781094091"
const ADMIN_WHATSAPP_NUMBERS = ["221781094091"] // Admin WhatsApp numbers for notifications

interface OrderRequest {
  product: {
    id: string
    name: string
    price: number
    quantity: number
  }
  customer: {
    fullName: string
    phone: string
    email: string
    address: string
    city: string
    message: string
  }
  totalPrice: number
}

function formatPrice(price: number): string {
  return new Intl.NumberFormat("fr-SN", {
    style: "decimal",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(price) + " FCFA"
}

export async function POST(request: Request) {
  try {
    const body: OrderRequest = await request.json()
    const { product, customer, totalPrice } = body

// Validate required fields
    if (!customer.fullName || !customer.phone || !customer.address || !customer.city) {
      return NextResponse.json(
        { error: "Veuillez remplir tous les champs obligatoires" },
        { status: 400 }
      )
    }

// Generate order ID
    const orderId = `HM-${Date.now().toString(36).toUpperCase()}`
    const orderDate = new Date().toLocaleDateString("fr-FR", {
      day: "2-digit",
      month: "long",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit"
    })

// Prepare WhatsApp message for owner
    const whatsappMessage = `🛒 *NOUVELLE COMMANDE #${orderId}*

📅 Date: ${orderDate}

📦 *PRODUIT:*
- Nom: ${product.name}
- Quantite: ${product.quantity}
- Prix unitaire: ${formatPrice(product.price)}
- *TOTAL: ${formatPrice(totalPrice)}*

👤 *CLIENT:*
- Nom: ${customer.fullName}
- Tel: ${customer.phone}
- Email: ${customer.email || "Non fourni"}
- Adresse: ${customer.address}, ${customer.city}

${customer.message ? `💬 *MESSAGE:*\n${customer.message}` : ""}

---
Contactez le client rapidement pour confirmer la commande.`

// Send WhatsApp notification to owner via WhatsApp API
    // Note: In production, you would use WhatsApp Business API
    // For now, we'll create a click-to-send link that can be triggered
    const whatsappUrl = `https://wa.me/${OWNER_PHONE}?text=${encodeURIComponent(whatsappMessage)}`

// Prepare email content (HTML)
    const emailHtml = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
    .header { background: #E53935; color: white; padding: 20px; text-align: center; border-radius: 10px 10px 0 0; }
    .content { background: #f9f9f9; padding: 20px; border-radius: 0 0 10px 10px; }
    .order-id { font-size: 24px; font-weight: bold; }
    .section { background: white; padding: 15px; margin: 15px 0; border-radius: 8px; border-left: 4px solid #E53935; }
    .section h3 { margin-top: 0; color: #E53935; }
    .total { font-size: 20px; font-weight: bold; color: #E53935; }
    .footer { text-align: center; padding: 20px; color: #666; font-size: 12px; }
    table { width: 100%; border-collapse: collapse; }
    td { padding: 8px 0; }
    .label { color: #666; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Hasilaza Motor</h1>
      <p>Nouvelle commande recue!</p>
      <div class="order-id">#${orderId}</div>
    </div>
    <div class="content">
      <p><strong>Date:</strong> ${orderDate}</p>
      
      <div class="section">
        <h3>📦 Produit commande</h3>
        <table>
          <tr>
            <td class="label">Produit:</td>
            <td><strong>${product.name}</strong></td>
          </tr>
          <tr>
            <td class="label">Quantite:</td>
            <td>${product.quantity}</td>
          </tr>
          <tr>
            <td class="label">Prix unitaire:</td>
            <td>${formatPrice(product.price)}</td>
          </tr>
          <tr>
            <td class="label">Total:</td>
            <td class="total">${formatPrice(totalPrice)}</td>
          </tr>
        </table>
      </div>
      
      <div class="section">
        <h3>👤 Informations client</h3>
        <table>
          <tr>
            <td class="label">Nom:</td>
            <td><strong>${customer.fullName}</strong></td>
          </tr>
          <tr>
            <td class="label">Telephone:</td>
            <td><a href="tel:${customer.phone}">${customer.phone}</a></td>
          </tr>
          <tr>
            <td class="label">Email:</td>
            <td>${customer.email || "Non fourni"}</td>
          </tr>
          <tr>
            <td class="label">Adresse:</td>
            <td>${customer.address}, ${customer.city}</td>
          </tr>
        </table>
      </div>
      
      ${customer.message ? `
      <div class="section">
        <h3>💬 Message du client</h3>
        <p>${customer.message}</p>
      </div>
      ` : ""}
      
      <div style="text-align: center; margin-top: 20px;">
        <a href="https://wa.me/${customer.phone.replace(/[^0-9]/g, '')}" 
           style="display: inline-block; background: #25D366; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: bold;">
          📱 Contacter sur WhatsApp
        </a>
      </div>
    </div>
    <div class="footer">
      <p>Hasilaza Motor - Votre partenaire de confiance</p>
      <p>HLM 2 Dakar, Senegal</p>
      <p>+221 781094091 | Mortalla581@gmail.com</p>
    </div>
  </div>
</body>
</html>
`

// Send email using Resend or another email service
    // Check if RESEND_API_KEY is configured
    const resendApiKey = process.env.RESEND_API_KEY

if (resendApiKey) {
      try {
        const emailResponse = await fetch("https://api.resend.com/emails", {
          method: "POST",
          headers: {
            "Authorization": `Bearer ${resendApiKey}`,
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            from: "Hasilaza Motor <commandes@hasilaza.store>",
            to: OWNER_EMAILS,
            subject: `Nouvelle Commande #${orderId} - ${product.name}`,
            html: emailHtml
          })
        })

if (!emailResponse.ok) {
          console.error("Email send failed:", await emailResponse.text())
        }
      } catch (emailError) {
        console.error("Email error:", emailError)
        // Continue even if email fails
      }
    } else {
      console.log("RESEND_API_KEY not configured - email notification skipped")
      console.log("Order details:", { orderId, product, customer, totalPrice })
    }

// Also send confirmation email to customer if they provided email
    if (customer.email && resendApiKey) {
      const customerEmailHtml = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
    .header { background: #E53935; color: white; padding: 20px; text-align: center; border-radius: 10px 10px 0 0; }
    .content { background: #f9f9f9; padding: 20px; border-radius: 0 0 10px 10px; }
    .order-id { font-size: 24px; font-weight: bold; }
    .section { background: white; padding: 15px; margin: 15px 0; border-radius: 8px; }
    .total { font-size: 20px; font-weight: bold; color: #E53935; }
    .footer { text-align: center; padding: 20px; color: #666; font-size: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Merci pour votre commande!</h1>
      <div class="order-id">#${orderId}</div>
    </div>
    <div class="content">
      <p>Bonjour ${customer.fullName},</p>
      <p>Nous avons bien recu votre commande et nous vous contacterons tres bientot pour confirmer les details et la livraison.</p>
      
      <div class="section">
        <h3>Recapitulatif</h3>
        <p><strong>Produit:</strong> ${product.name}</p>
        <p><strong>Quantite:</strong> ${product.quantity}</p>
        <p><strong>Total:</strong> <span class="total">${formatPrice(totalPrice)}</span></p>
      </div>
      
      <div class="section">
        <h3>Livraison</h3>
        <p>${customer.address}, ${customer.city}</p>
      </div>
      
      <p>Pour toute question, n'hesitez pas a nous contacter:</p>
      <ul>
        <li>WhatsApp: <a href="https://wa.me/221781094091">+221 781094091</a></li>
        <li>Email: Mortalla581@gmail.com</li>
      </ul>
    </div>
    <div class="footer">
      <p>Hasilaza Motor - HLM 2 Dakar, Senegal</p>
      <p>Votre partenaire de confiance pour les motos et tricycles au Senegal</p>
    </div>
  </div>
</body>
</html>
`

try {
        await fetch("https://api.resend.com/emails", {
          method: "POST",
          headers: {
            "Authorization": `Bearer ${resendApiKey}`,
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            from: "Hasilaza Motor <commandes@hasilaza.store>",
            to: [customer.email],
            subject: `Confirmation de votre commande #${orderId} - Hasilaza Motor`,
            html: customerEmailHtml
          })
        })
      } catch (customerEmailError) {
        console.error("Customer email error:", customerEmailError)
      }
    }

// Save order to database
    const supabase = await createClient()
    const { data: savedOrder, error: orderError } = await supabase
      .from("orders")
      .insert({
        order_number: orderId,
        customer_name: customer.fullName,
        customer_phone: customer.phone,
        customer_email: customer.email || null,
        customer_address: customer.address,
        customer_city: customer.city,
        product_name: product.name,
        product_slug: product.id,
        quantity: product.quantity,
        unit_price: product.price,
        total_price: totalPrice,
        status: "pending",
        notes: customer.message || null,
      })
      .select()
      .single()

if (orderError) {
      console.error("Error saving order:", orderError)
    }

// Send WhatsApp notification to admin via CallMeBot API or similar service
    // Note: You need to register your number at https://www.callmebot.com/blog/free-api-whatsapp-messages/
    const callMeBotApiKey = process.env.CALLMEBOT_API_KEY
    
    if (callMeBotApiKey) {
      for (const adminNumber of ADMIN_WHATSAPP_NUMBERS) {
        try {
          const whatsappApiUrl = `https://api.callmebot.com/whatsapp.php?phone=${adminNumber}&text=${encodeURIComponent(whatsappMessage)}&apikey=${callMeBotApiKey}`
          
          await fetch(whatsappApiUrl)
          console.log(`WhatsApp notification sent to ${adminNumber}`)
        } catch (whatsappError) {
          console.error(`WhatsApp notification error for ${adminNumber}:`, whatsappError)
        }
      }
    } else {
      console.log("CALLMEBOT_API_KEY not configured - WhatsApp notification skipped")
      console.log("WhatsApp URL for manual notification:", whatsappUrl)
    }

// Return success with WhatsApp link for manual notification
    return NextResponse.json({
      success: true,
      orderId,
      message: "Commande enregistree avec succes",
      whatsappUrl,
      order: savedOrder
    })

} catch (error) {
    console.error("Order error:", error)
    return NextResponse.json(
      { error: "Une erreur est survenue lors du traitement de votre commande" },
      { status: 500 }
    )
  }
}
[V0_FILE]typescriptreact:file="app/admin/parametres/page.tsx" isMerged="true"
"use client"

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 { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Save, Globe, Mail, Phone, MapPin, Bell, Shield, Palette } from "lucide-react"

export default function SettingsPage() {
  const [isSaving, setIsSaving] = useState(false)

const handleSave = () => {
    setIsSaving(true)
    setTimeout(() => setIsSaving(false), 1000)
  }

<Tabs defaultValue="general" className="space-y-4">
        <TabsList className="flex-wrap">
          <TabsTrigger value="general">General</TabsTrigger>
          <TabsTrigger value="contact">Contact</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
          <TabsTrigger value="appearance">Apparence</TabsTrigger>
          <TabsTrigger value="security">Securite</TabsTrigger>
        </TabsList>

{/* General Settings */}
        <TabsContent value="general">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Globe className="h-5 w-5" />
                Informations generales
              </CardTitle>
              <CardDescription>
                Parametres de base de votre site web
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="siteName">Nom du site</Label>
                  <Input id="siteName" defaultValue="Hasilaza" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="tagline">Slogan</Label>
                  <Input id="tagline" defaultValue="Votre partenaire de confiance" />
                </div>
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="description">Description du site</Label>
                <Textarea
                  id="description"
                  rows={3}
                  defaultValue="Hasilaza est le leader de la vente de motos et tricycles au Senegal. Nous proposons des vehicules de qualite a des prix competitifs."
                />
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Parametres SEO</h4>
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="metaTitle">Titre Meta</Label>
                    <Input id="metaTitle" defaultValue="Hasilaza - Motos et Tricycles au Senegal" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="metaKeywords">Mots-cles</Label>
                    <Input id="metaKeywords" defaultValue="moto, tricycle, Senegal, Dakar" />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="metaDescription">Description Meta</Label>
                  <Textarea
                    id="metaDescription"
                    rows={2}
                    defaultValue="Achetez vos motos et tricycles de qualite chez Hasilaza. Livraison partout au Senegal. Prix competitifs et service apres-vente."
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Contact Settings */}
        <TabsContent value="contact">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Phone className="h-5 w-5" />
                Informations de contact
              </CardTitle>
              <CardDescription>
                Coordonnees affichees sur le site
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="phone1">Telephone principal</Label>
                  <Input id="phone1" defaultValue="+221 78 109 40 91" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone2">Telephone secondaire</Label>
                  <Input id="phone2" defaultValue="+221 77 123 45 67" />
                </div>
              </div>

<div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="email1">Email principal</Label>
                  <Input id="email1" type="email" defaultValue="Mortalla581@gmail.com" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email2">Email secondaire</Label>
                  <Input id="email2" type="email" defaultValue="jobken080@gmail.com" />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="whatsapp">Numero WhatsApp</Label>
                <Input id="whatsapp" defaultValue="221781094091" />
                <p className="text-xs text-muted-foreground">
                  Format international sans le + (ex: 221781094091)
                </p>
              </div>

<div className="space-y-4">
                <h4 className="font-medium flex items-center gap-2">
                  <MapPin className="h-4 w-4" />
                  Adresse
                </h4>
                <div className="space-y-2">
                  <Label htmlFor="address">Adresse complete</Label>
                  <Textarea
                    id="address"
                    rows={2}
                    defaultValue="HLM 2, Dakar, Senegal"
                  />
                </div>
                <div className="grid gap-4 sm:grid-cols-3">
                  <div className="space-y-2">
                    <Label htmlFor="city">Ville</Label>
                    <Input id="city" defaultValue="Dakar" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="region">Region</Label>
                    <Input id="region" defaultValue="Dakar" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="country">Pays</Label>
                    <Input id="country" defaultValue="Senegal" />
                  </div>
                </div>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Horaires d'ouverture</h4>
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="weekdays">Lundi - Vendredi</Label>
                    <Input id="weekdays" defaultValue="08h00 - 18h00" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="saturday">Samedi</Label>
                    <Input id="saturday" defaultValue="09h00 - 14h00" />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Notification Settings */}
        <TabsContent value="notifications">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Bell className="h-5 w-5" />
                Notifications
              </CardTitle>
              <CardDescription>
                Configurez les notifications par email et WhatsApp
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <h4 className="font-medium">Notifications par email</h4>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Nouvelle commande</Label>
                      <p className="text-sm text-muted-foreground">
                        Recevoir un email a chaque nouvelle commande
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Confirmation client</Label>
                      <p className="text-sm text-muted-foreground">
                        Envoyer un email de confirmation au client
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Stock bas</Label>
                      <p className="text-sm text-muted-foreground">
                        Alerte quand un produit est en rupture de stock
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                </div>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Notifications WhatsApp</h4>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Nouvelle commande WhatsApp</Label>
                      <p className="text-sm text-muted-foreground">
                        Recevoir une notification WhatsApp a chaque commande
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Resume quotidien</Label>
                      <p className="text-sm text-muted-foreground">
                        Recevoir un resume des ventes chaque soir
                      </p>
                    </div>
                    <Switch />
                  </div>
                </div>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Configuration email (Resend)</h4>
                <div className="space-y-2">
                  <Label htmlFor="resendKey">Cle API Resend</Label>
                  <Input id="resendKey" type="password" placeholder="re_xxxxxxxxxxxx" />
                  <p className="text-xs text-muted-foreground">
                    Obtenez votre cle sur resend.com
                  </p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="fromEmail">Email d'envoi</Label>
                  <Input id="fromEmail" defaultValue="onboarding@resend.dev" />
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Appearance Settings */}
        <TabsContent value="appearance">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Palette className="h-5 w-5" />
                Apparence
              </CardTitle>
              <CardDescription>
                Personnalisez l'apparence de votre site
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <h4 className="font-medium">Theme</h4>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Mode sombre disponible</Label>
                    <p className="text-sm text-muted-foreground">
                      Permettre aux visiteurs de basculer en mode sombre
                    </p>
                  </div>
                  <Switch defaultChecked />
                </div>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Couleur principale</h4>
                <div className="flex flex-wrap gap-3">
                  {["#E53935", "#1976D2", "#388E3C", "#F57C00", "#7B1FA2"].map((color) => (
                    <button
                      key={color}
                      className="h-10 w-10 rounded-lg border-2 border-transparent transition-all hover:scale-110 focus:border-foreground"
                      style={{ backgroundColor: color }}
                    />
                  ))}
                </div>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Logo et images</h4>
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label>Logo principal</Label>
                    <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/50">
                      <span className="text-sm text-muted-foreground">
                        Glissez une image ici
                      </span>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label>Favicon</Label>
                    <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/50">
                      <span className="text-sm text-muted-foreground">
                        Glissez une image ici
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Security Settings */}
        <TabsContent value="security">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Shield className="h-5 w-5" />
                Securite
              </CardTitle>
              <CardDescription>
                Parametres de securite et acces administrateur
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <h4 className="font-medium">Administrateurs</h4>
                <div className="space-y-3">
                  <div className="flex items-center justify-between rounded-lg border p-3">
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                        <span className="text-sm font-medium text-primary">M</span>
                      </div>
                      <div>
                        <div className="font-medium">Mortalla</div>
                        <div className="text-sm text-muted-foreground">Mortalla581@gmail.com</div>
                      </div>
                    </div>
                    <Badge>Super Admin</Badge>
                  </div>
                  <div className="flex items-center justify-between rounded-lg border p-3">
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                        <span className="text-sm font-medium text-primary">J</span>
                      </div>
                      <div>
                        <div className="font-medium">Jobken</div>
                        <div className="text-sm text-muted-foreground">jobken080@gmail.com</div>
                      </div>
                    </div>
                    <Badge variant="secondary">Admin</Badge>
                  </div>
                </div>
                <Button variant="outline" className="w-full bg-transparent">
                  Ajouter un administrateur
                </Button>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Changer le mot de passe</h4>
                <div className="grid gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="currentPassword">Mot de passe actuel</Label>
                    <Input id="currentPassword" type="password" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="newPassword">Nouveau mot de passe</Label>
                    <Input id="newPassword" type="password" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="confirmPassword">Confirmer le mot de passe</Label>
                    <Input id="confirmPassword" type="password" />
                  </div>
                </div>
                <Button variant="outline">Mettre a jour le mot de passe</Button>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Sessions actives</h4>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Deconnecter toutes les sessions</Label>
                    <p className="text-sm text-muted-foreground">
                      Deconnecte tous les appareils sauf celui-ci
                    </p>
                  </div>
                  <Button variant="destructive" size="sm">
                    Deconnecter
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import React from "react"
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

export const metadata: Metadata = {
  title: 'Hasilaza Motor - Tricycles et Motos au Sénégal | Tricycle 200CC, 250CC, 300CC',
  description: 'Hasilaza Motor - Leader de la vente de tricycles cargo (200CC, 250CC, 300CC 5 roues) et motos 150CC au Sénégal. Livraison gratuite sur Dakar, garantie 2 ans.',
  keywords: 'tricycles, motos, tricycle 200cc, tricycle 250cc, tricycle 300cc, moto 150cc, Sénégal, Hasilaza Motor, cargo, benne, transport',
  authors: [{ name: 'Hasilaza Motor' }],
  openGraph: {
    title: 'Hasilaza Motor - Tricycles et Motos au Sénégal',
    description: 'Leader de la vente de tricycles cargo et motos au Sénégal. Tricycle 200CC, 250CC, 300CC 5 roues et Moto 150CC.',
    type: 'website',
  },

icons: {
    icon: '/favicon.png',
    apple: '/apple-icon.png',
  },
}

export const viewport = {
  themeColor: '#E53935',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="fr">
      <body className={`${inter.variable} font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]jpg:file="public/images/tricycle-200cc.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1-ATukt8IV11Z4PSqe3VM3wkusyErVxP.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/images/tricycle-250cc.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1-rTsSRUEcCtXPxCSMBC0fImEnTOefKH.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/produits/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Plus, Search, Pencil, Trash2, Eye, MoreHorizontal, Loader2, Upload, X, Image as ImageIcon } from "lucide-react"
import Image from "next/image"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { formatPrice, type Product } from "@/lib/supabase/products"
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"

export default function ProductsAdminPage() {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [categoryFilter, setCategoryFilter] = useState("all")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [editingProduct, setEditingProduct] = useState<Product | null>(null)
  const { toast } = useToast()

// Form state - separate states for each field to avoid re-render issues
  const [formName, setFormName] = useState("")
  const [formSlug, setFormSlug] = useState("")
  const [formCategory, setFormCategory] = useState<"tricycle" | "moto" | "piece">("tricycle")
  const [formSubcategory, setFormSubcategory] = useState("")
  const [formPrice, setFormPrice] = useState("")
  const [formOldPrice, setFormOldPrice] = useState("")
  const [formShortDescription, setFormShortDescription] = useState("")
  const [formDescription, setFormDescription] = useState("")
  const [formImages, setFormImages] = useState("")
  const [formInStock, setFormInStock] = useState(true)
  const [formIsBestSeller, setFormIsBestSeller] = useState(false)
  const [formIsNew, setFormIsNew] = useState(false)
  const [formFeatures, setFormFeatures] = useState("")
  const [formSpecs, setFormSpecs] = useState<{ key: string; value: string }[]>([{ key: "", value: "" }])
  const [uploadedImages, setUploadedImages] = useState<string[]>([])
  const [isUploading, setIsUploading] = useState(false)

const addSpecRow = () => setFormSpecs(prev => [...prev, { key: "", value: "" }])
  const removeSpecRow = (index: number) => setFormSpecs(prev => prev.filter((_, i) => i !== index))
  const updateSpecRow = (index: number, field: "key" | "value", val: string) => {
    setFormSpecs(prev => prev.map((row, i) => i === index ? { ...row, [field]: val } : row))
  }

useEffect(() => {
    loadProducts()
  }, [])

async function loadProducts() {
    setLoading(true)
    try {
      const response = await fetch("/api/products")
      if (response.ok) {
        const data = await response.json()
        setProducts(data)
      } else {
        console.error("Failed to fetch products")
        toast({
          title: "Erreur",
          description: "Impossible de charger les produits",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error loading products:", error)
    }
    setLoading(false)
  }

// Image upload handler
  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files || files.length === 0) return

setIsUploading(true)
    
    for (const file of Array.from(files)) {
      try {
        const formData = new FormData()
        formData.append("file", file)
        
        const response = await fetch("/api/upload", {
          method: "POST",
          body: formData,
        })
        
        if (response.ok) {
          const data = await response.json()
          setUploadedImages(prev => [...prev, data.url])
        } else {
          const error = await response.json()
          toast({
            title: "Erreur",
            description: error.error || "Erreur lors du telechargement",
            variant: "destructive",
          })
        }
      } catch (error) {
        console.error("Upload error:", error)
        toast({
          title: "Erreur",
          description: "Erreur lors du telechargement de l'image",
          variant: "destructive",
        })
      }
    }
    
    setIsUploading(false)
    e.target.value = "" // Reset input
  }

const removeImage = (url: string) => {
    setUploadedImages(prev => prev.filter(img => img !== url))
  }

const resetForm = () => {
    setFormName("")
    setFormSlug("")
    setFormCategory("tricycle")
    setFormSubcategory("")
    setFormPrice("")
    setFormOldPrice("")
    setFormShortDescription("")
    setFormDescription("")
    setFormImages("")
    setFormInStock(true)
    setFormIsBestSeller(false)
    setFormIsNew(false)
    setFormFeatures("")
    setFormSpecs([{ key: "", value: "" }])
    setUploadedImages([])
  }

const openEditDialog = (product: Product) => {
    setEditingProduct(product)
    setFormName(product.name)
    setFormSlug(product.slug)
    setFormCategory(product.category)
    setFormSubcategory(product.subcategory || "")
    setFormPrice(product.price.toString())
    setFormOldPrice(product.old_price?.toString() || "")
    setFormShortDescription(product.short_description)
    setFormDescription(product.description)
    setFormImages("")
    setUploadedImages(product.images || [])
    setFormInStock(product.in_stock)
    setFormIsBestSeller(product.is_best_seller || false)
    setFormIsNew(product.is_new || false)
    setFormFeatures(product.features?.join("\n") || "")
    const specsObj = product.specifications || {}
    const specsArr = Object.entries(specsObj).map(([key, value]) => ({ key, value: String(value) }))
    setFormSpecs(specsArr.length > 0 ? specsArr : [{ key: "", value: "" }])
    setIsEditDialogOpen(true)
  }

const filteredProducts = products.filter((product) => {
    const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      product.slug.includes(searchQuery.toLowerCase())
    const matchesCategory = categoryFilter === "all" || product.category === categoryFilter
    return matchesSearch && matchesCategory
  })

const categoryLabels: Record<string, string> = {
    tricycle: "Tricycle",
    moto: "Moto",
    piece: "Piece",
  }

const handleSubmit = async () => {
    if (!formName || !formSlug || !formPrice || !formDescription || !formShortDescription) {
      toast({
        title: "Erreur",
        description: "Veuillez remplir tous les champs obligatoires",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)
    
    // Combine uploaded images with manually entered URLs
    const allImages = [
      ...uploadedImages,
      ...(formImages ? formImages.split(",").map(s => s.trim()).filter(Boolean) : [])
    ]
    
    // Parse features (one per line)
    const features = formFeatures ? formFeatures.split("\n").map(f => f.trim()).filter(Boolean) : []
    
    // Build specifications from dynamic key-value pairs
    const specifications = formSpecs.reduce((acc, { key, value }) => {
      if (key.trim() && value.trim()) acc[key.trim()] = value.trim()
      return acc
    }, {} as Record<string, string>)
    
    const productData = {
      name: formName,
      slug: formSlug,
      category: formCategory,
      subcategory: formSubcategory || undefined,
      price: parseInt(formPrice),
      old_price: formOldPrice ? parseInt(formOldPrice) : undefined,
      description: formDescription,
      short_description: formShortDescription,
      specifications,
      features,
      images: allImages.length > 0 ? allImages : ["/images/placeholder.jpg"],
      in_stock: formInStock,
      is_best_seller: formIsBestSeller,
      is_new: formIsNew,
      rating: 0,
      reviews: 0,
    }

try {
      const response = await fetch("/api/products", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(productData),
      })
      
      if (response.ok) {
        toast({
          title: "Succes",
          description: "Produit ajoute avec succes",
        })
        setIsAddDialogOpen(false)
        resetForm()
        loadProducts()
      } else {
        const error = await response.json()
        toast({
          title: "Erreur",
          description: error.error || "Erreur lors de l'ajout du produit",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error creating product:", error)
      toast({
        title: "Erreur",
        description: "Erreur lors de l'ajout du produit",
        variant: "destructive",
      })
    }
    
    setIsSubmitting(false)
  }

const handleUpdate = async () => {
    if (!editingProduct) return
    
    if (!formName || !formSlug || !formPrice || !formDescription || !formShortDescription) {
      toast({
        title: "Erreur",
        description: "Veuillez remplir tous les champs obligatoires",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)
    
    // Combine uploaded images with manually entered URLs
    const allImages = [
      ...uploadedImages,
      ...(formImages ? formImages.split(",").map(s => s.trim()).filter(Boolean) : [])
    ]
    
    // Parse features (one per line)
    const features = formFeatures ? formFeatures.split("\n").map(f => f.trim()).filter(Boolean) : []
    
    // Build specifications from dynamic key-value pairs
    const specifications = formSpecs.reduce((acc, { key, value }) => {
      if (key.trim() && value.trim()) acc[key.trim()] = value.trim()
      return acc
    }, {} as Record<string, string>)
    
    const updates = {
      name: formName,
      slug: formSlug,
      category: formCategory,
      subcategory: formSubcategory || null,
      price: parseInt(formPrice),
      old_price: formOldPrice ? parseInt(formOldPrice) : null,
      description: formDescription,
      short_description: formShortDescription,
      images: allImages.length > 0 ? allImages : editingProduct.images,
      features,
      specifications,
      in_stock: formInStock,
      is_best_seller: formIsBestSeller,
      is_new: formIsNew,
    }

try {
      const response = await fetch(`/api/products/${editingProduct.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(updates),
      })
      
      if (response.ok) {
        toast({
          title: "Succes",
          description: "Produit modifie avec succes",
        })
        setIsEditDialogOpen(false)
        setEditingProduct(null)
        resetForm()
        loadProducts()
      } else {
        const error = await response.json()
        toast({
          title: "Erreur",
          description: error.error || "Erreur lors de la modification du produit",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error updating product:", error)
      toast({
        title: "Erreur",
        description: "Erreur lors de la modification du produit",
        variant: "destructive",
      })
    }
    
    setIsSubmitting(false)
  }

const handleDelete = async (id: string, name: string) => {
    if (!confirm(`Etes-vous sur de vouloir supprimer "${name}" ?`)) return

try {
      const response = await fetch(`/api/products/${id}`, {
        method: "DELETE",
      })
      
      if (response.ok) {
        toast({
          title: "Succes",
          description: "Produit supprime avec succes",
        })
        loadProducts()
      } else {
        const error = await response.json()
        toast({
          title: "Erreur",
          description: error.error || "Erreur lors de la suppression",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error deleting product:", error)
      toast({
        title: "Erreur",
        description: "Erreur lors de la suppression",
        variant: "destructive",
      })
    }
  }

const inStockCount = products.filter((p) => p.in_stock).length
  const outOfStockCount = products.filter((p) => !p.in_stock).length

if (loading) {
    return (
      <div className="flex items-center justify-center py-16">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight md:text-3xl">Produits</h1>
          <p className="text-muted-foreground">
            Gerez votre catalogue de produits
          </p>
        </div>
        <Dialog open={isAddDialogOpen} onOpenChange={(open) => {
          setIsAddDialogOpen(open)
          if (!open) resetForm()
        }}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Ajouter un produit
            </Button>
          </DialogTrigger>
          <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>Ajouter un produit</DialogTitle>
              <DialogDescription>
                Remplissez les informations du nouveau produit
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid gap-2">
                <Label htmlFor="add-name">Nom du produit *</Label>
                <Input 
                  id="add-name" 
                  placeholder="Ex: Tricycle Cargo 200cc"
                  value={formName}
                  onChange={(e) => setFormName(e.target.value)}
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="add-slug">Slug (URL) *</Label>
                <Input 
                  id="add-slug" 
                  placeholder="Ex: tricycle-cargo-200cc"
                  value={formSlug}
                  onChange={(e) => setFormSlug(e.target.value.toLowerCase().replace(/\s+/g, '-'))}
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="add-category">Categorie *</Label>
                  <Select 
                    value={formCategory}
                    onValueChange={(value: "tricycle" | "moto" | "piece") => setFormCategory(value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Choisir" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="tricycle">Tricycle</SelectItem>
                      <SelectItem value="moto">Moto</SelectItem>
                      <SelectItem value="piece">Piece detachee</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="add-subcategory">Sous-categorie</Label>
                  <Input 
                    id="add-subcategory" 
                    placeholder="Ex: Cargo"
                    value={formSubcategory}
                    onChange={(e) => setFormSubcategory(e.target.value)}
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="add-price">Prix (FCFA) *</Label>
                  <Input 
                    id="add-price" 
                    type="number" 
                    placeholder="1850000"
                    value={formPrice}
                    onChange={(e) => setFormPrice(e.target.value)}
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="add-oldPrice">Ancien prix (FCFA)</Label>
                  <Input 
                    id="add-oldPrice" 
                    type="number" 
                    placeholder="2100000"
                    value={formOldPrice}
                    onChange={(e) => setFormOldPrice(e.target.value)}
                  />
                </div>
              </div>
              <div className="grid gap-2">
                <Label htmlFor="add-shortDescription">Description courte *</Label>
                <Input 
                  id="add-shortDescription" 
                  placeholder="Description en une ligne"
                  value={formShortDescription}
                  onChange={(e) => setFormShortDescription(e.target.value)}
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="add-description">Description complete *</Label>
                <Textarea 
                  id="add-description" 
                  rows={4} 
                  placeholder="Description detaillee du produit"
                  value={formDescription}
                  onChange={(e) => setFormDescription(e.target.value)}
                />
              </div>
              <div className="grid gap-2">
                <Label>Images du produit</Label>
                <div className="flex flex-wrap gap-2 mb-2">
                  {uploadedImages.map((url, index) => (
                    <div key={index} className="relative group">
                      <Image 
                        src={url} 
                        alt={`Image ${index + 1}`} 
                        width={80} 
                        height={80} 
                        className="rounded-md object-cover border"
                      />
                      <button
                        type="button"
                        onClick={() => removeImage(url)}
                        className="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                      >
                        <X className="h-3 w-3" />
                      </button>
                    </div>
                  ))}
                  {uploadedImages.length === 0 && (
                    <div className="flex items-center justify-center w-20 h-20 border-2 border-dashed rounded-md text-muted-foreground">
                      <ImageIcon className="h-6 w-6" />
                    </div>
                  )}
                </div>
                <div className="flex gap-2">
                  <label className="flex-1">
                    <div className="flex items-center justify-center gap-2 px-4 py-2 border border-dashed rounded-md cursor-pointer hover:bg-muted/50 transition-colors">
                      {isUploading ? (
                        <Loader2 className="h-4 w-4 animate-spin" />
                      ) : (
                        <Upload className="h-4 w-4" />
                      )}
                      <span className="text-sm">Telecharger des images</span>
                    </div>
                    <input
                      type="file"
                      accept="image/*"
                      multiple
                      onChange={handleImageUpload}
                      className="hidden"
                      disabled={isUploading}
                    />
                  </label>
                </div>
                <Input 
                  id="add-images" 
                  placeholder="Ou entrez des URLs separes par des virgules"
                  value={formImages}
                  onChange={(e) => setFormImages(e.target.value)}
                  className="mt-2"
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="add-features">Caracteristiques (une par ligne)</Label>
                <Textarea 
                  id="add-features" 
                  rows={3} 
                  placeholder="Moteur 200CC refroidi par eau
Benne basculante hydraulique
Charge utile 500kg"
                  value={formFeatures}
                  onChange={(e) => setFormFeatures(e.target.value)}
                />
              </div>
              <div className="grid gap-2">
                <div className="flex items-center justify-between">
                  <Label>Specifications</Label>
                  <Button type="button" variant="outline" size="sm" onClick={addSpecRow} className="h-7 text-xs bg-transparent">
                    <Plus className="h-3 w-3 mr-1" /> Ajouter
                  </Button>
                </div>
                <div className="space-y-2">
                  {formSpecs.map((spec, index) => (
                    <div key={index} className="flex gap-2 items-center">
                      <Input
                        placeholder="Ex: Moteur"
                        value={spec.key}
                        onChange={(e) => updateSpecRow(index, "key", e.target.value)}
                        className="flex-1"
                      />
                      <Input
                        placeholder="Ex: 200CC"
                        value={spec.value}
                        onChange={(e) => updateSpecRow(index, "value", e.target.value)}
                        className="flex-1"
                      />
                      {formSpecs.length > 1 && (
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          onClick={() => removeSpecRow(index)}
                          className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      )}
                    </div>
                  ))}
                </div>
              </div>
              <div className="flex items-center gap-4">
                <label className="flex items-center gap-2 text-sm">
                  <input 
                    type="checkbox" 
                    className="rounded border-border"
                    checked={formInStock}
                    onChange={(e) => setFormInStock(e.target.checked)}
                  />
                  En stock
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input 
                    type="checkbox" 
                    className="rounded border-border"
                    checked={formIsBestSeller}
                    onChange={(e) => setFormIsBestSeller(e.target.checked)}
                  />
                  Best-seller
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input 
                    type="checkbox" 
                    className="rounded border-border"
                    checked={formIsNew}
                    onChange={(e) => setFormIsNew(e.target.checked)}
                  />
                  Nouveau
                </label>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddDialogOpen(false)} className="bg-transparent">
                Annuler
              </Button>
              <Button onClick={handleSubmit} disabled={isSubmitting}>
                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Ajouter le produit
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

{/* Edit Dialog */}
      <Dialog open={isEditDialogOpen} onOpenChange={(open) => {
        setIsEditDialogOpen(open)
        if (!open) {
          setEditingProduct(null)
          resetForm()
        }
      }}>
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Modifier le produit</DialogTitle>
            <DialogDescription>
              Modifiez les informations du produit
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="edit-name">Nom du produit *</Label>
              <Input 
                id="edit-name" 
                placeholder="Ex: Tricycle Cargo 200cc"
                value={formName}
                onChange={(e) => setFormName(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="edit-slug">Slug (URL) *</Label>
              <Input 
                id="edit-slug" 
                placeholder="Ex: tricycle-cargo-200cc"
                value={formSlug}
                onChange={(e) => setFormSlug(e.target.value.toLowerCase().replace(/\s+/g, '-'))}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="grid gap-2">
                <Label htmlFor="edit-category">Categorie *</Label>
                <Select 
                  value={formCategory}
                  onValueChange={(value: "tricycle" | "moto" | "piece") => setFormCategory(value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Choisir" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="tricycle">Tricycle</SelectItem>
                    <SelectItem value="moto">Moto</SelectItem>
                    <SelectItem value="piece">Piece detachee</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="grid gap-2">
                <Label htmlFor="edit-subcategory">Sous-categorie</Label>
                <Input 
                  id="edit-subcategory" 
                  placeholder="Ex: Cargo"
                  value={formSubcategory}
                  onChange={(e) => setFormSubcategory(e.target.value)}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="grid gap-2">
                <Label htmlFor="edit-price">Prix (FCFA) *</Label>
                <Input 
                  id="edit-price" 
                  type="number" 
                  placeholder="1850000"
                  value={formPrice}
                  onChange={(e) => setFormPrice(e.target.value)}
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="edit-oldPrice">Ancien prix (FCFA)</Label>
                <Input 
                  id="edit-oldPrice" 
                  type="number" 
                  placeholder="2100000"
                  value={formOldPrice}
                  onChange={(e) => setFormOldPrice(e.target.value)}
                />
              </div>
            </div>
            <div className="grid gap-2">
              <Label htmlFor="edit-shortDescription">Description courte *</Label>
              <Input 
                id="edit-shortDescription" 
                placeholder="Description en une ligne"
                value={formShortDescription}
                onChange={(e) => setFormShortDescription(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="edit-description">Description complete *</Label>
              <Textarea 
                id="edit-description" 
                rows={4} 
                placeholder="Description detaillee du produit"
                value={formDescription}
                onChange={(e) => setFormDescription(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <Label>Images du produit</Label>
              <div className="flex flex-wrap gap-2 mb-2">
                {uploadedImages.map((url, index) => (
                  <div key={index} className="relative group">
                    <Image 
                      src={url} 
                      alt={`Image ${index + 1}`} 
                      width={80} 
                      height={80} 
                      className="rounded-md object-cover border"
                    />
                    <button
                      type="button"
                      onClick={() => removeImage(url)}
                      className="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </div>
                ))}
                {uploadedImages.length === 0 && (
                  <div className="flex items-center justify-center w-20 h-20 border-2 border-dashed rounded-md text-muted-foreground">
                    <ImageIcon className="h-6 w-6" />
                  </div>
                )}
              </div>
              <div className="flex gap-2">
                <label className="flex-1">
                  <div className="flex items-center justify-center gap-2 px-4 py-2 border border-dashed rounded-md cursor-pointer hover:bg-muted/50 transition-colors">
                    {isUploading ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <Upload className="h-4 w-4" />
                    )}
                    <span className="text-sm">Telecharger des images</span>
                  </div>
                  <input
                    type="file"
                    accept="image/*"
                    multiple
                    onChange={handleImageUpload}
                    className="hidden"
                    disabled={isUploading}
                  />
                </label>
              </div>
              <Input 
                id="edit-images" 
                placeholder="Ou entrez des URLs separes par des virgules"
                value={formImages}
                onChange={(e) => setFormImages(e.target.value)}
                className="mt-2"
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="edit-features">Caracteristiques (une par ligne)</Label>
              <Textarea 
                id="edit-features" 
                rows={3} 
                placeholder="Moteur 200CC refroidi par eau
Benne basculante hydraulique
Charge utile 500kg"
                value={formFeatures}
                onChange={(e) => setFormFeatures(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center justify-between">
                <Label>Specifications</Label>
                <Button type="button" variant="outline" size="sm" onClick={addSpecRow} className="h-7 text-xs bg-transparent">
                  <Plus className="h-3 w-3 mr-1" /> Ajouter
                </Button>
              </div>
              <div className="space-y-2">
                {formSpecs.map((spec, index) => (
                  <div key={index} className="flex gap-2 items-center">
                    <Input
                      placeholder="Ex: Moteur"
                      value={spec.key}
                      onChange={(e) => updateSpecRow(index, "key", e.target.value)}
                      className="flex-1"
                    />
                    <Input
                      placeholder="Ex: 200CC"
                      value={spec.value}
                      onChange={(e) => updateSpecRow(index, "value", e.target.value)}
                      className="flex-1"
                    />
                    {formSpecs.length > 1 && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        onClick={() => removeSpecRow(index)}
                        className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                ))}
              </div>
            </div>
            <div className="flex items-center gap-4">
              <label className="flex items-center gap-2 text-sm">
                <input 
                  type="checkbox" 
                  className="rounded border-border"
                  checked={formInStock}
                  onChange={(e) => setFormInStock(e.target.checked)}
                />
                En stock
              </label>
              <label className="flex items-center gap-2 text-sm">
                <input 
                  type="checkbox" 
                  className="rounded border-border"
                  checked={formIsBestSeller}
                  onChange={(e) => setFormIsBestSeller(e.target.checked)}
                />
                Best-seller
              </label>
              <label className="flex items-center gap-2 text-sm">
                <input 
                  type="checkbox" 
                  className="rounded border-border"
                  checked={formIsNew}
                  onChange={(e) => setFormIsNew(e.target.checked)}
                />
                Nouveau
              </label>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsEditDialogOpen(false)} className="bg-transparent">
              Annuler
            </Button>
            <Button onClick={handleUpdate} disabled={isSubmitting}>
              {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Enregistrer les modifications
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Stats Cards */}
      <div className="grid gap-4 sm:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Total produits
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{products.length}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              En stock
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{inStockCount}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Rupture de stock
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-destructive">
              {outOfStockCount}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <Card>
        <CardHeader>
          <CardTitle>Liste des produits</CardTitle>
          <CardDescription>
            {filteredProducts.length} produit(s) trouve(s)
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-4 flex flex-col gap-4 sm:flex-row">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Rechercher un produit..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={categoryFilter} onValueChange={setCategoryFilter}>
              <SelectTrigger className="w-full sm:w-[180px]">
                <SelectValue placeholder="Categorie" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Toutes categories</SelectItem>
                <SelectItem value="tricycle">Tricycles</SelectItem>
                <SelectItem value="moto">Motos</SelectItem>
                <SelectItem value="piece">Pieces detachees</SelectItem>
              </SelectContent>
            </Select>
          </div>

{/* Products Table */}
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Produit</TableHead>
                  <TableHead className="hidden md:table-cell">Categorie</TableHead>
                  <TableHead>Prix</TableHead>
                  <TableHead className="hidden sm:table-cell">Stock</TableHead>
                  <TableHead className="hidden lg:table-cell">Note</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredProducts.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
                      Aucun produit trouve
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredProducts.map((product) => (
                    <TableRow key={product.id}>
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <div className="h-12 w-12 overflow-hidden rounded-lg bg-muted">
                            <img
                              src={product.images[0] || "/placeholder.svg"}
                              alt={product.name}
                              className="h-full w-full object-cover"
                            />
                          </div>
                          <div>
                            <div className="font-medium">{product.name}</div>
                            <div className="text-xs text-muted-foreground">
                              {product.slug}
                            </div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell className="hidden md:table-cell">
                        <Badge variant="outline">
                          {categoryLabels[product.category]}
                        </Badge>
                        {product.subcategory && (
                          <span className="ml-2 text-xs text-muted-foreground">
                            {product.subcategory}
                          </span>
                        )}
                      </TableCell>
                      <TableCell>
                        <div className="font-medium">{formatPrice(product.price)}</div>
                        {product.old_price && (
                          <div className="text-xs text-muted-foreground line-through">
                            {formatPrice(product.old_price)}
                          </div>
                        )}
                      </TableCell>
                      <TableCell className="hidden sm:table-cell">
                        <Badge variant={product.in_stock ? "default" : "destructive"}>
                          {product.in_stock ? "En stock" : "Rupture"}
                        </Badge>
                      </TableCell>
                      <TableCell className="hidden lg:table-cell">
                        <div className="flex items-center gap-1">
                          <span className="text-yellow-500">★</span>
                          <span>{product.rating}</span>
                          <span className="text-muted-foreground">({product.reviews})</span>
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                              <span className="sr-only">Actions</span>
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem asChild>
                              <Link href={`/produits/${product.slug}`} target="_blank">
                                <Eye className="mr-2 h-4 w-4" />
                                Voir
                              </Link>
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => openEditDialog(product)}>
                              <Pencil className="mr-2 h-4 w-4" />
                              Modifier
                            </DropdownMenuItem>
                            <DropdownMenuItem 
                              className="text-destructive"
                              onClick={() => handleDelete(product.id, product.name)}
                            >
                              <Trash2 className="mr-2 h-4 w-4" />
                              Supprimer
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/advantages-section.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import { Eye, Target, Flag, Heart, Sparkles, Zap, Shield, Handshake } from "lucide-react"

const advantages = [
  {
    icon: Eye,
    title: "Notre Vision",
    description: "Devenir le leader incontournable de la mobilité durable au Sénégal et en Afrique de l'Ouest, en offrant des solutions de transport accessibles et de qualité à tous.",
    color: "from-blue-500 to-cyan-500",
    bgColor: "bg-blue-500/10",
  },
  {
    icon: Target,
    title: "Notre Mission",
    description: "Fournir des tricycles, motos et pièces détachées de haute qualité à des prix compétitifs, tout en garantissant un service client exceptionnel et un accompagnement personnalisé.",
    color: "from-purple-500 to-pink-500",
    bgColor: "bg-purple-500/10",
  },
  {
    icon: Flag,
    title: "Nos Objectifs",
    description: "Élargir notre réseau de distribution, former nos partenaires, innover dans nos solutions de mobilité et contribuer au développement économique local.",
    color: "from-orange-500 to-red-500",
    bgColor: "bg-orange-500/10",
  },
  {
    icon: Heart,
    title: "Nos Valeurs",
    description: "Intégrité, qualité, proximité et engagement. Ces valeurs guident chacune de nos actions et nos relations avec nos clients et partenaires.",
    color: "from-green-500 to-emerald-500",
    bgColor: "bg-green-500/10",
  },
]

const values = [
  { icon: Sparkles, label: "Qualité", desc: "Produits testés et certifiés" },
  { icon: Handshake, label: "Proximité", desc: "Service personnalisé" },
  { icon: Shield, label: "Intégrité", desc: "Transparence totale" },
  { icon: Zap, label: "Engagement", desc: "Satisfaction garantie" },
]

export function AdvantagesSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-24 lg:py-32 bg-background overflow-hidden">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center max-w-3xl mx-auto mb-16"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={isInView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
          >
            <span className="text-sm font-semibold text-primary">Nos Avantages</span>
          </motion.div>
          <h2 className="text-3xl lg:text-4xl xl:text-5xl font-bold text-foreground mb-6">
            <span className="text-balance">Pourquoi choisir </span>
            <span className="text-primary">Hasilaza Motor</span>?
          </h2>
          <p className="text-lg text-muted-foreground leading-relaxed">
            Nous nous engageons à offrir les meilleurs produits et services pour répondre à vos besoins de mobilité
          </p>
        </motion.div>

{/* Advantages Cards */}
        <div className="grid md:grid-cols-2 gap-6 lg:gap-8 mb-20">
          {advantages.map((item, index) => {
            const Icon = item.icon
            return (
              <motion.div
                key={item.title}
                initial={{ opacity: 0, y: 50 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
                whileHover={{ y: -8, scale: 1.02 }}
                className="group relative bg-background border border-border rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden"
              >
                {/* Background Gradient */}
                <div className={`absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl ${item.color} opacity-5 rounded-full blur-3xl group-hover:opacity-10 transition-opacity`} />
                
                {/* Icon */}
                <motion.div
                  whileHover={{ scale: 1.1, rotate: 5 }}
                  className={`w-16 h-16 ${item.bgColor} rounded-2xl flex items-center justify-center mb-6 relative z-10`}
                >
                  <Icon className="w-8 h-8 text-foreground" />
                </motion.div>

{/* Content */}
                <h3 className="text-xl font-bold text-foreground mb-4 relative z-10">{item.title}</h3>
                <p className="text-muted-foreground leading-relaxed relative z-10">{item.description}</p>

{/* Hover Line */}
                <motion.div
                  initial={{ scaleX: 0 }}
                  whileHover={{ scaleX: 1 }}
                  transition={{ duration: 0.3 }}
                  className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${item.color} origin-left`}
                />
              </motion.div>
            )
          })}
        </div>

{/* Values Section */}
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.6 }}
          className="bg-foreground rounded-3xl p-8 lg:p-12"
        >
          <div className="text-center mb-10">
            <h3 className="text-2xl lg:text-3xl font-bold text-background mb-4">
              Nos 4 Piliers Fondamentaux
            </h3>
            <p className="text-background/70 max-w-2xl mx-auto">
              Ces valeurs sont au coeur de tout ce que nous faisons
            </p>
          </div>

<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
            {values.map((value, index) => {
              const Icon = value.icon
              return (
                <motion.div
                  key={value.label}
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={isInView ? { opacity: 1, scale: 1 } : {}}
                  transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
                  whileHover={{ y: -5, scale: 1.05 }}
                  className="bg-background/10 backdrop-blur-sm rounded-xl sm:rounded-2xl p-3 sm:p-6 text-center border border-background/10 hover:bg-background/20 transition-all cursor-default overflow-hidden min-w-0"
                >
                  <div className="w-10 h-10 sm:w-14 sm:h-14 bg-primary rounded-lg sm:rounded-xl flex items-center justify-center mx-auto mb-2 sm:mb-4">
                    <Icon className="w-5 h-5 sm:w-7 sm:h-7 text-primary-foreground" />
                  </div>
                  <h4 className="font-bold text-background text-xs sm:text-base mb-1 break-words">{value.label}</h4>
                  <p className="text-[10px] sm:text-sm text-background/60 line-clamp-2">{value.desc}</p>
                </motion.div>
              )
            })}
          </div>
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/hero-section.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import { motion, useScroll, useTransform } from "framer-motion"
import { ArrowRight, Play, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

const stats = [
  { value: "+5", label: "Années d'expérience", suffix: "ans" },
  { value: "100", label: "Clients satisfaits", suffix: "%" },
  { value: "N°1", label: "Au Sénégal", suffix: "" },
]

const features = [
  "Livraison gratuite sur Dakar",
  "Garantie 2 ans incluse",
  "Service après-vente réactif",
]

export function HeroSection() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end start"]
  })

const y = useTransform(scrollYProgress, [0, 1], [0, 200])
  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0])
  const scale = useTransform(scrollYProgress, [0, 0.5], [1, 0.9])

return (
    <section 
      ref={containerRef}
      className="relative min-h-screen flex items-center overflow-hidden bg-background pt-20 md:pt-32 pb-12 md:pb-20"
    >
      {/* Background Elements */}
      <div className="absolute inset-0 overflow-hidden">
        <motion.div 
          style={{ y }}
          className="absolute -top-40 -right-40 w-[600px] h-[600px] bg-primary/10 rounded-full blur-3xl"
        />
        <motion.div 
          style={{ y: useTransform(scrollYProgress, [0, 1], [0, 100]) }}
          className="absolute -bottom-20 -left-20 w-[400px] h-[400px] bg-primary/5 rounded-full blur-3xl"
        />
        {/* Animated Grid Pattern */}
        <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.02)_1px,transparent_1px)] bg-[size:60px_60px]" />
      </div>

<div className="container mx-auto px-4 relative z-10">
        <motion.div style={{ opacity, scale }} className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
          {/* Content */}
          <div className="order-2 lg:order-1">
            {/* Badge */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
            >
              <span className="w-2 h-2 bg-primary rounded-full animate-pulse" />
              <span className="text-sm font-medium text-primary">Leader au Sénégal depuis 2018</span>
            </motion.div>

{/* Heading */}
            <motion.h1
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold text-foreground leading-tight mb-4 md:mb-6"
            >
              <span className="text-balance">Motos & Tricycles de</span>{" "}
              <span className="relative inline-block">
                <span className="text-primary">Qualité</span>
                <motion.svg
                  initial={{ pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={{ duration: 1, delay: 0.8 }}
                  className="absolute -bottom-2 left-0 w-full"
                  viewBox="0 0 200 12"
                  fill="none"
                >
                  <motion.path
                    d="M2 8C50 2 150 2 198 8"
                    stroke="currentColor"
                    strokeWidth="4"
                    strokeLinecap="round"
                    className="text-primary/40"
                  />
                </motion.svg>
              </span>
            </motion.h1>

{/* Description */}
            <motion.p
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="text-lg text-muted-foreground mb-8 max-w-xl leading-relaxed"
            >
              Hasilaza Motor est votre partenaire de confiance pour l{"'"}achat de tricycles cargo, 
              motos et pièces détachées. Nous offrons les meilleurs prix du marché avec une garantie complète.
            </motion.p>

{/* Features List */}
            <motion.ul
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="flex flex-wrap gap-4 mb-10"
            >
              {features.map((feature, index) => (
                <motion.li
                  key={feature}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.4, delay: 0.4 + index * 0.1 }}
                  className="flex items-center gap-2 text-sm text-foreground/80"
                >
                  <CheckCircle className="w-4 h-4 text-primary" />
                  {feature}
                </motion.li>
              ))}
            </motion.ul>

{/* CTA Buttons */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="flex flex-wrap gap-4 mb-12"
            >
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button asChild size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground h-14 px-8 text-base shadow-xl shadow-primary/30">
                  <Link href="/produits" className="flex items-center gap-2">
                    Voir nos produits
                    <ArrowRight className="w-5 h-5" />
                  </Link>
                </Button>
              </motion.div>
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button variant="outline" size="lg" className="h-14 px-8 text-base border-2 hover:bg-muted bg-transparent">
                  <a 
                    href="https://wa.me/221781094091?text=Bonjour, je souhaite en savoir plus sur vos produits" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="flex items-center gap-2"
                  >
                    <Play className="w-5 h-5" />
                    Contactez-nous
                  </a>
                </Button>
              </motion.div>
            </motion.div>

{/* Stats */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.5 }}
              className="grid grid-cols-2 sm:flex sm:flex-wrap gap-4 sm:gap-8 lg:gap-12"
            >
              {stats.map((stat, index) => (
                <motion.div
                  key={stat.label}
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
                  className="text-center"
                >
                  <div className="text-xl sm:text-2xl lg:text-4xl font-bold text-primary">
                    {stat.value}
                    <span className="text-sm sm:text-lg">{stat.suffix}</span>
                  </div>
                  <div className="text-xs sm:text-sm text-muted-foreground mt-1">{stat.label}</div>
                </motion.div>
              ))}
            </motion.div>
          </div>

{/* Image */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="order-1 lg:order-2 relative"
          >
            <div className="relative">
              {/* Main Image Container */}
              <motion.div
                animate={{ 
                  y: [0, -20, 0],
                }}
                transition={{
                  duration: 6,
                  repeat: Infinity,
                  ease: "easeInOut"
                }}
                className="relative z-10"
              >
                <div className="relative aspect-square max-w-xs md:max-w-md lg:max-w-lg mx-auto">
                  <div className="absolute inset-0 bg-primary/20 rounded-3xl blur-3xl transform rotate-6" />
                  <div className="relative bg-muted rounded-3xl overflow-hidden shadow-2xl">
                    <Image
                      src="/images/tricycle-200cc.jpg"
                      alt="Tricycle Cargo Hasilaza Motor"
                      width={600}
                      height={600}
                      className="w-full h-full object-cover"
                      priority
                    />
                    {/* Overlay Badge */}
                    <motion.div
                      initial={{ opacity: 0, scale: 0 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ duration: 0.5, delay: 1 }}
                      className="absolute top-6 right-6 bg-primary text-primary-foreground px-4 py-2 rounded-full font-bold text-sm shadow-lg"
                    >
                      Best-Seller
                    </motion.div>
                  </div>
                </div>
              </motion.div>

{/* Floating Cards - hidden on small screens, compact on medium */}
              <motion.div
                initial={{ opacity: 0, x: -50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.6, delay: 0.8 }}
                className="hidden md:block absolute -left-2 lg:-left-10 top-1/4 bg-background p-2.5 lg:p-4 rounded-xl lg:rounded-2xl shadow-xl border border-border z-20"
              >
                <div className="flex items-center gap-2 lg:gap-3">
                  <div className="w-8 h-8 lg:w-12 lg:h-12 bg-primary/10 rounded-lg lg:rounded-xl flex items-center justify-center shrink-0">
                    <svg className="w-4 h-4 lg:w-6 lg:h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <div>
                    <div className="font-bold text-foreground text-xs lg:text-base">Garantie 2 ans</div>
                    <div className="text-[10px] lg:text-xs text-muted-foreground">Pieces et main d{"'"}oeuvre</div>
                  </div>
                </div>
              </motion.div>

<motion.div
                initial={{ opacity: 0, x: 50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.6, delay: 1 }}
                className="hidden md:block absolute -right-2 lg:-right-10 bottom-1/4 bg-background p-2.5 lg:p-4 rounded-xl lg:rounded-2xl shadow-xl border border-border z-20"
              >
                <div className="flex items-center gap-2 lg:gap-3">
                  <div className="w-8 h-8 lg:w-12 lg:h-12 bg-primary/10 rounded-lg lg:rounded-xl flex items-center justify-center shrink-0">
                    <svg className="w-4 h-4 lg:w-6 lg:h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                  <div>
                    <div className="font-bold text-foreground text-xs lg:text-base">Livraison Express</div>
                    <div className="text-[10px] lg:text-xs text-muted-foreground">Partout au Senegal</div>
                  </div>
                </div>
              </motion.div>
            </div>
          </motion.div>
        </motion.div>
      </div>

{/* Scroll Indicator */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.5 }}
        className="absolute bottom-8 left-1/2 -translate-x-1/2"
      >
        <motion.div
          animate={{ y: [0, 10, 0] }}
          transition={{ duration: 1.5, repeat: Infinity }}
          className="flex flex-col items-center gap-2"
        >
          <span className="text-xs text-muted-foreground">Défiler</span>
          <div className="w-6 h-10 border-2 border-muted-foreground/30 rounded-full flex justify-center pt-2">
            <motion.div
              animate={{ y: [0, 12, 0] }}
              transition={{ duration: 1.5, repeat: Infinity }}
              className="w-1.5 h-1.5 bg-primary rounded-full"
            />
          </div>
        </motion.div>
      </motion.div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/mentions-legales/page.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function MentionsLegalesPage() {
  return (
    <main className="min-h-screen bg-background">
      <Header />
      <section className="pt-32 pb-20">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="max-w-3xl mx-auto"
          >
            <h1 className="text-3xl lg:text-4xl font-bold text-foreground mb-8">Mentions Legales</h1>

<div className="prose prose-lg max-w-none space-y-8 text-muted-foreground">
              <section>
                <h2 className="text-xl font-bold text-foreground mb-3">1. Editeur du site</h2>
                <p>Le site hasilaza.store est edite par :</p>
                <ul className="list-disc pl-6 space-y-1">
                  <li><strong className="text-foreground">Raison sociale :</strong> Hasilaza Motor</li>
                  <li><strong className="text-foreground">Siege social :</strong> HLM 2, Dakar, Senegal</li>
                  <li><strong className="text-foreground">Telephone :</strong> +221 781094091</li>
                  <li><strong className="text-foreground">Email :</strong> Mortalla581@gmail.com</li>
                  <li><strong className="text-foreground">Activite :</strong> Vente de motos, tricycles et pieces detachees</li>
                </ul>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">2. Hebergement</h2>
                <p>Le site est heberge par :</p>
                <ul className="list-disc pl-6 space-y-1">
                  <li><strong className="text-foreground">Hebergeur :</strong> Vercel Inc.</li>
                  <li><strong className="text-foreground">Adresse :</strong> 440 N Barranca Ave #4133, Covina, CA 91723, USA</li>
                  <li><strong className="text-foreground">Site web :</strong> vercel.com</li>
                </ul>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">3. Propriete intellectuelle</h2>
                <p>
                  L{"'"}ensemble du contenu du site hasilaza.store (textes, images, logos, photos, videos)
                  est la propriete exclusive de Hasilaza Motor, sauf mention contraire.
                  Toute reproduction, distribution, modification ou utilisation de ce contenu sans
                  autorisation prealable ecrite est strictement interdite.
                </p>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">4. Responsabilite</h2>
                <p>
                  Hasilaza Motor s{"'"}efforce d{"'"}assurer l{"'"}exactitude et la mise a jour des informations
                  diffusees sur ce site. Toutefois, Hasilaza Motor ne peut garantir l{"'"}exactitude,
                  la precision ou l{"'"}exhaustivite des informations mises a disposition sur ce site.
                </p>
                <p>
                  Hasilaza Motor decline toute responsabilite pour toute imprecision, inexactitude
                  ou omission portant sur des informations disponibles sur le site.
                </p>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">5. Liens hypertextes</h2>
                <p>
                  Le site hasilaza.store peut contenir des liens hypertextes vers d{"'"}autres sites internet.
                  Hasilaza Motor ne dispose d{"'"}aucun moyen de controle du contenu de ces sites tiers
                  et n{"'"}assume aucune responsabilite quant a leur contenu.
                </p>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">6. Droit applicable</h2>
                <p>
                  Les presentes mentions legales sont soumises au droit senegalais.
                  En cas de litige, les tribunaux de Dakar seront seuls competents.
                </p>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">7. Contact</h2>
                <p>
                  Pour toute question relative aux presentes mentions legales, vous pouvez nous contacter :
                </p>
                <ul className="list-disc pl-6 space-y-1">
                  <li>Par email : Mortalla581@gmail.com</li>
                  <li>Par telephone : +221 781094091</li>
                  <li>Par courrier : HLM 2, Dakar, Senegal</li>
                </ul>
              </section>
            </div>
          </motion.div>
        </div>
      </section>
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/politique-confidentialite/page.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function PolitiqueConfidentialitePage() {
  return (
    <main className="min-h-screen bg-background">
      <Header />
      <section className="pt-32 pb-20">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="max-w-3xl mx-auto"
          >
            <h1 className="text-3xl lg:text-4xl font-bold text-foreground mb-8">Politique de Confidentialite</h1>

<div className="prose prose-lg max-w-none space-y-8 text-muted-foreground">
              <p>
                Hasilaza Motor accorde une grande importance a la protection de vos donnees
                personnelles. La presente politique de confidentialite a pour objet de vous informer
                sur la maniere dont nous collectons, utilisons et protegeons vos informations.
              </p>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">1. Donnees collectees</h2>
                <p>Nous collectons les donnees suivantes lors de votre utilisation du site :</p>
                <ul className="list-disc pl-6 space-y-1">
                  <li><strong className="text-foreground">Donnees d{"'"}identification :</strong> nom, prenom, adresse email, numero de telephone</li>
                  <li><strong className="text-foreground">Donnees de commande :</strong> adresse de livraison, ville, produits commandes</li>
                  <li><strong className="text-foreground">Donnees de depannage :</strong> type de vehicule, description de la panne</li>
                  <li><strong className="text-foreground">Donnees de navigation :</strong> adresse IP, type de navigateur, pages consultees</li>
                </ul>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">2. Finalites du traitement</h2>
                <p>Vos donnees personnelles sont collectees pour les finalites suivantes :</p>
                <ul className="list-disc pl-6 space-y-1">
                  <li>Traitement et suivi de vos commandes</li>
                  <li>Gestion des demandes de depannage</li>
                  <li>Communication relative a nos produits et services</li>
                  <li>Amelioration de nos services et de l{"'"}experience utilisateur</li>
                  <li>Reponse a vos demandes de contact</li>
                </ul>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">3. Destinataires des donnees</h2>
                <p>
                  Vos donnees personnelles sont destinees exclusivement a l{"'"}equipe de Hasilaza Motor.
                  Elles ne sont jamais vendues, echangees ou louees a des tiers.
                  Seuls les responsables de la gestion des commandes et du service client
                  ont acces a vos informations.
                </p>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">4. Duree de conservation</h2>
                <p>
                  Vos donnees personnelles sont conservees pendant la duree necessaire
                  a la realisation des finalites pour lesquelles elles ont ete collectees :
                </p>
                <ul className="list-disc pl-6 space-y-1">
                  <li>Donnees de commande : 5 ans apres la derniere commande</li>
                  <li>Donnees de contact : 3 ans apres le dernier contact</li>
                  <li>Donnees de navigation : 13 mois maximum</li>
                </ul>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">5. Securite des donnees</h2>
                <p>
                  Nous mettons en oeuvre toutes les mesures techniques et organisationnelles
                  necessaires pour assurer la securite et la confidentialite de vos donnees
                  personnelles, notamment contre tout acces, modification ou divulgation non autorisee.
                </p>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">6. Vos droits</h2>
                <p>
                  Conformement a la legislation en vigueur, vous disposez des droits suivants
                  concernant vos donnees personnelles :
                </p>
                <ul className="list-disc pl-6 space-y-1">
                  <li><strong className="text-foreground">Droit d{"'"}acces :</strong> obtenir la confirmation du traitement de vos donnees</li>
                  <li><strong className="text-foreground">Droit de rectification :</strong> demander la correction de donnees inexactes</li>
                  <li><strong className="text-foreground">Droit de suppression :</strong> demander la suppression de vos donnees</li>
                  <li><strong className="text-foreground">Droit d{"'"}opposition :</strong> vous opposer au traitement de vos donnees</li>
                </ul>
                <p className="mt-3">
                  Pour exercer ces droits, contactez-nous a : Mortalla581@gmail.com
                </p>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">7. Cookies</h2>
                <p>
                  Le site hasilaza.store utilise des cookies techniques necessaires au bon
                  fonctionnement du site. Ces cookies ne collectent aucune donnee personnelle
                  a des fins publicitaires.
                </p>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">8. Modification de la politique</h2>
                <p>
                  Hasilaza Motor se reserve le droit de modifier la presente politique de
                  confidentialite a tout moment. Toute modification sera publiee sur cette page.
                </p>
                <p className="mt-3">
                  <strong className="text-foreground">Derniere mise a jour :</strong> Fevrier 2026
                </p>
              </section>

<section>
                <h2 className="text-xl font-bold text-foreground mb-3">9. Contact</h2>
                <p>
                  Pour toute question relative a la presente politique de confidentialite :
                </p>
                <ul className="list-disc pl-6 space-y-1">
                  <li>Email : Mortalla581@gmail.com</li>
                  <li>Telephone : +221 781094091</li>
                  <li>Adresse : HLM 2, Dakar, Senegal</li>
                </ul>
              </section>
            </div>
          </motion.div>
        </div>
      </section>
      <Footer />
    </main>
  )
}
[V0_FILE]jpg:file="public/images/pieces/plaquettes-frein.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/pieces/plaquettes-frein-ASafYLsqsWJawd3hzMHNbj698NkaPH.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/pieces/kit-chaine.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/pieces/kit-chaine-Ah6Yiv8yLIS3lXSmqhbKsEFm2WbHcl.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/pieces/filtre-air.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/pieces/filtre-air-wrSYbDPptAL4h8QQxs5egA8Ndod5Kf.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/pieces/batterie.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/pieces/batterie-of0SPsjSrkOGM4aQ8otoQeTjWzB1F2.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/pieces/bougie.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/pieces/bougie-7rjqWnUZ5M2Me4ZySGGkvYTLjXmZOg.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/pieces/pneu-tricycle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/pieces/pneu-tricycle-40SoBVgQ9RC6Ya6SPUWUCjcImDr9ff.jpg" isMerged="true"
[V0_FILE]sql:file="scripts/add-spare-parts.sql" isMerged="true"
INSERT INTO products (slug, name, category, subcategory, price, description, short_description, specifications, features, images, in_stock, is_new, rating, reviews)
VALUES
(
  'plaquettes-frein-moto',
  'Plaquettes de Frein Moto',
  'piece',
  'freinage',
  8500,
  'Plaquettes de frein haute performance pour motos 125cc a 250cc. Materiau semi-metallique offrant une excellente puissance de freinage et une longue duree de vie. Compatible avec la plupart des modeles de motos Hasilaza.',
  'Plaquettes de frein haute performance pour motos',
  '{"Compatibilite": "125cc - 250cc", "Materiau": "Semi-metallique", "Type": "Avant / Arriere", "Garantie": "3 mois"}',
  '["Haute resistance a l''usure", "Freinage progressif et puissant", "Compatible motos Hasilaza", "Installation facile"]',
  '["/images/pieces/plaquettes-frein.jpg"]',
  true,
  false,
  4.7,
  45
),
(
  'kit-chaine-transmission',
  'Kit Chaine de Transmission',
  'piece',
  'transmission',
  25000,
  'Kit complet de chaine de transmission comprenant la chaine, le pignon et la couronne. Acier trempe haute resistance pour une duree de vie prolongee. Compatible motos et tricycles Hasilaza.',
  'Kit complet chaine, pignon et couronne',
  '{"Composants": "Chaine + Pignon + Couronne", "Materiau": "Acier trempe", "Compatibilite": "150cc - 300cc", "Garantie": "6 mois"}',
  '["Acier haute resistance", "Kit complet pret a monter", "Compatible motos et tricycles", "Duree de vie prolongee"]',
  '["/images/pieces/kit-chaine.jpg"]',
  true,
  false,
  4.8,
  38
),
(
  'batterie-12v-moto',
  'Batterie 12V Moto/Tricycle',
  'piece',
  'electrique',
  35000,
  'Batterie 12V haute capacite pour motos et tricycles. Technologie sans entretien avec une excellente resistance aux vibrations. Demarrage fiable meme par temps chaud.',
  'Batterie 12V sans entretien pour motos et tricycles',
  '{"Voltage": "12V", "Capacite": "9Ah", "Type": "Sans entretien", "Garantie": "6 mois"}',
  '["Sans entretien", "Resistance aux vibrations", "Demarrage fiable", "Longue duree de vie"]',
  '["/images/pieces/batterie.jpg"]',
  true,
  true,
  4.9,
  62
),
(
  'filtre-air-universel',
  'Filtre a Air Universel',
  'piece',
  'moteur',
  6500,
  'Filtre a air haute filtration pour motos et tricycles. Protege efficacement le moteur contre les poussieres et particules. Facile a nettoyer et a remplacer.',
  'Filtre a air haute filtration universel',
  '{"Compatibilite": "Universel 125cc - 300cc", "Type": "Filtre papier", "Filtration": "Haute performance", "Garantie": "3 mois"}',
  '["Haute filtration des particules", "Protege le moteur", "Facile a remplacer", "Compatible universel"]',
  '["/images/pieces/filtre-air.jpg"]',
  true,
  false,
  4.5,
  29
),
(
  'bougie-allumage',
  'Bougie d''Allumage',
  'piece',
  'moteur',
  3500,
  'Bougie d''allumage haute performance pour un demarrage rapide et une combustion optimale. Compatible avec tous les modeles de motos et tricycles Hasilaza.',
  'Bougie d''allumage haute performance',
  '{"Type": "Standard", "Compatibilite": "Universel", "Electrode": "Nickel", "Garantie": "3 mois"}',
  '["Demarrage rapide", "Combustion optimale", "Compatible universel", "Longue duree de vie"]',
  '["/images/pieces/bougie.jpg"]',
  true,
  false,
  4.6,
  53
),
(
  'pneu-tricycle-450-12',
  'Pneu Tricycle 4.50-12',
  'piece',
  'pneumatique',
  28000,
  'Pneu robuste pour tricycles cargo. Profil cramponne pour une excellente adherence sur tous types de terrain. Flancs renforces pour supporter les charges lourdes.',
  'Pneu robuste pour tricycles cargo',
  '{"Taille": "4.50-12", "Type": "Cramponne", "Charge max": "500 kg", "Garantie": "6 mois"}',
  '["Adherence sur tous terrains", "Flancs renforces", "Supporte charges lourdes", "Haute resistance a l''usure"]',
  '["/images/pieces/pneu-tricycle.jpg"]',
  true,
  true,
  4.8,
  41
);
[V0_FILE]javascript:file="scripts/insert-pieces.js" isMerged="true"
// Parse the spare parts list and generate SQL insert statements
const pieces = [
  { name: "Robinet d'essence", compat: "200cc, 250cc et 300cc", stock: 100, price: 1000 },
  { name: "Bache devant", compat: "200cc, 250cc et 300cc", stock: 50, price: 25000 },
  { name: "Cable de frein", compat: "200cc, 250cc et 300cc", stock: 20, price: 1000 },
  { name: "Casque", compat: "200cc, 250cc et 300cc", stock: 50, price: 5000 },
  { name: "Joint de culasse", compat: "200cc, 250cc et 300cc", stock: 50, price: 500 },
  { name: "Arret d'huile", compat: "200cc, 250cc et 300cc", stock: 50, price: 500 },
  { name: "Ressort/Patte moteur", compat: "200cc, 250cc et 300cc", stock: 20, price: 1000 },
  { name: "Faisceau de cable", compat: "200cc, 250cc et 300cc", stock: 10, price: 10000 },
  { name: "Pignon pont 200CC", compat: "200 CC AIR", stock: 40, price: 15000, ref: "200CC" },
  { name: "Roulement pont complet 200CC", compat: "200 CC AIR", stock: 50, price: 12000, ref: "200CC" },
  { name: "Tambour de frein", compat: "200cc, 250cc et 300cc", stock: 10, price: 10000 },
  { name: "Maitre Cylindre principale", compat: "250cc et 300cc", stock: 20, price: 10000 },
  { name: "Maitre Cylindre", compat: "250cc et 300cc", stock: 50, price: 5000 },
  { name: "Filtre complet", compat: "200cc, 250cc et 300cc", stock: 50, price: 5000 },
  { name: "Clacson arriere", compat: "200cc, 250cc et 300cc", stock: 30, price: 1000 },
  { name: "Clacson devant", compat: "200cc, 250cc et 300cc", stock: 20, price: 5000 },
  { name: "Guidon 200CC", compat: "200 CC AIR", stock: 30, price: 5000, ref: "200CC" },
  { name: "Aile avant", compat: "200cc, 250cc et 300cc", stock: 20, price: 5000 },
  { name: "Carrenage / Pcs 200CC", compat: "200 CC AIR", stock: 20, price: 5000, ref: "200CC" },
  { name: "Reservoir d'essence 200CC", compat: "200 CC AIR", stock: 20, price: 30000, ref: "200CC" },
  { name: "Ressort a lames / pcs 200CC", compat: "200 CC AIR", stock: 20, price: 30000, ref: "200CC" },
  { name: "Tige pignon", compat: "200cc, 250cc et 300cc", stock: 20, price: 8000 },
  { name: "Boite pignon", compat: "200cc, 250cc et 300cc", stock: 20, price: 25000 },
  { name: "Vilebrequin 200CC", compat: "200 CC AIR", stock: 20, price: 20000, ref: "200CC" },
  { name: "Adaptateur Boite a vitesse", compat: "200cc, 250cc et 300cc", stock: 5, price: 5000 },
  { name: "Boite marche arriere", compat: "200cc, 250cc et 300cc", stock: 0, price: 15000 },
  { name: "Boite a vitesse / Adapteur", compat: "200cc, 250cc et 300cc", stock: 0, price: 20000 },
  { name: "Boite de vitesse complet", compat: "200cc, 250cc et 300cc", stock: 20, price: 25000 },
  { name: "Transmission", compat: "200cc, 250cc et 300cc", stock: 20, price: 12000 },
  { name: "Manette de Vitesse", compat: "200cc, 250cc et 300cc", stock: 50, price: 2000 },
  { name: "Comodo", compat: "200cc, 250cc et 300cc", stock: 30, price: 2000 },
  { name: "Cable de carbotage", compat: "200cc, 250cc et 300cc", stock: 30, price: 3000 },
  { name: "Cable accelerateur", compat: "200cc, 250cc et 300cc", stock: 10, price: 1000 },
  { name: "Tableau de bord", compat: "200cc, 250cc et 300cc", stock: 10, price: 12000 },
  { name: "Cable vitesse", compat: "200cc, 250cc et 300cc", stock: 20, price: 2000 },
  { name: "Kick Moto / Levier", compat: "200cc, 250cc et 300cc", stock: 10, price: 5000 },
  { name: "Chaise", compat: "200cc, 250cc et 300cc", stock: 50, price: 10000 },
  { name: "Demarreur Tricycle 200CC", compat: "200 CC AIR", stock: 12, price: 10000, ref: "200CC" },
  { name: "Contacteur d'allumage / Pcs", compat: "200cc, 250cc et 300cc", stock: 10, price: 5000 },
  { name: "Contacteur d'allumage complet", compat: "200cc, 250cc et 300cc", stock: 20, price: 10000 },
  { name: "Cable d'embrayage", compat: "200cc, 250cc et 300cc", stock: 20, price: 1000 },
  { name: "Disque d'embrayage / pcs", compat: "200cc, 250cc et 300cc", stock: 20, price: 1000 },
  { name: "Clignotant devant / paire", compat: "200cc, 250cc et 300cc", stock: 10, price: 5000 },
  { name: "Embrayage couvercle/bol 200CC", compat: "200 CC AIR", stock: 11, price: 12000, ref: "200CC" },
  { name: "Embrayage couvercle/bol 250-300CC", compat: "250cc et 300cc", stock: 10, price: 15000 },
  { name: "Amortisseur arriere 250-300CC", compat: "250cc et 300cc", stock: 10, price: 10000 },
  { name: "Culasse de Moteur 300CC", compat: "300 CC A EAU", stock: 10, price: 30000, ref: "300CC" },
  { name: "Culasse de Moteur 250CC", compat: "250 CC A EAU", stock: 10, price: 25000, ref: "250CC" },
  { name: "BLOC-cylindre 300CC", compat: "300 CC A EAU", stock: 12, price: 18000, ref: "300CC" },
  { name: "BLOC-cylindre 250CC", compat: "250 CC A EAU", stock: 0, price: 15000, ref: "250CC" },
  { name: "Chambre a air", compat: "200cc, 250cc et 300cc", stock: 10, price: 2000 },
  { name: "Clignotant arriere / paire 300CC", compat: "300 CC A EAU", stock: 20, price: 6000, ref: "300CC" },
  { name: "MOTEUR 250CC", compat: "250 CC A EAU", stock: 20, price: 270000, ref: "250CC" },
  { name: "Pont arriere complet 250CC", compat: "250 CC A EAU", stock: 22, price: 150000, ref: "250CC" },
  { name: "Pont arriere complet 300CC", compat: "300 CC A EAU", stock: 10, price: 180000, ref: "300CC" },
  { name: "Pont arriere complet 200CC", compat: "200 CC AIR", stock: 10, price: 120000, ref: "200CC" },
  { name: "DEMI-PONT / DIFFERENTIEL 300CC", compat: "300 CC A EAU", stock: 10, price: 80000, ref: "300CC" },
  { name: "DEMI-PONT / DIFFERENTIEL 250CC", compat: "250 CC A EAU", stock: 0, price: 60000, ref: "250CC" },
  { name: "DEMI-PONT / DIFFERENTIEL 200CC", compat: "200 CC AIR", stock: 0, price: 40000, ref: "200CC" },
  { name: "Piston et segment 250CC", compat: "250 CC A EAU", stock: 20, price: 13000, ref: "250CC" },
  { name: "Poignee de frein / Levier", compat: "200cc, 250cc et 300cc", stock: 5, price: 3000 },
  { name: "Bougie d'allumage", compat: "200cc, 250cc et 300cc", stock: 5, price: 1000 },
  { name: "Huile a Moteur", compat: "200cc, 250cc et 300cc", stock: 5, price: 3000 },
  { name: "Poignee d'embrayage", compat: "200cc, 250cc et 300cc", stock: 5, price: 1500 },
  { name: "BLOC-cylindre 200CC", compat: "200 CC AIR", stock: 5, price: 12000, ref: "200CC" },
  { name: "Batterie 200CC", compat: "200 CC AIR", stock: 5, price: 15000, ref: "200CC" },
  { name: "Demi essieu courte / Arbre", compat: "200cc, 250cc et 300cc", stock: 5, price: 8000 },
  { name: "Demi-essieu long / Cardan", compat: "200cc, 250cc et 300cc", stock: 5, price: 10000 },
  { name: "Culasse de Moteur 200CC", compat: "200 CC AIR", stock: 5, price: 20000, ref: "200CC" },
  { name: "Demarreur 200CC", compat: "200 CC AIR", stock: 5, price: 8000, ref: "200CC" },
  { name: "Lampe arriere / pcs 200CC", compat: "200 CC AIR", stock: 5, price: 2000, ref: "200CC" },
  { name: "Roulement", compat: "200cc, 250cc et 300cc", stock: 5, price: 1000 },
  { name: "Lampe V1/Q7", compat: "200cc, 250cc et 300cc", stock: 5, price: 10000 },
  { name: "Clignotant arriere / paire 200CC", compat: "200 CC AIR", stock: 5, price: 6000, ref: "200CC" },
  { name: "Paquet haute tension 200CC", compat: "200 CC AIR", stock: 5, price: 1500, ref: "200CC" },
  { name: "Relais de demarrage", compat: "200cc, 250cc et 300cc", stock: 5, price: 2000 },
  { name: "Serrure 200CC", compat: "200 CC AIR", stock: 5, price: 4000, ref: "200CC" },
  { name: "Bobine 12 - 200CC", compat: "200 CC AIR", stock: 5, price: 8000, ref: "200CC" },
  { name: "Bobine 11 - 200CC", compat: "200 CC AIR", stock: 5, price: 8000, ref: "200CC" },
  { name: "Bobine 8 - 200CC", compat: "200 CC AIR", stock: 5, price: 5000, ref: "200CC" },
  { name: "Regulateur/Redresseur de tension", compat: "200cc, 250cc et 300cc", stock: 5, price: 1500 },
  { name: "Cylindre 12 - 200CC", compat: "200 CC AIR", stock: 5, price: 11000, ref: "200CC" },
  { name: "Cylindre 11 - 200CC", compat: "200 CC AIR", stock: 5, price: 11000, ref: "200CC" },
  { name: "Cylindre 8 - 200CC", compat: "200 CC AIR", stock: 5, price: 10000, ref: "200CC" },
  { name: "Pneu tout-terrain / pcs", compat: "200cc, 250cc et 300cc", stock: 5, price: 23000 },
  { name: "Pneu exterieur", compat: "200cc, 250cc et 300cc", stock: 5, price: 13000 },
  { name: "Levier de vitesse", compat: "200cc, 250cc et 300cc", stock: 5, price: 3000 },
  { name: "Ligne d'embrayage 200CC", compat: "200 CC AIR", stock: 5, price: 1000, ref: "200CC" },
  { name: "Embrayage complet 200CC", compat: "200 CC AIR", stock: 5, price: 17000, ref: "200CC" },
  { name: "Allumage", compat: "200cc, 250cc et 300cc", stock: 5, price: 3000 },
  { name: "Ventilateur 200CC", compat: "200 CC AIR", stock: 5, price: 5000, ref: "200CC" },
  { name: "Jante", compat: "200cc, 250cc et 300cc", stock: 5, price: 10000 },
  { name: "Reservoir d'eau 250-300CC", compat: "250cc et 300cc", stock: 5, price: 10000 },
  { name: "Carbotage complet 200CC", compat: "200 CC AIR", stock: 5, price: 38000, ref: "200CC" },
  { name: "Tuyau / pcs 250-300CC", compat: "250cc et 300cc", stock: 5, price: 3000 },
  { name: "Radiateur", compat: "200cc, 250cc et 300cc", stock: 5, price: 30000 },
  { name: "Bache 200CC", compat: "200 CC AIR", stock: 5, price: 50000, ref: "200CC" },
  { name: "Levier de demarrage", compat: "200cc, 250cc et 300cc", stock: 5, price: 5000 },
  { name: "Frein / PCS 200CC", compat: "200 CC AIR", stock: 5, price: 2000, ref: "200CC" },
  { name: "Piston et segment 200CC", compat: "200 CC AIR", stock: 5, price: 10000, ref: "200CC" },
  { name: "Segment de piston 200CC", compat: "200 CC AIR", stock: 5, price: 2000, ref: "200CC" },
  { name: "Echappement", compat: "200cc, 250cc et 300cc", stock: 5, price: 15000 },
  { name: "Carburateur", compat: "200cc, 250cc et 300cc", stock: 5, price: 10000 },
  { name: "Retroviseur / PCS", compat: "200cc, 250cc et 300cc", stock: 5, price: 2500 },
  { name: "Clignotant arriere / paire 250CC", compat: "250 CC A EAU", stock: 5, price: 6000, ref: "250CC" },
  { name: "MOTEUR 200CC", compat: "200 CC AIR", stock: 20, price: 230000, ref: "200CC" },
  { name: "MOTEUR 300CC", compat: "300 CC A EAU", stock: 45, price: 300000, ref: "300CC" },
  { name: "CYLINDRE 300CC", compat: "300 CC A EAU", stock: 5, price: 22000, ref: "300CC" },
  { name: "Piston et segment 300CC", compat: "300 CC A EAU", stock: 10, price: 15000, ref: "300CC" },
  { name: "Amortisseur Complet Devant 200CC", compat: "200 CC AIR", stock: 25, price: 40000, ref: "200CC" },
];

function slugify(str) {
  return str
    .toLowerCase()
    .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/(^-|-$)/g, '');
}

// Generate SQL
const values = pieces.map(p => {
  const slug = slugify(p.name);
  const name = p.name.replace(/'/g, "''");
  const compat = p.compat.replace(/'/g, "''");
  const inStock = p.stock > 0;
  const specs = JSON.stringify({ "Compatibilite": p.compat, "Reference": p.ref || "N/A" }).replace(/'/g, "''");
  const features = `ARRAY['Compatible ${compat}']`;
  
  return `('${slug}', '${name}', 'piece', 'pieces-detachees', ${p.price}, 'Piece detachee pour tricycle Hasilaza. Compatible ${compat}.', '${name} - Compatible ${compat}', '${specs}'::jsonb, ${features}, ARRAY['/images/pieces/default-piece.jpg'], ${inStock}, false, 4.5, 0)`;
});

// Print in batches of 20
const batchSize = 20;
for (let i = 0; i < values.length; i += batchSize) {
  const batch = values.slice(i, i + batchSize);
  console.log(`-- Batch ${Math.floor(i/batchSize) + 1}`);
  console.log(`INSERT INTO products (slug, name, category, subcategory, price, description, short_description, specifications, features, images, in_stock, is_new, rating, reviews) VALUES`);
  console.log(batch.join(',\n') + ';');
  console.log('');
}

console.log(`Total pieces: ${pieces.length}`);
[V0_FILE]jpg:file="public/images/pieces/default-piece.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/pieces/default-piece-ikGEvvpedkHBh5V6InSUAUFazJiy02.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/produits/page.tsx" isMerged="true"
"use client"

import { useState, useMemo, useEffect, Suspense } from "react"
import { useSearchParams } from "next/navigation"
import Image from "next/image"
import Link from "next/link"
import { motion, AnimatePresence } from "framer-motion"
import { Search, SlidersHorizontal, Star, Eye, ShoppingBag, X, ChevronDown, Grid3X3, List, Loader2 } from "lucide-react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { getProducts, formatPrice, type Product } from "@/lib/supabase/products"

function ProductCard({ product, index, viewMode }: { product: Product; index: number; viewMode: "grid" | "list" }) {
  const [isHovered, setIsHovered] = useState(false)

if (viewMode === "list") {
    return (
      <motion.div
        initial={{ opacity: 0, x: -30 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: 30 }}
        transition={{ duration: 0.4, delay: index * 0.05 }}
        className="group bg-background rounded-2xl overflow-hidden shadow-lg border border-border hover:shadow-xl transition-all flex"
      >
        {/* Image */}
        <Link href={`/produits/${product.slug}`} className="relative w-48 h-48 shrink-0 overflow-hidden bg-muted block">
          <Image
            src={product.images[0] || "/placeholder.svg"}
            alt={product.name}
            fill
            className="object-cover transition-transform duration-500 group-hover:scale-110"
          />
          {/* Badges */}
          <div className="absolute top-3 left-3 flex flex-col gap-1">
            {product.is_best_seller && (
              <span className="px-2 py-0.5 bg-primary text-primary-foreground text-xs font-bold rounded-full">
                Best-Seller
              </span>
            )}
            {product.is_new && (
              <span className="px-2 py-0.5 bg-foreground text-background text-xs font-bold rounded-full">
                Nouveau
              </span>
            )}
          </div>
        </Link>

{/* Content */}
        <div className="flex-1 p-6 flex flex-col justify-between">
          <div>
            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
              {product.subcategory || product.category}
            </span>
            <Link href={`/produits/${product.slug}`} className="block">
              <h3 className="font-bold text-lg text-foreground mt-1 mb-2 group-hover:text-primary transition-colors">
                {product.name}
              </h3>
            </Link>
            <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
              {product.short_description}
            </p>
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-0.5">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    className={`w-4 h-4 ${
                      i < Math.floor(product.rating)
                        ? "text-yellow-400 fill-yellow-400"
                        : "text-muted"
                    }`}
                  />
                ))}
              </div>
              <span className="text-xs text-muted-foreground">({product.reviews} avis)</span>
            </div>
          </div>

<div className="flex items-center justify-between mt-4">
            <div>
              {product.category === "piece" ? (
                <span className="text-sm text-muted-foreground">Contactez-nous pour le prix</span>
              ) : (
                <>
                  <span className="text-2xl font-bold text-primary">{formatPrice(product.price)}</span>
                  {product.old_price && (
                    <span className="text-sm text-muted-foreground line-through ml-2">
                      {formatPrice(product.old_price)}
                    </span>
                  )}
                </>
              )}
            </div>
            <div className="flex items-center gap-2">
              <Link
                href={`/produits/${product.slug}`}
                className="px-4 py-2 bg-muted rounded-lg text-foreground hover:bg-primary hover:text-primary-foreground transition-colors font-medium text-sm"
              >
                Voir details
              </Link>
              <a
                href={`https://wa.me/221781094091?text=Bonjour, je suis interesse par ${product.name}`}
                target="_blank"
                rel="noopener noreferrer"
                className="px-4 py-2 bg-primary rounded-lg text-primary-foreground hover:bg-primary/90 transition-colors font-medium text-sm"
              >
                Commander
              </a>
            </div>
          </div>
        </div>
      </motion.div>
    )
  }

return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
      transition={{ duration: 0.4, delay: index * 0.05 }}
      layout
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className="group relative bg-background rounded-2xl overflow-hidden shadow-lg border border-border hover:shadow-xl transition-all"
    >
      {/* Image */}
      <Link href={`/produits/${product.slug}`} className="relative aspect-square overflow-hidden bg-muted block cursor-pointer">
        <Image
          src={product.images[0] || "/placeholder.svg"}
          alt={product.name}
          fill
          className="object-cover transition-transform duration-500 group-hover:scale-110"
        />
      </Link>
      
      {/* Overlay */}
      <AnimatePresence>
        {isHovered && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="absolute inset-0 bg-foreground/40 flex items-center justify-center gap-3"
          >
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              exit={{ scale: 0 }}
              transition={{ type: "spring", stiffness: 300, damping: 20 }}
            >
              <Link
                href={`/produits/${product.slug}`}
                className="w-12 h-12 bg-background rounded-full flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"
              >
                <Eye className="w-5 h-5" />
              </Link>
            </motion.div>
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              exit={{ scale: 0 }}
              transition={{ type: "spring", stiffness: 300, damping: 20, delay: 0.05 }}
              onClick={(e) => e.preventDefault()}
            >
              <a
                href={`https://wa.me/221781094091?text=Bonjour, je suis interesse par ${product.name}`}
                target="_blank"
                rel="noopener noreferrer"
                onClick={(e) => e.stopPropagation()}
                className="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-primary-foreground hover:bg-primary/90 transition-colors"
              >
                <ShoppingBag className="w-5 h-5" />
              </a>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

{/* Badges */}
      <div className="absolute top-4 left-4 flex flex-col gap-2">
        {product.is_best_seller && (
          <span className="px-3 py-1 bg-primary text-primary-foreground text-xs font-bold rounded-full">
            Best-Seller
          </span>
        )}
        {product.is_new && (
          <span className="px-3 py-1 bg-foreground text-background text-xs font-bold rounded-full">
            Nouveau
          </span>
        )}
        {product.old_price && (
          <span className="px-3 py-1 bg-green-500 text-white text-xs font-bold rounded-full">
            -{Math.round((1 - product.price / product.old_price) * 100)}%
          </span>
        )}
      </div>

{/* Content */}
      <div className="p-5">
        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
          {product.subcategory || product.category}
        </span>
        <h3 className="font-bold text-foreground mt-1 mb-2 group-hover:text-primary transition-colors line-clamp-1">
          {product.name}
        </h3>
        <div className="flex items-center gap-2 mb-3">
          <div className="flex items-center gap-0.5">
            {[...Array(5)].map((_, i) => (
              <Star
                key={i}
                className={`w-4 h-4 ${
                  i < Math.floor(product.rating)
                    ? "text-yellow-400 fill-yellow-400"
                    : "text-muted"
                }`}
              />
            ))}
          </div>
          <span className="text-xs text-muted-foreground">({product.reviews})</span>
        </div>
        <div className="flex items-center gap-3">
          {product.category === "piece" ? (
            <span className="text-sm text-muted-foreground">Contactez-nous</span>
          ) : (
            <>
              <span className="text-xl font-bold text-primary">{formatPrice(product.price)}</span>
              {product.old_price && (
                <span className="text-sm text-muted-foreground line-through">
                  {formatPrice(product.old_price)}
                </span>
              )}
            </>
          )}
        </div>
      </div>
    </motion.div>
  )
}

function ProductsContent() {
  const searchParams = useSearchParams()
  const categoryParam = searchParams.get("category") || "all"
  
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [activeCategory, setActiveCategory] = useState(categoryParam)
  const [activeSubcategory, setActiveSubcategory] = useState<string | null>(null)
  const [sortBy, setSortBy] = useState("popular")
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const [showFilters, setShowFilters] = useState(false)
  const [priceRange, setPriceRange] = useState<[number, number]>([0, 15000000])

useEffect(() => {
    async function loadProducts() {
      setLoading(true)
      const data = await getProducts()
      setProducts(data)
      setLoading(false)
    }
    loadProducts()
  }, [])

const categories = useMemo(() => [
    { id: "all", name: "Tous les produits", count: products.length },
    { id: "tricycle", name: "Tricycles", count: products.filter(p => p.category === "tricycle").length },
    { id: "moto", name: "Motos", count: products.filter(p => p.category === "moto").length },
    { id: "piece", name: "Pieces detachees", count: products.filter(p => p.category === "piece").length }
  ], [products])

const subcategories: Record<string, string[]> = {
    tricycle: ["cargo", "passager", "mixte"],
    moto: ["sport", "ville", "trail"],
    piece: ["transmission", "freinage", "lubrification", "electrique", "filtration", "suspension"]
  }

const filteredProducts = useMemo(() => {
    let filtered = products

// Category filter
    if (activeCategory !== "all") {
      filtered = filtered.filter(p => p.category === activeCategory)
    }

// Subcategory filter
    if (activeSubcategory) {
      filtered = filtered.filter(p => p.subcategory?.toLowerCase() === activeSubcategory.toLowerCase())
    }

// Search filter
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      filtered = filtered.filter(p => 
        p.name.toLowerCase().includes(query) ||
        p.description.toLowerCase().includes(query) ||
        p.category.toLowerCase().includes(query)
      )
    }

// Price filter
    filtered = filtered.filter(p => p.price >= priceRange[0] && p.price <= priceRange[1])

// Sort
    switch (sortBy) {
      case "price-asc":
        filtered = [...filtered].sort((a, b) => a.price - b.price)
        break
      case "price-desc":
        filtered = [...filtered].sort((a, b) => b.price - a.price)
        break
      case "rating":
        filtered = [...filtered].sort((a, b) => b.rating - a.rating)
        break
      case "newest":
        filtered = [...filtered].sort((a, b) => (b.is_new ? 1 : 0) - (a.is_new ? 1 : 0))
        break
      default: // popular
        filtered = [...filtered].sort((a, b) => b.reviews - a.reviews)
    }

return filtered
  }, [products, activeCategory, activeSubcategory, searchQuery, sortBy, priceRange])

const currentSubcategories = activeCategory !== "all" 
    ? subcategories[activeCategory as keyof typeof subcategories] || []
    : []

return (
    <>
      {/* Hero Section */}
      <section className="pt-32 pb-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center max-w-3xl mx-auto"
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
            >
              <span className="text-sm font-semibold text-primary">Catalogue Complet</span>
            </motion.div>
            <h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold text-foreground mb-6">
              <span className="text-balance">Nos </span>
              <span className="text-primary">Produits</span>
            </h1>
            <p className="text-lg text-muted-foreground leading-relaxed">
              Decouvrez notre gamme complete de tricycles, motos et pieces detachees. 
              Qualite garantie et prix competitifs.
            </p>
          </motion.div>
        </div>
      </section>

{/* Filters & Products */}
      <section className="py-12 bg-background">
        <div className="container mx-auto px-4">
          {/* Top Bar */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-8"
          >
            {/* Search */}
            <div className="relative flex-1 max-w-md">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
              <Input
                type="text"
                placeholder="Rechercher un produit..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-12 h-12 rounded-xl border-border"
              />
              {searchQuery && (
                <button 
                  onClick={() => setSearchQuery("")}
                  className="absolute right-4 top-1/2 -translate-y-1/2"
                >
                  <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
                </button>
              )}
            </div>

{/* Controls */}
            <div className="flex items-center gap-3">
              {/* Mobile Filter Toggle */}
              <Button 
                variant="outline" 
                onClick={() => setShowFilters(!showFilters)}
                className="lg:hidden bg-transparent"
              >
                <SlidersHorizontal className="w-5 h-5 mr-2" />
                Filtres
              </Button>

{/* Sort */}
              <div className="relative">
                <select
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value)}
                  className="appearance-none bg-background border border-border rounded-xl px-4 py-3 pr-10 text-sm font-medium cursor-pointer hover:border-primary transition-colors"
                >
                  <option value="popular">Plus populaires</option>
                  <option value="newest">Nouveautes</option>
                  <option value="price-asc">Prix croissant</option>
                  <option value="price-desc">Prix decroissant</option>
                  <option value="rating">Mieux notes</option>
                </select>
                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" />
              </div>

{/* View Mode */}
              <div className="hidden sm:flex items-center bg-muted rounded-xl p-1">
                <button
                  onClick={() => setViewMode("grid")}
                  className={`p-2 rounded-lg transition-colors ${
                    viewMode === "grid" ? "bg-background shadow-sm" : "hover:bg-background/50"
                  }`}
                >
                  <Grid3X3 className="w-5 h-5" />
                </button>
                <button
                  onClick={() => setViewMode("list")}
                  className={`p-2 rounded-lg transition-colors ${
                    viewMode === "list" ? "bg-background shadow-sm" : "hover:bg-background/50"
                  }`}
                >
                  <List className="w-5 h-5" />
                </button>
              </div>
            </div>
          </motion.div>

<div className="flex gap-8">
            {/* Sidebar Filters */}
            <motion.aside
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
              className={`w-64 shrink-0 ${showFilters ? "block" : "hidden lg:block"}`}
            >
              <div className="sticky top-32 space-y-6">
                {/* Categories */}
                <div className="bg-muted/50 rounded-2xl p-6">
                  <h3 className="font-bold text-foreground mb-4">Categories</h3>
                  <div className="space-y-2">
                    {categories.map((cat) => (
                      <button
                        key={cat.id}
                        onClick={() => {
                          setActiveCategory(cat.id)
                          setActiveSubcategory(null)
                        }}
                        className={`w-full flex items-center justify-between px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
                          activeCategory === cat.id
                            ? "bg-primary text-primary-foreground"
                            : "hover:bg-muted text-foreground"
                        }`}
                      >
                        <span>{cat.name}</span>
                        <span className={`text-xs ${activeCategory === cat.id ? "text-primary-foreground/70" : "text-muted-foreground"}`}>
                          {cat.count}
                        </span>
                      </button>
                    ))}
                  </div>
                </div>

{/* Subcategories */}
                {currentSubcategories.length > 0 && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: "auto" }}
                    className="bg-muted/50 rounded-2xl p-6"
                  >
                    <h3 className="font-bold text-foreground mb-4">Sous-categories</h3>
                    <div className="space-y-2">
                      <button
                        onClick={() => setActiveSubcategory(null)}
                        className={`w-full text-left px-4 py-2 rounded-xl text-sm font-medium transition-all ${
                          !activeSubcategory
                            ? "bg-primary/10 text-primary"
                            : "hover:bg-muted text-foreground"
                        }`}
                      >
                        Toutes
                      </button>
                      {currentSubcategories.map((subcat) => (
                        <button
                          key={subcat}
                          onClick={() => setActiveSubcategory(subcat)}
                          className={`w-full text-left px-4 py-2 rounded-xl text-sm font-medium transition-all capitalize ${
                            activeSubcategory === subcat
                              ? "bg-primary/10 text-primary"
                              : "hover:bg-muted text-foreground"
                          }`}
                        >
                          {subcat}
                        </button>
                      ))}
                    </div>
                  </motion.div>
                )}

{/* Price Range */}
                <div className="bg-muted/50 rounded-2xl p-6">
                  <h3 className="font-bold text-foreground mb-4">Prix</h3>
                  <div className="space-y-4">
                    <div className="flex items-center gap-2 text-sm">
                      <span className="text-muted-foreground">De</span>
                      <input
                        type="number"
                        value={priceRange[0]}
                        onChange={(e) => setPriceRange([Number(e.target.value), priceRange[1]])}
                        className="w-full px-3 py-2 bg-background border border-border rounded-lg text-sm"
                        placeholder="0"
                      />
                    </div>
                    <div className="flex items-center gap-2 text-sm">
                      <span className="text-muted-foreground">A</span>
                      <input
                        type="number"
                        value={priceRange[1]}
                        onChange={(e) => setPriceRange([priceRange[0], Number(e.target.value)])}
                        className="w-full px-3 py-2 bg-background border border-border rounded-lg text-sm"
                        placeholder="15000000"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </motion.aside>

{/* Products Grid */}
            <div className="flex-1">
              {loading ? (
                <div className="flex items-center justify-center py-16">
                  <Loader2 className="h-12 w-12 animate-spin text-primary" />
                </div>
              ) : filteredProducts.length === 0 ? (
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  className="text-center py-16"
                >
                  <div className="w-24 h-24 bg-muted rounded-full flex items-center justify-center mx-auto mb-6">
                    <Search className="w-10 h-10 text-muted-foreground" />
                  </div>
                  <h3 className="text-xl font-bold text-foreground mb-2">Aucun produit trouve</h3>
                  <p className="text-muted-foreground mb-6">
                    Essayez de modifier vos filtres ou votre recherche
                  </p>
                  <Button 
                    onClick={() => {
                      setSearchQuery("")
                      setActiveCategory("all")
                      setActiveSubcategory(null)
                      setPriceRange([0, 15000000])
                    }}
                  >
                    Reinitialiser les filtres
                  </Button>
                </motion.div>
              ) : (
                <>
                  <p className="text-sm text-muted-foreground mb-6">
                    {filteredProducts.length} produit(s) trouve(s)
                  </p>
                  <AnimatePresence mode="popLayout">
                    <motion.div
                      layout
                      className={viewMode === "grid" 
                        ? "grid sm:grid-cols-2 xl:grid-cols-3 gap-6"
                        : "space-y-4"
                      }
                    >
                      {filteredProducts.map((product, index) => (
                        <ProductCard
                          key={product.id}
                          product={product}
                          index={index}
                          viewMode={viewMode}
                        />
                      ))}
                    </motion.div>
                  </AnimatePresence>
                </>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  )
}

export default function ProductsPage() {
  return (
    <main className="min-h-screen bg-background">
      <Header />
      <Suspense fallback={
        <div className="flex items-center justify-center py-32">
          <Loader2 className="h-12 w-12 animate-spin text-primary" />
        </div>
      }>
        <ProductsContent />
      </Suspense>
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/produits/[slug]/page.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { use } from "react"
import Image from "next/image"
import Link from "next/link"
import { notFound } from "next/navigation"
import { motion, useInView, AnimatePresence } from "framer-motion"
import { 
  ArrowLeft, 
  Star, 
  Check, 
  Truck, 
  Shield, 
  Phone, 
  ChevronRight,
  Minus,
  Plus,
  Share2,
  Heart,
  MessageCircle,
  Loader2
} from "lucide-react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { OrderModal } from "@/components/order-modal"
import { getProductBySlug, getProducts, formatPrice, type Product } from "@/lib/supabase/products"

function ProductGallery({ product }: { product: Product }) {
  const [activeImage, setActiveImage] = useState(0)

return (
    <div className="space-y-4">
      {/* Main Image */}
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5 }}
        className="relative aspect-square bg-muted rounded-3xl overflow-hidden"
      >
        <AnimatePresence mode="wait">
          <motion.div
            key={activeImage}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="absolute inset-0"
          >
            <Image
              src={product.images[activeImage] || "/placeholder.svg"}
              alt={product.name}
              fill
              className="object-cover"
              priority
            />
          </motion.div>
        </AnimatePresence>

{/* Badges */}
        <div className="absolute top-6 left-6 flex flex-col gap-2">
          {product.is_best_seller && (
            <motion.span 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.3 }}
              className="px-4 py-2 bg-primary text-primary-foreground text-sm font-bold rounded-full"
            >
              Best-Seller
            </motion.span>
          )}
          {product.is_new && (
            <motion.span 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.4 }}
              className="px-4 py-2 bg-foreground text-background text-sm font-bold rounded-full"
            >
              Nouveau
            </motion.span>
          )}
          {product.old_price && (
            <motion.span 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.5 }}
              className="px-4 py-2 bg-green-500 text-white text-sm font-bold rounded-full"
            >
              -{Math.round((1 - product.price / product.old_price) * 100)}% de reduction
            </motion.span>
          )}
        </div>

{/* Zoom hint */}
        <div className="absolute bottom-6 right-6 bg-background/80 backdrop-blur-sm px-3 py-1.5 rounded-lg text-xs font-medium">
          Cliquez pour agrandir
        </div>
      </motion.div>

{/* Thumbnails */}
      {product.images.length > 1 && (
        <div className="flex gap-3">
          {product.images.map((img, idx) => (
            <button
              key={idx}
              onClick={() => setActiveImage(idx)}
              className={`relative w-20 h-20 rounded-xl overflow-hidden border-2 transition-all ${
                activeImage === idx ? "border-primary" : "border-transparent hover:border-primary/50"
              }`}
            >
              <Image src={img || "/placeholder.svg"} alt={`${product.name} ${idx + 1}`} fill className="object-cover" />
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

function ProductInfo({ product }: { product: Product }) {
  const [quantity, setQuantity] = useState(1)
  const [isOrderModalOpen, setIsOrderModalOpen] = useState(false)

// Convert to legacy format for OrderModal
  const legacyProduct = {
    id: product.id,
    slug: product.slug,
    name: product.name,
    category: product.category,
    subcategory: product.subcategory,
    price: product.price,
    oldPrice: product.old_price,
    description: product.description,
    shortDescription: product.short_description,
    specifications: product.specifications,
    features: product.features,
    images: product.images,
    inStock: product.in_stock,
    isBestSeller: product.is_best_seller,
    isNew: product.is_new,
    rating: product.rating,
    reviews: product.reviews,
  }

return (
    <>
      <OrderModal 
        product={legacyProduct} 
        quantity={quantity} 
        isOpen={isOrderModalOpen} 
        onClose={() => setIsOrderModalOpen(false)} 
      />
      <motion.div
        initial={{ opacity: 0, x: 30 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.6, delay: 0.2 }}
        className="space-y-6"
      >
        {/* Breadcrumb */}
        <nav className="flex items-center gap-2 text-sm text-muted-foreground">
          <Link href="/" className="hover:text-primary transition-colors">Accueil</Link>
          <ChevronRight className="w-4 h-4" />
          <Link href="/produits" className="hover:text-primary transition-colors">Produits</Link>
          <ChevronRight className="w-4 h-4" />
          <Link 
            href={`/produits?category=${product.category}`} 
            className="hover:text-primary transition-colors capitalize"
          >
            {product.category === "tricycle" ? "Tricycles" : product.category === "moto" ? "Motos" : "Pieces"}
          </Link>
          <ChevronRight className="w-4 h-4" />
          <span className="text-foreground">{product.name}</span>
        </nav>

{/* Category */}
        <span className="inline-block px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
          {product.subcategory || product.category}
        </span>

{/* Title */}
        <h1 className="text-3xl lg:text-4xl font-bold text-foreground">{product.name}</h1>

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

{/* Price */}
        {product.category === "piece" ? (
          <div className="flex items-baseline gap-4">
            <span className="text-2xl font-semibold text-muted-foreground">Contactez-nous pour le prix</span>
          </div>
        ) : (
          <div className="flex items-baseline gap-4">
            <span className="text-4xl font-bold text-primary">{formatPrice(product.price)}</span>
            {product.old_price && (
              <>
                <span className="text-xl text-muted-foreground line-through">{formatPrice(product.old_price)}</span>
                <span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-bold rounded">
                  Economisez {formatPrice(product.old_price - product.price)}
                </span>
              </>
            )}
          </div>
        )}

{/* Stock Status */}
        <div className={`flex items-center gap-2 ${product.in_stock ? "text-green-600" : "text-red-600"}`}>
          <div className={`w-3 h-3 rounded-full ${product.in_stock ? "bg-green-500" : "bg-red-500"} animate-pulse`} />
          <span className="font-medium">{product.in_stock ? "En stock - Livraison rapide" : "Rupture de stock"}</span>
        </div>

{/* Short Description */}
        <p className="text-muted-foreground leading-relaxed">{product.short_description}</p>

{/* Quantity & Actions */}
        <div className="flex flex-wrap items-center gap-4 pt-4">
          {/* Quantity */}
          <div className="flex items-center border border-border rounded-xl">
            <button
              onClick={() => setQuantity(Math.max(1, quantity - 1))}
              className="p-3 hover:bg-muted transition-colors rounded-l-xl"
            >
              <Minus className="w-5 h-5" />
            </button>
            <span className="w-12 text-center font-semibold">{quantity}</span>
            <button
              onClick={() => setQuantity(quantity + 1)}
              className="p-3 hover:bg-muted transition-colors rounded-r-xl"
            >
              <Plus className="w-5 h-5" />
            </button>
          </div>

{/* Order Button */}
          <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className="flex-1">
            <Button 
              size="lg" 
              className="w-full bg-primary hover:bg-primary/90 text-primary-foreground h-14"
              onClick={() => setIsOrderModalOpen(true)}
            >
              <MessageCircle className="w-5 h-5 mr-2" />
              Commander maintenant
            </Button>
          </motion.div>

{/* Secondary Actions */}
          <button className="p-4 border border-border rounded-xl hover:bg-muted transition-colors">
            <Heart className="w-5 h-5" />
          </button>
          <button className="p-4 border border-border rounded-xl hover:bg-muted transition-colors">
            <Share2 className="w-5 h-5" />
          </button>
        </div>

{/* Call CTA */}
        <div className="flex items-center gap-4 p-4 bg-muted rounded-2xl">
          <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
            <Phone className="w-6 h-6 text-primary" />
          </div>
          <div className="flex-1">
            <p className="text-sm text-muted-foreground">Besoin de conseils?</p>
            <a href="tel:+221781094091" className="font-bold text-foreground hover:text-primary transition-colors">
              +221 781094091
            </a>
          </div>
        </div>

{/* Trust Badges */}
        <div className="grid grid-cols-2 gap-4 pt-4">
          <div className="flex items-center gap-3 p-4 bg-muted/50 rounded-xl">
            <Truck className="w-6 h-6 text-primary" />
            <div>
              <p className="font-semibold text-sm">Livraison gratuite</p>
              <p className="text-xs text-muted-foreground">Sur Dakar</p>
            </div>
          </div>
          <div className="flex items-center gap-3 p-4 bg-muted/50 rounded-xl">
            <Shield className="w-6 h-6 text-primary" />
            <div>
              <p className="font-semibold text-sm">Garantie 2 ans</p>
              <p className="text-xs text-muted-foreground">Pieces et main d'oeuvre</p>
            </div>
          </div>
        </div>
      </motion.div>
    </>
  )
}

function ProductDetails({ product }: { product: Product }) {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })
  const [activeTab, setActiveTab] = useState<"description" | "specs" | "features">("description")

return (
    <section ref={ref} className="py-16 bg-muted/30">
      <div className="container mx-auto px-4">
        {/* Tabs */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.5 }}
          className="flex flex-wrap gap-2 mb-8"
        >
          {[
            { id: "description", label: "Description" },
            { id: "specs", label: "Specifications" },
            { id: "features", label: "Caracteristiques" },
          ].map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as typeof activeTab)}
              className={`px-6 py-3 rounded-xl font-medium transition-all ${
                activeTab === tab.id
                  ? "bg-primary text-primary-foreground"
                  : "bg-background text-foreground hover:bg-muted border border-border"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </motion.div>

{/* Content */}
        <AnimatePresence mode="wait">
          <motion.div
            key={activeTab}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3 }}
            className="bg-background rounded-3xl p-8 shadow-lg"
          >
            {activeTab === "description" && (
              <div className="prose prose-lg max-w-none">
                <p className="text-muted-foreground leading-relaxed text-lg">
                  {product.description}
                </p>
              </div>
            )}

{activeTab === "specs" && (
              <div className="grid md:grid-cols-2 gap-4">
                {Object.entries(product.specifications || {}).map(([key, value], index) => (
                  <motion.div
                    key={key}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.05 }}
                    className="flex items-center justify-between p-4 bg-muted/50 rounded-xl"
                  >
                    <span className="text-muted-foreground">{key}</span>
                    <span className="font-semibold text-foreground">{value}</span>
                  </motion.div>
                ))}
              </div>
            )}

{activeTab === "features" && (
              <div className="grid md:grid-cols-2 gap-4">
                {product.features.map((feature, index) => (
                  <motion.div
                    key={feature}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.05 }}
                    className="flex items-center gap-3 p-4 bg-muted/50 rounded-xl"
                  >
                    <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">
                      <Check className="w-5 h-5 text-primary" />
                    </div>
                    <span className="text-foreground">{feature}</span>
                  </motion.div>
                ))}
              </div>
            )}
          </motion.div>
        </AnimatePresence>
      </div>
    </section>
  )
}

function RelatedProducts({ currentProduct }: { currentProduct: Product }) {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })
  const [relatedProducts, setRelatedProducts] = useState<Product[]>([])

useEffect(() => {
    async function loadRelated() {
      const allProducts = await getProducts()
      const related = allProducts
        .filter(p => p.category === currentProduct.category && p.id !== currentProduct.id)
        .slice(0, 4)
      setRelatedProducts(related)
    }
    loadRelated()
  }, [currentProduct.category, currentProduct.id])

if (relatedProducts.length === 0) return null

return (
    <section ref={ref} className="py-16 bg-background">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.5 }}
          className="flex items-center justify-between mb-8"
        >
          <h2 className="text-2xl lg:text-3xl font-bold text-foreground">Produits similaires</h2>
          <Link 
            href={`/produits?category=${currentProduct.category}`}
            className="text-primary font-medium hover:underline flex items-center gap-1"
          >
            Voir tout
            <ChevronRight className="w-4 h-4" />
          </Link>
        </motion.div>

<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {relatedProducts.map((product, index) => (
            <motion.div
              key={product.id}
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: index * 0.1 }}
            >
              <Link href={`/produits/${product.slug}`} className="group block">
                <div className="relative aspect-square bg-muted rounded-2xl overflow-hidden mb-4">
                  <Image
                    src={product.images[0] || "/placeholder.svg"}
                    alt={product.name}
                    fill
                    className="object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                </div>
                <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-1">
                  {product.name}
                </h3>
                <p className="text-primary font-bold mt-1">
                  {product.category === "piece" ? <span className="text-sm text-muted-foreground font-normal">Contactez-nous</span> : formatPrice(product.price)}
                </p>
              </Link>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}

function ProductDetailContent({ slug }: { slug: string }) {
  const [product, setProduct] = useState<Product | null>(null)
  const [loading, setLoading] = useState(true)
  const [notFoundState, setNotFoundState] = useState(false)

useEffect(() => {
    async function loadProduct() {
      const data = await getProductBySlug(slug)
      if (!data) {
        setNotFoundState(true)
      } else {
        setProduct(data)
      }
      setLoading(false)
    }
    loadProduct()
  }, [slug])

if (loading) {
    return (
      <main className="min-h-screen bg-background">
        <Header />
        <div className="flex items-center justify-center py-32">
          <Loader2 className="h-12 w-12 animate-spin text-primary" />
        </div>
        <Footer />
      </main>
    )
  }

if (notFoundState || !product) {
    notFound()
  }

return (
    <main className="min-h-screen bg-background">
      <Header />
      
      {/* Product Section */}
      <section className="pt-28 pb-16">
        <div className="container mx-auto px-4">
          {/* Back Button */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.4 }}
            className="mb-8"
          >
            <Link 
              href="/produits"
              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors"
            >
              <ArrowLeft className="w-5 h-5" />
              Retour aux produits
            </Link>
          </motion.div>

{/* Product Grid */}
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16">
            <ProductGallery product={product} />
            <ProductInfo product={product} />
          </div>
        </div>
      </section>

<ProductDetails product={product} />
      <RelatedProducts currentProduct={product} />
      
      <Footer />
    </main>
  )
}

export default function ProductDetailPage({ params }: { params: Promise<{ slug: string }> | { slug: string } }) {
  const resolvedParams = params instanceof Promise ? use(params) : params
  return <ProductDetailContent slug={resolvedParams.slug} />
}
[V0_FILE]typescriptreact:file="app/depannage/page.tsx" isMerged="true"
"use client"

import React from "react"
import { useState, useRef } from "react"
import { motion, useInView } from "framer-motion"
import {
  Wrench,
  Phone,
  MapPin,
  Clock,
  AlertTriangle,
  CheckCircle,
  Send,
  MessageCircle,
  Truck,
  Shield,
  Settings,
  ArrowRight,
} from "lucide-react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

const services = [
  {
    icon: Wrench,
    title: "Reparation moteur",
    description: "Diagnostic et reparation de tous types de moteurs 200cc, 250cc et 300cc.",
  },
  {
    icon: Settings,
    title: "Entretien regulier",
    description: "Vidange, reglages, verification des freins et mise au point complete.",
  },
  {
    icon: Truck,
    title: "Depannage sur site",
    description: "Intervention rapide sur le lieu de la panne dans la region de Dakar.",
  },
  {
    icon: Shield,
    title: "Diagnostic complet",
    description: "Analyse approfondie de votre vehicule pour identifier tous les problemes.",
  },
]

const vehicleTypes = [
  "Tricycle 200CC AIR",
  "Tricycle 250CC",
  "Tricycle 300CC",
  "Tricycle 300CC (5 roues)",
  "Moto 150CC",
  "Autre",
]

const problemTypes = [
  "Panne moteur",
  "Probleme de freinage",
  "Probleme electrique",
  "Probleme de transmission",
  "Pneu / Roue",
  "Carrosserie / Benne",
  "Entretien regulier",
  "Diagnostic complet",
  "Autre",
]

function HeroSection() {
  return (
    <section className="pt-32 pb-20 bg-muted/30 relative overflow-hidden">
      <div className="absolute inset-0">
        <div className="absolute top-20 right-0 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
      </div>

<h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold text-foreground mb-6">
            <span className="text-balance">Depannage et </span>
            <span className="text-primary">reparation</span>
          </h1>

<p className="text-lg lg:text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
            Notre equipe de techniciens qualifies intervient rapidement pour reparer
            et entretenir vos tricycles et motos. Demandez une intervention en quelques clics.
          </p>
        </motion.div>
      </div>
    </section>
  )
}

function ServicesSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-16 bg-background -mt-10 relative z-10">
      <div className="container mx-auto px-4">
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {services.map((service, index) => {
            const Icon = service.icon
            return (
              <motion.div
                key={service.title}
                initial={{ opacity: 0, y: 30 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="bg-background p-6 rounded-2xl shadow-lg border border-border hover:border-primary/30 hover:shadow-xl transition-all group"
              >
                <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                  <Icon className="w-7 h-7 text-primary" />
                </div>
                <h3 className="font-bold text-foreground mb-2">{service.title}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">{service.description}</p>
              </motion.div>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function RepairFormSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    vehicleType: "",
    problemType: "",
    urgency: "normal",
    location: "",
    description: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

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

const urgencyLabel =
      formData.urgency === "urgent"
        ? "URGENT"
        : formData.urgency === "tres-urgent"
          ? "TRES URGENT"
          : "Normal"

const message = `*DEMANDE DE DEPANNAGE*

*Client:* ${formData.name}
*Telephone:* ${formData.phone}
*Vehicule:* ${formData.vehicleType}
*Probleme:* ${formData.problemType}
*Urgence:* ${urgencyLabel}
*Localisation:* ${formData.location}

*Description:*
${formData.description}

---
Demande envoyee depuis le site web Hasilaza Motor`

const whatsappUrl = `https://wa.me/221781094091?text=${encodeURIComponent(message)}`

// Small delay for UX
    await new Promise((resolve) => setTimeout(resolve, 800))

setIsSubmitting(false)
    setIsSubmitted(true)

// Open WhatsApp
    window.open(whatsappUrl, "_blank")

// Reset after 5 seconds
    setTimeout(() => {
      setIsSubmitted(false)
      setFormData({
        name: "",
        phone: "",
        vehicleType: "",
        problemType: "",
        urgency: "normal",
        location: "",
        description: "",
      })
    }, 5000)
  }

return (
    <section ref={ref} className="py-24 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-16">
          {/* Form */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-3xl font-bold text-foreground mb-2">
              Demander une intervention
            </h2>
            <p className="text-muted-foreground mb-8">
              Decrivez votre probleme et nous vous contacterons rapidement pour organiser le depannage.
            </p>

{isSubmitted ? (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                className="bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 rounded-2xl p-8 text-center"
              >
                <div className="w-16 h-16 bg-green-100 dark:bg-green-900/50 rounded-full flex items-center justify-center mx-auto mb-4">
                  <CheckCircle className="w-8 h-8 text-green-600 dark:text-green-400" />
                </div>
                <h3 className="text-xl font-bold text-green-800 dark:text-green-300 mb-2">
                  Demande envoyee!
                </h3>
                <p className="text-green-600 dark:text-green-400">
                  Votre demande de depannage a ete transmise via WhatsApp. Notre equipe vous contactera tres rapidement.
                </p>
              </motion.div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">
                      Nom complet *
                    </label>
                    <Input
                      type="text"
                      required
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      placeholder="Votre nom"
                      className="h-12 rounded-xl"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">
                      Telephone *
                    </label>
                    <Input
                      type="tel"
                      required
                      value={formData.phone}
                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                      placeholder="+221 7X XXX XX XX"
                      className="h-12 rounded-xl"
                    />
                  </div>
                </div>

<div className="grid sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">
                      Type de vehicule *
                    </label>
                    <select
                      required
                      value={formData.vehicleType}
                      onChange={(e) => setFormData({ ...formData, vehicleType: e.target.value })}
                      className="w-full h-12 px-4 bg-background border border-input rounded-xl text-foreground"
                    >
                      <option value="">Selectionnez un vehicule</option>
                      {vehicleTypes.map((type) => (
                        <option key={type} value={type}>
                          {type}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">
                      Type de probleme *
                    </label>
                    <select
                      required
                      value={formData.problemType}
                      onChange={(e) => setFormData({ ...formData, problemType: e.target.value })}
                      className="w-full h-12 px-4 bg-background border border-input rounded-xl text-foreground"
                    >
                      <option value="">Selectionnez un probleme</option>
                      {problemTypes.map((type) => (
                        <option key={type} value={type}>
                          {type}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

<div>
                  <label className="block text-sm font-medium text-foreground mb-2">
                    Niveau d{"'"}urgence
                  </label>
                  <div className="grid grid-cols-3 gap-3">
                    {[
                      { value: "normal", label: "Normal", color: "bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-800" },
                      { value: "urgent", label: "Urgent", color: "bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-950/30 dark:text-orange-400 dark:border-orange-800" },
                      { value: "tres-urgent", label: "Tres urgent", color: "bg-red-100 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-800" },
                    ].map((option) => (
                      <button
                        key={option.value}
                        type="button"
                        onClick={() => setFormData({ ...formData, urgency: option.value })}
                        className={`py-3 px-4 rounded-xl border-2 font-medium text-sm transition-all ${
                          formData.urgency === option.value
                            ? option.color
                            : "bg-background border-border text-muted-foreground hover:border-primary/30"
                        }`}
                      >
                        {option.label}
                      </button>
                    ))}
                  </div>
                </div>

<div>
                  <label className="block text-sm font-medium text-foreground mb-2">
                    Localisation *
                  </label>
                  <Input
                    type="text"
                    required
                    value={formData.location}
                    onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                    placeholder="Ex: HLM Grand Yoff, Dakar"
                    className="h-12 rounded-xl"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium text-foreground mb-2">
                    Description du probleme *
                  </label>
                  <textarea
                    required
                    value={formData.description}
                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                    placeholder="Decrivez le probleme rencontre avec votre vehicule..."
                    rows={4}
                    className="w-full px-4 py-3 bg-background border border-input rounded-xl text-foreground resize-none"
                  />
                </div>

<Button
                  type="submit"
                  size="lg"
                  disabled={isSubmitting}
                  className="w-full bg-primary hover:bg-primary/90 text-primary-foreground h-14"
                >
                  {isSubmitting ? (
                    <span className="flex items-center gap-2">
                      <svg className="animate-spin w-5 h-5" viewBox="0 0 24 24">
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                          fill="none"
                        />
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        />
                      </svg>
                      Envoi en cours...
                    </span>
                  ) : (
                    <span className="flex items-center gap-2">
                      <Send className="w-5 h-5" />
                      Envoyer la demande via WhatsApp
                    </span>
                  )}
                </Button>
              </form>
            )}
          </motion.div>

{/* Right Side - Info Cards */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="space-y-8"
          >
            {/* Urgency WhatsApp Card */}
            <div className="bg-primary rounded-3xl p-8 text-primary-foreground">
              <div className="flex items-start gap-4 mb-6">
                <div className="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center shrink-0">
                  <AlertTriangle className="w-7 h-7" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold mb-2">Panne urgente?</h3>
                  <p className="text-primary-foreground/80">
                    Appelez-nous directement ou envoyez un message WhatsApp pour une intervention
                    en urgence. Notre equipe est disponible du lundi au samedi.
                  </p>
                </div>
              </div>
              <div className="flex flex-col gap-3">
                <motion.a
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  href="tel:+221781094091"
                  className="flex items-center justify-center gap-2 w-full py-4 bg-white text-primary rounded-xl font-bold hover:bg-white/90 transition-colors"
                >
                  <Phone className="w-5 h-5" />
                  Appeler maintenant
                </motion.a>
                <motion.a
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  href="https://wa.me/221781094091?text=Bonjour, j'ai besoin d'un depannage urgent"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-center gap-2 w-full py-4 bg-white/20 text-white rounded-xl font-bold hover:bg-white/30 transition-colors"
                >
                  <MessageCircle className="w-5 h-5" />
                  WhatsApp Urgence
                </motion.a>
              </div>
            </div>

{/* Info Cards */}
            <div className="bg-background rounded-3xl border border-border p-8">
              <h3 className="font-bold text-lg text-foreground mb-6">Informations pratiques</h3>
              <div className="space-y-5">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">
                    <Clock className="w-5 h-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-foreground">Horaires d{"'"}intervention</h4>
                    <p className="text-sm text-muted-foreground">Lundi - Samedi: 8h - 18h</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">
                    <MapPin className="w-5 h-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-foreground">Zone d{"'"}intervention</h4>
                    <p className="text-sm text-muted-foreground">Dakar et ses environs</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">
                    <Shield className="w-5 h-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-foreground">Garantie</h4>
                    <p className="text-sm text-muted-foreground">
                      Toutes nos reparations sont garanties. Pieces d{"'"}origine Hasilaza utilisees.
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">
                    <Wrench className="w-5 h-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-foreground">Atelier equipe</h4>
                    <p className="text-sm text-muted-foreground">
                      Venez directement a notre atelier HLM 2, Dakar pour un diagnostic sur place.
                    </p>
                  </div>
                </div>
              </div>

<div className="mt-8 pt-6 border-t border-border">
                <a
                  href="https://maps.google.com/?q=HLM+2+Dakar+Senegal"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 text-primary font-medium hover:underline"
                >
                  <MapPin className="w-4 h-4" />
                  Voir notre atelier sur Google Maps
                  <ArrowRight className="w-4 h-4" />
                </a>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}

export default function DepannagePage() {
  return (
    <main className="min-h-screen bg-background">
      <Header />
      <HeroSection />
      <ServicesSection />
      <RepairFormSection />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { motion } from "framer-motion"
import { Phone, Mail, Clock, CreditCard, MapPin, Facebook, ArrowUp } from "lucide-react"
import { fadeInUp, staggerContainer } from "@/lib/animations"

const quickLinks = [
  { href: "/", label: "Accueil" },
  { href: "/produits", label: "Tous les produits" },
  { href: "/produits?category=tricycle", label: "Tricycles" },
  { href: "/produits?category=moto", label: "Motos" },
  { href: "/produits?category=piece", label: "Pièces détachées" },
]

const companyLinks = [
  { href: "/a-propos", label: "Qui sommes-nous" },
  { href: "/depannage", label: "Depannage & Reparation" },
  { href: "/contact", label: "Contactez-nous" },
  { href: "/a-propos#partenaires", label: "Nos partenaires" },
  { href: "/mentions-legales", label: "Mentions legales" },
  { href: "/politique-confidentialite", label: "Politique de confidentialite" },
]

const paymentMethods = [
  { name: "Wave", icon: "💳" },
  { name: "Orange Money", icon: "📱" },
  { name: "Virement bancaire", icon: "🏦" },
  { name: "Chèque", icon: "📄" },
]

export function Footer() {
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

return (
    <footer className="bg-foreground text-background relative overflow-hidden">
      {/* Decorative Elements */}
      <div className="absolute top-0 left-0 w-full h-1 bg-primary" />
      <div className="absolute top-20 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
      <div className="absolute bottom-20 left-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
      
      {/* CTA Section */}
      <div className="border-b border-background/10">
        <div className="container mx-auto px-4 py-12">
          <motion.div 
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="flex flex-col md:flex-row items-center justify-between gap-6 bg-primary/10 rounded-2xl p-8"
          >
            <div>
              <h3 className="text-2xl font-bold mb-2">Prêt à passer commande?</h3>
              <p className="text-background/70">Contactez-nous dès maintenant pour un devis personnalisé</p>
            </div>
            <div className="flex flex-col sm:flex-row gap-4">
              <motion.a
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                href="tel:+221781094091"
                className="px-6 py-3 bg-background text-foreground rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-background/90 transition-colors"
              >
                <Phone className="w-5 h-5" />
                Appelez-nous
              </motion.a>
              <motion.a
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                href="https://wa.me/221781094091?text=Bonjour, je souhaite passer commande"
                target="_blank"
                rel="noopener noreferrer"
                className="px-6 py-3 bg-primary text-primary-foreground rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-primary/90 transition-colors"
              >
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
                WhatsApp
              </motion.a>
            </div>
          </motion.div>
        </div>
      </div>

{/* Main Footer */}
      <div className="container mx-auto px-4 py-16">
        <motion.div 
          variants={staggerContainer}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-4 gap-12"
        >
          {/* Logo & Description */}
          <motion.div variants={fadeInUp} className="lg:col-span-1">
            <Link href="/" className="flex items-center gap-3 mb-6">
              <div className="w-12 h-12 rounded-xl overflow-hidden bg-background/10">
                <Image src="/images/logo-hasilaza.png" alt="Hasilaza" width={48} height={48} className="w-full h-full object-contain" />
              </div>
              <div>
                <span className="font-bold text-xl block">Hasilaza</span>
                <span className="text-xs text-background/50">Depuis 2018</span>
              </div>
            </Link>
            <p className="text-background/70 mb-6 leading-relaxed">
              Entreprise commerciale spécialisée dans l{"'"}usinage de tricycles et la grande distribution. 
              Leader de la vente de motos et pièces détachées au Sénégal.
            </p>
            <div className="flex gap-3">
              <a href="https://www.facebook.com/share/1KvPQqW7kd/?mibextid=wwXIfr" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-background/10 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
                <Facebook className="w-5 h-5" />
              </a>
              <a href="https://www.tiktok.com/@hasilata1?_r=1&_t=ZS-93ivd7mScrY" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-background/10 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1v-3.5a6.37 6.37 0 00-.79-.05A6.34 6.34 0 003.15 15.2a6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.34-6.34V8.87a8.16 8.16 0 004.76 1.52v-3.4a4.85 4.85 0 01-1-.3z"/>
                </svg>
              </a>
              <a href="https://www.youtube.com/@HasilazaMotor/shorts" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-background/10 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                </svg>
              </a>
            </div>
          </motion.div>

{/* Quick Links */}
          <motion.div variants={fadeInUp}>
            <h3 className="font-bold text-lg mb-6">Produits</h3>
            <ul className="space-y-3">
              {quickLinks.map((link) => (
                <li key={link.href}>
                  <Link 
                    href={link.href}
                    className="text-background/70 hover:text-primary transition-colors inline-block"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </motion.div>

{/* Company Links */}
          <motion.div variants={fadeInUp}>
            <h3 className="font-bold text-lg mb-6">Entreprise</h3>
            <ul className="space-y-3">
              {companyLinks.map((link) => (
                <li key={link.href}>
                  <Link 
                    href={link.href}
                    className="text-background/70 hover:text-primary transition-colors inline-block"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </motion.div>

{/* Contact & Payment */}
          <motion.div variants={fadeInUp}>
            <h3 className="font-bold text-lg mb-6">Contact</h3>
            <ul className="space-y-4 mb-8">
              <li>
                <a 
                  href="tel:+221781094091" 
                  className="flex items-center gap-3 text-background/70 hover:text-primary transition-colors"
                >
                  <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                    <Phone className="w-5 h-5 text-primary" />
                  </div>
                  <div>
                    <span className="block text-sm text-background/50">Téléphone</span>
                    <span className="font-medium text-background">+221 781094091</span>
                  </div>
                </a>
              </li>
              <li>
                <a 
                  href="mailto:Mortalla581@gmail.com" 
                  className="flex items-center gap-3 text-background/70 hover:text-primary transition-colors"
                >
                  <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                    <Mail className="w-5 h-5 text-primary" />
                  </div>
                  <div>
                    <span className="block text-sm text-background/50">Email</span>
                    <span className="font-medium text-background text-sm">Mortalla581@gmail.com</span>
                  </div>
                </a>
              </li>
              <li className="flex items-center gap-3 text-background/70">
                <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                  <Clock className="w-5 h-5 text-primary" />
                </div>
                <div>
                  <span className="block text-sm text-background/50">Horaires</span>
                  <span className="font-medium text-background">Lun-Sam: 9h - 18h</span>
                </div>
              </li>
              <li className="flex items-start gap-3 text-background/70">
                <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center shrink-0">
                  <MapPin className="w-5 h-5 text-primary" />
                </div>
                <div>
                  <span className="block text-sm text-background/50">Adresse</span>
                  <span className="font-medium text-background">HLM 2, Dakar, Senegal</span>
                </div>
              </li>
            </ul>

</motion.div>
        </motion.div>
      </div>

{/* Bottom Bar */}
      <div className="border-t border-background/10">
        <div className="container mx-auto px-4 py-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="text-background/50 text-sm text-center md:text-left">
              © {new Date().getFullYear()} Hasilaza Motor. Tous droits réservés. 
              <span className="hidden md:inline"> | </span>
              <span className="block md:inline">Conçu avec passion au Sénégal</span>
            </p>
            <motion.button
              whileHover={{ scale: 1.1, y: -3 }}
              whileTap={{ scale: 0.9 }}
              onClick={scrollToTop}
              className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center hover:bg-primary/90 transition-colors"
            >
              <ArrowUp className="w-5 h-5 text-primary-foreground" />
            </motion.button>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { HeroSection } from "@/components/home/hero-section"
import { AboutSection } from "@/components/home/about-section"
import { AdvantagesSection } from "@/components/home/advantages-section"
import { ProductsSection } from "@/components/home/products-section"
import { PiecesSection } from "@/components/home/pieces-section"
import { PartnersSection } from "@/components/home/partners-section"
import { CTASection } from "@/components/home/cta-section"

export default function HomePage() {
  return (
    <main className="min-h-screen">
      <Header />
      <HeroSection />
      <AboutSection />
      <AdvantagesSection />
      <ProductsSection />
      <PiecesSection />
      <CTASection />
      <PartnersSection />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/home/pieces-section.tsx" isMerged="true"
"use client"

import { useRef, useState, useEffect, useCallback } from "react"
import Image from "next/image"
import Link from "next/link"
import { motion, useInView } from "framer-motion"
import { ArrowRight, Wrench, ChevronLeft, ChevronRight, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { getProducts, type Product } from "@/lib/supabase/products"

function PieceCard({ product, index }: { product: Product; index: number }) {
  return (
    <motion.div
      initial={{ opacity: 1, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, delay: index * 0.05 }}
      className="flex-shrink-0 w-[180px] sm:w-[200px]"
    >
      <Link href={`/produits/${product.slug}`} className="group block">
        <div className="relative aspect-square overflow-hidden rounded-2xl bg-card border border-border group-hover:border-primary/50 transition-all duration-300 group-hover:shadow-xl">
          <Image
            src={product.images?.[0] || "/images/pieces/default-piece.jpg"}
            alt={product.name}
            fill
            sizes="200px"
            className="object-cover transition-transform duration-500 group-hover:scale-110"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-foreground/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
          <div className="absolute bottom-3 left-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span className="text-xs font-semibold text-white">Voir le detail</span>
          </div>
        </div>
        <div className="mt-2.5 px-0.5">
          <h4 className="font-semibold text-foreground text-sm leading-tight line-clamp-2 group-hover:text-primary transition-colors">
            {product.name}
          </h4>
          <p className="text-muted-foreground text-xs mt-1">Contactez-nous pour le prix</p>
        </div>
      </Link>
    </motion.div>
  )
}

export function PiecesSection() {
  const sectionRef = useRef<HTMLElement>(null)
  const scrollContainerRef = useRef<HTMLDivElement>(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-100px" })
  const [pieces, setPieces] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [canScrollLeft, setCanScrollLeft] = useState(false)
  const [canScrollRight, setCanScrollRight] = useState(true)

useEffect(() => {
    async function loadPieces() {
      setLoading(true)
      const data = await getProducts()
      setPieces(data.filter((p) => p.category === "piece"))
      setLoading(false)
    }
    loadPieces()
  }, [])

const checkScroll = useCallback(() => {
    const el = scrollContainerRef.current
    if (!el) return
    setCanScrollLeft(el.scrollLeft > 5)
    setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 5)
  }, [])

useEffect(() => {
    const el = scrollContainerRef.current
    if (!el) return
    el.addEventListener("scroll", checkScroll, { passive: true })
    // Initial check after a small delay to let items render
    const timer = setTimeout(checkScroll, 100)
    return () => {
      el.removeEventListener("scroll", checkScroll)
      clearTimeout(timer)
    }
  }, [pieces, checkScroll])

const scroll = (direction: "left" | "right") => {
    const el = scrollContainerRef.current
    if (!el) return
    el.scrollBy({
      left: direction === "left" ? -400 : 400,
      behavior: "smooth",
    })
  }

if (loading) {
    return (
      <section className="py-20 lg:py-28 bg-primary">
        <div className="container mx-auto px-4 flex items-center justify-center py-12">
          <Loader2 className="h-10 w-10 animate-spin text-primary" />
        </div>
      </section>
    )
  }

if (pieces.length === 0) return null

return (
    <section ref={sectionRef} className="py-20 lg:py-28 bg-muted">
      <div className="container mx-auto px-4">
        {/* Header */}
        <motion.div
          initial={{ opacity: 1, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="flex flex-col sm:flex-row sm:items-end justify-between gap-6 mb-10"
        >
          <div>
            <motion.div
              initial={{ opacity: 1, scale: 0.8 }}
              animate={isInView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-4"
            >
              <Wrench className="w-4 h-4 text-primary" />
              <span className="text-sm font-semibold text-primary">Pieces Detachees</span>
            </motion.div>
            <h2 className="text-2xl lg:text-3xl xl:text-4xl font-bold text-foreground mb-2 text-balance">
              Nos <span className="text-primary">Pieces Detachees</span>
            </h2>
            <p className="text-muted-foreground max-w-lg leading-relaxed">
              Toutes les pieces compatibles pour vos tricycles et motos Hasilaza
            </p>
          </div>

<div className="flex items-center gap-3">
            <div className="hidden sm:flex items-center gap-2">
              <button
                type="button"
                onClick={() => scroll("left")}
                disabled={!canScrollLeft}
                className="w-10 h-10 rounded-full border border-border bg-card text-foreground flex items-center justify-center hover:bg-muted transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                aria-label="Defiler a gauche"
            >
                <ChevronLeft className="w-5 h-5" />
              </button>
              <button
                type="button"
                onClick={() => scroll("right")}
                disabled={!canScrollRight}
                className="w-10 h-10 rounded-full border border-border bg-card text-foreground flex items-center justify-center hover:bg-muted transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                aria-label="Defiler a droite"
            >
                <ChevronRight className="w-5 h-5" />
              </button>
            </div>
            <Button asChild variant="outline" size="lg" className="border-2 hover:bg-primary hover:text-primary-foreground hover:border-primary bg-transparent">
              <Link href="/produits?category=piece" className="flex items-center gap-2">
                Tout voir
                <ArrowRight className="w-5 h-5" />
              </Link>
            </Button>
          </div>
        </motion.div>

{/* Scrollable row */}
        <motion.div
          initial={{ opacity: 1, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.2 }}
          className="relative"
        >
          <div
            ref={scrollContainerRef}
            className="flex gap-5 overflow-x-auto pb-4"
            style={{ scrollbarWidth: "none", WebkitOverflowScrolling: "touch" }}
          >
            {pieces.map((piece, i) => (
              <PieceCard key={piece.id} product={piece} index={i} />
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/products-section.tsx" isMerged="true"
"use client"

import { useRef, useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { motion, useInView, AnimatePresence } from "framer-motion"
import { ArrowRight, Star, ShoppingBag, Eye, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { getProducts, formatPrice, type Product } from "@/lib/supabase/products"

const categories = [
  { id: "all", label: "Tout voir" },
  { id: "tricycle", label: "Tricycles" },
  { id: "moto", label: "Motos" },
]

function ProductCard({ product, index }: { product: Product; index: number }) {
  const [isHovered, setIsHovered] = useState(false)

return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      layout
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className="group relative"
    >
    <Link href={`/produits/${product.slug}`} className="block bg-background rounded-3xl overflow-hidden shadow-lg border border-border hover:shadow-2xl transition-all duration-300">
      {/* Image Container */}
      <div className="relative aspect-square overflow-hidden bg-muted">
        <Image
          src={product.images[0] || "/placeholder.svg"}
          alt={product.name}
          fill
          className="object-cover transition-transform duration-500 group-hover:scale-110"
        />
        
        {/* Overlay */}
        <AnimatePresence>
          {isHovered && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="absolute inset-0 bg-foreground/40 flex items-center justify-center gap-3"
            >
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                exit={{ scale: 0 }}
                transition={{ type: "spring", stiffness: 300, damping: 20 }}
              >
                <span
                  className="w-12 h-12 bg-background rounded-full flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"
                >
                  <Eye className="w-5 h-5" />
                </span>
              </motion.div>
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                exit={{ scale: 0 }}
                transition={{ type: "spring", stiffness: 300, damping: 20, delay: 0.05 }}
                onClick={(e) => e.preventDefault()}
              >
                <a
                  href={`https://wa.me/221781094091?text=Bonjour, je suis intéressé par ${product.name}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-primary-foreground hover:bg-primary/90 transition-colors"
                >
                  <ShoppingBag className="w-5 h-5" />
                </a>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>

{/* Badges */}
        <div className="absolute top-4 left-4 flex flex-col gap-2">
          {product.is_best_seller && (
            <span className="px-3 py-1 bg-primary text-primary-foreground text-xs font-bold rounded-full">
              Best-Seller
            </span>
          )}
          {product.is_new && (
            <span className="px-3 py-1 bg-foreground text-background text-xs font-bold rounded-full">
              Nouveau
            </span>
          )}
          {product.old_price && (
            <span className="px-3 py-1 bg-green-500 text-white text-xs font-bold rounded-full">
              -{Math.round((1 - product.price / product.old_price) * 100)}%
            </span>
          )}
        </div>
      </div>

{/* Content */}
      <div className="p-5">
        {/* Category */}
        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
          {product.subcategory || product.category}
        </span>

{/* Name */}
        <h3 className="font-bold text-foreground mt-1 mb-2 group-hover:text-primary transition-colors line-clamp-1">
          {product.name}
        </h3>

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

{/* Price */}
        <div className="flex items-center gap-3">
          <span className="text-xl font-bold text-primary">
            {formatPrice(product.price)}
          </span>
          {product.old_price && (
            <span className="text-sm text-muted-foreground line-through">
              {formatPrice(product.old_price)}
            </span>
          )}
        </div>
      </div>
    </Link>
    </motion.div>
  )
}

export function ProductsSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })
  const [activeCategory, setActiveCategory] = useState("all")
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function loadProducts() {
      setLoading(true)
      const data = await getProducts()
      setProducts(data)
      setLoading(false)
    }
    loadProducts()
  }, [])

const vehicleProducts = products.filter(p => p.category !== "piece")
  const filteredProducts = activeCategory === "all" 
    ? vehicleProducts.slice(0, 8) 
    : vehicleProducts.filter(p => p.category === activeCategory).slice(0, 8)

return (
    <section ref={ref} className="py-24 lg:py-32 bg-muted/30 overflow-hidden">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="flex flex-col lg:flex-row lg:items-end justify-between gap-8 mb-12"
        >
          <div>
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={isInView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
            >
              <span className="text-sm font-semibold text-primary">Nos Produits</span>
            </motion.div>
            <h2 className="text-3xl lg:text-4xl xl:text-5xl font-bold text-foreground mb-4">
              <span className="text-balance">Découvrez nos </span>
              <span className="text-primary">Best-Sellers</span>
            </h2>
            <p className="text-lg text-muted-foreground max-w-xl">
              Une sélection de nos véhicules et pièces les plus populaires
            </p>
          </div>

<motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.3 }}
          >
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button asChild variant="outline" size="lg" className="border-2 hover:bg-primary hover:text-primary-foreground hover:border-primary bg-transparent">
                <Link href="/produits" className="flex items-center gap-2">
                  Voir tout le catalogue
                  <ArrowRight className="w-5 h-5" />
                </Link>
              </Button>
            </motion.div>
          </motion.div>
        </motion.div>

{/* Category Tabs */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.2 }}
          className="flex flex-wrap gap-3 mb-12"
        >
          {categories.map((cat) => (
            <motion.button
              key={cat.id}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => setActiveCategory(cat.id)}
              className={`px-6 py-3 rounded-full font-medium transition-all ${
                activeCategory === cat.id
                  ? "bg-primary text-primary-foreground shadow-lg shadow-primary/30"
                  : "bg-background text-foreground hover:bg-muted border border-border"
              }`}
            >
              {cat.label}
            </motion.button>
          ))}
        </motion.div>

{/* Products Grid */}
        {loading ? (
          <div className="flex items-center justify-center py-16">
            <Loader2 className="h-12 w-12 animate-spin text-primary" />
          </div>
        ) : filteredProducts.length === 0 ? (
          <div className="text-center py-16">
            <p className="text-muted-foreground text-lg">Aucun produit trouve dans cette categorie</p>
          </div>
        ) : (
          <motion.div layout className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <AnimatePresence mode="wait">
              {filteredProducts.map((product, index) => (
                <ProductCard key={product.id} product={product} index={index} />
              ))}
            </AnimatePresence>
          </motion.div>
        )}

{/* Bottom CTA */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.8 }}
          className="text-center mt-16"
        >
          <p className="text-muted-foreground mb-4">
            Vous ne trouvez pas ce que vous cherchez?
          </p>
          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="inline-block">
            <a
              href="https://wa.me/221781094091?text=Bonjour, je cherche un produit spécifique"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 text-primary font-semibold hover:underline"
            >
              Contactez-nous pour une demande personnalisée
              <ArrowRight className="w-5 h-5" />
            </a>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-sidebar.tsx" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import {
  LayoutDashboard,
  Package,
  ShoppingCart,
  BarChart3,
  Settings,
  Users,
  LogOut,
  Menu,
  Receipt,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState } from "react"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

const navItems = [
  {
    title: "Tableau de bord",
    href: "/admin",
    icon: LayoutDashboard,
  },
  {
    title: "Produits",
    href: "/admin/produits",
    icon: Package,
  },
  {
    title: "Commandes",
    href: "/admin/commandes",
    icon: ShoppingCart,
  },
  {
    title: "Factures",
    href: "/admin/factures",
    icon: Receipt,
  },
  {
    title: "Statistiques",
    href: "/admin/statistiques",
    icon: BarChart3,
  },
  {
    title: "Clients",
    href: "/admin/clients",
    icon: Users,
  },
  {
    title: "Parametres",
    href: "/admin/parametres",
    icon: Settings,
  },
]

function SidebarContent() {
  const pathname = usePathname()

return (
    <div className="flex h-full flex-col">
      {/* Logo */}
      <div className="flex h-16 items-center border-b border-border px-6">
        <Link href="/admin" className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg overflow-hidden">
            <Image src="/images/logo-hasilaza.png" alt="Hasilaza" width={32} height={32} className="w-full h-full object-contain" />
          </div>
          <span className="text-lg font-bold text-foreground">Hasilaza</span>
        </Link>
      </div>

{/* Navigation */}
      <nav className="flex-1 space-y-1 p-4">
        {navItems.map((item) => {
          const isActive = pathname === item.href || 
            (item.href !== "/admin" && pathname.startsWith(item.href))
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
                isActive
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
              )}
            >
              <item.icon className="h-5 w-5" />
              {item.title}
            </Link>
          )
        })}
      </nav>

{/* Footer */}
      <div className="border-t border-border p-4">
        <Link
          href="/"
          className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
        >
          <LogOut className="h-5 w-5" />
          Retour au site
        </Link>
      </div>
    </div>
  )
}

export function AdminSidebar() {
  const [open, setOpen] = useState(false)

return (
    <>
      {/* Mobile Sidebar */}
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="fixed left-4 top-4 z-50 lg:hidden"
          >
            <Menu className="h-5 w-5" />
            <span className="sr-only">Menu</span>
          </Button>
        </SheetTrigger>
        <SheetContent side="left" className="w-72 p-0">
          <SidebarContent />
        </SheetContent>
      </Sheet>

{/* Desktop Sidebar */}
      <aside className="fixed inset-y-0 left-0 z-40 hidden w-72 border-r border-border bg-card lg:block">
        <SidebarContent />
      </aside>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin/factures/page.tsx"
"use client"

import { useState, useRef, useEffect, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Label } from "@/components/ui/label"
import {
  Plus,
  Trash2,
  Download,
  MessageCircle,
  Printer,
  Building2,
  User,
  Receipt,
  FileText,
  Search,
} from "lucide-react"
import Image from "next/image"
import { useToast } from "@/hooks/use-toast"
import { getProducts, type Product } from "@/lib/supabase/products"

interface InvoiceLine {
  id: string
  description: string
  quantity: number
  unitPrice: number
}

interface InvoiceData {
  invoiceNumber: string
  date: string
  dueDate: string
  clientName: string
  clientPhone: string
  clientEmail: string
  clientAddress: string
  clientCity: string
  lines: InvoiceLine[]
  discount: number
  advance: number
  notes: string
  conditions: string
}

const SHOP_INFO = {
  name: "Hasilaza Motor",
  address: "HLM 2, Dakar, Senegal",
  phone: "+221 78 109 40 91",
  email: "Mortalla581@gmail.com",
  logo: "/images/logo-hasilaza.png",
}

function generateInvoiceNumber() {
  const year = new Date().getFullYear()
  const rand = Math.floor(Math.random() * 9000) + 1000
  return `FAC-${year}-${rand}`
}

// Use a locale-independent formatter to avoid the "/" separator bug in fr-SN
function formatPriceFCFA(n: number) {
  // Format with spaces as thousand separator: 40 000 FCFA
  const formatted = Math.round(n)
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, "\u00A0") // non-breaking space
  return `${formatted} FCFA`
}

function newLine(): InvoiceLine {
  return { id: crypto.randomUUID(), description: "", quantity: 1, unitPrice: 0 }
}

// --- Product suggestion dropdown ---
function ProductSuggestion({
  value,
  products,
  onChange,
  onSelect,
  placeholder,
}: {
  value: string
  products: Product[]
  onChange: (v: string) => void
  onSelect: (p: Product) => void
  placeholder: string
}) {
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

const filtered = value.trim().length > 0
    ? products.filter((p) =>
        p.name.toLowerCase().includes(value.toLowerCase())
      ).slice(0, 6)
    : []

useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClick)
    return () => document.removeEventListener("mousedown", handleClick)
  }, [])

return (
    <div className="relative w-full" ref={ref}>
      <div className="relative">
        <Input
          placeholder={placeholder}
          value={value}
          onChange={(e) => {
            onChange(e.target.value)
            setOpen(true)
          }}
          onFocus={() => setOpen(true)}
          className="pr-8"
        />
        <Search className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
      </div>
      {open && filtered.length > 0 && (
        <div className="absolute z-50 top-full left-0 right-0 mt-1 bg-popover border border-border rounded-lg shadow-xl overflow-hidden">
          {filtered.map((p) => (
            <button
              key={p.id}
              type="button"
              className="w-full text-left px-3 py-2 text-sm hover:bg-accent flex items-center justify-between gap-2 border-b border-border last:border-0"
              onMouseDown={(e) => {
                e.preventDefault()
                onSelect(p)
                setOpen(false)
              }}
            >
              <span className="font-medium truncate">{p.name}</span>
              <span className="text-xs text-muted-foreground shrink-0">
                {p.category === "piece" ? "Sur demande" : formatPriceFCFA(p.price)}
              </span>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

export default function FacturesPage() {
  const { toast } = useToast()
  const [products, setProducts] = useState<Product[]>([])
  const [generating, setGenerating] = useState(false)

const [invoice, setInvoice] = useState<InvoiceData>({
    invoiceNumber: generateInvoiceNumber(),
    date: new Date().toISOString().split("T")[0],
    dueDate: "",
    clientName: "",
    clientPhone: "",
    clientEmail: "",
    clientAddress: "",
    clientCity: "",
    lines: [newLine()],
    discount: 0,
    advance: 0,
    notes: "",
    conditions: "Paiement a la livraison. Aucun retour accepte sans accord prealable.",
  })

useEffect(() => {
    getProducts().then(setProducts)
  }, [])

const subtotal = invoice.lines.reduce((s, l) => s + l.quantity * l.unitPrice, 0)
  const total = Math.max(0, subtotal - invoice.discount)
  const remaining = Math.max(0, total - invoice.advance)

function updateLine(id: string, field: keyof InvoiceLine, value: string | number) {
    setInvoice((prev) => ({
      ...prev,
      lines: prev.lines.map((l) => (l.id === id ? { ...l, [field]: value } : l)),
    }))
  }

function selectProductForLine(id: string, product: Product) {
    setInvoice((prev) => ({
      ...prev,
      lines: prev.lines.map((l) =>
        l.id === id
          ? { ...l, description: product.name, unitPrice: product.category === "piece" ? 0 : product.price }
          : l
      ),
    }))
  }

function addLine() {
    setInvoice((prev) => ({ ...prev, lines: [...prev.lines, newLine()] }))
  }

function removeLine(id: string) {
    setInvoice((prev) => ({
      ...prev,
      lines: prev.lines.length > 1 ? prev.lines.filter((l) => l.id !== id) : prev.lines,
    }))
  }

const buildPDFDoc = useCallback(async () => {
    const { default: jsPDF } = await import("jspdf")
    const { default: autoTable } = await import("jspdf-autotable")

const doc = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4" })
    const W = 210
    const margin = 14

// ---- Header bar ----
    doc.setFillColor(15, 23, 42)
    doc.rect(0, 0, W, 45, "F")

// Logo
    try {
      const canvas = await new Promise<HTMLCanvasElement>((resolve) => {
        const img = new Image()
        img.crossOrigin = "anonymous"
        img.onload = () => {
          const c = document.createElement("canvas")
          c.width = img.width
          c.height = img.height
          const ctx = c.getContext("2d")
          if (ctx) ctx.drawImage(img, 0, 0)
          resolve(c)
        }
        img.src = SHOP_INFO.logo
      })
      const imgData = canvas.toDataURL("image/png")
      doc.addImage(imgData, "PNG", margin, 7, 15, 15)
    } catch (e) {
      // If logo fails, skip it
    }

// Shop name
    doc.setFontSize(18)
    doc.setTextColor(255, 255, 255)
    doc.setFont("helvetica", "bold")
    doc.text(SHOP_INFO.name.toUpperCase(), margin + 18, 16)

// Shop details
    doc.setFontSize(8)
    doc.setFont("helvetica", "normal")
    doc.setTextColor(200, 210, 220)
    doc.text(SHOP_INFO.address, margin + 18, 23)
    doc.text(`Tel: ${SHOP_INFO.phone}`, margin + 18, 28)
    doc.text(`Email: ${SHOP_INFO.email}`, margin + 18, 33)

// Invoice badge (right side)
    doc.setFillColor(220, 38, 38)
    doc.roundedRect(W - 62, 6, 50, 32, 3, 3, "F")
    doc.setFontSize(13)
    doc.setFont("helvetica", "bold")
    doc.setTextColor(255, 255, 255)
    doc.text("FACTURE", W - 37, 17, { align: "center" })
    doc.setFontSize(8)
    doc.setFont("helvetica", "normal")
    doc.text(invoice.invoiceNumber, W - 37, 23, { align: "center" })
    doc.text(`Date: ${new Date(invoice.date).toLocaleDateString("fr-FR")}`, W - 37, 28, { align: "center" })
    if (invoice.dueDate) {
      doc.text(`Echeance: ${new Date(invoice.dueDate).toLocaleDateString("fr-FR")}`, W - 37, 33, { align: "center" })
    }

// ---- Client block ----
    const cy = 52
    doc.setFillColor(241, 245, 249)
    doc.roundedRect(margin, cy, 90, 36, 3, 3, "F")
    doc.setFontSize(7)
    doc.setFont("helvetica", "bold")
    doc.setTextColor(100, 116, 139)
    doc.text("FACTURE A:", margin + 4, cy + 7)
    doc.setFontSize(11)
    doc.setFont("helvetica", "bold")
    doc.setTextColor(15, 23, 42)
    doc.text(invoice.clientName || "—", margin + 4, cy + 15)
    doc.setFontSize(8)
    doc.setFont("helvetica", "normal")
    doc.setTextColor(71, 85, 105)
    let cy2 = cy + 21
    if (invoice.clientPhone) { doc.text(`Tel: ${invoice.clientPhone}`, margin + 4, cy2); cy2 += 5 }
    if (invoice.clientEmail) { doc.text(`Email: ${invoice.clientEmail}`, margin + 4, cy2); cy2 += 5 }
    if (invoice.clientAddress) {
      const addr = `${invoice.clientAddress}${invoice.clientCity ? ", " + invoice.clientCity : ""}`
      doc.text(addr, margin + 4, cy2)
    }

// ---- Products table ----
    const tableData = invoice.lines
      .filter((l) => l.description)
      .map((l, i) => [
        String(i + 1),
        l.description,
        String(l.quantity),
        formatPriceFCFA(l.unitPrice),
        formatPriceFCFA(l.quantity * l.unitPrice),
      ])

autoTable(doc, {
      startY: cy + 44,
      head: [["N°", "DESIGNATION", "QTE", "PRIX UNIT.", "TOTAL"]],
      body: tableData.length > 0 ? tableData : [["", "Aucun article", "", "", ""]],
      theme: "grid",
      headStyles: {
        fillColor: [15, 23, 42],
        textColor: [255, 255, 255],
        fontStyle: "bold",
        fontSize: 8,
        halign: "center",
        cellPadding: 3,
      },
      bodyStyles: {
        fontSize: 8,
        textColor: [30, 30, 30],
        cellPadding: 3,
      },
      columnStyles: {
        0: { cellWidth: 10, halign: "center" },
        1: { cellWidth: "auto", halign: "left" },
        2: { cellWidth: 14, halign: "center" },
        3: { cellWidth: 38, halign: "right" },
        4: { cellWidth: 38, halign: "right" },
      },
      alternateRowStyles: { fillColor: [248, 250, 252] },
      margin: { left: margin, right: margin },
    })

// ---- Totals block ----
    const finalY: number = (doc as any).lastAutoTable.finalY + 6
    const bx = W - margin - 76
    const bw = 76
    const rowH = 8

const rows: { label: string; value: string; highlight: boolean }[] = [
      { label: "Sous-total", value: formatPriceFCFA(subtotal), highlight: false },
      ...(invoice.discount > 0
        ? [{ label: `Remise`, value: `- ${formatPriceFCFA(invoice.discount)}`, highlight: false }]
        : []),
      { label: "TOTAL", value: formatPriceFCFA(total), highlight: true },
      ...(invoice.advance > 0
        ? [{ label: "Avance recue", value: `- ${formatPriceFCFA(invoice.advance)}`, highlight: false }]
        : []),
      { label: "RESTANT A PAYER", value: formatPriceFCFA(remaining), highlight: remaining > 0 },
    ]

let ry = finalY
    rows.forEach(({ label, value, highlight }) => {
      const h = highlight ? rowH + 1 : rowH
      if (highlight) {
        doc.setFillColor(15, 23, 42)
        doc.rect(bx, ry, bw, h, "F")
        doc.setTextColor(255, 255, 255)
        doc.setFont("helvetica", "bold")
        doc.setFontSize(9)
      } else {
        doc.setFillColor(248, 250, 252)
        doc.rect(bx, ry, bw, h, "F")
        doc.setTextColor(50, 50, 50)
        doc.setFont("helvetica", "normal")
        doc.setFontSize(8)
      }
      const textY = ry + h - 2.5
      doc.text(label, bx + 4, textY)
      doc.text(value, bx + bw - 4, textY, { align: "right" })
      ry += h
    })

// ---- Notes & Conditions ----
    const notesY = ry + 8
    if (invoice.notes || invoice.conditions) {
      doc.setDrawColor(203, 213, 225)
      doc.setLineWidth(0.3)
      doc.line(margin, notesY, W - margin, notesY)
      let ny = notesY + 6
      if (invoice.notes) {
        doc.setFont("helvetica", "bold"); doc.setFontSize(8); doc.setTextColor(15, 23, 42)
        doc.text("Notes:", margin, ny); ny += 5
        doc.setFont("helvetica", "normal"); doc.setTextColor(80, 80, 80)
        const lines = doc.splitTextToSize(invoice.notes, W - margin * 2)
        doc.text(lines, margin, ny); ny += lines.length * 4 + 4
      }
      if (invoice.conditions) {
        doc.setFont("helvetica", "bold"); doc.setFontSize(8); doc.setTextColor(15, 23, 42)
        doc.text("Conditions:", margin, ny); ny += 5
        doc.setFont("helvetica", "normal"); doc.setTextColor(80, 80, 80)
        const lines = doc.splitTextToSize(invoice.conditions, W - margin * 2)
        doc.text(lines, margin, ny)
      }
    }

// ---- Footer ----
    const pH = doc.internal.pageSize.getHeight()
    doc.setFillColor(15, 23, 42)
    doc.rect(0, pH - 14, W, 14, "F")
    doc.setFontSize(7)
    doc.setFont("helvetica", "normal")
    doc.setTextColor(180, 190, 200)
    doc.text(
      `${SHOP_INFO.name}  |  ${SHOP_INFO.address}  |  ${SHOP_INFO.phone}  |  ${SHOP_INFO.email}`,
      W / 2,
      pH - 6,
      { align: "center" }
    )

return doc
  }, [invoice, subtotal, total, remaining])

async function handleDownloadPDF() {
    setGenerating(true)
    try {
      const doc = await buildPDFDoc()
      doc.save(`${invoice.invoiceNumber}.pdf`)
      toast({ title: "Facture telechargee", description: `${invoice.invoiceNumber}.pdf` })
    } catch (err) {
      console.error("[v0] PDF error:", err)
      toast({ title: "Erreur PDF", description: "Impossible de generer le PDF", variant: "destructive" })
    } finally {
      setGenerating(false)
    }
  }

async function handleWhatsApp() {
    // 1. Generate + download PDF automatically
    setGenerating(true)
    try {
      const doc = await buildPDFDoc()
      doc.save(`${invoice.invoiceNumber}.pdf`)
    } catch (err) {
      console.error("[v0] PDF error:", err)
    } finally {
      setGenerating(false)
    }

// 2. Open WhatsApp with a summary message
    const lines = invoice.lines.filter((l) => l.description)
    const itemsText = lines
      .map((l) => `  - ${l.description}: ${l.quantity} x ${formatPriceFCFA(l.unitPrice)} = ${formatPriceFCFA(l.quantity * l.unitPrice)}`)
      .join("\n")

const msg = [
      `*FACTURE ${invoice.invoiceNumber}*`,
      `Date: ${new Date(invoice.date).toLocaleDateString("fr-FR")}`,
      "",
      `*Client:* ${invoice.clientName}`,
      invoice.clientPhone ? `Tel: ${invoice.clientPhone}` : "",
      invoice.clientAddress ? `Adresse: ${invoice.clientAddress}${invoice.clientCity ? ", " + invoice.clientCity : ""}` : "",
      "",
      "*Articles:*",
      itemsText,
      "",
      `Sous-total: ${formatPriceFCFA(subtotal)}`,
      invoice.discount > 0 ? `Remise: - ${formatPriceFCFA(invoice.discount)}` : "",
      `*TOTAL: ${formatPriceFCFA(total)}*`,
      invoice.advance > 0 ? `Avance recue: - ${formatPriceFCFA(invoice.advance)}` : "",
      `*Restant a payer: ${formatPriceFCFA(remaining)}*`,
      "",
      invoice.notes ? `Notes: ${invoice.notes}` : "",
      invoice.conditions ? `Conditions: ${invoice.conditions}` : "",
      "",
      `_${SHOP_INFO.name} | ${SHOP_INFO.phone}_`,
    ]
      .filter((l) => l !== "")
      .join("\n")

const phone = invoice.clientPhone.replace(/[^0-9]/g, "")
    const url = `https://wa.me/${phone || "221781094091"}?text=${encodeURIComponent(msg)}`
    window.open(url, "_blank")

toast({
      title: "PDF telecharge + WhatsApp ouvert",
      description: "Le PDF a ete telecharge. Joignez-le manuellement dans la conversation WhatsApp.",
    })
  }

function handlePrint() {
    window.print()
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight md:text-3xl flex items-center gap-2">
            <Receipt className="h-7 w-7 text-primary" />
            Generer une facture
          </h1>
          <p className="text-muted-foreground">Creez et exportez des factures professionnelles</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button variant="outline" onClick={handlePrint} className="gap-2">
            <Printer className="h-4 w-4" />
            Imprimer
          </Button>
          <Button variant="outline" onClick={handleWhatsApp} disabled={generating} className="gap-2">
            <MessageCircle className="h-4 w-4" />
            WhatsApp
          </Button>
          <Button onClick={handleDownloadPDF} disabled={generating} className="gap-2">
            <Download className="h-4 w-4" />
            {generating ? "Generation..." : "Telecharger PDF"}
          </Button>
        </div>
      </div>

<div className="grid gap-6 lg:grid-cols-3">
        {/* Left: form */}
        <div className="space-y-6 lg:col-span-2">
          {/* Invoice meta */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-base">
                <FileText className="h-4 w-4" />
                Informations de la facture
              </CardTitle>
            </CardHeader>
            <CardContent className="grid gap-4 sm:grid-cols-3">
              <div className="space-y-1.5">
                <Label>Numero de facture</Label>
                <Input
                  value={invoice.invoiceNumber}
                  onChange={(e) => setInvoice((p) => ({ ...p, invoiceNumber: e.target.value }))}
                />
              </div>
              <div className="space-y-1.5">
                <Label>Date</Label>
                <Input
                  type="date"
                  value={invoice.date}
                  onChange={(e) => setInvoice((p) => ({ ...p, date: e.target.value }))}
                />
              </div>
              <div className="space-y-1.5">
                <Label>{"Date d'echeance"}</Label>
                <Input
                  type="date"
                  value={invoice.dueDate}
                  onChange={(e) => setInvoice((p) => ({ ...p, dueDate: e.target.value }))}
                />
              </div>
            </CardContent>
          </Card>

{/* Client info */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-base">
                <User className="h-4 w-4" />
                Informations client
              </CardTitle>
            </CardHeader>
            <CardContent className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5">
                <Label>Nom complet *</Label>
                <Input
                  placeholder="Prenom Nom"
                  value={invoice.clientName}
                  onChange={(e) => setInvoice((p) => ({ ...p, clientName: e.target.value }))}
                />
              </div>
              <div className="space-y-1.5">
                <Label>Telephone *</Label>
                <Input
                  placeholder="+221 XX XXX XX XX"
                  value={invoice.clientPhone}
                  onChange={(e) => setInvoice((p) => ({ ...p, clientPhone: e.target.value }))}
                />
              </div>
              <div className="space-y-1.5">
                <Label>Email</Label>
                <Input
                  type="email"
                  placeholder="client@email.com"
                  value={invoice.clientEmail}
                  onChange={(e) => setInvoice((p) => ({ ...p, clientEmail: e.target.value }))}
                />
              </div>
              <div className="space-y-1.5">
                <Label>Ville</Label>
                <Input
                  placeholder="Dakar"
                  value={invoice.clientCity}
                  onChange={(e) => setInvoice((p) => ({ ...p, clientCity: e.target.value }))}
                />
              </div>
              <div className="space-y-1.5 sm:col-span-2">
                <Label>Adresse</Label>
                <Input
                  placeholder="Rue, Quartier..."
                  value={invoice.clientAddress}
                  onChange={(e) => setInvoice((p) => ({ ...p, clientAddress: e.target.value }))}
                />
              </div>
            </CardContent>
          </Card>

{/* Products */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Articles / Services</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {/* Table header */}
              <div className="hidden sm:grid grid-cols-[1fr_72px_120px_44px_32px] gap-2 text-xs font-semibold uppercase text-muted-foreground">
                <span>Description</span>
                <span className="text-center">Qte</span>
                <span className="text-right">Prix unit. (FCFA)</span>
                <span className="text-right text-xs">Total</span>
                <span />
              </div>

{invoice.lines.map((line, idx) => (
                <div key={line.id} className="grid grid-cols-1 gap-2 sm:grid-cols-[1fr_72px_120px_44px_32px] sm:items-center">
                  {/* Description with autocomplete */}
                  <ProductSuggestion
                    value={line.description}
                    products={products}
                    placeholder={`Article ${idx + 1}`}
                    onChange={(v) => updateLine(line.id, "description", v)}
                    onSelect={(p) => selectProductForLine(line.id, p)}
                  />
                  {/* Qty */}
                  <Input
                    type="number"
                    min={1}
                    value={line.quantity}
                    onChange={(e) => updateLine(line.id, "quantity", Math.max(1, Number(e.target.value)))}
                    className="text-center"
                  />
                  {/* Unit price */}
                  <Input
                    type="number"
                    min={0}
                    step={500}
                    placeholder="0"
                    value={line.unitPrice || ""}
                    onChange={(e) => updateLine(line.id, "unitPrice", Number(e.target.value))}
                    className="text-right"
                  />
                  {/* Line total */}
                  <span className="text-right text-sm font-medium text-muted-foreground hidden sm:block whitespace-nowrap">
                    {formatPriceFCFA(line.quantity * line.unitPrice)}
                  </span>
                  {/* Remove */}
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-destructive hover:text-destructive h-8 w-8"
                    onClick={() => removeLine(line.id)}
                    disabled={invoice.lines.length === 1}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}

<Button variant="outline" size="sm" onClick={addLine} className="gap-2 mt-2">
                <Plus className="h-4 w-4" />
                Ajouter un article
              </Button>
            </CardContent>
          </Card>

{/* Notes */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Notes et conditions</CardTitle>
            </CardHeader>
            <CardContent className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5">
                <Label>Notes supplementaires</Label>
                <Textarea
                  placeholder="Informations supplementaires pour le client..."
                  value={invoice.notes}
                  onChange={(e) => setInvoice((p) => ({ ...p, notes: e.target.value }))}
                  rows={3}
                />
              </div>
              <div className="space-y-1.5">
                <Label>Conditions de paiement</Label>
                <Textarea
                  value={invoice.conditions}
                  onChange={(e) => setInvoice((p) => ({ ...p, conditions: e.target.value }))}
                  rows={3}
                />
              </div>
            </CardContent>
          </Card>
        </div>

{/* Right: summary */}
        <div className="space-y-6">
          {/* Shop info */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-base">
                <Building2 className="h-4 w-4" />
                Boutique
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center gap-3">
                <div className="h-12 w-12 rounded-xl overflow-hidden bg-muted flex items-center justify-center shrink-0">
                  <Image
                    src="/images/logo-hasilaza.png"
                    alt="Logo Hasilaza"
                    width={48}
                    height={48}
                    className="object-contain"
                  />
                </div>
                <div>
                  <p className="font-bold text-sm">{SHOP_INFO.name}</p>
                  <p className="text-xs text-muted-foreground">{SHOP_INFO.address}</p>
                </div>
              </div>
              <Separator />
              <div className="space-y-1 text-xs text-muted-foreground">
                <p>Tel: {SHOP_INFO.phone}</p>
                <p>Email: {SHOP_INFO.email}</p>
              </div>
            </CardContent>
          </Card>

{/* Totals */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Recapitulatif</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted-foreground">Sous-total</span>
                <span className="font-medium">{formatPriceFCFA(subtotal)}</span>
              </div>

<div className="flex items-center justify-between gap-2 text-sm">
                <Label className="text-muted-foreground shrink-0">Remise (FCFA)</Label>
                <Input
                  type="number"
                  min={0}
                  value={invoice.discount || ""}
                  onChange={(e) => setInvoice((p) => ({ ...p, discount: Number(e.target.value) }))}
                  className="w-32 h-8 text-right text-sm"
                  placeholder="0"
                />
              </div>

<div className="flex items-center justify-between font-bold">
                <span>Total</span>
                <span className="text-primary">{formatPriceFCFA(total)}</span>
              </div>

<div className="flex items-center justify-between gap-2 text-sm">
                <Label className="text-muted-foreground shrink-0">Avance recue (FCFA)</Label>
                <Input
                  type="number"
                  min={0}
                  value={invoice.advance || ""}
                  onChange={(e) => setInvoice((p) => ({ ...p, advance: Number(e.target.value) }))}
                  className="w-32 h-8 text-right text-sm"
                  placeholder="0"
                />
              </div>

<div className="flex items-center justify-between font-bold text-lg">
                <span>Restant a payer</span>
                <span className={remaining > 0 ? "text-destructive" : "text-green-600"}>
                  {formatPriceFCFA(remaining)}
                </span>
              </div>
            </CardContent>
          </Card>

{/* Actions */}
          <div className="flex flex-col gap-2">
            <Button className="w-full gap-2" onClick={handleDownloadPDF} disabled={generating}>
              <Download className="h-4 w-4" />
              {generating ? "Generation..." : "Telecharger PDF"}
            </Button>
            <Button variant="outline" className="w-full gap-2" onClick={handleWhatsApp} disabled={generating}>
              <MessageCircle className="h-4 w-4" />
              Envoyer par WhatsApp
            </Button>
            <Button variant="ghost" className="w-full gap-2" onClick={handlePrint}>
              <Printer className="h-4 w-4" />
              Imprimer
            </Button>
          </div>
        </div>
      </div>

{/* Print view */}
      <div className="hidden print:block">
        <InvoicePrintView invoice={invoice} subtotal={subtotal} total={total} remaining={remaining} />
      </div>
    </div>
  )
}

function InvoicePrintView({
  invoice,
  subtotal,
  total,
  remaining,
}: {
  invoice: InvoiceData
  subtotal: number
  total: number
  remaining: number
}) {
  return (
    <div className="p-8 font-sans text-sm text-foreground">
      <div className="flex items-start justify-between mb-8 pb-6 border-b-2 border-foreground">
        <div>
          <div className="flex items-center gap-3 mb-2">
            <Image src="/images/logo-hasilaza.png" alt="Logo" width={48} height={48} className="object-contain" />
            <h1 className="text-2xl font-bold">{SHOP_INFO.name}</h1>
          </div>
          <p className="text-muted-foreground text-xs">{SHOP_INFO.address}</p>
          <p className="text-muted-foreground text-xs">Tel: {SHOP_INFO.phone}</p>
          <p className="text-muted-foreground text-xs">Email: {SHOP_INFO.email}</p>
        </div>
        <div className="text-right">
          <h2 className="text-3xl font-black text-primary mb-1">FACTURE</h2>
          <p className="font-bold">{invoice.invoiceNumber}</p>
          <p className="text-xs text-muted-foreground">
            Date: {new Date(invoice.date).toLocaleDateString("fr-FR")}
          </p>
          {invoice.dueDate && (
            <p className="text-xs text-muted-foreground">
              Echeance: {new Date(invoice.dueDate).toLocaleDateString("fr-FR")}
            </p>
          )}
        </div>
      </div>

<div className="mb-8 p-4 bg-muted rounded-lg">
        <p className="text-xs font-bold uppercase text-muted-foreground mb-1">Facture a:</p>
        <p className="font-bold text-lg">{invoice.clientName}</p>
        {invoice.clientPhone && <p className="text-xs">Tel: {invoice.clientPhone}</p>}
        {invoice.clientEmail && <p className="text-xs">Email: {invoice.clientEmail}</p>}
        {invoice.clientAddress && (
          <p className="text-xs">
            {invoice.clientAddress}
            {invoice.clientCity ? `, ${invoice.clientCity}` : ""}
          </p>
        )}
      </div>

<table className="w-full mb-6 border-collapse text-xs">
        <thead>
          <tr className="bg-foreground text-background">
            <th className="text-center p-2 w-8">#</th>
            <th className="text-left p-2">DESIGNATION</th>
            <th className="text-center p-2 w-12">QTE</th>
            <th className="text-right p-2 w-32">PRIX UNIT.</th>
            <th className="text-right p-2 w-32">TOTAL</th>
          </tr>
        </thead>
        <tbody>
          {invoice.lines
            .filter((l) => l.description)
            .map((l, i) => (
              <tr key={l.id} className={i % 2 === 0 ? "bg-muted/40" : ""}>
                <td className="p-2 text-center">{i + 1}</td>
                <td className="p-2">{l.description}</td>
                <td className="p-2 text-center">{l.quantity}</td>
                <td className="p-2 text-right">{formatPriceFCFA(l.unitPrice)}</td>
                <td className="p-2 text-right font-medium">{formatPriceFCFA(l.quantity * l.unitPrice)}</td>
              </tr>
            ))}
        </tbody>
      </table>

<div className="flex justify-end mb-8">
        <div className="w-72 space-y-1 text-sm">
          <div className="flex justify-between">
            <span className="text-muted-foreground">Sous-total</span>
            <span>{formatPriceFCFA(subtotal)}</span>
          </div>
          {invoice.discount > 0 && (
            <div className="flex justify-between">
              <span className="text-muted-foreground">Remise</span>
              <span>- {formatPriceFCFA(invoice.discount)}</span>
            </div>
          )}
          <div className="flex justify-between font-bold border-t pt-1">
            <span>TOTAL</span>
            <span>{formatPriceFCFA(total)}</span>
          </div>
          {invoice.advance > 0 && (
            <div className="flex justify-between">
              <span className="text-muted-foreground">Avance recue</span>
              <span>- {formatPriceFCFA(invoice.advance)}</span>
            </div>
          )}
          <div className="flex justify-between font-black text-base border-t pt-1">
            <span>RESTANT A PAYER</span>
            <span>{formatPriceFCFA(remaining)}</span>
          </div>
        </div>
      </div>

{(invoice.notes || invoice.conditions) && (
        <div className="border-t pt-4 space-y-2 text-xs">
          {invoice.notes && (
            <div>
              <p className="font-bold">Notes:</p>
              <p className="text-muted-foreground">{invoice.notes}</p>
            </div>
          )}
          {invoice.conditions && (
            <div>
              <p className="font-bold">Conditions:</p>
              <p className="text-muted-foreground">{invoice.conditions}</p>
            </div>
          )}
        </div>
      )}

<div className="mt-8 pt-4 border-t text-center text-xs text-muted-foreground">
        {SHOP_INFO.name} — {SHOP_INFO.address} — {SHOP_INFO.phone} — {SHOP_INFO.email}
      </div>
    </div>
  )
}ac:Tc9aa0,[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/HasilazaMotor-aQYnu0UKMfJpMgQjrKhCFbXfSZYd9R.png" isMerged="true"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/icon-dark-32x32-Mua2Ua73NiDtuQUVRLUDDVfBITuGow.png" isMerged="true"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/icon-light-32x32-AF40gom8o8IxWIR2Tq7NyvUuYk2F0C.png" isMerged="true"
[V0_FILE]jpg:file="public/images/motorcycle-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/images/motorcycle-product-o9Wh0PEg3RBt6Khv9woaqsljA2sitI.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/spare-parts.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/images/spare-parts-xHVfD8VUASw1j1TFRtC7qWZraHQ22U.jpg" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/placeholder-logo-x8Lt0QTBNoNwMwQCYGmC5SoxxjhROW.png" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/placeholder-user-AeGvaN4rcXdDfnVvBmJWhH4YapP7pZ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/placeholder-jjGH4vwQN9ZtrFjbarPwMGYDz40wYW.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/a-propos/page.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import { motion, useInView } from "framer-motion"
import { 
  Eye, 
  Target, 
  Flag, 
  Heart, 
  Users, 
  Award, 
  TrendingUp, 
  Shield,
  CheckCircle,
  ArrowRight,
  Sparkles,
  Zap,
  Handshake
} from "lucide-react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"

const timeline = [
  { year: "2018", title: "Création", description: "Fondation de Hasilaza Motor à Dakar avec une vision claire: démocratiser la mobilité au Sénégal." },
  { year: "2019", title: "Expansion", description: "Ouverture de notre premier showroom et développement de notre réseau de distribution." },
  { year: "2020", title: "Partenariats", description: "Signature de partenariats stratégiques avec des organisations internationales." },
  { year: "2021", title: "Innovation", description: "Lancement de notre service d'usinage de tricycles sur mesure." },
  { year: "2022", title: "Croissance", description: "Atteinte du cap des 5000 véhicules vendus et expansion nationale." },
  { year: "2023", title: "Excellence", description: "Certification qualité et reconnaissance comme leader du marché sénégalais." },
]

const values = [
  { icon: Sparkles, title: "Qualité", description: "Nous sélectionnons rigoureusement nos produits pour garantir fiabilité et durabilité." },
  { icon: Handshake, title: "Proximité", description: "Un service personnalisé et une relation de confiance avec chaque client." },
  { icon: Shield, title: "Intégrité", description: "Transparence totale dans nos pratiques commerciales et nos engagements." },
  { icon: Zap, title: "Engagement", description: "Nous nous investissons pleinement pour la satisfaction de nos clients." },
]

const stats = [
  { icon: Users, value: "5000+", label: "Clients satisfaits" },
  { icon: Award, value: "8+", label: "Partenaires officiels" },
  { icon: TrendingUp, value: "10000+", label: "Véhicules vendus" },
  { icon: Shield, value: "5+", label: "Années d'expérience" },
]

function HeroSection() {
  return (
    <section className="pt-32 pb-20 bg-muted/30 relative overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0">
        <div className="absolute top-20 right-0 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
      </div>

<div className="container mx-auto px-4 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto text-center"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
          >
            <span className="text-sm font-semibold text-primary">Notre Histoire</span>
          </motion.div>
          
          <h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold text-foreground mb-6">
            <span className="text-balance">Qui sommes-nous chez </span>
            <span className="text-primary">Hasilaza Motor</span>?
          </h1>
          
          <p className="text-lg lg:text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
            Depuis 2018, nous accompagnons les entrepreneurs, artisans et particuliers sénégalais 
            dans leurs projets de mobilité avec des véhicules de qualité à prix compétitifs.
          </p>
        </motion.div>
      </div>
    </section>
  )
}

function StorySection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-24 bg-background">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Image */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="relative"
          >
            <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl">
              <Image
                src="/images/tricycle-200cc.jpg"
                alt="Hasilaza Motor - Notre histoire"
                fill
                className="object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-foreground/30 to-transparent" />
            </div>
            
            {/* Experience Badge */}
            <motion.div
              initial={{ opacity: 0, scale: 0 }}
              animate={isInView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.5, delay: 0.5, type: "spring" }}
              className="absolute -bottom-6 -right-6 bg-primary text-primary-foreground p-6 rounded-2xl shadow-xl"
            >
              <div className="text-4xl font-black">+5</div>
              <div className="text-sm font-medium opacity-90">Années d{"'"}expérience</div>
            </motion.div>

{/* Decorative */}
            <div className="absolute -top-4 -left-4 w-20 h-20 bg-primary/20 rounded-2xl -z-10" />
          </motion.div>

{/* Content */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-6">
              Une entreprise née de la passion pour la mobilité
            </h2>
            
            <div className="space-y-4 text-muted-foreground leading-relaxed">
              <p>
                <strong className="text-foreground">Hasilaza Motor</strong> est une entreprise commerciale 
                spécialisée dans l{"'"}usinage de tricycles et la grande distribution. Notre aventure a 
                commencé en 2018 avec une vision simple mais ambitieuse: rendre la mobilité accessible 
                à tous les Sénégalais.
              </p>
              <p>
                Aujourd{"'"}hui, nous sommes fiers d{"'"}être reconnus comme le <strong className="text-foreground">leader du marché</strong> des 
                tricycles et motos au Sénégal, servant des milliers de clients satisfaits à travers le pays.
              </p>
              <p>
                Notre succès repose sur trois piliers fondamentaux: des <strong className="text-foreground">produits de qualité</strong>, 
                des <strong className="text-foreground">prix compétitifs</strong> et un <strong className="text-foreground">service client exceptionnel</strong>.
              </p>
            </div>

<motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.6 }}
              className="mt-8"
            >
              <Button asChild size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground">
                <Link href="/contact" className="flex items-center gap-2">
                  Contactez-nous
                  <ArrowRight className="w-5 h-5" />
                </Link>
              </Button>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}

function TimelineSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-24 bg-muted/30">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center max-w-3xl mx-auto mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-6">
            Notre <span className="text-primary">Parcours</span>
          </h2>
          <p className="text-lg text-muted-foreground">
            Découvrez les étapes clés de notre croissance
          </p>
        </motion.div>

<div className="relative max-w-4xl mx-auto">
          {/* Timeline Line */}
          <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-border -translate-x-1/2 hidden md:block" />

{/* Timeline Items */}
          <div className="space-y-12">
            {timeline.map((item, index) => (
              <motion.div
                key={item.year}
                initial={{ opacity: 0, y: 30 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className={`relative flex flex-col md:flex-row items-center gap-8 ${
                  index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"
                }`}
              >
                {/* Content */}
                <div className={`flex-1 ${index % 2 === 0 ? "md:text-right" : "md:text-left"}`}>
                  <div className="bg-background p-6 rounded-2xl shadow-lg border border-border">
                    <span className="text-3xl font-bold text-primary">{item.year}</span>
                    <h3 className="font-bold text-foreground text-xl mt-2 mb-2">{item.title}</h3>
                    <p className="text-muted-foreground">{item.description}</p>
                  </div>
                </div>

{/* Dot */}
                <div className="relative z-10 w-6 h-6 bg-primary rounded-full border-4 border-background shadow-lg shrink-0" />

{/* Empty space for alignment */}
                <div className="flex-1 hidden md:block" />
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

function ValuesSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-24 bg-background">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center max-w-3xl mx-auto mb-16"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={isInView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
          >
            <span className="text-sm font-semibold text-primary">Nos Valeurs</span>
          </motion.div>
          <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-6">
            Les piliers de notre <span className="text-primary">succès</span>
          </h2>
          <p className="text-lg text-muted-foreground">
            Ces valeurs guident chacune de nos actions et nos relations avec nos clients
          </p>
        </motion.div>

{/* Values Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {values.map((value, index) => {
            const Icon = value.icon
            return (
              <motion.div
                key={value.title}
                initial={{ opacity: 0, y: 30 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
                whileHover={{ y: -8 }}
                className="bg-muted/50 rounded-3xl p-8 text-center hover:shadow-xl transition-all border border-transparent hover:border-primary/20"
              >
                <div className="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <Icon className="w-8 h-8 text-primary" />
                </div>
                <h3 className="font-bold text-xl text-foreground mb-3">{value.title}</h3>
                <p className="text-muted-foreground">{value.description}</p>
              </motion.div>
            )
          })}
        </div>

{/* Mission/Vision Cards */}
        <div className="grid md:grid-cols-2 gap-8 mt-16">
          {[
            { 
              icon: Eye, 
              title: "Notre Vision", 
              description: "Devenir le leader incontournable de la mobilité durable au Sénégal et en Afrique de l'Ouest, en offrant des solutions de transport accessibles et de qualité à tous.",
              color: "from-blue-500 to-cyan-500"
            },
            { 
              icon: Target, 
              title: "Notre Mission", 
              description: "Fournir des tricycles, motos et pièces détachées de haute qualité à des prix compétitifs, tout en garantissant un service client exceptionnel.",
              color: "from-purple-500 to-pink-500"
            },
          ].map((item, index) => {
            const Icon = item.icon
            return (
              <motion.div
                key={item.title}
                initial={{ opacity: 0, y: 30 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
                className="relative bg-foreground text-background rounded-3xl p-8 overflow-hidden"
              >
                <div className={`absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl ${item.color} opacity-10 rounded-full blur-3xl`} />
                <div className="relative z-10">
                  <div className="w-14 h-14 bg-primary rounded-2xl flex items-center justify-center mb-6">
                    <Icon className="w-7 h-7 text-primary-foreground" />
                  </div>
                  <h3 className="font-bold text-2xl mb-4">{item.title}</h3>
                  <p className="text-background/70 leading-relaxed">{item.description}</p>
                </div>
              </motion.div>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function StatsSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-20 bg-primary">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
          {stats.map((stat, index) => {
            const Icon = stat.icon
            return (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 30 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="text-center text-primary-foreground"
              >
                <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
                  <Icon className="w-8 h-8" />
                </div>
                <div className="text-4xl font-bold mb-2">{stat.value}</div>
                <div className="text-primary-foreground/70">{stat.label}</div>
              </motion.div>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function PartnersSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} id="partenaires" className="py-24 bg-muted/30">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center max-w-3xl mx-auto mb-16"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={isInView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
          >
            <span className="text-sm font-semibold text-primary">Nos Partenaires</span>
          </motion.div>
          <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-6">
            Ils nous font <span className="text-primary">confiance</span>
          </h2>
          <p className="text-lg text-muted-foreground">
            Nous collaborons avec des organisations de renom pour fournir des solutions de mobilité 
            adaptées aux besoins de développement local
          </p>
        </motion.div>

{/* Partners Grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
          {partners.map((partner, index) => (
            <motion.div
              key={partner.name}
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
              whileHover={{ y: -5, scale: 1.05 }}
              className="bg-background rounded-2xl p-6 flex flex-col items-center justify-center text-center shadow-lg border border-border hover:border-primary/30 transition-all"
            >
              <div className="w-full h-16 flex items-center justify-center mb-4">
                <Image
                  src={partner.logo}
                  alt={partner.name}
                  width={120}
                  height={60}
                  className="max-h-14 w-auto object-contain"
                />
              </div>
              <h3 className="font-bold text-foreground text-sm">{partner.name}</h3>
              <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{partner.fullName}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}

function CTASection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-24 bg-background">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto text-center bg-foreground rounded-3xl p-12 relative overflow-hidden"
        >
          {/* Background decoration */}
          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 w-48 h-48 bg-primary/10 rounded-full blur-3xl" />

<div className="relative z-10">
            <h2 className="text-3xl lg:text-4xl font-bold text-background mb-4">
              Prêt à travailler avec nous?
            </h2>
            <p className="text-background/70 mb-8 max-w-2xl mx-auto">
              Que vous soyez un particulier, une entreprise ou une organisation, 
              nous avons des solutions adaptées à vos besoins.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button asChild size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground h-14 px-8">
                  <Link href="/produits" className="flex items-center gap-2">
                    Voir nos produits
                    <ArrowRight className="w-5 h-5" />
                  </Link>
                </Button>
              </motion.div>
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button asChild size="lg" variant="outline" className="border-2 border-background text-background hover:bg-background hover:text-foreground h-14 px-8 bg-transparent">
                  <Link href="/contact">
                    Contactez-nous
                  </Link>
                </Button>
              </motion.div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  )
}

export default function AboutPage() {
  return (
    <main className="min-h-screen bg-background">
      <Header />
      <HeroSection />
      <StorySection />
      <StatsSection />
      <TimelineSection />
      <ValuesSection />
      <PartnersSection />
      <CTASection />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/admin/clients/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Search, Phone, Mail, MapPin, User, ShoppingCart, Loader2, Users } from "lucide-react"
import { formatPrice } from "@/lib/supabase/products"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"

interface Client {
  id: string
  name: string
  phone: string
  email: string | null
  city: string
  address: string
  ordersCount: number
  totalSpent: number
  lastOrderDate: string
}

export default function ClientsPage() {
  const [clients, setClients] = useState<Client[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const { toast } = useToast()

useEffect(() => {
    loadClients()
  }, [])

async function loadClients() {
    setLoading(true)
    try {
      const response = await fetch("/api/orders")
      if (response.ok) {
        const orders = await response.json()
        
        // Group orders by customer phone (unique identifier)
        const clientMap = new Map<string, Client>()
        
        for (const order of orders) {
          const key = order.customer_phone
          
          if (clientMap.has(key)) {
            const existing = clientMap.get(key)!
            existing.ordersCount += 1
            existing.totalSpent += order.total_price || 0
            if (new Date(order.created_at) > new Date(existing.lastOrderDate)) {
              existing.lastOrderDate = order.created_at
            }
          } else {
            clientMap.set(key, {
              id: key,
              name: order.customer_name,
              phone: order.customer_phone,
              email: order.customer_email,
              city: order.customer_city,
              address: order.customer_address,
              ordersCount: 1,
              totalSpent: order.total_price || 0,
              lastOrderDate: order.created_at,
            })
          }
        }
        
        setClients(Array.from(clientMap.values()).sort((a, b) => 
          new Date(b.lastOrderDate).getTime() - new Date(a.lastOrderDate).getTime()
        ))
      } else {
        toast({
          title: "Erreur",
          description: "Impossible de charger les clients",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error loading clients:", error)
    }
    setLoading(false)
  }

const filteredClients = clients.filter((client) => {
    return (
      client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      client.phone.includes(searchQuery) ||
      (client.email && client.email.toLowerCase().includes(searchQuery.toLowerCase())) ||
      client.city.toLowerCase().includes(searchQuery.toLowerCase())
    )
  })

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("fr-FR", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    })
  }

const totalClients = clients.length
  const totalRevenue = clients.reduce((sum, c) => sum + c.totalSpent, 0)
  const totalOrders = clients.reduce((sum, c) => sum + c.ordersCount, 0)
  const avgOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0

if (loading) {
    return (
      <div className="flex items-center justify-center py-16">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Page Header */}
      <div>
        <h1 className="text-2xl font-bold tracking-tight md:text-3xl">Clients</h1>
        <p className="text-muted-foreground">
          Liste des clients ayant passe des commandes
        </p>
      </div>

{/* Stats Cards */}
      <div className="grid gap-4 sm:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Total clients
            </CardTitle>
            <User className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalClients}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              CA total clients
            </CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatPrice(totalRevenue)}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Panier moyen
            </CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatPrice(Math.round(avgOrderValue))}</div>
          </CardContent>
        </Card>
      </div>

{/* Clients Table */}
      <Card>
        <CardHeader>
          <CardTitle>Liste des clients</CardTitle>
          <CardDescription>
            {filteredClients.length} client(s) trouve(s)
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-4">
            <div className="relative max-w-md">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Rechercher par nom, telephone ou ville..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>

{clients.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <Users className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-semibold">Aucun client</h3>
              <p className="text-muted-foreground">
                Les clients apparaitront ici lorsqu'ils passeront des commandes
              </p>
            </div>
          ) : (
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Client</TableHead>
                    <TableHead className="hidden md:table-cell">Contact</TableHead>
                    <TableHead>Ville</TableHead>
                    <TableHead className="hidden sm:table-cell">Commandes</TableHead>
                    <TableHead className="text-right">Total depense</TableHead>
                    <TableHead className="hidden lg:table-cell">Derniere commande</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredClients.map((client) => (
                    <TableRow key={client.id}>
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                            <span className="text-sm font-medium text-primary">
                              {client.name.split(" ").map((n) => n[0]).join("").slice(0, 2)}
                            </span>
                          </div>
                          <div>
                            <div className="font-medium">{client.name}</div>
                            <div className="text-xs text-muted-foreground md:hidden">
                              {client.phone}
                            </div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell className="hidden md:table-cell">
                        <div className="space-y-1">
                          <div className="flex items-center gap-1 text-sm">
                            <Phone className="h-3 w-3" />
                            {client.phone}
                          </div>
                          {client.email && (
                            <div className="flex items-center gap-1 text-sm text-muted-foreground">
                              <Mail className="h-3 w-3" />
                              {client.email}
                            </div>
                          )}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-1">
                          <MapPin className="h-3 w-3 text-muted-foreground" />
                          {client.city}
                        </div>
                      </TableCell>
                      <TableCell className="hidden sm:table-cell">
                        <Badge variant="secondary">{client.ordersCount} commande{client.ordersCount > 1 ? 's' : ''}</Badge>
                      </TableCell>
                      <TableCell className="text-right font-medium">
                        {formatPrice(client.totalSpent)}
                      </TableCell>
                      <TableCell className="hidden lg:table-cell text-muted-foreground">
                        {formatDate(client.lastOrderDate)}
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-2">
                          <Button variant="outline" size="sm" className="bg-transparent" asChild>
                            <a href={`https://wa.me/${client.phone.replace(/[^0-9]/g, '')}`} target="_blank" rel="noopener noreferrer">
                              <Phone className="h-4 w-4" />
                            </a>
                          </Button>
                          {client.email && (
                            <Button variant="outline" size="sm" className="bg-transparent" asChild>
                              <a href={`mailto:${client.email}`}>
                                <Mail className="h-4 w-4" />
                              </a>
                            </Button>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/commandes/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Search, Eye, Phone, Mail, MapPin, Calendar, Package, MoreHorizontal, Loader2 } from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { formatPrice } from "@/lib/supabase/products"

interface Order {
  id: string
  order_number: string
  customer_name: string
  customer_phone: string
  customer_email: string | null
  customer_address: string
  customer_city: string
  product_name: string
  product_slug: string
  quantity: number
  unit_price: number
  total_price: number
  status: "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled"
  notes: string | null
  created_at: string
  updated_at: string
}
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"

const statusMap: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline"; color: string }> = {
  pending: { label: "En attente", variant: "secondary", color: "bg-yellow-500" },
  confirmed: { label: "Confirme", variant: "default", color: "bg-blue-500" },
  processing: { label: "En cours", variant: "outline", color: "bg-orange-500" },
  shipped: { label: "Expedie", variant: "default", color: "bg-indigo-500" },
  delivered: { label: "Livre", variant: "default", color: "bg-green-500" },
  cancelled: { label: "Annule", variant: "destructive", color: "bg-red-500" },
}

export default function OrdersAdminPage() {
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null)
  const { toast } = useToast()

useEffect(() => {
    loadOrders()
  }, [])

async function loadOrders() {
    setLoading(true)
    try {
      const response = await fetch("/api/orders")
      if (response.ok) {
        const data = await response.json()
        setOrders(data)
      } else {
        toast({
          title: "Erreur",
          description: "Impossible de charger les commandes",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error loading orders:", error)
    }
    setLoading(false)
  }

const filteredOrders = orders.filter((order) => {
    const matchesSearch = 
      order.customer_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      order.order_number.toLowerCase().includes(searchQuery.toLowerCase()) ||
      order.customer_phone.includes(searchQuery)
    const matchesStatus = statusFilter === "all" || order.status === statusFilter
    return matchesSearch && matchesStatus
  })

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("fr-FR", {
      day: "2-digit",
      month: "short",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const statusCounts = {
    pending: orders.filter((o) => o.status === "pending").length,
    confirmed: orders.filter((o) => o.status === "confirmed").length,
    processing: orders.filter((o) => o.status === "processing").length,
    shipped: orders.filter((o) => o.status === "shipped").length,
    delivered: orders.filter((o) => o.status === "delivered").length,
    cancelled: orders.filter((o) => o.status === "cancelled").length,
  }

const handleStatusChange = async (orderId: string, newStatus: Order["status"]) => {
    try {
      const response = await fetch(`/api/orders/${orderId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: newStatus }),
      })
      
      if (response.ok) {
        toast({
          title: "Succes",
          description: `Statut mis a jour: ${statusMap[newStatus].label}`,
        })
        loadOrders()
      } else {
        toast({
          title: "Erreur",
          description: "Erreur lors de la mise a jour du statut",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error updating status:", error)
      toast({
        title: "Erreur",
        description: "Erreur lors de la mise a jour du statut",
        variant: "destructive",
      })
    }
  }

if (loading) {
    return (
      <div className="flex items-center justify-center py-16">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Page Header */}
      <div>
        <h1 className="text-2xl font-bold tracking-tight md:text-3xl">Commandes</h1>
        <p className="text-muted-foreground">
          Gerez et suivez toutes les commandes
        </p>
      </div>

{/* Stats Cards */}
      <div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-6">
        <Card className="border-l-4 border-l-yellow-500">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              En attente
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{statusCounts.pending}</div>
          </CardContent>
        </Card>
        <Card className="border-l-4 border-l-blue-500">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Confirmees
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{statusCounts.confirmed}</div>
          </CardContent>
        </Card>
        <Card className="border-l-4 border-l-orange-500">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              En cours
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{statusCounts.processing}</div>
          </CardContent>
        </Card>
        <Card className="border-l-4 border-l-indigo-500">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Expediees
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{statusCounts.shipped}</div>
          </CardContent>
        </Card>
        <Card className="border-l-4 border-l-green-500">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Livrees
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{statusCounts.delivered}</div>
          </CardContent>
        </Card>
        <Card className="border-l-4 border-l-red-500">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Annulees
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{statusCounts.cancelled}</div>
          </CardContent>
        </Card>
      </div>

{/* Orders Table */}
      <Card>
        <CardHeader>
          <CardTitle>Liste des commandes</CardTitle>
          <CardDescription>
            {filteredOrders.length} commande(s) trouvee(s)
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-4 flex flex-col gap-4 sm:flex-row">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Rechercher par nom, ID ou telephone..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full sm:w-[180px]">
                <SelectValue placeholder="Statut" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Tous les statuts</SelectItem>
                <SelectItem value="pending">En attente</SelectItem>
                <SelectItem value="confirmed">Confirme</SelectItem>
                <SelectItem value="processing">En cours</SelectItem>
                <SelectItem value="shipped">Expedie</SelectItem>
                <SelectItem value="delivered">Livre</SelectItem>
                <SelectItem value="cancelled">Annule</SelectItem>
              </SelectContent>
            </Select>
          </div>

{orders.length === 0 ? (
            <div className="flex items-center justify-center py-8 text-muted-foreground">
              Aucune commande pour le moment
            </div>
          ) : (
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Commande</TableHead>
                    <TableHead>Client</TableHead>
                    <TableHead className="hidden md:table-cell">Produit</TableHead>
                    <TableHead>Statut</TableHead>
                    <TableHead className="text-right">Total</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredOrders.map((order) => (
                    <TableRow key={order.id}>
                      <TableCell>
                        <div className="flex flex-col">
                          <span className="font-medium">{order.order_number}</span>
                          <span className="text-xs text-muted-foreground">
                            {formatDate(order.created_at)}
                          </span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-col">
                          <span className="font-medium">{order.customer_name}</span>
                          <span className="text-xs text-muted-foreground">
                            {order.customer_city}
                          </span>
                        </div>
                      </TableCell>
                      <TableCell className="hidden md:table-cell">
                        <div className="flex flex-col">
                          <span>{order.product_name}</span>
                          <span className="text-xs text-muted-foreground">
                            Qte: {order.quantity}
                          </span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant={statusMap[order.status]?.variant || "secondary"}>
                          {statusMap[order.status]?.label || order.status}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right font-medium">
                        {formatPrice(order.total_price)}
                      </TableCell>
                      <TableCell className="text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                              <span className="sr-only">Actions</span>
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => setSelectedOrder(order)}>
                              <Eye className="mr-2 h-4 w-4" />
                              Voir details
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuLabel>Changer le statut</DropdownMenuLabel>
                            <DropdownMenuItem onClick={() => handleStatusChange(order.id, "confirmed")}>
                              Confirmer
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleStatusChange(order.id, "processing")}>
                              Marquer en cours
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleStatusChange(order.id, "shipped")}>
                              Marquer expedie
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleStatusChange(order.id, "delivered")}>
                              Marquer livre
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem 
                              className="text-destructive"
                              onClick={() => handleStatusChange(order.id, "cancelled")}
                            >
                              Annuler
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>

{/* Order Details Dialog */}
      <Dialog open={!!selectedOrder} onOpenChange={() => setSelectedOrder(null)}>
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Details de la commande</DialogTitle>
            <DialogDescription>
              {selectedOrder?.order_number}
            </DialogDescription>
          </DialogHeader>
          
          {selectedOrder && (
            <div className="space-y-6">
              {/* Status */}
              <div className="flex items-center justify-between">
                <Badge variant={statusMap[selectedOrder.status]?.variant || "secondary"} className="text-sm">
                  {statusMap[selectedOrder.status]?.label || selectedOrder.status}
                </Badge>
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Calendar className="h-4 w-4" />
                  {formatDate(selectedOrder.created_at)}
                </div>
              </div>

{/* Customer Info */}
              <div className="space-y-3">
                <h4 className="font-semibold">Informations client</h4>
                <div className="grid gap-2 text-sm">
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{selectedOrder.customer_name}</span>
                  </div>
                  <div className="flex items-center gap-2 text-muted-foreground">
                    <Phone className="h-4 w-4" />
                    <a href={`tel:${selectedOrder.customer_phone}`} className="hover:underline">
                      {selectedOrder.customer_phone}
                    </a>
                  </div>
                  {selectedOrder.customer_email && (
                    <div className="flex items-center gap-2 text-muted-foreground">
                      <Mail className="h-4 w-4" />
                      <a href={`mailto:${selectedOrder.customer_email}`} className="hover:underline">
                        {selectedOrder.customer_email}
                      </a>
                    </div>
                  )}
                  <div className="flex items-start gap-2 text-muted-foreground">
                    <MapPin className="mt-0.5 h-4 w-4" />
                    <span>{selectedOrder.customer_address}, {selectedOrder.customer_city}</span>
                  </div>
                </div>
              </div>

{/* Product Info */}
              <div className="space-y-3">
                <h4 className="font-semibold">Produit commande</h4>
                <div className="flex items-center gap-4 rounded-lg border p-3">
                  <Package className="h-10 w-10 text-muted-foreground" />
                  <div className="flex-1">
                    <div className="font-medium">{selectedOrder.product_name}</div>
                    <div className="text-sm text-muted-foreground">
                      {formatPrice(selectedOrder.unit_price)} x {selectedOrder.quantity}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-lg font-bold">
                      {formatPrice(selectedOrder.total_price)}
                    </div>
                  </div>
                </div>
              </div>

{/* Notes */}
              {selectedOrder.notes && (
                <>
                  <Separator />
                  <div className="space-y-2">
                    <h4 className="font-semibold">Notes</h4>
                    <p className="text-sm text-muted-foreground">{selectedOrder.notes}</p>
                  </div>
                </>
              )}

{/* Actions */}
              <div className="flex flex-wrap gap-2">
                <Button variant="outline" className="flex-1 bg-transparent" asChild>
                  <a href={`https://wa.me/${selectedOrder.customer_phone.replace(/[^0-9]/g, '')}`} target="_blank" rel="noopener noreferrer">
                    <Phone className="mr-2 h-4 w-4" />
                    WhatsApp
                  </a>
                </Button>
                <Button variant="outline" className="flex-1 bg-transparent" asChild>
                  <a href={`tel:${selectedOrder.customer_phone}`}>
                    <Phone className="mr-2 h-4 w-4" />
                    Appeler
                  </a>
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true"
"use client"

import React, { useEffect, useState } from "react"
import { useRouter, usePathname } from "next/navigation"
import { AdminSidebar } from "@/components/admin/admin-sidebar"
import { AdminHeader } from "@/components/admin/admin-header"
import { Loader2 } from "lucide-react"

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const router = useRouter()
  const pathname = usePathname()
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Skip auth check for login page
    if (pathname === "/admin/login") {
      setIsLoading(false)
      setIsAuthenticated(true)
      return
    }

// Check for admin session cookie
    const sessionCookie = getCookie("admin_session")
    
    if (sessionCookie === "authenticated_admin_user_2026") {
      setIsAuthenticated(true)
    } else {
      router.push("/admin/login")
    }
    
    setIsLoading(false)
  }, [pathname, router])

// Show loading state
  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-muted/30">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

// For login page, render without admin layout
  if (pathname === "/admin/login") {
    return <>{children}</>
  }

// If not authenticated, show nothing (will redirect)
  if (!isAuthenticated) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-muted/30">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

return (
    <div className="flex min-h-screen bg-muted/30">
      <AdminSidebar />
      <div className="flex flex-1 flex-col lg:pl-72">
        <AdminHeader />
        <main className="flex-1 p-4 md:p-6 lg:p-8">
          {children}
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/login/layout.tsx" isMerged="true"
import React from "react"
export default function LoginLayout({
  children,
}: {
  children: React.ReactNode
}) {
  // Login page has its own layout without admin sidebar
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/admin/statistiques/page.tsx" 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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { TrendingUp, DollarSign, ShoppingCart, Package, Users, Loader2 } from "lucide-react"
import { formatPrice } from "@/lib/supabase/products"
import { 
  AreaChart, 
  Area, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  ResponsiveContainer,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  Legend
} from "recharts"

interface StatsData {
  summary: {
    totalRevenue: number
    totalOrders: number
    pendingOrders: number
    completedOrders: number
    cancelledOrders: number
    uniqueClients: number
    totalProducts: number
  }
  monthlyData: { month: string; orders: number; revenue: number }[]
  categoryData: { name: string; value: number }[]
  topProducts: { name: string; orders: number; revenue: number }[]
  recentOrders: { id: string; orderNumber: string; customer: string; product: string; total: number; status: string; date: string }[]
}

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8']

export default function StatisticsPage() {
  const [stats, setStats] = useState<StatsData | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadStats()
  }, [])

async function loadStats() {
    setLoading(true)
    try {
      const response = await fetch("/api/stats")
      if (response.ok) {
        const data = await response.json()
        setStats(data)
      }
    } catch (error) {
      console.error("Error loading stats:", error)
    }
    setLoading(false)
  }

if (loading) {
    return (
      <div className="flex items-center justify-center py-16">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

if (!stats) {
    return (
      <div className="flex items-center justify-center py-16">
        <p className="text-muted-foreground">Impossible de charger les statistiques</p>
      </div>
    )
  }

const avgOrderValue = stats.summary.totalOrders > 0 
    ? stats.summary.totalRevenue / stats.summary.totalOrders 
    : 0

{/* Stats Grid */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Chiffre d'affaires
            </CardTitle>
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
              <DollarSign className="h-4 w-4 text-primary" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {formatPrice(stats.summary.totalRevenue)}
            </div>
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              <TrendingUp className="h-3 w-3 text-green-600" />
              Commandes livrees/completees
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Total commandes
            </CardTitle>
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
              <ShoppingCart className="h-4 w-4 text-primary" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.summary.totalOrders}</div>
            <div className="flex items-center gap-2 text-xs text-muted-foreground">
              <span className="text-yellow-600">{stats.summary.pendingOrders} en attente</span>
              <span className="text-green-600">{stats.summary.completedOrders} completees</span>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Panier moyen
            </CardTitle>
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
              <Package className="h-4 w-4 text-primary" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {formatPrice(Math.round(avgOrderValue))}
            </div>
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              Par commande
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              Clients uniques
            </CardTitle>
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
              <Users className="h-4 w-4 text-primary" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.summary.uniqueClients}</div>
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              {stats.summary.totalProducts} produits en catalogue
            </div>
          </CardContent>
        </Card>
      </div>

{/* Charts */}
      <Tabs defaultValue="revenue" className="space-y-4">
        <TabsList>
          <TabsTrigger value="revenue">Revenus</TabsTrigger>
          <TabsTrigger value="orders">Commandes</TabsTrigger>
          <TabsTrigger value="categories">Categories</TabsTrigger>
        </TabsList>

<TabsContent value="revenue">
          <Card>
            <CardHeader>
              <CardTitle>Evolution du chiffre d'affaires</CardTitle>
              <CardDescription>
                Revenus mensuels sur les 6 derniers mois
              </CardDescription>
            </CardHeader>
            <CardContent>
              {stats.monthlyData.length > 0 ? (
                <ResponsiveContainer width="100%" height={350}>
                  <AreaChart data={stats.monthlyData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis tickFormatter={(value) => `${(value / 1000000).toFixed(1)}M`} />
                    <Tooltip 
                      formatter={(value: number) => [formatPrice(value), "Revenu"]}
                      labelFormatter={(label) => `Mois: ${label}`}
                    />
                    <Area 
                      type="monotone" 
                      dataKey="revenue" 
                      stroke="#0088FE" 
                      fill="#0088FE" 
                      fillOpacity={0.3} 
                    />
                  </AreaChart>
                </ResponsiveContainer>
              ) : (
                <div className="flex items-center justify-center h-[350px] text-muted-foreground">
                  Aucune donnee disponible
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="orders">
          <Card>
            <CardHeader>
              <CardTitle>Evolution des commandes</CardTitle>
              <CardDescription>
                Nombre de commandes par mois
              </CardDescription>
            </CardHeader>
            <CardContent>
              {stats.monthlyData.length > 0 ? (
                <ResponsiveContainer width="100%" height={350}>
                  <BarChart data={stats.monthlyData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="orders" fill="#00C49F" name="Commandes" />
                  </BarChart>
                </ResponsiveContainer>
              ) : (
                <div className="flex items-center justify-center h-[350px] text-muted-foreground">
                  Aucune donnee disponible
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="categories">
          <Card>
            <CardHeader>
              <CardTitle>Commandes par categorie</CardTitle>
              <CardDescription>
                Repartition des commandes par categorie de produits
              </CardDescription>
            </CardHeader>
            <CardContent>
              {stats.categoryData.length > 0 ? (
                <ResponsiveContainer width="100%" height={350}>
                  <PieChart>
                    <Pie
                      data={stats.categoryData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name} (${(percent * 100).toFixed(0)}%)`}
                      outerRadius={120}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {stats.categoryData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Legend />
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              ) : (
                <div className="flex items-center justify-center h-[350px] text-muted-foreground">
                  Aucune donnee disponible
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* Bottom Grid */}
      <div className="grid gap-4 lg:grid-cols-2">
        {/* Top Products */}
        <Card>
          <CardHeader>
            <CardTitle>Produits les plus commandes</CardTitle>
            <CardDescription>Top 5 des produits</CardDescription>
          </CardHeader>
          <CardContent>
            {stats.topProducts.length > 0 ? (
              <div className="space-y-4">
                {stats.topProducts.map((product, index) => (
                  <div key={product.name} className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
                        {index + 1}
                      </span>
                      <div>
                        <div className="font-medium">{product.name}</div>
                        <div className="text-sm text-muted-foreground">
                          {product.orders} commande{product.orders > 1 ? 's' : ''}
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-medium">
                        {formatPrice(product.revenue)}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="flex items-center justify-center py-8 text-muted-foreground">
                Aucun produit commande
              </div>
            )}
          </CardContent>
        </Card>

{/* Recent Orders */}
        <Card>
          <CardHeader>
            <CardTitle>Commandes recentes</CardTitle>
            <CardDescription>10 dernieres commandes</CardDescription>
          </CardHeader>
          <CardContent>
            {stats.recentOrders.length > 0 ? (
              <div className="space-y-4">
                {stats.recentOrders.map((order) => (
                  <div key={order.id} className="flex items-center justify-between">
                    <div>
                      <div className="font-medium">{order.customer}</div>
                      <div className="text-sm text-muted-foreground">
                        {order.product}
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-medium">{formatPrice(order.total)}</div>
                      <div className="text-xs text-muted-foreground">
                        {new Date(order.date).toLocaleDateString("fr-FR")}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="flex items-center justify-center py-8 text-muted-foreground">
                Aucune commande
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
"use client"

import React from "react"

import { useState, useRef } from "react"
import { motion, useInView } from "framer-motion"
import { 
  Phone, 
  Mail, 
  MapPin, 
  Clock, 
  Send, 
  MessageCircle,
  CheckCircle,
  ArrowRight
} from "lucide-react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

const contactInfo = [
  {
    icon: Phone,
    title: "Téléphone",
    value: "+221 781094091",
    href: "tel:+221781094091",
    description: "Appelez-nous directement"
  },
  {
    icon: Mail,
    title: "Email",
    value: "Mortalla581@gmail.com",
    href: "mailto:Mortalla581@gmail.com",
    description: "Envoyez-nous un email"
  },
  {
    icon: MapPin,
    title: "Adresse",
    value: "HLM 2, Dakar, Senegal",
    href: "https://maps.google.com/?q=HLM+2+Dakar+Senegal",
    description: "Visitez notre showroom"
  },
  {
    icon: Clock,
    title: "Horaires",
    value: "Lun-Sam: 9h - 18h",
    href: "#",
    description: "Nous sommes disponibles"
  },
]

const faqs = [
  {
    question: "Comment puis-je passer commande?",
    answer: "Vous pouvez passer commande en nous contactant par téléphone, WhatsApp ou email. Nous vous accompagnons dans le choix du produit adapté à vos besoins et vous envoyons un devis détaillé."
  },
  {
    question: "Quels sont les modes de paiement acceptés?",
    answer: "Nous acceptons les paiements par virement bancaire, chèque, Wave et Orange Money. Des facilités de paiement peuvent être accordées selon les cas."
  },
  {
    question: "Livrez-vous en dehors de Dakar?",
    answer: "Oui, nous livrons dans tout le Sénégal. La livraison est gratuite sur Dakar. Pour les autres régions, des frais de transport peuvent s'appliquer."
  },
  {
    question: "Quelle est la durée de la garantie?",
    answer: "Tous nos véhicules sont garantis 2 ans (pièces et main d'oeuvre). Les pièces détachées sont garanties selon leur catégorie (1 à 6 mois)."
  },
  {
    question: "Proposez-vous un service après-vente?",
    answer: "Absolument! Nous disposons d'un atelier équipé et d'une équipe de techniciens qualifiés pour l'entretien et les réparations de vos véhicules."
  },
]

<div className="container mx-auto px-4 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto text-center"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full mb-6"
          >
            <span className="text-sm font-semibold text-primary">Contactez-nous</span>
          </motion.div>
          
          <h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold text-foreground mb-6">
            <span className="text-balance">Nous sommes là pour </span>
            <span className="text-primary">vous aider</span>
          </h1>
          
          <p className="text-lg lg:text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
            Une question? Un projet? Notre équipe est à votre écoute pour vous accompagner 
            dans votre choix et répondre à toutes vos interrogations.
          </p>
        </motion.div>
      </div>
    </section>
  )
}

function ContactInfoSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

return (
    <section ref={ref} className="py-16 bg-background -mt-10 relative z-10">
      <div className="container mx-auto px-4">
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {contactInfo.map((info, index) => {
            const Icon = info.icon
            return (
              <motion.a
                key={info.title}
                href={info.href}
                initial={{ opacity: 0, y: 30 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                whileHover={{ y: -5, scale: 1.02 }}
                className="bg-background p-6 rounded-2xl shadow-lg border border-border hover:border-primary/30 hover:shadow-xl transition-all group"
              >
                <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                  <Icon className="w-7 h-7 text-primary" />
                </div>
                <h3 className="font-bold text-foreground mb-1">{info.title}</h3>
                <p className="text-primary font-semibold mb-1">{info.value}</p>
                <p className="text-sm text-muted-foreground">{info.description}</p>
              </motion.a>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function ContactFormSection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    subject: "",
    message: ""
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    
    // Simulate form submission
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    setIsSubmitting(false)
    setIsSubmitted(true)
    
    // Reset after 3 seconds
    setTimeout(() => {
      setIsSubmitted(false)
      setFormData({ name: "", email: "", phone: "", subject: "", message: "" })
    }, 3000)
  }

return (
    <section ref={ref} className="py-24 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-16">
          {/* Form */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-3xl font-bold text-foreground mb-2">
              Envoyez-nous un message
            </h2>
            <p className="text-muted-foreground mb-8">
              Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.
            </p>

{isSubmitted ? (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                className="bg-green-50 border border-green-200 rounded-2xl p-8 text-center"
              >
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <CheckCircle className="w-8 h-8 text-green-600" />
                </div>
                <h3 className="text-xl font-bold text-green-800 mb-2">Message envoyé!</h3>
                <p className="text-green-600">
                  Nous avons bien reçu votre message et vous répondrons très bientôt.
                </p>
              </motion.div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">
                      Nom complet *
                    </label>
                    <Input
                      type="text"
                      required
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      placeholder="Votre nom"
                      className="h-12 rounded-xl"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">
                      Téléphone *
                    </label>
                    <Input
                      type="tel"
                      required
                      value={formData.phone}
                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                      placeholder="+221 7X XXX XX XX"
                      className="h-12 rounded-xl"
                    />
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">
                    Email
                  </label>
                  <Input
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    placeholder="votre@email.com"
                    className="h-12 rounded-xl"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium text-foreground mb-2">
                    Sujet *
                  </label>
                  <select
                    required
                    value={formData.subject}
                    onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                    className="w-full h-12 px-4 bg-background border border-input rounded-xl text-foreground"
                  >
                    <option value="">Sélectionnez un sujet</option>
                    <option value="devis">Demande de devis</option>
                    <option value="info">Demande d{"'"}information</option>
                    <option value="sav">Service après-vente</option>
                    <option value="partenariat">Partenariat</option>
                    <option value="autre">Autre</option>
                  </select>
                </div>

<div>
                  <label className="block text-sm font-medium text-foreground mb-2">
                    Message *
                  </label>
                  <textarea
                    required
                    value={formData.message}
                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                    placeholder="Décrivez votre demande..."
                    rows={5}
                    className="w-full px-4 py-3 bg-background border border-input rounded-xl text-foreground resize-none"
                  />
                </div>