[V0_FILE]typescriptreact:file="app/products/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="contexts/cart-context.tsx" "use client" import type React from "react" import { createContext, useContext, useReducer, useCallback } from "react" import { checkout } from "@/services/api" export interface CartItem { id: string // Product ID variantId?: string // Product Variant ID name: string price: number originalPrice?: number // Original price before discount isOnSale?: boolean // Whether the item is on sale images: string[] quantity: number description: string } 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 item id | { type: "UPDATE_QUANTITY"; payload: { id: 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": { const existingItem = state.items.find( (item) => item.id === action.payload.id && item.variantId === action.payload.variantId, ) let newItems: CartItem[] if (existingItem) { newItems = state.items.map((item) => item.id === action.payload.id && item.variantId === action.payload.variantId ? { ...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": { const newItems = state.items.filter((item) => item.id !== 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 { id, quantity } = action.payload const newItems = state.items .map((item) => (item.id === id ? { ...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 addItem: (item: CartItem) => Promise removeItem: (id: string) => Promise updateItemQuantity: (id: string, quantity: number) => Promise clearCart: () => Promise proceedToCheckout: () => Promise } | null>(null) export function CartProvider({ children }: { children: React.ReactNode }) { const [state, dispatch] = useReducer(cartReducer, initialState) const addItem = useCallback(async (item: CartItem) => { dispatch({ type: "ADD_ITEM", payload: item }) dispatch({ type: "OPEN_CART" }) }, []) const removeItem = useCallback(async (id: string) => { dispatch({ type: "REMOVE_ITEM", payload: id }) }, []) const updateItemQuantity = useCallback(async (id: string, quantity: number) => { dispatch({ type: "UPDATE_QUANTITY", payload: { id, 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 const cartItems = state.items.map((item) => ({ id: item.id, variantId: item.variantId, 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]) return ( {children} ) } export function useCart() { const context = useContext(CartContext) if (!context) { throw new Error("useCart must be used within a CartProvider") } return context } [V0_FILE]typescript:file="lib/store-name.ts" export function getStoreName(): string { return "Agora Builder Template" } [V0_FILE]typescriptreact:file="app/success/loading.tsx" isFixed="true" export default function Loading() { return null } [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 (

Shop by Category

Explore our curated collections designed for every lifestyle

{categories.map((category) => { const IconComponent = category.icon return (

{category.title}

) })}

) } [V0_FILE]png:file="public/premium-product-showcase.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-product-showcase-0PCHWwfttRGtSlZMLV7HUZwsBUXWyW.png" [V0_FILE]png:file="public/premium-wireless-headphones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-wireless-headphones-KwpZIhakk6ZcHhEcISKm1Dfvv9TFpI.png" [V0_FILE]png:file="public/headphones-side-view.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/headphones-side-view-JZg2CtmlBHTV3ug0DaqDCYrGaOMocV.png" [V0_FILE]png:file="public/headphones-case.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/headphones-case-XYIeexipi9Qqny3XmdpVk4S0hC4abh.png" [V0_FILE]jpg:file="public/headphones-details.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/headphones-details-NhY0jCp7ISBOf1yVJru7O62vt6s9Ox.jpg" [V0_FILE]typescriptreact:file="app/terms/page.tsx" import type { Metadata } from "next" export const metadata: Metadata = { title: "Terms of Service - Agora", description: "Read our terms of service and understand your rights and responsibilities when using our platform.", } export default function TermsPage() { return (

{/* Header */}

Terms of Service

Please read these terms carefully before using our services

Last updated: December 2024

{/* Content */}

1. Acceptance of Terms

By accessing and using Agora's website and services, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.

These Terms of Service constitute a legally binding agreement between you and Agora. We reserve the right to update these terms at any time without prior notice.

2. Use License

Permission is granted to temporarily download one copy of the materials on Agora's website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:

modify or copy the materials
use the materials for any commercial purpose or for any public display
attempt to reverse engineer any software contained on the website
remove any copyright or other proprietary notations from the materials

3. Product Information and Pricing

We strive to provide accurate product descriptions and pricing information. However, we do not warrant that product descriptions or other content is accurate, complete, reliable, current, or error-free.

Prices for our products are subject to change without notice. We reserve the right at any time to modify or discontinue any product without notice.

4. Orders and Payment

By placing an order, you represent that you are at least 18 years old and legally capable of entering into binding contracts. All orders are subject to acceptance by us.

We accept various forms of payment as indicated on our website. Payment must be received by us before we ship any products to you.

5. Shipping and Delivery

We will arrange for shipment of products to you. You will be responsible for shipping and handling charges as indicated when you place your order.

Risk of loss and title for products pass to you upon delivery to the carrier. Delivery dates are estimates only and we are not liable for any delays.

6. Returns and Refunds

We offer a 30-day return policy for most items. Products must be returned in their original condition with all tags and packaging intact.

Refunds will be processed within 5-10 business days after we receive your returned item. Original shipping costs are non-refundable.

7. Privacy Policy

Your privacy is important to us. We collect and use your personal information in accordance with our Privacy Policy, which is incorporated into these Terms by reference.

8. Limitation of Liability

In no event shall Agora or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on our website.

9. Governing Law

These terms and conditions are governed by and construed in accordance with the laws of the State of New York and you irrevocably submit to the exclusive jurisdiction of the courts in that state.

10. Contact Information

If you have any questions about these Terms of Service, please contact us at:

Agora Customer Service

Email: legal@agora.com

Phone: 1-800-AGORA-01

Address: 123 Commerce Street, Suite 100, New York, NY 10001

) } [V0_FILE]typescript:file="types/product.ts" isQuickEdit="true" 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 } export interface PriceHistory { price: number date: Date } export interface Product { _id: string id?: string name: string description: string brand: string price: number 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 keywords?: string[] 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 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 } } } [V0_FILE]typescriptreact:file="app/categories/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/categories/[id]/page.tsx" import type { Metadata } from "next" import { getCategoryByIdFromList } from "@/services/api" 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} - Agora Builder Template`, description: category.metaDescription || `Browse products in ${category.name} category`, } } } catch (error) { console.error("Failed to fetch category metadata:", error) } return { title: "Category - Agora Builder Template", description: "Browse products by category", } } export default function CategoryProductsPage({ params }: { params: { id: string } }) { return } [V0_FILE]typescriptreact:file="app/featured/page.tsx" import { FeaturedProductsPageClient } from "@/components/featured-products-page-client" export default function FeaturedProductsPage() { return } [V0_FILE]typescriptreact:file="app/featured/loading.tsx" export default function Loading() { return (

Loading featured products...

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" import type { Metadata } from "next" export const metadata: Metadata = { title: "About Us - Agora", description: "Learn about our story, mission, and commitment to providing exceptional products and service.", } export default function AboutPage() { return (

{/* Hero Section */}

Our Story

Building exceptional experiences through quality products and innovative design

{/* Main Content */}

Who We Are

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

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

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

Our Mission

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

Our Vision

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

{/* Values Section */}

Our Values

✨

Quality First

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

🌱

Sustainability

Environmental responsibility guides our sourcing and business practices.

🤝

Customer Focus

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

{/* Team Section */}

Meet Our Team

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

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

— The Agora Team

) } [V0_FILE]typescriptreact:file="components/footer.tsx" "use client" import { Mail, Phone, MapPin } from "lucide-react" import { getStoreName } from "@/lib/store-name" import { useLanguage } from "@/contexts/language-context" export function Footer() { const storeName = getStoreName() const { t } = useLanguage() return ( ) } [V0_FILE]typescriptreact:file="app/products/page.tsx" isQuickEdit="true" "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" function ProductsPageContent() { const searchParams = useSearchParams() const router = useRouter() const currentTab = searchParams.get("tab") || "products" const handleTabChange = (value: string) => { const params = new URLSearchParams(searchParams.toString()) params.set("tab", value) router.push(`/products?${params.toString()}`) } return (

All Products Categories

) } export default function ProductsPage() { return ( Loading...}> ) } [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 { Footer } from "@/components/footer" export default function Home() { return (

) } [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 ( ) } return ( ) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Search, ShoppingCart, Menu } from "lucide-react" import { useState } from "react" import { useCart } from "@/contexts/cart-context" import { getStoreName } from "@/lib/store-name" import { useRouter } from "next/navigation" import { useLanguage } from "@/contexts/language-context" export function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) const { state } = useCart() const router = useRouter() const { t } = useLanguage() const storeName = getStoreName() const handleCartClick = () => { router.push("/cart") } return ( ) } [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(undefined) export function CustomThemeProvider({ children }: { children: React.ReactNode }) { const [theme, setThemeState] = useState("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 {children} } export function useCustomTheme() { const context = useContext(ThemeContext) if (context === undefined) { throw new Error("useCustomTheme must be used within CustomThemeProvider") } return context } [V0_FILE]javascript:file="postcss.config.js" /** @type {import('postcss-load-config').Config} */ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { /* Removed Geist font references that don't exist */ --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]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": false, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import "./globals.css" import { Navbar } from "@/components/navbar" import { CartProvider } from "@/contexts/cart-context" import { CartDrawer } from "@/components/cart-drawer" import { getStoreName } from "@/lib/store-name" import { CustomThemeProvider } from "@/components/custom-theme-provider" import { LanguageProvider } from "@/contexts/language-context" // Generate dynamic metadata based on store name const storeName = getStoreName() export const metadata: Metadata = { title: `${storeName} - Modern E-commerce Store`, description: `Discover amazing products at ${storeName}. Quality, style, and innovation in every purchase.`, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/categories-section.tsx" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import Link from "next/link" 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" export function CategoriesSection() { const [categories, setCategories] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const fetchCategories = async () => { try { const response = await getStoreCategories(1, 20) 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(sortedCategories.slice(0, 4)) } } catch (error) { console.error("Failed to fetch categories:", error) } finally { setLoading(false) } } fetchCategories() }, []) if (loading) { return (

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

))}

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

Shop by Category

Browse our collection by category

{categories.map((category) => (

{category.name}

))}

) } [V0_FILE]json:file="package.json" { "name": "modern-storefront", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "16.0.10", "react": "19.0.1", "react-dom": "19.0.1", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.544.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7", "next-themes": "0.4.6", "@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", "recharts": "^2.10.3", "cmdk": "^0.2.0", "vaul": "^0.9.0", "input-otp": "^1.2.4", "react-hook-form": "^7.49.2", "@hookform/resolvers": "^3.3.4", "sonner": "^1.3.1", "embla-carousel-react": "^8.0.0", "react-resizable-panels": "^1.0.9", "@react-oauth/google": "^0.12.1" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "postcss": "^8", "tailwindcss": "^3.4.17" } } [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 ( ) } [V0_FILE]javascript:file="next.config.mjs" isFixed="true" isQuickEdit="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, experimental: { optimizeCss: false, }, } export default nextConfig [V0_FILE]typescriptreact:file="app/categories/page.tsx" isQuickEdit="true" "use client" import type React from "react" import { useEffect, useState } from "react" import Link from "next/link" 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.name}

))}

{hasMore ? (

) : null} )}

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { 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="components/categories-tab-content.tsx" isQuickEdit="true"
"use client"

import type React from "react"
import { useEffect, useState } from "react"
import Link from "next/link"
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, 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>
      <div className="mb-12 text-center">
        <h1 className="text-4xl md:text-5xl font-bold text-black dark:text-white mb-4">{t("categories.title")}</h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 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-gray-400" />
            <Input
              type="text"
              placeholder={t("categories.searchPlaceholder")}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 dark:bg-gray-800 dark:border-gray-600 dark:text-white"
            />
          </div>
          <Button type="submit" className="dark:bg-white dark:text-black dark:hover:bg-gray-100">
            {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 dark:bg-gray-800 dark:border-gray-700">
              <CardContent className="p-6">
                <div className="h-5 bg-gray-200 dark:bg-gray-700 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 dark:text-white">{t("categories.noFound")}</h3>
          <p className="text-gray-600 dark:text-gray-400">{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}`}>
                <Card className="group hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full border-2 hover:border-primary/20 dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-600">
                  <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 dark:text-white dark:group-hover:text-gray-300">
                      {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] dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700"
              >
                {t("categories.loadMore")}
              </Button>
            </div>
          ) : null}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter.tsx"
