[V0_FILE]typescriptreact:file="app/products/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="contexts/cart-context.tsx" isMerged="true" "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]typescriptreact:file="app/success/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/categories.tsx" isMerged="true" "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" isMerged="true" [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" isMerged="true" [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" isMerged="true" [V0_FILE]png:file="public/headphones-case.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/headphones-case-XYIeexipi9Qqny3XmdpVk4S0hC4abh.png" isMerged="true" [V0_FILE]jpg:file="public/headphones-details.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/headphones-details-NhY0jCp7ISBOf1yVJru7O62vt6s9Ox.jpg" isMerged="true" [V0_FILE]typescript:file="types/product.ts" isMerged="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 type ProductKind = "physical" | "digital" | "service" export interface Product { _id: string id?: string name: string description: string brand: string price: number productKind?: ProductKind variants?: ProductVariant[] images: string[] url: string slug: string currency: string country: string storeName: string source: string creator: string imageEmbedding?: number[] textEmbedding?: number[] priceHistory?: PriceHistory[] published_at?: Date last_updated?: Date isActive: boolean available: boolean categories?: string[] tags?: string[] sku?: string stock?: number rating?: number reviewCount?: number discountPercentage?: number discount?: number discountVal?: number 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" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/categories/[id]/page.tsx" isMerged="true" import type { Metadata } from "next" import { getCategoryByIdFromList } from "@/services/api" import storeConfig from "@/config/store" import CategoryProductsClient from "./category-products-client" export async function generateMetadata({ params }: { params: { id: string } }): Promise { try { const response = await getCategoryByIdFromList(params.id) if (response.status === "success" && response.data) { const category = response.data return { title: category.metaTitle || `${category.name} - ${storeConfig.storeName}`, description: category.metaDescription || `Browse products in ${category.name} category`, } } } catch (error) { console.error("Failed to fetch category metadata:", error) } return { title: `Category - ${storeConfig.storeName}`, description: "Browse products by category", } } export default function CategoryProductsPage({ params }: { params: { id: string } }) { return } [V0_FILE]typescriptreact:file="app/featured/page.tsx" isMerged="true" import { FeaturedProductsPageClient } from "@/components/featured-products-page-client" export default function FeaturedProductsPage() { return } [V0_FILE]typescriptreact:file="app/featured/loading.tsx" isMerged="true" export default function Loading() { return (

Loading featured products...

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" "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/page.tsx" isMerged="true" 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" isMerged="true" "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/custom-theme-provider.tsx" isMerged="true" "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" isMerged="true" /** @type {import('postcss-load-config').Config} */ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="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" isMerged="true" { "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="components/categories-section.tsx" isMerged="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" import { getCategoriesSectionConfig } from "@/lib/homepage-config" export function CategoriesSection() { const [categories, setCategories] = useState([]) const [loading, setLoading] = useState(true) const cfg = getCategoriesSectionConfig() useEffect(() => { const fetchCategories = async () => { try { const response = await getStoreCategories(1, 20) if (response.status === "success") { const sortedCategories = response.data.categories.sort((a, b) => { if (a.sortOrder !== undefined && b.sortOrder !== undefined) { return a.sortOrder - b.sortOrder } return 0 }) setCategories(sortedCategories.slice(0, cfg.layout.maxCategories)) } } catch (error) { console.error("Failed to fetch categories:", error) } finally { setLoading(false) } } fetchCategories() }, [cfg.layout.maxCategories]) if (!cfg.visible) return null if (loading) { return (

{[...Array(cfg.layout.skeletonCount)].map((_, i) => (

))}

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

Browse by Genre

Explore our curated collection organized by category

{cfg.viewAllButton.visible && ( )}

{categories.map((category) => (

{category.name}

))}

{cfg.viewAllMobileButton.visible && (

)}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "modern-storefront", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "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" isMerged="true" "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" isMerged="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" isMerged="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" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { 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" isMerged="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">Browse Categories</h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-8">Explore our collection organized by genre and category</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="Search categories..."
              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">
            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">No Categories Found</h3>
          <p className="text-gray-600 dark:text-gray-400">Try adjusting your search query</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-amber-600/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-amber-600 transition-colors dark:text-white dark:group-hover:text-amber-400">
                      {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"
              >
                Load More Categories
              </Button>
            </div>
          ) : null}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter.tsx" isMerged="true"
"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" isMerged="true"
"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" isMerged="true"
import type { Metadata } from "next"
import storeConfig from "@/config/store"
import FAQClient from "./faq-client"

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

export default function FAQPage() {
  return <FAQClient />
}
[V0_FILE]typescriptreact:file="app/cart/page.tsx" isMerged="true"
"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 pt-24">
        <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">Your Cart is Empty</h1>
            <p className="text-gray-600 dark:text-gray-400 mb-8">Add some books to get started</p>
            <Link href="/products">
              <Button className="bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-700">
                Continue Shopping
              </Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-white dark:bg-gray-900 py-8 pt-24">
      <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">Your Shopping Cart</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">
              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">
                  <h2 className="text-xl font-semibold text-black dark:text-white mb-4">Order Summary</h2>

<div className="space-y-3 mb-6">
                    <div className="flex justify-between">
                      <span className="text-gray-600 dark:text-gray-400">
                        Subtotal ({state.itemCount} 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">Shipping</span>
                      <span className="font-medium text-black dark:text-white">Calculated at checkout</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">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-amber-600 hover:bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-700"
                      onClick={handleCheckout}
                      disabled={state.loading}
                    >
                      {state.loading ? (
                        <>
                          <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          Processing
                        </>
                      ) : (
                        "Proceed to Checkout"
                      )}
                    </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}
                      >
                        Continue Shopping
                      </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}
                    >
                      Clear Cart
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/cart-drawer.tsx" isMerged="true"
"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" isMerged="true"
"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, getProductCTA } = 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-amber-600 dark:border-amber-400 mx-auto mb-4"></div>
        <p className="text-gray-600 dark:text-gray-400">Loading books...</p>
      </div>
    )
  }

if (error) {
    return (
      <div className="text-center py-20">
        <p className="text-gray-600 dark:text-gray-400 text-lg">No books available at this time.</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">Our Complete Collection</h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Browse all available books in our curated store</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 ? getProductCTA(product.productKind) : t("cart.outOfStock")}
                        </Button>
                      </div>
                    </div>

<div className="p-6 flex flex-col flex-grow">
                      <Link href={`/product/${product._id}`}>
                        <h3 className="font-semibold text-lg text-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" />
                          ) : (
                            getProductCTA(product.productKind)
                          )}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/variant-selector.tsx" isQuickEdit="true" isMerged="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="hooks/use-agora-products.ts" isMerged="true"
"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" isMerged="true"
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="app/success/page.tsx" isMerged="true"
"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 dark:bg-gray-900 py-8 pt-24">
        <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-amber-600 dark:text-amber-400 mx-auto mb-4" />
            <p className="text-gray-600 dark:text-gray-400">Processing your order...</p>
          </div>
        </div>
      </div>
    )
  }

if (error || !orderDetails) {
    return (
      <div className="min-h-screen bg-white dark:bg-gray-900 py-8 pt-24">
        <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 dark:text-white mb-4">Order Not Found</h1>
            <p className="text-gray-600 dark:text-gray-400 mb-8">{error || "Unable to load order details"}</p>
            <Link href="/products">
              <Button className="bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-700">Continue Shopping</Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-white dark:bg-gray-900 py-8 pt-24">
      <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 dark:text-white mb-2">Order Confirmed!</h1>
            <p className="text-gray-600 dark:text-gray-400">Thank you for your purchase. Your order has been successfully processed.</p>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Order Summary */}
            <Card className="dark:bg-gray-800 dark:border-gray-700">
              <CardContent className="p-6">
                <h2 className="text-xl font-semibold text-black dark:text-white mb-4 flex items-center">
                  <Package className="w-5 h-5 mr-2" />
                  Order Summary
                </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 dark:border-gray-700 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 dark:text-white">{item.name}</h3>
                        {item.description && <p className="text-sm text-gray-600 dark:text-gray-400">{item.description}</p>}
                        <p className="text-sm text-gray-500 dark:text-gray-400">
                          Qty: {item.quantity}
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="font-medium text-black dark:text-white">{formatPrice(item.totalPrice || 0)}</p>
                        <p className="text-sm text-gray-500 dark:text-gray-400">
                          {formatPrice(item.unitPrice || 0)} each
                        </p>
                      </div>
                    </div>
                  ))}
                </div>

