[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]typescript:file="lib/store-name.ts" isMerged="true" import storeConfig from "@/config/store" export function getStoreName(): string { return storeConfig.storeName } [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]typescriptreact:file="app/terms/page.tsx" isMerged="true" import type { Metadata } from "next" export const metadata: Metadata = { title: "Terms of Service - Agora", description: "Read our terms of service and understand your rights and responsibilities when using our platform.", } export default function TermsPage() { return (

{/* Header */}

Terms of Service

Please read these terms carefully before using our services

Last updated: December 2024

{/* Content */}

1. Acceptance of Terms

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

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

2. Use License

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

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

3. Product Information and Pricing

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

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

4. Orders and Payment

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

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

5. Shipping and Delivery

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

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

6. Returns and Refunds

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

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

7. Privacy Policy

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

8. Limitation of Liability

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

9. Governing Law

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

10. Contact Information

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

Agora Customer Service

Email: legal@agora.com

Phone: 1-800-AGORA-01

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

) } [V0_FILE]typescript:file="types/product.ts" isQuickEdit="true" 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 interface Product { _id: string id?: string name: string description: string brand: string price: number variants?: ProductVariant[] images: string[] url: string slug: string currency: string country: string storeName: string source: string creator: string imageEmbedding?: number[] textEmbedding?: number[] priceHistory?: PriceHistory[] published_at?: Date last_updated?: Date isActive: boolean available: boolean categories?: string[] tags?: string[] sku?: string stock?: number rating?: number reviewCount?: number discountPercentage?: number discount?: number discountVal?: number keywords?: string[] pros?: string[] cons?: string[] ships_to_countries?: string[] storeOrder?: number isVerified?: boolean isBoosted?: boolean category?: string subcategory?: string featured?: boolean createdAt?: string updatedAt?: string __v?: number } export interface ProductsResponse { status: string data: { products: Product[] pagination: { page: number limit: number total: number totalPages: number hasMore: boolean } store: { _id: string name: string } } } export interface ProductDetailsResponse { status: string data: Product } export interface StoreInfoResponse { status: string data: { _id: string name: string } } export interface CheckoutResponse { sessionId: string url: string expiresAt: number storeId: string } export interface OrderItem { productId: string name: string description: string quantity: number unitPrice: number totalPrice: number sku: string images: string[] _id: string } export interface ShippingAddress { name: string line1: string line2: string city: string state: string postal_code: string country: string } export interface ShippingOption { name: string amount: number } export interface OrderDetails { shippingAddress: ShippingAddress shippingOption: ShippingOption taxAmount: number customerEmail: string customerPhone: string customerName: string items: OrderItem[] subtotal: number shippingCost: number totalAmount: number currency: string status: string paymentStatus: string } export interface CheckoutSuccessResponse { status: string data: { message: string order: OrderDetails } } export interface Category { _id: string name: string slug: string sortOrder: number parentCategory: string | null metaTitle: string metaDescription: string createdAt: string subcategoryCount: number productCount: number } export interface CategoriesResponse { status: string data: { categories: Category[] pagination: { page: number limit: number total: number totalPages: number hasMore: boolean } store: { _id: string name: string } } } [V0_FILE]typescriptreact:file="app/categories/loading.tsx" isFixed="true" 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 CategoryProductsClient from "./category-products-client" export async function generateMetadata({ params }: { params: { id: string } }): Promise { try { const response = await getCategoryByIdFromList(params.id) if (response.status === "success" && response.data) { const category = response.data return { title: category.metaTitle || `${category.name} - Agora Builder Template`, description: category.metaDescription || `Browse products in ${category.name} category`, } } } catch (error) { console.error("Failed to fetch category metadata:", error) } return { title: "Category - Agora Builder Template", description: "Browse products by category", } } export default function CategoryProductsPage({ params }: { params: { id: string } }) { return } [V0_FILE]typescriptreact:file="app/featured/page.tsx" 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="app/about/page.tsx" isMerged="true" import type { Metadata } from "next" export const metadata: Metadata = { title: "About Us - Agora", description: "Learn about our story, mission, and commitment to providing exceptional products and service.", } export default function AboutPage() { return (

{/* Hero Section */}

Our Story

Building exceptional experiences through quality products and innovative design

{/* Main Content */}

Who We Are

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

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

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

Our Mission

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

Our Vision

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

{/* Values Section */}

Our Values

✨

Quality First

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

🌱

Sustainability

Environmental responsibility guides our sourcing and business practices.

🤝

Customer Focus

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

{/* Team Section */}

Meet Our Team

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

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

— The Agora Team

) } [V0_FILE]typescriptreact:file="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 (

Explore Our Collection

Discover premium mobile accessories designed for your lifestyle

All Products Categories

) } export default function ProductsPage() { 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" import { homepageConfig } from "@/lib/homepage-config" export default function Home() { return (

{homepageConfig.hero.visible && } {homepageConfig.categoriesSection.visible && } {homepageConfig.featuredProducts.visible && }

) } [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/navbar.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Search, ShoppingCart, Menu } from "lucide-react" import { useState } from "react" import { useCart } from "@/contexts/cart-context" import { getStoreName } from "@/lib/store-name" import { useRouter } from "next/navigation" import { useLanguage } from "@/contexts/language-context" export function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) const { state } = useCart() const router = useRouter() const { t } = useLanguage() const storeName = getStoreName() const handleCartClick = () => { router.push("/cart") } return ( ) } [V0_FILE]typescriptreact:file="components/custom-theme-provider.tsx" 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]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 (

{cfg.title.text}

{cfg.subtitle.text}

{categories.map((category) => (

{category.name}

))}

) } [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": "next lint" }, "dependencies": { "next": "16.0.10", "react": "19.0.1", "react-dom": "19.0.1", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.544.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7", "next-themes": "0.4.6", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-aspect-ratio": "^1.0.3", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-context-menu": "^2.1.5", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-hover-card": "^1.0.7", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-menubar": "^1.0.4", "@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-radio-group": "^1.1.3", "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.7", "recharts": "^2.10.3", "cmdk": "^0.2.0", "vaul": "^0.9.0", "input-otp": "^1.2.4", "react-hook-form": "^7.49.2", "@hookform/resolvers": "^3.3.4", "sonner": "^1.3.1", "embla-carousel-react": "^8.0.0", "react-resizable-panels": "^1.0.9", "@react-oauth/google": "^0.12.1", "react-day-picker": "9.14.0" }, "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" 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 { useLanguage } from "@/contexts/language-context"

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

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

fetchCategories()
  }, [page, searchQuery])

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

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

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

{loading ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {[...Array(8)].map((_, i) => (
            <Card key={i} className="animate-pulse dark:bg-gray-800 dark:border-gray-700">
              <CardContent className="p-6">
                <div className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mx-auto" />
              </CardContent>
            </Card>
          ))}
        </div>
      ) : categories.length === 0 ? (
        <div className="text-center py-16">
          <h3 className="text-2xl font-semibold mb-2 dark:text-white">{t("categories.noFound")}</h3>
          <p className="text-gray-600 dark:text-gray-400">{t("categories.adjustSearch")}</p>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {categories.map((category) => (
              <Link key={category._id} href={`/categories/${category._id}`}>
                <Card className="group hover:shadow-xl transition-all duration-300 hover:-translate-y-1 h-full border-2 hover:border-primary/20 dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-600">
                  <CardContent className="p-6 flex items-center justify-center text-center h-full">
                    <h3 className="font-semibold text-lg group-hover:text-primary transition-colors dark:text-white dark:group-hover:text-gray-300">
                      {category.name}
                    </h3>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>

{hasMore ? (
            <div className="mt-12 flex justify-center">
              <Button
                onClick={() => setPage((p) => p + 1)}
                variant="outline"
                size="lg"
                className="min-w-[200px] dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700"
              >
                {t("categories.loadMore")}
              </Button>
            </div>
          ) : null}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter.tsx" 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 FAQClient from "./faq-client"

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

export default function FAQPage() {
  return <FAQClient />
}
[V0_FILE]typescriptreact:file="app/cart/page.tsx" 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-gradient-to-br from-indigo-950 via-slate-900 to-violet-950 py-24 px-5 sm:px-8">
        <div className="container mx-auto">
          <div className="max-w-2xl mx-auto text-center py-20">
            <ShoppingBag className="w-24 h-24 text-indigo-400/30 mx-auto mb-6" />
            <h1 className="text-3xl sm:text-4xl font-bold text-white mb-4">{t("cart.empty")}</h1>
            <p className="text-indigo-200/60 mb-8 text-sm sm:text-base">Add some products to get started</p>
            <Link href="/products">
              <Button className="bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-xl hover:shadow-indigo-500/30 px-10 py-5 rounded-2xl border-0">
                {t("cart.continueShopping")}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-950 via-slate-900 to-violet-950 py-24 px-5 sm:px-8">
      <div className="container mx-auto">
        <div className="max-w-6xl mx-auto">
          <h1 className="text-3xl sm:text-4xl font-bold text-white mb-8">{t("cart.title")}</h1>

{state.error && (
            <div className="p-4 bg-red-500/10 backdrop-blur-sm border border-red-500/20 text-red-300 text-sm rounded-2xl mb-6">
              {t("common.error")}: {state.error}. Please refresh or try again.
            </div>
          )}

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2">
              <Card className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-xl">
                <CardContent className="p-6">
                  {state.loading && (
                    <div className="flex items-center justify-center py-8">
                      <Loader2 className="w-8 h-8 animate-spin text-indigo-400" />
                    </div>
                  )}

<div className="space-y-4">
                    {state.items.map((item) => (
                      <div
                        key={`${item.id}-${item.variantId || "default"}`}
                        className="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-5 border border-white/10 rounded-2xl bg-white/5 backdrop-blur-sm hover:bg-white/10 transition-all"
                      >
                        <img
                          src={item.images[0] || "/placeholder.svg"}
                          alt={item.name}
                          className="w-full sm:w-24 h-48 sm:h-24 object-cover rounded-xl"
                        />

<div className="flex-1 w-full">
                          <h3 className="font-semibold text-lg text-white mb-1">{item.name}</h3>
                          <p className="text-indigo-200/60 text-sm mb-3 line-clamp-2">{item.description}</p>
                          <div className="flex items-center gap-2">
                            <p className="text-lg font-bold text-white">{formatPrice(item.price)}</p>
                            {item.isOnSale && item.originalPrice && (
                              <span className="text-sm text-indigo-200/40 line-through">
                                {formatPrice(item.originalPrice)}
                              </span>
                            )}
                          </div>
                        </div>

<div className="flex flex-row sm:flex-col items-center justify-between sm:justify-start gap-4 w-full sm:w-auto">
                          <div className="flex items-center gap-3">
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}
                              className="w-9 h-9 p-0 border-white/20 bg-white/10 hover:bg-white/20 text-white rounded-xl"
                              disabled={state.loading}
                            >
                              <Minus className="w-4 h-4" />
                            </Button>

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

<Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}
                              className="w-9 h-9 p-0 border-white/20 bg-white/10 hover:bg-white/20 text-white rounded-xl"
                              disabled={state.loading}
                            >
                              <Plus className="w-4 h-4" />
                            </Button>
                          </div>

<div className="text-right">
                            <p className="font-bold text-xl text-white mb-2">
                              {formatPrice(item.price * item.quantity)}
                            </p>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleRemoveItem(item.id)}
                              className="text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-xl"
                              disabled={state.loading}
                            >
                              {t("cart.remove")}
                            </Button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

<div className="lg:col-span-1">
              <Card className="sticky top-24 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-xl">
                <CardContent className="p-6">
                  <h2 className="text-2xl font-bold text-white mb-6">{t("cart.orderSummary")}</h2>

<div className="space-y-4 mb-6">
                    <div className="flex justify-between">
                      <span className="text-indigo-200/60 text-sm">
                        {t("cart.subtotal")} ({state.itemCount} {t("cart.items")})
                      </span>
                      <span className="font-semibold text-white">{formatPrice(state.total)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-indigo-200/60 text-sm">{t("cart.shipping")}</span>
                      <span className="font-semibold text-white text-sm">{t("cart.calculatedAtCheckout")}</span>
                    </div>
                    <div className="border-t border-white/10 pt-4">
                      <div className="flex justify-between text-xl font-bold">
                        <span className="text-white">{t("cart.total")}</span>
                        <span className="bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">{formatPrice(state.total)}</span>
                      </div>
                    </div>
                  </div>

<div className="space-y-3">
                    <Button
                      className="w-full bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-xl hover:shadow-indigo-500/30 py-6 rounded-2xl border-0 font-semibold"
                      onClick={handleCheckout}
                      disabled={state.loading}
                    >
                      {state.loading ? (
                        <>
                          <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          {t("common.loading")}
                        </>
                      ) : (
                        t("cart.proceedToCheckout")
                      )}
                    </Button>

<Link href="/products">
                      <Button
                        variant="outline"
                        className="w-full border-white/10 bg-white/5 hover:bg-white/10 text-white rounded-2xl py-6"
                        disabled={state.loading}
                      >
                        {t("cart.continueShopping")}
                      </Button>
                    </Link>

<Button
                      variant="ghost"
                      className="w-full text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-2xl"
                      onClick={clearCart}
                      disabled={state.loading}
                    >
                      {t("cart.clearCart")}
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/cart-drawer.tsx" 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/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]typescript:file="contexts/language-context.tsx" isQuickEdit="true" isMerged="true"
"use client"

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

type Language = "en" | "ar"

type Currency = "USD" | "SAR"

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

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

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

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

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

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

const LanguageContext = createContext<LanguageContextType>(defaultContextValue)

const LANGUAGE_STORAGE_KEY = "app_language"

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

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

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

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

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

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

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

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

const currency = currencyConfig[language]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

const hasDiscount = hasDiscountPercent; // Declare hasDiscount variable

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

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

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

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

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

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

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

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

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

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

return (
                      <Button
                        key={pageNum}
                        variant={currentPage === pageNum ? "default" : "outline"}
                        onClick={() => handlePageChange(pageNum)}
                        disabled={loading}
                        className={
                          currentPage === pageNum
                            ? "bg-black dark:bg-white text-white dark:text-black"
                            : "border-gray-300 dark:border-gray-600 bg-transparent dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"
                        }
                      >
                        {pageNum}
                      </Button>
                    )
                  })}
                </div>

<Button
                  variant="outline"
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === pagination.totalPages || loading}
                  className="border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
                >
                  {t("common.next")}
                  <ChevronRight className="w-4 h-4" />
                </Button>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/categories/[id]/category-products-client.tsx" 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 } = useLanguage()
  const [hasDiscount, setHasDiscount] = useState(false) // Declare hasDiscount variable

useEffect(() => {
    if (product?.variants && product.variants.length > 0) {
      const initialSelection: Record<string, string> = {}
      const firstVariant = product.variants[0]

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

setSelectedVariants(initialSelection)
    }
  }, [product])

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

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

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

fetchCategoryDetails()
  }, [product])

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

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

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

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

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

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

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

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

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

