108:"ExplicitChatIdProvider" 109:I[903690,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$83","$84","$85","$80","$86","$87","$81","$88","$89","$8a","$8b","$8c","$7f"],"$108"] 10a:I[838238,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$83","$84","$85","$80","$86","$87","$81","$88","$89","$8a","$8b","$8c","$7f"],"SWRDataProvider"] 10c:[] 10d:[["b_kPdNxfsWDX2",null]] 10e:[["b_kPdNxfsWDX2",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["b_kPdNxfsWDX2","$D2026-08-26T23:53:44.883Z"]] 110:[["b_kPdNxfsWDX2",false]] 111:[["b_kPdNxfsWDX2","$undefined"]] 112:[["b_kPdNxfsWDX2",null]] 113:[["b_kPdNxfsWDX2",true]] 114:[["b_kPdNxfsWDX2",true]] 115:[] 116:Te4f87,[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/apple-icon-lYEBetG37fdOzjdcCFEyPAlINNpJun.png" [V0_FILE]png:file="public/headphones-case.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/headphones-case-vLXMGudsFQxK4VwNrp9hdCK1LA5v1V.png" [V0_FILE]jpg:file="public/headphones-details.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/headphones-details-uxJpDBobCuQem2Z4cpOiWW0rkNcXCw.jpg" [V0_FILE]png:file="public/headphones-side-view.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/headphones-side-view-EuGTpIOzEglbVm8gRpUKRlvx2YnIW7.png" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/icon-dark-32x32-SgKJd1G8fQFLp5XmYjl7f6m4PI56Hz.png" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/icon-light-32x32-aicFfZWa9SGMv35gqYB7fMpxzf7E8w.png" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/placeholder-logo-AdGW2JqZrhNHjo3fZzqdKl2bqGpTKc.png" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/placeholder-user-y5rQTXLA5NpJrzfGSddnFnvsupVif3.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/placeholder-QxaIfBay6h4pvBcjnNag3nmcVslIxF.jpg" [V0_FILE]png:file="public/premium-product-showcase.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/premium-product-showcase-L0znaOYaloBUGkcgKmq66NdZcAd3mj.png" [V0_FILE]png:file="public/premium-wireless-headphones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/premium-wireless-headphones-td2UiFCxFJcjQ82gaN4fA1b8pSM5gZ.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" "use client" import { useLanguage } from "@/contexts/language-context" export default function AboutPage() { const { t } = useLanguage() return (

{/* Hero Section */}

{t("about.ourStory")}

{t("about.heroSubtitle")}

{/* Main Content */}

{t("about.whoWeAre")}

{t("about.whoWeAreP1")}

{t("about.whoWeAreP2")}

{t("about.whoWeAreP3")}

{t("about.ourMission")}

{t("about.ourMissionText")}

{t("about.ourVision")}

{t("about.ourVisionText")}

{/* Values Section */}

{t("about.ourValues")}

{t("about.qualityFirst")}

{t("about.qualityFirstText")}

{t("about.sustainability")}

{t("about.sustainabilityText")}

{t("about.customerFocus")}

{t("about.customerFocusText")}

{/* Team Section */}

{t("about.meetTeam")}

{t("about.meetTeamText")}

{`"${t("about.teamQuote")}"`}

{t("about.teamSignature")}

) } [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 (

{t("bundles.notFound")}

) } 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}% {t("bundles.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 && (

{t("bundles.youSave")} ${pricing.discountAmount.toFixed(2)}!

)}

)} {/* Bundle Items */}

{t("bundles.whatsIncluded")} ({items.length} {items.length === 1 ? t("bundles.item") : t("bundles.items")})

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

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

) : (

)}

{item.product?.name || t("bundles.product")}

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

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

)}

