[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": "14.0.0", "react": "^18", "react-dom": "^18", "framer-motion": "^10.16.4", "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" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "postcss": "^8", "tailwindcss": "^3.3.0" } } [V0_FILE]typescriptreact:file="app/products/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [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 { motion, AnimatePresence } from "framer-motion" export function CartDrawer() { const { state, dispatch, removeItem, updateItemQuantity, clearCart, proceedToCheckout } = useCart() const handleUpdateQuantity = (id: string, quantity: number) => { updateItemQuantity(id, quantity) } const handleRemoveItem = (id: string) => { removeItem(id) } const closeCart = () => { dispatch({ type: "CLOSE_CART" }) } const handleCheckout = () => { proceedToCheckout() } return ( {state.isOpen && ( <> {/* Backdrop */} {/* Cart Drawer */} {/* Header */}

Shopping Cart

{/* Loading/Error State */} {state.loading && (

)} {state.error && (

Error: {state.error}. Please refresh or try again.

)} {/* Cart Items */}

{state.items.length === 0 && !state.loading ? (

Your cart is empty

Add some products to get started

) : (

{state.items.map((item) => (

{item.name}

${item.price.toFixed(2)}

{item.quantity}

${(item.price * item.quantity).toFixed(2)}

))}

)}

{/* Footer */} {state.items.length > 0 && (

Total: ${state.total.toFixed(2)}

)} )} ) } [V0_FILE]typescriptreact:file="components/newsletter.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Mail } from "lucide-react" export function Newsletter() { return (

Get Exclusive Deals

Subscribe to our newsletter and get 20% off your first order plus early access to sales and new arrivals

No spam, unsubscribe at any time

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Navbar } from "@/components/navbar" import { CartProvider } from "@/contexts/cart-context" import { CartDrawer } from "@/components/cart-drawer" import { getStoreName } from "@/lib/store-name" const inter = Inter({ subsets: ["latin"] }) // Generate dynamic metadata based on store name const storeName = getStoreName() export const metadata: Metadata = { title: "Agora Builder | Zara Store Creation", description: "Build an e-commerce store easily with AI. Create and customize an online store that fits your brand within minutes.", icons: { icon: "https://www.searchagora.com/favicon.ico", }, openGraph: { title: "Agora Builder | Zara Store Creation", description: "Build an e-commerce store easily with AI. Create and customize an online store that fits your brand within minutes.", images: ["https://www.searchagora.com/api/search-image-generator?query=Zara Store Creation"], }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [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 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" isEdit="true" isMerged="true" export function getStoreName(): string { return "Zara Store Creation" } [V0_FILE]typescriptreact:file="app/products/page.tsx" isMerged="true" import { ProductsPageClient } from "@/components/products-page-client" export default function ProductsPage() { return ( <> ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Hero } from "@/components/hero" import { FeaturedProducts } from "@/components/featured-products" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact: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([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [pagination, setPagination] = useState(null) useEffect(() => { const fetchProducts = async () => { try { setLoading(true) setError(null) const response: ProductsResponse = await getStoreProducts(page, limit, query) if (response.status === "success") { setProducts(response.data.products) setPagination(response.data.pagination) } else { setError("Failed to fetch products") } } catch (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(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { if (!productId) return const fetchProduct = async () => { try { setLoading(true) setError(null) const response: ProductDetailsResponse = await getProductDetails(productId) if (response.status === "success") { setProduct(response.data) } else { setError("Failed to fetch product details") } } catch (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/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" export default function CartPage() { const { state, removeItem, updateItemQuantity, clearCart, proceedToCheckout } = useCart() 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 (

Your cart is empty

Add some products to get started

) } return (

Shopping Cart

{state.error && (

Error: {state.error}. Please refresh or try again.

)}

{/* Cart Items */}

{state.loading && (

)}

{state.items.map((item) => (

{item.name}

{item.description}

${item.price.toFixed(2)}

{item.quantity}

${(item.price * item.quantity).toFixed(2)}

))}

{/* Order Summary */}

Order Summary

Subtotal ({state.itemCount} items) ${state.total.toFixed(2)}

Shipping Calculated at checkout

Total ${state.total.toFixed(2)}

) } [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" export default function SuccessPage() { const searchParams = useSearchParams() const sessionId = searchParams.get("session_id") const [orderDetails, setOrderDetails] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(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 (

Loading order details...

) } if (error || !orderDetails) { return (

Order Not Found

{error || "Unable to load order details"}

) } return (

{/* Success Header */}

Order Confirmed!

Thank you for your purchase. Your order has been successfully processed.

{/* Order Summary */}

Order Summary

{orderDetails.items.map((item) => (

{item.images.length > 0 && (

)}

{item.name}

{item.description}

Qty: {item.quantity}

${item.totalPrice.toFixed(2)}

${item.unitPrice.toFixed(2)} each

))}

Subtotal ${orderDetails.subtotal.toFixed(2)}

Shipping ${orderDetails.shippingCost.toFixed(2)}

{orderDetails.taxAmount > 0 && (

Tax ${orderDetails.taxAmount.toFixed(2)}

)}

Total ${orderDetails.totalAmount.toFixed(2)} {orderDetails.currency.toUpperCase()}

{/* Order & Shipping Details */}

{/* Payment Status */}

Payment Status

{orderDetails.paymentStatus.charAt(0).toUpperCase() + orderDetails.paymentStatus.slice(1)} Order Status: {orderDetails.status.charAt(0).toUpperCase() + orderDetails.status.slice(1)}

{/* Customer Information */}

Customer Information

Name: {orderDetails.customerName}

Email: {orderDetails.customerEmail}

Phone: {orderDetails.customerPhone}

{/* Shipping Address */}

Shipping Address

{orderDetails.shippingAddress.name}

{orderDetails.shippingAddress.line1}

{orderDetails.shippingAddress.line2 &&

{orderDetails.shippingAddress.line2}

}

{orderDetails.shippingAddress.city}, {orderDetails.shippingAddress.state}{" "} {orderDetails.shippingAddress.postal_code}

{orderDetails.shippingAddress.country}

{orderDetails.shippingOption.name && (

Shipping Method: {orderDetails.shippingOption.name}

)}

{/* Action Buttons */}

You will receive an email confirmation shortly with your order details and tracking information.

) } [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="components/hero.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowRight, Star } from "lucide-react" import { getStoreName } from "@/lib/store-name" import Link from "next/link" export function Hero() { const storeName = getStoreName() return (

New Collection Available

Welcome to {storeName}

Discover the latest fashion trends with timeless elegance and contemporary style

Women

Men

Accessories

Shoes

10K+

Happy Customers

500+

Products

99%

Satisfaction

24/7

Support

) } [V0_FILE]typescriptreact:file="app/product/[id]/page.tsx" isMerged="true" import { ProductPageClient } from "@/components/product-page-client" export default function ProductPage({ params }: { params: { id: string } }) { return ( <> ) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" 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" export default function ContactPage() { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) 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 */}