<div className="border-t border-gray-200 dark:border-gray-700 pt-4 space-y-2">
                  {orderDetails.subtotal !== undefined && (
                    <div className="flex justify-between">
                      <span className="text-gray-600 dark:text-gray-400">Subtotal</span>
                      <span className="text-black dark:text-white">{formatPrice(orderDetails.subtotal)}</span>
                    </div>
                  )}
                  {orderDetails.shippingCost !== undefined && (
                    <div className="flex justify-between">
                      <span className="text-gray-600 dark:text-gray-400">Shipping</span>
                      <span className="text-black dark:text-white">{formatPrice(orderDetails.shippingCost)}</span>
                    </div>
                  )}
                  {orderDetails.taxAmount !== undefined && orderDetails.taxAmount > 0 && (
                    <div className="flex justify-between">
                      <span className="text-gray-600 dark:text-gray-400">Tax</span>
                      <span className="text-black dark:text-white">{formatPrice(orderDetails.taxAmount)}</span>
                    </div>
                  )}
                  <div className="flex justify-between text-lg font-semibold border-t border-gray-200 dark:border-gray-700 pt-2">
                    <span className="text-black dark:text-white">Total</span>
                    <span className="text-black dark:text-white">{formatPrice(orderDetails.totalAmount || 0)}</span>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Order & Customer Details */}
            <div className="space-y-6">
              {/* Payment Status */}
              <Card className="dark:bg-gray-800 dark:border-gray-700">
                <CardContent className="p-6">
                  <h2 className="text-xl font-semibold text-black dark:text-white mb-4 flex items-center">
                    <CreditCard className="w-5 h-5 mr-2" />
                    Order Status
                  </h2>
                  <div className="flex flex-col gap-2">
                    {orderDetails.paymentStatus && (
                      <div className="flex items-center gap-2">
                        <span className="text-sm text-gray-600 dark:text-gray-400">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 dark:text-gray-400">Order Status</span>
                        <Badge variant="secondary" className="dark:bg-gray-700 dark:text-gray-300">
                          {orderDetails.status.charAt(0).toUpperCase() + orderDetails.status.slice(1)}
                        </Badge>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

{(orderDetails.customerEmail || orderDetails.customerName || orderDetails.customerPhone) && (
                <Card className="dark:bg-gray-800 dark:border-gray-700">
                  <CardContent className="p-6">
                    <h2 className="text-xl font-semibold text-black dark:text-white mb-4">Customer Information</h2>
                    <div className="space-y-2 text-black dark:text-white">
                      {orderDetails.customerName && (
                        <p>
                          <span className="font-medium">Name: </span> {orderDetails.customerName}
                        </p>
                      )}
                      {orderDetails.customerEmail && (
                        <p>
                          <span className="font-medium">Email: </span> {orderDetails.customerEmail}
                        </p>
                      )}
                      {orderDetails.customerPhone && (
                        <p>
                          <span className="font-medium">Phone: </span> {orderDetails.customerPhone}
                        </p>
                      )}
                    </div>
                  </CardContent>
                </Card>
              )}

{orderDetails.shippingAddress && (
                <Card className="dark:bg-gray-800 dark:border-gray-700">
                  <CardContent className="p-6">
                    <h2 className="text-xl font-semibold text-black dark:text-white mb-4 flex items-center">
                      <Truck className="w-5 h-5 mr-2" />
                      Shipping Address
                    </h2>
                    <div className="space-y-1 text-black dark:text-white">
                      {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 border-gray-200 dark:border-gray-700">
                        <p className="text-sm text-gray-600 dark:text-gray-400">
                          <span className="font-medium">Shipping Method: </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 dark:text-gray-400">You will receive an email confirmation shortly at your provided email address.</p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/products">
                <Button className="bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-700">Continue Shopping</Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/categories/[id]/category-products-client.tsx" isMerged="true"
"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" isMerged="true"
"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, getProductCTA } = 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")
                      : getProductCTA(product.productKind)}
                </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>
  )
}
[V0_FILE]typescript:file="services/api.ts" isMerged="true"
import storeConfig from "@/config/store"

const BASE_URL = storeConfig.apiBaseUrl
const STORE_ID = storeConfig.storeId
const TOKEN_KEY = "auth_token"

export const getStoreProducts = async (page = 1, limit = 20, query = "") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/products?page=${page}&limit=${limit}${query ? `&q=${query}` : ""}`
  console.log(`[v0] [getStoreProducts] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getStoreProducts] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getStoreProducts] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getStoreProducts] Error:`, error)
    throw error
  }
}

export const getProductDetails = async (productId: string) => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/products/${productId}`
  console.log(`[v0] [getProductDetails] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getProductDetails] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getProductDetails] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getProductDetails] Error:`, error)
    throw error
  }
}

export const getStoreInfo = async () => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}`
  console.log(`[v0] [getStoreInfo] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getStoreInfo] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getStoreInfo] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getStoreInfo] Error:`, error)
    throw error
  }
}

export const checkout = async (cartItems: any[]) => {
  const url = `${BASE_URL}/storefront/v1/stores/checkout`
  console.log(`[v0] [checkout] Posting to: ${url}`)

try {
    const token = typeof window !== "undefined" ? localStorage.getItem(TOKEN_KEY) : null

const headers: Record<string, string> = {
      "Content-Type": "application/json",
    }

if (token) {
      headers["Authorization"] = `${token}`
    }

const response = await fetch(url, {
      method: "POST",
      headers,
      body: JSON.stringify({
        storeId: STORE_ID,
        cartItems,
      }),
    })

console.log(`[v0] [checkout] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [checkout] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [checkout] Error:`, error)
    throw error
  }
}

export const checkoutSuccess = async (sessionId: string) => {
  const url = `${BASE_URL}/storefront/v1/stores/checkout/success`
  console.log(`[v0] [checkoutSuccess] Posting to: ${url}`)

try {
    const headers: Record<string, string> = {
      "Content-Type": "application/json",
    }

const response = await fetch(url, {
      method: "POST",
      headers,
      body: JSON.stringify({
        session_id: sessionId,
      }),
    })

console.log(`[v0] [checkoutSuccess] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [checkoutSuccess] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [checkoutSuccess] Error:`, error)
    throw error
  }
}

export const getStoreCategories = async (page = 1, limit = 20, query = "") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/categories?page=${page}&limit=${limit}${query ? `&q=${query}` : ""}`
  console.log(`[v0] [getStoreCategories] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getStoreCategories] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getStoreCategories] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getStoreCategories] Error:`, error)
    throw error
  }
}

