92:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2sr_v_2idw2ks.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3s-m_7va7l_cq.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3_1y_atv6kxm2.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1evcdxww4_xel.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1o28wkog4g2yf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/43g7_cdo9h17h.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3s9yhs7vwi15d.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3tc6ydk3shcz5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3bx-d0nviq08q.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/08aqo-f1up_v8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2qkvm2bmjd-b8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3_5ti1t9ohxb6.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0f31o5da026m-.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2rc9h61v5i99w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2mbn2tix6bbr9.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2sr_v_2idw2ks.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3s-m_7va7l_cq.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3_1y_atv6kxm2.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1evcdxww4_xel.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1o28wkog4g2yf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/43g7_cdo9h17h.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3s9yhs7vwi15d.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3tc6ydk3shcz5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3bx-d0nviq08q.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/08aqo-f1up_v8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2qkvm2bmjd-b8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3_5ti1t9ohxb6.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0f31o5da026m-.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2rc9h61v5i99w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2mbn2tix6bbr9.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK"],"SWRDataProvider"] 95:[] 96:[["b_gvevJElTxM6",null]] 97:[["b_gvevJElTxM6",{"templateVersionId":null,"templateCanonId":null}]] 98:[["b_gvevJElTxM6","$D2026-06-04T10:00:33.469Z"]] 99:[["b_gvevJElTxM6",false]] 9a:[["b_gvevJElTxM6","$undefined"]] 9b:[["b_gvevJElTxM6",null]] 9c:[["b_gvevJElTxM6",true]] 9d:[["b_gvevJElTxM6",true]] 9e:[] 9f:Tbf5a8,[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/apple-icon-LwDXCuETwyUvQNCbNBN0vfAJk0wD2P.png" [V0_FILE]png:file="public/headphones-case.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/headphones-case-1PqOdye9aDdssCqxaOvoT3tDKJD1fR.png" [V0_FILE]jpg:file="public/headphones-details.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/headphones-details-glas5q5Hn6cF6WppQAqUVOFEL29qic.jpg" [V0_FILE]png:file="public/headphones-side-view.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/headphones-side-view-ZKHqo722doERyrNFXoKm44DCnJbibB.png" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/icon-dark-32x32-JyKBW9ldjcs9e21AOD7sTRmMDLeRxq.png" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/icon-light-32x32-CH3wM4UaTtaKTAbz7G9f6Xr5q2ZZrb.png" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/placeholder-logo-bfFOYwZdBZiNXzXuTtpMaDwK4NC4Wc.png" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/placeholder-user-c5QW1cgT5n7BiYAx0mYuHDTw92tD8t.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/placeholder-GD96W2vMjBtc2xl08Nn1tNJfybVwrD.jpg" [V0_FILE]png:file="public/premium-product-showcase.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/premium-product-showcase-pnBjtqrcpgyXz5vVFsWKEMCthCTpnz.png" [V0_FILE]png:file="public/premium-wireless-headphones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/premium-wireless-headphones-usIjRY12CxKNfFIOZNh0ej02jonYgO.png" [V0_FILE]markdown:file="CHECKOUT_SYSTEM.md" # Custom Checkout System This custom checkout system provides a complete, no-login checkout flow with shipping rates, coupon handling, and store customization. ## Features ✅ **No Login Required** - Customers can checkout without creating an account ✅ **Shipping Options** - Multiple shipping methods with dynamic cost calculation ✅ **Coupon Handling** - Apply discount codes at checkout ✅ **Store Customization** - Logo and store name pulled from `config/store.ts` ✅ **Order Summary** - Real-time price updates with subtotal, shipping, tax, and total ✅ **Stripe Payment** - Secure payment processing with Stripe Elements ✅ **Responsive Design** - Mobile-friendly checkout experience ## File Structure ### New Components - `components/checkout/CheckoutForm.tsx` - Main checkout form with Stripe integration - `components/checkout/CheckoutContactInfo.tsx` - Email collection - `components/checkout/CheckoutShippingAddress.tsx` - Full address form with country selection - `components/checkout/CheckoutShippingOptions.tsx` - Shipping method selection - `components/checkout/CheckoutCoupon.tsx` - Coupon code input and application - `components/checkout/CheckoutOrderSummary.tsx` - Order summary sidebar with store info ### New Contexts - `contexts/checkout-context.tsx` - Manages checkout state (form data, summary, payment details) ### New Pages - `app/checkout/page.tsx` - Main checkout page that wraps Stripe Elements provider ### Updated Files - `services/api.ts` - Added new checkout API functions - `app/cart/page.tsx` - Updated to navigate to `/checkout` instead of old Stripe flow - `app/success/page.tsx` - Updated to support both old `session_id` and new `checkout_id` + `payment_intent_id` flows ## API Endpoints Used All endpoints are called through `services/api.ts`: 1. `createCheckoutSession(cartItems, email)` - Initialize checkout 2. `getCheckoutConfig()` - Get store checkout configuration 3. `createPaymentIntent(checkoutId)` - Create Stripe payment intent 4. `getCheckoutSummary(checkoutId, shippingId, couponCode)` - Calculate totals with shipping and discounts 5. `updateCheckoutFormData(checkoutId, formData)` - Update customer information 6. `confirmPayment(checkoutId, paymentIntentId)` - Process payment and create order ## Store Customization All checkout pages automatically pull from `config/store.ts`: - Store name - Store logo - Store branding colors (via design tokens) Update these in your store config to customize the checkout experience. ## Flow 1. **Cart Page** → User clicks "Proceed to Checkout" 2. **Checkout Page** → Checkout context initializes with cart items 3. **Contact Info** → User enters email 4. **Shipping Address** → Full address collection 5. **Shipping Options** → User selects shipping method (updates total) 6. **Coupon** → Optional discount code (updates total) 7. **Payment** → Stripe Payment Element for card entry 8. **Confirmation** → Redirects to success page with checkout_id and payment_intent_id ## Environment Variables Make sure these are set: - `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` - Stripe publishable key ## Customization Options ### Add More Fields Edit `contexts/checkout-context.tsx` `CheckoutFormData` interface to add new fields, then update the corresponding component forms. ### Change Shipping Logic Modify the shipping options returned by your backend or the `getCheckoutSummary` call in `CheckoutShippingOptions.tsx`. ### Update Styling All components use design tokens and Tailwind classes. Update colors in `tailwind.config.ts` and `globals.css`. ### Add Billing Address Currently set to "billing same as shipping". To add a separate billing address: 1. Add `billingAddress` fields to `CheckoutFormData` 2. Add checkbox to toggle billing address form visibility 3. Create `CheckoutBillingAddress.tsx` component [V0_FILE]typescriptreact:file="app/about/page.tsx" import type { Metadata } from "next" import storeConfig from "@/config/store" export const metadata: Metadata = { title: `About Us - ${storeConfig.storeName}`, description: "Learn about our story, mission, and commitment to providing exceptional products and service.", } export default function AboutPage() { return (

{/* Hero Section */}

Our Story

Building exceptional experiences through quality products and innovative design

{/* Main Content */}

Who We Are

Founded with a passion for excellence, Agora has been at the forefront of delivering premium products that enhance everyday life. Our journey began with a simple belief: that quality and innovation should be accessible to everyone.

We carefully curate each product in our collection, working directly with artisans and manufacturers who share our commitment to craftsmanship and sustainability. Every item tells a story of dedication, skill, and attention to detail.

Today, we serve customers worldwide, building lasting relationships through exceptional service and products that stand the test of time.

Our Mission

To provide exceptional products that inspire and enhance the lives of our customers while supporting sustainable practices and ethical manufacturing.

Our Vision

To be the trusted destination for discerning customers who value quality, innovation, and responsible business practices.

{/* Values Section */}

Our Values

✨

Quality First

We never compromise on quality, ensuring every product meets our rigorous standards.

🌱

Sustainability

Environmental responsibility guides our sourcing and business practices.

🤝

Customer Focus

Your satisfaction and experience are at the heart of everything we do.

{/* Team Section */}

Meet Our Team

Our diverse team of passionate individuals works tirelessly to bring you the best products and service. From our buyers who travel the world to source unique items, to our customer service team who ensures your satisfaction, we're here for you.

"We believe that great products have the power to inspire, connect, and transform lives. That's why we're committed to bringing you only the finest."

— The Agora Team

) } [V0_FILE]typescriptreact:file="app/bundles/[slug]/page.tsx" "use client" import { useEffect, useState } from "react" import Image from "next/image" import Link from "next/link" import { useParams } from "next/navigation" import { getBundleBySlug } from "@/services/api" import type { Bundle, BundleItem, BundlePricing } from "@/types/product" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Footer } from "@/components/footer" import { ShoppingCart, ArrowLeft, Package, Check } from "lucide-react" import { useCart } from "@/contexts/cart-context" import { useLanguage } from "@/contexts/language-context" export default function BundlePage() { const params = useParams() const slug = params.slug as string const [bundle, setBundle] = useState(null) const [items, setItems] = useState([]) const [pricing, setPricing] = useState(null) const [loading, setLoading] = useState(true) const [selectedImage, setSelectedImage] = useState(0) const [quantity, setQuantity] = useState(1) const [addedToCart, setAddedToCart] = useState(false) const { dispatch } = useCart() const { t } = useLanguage() useEffect(() => { const fetchBundle = async () => { if (!slug) return try { const response = await getBundleBySlug(slug) if (response.status === "success") { setBundle(response.data.bundle) setItems(response.data.items || []) setPricing(response.data.pricing) } } catch (error) { console.error("Failed to fetch bundle:", error) } finally { setLoading(false) } } fetchBundle() }, [slug]) const handleAddToCart = () => { if (!bundle || !pricing) return dispatch({ type: "ADD_ITEM", payload: { id: bundle._id, bundleId: bundle._id, name: bundle.name, price: pricing.total, originalPrice: pricing.subtotal, isOnSale: pricing.discountPercentage > 0, images: bundle.images || [], quantity: quantity, description: bundle.summary || "", type: "bundle", }, }) setAddedToCart(true) setTimeout(() => setAddedToCart(false), 2000) } if (loading) { return (

) } if (!bundle) { return (

Bundle not found

) } const images = bundle.images && bundle.images.length > 0 ? bundle.images : [] return (

{/* Back Button */}

{/* Image Gallery */}

{images.length > 0 ? ( {bundle.name}

) : (

)} {pricing && pricing.discountPercentage > 0 && ( {pricing.discountPercentage}% OFF )}

{images.length > 1 && (

{images.map((image, index) => ( ))}

)}

{/* Bundle Info */}

{bundle.name}

{bundle.summary && (

{bundle.summary}

)}

{/* Pricing */} {pricing && (

${pricing.total.toFixed(2)} {pricing.discountAmount > 0 && ( ${pricing.subtotal.toFixed(2)} )}

{pricing.discountAmount > 0 && (

You save ${pricing.discountAmount.toFixed(2)}!

)}

)} {/* Bundle Items */}

What's Included ({items.length} items)

{items.map((item, index) => (

{item.variant?.images?.[0] || item.product?.images?.[0] ? ( {item.product?.name

) : (

)}

{item.product?.name || "Product"}

{item.variant?.name && item.variant?.value && (

{item.variant.name}: {item.variant.value}

)}

Qty: {item.quantity}

${item.pricing?.lineTotal?.toFixed(2) || "0.00"}

{item.pricing?.lineOriginalTotal && item.pricing.lineOriginalTotal > item.pricing.lineTotal && (

${item.pricing.lineOriginalTotal.toFixed(2)}

)}

))}

{/* Quantity and Add to Cart */}

Quantity:

{quantity}

) } [V0_FILE]typescriptreact:file="app/bundles/page.tsx" "use client" import { useEffect, useState } from "react" import Link from "next/link" import Image from "next/image" import { getStoreBundles } from "@/services/api" import type { Bundle } from "@/types/product" import { Footer } from "@/components/footer" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { useLanguage } from "@/contexts/language-context" export default function BundlesPage() { const [bundles, setBundles] = useState([]) const [loading, setLoading] = useState(true) const [page, setPage] = useState(1) const [hasMore, setHasMore] = useState(false) const { t } = useLanguage() useEffect(() => { const fetchBundles = async () => { setLoading(true) try { const response = await getStoreBundles(page, 20) if (response.status === "success") { if (page === 1) { setBundles(response.data.bundles || []) } else { setBundles((prev) => [...prev, ...(response.data.bundles || [])]) } setHasMore(response.data.pagination?.hasMore || false) } } catch (error) { console.error("Failed to fetch bundles:", error) } finally { setLoading(false) } } fetchBundles() }, [page]) return (

Bundles

Save more with our curated product bundles

{loading && bundles.length === 0 ? (

{[...Array(6)].map((_, i) => (

))}

) : bundles.length === 0 ? (

No bundles found

Check back later for new bundles

) : ( <>

{bundles.map((bundle) => (

{bundle.images && bundle.images.length > 0 ? (

) : (

)}

{bundle.discountPercentage > 0 && ( {bundle.discountPercentage}% OFF )}

{bundle.name}

{bundle.summary && (

{bundle.summary}

)} {bundle.itemCount > 0 && (

{bundle.itemCount} {bundle.itemCount === 1 ? "item" : "items"}

)}

))}

{hasMore && (

)} )}

) } [V0_FILE]typescriptreact:file="app/cart/page.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { useCart, getCartLineKey } from "@/contexts/cart-context" import { Plus, Minus, ShoppingBag, Loader2 } from "lucide-react" import Link from "next/link" import { useLanguage } from "@/contexts/language-context" import { useRouter } from "next/navigation" export default function CartPage() { const { state, removeItem, updateItemQuantity, clearCart } = useCart() const { t, formatPrice } = useLanguage() const router = useRouter() const handleUpdateQuantity = (lineKey: string, quantity: number) => { updateItemQuantity(lineKey, quantity) } const handleRemoveItem = (lineKey: string) => { removeItem(lineKey) } const handleCheckout = () => { router.push("/checkout") } if (state.items.length === 0 && !state.loading) { return (

{t("cart.empty")}

Add some products to get started

) } return (

{t("cart.title")}

{state.error && (

{t("common.error")}: {state.error}. Please refresh or try again.

)}

{state.loading && (

)}

{state.items.map((item) => { const lineKey = getCartLineKey(item) return (

{item.name}

{item.variantLabel ? (

{item.variantLabel}

) : null}

{item.description}

{formatPrice(item.price)}

{item.isOnSale && item.originalPrice && ( {formatPrice(item.originalPrice)} )}

{item.discountSource === "promotion" && item.promotionName && ( {item.promotionName} )}

{item.quantity}

{formatPrice(item.price * item.quantity)}

) })}

{t("cart.orderSummary")}

{t("cart.subtotal")} ({state.itemCount} {t("cart.items")}) {formatPrice(state.total)}

{t("cart.shipping")} {t("cart.calculatedAtCheckout")}

{t("cart.total")} {formatPrice(state.total)}

) } [V0_FILE]typescriptreact:file="app/categories/[id]/category-products-client.tsx" "use client" import { useEffect, useState } from "react" import Link from "next/link" import { getCategoryProducts, getCategoryByIdFromList } from "@/services/api" import type { Product, Category } from "@/types/product" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Footer } from "@/components/footer" import { ShoppingCart, ArrowLeft } from "lucide-react" import Image from "next/image" import { useLanguage } from "@/contexts/language-context" import { getDisplayPricing } from "@/lib/product-pricing" import { ProductPrice, PromotionBadge } from "@/components/product-price" interface CategoryProductsClientProps { categoryId: string } export default function CategoryProductsClient({ categoryId }: CategoryProductsClientProps) { const [products, setProducts] = useState([]) const [category, setCategory] = useState(null) const [loading, setLoading] = useState(true) const [page, setPage] = useState(1) const [hasMore, setHasMore] = useState(false) const { t, formatPrice } = useLanguage() useEffect(() => { const fetchData = async () => { setLoading(true) try { const [categoryResponse, productsResponse] = await Promise.all([ getCategoryByIdFromList(categoryId), getCategoryProducts(categoryId, page, 20), ]) if (categoryResponse.status === "success") { setCategory(categoryResponse.data) } if (productsResponse.status === "success") { setProducts(productsResponse.data.products) setHasMore(productsResponse.data.pagination.hasMore) } } catch (error) { console.error("Failed to fetch category data:", error) } finally { setLoading(false) } } fetchData() }, [categoryId, page]) return (

{category?.name || t("categories.title")}

{category?.metaDescription || t("categories.subtitle")}

{loading ? (

{[...Array(8)].map((_, i) => (

))}

) : products.length === 0 ? (

{t("products.notFound")}

{t("categories.noProducts") || "This category doesn't have any products yet"}

) : ( <>

{products.map((product) => { // Whole card links to the PDP; show "From {fromPrice}" for // variants-priced products and the product price otherwise. const pricing = getDisplayPricing(product) return (

{product.featured ? ( {t("common.featured")} ) : null} {product.name}

{product.name}

) })}

{hasMore ? (

) : null} )}

) } [V0_FILE]typescriptreact:file="app/categories/[id]/page.tsx" import type { Metadata } from "next" import { getCategoryByIdFromList } from "@/services/api" import storeConfig from "@/config/store" import CategoryProductsClient from "./category-products-client" export async function generateMetadata({ params }: { params: { id: string } }): Promise { try { const response = await getCategoryByIdFromList(params.id) if (response.status === "success" && response.data) { const category = response.data return { title: category.metaTitle || `${category.name} - ${storeConfig.storeName}`, description: category.metaDescription || `Browse products in ${category.name} category`, } } } catch (error) { console.error("Failed to fetch category metadata:", error) } return { title: `Category - ${storeConfig.storeName}`, description: "Browse products by category", } } export default function CategoryProductsPage({ params }: { params: { id: string } }) { return } [V0_FILE]typescriptreact:file="app/categories/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/categories/page.tsx" "use client" import type React from "react" import { useEffect, useState } from "react" import Link from "next/link" import Image from "next/image" import { getStoreCategories } from "@/services/api" import type { Category } from "@/types/product" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Search } from "lucide-react" import { Footer } from "@/components/footer" import { useLanguage } from "@/contexts/language-context" export default function CategoriesPage() { const [categories, setCategories] = useState([]) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") const [page, setPage] = useState(1) const [hasMore, setHasMore] = useState(false) const { t } = useLanguage() useEffect(() => { const fetchCategories = async () => { setLoading(true) try { const response = await getStoreCategories(page, 20, searchQuery) if (response.status === "success") { const sortedCategories = response.data.categories.sort((a, b) => { if (a.sortOrder !== undefined && b.sortOrder !== undefined) { return a.sortOrder - b.sortOrder } return 0 }) setCategories((prev) => (page === 1 ? sortedCategories : [...prev, ...sortedCategories])) setHasMore(response.data.pagination.hasMore) } } catch (error) { console.error("Failed to fetch categories:", error) } finally { setLoading(false) } } fetchCategories() }, [page, searchQuery]) const handleSearch = (e: React.FormEvent) => { e.preventDefault() setPage(1) } return (

{t("categories.title")}

{t("categories.subtitle")}

{loading ? (

{[...Array(8)].map((_, i) => (

))}

) : categories.length === 0 ? (

{t("categories.noFound")}

{t("categories.adjustSearch")}

) : ( <>

{categories.map((category) => ( {category.image ? (

{category.name}

) : (

{category.name}

)} ))}

{hasMore ? (

) : null} )}

) } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" 'use client' import { loadStripe } from '@stripe/stripe-js' import { Elements } from '@stripe/react-stripe-js' import { useEffect, useState } from 'react' import { useRouter } from 'next/navigation' import { useCart } from '@/contexts/cart-context' import storeConfig from '@/config/store' import { CheckoutProvider } from '@/contexts/checkout-context' import { CheckoutForm } from '@/components/checkout/CheckoutForm' import { getCheckoutConfig } from '@/services/api' import Image from 'next/image' import Link from 'next/link' export default function CheckoutPage() { const { state } = useCart() const router = useRouter() const [mounted, setMounted] = useState(false) const [stripePromise, setStripePromise] = useState(null) const [allowedCountries, setAllowedCountries] = useState([]) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { setMounted(true) }, []) useEffect(() => { // Redirect to cart if no items if (mounted && (!state.items || state.items.length === 0)) { router.push('/cart') } }, [state.items, router, mounted]) // Fetch Stripe publishable key from backend useEffect(() => { const initializeStripe = async () => { try { setIsLoading(true) setError(null) console.log('[v0] Fetching checkout config...') const config = await getCheckoutConfig() console.log('[v0] Checkout config received:', config) if (!config.publishableKey) { throw new Error('Stripe publishable key not found in checkout config') } const stripe = await loadStripe(config.publishableKey) console.log('[v0] Stripe initialized successfully') setStripePromise(stripe) setAllowedCountries(config.allowedCountries || []) } catch (err) { console.error('[v0] Error initializing Stripe:', err) setError(err instanceof Error ? err.message : 'Failed to initialize payment system') } finally { setIsLoading(false) } } if (mounted) { initializeStripe() } }, [mounted]) if (!mounted || !state.items || state.items.length === 0) { return null } if (isLoading) { return (

Initializing checkout...

) } if (error) { return (

Configuration Error

{error}

) } if (!stripePromise) { return (

Configuration Error

Unable to initialize payment system. Please try again later.

) } return (

{/* Header with store info */}

{storeConfig.logo && (

)}

{storeConfig.storeName}

Checkout

{/* Main checkout content */}

) } [V0_FILE]typescriptreact:file="app/collections/[slug]/page.tsx" "use client" import { useEffect, useState } from "react" import Image from "next/image" import Link from "next/link" import { useParams, useRouter } from "next/navigation" import { getCollectionBySlug } from "@/services/api" import type { Collection, Product } from "@/types/product" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Footer } from "@/components/footer" import { ShoppingCart, ArrowLeft } from "lucide-react" import { useCart } from "@/contexts/cart-context" import { useLanguage } from "@/contexts/language-context" import { getDisplayPricing } from "@/lib/product-pricing" import { ProductPrice, PromotionBadge } from "@/components/product-price" export default function CollectionPage() { const params = useParams() const router = useRouter() const slug = params.slug as string const [collection, setCollection] = useState(null) const [products, setProducts] = useState([]) const [loading, setLoading] = useState(true) const [page, setPage] = useState(1) const [hasMore, setHasMore] = useState(false) const { addItem } = useCart() const { t, formatPrice } = useLanguage() useEffect(() => { const fetchCollection = async () => { if (!slug) return try { const response = await getCollectionBySlug(slug, page, 20) if (response.status === "success") { setCollection(response.data.collection) if (page === 1) { setProducts(response.data.products) } else { setProducts((prev) => [...prev, ...response.data.products]) } setHasMore(response.data.pagination.hasMore) } } catch (error) { console.error("Failed to fetch collection:", error) } finally { setLoading(false) } } fetchCollection() }, [slug, page]) const handleAddToCart = (product: Product) => { const pricing = getDisplayPricing(product) if (pricing.requiresVariantSelection) { router.push(`/product/${product._id}`) return } addItem({ id: product._id, variantId: pricing.variantId, variantIndex: pricing.variantIndex, name: product.name, price: pricing.cartPrice, originalPrice: pricing.cartOriginalPrice, isOnSale: pricing.cartIsOnSale, discountSource: pricing.discountSource, promotionName: pricing.promotion?.name, images: product.images || [], quantity: 1, description: product.description, type: "product", }) } if (loading && page === 1) { return (

{[...Array(8)].map((_, i) => (

))}

) } if (!collection) { return (

Collection Not Found

The collection you are looking for does not exist.

) } return (

{/* Collection Header */}

{collection.image ? ( <>

) : (

)}

{collection.name}

{collection.description && (

{collection.description}

)}

{/* Products Grid */}

{products.length === 0 ? (

No Products Yet

This collection doesn't have any products yet.

) : ( <>

{products.map((product) => { const pricing = getDisplayPricing(product) return (

{product.name}

) })}

{hasMore && (

)} )}

) } [V0_FILE]typescriptreact:file="app/collections/page.tsx" "use client" import Link from "next/link" import Image from "next/image" import { useCollections } from "@/contexts/collections-context" import { Footer } from "@/components/footer" import { useLanguage } from "@/contexts/language-context" export default function CollectionsPage() { const { collections, loading } = useCollections() const { t } = useLanguage() if (loading) { return (

Collections

Browse our curated collections

{[...Array(6)].map((_, i) => (

))}

) } return (

Collections

Browse our curated collections

{collections.length === 0 ? (

No Collections Yet

Check back later for new collections.

) : (

{collections.map((collection) => (

{collection.image ? (

) : (

)}

{collection.name}

{collection.description && (

{collection.description}

)} {collection.productCount > 0 && (

{collection.productCount} {collection.productCount === 1 ? "product" : "products"}

)}

))}

)}

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" "use client" import type React from "react" import { useState } 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 { useLanguage } from "@/contexts/language-context" export default function ContactPage() { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const { t } = useLanguage() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission await new Promise((resolve) => setTimeout(resolve, 1000)) setIsSubmitting(false) setIsSubmitted(true) setFormData({ name: "", email: "", subject: "", message: "" }) } const handleChange = (e: React.ChangeEvent) => { setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })) } return (

{/* Header */}

{t("contact.title")}

{t("contact.subtitle")}

{/* Contact Form */} {t("contact.sendMessage")} {isSubmitted ? (

✓

{t("contact.messageSent")}

{t("contact.thanksMessage")}

) : (

{t("contact.name")} *

{t("contact.email")} *

{t("contact.subject")} *

{t("contact.message")} *

</div>
                    <Button type="submit" disabled={isSubmitting} className="w-full">
                      {isSubmitting ? t("contact.sending") : t("contact.sendButton")}
                    </Button>
                  </form>
                )}
              </CardContent>
            </Card>

{/* Contact Information */}
            <div className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle>{t("contact.contactInfo")}</CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div>
                    <h3 className="font-semibold text-foreground mb-2">{t("contact.customerService")}</h3>
                    <p className="text-muted-foreground">support@agora.com</p>
                    <p className="text-muted-foreground">1-800-AGORA-01</p>
                  </div>
                  <div>
                    <h3 className="font-semibold text-foreground mb-2">{t("contact.businessHours")}</h3>
                    <p className="text-muted-foreground">{t("contact.hours.weekday")}</p>
                    <p className="text-muted-foreground">{t("contact.hours.saturday")}</p>
                    <p className="text-muted-foreground">{t("contact.hours.sunday")}</p>
                  </div>
                  <div>
                    <h3 className="font-semibold text-foreground mb-2">{t("contact.address")}</h3>
                    <p className="text-muted-foreground">
                      123 Commerce Street
                      <br />
                      Suite 100
                      <br />
                      New York, NY 10001
                    </p>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>{t("contact.faq")}</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <h4 className="font-medium text-foreground mb-1">{t("contact.faqQuestions.shipping")}</h4>
                    <p className="text-sm text-muted-foreground">{t("contact.faqAnswers.shipping")}</p>
                  </div>
                  <div>
                    <h4 className="font-medium text-foreground mb-1">{t("contact.faqQuestions.returns")}</h4>
                    <p className="text-sm text-muted-foreground">{t("contact.faqAnswers.returns")}</p>
                  </div>
                  <div>
                    <h4 className="font-medium text-foreground mb-1">{t("contact.faqQuestions.international")}</h4>
                    <p className="text-sm text-muted-foreground">{t("contact.faqAnswers.international")}</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/faq/faq-client.tsx"
"use client"

import { useLanguage } from "@/contexts/language-context"

export default function FAQClient() {
  const { t } = useLanguage()

const faqs = [
    { question: t("faq.q1"), answer: t("faq.a1") },
    { question: t("faq.q2"), answer: t("faq.a2") },
    { question: t("faq.q3"), answer: t("faq.a3") },
    { question: t("faq.q4"), answer: t("faq.a4") },
    { question: t("faq.q5"), answer: t("faq.a5") },
    { question: t("faq.q6"), answer: t("faq.a6") },
    { question: t("faq.q7"), answer: t("faq.a7") },
    { question: t("faq.q8"), answer: t("faq.a8") },
  ]

return (
    <main className="min-h-screen bg-white">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-bold text-black mb-4">{t("faq.title")}</h1>
            <p className="text-lg text-gray-600">{t("faq.subtitle")}</p>
          </div>

<div className="space-y-6">
            {faqs.map((faq, index) => (
              <div key={index} className="bg-gray-50 rounded-lg p-6 hover:bg-gray-100 transition-colors">
                <h2 className="text-xl font-semibold text-black mb-3">{faq.question}</h2>
                <p className="text-gray-600 leading-relaxed">{faq.answer}</p>
              </div>
            ))}
          </div>

<div className="mt-12 text-center p-8 bg-gray-50 rounded-lg">
            <h3 className="text-2xl font-semibold text-black mb-4">{t("faq.stillHaveQuestions")}</h3>
            <p className="text-gray-600 mb-6">{t("faq.cantFind")}</p>
            <a
              href="/contact"
              className="inline-block bg-black text-white px-8 py-3 rounded-lg font-medium hover:bg-gray-800 transition-colors"
            >
              {t("footer.contactUs")}
            </a>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/faq/page.tsx"
import type { Metadata } from "next"
import storeConfig from "@/config/store"
import FAQClient from "./faq-client"

export const metadata: Metadata = {
  title: `FAQ - ${storeConfig.storeName}`,
  description: "Frequently asked questions about our products and services",
}

export default function FAQPage() {
  return <FAQClient />
}
[V0_FILE]typescriptreact:file="app/featured/loading.tsx"
export default function Loading() {
  return (
    <div className="min-h-screen bg-white py-8">
      <div className="container mx-auto px-4">
        <div className="text-center py-20">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-black mx-auto mb-4"></div>
          <p className="text-gray-600">Loading featured products...</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/featured/page.tsx"
import { FeaturedProductsPageClient } from "@/components/featured-products-page-client"

export default function FeaturedProductsPage() {
  return <FeaturedProductsPageClient />
}
[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

* {
    @apply border-border;
  }

body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import "./globals.css"
import { CartProvider } from "@/contexts/cart-context"
import { ConditionalNavbar, ConditionalCartDrawer } from "@/components/conditional-store-chrome"
import { CustomThemeProvider } from "@/components/custom-theme-provider"
import { LanguageProvider } from "@/contexts/language-context"
import { CollectionsProvider } from "@/contexts/collections-context"
import { ComplianceProvider } from "@/contexts/compliance-context"
import { DesignModeProvider } from "@/contexts/design-mode-context"
import { ElementSelector } from "@/components/element-selector"
import { DesignModeToggle } from "@/components/design-mode-toggle"
import { IframeStateNotifier } from "@/components/iframe-state-notifier"
import { Toaster } from "@/components/ui/toaster"
import storeConfig from "@/config/store"
import { generateCssVariables } from "@/lib/color-utils"

const colorOverrides = generateCssVariables(storeConfig.primaryColor, storeConfig.secondaryColor)

export const metadata: Metadata = {
  title: storeConfig.metaTitle || `${storeConfig.storeName} - Modern E-commerce Store`,
  description: storeConfig.metaDescription || `Discover amazing products at ${storeConfig.storeName}.`,
  icons: {
    icon: "https://www.searchagora.com/favicon.ico",
  },
    generator: 'v0.app'
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang={storeConfig.language || "en"} suppressHydrationWarning>
      <head>
        <style dangerouslySetInnerHTML={{ __html: colorOverrides }} />
      </head>
      <body className="bg-background text-foreground transition-colors">
        <DesignModeProvider>
          <LanguageProvider>
            <CollectionsProvider>
              <ComplianceProvider>
                <CustomThemeProvider>
                  <CartProvider>
                    <ConditionalNavbar />
                    {children}
                    <ConditionalCartDrawer />
                  </CartProvider>
                </CustomThemeProvider>
              </ComplianceProvider>
            </CollectionsProvider>
          </LanguageProvider>
          <ElementSelector />
          <DesignModeToggle />
          <IframeStateNotifier />
        </DesignModeProvider>
        <Toaster />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
import { Hero } from "@/components/hero"
import { FeaturedProducts } from "@/components/featured-products"
import { CategoriesSection } from "@/components/categories-section"
import { CollectionsSection } from "@/components/collections-section"
import { Footer } from "@/components/footer"

export default function Home() {
  return (
    <main className="min-h-screen bg-background">
      <Hero />
      <CategoriesSection />
      <FeaturedProducts />
      <CollectionsSection />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx"
"use client"

import { useCompliance } from "@/contexts/compliance-context"
import { MarkdownRenderer } from "@/components/markdown-renderer"
import { Footer } from "@/components/footer"

export default function PrivacyPolicyPage() {
  const { compliance, loading } = useCompliance()

if (loading) {
    return (
      <main className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-3xl mx-auto">
            <div className="animate-pulse">
              <div className="h-10 bg-muted rounded w-1/2 mb-8" />
              <div className="space-y-4">
                <div className="h-4 bg-muted rounded w-full" />
                <div className="h-4 bg-muted rounded w-5/6" />
                <div className="h-4 bg-muted rounded w-4/6" />
                <div className="h-4 bg-muted rounded w-full" />
                <div className="h-4 bg-muted rounded w-3/4" />
              </div>
            </div>
          </div>
        </div>
        <Footer />
      </main>
    )
  }

if (!compliance.privacyPolicy) {
    return (
      <main className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-3xl mx-auto text-center py-16">
            <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Privacy Policy
            </h1>
            <p className="text-muted-foreground">
              Privacy policy information is not available at this time.
            </p>
          </div>
        </div>
        <Footer />
      </main>
    )
  }

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

return (
    <>
      <ProductPageClient productId={id} />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/products/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/products/page.tsx"
"use client"

import { useSearchParams, useRouter } from "next/navigation"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ProductsPageClient } from "@/components/products-page-client"
import { CategoriesTabContent } from "@/components/categories-tab-content"
import { Suspense } from "react"
import { useLanguage } from "@/contexts/language-context"

function ProductsPageContent() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const currentTab = searchParams.get("tab") || "products"
  const { t } = useLanguage()

const handleTabChange = (value: string) => {
    const params = new URLSearchParams(searchParams.toString())
    params.set("tab", value)
    router.push(`/products?${params.toString()}`)
  }

return (
    <div className="min-h-screen bg-background py-8">
      <div className="container mx-auto px-4">
        <Tabs value={currentTab} onValueChange={handleTabChange} className="w-full">
          <div className="flex justify-center mb-8">
            <TabsList className="grid w-full max-w-md grid-cols-2 bg-muted">
              <TabsTrigger value="products" className="data-[state=active]:bg-background text-foreground">
                {t("nav.products")}
              </TabsTrigger>
              <TabsTrigger value="categories" className="data-[state=active]:bg-background text-foreground">
                {t("categories.title")}
              </TabsTrigger>
            </TabsList>
          </div>

<TabsContent value="categories">
            <CategoriesTabContent />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}

export default function ProductsPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductsPageContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/return-policy/page.tsx"
"use client"

import { useCompliance } from "@/contexts/compliance-context"
import { MarkdownRenderer } from "@/components/markdown-renderer"
import { Footer } from "@/components/footer"

export default function ReturnPolicyPage() {
  const { compliance, loading } = useCompliance()

if (!compliance.returnPolicy) {
    return (
      <main className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-3xl mx-auto text-center py-16">
            <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Return Policy
            </h1>
            <p className="text-muted-foreground">
              Return policy information is not available at this time.
            </p>
          </div>
        </div>
        <Footer />
      </main>
    )
  }

import { useEffect, useState } from "react"
import { useSearchParams } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, Package, Truck, CreditCard, Loader2 } from "lucide-react"
import { handlePaymentSuccess } from "@/services/api"
import { formatCurrency } from "@/lib/format-currency"
import type { OrderDetails } from "@/types/product"
import Link from "next/link"
import Image from "next/image"
import { useLanguage } from "@/contexts/language-context"
import { useCart } from "@/contexts/cart-context"
import storeConfig from "@/config/store"

function SuccessHeader() {
  return (
    <div className="bg-muted border-b border-input py-6">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <Link href="/">
          <div className="flex items-center gap-4 cursor-pointer hover:opacity-80 transition-opacity">
            {storeConfig.logo && (
              <Image
                src={storeConfig.logo}
                alt={storeConfig.storeName}
                width={120}
                height={40}
                className="h-10 w-auto"
              />
            )}
            <div>
              <h1 className="text-2xl font-bold text-foreground">{storeConfig.storeName}</h1>
              <p className="text-muted-foreground">{"Order Confirmation"}</p>
            </div>
          </div>
        </Link>
      </div>
    </div>
  )
}

export default function SuccessPage() {
  const searchParams = useSearchParams()
  const { t } = useLanguage()
  const { dispatch } = useCart()

const [orderDetails, setOrderDetails] = useState<OrderDetails | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

// Format using the order's actual currency (USD, SAR, AED, ...).
  const formatPrice = (price: number) => formatCurrency(price, orderDetails?.currency)

useEffect(() => {
    // Read ids from the Stripe return_url, falling back to sessionStorage.
    const paymentIntentId =
      searchParams.get("payment_intent_id") ||
      searchParams.get("payment_intent") ||
      (typeof window !== "undefined" ? sessionStorage.getItem("payment_intent_id") : "") ||
      ""
    const checkoutId =
      searchParams.get("checkout_id") ||
      searchParams.get("checkoutId") ||
      (typeof window !== "undefined" ? sessionStorage.getItem("checkout_id") : "") ||
      ""

if (!paymentIntentId) {
      setError("Missing payment information")
      setLoading(false)
      return
    }

const finalizeOrder = async () => {
      try {
        setLoading(true)
        setError(null)

// POST /checkout/payment-success — idempotent; creates or returns the order.
        const data = await handlePaymentSuccess(paymentIntentId, checkoutId)
        setOrderDetails(data.order)

// Clear the cart and stored ids now that the order is placed.
        dispatch({ type: "CLEAR_CART" })
        if (typeof window !== "undefined") {
          sessionStorage.removeItem("payment_intent_id")
          sessionStorage.removeItem("checkout_id")
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to finalize your order")
      } finally {
        setLoading(false)
      }
    }

finalizeOrder()
  }, [searchParams, dispatch])

if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <SuccessHeader />
        <div className="container mx-auto px-4 py-8">
          <div className="max-w-2xl mx-auto text-center py-20">
            <Loader2 className="w-12 h-12 animate-spin text-black mx-auto mb-4" />
            <p className="text-gray-600">{t("success.loading")}</p>
          </div>
        </div>
      </div>
    )
  }

if (error || !orderDetails) {
    return (
      <div className="min-h-screen bg-white">
        <SuccessHeader />
        <div className="container mx-auto px-4 py-8">
          <div className="max-w-2xl mx-auto text-center py-20">
            <div className="text-red-500 mb-4">
              <Package className="w-16 h-16 mx-auto mb-4" />
            </div>
            <h1 className="text-3xl font-bold text-black mb-4">{t("success.notFound")}</h1>
            <p className="text-gray-600 mb-8">{error || t("success.unableToLoad")}</p>
            <Link href="/products">
              <Button className="bg-black text-white hover:bg-black/90">{t("cart.continueShopping")}</Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-white">
      <SuccessHeader />
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          {/* Success Header */}
          <div className="text-center mb-8">
            <div className="text-green-500 mb-4">
              <CheckCircle className="w-16 h-16 mx-auto" />
            </div>
            <h1 className="text-3xl font-bold text-black mb-2">{t("success.title")}</h1>
            <p className="text-gray-600">{t("success.thankYou")}</p>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Order Summary */}
            <Card>
              <CardContent className="p-6">
                <h2 className="text-xl font-semibold text-black mb-4 flex items-center">
                  <Package className="w-5 h-5 mr-2" />
                  {t("success.orderSummary")}
                </h2>

<div className="space-y-4 mb-6">
                  {orderDetails.items.map((item) => (
                    <div key={item._id} className="flex items-center gap-4 p-3 border border-gray-200 rounded-lg">
                      {item.images && item.images.length > 0 && (
                        <img
                          src={item.images[0] || "/placeholder.svg"}
                          alt={item.name}
                          className="w-16 h-16 object-cover rounded-md"
                        />
                      )}
                      <div className="flex-1">
                        <h3 className="font-medium text-black">{item.name}</h3>
                        {item.description && <p className="text-sm text-gray-600">{item.description}</p>}
                        <p className="text-sm text-gray-500">
                          {t("success.qty")} {item.quantity}
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="font-medium">{formatPrice(item.totalPrice || 0)}</p>
                        <p className="text-sm text-gray-500">
                          {formatPrice(item.unitPrice || 0)} {t("success.each")}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>

<div className="border-t pt-4 space-y-2">
                  {orderDetails.subtotal !== undefined && (
                    <div className="flex justify-between">
                      <span className="text-gray-600">{t("cart.subtotal")}</span>
                      <span>{formatPrice(orderDetails.subtotal)}</span>
                    </div>
                  )}
                  {orderDetails.shippingCost !== undefined && (
                    <div className="flex justify-between">
                      <span className="text-gray-600">{t("cart.shipping")}</span>
                      <span>{formatPrice(orderDetails.shippingCost)}</span>
                    </div>
                  )}
                  {orderDetails.taxAmount !== undefined && orderDetails.taxAmount > 0 && (
                    <div className="flex justify-between">
                      <span className="text-gray-600">{t("success.tax")}</span>
                      <span>{formatPrice(orderDetails.taxAmount)}</span>
                    </div>
                  )}
                  <div className="flex justify-between text-lg font-semibold border-t pt-2">
                    <span>{t("cart.total")}</span>
                    <span>{formatPrice(orderDetails.totalAmount || 0)}</span>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Order & Customer Details */}
            <div className="space-y-6">
              {/* Payment Status */}
              <Card>
                <CardContent className="p-6">
                  <h2 className="text-xl font-semibold text-black mb-4 flex items-center">
                    <CreditCard className="w-5 h-5 mr-2" />
                    {t("success.orderStatus")}
                  </h2>
                  <div className="flex flex-col gap-2">
                    {orderDetails.paymentStatus && (
                      <div className="flex items-center gap-2">
                        <span className="text-sm text-gray-600">{t("success.payment")}</span>
                        <Badge
                          variant={orderDetails.paymentStatus === "paid" ? "default" : "secondary"}
                          className={orderDetails.paymentStatus === "paid" ? "bg-green-100 text-green-800" : ""}
                        >
                          {orderDetails.paymentStatus.charAt(0).toUpperCase() + orderDetails.paymentStatus.slice(1)}
                        </Badge>
                      </div>
                    )}
                    {orderDetails.status && (
                      <div className="flex items-center gap-2">
                        <span className="text-sm text-gray-600">{t("success.orderStatusLabel")}</span>
                        <Badge variant="secondary">
                          {orderDetails.status.charAt(0).toUpperCase() + orderDetails.status.slice(1)}
                        </Badge>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

{(orderDetails.customerEmail || orderDetails.customerName || orderDetails.customerPhone) && (
                <Card>
                  <CardContent className="p-6">
                    <h2 className="text-xl font-semibold text-black mb-4">{t("success.customerInfo")}</h2>
                    <div className="space-y-2">
                      {orderDetails.customerName && (
                        <p>
                          <span className="font-medium">{t("success.name")}</span> {orderDetails.customerName}
                        </p>
                      )}
                      {orderDetails.customerEmail && (
                        <p>
                          <span className="font-medium">{t("success.email")}</span> {orderDetails.customerEmail}
                        </p>
                      )}
                      {orderDetails.customerPhone && (
                        <p>
                          <span className="font-medium">{t("success.phone")}</span> {orderDetails.customerPhone}
                        </p>
                      )}
                    </div>
                  </CardContent>
                </Card>
              )}

{orderDetails.shippingAddress && (
                <Card>
                  <CardContent className="p-6">
                    <h2 className="text-xl font-semibold text-black mb-4 flex items-center">
                      <Truck className="w-5 h-5 mr-2" />
                      {t("success.shippingAddress")}
                    </h2>
                    <div className="space-y-1">
                      {orderDetails.shippingAddress.name && (
                        <p className="font-medium">{orderDetails.shippingAddress.name}</p>
                      )}
                      {orderDetails.shippingAddress.line1 && <p>{orderDetails.shippingAddress.line1}</p>}
                      {orderDetails.shippingAddress.line2 && <p>{orderDetails.shippingAddress.line2}</p>}
                      {orderDetails.shippingAddress.city && orderDetails.shippingAddress.state && (
                        <p>
                          {orderDetails.shippingAddress.city}, {orderDetails.shippingAddress.state}{" "}
                          {orderDetails.shippingAddress.postal_code}
                        </p>
                      )}
                      {orderDetails.shippingAddress.country && <p>{orderDetails.shippingAddress.country}</p>}
                    </div>

{orderDetails.shippingOption?.name && (
                      <div className="mt-4 pt-4 border-t">
                        <p className="text-sm text-gray-600">
                          <span className="font-medium">{t("success.shippingMethod")}</span>{" "}
                          {orderDetails.shippingOption.name}
                        </p>
                      </div>
                    )}
                  </CardContent>
                </Card>
              )}
            </div>
          </div>

{/* Action Buttons */}
          <div className="text-center mt-8 space-y-4">
            <p className="text-gray-600">{t("success.emailConfirm")}</p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/products">
                <Button className="bg-black text-white hover:bg-black/90">{t("cart.continueShopping")}</Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/terms-of-service/page.tsx"
"use client"

import { useCompliance } from "@/contexts/compliance-context"
import { MarkdownRenderer } from "@/components/markdown-renderer"
import { Footer } from "@/components/footer"

export default function TermsOfServicePage() {
  const { compliance, loading } = useCompliance()

if (!compliance.termsOfService) {
    return (
      <main className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-3xl mx-auto text-center py-16">
            <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Terms of Service
            </h1>
            <p className="text-muted-foreground">
              Terms of service information is not available at this time.
            </p>
          </div>
        </div>
        <Footer />
      </main>
    )
  }

return (
    <main className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-3xl mx-auto">
          <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-8">
            Terms of Service
          </h1>
          <MarkdownRenderer content={compliance.termsOfService} />
        </div>
      </div>
      <Footer />
    </main>
  )
}
[V0_FILE]json:file="components.json"
{
  "$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/cart-drawer.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { useCart, getCartLineKey } from "@/contexts/cart-context"
import { X, Plus, Minus, ShoppingBag, Loader2 } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"
import { useRouter } from "next/navigation"

export function CartDrawer() {
  const { state, dispatch, removeItem, updateItemQuantity, clearCart } = useCart()
  const { t, formatPrice } = useLanguage()
  const router = useRouter()

const closeCart = () => {
    dispatch({ type: "CLOSE_CART" })
  }

const handleCheckout = () => {
    closeCart()
    router.push("/checkout")
  }

if (!state.isOpen) return null

return (
    <>
      {/* Backdrop */}
      <div className="fixed inset-0 bg-black/50 z-50 animate-in fade-in duration-200" onClick={closeCart} />

{/* Cart Drawer */}
      <div className="fixed right-0 top-0 h-full w-full max-w-md bg-card shadow-xl z-50 flex flex-col animate-in slide-in-from-right duration-300">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-border">
          <h2 className="text-xl font-semibold text-foreground">{t("cart.yourCart")}</h2>
          <Button variant="ghost" size="sm" onClick={closeCart}>
            <X className="w-5 h-5" />
          </Button>
        </div>

{/* Loading/Error State */}
        {state.loading && (
          <div className="absolute inset-0 bg-card/80 flex items-center justify-center z-10">
            <Loader2 className="w-8 h-8 animate-spin text-foreground" />
          </div>
        )}
        {state.error && (
          <div className="p-4 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-sm text-center">
            {t("common.error")}: {state.error}. Please refresh or try again.
          </div>
        )}

{/* Cart Items */}
        <div className="flex-1 overflow-y-auto p-6">
          {state.items.length === 0 && !state.loading ? (
            <div className="flex flex-col items-center justify-center h-full text-center">
              <ShoppingBag className="w-16 h-16 text-muted-foreground mb-4" />
              <h3 className="text-lg font-medium text-foreground mb-2">{t("cart.empty")}</h3>
              <p className="text-muted-foreground mb-6">Add some products to get started</p>
              <Button onClick={closeCart} className="bg-primary text-primary-foreground hover:bg-primary/90">
                {t("cart.continueShopping")}
              </Button>
            </div>
          ) : (
            <div className="space-y-4">
              {state.items.map((item) => {
                const lineKey = getCartLineKey(item)
                return (
                <div
                  key={lineKey}
                  className="flex items-center gap-4 p-4 border border-border rounded-lg"
                >
                  <img
                    src={item.images[0] || "/placeholder.svg"}
                    alt={item.name}
                    className="w-16 h-16 object-cover rounded-md"
                  />

<div className="flex-1">
                    <h3 className="font-medium text-foreground">{item.name}</h3>
                    {item.variantLabel ? (
                      <p className="text-xs text-muted-foreground">{item.variantLabel}</p>
                    ) : null}
                    <div className="flex items-center gap-2">
                      <p className="text-sm text-muted-foreground">{formatPrice(item.price)}</p>
                      {item.isOnSale && item.originalPrice && (
                        <span className="text-xs text-muted-foreground line-through">{formatPrice(item.originalPrice)}</span>
                      )}
                    </div>
                    {item.discountSource === "promotion" && item.promotionName && (
                      <span className="mt-1 inline-block text-xs font-medium text-primary">
                        {item.promotionName}
                      </span>
                    )}

<div className="flex items-center gap-2 mt-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => updateItemQuantity(lineKey, item.quantity - 1)}
                        className="w-8 h-8 p-0 border-border"
                        disabled={state.loading}
                      >
                        <Minus className="w-3 h-3" />
                      </Button>

<span className="w-8 text-center font-medium text-foreground">{item.quantity}</span>

<Button
                        variant="outline"
                        size="sm"
                        onClick={() => updateItemQuantity(lineKey, item.quantity + 1)}
                        className="w-8 h-8 p-0 border-border"
                        disabled={state.loading}
                      >
                        <Plus className="w-3 h-3" />
                      </Button>
                    </div>
                  </div>

<div className="text-right">
                    <p className="font-medium text-foreground">{formatPrice(item.price * item.quantity)}</p>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => removeItem(lineKey)}
                      className="text-red-500 hover:text-red-700 mt-1"
                      disabled={state.loading}
                    >
                      {t("cart.remove")}
                    </Button>
                  </div>
                </div>
                )
              })}
            </div>
          )}
        </div>

{/* Footer */}
        {state.items.length > 0 && (
          <div className="border-t border-border p-6 space-y-4">
            <div className="flex justify-between items-center text-lg font-semibold text-foreground">
              <span>{t("cart.total")}:</span>
              <span>{formatPrice(state.total)}</span>
            </div>

<div className="space-y-2">
              <Button
                className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
                onClick={handleCheckout}
                disabled={state.loading}
              >
                {state.loading ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin mr-2" />
                    {t("common.loading")}
                  </>
                ) : (
                  t("cart.proceedToCheckout")
                )}
              </Button>
              <Button
                variant="outline"
                className="w-full border-border bg-transparent text-foreground"
                onClick={closeCart}
                disabled={state.loading}
              >
                {t("cart.continueShopping")}
              </Button>
              <Button
                variant="ghost"
                className="w-full text-red-500 hover:text-red-700"
                onClick={clearCart}
                disabled={state.loading}
              >
                {t("cart.clearCart")}
              </Button>
            </div>
          </div>
        )}
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/categories-section.tsx"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { getStoreCategories } from "@/services/api"
import type { Category } from "@/types/product"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"
import { getCategoriesSectionConfig } from "@/lib/homepage-config"

export function CategoriesSection() {
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(true)
  const cfg = getCategoriesSectionConfig()

useEffect(() => {
    const fetchCategories = async () => {
      try {
        const response = await getStoreCategories(1, 20)
        if (response.status === "success") {
          const sortedCategories = response.data.categories.sort((a: Category, b: Category) => {
            if (a.sortOrder !== undefined && b.sortOrder !== undefined) {
              return a.sortOrder - b.sortOrder
            }
            return 0
          })
          setCategories(sortedCategories.slice(0, cfg.layout.maxCategories))
        }
      } catch (error) {
        console.error("Failed to fetch categories:", error)
      } finally {
        setLoading(false)
      }
    }

fetchCategories()
  }, [cfg.layout.maxCategories])

if (!cfg.visible) return null

if (loading) {
    return (
      <section className={cfg.section.className}>
        <div className={cfg.layout.gridClassName}>
          {[...Array(cfg.layout.skeletonCount)].map((_, i) => (
            <div key={i} className="relative aspect-[4/3] overflow-hidden rounded-xl bg-muted animate-pulse" />
          ))}
        </div>
      </section>
    )
  }

if (categories.length === 0) {
    return null
  }

return (
    <section className={cfg.section.className}>
      <div className={cfg.header.className}>
        <div>
          <h2 className={cfg.title.className}>{cfg.title.text || "Shop by Category"}</h2>
          <p className={cfg.subtitle.className}>{cfg.subtitle.text || "Browse our collection by category"}</p>
        </div>
        {cfg.viewAllButton.visible && (
          <Button asChild variant="ghost" className={cfg.viewAllButton.className}>
            <Link href={cfg.viewAllButton.href}>
              {cfg.viewAllButton.text || "View All"}
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
        )}
      </div>

<div className={cfg.layout.gridClassName}>
        {categories.map((category) => (
          <Link key={category._id} href={`/categories/${category._id}`} className="group">
            {category.image ? (
              <div className="relative aspect-[4/3] overflow-hidden rounded-xl">
                <Image
                  src={category.image}
                  alt={category.name}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
                <div className="absolute inset-0 flex items-center justify-center">
                  <h3 className="text-xl md:text-2xl font-bold text-white text-center px-4 drop-shadow-lg">
                    {category.name}
                  </h3>
                </div>
              </div>
            ) : (
              <Card className={cfg.card.className}>
                <CardContent className="p-6">
                  <h3 className={cfg.categoryName.className}>
                    {category.name}
                  </h3>
                </CardContent>
              </Card>
            )}
          </Link>
        ))}
      </div>

{cfg.viewAllMobileButton.visible && (
        <div className="mt-8 flex justify-center md:hidden">
          <Button
            asChild
            variant="outline"
            className={cfg.viewAllMobileButton.className}
          >
            <Link href={cfg.viewAllMobileButton.href}>
              {cfg.viewAllMobileButton.text || "View All Categories"}
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
        </div>
      )}
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/categories-tab-content.tsx"
"use client"

import type React from "react"
import { useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { getStoreCategories } from "@/services/api"
import type { Category } from "@/types/product"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Search } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"

export function CategoriesTabContent() {
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(false)
  const { t } = useLanguage()

useEffect(() => {
    const fetchCategories = async () => {
      setLoading(true)
      try {
        const response = await getStoreCategories(page, 20, searchQuery)
        if (response.status === "success") {
          const sortedCategories = response.data.categories.sort((a: Category, b: Category) => {
            if (a.sortOrder !== undefined && b.sortOrder !== undefined) {
              return a.sortOrder - b.sortOrder
            }
            return 0
          })
          setCategories((prev) => (page === 1 ? sortedCategories : [...prev, ...sortedCategories]))
          setHasMore(response.data.pagination.hasMore)
        }
      } catch (error) {
        console.error("Failed to fetch categories:", error)
      } finally {
        setLoading(false)
      }
    }

fetchCategories()
  }, [page, searchQuery])

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    setPage(1)
  }

return (
    <div>
      <div className="mb-12 text-center">
        <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">{t("categories.title")}</h1>
        <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">{t("categories.subtitle")}</p>

<form onSubmit={handleSearch} className="flex gap-2 max-w-xl mx-auto">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              type="text"
              placeholder={t("categories.searchPlaceholder")}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 bg-card border-input text-foreground"
            />
          </div>
          <Button type="submit" className="bg-primary text-primary-foreground hover:bg-primary/90">
            {t("common.search")}
          </Button>
        </form>
      </div>

{loading ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="relative aspect-[4/3] overflow-hidden rounded-xl bg-muted animate-pulse" />
          ))}
        </div>
      ) : categories.length === 0 ? (
        <div className="text-center py-16">
          <h3 className="text-2xl font-semibold mb-2 text-foreground">{t("categories.noFound")}</h3>
          <p className="text-muted-foreground">{t("categories.adjustSearch")}</p>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {categories.map((category) => (
              <Link key={category._id} href={`/categories/${category._id}`} className="group">
                {category.image ? (
                  <div className="relative aspect-[4/3] overflow-hidden rounded-xl">
                    <Image
                      src={category.image}
                      alt={category.name}
                      fill
                      className="object-cover transition-transform duration-500 group-hover:scale-110"
                      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
                    <div className="absolute inset-0 flex items-center justify-center">
                      <h3 className="text-xl md:text-2xl font-bold text-white text-center px-4 drop-shadow-lg">
                        {category.name}
                      </h3>
                    </div>
                  </div>
                ) : (
                  <Card className="hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full border-2 hover:border-primary/20 bg-card border-border">
                    <CardContent className="p-6 flex items-center justify-center text-center h-full min-h-[150px]">
                      <h3 className="font-semibold text-lg group-hover:text-primary transition-colors text-foreground">
                        {category.name}
                      </h3>
                    </CardContent>
                  </Card>
                )}
              </Link>
            ))}
          </div>

{hasMore ? (
            <div className="mt-12 flex justify-center">
              <Button
                onClick={() => setPage((p) => p + 1)}
                variant="outline"
                size="lg"
                className="min-w-[200px] bg-card text-foreground border-border hover:bg-muted"
              >
                {t("categories.loadMore")}
              </Button>
            </div>
          ) : null}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/categories.tsx"
"use client"

import { Shirt, Watch, Headphones, Gamepad2, Camera, Coffee, Package, Star } from "lucide-react"

// Sample categories for the template
const categories = [
  { id: "1", title: "Electronics", handle: "electronics", icon: Headphones },
  { id: "2", title: "Fashion", handle: "fashion", icon: Shirt },
  { id: "3", title: "Accessories", handle: "accessories", icon: Watch },
  { id: "4", title: "Gaming", handle: "gaming", icon: Gamepad2 },
  { id: "5", title: "Photography", handle: "photography", icon: Camera },
  { id: "6", title: "Lifestyle", handle: "lifestyle", icon: Coffee },
  { id: "7", title: "Tech Gear", handle: "tech-gear", icon: Package },
  { id: "8", title: "Premium", handle: "premium", icon: Star },
]

export function Categories() {
  return (
    <section id="categories-section" className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-black mb-4">Shop by Category</h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Explore our curated collections designed for every lifestyle
          </p>
        </div>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
          {categories.map((category) => {
            const IconComponent = category.icon

return (
              <a key={category.id} href={`/products?collection=${category.handle}`} className="group cursor-pointer">
                <div className="bg-white border border-gray-200 rounded-lg p-8 text-center hover:border-black transition-all duration-300">
                  <IconComponent className="w-12 h-12 mx-auto mb-4 text-black group-hover:scale-110 transition-transform duration-300" />
                  <h3 className="font-semibold text-lg text-black">{category.title}</h3>
                </div>
              </a>
            )
          })}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/checkout/CheckoutContactInfo.tsx"
'use client'

import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useCheckout } from '@/contexts/checkout-context'
import storeConfig from '@/config/store'

export function CheckoutContactInfo() {
  const { formData, setFormData } = useCheckout()

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

return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold text-foreground">Contact Information</h2>
      
      <div>
        <Label htmlFor="email" className="text-foreground">
          Email <span className="text-red-500">*</span>
        </Label>
        <Input
          id="email"
          type="email"
          placeholder="Enter your email"
          value={formData.email}
          onChange={(e) => handleChange('email', e.target.value)}
          className="mt-2 bg-background text-foreground border-input"
          required
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/checkout/CheckoutCoupon.tsx"
'use client'

import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { useCart } from '@/contexts/cart-context'
import { useCheckout } from '@/contexts/checkout-context'
import { getCheckoutSummary } from '@/services/api'
import { useState } from 'react'

export function CheckoutCoupon() {
  const { state: cartState } = useCart()
  const {
    couponCode,
    setCouponCode,
    appliedCoupon,
    setAppliedCoupon,
    selectedShippingId,
    setSummary,
  } = useCheckout()

const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const [loading, setLoading] = useState(false)

const handleApplyCoupon = async () => {
    const code = couponCode.trim()
    if (!code) {
      setError('Please enter a coupon code')
      setSuccess('')
      return
    }

// Block re-applying the coupon that is already active.
    if (appliedCoupon && code.toLowerCase() === appliedCoupon.toLowerCase()) {
      setError('This coupon is already applied')
      setSuccess('')
      return
    }

setLoading(true)
    setError('')
    setSuccess('')

try {
      // Validate the coupon by fetching a summary with it applied.
      const data = await getCheckoutSummary(
        cartState.items,
        code,
        selectedShippingId || undefined,
      )

// The API always returns a `coupon` object; only `applied: true` means success.
      if (data.coupon?.applied) {
        // Valid — persist the new summary and mark the coupon as applied.
        setSummary(data)
        setAppliedCoupon(data.coupon.code || code)
        setSuccess(data.coupon.message || 'Coupon applied successfully!')
      } else {
        // Invalid — keep the summary without a discount and show the backend reason.
        setSummary(data)
        setAppliedCoupon('')
        setError(data.coupon?.message || 'Coupon not found or not valid for this order')
      }
    } catch (err: any) {
      // Surfaces the backend message, e.g. "Coupon not found" or "Coupon expired".
      setError(err.message || 'Failed to apply coupon')
    } finally {
      setLoading(false)
    }
  }

const handleRemoveCoupon = async () => {
    setLoading(true)
    setError('')
    setSuccess('')

try {
      const data = await getCheckoutSummary(
        cartState.items,
        undefined,
        selectedShippingId || undefined,
      )
      setSummary(data)
      setAppliedCoupon('')
      setCouponCode('')
    } catch (err: any) {
      setError(err.message || 'Failed to remove coupon')
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="space-y-3">
      <label htmlFor="coupon" className="text-foreground font-medium">
        Coupon Code
      </label>
      <div className="flex gap-2">
        <Input
          id="coupon"
          type="text"
          placeholder="Enter coupon code"
          value={couponCode}
          onChange={(e) => {
            setCouponCode(e.target.value)
            if (error) setError('')
          }}
          disabled={loading || !!appliedCoupon}
          className="bg-background text-foreground border-input disabled:opacity-70"
        />
        {appliedCoupon ? (
          <Button
            onClick={handleRemoveCoupon}
            disabled={loading}
            type="button"
            variant="outline"
            className="border-input"
          >
            {loading ? 'Removing...' : 'Remove'}
          </Button>
        ) : (
          <Button
            onClick={handleApplyCoupon}
            disabled={loading || !couponCode.trim()}
            type="button"
            className="bg-primary text-primary-foreground hover:bg-primary/90"
          >
            {loading ? 'Applying...' : 'Apply'}
          </Button>
        )}
      </div>
      {error && <p className="text-sm text-red-500">{error}</p>}
      {success && <p className="text-sm text-green-600">{success}</p>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/checkout/CheckoutForm.tsx"
'use client'

import {
  Elements,
  PaymentElement,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js'
import { useEffect, useMemo, useState } from 'react'
import { useCart } from '@/contexts/cart-context'
import { useCheckout } from '@/contexts/checkout-context'
import { getCheckoutSummary, getCheckoutShippingOptions, createPaymentIntent } from '@/services/api'
import { formatCurrency } from '@/lib/format-currency'
import { CheckoutContactInfo } from './CheckoutContactInfo'
import { CheckoutShippingAddress } from './CheckoutShippingAddress'
import { CheckoutShippingOptions } from './CheckoutShippingOptions'
import { CheckoutOrderNotes } from './CheckoutOrderNotes'
import { CheckoutOrderSummary } from './CheckoutOrderSummary'

interface CheckoutFormProps {
  stripe: any
  allowedCountries: string[]
}

export function CheckoutForm({ stripe: stripePromise, allowedCountries }: CheckoutFormProps) {
  const { state: cartState } = useCart()
  const {
    formData,
    summary,
    setSummary,
    selectedShippingId,
    setSelectedShippingId,
    appliedCoupon,
    setAllowedCountries,
    setShippingError,
    setShippingLoading,
  } = useCheckout()

const [summaryLoading, setSummaryLoading] = useState(true)
  const [summaryError, setSummaryError] = useState('')

// Payment intent state (created only when the user continues to payment)
  const [clientSecret, setClientSecret] = useState('')
  const [checkoutId, setCheckoutId] = useState('')
  const [paymentIntentId, setPaymentIntentId] = useState('')
  const [creatingIntent, setCreatingIntent] = useState(false)
  const [intentError, setIntentError] = useState('')

// Stable signature so the summary effect only re-runs on real cart changes
  const cartSignature = useMemo(
    () =>
      cartState.items
        .map((i: any) => `${i.id}:${i.variantId ?? i.variantIndex ?? ''}:${i.quantity}`)
        .join(','),
    [cartState.items],
  )

// Build shipping address from form data for dynamic shipping lookup
  const shippingAddress = useMemo(() => {
    const hasAllAddressFields =
      formData.fullName &&
      formData.address &&
      formData.city &&
      formData.postalCode &&
      formData.country
    if (!hasAllAddressFields) return null
    return {
      name: formData.fullName,
      line1: formData.address,
      line2: formData.addressCont || '',
      city: formData.city,
      state: formData.state || '',
      postal_code: formData.postalCode,
      country: formData.country,
    }
  }, [formData.fullName, formData.address, formData.city, formData.postalCode, formData.country, formData.state, formData.addressCont])

// Debounce the shipping address so the summary effect doesn't fire on every keystroke
  const [debouncedAddress, setDebouncedAddress] = useState<any>(null)
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedAddress(shippingAddress)
    }, 800) // Wait 800ms after user stops typing

return () => clearTimeout(timer)
  }, [shippingAddress])

// Persist allowed countries (from checkout config) for the address form
  useEffect(() => {
    setAllowedCountries(allowedCountries)
  }, [allowedCountries, setAllowedCountries])

// POST /checkout/summary on load and whenever cart, coupon, address, or selected shipping method changes.
  useEffect(() => {
    if (cartState.items.length === 0) return

let cancelled = false

const fetchSummary = async () => {
      try {
        setSummaryLoading(true)
        setSummaryError('')

const data = await getCheckoutSummary(
          cartState.items,
          appliedCoupon || undefined,
          selectedShippingId || undefined, // PASS selectedShippingId to recalculate totals
          debouncedAddress || undefined,
        )

if (cancelled) return

// Keep the shippingOptions list from the shipping-options API.
        // The summary API recalculates totals but should NOT replace the options list.
        setSummary((prev) => ({
          ...data,
          shippingOptions: prev.shippingOptions?.length ? prev.shippingOptions : data.shippingOptions,
        }))
      } catch (err: any) {
        if (!cancelled) {
          const errorMessage = err.message || 'Failed to load order summary'
          setSummaryError(errorMessage)
        }
      } finally {
        if (!cancelled) setSummaryLoading(false)
      }
    }

fetchSummary()

return () => {
      cancelled = true
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cartSignature, appliedCoupon, debouncedAddress, selectedShippingId])

// Fetch the shipping options LIST from the dedicated shipping-options API.
  // Runs only when the address changes — not when the user picks a method.
  useEffect(() => {
    if (cartState.items.length === 0 || !debouncedAddress) return

let cancelled = false

const fetchShippingOptions = async () => {
      try {
        setShippingLoading(true)
        const data = await getCheckoutShippingOptions(cartState.items, debouncedAddress)

if (cancelled) return

// Only update the options list — leave the rest of the summary untouched.
        setSummary((prev) => ({
          ...prev,
          shippingOptions: data.shippingOptions,
        }))

// Use selectedShipping from the response to keep a method selected by default.
        if (data.selectedShipping?.id) {
          setSelectedShippingId(data.selectedShipping.id)
        }

setShippingError('')
      } catch (err: any) {
        if (!cancelled) {
          // Any failure from the shipping-options endpoint means we couldn't
          // find a shipping method for the entered address (e.g. an invalid
          // address returns a 400 "Request failed with status code 400").
          // Clear any stale selection and show a clear, actionable message
          // instead of the raw API/axios error.
          setSelectedShippingId('')
          setSummary((prev) => ({ ...prev, shippingOptions: [] }))
          setShippingError(
            'This address appears to be invalid and no shipping methods were found. Please check your address and try different values.',
          )
        }
      } finally {
        if (!cancelled) setShippingLoading(false)
      }
    }

fetchShippingOptions()

return () => {
      cancelled = true
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cartSignature, debouncedAddress])

// If the order changes after an intent was created, invalidate it so the
  // amount can't go stale. The user simply re-clicks "Continue to payment".
  useEffect(() => {
    setClientSecret('')
    setCheckoutId('')
    setPaymentIntentId('')
  }, [cartSignature, selectedShippingId, appliedCoupon])

if (!stripePromise) {
    return <div className="text-center py-12 text-red-600">Stripe not initialized</div>
  }

const validateForm = () => {
    if (
      !formData.email ||
      !formData.fullName ||
      !formData.address ||
      !formData.city ||
      !formData.postalCode ||
      !formData.country ||
      !formData.phoneNumber
    ) {
      return 'Please fill in all required contact and shipping fields'
    }
    if (!selectedShippingId) {
      return 'Please select a shipping method'
    }
    return ''
  }

const handleContinueToPayment = async () => {
    const validationError = validateForm()
    if (validationError) {
      setIntentError(validationError)
      return
    }

setCreatingIntent(true)
    setIntentError('')

try {
      const intent = await createPaymentIntent({
        cartItems: cartState.items,
        customerEmail: formData.email,
        customerName: formData.fullName,
        customerPhone: formData.phoneNumber,
        shippingAddress: {
          name: formData.fullName,
          line1: formData.address,
          line2: formData.addressCont || '',
          city: formData.city,
          state: formData.state || '',
          postal_code: formData.postalCode,
          country: formData.country,
        },
        shippingMethodId: selectedShippingId || undefined,
        couponCode: appliedCoupon || undefined,
        orderNotes: formData.orderNotes || '',
      })

if (!intent?.clientSecret) {
        setIntentError('Failed to create payment intent')
        return
      }

// Persist ids for the /success page fallback
      if (typeof window !== 'undefined') {
        sessionStorage.setItem('checkout_id', intent.checkoutId || '')
        sessionStorage.setItem('payment_intent_id', intent.paymentIntentId || '')
      }

setCheckoutId(intent.checkoutId || '')
      setPaymentIntentId(intent.paymentIntentId || '')
      setClientSecret(intent.clientSecret)
    } catch (err: any) {
      console.error('[v0] Error creating payment intent:', err)
      setIntentError(err.message || 'Failed to initialize payment')
    } finally {
      setCreatingIntent(false)
    }
  }

return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
      {/* Left side - Form sections */}
      <div className="lg:col-span-2 space-y-8">
        <CheckoutContactInfo />
        <CheckoutShippingAddress />
        <CheckoutShippingOptions />
        <CheckoutOrderNotes />

{/* Payment step */}
        {clientSecret ? (
          <Elements
            stripe={stripePromise}
            options={{ clientSecret, appearance: { theme: 'flat' } }}
          >
            <PaymentSection
              checkoutId={checkoutId}
              paymentIntentId={paymentIntentId}
              total={summary.totalAmount || 0}
              currency={summary.currency}
            />
          </Elements>
        ) : (
          <div className="space-y-4">
            {intentError && (
              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
                {intentError}
              </div>
            )}
            <button
              type="button"
              onClick={handleContinueToPayment}
              disabled={creatingIntent || summaryLoading}
              className="w-full bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-gray-400 disabled:cursor-not-allowed py-3 text-lg font-semibold rounded-lg transition-colors"
            >
              {creatingIntent ? 'Preparing payment...' : 'Continue to Payment'}
            </button>
          </div>
        )}
      </div>

{/* Right side - Order summary */}
      <div className="lg:col-span-1">
        <div className="sticky top-8">
          <CheckoutOrderSummary />
        </div>
      </div>
    </div>
  )
}

interface PaymentSectionProps {
  checkoutId: string
  paymentIntentId: string
  total: number
  currency?: string
}

function PaymentSection({ checkoutId, paymentIntentId, total, currency }: PaymentSectionProps) {
  const stripe = useStripe()
  const elements = useElements()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!stripe || !elements) return

setLoading(true)
    setError('')

try {
      const returnUrl = `${window.location.origin}/success?checkout_id=${encodeURIComponent(
        checkoutId,
      )}&payment_intent_id=${encodeURIComponent(paymentIntentId)}`

const { error: confirmError } = await stripe.confirmPayment({
        elements,
        confirmParams: { return_url: returnUrl },
        redirect: 'if_required',
      })

if (confirmError) {
        setError(confirmError.message || 'Payment failed')
        setLoading(false)
        return
      }

// No redirect happened (e.g. card payment) — go to the success page,
      // which finalizes the order via POST /checkout/payment-success.
      window.location.assign(returnUrl)
    } catch (err: any) {
      console.error('[v0] Error confirming payment:', err)
      setError(err.message || 'An error occurred while processing your payment')
      setLoading(false)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <h2 className="text-lg font-semibold text-foreground">Payment</h2>
      <div className="bg-muted p-6 rounded-lg">
        <PaymentElement />
      </div>

{error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
          {error}
        </div>
      )}

<button
        type="submit"
        disabled={loading || !stripe || !elements}
        className="w-full bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-gray-400 disabled:cursor-not-allowed py-3 text-lg font-semibold rounded-lg transition-colors"
      >
        {loading ? 'Processing...' : `Pay ${formatCurrency(total, currency)}`}
      </button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/checkout/CheckoutOrderNotes.tsx"
'use client'

import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { useCheckout } from '@/contexts/checkout-context'

export function CheckoutOrderNotes() {
  const { formData, setFormData } = useCheckout()

return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold text-foreground">Order Notes</h2>
      <div>
        <Label htmlFor="orderNotes" className="text-foreground">
          Notes (optional)
        </Label>
        <Textarea
          id="orderNotes"
          placeholder="Add any special instructions for your order"
          value={formData.orderNotes || ''}
          onChange={(e) => setFormData({ ...formData, orderNotes: e.target.value })}
          className="mt-2 bg-background text-foreground border-input"
          rows={3}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/checkout/CheckoutOrderSummary.tsx"
'use client'

import Image from 'next/image'
import { useCart } from '@/contexts/cart-context'
import { useCheckout } from '@/contexts/checkout-context'
import storeConfig from '@/config/store'
import { formatCurrency } from '@/lib/format-currency'
import { CheckoutCoupon } from './CheckoutCoupon'

export function CheckoutOrderSummary() {
  const { summary } = useCheckout()
  const { state: cartState } = useCart()

// Prefer the cart items for display (richer data); fall back to summary line items.
  const items = cartState.items.length > 0 ? cartState.items : (summary.lineItems || [])

// Use the real currency returned by the checkout summary API (USD, SAR, AED, ...).
  const currency = summary.currency
  const money = (amount: number) => formatCurrency(amount, currency)

return (
    <div className="space-y-6">
      <div className="bg-muted rounded-lg p-6">
        {/* Store Header */}
        <div className="mb-6 pb-6 border-b border-input">
          {storeConfig.logo && (
            <Image
              src={storeConfig.logo}
              alt={storeConfig.storeName}
              width={120}
              height={40}
              className="mb-2"
            />
          )}
          <h3 className="text-lg font-semibold text-foreground">{storeConfig.storeName}</h3>
        </div>

{/* Order Items */}
        <div className="space-y-4 mb-6 pb-6 border-b border-input">
          {items.map((item: any) => (
            <div key={`${item.id}-${item.selectedVariantId}`} className="flex justify-between items-start">
              <div className="flex-1">
                <div className="font-medium text-foreground">{item.name}</div>
                {item.selectedVariantName && (
                  <div className="text-sm text-muted-foreground">{item.selectedVariantName}</div>
                )}
                <div className="text-sm text-muted-foreground">Qty: {item.quantity}</div>
              </div>
              <div className="text-foreground font-medium ml-4">
                {money(item.price * item.quantity)}
              </div>
            </div>
          ))}
        </div>

{/* Coupon Section */}
        <div className="mb-6 pb-6 border-b border-input">
          <CheckoutCoupon />
        </div>

{/* Pricing Summary */}
        <div className="space-y-3">
          <div className="flex justify-between text-foreground">
            <span>Subtotal</span>
            <span>{money(summary.subtotal || 0)}</span>
          </div>

{summary.shippingCost > 0 && (
            <div className="flex justify-between text-foreground">
              <span>Shipping</span>
              <span>{money(summary.shippingCost)}</span>
            </div>
          )}

{summary.discountAmount > 0 && (
            <div className="flex justify-between text-green-600">
              <span>Discount</span>
              <span>-{money(summary.discountAmount)}</span>
            </div>
          )}

{summary.taxAmount > 0 && (
            <div className="flex justify-between text-foreground">
              <span>Tax</span>
              <span>{money(summary.taxAmount)}</span>
            </div>
          )}

<div className="border-t border-input pt-3 mt-3">
            <div className="flex justify-between text-lg font-bold text-foreground">
              <span>TOTAL</span>
              <span>{money(summary.totalAmount || 0)}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/checkout/CheckoutShippingAddress.tsx"
'use client'

import { useState } from 'react'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useCheckout } from '@/contexts/checkout-context'
import { getCountryName } from '@/lib/countries'

// Allows letters (including accented), spaces, hyphens, periods, apostrophes.
// Disallows digits and other special characters.
const LOCATION_NAME_REGEX = /^[\p{L}][\p{L}\s.'-]*$/u

const validateLocationField = (label: string, value: string, required: boolean): string => {
  const trimmed = value.trim()
  if (!trimmed) {
    return required ? `${label} is required` : ''
  }
  if (trimmed.length < 2) {
    return `${label} must be at least 2 characters`
  }
  if (!LOCATION_NAME_REGEX.test(trimmed)) {
    return `${label} can only contain letters, spaces, hyphens, periods, and apostrophes`
  }
  return ''
}

export function CheckoutShippingAddress() {
  const { formData, setFormData, allowedCountries } = useCheckout()
  const [errors, setErrors] = useState<{ city?: string; state?: string }>({})
  const [touched, setTouched] = useState<{ city?: boolean; state?: boolean }>({})

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

if (field === 'city' && touched.city) {
      setErrors((prev) => ({ ...prev, city: validateLocationField('City', value, true) }))
    }
    if (field === 'state' && touched.state) {
      setErrors((prev) => ({ ...prev, state: validateLocationField('State / Region', value, false) }))
    }
  }

const handleBlur = (field: 'city' | 'state') => {
    setTouched((prev) => ({ ...prev, [field]: true }))
    if (field === 'city') {
      setErrors((prev) => ({ ...prev, city: validateLocationField('City', formData.city, true) }))
    }
    if (field === 'state') {
      setErrors((prev) => ({ ...prev, state: validateLocationField('State / Region', formData.state || '', false) }))
    }
  }

// The checkout config returns allowed countries as ISO alpha-2 codes.
  // We store the code in formData.country (required by the payment-intent API).
  const countries = (allowedCountries.length > 0 ? allowedCountries : ['US']).map((code) => ({
    code,
    name: getCountryName(code),
  }))

return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold text-foreground">Shipping Address</h2>

<div>
        <Label htmlFor="fullName" className="text-foreground">
          Full Name <span className="text-red-500">*</span>
        </Label>
        <Input
          id="fullName"
          type="text"
          placeholder="Enter your full name"
          value={formData.fullName}
          onChange={(e) => handleChange('fullName', e.target.value)}
          className="mt-2 bg-background text-foreground border-input"
          required
        />
      </div>

<div className="grid grid-cols-2 gap-4">
        <div>
          <Label htmlFor="company" className="text-foreground">
            Company
          </Label>
          <Input
            id="company"
            type="text"
            placeholder="Company name"
            value={formData.company || ''}
            onChange={(e) => handleChange('company', e.target.value)}
            className="mt-2 bg-background text-foreground border-input"
          />
        </div>
        <div>
          <Label htmlFor="taxId" className="text-foreground">
            Tax ID
          </Label>
          <Input
            id="taxId"
            type="text"
            placeholder="eg. PL123456789"
            value={formData.taxId || ''}
            onChange={(e) => handleChange('taxId', e.target.value)}
            className="mt-2 bg-background text-foreground border-input"
          />
        </div>
      </div>

<div>
        <Label htmlFor="address" className="text-foreground">
          Address <span className="text-red-500">*</span>
        </Label>
        <Input
          id="address"
          type="text"
          placeholder="Street address"
          value={formData.address}
          onChange={(e) => handleChange('address', e.target.value)}
          className="mt-2 bg-background text-foreground border-input"
          required
        />
      </div>

<div>
        <Label htmlFor="addressCont" className="text-foreground">
          Address (continued)
        </Label>
        <Input
          id="addressCont"
          type="text"
          placeholder="Apartment, suite, etc. (optional)"
          value={formData.addressCont || ''}
          onChange={(e) => handleChange('addressCont', e.target.value)}
          className="mt-2 bg-background text-foreground border-input"
        />
      </div>

<div className="grid grid-cols-2 gap-4">
        <div>
          <Label htmlFor="postalCode" className="text-foreground">
            Postal Code <span className="text-red-500">*</span>
          </Label>
          <Input
            id="postalCode"
            type="text"
            placeholder="Postal code"
            value={formData.postalCode}
            onChange={(e) => handleChange('postalCode', e.target.value)}
            className="mt-2 bg-background text-foreground border-input"
            required
          />
        </div>
        <div>
          <Label htmlFor="city" className="text-foreground">
            City <span className="text-red-500">*</span>
          </Label>
          <Input
            id="city"
            type="text"
            placeholder="City"
            value={formData.city}
            onChange={(e) => handleChange('city', e.target.value)}
            onBlur={() => handleBlur('city')}
            aria-invalid={!!errors.city}
            aria-describedby={errors.city ? 'city-error' : undefined}
            className="mt-2 bg-background text-foreground border-input aria-[invalid=true]:border-red-500"
            required
          />
          {errors.city && (
            <p id="city-error" className="mt-1 text-sm text-red-500">
              {errors.city}
            </p>
          )}
        </div>
      </div>

<div className="grid grid-cols-2 gap-4">
        <div>
          <Label htmlFor="state" className="text-foreground">
            State / Region
          </Label>
          <Input
            id="state"
            type="text"
            placeholder="State or region"
            value={formData.state || ''}
            onChange={(e) => handleChange('state', e.target.value)}
            onBlur={() => handleBlur('state')}
            aria-invalid={!!errors.state}
            aria-describedby={errors.state ? 'state-error' : undefined}
            className="mt-2 bg-background text-foreground border-input aria-[invalid=true]:border-red-500"
          />
          {errors.state && (
            <p id="state-error" className="mt-1 text-sm text-red-500">
              {errors.state}
            </p>
          )}
        </div>
        <div>
          <Label htmlFor="country" className="text-foreground">
            Country <span className="text-red-500">*</span>
          </Label>
          <Select value={formData.country} onValueChange={(value) => handleChange('country', value)}>
            <SelectTrigger className="mt-2 bg-background text-foreground border-input">
              <SelectValue placeholder="Select country" />
            </SelectTrigger>
            <SelectContent className="bg-background text-foreground">
              {countries.map((country) => (
                <SelectItem key={country.code} value={country.code}>
                  {country.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

<div>
        <Label htmlFor="phoneNumber" className="text-foreground">
          Phone Number <span className="text-red-500">*</span>
        </Label>
        <Input
          id="phoneNumber"
          type="tel"
          placeholder="Phone number"
          value={formData.phoneNumber}
          onChange={(e) => handleChange('phoneNumber', e.target.value)}
          className="mt-2 bg-background text-foreground border-input"
          required
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/checkout/CheckoutShippingOptions.tsx"
'use client'

import { useCheckout } from '@/contexts/checkout-context'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Label } from '@/components/ui/label'
import { formatCurrency } from '@/lib/format-currency'

export function CheckoutShippingOptions() {
  const { summary, selectedShippingId, setSelectedShippingId, shippingError, shippingLoading } = useCheckout()

const shippingOptions = summary.shippingOptions || []
  const currency = summary.currency

// Keep a method highlighted: prefer the user's local selection, otherwise
  // fall back to the selectedShipping returned by the API.
  const activeShippingId = selectedShippingId || summary.selectedShipping?.id || ''

if (shippingLoading) {
    return (
      <div className="space-y-4">
        <h2 className="text-lg font-semibold text-foreground">Shipping Method</h2>
        <div className="p-4 bg-muted border border-input rounded-lg">
          <div className="flex items-center gap-2">
            <div className="h-5 w-5 rounded-full border-2 border-muted-foreground border-t-foreground animate-spin" />
            <span className="text-muted-foreground">Fetching shipping options...</span>
          </div>
        </div>
      </div>
    )
  }

if (shippingError) {
    return (
      <div className="space-y-4">
        <h2 className="text-lg font-semibold text-foreground">Shipping Method</h2>
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
          {shippingError}
        </div>
      </div>
    )
  }

if (shippingOptions.length === 0) {
    return (
      <div className="space-y-4">
        <h2 className="text-lg font-semibold text-foreground">Shipping Method</h2>
        <div className="text-muted-foreground">No shipping options available</div>
      </div>
    )
  }

// Selecting a method updates context; CheckoutForm re-fetches the summary.
  const handleShippingChange = (id: string) => {
    setSelectedShippingId(id)
  }

return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold text-foreground">Shipping Method</h2>

<RadioGroup
        value={activeShippingId}
        onValueChange={handleShippingChange}
        className="space-y-3"
      >
        {shippingOptions.map((option) => {
          const deliveryText =
            option.minDeliveryDays && option.maxDeliveryDays
              ? `${option.minDeliveryDays}-${option.maxDeliveryDays} business days`
              : option.description

return (
            <div
              key={option.id}
              className="flex items-center p-4 border border-input rounded-lg cursor-pointer hover:bg-muted transition-colors"
            >
              <RadioGroupItem
                id={`shipping-${option.id}`}
                value={option.id}
                className="mr-4"
              />
              <Label htmlFor={`shipping-${option.id}`} className="flex-1 cursor-pointer">
                <div className="font-medium text-foreground">{option.name}</div>
                {deliveryText && (
                  <div className="text-sm text-muted-foreground">{deliveryText}</div>
                )}
              </Label>
              <div className="text-lg font-semibold text-foreground">
                {formatCurrency(option.amount, currency)}
              </div>
            </div>
          )
        })}
      </RadioGroup>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/collections-section.tsx"
"use client"

import Link from "next/link"
import Image from "next/image"
import { useCollections } from "@/contexts/collections-context"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

export function CollectionsSection() {
  const { collections, loading } = useCollections()

if (loading) {
    return (
      <section className="py-16 px-4 container mx-auto">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-8">
          <div>
            <div className="h-8 w-48 bg-muted rounded animate-pulse mb-2" />
            <div className="h-5 w-64 bg-muted rounded animate-pulse" />
          </div>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {[...Array(6)].map((_, i) => (
            <div key={i} className="relative aspect-[4/3] overflow-hidden rounded-xl bg-muted animate-pulse" />
          ))}
        </div>
      </section>
    )
  }

if (collections.length === 0) {
    return null
  }

// Show up to 6 collections
  const displayCollections = collections.slice(0, 6)

return (
    <section className="py-16 px-4 container mx-auto">
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-8">
        <div>
          <h2 className="text-3xl md:text-4xl font-bold text-foreground">Shop by Collection</h2>
          <p className="text-muted-foreground mt-2">Explore our curated collections</p>
        </div>
        <Button asChild variant="ghost" className="hidden md:flex items-center gap-2 text-foreground hover:text-foreground/70">
          <Link href="/collections">
            View All
            <ArrowRight className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {displayCollections.map((collection) => (
          <Link key={collection._id} href={`/collections/${collection.slug}`} className="group">
            <div className="relative aspect-[4/3] overflow-hidden rounded-xl">
              {collection.image ? (
                <Image
                  src={collection.image}
                  alt={collection.name}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                />
              ) : (
                <div className="absolute inset-0 bg-gradient-to-br from-primary/30 via-primary/15 to-muted transition-all duration-500 group-hover:from-primary/40 group-hover:via-primary/20" />
              )}
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
              <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
                <h3 className="text-xl md:text-2xl font-bold text-white drop-shadow-lg mb-1">
                  {collection.name}
                </h3>
                {collection.productCount > 0 && (
                  <p className="text-white/80 text-sm">
                    {collection.productCount} {collection.productCount === 1 ? "product" : "products"}
                  </p>
                )}
              </div>
            </div>
          </Link>
        ))}
      </div>

<div className="mt-8 flex justify-center md:hidden">
        <Button asChild variant="outline" className="min-w-[200px]">
          <Link href="/collections">
            View All Collections
            <ArrowRight className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/conditional-store-chrome.tsx"
'use client'

import { usePathname } from 'next/navigation'
import { Navbar } from '@/components/navbar'
import { CartDrawer } from '@/components/cart-drawer'

// Routes that should NOT show the storefront navbar / cart drawer.
const HIDDEN_CHROME_ROUTES = ['/checkout', '/success']

export function ConditionalNavbar() {
  const pathname = usePathname()
  const hideChrome = HIDDEN_CHROME_ROUTES.some((route) => pathname?.startsWith(route))

if (hideChrome) return null
  return <Navbar />
}

export function ConditionalCartDrawer() {
  const pathname = usePathname()
  const hideChrome = HIDDEN_CHROME_ROUTES.some((route) => pathname?.startsWith(route))

if (hideChrome) return null
  return <CartDrawer />
}
[V0_FILE]typescriptreact:file="components/custom-theme-provider.tsx"
"use client"

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

type Theme = "light" | "dark"

type ThemeContextType = {
  theme: Theme
  toggleTheme: () => void
  setTheme: (theme: Theme) => void
  mounted: boolean
}

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

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

useEffect(() => {
    setMounted(true)
    setThemeState("light")
    document.documentElement.classList.remove("dark")
  }, [])

const setTheme = (newTheme: Theme) => {
    setThemeState(newTheme)

if (newTheme === "dark") {
      document.documentElement.classList.add("dark")
    } else {
      document.documentElement.classList.remove("dark")
    }
  }

const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light"
    setTheme(newTheme)
  }

return <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, mounted }}>{children}</ThemeContext.Provider>
}

export function useCustomTheme() {
  const context = useContext(ThemeContext)
  if (context === undefined) {
    throw new Error("useCustomTheme must be used within CustomThemeProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/design-mode-toggle.tsx"
"use client"

import { useDesignMode } from "@/contexts/design-mode-context"
import { useDemoDomain } from "@/hooks/use-demo-domain"
import { Button } from "@/components/ui/button"
import { MousePointer2, Eye } from "lucide-react"

export function DesignModeToggle() {
  const { isDemoMode, isLoaded } = useDemoDomain()
  const { isSelectionMode, setSelectionMode } = useDesignMode()

// Don't render anything until we know if we're on a demo domain
  // This prevents hydration mismatches
  if (!isLoaded || !isDemoMode) {
    return null
  }

return (
    <div
      data-design-mode-toggle
      className="fixed bottom-4 right-4 z-[10000] flex items-center gap-1 rounded-full bg-neutral-900 p-1 shadow-xl ring-1 ring-white/10"
    >
      <button
        onClick={() => setSelectionMode(false)}
        className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all ${
          !isSelectionMode
            ? "bg-white text-neutral-900 shadow-md"
            : "text-neutral-400 hover:text-white"
        }`}
      >
        <Eye className="h-4 w-4" />
        Preview
      </button>
      <button
        onClick={() => setSelectionMode(true)}
        className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all ${
          isSelectionMode
            ? "bg-white text-neutral-900 shadow-md"
            : "text-neutral-400 hover:text-white"
        }`}
      >
        <MousePointer2 className="h-4 w-4" />
        Select
      </button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/element-selector.tsx"
"use client"

import { useEffect, useState, useCallback } from "react"
import { useDesignMode } from "@/contexts/design-mode-context"
import { useDemoDomain } from "@/hooks/use-demo-domain"

interface OverlayPosition {
  top: number
  left: number
  width: number
  height: number
}

export function ElementSelector() {
  const { isDemoMode, isLoaded } = useDemoDomain()
  const { isSelectionMode, selectedElement, setSelectedElement, sendElementToParent } = useDesignMode()
  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null)
  const [hoverPosition, setHoverPosition] = useState<OverlayPosition | null>(null)
  const [selectedPosition, setSelectedPosition] = useState<OverlayPosition | null>(null)

const getElementPosition = useCallback((element: HTMLElement): OverlayPosition => {
    const rect = element.getBoundingClientRect()
    return {
      top: rect.top + window.scrollY,
      left: rect.left + window.scrollX,
      width: rect.width,
      height: rect.height,
    }
  }, [])

const updatePositions = useCallback(() => {
    if (hoveredElement) {
      setHoverPosition(getElementPosition(hoveredElement))
    }
    if (selectedElement) {
      setSelectedPosition(getElementPosition(selectedElement))
    }
  }, [hoveredElement, selectedElement, getElementPosition])

// Update positions on scroll/resize
  useEffect(() => {
    if (!isSelectionMode) return

window.addEventListener("scroll", updatePositions, true)
    window.addEventListener("resize", updatePositions)

return () => {
      window.removeEventListener("scroll", updatePositions, true)
      window.removeEventListener("resize", updatePositions)
    }
  }, [isSelectionMode, updatePositions])

// Handle mouse move for hover effect
  useEffect(() => {
    if (!isSelectionMode || !isDemoMode) return

const handleMouseMove = (e: MouseEvent) => {
      const target = e.target as HTMLElement

// Ignore the overlay itself and design mode UI
      if (
        target.closest("[data-element-selector]") ||
        target.closest("[data-design-mode-toggle]")
      ) {
        setHoveredElement(null)
        setHoverPosition(null)
        return
      }

if (target !== hoveredElement) {
        setHoveredElement(target)
        setHoverPosition(getElementPosition(target))
      }
    }

const handleMouseLeave = () => {
      setHoveredElement(null)
      setHoverPosition(null)
    }

document.addEventListener("mousemove", handleMouseMove)
    document.addEventListener("mouseleave", handleMouseLeave)

return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseleave", handleMouseLeave)
    }
  }, [isSelectionMode, isDemoMode, hoveredElement, getElementPosition])

// Handle click to select
  useEffect(() => {
    if (!isSelectionMode || !isDemoMode) return

const handleClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement

// Ignore design mode UI elements
      if (
        target.closest("[data-element-selector]") ||
        target.closest("[data-design-mode-toggle]")
      ) {
        return
      }

e.preventDefault()
      e.stopPropagation()

setSelectedElement(target)
      setSelectedPosition(getElementPosition(target))
      sendElementToParent(target)
    }

document.addEventListener("click", handleClick, true)

return () => {
      document.removeEventListener("click", handleClick, true)
    }
  }, [isSelectionMode, isDemoMode, setSelectedElement, getElementPosition, sendElementToParent])

// Keyboard navigation
  useEffect(() => {
    if (!isSelectionMode || !isDemoMode) return

const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setSelectedElement(null)
        setSelectedPosition(null)
        return
      }

if (!selectedElement) return

if (e.key === "ArrowUp" && selectedElement.parentElement) {
        e.preventDefault()
        const parent = selectedElement.parentElement
        setSelectedElement(parent)
        setSelectedPosition(getElementPosition(parent))
        sendElementToParent(parent)
      }

if (e.key === "ArrowDown" && selectedElement.firstElementChild) {
        e.preventDefault()
        const child = selectedElement.firstElementChild as HTMLElement
        setSelectedElement(child)
        setSelectedPosition(getElementPosition(child))
        sendElementToParent(child)
      }
    }

document.addEventListener("keydown", handleKeyDown)

return () => {
      document.removeEventListener("keydown", handleKeyDown)
    }
  }, [isSelectionMode, isDemoMode, selectedElement, setSelectedElement, getElementPosition, sendElementToParent])

// Clear state when selection mode is disabled
  useEffect(() => {
    if (!isSelectionMode) {
      setHoveredElement(null)
      setHoverPosition(null)
      setSelectedPosition(null)
    }
  }, [isSelectionMode])

// Don't render until loaded and only on demo domains with selection mode active
  if (!isLoaded || !isDemoMode || !isSelectionMode) {
    return null
  }

return (
    <>
      {/* Hover overlay */}
      {hoverPosition && hoveredElement !== selectedElement && (
        <div
          data-element-selector="hover"
          className="pointer-events-none fixed z-[9998] border-2 border-blue-400 bg-blue-400/10 transition-all duration-75"
          style={{
            top: hoverPosition.top - window.scrollY,
            left: hoverPosition.left - window.scrollX,
            width: hoverPosition.width,
            height: hoverPosition.height,
          }}
        />
      )}

{/* Selected overlay */}
      {selectedPosition && selectedElement && (() => {
        const viewportTop = selectedPosition.top - window.scrollY
        const isNearTop = viewportTop < 40
        
        return (
          <div
            data-element-selector="selected"
            className="pointer-events-none fixed z-[9999]"
            style={{
              top: viewportTop,
              left: selectedPosition.left - window.scrollX,
              width: selectedPosition.width,
              height: selectedPosition.height,
            }}
          >
            {/* Border */}
            <div className="absolute inset-0 border-2 border-blue-600 bg-blue-600/5" />

{/* Info tooltip - position below if near top of viewport */}
            <div 
              className={`absolute left-0 flex items-center gap-2 rounded bg-blue-600 px-2 py-1 text-xs text-white shadow-lg ${
                isNearTop ? 'top-full mt-1' : '-top-8'
              }`}
            >
              <span className="font-mono font-semibold">{selectedElement.tagName.toLowerCase()}</span>
              {selectedElement.id && (
                <span className="text-blue-200">#{selectedElement.id}</span>
              )}
              {selectedElement.className && typeof selectedElement.className === "string" && (
                <span className="max-w-[150px] truncate text-blue-200">
                  .{selectedElement.className.split(" ")[0]}
                </span>
              )}
            </div>

{/* Resize handles (visual only) */}
            <div className="absolute -left-1 -top-1 h-2 w-2 rounded-full bg-blue-600" />
            <div className="absolute -right-1 -top-1 h-2 w-2 rounded-full bg-blue-600" />
            <div className="absolute -bottom-1 -left-1 h-2 w-2 rounded-full bg-blue-600" />
            <div className="absolute -bottom-1 -right-1 h-2 w-2 rounded-full bg-blue-600" />
          </div>
        )
      })()}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/featured-products-page-client.tsx"
"use client"

import type React from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useCart } from "@/contexts/cart-context"
import { ShoppingCart, Loader2, ChevronLeft, ChevronRight } from "lucide-react"
import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { getFeaturedProducts } from "@/services/api"
import { useLanguage } from "@/contexts/language-context"
import { getDisplayPricing } from "@/lib/product-pricing"
import { ProductPrice, PromotionBadge } from "@/components/product-price"

export function FeaturedProductsPageClient() {
  const [products, setProducts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [currentPage, setCurrentPage] = useState(1)
  const [pagination, setPagination] = useState<any>(null)
  const [addingProducts, setAddingProducts] = useState<Set<string>>(new Set())

const { addItem } = useCart()
  const { t, formatPrice, getProductCTA } = useLanguage()
  const router = useRouter()
  const limit = 20

useEffect(() => {
    const fetchProducts = async () => {
      try {
        setLoading(true)
        setError(null)

const response = await getFeaturedProducts(currentPage, limit)

if (response.status === "success") {
          setProducts(response.data.products)
          setPagination(response.data.pagination)
        } else {
          throw new Error("Failed to fetch featured products")
        }
      } catch (err) {
        console.error("Error fetching featured products:", err)
        setError("Failed to load featured products")
      } finally {
        setLoading(false)
      }
    }

fetchProducts()
  }, [currentPage])

const handleAddToCart = async (product: any, event: React.MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()

const pricing = getDisplayPricing(product)

if (pricing.requiresVariantSelection) {
      router.push(`/product/${product._id}`)
      return
    }

setAddingProducts((prev) => new Set(prev).add(product._id))

try {
      await addItem({
        id: product._id,
        variantId: pricing.variantId,
        variantIndex: pricing.variantIndex,
        quantity: 1,
        price: pricing.cartPrice,
        originalPrice: pricing.cartOriginalPrice,
        isOnSale: pricing.cartIsOnSale,
        discountSource: pricing.discountSource,
        promotionName: pricing.promotion?.name,
        name: product.name,
        images: product.images,
        description: product.description,
      })
    } finally {
      setAddingProducts((prev) => {
        const newSet = new Set(prev)
        newSet.delete(product._id)
        return newSet
      })
    }
  }

const handlePageChange = (newPage: number) => {
    setCurrentPage(newPage)
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

if (loading && products.length === 0) {
    return (
      <div className="min-h-screen bg-background py-8">
        <div className="container mx-auto px-4">
          <div className="text-center py-20">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
            <p className="text-muted-foreground">{t("products.loading")}</p>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background py-8">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">{t("featured.title")}</h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">{t("featured.subtitle")}</p>
        </div>

{/* Results Count */}
        {pagination ? (
          <div className="mb-6 text-muted-foreground">
            {t("products.showing")} {(currentPage - 1) * limit + 1} - {Math.min(currentPage * limit, pagination.total)}{" "}
            {t("products.of")} {pagination.total} {t("products.products")}
          </div>
        ) : null}

{/* Products Grid */}
        {error ? (
          <div className="text-center py-20">
            <p className="text-muted-foreground text-lg">{t("featured.error")}</p>
          </div>
        ) : products.length === 0 ? (
          <div className="text-center py-20">
            <p className="text-muted-foreground text-lg">{t("featured.notFound")}</p>
          </div>
        ) : (
          <>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
              {products.map((product) => {
                const pricing = getDisplayPricing(product)

const isAddingThisProduct = addingProducts.has(product._id)
                const isInStock = product.available
                const needsSelection = pricing.requiresVariantSelection

return (
                  <div key={product._id} className="h-full">
                    <Card className="group overflow-hidden hover:shadow-lg transition-all duration-300 border border-border bg-card h-full flex flex-col relative">
                      <CardContent className="p-0 flex flex-col h-full">
                        <div className="relative overflow-hidden">
                          <Link href={`/product/${product._id}`}>
                            <img
                              src={product.images[0] || "/placeholder.svg"}
                              alt={product.name}
                              className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer"
                            />
                          </Link>

<Badge className="absolute top-4 right-4 bg-yellow-500 text-black">
                            {t("common.featured")}
                          </Badge>

<div className="absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                            <Button
                              type="button"
                              className="bg-card text-foreground hover:bg-muted border border-border"
                              onClick={(e) => handleAddToCart(product, e)}
                              disabled={(!isInStock && !needsSelection) || isAddingThisProduct}
                            >
                              {isAddingThisProduct ? (
                                <Loader2 className="w-4 h-4 animate-spin mr-2" />
                              ) : (
                                <ShoppingCart className="w-4 h-4 mr-2" />
                              )}
                              {needsSelection
                                ? t("productDetails.selectOptions")
                                : isInStock
                                  ? getProductCTA(product.productKind)
                                  : t("cart.outOfStock")}
                            </Button>
                          </div>
                        </div>

<div className="p-6 flex flex-col flex-grow">
                          <Link href={`/product/${product._id}`}>
                            <h3 className="font-semibold text-lg text-foreground mb-2 group-hover:text-muted-foreground transition-colors cursor-pointer line-clamp-2 h-14 leading-7">
                              {product.name}
                            </h3>
                          </Link>

<p className="text-muted-foreground text-sm mb-4 line-clamp-2 h-10 leading-5">
                            {product.description}
                          </p>

<div className="mt-auto">
                            <Button
                              type="button"
                              className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
                              onClick={(e) => handleAddToCart(product, e)}
                              disabled={(!isInStock && !needsSelection) || isAddingThisProduct}
                            >
                              {isAddingThisProduct ? (
                                <Loader2 className="w-4 h-4 animate-spin mr-2" />
                              ) : needsSelection ? (
                                t("productDetails.selectOptions")
                              ) : isInStock ? (
                                getProductCTA(product.productKind)
                              ) : (
                                t("cart.outOfStock")
                              )}
                            </Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                )
              })}
            </div>

{/* Pagination */}
            {pagination && pagination.totalPages > 1 && (
              <div className="flex justify-center items-center gap-2 mt-12">
                <Button
                  variant="outline"
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={currentPage === 1 || loading}
                  className="border-border bg-card text-foreground hover:bg-muted"
                >
                  <ChevronLeft className="w-4 h-4" />
                  {t("common.previous")}
                </Button>

<div className="flex gap-2">
                  {Array.from({ length: Math.min(5, pagination.totalPages) }, (_, i) => {
                    let pageNum
                    if (pagination.totalPages <= 5) {
                      pageNum = i + 1
                    } else if (currentPage <= 3) {
                      pageNum = i + 1
                    } else if (currentPage >= pagination.totalPages - 2) {
                      pageNum = pagination.totalPages - 4 + i
                    } else {
                      pageNum = currentPage - 2 + i
                    }

return (
                      <Button
                        key={pageNum}
                        variant={currentPage === pageNum ? "default" : "outline"}
                        onClick={() => handlePageChange(pageNum)}
                        disabled={loading}
                        className={
                          currentPage === pageNum
                            ? "bg-primary text-primary-foreground"
                            : "border-border bg-transparent hover:bg-muted text-foreground"
                        }
                      >
                        {pageNum}
                      </Button>
                    )
                  })}
                </div>

<Button
                  variant="outline"
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === pagination.totalPages || loading}
                  className="border-border bg-card text-foreground hover:bg-muted"
                >
                  {t("common.next")}
                  <ChevronRight className="w-4 h-4" />
                </Button>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/featured-products.tsx"
"use client"

import type React from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ShoppingCart, Loader2 } from "lucide-react"
import { useCart } from "@/contexts/cart-context"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState, useEffect } from "react"
import { getFeaturedProducts, getStoreProducts } from "@/services/api"
import { useLanguage } from "@/contexts/language-context"
import { getFeaturedProductsConfig } from "@/lib/homepage-config"
import { getDisplayPricing } from "@/lib/product-pricing"
import { ProductPrice, PromotionBadge } from "@/components/product-price"

function FeaturedProductsComponent() {
  const [products, setProducts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const { addItem } = useCart()
  const [addingProducts, setAddingProducts] = useState<Set<string>>(new Set())
  const { t, formatPrice, getProductCTA } = useLanguage()
  const router = useRouter()
  const cfg = getFeaturedProductsConfig()

useEffect(() => {
    const fetchProducts = async () => {
      try {
        setLoading(true)
        setError(null)

const featuredResponse = await getFeaturedProducts(1, 6)

if (featuredResponse.status === "success") {
          const featuredProducts = featuredResponse.data.products

if (featuredProducts.length >= 6) {
            setProducts(featuredProducts.slice(0, 6))
          } else {
            const regularResponse = await getStoreProducts(1, 6 - featuredProducts.length)

if (regularResponse.status === "success") {
              const regularProducts = regularResponse.data.products
              const combinedProducts = [
                ...featuredProducts,
                ...regularProducts.filter((rp: any) => !featuredProducts.some((fp: any) => fp._id === rp._id)),
              ].slice(0, 6)

setProducts(combinedProducts)
            } else {
              setProducts(featuredProducts)
            }
          }
        } else {
          throw new Error("Failed to fetch featured products")
        }
      } catch (err) {
        console.error("Error fetching products:", err)
        setError("Failed to load products")
      } finally {
        setLoading(false)
      }
    }

fetchProducts()
  }, [])

const handleAddToCart = async (product: any, event: React.MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()

const pricing = getDisplayPricing(product)

if (pricing.requiresVariantSelection) {
      router.push(`/product/${product._id}`)
      return
    }

setAddingProducts((prev) => new Set(prev).add(product._id))

if (!cfg.visible) return null

if (loading) {
    return (
      <section className={cfg.section.className}>
        <div className={cfg.container.className}>
          <div className="text-center">
            <div className={cfg.loading.className}></div>
            <p className="text-gray-600 dark:text-gray-400">{t("common.loading")}</p>
          </div>
        </div>
      </section>
    )
  }

if (error || !products || products.length === 0) {
    return (
      <section className={cfg.section.className}>
        <div className={cfg.container.className}>
          <div className={cfg.headerWrapper.className}>
            <h2 className={cfg.title.className}>{t(cfg.title.textKey || "featured.title")}</h2>
            <p className={cfg.subtitle.className}>
              {cfg.subtitle.text || "Handpicked items from our store"}
            </p>
          </div>
          <div className="text-center">
            <p className="text-gray-600 dark:text-gray-400">{t("products.notFound")}</p>
          </div>
        </div>
      </section>
    )
  }

return (
    <section className={cfg.section.className}>
      <div className={cfg.container.className}>
        <div className={cfg.headerWrapper.className}>
          <h2 className={cfg.title.className}>{t(cfg.title.textKey || "featured.title")}</h2>
          <p className={cfg.subtitle.className}>{cfg.subtitle.text || "Handpicked items from our store"}</p>
        </div>

<div className={cfg.layout.className}>
          {products.map((product) => {
            const pricing = getDisplayPricing(product)

const isAddingThisProduct = addingProducts.has(product._id)
            const isInStock = product.available
            const needsSelection = pricing.requiresVariantSelection

return (
              <div key={product._id} className="h-full">
                <Card className={cfg.productCard.className}>
                  <CardContent className="p-0 flex flex-col h-full">
                    <div className="relative overflow-hidden">
                      <Link href={`/product/${product._id}`}>
                        <img
                          src={product.images[0] || "/placeholder.svg?height=300&width=300"}
                          alt={product.name}
                          className={cfg.productCard.imageClassName}
                        />
                      </Link>

{product.featured ? (
                        <Badge className={cfg.featuredBadge.className}>
                          {t("common.featured")}
                        </Badge>
                      ) : null}

<div className={cfg.productCard.overlayClassName}>
                        <Button
                          type="button"
                          className={cfg.quickAddButton.className}
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={(!isInStock && !needsSelection) || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : (
                            <ShoppingCart className="w-4 h-4 mr-2" />
                          )}
                          {needsSelection
                            ? t("productDetails.selectOptions")
                            : isInStock
                              ? getProductCTA(product.productKind)
                              : t("cart.outOfStock")}
                        </Button>
                      </div>
                    </div>

<div className="p-6 flex flex-col flex-grow">
                      <Link href={`/product/${product._id}`}>
                        <h3 className={cfg.productName.className}>
                          {product.name}
                        </h3>
                      </Link>

<div className="mt-auto">
                        <Button
                          type="button"
                          className={cfg.addToCartButton.className}
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={(!isInStock && !needsSelection) || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : needsSelection ? (
                            t("productDetails.selectOptions")
                          ) : isInStock ? (
                            getProductCTA(product.productKind)
                          ) : (
                            t("cart.outOfStock")
                          )}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )
          })}
        </div>

<div className={cfg.bottomButtons.className}>
          {cfg.viewAllFeaturedButton.visible && (
            <Link href={cfg.viewAllFeaturedButton.href} className="w-full md:w-auto">
              <Button
                size="lg"
                variant="outline"
                className={cfg.viewAllFeaturedButton.className}
              >
                {t(cfg.viewAllFeaturedButton.textKey || "products.viewAllFeatured")}
              </Button>
            </Link>
          )}
          {cfg.viewAllProductsButton.visible && (
            <Link href={cfg.viewAllProductsButton.href} className="w-full md:w-auto">
              <Button
                size="lg"
                variant="outline"
                className={cfg.viewAllProductsButton.className}
              >
                {t(cfg.viewAllProductsButton.textKey || "products.viewAllProducts")}
              </Button>
            </Link>
          )}
        </div>
      </div>
    </section>
  )
}

export { FeaturedProductsComponent as FeaturedProducts }
export default FeaturedProductsComponent
[V0_FILE]typescriptreact:file="components/footer.tsx"
"use client"

import { Mail, Phone, MapPin } from "lucide-react"
import { getStoreName } from "@/lib/store-name"
import { useLanguage } from "@/contexts/language-context"
import { useCompliance } from "@/contexts/compliance-context"
import storeConfig from "@/config/store"
import Image from "next/image"

export function Footer() {
  const storeName = getStoreName()
  const { t } = useLanguage()
  const { compliance } = useCompliance()
  const hasLogo = storeConfig.logo && storeConfig.logo.trim() !== ""

const hasTerms = compliance.termsOfService && compliance.termsOfService.trim() !== ""
  const hasPrivacy = compliance.privacyPolicy && compliance.privacyPolicy.trim() !== ""
  const hasReturn = compliance.returnPolicy && compliance.returnPolicy.trim() !== ""

return (
    <footer className="bg-card text-card-foreground border-t border-border py-16">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div>
            <a href="/" className="flex items-center gap-3 mb-6 hover:opacity-80 transition-opacity">
              {hasLogo ? (
                <Image
                  src={storeConfig.logo}
                  alt={storeName}
                  width={150}
                  height={50}
                  className="h-10 w-auto object-contain"
                />
              ) : null}
              <h3 className="text-2xl font-bold text-foreground">{storeName}</h3>
            </a>
            <p className="text-muted-foreground mb-6">
              Your destination for innovative products that shape tomorrow. Quality, style, and innovation in every
              purchase.
            </p>
          </div>

<div>
            <h4 className="text-lg font-semibold mb-6 text-foreground">{t("footer.quickLinks")}</h4>
            <ul className="space-y-3">
              <li>
                <a
                  href="/about"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  {t("footer.aboutUs")}
                </a>
              </li>
              <li>
                <a
                  href="/products"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  {t("nav.products")}
                </a>
              </li>
              <li>
                <a
                  href="/collections"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Collections
                </a>
              </li>
              <li>
                <a
                  href="/bundles"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Bundles
                </a>
              </li>
            </ul>
          </div>

<div>
            <h4 className="text-lg font-semibold mb-6 text-foreground">Legal</h4>
            <ul className="space-y-3">
              {hasTerms && (
                <li>
                  <a
                    href="/terms-of-service"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                  >
                    Terms of Service
                  </a>
                </li>
              )}
              {hasPrivacy && (
                <li>
                  <a
                    href="/privacy-policy"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                  >
                    Privacy Policy
                  </a>
                </li>
              )}
              {hasReturn && (
                <li>
                  <a
                    href="/return-policy"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                  >
                    Return Policy
                  </a>
                </li>
              )}
              {!hasTerms && !hasPrivacy && !hasReturn && (
                <li>
                  <span className="text-muted-foreground/50">No policies available</span>
                </li>
              )}
            </ul>
          </div>

<div>
            <h4 className="text-lg font-semibold mb-6 text-foreground">Contact Info</h4>
            <div className="space-y-4">
              <div className="flex items-center gap-3">
                <MapPin className="w-5 h-5 text-secondary" />
                <span className="text-muted-foreground">123 Future Street, Tech City, TC 12345</span>
              </div>
              <div className="flex items-center gap-3">
                <Phone className="w-5 h-5 text-secondary" />
                <span className="text-muted-foreground">+1 (555) 123-4567</span>
              </div>
              <div className="flex items-center gap-3">
                <Mail className="w-5 h-5 text-secondary" />
                <span className="text-muted-foreground">
                  hello@{storeName.toLowerCase().replace(/\s+/g, "")}.com
                </span>
              </div>
            </div>
          </div>
        </div>

<div className="border-t border-border mt-12 pt-8 text-center">
          <p className="text-muted-foreground">
            <a
              href="https://www.agorabuilder.com"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:text-foreground transition-colors inline-flex items-center gap-2"
            >
              Powered by <span className="font-semibold text-foreground">Agora</span>
            </a>
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, Star } from "lucide-react"
import { getStoreName } from "@/lib/store-name"
import Link from "next/link"
import { useLanguage } from "@/contexts/language-context"
import { getHeroConfig } from "@/lib/homepage-config"

export function Hero() {
  const storeName = getStoreName()
  const { t } = useLanguage()
  const cfg = getHeroConfig()

if (!cfg.visible) return null

return (
    <section className={cfg.section.className}>
      <div className={cfg.container.className}>
        <div className="w-full">
          <div className={cfg.contentWrapper.className}>
            <div className="space-y-8">
              {cfg.badge.visible && (
                <Badge
                  variant="outline"
                  className={cfg.badge.className}
                >
                  {cfg.badge.icon === "Star" && <Star className={cfg.badge.iconClassName} />}
                  {cfg.badge.text}
                </Badge>
              )}

<div>
                <h1 className={cfg.title.className}>
                  {cfg.title.showStoreName && (
                    <span className={cfg.title.storeNameClassName}>{storeName}</span>
                  )}
                </h1>

<p className={cfg.subtitle.className}>
                  {t(cfg.subtitle.textKey || "hero.subtitle")}
                </p>
              </div>

<div className={cfg.buttonsContainer.className}>
                {cfg.primaryButton.visible && (
                  <Link href={cfg.primaryButton.href}>
                    <Button
                      size="lg"
                      className={cfg.primaryButton.className}
                    >
                      {t(cfg.primaryButton.textKey || "hero.shopNow")}
                      {cfg.primaryButton.icon === "ArrowRight" && (
                        <ArrowRight className={cfg.primaryButton.iconClassName} />
                      )}
                    </Button>
                  </Link>
                )}
                {cfg.secondaryButton.visible && (
                  <Link href={cfg.secondaryButton.href}>
                    <Button
                      size="lg"
                      variant="outline"
                      className={cfg.secondaryButton.className}
                    >
                      {t(cfg.secondaryButton.textKey || "hero.exploreCategories")}
                    </Button>
                  </Link>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/iframe-state-notifier.tsx"
"use client"

import { useEffect, useRef } from "react"

type IframeState = "loading" | "ready" | "error"

interface IframeStateMessage {
  type: "IFRAME_STATE_CHANGE"
  status: IframeState
  error?: string
  route?: {
    pathname: string
    search: string
    hash: string
    fullUrl: string
  }
  timestamp: number
}

function isInIframe(): boolean {
  try {
    return typeof window !== "undefined" && window.self !== window.top
  } catch {
    // If we can't access window.top due to cross-origin restrictions, we're in an iframe
    return true
  }
}

function notify(status: IframeState, errorDetails?: string) {
  if (typeof window === "undefined") {
    return
  }

// Always try to send message - even if not in iframe, it won't cause errors
  const message: IframeStateMessage = {
    type: "IFRAME_STATE_CHANGE",
    status,
    error: errorDetails,
    route: {
      pathname: window.location.pathname,
      search: window.location.search,
      hash: window.location.hash,
      fullUrl: window.location.href,
    },
    timestamp: Date.now(),
  }

try {
    window.parent.postMessage(message, "*")
  } catch {
    // Silently fail if postMessage is blocked
  }
}

function checkForFatalError(): boolean {
  // Check for Next.js error page
  const errorH1 = document.querySelector(".next-error-h1")
  if (errorH1) {
    const errorMsgElement = errorH1.nextElementSibling
    const errorMsg = errorMsgElement?.textContent || "Fatal Server Error"
    notify("error", errorMsg)
    return true
  }

// Check for Next.js dev error overlay
  const devErrorPortal = document.querySelector("nextjs-portal")
  if (devErrorPortal) {
    notify("error", "Next.js rendering or hydration error.")
    return true
  }

return false
}

export function IframeStateNotifier() {
  const hasNotifiedReady = useRef(false)

// Send ready state on mount - this means the React app has hydrated
  useEffect(() => {
    // Immediate check for fatal errors
    if (checkForFatalError()) {
      return
    }

// Check if page is still loading (v0-loading class on body)
    const isV0Loading = document.body.classList.contains("v0-loading")
    
    if (isV0Loading) {
      notify("loading")

const observer = new MutationObserver((mutations) => {
        // Check for fatal errors on every DOM change
        if (checkForFatalError()) {
          observer.disconnect()
          return
        }

// Check if v0-loading class was removed
        for (const mutation of mutations) {
          if (
            mutation.attributeName === "class" &&
            !document.body.classList.contains("v0-loading")
          ) {
            if (!hasNotifiedReady.current) {
              hasNotifiedReady.current = true
              notify("ready")
            }
            observer.disconnect()
            return
          }
        }
      })

observer.observe(document.body, {
        attributes: true,
        childList: true,
        subtree: true,
      })

return () => observer.disconnect()
    } else {
      // Page is already ready - send ready immediately
      if (!hasNotifiedReady.current) {
        hasNotifiedReady.current = true
        notify("ready")
      }
    }
  }, [])

// Global error handlers
  useEffect(() => {
    const handleError = (event: ErrorEvent) => {
      notify("error", event.message || "A runtime error occurred in the preview.")
    }

const handleRejection = (event: PromiseRejectionEvent) => {
      notify(
        "error",
        event.reason ? event.reason.toString() : "An unhandled promise rejection occurred."
      )
    }

window.addEventListener("error", handleError)
    window.addEventListener("unhandledrejection", handleRejection)

return () => {
      window.removeEventListener("error", handleError)
      window.removeEventListener("unhandledrejection", handleRejection)
    }
  }, [])

// Fallback: Also send ready when window fully loads
  useEffect(() => {
    const handleLoad = () => {
      if (!hasNotifiedReady.current) {
        hasNotifiedReady.current = true
        notify("ready")
      }
    }

// If document is already complete, send ready
    if (document.readyState === "complete") {
      handleLoad()
    } else {
      window.addEventListener("load", handleLoad)
      return () => window.removeEventListener("load", handleLoad)
    }
  }, [])

// Notify on route changes
  useEffect(() => {
    const handleRouteChange = () => {
      // Reset and notify ready on route change
      hasNotifiedReady.current = true
      notify("ready")
    }

// Listen for popstate (back/forward navigation)
    window.addEventListener("popstate", handleRouteChange)

return () => {
      window.removeEventListener("popstate", handleRouteChange)
    }
  }, [])

return null
}
[V0_FILE]typescriptreact:file="components/language-switcher.tsx"
"use client"

import { useLanguage } from "@/contexts/language-context"
import { Button } from "@/components/ui/button"
import { Languages } from "lucide-react"

export function LanguageSwitcher() {
  const { language, setLanguage, t } = useLanguage()

const toggleLanguage = () => {
    setLanguage(language === "en" ? "ar" : "en")
  }

return (
    <Button variant="ghost" size="sm" onClick={toggleLanguage} className="flex items-center gap-2">
      <Languages className="w-4 h-4" />
      <span className="hidden sm:inline">{language === "en" ? t("arabic") : t("english")}</span>
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/markdown-content.tsx"
"use client"

import { useMemo } from "react"

interface MarkdownContentProps {
  content: string
  className?: string
}

// Simple markdown parser for basic formatting
function parseMarkdown(text: string): string {
  if (!text) return ""

let html = text
    // Escape HTML to prevent XSS
    .replace(/&/g, "&")
    .replace(/</g, "<")
    .replace(/>/g, ">")

// Headings (only # for h1)
  html = html.replace(/^# (.+)$/gm, '<h1 class="text-xl font-semibold leading-tight text-foreground mt-6 mb-3 first:mt-0">$1</h1>')

// Horizontal rule
  html = html.replace(/^---$/gm, '<hr class="my-4 border-border" />')

// Bold
  html = html.replace(/\*\*(.+?)\*\*/g, '<strong class="font-semibold text-foreground">$1</strong>')

// Italic
  html = html.replace(/\*(.+?)\*/g, '<em class="italic">$1</em>')

// Inline code
  html = html.replace(/`([^`]+)`/g, '<code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground">$1</code>')

// Links
  html = html.replace(
    /\[([^\]]+)\]$([^)]+)$/g,
    '<a href="$2" class="text-primary underline underline-offset-2 hover:text-primary/80 break-words" target="_blank" rel="noopener noreferrer">$1</a>'
  )

// Line breaks - convert double newlines to paragraphs
  const paragraphs = html.split(/\n\n+/)
  html = paragraphs
    .map((p) => {
      const trimmed = p.trim()
      if (!trimmed) return ""
      // Don't wrap if it's already a block element
      if (
        trimmed.startsWith("<h1") ||
        trimmed.startsWith("<hr") ||
        trimmed.startsWith("<ul") ||
        trimmed.startsWith("<ol")
      ) {
        return trimmed
      }
      // Convert single newlines to <br> within paragraphs
      const withBreaks = trimmed.replace(/\n/g, "<br />")
      return `<p class="text-sm leading-6 text-muted-foreground my-2">${withBreaks}</p>`
    })
    .filter(Boolean)
    .join("\n")

return html
}

export function MarkdownContent({ content, className = "" }: MarkdownContentProps) {
  const htmlContent = useMemo(() => parseMarkdown(content), [content])

if (!content) {
    return null
  }

return (
    <div
      className={`prose prose-sm w-full max-w-[65ch] break-words ${className}`}
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/markdown-renderer.tsx"
"use client"

import { useMemo } from "react"

interface MarkdownRendererProps {
  content: string
  className?: string
}

export function MarkdownRenderer({ content, className = "" }: MarkdownRendererProps) {
  const html = useMemo(() => {
    if (!content) return ""

let processed = content

// Escape HTML entities first to prevent XSS
    processed = processed
      .replace(/&/g, "&")
      .replace(/</g, "<")
      .replace(/>/g, ">")

// Process markdown in order of complexity

// Headings: # Heading
    processed = processed.replace(
      /^# (.+)$/gm,
      '<h1 class="text-xl font-semibold leading-tight text-foreground mt-6 mb-3 first:mt-0">$1</h1>'
    )

// Divider: ---
    processed = processed.replace(
      /^---$/gm,
      '<hr class="my-4 border-border" />'
    )

// Bold: **text**
    processed = processed.replace(
      /\*\*(.+?)\*\*/g,
      '<strong class="font-semibold text-foreground">$1</strong>'
    )

// Italic: *text*
    processed = processed.replace(
      /\*(.+?)\*/g,
      '<em class="italic">$1</em>'
    )

// Inline code: `text`
    processed = processed.replace(
      /`(.+?)`/g,
      '<code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground">$1</code>'
    )

// Links: [text](url)
    processed = processed.replace(
      /\[(.+?)\]$(.+?)$/g,
      '<a href="$2" class="text-primary underline underline-offset-2 hover:text-primary/80 break-words" target="_blank" rel="noopener noreferrer">$1</a>'
    )

// Paragraphs: Split by double newlines
    const blocks = processed.split(/\n\n+/)
    processed = blocks
      .map((block) => {
        const trimmed = block.trim()
        // Skip if already wrapped in a block element
        if (
          trimmed.startsWith("<h1") ||
          trimmed.startsWith("<hr") ||
          trimmed === ""
        ) {
          return trimmed
        }
        // Wrap in paragraph, handle single line breaks within
        const withBreaks = trimmed.replace(/\n/g, "<br />")
        return `<p class="text-sm leading-6 text-muted-foreground my-2">${withBreaks}</p>`
      })
      .join("\n")

return processed
  }, [content])

if (!content) {
    return null
  }

return (
    <div
      className={`prose prose-sm w-full max-w-none md:max-w-[65ch] break-words ${className}`}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Search, ShoppingCart, Menu } from "lucide-react"
import { useState } from "react"
import { useCart } from "@/contexts/cart-context"
import { getStoreName } from "@/lib/store-name"
import { useRouter } from "next/navigation"
import { useLanguage } from "@/contexts/language-context"
import storeConfig from "@/config/store"
import Image from "next/image"

export function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const { state } = useCart()
  const router = useRouter()
  const { t } = useLanguage()

const storeName = getStoreName()
  const hasLogo = storeConfig.logo && storeConfig.logo.trim() !== ""

const handleCartClick = () => {
    router.push("/cart")
  }

return (
    <nav className="bg-card text-card-foreground border-b border-border sticky top-0 z-50">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <a
              href="/"
              className="flex items-center gap-3 hover:opacity-80 transition-opacity"
              title={storeName}
            >
              {hasLogo ? (
                <Image
                  src={storeConfig.logo}
                  alt={storeName}
                  width={120}
                  height={40}
                  className="h-8 sm:h-10 w-auto object-contain"
                  priority
                />
              ) : null}
              <span className="text-2xl font-bold text-foreground truncate max-w-[150px] sm:max-w-[200px] md:max-w-[250px] lg:max-w-[300px]">
                {storeName}
              </span>
            </a>
          </div>

<div className="hidden md:flex items-center space-x-8 ml-8 lg:ml-12">
            <a
              href="/"
              className="text-foreground hover:text-foreground/70 font-medium transition-colors"
            >
              {t("nav.home")}
            </a>
            <a
              href="/products"
              className="text-foreground hover:text-foreground/70 font-medium transition-colors"
            >
              {t("nav.products")}
            </a>
            <a
              href="/bundles"
              className="text-foreground hover:text-foreground/70 font-medium transition-colors"
            >
              Bundles
            </a>
            <a
              href="/about"
              className="text-foreground hover:text-foreground/70 font-medium transition-colors"
            >
              {t("nav.about")}
            </a>
          </div>

<div className="flex items-center space-x-4">
            <Button variant="ghost" size="sm" className="relative" onClick={handleCartClick}>
              <ShoppingCart className="w-5 h-5" />
              {state.itemCount > 0 ? (
                <Badge className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full min-w-[20px] h-5 flex items-center justify-center">
                  {state.itemCount}
                </Badge>
              ) : null}
            </Button>

<Button variant="ghost" size="sm" className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
              <Menu className="w-5 h-5" />
            </Button>
          </div>
        </div>

{isMenuOpen ? (
          <div className="md:hidden border-t border-border py-4">
            <div className="flex flex-col space-y-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder={t("nav.searchPlaceholder")}
                  className="pl-10 pr-4 py-2 w-full bg-background text-foreground border-input"
                />
              </div>
              <a
                href="/"
                className="text-foreground hover:text-foreground/70 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                {t("nav.home")}
              </a>
              <a
                href="/products"
                className="text-foreground hover:text-foreground/70 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                {t("nav.products")}
              </a>
              <a
                href="/bundles"
                className="text-foreground hover:text-foreground/70 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Bundles
              </a>
              <a
                href="/about"
                className="text-foreground hover:text-foreground/70 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                {t("nav.about")}
              </a>
            </div>
          </div>
        ) : null}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Mail } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"

export function Newsletter() {
  const { t } = useLanguage()

return (
    <section className="py-20 bg-secondary">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto text-center">
          <div className="flex justify-center mb-6">
            <div className="bg-secondary-foreground/10 rounded-full p-4">
              <Mail className="w-12 h-12 text-secondary-foreground" />
            </div>
          </div>

<h2 className="text-4xl md:text-5xl font-bold text-secondary-foreground mb-4">{t("footer.newsletter")}</h2>

<p className="text-xl text-secondary-foreground/80 mb-8 max-w-2xl mx-auto">
            Subscribe to our newsletter and get 20% off your first order plus early access to sales and new arrivals
          </p>

<form className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
            <div className="relative flex-1">
              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
              <Input
                type="email"
                name="email"
                placeholder={t("footer.emailPlaceholder")}
                className="pl-10 py-6 text-lg bg-background border-0"
                required
              />
            </div>
            <Button
              type="submit"
              size="lg"
              className="bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-6 text-lg font-semibold"
            >
              {t("footer.subscribe")}
            </Button>
          </form>

<p className="text-secondary-foreground/60 text-sm mt-4">No spam, unsubscribe at any time</p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/product-page-client.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { useCart } from "@/contexts/cart-context"
import { ShoppingCart, Truck, Shield, RotateCcw, ArrowLeft, Loader2 } from "lucide-react"
import { useState, useEffect, useMemo } from "react"
import Link from "next/link"
import { useAgoraProduct } from "@/hooks/use-agora-products"
import { VariantSelector } from "@/components/variant-selector"
import { getCategoryByIdFromList } from "@/services/api"
import type { Category } from "@/types/product"
import { useLanguage } from "@/contexts/language-context"
import { getDisplayPricing } from "@/lib/product-pricing"
import { ProductPrice, PromotionBadge } from "@/components/product-price"
import { RestockNotificationButton } from "@/components/restock-notification-button"

interface ProductPageClientProps {
  productId: string
}

export function ProductPageClient({ productId }: ProductPageClientProps) {
  const { addItem, state: cartState } = useCart()
  const { product, loading, error } = useAgoraProduct(productId)
  const [selectedImage, setSelectedImage] = useState(0)
  const [quantity, setQuantity] = useState(1)
  const [activeTab, setActiveTab] = useState("description")
  const [isAddingToCart, setIsAddingToCart] = useState(false)
  const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({})
  const [category, setCategory] = useState<Category | null>(null)
  const [subcategory, setSubcategory] = useState<Category | null>(null)
  const { t, formatPrice, getProductCTA } = useLanguage()

useEffect(() => {
    if (product?.variants && product.variants.length > 0) {
      // When the product is priced at the variant level, force an explicit
      // selection (each variant has its own price) — do not auto-select.
      if (getDisplayPricing(product).pricingMode === "variants") {
        setSelectedVariants({})
        return
      }

const initialSelection: Record<string, string> = {}
      const firstVariant = product.variants[0]

if (firstVariant.name && firstVariant.value) {
        initialSelection[firstVariant.name] = firstVariant.value
      }

setSelectedVariants(initialSelection)
    }
  }, [product])

useEffect(() => {
    const fetchCategoryDetails = async () => {
      if (!product) return

try {
        if (product.category) {
          const categoryResponse = await getCategoryByIdFromList(product.category)
          if (categoryResponse.status === "success") {
            setCategory(categoryResponse.data)
          }
        }

if (product.subcategory) {
          const subcategoryResponse = await getCategoryByIdFromList(product.subcategory)
          if (subcategoryResponse.status === "success") {
            setSubcategory(subcategoryResponse.data)
          }
        }
      } catch (error) {
        console.error("Failed to fetch category details:", error)
      }
    }

fetchCategoryDetails()
  }, [product])

const handleVariantChange = (optionName: string, value: string) => {
    setSelectedVariants((prev) => ({
      ...prev,
      [optionName]: value,
    }))
  }

const selectedVariant = useMemo(() => {
    if (!product?.variants) return null

return product.variants.find((variant) => {
      if (!variant.name || !variant.value) return false
      return selectedVariants[variant.name] === variant.value
    })
  }, [product?.variants, selectedVariants])

if (loading) {
    return (
      <div className="min-h-screen bg-background py-8">
        <div className="container mx-auto px-4">
          <div className="text-center py-20">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
            <p className="text-muted-foreground">{t("common.loading")}</p>
          </div>
        </div>
      </div>
    )
  }

if (error || !product) {
    return (
      <div className="min-h-screen bg-background py-8">
        <div className="container mx-auto px-4">
          <div className="flex items-center gap-2 mb-8">
            <Link
              href="/"
              className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
            >
              <ArrowLeft className="w-4 h-4" />
              {t("productDetails.backToHome")}
            </Link>
          </div>
          <div className="text-center py-20">
            <p className="text-muted-foreground text-lg">{t("productDetails.notFound")}</p>
            <Link href="/products">
              <Button className="mt-4 bg-primary text-primary-foreground hover:bg-primary/90">
                {t("productDetails.browseAll")}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

const images = product.images || []

// Centralized best-discount-wins pricing (product sale vs timed promotion).
  // When a discount is active the backend validates checkout against the
  // parent-level effectivePrice, so the cart uses pricing.cartPrice.
  const pricing = getDisplayPricing(product, { variant: selectedVariant })
  
  const hasVariants = product.variants && product.variants.length > 0

const isInStock = selectedVariant
    ? selectedVariant.isInStock !== false && (selectedVariant.quantity === undefined || selectedVariant.quantity > 0)
    : hasVariants
      ? // For variants-priced products with no selection, default to in-stock only if at least
        // one variant is available. This prevents "In Stock" from showing for products where
        // all variants are out of stock.
        (product.variants?.some(
          (v) => v.isInStock !== false && (v.quantity === undefined || v.quantity > 0),
        ) ?? product.available)
      : product.available

const handleAddToCart = async (event: any) => {
    event.preventDefault()

// Variants-priced products must have a variant selected so we never send the
    // parent (display-only) price to checkout.
    if (pricing.requiresVariantSelection || (hasVariants && !selectedVariant)) {
      alert(t("productDetails.selectOptions"))
      return
    }

setIsAddingToCart(true)

try {
      await addItem({
        id: product._id,
        variantId: pricing.variantId ?? selectedVariant?.id,
        variantIndex: pricing.variantIndex,
        variantLabel: selectedVariant
          ? Object.entries(selectedVariants)
              .map(([k, v]) => `${k}: ${v}`)
              .join(", ") || selectedVariant.name || selectedVariant.value
          : undefined,
        name: product.name,
        price: pricing.cartPrice,
        originalPrice: pricing.cartOriginalPrice,
        isOnSale: pricing.cartIsOnSale,
        discountSource: pricing.discountSource,
        promotionName: pricing.promotion?.name,
        images: images,
        quantity: quantity,
        description: product.description,
      })
    } finally {
      setIsAddingToCart(false)
    }
  }

return (
    <div className="min-h-screen bg-background py-8">
      <div className="container mx-auto px-4">
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 mb-8">
          <Link href="/" className="text-muted-foreground hover:text-foreground">
            {t("nav.home")}
          </Link>
          {category ? (
            <>
              <span className="text-muted-foreground">/</span>
              <Link
                href={`/categories/${category._id}`}
                className="text-muted-foreground hover:text-foreground"
              >
                {category.name}
              </Link>
            </>
          ) : null}
          {subcategory ? (
            <>
              <span className="text-muted-foreground">/</span>
              <Link
                href={`/categories/${subcategory._id}`}
                className="text-muted-foreground hover:text-foreground"
              >
                {subcategory.name}
              </Link>
            </>
          ) : null}
          <span className="text-muted-foreground">/</span>
          <span className="text-foreground">{product?.name}</span>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Product Images */}
          <div className="space-y-4">
            <div className="aspect-square bg-muted rounded-lg overflow-hidden border border-border">
              <img
                src={images[selectedImage] || "/placeholder.svg?height=500&width=500"}
                alt={product.name}
                className="w-full h-full object-cover"
              />
            </div>

{images.length > 1 && (
              <div className="grid grid-cols-4 gap-4">
                {images.slice(0, 4).map((image, index) => (
                  <button
                    key={index}
                    type="button"
                    onClick={() => setSelectedImage(index)}
                    className={`aspect-square bg-muted rounded-lg overflow-hidden border-2 transition-colors ${
                      selectedImage === index
                        ? "border-primary"
                        : "border-border hover:border-muted-foreground"
                    }`}
                  >
                    <img
                      src={image || "/placeholder.svg"}
                      alt={`${product.name} ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                  </button>
                ))}
              </div>
            )}
          </div>

{/* Product Info */}
          <div className="space-y-6">
            {pricing.hasDiscount ? (
              <PromotionBadge pricing={pricing} saleLabel={t("common.sale")} showName className="mb-4" />
            ) : null}

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

{pricing.discountSource === "promotion" && pricing.promotion?.description ? (
              <p className="text-sm text-muted-foreground -mt-2 mb-2">{pricing.promotion.description}</p>
            ) : null}

{hasVariants && (
              <div className="border-t border-border pt-6">
                <VariantSelector
                  variants={product.variants}
                  selectedVariants={selectedVariants}
                  onVariantChange={handleVariantChange}
                  basePrice={product.price}
                  formatPrice={formatPrice}
                />
              </div>
            )}

{/* Quantity and Add to Cart Form */}
            <form onSubmit={handleAddToCart} className="space-y-4">
              <div className="flex items-center gap-4">
                <span className="font-medium text-foreground">{t("productDetails.quantity")}</span>
                <div className="flex items-center border border-border rounded-lg bg-card">
                  <button
                    type="button"
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    className="px-3 py-2 hover:bg-muted text-foreground"
                    disabled={isAddingToCart}
                  >
                    -
                  </button>
                  <span className="px-4 py-2 border-x border-border text-foreground">
                    {quantity}
                  </span>
                  <button
                    type="button"
                    onClick={() => setQuantity(quantity + 1)}
                    className="px-3 py-2 hover:bg-muted text-foreground"
                    disabled={isAddingToCart}
                  >
                    +
                  </button>
                </div>
                <span className="text-sm text-muted-foreground">
                  {isInStock ? t("common.inStock") : t("cart.outOfStock")}
                  {selectedVariant?.quantity && ` (${selectedVariant.quantity} ${t("products.available")})`}
                </span>
              </div>

<div className="flex gap-4">
                <Button
                  type="submit"
                  disabled={
                    !isInStock ||
                    isAddingToCart ||
                    pricing.requiresVariantSelection ||
                    (hasVariants && !selectedVariant)
                  }
                  className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90 text-lg py-6 disabled:opacity-50"
                >
                  {isAddingToCart ? (
                    <Loader2 className="w-5 h-5 animate-spin mr-2" />
                  ) : (
                    <ShoppingCart className="w-5 h-5 mr-2" />
                  )}
                  {!isInStock
                    ? t("cart.outOfStock")
                    : pricing.requiresVariantSelection || (hasVariants && !selectedVariant)
                      ? t("productDetails.selectOptions")
                      : getProductCTA(product.productKind)}
                </Button>

{!isInStock && (product.canRestockNotify || selectedVariant?.canRestockNotify) && (
                  <RestockNotificationButton
                    productId={product._id}
                    variantIndex={
                      pricing.pricingMode === "variants" && selectedVariant
                        ? product.variants?.findIndex((v) => v === selectedVariant)
                        : undefined
                    }
                    label="Notify Me"
                    className="flex-1"
                  />
                )}
              </div>
            </form>

{/* Features */}
            <div className="grid grid-cols-3 gap-4">
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Truck className="w-4 h-4 text-foreground" />
                {t("productDetails.freeShipping")}
              </div>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Shield className="w-4 h-4 text-foreground" />
                {t("productDetails.securePayment")}
              </div>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <RotateCcw className="w-4 h-4 text-foreground" />
                {t("productDetails.easyReturns")}
              </div>
            </div>
          </div>
        </div>

{/* Product Details Tabs */}
        <div className="mt-16">
          <div className="border-b border-border">
            <nav className="flex space-x-8">
              {["description", "details"].map((tab) => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className={`py-4 px-1 border-b-2 font-medium text-sm capitalize ${
                    activeTab === tab
                      ? "border-primary text-foreground"
                      : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
                  }`}
                >
                  {t(`productDetails.${tab}`)}
                </button>
              ))}
            </nav>
          </div>

<div className="py-8">
            {activeTab === "description" && (
              <div className="prose max-w-none">
                <div
                  className="text-muted-foreground leading-relaxed"
                  dangerouslySetInnerHTML={{ __html: product.description }}
                />
              </div>
            )}

{activeTab === "details" && (
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="flex justify-between py-2 border-b border-border">
                    <span className="font-medium text-foreground">{t("productDetails.productId")}</span>
                    <span className="text-muted-foreground">{product._id}</span>
                  </div>
                  <div className="flex justify-between py-2 border-b border-border">
                    <span className="font-medium text-foreground">{t("productDetails.brand")}</span>
                    <span className="text-muted-foreground">{product.brand}</span>
                  </div>
                  {category ? (
                    <div className="flex justify-between py-2 border-b border-border">
                      <span className="font-medium text-foreground">{t("productDetails.category")}</span>
                      <Link
                        href={`/categories/${category._id}`}
                        className="text-primary hover:underline"
                      >
                        {category.name}
                      </Link>
                    </div>
                  ) : null}
                  {subcategory ? (
                    <div className="flex justify-between py-2 border-b border-border">
                      <span className="font-medium text-foreground">{t("productDetails.subcategory")}</span>
                      <Link
                        href={`/categories/${subcategory._id}`}
                        className="text-primary hover:underline"
                      >
                        {subcategory.name}
                      </Link>
                    </div>
                  ) : null}
                  <div className="flex justify-between py-2 border-b border-border">
                    <span className="font-medium text-foreground">{t("productDetails.sku")}</span>
                    <span className="text-muted-foreground">{product.sku || "N/A"}</span>
                  </div>
                  {selectedVariant && (
                    <div className="flex justify-between py-2 border-b border-border">
                      <span className="font-medium text-foreground">
                        {t("productDetails.selectedVariant")}
                      </span>
                      <span className="text-muted-foreground">
                        {selectedVariant.name || selectedVariant.id}
                      </span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/product-price.tsx"
"use client"

import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
import { hexToHsl } from "@/lib/color-utils"
import type { DisplayPricing } from "@/lib/product-pricing"

/**
 * Pick a readable text color (near-black or near-white) for a promotion's
 * custom hex badge color based on its perceived lightness.
 */
function readableTextColor(hex: string): string {
  try {
    const { l } = hexToHsl(hex)
    return l > 60 ? "#111827" : "#ffffff"
  } catch {
    return "#111827"
  }
}

interface PromotionBadgeProps {
  pricing: DisplayPricing
  /** Localized fallback label when there is no percentage to show (e.g. "Sale"). */
  saleLabel: string
  className?: string
  /** Show the promotion campaign name alongside the percentage. */
  showName?: boolean
}

/**
 * The corner badge shown on product images. Renders a campaign-styled badge
 * (using the promotion's badgeColor + name) when a promotion wins, otherwise a
 * regular sale badge. Renders nothing when there is no discount.
 */
export function PromotionBadge({ pricing, saleLabel, className, showName = false }: PromotionBadgeProps) {
  if (!pricing.hasDiscount) return null

const label = pricing.discountPercent > 0 ? `${pricing.discountPercent}% OFF` : saleLabel

if (pricing.discountSource === "promotion" && pricing.promotion) {
    const bg = pricing.promotion.badgeColor || "#a3f5dc"
    return (
      <Badge
        className={cn("border-0 font-semibold shadow-sm", className)}
        style={{ backgroundColor: bg, color: readableTextColor(bg) }}
      >
        {showName && pricing.promotion.name ? `${pricing.promotion.name} · ${label}` : label}
      </Badge>
    )
  }

return <Badge className={cn("bg-red-600 text-white border-0", className)}>{label}</Badge>
}

interface ProductPriceProps {
  pricing: DisplayPricing
  formatPrice: (price: number) => string
  className?: string
  priceClassName?: string
  originalClassName?: string
  badgeClassName?: string
  /** Whether to render the inline "% OFF" badge next to the strikethrough. */
  showInlineBadge?: boolean
  /** Localized label rendered before a "from" price (e.g. "From"). */
  fromLabel?: string
}

/**
 * The price row: current selling price + strikethrough list price + optional
 * inline discount badge. Driven entirely by the shared DisplayPricing object so
 * every surface shows identical promotion / sale behavior.
 */
export function ProductPrice({
  pricing,
  formatPrice,
  className,
  priceClassName,
  originalClassName,
  badgeClassName,
  showInlineBadge = true,
  fromLabel = "From",
}: ProductPriceProps) {
  const isPromotion = pricing.discountSource === "promotion"
  return (
    <div className={cn("flex items-center gap-2 flex-wrap", className)}>
      {pricing.isFromPrice ? (
        <span className="text-sm font-medium text-muted-foreground">{fromLabel}</span>
      ) : null}
      <span className={cn("text-2xl font-bold text-foreground", priceClassName)}>
        {formatPrice(pricing.displayPrice)}
      </span>
      {pricing.hasDiscount && pricing.listPrice ? (
        <>
          <span className={cn("text-lg text-muted-foreground line-through", originalClassName)}>
            {formatPrice(pricing.listPrice)}
          </span>
          {showInlineBadge && pricing.discountPercent > 0 ? (
            <Badge
              variant="secondary"
              className={cn(
                isPromotion ? "bg-secondary text-secondary-foreground" : "bg-muted text-foreground",
                "text-xs",
                badgeClassName,
              )}
            >
              {pricing.discountPercent}% OFF
            </Badge>
          ) : null}
        </>
      ) : null}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/products-page-client.tsx"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useAgoraProducts } from "@/hooks/use-agora-products"
import { useCart } from "@/contexts/cart-context"
import { useLanguage } from "@/contexts/language-context"
import { ShoppingCart, Loader2 } from "lucide-react"
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { getDisplayPricing } from "@/lib/product-pricing"
import { ProductPrice, PromotionBadge } from "@/components/product-price"

export function ProductsPageClient() {
  const [addingProducts, setAddingProducts] = useState<Set<string>>(new Set())
  const { t, formatPrice, getProductCTA } = useLanguage()
  const router = useRouter()

const { products, loading, error, pagination } = useAgoraProducts(1, 20, "")
  const { addItem } = useCart()

const handleAddToCart = async (product: any, event: React.MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()

const pricing = getDisplayPricing(product)

// Variants-priced products need a variant chosen before checkout — send the
    // shopper to the PDP to pick one instead of guessing a price.
    if (pricing.requiresVariantSelection) {
      router.push(`/product/${product._id}`)
      return
    }

setAddingProducts((prev) => new Set(prev).add(product._id))

if (loading) {
    return (
      <div className="text-center py-20">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
        <p className="text-muted-foreground">{t("products.loading")}</p>
      </div>
    )
  }

if (error) {
    return (
      <div className="text-center py-20">
        <p className="text-muted-foreground text-lg">{t("products.noAvailable")}</p>
      </div>
    )
  }

return (
    <div>
      <div className="text-center mb-12">
        <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">{t("products.title")}</h1>
        <p className="text-xl text-muted-foreground max-w-2xl mx-auto">{t("products.subtitle")}</p>
      </div>

{products.length === 0 ? (
        <div className="text-center py-20">
          <p className="text-muted-foreground text-lg">{t("products.notFound")}</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
          {products.map((product) => {
            // List cards never pre-select a variant: variants-priced products
            // show "From {fromPrice}" and route to the PDP for selection.
            const pricing = getDisplayPricing(product)

const isAddingThisProduct = addingProducts.has(product._id)
            const isInStock = product.available
            const needsSelection = pricing.requiresVariantSelection

return (
              <div key={product._id} className="h-full">
                <Card className="group overflow-hidden hover:shadow-lg transition-all duration-300 border border-border bg-card h-full flex flex-col relative">
                  <CardContent className="p-0 flex flex-col h-full">
                    <div className="relative overflow-hidden">
                      <Link href={`/product/${product._id}`}>
                        <img
                          src={product.images[0] || "/placeholder.svg"}
                          alt={product.name}
                          className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer"
                        />
                      </Link>

{product.featured ? (
                        <Badge className="absolute top-4 right-4 bg-yellow-500 text-black">
                          {t("common.featured")}
                        </Badge>
                      ) : null}

<div className="absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                        <Button
                          type="button"
                          className="bg-card text-foreground hover:bg-muted border border-border"
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={(!isInStock && !needsSelection) || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : (
                            <ShoppingCart className="w-4 h-4 mr-2" />
                          )}
                          {needsSelection
                            ? t("productDetails.selectOptions")
                            : isInStock
                              ? getProductCTA(product.productKind)
                              : t("cart.outOfStock")}
                        </Button>
                      </div>
                    </div>

<div className="p-6 flex flex-col flex-grow">
                      <Link href={`/product/${product._id}`}>
                        <h3 className="font-semibold text-lg text-foreground mb-2 group-hover:text-muted-foreground transition-colors cursor-pointer line-clamp-2 h-14 leading-7">
                          {product.name}
                        </h3>
                      </Link>

<p className="text-muted-foreground text-sm mb-4 line-clamp-2 h-10 leading-5">
                        {product.description}
                      </p>

<div className="mt-auto">
                        <Button
                          type="button"
                          className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={(!isInStock && !needsSelection) || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : needsSelection ? (
                            t("productDetails.selectOptions")
                          ) : isInStock ? (
                            getProductCTA(product.productKind)
                          ) : (
                            t("cart.outOfStock")
                          )}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/restock-notification-button.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Bell, Loader2 } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"
import { useToast } from "@/hooks/use-toast"
import storeConfig from "@/config/store"

interface RestockNotificationButtonProps {
  productId: string
  variantIndex?: number
  /** If provided, use this for the modal/dialog title. Otherwise use "Get Notified". */
  label?: string
  className?: string
}

export function RestockNotificationButton({
  productId,
  variantIndex,
  label,
  className = "w-full",
}: RestockNotificationButtonProps) {
  const { t } = useLanguage()
  const { toast } = useToast()
  const [isOpen, setIsOpen] = useState(false)
  const [email, setEmail] = useState("")
  const [isLoading, setIsLoading] = useState(false)

const handleNotifyClick = async () => {
    if (!email.trim()) {
      toast({
        title: "Error",
        description: "Please enter a valid email",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)
    try {
      const payload: any = {
        email: email.trim().toLowerCase(),
      }

if (variantIndex !== undefined) {
        payload.metadata = { variantIndex }
      }

const url = `${storeConfig.apiBaseUrl}/storefront/v1/stores/${storeConfig.storeId}/products/${productId}/restock-notifications`

const response = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      })

const data = await response.json()

if (!response.ok || data.status !== "success") {
        throw new Error(data.error || data.message || "Failed to subscribe")
      }

// Show the message from the API response (handles both new and existing subscriptions)
      toast({
        title: "Success",
        description: data.data?.message || "You'll be notified when this product is back in stock!",
        variant: "default",
      })

setEmail("")
      setIsOpen(false)
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to subscribe to restock notifications",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

if (!storeConfig.enableRestockNotifications) return null

return (
    <>
      <Button
        type="button"
        onClick={() => setIsOpen(true)}
        variant="outline"
        className={className}
      >
        <Bell className="w-4 h-4 mr-2" />
        {label || "Get Notified"}
      </Button>

{isOpen && (
        <div 
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
          onClick={() => !isLoading && setIsOpen(false)}
          role="presentation"
        >
          <div 
            className="bg-white dark:bg-slate-950 rounded-lg shadow-lg p-6 max-w-sm w-full mx-4 relative"
            onClick={(e) => e.stopPropagation()}
          >
            <h2 className="text-xl font-bold mb-4">
              {label ? `${label} When In Stock` : "Get Notified"}
            </h2>

<div className="space-y-4">
              <div>
                <label htmlFor="restock-email" className="block text-sm font-medium mb-2">
                  Email Address
                </label>
                <input
                  id="restock-email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="your@email.com"
                  className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-900 text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                  disabled={isLoading}
                  required
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && !isLoading && email.trim()) {
                      e.preventDefault()
                      handleNotifyClick()
                    }
                  }}
                />
              </div>

<p className="text-sm text-muted-foreground">
                We'll send you an email when this product is back in stock.
              </p>

<div className="flex gap-3">
                <Button
                  type="button"
                  variant="outline"
                  className="flex-1"
                  onClick={() => setIsOpen(false)}
                  disabled={isLoading}
                >
                  Cancel
                </Button>
                <Button
                  type="button"
                  className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90"
                  disabled={isLoading}
                  onClick={handleNotifyClick}
                >
                  {isLoading ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      Subscribing...
                    </>
                  ) : (
                    "Notify Me"
                  )}
                </Button>
              </div>
            </div>

<button
              type="button"
              onClick={() => !isLoading && setIsOpen(false)}
              disabled={isLoading}
              className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50"
              aria-label="Close modal"
            >
              ✕
            </button>
          </div>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'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"
"use client"

import { Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useCustomTheme } from "@/components/custom-theme-provider"
import { useEffect, useState } from "react"

export function ThemeToggle() {
  const { theme, toggleTheme } = useCustomTheme()
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return (
      <Button variant="ghost" size="sm" className="w-9 h-9 p-0">
        <Sun className="h-5 w-5" />
      </Button>
    )
  }

return (
    <Button variant="ghost" size="sm" onClick={toggleTheme} className="w-9 h-9 p-0" aria-label="Toggle theme">
      {theme === "light" ? (
        <Moon className="h-5 w-5 transition-transform duration-200" />
      ) : (
        <Sun className="h-5 w-5 transition-transform duration-200" />
      )}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx"
'use client'

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

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

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn('border-b', className)}
    {...props}
  />
))
AccordionItem.displayName = 'AccordionItem'

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
        className,
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn('pb-4 pt-0', className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
'use client'

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

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

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

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

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

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

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

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

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

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

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

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
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 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
  {
    variants: {
      variant: {
        default: 'bg-background text-foreground',
        destructive:
          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = 'Alert'

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
    {...props}
  />
))
AlertTitle.displayName = 'AlertTitle'

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('text-sm [&_p]:leading-relaxed', className)}
    {...props}
  />
))
AlertDescription.displayName = 'AlertDescription'

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

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

const AspectRatio = AspectRatioPrimitive.Root

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

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

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

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
      className,
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn('aspect-square h-full w-full', className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      'flex h-full w-full items-center justify-center rounded-full bg-muted',
      className,
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

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

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

const badgeVariants = cva(
  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive:
          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
        outline: 'text-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

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

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

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<'nav'> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = 'Breadcrumb'

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<'ol'>
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
      className,
    )}
    {...props}
  />
))
BreadcrumbList.displayName = 'BreadcrumbList'

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<'li'>
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn('inline-flex items-center gap-1.5', className)}
    {...props}
  />
))
BreadcrumbItem.displayName = 'BreadcrumbItem'

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<'a'> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      ref={ref}
      className={cn('transition-colors hover:text-foreground', className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = 'BreadcrumbLink'

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<'span'>
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn('font-normal text-foreground', className)}
    {...props}
  />
))
BreadcrumbPage.displayName = 'BreadcrumbPage'

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<'li'>) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn('[&>svg]:w-3.5 [&>svg]:h-3.5', className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<'span'>) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn('flex h-9 w-9 items-center justify-center', className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button-group.tsx"
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 has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
  {
    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 shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
        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"
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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline:
          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  },
)
Button.displayName = 'Button'

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
'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:2rem] [[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 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"
import * as React from 'react'

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

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'rounded-lg border bg-card text-card-foreground shadow-sm',
      className,
    )}
    {...props}
  />
))
Card.displayName = 'Card'

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('flex flex-col space-y-1.5 p-6', className)}
    {...props}
  />
))
CardHeader.displayName = 'CardHeader'

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'text-2xl font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
CardTitle.displayName = 'CardTitle'

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
CardDescription.displayName = 'CardDescription'

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
))
CardContent.displayName = 'CardContent'

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('flex items-center p-6 pt-0', className)}
    {...props}
  />
))
CardFooter.displayName = 'CardFooter'

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx"
'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
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = 'horizontal',
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref,
  ) => {
    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
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn('relative', className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  },
)
Carousel.displayName = 'Carousel'

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

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

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

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

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

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

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

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

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
'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
}

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

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.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-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.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 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = 'Chart'

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

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<'div'> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: 'line' | 'dot' | 'dashed'
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = 'dot',
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref,
  ) => {
    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
        ref={ref}
        className={cn(
          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background 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(
                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
                  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="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  },
)
ChartTooltipContent.displayName = 'ChartTooltip'

const ChartLegend = RechartsPrimitive.Legend

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

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

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

// 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"
'use client'

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

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

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

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

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

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

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

import * as React from 'react'
import { type DialogProps } from '@radix-ui/react-dialog'
import { Command as CommandPrimitive } from 'cmdk'
import { Search } from 'lucide-react'

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

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
      className,
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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>
  )
}

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    />
  </div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
    {...props}
  />
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
      className,
    )}
    {...props}
  />
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 h-px bg-border', className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className,
    )}
    {...props}
  />
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        'ml-auto text-xs tracking-widest text-muted-foreground',
        className,
      )}
      {...props}
    />
  )
}
CommandShortcut.displayName = 'CommandShortcut'

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

import * as React from 'react'
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'

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

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

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

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

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

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

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

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

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

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-border', className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        'ml-auto text-xs tracking-widest text-muted-foreground',
        className,
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = 'ContextMenuShortcut'

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

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

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

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

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

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

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      'text-lg font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

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

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

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

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

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
)
Drawer.displayName = 'Drawer'

const DrawerTrigger = DrawerPrimitive.Trigger

const DrawerPortal = DrawerPrimitive.Portal

const DrawerClose = DrawerPrimitive.Close

const DrawerOverlay = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Overlay
    ref={ref}
    className={cn('fixed inset-0 z-50 bg-black/80', className)}
    {...props}
  />
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
        className,
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))
DrawerContent.displayName = 'DrawerContent'

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
    {...props}
  />
)
DrawerHeader.displayName = 'DrawerHeader'

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
    {...props}
  />
)
DrawerFooter.displayName = 'DrawerFooter'

const DrawerTitle = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Title
    ref={ref}
    className={cn(
      'text-lg font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName

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

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
'use client'

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

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

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

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

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

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

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

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

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

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

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

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

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/empty.tsx"
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 text-balance rounded-lg border-dashed p-6 text-center 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(
  'mb-2 flex shrink-0 items-center justify-center [&_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 min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
        className,
      )}
      {...props}
    />
  )
}

export {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
}
[V0_FILE]typescriptreact:file="components/ui/field.tsx"
'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 data-[invalid=true]:text-destructive flex w-full gap-3',
  {
    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]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start',
        ],
        responsive: [
          '@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]: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 font-medium leading-snug 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 font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
        'nth-last-2:-mt-1 last:mt-0 [[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"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { Slot } from '@radix-ui/react-slot'
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} 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, formState } = useFormContext()

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,
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn('space-y-2', className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = 'FormItem'

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

return (
    <Label
      ref={ref}
      className={cn(error && 'text-destructive', className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = 'FormLabel'

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = 'FormControl'

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn('text-sm text-muted-foreground', className)}
      {...props}
    />
  )
})
FormDescription.displayName = 'FormDescription'

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

if (!body) {
    return null
  }

return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn('text-sm font-medium text-destructive', className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = 'FormMessage'

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

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

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

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

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

import * as React from 'react'
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 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]',
        '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]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1',

// 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 select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
  {
    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':
          '[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5',
        'block-end':
          '[.border-t]:pt-3 order-last w-full justify-start px-3 pb-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(
  'flex items-center gap-2 text-sm shadow-none',
  {
    variants: {
      size: {
        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
        sm: 'h-8 gap-1.5 rounded-md px-2.5 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:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
        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"
'use client'

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

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

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      'flex items-center gap-2 has-[:disabled]:opacity-50',
      containerClassName,
    )}
    className={cn('disabled:cursor-not-allowed', className)}
    {...props}
  />
))
InputOTP.displayName = 'InputOTP'

const InputOTPGroup = React.forwardRef<
  React.ElementRef<'div'>,
  React.ComponentPropsWithoutRef<'div'>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn('flex items-center', className)} {...props} />
))
InputOTPGroup.displayName = 'InputOTPGroup'

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

return (
    <div
      ref={ref}
      className={cn(
        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
        isActive && 'z-10 ring-2 ring-ring ring-offset-background',
        className,
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = 'InputOTPSlot'

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<'div'>,
  React.ComponentPropsWithoutRef<'div'>
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = 'InputOTPSeparator'

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

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

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
          className,
        )}
        ref={ref}
        {...props}
      />
    )
  },
)
Input.displayName = 'Input'

export { Input }
[V0_FILE]typescriptreact:file="components/ui/item.tsx"
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 [a&]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px] [a&]:transition-colors',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border-border',
        muted: 'bg-muted/50',
      },
      size: {
        default: 'gap-4 p-4 ',
        sm: 'gap-2.5 px-4 py-3',
      },
    },
    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:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
        image:
          'size-10 overflow-hidden rounded-sm [&_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 font-medium leading-snug',
        className,
      )}
      {...props}
    />
  )
}

function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="item-description"
      className={cn(
        'text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal',
        '[&>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"
import { cn } from '@/lib/utils'

function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium',
        "[&_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"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { cva, type VariantProps } from 'class-variance-authority'

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

const labelVariants = cva(
  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

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

import * as React from 'react'
import * as MenubarPrimitive from '@radix-ui/react-menubar'
import { Check, ChevronRight, Circle } from 'lucide-react'

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

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      'flex h-10 items-center space-x-1 rounded-md border bg-background p-1',
      className,
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
      className,
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

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

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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',
      className,
    )}
    {...props}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },
    ref,
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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',
          className,
        )}
        {...props}
      />
    </MenubarPrimitive.Portal>
  ),
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

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

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

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

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

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

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        'ml-auto text-xs tracking-widest text-muted-foreground',
        className,
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = 'MenubarShortcut'

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx"
import * as React from 'react'
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
import { cva } from 'class-variance-authority'
import { ChevronDown } from 'lucide-react'

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

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      'relative z-10 flex max-w-max flex-1 items-center justify-center',
      className,
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      'group flex flex-1 list-none items-center justify-center space-x-1',
      className,
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), 'group', className)}
    {...props}
  >
    {children}{' '}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      'left-0 top-0 w-full 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 md:absolute md:w-auto ',
      className,
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className="absolute left-0 top-full flex justify-center">
    <NavigationMenuPrimitive.Viewport
      className={cn(
        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
        className,
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
      className,
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx"
import * as React from 'react'
import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'

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

const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn('mx-auto flex w-full justify-center', className)}
    {...props}
  />
)
Pagination.displayName = 'Pagination'

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn('flex flex-row items-center gap-1', className)}
    {...props}
  />
))
PaginationContent.displayName = 'PaginationContent'

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn('', className)} {...props} />
))
PaginationItem.displayName = 'PaginationItem'

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, 'size'> &
  React.ComponentProps<'a'>

const PaginationLink = ({
  className,
  isActive,
  size = 'icon',
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? 'page' : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? 'outline' : 'ghost',
        size,
      }),
      className,
    )}
    {...props}
  />
)
PaginationLink.displayName = 'PaginationLink'

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn('gap-1 pl-2.5', className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = 'PaginationPrevious'

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn('gap-1 pr-2.5', className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = 'PaginationNext'

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<'span'>) => (
  <span
    aria-hidden
    className={cn('flex h-9 w-9 items-center justify-center', className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = 'PaginationEllipsis'

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
'use client'

import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'

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

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
'use client'

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

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

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

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx"
'use client'

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

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

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

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

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx"
'use client'

import { GripVertical } from 'lucide-react'
import * as ResizablePrimitive from 'react-resizable-panels'

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

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
      className,
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 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-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
      className,
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
'use client'

import * as React from 'react'
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'

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

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn('relative overflow-hidden', className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = 'vertical', ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      'flex touch-none select-none transition-colors',
      orientation === 'vertical' &&
        'h-full w-2.5 border-l border-l-transparent p-[1px]',
      orientation === 'horizontal' &&
        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
'use client'

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

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

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

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

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

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

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

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

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

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

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

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
'use client'

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

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

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

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
'use client'

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

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

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
  {
    variants: {
      side: {
        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
        bottom:
          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
        right:
          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
      },
    },
    defaultVariants: {
      side: 'right',
    },
  },
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = 'right', className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

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

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

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn('text-lg font-semibold text-foreground', className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

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

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx"
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { VariantProps, cva } from 'class-variance-authority'
import { PanelLeft } 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 } 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 SidebarContext = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }

return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref,
  ) => {
    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<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      ],
    )

return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                '--sidebar-width': SIDEBAR_WIDTH,
                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
              className,
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  },
)
SidebarProvider.displayName = 'SidebarProvider'

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    side?: 'left' | 'right'
    variant?: 'sidebar' | 'floating' | 'inset'
    collapsible?: 'offcanvas' | 'icon' | 'none'
  }
>(
  (
    {
      side = 'left',
      variant = 'sidebar',
      collapsible = 'offcanvas',
      className,
      children,
      ...props
    },
    ref,
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === 'none') {
      return (
        <div
          className={cn(
            'flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
            className,
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === 'collapsed' ? collapsible : ''}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
            'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] 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)_+_theme(spacing.4))]'
              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
          )}
        />
        <div
          className={cn(
            'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] 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)_+_theme(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"
            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
          >
            {children}
          </div>
        </div>
      </div>
    )
  },
)
Sidebar.displayName = 'Sidebar'

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      variant="ghost"
      size="icon"
      className={cn('h-7 w-7', className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = 'SidebarTrigger'

const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'>
>(({ className, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <button
      ref={ref}
      data-sidebar="rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        className,
      )}
      {...props}
    />
  )
})
SidebarRail.displayName = 'SidebarRail'

const SidebarInset = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'main'>
>(({ className, ...props }, ref) => {
  return (
    <main
      ref={ref}
      className={cn(
        'relative flex min-h-svh flex-1 flex-col bg-background',
        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
        className,
      )}
      {...props}
    />
  )
})
SidebarInset.displayName = 'SidebarInset'

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
  return (
    <Input
      ref={ref}
      data-sidebar="input"
      className={cn(
        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
        className,
      )}
      {...props}
    />
  )
})
SidebarInput.displayName = 'SidebarInput'

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="header"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
})
SidebarHeader.displayName = 'SidebarHeader'

const SidebarFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="footer"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
})
SidebarFooter.displayName = 'SidebarFooter'

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
  return (
    <Separator
      ref={ref}
      data-sidebar="separator"
      className={cn('mx-2 w-auto bg-sidebar-border', className)}
      {...props}
    />
  )
})
SidebarSeparator.displayName = 'SidebarSeparator'

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      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}
    />
  )
})
SidebarContent.displayName = 'SidebarContent'

const SidebarGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="group"
      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
      {...props}
    />
  )
})
SidebarGroup.displayName = 'SidebarGroup'

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

return (
    <Comp
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] 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}
    />
  )
})
SidebarGroupLabel.displayName = 'SidebarGroupLabel'

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      ref={ref}
      data-sidebar="group-action"
      className={cn(
        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 after:md:hidden',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = 'SidebarGroupAction'

const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="group-content"
    className={cn('w-full text-sm', className)}
    {...props}
  />
))
SidebarGroupContent.displayName = 'SidebarGroupContent'

const SidebarMenu = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu"
    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
    {...props}
  />
))
SidebarMenu.displayName = 'SidebarMenu'

const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    data-sidebar="menu-item"
    className={cn('group/menu-item relative', className)}
    {...props}
  />
))
SidebarMenuItem.displayName = 'SidebarMenuItem'

const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none 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',
    },
  },
)

const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & {
    asChild?: boolean
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>
>(
  (
    {
      asChild = false,
      isActive = false,
      variant = 'default',
      size = 'default',
      tooltip,
      className,
      ...props
    },
    ref,
  ) => {
    const Comp = asChild ? Slot : 'button'
    const { isMobile, state } = useSidebar()

const button = (
      <Comp
        ref={ref}
        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>
    )
  },
)
SidebarMenuButton.displayName = 'SidebarMenuButton'

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & {
    asChild?: boolean
    showOnHover?: boolean
  }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      ref={ref}
      data-sidebar="menu-action"
      className={cn(
        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 after:md: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 &&
          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
        className,
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = 'SidebarMenuAction'

const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="menu-badge"
    className={cn(
      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-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}
  />
))
SidebarMenuBadge.displayName = 'SidebarMenuBadge'

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    showIcon?: boolean
  }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn('rounded-md h-8 flex gap-2 px-2 items-center', className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 flex-1 max-w-[--skeleton-width]"
        data-sidebar="menu-skeleton-text"
        style={
          {
            '--skeleton-width': width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'

const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu-sub"
    className={cn(
      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
      'group-data-[collapsible=icon]:hidden',
      className,
    )}
    {...props}
  />
))
SidebarMenuSub.displayName = 'SidebarMenuSub'

const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<'li'>
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<'a'> & {
    asChild?: boolean
    size?: 'sm' | 'md'
    isActive?: boolean
  }
>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      ref={ref}
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
        '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}
    />
  )
})
SidebarMenuSubButton.displayName = 'SidebarMenuSubButton'

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"
import { cn } from '@/lib/utils'

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn('animate-pulse rounded-md bg-muted', className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
'use client'

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'

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

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn(
      'relative flex w-full touch-none select-none items-center',
      className,
    )}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx"
'use client'

import { useTheme } from 'next-themes'
import { Toaster as Sonner } from 'sonner'

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
          description: 'group-[.toast]:text-muted-foreground',
          actionButton:
            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
          cancelButton:
            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/spinner.tsx"
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"
'use client'

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

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

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

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
import * as React from 'react'

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

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

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

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

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

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

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

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

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

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
'use client'

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

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

const Tabs = TabsPrimitive.Root

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

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

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

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from 'react'

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

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

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
'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 right-0 z-[100] flex max-h-screen w-full flex-col p-4 sm:max-w-[420px] sm:flex-col',
      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"
'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"
'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',
})

const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
    className={cn('flex items-center justify-center gap-1', className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

return (
    <ToggleGroupPrimitive.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className,
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
'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 rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline:
          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-10 px-3 min-w-10',
        sm: 'h-9 px-2.5 min-w-9',
        lg: 'h-11 px-5 min-w-11',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'

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

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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',
      className,
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx"
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"
'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]typescriptreact:file="components/variant-selector.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import type { ProductVariant } from "@/types/product"
import { useLanguage } from "@/contexts/language-context"

interface VariantSelectorProps {
  variants: ProductVariant[]
  selectedVariants: Record<string, string>
  onVariantChange: (optionName: string, value: string) => void
  basePrice: number
  formatPrice?: (price: number) => string
}

export function VariantSelector({
  variants,
  selectedVariants,
  onVariantChange,
  basePrice,
  formatPrice,
}: VariantSelectorProps) {
  const { t, formatPrice: contextFormatPrice } = useLanguage()
  const priceFormatter = formatPrice || contextFormatPrice

const variantOptions = variants.reduce(
    (options, variant) => {
      if (variant.name && variant.value) {
        if (!options[variant.name]) {
          options[variant.name] = new Set()
        }
        options[variant.name].add(variant.value)
      }
      return options
    },
    {} as Record<string, Set<string>>,
  )

const selectedVariant = variants.find((variant) => {
    if (!variant.name || !variant.value) return false
    return selectedVariants[variant.name] === variant.value
  })

const isOptionAvailable = (optionName: string, value: string) => {
    return variants.some((variant) => {
      return (
        variant.name === optionName &&
        variant.value === value &&
        variant.isInStock !== false &&
        (variant.quantity === undefined || variant.quantity > 0)
      )
    })
  }

// Prefer the backend-enriched per-variant effectivePrice (what the customer
  // actually pays) over the raw variant price or the display-only base price.
  const currentPrice =
    selectedVariant?.effectivePrice ?? selectedVariant?.price ?? basePrice
  const isInStock = selectedVariant
    ? selectedVariant.isInStock !== false && (selectedVariant.quantity === undefined || selectedVariant.quantity > 0)
    : true

return (
    <div className="space-y-6">
      {Object.entries(variantOptions).map(([optionName, values]) => (
        <div key={optionName} className="space-y-3">
          <div className="flex items-center justify-between">
            <h3 className="font-semibold text-lg text-foreground capitalize">{optionName}</h3>
            {selectedVariants[optionName] && (
              <span className="text-sm text-muted-foreground">Selected: {selectedVariants[optionName]}</span>
            )}
          </div>

<div className="flex flex-wrap gap-2">
            {Array.from(values).map((value) => {
              const isSelected = selectedVariants[optionName] === value
              const isAvailable = isOptionAvailable(optionName, value)
              const variantWithValue = variants.find(
                (v) => v.name === optionName && v.value === value,
              )

return (
                <Button
                  key={value}
                  type="button"
                  variant={isSelected ? "default" : "outline"}
                  className={`
                    ${
                      isSelected
                        ? "bg-primary text-primary-foreground border-primary"
                        : "bg-card text-foreground border-border hover:border-primary"
                    }
                    ${!isAvailable ? "opacity-50 cursor-not-allowed line-through" : ""}
                  `}
                  onClick={() => isAvailable && onVariantChange(optionName, value)}
                  disabled={!isAvailable}
                  title={!isAvailable ? "Out of stock" : ""}
                >
                  {value}
                  {isSelected && <span className="ml-2">✓</span>}
                  {!isAvailable && (
                    <span className="ml-2 text-xs opacity-75">(Out of stock)</span>
                  )}
                </Button>
              )
            })}
          </div>
        </div>
      ))}

{/* Price and Stock Display */}
      <div className="space-y-2 pt-4 border-t border-border">
        <div className="flex items-center justify-between">
          <span className="font-semibold text-lg text-foreground">
            {t("productDetails.price") || "Price"}
          </span>
          <span className="text-2xl font-bold text-foreground">{priceFormatter(currentPrice)}</span>
        </div>

{selectedVariant?.quantity !== undefined && (
          <div className="flex items-center justify-between text-sm text-muted-foreground">
            <span>{t("products.available")}:</span>
            <span>{selectedVariant.quantity} units</span>
          </div>
        )}

{selectedVariant?.id && (
          <div className="flex items-center justify-between text-sm text-muted-foreground">
            <span>{t("productDetails.sku")}</span>
            <span className="font-mono text-xs">{selectedVariant.id}</span>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="config/presets/bold-minimal.ts"
import type { HomepageConfig } from "@/types/homepage-config"

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-background overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border-primary text-primary bg-transparent px-4 py-2 uppercase tracking-widest text-xs font-bold rounded-none",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-4 h-4 mr-2 fill-primary",
    },
    title: {
      className: "text-6xl md:text-8xl font-black text-foreground mb-6 leading-none uppercase tracking-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block",
    },
    subtitle: {
      className: "text-lg text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed uppercase tracking-widest text-xs",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-primary text-primary-foreground hover:bg-primary/80 text-sm px-10 py-6 rounded-none uppercase tracking-widest font-bold border-0",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "border-2 border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/80 text-sm px-10 py-6 rounded-none uppercase tracking-widest font-bold",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-4xl font-black text-foreground uppercase tracking-tight",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 uppercase tracking-widest text-xs",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-4", skeletonCount: 4 },
    card: { className: "hover:shadow-none transition-shadow cursor-pointer h-full border-2 border-border rounded-none bg-card" },
    categoryName: { className: "font-bold text-lg text-center text-foreground uppercase tracking-widest" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-foreground hover:bg-primary hover:text-primary-foreground rounded-none uppercase tracking-widest text-xs font-bold",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground rounded-none uppercase tracking-widest font-bold bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-muted border-2 border-border rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-background" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-6xl font-black text-foreground mb-4 uppercase tracking-tight",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-2xl mx-auto uppercase tracking-widest text-xs",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-none transition-all duration-300 border-2 border-border rounded-none bg-card h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover grayscale group-hover:grayscale-0 transition-all duration-500 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-foreground/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-bold text-lg text-foreground mb-3 group-hover:text-foreground/70 transition-colors cursor-pointer line-clamp-2 h-14 leading-7 uppercase" },
    productPrice: { className: "text-2xl font-black text-foreground" },
    originalPrice: { className: "text-lg text-muted-foreground line-through" },
    discountBadge: { className: "bg-secondary text-secondary-foreground text-xs rounded-none font-bold uppercase" },
    saleBadge: { className: "absolute top-4 left-4 bg-secondary text-secondary-foreground rounded-none font-bold uppercase" },
    featuredBadge: { className: "absolute top-4 right-4 bg-primary text-primary-foreground rounded-none font-bold uppercase" },
    quickAddButton: { className: "bg-card text-foreground hover:bg-muted border-2 border-border rounded-none" },
    addToCartButton: { className: "w-full bg-primary text-primary-foreground hover:bg-primary/80 rounded-none uppercase tracking-widest font-bold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground rounded-none uppercase tracking-widest font-bold bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-secondary text-secondary-foreground bg-secondary hover:bg-secondary/80 rounded-none uppercase tracking-widest font-bold",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/classic-commerce.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Classic Commerce preset - uses semantic color classes (bg-primary, text-secondary, etc.)
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[70svh] bg-background overflow-hidden" },
    container: { className: "container mx-auto px-4 min-h-[70svh] flex items-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-primary text-primary bg-primary/10 px-4 py-1 rounded-lg text-xs font-semibold",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-1 fill-primary",
    },
    title: {
      className: "text-4xl md:text-5xl font-bold text-foreground mb-4 leading-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-primary",
    },
    subtitle: {
      className: "text-base text-muted-foreground mb-6 max-w-xl mx-auto",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-3 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-primary hover:bg-primary/90 text-primary-foreground text-sm px-8 py-5 rounded-lg font-semibold border-0",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground text-sm px-8 py-5 rounded-lg font-semibold bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-12 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-6" },
    title: {
      className: "text-2xl font-bold text-foreground",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-1 text-sm",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-3", skeletonCount: 4 },
    card: { className: "hover:shadow-md transition-shadow cursor-pointer h-full border border-border rounded-lg bg-card" },
    categoryName: { className: "font-semibold text-base text-center text-card-foreground" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-primary hover:bg-primary/10 rounded-lg font-semibold text-sm",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-primary text-primary hover:bg-primary/10 rounded-lg font-semibold bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-muted border border-border rounded-lg" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-12 bg-background" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-10" },
    title: {
      className: "text-3xl font-bold text-foreground mb-2",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-2xl mx-auto text-sm",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
    productCard: {
      className: "group overflow-hidden hover:shadow-md transition-all duration-300 border border-border rounded-lg bg-card h-full flex flex-col relative",
      imageClassName: "w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-semibold text-base text-card-foreground mb-2 group-hover:text-primary transition-colors cursor-pointer line-clamp-2 h-12 leading-6" },
    productPrice: { className: "text-xl font-bold text-foreground" },
    originalPrice: { className: "text-base text-muted-foreground line-through" },
    discountBadge: { className: "bg-secondary/20 text-secondary text-xs rounded-lg font-semibold" },
    saleBadge: { className: "absolute top-3 left-3 bg-secondary text-secondary-foreground rounded-lg font-semibold text-xs" },
    featuredBadge: { className: "absolute top-3 right-3 bg-primary text-primary-foreground rounded-lg font-semibold text-xs" },
    quickAddButton: { className: "bg-card text-card-foreground hover:bg-primary/10 border border-border rounded-lg" },
    addToCartButton: { className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg font-semibold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-base px-6 py-5 border border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground rounded-lg font-semibold bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-base px-6 py-5 border border-primary text-primary hover:bg-primary/10 rounded-lg font-semibold bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-10 flex flex-col md:flex-row gap-3 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/dark-luxe.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Dark Luxe preset - uses semantic color classes (bg-primary, text-secondary, etc.)
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-[#0a0a0a] overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-primary/30 text-primary bg-primary/5 px-6 py-2 rounded-none text-[10px] tracking-[0.3em] font-light uppercase",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-primary",
    },
    title: {
      className: "text-5xl md:text-7xl font-extralight text-white mb-8 leading-tight tracking-[0.05em]",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-primary font-thin tracking-[0.2em]",
    },
    subtitle: {
      className: "text-sm text-white/40 mb-12 max-w-xl mx-auto leading-relaxed tracking-[0.15em] uppercase font-light",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-6 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-primary hover:bg-primary/90 text-primary-foreground text-xs px-12 py-6 rounded-none tracking-[0.3em] uppercase font-light border-0",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-3 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border border-secondary/30 text-secondary hover:bg-secondary/10 text-xs px-12 py-6 rounded-none tracking-[0.3em] uppercase font-light bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-16" },
    title: {
      className: "text-3xl font-extralight text-white tracking-[0.1em]",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-white/30 mt-3 tracking-[0.15em] uppercase text-xs font-light",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:border-primary/40 transition-all duration-700 cursor-pointer h-full border border-white/10 rounded-none bg-[#111111]" },
    categoryName: { className: "font-light text-lg text-center text-white/80 tracking-[0.1em]" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-primary hover:bg-primary/10 rounded-none tracking-[0.2em] uppercase text-xs font-light",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-primary/30 text-primary hover:bg-primary/10 rounded-none tracking-[0.2em] uppercase font-light bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-[#111111] border border-white/5 rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-24 bg-[#0a0a0a]" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-20" },
    title: {
      className: "text-4xl md:text-5xl font-extralight text-white mb-6 tracking-[0.1em]",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-white/30 max-w-2xl mx-auto tracking-[0.15em] uppercase text-xs font-light",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10" },
    productCard: {
      className: "group overflow-hidden hover:border-primary/30 transition-all duration-700 border border-white/10 rounded-none bg-[#111111] h-full flex flex-col relative",
      imageClassName: "w-full h-72 object-cover group-hover:scale-105 transition-transform duration-1000 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700 flex items-center justify-center",
    },
    productName: { className: "font-light text-lg text-white/80 mb-3 group-hover:text-primary transition-colors duration-500 cursor-pointer line-clamp-2 h-14 leading-7 tracking-wide" },
    productPrice: { className: "text-2xl font-extralight text-white tracking-wide" },
    originalPrice: { className: "text-lg text-white/20 line-through font-light" },
    discountBadge: { className: "bg-secondary/10 text-secondary text-xs rounded-none font-light tracking-widest" },
    saleBadge: { className: "absolute top-4 left-4 bg-secondary text-secondary-foreground rounded-none font-light tracking-widest text-xs" },
    featuredBadge: { className: "absolute top-4 right-4 bg-white/10 text-primary rounded-none font-light tracking-widest text-xs" },
    quickAddButton: { className: "bg-[#111111] text-white/80 hover:bg-primary/10 hover:text-primary border border-white/10 rounded-none tracking-widest text-xs" },
    addToCartButton: { className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-none tracking-[0.2em] uppercase font-light text-sm" },
    loading: { className: "animate-spin rounded-none h-12 w-12 border-b border-primary mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-sm px-10 py-6 border border-secondary/30 text-secondary hover:bg-secondary/10 rounded-none tracking-[0.2em] uppercase font-light bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-sm px-10 py-6 border border-primary/30 text-primary hover:bg-primary/10 rounded-none tracking-[0.2em] uppercase font-light bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-16 flex flex-col md:flex-row gap-6 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/editorial.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Editorial preset - uses semantic color classes (bg-primary, text-secondary, etc.)
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-background overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: false,
      className: "",
      text: "",
      icon: "",
      iconClassName: "",
    },
    title: {
      className: "text-5xl md:text-8xl font-serif text-foreground mb-8 leading-[0.95] italic",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block not-italic font-normal tracking-tight",
    },
    subtitle: {
      className: "text-lg text-muted-foreground mb-10 max-w-lg mx-auto leading-relaxed font-serif italic",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-6 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-transparent hover:bg-primary hover:text-primary-foreground text-foreground text-sm px-10 py-6 rounded-none border-b-2 border-primary font-serif italic tracking-wider",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-3 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "bg-transparent text-muted-foreground hover:text-primary text-sm px-10 py-6 rounded-none border-b border-secondary font-serif italic tracking-wider",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex items-center justify-between mb-16" },
    title: {
      className: "text-4xl font-serif text-foreground italic",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 font-serif italic text-sm",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-8", skeletonCount: 4 },
    card: { className: "hover:border-primary transition-all duration-500 cursor-pointer h-full border-b border-border rounded-none bg-transparent" },
    categoryName: { className: "font-serif italic text-xl text-center text-muted-foreground" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-muted-foreground hover:text-primary rounded-none font-serif italic underline underline-offset-4 hover:bg-transparent",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "text-muted-foreground hover:text-primary rounded-none font-serif italic underline underline-offset-4 border-none bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-muted border-b border-border rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-24 bg-background" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-20" },
    title: {
      className: "text-4xl md:text-6xl font-serif text-foreground mb-4 italic",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-lg mx-auto font-serif italic",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10" },
    productCard: {
      className: "group overflow-hidden hover:opacity-90 transition-all duration-700 border-none rounded-none bg-transparent h-full flex flex-col relative",
      imageClassName: "w-full h-80 object-cover group-hover:scale-[1.02] transition-transform duration-1000 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700 flex items-center justify-center",
    },
    productName: { className: "font-serif italic text-xl text-muted-foreground mb-3 group-hover:text-primary transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-xl font-normal text-foreground font-serif" },
    originalPrice: { className: "text-base text-muted-foreground/50 line-through font-serif" },
    discountBadge: { className: "bg-transparent text-secondary text-xs font-serif italic" },
    saleBadge: { className: "absolute top-4 left-4 bg-secondary text-secondary-foreground rounded-none font-serif italic text-xs" },
    featuredBadge: { className: "absolute top-4 right-4 bg-transparent text-primary rounded-none font-serif italic text-xs border-b border-primary" },
    quickAddButton: { className: "bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground border-b border-border rounded-none font-serif italic" },
    addToCartButton: { className: "w-full bg-transparent text-foreground hover:bg-primary hover:text-primary-foreground rounded-none border-b-2 border-primary font-serif italic tracking-wider" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b border-primary mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 text-secondary hover:text-primary rounded-none font-serif italic underline underline-offset-8 border-none bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 text-muted-foreground hover:text-primary rounded-none font-serif italic underline underline-offset-8 border-none bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-16 flex flex-col md:flex-row gap-6 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/gradient-glow.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Gradient Glow preset - uses semantic color classes (bg-primary, text-secondary, etc.)
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-background overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-primary/20 text-primary bg-primary/10 backdrop-blur-xl px-6 py-2 rounded-full text-xs tracking-wider font-medium",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-secondary",
    },
    title: {
      className: "text-5xl md:text-7xl font-bold text-foreground mb-6 leading-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-primary",
    },
    subtitle: {
      className: "text-lg text-muted-foreground mb-10 max-w-2xl mx-auto leading-relaxed",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-primary hover:bg-primary/90 text-primary-foreground text-lg px-10 py-6 rounded-2xl font-semibold border-0 shadow-lg shadow-primary/25",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "border border-secondary/20 text-secondary hover:bg-secondary/10 backdrop-blur-xl text-lg px-10 py-6 rounded-2xl font-semibold bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-3xl font-bold text-foreground",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-2",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:shadow-primary/10 transition-all duration-500 cursor-pointer h-full border border-border rounded-2xl bg-card backdrop-blur-xl" },
    categoryName: { className: "font-semibold text-lg text-center text-card-foreground" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-primary hover:bg-primary/10 rounded-2xl font-medium",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-primary/20 text-primary hover:bg-primary/10 rounded-2xl font-medium bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-muted border border-border rounded-2xl" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-muted" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-5xl font-bold text-foreground mb-4",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-2xl mx-auto",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:shadow-primary/10 transition-all duration-500 border border-border rounded-2xl bg-card backdrop-blur-xl h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-700 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center",
    },
    productName: { className: "font-semibold text-lg text-card-foreground mb-3 group-hover:text-primary transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-2xl font-bold text-foreground" },
    originalPrice: { className: "text-lg text-muted-foreground line-through" },
    discountBadge: { className: "bg-secondary/20 text-secondary text-xs rounded-full font-medium" },
    saleBadge: { className: "absolute top-4 left-4 bg-secondary text-secondary-foreground rounded-full font-medium" },
    featuredBadge: { className: "absolute top-4 right-4 bg-primary text-primary-foreground rounded-full font-medium" },
    quickAddButton: { className: "bg-card/90 backdrop-blur-xl text-card-foreground hover:bg-primary/10 border border-border rounded-2xl" },
    addToCartButton: { className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-2xl font-semibold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-secondary/20 text-secondary hover:bg-secondary/10 rounded-2xl font-medium bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-primary/20 text-primary hover:bg-primary/10 rounded-2xl font-medium bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/index.ts"
import type { HomepageConfig } from "@/types/homepage-config"
import boldMinimal from "./bold-minimal"
import softElegance from "./soft-elegance"
import neoBrutalist from "./neo-brutalist"
import gradientGlow from "./gradient-glow"
import classicCommerce from "./classic-commerce"
import darkLuxe from "./dark-luxe"
import playfulPop from "./playful-pop"
import editorial from "./editorial"
import warmArtisan from "./warm-artisan"

const presets: Record<string, HomepageConfig> = {
  "bold-minimal": boldMinimal,
  "soft-elegance": softElegance,
  "neo-brutalist": neoBrutalist,
  "gradient-glow": gradientGlow,
  "classic-commerce": classicCommerce,
  "dark-luxe": darkLuxe,
  "playful-pop": playfulPop,
  "editorial": editorial,
  "warm-artisan": warmArtisan,
}

export default presets
[V0_FILE]typescript:file="config/presets/neo-brutalist.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Neo Brutalist preset - uses semantic color classes (bg-primary, text-secondary, etc.)
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-background overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border-[3px] border-foreground text-foreground bg-primary px-5 py-2 rounded-none text-sm font-black uppercase shadow-[4px_4px_0_0] shadow-foreground",
      text: "New Drop Alert!",
      icon: "Star",
      iconClassName: "w-4 h-4 mr-2 fill-foreground",
    },
    title: {
      className: "text-6xl md:text-8xl font-black text-foreground mb-6 leading-none",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-primary -rotate-2 inline-block",
    },
    subtitle: {
      className: "text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed font-bold",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-primary text-primary-foreground hover:translate-x-1 hover:translate-y-1 hover:shadow-none text-lg px-10 py-6 rounded-none font-black uppercase border-[3px] border-foreground shadow-[6px_6px_0_0] shadow-secondary transition-all",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "bg-secondary border-[3px] border-foreground text-secondary-foreground hover:bg-primary hover:text-primary-foreground hover:translate-x-1 hover:translate-y-1 hover:shadow-none text-lg px-10 py-6 rounded-none font-black uppercase shadow-[6px_6px_0_0] shadow-foreground transition-all",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-4xl font-black text-foreground",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 font-bold",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all duration-200 cursor-pointer h-full border-[3px] border-foreground rounded-none bg-card shadow-[6px_6px_0_0] shadow-foreground/30" },
    categoryName: { className: "font-black text-lg text-center text-card-foreground uppercase" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-foreground hover:bg-primary hover:text-primary-foreground rounded-none font-black uppercase border-[3px] border-foreground shadow-[4px_4px_0_0] shadow-foreground hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-[3px] border-foreground text-foreground hover:bg-primary hover:text-primary-foreground rounded-none font-black uppercase shadow-[6px_6px_0_0] shadow-foreground hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-muted border-[3px] border-muted-foreground/30 rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-muted" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-5xl md:text-6xl font-black text-foreground mb-4",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-2xl mx-auto font-bold text-lg",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all duration-200 border-[3px] border-foreground rounded-none bg-card h-full flex flex-col relative shadow-[6px_6px_0_0] shadow-foreground/30",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-black text-lg text-card-foreground mb-3 group-hover:text-primary transition-colors cursor-pointer line-clamp-2 h-14 leading-7 uppercase" },
    productPrice: { className: "text-2xl font-black text-foreground" },
    originalPrice: { className: "text-lg text-muted-foreground/40 line-through" },
    discountBadge: { className: "bg-secondary text-secondary-foreground text-xs rounded-none font-black uppercase" },
    saleBadge: { className: "absolute top-4 left-4 bg-secondary text-secondary-foreground rounded-none font-black uppercase border-[3px] border-foreground" },
    featuredBadge: { className: "absolute top-4 right-4 bg-primary text-primary-foreground rounded-none font-black uppercase border-[3px] border-foreground" },
    quickAddButton: { className: "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground border-[3px] border-foreground rounded-none font-black" },
    addToCartButton: { className: "w-full bg-primary text-primary-foreground hover:bg-secondary hover:text-secondary-foreground rounded-none font-black uppercase border-[3px] border-foreground" },
    loading: { className: "animate-spin rounded-none h-12 w-12 border-b-4 border-primary mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-[3px] border-foreground text-foreground hover:bg-secondary hover:text-secondary-foreground rounded-none font-black uppercase shadow-[6px_6px_0_0] shadow-foreground hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-[3px] border-foreground text-foreground hover:bg-primary hover:text-primary-foreground rounded-none font-black uppercase shadow-[6px_6px_0_0] shadow-foreground hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/playful-pop.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Playful Pop preset - uses semantic color classes (bg-primary, text-secondary, etc.)
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-background overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border-2 border-primary text-primary bg-primary/10 px-5 py-2 rounded-[2rem] text-sm font-extrabold",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-4 h-4 mr-2 fill-primary",
    },
    title: {
      className: "text-5xl md:text-8xl font-extrabold text-foreground mb-6 leading-none",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-primary",
    },
    subtitle: {
      className: "text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed font-medium",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-primary hover:bg-primary/90 hover:scale-105 hover:-rotate-1 text-primary-foreground text-lg px-10 py-6 rounded-[2rem] font-extrabold border-0 shadow-xl shadow-primary/20 transition-all",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "border-2 border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground hover:scale-105 hover:rotate-1 text-lg px-10 py-6 rounded-[2rem] font-extrabold shadow-xl transition-all bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-16 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-10" },
    title: {
      className: "text-4xl font-extrabold text-foreground",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 font-medium",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:scale-105 hover:-rotate-1 transition-all duration-300 cursor-pointer h-full border-2 border-primary/20 rounded-[2rem] bg-card" },
    categoryName: { className: "font-extrabold text-lg text-center text-card-foreground" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-primary hover:bg-primary/10 rounded-[2rem] font-extrabold",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground rounded-[2rem] font-extrabold bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-muted border-2 border-border rounded-[2rem]" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-background" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-14" },
    title: {
      className: "text-5xl md:text-6xl font-extrabold text-foreground mb-4",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-2xl mx-auto font-medium text-lg",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:scale-[1.02] hover:-rotate-1 transition-all duration-300 border-2 border-primary/10 rounded-[2rem] bg-card h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-bold text-lg text-card-foreground mb-3 group-hover:text-primary transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-2xl font-extrabold text-foreground" },
    originalPrice: { className: "text-lg text-muted-foreground line-through" },
    discountBadge: { className: "bg-secondary/10 text-secondary text-xs rounded-[2rem] font-extrabold" },
    saleBadge: { className: "absolute top-4 left-4 bg-secondary text-secondary-foreground rounded-[2rem] font-extrabold" },
    featuredBadge: { className: "absolute top-4 right-4 bg-primary text-primary-foreground rounded-[2rem] font-extrabold" },
    quickAddButton: { className: "bg-card text-card-foreground hover:bg-primary/10 border-2 border-primary/20 rounded-[2rem] font-bold" },
    addToCartButton: { className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-[2rem] font-extrabold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-4 border-primary mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground rounded-[2rem] font-extrabold transition-all bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground rounded-[2rem] font-extrabold transition-all bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/soft-elegance.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Soft Elegance preset - uses semantic color classes (bg-primary, text-secondary, etc.)
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-gradient-to-b from-primary/5 to-background overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-primary/30 text-primary bg-primary/5 px-6 py-2 rounded-full text-xs tracking-wider font-medium",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-primary/60",
    },
    title: {
      className: "text-5xl md:text-7xl font-light text-foreground mb-6 leading-tight tracking-wide",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block font-extralight italic text-primary",
    },
    subtitle: {
      className: "text-lg text-muted-foreground mb-10 max-w-xl mx-auto leading-relaxed font-light",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-primary hover:bg-primary/90 text-primary-foreground text-sm px-10 py-6 rounded-full tracking-wider font-medium border-0 shadow-lg shadow-primary/20",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground text-sm px-10 py-6 rounded-full tracking-wider font-medium bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-3xl font-light text-foreground tracking-wide",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 font-light text-sm",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:shadow-primary/10 transition-all duration-500 cursor-pointer h-full border border-primary/10 rounded-3xl bg-card" },
    categoryName: { className: "font-medium text-lg text-center text-foreground tracking-wide" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-primary hover:text-primary/80 hover:bg-primary/5 rounded-full font-medium tracking-wide",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-primary/30 text-primary hover:bg-primary/5 rounded-full tracking-wider font-medium bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-primary/5 border border-primary/10 rounded-3xl" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-gradient-to-b from-background to-primary/5" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-5xl font-light text-foreground mb-4 tracking-wide",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-2xl mx-auto font-light",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:shadow-primary/10 transition-all duration-500 border border-primary/10 rounded-3xl bg-card h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-700 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center",
    },
    productName: { className: "font-medium text-lg text-foreground mb-3 group-hover:text-primary transition-colors cursor-pointer line-clamp-2 h-14 leading-7 tracking-wide" },
    productPrice: { className: "text-2xl font-light text-foreground" },
    originalPrice: { className: "text-lg text-muted-foreground/50 line-through" },
    discountBadge: { className: "bg-secondary/20 text-secondary text-xs rounded-full font-medium" },
    saleBadge: { className: "absolute top-4 left-4 bg-secondary text-secondary-foreground rounded-full font-medium" },
    featuredBadge: { className: "absolute top-4 right-4 bg-primary text-primary-foreground rounded-full font-medium" },
    quickAddButton: { className: "bg-card text-foreground hover:bg-primary/5 border border-primary/20 rounded-full" },
    addToCartButton: { className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-full font-medium tracking-wider" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground rounded-full tracking-wider font-medium bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-primary/30 text-primary hover:bg-primary/5 rounded-full tracking-wider font-medium bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/warm-artisan.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Warm Artisan preset - uses semantic color classes (bg-primary, text-secondary, etc.)
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-background overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-primary text-primary bg-primary/10 px-5 py-2 rounded-2xl text-xs tracking-wider font-medium",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-primary",
    },
    title: {
      className: "text-5xl md:text-7xl font-serif text-foreground mb-6 leading-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-primary",
    },
    subtitle: {
      className: "text-lg text-muted-foreground mb-10 max-w-xl mx-auto leading-relaxed",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-primary hover:bg-primary/90 text-primary-foreground text-sm px-10 py-6 rounded-2xl font-semibold border-0 shadow-lg shadow-primary/20",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border border-secondary text-secondary hover:bg-secondary/10 text-sm px-10 py-6 rounded-2xl font-semibold bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-3xl font-serif text-foreground",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 text-sm",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:shadow-primary/5 transition-all duration-500 cursor-pointer h-full border border-border rounded-2xl bg-card" },
    categoryName: { className: "font-serif text-lg text-center text-card-foreground" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-primary hover:bg-primary/10 rounded-2xl font-medium",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-primary text-primary hover:bg-primary/10 rounded-2xl font-medium bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-muted border border-border rounded-2xl" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-background" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-5xl font-serif text-foreground mb-4",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-xl mx-auto",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:shadow-primary/5 transition-all duration-500 border border-border rounded-2xl bg-card h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-700 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center",
    },
    productName: { className: "font-serif text-lg text-card-foreground mb-3 group-hover:text-primary transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-2xl font-semibold text-foreground" },
    originalPrice: { className: "text-lg text-muted-foreground/50 line-through" },
    discountBadge: { className: "bg-secondary/10 text-secondary text-xs rounded-2xl font-medium" },
    saleBadge: { className: "absolute top-4 left-4 bg-secondary text-secondary-foreground rounded-2xl font-medium" },
    featuredBadge: { className: "absolute top-4 right-4 bg-primary/10 text-primary rounded-2xl font-medium" },
    quickAddButton: { className: "bg-card text-card-foreground hover:bg-primary/10 border border-border rounded-2xl" },
    addToCartButton: { className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-2xl font-semibold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-secondary text-secondary hover:bg-secondary/10 rounded-2xl font-medium bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-primary text-primary hover:bg-primary/10 rounded-2xl font-medium bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/store.ts"
export interface StoreConfig {
  storeId: string
  storeName: string
  apiBaseUrl: string
  presetId: string
  primaryColor: string
  secondaryColor: string
  metaTitle: string
  metaDescription: string
  currency: string
  language: string
  gtag: string
  logo: string
  favicon: string
  socialShareImage: string
  enableRestockNotifications?: boolean
}

const storeConfig: StoreConfig = {
  storeId: "PLACEHOLDER",
  storeName: "My Store",
  apiBaseUrl: "https://storebuilderapi.searchagora.com",
  presetId: "warm-artisan",
  primaryColor: "#000000",
  secondaryColor: "#666666",
  metaTitle: "My Store",
  metaDescription: "Welcome to our store",
  currency: "USD",
  language: "en",
  gtag: "",
  logo: "",
  favicon: "",
  socialShareImage: "",
  enableRestockNotifications: false,
}

export default storeConfig
[V0_FILE]typescriptreact:file="contexts/cart-context.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useReducer, useCallback, useEffect, useState } from "react"
import { checkout } from "@/services/api"

export interface CartItem {
  id: string // Product ID or Bundle ID
  variantId?: string // Product Variant ID (not used for bundles)
  variantIndex?: number // Fallback variant locator when no variantId is available
  variantLabel?: string // Human-readable selected options (e.g. "Size: M, Color: Red")
  name: string
  price: number
  originalPrice?: number // Original price before discount
  isOnSale?: boolean // Whether the item is on sale
  images: string[]
  quantity: number
  description: string
  type?: "product" | "bundle" // Item type (defaults to product)
  bundleId?: string // Bundle ID if type is bundle
  discountSource?: "product" | "promotion" | "none" // Pricing source for display
  promotionName?: string // Winning promotion name, when discountSource === "promotion"
}

/**
 * Stable identity for a cart line. Products are keyed by id + the chosen variant
 * (variantId, falling back to variantIndex) so multiple variants of the same
 * product are tracked as distinct lines; bundles are keyed by bundleId.
 */
export function getCartLineKey(item: CartItem): string {
  if (item.type === "bundle") return `bundle:${item.bundleId}`
  return `product:${item.id}:${item.variantId ?? item.variantIndex ?? "default"}`
}

interface CartState {
  items: CartItem[]
  isOpen: boolean
  total: number
  itemCount: number
  loading: boolean
  error: string | null
}

type CartAction =
  | { type: "ADD_ITEM"; payload: CartItem }
  | { type: "REMOVE_ITEM"; payload: string } // payload is a cart line key
  | { type: "UPDATE_QUANTITY"; payload: { key: string; quantity: number } }
  | { type: "CLEAR_CART" }
  | { type: "TOGGLE_CART" }
  | { type: "OPEN_CART" }
  | { type: "CLOSE_CART" }
  | { type: "SET_LOADING"; payload: boolean }
  | { type: "SET_ERROR"; payload: string | null }

const initialState: CartState = {
  items: [],
  isOpen: false,
  total: 0,
  itemCount: 0,
  loading: false,
  error: null,
}

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case "ADD_ITEM": {
      // Lines are merged by their composite key (id + chosen variant, or
      // bundleId) so each variant of a product is tracked separately.
      const payloadKey = getCartLineKey(action.payload)
      const existingItem = state.items.find((item) => getCartLineKey(item) === payloadKey)

let newItems: CartItem[]
      if (existingItem) {
        newItems = state.items.map((item) =>
          getCartLineKey(item) === payloadKey
            ? { ...item, quantity: item.quantity + action.payload.quantity }
            : item,
        )
      } else {
        newItems = [...state.items, action.payload]
      }

const total = newItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
      const itemCount = newItems.reduce((sum, item) => sum + item.quantity, 0)

return {
        ...state,
        items: newItems,
        total,
        itemCount,
      }
    }

case "REMOVE_ITEM": {
      // payload is a composite line key (see getCartLineKey).
      const newItems = state.items.filter((item) => getCartLineKey(item) !== action.payload)
      const total = newItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
      const itemCount = newItems.reduce((sum, item) => sum + item.quantity, 0)

return {
        ...state,
        items: newItems,
        total,
        itemCount,
      }
    }

case "UPDATE_QUANTITY": {
      const { key, quantity } = action.payload
      const newItems = state.items
        .map((item) =>
          getCartLineKey(item) === key ? { ...item, quantity: Math.max(0, quantity) } : item,
        )
        .filter((item) => item.quantity > 0) // Remove if quantity becomes 0

const total = newItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
      const itemCount = newItems.reduce((sum, item) => sum + item.quantity, 0)

return {
        ...state,
        items: newItems,
        total,
        itemCount,
      }
    }

case "CLEAR_CART":
      return {
        ...state,
        items: [],
        total: 0,
        itemCount: 0,
      }

case "TOGGLE_CART":
      return {
        ...state,
        isOpen: !state.isOpen,
      }

case "OPEN_CART":
      return {
        ...state,
        isOpen: true,
      }

case "CLOSE_CART":
      return {
        ...state,
        isOpen: false,
      }

case "SET_LOADING":
      return {
        ...state,
        loading: action.payload,
      }

case "SET_ERROR":
      return {
        ...state,
        error: action.payload,
      }

default:
      return state
  }
}

const CartContext = createContext<{
  state: CartState
  dispatch: React.Dispatch<CartAction>
  addItem: (item: CartItem) => Promise<void>
  removeItem: (lineKey: string) => Promise<void>
  updateItemQuantity: (lineKey: string, quantity: number) => Promise<void>
  clearCart: () => Promise<void>
  proceedToCheckout: () => Promise<void>
} | null>(null)

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false)
  const [initialState, setInitialState] = useState<CartState>({
    items: [],
    isOpen: false,
    total: 0,
    itemCount: 0,
    loading: false,
    error: null,
  })

// Load cart from localStorage on mount
  useEffect(() => {
    try {
      const savedCart = localStorage.getItem('agora-cart')
      if (savedCart) {
        const parsed = JSON.parse(savedCart)
        setInitialState(parsed)
      }
    } catch (err) {
      console.error('[v0] Error loading cart from localStorage:', err)
    }
    setMounted(true)
  }, [])

const [state, dispatch] = useReducer(cartReducer, initialState)

// Save cart to localStorage whenever it changes
  useEffect(() => {
    if (mounted) {
      try {
        localStorage.setItem('agora-cart', JSON.stringify(state))
      } catch (err) {
        console.error('[v0] Error saving cart to localStorage:', err)
      }
    }
  }, [state, mounted])

const addItem = useCallback(async (item: CartItem) => {
    dispatch({ type: "ADD_ITEM", payload: item })
    dispatch({ type: "OPEN_CART" })
  }, [])

const removeItem = useCallback(async (lineKey: string) => {
    dispatch({ type: "REMOVE_ITEM", payload: lineKey })
  }, [])

const updateItemQuantity = useCallback(async (lineKey: string, quantity: number) => {
    dispatch({ type: "UPDATE_QUANTITY", payload: { key: lineKey, quantity } })
  }, [])

const clearCart = useCallback(async () => {
    dispatch({ type: "CLEAR_CART" })
  }, [])

const proceedToCheckout = useCallback(async () => {
    if (state.items.length === 0) return

dispatch({ type: "SET_LOADING", payload: true })
    dispatch({ type: "SET_ERROR", payload: null })

try {
      // Format cart items for Agora API - handle both products and bundles
      const cartItems = state.items.map((item) => {
        if (item.type === "bundle") {
          return {
            type: "bundle",
            bundleId: item.bundleId,
            id: item.bundleId,
            quantity: item.quantity,
            price: item.price,
            name: item.name,
            images: item.images,
            description: item.description,
          }
        }
        // Regular product
        return {
          type: "product",
          id: item.id,
          variantId: item.variantId,
          variantIndex: item.variantIndex,
          quantity: item.quantity,
          price: item.price,
          name: item.name,
          images: item.images,
          description: item.description,
        }
      })

const response = await checkout(cartItems)

if (response.url) {
        // Redirect to checkout URL
        window.location.href = response.url
      } else {
        throw new Error("No checkout URL received")
      }
    } catch (err) {
      console.error("Checkout failed:", err)
      dispatch({ type: "SET_ERROR", payload: err instanceof Error ? err.message : "Checkout failed" })
    } finally {
      dispatch({ type: "SET_LOADING", payload: false })
    }
  }, [state.items])

if (!mounted) {
    return (
      <CartContext.Provider
        value={{
          state: initialState,
          dispatch,
          addItem,
          removeItem,
          updateItemQuantity,
          clearCart,
          proceedToCheckout,
        }}
      >
        {children}
      </CartContext.Provider>
    )
  }

return (
    <CartContext.Provider
      value={{
        state,
        dispatch,
        addItem,
        removeItem,
        updateItemQuantity,
        clearCart,
        proceedToCheckout,
      }}
    >
      {children}
    </CartContext.Provider>
  )
}

export function useCart() {
  const context = useContext(CartContext)
  if (!context) {
    throw new Error("useCart must be used within a CartProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="contexts/checkout-context.tsx"
'use client'

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

export interface ShippingOption {
  id: string
  name: string
  description?: string
  amount: number
  minDeliveryDays?: number
  maxDeliveryDays?: number
}

export interface CheckoutFormData {
  email: string
  fullName: string
  company?: string
  taxId?: string
  address: string
  addressCont?: string
  postalCode: string
  city: string
  state?: string
  country: string
  phoneNumber: string
  billingAddressSame: boolean
  orderNotes?: string
}

// Matches the POST /checkout/summary response payload
export interface CheckoutSummary {
  lineItems: any[]
  subtotal: number
  discountAmount: number
  taxAmount: number
  shippingCost: number
  totalAmount: number
  taxRate: number
  currency: string
  stripeCurrency: string
  coupon: any | null
  shippingOptions: ShippingOption[]
  selectedShipping: ShippingOption | null
}

const emptySummary: CheckoutSummary = {
  lineItems: [],
  subtotal: 0,
  discountAmount: 0,
  taxAmount: 0,
  shippingCost: 0,
  totalAmount: 0,
  taxRate: 0,
  currency: 'USD',
  stripeCurrency: 'usd',
  coupon: null,
  shippingOptions: [],
  selectedShipping: null,
}

interface CheckoutContextType {
  formData: CheckoutFormData
  setFormData: (data: CheckoutFormData) => void
  summary: CheckoutSummary
  setSummary: (summary: CheckoutSummary) => void
  selectedShippingId: string
  setSelectedShippingId: (id: string) => void
  couponCode: string
  setCouponCode: (code: string) => void
  appliedCoupon: string
  setAppliedCoupon: (code: string) => void
  allowedCountries: string[]
  setAllowedCountries: (countries: string[]) => void
  isProcessing: boolean
  setIsProcessing: (processing: boolean) => void
  shippingError: string
  setShippingError: (error: string) => void
  shippingLoading: boolean
  setShippingLoading: (loading: boolean) => void
}

const CheckoutContext = createContext<CheckoutContextType | undefined>(undefined)

export function CheckoutProvider({ children }: { children: React.ReactNode }) {
  const [formData, setFormData] = useState<CheckoutFormData>({
    email: '',
    fullName: '',
    company: '',
    taxId: '',
    address: '',
    addressCont: '',
    postalCode: '',
    city: '',
    state: '',
    country: '',
    phoneNumber: '',
    billingAddressSame: true,
    orderNotes: '',
  })

const [summary, setSummary] = useState<CheckoutSummary>(emptySummary)
  const [selectedShippingId, setSelectedShippingId] = useState('')
  const [couponCode, setCouponCode] = useState('')
  const [appliedCoupon, setAppliedCoupon] = useState('')
  const [allowedCountries, setAllowedCountries] = useState<string[]>([])
  const [isProcessing, setIsProcessing] = useState(false)
  const [shippingError, setShippingError] = useState('')
  const [shippingLoading, setShippingLoading] = useState(false)

return (
    <CheckoutContext.Provider
      value={{
        formData,
        setFormData,
        summary,
        setSummary,
        selectedShippingId,
        setSelectedShippingId,
        couponCode,
        setCouponCode,
        appliedCoupon,
        setAppliedCoupon,
        allowedCountries,
        setAllowedCountries,
        isProcessing,
        setIsProcessing,
        shippingError,
        setShippingError,
        shippingLoading,
        setShippingLoading,
      }}
    >
      {children}
    </CheckoutContext.Provider>
  )
}

export function useCheckout() {
  const context = useContext(CheckoutContext)
  if (!context) {
    throw new Error('useCheckout must be used within CheckoutProvider')
  }
  return context
}
[V0_FILE]typescriptreact:file="contexts/collections-context.tsx"
"use client"

import { createContext, useContext, useEffect, useState, type ReactNode } from "react"
import { getStoreCollections } from "@/services/api"
import type { Collection } from "@/types/product"

interface CollectionsContextType {
  collections: Collection[]
  navCollections: Collection[]
  loading: boolean
  error: string | null
  isReady: boolean
}

const CollectionsContext = createContext<CollectionsContextType>({
  collections: [],
  navCollections: [],
  loading: true,
  error: null,
  isReady: false,
})

export function CollectionsProvider({ children }: { children: ReactNode }) {
  const [collections, setCollections] = useState<Collection[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [isReady, setIsReady] = useState(false)

useEffect(() => {
    const fetchCollections = async () => {
      try {
        const response = await getStoreCollections(1, 50)
        if (response.status === "success") {
          setCollections(response.data.collections || [])
        } else {
          // API returned non-success, but don't break the app
          setCollections([])
        }
      } catch (err) {
        console.error("[v0] [CollectionsProvider] Error fetching collections:", err)
        // Don't break the app on error, just continue with empty collections
        setCollections([])
        setError("Failed to fetch collections")
      } finally {
        setLoading(false)
        setIsReady(true)
      }
    }

fetchCollections()
  }, [])

// Get last 2 collections for navbar display
  const navCollections = collections.slice(-2)

// Don't render children until collections API has completed (success or error)
  if (!isReady) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="flex flex-col items-center gap-4">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
          <p className="text-muted-foreground text-sm">Loading store...</p>
        </div>
      </div>
    )
  }

return (
    <CollectionsContext.Provider value={{ collections, navCollections, loading, error, isReady }}>
      {children}
    </CollectionsContext.Provider>
  )
}

export function useCollections() {
  const context = useContext(CollectionsContext)
  if (!context) {
    throw new Error("useCollections must be used within a CollectionsProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="contexts/compliance-context.tsx"
"use client"

import { createContext, useContext, useEffect, useState, type ReactNode } from "react"
import { getStoreCompliance } from "@/services/api"

interface ComplianceData {
  termsOfService: string
  privacyPolicy: string
  returnPolicy: string
}

interface ComplianceContextType {
  compliance: ComplianceData
  loading: boolean
  error: string | null
}

const defaultCompliance: ComplianceData = {
  termsOfService: "",
  privacyPolicy: "",
  returnPolicy: "",
}

const ComplianceContext = createContext<ComplianceContextType>({
  compliance: defaultCompliance,
  loading: true,
  error: null,
})

export function ComplianceProvider({ children }: { children: ReactNode }) {
  const [compliance, setCompliance] = useState<ComplianceData>(defaultCompliance)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchCompliance = async () => {
      try {
        const response = await getStoreCompliance()
        if (response.status === "success") {
          setCompliance({
            termsOfService: response.data?.termsOfService || "",
            privacyPolicy: response.data?.privacyPolicy || "",
            returnPolicy: response.data?.returnPolicy || "",
          })
        } else {
          // API returned non-success, but don't break the app
          setCompliance(defaultCompliance)
        }
      } catch (err) {
        console.error("[v0] [ComplianceProvider] Error fetching compliance:", err)
        // Don't break the app on error, just continue with empty compliance
        setCompliance(defaultCompliance)
        setError("Failed to fetch compliance data")
      } finally {
        setLoading(false)
      }
    }

fetchCompliance()
  }, [])

return (
    <ComplianceContext.Provider value={{ compliance, loading, error }}>
      {children}
    </ComplianceContext.Provider>
  )
}

export function useCompliance() {
  const context = useContext(ComplianceContext)
  if (!context) {
    throw new Error("useCompliance must be used within a ComplianceProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="contexts/design-mode-context.tsx"
"use client"

import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react"
import { useDemoDomain } from "@/hooks/use-demo-domain"

interface ElementData {
  type: "ELEMENT_SELECTED"
  tagName: string
  outerHTML: string
  innerHTML: string
  textContent: string
  className: string
  id: string
  attributes: Record<string, string>
  computedStyles: Record<string, string>
  boundingRect: {
    top: number
    left: number
    width: number
    height: number
  }
  route: {
    pathname: string
    search: string
    hash: string
    fullUrl: string
  }
  elementPath: string[] // Array of parent elements from root to selected element
}

interface DesignModeContextType {
  isSelectionMode: boolean
  selectedElement: HTMLElement | null
  setSelectedElement: (element: HTMLElement | null) => void
  toggleSelectionMode: () => void
  setSelectionMode: (enabled: boolean) => void
  sendElementToParent: (element: HTMLElement) => void
}

const DesignModeContext = createContext<DesignModeContextType | null>(null)

export function useDesignMode() {
  const context = useContext(DesignModeContext)
  if (!context) {
    throw new Error("useDesignMode must be used within a DesignModeProvider")
  }
  return context
}

function getElementPath(element: HTMLElement): string[] {
  const path: string[] = []
  let current: HTMLElement | null = element
  
  while (current && current !== document.body && current !== document.documentElement) {
    let selector = current.tagName.toLowerCase()
    
    if (current.id) {
      selector += `#${current.id}`
    } else if (current.className && typeof current.className === "string") {
      const mainClass = current.className.split(" ")[0]
      if (mainClass) {
        selector += `.${mainClass}`
      }
    }
    
    // Add index if there are siblings with same tag
    const parent = current.parentElement
    if (parent) {
      const siblings = Array.from(parent.children).filter(
        (child) => child.tagName === current!.tagName
      )
      if (siblings.length > 1) {
        const index = siblings.indexOf(current) + 1
        selector += `:nth-of-type(${index})`
      }
    }
    
    path.unshift(selector)
    current = current.parentElement
  }
  
  return path
}

function getElementData(element: HTMLElement): ElementData {
  const computedStyle = window.getComputedStyle(element)
  const rect = element.getBoundingClientRect()

// Get all attributes
  const attributes: Record<string, string> = {}
  for (const attr of Array.from(element.attributes)) {
    attributes[attr.name] = attr.value
  }

// Get key computed styles
  const styleProps = [
    "display",
    "position",
    "backgroundColor",
    "color",
    "fontSize",
    "fontWeight",
    "fontFamily",
    "padding",
    "margin",
    "border",
    "borderRadius",
    "width",
    "height",
    "maxWidth",
    "maxHeight",
    "minWidth",
    "minHeight",
    "flexDirection",
    "justifyContent",
    "alignItems",
    "gap",
    "gridTemplateColumns",
    "gridTemplateRows",
  ]

const computedStyles: Record<string, string> = {}
  for (const prop of styleProps) {
    computedStyles[prop] = computedStyle.getPropertyValue(
      prop.replace(/([A-Z])/g, "-$1").toLowerCase()
    )
  }

// Get current route information
  const route = {
    pathname: window.location.pathname,
    search: window.location.search,
    hash: window.location.hash,
    fullUrl: window.location.href,
  }

// Get element path from root to selected element
  const elementPath = getElementPath(element)

return {
    type: "ELEMENT_SELECTED",
    tagName: element.tagName,
    outerHTML: element.outerHTML,
    innerHTML: element.innerHTML,
    textContent: element.textContent || "",
    className: element.className,
    id: element.id,
    attributes,
    computedStyles,
    boundingRect: {
      top: rect.top,
      left: rect.left,
      width: rect.width,
      height: rect.height,
    },
    route,
    elementPath,
  }
}

export function DesignModeProvider({ children }: { children: ReactNode }) {
  const { isDemoMode } = useDemoDomain()
  const [isSelectionMode, setIsSelectionMode] = useState(false)
  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(null)

const toggleSelectionMode = useCallback(() => {
    setIsSelectionMode((prev) => !prev)
    if (isSelectionMode) {
      setSelectedElement(null)
    }
  }, [isSelectionMode])

const setSelectionMode = useCallback((enabled: boolean) => {
    setIsSelectionMode(enabled)
    if (!enabled) {
      setSelectedElement(null)
    }
  }, [])

const sendElementToParent = useCallback((element: HTMLElement) => {
    if (typeof window !== "undefined" && window.parent !== window) {
      const elementData = getElementData(element)
      window.parent.postMessage(elementData, "*")
    }
  }, [])

// Listen for messages from parent iframe
  useEffect(() => {
    if (!isDemoMode) return

const handleMessage = (event: MessageEvent) => {
      const { type, enabled } = event.data || {}

switch (type) {
        case "TOGGLE_SELECTION_MODE":
          toggleSelectionMode()
          break
        case "SET_SELECTION_MODE":
          setSelectionMode(enabled)
          break
        case "GET_SELECTION_MODE":
          if (window.parent !== window) {
            window.parent.postMessage(
              { type: "SELECTION_MODE_STATUS", enabled: isSelectionMode },
              "*"
            )
          }
          break
      }
    }

window.addEventListener("message", handleMessage)
    return () => window.removeEventListener("message", handleMessage)
  }, [isDemoMode, isSelectionMode, toggleSelectionMode, setSelectionMode])

return (
    <DesignModeContext.Provider
      value={{
        isSelectionMode,
        selectedElement,
        setSelectedElement,
        toggleSelectionMode,
        setSelectionMode,
        sendElementToParent,
      }}
    >
      {children}
    </DesignModeContext.Provider>
  )
}
[V0_FILE]typescriptreact:file="contexts/language-context.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import storeConfig from "@/config/store"

type Language = "en" | "ar"

type Currency = "USD" | "SAR"

interface CurrencyConfig {
  code: Currency
  symbol: string
  position: "before" | "after"
}

type ProductKind = "physical" | "digital" | "service"

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
  t: (key: string) => string
  dir: "ltr" | "rtl"
  currency: CurrencyConfig
  formatPrice: (price: number) => string
  getProductCTA: (productKind?: ProductKind) => string
}

const defaultCurrency: CurrencyConfig = { code: "USD", symbol: "$", position: "before" }

const defaultT = (key: string): string => {
  const keys = key.split(".")
  const lastKey = keys[keys.length - 1]
  const readable = lastKey
    .replace(/([A-Z])/g, " $1")
    .replace(/^./, (str) => str.toUpperCase())
    .trim()
  return readable
}

const defaultFormatPrice = (price: number): string => {
  return `$${price.toFixed(2)}`
}

const defaultGetProductCTA = (productKind?: ProductKind): string => {
  if (productKind === "service") return "Book Service"
  if (productKind === "digital") return "Buy Now"
  return "Add to Cart"
}

const defaultContextValue: LanguageContextType = {
  language: "en",
  setLanguage: () => {},
  t: defaultT,
  dir: "ltr",
  currency: defaultCurrency,
  formatPrice: defaultFormatPrice,
  getProductCTA: defaultGetProductCTA,
}

const LanguageContext = createContext<LanguageContextType>(defaultContextValue)

const LANGUAGE_STORAGE_KEY = "app_language"

const currencyConfig: Record<Language, CurrencyConfig> = {
  en: { code: "USD", symbol: "$", position: "before" },
  ar: { code: "SAR", symbol: "ر.س", position: "after" },
}

export function LanguageProvider({ children }: { children: React.ReactNode }) {
  const defaultLang = (storeConfig.language === "ar" ? "ar" : "en") as Language
  const [language, setLanguageState] = useState<Language>(defaultLang)
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    const savedLanguage = localStorage.getItem(LANGUAGE_STORAGE_KEY) as Language | null
    if (savedLanguage && (savedLanguage === "en" || savedLanguage === "ar")) {
      setLanguageState(savedLanguage)
      document.documentElement.lang = savedLanguage
      document.documentElement.dir = savedLanguage === "ar" ? "rtl" : "ltr"
    }
  }, [])

const setLanguage = (lang: Language) => {
    setLanguageState(lang)
    if (typeof window !== "undefined") {
      localStorage.setItem(LANGUAGE_STORAGE_KEY, lang)
      document.documentElement.lang = lang
      document.documentElement.dir = lang === "ar" ? "rtl" : "ltr"
    }
  }

const t = (key: string): string => {
    const keys = key.split(".")
    let value: any = translations[language]

for (const k of keys) {
      if (value && typeof value === "object" && k in value) {
        value = value[k]
      } else {
        // Key not found - return a human-readable fallback
        const lastKey = keys[keys.length - 1]
        const readable = lastKey
          .replace(/([A-Z])/g, " $1")
          .replace(/^./, (str) => str.toUpperCase())
          .trim()
        return readable
      }
    }

return typeof value === "string" ? value : key
  }

const dir = language === "ar" ? "rtl" : "ltr"

const currency = currencyConfig[language]

const formatPrice = (price: number): string => {
    const formattedNumber = price.toFixed(2)
    if (currency.position === "before") {
      return `${currency.symbol}${formattedNumber}`
    } else {
      return `${formattedNumber} ${currency.symbol}`
    }
  }

const getProductCTA = (productKind?: ProductKind): string => {
    if (productKind === "service") return t("cart.addToCartService")
    if (productKind === "digital") return t("cart.addToCartDigital")
    return t("cart.addToCartPhysical")
  }

const value = {
    language,
    setLanguage,
    t,
    dir,
    currency,
    formatPrice,
    getProductCTA,
  }

return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>
}

export function useLanguage() {
  return useContext(LanguageContext)
}

const translations: Record<Language, any> = {
  en: {
    nav: {
      home: "Home",
      products: "Products",
      featured: "Featured",
      about: "About",
      contact: "Contact",
      searchPlaceholder: "Search products...",
    },
    hero: {
      title: "Discover Tomorrow's Innovations Today",
      subtitle: "Explore cutting-edge products that redefine excellence. Shop the future now.",
      shopNow: "Shop Now",
      exploreCategories: "Explore Categories",
    },
    products: {
      title: "All Products",
      subtitle: "Discover our complete collection of premium products",
      loading: "Loading products...",
      noAvailable: "No products available",
      notFound: "No products found",
      viewDetails: "View Details",
      allProducts: "All Products",
      categories: "Categories",
      searchProducts: "Search products...",
      viewAllFeatured: "View All Featured",
      viewAllProducts: "View All Products",
      showing: "Showing",
      of: "of",
      products: "products",
      available: "available",
      from: "From",
    },
    categories: {
      title: "Browse Categories",
      subtitle: "Explore our collection by category",
      viewAll: "View All Categories",
      loadMore: "Load More",
      loading: "Loading categories...",
      noAvailable: "No categories available",
      searchPlaceholder: "Search categories...",
    },
    cart: {
      title: "Shopping Cart",
      yourCart: "Your Cart",
      empty: "Your cart is empty",
      continueShopping: "Continue Shopping",
      proceedToCheckout: "Proceed to Checkout",
      clearCart: "Clear Cart",
      addToCart: "Add to cart",
      addToCartPhysical: "Add to cart",
      addToCartDigital: "Buy now",
      addToCartService: "Book service",
      quickAdd: "Quick add",
      outOfStock: "Out of stock",
      remove: "Remove",
      subtotal: "Subtotal",
      shipping: "Shipping",
      calculatedAtCheckout: "Calculated at checkout",
      total: "Total",
      items: "items",
      orderSummary: "Order Summary",
    },
    productDetails: {
      backToHome: "Back to Home",
      notFound: "Product not found.",
      browseAll: "Browse All Products",
      quantity: "Quantity:",
      selectOptions: "Select Options",
      freeShipping: "Free Shipping",
      securePayment: "Secure Payment",
      easyReturns: "Easy Returns",
      description: "Description",
      details: "Details",
      productId: "Product ID:",
      brand: "Brand:",
      category: "Category:",
      subcategory: "Subcategory:",
      sku: "SKU:",
      selectedVariant: "Selected Variant:",
      stock: "Stock:",
      price: "Price:",
      inStock: "In Stock",
      outOfStock: "Out of Stock",
      available: "Available",
      units: "units",
    },
    success: {
      title: "Order Confirmed!",
      loading: "Loading order details...",
      notFound: "Order Not Found",
      unableToLoad: "Unable to load order details",
      thankYou: "Thank you for your purchase. Your order has been successfully processed.",
      orderSummary: "Order Summary",
      qty: "Qty:",
      each: "each",
      tax: "Tax",
      orderStatus: "Order Status",
      payment: "Payment:",
      orderStatusLabel: "Order Status:",
      customerInfo: "Customer Information",
      name: "Name:",
      email: "Email:",
      phone: "Phone:",
      shippingAddress: "Shipping Address",
      shippingMethod: "Shipping Method:",
      emailConfirm: "You will receive an email confirmation shortly with your order details and tracking information.",
      printReceipt: "Print Receipt",
    },
    faq: {
      title: "Frequently Asked Questions",
      subtitle: "Find answers to common questions about our products and services",
      stillHaveQuestions: "Still have questions?",
      cantFind: "Can't find the answer you're looking for? Our customer support team is here to help.",
      q1: "What payment methods do you accept?",
      a1: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and other secure payment methods. All transactions are encrypted and secure.",
      q2: "How long does shipping take?",
      a2: "Standard shipping typically takes 5-7 business days. Express shipping options are available at checkout for faster delivery (2-3 business days).",
      q3: "What is your return policy?",
      a3: "We offer a 30-day return policy for most items. Products must be unused and in their original packaging. Please contact our customer service team to initiate a return.",
      q4: "Do you ship internationally?",
      a4: "Yes, we ship to most countries worldwide. International shipping times and costs vary by location. You can see the exact shipping cost at checkout.",
      q5: "How can I track my order?",
      a5: "Once your order ships, you'll receive a tracking number via email. You can use this number to track your package on our website or the carrier's website.",
      q6: "Can I cancel or modify my order?",
      a6: "Orders can be cancelled or modified within 24 hours of placement. After that, the order may have already been processed. Please contact us as soon as possible if you need to make changes.",
      q7: "Are your products covered by warranty?",
      a7: "Most of our products come with a manufacturer's warranty. The warranty period varies by product. Check the product description for specific warranty information.",
      q8: "How do I contact customer support?",
      a8: "You can reach our customer support team via email at hello@agorabuildertemplate.com or by phone at +1 (555) 123-4567. We're available Monday-Friday, 9am-6pm EST.",
    },
    terms: {
      title: "Terms of Service",
      subtitle: "Please read these terms carefully before using our services",
      lastUpdated: "Last updated: December 2024",
      acceptance: "1. Acceptance of Terms",
      useLicense: "2. Use License",
      productInfo: "3. Product Information and Pricing",
      orders: "4. Orders and Payment",
      shipping: "5. Shipping and Delivery",
      returns: "6. Returns and Refunds",
      privacy: "7. Privacy Policy",
      liability: "8. Limitation of Liability",
      governing: "9. Governing Law",
      contactInfo: "10. Contact Information",
    },
    contact: {
      title: "Get in Touch",
      subtitle: "We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
      name: "Your Name",
      namePlaceholder: "John Doe",
      email: "Your Email",
      emailPlaceholder: "john@example.com",
      subject: "Subject",
      subjectPlaceholder: "How can we help?",
      message: "Message",
      messagePlaceholder: "Tell us more about your inquiry...",
      sendMessage: "Send us a Message",
      sending: "Sending...",
      sendButton: "Send Message",
      messageSent: "Message Sent Successfully!",
      thanksMessage: "Thank you for contacting us. We'll get back to you soon.",
      sendAnother: "Send Another Message",
      contactInfo: "Contact Information",
      customerService: "Customer Service",
      businessHours: "Business Hours",
      hours: {
        weekday: "Monday - Friday: 9:00 AM - 6:00 PM EST",
        saturday: "Saturday: 10:00 AM - 4:00 PM EST",
        sunday: "Sunday: Closed",
      },
      phone: "Phone",
      emailLabel: "Email",
      address: "Address",
      followUs: "Follow Us",
      faq: "Common Questions",
      faqQuestions: {
        shipping: "How long does shipping take?",
        returns: "What is your return policy?",
        international: "Do you ship internationally?",
      },
      faqAnswers: {
        shipping: "Standard shipping takes 5-7 business days. Express options available.",
        returns: "We offer 30-day returns on most items in original condition.",
        international: "Yes, we ship worldwide with varying delivery times.",
      },
    },
    footer: {
      quickLinks: "Quick Links",
      aboutUs: "About Us",
      termsOfService: "Terms of Service",
      customerService: "Customer Service",
      contactUs: "Contact Us",
      faq: "FAQ",
      newsletter: "Subscribe to our Newsletter",
      emailPlaceholder: "Enter your email",
      subscribe: "Subscribe",
      allRightsReserved: "All rights reserved.",
    },
    common: {
      sale: "Sale",
      featured: "Featured",
      inStock: "In Stock",
      loading: "Loading...",
      error: "Error",
      success: "Success",
      tryAgain: "Try Again",
      search: "Search",
      searchPlaceholder: "Search...",
      previous: "Previous",
      next: "Next",
    },
    featured: {
      title: "Featured Products",
      subtitle: "Discover our handpicked collection of premium products",
      error: "Failed to load featured products. Please try again.",
      notFound: "No featured products available at this time.",
    },
  },
  ar: {
    nav: {
      home: "الرئيسية",
      products: "المنتجات",
      featured: "المميزة",
      about: "من نحن",
      contact: "اتصل بنا",
      searchPlaceholder: "ابحث عن المنتجات...",
    },
    hero: {
      title: "اكتشف ابتكارات الغد اليوم",
      subtitle: "استكشف المنتجات المتطورة التي تعيد تعريف التميز. تسوق المستقبل الآن.",
      shopNow: "تسوق الآن",
      exploreCategories: "استكشف الفئات",
    },
    products: {
      title: "جميع المنتجات",
      subtitle: "اكتشف مجموعتنا الكاملة من المنتجات المميزة",
      loading: "جاري تحميل المنتجات...",
      noAvailable: "لا توجد منتجات متاحة",
      notFound: "لم يتم العثور على منتجات",
      viewDetails: "عرض التفاصيل",
      allProducts: "جميع المنتجات",
      categories: "الفئات",
      searchProducts: "ابحث عن المنتجات...",
      viewAllFeatured: "عرض جميع المنتجات المميزة",
      viewAllProducts: "عرض جميع المنتجات",
      showing: "عرض",
      of: "من",
      products: "منتج",
      available: "متوفر",
      from: "ابتداءً من",
    },
    categories: {
      title: "تصفح الفئات",
      subtitle: "استكشف مجموعتنا حسب الفئة",
      viewAll: "عرض جميع الفئات",
      loadMore: "تحميل المزيد",
      loading: "جاري تحميل الفئات...",
      noAvailable: "لا توجد فئات متاحة",
      searchPlaceholder: "ابحث عن الفئات...",
    },
    cart: {
      title: "سلة التسوق",
      yourCart: "سلتك",
      empty: "سلتك فارغة",
      continueShopping: "متابعة التسوق",
      proceedToCheckout: "إتمام الشراء",
      clearCart: "إفراغ السلة",
      addToCart: "أضف إلى السلة",
      addToCartPhysical: "أضف إلى السلة",
      addToCartDigital: "اشترِ الآن",
      addToCartService: "احجز خدمة",
      quickAdd: "إضافة سريعة",
      outOfStock: "غير متوفر",
      remove: "إزالة",
      subtotal: "المجموع الفرعي",
      shipping: "الشحن",
      calculatedAtCheckout: "يحسب عند الدفع",
      total: "الإجمالي",
      items: "عناصر",
      orderSummary: "ملخص الطلب",
    },
    productDetails: {
      backToHome: "العودة إلى الرئيسية",
      notFound: "المنتج غير موجود.",
      browseAll: "تصفح جميع المنتجات",
      quantity: "الكمية:",
      selectOptions: "حدد الخيارات",
      freeShipping: "شحن مجاني",
      securePayment: "دفع آمن",
      easyReturns: "إرجاع سهل",
      description: "الوصف",
      details: "التفاصيل",
      productId: "معرف المنتج:",
      brand: "العلامة التجارية:",
      category: "الفئة:",
      subcategory: "الفئة الفرعية:",
      sku: "رمز المنتج:",
      selectedVariant: "المتغير المحدد:",
      stock: "المخزون:",
      price: "السعر:",
      inStock: "متوفر",
      outOfStock: "غير متوفر",
      available: "متاح",
      units: "وحدات",
    },
    success: {
      title: "تم تأكيد الطلب!",
      loading: "جاري تحميل تفاصيل الطلب...",
      notFound: "الطلب غير موجود",
      unableToLoad: "غير قادر على تحميل تفاصيل الطلب",
      thankYou: "شكراً لك على الشراء. تمت معالجة طلبك بنجاح.",
      orderSummary: "ملخص الطلب",
      qty: "الكمية:",
      each: "لكل واحد",
      tax: "الضريبة",
      orderStatus: "حالة الطلب",
      payment: "الدفع:",
      orderStatusLabel: "حالة الطلب:",
      customerInfo: "معلومات العميل",
      name: "الاسم:",
      email: "البريد الإلكتروني:",
      phone: "الهاتف:",
      shippingAddress: "عنوان الشحن",
      shippingMethod: "طريقة الشحن:",
      emailConfirm: "ستتلقى رسالة تأكيد عبر البريد الإلكتروني قريباً تحتوي على تفاصيل طلبك ومعلومات التتبع.",
      printReceipt: "طباعة الإيصال",
    },
    faq: {
      title: "الأسئلة الشائعة",
      subtitle: "ابحث عن إجابات للأسئلة الشائعة حول منتجاتنا وخدماتنا",
      stillHaveQuestions: "لا تزال لديك أسئلة؟",
      cantFind: "لا يمكنك العثور على الإجابة التي تبحث عنها؟ فريق دعم العملاء لدينا هنا للمساعدة.",
      q1: "ما هي طرق الدفع التي تقبلونها؟",
      a1: "نقبل جميع بطاقات الائتمان الرئيسية (فيزا، ماستركارد، أمريكان إكسبريس)، باي بال، وطرق دفع آمنة أخرى. جميع المعاملات مشفرة وآمنة.",
      q2: "كم من الوقت يستغرق الشحن؟",
      a2: "عادة ما يستغرق الشحن القياسي 5-7 أيام عمل. تتوفر خيارات الشحن السريع عند الدفع للتسليم الأسرع (2-3 أيام عمل).",
      q3: "ما هي سياسة الإرجاع الخاصة بكم؟",
      a3: "نقدم سياسة إرجاع لمدة 30 يوماً لمعظم العناصر. يجب أن تكون المنتجات غير مستخدمة وفي عبواتها الأصلية. يرجى الاتصال بفريق خدمة العملاء لدينا لبدء الإرجاع.",
      q4: "هل تشحنون دولياً؟",
      a4: "نعم، نشحن إلى معظم الدول حول العالم. تختلف أوقات وتكاليف الشحن الدولي حسب الموقع. يمكنك رؤية تكلفة الشحن الدقيقة عند الدفع.",
      q5: "كيف يمكنني تتبع طلبي؟",
      a5: "بمجرد شحن طلبك، ستتلقى رقم تتبع عبر البريد الإلكتروني. يمكنك استخدام هذا الرقم لتتبع الطرد على موقعنا أو موقع الناقل.",
      q6: "هل يمكنني إلغاء أو تعديل طلبي؟",
      a6: "يمكن إلغاء الطلبات أو تعديلها خلال 24 ساعة من الطلب. بعد ذلك، قد يكون الطلب قد تمت معالجته بالفعل. يرجى الاتصال بنا في أقرب وقت ممكن إذا كنت بحاجة إلى إجراء تغييرات.",
      q7: "هل منتجاتكم مشمولة بالضمان؟",
      a7: "معظم منتجاتنا تأتي مع ضمان الشركة المصنعة. تختلف فترة الضمان حسب المنتج. تحقق من وصف المنتج للحصول على معلومات الضمان المحددة.",
      q8: "كيف يمكنني الاتصال بدعم العملاء؟",
      a8: "يمكنك الوصول إلى فريق دعم العملاء لدينا عبر البريد الإلكتروني على hello@agorabuildertemplate.com أو عبر الهاتف على +1 (555) 123-4567. نحن متاحون من الاثنين إلى الجمعة، من 9 صباحاً إلى 6 مساءً بتوقيت شرق الولايات المتحدة.",
    },
    terms: {
      title: "شروط الخدمة",
      subtitle: "يرجى قراءة هذه الشروط بعناية قبل استخدام خدماتنا",
      lastUpdated: "آخر تحديث: ديسمبر 2024",
      acceptance: "1. قبول الشروط",
      useLicense: "2. ترخيص الاستخدام",
      productInfo: "3. معلومات المنتج والتسعير",
      orders: "4. الطلبات والدفع",
      shipping: "5. الشحن والتسليم",
      returns: "6. المرتجعات والمبالغ المستردة",
      privacy: "7. سياسة الخصوصية",
      liability: "8. تحديد المسؤولية",
      governing: "9. القانون الحاكم",
      contactInfo: "10. معلومات الاتصال",
    },
    contact: {
      title: "تواصل معنا",
      subtitle: "نحب أن نسمع منك. أرسل لنا رسالة وسنرد في أقرب وقت ممكن.",
      name: "اسمك",
      namePlaceholder: "أحمد محمد",
      email: "بريدك الإلكتروني",
      emailPlaceholder: "ahmed@example.com",
      subject: "الموضوع",
      subjectPlaceholder: "كيف يمكننا المساعدة؟",
      message: "الرسالة",
      messagePlaceholder: "أخبرنا المزيد عن استفسارك...",
      sendMessage: "أرسل لنا رسالة",
      sending: "جاري الإرسال...",
      sendButton: "إرسال الرسالة",
      messageSent: "تم إرسال الرسالة بنجاح!",
      thanksMessage: "شكراً لتواصلك معنا. سنرد عليك قريباً.",
      sendAnother: "إرسال رسالة أخرى",
      contactInfo: "معلومات الاتصال",
      customerService: "خدمة العملاء",
      businessHours: "ساعات العمل",
      hours: {
        weekday: "الاثنين - الجمعة: 9:00 صباحاً - 6:00 مساءً بتوقيت شرق الولايات المتحدة",
        saturday: "السبت: 10:00 صباحاً - 4:00 مساءً بتوقيت شرق الولايات المتحدة",
        sunday: "الأحد: مغلق",
      },
      phone: "الهاتف",
      emailLabel: "البريد الإلكتروني",
      address: "العنوان",
      followUs: "تابعنا",
      faq: "الأسئلة الشائعة",
      faqQuestions: {
        shipping: "كم من الوقت يستغرق الشحن؟",
        returns: "ما هي سياسة الإرجاع الخاصة بكم؟",
        international: "هل تشحنون دولياً؟",
      },
      faqAnswers: {
        shipping: "يستغرق الشحن القياسي 5-7 أيام عمل. تتوفر خيارات سريعة.",
        returns: "نقدم إرجاع لمدة 30 يوماً على معظم العناصر في حالتها الأصلية.",
        international: "نعم، نشحن إلى جميع أنحاء العالم مع أوقات تسليم متفاوتة.",
      },
    },
    footer: {
      quickLinks: "روابط سريعة",
      aboutUs: "من نحن",
      termsOfService: "شروط الخدمة",
      customerService: "خدمة العملاء",
      contactUs: "اتصل بنا",
      faq: "الأسئلة الشائعة",
      newsletter: "اشترك في نشرتنا البريدية",
      emailPlaceholder: "أدخل بريدك الإلكتروني",
      subscribe: "اشترك",
      allRightsReserved: "جميع الحقوق محفوظة.",
    },
    common: {
      sale: "تخفيض",
      featured: "مميز",
      inStock: "متوفر",
      loading: "جاري التحميل...",
      error: "خطأ",
      success: "نجاح",
      tryAgain: "حاول مرة أخرى",
      search: "بحث",
      searchPlaceholder: "بحث...",
      previous: "السابق",
      next: "التالي",
    },
    featured: {
      title: "المنتجات المميزة",
      subtitle: "اكتشف مجموعتنا المختارة من المنتجات الممتازة",
      error: "فشل تحميل المنتجات المميزة. يرجى المحاولة مرة أخرى.",
      notFound: "لا توجد منتجات مميزة متاحة في هذا الوقت.",
    },
  },
}
[V0_FILE]typescript:file="hooks/use-agora-products.ts"
"use client"

import { useState, useEffect } from "react"
import { getStoreProducts, getProductDetails } from "@/services/api"
import type { Product, ProductsResponse, ProductDetailsResponse } from "@/types/product"

export function useAgoraProducts(page = 1, limit = 20, query = "") {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [pagination, setPagination] = useState<any>(null)

useEffect(() => {
    const fetchProducts = async () => {
      console.log(`[v0] [useAgoraProducts] Starting fetch - page: ${page}, limit: ${limit}, query: "${query}"`)

try {
        setLoading(true)
        setError(null)
        const response: ProductsResponse = await getStoreProducts(page, limit, query)

console.log(`[v0] [useAgoraProducts] Response received:`, response)

if (response.status === "success") {
          console.log(`[v0] [useAgoraProducts] Success - Products count: ${response.data.products?.length || 0}`)
          setProducts(response.data.products)
          setPagination(response.data.pagination)
        } else {
          console.log(`[v0] [useAgoraProducts] Failed - Response status: ${response.status}`)
          setError("Failed to fetch products")
        }
      } catch (err) {
        console.error(`[v0] [useAgoraProducts] Error:`, err)
        setError(err instanceof Error ? err.message : "Failed to fetch products")
      } finally {
        setLoading(false)
      }
    }

fetchProducts()
  }, [page, limit, query])

return { products, loading, error, pagination }
}

export function useAgoraProduct(productId: string) {
  const [product, setProduct] = useState<Product | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    if (!productId) {
      console.log(`[v0] [useAgoraProduct] No productId provided, skipping fetch`)
      return
    }

const fetchProduct = async () => {
      console.log(`[v0] [useAgoraProduct] Starting fetch for productId: ${productId}`)

try {
        setLoading(true)
        setError(null)
        const response: ProductDetailsResponse = await getProductDetails(productId)

console.log(`[v0] [useAgoraProduct] Response received:`, response)

if (response.status === "success") {
          console.log(`[v0] [useAgoraProduct] Success - Product:`, response.data)
          setProduct(response.data)
        } else {
          console.log(`[v0] [useAgoraProduct] Failed - Response status: ${response.status}`)
          setError("Failed to fetch product details")
        }
      } catch (err) {
        console.error(`[v0] [useAgoraProduct] Error:`, err)
        setError(err instanceof Error ? err.message : "Failed to fetch product details")
      } finally {
        setLoading(false)
      }
    }

fetchProduct()
  }, [productId])

return { product, loading, error }
}
[V0_FILE]typescript:file="hooks/use-demo-domain.ts"
"use client"

import { useState, useEffect } from "react"

export function useDemoDomain() {
  const [isDemoMode, setIsDemoMode] = useState(false)
  const [isProductionMode, setIsProductionMode] = useState(false)
  const [isLoaded, setIsLoaded] = useState(false)

useEffect(() => {
    const hostname = window.location.hostname

// Demo/preview domains where design mode is ENABLED
    // Only these specific domains will show the Preview/Select toggle
    const demoPatterns = [
      /\.vusercontent\.net$/,  // v0 preview domains
      /^localhost$/,           // local development
      /^127\.0\.0\.1$/,        // local development
    ]

const isDemo = demoPatterns.some((pattern) => pattern.test(hostname))
    
    // Everything that's NOT a demo domain is considered production
    // This includes:
    // - Custom domains (e.g., turingpoints.com, mystore.com)
    // - Vercel deployments (*.vercel.app)
    // - Agora subdomains (*.agorabuilder.com)
    // - Any other domain
    const isProduction = !isDemo

setIsDemoMode(isDemo)
    setIsProductionMode(isProduction)
    setIsLoaded(true)
  }, [])

return { isDemoMode, isProductionMode, isLoaded }
}
[V0_FILE]typescript:file="hooks/use-mobile.ts"
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"
'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/color-utils.ts"
export function hexToHsl(hex: string): { h: number; s: number; l: number } {
  hex = hex.replace(/^#/, "")
  const r = parseInt(hex.substring(0, 2), 16) / 255
  const g = parseInt(hex.substring(2, 4), 16) / 255
  const b = parseInt(hex.substring(4, 6), 16) / 255

const max = Math.max(r, g, b)
  const min = Math.min(r, g, b)
  let h = 0
  let s = 0
  const l = (max + min) / 2

if (max !== min) {
    const d = max - min
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
    switch (max) {
      case r:
        h = ((g - b) / d + (g < b ? 6 : 0)) / 6
        break
      case g:
        h = ((b - r) / d + 2) / 6
        break
      case b:
        h = ((r - g) / d + 4) / 6
        break
    }
  }

return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100),
  }
}

function adjustLightness(hsl: { h: number; s: number; l: number }, amount: number) {
  return {
    h: hsl.h,
    s: hsl.s,
    l: Math.min(100, Math.max(0, hsl.l + amount)),
  }
}

export function generateCssVariables(primaryHex: string, secondaryHex: string): string {
  const primary = hexToHsl(primaryHex)
  const secondary = hexToHsl(secondaryHex)

// Light mode colors
  const primaryForeground = primary.l > 50 ? { h: primary.h, s: primary.s, l: 10 } : { h: 0, s: 0, l: 98 }
  const secondaryForeground = secondary.l > 50 ? { h: secondary.h, s: secondary.s, l: 10 } : { h: 0, s: 0, l: 98 }
  const accent = { h: secondary.h, s: Math.max(10, secondary.s - 20), l: 96 }
  const accentForeground = { h: secondary.h, s: secondary.s, l: 15 }
  const muted = { h: primary.h, s: Math.max(5, primary.s - 40), l: 96 }
  const mutedForeground = { h: primary.h, s: Math.max(5, primary.s - 30), l: 45 }
  const border = { h: primary.h, s: Math.max(5, primary.s - 40), l: 90 }
  const ring = primary

// Dark mode colors
  const darkPrimary = adjustLightness(primary, 10)
  const darkPrimaryForeground = darkPrimary.l > 50 ? { h: primary.h, s: primary.s, l: 10 } : { h: 0, s: 0, l: 98 }
  const darkSecondary = adjustLightness(secondary, 10)
  const darkSecondaryForeground = darkSecondary.l > 50 ? { h: secondary.h, s: secondary.s, l: 10 } : { h: 0, s: 0, l: 98 }
  const darkAccent = { h: secondary.h, s: Math.max(10, secondary.s - 20), l: 15 }
  const darkAccentForeground = { h: secondary.h, s: secondary.s, l: 90 }
  const darkMuted = { h: primary.h, s: Math.max(5, primary.s - 40), l: 15 }
  const darkMutedForeground = { h: primary.h, s: Math.max(5, primary.s - 30), l: 64 }
  const darkBorder = { h: primary.h, s: Math.max(5, primary.s - 40), l: 15 }

return `
:root {
  --primary: ${primary.h} ${primary.s}% ${primary.l}%;
  --primary-foreground: ${primaryForeground.h} ${primaryForeground.s}% ${primaryForeground.l}%;
  --secondary: ${secondary.h} ${secondary.s}% ${secondary.l}%;
  --secondary-foreground: ${secondaryForeground.h} ${secondaryForeground.s}% ${secondaryForeground.l}%;
  --accent: ${accent.h} ${accent.s}% ${accent.l}%;
  --accent-foreground: ${accentForeground.h} ${accentForeground.s}% ${accentForeground.l}%;
  --muted: ${muted.h} ${muted.s}% ${muted.l}%;
  --muted-foreground: ${mutedForeground.h} ${mutedForeground.s}% ${mutedForeground.l}%;
  --border: ${border.h} ${border.s}% ${border.l}%;
  --input: ${border.h} ${border.s}% ${border.l}%;
  --ring: ${ring.h} ${ring.s}% ${ring.l}%;
}
.dark {
  --primary: ${darkPrimary.h} ${darkPrimary.s}% ${darkPrimary.l}%;
  --primary-foreground: ${darkPrimaryForeground.h} ${darkPrimaryForeground.s}% ${darkPrimaryForeground.l}%;
  --secondary: ${darkSecondary.h} ${darkSecondary.s}% ${darkSecondary.l}%;
  --secondary-foreground: ${darkSecondaryForeground.h} ${darkSecondaryForeground.s}% ${darkSecondaryForeground.l}%;
  --accent: ${darkAccent.h} ${darkAccent.s}% ${darkAccent.l}%;
  --accent-foreground: ${darkAccentForeground.h} ${darkAccentForeground.s}% ${darkAccentForeground.l}%;
  --muted: ${darkMuted.h} ${darkMuted.s}% ${darkMuted.l}%;
  --muted-foreground: ${darkMutedForeground.h} ${darkMutedForeground.s}% ${darkMutedForeground.l}%;
  --border: ${darkBorder.h} ${darkBorder.s}% ${darkBorder.l}%;
  --input: ${darkBorder.h} ${darkBorder.s}% ${darkBorder.l}%;
  --ring: ${ring.h} ${ring.s}% ${ring.l}%;
}
  `.trim()
}
[V0_FILE]typescript:file="lib/countries.ts"
// Maps ISO 3166-1 alpha-2 country codes to display names.
// The checkout config returns allowedCountries as alpha-2 codes (e.g. "US"),
// and the payment-intent shippingAddress.country must also be an alpha-2 code.
export const COUNTRY_NAMES: Record<string, string> = {
  AD: 'Andorra',
  AE: 'United Arab Emirates',
  AF: 'Afghanistan',
  AG: 'Antigua and Barbuda',
  AI: 'Anguilla',
  AL: 'Albania',
  AM: 'Armenia',
  AO: 'Angola',
  AQ: 'Antarctica',
  AR: 'Argentina',
  AS: 'American Samoa',
  AT: 'Austria',
  AU: 'Australia',
  AW: 'Aruba',
  AX: 'Åland Islands',
  AZ: 'Azerbaijan',
  BA: 'Bosnia and Herzegovina',
  BB: 'Barbados',
  BD: 'Bangladesh',
  BE: 'Belgium',
  BF: 'Burkina Faso',
  BG: 'Bulgaria',
  BH: 'Bahrain',
  BI: 'Burundi',
  BJ: 'Benin',
  BL: 'Saint Barthélemy',
  BM: 'Bermuda',
  BN: 'Brunei Darussalam',
  BO: 'Plurinational State of Bolivia',
  BQ: 'Bonaire, Sint Eustatius and Saba',
  BR: 'Brazil',
  BS: 'Bahamas',
  BT: 'Bhutan',
  BV: 'Bouvet Island',
  BW: 'Botswana',
  BY: 'Belarus',
  BZ: 'Belize',
  CA: 'Canada',
  CC: 'Cocos (Keeling) Islands',
  CD: 'Democratic Republic of the Congo',
  CF: 'Central African Republic',
  CH: 'Switzerland',
  CI: "Côte d'Ivoire",
  CK: 'Cook Islands',
  CL: 'Chile',
  CM: 'Cameroon',
  CN: 'China',
  CO: 'Colombia',
  CR: 'Costa Rica',
  CU: 'Cuba',
  CV: 'Cabo Verde',
  CW: 'Curaçao',
  CX: 'Christmas Island',
  CY: 'Cyprus',
  CZ: 'Czechia',
  DE: 'Germany',
  DJ: 'Djibouti',
  DK: 'Denmark',
  DM: 'Dominica',
  DO: 'Dominican Republic',
  DZ: 'Algeria',
  EC: 'Ecuador',
  EE: 'Estonia',
  EG: 'Egypt',
  EH: 'Western Sahara',
  ER: 'Eritrea',
  ES: 'Spain',
  ET: 'Ethiopia',
  FI: 'Finland',
  FJ: 'Fiji',
  FK: 'Falkland Islands (Malvinas)',
  FM: 'Federated States of Micronesia',
  FO: 'Faroe Islands',
  FR: 'France',
  GA: 'Gabon',
  GB: 'United Kingdom',
  GD: 'Grenada',
  GE: 'Georgia',
  GF: 'French Guiana',
  GG: 'Guernsey',
  GH: 'Ghana',
  GI: 'Gibraltar',
  GL: 'Greenland',
  GM: 'Gambia',
  GN: 'Guinea',
  GP: 'Guadeloupe',
  GQ: 'Equatorial Guinea',
  GR: 'Greece',
  GS: 'South Georgia and the South Sandwich Islands',
  GT: 'Guatemala',
  GU: 'Guam',
  GW: 'Guinea-Bissau',
  GY: 'Guyana',
  HK: 'Hong Kong',
  HM: 'Heard Island and McDonald Islands',
  HN: 'Honduras',
  HR: 'Croatia',
  HT: 'Haiti',
  HU: 'Hungary',
  ID: 'Indonesia',
  IE: 'Ireland',
  IL: 'Israel',
  IM: 'Isle of Man',
  IN: 'India',
  IO: 'British Indian Ocean Territory',
  IQ: 'Iraq',
  IR: 'Islamic Republic of Iran',
  IS: 'Iceland',
  IT: 'Italy',
  JE: 'Jersey',
  JM: 'Jamaica',
  JO: 'Jordan',
  JP: 'Japan',
  KE: 'Kenya',
  KG: 'Kyrgyzstan',
  KH: 'Cambodia',
  KI: 'Kiribati',
  KM: 'Comoros',
  KN: 'Saint Kitts and Nevis',
  KR: 'Republic of Korea',
  KW: 'Kuwait',
  KY: 'Cayman Islands',
  KZ: 'Kazakhstan',
  LA: "Lao People's Democratic Republic",
  LB: 'Lebanon',
  LC: 'Saint Lucia',
  LI: 'Liechtenstein',
  LK: 'Sri Lanka',
  LR: 'Liberia',
  LS: 'Lesotho',
  LT: 'Lithuania',
  LU: 'Luxembourg',
  LV: 'Latvia',
  LY: 'Libya',
  MA: 'Morocco',
  MC: 'Monaco',
  MD: 'Republic of Moldova',
  ME: 'Montenegro',
  MF: 'Saint Martin (French part)',
  MG: 'Madagascar',
  MH: 'Marshall Islands',
  MK: 'North Macedonia',
  ML: 'Mali',
  MM: 'Myanmar',
  MN: 'Mongolia',
  MO: 'Macao',
  MP: 'Northern Mariana Islands',
  MQ: 'Martinique',
  MR: 'Mauritania',
  MS: 'Montserrat',
  MT: 'Malta',
  MU: 'Mauritius',
  MV: 'Maldives',
  MW: 'Malawi',
  MX: 'Mexico',
  MY: 'Malaysia',
  MZ: 'Mozambique',
  NA: 'Namibia',
  NC: 'New Caledonia',
  NE: 'Niger',
  NF: 'Norfolk Island',
  NG: 'Nigeria',
  NI: 'Nicaragua',
  NL: 'Netherlands',
  NO: 'Norway',
  NP: 'Nepal',
  NR: 'Nauru',
  NU: 'Niue',
  NZ: 'New Zealand',
  OM: 'Oman',
  PA: 'Panama',
  PE: 'Peru',
  PF: 'French Polynesia',
  PG: 'Papua New Guinea',
  PH: 'Philippines',
  PK: 'Pakistan',
  PL: 'Poland',
  PM: 'Saint Pierre and Miquelon',
  PN: 'Pitcairn',
  PR: 'Puerto Rico',
  PS: 'State of Palestine',
  PT: 'Portugal',
  PW: 'Palau',
  PY: 'Paraguay',
  QA: 'Qatar',
  RE: 'Réunion',
  RO: 'Romania',
  RS: 'Serbia',
  RU: 'Russian Federation',
  RW: 'Rwanda',
  SA: 'Saudi Arabia',
  SB: 'Solomon Islands',
  SC: 'Seychelles',
  SD: 'Sudan',
  SE: 'Sweden',
  SG: 'Singapore',
  SH: 'Saint Helena, Ascension and Tristan da Cunha',
  SI: 'Slovenia',
  SJ: 'Svalbard and Jan Mayen',
  SK: 'Slovakia',
  SL: 'Sierra Leone',
  SM: 'San Marino',
  SN: 'Senegal',
  SO: 'Somalia',
  SR: 'Suriname',
  SS: 'South Sudan',
  ST: 'Sao Tome and Principe',
  SV: 'El Salvador',
  SX: 'Sint Maarten (Dutch part)',
  SY: 'Syrian Arab Republic',
  SZ: 'Eswatini',
  TC: 'Turks and Caicos Islands',
  TD: 'Chad',
  TF: 'French Southern Territories',
  TG: 'Togo',
  TH: 'Thailand',
  TJ: 'Tajikistan',
  TK: 'Tokelau',
  TL: 'Timor-Leste',
  TM: 'Turkmenistan',
  TN: 'Tunisia',
  TO: 'Tonga',
  TR: 'Turkey',
  TT: 'Trinidad and Tobago',
  TV: 'Tuvalu',
  TW: 'Taiwan, Province of China',
  TZ: 'United Republic of Tanzania',
  UA: 'Ukraine',
  UG: 'Uganda',
  UM: 'United States Minor Outlying Islands',
  US: 'United States',
  UY: 'Uruguay',
  UZ: 'Uzbekistan',
  VA: 'Holy See',
  VC: 'Saint Vincent and the Grenadines',
  VE: 'Bolivarian Republic of Venezuela',
  VI: 'U.S. Virgin Islands',
  VN: 'Vietnam',
  VU: 'Vanuatu',
  WF: 'Wallis and Futuna',
  WS: 'Samoa',
  YE: 'Yemen',
  YT: 'Mayotte',
  ZA: 'South Africa',
  ZM: 'Zambia',
  ZW: 'Zimbabwe'
};

export function getCountryName(code: string): string {
  return COUNTRY_NAMES[code] ?? code
}
[V0_FILE]typescript:file="lib/format-currency.ts"
/**
 * Format an amount using the store's actual currency (e.g. USD, SAR, AED).
 *
 * The checkout summary API returns a `currency` ISO code, which we pass here so
 * prices render with the correct symbol/format for any supported currency.
 * Falls back gracefully if the currency code is missing or unsupported.
 */
export function formatCurrency(amount: number, currency?: string): string {
  const value = Number.isFinite(amount) ? amount : 0
  const code = (currency || 'USD').toUpperCase()

try {
    return new Intl.NumberFormat(undefined, {
      style: 'currency',
      currency: code,
    }).format(value)
  } catch {
    // Unsupported/invalid currency code — fall back to code + amount.
    return `${code} ${value.toFixed(2)}`
  }
}
[V0_FILE]typescript:file="lib/homepage-config.ts"
import storeConfig from "@/config/store"
import presets from "@/config/presets"

const resolvedPreset = presets[storeConfig.presetId] ?? presets["bold-minimal"]

export const homepageConfig = resolvedPreset

export function getHeroConfig() {
  return homepageConfig.hero
}

export function getCategoriesSectionConfig() {
  return homepageConfig.categoriesSection
}

export function getFeaturedProductsConfig() {
  return homepageConfig.featuredProducts
}
[V0_FILE]typescript:file="lib/product-pricing.ts"
import type { DiscountSource, Product, ProductVariant, Promotion } from "@/types/product"

/**
 * Normalized pricing for a single product surface (card, PDP, cart payload).
 *
 * The backend computes a single customer-facing price per SKU using a
 * best-discount-wins rule (product sale vs timed promotion, never stacked).
 *
 * There are two pricing modes:
 *  - "product": the parent product carries `effectivePrice` / `listPrice` /
 *    `discountSource` / `promotion` and that is what we show and charge.
 *  - "variants": EACH variant carries its own `effectivePrice` / `listPrice` /
 *    `discountSource` / `promotion`. The parent price is display-only
 *    (`parentPriceForDisplayOnly`) and MUST NOT be used for cart/checkout. List
 *    cards show `fromPrice` ("From $X"); the PDP shows the selected variant.
 *
 * This single helper powers every surface (grid, category, featured,
 * collection, PDP, quick view, cart, mini-cart) so behavior is identical.
 */
export interface DisplayPricing {
  /** Price to show as the main selling price. */
  displayPrice: number
  /** Strikethrough "was" price, or null when there is no discount to show. */
  listPrice: number | null
  /** Whether a discount badge should be rendered. */
  hasDiscount: boolean
  /** Whole-number percent off for badge copy (e.g. 30 => "30% off"). */
  discountPercent: number
  /** Styling driver: product sale vs timed campaign vs full price. */
  discountSource: DiscountSource
  /** Campaign data, only set when discountSource === "promotion". */
  promotion: Promotion | null
  /** Per-unit price to persist on the cart line. */
  cartPrice: number
  /** Original price to store on the cart line for strikethrough, if any. */
  cartOriginalPrice: number | undefined
  /** Whether the cart line should be flagged on sale. */
  cartIsOnSale: boolean
  /** "product" or "variants" — how this product is priced. */
  pricingMode: "product" | "variants"
  /** True when displayPrice is a "From {price}" value (variants list cards). */
  isFromPrice: boolean
  /**
   * True when the product is priced at the variant level but no variant is
   * selected yet. Surfaces must require a selection before adding to cart and
   * never send the parent price to checkout.
   */
  requiresVariantSelection: boolean
  /** Variant id to attach to the cart line (variants mode, when selected). */
  variantId: string | undefined
  /** Variant index to attach to the cart line (fallback when no id). */
  variantIndex: number | undefined
}

function pct(listPrice: number, effectivePrice: number): number {
  if (!listPrice || listPrice <= 0 || effectivePrice >= listPrice) return 0
  return Math.round(((listPrice - effectivePrice) / listPrice) * 100)
}

function variantHasEnrichedPricing(v: ProductVariant): boolean {
  return typeof v.effectivePrice === "number" && typeof v.discountSource === "string"
}

function productHasEnrichedPricing(
  product: Pick<Product, "effectivePrice" | "discountSource">,
): boolean {
  return typeof product.effectivePrice === "number" && typeof product.discountSource === "string"
}

/** A variant is "priced" when it carries its own enriched price or a raw price. */
function variantIsPriced(v: ProductVariant): boolean {
  return variantHasEnrichedPricing(v) || typeof v.price === "number"
}

/**
 * Resolve the effective pricing mode. Prefer the backend-declared mode; fall
 * back to inferring "variants" when variants own pricing or the parent price is
 * flagged display-only.
 */
function resolvePricingMode(product: Product): "product" | "variants" {
  if (product.pricingMode === "variants" || product.pricingMode === "product") {
    return product.pricingMode
  }
  if (product.parentPriceForDisplayOnly) return "variants"
  const variants = product.variants ?? []
  if (variants.length > 0 && variants.some(variantIsPriced)) return "variants"
  return "product"
}

function lowestVariantEffective(variants: ProductVariant[]): number | undefined {
  const prices = variants
    .map((v) => (typeof v.effectivePrice === "number" ? v.effectivePrice : v.price))
    .filter((p): p is number => typeof p === "number" && p > 0)
  return prices.length ? Math.min(...prices) : undefined
}

/**
 * The priced variant with the lowest effective (customer-facing) price. This is
 * the variant the "From {price}" value refers to, so list cards / the PDP can
 * pair the "From" price with that variant's own original price + discount.
 */
function cheapestPricedVariant(variants: ProductVariant[]): ProductVariant | undefined {
  let best: ProductVariant | undefined
  let bestPrice = Number.POSITIVE_INFINITY
  for (const v of variants) {
    if (!variantIsPriced(v)) continue
    const eff = typeof v.effectivePrice === "number" ? v.effectivePrice : v.price
    if (typeof eff === "number" && eff > 0 && eff < bestPrice) {
      bestPrice = eff
      best = v
    }
  }
  return best
}

function variantIndexOf(product: Product, variant: ProductVariant | null): number | undefined {
  if (!variant || !product.variants) return undefined
  const idx = product.variants.findIndex(
    (v) => (variant.id && v.id === variant.id) || v === variant,
  )
  return idx >= 0 ? idx : undefined
}

/**
 * Resolve the display + cart pricing for a product.
 *
 * @param product Enriched (or legacy) product from any storefront API.
 * @param opts.variant The selected variant (PDP / quick view). Omit on list
 *   cards so variants-mode products show a "From {fromPrice}" value.
 */
export function getDisplayPricing(
  product: Product,
  opts: { variant?: ProductVariant | null } = {},
): DisplayPricing {
  const variant = opts.variant ?? null
  const pricingMode = resolvePricingMode(product)

// ---- Variant-level pricing ------------------------------------------------
  if (pricingMode === "variants") {
    // A variant is selected: it is the single source of truth for this SKU.
    if (variant) {
      return variantPricing(product, variant)
    }

// No variant selected yet -> show a "From" price on cards and require a
    // selection before the item can be added to cart / sent to checkout.
    //
    // The "From" value refers to the cheapest variant, so we reuse that exact
    // variant's pricing (effective price + its own original/list price +
    // discount). This way the customer always sees the variant's original price
    // alongside the discounted "From" price instead of a bare discounted number.
    const cheapest = cheapestPricedVariant(product.variants ?? [])
    if (cheapest) {
      const vp = variantPricing(product, cheapest)
      return {
        ...vp,
        // Cart fields are intentionally inert until a variant is actually chosen.
        cartPrice: vp.displayPrice,
        cartOriginalPrice: undefined,
        cartIsOnSale: false,
        isFromPrice: true,
        requiresVariantSelection: true,
        variantId: undefined,
        variantIndex: undefined,
      }
    }

// Fallback: variants-mode product whose variants don't carry their own
    // pricing (e.g. a whole-product promotion). Derive the original "From" price
    // from the product-level discount so the strikethrough still shows.
    const from =
      typeof product.fromPrice === "number"
        ? product.fromPrice
        : lowestVariantEffective(product.variants ?? []) ??
          (typeof product.effectivePrice === "number" ? product.effectivePrice : product.price)

const source = (product.discountSource as DiscountSource) ?? "none"
    const discountPercent =
      typeof product.effectiveDiscountPercentage === "number"
        ? Math.round(product.effectiveDiscountPercentage)
        : 0
    const hasDiscount = source !== "none" && discountPercent > 0
    const fromList =
      hasDiscount && discountPercent < 100 ? from / (1 - discountPercent / 100) : null

return {
      displayPrice: from,
      listPrice: fromList,
      hasDiscount,
      discountPercent,
      discountSource: hasDiscount ? source : "none",
      promotion: hasDiscount && source === "promotion" ? product.promotion ?? null : null,
      cartPrice: from,
      cartOriginalPrice: undefined,
      cartIsOnSale: false,
      pricingMode,
      isFromPrice: true,
      requiresVariantSelection: true,
      variantId: undefined,
      variantIndex: undefined,
    }
  }

// ---- Product-level pricing ------------------------------------------------
  if (productHasEnrichedPricing(product)) {
    const effective = product.effectivePrice as number
    const list = typeof product.listPrice === "number" ? product.listPrice : effective
    const source = (product.discountSource as DiscountSource) ?? "none"
    const discounted = source !== "none" && list > effective

if (!discounted) {
      return {
        displayPrice: effective,
        listPrice: null,
        hasDiscount: false,
        discountPercent: 0,
        discountSource: "none",
        promotion: null,
        cartPrice: effective,
        cartOriginalPrice: undefined,
        cartIsOnSale: false,
        pricingMode,
        isFromPrice: false,
        requiresVariantSelection: false,
        variantId: variant?.id,
        variantIndex: variantIndexOf(product, variant),
      }
    }

const discountPercent =
      typeof product.effectiveDiscountPercentage === "number" &&
      product.effectiveDiscountPercentage > 0
        ? Math.round(product.effectiveDiscountPercentage)
        : pct(list, effective)

return {
      displayPrice: effective,
      listPrice: list,
      hasDiscount: true,
      discountPercent,
      discountSource: source,
      promotion: source === "promotion" ? product.promotion ?? null : null,
      cartPrice: effective,
      cartOriginalPrice: list,
      cartIsOnSale: true,
      pricingMode,
      isFromPrice: false,
      requiresVariantSelection: false,
      variantId: variant?.id,
      variantIndex: variantIndexOf(product, variant),
    }
  }

// Legacy (unenriched) product-mode product.
  return legacyProductPricing(product, variant)
}

/**
 * Pricing for a selected variant. Prefers the backend-enriched per-variant
 * fields and falls back to the variant's raw price / sale fields.
 */
function variantPricing(product: Product, variant: ProductVariant): DisplayPricing {
  const variantIndex = variantIndexOf(product, variant)

if (variantHasEnrichedPricing(variant)) {
    const effective = variant.effectivePrice as number
    const list = typeof variant.listPrice === "number" ? variant.listPrice : effective
    const source = (variant.discountSource as DiscountSource) ?? "none"
    const discounted = source !== "none" && list > effective
    const discountPercent =
      typeof variant.effectiveDiscountPercentage === "number" &&
      variant.effectiveDiscountPercentage > 0
        ? Math.round(variant.effectiveDiscountPercentage)
        : pct(list, effective)

return {
      displayPrice: effective,
      listPrice: discounted ? list : null,
      hasDiscount: discounted,
      discountPercent: discounted ? discountPercent : 0,
      discountSource: discounted ? source : "none",
      promotion: discounted && source === "promotion" ? variant.promotion ?? null : null,
      cartPrice: effective,
      cartOriginalPrice: discounted ? list : undefined,
      cartIsOnSale: discounted,
      pricingMode: "variants",
      isFromPrice: false,
      requiresVariantSelection: false,
      variantId: variant.id,
      variantIndex,
    }
  }

// Legacy variant pricing (raw price + isOnSale/originalPrice).
  const price = variant.price ?? product.price
  const isOnSale =
    variant.isOnSale === true &&
    typeof variant.originalPrice === "number" &&
    variant.originalPrice > price
  const original = isOnSale ? (variant.originalPrice as number) : null

return {
    displayPrice: price,
    listPrice: original,
    hasDiscount: !!isOnSale,
    discountPercent: original ? pct(original, price) : 0,
    discountSource: isOnSale ? "product" : "none",
    promotion: null,
    cartPrice: price,
    cartOriginalPrice: original ?? undefined,
    cartIsOnSale: !!isOnSale,
    pricingMode: "variants",
    isFromPrice: false,
    requiresVariantSelection: false,
    variantId: variant.id,
    variantIndex,
  }
}

function legacyProductPricing(product: Product, variant: ProductVariant | null): DisplayPricing {
  const price = product.price
  const hasPercent = !!(product.discountPercentage && product.discountPercentage > 0)
  const original = hasPercent ? price / (1 - (product.discountPercentage as number) / 100) : null
  return {
    displayPrice: price,
    listPrice: original,
    hasDiscount: hasPercent && !!original,
    discountPercent: product.discountPercentage || 0,
    discountSource: hasPercent ? "product" : "none",
    promotion: null,
    cartPrice: price,
    cartOriginalPrice: original ?? undefined,
    cartIsOnSale: hasPercent,
    pricingMode: "product",
    isFromPrice: false,
    requiresVariantSelection: false,
    variantId: variant?.id,
    variantIndex: variantIndexOf(product, variant),
  }
}
[V0_FILE]typescript:file="lib/store-name.ts"
import storeConfig from "@/config/store"

export function getStoreName(): string {
  return storeConfig.storeName || "Agora Builder Template"
}
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  experimental: {
    optimizeCss: false,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "modern-storefront",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-context-menu": "^2.1.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-toggle": "^1.0.3",
    "@radix-ui/react-toggle-group": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@react-oauth/google": "^0.12.1",
    "@stripe/react-stripe-js": "^6.5.0",
    "@stripe/stripe-js": "^9.7.0",
    "class-variance-authority": "0.7.1",
    "clsx": "2.1.1",
    "cmdk": "^0.2.0",
    "embla-carousel-react": "^8.0.0",
    "input-otp": "^1.2.4",
    "lucide-react": "0.544.0",
    "next": "16.0.10",
    "next-themes": "0.4.6",
    "react": "19.0.1",
    "react-dom": "19.0.1",
    "react-hook-form": "^7.49.2",
    "react-resizable-panels": "^1.0.9",
    "recharts": "^2.10.3",
    "sonner": "^1.3.1",
    "tailwind-merge": "3.3.1",
    "tailwindcss-animate": "1.0.7",
    "vaul": "^0.9.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]yaml:file="pnpm-lock.yaml"
lockfileVersion: '9.0'

settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false

importers:

.:
    dependencies:
      '@hookform/resolvers':
        specifier: ^3.3.4
        version: 3.10.0(react-hook-form@7.77.0(react@19.0.1))
      '@radix-ui/react-accordion':
        specifier: ^1.1.2
        version: 1.2.12(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-alert-dialog':
        specifier: ^1.0.5
        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-aspect-ratio':
        specifier: ^1.0.3
        version: 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-avatar':
        specifier: ^1.0.4
        version: 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-checkbox':
        specifier: ^1.0.4
        version: 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-collapsible':
        specifier: ^1.0.3
        version: 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-context-menu':
        specifier: ^2.1.5
        version: 2.2.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-dialog':
        specifier: ^1.0.5
        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-dropdown-menu':
        specifier: ^2.0.6
        version: 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-hover-card':
        specifier: ^1.0.7
        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-label':
        specifier: ^2.0.2
        version: 2.1.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-menubar':
        specifier: ^1.0.4
        version: 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-navigation-menu':
        specifier: ^1.1.4
        version: 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-popover':
        specifier: ^1.0.7
        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-progress':
        specifier: ^1.0.3
        version: 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-radio-group':
        specifier: ^1.1.3
        version: 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-scroll-area':
        specifier: ^1.0.5
        version: 1.2.10(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-select':
        specifier: ^2.0.0
        version: 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-separator':
        specifier: ^1.0.3
        version: 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slider':
        specifier: ^1.1.2
        version: 1.3.6(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slot':
        specifier: ^1.0.2
        version: 1.2.4(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-switch':
        specifier: ^1.0.3
        version: 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-tabs':
        specifier: ^1.0.4
        version: 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-toast':
        specifier: ^1.1.5
        version: 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-toggle':
        specifier: ^1.0.3
        version: 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-toggle-group':
        specifier: ^1.0.4
        version: 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-tooltip':
        specifier: ^1.0.7
        version: 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@react-oauth/google':
        specifier: ^0.12.1
        version: 0.12.2(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@stripe/react-stripe-js':
        specifier: ^6.5.0
        version: 6.5.0(@stripe/stripe-js@9.7.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@stripe/stripe-js':
        specifier: ^9.7.0
        version: 9.7.0
      class-variance-authority:
        specifier: 0.7.1
        version: 0.7.1
      clsx:
        specifier: 2.1.1
        version: 2.1.1
      cmdk:
        specifier: ^0.2.0
        version: 0.2.1(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      embla-carousel-react:
        specifier: ^8.0.0
        version: 8.6.0(react@19.0.1)
      input-otp:
        specifier: ^1.2.4
        version: 1.4.2(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      lucide-react:
        specifier: 0.544.0
        version: 0.544.0(react@19.0.1)
      next:
        specifier: 16.0.10
        version: 16.0.10(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      next-themes:
        specifier: 0.4.6
        version: 0.4.6(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react:
        specifier: 19.0.1
        version: 19.0.1
      react-dom:
        specifier: 19.0.1
        version: 19.0.1(react@19.0.1)
      react-hook-form:
        specifier: ^7.49.2
        version: 7.77.0(react@19.0.1)
      react-resizable-panels:
        specifier: ^1.0.9
        version: 1.0.10(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      recharts:
        specifier: ^2.10.3
        version: 2.15.4(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      sonner:
        specifier: ^1.3.1
        version: 1.7.4(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      tailwind-merge:
        specifier: 3.3.1
        version: 3.3.1
      tailwindcss-animate:
        specifier: 1.0.7
        version: 1.0.7(tailwindcss@3.4.19)
      vaul:
        specifier: ^0.9.0
        version: 0.9.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
    devDependencies:
      '@types/node':
        specifier: ^20
        version: 20.19.41
      '@types/react':
        specifier: ^18
        version: 18.3.29
      '@types/react-dom':
        specifier: ^18
        version: 18.3.7(@types/react@18.3.29)
      autoprefixer:
        specifier: ^10.0.1
        version: 10.5.0(postcss@8.5.15)
      postcss:
        specifier: ^8
        version: 8.5.15
      tailwindcss:
        specifier: ^3.4.17
        version: 3.4.19
      typescript:
        specifier: ^5
        version: 5.9.3

packages:

'@alloc/quick-lru@5.2.0':
    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
    engines: {node: '>=10'}

'@babel/runtime@7.29.7':
    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
    engines: {node: '>=6.9.0'}

'@emnapi/runtime@1.10.0':
    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}

'@floating-ui/core@1.7.5':
    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}

'@floating-ui/dom@1.7.6':
    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}

'@floating-ui/react-dom@2.1.8':
    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
    peerDependencies:
      react: '>=16.8.0'
      react-dom: '>=16.8.0'

'@floating-ui/utils@0.2.11':
    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}

'@hookform/resolvers@3.10.0':
    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
    peerDependencies:
      react-hook-form: ^7.0.0

'@img/colour@1.1.0':
    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
    engines: {node: '>=18'}

'@img/sharp-darwin-arm64@0.34.5':
    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm64]
    os: [darwin]

'@img/sharp-darwin-x64@0.34.5':
    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [x64]
    os: [darwin]

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

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

'@img/sharp-libvips-linux-arm64@1.2.4':
    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
    cpu: [arm64]
    os: [linux]
    libc: [glibc]

'@img/sharp-libvips-linux-arm@1.2.4':
    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
    cpu: [arm]
    os: [linux]
    libc: [glibc]

'@img/sharp-libvips-linux-ppc64@1.2.4':
    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
    cpu: [ppc64]
    os: [linux]
    libc: [glibc]

'@img/sharp-libvips-linux-riscv64@1.2.4':
    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
    cpu: [riscv64]
    os: [linux]
    libc: [glibc]

'@img/sharp-libvips-linux-s390x@1.2.4':
    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
    cpu: [s390x]
    os: [linux]
    libc: [glibc]

'@img/sharp-libvips-linux-x64@1.2.4':
    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
    cpu: [x64]
    os: [linux]
    libc: [glibc]

'@img/sharp-libvips-linuxmusl-arm64@1.2.4':
    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
    cpu: [arm64]
    os: [linux]
    libc: [musl]

'@img/sharp-libvips-linuxmusl-x64@1.2.4':
    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
    cpu: [x64]
    os: [linux]
    libc: [musl]

'@img/sharp-linux-arm64@0.34.5':
    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm64]
    os: [linux]
    libc: [glibc]

'@img/sharp-linux-arm@0.34.5':
    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm]
    os: [linux]
    libc: [glibc]

'@img/sharp-linux-ppc64@0.34.5':
    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [ppc64]
    os: [linux]
    libc: [glibc]

'@img/sharp-linux-riscv64@0.34.5':
    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [riscv64]
    os: [linux]
    libc: [glibc]

'@img/sharp-linux-s390x@0.34.5':
    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [s390x]
    os: [linux]
    libc: [glibc]

'@img/sharp-linux-x64@0.34.5':
    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [x64]
    os: [linux]
    libc: [glibc]

'@img/sharp-linuxmusl-arm64@0.34.5':
    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm64]
    os: [linux]
    libc: [musl]

'@img/sharp-linuxmusl-x64@0.34.5':
    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [x64]
    os: [linux]
    libc: [musl]

'@img/sharp-wasm32@0.34.5':
    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [wasm32]

'@img/sharp-win32-arm64@0.34.5':
    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm64]
    os: [win32]

'@img/sharp-win32-ia32@0.34.5':
    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [ia32]
    os: [win32]

'@img/sharp-win32-x64@0.34.5':
    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [x64]
    os: [win32]

'@jridgewell/gen-mapping@0.3.13':
    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}

'@jridgewell/resolve-uri@3.1.2':
    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
    engines: {node: '>=6.0.0'}

'@jridgewell/sourcemap-codec@1.5.5':
    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}

'@jridgewell/trace-mapping@0.3.31':
    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}

'@next/env@16.0.10':
    resolution: {integrity: sha512-8tuaQkyDVgeONQ1MeT9Mkk8pQmZapMKFh5B+OrFUlG3rVmYTXcXlBetBgTurKXGaIZvkoqRT9JL5K3phXcgang==}

'@next/swc-darwin-arm64@16.0.10':
    resolution: {integrity: sha512-4XgdKtdVsaflErz+B5XeG0T5PeXKDdruDf3CRpnhN+8UebNa5N2H58+3GDgpn/9GBurrQ1uWW768FfscwYkJRg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [darwin]

'@next/swc-darwin-x64@16.0.10':
    resolution: {integrity: sha512-spbEObMvRKkQ3CkYVOME+ocPDFo5UqHb8EMTS78/0mQ+O1nqE8toHJVioZo4TvebATxgA8XMTHHrScPrn68OGw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [darwin]

'@next/swc-linux-arm64-gnu@16.0.10':
    resolution: {integrity: sha512-uQtWE3X0iGB8apTIskOMi2w/MKONrPOUCi5yLO+v3O8Mb5c7K4Q5KD1jvTpTF5gJKa3VH/ijKjKUq9O9UhwOYw==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
    libc: [glibc]

'@next/swc-linux-arm64-musl@16.0.10':
    resolution: {integrity: sha512-llA+hiDTrYvyWI21Z0L1GiXwjQaanPVQQwru5peOgtooeJ8qx3tlqRV2P7uH2pKQaUfHxI/WVarvI5oYgGxaTw==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
    libc: [musl]

'@next/swc-linux-x64-gnu@16.0.10':
    resolution: {integrity: sha512-AK2q5H0+a9nsXbeZ3FZdMtbtu9jxW4R/NgzZ6+lrTm3d6Zb7jYrWcgjcpM1k8uuqlSy4xIyPR2YiuUr+wXsavA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
    libc: [glibc]

'@next/swc-linux-x64-musl@16.0.10':
    resolution: {integrity: sha512-1TDG9PDKivNw5550S111gsO4RGennLVl9cipPhtkXIFVwo31YZ73nEbLjNC8qG3SgTz/QZyYyaFYMeY4BKZR/g==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
    libc: [musl]

'@next/swc-win32-arm64-msvc@16.0.10':
    resolution: {integrity: sha512-aEZIS4Hh32xdJQbHz121pyuVZniSNoqDVx1yIr2hy+ZwJGipeqnMZBJHyMxv2tiuAXGx6/xpTcQJ6btIiBjgmg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [win32]

'@next/swc-win32-x64-msvc@16.0.10':
    resolution: {integrity: sha512-E+njfCoFLb01RAFEnGZn6ERoOqhK1Gl3Lfz1Kjnj0Ulfu7oJbuMyvBKNj/bw8XZnenHDASlygTjZICQW+rYW1Q==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [win32]

'@nodelib/fs.scandir@2.1.5':
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}

'@nodelib/fs.stat@2.0.5':
    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
    engines: {node: '>= 8'}

'@nodelib/fs.walk@1.2.8':
    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
    engines: {node: '>= 8'}

'@radix-ui/number@1.1.1':
    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}

'@radix-ui/primitive@1.0.0':
    resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==}

'@radix-ui/primitive@1.1.3':
    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}

'@radix-ui/react-accordion@1.2.12':
    resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-alert-dialog@1.1.15':
    resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-arrow@1.1.7':
    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-aspect-ratio@1.1.8':
    resolution: {integrity: sha512-5nZrJTF7gH+e0nZS7/QxFz6tJV4VimhQb1avEgtsJxvvIp5JilL+c58HICsKzPxghdwaDt48hEfPM1au4zGy+w==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-avatar@1.1.11':
    resolution: {integrity: sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-checkbox@1.3.3':
    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-collapsible@1.1.12':
    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-collection@1.1.7':
    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-compose-refs@1.0.0':
    resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-compose-refs@1.1.2':
    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-context-menu@2.2.16':
    resolution: {integrity: sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-context@1.0.0':
    resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-context@1.1.2':
    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-context@1.1.3':
    resolution: {integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-dialog@1.0.0':
    resolution: {integrity: sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0
      react-dom: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-dialog@1.1.15':
    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-direction@1.1.1':
    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-dismissable-layer@1.0.0':
    resolution: {integrity: sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0
      react-dom: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-dismissable-layer@1.1.11':
    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-dropdown-menu@2.1.16':
    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-focus-guards@1.0.0':
    resolution: {integrity: sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-focus-guards@1.1.3':
    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-focus-scope@1.0.0':
    resolution: {integrity: sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0
      react-dom: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-focus-scope@1.1.7':
    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-hover-card@1.1.15':
    resolution: {integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-id@1.0.0':
    resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-id@1.1.1':
    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-label@2.1.8':
    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-menu@2.1.16':
    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-menubar@1.1.16':
    resolution: {integrity: sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-navigation-menu@1.2.14':
    resolution: {integrity: sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-popover@1.1.15':
    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-popper@1.2.8':
    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-portal@1.0.0':
    resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0
      react-dom: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-portal@1.1.9':
    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-presence@1.0.0':
    resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0
      react-dom: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-presence@1.1.5':
    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-primitive@1.0.0':
    resolution: {integrity: sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0
      react-dom: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-primitive@2.1.3':
    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-primitive@2.1.4':
    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-progress@1.1.8':
    resolution: {integrity: sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-radio-group@1.3.8':
    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-roving-focus@1.1.11':
    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-scroll-area@1.2.10':
    resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-select@2.2.6':
    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-separator@1.1.8':
    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-slider@1.3.6':
    resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-slot@1.0.0':
    resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-slot@1.2.3':
    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-slot@1.2.4':
    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-switch@1.2.6':
    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-tabs@1.1.13':
    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-toast@1.2.15':
    resolution: {integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-toggle-group@1.1.11':
    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-toggle@1.1.10':
    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-tooltip@1.2.8':
    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/react-use-callback-ref@1.0.0':
    resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-use-callback-ref@1.1.1':
    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-use-controllable-state@1.0.0':
    resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-use-controllable-state@1.2.2':
    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-use-effect-event@0.0.2':
    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-use-escape-keydown@1.0.0':
    resolution: {integrity: sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-use-escape-keydown@1.1.1':
    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-use-is-hydrated@0.1.0':
    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-use-layout-effect@1.0.0':
    resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0

'@radix-ui/react-use-layout-effect@1.1.1':
    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-use-previous@1.1.1':
    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-use-rect@1.1.1':
    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-use-size@1.1.1':
    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

'@radix-ui/react-visually-hidden@1.2.3':
    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
    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
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true

'@radix-ui/rect@1.1.1':
    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}

'@react-oauth/google@0.12.2':
    resolution: {integrity: sha512-d1GVm2uD4E44EJft2RbKtp8Z1fp/gK8Lb6KHgs3pHlM0PxCXGLaq8LLYQYENnN4xPWO1gkL4apBtlPKzpLvZwg==}
    peerDependencies:
      react: '>=16.8.0'
      react-dom: '>=16.8.0'

'@stripe/react-stripe-js@6.5.0':
    resolution: {integrity: sha512-MF+H1dXcmlBxBO56F4GlVK0ArpHrKtaOlSZdppqynTmUHVII9M0MedKJd9bLOfWaYe3fFEhd0cQfU/8srWf8yw==}
    peerDependencies:
      '@stripe/stripe-js': '>=9.5.0 <10.0.0'
      react: '>=16.8.0 <20.0.0'
      react-dom: '>=16.8.0 <20.0.0'

'@stripe/stripe-js@9.7.0':
    resolution: {integrity: sha512-r1ElolvWXM4aYnZZVHvKW3EDL8JcwEuIgTuWxlB5lvC+YsvjkQ0gX35x9d8dTDubX395fViLVqkaolVs1PmIQQ==}
    engines: {node: '>=12.16'}

'@swc/helpers@0.5.15':
    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}

'@types/d3-array@3.2.2':
    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}

'@types/d3-color@3.1.3':
    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}

'@types/d3-ease@3.0.2':
    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}

'@types/d3-interpolate@3.0.4':
    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}

'@types/d3-path@3.1.1':
    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}

'@types/d3-scale@4.0.9':
    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}

'@types/d3-shape@3.1.8':
    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}

'@types/d3-time@3.0.4':
    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}

'@types/d3-timer@3.0.2':
    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}

'@types/node@20.19.41':
    resolution: {integrity: sha512-ECymXOukMnOoVkC2bb1Vc/w/836DXncOg5m8Xj1RH7xSHZJWNYY6Zh7EH477vcnD5egKNNfy2RpNOmuChhFPgQ==}

'@types/prop-types@15.7.15':
    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}

'@types/react-dom@18.3.7':
    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
    peerDependencies:
      '@types/react': ^18.0.0

'@types/react@18.3.29':
    resolution: {integrity: sha512-ch0qJdr2JY0r04NXSprbK6TXOgnaJ1Tz23fm5W+z0/CBah6BSBc3n96h7K9GOtwh0HrilNWHIBzE1Ko4Dcw/Wg==}

any-promise@1.3.0:
    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}

anymatch@3.1.3:
    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
    engines: {node: '>= 8'}

arg@5.0.2:
    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}

aria-hidden@1.2.6:
    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
    engines: {node: '>=10'}

autoprefixer@10.5.0:
    resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
    engines: {node: ^10 || ^12 || >=14}
    hasBin: true
    peerDependencies:
      postcss: ^8.1.0

baseline-browser-mapping@2.10.33:
    resolution: {integrity: sha512-bA6+tcSLpz2tIEdDXZPpPTIuxBcC4+w6SieaYyfigIa4h8GlFxbA17v22Vx3JUtuZQj9SgOsnbK+aTBzyDyEuw==}
    engines: {node: '>=6.0.0'}
    hasBin: true

binary-extensions@2.3.0:
    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
    engines: {node: '>=8'}

braces@3.0.3:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
    engines: {node: '>=8'}

browserslist@4.28.2:
    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true

camelcase-css@2.0.1:
    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
    engines: {node: '>= 6'}

caniuse-lite@1.0.30001793:
    resolution: {integrity: sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==}

chokidar@3.6.0:
    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
    engines: {node: '>= 8.10.0'}

class-variance-authority@0.7.1:
    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}

client-only@0.0.1:
    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}

clsx@2.1.1:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}

cmdk@0.2.1:
    resolution: {integrity: sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==}
    peerDependencies:
      react: ^18.0.0
      react-dom: ^18.0.0

commander@4.1.1:
    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
    engines: {node: '>= 6'}

cssesc@3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
    hasBin: true

csstype@3.2.3:
    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}

d3-array@3.2.4:
    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
    engines: {node: '>=12'}

d3-color@3.1.0:
    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
    engines: {node: '>=12'}

d3-ease@3.0.1:
    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
    engines: {node: '>=12'}

d3-format@3.1.2:
    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
    engines: {node: '>=12'}

d3-interpolate@3.0.1:
    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
    engines: {node: '>=12'}

d3-path@3.1.0:
    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
    engines: {node: '>=12'}

d3-scale@4.0.2:
    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
    engines: {node: '>=12'}

d3-shape@3.2.0:
    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
    engines: {node: '>=12'}

d3-time-format@4.1.0:
    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
    engines: {node: '>=12'}

d3-time@3.1.0:
    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
    engines: {node: '>=12'}

d3-timer@3.0.1:
    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
    engines: {node: '>=12'}

decimal.js-light@2.5.1:
    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}

detect-libc@2.1.2:
    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
    engines: {node: '>=8'}

detect-node-es@1.1.0:
    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}

didyoumean@1.2.2:
    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}

dlv@1.1.3:
    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}

dom-helpers@5.2.1:
    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}

electron-to-chromium@1.5.364:
    resolution: {integrity: sha512-G/dYE3+AYhyHwzTwg8UbnXf7zqMERYh7l2jJ3QujhFsH8agSYwtnGAR2aZ7f0AakIKJXd5En/Hre4igIUrdlYw==}

embla-carousel-react@8.6.0:
    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
    peerDependencies:
      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc

embla-carousel-reactive-utils@8.6.0:
    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
    peerDependencies:
      embla-carousel: 8.6.0

embla-carousel@8.6.0:
    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}

es-errors@1.3.0:
    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
    engines: {node: '>= 0.4'}

escalade@3.2.0:
    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
    engines: {node: '>=6'}

eventemitter3@4.0.7:
    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}

fast-equals@5.4.0:
    resolution: {integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==}
    engines: {node: '>=6.0.0'}

fast-glob@3.3.3:
    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
    engines: {node: '>=8.6.0'}

fastq@1.20.1:
    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}

fdir@6.5.0:
    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
    engines: {node: '>=12.0.0'}
    peerDependencies:
      picomatch: ^3 || ^4
    peerDependenciesMeta:
      picomatch:
        optional: true

fill-range@7.1.1:
    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
    engines: {node: '>=8'}

fraction.js@5.3.4:
    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}

fsevents@2.3.3:
    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]

function-bind@1.1.2:
    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}

get-nonce@1.0.1:
    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
    engines: {node: '>=6'}

glob-parent@5.1.2:
    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
    engines: {node: '>= 6'}

glob-parent@6.0.2:
    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
    engines: {node: '>=10.13.0'}

hasown@2.0.4:
    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
    engines: {node: '>= 0.4'}

input-otp@1.4.2:
    resolution: {integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==}
    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

internmap@2.0.3:
    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
    engines: {node: '>=12'}

is-binary-path@2.1.0:
    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
    engines: {node: '>=8'}

is-core-module@2.16.2:
    resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
    engines: {node: '>= 0.4'}

is-extglob@2.1.1:
    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
    engines: {node: '>=0.10.0'}

is-glob@4.0.3:
    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
    engines: {node: '>=0.10.0'}

is-number@7.0.0:
    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
    engines: {node: '>=0.12.0'}

jiti@1.21.7:
    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
    hasBin: true

js-tokens@4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}

lilconfig@3.1.3:
    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
    engines: {node: '>=14'}

lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}

lodash@4.18.1:
    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}

loose-envify@1.4.0:
    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
    hasBin: true

lucide-react@0.544.0:
    resolution: {integrity: sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==}
    peerDependencies:
      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0

merge2@1.4.1:
    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
    engines: {node: '>= 8'}

micromatch@4.0.8:
    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
    engines: {node: '>=8.6'}

mz@2.7.0:
    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}

nanoid@3.3.12:
    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true

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

next@16.0.10:
    resolution: {integrity: sha512-RtWh5PUgI+vxlV3HdR+IfWA1UUHu0+Ram/JBO4vWB54cVPentCD0e+lxyAYEsDTqGGMg7qpjhKh6dc6aW7W/sA==}
    engines: {node: '>=20.9.0'}
    hasBin: true
    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
    peerDependenciesMeta:
      '@opentelemetry/api':
        optional: true
      '@playwright/test':
        optional: true
      babel-plugin-react-compiler:
        optional: true
      sass:
        optional: true

node-releases@2.0.46:
    resolution: {integrity: sha512-GYVXHE2KnrzAfsAjl4uP++evGFCrAU1jta4ubEjIG7YWt/64Gqv66a30yKwWczVjA6j3bM4nBwH7Pk1JmDHaxQ==}
    engines: {node: '>=18'}

normalize-path@3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
    engines: {node: '>=0.10.0'}

object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}

object-hash@3.0.0:
    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
    engines: {node: '>= 6'}

path-parse@1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}

picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}

picomatch@2.3.2:
    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
    engines: {node: '>=8.6'}

picomatch@4.0.4:
    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
    engines: {node: '>=12'}

pify@2.3.0:
    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
    engines: {node: '>=0.10.0'}

pirates@4.0.7:
    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
    engines: {node: '>= 6'}

postcss-import@15.1.0:
    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      postcss: ^8.0.0

postcss-js@4.1.0:
    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
    engines: {node: ^12 || ^14 || >= 16}
    peerDependencies:
      postcss: ^8.4.21

postcss-load-config@6.0.1:
    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
    engines: {node: '>= 18'}
    peerDependencies:
      jiti: '>=1.21.0'
      postcss: '>=8.0.9'
      tsx: ^4.8.1
      yaml: ^2.4.2
    peerDependenciesMeta:
      jiti:
        optional: true
      postcss:
        optional: true
      tsx:
        optional: true
      yaml:
        optional: true

postcss-nested@6.2.0:
    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
    engines: {node: '>=12.0'}
    peerDependencies:
      postcss: ^8.2.14

postcss-selector-parser@6.1.2:
    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
    engines: {node: '>=4'}

postcss-value-parser@4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}

postcss@8.4.31:
    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
    engines: {node: ^10 || ^12 || >=14}

postcss@8.5.15:
    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
    engines: {node: ^10 || ^12 || >=14}

prop-types@15.8.1:
    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}

queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}

react-dom@19.0.1:
    resolution: {integrity: sha512-3TJg51HSbJiLVYCS6vWwWsyqoS36aGEOCmtLLHxROlSZZ5Bk10xpxHFbrCu4DdqgR85DDc9Vucxqhai3g2xjtA==}
    peerDependencies:
      react: ^19.0.1

react-hook-form@7.77.0:
    resolution: {integrity: sha512-Sslh9YDYc0GDlWT/lxasnIduNo4v3yyvqRGvmGKUre5AFjDs/HV9/OafHGD8d+sB2yoL4UIL9L8X9i0WlZZebg==}
    engines: {node: '>=18.0.0'}
    peerDependencies:
      react: ^16.8.0 || ^17 || ^18 || ^19

react-is@16.13.1:
    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}

react-is@18.3.1:
    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}

react-remove-scroll-bar@2.3.8:
    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
    engines: {node: '>=10'}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
    peerDependenciesMeta:
      '@types/react':
        optional: true

react-remove-scroll@2.5.4:
    resolution: {integrity: sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==}
    engines: {node: '>=10'}
    peerDependencies:
      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
      react: ^16.8.0 || ^17.0.0 || ^18.0.0
    peerDependenciesMeta:
      '@types/react':
        optional: true

react-remove-scroll@2.7.2:
    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
    engines: {node: '>=10'}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

react-resizable-panels@1.0.10:
    resolution: {integrity: sha512-0+g0CNqregkuocr+Mi+e6wgWVARnKTYIX3U1QK7GlkLQKCmbymZakx80YGwcRO7HNnKJTQ5v38HlBos/cGxWvg==}
    peerDependencies:
      react: ^16.14.0 || ^17.0.0 || ^18.0.0
      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0

react-smooth@4.0.4:
    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
    peerDependencies:
      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0

react-style-singleton@2.2.3:
    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
    engines: {node: '>=10'}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

react-transition-group@4.4.5:
    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
    peerDependencies:
      react: '>=16.6.0'
      react-dom: '>=16.6.0'

react@19.0.1:
    resolution: {integrity: sha512-nVRaZCuEyvu69sWrkdwjP6QY57C+lY+uMNNMyWUFJb9Z/JlaBOQus7mSMfGYsblv7R691u6SSJA/dX9IRnyyLQ==}
    engines: {node: '>=0.10.0'}

read-cache@1.0.0:
    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}

readdirp@3.6.0:
    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
    engines: {node: '>=8.10.0'}

recharts-scale@0.4.5:
    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}

recharts@2.15.4:
    resolution: {integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==}
    engines: {node: '>=14'}
    deprecated: 1.x and 2.x branches are no longer active. Bump to Recharts v3 to receive latest features and bugfixes. See https://github.com/recharts/recharts/wiki/3.0-migration-guide
    peerDependencies:
      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0

resolve@1.22.12:
    resolution: {integrity: sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==}
    engines: {node: '>= 0.4'}
    hasBin: true

reusify@1.1.0:
    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}

run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}

scheduler@0.25.0:
    resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}

semver@7.8.1:
    resolution: {integrity: sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==}
    engines: {node: '>=10'}
    hasBin: true

sharp@0.34.5:
    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}

sonner@1.7.4:
    resolution: {integrity: sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==}
    peerDependencies:
      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc

source-map-js@1.2.1:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}

styled-jsx@5.1.6:
    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
    engines: {node: '>= 12.0.0'}
    peerDependencies:
      '@babel/core': '*'
      babel-plugin-macros: '*'
      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
    peerDependenciesMeta:
      '@babel/core':
        optional: true
      babel-plugin-macros:
        optional: true

sucrase@3.35.1:
    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
    engines: {node: '>=16 || 14 >=14.17'}
    hasBin: true

supports-preserve-symlinks-flag@1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}

tailwind-merge@3.3.1:
    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}

tailwindcss-animate@1.0.7:
    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
    peerDependencies:
      tailwindcss: '>=3.0.0 || insiders'

tailwindcss@3.4.19:
    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
    engines: {node: '>=14.0.0'}
    hasBin: true

thenify-all@1.6.0:
    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
    engines: {node: '>=0.8'}

thenify@3.3.1:
    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}

tiny-invariant@1.3.3:
    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}

tinyglobby@0.2.17:
    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
    engines: {node: '>=12.0.0'}

to-regex-range@5.0.1:
    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
    engines: {node: '>=8.0'}

ts-interface-checker@0.1.13:
    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}

tslib@2.8.1:
    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}

typescript@5.9.3:
    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
    engines: {node: '>=14.17'}
    hasBin: true

undici-types@6.21.0:
    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}

update-browserslist-db@1.2.3:
    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
    hasBin: true
    peerDependencies:
      browserslist: '>= 4.21.0'

use-callback-ref@1.3.3:
    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
    engines: {node: '>=10'}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

use-sidecar@1.1.3:
    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
    engines: {node: '>=10'}
    peerDependencies:
      '@types/react': '*'
      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
    peerDependenciesMeta:
      '@types/react':
        optional: true

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

util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}

vaul@0.9.9:
    resolution: {integrity: sha512-7afKg48srluhZwIkaU+lgGtFCUsYBSGOl8vcc8N/M3YQlZFlynHD15AE+pwrYdc826o7nrIND4lL9Y6b9WWZZQ==}
    peerDependencies:
      react: ^16.8 || ^17.0 || ^18.0
      react-dom: ^16.8 || ^17.0 || ^18.0

victory-vendor@36.9.2:
    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}

snapshots:

'@alloc/quick-lru@5.2.0': {}

'@babel/runtime@7.29.7': {}

'@emnapi/runtime@1.10.0':
    dependencies:
      tslib: 2.8.1
    optional: true

'@floating-ui/core@1.7.5':
    dependencies:
      '@floating-ui/utils': 0.2.11

'@floating-ui/dom@1.7.6':
    dependencies:
      '@floating-ui/core': 1.7.5
      '@floating-ui/utils': 0.2.11

'@floating-ui/react-dom@2.1.8(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@floating-ui/dom': 1.7.6
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

'@floating-ui/utils@0.2.11': {}

'@hookform/resolvers@3.10.0(react-hook-form@7.77.0(react@19.0.1))':
    dependencies:
      react-hook-form: 7.77.0(react@19.0.1)

'@img/colour@1.1.0':
    optional: true

'@img/sharp-darwin-arm64@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-darwin-arm64': 1.2.4
    optional: true

'@img/sharp-darwin-x64@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-darwin-x64': 1.2.4
    optional: true

'@img/sharp-libvips-darwin-arm64@1.2.4':
    optional: true

'@img/sharp-libvips-darwin-x64@1.2.4':
    optional: true

'@img/sharp-libvips-linux-arm64@1.2.4':
    optional: true

'@img/sharp-libvips-linux-arm@1.2.4':
    optional: true

'@img/sharp-libvips-linux-ppc64@1.2.4':
    optional: true

'@img/sharp-libvips-linux-riscv64@1.2.4':
    optional: true

'@img/sharp-libvips-linux-s390x@1.2.4':
    optional: true

'@img/sharp-libvips-linux-x64@1.2.4':
    optional: true

'@img/sharp-libvips-linuxmusl-arm64@1.2.4':
    optional: true

'@img/sharp-libvips-linuxmusl-x64@1.2.4':
    optional: true

'@img/sharp-linux-arm64@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-linux-arm64': 1.2.4
    optional: true

'@img/sharp-linux-arm@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-linux-arm': 1.2.4
    optional: true

'@img/sharp-linux-ppc64@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-linux-ppc64': 1.2.4
    optional: true

'@img/sharp-linux-riscv64@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-linux-riscv64': 1.2.4
    optional: true

'@img/sharp-linux-s390x@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-linux-s390x': 1.2.4
    optional: true

'@img/sharp-linux-x64@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-linux-x64': 1.2.4
    optional: true

'@img/sharp-linuxmusl-arm64@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
    optional: true

'@img/sharp-linuxmusl-x64@0.34.5':
    optionalDependencies:
      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
    optional: true

'@img/sharp-wasm32@0.34.5':
    dependencies:
      '@emnapi/runtime': 1.10.0
    optional: true

'@img/sharp-win32-arm64@0.34.5':
    optional: true

'@img/sharp-win32-ia32@0.34.5':
    optional: true

'@img/sharp-win32-x64@0.34.5':
    optional: true

'@jridgewell/gen-mapping@0.3.13':
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
      '@jridgewell/trace-mapping': 0.3.31

'@jridgewell/resolve-uri@3.1.2': {}

'@jridgewell/sourcemap-codec@1.5.5': {}

'@jridgewell/trace-mapping@0.3.31':
    dependencies:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

'@next/env@16.0.10': {}

'@next/swc-darwin-arm64@16.0.10':
    optional: true

'@next/swc-darwin-x64@16.0.10':
    optional: true

'@next/swc-linux-arm64-gnu@16.0.10':
    optional: true

'@next/swc-linux-arm64-musl@16.0.10':
    optional: true

'@next/swc-linux-x64-gnu@16.0.10':
    optional: true

'@next/swc-linux-x64-musl@16.0.10':
    optional: true

'@next/swc-win32-arm64-msvc@16.0.10':
    optional: true

'@next/swc-win32-x64-msvc@16.0.10':
    optional: true

'@nodelib/fs.scandir@2.1.5':
    dependencies:
      '@nodelib/fs.stat': 2.0.5
      run-parallel: 1.2.0

'@nodelib/fs.stat@2.0.5': {}

'@nodelib/fs.walk@1.2.8':
    dependencies:
      '@nodelib/fs.scandir': 2.1.5
      fastq: 1.20.1

'@radix-ui/number@1.1.1': {}

'@radix-ui/primitive@1.0.0':
    dependencies:
      '@babel/runtime': 7.29.7

'@radix-ui/primitive@1.1.3': {}

'@radix-ui/react-accordion@1.2.12(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-arrow@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-aspect-ratio@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-avatar@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-context': 1.1.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-checkbox@1.3.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-collapsible@1.1.12(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-collection@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-compose-refs@1.0.0(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      react: 19.0.1

'@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-context-menu@2.2.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-context@1.0.0(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      react: 19.0.1

'@radix-ui/react-context@1.1.2(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-context@1.1.3(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-dialog@1.0.0(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/primitive': 1.0.0
      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.1)
      '@radix-ui/react-context': 1.0.0(react@19.0.1)
      '@radix-ui/react-dismissable-layer': 1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-focus-guards': 1.0.0(react@19.0.1)
      '@radix-ui/react-focus-scope': 1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-id': 1.0.0(react@19.0.1)
      '@radix-ui/react-portal': 1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-presence': 1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slot': 1.0.0(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.0.0(react@19.0.1)
      aria-hidden: 1.2.6
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
      react-remove-scroll: 2.5.4(@types/react@18.3.29)(react@19.0.1)
    transitivePeerDependencies:
      - '@types/react'

'@radix-ui/react-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      aria-hidden: 1.2.6
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
      react-remove-scroll: 2.7.2(@types/react@18.3.29)(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-direction@1.1.1(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-dismissable-layer@1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/primitive': 1.0.0
      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.1)
      '@radix-ui/react-primitive': 1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.0.1)
      '@radix-ui/react-use-escape-keydown': 1.0.0(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

'@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-focus-guards@1.0.0(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      react: 19.0.1

'@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-focus-scope@1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.1)
      '@radix-ui/react-primitive': 1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

'@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-hover-card@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-id@1.0.0(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/react-use-layout-effect': 1.0.0(react@19.0.1)
      react: 19.0.1

'@radix-ui/react-id@1.1.1(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-label@2.1.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      aria-hidden: 1.2.6
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
      react-remove-scroll: 2.7.2(@types/react@18.3.29)(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-menubar@1.1.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      aria-hidden: 1.2.6
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
      react-remove-scroll: 2.7.2(@types/react@18.3.29)(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-popper@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@floating-ui/react-dom': 2.1.8(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/rect': 1.1.1
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-portal@1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/react-primitive': 1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

'@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-presence@1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.0.0(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

'@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-primitive@1.0.0(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/react-slot': 1.0.0(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

'@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-primitive@2.1.4(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-progress@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-context': 1.1.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-radio-group@1.3.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-roving-focus@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-scroll-area@1.2.10(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/number': 1.1.1
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-select@2.2.6(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/number': 1.1.1
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      aria-hidden: 1.2.6
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
      react-remove-scroll: 2.7.2(@types/react@18.3.29)(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-separator@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-slider@1.3.6(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/number': 1.1.1
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-slot@1.0.0(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/react-compose-refs': 1.0.0(react@19.0.1)
      react: 19.0.1

'@radix-ui/react-slot@1.2.3(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-slot@1.2.4(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-switch@1.2.6(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-tabs@1.1.13(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-toast@1.2.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-toggle-group@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-toggle@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-tooltip@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-context': 1.1.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-id': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/react-use-callback-ref@1.0.0(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      react: 19.0.1

'@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-use-controllable-state@1.0.0(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.0.1)
      react: 19.0.1

'@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.29)(react@19.0.1)
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-use-escape-keydown@1.0.0(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@radix-ui/react-use-callback-ref': 1.0.0(react@19.0.1)
      react: 19.0.1

'@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      react: 19.0.1
      use-sync-external-store: 1.6.0(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-use-layout-effect@1.0.0(react@19.0.1)':
    dependencies:
      '@babel/runtime': 7.29.7
      react: 19.0.1

'@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-use-previous@1.1.1(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-use-rect@1.1.1(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      '@radix-ui/rect': 1.1.1
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-use-size@1.1.1(@types/react@18.3.29)(react@19.0.1)':
    dependencies:
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.29)(react@19.0.1)
      react: 19.0.1
    optionalDependencies:
      '@types/react': 18.3.29

'@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29
      '@types/react-dom': 18.3.7(@types/react@18.3.29)

'@radix-ui/rect@1.1.1': {}

'@react-oauth/google@0.12.2(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

'@stripe/react-stripe-js@6.5.0(@stripe/stripe-js@9.7.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
    dependencies:
      '@stripe/stripe-js': 9.7.0
      prop-types: 15.8.1
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

'@stripe/stripe-js@9.7.0': {}

'@swc/helpers@0.5.15':
    dependencies:
      tslib: 2.8.1

'@types/d3-array@3.2.2': {}

'@types/d3-color@3.1.3': {}

'@types/d3-ease@3.0.2': {}

'@types/d3-interpolate@3.0.4':
    dependencies:
      '@types/d3-color': 3.1.3

'@types/d3-path@3.1.1': {}

'@types/d3-scale@4.0.9':
    dependencies:
      '@types/d3-time': 3.0.4

'@types/d3-shape@3.1.8':
    dependencies:
      '@types/d3-path': 3.1.1

'@types/d3-time@3.0.4': {}

'@types/d3-timer@3.0.2': {}

'@types/node@20.19.41':
    dependencies:
      undici-types: 6.21.0

'@types/prop-types@15.7.15': {}

'@types/react-dom@18.3.7(@types/react@18.3.29)':
    dependencies:
      '@types/react': 18.3.29

'@types/react@18.3.29':
    dependencies:
      '@types/prop-types': 15.7.15
      csstype: 3.2.3

any-promise@1.3.0: {}

anymatch@3.1.3:
    dependencies:
      normalize-path: 3.0.0
      picomatch: 2.3.2

arg@5.0.2: {}

aria-hidden@1.2.6:
    dependencies:
      tslib: 2.8.1

autoprefixer@10.5.0(postcss@8.5.15):
    dependencies:
      browserslist: 4.28.2
      caniuse-lite: 1.0.30001793
      fraction.js: 5.3.4
      picocolors: 1.1.1
      postcss: 8.5.15
      postcss-value-parser: 4.2.0

baseline-browser-mapping@2.10.33: {}

binary-extensions@2.3.0: {}

braces@3.0.3:
    dependencies:
      fill-range: 7.1.1

browserslist@4.28.2:
    dependencies:
      baseline-browser-mapping: 2.10.33
      caniuse-lite: 1.0.30001793
      electron-to-chromium: 1.5.364
      node-releases: 2.0.46
      update-browserslist-db: 1.2.3(browserslist@4.28.2)

camelcase-css@2.0.1: {}

caniuse-lite@1.0.30001793: {}

chokidar@3.6.0:
    dependencies:
      anymatch: 3.1.3
      braces: 3.0.3
      glob-parent: 5.1.2
      is-binary-path: 2.1.0
      is-glob: 4.0.3
      normalize-path: 3.0.0
      readdirp: 3.6.0
    optionalDependencies:
      fsevents: 2.3.3

class-variance-authority@0.7.1:
    dependencies:
      clsx: 2.1.1

client-only@0.0.1: {}

clsx@2.1.1: {}

cmdk@0.2.1(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      '@radix-ui/react-dialog': 1.0.0(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    transitivePeerDependencies:
      - '@types/react'

commander@4.1.1: {}

cssesc@3.0.0: {}

csstype@3.2.3: {}

d3-array@3.2.4:
    dependencies:
      internmap: 2.0.3

d3-color@3.1.0: {}

d3-ease@3.0.1: {}

d3-format@3.1.2: {}

d3-interpolate@3.0.1:
    dependencies:
      d3-color: 3.1.0

d3-path@3.1.0: {}

d3-scale@4.0.2:
    dependencies:
      d3-array: 3.2.4
      d3-format: 3.1.2
      d3-interpolate: 3.0.1
      d3-time: 3.1.0
      d3-time-format: 4.1.0

d3-shape@3.2.0:
    dependencies:
      d3-path: 3.1.0

d3-time-format@4.1.0:
    dependencies:
      d3-time: 3.1.0

d3-time@3.1.0:
    dependencies:
      d3-array: 3.2.4

d3-timer@3.0.1: {}

decimal.js-light@2.5.1: {}

detect-libc@2.1.2:
    optional: true

detect-node-es@1.1.0: {}

didyoumean@1.2.2: {}

dlv@1.1.3: {}

dom-helpers@5.2.1:
    dependencies:
      '@babel/runtime': 7.29.7
      csstype: 3.2.3

electron-to-chromium@1.5.364: {}

embla-carousel-react@8.6.0(react@19.0.1):
    dependencies:
      embla-carousel: 8.6.0
      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
      react: 19.0.1

embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
    dependencies:
      embla-carousel: 8.6.0

embla-carousel@8.6.0: {}

es-errors@1.3.0: {}

escalade@3.2.0: {}

eventemitter3@4.0.7: {}

fast-equals@5.4.0: {}

fast-glob@3.3.3:
    dependencies:
      '@nodelib/fs.stat': 2.0.5
      '@nodelib/fs.walk': 1.2.8
      glob-parent: 5.1.2
      merge2: 1.4.1
      micromatch: 4.0.8

fastq@1.20.1:
    dependencies:
      reusify: 1.1.0

fdir@6.5.0(picomatch@4.0.4):
    optionalDependencies:
      picomatch: 4.0.4

fill-range@7.1.1:
    dependencies:
      to-regex-range: 5.0.1

fraction.js@5.3.4: {}

fsevents@2.3.3:
    optional: true

function-bind@1.1.2: {}

get-nonce@1.0.1: {}

glob-parent@5.1.2:
    dependencies:
      is-glob: 4.0.3

glob-parent@6.0.2:
    dependencies:
      is-glob: 4.0.3

hasown@2.0.4:
    dependencies:
      function-bind: 1.1.2

input-otp@1.4.2(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

internmap@2.0.3: {}

is-binary-path@2.1.0:
    dependencies:
      binary-extensions: 2.3.0

is-core-module@2.16.2:
    dependencies:
      hasown: 2.0.4

is-extglob@2.1.1: {}

is-glob@4.0.3:
    dependencies:
      is-extglob: 2.1.1

is-number@7.0.0: {}

jiti@1.21.7: {}

js-tokens@4.0.0: {}

lilconfig@3.1.3: {}

lines-and-columns@1.2.4: {}

lodash@4.18.1: {}

loose-envify@1.4.0:
    dependencies:
      js-tokens: 4.0.0

lucide-react@0.544.0(react@19.0.1):
    dependencies:
      react: 19.0.1

merge2@1.4.1: {}

micromatch@4.0.8:
    dependencies:
      braces: 3.0.3
      picomatch: 2.3.2

mz@2.7.0:
    dependencies:
      any-promise: 1.3.0
      object-assign: 4.1.1
      thenify-all: 1.6.0

nanoid@3.3.12: {}

next-themes@0.4.6(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

next@16.0.10(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      '@next/env': 16.0.10
      '@swc/helpers': 0.5.15
      caniuse-lite: 1.0.30001793
      postcss: 8.4.31
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
      styled-jsx: 5.1.6(react@19.0.1)
    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.5
    transitivePeerDependencies:
      - '@babel/core'
      - babel-plugin-macros

node-releases@2.0.46: {}

normalize-path@3.0.0: {}

object-assign@4.1.1: {}

object-hash@3.0.0: {}

path-parse@1.0.7: {}

picocolors@1.1.1: {}

picomatch@2.3.2: {}

picomatch@4.0.4: {}

pify@2.3.0: {}

pirates@4.0.7: {}

postcss-import@15.1.0(postcss@8.5.15):
    dependencies:
      postcss: 8.5.15
      postcss-value-parser: 4.2.0
      read-cache: 1.0.0
      resolve: 1.22.12

postcss-js@4.1.0(postcss@8.5.15):
    dependencies:
      camelcase-css: 2.0.1
      postcss: 8.5.15

postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.15):
    dependencies:
      lilconfig: 3.1.3
    optionalDependencies:
      jiti: 1.21.7
      postcss: 8.5.15

postcss-nested@6.2.0(postcss@8.5.15):
    dependencies:
      postcss: 8.5.15
      postcss-selector-parser: 6.1.2

postcss-selector-parser@6.1.2:
    dependencies:
      cssesc: 3.0.0
      util-deprecate: 1.0.2

postcss-value-parser@4.2.0: {}

postcss@8.4.31:
    dependencies:
      nanoid: 3.3.12
      picocolors: 1.1.1
      source-map-js: 1.2.1

postcss@8.5.15:
    dependencies:
      nanoid: 3.3.12
      picocolors: 1.1.1
      source-map-js: 1.2.1

prop-types@15.8.1:
    dependencies:
      loose-envify: 1.4.0
      object-assign: 4.1.1
      react-is: 16.13.1

queue-microtask@1.2.3: {}

react-dom@19.0.1(react@19.0.1):
    dependencies:
      react: 19.0.1
      scheduler: 0.25.0

react-hook-form@7.77.0(react@19.0.1):
    dependencies:
      react: 19.0.1

react-is@16.13.1: {}

react-is@18.3.1: {}

react-remove-scroll-bar@2.3.8(@types/react@18.3.29)(react@19.0.1):
    dependencies:
      react: 19.0.1
      react-style-singleton: 2.2.3(@types/react@18.3.29)(react@19.0.1)
      tslib: 2.8.1
    optionalDependencies:
      '@types/react': 18.3.29

react-remove-scroll@2.5.4(@types/react@18.3.29)(react@19.0.1):
    dependencies:
      react: 19.0.1
      react-remove-scroll-bar: 2.3.8(@types/react@18.3.29)(react@19.0.1)
      react-style-singleton: 2.2.3(@types/react@18.3.29)(react@19.0.1)
      tslib: 2.8.1
      use-callback-ref: 1.3.3(@types/react@18.3.29)(react@19.0.1)
      use-sidecar: 1.1.3(@types/react@18.3.29)(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29

react-remove-scroll@2.7.2(@types/react@18.3.29)(react@19.0.1):
    dependencies:
      react: 19.0.1
      react-remove-scroll-bar: 2.3.8(@types/react@18.3.29)(react@19.0.1)
      react-style-singleton: 2.2.3(@types/react@18.3.29)(react@19.0.1)
      tslib: 2.8.1
      use-callback-ref: 1.3.3(@types/react@18.3.29)(react@19.0.1)
      use-sidecar: 1.1.3(@types/react@18.3.29)(react@19.0.1)
    optionalDependencies:
      '@types/react': 18.3.29

react-resizable-panels@1.0.10(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

react-smooth@4.0.4(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      fast-equals: 5.4.0
      prop-types: 15.8.1
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
      react-transition-group: 4.4.5(react-dom@19.0.1(react@19.0.1))(react@19.0.1)

react-style-singleton@2.2.3(@types/react@18.3.29)(react@19.0.1):
    dependencies:
      get-nonce: 1.0.1
      react: 19.0.1
      tslib: 2.8.1
    optionalDependencies:
      '@types/react': 18.3.29

react-transition-group@4.4.5(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      '@babel/runtime': 7.29.7
      dom-helpers: 5.2.1
      loose-envify: 1.4.0
      prop-types: 15.8.1
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

react@19.0.1: {}

read-cache@1.0.0:
    dependencies:
      pify: 2.3.0

readdirp@3.6.0:
    dependencies:
      picomatch: 2.3.2

recharts-scale@0.4.5:
    dependencies:
      decimal.js-light: 2.5.1

recharts@2.15.4(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      clsx: 2.1.1
      eventemitter3: 4.0.7
      lodash: 4.18.1
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
      react-is: 18.3.1
      react-smooth: 4.0.4(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      recharts-scale: 0.4.5
      tiny-invariant: 1.3.3
      victory-vendor: 36.9.2

resolve@1.22.12:
    dependencies:
      es-errors: 1.3.0
      is-core-module: 2.16.2
      path-parse: 1.0.7
      supports-preserve-symlinks-flag: 1.0.0

reusify@1.1.0: {}

run-parallel@1.2.0:
    dependencies:
      queue-microtask: 1.2.3

scheduler@0.25.0: {}

semver@7.8.1:
    optional: true

sharp@0.34.5:
    dependencies:
      '@img/colour': 1.1.0
      detect-libc: 2.1.2
      semver: 7.8.1
    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
    optional: true

sonner@1.7.4(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)

source-map-js@1.2.1: {}

styled-jsx@5.1.6(react@19.0.1):
    dependencies:
      client-only: 0.0.1
      react: 19.0.1

sucrase@3.35.1:
    dependencies:
      '@jridgewell/gen-mapping': 0.3.13
      commander: 4.1.1
      lines-and-columns: 1.2.4
      mz: 2.7.0
      pirates: 4.0.7
      tinyglobby: 0.2.17
      ts-interface-checker: 0.1.13

supports-preserve-symlinks-flag@1.0.0: {}

tailwind-merge@3.3.1: {}

tailwindcss-animate@1.0.7(tailwindcss@3.4.19):
    dependencies:
      tailwindcss: 3.4.19

tailwindcss@3.4.19:
    dependencies:
      '@alloc/quick-lru': 5.2.0
      arg: 5.0.2
      chokidar: 3.6.0
      didyoumean: 1.2.2
      dlv: 1.1.3
      fast-glob: 3.3.3
      glob-parent: 6.0.2
      is-glob: 4.0.3
      jiti: 1.21.7
      lilconfig: 3.1.3
      micromatch: 4.0.8
      normalize-path: 3.0.0
      object-hash: 3.0.0
      picocolors: 1.1.1
      postcss: 8.5.15
      postcss-import: 15.1.0(postcss@8.5.15)
      postcss-js: 4.1.0(postcss@8.5.15)
      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.15)
      postcss-nested: 6.2.0(postcss@8.5.15)
      postcss-selector-parser: 6.1.2
      resolve: 1.22.12
      sucrase: 3.35.1
    transitivePeerDependencies:
      - tsx
      - yaml

thenify-all@1.6.0:
    dependencies:
      thenify: 3.3.1

thenify@3.3.1:
    dependencies:
      any-promise: 1.3.0

tiny-invariant@1.3.3: {}

tinyglobby@0.2.17:
    dependencies:
      fdir: 6.5.0(picomatch@4.0.4)
      picomatch: 4.0.4

to-regex-range@5.0.1:
    dependencies:
      is-number: 7.0.0

ts-interface-checker@0.1.13: {}

tslib@2.8.1: {}

typescript@5.9.3: {}

undici-types@6.21.0: {}

update-browserslist-db@1.2.3(browserslist@4.28.2):
    dependencies:
      browserslist: 4.28.2
      escalade: 3.2.0
      picocolors: 1.1.1

use-callback-ref@1.3.3(@types/react@18.3.29)(react@19.0.1):
    dependencies:
      react: 19.0.1
      tslib: 2.8.1
    optionalDependencies:
      '@types/react': 18.3.29

use-sidecar@1.1.3(@types/react@18.3.29)(react@19.0.1):
    dependencies:
      detect-node-es: 1.1.0
      react: 19.0.1
      tslib: 2.8.1
    optionalDependencies:
      '@types/react': 18.3.29

use-sync-external-store@1.6.0(react@19.0.1):
    dependencies:
      react: 19.0.1

util-deprecate@1.0.2: {}

vaul@0.9.9(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1):
    dependencies:
      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
      react: 19.0.1
      react-dom: 19.0.1(react@19.0.1)
    transitivePeerDependencies:
      - '@types/react'
      - '@types/react-dom'

victory-vendor@36.9.2:
    dependencies:
      '@types/d3-array': 3.2.2
      '@types/d3-ease': 3.0.2
      '@types/d3-interpolate': 3.0.4
      '@types/d3-scale': 4.0.9
      '@types/d3-shape': 3.1.8
      '@types/d3-time': 3.0.4
      '@types/d3-timer': 3.0.2
      d3-array: 3.2.4
      d3-ease: 3.0.1
      d3-interpolate: 3.0.1
      d3-scale: 4.0.2
      d3-shape: 3.2.0
      d3-time: 3.1.0
      d3-timer: 3.0.1
[V0_FILE]javascript:file="postcss.config.js"
/** @type {import('postcss-load-config').Config} */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
[V0_FILE]xml:file="public/icon.svg"
<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"
<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"
<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]typescript:file="services/api.ts"
import storeConfig from "@/config/store"

const BASE_URL = storeConfig.apiBaseUrl
const STORE_ID = storeConfig.storeId
const TOKEN_KEY = "auth_token"

export const getStoreProducts = async (page = 1, limit = 20, query = "") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/products?page=${page}&limit=${limit}${query ? `&q=${query}` : ""}`
  console.log(`[v0] [getStoreProducts] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getStoreProducts] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getStoreProducts] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getStoreProducts] Error:`, error)
    throw error
  }
}

export const getProductDetails = async (productId: string) => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/products/${productId}`
  console.log(`[v0] [getProductDetails] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getProductDetails] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getProductDetails] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getProductDetails] Error:`, error)
    throw error
  }
}

export const getStoreInfo = async () => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}`
  console.log(`[v0] [getStoreInfo] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getStoreInfo] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getStoreInfo] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getStoreInfo] Error:`, error)
    throw error
  }
}

export const checkout = async (cartItems: any[]) => {
  const url = `${BASE_URL}/storefront/v1/stores/checkout`
  console.log(`[v0] [checkout] Posting to: ${url}`)

try {
    const token = typeof window !== "undefined" ? localStorage.getItem(TOKEN_KEY) : null

const headers: Record<string, string> = {
      "Content-Type": "application/json",
    }

if (token) {
      headers["Authorization"] = `${token}`
    }

const response = await fetch(url, {
      method: "POST",
      headers,
      body: JSON.stringify({
        storeId: STORE_ID,
        cartItems,
      }),
    })

console.log(`[v0] [checkout] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [checkout] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [checkout] Error:`, error)
    throw error
  }
}

export const checkoutSuccess = async (sessionId: string) => {
  const url = `${BASE_URL}/storefront/v1/stores/checkout/success`
  console.log(`[v0] [checkoutSuccess] Posting to: ${url}`)

try {
    const headers: Record<string, string> = {
      "Content-Type": "application/json",
    }

const response = await fetch(url, {
      method: "POST",
      headers,
      body: JSON.stringify({
        session_id: sessionId,
      }),
    })

console.log(`[v0] [checkoutSuccess] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [checkoutSuccess] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [checkoutSuccess] Error:`, error)
    throw error
  }
}

// Custom Checkout API Functions
export const getCheckoutConfig = async () => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/checkout/config`
  console.log(`[v0] [getCheckoutConfig] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getCheckoutConfig] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getCheckoutConfig] Response data:`, data)
    
    // Extract data from the response wrapper
    if (data.status === 'success' && data.data) {
      return data.data
    }
    
    return data
  } catch (error) {
    console.error(`[v0] [getCheckoutConfig] Error:`, error)
    throw error
  }
}

// Helper to parse the { status: 'success', data } envelope and surface backend errors
const parseCheckoutResponse = async (response: Response, label: string) => {
  const json = await response.json().catch(() => ({}))
  console.log(`[v0] [${label}] Response (${response.status}):`, json)

if (response.ok && json.status === "success") {
    return json.data
  }

// Prefer the detailed `message` field when available, fall back to `error`
  const message = json.message ?? json.error ?? `Request failed (${response.status})`
  throw new Error(message)
}

// POST /checkout/summary — call on load and whenever cart, coupon, shipping, or address changes
export const getCheckoutSummary = async (
  cartItems: any[],
  couponCode?: string,
  shippingMethodId?: string,
  shippingAddress?: any,
) => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/checkout/summary`
  console.log(`[v0] [getCheckoutSummary] Posting to: ${url}`)

const body: Record<string, any> = { cartItems }
  if (couponCode) body.couponCode = couponCode
  if (shippingMethodId !== undefined && shippingMethodId !== null) {
    body.shippingMethodId = shippingMethodId
  }
  if (shippingAddress) {
    body.shippingAddress = shippingAddress
  }

const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  })

return parseCheckoutResponse(response, "getCheckoutSummary")
}

// POST /checkout/shipping-options — fetch shipping methods for a given address without full summary
export const getCheckoutShippingOptions = async (
  cartItems: any[],
  shippingAddress?: any,
  shippingMethodId?: string,
) => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/checkout/shipping-options`
  console.log(`[v0] [getCheckoutShippingOptions] Posting to: ${url}`)

const body: Record<string, any> = { cartItems }
  if (shippingAddress) {
    body.shippingAddress = shippingAddress
  }
  if (shippingMethodId !== undefined && shippingMethodId !== null) {
    body.shippingMethodId = shippingMethodId
  }

const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  })

return parseCheckoutResponse(response, "getCheckoutShippingOptions")
}

export interface PaymentIntentPayload {
  cartItems: any[]
  customerEmail: string
  customerName: string
  customerPhone?: string
  shippingAddress?: {
    name: string
    line1: string
    line2?: string
    city: string
    state?: string
    postal_code: string
    country: string
  }
  shippingMethodId?: string
  couponCode?: string
  orderNotes?: string
}

// POST /checkout/payment-intent — call only when the user submits payment
export const createPaymentIntent = async (payload: PaymentIntentPayload) => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/checkout/payment-intent`
  console.log(`[v0] [createPaymentIntent] Posting to: ${url}`)

const token = typeof window !== "undefined" ? localStorage.getItem(TOKEN_KEY) : null
  const headers: Record<string, string> = { "Content-Type": "application/json" }
  if (token) headers["Authorization"] = `${token}`

const response = await fetch(url, {
    method: "POST",
    headers,
    body: JSON.stringify(payload),
  })

return parseCheckoutResponse(response, "createPaymentIntent")
}

// POST /checkout/payment-success — call after Stripe confirms the payment
export const handlePaymentSuccess = async (paymentIntentId: string, checkoutId: string) => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/checkout/payment-success`
  console.log(`[v0] [handlePaymentSuccess] Posting to: ${url}`)

const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ paymentIntentId, checkoutId }),
  })

return parseCheckoutResponse(response, "handlePaymentSuccess")
}

export const getStoreCategories = async (page = 1, limit = 20, query = "") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/categories?page=${page}&limit=${limit}${query ? `&q=${query}` : ""}`
  console.log(`[v0] [getStoreCategories] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getStoreCategories] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getStoreCategories] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getStoreCategories] Error:`, error)
    throw error
  }
}

export const getCategoryProducts = async (categoryId: string, page = 1, limit = 20, query = "") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/categories/${categoryId}/products?page=${page}&limit=${limit}${query ? `&q=${query}` : ""}`
  console.log(`[v0] [getCategoryProducts] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getCategoryProducts] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getCategoryProducts] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getCategoryProducts] Error:`, error)
    throw error
  }
}

export const getCategoryByIdFromList = async (categoryId: string) => {
  console.log(`[v0] [getCategoryByIdFromList] Looking for category: ${categoryId}`)

try {
    const response = await getStoreCategories(1, 100, "")
    if (response.status === "success") {
      const category = response.data.categories.find((cat: any) => cat._id === categoryId)
      if (category) {
        console.log(`[v0] [getCategoryByIdFromList] Found category:`, category)
        return { status: "success", data: category }
      }
    }
    console.log(`[v0] [getCategoryByIdFromList] Category not found`)
    return { status: "error", message: "Category not found" }
  } catch (error) {
    console.error(`[v0] [getCategoryByIdFromList] Error:`, error)
    throw error
  }
}

export const getFeaturedProducts = async (
  page = 1,
  limit = 20,
  query = "",
  sortBy = "createdAt",
  sortOrder = "desc",
  minPrice: number | null = null,
  maxPrice: number | null = null,
) => {
  let queryParams = `page=${page}&limit=${limit}`
  if (query) queryParams += `&q=${query}`
  if (sortBy) queryParams += `&sortBy=${sortBy}`
  if (sortOrder) queryParams += `&sortOrder=${sortOrder}`
  if (minPrice !== null) queryParams += `&minPrice=${minPrice}`
  if (maxPrice !== null) queryParams += `&maxPrice=${maxPrice}`

const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/featured-products?${queryParams}`
  console.log(`[v0] [getFeaturedProducts] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getFeaturedProducts] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getFeaturedProducts] Response data:`, data)
    
    // Filter out products where isActive is false
    if (data.status === "success" && data.data?.products) {
      data.data.products = data.data.products.filter((product: any) => product.isActive !== false)
    }
    
    return data
  } catch (error) {
    console.error(`[v0] [getFeaturedProducts] Error:`, error)
    throw error
  }
}

export const getStoreCollections = async (page = 1, limit = 20, query = "") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/collections?page=${page}&limit=${limit}${query ? `&q=${query}` : ""}`
  console.log(`[v0] [getStoreCollections] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getStoreCollections] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getStoreCollections] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getStoreCollections] Error:`, error)
    throw error
  }
}

export const getCollectionBySlug = async (collectionSlug: string, page = 1, limit = 20, query = "") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/collections/${collectionSlug}?page=${page}&limit=${limit}${query ? `&q=${query}` : ""}`
  console.log(`[v0] [getCollectionBySlug] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getCollectionBySlug] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getCollectionBySlug] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getCollectionBySlug] Error:`, error)
    throw error
  }
}

export const getStoreBundles = async (page = 1, limit = 20, query = "") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/bundles?page=${page}&limit=${limit}${query ? `&q=${query}` : ""}`
  console.log(`[v0] [getStoreBundles] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getStoreBundles] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getStoreBundles] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getStoreBundles] Error:`, error)
    throw error
  }
}

export const getBundleBySlug = async (bundleSlug: string) => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/bundles/${bundleSlug}`
  console.log(`[v0] [getBundleBySlug] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getBundleBySlug] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getBundleBySlug] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getBundleBySlug] Error:`, error)
    throw error
  }
}

export const getStoreCompliance = async () => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/compliance`
  console.log(`[v0] [getStoreCompliance] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getStoreCompliance] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getStoreCompliance] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getStoreCompliance] Error:`, error)
    throw error
  }
}
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from 'tailwindcss'

// all in fixtures is set to tailwind v3 as interims solutions

const config: Config = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './config/**/*.{js,ts,jsx,tsx,mdx}',
    './contexts/**/*.{js,ts,jsx,tsx,mdx}',
    './lib/**/*.{js,ts,jsx,tsx,mdx}',
    './services/**/*.{js,ts,jsx,tsx,mdx}',
    './hooks/**/*.{js,ts,jsx,tsx,mdx}',
    '*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          '1': 'hsl(var(--chart-1))',
          '2': 'hsl(var(--chart-2))',
          '3': 'hsl(var(--chart-3))',
          '4': 'hsl(var(--chart-4))',
          '5': 'hsl(var(--chart-5))',
        },
        sidebar: {
          DEFAULT: 'hsl(var(--sidebar-background))',
          foreground: 'hsl(var(--sidebar-foreground))',
          primary: 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          accent: 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          border: 'hsl(var(--sidebar-border))',
          ring: 'hsl(var(--sidebar-ring))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
}
export default config
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": false,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
[V0_FILE]typescript:file="types/homepage-config.ts"
export interface StyledElement {
  className: string
}

export interface TextElement extends StyledElement {
  text?: string
  textKey?: string
}

export interface ButtonConfig extends StyledElement {
  visible?: boolean
  text?: string
  textKey?: string
  href: string
  icon?: string
  iconClassName?: string
}

export interface BadgeConfig extends StyledElement {
  visible: boolean
  text: string
  icon: string
  iconClassName: string
}

export interface HeroConfig {
  visible: boolean
  section: StyledElement
  container: StyledElement
  contentWrapper: StyledElement
  badge: BadgeConfig
  title: TextElement & { showStoreName: boolean; storeNameClassName: string }
  subtitle: TextElement
  buttonsContainer: StyledElement
  primaryButton: ButtonConfig
  secondaryButton: ButtonConfig
}

export interface CategoriesSectionConfig {
  visible: boolean
  section: StyledElement
  header: StyledElement
  title: TextElement
  subtitle: TextElement
  layout: {
    maxCategories: number
    gridClassName: string
    skeletonCount: number
  }
  card: StyledElement
  categoryName: StyledElement
  viewAllButton: ButtonConfig
  viewAllMobileButton: ButtonConfig
  skeleton: StyledElement
}

export interface FeaturedProductsConfig {
  visible: boolean
  section: StyledElement
  container: StyledElement
  headerWrapper: StyledElement
  title: TextElement
  subtitle: TextElement
  layout: StyledElement
  productCard: {
    className: string
    imageClassName: string
    overlayClassName: string
  }
  productName: StyledElement
  productPrice: StyledElement
  originalPrice: StyledElement
  discountBadge: StyledElement
  saleBadge: StyledElement
  featuredBadge: StyledElement
  quickAddButton: StyledElement
  addToCartButton: StyledElement
  loading: StyledElement
  viewAllFeaturedButton: ButtonConfig
  viewAllProductsButton: ButtonConfig
  bottomButtons: StyledElement
}

export interface HomepageConfig {
  hero: HeroConfig
  categoriesSection: CategoriesSectionConfig
  featuredProducts: FeaturedProductsConfig
}
[V0_FILE]typescript:file="types/product.ts"
export interface ProductVariant {
  id: string
  name?: string
  value?: string
  price?: number
  originalPrice?: number
  quantity?: number
  stock?: number
  isOnSale?: boolean
  isInStock?: boolean
  images?: string[]
  option1?: string
  option2?: string
  option3?: string
  /**
   * Backend-enriched per-variant pricing (best-discount-wins). When the product
   * is priced at the variant level (pricingMode === "variants") these fields are
   * the source of truth for what the customer pays and sees for this SKU.
   */
  listPrice?: number
  effectivePrice?: number
  effectiveDiscountPercentage?: number
  discountSource?: DiscountSource
  promotion?: Promotion | null
  /** Whether this variant can accept restock notifications (backend-computed). */
  canRestockNotify?: boolean
}

export interface PriceHistory {
  price: number
  date: Date
}

export type ProductKind = "physical" | "digital" | "service"

export type DiscountSource = "product" | "promotion" | "none"

/**
 * Promotion campaign data attached to an enriched product ONLY when the
 * promotion discount wins (discountSource === "promotion").
 */
export interface Promotion {
  _id: string
  name: string
  description?: string
  discountPercentage: number
  badgeColor: string
  startDate: string
  endDate: string
  minQuantity?: number
  maxQuantity?: number | null
  isStackable: boolean
  priority: number
}

export interface Product {
  _id: string
  id?: string
  name: string
  description: string
  brand: string
  price: number
  productKind?: ProductKind
  variants?: ProductVariant[]
  images: string[]
  url: string
  slug: string
  currency: string
  country: string
  storeName: string
  source: string
  creator: string
  imageEmbedding?: number[]
  textEmbedding?: number[]
  priceHistory?: PriceHistory[]
  published_at?: Date
  last_updated?: Date
  isActive: boolean
  available: boolean
  categories?: string[]
  tags?: string[]
  sku?: string
  stock?: number
  rating?: number
  reviewCount?: number
  discountPercentage?: number
  discount?: number
  discountVal?: number
  compareAtPrice?: number
  /**
   * Backend-computed storefront pricing (best-discount-wins). When present these
   * are the source of truth for what the customer pays and sees.
   */
  listPrice?: number
  effectivePrice?: number
  effectiveDiscountPercentage?: number
  discountSource?: DiscountSource
  promotion?: Promotion | null
  /**
   * "product" => parent-level pricing is authoritative.
   * "variants" => each variant carries its own pricing; the parent price /
   * compareAtPrice are display-only (see parentPriceForDisplayOnly) and must not
   * be used for cart or checkout.
   */
  pricingMode?: "product" | "variants"
  /** Lowest variant effectivePrice — used for "From {fromPrice}" on list cards. */
  fromPrice?: number
  /** When true, ignore parent price/compareAtPrice for any pricing math. */
  parentPriceForDisplayOnly?: boolean
  keywords?: string[]
  /** Whether this product can accept restock notifications (backend-computed). */
  canRestockNotify?: boolean
  pros?: string[]
  cons?: string[]
  ships_to_countries?: string[]
  storeOrder?: number
  isVerified?: boolean
  isBoosted?: boolean
  category?: string
  subcategory?: string
  featured?: boolean
  createdAt?: string
  updatedAt?: string
  __v?: number
}

export interface ProductsResponse {
  status: string
  data: {
    products: Product[]
    pagination: {
      page: number
      limit: number
      total: number
      totalPages: number
      hasMore: boolean
    }
    store: {
      _id: string
      name: string
    }
  }
}

export interface ProductDetailsResponse {
  status: string
  data: Product
}

export interface StoreInfoResponse {
  status: string
  data: {
    _id: string
    name: string
  }
}

export interface CheckoutResponse {
  sessionId: string
  url: string
  expiresAt: number
  storeId: string
}

export interface OrderItem {
  productId: string
  name: string
  description: string
  quantity: number
  unitPrice: number
  totalPrice: number
  sku: string
  images: string[]
  _id: string
}

export interface ShippingAddress {
  name: string
  line1: string
  line2: string
  city: string
  state: string
  postal_code: string
  country: string
}

export interface ShippingOption {
  name: string
  amount: number
}

export interface OrderDetails {
  shippingAddress: ShippingAddress
  shippingOption: ShippingOption
  taxAmount: number
  customerEmail: string
  customerPhone: string
  customerName: string
  items: OrderItem[]
  subtotal: number
  shippingCost: number
  totalAmount: number
  currency: string
  status: string
  paymentStatus: string
}

export interface CheckoutSuccessResponse {
  status: string
  data: {
    message: string
    order: OrderDetails
  }
}

export interface Category {
  _id: string
  name: string
  slug: string
  sortOrder: number
  parentCategory: string | null
  image: string | null
  metaTitle: string
  metaDescription: string
  createdAt: string
  subcategoryCount: number
  productCount: number
}

export interface CategoriesResponse {
  status: string
  data: {
    categories: Category[]
    pagination: {
      page: number
      limit: number
      total: number
      totalPages: number
      hasMore: boolean
    }
    store: {
      _id: string
      name: string
    }
  }
}

export interface Collection {
  _id: string
  name: string
  slug: string
  description: string
  image: string | null
  isDefault: boolean
  productCount: number
  createdAt: string
  updatedAt: string
}

export interface CollectionsResponse {
  status: string
  data: {
    collections: Collection[]
    pagination: {
      page: number
      limit: number
      total: number
      totalPages: number
      hasMore: boolean
    }
    store: {
      _id: string
      name: string
    }
  }
}

export interface CollectionDetailsResponse {
  status: string
  data: {
    collection: Collection
    products: Product[]
    pagination: {
      page: number
      limit: number
      total: number
      totalPages: number
      hasMore: boolean
    }
    store: {
      _id: string
      name: string
    }
  }
}

// Bundle Types
export interface BundleItem {
  quantity: number
  variantIndex: number
  product: Product
  variant: {
    name: string
    value: string
    price: number
    originalPrice: number
    quantity: number
    isOnSale: boolean
    isInStock: boolean
    isProductFallback: boolean
    images: string[]
  }
  pricing: {
    unitPrice: number
    unitOriginalPrice: number
    lineTotal: number
    lineOriginalTotal: number
  }
}

export interface Bundle {
  _id: string
  name: string
  slug: string
  summary: string
  images: string[]
  status: string
  discountPercentage: number
  itemCount: number
  createdAt: string
  updatedAt: string
  published_at?: string
}

export interface BundlePricing {
  subtotal: number
  discountPercentage: number
  discountAmount: number
  total: number
}

export interface BundlesResponse {
  status: string
  data: {
    bundles: Bundle[]
    pagination: {
      page: number
      limit: number
      total: number
      totalPages: number
      hasMore: boolean
    }
    store: {
      _id: string
      name: string
    }
  }
}

export interface BundleDetailsResponse {
  status: string
  data: {
    bundle: Bundle
    items: BundleItem[]
    pricing: BundlePricing
    store: {
      _id: string
      name: string
    }
  }
}a0:Tbf5a8,[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/apple-icon-LwDXCuETwyUvQNCbNBN0vfAJk0wD2P.png"
[V0_FILE]png:file="public/headphones-case.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/headphones-case-1PqOdye9aDdssCqxaOvoT3tDKJD1fR.png"
[V0_FILE]jpg:file="public/headphones-details.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/headphones-details-glas5q5Hn6cF6WppQAqUVOFEL29qic.jpg"
[V0_FILE]png:file="public/headphones-side-view.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/headphones-side-view-ZKHqo722doERyrNFXoKm44DCnJbibB.png"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/icon-dark-32x32-JyKBW9ldjcs9e21AOD7sTRmMDLeRxq.png"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/icon-light-32x32-CH3wM4UaTtaKTAbz7G9f6Xr5q2ZZrb.png"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/placeholder-logo-bfFOYwZdBZiNXzXuTtpMaDwK4NC4Wc.png"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/placeholder-user-c5QW1cgT5n7BiYAx0mYuHDTw92tD8t.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/placeholder-GD96W2vMjBtc2xl08Nn1tNJfybVwrD.jpg"
[V0_FILE]png:file="public/premium-product-showcase.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/premium-product-showcase-pnBjtqrcpgyXz5vVFsWKEMCthCTpnz.png"
[V0_FILE]png:file="public/premium-wireless-headphones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-925f1c958d73b9f1f4c9640b695ba9fdc68d231a/public/premium-wireless-headphones-usIjRY12CxKNfFIOZNh0ej02jonYgO.png"
[V0_FILE]markdown:file="CHECKOUT_SYSTEM.md"
# Custom Checkout System

This custom checkout system provides a complete, no-login checkout flow with shipping rates, coupon handling, and store customization.

## Features

✅ **No Login Required** - Customers can checkout without creating an account
✅ **Shipping Options** - Multiple shipping methods with dynamic cost calculation
✅ **Coupon Handling** - Apply discount codes at checkout
✅ **Store Customization** - Logo and store name pulled from `config/store.ts`
✅ **Order Summary** - Real-time price updates with subtotal, shipping, tax, and total
✅ **Stripe Payment** - Secure payment processing with Stripe Elements
✅ **Responsive Design** - Mobile-friendly checkout experience

## File Structure

### New Components
- `components/checkout/CheckoutForm.tsx` - Main checkout form with Stripe integration
- `components/checkout/CheckoutContactInfo.tsx` - Email collection
- `components/checkout/CheckoutShippingAddress.tsx` - Full address form with country selection
- `components/checkout/CheckoutShippingOptions.tsx` - Shipping method selection
- `components/checkout/CheckoutCoupon.tsx` - Coupon code input and application
- `components/checkout/CheckoutOrderSummary.tsx` - Order summary sidebar with store info

### New Contexts
- `contexts/checkout-context.tsx` - Manages checkout state (form data, summary, payment details)

### New Pages
- `app/checkout/page.tsx` - Main checkout page that wraps Stripe Elements provider

### Updated Files
- `services/api.ts` - Added new checkout API functions
- `app/cart/page.tsx` - Updated to navigate to `/checkout` instead of old Stripe flow
- `app/success/page.tsx` - Updated to support both old `session_id` and new `checkout_id` + `payment_intent_id` flows

## API Endpoints Used

All endpoints are called through `services/api.ts`:

1. `createCheckoutSession(cartItems, email)` - Initialize checkout
2. `getCheckoutConfig()` - Get store checkout configuration
3. `createPaymentIntent(checkoutId)` - Create Stripe payment intent
4. `getCheckoutSummary(checkoutId, shippingId, couponCode)` - Calculate totals with shipping and discounts
5. `updateCheckoutFormData(checkoutId, formData)` - Update customer information
6. `confirmPayment(checkoutId, paymentIntentId)` - Process payment and create order

## Store Customization

All checkout pages automatically pull from `config/store.ts`:
- Store name
- Store logo
- Store branding colors (via design tokens)

Update these in your store config to customize the checkout experience.

## Flow

1. **Cart Page** → User clicks "Proceed to Checkout"
2. **Checkout Page** → Checkout context initializes with cart items
3. **Contact Info** → User enters email
4. **Shipping Address** → Full address collection
5. **Shipping Options** → User selects shipping method (updates total)
6. **Coupon** → Optional discount code (updates total)
7. **Payment** → Stripe Payment Element for card entry
8. **Confirmation** → Redirects to success page with checkout_id and payment_intent_id

## Environment Variables

Make sure these are set:
- `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` - Stripe publishable key

## Customization Options

### Add More Fields
Edit `contexts/checkout-context.tsx` `CheckoutFormData` interface to add new fields, then update the corresponding component forms.

### Change Shipping Logic
Modify the shipping options returned by your backend or the `getCheckoutSummary` call in `CheckoutShippingOptions.tsx`.

### Update Styling
All components use design tokens and Tailwind classes. Update colors in `tailwind.config.ts` and `globals.css`.

### Add Billing Address
Currently set to "billing same as shipping". To add a separate billing address:
1. Add `billingAddress` fields to `CheckoutFormData`
2. Add checkbox to toggle billing address form visibility
3. Create `CheckoutBillingAddress.tsx` component
[V0_FILE]typescriptreact:file="app/about/page.tsx"
import type { Metadata } from "next"
import storeConfig from "@/config/store"

export const metadata: Metadata = {
  title: `About Us - ${storeConfig.storeName}`,
  description: "Learn about our story, mission, and commitment to providing exceptional products and service.",
}

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          {/* Hero Section */}
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 text-balance">Our Story</h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto text-balance">
              Building exceptional experiences through quality products and innovative design
            </p>
          </div>

{/* Main Content */}
          <div className="grid md:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <h2 className="text-3xl font-bold text-foreground mb-6">Who We Are</h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed text-justify">
                <p>
                  Founded with a passion for excellence, Agora has been at the forefront of delivering premium products
                  that enhance everyday life. Our journey began with a simple belief: that quality and innovation should
                  be accessible to everyone.
                </p>
                <p>
                  We carefully curate each product in our collection, working directly with artisans and manufacturers
                  who share our commitment to craftsmanship and sustainability. Every item tells a story of dedication,
                  skill, and attention to detail.
                </p>
                <p>
                  Today, we serve customers worldwide, building lasting relationships through exceptional service and
                  products that stand the test of time.
                </p>
              </div>
            </div>
            <div className="bg-muted rounded-lg p-8">
              <div className="space-y-6">
                <div>
                  <h3 className="text-xl font-semibold text-foreground mb-2">Our Mission</h3>
                  <p className="text-muted-foreground text-justify">
                    To provide exceptional products that inspire and enhance the lives of our customers while supporting
                    sustainable practices and ethical manufacturing.
                  </p>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-foreground mb-2">Our Vision</h3>
                  <p className="text-muted-foreground text-justify">
                    To be the trusted destination for discerning customers who value quality, innovation, and
                    responsible business practices.
                  </p>
                </div>
              </div>
            </div>
          </div>

{/* Values Section */}
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-foreground text-center mb-12">Our Values</h2>
            <div className="grid md:grid-cols-3 gap-8">
              <div className="text-center">
                <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl text-primary-foreground">✨</span>
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-3">Quality First</h3>
                <p className="text-muted-foreground text-justify">
                  We never compromise on quality, ensuring every product meets our rigorous standards.
                </p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl text-primary-foreground">🌱</span>
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-3">Sustainability</h3>
                <p className="text-muted-foreground text-justify">
                  Environmental responsibility guides our sourcing and business practices.
                </p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl text-primary-foreground">🤝</span>
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-3">Customer Focus</h3>
                <p className="text-muted-foreground text-justify">
                  Your satisfaction and experience are at the heart of everything we do.
                </p>
              </div>
            </div>
          </div>

{/* Team Section */}
          <div className="text-center">
            <h2 className="text-3xl font-bold text-foreground mb-6">Meet Our Team</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto mb-8 text-justify">
              Our diverse team of passionate individuals works tirelessly to bring you the best products and service.
              From our buyers who travel the world to source unique items, to our customer service team who ensures your
              satisfaction, we're here for you.
            </p>
            <div className="bg-muted rounded-lg p-8">
              <p className="text-foreground font-medium text-justify">
                "We believe that great products have the power to inspire, connect, and transform lives. That's why
                we're committed to bringing you only the finest."
              </p>
              <p className="text-muted-foreground mt-4">— The Agora Team</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/bundles/[slug]/page.tsx"
"use client"

import { useEffect, useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { useParams } from "next/navigation"
import { getBundleBySlug } from "@/services/api"
import type { Bundle, BundleItem, BundlePricing } from "@/types/product"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Footer } from "@/components/footer"
import { ShoppingCart, ArrowLeft, Package, Check } from "lucide-react"
import { useCart } from "@/contexts/cart-context"
import { useLanguage } from "@/contexts/language-context"

export default function BundlePage() {
  const params = useParams()
  const slug = params.slug as string
  const [bundle, setBundle] = useState<Bundle | null>(null)
  const [items, setItems] = useState<BundleItem[]>([])
  const [pricing, setPricing] = useState<BundlePricing | null>(null)
  const [loading, setLoading] = useState(true)
  const [selectedImage, setSelectedImage] = useState(0)
  const [quantity, setQuantity] = useState(1)
  const [addedToCart, setAddedToCart] = useState(false)
  const { dispatch } = useCart()
  const { t } = useLanguage()

useEffect(() => {
    const fetchBundle = async () => {
      if (!slug) return
      try {
        const response = await getBundleBySlug(slug)
        if (response.status === "success") {
          setBundle(response.data.bundle)
          setItems(response.data.items || [])
          setPricing(response.data.pricing)
        }
      } catch (error) {
        console.error("Failed to fetch bundle:", error)
      } finally {
        setLoading(false)
      }
    }

fetchBundle()
  }, [slug])

const handleAddToCart = () => {
    if (!bundle || !pricing) return

dispatch({
      type: "ADD_ITEM",
      payload: {
        id: bundle._id,
        bundleId: bundle._id,
        name: bundle.name,
        price: pricing.total,
        originalPrice: pricing.subtotal,
        isOnSale: pricing.discountPercentage > 0,
        images: bundle.images || [],
        quantity: quantity,
        description: bundle.summary || "",
        type: "bundle",
      },
    })

setAddedToCart(true)
    setTimeout(() => setAddedToCart(false), 2000)
  }

if (loading) {
    return (
      <main className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-12">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div className="aspect-square bg-muted animate-pulse rounded-xl" />
            <div className="space-y-4">
              <div className="h-8 bg-muted animate-pulse rounded w-3/4" />
              <div className="h-6 bg-muted animate-pulse rounded w-1/2" />
              <div className="h-24 bg-muted animate-pulse rounded" />
            </div>
          </div>
        </div>
      </main>
    )
  }

if (!bundle) {
    return (
      <main className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-12 text-center">
          <h1 className="text-2xl font-bold text-foreground mb-4">Bundle not found</h1>
          <Button asChild>
            <Link href="/bundles">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Bundles
            </Link>
          </Button>
        </div>
      </main>
    )
  }

const images = bundle.images && bundle.images.length > 0 ? bundle.images : []

return (
    <main className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8">
        {/* Back Button */}
        <Button variant="ghost" asChild className="mb-6">
          <Link href="/bundles">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Bundles
          </Link>
        </Button>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Image Gallery */}
          <div className="space-y-4">
            <div className="relative aspect-square overflow-hidden rounded-xl bg-muted">
              {images.length > 0 ? (
                <Image
                  src={images[selectedImage]}
                  alt={bundle.name}
                  fill
                  className="object-cover"
                  priority
                />
              ) : (
                <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-primary/20 via-primary/10 to-muted">
                  <Package className="h-24 w-24 text-muted-foreground" />
                </div>
              )}
              {pricing && pricing.discountPercentage > 0 && (
                <Badge className="absolute top-4 right-4 bg-red-500 text-white text-lg px-3 py-1">
                  {pricing.discountPercentage}% OFF
                </Badge>
              )}
            </div>

{images.length > 1 && (
              <div className="flex gap-2 overflow-x-auto pb-2">
                {images.map((image, index) => (
                  <button
                    key={index}
                    onClick={() => setSelectedImage(index)}
                    className={`relative w-20 h-20 rounded-lg overflow-hidden flex-shrink-0 border-2 transition-colors ${
                      selectedImage === index ? "border-primary" : "border-transparent"
                    }`}
                  >
                    <Image
                      src={image}
                      alt={`${bundle.name} ${index + 1}`}
                      fill
                      className="object-cover"
                    />
                  </button>
                ))}
              </div>
            )}
          </div>

{/* Bundle Info */}
          <div className="space-y-6">
            <div>
              <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-2">{bundle.name}</h1>
              {bundle.summary && (
                <p className="text-lg text-muted-foreground">{bundle.summary}</p>
              )}
            </div>

{/* Pricing */}
            {pricing && (
              <div className="space-y-2">
                <div className="flex items-baseline gap-3">
                  <span className="text-3xl font-bold text-foreground">
                    ${pricing.total.toFixed(2)}
                  </span>
                  {pricing.discountAmount > 0 && (
                    <span className="text-xl text-muted-foreground line-through">
                      ${pricing.subtotal.toFixed(2)}
                    </span>
                  )}
                </div>
                {pricing.discountAmount > 0 && (
                  <p className="text-green-600 font-medium">
                    You save ${pricing.discountAmount.toFixed(2)}!
                  </p>
                )}
              </div>
            )}

{/* Bundle Items */}
            <div className="space-y-4">
              <h3 className="text-lg font-semibold text-foreground">What's Included ({items.length} items)</h3>
              <div className="space-y-3">
                {items.map((item, index) => (
                  <Card key={index} className="bg-card border-border">
                    <CardContent className="p-4 flex items-center gap-4">
                      <div className="relative w-16 h-16 rounded-lg overflow-hidden bg-muted flex-shrink-0">
                        {item.variant?.images?.[0] || item.product?.images?.[0] ? (
                          <Image
                            src={item.variant?.images?.[0] || item.product?.images?.[0]}
                            alt={item.product?.name || "Product"}
                            fill
                            className="object-cover"
                          />
                        ) : (
                          <div className="absolute inset-0 flex items-center justify-center">
                            <Package className="h-6 w-6 text-muted-foreground" />
                          </div>
                        )}
                      </div>
                      <div className="flex-1 min-w-0">
                        <h4 className="font-medium text-foreground truncate">
                          {item.product?.name || "Product"}
                        </h4>
                        {item.variant?.name && item.variant?.value && (
                          <p className="text-sm text-muted-foreground">
                            {item.variant.name}: {item.variant.value}
                          </p>
                        )}
                        <p className="text-sm text-muted-foreground">
                          Qty: {item.quantity}
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="font-medium text-foreground">
                          ${item.pricing?.lineTotal?.toFixed(2) || "0.00"}
                        </p>
                        {item.pricing?.lineOriginalTotal && item.pricing.lineOriginalTotal > item.pricing.lineTotal && (
                          <p className="text-sm text-muted-foreground line-through">
                            ${item.pricing.lineOriginalTotal.toFixed(2)}
                          </p>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

{/* Quantity and Add to Cart */}
            <div className="space-y-4 pt-4 border-t border-border">
              <div className="flex items-center gap-4">
                <span className="text-foreground font-medium">Quantity:</span>
                <div className="flex items-center border border-border rounded-lg">
                  <button
                    onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                    className="px-4 py-2 text-foreground hover:bg-muted transition-colors"
                    disabled={quantity <= 1}
                  >
                    -
                  </button>
                  <span className="px-4 py-2 text-foreground font-medium min-w-[3rem] text-center">
                    {quantity}
                  </span>
                  <button
                    onClick={() => setQuantity((q) => q + 1)}
                    className="px-4 py-2 text-foreground hover:bg-muted transition-colors"
                  >
                    +
                  </button>
                </div>
              </div>

<Button
                size="lg"
                className="w-full"
                onClick={handleAddToCart}
                disabled={addedToCart}
              >
                {addedToCart ? (
                  <>
                    <Check className="mr-2 h-5 w-5" />
                    Added to Cart!
                  </>
                ) : (
                  <>
                    <ShoppingCart className="mr-2 h-5 w-5" />
                    Add Bundle to Cart - ${pricing ? (pricing.total * quantity).toFixed(2) : "0.00"}
                  </>
                )}
              </Button>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/bundles/page.tsx"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { getStoreBundles } from "@/services/api"
import type { Bundle } from "@/types/product"
import { Footer } from "@/components/footer"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { useLanguage } from "@/contexts/language-context"

export default function BundlesPage() {
  const [bundles, setBundles] = useState<Bundle[]>([])
  const [loading, setLoading] = useState(true)
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(false)
  const { t } = useLanguage()

useEffect(() => {
    const fetchBundles = async () => {
      setLoading(true)
      try {
        const response = await getStoreBundles(page, 20)
        if (response.status === "success") {
          if (page === 1) {
            setBundles(response.data.bundles || [])
          } else {
            setBundles((prev) => [...prev, ...(response.data.bundles || [])])
          }
          setHasMore(response.data.pagination?.hasMore || false)
        }
      } catch (error) {
        console.error("Failed to fetch bundles:", error)
      } finally {
        setLoading(false)
      }
    }

fetchBundles()
  }, [page])

return (
    <main className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-12">
        <div className="mb-12 text-center">
          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Bundles</h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Save more with our curated product bundles
          </p>
        </div>

{loading && bundles.length === 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="relative aspect-[4/3] overflow-hidden rounded-xl bg-muted animate-pulse" />
            ))}
          </div>
        ) : bundles.length === 0 ? (
          <div className="text-center py-16">
            <h3 className="text-2xl font-semibold mb-2 text-foreground">No bundles found</h3>
            <p className="text-muted-foreground">Check back later for new bundles</p>
          </div>
        ) : (
          <>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {bundles.map((bundle) => (
                <Link key={bundle._id} href={`/bundles/${bundle.slug}`} className="group">
                  <div className="relative aspect-[4/3] overflow-hidden rounded-xl">
                    {bundle.images && bundle.images.length > 0 ? (
                      <Image
                        src={bundle.images[0]}
                        alt={bundle.name}
                        fill
                        className="object-cover transition-transform duration-500 group-hover:scale-110"
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                      />
                    ) : (
                      <div className="absolute inset-0 bg-gradient-to-br from-primary/30 via-primary/15 to-muted transition-all duration-500 group-hover:from-primary/40 group-hover:via-primary/20" />
                    )}
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
                    
                    {bundle.discountPercentage > 0 && (
                      <Badge className="absolute top-4 right-4 bg-red-500 text-white">
                        {bundle.discountPercentage}% OFF
                      </Badge>
                    )}
                    
                    <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
                      <h3 className="text-xl md:text-2xl font-bold text-white drop-shadow-lg mb-2">
                        {bundle.name}
                      </h3>
                      {bundle.summary && (
                        <p className="text-white/70 text-sm line-clamp-2 max-w-[80%] mb-2">
                          {bundle.summary}
                        </p>
                      )}
                      {bundle.itemCount > 0 && (
                        <p className="text-white/80 text-sm">
                          {bundle.itemCount} {bundle.itemCount === 1 ? "item" : "items"}
                        </p>
                      )}
                    </div>
                  </div>
                </Link>
              ))}
            </div>

{hasMore && (
              <div className="mt-12 flex justify-center">
                <Button
                  onClick={() => setPage((p) => p + 1)}
                  variant="outline"
                  size="lg"
                  className="min-w-[200px] bg-card text-foreground border-border hover:bg-muted"
                  disabled={loading}
                >
                  {loading ? "Loading..." : "Load More"}
                </Button>
              </div>
            )}
          </>
        )}
      </div>
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/cart/page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { useCart, getCartLineKey } from "@/contexts/cart-context"
import { Plus, Minus, ShoppingBag, Loader2 } from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/contexts/language-context"
import { useRouter } from "next/navigation"

export default function CartPage() {
  const { state, removeItem, updateItemQuantity, clearCart } = useCart()
  const { t, formatPrice } = useLanguage()
  const router = useRouter()

const handleUpdateQuantity = (lineKey: string, quantity: number) => {
    updateItemQuantity(lineKey, quantity)
  }

const handleRemoveItem = (lineKey: string) => {
    removeItem(lineKey)
  }

const handleCheckout = () => {
    router.push("/checkout")
  }

if (state.items.length === 0 && !state.loading) {
    return (
      <div className="min-h-screen bg-background py-8">
        <div className="container mx-auto px-4">
          <div className="max-w-2xl mx-auto text-center py-20">
            <ShoppingBag className="w-24 h-24 text-muted-foreground mx-auto mb-6" />
            <h1 className="text-3xl font-bold text-foreground mb-4">{t("cart.empty")}</h1>
            <p className="text-muted-foreground mb-8">Add some products to get started</p>
            <Link href="/products">
              <Button className="bg-primary text-primary-foreground hover:bg-primary/90">
                {t("cart.continueShopping")}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background py-8">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl font-bold text-foreground mb-8">{t("cart.title")}</h1>

{state.error && (
            <div className="p-4 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-sm rounded-lg mb-6">
              {t("common.error")}: {state.error}. Please refresh or try again.
            </div>
          )}

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2">
              <Card className="bg-card border-border">
                <CardContent className="p-6">
                  {state.loading && (
                    <div className="flex items-center justify-center py-8">
                      <Loader2 className="w-8 h-8 animate-spin text-foreground" />
                    </div>
                  )}

<div className="space-y-6">
                    {state.items.map((item) => {
                      const lineKey = getCartLineKey(item)
                      return (
                      <div
                        key={lineKey}
                        className="flex items-center gap-4 p-4 border border-border rounded-lg bg-card"
                      >
                        <img
                          src={item.images[0] || "/placeholder.svg"}
                          alt={item.name}
                          className="w-20 h-20 object-cover rounded-md"
                        />

<div className="flex-1">
                          <h3 className="font-semibold text-lg text-foreground">{item.name}</h3>
                          {item.variantLabel ? (
                            <p className="text-sm font-medium text-foreground/80">{item.variantLabel}</p>
                          ) : null}
                          <p className="text-muted-foreground text-sm mb-2">{item.description}</p>
                          <div className="flex items-center gap-2">
                            <p className="text-lg font-medium text-foreground">{formatPrice(item.price)}</p>
                            {item.isOnSale && item.originalPrice && (
                              <span className="text-sm text-muted-foreground line-through">
                                {formatPrice(item.originalPrice)}
                              </span>
                            )}
                          </div>
                          {item.discountSource === "promotion" && item.promotionName && (
                            <span className="mt-1 inline-block text-xs font-medium text-primary">
                              {item.promotionName}
                            </span>
                          )}
                        </div>

<div className="flex items-center gap-3">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleUpdateQuantity(lineKey, item.quantity - 1)}
                            className="w-8 h-8 p-0 border-border bg-card hover:bg-muted"
                            disabled={state.loading}
                          >
                            <Minus className="w-4 h-4 text-foreground" />
                          </Button>

<span className="w-12 text-center font-medium text-lg text-foreground">
                            {item.quantity}
                          </span>

<Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleUpdateQuantity(lineKey, item.quantity + 1)}
                            className="w-8 h-8 p-0 border-border bg-card hover:bg-muted"
                            disabled={state.loading}
                          >
                            <Plus className="w-4 h-4 text-foreground" />
                          </Button>
                        </div>

<div className="text-right">
                          <p className="font-semibold text-lg text-foreground mb-2">
                            {formatPrice(item.price * item.quantity)}
                          </p>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleRemoveItem(lineKey)}
                            className="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300"
                            disabled={state.loading}
                          >
                            {t("cart.remove")}
                          </Button>
                        </div>
                      </div>
                      )
                    })}
                  </div>
                </CardContent>
              </Card>
            </div>

<div className="lg:col-span-1">
              <Card className="sticky top-8 bg-card border-border">
                <CardContent className="p-6">
                  <h2 className="text-xl font-semibold text-foreground mb-4">{t("cart.orderSummary")}</h2>

<div className="space-y-3 mb-6">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">
                        {t("cart.subtotal")} ({state.itemCount} {t("cart.items")})
                      </span>
                      <span className="font-medium text-foreground">{formatPrice(state.total)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">{t("cart.shipping")}</span>
                      <span className="font-medium text-foreground">{t("cart.calculatedAtCheckout")}</span>
                    </div>
                    <div className="border-t border-border pt-3">
                      <div className="flex justify-between text-lg font-semibold">
                        <span className="text-foreground">{t("cart.total")}</span>
                        <span className="text-foreground">{formatPrice(state.total)}</span>
                      </div>
                    </div>
                  </div>

<div className="space-y-3">
                    <Button
                      className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
                      onClick={handleCheckout}
                      disabled={state.loading}
                    >
                      {state.loading ? (
                        <>
                          <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          {t("common.loading")}
                        </>
                      ) : (
                        t("cart.proceedToCheckout")
                      )}
                    </Button>

<Link href="/products">
                      <Button
                        variant="outline"
                        className="w-full mt-4 border-border bg-transparent hover:bg-muted text-foreground"
                        disabled={state.loading}
                      >
                        {t("cart.continueShopping")}
                      </Button>
                    </Link>

<Button
                      variant="ghost"
                      className="w-full text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300"
                      onClick={clearCart}
                      disabled={state.loading}
                    >
                      {t("cart.clearCart")}
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/categories/[id]/category-products-client.tsx"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { getCategoryProducts, getCategoryByIdFromList } from "@/services/api"
import type { Product, Category } from "@/types/product"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Footer } from "@/components/footer"
import { ShoppingCart, ArrowLeft } from "lucide-react"
import Image from "next/image"
import { useLanguage } from "@/contexts/language-context"
import { getDisplayPricing } from "@/lib/product-pricing"
import { ProductPrice, PromotionBadge } from "@/components/product-price"

interface CategoryProductsClientProps {
  categoryId: string
}

export default function CategoryProductsClient({ categoryId }: CategoryProductsClientProps) {
  const [products, setProducts] = useState<Product[]>([])
  const [category, setCategory] = useState<Category | null>(null)
  const [loading, setLoading] = useState(true)
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(false)
  const { t, formatPrice } = useLanguage()

useEffect(() => {
    const fetchData = async () => {
      setLoading(true)
      try {
        const [categoryResponse, productsResponse] = await Promise.all([
          getCategoryByIdFromList(categoryId),
          getCategoryProducts(categoryId, page, 20),
        ])

if (categoryResponse.status === "success") {
          setCategory(categoryResponse.data)
        }

if (productsResponse.status === "success") {
          setProducts(productsResponse.data.products)
          setHasMore(productsResponse.data.pagination.hasMore)
        }
      } catch (error) {
        console.error("Failed to fetch category data:", error)
      } finally {
        setLoading(false)
      }
    }

fetchData()
  }, [categoryId, page])

return (
    <div className="min-h-screen bg-background">
      <div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-12">
        <div className="mb-8">
          <Button asChild variant="ghost" className="mb-4 text-foreground hover:bg-muted">
            <Link href="/products?tab=categories">
              <ArrowLeft className="mr-2 h-4 w-4" />
              {t("categories.backToCategories") || "Back to Categories"}
            </Link>
          </Button>
          <h1 className="text-4xl font-bold mb-2 text-foreground">{category?.name || t("categories.title")}</h1>
          <p className="text-muted-foreground">{category?.metaDescription || t("categories.subtitle")}</p>
        </div>

{loading ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[...Array(8)].map((_, i) => (
              <Card key={i} className="animate-pulse bg-card border-border">
                <CardContent className="p-0">
                  <div className="aspect-square bg-muted" />
                  <div className="p-4 space-y-3">
                    <div className="h-4 bg-muted rounded w-3/4" />
                    <div className="h-4 bg-muted rounded w-1/2" />
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : products.length === 0 ? (
          <div className="text-center py-12">
            <ShoppingCart className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-xl font-semibold mb-2 text-foreground">{t("products.notFound")}</h3>
            <p className="text-muted-foreground">
              {t("categories.noProducts") || "This category doesn't have any products yet"}
            </p>
          </div>
        ) : (
          <>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {products.map((product) => {
                // Whole card links to the PDP; show "From {fromPrice}" for
                // variants-priced products and the product price otherwise.
                const pricing = getDisplayPricing(product)

return (
                  <Link key={product._id} href={`/product/${product._id}`}>
                    <Card className="group hover:shadow-lg transition-shadow cursor-pointer h-full bg-card border-border">
                      <CardContent className="p-0">
                        <div className="relative aspect-square overflow-hidden">
                          <PromotionBadge
                            pricing={pricing}
                            saleLabel={t("common.sale")}
                            showName
                            className="absolute top-4 left-4 z-10"
                          />

{product.featured ? (
                            <Badge className="absolute top-4 right-4 bg-yellow-500 text-black z-10">
                              {t("common.featured")}
                            </Badge>
                          ) : null}

<Image
                            src={product.images[0] || "/placeholder.svg"}
                            alt={product.name}
                            fill
                            className="object-cover group-hover:scale-105 transition-transform"
                          />
                        </div>
                        <div className="p-4">
                          <h3 className="font-semibold mb-2 line-clamp-2 text-balance text-foreground">
                            {product.name}
                          </h3>
                          <ProductPrice
                            pricing={pricing}
                            formatPrice={formatPrice}
                            fromLabel={t("products.from")}
                            priceClassName="text-xl font-bold text-foreground"
                            originalClassName="text-sm text-muted-foreground line-through"
                          />
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                )
              })}
            </div>

{hasMore ? (
              <div className="mt-8 flex justify-center">
                <Button
                  onClick={() => setPage((p) => p + 1)}
                  variant="outline"
                  className="bg-card text-foreground border-border hover:bg-muted"
                >
                  {t("categories.loadMore")}
                </Button>
              </div>
            ) : null}
          </>
        )}
      </div>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/categories/[id]/page.tsx"
import type { Metadata } from "next"
import { getCategoryByIdFromList } from "@/services/api"
import storeConfig from "@/config/store"
import CategoryProductsClient from "./category-products-client"

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  try {
    const response = await getCategoryByIdFromList(params.id)
    if (response.status === "success" && response.data) {
      const category = response.data
      return {
        title: category.metaTitle || `${category.name} - ${storeConfig.storeName}`,
        description: category.metaDescription || `Browse products in ${category.name} category`,
      }
    }
  } catch (error) {
    console.error("Failed to fetch category metadata:", error)
  }

return {
    title: `Category - ${storeConfig.storeName}`,
    description: "Browse products by category",
  }
}

export default function CategoryProductsPage({ params }: { params: { id: string } }) {
  return <CategoryProductsClient categoryId={params.id} />
}
[V0_FILE]typescriptreact:file="app/categories/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/categories/page.tsx"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { getStoreCategories } from "@/services/api"
import type { Category } from "@/types/product"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Search } from "lucide-react"
import { Footer } from "@/components/footer"
import { useLanguage } from "@/contexts/language-context"

export default function CategoriesPage() {
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(false)
  const { t } = useLanguage()

useEffect(() => {
    const fetchCategories = async () => {
      setLoading(true)
      try {
        const response = await getStoreCategories(page, 20, searchQuery)
        if (response.status === "success") {
          const sortedCategories = response.data.categories.sort((a, b) => {
            if (a.sortOrder !== undefined && b.sortOrder !== undefined) {
              return a.sortOrder - b.sortOrder
            }
            return 0
          })
          setCategories((prev) => (page === 1 ? sortedCategories : [...prev, ...sortedCategories]))
          setHasMore(response.data.pagination.hasMore)
        }
      } catch (error) {
        console.error("Failed to fetch categories:", error)
      } finally {
        setLoading(false)
      }
    }

fetchCategories()
  }, [page, searchQuery])

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    setPage(1)
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
      <div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-12">
        <div className="mb-12 text-center">
          <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
            {t("categories.title")}
          </h1>
          <p className="text-gray-600 text-lg mb-8">{t("categories.subtitle")}</p>

<form onSubmit={handleSearch} className="flex gap-2 max-w-xl mx-auto">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                type="text"
                placeholder={t("categories.searchPlaceholder")}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <Button type="submit">{t("common.search")}</Button>
          </form>
        </div>

{loading ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {[...Array(8)].map((_, i) => (
              <Card key={i} className="animate-pulse">
                <CardContent className="p-6">
                  <div className="h-5 bg-gray-200 rounded w-3/4 mx-auto" />
                </CardContent>
              </Card>
            ))}
          </div>
        ) : categories.length === 0 ? (
          <div className="text-center py-16">
            <h3 className="text-2xl font-semibold mb-2">{t("categories.noFound")}</h3>
            <p className="text-gray-600">{t("categories.adjustSearch")}</p>
          </div>
        ) : (
          <>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {categories.map((category) => (
                <Link key={category._id} href={`/categories/${category._id}`} className="group">
                  {category.image ? (
                    <div className="relative aspect-[4/3] overflow-hidden rounded-xl shadow-sm transition-all duration-300 group-hover:shadow-xl group-hover:-translate-y-1">
                      <Image
                        src={category.image || "/placeholder.svg"}
                        alt={category.name}
                        fill
                        className="object-cover transition-transform duration-500 group-hover:scale-110"
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
                      <div className="absolute inset-0 flex items-center justify-center">
                        <h3 className="text-xl md:text-2xl font-bold text-white text-center px-4 drop-shadow-lg">
                          {category.name}
                        </h3>
                      </div>
                    </div>
                  ) : (
                    <Card className="hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full border-2 hover:border-primary/20">
                      <CardContent className="p-6 flex items-center justify-center text-center h-full">
                        <h3 className="font-semibold text-lg group-hover:text-primary transition-colors">
                          {category.name}
                        </h3>
                      </CardContent>
                    </Card>
                  )}
                </Link>
              ))}
            </div>

{hasMore ? (
              <div className="mt-12 flex justify-center">
                <Button onClick={() => setPage((p) => p + 1)} variant="outline" size="lg" className="min-w-[200px]">
                  {t("categories.loadMore")}
                </Button>
              </div>
            ) : null}
          </>
        )}
      </div>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/checkout/page.tsx"
'use client'

import { loadStripe } from '@stripe/stripe-js'
import { Elements } from '@stripe/react-stripe-js'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useCart } from '@/contexts/cart-context'
import storeConfig from '@/config/store'
import { CheckoutProvider } from '@/contexts/checkout-context'
import { CheckoutForm } from '@/components/checkout/CheckoutForm'
import { getCheckoutConfig } from '@/services/api'
import Image from 'next/image'
import Link from 'next/link'

export default function CheckoutPage() {
  const { state } = useCart()
  const router = useRouter()
  const [mounted, setMounted] = useState(false)
  const [stripePromise, setStripePromise] = useState<any>(null)
  const [allowedCountries, setAllowedCountries] = useState<string[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    setMounted(true)
  }, [])

useEffect(() => {
    // Redirect to cart if no items
    if (mounted && (!state.items || state.items.length === 0)) {
      router.push('/cart')
    }
  }, [state.items, router, mounted])

// Fetch Stripe publishable key from backend
  useEffect(() => {
    const initializeStripe = async () => {
      try {
        setIsLoading(true)
        setError(null)

console.log('[v0] Fetching checkout config...')
        const config = await getCheckoutConfig()
        console.log('[v0] Checkout config received:', config)

if (!config.publishableKey) {
          throw new Error('Stripe publishable key not found in checkout config')
        }

const stripe = await loadStripe(config.publishableKey)
        console.log('[v0] Stripe initialized successfully')
        setStripePromise(stripe)
        setAllowedCountries(config.allowedCountries || [])
      } catch (err) {
        console.error('[v0] Error initializing Stripe:', err)
        setError(err instanceof Error ? err.message : 'Failed to initialize payment system')
      } finally {
        setIsLoading(false)
      }
    }

if (mounted) {
      initializeStripe()
    }
  }, [mounted])

if (!mounted || !state.items || state.items.length === 0) {
    return null
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-muted-foreground">Initializing checkout...</p>
        </div>
      </div>
    )
  }

if (error) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-foreground mb-4">Configuration Error</h1>
          <p className="text-muted-foreground">{error}</p>
        </div>
      </div>
    )
  }

if (!stripePromise) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-foreground mb-4">Configuration Error</h1>
          <p className="text-muted-foreground">Unable to initialize payment system. Please try again later.</p>
        </div>
      </div>
    )
  }

return (
    <CheckoutProvider>
      <div className="min-h-screen bg-background">
        {/* Header with store info */}
        <div className="bg-muted border-b border-input py-6">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <Link href="/">
              <div className="flex items-center gap-4 cursor-pointer hover:opacity-80 transition-opacity">
                {storeConfig.logo && (
                  <Image
                    src={storeConfig.logo}
                    alt={storeConfig.storeName}
                    width={120}
                    height={40}
                    className="h-10 w-auto"
                  />
                )}
                <div>
                  <h1 className="text-2xl font-bold text-foreground">{storeConfig.storeName}</h1>
                  <p className="text-muted-foreground">Checkout</p>
                </div>
              </div>
            </Link>
          </div>
        </div>

{/* Main checkout content */}
        <div className="py-8">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <CheckoutForm stripe={stripePromise} allowedCountries={allowedCountries} />
          </div>
        </div>
      </div>
    </CheckoutProvider>
  )
}
[V0_FILE]typescriptreact:file="app/collections/[slug]/page.tsx"
"use client"

import { useEffect, useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { useParams, useRouter } from "next/navigation"
import { getCollectionBySlug } from "@/services/api"
import type { Collection, Product } from "@/types/product"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Footer } from "@/components/footer"
import { ShoppingCart, ArrowLeft } from "lucide-react"
import { useCart } from "@/contexts/cart-context"
import { useLanguage } from "@/contexts/language-context"
import { getDisplayPricing } from "@/lib/product-pricing"
import { ProductPrice, PromotionBadge } from "@/components/product-price"

export default function CollectionPage() {
  const params = useParams()
  const router = useRouter()
  const slug = params.slug as string
  const [collection, setCollection] = useState<Collection | null>(null)
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(false)
  const { addItem } = useCart()
  const { t, formatPrice } = useLanguage()

useEffect(() => {
    const fetchCollection = async () => {
      if (!slug) return
      try {
        const response = await getCollectionBySlug(slug, page, 20)
        if (response.status === "success") {
          setCollection(response.data.collection)
          if (page === 1) {
            setProducts(response.data.products)
          } else {
            setProducts((prev) => [...prev, ...response.data.products])
          }
          setHasMore(response.data.pagination.hasMore)
        }
      } catch (error) {
        console.error("Failed to fetch collection:", error)
      } finally {
        setLoading(false)
      }
    }

fetchCollection()
  }, [slug, page])

const handleAddToCart = (product: Product) => {
    const pricing = getDisplayPricing(product)

if (pricing.requiresVariantSelection) {
      router.push(`/product/${product._id}`)
      return
    }

addItem({
      id: product._id,
      variantId: pricing.variantId,
      variantIndex: pricing.variantIndex,
      name: product.name,
      price: pricing.cartPrice,
      originalPrice: pricing.cartOriginalPrice,
      isOnSale: pricing.cartIsOnSale,
      discountSource: pricing.discountSource,
      promotionName: pricing.promotion?.name,
      images: product.images || [],
      quantity: 1,
      description: product.description,
      type: "product",
    })
  }

if (loading && page === 1) {
    return (
      <div className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-8">
          <div className="animate-pulse">
            <div className="h-8 bg-muted rounded w-1/3 mb-4" />
            <div className="h-4 bg-muted rounded w-2/3 mb-8" />
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {[...Array(8)].map((_, i) => (
                <div key={i} className="bg-muted rounded-lg h-80" />
              ))}
            </div>
          </div>
        </div>
        <Footer />
      </div>
    )
  }

if (!collection) {
    return (
      <div className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-16 text-center">
          <h1 className="text-3xl font-bold text-foreground mb-4">Collection Not Found</h1>
          <p className="text-muted-foreground mb-8">The collection you are looking for does not exist.</p>
          <Button asChild>
            <Link href="/">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Home
            </Link>
          </Button>
        </div>
        <Footer />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Collection Header */}
      <div className="relative h-64 md:h-80">
        {collection.image ? (
          <>
            <Image
              src={collection.image}
              alt={collection.name}
              fill
              className="object-cover"
              priority
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
          </>
        ) : (
          <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-primary/10 to-background" />
        )}
        <div className="absolute inset-0 flex items-end">
          <div className="container mx-auto px-4 pb-8">
            <h1 className={`text-4xl md:text-5xl font-bold mb-2 ${collection.image ? "text-white" : "text-foreground"}`}>
              {collection.name}
            </h1>
            {collection.description && (
              <p className={`text-lg max-w-2xl ${collection.image ? "text-white/80" : "text-muted-foreground"}`}>
                {collection.description}
              </p>
            )}
          </div>
        </div>
      </div>

{/* Products Grid */}
      <div className="container mx-auto px-4 py-12">
        {products.length === 0 ? (
          <div className="text-center py-16">
            <h3 className="text-2xl font-semibold mb-2 text-foreground">No Products Yet</h3>
            <p className="text-muted-foreground">This collection doesn't have any products yet.</p>
          </div>
        ) : (
          <>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {products.map((product) => {
                const pricing = getDisplayPricing(product)
                return (
                  <Card
                    key={product._id}
                    className="group overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 bg-card border-border"
                  >
                    <Link href={`/product/${product._id}`}>
                      <div className="relative aspect-square overflow-hidden">
                        <Image
                          src={product.images?.[0] || "/placeholder.svg"}
                          alt={product.name}
                          fill
                          className="object-cover transition-transform duration-500 group-hover:scale-110"
                          sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                        />
                        <PromotionBadge
                          pricing={pricing}
                          saleLabel={t("common.sale")}
                          showName
                          className="absolute top-2 left-2 z-10"
                        />
                      </div>
                    </Link>
                    <CardContent className="p-4">
                      <Link href={`/product/${product._id}`}>
                        <h3 className="font-semibold text-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors">
                          {product.name}
                        </h3>
                      </Link>
                      <div className="flex items-center justify-between gap-2">
                        <ProductPrice
                          pricing={pricing}
                          formatPrice={formatPrice}
                          fromLabel={t("products.from")}
                          priceClassName="text-lg font-bold text-foreground"
                          originalClassName="text-sm text-muted-foreground line-through"
                        />
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleAddToCart(product)}
                          className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
                        >
                          <ShoppingCart className="h-4 w-4" />
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                )
              })}
            </div>

{hasMore && (
              <div className="mt-12 flex justify-center">
                <Button
                  onClick={() => setPage((p) => p + 1)}
                  variant="outline"
                  size="lg"
                  className="min-w-[200px]"
                  disabled={loading}
                >
                  {loading ? "Loading..." : t("categories.loadMore")}
                </Button>
              </div>
            )}
          </>
        )}
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/collections/page.tsx"
"use client"

import Link from "next/link"
import Image from "next/image"
import { useCollections } from "@/contexts/collections-context"
import { Footer } from "@/components/footer"
import { useLanguage } from "@/contexts/language-context"

export default function CollectionsPage() {
  const { collections, loading } = useCollections()
  const { t } = useLanguage()

if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-12">
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Collections</h1>
            <p className="text-xl text-muted-foreground">Browse our curated collections</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="relative aspect-[4/3] overflow-hidden rounded-xl bg-muted animate-pulse" />
            ))}
          </div>
        </div>
        <Footer />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Collections</h1>
          <p className="text-xl text-muted-foreground">Browse our curated collections</p>
        </div>

{collections.length === 0 ? (
          <div className="text-center py-16">
            <h3 className="text-2xl font-semibold mb-2 text-foreground">No Collections Yet</h3>
            <p className="text-muted-foreground">Check back later for new collections.</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {collections.map((collection) => (
              <Link key={collection._id} href={`/collections/${collection.slug}`} className="group">
                <div className="relative aspect-[4/3] overflow-hidden rounded-xl">
                  {collection.image ? (
                    <Image
                      src={collection.image}
                      alt={collection.name}
                      fill
                      className="object-cover transition-transform duration-500 group-hover:scale-110"
                      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                    />
                  ) : (
                    <div className="absolute inset-0 bg-gradient-to-br from-primary/30 via-primary/15 to-muted transition-all duration-500 group-hover:from-primary/40 group-hover:via-primary/20" />
                  )}
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
                  <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
                    <h3 className="text-xl md:text-2xl font-bold text-white drop-shadow-lg mb-2">
                      {collection.name}
                    </h3>
                    {collection.description && (
                      <p className="text-white/70 text-sm line-clamp-2 max-w-[80%] mb-2">
                        {collection.description}
                      </p>
                    )}
                    {collection.productCount > 0 && (
                      <p className="text-white/80 text-sm">
                        {collection.productCount} {collection.productCount === 1 ? "product" : "products"}
                      </p>
                    )}
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx"
"use client"

import type React from "react"

import { useState } 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 { useLanguage } from "@/contexts/language-context"

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)
  const { t } = useLanguage()

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

// Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 1000))

setIsSubmitting(false)
    setIsSubmitted(true)
    setFormData({ name: "", email: "", subject: "", message: "" })
  }

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

return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 text-balance">{t("contact.title")}</h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto text-balance">{t("contact.subtitle")}</p>
          </div>

<div className="grid md:grid-cols-2 gap-12">
            {/* Contact Form */}
            <Card>
              <CardHeader>
                <CardTitle>{t("contact.sendMessage")}</CardTitle>
              </CardHeader>
              <CardContent>
                {isSubmitted ? (
                  <div className="text-center py-8">
                    <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                      <span className="text-2xl text-green-600">✓</span>
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-2">{t("contact.messageSent")}</h3>
                    <p className="text-muted-foreground">{t("contact.thanksMessage")}</p>
                    <Button onClick={() => setIsSubmitted(false)} variant="outline" className="mt-4">
                      {t("contact.sendAnother")}
                    </Button>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-4">
                      <div>
                        <label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
                          {t("contact.name")} *
                        </label>
                        <Input
                          id="name"
                          name="name"
                          type="text"
                          required
                          value={formData.name}
                          onChange={handleChange}
                          placeholder={t("contact.namePlaceholder")}
                        />
                      </div>
                      <div>
                        <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
                          {t("contact.email")} *
                        </label>
                        <Input
                          id="email"
                          name="email"
                          type="email"
                          required
                          value={formData.email}
                          onChange={handleChange}
                          placeholder={t("contact.emailPlaceholder")}
                        />
                      </div>
                    </div>
                    <div>
                      <label htmlFor="subject" className="block text-sm font-medium text-foreground mb-2">
                        {t("contact.subject")} *
                      </label>
                      <Input
                        id="subject"
                        name="subject"
                        type="text"
                        required
                        value={formData.subject}
                        onChange={handleChange}
                        placeholder={t("contact.subjectPlaceholder")}
                      />
                    </div>
                    <div>
                      <label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
                        {t("contact.message")} *
                      </label>
                      <Textarea
                        id="message"
                        name="message"
                        required
                        value={formData.message}
                        onChange={handleChange}
                        placeholder={t("contact.messagePlaceholder")}
                        rows={6}
                      />
                    </div>
                    <Button type="submit" disabled={isSubmitting} className="w-full">
                      {isSubmitting ? t("contact.sending") : t("contact.sendButton")}
                    </Button>
                  </form>
                )}
              </CardContent>
            </Card>