{t("bundles.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 */}

{t("bundles.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 (

{t("bundles.title")}

{t("bundles.subtitle")}

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

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

))}

) : bundles.length === 0 ? (

{t("bundles.noFound")}

{t("bundles.checkBackLater")}

) : ( <>

{bundles.map((bundle) => (

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

) : (

)}

{bundle.discountPercentage > 0 && ( {bundle.discountPercentage}% {t("bundles.off")} )}

{bundle.name}

{bundle.summary && (

{bundle.summary}

)} {bundle.itemCount > 0 && (

{bundle.itemCount} {bundle.itemCount === 1 ? t("bundles.item") : t("bundles.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")}

{t("cart.addSomeProducts")}

) } return (

{t("cart.title")}

{state.error && (

{t("common.error")}: {state.error}. {t("cart.refreshError")}

)}

{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 { useLanguage } from '@/contexts/language-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' import { ShoppingBag } from 'lucide-react' export default function CheckoutPage() { const { state } = useCart() const { t } = useLanguage() 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) const [notConfigured, setNotConfigured] = useState(false) 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) setNotConfigured(false) 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: any) { console.error('[v0] Error initializing Stripe:', err) const message = err instanceof Error ? err.message : t('checkout.unableToInit') // Store hasn't connected Stripe yet — checkout is unavailable for this store if (err?.code === 'STRIPE_NOT_CONNECTED' || /connect Stripe|Stripe Connect|publishable key not found/i.test(message)) { setNotConfigured(true) } else { setError(message) } } finally { setIsLoading(false) } } if (mounted) { initializeStripe() } }, [mounted]) if (!mounted || !state.items || state.items.length === 0) { return null } if (isLoading) { return (

{t('checkout.initializing')}

) } if (notConfigured) { return (

{t('checkout.notConfiguredTitle')}

{t('checkout.notConfiguredDesc')}

{t('checkout.continueShopping')}

) } if (error) { return (

{t('checkout.configError')}

{error}

) } if (!stripePromise) { return (

{t('checkout.configError')}

{t('checkout.unableToInit')}

) } return (

{/* Header with store info */}

{storeConfig.logo && (

)}

{storeConfig.storeName}

{t('checkout.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 (

{t("collections.notFound")}

{t("collections.doesNotExist")}

) } return (

{/* Collection Header */}

{collection.image ? ( <>

) : (

)}

{collection.name}

{collection.description && (

{collection.description}

)}

{/* Products Grid */}

{products.length === 0 ? (

{t("collections.noProducts")}

{t("collections.noProductsDesc")}

) : ( <>

{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 (

{t("collections.title")}

{t("collections.subtitle")}

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

))}

) } return (

{t("collections.title")}

{t("collections.subtitle")}

{collections.length === 0 ? (

{t("collections.noCollections")}

{t("collections.checkBackLater")}

) : (

{collections.map((collection) => (

{collection.image ? (

) : (

)}

{collection.name}

{collection.description && (

{collection.description}

)} {collection.productCount > 0 && (

{collection.productCount}{" "} {collection.productCount === 1 ? t("collections.product") : t("collections.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() {
  const { t } = useLanguage()
  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">{t("success.orderConfirmation")}</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(t("success.missingPayment"))
      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 : t("success.failedFinalize"))
      } 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}. {t("cart.refreshError")}
          </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">{t("cart.addSomeProducts")}</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 { useLanguage } from '@/contexts/language-context'
import storeConfig from '@/config/store'

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

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

return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold text-foreground">{t("checkout.contactInformation")}</h2>
      
      <div>
        <Label htmlFor="email" className="text-foreground">
          {t("checkout.email")} <span className="text-red-500">*</span>
        </Label>
        <Input
          id="email"
          type="email"
          placeholder={t("checkout.emailPlaceholder")}
          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 { useLanguage } from '@/contexts/language-context'
import { getCheckoutSummary } from '@/services/api'
import { useState } from 'react'

export function CheckoutCoupon() {
  const { state: cartState } = useCart()
  const { t } = useLanguage()
  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(t('checkout.enterCoupon'))
      setSuccess('')
      return
    }

// Block re-applying the coupon that is already active.
    if (appliedCoupon && code.toLowerCase() === appliedCoupon.toLowerCase()) {
      setError(t('checkout.couponAlreadyApplied'))
      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 || t('checkout.couponApplied'))
      } else {
        // Invalid — keep the summary without a discount and show the backend reason.
        setSummary(data)
        setAppliedCoupon('')
        setError(data.coupon?.message || t('checkout.couponInvalid'))
      }
    } catch (err: any) {
      // Surfaces the backend message, e.g. "Coupon not found" or "Coupon expired".
      setError(err.message || t('checkout.couponApplyFailed'))
    } 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 || t('checkout.couponRemoveFailed'))
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="space-y-3">
      <label htmlFor="coupon" className="text-foreground font-medium">
        {t('checkout.couponCode')}
      </label>
      <div className="flex gap-2">
        <Input
          id="coupon"
          type="text"
          placeholder={t('checkout.couponPlaceholder')}
          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 ? t('checkout.removing') : t('checkout.remove')}
          </Button>
        ) : (
          <Button
            onClick={handleApplyCoupon}
            disabled={loading || !couponCode.trim()}
            type="button"
            className="bg-primary text-primary-foreground hover:bg-primary/90"
          >
            {loading ? t('checkout.applying') : t('checkout.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 { useLanguage } from '@/contexts/language-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 { t } = useLanguage()
  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 || t('checkout.loadSummaryFailed')
          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(t('checkout.invalidAddress'))
        }
      } 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">{t('checkout.stripeNotInitialized')}</div>
  }

const validateForm = () => {
    if (
      !formData.email ||
      !formData.fullName ||
      !formData.address ||
      !formData.city ||
      !formData.postalCode ||
      !formData.country ||
      !formData.phoneNumber
    ) {
      return t('checkout.fillRequiredFields')
    }
    if (!selectedShippingId) {
      return t('checkout.selectShippingMethod')
    }
    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(t('checkout.createIntentFailed'))
        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 || t('checkout.initPaymentFailed'))
    } 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 ? t('checkout.preparingPayment') : t('checkout.continueToPayment')}
            </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 { t } = useLanguage()
  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 || t('checkout.paymentFailed'))
        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 || t('checkout.paymentError'))
      setLoading(false)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <h2 className="text-lg font-semibold text-foreground">{t('checkout.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 ? t('checkout.processing') : `${t('checkout.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'
import { useLanguage } from '@/contexts/language-context'

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

return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold text-foreground">{t("checkout.orderNotes")}</h2>
      <div>
        <Label htmlFor="orderNotes" className="text-foreground">
          {t("checkout.notesOptional")}
        </Label>
        <Textarea
          id="orderNotes"
          placeholder={t("checkout.notesPlaceholder")}
          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 { useLanguage } from '@/contexts/language-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()
  const { t } = useLanguage()

// 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">{t("checkout.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>{t("checkout.subtotal")}</span>
            <span>{money(summary.subtotal || 0)}</span>
          </div>

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

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

{summary.taxAmount > 0 && (
            <div className="flex justify-between text-foreground">
              <span>{t("checkout.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>{t("checkout.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 { useLanguage } from '@/contexts/language-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

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

const validateLocationField = (label: string, value: string, required: boolean): string => {
    const trimmed = value.trim()
    if (!trimmed) {
      return required ? `${label} ${t('checkout.isRequired')}` : ''
    }
    if (trimmed.length < 2) {
      return `${label} ${t('checkout.minTwoChars')}`
    }
    if (!LOCATION_NAME_REGEX.test(trimmed)) {
      return `${label} ${t('checkout.lettersOnly')}`
    }
    return ''
  }

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

if (field === 'city' && touched.city) {
      setErrors((prev) => ({ ...prev, city: validateLocationField(t('checkout.city'), value, true) }))
    }
    if (field === 'state' && touched.state) {
      setErrors((prev) => ({ ...prev, state: validateLocationField(t('checkout.stateRegion'), value, false) }))
    }
  }

const handleBlur = (field: 'city' | 'state') => {
    setTouched((prev) => ({ ...prev, [field]: true }))
    if (field === 'city') {
      setErrors((prev) => ({ ...prev, city: validateLocationField(t('checkout.city'), formData.city, true) }))
    }
    if (field === 'state') {
      setErrors((prev) => ({ ...prev, state: validateLocationField(t('checkout.stateRegion'), 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">{t("checkout.shippingAddress")}</h2>

<div>
        <Label htmlFor="fullName" className="text-foreground">
          {t("checkout.fullName")} <span className="text-red-500">*</span>
        </Label>
        <Input
          id="fullName"
          type="text"
          placeholder={t("checkout.fullNamePlaceholder")}
          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">
            {t("checkout.company")}
          </Label>
          <Input
            id="company"
            type="text"
            placeholder={t("checkout.companyPlaceholder")}
            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">
            {t("checkout.taxId")}
          </Label>
          <Input
            id="taxId"
            type="text"
            placeholder={t("checkout.taxIdPlaceholder")}
            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">
          {t("checkout.address")} <span className="text-red-500">*</span>
        </Label>
        <Input
          id="address"
          type="text"
          placeholder={t("checkout.addressPlaceholder")}
          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">
          {t("checkout.addressCont")}
        </Label>
        <Input
          id="addressCont"
          type="text"
          placeholder={t("checkout.addressContPlaceholder")}
          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">
            {t("checkout.postalCode")} <span className="text-red-500">*</span>
          </Label>
          <Input
            id="postalCode"
            type="text"
            placeholder={t("checkout.postalCodePlaceholder")}
            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">
            {t("checkout.city")} <span className="text-red-500">*</span>
          </Label>
          <Input
            id="city"
            type="text"
            placeholder={t("checkout.cityPlaceholder")}
            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">
            {t("checkout.stateRegion")}
          </Label>
          <Input
            id="state"
            type="text"
            placeholder={t("checkout.statePlaceholder")}
            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">
            {t("checkout.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={t("checkout.selectCountry")} />
            </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">
          {t("checkout.phoneNumber")} <span className="text-red-500">*</span>
        </Label>
        <Input
          id="phoneNumber"
          type="tel"
          placeholder={t("checkout.phonePlaceholder")}
          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 { useLanguage } from '@/contexts/language-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 { t } = useLanguage()

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">{t("checkout.shippingMethod")}</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">{t("checkout.fetchingShipping")}</span>
          </div>
        </div>
      </div>
    )
  }

if (shippingError) {
    return (
      <div className="space-y-4">
        <h2 className="text-lg font-semibold text-foreground">{t("checkout.shippingMethod")}</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">{t("checkout.shippingMethod")}</h2>
        <div className="text-muted-foreground">{t("checkout.noShippingOptions")}</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">{t("checkout.shippingMethod")}</h2>

<RadioGroup
        value={activeShippingId}
        onValueChange={handleShippingChange}
        className="space-y-3"
      >
        {shippingOptions.map((option) => {
          const deliveryText =
            option.minDeliveryDays && option.maxDeliveryDays
              ? `${option.minDeliveryDays}-${option.maxDeliveryDays} ${t("checkout.businessDays")}`
              : 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 storeConfig from "@/config/store"
import presets from "@/config/presets"
import { ArrowRight } from "lucide-react"

export function CollectionsSection() {
  const { collections, loading } = useCollections()
  const preset = presets[storeConfig.presetId]
  const config = preset?.collectionsSection

if (!config?.visible) {
    return null
  }

if (loading) {
    return (
      <section className={config.section.className}>
        <div className={config.header.className}>
          <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 className={config.layout.gridClassName}>
          {[...Array(config.layout.skeletonCount)].map((_, i) => (
            <div key={i} className={config.skeleton.className} />
          ))}
        </div>
      </section>
    )
  }

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

const displayCollections = collections.slice(0, config.layout.maxCollections)

return (
    <section className={config.section.className}>
      <div className={config.header.className}>
        <div>
          <h2 className={config.title.className}>{config.title.text || "Shop by Collection"}</h2>
          <p className={config.subtitle.className}>{config.subtitle.text}</p>
        </div>
        {config.viewAllButton.visible && (
          <Button asChild variant="ghost" className={`${config.viewAllButton.className} hidden md:flex items-center gap-2`}>
            <Link href={config.viewAllButton.href}>
              {config.viewAllButton.text || "View All"}
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
        )}
      </div>

<div className={config.layout.gridClassName}>
        {displayCollections.map((collection) => (
          <Link key={collection._id} href={`/collections/${collection.slug}`} className="group">
            <div className={config.card.className}>
              <div className={config.collectionImage.className}>
                {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" />
                )}
              </div>
              <div className="p-6">
                <h3 className={config.collectionName.className}>{collection.name}</h3>
                {collection.productCount > 0 && (
                  <p className={config.collectionCount.className}>
                    {collection.productCount} {collection.productCount === 1 ? "product" : "products"}
                  </p>
                )}
              </div>
            </div>
          </Link>
        ))}
      </div>

{config.viewAllMobileButton.visible && (
        <div className="mt-8 flex justify-center md:hidden">
          <Button asChild className={config.viewAllMobileButton.className}>
            <Link href={config.viewAllMobileButton.href}>
              {config.viewAllMobileButton.text || "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 type React from "react"
import { useState } from "react"
import { Mail, Phone, MapPin, Loader2, CheckCircle2 } 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 { subscribeToNewsletter } from "@/services/api"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
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 [email, setEmail] = useState("")
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
  const [message, setMessage] = useState("")

const handleNewsletterSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!email.trim() || status === "loading") return

setStatus("loading")
    setMessage("")

try {
      const result = await subscribeToNewsletter(email, "footer")
      setStatus("success")
      setMessage(result?.message || t("footer.subscribed"))
      setEmail("")
    } catch (error: any) {
      if (error?.code === "DUPLICATE_SUBSCRIBER") {
        setStatus("success")
        setMessage(t("footer.alreadySubscribed"))
        setEmail("")
        return
      }
      setStatus("error")
      setMessage(error?.message || t("footer.somethingWrong"))
    }
  }

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">
        {storeConfig.newsletterEnabled && (
          <div className="mb-12 pb-12 border-b border-border flex flex-col md:flex-row md:items-center md:justify-between gap-6">
            <div className="max-w-md">
              <h4 className="text-xl font-semibold text-foreground mb-2">{t("footer.newsletter")}</h4>
              <p className="text-muted-foreground text-sm">{t("footer.newsletterSubtitle")}</p>
            </div>

{status === "success" ? (
              <div className="flex items-center gap-2 text-foreground md:min-w-[360px]" role="status" aria-live="polite">
                <CheckCircle2 className="w-5 h-5 text-secondary shrink-0" />
                <span className="text-sm font-medium">{message}</span>
              </div>
            ) : (
              <div className="w-full md:w-auto md:min-w-[360px]">
                <form onSubmit={handleNewsletterSubmit} className="flex flex-col sm:flex-row gap-3">
                  <div className="relative flex-1">
                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                    <Input
                      type="email"
                      name="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder={t("footer.emailPlaceholder")}
                      className="pl-9"
                      disabled={status === "loading"}
                      required
                    />
                  </div>
                  <Button
                    type="submit"
                    disabled={status === "loading"}
                    className="bg-primary text-primary-foreground hover:bg-primary/90 shrink-0"
                  >
                    {status === "loading" ? (
                      <>
                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                        {t("footer.subscribing")}
                      </>
                    ) : (
                      t("footer.subscribe")
                    )}
                  </Button>
                </form>
                {status === "error" && (
                  <p className="text-destructive text-sm mt-2" role="alert">
                    {message}
                  </p>
                )}
              </div>
            )}
          </div>
        )}

<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">{t("footer.tagline")}</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"
                >
                  {t("footer.collections")}
                </a>
              </li>
              <li>
                <a
                  href="/bundles"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  {t("footer.bundles")}
                </a>
              </li>
            </ul>
          </div>

<div>
            <h4 className="text-lg font-semibold mb-6 text-foreground">{t("footer.legal")}</h4>
            <ul className="space-y-3">
              {hasTerms && (
                <li>
                  <a
                    href="/terms-of-service"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {t("footer.termsOfService")}
                  </a>
                </li>
              )}
              {hasPrivacy && (
                <li>
                  <a
                    href="/privacy-policy"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {t("footer.privacyPolicy")}
                  </a>
                </li>
              )}
              {hasReturn && (
                <li>
                  <a
                    href="/return-policy"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {t("footer.returnPolicy")}
                  </a>
                </li>
              )}
              {!hasTerms && !hasPrivacy && !hasReturn && (
                <li>
                  <span className="text-muted-foreground/50">{t("footer.noPolicies")}</span>
                </li>
              )}
            </ul>
          </div>

<div>
            <h4 className="text-lg font-semibold mb-6 text-foreground">{t("footer.contactInfo")}</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"
            >
              {t("footer.poweredBy")} <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 { Badge } from "@/components/ui/badge"
import { 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"
            >
              {t("nav.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">
              <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)}
              >
                {t("nav.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 type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Mail, Loader2, CheckCircle2 } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"
import storeConfig from "@/config/store"
import { subscribeToNewsletter } from "@/services/api"

interface NewsletterProps {
  source?: string
}

export function Newsletter({ source = "homepage" }: NewsletterProps) {
  const { t } = useLanguage()
  const [email, setEmail] = useState("")
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
  const [message, setMessage] = useState("")

if (!storeConfig.newsletterEnabled) return null

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!email.trim() || status === "loading") return

setStatus("loading")
    setMessage("")

try {
      const result = await subscribeToNewsletter(email, source)
      setStatus("success")
      setMessage(result?.message || t("newsletter.subscribed"))
      setEmail("")
    } catch (error: any) {
      if (error?.code === "DUPLICATE_SUBSCRIBER") {
        // Treat "already subscribed" as a friendly success state
        setStatus("success")
        setMessage(t("newsletter.alreadySubscribed"))
        setEmail("")
        return
      }
      setStatus("error")
      setMessage(error?.message || t("footer.somethingWrong"))
    }
  }

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">{t("newsletter.subtitle")}</p>

{status === "success" ? (
            <div className="flex flex-col items-center gap-3 max-w-md mx-auto" role="status" aria-live="polite">
              <CheckCircle2 className="w-12 h-12 text-secondary-foreground" />
              <p className="text-lg font-medium text-secondary-foreground">{message}</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} 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"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder={t("footer.emailPlaceholder")}
                  className="pl-10 py-6 text-lg bg-background border-0"
                  disabled={status === "loading"}
                  required
                />
              </div>
              <Button
                type="submit"
                size="lg"
                disabled={status === "loading"}
                className="bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-6 text-lg font-semibold"
              >
                {status === "loading" ? (
                  <>
                    <Loader2 className="w-5 h-5 mr-2 animate-spin" />
                    {t("newsletter.subscribing")}
                  </>
                ) : (
                  t("footer.subscribe")
                )}
              </Button>
            </form>
          )}

{status === "error" && (
            <p className="text-destructive text-sm mt-4 font-medium" role="alert">
              {message}
            </p>
          )}

{status !== "success" && (
            <p className="text-secondary-foreground/60 text-sm mt-4">{t("newsletter.noSpam")}</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: t("common.error"),
        description: t("restock.enterValidEmail"),
        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 || t("restock.failedSubscribe"))
      }

// Show the message from the API response (handles both new and existing subscriptions)
      toast({
        title: t("common.success"),
        description: data.data?.message || t("restock.defaultSuccess"),
        variant: "default",
      })

setEmail("")
      setIsOpen(false)
    } catch (error: any) {
      toast({
        title: t("common.error"),
        description: error.message || t("restock.failedSubscribeNotifications"),
        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 || t("restock.getNotified")}
      </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} ${t("restock.whenInStock")}` : t("restock.getNotified")}
            </h2>

<div className="space-y-4">
              <div>
                <label htmlFor="restock-email" className="block text-sm font-medium mb-2">
                  {t("restock.emailAddress")}
                </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">{t("restock.emailHint")}</p>

<div className="flex gap-3">
                <Button
                  type="button"
                  variant="outline"
                  className="flex-1"
                  onClick={() => setIsOpen(false)}
                  disabled={isLoading}
                >
                  {t("restock.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" />
                      {t("restock.subscribing")}
                    </>
                  ) : (
                    t("restock.notifyMe")
                  )}
                </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={t("restock.closeModal")}
            >
              ✕
            </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",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto border-t-2 border-border" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-4xl font-black text-foreground uppercase tracking-tight",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 uppercase tracking-widest text-xs",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 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 overflow-hidden flex flex-col" },
    collectionImage: { className: "relative w-full h-48 overflow-hidden" },
    collectionName: { className: "font-bold text-lg text-foreground uppercase tracking-widest p-4" },
    collectionCount: { className: "text-muted-foreground text-xs uppercase tracking-widest px-4 pb-4" },
    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: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground rounded-none uppercase tracking-widest font-bold",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-muted border-2 border-border rounded-none" },
  },
  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 - modern split-layout editorial commerce design
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[80svh] bg-background overflow-hidden border-b border-border" },
    container: { className: "container mx-auto px-6 md:px-10 min-h-[80svh] flex items-center" },
    contentWrapper: { className: "max-w-2xl border-l-2 border-foreground pl-6 md:pl-10 py-4" },
    badge: {
      visible: true,
      className: "inline-flex items-center text-foreground bg-transparent px-0 py-1 text-[11px] font-semibold uppercase tracking-[0.3em]",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-foreground",
    },
    title: {
      className: "text-5xl md:text-7xl font-bold text-foreground mb-6 leading-[0.95] tracking-tight text-balance",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-foreground",
    },
    subtitle: {
      className: "text-lg text-muted-foreground mb-8 max-w-md leading-relaxed",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 items-start" },
    primaryButton: {
      visible: true,
      className: "bg-foreground hover:bg-foreground/90 text-background text-sm px-9 py-6 rounded-none font-semibold uppercase tracking-wider border-0 transition-colors",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-3 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border-b-2 border-foreground text-foreground hover:text-muted-foreground hover:border-muted-foreground text-sm px-1 py-2 rounded-none font-semibold uppercase tracking-wider bg-transparent transition-colors",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-20 px-6 md:px-10 max-w-7xl mx-auto border-t border-border" },
    header: { className: "flex items-end justify-between mb-10 border-b border-border pb-6" },
    title: {
      className: "text-3xl md:text-4xl font-bold text-foreground tracking-tight",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 text-sm uppercase tracking-widest",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-px bg-border", skeletonCount: 4 },
    card: { className: "group relative aspect-square overflow-hidden hover:bg-muted transition-colors cursor-pointer h-full bg-card rounded-none border-0" },
    collectionImage: { className: "relative w-full h-full overflow-hidden group-hover:scale-105 transition-transform duration-700" },
    collectionName: { className: "absolute inset-0 flex items-center justify-center font-semibold text-center text-card-foreground uppercase tracking-wide text-sm" },
    collectionCount: { className: "absolute bottom-3 text-center text-foreground/60 text-xs uppercase w-full" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-foreground hover:text-muted-foreground rounded-none font-semibold text-xs uppercase tracking-widest border-b border-foreground pb-1",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-foreground text-foreground hover:bg-foreground hover:text-background rounded-none font-semibold uppercase tracking-wider bg-transparent transition-colors",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-muted rounded-none" },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-6 md:px-10 max-w-7xl mx-auto" },
    header: { className: "flex items-end justify-between mb-10 border-b border-border pb-6" },
    title: {
      className: "text-3xl md:text-4xl font-bold text-foreground tracking-tight",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 text-sm uppercase tracking-widest",
      text: "Browse our collection",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-px bg-border", skeletonCount: 4 },
    card: { className: "group hover:bg-muted transition-colors cursor-pointer h-full bg-card rounded-none border-0" },
    categoryName: { className: "font-semibold text-base text-center text-card-foreground uppercase tracking-wide" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-foreground hover:bg-transparent hover:text-muted-foreground rounded-none font-semibold text-xs uppercase tracking-widest border-b border-foreground pb-1",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-foreground text-foreground hover:bg-foreground hover:text-background rounded-none font-semibold uppercase tracking-wider bg-transparent transition-colors",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-muted rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-background border-t border-border" },
    container: { className: "container mx-auto px-6 md:px-10" },
    headerWrapper: { className: "mb-12 max-w-2xl" },
    title: {
      className: "text-3xl md:text-4xl font-bold text-foreground mb-3 tracking-tight",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground text-sm uppercase tracking-widest",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-12" },
    productCard: {
      className: "group overflow-hidden transition-all duration-300 border-0 rounded-none bg-transparent h-full flex flex-col relative",
      imageClassName: "w-full h-72 object-cover group-hover:scale-[1.03] transition-transform duration-500 cursor-pointer grayscale-0",
      overlayClassName: "absolute inset-0 bg-foreground/0 group-hover:bg-foreground/5 transition-colors duration-300 flex items-center justify-center",
    },
    productName: { className: "font-semibold text-base text-foreground mb-1 group-hover:text-muted-foreground transition-colors cursor-pointer line-clamp-2 leading-6 mt-4" },
    productPrice: { className: "text-lg font-bold text-foreground" },
    originalPrice: { className: "text-sm text-muted-foreground line-through" },
    discountBadge: { className: "bg-transparent text-muted-foreground text-xs rounded-none font-semibold uppercase tracking-wider" },
    saleBadge: { className: "absolute top-3 left-3 bg-foreground text-background rounded-none font-semibold text-[10px] uppercase tracking-widest px-2 py-1" },
    featuredBadge: { className: "absolute top-3 right-3 bg-background text-foreground border border-foreground rounded-none font-semibold text-[10px] uppercase tracking-widest px-2 py-1" },
    quickAddButton: { className: "bg-background text-foreground hover:bg-foreground hover:text-background border border-foreground rounded-none transition-colors" },
    addToCartButton: { className: "w-full bg-foreground text-background hover:bg-foreground/90 rounded-none font-semibold uppercase tracking-wider text-xs py-5" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-foreground mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-xs px-6 py-6 border border-foreground text-foreground hover:bg-foreground hover:text-background rounded-none font-semibold uppercase tracking-widest bg-transparent transition-colors",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-xs px-6 py-6 bg-foreground text-background hover:bg-foreground/90 rounded-none font-semibold uppercase tracking-widest transition-colors",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-16 flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl mx-auto" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/dark-luxe.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Dark Luxe preset - a creative editorial luxury theme on a deep black canvas.
// IMPORTANT: primaryColor is #000000 which is invisible on the dark bg, so this
// preset uses white/neutral accents instead of bg-primary for all key elements.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-[#0a0a0a] overflow-hidden flex items-center" },
    container: { className: "container mx-auto px-6 md:px-10" },
    contentWrapper: { className: "relative max-w-5xl border-t border-b border-white/15 py-16 md:py-24" },
    badge: {
      visible: true,
      className:
        "inline-flex items-center border border-white/25 text-white/70 bg-white/[0.03] px-5 py-2 rounded-full text-[10px] tracking-[0.4em] font-light uppercase",
      text: "Maison Collection",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-3 fill-white/70",
    },
    title: {
      className:
        "font-serif italic text-6xl md:text-8xl font-light text-white mt-8 mb-8 leading-[0.95] tracking-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block not-italic font-extralight tracking-[0.15em] text-white/90 text-4xl md:text-6xl mt-4",
    },
    subtitle: {
      className:
        "text-sm text-white/45 mb-12 max-w-md leading-relaxed tracking-[0.2em] uppercase font-light pl-5 border-l border-white/20",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-5" },
    primaryButton: {
      visible: true,
      className:
        "bg-white hover:bg-white/85 text-black text-xs px-12 py-6 rounded-full tracking-[0.3em] uppercase font-medium border-0 transition-all duration-500",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-3 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className:
        "border border-white/30 text-white hover:bg-white hover:text-black text-xs px-12 py-6 rounded-full tracking-[0.3em] uppercase font-light bg-transparent transition-all duration-500",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-24 px-6 md:px-10 bg-[#0a0a0a]" },
    header: { className: "flex items-end justify-between mb-16 border-b border-white/15 pb-8 max-w-7xl mx-auto" },
    title: {
      className: "font-serif italic text-4xl md:text-5xl font-light text-white",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-white/35 mt-3 tracking-[0.25em] uppercase text-[10px] font-light",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-8 max-w-7xl mx-auto", skeletonCount: 4 },
    card: { className: "group relative aspect-[4/3] overflow-hidden rounded-none cursor-pointer border border-white/20 hover:border-white/40 transition-all duration-700" },
    collectionImage: { className: "relative w-full h-full overflow-hidden group-hover:scale-110 transition-transform duration-700" },
    collectionName: { className: "absolute inset-0 flex items-center justify-center font-serif italic text-2xl font-light text-white text-center px-4" },
    collectionCount: { className: "absolute bottom-4 left-0 right-0 text-center text-white/50 text-xs tracking-wide" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-white/70 hover:text-white rounded-none font-light tracking-[0.2em] text-sm uppercase border-b border-white/25 hover:border-white/50 transition-all",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-white/25 text-white hover:bg-white hover:text-black rounded-none font-light tracking-[0.3em] uppercase text-xs bg-transparent transition-all",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-muted/30 border border-white/15 rounded-none" },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-6 md:px-10 bg-[#0a0a0a]" },
    header: { className: "flex items-end justify-between mb-16 border-b border-white/15 pb-8 max-w-7xl mx-auto" },
    title: {
      className: "font-serif italic text-4xl md:text-5xl font-light text-white",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-white/35 mt-3 tracking-[0.25em] uppercase text-[10px] font-light",
      text: "Curated by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-5 max-w-7xl mx-auto", skeletonCount: 4 },
    card: {
      className:
        "group hover:bg-[#161616] transition-all duration-700 cursor-pointer h-full bg-[#0a0a0a] rounded-none p-2 border border-white/15 hover:border-white/30",
    },
    categoryName: {
      className: "font-light text-base text-center text-white/70 tracking-[0.2em] uppercase group-hover:text-white transition-colors duration-500",
    },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-white/80 hover:text-white hover:bg-transparent rounded-none tracking-[0.25em] uppercase text-[10px] font-light underline underline-offset-8 decoration-white/30",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-white/30 text-white hover:bg-white hover:text-black rounded-full tracking-[0.25em] uppercase font-light bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-[#161616] rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-24 bg-[#0a0a0a]" },
    container: { className: "container mx-auto px-6 md:px-10" },
    headerWrapper: { className: "max-w-2xl mb-20" },
    title: {
      className: "font-serif italic text-5xl md:text-6xl font-light text-white mb-6",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-white/35 tracking-[0.25em] uppercase text-[10px] font-light pl-5 border-l border-white/20",
      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 transition-all duration-700 bg-[#0a0a0a] hover:bg-[#141414] rounded-none h-full flex flex-col relative border border-white/15 hover:border-white/30",
      imageClassName: "w-full h-80 object-cover group-hover:scale-105 transition-transform duration-1000 cursor-pointer grayscale group-hover:grayscale-0",
      overlayClassName: "absolute inset-0 bg-black/30 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-white transition-colors duration-500 cursor-pointer line-clamp-2 h-14 leading-7 tracking-wide",
    },
    productPrice: { className: "text-2xl font-serif italic font-light text-white" },
    originalPrice: { className: "text-lg text-white/25 line-through font-light" },
    discountBadge: { className: "bg-white/10 text-white/70 text-xs rounded-full font-light tracking-widest" },
    saleBadge: { className: "absolute top-4 left-4 bg-white text-black rounded-full font-medium tracking-widest text-[10px] uppercase px-3" },
    featuredBadge: { className: "absolute top-4 right-4 border border-white/30 bg-black/40 text-white rounded-full font-light tracking-widest text-[10px] uppercase px-3" },
    quickAddButton: { className: "bg-white/5 text-white hover:bg-white hover:text-black border border-white/15 rounded-full tracking-widest text-xs transition-all duration-500" },
    addToCartButton: { className: "w-full bg-white text-black hover:bg-white/85 rounded-full tracking-[0.2em] uppercase font-medium text-sm transition-all duration-500" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b border-white mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-xs px-10 py-6 border border-white/30 text-white hover:bg-white hover:text-black rounded-full tracking-[0.25em] uppercase font-light bg-transparent transition-all duration-500",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-xs px-10 py-6 bg-white text-black hover:bg-white/85 rounded-full tracking-[0.25em] uppercase font-medium transition-all duration-500",
      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 - full-screen modern campaign / gallery statement style
// Colors are controlled via storeConfig.primaryColor and storeConfig.secondaryColor
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: {
      className:
        "relative bg-background min-h-[100svh] flex items-center justify-center overflow-hidden border-b border-border",
    },
    container: { className: "container mx-auto px-6 w-full" },
    contentWrapper: { className: "max-w-5xl mx-auto text-center flex flex-col items-center" },
    badge: {
      visible: true,
      className:
        "inline-flex items-center gap-3 text-[11px] uppercase tracking-[0.5em] text-muted-foreground border-0 rounded-none bg-transparent mb-10 font-sans",
      text: "New Collection — 2026",
      icon: "Star",
      iconClassName: "w-3 h-3",
    },
    title: {
      className:
        "text-7xl md:text-[10rem] font-sans font-bold text-foreground leading-[0.85] tracking-tighter uppercase",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block",
    },
    subtitle: {
      className:
        "text-base md:text-lg text-muted-foreground mt-10 max-w-md mx-auto leading-relaxed font-sans",
      textKey: "hero.subtitle",
    },
    buttonsContainer: {
      className: "flex flex-col sm:flex-row gap-4 justify-center mt-12",
    },
    primaryButton: {
      visible: true,
      className:
        "bg-foreground hover:bg-background text-background hover:text-foreground border border-foreground text-xs uppercase px-10 py-6 rounded-full font-sans tracking-[0.2em] transition-colors duration-300",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-3 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className:
        "bg-transparent text-foreground hover:bg-foreground hover:text-background border border-foreground text-xs uppercase px-10 py-6 rounded-full font-sans tracking-[0.2em] transition-colors duration-300",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex items-end justify-between mb-12" },
    title: {
      className: "text-3xl md:text-4xl font-sans font-bold text-foreground uppercase tracking-tight",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 font-sans text-sm",
      text: "Explore the collection",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-4", skeletonCount: 4 },
    card: { className: "group relative aspect-square overflow-hidden rounded-none border border-foreground/20 hover:border-foreground cursor-pointer bg-muted transition-all" },
    collectionImage: { className: "relative w-full h-full overflow-hidden group-hover:scale-105 transition-transform duration-700" },
    collectionName: { className: "absolute inset-0 flex items-center justify-center font-sans font-bold text-foreground text-center px-4" },
    collectionCount: { className: "absolute bottom-3 left-0 right-0 text-center text-foreground/60 text-xs font-sans uppercase" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-foreground hover:text-primary rounded-none font-bold uppercase tracking-[0.15em] text-sm border-b border-foreground hover:border-primary transition-all",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-foreground text-foreground hover:bg-foreground hover:text-background rounded-none font-bold uppercase tracking-[0.15em] text-sm bg-transparent transition-all",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-muted border border-foreground/20 rounded-none" },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex items-end justify-between mb-12" },
    title: {
      className: "text-3xl md:text-4xl font-sans font-bold text-foreground uppercase tracking-tight",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 font-sans text-sm",
      text: "Browse the collection",
    },
    layout: {
      maxCategories: 4,
      gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-4",
      skeletonCount: 4,
    },
    card: {
      className:
        "group hover:bg-foreground transition-colors duration-300 cursor-pointer h-full bg-muted rounded-2xl flex items-center justify-center min-h-40",
    },
    categoryName: {
      className:
        "font-sans font-medium text-base text-center text-foreground group-hover:text-background uppercase tracking-wide transition-colors px-4",
    },
    viewAllButton: {
      visible: true,
      className:
        "hidden md:flex text-foreground hover:text-muted-foreground rounded-full font-sans uppercase text-xs tracking-[0.2em] hover:bg-transparent",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className:
        "text-foreground hover:text-muted-foreground rounded-full font-sans uppercase text-xs tracking-[0.2em] border-none bg-transparent",
      href: "/products?tab=categories",
      text: "View All",
    },
    skeleton: { className: "animate-pulse bg-muted rounded-2xl" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-muted/30 border-t border-border" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-14 max-w-2xl mx-auto" },
    title: {
      className: "text-3xl md:text-5xl font-sans font-bold text-foreground uppercase tracking-tight",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground font-sans mt-3 text-base",
      text: "Handpicked for you",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className:
        "group overflow-hidden transition-all duration-500 rounded-2xl bg-background border border-border hover:shadow-xl h-full flex flex-col relative",
      imageClassName:
        "w-full h-72 object-cover group-hover:scale-105 transition-transform duration-700 cursor-pointer",
      overlayClassName:
        "absolute inset-0 bg-foreground/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center",
    },
    productName: {
      className:
        "font-sans font-medium text-base text-foreground mb-2 mt-1 group-hover:text-muted-foreground transition-colors cursor-pointer line-clamp-2 h-12 leading-6",
    },
    productPrice: { className: "text-lg font-semibold text-foreground font-sans" },
    originalPrice: { className: "text-sm text-muted-foreground/50 line-through font-sans" },
    discountBadge: { className: "bg-transparent text-muted-foreground text-xs font-sans" },
    saleBadge: {
      className:
        "absolute top-4 left-4 bg-foreground text-background rounded-full font-sans uppercase text-[10px] tracking-widest px-3 py-1",
    },
    featuredBadge: {
      className:
        "absolute top-4 right-4 bg-background text-foreground rounded-full font-sans uppercase text-[10px] tracking-widest border border-border px-3 py-1",
    },
    quickAddButton: {
      className:
        "bg-background text-foreground hover:bg-foreground hover:text-background border border-foreground rounded-full font-sans uppercase text-xs tracking-widest",
    },
    addToCartButton: {
      className:
        "w-full bg-foreground text-background hover:bg-background hover:text-foreground rounded-full border border-foreground font-sans uppercase tracking-[0.2em] text-xs py-4 transition-colors",
    },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-foreground mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className:
        "w-full text-xs uppercase px-8 py-5 text-background bg-foreground hover:bg-foreground/90 rounded-full font-sans tracking-[0.2em]",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className:
        "w-full text-xs uppercase px-8 py-5 text-foreground hover:bg-muted rounded-full font-sans tracking-[0.2em] border border-foreground bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-14 flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl mx-auto" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/gradient-glow.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Gradient Glow preset - glassmorphism with a floating frosted hero panel,
// gradient-clipped headline, glowing pill buttons, and soft ambient depth.
// Works in monochrome via semantic tokens (primary, secondary, foreground).
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: {
      className:
        "relative min-h-screen bg-background overflow-hidden flex items-center justify-center bg-[radial-gradient(circle_at_20%_20%,hsl(var(--primary)/0.12),transparent_45%),radial-gradient(circle_at_80%_80%,hsl(var(--secondary)/0.14),transparent_45%)]",
    },
    container: { className: "container mx-auto px-4 py-24 flex items-center justify-center" },
    contentWrapper: {
      className:
        "relative max-w-3xl mx-auto text-center rounded-[2.5rem] border border-foreground/10 bg-foreground/[0.03] backdrop-blur-2xl px-8 py-16 md:px-16 md:py-20 shadow-2xl shadow-foreground/10",
    },
    badge: {
      visible: true,
      className:
        "inline-flex items-center border border-foreground/15 text-foreground bg-foreground/[0.06] backdrop-blur-xl px-5 py-2 rounded-full text-xs tracking-[0.2em] uppercase font-medium mb-8 shadow-lg shadow-foreground/5",
      text: "New Collection Available",
      icon: "Sparkles",
      iconClassName: "w-3.5 h-3.5 mr-2 fill-foreground",
    },
    title: {
      className:
        "text-6xl md:text-8xl font-extrabold mb-8 leading-[0.95] tracking-tight bg-gradient-to-br from-foreground via-foreground to-muted-foreground bg-clip-text text-transparent",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block",
    },
    subtitle: {
      className: "text-lg md:text-xl text-muted-foreground mb-12 max-w-xl mx-auto leading-relaxed",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center items-center" },
    primaryButton: {
      visible: true,
      className:
        "bg-primary hover:bg-primary/90 text-primary-foreground text-base px-10 py-6 rounded-full font-semibold border-0 shadow-xl shadow-primary/30 hover:shadow-primary/50 hover:scale-105 transition-all duration-300",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className:
        "border border-foreground/15 text-foreground hover:bg-foreground/[0.06] backdrop-blur-xl text-base px-10 py-6 rounded-full font-semibold bg-foreground/[0.02] hover:scale-105 transition-all duration-300",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-end justify-between mb-14" },
    title: {
      className: "text-4xl font-bold text-foreground tracking-tight",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-muted-foreground/70 mt-2 text-sm",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-8", skeletonCount: 4 },
    card: {
      className:
        "group relative rounded-3xl border border-foreground/10 bg-foreground/[0.04] backdrop-blur-xl overflow-hidden cursor-pointer h-full hover:border-foreground/20 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-500",
    },
    collectionImage: { className: "relative w-full h-56 overflow-hidden group-hover:scale-110 transition-transform duration-700" },
    collectionName: { className: "text-lg font-semibold text-foreground p-5" },
    collectionCount: { className: "text-muted-foreground/70 text-sm px-5 pb-5" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-primary hover:bg-primary/10 rounded-full font-semibold",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-foreground/15 text-foreground hover:bg-foreground/5 rounded-full font-semibold bg-foreground/[0.02]",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-muted border border-foreground/10 rounded-3xl" },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-end justify-between mb-14" },
    title: {
      className: "text-4xl font-bold text-foreground tracking-tight",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-3",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: {
      className:
        "group hover:-translate-y-2 transition-all duration-500 cursor-pointer h-full border border-foreground/10 rounded-3xl bg-foreground/[0.03] backdrop-blur-xl hover:bg-foreground/[0.06] hover:shadow-2xl hover:shadow-foreground/10",
    },
    categoryName: { className: "font-semibold text-lg text-center text-card-foreground" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-foreground hover:bg-foreground/[0.06] rounded-full font-medium",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className:
        "border border-foreground/15 text-foreground hover:bg-foreground/[0.06] rounded-full font-medium bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-foreground/[0.04] border border-foreground/10 rounded-3xl" },
  },
  featuredProducts: {
    visible: true,
    section: {
      className:
        "py-24 bg-background bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/0.08),transparent_50%)]",
    },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className:
        "text-5xl md:text-6xl font-extrabold mb-4 tracking-tight bg-gradient-to-br from-foreground to-muted-foreground bg-clip-text text-transparent",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-2xl mx-auto 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-y-2 transition-all duration-500 border border-foreground/10 rounded-3xl bg-foreground/[0.03] backdrop-blur-xl hover:bg-foreground/[0.06] hover:shadow-2xl hover:shadow-foreground/10 h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-110 transition-transform duration-700 cursor-pointer",
      overlayClassName:
        "absolute inset-0 bg-gradient-to-t from-foreground/30 to-transparent 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-foreground/10 text-foreground text-xs rounded-full font-medium backdrop-blur-xl" },
    saleBadge: { className: "absolute top-4 left-4 bg-primary text-primary-foreground rounded-full font-medium shadow-lg shadow-primary/30" },
    featuredBadge: { className: "absolute top-4 right-4 bg-foreground/80 text-background rounded-full font-medium backdrop-blur-xl" },
    quickAddButton: {
      className: "bg-background/80 backdrop-blur-xl text-foreground hover:bg-foreground/[0.1] border border-foreground/15 rounded-full",
    },
    addToCartButton: {
      className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-full font-semibold shadow-lg shadow-primary/25",
    },
    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-8 py-6 border border-foreground/15 text-foreground hover:bg-foreground/[0.06] rounded-full font-medium bg-transparent backdrop-blur-xl",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className:
        "w-full text-base px-8 py-6 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full font-semibold shadow-lg shadow-primary/25",
      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/high-contrast.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// High Contrast - Swiss International style: giant condensed type, thick framing rules, stark inversion
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-white overflow-hidden flex items-center border-y-[16px] border-black" },
    container: { className: "container mx-auto px-6 flex items-center justify-center" },
    contentWrapper: { className: "max-w-5xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "bg-black text-white px-6 py-2 rounded-none text-xs tracking-[0.5em] font-black uppercase",
      text: "01 — New",
      icon: "",
      iconClassName: "",
    },
    title: {
      className: "text-7xl md:text-[11rem] font-black text-black my-6 leading-[0.8] uppercase tracking-tighter",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-black",
    },
    subtitle: {
      className: "text-sm text-black mb-10 max-w-md mx-auto leading-relaxed uppercase tracking-[0.3em] font-bold border-t-2 border-black pt-4",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-0 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-black hover:bg-white hover:text-black text-white text-sm px-14 py-7 rounded-none font-black border-2 border-black uppercase tracking-[0.2em] transition-colors",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-3 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border-2 border-black border-l-0 text-black hover:bg-black hover:text-white text-sm px-14 py-7 rounded-none font-black bg-white uppercase tracking-[0.2em] transition-colors",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-20 px-6 max-w-7xl mx-auto bg-white border-t-[6px] border-black" },
    header: { className: "flex items-center justify-between mb-10 border-b-[6px] border-black pb-4" },
    title: {
      className: "text-5xl md:text-6xl font-black text-black uppercase tracking-tighter leading-none",
      text: "Collections",
    },
    subtitle: {
      className: "text-black mt-2 text-xs font-black uppercase tracking-[0.3em] hidden md:block",
      text: "03 — Explore",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-2", skeletonCount: 4 },
    card: { className: "group relative aspect-square overflow-hidden hover:bg-black hover:text-white transition-colors duration-150 cursor-pointer h-full border-2 border-black rounded-none bg-white" },
    collectionImage: { className: "relative w-full h-full overflow-hidden group-hover:scale-105 transition-transform duration-700" },
    collectionName: { className: "absolute inset-0 flex items-center justify-center font-black text-center uppercase tracking-widest text-sm" },
    collectionCount: { className: "absolute bottom-2 text-center text-xs font-bold w-full" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-black hover:bg-black hover:text-white font-black text-xs uppercase tracking-[0.3em] border-2 border-black bg-white rounded-none px-4 py-2 transition-colors",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-black text-black hover:bg-black hover:text-white font-black uppercase tracking-[0.2em] bg-white rounded-none transition-colors px-6 py-3",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-gray-300 border-2 border-black rounded-none" },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-6 max-w-7xl mx-auto bg-white" },
    header: { className: "flex items-center justify-between mb-10 border-b-[6px] border-black pb-4" },
    title: {
      className: "text-5xl md:text-6xl font-black text-black uppercase tracking-tighter leading-none",
      textKey: "categories.title",
      text: "Categories",
    },
    subtitle: {
      className: "text-black mt-2 text-xs font-black uppercase tracking-[0.3em] hidden md:block",
      text: "02 — Browse",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-2", skeletonCount: 4 },
    card: { className: "hover:bg-black hover:text-white transition-colors duration-150 cursor-pointer h-full border-2 border-black rounded-none bg-white" },
    categoryName: { className: "font-black text-base text-center uppercase tracking-widest" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-white bg-black hover:bg-white hover:text-black border-2 border-black rounded-none uppercase tracking-[0.2em] text-xs font-black px-6",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-black text-white bg-black hover:bg-white hover:text-black rounded-none uppercase font-black",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-gray-200 border-2 border-black rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-black border-t-[16px] border-black" },
    container: { className: "container mx-auto px-6" },
    headerWrapper: { className: "text-center mb-14 border-b-[6px] border-white pb-6" },
    title: {
      className: "text-5xl md:text-8xl font-black text-white mb-4 uppercase tracking-tighter leading-none",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-white max-w-2xl mx-auto uppercase tracking-[0.3em] text-xs font-black",
      text: "03 — Featured",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2" },
    productCard: {
      className: "group overflow-hidden transition-colors duration-150 border-2 border-white rounded-none bg-black h-full flex flex-col relative hover:bg-white",
      imageClassName: "w-full h-64 object-cover grayscale contrast-125 group-hover:grayscale-0 transition-all duration-300 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-black text-base text-white group-hover:text-black mb-3 transition-colors cursor-pointer line-clamp-2 h-10 leading-5 uppercase tracking-wide" },
    productPrice: { className: "text-2xl font-black text-white group-hover:text-black transition-colors" },
    originalPrice: { className: "text-base text-gray-500 line-through" },
    discountBadge: { className: "bg-white text-black group-hover:bg-black group-hover:text-white text-xs rounded-none font-black uppercase transition-colors" },
    saleBadge: { className: "absolute top-0 left-0 bg-white text-black rounded-none font-black uppercase text-xs px-3 py-1" },
    featuredBadge: { className: "absolute top-0 right-0 bg-gray-700 text-white rounded-none font-black uppercase text-xs px-3 py-1" },
    quickAddButton: { className: "bg-white text-black hover:bg-gray-200 border-0 rounded-none" },
    addToCartButton: { className: "w-full bg-white text-black hover:bg-gray-200 rounded-none uppercase tracking-[0.2em] font-black" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-white text-white hover:bg-white hover:text-black rounded-none uppercase tracking-[0.2em] font-black bg-black",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 bg-white text-black hover:bg-gray-200 rounded-none uppercase tracking-[0.2em] font-black",
      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"
import monochromeChic from "./monochrome-chic"
import timelessClassic from "./timeless-classic"
import highContrast from "./high-contrast"
import sophisticatedGray from "./sophisticated-gray"

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,
  "monochrome-chic": monochromeChic,
  "timeless-classic": timelessClassic,
  "high-contrast": highContrast,
  "sophisticated-gray": sophisticatedGray,
}

export default presets
[V0_FILE]typescript:file="config/presets/monochrome-chic.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Monochrome Chic - Bold asymmetric editorial with oversized left-aligned typography
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-white overflow-hidden border-b-4 border-black" },
    container: { className: "container mx-auto px-6 md:px-12 h-screen flex items-center" },
    contentWrapper: { className: "max-w-5xl text-left" },
    badge: {
      visible: true,
      className: "border-l-4 border-black text-black bg-white pl-4 pr-2 py-1 rounded-none text-xs tracking-[0.3em] uppercase font-bold",
      text: "New Collection",
      icon: "",
      iconClassName: "",
    },
    title: {
      className: "text-7xl md:text-9xl font-black text-black mt-8 mb-8 leading-[0.85] tracking-tighter uppercase",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-black underline decoration-4 underline-offset-8",
    },
    subtitle: {
      className: "text-xl text-gray-700 mb-10 max-w-md leading-relaxed border-l-2 border-gray-300 pl-6",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-0" },
    primaryButton: {
      visible: true,
      className: "bg-black hover:bg-white hover:text-black text-white text-sm px-12 py-7 rounded-none font-bold uppercase tracking-widest border-2 border-black transition-colors",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-3 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border-2 border-black border-l-0 text-black hover:bg-black hover:text-white text-sm px-12 py-7 rounded-none font-bold uppercase tracking-widest bg-white transition-colors",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-24 px-6 md:px-12 max-w-7xl mx-auto border-t-2 border-black" },
    header: { className: "flex items-end justify-between mb-16 border-b-2 border-black pb-6" },
    title: {
      className: "text-5xl font-black text-black uppercase tracking-tighter",
      text: "Collections",
    },
    subtitle: {
      className: "text-gray-500 mt-2 text-xs uppercase tracking-[0.2em]",
      text: "Explore the collection",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-5", skeletonCount: 4 },
    card: { className: "group relative aspect-square overflow-hidden hover:bg-black hover:text-white transition-colors duration-200 cursor-pointer h-full border-2 border-black rounded-none bg-white" },
    collectionImage: { className: "relative w-full h-full overflow-hidden group-hover:scale-105 transition-transform duration-700" },
    collectionName: { className: "absolute inset-0 flex items-center justify-center font-bold text-center uppercase tracking-wide text-sm" },
    collectionCount: { className: "absolute bottom-2 text-center text-xs w-full" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-black hover:bg-black hover:text-white font-bold text-xs uppercase tracking-wider border-2 border-black bg-white rounded-none px-4 py-2 transition-colors",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-black text-black hover:bg-black hover:text-white font-bold uppercase tracking-widest bg-white rounded-none transition-colors px-6 py-3",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-gray-200 border-2 border-black rounded-none aspect-square" },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-6 md:px-12 max-w-7xl mx-auto" },
    header: { className: "flex items-end justify-between mb-16 border-b-2 border-black pb-6" },
    title: {
      className: "text-5xl font-black text-black uppercase tracking-tighter",
      textKey: "categories.title",
      text: "Categories",
    },
    subtitle: {
      className: "text-gray-500 mt-2 text-xs uppercase tracking-[0.2em]",
      text: "Browse the collection",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-5", skeletonCount: 4 },
    card: { className: "hover:bg-black hover:text-white transition-colors duration-200 cursor-pointer h-full border-2 border-black rounded-none bg-white" },
    categoryName: { className: "font-bold text-lg text-center uppercase tracking-wide" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-black hover:bg-black hover:text-white rounded-none font-bold uppercase tracking-widest border-2 border-black px-6",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-black text-black hover:bg-black hover:text-white rounded-none font-bold uppercase tracking-widest bg-white",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-gray-100 border-2 border-black rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-24 bg-black" },
    container: { className: "container mx-auto px-6 md:px-12" },
    headerWrapper: { className: "text-left mb-16 border-b-2 border-white pb-6" },
    title: {
      className: "text-5xl md:text-7xl font-black text-white mb-4 uppercase tracking-tighter",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-gray-400 text-xs uppercase tracking-[0.2em]",
      text: "Handpicked items",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-0 border-l border-t border-gray-700" },
    productCard: {
      className: "group overflow-hidden transition-all duration-300 border-r border-b border-gray-700 rounded-none bg-black h-full flex flex-col relative",
      imageClassName: "w-full h-72 object-cover grayscale group-hover:grayscale-0 transition-all duration-500 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-bold text-lg text-white mb-3 group-hover:text-gray-300 transition-colors cursor-pointer line-clamp-2 h-14 leading-7 uppercase tracking-wide" },
    productPrice: { className: "text-2xl font-black text-white" },
    originalPrice: { className: "text-lg text-gray-500 line-through" },
    discountBadge: { className: "bg-white text-black text-xs rounded-none font-bold uppercase" },
    saleBadge: { className: "absolute top-0 left-0 bg-white text-black rounded-none font-bold uppercase px-3" },
    featuredBadge: { className: "absolute top-0 right-0 bg-gray-800 text-white rounded-none font-bold uppercase px-3" },
    quickAddButton: { className: "bg-white text-black hover:bg-gray-200 border-0 rounded-none" },
    addToCartButton: { className: "w-full bg-white text-black hover:bg-gray-200 rounded-none font-bold uppercase tracking-widest" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-white text-white hover:bg-white hover:text-black rounded-none font-bold uppercase tracking-widest bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 bg-white text-black hover:bg-gray-200 rounded-none font-bold uppercase tracking-widest",
      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/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
// Designed to stay legible and bold even with a black & white palette.
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-background bg-foreground px-5 py-2 rounded-none text-sm font-black uppercase tracking-wide shadow-[5px_5px_0_0] shadow-foreground/30",
      text: "New Drop Alert!",
      icon: "Star",
      iconClassName: "w-4 h-4 mr-2 fill-background",
    },
    title: {
      className: "text-6xl md:text-8xl font-black text-foreground mb-6 leading-none",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block mt-2 bg-foreground text-background px-4 py-1 -rotate-2 inline-block border-[4px] border-foreground shadow-[8px_8px_0_0] shadow-foreground/20",
    },
    subtitle: {
      className: "text-xl text-muted-foreground mb-10 max-w-2xl mx-auto leading-relaxed font-bold",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-5 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-foreground text-background hover:translate-x-1 hover:translate-y-1 hover:shadow-none text-lg px-10 py-6 rounded-none font-black uppercase tracking-wide border-[3px] border-foreground shadow-[6px_6px_0_0] shadow-foreground/40 transition-all",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "bg-background border-[3px] border-foreground text-foreground hover:bg-foreground hover:text-background hover:translate-x-1 hover:translate-y-1 hover:shadow-none text-lg px-10 py-6 rounded-none font-black uppercase tracking-wide shadow-[6px_6px_0_0] shadow-foreground/40 transition-all",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    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",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 font-bold",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 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/40 overflow-hidden flex flex-col" },
    collectionImage: { className: "relative w-full h-48 overflow-hidden" },
    collectionName: { className: "font-black text-lg text-card-foreground uppercase p-4" },
    collectionCount: { className: "text-muted-foreground font-bold px-4 pb-4" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-foreground hover:bg-foreground hover:text-background rounded-none font-black uppercase border-[3px] border-foreground shadow-[4px_4px_0_0] shadow-foreground/40 hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-[3px] border-foreground text-foreground hover:bg-foreground hover:text-background rounded-none font-black uppercase shadow-[6px_6px_0_0] shadow-foreground/40 hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all bg-transparent",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-muted border-[3px] border-foreground rounded-none" },
  },
  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",
      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/40" },
    categoryName: { className: "font-black text-lg text-center text-card-foreground uppercase" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-foreground hover:bg-foreground hover:text-background rounded-none font-black uppercase border-[3px] border-foreground shadow-[4px_4px_0_0] shadow-foreground/40 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-foreground hover:text-background rounded-none font-black uppercase shadow-[6px_6px_0_0] shadow-foreground/40 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 uppercase",
      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/40",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300 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-black text-lg text-card-foreground mb-3 group-hover:underline 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-foreground text-background text-xs rounded-none font-black uppercase" },
    saleBadge: { className: "absolute top-4 left-4 bg-foreground text-background rounded-none font-black uppercase border-[3px] border-foreground" },
    featuredBadge: { className: "absolute top-4 right-4 bg-background text-foreground rounded-none font-black uppercase border-[3px] border-foreground" },
    quickAddButton: { className: "bg-background text-foreground hover:bg-foreground hover:text-background border-[3px] border-foreground rounded-none font-black" },
    addToCartButton: { className: "w-full bg-foreground text-background hover:bg-background hover:text-foreground rounded-none font-black uppercase border-[3px] border-foreground transition-colors" },
    loading: { className: "animate-spin rounded-none h-12 w-12 border-b-4 border-foreground mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-[3px] border-foreground text-foreground hover:bg-foreground hover:text-background rounded-none font-black uppercase shadow-[6px_6px_0_0] shadow-foreground/40 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-foreground hover:text-background rounded-none font-black uppercase shadow-[6px_6px_0_0] shadow-foreground/40 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
// Designed to feel energetic and fun in pure black & white through rotation,
// sticker badges, dashed borders, and exaggerated hard offset shadows.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-background overflow-hidden flex items-center" },
    container: { className: "container mx-auto px-4 py-20" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center flex flex-col items-center" },
    badge: {
      visible: true,
      className:
        "inline-flex items-center border-2 border-foreground text-foreground bg-background px-5 py-2 rounded-full text-sm font-extrabold uppercase tracking-wide -rotate-3 shadow-[4px_4px_0px_0px_var(--foreground)]",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-4 h-4 mr-2 fill-foreground",
    },
    title: {
      className: "text-6xl md:text-8xl font-extrabold text-foreground mt-8 mb-6 leading-[0.9] tracking-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName:
        "inline-block mt-3 bg-foreground text-background px-6 py-2 rounded-2xl -rotate-2 shadow-[6px_6px_0px_0px_var(--foreground)]",
    },
    subtitle: {
      className: "text-xl text-muted-foreground mb-10 max-w-xl mx-auto leading-relaxed font-medium",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-5 justify-center items-center" },
    primaryButton: {
      visible: true,
      className:
        "bg-foreground text-background hover:-translate-y-1 hover:-rotate-2 text-lg px-10 py-6 rounded-full font-extrabold border-2 border-foreground shadow-[6px_6px_0px_0px_var(--foreground)] hover:shadow-[8px_8px_0px_0px_var(--foreground)] transition-all",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className:
        "bg-background border-2 border-foreground text-foreground hover:-translate-y-1 hover:rotate-2 text-lg px-10 py-6 rounded-full font-extrabold shadow-[6px_6px_0px_0px_var(--foreground)] hover:shadow-[8px_8px_0px_0px_var(--foreground)] transition-all",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    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 -rotate-1",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 font-medium",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: {
      className:
        "hover:-translate-y-1 hover:rotate-2 transition-all duration-300 cursor-pointer h-full border-2 border-foreground rounded-2xl bg-card shadow-[5px_5px_0px_0px_var(--foreground)] hover:shadow-[7px_7px_0px_0px_var(--foreground)] overflow-hidden flex flex-col",
    },
    collectionImage: { className: "relative w-full h-48 overflow-hidden" },
    collectionName: { className: "font-extrabold text-lg text-card-foreground p-4" },
    collectionCount: { className: "text-muted-foreground font-medium px-4 pb-4" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-foreground hover:bg-foreground hover:text-background rounded-2xl font-extrabold border-2 border-foreground shadow-[4px_4px_0_0_var(--foreground)] hover:translate-y-1 hover:-rotate-1 transition-all",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-foreground text-foreground hover:bg-foreground hover:text-background rounded-2xl font-extrabold shadow-[5px_5px_0px_0px_var(--foreground)] hover:translate-y-1 hover:rotate-1 transition-all bg-transparent",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-muted border-2 border-foreground rounded-2xl" },
  },
  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 -rotate-1",
      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:-translate-y-1 hover:rotate-2 transition-all duration-300 cursor-pointer h-full border-2 border-foreground rounded-2xl bg-card shadow-[5px_5px_0px_0px_var(--foreground)] hover:shadow-[7px_7px_0px_0px_var(--foreground)]",
    },
    categoryName: { className: "font-extrabold text-lg text-center text-card-foreground" },
    viewAllButton: {
      visible: true,
      className:
        "hidden md:flex border-2 border-foreground text-foreground hover:bg-foreground hover:text-background rounded-full font-extrabold shadow-[4px_4px_0px_0px_var(--foreground)] bg-background transition-all",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className:
        "border-2 border-foreground text-foreground hover:bg-foreground hover:text-background rounded-full font-extrabold bg-background shadow-[4px_4px_0px_0px_var(--foreground)] transition-all",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-muted border-2 border-foreground rounded-2xl" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-background" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-14 flex flex-col items-center" },
    title: {
      className: "text-5xl md:text-6xl font-extrabold text-foreground mb-4 rotate-1",
      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:-translate-y-1 transition-all duration-300 border-2 border-foreground rounded-2xl bg-card h-full flex flex-col relative shadow-[5px_5px_0px_0px_var(--foreground)] hover:shadow-[8px_8px_0px_0px_var(--foreground)]",
      imageClassName: "w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500 cursor-pointer",
      overlayClassName:
        "absolute inset-0 bg-foreground/5 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:underline decoration-2 underline-offset-4 transition-all 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: "border-2 border-foreground bg-background text-foreground text-xs rounded-full font-extrabold",
    },
    saleBadge: {
      className:
        "absolute top-4 left-4 bg-foreground text-background rounded-full font-extrabold -rotate-6 border-2 border-foreground",
    },
    featuredBadge: {
      className:
        "absolute top-4 right-4 bg-background text-foreground rounded-full font-extrabold rotate-6 border-2 border-foreground",
    },
    quickAddButton: {
      className: "bg-background text-foreground hover:bg-foreground hover:text-background border-2 border-foreground rounded-full font-bold",
    },
    addToCartButton: {
      className:
        "w-full bg-foreground text-background hover:-translate-y-0.5 border-2 border-foreground rounded-full font-extrabold shadow-[3px_3px_0px_0px_var(--foreground)] transition-all",
    },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-4 border-foreground mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className:
        "w-full text-lg px-8 py-6 border-2 border-foreground text-foreground hover:bg-foreground hover:text-background rounded-full font-extrabold transition-all bg-background shadow-[4px_4px_0px_0px_var(--foreground)]",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className:
        "w-full text-lg px-8 py-6 bg-foreground text-background hover:-translate-y-0.5 border-2 border-foreground rounded-full font-extrabold transition-all shadow-[4px_4px_0px_0px_var(--foreground)]",
      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",
    },
  },
  collectionsSection: {
    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",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-muted-foreground mt-2 font-light text-sm",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 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 overflow-hidden flex flex-col" },
    collectionImage: { className: "relative w-full h-48 overflow-hidden" },
    collectionName: { className: "font-medium text-lg text-foreground tracking-wide p-4 group-hover:text-primary transition-colors" },
    collectionCount: { className: "text-muted-foreground text-sm px-4 pb-4 font-light" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-primary hover:text-primary/80 hover:bg-primary/5 rounded-full font-medium tracking-wide",
      href: "/collections",
      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: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-muted border border-primary/10 rounded-3xl" },
  },
  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/sophisticated-gray.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Sophisticated Gray - Soft modern SaaS feel: pill buttons, fully rounded cards, layered soft grays
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-gray-100 overflow-hidden flex items-center" },
    container: { className: "container mx-auto px-4 flex items-center justify-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center bg-white rounded-[2.5rem] shadow-xl shadow-gray-300/50 px-10 py-16 md:px-20 md:py-24" },
    badge: {
      visible: true,
      className: "bg-gray-900 text-white px-5 py-2 rounded-full text-xs tracking-wide font-medium shadow-sm",
      text: "New Collection",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-white",
    },
    title: {
      className: "text-5xl md:text-7xl font-semibold text-gray-900 mt-8 mb-6 leading-[1.05] tracking-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-gray-400",
    },
    subtitle: {
      className: "text-lg text-gray-500 mb-10 max-w-lg mx-auto leading-relaxed",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-3 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-gray-900 hover:bg-gray-700 text-white text-sm px-10 py-6 rounded-full font-medium border-0 shadow-lg shadow-gray-400/40 transition-all hover:shadow-xl",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "bg-gray-100 text-gray-700 hover:bg-gray-200 text-sm px-10 py-6 rounded-full font-medium border-0",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex flex-col items-center text-center mb-14" },
    title: {
      className: "text-4xl font-semibold text-gray-900 tracking-tight",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-gray-400 mt-3 text-sm",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-5", skeletonCount: 4 },
    card: { className: "group relative aspect-square overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer h-full border-0 rounded-3xl bg-white shadow-md shadow-gray-200/60" },
    collectionImage: { className: "relative w-full h-full overflow-hidden group-hover:scale-110 transition-transform duration-700" },
    collectionName: { className: "absolute inset-0 flex items-center justify-center font-medium text-lg text-center text-gray-800 bg-white/80 group-hover:bg-white/95 transition-colors" },
    collectionCount: { className: "absolute bottom-3 text-center text-gray-500 text-sm w-full" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full font-medium transition-all px-4 py-2",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-gray-300 text-gray-700 hover:bg-gray-100 rounded-full font-medium bg-transparent transition-all px-6 py-3",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-gray-200 border-0 rounded-3xl shadow-md shadow-gray-200/60" },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex flex-col items-center text-center mb-14" },
    title: {
      className: "text-4xl font-semibold text-gray-900 tracking-tight",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-gray-400 mt-3 text-sm",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-5", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer h-full border-0 rounded-3xl bg-white shadow-md shadow-gray-200/60" },
    categoryName: { className: "font-medium text-lg text-center text-gray-800" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-full font-medium px-6",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full font-medium border-0",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-gray-200 border-0 rounded-3xl" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-24 bg-gray-900" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-5xl font-semibold text-white mb-4 tracking-tight",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-gray-400 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-6" },
    productCard: {
      className: "group overflow-hidden hover:-translate-y-1 transition-all duration-300 border-0 rounded-3xl bg-white h-full flex flex-col relative shadow-lg shadow-black/20",
      imageClassName: "w-full h-64 object-cover group-hover:brightness-95 transition-all duration-500 cursor-pointer rounded-t-3xl",
      overlayClassName: "absolute inset-0 bg-gray-900/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-medium text-lg text-gray-900 mb-3 group-hover:text-gray-500 transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-2xl font-semibold text-gray-900" },
    originalPrice: { className: "text-lg text-gray-400 line-through" },
    discountBadge: { className: "bg-gray-100 text-gray-900 text-xs rounded-full font-medium" },
    saleBadge: { className: "absolute top-4 left-4 bg-gray-900 text-white rounded-full font-medium" },
    featuredBadge: { className: "absolute top-4 right-4 bg-white text-gray-900 rounded-full font-medium shadow-sm" },
    quickAddButton: { className: "bg-white text-gray-900 hover:bg-gray-100 border-0 rounded-full shadow-md" },
    addToCartButton: { className: "w-full bg-gray-900 text-white hover:bg-gray-700 rounded-full font-medium" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 bg-white/10 text-white hover:bg-white/20 rounded-full font-medium border-0",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 bg-white text-gray-900 hover:bg-gray-100 rounded-full font-medium",
      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/timeless-classic.ts"
import type { HomepageConfig } from "@/types/homepage-config"

// Timeless Classic - Framed serif elegance with ornamental double borders, centered editorial
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-[#faf9f6] overflow-hidden flex items-center" },
    container: { className: "container mx-auto px-4 py-16 flex items-center justify-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center border-2 border-black p-12 md:p-20 relative" },
    badge: {
      visible: true,
      className: "border-y border-black text-black bg-transparent px-6 py-1 rounded-none text-xs tracking-[0.4em] uppercase font-serif",
      text: "Est. Collection",
      icon: "",
      iconClassName: "",
    },
    title: {
      className: "text-5xl md:text-7xl font-serif text-black mt-8 mb-6 leading-tight tracking-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block italic font-normal mt-2",
    },
    subtitle: {
      className: "text-base text-gray-600 mb-10 max-w-md mx-auto leading-loose font-serif italic",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-black hover:bg-gray-800 text-white text-xs px-12 py-6 rounded-none font-serif uppercase tracking-[0.2em] border border-black",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "",
      iconClassName: "",
    },
    secondaryButton: {
      visible: true,
      className: "bg-transparent text-black hover:bg-black hover:text-white text-xs px-12 py-6 rounded-none font-serif uppercase tracking-[0.2em] border border-black",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex flex-col items-center text-center mb-16" },
    title: {
      className: "text-4xl font-serif text-black tracking-tight",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-gray-500 mt-3 font-serif italic text-sm border-t border-black pt-3 px-8",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-8", skeletonCount: 4 },
    card: { className: "group relative aspect-square overflow-hidden hover:shadow-md transition-all duration-300 cursor-pointer h-full border border-black rounded-none bg-white p-1" },
    collectionImage: { className: "relative w-full h-full overflow-hidden group-hover:scale-105 transition-transform duration-700" },
    collectionName: { className: "absolute inset-0 flex items-center justify-center font-serif text-lg text-center text-black italic bg-white/70 group-hover:bg-white/85 transition-colors" },
    collectionCount: { className: "absolute bottom-2 text-center text-gray-500 text-sm w-full font-serif italic" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-black hover:text-gray-600 rounded-none font-serif uppercase tracking-[0.2em] text-xs border-b border-black hover:border-gray-600 transition-all pb-1",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-black text-black hover:bg-black hover:text-white rounded-none font-serif uppercase tracking-[0.2em] text-xs bg-transparent transition-all px-6 py-3",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-gray-200 border border-black rounded-none" },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex flex-col items-center text-center mb-16" },
    title: {
      className: "text-4xl font-serif text-black tracking-tight",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-gray-500 mt-3 font-serif italic text-sm border-t border-black pt-3 px-8",
      text: "Browse our curated selection",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-8", skeletonCount: 4 },
    card: { className: "hover:shadow-md transition-all duration-300 cursor-pointer h-full border border-black rounded-none bg-white p-1" },
    categoryName: { className: "font-serif text-lg text-center text-black italic" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-black hover:bg-black hover:text-white rounded-none font-serif uppercase tracking-[0.2em] text-xs border border-black px-6",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-black text-black hover:bg-black hover:text-white rounded-none font-serif uppercase tracking-[0.2em] text-xs bg-white",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-gray-100 border border-black rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-24 bg-[#f3f1ec] border-y-2 border-black" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-6xl font-serif text-black mb-4 italic",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-gray-600 max-w-md mx-auto font-serif italic border-t border-black pt-3 inline-block px-8",
      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:shadow-lg transition-all duration-300 border border-black rounded-none bg-white h-full flex flex-col relative p-1",
      imageClassName: "w-full h-72 object-cover group-hover:scale-[1.02] transition-transform duration-700 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-serif italic text-lg text-black mb-3 group-hover:text-gray-600 transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-xl font-serif text-black" },
    originalPrice: { className: "text-base text-gray-400 line-through font-serif" },
    discountBadge: { className: "bg-black text-white text-xs rounded-none font-serif" },
    saleBadge: { className: "absolute top-3 left-3 bg-black text-white rounded-none font-serif uppercase text-xs tracking-widest" },
    featuredBadge: { className: "absolute top-3 right-3 bg-white text-black border border-black rounded-none font-serif uppercase text-xs tracking-widest" },
    quickAddButton: { className: "bg-white text-black hover:bg-black hover:text-white border border-black rounded-none font-serif" },
    addToCartButton: { className: "w-full bg-black text-white hover:bg-gray-800 rounded-none font-serif uppercase tracking-[0.2em] text-xs" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b border-black mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-sm px-8 py-6 border border-black text-black hover:bg-black hover:text-white rounded-none font-serif uppercase tracking-[0.2em] bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-sm px-8 py-6 bg-black text-white hover:bg-gray-800 rounded-none font-serif uppercase tracking-[0.2em]",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-16 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 - cozy, handcrafted editorial identity.
// 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 flex items-center" },
    container: { className: "container mx-auto px-6 md:px-10 py-20" },
    contentWrapper: { className: "max-w-2xl" },
    badge: {
      visible: true,
      className:
        "inline-flex items-center text-primary border-0 border-l-2 border-primary bg-transparent rounded-none pl-4 pr-0 py-1 text-xs tracking-[0.3em] uppercase font-medium",
      text: "Handcrafted — Est. 2026",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-primary",
    },
    title: {
      className: "text-6xl md:text-8xl font-serif italic text-foreground mt-8 mb-8 leading-[0.95]",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block not-italic font-serif mt-2 pl-8 border-l-4 border-primary text-primary",
    },
    subtitle: {
      className: "text-lg text-muted-foreground mb-10 max-w-md leading-relaxed font-serif",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 items-start" },
    primaryButton: {
      visible: true,
      className:
        "bg-primary hover:bg-primary/90 text-primary-foreground text-sm px-10 py-6 rounded-full font-medium border-0 shadow-lg shadow-primary/20 tracking-wide",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className:
        "border-0 border-b-2 border-foreground rounded-none text-foreground hover:text-primary hover:border-primary text-sm px-2 py-4 font-medium bg-transparent tracking-wide transition-colors",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  collectionsSection: {
    visible: true,
    section: { className: "py-24 px-6 md:px-10 max-w-6xl mx-auto" },
    header: { className: "flex flex-col items-center text-center mb-16" },
    title: {
      className:
        "text-4xl font-serif italic text-foreground relative pb-4 after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-16 after:h-px after:bg-primary",
      text: "Shop by Collection",
    },
    subtitle: {
      className: "text-muted-foreground mt-4 text-sm tracking-wide uppercase",
      text: "Explore our curated collections",
    },
    layout: { maxCollections: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-8", skeletonCount: 4 },
    card: {
      className:
        "group hover:-translate-y-1 transition-all duration-500 cursor-pointer h-full border border-border rounded-2xl bg-card hover:border-primary overflow-hidden flex flex-col",
    },
    collectionImage: { className: "relative w-full h-64 overflow-hidden" },
    collectionName: { className: "font-serif italic text-lg text-card-foreground group-hover:text-primary transition-colors" },
    collectionCount: { className: "text-muted-foreground text-sm mt-2" },
    viewAllButton: {
      visible: true,
      className: "text-primary hover:bg-primary/5 rounded-full font-medium tracking-wide",
      href: "/collections",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-primary text-primary hover:bg-primary/5 rounded-full font-medium bg-transparent tracking-wide",
      href: "/collections",
      text: "View All Collections",
    },
    skeleton: { className: "animate-pulse bg-muted border border-border rounded-2xl" },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-6 md:px-10 max-w-6xl mx-auto" },
    header: { className: "flex flex-col items-center text-center mb-16" },
    title: {
      className:
        "text-4xl font-serif italic text-foreground relative pb-4 after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-16 after:h-px after:bg-primary",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-muted-foreground mt-4 text-sm tracking-wide uppercase",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-8", skeletonCount: 4 },
    card: {
      className:
        "group hover:-translate-y-1 transition-all duration-500 cursor-pointer h-full border border-border rounded-2xl bg-card hover:border-primary overflow-hidden",
    },
    categoryName: { className: "font-serif italic text-lg text-center text-card-foreground" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-primary hover:bg-primary/5 rounded-full font-medium tracking-wide",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-primary text-primary hover:bg-primary/5 rounded-full font-medium bg-transparent tracking-wide",
      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-24 bg-muted/30 border-y border-border" },
    container: { className: "container mx-auto px-6 md:px-10" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className:
        "text-4xl md:text-5xl font-serif italic text-foreground mb-4 relative pb-5 after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-20 after:h-px after:bg-primary",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-muted-foreground max-w-xl mx-auto mt-4 tracking-wide uppercase text-sm",
      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-y-1 hover:shadow-xl hover:shadow-primary/5 transition-all duration-500 border border-border rounded-2xl bg-card h-full flex flex-col relative hover:border-primary",
      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 italic 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-serif text-foreground" },
    originalPrice: { className: "text-lg text-muted-foreground/50 line-through" },
    discountBadge: { className: "bg-secondary/10 text-secondary text-xs rounded-full font-medium" },
    saleBadge: { className: "absolute top-4 left-4 bg-primary text-primary-foreground rounded-full font-medium tracking-wide" },
    featuredBadge: { className: "absolute top-4 right-4 bg-card text-primary border border-primary rounded-full font-medium tracking-wide" },
    quickAddButton: { className: "bg-card text-card-foreground hover:bg-primary/5 border border-border rounded-full" },
    addToCartButton: { className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-full font-medium tracking-wide" },
    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-full font-medium bg-transparent tracking-wide",
      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/5 rounded-full font-medium bg-transparent tracking-wide",
      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
  newsletterEnabled?: boolean
}

const storeConfig: StoreConfig = {
  storeId: "PLACEHOLDER",
  storeName: "My Store",
  apiBaseUrl: "https://storebuilderapi.searchagora.com",
  presetId: "gradient-glow",
  primaryColor: "#000000",
  secondaryColor: "#666666",
  metaTitle: "My Store",
  metaDescription: "Welcome to our store",
  currency: "USD",
  language: "en",
  gtag: "",
  logo: "",
  favicon: "",
  socialShareImage: "",
  enableRestockNotifications: false,
  newsletterEnabled: 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" | "es" | "hi" | "zh"

type Currency = "USD" | "SAR"

const SUPPORTED_LANGUAGES: Language[] = ["en", "ar", "es", "hi", "zh"]

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" },
  es: { code: "USD", symbol: "$", position: "before" },
  hi: { code: "USD", symbol: "$", position: "before" },
  zh: { code: "USD", symbol: "$", position: "before" },
}

export function LanguageProvider({ children }: { children: React.ReactNode }) {
  const defaultLang = (
    SUPPORTED_LANGUAGES.includes(storeConfig.language as Language) ? storeConfig.language : "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 && SUPPORTED_LANGUAGES.includes(savedLanguage)) {
      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: "ltr" | "rtl" = 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",
      bundles: "Bundles",
      collections: "Collections",
      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...",
      noFound: "No categories found",
      adjustSearch: "Try adjusting your search",
      backToCategories: "Back to Categories",
      noProducts: "This category doesn't have any products yet",
    },
    bundles: {
      title: "Bundles",
      subtitle: "Save more with our curated product bundles",
      noFound: "No bundles found",
      checkBackLater: "Check back later for new bundles",
      item: "item",
      items: "items",
      off: "OFF",
      notFound: "Bundle not found",
      backToBundles: "Back to Bundles",
      youSave: "You save",
      whatsIncluded: "What's Included",
      qty: "Qty:",
      quantity: "Quantity:",
      addedToCart: "Added to Cart!",
      addToCart: "Add Bundle to Cart",
      product: "Product",
      loadMore: "Load More",
      loading: "Loading...",
    },
    collections: {
      title: "Collections",
      subtitle: "Browse our curated collections",
      noCollections: "No Collections Yet",
      checkBackLater: "Check back later for new collections.",
      product: "product",
      products: "products",
      notFound: "Collection Not Found",
      doesNotExist: "The collection you are looking for does not exist.",
      backToHome: "Back to Home",
      noProducts: "No Products Yet",
      noProductsDesc: "This collection doesn't have any products yet.",
      loading: "Loading...",
    },
    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",
      addSomeProducts: "Add some products to get started",
      refreshError: "Please refresh or try again.",
    },
    checkout: {
      checkout: "Checkout",
      initializing: "Initializing checkout...",
      notConfiguredTitle: "Checkout is not configured for this store",
      notConfiguredDesc:
        "This store hasn't finished setting up payments yet, so checkout is currently unavailable. Please check back soon.",
      continueShopping: "Continue Shopping",
      configError: "Configuration Error",
      unableToInit: "Unable to initialize payment system. Please try again later.",
      stripeNotInitialized: "Stripe not initialized",
      contactInformation: "Contact Information",
      email: "Email",
      emailPlaceholder: "Enter your email",
      shippingAddress: "Shipping Address",
      fullName: "Full Name",
      fullNamePlaceholder: "Enter your full name",
      company: "Company",
      companyPlaceholder: "Company name",
      taxId: "Tax ID",
      taxIdPlaceholder: "eg. PL123456789",
      address: "Address",
      addressPlaceholder: "Street address",
      addressCont: "Address (continued)",
      addressContPlaceholder: "Apartment, suite, etc. (optional)",
      postalCode: "Postal Code",
      postalCodePlaceholder: "Postal code",
      city: "City",
      cityPlaceholder: "City",
      stateRegion: "State / Region",
      statePlaceholder: "State or region",
      country: "Country",
      selectCountry: "Select country",
      phoneNumber: "Phone Number",
      phonePlaceholder: "Phone number",
      isRequired: "is required",
      minTwoChars: "must be at least 2 characters",
      lettersOnly: "can only contain letters, spaces, hyphens, periods, and apostrophes",
      shippingMethod: "Shipping Method",
      fetchingShipping: "Fetching shipping options...",
      noShippingOptions: "No shipping options available",
      businessDays: "business days",
      orderNotes: "Order Notes",
      notesOptional: "Notes (optional)",
      notesPlaceholder: "Add any special instructions for your order",
      qty: "Qty:",
      subtotal: "Subtotal",
      shipping: "Shipping",
      discount: "Discount",
      tax: "Tax",
      total: "TOTAL",
      couponCode: "Coupon Code",
      couponPlaceholder: "Enter coupon code",
      apply: "Apply",
      applying: "Applying...",
      remove: "Remove",
      removing: "Removing...",
      enterCoupon: "Please enter a coupon code",
      couponAlreadyApplied: "This coupon is already applied",
      couponApplied: "Coupon applied successfully!",
      couponInvalid: "Coupon not found or not valid for this order",
      couponApplyFailed: "Failed to apply coupon",
      couponRemoveFailed: "Failed to remove coupon",
      payment: "Payment",
      preparingPayment: "Preparing payment...",
      continueToPayment: "Continue to Payment",
      processing: "Processing...",
      pay: "Pay",
      paymentFailed: "Payment failed",
      paymentError: "An error occurred while processing your payment",
      fillRequiredFields: "Please fill in all required contact and shipping fields",
      selectShippingMethod: "Please select a shipping method",
      createIntentFailed: "Failed to create payment intent",
      initPaymentFailed: "Failed to initialize payment",
      loadSummaryFailed: "Failed to load order summary",
      invalidAddress:
        "This address appears to be invalid and no shipping methods were found. Please check your address and try different values.",
    },
    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!",
      orderConfirmation: "Order Confirmation",
      missingPayment: "Missing payment information",
      failedFinalize: "Failed to finalize your order",
      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",
    },
    about: {
      ourStory: "Our Story",
      heroSubtitle: "Building exceptional experiences through quality products and innovative design",
      whoWeAre: "Who We Are",
      whoWeAreP1:
        "Founded with a passion for excellence, we have 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.",
      whoWeAreP2:
        "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.",
      whoWeAreP3:
        "Today, we serve customers worldwide, building lasting relationships through exceptional service and products that stand the test of time.",
      ourMission: "Our Mission",
      ourMissionText:
        "To provide exceptional products that inspire and enhance the lives of our customers while supporting sustainable practices and ethical manufacturing.",
      ourVision: "Our Vision",
      ourVisionText:
        "To be the trusted destination for discerning customers who value quality, innovation, and responsible business practices.",
      ourValues: "Our Values",
      qualityFirst: "Quality First",
      qualityFirstText: "We never compromise on quality, ensuring every product meets our rigorous standards.",
      sustainability: "Sustainability",
      sustainabilityText: "Environmental responsibility guides our sourcing and business practices.",
      customerFocus: "Customer Focus",
      customerFocusText: "Your satisfaction and experience are at the heart of everything we do.",
      meetTeam: "Meet Our Team",
      meetTeamText:
        "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.",
      teamQuote:
        "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.",
      teamSignature: "— The Team",
    },
    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",
      newsletterSubtitle: "Subscribe for exclusive offers, new arrivals, and more. No spam, unsubscribe anytime.",
      emailPlaceholder: "Enter your email",
      subscribe: "Subscribe",
      subscribing: "Subscribing...",
      subscribed: "You're subscribed!",
      alreadySubscribed: "You're already subscribed.",
      somethingWrong: "Something went wrong. Please try again.",
      tagline:
        "Your destination for innovative products that shape tomorrow. Quality, style, and innovation in every purchase.",
      collections: "Collections",
      bundles: "Bundles",
      legal: "Legal",
      privacyPolicy: "Privacy Policy",
      returnPolicy: "Return Policy",
      noPolicies: "No policies available",
      contactInfo: "Contact Info",
      poweredBy: "Powered by",
      allRightsReserved: "All rights reserved.",
    },
    newsletter: {
      subtitle: "Subscribe to our newsletter and get 20% off your first order plus early access to sales and new arrivals",
      subscribed: "You're subscribed! Check your inbox for a confirmation.",
      alreadySubscribed: "You're already subscribed to our newsletter.",
      subscribing: "Subscribing...",
      noSpam: "No spam, unsubscribe at any time",
    },
    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.",
    },
    restock: {
      getNotified: "Get Notified",
      whenInStock: "When In Stock",
      emailAddress: "Email Address",
      emailHint: "We'll send you an email when this product is back in stock.",
      cancel: "Cancel",
      notifyMe: "Notify Me",
      subscribing: "Subscribing...",
      closeModal: "Close modal",
      enterValidEmail: "Please enter a valid email",
      failedSubscribe: "Failed to subscribe",
      defaultSuccess: "You'll be notified when this product is back in stock!",
      failedSubscribeNotifications: "Failed to subscribe to restock notifications",
    },
  },
  ar: {
    nav: {
      home: "الرئيسية",
      products: "المنتجات",
      featured: "المميزة",
      about: "من نحن",
      contact: "اتصل بنا",
      bundles: "الباقات",
      collections: "المجموعات",
      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: "ابحث عن الفئات...",
      noFound: "لم يتم العثور على فئات",
      adjustSearch: "حاول تعديل بحثك",
      backToCategories: "العودة إلى الفئات",
      noProducts: "لا تحتوي هذه الفئة على أي منتجات بعد",
    },
    bundles: {
      title: "الباقات",
      subtitle: "وفّر أكثر مع باقات منتجاتنا المختارة",
      noFound: "لا توجد باقات",
      checkBackLater: "تحقق لاحقاً للحصول على باقات جديدة",
      item: "عنصر",
      items: "عناصر",
      off: "خصم",
      notFound: "الباقة غير موجودة",
      backToBundles: "العودة إلى الباقات",
      youSave: "أنت توفر",
      whatsIncluded: "ما المتضمن",
      qty: "الكمية:",
      quantity: "الكمية:",
      addedToCart: "تمت الإضافة إلى السلة!",
      addToCart: "أضف الباقة إلى السلة",
      product: "منتج",
      loadMore: "تحميل المزيد",
      loading: "جاري التحميل...",
    },
    collections: {
      title: "المجموعات",
      subtitle: "تصفح مجموعاتنا المختارة",
      noCollections: "لا توجد مجموعات بعد",
      checkBackLater: "تحقق لاحقاً للحصول على مجموعات جديدة.",
      product: "منتج",
      products: "منتجات",
      notFound: "المجموعة غير موجودة",
      doesNotExist: "المجموعة التي تبحث عنها غير موجودة.",
      backToHome: "العودة إلى الرئيسية",
      noProducts: "لا توجد منتجات بعد",
      noProductsDesc: "لا تحتوي هذه المجموعة على أي منتجات بعد.",
      loading: "جاري التحميل...",
    },
    cart: {
      title: "سلة التسوق",
      yourCart: "سلتك",
      empty: "سلتك فارغة",
      continueShopping: "متابعة التسوق",
      proceedToCheckout: "إتمام الشراء",
      clearCart: "إفراغ السلة",
      addToCart: "أضف إلى السلة",
      addToCartPhysical: "أضف إلى السلة",
      addToCartDigital: "اشترِ الآن",
      addToCartService: "احجز خدمة",
      quickAdd: "إضافة سريعة",
      outOfStock: "غير متوف��",
      remove: "إزالة",
      subtotal: "المجموع الفرعي",
      shipping: "الشحن",
      calculatedAtCheckout: "يحسب عند الدفع",
      total: "الإجمالي",
      items: "عناصر",
      orderSummary: "ملخص الطلب",
      addSomeProducts: "أضف بعض المنتجات للبدء",
      refreshError: "يرجى التحديث أو المحاولة مرة أخرى.",
    },
    checkout: {
      checkout: "الدفع",
      initializing: "جاري تهيئة الدفع...",
      notConfiguredTitle: "الدفع غير مُهيأ لهذا المتجر",
      notConfiguredDesc: "لم ينتهِ هذا المتجر من إعداد المدفوعات بعد، لذا فإن الدفع غير متاح حالياً. يرجى المراجعة قريباً.",
      continueShopping: "متابعة التسوق",
      configError: "خطأ في الإعداد",
      unableToInit: "تعذر تهيئة نظام الدفع. يرجى المحاولة لاحقاً.",
      stripeNotInitialized: "لم تتم تهيئة Stripe",
      contactInformation: "معلومات الاتصال",
      email: "البريد الإلكتروني",
      emailPlaceholder: "أدخل بريدك الإلكتروني",
      shippingAddress: "عنوان الشحن",
      fullName: "الاسم الكامل",
      fullNamePlaceholder: "أدخل اسمك الكامل",
      company: "الشركة",
      companyPlaceholder: "اسم الشركة",
      taxId: "الرقم الضريبي",
      taxIdPlaceholder: "مثال: PL123456789",
      address: "العنوان",
      addressPlaceholder: "عنوان الشارع",
      addressCont: "العنوان (تابع)",
      addressContPlaceholder: "شقة، جناح، إلخ. (اختياري)",
      postalCode: "الرمز البريدي",
      postalCodePlaceholder: "الرمز البريدي",
      city: "المدينة",
      cityPlaceholder: "المدينة",
      stateRegion: "الولاية / المنطقة",
      statePlaceholder: "الولاية أو المنطقة",
      country: "الدولة",
      selectCountry: "اختر الدولة",
      phoneNumber: "رقم الهاتف",
      phonePlaceholder: "رقم الهاتف",
      isRequired: "مطلوب",
      minTwoChars: "يجب أن يكون حرفين على الأقل",
      lettersOnly: "يمكن أن يحتوي فقط على أحرف ومسافات وشرطات ونقاط وفواصل عليا",
      shippingMethod: "طريقة الشحن",
      fetchingShipping: "جاري جلب خيارات الشحن...",
      noShippingOptions: "لا توجد خيارات شحن متاحة",
      businessDays: "أيام عمل",
      orderNotes: "ملاحظات الطلب",
      notesOptional: "ملاحظات (اختياري)",
      notesPlaceholder: "أضف أي تعليمات خاصة لطلبك",
      qty: "الكمية:",
      subtotal: "المجموع الفرعي",
      shipping: "الشحن",
      discount: "الخصم",
      tax: "الضريبة",
      total: "الإجمالي",
      couponCode: "رمز القسيمة",
      couponPlaceholder: "أدخل رمز القسيمة",
      apply: "تطبيق",
      applying: "جاري التطبيق...",
      remove: "إزالة",
      removing: "جاري الإزالة...",
      enterCoupon: "يرجى إدخال رمز القسيمة",
      couponAlreadyApplied: "هذه القسيمة مطبقة بالفعل",
      couponApplied: "تم تطبيق القسيمة بنجاح!",
      couponInvalid: "القسيمة غير موجودة أو غير صالحة لهذا الطلب",
      couponApplyFailed: "فشل تطبيق القسيمة",
      couponRemoveFailed: "فشل إزالة القسيمة",
      payment: "الدفع",
      preparingPayment: "جاري تحضير الدفع...",
      continueToPayment: "المتابعة إلى الدفع",
      processing: "جاري المعالجة...",
      pay: "ادفع",
      paymentFailed: "فشل الدفع",
      paymentError: "حدث خطأ أثناء معالجة دفعتك",
      fillRequiredFields: "يرجى ملء جميع حقول الاتصال والشحن المطلوبة",
      selectShippingMethod: "يرجى اختيار طريقة الشحن",
      createIntentFailed: "فشل إنشاء نية الدفع",
      initPaymentFailed: "فشل تهيئة الدفع",
      loadSummaryFailed: "فشل تحميل ملخص الطلب",
      invalidAddress: "يبدو أن هذا العنوان غير صالح ولم يتم العثور على طرق شحن. يرجى التحقق من عنوانك وتجربة قيم مختلفة.",
    },
    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: "تم تأكيد الطلب!",
      orderConfirmation: "تأكيد الطلب",
      missingPayment: "معلومات الدفع مفقودة",
      failedFinalize: "فشل إتمام طلبك",
      loading: "جاري تحميل تفاصيل الطلب...",
      notFound: "الطلب غير موجود",
      unableToLoad: "غير قادر على تحميل تفاصيل الطلب",
      thankYou: "شكراً لك على الشراء. تمت معالجة طلبك بنجاح.",
      orderSummary: "ملخص الطلب",
      qty: "الكمية:",
      each: "لكل واحد",
      tax: "الضريبة",
      orderStatus: "حالة الطلب",
      payment: "الدفع:",
      orderStatusLabel: "حالة الطلب:",
      customerInfo: "معلومات العميل",
      name: "الاسم:",
      email: "البريد الإلكتروني:",
      phone: "الهاتف:",
      shippingAddress: "عنوان الشحن",
      shippingMethod: "طريقة الشحن:",
      emailConfirm: "ستتلقى رسالة تأكيد عبر البريد الإلكتروني قريباً تحتوي على تفاصيل طلبك ومعلومات التتبع.",
      printReceipt: "طباعة الإيصال",
    },
    about: {
      ourStory: "قصتنا",
      heroSubtitle: "بناء تجارب استثنائية من خلال منتجات عالية الجودة وتصميم مبتكر",
      whoWeAre: "من نحن",
      whoWeAreP1:
        "تأسسنا بشغف للتميز، وكنا في طليعة تقديم منتجات راقية تثري الحياة اليومية. بدأت رحلتنا بإيمان بسيط: أن الجودة والابتكار يجب أن يكونا في متناول الجميع.",
      whoWeAreP2:
        "نختار بعناية كل منتج في مجموعتنا، ونعمل مباشرة مع الحرفيين والمصنّعين الذين يشاركوننا التزامنا بالحرفية والاستدامة. كل قطعة تحكي قصة من التفاني والمهارة والاهتمام بالتفاصيل.",
      whoWeAreP3:
        "اليوم، نخدم العملاء حول العالم، ونبني علاقات دائمة من خلال خدمة استثنائية ومنتجات تصمد أمام اختبار الزمن.",
      ourMission: "مهمتنا",
      ourMissionText:
        "تقديم منتجات استثنائية تلهم وتثري حياة عملائنا مع دعم الممارسات المستدامة والتصنيع الأخلاقي.",
      ourVision: "رؤيتنا",
      ourVisionText: "أن نكون الوجهة الموثوقة للعملاء المميزين الذين يقدّرون الجودة والابتكار وممارسات العمل المسؤولة.",
      ourValues: "قيمنا",
      qualityFirst: "الجودة أولاً",
      qualityFirstText: "نحن لا نساوم أبداً على الجودة، ونضمن أن كل منتج يلبي معاييرنا الصارمة.",
      sustainability: "الاستدامة",
      sustainabilityText: "المسؤولية البيئية توجه مصادرنا وممارساتنا التجارية.",
      customerFocus: "التركيز على العميل",
      customerFocusText: "رضاك وتجربتك في صميم كل ما نقوم به.",
      meetTeam: "تعرف على فريقنا",
      meetTeamText:
        "يعمل فريقنا المتنوع من الأفراد الشغوفين بلا كلل لتقديم أفضل المنتجات والخدمات لك. من المشترين الذين يسافرون حول العالم للحصول على قطع فريدة، إلى فريق خدمة العملاء الذي يضمن رضاك، نحن هنا من أجلك.",
      teamQuote:
        "نؤمن بأن المنتجات الرائعة لديها القدرة على الإلهام والربط وتغيير الحياة. لهذا السبب نلتزم بتقديم الأفضل فقط لك.",
      teamSignature: "— الفريق",
    },
    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: "اشترك في نشرتنا البريدية",
      newsletterSubtitle: "اشترك للحصول على عروض حصرية ووصول جديد والمزيد. لا رسائل مزعجة، يمكنك إلغاء الاشتراك في أي وقت.",
      emailPlaceholder: "أدخل بريدك الإلكتروني",
      subscribe: "اشترك",
      subscribing: "جاري الاشتراك...",
      subscribed: "تم اشتراكك!",
      alreadySubscribed: "أنت مشترك بالفعل.",
      somethingWrong: "حدث خطأ ما. يرجى المحاولة مرة أخرى.",
      tagline: "وجهتك للمنتجات المبتكرة التي تشكل المستقبل. الجودة والأناقة والابتكار في كل عملية شراء.",
      collections: "المجموعات",
      bundles: "الباقات",
      legal: "قانوني",
      privacyPolicy: "سياسة الخصوصية",
      returnPolicy: "سياسة الإرجاع",
      noPolicies: "لا توجد سياسات متاحة",
      contactInfo: "معلومات الاتصال",
      poweredBy: "مدعوم من",
      allRightsReserved: "جميع الحقوق محفوظة.",
    },
    newsletter: {
      subtitle: "اشترك في نشرتنا البريدية واحصل على خصم 20% على طلبك الأول بالإضافة إلى وصول مبكر للتخفيضات والوافدات الجديدة",
      subscribed: "تم اشتراكك! تحقق من بريدك الوارد للتأكيد.",
      alreadySubscribed: "أنت مشترك بالفعل في نشرتنا البريدية.",
      subscribing: "جاري الاشتراك...",
      noSpam: "لا رسائل مزعجة، يمكنك إلغاء الاشتراك في أي وقت",
    },
    common: {
      sale: "تخفيض",
      featured: "مميز",
      inStock: "متوفر",
      loading: "جاري التحميل...",
      error: "خطأ",
      success: "نجاح",
      tryAgain: "حاول مرة أخرى",
      search: "بحث",
      searchPlaceholder: "بحث...",
      previous: "السابق",
      next: "التالي",
    },
    featured: {
      title: "المنتجات المميزة",
      subtitle: "اكتشف مجموعتنا المختارة من المنتجات الممتازة",
      error: "فشل تحميل المنتجات المميزة. يرجى المحاولة مرة أخرى.",
      notFound: "لا توجد منتجات مميزة متاحة في هذا الوقت.",
    },
    restock: {
      getNotified: "احصل على إشعار",
      whenInStock: "عند توفره",
      emailAddress: "البريد الإلكتروني",
      emailHint: "سنرسل لك بريداً إلكترونياً عند توفر هذا المنتج مرة أخرى.",
      cancel: "إلغاء",
      notifyMe: "أشعرني",
      subscribing: "جاري الاشتراك...",
      closeModal: "إغلاق",
      enterValidEmail: "يرجى إدخال بريد إلكتروني صالح",
      failedSubscribe: "فشل الاشتراك",
      defaultSuccess: "سيتم إشعارك عند توفر هذا المنتج مرة أخرى!",
      failedSubscribeNotifications: "فشل الاشتراك في إشعارات إعادة التوفر",
    },
  },
  es: {
    nav: {
      home: "Inicio",
      products: "Productos",
      featured: "Destacados",
      about: "Acerca de",
      contact: "Contacto",
      bundles: "Paquetes",
      collections: "Colecciones",
      searchPlaceholder: "Buscar productos...",
    },
    hero: {
      title: "Descubre las Innovaciones del Mañana Hoy",
      subtitle: "Explora productos de vanguardia que redefinen la excelencia. Compra el futuro ahora.",
      shopNow: "Comprar Ahora",
      exploreCategories: "Explorar Categorías",
    },
    products: {
      title: "Todos los Productos",
      subtitle: "Descubre nuestra colección completa de productos premium",
      loading: "Cargando productos...",
      noAvailable: "No hay productos disponibles",
      notFound: "No se encontraron productos",
      viewDetails: "Ver Detalles",
      allProducts: "Todos los Productos",
      categories: "Categorías",
      searchProducts: "Buscar productos...",
      viewAllFeatured: "Ver Todos los Destacados",
      viewAllProducts: "Ver Todos los Productos",
      showing: "Mostrando",
      of: "de",
      products: "productos",
      available: "disponibles",
      from: "Desde",
    },
    categories: {
      title: "Explorar Categorías",
      subtitle: "Explora nuestra colección por categoría",
      viewAll: "Ver Todas las Categorías",
      loadMore: "Cargar Más",
      loading: "Cargando categorías...",
      noAvailable: "No hay categorías disponibles",
      searchPlaceholder: "Buscar categorías...",
      noFound: "No se encontraron categorías",
      adjustSearch: "Intenta ajustar tu búsqueda",
      backToCategories: "Volver a Categorías",
      noProducts: "Esta categoría aún no tiene productos",
    },
    bundles: {
      title: "Paquetes",
      subtitle: "Ahorra más con nuestros paquetes de productos seleccionados",
      noFound: "No se encontraron paquetes",
      checkBackLater: "Vuelve más tarde para ver nuevos paquetes",
      item: "artículo",
      items: "artículos",
      off: "DESC.",
      notFound: "Paquete no encontrado",
      backToBundles: "Volver a Paquetes",
      youSave: "Ahorras",
      whatsIncluded: "Qué Incluye",
      qty: "Cant.:",
      quantity: "Cantidad:",
      addedToCart: "¡Agregado al Carrito!",
      addToCart: "Agregar Paquete al Carrito",
      product: "Producto",
      loadMore: "Cargar Más",
      loading: "Cargando...",
    },
    collections: {
      title: "Colecciones",
      subtitle: "Explora nuestras colecciones seleccionadas",
      noCollections: "Aún No Hay Colecciones",
      checkBackLater: "Vuelve más tarde para ver nuevas colecciones.",
      product: "producto",
      products: "productos",
      notFound: "Colección No Encontrada",
      doesNotExist: "La colección que buscas no existe.",
      backToHome: "Volver al Inicio",
      noProducts: "Aún No Hay Productos",
      noProductsDesc: "Esta colección aún no tiene productos.",
      loading: "Cargando...",
    },
    cart: {
      title: "Carrito de Compras",
      yourCart: "Tu Carrito",
      empty: "Tu carrito está vacío",
      continueShopping: "Continuar Comprando",
      proceedToCheckout: "Proceder al Pago",
      clearCart: "Vaciar Carrito",
      addToCart: "Agregar al carrito",
      addToCartPhysical: "Agregar al carrito",
      addToCartDigital: "Comprar ahora",
      addToCartService: "Reservar servicio",
      quickAdd: "Agregar rápido",
      outOfStock: "Agotado",
      remove: "Eliminar",
      subtotal: "Subtotal",
      shipping: "Envío",
      calculatedAtCheckout: "Calculado al pagar",
      total: "Total",
      items: "artículos",
      addSomeProducts: "Agrega algunos productos para comenzar",
      refreshError: "Por favor actualiza o intenta de nuevo.",
    },
    checkout: {
      checkout: "Pago",
      initializing: "Inicializando el pago...",
      notConfiguredTitle: "El pago no está configurado para esta tienda",
      notConfiguredDesc:
        "Esta tienda aún no ha terminado de configurar los pagos, por lo que el pago no está disponible actualmente. Vuelve pronto.",
      continueShopping: "Continuar Comprando",
      configError: "Error de Configuración",
      unableToInit: "No se pudo inicializar el sistema de pago. Por favor intenta más tarde.",
      stripeNotInitialized: "Stripe no inicializado",
      contactInformation: "Información de Contacto",
      email: "Correo Electrónico",
      emailPlaceholder: "Ingresa tu correo",
      shippingAddress: "Dirección de Envío",
      fullName: "Nombre Completo",
      fullNamePlaceholder: "Ingresa tu nombre completo",
      company: "Empresa",
      companyPlaceholder: "Nombre de la empresa",
      taxId: "Identificación Fiscal",
      taxIdPlaceholder: "ej. PL123456789",
      address: "Dirección",
      addressPlaceholder: "Dirección de la calle",
      addressCont: "Dirección (continuación)",
      addressContPlaceholder: "Apartamento, suite, etc. (opcional)",
      postalCode: "Código Postal",
      postalCodePlaceholder: "Código postal",
      city: "Ciudad",
      cityPlaceholder: "Ciudad",
      stateRegion: "Estado / Región",
      statePlaceholder: "Estado o región",
      country: "País",
      selectCountry: "Selecciona país",
      phoneNumber: "Número de Teléfono",
      phonePlaceholder: "Número de teléfono",
      isRequired: "es obligatorio",
      minTwoChars: "debe tener al menos 2 caracteres",
      lettersOnly: "solo puede contener letras, espacios, guiones, puntos y apóstrofos",
      shippingMethod: "Método de Envío",
      fetchingShipping: "Obteniendo opciones de envío...",
      noShippingOptions: "No hay opciones de envío disponibles",
      businessDays: "días hábiles",
      orderNotes: "Notas del Pedido",
      notesOptional: "Notas (opcional)",
      notesPlaceholder: "Agrega instrucciones especiales para tu pedido",
      qty: "Cant.:",
      subtotal: "Subtotal",
      shipping: "Envío",
      discount: "Descuento",
      tax: "Impuesto",
      total: "TOTAL",
      couponCode: "Código de Cupón",
      couponPlaceholder: "Ingresa el código de cupón",
      apply: "Aplicar",
      applying: "Aplicando...",
      remove: "Eliminar",
      removing: "Eliminando...",
      enterCoupon: "Por favor ingresa un código de cupón",
      couponAlreadyApplied: "Este cupón ya está aplicado",
      couponApplied: "¡Cupón aplicado con éxito!",
      couponInvalid: "Cupón no encontrado o no válido para este pedido",
      couponApplyFailed: "No se pudo aplicar el cupón",
      couponRemoveFailed: "No se pudo eliminar el cupón",
      payment: "Pago",
      preparingPayment: "Preparando el pago...",
      continueToPayment: "Continuar al Pago",
      processing: "Procesando...",
      pay: "Pagar",
      paymentFailed: "El pago falló",
      paymentError: "Ocurrió un error al procesar tu pago",
      fillRequiredFields: "Por favor completa todos los campos de contacto y envío requeridos",
      selectShippingMethod: "Por favor selecciona un método de envío",
      createIntentFailed: "No se pudo crear la intención de pago",
      initPaymentFailed: "No se pudo inicializar el pago",
      loadSummaryFailed: "No se pudo cargar el resumen del pedido",
      invalidAddress:
        "Esta dirección parece ser inválida y no se encontraron métodos de envío. Por favor verifica tu dirección e intenta con valores diferentes.",
    },
    productDetails: {
      backToHome: "Volver al Inicio",
      notFound: "Producto no encontrado.",
      browseAll: "Ver Todos los Productos",
      quantity: "Cantidad:",
      selectOptions: "Seleccionar Opciones",
      freeShipping: "Envío Gratis",
      securePayment: "Pago Seguro",
      easyReturns: "Devoluciones Fáciles",
      description: "Descripción",
      details: "Detalles",
      productId: "ID del Producto:",
      brand: "Marca:",
      category: "Categoría:",
      subcategory: "Subcategoría:",
      sku: "SKU:",
      selectedVariant: "Variante Seleccionada:",
      stock: "Existencias:",
      price: "Precio:",
      inStock: "En Existencia",
      outOfStock: "Agotado",
      available: "Disponible",
      units: "unidades",
    },
    success: {
      title: "¡Pedido Confirmado!",
      orderConfirmation: "Confirmación del Pedido",
      missingPayment: "Falta información de pago",
      failedFinalize: "No se pudo finalizar tu pedido",
      loading: "Cargando detalles del pedido...",
      notFound: "Pedido No Encontrado",
      unableToLoad: "No se pudieron cargar los detalles del pedido",
      thankYou: "Gracias por tu compra. Tu pedido se ha procesado con éxito.",
      orderSummary: "Resumen del Pedido",
      qty: "Cant.:",
      each: "cada uno",
      tax: "Impuesto",
      orderStatus: "Estado del Pedido",
      payment: "Pago:",
      orderStatusLabel: "Estado del Pedido:",
      customerInfo: "Información del Cliente",
      name: "Nombre:",
      email: "Correo:",
      phone: "Teléfono:",
      shippingAddress: "Dirección de Envío",
      shippingMethod: "Método de Envío:",
      emailConfirm: "Recibirás un correo de confirmación en breve con los detalles de tu pedido e información de seguimiento.",
      printReceipt: "Imprimir Recibo",
    },
    about: {
      ourStory: "Nuestra Historia",
      heroSubtitle: "Creando experiencias excepcionales a través de productos de calidad y diseño innovador",
      whoWeAre: "Quiénes Somos",
      whoWeAreP1:
        "Fundados con pasión por la excelencia, hemos estado a la vanguardia ofreciendo productos premium que mejoran la vida cotidiana. Nuestro viaje comenzó con una simple creencia: que la calidad y la innovación deben ser accesibles para todos.",
      whoWeAreP2:
        "Seleccionamos cuidadosamente cada producto de nuestra colección, trabajando directamente con artesanos y fabricantes que comparten nuestro compromiso con la artesanía y la sostenibilidad. Cada artículo cuenta una historia de dedicación, habilidad y atención al detalle.",
      whoWeAreP3:
        "Hoy, atendemos a clientes en todo el mundo, construyendo relaciones duraderas a través de un servicio excepcional y productos que resisten el paso del tiempo.",
      ourMission: "Nuestra Misión",
      ourMissionText:
        "Proporcionar productos excepcionales que inspiren y mejoren la vida de nuestros clientes mientras apoyamos prácticas sostenibles y una fabricación ética.",
      ourVision: "Nuestra Visión",
      ourVisionText:
        "Ser el destino de confianza para clientes exigentes que valoran la calidad, la innovación y las prácticas comerciales responsables.",
      ourValues: "Nuestros Valores",
      qualityFirst: "Calidad Primero",
      qualityFirstText: "Nunca comprometemos la calidad, asegurando que cada producto cumpla nuestros rigurosos estándares.",
      sustainability: "Sostenibilidad",
      sustainabilityText: "La responsabilidad ambiental guía nuestro abastecimiento y prácticas comerciales.",
      customerFocus: "Enfoque en el Cliente",
      customerFocusText: "Tu satisfacción y experiencia están en el centro de todo lo que hacemos.",
      meetTeam: "Conoce a Nuestro Equipo",
      meetTeamText:
        "Nuestro diverso equipo de personas apasionadas trabaja incansablemente para ofrecerte los mejores productos y servicio. Desde nuestros compradores que viajan por el mundo para encontrar artículos únicos, hasta nuestro equipo de atención al cliente que garantiza tu satisfacción, estamos aquí para ti.",
      teamQuote:
        "Creemos que los grandes productos tienen el poder de inspirar, conectar y transformar vidas. Por eso nos comprometemos a ofrecerte solo lo mejor.",
      teamSignature: "— El Equipo",
    },
    faq: {
      title: "Preguntas Frecuentes",
      subtitle: "Encuentra respuestas a preguntas comunes sobre nuestros productos y servicios",
      stillHaveQuestions: "¿Aún tienes preguntas?",
      cantFind: "¿No encuentras la respuesta que buscas? Nuestro equipo de soporte está aquí para ayudarte.",
      q1: "¿Qué métodos de pago aceptan?",
      a1: "Aceptamos todas las principales tarjetas de crédito (Visa, MasterCard, American Express), PayPal y otros métodos de pago seguros. Todas las transacciones están cifradas y son seguras.",
      q2: "¿Cuánto tarda el envío?",
      a2: "El envío estándar suele tardar de 5 a 7 días hábiles. Hay opciones de envío exprés disponibles al pagar para una entrega más rápida (2-3 días hábiles).",
      q3: "¿Cuál es su política de devoluciones?",
      a3: "Ofrecemos una política de devolución de 30 días para la mayoría de los artículos. Los productos deben estar sin usar y en su embalaje original. Contacta a nuestro equipo de servicio al cliente para iniciar una devolución.",
      q4: "¿Realizan envíos internacionales?",
      a4: "Sí, enviamos a la mayoría de los países del mundo. Los tiempos y costos de envío internacional varían según la ubicación. Puedes ver el costo exacto de envío al pagar.",
      q5: "¿Cómo puedo rastrear mi pedido?",
      a5: "Una vez que tu pedido sea enviado, recibirás un número de seguimiento por correo. Puedes usar este número para rastrear tu paquete en nuestro sitio web o en el sitio del transportista.",
      q6: "¿Puedo cancelar o modificar mi pedido?",
      a6: "Los pedidos pueden cancelarse o modificarse dentro de las 24 horas posteriores a su realización. Después de eso, el pedido puede haber sido procesado. Contáctanos lo antes posible si necesitas hacer cambios.",
      q7: "¿Sus productos tienen garantía?",
      a7: "La mayoría de nuestros productos vienen con garantía del fabricante. El período de garantía varía según el producto. Consulta la descripción del producto para obtener información específica sobre la garantía.",
      q8: "¿Cómo contacto al servicio al cliente?",
      a8: "Puedes contactar a nuestro equipo de soporte por correo en hello@agorabuildertemplate.com o por teléfono al +1 (555) 123-4567. Estamos disponibles de lunes a viernes, de 9am a 6pm EST.",
    },
    terms: {
      title: "Términos de Servicio",
      subtitle: "Lee estos términos cuidadosamente antes de usar nuestros servicios",
      lastUpdated: "Última actualización: Diciembre 2024",
      acceptance: "1. Aceptación de los Términos",
      useLicense: "2. Licencia de Uso",
      productInfo: "3. Información del Producto y Precios",
      orders: "4. Pedidos y Pago",
      shipping: "5. Envío y Entrega",
      returns: "6. Devoluciones y Reembolsos",
      privacy: "7. Política de Privacidad",
      liability: "8. Limitación de Responsabilidad",
      governing: "9. Ley Aplicable",
      contactInfo: "10. Información de Contacto",
    },
    contact: {
      title: "Ponte en Contacto",
      subtitle: "Nos encantaría saber de ti. Envíanos un mensaje y responderemos lo antes posible.",
      name: "Tu Nombre",
      namePlaceholder: "Juan Pérez",
      email: "Tu Correo",
      emailPlaceholder: "juan@example.com",
      subject: "Asunto",
      subjectPlaceholder: "¿Cómo podemos ayudar?",
      message: "Mensaje",
      messagePlaceholder: "Cuéntanos más sobre tu consulta...",
      sendMessage: "Envíanos un Mensaje",
      sending: "Enviando...",
      sendButton: "Enviar Mensaje",
      messageSent: "¡Mensaje Enviado con Éxito!",
      thanksMessage: "Gracias por contactarnos. Te responderemos pronto.",
      sendAnother: "Enviar Otro Mensaje",
      contactInfo: "Información de Contacto",
      customerService: "Servicio al Cliente",
      businessHours: "Horario de Atención",
      hours: {
        weekday: "Lunes - Viernes: 9:00 AM - 6:00 PM EST",
        saturday: "Sábado: 10:00 AM - 4:00 PM EST",
        sunday: "Domingo: Cerrado",
      },
      phone: "Teléfono",
      emailLabel: "Correo",
      address: "Dirección",
      followUs: "Síguenos",
      faq: "Preguntas Comunes",
      faqQuestions: {
        shipping: "¿Cuánto tarda el envío?",
        returns: "¿Cuál es su política de devoluciones?",
        international: "¿Realizan envíos internacionales?",
      },
      faqAnswers: {
        shipping: "El envío estándar tarda de 5 a 7 días hábiles. Hay opciones exprés disponibles.",
        returns: "Ofrecemos devoluciones de 30 días en la mayoría de los artículos en su estado original.",
        international: "Sí, enviamos a todo el mundo con tiempos de entrega variables.",
      },
    },
    footer: {
      quickLinks: "Enlaces Rápidos",
      aboutUs: "Acerca de Nosotros",
      termsOfService: "Términos de Servicio",
      customerService: "Servicio al Cliente",
      contactUs: "Contáctanos",
      faq: "Preguntas Frecuentes",
      newsletter: "Suscríbete a nuestro Boletín",
      newsletterSubtitle: "Suscríbete para recibir ofertas exclusivas, novedades y más. Sin spam, cancela cuando quieras.",
      emailPlaceholder: "Ingresa tu correo",
      subscribe: "Suscribirse",
      subscribing: "Suscribiendo...",
      subscribed: "¡Te has suscrito!",
      alreadySubscribed: "Ya estás suscrito.",
      somethingWrong: "Algo salió mal. Por favor intenta de nuevo.",
      tagline:
        "Tu destino para productos innovadores que dan forma al mañana. Calidad, estilo e innovación en cada compra.",
      collections: "Colecciones",
      bundles: "Paquetes",
      legal: "Legal",
      privacyPolicy: "Política de Privacidad",
      returnPolicy: "Política de Devoluciones",
      noPolicies: "No hay políticas disponibles",
      contactInfo: "Información de Contacto",
      poweredBy: "Desarrollado por",
      allRightsReserved: "Todos los derechos reservados.",
    },
    newsletter: {
      subtitle:
        "Suscríbete a nuestro boletín y obtén un 20% de descuento en tu primer pedido, además de acceso anticipado a ofertas y novedades",
      subscribed: "¡Te has suscrito! Revisa tu bandeja de entrada para confirmar.",
      alreadySubscribed: "Ya estás suscrito a nuestro boletín.",
      subscribing: "Suscribiendo...",
      noSpam: "Sin spam, cancela en cualquier momento",
    },
    common: {
      sale: "Oferta",
      featured: "Destacado",
      inStock: "En Existencia",
      loading: "Cargando...",
      error: "Error",
      success: "Éxito",
      tryAgain: "Intentar de Nuevo",
      search: "Buscar",
      searchPlaceholder: "Buscar...",
      previous: "Anterior",
      next: "Siguiente",
    },
    featured: {
      title: "Productos Destacados",
      subtitle: "Descubre nuestra colección seleccionada de productos premium",
      error: "Error al cargar los productos destacados. Inténtalo de nuevo.",
      notFound: "No hay productos destacados disponibles en este momento.",
    },
    restock: {
      getNotified: "Recibir Aviso",
      whenInStock: "Cuando Esté Disponible",
      emailAddress: "Correo Electrónico",
      emailHint: "Te enviaremos un correo cuando este producto vuelva a estar disponible.",
      cancel: "Cancelar",
      notifyMe: "Avísame",
      subscribing: "Suscribiendo...",
      closeModal: "Cerrar",
      enterValidEmail: "Por favor ingresa un correo válido",
      failedSubscribe: "Error al suscribirse",
      defaultSuccess: "¡Te avisaremos cuando este producto vuelva a estar disponible!",
      failedSubscribeNotifications: "Error al suscribirse a las notificaciones de reabastecimiento",
    },
  },
  hi: {
    nav: {
      home: "होम",
      products: "उत्पाद",
      featured: "विशेष",
      about: "हमारे बारे में",
      contact: "संपर्क करें",
      bundles: "बंडल",
      collections: "संग्रह",
      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: "श्रेणियाँ खोजें...",
      noFound: "कोई श्रेणी नहीं मिली",
      adjustSearch: "अपनी खोज समायोजित करने का प्रयास करें",
      backToCategories: "श्रेणियों पर वापस जाएँ",
      noProducts: "इस श्रेणी में अभी कोई उत्पाद नहीं है",
    },
    bundles: {
      title: "बंडल",
      subtitle: "हमारे चुनिंदा उत्पाद बंडलों के साथ अधिक बचत करें",
      noFound: "कोई बंडल नहीं मिला",
      checkBackLater: "नए बंडलों के लिए बाद में देखें",
      item: "वस्तु",
      items: "वस्तुएँ",
      off: "छूट",
      notFound: "बंडल नहीं मिला",
      backToBundles: "बंडलों पर वापस जाएँ",
      youSave: "आपकी बचत",
      whatsIncluded: "क्या शामिल है",
      qty: "मात्रा:",
      quantity: "मात्रा:",
      addedToCart: "कार्ट में जोड़ा गया!",
      addToCart: "बंडल कार्ट में जोड़ें",
      product: "उत्पाद",
      loadMore: "और लोड करें",
      loading: "लोड हो रहा है...",
    },
    collections: {
      title: "संग्रह",
      subtitle: "हमारे चुनिंदा संग्रह ब्राउज़ करें",
      noCollections: "अभी कोई संग्रह नहीं",
      checkBackLater: "नए संग्रहों के लिए बाद में देखें।",
      product: "उत्पाद",
      products: "उत्पाद",
      notFound: "संग्रह नहीं मिला",
      doesNotExist: "आप जिस संग्रह की तलाश कर रहे हैं वह मौजूद नहीं है।",
      backToHome: "होम पर वापस जाएँ",
      noProducts: "अभी कोई उत्पाद नहीं",
      noProductsDesc: "इस संग्रह में अभी कोई उत्पाद नहीं है।",
      loading: "लोड हो रहा है...",
    },
    cart: {
      title: "शॉपिंग कार्ट",
      yourCart: "आपका कार्ट",
      empty: "आपका कार्ट खाली है",
      continueShopping: "खरीदारी जारी रखें",
      proceedToCheckout: "चेकआउट पर जाएँ",
      clearCart: "कार्ट खाली करें",
      addToCart: "कार्ट में जोड़ें",
      addToCartPhysical: "कार्ट में जोड़ें",
      addToCartDigital: "अभी खरीदें",
      addToCartService: "सेवा बुक करें",
      quickAdd: "त्वरित जोड़ें",
      outOfStock: "स्टॉक में नहीं",
      remove: "हटाएँ",
      subtotal: "उप-योग",
      shipping: "शिपिंग",
      calculatedAtCheckout: "चेकआउट पर गणना की जाएगी",
      total: "कुल",
      items: "वस्तुएँ",
      addSomeProducts: "शुरू करने के लिए कुछ उत्पाद जोड़ें",
      refreshError: "कृपया रिफ्रेश करें या पुनः प्रयास करें।",
    },
    checkout: {
      checkout: "चेकआउट",
      initializing: "चेकआउट प्रारंभ हो रहा है...",
      notConfiguredTitle: "इस स्टोर के लिए चेकआउट कॉन्फ़िगर नहीं किया गया है",
      notConfiguredDesc: "इस स्टोर ने अभी तक भुगतान सेटअप पूरा नहीं किया है, इसल���ए चेकआउट फिलहाल उपलब्ध नहीं है। कृपया जल्द ही फिर देखें।",
      continueShopping: "खरीदारी जारी रखें",
      configError: "कॉन्फ़िगरेशन त्रुटि",
      unableToInit: "भुगतान प्रणाली प्रारंभ करने में असमर्थ। कृपया बाद में पुनः प्रयास करें।",
      stripeNotInitialized: "Stripe प्रारंभ नहीं हुआ",
      contactInformation: "संपर्क जानकारी",
      email: "ईमेल",
      emailPlaceholder: "अपना ईमेल दर्ज करें",
      shippingAddress: "शिपिंग पता",
      fullName: "पूरा नाम",
      fullNamePlaceholder: "अपना पूरा नाम दर्ज करें",
      company: "कंपनी",
      companyPlaceholder: "कंपनी का नाम",
      taxId: "कर आईडी",
      taxIdPlaceholder: "उदा. PL123456789",
      address: "पता",
      addressPlaceholder: "सड़क का पता",
      addressCont: "पता (जारी)",
      addressContPlaceholder: "अपार्टमेंट, सुइट, आदि (वैकल्पिक)",
      postalCode: "पिन कोड",
      postalCodePlaceholder: "पिन कोड",
      city: "शहर",
      cityPlaceholder: "शहर",
      stateRegion: "राज्य / क्षेत्र",
      statePlaceholder: "राज्य या क्षेत्र",
      country: "देश",
      selectCountry: "देश चुनें",
      phoneNumber: "फ़ोन नंबर",
      phonePlaceholder: "फ़ोन नंबर",
      isRequired: "आवश्यक है",
      minTwoChars: "कम से कम 2 अक्षर होने चाहिए",
      lettersOnly: "इसमें केवल अक्षर, रिक्त स्थान, हाइफ़न, अवधि और एपोस्ट्रोफ़ी हो सकते हैं",
      shippingMethod: "शिपिंग विधि",
      fetchingShipping: "शिपिंग विकल्प प्राप्त किए जा रहे हैं...",
      noShippingOptions: "कोई शिपिंग विकल्प उपलब्ध नहीं",
      businessDays: "कार्य दिवस",
      orderNotes: "ऑर्डर नोट्स",
      notesOptional: "नोट्स (वैकल्पिक)",
      notesPlaceholder: "अपने ऑर्डर के लिए कोई विशेष निर्देश जोड़ें",
      qty: "मात्रा:",
      subtotal: "उप-योग",
      shipping: "शिपिंग",
      discount: "छूट",
      tax: "कर",
      total: "कुल",
      couponCode: "कूपन कोड",
      couponPlaceholder: "कूपन कोड दर्ज करें",
      apply: "लागू करें",
      applying: "लागू किया जा रहा है...",
      remove: "हटाएं",
      removing: "हटाया जा रहा है...",
      enterCoupon: "कृपया एक कूपन कोड दर्ज करें",
      couponAlreadyApplied: "यह कूपन पहले से लागू है",
      couponApplied: "कूपन सफलताप��र्वक लागू किया गया!",
      couponInvalid: "कूपन नहीं मिला या इस ऑर्डर के लिए मान्य नहीं है",
      couponApplyFailed: "कूपन लागू करने में विफल",
      couponRemoveFailed: "कूपन हटाने में विफल",
      payment: "भुगतान",
      preparingPayment: "भुगतान तैयार किया जा रहा है...",
      continueToPayment: "भुगतान के लिए आगे बढ़ें",
      processing: "प्रसंस्करण हो रहा है...",
      pay: "भुगतान करें",
      paymentFailed: "भुगतान विफल",
      paymentError: "आपके भुगतान को संसाधित करते समय एक त्रुटि हुई",
      fillRequiredFields: "कृपया सभी आवश्यक संपर्क और शिपिंग फ़ील्ड भरें",
      selectShippingMethod: "कृपया एक शिपिंग विधि चुनें",
      createIntentFailed: "भुगतान इरादा बनाने में विफल",
      initPaymentFailed: "भुगतान प्रारंभ करने में विफल",
      loadSummaryFailed: "ऑर्डर सारांश लोड करने में विफल",
      invalidAddress: "यह पता अमान्य प्रतीत होता है और कोई शिपिंग विधि नहीं मिली। कृपया अपना पता जांचें और भिन्न मान आज़माएं।",
    },
    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: "ऑर्डर की पुष्टि हो गई!",
      orderConfirmation: "ऑर्डर की पुष्टि",
      missingPayment: "भुगतान जानकारी अनुपलब्ध",
      failedFinalize: "आपका ऑर्डर अंतिम रूप देने में विफल",
      loading: "ऑर्डर विवरण लोड हो रहा है...",
      notFound: "ऑर्डर नहीं मिला",
      unableToLoad: "ऑर्डर विवरण लोड करने में असमर्थ",
      thankYou: "आपकी खरीदारी के लिए धन्यवाद। आपका ऑर्डर सफलतापूर्वक संसाधित हो गया है।",
      orderSummary: "ऑर्डर सारांश",
      qty: "मात्रा:",
      each: "प्रत्येक",
      tax: "कर",
      orderStatus: "ऑर्डर स्थिति",
      payment: "भुगतान:",
      orderStatusLabel: "ऑर्डर स्थिति:",
      customerInfo: "ग्राहक जानकारी",
      name: "नाम:",
      email: "ईमेल:",
      phone: "फ़ोन:",
      shippingAddress: "शिपिंग पता",
      shippingMethod: "शिपिंग विधि:",
      emailConfirm: "आपको शीघ्र ही अपने ऑर्डर विवरण और ट्रैकिंग जानकारी के साथ एक ईमेल पुष्टिकरण प्राप्त होगा।",
      printReceipt: "रसीद प्रिंट करें",
    },
    about: {
      ourStory: "हमारी कहानी",
      heroSubtitle: "गुणवत्तापूर्ण उत्पादों और नवीन डिज़ाइन के माध्यम से असाधारण अनुभव बनाना",
      whoWeAre: "हम कौन हैं",
      whoWeAreP1:
        "उत्कृष्टता के जुनून के साथ स्थापित, हम रोज़मर्रा की ज़िंदगी को बेहतर बनाने वाले प्रीमियम उत्पाद देने में अग्रणी रहे हैं। हमारी यात्रा एक सरल विश्वास के साथ शुरू हुई: कि गुणवत्ता और नवाचार सभी के लिए सुलभ होने चाहिए।",
      whoWeAreP2:
        "हम अपने संग्रह के प्रत्येक उत्पाद को सावधानी से चुनते हैं, उन कारीगरों और निर्माताओं के साथ सीधे काम करते हैं जो शिल्प कौशल और स्थिरता के प्रति हमारी प्रतिबद्धता साझा करते हैं। हर वस्तु समर्पण, कौशल और विस्तार पर ध्यान की कहानी कहती है।",
      whoWeAreP3:
        "आज, हम दुनिया भर के ग्राहकों की सेवा करते हैं, असाधारण सेवा और समय की कसौटी पर खरे उतरने वाले उत्पादों के माध्यम से स्थायी संबंध बनाते हैं।",
      ourMission: "हमारा मिशन",
      ourMissionText:
        "टिकाऊ प्रथाओं और नैतिक निर्माण का समर्थन करते हुए असाधारण उत्पाद प्रदान करना जो हमारे ग्राहकों के जीवन को प्रेरित और बेहतर बनाते हैं।",
      ourVision: "हमारी दृष्टि",
      ourVisionText:
        "उन समझदार ग्राहकों के लिए विश्वसनीय गंतव्य बनना जो गुणवत्ता, नवाचार और जिम्मेदार व्यावसायिक प्रथाओं को महत्व देते हैं।",
      ourValues: "हमारे मूल्य",
      qualityFirst: "गुणवत्ता सर्वप्रथम",
      qualityFirstText: "हम कभी गुणवत्ता से समझौता नहीं करते, यह सुनिश्चित करते हुए कि हर उत्पाद हमारे कठोर मानकों को पूरा करे।",
      sustainability: "स्थिरता",
      sustainabilityText: "पर्यावरणीय जिम्मेदारी हमारी सोर्सिंग और व्यावसायिक प्रथाओं का मार्गदर्शन करती है।",
      customerFocus: "ग्राहक केंद्रित",
      customerFocusText: "आपकी संतुष्टि और अनुभव हमारे हर कार्य के केंद्र में है।",
      meetTeam: "हमारी टीम से मिलें",
      meetTeamText:
        "उत्साही व्यक्तियों की हमारी विविध टीम आपको सर्वश्रेष्ठ उत्पाद और सेवा देने के लिए अथक परिश्रम करती है। अनोखी वस्तुएं खोजने के लिए दुनिया भर की यात्रा करने वाले हमारे खरीदारों से लेकर आपकी संतुष्टि सुनिश्चित करने वाली हमारी ग्राहक सेवा टीम तक, हम आपके लिए यहां हैं।",
      teamQuote:
        "हमें विश्वास है कि बेहतरीन उत्पादों में प्रेरित करने, जोड़ने और जीवन बदलने की शक्ति होती है। इसीलिए हम आपको केवल सर्वश्रेष्ठ देने के लिए प्रतिबद्ध हैं।",
      teamSignature: "— टीम",
    },
    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 बजे EST तक उपलब्ध हैं।",
    },
    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: "john@example.com",
      subject: "विषय",
      subjectPlaceholder: "हम कैसे मदद कर सकते हैं?",
      message: "संदेश",
      messagePlaceholder: "अपनी पूछताछ के बारे में हमें और बताएँ...",
      sendMessage: "हमें एक संदेश भेजें",
      sending: "भेजा जा रहा है...",
      sendButton: "संदेश भेजें",
      messageSent: "संदेश सफलतापूर्वक भेजा गया!",
      thanksMessage: "हमसे संपर्क करने के लिए धन्यवाद। हम जल्द ही आपसे संपर्क करेंगे।",
      sendAnother: "एक और संदेश भेजें",
      contactInfo: "संपर्क जानकारी",
      customerService: "ग्राहक सेवा",
      businessHours: "व्यावसायिक घंटे",
      hours: {
        weekday: "सोमवार - शुक्रवार: सुबह 9:00 - शाम 6:00 EST",
        saturday: "शनिवार: सुबह 10:00 - शाम 4:00 EST",
        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: "हमारे न्यूज़लेटर की सदस्यता लें",
      newsletterSubtitle: "विशेष ऑफ़र, नई वस्तुओं और अधिक के लिए सदस्यता लें। कोई स्पैम नहीं, कभी भी सदस्यता समाप्त करें।",
      emailPlaceholder: "अपना ईमेल दर्ज करें",
      subscribe: "सदस्यता लें",
      subscribing: "सदस्यता ली जा रही है...",
      subscribed: "आपने सदस्यता ले ली है!",
      alreadySubscribed: "आप पहले से ही सदस्य हैं।",
      somethingWrong: "कुछ गलत हो गया। कृपया पुनः प्रयास करें।",
      tagline: "कल को आकार देने वाले नवीन उत्पादों के लिए आपका गंतव्य। हर खरीद में गुणवत्ता, शैली और नवाचार।",
      collections: "संग्रह",
      bundles: "बंडल",
      legal: "कानूनी",
      privacyPolicy: "गोपनीयता नीति",
      returnPolicy: "वापसी नीति",
      noPolicies: "कोई नीति उपलब्ध नहीं",
      contactInfo: "संपर्क जानकारी",
      poweredBy: "द्वारा संचालित",
      allRightsReserved: "सर्वाधिकार सुरक्षित।",
    },
    newsletter: {
      subtitle: "हमारे न्यूज़लेटर की सदस्यता लें और अपने पहले ऑर्डर पर 20% की छूट पाएं साथ ही बिक्री और नई वस्तुओं तक जल्दी पहुंच",
      subscribed: "आपने सदस्यता ले ली है! पुष्टि के लिए अपना इनबॉक्स देखें।",
      alreadySubscribed: "आप पहले से ही हमारे न्यूज़लेटर के सदस्य हैं।",
      subscribing: "सदस्यता ली जा रही है...",
      noSpam: "कोई स्पैम नहीं, कभी भी सदस्यता समाप्त करें",
    },
    common: {
      sale: "बिक्री",
      featured: "विशेष",
      inStock: "स्टॉक में",
      loading: "लोड हो रहा है...",
      error: "त्रुटि",
      success: "सफलता",
      tryAgain: "पुनः प्रयास करें",
      search: "खोजें",
      searchPlaceholder: "खोजें...",
      previous: "पिछला",
      next: "अगला",
    },
    featured: {
      title: "विशेष उत्पाद",
      subtitle: "हमारे प्रीमियम उत्पादों के चुनिंदा संग्रह की खोज करें",
      error: "विशेष उत्पाद लोड करने में विफल। कृपया पुनः प्रयास करें।",
      notFound: "इस समय कोई विशेष उत्पाद उपलब्ध नहीं है।",
    },
    restock: {
      getNotified: "सूचना प्राप्त करें",
      whenInStock: "स्टॉक में आने पर",
      emailAddress: "ईमेल पता",
      emailHint: "जब यह उत्पाद फिर से स्टॉक में आएगा तो हम आपको एक ईमेल भेजेंगे।",
      cancel: "रद्द करें",
      notifyMe: "मुझे सूचित करें",
      subscribing: "सदस्यता ले रहे हैं...",
      closeModal: "बंद करें",
      enterValidEmail: "कृपया एक मान्य ईमेल दर्ज करें",
      failedSubscribe: "सदस्यता लेने में विफल",
      defaultSuccess: "जब यह उत्पाद फिर से स्टॉक में आएगा तो आपको सूचित किया जाएगा!",
      failedSubscribeNotifications: "रीस्टॉक सूचनाओं की सदस्यता लेने में विफल",
    },
  },
  zh: {
    nav: {
      home: "首页",
      products: "产品",
      featured: "精选",
      about: "关于我们",
      contact: "联系我们",
      bundles: "套装",
      collections: "系列",
      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: "搜索分类...",
      noFound: "未找到分类",
      adjustSearch: "请尝试调整搜索",
      backToCategories: "返回分类",
      noProducts: "此分类暂无产品",
    },
    bundles: {
      title: "套装",
      subtitle: "通过我们精选的产品套装节省更多",
      noFound: "未找到套装",
      checkBackLater: "请稍后查看新套装",
      item: "件",
      items: "件",
      off: "折扣",
      notFound: "未找到套装",
      backToBundles: "返回套装",
      youSave: "您节省",
      whatsIncluded: "包含内容",
      qty: "数量：",
      quantity: "数量：",
      addedToCart: "已加入购物车！",
      addToCart: "将套装加入购物车",
      product: "产品",
      loadMore: "加载更多",
      loading: "正在加载...",
    },
    collections: {
      title: "系列",
      subtitle: "浏览我们精选的系列",
      noCollections: "暂无系列",
      checkBackLater: "请稍后查看新系列。",
      product: "个产品",
      products: "个产品",
      notFound: "未找到系列",
      doesNotExist: "您查找的系列不存在。",
      backToHome: "返回首页",
      noProducts: "暂无产品",
      noProductsDesc: "此系列暂无产品。",
      loading: "正在加载...",
    },
    cart: {
      title: "购物车",
      yourCart: "您的购物车",
      empty: "您的购物车是空的",
      continueShopping: "继续购物",
      proceedToCheckout: "去结算",
      clearCart: "清空购物车",
      addToCart: "加入购物车",
      addToCartPhysical: "加入购物车",
      addToCartDigital: "立即购买",
      addToCartService: "���约服务",
      quickAdd: "快速添加",
      outOfStock: "缺货",
      remove: "移除",
      subtotal: "小计",
      shipping: "运费",
      calculatedAtCheckout: "结算时计算",
      total: "总计",
      items: "件商品",
      addSomeProducts: "添加一些产品以开始",
      refreshError: "请刷新或重试。",
    },
    checkout: {
      checkout: "结账",
      initializing: "正在初始化结账...",
      notConfiguredTitle: "此商店尚未配置结账",
      notConfiguredDesc: "此商店尚未完成付款设置，因此结账目前不可用。请稍后再来。",
      continueShopping: "继续购物",
      configError: "配置错误",
      unableToInit: "无法初始化支付系统。请稍后重试。",
      stripeNotInitialized: "Stripe 未初始化",
      contactInformation: "联系信息",
      email: "电子邮箱",
      emailPlaceholder: "输入您的邮箱",
      shippingAddress: "收货地址",
      fullName: "全名",
      fullNamePlaceholder: "输入您的全名",
      company: "公司",
      companyPlaceholder: "公司名称",
      taxId: "税号",
      taxIdPlaceholder: "例如 PL123456789",
      address: "地址",
      addressPlaceholder: "街道地址",
      addressCont: "地址（续）",
      addressContPlaceholder: "公寓、套房等（可选）",
      postalCode: "邮政编码",
      postalCodePlaceholder: "邮政编码",
      city: "城市",
      cityPlaceholder: "城市",
      stateRegion: "州/地区",
      statePlaceholder: "州或地区",
      country: "国家",
      selectCountry: "选择国家",
      phoneNumber: "电话号码",
      phonePlaceholder: "电话号码",
      isRequired: "为必填项",
      minTwoChars: "至少需要 2 个字符",
      lettersOnly: "只能包含字母、空格、连字符、句点和撇号",
      shippingMethod: "配送方式",
      fetchingShipping: "正在获取配送选项...",
      noShippingOptions: "没有可用的配送选项",
      businessDays: "个工作日",
      orderNotes: "订单备注",
      notesOptional: "备注（可选）",
      notesPlaceholder: "为您的订单添加任何特殊说明",
      qty: "数量：",
      subtotal: "小计",
      shipping: "运费",
      discount: "折扣",
      tax: "税费",
      total: "总计",
      couponCode: "优惠券代码",
      couponPlaceholder: "输入优惠券代码",
      apply: "应用",
      applying: "正在应用...",
      remove: "移除",
      removing: "正在移除...",
      enterCoupon: "请输入优惠券代码",
      couponAlreadyApplied: "此优惠券已应用",
      couponApplied: "优惠券应用成功！",
      couponInvalid: "未找到优惠券或不适用于此订单",
      couponApplyFailed: "应用优惠券失败",
      couponRemoveFailed: "移除优惠券失败",
      payment: "付款",
      preparingPayment: "正在准备付款...",
      continueToPayment: "继续付款",
      processing: "处理中...",
      pay: "支付",
      paymentFailed: "付款失败",
      paymentError: "处理您的付款时发生错误",
      fillRequiredFields: "请填写所有必填的联系和配送字段",
      selectShippingMethod: "请选择配送方式",
      createIntentFailed: "创建付款意图失败",
      initPaymentFailed: "初始化付款失败",
      loadSummaryFailed: "加载订单摘要失败",
      invalidAddress: "此地址似乎无效，未找到配送方式。请检查您的地址并尝试不同的值。",
    },
    productDetails: {
      backToHome: "返回首页",
      notFound: "未找到产品。",
      browseAll: "浏览所有产品",
      quantity: "数量：",
      selectOptions: "选择选项",
      freeShipping: "免费配送",
      securePayment: "安全支付",
      easyReturns: "轻松退货",
      description: "描述",
      details: "详情",
      productId: "产品编号：",
      brand: "品牌：",
      category: "分类：",
      subcategory: "子分类：",
      sku: "SKU：",
      selectedVariant: "已选规格：",
      stock: "库存：",
      price: "价格：",
      inStock: "有货",
      outOfStock: "缺货",
      available: "可用",
      units: "件",
    },
    success: {
      title: "订单已确认！",
      orderConfirmation: "订单确认",
      missingPayment: "缺少付款信息",
      failedFinalize: "无法完成您的订单",
      loading: "正在加载订单详情...",
      notFound: "未找到订单",
      unableToLoad: "无法加载订单详情",
      thankYou: "感谢您的购买。您的订单已成功处理。",
      orderSummary: "订单摘要",
      qty: "数量：",
      each: "每件",
      tax: "税费",
      orderStatus: "订单状态",
      payment: "支付：",
      orderStatusLabel: "订单状态：",
      customerInfo: "客户信息",
      name: "姓名：",
      email: "邮箱：",
      phone: "电话：",
      shippingAddress: "收货地址",
      shippingMethod: "配送方式：",
      emailConfirm: "您将很快收到一封包含订单详情和跟踪信息的确认邮件。",
      printReceipt: "打印收据",
    },
    about: {
      ourStory: "我们的故事",
      heroSubtitle: "通过优质产品和创新设计打造非凡体验",
      whoWeAre: "关于我们",
      whoWeAreP1:
        "我们怀着对卓越的热情而创立，一直走在提供提升日常生活的优质产品的前沿。我们的旅程始于一个简单的信念：品质与创新应该人人可及。",
      whoWeAreP2:
        "我们精心甄选系列中的每一件产品，直接与秉持我们对工艺和可持续发展承诺的工匠和制造商合作。每一件产品都讲述着专注、技艺和对细节关注的故事。",
      whoWeAreP3: "如今，我们服务全球客户，通过卓越的服务和经得起时间考验的产品建立持久的关系。",
      ourMission: "我们的使命",
      ourMissionText: "在支持可持续实践和道德生产的同时，提供启发并提升客户生活的卓越产品。",
      ourVision: "我们的愿景",
      ourVisionText: "成为重视品质、创新和负责任商业实践的挑剔客户值得信赖的目的地。",
      ourValues: "我们的价值观",
      qualityFirst: "品质至上",
      qualityFirstText: "我们绝不在品质上妥协，确保每件产品都符合我们严格的标准。",
      sustainability: "可持续性",
      sustainabilityText: "环境责任指导着我们的采购和商业实践。",
      customerFocus: "以客户为中心",
      customerFocusText: "您的满意和体验是我们所做一切的核心。",
      meetTeam: "认识我们的团队",
      meetTeamText:
        "我们由充满热情的人组成的多元化团队不懈努力，为您带来最好的产品和服务。从环游世界寻找独特商品的采购员，到确保您满意的客户服务团队，我们随时为您服务。",
      teamQuote: "我们相信优秀的产品拥有启发、连接和改变生活的力量。这就是我们致力于只为您带来最优品质的原因。",
      teamSignature: "— 团队",
    },
    faq: {
      title: "常见问题",
      subtitle: "查找有关我们产品和服务的常见问题解答",
      stillHaveQuestions: "还有疑问？",
      cantFind: "找不到您想要的答案？我们的客户支持团队随时为您提供帮助。",
      q1: "你们接受哪些付款方式？",
      a1: "我们接受所有主要信用卡（Visa、MasterCard、American Express）、PayPal 和其他安全付款方式。所有交易均经过加密且安全。",
      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 年 12 月",
      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: "zhangsan@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: "订阅我们的电子报",
      newsletterSubtitle: "订阅以获取独家优惠、新品上市等信息。无垃圾邮件，随时取消订阅。",
      emailPlaceholder: "输入您的邮箱",
      subscribe: "订阅",
      subscribing: "正在订阅...",
      subscribed: "您已订阅！",
      alreadySubscribed: "您已经订阅了。",
      somethingWrong: "出现错误。请重试。",
      tagline: "您塑造未来的创新产品目的地。每一次购买都体现品质、风格与创新。",
      collections: "系列",
      bundles: "套装",
      legal: "法律",
      privacyPolicy: "隐私政策",
      returnPolicy: "退货政策",
      noPolicies: "暂无可用政策",
      contactInfo: "联系信息",
      poweredBy: "技术支持",
      allRightsReserved: "版权所有。",
    },
    newsletter: {
      subtitle: "订阅我们的电子报，首单立享 8 折优惠，并可抢先获取促销和新品信息",
      subscribed: "您已订阅！请查收您的收件箱以确认。",
      alreadySubscribed: "您已经订阅了我们的电子报。",
      subscribing: "正在订阅...",
      noSpam: "无垃圾邮件，随时取消订阅",
    },
    common: {
      sale: "促销",
      featured: "精选",
      inStock: "有货",
      loading: "正在加载...",
      error: "错误",
      success: "成功",
      tryAgain: "重试",
      search: "搜索",
      searchPlaceholder: "搜索...",
      previous: "上一页",
      next: "下一页",
    },
    featured: {
      title: "精选产品",
      subtitle: "探索我们精心挑选的优质产品系列",
      error: "加载精选产品失败。请重试。",
      notFound: "目前没有可用的精选产品。",
    },
    restock: {
      getNotified: "获取通知",
      whenInStock: "有货时",
      emailAddress: "电子邮箱",
      emailHint: "当此产品重新有货时，我们会向您发送电子邮件。",
      cancel: "取消",
      notifyMe: "通知我",
      subscribing: "订阅中...",
      closeModal: "关闭",
      enterValidEmail: "请输入有效的电子邮箱",
      failedSubscribe: "订阅失败",
      defaultSuccess: "当此产品重新有货时，我们会通知您！",
      failedSubscribeNotifications: "订阅补货通知失败",
    },
  },
}
[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}`)

const data = await response.json().catch(() => ({}))
    console.log(`[v0] [getCheckoutConfig] Response data:`, data)

if (!response.ok || data.status === "fail" || data.status === "error") {
      // Surface the backend's actual message (e.g. Stripe not connected)
      const message =
        (typeof data.error === "string" && data.error) ||
        (typeof data.data === "string" && data.data) ||
        data.message ||
        `HTTP ${response.status}: ${response.statusText}`

const configError: any = new Error(message)
      if (/connect Stripe|Stripe Connect/i.test(message)) {
        configError.code = "STRIPE_NOT_CONNECTED"
      }
      throw configError
    }

// 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 subscribeToNewsletter = async (email: string, source = "footer") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/newsletter/subscribers`
  console.log(`[v0] [subscribeToNewsletter] Posting to: ${url}`)

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

const data = await response.json().catch(() => ({}))
    console.log(`[v0] [subscribeToNewsletter] Response (${response.status}):`, data)

// 409 = already subscribed — surface gracefully to the caller
    if (response.status === 409) {
      const alreadyError: any = new Error(
        typeof data.data === "string" ? data.data : "This email is already subscribed to this newsletter",
      )
      alreadyError.code = "DUPLICATE_SUBSCRIBER"
      throw alreadyError
    }

if (!response.ok || data.status === "fail" || data.status === "error") {
      const message =
        (typeof data.data === "string" && data.data) ||
        data.message ||
        data.error ||
        `Failed to subscribe (${response.status})`
      throw new Error(message)
    }

return data.data ?? data
  } catch (error) {
    console.error(`[v0] [subscribeToNewsletter] 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]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 CollectionsSectionConfig {
  visible: boolean
  section: StyledElement
  header: StyledElement
  title: TextElement
  subtitle: TextElement
  layout: {
    maxCollections: number
    gridClassName: string
    skeletonCount: number
  }
  card: StyledElement
  collectionImage: StyledElement
  collectionName: StyledElement
  collectionCount: StyledElement
  viewAllButton: ButtonConfig
  viewAllMobileButton: ButtonConfig
  skeleton: StyledElement
}

export interface HomepageConfig {
  hero: HeroConfig
  categoriesSection: CategoriesSectionConfig
  collectionsSection: CollectionsSectionConfig
  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
    }
  }
}117:Te4f87,[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/apple-icon-lYEBetG37fdOzjdcCFEyPAlINNpJun.png"
[V0_FILE]png:file="public/headphones-case.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/headphones-case-vLXMGudsFQxK4VwNrp9hdCK1LA5v1V.png"
[V0_FILE]jpg:file="public/headphones-details.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/headphones-details-uxJpDBobCuQem2Z4cpOiWW0rkNcXCw.jpg"
[V0_FILE]png:file="public/headphones-side-view.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/headphones-side-view-EuGTpIOzEglbVm8gRpUKRlvx2YnIW7.png"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/icon-dark-32x32-SgKJd1G8fQFLp5XmYjl7f6m4PI56Hz.png"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/icon-light-32x32-aicFfZWa9SGMv35gqYB7fMpxzf7E8w.png"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/placeholder-logo-AdGW2JqZrhNHjo3fZzqdKl2bqGpTKc.png"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/placeholder-user-y5rQTXLA5NpJrzfGSddnFnvsupVif3.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/placeholder-QxaIfBay6h4pvBcjnNag3nmcVslIxF.jpg"
[V0_FILE]png:file="public/premium-product-showcase.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/premium-product-showcase-L0znaOYaloBUGkcgKmq66NdZcAd3mj.png"
[V0_FILE]png:file="public/premium-wireless-headphones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/SearchAgora-agora-builder-template-233b690bc984025ca26d0c1dec05dabc658dd890/public/premium-wireless-headphones-td2UiFCxFJcjQ82gaN4fA1b8pSM5gZ.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"
"use client"

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

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

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">{t("about.ourStory")}</h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto text-balance">{t("about.heroSubtitle")}</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">{t("about.whoWeAre")}</h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed text-justify">
                <p>{t("about.whoWeAreP1")}</p>
                <p>{t("about.whoWeAreP2")}</p>
                <p>{t("about.whoWeAreP3")}</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">{t("about.ourMission")}</h3>
                  <p className="text-muted-foreground text-justify">{t("about.ourMissionText")}</p>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-foreground mb-2">{t("about.ourVision")}</h3>
                  <p className="text-muted-foreground text-justify">{t("about.ourVisionText")}</p>
                </div>
              </div>
            </div>
          </div>

{/* Values Section */}
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-foreground text-center mb-12">{t("about.ourValues")}</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" aria-hidden="true">
                    ✨
                  </span>
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-3">{t("about.qualityFirst")}</h3>
                <p className="text-muted-foreground text-justify">{t("about.qualityFirstText")}</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" aria-hidden="true">
                    🌱
                  </span>
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-3">{t("about.sustainability")}</h3>
                <p className="text-muted-foreground text-justify">{t("about.sustainabilityText")}</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" aria-hidden="true">
                    🤝
                  </span>
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-3">{t("about.customerFocus")}</h3>
                <p className="text-muted-foreground text-justify">{t("about.customerFocusText")}</p>
              </div>
            </div>
          </div>

{/* Team Section */}
          <div className="text-center">
            <h2 className="text-3xl font-bold text-foreground mb-6">{t("about.meetTeam")}</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto mb-8 text-justify">{t("about.meetTeamText")}</p>
            <div className="bg-muted rounded-lg p-8">
              <p className="text-foreground font-medium text-justify">{`"${t("about.teamQuote")}"`}</p>
              <p className="text-muted-foreground mt-4">{t("about.teamSignature")}</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">{t("bundles.notFound")}</h1>
          <Button asChild>
            <Link href="/bundles">
              <ArrowLeft className="mr-2 h-4 w-4" />
              {t("bundles.backToBundles")}
            </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" />
            {t("bundles.backToBundles")}
          </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}% {t("bundles.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">
                    {t("bundles.youSave")} ${pricing.discountAmount.toFixed(2)}!
                  </p>
                )}
              </div>
            )}

{/* Bundle Items */}
            <div className="space-y-4">
              <h3 className="text-lg font-semibold text-foreground">
                {t("bundles.whatsIncluded")} ({items.length} {items.length === 1 ? t("bundles.item") : t("bundles.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 || t("bundles.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">
                          {t("bundles.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">{t("bundles.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" />
                    {t("bundles.addedToCart")}
                  </>
                ) : (
                  <>
                    <ShoppingCart className="mr-2 h-5 w-5" />
                    {t("bundles.addToCart")} - ${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">{t("bundles.title")}</h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            {t("bundles.subtitle")}
          </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">{t("bundles.noFound")}</h3>
            <p className="text-muted-foreground">{t("bundles.checkBackLater")}</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}% {t("bundles.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 ? t("bundles.item") : t("bundles.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 ? t("bundles.loading") : t("bundles.loadMore")}
                </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">{t("cart.addSomeProducts")}</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}. {t("cart.refreshError")}
            </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 { useLanguage } from '@/contexts/language-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'
import { ShoppingBag } from 'lucide-react'

export default function CheckoutPage() {
  const { state } = useCart()
  const { t } = useLanguage()
  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)
  const [notConfigured, setNotConfigured] = useState(false)

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)
        setNotConfigured(false)

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: any) {
        console.error('[v0] Error initializing Stripe:', err)
        const message = err instanceof Error ? err.message : t('checkout.unableToInit')
        // Store hasn't connected Stripe yet — checkout is unavailable for this store
        if (err?.code === 'STRIPE_NOT_CONNECTED' || /connect Stripe|Stripe Connect|publishable key not found/i.test(message)) {
          setNotConfigured(true)
        } else {
          setError(message)
        }
      } 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">{t('checkout.initializing')}</p>
        </div>
      </div>
    )
  }

if (notConfigured) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center px-4">
        <div className="text-center max-w-md">
          <div className="mx-auto mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
            <ShoppingBag className="h-7 w-7 text-muted-foreground" />
          </div>
          <h1 className="text-2xl font-bold text-foreground mb-3">{t('checkout.notConfiguredTitle')}</h1>
          <p className="text-muted-foreground mb-8">{t('checkout.notConfiguredDesc')}</p>
          <Link
            href="/"
            className="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
          >
            {t('checkout.continueShopping')}
          </Link>
        </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">{t('checkout.configError')}</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">{t('checkout.configError')}</h1>
          <p className="text-muted-foreground">{t('checkout.unableToInit')}</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">{t('checkout.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">{t("collections.notFound")}</h1>
          <p className="text-muted-foreground mb-8">{t("collections.doesNotExist")}</p>
          <Button asChild>
            <Link href="/">
              <ArrowLeft className="mr-2 h-4 w-4" />
              {t("collections.backToHome")}
            </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">{t("collections.noProducts")}</h3>
            <p className="text-muted-foreground">{t("collections.noProductsDesc")}</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 ? t("collections.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">{t("collections.title")}</h1>
            <p className="text-xl text-muted-foreground">{t("collections.subtitle")}</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">{t("collections.title")}</h1>
          <p className="text-xl text-muted-foreground">{t("collections.subtitle")}</p>
        </div>

{collections.length === 0 ? (
          <div className="text-center py-16">
            <h3 className="text-2xl font-semibold mb-2 text-foreground">{t("collections.noCollections")}</h3>
            <p className="text-muted-foreground">{t("collections.checkBackLater")}</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 ? t("collections.product") : t("collections.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>