export const getCategoryProducts = async (categoryId: string, page = 1, limit = 20, query = "") => {
  const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/categories/${categoryId}/products?page=${page}&limit=${limit}${query ? `&q=${query}` : ""}`
  console.log(`[v0] [getCategoryProducts] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getCategoryProducts] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getCategoryProducts] Response data:`, data)
    return data
  } catch (error) {
    console.error(`[v0] [getCategoryProducts] Error:`, error)
    throw error
  }
}

export const getCategoryByIdFromList = async (categoryId: string) => {
  console.log(`[v0] [getCategoryByIdFromList] Looking for category: ${categoryId}`)

try {
    const response = await getStoreCategories(1, 100, "")
    if (response.status === "success") {
      const category = response.data.categories.find((cat: any) => cat._id === categoryId)
      if (category) {
        console.log(`[v0] [getCategoryByIdFromList] Found category:`, category)
        return { status: "success", data: category }
      }
    }
    console.log(`[v0] [getCategoryByIdFromList] Category not found`)
    return { status: "error", message: "Category not found" }
  } catch (error) {
    console.error(`[v0] [getCategoryByIdFromList] Error:`, error)
    throw error
  }
}

export const getFeaturedProducts = async (
  page = 1,
  limit = 20,
  query = "",
  sortBy = "createdAt",
  sortOrder = "desc",
  minPrice: number | null = null,
  maxPrice: number | null = null,
) => {
  let queryParams = `page=${page}&limit=${limit}`
  if (query) queryParams += `&q=${query}`
  if (sortBy) queryParams += `&sortBy=${sortBy}`
  if (sortOrder) queryParams += `&sortOrder=${sortOrder}`
  if (minPrice !== null) queryParams += `&minPrice=${minPrice}`
  if (maxPrice !== null) queryParams += `&maxPrice=${maxPrice}`

const url = `${BASE_URL}/storefront/v1/stores/${STORE_ID}/featured-products?${queryParams}`
  console.log(`[v0] [getFeaturedProducts] Fetching: ${url}`)

try {
    const response = await fetch(url, { method: "GET" })

console.log(`[v0] [getFeaturedProducts] Response status: ${response.status} ${response.statusText}`)

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()
    console.log(`[v0] [getFeaturedProducts] Response data:`, data)
    
    // Filter out products where isActive is false
    if (data.status === "success" && data.data?.products) {
      data.data.products = data.data.products.filter((product: any) => product.isActive !== false)
    }
    
    return data
  } catch (error) {
    console.error(`[v0] [getFeaturedProducts] Error:`, error)
    throw error
  }
}
[V0_FILE]typescript:file="types/homepage-config.ts" isMerged="true"
export interface StyledElement {
  className: string
}

export interface TextElement extends StyledElement {
  text?: string
  textKey?: string
}

export interface ButtonConfig extends StyledElement {
  visible?: boolean
  text?: string
  textKey?: string
  href: string
  icon?: string
  iconClassName?: string
}

export interface BadgeConfig extends StyledElement {
  visible: boolean
  text: string
  icon: string
  iconClassName: string
}

export interface HeroConfig {
  visible: boolean
  section: StyledElement
  container: StyledElement
  contentWrapper: StyledElement
  badge: BadgeConfig
  title: TextElement & { showStoreName: boolean; storeNameClassName: string }
  subtitle: TextElement
  buttonsContainer: StyledElement
  primaryButton: ButtonConfig
  secondaryButton: ButtonConfig
}

export interface CategoriesSectionConfig {
  visible: boolean
  section: StyledElement
  header: StyledElement
  title: TextElement
  subtitle: TextElement
  layout: {
    maxCategories: number
    gridClassName: string
    skeletonCount: number
  }
  card: StyledElement
  categoryName: StyledElement
  viewAllButton: ButtonConfig
  viewAllMobileButton: ButtonConfig
  skeleton: StyledElement
}

export interface FeaturedProductsConfig {
  visible: boolean
  section: StyledElement
  container: StyledElement
  headerWrapper: StyledElement
  title: TextElement
  subtitle: TextElement
  layout: StyledElement
  productCard: {
    className: string
    imageClassName: string
    overlayClassName: string
  }
  productName: StyledElement
  productPrice: StyledElement
  originalPrice: StyledElement
  discountBadge: StyledElement
  saleBadge: StyledElement
  featuredBadge: StyledElement
  quickAddButton: StyledElement
  addToCartButton: StyledElement
  loading: StyledElement
  viewAllFeaturedButton: ButtonConfig
  viewAllProductsButton: ButtonConfig
  bottomButtons: StyledElement
}

export interface HomepageConfig {
  hero: HeroConfig
  categoriesSection: CategoriesSectionConfig
  featuredProducts: FeaturedProductsConfig
}
[V0_FILE]typescript:file="lib/color-utils.ts" isMerged="true"
export function hexToHsl(hex: string): { h: number; s: number; l: number } {
  hex = hex.replace(/^#/, "")
  const r = parseInt(hex.substring(0, 2), 16) / 255
  const g = parseInt(hex.substring(2, 4), 16) / 255
  const b = parseInt(hex.substring(4, 6), 16) / 255

const max = Math.max(r, g, b)
  const min = Math.min(r, g, b)
  let h = 0
  let s = 0
  const l = (max + min) / 2

if (max !== min) {
    const d = max - min
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
    switch (max) {
      case r:
        h = ((g - b) / d + (g < b ? 6 : 0)) / 6
        break
      case g:
        h = ((b - r) / d + 2) / 6
        break
      case b:
        h = ((r - g) / d + 4) / 6
        break
    }
  }

return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100),
  }
}

function adjustLightness(hsl: { h: number; s: number; l: number }, amount: number) {
  return {
    h: hsl.h,
    s: hsl.s,
    l: Math.min(100, Math.max(0, hsl.l + amount)),
  }
}

export function generateCssVariables(primaryHex: string, secondaryHex: string): string {
  const primary = hexToHsl(primaryHex)
  const secondary = hexToHsl(secondaryHex)

const primaryForeground = adjustLightness(primary, primary.l > 50 ? -50 : 50)
  const accent = adjustLightness(secondary, 30)
  const accentForeground = adjustLightness(secondary, -40)
  const ring = primary

const darkPrimary = adjustLightness(primary, 10)
  const darkPrimaryForeground = adjustLightness(primary, primary.l > 50 ? -60 : 60)
  const darkAccent = adjustLightness(secondary, -20)
  const darkAccentForeground = adjustLightness(secondary, 40)

return `
:root {
  --primary: ${primary.h} ${primary.s}% ${primary.l}%;
  --primary-foreground: ${primaryForeground.h} ${primaryForeground.s}% ${primaryForeground.l}%;
  --accent: ${accent.h} ${accent.s}% ${accent.l}%;
  --accent-foreground: ${accentForeground.h} ${accentForeground.s}% ${accentForeground.l}%;
  --ring: ${ring.h} ${ring.s}% ${ring.l}%;
}
.dark {
  --primary: ${darkPrimary.h} ${darkPrimary.s}% ${darkPrimary.l}%;
  --primary-foreground: ${darkPrimaryForeground.h} ${darkPrimaryForeground.s}% ${darkPrimaryForeground.l}%;
  --accent: ${darkAccent.h} ${darkAccent.s}% ${darkAccent.l}%;
  --accent-foreground: ${darkAccentForeground.h} ${darkAccentForeground.s}% ${darkAccentForeground.l}%;
  --ring: ${ring.h} ${ring.s}% ${ring.l}%;
}
  `.trim()
}
[V0_FILE]typescript:file="config/presets/bold-minimal.ts" isMerged="true"
import type { HomepageConfig } from "@/types/homepage-config"

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-white dark:bg-black overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border-black dark:border-white text-black dark:text-white bg-transparent px-4 py-2 uppercase tracking-widest text-xs font-bold rounded-none",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-4 h-4 mr-2 fill-black dark:fill-white",
    },
    title: {
      className: "text-6xl md:text-8xl font-black text-black dark:text-white mb-6 leading-none uppercase tracking-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block",
    },
    subtitle: {
      className: "text-lg text-black/60 dark:text-white/60 mb-8 max-w-2xl mx-auto leading-relaxed uppercase tracking-widest text-xs",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-black dark:bg-white text-white dark:text-black hover:bg-black/80 dark:hover:bg-white/80 text-sm px-10 py-6 rounded-none uppercase tracking-widest font-bold border-0",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "border-2 border-black dark:border-white text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black text-sm px-10 py-6 rounded-none uppercase tracking-widest font-bold bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-4xl font-black text-black dark:text-white uppercase tracking-tight",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-black/50 dark:text-white/50 mt-2 uppercase tracking-widest text-xs",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-4", skeletonCount: 4 },
    card: { className: "hover:shadow-none transition-shadow cursor-pointer h-full border-2 border-black dark:border-white rounded-none bg-white dark:bg-black" },
    categoryName: { className: "font-bold text-lg text-center text-black dark:text-white uppercase tracking-widest" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black rounded-none uppercase tracking-widest text-xs font-bold",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-black dark:border-white text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black rounded-none uppercase tracking-widest font-bold bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-gray-100 dark:bg-gray-900 border-2 border-gray-200 dark:border-gray-800 rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-white dark:bg-black" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-6xl font-black text-black dark:text-white mb-4 uppercase tracking-tight",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-black/50 dark:text-white/50 max-w-2xl mx-auto uppercase tracking-widest text-xs",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-none transition-all duration-300 border-2 border-black dark:border-white rounded-none bg-white dark:bg-black h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover grayscale group-hover:grayscale-0 transition-all duration-500 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-bold text-lg text-black dark:text-white mb-3 group-hover:text-black/70 dark:group-hover:text-white/70 transition-colors cursor-pointer line-clamp-2 h-14 leading-7 uppercase" },
    productPrice: { className: "text-2xl font-black text-black dark:text-white" },
    originalPrice: { className: "text-lg text-black/40 dark:text-white/40 line-through" },
    discountBadge: { className: "bg-black dark:bg-white text-white dark:text-black text-xs rounded-none font-bold uppercase" },
    saleBadge: { className: "absolute top-4 left-4 bg-black text-white rounded-none font-bold uppercase" },
    featuredBadge: { className: "absolute top-4 right-4 bg-black text-white rounded-none font-bold uppercase" },
    quickAddButton: { className: "bg-white dark:bg-black text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-900 border-2 border-black dark:border-white rounded-none" },
    addToCartButton: { className: "w-full bg-black dark:bg-white text-white dark:text-black hover:bg-black/80 dark:hover:bg-white/80 rounded-none uppercase tracking-widest font-bold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-black dark:border-white mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-black dark:border-white text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black rounded-none uppercase tracking-widest font-bold bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-black dark:border-white text-black dark:text-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black rounded-none uppercase tracking-widest font-bold bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

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

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-gradient-to-b from-rose-50 to-white dark:from-gray-900 dark:to-gray-950 overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border-rose-300 dark:border-rose-400 text-rose-600 dark:text-rose-300 bg-rose-50 dark:bg-rose-950/30 px-6 py-2 rounded-full text-xs tracking-wider font-medium",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-rose-400",
    },
    title: {
      className: "text-5xl md:text-7xl font-light text-gray-800 dark:text-gray-100 mb-6 leading-tight tracking-wide",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block font-extralight italic text-rose-400",
    },
    subtitle: {
      className: "text-lg text-gray-500 dark:text-gray-400 mb-10 max-w-xl mx-auto leading-relaxed font-light",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-rose-400 hover:bg-rose-500 text-white text-sm px-10 py-6 rounded-full tracking-wider font-medium border-0 shadow-lg shadow-rose-200 dark:shadow-rose-900/20",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border border-rose-300 dark:border-rose-400 text-rose-500 dark:text-rose-300 hover:bg-rose-50 dark:hover:bg-rose-950/30 text-sm px-10 py-6 rounded-full tracking-wider font-medium bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-3xl font-light text-gray-800 dark:text-gray-100 tracking-wide",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-gray-400 mt-2 font-light text-sm",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:shadow-rose-100 dark:hover:shadow-none transition-all duration-500 cursor-pointer h-full border border-rose-100 dark:border-gray-800 rounded-3xl bg-white dark:bg-gray-900" },
    categoryName: { className: "font-medium text-lg text-center text-gray-700 dark:text-gray-200 tracking-wide" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-rose-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/30 rounded-full font-medium tracking-wide",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-rose-300 text-rose-400 hover:bg-rose-50 rounded-full tracking-wider font-medium bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-rose-50 dark:bg-gray-900 border border-rose-100 dark:border-gray-800 rounded-3xl" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-gradient-to-b from-white to-rose-50/50 dark:from-gray-950 dark:to-gray-900" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-5xl font-light text-gray-800 dark:text-gray-100 mb-4 tracking-wide",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-gray-400 max-w-2xl mx-auto font-light",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:shadow-rose-100 dark:hover:shadow-none transition-all duration-500 border border-rose-100 dark:border-gray-800 rounded-3xl bg-white dark:bg-gray-900 h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-700 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-rose-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center",
    },
    productName: { className: "font-medium text-lg text-gray-700 dark:text-gray-200 mb-3 group-hover:text-rose-400 transition-colors cursor-pointer line-clamp-2 h-14 leading-7 tracking-wide" },
    productPrice: { className: "text-2xl font-light text-gray-800 dark:text-gray-100" },
    originalPrice: { className: "text-lg text-gray-300 dark:text-gray-600 line-through" },
    discountBadge: { className: "bg-rose-100 dark:bg-rose-900/30 text-rose-500 text-xs rounded-full font-medium" },
    saleBadge: { className: "absolute top-4 left-4 bg-rose-400 text-white rounded-full font-medium" },
    featuredBadge: { className: "absolute top-4 right-4 bg-amber-100 text-amber-700 rounded-full font-medium" },
    quickAddButton: { className: "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-rose-50 dark:hover:bg-gray-700 border border-rose-200 dark:border-gray-700 rounded-full" },
    addToCartButton: { className: "w-full bg-rose-400 text-white hover:bg-rose-500 rounded-full font-medium tracking-wider" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-rose-400 mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-rose-300 text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/30 rounded-full tracking-wider font-medium bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-rose-300 text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/30 rounded-full tracking-wider font-medium bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

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

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-yellow-50 dark:bg-gray-950 overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border-[3px] border-black dark:border-lime-400 text-black dark:text-lime-400 bg-lime-400 dark:bg-transparent px-5 py-2 rounded-none text-sm font-black uppercase shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(163,230,53,1)]",
      text: "New Drop Alert!",
      icon: "Star",
      iconClassName: "w-4 h-4 mr-2 fill-black dark:fill-lime-400",
    },
    title: {
      className: "text-6xl md:text-8xl font-black text-black dark:text-white mb-6 leading-none",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-lime-500 dark:text-lime-400 -rotate-2 inline-block",
    },
    subtitle: {
      className: "text-xl text-black/70 dark:text-gray-300 mb-8 max-w-2xl mx-auto leading-relaxed font-bold",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-black dark:bg-lime-400 text-white dark:text-black hover:translate-x-1 hover:translate-y-1 hover:shadow-none text-lg px-10 py-6 rounded-none font-black uppercase border-[3px] border-black dark:border-lime-400 shadow-[6px_6px_0_0_rgba(163,230,53,1)] dark:shadow-[6px_6px_0_0_rgba(0,0,0,1)] transition-all",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "bg-white dark:bg-transparent border-[3px] border-black dark:border-white text-black dark:text-white hover:bg-lime-400 dark:hover:bg-lime-400 hover:text-black hover:translate-x-1 hover:translate-y-1 hover:shadow-none text-lg px-10 py-6 rounded-none font-black uppercase shadow-[6px_6px_0_0_rgba(0,0,0,1)] transition-all",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-4xl font-black text-black dark:text-white",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-black/60 dark:text-gray-400 mt-2 font-bold",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all duration-200 cursor-pointer h-full border-[3px] border-black dark:border-white rounded-none bg-white dark:bg-gray-900 shadow-[6px_6px_0_0_rgba(0,0,0,1)] dark:shadow-[6px_6px_0_0_rgba(255,255,255,0.3)]" },
    categoryName: { className: "font-black text-lg text-center text-black dark:text-white uppercase" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-black dark:text-white hover:bg-lime-400 hover:text-black rounded-none font-black uppercase border-[3px] border-black dark:border-white shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-[3px] border-black dark:border-white text-black dark:text-white hover:bg-lime-400 hover:text-black rounded-none font-black uppercase shadow-[6px_6px_0_0_rgba(0,0,0,1)] hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-yellow-50 dark:bg-gray-900 border-[3px] border-gray-300 dark:border-gray-700 rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-yellow-50 dark:bg-gray-950" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-5xl md:text-6xl font-black text-black dark:text-white mb-4",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-black/60 dark:text-gray-400 max-w-2xl mx-auto font-bold text-lg",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all duration-200 border-[3px] border-black dark:border-white rounded-none bg-white dark:bg-gray-900 h-full flex flex-col relative shadow-[6px_6px_0_0_rgba(0,0,0,1)] dark:shadow-[6px_6px_0_0_rgba(255,255,255,0.3)]",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-lime-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-black text-lg text-black dark:text-white mb-3 group-hover:text-lime-600 dark:group-hover:text-lime-400 transition-colors cursor-pointer line-clamp-2 h-14 leading-7 uppercase" },
    productPrice: { className: "text-2xl font-black text-black dark:text-white" },
    originalPrice: { className: "text-lg text-black/40 dark:text-white/40 line-through" },
    discountBadge: { className: "bg-lime-400 text-black text-xs rounded-none font-black uppercase" },
    saleBadge: { className: "absolute top-4 left-4 bg-lime-400 text-black rounded-none font-black uppercase border-[3px] border-black" },
    featuredBadge: { className: "absolute top-4 right-4 bg-black text-lime-400 rounded-none font-black uppercase border-[3px] border-black" },
    quickAddButton: { className: "bg-white dark:bg-gray-900 text-black dark:text-white hover:bg-lime-400 hover:text-black border-[3px] border-black dark:border-white rounded-none font-black" },
    addToCartButton: { className: "w-full bg-black dark:bg-lime-400 text-white dark:text-black hover:bg-lime-500 hover:text-black rounded-none font-black uppercase border-[3px] border-black dark:border-lime-400" },
    loading: { className: "animate-spin rounded-none h-12 w-12 border-b-4 border-black dark:border-lime-400 mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-[3px] border-black dark:border-white text-black dark:text-white hover:bg-lime-400 hover:text-black rounded-none font-black uppercase shadow-[6px_6px_0_0_rgba(0,0,0,1)] hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-[3px] border-black dark:border-white text-black dark:text-white hover:bg-lime-400 hover:text-black rounded-none font-black uppercase shadow-[6px_6px_0_0_rgba(0,0,0,1)] hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

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

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-gradient-to-br from-indigo-950 via-purple-900 to-cyan-900 overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-white/20 text-white/90 bg-white/10 backdrop-blur-xl px-6 py-2 rounded-full text-xs tracking-wider font-medium",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-cyan-400",
    },
    title: {
      className: "text-5xl md:text-7xl font-bold text-white mb-6 leading-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block bg-gradient-to-r from-cyan-400 to-indigo-400 bg-clip-text text-transparent",
    },
    subtitle: {
      className: "text-lg text-white/60 mb-10 max-w-2xl mx-auto leading-relaxed",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-gradient-to-r from-cyan-500 to-indigo-500 hover:from-cyan-400 hover:to-indigo-400 text-white text-lg px-10 py-6 rounded-2xl font-semibold border-0 shadow-lg shadow-cyan-500/25",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "border border-white/20 text-white hover:bg-white/10 backdrop-blur-xl text-lg px-10 py-6 rounded-2xl font-semibold bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-3xl font-bold text-gray-900 dark:text-white",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-gray-500 dark:text-gray-400 mt-2",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-500 cursor-pointer h-full border border-gray-200 dark:border-white/10 rounded-2xl bg-white dark:bg-white/5 dark:backdrop-blur-xl" },
    categoryName: { className: "font-semibold text-lg text-center text-gray-800 dark:text-white" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-indigo-500 dark:text-cyan-400 hover:bg-indigo-50 dark:hover:bg-white/10 rounded-2xl font-medium",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-indigo-300 dark:border-white/20 text-indigo-500 dark:text-cyan-400 hover:bg-indigo-50 dark:hover:bg-white/10 rounded-2xl font-medium bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-gray-100 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-gray-50 dark:bg-gray-950" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-500 border border-gray-200 dark:border-white/10 rounded-2xl bg-white dark:bg-white/5 dark:backdrop-blur-xl h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-700 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-gradient-to-t from-indigo-500/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center",
    },
    productName: { className: "font-semibold text-lg text-gray-800 dark:text-white mb-3 group-hover:text-indigo-500 dark:group-hover:text-cyan-400 transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-2xl font-bold text-gray-900 dark:text-white" },
    originalPrice: { className: "text-lg text-gray-400 dark:text-gray-500 line-through" },
    discountBadge: { className: "bg-indigo-100 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-300 text-xs rounded-full font-medium" },
    saleBadge: { className: "absolute top-4 left-4 bg-gradient-to-r from-cyan-500 to-indigo-500 text-white rounded-full font-medium" },
    featuredBadge: { className: "absolute top-4 right-4 bg-amber-400/90 text-black rounded-full font-medium" },
    quickAddButton: { className: "bg-white/90 dark:bg-white/10 backdrop-blur-xl text-gray-800 dark:text-white hover:bg-white dark:hover:bg-white/20 border border-gray-200 dark:border-white/20 rounded-2xl" },
    addToCartButton: { className: "w-full bg-gradient-to-r from-cyan-500 to-indigo-500 text-white hover:from-cyan-400 hover:to-indigo-400 rounded-2xl font-semibold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500 mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-indigo-300 dark:border-white/20 text-indigo-500 dark:text-cyan-400 hover:bg-indigo-50 dark:hover:bg-white/10 rounded-2xl font-medium bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-indigo-300 dark:border-white/20 text-indigo-500 dark:text-cyan-400 hover:bg-indigo-50 dark:hover:bg-white/10 rounded-2xl font-medium bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

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

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[70svh] bg-blue-50 dark:bg-gray-900 overflow-hidden" },
    container: { className: "container mx-auto px-4 min-h-[70svh] flex items-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-blue-600 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/30 px-4 py-1 rounded-lg text-xs font-semibold",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-1 fill-blue-600 dark:fill-blue-400",
    },
    title: {
      className: "text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4 leading-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-blue-600 dark:text-blue-400",
    },
    subtitle: {
      className: "text-base text-gray-600 dark:text-gray-400 mb-6 max-w-xl mx-auto",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-3 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-blue-600 hover:bg-blue-700 text-white text-sm px-8 py-5 rounded-lg font-semibold border-0",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400 hover:bg-blue-600 hover:text-white text-sm px-8 py-5 rounded-lg font-semibold bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-12 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-6" },
    title: {
      className: "text-2xl font-bold text-gray-900 dark:text-white",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-gray-500 dark:text-gray-400 mt-1 text-sm",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-3", skeletonCount: 4 },
    card: { className: "hover:shadow-md transition-shadow cursor-pointer h-full border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800" },
    categoryName: { className: "font-semibold text-base text-center text-gray-800 dark:text-white" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-950/30 rounded-lg font-semibold text-sm",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:bg-blue-50 rounded-lg font-semibold bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-12 bg-white dark:bg-gray-900" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-10" },
    title: {
      className: "text-3xl font-bold text-gray-900 dark:text-white mb-2",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto text-sm",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
    productCard: {
      className: "group overflow-hidden hover:shadow-md transition-all duration-300 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 h-full flex flex-col relative",
      imageClassName: "w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-semibold text-base text-gray-800 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors cursor-pointer line-clamp-2 h-12 leading-6" },
    productPrice: { className: "text-xl font-bold text-gray-900 dark:text-white" },
    originalPrice: { className: "text-base text-gray-400 line-through" },
    discountBadge: { className: "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-xs rounded-lg font-semibold" },
    saleBadge: { className: "absolute top-3 left-3 bg-red-600 text-white rounded-lg font-semibold text-xs" },
    featuredBadge: { className: "absolute top-3 right-3 bg-yellow-500 text-black rounded-lg font-semibold text-xs" },
    quickAddButton: { className: "bg-white dark:bg-gray-700 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600 rounded-lg" },
    addToCartButton: { className: "w-full bg-blue-600 text-white hover:bg-blue-700 rounded-lg font-semibold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-base px-6 py-5 border border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-950/30 rounded-lg font-semibold bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-base px-6 py-5 border border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-950/30 rounded-lg font-semibold bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-10 flex flex-col md:flex-row gap-3 justify-center items-center" },
  },
}

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

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-[#0a0a0a] overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-amber-400/30 text-amber-400 bg-amber-400/5 px-6 py-2 rounded-none text-[10px] tracking-[0.3em] font-light uppercase",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-amber-400",
    },
    title: {
      className: "text-5xl md:text-7xl font-extralight text-white mb-8 leading-tight tracking-[0.05em]",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-amber-400 font-thin tracking-[0.2em]",
    },
    subtitle: {
      className: "text-sm text-white/40 mb-12 max-w-xl mx-auto leading-relaxed tracking-[0.15em] uppercase font-light",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-6 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-amber-400 hover:bg-amber-300 text-black text-xs px-12 py-6 rounded-none tracking-[0.3em] uppercase font-light border-0",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-3 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border border-amber-400/30 text-amber-400 hover:bg-amber-400/10 text-xs px-12 py-6 rounded-none tracking-[0.3em] uppercase font-light bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-16" },
    title: {
      className: "text-3xl font-extralight text-white tracking-[0.1em]",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-white/30 mt-3 tracking-[0.15em] uppercase text-xs font-light",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:border-amber-400/40 transition-all duration-700 cursor-pointer h-full border border-white/10 rounded-none bg-[#111111]" },
    categoryName: { className: "font-light text-lg text-center text-white/80 tracking-[0.1em]" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-amber-400 hover:bg-amber-400/10 rounded-none tracking-[0.2em] uppercase text-xs font-light",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-amber-400/30 text-amber-400 hover:bg-amber-400/10 rounded-none tracking-[0.2em] uppercase font-light bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-[#111111] border border-white/5 rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-24 bg-[#0a0a0a]" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-20" },
    title: {
      className: "text-4xl md:text-5xl font-extralight text-white mb-6 tracking-[0.1em]",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-white/30 max-w-2xl mx-auto tracking-[0.15em] uppercase text-xs font-light",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10" },
    productCard: {
      className: "group overflow-hidden hover:border-amber-400/30 transition-all duration-700 border border-white/10 rounded-none bg-[#111111] h-full flex flex-col relative",
      imageClassName: "w-full h-72 object-cover group-hover:scale-105 transition-transform duration-1000 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-amber-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700 flex items-center justify-center",
    },
    productName: { className: "font-light text-lg text-white/80 mb-3 group-hover:text-amber-400 transition-colors duration-500 cursor-pointer line-clamp-2 h-14 leading-7 tracking-wide" },
    productPrice: { className: "text-2xl font-extralight text-white tracking-wide" },
    originalPrice: { className: "text-lg text-white/20 line-through font-light" },
    discountBadge: { className: "bg-amber-400/10 text-amber-400 text-xs rounded-none font-light tracking-widest" },
    saleBadge: { className: "absolute top-4 left-4 bg-amber-400 text-black rounded-none font-light tracking-widest text-xs" },
    featuredBadge: { className: "absolute top-4 right-4 bg-white/10 text-amber-400 rounded-none font-light tracking-widest text-xs" },
    quickAddButton: { className: "bg-[#111111] text-white/80 hover:bg-amber-400/10 hover:text-amber-400 border border-white/10 rounded-none tracking-widest text-xs" },
    addToCartButton: { className: "w-full bg-amber-400 text-black hover:bg-amber-300 rounded-none tracking-[0.2em] uppercase font-light text-sm" },
    loading: { className: "animate-spin rounded-none h-12 w-12 border-b border-amber-400 mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-sm px-10 py-6 border border-amber-400/30 text-amber-400 hover:bg-amber-400/10 rounded-none tracking-[0.2em] uppercase font-light bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-sm px-10 py-6 border border-amber-400/30 text-amber-400 hover:bg-amber-400/10 rounded-none tracking-[0.2em] uppercase font-light bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-16 flex flex-col md:flex-row gap-6 justify-center items-center" },
  },
}

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

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-orange-50 dark:bg-gray-950 overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border-2 border-orange-500 text-orange-600 dark:text-orange-400 bg-orange-100 dark:bg-orange-950/30 px-5 py-2 rounded-[2rem] text-sm font-extrabold",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-4 h-4 mr-2 fill-orange-500",
    },
    title: {
      className: "text-5xl md:text-8xl font-extrabold text-gray-900 dark:text-white mb-6 leading-none",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-orange-500 dark:text-orange-400",
    },
    subtitle: {
      className: "text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto leading-relaxed font-medium",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-orange-500 hover:bg-orange-600 hover:scale-105 hover:-rotate-1 text-white text-lg px-10 py-6 rounded-[2rem] font-extrabold border-0 shadow-xl shadow-orange-200 dark:shadow-orange-900/20 transition-all",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "border-2 border-orange-500 text-orange-500 dark:text-orange-400 hover:bg-orange-500 hover:text-white hover:scale-105 hover:rotate-1 text-lg px-10 py-6 rounded-[2rem] font-extrabold shadow-xl transition-all bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-16 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-10" },
    title: {
      className: "text-4xl font-extrabold text-gray-900 dark:text-white",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-gray-500 dark:text-gray-400 mt-2 font-medium",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:scale-105 hover:-rotate-1 transition-all duration-300 cursor-pointer h-full border-2 border-orange-200 dark:border-gray-700 rounded-[2rem] bg-white dark:bg-gray-800" },
    categoryName: { className: "font-extrabold text-lg text-center text-gray-800 dark:text-white" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-orange-500 hover:bg-orange-50 dark:hover:bg-orange-950/30 rounded-[2rem] font-extrabold",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white rounded-[2rem] font-extrabold bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-orange-50 dark:bg-gray-800 border-2 border-orange-100 dark:border-gray-700 rounded-[2rem]" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-white dark:bg-gray-950" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-14" },
    title: {
      className: "text-5xl md:text-6xl font-extrabold text-gray-900 dark:text-white mb-4",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto font-medium text-lg",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:scale-[1.02] hover:-rotate-1 transition-all duration-300 border-2 border-orange-100 dark:border-gray-700 rounded-[2rem] bg-white dark:bg-gray-800 h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-orange-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-bold text-lg text-gray-800 dark:text-white mb-3 group-hover:text-orange-500 transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-2xl font-extrabold text-gray-900 dark:text-white" },
    originalPrice: { className: "text-lg text-gray-400 line-through" },
    discountBadge: { className: "bg-orange-100 dark:bg-orange-900/30 text-orange-600 text-xs rounded-[2rem] font-extrabold" },
    saleBadge: { className: "absolute top-4 left-4 bg-orange-500 text-white rounded-[2rem] font-extrabold" },
    featuredBadge: { className: "absolute top-4 right-4 bg-yellow-400 text-black rounded-[2rem] font-extrabold" },
    quickAddButton: { className: "bg-white dark:bg-gray-700 text-gray-800 dark:text-white hover:bg-orange-50 dark:hover:bg-gray-600 border-2 border-orange-200 dark:border-gray-600 rounded-[2rem] font-bold" },
    addToCartButton: { className: "w-full bg-orange-500 text-white hover:bg-orange-600 rounded-[2rem] font-extrabold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-4 border-orange-500 mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white rounded-[2rem] font-extrabold transition-all bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white rounded-[2rem] font-extrabold transition-all bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

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

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-stone-50 dark:bg-stone-950 overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: false,
      className: "",
      text: "",
      icon: "",
      iconClassName: "",
    },
    title: {
      className: "text-5xl md:text-8xl font-serif text-stone-900 dark:text-stone-100 mb-8 leading-[0.95] italic",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block not-italic font-normal tracking-tight",
    },
    subtitle: {
      className: "text-lg text-stone-500 dark:text-stone-400 mb-10 max-w-lg mx-auto leading-relaxed font-serif italic",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-6 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-transparent hover:bg-stone-900 hover:text-white dark:hover:bg-stone-100 dark:hover:text-black text-stone-900 dark:text-stone-100 text-sm px-10 py-6 rounded-none border-b-2 border-stone-900 dark:border-stone-100 font-serif italic tracking-wider",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-3 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "bg-transparent text-stone-500 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 text-sm px-10 py-6 rounded-none border-b border-stone-300 dark:border-stone-700 font-serif italic tracking-wider",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-24 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex items-center justify-between mb-16" },
    title: {
      className: "text-4xl font-serif text-stone-900 dark:text-stone-100 italic",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-stone-400 mt-2 font-serif italic text-sm",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-8", skeletonCount: 4 },
    card: { className: "hover:border-stone-900 dark:hover:border-stone-100 transition-all duration-500 cursor-pointer h-full border-b border-stone-200 dark:border-stone-800 rounded-none bg-transparent" },
    categoryName: { className: "font-serif italic text-xl text-center text-stone-700 dark:text-stone-300" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-stone-500 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 rounded-none font-serif italic underline underline-offset-4 hover:bg-transparent",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "text-stone-500 hover:text-stone-900 rounded-none font-serif italic underline underline-offset-4 border-none bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-stone-100 dark:bg-stone-900 border-b border-stone-200 dark:border-stone-800 rounded-none" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-24 bg-stone-50 dark:bg-stone-950" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-20" },
    title: {
      className: "text-4xl md:text-6xl font-serif text-stone-900 dark:text-stone-100 mb-4 italic",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-stone-400 max-w-lg mx-auto font-serif italic",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10" },
    productCard: {
      className: "group overflow-hidden hover:opacity-90 transition-all duration-700 border-none rounded-none bg-transparent h-full flex flex-col relative",
      imageClassName: "w-full h-80 object-cover group-hover:scale-[1.02] transition-transform duration-1000 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-stone-900/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700 flex items-center justify-center",
    },
    productName: { className: "font-serif italic text-xl text-stone-700 dark:text-stone-300 mb-3 group-hover:text-stone-900 dark:group-hover:text-stone-100 transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-xl font-normal text-stone-900 dark:text-stone-100 font-serif" },
    originalPrice: { className: "text-base text-stone-300 dark:text-stone-600 line-through font-serif" },
    discountBadge: { className: "bg-transparent text-stone-500 text-xs font-serif italic" },
    saleBadge: { className: "absolute top-4 left-4 bg-stone-900 dark:bg-stone-100 text-white dark:text-black rounded-none font-serif italic text-xs" },
    featuredBadge: { className: "absolute top-4 right-4 bg-transparent text-stone-900 dark:text-stone-100 rounded-none font-serif italic text-xs border-b border-stone-900 dark:border-stone-100" },
    quickAddButton: { className: "bg-stone-50 dark:bg-stone-900 text-stone-700 dark:text-stone-300 hover:bg-stone-900 hover:text-white dark:hover:bg-stone-100 dark:hover:text-black border-b border-stone-300 dark:border-stone-700 rounded-none font-serif italic" },
    addToCartButton: { className: "w-full bg-transparent text-stone-900 dark:text-stone-100 hover:bg-stone-900 hover:text-white dark:hover:bg-stone-100 dark:hover:text-black rounded-none border-b-2 border-stone-900 dark:border-stone-100 font-serif italic tracking-wider" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b border-stone-400 mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 text-stone-500 hover:text-stone-900 dark:hover:text-stone-100 rounded-none font-serif italic underline underline-offset-8 border-none bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 text-stone-500 hover:text-stone-900 dark:hover:text-stone-100 rounded-none font-serif italic underline underline-offset-8 border-none bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-16 flex flex-col md:flex-row gap-6 justify-center items-center" },
  },
}

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

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-[#0c0c0c] overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-4xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-emerald-500/30 text-emerald-400 bg-emerald-500/5 px-5 py-2 rounded-md text-xs font-mono tracking-wider",
      text: "// new_collection.launch()",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-emerald-400",
    },
    title: {
      className: "text-5xl md:text-7xl font-bold text-white mb-6 leading-tight font-mono",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-emerald-400",
    },
    subtitle: {
      className: "text-base text-gray-500 mb-10 max-w-2xl mx-auto leading-relaxed font-mono",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-emerald-500 hover:bg-emerald-400 text-black text-sm px-10 py-6 rounded-md font-mono font-bold border-0",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-5 h-5",
    },
    secondaryButton: {
      visible: true,
      className: "border border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10 text-sm px-10 py-6 rounded-md font-mono font-bold bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-3xl font-bold text-white font-mono",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-gray-600 mt-2 font-mono text-sm",
      text: "// browse_collection()",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-4", skeletonCount: 4 },
    card: { className: "hover:border-emerald-500/50 transition-all duration-300 cursor-pointer h-full border border-gray-800 rounded-md bg-[#111111]" },
    categoryName: { className: "font-mono font-bold text-base text-center text-gray-300" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-emerald-400 hover:bg-emerald-500/10 rounded-md font-mono font-bold text-sm",
      href: "/products?tab=categories",
      text: "view_all()",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10 rounded-md font-mono font-bold bg-transparent",
      href: "/products?tab=categories",
      text: "view_all_categories()",
    },
    skeleton: { className: "animate-pulse bg-[#111111] border border-gray-800 rounded-md" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-[#0c0c0c]" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-5xl font-bold text-white mb-4 font-mono",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-gray-600 max-w-2xl mx-auto font-mono text-sm",
      text: "// curated_selection.filter(featured)",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
    productCard: {
      className: "group overflow-hidden hover:border-emerald-500/40 transition-all duration-300 border border-gray-800 rounded-md bg-[#111111] h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",
    },
    productName: { className: "font-mono font-bold text-base text-gray-300 mb-3 group-hover:text-emerald-400 transition-colors cursor-pointer line-clamp-2 h-12 leading-6" },
    productPrice: { className: "text-2xl font-bold text-white font-mono" },
    originalPrice: { className: "text-lg text-gray-600 line-through font-mono" },
    discountBadge: { className: "bg-emerald-500/10 text-emerald-400 text-xs rounded-md font-mono font-bold" },
    saleBadge: { className: "absolute top-4 left-4 bg-emerald-500 text-black rounded-md font-mono font-bold text-xs" },
    featuredBadge: { className: "absolute top-4 right-4 bg-gray-800 text-emerald-400 rounded-md font-mono font-bold text-xs border border-emerald-500/30" },
    quickAddButton: { className: "bg-[#111111] text-gray-300 hover:bg-emerald-500/10 hover:text-emerald-400 border border-gray-700 rounded-md font-mono font-bold" },
    addToCartButton: { className: "w-full bg-emerald-500 text-black hover:bg-emerald-400 rounded-md font-mono font-bold" },
    loading: { className: "animate-spin rounded-md h-12 w-12 border-b-2 border-emerald-500 mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-sm px-8 py-6 border border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10 rounded-md font-mono font-bold bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-sm px-8 py-6 border border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10 rounded-md font-mono font-bold bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

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

const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-screen bg-[#f5f0ea] dark:bg-[#1a1612] overflow-hidden" },
    container: { className: "container mx-auto px-4 h-screen flex items-center" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      className: "border border-sienna-600 text-[#8B4513] dark:text-amber-200 bg-[#8B4513]/10 dark:bg-amber-900/20 px-5 py-2 rounded-2xl text-xs tracking-wider font-medium",
      text: "New Collection Available",
      icon: "Star",
      iconClassName: "w-3 h-3 mr-2 fill-[#8B4513] dark:fill-amber-300",
    },
    title: {
      className: "text-5xl md:text-7xl font-serif text-[#3E2723] dark:text-amber-50 mb-6 leading-tight",
      textKey: "hero.title",
      showStoreName: true,
      storeNameClassName: "block text-[#8B4513] dark:text-amber-300",
    },
    subtitle: {
      className: "text-lg text-[#5D4037] dark:text-amber-200/60 mb-10 max-w-xl mx-auto leading-relaxed",
      textKey: "hero.subtitle",
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 justify-center" },
    primaryButton: {
      visible: true,
      className: "bg-[#8B4513] hover:bg-[#6D3410] text-white text-sm px-10 py-6 rounded-2xl font-semibold border-0 shadow-lg shadow-[#8B4513]/20",
      textKey: "hero.shopNow",
      href: "/products",
      icon: "ArrowRight",
      iconClassName: "ml-2 w-4 h-4",
    },
    secondaryButton: {
      visible: true,
      className: "border border-[#8B4513] text-[#8B4513] dark:text-amber-300 dark:border-amber-300/30 hover:bg-[#8B4513]/10 text-sm px-10 py-6 rounded-2xl font-semibold bg-transparent",
      textKey: "hero.exploreCategories",
      href: "/products",
    },
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-20 px-4 md:px-6 lg:px-8 max-w-6xl mx-auto" },
    header: { className: "flex items-center justify-between mb-12" },
    title: {
      className: "text-3xl font-serif text-[#3E2723] dark:text-amber-50",
      textKey: "categories.title",
      text: "Shop by Category",
    },
    subtitle: {
      className: "text-[#8B7355] dark:text-amber-200/50 mt-2 text-sm",
      text: "Browse our collection by category",
    },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-6", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:shadow-[#8B4513]/5 transition-all duration-500 cursor-pointer h-full border border-[#D7CCC8] dark:border-amber-900/30 rounded-2xl bg-white dark:bg-[#1E1815]" },
    categoryName: { className: "font-serif text-lg text-center text-[#4E342E] dark:text-amber-100" },
    viewAllButton: {
      visible: true,
      className: "hidden md:flex text-[#8B4513] dark:text-amber-300 hover:bg-[#8B4513]/10 rounded-2xl font-medium",
      href: "/products?tab=categories",
      text: "View All",
    },
    viewAllMobileButton: {
      visible: true,
      className: "border border-[#8B4513] dark:border-amber-300/30 text-[#8B4513] dark:text-amber-300 hover:bg-[#8B4513]/10 rounded-2xl font-medium bg-transparent",
      href: "/products?tab=categories",
      text: "View All Categories",
    },
    skeleton: { className: "animate-pulse bg-[#EFEBE9] dark:bg-[#1E1815] border border-[#D7CCC8] dark:border-amber-900/30 rounded-2xl" },
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 bg-[#f5f0ea] dark:bg-[#1a1612]" },
    container: { className: "container mx-auto px-4" },
    headerWrapper: { className: "text-center mb-16" },
    title: {
      className: "text-4xl md:text-5xl font-serif text-[#3E2723] dark:text-amber-50 mb-4",
      textKey: "featured.title",
    },
    subtitle: {
      className: "text-[#8B7355] dark:text-amber-200/50 max-w-xl mx-auto",
      text: "Handpicked items from our store",
    },
    layout: { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:shadow-[#8B4513]/5 transition-all duration-500 border border-[#D7CCC8] dark:border-amber-900/30 rounded-2xl bg-white dark:bg-[#1E1815] h-full flex flex-col relative",
      imageClassName: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-700 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-[#8B4513]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center",
    },
    productName: { className: "font-serif text-lg text-[#4E342E] dark:text-amber-100 mb-3 group-hover:text-[#8B4513] dark:group-hover:text-amber-300 transition-colors cursor-pointer line-clamp-2 h-14 leading-7" },
    productPrice: { className: "text-2xl font-semibold text-[#3E2723] dark:text-amber-50" },
    originalPrice: { className: "text-lg text-[#BCAAA4] dark:text-amber-900/50 line-through" },
    discountBadge: { className: "bg-[#8B4513]/10 text-[#8B4513] dark:text-amber-300 text-xs rounded-2xl font-medium" },
    saleBadge: { className: "absolute top-4 left-4 bg-[#8B4513] text-white rounded-2xl font-medium" },
    featuredBadge: { className: "absolute top-4 right-4 bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 rounded-2xl font-medium" },
    quickAddButton: { className: "bg-white dark:bg-[#1E1815] text-[#4E342E] dark:text-amber-100 hover:bg-[#8B4513]/10 border border-[#D7CCC8] dark:border-amber-900/30 rounded-2xl" },
    addToCartButton: { className: "w-full bg-[#8B4513] text-white hover:bg-[#6D3410] rounded-2xl font-semibold" },
    loading: { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-[#8B4513] mx-auto mb-4" },
    viewAllFeaturedButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-[#8B4513] dark:border-amber-300/30 text-[#8B4513] dark:text-amber-300 hover:bg-[#8B4513]/10 rounded-2xl font-medium bg-transparent",
      textKey: "products.viewAllFeatured",
      href: "/featured",
    },
    viewAllProductsButton: {
      visible: true,
      className: "w-full text-lg px-8 py-6 border border-[#8B4513] dark:border-amber-300/30 text-[#8B4513] dark:text-amber-300 hover:bg-[#8B4513]/10 rounded-2xl font-medium bg-transparent",
      textKey: "products.viewAllProducts",
      href: "/products",
    },
    bottomButtons: { className: "text-center mt-12 flex flex-col md:flex-row gap-4 justify-center items-center" },
  },
}

export default preset
[V0_FILE]typescript:file="config/presets/index.ts" isMerged="true"
import type { HomepageConfig } from "@/types/homepage-config"
import boldMinimal from "./bold-minimal"
import softElegance from "./soft-elegance"
import neoBrutalist from "./neo-brutalist"
import gradientGlow from "./gradient-glow"
import classicCommerce from "./classic-commerce"
import darkLuxe from "./dark-luxe"
import playfulPop from "./playful-pop"
import editorial from "./editorial"
import techModern from "./tech-modern"
import warmArtisan from "./warm-artisan"

const presets: Record<string, HomepageConfig> = {
  "bold-minimal": boldMinimal,
  "soft-elegance": softElegance,
  "neo-brutalist": neoBrutalist,
  "gradient-glow": gradientGlow,
  "classic-commerce": classicCommerce,
  "dark-luxe": darkLuxe,
  "playful-pop": playfulPop,
  "editorial": editorial,
  "tech-modern": techModern,
  "warm-artisan": warmArtisan,
}

export default presets
[V0_FILE]typescript:file="lib/homepage-config.ts" isMerged="true"
import storeConfig from "@/config/store"
import presets from "@/config/presets"

const resolvedPreset = presets[storeConfig.presetId] ?? presets["bold-minimal"]

export const homepageConfig = resolvedPreset

export function getHeroConfig() {
  return homepageConfig.hero
}

export function getCategoriesSectionConfig() {
  return homepageConfig.categoriesSection
}

export function getFeaturedProductsConfig() {
  return homepageConfig.featuredProducts
}
[V0_FILE]typescript:file="lib/store-name.ts" isMerged="true"
import storeConfig from "@/config/store"

export function getStoreName(): string {
  return storeConfig.storeName || "Agora Builder Template"
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true"
import type { Metadata } from "next"
import storeConfig from "@/config/store"

export const metadata: Metadata = {
  title: `About Us - ${storeConfig.storeName}`,
  description: "Learn about our story, mission, and commitment to providing exceptional products and service.",
}

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          {/* Hero Section */}
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 text-balance">Our Story</h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto text-balance">
              Building exceptional experiences through quality products and innovative design
            </p>
          </div>

{/* Main Content */}
          <div className="grid md:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <h2 className="text-3xl font-bold text-foreground mb-6">Who We Are</h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed text-justify">
                <p>
                  Founded with a passion for excellence, Agora has been at the forefront of delivering premium products
                  that enhance everyday life. Our journey began with a simple belief: that quality and innovation should
                  be accessible to everyone.
                </p>
                <p>
                  We carefully curate each product in our collection, working directly with artisans and manufacturers
                  who share our commitment to craftsmanship and sustainability. Every item tells a story of dedication,
                  skill, and attention to detail.
                </p>
                <p>
                  Today, we serve customers worldwide, building lasting relationships through exceptional service and
                  products that stand the test of time.
                </p>
              </div>
            </div>
            <div className="bg-muted rounded-lg p-8">
              <div className="space-y-6">
                <div>
                  <h3 className="text-xl font-semibold text-foreground mb-2">Our Mission</h3>
                  <p className="text-muted-foreground text-justify">
                    To provide exceptional products that inspire and enhance the lives of our customers while supporting
                    sustainable practices and ethical manufacturing.
                  </p>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-foreground mb-2">Our Vision</h3>
                  <p className="text-muted-foreground text-justify">
                    To be the trusted destination for discerning customers who value quality, innovation, and
                    responsible business practices.
                  </p>
                </div>
              </div>
            </div>
          </div>

{/* Values Section */}
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-foreground text-center mb-12">Our Values</h2>
            <div className="grid md:grid-cols-3 gap-8">
              <div className="text-center">
                <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl text-primary-foreground">✨</span>
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-3">Quality First</h3>
                <p className="text-muted-foreground text-justify">
                  We never compromise on quality, ensuring every product meets our rigorous standards.
                </p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl text-primary-foreground">🌱</span>
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-3">Sustainability</h3>
                <p className="text-muted-foreground text-justify">
                  Environmental responsibility guides our sourcing and business practices.
                </p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl text-primary-foreground">🤝</span>
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-3">Customer Focus</h3>
                <p className="text-muted-foreground text-justify">
                  Your satisfaction and experience are at the heart of everything we do.
                </p>
              </div>
            </div>
          </div>

{/* Team Section */}
          <div className="text-center">
            <h2 className="text-3xl font-bold text-foreground mb-6">Meet Our Team</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto mb-8 text-justify">
              Our diverse team of passionate individuals works tirelessly to bring you the best products and service.
              From our buyers who travel the world to source unique items, to our customer service team who ensures your
              satisfaction, we're here for you.
            </p>
            <div className="bg-muted rounded-lg p-8">
              <p className="text-foreground font-medium text-justify">
                "We believe that great products have the power to inspire, connect, and transform lives. That's why
                we're committed to bringing you only the finest."
              </p>
              <p className="text-muted-foreground mt-4">— The Agora Team</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/terms/page.tsx" isMerged="true"
import type { Metadata } from "next"
import storeConfig from "@/config/store"

export const metadata: Metadata = {
  title: `Terms of Service - ${storeConfig.storeName}`,
  description: "Read our terms of service and understand your rights and responsibilities when using our platform.",
}

export default function TermsPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 text-balance">Terms of Service</h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto text-balance">
              Please read these terms carefully before using our services
            </p>
            <p className="text-sm text-muted-foreground mt-4">Last updated: December 2024</p>
          </div>

{/* Content */}
          <div className="prose prose-gray max-w-none">
            <div className="space-y-8">
              <section>
                <h2 className="text-2xl font-bold text-foreground mb-4">1. Acceptance of Terms</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    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.
                  </p>
                  <p>
                    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.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">2. Use License</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    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:
                  </p>
                  <ul className="list-disc pl-6 space-y-2">
                    <li>modify or copy the materials</li>
                    <li>use the materials for any commercial purpose or for any public display</li>
                    <li>attempt to reverse engineer any software contained on the website</li>
                    <li>remove any copyright or other proprietary notations from the materials</li>
                  </ul>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">3. Product Information and Pricing</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    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.
                  </p>
                  <p>
                    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.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">4. Orders and Payment</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    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.
                  </p>
                  <p>
                    We accept various forms of payment as indicated on our website. Payment must be received by us
                    before we ship any products to you.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">5. Shipping and Delivery</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    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.
                  </p>
                  <p>
                    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.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">6. Returns and Refunds</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    We offer a 30-day return policy for most items. Products must be returned in their original
                    condition with all tags and packaging intact.
                  </p>
                  <p>
                    Refunds will be processed within 5-10 business days after we receive your returned item. Original
                    shipping costs are non-refundable.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">7. Privacy Policy</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    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.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">8. Limitation of Liability</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    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.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">9. Governing Law</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    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.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">10. Contact Information</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>If you have any questions about these Terms of Service, please contact us at:</p>
                  <div className="bg-muted rounded-lg p-6">
                    <p className="font-medium text-foreground">Agora Customer Service</p>
                    <p>Email: legal@agora.com</p>
                    <p>Phone: 1-800-AGORA-01</p>
                    <p>Address: 123 Commerce Street, Suite 100, New York, NY 10001</p>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true"
import type { Config } from 'tailwindcss'

// all in fixtures is set to tailwind v3 as interims solutions

const config: Config = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './config/**/*.{js,ts,jsx,tsx,mdx}',
    './contexts/**/*.{js,ts,jsx,tsx,mdx}',
    './lib/**/*.{js,ts,jsx,tsx,mdx}',
    './services/**/*.{js,ts,jsx,tsx,mdx}',
    './hooks/**/*.{js,ts,jsx,tsx,mdx}',
    '*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          '1': 'hsl(var(--chart-1))',
          '2': 'hsl(var(--chart-2))',
          '3': 'hsl(var(--chart-3))',
          '4': 'hsl(var(--chart-4))',
          '5': 'hsl(var(--chart-5))',
        },
        sidebar: {
          DEFAULT: 'hsl(var(--sidebar-background))',
          foreground: 'hsl(var(--sidebar-foreground))',
          primary: 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          accent: 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          border: 'hsl(var(--sidebar-border))',
          ring: 'hsl(var(--sidebar-ring))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
}
export default config
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="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 { CustomThemeProvider } from "@/components/custom-theme-provider"
import { LanguageProvider } from "@/contexts/language-context"
import storeConfig from "@/config/store"
import { generateCssVariables } from "@/lib/color-utils"

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

export const metadata: Metadata = {
  title: storeConfig.metaTitle || `${storeConfig.storeName} - Modern E-commerce Store`,
  description: storeConfig.metaDescription || `Discover amazing products at ${storeConfig.storeName}.`,
  icons: {
    icon: storeConfig.favicon || "https://www.searchagora.com/favicon.ico",
  },
  openGraph: {
    title: storeConfig.metaTitle || `${storeConfig.storeName} - Modern E-commerce Store`,
    description: storeConfig.metaDescription || `Discover amazing products at ${storeConfig.storeName}.`,
    images: storeConfig.socialShareImage ? [{ url: storeConfig.socialShareImage }] : [],
  },
  twitter: {
    card: "summary_large_image",
    title: storeConfig.metaTitle || `${storeConfig.storeName} - Modern E-commerce Store`,
    description: storeConfig.metaDescription || `Discover amazing products at ${storeConfig.storeName}.`,
    images: storeConfig.socialShareImage ? [storeConfig.socialShareImage] : [],
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang={storeConfig.language || "en"} suppressHydrationWarning>
      <head>
        <style dangerouslySetInnerHTML={{ __html: colorOverrides }} />
      </head>
      <body className="bg-white dark:bg-gray-950 text-black dark:text-white transition-colors">
        <LanguageProvider>
          <CustomThemeProvider>
            <CartProvider>
              <Navbar />
              {children}
              <CartDrawer />
            </CartProvider>
          </CustomThemeProvider>
        </LanguageProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="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"
import { getHeroConfig } from "@/lib/homepage-config"

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

if (!cfg.visible) return null

return (
    <section className={cfg.section.className}>
      <div 
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url('https://images.unsplash.com/photo-150784272343-583f20270319?w=1200&h=600&fit=crop')`,
          backgroundAttachment: 'fixed',
        }}
      >
        <div className="absolute inset-0 bg-black/40"></div>
      </div>
      
      <div className={cfg.container.className}>
        <div className="w-full relative z-10">
          <div className={cfg.contentWrapper.className}>
            <div className="space-y-8">
              {cfg.badge.visible && (
                <Badge
                  variant="outline"
                  className={`${cfg.badge.className} bg-white/90 text-black border-white`}
                >
                  {cfg.badge.icon === "Star" && <Star className={cfg.badge.iconClassName} />}
                  {cfg.badge.text}
                </Badge>
              )}