setIsAddingToCart(true)

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

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

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

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

{/* Product Info */}
          <div className="space-y-6">
            {showSaleBadge ? (
              <Badge className="bg-red-600 dark:bg-red-500 text-white mb-4">
                {hasDiscount && discount > 0 ? `${discount}% OFF` : t("common.sale")}
              </Badge>
            ) : null}

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

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

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

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

<div className="flex gap-4">
                <Button
                  type="submit"
                  disabled={!isInStock || isAddingToCart || (hasVariants && !selectedVariant)}
                  className="flex-1 bg-black dark:bg-white text-white dark:text-black hover:bg-black/90 dark:hover:bg-gray-100 text-lg py-6 disabled:opacity-50"
                >
                  {isAddingToCart ? (
                    <Loader2 className="w-5 h-5 animate-spin mr-2" />
                  ) : (
                    <ShoppingCart className="w-5 h-5 mr-2" />
                  )}
                  {!isInStock
                    ? t("cart.outOfStock")
                    : hasVariants && !selectedVariant
                      ? t("productDetails.selectOptions")
                      : t("cart.addToCart")}
                </Button>
              </div>
            </form>

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

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

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

{activeTab === "details" && (
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                    <span className="font-medium text-black dark:text-white">{t("productDetails.productId")}</span>
                    <span className="text-gray-600 dark:text-gray-400">{product._id}</span>
                  </div>
                  <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                    <span className="font-medium text-black dark:text-white">{t("productDetails.brand")}</span>
                    <span className="text-gray-600 dark:text-gray-400">{product.brand}</span>
                  </div>
                  {category ? (
                    <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                      <span className="font-medium text-black dark:text-white">{t("productDetails.category")}</span>
                      <Link
                        href={`/categories/${category._id}`}
                        className="text-blue-600 dark:text-blue-400 hover:underline"
                      >
                        {category.name}
                      </Link>
                    </div>
                  ) : null}
                  {subcategory ? (
                    <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                      <span className="font-medium text-black dark:text-white">{t("productDetails.subcategory")}</span>
                      <Link
                        href={`/categories/${subcategory._id}`}
                        className="text-blue-600 dark:text-blue-400 hover:underline"
                      >
                        {subcategory.name}
                      </Link>
                    </div>
                  ) : null}
                  <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                    <span className="font-medium text-black dark:text-white">{t("productDetails.sku")}</span>
                    <span className="text-gray-600 dark:text-gray-400">{product.sku || "N/A"}</span>
                  </div>
                  {selectedVariant && (
                    <div className="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700">
                      <span className="font-medium text-black dark:text-white">
                        {t("productDetails.selectedVariant")}
                      </span>
                      <span className="text-gray-600 dark:text-gray-400">
                        {selectedVariant.name || selectedVariant.id}
                      </span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="services/api.ts" isMerged="true"
import storeConfig from "@/config/store"

const BASE_URL = "https://stagingserver.searchagora.com"
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]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 } = useLanguage()
  const cfg = getFeaturedProductsConfig()

const maxProducts = cfg.layout.maxProducts

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

const featuredResponse = await getFeaturedProducts(1, maxProducts)

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

if (featuredProducts.length >= maxProducts) {
            setProducts(featuredProducts.slice(0, maxProducts))
          } else {
            const regularResponse = await getStoreProducts(1, maxProducts - 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, maxProducts)

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

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

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

if (!cfg.visible) return null

if (loading) {
    return (
      <section className={cfg.section.className}>
        <div className={cfg.container.className}>
          <div className="text-center">
            <div className={cfg.loading.spinnerClassName}></div>
            <p className={cfg.loading.textClassName}>{t("common.loading")}</p>
          </div>
        </div>
      </section>
    )
  }

if (error || !products || products.length === 0) {
    return (
      <section className={cfg.section.className}>
        <div className={cfg.container.className}>
          <div className={cfg.headerWrapper.className}>
            <h2 className={cfg.title.className}>{t(cfg.title.textKey || "featured.title")}</h2>
            <p className={cfg.subtitle.className}>
              {cfg.subtitle.text}
            </p>
          </div>
          <div className="text-center">
            <p className={cfg.loading.textClassName}>{t("products.notFound")}</p>
          </div>
        </div>
      </section>
    )
  }

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

<div className={cfg.layout.gridClassName}>
          {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 ? t("cart.quickAdd") : t("cart.outOfStock")}
                        </Button>
                      </div>
                    </div>

<div className="p-6 flex flex-col flex-grow">
                      <Link href={`/product/${product._id}`}>
                        <h3 className={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" />
                          ) : (
                            t("cart.addToCart")
                          )}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )
          })}
        </div>

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

export { FeaturedProductsComponent as FeaturedProducts }

export default FeaturedProductsComponent
[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}',
    '*.{js,ts,jsx,tsx,mdx}',
    './config/**/*.ts',
  ],
  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]css:file="app/globals.css" 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 {
  * {
    border-color: hsl(var(--border));
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="types/homepage-config.ts" isMerged="true"
// ──────────────────────────────────────────────
// Types — every key in the homepage config is typed here
// ──────────────────────────────────────────────

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
}

// ── Hero ──

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
}

// ── Categories Section ──

export interface CategoriesSectionConfig {
  visible: boolean
  section: StyledElement
  header: StyledElement
  title: TextElement
  subtitle: TextElement
  layout: {
    maxCategories: number
    gridClassName: string
    skeletonCount: number
  }
  card: { className: string; contentClassName: string }
  categoryName: StyledElement
  viewAllButton: ButtonConfig & { iconClassName: string }
  viewAllMobileButton: ButtonConfig & { containerClassName: string }
  skeleton: { cardClassName: string; barClassName: string }
}

// ── Featured Products ──

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

// ── Root ──

export interface HomepageConfig {
  hero: HeroConfig
  categoriesSection: CategoriesSectionConfig
  featuredProducts: FeaturedProductsConfig
}
[V0_FILE]typescript:file="lib/homepage-config.ts" isMerged="true"
import storeConfig from "@/config/store"
import presets from "@/config/presets"

// Re-export all types for easy imports
export type {
  StyledElement,
  TextElement,
  ButtonConfig,
  BadgeConfig,
  HeroConfig,
  CategoriesSectionConfig,
  FeaturedProductsConfig,
  HomepageConfig,
} from "@/types/homepage-config"

import type {
  HomepageConfig,
  HeroConfig,
  CategoriesSectionConfig,
  FeaturedProductsConfig,
} from "@/types/homepage-config"

// ──────────────────────────────────────────────
// Resolve preset from store config
// ──────────────────────────────────────────────

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

export const homepageConfig: HomepageConfig = resolvedPreset

export function getHeroConfig(): HeroConfig {
  return homepageConfig.hero
}

export function getCategoriesSectionConfig(): CategoriesSectionConfig {
  return homepageConfig.categoriesSection
}

export function getFeaturedProductsConfig(): FeaturedProductsConfig {
  return homepageConfig.featuredProducts
}
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
'use client'

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

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

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

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

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

function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

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

