E-commerce Store

Create database tables for an e-commerce store:

1. products
   - id (uuid, primary key)
   - name (text)
   - description (text)
   - price (numeric)
   - image_url (text)
   - category (text)
   - inventory (integer)
   - created_at (timestamp)

2. orders
   - id (uuid, primary key)
   - user_id (uuid, nullable)
   - email (text)
   - status (text: 'pending', 'paid', 'shipped', 'delivered')
   - total (numeric)
   - stripe_session_id (text)
   - created_at (timestamp)

3. order_items
   - id (uuid, primary key)
   - order_id (uuid, references orders)
   - product_id (uuid, references products)
   - quantity (integer)
   - price (numeric)

Make products publicly readable.

Add 6 sample products to the database:
- Mix of different categories
- Realistic prices
- Placeholder images from Unsplash

Create an e-commerce homepage with:
- Hero banner with featured products or sale
- Category navigation
- Featured products grid (4-6 items)
- "View All Products" link

Create a products page that:
- Shows all products in a responsive grid
- Has category filter tabs
- Has sort options (price, newest)
- Shows product cards with image, name, price, add to cart
- Handles empty state

Create a product card component with:
- Product image (hover zoom effect)
- Product name
- Price display
- "Add to Cart" button
- Quick view option
- Sale badge (if discounted)

Create a product detail page at /products/[id] with:
- Large product image gallery
- Product name and price
- Full description
- Quantity selector
- "Add to Cart" button
- Related products section
- Back to products link

Add an image gallery to product pages:
- Main large image
- Thumbnail strip below
- Click thumbnail to change main image
- Lightbox on click

Implement shopping cart functionality:
- Store cart in localStorage (persists across sessions)
- Add to cart function
- Remove from cart function
- Update quantity function
- Calculate totals

Create a cart sidebar/drawer that:
- Opens when clicking cart icon
- Shows list of cart items
- Each item shows: image, name, quantity, price, remove button
- Shows subtotal
- Has "Continue Shopping" and "Checkout" buttons
- Shows empty cart message when empty

Add a cart icon to the navigation that:
- Shows current item count badge
- Opens cart sidebar on click
- Updates dynamically when items added

STRIPE_SECRET_KEY=sk_...
STRIPE_PUBLISHABLE_KEY=pk_...

Create a checkout flow:
1. Cart review page showing all items
2. Shipping address form
3. Create Stripe checkout session with cart items
4. Redirect to Stripe for payment
5. Success page after payment

Create an API route for Stripe checkout:
- Receive cart items from client
- Create line items for Stripe
- Create checkout session
- Return session URL
- Include success and cancel URLs

Create an order confirmation page that:
- Shows after successful payment
- Displays order number
- Lists ordered items
- Shows total paid
- Includes "Continue Shopping" button
- Sends to email if logged in

Create an orders page for logged-in users:
- List of past orders
- Order status
- Order details on click
- Reorder button

Create a simple admin page to:
- View all orders
- Update order status
- View basic sales stats

Add loading states:
- Product grid skeleton while loading
- Button spinner when adding to cart
- Checkout button loading state

Add error handling:
- Show error if product fails to load
- Handle out of stock items
- Display payment errors gracefully

Optimize for mobile:
- Full-screen cart on mobile
- Touch-friendly product gallery
- Mobile-optimized checkout
- Easy quantity adjustments