"use client"

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

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

return (
    <section className="py-20 bg-black">
      <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-white/10 rounded-full p-4">
              <Mail className="w-12 h-12 text-white" />
            </div>
          </div>

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

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

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

<p className="text-white/60 text-sm mt-4">No spam, unsubscribe at any time</p>
        </div>
      </div>
    </section>
  )
}
[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 FAQClient from "./faq-client"

export const metadata: Metadata = {
  title: "FAQ - Agora Builder Template",
  description: "Frequently asked questions about our products and services",
}

export default function FAQPage() {
  return <FAQClient />
}
[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 } from "@/contexts/cart-context"
import { Plus, Minus, ShoppingBag, Loader2 } from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/contexts/language-context"

export default function CartPage() {
  const { state, removeItem, updateItemQuantity, clearCart, proceedToCheckout } = useCart()
  const { t, formatPrice } = useLanguage()

const handleUpdateQuantity = (id: string, quantity: number) => {
    updateItemQuantity(id, quantity)
  }

const handleRemoveItem = (id: string) => {
    removeItem(id)
  }

const handleCheckout = () => {
    proceedToCheckout()
  }

if (state.items.length === 0 && !state.loading) {
    return (
      <div className="min-h-screen bg-white dark:bg-gray-900 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-gray-300 dark:text-gray-600 mx-auto mb-6" />
            <h1 className="text-3xl font-bold text-black dark:text-white mb-4">{t("cart.empty")}</h1>
            <p className="text-gray-600 dark:text-gray-400 mb-8">Add some products to get started</p>
            <Link href="/products">
              <Button className="bg-black dark:bg-white text-white dark:text-black hover:bg-black/90 dark:hover:bg-gray-100">
                {t("cart.continueShopping")}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-white dark:bg-gray-900 py-8">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl font-bold text-black dark:text-white mb-8">{t("cart.title")}</h1>

{state.error && (
            <div className="p-4 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-sm rounded-lg mb-6">
              {t("common.error")}: {state.error}. Please refresh or try again.
            </div>
          )}

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2">
              <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
                <CardContent className="p-6">
                  {state.loading && (
                    <div className="flex items-center justify-center py-8">
                      <Loader2 className="w-8 h-8 animate-spin text-black dark:text-white" />
                    </div>
                  )}

<div className="space-y-6">
                    {state.items.map((item) => (
                      <div
                        key={`${item.id}-${item.variantId || "default"}`}
                        className="flex items-center gap-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800"
                      >
                        <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-black dark:text-white">{item.name}</h3>
                          <p className="text-gray-600 dark:text-gray-400 text-sm mb-2">{item.description}</p>
                          <div className="flex items-center gap-2">
                            <p className="text-lg font-medium text-black dark:text-white">{formatPrice(item.price)}</p>
                            {item.isOnSale && item.originalPrice && (
                              <span className="text-sm text-gray-500 dark:text-gray-400 line-through">
                                {formatPrice(item.originalPrice)}
                              </span>
                            )}
                          </div>
                        </div>

<div className="flex items-center gap-3">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}
                            className="w-8 h-8 p-0 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700"
                            disabled={state.loading}
                          >
                            <Minus className="w-4 h-4 text-black dark:text-white" />
                          </Button>

<span className="w-12 text-center font-medium text-lg text-black dark:text-white">
                            {item.quantity}
                          </span>

<Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}
                            className="w-8 h-8 p-0 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700"
                            disabled={state.loading}
                          >
                            <Plus className="w-4 h-4 text-black dark:text-white" />
                          </Button>
                        </div>

<div className="text-right">
                          <p className="font-semibold text-lg text-black dark:text-white mb-2">
                            {formatPrice(item.price * item.quantity)}
                          </p>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleRemoveItem(item.id)}
                            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-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
                <CardContent className="p-6">
                  <h2 className="text-xl font-semibold text-black dark:text-white mb-4">{t("cart.orderSummary")}</h2>

<div className="space-y-3 mb-6">
                    <div className="flex justify-between">
                      <span className="text-gray-600 dark:text-gray-400">
                        {t("cart.subtotal")} ({state.itemCount} {t("cart.items")})
                      </span>
                      <span className="font-medium text-black dark:text-white">{formatPrice(state.total)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600 dark:text-gray-400">{t("cart.shipping")}</span>
                      <span className="font-medium text-black dark:text-white">{t("cart.calculatedAtCheckout")}</span>
                    </div>
                    <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
                      <div className="flex justify-between text-lg font-semibold">
                        <span className="text-black dark:text-white">{t("cart.total")}</span>
                        <span className="text-black dark:text-white">{formatPrice(state.total)}</span>
                      </div>
                    </div>
                  </div>

<div className="space-y-3">
                    <Button
                      className="w-full bg-black dark:bg-white text-white dark:text-black hover:bg-black/90 dark:hover:bg-gray-100"
                      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-gray-300 dark:border-gray-600 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 text-black dark:text-white"
                        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="components/cart-drawer.tsx"
"use client"

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

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

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

const handleCheckout = () => {
    proceedToCheckout()
  }

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-white 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-gray-200">
          <h2 className="text-xl font-semibold text-black">{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-white/80 flex items-center justify-center z-10">
            <Loader2 className="w-8 h-8 animate-spin text-black" />
          </div>
        )}
        {state.error && (
          <div className="p-4 bg-red-100 text-red-700 text-sm text-center">
            {t("common.error")}: {state.error}. Please refresh or try again.
          </div>
        )}

{/* Cart Items */}
        <div className="flex-1 overflow-y-auto p-6">
          {state.items.length === 0 && !state.loading ? (
            <div className="flex flex-col items-center justify-center h-full text-center">
              <ShoppingBag className="w-16 h-16 text-gray-300 mb-4" />
              <h3 className="text-lg font-medium text-black mb-2">{t("cart.empty")}</h3>
              <p className="text-gray-500 mb-6">Add some products to get started</p>
              <Button onClick={closeCart} className="bg-black text-white hover:bg-black/90">
                {t("cart.continueShopping")}
              </Button>
            </div>
          ) : (
            <div className="space-y-4">
              {state.items.map((item) => (
                <div
                  key={`${item.id}-${item.variantId || "default"}`}
                  className="flex items-center gap-4 p-4 border border-gray-200 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-black">{item.name}</h3>
                    <div className="flex items-center gap-2">
                      <p className="text-sm text-gray-500">{formatPrice(item.price)}</p>
                      {item.isOnSale && item.originalPrice && (
                        <span className="text-xs text-gray-400 line-through">{formatPrice(item.originalPrice)}</span>
                      )}
                    </div>

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

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

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

<div className="text-right">
                    <p className="font-medium text-black">{formatPrice(item.price * item.quantity)}</p>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => removeItem(item.id)}
                      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-gray-200 p-6 space-y-4">
            <div className="flex justify-between items-center text-lg font-semibold">
              <span>{t("cart.total")}:</span>
              <span>{formatPrice(state.total)}</span>
            </div>

<div className="space-y-2">
              <Button
                className="w-full bg-black text-white hover:bg-black/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-gray-300 bg-transparent"
                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/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"

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

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

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

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

try {
      const selectedVariant = product.variants?.[0] || null
      const variantIsOnSale = selectedVariant?.isOnSale === true
      const variantOriginalPrice = selectedVariant?.originalPrice
      const variantPrice = selectedVariant?.price || product.price
      const productOriginalPrice = product.discountPercentage ? product.price / (1 - product.discountPercentage / 100) : undefined
      
      await addItem({
        id: product._id,
        variantId: selectedVariant?.id,
        quantity: 1,
        price: variantPrice,
        originalPrice: selectedVariant ? (variantIsOnSale ? variantOriginalPrice : undefined) : productOriginalPrice,
        isOnSale: selectedVariant ? variantIsOnSale : !!(product.discountPercentage && product.discountPercentage > 0),
        name: product.name,
        images: product.images,
        description: product.description,
      })
    } finally {
      setAddingProducts((prev) => {
        const newSet = new Set(prev)
        newSet.delete(product._id)
        return newSet
      })
    }
  }

if (loading) {
    return (
      <div className="text-center py-20">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-black dark:border-white mx-auto mb-4"></div>
        <p className="text-gray-600 dark:text-gray-400">{t("products.loading")}</p>
      </div>
    )
  }

if (error) {
    return (
      <div className="text-center py-20">
        <p className="text-gray-600 dark:text-gray-400 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-black dark:text-white mb-4">{t("products.title")}</h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">{t("products.subtitle")}</p>
      </div>

{products.length === 0 ? (
        <div className="text-center py-20">
          <p className="text-gray-600 dark:text-gray-400 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) => {
            const firstVariant = product.variants?.[0]
            // Check if variant is on sale - only show discount when isOnSale is true
            const variantIsOnSale = firstVariant?.isOnSale === true
            const variantOriginalPrice = firstVariant?.originalPrice
            const variantPrice = firstVariant?.price || product.price
            
            // For variants: only show discount percentage if isOnSale is true AND originalPrice exists
            // For products without variants: use discountPercentage
            const hasDiscountPercent = firstVariant
              ? (variantIsOnSale && variantOriginalPrice && variantOriginalPrice > variantPrice)
              : !!(product.discountPercentage && product.discountPercentage > 0)
            
            // Show sale badge if variant isOnSale OR if product has discount percentage
            const showSaleBadge = variantIsOnSale || !!(product.discountPercentage && product.discountPercentage > 0)
            
            const displayPrice = variantPrice
            const originalPrice = firstVariant
              ? (variantIsOnSale ? variantOriginalPrice : null)
              : (product.discountPercentage ? product.price / (1 - product.discountPercentage / 100) : null)
            const discountPercent = firstVariant
              ? (variantIsOnSale && variantOriginalPrice ? Math.round(((variantOriginalPrice - variantPrice) / variantOriginalPrice) * 100) : 0)
              : (product.discountPercentage || 0)
            
            const isAddingThisProduct = addingProducts.has(product._id)
            const isInStock = firstVariant
              ? firstVariant.isInStock !== false && (firstVariant.quantity === undefined || firstVariant.quantity > 0)
              : product.available

const hasDiscount = hasDiscountPercent; // Declare hasDiscount variable

return (
              <div key={product._id} className="h-full">
                <Card className="group overflow-hidden hover:shadow-lg transition-all duration-300 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 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>

{showSaleBadge && (
                        <Badge className="absolute top-4 left-4 bg-red-600 dark:bg-red-500 text-white">
                          {hasDiscountPercent && discountPercent > 0 ? `${discountPercent}% OFF` : t("common.sale")}
                        </Badge>
                      )}

{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 dark:bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                        <Button
                          type="button"
                          className="bg-white dark:bg-gray-800 text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600"
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={!isInStock || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : (
                            <ShoppingCart className="w-4 h-4 mr-2" />
                          )}
                          {isInStock ? t("cart.quickAdd") : 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-black dark:text-white mb-2 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors cursor-pointer line-clamp-2 h-14 leading-7">
                          {product.name}
                        </h3>
                      </Link>

<p className="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2 h-10 leading-5">
                        {product.description}
                      </p>

<div className="flex items-center gap-2 mb-4 h-8">
                        <span className="text-2xl font-bold text-black dark:text-white">
                          {formatPrice(displayPrice)}
                        </span>
                        {hasDiscountPercent && originalPrice && (
                          <>
                            <span className="text-lg text-gray-500 dark:text-gray-400 line-through">
                              {formatPrice(originalPrice)}
                            </span>
                            <Badge
                              variant="secondary"
                              className="bg-gray-100 dark:bg-gray-700 text-black dark:text-white text-xs"
                            >
                              {discountPercent}% OFF
                            </Badge>
                          </>
                        )}
                      </div>

<div className="mt-auto">
                        <Button
                          type="button"
                          className="w-full bg-black dark:bg-white text-white dark:text-black hover:bg-black/90 dark:hover:bg-gray-100"
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={!isInStock || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : (
                            t("cart.addToCart")
                          )}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </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 { useState, useEffect } from "react"
import { getFeaturedProducts, getStoreProducts } from "@/services/api"
import { useLanguage } from "@/contexts/language-context"

export function FeaturedProducts() {
  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 } = useLanguage()

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

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

if (loading) {
    return (
      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-black dark:border-white mx-auto mb-4"></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="py-20 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black dark:text-white mb-4">{t("featured.title")}</h2>
            <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
              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="py-20 bg-white dark:bg-gray-900">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-black dark:text-white mb-4">{t("featured.title")}</h2>
          <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Handpicked items from our store</p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {products.map((product) => {
            const firstVariant = product.variants?.[0]
            // Check if variant is on sale - only show discount when isOnSale is true
            const variantIsOnSale = firstVariant?.isOnSale === true
            const variantOriginalPrice = firstVariant?.originalPrice
            const variantPrice = firstVariant?.price || product.price
            
            // For variants: only show discount percentage if isOnSale is true AND originalPrice exists
            // For products without variants: use discountPercentage
            const hasDiscountPercent = firstVariant
              ? (variantIsOnSale && variantOriginalPrice && variantOriginalPrice > variantPrice)
              : Boolean(product.discountPercentage && product.discountPercentage > 0)
            
            // Show sale badge if variant isOnSale OR if product has discount percentage
            const showSaleBadge = variantIsOnSale || Boolean(product.discountPercentage && product.discountPercentage > 0)
            
            const displayPrice = variantPrice
            const originalPrice = firstVariant
              ? (variantIsOnSale ? variantOriginalPrice : null)
              : (product.discountPercentage ? product.price / (1 - product.discountPercentage / 100) : null)
            const discountPercent = firstVariant
              ? (variantIsOnSale && variantOriginalPrice ? Math.round(((variantOriginalPrice - variantPrice) / variantOriginalPrice) * 100) : 0)
              : (product.discountPercentage || 0)
            
            const isAddingThisProduct = addingProducts.has(product._id)
            const isInStock = firstVariant
              ? firstVariant.isInStock !== false && (firstVariant.quantity === undefined || firstVariant.quantity > 0)
              : product.available

const hasDiscount = hasDiscountPercent; // Declare hasDiscount variable

return (
              <div key={product._id} className="h-full">
                <Card className="group overflow-hidden hover:shadow-lg transition-all duration-300 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 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?height=300&width=300"}
                          alt={product.name}
                          className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer"
                        />
                      </Link>

{showSaleBadge ? (
                        <Badge className="absolute top-4 left-4 bg-red-600 text-white">
                          {hasDiscountPercent && discountPercent > 0 ? `${discountPercent}% OFF` : t("common.sale")}
                        </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-white dark:bg-gray-700 text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600"
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={!isInStock || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : (
                            <ShoppingCart className="w-4 h-4 mr-2" />
                          )}
                          {isInStock ? t("cart.quickAdd") : 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-black dark:text-white mb-3 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors cursor-pointer line-clamp-2 h-14 leading-7">
                          {product.name}
                        </h3>
                      </Link>

<div className="flex items-center gap-2 mb-4 h-8">
                        <span className="text-2xl font-bold text-black dark:text-white">
                          {formatPrice(displayPrice)}
                        </span>
                        {hasDiscountPercent && originalPrice ? (
                          <>
                            <span className="text-lg text-gray-500 dark:text-gray-400 line-through">
                              {formatPrice(originalPrice)}
                            </span>
                            <Badge
                              variant="secondary"
                              className="bg-gray-100 dark:bg-gray-700 text-black dark:text-white text-xs"
                            >
                              {discountPercent}% OFF
                            </Badge>
                          </>
                        ) : null}
                      </div>

<div className="mt-auto">
                        <Button
                          type="button"
                          className="w-full bg-black dark:bg-white text-white dark:text-black hover:bg-black/90 dark:hover:bg-gray-200"
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={!isInStock || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : (
                            t("cart.addToCart")
                          )}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )
          })}
        </div>

<div className="text-center mt-12">
          <div className="flex flex-col md:flex-row gap-4 justify-center items-center">
            <Link href="/featured" className="w-full md:w-auto">
              <Button
                size="lg"
                variant="outline"
                className="w-full text-lg px-8 py-6 border-black dark:border-white text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black bg-transparent"
              >
                {t("products.viewAllFeatured")}
              </Button>
            </Link>
            <Link href="/products" className="w-full md:w-auto">
              <Button
                size="lg"
                variant="outline"
                className="w-full text-lg px-8 py-6 border-black dark:border-white text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black bg-transparent"
              >
                {t("products.viewAllProducts")}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/variant-selector.tsx" isQuickEdit="true"
"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)
      )
    })
  }

const currentPrice = 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-black dark:text-white capitalize">{optionName}</h3>
            {selectedVariants[optionName] && (
              <span className="text-sm text-gray-600 dark:text-gray-400">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)

return (
                <Button
                  key={value}
                  type="button"
                  variant={isSelected ? "default" : "outline"}
                  className={`
                    ${
                      isSelected
                        ? "bg-black dark:bg-white text-white dark:text-black border-black dark:border-white"
                        : "bg-white dark:bg-gray-800 text-black dark:text-white border-gray-300 dark:border-gray-600 hover:border-black dark:hover:border-white"
                    }
                    ${!isAvailable ? "opacity-50 cursor-not-allowed line-through" : ""}
                  `}
                  onClick={() => isAvailable && onVariantChange(optionName, value)}
                  disabled={!isAvailable}
                >
                  {value}
                  {isSelected && <span className="ml-2">✓</span>}
                </Button>
              )
            })}
          </div>
        </div>
      ))}

{/* Price and Stock Display */}
      <div className="space-y-2 pt-4 border-t border-gray-200 dark:border-gray-700">
        <div className="flex items-center justify-between">
          <span className="font-semibold text-lg text-black dark:text-white">
            {t("productDetails.price") || "Price"}:
          </span>
          <span className="text-2xl font-bold text-black dark:text-white">{priceFormatter(currentPrice)}</span>
        </div>

<div className="flex items-center justify-between">
          <span className="font-semibold text-lg text-black dark:text-white">
            {t("productDetails.stock") || "Stock"}:
          </span>
          <Badge
            variant={isInStock ? "default" : "destructive"}
            className={isInStock ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200" : ""}
          >
            {isInStock ? t("common.inStock") : t("cart.outOfStock")}
          </Badge>
        </div>

{selectedVariant?.quantity !== undefined && (
          <div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>{t("products.available")}:</span>
            <span>{selectedVariant.quantity} units</span>
          </div>
        )}

{selectedVariant?.id && (
          <div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>{t("productDetails.sku")}:</span>
            <span className="font-mono text-xs">{selectedVariant.id}</span>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="services/api.ts"
const BASE_URL = "https://stagingserver.searchagora.com"
const STORE_ID = "placeholder" // placeholder for now, can be any store id
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
  }
}

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)
    return data
  } catch (error) {
    console.error(`[v0] [getFeaturedProducts] Error:`, error)
    throw error
  }
}
[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]typescriptreact:file="app/product/[id]/page.tsx"
import { ProductPageClient } from "@/components/product-page-client"

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

return (
    <>
      <ProductPageClient productId={id} />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx" isQuickEdit="true"
"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"

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

return (
    <section className="relative min-h-screen bg-white dark:bg-gray-900 overflow-hidden">
      <div className="container mx-auto px-4 h-screen flex items-center">
        <div className="w-full">
          <div className="max-w-4xl mx-auto text-center">
            <div className="space-y-8">
              <Badge
                variant="outline"
                className="border-black dark:border-white text-black dark:text-white bg-transparent px-4 py-2 w-fit mx-auto"
              >
                <Star className="w-4 h-4 mr-2 fill-black dark:fill-white" />
                New Collection Available
              </Badge>

<div>
                <h1 className="text-5xl md:text-7xl font-bold text-black dark:text-white mb-6 leading-tight">
                  <>
                    {t("hero.title")}
                    <span className="block">{storeName}</span>
                  </>
                </h1>

<p className="text-xl text-black/70 dark:text-gray-300 mb-8 max-w-2xl mx-auto leading-relaxed">
                  {t("hero.subtitle")}
                </p>
              </div>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link href="/products">
                  <Button
                    size="lg"
                    className="bg-black dark:bg-white text-white dark:text-black hover:bg-black/90 dark:hover:bg-gray-200 text-lg px-8 py-6 border-0"
                  >
                    {t("hero.shopNow")}
                    <ArrowRight className="ml-2 w-5 h-5" />
                  </Button>
                </Link>
                <Link href="/products">
                  <Button
                    size="lg"
                    variant="outline"
                    className="border-black dark:border-white text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black text-lg px-8 py-6 bg-transparent"
                  >
                    {t("hero.exploreCategories")}
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescript:file="contexts/language-context.tsx" isQuickEdit="true"
"use client"

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

type Language = "en" | "ar"

type Currency = "USD" | "SAR"

interface CurrencyConfig {
  code: Currency
  symbol: string
  position: "before" | "after"
}

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
  t: (key: string) => string
  dir: "ltr" | "rtl"
  currency: CurrencyConfig
  formatPrice: (price: number) => 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 defaultContextValue: LanguageContextType = {
  language: "en",
  setLanguage: () => {},
  t: defaultT,
  dir: "ltr",
  currency: defaultCurrency,
  formatPrice: defaultFormatPrice,
}

const LanguageContext = createContext<LanguageContextType>(defaultContextValue)

const LANGUAGE_STORAGE_KEY = "app_language"

const currencyConfig: Record<Language, CurrencyConfig> = {
  en: { code: "USD", symbol: "$", position: "before" },
  ar: { code: "SAR", symbol: "ر.س", position: "after" },
}

export function LanguageProvider({ children }: { children: React.ReactNode }) {
  const [language, setLanguageState] = useState<Language>("en")
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    const savedLanguage = localStorage.getItem(LANGUAGE_STORAGE_KEY) as Language | null
    if (savedLanguage && (savedLanguage === "en" || savedLanguage === "ar")) {
      setLanguageState(savedLanguage)
      document.documentElement.lang = savedLanguage
      document.documentElement.dir = savedLanguage === "ar" ? "rtl" : "ltr"
    }
  }, [])

const setLanguage = (lang: Language) => {
    setLanguageState(lang)
    if (typeof window !== "undefined") {
      localStorage.setItem(LANGUAGE_STORAGE_KEY, lang)
      document.documentElement.lang = lang
      document.documentElement.dir = lang === "ar" ? "rtl" : "ltr"
    }
  }

const t = (key: string): string => {
    const keys = key.split(".")
    let value: any = translations[language]

for (const k of keys) {
      if (value && typeof value === "object" && k in value) {
        value = value[k]
      } else {
        // Key not found - return a human-readable fallback
        const lastKey = keys[keys.length - 1]
        const readable = lastKey
          .replace(/([A-Z])/g, " $1")
          .replace(/^./, (str) => str.toUpperCase())
          .trim()
        return readable
      }
    }

return typeof value === "string" ? value : key
  }

const dir = language === "ar" ? "rtl" : "ltr"

const currency = currencyConfig[language]

const formatPrice = (price: number): string => {
    const formattedNumber = price.toFixed(2)
    if (currency.position === "before") {
      return `${currency.symbol}${formattedNumber}`
    } else {
      return `${formattedNumber} ${currency.symbol}`
    }
  }

const value = {
    language,
    setLanguage,
    t,
    dir,
    currency,
    formatPrice,
  }

return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>
}

export function useLanguage() {
  return useContext(LanguageContext)
}

const translations: Record<Language, any> = {
  en: {
    nav: {
      home: "Home",
      products: "Products",
      featured: "Featured",
      about: "About",
      contact: "Contact",
      searchPlaceholder: "Search products...",
    },
    hero: {
      title: "Discover Tomorrow's Innovations Today",
      subtitle: "Explore cutting-edge products that redefine excellence. Shop the future now.",
      shopNow: "Shop Now",
      exploreCategories: "Explore Categories",
    },
    products: {
      title: "All Products",
      subtitle: "Discover our complete collection of premium products",
      loading: "Loading products...",
      noAvailable: "No products available",
      notFound: "No products found",
      viewDetails: "View Details",
      allProducts: "All Products",
      categories: "Categories",
      searchProducts: "Search products...",
      viewAllFeatured: "View All Featured",
      viewAllProducts: "View All Products",
      showing: "Showing",
      of: "of",
      products: "products",
      available: "available",
    },
    categories: {
      title: "Browse Categories",
      subtitle: "Explore our collection by category",
      viewAll: "View All Categories",
      loadMore: "Load More",
      loading: "Loading categories...",
      noAvailable: "No categories available",
      searchPlaceholder: "Search categories...",
    },
    cart: {
      title: "Shopping Cart",
      yourCart: "Your Cart",
      empty: "Your cart is empty",
      continueShopping: "Continue Shopping",
      proceedToCheckout: "Proceed to Checkout",
      clearCart: "Clear Cart",
      addToCart: "Add to Cart",
      quickAdd: "Quick Add",
      outOfStock: "Out of Stock",
      remove: "Remove",
      subtotal: "Subtotal",
      shipping: "Shipping",
      calculatedAtCheckout: "Calculated at checkout",
      total: "Total",
      items: "items",
      orderSummary: "Order Summary",
    },
    productDetails: {
      backToHome: "Back to Home",
      notFound: "Product not found.",
      browseAll: "Browse All Products",
      quantity: "Quantity:",
      selectOptions: "Select Options",
      freeShipping: "Free Shipping",
      securePayment: "Secure Payment",
      easyReturns: "Easy Returns",
      description: "Description",
      details: "Details",
      productId: "Product ID:",
      brand: "Brand:",
      category: "Category:",
      subcategory: "Subcategory:",
      sku: "SKU:",
      selectedVariant: "Selected Variant:",
      stock: "Stock:",
      price: "Price:",
      inStock: "In Stock",
      outOfStock: "Out of Stock",
      available: "Available",
      units: "units",
    },
    success: {
      title: "Order Confirmed!",
      loading: "Loading order details...",
      notFound: "Order Not Found",
      unableToLoad: "Unable to load order details",
      thankYou: "Thank you for your purchase. Your order has been successfully processed.",
      orderSummary: "Order Summary",
      qty: "Qty:",
      each: "each",
      tax: "Tax",
      orderStatus: "Order Status",
      payment: "Payment:",
      orderStatusLabel: "Order Status:",
      customerInfo: "Customer Information",
      name: "Name:",
      email: "Email:",
      phone: "Phone:",
      shippingAddress: "Shipping Address",
      shippingMethod: "Shipping Method:",
      emailConfirm: "You will receive an email confirmation shortly with your order details and tracking information.",
      printReceipt: "Print Receipt",
    },
    faq: {
      title: "Frequently Asked Questions",
      subtitle: "Find answers to common questions about our products and services",
      stillHaveQuestions: "Still have questions?",
      cantFind: "Can't find the answer you're looking for? Our customer support team is here to help.",
      q1: "What payment methods do you accept?",
      a1: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and other secure payment methods. All transactions are encrypted and secure.",
      q2: "How long does shipping take?",
      a2: "Standard shipping typically takes 5-7 business days. Express shipping options are available at checkout for faster delivery (2-3 business days).",
      q3: "What is your return policy?",
      a3: "We offer a 30-day return policy for most items. Products must be unused and in their original packaging. Please contact our customer service team to initiate a return.",
      q4: "Do you ship internationally?",
      a4: "Yes, we ship to most countries worldwide. International shipping times and costs vary by location. You can see the exact shipping cost at checkout.",
      q5: "How can I track my order?",
      a5: "Once your order ships, you'll receive a tracking number via email. You can use this number to track your package on our website or the carrier's website.",
      q6: "Can I cancel or modify my order?",
      a6: "Orders can be cancelled or modified within 24 hours of placement. After that, the order may have already been processed. Please contact us as soon as possible if you need to make changes.",
      q7: "Are your products covered by warranty?",
      a7: "Most of our products come with a manufacturer's warranty. The warranty period varies by product. Check the product description for specific warranty information.",
      q8: "How do I contact customer support?",
      a8: "You can reach our customer support team via email at hello@agorabuildertemplate.com or by phone at +1 (555) 123-4567. We're available Monday-Friday, 9am-6pm EST.",
    },
    terms: {
      title: "Terms of Service",
      subtitle: "Please read these terms carefully before using our services",
      lastUpdated: "Last updated: December 2024",
      acceptance: "1. Acceptance of Terms",
      useLicense: "2. Use License",
      productInfo: "3. Product Information and Pricing",
      orders: "4. Orders and Payment",
      shipping: "5. Shipping and Delivery",
      returns: "6. Returns and Refunds",
      privacy: "7. Privacy Policy",
      liability: "8. Limitation of Liability",
      governing: "9. Governing Law",
      contactInfo: "10. Contact Information",
    },
    contact: {
      title: "Get in Touch",
      subtitle: "We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
      name: "Your Name",
      namePlaceholder: "John Doe",
      email: "Your Email",
      emailPlaceholder: "john@example.com",
      subject: "Subject",
      subjectPlaceholder: "How can we help?",
      message: "Message",
      messagePlaceholder: "Tell us more about your inquiry...",
      sendMessage: "Send us a Message",
      sending: "Sending...",
      sendButton: "Send Message",
      messageSent: "Message Sent Successfully!",
      thanksMessage: "Thank you for contacting us. We'll get back to you soon.",
      sendAnother: "Send Another Message",
      contactInfo: "Contact Information",
      customerService: "Customer Service",
      businessHours: "Business Hours",
      hours: {
        weekday: "Monday - Friday: 9:00 AM - 6:00 PM EST",
        saturday: "Saturday: 10:00 AM - 4:00 PM EST",
        sunday: "Sunday: Closed",
      },
      phone: "Phone",
      emailLabel: "Email",
      address: "Address",
      followUs: "Follow Us",
      faq: "Common Questions",
      faqQuestions: {
        shipping: "How long does shipping take?",
        returns: "What is your return policy?",
        international: "Do you ship internationally?",
      },
      faqAnswers: {
        shipping: "Standard shipping takes 5-7 business days. Express options available.",
        returns: "We offer 30-day returns on most items in original condition.",
        international: "Yes, we ship worldwide with varying delivery times.",
      },
    },
    footer: {
      quickLinks: "Quick Links",
      aboutUs: "About Us",
      termsOfService: "Terms of Service",
      customerService: "Customer Service",
      contactUs: "Contact Us",
      faq: "FAQ",
      newsletter: "Subscribe to our Newsletter",
      emailPlaceholder: "Enter your email",
      subscribe: "Subscribe",
      allRightsReserved: "All rights reserved.",
    },
    common: {
      sale: "Sale",
      featured: "Featured",
      inStock: "In Stock",
      loading: "Loading...",
      error: "Error",
      success: "Success",
      tryAgain: "Try Again",
      search: "Search",
      searchPlaceholder: "Search...",
      previous: "Previous",
      next: "Next",
    },
    featured: {
      title: "Featured Products",
      subtitle: "Discover our handpicked collection of premium products",
      error: "Failed to load featured products. Please try again.",
      notFound: "No featured products available at this time.",
    },
  },
  ar: {
    nav: {
      home: "الرئيسية",
      products: "المنتجات",
      featured: "المميزة",
      about: "من نحن",
      contact: "اتصل بنا",
      searchPlaceholder: "ابحث عن المنتجات...",
    },
    hero: {
      title: "اكتشف ابتكارات الغد اليوم",
      subtitle: "استكشف المنتجات المتطورة التي تعيد تعريف التميز. تسوق المستقبل الآن.",
      shopNow: "تسوق الآن",
      exploreCategories: "استكشف الفئات",
    },
    products: {
      title: "جميع المنتجات",
      subtitle: "اكتشف مجموعتنا الكاملة من المنتجات المميزة",
      loading: "جاري تحميل المنتجات...",
      noAvailable: "لا توجد منتجات متاحة",
      notFound: "لم يتم العثور على منتجات",
      viewDetails: "عرض التفاصيل",
      allProducts: "جميع المنتجات",
      categories: "الفئات",
      searchProducts: "ابحث عن المنتجات...",
      viewAllFeatured: "عرض جميع المنتجات المميزة",
      viewAllProducts: "عرض جميع المنتجات",
      showing: "عرض",
      of: "من",
      products: "منتج",
      available: "متوفر",
    },
    categories: {
      title: "تصفح الفئات",
      subtitle: "استكشف مجموعتنا حسب الفئة",
      viewAll: "عرض جميع الفئات",
      loadMore: "تحميل المزيد",
      loading: "جاري تحميل الفئات...",
      noAvailable: "لا توجد فئات متاحة",
      searchPlaceholder: "ابحث عن الفئات...",
    },
    cart: {
      title: "سلة التسوق",
      yourCart: "سلتك",
      empty: "سلتك فارغة",
      continueShopping: "متابعة التسوق",
      proceedToCheckout: "إتمام الشراء",
      clearCart: "إفراغ السلة",
      addToCart: "أضف إلى السلة",
      quickAdd: "إضافة سريعة",
      outOfStock: "غير متوفر",
      remove: "إزالة",
      subtotal: "المجموع الفرعي",
      shipping: "الشحن",
      calculatedAtCheckout: "يحسب عند الدفع",
      total: "الإجمالي",
      items: "عناصر",
      orderSummary: "ملخص الطلب",
    },
    productDetails: {
      backToHome: "العودة إلى الرئيسية",
      notFound: "المنتج غير موجود.",
      browseAll: "تصفح جميع المنتجات",
      quantity: "الكمية:",
      selectOptions: "حدد الخيارات",
      freeShipping: "شحن مجاني",
      securePayment: "دفع آمن",
      easyReturns: "إرجاع سهل",
      description: "الوصف",
      details: "التفاصيل",
      productId: "معرف المنتج:",
      brand: "العلامة التجارية:",
      category: "الفئة:",
      subcategory: "الفئة الفرعية:",
      sku: "رمز المنتج:",
      selectedVariant: "المتغير المحدد:",
      stock: "المخزون:",
      price: "السعر:",
      inStock: "متوفر",
      outOfStock: "غير متوفر",
      available: "متاح",
      units: "وحدات",
    },
    success: {
      title: "تم تأكيد الطلب!",
      loading: "جاري تحميل تفاصيل الطلب...",
      notFound: "الطلب غير موجود",
      unableToLoad: "غير قادر على تحميل تفاصيل الطلب",
      thankYou: "شكراً لك على الشراء. تمت معالجة طلبك بنجاح.",
      orderSummary: "ملخص الطلب",
      qty: "الكمية:",
      each: "لكل واحد",
      tax: "الضريبة",
      orderStatus: "حالة الطلب",
      payment: "الدفع:",
      orderStatusLabel: "حالة الطلب:",
      customerInfo: "معلومات العميل",
      name: "الاسم:",
      email: "البريد الإلكتروني:",
      phone: "الهاتف:",
      shippingAddress: "عنوان الشحن",
      shippingMethod: "طريقة الشحن:",
      emailConfirm: "ستتلقى رسالة تأكيد عبر البريد الإلكتروني قريباً تحتوي على تفاصيل طلبك ومعلومات التتبع.",
      printReceipt: "طباعة الإيصال",
    },
    faq: {
      title: "الأسئلة الشائعة",
      subtitle: "ابحث عن إجابات للأسئلة الشائعة حول منتجاتنا وخدماتنا",
      stillHaveQuestions: "لا تزال لديك أسئلة؟",
      cantFind: "لا يمكنك العثور على الإجابة التي تبحث عنها؟ فريق دعم العملاء لدينا هنا للمساعدة.",
      q1: "ما هي طرق الدفع التي تقبلونها؟",
      a1: "نقبل جميع بطاقات الائتمان الرئيسية (فيزا، ماستركارد، أمريكان إكسبريس)، باي بال، وطرق دفع آمنة أخرى. جميع المعاملات مشفرة وآمنة.",
      q2: "كم من الوقت يستغرق الشحن؟",
      a2: "عادة ما يستغرق الشحن القياسي 5-7 أيام عمل. تتوفر خيارات الشحن السريع عند الدفع للتسليم الأسرع (2-3 أيام عمل).",
      q3: "ما هي سياسة الإرجاع الخاصة بكم؟",
      a3: "نقدم سياسة إرجاع لمدة 30 يوماً لمعظم العناصر. يجب أن تكون المنتجات غير مستخدمة وفي عبواتها الأصلية. يرجى الاتصال بفريق خدمة العملاء لدينا لبدء الإرجاع.",
      q4: "هل تشحنون دولياً؟",
      a4: "نعم، نشحن إلى معظم الدول حول العالم. تختلف أوقات وتكاليف الشحن الدولي حسب الموقع. يمكنك رؤية تكلفة الشحن الدقيقة عند الدفع.",
      q5: "كيف يمكنني تتبع طلبي؟",
      a5: "بمجرد شحن طلبك، ستتلقى رقم تتبع عبر البريد الإلكتروني. يمكنك استخدام هذا الرقم لتتبع الطرد على موقعنا أو موقع الناقل.",
      q6: "هل يمكنني إلغاء أو تعديل طلبي؟",
      a6: "يمكن إلغاء الطلبات أو تعديلها خلال 24 ساعة من الطلب. بعد ذلك، قد يكون الطلب قد تمت معالجته بالفعل. يرجى الاتصال بنا في أقرب وقت ممكن إذا كنت بحاجة إلى إجراء تغييرات.",
      q7: "هل منتجاتكم مشمولة بالضمان؟",
      a7: "معظم منتجاتنا تأتي مع ضمان الشركة المصنعة. تختلف فترة الضمان حسب المنتج. تحقق من وصف المنتج للحصول على معلومات الضمان المحددة.",
      q8: "كيف يمكنني الاتصال بدعم العملاء؟",
      a8: "يمكنك الوصول إلى فريق دعم العملاء لدينا عبر البريد الإلكتروني على hello@agorabuildertemplate.com أو عبر الهاتف على +1 (555) 123-4567. نحن متاحون من الاثنين إلى الجمعة، من 9 صباحاً إلى 6 مساءً بتوقيت شرق الولايات المتحدة.",
    },
    terms: {
      title: "شروط الخدمة",
      subtitle: "يرجى قراءة هذه الشروط بعناية قبل استخدام خدماتنا",
      lastUpdated: "آخر تحديث: ديسمبر 2024",
      acceptance: "1. قبول الشروط",
      useLicense: "2. ترخيص الاستخدام",
      productInfo: "3. معلومات المنتج والتسعير",
      orders: "4. الطلبات والدفع",
      shipping: "5. الشحن والتسليم",
      returns: "6. المرتجعات والمبالغ المستردة",
      privacy: "7. سياسة الخصوصية",
      liability: "8. تحديد المسؤولية",
      governing: "9. القانون الحاكم",
      contactInfo: "10. معلومات الاتصال",
    },
    contact: {
      title: "تواصل معنا",
      subtitle: "نحب أن نسمع منك. أرسل لنا رسالة وسنرد في أقرب وقت ممكن.",
      name: "اسمك",
      namePlaceholder: "أحمد محمد",
      email: "بريدك الإلكتروني",
      emailPlaceholder: "ahmed@example.com",
      subject: "الموضوع",
      subjectPlaceholder: "كيف يمكننا المساعدة؟",
      message: "الرسالة",
      messagePlaceholder: "أخبرنا المزيد عن استفسارك...",
      sendMessage: "أرسل لنا رسالة",
      sending: "جاري الإرسال...",
      sendButton: "إرسال الرسالة",
      messageSent: "تم إرسال الرسالة بنجاح!",
      thanksMessage: "شكراً لتواصلك معنا. سنرد عليك قريباً.",
      sendAnother: "إرسال رسالة أخرى",
      contactInfo: "معلومات الاتصال",
      customerService: "خدمة العملاء",
      businessHours: "ساعات العمل",
      hours: {
        weekday: "الاثنين - الجمعة: 9:00 صباحاً - 6:00 مساءً بتوقيت شرق الولايات المتحدة",
        saturday: "السبت: 10:00 صباحاً - 4:00 مساءً بتوقيت شرق الولايات المتحدة",
        sunday: "الأحد: مغلق",
      },
      phone: "الهاتف",
      emailLabel: "البريد الإلكتروني",
      address: "العنوان",
      followUs: "تابعنا",
      faq: "الأسئلة الشائعة",
      faqQuestions: {
        shipping: "كم من الوقت يستغرق الشحن؟",
        returns: "ما هي سياسة الإرجاع الخاصة بكم؟",
        international: "هل تشحنون دولياً؟",
      },
      faqAnswers: {
        shipping: "يستغرق الشحن القياسي 5-7 أيام عمل. تتوفر خيارات سريعة.",
        returns: "نقدم إرجاع لمدة 30 يوماً على معظم العناصر في حالتها الأصلية.",
        international: "نعم، نشحن إلى جميع أنحاء العالم مع أوقات تسليم متفاوتة.",
      },
    },
    footer: {
      quickLinks: "روابط سريعة",
      aboutUs: "من نحن",
      termsOfService: "شروط الخدمة",
      customerService: "خدمة العملاء",
      contactUs: "اتصل بنا",
      faq: "الأسئلة الشائعة",
      newsletter: "اشترك في نشرتنا البريدية",
      emailPlaceholder: "أدخل بريدك الإلكتروني",
      subscribe: "اشترك",
      allRightsReserved: "جميع الحقوق محفوظة.",
    },
    common: {
      sale: "تخفيض",
      featured: "مميز",
      inStock: "متوفر",
      loading: "جاري التحميل...",
      error: "خطأ",
      success: "نجاح",
      tryAgain: "حاول مرة أخرى",
      search: "بحث",
      searchPlaceholder: "بحث...",
      previous: "السابق",
      next: "التالي",
    },
    featured: {
      title: "المنتجات المميزة",
      subtitle: "اكتشف مجموعتنا المختارة من المنتجات الممتازة",
      error: "فشل تحميل المنتجات المميزة. يرجى المحاولة مرة أخرى.",
      notFound: "لا توجد منتجات مميزة متاحة في هذا الوقت.",
    },
  },
}
[V0_FILE]typescriptreact:file="app/success/page.tsx"
"use client"

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 { checkoutSuccess } from "@/services/api"
import type { OrderDetails } from "@/types/product"
import Link from "next/link"
import { useLanguage } from "@/contexts/language-context"

export default function SuccessPage() {
  const searchParams = useSearchParams()
  const sessionId = searchParams.get("session_id")
  const { t, formatPrice } = useLanguage()

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

useEffect(() => {
    if (!sessionId) {
      setError("No session ID found")
      setLoading(false)
      return
    }

const fetchOrderDetails = async () => {
      try {
        setLoading(true)
        setError(null)
        const response = await checkoutSuccess(sessionId)

if (response.status === "success") {
          setOrderDetails(response.data.order)
        } else {
          setError("Failed to fetch order details")
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to fetch order details")
      } finally {
        setLoading(false)
      }
    }

fetchOrderDetails()
  }, [sessionId])

if (loading) {
    return (
      <div className="min-h-screen bg-white py-8">
        <div className="container mx-auto px-4">
          <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 py-8">
        <div className="container mx-auto px-4">
          <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 py-8">
      <div className="container mx-auto px-4">
        <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="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 { getFeaturedProducts } from "@/services/api"
import { useLanguage } from "@/contexts/language-context"

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 } = useLanguage()
  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()

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

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

if (loading && products.length === 0) {
    return (
      <div className="min-h-screen bg-white dark:bg-gray-900 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 dark:border-white mx-auto mb-4"></div>
            <p className="text-gray-600 dark:text-gray-400">{t("products.loading")}</p>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-white dark:bg-gray-900 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-black dark:text-white mb-4">{t("featured.title")}</h1>
          <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">{t("featured.subtitle")}</p>
        </div>

{/* Results Count */}
        {pagination ? (
          <div className="mb-6 text-gray-600 dark:text-gray-400">
            {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-gray-600 dark:text-gray-400 text-lg">{t("featured.error")}</p>
          </div>
        ) : products.length === 0 ? (
          <div className="text-center py-20">
            <p className="text-gray-600 dark:text-gray-400 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 firstVariant = product.variants?.[0]
                // Check if variant is on sale - only show discount when isOnSale is true
                const variantIsOnSale = firstVariant?.isOnSale === true
                const variantOriginalPrice = firstVariant?.originalPrice
                const variantPrice = firstVariant?.price || product.price
                
                // For variants: only show discount percentage if isOnSale is true AND originalPrice exists
                // For products without variants: use discountPercentage
                const hasDiscountPercent = firstVariant
                  ? (variantIsOnSale && variantOriginalPrice && variantOriginalPrice > variantPrice)
                  : Boolean(product.discountPercentage && product.discountPercentage > 0)
                
                // Show sale badge if variant isOnSale OR if product has discount percentage
                const showSaleBadge = variantIsOnSale || Boolean(product.discountPercentage && product.discountPercentage > 0)
                
                const displayPrice = variantPrice
                const originalPrice = firstVariant
                  ? (variantIsOnSale ? variantOriginalPrice : null)
                  : (product.discountPercentage ? product.price / (1 - product.discountPercentage / 100) : null)
                const discountPercent = firstVariant
                  ? (variantIsOnSale && variantOriginalPrice ? Math.round(((variantOriginalPrice - variantPrice) / variantOriginalPrice) * 100) : 0)
                  : (product.discountPercentage || 0)
                
                const isAddingThisProduct = addingProducts.has(product._id)
                const isInStock = firstVariant
                  ? firstVariant.isInStock !== false &&
                    (firstVariant.quantity === undefined || firstVariant.quantity > 0)
                  : product.available

const hasDiscount = hasDiscountPercent; // Declare hasDiscount variable

return (
                  <div key={product._id} className="h-full">
                    <Card className="group overflow-hidden hover:shadow-lg transition-all duration-300 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 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>

{showSaleBadge ? (
                            <Badge className="absolute top-4 left-4 bg-red-600 dark:bg-red-500 text-white">
                              {hasDiscountPercent && discountPercent > 0 ? `${discountPercent}% OFF` : t("common.sale")}
                            </Badge>
                          ) : null}

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

<div className="absolute inset-0 bg-black/10 dark:bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                            <Button
                              type="button"
                              className="bg-white dark:bg-gray-800 text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600"
                              onClick={(e) => handleAddToCart(product, e)}
                              disabled={!isInStock || isAddingThisProduct}
                            >
                              {isAddingThisProduct ? (
                                <Loader2 className="w-4 h-4 animate-spin mr-2" />
                              ) : (
                                <ShoppingCart className="w-4 h-4 mr-2" />
                              )}
                              {isInStock ? t("cart.quickAdd") : 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-black dark:text-white mb-2 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors cursor-pointer line-clamp-2 h-14 leading-7">
                              {product.name}
                            </h3>
                          </Link>

<p className="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2 h-10 leading-5">
                            {product.description}
                          </p>

<div className="flex items-center gap-2 mb-4 h-8">
                            <span className="text-2xl font-bold text-black dark:text-white">
                              {formatPrice(displayPrice)}
                            </span>
                            {hasDiscountPercent && originalPrice ? (
                              <>
                                <span className="text-lg text-gray-500 dark:text-gray-400 line-through">
                                  {formatPrice(originalPrice)}
                                </span>
                                <Badge
                                  variant="secondary"
                                  className="bg-gray-100 dark:bg-gray-700 text-black dark:text-white text-xs"
                                >
                                  {discountPercent}% OFF
                                </Badge>
                              </>
                            ) : null}
                          </div>

<div className="mt-auto">
                            <Button
                              type="button"
                              className="w-full bg-black dark:bg-white text-white dark:text-black hover:bg-black/90 dark:hover:bg-gray-100"
                              onClick={(e) => handleAddToCart(product, e)}
                              disabled={!isInStock || isAddingThisProduct}
                            >
                              {isAddingThisProduct ? (
                                <Loader2 className="w-4 h-4 animate-spin mr-2" />
                              ) : (
                                t("cart.addToCart")
                              )}
                            </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-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
                >
                  <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-black dark:bg-white text-white dark:text-black"
                            : "border-gray-300 dark:border-gray-600 bg-transparent dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"
                        }
                      >
                        {pageNum}
                      </Button>
                    )
                  })}
                </div>

<Button
                  variant="outline"
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === pagination.totalPages || loading}
                  className="border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
                >
                  {t("common.next")}
                  <ChevronRight className="w-4 h-4" />
                </Button>
              </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"

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 dark:bg-gray-900">
      <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 dark:text-white dark:hover:bg-gray-800">
            <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 dark:text-white">{category?.name || t("categories.title")}</h1>
          <p className="text-gray-600 dark:text-gray-400">{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 dark:bg-gray-800 dark:border-gray-700">
                <CardContent className="p-0">
                  <div className="aspect-square bg-gray-200 dark:bg-gray-700" />
                  <div className="p-4 space-y-3">
                    <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
                    <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2" />
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : products.length === 0 ? (
          <div className="text-center py-12">
            <ShoppingCart className="h-16 w-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
            <h3 className="text-xl font-semibold mb-2 dark:text-white">{t("products.notFound")}</h3>
            <p className="text-gray-600 dark:text-gray-400">
              {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) => {
                const firstVariant = product.variants?.[0]
                // Check if variant is on sale - only show discount when isOnSale is true
                const variantIsOnSale = firstVariant?.isOnSale === true
                const variantOriginalPrice = firstVariant?.originalPrice
                const variantPrice = firstVariant?.price || product.price
                
                // For variants: only show discount percentage if isOnSale is true AND originalPrice exists
                // For products without variants: use discountPercentage
                const hasDiscountPercent = firstVariant
                  ? (variantIsOnSale && variantOriginalPrice && variantOriginalPrice > variantPrice)
                  : Boolean(product.discountPercentage && product.discountPercentage > 0)
                
                // Show sale badge if variant isOnSale OR if product has discount percentage
                const showSaleBadge = variantIsOnSale || Boolean(product.discountPercentage && product.discountPercentage > 0)
                
                const finalPrice = variantPrice
                const originalPrice = firstVariant
                  ? (variantIsOnSale ? variantOriginalPrice : null)
                  : (product.discountPercentage && product.discountPercentage > 0 ? product.price : null)
                const discountPercent = firstVariant
                  ? (variantIsOnSale && variantOriginalPrice ? Math.round(((variantOriginalPrice - variantPrice) / variantOriginalPrice) * 100) : 0)
                  : (product.discountPercentage || 0)

return (
                  <Link key={product._id} href={`/product/${product._id}`}>
                    <Card className="group hover:shadow-lg transition-shadow cursor-pointer h-full dark:bg-gray-800 dark:border-gray-700">
                      <CardContent className="p-0">
                        <div className="relative aspect-square overflow-hidden">
                          {showSaleBadge ? (
                            <Badge className="absolute top-4 left-4 bg-red-600 dark:bg-red-500 text-white z-10">
                              {hasDiscountPercent && discountPercent > 0 ? `${discountPercent}% OFF` : t("common.sale")}
                            </Badge>
                          ) : null}

{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 dark:text-white">
                            {product.name}
                          </h3>
                          <div className="flex items-center gap-2 flex-wrap">
                            <span className="text-xl font-bold dark:text-white">{formatPrice(finalPrice)}</span>
                            {hasDiscountPercent && originalPrice ? (
                              <>
                                <span className="text-sm text-gray-500 dark:text-gray-400 line-through">
                                  {formatPrice(originalPrice)}
                                </span>
                                <Badge
                                  variant="secondary"
                                  className="bg-gray-100 dark:bg-gray-700 text-black dark:text-white text-xs"
                                >
                                  {discountPercent}% OFF
                                </Badge>
                              </>
                            ) : null}
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                )
              })}
            </div>

{hasMore ? (
              <div className="mt-8 flex justify-center">
                <Button
                  onClick={() => setPage((p) => p + 1)}
                  variant="outline"
                  className="dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700"
                >
                  {t("categories.loadMore")}
                </Button>
              </div>
            ) : null}
          </>
        )}
      </div>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/product-page-client.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
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"

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 } = useLanguage()
  const [hasDiscount, setHasDiscount] = useState(false) // Declare hasDiscount variable

useEffect(() => {
    if (product?.variants && product.variants.length > 0) {
      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])

useEffect(() => {
    if (!product) {
      setHasDiscount(false)
      return
    }
    const variantIsOnSale = selectedVariant?.isOnSale === true
    const variantOriginalPrice = selectedVariant?.originalPrice
    const compareAtPrice = selectedVariant
      ? (variantIsOnSale && variantOriginalPrice ? variantOriginalPrice : null)
      : (product.discountPercentage ? product.price / (1 - product.discountPercentage / 100) : null)
    const hasDiscountPercentage = Boolean(compareAtPrice && compareAtPrice > (selectedVariant?.price || product.price))
    setHasDiscount(hasDiscountPercentage)
  }, [selectedVariant, product])

if (loading) {
    return (
      <div className="min-h-screen bg-white dark:bg-gray-900 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 dark:border-white mx-auto mb-4"></div>
            <p className="text-gray-600 dark:text-gray-400">{t("common.loading")}</p>
          </div>
        </div>
      </div>
    )
  }

if (error || !product) {
    return (
      <div className="min-h-screen bg-white dark:bg-gray-900 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-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white"
            >
              <ArrowLeft className="w-4 h-4" />
              {t("productDetails.backToHome")}
            </Link>
          </div>
          <div className="text-center py-20">
            <p className="text-gray-600 dark:text-gray-400 text-lg">{t("productDetails.notFound")}</p>
            <Link href="/products">
              <Button className="mt-4 bg-black dark:bg-white text-white dark:text-black hover:bg-black/90 dark:hover:bg-gray-100">
                {t("productDetails.browseAll")}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

const images = product.images || []
  const price = selectedVariant?.price || product.price
  
  // Check if variant is on sale - show sale badge when isOnSale is true
  const variantIsOnSale = selectedVariant?.isOnSale === true
  const variantOriginalPrice = selectedVariant?.originalPrice
  
  // For variants: show original price if isOnSale is true AND originalPrice exists
  // For products without variants: use discountPercentage
  const compareAtPrice = selectedVariant
    ? (variantIsOnSale && variantOriginalPrice ? variantOriginalPrice : null)
    : (product.discountPercentage ? product.price / (1 - product.discountPercentage / 100) : null)
  
  // Show discount percentage only if we have compareAtPrice
  const discount = hasDiscount ? Math.round(((compareAtPrice - price) / compareAtPrice) * 100) : 0
  
  // Show sale badge if variant isOnSale OR if product has discount percentage
  const showSaleBadge = variantIsOnSale || Boolean(product.discountPercentage && product.discountPercentage > 0)
  const isInStock = selectedVariant
    ? selectedVariant.isInStock !== false && (selectedVariant.quantity === undefined || selectedVariant.quantity > 0)
    : product.available
  const hasVariants = product.variants && product.variants.length > 0

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

if (hasVariants && !selectedVariant) {
      alert("Please select all product options before adding to cart.")
      return
    }

setIsAddingToCart(true)

try {
      await addItem({
        id: product._id,
        variantId: selectedVariant?.id,
        name: product.name,
        price: price,
        originalPrice: hasDiscount && compareAtPrice ? compareAtPrice : undefined,
        isOnSale: hasDiscount,
        images: images,
        quantity: quantity,
        description: product.description,
      })
    } finally {
      setIsAddingToCart(false)
    }
  }

return (
    <div className="min-h-screen bg-white dark:bg-gray-900 py-8">
      <div className="container mx-auto px-4">
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 mb-8">
          <Link href="/" className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white">
            {t("nav.home")}
          </Link>
          {category ? (
            <>
              <span className="text-gray-400 dark:text-gray-600">/</span>
              <Link
                href={`/categories/${category._id}`}
                className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white"
              >
                {category.name}
              </Link>
            </>
          ) : null}
          {subcategory ? (
            <>
              <span className="text-gray-400 dark:text-gray-600">/</span>
              <Link
                href={`/categories/${subcategory._id}`}
                className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white"
              >
                {subcategory.name}
              </Link>
            </>
          ) : null}
          <span className="text-gray-400 dark:text-gray-600">/</span>
          <span className="text-gray-900 dark:text-white">{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-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
              <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-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden border-2 transition-colors ${
                      selectedImage === index
                        ? "border-black dark:border-white"
                        : "border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
                    }`}
                  >
                    <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">
            {showSaleBadge ? (
              <Badge className="bg-red-600 dark:bg-red-500 text-white mb-4">
                {hasDiscount && discount > 0 ? `${discount}% OFF` : t("common.sale")}
              </Badge>
            ) : null}

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

<div className="flex items-center gap-4 mb-6">
              <span className="text-3xl font-bold text-black dark:text-white">{formatPrice(price)}</span>
              {hasDiscount && compareAtPrice ? (
                <>
                  <span className="text-xl text-gray-500 dark:text-gray-400 line-through">
                    {formatPrice(compareAtPrice)}
                  </span>
                  <Badge variant="secondary" className="bg-gray-100 dark:bg-gray-800 text-black dark:text-white">
                    {discount}% OFF
                  </Badge>
                </>
              ) : null}
            </div>

{hasVariants && (
              <div className="border-t border-gray-200 dark:border-gray-700 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-black dark:text-white">{t("productDetails.quantity")}</span>
                <div className="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800">
                  <button
                    type="button"
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-black dark:text-white"
                    disabled={isAddingToCart}
                  >
                    -
                  </button>
                  <span className="px-4 py-2 border-x border-gray-300 dark:border-gray-600 text-black dark:text-white">
                    {quantity}
                  </span>
                  <button
                    type="button"
                    onClick={() => setQuantity(quantity + 1)}
                    className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-black dark:text-white"
                    disabled={isAddingToCart}
                  >
                    +
                  </button>
                </div>
                <span className="text-sm text-gray-500 dark:text-gray-400">
                  {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 || (hasVariants && !selectedVariant)}
                  className="flex-1 bg-black dark:bg-white text-white dark:text-black hover:bg-black/90 dark:hover:bg-gray-100 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")
                    : hasVariants && !selectedVariant
                      ? t("productDetails.selectOptions")
                      : t("cart.addToCart")}
                </Button>
              </div>
            </form>

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

{/* Product Details Tabs */}
        <div className="mt-16">
          <div className="border-b border-gray-200 dark:border-gray-700">
            <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-black dark:border-white text-black dark:text-white"
                      : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"
                  }`}
                >
                  {t(`productDetails.${tab}`)}
                </button>
              ))}
            </nav>
          </div>

<div className="py-8">
            {activeTab === "description" && (
              <div className="prose max-w-none">
                <div
                  className="text-gray-600 dark:text-gray-300 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-gray-200 dark:border-gray-700">
                    <span className="font-medium text-black dark:text-white">{t("productDetails.productId")}</span>
                    <span className="text-gray-600 dark:text-gray-400">{product._id}</span>
                  </div>
                  <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                    <span className="font-medium text-black dark:text-white">{t("productDetails.brand")}</span>
                    <span className="text-gray-600 dark:text-gray-400">{product.brand}</span>
                  </div>
                  {category ? (
                    <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                      <span className="font-medium text-black dark:text-white">{t("productDetails.category")}</span>
                      <Link
                        href={`/categories/${category._id}`}
                        className="text-blue-600 dark:text-blue-400 hover:underline"
                      >
                        {category.name}
                      </Link>
                    </div>
                  ) : null}
                  {subcategory ? (
                    <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                      <span className="font-medium text-black dark:text-white">{t("productDetails.subcategory")}</span>
                      <Link
                        href={`/categories/${subcategory._id}`}
                        className="text-blue-600 dark:text-blue-400 hover:underline"
                      >
                        {subcategory.name}
                      </Link>
                    </div>
                  ) : null}
                  <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                    <span className="font-medium text-black dark:text-white">{t("productDetails.sku")}</span>
                    <span className="text-gray-600 dark:text-gray-400">{product.sku || "N/A"}</span>
                  </div>
                  {selectedVariant && (
                    <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                      <span className="font-medium text-black dark:text-white">
                        {t("productDetails.selectedVariant")}
                      </span>
                      <span className="text-gray-600 dark:text-gray-400">
                        {selectedVariant.name || selectedVariant.id}
                      </span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>