export { Calendar, CalendarDayButton }
[V0_FILE]typescript:file="lib/color-utils.ts" isMerged="true"
export function hexToHsl(hex: string): { h: number; s: number; l: number } {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
  if (!result) return { h: 0, s: 0, l: 0 }

let r = parseInt(result[1], 16) / 255
  let g = parseInt(result[2], 16) / 255
  let b = parseInt(result[3], 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 hslString(hsl: { h: number; s: number; l: number }): string {
  return `${hsl.h} ${hsl.s}% ${hsl.l}%`
}

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

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

const primaryForeground =
    primary.l > 50 ? { h: primary.h, s: primary.s, l: 5 } : { h: primary.h, s: primary.s, l: 98 }
  const secondaryForeground =
    secondary.l > 50 ? { h: secondary.h, s: secondary.s, l: 5 } : { h: secondary.h, s: secondary.s, l: 98 }

return `
    :root {
      --primary: ${hslString(primary)};
      --primary-foreground: ${hslString(primaryForeground)};
      --secondary: ${hslString(adjustLightness(secondary, 30))};
      --secondary-foreground: ${hslString(secondaryForeground)};
      --accent: ${hslString(adjustLightness(secondary, 35))};
      --accent-foreground: ${hslString(secondaryForeground)};
      --ring: ${hslString(primary)};

--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%;
      --muted: ${hslString(adjustLightness(secondary, 40))};
      --muted-foreground: 0 0% 45.1%;
      --border: 0 0% 89.8%;
      --input: 0 0% 89.8%;
      --radius: 0.5rem;
    }

.dark {
      --primary: ${hslString(adjustLightness(primary, 10))};
      --primary-foreground: ${hslString(primaryForeground)};
      --secondary: ${hslString(adjustLightness(secondary, -20))};
      --secondary-foreground: ${hslString({ h: secondary.h, s: secondary.s, l: 98 })};
      --accent: ${hslString(adjustLightness(secondary, -15))};
      --accent-foreground: ${hslString({ h: secondary.h, s: secondary.s, l: 98 })};
      --ring: ${hslString(adjustLightness(primary, 10))};

--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%;
      --muted: 0 0% 14.9%;
      --muted-foreground: 0 0% 63.9%;
      --border: 0 0% 14.9%;
      --input: 0 0% 14.9%;
    }
  `
}
[V0_FILE]typescript:file="config/presets/bold-minimal.ts" isMerged="true"
import type { HomepageConfig } from "@/types/homepage-config"

// BOLD MINIMAL — Swiss/Bauhaus-inspired. Stark black & white, massive type, zero decoration.
// Distinctive DNA: No border-radius anywhere. Grayscale product images. Divider lines as ornament.
// Giant uppercase tracking-tighter hero. Bottom-left anchored layout. 6-col compressed category strip.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[100svh] bg-[#fafafa] overflow-hidden" },
    container: { className: "container mx-auto px-5 sm:px-8 lg:px-16 min-h-[100svh] flex items-end pb-16 sm:pb-20 lg:pb-28 pt-28" },
    contentWrapper: { className: "max-w-5xl w-full" },
    badge: {
      visible: false,
      text: "",
      icon: "star",
      className: "",
      iconClassName: ""
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-[2.75rem] sm:text-7xl md:text-8xl lg:text-[10rem] font-black text-[#111] mb-0 leading-[0.82] tracking-tighter uppercase",
      storeNameClassName: "block text-[#111] opacity-40"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-[11px] sm:text-xs text-[#888] mt-6 sm:mt-8 mb-8 sm:mb-10 max-w-xs leading-relaxed uppercase tracking-[0.25em]"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4 sm:gap-10 items-stretch sm:items-center" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-[#111] text-white hover:bg-[#333] px-10 py-5 rounded-none text-[11px] uppercase tracking-[0.35em] font-medium border-0 w-full sm:w-auto transition-colors",
      iconClassName: "ml-4 w-3.5 h-3.5"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "bg-transparent text-[#888] hover:text-[#111] px-0 py-0 rounded-none text-[11px] uppercase tracking-[0.25em] font-normal border-0 underline underline-offset-[10px] decoration-[#ccc] hover:decoration-[#111] transition-colors w-fit"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-12 sm:py-16 px-5 sm:px-8 lg:px-16 max-w-7xl mx-auto border-t border-[#e0e0e0]" },
    header: { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-8 sm:mb-10" },
    title: { text: "Categories", className: "text-[11px] font-medium text-[#888] uppercase tracking-[0.35em]" },
    subtitle: { text: "", className: "hidden" },
    layout: { maxCategories: 6, gridClassName: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 divide-x divide-y sm:divide-y-0 divide-[#e0e0e0] border border-[#e0e0e0]", skeletonCount: 6 },
    card: { className: "hover:bg-[#111] hover:text-white transition-colors duration-200 cursor-pointer h-full bg-transparent border-0 rounded-none group", contentClassName: "p-5 sm:p-7" },
    categoryName: { className: "font-medium text-[10px] sm:text-[11px] text-center uppercase tracking-[0.2em] text-[#555] group-hover:text-white transition-colors" },
    viewAllButton: { text: "All", href: "/products?tab=categories", className: "hidden md:flex text-[11px] text-[#888] hover:text-[#111] uppercase tracking-[0.3em] font-normal", iconClassName: "ml-2 h-3 w-3" },
    viewAllMobileButton: { text: "View All", href: "/products?tab=categories", containerClassName: "mt-6 flex justify-start md:hidden", className: "text-[#555] bg-transparent border-0 rounded-none text-[11px] uppercase tracking-[0.25em] underline underline-offset-8 decoration-[#ccc] px-0" },
    skeleton: { cardClassName: "animate-pulse bg-[#f0f0f0] border-0 rounded-none", barClassName: "h-2.5 bg-[#ddd] w-2/3 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-14 sm:py-20 bg-white border-t border-[#e0e0e0]" },
    container: { className: "max-w-7xl mx-auto px-5 sm:px-8 lg:px-16" },
    headerWrapper: { className: "mb-8 sm:mb-12 flex flex-col sm:flex-row sm:items-center justify-between gap-3" },
    title: { textKey: "featured.title", className: "text-[11px] font-medium text-[#888] uppercase tracking-[0.35em]" },
    subtitle: { text: "", className: "hidden" },
    layout: { maxProducts: 4, gridClassName: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[1px] bg-[#e0e0e0]" },
    productCard: {
      className: "group overflow-hidden transition-colors bg-white h-full flex flex-col relative rounded-none",
      imageClassName: "w-full h-56 sm:h-64 lg:h-72 object-cover cursor-pointer grayscale group-hover:grayscale-0 transition-all duration-700",
      overlayClassName: "absolute inset-0 bg-transparent group-hover:bg-[#111]/5 transition-colors duration-300 flex items-center justify-center"
    },
    productName: { className: "font-medium text-[11px] text-[#333] mb-2 cursor-pointer line-clamp-2 h-8 leading-4 uppercase tracking-[0.1em]" },
    productPrice: { className: "text-sm font-semibold text-[#111] tracking-wider" },
    originalPrice: { className: "text-[10px] text-[#aaa] line-through" },
    discountBadge: { className: "bg-transparent text-[#888] text-[10px] uppercase tracking-wider border-0" },
    saleBadge: { className: "absolute top-0 left-0 bg-[#111] text-white text-[9px] rounded-none uppercase tracking-[0.15em] px-3 py-1.5" },
    featuredBadge: { className: "absolute top-0 right-0 bg-[#f0f0f0] text-[#555] text-[9px] rounded-none uppercase tracking-[0.15em] px-3 py-1.5" },
    quickAddButton: { className: "bg-[#111] text-white hover:bg-[#333] border-0 rounded-none text-[10px] uppercase tracking-[0.15em]" },
    addToCartButton: { className: "w-full bg-[#111] text-white hover:bg-[#333] rounded-none text-[10px] uppercase tracking-[0.25em] py-3" },
    loading: { spinnerClassName: "animate-spin h-6 w-6 border-b-2 border-[#111] rounded-full mx-auto mb-4", textClassName: "text-[#aaa] text-[10px] uppercase tracking-[0.2em]" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-8 py-5 text-[#555] bg-transparent border-0 rounded-none text-[11px] uppercase tracking-[0.3em] underline underline-offset-[10px] decoration-[#ccc] hover:text-[#111] hover:decoration-[#111] transition-colors" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-8 py-5 bg-[#111] text-white hover:bg-[#333] rounded-none text-[11px] uppercase tracking-[0.3em] border-0 transition-colors" },
    bottomButtons: { containerClassName: "mt-12 sm:mt-16 border-t border-[#e0e0e0] pt-8", innerClassName: "flex flex-col sm:flex-row gap-4 items-stretch sm:items-center" }
  }
}

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

// SOFT ELEGANCE — Airy, feminine luxury. Rose gold accents, pill shapes, generous whitespace.
// Distinctive DNA: rounded-full everything. Blush/rose palette. Shadow-rose. Font-light headings.
// Centered layout with breathing room. Pastel card tints. Delicate hover animations.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[100svh] bg-gradient-to-b from-rose-50/80 via-white to-white overflow-hidden" },
    container: { className: "container mx-auto px-5 sm:px-8 min-h-[100svh] flex items-center justify-center pt-20" },
    contentWrapper: { className: "max-w-2xl mx-auto text-center" },
    badge: {
      visible: true,
      text: "Curated for You",
      icon: "sparkles",
      className: "border-0 text-rose-700 bg-rose-100 px-5 py-2 rounded-full w-fit mx-auto text-[11px] font-medium tracking-wide",
      iconClassName: "w-3.5 h-3.5 mr-2"
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-light text-stone-800 mb-5 leading-[1.15] tracking-tight",
      storeNameClassName: "block font-medium text-rose-600 mt-1"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-sm text-stone-500 mb-10 max-w-md mx-auto leading-relaxed font-light"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-3 justify-center" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-rose-600 text-white hover:bg-rose-700 px-10 py-4 rounded-full text-sm font-medium shadow-lg shadow-rose-600/20 border-0 w-full sm:w-auto transition-all",
      iconClassName: "ml-2 w-4 h-4"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "border border-rose-200 text-rose-700 hover:bg-rose-50 px-10 py-4 bg-white/60 rounded-full text-sm font-medium w-full sm:w-auto transition-all"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-16 sm:py-24 px-5 sm:px-8 max-w-5xl mx-auto" },
    header: { className: "flex flex-col items-center text-center mb-10 sm:mb-14" },
    title: { text: "Explore Collections", className: "text-2xl sm:text-3xl font-light text-stone-800 tracking-tight" },
    subtitle: { text: "Find what speaks to you", className: "text-stone-500 mt-2 text-sm font-light" },
    layout: { maxCategories: 3, gridClassName: "grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6", skeletonCount: 3 },
    card: { className: "hover:shadow-xl hover:shadow-rose-100 hover:-translate-y-1 transition-all duration-500 cursor-pointer h-full bg-white border border-rose-100 rounded-3xl overflow-hidden group", contentClassName: "p-8 sm:p-10" },
    categoryName: { className: "font-normal text-base text-center text-stone-700 group-hover:text-rose-600 transition-colors" },
    viewAllButton: { text: "See All", href: "/products?tab=categories", className: "hidden md:flex text-rose-600 hover:bg-rose-50 rounded-full text-sm font-light", iconClassName: "ml-2 h-4 w-4" },
    viewAllMobileButton: { text: "See All Collections", href: "/products?tab=categories", containerClassName: "mt-10 flex justify-center md:hidden", className: "border border-rose-200 text-rose-600 hover:bg-rose-50 bg-white rounded-full text-sm w-full" },
    skeleton: { cardClassName: "animate-pulse bg-rose-50/50 border border-rose-100 rounded-3xl", barClassName: "h-4 bg-rose-100 rounded-full w-1/2 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 sm:py-28 bg-gradient-to-b from-white to-rose-50/30" },
    container: { className: "max-w-5xl mx-auto px-5 sm:px-8" },
    headerWrapper: { className: "text-center mb-10 sm:mb-16" },
    title: { textKey: "featured.title", className: "text-2xl sm:text-3xl font-light text-stone-800 mb-3 tracking-tight" },
    subtitle: { text: "Carefully selected pieces you will love", className: "text-sm text-stone-500 max-w-sm mx-auto font-light" },
    layout: { maxProducts: 6, gridClassName: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:shadow-rose-100 hover:-translate-y-1 transition-all duration-500 border border-rose-100 bg-white h-full flex flex-col relative rounded-3xl",
      imageClassName: "w-full h-60 sm:h-72 object-cover group-hover:scale-[1.03] 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-normal text-sm text-stone-700 mb-2 group-hover:text-rose-600 transition-colors duration-300 cursor-pointer line-clamp-2 h-10 leading-5" },
    productPrice: { className: "text-lg font-medium text-stone-800" },
    originalPrice: { className: "text-sm text-stone-400 line-through" },
    discountBadge: { className: "bg-rose-100 text-rose-700 text-xs rounded-full border-0" },
    saleBadge: { className: "absolute top-4 left-4 bg-rose-500 text-white rounded-full text-xs shadow-md" },
    featuredBadge: { className: "absolute top-4 right-4 bg-rose-100 text-rose-700 rounded-full text-xs border-0" },
    quickAddButton: { className: "bg-white/80 text-stone-700 hover:bg-rose-600 hover:text-white border-0 rounded-full backdrop-blur-sm shadow-sm transition-all" },
    addToCartButton: { className: "w-full bg-rose-600 text-white hover:bg-rose-700 rounded-full border-0 shadow-sm transition-all" },
    loading: { spinnerClassName: "animate-spin rounded-full h-7 w-7 border-b-2 border-rose-300 mx-auto mb-4", textClassName: "text-stone-400 text-sm font-light" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-8 py-4 border border-rose-200 text-rose-600 hover:bg-rose-50 bg-white rounded-full text-sm transition-all" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-8 py-4 bg-rose-600 text-white hover:bg-rose-700 rounded-full text-sm shadow-lg shadow-rose-600/20 border-0 transition-all" },
    bottomButtons: { containerClassName: "text-center mt-12 sm:mt-16", innerClassName: "flex flex-col sm:flex-row gap-3 justify-center items-stretch sm:items-center" }
  }
}

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

// NEO-BRUTALIST — Loud, chunky, unapologetic. Thick black borders, hard offset shadows, yellow/lime accents.
// Distinctive DNA: border-[3px] border-black. shadow-[6px_6px_0_0] offset shadows. Lime-400 accent color.
// Hover translates. Rounded-none. font-black. All-caps everything. Mono subtitles.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[100svh] bg-[#f5f0e8] overflow-hidden border-b-4 border-[#1a1a1a]" },
    container: { className: "container mx-auto px-5 sm:px-8 min-h-[100svh] flex items-center pt-28 pb-16" },
    contentWrapper: { className: "max-w-4xl w-full" },
    badge: {
      visible: true,
      text: "JUST DROPPED",
      icon: "zap",
      className: "border-[3px] border-[#1a1a1a] text-[#1a1a1a] bg-lime-400 px-4 py-2 rounded-none w-fit uppercase tracking-[0.2em] text-[11px] font-black shadow-[4px_4px_0_0_#1a1a1a]",
      iconClassName: "w-4 h-4 mr-2"
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-black text-[#1a1a1a] mb-2 leading-[0.85] uppercase",
      storeNameClassName: "block text-lime-500"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-sm text-[#1a1a1a]/70 mb-8 sm:mb-10 max-w-md leading-relaxed font-mono mt-5"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-4" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-lime-400 text-[#1a1a1a] hover:translate-x-[2px] hover:-translate-y-[2px] text-sm px-10 py-5 border-[3px] border-[#1a1a1a] shadow-[6px_6px_0_0_#1a1a1a] rounded-none transition-transform font-black uppercase tracking-wider w-full sm:w-auto",
      iconClassName: "ml-3 w-5 h-5"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "border-[3px] border-[#1a1a1a] text-[#1a1a1a] hover:bg-[#1a1a1a] hover:text-[#f5f0e8] text-sm px-10 py-5 bg-transparent font-black uppercase tracking-wider shadow-[6px_6px_0_0_#1a1a1a] hover:translate-x-[2px] hover:-translate-y-[2px] transition-all rounded-none w-full sm:w-auto"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-12 sm:py-16 px-5 sm:px-8 max-w-7xl mx-auto" },
    header: { className: "flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-8 sm:mb-10" },
    title: { text: "CATEGORIES", className: "text-4xl sm:text-5xl md:text-6xl font-black text-[#1a1a1a] uppercase leading-none" },
    subtitle: { text: "// pick your lane", className: "text-[#1a1a1a]/60 font-mono text-xs" },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-1 sm:grid-cols-2 gap-4", skeletonCount: 4 },
    card: { className: "hover:translate-x-[2px] hover:-translate-y-[2px] transition-transform cursor-pointer h-full bg-white border-[3px] border-[#1a1a1a] shadow-[5px_5px_0_0_#1a1a1a] rounded-none group", contentClassName: "p-6 sm:p-8" },
    categoryName: { className: "font-black text-base text-center uppercase tracking-wider text-[#1a1a1a]" },
    viewAllButton: { text: "ALL", href: "/products?tab=categories", className: "hidden md:flex text-[#1a1a1a] hover:bg-lime-400 border-[3px] border-[#1a1a1a] font-black uppercase tracking-wider rounded-none shadow-[3px_3px_0_0_#1a1a1a] hover:translate-x-[1px] hover:-translate-y-[1px] transition-transform text-xs", iconClassName: "ml-2 h-4 w-4" },
    viewAllMobileButton: { text: "SEE ALL", href: "/products?tab=categories", containerClassName: "mt-6 flex justify-start md:hidden", className: "border-[3px] border-[#1a1a1a] text-[#1a1a1a] hover:bg-lime-400 bg-transparent font-black uppercase tracking-wider shadow-[4px_4px_0_0_#1a1a1a] rounded-none w-full" },
    skeleton: { cardClassName: "animate-pulse bg-[#f0ece4] border-[3px] border-[#1a1a1a] rounded-none", barClassName: "h-5 bg-[#1a1a1a]/15 w-3/4 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-14 sm:py-20 bg-lime-400/10 border-t-4 border-[#1a1a1a]" },
    container: { className: "max-w-7xl mx-auto px-5 sm:px-8" },
    headerWrapper: { className: "mb-8 sm:mb-12" },
    title: { textKey: "featured.title", className: "text-4xl sm:text-5xl md:text-6xl font-black text-[#1a1a1a] uppercase leading-none" },
    subtitle: { text: "// the good stuff", className: "text-[#1a1a1a]/60 font-mono mt-3 text-xs" },
    layout: { maxProducts: 4, gridClassName: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5" },
    productCard: {
      className: "group overflow-hidden hover:translate-x-[2px] hover:-translate-y-[2px] transition-transform border-[3px] border-[#1a1a1a] bg-white h-full flex flex-col relative rounded-none shadow-[6px_6px_0_0_#1a1a1a]",
      imageClassName: "w-full h-56 sm:h-72 object-cover cursor-pointer",
      overlayClassName: "absolute inset-0 bg-lime-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center"
    },
    productName: { className: "font-black text-sm text-[#1a1a1a] mb-3 cursor-pointer line-clamp-2 h-12 leading-6 uppercase tracking-wide" },
    productPrice: { className: "text-2xl font-black text-[#1a1a1a] font-mono" },
    originalPrice: { className: "text-sm text-[#1a1a1a]/40 line-through font-mono" },
    discountBadge: { className: "bg-lime-400 text-[#1a1a1a] text-xs font-black uppercase border-[2px] border-[#1a1a1a] rounded-none" },
    saleBadge: { className: "absolute top-0 left-0 bg-red-500 text-white font-black uppercase border-b-[3px] border-r-[3px] border-[#1a1a1a] rounded-none text-xs px-3 py-1.5" },
    featuredBadge: { className: "absolute top-0 right-0 bg-lime-400 text-[#1a1a1a] font-black uppercase border-b-[3px] border-l-[3px] border-[#1a1a1a] rounded-none text-xs px-3 py-1.5" },
    quickAddButton: { className: "bg-white text-[#1a1a1a] hover:bg-lime-400 border-[3px] border-[#1a1a1a] font-black rounded-none shadow-[3px_3px_0_0_#1a1a1a]" },
    addToCartButton: { className: "w-full bg-lime-400 text-[#1a1a1a] hover:bg-lime-300 border-[3px] border-[#1a1a1a] font-black uppercase tracking-wider rounded-none" },
    loading: { spinnerClassName: "animate-spin h-10 w-10 border-b-4 border-[#1a1a1a] rounded-full mx-auto mb-4", textClassName: "text-[#1a1a1a]/60 font-mono text-sm" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-8 py-5 border-[3px] border-[#1a1a1a] text-[#1a1a1a] hover:bg-lime-400 bg-transparent font-black uppercase tracking-wider shadow-[6px_6px_0_0_#1a1a1a] rounded-none transition-colors" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-8 py-5 bg-[#1a1a1a] text-white hover:bg-[#333] border-[3px] border-[#1a1a1a] font-black uppercase tracking-wider shadow-[6px_6px_0_0_lime] rounded-none transition-colors" },
    bottomButtons: { containerClassName: "mt-10 sm:mt-14", innerClassName: "flex flex-col sm:flex-row gap-4 items-stretch sm:items-center" }
  }
}

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

// GRADIENT GLOW — Glassmorphism + gradients. Indigo-to-cyan palette, frosted glass cards, glow shadows.
// Distinctive DNA: backdrop-blur-xl. Gradient CTA buttons. Glow box-shadows. rounded-2xl.
// Indigo-violet color story. Semi-transparent cards on gradient bg. Centered layout.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[100svh] bg-gradient-to-br from-indigo-950 via-slate-900 to-violet-950 overflow-hidden" },
    container: { className: "container mx-auto px-5 sm:px-8 min-h-[100svh] flex items-center justify-center pt-20" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      text: "Discover Something New",
      icon: "sparkles",
      className: "border border-white/10 text-indigo-300 bg-white/5 backdrop-blur-md px-5 py-2 rounded-full w-fit mx-auto text-[11px] font-medium",
      iconClassName: "w-3.5 h-3.5 mr-2"
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-5 leading-tight",
      storeNameClassName: "block bg-gradient-to-r from-indigo-400 via-violet-400 to-cyan-400 bg-clip-text text-transparent"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-sm sm:text-base text-indigo-200/60 mb-10 max-w-lg mx-auto leading-relaxed"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-3 justify-center" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-xl hover:shadow-indigo-500/30 text-sm px-10 py-5 rounded-2xl shadow-lg shadow-indigo-500/20 border-0 transition-all duration-300 w-full sm:w-auto",
      iconClassName: "ml-2 w-4 h-4"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "border border-white/10 text-indigo-200 hover:bg-white/5 text-sm px-10 py-5 bg-white/5 backdrop-blur-md rounded-2xl w-full sm:w-auto transition-all"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-16 sm:py-24 px-5 sm:px-8 max-w-7xl mx-auto" },
    header: { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 sm:mb-12" },
    title: { text: "Browse Categories", className: "text-2xl sm:text-3xl font-bold text-foreground" },
    subtitle: { text: "Find exactly what you need", className: "text-muted-foreground mt-1 text-sm" },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4", skeletonCount: 4 },
    card: { className: "hover:shadow-xl hover:shadow-indigo-500/10 hover:-translate-y-1 transition-all duration-300 cursor-pointer h-full bg-background/80 backdrop-blur-sm border border-indigo-500/10 rounded-2xl overflow-hidden group", contentClassName: "p-6 sm:p-8" },
    categoryName: { className: "font-semibold text-sm text-center text-foreground group-hover:text-indigo-500 transition-colors" },
    viewAllButton: { text: "View All", href: "/products?tab=categories", className: "hidden md:flex text-indigo-500 hover:bg-indigo-500/10 rounded-xl text-sm", iconClassName: "ml-2 h-4 w-4" },
    viewAllMobileButton: { text: "View All Categories", href: "/products?tab=categories", containerClassName: "mt-8 flex justify-center md:hidden", className: "border border-indigo-500/20 text-indigo-500 hover:bg-indigo-500/10 bg-transparent rounded-2xl w-full" },
    skeleton: { cardClassName: "animate-pulse bg-indigo-500/5 border border-indigo-500/10 rounded-2xl", barClassName: "h-4 bg-indigo-500/10 rounded-full w-2/3 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 sm:py-28 bg-gradient-to-b from-background via-indigo-950/5 to-background" },
    container: { className: "container mx-auto px-5 sm:px-8" },
    headerWrapper: { className: "text-center mb-10 sm:mb-16" },
    title: { textKey: "featured.title", className: "text-3xl sm:text-4xl font-bold text-foreground mb-3" },
    subtitle: { text: "Top picks, handpicked for you", className: "text-sm text-muted-foreground max-w-md mx-auto" },
    layout: { maxProducts: 6, gridClassName: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5" },
    productCard: {
      className: "group overflow-hidden hover:shadow-xl hover:shadow-indigo-500/10 hover:-translate-y-1 transition-all duration-300 border border-indigo-500/10 bg-background/80 backdrop-blur-sm h-full flex flex-col relative rounded-2xl",
      imageClassName: "w-full h-56 sm:h-64 object-cover group-hover:scale-105 transition-transform duration-500 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-gradient-to-t from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center"
    },
    productName: { className: "font-semibold text-sm text-foreground mb-3 group-hover:text-indigo-500 transition-colors cursor-pointer line-clamp-2 h-10 leading-5" },
    productPrice: { className: "text-lg font-bold text-foreground" },
    originalPrice: { className: "text-sm text-muted-foreground line-through" },
    discountBadge: { className: "bg-indigo-500/10 text-indigo-500 text-xs rounded-full border-0" },
    saleBadge: { className: "absolute top-3 left-3 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-xl text-xs shadow-md" },
    featuredBadge: { className: "absolute top-3 right-3 bg-gradient-to-r from-indigo-500 to-violet-500 text-white rounded-xl text-xs shadow-md" },
    quickAddButton: { className: "bg-white/80 dark:bg-background/80 text-foreground hover:bg-indigo-500 hover:text-white border-0 rounded-xl backdrop-blur-sm shadow-sm transition-all" },
    addToCartButton: { className: "w-full bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-lg hover:shadow-indigo-500/25 rounded-xl border-0 transition-all" },
    loading: { spinnerClassName: "animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-500 mx-auto mb-4", textClassName: "text-muted-foreground text-sm" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-8 py-5 border border-indigo-500/20 text-foreground hover:bg-indigo-500/5 bg-transparent rounded-2xl text-sm transition-all" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-8 py-5 bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-xl hover:shadow-indigo-500/25 rounded-2xl text-sm border-0 transition-all" },
    bottomButtons: { containerClassName: "text-center mt-12 sm:mt-16", innerClassName: "flex flex-col sm:flex-row gap-3 justify-center items-stretch sm:items-center" }
  }
}

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

// CLASSIC COMMERCE — Dense, practical, Amazon/Target energy. Blue accent, compact grids, info-dense.
// Distinctive DNA: Short 70vh hero. 4-col product grid. Primary-blue accent bars. Rounded-lg. Compact text-xs.
// Packed layout. Practical badges. "Free shipping" messaging. font-semibold. border-border system.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[60svh] sm:min-h-[70svh] bg-blue-50 overflow-hidden border-b-2 border-blue-600" },
    container: { className: "container mx-auto px-5 sm:px-8 min-h-[60svh] sm:min-h-[70svh] flex items-center pt-24" },
    contentWrapper: { className: "max-w-xl w-full" },
    badge: {
      visible: true,
      text: "Free Shipping on Orders $50+",
      icon: "star",
      className: "border border-blue-600 text-blue-700 bg-blue-50 px-3.5 py-1.5 rounded-md w-fit text-[11px] font-semibold",
      iconClassName: "w-3 h-3 mr-1.5 fill-blue-600"
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-slate-900 mb-3 leading-snug",
      storeNameClassName: "block text-blue-600 mt-1"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-xs sm:text-sm text-slate-600 mb-6 max-w-sm leading-relaxed"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-2.5" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-blue-600 text-white hover:bg-blue-700 px-7 py-3.5 rounded-lg text-sm font-semibold border-0 w-full sm:w-auto transition-colors",
      iconClassName: "ml-2 w-4 h-4"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "border border-slate-300 text-slate-700 hover:bg-white px-7 py-3.5 bg-white/80 rounded-lg text-sm font-semibold w-full sm:w-auto transition-colors"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-6 sm:py-8 px-5 sm:px-8 max-w-7xl mx-auto" },
    header: { className: "flex items-center justify-between mb-4 border-b-2 border-blue-600 pb-2.5" },
    title: { text: "Shop by Department", className: "text-base sm:text-lg font-bold text-slate-900" },
    subtitle: { text: "", className: "hidden" },
    layout: { maxCategories: 6, gridClassName: "grid grid-cols-3 md:grid-cols-6 gap-2", skeletonCount: 6 },
    card: { className: "hover:border-blue-500 hover:shadow-sm transition-all duration-200 cursor-pointer h-full bg-white border border-slate-200 rounded-lg group", contentClassName: "p-3 sm:p-4" },
    categoryName: { className: "font-medium text-[11px] text-center text-slate-700 group-hover:text-blue-600 transition-colors" },
    viewAllButton: { text: "See All", href: "/products?tab=categories", className: "hidden md:flex text-sm text-blue-600 font-semibold hover:underline", iconClassName: "ml-1 h-3.5 w-3.5" },
    viewAllMobileButton: { text: "All Departments", href: "/products?tab=categories", containerClassName: "mt-3 flex justify-center md:hidden", className: "border border-slate-200 text-slate-700 hover:bg-slate-50 bg-white rounded-lg text-xs font-semibold w-full" },
    skeleton: { cardClassName: "animate-pulse bg-slate-100 border border-slate-200 rounded-lg", barClassName: "h-3 bg-slate-200 rounded w-2/3 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-6 sm:py-10 bg-white border-t border-slate-200" },
    container: { className: "container mx-auto px-5 sm:px-8" },
    headerWrapper: { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-4 border-b-2 border-blue-600 pb-2.5" },
    title: { textKey: "featured.title", className: "text-base sm:text-lg font-bold text-slate-900" },
    subtitle: { text: "Best sellers and staff picks", className: "text-xs text-slate-500" },
    layout: { maxProducts: 8, gridClassName: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3" },
    productCard: {
      className: "group overflow-hidden hover:shadow-md hover:border-blue-300 transition-all duration-200 border border-slate-200 bg-white h-full flex flex-col relative rounded-lg",
      imageClassName: "w-full h-40 sm:h-48 object-cover cursor-pointer",
      overlayClassName: "absolute inset-0 bg-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center"
    },
    productName: { className: "font-medium text-xs sm:text-sm text-slate-800 mb-1.5 group-hover:text-blue-600 transition-colors cursor-pointer line-clamp-2 h-9 leading-[18px]" },
    productPrice: { className: "text-lg font-bold text-slate-900" },
    originalPrice: { className: "text-xs text-slate-400 line-through" },
    discountBadge: { className: "bg-red-100 text-red-700 text-[10px] font-semibold rounded-md" },
    saleBadge: { className: "absolute top-2 left-2 bg-red-600 text-white text-[10px] font-semibold rounded-md" },
    featuredBadge: { className: "absolute top-2 right-2 bg-blue-600 text-white text-[10px] font-semibold rounded-md" },
    quickAddButton: { className: "bg-white text-slate-700 hover:bg-blue-600 hover:text-white border border-slate-200 text-xs rounded-lg font-semibold transition-colors" },
    addToCartButton: { className: "w-full bg-blue-600 text-white hover:bg-blue-700 text-xs rounded-lg font-semibold border-0 transition-colors" },
    loading: { spinnerClassName: "animate-spin rounded-full h-7 w-7 border-b-2 border-blue-600 mx-auto mb-4", textClassName: "text-slate-500 text-xs" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-6 py-3.5 border border-slate-200 text-slate-700 hover:bg-slate-50 bg-white rounded-lg text-sm font-semibold transition-colors" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-6 py-3.5 bg-blue-600 text-white hover:bg-blue-700 rounded-lg text-sm font-semibold border-0 transition-colors" },
    bottomButtons: { containerClassName: "text-center mt-6 sm:mt-8", innerClassName: "flex flex-col sm:flex-row gap-2.5 justify-center items-stretch sm:items-center" }
  }
}

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

// DARK LUXE — Ultra-premium dark mode. Gold/amber accents on near-black. Extralight type, wide tracking.
// Distinctive DNA: bg-[#0a0a0a] nearly black. Gold/amber-400 accents. tracking-[0.3em]+. font-extralight.
// Huge whitespace. Brightness-90 images that brighten on hover. 2-col large-format product grid.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[100svh] bg-[#0a0a0a] overflow-hidden" },
    container: { className: "container mx-auto px-5 sm:px-8 min-h-[100svh] flex items-center justify-center pt-20" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      text: "Exclusive Collection",
      icon: "sparkles",
      className: "border border-amber-500/30 text-amber-400 bg-transparent px-5 py-2 rounded-none w-fit mx-auto tracking-[0.35em] uppercase text-[10px] font-light",
      iconClassName: "w-3 h-3 mr-3"
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-extralight text-white/90 mb-5 leading-tight tracking-[0.08em]",
      storeNameClassName: "block font-light text-amber-400 tracking-[0.2em] uppercase mt-2"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-xs text-white/30 mb-10 max-w-sm mx-auto leading-loose tracking-[0.15em]"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-3 justify-center" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-amber-500 text-[#0a0a0a] hover:bg-amber-400 text-[11px] px-10 py-5 tracking-[0.35em] uppercase font-medium rounded-none border-0 w-full sm:w-auto transition-colors",
      iconClassName: "ml-4 w-3 h-3"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "border border-white/10 text-white/40 hover:border-amber-500/50 hover:text-amber-400 text-[11px] px-10 py-5 bg-transparent tracking-[0.35em] uppercase font-light rounded-none w-full sm:w-auto transition-all"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-16 sm:py-24 px-5 sm:px-8 max-w-6xl mx-auto" },
    header: { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-12 sm:mb-16" },
    title: { text: "Collections", className: "text-[11px] font-light text-foreground/60 tracking-[0.5em] uppercase" },
    subtitle: { text: "Refined selections", className: "text-muted-foreground text-[11px] tracking-[0.3em] uppercase" },
    layout: { maxCategories: 3, gridClassName: "grid grid-cols-1 sm:grid-cols-3 gap-[1px] bg-white/5", skeletonCount: 3 },
    card: { className: "hover:bg-amber-500/5 transition-colors duration-500 cursor-pointer h-full bg-background border-0 rounded-none group", contentClassName: "p-10 sm:p-14" },
    categoryName: { className: "font-extralight text-sm text-center text-foreground/70 tracking-[0.3em] uppercase group-hover:text-amber-400 transition-colors" },
    viewAllButton: { text: "View All", href: "/products?tab=categories", className: "hidden md:flex text-[10px] text-amber-500/60 hover:text-amber-400 tracking-[0.4em] uppercase font-light", iconClassName: "ml-3 h-3 w-3" },
    viewAllMobileButton: { text: "View All Collections", href: "/products?tab=categories", containerClassName: "mt-12 flex justify-center md:hidden", className: "border border-white/10 text-white/40 hover:text-amber-400 hover:border-amber-500/30 bg-transparent tracking-[0.3em] uppercase text-[11px] font-light rounded-none w-full transition-all" },
    skeleton: { cardClassName: "animate-pulse bg-white/[0.02] rounded-none", barClassName: "h-3 bg-white/5 rounded w-1/3 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 sm:py-28 bg-[#0a0a0a]" },
    container: { className: "max-w-6xl mx-auto px-5 sm:px-8" },
    headerWrapper: { className: "text-center mb-14 sm:mb-20" },
    title: { textKey: "featured.title", className: "text-xl sm:text-2xl font-extralight text-white/80 mb-3 tracking-[0.15em] uppercase" },
    subtitle: { text: "Pieces that define excellence", className: "text-white/20 max-w-sm mx-auto tracking-[0.15em] text-[11px]" },
    layout: { maxProducts: 4, gridClassName: "grid grid-cols-1 sm:grid-cols-2 gap-[1px] bg-white/5" },
    productCard: {
      className: "group overflow-hidden transition-all duration-500 border-0 bg-[#0a0a0a] h-full flex flex-col relative rounded-none",
      imageClassName: "w-full h-72 sm:h-80 lg:h-96 object-cover group-hover:scale-[1.02] transition-transform duration-700 cursor-pointer brightness-[0.85] group-hover:brightness-100",
      overlayClassName: "absolute inset-0 bg-amber-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center"
    },
    productName: { className: "font-extralight text-sm text-white/60 mb-3 group-hover:text-amber-400 transition-colors duration-300 cursor-pointer line-clamp-2 h-10 leading-5 tracking-wider" },
    productPrice: { className: "text-base font-light text-white/80 tracking-[0.15em]" },
    originalPrice: { className: "text-[11px] text-white/20 line-through tracking-wider" },
    discountBadge: { className: "bg-transparent text-amber-400 text-[10px] tracking-[0.2em] uppercase border-0" },
    saleBadge: { className: "absolute top-4 left-4 bg-red-900/80 text-red-200 text-[10px] tracking-[0.2em] uppercase rounded-none" },
    featuredBadge: { className: "absolute top-4 right-4 bg-amber-500/10 text-amber-400 text-[10px] tracking-[0.2em] uppercase rounded-none border-0" },
    quickAddButton: { className: "bg-white/5 text-white/60 hover:bg-amber-500/10 hover:text-amber-400 border border-white/10 rounded-none text-[11px] tracking-[0.2em] uppercase transition-all" },
    addToCartButton: { className: "w-full bg-amber-500 text-[#0a0a0a] hover:bg-amber-400 rounded-none text-[11px] tracking-[0.3em] uppercase font-medium border-0 transition-colors" },
    loading: { spinnerClassName: "animate-spin rounded-full h-7 w-7 border-b border-amber-500/30 mx-auto mb-4", textClassName: "text-white/20 tracking-[0.2em] text-[11px]" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-8 py-5 border border-white/10 text-white/40 hover:border-amber-500/30 hover:text-amber-400 bg-transparent tracking-[0.3em] uppercase text-[11px] font-light rounded-none transition-all" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-8 py-5 bg-amber-500 text-[#0a0a0a] hover:bg-amber-400 tracking-[0.3em] uppercase text-[11px] font-medium rounded-none border-0 transition-colors" },
    bottomButtons: { containerClassName: "text-center mt-14 sm:mt-20", innerClassName: "flex flex-col sm:flex-row gap-3 justify-center items-stretch sm:items-center" }
  }
}

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

// PLAYFUL POP — Bubbly, energetic, friendly. Orange/coral palette, mega rounded corners, bounce effects.
// Distinctive DNA: rounded-[2rem]. shadow-xl everywhere. hover:scale-105 + hover:-rotate-1. Coral-500 primary.
// Big bold font-extrabold. Filled badges with shadows. Card drop shadows. Bouncy hover micro-interactions.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[100svh] bg-orange-50/50 overflow-hidden" },
    container: { className: "container mx-auto px-5 sm:px-8 min-h-[100svh] flex items-center justify-center pt-20" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      text: "Hot New Arrivals!",
      icon: "zap",
      className: "border-0 text-white bg-gradient-to-r from-orange-500 to-pink-500 px-5 py-2 rounded-full w-fit mx-auto font-bold text-xs shadow-lg shadow-orange-500/25",
      iconClassName: "w-4 h-4 mr-2"
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold text-slate-900 mb-4 leading-[1.05]",
      storeNameClassName: "block text-orange-500"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-sm text-slate-500 mb-8 max-w-md mx-auto leading-relaxed"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-3 justify-center" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-orange-500 text-white hover:bg-orange-600 hover:scale-105 text-sm px-10 py-5 rounded-full font-bold shadow-xl shadow-orange-500/25 border-0 transition-all duration-200 w-full sm:w-auto",
      iconClassName: "ml-2 w-5 h-5"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "border-2 border-orange-400 text-orange-600 hover:bg-orange-500 hover:text-white hover:scale-105 text-sm px-10 py-5 bg-white rounded-full font-bold transition-all duration-200 w-full sm:w-auto"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-12 sm:py-16 px-5 sm:px-8 max-w-6xl mx-auto" },
    header: { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8" },
    title: { text: "Pick a Vibe", className: "text-2xl sm:text-3xl font-extrabold text-slate-900" },
    subtitle: { text: "Something for everyone", className: "text-slate-500 mt-1 text-sm" },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4", skeletonCount: 4 },
    card: { className: "hover:scale-105 hover:shadow-2xl hover:shadow-orange-200 hover:-rotate-1 transition-all duration-300 cursor-pointer h-full bg-white border-0 rounded-[1.5rem] shadow-lg shadow-slate-200/50 group", contentClassName: "p-6 sm:p-8" },
    categoryName: { className: "font-bold text-sm text-center text-slate-800 group-hover:text-orange-500 transition-colors" },
    viewAllButton: { text: "See More", href: "/products?tab=categories", className: "hidden md:flex text-orange-500 font-bold hover:bg-orange-50 rounded-full text-sm", iconClassName: "ml-1 h-4 w-4" },
    viewAllMobileButton: { text: "See All Categories", href: "/products?tab=categories", containerClassName: "mt-6 flex justify-center md:hidden", className: "border-2 border-orange-400 text-orange-600 hover:bg-orange-500 hover:text-white bg-white rounded-full font-bold w-full transition-all" },
    skeleton: { cardClassName: "animate-pulse bg-orange-50 rounded-[1.5rem] shadow-lg", barClassName: "h-4 bg-orange-200/50 rounded-full w-2/3 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-14 sm:py-20 bg-white" },
    container: { className: "max-w-6xl mx-auto px-5 sm:px-8" },
    headerWrapper: { className: "text-center mb-8 sm:mb-12" },
    title: { textKey: "featured.title", className: "text-3xl sm:text-4xl font-extrabold text-slate-900 mb-3" },
    subtitle: { text: "You are gonna love these", className: "text-sm text-slate-500 max-w-sm mx-auto" },
    layout: { maxProducts: 6, gridClassName: "grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-5" },
    productCard: {
      className: "group overflow-hidden hover:scale-[1.03] hover:shadow-2xl hover:shadow-orange-200 transition-all duration-300 border-0 bg-white h-full flex flex-col relative rounded-[1.5rem] shadow-lg shadow-slate-200/50",
      imageClassName: "w-full h-44 sm:h-56 object-cover 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-xs sm:text-sm text-slate-800 mb-2 group-hover:text-orange-500 transition-colors cursor-pointer line-clamp-2 h-9 leading-[18px]" },
    productPrice: { className: "text-xl font-extrabold text-slate-900" },
    originalPrice: { className: "text-xs text-slate-400 line-through" },
    discountBadge: { className: "bg-orange-100 text-orange-700 text-[10px] font-bold rounded-full border-0" },
    saleBadge: { className: "absolute top-3 left-3 bg-red-500 text-white rounded-full font-bold text-xs shadow-lg shadow-red-500/25" },
    featuredBadge: { className: "absolute top-3 right-3 bg-orange-500 text-white rounded-full font-bold text-xs shadow-lg shadow-orange-500/25" },
    quickAddButton: { className: "bg-white text-slate-700 hover:bg-orange-500 hover:text-white border-0 rounded-full shadow-lg font-bold hover:scale-105 transition-all duration-200" },
    addToCartButton: { className: "w-full bg-orange-500 text-white hover:bg-orange-600 rounded-full font-bold border-0 shadow-md transition-all" },
    loading: { spinnerClassName: "animate-spin rounded-full h-9 w-9 border-b-2 border-orange-500 mx-auto mb-4", textClassName: "text-slate-500 font-semibold text-sm" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-8 py-5 border-2 border-orange-400 text-orange-600 hover:bg-orange-500 hover:text-white bg-white rounded-full font-bold text-sm hover:scale-[1.02] transition-all" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-8 py-5 bg-orange-500 text-white hover:bg-orange-600 rounded-full font-bold text-sm shadow-lg shadow-orange-500/25 border-0 hover:scale-[1.02] transition-all" },
    bottomButtons: { containerClassName: "text-center mt-8 sm:mt-12", innerClassName: "flex flex-col sm:flex-row gap-3 justify-center items-stretch sm: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 const presetIds = Object.keys(presets)

export default presets
[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"

export const metadata: Metadata = {
  title: storeConfig.metaTitle || `${storeConfig.storeName} - Modern E-commerce Store`,
  description: storeConfig.metaDescription || `Discover amazing products at ${storeConfig.storeName}.`,
  icons: storeConfig.favicon ? { icon: storeConfig.favicon } : undefined,
  openGraph: storeConfig.socialShareImage
    ? { images: [{ url: storeConfig.socialShareImage }] }
    : undefined,
}

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang={storeConfig.language || "en"} suppressHydrationWarning>
      <head>
        <style dangerouslySetInnerHTML={{ __html: colorOverrides }} />
        {storeConfig.gtag && (
          <>
            <script
              async
              src={`https://www.googletagmanager.com/gtag/js?id=${storeConfig.gtag}`}
            />
            <script
              dangerouslySetInnerHTML={{
                __html: `
                  window.dataLayer = window.dataLayer || [];
                  function gtag(){dataLayer.push(arguments);}
                  gtag('js', new Date());
                  gtag('config', '${storeConfig.gtag}');
                `,
              }}
            />
          </>
        )}
      </head>
      <body className="bg-background text-foreground transition-colors">
        <LanguageProvider>
          <CustomThemeProvider>
            <CartProvider>
              <Navbar />
              {children}
              <CartDrawer />
            </CartProvider>
          </CustomThemeProvider>
        </LanguageProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescript:file="config/presets/editorial.ts" isMerged="true"
import type { HomepageConfig } from "@/types/homepage-config"

// EDITORIAL — High-fashion magazine style. Serif typography, bottom-anchored hero, underline links only.
// Distinctive DNA: font-serif for all headings. Italic store name. No filled buttons - underlines only.
// Massive editorial imagery (h-[28rem]). No badges. Transparent backgrounds. Large white space gaps.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[100svh] bg-[#f8f6f3] overflow-hidden" },
    container: { className: "container mx-auto px-5 sm:px-8 lg:px-16 min-h-[100svh] flex items-end pb-16 sm:pb-20 pt-28" },
    contentWrapper: { className: "max-w-4xl w-full" },
    badge: {
      visible: false,
      text: "",
      icon: "star",
      className: "",
      iconClassName: ""
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-normal text-[#2a2a2a] mb-3 leading-[0.88] font-serif",
      storeNameClassName: "block text-[#8b6f47] italic"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-xs sm:text-sm text-[#999] mt-5 mb-8 max-w-sm leading-loose"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-6 sm:gap-10 items-start" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-transparent text-[#2a2a2a] hover:text-[#8b6f47] px-0 py-0 text-sm font-normal underline underline-offset-[12px] decoration-[#ccc] hover:decoration-[#8b6f47] border-0 rounded-none transition-colors",
      iconClassName: "ml-3 w-3.5 h-3.5"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "bg-transparent text-[#999] hover:text-[#2a2a2a] px-0 py-0 text-sm font-normal border-0 underline underline-offset-[12px] decoration-[#ddd] hover:decoration-[#999] rounded-none transition-colors"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-16 sm:py-28 px-5 sm:px-8 lg:px-16 max-w-6xl mx-auto border-t border-[#e0dbd4]" },
    header: { className: "flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-14 sm:mb-20" },
    title: { text: "Categories", className: "text-4xl sm:text-5xl md:text-6xl font-normal text-[#2a2a2a] leading-none font-serif" },
    subtitle: { text: "An editorial selection", className: "text-[#999] text-xs tracking-[0.15em] uppercase mb-1" },
    layout: { maxCategories: 3, gridClassName: "grid grid-cols-1 sm:grid-cols-3 gap-10 sm:gap-14", skeletonCount: 3 },
    card: { className: "hover:opacity-70 transition-opacity duration-500 cursor-pointer h-full bg-transparent border-0 rounded-none group", contentClassName: "pt-6" },
    categoryName: { className: "font-serif text-xl text-[#2a2a2a] text-center italic group-hover:text-[#8b6f47] transition-colors" },
    viewAllButton: { text: "View All", href: "/products?tab=categories", className: "hidden md:flex text-xs text-[#999] hover:text-[#2a2a2a] underline underline-offset-8 decoration-[#ddd] font-normal transition-colors", iconClassName: "ml-2 h-3 w-3" },
    viewAllMobileButton: { text: "View All", href: "/products?tab=categories", containerClassName: "mt-12 flex justify-center md:hidden", className: "text-[#2a2a2a] hover:text-[#8b6f47] bg-transparent border-0 underline underline-offset-[12px] decoration-[#ccc] font-normal text-sm rounded-none transition-colors" },
    skeleton: { cardClassName: "animate-pulse bg-transparent", barClassName: "h-5 bg-[#e0dbd4] w-1/2 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-16 sm:py-28 bg-white border-t border-[#e0dbd4]" },
    container: { className: "max-w-6xl mx-auto px-5 sm:px-8 lg:px-16" },
    headerWrapper: { className: "mb-14 sm:mb-20" },
    title: { textKey: "featured.title", className: "text-4xl sm:text-5xl font-normal text-[#2a2a2a] mb-3 leading-none font-serif" },
    subtitle: { text: "A curated edit of our finest", className: "text-[#999] text-xs tracking-[0.15em] uppercase mt-4" },
    layout: { maxProducts: 4, gridClassName: "grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-14" },
    productCard: {
      className: "group overflow-hidden hover:opacity-85 transition-opacity duration-500 border-0 bg-transparent h-full flex flex-col relative rounded-none",
      imageClassName: "w-full h-72 sm:h-80 lg:h-[28rem] object-cover cursor-pointer",
      overlayClassName: "absolute inset-0 opacity-0 flex items-center justify-center"
    },
    productName: { className: "font-serif text-lg text-[#2a2a2a] mb-2 group-hover:text-[#8b6f47] transition-colors duration-300 cursor-pointer line-clamp-2 h-14 leading-7 mt-4" },
    productPrice: { className: "text-sm font-normal text-[#999]" },
    originalPrice: { className: "text-xs text-[#ccc] line-through" },
    discountBadge: { className: "bg-transparent text-[#8b6f47] text-xs italic border-0" },
    saleBadge: { className: "absolute top-5 left-5 bg-[#2a2a2a] text-white text-[10px] uppercase tracking-[0.15em] rounded-none" },
    featuredBadge: { className: "absolute top-5 right-5 bg-[#f8f6f3] text-[#8b6f47] text-[10px] italic rounded-none border-0" },
    quickAddButton: { className: "bg-white text-[#2a2a2a] hover:bg-[#2a2a2a] hover:text-white border border-[#e0dbd4] rounded-none text-xs transition-all" },
    addToCartButton: { className: "w-full bg-[#2a2a2a] text-white hover:bg-[#8b6f47] rounded-none text-xs uppercase tracking-[0.15em] transition-colors" },
    loading: { spinnerClassName: "animate-spin rounded-full h-6 w-6 border-b border-[#2a2a2a] mx-auto mb-4", textClassName: "text-[#999] text-xs" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-0 py-5 text-[#2a2a2a] hover:text-[#8b6f47] bg-transparent border-0 underline underline-offset-[12px] decoration-[#ccc] text-sm font-normal rounded-none transition-colors" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-8 py-5 bg-[#2a2a2a] text-white hover:bg-[#8b6f47] text-xs uppercase tracking-[0.15em] rounded-none border-0 transition-colors" },
    bottomButtons: { containerClassName: "mt-14 sm:mt-20", innerClassName: "flex flex-col sm:flex-row gap-6 sm:gap-10 justify-center items-stretch sm:items-center" }
  }
}

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

// TECH MODERN — Developer/startup aesthetic. Mono font, dark hero, terminal-style details, green accent.
// Distinctive DNA: font-mono everywhere. bg-[#0c0c0c] dark backgrounds. Emerald/green-500 accent (terminal green).
// Code-comment style subtitles. Rounded-lg. Compact grid. border-[#222] borders. Tight padding.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[100svh] bg-[#0c0c0c] overflow-hidden" },
    container: { className: "container mx-auto px-5 sm:px-8 min-h-[100svh] flex items-center justify-center pt-20" },
    contentWrapper: { className: "max-w-3xl mx-auto text-center" },
    badge: {
      visible: true,
      text: "v2.0 Now Live",
      icon: "zap",
      className: "border border-emerald-500/30 text-emerald-400 bg-emerald-500/10 px-4 py-1.5 rounded-lg w-fit mx-auto font-mono text-[11px] tracking-wider",
      iconClassName: "w-3 h-3 mr-2"
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-5 leading-tight",
      storeNameClassName: "block text-emerald-400 font-mono"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-xs sm:text-sm text-[#555] mb-10 max-w-lg mx-auto leading-relaxed font-mono"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-3 justify-center" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-emerald-500 text-[#0c0c0c] hover:bg-emerald-400 px-8 py-4 rounded-lg text-xs font-mono font-bold tracking-wider border-0 w-full sm:w-auto transition-colors",
      iconClassName: "ml-2 w-3.5 h-3.5"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "border border-[#333] text-[#888] hover:border-emerald-500/50 hover:text-emerald-400 px-8 py-4 bg-[#111] rounded-lg text-xs font-mono tracking-wider w-full sm:w-auto transition-all"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-8 sm:py-12 px-5 sm:px-8 max-w-7xl mx-auto" },
    header: { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5" },
    title: { text: "categories", className: "text-sm font-mono font-medium text-foreground" },
    subtitle: { text: "// browse by type", className: "text-muted-foreground font-mono text-[11px]" },
    layout: { maxCategories: 4, gridClassName: "grid grid-cols-2 md:grid-cols-4 gap-2", skeletonCount: 4 },
    card: { className: "hover:border-emerald-500/40 hover:bg-emerald-500/[0.03] transition-all duration-200 cursor-pointer h-full bg-card border border-border rounded-lg group", contentClassName: "p-4 sm:p-5" },
    categoryName: { className: "font-mono font-medium text-[11px] text-center text-card-foreground group-hover:text-emerald-500 transition-colors" },
    viewAllButton: { text: "view_all()", href: "/products?tab=categories", className: "hidden md:flex text-emerald-500 font-mono text-[11px] hover:bg-emerald-500/10 rounded-lg tracking-wider", iconClassName: "ml-1 h-3 w-3" },
    viewAllMobileButton: { text: "View All", href: "/products?tab=categories", containerClassName: "mt-4 flex justify-center md:hidden", className: "border border-border text-foreground hover:border-emerald-500/40 hover:text-emerald-500 bg-transparent rounded-lg font-mono text-xs w-full transition-all" },
    skeleton: { cardClassName: "animate-pulse bg-emerald-500/[0.02] border border-border rounded-lg", barClassName: "h-3 bg-emerald-500/10 rounded w-2/3 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-12 sm:py-16 bg-[#0c0c0c]" },
    container: { className: "container mx-auto px-5 sm:px-8" },
    headerWrapper: { className: "text-center mb-6 sm:mb-10" },
    title: { textKey: "featured.title", className: "text-xl sm:text-2xl font-bold text-white mb-2 font-mono" },
    subtitle: { text: "// popular right now", className: "text-[#555] max-w-sm mx-auto font-mono text-xs" },
    layout: { maxProducts: 6, gridClassName: "grid grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3" },
    productCard: {
      className: "group overflow-hidden hover:border-emerald-500/30 transition-all duration-200 border border-[#222] bg-[#111] h-full flex flex-col relative rounded-lg",
      imageClassName: "w-full h-40 sm:h-52 object-cover cursor-pointer",
      overlayClassName: "absolute inset-0 bg-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center"
    },
    productName: { className: "font-medium text-[11px] text-[#aaa] mb-1.5 group-hover:text-emerald-400 transition-colors cursor-pointer line-clamp-2 h-8 leading-4" },
    productPrice: { className: "text-base font-bold text-white font-mono" },
    originalPrice: { className: "text-[11px] text-[#555] line-through font-mono" },
    discountBadge: { className: "bg-emerald-500/10 text-emerald-400 text-[10px] font-mono border-0 rounded-md" },
    saleBadge: { className: "absolute top-2 left-2 bg-red-600 text-white text-[10px] font-mono rounded-md" },
    featuredBadge: { className: "absolute top-2 right-2 bg-emerald-500 text-[#0c0c0c] text-[10px] font-mono font-bold rounded-md" },
    quickAddButton: { className: "bg-[#111] text-[#aaa] hover:bg-emerald-500/10 hover:text-emerald-400 border border-[#333] rounded-lg text-xs font-mono transition-all" },
    addToCartButton: { className: "w-full bg-emerald-500 text-[#0c0c0c] hover:bg-emerald-400 rounded-lg text-xs font-mono font-bold border-0 transition-colors" },
    loading: { spinnerClassName: "animate-spin rounded-full h-7 w-7 border-b-2 border-emerald-500 mx-auto mb-4", textClassName: "text-[#555] font-mono text-xs" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-8 py-4 border border-[#333] text-[#888] hover:border-emerald-500/40 hover:text-emerald-400 bg-transparent rounded-lg font-mono text-xs tracking-wider transition-all" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-8 py-4 bg-emerald-500 text-[#0c0c0c] hover:bg-emerald-400 rounded-lg font-mono text-xs font-bold tracking-wider border-0 transition-colors" },
    bottomButtons: { containerClassName: "text-center mt-8 sm:mt-10", innerClassName: "flex flex-col sm:flex-row gap-3 justify-center items-stretch sm:items-center" }
  }
}

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

// WARM ARTISAN — Handcrafted, organic, earthy. Terracotta/sienna palette, serif headings, natural textures.
// Distinctive DNA: font-serif headings. bg-[#f5f0ea] warm cream base. Terracotta/sienna accent.
// Rounded-2xl soft cards. fill-primary star icons. Warm shadow tones. Generous centered layout.
const preset: HomepageConfig = {
  hero: {
    visible: true,
    section: { className: "relative min-h-[100svh] bg-[#f5f0ea] overflow-hidden" },
    container: { className: "container mx-auto px-5 sm:px-8 min-h-[100svh] flex items-center justify-center pt-20" },
    contentWrapper: { className: "max-w-2xl mx-auto text-center" },
    badge: {
      visible: true,
      text: "Handmade with Care",
      icon: "star",
      className: "border border-[#b5724c]/20 text-[#8b5e3c] bg-[#b5724c]/10 px-5 py-2 rounded-full w-fit mx-auto text-[11px] font-medium",
      iconClassName: "w-3.5 h-3.5 mr-2 fill-[#b5724c]"
    },
    title: {
      textKey: "hero.title",
      showStoreName: true,
      className: "text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[#3a2e25] mb-5 leading-snug font-serif",
      storeNameClassName: "block text-[#b5724c] mt-1"
    },
    subtitle: {
      textKey: "hero.subtitle",
      className: "text-sm text-[#8b7d70] mb-10 max-w-sm mx-auto leading-loose"
    },
    buttonsContainer: { className: "flex flex-col sm:flex-row gap-3 justify-center" },
    primaryButton: {
      visible: true,
      textKey: "hero.shopNow",
      href: "/products",
      icon: "arrowRight",
      className: "bg-[#b5724c] text-white hover:bg-[#9a5f3e] px-10 py-4 rounded-2xl text-sm font-medium border-0 shadow-md shadow-[#b5724c]/15 w-full sm:w-auto transition-colors",
      iconClassName: "ml-2 w-4 h-4"
    },
    secondaryButton: {
      visible: true,
      textKey: "hero.exploreCategories",
      href: "/products",
      className: "border border-[#b5724c]/20 text-[#5a4a3c] hover:bg-[#b5724c]/5 px-10 py-4 bg-white/60 rounded-2xl text-sm font-medium w-full sm:w-auto transition-all"
    }
  },
  categoriesSection: {
    visible: true,
    section: { className: "py-16 sm:py-24 px-5 sm:px-8 max-w-5xl mx-auto" },
    header: { className: "flex flex-col items-center text-center mb-10 sm:mb-14" },
    title: { text: "Our Collections", className: "text-2xl sm:text-3xl font-serif font-bold text-[#3a2e25]" },
    subtitle: { text: "Crafted with passion and purpose", className: "text-[#8b7d70] mt-2 text-sm" },
    layout: { maxCategories: 3, gridClassName: "grid grid-cols-1 sm:grid-cols-3 gap-5 sm:gap-8", skeletonCount: 3 },
    card: { className: "hover:shadow-lg hover:shadow-[#b5724c]/10 hover:-translate-y-0.5 transition-all duration-400 cursor-pointer h-full bg-white border border-[#e0d6ca] rounded-2xl overflow-hidden group", contentClassName: "p-8 sm:p-10" },
    categoryName: { className: "font-serif font-semibold text-base sm:text-lg text-center text-[#3a2e25] group-hover:text-[#b5724c] transition-colors" },
    viewAllButton: { text: "See All", href: "/products?tab=categories", className: "hidden md:flex text-[#b5724c] hover:bg-[#b5724c]/5 rounded-full text-sm font-medium", iconClassName: "ml-2 h-4 w-4" },
    viewAllMobileButton: { text: "See All Collections", href: "/products?tab=categories", containerClassName: "mt-10 flex justify-center md:hidden", className: "border border-[#b5724c]/20 text-[#b5724c] hover:bg-[#b5724c]/5 bg-white rounded-2xl text-sm w-full transition-all" },
    skeleton: { cardClassName: "animate-pulse bg-[#f5f0ea] border border-[#e0d6ca] rounded-2xl", barClassName: "h-4 bg-[#e0d6ca] rounded-full w-1/2 mx-auto" }
  },
  featuredProducts: {
    visible: true,
    section: { className: "py-20 sm:py-28 bg-white" },
    container: { className: "max-w-5xl mx-auto px-5 sm:px-8" },
    headerWrapper: { className: "text-center mb-10 sm:mb-16" },
    title: { textKey: "featured.title", className: "text-2xl sm:text-3xl font-serif font-bold text-[#3a2e25] mb-3" },
    subtitle: { text: "Each piece tells a story", className: "text-[#8b7d70] max-w-sm mx-auto text-sm" },
    layout: { maxProducts: 6, gridClassName: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-8" },
    productCard: {
      className: "group overflow-hidden hover:shadow-lg hover:shadow-[#b5724c]/10 hover:-translate-y-0.5 transition-all duration-400 border border-[#e0d6ca] bg-white h-full flex flex-col relative rounded-2xl",
      imageClassName: "w-full h-56 sm:h-72 object-cover group-hover:scale-[1.03] transition-transform duration-600 cursor-pointer",
      overlayClassName: "absolute inset-0 bg-[#b5724c]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-400 flex items-center justify-center"
    },
    productName: { className: "font-serif font-semibold text-sm sm:text-base text-[#3a2e25] mb-2 group-hover:text-[#b5724c] transition-colors duration-300 cursor-pointer line-clamp-2 h-10 leading-5" },
    productPrice: { className: "text-lg font-bold text-[#3a2e25]" },
    originalPrice: { className: "text-xs text-[#aaa] line-through" },
    discountBadge: { className: "bg-[#b5724c]/10 text-[#8b5e3c] text-xs rounded-full border-0" },
    saleBadge: { className: "absolute top-3 left-3 bg-rose-600 text-white rounded-2xl text-xs" },
    featuredBadge: { className: "absolute top-3 right-3 bg-[#b5724c] text-white rounded-2xl text-xs" },
    quickAddButton: { className: "bg-white text-[#5a4a3c] hover:bg-[#b5724c]/10 border border-[#e0d6ca] rounded-2xl transition-all" },
    addToCartButton: { className: "w-full bg-[#b5724c] text-white hover:bg-[#9a5f3e] rounded-2xl border-0 transition-colors" },
    loading: { spinnerClassName: "animate-spin rounded-full h-7 w-7 border-b-2 border-[#b5724c]/30 mx-auto mb-4", textClassName: "text-[#8b7d70] text-sm" },
    viewAllFeaturedButton: { textKey: "products.viewAllFeatured", href: "/featured", className: "w-full px-8 py-4 border border-[#b5724c]/20 text-[#b5724c] hover:bg-[#b5724c]/5 bg-white rounded-2xl text-sm font-medium transition-all" },
    viewAllProductsButton: { textKey: "products.viewAllProducts", href: "/products", className: "w-full px-8 py-4 bg-[#b5724c] text-white hover:bg-[#9a5f3e] rounded-2xl text-sm font-medium border-0 shadow-md shadow-[#b5724c]/15 transition-colors" },
    bottomButtons: { containerClassName: "text-center mt-10 sm:mt-16", innerClassName: "flex flex-col sm:flex-row gap-3 justify-center items-stretch sm:items-center" }
  }
}

export default preset
[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, Sparkles, Zap } 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"

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  star: Star,
  sparkles: Sparkles,
  zap: Zap,
  arrowRight: ArrowRight,
}

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

if (!cfg.visible) return null

const BadgeIcon = cfg.badge.icon ? iconMap[cfg.badge.icon] : null
  const PrimaryIcon = cfg.primaryButton.icon ? iconMap[cfg.primaryButton.icon] : null

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

<div>
                <h1 className={cfg.title.className}>
                  <>
                    {t(cfg.title.textKey || "hero.title")}
                    {cfg.title.showStoreName && (
                      <span className={cfg.title.storeNameClassName}>{storeName}</span>
                    )}
                  </>
                </h1>

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

<div className={cfg.buttonsContainer.className}>
                {cfg.primaryButton.visible && (
                  <Link href={cfg.primaryButton.href}>
                    <Button
                      size="lg"
                      className={cfg.primaryButton.className}
                    >
                      {t(cfg.primaryButton.textKey || "hero.shopNow")}
                      {PrimaryIcon && <PrimaryIcon className={cfg.primaryButton.iconClassName} />}
                    </Button>
                  </Link>
                )}
                {cfg.secondaryButton.visible && (
                  <Link href={cfg.secondaryButton.href}>
                    <Button
                      size="lg"
                      variant="outline"
                      className={cfg.secondaryButton.className}
                    >
                      {t(cfg.secondaryButton.textKey || "hero.exploreCategories")}
                    </Button>
                  </Link>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/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 (
    <footer className="bg-muted/40 border-t border-border py-16">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div>
            <h3 className="text-2xl font-bold mb-6 text-foreground">{storeName}</h3>
            <p className="text-muted-foreground mb-6">
              Your destination for innovative products that shape tomorrow. Quality, style, and innovation in every
              purchase.
            </p>
          </div>

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

<div>
            <h4 className="text-lg font-semibold mb-6 text-foreground">{t("footer.customerService")}</h4>
            <ul className="space-y-3">
              <li>
                <a
                  href="/contact"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  {t("footer.contactUs")}
                </a>
              </li>
              <li>
                <a
                  href="/faq"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  {t("footer.faq")}
                </a>
              </li>
            </ul>
          </div>

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

<div className="border-t border-border mt-12 pt-8 text-center">
          <p className="text-muted-foreground">
            <a
              href="https://www.agorabuilder.com"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:text-foreground transition-colors inline-flex items-center gap-2"
            >
              Powered by <span className="font-semibold text-foreground">Agora</span>
            </a>
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescript:file="config/store.ts" isMerged="true"
export interface StoreConfig {
  storeId: string
  storeName: 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: "69d7cdf811adf72185cc6f8c",
  storeName: "GadgetGlow Mobile Accessories Brand",
  presetId: "gradient-glow",
  primaryColor: "#00f0ff",
  secondaryColor: "#ff0080",
  metaTitle: "GadgetGlow | Premium Mobile Accessories for Your Tech Lifestyle",
  metaDescription: "Level up your phone game with GadgetGlow's curated collection of premium cases, chargers, audio gear, and accessories. Free 2-day shipping, 365-day guarantee, and customization lab.",
  currency: "USD",
  language: "en",
  gtag: "",
  logo: "",
  favicon: "https://www.searchagora.com/favicon.ico",
  socialShareImage: "https://www.searchagora.com/api/search-image-generator?query=GadgetGlow Mobile Accessories Brand",
}

export default storeConfig
[V0_FILE]typescriptreact:file="components/products-page-client.tsx"
"use client"

import type React from "react"

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

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

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

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

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

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

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

return (
    <div>
      {products.length === 0 ? (
        <div className="text-center py-20">
          <p className="text-indigo-200/60 text-lg">{t("products.notFound")}</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
          {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-xl hover:shadow-indigo-500/10 hover:-translate-y-1 transition-all duration-300 border border-indigo-500/10 bg-background/80 backdrop-blur-sm h-full flex flex-col relative rounded-2xl">
                  <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-56 sm:h-64 object-cover group-hover:scale-105 transition-transform duration-500 cursor-pointer"
                        />
                      </Link>

{showSaleBadge && (
                        <Badge className="absolute top-3 left-3 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-xl text-xs shadow-md">
                          {hasDiscountPercent && discountPercent > 0 ? `${discountPercent}% OFF` : t("common.sale")}
                        </Badge>
                      )}

{product.featured ? (
                        <Badge className="absolute top-3 right-3 bg-gradient-to-r from-indigo-500 to-violet-500 text-white rounded-xl text-xs shadow-md">
                          {t("common.featured")}
                        </Badge>
                      ) : null}

<div className="absolute inset-0 bg-gradient-to-t from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                        <Button
                          type="button"
                          className="bg-white/80 backdrop-blur-sm text-foreground hover:bg-indigo-500 hover:text-white border-0 rounded-xl shadow-sm transition-all"
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={!isInStock || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : (
                            <ShoppingCart className="w-4 h-4 mr-2" />
                          )}
                          {isInStock ? t("cart.quickAdd") : t("cart.outOfStock")}
                        </Button>
                      </div>
                    </div>

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

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

<div className="flex items-center gap-2 mb-4 min-h-[2rem] flex-wrap">
                        <span className="text-lg font-bold text-foreground">
                          {formatPrice(displayPrice)}
                        </span>
                        {hasDiscountPercent && originalPrice && (
                          <>
                            <span className="text-sm text-muted-foreground line-through">
                              {formatPrice(originalPrice)}
                            </span>
                            <Badge
                              variant="secondary"
                              className="bg-indigo-500/10 text-indigo-500 text-xs rounded-full border-0"
                            >
                              {discountPercent}% OFF
                            </Badge>
                          </>
                        )}
                      </div>

<div className="mt-auto">
                        <Button
                          type="button"
                          className="w-full bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:shadow-lg hover:shadow-indigo-500/25 rounded-xl border-0 transition-all"
                          onClick={(e) => handleAddToCart(product, e)}
                          disabled={!isInStock || isAddingThisProduct}
                        >
                          {isAddingThisProduct ? (
                            <Loader2 className="w-4 h-4 animate-spin mr-2" />
                          ) : (
                            t("cart.addToCart")
                          )}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}</article></body></html>