<div>
                <h1 className={`${cfg.title.className} text-white drop-shadow-lg`}>
                  {cfg.title.showStoreName && (
                    <span className="block text-5xl md:text-6xl font-bold text-white mb-2">
                      {storeName}
                    </span>
                  )}
                  <span className="block text-2xl md:text-3xl font-light text-white/90">
                    Curated Stories, Endless Worlds
                  </span>
                </h1>

<p className={`${cfg.subtitle.className} text-white/80 text-lg drop-shadow-md`}>
                  Discover your next favorite book from our carefully selected collection
                </p>
              </div>

<div className={cfg.buttonsContainer.className}>
                {cfg.primaryButton.visible && (
                  <Link href={cfg.primaryButton.href}>
                    <Button
                      size="lg"
                      className="bg-amber-600 hover:bg-amber-700 text-white shadow-lg"
                    >
                      Start Browsing
                      {cfg.primaryButton.icon === "ArrowRight" && (
                        <ArrowRight className={cfg.primaryButton.iconClassName} />
                      )}
                    </Button>
                  </Link>
                )}
                {cfg.secondaryButton.visible && (
                  <Link href={`/products?tab=categories`}>
                    <Button
                      size="lg"
                      variant="outline"
                      className="bg-white/10 border-white text-white hover:bg-white/20 shadow-lg"
                    >
                      Explore Categories
                    </Button>
                  </Link>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/featured-products-page-client.tsx" isMerged="true"
"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, getProductCTA } = 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 ? getProductCTA(product.productKind) : t("cart.outOfStock")}
                            </Button>
                          </div>
                        </div>

<div className="p-6 flex flex-col flex-grow">
                          <Link href={`/product/${product._id}`}>
                            <h3 className="font-semibold text-lg text-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" />
                              ) : (
                                getProductCTA(product.productKind)
                              )}
                            </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="contexts/language-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import storeConfig from "@/config/store"