Get in Touch

We'd love to hear from you. Send us a message and we'll respond as soon as possible.

{/* Contact Form */} Send us a Message {isSubmitted ? (

✓

Message Sent!

Thank you for contacting us. We'll get back to you within 24 hours.

) : (

Name *

Email *

Subject *

Message *

</div>
                    <Button type="submit" disabled={isSubmitting} className="w-full">
                      {isSubmitting ? "Sending..." : "Send Message"}
                    </Button>
                  </form>
                )}
              </CardContent>
            </Card>

{/* Contact Information */}
            <div className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle>Contact Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div>
                    <h3 className="font-semibold text-foreground mb-2">Customer Service</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">Business Hours</h3>
                    <p className="text-muted-foreground">Monday - Friday: 9:00 AM - 6:00 PM EST</p>
                    <p className="text-muted-foreground">Saturday: 10:00 AM - 4:00 PM EST</p>
                    <p className="text-muted-foreground">Sunday: Closed</p>
                  </div>
                  <div>
                    <h3 className="font-semibold text-foreground mb-2">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>Frequently Asked Questions</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <h4 className="font-medium text-foreground mb-1">How long does shipping take?</h4>
                    <p className="text-sm text-muted-foreground">
                      Standard shipping takes 3-5 business days. Express shipping is available for 1-2 day delivery.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-medium text-foreground mb-1">What's your return policy?</h4>
                    <p className="text-sm text-muted-foreground">
                      We offer 30-day returns on all items in original condition with tags attached.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-medium text-foreground mb-1">Do you ship internationally?</h4>
                    <p className="text-sm text-muted-foreground">
                      Yes, we ship to over 50 countries worldwide. Shipping costs vary by location.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[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 (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 text-balance">Terms of Service</h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto text-balance">
              Please read these terms carefully before using our services
            </p>
            <p className="text-sm text-muted-foreground mt-4">Last updated: December 2024</p>
          </div>

{/* Content */}
          <div className="prose prose-gray max-w-none">
            <div className="space-y-8">
              <section>
                <h2 className="text-2xl font-bold text-foreground mb-4">1. Acceptance of Terms</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    By accessing and using Agora's website and services, you accept and agree to be bound by the terms
                    and provision of this agreement. If you do not agree to abide by the above, please do not use this
                    service.
                  </p>
                  <p>
                    These Terms of Service constitute a legally binding agreement between you and Agora. We reserve the
                    right to update these terms at any time without prior notice.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">2. Use License</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    Permission is granted to temporarily download one copy of the materials on Agora's website for
                    personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of
                    title, and under this license you may not:
                  </p>
                  <ul className="list-disc pl-6 space-y-2">
                    <li>modify or copy the materials</li>
                    <li>use the materials for any commercial purpose or for any public display</li>
                    <li>attempt to reverse engineer any software contained on the website</li>
                    <li>remove any copyright or other proprietary notations from the materials</li>
                  </ul>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">3. Product Information and Pricing</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    We strive to provide accurate product descriptions and pricing information. However, we do not
                    warrant that product descriptions or other content is accurate, complete, reliable, current, or
                    error-free.
                  </p>
                  <p>
                    Prices for our products are subject to change without notice. We reserve the right at any time to
                    modify or discontinue any product without notice.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">4. Orders and Payment</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    By placing an order, you represent that you are at least 18 years old and legally capable of
                    entering into binding contracts. All orders are subject to acceptance by us.
                  </p>
                  <p>
                    We accept various forms of payment as indicated on our website. Payment must be received by us
                    before we ship any products to you.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">5. Shipping and Delivery</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    We will arrange for shipment of products to you. You will be responsible for shipping and handling
                    charges as indicated when you place your order.
                  </p>
                  <p>
                    Risk of loss and title for products pass to you upon delivery to the carrier. Delivery dates are
                    estimates only and we are not liable for any delays.
                  </p>
                </div>
              </section>

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

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">7. Privacy Policy</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    Your privacy is important to us. We collect and use your personal information in accordance with our
                    Privacy Policy, which is incorporated into these Terms by reference.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">8. Limitation of Liability</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    In no event shall Agora or its suppliers be liable for any damages (including, without limitation,
                    damages for loss of data or profit, or due to business interruption) arising out of the use or
                    inability to use the materials on our website.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">9. Governing Law</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>
                    These terms and conditions are governed by and construed in accordance with the laws of the State of
                    New York and you irrevocably submit to the exclusive jurisdiction of the courts in that state.
                  </p>
                </div>
              </section>

<section>
                <h2 className="text-2xl font-bold text-foreground mb-4">10. Contact Information</h2>
                <div className="text-muted-foreground leading-relaxed space-y-4">
                  <p>If you have any questions about these Terms of Service, please contact us at:</p>
                  <div className="bg-muted rounded-lg p-6">
                    <p className="font-medium text-foreground">Agora Customer Service</p>
                    <p>Email: legal@agora.com</p>
                    <p>Phone: 1-800-AGORA-01</p>
                    <p>Address: 123 Commerce Street, Suite 100, New York, NY 10001</p>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true" isMerged="true"
import { Mail, Phone, MapPin } from "lucide-react"
import { getStoreName } from "@/lib/store-name"

export function Footer() {
  // Get dynamic store name for footer branding
  const storeName = getStoreName()

return (
    <footer className="bg-white border-t border-gray-200 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>
            {/* Dynamic store name in footer */}
            <h3 className="text-2xl font-bold mb-6 text-black">{storeName}</h3>
            <p className="text-gray-600 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-black">Quick Links</h4>
            <ul className="space-y-3">
              <li>
                <a href="/about" className="text-gray-600 hover:text-black transition-colors">
                  About Us
                </a>
              </li>
              <li>
                <a href="/products" className="text-gray-600 hover:text-black transition-colors">
                  Products
                </a>
              </li>
              <li>
                <a href="/terms" className="text-gray-600 hover:text-black transition-colors">
                  Terms of Service
                </a>
              </li>
            </ul>
          </div>

<div>
            <h4 className="text-lg font-semibold mb-6 text-black">Customer Service</h4>
            <ul className="space-y-3">
              <li>
                <a href="/contact" className="text-gray-600 hover:text-black transition-colors">
                  Contact Us
                </a>
              </li>
              <li>
                <a href="#" className="text-gray-600 hover:text-black transition-colors">
                  Returns
                </a>
              </li>
              <li>
                <a href="#" className="text-gray-600 hover:text-black transition-colors">
                  FAQ
                </a>
              </li>
            </ul>
          </div>

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

<div className="border-t border-gray-200 mt-12 pt-8 text-center">
          <p className="text-gray-600">
            <a
              href="https://www.agorabuilder.com"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:text-black transition-colors inline-flex items-center gap-2"
            >
              Powered by <span className="font-semibold text-black">Agora</span>
            </a>
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx" isQuickEdit="true" 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"

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

// Get dynamic store name
  const storeName = getStoreName()

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

return (
    <nav className="bg-white border-b border-gray-200 sticky top-0 z-50">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo - now uses dynamic store name */}
          <div className="flex items-center">
            <a href="/" className="text-2xl font-bold text-black hover:text-gray-700 transition-colors">
              {storeName}
            </a>
          </div>

{/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            <a href="/" className="text-black hover:text-black/70 font-medium transition-colors">
              Home
            </a>
            <a href="/products" className="text-black hover:text-black/70 font-medium transition-colors">
              Products
            </a>
            <a href="/about" className="text-black hover:text-black/70 font-medium transition-colors">
              About
            </a>
            <a href="/contact" className="text-black hover:text-black/70 font-medium transition-colors">
              Contact
            </a>
          </div>

{/* Search Bar */}
          <div className="hidden lg:flex items-center flex-1 max-w-md mx-8">
            <div className="relative w-full">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <Input
                type="search"
                placeholder="Search products..."
                className="pl-10 pr-4 py-2 w-full border-gray-300 focus:border-black"
              />
            </div>
          </div>

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

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

{/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden border-t border-gray-200 py-4">
            <div className="flex flex-col space-y-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                <Input type="search" placeholder="Search products..." className="pl-10 pr-4 py-2 w-full" />
              </div>
              <a
                href="/"
                className="text-black hover:text-black/70 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Home
              </a>
              <a
                href="/products"
                className="text-black hover:text-black/70 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Products
              </a>
              <a
                href="/about"
                className="text-black hover:text-black/70 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                About
              </a>
              <a
                href="/contact"
                className="text-black hover:text-black/70 font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Contact
              </a>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/variant-selector.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import type { ProductVariant } from "@/types/product"

interface VariantSelectorProps {
  variants: ProductVariant[]
  selectedVariants: Record<string, string>
  onVariantChange: (optionName: string, value: string) => void
  basePrice: number
}

export function VariantSelector({ variants, selectedVariants, onVariantChange, basePrice }: VariantSelectorProps) {
  // Group variants by their name field (e.g., "color", "size")
  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>>,
  )

// Find the currently selected variant
  const selectedVariant = variants.find((variant) => {
    if (!variant.name || !variant.value) return false
    return selectedVariants[variant.name] === variant.value
  })

// Get variant availability for a specific option 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 capitalize">{optionName}</h3>
            {selectedVariants[optionName] && (
              <span className="text-sm text-gray-600">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 text-white border-black"
                        : "bg-white text-black border-gray-300 hover:border-black"
                    }
                    ${!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">
        <div className="flex items-center justify-between">
          <span className="font-semibold text-lg">Price:</span>
          <span className="text-2xl font-bold text-black">${currentPrice.toFixed(2)}</span>
        </div>

<div className="flex items-center justify-between">
          <span className="font-semibold text-lg">Stock:</span>
          <Badge
            variant={isInStock ? "default" : "destructive"}
            className={isInStock ? "bg-green-100 text-green-800" : ""}
          >
            {isInStock ? "In Stock" : "Out of Stock"}
          </Badge>
        </div>

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

{selectedVariant?.id && (
          <div className="flex items-center justify-between text-sm text-gray-600">
            <span>SKU:</span>
            <span className="font-mono text-xs">{selectedVariant.id}</span>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/featured-products.tsx" isQuickEdit="true" 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 { useAgoraProducts } from "@/hooks/use-agora-products"
import Link from "next/link"
import { useState } from "react"

export function FeaturedProducts() {
  const { products, loading, error } = useAgoraProducts(1, 6)
  const { addItem } = useCart()
  // Track which products are being added to show individual loading states
  const [addingProducts, setAddingProducts] = useState<Set<string>>(new Set())

const handleAddToCart = async (product: any, event: React.MouseEvent) => {
    // Prevent any default behavior and event bubbling
    event.preventDefault()
    event.stopPropagation()

// Add product ID to loading set
    setAddingProducts((prev) => new Set(prev).add(product._id))

try {
      const selectedVariant = product.variants?.[0] || null
      await addItem({
        id: product._id,
        variantId: selectedVariant?.id,
        quantity: 1,
        price: selectedVariant?.price || product.price,
        name: product.name,
        images: product.images,
        description: product.description,
      })
    } finally {
      // Remove product ID from loading set
      setAddingProducts((prev) => {
        const newSet = new Set(prev)
        newSet.delete(product._id)
        return newSet
      })
    }
  }

// Show loading state
  if (loading) {
    return (
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-black mx-auto mb-4"></div>
            <p className="text-gray-600">Loading featured products...</p>
          </div>
        </div>
      </section>
    )
  }

if (error || !products || products.length === 0) {
    return (
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-4">Featured Products</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">Handpicked items from our store</p>
          </div>
          <div className="text-center">
            <p className="text-gray-600">No featured products available at the moment.</p>
          </div>
        </div>
      </section>
    )
  }

return (
    <section className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-black mb-4">Featured Products</h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">Handpicked items from our store</p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {products.map((product) => {
            const hasDiscount = Boolean(product.discountPercentage && product.discountPercentage > 0)
            const isAddingThisProduct = addingProducts.has(product._id)

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

{hasDiscount ? (
                        <Badge className="absolute top-4 left-4 bg-black text-white">
                          {product.discountPercentage}% OFF
                        </Badge>
                      ) : null}

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

<div className="flex items-center gap-2 mb-4 h-8">
                        <span className="text-2xl font-bold text-black">${product.price.toFixed(2)}</span>
                        {hasDiscount ? (
                          <>
                            <span className="text-lg text-gray-500 line-through">
                              ${(product.price / (1 - product.discountPercentage! / 100)).toFixed(2)}
                            </span>
                            <Badge variant="secondary" className="bg-gray-100 text-black text-xs">
                              {product.discountPercentage}% OFF
                            </Badge>
                          </>
                        ) : null}
                      </div>

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

<div className="text-center mt-12">
          <Link href="/products">
            <Button
              size="lg"
              variant="outline"
              className="text-lg px-8 py-6 border-black text-black hover:bg-black hover:text-white bg-transparent"
            >
              View All Products
            </Button>
          </Link>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/products-page-client.tsx" isEdit="true" isQuickEdit="true" 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 { Input } from "@/components/ui/input"
import { useAgoraProducts } from "@/hooks/use-agora-products"
import { useCart } from "@/contexts/cart-context"
import { ShoppingCart, Search, Filter, Loader2 } from "lucide-react"
import { useState, useEffect } from "react"
import Link from "next/link"

export function ProductsPageClient() {
  const [searchTerm, setSearchTerm] = useState("")
  const [sortBy, setSortBy] = useState("featured")
  const [selectedCollection, setSelectedCollection] = useState<string | null>(null)
  const [addingProducts, setAddingProducts] = useState<Set<string>>(new Set())

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

// Check for collection filter in URL params
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search)
    const collectionParam = urlParams.get("collection")
    if (collectionParam) {
      setSelectedCollection(collectionParam)
    }
  }, [])

const handleAddToCart = async (product: any, event: React.MouseEvent) => {
    // Prevent any default behavior and event bubbling
    event.preventDefault()
    event.stopPropagation()

// Add product ID to loading set
    setAddingProducts((prev) => new Set(prev).add(product._id))

// Show loading
  if (loading) {
    return (
      <div className="min-h-screen bg-white pt-24 pb-8">
        <div className="container mx-auto px-4">
          <div className="text-center py-20">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-black mx-auto mb-4"></div>
            <p className="text-gray-600">Loading products...</p>
          </div>
        </div>
      </div>
    )
  }

if (error) {
    return (
      <div className="min-h-screen bg-white pt-24 pb-8">
        <div className="container mx-auto px-4">
          {/* Header with collection filter indicator */}
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-bold text-black mb-4">
              {selectedCollection ? `Collection: ${selectedCollection}` : "All Products"}
            </h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Discover our complete collection of amazing products
            </p>
            {selectedCollection && (
              <Button
                variant="outline"
                className="mt-4 border-gray-300 bg-transparent"
                onClick={() => {
                  setSelectedCollection(null)
                  window.history.pushState({}, "", "/products")
                }}
              >
                Clear Filter
              </Button>
            )}
          </div>

{/* Search and Filter */}
          <div className="flex flex-col md:flex-row gap-4 mb-8">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
              <Input
                type="search"
                placeholder="Search products..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 pr-4 py-3 border-gray-300 focus:border-black"
              />
            </div>

<div className="flex gap-4">
              <select
                value={sortBy}
                onChange={(e) => setSortBy(e.target.value)}
                className="px-4 py-3 border border-gray-300 rounded-lg bg-white"
              >
                <option value="featured">Featured</option>
                <option value="price-low">Price: Low to High</option>
                <option value="price-high">Price: High to Low</option>
                <option value="name">Name A-Z</option>
              </select>

<Button variant="outline" className="px-6 border-gray-300 bg-transparent">
                <Filter className="w-4 h-4 mr-2" />
                Filter
              </Button>
            </div>
          </div>

<div className="text-center py-20">
            <p className="text-gray-600 text-lg">No products available at the moment.</p>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-white pt-24 pb-8">
      <div className="container mx-auto px-4">
        {/* Header with collection filter indicator */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-black mb-4">
            {selectedCollection ? `Collection: ${selectedCollection}` : "All Products"}
          </h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Discover our complete collection of amazing products
          </p>
          {selectedCollection && (
            <Button
              variant="outline"
              className="mt-4 border-gray-300 bg-transparent"
              onClick={() => {
                setSelectedCollection(null)
                window.history.pushState({}, "", "/products")
              }}
            >
              Clear Filter
            </Button>
          )}
        </div>

{/* Search and Filter */}
        <div className="flex flex-col md:flex-row gap-4 mb-8">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
            <Input
              type="search"
              placeholder="Search products..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 pr-4 py-3 border-gray-300 focus:border-black"
            />
          </div>

<div className="flex gap-4">
            <select
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value)}
              className="px-4 py-3 border border-gray-300 rounded-lg bg-white"
            >
              <option value="featured">Featured</option>
              <option value="price-low">Price: Low to High</option>
              <option value="price-high">Price: High to Low</option>
              <option value="name">Name A-Z</option>
            </select>

<Button variant="outline" className="px-6 border-gray-300 bg-transparent">
              <Filter className="w-4 h-4 mr-2" />
              Filter
            </Button>
          </div>
        </div>

{/* Products Grid */}
        {products.length === 0 ? (
          <div className="text-center py-20">
            <p className="text-gray-600 text-lg">No products found matching your search.</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 hasDiscount = !!(product.discountPercentage && product.discountPercentage > 0)
              const isAddingThisProduct = addingProducts.has(product._id)

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

{hasDiscount && <Badge className="absolute top-4 left-4 bg-black text-white">Sale</Badge>}

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

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

<div className="flex items-center gap-2 mb-4 min-h-[2rem]">
                          <span className="text-2xl font-bold text-black">${product.price.toFixed(2)}</span>
                          {hasDiscount && (
                            <>
                              <span className="text-lg text-gray-500 line-through">
                                ${(product.price / (1 - product.discountPercentage! / 100)).toFixed(2)}
                              </span>
                              <Badge variant="secondary" className="bg-gray-100 text-black text-xs">
                                {product.discountPercentage}% OFF
                              </Badge>
                            </>
                          )}
                        </div>

<div className="mt-auto">
                          <Button
                            type="button"
                            className="w-full bg-black text-white hover:bg-black/90"
                            onClick={(e) => handleAddToCart(product, e)}
                            disabled={!product.available || isAddingThisProduct}
                          >
                            {isAddingThisProduct ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : "Add to Cart"}
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "About Us - Zara Store Creation",
  description: "Learn about our story, mission, and commitment to providing exceptional fashion and style.",
}

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

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

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

{/* Team Section */}
          <div className="text-center">
            <h2 className="text-3xl font-bold text-foreground mb-6">Meet Our Team</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto mb-8">
              Our diverse team of passionate individuals works tirelessly to bring you the best fashion products and
              service. From our buyers who travel the world to source unique items, to our customer service team who
              ensures your satisfaction, we're here for you.
            </p>
            <div className="bg-muted rounded-lg p-8">
              <p className="text-foreground font-medium">
                "We believe that great fashion has the power to inspire, connect, and transform lives. That's why we're
                committed to bringing you only the finest."
              </p>
              <p className="text-muted-foreground mt-4">— The Zara Store Creation Team</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="services/api.ts" isEdit="true" isQuickEdit="true"
const BASE_URL = "https://zues.searchagora.com"
const STORE_ID = "68e3d31e17245fb993f54d31" // Updated STORE_ID to the provided storeId

export const getStoreProducts = async (page = 1, limit = 20, query = "") => {
  try {
    const response = await fetch(
      `${BASE_URL}/storefront/v1/stores/${STORE_ID}/products?page=${page}&limit=${limit}&q=${query}`,
      {
        method: "GET",
      },
    )
    return await response.json()
  } catch (error) {
    console.log(`[getStoreProducts] error: ${error}`)
    throw error
  }
}

export const getProductDetails = async (productId: string) => {
  try {
    const response = await fetch(`${BASE_URL}/storefront/v1/stores/${STORE_ID}/products/${productId}`, {
      method: "GET",
    })
    return await response.json()
  } catch (error) {
    console.log(`[getProductDetails] error: ${error}`)
    throw error
  }
}

export const getStoreInfo = async () => {
  try {
    const response = await fetch(`${BASE_URL}/storefront/v1/stores/${STORE_ID}`, {
      method: "GET",
    })
    return await response.json()
  } catch (error) {
    console.log(`[getStoreInfo] error: ${error}`)
    throw error
  }
}

export const checkout = async (cartItems: any[]) => {
  try {
    const response = await fetch(`${BASE_URL}/storefront/v1/stores/checkout`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        storeId: STORE_ID,
        cartItems,
      }),
    })
    return await response.json()
  } catch (error) {
    console.log(`[checkout] error: ${error}`)
    throw error
  }
}

export const checkoutSuccess = async (sessionId: string) => {
  try {
    const response = await fetch(`${BASE_URL}/storefront/v1/stores/checkout/success`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        session_id: sessionId,
      }),
    })
    return await response.json()
  } catch (error) {
    console.log(`[checkoutSuccess] error: ${error}`)
    throw error
  }
}

export const getProductReviews = async (productId: string) => {
  try {
    const response = await fetch(`${BASE_URL}/storefront/v1/stores/${STORE_ID}/products/${productId}/reviews`, {
      method: "GET",
    })
    return await response.json()
  } catch (error) {
    console.log(`[getProductReviews] error: ${error}`)
    throw error
  }
}

export const submitProductReview = async (
  productId: string,
  reviewData: {
    rating: number
    title: string
    comment: string
    name: string
    email: string
  },
) => {
  try {
    const response = await fetch(`${BASE_URL}/storefront/v1/stores/${STORE_ID}/products/${productId}/reviews`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(reviewData),
    })
    return await response.json()
  } catch (error) {
    console.log(`[submitProductReview] error: ${error}`)
    throw error
  }
}
[V0_FILE]typescript:file="types/product.ts" isEdit="true" isQuickEdit="true"
export interface ProductVariant {
  id: string
  name?: string
  value?: string
  price?: number
  originalPrice?: number
  quantity?: number
  stock?: number
  isOnSale?: boolean
  isInStock?: boolean
  images?: string[]
  option1?: string
  option2?: string
  option3?: string
}

export interface PriceHistory {
  price: number
  date: Date
}

export interface Product {
  _id: string
  id?: string
  name: string
  description: string
  brand: string
  price: number
  variants?: ProductVariant[]
  images: string[]
  url: string
  slug: string
  currency: string
  country: string
  storeName: string
  source: string
  creator: string
  imageEmbedding?: number[]
  textEmbedding?: number[]
  priceHistory?: PriceHistory[]
  published_at?: Date
  last_updated?: Date
  isActive: boolean
  available: boolean
  categories?: string[]
  tags?: string[]
  sku?: string
  stock?: number
  rating?: number
  reviewCount?: number
  discountPercentage?: number
  discount?: number
  discountVal?: number
  keywords?: string[]
  pros?: string[]
  cons?: string[]
  ships_to_countries?: string[]
  storeOrder?: number
  isVerified?: boolean
  isBoosted?: boolean
  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 Review {
  _id: string
  productId: string
  rating: number
  title: string
  comment: string
  name: string
  email: string
  verified?: boolean
  helpful?: number
  createdAt: string
  updatedAt?: string
}

export interface ReviewsResponse {
  status: string
  data: {
    reviews: Review[]
    averageRating: number
    totalReviews: number
    ratingDistribution: {
      5: number
      4: number
      3: number
      2: number
      1: number
    }
  }
}
[V0_FILE]typescriptreact:file="components/product-reviews.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Star, ThumbsUp, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { getProductReviews, submitProductReview } from "@/services/api"
import type { Review } from "@/types/product"

interface ProductReviewsProps {
  productId: string
  productName: string
}

export function ProductReviews({ productId, productName }: ProductReviewsProps) {
  const [reviews, setReviews] = useState<Review[]>([])
  const [averageRating, setAverageRating] = useState(0)
  const [totalReviews, setTotalReviews] = useState(0)
  const [ratingDistribution, setRatingDistribution] = useState({ 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 })
  const [loading, setLoading] = useState(true)
  const [showReviewForm, setShowReviewForm] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [formData, setFormData] = useState({
    rating: 5,
    title: "",
    comment: "",
    name: "",
    email: "",
  })

useEffect(() => {
    fetchReviews()
  }, [productId])

const fetchReviews = async () => {
    try {
      setLoading(true)
      const response = await getProductReviews(productId)
      if (response.status === "success" && response.data) {
        setReviews(response.data.reviews || [])
        setAverageRating(response.data.averageRating || 0)
        setTotalReviews(response.data.totalReviews || 0)
        setRatingDistribution(response.data.ratingDistribution || { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 })
      }
    } catch (error) {
      console.error("Error fetching reviews:", error)
    } finally {
      setLoading(false)
    }
  }

const handleSubmitReview = async (e: React.FormEvent) => {
    e.preventDefault()

if (!formData.rating || !formData.title || !formData.comment || !formData.name || !formData.email) {
      alert("Please fill in all fields")
      return
    }

try {
      setSubmitting(true)
      const response = await submitProductReview(productId, formData)

if (response.status === "success") {
        alert("Thank you for your review! It will be published after moderation.")
        setFormData({ rating: 5, title: "", comment: "", name: "", email: "" })
        setShowReviewForm(false)
        fetchReviews()
      }
    } catch (error) {
      console.error("Error submitting review:", error)
      alert("Failed to submit review. Please try again.")
    } finally {
      setSubmitting(false)
    }
  }

const renderStars = (rating: number, size: "sm" | "md" | "lg" = "md") => {
    const sizeClasses = {
      sm: "w-3 h-3",
      md: "w-4 h-4",
      lg: "w-5 h-5",
    }

return (
      <div className="flex items-center gap-0.5">
        {[1, 2, 3, 4, 5].map((star) => (
          <Star
            key={star}
            className={`${sizeClasses[size]} ${
              star <= rating ? "fill-yellow-400 text-yellow-400" : "fill-gray-200 text-gray-200"
            }`}
          />
        ))}
      </div>
    )
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })
  }

if (loading) {
    return (
      <div className="py-12 text-center">
        <Loader2 className="w-8 h-8 animate-spin mx-auto text-gray-400" />
        <p className="text-gray-500 mt-4">Loading reviews...</p>
      </div>
    )
  }

return (
    <div className="space-y-8">
      {/* Reviews Summary */}
      <div className="border-b border-gray-200 pb-8">
        <h2 className="text-2xl font-bold text-black mb-6">Customer Reviews</h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Average Rating */}
          <div className="flex items-start gap-6">
            <div className="text-center">
              <div className="text-5xl font-bold text-black mb-2">
                {averageRating > 0 ? averageRating.toFixed(1) : "0.0"}
              </div>
              {renderStars(Math.round(averageRating), "lg")}
              <p className="text-sm text-gray-600 mt-2">
                {totalReviews} {totalReviews === 1 ? "review" : "reviews"}
              </p>
            </div>
          </div>

{/* Rating Distribution */}
          <div className="space-y-2">
            {[5, 4, 3, 2, 1].map((rating) => {
              const count = ratingDistribution[rating as keyof typeof ratingDistribution] || 0
              const percentage = totalReviews > 0 ? (count / totalReviews) * 100 : 0

return (
                <div key={rating} className="flex items-center gap-3">
                  <span className="text-sm font-medium text-gray-700 w-8">{rating} ★</span>
                  <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div className="h-full bg-yellow-400 transition-all" style={{ width: `${percentage}%` }} />
                  </div>
                  <span className="text-sm text-gray-600 w-12 text-right">{count}</span>
                </div>
              )
            })}
          </div>
        </div>

{/* Write Review Button */}
        <div className="mt-6">
          <Button onClick={() => setShowReviewForm(!showReviewForm)} className="bg-black text-white hover:bg-black/90">
            {showReviewForm ? "Cancel" : "Write a Review"}
          </Button>
        </div>
      </div>

{/* Review Form */}
      {showReviewForm && (
        <div className="border border-gray-200 rounded-lg p-6 bg-gray-50">
          <h3 className="text-xl font-bold text-black mb-4">Write Your Review</h3>
          <form onSubmit={handleSubmitReview} className="space-y-4">
            {/* Rating */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Rating *</label>
              <div className="flex gap-2">
                {[1, 2, 3, 4, 5].map((star) => (
                  <button
                    key={star}
                    type="button"
                    onClick={() => setFormData({ ...formData, rating: star })}
                    className="focus:outline-none"
                  >
                    <Star
                      className={`w-8 h-8 cursor-pointer transition-colors ${
                        star <= formData.rating
                          ? "fill-yellow-400 text-yellow-400"
                          : "fill-gray-200 text-gray-200 hover:fill-yellow-200 hover:text-yellow-200"
                      }`}
                    />
                  </button>
                ))}
              </div>
            </div>

{/* Title */}
            <div>
              <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-2">
                Review Title *
              </label>
              <Input
                id="title"
                value={formData.title}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                placeholder="Sum up your experience"
                required
                className="w-full"
              />
            </div>

{/* Comment */}
            <div>
              <label htmlFor="comment" className="block text-sm font-medium text-gray-700 mb-2">
                Your Review *
              </label>
              <Textarea
                id="comment"
                value={formData.comment}
                onChange={(e) => setFormData({ ...formData, comment: e.target.value })}
                placeholder="Share your thoughts about this product"
                required
                rows={5}
                className="w-full"
              />
            </div>

{/* Name and Email */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
                  Your Name *
                </label>
                <Input
                  id="name"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="John Doe"
                  required
                />
              </div>
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
                  Your Email *
                </label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  placeholder="john@example.com"
                  required
                />
              </div>
            </div>

<Button type="submit" disabled={submitting} className="w-full bg-black text-white hover:bg-black/90">
              {submitting ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin mr-2" />
                  Submitting...
                </>
              ) : (
                "Submit Review"
              )}
            </Button>
          </form>
        </div>
      )}

{/* Reviews List */}
      <div className="space-y-6">
        {reviews.length === 0 ? (
          <div className="text-center py-12 bg-gray-50 rounded-lg">
            <p className="text-gray-600 text-lg">No reviews yet. Be the first to review this product!</p>
          </div>
        ) : (
          reviews.map((review) => (
            <div key={review._id} className="border-b border-gray-200 pb-6 last:border-b-0">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <div className="flex items-center gap-3 mb-2">
                    {renderStars(review.rating)}
                    {review.verified && (
                      <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Verified Purchase</span>
                    )}
                  </div>
                  <h4 className="font-bold text-black text-lg">{review.title}</h4>
                </div>
              </div>

<p className="text-gray-700 mb-3 leading-relaxed">{review.comment}</p>

<div className="flex items-center justify-between text-sm text-gray-600">
                <div>
                  <span className="font-medium">{review.name}</span>
                  <span className="mx-2">•</span>
                  <span>{formatDate(review.createdAt)}</span>
                </div>

{review.helpful !== undefined && review.helpful > 0 && (
                  <button className="flex items-center gap-1 text-gray-600 hover:text-black">
                    <ThumbsUp className="w-4 h-4" />
                    <span>Helpful ({review.helpful})</span>
                  </button>
                )}
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/product-page-client.tsx" isEdit="true" isQuickEdit="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 { ProductReviews } from "@/components/product-reviews"

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

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

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

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

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

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

if (error || !product) {
    return (
      <div className="min-h-screen bg-white 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 hover:text-black">
              <ArrowLeft className="w-4 h-4" />
              Back to Home
            </Link>
          </div>
          <div className="text-center py-20">
            <p className="text-gray-600 text-lg">Product not found.</p>
            <Link href="/products">
              <Button className="mt-4 bg-black text-white hover:bg-black/90">Browse All Products</Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

const images = product.images || []
  const price = selectedVariant?.price || product.price
  const compareAtPrice =
    selectedVariant?.originalPrice ||
    (product.discountPercentage ? product.price / (1 - product.discountPercentage / 100) : null)
  const hasDiscount = Boolean(compareAtPrice && compareAtPrice > price)
  const discount = hasDiscount ? Math.round(((compareAtPrice - price) / compareAtPrice) * 100) : 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,
        images: images,
        quantity: quantity,
        description: product.description,
      })
    } finally {
      setIsAddingToCart(false)
    }
  }

return (
    <div className="min-h-screen bg-white py-8">
      <div className="container mx-auto px-4">
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 mb-8">
          <Link href="/" className="flex items-center gap-2 text-gray-600 hover:text-black">
            <ArrowLeft className="w-4 h-4" />
            Back to Home
          </Link>
        </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 rounded-lg overflow-hidden border border-gray-200">
              <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 rounded-lg overflow-hidden border-2 transition-colors ${
                      selectedImage === index ? "border-black" : "border-gray-200 hover:border-gray-300"
                    }`}
                  >
                    <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">
            <div>
              {hasDiscount ? <Badge className="bg-black text-white mb-4">{discount}% OFF</Badge> : null}

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

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

{hasVariants && (
              <div className="border-t border-gray-200 pt-6">
                <VariantSelector
                  variants={product.variants}
                  selectedVariants={selectedVariants}
                  onVariantChange={handleVariantChange}
                  basePrice={product.price}
                />
              </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">Quantity:</span>
                <div className="flex items-center border border-gray-300 rounded-lg">
                  <button
                    type="button"
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    className="px-3 py-2 hover:bg-gray-100"
                    disabled={isAddingToCart}
                  >
                    -
                  </button>
                  <span className="px-4 py-2 border-x border-gray-300">{quantity}</span>
                  <button
                    type="button"
                    onClick={() => setQuantity(quantity + 1)}
                    className="px-3 py-2 hover:bg-gray-100"
                    disabled={isAddingToCart}
                  >
                    +
                  </button>
                </div>
                <span className="text-sm text-gray-500">
                  {isInStock ? "In stock" : "Out of stock"}
                  {selectedVariant?.quantity && ` (${selectedVariant.quantity} available)`}
                </span>
              </div>

<div className="flex gap-4">
                <Button
                  type="submit"
                  disabled={!isInStock || isAddingToCart || (hasVariants && !selectedVariant)}
                  className="flex-1 bg-black text-white hover:bg-black/90 text-lg py-6 disabled:opacity-50"
                >
                  {isAddingToCart ? (
                    <Loader2 className="w-5 h-5 animate-spin mr-2" />
                  ) : (
                    <ShoppingCart className="w-5 h-5 mr-2" />
                  )}
                  {!isInStock ? "Out of Stock" : hasVariants && !selectedVariant ? "Select Options" : "Add to Cart"}
                </Button>
              </div>
            </form>

{/* Features */}
            <div className="grid grid-cols-3 gap-4">
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <Truck className="w-4 h-4 text-black" />
                Free Shipping
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <Shield className="w-4 h-4 text-black" />
                Secure Payment
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <RotateCcw className="w-4 h-4 text-black" />
                Easy Returns
              </div>
            </div>
          </div>
        </div>

{/* Product Details Tabs */}
        <div className="mt-16">
          <div className="border-b border-gray-200">
            <nav className="flex space-x-8">
              {["description", "details", "reviews"].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 text-black"
                      : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                  }`}
                >
                  {tab}
                </button>
              ))}
            </nav>
          </div>

<div className="py-8">
            {activeTab === "description" && (
              <div className="prose max-w-none">
                <div
                  className="text-gray-600 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">
                    <span className="font-medium text-black">Product ID:</span>
                    <span className="text-gray-600">{product._id}</span>
                  </div>
                  <div className="flex justify-between py-2 border-b border-gray-200">
                    <span className="font-medium text-black">Brand:</span>
                    <span className="text-gray-600">{product.brand}</span>
                  </div>
                  <div className="flex justify-between py-2 border-b border-gray-200">
                    <span className="font-medium text-black">SKU:</span>
                    <span className="text-gray-600">{product.sku || "N/A"}</span>
                  </div>
                  {selectedVariant && (
                    <div className="flex justify-between py-2 border-b border-gray-200">
                      <span className="font-medium text-black">Selected Variant:</span>
                      <span className="text-gray-600">{selectedVariant.name || selectedVariant.id}</span>
                    </div>
                  )}
                </div>
              </div>
            )}

{activeTab === "reviews" && <ProductReviews productId={productId} productName={product.name} />}
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>