type Language = "en" | "ar"

type Currency = "USD" | "SAR"

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

type ProductKind = "physical" | "digital" | "service"

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
  t: (key: string) => string
  dir: "ltr" | "rtl"
  currency: CurrencyConfig
  formatPrice: (price: number) => string
  getProductCTA: (productKind?: ProductKind) => string
}

const defaultCurrency: CurrencyConfig = { code: "USD", symbol: "$", position: "before" }

const defaultT = (key: string): string => {
  const keys = key.split(".")
  const lastKey = keys[keys.length - 1]
  const readable = lastKey
    .replace(/([A-Z])/g, " $1")
    .replace(/^./, (str) => str.toUpperCase())
    .trim()
  return readable
}

const defaultFormatPrice = (price: number): string => {
  return `$${price.toFixed(2)}`
}

const defaultGetProductCTA = (productKind?: ProductKind): string => {
  if (productKind === "service") return "Book Service"
  if (productKind === "digital") return "Buy Now"
  return "Add to Cart"
}

const defaultContextValue: LanguageContextType = {
  language: "en",
  setLanguage: () => {},
  t: defaultT,
  dir: "ltr",
  currency: defaultCurrency,
  formatPrice: defaultFormatPrice,
  getProductCTA: defaultGetProductCTA,
}

const LanguageContext = createContext<LanguageContextType>(defaultContextValue)

const LANGUAGE_STORAGE_KEY = "app_language"

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

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

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

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

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

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

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

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

const currency = currencyConfig[language]

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

const getProductCTA = (productKind?: ProductKind): string => {
    if (productKind === "service") return t("cart.addToCartService")
    if (productKind === "digital") return t("cart.addToCartDigital")
    return t("cart.addToCartPhysical")
  }

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

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

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

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

const storeConfig: StoreConfig = {
  storeId: "69fc81c431a8a7f5507a0d0e",
  storeName: "PageTurners",
  apiBaseUrl: "https://stagingserver.searchagora.com",
  presetId: "warm-artisan",
  primaryColor: "",
  secondaryColor: "",
  metaTitle: "Agora Builder | PageTurners Haven Bookstore Intro",
  metaDescription: "Build an e-commerce store easily with AI. Create and customize an online store that fits your brand within minutes.",
  currency: "USD",
  language: "en",
  gtag: "",
  logo: "https://agora-profile-images.s3.amazonaws.com/stores/logos/pageturners-haven-bookstore-intro_logo_1778157147461_i8cx4f.jpeg",
  favicon: "https://www.searchagora.com/favicon.ico",
  socialShareImage: "https://www.searchagora.com/api/search-image-generator?query=PageTurners Haven Bookstore Intro",
}

export default storeConfig
[V0_FILE]typescriptreact:file="components/featured-products.tsx" isMerged="true"
"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"
import { getFeaturedProductsConfig } from "@/lib/homepage-config"

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

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

const featuredResponse = await getFeaturedProducts(1, 6)

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

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

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

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

fetchProducts()
  }, [])

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

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

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 (!cfg.visible) return null

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

if (error || !products || products.length === 0) {
    return (
      <section className={cfg.section.className}>
        <div className={cfg.container.className}>
          <div className={cfg.headerWrapper.className}>
            <h2 className={cfg.title.className}>Bestsellers & Staff Picks</h2>
            <p className={cfg.subtitle.className}>
              Handpicked items from our store
            </p>
          </div>
          <div className="text-center">
            <p className="text-gray-600 dark:text-gray-400">No books available</p>
          </div>
        </div>
      </section>
    )
  }

return (
    <section className={cfg.section.className}>
      <div className={cfg.container.className}>
      <div className={cfg.headerWrapper.className}>
        <h2 className={cfg.title.className}>Bestsellers & Staff Picks</h2>
        <p className={cfg.subtitle.className}>Discover books hand-picked by our team</p>
      </div>

<div className={cfg.layout.className}>
          {products.map((product) => {
            const firstVariant = product.variants?.[0]
            const variantIsOnSale = firstVariant?.isOnSale === true
            const variantOriginalPrice = firstVariant?.originalPrice
            const variantPrice = firstVariant?.price || product.price

const hasDiscountPercent = firstVariant
              ? (variantIsOnSale && variantOriginalPrice && variantOriginalPrice > variantPrice)
              : Boolean(product.discountPercentage && product.discountPercentage > 0)

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

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

{showSaleBadge ? (
                        <Badge className={cfg.saleBadge.className}>
                          {hasDiscountPercent && discountPercent > 0 ? `${discountPercent}% OFF` : t("common.sale")}
                        </Badge>
                      ) : null}

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

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

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

<div className="flex items-center gap-2 mb-4 h-8">
                        <span className={cfg.productPrice.className}>
                          {formatPrice(displayPrice)}
                        </span>
                        {hasDiscountPercent && originalPrice ? (
                          <>
                            <span className={cfg.originalPrice.className}>
                              {formatPrice(originalPrice)}
                            </span>
                            <Badge
                              variant="secondary"
                              className={cfg.discountBadge.className}
                            >
                              {discountPercent}% OFF
                            </Badge>
                          </>
                        ) : null}
                      </div>

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

<div className={cfg.bottomButtons.className}>
          {cfg.viewAllFeaturedButton.visible && (
            <Link href="/featured" className="w-full md:w-auto">
              <Button
                size="lg"
                variant="outline"
                className={cfg.viewAllFeaturedButton.className}
              >
                View All Featured
              </Button>
            </Link>
          )}
          {cfg.viewAllProductsButton.visible && (
            <Link href="/products" className="w-full md:w-auto">
              <Button
                size="lg"
                variant="outline"
                className={cfg.viewAllProductsButton.className}
              >
                Browse All Books
              </Button>
            </Link>
          )}
        </div>
      </div>
    </section>
  )
}

export { FeaturedProductsComponent as FeaturedProducts }
export default FeaturedProductsComponent
[V0_FILE]typescriptreact:file="app/products/page.tsx" isMerged="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 (
    <div className="min-h-screen bg-white dark:bg-gray-900 py-8 pt-24">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-black dark:text-white mb-8 text-center">Shop Our Collection</h1>
        
        <Tabs value={currentTab} onValueChange={handleTabChange} className="w-full">
          <div className="flex justify-center mb-8">
            <TabsList className="grid w-full max-w-md grid-cols-2 dark:bg-gray-800">
              <TabsTrigger value="products" className="dark:data-[state=active]:bg-gray-700 dark:text-white">
                All Books
              </TabsTrigger>
              <TabsTrigger value="categories" className="dark:data-[state=active]:bg-gray-700 dark:text-white">
                Categories
              </TabsTrigger>
            </TabsList>
          </div>

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

export default function ProductsPage() {
  return (
    <Suspense fallback={<div className="min-h-screen flex items-center justify-center">Loading...</div>}>
      <ProductsPageContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx"
"use client"

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

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

const storeName = getStoreName()

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

return (
    <nav className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
              {storeConfig.logo && (
                <Image
                  src={storeConfig.logo}
                  alt={storeName}
                  width={40}
                  height={40}
                  className="rounded-lg"
                />
              )}
              <span
                className="text-2xl font-bold text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition-colors truncate max-w-[150px] sm:max-w-[200px] md:max-w-[250px] lg:max-w-[300px] block"
                title={storeName}
              >
                {storeName}
              </span>
            </a>
          </div>

<div className="hidden md:flex items-center space-x-8 ml-8 lg:ml-12">
            <a
              href="/"
              className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium transition-colors"
            >
              Home
            </a>
            <a
              href="/products"
              className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium transition-colors"
            >
              Shop
            </a>
            <a
              href="/featured"
              className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium transition-colors"
            >
              Featured
            </a>
            <a
              href="/about"
              className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium transition-colors"
            >
              About
            </a>
            <a
              href="/contact"
              className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium transition-colors"
            >
              Contact
            </a>
          </div>

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

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

{isMenuOpen ? (
          <div className="md:hidden border-t border-gray-200 dark:border-gray-800 py-4">
            <div className="flex flex-col space-y-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" />
                <Input
                  type="search"
                  placeholder="Search books..."
                  className="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-black dark:text-white border-gray-300 dark:border-gray-700"
                />
              </div>
              <a
                href="/"
                className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Home
              </a>
              <a
                href="/products"
                className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Shop
              </a>
              <a
                href="/featured"
                className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Featured
              </a>
              <a
                href="/about"
                className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                About
              </a>
              <a
                href="/contact"
                className="text-black dark:text-white hover:text-amber-600 dark:hover:text-amber-400 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Contact
              </a>
            </div>
          </div>
        ) : null}
      </div>
    </nav>
  )
}</article></body></html>