Spaces:

eeshaAI
/

cellex-web

Running

eeshaAI commited on Jul 11

Commit

94c9882

1 Parent(s): f8e9acc

feat: Migrate frontend from static HTML to Next.js 16 App Router

- All 16 buyer pages: home, login, product, cart, checkout, payment,
categories, search, seller-profile, profile, orders, wishlist,
videos, live, live-watch, group-buy, ai-chat, link-account, telegram
- 7 seller dashboard pages with shared sidebar layout
- 22 API route proxies to existing Supabase Edge Functions
- Suspense boundaries for useSearchParams pages
- Standalone output build for Docker deployment
- Dockerfile (multi-stage Node 20 alpine, port 7860)
- README with HF Space YAML frontmatter
- .hfignore for lean Docker context

Backend unchanged: 27 Supabase Edge Functions, Render bot, OpenWA,
PalmPay payment verifier — all remain in place.

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.gitignore +54 -9
.hfignore +49 -0
Dockerfile +28 -17
Eesha buying folder/auth.html +0 -246
Eesha buying folder/cart.html +0 -651
Eesha buying folder/categories.html +0 -689
Eesha buying folder/checkout.html +0 -858
Eesha buying folder/css/index.css +0 -72
Eesha buying folder/css/loader.css +0 -0
Eesha buying folder/css/product.css +0 -0
Eesha buying folder/css/style.css +0 -203
Eesha buying folder/js/cart.js +0 -0
Eesha buying folder/js/loader.js +0 -0
Eesha buying folder/js/product.js +0 -536
Eesha buying folder/login.html +0 -153
Eesha buying folder/order-confirmation.html +0 -450
Eesha buying folder/orders.html +0 -422
Eesha buying folder/product.html +0 -355
Eesha buying folder/profile.html +0 -356
Eesha buying folder/settings.html +0 -524
Eesha buying folder/signup.html +0 -135
Eesha buying folder/wishlist.html +0 -315
README.md +43 -19
ai-chat.html +0 -235
auth.html +0 -246
bun.lock +0 -0
cart.html +0 -653
categories.html +0 -611
checkout.html +0 -891
components.json +21 -0
css/common.css +0 -360
css/index.css +0 -747
css/loader.css +0 -0
css/product.css +0 -0
css/style.css +0 -281
css/styles.css +0 -0
dist/style.css +0 -1
eeshapay-logo.html +0 -54
eslint.config.mjs +50 -0
group-buy.html +0 -200
index.html +0 -1448
js/ai-assistant.js +0 -301
js/ai-buyer-assistant.js +0 -962
js/cart.js +0 -203
js/config/edge-functions.js +0 -354
js/load-navbar.js +0 -23
js/loader.js +0 -0
js/main.js +0 -117
js/product.js +0 -536
link-account.html +0 -165

.gitignore CHANGED Viewed

@@ -1,9 +1,54 @@
-# Sensitive - don't commit
-.env
-.env.local
-*.secret
-__pycache__/
-*.pyc
-.git/
-supabase/.temp/
-supabase/supabase/

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# dependencies
+node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+# testing
+/coverage
+# next.js
+/.next/
+/out/
+# production
+/build
+# misc
+.DS_Store
+*.pem
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+# env files (can opt-in for committing if needed)
+.env*
+# vercel
+.vercel
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+local-*
+.claude
+.z-ai-config
+*.log
+dev.log
+dev.out.log
+test
+prompt
+server.log
+# Skills directory
+/skills/

.hfignore ADDED Viewed

	@@ -0,0 +1,49 @@

+# Hugging Face Spaces deployment ignore file
+# Keep the Docker image build lean
+# Dependencies (rebuilt in Docker)
+node_modules
+.pnp
+.pnp.*
+.yarn/*
+# Build artifacts (rebuilt in Docker)
+.next
+out
+dist
+build
+# Python (this is a Node-only deployment)
+scripts
+skills
+examples
+mini-services
+# Prisma local DB
+db
+prisma
+# Logs & dev artifacts
+*.log
+dev.log
+server.log
+worklog.md
+agents.md
+# Caddy / reverse proxy (not needed inside HF Space)
+Caddyfile
+# Original upload / download folders (not part of web app)
+upload
+download
+tool-results
+# Git
+.git
+.gitignore
+.github
+# Local env files (HF Spaces has its own secrets UI)
+.env
+.env.local
+.env.*.local

Dockerfile CHANGED Viewed

@@ -1,27 +1,38 @@
-FROM python:3.10-slim
-# Install system dependencies
-RUN apt-get update && apt-get install -y \
-    build-essential \
-    curl \
-    && rm -rf /var/lib/apt/lists/*
 WORKDIR /app
-# Copy requirements first for caching
-COPY web-server/requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-# Copy everything else (frontend files + web-server)
 COPY . .
-# HF Spaces expects port 7860
 ENV PORT=7860
-EXPOSE 7860
-# Health check
-HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
-    CMD curl -f http://localhost:7860/api/health || exit 1
-# Run the web server
-CMD ["python", "web-server/server.py"]

+# Cellex — Hugging Face Space Deployment
+# Docker space that builds the Next.js standalone output and serves it on port 7860
+# ---- Stage 1: Build ----
+FROM node:20-alpine AS builder
 WORKDIR /app
+# Install dependencies (use npm ci for reproducible builds)
+COPY package*.json ./
+RUN npm ci --no-audit --no-fund
+# Copy source
 COPY . .
+# Build the Next.js standalone output
+RUN npm run build
+# ---- Stage 2: Run ----
+FROM node:20-alpine AS runner
+WORKDIR /app
+# Set production env
+ENV NODE_ENV=production
 ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+# Copy standalone build + public assets + static
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
+# HF Spaces runs on port 7860 by default
+EXPOSE 7860
+# Run the standalone Next.js server
+CMD ["node", "server.js"]

Eesha buying folder/auth.html DELETED Viewed

@@ -1,246 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login / Signup - Eesha</title>
-    <link rel="stylesheet" href="css/style.css">
-</head>
-<body class="auth-body">
-    <div class="auth-container">
-        <div id="login-form">
-            <h2>Login to Eesha</h2>
-            <form id="login">
-                <input type="email" id="login-email" placeholder="Email" required>
-                <input type="password" id="login-password" placeholder="Password" required>
-                <button type="submit">Login</button>
-            </form>
-            <p>Don't have an account? <a href="#" id="show-signup">Sign up</a></p>
-        </div>
-        <div id="signup-form" style="display:none;">
-            <h2>Create an Account</h2>
-            <form id="signup">
-                <input type="text" id="signup-name" placeholder="Full Name" required>
-                <input type="email" id="signup-email" placeholder="Email" required>
-                <input type="password" id="signup-password" placeholder="Password" required>
-                <div class="user-type">
-                    <label>I am a:</label>
-                    <input type="radio" id="buyer" name="user_type" value="buyer" checked>
-                    <label for="buyer">Buyer</label>
-                    <input type="radio" id="seller" name="user_type" value="seller">
-                    <label for="seller">Seller</label>
-                </div>
-                <button type="submit">Sign Up</button>
-            </form>
-            <p>Already have an account? <a href="#" id="show-login">Log in</a></p>
-        </div>
-        <a href="../eesha selling folder/login.html" style="text-decoration: none;"> Am a Seller</a>
-    </div>
-<script>/* General Body & Layout */
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    background-color: #f4f4f4;
-    color: #333;
-}
-.container {
-    width: 90%;
-    margin: 0 auto;
-    max-width: 1200px;
-}
-/* Header */
-header {
-    background-color: #2c3e50;
-    color: white;
-    padding: 1rem 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-header h1 {
-    margin: 0;
-    font-size: 1.8rem;
-}
-header nav a, header nav button {
-    color: white;
-    text-decoration: none;
-    background: #3498db;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    border: none;
-    cursor: pointer;
-}
-header nav span {
-    margin-right: 15px;
-}
-/* Product Grid */
-.product-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1.5rem;
-    margin-top: 2rem;
-}
-.product-card {
-    background-color: white;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    overflow: hidden;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-.product-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-}
-.product-card img {
-    width: 100%;
-    height: 180px;
-    object-fit: cover;
-}
-.product-card h3 {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    padding: 0 10px;
-}
-.product-card .price {
-    color: #e74c3c;
-    font-weight: bold;
-    font-size: 1.2rem;
-    margin-bottom: 1rem;
-}
-/* Auth Page */
-.auth-body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background: linear-gradient(135deg, #3498db, #2c3e50);
-}
-.auth-container {
-    background-color: white;
-    padding: 2rem;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-    width: 100%;
-    max-width: 400px;
-    text-align: center;
-}
-.auth-container h2 {
-    margin-bottom: 1.5rem;
-}
-.auth-container input[type="text"],
-.auth-container input[type="email"],
-.auth-container input[type="password"] {
-    width: calc(100% - 20px);
-    padding: 10px;
-    margin-bottom: 1rem;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-.auth-container button {
-    width: 100%;
-    padding: 12px;
-    background-color: #2ecc71;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 1rem;
-}
-.auth-container p {
-    margin-top: 1rem;
-}
-.auth-container a {
-    color: #3498db;
-    text-decoration: none;
-    font-weight: bold;
-}
-.user-type {
-    margin-bottom: 1rem;
-    text-align: left;
-}
-/* Dashboard */
-.dashboard-form {
-    background: white;
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin-bottom: 2rem;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-.dashboard-form input, .dashboard-form textarea {
-    width: calc(100% - 22px);
-    padding: 10px;
-    margin-bottom: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-.dashboard-form button {
-    background-color: #2c3e50;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-/* AI Assistant */
-.ai-assistant {
-    background-color: #eaf5ff;
-    border: 1px solid #bde0ff;
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-}
-.ai-assistant h3 {
-    margin-top: 0;
-}
-.ai-chat-box {
-    display: flex;
-    gap: 10px;
-}
-.ai-chat-box input {
-    flex-grow: 1;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-.ai-chat-box button {
-    padding: 10px 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-#ai-results {
-    margin-top: 1rem;
-}</script>
-</body>
-</html>

Eesha buying folder/cart.html DELETED Viewed

@@ -1,651 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Shopping Cart - Cellex | Nigeria's #1 Marketplace</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="../js/cart.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="../js/config/edge-functions.js?v=3"></script>
-    <script src="../js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
-        * {
-            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
-        }
-        .loading-spinner {
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes slideIn {
-            from { opacity: 0; transform: translateX(-20px); }
-            to { opacity: 1; transform: translateX(0); }
-        }
-        .fade-in {
-            animation: fadeIn 0.3s ease-out forwards;
-        }
-        .slide-in {
-            animation: slideIn 0.3s ease-out forwards;
-        }
-        .cart-item {
-            animation: fadeIn 0.3s ease-out forwards;
-        }
-        .cart-item:nth-child(1) { animation-delay: 0.05s; }
-        .cart-item:nth-child(2) { animation-delay: 0.1s; }
-        .cart-item:nth-child(3) { animation-delay: 0.15s; }
-        .cart-item:nth-child(4) { animation-delay: 0.2s; }
-        .cart-item:nth-child(5) { animation-delay: 0.25s; }
-        .quantity-btn {
-            transition: all 0.2s ease;
-        }
-        .quantity-btn:hover {
-            transform: scale(1.1);
-        }
-        .quantity-btn:active {
-            transform: scale(0.95);
-        }
-        .product-image {
-            transition: transform 0.3s ease;
-        }
-        .product-image:hover {
-            transform: scale(1.05);
-        }
-        .checkout-btn {
-            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
-            transition: all 0.3s ease;
-        }
-        .checkout-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
-        }
-        .checkout-btn:active {
-            transform: translateY(0);
-        }
-        .summary-card {
-            background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
-        }
-        .delete-btn {
-            transition: all 0.2s ease;
-        }
-        .delete-btn:hover {
-            background: #fee2e2;
-            color: #dc2626;
-        }
-        .promo-input:focus {
-            box-shadow: 0 0 0 3px rgba(240, 71, 74, 0.1);
-        }
-        .skeleton {
-            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-            background-size: 200% 100%;
-            animation: shimmer 1.5s infinite;
-        }
-        @keyframes shimmer {
-            0% { background-position: -200% 0; }
-            100% { background-position: 200% 0; }
-        }
-        .empty-cart-icon {
-            animation: float 3s ease-in-out infinite;
-        }
-        @keyframes float {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
-        }
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #c1c1c1;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #a1a1a1;
-        }
-    </style>
-</head>
-<body class="bg-gray-50 min-h-screen">
-    <!-- Header -->
-    <header class="bg-white shadow-sm sticky top-0 z-50">
-        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <a href="../index.html" class="flex items-center gap-2 group">
-                    <div class="w-10 h-10 flex items-center justify-center">
-                        <svg viewBox="0 0 60 60" class="w-full h-full">
-                            <defs>
-                                <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" stop-color="#fbbf24"/>
-                                    <stop offset="50%" stop-color="#f59e0b"/>
-                                    <stop offset="100%" stop-color="#d97706"/>
-                                </linearGradient>
-                                <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                    <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                    <feMerge>
-                                        <feMergeNode in="coloredBlur"/>
-                                        <feMergeNode in="SourceGraphic"/>
-                                    </feMerge>
-                                </filter>
-                            </defs>
-                            <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                                  fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                            <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                                  fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                            <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                                  fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                            <g transform="translate(52, 8)">
-                                <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#fbbf24"/>
-                            </g>
-                        </svg>
-                    </div>
-                    <div class="flex flex-col">
-                        <span class="text-xl font-extrabold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent leading-tight">Cellex</span>
-                        <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                    </div>
-                </a>
-                <div class="flex items-center space-x-4">
-                    <a href="../index.html" class="text-gray-600 hover:text-brand-500 transition-colors">
-                        <i class="fas fa-home text-xl"></i>
-                    </a>
-                    <a href="cart.html" class="relative text-brand-500">
-                        <i class="fas fa-shopping-cart text-xl"></i>
-                        <span id="cartCount" class="absolute -top-2 -right-2 bg-brand-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                    </a>
-                </div>
-            </div>
-        </nav>
-    </header>
-    <!-- Breadcrumb -->
-    <div class="bg-white border-b">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
-            <nav class="flex items-center space-x-2 text-sm text-gray-500">
-                <a href="../index.html" class="hover:text-brand-500 transition-colors">Home</a>
-                <i class="fas fa-chevron-right text-xs"></i>
-                <span class="text-gray-900 font-medium">Shopping Cart</span>
-            </nav>
-        </div>
-    </div>
-    <!-- Main Content -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <!-- Page Title -->
-        <div class="flex items-center justify-between mb-8">
-            <div>
-                <h1 class="text-3xl font-bold text-gray-900">Shopping Cart</h1>
-                <p class="text-gray-500 mt-1" id="cartSummary">Loading your cart...</p>
-            </div>
-            <a href="../index.html" class="hidden sm:flex items-center text-brand-500 hover:text-brand-600 transition-colors font-medium">
-                <i class="fas fa-arrow-left mr-2"></i>
-                Continue Shopping
-            </a>
-        </div>
-        <!-- Cart Content -->
-        <div id="cartContent">
-            <!-- Loading Skeleton -->
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                <div class="lg:col-span-2 space-y-4">
-                    <div class="bg-white rounded-2xl p-6 shadow-sm">
-                        <div class="flex items-center space-x-4">
-                            <div class="skeleton w-24 h-24 rounded-xl"></div>
-                            <div class="flex-1 space-y-3">
-                                <div class="skeleton h-4 w-3/4 rounded"></div>
-                                <div class="skeleton h-3 w-1/2 rounded"></div>
-                                <div class="skeleton h-6 w-1/4 rounded"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-white rounded-2xl p-6 shadow-sm">
-                        <div class="flex items-center space-x-4">
-                            <div class="skeleton w-24 h-24 rounded-xl"></div>
-                            <div class="flex-1 space-y-3">
-                                <div class="skeleton h-4 w-3/4 rounded"></div>
-                                <div class="skeleton h-3 w-1/2 rounded"></div>
-                                <div class="skeleton h-6 w-1/4 rounded"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="lg:col-span-1">
-                    <div class="bg-white rounded-2xl p-6 shadow-sm">
-                        <div class="skeleton h-6 w-1/2 rounded mb-6"></div>
-                        <div class="space-y-4">
-                            <div class="skeleton h-4 w-full rounded"></div>
-                            <div class="skeleton h-4 w-3/4 rounded"></div>
-                            <div class="skeleton h-10 w-full rounded mt-6"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <!-- Footer -->
-    <footer class="bg-dark-900 text-white py-8 mt-12">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <p>&copy; 2025 Cellex. All rights reserved.</p>
-        </div>
-    </footer>
-    <script>
-        let currentUser = null;
-        document.addEventListener('DOMContentLoaded', async () => {
-            await checkAuth();
-            await loadCart();
-        });
-        async function checkAuth() {
-            const { user } = await window.EdgeFunctions.auth.checkSession();
-            currentUser = user || null;
-        }
-        async function loadCart() {
-            const container = document.getElementById('cartContent');
-            // If not logged in, show login prompt
-            if (!currentUser) {
-                renderLoginPrompt();
-                return;
-            }
-            try {
-                const cartItems = await window.Cart.getCartItems();
-                if (!cartItems || cartItems.length === 0) {
-                    renderEmptyCart();
-                    return;
-                }
-                const cartTotal = cartItems.reduce((sum, item) => {
-                    return sum + ((item.products?.price || 0) * (item.quantity || 1));
-                }, 0);
-                // Calculate total quantity for summary
-                const totalItems = cartItems.reduce((sum, item) => sum + (item.quantity || 0), 0);
-                document.getElementById('cartSummary').textContent = `${totalItems} item${totalItems !== 1 ? 's' : ''} in your cart`;
-                container.innerHTML = `
-                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                        <!-- Cart Items -->
-                        <div class="lg:col-span-2 space-y-4">
-                            ${cartItems.map((item, index) => {
-                                if (!item.products) return '';
-                                return renderCartItem(item.products, item.quantity, index, item.id);
-                            }).join('')}
-                            <!-- Continue Shopping -->
-                            <a href="../index.html" class="flex items-center justify-center py-4 border-2 border-dashed border-gray-200 rounded-xl text-gray-500 hover:text-brand-500 hover:border-brand-400 transition-colors">
-                                <i class="fas fa-plus mr-2"></i>
-                                Add more items
-                            </a>
-                        </div>
-                        <!-- Order Summary -->
-                        ${renderOrderSummary(cartTotal, true)}
-                    </div>
-                `;
-                // Update cart count in header
-                if (window.Cart) {
-                    await window.Cart.updateCartCountUI();
-                }
-            } catch (error) {
-                console.error('Error loading cart:', error);
-                container.innerHTML = `
-                    <div class="bg-white rounded-2xl p-12 text-center shadow-sm">
-                        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <i class="fas fa-exclamation-triangle text-2xl text-red-500"></i>
-                        </div>
-                        <h3 class="text-xl font-semibold text-gray-900 mb-2">Error Loading Cart</h3>
-                        <p class="text-gray-500 mb-6">There was a problem loading your cart. Please try again.</p>
-                        <button onclick="loadCart()" class="text-brand-500 font-medium hover:underline">
-                            <i class="fas fa-redo mr-2"></i>Try Again
-                        </button>
-                    </div>
-                `;
-            }
-        }
-        function renderLoginPrompt() {
-            document.getElementById('cartSummary').textContent = 'Please login to view your cart';
-            document.getElementById('cartContent').innerHTML = `
-                <div class="bg-white rounded-2xl p-12 text-center shadow-sm max-w-2xl mx-auto fade-in">
-                    <div class="w-32 h-32 bg-brand-50 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i class="fas fa-user-lock text-5xl text-brand-400"></i>
-                    </div>
-                    <h2 class="text-2xl font-bold text-gray-900 mb-2">Login Required</h2>
-                    <p class="text-gray-500 mb-8">Please login to view and manage your shopping cart. Your cart will be saved across all your devices.</p>
-                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                        <a href="login.html?redirect=cart" class="px-8 py-3 bg-brand-500 text-white font-semibold rounded-xl hover:bg-brand-600 transition-colors">
-                            <i class="fas fa-sign-in-alt mr-2"></i>Login
-                        </a>
-                        <a href="signup.html?redirect=cart" class="px-8 py-3 border-2 border-brand-500 text-brand-500 font-semibold rounded-xl hover:bg-brand-50 transition-colors">
-                            <i class="fas fa-user-plus mr-2"></i>Create Account
-                        </a>
-                    </div>
-                </div>
-            `;
-        }
-        function renderCartItem(product, quantity, index, cartItemId = null) {
-            const discount = product.original_price ? Math.round(((product.original_price - product.price) / product.original_price) * 100) : 0;
-            const image = product.image || product.image_url || 'https://via.placeholder.com/200';
-            const productId = product.id;
-            return `
-                <div class="cart-item bg-white rounded-2xl p-4 sm:p-6 shadow-sm hover:shadow-md transition-shadow" data-product-id="${productId}" data-cart-id="${cartItemId || ''}">
-                    <div class="flex items-start gap-4">
-                        <!-- Product Image -->
-                        <div class="flex-shrink-0">
-                            <a href="product.html?id=${productId}">
-                                <img src="${image}" alt="${product.name || 'Product'}"
-                                     class="product-image w-24 h-24 sm:w-32 sm:h-32 rounded-xl object-cover cursor-pointer">
-                            </a>
-                        </div>
-                        <!-- Product Details -->
-                        <div class="flex-1 min-w-0">
-                            <div class="flex items-start justify-between gap-2">
-                                <div>
-                                    <a href="product.html?id=${productId}" class="text-gray-400 text-xs uppercase tracking-wide">${product.category || 'Category'}</a>
-                                    <h3 class="text-lg font-semibold text-gray-900 mt-1 hover:text-brand-500 transition-colors">
-                                        <a href="product.html?id=${productId}">${product.name || 'Product Name'}</a>
-                                    </h3>
-                                </div>
-                                <button onclick="removeItem('${productId}', '${cartItemId}')"
-                                        class="delete-btn p-2 rounded-lg text-gray-400 hover:text-red-500">
-                                    <i class="fas fa-trash-alt"></i>
-                                </button>
-                            </div>
-                            <!-- Price & Discount -->
-                            <div class="flex items-center gap-3 mt-2">
-                                <span class="text-xl font-bold text-gray-900">$${(product.price || 0).toFixed(2)}</span>
-                                ${product.original_price ? `
-                                    <span class="text-sm text-gray-400 line-through">$${product.original_price.toFixed(2)}</span>
-                                    <span class="bg-red-100 text-red-600 text-xs font-semibold px-2 py-1 rounded-full">-${discount}%</span>
-                                ` : ''}
-                            </div>
-                            <!-- Quantity Controls -->
-                            <div class="flex items-center justify-between mt-4">
-                                <div class="flex items-center bg-gray-100 rounded-xl p-1">
-                                    <button onclick="updateQuantity('${productId}', ${quantity - 1}, '${cartItemId}')"
-                                            class="quantity-btn w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-sm hover:bg-gray-50 ${quantity <= 1 ? 'opacity-50 cursor-not-allowed' : ''}">
-                                        <i class="fas fa-minus text-gray-600"></i>
-                                    </button>
-                                    <span class="w-14 text-center font-semibold text-gray-900">${quantity}</span>
-                                    <button onclick="updateQuantity('${productId}', ${quantity + 1}, '${cartItemId}')"
-                                            class="quantity-btn w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-sm hover:bg-gray-50">
-                                        <i class="fas fa-plus text-gray-600"></i>
-                                    </button>
-                                </div>
-                                <div class="text-right">
-                                    <span class="text-sm text-gray-500">Subtotal</span>
-                                    <p class="text-lg font-bold text-brand-500">$${((product.price || 0) * quantity).toFixed(2)}</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `;
-        }
-        function renderOrderSummary(cartTotal, isLoggedIn) {
-            const shipping = cartTotal > 100 ? 0 : (cartTotal > 0 ? 10.00 : 0);
-            const tax = cartTotal * 0.1;
-            const total = cartTotal + shipping + tax;
-            return `
-                <div class="lg:col-span-1">
-                    <div class="summary-card bg-white rounded-2xl shadow-sm p-6 sticky top-24">
-                        <h2 class="text-xl font-bold text-gray-900 mb-6">Order Summary</h2>
-                        <!-- Promo Code -->
-                        <div class="mb-6">
-                            <label class="text-sm font-medium text-gray-700 mb-2 block">Promo Code</label>
-                            <div class="flex gap-2">
-                                <input type="text" placeholder="Enter code"
-                                       class="promo-input flex-1 px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-brand-500 transition-colors">
-                                <button class="px-4 py-3 bg-dark-900 text-white rounded-xl font-medium hover:bg-dark-800 transition-colors">
-                                    Apply
-                                </button>
-                            </div>
-                        </div>
-                        <div class="space-y-4 border-t pt-4">
-                            <div class="flex justify-between text-gray-600">
-                                <span>Subtotal</span>
-                                <span class="font-medium">$${cartTotal.toFixed(2)}</span>
-                            </div>
-                            <div class="flex justify-between text-gray-600">
-                                <span>Shipping</span>
-                                <span class="font-medium">${shipping > 0 ? '$' + shipping.toFixed(2) : 'Free'}</span>
-                            </div>
-                            <div class="flex justify-between text-gray-600">
-                                <span>Tax (10%)</span>
-                                <span class="font-medium">$${tax.toFixed(2)}</span>
-                            </div>
-                            ${cartTotal > 100 ? `
-                                <div class="bg-green-50 border border-green-200 rounded-xl p-3 text-sm text-green-700">
-                                    <i class="fas fa-check-circle mr-2"></i>
-                                    You're saving $10.00 on shipping!
-                                </div>
-                            ` : ''}
-                        </div>
-                        <div class="border-t mt-4 pt-4">
-                            <div class="flex justify-between items-center mb-6">
-                                <span class="text-lg font-bold text-gray-900">Total</span>
-                                <span class="text-2xl font-bold text-brand-500">$${total.toFixed(2)}</span>
-                            </div>
-                            <button onclick="proceedToCheckout()"
-                                    class="checkout-btn w-full py-4 text-white font-semibold rounded-xl flex items-center justify-center gap-2">
-                                <i class="fas fa-lock"></i>
-                                Proceed to Checkout
-                            </button>
-                            <p class="text-xs text-gray-500 text-center mt-4">
-                                <i class="fas fa-shield-alt mr-1"></i>
-                                Secure checkout powered by Stripe
-                            </p>
-                        </div>
-                        <!-- Payment Methods -->
-                        <div class="mt-6 pt-6 border-t">
-                            <p class="text-xs text-gray-500 text-center mb-3">We accept</p>
-                            <div class="flex justify-center gap-3 text-2xl text-gray-400">
-                                <i class="fab fa-cc-visa"></i>
-                                <i class="fab fa-cc-mastercard"></i>
-                                <i class="fab fa-cc-amex"></i>
-                                <i class="fab fa-cc-paypal"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `;
-        }
-        function renderEmptyCart() {
-            document.getElementById('cartSummary').textContent = 'Your cart is empty';
-            document.getElementById('cartContent').innerHTML = `
-                <div class="bg-white rounded-2xl p-12 text-center shadow-sm max-w-2xl mx-auto fade-in">
-                    <div class="empty-cart-icon w-32 h-32 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i class="fas fa-shopping-cart text-5xl text-gray-300"></i>
-                    </div>
-                    <h2 class="text-2xl font-bold text-gray-900 mb-2">Your cart is empty</h2>
-                    <p class="text-gray-500 mb-8">Looks like you haven't added any items to your cart yet. Start shopping to fill it up!</p>
-                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                        <a href="../index.html" class="px-8 py-3 bg-brand-500 text-white font-semibold rounded-xl hover:bg-brand-600 transition-colors">
-                            <i class="fas fa-shopping-bag mr-2"></i>Start Shopping
-                        </a>
-                    </div>
-                </div>
-            `;
-        }
-        async function updateQuantity(productId, newQuantity, cartItemId) {
-            if (newQuantity < 1) {
-                removeItem(productId, cartItemId);
-                return;
-            }
-            if (!currentUser) {
-                window.location.href = 'login.html?redirect=cart';
-                return;
-            }
-            try {
-                const result = await window.Cart.updateQuantity(cartItemId, newQuantity);
-                if (!result.success) throw new Error(result.message || 'Failed to update quantity');
-                await loadCart();
-            } catch (error) {
-                console.error('Error updating quantity:', error);
-                alert('Failed to update quantity. Please try again.');
-            }
-        }
-        async function removeItem(productId, cartItemId) {
-            if (!confirm('Remove this item from your cart?')) return;
-            if (!currentUser) {
-                window.location.href = 'login.html?redirect=cart';
-                return;
-            }
-            try {
-                const result = await window.Cart.removeFromCart(cartItemId);
-                if (!result.success) throw new Error(result.message || 'Failed to remove item');
-                await loadCart();
-            } catch (error) {
-                console.error('Error removing item:', error);
-                alert('Failed to remove item. Please try again.');
-            }
-        }
-        async function proceedToCheckout() {
-            if (!currentUser) {
-                window.location.href = 'login.html?redirect=cart';
-                return;
-            }
-            try {
-                const cartItems = await window.Cart.getCartItems();
-                if (!cartItems || cartItems.length === 0) {
-                    alert('Your cart is empty!');
-                    return;
-                }
-                const items = cartItems.map(item => ({
-                    product_id: item.product_id,
-                    name: item.products?.name || '',
-                    quantity: item.quantity,
-                    price: item.products?.price || 0,
-                    total: (item.products?.price || 0) * item.quantity
-                }));
-                const cartTotal = items.reduce((sum, item) => sum + item.total, 0);
-                const shipping = cartTotal > 100 ? 0 : 10.00;
-                const tax = cartTotal * 0.1;
-                const total = cartTotal + shipping + tax;
-                // Store in sessionStorage for checkout page (cleared after checkout)
-                sessionStorage.setItem('checkoutItems', JSON.stringify({
-                    items,
-                    subtotal: cartTotal,
-                    shipping,
-                    tax,
-                    total,
-                    userId: currentUser.id
-                }));
-                window.location.href = 'checkout.html';
-            } catch (error) {
-                console.error('Error proceeding to checkout:', error);
-                alert('There was an error processing your cart. Please try again.');
-            }
-        }
-    </script>
-</body>
-</html>

Eesha buying folder/categories.html DELETED Viewed

@@ -1,689 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Categories — Cellex</title>
-    <meta name="description" content="Browse all categories on Cellex - Nigeria's #1 Marketplace">
-    <!-- Fonts & Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-    <!-- Tailwind & Supabase -->
-    <script src="https://cdn.tailwindcss.com"></script>
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="../js/config/edge-functions.js?v=3"></script>
-    <script src="../js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        html { scroll-behavior: smooth; }
-        body {
-            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
-            background: #ffffff;
-            color: #1f2937;
-        }
-        ::-webkit-scrollbar { width: 6px; height: 6px; }
-        ::-webkit-scrollbar-track { background: #f5f5f5; }
-        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
-        .glass {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-        }
-        .category-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
-        .category-card { transition: all 0.3s ease; }
-        .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
-        .product-card { transition: all 0.3s ease; }
-        .filter-btn.active { background: #f97316; color: white; border-color: #f97316; }
-    </style>
-</head>
-<body class="min-h-screen pb-20 lg:pb-0">
-    <!-- Header -->
-    <header class="glass sticky top-0 z-50 border-b border-gray-100">
-        <div class="max-w-7xl mx-auto px-3 lg:px-4">
-            <div class="flex items-center justify-between h-14 lg:h-16">
-                <!-- Logo -->
-                <a href="../index.html" class="flex items-center gap-2">
-                    <div class="w-8 h-8 lg:w-10 lg:h-10 flex items-center justify-center">
-                        <svg viewBox="0 0 60 60" class="w-full h-full">
-                            <defs>
-                                <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" stop-color="#fbbf24"/>
-                                    <stop offset="50%" stop-color="#f59e0b"/>
-                                    <stop offset="100%" stop-color="#d97706"/>
-                                </linearGradient>
-                            </defs>
-                            <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z" fill="url(#headerLogoGrad)"/>
-                            <path d="M18 11 Q18 2 30 2 Q42 2 42 11" fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                            <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48" fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                        </svg>
-                    </div>
-                    <span class="text-base lg:text-lg font-bold text-gray-900">Cellex</span>
-                </a>
-                <!-- Search Bar -->
-                <div class="flex-1 max-w-xl mx-4 hidden md:flex items-center bg-gray-100 rounded-lg px-3 py-2">
-                    <i class="fas fa-search text-gray-400 mr-2 text-sm"></i>
-                    <input type="text" id="searchInput" placeholder="Search products..." class="flex-1 bg-transparent outline-none text-sm">
-                </div>
-                <!-- Right Actions -->
-                <div class="flex items-center gap-2 lg:gap-4">
-                    <a href="cart.html" class="relative p-2 hover:bg-gray-100 rounded-lg">
-                        <i class="fas fa-shopping-cart text-gray-600"></i>
-                        <span id="cartCount" class="absolute -top-0.5 -right-0.5 w-4 h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">0</span>
-                    </a>
-                    <a id="accountBtn" href="login.html" class="p-2 hover:bg-gray-100 rounded-lg flex items-center gap-1">
-                        <div class="relative">
-                            <i class="fas fa-user text-gray-600"></i>
-                            <i id="loggedInCheck" class="fas fa-check-circle text-green-500 text-[8px] absolute -bottom-0.5 -right-0.5 hidden"></i>
-                        </div>
-                        <span class="hidden lg:inline text-sm text-gray-700">Account</span>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </header>
-    <!-- Main Content -->
-    <main class="max-w-7xl mx-auto px-3 lg:px-4 py-4 lg:py-6">
-        <!-- Page Title -->
-        <div class="mb-4 lg:mb-6">
-            <h1 class="text-xl lg:text-2xl font-bold text-gray-900">All Categories</h1>
-            <p class="text-gray-500 text-xs lg:text-sm mt-1">Browse products by category</p>
-        </div>
-        <!-- Categories Grid -->
-        <section class="mb-6 lg:mb-8">
-            <div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2 lg:gap-4" id="categoriesGrid">
-                <!-- All Categories -->
-                <button onclick="filterByCategory('')" class="category-card filter-btn active bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-th-large text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">All</p>
-                </button>
-                <!-- Phones -->
-                <button onclick="filterByCategory('phones')" data-category="phones" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-mobile-alt text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Phones</p>
-                </button>
-                <!-- Electronics -->
-                <button onclick="filterByCategory('electronics')" data-category="electronics" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-laptop text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Electronics</p>
-                </button>
-                <!-- Fashion -->
-                <button onclick="filterByCategory('fashion')" data-category="fashion" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-tshirt text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Fashion</p>
-                </button>
-                <!-- Farm Fresh -->
-                <button onclick="filterByCategory('farm')" data-category="farm" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-leaf text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Farm Fresh</p>
-                </button>
-                <!-- Home -->
-                <button onclick="filterByCategory('home')" data-category="home" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-home text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Home</p>
-                </button>
-                <!-- Beauty -->
-                <button onclick="filterByCategory('beauty')" data-category="beauty" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-heart text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Beauty</p>
-                </button>
-                <!-- Baby -->
-                <button onclick="filterByCategory('baby')" data-category="baby" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-baby text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Baby</p>
-                </button>
-                <!-- Sports -->
-                <button onclick="filterByCategory('sports')" data-category="sports" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-futbol text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Sports</p>
-                </button>
-                <!-- Groceries -->
-                <button onclick="filterByCategory('groceries')" data-category="groceries" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-shopping-basket text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Groceries</p>
-                </button>
-                <!-- Health -->
-                <button onclick="filterByCategory('health')" data-category="health" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-pills text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Health</p>
-                </button>
-                <!-- Automotive -->
-                <button onclick="filterByCategory('automotive')" data-category="automotive" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-car text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Automotive</p>
-                </button>
-            </div>
-        </section>
-        <!-- Filters Bar -->
-        <section class="bg-gray-50 rounded-xl p-3 lg:p-4 mb-4 lg:mb-6">
-            <div class="flex flex-wrap items-center gap-2 lg:gap-4">
-                <!-- Sort -->
-                <div class="flex items-center gap-2">
-                    <span class="text-xs lg:text-sm text-gray-500">Sort:</span>
-                    <select id="sortSelect" onchange="applyFilters()" class="text-xs lg:text-sm border border-gray-200 rounded-lg px-2 lg:px-3 py-1.5 lg:py-2 bg-white">
-                        <option value="newest">Newest</option>
-                        <option value="popular">Popular</option>
-                        <option value="price-low">Price: Low to High</option>
-                        <option value="price-high">Price: High to Low</option>
-                    </select>
-                </div>
-                <!-- Price Range -->
-                <div class="flex items-center gap-2">
-                    <span class="text-xs lg:text-sm text-gray-500">Price:</span>
-                    <select id="priceSelect" onchange="applyFilters()" class="text-xs lg:text-sm border border-gray-200 rounded-lg px-2 lg:px-3 py-1.5 lg:py-2 bg-white">
-                        <option value="">All Prices</option>
-                        <option value="0-5000">Under ₦5,000</option>
-                        <option value="5000-10000">₦5,000 - ₦10,000</option>
-                        <option value="10000-50000">₦10,000 - ₦50,000</option>
-                        <option value="50000+">₦50,000+</option>
-                    </select>
-                </div>
-                <!-- Seller Type -->
-                <div class="flex items-center gap-2">
-                    <span class="text-xs lg:text-sm text-gray-500">Seller:</span>
-                    <select id="sellerSelect" onchange="applyFilters()" class="text-xs lg:text-sm border border-gray-200 rounded-lg px-2 lg:px-3 py-1.5 lg:py-2 bg-white">
-                        <option value="">All Sellers</option>
-                        <option value="merchant">Merchants</option>
-                        <option value="farmer">Farmers</option>
-                    </select>
-                </div>
-                <!-- Results Count -->
-                <div class="ml-auto text-xs lg:text-sm text-gray-500">
-                    <span id="resultsCount">0</span> products found
-                </div>
-            </div>
-        </section>
-        <!-- Products Grid -->
-        <section>
-            <div id="productsGrid" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 lg:gap-4">
-                <!-- Products loaded dynamically -->
-            </div>
-            <!-- Loading State -->
-            <div id="loadingState" class="text-center py-12 hidden">
-                <i class="fas fa-spinner fa-spin text-orange-500 text-2xl mb-3"></i>
-                <p class="text-gray-500 text-sm">Loading products...</p>
-            </div>
-            <!-- Empty State -->
-            <div id="emptyState" class="text-center py-12 hidden">
-                <i class="fas fa-box-open text-gray-300 text-4xl mb-3"></i>
-                <p class="text-gray-500 text-sm">No products found in this category</p>
-                <button onclick="filterByCategory('')" class="mt-3 text-orange-500 text-sm font-medium hover:underline">View all products</button>
-            </div>
-            <!-- Load More -->
-            <div id="loadMoreSection" class="text-center mt-6 lg:mt-8 hidden">
-                <button onclick="loadMoreProducts()" class="bg-gray-100 text-gray-700 px-6 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
-                    Load More Products
-                </button>
-            </div>
-        </section>
-    </main>
-    <!-- Mobile Navigation (Bottom) -->
-    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 lg:hidden z-50">
-        <div class="flex items-center justify-around py-2">
-            <a href="../index.html" class="flex flex-col items-center gap-1 p-2 text-gray-500">
-                <i class="fas fa-home text-lg"></i>
-                <span class="text-xs">Home</span>
-            </a>
-            <a href="categories.html" class="flex flex-col items-center gap-1 p-2 text-orange-500">
-                <i class="fas fa-th-large text-lg"></i>
-                <span class="text-xs font-medium">Categories</span>
-            </a>
-            <a href="#" class="flex flex-col items-center gap-1 p-2 text-gray-500">
-                <i class="fas fa-bolt text-lg"></i>
-                <span class="text-xs">Deals</span>
-            </a>
-            <a href="cart.html" class="flex flex-col items-center gap-1 p-2 text-gray-500 relative">
-                <i class="fas fa-shopping-cart text-lg"></i>
-                <span class="text-xs">Cart</span>
-                <span id="mobileCartCount" class="absolute top-0 right-1 w-4 h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">0</span>
-            </a>
-            <a id="mobileAccountBtn" href="login.html" class="flex flex-col items-center gap-1 p-2 text-gray-500">
-                <div class="relative">
-                    <i class="fas fa-user text-lg"></i>
-                    <i id="mobileLoggedInCheck" class="fas fa-check-circle text-green-500 text-[8px] absolute -bottom-0.5 -right-0.5 hidden"></i>
-                </div>
-                <span class="text-xs">Account</span>
-            </a>
-        </div>
-    </nav>
-    <!-- Auth Modal -->
-    <div id="authModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
-        <div class="bg-white rounded-2xl max-w-sm w-full p-6 text-center">
-            <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <i class="fas fa-user-lock text-orange-500 text-2xl"></i>
-            </div>
-            <h3 class="text-lg font-bold text-gray-900 mb-2">Sign In Required</h3>
-            <p class="text-gray-500 text-sm mb-4">Please log in to add items to your cart</p>
-            <div class="flex gap-3">
-                <a href="login.html" class="flex-1 bg-gray-900 text-white py-2.5 rounded-lg font-medium text-sm hover:bg-gray-800 transition-colors">
-                    Login
-                </a>
-                <a href="signup.html" class="flex-1 bg-orange-500 text-white py-2.5 rounded-lg font-medium text-sm hover:bg-orange-600 transition-colors">
-                    Sign Up
-                </a>
-            </div>
-            <button onclick="closeAuthModal()" class="mt-3 text-gray-500 text-sm hover:text-gray-700">Continue Browsing</button>
-        </div>
-    </div>
-    <!-- Scripts -->
-    <script>
-        // Edge function client + Cart module are loaded via <script> tags above.
-        // Use window.EdgeFunctions and window.Cart instead of supabaseClient.
-        let currentCategory = '';
-        let currentSearch = '';
-        let currentSort = 'newest';
-        let currentPrice = '';
-        let currentSeller = '';
-        let products = [];
-        let page = 0;
-        const pageSize = 20;
-        // Initialize
-        document.addEventListener('DOMContentLoaded', async () => {
-            checkAuthState();
-            // Get parameters from URL
-            const params = new URLSearchParams(window.location.search);
-            const cat = params.get('category');
-            const search = params.get('search');
-            // Set search input value if search param exists
-            if (search) {
-                currentSearch = search;
-                const searchInput = document.getElementById('searchInput');
-                if (searchInput) searchInput.value = search;
-                updatePageTitle(search, '');
-            }
-            if (cat) {
-                filterByCategory(cat);
-            } else {
-                loadProducts();
-            }
-        });
-        // Update page title based on filters
-        function updatePageTitle(search, category) {
-            const titleEl = document.querySelector('main h1');
-            const descEl = document.querySelector('main h1 + p');
-            if (search && category) {
-                titleEl.textContent = `"${search}" in ${category}`;
-                descEl.textContent = 'Search results';
-            } else if (search) {
-                titleEl.textContent = `Search: "${search}"`;
-                descEl.textContent = 'Showing search results';
-            } else if (category) {
-                titleEl.textContent = category.charAt(0).toUpperCase() + category.slice(1);
-                descEl.textContent = 'Browse products in this category';
-            } else {
-                titleEl.textContent = 'All Categories';
-                descEl.textContent = 'Browse products by category';
-            }
-        }
-        // Auth State
-        async function checkAuthState() {
-            try {
-                const { user } = await window.EdgeFunctions.auth.checkSession();
-                const accountBtn = document.getElementById('accountBtn');
-                const mobileAccountBtn = document.getElementById('mobileAccountBtn');
-                const loggedInCheck = document.getElementById('loggedInCheck');
-                const mobileLoggedInCheck = document.getElementById('mobileLoggedInCheck');
-                if (user) {
-                    accountBtn.href = 'profile.html';
-                    mobileAccountBtn.href = 'profile.html';
-                    loggedInCheck.classList.remove('hidden');
-                    mobileLoggedInCheck.classList.remove('hidden');
-                }
-            } catch (error) {
-                console.error('Auth check error:', error);
-            }
-        }
-        // Filter by Category
-        function filterByCategory(category) {
-            currentCategory = category;
-            page = 0;
-            products = [];
-            // Clear search when changing category
-            currentSearch = '';
-            const searchInput = document.getElementById('searchInput');
-            if (searchInput) searchInput.value = '';
-            // Update active button
-            document.querySelectorAll('.filter-btn').forEach(btn => {
-                btn.classList.remove('active');
-                if (btn.dataset.category === category || (category === '' && !btn.dataset.category)) {
-                    btn.classList.add('active');
-                }
-            });
-            // Update URL
-            const url = new URL(window.location);
-            if (category) {
-                url.searchParams.set('category', category);
-            } else {
-                url.searchParams.delete('category');
-            }
-            url.searchParams.delete('search');
-            window.history.replaceState({}, '', url);
-            // Update page title
-            updatePageTitle('', category);
-            loadProducts();
-        }
-        // Apply Filters
-        function applyFilters() {
-            currentSort = document.getElementById('sortSelect').value;
-            currentPrice = document.getElementById('priceSelect').value;
-            currentSeller = document.getElementById('sellerSelect').value;
-            page = 0;
-            products = [];
-            loadProducts();
-        }
-        // Load Products
-        async function loadProducts() {
-            const loadingState = document.getElementById('loadingState');
-            const emptyState = document.getElementById('emptyState');
-            const productsGrid = document.getElementById('productsGrid');
-            loadingState.classList.remove('hidden');
-            emptyState.classList.add('hidden');
-            try {
-                let result;
-                // Determine max price filter (the edge function search supports a single maxPrice)
-                let maxPrice = null;
-                if (currentPrice) {
-                    if (currentPrice === '50000+') {
-                        maxPrice = 50000;
-                    } else {
-                        const [min, max] = currentPrice.split('-');
-                        maxPrice = parseInt(max);
-                    }
-                }
-                if (currentSearch) {
-                    // Search within all products (optionally capped by maxPrice)
-                    result = await window.EdgeFunctions.products.search(currentSearch, maxPrice);
-                } else if (currentCategory) {
-                    // Browse by category with sort + pagination
-                    result = await window.EdgeFunctions.products.category(currentCategory, currentSort, page + 1);
-                } else {
-                    // No category selected — load all products
-                    result = await window.EdgeFunctions.products.all(50);
-                }
-                if (!result.success) {
-                    throw new Error(result.error || 'Failed to load products');
-                }
-                const data = result.products || [];
-                const count = result.count || data.length;
-                document.getElementById('resultsCount').textContent = count;
-                if (data && data.length > 0) {
-                    products = [...products, ...data];
-                    renderProducts(data);
-                    // Show load more if there are more products
-                    const loadMoreSection = document.getElementById('loadMoreSection');
-                    if (products.length < count) {
-                        loadMoreSection.classList.remove('hidden');
-                    } else {
-                        loadMoreSection.classList.add('hidden');
-                    }
-                } else if (products.length === 0) {
-                    emptyState.classList.remove('hidden');
-                    productsGrid.innerHTML = '';
-                }
-            } catch (error) {
-                console.error('Error loading products:', error);
-                emptyState.classList.remove('hidden');
-            } finally {
-                loadingState.classList.add('hidden');
-            }
-        }
-        // Render Products
-        function renderProducts(data) {
-            const productsGrid = document.getElementById('productsGrid');
-            if (page === 0) {
-                productsGrid.innerHTML = '';
-            }
-            data.forEach(product => {
-                const card = document.createElement('div');
-                card.className = 'product-card bg-white rounded-xl border border-gray-100 overflow-hidden cursor-pointer';
-                card.onclick = () => window.location.href = `product.html?id=${product.id}`;
-                const sellerType = product.sellers?.seller_type;
-                const sellerBadge = sellerType === 'farmer'
-                    ? '<span class="bg-green-100 text-green-700 text-[10px] px-1.5 py-0.5 rounded-full">Farm Fresh</span>'
-                    : '';
-                const discount = product.discount_percentage || 0;
-                const originalPrice = discount > 0 ? product.price / (1 - discount/100) : null;
-                card.innerHTML = `
-                    <div class="relative">
-                        <img src="${product.images?.[0] || 'https://via.placeholder.com/300'}"
-                             alt="${product.name}"
-                             class="w-full h-28 lg:h-40 object-cover">
-                        ${discount > 0 ? `<span class="absolute top-2 left-2 bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full">-${discount}%</span>` : ''}
-                        <button onclick="event.stopPropagation(); toggleWishlist(${product.id})" class="absolute top-2 right-2 w-7 h-7 bg-white rounded-full flex items-center justify-center shadow hover:bg-gray-50">
-                            <i class="far fa-heart text-gray-400 text-xs"></i>
-                        </button>
-                    </div>
-                    <div class="p-2 lg:p-3">
-                        <div class="flex items-center gap-1 mb-1">
-                            ${sellerBadge}
-                        </div>
-                        <h3 class="text-xs lg:text-sm font-medium text-gray-900 line-clamp-2 mb-1">${product.name}</h3>
-                        <div class="flex items-center gap-1 mb-2">
-                            <span class="text-sm lg:text-base font-bold text-gray-900">₦${product.price?.toLocaleString()}</span>
-                            ${originalPrice ? `<span class="text-[10px] text-gray-400 line-through">₦${originalPrice.toFixed(0)}</span>` : ''}
-                        </div>
-                        <button onclick="event.stopPropagation(); addToCart(${product.id})" class="w-full bg-orange-500 text-white py-1.5 lg:py-2 rounded-lg text-xs font-medium hover:bg-orange-600 transition-colors">
-                            Add to Cart
-                        </button>
-                    </div>
-                `;
-                productsGrid.appendChild(card);
-            });
-        }
-        // Load More Products
-        function loadMoreProducts() {
-            page++;
-            loadProducts();
-        }
-        // Add to Cart
-        async function addToCart(productId) {
-            try {
-                const result = await window.Cart.addToCart(productId, 1);
-                if (!result.success) {
-                    if (result.requiresAuth) {
-                        document.getElementById('authModal').classList.remove('hidden');
-                        document.getElementById('authModal').classList.add('flex');
-                        return;
-                    }
-                    showNotification(result.message || 'Error adding to cart', 'error');
-                    return;
-                }
-                showNotification('Added to cart!');
-            } catch (error) {
-                console.error('Add to cart error:', error);
-                showNotification('Error adding to cart', 'error');
-            }
-        }
-        // Toggle Wishlist
-        async function toggleWishlist(productId) {
-            try {
-                const { user } = await window.EdgeFunctions.auth.checkSession();
-                if (!user) {
-                    document.getElementById('authModal').classList.remove('hidden');
-                    document.getElementById('authModal').classList.add('flex');
-                    return;
-                }
-                // Toggle wishlist logic here
-                showNotification('Added to wishlist!');
-            } catch (error) {
-                console.error('Wishlist error:', error);
-            }
-        }
-        // Update Cart Count
-        async function updateCartCount() {
-            try {
-                // Cart module handles auth check + DOM updates internally
-                await window.Cart.updateCartCountUI();
-            } catch (error) {
-                console.error('Cart count error:', error);
-            }
-        }
-        // Close Auth Modal
-        function closeAuthModal() {
-            document.getElementById('authModal').classList.add('hidden');
-            document.getElementById('authModal').classList.remove('flex');
-        }
-        // Show Notification
-        function showNotification(message, type = 'success') {
-            const notification = document.createElement('div');
-            notification.className = `fixed top-20 right-4 px-4 py-2 rounded-lg text-sm font-medium z-50 ${type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'}`;
-            notification.textContent = message;
-            document.body.appendChild(notification);
-            setTimeout(() => notification.remove(), 2000);
-        }
-        // ===== Search Functions =====
-        function handleSearchKeypress(event) {
-            if (event.key === 'Enter') {
-                performSearch();
-            }
-        }
-        function performSearch() {
-            const searchInput = document.getElementById('searchInput');
-            const query = searchInput.value.trim();
-            currentSearch = query;
-            currentCategory = '';
-            page = 0;
-            products = [];
-            // Update URL
-            const url = new URL(window.location);
-            if (query) {
-                url.searchParams.set('search', query);
-            } else {
-                url.searchParams.delete('search');
-            }
-            url.searchParams.delete('category');
-            window.history.replaceState({}, '', url);
-            // Update title
-            updatePageTitle(query, '');
-            // Reset category buttons
-            document.querySelectorAll('.filter-btn').forEach(btn => {
-                btn.classList.remove('active');
-                if (!btn.dataset.category) {
-                    btn.classList.add('active');
-                }
-            });
-            loadProducts();
-        }
-    </script>
-</body>
-</html>

Eesha buying folder/checkout.html DELETED Viewed

@@ -1,858 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Checkout - Cellex | Nigeria's #1 Marketplace</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="../js/config/edge-functions.js?v=3"></script>
-    <script src="../js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * {
-            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
-        }
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-            100% { transform: translateY(0px); }
-        }
-        .animate-float {
-            animation: float 3s ease-in-out infinite;
-        }
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-        .fade-in-up {
-            animation: fadeInUp 0.4s ease-out forwards;
-        }
-        .input-field {
-            transition: all 0.3s ease;
-        }
-        .input-field:focus {
-            border-color: #f59e0b;
-            box-shadow: 0 0 0 15px rgba(245, 158, 11, 0.15);
-        }
-        .step-section {
-            display: none;
-        }
-        .step-section.active {
-            display: block;
-        }
-        .step-indicator {
-            transition: all 0.3s ease;
-        }
-        .step-indicator.active {
-            background: #f59e0b;
-            color: white;
-        }
-        .step-indicator.completed {
-            background: #22c55e;
-            color: white;
-        }
-        .payment-option {
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: 2px solid #e5e7eb;
-            border-radius: 12px;
-        }
-        .payment-option:hover {
-            border-color: #f59e0b;
-            transform: translateY(-2px);
-        }
-        .payment-option.selected {
-            border-color: #f59e0b;
-            background: #fef2f2;
-        }
-        .place-order-btn {
-            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-            transition: all 0.3s ease;
-        }
-        .place-order-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 15px 30px rgba(240, 71, 74, 0.15);
-        }
-        .place-order-btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #c1c1c1;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #a1a1a1;
-        }
-    </style>
-</head>
-<body class="bg-gray-50 min-h-screen">
-    <!-- Loading Overlay -->
-    <div id="loading-overlay" class="fixed inset-0 bg-black/50 hidden z-50 flex items-center justify-center backdrop-blur-sm">
-        <div class="bg-white p-8 rounded-2xl shadow-xl">
-            <div class="flex flex-col items-center">
-                <div class="animate-spin rounded-full h-12 w-12 border-4 border-brand-500 border-t-transparent"></div>
-                <p class="mt-4 text-gray-700 font-medium" id="loading-text">Processing your order...</p>
-            </div>
-        </div>
-    </div>
-    <!-- Error Toast -->
-    <div id="error-toast" class="fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-xl shadow-lg hidden z-50 transition-all transform translate-x-full">
-        <div class="flex items-center gap-2">
-            <i class="fas fa-exclamation-circle"></i>
-            <span id="error-message">Error message</span>
-        </div>
-    </div>
-    <!-- Success Toast -->
-    <div id="success-toast" class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg hidden z-50 transition-all transform translate-x-full">
-        <div class="flex items-center gap-2">
-            <i class="fas fa-check-circle"></i>
-            <span id="success-message">Success message</span>
-        </div>
-    </div>
-    <!-- Header -->
-    <header class="bg-white shadow-sm sticky top-0 z-40">
-        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <a href="../index.html" class="flex items-center gap-2 group">
-                    <div class="w-10 h-10 flex items-center justify-center">
-                        <svg viewBox="0 0 60 60" class="w-full h-full">
-                            <defs>
-                                <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" stop-color="#fbbf24"/>
-                                    <stop offset="50%" stop-color="#f59e0b"/>
-                                    <stop offset="100%" stop-color="#d97706"/>
-                                </linearGradient>
-                                <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                    <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                    <feMerge>
-                                        <feMergeNode in="coloredBlur"/>
-                                        <feMergeNode in="SourceGraphic"/>
-                                    </feMerge>
-                                </filter>
-                            </defs>
-                            <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                                  fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                            <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                                  fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                            <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                                  fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                            <g transform="translate(52, 8)">
-                                <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#fbbf24"/>
-                            </g>
-                        </svg>
-                    </div>
-                    <div class="flex flex-col">
-                        <span class="text-xl font-extrabold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent leading-tight">Cellex</span>
-                        <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                    </div>
-                </a>
-                <div class="flex items-center gap-4">
-                    <a href="../index.html" class="text-gray-600 hover:text-brand-500 transition-colors">
-                        <i class="fas fa-home text-xl"></i>
-                    </a>
-                    <div class="relative">
-                        <i class="fas fa-shopping-cart text-xl text-gray-600"></i>
-                        <span id="cart-count" class="absolute -top-2 -right-2 bg-brand-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                    </div>
-                </div>
-            </div>
-        </nav>
-    </header>
-    <!-- Breadcrumb -->
-    <div class="bg-white border-b">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
-            <nav class="flex items-center space-x-2 text-sm text-gray-500">
-                <a href="../index.html" class="hover:text-brand-500 transition-colors">Home</a>
-                <i class="fas fa-chevron-right text-xs"></i>
-                <a href="cart.html" class="hover:text-brand-500 transition-colors">Cart</a>
-                <i class="fas fa-chevron-right text-xs"></i>
-                <span class="text-gray-900 font-medium">Checkout</span>
-            </nav>
-        </div>
-    </div>
-    <!-- Progress Steps -->
-    <div class="bg-gradient-to-r from-primary-500 to-primary-600 py-3 sticky top-16 z-30">
-        <div class="max-w-7xl mx-auto px-4">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center gap-3">
-                    <div id="step-1-indicator" class="step-indicator active">
-                        <span class="flex items-center justify-center w-8 h-8 rounded-full bg-white text-brand-500 font-bold text-sm">1</span>
-                    <span class="text-white text-sm">Shipping</span>
-                </div>
-                <div class="hidden sm:block h-1 w-px-4 border-l border-white/30"></div>
-                <div id="step-2-indicator" class="step-indicator">
-                    <span class="flex items-center justify-center w-8 h-8 rounded-full bg-white/70 text-brand-500 font-bold text-sm">2</span>
-                    <span class="text-white/70 text-sm">Payment</span>
-                </div>
-                <div class="hidden sm:block h-1 w-px-4 border-l border-white/30"></div>
-                <div id="step-3-indicator" class="step-indicator">
-                    <span class="flex items-center justify-center w-8 h-8 rounded-full bg-white/70 text-brand-500 font-bold text-sm">3</span>
-                    <span class="text-white/70 text-sm">Review</span>
-                </div>
-                <a href="cart.html" class="text-white text-sm hover:text-white/80 transition-colors">
-                    <i class="fas fa-arrow-left mr-2"></i>
-                    Back to Cart
-                </a>
-            </div>
-        </div>
-    </div>
-    <!-- Main Content -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- Left Column - Steps -->
-            <div class="lg:col-span-2 space-y-6">
-                <!-- Step 1: Shipping Information -->
-                <section id="step-1" class="step-section active bg-white rounded-2xl shadow-lg p-6">
-                    <div class="flex items-center gap-3 mb-6">
-                        <div class="w-10 h-10 bg-brand-500-100 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-truck text-brand-500 text-lg"></i>
-                        </div>
-                        <h2 class="text-xl font-bold text-gray-900">Shipping Information</h2>
-                    </div>
-                    <form id="shipping-form" class="space-y-4">
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div>
-                                <label for="fullname" class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
-                                <input type="text" id="fullname" required
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                            <div>
-                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address *</label>
-                                <input type="email" id="email" required
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                        </div>
-                        <div>
-                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number *</label>
-                            <input type="tel" id="phone" required
-                                   class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-primary/20">
-                        </div>
-                        <div>
-                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Street Address *</label>
-                            <input type="text" id="address" required
-                                   class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-primary/20">
-                        </div>
-                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-                            <div>
-                                <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City *</label>
-                                <input type="text" id="city" required
-                                       class="input-field px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                            <div>
-                                <label for="state" class="block text-sm font-medium text-gray-700 mb-1">State *</label>
-                                <input type="text" id="state" required
-                                       class="input-field px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                            <div>
-                                <label for="zipcode" class="block text-sm font-medium text-gray-700 mb-1">ZIP Code *</label>
-                                <input type="text" id="zipcode" required
-                                       class="input-field px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                        </div>
-                    </form>
-                </section>
-                <!-- Step 2: Payment Method -->
-                <section id="step-2" class="step-section bg-white rounded-2xl shadow-lg p-6">
-                    <div class="flex items-center gap-3 mb-6">
-                        <div class="w-10 h-10 bg-brand-500-100 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-credit-card text-brand-500 text-lg"></i>
-                        </div>
-                        <h2 class="text-xl font-bold text-gray-900">Payment Method</h2>
-                    </div>
-                    <!-- EeshaPay Option -->
-                    <div class="mb-4">
-                        <label class="payment-option block p-4 border-2 border-gray-200 rounded-xl cursor-pointer" onclick="selectPayment('eeshapay')">
-                            <div class="flex items-center justify-between">
-                                <div class="flex items-center gap-3">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg flex items-center justify-center">
-                                        <span class="text-white font-bold text-xs">EeshaPay</span>
-                                    </div>
-                                    <div>
-                                        <p class="font-semibold text-gray-900">EeshaPay Wallet</p>
-                                        <p class="text-sm text-gray-500">Pay with your wallet balance</p>
-                                        <p class="text-xs text-green-600 mt-1" id="wallet-balance">Balance: Loading...</p>
-                                    </div>
-                                </div>
-                                <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center" id="eeshapay-check">
-                                    <i class="fas fa-check text-brand-500 hidden"></i>
-                                </div>
-                            </div>
-                        </label>
-                    </div>
-                    <!-- Credit Card Option -->
-                    <div class="mb-4">
-                        <label class="payment-option block p-4 border-2 border-gray-200 rounded-xl cursor-pointer" onclick="selectPayment('card')">
-                            <div class="flex items-center justify-between">
-                                <div class="flex items-center gap-3">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-700 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-credit-card text-white text-lg"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-semibold text-gray-900">Credit / Debit Card</p>
-                                        <p class="text-sm text-gray-500">Visa, Mastercard, Amex</p>
-                                    </div>
-                                </div>
-                                <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center" id="card-check">
-                                    <i class="fas fa-check text-brand-500 hidden"></i>
-                                </div>
-                            </div>
-                        </label>
-                    </div>
-                    <!-- Cash on Delivery Option -->
-                    <div class="mb-4">
-                        <label class="payment-option block p-4 border-2 border-gray-200 rounded-xl cursor-pointer" onclick="selectPayment('cod')">
-                            <div class="flex items-center justify-between">
-                                <div class="flex items-center gap-3">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-700 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-money-bill-wave text-white text-lg"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-semibold text-gray-900">Cash on Delivery</p>
-                                        <p class="text-sm text-gray-500">Pay when you receive your order</p>
-                                        <p class="text-xs text-orange-600 mt-1">+$5.00 COD fee</p>
-                                    </div>
-                                </div>
-                                <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center" id="cod-check">
-                                    <i class="fas fa-check text-brand-500 hidden"></i>
-                                </div>
-                            </div>
-                        </label>
-                    </div>
-                    <!-- Card Details Form -->
-                    <div id="card-form" class="hidden mt-4 p-4 bg-gray-50 rounded-xl">
-                        <h3 class="font-semibold text-gray-900 mb-3">Card Details</h3>
-                        <div class="space-y-4">
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Card Number</label>
-                                <input type="text" id="card-number" placeholder="1234 5678 9012 3456" maxlength="19"
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl">
-                            </div>
-                            <div class="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label>
-                                    <input type="text" id="card-expiry" placeholder="MM/YY" maxlength="7"
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
-                                    <input type="text" id="card-cvv" placeholder="123" maxlength="4"
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl">
-                                </div>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Name on Card</label>
-                                <input type="text" id="card-name" placeholder="John Doe"
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl">
-                            </div>
-                        </div>
-                    </div>
-                </section>
-                <!-- Step 3: Review & Place Order -->
-                <section id="step-3" class="step-section bg-white rounded-2xl shadow-lg p-6">
-                    <div class="flex items-center gap-3 mb-6">
-                        <div class="w-10 h-10 bg-brand-500-100 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-check-circle text-brand-500 text-lg"></i>
-                        </div>
-                        <h2 class="text-xl font-bold text-gray-900">Review & Place Order</h2>
-                    </div>
-                    <!-- Order Summary Review -->
-                    <div id="review-summary" class="space-y-4">
-                        <div class="bg-gray-50 rounded-xl p-4">
-                            <h4 class="text-sm font-semibold text-gray-700 mb-2">Shipping Address</h4>
-                            <p class="text-gray-600 text-sm" id="review-shipping"></p>
-                        </div>
-                        <div class="bg-gray-50 rounded-xl p-4">
-                            <h4 class="text-sm font-semibold text-gray-700 mb-2">Payment Method</h4>
-                            <p class="text-gray-600 text-sm" id="review-payment"></p>
-                        </div>
-                        <div class="bg-gray-50 rounded-xl p-4">
-                            <h4 class="text-sm font-semibold text-gray-700 mb-2">Order Items</h4>
-                            <div id="review-items" class="text-gray-600 text-sm"></div>
-                        </div>
-                    </div>
-                    <!-- Place Order Button -->
-                    <button onclick="placeOrder()" id="place-order-btn"
-                            class="place-order-btn w-full py-4 text-white font-semibold rounded-xl flex items-center justify-center gap-2">
-                        <i class="fas fa-lock"></i>
-                        <span id="place-order-text">Place Order</span>
-                    </button>
-                    <p class="text-center text-gray-500 text-sm mt-4">
-                        <i class="fas fa-shield-alt mr-1"></i>
-                        Secure checkout with SSL encryption
-                    </p>
-                </section>
-            </div>
-            <!-- Right Column - Order Summary -->
-            <div class="lg:col-span-1">
-                <div class="bg-white rounded-2xl shadow-lg p-6 sticky top-24">
-                    <h3 class="text-lg font-bold text-gray-900 mb-4">Order Summary</h3>
-                    <div id="order-items" class="space-y-4 max-h-64 overflow-y-auto mb-4">
-                        <!-- Items populated by JS -->
-                    </div>
-                    <div class="border-t pt-4 mt-4 space-y-3">
-                        <div class="flex justify-between text-gray-600">
-                            <span>Subtotal</span>
-                            <span id="subtotal" class="font-semibold text-gray-900">$0.00</span>
-                        </div>
-                        <div class="flex justify-between text-gray-600">
-                            <span>Shipping</span>
-                            <span id="shipping-cost" class="font-semibold text-gray-900">$0.00</span>
-                        </div>
-                        <div class="flex justify-between text-gray-600">
-                            <span>Tax (10%)</span>
-                            <span id="tax" class="font-semibold text-gray-900">$0.00</span>
-                        </div>
-                        <div class="flex justify-between text-gray-600 pt-4 border-t border-dashed">
-                            <span>COD Fee</span>
-                            <span id="cod-fee" class="font-semibold text-orange-600">$0.00</span>
-                        </div>
-                        <div class="flex justify-between items-center pt-4 border-t-2 border-gray-900">
-                            <span class="text-lg font-bold text-gray-900">Total</span>
-                            <span id="total" class="text-2xl font-bold text-brand-500">$0.00</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Fixed Navigation -->
-        <div class="fixed bottom-6 left-6 md:left-auto md:right-6 lg:right-12 z-50 bg-white/95 backdrop-blur-sm shadow-lg rounded-full px-6 py-4 max-w-3xl mx-auto flex items-center justify-between gap-4">
-            <button id="back-btn" onclick="goBack()" class="px-6 py-3 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors">
-                <i class="fas fa-arrow-left mr-2"></i>
-                Back
-            </button>
-            <div class="flex items-center gap-4">
-                <span class="text-sm text-gray-500">Step <span id="step-label">1</span> of 3</span>
-            </div>
-            <button id="continue-btn" onclick="goNext()" class="px-6 py-3 bg-brand-500 text-white rounded-lg hover:bg-brand-500-600 transition-colors">
-                <span id="continue-text">Continue</span>
-                <i class="fas fa-arrow-right ml-2"></i>
-            </button>
-        </div>
-    </div>
-    <script>
-        // State
-        let currentStep = 1;
-        let pendingOrder = null;
-        let selectedPayment = 'eeshapay';
-        let currentUser = null;
-        let walletBalance = 0;
-        // Initialize
-        document.addEventListener('DOMContentLoaded', async () => {
-            await checkAuth();
-            if (currentUser) {
-                await loadCheckoutData();
-            }
-        });
-        // Check authentication
-        async function checkAuth() {
-            const { success, user } = await window.EdgeFunctions.auth.checkSession();
-            currentUser = user || null;
-            if (!currentUser) {
-                showToast('Please login to continue checkout', 'error');
-                setTimeout(() => {
-                    window.location.href = 'login.html?redirect=checkout';
-                }, 1500);
-            }
-        }
-        // Load checkout data (cart items, wallet balance, total) via edge function.
-        // The edge function returns everything prepare() needs atomically —
-        // no Supabase calls, no localStorage, no pending_orders table.
-        async function loadCheckoutData() {
-            try {
-                const result = await window.EdgeFunctions.checkout.prepare();
-                if (!result.success) {
-                    showToast(result.error || 'Failed to load checkout. Please try again.', 'error');
-                    return;
-                }
-                const cartItems = result.cartItems || [];
-                walletBalance = result.walletBalance || 0;
-                // Empty cart → redirect to cart page
-                if (!cartItems.length) {
-                    showToast('Your cart is empty. Redirecting to cart...', 'error');
-                    setTimeout(() => window.location.href = 'cart.html', 1500);
-                    return;
-                }
-                // Normalize cart items into the shape renderOrderSummary() expects.
-                const items = cartItems.map(item => ({
-                    image: item.image || item.products?.image_url || item.products?.image || '',
-                    name: item.name || item.products?.name || 'Product',
-                    quantity: item.quantity || 1,
-                    price: (item.price != null ? item.price : (item.products?.price || 0)),
-                }));
-                const subtotal = items.reduce((s, it) => s + it.price * it.quantity, 0);
-                const total = (result.total != null ? result.total : subtotal);
-                pendingOrder = {
-                    items,
-                    subtotal,
-                    shipping: 0,
-                    tax: 0,
-                    total,
-                };
-                // Update wallet balance display
-                document.getElementById('wallet-balance').textContent = `Balance: $${walletBalance.toFixed(2)}`;
-                renderOrderSummary();
-            } catch (error) {
-                console.error('Error loading checkout data:', error);
-                showToast('Error loading checkout. Please try again.', 'error');
-            }
-        }
-        // Render order summary in sidebar
-        function renderOrderSummary() {
-            if (!pendingOrder) return;
-            const container = document.getElementById('order-items');
-            container.innerHTML = pendingOrder.items.map(item => `
-                <div class="flex items-center gap-3 py-2">
-                    <div class="w-12 h-12 bg-gray-100 rounded-lg overflow-hidden">
-                        <img src="${item.image || 'https://via.placeholder.com/48'}" alt="${item.name}" class="w-full h-full object-cover">
-                    </div>
-                    <div class="flex-1 min-w-0">
-                        <p class="text-sm font-medium text-gray-900 truncate">${item.name}</p>
-                        <p class="text-xs text-gray-500">Qty: ${item.quantity}</p>
-                    </div>
-                    <div class="text-right">
-                        <p class="text-sm font-semibold text-gray-900">$${(item.price * item.quantity).toFixed(2)}</p>
-                    </div>
-                </div>
-            `).join('');
-            // Update totals
-            document.getElementById('subtotal').textContent = `$${(pendingOrder.subtotal || 0).toFixed(2)}`;
-            document.getElementById('shipping-cost').textContent = `$${(pendingOrder.shipping || 0).toFixed(2)}`;
-            document.getElementById('tax').textContent = `$${(pendingOrder.tax || 0).toFixed(2)}`;
-            const codFee = selectedPayment === 'cod' ? 5 : 0;
-            document.getElementById('cod-fee').textContent = `$${codFee.toFixed(2)}`;
-            document.getElementById('cod-fee').parentElement.classList.toggle('hidden', selectedPayment !== 'cod');
-            const total = (pendingOrder.total || 0) + codFee;
-            document.getElementById('total').textContent = `$${total.toFixed(2)}`;
-        }
-        // Step navigation
-        function showStep(step) {
-            currentStep = step;
-            // Hide all steps
-            document.querySelectorAll('.step-section').forEach(s => s.classList.remove('active'));
-            // Show current step
-            document.getElementById(`step-${step}`).classList.add('active');
-            // Update indicators
-            document.querySelectorAll('.step-indicator').forEach((indicator, index) => {
-                indicator.classList.remove('active', 'completed');
-                if (index + 1 < step) {
-                    indicator.classList.add('completed');
-                } else if (index + 1 === step) {
-                    indicator.classList.add('active');
-                }
-            });
-            // Update buttons
-            const backBtn = document.getElementById('back-btn');
-            const continueBtn = document.getElementById('continue-btn');
-            const continueText = document.getElementById('continue-text');
-            backBtn.classList.toggle('hidden', step === 1);
-            if (step === 3) {
-                continueBtn.classList.add('hidden');
-                document.getElementById('place-order-btn').classList.remove('hidden');
-            } else {
-                continueBtn.classList.remove('hidden');
-                document.getElementById('place-order-btn').classList.add('hidden');
-                continueText.textContent = step === 1 ? 'Continue to Payment' : 'Review Order';
-            }
-            // Update step label
-            document.getElementById('step-label').textContent = step;
-        }
-        function goNext() {
-            if (currentStep === 1) {
-                // Validate shipping form
-                if (!validateShippingForm()) return;
-                showStep(2);
-            } else if (currentStep === 2) {
-                showStep(3);
-                updateReview();
-            }
-        }
-        function goBack() {
-            if (currentStep > 1) {
-                showStep(currentStep - 1);
-            }
-        }
-        // Validate shipping form
-        function validateShippingForm() {
-            const fields = ['fullname', 'email', 'phone', 'address', 'city', 'state', 'zipcode'];
-            for (const field of fields) {
-                const input = document.getElementById(field);
-                if (!input.value.trim()) {
-                    showToast(`Please fill in ${field.replace('_', ' ')}`, 'error');
-                    input.focus();
-                    return false;
-                }
-            }
-            // Validate email format
-            const email = document.getElementById('email').value;
-            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-                showToast('Please enter a valid email address', 'error');
-                return false;
-            }
-            return true;
-        }
-        // Select payment method
-        function selectPayment(method) {
-            selectedPayment = method;
-            // Update UI
-            document.querySelectorAll('.payment-option').forEach(opt => {
-                opt.classList.remove('selected');
-                opt.querySelector('.fa-check').classList.add('hidden');
-            });
-            const selected = document.querySelector(`[onclick="selectPayment('${method}')"]`);
-            selected.classList.add('selected');
-            selected.querySelector('.fa-check').classList.remove('hidden');
-            // Show/hide card form
-            document.getElementById('card-form').classList.toggle('hidden', method !== 'card');
-            // Update totals if COD
-            renderOrderSummary();
-        }
-        // Update review section
-        function updateReview() {
-            // Shipping address
-            const shipping = `
-                <p>${document.getElementById('fullname').value}</p>
-                <p>${document.getElementById('address').value}</p>
-                <p>${document.getElementById('city').value}, ${document.getElementById('state').value} ${document.getElementById('zipcode').value}</p>
-            `;
-            document.getElementById('review-shipping').innerHTML = shipping;
-            // Payment method
-            let paymentText = '';
-            if (selectedPayment === 'eeshapay') {
-                paymentText = `<p class="font-semibold text-brand-500">EeshaPay Wallet</p><p class="text-sm text-gray-500">Balance: $${walletBalance.toFixed(2)}</p>`;
-            } else if (selectedPayment === 'card') {
-                const last4 = document.getElementById('card-number').value.slice(-4);
-                paymentText = `<p class="font-semibold">Card ending in ${last4}</p><p class="text-sm text-gray-500">${document.getElementById('card-name').value}</p>`;
-            } else {
-                paymentText = `<p class="font-semibold text-green-600">Cash on Delivery</p><p class="text-sm text-gray-500">Pay when you receive your order (+$5.00 fee)</p>`;
-            }
-            document.getElementById('review-payment').innerHTML = paymentText;
-            // Order items
-            const itemsHtml = pendingOrder.items.map(item => `
-                <div class="flex justify-between py-1">
-                    <span>${item.name} x ${item.quantity}</span>
-                    <span>$${(item.price * item.quantity).toFixed(2)}</span>
-                </div>
-            `).join('');
-            document.getElementById('review-items').innerHTML = itemsHtml;
-        }
-        // Place order
-        async function placeOrder() {
-            // Validate card details if card payment
-            if (selectedPayment === 'card') {
-                const cardNumber = document.getElementById('card-number').value;
-                const cardExpiry = document.getElementById('card-expiry').value;
-                const cardCvv = document.getElementById('card-cvv').value;
-                const cardName = document.getElementById('card-name').value;
-                if (!cardNumber || cardNumber.length < 16) {
-                    showToast('Please enter a valid card number', 'error');
-                return;
-                }
-                if (!cardExpiry || !cardCvv || !cardName) {
-                    showToast('Please fill in all card details', 'error');
-                return;
-                }
-            }
-            // Check EeshaPay balance
-            if (selectedPayment === 'eeshapay') {
-                if (walletBalance < pendingOrder.total) {
-                    showToast('Insufficient wallet balance. Please add funds or choose another payment method.', 'error');
-                    return;
-                }
-            }
-            // Show loading
-            showLoading(true);
-            try {
-                const shippingAddress = {
-                    fullname: document.getElementById('fullname').value,
-                    email: document.getElementById('email').value,
-                    phone: document.getElementById('phone').value,
-                    address: document.getElementById('address').value,
-                    city: document.getElementById('city').value,
-                    state: document.getElementById('state').value,
-                    zipcode: document.getElementById('zipcode').value
-                };
-                // The edge function handles ALL atomic operations server-side:
-                // debit wallet, create order, create transaction, clear cart.
-                // The frontend just calls placeOrder() and reads the result.
-                const result = await window.EdgeFunctions.checkout.placeOrder(shippingAddress);
-                if (!result.success) {
-                    throw new Error(result.error || 'Failed to place order');
-                }
-                // Update local wallet balance from server response
-                if (typeof result.newBalance === 'number') {
-                    walletBalance = result.newBalance;
-                }
-                // Show success
-                showLoading(false);
-                showToast('Order placed successfully!', 'success');
-                // Redirect to confirmation
-                setTimeout(() => {
-                    window.location.href = `order-confirmation.html?orderId=${result.orderId}`;
-                }, 1000);
-            } catch (error) {
-                console.error('Error placing order:', error);
-                showLoading(false);
-                showToast(error.message || 'Error placing order. Please try again.', 'error');
-            }
-        }
-        // UI Helpers
-        function showLoading(show) {
-            document.getElementById('loading-overlay').classList.toggle('hidden', !show);
-        }
-        function showToast(message, type) {
-            const toast = document.getElementById(`${type}-toast`);
-            document.getElementById(`${type}-message`).textContent = message;
-            toast.classList.remove('hidden');
-            toast.classList.remove('translate-x-full');
-            setTimeout(() => {
-                toast.classList.add('translate-x-full');
-                setTimeout(() => toast.classList.add('hidden'), 300);
-            }, 3000);
-        }
-        // Format card number input
-        document.getElementById('card-number')?.addEventListener('input', function(e) {
-            let value = e.target.value.replace(/\s/g, '').replace(/\D/g, '');
-            value = value.replace(/(\d{4})/g, '$1 ').trim();
-            e.target.value = value;
-        });
-    </script>
-</body>
-</html>

Eesha buying folder/css/index.css DELETED Viewed

@@ -1,72 +0,0 @@
-/* latin-ext */
-@font-face {
-  font-family: 'Caladea';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJExBugZ7AAjhybUvR1N9vo3huR_DaS8.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Caladea';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJExBugZ7AAjhybUvR1N-Po3huR_DQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Caladea';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJE0BugZ7AAjhybUvR1FQ98ipcZyJ561DbZg.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Caladea';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJE0BugZ7AAjhybUvR1FQ98iq8ZyJ561DQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Caladea';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJEzBugZ7AAjhybUvRZ9-vAwpOZPDA.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Caladea';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJEzBugZ7AAjhybUvRh9-vAwpOY.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Caladea';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJE2BugZ7AAjhybUtaNY79MSqcx1BZyFDA.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Caladea';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJE2BugZ7AAjhybUtaNY790Sqcx1BZw.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

Eesha buying folder/css/loader.css DELETED Viewed

File without changes

Eesha buying folder/css/product.css DELETED Viewed

File without changes

Eesha buying folder/css/style.css DELETED Viewed

@@ -1,203 +0,0 @@
-/* General Body & Layout */
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    background-color: #f4f4f4;
-    color: #333;
-}
-.container {
-    width: 90%;
-    margin: 0 auto;
-    max-width: 1200px;
-}
-/* Header */
-header {
-    background-color: #2c3e50;
-    color: white;
-    padding: 1rem 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-header h1 {
-    margin: 0;
-    font-size: 1.8rem;
-}
-header nav a, header nav button {
-    color: rgb(64, 80, 104);
-    text-decoration: none;
-    background: #3498db;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    border: none;
-    cursor: pointer;
-}
-header nav span {
-    margin-right: 15px;
-}
-/* Product Grid */
-.product-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1.5rem;
-    margin-top: 2rem;
-}
-.product-card {
-    background-color: white;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    overflow: hidden;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-.product-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-}
-.product-card img {
-    width: 100%;
-    height: 180px;
-    object-fit: cover;
-}
-.product-card h3 {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    padding: 0 10px;
-}
-.product-card .price {
-    color: #e74c3c;
-    font-weight: bold;
-    font-size: 1.2rem;
-    margin-bottom: 1rem;
-}
-/* Auth Page */
-.auth-body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background: linear-gradient(135deg, #3498db, #2c3e50);
-}
-.auth-container {
-    background-color: white;
-    padding: 2rem;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-    width: 100%;
-    max-width: 400px;
-    text-align: center;
-}
-.auth-container h2 {
-    margin-bottom: 1.5rem;
-}
-.auth-container input[type="text"],
-.auth-container input[type="email"],
-.auth-container input[type="password"] {
-    width: calc(100% - 20px);
-    padding: 10px;
-    margin-bottom: 1rem;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-.auth-container button {
-    width: 100%;
-    padding: 12px;
-    background-color: #2ecc71;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 1rem;
-}
-.auth-container p {
-    margin-top: 1rem;
-}
-.auth-container a {
-    color: #3498db;
-    text-decoration: none;
-    font-weight: bold;
-}
-.user-type {
-    margin-bottom: 1rem;
-    text-align: left;
-}
-/* Dashboard */
-.dashboard-form {
-    background: white;
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin-bottom: 2rem;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-.dashboard-form input, .dashboard-form textarea {
-    width: calc(100% - 22px);
-    padding: 10px;
-    margin-bottom: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-.dashboard-form button {
-    background-color: #2c3e50;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-/* AI Assistant */
-.ai-assistant {
-    background-color: #eaf5ff;
-    border: 1px solid #bde0ff;
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-}
-.ai-assistant h3 {
-    margin-top: 0;
-}
-.ai-chat-box {
-    display: flex;
-    gap: 10px;
-}
-.ai-chat-box input {
-    flex-grow: 1;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-.ai-chat-box button {
-    padding: 10px 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-#ai-results {
-    margin-top: 1rem;
-}

Eesha buying folder/js/cart.js DELETED Viewed

File without changes

Eesha buying folder/js/loader.js DELETED Viewed

File without changes

Eesha buying folder/js/product.js DELETED Viewed

@@ -1,536 +0,0 @@
-// Product detail page logic — uses EdgeFunctions (cookie-based auth, no Supabase SDK).
-// Requires: ../js/config/edge-functions.js and ../js/cart.js loaded before this file.
-// Get product ID from URL
-function getProductIdFromUrl() {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get('id');
-}
-// Load product details via edge function
-async function loadProductDetails() {
-    const productId = getProductIdFromUrl();
-    if (!productId) {
-        window.location.href = '/index.html';
-        return;
-    }
-    try {
-        // Show loading states
-        document.getElementById('loadingSkeleton').classList.remove('hidden');
-        document.getElementById('loadingText').classList.remove('hidden');
-        document.getElementById('productImagesContainer').classList.add('hidden');
-        document.getElementById('productInfo').classList.add('hidden');
-        document.getElementById('priceSection').classList.add('hidden');
-        document.getElementById('descriptionSection').classList.add('hidden');
-        // Fetch product via edge function
-        const result = await window.EdgeFunctions.products.byId(productId);
-        if (!result.success || !result.product) {
-            console.error('Error loading product:', result.error);
-            window.location.href = '/index.html';
-            return;
-        }
-        const product = result.product;
-        window._currentProduct = product;  // cache for share functions
-        // Hide loading states
-        document.getElementById('loadingSkeleton').classList.add('hidden');
-        document.getElementById('loadingText').classList.add('hidden');
-        document.getElementById('productImagesContainer').classList.remove('hidden');
-        document.getElementById('productInfo').classList.remove('hidden');
-        document.getElementById('priceSection').classList.remove('hidden');
-        document.getElementById('descriptionSection').classList.remove('hidden');
-        // Update the UI with product details
-        document.getElementById('mainImage').src = product.image_url;
-        document.getElementById('productName').textContent = product.name;
-        document.getElementById('productCategory').textContent = product.category || 'General';
-        document.getElementById('productPrice').textContent = `₦${product.price.toFixed(2)}`;
-        document.getElementById('productDescription').textContent = product.description;
-        // Handle optional fields
-        if (product.original_price) {
-            document.getElementById('originalPrice').textContent = `₦${product.original_price.toFixed(2)}`;
-            const discount = Math.round(((product.original_price - product.price) / product.original_price) * 100);
-            document.getElementById('discountBadge').textContent = `-${discount}%`;
-        } else {
-            document.getElementById('originalPrice').classList.add('hidden');
-            document.getElementById('discountBadge').classList.add('hidden');
-        }
-        // Update page title
-        document.title = `${product.name} - Eesha`;
-        // Handle product images
-        const thumbnailContainer = document.getElementById('thumbnailContainer');
-        thumbnailContainer.innerHTML = ''; // Clear existing thumbnails
-        // Add main image to thumbnails
-        const mainThumbnail = createThumbnail(product.image_url, product.name, true);
-        thumbnailContainer.appendChild(mainThumbnail);
-        // Add additional images if available
-        if (product.additional_images && Array.isArray(product.additional_images)) {
-            product.additional_images.forEach(imgUrl => {
-                const thumbnail = createThumbnail(imgUrl, product.name);
-                thumbnailContainer.appendChild(thumbnail);
-            });
-        }
-        // Handle rating if available
-        if (product.rating) {
-            const ratingDiv = document.getElementById('productRating');
-            const stars = '★'.repeat(Math.floor(product.rating)) + '☆'.repeat(5 - Math.floor(product.rating));
-            ratingDiv.innerHTML = `
-                <div class="text-yellow-400">${stars}</div>
-                <span class="text-gray-600">(${product.rating_count || 0} reviews)</span>
-            `;
-        }
-    } catch (error) {
-        console.error('Error loading product:', error);
-        alert('Error loading product details. Please try again.');
-    }
-}
-// Quantity management
-let quantity = 1;
-function increaseQty() {
-    quantity++;
-    updateQuantityDisplay();
-}
-function decreaseQty() {
-    if (quantity > 1) {
-        quantity--;
-        updateQuantityDisplay();
-    }
-}
-function updateQuantityDisplay() {
-    document.getElementById('quantity').textContent = quantity;
-}
-// Add to cart functionality — uses Cart module (requires login, cookie-based)
-async function addToCart() {
-    const productId = getProductIdFromUrl();
-    if (!productId) return;
-    try {
-        // Cart module handles auth check + cart upsert internally
-        const result = await window.Cart.addToCart(productId, quantity);
-        if (!result.success) {
-            if (result.requiresAuth) {
-                // Redirect to login
-                if (confirm('Please login to add items to your cart. Go to login page?')) {
-                    window.location.href = `login.html?redirect=product&id=${productId}`;
-                }
-                return;
-            }
-            alert(result.message || 'Failed to add to cart. Please try again.');
-            return;
-        }
-        // Visual feedback
-        const addBtn = document.querySelector('button[onclick="addToCart()"]');
-        if (addBtn) {
-            const orig = addBtn.innerHTML;
-            addBtn.innerHTML = '<i class="fas fa-check"></i> Added!';
-            addBtn.classList.add('bg-green-500');
-            setTimeout(() => {
-                addBtn.innerHTML = orig;
-                addBtn.classList.remove('bg-green-500');
-            }, 1500);
-        }
-    } catch (error) {
-        console.error('Add to cart failed:', error);
-        alert('Failed to add to cart. Please try again.');
-    }
-}
-// Update cart count in header — delegates to shared Cart module
-async function updateCartCount() {
-    try {
-        if (window.Cart && window.Cart.updateCartCountUI) {
-            await window.Cart.updateCartCountUI();
-        }
-    } catch (err) {
-        console.error('Error updating cart count:', err);
-    }
-}
-// Image gallery functionality
-function createThumbnail(imageUrl, altText, isActive = false) {
-    const div = document.createElement('div');
-    div.className = `cursor-pointer rounded-lg overflow-hidden border-2 ${isActive ? 'border-brand-500' : 'border-transparent'}`;
-    const img = document.createElement('img');
-    img.src = imageUrl;
-    img.alt = altText;
-    img.className = 'w-full h-full object-cover aspect-square';
-    div.appendChild(img);
-    div.addEventListener('click', () => {
-        // Update main image
-        updateMainImage(imageUrl);
-        // Update active state of thumbnails
-        document.querySelectorAll('#thumbnailContainer > div').forEach(thumb => {
-            thumb.classList.remove('border-brand-500');
-            thumb.classList.add('border-transparent');
-        });
-        div.classList.remove('border-transparent');
-        div.classList.add('border-brand-500');
-    });
-    return div;
-}
-function updateMainImage(imageUrl) {
-    const mainImage = document.getElementById('mainImage');
-    mainImage.src = imageUrl;
-}
-// Global user state (kept in memory only — no localStorage)
-let currentUser = null;
-// With cookie-based auth there is no guest cart in localStorage to merge.
-// This function is retained as a no-op for backwards compatibility with the
-// existing init flow.
-async function mergeGuestCartAfterSignIn() {
-    return;
-}
-function updateUIforAuthState(user) {
-    const loginLink = document.getElementById('login-link');
-    const signupLink = document.getElementById('signup-link');
-    const userMenu = document.getElementById('user-menu');
-    const userEmail = document.getElementById('user-email');
-    const mobileLogin = document.querySelector('#mobile-auth-links a[href="login.html"]') || document.querySelector('#mobile-auth-links a[href="Eesha buying folder/login.html"]');
-    const mobileSignup = document.querySelector('#mobile-auth-links a[href="signup.html"]') || document.querySelector('#mobile-auth-links a[href="Eesha buying folder/signup.html"]');
-    const mobileLogout = document.getElementById('mobile-logout-button');
-    if (user) {
-        if (loginLink) loginLink.style.display = 'none';
-        if (signupLink) signupLink.style.display = 'none';
-        if (userMenu) userMenu.style.display = 'block';
-        if (userEmail) userEmail.textContent = user.email || '';
-        if (mobileLogin) mobileLogin.style.display = 'none';
-        if (mobileSignup) mobileSignup.style.display = 'none';
-        if (mobileLogout) mobileLogout.style.display = 'block';
-    } else {
-        if (loginLink) loginLink.style.display = 'block';
-        if (signupLink) signupLink.style.display = 'block';
-        if (userMenu) userMenu.style.display = 'none';
-        if (mobileLogin) mobileLogin.style.display = 'block';
-        if (mobileSignup) mobileSignup.style.display = 'block';
-        if (mobileLogout) mobileLogout.style.display = 'none';
-    }
-}
-// Initialize page and auth handling
-document.addEventListener('DOMContentLoaded', async () => {
-    // Restore session via cookie-based auth (no onAuthStateChange available)
-    try {
-        const { user } = await window.EdgeFunctions.auth.checkSession();
-        currentUser = user || null;
-        updateUIforAuthState(currentUser);
-        await updateCartCount();
-    } catch (err) {
-        console.error('Error checking initial session:', err);
-    }
-    // Wire up logout buttons if present (cookie-based logout clears server cookie)
-    const logoutButton = document.getElementById('logout-button');
-    const mobileLogoutButton = document.getElementById('mobile-logout-button');
-    if (logoutButton) logoutButton.addEventListener('click', async (e) => {
-        e.preventDefault();
-        await window.EdgeFunctions.auth.logout();
-        currentUser = null;
-        updateUIforAuthState(null);
-        await updateCartCount();
-        window.location.reload();
-    });
-    if (mobileLogoutButton) mobileLogoutButton.addEventListener('click', async (e) => {
-        e.preventDefault();
-        await window.EdgeFunctions.auth.logout();
-        currentUser = null;
-        updateUIforAuthState(null);
-        await updateCartCount();
-        window.location.reload();
-    });
-    // User menu toggle
-    const userMenuButton = document.getElementById('user-menu-button');
-    const userMenuDropdown = document.getElementById('user-menu-dropdown');
-    if (userMenuButton && userMenuDropdown) {
-        userMenuButton.addEventListener('click', () => userMenuDropdown.classList.toggle('hidden'));
-        document.addEventListener('click', (e) => {
-            if (!document.getElementById('user-menu').contains(e.target)) {
-                userMenuDropdown.classList.add('hidden');
-            }
-        });
-    }
-    // Mobile menu
-    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
-    const mobileMenu = document.getElementById('mobileMenu');
-    if (mobileMenuBtn && mobileMenu) mobileMenuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
-    // Finally load product details and update cart count
-    await loadProductDetails();
-    await updateCartCount();
-    // Phase 2: load reviews + active group buys for this product
-    loadProductReviews();
-    loadActiveGroupBuys();
-});
-// Search bar behavior (navigate to search-result.html with query)
-(function setupSearch() {
-    try {
-        const searchInput = document.getElementById('searchInput');
-        if (!searchInput) return;
-        const goToSearch = () => {
-            const q = (searchInput.value || '').trim();
-            if (!q) return;
-            // keep relative path consistent with index/product location
-            window.location.href = `../search-result.html?q=${encodeURIComponent(q)}`;
-        };
-        // Enter key
-        searchInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') goToSearch();
-        });
-        // If there's an adjacent button (search icon) try to attach click
-        const btn = searchInput.parentElement?.querySelector('button');
-        if (btn) btn.addEventListener('click', goToSearch);
-    } catch (err) {
-        console.error('Search setup failed:', err);
-    }
-})();
-// ====================================================================
-// Phase 2: Product sharing, group buy, reviews
-// ====================================================================
-function getCurrentProductId() {
-    return getProductIdFromUrl();
-}
-function getCurrentProduct() {
-    // Stored when loadProductDetails runs
-    return window._currentProduct || null;
-}
-// ---- Sharing ----
-function shareProduct(platform) {
-    const id = getCurrentProductId();
-    if (!id) return;
-    const url = `${window.location.origin}/Eesha%20buying%20folder/product.html?id=${id}`;
-    const product = getCurrentProduct();
-    const text = product
-        ? `Check out "${product.name}" on Cellex — $${Number(product.price).toFixed(2)}`
-        : 'Check out this product on Cellex';
-    if (platform === 'whatsapp') {
-        window.open(`https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`, '_blank');
-    } else if (platform === 'telegram') {
-        window.open(`https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`, '_blank');
-    }
-}
-async function copyShareLink() {
-    const id = getCurrentProductId();
-    if (!id) return;
-    const url = `${window.location.origin}/Eesha%20buying%20folder/product.html?id=${id}`;
-    try {
-        await navigator.clipboard.writeText(url);
-        const btn = event?.target?.closest('button');
-        if (btn) {
-            const orig = btn.innerHTML;
-            btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
-            setTimeout(() => btn.innerHTML = orig, 1500);
-        }
-    } catch (e) {
-        window.prompt('Copy this link:', url);
-    }
-}
-// ---- Group buy ----
-async function startGroupBuy() {
-    const productId = getCurrentProductId();
-    if (!productId) return;
-    if (!currentUser) {
-        if (confirm('Please login to start a group buy. Go to login page?')) {
-            window.location.href = `login.html?next=${encodeURIComponent('/Eesha buying folder/product.html?id=' + productId)}`;
-        }
-        return;
-    }
-    if (!confirm('Start a group buy?\n\nGet 3 friends to join and everyone gets 20% off.\n\nWe will generate a share link for you.')) return;
-    const r = await window.EdgeFunctions.groupBuy.create(Number(productId), 3, 20);
-    if (r.success) {
-        const url = `${window.location.origin}/group-buy.html?id=${r.groupBuy.id}`;
-        const shareText = `🛍️ Join my group buy on Cellex! Get 20% off when 3 of us join. ${url}`;
-        window.open(`https://wa.me/?text=${encodeURIComponent(shareText)}`, '_blank');
-        // Also navigate to the group buy page
-        window.location.href = `/group-buy.html?id=${r.groupBuy.id}`;
-    } else {
-        alert('Failed to start group buy: ' + (r.error || 'Unknown error'));
-    }
-}
-async function loadActiveGroupBuys() {
-    const productId = getCurrentProductId();
-    if (!productId) return;
-    const container = document.getElementById('activeGroupBuys');
-    if (!container) return;
-    try {
-        const r = await window.EdgeFunctions.groupBuy.active(Number(productId));
-        if (!r.success || !r.groupBuys || r.groupBuys.length === 0) return;
-        container.classList.remove('hidden');
-        container.innerHTML = `
-            <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
-                <div class="text-xs font-bold text-amber-700 uppercase tracking-wide mb-2">
-                    <i class="fas fa-fire"></i> ${r.groupBuys.length} active group buy${r.groupBuys.length > 1 ? 's' : ''} — join & get 20% off!
-                </div>
-                ${r.groupBuys.map(gb => `
-                    <a href="/group-buy.html?id=${gb.id}" class="block text-sm text-amber-900 hover:underline">
-                        👥 ${gb.current_count}/${gb.target_count} joined · expires ${new Date(gb.expires_at).toLocaleString()}
-                    </a>
-                `).join('')}
-            </div>`;
-    } catch (e) { /* silent fail */ }
-}
-// ---- Reviews ----
-async function loadProductReviews() {
-    const productId = getCurrentProductId();
-    if (!productId) return;
-    try {
-        const r = await window.EdgeFunctions.reviews.byProduct(Number(productId));
-        if (!r.success) return;
-        // Summary
-        const summary = document.getElementById('reviewsSummary');
-        if (r.summary.count > 0) {
-            summary.classList.remove('hidden');
-            document.getElementById('reviewsAvg').textContent = Number(r.summary.avg).toFixed(1);
-            document.getElementById('reviewsStars').textContent =
-                '★'.repeat(Math.round(r.summary.avg)) + '☆'.repeat(5 - Math.round(r.summary.avg));
-            document.getElementById('reviewsCount').textContent = `${r.summary.count} review${r.summary.count > 1 ? 's' : ''}`;
-            document.getElementById('reviewsBlurb').textContent =
-                r.summary.avg >= 4 ? 'Buyers love this product!' :
-                r.summary.avg >= 3 ? 'Most buyers are satisfied.' :
-                'Mixed reviews — read below.';
-        }
-        // List
-        const list = document.getElementById('reviewsList');
-        if (!r.reviews || r.reviews.length === 0) {
-            list.innerHTML = '<div class="text-gray-500 text-sm">No reviews yet. Be the first to write one!</div>';
-            return;
-        }
-        list.innerHTML = r.reviews.map(rev => `
-            <div class="border-b pb-3">
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center gap-2">
-                        <div class="w-8 h-8 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center font-bold text-sm">
-                            ${(rev.reviewer_name || 'B').charAt(0).toUpperCase()}
-                        </div>
-                        <div>
-                            <div class="font-medium text-sm">${escapeHtml(rev.reviewer_name || 'Buyer')}</div>
-                            <div class="text-xs text-gray-500">${new Date(rev.created_at).toLocaleDateString()}</div>
-                        </div>
-                    </div>
-                    <div class="text-yellow-400 text-sm">${'★'.repeat(rev.rating)}${'☆'.repeat(5 - rev.rating)}</div>
-                </div>
-                ${rev.title ? `<div class="font-semibold mt-2">${escapeHtml(rev.title)}</div>` : ''}
-                ${rev.comment ? `<p class="text-gray-700 text-sm mt-1">${escapeHtml(rev.comment)}</p>` : ''}
-                ${rev.verified_purchase ? '<div class="text-xs text-green-600 mt-1"><i class="fas fa-check-circle"></i> Verified purchase</div>' : ''}
-                ${rev.images && rev.images.length ? `<div class="flex gap-2 mt-2">${rev.images.map(img => `<img src="${escapeHtml(img)}" class="w-16 h-16 object-cover rounded">`).join('')}</div>` : ''}
-                <button onclick="markHelpful('${rev.id}')" class="text-xs text-gray-500 hover:text-amber-600 mt-2">
-                    <i class="fas fa-thumbs-up"></i> Helpful (${rev.helpful_count || 0})
-                </button>
-            </div>`).join('');
-    } catch (e) {
-        console.error('reviews load error', e);
-    }
-}
-function escapeHtml(s) {
-    return String(s ?? '').replace(/[&<>"']/g, c => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
-    }[c]));
-}
-// ---- Review modal ----
-function openReviewModal() {
-    if (!currentUser) {
-        if (confirm('Please login to write a review. Go to login page?')) {
-            const id = getCurrentProductId();
-            window.location.href = `login.html?next=${encodeURIComponent('/Eesha buying folder/product.html?id=' + id)}`;
-        }
-        return;
-    }
-    document.getElementById('reviewModal').classList.remove('hidden');
-    // Star picker
-    document.querySelectorAll('#starPicker button').forEach(btn => {
-        btn.onclick = () => {
-            const star = parseInt(btn.dataset.star);
-            document.getElementById('reviewRating').value = star;
-            document.querySelectorAll('#starPicker button').forEach(b => {
-                b.classList.remove('text-amber-400');
-                b.classList.add('text-gray-300');
-            });
-            for (let i = 1; i <= star; i++) {
-                const b = document.querySelector(`#starPicker button[data-star="${i}"]`);
-                if (b) { b.classList.add('text-amber-400'); b.classList.remove('text-gray-300'); }
-            }
-        };
-    });
-    document.getElementById('reviewForm').onsubmit = submitReview;
-}
-function closeReviewModal() {
-    document.getElementById('reviewModal').classList.add('hidden');
-}
-async function submitReview(e) {
-    e.preventDefault();
-    const errEl = document.getElementById('reviewError');
-    errEl.classList.add('hidden');
-    const rating = parseInt(document.getElementById('reviewRating').value);
-    if (!rating || rating < 1 || rating > 5) {
-        errEl.textContent = 'Please select a rating (1-5 stars)';
-        errEl.classList.remove('hidden');
-        return;
-    }
-    const r = await window.EdgeFunctions.reviews.create({
-        productId: Number(getCurrentProductId()),
-        rating,
-        title: document.getElementById('reviewTitle').value.trim(),
-        comment: document.getElementById('reviewComment').value.trim(),
-    });
-    if (r.success) {
-        closeReviewModal();
-        await loadProductReviews();
-        alert('Thanks for your review!');
-    } else {
-        errEl.textContent = r.error || 'Failed to submit review';
-        errEl.classList.remove('hidden');
-    }
-}
-async function markHelpful(reviewId) {
-    const r = await window.EdgeFunctions.reviews.helpful(reviewId);
-    if (r.success) await loadProductReviews();
-}

Eesha buying folder/login.html DELETED Viewed

@@ -1,153 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - Cellex</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        .loading {
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-    </style>
-</head>
-<body class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
-    <!-- Main Container -->
-    <div class="w-full max-w-md">
-        <!-- Logo -->
-        <div class="text-center mb-8">
-            <a href="../index.html" class="inline-block">
-                <h1 class="text-4xl font-extrabold text-[#f0474a]">Cellex</h1>
-            </a>
-            <p class="text-gray-500 mt-2">Nigeria's #1 Marketplace</p>
-        </div>
-        <!-- Login Card -->
-        <div class="bg-white rounded-2xl shadow-lg p-8">
-            <h2 class="text-2xl font-bold text-gray-800 mb-2">Welcome back</h2>
-            <p class="text-gray-500 mb-6">Please sign in to continue</p>
-            <!-- Error Message -->
-            <div id="errorMessage" class="hidden bg-red-50 border border-red-200 text-red-600 rounded-lg p-3 mb-4 text-sm"></div>
-            <!-- Login Form -->
-            <form id="loginForm">
-                <div class="mb-4">
-                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email address</label>
-                    <input type="email" id="email" name="email" required
-                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#f0474a] focus:border-transparent"
-                        placeholder="you@example.com">
-                </div>
-                <div class="mb-4">
-                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
-                    <input type="password" id="password" name="password" required
-                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#f0474a] focus:border-transparent"
-                        placeholder="••••••••">
-                </div>
-                <div class="flex items-center justify-between mb-6">
-                    <label class="flex items-center">
-                        <input type="checkbox" id="remember" class="rounded border-gray-300 text-[#f0474a] focus:ring-[#f0474a]">
-                        <span class="ml-2 text-sm text-gray-600">Remember me</span>
-                    </label>
-                    <a href="#" class="text-sm text-[#f0474a] hover:underline">Forgot password?</a>
-                </div>
-                <button type="submit" id="loginButton"
-                    class="w-full bg-[#f0474a] text-white py-3 rounded-lg font-semibold hover:bg-[#d93e41] transition-colors flex items-center justify-center gap-2">
-                    <svg class="loading hidden animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    Sign in
-                </button>
-            </form>
-            <div class="mt-6 text-center">
-                <p class="text-sm text-gray-600">
-                    Don't have an account?
-                    <a href="signup.html" class="font-medium text-[#f0474a] hover:underline">Sign up</a>
-                </p>
-            </div>
-        </div>
-    </div>
-    <!-- Scripts: Edge function client only (NO Supabase SDK) -->
-    <script src="../js/config/edge-functions.js?v=2"></script>
-    <script>
-        // Elements
-        const loginForm = document.getElementById('loginForm');
-        const loginButton = document.getElementById('loginButton');
-        const errorMessage = document.getElementById('errorMessage');
-        const loadingIcon = loginButton.querySelector('.loading');
-        // Helper Functions
-        function showError(message) {
-            errorMessage.textContent = message;
-            errorMessage.classList.remove('hidden');
-        }
-        function hideError() {
-            errorMessage.classList.add('hidden');
-        }
-        function setLoading(isLoading) {
-            loadingIcon.classList.toggle('hidden', !isLoading);
-            loginButton.disabled = isLoading;
-        }
-        // Email/Password Login via edge function (no Supabase SDK)
-        async function performLogin() {
-            hideError();
-            setLoading(true);
-            const email = document.getElementById('email').value;
-            const password = document.getElementById('password').value;
-            try {
-                const result = await window.EdgeFunctions.auth.login(email, password);
-                if (!result.success) {
-                    showError(result.error || 'Incorrect email or password. New user? Please sign up.');
-                    return;
-                }
-                // Login successful — redirect to ?next= param if present, else home
-                const params = new URLSearchParams(window.location.search);
-                const next = params.get('next');
-                window.location.href = next || '../index.html';
-            } catch (error) {
-                showError(error.message || 'Failed to sign in');
-            } finally {
-                setLoading(false);
-            }
-        }
-        loginForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            await performLogin();
-        });
-        // Check session on load (via edge function — if already logged in, redirect)
-        window.addEventListener('load', async () => {
-            try {
-                const result = await window.EdgeFunctions.auth.checkSession();
-                if (result.success && result.user) {
-                    // Already logged in — redirect to ?next= param if present, else home
-                    const params = new URLSearchParams(window.location.search);
-                    const next = params.get('next');
-                    window.location.href = next || '../index.html';
-                }
-            } catch (e) {
-                // Not logged in — stay on login page
-            }
-        });
-    </script>
-</body>
-</html>

Eesha buying folder/order-confirmation.html DELETED Viewed

@@ -1,450 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Order Confirmation - Cellex | Nigeria's #1 Marketplace</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="../js/config/edge-functions.js?v=3"></script>
-    <script src="../js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * {
-            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
-        }
-        @keyframes confetti {
-            0% { transform: translateY(0) rotateZ(0); opacity: 1; }
-            100% { transform: translateY(100vh) rotateZ(720deg); opacity: 0; }
-        }
-        @keyframes bounce {
-            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
-            40% { transform: translateY(-20px); }
-            60% { transform: translateY(-10px); }
-        }
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(30px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes scaleIn {
-            from { transform: scale(0); opacity: 0; }
-            to { transform: scale(1); opacity: 1; }
-        }
-        .confetti {
-            position: fixed;
-            pointer-events: none;
-            z-index: 100;
-        }
-        .fade-in-up {
-            animation: fadeInUp 0.6s ease-out forwards;
-        }
-        .scale-in {
-            animation: scaleIn 0.5s ease-out forwards;
-        }
-        .bounce {
-            animation: bounce 1s ease-out;
-        }
-        .progress-step {
-            transition: all 0.3s ease;
-        }
-        .progress-step.active .step-circle {
-            background: #f59e0b;
-            color: white;
-        }
-        .progress-step.completed .step-circle {
-            background: #22c55e;
-            color: white;
-        }
-        .progress-line {
-            height: 2px;
-            background: #e5e7eb;
-            transition: background 0.3s ease;
-        }
-        .progress-line.completed {
-            background: #22c55e;
-        }
-    </style>
-</head>
-<body class="bg-gray-50 min-h-screen">
-    <!-- Loading State -->
-    <div id="loading" class="flex items-center justify-center min-h-screen">
-        <div class="text-center">
-            <div class="animate-spin rounded-full h-12 w-12 border-4 border-brand-500 border-t-transparent mx-auto mb-4"></div>
-            <p class="text-gray-500">Loading order details...</p>
-        </div>
-    </div>
-    <!-- Main Content -->
-    <div id="content" class="hidden">
-        <!-- Header -->
-        <header class="bg-white shadow-sm">
-            <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex justify-between items-center h-16">
-                    <a href="../index.html" class="flex items-center gap-2 group">
-                        <div class="w-10 h-10 flex items-center justify-center">
-                            <svg viewBox="0 0 60 60" class="w-full h-full">
-                                <defs>
-                                    <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                        <stop offset="0%" stop-color="#fbbf24"/>
-                                        <stop offset="50%" stop-color="#f59e0b"/>
-                                        <stop offset="100%" stop-color="#d97706"/>
-                                    </linearGradient>
-                                    <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                        <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                        <feMerge>
-                                            <feMergeNode in="coloredBlur"/>
-                                            <feMergeNode in="SourceGraphic"/>
-                                        </feMerge>
-                                    </filter>
-                                </defs>
-                                <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                                      fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                                <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                                      fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                                <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                                      fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                                <g transform="translate(52, 8)">
-                                    <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#fbbf24"/>
-                                </g>
-                            </svg>
-                        </div>
-                        <div class="flex flex-col">
-                            <span class="text-xl font-extrabold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent leading-tight">Cellex</span>
-                            <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                        </div>
-                    </a>
-                    <a href="../index.html" class="text-gray-600 hover:text-brand-500 transition-colors">
-                        <i class="fas fa-home text-xl"></i>
-                    </a>
-                </div>
-            </nav>
-        </header>
-        <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-            <!-- Success Banner -->
-            <div class="text-center mb-12 fade-in-up">
-                <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 bounce">
-                    <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center">
-                        <i class="fas fa-check text-white text-3xl"></i>
-                    </div>
-                </div>
-                <h1 class="text-4xl font-bold text-gray-900 mb-2">Order Confirmed!</h1>
-                <p class="text-gray-500 text-lg">Thank you for your purchase</p>
-            </div>
-            <!-- Order Details Card -->
-            <div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-8 fade-in-up" style="animation-delay: 0.2s">
-                <div class="bg-gradient-to-r from-primary to-red-500 px-6 py-4">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <p class="text-white/80 text-sm">Order Number</p>
-                            <p class="text-white text-xl font-bold" id="order-number"># Loading...</p>
-                        </div>
-                        <div class="text-right">
-                            <p class="text-white/80 text-sm">Order Date</p>
-                            <p class="text-white font-medium" id="order-date">Loading...</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="p-6">
-                    <!-- Order Status Progress -->
-                    <div class="mb-8">
-                        <h3 class="font-semibold text-gray-900 mb-4">Order Status</h3>
-                        <div class="flex items-center justify-between">
-                            <div class="flex-1 text-center">
-                                <div class="progress-step active">
-                                    <div class="step-circle w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2">
-                                        <i class="fas fa-check"></i>
-                                    </div>
-                                    <p class="text-sm font-medium text-gray-900">Confirmed</p>
-                                </div>
-                            </div>
-                            <div class="flex-1 h-1 bg-gray-200 mt-[-20px]"></div>
-                            <div class="flex-1 text-center">
-                                <div class="progress-step">
-                                    <div class="step-circle w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2">
-                                        <i class="fas fa-box"></i>
-                                    </div>
-                                    <p class="text-sm text-gray-500">Processing</p>
-                                </div>
-                            </div>
-                            <div class="flex-1 h-1 bg-gray-200 mt-[-20px]"></div>
-                            <div class="flex-1 text-center">
-                                <div class="progress-step">
-                                    <div class="step-circle w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2">
-                                        <i class="fas fa-truck"></i>
-                                    </div>
-                                    <p class="text-sm text-gray-500">Shipped</p>
-                                </div>
-                            </div>
-                            <div class="flex-1 h-1 bg-gray-200 mt-[-20px]"></div>
-                            <div class="flex-1 text-center">
-                                <div class="progress-step">
-                                    <div class="step-circle w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2">
-                                        <i class="fas fa-home"></i>
-                                    </div>
-                                    <p class="text-sm text-gray-500">Delivered</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Order Items -->
-                    <div class="mb-6">
-                        <h3 class="font-semibold text-gray-900 mb-4">Order Items</h3>
-                        <div id="order-items" class="space-y-3">
-                            <!-- Items loaded dynamically -->
-                        </div>
-                    </div>
-                    <!-- Shipping Address -->
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-                        <div>
-                            <h3 class="font-semibold text-gray-900 mb-3">Shipping Address</h3>
-                            <div class="bg-gray-50 rounded-xl p-4">
-                                <p class="text-gray-600 text-sm" id="shipping-address">Loading...</p>
-                            </div>
-                        </div>
-                        <div>
-                            <h3 class="font-semibold text-gray-900 mb-3">Payment Method</h3>
-                            <div class="bg-gray-50 rounded-xl p-4">
-                                <p class="text-gray-600 text-sm" id="payment-method">Loading...</p>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Order Summary -->
-                    <div class="border-t pt-6">
-                        <div class="space-y-2">
-                            <div class="flex justify-between text-gray-600">
-                                <span>Subtotal</span>
-                                <span id="subtotal">$0.00</span>
-                            </div>
-                            <div class="flex justify-between text-gray-600">
-                                <span>Shipping</span>
-                                <span id="shipping">$0.00</span>
-                            </div>
-                            <div class="flex justify-between text-gray-600">
-                                <span>Tax</span>
-                                <span id="tax">$0.00</span>
-                            </div>
-                            <div class="flex justify-between text-gray-600" id="cod-fee-row" style="display: none;">
-                                <span>COD Fee</span>
-                                <span id="cod-fee">$5.00</span>
-                            </div>
-                            <div class="flex justify-between text-lg font-bold text-gray-900 pt-2 border-t">
-                                <span>Total</span>
-                                <span class="text-brand-500" id="total">$0.00</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- Action Buttons -->
-            <div class="flex flex-col sm:flex-row gap-4 fade-in-up" style="animation-delay: 0.4s">
-                <a href="../index.html" class="flex-1 bg-white border-2 border-gray-200 text-gray-700 py-4 rounded-xl font-semibold text-center hover:bg-gray-50 transition-colors">
-                    <i class="fas fa-shopping-bag mr-2"></i>
-                    Continue Shopping
-                </a>
-                <a href="orders.html" class="flex-1 bg-brand-500 text-white py-4 rounded-xl font-semibold text-center hover:bg-brand-600 transition-colors">
-                    <i class="fas fa-list mr-2"></i>
-                    View All Orders
-                </a>
-            </div>
-            <!-- Help Section -->
-            <div class="mt-8 text-center fade-in-up" style="animation-delay: 0.6s">
-                <p class="text-gray-500 text-sm">
-                    Need help? <a href="#" class="text-brand-500 hover:underline">Contact Support</a> or call us at <a href="tel:+1234567890" class="text-brand-500 hover:underline">+1 234 567 890</a>
-                </p>
-            </div>
-        </main>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', async () => {
-            // Auth check — redirect to login if not logged in
-            const { success: sessOk, user } = await window.EdgeFunctions.auth.checkSession();
-            if (!sessOk || !user) {
-                window.location.href = 'login.html?redirect=order-confirmation' + window.location.search;
-                return;
-            }
-            // Accept ?orderId=, ?order_id=, or legacy ?id=
-            const params = new URLSearchParams(window.location.search);
-            const orderId = params.get('orderId') || params.get('order_id') || params.get('id');
-            if (!orderId) {
-                window.location.href = '../index.html';
-                return;
-            }
-            try {
-                // Load order details via edge function
-                const result = await window.EdgeFunctions.orders.details(orderId);
-                if (!result.success || !result.order) {
-                    showError(result.error || 'Order not found');
-                    return;
-                }
-                // Render order details
-                renderOrderDetails(result.order);
-                // Create confetti
-                createConfetti();
-                // Show content
-                document.getElementById('loading').classList.add('hidden');
-                document.getElementById('content').classList.remove('hidden');
-            } catch (error) {
-                console.error('Error loading order:', error);
-                document.getElementById('loading').innerHTML = `
-                    <div class="text-center">
-                        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <i class="fas fa-exclamation text-red-500 text-2xl"></i>
-                        </div>
-                        <h2 class="text-xl font-bold text-gray-900 mb-2">Order Not Found</h2>
-                        <p class="text-gray-500 mb-4">We couldn't find your order details.</p>
-                        <a href="../index.html" class="text-brand-500 hover:underline">Go to Homepage</a>
-                    </div>
-                `;
-            }
-        });
-        function renderOrderDetails(order) {
-            // Order number and date
-            document.getElementById('order-number').textContent = `# ${order.id.substring(0, 8).toUpperCase()}`;
-            document.getElementById('order-date').textContent = new Date(order.created_at).toLocaleDateString('en-US', {
-                weekday: 'long',
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric'
-            });
-            // Order items
-            const itemsContainer = document.getElementById('order-items');
-            if (order.items && order.items.length > 0) {
-                itemsContainer.innerHTML = order.items.map(item => `
-                    <div class="flex items-center gap-4 bg-gray-50 rounded-xl p-3">
-                        <img src="${item.image || 'https://via.placeholder.com/60'}" alt="${item.name}" class="w-14 h-14 rounded-lg object-cover">
-                        <div class="flex-1">
-                            <p class="font-medium text-gray-900">${item.name}</p>
-                            <p class="text-sm text-gray-500">Qty: ${item.quantity}</p>
-                        </div>
-                        <p class="font-semibold text-gray-900">$${(item.price * item.quantity).toFixed(2)}</p>
-                    </div>
-                `).join('');
-            }
-            // Shipping address
-            const addr = order.shipping_address || {};
-            document.getElementById('shipping-address').innerHTML = `
-                <p class="font-medium text-gray-900">${addr.fullname || 'N/A'}</p>
-                <p>${addr.address || ''}</p>
-                <p>${addr.city || ''}, ${addr.state || ''} ${addr.zipcode || ''}</p>
-                <p class="mt-2"><i class="fas fa-phone mr-2"></i>${addr.phone || 'N/A'}</p>
-                <p><i class="fas fa-envelope mr-2"></i>${addr.email || 'N/A'}</p>
-            `;
-            // Payment method
-            let paymentText = '';
-            if (order.payment_method === 'eeshapay') {
-                paymentText = '<p class="font-medium text-brand-500"><i class="fas fa-wallet mr-2"></i>EeshaPay</p>';
-            } else if (order.payment_method === 'card') {
-                paymentText = '<p class="font-medium"><i class="fas fa-credit-card mr-2"></i>Credit/Debit Card</p>';
-            } else if (order.payment_method === 'cod') {
-                paymentText = '<p class="font-medium text-green-600"><i class="fas fa-money-bill mr-2"></i>Cash on Delivery</p>';
-                document.getElementById('cod-fee-row').style.display = 'flex';
-            }
-            document.getElementById('payment-method').innerHTML = paymentText;
-            // Totals
-            document.getElementById('subtotal').textContent = `$${(order.subtotal || 0).toFixed(2)}`;
-            document.getElementById('shipping').textContent = order.shipping > 0 ? `$${order.shipping.toFixed(2)}` : 'Free';
-            document.getElementById('tax').textContent = `$${(order.tax || 0).toFixed(2)}`;
-            document.getElementById('total').textContent = `$${(order.total || 0).toFixed(2)}`;
-        }
-        function createConfetti() {
-            const colors = ['#f59e0b', '#22c55e', '#3b82f6', '#fbbf24', '#a855f7'];
-            for (let i = 0; i < 50; i++) {
-                setTimeout(() => {
-                    const confetti = document.createElement('div');
-                    confetti.className = 'confetti';
-                    confetti.style.left = Math.random() * 100 + 'vw';
-                    confetti.style.top = '-10px';
-                    confetti.style.width = Math.random() * 10 + 5 + 'px';
-                    confetti.style.height = confetti.style.width;
-                    confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
-                    confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
-                    confetti.style.animation = `confetti ${Math.random() * 2 + 2}s linear forwards`;
-                    document.body.appendChild(confetti);
-                    confetti.addEventListener('animationend', () => confetti.remove());
-                }, i * 50);
-            }
-        }
-        function showError(message) {
-            document.getElementById('loading').innerHTML = `
-                <div class="text-center">
-                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i class="fas fa-exclamation text-red-500 text-2xl"></i>
-                    </div>
-                    <h2 class="text-xl font-bold text-gray-900 mb-2">Error</h2>
-                    <p class="text-gray-500">${message}</p>
-                </div>
-            `;
-        }
-    </script>
-</body>
-</html>

Eesha buying folder/orders.html DELETED Viewed

@@ -1,422 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Orders - Cellex | Nigeria's #1 Marketplace</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="../js/config/edge-functions.js?v=3"></script>
-    <script src="../js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
-        .loading { animation: spin 1s linear infinite; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-    </style>
-</head>
-<body class="bg-gray-100 min-h-screen">
-    <!-- Header -->
-    <header class="bg-white shadow-md sticky top-0 z-50">
-        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
-            <a href="../index.html" class="flex items-center gap-2 group">
-                <div class="w-10 h-10 flex items-center justify-center">
-                    <svg viewBox="0 0 60 60" class="w-full h-full">
-                        <defs>
-                            <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                <stop offset="0%" stop-color="#fbbf24"/>
-                                <stop offset="50%" stop-color="#f59e0b"/>
-                                <stop offset="100%" stop-color="#d97706"/>
-                            </linearGradient>
-                            <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                <feMerge>
-                                    <feMergeNode in="coloredBlur"/>
-                                    <feMergeNode in="SourceGraphic"/>
-                                </feMerge>
-                            </filter>
-                        </defs>
-                        <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                              fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                        <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                              fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                        <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                              fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                        <g transform="translate(52, 8)">
-                            <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#fbbf24"/>
-                        </g>
-                    </svg>
-                </div>
-                <div class="flex flex-col">
-                    <span class="text-xl font-extrabold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent leading-tight">Cellex</span>
-                    <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                </div>
-            </a>
-            <div class="flex items-center gap-4">
-                <a href="../index.html" class="text-gray-600 hover:text-brand-500">
-                    <i class="fas fa-home text-xl"></i>
-                </a>
-                <a href="cart.html" class="text-gray-600 hover:text-brand-500 relative">
-                    <i class="fas fa-shopping-cart text-xl"></i>
-                    <span id="cartCount" class="absolute -top-2 -right-2 bg-brand-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                </a>
-            </div>
-        </nav>
-    </header>
-    <!-- Main Content -->
-    <main class="container mx-auto px-4 py-8">
-        <!-- Back Link -->
-        <a href="../index.html" class="inline-flex items-center text-gray-600 hover:text-brand-500 mb-6">
-            <i class="fas fa-arrow-left mr-2"></i> Back to Home
-        </a>
-        <div class="max-w-6xl mx-auto">
-            <!-- Page Title -->
-            <div class="flex justify-between items-center mb-6">
-                <h1 class="text-3xl font-bold text-gray-900">My Orders</h1>
-                <div class="flex gap-2">
-                    <select id="filterStatus" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary">
-                        <option value="all">All Orders</option>
-                        <option value="pending">Pending</option>
-                        <option value="processing">Processing</option>
-                        <option value="shipped">Shipped</option>
-                        <option value="delivered">Delivered</option>
-                        <option value="cancelled">Cancelled</option>
-                    </select>
-                </div>
-            </div>
-            <!-- Order Stats -->
-            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
-                <div class="bg-white p-4 rounded-lg shadow text-center">
-                    <div class="text-2xl font-bold text-yellow-500" id="pendingCount">0</div>
-                    <div class="text-sm text-gray-500">Pending</div>
-                </div>
-                <div class="bg-white p-4 rounded-lg shadow text-center">
-                    <div class="text-2xl font-bold text-blue-500" id="processingCount">0</div>
-                    <div class="text-sm text-gray-500">Processing</div>
-                </div>
-                <div class="bg-white p-4 rounded-lg shadow text-center">
-                    <div class="text-2xl font-bold text-purple-500" id="shippedCount">0</div>
-                    <div class="text-sm text-gray-500">Shipped</div>
-                </div>
-                <div class="bg-white p-4 rounded-lg shadow text-center">
-                    <div class="text-2xl font-bold text-green-500" id="deliveredCount">0</div>
-                    <div class="text-sm text-gray-500">Delivered</div>
-                </div>
-                <div class="bg-white p-4 rounded-lg shadow text-center">
-                    <div class="text-2xl font-bold text-red-500" id="cancelledCount">0</div>
-                    <div class="text-sm text-gray-500">Cancelled</div>
-                </div>
-            </div>
-            <!-- Orders List -->
-            <div id="ordersList" class="space-y-4">
-                <!-- Loading state -->
-                <div class="bg-white rounded-lg shadow p-8 text-center">
-                    <i class="fas fa-spinner loading text-4xl text-brand-500 mb-4"></i>
-                    <p class="text-gray-500">Loading your orders...</p>
-                </div>
-            </div>
-        </div>
-    </main>
-    <!-- Order Detail Modal -->
-    <div id="orderModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
-        <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
-            <div class="p-6 border-b flex justify-between items-center">
-                <h2 class="text-xl font-bold">Order Details</h2>
-                <button onclick="closeOrderModal()" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times text-xl"></i>
-                </button>
-            </div>
-            <div id="orderModalContent" class="p-6">
-                <!-- Content will be inserted here -->
-            </div>
-        </div>
-    </div>
-    <!-- Footer -->
-    <footer class="bg-dark-900 text-white py-8 mt-12">
-        <div class="container mx-auto px-4 text-center">
-            <p>&copy; 2025 Cellex. All rights reserved.</p>
-        </div>
-    </footer>
-    <script>
-        let currentUser = null;
-        let allOrders = [];
-        document.addEventListener('DOMContentLoaded', async () => {
-            await checkAuth();
-            await loadOrders();
-            await updateCartCount();
-        });
-        async function checkAuth() {
-            const { user } = await window.EdgeFunctions.auth.checkSession();
-            if (!user) {
-                window.location.href = 'login.html?redirect=orders';
-                return;
-            }
-            currentUser = user;
-        }
-        async function loadOrders() {
-            if (!currentUser) return;
-            const result = await window.EdgeFunctions.orders.list();
-            if (!result.success) {
-                console.error('Error loading orders:', result.error);
-                document.getElementById('ordersList').innerHTML = `
-                    <div class="bg-white rounded-lg shadow p-8 text-center text-red-500">
-                        <i class="fas fa-exclamation-circle text-4xl mb-4"></i>
-                        <p>Failed to load orders. Please try again.</p>
-                    </div>
-                `;
-                return;
-            }
-            allOrders = result.orders || [];
-            updateStats();
-            renderOrders(allOrders);
-            // Set up filter
-            document.getElementById('filterStatus').addEventListener('change', (e) => {
-                const status = e.target.value;
-                const filtered = status === 'all' ? allOrders : allOrders.filter(o => o.status?.toLowerCase() === status);
-                renderOrders(filtered);
-            });
-        }
-        function updateStats() {
-            const stats = {
-                pending: 0,
-                processing: 0,
-                shipped: 0,
-                delivered: 0,
-                cancelled: 0
-            };
-            allOrders.forEach(order => {
-                const status = (order.status || 'pending').toLowerCase();
-                if (stats.hasOwnProperty(status)) {
-                    stats[status]++;
-                }
-            });
-            Object.keys(stats).forEach(key => {
-                const el = document.getElementById(key + 'Count');
-                if (el) el.textContent = stats[key];
-            });
-        }
-        function renderOrders(orders) {
-            const container = document.getElementById('ordersList');
-            if (orders.length === 0) {
-                container.innerHTML = `
-                    <div class="bg-white rounded-lg shadow p-8 text-center">
-                        <i class="fas fa-box-open text-6xl text-gray-300 mb-4"></i>
-                        <h3 class="text-xl font-semibold text-gray-700 mb-2">No orders found</h3>
-                        <p class="text-gray-500 mb-6">You haven't placed any orders yet.</p>
-                        <a href="../index.html" class="inline-block bg-brand-500 text-white px-6 py-2 rounded-lg hover:bg-brand-600">
-                            Start Shopping
-                        </a>
-                    </div>
-                `;
-                return;
-            }
-            container.innerHTML = orders.map(order => {
-                const statusClass = getStatusClass(order.status);
-                const items = order.buyers_order_items || [];
-                const itemPreview = items.slice(0, 3);
-                const moreItems = items.length - 3;
-                return `
-                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition cursor-pointer" onclick="viewOrder('${order.id}')">
-                        <div class="p-6">
-                            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-                                <div class="flex items-center gap-4">
-                                    <div class="flex -space-x-2">
-                                        ${itemPreview.map(item => `
-                                            <img src="${item.product_image || item.products?.image_url || item.products?.image || 'https://via.placeholder.com/50'}"
-                                                 alt="${item.product_name || item.products?.name || 'Product'}"
-                                                 class="w-12 h-12 rounded-lg border-2 border-white object-cover">
-                                        `).join('')}
-                                        ${moreItems > 0 ? `
-                                            <div class="w-12 h-12 rounded-lg bg-gray-200 flex items-center justify-center text-sm font-medium text-gray-600">
-                                                +${moreItems}
-                                            </div>
-                                        ` : ''}
-                                    </div>
-                                    <div>
-                                        <h3 class="font-semibold">Order #${order.id.slice(0, 8).toUpperCase()}</h3>
-                                        <p class="text-sm text-gray-500">${items.length} item${items.length !== 1 ? 's' : ''}</p>
-                                    </div>
-                                </div>
-                                <div class="text-right">
-                                    <p class="font-bold text-lg">$${(order.total || 0).toFixed(2)}</p>
-                                    <p class="text-sm text-gray-500">${new Date(order.created_at).toLocaleDateString()}</p>
-                                </div>
-                            </div>
-                            <div class="mt-4 flex items-center justify-between">
-                                <span class="px-3 py-1 rounded-full text-sm font-medium ${statusClass}">
-                                    ${order.status || 'Pending'}
-                                </span>
-                                <span class="text-brand-500 text-sm font-medium">
-                                    View Details <i class="fas fa-chevron-right ml-1"></i>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                `;
-            }).join('');
-        }
-        function getStatusClass(status) {
-            const classes = {
-                pending: 'bg-yellow-100 text-yellow-800',
-                processing: 'bg-blue-100 text-blue-800',
-                shipped: 'bg-purple-100 text-purple-800',
-                delivered: 'bg-green-100 text-green-800',
-                cancelled: 'bg-red-100 text-red-800'
-            };
-            return classes[(status || 'pending').toLowerCase()] || 'bg-gray-100 text-gray-800';
-        }
-        async function viewOrder(orderId) {
-            const order = allOrders.find(o => o.id === orderId);
-            if (!order) return;
-            const items = order.buyers_order_items || [];
-            const statusClass = getStatusClass(order.status);
-            document.getElementById('orderModalContent').innerHTML = `
-                <div class="space-y-6">
-                    <div class="flex justify-between items-start">
-                        <div>
-                            <p class="text-sm text-gray-500">Order ID</p>
-                            <p class="font-mono font-bold">#${order.id.slice(0, 8).toUpperCase()}</p>
-                        </div>
-                        <span class="px-3 py-1 rounded-full text-sm font-medium ${statusClass}">
-                            ${order.status || 'Pending'}
-                        </span>
-                    </div>
-                    <div class="border-t pt-4">
-                        <h4 class="font-semibold mb-3">Order Items</h4>
-                        <div class="space-y-3">
-                            ${items.map(item => `
-                                <div class="flex items-center gap-3">
-                                    <img src="${item.product_image || item.products?.image_url || item.products?.image || 'https://via.placeholder.com/60'}"
-                                         alt="${item.product_name || item.products?.name || 'Product'}"
-                                         class="w-16 h-16 rounded-lg object-cover">
-                                    <div class="flex-1">
-                                        <p class="font-medium">${item.product_name || item.products?.name || 'Unknown Product'}</p>
-                                        <p class="text-sm text-gray-500">Qty: ${item.quantity}</p>
-                                    </div>
-                                    <p class="font-semibold">$${(item.price * item.quantity).toFixed(2)}</p>
-                                </div>
-                            `).join('')}
-                        </div>
-                    </div>
-                    <div class="border-t pt-4 space-y-2">
-                        <div class="flex justify-between">
-                            <span class="text-gray-500">Subtotal</span>
-                            <span>$${(order.subtotal || order.total || 0).toFixed(2)}</span>
-                        </div>
-                        <div class="flex justify-between">
-                            <span class="text-gray-500">Shipping</span>
-                            <span>$${(order.shipping || 0).toFixed(2)}</span>
-                        </div>
-                        <div class="flex justify-between">
-                            <span class="text-gray-500">Tax</span>
-                            <span>$${(order.tax || 0).toFixed(2)}</span>
-                        </div>
-                        <div class="flex justify-between font-bold text-lg pt-2 border-t">
-                            <span>Total</span>
-                            <span>$${(order.total || 0).toFixed(2)}</span>
-                        </div>
-                    </div>
-                    <div class="border-t pt-4">
-                        <h4 class="font-semibold mb-2">Order Date</h4>
-                        <p class="text-gray-600">${new Date(order.created_at).toLocaleString()}</p>
-                    </div>
-                    ${order.tracking_number ? `
-                        <div class="border-t pt-4">
-                            <h4 class="font-semibold mb-2">Tracking Number</h4>
-                            <p class="font-mono text-brand-500">${order.tracking_number}</p>
-                        </div>
-                    ` : ''}
-                    <div class="flex gap-3 pt-4">
-                        <button onclick="closeOrderModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
-                            Close
-                        </button>
-                        ${order.status === 'delivered' ? `
-                            <button class="flex-1 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600">
-                                Write Review
-                            </button>
-                        ` : ''}
-                    </div>
-                </div>
-            `;
-            document.getElementById('orderModal').classList.remove('hidden');
-        }
-        function closeOrderModal() {
-            document.getElementById('orderModal').classList.add('hidden');
-        }
-        async function updateCartCount() {
-            const count = await window.Cart.getCartCount();
-            const el = document.getElementById('cartCount');
-            if (el) el.textContent = count;
-        }
-        // Close modal on outside click
-        document.getElementById('orderModal').addEventListener('click', (e) => {
-            if (e.target.id === 'orderModal') closeOrderModal();
-        });
-    </script>
-</body>
-</html>

Eesha buying folder/product.html DELETED Viewed

@@ -1,355 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Product Details - Cellex | Nigeria's #1 Marketplace</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="../js/config/edge-functions.js?v=3"></script>
-    <script src="../js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
-        body {
-            background-color: #f5f5f5;
-        }
-    </style>
-</head>
-<body>
-    <!-- Header (personalized like index.html) -->
-    <header class="bg-white shadow-md fixed top-0 left-0 right-0 z-50">
-        <nav class="container mx-auto px-4 py-4">
-            <div class="flex items-center justify-between">
-                <!-- Logo -->
-                <div class="flex items-center">
-                    <a href="../index.html" class="flex items-center gap-2 group">
-                        <div class="w-10 h-10 flex items-center justify-center">
-                            <svg viewBox="0 0 60 60" class="w-full h-full">
-                                <defs>
-                                    <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                        <stop offset="0%" stop-color="#fbbf24"/>
-                                        <stop offset="50%" stop-color="#f59e0b"/>
-                                        <stop offset="100%" stop-color="#d97706"/>
-                                    </linearGradient>
-                                    <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                        <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                        <feMerge>
-                                            <feMergeNode in="coloredBlur"/>
-                                            <feMergeNode in="SourceGraphic"/>
-                                        </feMerge>
-                                    </filter>
-                                </defs>
-                                <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                                      fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                                <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                                      fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                                <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                                      fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                                <g transform="translate(52, 8)">
-                                    <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#fbbf24"/>
-                                </g>
-                            </svg>
-                        </div>
-                        <div class="flex flex-col">
-                            <span class="text-xl font-extrabold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent leading-tight">Cellex</span>
-                            <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                        </div>
-                    </a>
-                </div>
-                <!-- Search Bar -->
-                <div class="hidden md:flex flex-1 max-w-xl mx-8">
-                    <div class="relative w-full">
-                        <input type="text" placeholder="Search products..." id="searchInput"
-                               class="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-brand-500">
-                        <button class="absolute right-0 top-0 bottom-0 px-4 bg-brand-500 text-white rounded-r-lg" aria-label="Search">
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </div>
-                </div>
-                <!-- Navigation Links / Auth -->
-                <div class="flex items-center space-x-6" id="auth-links">
-                    <a href="login.html" class="hidden md:block text-gray-600 hover:text-brand-500" id="login-link">
-                        <i class="fas fa-user mr-2"></i>Login
-                    </a>
-                    <a href="signup.html" class="hidden md:block text-gray-600 hover:text-brand-500" id="signup-link">
-                        <i class="fas fa-user-plus mr-2"></i>Sign Up
-                    </a>
-                    <div id="user-menu" class="hidden relative">
-                        <button id="user-menu-button" class="flex items-center space-x-2 text-gray-600 hover:text-brand-500" aria-label="Open user menu">
-                            <i class="fas fa-user-circle text-xl"></i>
-                            <span id="user-email" class="hidden md:block"></span>
-                        </button>
-                        <div id="user-menu-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1">
-                            <a href="#" id="logout-button" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
-                        </div>
-                    </div>
-                    <a href="cart.html" class="relative text-gray-600 hover:text-brand-500">
-                        <i class="fas fa-shopping-cart text-xl"></i>
-                        <span id="cartCount" class="absolute -top-2 -right-2 bg-brand-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                    </a>
-                    <button class="md:hidden text-gray-600" id="mobileMenuBtn" aria-label="Toggle mobile menu">
-                        <i class="fas fa-bars text-xl"></i>
-                    </button>
-                </div>
-            </div>
-            <!-- Mobile Menu -->
-            <div class="md:hidden hidden" id="mobileMenu">
-                <div class="px-4 py-2 bg-custom-red-50">
-                    <div class="flex flex-col space-y-4" id="mobile-auth-links">
-                        <a href="login.html" class="text-gray-600">Login</a>
-                        <a href="signup.html" class="text-gray-600">Sign Up</a>
-                        <a href="#" id="mobile-logout-button" class="text-gray-600 hidden">Logout</a>
-                        <div class="border-t border-gray-200 pt-2">
-                            <a href="#" class="block py-2 text-gray-600">Electronics</a>
-                            <a href="#" class="block py-2 text-gray-600">Fashion</a>
-                            <a href="#" class="block py-2 text-gray-600">Home & Living</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </nav>
-    </header>
-    <!-- Product Details -->
-    <main class="container mx-auto px-4 py-8">
-        <div class="bg-white rounded-xl shadow-lg p-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
-            <!-- Loading Skeleton -->
-            <div id="loadingSkeleton" class="animate-pulse">
-                <div class="bg-gray-200 rounded-lg w-full aspect-square mb-4"></div>
-                <div class="grid grid-cols-5 gap-2">
-                    <div class="bg-gray-200 rounded aspect-square"></div>
-                    <div class="bg-gray-200 rounded aspect-square"></div>
-                    <div class="bg-gray-200 rounded aspect-square"></div>
-                    <div class="bg-gray-200 rounded aspect-square"></div>
-                    <div class="bg-gray-200 rounded aspect-square"></div>
-                </div>
-            </div>
-            <!-- Product Images -->
-            <div id="productImagesContainer" class="sticky top-24 hidden">
-                <div class="rounded-lg overflow-hidden mb-4">
-                    <img id="mainImage" src="" alt="Product" class="w-full h-auto object-cover">
-                </div>
-                <div id="thumbnailContainer" class="grid grid-cols-5 gap-2"></div>
-            </div>
-            <!-- Product Info -->
-            <div class="space-y-6">
-                <!-- Loading Text -->
-                <div id="loadingText" class="animate-pulse">
-                    <div class="h-4 bg-gray-200 rounded w-1/4 mb-2"></div>
-                    <div class="h-8 bg-gray-200 rounded w-3/4"></div>
-                </div>
-                <div id="productInfo" class="hidden">
-                    <span id="productCategory" class="text-gray-500 text-sm"></span>
-                    <h1 id="productName" class="text-2xl md:text-3xl font-bold mt-2"></h1>
-                </div>
-                <!-- Rating & Reviews -->
-                <div class="flex items-center gap-2" id="productRating">
-                    <div class="text-yellow-400"></div>
-                    <span class="text-gray-600"></span>
-                </div>
-                <!-- Price -->
-                <div id="priceSection" class="hidden">
-                    <div class="flex items-baseline gap-4">
-                        <span id="productPrice" class="text-3xl md:text-4xl font-bold text-brand-500"></span>
-                        <span id="originalPrice" class="text-gray-400 line-through text-lg"></span>
-                        <span id="discountBadge" class="bg-brand-500 text-white text-sm px-2 py-1 rounded"></span>
-                    </div>
-                </div>
-                <!-- Description -->
-                <div id="descriptionSection" class="hidden">
-                    <h3 class="font-semibold text-lg mb-2">Description</h3>
-                    <p id="productDescription" class="text-gray-600 leading-relaxed"></p>
-                </div>
-                <!-- Quantity Selector -->
-                <div class="flex items-center gap-4">
-                    <span class="font-semibold">Quantity:</span>
-                    <div class="flex items-center border rounded-lg">
-                        <button onclick="decreaseQty()" class="px-4 py-2 hover:bg-gray-100 transition" aria-label="Decrease quantity">-</button>
-                        <span id="quantity" class="px-6 py-2 border-x font-semibold">1</span>
-                        <button onclick="increaseQty()" class="px-4 py-2 hover:bg-gray-100 transition" aria-label="Increase quantity">+</button>
-                    </div>
-                </div>
-                <!-- Action Buttons -->
-                <div class="flex gap-4">
-                    <button onclick="addToCart()" class="flex-1 bg-brand-500 text-white py-3 rounded-lg hover:bg-opacity-90 transition flex items-center justify-center gap-2">
-                        <i class="fas fa-shopping-cart"></i>
-                        Add to Cart
-                    </button>
-                    <button onclick="toggleWishlist()" class="px-4 py-3 border-2 border-brand-500 text-brand-500 rounded-lg hover:bg-brand-500 hover:text-white transition" aria-label="Add to wishlist">
-                        <i class="fas fa-heart"></i>
-                    </button>
-                </div>
-                <!-- Share & Group Buy buttons (Phase 2) -->
-                <div class="flex gap-2 flex-wrap mt-3" id="phase2-actions">
-                    <button onclick="shareProduct('whatsapp')" class="px-3 py-2 bg-green-500 text-white rounded-lg text-sm font-medium hover:bg-green-600 transition flex items-center gap-1.5">
-                        <i class="fab fa-whatsapp"></i> Share on WhatsApp
-                    </button>
-                    <button onclick="shareProduct('telegram')" class="px-3 py-2 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition flex items-center gap-1.5">
-                        <i class="fab fa-telegram"></i> Telegram
-                    </button>
-                    <button onclick="copyShareLink()" class="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition flex items-center gap-1.5">
-                        <i class="fas fa-link"></i> Copy link
-                    </button>
-                    <button onclick="startGroupBuy()" class="px-3 py-2 bg-gradient-to-r from-amber-400 to-amber-600 text-ink-900 rounded-lg text-sm font-bold hover:opacity-90 transition flex items-center gap-1.5">
-                        <i class="fas fa-users"></i> Start group buy · 20% off
-                    </button>
-                </div>
-                <!-- Active group buys for this product -->
-                <div id="activeGroupBuys" class="mt-3 hidden"></div>
-                <!-- Shipping & Policy -->
-                <div class="border-t pt-6 space-y-4">
-                    <div class="flex items-start gap-3">
-                        <i class="fas fa-truck text-brand-500 mt-1"></i>
-                        <div>
-                            <h4 class="font-semibold">Free Shipping</h4>
-                            <p class="text-sm text-gray-600">Estimated delivery: 3-5 business days</p>
-                        </div>
-                    </div>
-                    <div class="flex items-start gap-3">
-                        <i class="fas fa-shield-alt text-brand-500 mt-1"></i>
-                        <div>
-                            <h4 class="font-semibold">Secure Payment</h4>
-                            <p class="text-sm text-gray-600">Safe & secure checkout</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Reviews & Ratings (Phase 2) -->
-        <section class="mt-8 bg-white rounded-xl shadow-lg p-6">
-            <div class="flex items-center justify-between mb-4">
-                <h2 class="text-xl font-bold">Ratings & Reviews</h2>
-                <button onclick="openReviewModal()" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-opacity-90 transition">
-                    <i class="fas fa-pen mr-1"></i> Write a review
-                </button>
-            </div>
-            <div id="reviewsSummary" class="mb-4 hidden">
-                <div class="flex items-center gap-4">
-                    <div class="text-center">
-                        <div class="text-4xl font-bold text-amber-500" id="reviewsAvg">0.0</div>
-                        <div class="text-yellow-400 text-sm" id="reviewsStars"></div>
-                        <div class="text-gray-500 text-xs mt-1" id="reviewsCount">0 reviews</div>
-                    </div>
-                    <div class="text-sm text-gray-600 max-w-md" id="reviewsBlurb">
-                        Be the first to review this product.
-                    </div>
-                </div>
-            </div>
-            <div id="reviewsList" class="space-y-4">
-                <div class="text-gray-500 text-sm">Loading reviews…</div>
-            </div>
-        </section>
-    </main>
-    <!-- Review Modal -->
-    <div id="reviewModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
-        <div class="bg-white rounded-xl shadow-2xl w-full max-w-md p-6">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-bold">Write a review</h3>
-                <button onclick="closeReviewModal()" class="text-gray-400 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <form id="reviewForm" class="space-y-3">
-                <div>
-                    <label class="block text-sm font-medium mb-1">Rating</label>
-                    <div class="flex gap-1" id="starPicker">
-                        <button type="button" data-star="1" class="text-2xl text-gray-300 hover:text-amber-400">★</button>
-                        <button type="button" data-star="2" class="text-2xl text-gray-300 hover:text-amber-400">★</button>
-                        <button type="button" data-star="3" class="text-2xl text-gray-300 hover:text-amber-400">★</button>
-                        <button type="button" data-star="4" class="text-2xl text-gray-300 hover:text-amber-400">★</button>
-                        <button type="button" data-star="5" class="text-2xl text-gray-300 hover:text-amber-400">★</button>
-                    </div>
-                    <input type="hidden" id="reviewRating" value="0">
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1">Title (optional)</label>
-                    <input type="text" id="reviewTitle" class="w-full px-3 py-2 border rounded-lg" placeholder="Summarize your experience">
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-1">Comment</label>
-                    <textarea id="reviewComment" rows="3" class="w-full px-3 py-2 border rounded-lg" placeholder="What did you like or dislike?"></textarea>
-                </div>
-                <div id="reviewError" class="text-sm text-red-500 hidden"></div>
-                <button type="submit" class="w-full bg-brand-500 text-white py-2 rounded-lg font-medium hover:bg-opacity-90">
-                    Submit review
-                </button>
-            </form>
-        </div>
-    </div>
-    <!-- AI Assistant -->
-    <div class="fixed bottom-6 right-6 z-50" id="aiAssistant">
-        <button class="w-14 h-14 bg-brand-500 text-white rounded-full shadow-lg hover:bg-opacity-90 transition" id="aiToggle" aria-label="Open AI assistant">
-            <i class="fas fa-comment-dots text-2xl"></i>
-        </button>
-        <div class="hidden absolute bottom-16 right-0 w-96 bg-white rounded-lg shadow-xl" id="aiChat">
-            <div class="flex items-center justify-between p-4 border-b">
-                <h3 class="font-semibold text-lg">AI Shopping Assistant</h3>
-                <button class="text-gray-500 hover:text-gray-700" id="aiClose" aria-label="Close AI assistant">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="h-96 p-4 overflow-y-auto" id="aiMessages"></div>
-            <div class="p-4 border-t flex gap-2">
-                <input type="text" id="aiInput" placeholder="Ask me anything..."
-                    class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:border-brand-500">
-                <button id="aiSend" class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-opacity-90" aria-label="Send message">
-                    <i class="fas fa-paper-plane"></i>
-                </button>
-            </div>
-        </div>
-    </div>
-    <script src="../js/cart.js"></script>
-    <script src="js/product.js"></script>
-</body>
-</html>

Eesha buying folder/profile.html DELETED Viewed

@@ -1,356 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Profile - Cellex | Nigeria's #1 Marketplace</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="../js/config/edge-functions.js?v=3"></script>
-    <script src="../js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
-        .loading { animation: spin 1s linear infinite; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-    </style>
-</head>
-<body class="bg-gray-100 min-h-screen">
-    <!-- Header -->
-    <header class="bg-white shadow-md sticky top-0 z-50">
-        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
-            <a href="../index.html" class="flex items-center gap-2 group">
-                <div class="w-10 h-10 flex items-center justify-center">
-                    <svg viewBox="0 0 60 60" class="w-full h-full">
-                        <defs>
-                            <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                <stop offset="0%" stop-color="#fbbf24"/>
-                                <stop offset="50%" stop-color="#f59e0b"/>
-                                <stop offset="100%" stop-color="#d97706"/>
-                            </linearGradient>
-                            <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                <feMerge>
-                                    <feMergeNode in="coloredBlur"/>
-                                    <feMergeNode in="SourceGraphic"/>
-                                </feMerge>
-                            </filter>
-                        </defs>
-                        <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                              fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                        <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                              fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                        <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                              fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                        <g transform="translate(52, 8)">
-                            <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#fbbf24"/>
-                        </g>
-                    </svg>
-                </div>
-                <div class="flex flex-col">
-                    <span class="text-xl font-extrabold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent leading-tight">Cellex</span>
-                    <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                </div>
-            </a>
-            <div class="flex items-center gap-4">
-                <a href="../index.html" class="text-gray-600 hover:text-brand-500">
-                    <i class="fas fa-home text-xl"></i>
-                </a>
-                <a href="cart.html" class="text-gray-600 hover:text-brand-500 relative">
-                    <i class="fas fa-shopping-cart text-xl"></i>
-                    <span id="cartCount" class="absolute -top-2 -right-2 bg-brand-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                </a>
-            </div>
-        </nav>
-    </header>
-    <!-- Main Content -->
-    <main class="container mx-auto px-4 py-8">
-        <!-- Back Link -->
-        <a href="../index.html" class="inline-flex items-center text-gray-600 hover:text-brand-500 mb-6">
-            <i class="fas fa-arrow-left mr-2"></i> Back to Home
-        </a>
-        <!-- Profile Card -->
-        <div class="max-w-4xl mx-auto">
-            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
-                <!-- Profile Header -->
-                <div class="bg-gradient-to-r from-primary to-red-400 p-8 text-white">
-                    <div class="flex flex-col md:flex-row items-center gap-6">
-                        <div class="relative">
-                            <div id="avatarLarge" class="w-32 h-32 rounded-full bg-white text-brand-500 text-5xl font-bold flex items-center justify-center border-4 border-white shadow-lg">
-                                U
-                            </div>
-                            <button id="changePhotoBtn" class="absolute bottom-0 right-0 bg-white text-brand-500 rounded-full p-2 shadow-lg hover:bg-gray-100">
-                                <i class="fas fa-camera"></i>
-                            </button>
-                        </div>
-                        <div class="text-center md:text-left">
-                            <h1 id="userName" class="text-3xl font-bold">Loading...</h1>
-                            <p id="userEmail" class="text-white/80 mt-1">Loading...</p>
-                            <span class="inline-block mt-2 bg-white/20 px-3 py-1 rounded-full text-sm">
-                                <i class="fas fa-crown mr-1"></i> Member since <span id="memberSince">2024</span>
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                <!-- Profile Stats -->
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 p-6 border-b">
-                    <div class="text-center p-4 bg-gray-50 rounded-lg">
-                        <i class="fas fa-shopping-bag text-2xl text-brand-500 mb-2"></i>
-                        <p id="totalOrders" class="text-2xl font-bold">0</p>
-                        <p class="text-gray-500 text-sm">Orders</p>
-                    </div>
-                    <div class="text-center p-4 bg-gray-50 rounded-lg">
-                        <i class="fas fa-heart text-2xl text-red-400 mb-2"></i>
-                        <p id="totalWishlist" class="text-2xl font-bold">0</p>
-                        <p class="text-gray-500 text-sm">Wishlist</p>
-                    </div>
-                    <div class="text-center p-4 bg-gray-50 rounded-lg">
-                        <i class="fas fa-star text-2xl text-yellow-400 mb-2"></i>
-                        <p id="totalReviews" class="text-2xl font-bold">0</p>
-                        <p class="text-gray-500 text-sm">Reviews</p>
-                    </div>
-                    <div class="text-center p-4 bg-gray-50 rounded-lg">
-                        <i class="fas fa-wallet text-2xl text-green-500 mb-2"></i>
-                        <p id="totalSpent" class="text-2xl font-bold">$0</p>
-                        <p class="text-gray-500 text-sm">Spent</p>
-                    </div>
-                </div>
-                <!-- Profile Form -->
-                <form id="profileForm" class="p-6 space-y-6">
-                    <h2 class="text-xl font-semibold mb-4">
-                        <i class="fas fa-user-edit mr-2 text-brand-500"></i> Personal Information
-                    </h2>
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
-                            <input type="text" id="fullName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter your name">
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
-                            <input type="email" id="emailDisplay" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100" disabled>
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
-                            <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter your phone">
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label>
-                            <input type="date" id="dob" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
-                        </div>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
-                        <textarea id="address" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter your address"></textarea>
-                    </div>
-                    <div class="grid md:grid-cols-3 gap-6">
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
-                            <input type="text" id="city" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="City">
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">State</label>
-                            <input type="text" id="state" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="State">
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">ZIP Code</label>
-                            <input type="text" id="zip" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="ZIP">
-                        </div>
-                    </div>
-                    <div class="flex justify-end gap-4 pt-4">
-                        <a href="../index.html" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</a>
-                        <button type="submit" id="saveBtn" class="px-6 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 flex items-center">
-                            <span>Save Changes</span>
-                            <i class="fas fa-spinner loading ml-2 hidden"></i>
-                        </button>
-                    </div>
-                </form>
-            </div>
-            <!-- Quick Actions -->
-            <div class="mt-8 grid grid-cols-2 md:grid-cols-5 gap-4">
-                <a href="orders.html" class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition text-center group">
-                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200">
-                        <i class="fas fa-box text-blue-600 text-xl"></i>
-                    </div>
-                    <h3 class="font-semibold">My Orders</h3>
-                    <p class="text-gray-500 text-sm">Track your orders</p>
-                </a>
-                <a href="wishlist.html" class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition text-center group">
-                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-red-200">
-                        <i class="fas fa-heart text-red-500 text-xl"></i>
-                    </div>
-                    <h3 class="font-semibold">Wishlist</h3>
-                    <p class="text-gray-500 text-sm">Saved items</p>
-                </a>
-                <a href="../seller/index.html" class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition text-center group">
-                    <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-amber-200">
-                        <i class="fas fa-store text-amber-600 text-xl"></i>
-                    </div>
-                    <h3 class="font-semibold">Seller Dashboard</h3>
-                    <p class="text-gray-500 text-sm">Open your store</p>
-                </a>
-                <a href="cart.html" class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition text-center group">
-                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-green-200">
-                        <i class="fas fa-shopping-cart text-green-600 text-xl"></i>
-                    </div>
-                    <h3 class="font-semibold">My Cart</h3>
-                    <p class="text-gray-500 text-sm">View cart items</p>
-                </a>
-                <a href="settings.html" class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition text-center group">
-                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-purple-200">
-                        <i class="fas fa-cog text-purple-600 text-xl"></i>
-                    </div>
-                    <h3 class="font-semibold">Settings</h3>
-                    <p class="text-gray-500 text-sm">Account settings</p>
-                </a>
-            </div>
-        </div>
-    </main>
-    <!-- Footer -->
-    <footer class="bg-dark-900 text-white py-8 mt-12">
-        <div class="container mx-auto px-4 text-center">
-            <p>&copy; 2025 Cellex. All rights reserved.</p>
-        </div>
-    </footer>
-    <script>
-        let currentUser = null;
-        let profileStats = null;
-        document.addEventListener('DOMContentLoaded', async () => {
-            await checkAuth();
-            await loadProfile();
-            await loadStats();
-            await updateCartCount();
-        });
-        async function checkAuth() {
-            const { success, user } = await window.EdgeFunctions.auth.checkSession();
-            if (!success || !user) {
-                window.location.href = 'login.html?redirect=profile';
-                return;
-            }
-            currentUser = user;
-        }
-        async function loadProfile() {
-            if (!currentUser) return;
-            // Display basic info from auth
-            const fullName = currentUser.user_metadata?.full_name ||
-                            currentUser.user_metadata?.name ||
-                            currentUser.email?.split('@')[0] || 'User';
-            const initial = fullName.charAt(0).toUpperCase();
-            document.getElementById('userName').textContent = fullName;
-            document.getElementById('userEmail').textContent = currentUser.email;
-            document.getElementById('avatarLarge').textContent = initial;
-            document.getElementById('emailDisplay').value = currentUser.email;
-            document.getElementById('fullName').value = fullName;
-            if (currentUser.created_at) {
-                document.getElementById('memberSince').textContent = new Date(currentUser.created_at).getFullYear();
-            }
-            // Load additional profile + stats from edge function
-            const { success, profile, stats } = await window.EdgeFunctions.profile.get();
-            if (success && profile) {
-                document.getElementById('phone').value = profile.phone || '';
-                document.getElementById('dob').value = profile.dob || '';
-                document.getElementById('address').value = profile.address || '';
-                document.getElementById('city').value = profile.city || '';
-                document.getElementById('state').value = profile.state || '';
-                document.getElementById('zip').value = profile.zip || '';
-            }
-            profileStats = stats;
-        }
-        async function loadStats() {
-            if (!currentUser || !profileStats) return;
-            document.getElementById('totalOrders').textContent = profileStats.ordersCount || 0;
-            document.getElementById('totalWishlist').textContent = profileStats.wishlistCount || 0;
-            document.getElementById('totalReviews').textContent = profileStats.reviewsCount || 0;
-            document.getElementById('totalSpent').textContent = '$' + (profileStats.totalSpent || 0).toFixed(0);
-        }
-        async function updateCartCount() {
-            if (window.Cart && window.Cart.updateCartCountUI) {
-                window.Cart.updateCartCountUI();
-            }
-        }
-        // Handle form submission
-        document.getElementById('profileForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const saveBtn = document.getElementById('saveBtn');
-            const loadingIcon = saveBtn.querySelector('.loading');
-            loadingIcon.classList.remove('hidden');
-            saveBtn.disabled = true;
-            try {
-                const fullName = document.getElementById('fullName').value;
-                const { success } = await window.EdgeFunctions.profile.update({
-                    fullName,
-                    phone: document.getElementById('phone').value,
-                    address: document.getElementById('address').value
-                });
-                if (!success) throw new Error('Profile update failed');
-                alert('Profile updated successfully!');
-                document.getElementById('userName').textContent = fullName;
-                document.getElementById('avatarLarge').textContent = fullName.charAt(0).toUpperCase();
-            } catch (error) {
-                console.error('Error saving profile:', error);
-                alert('Failed to save profile. Please try again.');
-            } finally {
-                loadingIcon.classList.add('hidden');
-                saveBtn.disabled = false;
-            }
-        });
-    </script>
-</body>
-</html>

Eesha buying folder/settings.html DELETED Viewed

@@ -1,524 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Account Settings - Cellex | Nigeria's #1 Marketplace</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="../js/config/edge-functions.js?v=3"></script>
-    <script src="../js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
-        .loading { animation: spin 1s linear infinite; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-    </style>
-</head>
-<body class="bg-gray-100 min-h-screen">
-    <!-- Header -->
-    <header class="bg-white shadow-md sticky top-0 z-50">
-        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
-            <a href="../index.html" class="flex items-center gap-2 group">
-                <div class="w-10 h-10 flex items-center justify-center">
-                    <svg viewBox="0 0 60 60" class="w-full h-full">
-                        <defs>
-                            <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                <stop offset="0%" stop-color="#fbbf24"/>
-                                <stop offset="50%" stop-color="#f59e0b"/>
-                                <stop offset="100%" stop-color="#d97706"/>
-                            </linearGradient>
-                            <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                <feMerge>
-                                    <feMergeNode in="coloredBlur"/>
-                                    <feMergeNode in="SourceGraphic"/>
-                                </feMerge>
-                            </filter>
-                        </defs>
-                        <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                              fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                        <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                              fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                        <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                              fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                        <g transform="translate(52, 8)">
-                            <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#fbbf24"/>
-                        </g>
-                    </svg>
-                </div>
-                <div class="flex flex-col">
-                    <span class="text-xl font-extrabold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent leading-tight">Cellex</span>
-                    <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                </div>
-            </a>
-            <div class="flex items-center gap-4">
-                <a href="../index.html" class="text-gray-600 hover:text-brand-500">
-                    <i class="fas fa-home text-xl"></i>
-                </a>
-                <a href="cart.html" class="text-gray-600 hover:text-brand-500 relative">
-                    <i class="fas fa-shopping-cart text-xl"></i>
-                    <span id="cartCount" class="absolute -top-2 -right-2 bg-brand-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                </a>
-            </div>
-        </nav>
-    </header>
-    <!-- Main Content -->
-    <main class="container mx-auto px-4 py-8">
-        <!-- Back Link -->
-        <a href="../index.html" class="inline-flex items-center text-gray-600 hover:text-brand-500 mb-6">
-            <i class="fas fa-arrow-left mr-2"></i> Back to Home
-        </a>
-        <div class="max-w-4xl mx-auto">
-            <!-- Settings Navigation -->
-            <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
-                <div class="border-b">
-                    <div class="flex overflow-x-auto">
-                        <button onclick="showSection('account')" class="tab-btn active px-6 py-4 text-sm font-medium whitespace-nowrap border-b-2 border-brand-500 text-brand-500" data-tab="account">
-                            <i class="fas fa-user mr-2"></i> Account
-                        </button>
-                        <button onclick="showSection('security')" class="tab-btn px-6 py-4 text-sm font-medium whitespace-nowrap border-b-2 border-transparent text-gray-500 hover:text-gray-700" data-tab="security">
-                            <i class="fas fa-lock mr-2"></i> Security
-                        </button>
-                        <button onclick="showSection('notifications')" class="tab-btn px-6 py-4 text-sm font-medium whitespace-nowrap border-b-2 border-transparent text-gray-500 hover:text-gray-700" data-tab="notifications">
-                            <i class="fas fa-bell mr-2"></i> Notifications
-                        </button>
-                        <button onclick="showSection('preferences')" class="tab-btn px-6 py-4 text-sm font-medium whitespace-nowrap border-b-2 border-transparent text-gray-500 hover:text-gray-700" data-tab="preferences">
-                            <i class="fas fa-cog mr-2"></i> Preferences
-                        </button>
-                    </div>
-                </div>
-                <!-- Account Section -->
-                <div id="accountSection" class="p-6">
-                    <h2 class="text-xl font-bold mb-6">Account Settings</h2>
-                    <div class="space-y-6">
-                        <!-- Profile Info -->
-                        <div class="flex items-center gap-4 pb-6 border-b">
-                            <div id="avatarLarge" class="w-20 h-20 rounded-full bg-brand-500 text-white text-3xl font-bold flex items-center justify-center">
-                                U
-                            </div>
-                            <div>
-                                <h3 id="userName" class="text-lg font-semibold">Loading...</h3>
-                                <p id="userEmail" class="text-gray-500">Loading...</p>
-                                <a href="profile.html" class="text-brand-500 text-sm hover:underline mt-1 inline-block">
-                                    Edit Profile <i class="fas fa-arrow-right ml-1"></i>
-                                </a>
-                            </div>
-                        </div>
-                        <!-- Account Info -->
-                        <div>
-                            <h3 class="font-semibold mb-4">Account Information</h3>
-                            <div class="grid md:grid-cols-2 gap-4">
-                                <div class="bg-gray-50 p-4 rounded-lg">
-                                    <p class="text-sm text-gray-500">Email</p>
-                                    <p id="emailDisplay" class="font-medium">-</p>
-                                </div>
-                                <div class="bg-gray-50 p-4 rounded-lg">
-                                    <p class="text-sm text-gray-500">Member Since</p>
-                                    <p id="memberSince" class="font-medium">-</p>
-                                </div>
-                                <div class="bg-gray-50 p-4 rounded-lg">
-                                    <p class="text-sm text-gray-500">Account Type</p>
-                                    <p class="font-medium flex items-center gap-2">
-                                        <i class="fas fa-crown text-yellow-500"></i> Buyer Account
-                                    </p>
-                                </div>
-                                <div class="bg-gray-50 p-4 rounded-lg">
-                                    <p class="text-sm text-gray-500">Last Login</p>
-                                    <p id="lastLogin" class="font-medium">-</p>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Seller Account Link -->
-                        <div class="bg-gradient-to-r from-primary/10 to-red-100 p-6 rounded-lg border border-brand-500/20">
-                            <div class="flex items-start gap-4">
-                                <div class="w-12 h-12 bg-brand-500 rounded-full flex items-center justify-center text-white">
-                                    <i class="fas fa-store"></i>
-                                </div>
-                                <div class="flex-1">
-                                    <h3 class="font-semibold">Start Selling on Eesha</h3>
-                                    <p class="text-sm text-gray-600 mt-1">Turn your passion into profit. Create a seller account and start selling today!</p>
-                                    <a href="../eesha selling folder/merchant/signup.html" class="inline-block mt-3 bg-brand-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-brand-600">
-                                        Create Seller Account
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- Security Section -->
-                <div id="securitySection" class="p-6 hidden">
-                    <h2 class="text-xl font-bold mb-6">Security Settings</h2>
-                    <div class="space-y-6">
-                        <!-- Change Password -->
-                        <div class="border rounded-lg p-6">
-                            <h3 class="font-semibold mb-4"><i class="fas fa-key mr-2 text-brand-500"></i> Change Password</h3>
-                            <form id="passwordForm" class="space-y-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
-                                    <input type="password" id="currentPassword" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
-                                    <input type="password" id="newPassword" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
-                                    <input type="password" id="confirmPassword" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
-                                </div>
-                                <button type="submit" class="bg-brand-500 text-white px-6 py-2 rounded-lg hover:bg-brand-600">
-                                    Update Password
-                                </button>
-                            </form>
-                        </div>
-                        <!-- Two Factor Auth -->
-                        <div class="border rounded-lg p-6">
-                            <div class="flex items-center justify-between">
-                                <div>
-                                    <h3 class="font-semibold"><i class="fas fa-shield-alt mr-2 text-green-500"></i> Two-Factor Authentication</h3>
-                                    <p class="text-sm text-gray-500 mt-1">Add an extra layer of security to your account</p>
-                                </div>
-                                <span class="px-3 py-1 bg-gray-100 text-gray-500 rounded-full text-sm">Coming Soon</span>
-                            </div>
-                        </div>
-                        <!-- Active Sessions -->
-                        <div class="border rounded-lg p-6">
-                            <h3 class="font-semibold mb-4"><i class="fas fa-laptop mr-2 text-blue-500"></i> Active Sessions</h3>
-                            <div class="space-y-3">
-                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                                    <div class="flex items-center gap-3">
-                                        <i class="fas fa-desktop text-gray-400"></i>
-                                        <div>
-                                            <p class="font-medium">Current Session</p>
-                                            <p class="text-sm text-gray-500" id="currentSession">This device</p>
-                                        </div>
-                                    </div>
-                                    <span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">Active</span>
-                                </div>
-                            </div>
-                            <button onclick="signOutAllDevices()" class="mt-4 text-red-500 hover:underline text-sm">
-                                <i class="fas fa-sign-out-alt mr-1"></i> Sign out of all other devices
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Notifications Section -->
-                <div id="notificationsSection" class="p-6 hidden">
-                    <h2 class="text-xl font-bold mb-6">Notification Settings</h2>
-                    <div class="space-y-4">
-                        <div class="flex items-center justify-between p-4 border rounded-lg">
-                            <div>
-                                <h3 class="font-medium">Order Updates</h3>
-                                <p class="text-sm text-gray-500">Get notified about your order status</p>
-                            </div>
-                            <label class="relative inline-flex items-center cursor-pointer">
-                                <input type="checkbox" checked class="sr-only peer" id="orderNotifications">
-                                <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-primary rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-500"></div>
-                            </label>
-                        </div>
-                        <div class="flex items-center justify-between p-4 border rounded-lg">
-                            <div>
-                                <h3 class="font-medium">Promotional Emails</h3>
-                                <p class="text-sm text-gray-500">Receive deals and promotional offers</p>
-                            </div>
-                            <label class="relative inline-flex items-center cursor-pointer">
-                                <input type="checkbox" class="sr-only peer" id="promoNotifications">
-                                <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-primary rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-500"></div>
-                            </label>
-                        </div>
-                        <div class="flex items-center justify-between p-4 border rounded-lg">
-                            <div>
-                                <h3 class="font-medium">Price Drop Alerts</h3>
-                                <p class="text-sm text-gray-500">Get notified when items in your wishlist go on sale</p>
-                            </div>
-                            <label class="relative inline-flex items-center cursor-pointer">
-                                <input type="checkbox" checked class="sr-only peer" id="priceDropNotifications">
-                                <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-primary rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-500"></div>
-                            </label>
-                        </div>
-                        <div class="flex items-center justify-between p-4 border rounded-lg">
-                            <div>
-                                <h3 class="font-medium">Newsletter</h3>
-                                <p class="text-sm text-gray-500">Weekly updates on new products and trends</p>
-                            </div>
-                            <label class="relative inline-flex items-center cursor-pointer">
-                                <input type="checkbox" class="sr-only peer" id="newsletterNotifications">
-                                <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-primary rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-500"></div>
-                            </label>
-                        </div>
-                    </div>
-                    <button onclick="saveNotificationSettings()" class="mt-6 bg-brand-500 text-white px-6 py-2 rounded-lg hover:bg-brand-600">
-                        Save Preferences
-                    </button>
-                </div>
-                <!-- Preferences Section -->
-                <div id="preferencesSection" class="p-6 hidden">
-                    <h2 class="text-xl font-bold mb-6">Preferences</h2>
-                    <div class="space-y-6">
-                        <!-- Language -->
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-2">Language</label>
-                            <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary">
-                                <option value="en" selected>English</option>
-                                <option value="es">Spanish</option>
-                                <option value="fr">French</option>
-                            </select>
-                        </div>
-                        <!-- Currency -->
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-2">Currency</label>
-                            <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary">
-                                <option value="usd" selected>USD ($)</option>
-                                <option value="eur">EUR (&euro;)</option>
-                                <option value="gbp">GBP (&pound;)</option>
-                            </select>
-                        </div>
-                        <!-- Theme -->
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-2">Theme</label>
-                            <div class="flex gap-4">
-                                <label class="flex items-center gap-2 cursor-pointer">
-                                    <input type="radio" name="theme" value="light" checked class="text-brand-500 focus:ring-primary">
-                                    <span>Light</span>
-                                </label>
-                                <label class="flex items-center gap-2 cursor-pointer">
-                                    <input type="radio" name="theme" value="dark" class="text-brand-500 focus:ring-primary">
-                                    <span>Dark</span>
-                                </label>
-                                <label class="flex items-center gap-2 cursor-pointer">
-                                    <input type="radio" name="theme" value="system" class="text-brand-500 focus:ring-primary">
-                                    <span>System</span>
-                                </label>
-                            </div>
-                        </div>
-                        <button onclick="savePreferences()" class="bg-brand-500 text-white px-6 py-2 rounded-lg hover:bg-brand-600">
-                            Save Preferences
-                        </button>
-                    </div>
-                    <!-- Danger Zone -->
-                    <div class="mt-12 pt-6 border-t border-red-200">
-                        <h3 class="text-red-600 font-semibold mb-4"><i class="fas fa-exclamation-triangle mr-2"></i> Danger Zone</h3>
-                        <div class="bg-red-50 border border-red-200 rounded-lg p-6">
-                            <h4 class="font-medium text-red-700">Delete Account</h4>
-                            <p class="text-sm text-red-600 mt-1">Once you delete your account, there is no going back. Please be certain.</p>
-                            <button onclick="deleteAccount()" class="mt-4 bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700">
-                                <i class="fas fa-trash mr-2"></i> Delete My Account
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- Quick Links -->
-            <div class="mt-8 bg-white rounded-xl shadow-lg p-6">
-                <h3 class="font-semibold mb-4">Quick Links</h3>
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                    <a href="profile.html" class="flex items-center gap-2 text-gray-600 hover:text-brand-500 p-3 rounded-lg hover:bg-gray-50">
-                        <i class="fas fa-user"></i>
-                        <span>My Profile</span>
-                    </a>
-                    <a href="orders.html" class="flex items-center gap-2 text-gray-600 hover:text-brand-500 p-3 rounded-lg hover:bg-gray-50">
-                        <i class="fas fa-box"></i>
-                        <span>My Orders</span>
-                    </a>
-                    <a href="wishlist.html" class="flex items-center gap-2 text-gray-600 hover:text-brand-500 p-3 rounded-lg hover:bg-gray-50">
-                        <i class="fas fa-heart"></i>
-                        <span>Wishlist</span>
-                    </a>
-                    <a href="cart.html" class="flex items-center gap-2 text-gray-600 hover:text-brand-500 p-3 rounded-lg hover:bg-gray-50">
-                        <i class="fas fa-shopping-cart"></i>
-                        <span>My Cart</span>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </main>
-    <!-- Footer -->
-    <footer class="bg-dark-900 text-white py-8 mt-12">
-        <div class="container mx-auto px-4 text-center">
-            <p>&copy; 2025 Cellex. All rights reserved.</p>
-        </div>
-    </footer>
-    <script>
-        let currentUser = null;
-        document.addEventListener('DOMContentLoaded', async () => {
-            await checkAuth();
-            await loadUserInfo();
-            await updateCartCount();
-        });
-        async function checkAuth() {
-            const { success, user } = await window.EdgeFunctions.auth.checkSession();
-            if (!success || !user) {
-                window.location.href = 'login.html?redirect=settings';
-                return;
-            }
-            currentUser = user;
-        }
-        async function loadUserInfo() {
-            if (!currentUser) return;
-            const fullName = currentUser.user_metadata?.full_name ||
-                            currentUser.user_metadata?.name ||
-                            currentUser.email?.split('@')[0] || 'User';
-            const initial = fullName.charAt(0).toUpperCase();
-            document.getElementById('userName').textContent = fullName;
-            document.getElementById('userEmail').textContent = currentUser.email;
-            document.getElementById('emailDisplay').textContent = currentUser.email;
-            document.getElementById('avatarLarge').textContent = initial;
-            if (currentUser.created_at) {
-                document.getElementById('memberSince').textContent = new Date(currentUser.created_at).toLocaleDateString('en-US', {
-                    year: 'numeric',
-                    month: 'long'
-                });
-            }
-            if (currentUser.last_sign_in_at) {
-                document.getElementById('lastLogin').textContent = new Date(currentUser.last_sign_in_at).toLocaleDateString('en-US', {
-                    year: 'numeric',
-                    month: 'short',
-                    day: 'numeric'
-                });
-            }
-            document.getElementById('currentSession').textContent = navigator.userAgent.includes('Mobile') ? 'Mobile device' : 'Desktop';
-        }
-        function showSection(sectionName) {
-            // Hide all sections
-            document.querySelectorAll('[id$="Section"]').forEach(section => {
-                section.classList.add('hidden');
-            });
-            // Show selected section
-            document.getElementById(sectionName + 'Section').classList.remove('hidden');
-            // Update tab styles
-            document.querySelectorAll('.tab-btn').forEach(btn => {
-                btn.classList.remove('active', 'border-brand-500', 'text-brand-500');
-                btn.classList.add('border-transparent', 'text-gray-500');
-            });
-            const activeTab = document.querySelector(`[data-tab="${sectionName}"]`);
-            if (activeTab) {
-                activeTab.classList.add('active', 'border-brand-500', 'text-brand-500');
-                activeTab.classList.remove('border-transparent', 'text-gray-500');
-            }
-        }
-        // Password change
-        document.getElementById('passwordForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const newPassword = document.getElementById('newPassword').value;
-            const confirmPassword = document.getElementById('confirmPassword').value;
-            if (newPassword !== confirmPassword) {
-                alert('Passwords do not match!');
-                return;
-            }
-            if (newPassword.length < 6) {
-                alert('Password must be at least 6 characters');
-                return;
-            }
-            try {
-                // Password change not yet supported via edge functions
-                alert('Password change coming soon. Please contact support to update your password.');
-                document.getElementById('passwordForm').reset();
-            } catch (error) {
-                alert('Failed to update password: ' + error.message);
-            }
-        });
-        async function signOutAllDevices() {
-            if (!confirm('This will sign you out of all devices including this one. Continue?')) return;
-            try {
-                await window.EdgeFunctions.auth.logout();
-                window.location.href = 'login.html';
-            } catch (error) {
-                alert('Failed to sign out: ' + error.message);
-            }
-        }
-        function saveNotificationSettings() {
-            alert('Notification preferences saved!');
-        }
-        function savePreferences() {
-            alert('Preferences saved!');
-        }
-        function deleteAccount() {
-            alert('Account deletion coming soon. Please contact support to delete your account.');
-        }
-        async function updateCartCount() {
-            if (window.Cart && window.Cart.updateCartCountUI) {
-                window.Cart.updateCartCountUI();
-            }
-        }
-    </script>
-</body>
-</html>

Eesha buying folder/signup.html DELETED Viewed

@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sign Up - Cellex</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        .loading {
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-    </style>
-</head>
-<body class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
-    <!-- Main Container -->
-    <div class="w-full max-w-md">
-        <!-- Logo -->
-        <div class="text-center mb-8">
-            <a href="../index.html" class="inline-block">
-                <h1 class="text-4xl font-extrabold text-[#f0474a]">Cellex</h1>
-            </a>
-            <h2 class="mt-4 text-3xl font-bold text-gray-900">Create your account</h2>
-            <p class="mt-2 text-gray-600">Get started with Cellex</p>
-        </div>
-        <!-- Signup Card -->
-        <div class="bg-white shadow-xl rounded-lg p-8">
-            <!-- Email/Password Form -->
-            <form id="signupForm" class="space-y-6">
-                <div>
-                    <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
-                    <input type="email" id="email" name="email" required
-                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#f0474a] focus:border-[#f0474a]">
-                </div>
-                <div>
-                    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
-                    <input type="password" id="password" name="password" required minlength="6"
-                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#f0474a] focus:border-[#f0474a]">
-                </div>
-                <button type="submit" id="signupButton"
-                        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-[#f0474a] hover:bg-[#e43d40] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#f0474a]">
-                    <span>Sign up</span>
-                    <i class="fas fa-spinner loading ml-2 hidden"></i>
-                </button>
-                <!-- Message Area -->
-                <div id="messageArea" class="hidden text-sm text-center"></div>
-            </form>
-            <!-- Sign In Link -->
-            <p class="mt-6 text-center text-sm text-gray-600">
-                Already have an account?
-                <a href="login.html" class="font-medium text-[#f0474a] hover:underline">Sign in</a>
-            </p>
-        </div>
-    </div>
-    <!-- Scripts: Edge function client only (NO Supabase SDK) -->
-    <script src="../js/config/edge-functions.js?v=2"></script>
-    <script>
-        // Elements
-        const signupForm = document.getElementById('signupForm');
-        const signupButton = document.getElementById('signupButton');
-        const messageArea = document.getElementById('messageArea');
-        const loadingIcon = signupButton.querySelector('.loading');
-        // Helper Functions
-        function showMessage(message, isError = true) {
-            messageArea.textContent = message;
-            messageArea.classList.remove('hidden', 'text-red-600', 'text-green-600');
-            messageArea.classList.add(isError ? 'text-red-600' : 'text-green-600');
-        }
-        function hideMessage() {
-            messageArea.classList.add('hidden');
-        }
-        function setLoading(isLoading) {
-            loadingIcon.classList.toggle('hidden', !isLoading);
-            signupButton.disabled = isLoading;
-        }
-        // Email/Password Sign Up via edge function
-        async function performSignUp() {
-            hideMessage();
-            setLoading(true);
-            const email = document.getElementById('email').value.trim();
-            const password = document.getElementById('password').value;
-            try {
-                const result = await window.EdgeFunctions.auth.signup(email, password);
-                if (!result.success) {
-                    showMessage(result.error || 'Failed to sign up');
-                    return;
-                }
-                // Check if user got a session (some Supabase configs require email verification)
-                if (result.session) {
-                    // User is logged in immediately
-                    showMessage('Sign-up successful! Redirecting...', false);
-                    setTimeout(() => { window.location.href = '../index.html'; }, 1500);
-                } else {
-                    // Email verification required
-                    showMessage('Sign-up successful! Please check your email for a verification link.', false);
-                    signupForm.reset();
-                }
-            } catch (err) {
-                showMessage(err.message || 'Failed to sign up');
-            } finally {
-                setLoading(false);
-            }
-        }
-        signupForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            await performSignUp();
-        });
-        signupButton.type = 'button';
-        signupButton.addEventListener('click', async (e) => {
-            e.preventDefault();
-            await performSignUp();
-        });
-    </script>
-</body>
-</html>

Eesha buying folder/wishlist.html DELETED Viewed

@@ -1,315 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Wishlist - Cellex | Nigeria's #1 Marketplace</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="../js/config/edge-functions.js?v=3"></script>
-    <script src="../js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
-        .loading { animation: spin 1s linear infinite; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-    </style>
-</head>
-<body class="bg-gray-100 min-h-screen">
-    <!-- Header -->
-    <header class="bg-white shadow-md sticky top-0 z-50">
-        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
-            <a href="../index.html" class="flex items-center gap-2 group">
-                <div class="w-10 h-10 flex items-center justify-center">
-                    <svg viewBox="0 0 60 60" class="w-full h-full">
-                        <defs>
-                            <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                <stop offset="0%" stop-color="#fbbf24"/>
-                                <stop offset="50%" stop-color="#f59e0b"/>
-                                <stop offset="100%" stop-color="#d97706"/>
-                            </linearGradient>
-                            <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                <feMerge>
-                                    <feMergeNode in="coloredBlur"/>
-                                    <feMergeNode in="SourceGraphic"/>
-                                </feMerge>
-                            </filter>
-                        </defs>
-                        <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                              fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                        <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                              fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                        <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                              fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                        <g transform="translate(52, 8)">
-                            <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#fbbf24"/>
-                        </g>
-                    </svg>
-                </div>
-                <div class="flex flex-col">
-                    <span class="text-xl font-extrabold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent leading-tight">Cellex</span>
-                    <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                </div>
-            </a>
-            <div class="flex items-center gap-4">
-                <a href="../index.html" class="text-gray-600 hover:text-brand-500">
-                    <i class="fas fa-home text-xl"></i>
-                </a>
-                <a href="cart.html" class="text-gray-600 hover:text-brand-500 relative">
-                    <i class="fas fa-shopping-cart text-xl"></i>
-                    <span id="cartCount" class="absolute -top-2 -right-2 bg-brand-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                </a>
-            </div>
-        </nav>
-    </header>
-    <!-- Main Content -->
-    <main class="container mx-auto px-4 py-8">
-        <!-- Back Link -->
-        <a href="../index.html" class="inline-flex items-center text-gray-600 hover:text-brand-500 mb-6">
-            <i class="fas fa-arrow-left mr-2"></i> Back to Home
-        </a>
-        <div class="max-w-6xl mx-auto">
-            <!-- Page Title -->
-            <div class="flex justify-between items-center mb-6">
-                <div>
-                    <h1 class="text-3xl font-bold text-gray-900">My Wishlist</h1>
-                    <p class="text-gray-500 mt-1"><span id="wishlistCount">0</span> items saved</p>
-                </div>
-                <div class="flex gap-2">
-                    <button id="shareWishlistBtn" onclick="shareMyWishlist()" class="px-4 py-2 bg-gradient-to-r from-amber-400 to-amber-600 text-ink-900 font-bold rounded-lg hover:opacity-90 transition">
-                        <i class="fas fa-share-alt mr-1"></i> Share wishlist
-                    </button>
-                    <button id="clearAllBtn" class="px-4 py-2 text-red-500 hover:bg-red-50 rounded-lg hidden">
-                        <i class="fas fa-trash mr-2"></i> Clear All
-                    </button>
-                </div>
-            </div>
-            <!-- Wishlist Grid -->
-            <div id="wishlistGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                <!-- Loading state -->
-                <div class="col-span-full bg-white rounded-lg shadow p-8 text-center">
-                    <i class="fas fa-spinner loading text-4xl text-brand-500 mb-4"></i>
-                    <p class="text-gray-500">Loading your wishlist...</p>
-                </div>
-            </div>
-        </div>
-    </main>
-    <!-- Footer -->
-    <footer class="bg-dark-900 text-white py-8 mt-12">
-        <div class="container mx-auto px-4 text-center">
-            <p>&copy; 2025 Cellex. All rights reserved.</p>
-        </div>
-    </footer>
-    <script>
-        let currentUser = null;
-        document.addEventListener('DOMContentLoaded', async () => {
-            await checkAuth();
-            await loadWishlist();
-            await updateCartCount();
-        });
-        async function checkAuth() {
-            const { success, user } = await window.EdgeFunctions.auth.checkSession();
-            if (!success || !user) {
-                window.location.href = 'login.html?redirect=wishlist';
-                return;
-            }
-            currentUser = user;
-        }
-        async function loadWishlist() {
-            if (!currentUser) return;
-            const result = await window.EdgeFunctions.wishlist.get();
-            if (!result.success) {
-                console.error('Error loading wishlist:', result.error);
-                document.getElementById('wishlistGrid').innerHTML = `
-                    <div class="col-span-full bg-white rounded-lg shadow p-8 text-center text-red-500">
-                        <i class="fas fa-exclamation-circle text-4xl mb-4"></i>
-                        <p>Failed to load wishlist. Please try again.</p>
-                    </div>
-                `;
-                return;
-            }
-            const wishlist = result.items || [];
-            document.getElementById('wishlistCount').textContent = wishlist.length;
-            document.getElementById('clearAllBtn').classList.toggle('hidden', !wishlist.length);
-            if (wishlist.length === 0) {
-                document.getElementById('wishlistGrid').innerHTML = `
-                    <div class="col-span-full bg-white rounded-lg shadow p-8 text-center">
-                        <i class="fas fa-heart text-6xl text-gray-300 mb-4"></i>
-                        <h3 class="text-xl font-semibold text-gray-700 mb-2">Your wishlist is empty</h3>
-                        <p class="text-gray-500 mb-6">Save items you love to buy them later!</p>
-                        <a href="../index.html" class="inline-block bg-brand-500 text-white px-6 py-2 rounded-lg hover:bg-brand-600">
-                            Start Shopping
-                        </a>
-                    </div>
-                `;
-                return;
-            }
-            document.getElementById('wishlistGrid').innerHTML = wishlist.map(item => {
-                const product = item.products;
-                if (!product) return '';
-                return `
-                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition group">
-                        <div class="relative">
-                            <img src="${product.image_url || product.image || 'https://via.placeholder.com/300'}"
-                                 alt="${product.name}"
-                                 class="w-full h-48 object-cover cursor-pointer"
-                                 onclick="viewProduct('${product.id}')">
-                            <button onclick="removeFromWishlist('${item.id}')"
-                                    class="absolute top-2 right-2 w-8 h-8 bg-white rounded-full shadow flex items-center justify-center text-red-500 hover:bg-red-50">
-                                <i class="fas fa-times"></i>
-                            </button>
-                            ${product.stock === 0 ? `
-                                <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
-                                    <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm">Out of Stock</span>
-                                </div>
-                            ` : ''}
-                        </div>
-                        <div class="p-4">
-                            <p class="text-xs text-gray-500 uppercase tracking-wide">${product.category || 'Category'}</p>
-                            <h3 class="font-semibold text-gray-900 mt-1 cursor-pointer hover:text-brand-500" onclick="viewProduct('${product.id}')">
-                                ${product.name}
-                            </h3>
-                            <div class="flex items-center justify-between mt-3">
-                                <span class="text-xl font-bold text-brand-500">$${(product.price || 0).toFixed(2)}</span>
-                            </div>
-                            <button onclick="addToCart('${product.id}', '${product.stock}')"
-                                    class="w-full mt-4 py-2 rounded-lg text-center font-medium transition
-                                    ${product.stock === 0
-                                        ? 'bg-gray-200 text-gray-500 cursor-not-allowed'
-                                        : 'bg-brand-500 text-white hover:bg-brand-600'}">
-                                <i class="fas fa-cart-plus mr-2"></i>
-                                ${product.stock === 0 ? 'Out of Stock' : 'Add to Cart'}
-                            </button>
-                        </div>
-                    </div>
-                `;
-            }).join('');
-        }
-        function viewProduct(productId) {
-            window.location.href = `product.html?id=${productId}`;
-        }
-        async function removeFromWishlist(wishlistId) {
-            if (!confirm('Remove this item from your wishlist?')) return;
-            const result = await window.EdgeFunctions.wishlist.remove(wishlistId);
-            if (!result.success) {
-                alert('Failed to remove item. Please try again.');
-                return;
-            }
-            loadWishlist();
-        }
-        async function addToCart(productId, stock) {
-            if (stock === '0') return;
-            try {
-                const result = await window.Cart.addToCart(productId, 1);
-                if (!result.success) {
-                    alert(result.message || 'Failed to add to cart. Please try again.');
-                    return;
-                }
-                alert('Added to cart!');
-                updateCartCount();
-            } catch (error) {
-                console.error('Error adding to cart:', error);
-                alert('Failed to add to cart. Please try again.');
-            }
-        }
-        document.getElementById('clearAllBtn').addEventListener('click', async () => {
-            if (!confirm('Are you sure you want to clear your entire wishlist?')) return;
-            // The edge function only exposes single-item removal; loop over items.
-            const result = await window.EdgeFunctions.wishlist.get();
-            if (!result.success) {
-                alert('Failed to clear wishlist. Please try again.');
-                return;
-            }
-            const items = result.items || [];
-            for (const item of items) {
-                await window.EdgeFunctions.wishlist.remove(item.id);
-            }
-            loadWishlist();
-        });
-        async function updateCartCount() {
-            if (typeof window.Cart !== 'undefined' && window.Cart.updateCartCountUI) {
-                await window.Cart.updateCartCountUI();
-            }
-        }
-        // Phase 2 — share wishlist
-        async function shareMyWishlist() {
-            const r = await window.EdgeFunctions.wishlistShare.share('My Cellex Wishlist');
-            if (!r.success) {
-                alert('Failed to create share link: ' + (r.error || ''));
-                return;
-            }
-            const url = `${window.location.origin}${r.url}`;
-            // Open WhatsApp share
-            const text = `🛍️ Check out my wishlist on Cellex! ${url}`;
-            window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
-            // Also copy to clipboard
-            try {
-                await navigator.clipboard.writeText(url);
-                alert('Share link copied!\n\nShare it with friends: ' + url);
-            } catch {
-                window.prompt('Copy your share link:', url);
-            }
-        }
-    </script>
-</body>
-</html>

README.md CHANGED Viewed

@@ -1,32 +1,56 @@
 ---
 title: Cellex Web
-emoji: 🛒
-colorFrom: yellow
-colorTo: red
 sdk: docker
 pinned: false
-license: apache-2.0
-short_description: Cellex - Nigeria's #1 Marketplace
 ---
-# Cellex Web Server
-Serves the Cellex frontend (static files) + proxies `/api/*` requests to Supabase Edge Functions.
 ## Architecture
-```
-Browser → cellex-web.hf.space → web-server/server.py
-                                ├── /api/* → Supabase Edge Functions (with anon key from env)
-                                └── /* → static files (index.html, ai-chat.html, js/, etc.)
-```
-The frontend has **ZERO** Supabase references — no URL, no keys, no SDK. All requests go through relative `/api/*` URLs.
-## Environment Variables (set as Secrets)
-| Key | Value |
-|-----|-------|
-| `SUPABASE_PROJECT_URL` | `https://tcwdbokruvlizkxcpkzj.supabase.co` |
-| `SUPABASE_ANON_KEY` | (Supabase anon key) |
-| `PORT` | `7860` |

 ---
 title: Cellex Web
+emoji: 🛍️
+colorFrom: blue
+colorTo: indigo
 sdk: docker
+app_port: 7860
 pinned: false
+license: mit
+short_description: Nigeria's #1 social commerce marketplace (Next.js)
 ---
+# Cellex — Nigeria's #1 Social Commerce Marketplace
+Next.js 16 (App Router) frontend for the Cellex platform — a Nigerian social ecommerce
+marketplace with live shopping, group buys, AI-powered discovery, and unified WhatsApp + Telegram
+cross-platform shopping.
+## What's inside
+- **Buyer flow**: home, product detail, cart, checkout, PalmPay bank-transfer payment, orders, wishlist, profile
+- **Discovery**: categories, search, seller storefronts, video feed, trending, AI recommendations
+- **Live shopping**: browse live sessions, watch with real-time chat, featured product buy
+- **Group buys**: Pinduoduo-style group discounts unlocked at target count
+- **Cross-platform**: link WhatsApp bot with unified cart, Telegram channel alerts
+- **Seller center**: dashboard, product CRUD, orders, profile, go-live, product videos, 24h stories
 ## Architecture
+- Frontend: Next.js 16 App Router + React + TypeScript + Tailwind CSS 4 + shadcn/ui
+- Backend: 27 Supabase Edge Functions (Deno) — unchanged from prior phases
+- Auth: HTTP-only cookies → `web_sessions` table → JWT verify in edge functions
+- Payment: PalmPay bank transfer with Gmail-IMAP auto-verification (Render bot)
+- AI: Qwen2.5-72B powering product recommendations and shopping assistant
+## Deployment
+This Space uses the **Docker SDK**. The Dockerfile:
+1. Builds the Next.js app with `output: "standalone"`
+2. Copies the standalone server + static assets to a slim Node 20 image
+3. Serves on port **7860** (HF Spaces default)
+## Environment variables (set in HF Space settings)
+```
+SUPABASE_URL=https://tcwdbokruvlizkxcpkzj.supabase.co
+SUPABASE_ANON_KEY=...   (Supabase anon key)
+SUPABASE_SERVICE_KEY=... (optional, only if you upload videos via web-server)
+GMAIL_EMAIL=...         (optional, only if running payment verifier here)
+GMAIL_APP_PASSWORD=...
+```
+> **Note**: Most existing edge functions, the payment verifier, and WhatsApp/Telegram bots
+> are NOT run here — they continue running on Render / Supabase. This Space only hosts the
+> Next.js web frontend.

ai-chat.html DELETED Viewed

@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>AI Shop — Cellex AI Shopping Assistant</title>
-    <meta name="description" content="Chat with Cellex's AI assistant to find products, compare prices, and get shopping recommendations.">
-    <!-- Fonts & Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-    <!-- Tailwind only - NO Supabase SDK in frontend -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#ecfeff',
-                            100: '#cffafe',
-                            200: '#a5f3fc',
-                            300: '#67e8f9',
-                            400: '#00d4ff',
-                            500: '#00d4ff',
-                            600: '#0891b2',
-                            700: '#0e7490',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    },
-                    animation: {
-                        'slide-up': 'slideUp 0.3s ease-out',
-                        'fade-in': 'fadeIn 0.3s ease-out',
-                        'typing': 'typing 1.5s infinite',
-                    },
-                    keyframes: {
-                        slideUp: {
-                            '0%': { opacity: '0', transform: 'translateY(10px)' },
-                            '100%': { opacity: '1', transform: 'translateY(0)' },
-                        },
-                        fadeIn: {
-                            '0%': { opacity: '0' },
-                            '100%': { opacity: '1' },
-                        },
-                        typing: {
-                            '0%, 60%, 100%': { opacity: '0.3' },
-                            '30%': { opacity: '1' },
-                        },
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        html { scroll-behavior: smooth; }
-        body {
-            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
-            background: #f9fafb;
-            color: #1f2937;
-            overflow: hidden;
-            height: 100vh;
-            height: 100dvh;
-        }
-        .gradient-text {
-            background: linear-gradient(135deg, #00d4ff 0%, #00d4ff 50%, #0891b2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .glass {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-        }
-        /* Chat Messages */
-        .chat-container {
-            display: flex;
-            flex-direction: column;
-            height: calc(100vh - 120px - 70px);
-            height: calc(100dvh - 120px - 70px);
-            overflow-y: auto;
-            padding-bottom: 16px;
-        }
-        .chat-container::-webkit-scrollbar { width: 4px; }
-        .chat-container::-webkit-scrollbar-track { background: transparent; }
-        .chat-container::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
-        .message-bubble {
-            max-width: 80%;
-            animation: slideUp 0.3s ease-out;
-        }
-        /* Typing Indicator */
-        .typing-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #9ca3af;
-            display: inline-block;
-            margin: 0 2px;
-        }
-        .typing-dot:nth-child(1) { animation: typing 1.4s infinite 0s; }
-        .typing-dot:nth-child(2) { animation: typing 1.4s infinite 0.2s; }
-        .typing-dot:nth-child(3) { animation: typing 1.4s infinite 0.4s; }
-        /* Product card in chat */
-        .chat-product-card {
-            transition: all 0.2s ease;
-        }
-        .chat-product-card:hover {
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-            transform: translateY(-2px);
-        }
-        /* Mobile Bottom Nav */
-        .mobile-nav {
-            padding-bottom: env(safe-area-inset-bottom);
-        }
-        /* Input focus */
-        .chat-input:focus-within {
-            box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3);
-        }
-        /* Quick action chip */
-        .chip {
-            transition: all 0.2s ease;
-        }
-        .chip:hover {
-            background: #cffafe;
-            border-color: #00d4ff;
-        }
-        .chip:active {
-            transform: scale(0.97);
-        }
-    </style>
-</head>
-<body class="min-h-screen">
-<!-- Universal Navbar -->
-<div id="nav-mount"></div>
-<script src="js/load-navbar.js"></script>
-    <!-- Header -->
-    <!-- Chat Area -->
-    <div id="chatContainer" class="chat-container px-4">
-        <!-- Welcome Message -->
-        <div class="flex items-start gap-2.5 mb-4 mt-4 animate-fade-in">
-            <div class="w-8 h-8 bg-gradient-to-br from-cyan-400 to-cyan-700 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
-                <i class="fas fa-robot text-white text-xs"></i>
-            </div>
-            <div class="message-bubble bg-white rounded-2xl rounded-tl-md p-3.5 shadow-sm border border-gray-100">
-                <p class="text-sm text-gray-700 leading-relaxed">Hi! I'm your <strong class="text-cyan-500">Cellex AI Assistant</strong>. I can help you find products, compare prices, track deals, and more! What are you looking for today?</p>
-                <p class="text-[10px] text-gray-400 mt-1.5">Just now</p>
-            </div>
-        </div>
-        <!-- Quick Suggestion Chips -->
-        <div id="suggestionChips" class="flex flex-wrap gap-2 mb-4 ml-10">
-            <button onclick="sendSuggestion('Show me phones under ₦50,000')" class="chip inline-flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 hover:text-cyan-600 shadow-sm">
-                <i class="fas fa-mobile-alt text-cyan-400"></i>
-                Phones under ₦50k
-            </button>
-            <button onclick="sendSuggestion('Best deals today')" class="chip inline-flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 hover:text-cyan-600 shadow-sm">
-                <i class="fas fa-bolt text-cyan-400"></i>
-                Best deals today
-            </button>
-            <button onclick="sendSuggestion('Farm fresh produce')" class="chip inline-flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 hover:text-cyan-600 shadow-sm">
-                <i class="fas fa-leaf text-cyan-400"></i>
-                Farm fresh produce
-            </button>
-            <button onclick="sendSuggestion('Electronics')" class="chip inline-flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 hover:text-cyan-600 shadow-sm">
-                <i class="fas fa-laptop text-cyan-400"></i>
-                Electronics
-            </button>
-        </div>
-    </div>
-    <!-- Chat Input Bar -->
-    <div id="chatInputBar" class="fixed bottom-[70px] left-0 right-0 bg-white border-t border-gray-200 px-3 py-2.5 z-40" style="padding-bottom: calc(0.625rem + env(safe-area-inset-bottom));">
-        <div class="max-w-3xl mx-auto">
-            <!-- Image Preview (inline, above input) -->
-            <div id="ai-image-preview" class="hidden mb-2 p-2 bg-gray-50 rounded-xl border border-gray-200">
-                <div class="flex items-end gap-2.5">
-                    <div class="relative flex-shrink-0">
-                        <img id="ai-preview-img" src="" alt="Preview" class="w-20 h-20 rounded-xl object-cover border-2 border-gray-200">
-                        <button id="ai-remove-image" class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-[10px] shadow-md hover:bg-red-600 transition-colors"><i class="fas fa-times"></i></button>
-                    </div>
-                    <p class="text-xs text-gray-500 pb-1">Image attached — send a message to ask about it</p>
-                </div>
-            </div>
-            <div class="chat-input flex items-center gap-2 bg-gray-100 rounded-full px-3 py-2 border-2 border-transparent transition-all">
-                <input type="file" id="ai-file-input" accept="image/*" hidden>
-                <button id="ai-upload-btn" onclick="document.getElementById('ai-file-input').click()" class="w-9 h-9 flex items-center justify-center text-gray-400 hover:text-cyan-500 hover:bg-cyan-50 rounded-full transition-all flex-shrink-0" title="Upload image">
-                    <i class="fas fa-plus text-lg"></i>
-                </button>
-                <input type="text" id="chatInput" placeholder="Ask me anything about products..."
-                       class="flex-1 bg-transparent outline-none text-sm"
-                       onkeypress="if(event.key==='Enter') sendMessage()">
-                <button onclick="sendMessage()" class="w-9 h-9 bg-gradient-to-r from-cyan-400 to-cyan-600 rounded-full flex items-center justify-center hover:from-cyan-500 hover:to-cyan-700 transition-all shadow-md flex-shrink-0">
-                    <i class="fas fa-paper-plane text-white text-sm"></i>
-                </button>
-            </div>
-            <p class="text-center text-[10px] text-gray-400 mt-1.5">Powered by Cellex AI</p>
-        </div>
-    </div>
-    <!-- Bottom Navigation -->
-    <!-- Scripts: Supabase config + Cart module + AI Assistant (shared logic) -->
-    <!-- Scripts: Edge function client (no Supabase SDK) + Cart + AI Assistant -->
-    <script src="js/config/edge-functions.js?v=2"></script>
-    <script src="js/cart.js?v=10"></script>
-    <script src="js/ai-buyer-assistant.js?v=13"></script>
-</body>
-</html>

auth.html DELETED Viewed

@@ -1,246 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login / Signup - Eesha</title>
-    <link rel="stylesheet" href="css/style.css">
-</head>
-<body class="auth-body">
-    <div class="auth-container">
-        <div id="login-form">
-            <h2>Login to Eesha</h2>
-            <form id="login">
-                <input type="email" id="login-email" placeholder="Email" required>
-                <input type="password" id="login-password" placeholder="Password" required>
-                <button type="submit">Login</button>
-            </form>
-            <p>Don't have an account? <a href="#" id="show-signup">Sign up</a></p>
-        </div>
-        <div id="signup-form" style="display:none;">
-            <h2>Create an Account</h2>
-            <form id="signup">
-                <input type="text" id="signup-name" placeholder="Full Name" required>
-                <input type="email" id="signup-email" placeholder="Email" required>
-                <input type="password" id="signup-password" placeholder="Password" required>
-                <div class="user-type">
-                    <label>I am a:</label>
-                    <input type="radio" id="buyer" name="user_type" value="buyer" checked>
-                    <label for="buyer">Buyer</label>
-                    <input type="radio" id="seller" name="user_type" value="seller">
-                    <label for="seller">Seller</label>
-                </div>
-                <button type="submit">Sign Up</button>
-            </form>
-            <p>Already have an account? <a href="#" id="show-login">Log in</a></p>
-        </div>
-        <a href="seller/login.html" style="text-decoration: none;"> Am a Seller</a>
-    </div>
-<script>/* General Body & Layout */
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    background-color: #f4f4f4;
-    color: #333;
-}
-.container {
-    width: 90%;
-    margin: 0 auto;
-    max-width: 1200px;
-}
-/* Header */
-header {
-    background-color: #2c3e50;
-    color: white;
-    padding: 1rem 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-header h1 {
-    margin: 0;
-    font-size: 1.8rem;
-}
-header nav a, header nav button {
-    color: white;
-    text-decoration: none;
-    background: #3498db;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    border: none;
-    cursor: pointer;
-}
-header nav span {
-    margin-right: 15px;
-}
-/* Product Grid */
-.product-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1.5rem;
-    margin-top: 2rem;
-}
-.product-card {
-    background-color: white;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    overflow: hidden;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-.product-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-}
-.product-card img {
-    width: 100%;
-    height: 180px;
-    object-fit: cover;
-}
-.product-card h3 {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    padding: 0 10px;
-}
-.product-card .price {
-    color: #e74c3c;
-    font-weight: bold;
-    font-size: 1.2rem;
-    margin-bottom: 1rem;
-}
-/* Auth Page */
-.auth-body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background: linear-gradient(135deg, #3498db, #2c3e50);
-}
-.auth-container {
-    background-color: white;
-    padding: 2rem;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-    width: 100%;
-    max-width: 400px;
-    text-align: center;
-}
-.auth-container h2 {
-    margin-bottom: 1.5rem;
-}
-.auth-container input[type="text"],
-.auth-container input[type="email"],
-.auth-container input[type="password"] {
-    width: calc(100% - 20px);
-    padding: 10px;
-    margin-bottom: 1rem;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-.auth-container button {
-    width: 100%;
-    padding: 12px;
-    background-color: #2ecc71;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 1rem;
-}
-.auth-container p {
-    margin-top: 1rem;
-}
-.auth-container a {
-    color: #3498db;
-    text-decoration: none;
-    font-weight: bold;
-}
-.user-type {
-    margin-bottom: 1rem;
-    text-align: left;
-}
-/* Dashboard */
-.dashboard-form {
-    background: white;
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin-bottom: 2rem;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-.dashboard-form input, .dashboard-form textarea {
-    width: calc(100% - 22px);
-    padding: 10px;
-    margin-bottom: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-.dashboard-form button {
-    background-color: #2c3e50;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-/* AI Assistant */
-.ai-assistant {
-    background-color: #eaf5ff;
-    border: 1px solid #bde0ff;
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-}
-.ai-assistant h3 {
-    margin-top: 0;
-}
-.ai-chat-box {
-    display: flex;
-    gap: 10px;
-}
-.ai-chat-box input {
-    flex-grow: 1;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-.ai-chat-box button {
-    padding: 10px 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-#ai-results {
-    margin-top: 1rem;
-}</script>
-</body>
-</html>

bun.lock ADDED Viewed

The diff for this file is too large to render. See raw diff

cart.html DELETED Viewed

@@ -1,653 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Shopping Cart - Cellex | Nigeria's #1 Marketplace</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="js/cart.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="js/config/edge-functions.js?v=3"></script>
-    <script src="js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#cffafe',
-                            200: '#a5f3fc',
-                            300: '#67e8f9',
-                            400: '#00d4ff',
-                            500: '#00d4ff',
-                            600: '#0891b2',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
-        * {
-            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
-        }
-        .loading-spinner {
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes slideIn {
-            from { opacity: 0; transform: translateX(-20px); }
-            to { opacity: 1; transform: translateX(0); }
-        }
-        .fade-in {
-            animation: fadeIn 0.3s ease-out forwards;
-        }
-        .slide-in {
-            animation: slideIn 0.3s ease-out forwards;
-        }
-        .cart-item {
-            animation: fadeIn 0.3s ease-out forwards;
-        }
-        .cart-item:nth-child(1) { animation-delay: 0.05s; }
-        .cart-item:nth-child(2) { animation-delay: 0.1s; }
-        .cart-item:nth-child(3) { animation-delay: 0.15s; }
-        .cart-item:nth-child(4) { animation-delay: 0.2s; }
-        .cart-item:nth-child(5) { animation-delay: 0.25s; }
-        .quantity-btn {
-            transition: all 0.2s ease;
-        }
-        .quantity-btn:hover {
-            transform: scale(1.1);
-        }
-        .quantity-btn:active {
-            transform: scale(0.95);
-        }
-        .product-image {
-            transition: transform 0.3s ease;
-        }
-        .product-image:hover {
-            transform: scale(1.05);
-        }
-        .checkout-btn {
-            background: linear-gradient(135deg, #00d4ff 0%, #00d4ff 100%);
-            transition: all 0.3s ease;
-        }
-        .checkout-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
-        }
-        .checkout-btn:active {
-            transform: translateY(0);
-        }
-        .summary-card {
-            background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
-        }
-        .delete-btn {
-            transition: all 0.2s ease;
-        }
-        .delete-btn:hover {
-            background: #fee2e2;
-            color: #ef4444;
-        }
-        .promo-input:focus {
-            box-shadow: 0 0 0 3px rgba(240, 71, 74, 0.1);
-        }
-        .skeleton {
-            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-            background-size: 200% 100%;
-            animation: shimmer 1.5s infinite;
-        }
-        @keyframes shimmer {
-            0% { background-position: -200% 0; }
-            100% { background-position: 200% 0; }
-        }
-        .empty-cart-icon {
-            animation: float 3s ease-in-out infinite;
-        }
-        @keyframes float {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
-        }
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #c1c1c1;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #a1a1a1;
-        }
-    </style>
-</head>
-<body class="bg-gray-50 min-h-screen">
-    <!-- Header -->
-    <header class="bg-white shadow-sm sticky top-0 z-50">
-        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <a href="index.html" class="flex items-center gap-2 group">
-                    <div class="w-10 h-10 flex items-center justify-center">
-                        <svg viewBox="0 0 60 60" class="w-full h-full">
-                            <defs>
-                                <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" stop-color="#00d4ff"/>
-                                    <stop offset="50%" stop-color="#00d4ff"/>
-                                    <stop offset="100%" stop-color="#0891b2"/>
-                                </linearGradient>
-                                <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                    <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                    <feMerge>
-                                        <feMergeNode in="coloredBlur"/>
-                                        <feMergeNode in="SourceGraphic"/>
-                                    </feMerge>
-                                </filter>
-                            </defs>
-                            <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                                  fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                            <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                                  fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                            <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                                  fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                            <g transform="translate(52, 8)">
-                                <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#00d4ff"/>
-                            </g>
-                        </svg>
-                    </div>
-                    <div class="flex flex-col">
-                        <span class="text-xl font-extrabold bg-gradient-to-r from-cyan-400 to-cyan-700 bg-clip-text text-transparent leading-tight">Cellex</span>
-                        <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                    </div>
-                </a>
-                <div class="flex items-center space-x-4">
-                    <a href="index.html" class="text-gray-600 hover:text-cyan-500 transition-colors">
-                        <i class="fas fa-home text-xl"></i>
-                    </a>
-                    <a href="cart.html" class="relative text-cyan-500">
-                        <i class="fas fa-shopping-cart text-xl"></i>
-                        <span id="cartCount" class="absolute -top-2 -right-2 bg-cyan-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                    </a>
-                </div>
-            </div>
-        </nav>
-    </header>
-    <!-- Breadcrumb -->
-    <div class="bg-white border-b">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
-            <nav class="flex items-center space-x-2 text-sm text-gray-500">
-                <a href="index.html" class="hover:text-cyan-500 transition-colors">Home</a>
-                <i class="fas fa-chevron-right text-xs"></i>
-                <span class="text-gray-900 font-medium">Shopping Cart</span>
-            </nav>
-        </div>
-    </div>
-    <!-- Main Content -->
-    <main class="max-w pb-20-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <!-- Page Title -->
-        <div class="flex items-center justify-between mb-8">
-            <div>
-                <h1 class="text-3xl font-bold text-gray-900">Shopping Cart</h1>
-                <p class="text-gray-500 mt-1" id="cartSummary">Loading your cart...</p>
-            </div>
-            <a href="index.html" class="hidden sm:flex items-center text-cyan-500 hover:text-cyan-600 transition-colors font-medium">
-                <i class="fas fa-arrow-left mr-2"></i>
-                Continue Shopping
-            </a>
-        </div>
-        <!-- Cart Content -->
-        <div id="cartContent">
-            <!-- Loading Skeleton -->
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                <div class="lg:col-span-2 space-y-4">
-                    <div class="bg-white rounded-2xl p-6 shadow-sm">
-                        <div class="flex items-center space-x-4">
-                            <div class="skeleton w-24 h-24 rounded-xl"></div>
-                            <div class="flex-1 space-y-3">
-                                <div class="skeleton h-4 w-3/4 rounded"></div>
-                                <div class="skeleton h-3 w-1/2 rounded"></div>
-                                <div class="skeleton h-6 w-1/4 rounded"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-white rounded-2xl p-6 shadow-sm">
-                        <div class="flex items-center space-x-4">
-                            <div class="skeleton w-24 h-24 rounded-xl"></div>
-                            <div class="flex-1 space-y-3">
-                                <div class="skeleton h-4 w-3/4 rounded"></div>
-                                <div class="skeleton h-3 w-1/2 rounded"></div>
-                                <div class="skeleton h-6 w-1/4 rounded"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="lg:col-span-1">
-                    <div class="bg-white rounded-2xl p-6 shadow-sm">
-                        <div class="skeleton h-6 w-1/2 rounded mb-6"></div>
-                        <div class="space-y-4">
-                            <div class="skeleton h-4 w-full rounded"></div>
-                            <div class="skeleton h-4 w-3/4 rounded"></div>
-                            <div class="skeleton h-10 w-full rounded mt-6"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <!-- Footer -->
-    <footer class="bg-dark-900 text-white py-8 mt-12">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <p>&copy; 2025 Cellex. All rights reserved.</p>
-        </div>
-    </footer>
-    <script>
-        let currentUser = null;
-        document.addEventListener('DOMContentLoaded', async () => {
-            await checkAuth();
-            await loadCart();
-        });
-        async function checkAuth() {
-            const { user } = await window.EdgeFunctions.auth.checkSession();
-            currentUser = user || null;
-        }
-        async function loadCart() {
-            const container = document.getElementById('cartContent');
-            // If not logged in, show login prompt
-            if (!currentUser) {
-                renderLoginPrompt();
-                return;
-            }
-            try {
-                const cartItems = await window.Cart.getCartItems();
-                if (!cartItems || cartItems.length === 0) {
-                    renderEmptyCart();
-                    return;
-                }
-                const cartTotal = cartItems.reduce((sum, item) => {
-                    return sum + ((item.products?.price || 0) * (item.quantity || 1));
-                }, 0);
-                // Calculate total quantity for summary
-                const totalItems = cartItems.reduce((sum, item) => sum + (item.quantity || 0), 0);
-                document.getElementById('cartSummary').textContent = `${totalItems} item${totalItems !== 1 ? 's' : ''} in your cart`;
-                container.innerHTML = `
-                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                        <!-- Cart Items -->
-                        <div class="lg:col-span-2 space-y-4">
-                            ${cartItems.map((item, index) => {
-                                if (!item.products) return '';
-                                return renderCartItem(item.products, item.quantity, index, item.id);
-                            }).join('')}
-                            <!-- Continue Shopping -->
-                            <a href="index.html" class="flex items-center justify-center py-4 border-2 border-dashed border-gray-200 rounded-xl text-gray-500 hover:text-cyan-500 hover:border-brand-400 transition-colors">
-                                <i class="fas fa-plus mr-2"></i>
-                                Add more items
-                            </a>
-                        </div>
-                        <!-- Order Summary -->
-                        ${renderOrderSummary(cartTotal, true)}
-                    </div>
-                `;
-                // Update cart count in header
-                if (window.Cart) {
-                    await window.Cart.updateCartCountUI();
-                }
-            } catch (error) {
-                console.error('Error loading cart:', error);
-                container.innerHTML = `
-                    <div class="bg-white rounded-2xl p-12 text-center shadow-sm">
-                        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <i class="fas fa-exclamation-triangle text-2xl text-red-500"></i>
-                        </div>
-                        <h3 class="text-xl font-semibold text-gray-900 mb-2">Error Loading Cart</h3>
-                        <p class="text-gray-500 mb-6">There was a problem loading your cart. Please try again.</p>
-                        <button onclick="loadCart()" class="text-cyan-500 font-medium hover:underline">
-                            <i class="fas fa-redo mr-2"></i>Try Again
-                        </button>
-                    </div>
-                `;
-            }
-        }
-        function renderLoginPrompt() {
-            document.getElementById('cartSummary').textContent = 'Please login to view your cart';
-            document.getElementById('cartContent').innerHTML = `
-                <div class="bg-white rounded-2xl p-12 text-center shadow-sm max-w-2xl mx-auto fade-in">
-                    <div class="w-32 h-32 bg-brand-50 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i class="fas fa-user-lock text-5xl text-cyan-400"></i>
-                    </div>
-                    <h2 class="text-2xl font-bold text-gray-900 mb-2">Login Required</h2>
-                    <p class="text-gray-500 mb-8">Please login to view and manage your shopping cart. Your cart will be saved across all your devices.</p>
-                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                        <a href="login.html?next=cart.html" class="px-8 py-3 bg-cyan-500 text-white font-semibold rounded-xl hover:bg-cyan-600 transition-colors">
-                            <i class="fas fa-sign-in-alt mr-2"></i>Login
-                        </a>
-                        <a href="signup.html?next=cart.html" class="px-8 py-3 border-2 border-cyan-500 text-cyan-500 font-semibold rounded-xl hover:bg-brand-50 transition-colors">
-                            <i class="fas fa-user-plus mr-2"></i>Create Account
-                        </a>
-                    </div>
-                </div>
-            `;
-        }
-        function renderCartItem(product, quantity, index, cartItemId = null) {
-            const discount = product.original_price ? Math.round(((product.original_price - product.price) / product.original_price) * 100) : 0;
-            const image = product.image || product.image_url || 'https://via.placeholder.com/200';
-            const productId = product.id;
-            return `
-                <div class="cart-item bg-white rounded-2xl p-4 sm:p-6 shadow-sm hover:shadow-md transition-shadow" data-product-id="${productId}" data-cart-id="${cartItemId || ''}">
-                    <div class="flex items-start gap-4">
-                        <!-- Product Image -->
-                        <div class="flex-shrink-0">
-                            <a href="product.html?id=${productId}">
-                                <img src="${image}" alt="${product.name || 'Product'}"
-                                     class="product-image w-24 h-24 sm:w-32 sm:h-32 rounded-xl object-cover cursor-pointer">
-                            </a>
-                        </div>
-                        <!-- Product Details -->
-                        <div class="flex-1 min-w-0">
-                            <div class="flex items-start justify-between gap-2">
-                                <div>
-                                    <a href="product.html?id=${productId}" class="text-gray-400 text-xs uppercase tracking-wide">${product.category || 'Category'}</a>
-                                    <h3 class="text-lg font-semibold text-gray-900 mt-1 hover:text-cyan-500 transition-colors">
-                                        <a href="product.html?id=${productId}">${product.name || 'Product Name'}</a>
-                                    </h3>
-                                </div>
-                                <button onclick="removeItem('${productId}', '${cartItemId}')"
-                                        class="delete-btn p-2 rounded-lg text-gray-400 hover:text-red-500">
-                                    <i class="fas fa-trash-alt"></i>
-                                </button>
-                            </div>
-                            <!-- Price & Discount -->
-                            <div class="flex items-center gap-3 mt-2">
-                                <span class="text-xl font-bold text-gray-900">₦${(product.price || 0).toFixed(2)}</span>
-                                ${product.original_price ? `
-                                    <span class="text-sm text-gray-400 line-through">₦${product.original_price.toFixed(2)}</span>
-                                    <span class="bg-red-100 text-red-600 text-xs font-semibold px-2 py-1 rounded-full">-${discount}%</span>
-                                ` : ''}
-                            </div>
-                            <!-- Quantity Controls -->
-                            <div class="flex items-center justify-between mt-4">
-                                <div class="flex items-center bg-gray-100 rounded-xl p-1">
-                                    <button onclick="updateQuantity('${productId}', ${quantity - 1}, '${cartItemId}')"
-                                            class="quantity-btn w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-sm hover:bg-gray-50 ${quantity <= 1 ? 'opacity-50 cursor-not-allowed' : ''}">
-                                        <i class="fas fa-minus text-gray-600"></i>
-                                    </button>
-                                    <span class="w-14 text-center font-semibold text-gray-900">${quantity}</span>
-                                    <button onclick="updateQuantity('${productId}', ${quantity + 1}, '${cartItemId}')"
-                                            class="quantity-btn w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-sm hover:bg-gray-50">
-                                        <i class="fas fa-plus text-gray-600"></i>
-                                    </button>
-                                </div>
-                                <div class="text-right">
-                                    <span class="text-sm text-gray-500">Subtotal</span>
-                                    <p class="text-lg font-bold text-cyan-500">₦${((product.price || 0) * quantity).toFixed(2)}</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `;
-        }
-        function renderOrderSummary(cartTotal, isLoggedIn) {
-            const shipping = cartTotal > 100 ? 0 : (cartTotal > 0 ? 10.00 : 0);
-            const tax = cartTotal * 0.1;
-            const total = cartTotal + shipping + tax;
-            return `
-                <div class="lg:col-span-1">
-                    <div class="summary-card bg-white rounded-2xl shadow-sm p-6 sticky top-24">
-                        <h2 class="text-xl font-bold text-gray-900 mb-6">Order Summary</h2>
-                        <!-- Promo Code -->
-                        <div class="mb-6">
-                            <label class="text-sm font-medium text-gray-700 mb-2 block">Promo Code</label>
-                            <div class="flex gap-2">
-                                <input type="text" placeholder="Enter code"
-                                       class="promo-input flex-1 px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-cyan-500 transition-colors">
-                                <button class="px-4 py-3 bg-dark-900 text-white rounded-xl font-medium hover:bg-dark-800 transition-colors">
-                                    Apply
-                                </button>
-                            </div>
-                        </div>
-                        <div class="space-y-4 border-t pt-4">
-                            <div class="flex justify-between text-gray-600">
-                                <span>Subtotal</span>
-                                <span class="font-medium">₦${cartTotal.toFixed(2)}</span>
-                            </div>
-                            <div class="flex justify-between text-gray-600">
-                                <span>Shipping</span>
-                                <span class="font-medium">${shipping > 0 ? '$' + shipping.toFixed(2) : 'Free'}</span>
-                            </div>
-                            <div class="flex justify-between text-gray-600">
-                                <span>Tax (10%)</span>
-                                <span class="font-medium">₦${tax.toFixed(2)}</span>
-                            </div>
-                            ${cartTotal > 100 ? `
-                                <div class="bg-green-50 border border-green-200 rounded-xl p-3 text-sm text-green-700">
-                                    <i class="fas fa-check-circle mr-2"></i>
-                                    You're saving ₦10.00 on shipping!
-                                </div>
-                            ` : ''}
-                        </div>
-                        <div class="border-t mt-4 pt-4">
-                            <div class="flex justify-between items-center mb-6">
-                                <span class="text-lg font-bold text-gray-900">Total</span>
-                                <span class="text-2xl font-bold text-cyan-500">₦${total.toFixed(2)}</span>
-                            </div>
-                            <button onclick="proceedToCheckout()"
-                                    class="checkout-btn w-full py-4 text-white font-semibold rounded-xl flex items-center justify-center gap-2">
-                                <i class="fas fa-lock"></i>
-                                Proceed to Checkout
-                            </button>
-                            <p class="text-xs text-gray-500 text-center mt-4">
-                                <i class="fas fa-shield-alt mr-1"></i>
-                                Secure checkout powered by Stripe
-                            </p>
-                        </div>
-                        <!-- Payment Methods -->
-                        <div class="mt-6 pt-6 border-t">
-                            <p class="text-xs text-gray-500 text-center mb-3">We accept</p>
-                            <div class="flex justify-center gap-3 text-2xl text-gray-400">
-                                <i class="fab fa-cc-visa"></i>
-                                <i class="fab fa-cc-mastercard"></i>
-                                <i class="fab fa-cc-amex"></i>
-                                <i class="fab fa-cc-paypal"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `;
-        }
-        function renderEmptyCart() {
-            document.getElementById('cartSummary').textContent = 'Your cart is empty';
-            document.getElementById('cartContent').innerHTML = `
-                <div class="bg-white rounded-2xl p-12 text-center shadow-sm max-w-2xl mx-auto fade-in">
-                    <div class="empty-cart-icon w-32 h-32 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i class="fas fa-shopping-cart text-5xl text-gray-300"></i>
-                    </div>
-                    <h2 class="text-2xl font-bold text-gray-900 mb-2">Your cart is empty</h2>
-                    <p class="text-gray-500 mb-8">Looks like you haven't added any items to your cart yet. Start shopping to fill it up!</p>
-                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                        <a href="index.html" class="px-8 py-3 bg-cyan-500 text-white font-semibold rounded-xl hover:bg-cyan-600 transition-colors">
-                            <i class="fas fa-shopping-bag mr-2"></i>Start Shopping
-                        </a>
-                    </div>
-                </div>
-            `;
-        }
-        async function updateQuantity(productId, newQuantity, cartItemId) {
-            if (newQuantity < 1) {
-                removeItem(productId, cartItemId);
-                return;
-            }
-            if (!currentUser) {
-                window.location.href = 'login.html?next=cart.html';
-                return;
-            }
-            try {
-                const result = await window.Cart.updateQuantity(cartItemId, newQuantity);
-                if (!result.success) throw new Error(result.message || 'Failed to update quantity');
-                await loadCart();
-            } catch (error) {
-                console.error('Error updating quantity:', error);
-                alert('Failed to update quantity. Please try again.');
-            }
-        }
-        async function removeItem(productId, cartItemId) {
-            if (!confirm('Remove this item from your cart?')) return;
-            if (!currentUser) {
-                window.location.href = 'login.html?next=cart.html';
-                return;
-            }
-            try {
-                const result = await window.Cart.removeFromCart(cartItemId);
-                if (!result.success) throw new Error(result.message || 'Failed to remove item');
-                await loadCart();
-            } catch (error) {
-                console.error('Error removing item:', error);
-                alert('Failed to remove item. Please try again.');
-            }
-        }
-        async function proceedToCheckout() {
-            if (!currentUser) {
-                window.location.href = 'login.html?next=cart.html';
-                return;
-            }
-            try {
-                const cartItems = await window.Cart.getCartItems();
-                if (!cartItems || cartItems.length === 0) {
-                    alert('Your cart is empty!');
-                    return;
-                }
-                const items = cartItems.map(item => ({
-                    product_id: item.product_id,
-                    name: item.products?.name || '',
-                    quantity: item.quantity,
-                    price: item.products?.price || 0,
-                    total: (item.products?.price || 0) * item.quantity
-                }));
-                const cartTotal = items.reduce((sum, item) => sum + item.total, 0);
-                const shipping = cartTotal > 100 ? 0 : 10.00;
-                const tax = cartTotal * 0.1;
-                const total = cartTotal + shipping + tax;
-                // Store in sessionStorage for checkout page (cleared after checkout)
-                sessionStorage.setItem('checkoutItems', JSON.stringify({
-                    items,
-                    subtotal: cartTotal,
-                    shipping,
-                    tax,
-                    total,
-                    userId: currentUser.id
-                }));
-                window.location.href = 'checkout.html';
-            } catch (error) {
-                console.error('Error proceeding to checkout:', error);
-                alert('There was an error processing your cart. Please try again.');
-            }
-        }
-    </script>
-</body>
-</html>

categories.html DELETED Viewed

@@ -1,611 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Categories — Cellex</title>
-    <meta name="description" content="Browse all categories on Cellex - Nigeria's #1 Marketplace">
-    <!-- Fonts & Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-    <!-- Tailwind & Supabase -->
-    <script src="https://cdn.tailwindcss.com"></script>
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="js/config/edge-functions.js?v=3"></script>
-    <script src="js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#cffafe',
-                            200: '#a5f3fc',
-                            300: '#67e8f9',
-                            400: '#00d4ff',
-                            500: '#00d4ff',
-                            600: '#0891b2',
-                            700: '#b45309',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        html { scroll-behavior: smooth; }
-        body {
-            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
-            background: #ffffff;
-            color: #1f2937;
-        }
-        ::-webkit-scrollbar { width: 6px; height: 6px; }
-        ::-webkit-scrollbar-track { background: #f5f5f5; }
-        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
-        .glass {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-        }
-        .category-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
-        .category-card { transition: all 0.3s ease; }
-        .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
-        .product-card { transition: all 0.3s ease; }
-        .filter-btn.active { background: #00d4ff; color: white; border-color: #00d4ff; }
-    </style>
-</head>
-<body class="min-h-screen pb-20 lg:pb-0">
-<!-- Universal Navbar -->
-<div id="nav-mount"></div>
-<script src="js/load-navbar.js"></script>
-    <!-- Header -->
-    <!-- Main Content -->
-    <main class="max-w pb-20-7xl mx-auto px-3 lg:px-4 py-4 lg:py-6">
-        <!-- Page Title -->
-        <div class="mb-4 lg:mb-6">
-            <h1 class="text-xl lg:text-2xl font-bold text-gray-900">All Categories</h1>
-            <p class="text-gray-500 text-xs lg:text-sm mt-1">Browse products by category</p>
-        </div>
-        <!-- Categories Grid -->
-        <section class="mb-6 lg:mb-8">
-            <div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2 lg:gap-4" id="categoriesGrid">
-                <!-- All Categories -->
-                <button onclick="filterByCategory('')" class="category-card filter-btn active bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-th-large text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">All</p>
-                </button>
-                <!-- Phones -->
-                <button onclick="filterByCategory('phones')" data-category="phones" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-mobile-alt text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Phones</p>
-                </button>
-                <!-- Electronics -->
-                <button onclick="filterByCategory('electronics')" data-category="electronics" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-laptop text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Electronics</p>
-                </button>
-                <!-- Fashion -->
-                <button onclick="filterByCategory('fashion')" data-category="fashion" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-tshirt text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Fashion</p>
-                </button>
-                <!-- Farm Fresh -->
-                <button onclick="filterByCategory('farm')" data-category="farm" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-leaf text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Farm Fresh</p>
-                </button>
-                <!-- Home -->
-                <button onclick="filterByCategory('home')" data-category="home" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-home text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Home</p>
-                </button>
-                <!-- Beauty -->
-                <button onclick="filterByCategory('beauty')" data-category="beauty" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-heart text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Beauty</p>
-                </button>
-                <!-- Baby -->
-                <button onclick="filterByCategory('baby')" data-category="baby" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-baby text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Baby</p>
-                </button>
-                <!-- Sports -->
-                <button onclick="filterByCategory('sports')" data-category="sports" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-futbol text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Sports</p>
-                </button>
-                <!-- Groceries -->
-                <button onclick="filterByCategory('groceries')" data-category="groceries" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-shopping-basket text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Groceries</p>
-                </button>
-                <!-- Health -->
-                <button onclick="filterByCategory('health')" data-category="health" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-pills text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Health</p>
-                </button>
-                <!-- Automotive -->
-                <button onclick="filterByCategory('automotive')" data-category="automotive" class="category-card filter-btn bg-white rounded-xl p-3 lg:p-4 text-center border border-gray-200 cursor-pointer">
-                    <div class="w-10 h-10 lg:w-14 lg:h-14 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-2 lg:mb-3">
-                        <i class="fas fa-car text-gray-600 text-lg lg:text-xl"></i>
-                    </div>
-                    <p class="font-medium text-gray-700 text-xs lg:text-sm">Automotive</p>
-                </button>
-            </div>
-        </section>
-        <!-- Filters Bar -->
-        <section class="bg-gray-50 rounded-xl p-3 lg:p-4 mb-4 lg:mb-6">
-            <div class="flex flex-wrap items-center gap-2 lg:gap-4">
-                <!-- Sort -->
-                <div class="flex items-center gap-2">
-                    <span class="text-xs lg:text-sm text-gray-500">Sort:</span>
-                    <select id="sortSelect" onchange="applyFilters()" class="text-xs lg:text-sm border border-gray-200 rounded-lg px-2 lg:px-3 py-1.5 lg:py-2 bg-white">
-                        <option value="newest">Newest</option>
-                        <option value="popular">Popular</option>
-                        <option value="price-low">Price: Low to High</option>
-                        <option value="price-high">Price: High to Low</option>
-                    </select>
-                </div>
-                <!-- Price Range -->
-                <div class="flex items-center gap-2">
-                    <span class="text-xs lg:text-sm text-gray-500">Price:</span>
-                    <select id="priceSelect" onchange="applyFilters()" class="text-xs lg:text-sm border border-gray-200 rounded-lg px-2 lg:px-3 py-1.5 lg:py-2 bg-white">
-                        <option value="">All Prices</option>
-                        <option value="0-5000">Under ₦5,000</option>
-                        <option value="5000-10000">₦5,000 - ₦10,000</option>
-                        <option value="10000-50000">₦10,000 - ₦50,000</option>
-                        <option value="50000+">₦50,000+</option>
-                    </select>
-                </div>
-                <!-- Seller Type -->
-                <div class="flex items-center gap-2">
-                    <span class="text-xs lg:text-sm text-gray-500">Seller:</span>
-                    <select id="sellerSelect" onchange="applyFilters()" class="text-xs lg:text-sm border border-gray-200 rounded-lg px-2 lg:px-3 py-1.5 lg:py-2 bg-white">
-                        <option value="">All Sellers</option>
-                        <option value="merchant">Merchants</option>
-                        <option value="farmer">Farmers</option>
-                    </select>
-                </div>
-                <!-- Results Count -->
-                <div class="ml-auto text-xs lg:text-sm text-gray-500">
-                    <span id="resultsCount">0</span> products found
-                </div>
-            </div>
-        </section>
-        <!-- Products Grid -->
-        <section>
-            <div id="productsGrid" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 lg:gap-4">
-                <!-- Products loaded dynamically -->
-            </div>
-            <!-- Loading State -->
-            <div id="loadingState" class="text-center py-12 hidden">
-                <i class="fas fa-spinner fa-spin text-cyan-500 text-2xl mb-3"></i>
-                <p class="text-gray-500 text-sm">Loading products...</p>
-            </div>
-            <!-- Empty State -->
-            <div id="emptyState" class="text-center py-12 hidden">
-                <i class="fas fa-box-open text-gray-300 text-4xl mb-3"></i>
-                <p class="text-gray-500 text-sm">No products found in this category</p>
-                <button onclick="filterByCategory('')" class="mt-3 text-cyan-500 text-sm font-medium hover:underline">View all products</button>
-            </div>
-            <!-- Load More -->
-            <div id="loadMoreSection" class="text-center mt-6 lg:mt-8 hidden">
-                <button onclick="loadMoreProducts()" class="bg-gray-100 text-gray-700 px-6 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
-                    Load More Products
-                </button>
-            </div>
-        </section>
-    </main>
-    <!-- Auth Modal -->
-    <div id="authModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
-        <div class="bg-white rounded-2xl max-w-sm w-full p-6 text-center">
-            <div class="w-16 h-16 bg-cyan-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <i class="fas fa-user-lock text-cyan-500 text-2xl"></i>
-            </div>
-            <h3 class="text-lg font-bold text-gray-900 mb-2">Sign In Required</h3>
-            <p class="text-gray-500 text-sm mb-4">Please log in to add items to your cart</p>
-            <div class="flex gap-3">
-                <a href="login.html" class="flex-1 bg-gray-900 text-white py-2.5 rounded-lg font-medium text-sm hover:bg-gray-800 transition-colors">
-                    Login
-                </a>
-                <a href="signup.html" class="flex-1 bg-orange-500 text-white py-2.5 rounded-lg font-medium text-sm hover:bg-orange-600 transition-colors">
-                    Sign Up
-                </a>
-            </div>
-            <button onclick="closeAuthModal()" class="mt-3 text-gray-500 text-sm hover:text-gray-700">Continue Browsing</button>
-        </div>
-    </div>
-    <!-- Scripts -->
-    <script>
-        // Edge function client + Cart module are loaded via <script> tags above.
-        // Use window.EdgeFunctions and window.Cart instead of supabaseClient.
-        let currentCategory = '';
-        let currentSearch = '';
-        let currentSort = 'newest';
-        let currentPrice = '';
-        let currentSeller = '';
-        let products = [];
-        let page = 0;
-        const pageSize = 20;
-        // Initialize
-        document.addEventListener('DOMContentLoaded', async () => {
-            checkAuthState();
-            // Get parameters from URL
-            const params = new URLSearchParams(window.location.search);
-            const cat = params.get('category');
-            const search = params.get('search');
-            // Set search input value if search param exists
-            if (search) {
-                currentSearch = search;
-                const searchInput = document.getElementById('searchInput');
-                if (searchInput) searchInput.value = search;
-                updatePageTitle(search, '');
-            }
-            if (cat) {
-                filterByCategory(cat);
-            } else {
-                loadProducts();
-            }
-        });
-        // Update page title based on filters
-        function updatePageTitle(search, category) {
-            const titleEl = document.querySelector('main h1');
-            const descEl = document.querySelector('main h1 + p');
-            if (search && category) {
-                titleEl.textContent = `"${search}" in ${category}`;
-                descEl.textContent = 'Search results';
-            } else if (search) {
-                titleEl.textContent = `Search: "${search}"`;
-                descEl.textContent = 'Showing search results';
-            } else if (category) {
-                titleEl.textContent = category.charAt(0).toUpperCase() + category.slice(1);
-                descEl.textContent = 'Browse products in this category';
-            } else {
-                titleEl.textContent = 'All Categories';
-                descEl.textContent = 'Browse products by category';
-            }
-        }
-        // Auth State
-        async function checkAuthState() {
-            // Auth state is handled by the shared navbar
-            try {
-                const { user } = await window.EdgeFunctions.auth.checkSession();
-                window.currentUser = user;
-            } catch (error) {
-                console.error('Auth check error:', error);
-            }
-        }
-        // Filter by Category
-        function filterByCategory(category) {
-            currentCategory = category;
-            page = 0;
-            products = [];
-            // Clear search when changing category
-            currentSearch = '';
-            const searchInput = document.getElementById('searchInput');
-            if (searchInput) searchInput.value = '';
-            // Update active button
-            document.querySelectorAll('.filter-btn').forEach(btn => {
-                btn.classList.remove('active');
-                if (btn.dataset.category === category || (category === '' && !btn.dataset.category)) {
-                    btn.classList.add('active');
-                }
-            });
-            // Update URL
-            const url = new URL(window.location);
-            if (category) {
-                url.searchParams.set('category', category);
-            } else {
-                url.searchParams.delete('category');
-            }
-            url.searchParams.delete('search');
-            window.history.replaceState({}, '', url);
-            // Update page title
-            updatePageTitle('', category);
-            loadProducts();
-        }
-        // Apply Filters
-        function applyFilters() {
-            currentSort = document.getElementById('sortSelect').value;
-            currentPrice = document.getElementById('priceSelect').value;
-            currentSeller = document.getElementById('sellerSelect').value;
-            page = 0;
-            products = [];
-            loadProducts();
-        }
-        // Load Products
-        async function loadProducts() {
-            const loadingState = document.getElementById('loadingState');
-            const emptyState = document.getElementById('emptyState');
-            const productsGrid = document.getElementById('productsGrid');
-            loadingState.classList.remove('hidden');
-            emptyState.classList.add('hidden');
-            try {
-                let result;
-                // Determine max price filter (the edge function search supports a single maxPrice)
-                let maxPrice = null;
-                if (currentPrice) {
-                    if (currentPrice === '50000+') {
-                        maxPrice = 50000;
-                    } else {
-                        const [min, max] = currentPrice.split('-');
-                        maxPrice = parseInt(max);
-                    }
-                }
-                if (currentSearch) {
-                    // Search within all products (optionally capped by maxPrice)
-                    result = await window.EdgeFunctions.products.search(currentSearch, maxPrice);
-                } else if (currentCategory) {
-                    // Browse by category with sort + pagination
-                    result = await window.EdgeFunctions.products.category(currentCategory, currentSort, page + 1);
-                } else {
-                    // No category selected — load all products
-                    result = await window.EdgeFunctions.products.all(50);
-                }
-                if (!result.success) {
-                    throw new Error(result.error || 'Failed to load products');
-                }
-                const data = result.products || [];
-                const count = result.count || data.length;
-                document.getElementById('resultsCount').textContent = count;
-                if (data && data.length > 0) {
-                    products = [...products, ...data];
-                    renderProducts(data);
-                    // Show load more if there are more products
-                    const loadMoreSection = document.getElementById('loadMoreSection');
-                    if (products.length < count) {
-                        loadMoreSection.classList.remove('hidden');
-                    } else {
-                        loadMoreSection.classList.add('hidden');
-                    }
-                } else if (products.length === 0) {
-                    emptyState.classList.remove('hidden');
-                    productsGrid.innerHTML = '';
-                }
-            } catch (error) {
-                console.error('Error loading products:', error);
-                emptyState.classList.remove('hidden');
-            } finally {
-                loadingState.classList.add('hidden');
-            }
-        }
-        // Render Products
-        function renderProducts(data) {
-            const productsGrid = document.getElementById('productsGrid');
-            if (page === 0) {
-                productsGrid.innerHTML = '';
-            }
-            data.forEach(product => {
-                const card = document.createElement('div');
-                card.className = 'product-card bg-white rounded-xl border border-gray-100 overflow-hidden cursor-pointer';
-                card.onclick = () => window.location.href = `product.html?id=${product.id}`;
-                const sellerType = product.sellers?.seller_type;
-                const sellerBadge = sellerType === 'farmer'
-                    ? '<span class="bg-green-100 text-green-700 text-[10px] px-1.5 py-0.5 rounded-full">Farm Fresh</span>'
-                    : '';
-                const discount = product.discount_percentage || 0;
-                const originalPrice = discount > 0 ? product.price / (1 - discount/100) : null;
-                card.innerHTML = `
-                    <div class="relative">
-                        <img src="${product.images?.[0] || 'https://via.placeholder.com/300'}"
-                             alt="${product.name}"
-                             class="w-full h-28 lg:h-40 object-cover">
-                        ${discount > 0 ? `<span class="absolute top-2 left-2 bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full">-${discount}%</span>` : ''}
-                        <button onclick="event.stopPropagation(); toggleWishlist(${product.id})" class="absolute top-2 right-2 w-7 h-7 bg-white rounded-full flex items-center justify-center shadow hover:bg-gray-50">
-                            <i class="far fa-heart text-gray-400 text-xs"></i>
-                        </button>
-                    </div>
-                    <div class="p-2 lg:p-3">
-                        <div class="flex items-center gap-1 mb-1">
-                            ${sellerBadge}
-                        </div>
-                        <h3 class="text-xs lg:text-sm font-medium text-gray-900 line-clamp-2 mb-1">${product.name}</h3>
-                        <div class="flex items-center gap-1 mb-2">
-                            <span class="text-sm lg:text-base font-bold text-gray-900">₦${product.price?.toLocaleString()}</span>
-                            ${originalPrice ? `<span class="text-[10px] text-gray-400 line-through">₦${originalPrice.toFixed(0)}</span>` : ''}
-                        </div>
-                        <button onclick="event.stopPropagation(); addToCart(${product.id})" class="w-full bg-orange-500 text-white py-1.5 lg:py-2 rounded-lg text-xs font-medium hover:bg-orange-600 transition-colors">
-                            Add to Cart
-                        </button>
-                    </div>
-                `;
-                productsGrid.appendChild(card);
-            });
-        }
-        // Load More Products
-        function loadMoreProducts() {
-            page++;
-            loadProducts();
-        }
-        // Add to Cart
-        async function addToCart(productId) {
-            try {
-                const result = await window.Cart.addToCart(productId, 1);
-                if (!result.success) {
-                    if (result.requiresAuth) {
-                        document.getElementById('authModal').classList.remove('hidden');
-                        document.getElementById('authModal').classList.add('flex');
-                        return;
-                    }
-                    showNotification(result.message || 'Error adding to cart', 'error');
-                    return;
-                }
-                showNotification('Added to cart!');
-            } catch (error) {
-                console.error('Add to cart error:', error);
-                showNotification('Error adding to cart', 'error');
-            }
-        }
-        // Toggle Wishlist
-        async function toggleWishlist(productId) {
-            try {
-                const { user } = await window.EdgeFunctions.auth.checkSession();
-                if (!user) {
-                    document.getElementById('authModal').classList.remove('hidden');
-                    document.getElementById('authModal').classList.add('flex');
-                    return;
-                }
-                // Toggle wishlist logic here
-                showNotification('Added to wishlist!');
-            } catch (error) {
-                console.error('Wishlist error:', error);
-            }
-        }
-        // Update Cart Count
-        async function updateCartCount() {
-            try {
-                // Cart module handles auth check + DOM updates internally
-                await window.Cart.updateCartCountUI();
-            } catch (error) {
-                console.error('Cart count error:', error);
-            }
-        }
-        // Close Auth Modal
-        function closeAuthModal() {
-            document.getElementById('authModal').classList.add('hidden');
-            document.getElementById('authModal').classList.remove('flex');
-        }
-        // Show Notification
-        function showNotification(message, type = 'success') {
-            const notification = document.createElement('div');
-            notification.className = `fixed top-20 right-4 px-4 py-2 rounded-lg text-sm font-medium z-50 ${type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'}`;
-            notification.textContent = message;
-            document.body.appendChild(notification);
-            setTimeout(() => notification.remove(), 2000);
-        }
-        // ===== Search Functions =====
-        function handleSearchKeypress(event) {
-            if (event.key === 'Enter') {
-                performSearch();
-            }
-        }
-        function performSearch() {
-            const searchInput = document.getElementById('searchInput');
-            const query = searchInput.value.trim();
-            currentSearch = query;
-            currentCategory = '';
-            page = 0;
-            products = [];
-            // Update URL
-            const url = new URL(window.location);
-            if (query) {
-                url.searchParams.set('search', query);
-            } else {
-                url.searchParams.delete('search');
-            }
-            url.searchParams.delete('category');
-            window.history.replaceState({}, '', url);
-            // Update title
-            updatePageTitle(query, '');
-            // Reset category buttons
-            document.querySelectorAll('.filter-btn').forEach(btn => {
-                btn.classList.remove('active');
-                if (!btn.dataset.category) {
-                    btn.classList.add('active');
-                }
-            });
-            loadProducts();
-        }
-    </script>
-</body>
-</html>

checkout.html DELETED Viewed

@@ -1,891 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Checkout - Cellex | Nigeria's #1 Marketplace</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-        <!-- Edge function client (no Supabase SDK) + Cart module -->
-    <script src="js/config/edge-functions.js?v=3"></script>
-    <script src="js/cart.js?v=11"></script>
-<script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#fffbeb',
-                            100: '#cffafe',
-                            200: '#a5f3fc',
-                            300: '#67e8f9',
-                            400: '#00d4ff',
-                            500: '#00d4ff',
-                            600: '#0891b2',
-                            700: '#b45309',
-                        },
-                        dark: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * {
-            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
-        }
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-            100% { transform: translateY(0px); }
-        }
-        .animate-float {
-            animation: float 3s ease-in-out infinite;
-        }
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-        .fade-in-up {
-            animation: fadeInUp 0.4s ease-out forwards;
-        }
-        .input-field {
-            transition: all 0.3s ease;
-        }
-        .input-field:focus {
-            border-color: #00d4ff;
-            box-shadow: 0 0 0 15px rgba(245, 158, 11, 0.15);
-        }
-        .step-section {
-            display: none;
-        }
-        .step-section.active {
-            display: block;
-        }
-        .step-indicator {
-            transition: all 0.3s ease;
-        }
-        .step-indicator.active {
-            background: #00d4ff;
-            color: white;
-        }
-        .step-indicator.completed {
-            background: #22c55e;
-            color: white;
-        }
-        .payment-option {
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: 2px solid #e5e7eb;
-            border-radius: 12px;
-        }
-        .payment-option:hover {
-            border-color: #00d4ff;
-            transform: translateY(-2px);
-        }
-        .payment-option.selected {
-            border-color: #00d4ff;
-            background: #fef2f2;
-        }
-        .place-order-btn {
-            background: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%);
-            transition: all 0.3s ease;
-        }
-        .place-order-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 15px 30px rgba(240, 71, 74, 0.15);
-        }
-        .place-order-btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #c1c1c1;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #a1a1a1;
-        }
-    </style>
-</head>
-<body class="bg-gray-50 min-h-screen">
-    <!-- Loading Overlay -->
-    <div id="loading-overlay" class="fixed inset-0 bg-black/50 hidden z-50 flex items-center justify-center backdrop-blur-sm">
-        <div class="bg-white p-8 rounded-2xl shadow-xl">
-            <div class="flex flex-col items-center">
-                <div class="animate-spin rounded-full h-12 w-12 border-4 border-cyan-500 border-t-transparent"></div>
-                <p class="mt-4 text-gray-700 font-medium" id="loading-text">Processing your order...</p>
-            </div>
-        </div>
-    </div>
-    <!-- Error Toast -->
-    <div id="error-toast" class="fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-xl shadow-lg hidden z-50 transition-all transform translate-x-full">
-        <div class="flex items-center gap-2">
-            <i class="fas fa-exclamation-circle"></i>
-            <span id="error-message">Error message</span>
-        </div>
-    </div>
-    <!-- Success Toast -->
-    <div id="success-toast" class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg hidden z-50 transition-all transform translate-x-full">
-        <div class="flex items-center gap-2">
-            <i class="fas fa-check-circle"></i>
-            <span id="success-message">Success message</span>
-        </div>
-    </div>
-    <!-- Header -->
-    <header class="bg-white shadow-sm sticky top-0 z-40">
-        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <a href="index.html" class="flex items-center gap-2 group">
-                    <div class="w-10 h-10 flex items-center justify-center">
-                        <svg viewBox="0 0 60 60" class="w-full h-full">
-                            <defs>
-                                <linearGradient id="headerLogoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" stop-color="#00d4ff"/>
-                                    <stop offset="50%" stop-color="#00d4ff"/>
-                                    <stop offset="100%" stop-color="#0891b2"/>
-                                </linearGradient>
-                                <filter id="headerLogoGlow" x="-50%" y="-50%" width="200%" height="200%">
-                                    <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
-                                    <feMerge>
-                                        <feMergeNode in="coloredBlur"/>
-                                        <feMergeNode in="SourceGraphic"/>
-                                    </feMerge>
-                                </filter>
-                            </defs>
-                            <path d="M8 15 L8 50 Q8 54 12 54 L48 54 Q52 54 52 50 L52 15 Q52 11 48 11 L12 11 Q8 11 8 15 Z"
-                                  fill="url(#headerLogoGrad)" filter="url(#headerLogoGlow)"/>
-                            <path d="M18 11 Q18 2 30 2 Q42 2 42 11"
-                                  fill="none" stroke="url(#headerLogoGrad)" stroke-width="4" stroke-linecap="round"/>
-                            <path d="M18 24 L38 24 M18 36 L32 36 M18 48 L38 48 M18 24 L18 48"
-                                  fill="none" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/>
-                            <g transform="translate(52, 8)">
-                                <path d="M0 0 L1.5 4.5 L6 6 L1.5 7.5 L0 12 L-1.5 7.5 L-6 6 L-1.5 4.5 Z" fill="#00d4ff"/>
-                            </g>
-                        </svg>
-                    </div>
-                    <div class="flex flex-col">
-                        <span class="text-xl font-extrabold bg-gradient-to-r from-cyan-400 to-cyan-700 bg-clip-text text-transparent leading-tight">Cellex</span>
-                        <span class="text-[8px] text-gray-400 tracking-widest uppercase -mt-1">Nigeria's #1</span>
-                    </div>
-                </a>
-                <div class="flex items-center gap-4">
-                    <a href="index.html" class="text-gray-600 hover:text-cyan-500 transition-colors">
-                        <i class="fas fa-home text-xl"></i>
-                    </a>
-                    <div class="relative">
-                        <i class="fas fa-shopping-cart text-xl text-gray-600"></i>
-                        <span id="cart-count" class="absolute -top-2 -right-2 bg-cyan-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                    </div>
-                </div>
-            </div>
-        </nav>
-    </header>
-    <!-- Breadcrumb -->
-    <div class="bg-white border-b">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
-            <nav class="flex items-center space-x-2 text-sm text-gray-500">
-                <a href="index.html" class="hover:text-cyan-500 transition-colors">Home</a>
-                <i class="fas fa-chevron-right text-xs"></i>
-                <a href="cart.html" class="hover:text-cyan-500 transition-colors">Cart</a>
-                <i class="fas fa-chevron-right text-xs"></i>
-                <span class="text-gray-900 font-medium">Checkout</span>
-            </nav>
-        </div>
-    </div>
-    <!-- Progress Steps -->
-    <div class="bg-gradient-to-r from-primary-500 to-primary-600 py-3 sticky top-16 z-30">
-        <div class="max-w-7xl mx-auto px-4">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center gap-3">
-                    <div id="step-1-indicator" class="step-indicator active">
-                        <span class="flex items-center justify-center w-8 h-8 rounded-full bg-white text-cyan-500 font-bold text-sm">1</span>
-                    <span class="text-white text-sm">Shipping</span>
-                </div>
-                <div class="hidden sm:block h-1 w-px-4 border-l border-white/30"></div>
-                <div id="step-2-indicator" class="step-indicator">
-                    <span class="flex items-center justify-center w-8 h-8 rounded-full bg-white/70 text-cyan-500 font-bold text-sm">2</span>
-                    <span class="text-white/70 text-sm">Payment</span>
-                </div>
-                <div class="hidden sm:block h-1 w-px-4 border-l border-white/30"></div>
-                <div id="step-3-indicator" class="step-indicator">
-                    <span class="flex items-center justify-center w-8 h-8 rounded-full bg-white/70 text-cyan-500 font-bold text-sm">3</span>
-                    <span class="text-white/70 text-sm">Review</span>
-                </div>
-                <a href="cart.html" class="text-white text-sm hover:text-white/80 transition-colors">
-                    <i class="fas fa-arrow-left mr-2"></i>
-                    Back to Cart
-                </a>
-            </div>
-        </div>
-    </div>
-    <!-- Main Content -->
-    <main class="max-w pb-20-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- Left Column - Steps -->
-            <div class="lg:col-span-2 space-y-6">
-                <!-- Step 1: Shipping Information -->
-                <section id="step-1" class="step-section active bg-white rounded-2xl shadow-lg p-6">
-                    <div class="flex items-center gap-3 mb-6">
-                        <div class="w-10 h-10 bg-cyan-500-100 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-truck text-cyan-500 text-lg"></i>
-                        </div>
-                        <h2 class="text-xl font-bold text-gray-900">Shipping Information</h2>
-                    </div>
-                    <form id="shipping-form" class="space-y-4">
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div>
-                                <label for="fullname" class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
-                                <input type="text" id="fullname" required
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                            <div>
-                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address *</label>
-                                <input type="email" id="email" required
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                        </div>
-                        <div>
-                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number *</label>
-                            <input type="tel" id="phone" required
-                                   class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-primary/20">
-                        </div>
-                        <div>
-                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Street Address *</label>
-                            <input type="text" id="address" required
-                                   class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-primary/20">
-                        </div>
-                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-                            <div>
-                                <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City *</label>
-                                <input type="text" id="city" required
-                                       class="input-field px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                            <div>
-                                <label for="state" class="block text-sm font-medium text-gray-700 mb-1">State *</label>
-                                <input type="text" id="state" required
-                                       class="input-field px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                            <div>
-                                <label for="zipcode" class="block text-sm font-medium text-gray-700 mb-1">ZIP Code *</label>
-                                <input type="text" id="zipcode" required
-                                       class="input-field px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-primary/20">
-                            </div>
-                        </div>
-                    </form>
-                </section>
-                <!-- Step 2: Payment Method -->
-                <section id="step-2" class="step-section bg-white rounded-2xl shadow-lg p-6">
-                    <div class="flex items-center gap-3 mb-6">
-                        <div class="w-10 h-10 bg-cyan-500-100 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-credit-card text-cyan-500 text-lg"></i>
-                        </div>
-                        <h2 class="text-xl font-bold text-gray-900">Payment Method</h2>
-                    </div>
-                    <!-- EeshaPay Option -->
-                    <div class="mb-4">
-                        <label class="payment-option block p-4 border-2 border-gray-200 rounded-xl cursor-pointer" onclick="selectPayment('eeshapay')">
-                            <div class="flex items-center justify-between">
-                                <div class="flex items-center gap-3">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg flex items-center justify-center">
-                                        <span class="text-white font-bold text-xs">EeshaPay</span>
-                                    </div>
-                                    <div>
-                                        <p class="font-semibold text-gray-900">EeshaPay Wallet</p>
-                                        <p class="text-sm text-gray-500">Pay with your wallet balance</p>
-                                        <p class="text-xs text-green-600 mt-1" id="wallet-balance">Balance: Loading...</p>
-                                    </div>
-                                </div>
-                                <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center" id="eeshapay-check">
-                                    <i class="fas fa-check text-cyan-500 hidden"></i>
-                                </div>
-                            </div>
-                        </label>
-                    </div>
-                    <!-- Credit Card Option -->
-                    <div class="mb-4">
-                        <label class="payment-option block p-4 border-2 border-gray-200 rounded-xl cursor-pointer" onclick="selectPayment('card')">
-                            <div class="flex items-center justify-between">
-                                <div class="flex items-center gap-3">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-700 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-credit-card text-white text-lg"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-semibold text-gray-900">Credit / Debit Card</p>
-                                        <p class="text-sm text-gray-500">Visa, Mastercard, Amex</p>
-                                    </div>
-                                </div>
-                                <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center" id="card-check">
-                                    <i class="fas fa-check text-cyan-500 hidden"></i>
-                                </div>
-                            </div>
-                        </label>
-                    </div>
-                    <!-- PalmPay Bank Transfer Option -->
-                    <div class="mb-4">
-                        <label class="payment-option block p-4 border-2 border-gray-200 rounded-xl cursor-pointer" onclick="selectPayment('palmpay')">
-                            <div class="flex items-center justify-between">
-                                <div class="flex items-center gap-3">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-cyan-400 to-cyan-700 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-university text-white text-lg"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-semibold text-gray-900">Bank Transfer (PalmPay)</p>
-                                        <p class="text-sm text-gray-500">Transfer to PalmPay · Auto-verified via AI</p>
-                                        <p class="text-xs text-cyan-600 mt-1">✓ Instant verification — no waiting!</p>
-                                    </div>
-                                </div>
-                                <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center" id="palmpay-check">
-                                    <i class="fas fa-check text-cyan-500 hidden"></i>
-                                </div>
-                            </div>
-                        </label>
-                    </div>
-                    <!-- Cash on Delivery Option -->
-                    <div class="mb-4">
-                        <label class="payment-option block p-4 border-2 border-gray-200 rounded-xl cursor-pointer" onclick="selectPayment('cod')">
-                            <div class="flex items-center justify-between">
-                                <div class="flex items-center gap-3">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-700 rounded-lg flex items-center justify-center">
-                                        <i class="fas fa-money-bill-wave text-white text-lg"></i>
-                                    </div>
-                                    <div>
-                                        <p class="font-semibold text-gray-900">Cash on Delivery</p>
-                                        <p class="text-sm text-gray-500">Pay when you receive your order</p>
-                                        <p class="text-xs text-cyan-600 mt-1">+₦5.00 COD fee</p>
-                                    </div>
-                                </div>
-                                <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center" id="cod-check">
-                                    <i class="fas fa-check text-cyan-500 hidden"></i>
-                                </div>
-                            </div>
-                        </label>
-                    </div>
-                    <!-- Card Details Form -->
-                    <div id="card-form" class="hidden mt-4 p-4 bg-gray-50 rounded-xl">
-                        <h3 class="font-semibold text-gray-900 mb-3">Card Details</h3>
-                        <div class="space-y-4">
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Card Number</label>
-                                <input type="text" id="card-number" placeholder="1234 5678 9012 3456" maxlength="19"
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl">
-                            </div>
-                            <div class="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label>
-                                    <input type="text" id="card-expiry" placeholder="MM/YY" maxlength="7"
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
-                                    <input type="text" id="card-cvv" placeholder="123" maxlength="4"
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl">
-                                </div>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Name on Card</label>
-                                <input type="text" id="card-name" placeholder="John Doe"
-                                       class="input-field w-full px-4 py-3 border border-gray-200 rounded-xl">
-                            </div>
-                        </div>
-                    </div>
-                </section>
-                <!-- Step 3: Review & Place Order -->
-                <section id="step-3" class="step-section bg-white rounded-2xl shadow-lg p-6">
-                    <div class="flex items-center gap-3 mb-6">
-                        <div class="w-10 h-10 bg-cyan-500-100 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-check-circle text-cyan-500 text-lg"></i>
-                        </div>
-                        <h2 class="text-xl font-bold text-gray-900">Review & Place Order</h2>
-                    </div>
-                    <!-- Order Summary Review -->
-                    <div id="review-summary" class="space-y-4">
-                        <div class="bg-gray-50 rounded-xl p-4">
-                            <h4 class="text-sm font-semibold text-gray-700 mb-2">Shipping Address</h4>
-                            <p class="text-gray-600 text-sm" id="review-shipping"></p>
-                        </div>
-                        <div class="bg-gray-50 rounded-xl p-4">
-                            <h4 class="text-sm font-semibold text-gray-700 mb-2">Payment Method</h4>
-                            <p class="text-gray-600 text-sm" id="review-payment"></p>
-                        </div>
-                        <div class="bg-gray-50 rounded-xl p-4">
-                            <h4 class="text-sm font-semibold text-gray-700 mb-2">Order Items</h4>
-                            <div id="review-items" class="text-gray-600 text-sm"></div>
-                        </div>
-                    </div>
-                    <!-- Place Order Button -->
-                    <button onclick="placeOrder()" id="place-order-btn"
-                            class="place-order-btn w-full py-4 text-white font-semibold rounded-xl flex items-center justify-center gap-2">
-                        <i class="fas fa-lock"></i>
-                        <span id="place-order-text">Place Order</span>
-                    </button>
-                    <p class="text-center text-gray-500 text-sm mt-4">
-                        <i class="fas fa-shield-alt mr-1"></i>
-                        Secure checkout with SSL encryption
-                    </p>
-                </section>
-            </div>
-            <!-- Right Column - Order Summary -->
-            <div class="lg:col-span-1">
-                <div class="bg-white rounded-2xl shadow-lg p-6 sticky top-24">
-                    <h3 class="text-lg font-bold text-gray-900 mb-4">Order Summary</h3>
-                    <div id="order-items" class="space-y-4 max-h-64 overflow-y-auto mb-4">
-                        <!-- Items populated by JS -->
-                    </div>
-                    <div class="border-t pt-4 mt-4 space-y-3">
-                        <div class="flex justify-between text-gray-600">
-                            <span>Subtotal</span>
-                            <span id="subtotal" class="font-semibold text-gray-900">₦0.00</span>
-                        </div>
-                        <div class="flex justify-between text-gray-600">
-                            <span>Shipping</span>
-                            <span id="shipping-cost" class="font-semibold text-gray-900">₦0.00</span>
-                        </div>
-                        <div class="flex justify-between text-gray-600">
-                            <span>Tax (10%)</span>
-                            <span id="tax" class="font-semibold text-gray-900">₦0.00</span>
-                        </div>
-                        <div class="flex justify-between text-gray-600 pt-4 border-t border-dashed">
-                            <span>COD Fee</span>
-                            <span id="cod-fee" class="font-semibold text-cyan-600">₦0.00</span>
-                        </div>
-                        <div class="flex justify-between items-center pt-4 border-t-2 border-gray-900">
-                            <span class="text-lg font-bold text-gray-900">Total</span>
-                            <span id="total" class="text-2xl font-bold text-cyan-500">₦0.00</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Fixed Navigation -->
-        <div class="fixed bottom-6 left-6 md:left-auto md:right-6 lg:right-12 z-50 bg-white/95 backdrop-blur-sm shadow-lg rounded-full px-6 py-4 max-w-3xl mx-auto flex items-center justify-between gap-4">
-            <button id="back-btn" onclick="goBack()" class="px-6 py-3 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors">
-                <i class="fas fa-arrow-left mr-2"></i>
-                Back
-            </button>
-            <div class="flex items-center gap-4">
-                <span class="text-sm text-gray-500">Step <span id="step-label">1</span> of 3</span>
-            </div>
-            <button id="continue-btn" onclick="goNext()" class="px-6 py-3 bg-cyan-500 text-white rounded-lg hover:bg-cyan-500-600 transition-colors">
-                <span id="continue-text">Continue</span>
-                <i class="fas fa-arrow-right ml-2"></i>
-            </button>
-        </div>
-    </div>
-    <script>
-        // State
-        let currentStep = 1;
-        let pendingOrder = null;
-        let selectedPayment = 'eeshapay';
-        let currentUser = null;
-        let walletBalance = 0;
-        // Initialize
-        document.addEventListener('DOMContentLoaded', async () => {
-            await checkAuth();
-            if (currentUser) {
-                await loadCheckoutData();
-            }
-        });
-        // Check authentication
-        async function checkAuth() {
-            const { success, user } = await window.EdgeFunctions.auth.checkSession();
-            currentUser = user || null;
-            if (!currentUser) {
-                showToast('Please login to continue checkout', 'error');
-                setTimeout(() => {
-                    window.location.href = 'login.html?redirect=checkout';
-                }, 1500);
-            }
-        }
-        // Load checkout data (cart items, wallet balance, total) via edge function.
-        // The edge function returns everything prepare() needs atomically —
-        // no Supabase calls, no localStorage, no pending_orders table.
-        async function loadCheckoutData() {
-            try {
-                const result = await window.EdgeFunctions.checkout.prepare();
-                if (!result.success) {
-                    showToast(result.error || 'Failed to load checkout. Please try again.', 'error');
-                    return;
-                }
-                const cartItems = result.cartItems || [];
-                walletBalance = result.walletBalance || 0;
-                // Empty cart → redirect to cart page
-                if (!cartItems.length) {
-                    showToast('Your cart is empty. Redirecting to cart...', 'error');
-                    setTimeout(() => window.location.href = 'cart.html', 1500);
-                    return;
-                }
-                // Normalize cart items into the shape renderOrderSummary() expects.
-                const items = cartItems.map(item => ({
-                    image: item.image || item.products?.image_url || item.products?.image || '',
-                    name: item.name || item.products?.name || 'Product',
-                    quantity: item.quantity || 1,
-                    price: (item.price != null ? item.price : (item.products?.price || 0)),
-                }));
-                const subtotal = items.reduce((s, it) => s + it.price * it.quantity, 0);
-                const total = (result.total != null ? result.total : subtotal);
-                pendingOrder = {
-                    items,
-                    subtotal,
-                    shipping: 0,
-                    tax: 0,
-                    total,
-                };
-                // Update wallet balance display
-                document.getElementById('wallet-balance').textContent = `Balance: ₦${walletBalance.toFixed(2)}`;
-                renderOrderSummary();
-            } catch (error) {
-                console.error('Error loading checkout data:', error);
-                showToast('Error loading checkout. Please try again.', 'error');
-            }
-        }
-        // Render order summary in sidebar
-        function renderOrderSummary() {
-            if (!pendingOrder) return;
-            const container = document.getElementById('order-items');
-            container.innerHTML = pendingOrder.items.map(item => `
-                <div class="flex items-center gap-3 py-2">
-                    <div class="w-12 h-12 bg-gray-100 rounded-lg overflow-hidden">
-                        <img src="${item.image || 'https://via.placeholder.com/48'}" alt="${item.name}" class="w-full h-full object-cover">
-                    </div>
-                    <div class="flex-1 min-w-0">
-                        <p class="text-sm font-medium text-gray-900 truncate">${item.name}</p>
-                        <p class="text-xs text-gray-500">Qty: ${item.quantity}</p>
-                    </div>
-                    <div class="text-right">
-                        <p class="text-sm font-semibold text-gray-900">₦${(item.price * item.quantity).toFixed(2)}</p>
-                    </div>
-                </div>
-            `).join('');
-            // Update totals
-            document.getElementById('subtotal').textContent = `₦${(pendingOrder.subtotal || 0).toFixed(2)}`;
-            document.getElementById('shipping-cost').textContent = `₦${(pendingOrder.shipping || 0).toFixed(2)}`;
-            document.getElementById('tax').textContent = `₦${(pendingOrder.tax || 0).toFixed(2)}`;
-            const codFee = selectedPayment === 'cod' ? 5 : 0;
-            document.getElementById('cod-fee').textContent = `₦${codFee.toFixed(2)}`;
-            document.getElementById('cod-fee').parentElement.classList.toggle('hidden', selectedPayment !== 'cod');
-            const total = (pendingOrder.total || 0) + codFee;
-            document.getElementById('total').textContent = `₦${total.toFixed(2)}`;
-        }
-        // Step navigation
-        function showStep(step) {
-            currentStep = step;
-            // Hide all steps
-            document.querySelectorAll('.step-section').forEach(s => s.classList.remove('active'));
-            // Show current step
-            document.getElementById(`step-${step}`).classList.add('active');
-            // Update indicators
-            document.querySelectorAll('.step-indicator').forEach((indicator, index) => {
-                indicator.classList.remove('active', 'completed');
-                if (index + 1 < step) {
-                    indicator.classList.add('completed');
-                } else if (index + 1 === step) {
-                    indicator.classList.add('active');
-                }
-            });
-            // Update buttons
-            const backBtn = document.getElementById('back-btn');
-            const continueBtn = document.getElementById('continue-btn');
-            const continueText = document.getElementById('continue-text');
-            backBtn.classList.toggle('hidden', step === 1);
-            if (step === 3) {
-                continueBtn.classList.add('hidden');
-                document.getElementById('place-order-btn').classList.remove('hidden');
-            } else {
-                continueBtn.classList.remove('hidden');
-                document.getElementById('place-order-btn').classList.add('hidden');
-                continueText.textContent = step === 1 ? 'Continue to Payment' : 'Review Order';
-            }
-            // Update step label
-            document.getElementById('step-label').textContent = step;
-        }
-        function goNext() {
-            if (currentStep === 1) {
-                // Validate shipping form
-                if (!validateShippingForm()) return;
-                showStep(2);
-            } else if (currentStep === 2) {
-                showStep(3);
-                updateReview();
-            }
-        }
-        function goBack() {
-            if (currentStep > 1) {
-                showStep(currentStep - 1);
-            }
-        }
-        // Validate shipping form
-        function validateShippingForm() {
-            const fields = ['fullname', 'email', 'phone', 'address', 'city', 'state', 'zipcode'];
-            for (const field of fields) {
-                const input = document.getElementById(field);
-                if (!input.value.trim()) {
-                    showToast(`Please fill in ${field.replace('_', ' ')}`, 'error');
-                    input.focus();
-                    return false;
-                }
-            }
-            // Validate email format
-            const email = document.getElementById('email').value;
-            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-                showToast('Please enter a valid email address', 'error');
-                return false;
-            }
-            return true;
-        }
-        // Select payment method
-        function selectPayment(method) {
-            selectedPayment = method;
-            // Update UI
-            document.querySelectorAll('.payment-option').forEach(opt => {
-                opt.classList.remove('selected');
-                opt.querySelector('.fa-check').classList.add('hidden');
-            });
-            const selected = document.querySelector(`[onclick="selectPayment('${method}')"]`);
-            selected.classList.add('selected');
-            selected.querySelector('.fa-check').classList.remove('hidden');
-            // Show/hide card form
-            document.getElementById('card-form').classList.toggle('hidden', method !== 'card');
-            // Update totals if COD
-            renderOrderSummary();
-        }
-        // Update review section
-        function updateReview() {
-            // Shipping address
-            const shipping = `
-                <p>${document.getElementById('fullname').value}</p>
-                <p>${document.getElementById('address').value}</p>
-                <p>${document.getElementById('city').value}, ${document.getElementById('state').value} ${document.getElementById('zipcode').value}</p>
-            `;
-            document.getElementById('review-shipping').innerHTML = shipping;
-            // Payment method
-            let paymentText = '';
-            if (selectedPayment === 'eeshapay') {
-                paymentText = `<p class="font-semibold text-cyan-500">EeshaPay Wallet</p><p class="text-sm text-gray-500">Balance: ₦${walletBalance.toFixed(2)}</p>`;
-            } else if (selectedPayment === 'card') {
-                const last4 = document.getElementById('card-number').value.slice(-4);
-                paymentText = `<p class="font-semibold">Card ending in ${last4}</p><p class="text-sm text-gray-500">${document.getElementById('card-name').value}</p>`;
-            } else {
-                paymentText = `<p class="font-semibold text-green-600">Cash on Delivery</p><p class="text-sm text-gray-500">Pay when you receive your order (+₦5.00 fee)</p>`;
-            }
-            document.getElementById('review-payment').innerHTML = paymentText;
-            // Order items
-            const itemsHtml = pendingOrder.items.map(item => `
-                <div class="flex justify-between py-1">
-                    <span>${item.name} x ${item.quantity}</span>
-                    <span>₦${(item.price * item.quantity).toFixed(2)}</span>
-                </div>
-            `).join('');
-            document.getElementById('review-items').innerHTML = itemsHtml;
-        }
-        // Place order
-        async function placeOrder() {
-            // Skip validation for PalmPay (payment happens on the next page)
-            if (selectedPayment === 'palmpay') {
-                // Just proceed to place the order
-            } else if (selectedPayment === 'card') {
-                const cardNumber = document.getElementById('card-number').value;
-                const cardExpiry = document.getElementById('card-expiry').value;
-                const cardCvv = document.getElementById('card-cvv').value;
-                const cardName = document.getElementById('card-name').value;
-                if (!cardNumber || cardNumber.length < 16) {
-                    showToast('Please enter a valid card number', 'error');
-                return;
-                }
-                if (!cardExpiry || !cardCvv || !cardName) {
-                    showToast('Please fill in all card details', 'error');
-                return;
-                }
-            }
-            // Check EeshaPay balance
-            if (selectedPayment === 'eeshapay') {
-                if (walletBalance < pendingOrder.total) {
-                    showToast('Insufficient wallet balance. Please add funds or choose another payment method.', 'error');
-                    return;
-                }
-            }
-            // Show loading
-            showLoading(true);
-            try {
-                const shippingAddress = {
-                    fullname: document.getElementById('fullname').value,
-                    email: document.getElementById('email').value,
-                    phone: document.getElementById('phone').value,
-                    address: document.getElementById('address').value,
-                    city: document.getElementById('city').value,
-                    state: document.getElementById('state').value,
-                    zipcode: document.getElementById('zipcode').value
-                };
-                // The edge function handles ALL atomic operations server-side:
-                // debit wallet, create order, create transaction, clear cart.
-                // The frontend just calls placeOrder() and reads the result.
-                const result = await window.EdgeFunctions.checkout.placeOrder(shippingAddress);
-                if (!result.success) {
-                    throw new Error(result.error || 'Failed to place order');
-                }
-                // Update local wallet balance from server response
-                if (typeof result.newBalance === 'number') {
-                    walletBalance = result.newBalance;
-                }
-                // Show success
-                showLoading(false);
-                showToast('Order placed successfully!', 'success');
-                // Redirect to payment page (for PalmPay) or confirmation
-                setTimeout(() => {
-                    if (selectedPayment === 'palmpay') {
-                        // Build the payment URL with order details
-                        const total = pendingOrder?.total || 0;
-                        const items = pendingOrder?.items?.map(i => `${i.quantity}x ${i.product?.name || i.product_name || 'Item'}`).join(', ') || 'Order items';
-                        const count = pendingOrder?.items?.length || 1;
-                        window.location.href = `payment.html?orderId=${result.orderId}&total=${total}&items=${encodeURIComponent(items)}&count=${count}`;
-                    } else {
-                        window.location.href = `order-confirmation.html?orderId=${result.orderId}`;
-                    }
-                }, 1000);
-            } catch (error) {
-                console.error('Error placing order:', error);
-                showLoading(false);
-                showToast(error.message || 'Error placing order. Please try again.', 'error');
-            }
-        }
-        // UI Helpers
-        function showLoading(show) {
-            document.getElementById('loading-overlay').classList.toggle('hidden', !show);
-        }
-        function showToast(message, type) {
-            const toast = document.getElementById(`${type}-toast`);
-            document.getElementById(`${type}-message`).textContent = message;
-            toast.classList.remove('hidden');
-            toast.classList.remove('translate-x-full');
-            setTimeout(() => {
-                toast.classList.add('translate-x-full');
-                setTimeout(() => toast.classList.add('hidden'), 300);
-            }, 3000);
-        }
-        // Format card number input
-        document.getElementById('card-number')?.addEventListener('input', function(e) {
-            let value = e.target.value.replace(/\s/g, '').replace(/\D/g, '');
-            value = value.replace(/(\d{4})/g, '₦1 ').trim();
-            e.target.value = value;
-        });
-    </script>
-</body>
-</html>

components.json ADDED Viewed

	@@ -0,0 +1,21 @@

+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

css/common.css DELETED Viewed

@@ -1,360 +0,0 @@
-/* Base styles and variables — cyan + white futuristic theme */
-:root {
-    --primary-color: #00d4ff;
-    --secondary-color: #0891b2;
-    --success-color: #0891b2;
-    --warning-color: #00d4ff;
-    --danger-color: #ef4444;
-    --light-color: #f8f9fa;
-    --dark-color: #0f172a;
-    --gray-100: #f8f9fa;
-    --gray-200: #e9ecef;
-    --gray-300: #dee2e6;
-    --gray-400: #ced4da;
-    --gray-500: #adb5bd;
-    --gray-600: #6c757d;
-    --gray-700: #495057;
-    --gray-800: #343a40;
-    --gray-900: #212529;
-    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    --border-radius: 4px;
-    --box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    --transition: all 0.3s ease;
-}
-/* Reset styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-html {
-    font-size: 16px;
-}
-body {
-    font-family: var(--font-family);
-    line-height: 1.6;
-    color: var(--gray-800);
-    background-color: var(--gray-100);
-}
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-    margin-bottom: 1rem;
-    color: var(--gray-900);
-    line-height: 1.2;
-}
-h1 { font-size: 2.5rem; }
-h2 { font-size: 2rem; }
-h3 { font-size: 1.75rem; }
-h4 { font-size: 1.5rem; }
-h5 { font-size: 1.25rem; }
-h6 { font-size: 1rem; }
-@media (max-width: 768px) {
-    h1 { font-size: 2rem; }
-    h2 { font-size: 1.75rem; }
-    h3 { font-size: 1.5rem; }
-    h4 { font-size: 1.25rem; }
-    h5 { font-size: 1.1rem; }
-    h6 { font-size: 1rem; }
-}
-/* Container */
-.container {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 1rem;
-}
-/* Grid System */
-.grid {
-    display: grid;
-    gap: 1.5rem;
-}
-.grid-2 { grid-template-columns: repeat(2, 1fr); }
-.grid-3 { grid-template-columns: repeat(3, 1fr); }
-.grid-4 { grid-template-columns: repeat(4, 1fr); }
-@media (max-width: 1024px) {
-    .grid-4 { grid-template-columns: repeat(3, 1fr); }
-}
-@media (max-width: 768px) {
-    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
-}
-@media (max-width: 480px) {
-    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
-}
-/* Buttons */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.8rem 1.5rem;
-    border: none;
-    border-radius: var(--border-radius);
-    font-size: 1rem;
-    font-weight: 500;
-    text-decoration: none;
-    cursor: pointer;
-    transition: var(--transition);
-}
-.btn-primary {
-    background-color: var(--primary-color);
-    color: white;
-}
-.btn-primary:hover {
-    background-color: #d63d40;
-}
-.btn-secondary {
-    background-color: var(--secondary-color);
-    color: white;
-}
-.btn-outline {
-    background-color: transparent;
-    border: 2px solid var(--primary-color);
-    color: var(--primary-color);
-}
-.btn-outline:hover {
-    background-color: var(--primary-color);
-    color: white;
-}
-/* Forms */
-.form-group {
-    margin-bottom: 1rem;
-}
-.form-label {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: var(--gray-700);
-    font-weight: 500;
-}
-.form-control {
-    width: 100%;
-    padding: 0.8rem;
-    border: 2px solid var(--gray-300);
-    border-radius: var(--border-radius);
-    font-size: 1rem;
-    transition: var(--transition);
-}
-.form-control:focus {
-    border-color: var(--primary-color);
-    outline: none;
-}
-/* Cards */
-.card {
-    background-color: white;
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
-    overflow: hidden;
-    transition: var(--transition);
-}
-.card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-}
-.card-img {
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
-}
-.card-body {
-    padding: 1.5rem;
-}
-.card-title {
-    margin-bottom: 0.5rem;
-    font-size: 1.25rem;
-}
-.card-text {
-    color: var(--gray-600);
-    margin-bottom: 1rem;
-}
-/* Navigation */
-.navbar {
-    background-color: white;
-    padding: 1rem;
-    box-shadow: var(--box-shadow);
-}
-.navbar-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.navbar-brand {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: var(--primary-color);
-    text-decoration: none;
-}
-.navbar-nav {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-}
-.nav-link {
-    color: var(--gray-700);
-    text-decoration: none;
-    transition: var(--transition);
-}
-.nav-link:hover {
-    color: var(--primary-color);
-}
-.mobile-menu-btn {
-    display: none;
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: var(--gray-700);
-}
-@media (max-width: 768px) {
-    .mobile-menu-btn {
-        display: block;
-    }
-    .navbar-nav {
-        display: none;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        right: 0;
-        background-color: white;
-        padding: 1rem;
-        box-shadow: var(--box-shadow);
-        flex-direction: column;
-        gap: 1rem;
-    }
-    .navbar-nav.active {
-        display: flex;
-    }
-}
-/* Utilities */
-.text-primary { color: var(--primary-color); }
-.text-secondary { color: var(--secondary-color); }
-.text-success { color: var(--success-color); }
-.text-warning { color: var(--warning-color); }
-.text-danger { color: var(--danger-color); }
-.bg-primary { background-color: var(--primary-color); }
-.bg-secondary { background-color: var(--secondary-color); }
-.bg-success { background-color: var(--success-color); }
-.bg-warning { background-color: var(--warning-color); }
-.bg-danger { background-color: var(--danger-color); }
-.mt-1 { margin-top: 0.5rem; }
-.mt-2 { margin-top: 1rem; }
-.mt-3 { margin-top: 1.5rem; }
-.mt-4 { margin-top: 2rem; }
-.mt-5 { margin-top: 2.5rem; }
-.mb-1 { margin-bottom: 0.5rem; }
-.mb-2 { margin-bottom: 1rem; }
-.mb-3 { margin-bottom: 1.5rem; }
-.mb-4 { margin-bottom: 2rem; }
-.mb-5 { margin-bottom: 2.5rem; }
-.p-1 { padding: 0.5rem; }
-.p-2 { padding: 1rem; }
-.p-3 { padding: 1.5rem; }
-.p-4 { padding: 2rem; }
-.p-5 { padding: 2.5rem; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
-.text-left { text-align: left; }
-.d-flex { display: flex; }
-.align-items-center { align-items: center; }
-.justify-content-center { justify-content: center; }
-.justify-content-between { justify-content: space-between; }
-.flex-column { flex-direction: column; }
-.flex-wrap { flex-wrap: wrap; }
-.hidden { display: none; }
-.visible { display: block; }
-@media (max-width: 768px) {
-    .hidden-mobile { display: none; }
-}
-@media (min-width: 769px) {
-    .hidden-desktop { display: none; }
-}
-/* Animations */
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-@keyframes slideIn {
-    from { transform: translateY(-20px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
-}
-.fade-in {
-    animation: fadeIn 0.3s ease-in-out;
-}
-.slide-in {
-    animation: slideIn 0.3s ease-in-out;
-}
-/* === PRODUCTION FONT SIZES (Temu/AliExpress/Amazon style) === */
-/* Smaller, denser text for better information density */
-html { font-size: 14px; }  /* Base size down from 16px */
-body { font-size: 0.875rem; }  /* 14px */
-h1 { font-size: 1.25rem; }  /* 20px — was 2.5rem */
-h2 { font-size: 1.125rem; }  /* 18px — was 2rem */
-h3 { font-size: 1rem; }  /* 16px — was 1.75rem */
-h4 { font-size: 0.9375rem; }  /* 15px — was 1.5rem */
-h5 { font-size: 0.875rem; }  /* 14px — was 1.25rem */
-h6 { font-size: 0.8125rem; }  /* 13px — was 1rem */
-p, span, div, a, button, input, select, textarea { font-size: 0.8125rem; }  /* 13px */
-.text-xs { font-size: 0.625rem !important; }  /* 10px — for badges, meta */
-.text-sm { font-size: 0.75rem !important; }  /* 12px */
-.text-base { font-size: 0.8125rem !important; }  /* 13px */
-.text-lg { font-size: 0.9375rem !important; }  /* 15px */
-.text-xl { font-size: 1.0625rem !important; }  /* 17px */
-.text-2xl { font-size: 1.25rem !important; }  /* 20px */
-.text-3xl { font-size: 1.5rem !important; }  /* 24px */
-@media (max-width: 768px) {
-    html { font-size: 13px; }
-    h1 { font-size: 1.125rem; }
-    h2 { font-size: 1rem; }
-    h3 { font-size: 0.9375rem; }
-}

css/index.css DELETED Viewed

@@ -1,747 +0,0 @@
-/* ============================================================
-  EESHA MARKETPLACE - PROFESSIONAL CSS STYLESHEET
-  Extracted from Site123 template with custom refinements
-  Dark theme with beige accents, Caladea typography
-============================================================ */
-/* Fonts (Caladea) */
-@font-face {
-  font-family: 'Caladea';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJExBugZ7AAjhybUvR1N9vo3huR_DaS8.woff2) format('woff2');
-}
-@font-face {
-  font-family: 'Caladea';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJExBugZ7AAjhybUvR1N-Po3huR_DQ.woff2) format('woff2');
-}
-@font-face {
-  font-family: 'Caladea';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJE0BugZ7AAjhybUvR1FQ98ipcZyJ561DbZg.woff2) format('woff2');
-}
-@font-face {
-  font-family: 'Caladea';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJE0BugZ7AAjhybUvR1FQ98iq8ZyJ561DQ.woff2) format('woff2');
-}
-@font-face {
-  font-family: 'Caladea';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJEzBugZ7AAjhybUvRZ9-vAwpOZPDA.woff2) format('woff2');
-}
-@font-face {
-  font-family: 'Caladea';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJEzBugZ7AAjhybUvRh9-vAwpOY.woff2) format('woff2');
-}
-@font-face {
-  font-family: 'Caladea';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJE2BugZ7AAjhybUtaNY79MSqcx1BZyFDA.woff2) format('woff2');
-}
-@font-face {
-  font-family: 'Caladea';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/caladea/v8/kJE2BugZ7AAjhybUtaNY790Sqcx1BZw.woff2) format('woff2');
-}
-/* Top-level CSS variables (copied from index copy.html) */
-:root {
-  --global_main_color: #f8dcbf;
-  --global_main_color_btn_text_color: #5c340a;
-  --home_text_color: #ffffff;
-  --home_third_background_color: #000000;
-  --home_custom_image_size: px;
-  --home_custom_image_width: px;
-  --home_text_size_px: 71px;
-  --home_text_size_2_px: 45px;
-  --slogan_text_size_px: 22px;
-  --home_text_size: 71;
-  --home_text_size_2: 45;
-  --slogan_text_size: 22;
-  --home_text_size_px_media: 71px;
-  --home_text_size_2_px_media: 45px;
-  --slogan_text_size_px_media: 22px;
-  --layout_text_align: center;
-  --layout_text_align_rtl: center;
-  --layout_text_box_width: 100%;
-  --layout_left_side_width: 50%;
-  --layout_left_side_width_vh: 50vh;
-  --homepage_layout_height: 75%;
-  --homepage_layout_height_vh: 75vh;
-  --homepage_layout_height_menu_space: 0px;
-  --mainNavMobileHeight: 0px;
-  --homepage_layout_height_opacity_space_top: 0px;
-  --homepage_layout_height_opacity_space_bottom: 0px;
-  --mobileMenuFontSize: 20px;
-  --mobileMenuPagesSpace: 5px;
-  --homepageShapeDividerList_Size: 17%;
-  --layout_bottom_spacing: 0px;
-  --window-height: 100vh;
-  --window-width: 100vw;
-  --menu_font_size: 17px;
-  --menu_pages_space: 3px;
-  --menu_pages_side_padding: 20px;
-  --menu_pages_letter_spacing: 1.3px;
-  --menu_pages_word_spacing: 0px;
-  --menu_thin_border: #1b262c;
-  --mobileMenuTextAlign: center;
-  --menu_text_color: #fae6d1;
-  --menu_text_hover_color: #fae6d1;
-  --menu_color: #1b262c;
-  --modules_color_text: #ffffff;
-  --modules_color_text_second: #ffffff;
-  --inside_modules_color_text: #ffffff;
-  --sectionsPadding: 100px;
-  --home_text_top_space_1: 0px;
-  --home_text_bottom_space_1: 16px;
-  --home_text_top_space_2: 0px;
-  --home_text_bottom_space_2: 30px;
-  --home_text_top_space_3: 0px;
-  --home_text_bottom_space_3: 20px;
-  --homepage_padding_top: px;
-  --homepage_padding_bottom: px;
-  --homepage_main_goal_margin_top: 0px;
-  --homepage_main_goal_margin_bottom: 0px;
-  --homepage_second_goal_margin_top: 0px;
-  --homepage_second_goal_margin_bottom: 0px;
-  --modules_color_second: #000000;
-  --modules_color: #1b262c;
-  --footer_back: #1b262c;
-  --footer_text_hover: #f8dcbf;
-  --footer_links_color: #f8dcbf;
-  --footer_text: #ffffff;
-  --home_background_color: #000000;
-  --inside_modules_color_box: #1b262c;
-  --inside_modules_color_text_box: #ffffff;
-  --module_separate_border_color: ;
-  --modules_color_box: #000000;
-  --modules_color_second_box: #1b262c;
-  --modules_color_text_second_box: #ffffff;
-  --inside_modules_color: #000000;
-  --modules_color_text_box: #ffffff;
-  --font_logo: ;
-  --font_menu: Caladea;
-  --global_font: Caladea;
-  --font_slogan: ;
-  --font_slogan_2: ;
-  --font_second_slogan: ;
-  --font_modules_header: Caladea;
-  --sticky_menu: 1;
-  --scrollHeaderSize: 0px;
-  --modules_color_section_main: #f8dcbf;
-  --modules_color_section_btn_text: #5c340a;
-  --modules_color_second_section_main: #f8dcbf;
-  --modules_color_second_section_btn_text: #5c340a;
-  --inside_modules_color_section_box_main: #f8dcbf;
-  --inside_modules_color_section_btn_text: #5c340a;
-  --line_height_modules_header: 1.25;
-  --global_line_height: 1.25;
-}
-/* Base styles */
-html, body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  background: var(--home_background_color, #000);
-  color: var(--modules_color_text, #fff);
-  font-family: var(--global_font, Caladea), system-ui, -apple-system, serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-/* Header styling - clean Site123 nav with polish */
-.header-s123 {
-  background: linear-gradient(180deg, var(--menu_color, #1b262c) 0%, rgba(27, 38, 44, 0.98) 100%);
-  color: var(--menu_text_color, #fae6d1);
-  display: flex;
-  align-items: center;
-  height: auto;
-  padding: 1.2rem 2rem;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 50;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
-  border-bottom: 2px solid rgba(248, 220, 191, 0.1);
-}
-.navbar-s123 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 1400px;
-  margin: 0 auto;
-  gap: 3rem;
-}
-.nav-brand {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-.site-title {
-  font-family: var(--global_font, Caladea), serif;
-  font-size: 1.6rem;
-  font-weight: 700;
-  color: var(--modules_color_section_main, #f8dcbf);
-  margin: 0;
-  letter-spacing: 1.2px;
-  text-transform: uppercase;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-}
-.nav-menu {
-  display: flex;
-  align-items: center;
-  gap: 3rem;
-  flex: 1;
-  justify-content: center;
-}
-.nav-link {
-  font-family: var(--font_menu, Caladea), serif;
-  color: var(--menu_text_color, #fae6d1);
-  text-decoration: none;
-  font-size: 0.98rem;
-  font-weight: 600;
-  letter-spacing: 0.8px;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  border-bottom: 2px solid transparent;
-  padding-bottom: 6px;
-  text-transform: uppercase;
-}
-.nav-link:hover {
-  color: var(--modules_color_section_main, #f8dcbf);
-  border-bottom-color: var(--modules_color_section_main, #f8dcbf);
-  transform: translateY(-1px);
-}
-.nav-actions {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 1.75rem;
-}
-.cart-link {
-  color: var(--menu_text_color, #fae6d1);
-  font-size: 1.3rem;
-  position: relative;
-  text-decoration: none;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-}
-.cart-link:hover {
-  color: var(--modules_color_section_main, #f8dcbf);
-  transform: scale(1.1);
-}
-.cart-badge {
-  position: absolute;
-  top: -6px;
-  right: -10px;
-  background: linear-gradient(135deg, var(--modules_color_section_main, #f8dcbf) 0%, #f0d4b0 100%);
-  color: var(--modules_color_section_btn_text, #5c340a);
-  font-size: 0.7rem;
-  font-weight: 700;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 6px rgba(248, 220, 191, 0.3);
-  animation: pulse-badge 2s infinite;
-}
-@keyframes pulse-badge {
-  0%, 100% {
-    box-shadow: 0 2px 6px rgba(248, 220, 191, 0.3);
-  }
-  50% {
-    box-shadow: 0 2px 10px rgba(248, 220, 191, 0.5);
-  }
-}
-/* Main content */
-main {
-  margin-top: 70px;
-}
-section {
-  padding: 3rem 2rem;
-  background: var(--home_background_color, #000);
-  color: var(--modules_color_text, #fff);
-}
-/* Section headers */
-.page-header-wrap {
-  text-align: center;
-  margin-bottom: 2rem;
-}
-.s123-page-header {
-  font-family: var(--font_modules_header, Caladea), serif;
-  font-size: 1.8rem;
-  font-weight: 700;
-  color: var(--modules_color_text, #fff);
-  text-transform: uppercase;
-  letter-spacing: 1.5px;
-  margin: 0 0 1rem 0;
-  line-height: var(--line_height_modules_header, 1.25);
-}
-.page-header-wrap .small {
-  display: block;
-  width: 80px;
-  height: 2px;
-  background: var(--modules_color_section_main, #f8dcbf);
-  margin: 0 auto;
-  border: none;
-}
-/* Container utilities */
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-.container-fluid {
-  width: 100%;
-  padding: 0 2rem;
-}
-/* Collection/Category boxes */
-.collection-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
-  padding: 2rem 0;
-}
-.e-c-box {
-  position: relative;
-}
-.box {
-  position: relative;
-  overflow: hidden;
-  border-radius: 12px;
-  background: var(--inside_modules_color_box, #1b262c);
-  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  cursor: pointer;
-  border: 1px solid rgba(248, 220, 191, 0.1);
-}
-.box:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
-  border-color: rgba(248, 220, 191, 0.3);
-}
-.image-container {
-  display: block;
-  width: 100%;
-  text-decoration: none;
-  color: inherit;
-}
-.collection-image {
-  width: 100%;
-  height: 280px;
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  align-items: flex-end;
-  position: relative;
-  transition: transform 0.4s ease;
-}
-.box:hover .collection-image {
-  transform: scale(1.05);
-}
-.s123-image-ratio-1-1 {
-  aspect-ratio: 1 / 1;
-  height: auto;
-}
-.title-container {
-  padding: 1.5rem;
-  background: rgba(0,0,0,0.8);
-  color: var(--inside_modules_color_text_box, #fff);
-  text-align: center;
-}
-.title {
-  font-family: var(--font_modules_header, Caladea), serif;
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: var(--modules_color_text_box, #fff);
-  margin: 0 0 0.5rem 0;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-.count {
-  font-size: 0.85rem;
-  color: var(--modules_color_text_box, #fff);
-  opacity: 0.85;
-}
-.count-txt {
-  margin-left: 0.25rem;
-}
-/* Services section */
-.services-category {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 2rem;
-}
-.service-item {
-  text-align: center;
-  padding: 2rem 1rem;
-}
-.service-item h4 {
-  font-family: var(--font_modules_header, Caladea), serif;
-  font-size: 1.1rem;
-  color: var(--modules_color_text, #fff);
-  margin: 1rem 0 0.75rem 0;
-}
-.service-item p {
-  font-size: 0.95rem;
-  line-height: 1.6;
-  color: var(--modules_color_text, #fff);
-  opacity: 0.9;
-}
-/* Testimonials */
-.testimonials-category {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 2rem;
-}
-.testimonials-text-container .box {
-  background: var(--inside_modules_color_box, #1b262c);
-  padding: 1.5rem;
-  border-radius: 8px;
-}
-.testimonials-text-container blockquote {
-  margin: 0 0 1rem 0;
-}
-.testimonials-text-container p {
-  font-size: 0.95rem;
-  line-height: 1.6;
-  color: var(--modules_color_text_box, #fff);
-  margin: 0 0 1rem 0;
-  font-style: italic;
-}
-.testimonials-img {
-  width: 100%;
-  height: 150px;
-  margin-bottom: 1rem;
-  border-radius: 8px;
-  overflow: hidden;
-}
-.img-bg {
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  background-position: center;
-}
-.testimonials-wrap {
-  text-align: center;
-}
-.testimonials-name {
-  font-family: var(--font_modules_header, Caladea), serif;
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--modules_color_text_box, #fff);
-}
-.testimonials-role {
-  font-size: 0.85rem;
-  color: var(--modules_color_section_main, #f8dcbf);
-}
-/* Contact form */
-.s123-module-contact-form {
-  max-width: 800px;
-  margin: 0 auto;
-}
-.form-group {
-  margin-bottom: 1rem;
-}
-.form-control {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid rgba(248, 220, 191, 0.3);
-  border-radius: 4px;
-  background: rgba(0,0,0,0.3);
-  color: var(--modules_color_text_box, #fff);
-  font-family: inherit;
-  font-size: 0.95rem;
-}
-.form-control:focus {
-  outline: none;
-  border-color: var(--modules_color_section_main, #f8dcbf);
-  background: rgba(0,0,0,0.5);
-}
-.form-control::placeholder {
-  color: rgba(248, 220, 191, 0.5);
-}
-.btn {
-  display: inline-block;
-  padding: 0.85rem 2.5rem;
-  border-radius: 6px;
-  background: linear-gradient(135deg, var(--modules_color_section_main, #f8dcbf) 0%, #f0d4b0 100%);
-  color: var(--modules_color_section_btn_text, #5c340a);
-  border: 2px solid var(--modules_color_section_main, #f8dcbf);
-  cursor: pointer;
-  font-family: var(--font_modules_header, Caladea), serif;
-  font-size: 0.98rem;
-  font-weight: 700;
-  letter-spacing: 0.8px;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  box-shadow: 0 4px 12px rgba(248, 220, 191, 0.2);
-  text-transform: uppercase;
-}
-.btn:hover {
-  background: linear-gradient(135deg, #f0d4b0 0%, var(--modules_color_section_main, #f8dcbf) 100%);
-  transform: translateY(-3px);
-  box-shadow: 0 6px 20px rgba(248, 220, 191, 0.35);
-}
-.btn:active {
-  transform: translateY(-1px);
-}
-.btn-primary {
-  background: linear-gradient(135deg, var(--modules_color_section_main, #f8dcbf) 0%, #f0d4b0 100%);
-  color: var(--modules_color_section_btn_text, #5c340a);
-}
-/* Footer */
-footer {
-  background: linear-gradient(180deg, var(--footer_back, #1b262c) 0%, rgba(27, 38, 44, 0.95) 100%);
-  color: var(--footer_text, #fff);
-  padding: 3.5rem 2rem 2rem 2rem;
-  margin-top: 3rem;
-  border-top: 2px solid rgba(248, 220, 191, 0.1);
-}
-footer .container {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-footer .grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 2.5rem;
-  margin-bottom: 2.5rem;
-}
-footer h3 {
-  font-family: var(--font_modules_header, Caladea), serif;
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: var(--modules_color_section_main, #f8dcbf);
-  margin: 0 0 1.25rem 0;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-footer p {
-  font-size: 0.92rem;
-  line-height: 1.7;
-  color: var(--footer_text, #fff);
-  opacity: 0.85;
-  margin: 0;
-}
-footer ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-footer li {
-  margin-bottom: 0.85rem;
-}
-footer a {
-  color: var(--footer_links_color, #f8dcbf);
-  text-decoration: none;
-  font-size: 0.92rem;
-  transition: all 0.3s ease;
-}
-footer a:hover {
-  color: var(--footer_text_hover, #fff);
-  text-decoration: underline;
-  margin-left: 4px;
-}
-.footer-icons {
-  display: flex;
-  gap: 1.2rem;
-}
-.footer-icons a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: rgba(248, 220, 191, 0.12);
-  border-radius: 50%;
-  font-size: 1.2rem;
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  border: 1px solid rgba(248, 220, 191, 0.2);
-}
-.footer-icons a:hover {
-  background: linear-gradient(135deg, var(--modules_color_section_main, #f8dcbf) 0%, #f0d4b0 100%);
-  color: var(--modules_color_section_btn_text, #5c340a);
-  transform: translateY(-3px);
-  box-shadow: 0 8px 20px rgba(248, 220, 191, 0.25);
-}
-.footer-bottom {
-  border-top: 1px solid rgba(248, 220, 191, 0.15);
-  padding-top: 1.75rem;
-  text-align: center;
-  font-size: 0.88rem;
-  color: var(--footer_text, #fff);
-  opacity: 0.75;
-  letter-spacing: 0.3px;
-}
-/* Utility classes */
-.flex {
-  display: flex;
-}
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.gap-2 {
-  gap: 0.5rem;
-}
-.justify-center {
-  justify-content: center;
-}
-.mb-4 {
-  margin-bottom: 1rem;
-}
-.mt-6 {
-  margin-top: 1.5rem;
-}
-.w-full {
-  width: 100%;
-}
-.title-container {
-  padding: 1.75rem;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.95) 100%);
-  color: var(--inside_modules_color_text_box, #fff);
-  text-align: center;
-}
-.title {
-  font-family: var(--font_modules_header, Caladea), serif;
-  font-size: 1.35rem;
-  font-weight: 700;
-  color: var(--modules_color_section_main, #f8dcbf);
-  margin: 0 0 0.5rem 0;
-  text-transform: uppercase;
-  letter-spacing: 1.2px;
-  transition: color 0.3s ease;
-}
-.box:hover .title {
-  color: #fff;
-}
-.count {
-  font-size: 0.88rem;
-  color: var(--modules_color_text_box, #fff);
-  opacity: 0.8;
-  letter-spacing: 0.5px;
-.col-sm-6 {
-  grid-column: span 6;
-}
-/* Responsive */
-@media (max-width: 768px) {
-  .nav-menu {
-    gap: 1.5rem;
-    font-size: 0.85rem;
-  }
-  .site-title {
-    font-size: 1.2rem;
-  }
-  .s123-page-header {
-    font-size: 1.5rem;
-  }
-  .collection-container {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1rem;
-  }
-  footer .grid {
-    grid-template-columns: 1fr;
-  }
-}

css/loader.css DELETED Viewed

File without changes

css/product.css DELETED Viewed

File without changes

css/style.css DELETED Viewed

@@ -1,281 +0,0 @@
-/* Reset and base styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    line-height: 1.6;
-    background-color: #f5f5f5;
-}
-/* Header styles */
-.navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 2rem;
-    background-color: #fff;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-.logo h1 {
-    color: #00d4ff;
-    font-size: 2rem;
-}
-.search-bar {
-    flex: 1;
-    max-width: 600px;
-    margin: 0 2rem;
-    display: flex;
-}
-.search-bar input {
-    width: 100%;
-    padding: 0.8rem;
-    border: 2px solid #ddd;
-    border-radius: 4px 0 0 4px;
-    font-size: 1rem;
-}
-.search-bar button {
-    padding: 0.8rem 1.5rem;
-    background-color: #00d4ff;
-    border: none;
-    border-radius: 0 4px 4px 0;
-    color: white;
-    cursor: pointer;
-}
-.nav-links {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-.nav-links a {
-    text-decoration: none;
-    color: #333;
-    padding: 0.5rem 1rem;
-}
-.login-btn, .signup-btn {
-    border: 2px solid #00d4ff;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-}
-.login-btn:hover, .signup-btn:hover {
-    background-color: #00d4ff;
-    color: white;
-}
-.cart-btn {
-    position: relative;
-}
-.cart-count {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    background-color: #00d4ff;
-    color: white;
-    border-radius: 50%;
-    padding: 0.2rem 0.5rem;
-    font-size: 0.8rem;
-}
-/* Categories menu */
-.categories {
-    background-color: #333;
-    padding: 0.5rem 2rem;
-}
-.categories ul {
-    display: flex;
-    list-style: none;
-    gap: 2rem;
-}
-.categories a {
-    color: white;
-    text-decoration: none;
-    font-size: 0.9rem;
-}
-/* Hero section */
-.hero {
-    margin: 2rem 0;
-    padding: 0 2rem;
-}
-.hero-slider {
-    height: 400px;
-    background-color: #ddd;
-    border-radius: 8px;
-    margin-bottom: 2rem;
-}
-/* Product grid */
-.product-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 2rem;
-    padding: 2rem;
-}
-.product-card {
-    background: white;
-    border-radius: 8px;
-    padding: 1rem;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    transition: transform 0.3s ease;
-}
-.product-card:hover {
-    transform: translateY(-5px);
-}
-.product-card img {
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
-    border-radius: 4px;
-}
-.product-card h3 {
-    margin: 1rem 0;
-    font-size: 1.1rem;
-}
-.product-card .price {
-    color: #00d4ff;
-    font-weight: bold;
-    font-size: 1.2rem;
-}
-/* AI Assistant */
-.ai-chat-widget {
-    position: fixed;
-    bottom: 2rem;
-    right: 2rem;
-}
-#openAIChat {
-    background-color: #00d4ff;
-    color: white;
-    border: none;
-    padding: 1rem 2rem;
-    border-radius: 50px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    box-shadow: 0 2px 10px rgba(240,71,74,0.3);
-}
-/* Modal styles */
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,0.5);
-}
-.modal-content {
-    background-color: white;
-    width: 90%;
-    max-width: 500px;
-    margin: 2rem auto;
-    border-radius: 8px;
-    padding: 2rem;
-}
-.chat-container {
-    height: 500px;
-    display: flex;
-    flex-direction: column;
-}
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    margin-bottom: 1rem;
-}
-.chat-input {
-    display: flex;
-    gap: 1rem;
-}
-.chat-input input {
-    flex: 1;
-    padding: 0.8rem;
-    border: 2px solid #ddd;
-    border-radius: 4px;
-}
-.chat-input button {
-    padding: 0.8rem 1.5rem;
-    background-color: #00d4ff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-/* Footer styles */
-footer {
-    background-color: #333;
-    color: white;
-    padding: 3rem 2rem 1rem;
-    margin-top: 3rem;
-}
-.footer-content {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 2rem;
-    margin-bottom: 2rem;
-}
-.footer-section h3 {
-    margin-bottom: 1rem;
-}
-.footer-section ul {
-    list-style: none;
-}
-.footer-section ul li {
-    margin-bottom: 0.5rem;
-}
-.footer-section a {
-    color: white;
-    text-decoration: none;
-}
-.social-links {
-    display: flex;
-    gap: 1rem;
-}
-.social-links a {
-    font-size: 1.5rem;
-}
-.footer-bottom {
-    text-align: center;
-    padding-top: 2rem;
-    border-top: 1px solid #555;
-}

css/styles.css DELETED Viewed

File without changes

dist/style.css DELETED Viewed

@@ -1 +0,0 @@

- body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#f9fafb;color:#222}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.header{background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 2px 8px 0 rgba(0,0,0,.02)}.header-flex{justify-content:space-between;height:64px;position:relative}.header-flex,.logo{display:flex;align-items:center}.logo{font-weight:700;font-size:1.3rem;color:#222;text-decoration:none}#logo{width:50px;height:50px}.logo-icon{background:#6366f1;color:#fff;border-radius:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin-right:8px;font-size:1.1rem}.nav{display:flex;gap:2rem}.nav a{color:#444;text-decoration:none;font-weight:500;transition:color .2s}.nav a:hover{color:#6366f1}.auth-btns{display:flex;gap:1rem}.btn{display:inline-block;padding:.6em 1.5em;border-radius:6px;font-size:1rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:background .2s,color .2s}.btn-primary{background:#6366f1;color:#fff}.btn-primary:hover{background:#4f46e5}.btn-outline{background:#fff;color:#6366f1;border:2px solid #6366f1}.btn-outline:hover{background:#f1f5f9}.btn-ghost{background:none;color:#6366f1}.hero{background:#fff;padding:4rem 0 3rem}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.hero-content h1{font-size:2.5rem;font-weight:700;color:#222;margin-bottom:1rem}.hero-content .primary{color:#6366f1}.hero-content p{font-size:1.2rem;color:#555;margin-bottom:2rem}.hero-actions{display:flex;gap:1rem;margin-bottom:1.5rem}.hero-list{list-style:none;padding:0;color:#6366f1;font-size:1rem;display:flex;gap:1.5rem}.hero-image{position:relative}.hero-image img{width:100%;border-radius:18px;box-shadow:0 8px 32px 0 rgba(0,0,0,.08)}.live-badge{position:absolute;left:1rem;bottom:1rem;background:#fff;color:#222;border-radius:8px;padding:.5em 1em;font-size:.95rem;box-shadow:0 2px 8px 0 rgba(0,0,0,.08);border:1px solid #e5e7eb}.features{background:#f9fafb;padding:4rem 0}.features h2{text-align:center;font-size:2rem;font-weight:700;margin-bottom:.5rem}.features .subtitle{text-align:center;color:#555;margin-bottom:2.5rem}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.feature-card{background:#fff;border-radius:14px;box-shadow:0 2px 8px 0 rgba(0,0,0,.04);padding:2rem 1.5rem;text-align:left;border:1px solid #f1f5f9}.feature-icon{font-size:2rem;margin-bottom:1rem;color:#6366f1}.feature-card h3{font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.feature-card p{color:#555;margin-bottom:1rem}.feature-card ul{list-style:none;padding:0;color:#6366f1;font-size:1rem}.pricing{background:#f9fafb;padding:4rem 0 2rem}.pricing h2{text-align:center;font-size:2rem;font-weight:700;margin-bottom:.5rem}.pricing .subtitle{text-align:center;color:#555;margin-bottom:2.5rem}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.pricing-card{background:#fff;border-radius:14px;box-shadow:0 2px 8px 0 rgba(0,0,0,.04);padding:2rem 1.5rem;text-align:center;border:1px solid #e5e7eb;position:relative}.pricing-card.popular{border:2px solid #6366f1}.pricing-card .badge{position:absolute;top:-1.2rem;left:50%;transform:translateX(-50%);background:#f59e42;color:#fff;padding:.3em 1em;border-radius:8px;font-size:.95rem;font-weight:600}.pricing-card h3{font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.pricing-card .price{font-size:2rem;font-weight:700;margin-bottom:.5rem}.pricing-card .price span{font-size:1rem;color:#6366f1;margin-left:.2em}.pricing-card ul{list-style:none;padding:0;color:#6366f1;font-size:1rem;margin-bottom:1.5rem}.pricing-footer{text-align:center;margin-top:2.5rem}.pricing-footer p{color:#555;margin-bottom:1rem}.pricing-icons{display:flex;justify-content:center;gap:2rem;color:#6366f1;font-size:1.1rem}.footer{background:#222;color:#fff;padding:3rem 0 1.5rem}.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:2rem}.footer .logo{font-weight:700;font-size:1.2rem;margin-bottom:1rem}.footer .logo,.footer .logo-icon{display:flex;align-items:center;color:#fff}.footer .logo-icon{background:#6366f1;border-radius:8px;width:32px;height:32px;justify-content:center;margin-right:8px;font-size:1.1rem}.footer-desc{color:#bbb;margin-bottom:1rem}.footer-socials a{font-size:1.3rem;margin-right:1rem;color:#bbb;text-decoration:none}.footer-socials a:hover{color:#fff}.footer h4{font-size:1.1rem;font-weight:600;margin-bottom:1rem}.footer ul{list-style:none;padding:0;color:#bbb;font-size:1rem}.footer ul li{margin-bottom:.5rem}.footer ul a{color:#bbb;text-decoration:none;transition:color .2s}.footer ul a:hover{color:#fff}.footer-bottom{border-top:1px solid #444;padding-top:1.2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;color:#bbb;font-size:.95rem}.footer-links a{color:#bbb;margin-left:1.5rem;text-decoration:none}.footer-links a:hover{color:#fff}.auth-section{background:#f3f4f6;min-height:80vh;display:flex;align-items:center;justify-content:center;padding:3rem 0}.auth-container{background:#fff;border-radius:18px;box-shadow:0 4px 32px 0 rgba(99,102,241,.08);padding:2.5rem 2rem 2rem;max-width:400px;width:100%;margin:0 auto}.auth-toggle{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.toggle-btn{background:#f3f4f6;border:none;padding:.7em 1.5em;border-radius:6px 6px 0 0;font-size:1rem;font-weight:600;color:#6366f1;cursor:pointer;transition:background .2s,color .2s}.toggle-btn.active{background:#6366f1;color:#fff;box-shadow:0 2px 8px 0 rgba(99,102,241,.08)}.auth-form{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem;animation:fadeIn .3s}.auth-form h2{text-align:center;color:#6366f1;margin-bottom:.5rem}.auth-form label{font-weight:500;color:#222;margin-bottom:.2rem}.auth-form input{padding:.7em 1em;border-radius:6px;border:1.5px solid #e5e7eb;font-size:1rem;background:#f9fafb;transition:border .2s}.auth-form input:focus{border:1.5px solid #6366f1;outline:none}.auth-form button[type=submit]{margin-top:.5rem}.auth-switch{text-align:center;color:#555;font-size:.98rem}.auth-switch a{color:#6366f1;text-decoration:none;font-weight:600;margin-left:.3em}.auth-switch a:hover{text-decoration:underline}.auth-error{color:#e11d48;margin-top:.5rem;display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.auth-form.hidden{display:none}.menu-toggle{display:flex!important;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;position:absolute;top:16px;right:24px;z-index:1100;background:transparent;border:none;cursor:pointer}.menu-bar{width:28px;height:4px;background:#222!important;margin:4px 0;border-radius:2px;transition:all .3s;display:block}.nav.mobile-menu{display:none;flex-direction:column;position:absolute;top:64px;right:1.5rem;background:#fff;box-shadow:0 8px 32px 0 rgba(0,0,0,.1);border-radius:12px;padding:1.5rem 2rem;z-index:1001;min-width:200px;gap:1.2rem}.mobile-hide,.nav.mobile-menu.open{display:flex}.header-right{display:flex;align-items:center;gap:1rem;margin-left:auto}.dashboard-section{background:#f9fafb;min-height:100vh;padding:3rem 0 2rem}.dashboard-section h1{text-align:center;font-size:2.2rem;font-weight:700;margin-bottom:2.5rem;color:#222}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));max-width:1200px;margin:0 auto}.dashboard-feature{border-radius:16px;box-shadow:0 4px 24px 0 rgba(99,102,241,.07);padding:2rem 1.5rem 1.5rem;transition:box-shadow .2s,border .2s}.dashboard-feature:hover{box-shadow:0 8px 32px 0 rgba(99,102,241,.13);border:1.5px solid #6366f1}.dashboard-feature h2{font-size:1.15rem;margin-bottom:.7rem}.dashboard-feature ul{margin-bottom:1.2rem;font-size:1rem}.dashboard-feature ul li{margin-bottom:.4rem}.dashboard-feature .btn{align-self:flex-end;margin-top:auto}.live-tools{flex:2;min-width:320px}.next-class{background:#fff;border-radius:14px;box-shadow:0 2px 8px 0 rgba(99,102,241,.07);padding:1.2rem 2rem;border:1.5px solid #e5e7eb;display:flex;flex-direction:column;gap:.7rem;max-width:420px}.dashboard-layout{background:#f5f6fa}.dashboard-layout,.sidebar{display:flex;min-height:100vh}.sidebar{width:220px;background:#222;color:#fff;flex-direction:column;padding:2rem 1rem 1rem}.sidebar .logo{margin-bottom:2.5rem;display:flex;align-items:center;font-size:1.3rem;font-weight:700;color:#fff}.sidebar nav{display:flex;flex-direction:column;gap:1.2rem}.sidebar nav .nav-section{margin-bottom:1.5rem}.sidebar nav .nav-section-title{color:#888;font-size:.9rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.sidebar nav a{color:#bbb;text-decoration:none;font-size:1.05rem;display:flex;align-items:center;gap:.7rem;padding:.6em 1em;border-radius:8px;transition:background .2s,color .2s}.sidebar nav a.active,.sidebar nav a:hover{background:#6366f1;color:#fff}.sidebar .sidebar-footer{margin-top:auto;font-size:.95rem;color:#bbb;text-align:center}.main-area{flex:1;display:flex;flex-direction:column;min-width:0}.topbar{background:#fff;box-shadow:0 2px 8px 0 rgba(99,102,241,.04);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1.5px solid #e5e7eb}.topbar .dashboard-title{font-size:1.3rem;font-weight:600;color:#222}.topbar .topbar-actions{display:flex;align-items:center;gap:1.5rem}.topbar .notification{font-size:1.3rem;color:#6366f1;cursor:pointer;position:relative}.topbar .notification .dot{position:absolute;top:2px;right:2px;width:8px;height:8px;background:#f59e42;border-radius:50%}.topbar .profile{display:flex;align-items:center;gap:.7rem;cursor:pointer}.topbar .profile-img{width:36px;height:36px;border-radius:50%;background:#6366f1;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700}.dashboard-content{flex:1;padding:2rem 2.5rem;display:flex;flex-direction:column;gap:2rem}.dashboard-row{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}.live-tools,.next-class{background:#fff;border-radius:14px;box-shadow:0 2px 8px 0 rgba(99,102,241,.07);padding:1.2rem 2rem;border:1.5px solid #e5e7eb;display:flex;flex-direction:column;gap:.7rem;max-width:420px;flex:2;min-width:320px}.class-title{font-size:1.1rem;font-weight:600;color:#222}.class-meta{color:#6366f1;font-size:.98rem}.class-actions{margin-top:.7rem;display:flex;gap:1rem}.live-tools-list{display:flex;gap:1rem;margin-top:1.2rem;list-style:none;padding:0}.live-tools-list li{margin:0}.activity-feed{background:#fff;border-radius:14px;box-shadow:0 2px 8px 0 rgba(99,102,241,.07);padding:1.2rem 2rem;border:1.5px solid #e5e7eb;flex:1;min-width:260px}.activity-feed h3{color:#6366f1;font-size:1.05rem;font-weight:600;margin-bottom:1rem}.activity-feed ul{list-style:none;padding:0;margin:0}.activity-feed li{margin-bottom:.7rem;color:#444;font-size:.98rem}.overview-widgets{display:flex;gap:2rem;flex-wrap:wrap}.widget{background:#fff;border-radius:14px;box-shadow:0 2px 8px 0 rgba(99,102,241,.07);padding:1.2rem 2rem;min-width:200px;flex:1 1 200px;display:flex;flex-direction:column;gap:.5rem;border:1.5px solid #e5e7eb}.widget .widget-title{color:#6366f1;font-size:1.05rem;font-weight:600}.widget .widget-value{font-size:1.5rem;font-weight:700;color:#222}.widget .widget-action{margin-top:.5rem}.dashboard-sections{display:flex;gap:2rem;flex-wrap:wrap}.dashboard-section-card{background:#fff;border-radius:14px;box-shadow:0 2px 8px 0 rgba(99,102,241,.07);padding:1.2rem 1.5rem;border:1.5px solid #e5e7eb;flex:1 1 320px;min-width:320px;display:flex;flex-direction:column;gap:.7rem}.dashboard-section-card h3{color:#6366f1;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.dashboard-section-card ul{color:#444;font-size:.98rem;margin-bottom:.5rem;padding-left:1.2rem}.dashboard-section-card ul li{margin-bottom:.2rem;list-style:disc}.dashboard-section-card .btn{align-self:flex-end;margin-top:auto}@media (max-width:1100px){.dashboard-row,.dashboard-sections,.overview-widgets{flex-direction:column;gap:1rem}.activity-feed,.live-tools,.next-class{min-width:unset;max-width:unset}}@media (max-width:900px){.dashboard-layout{flex-direction:column}.sidebar{width:100%;flex-direction:row;gap:1.5rem;padding:1rem .5rem;min-height:unset}.main-area{padding:0}.dashboard-content{padding:1.2rem .5rem}}.student-actions{margin-bottom:2.5rem;display:flex;justify-content:center}.find-book{background:#fff;border-radius:14px;box-shadow:0 2px 8px 0 rgba(99,102,241,.07);padding:2rem 2.5rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem;border:1.5px solid #e5e7eb;max-width:500px;width:100%}.find-book h2{color:#6366f1;font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.find-teacher-form{display:flex;gap:1rem;width:100%}.find-teacher-form .input{flex:1;padding:.7em 1em;border-radius:8px;border:1.5px solid #e5e7eb;font-size:1rem}.book-class-btn{width:100%;margin-top:.5rem}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:2.5rem}.dashboard-feature{background:#fff;border-radius:14px;box-shadow:0 2px 8px 0 rgba(99,102,241,.07);padding:2rem 1.5rem;border:1.5px solid #e5e7eb;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.dashboard-feature h2{color:#6366f1;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.dashboard-feature ul{color:#444;font-size:.98rem;margin-bottom:.5rem;padding-left:1.2rem}.dashboard-feature ul li{margin-bottom:.2rem;list-style:disc}@media (max-width:700px){.find-book{padding:1.2rem .7rem}.dashboard-grid{gap:1rem;margin-top:1.2rem}}.profile-save-btn{margin-top:1rem}.profile-saved-msg{display:none;color:#22c55e;margin-top:.7rem;font-weight:500}#logout-btn{display:none}.search-container{margin-bottom:2rem}.search-input{width:300px;max-width:100%}.search-input,.search-select{margin-right:1rem}.search-select-subject{width:180px;max-width:100%}.search-select-price{width:140px;max-width:100%}.search-button{margin-left:1rem}.view-profile-btn{margin-top:1rem}.auth-container-wrapper{max-width:400px;margin:3rem auto}.auth-card{padding:2rem;background:#fff;border-radius:12px;box-shadow:0 2px 8px 0 rgba(0,0,0,.04)}.auth-logo{justify-content:center}.auth-title{font-size:2rem;font-weight:700;margin-bottom:.5rem}.auth-subtitle{color:#555;margin-bottom:1.5rem}.auth-input{width:100%;margin-bottom:1rem}.auth-input-password{width:100%;margin-bottom:1.5rem}.auth-submit-btn{width:100%}.auth-switch-container{text-align:center;margin-top:1.5rem}.auth-switch-text{color:#555}.auth-switch-link{color:#6366f1;text-decoration:none;margin-left:.5rem}

eeshapay-logo.html DELETED Viewed

@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<style>
-  .eeshpay-logo { width: 480px; transition: all 0.3s ease; }
-  .eeshpay-logo:hover {
-    transform: translateY(-3px);
-    filter: drop-shadow(0 6px 12px rgba(251, 191, 36, 0.3));
-  }
-  .arrow {
-    stroke-dasharray: 380;
-    stroke-dashoffset: 380;
-    animation: draw 5s ease-out forwards;
-  }
-  .coin {
-    animation: spin 2s linear infinite;
-    transform-origin: 50px 40px;
-  }
-  @keyframes draw { to { stroke-dashoffset: 0; } }
-  @keyframes spin { to { transform: rotate(360deg); } }
-</style>
-</head>
-<body>
-<svg class="eeshpay-logo" viewBox="0 0 480 90" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" stop-color="#0F172A"/>
-      <stop offset="100%" stop-color="#1E293B"/>
-    </linearGradient>
-    <linearGradient id="gold" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" stop-color="#FBBF24"/>
-      <stop offset="100%" stop-color="#F59E0B"/>
-    </linearGradient>
-  </defs>
-  <!-- Spinning Coin Icon -->
-  <g class="coin">
-    <circle cx="40" cy="40" r="18" fill="none" stroke="url(#gold)" stroke-width="3"/>
-    <text x="32" y="48" font-size="16" fill="url(#gold)" font-weight="bold">₦</text>
-  </g>
-  <!-- Eeshpay Text -->
-  <text x="80" y="65" font-family="Arial, Helvetica, sans-serif" font-size="60" font-weight="950" fill="url(#g1)" letter-spacing="-0.5">
-    Cellex
-  </text>
-  <!-- Flowing Arrow -->
-  <path class="arrow" d="M 150 68 Q 260 78, 440 68 L 430 58"
-        stroke="url(#gold)" stroke-width="4" fill="none" stroke-linecap="round"/>
-</svg>
-</body>
-</html>

eslint.config.mjs ADDED Viewed

	@@ -0,0 +1,50 @@

+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const eslintConfig = [...nextCoreWebVitals, ...nextTypescript, {
+  rules: {
+    // TypeScript rules
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/prefer-as-const": "off",
+    "@typescript-eslint/no-unused-disable-directive": "off",
+    // React rules
+    "react-hooks/exhaustive-deps": "off",
+    "react-hooks/purity": "off",
+    "react/no-unescaped-entities": "off",
+    "react/display-name": "off",
+    "react/prop-types": "off",
+    "react-compiler/react-compiler": "off",
+    // Next.js rules
+    "@next/next/no-img-element": "off",
+    "@next/next/no-html-link-for-pages": "off",
+    // General JavaScript rules
+    "prefer-const": "off",
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "no-debugger": "off",
+    "no-empty": "off",
+    "no-irregular-whitespace": "off",
+    "no-case-declarations": "off",
+    "no-fallthrough": "off",
+    "no-mixed-spaces-and-tabs": "off",
+    "no-redeclare": "off",
+    "no-undef": "off",
+    "no-unreachable": "off",
+    "no-useless-escape": "off",
+  },
+}, {
+  ignores: ["node_modules/**", ".next/**", "out/**", "build/**", "next-env.d.ts", "examples/**", "skills"]
+}];
+export default eslintConfig;

group-buy.html DELETED Viewed

@@ -1,200 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Group Buy · Cellex</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link rel="stylesheet" href="css/common.css">
-  <script src="js/config/edge-functions.js?v=2"></script>
-  <style>
-    body { background: #f8fafc; }
-    .gb-hero {
-      background: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%);
-      color: #0f172a; padding: 3rem 1.5rem;
-    }
-    .gb-card {
-      background: #fff; border-radius: 16px;
-      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
-      padding: 1.5rem; margin: 1rem auto; max-width: 720px;
-    }
-    .gb-progress-track {
-      width: 100%; height: 12px; background: #cffafe;
-      border-radius: 999px; overflow: hidden;
-    }
-    .gb-progress-fill {
-      height: 100%; background: linear-gradient(90deg, #00d4ff, #0891b2);
-      transition: width 0.5s ease;
-    }
-    .gb-avatars { display: flex; }
-    .gb-avatar {
-      width: 36px; height: 36px; border-radius: 50%;
-      background: #cffafe; color: #0e7490;
-      display: flex; align-items: center; justify-content: center;
-      font-weight: 700; font-size: 0.85rem;
-      border: 2px solid #fff; margin-left: -8px;
-    }
-    .gb-avatar:first-child { margin-left: 0; }
-    .gb-avatar.empty { background: #e2e8f0; color: #94a3b8; }
-  </style>
-</head>
-<body>
-  <div id="nav-mount"></div>
-  <div id="nav-mount"></div>
-  <script src="js/load-navbar.js"></script>
-  <div class="gb-hero">
-    <div class="max-w-3xl mx-auto text-center">
-      <div class="inline-flex items-center gap-2 bg-ink-900 text-cyan-400 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide">
-        <i class="fas fa-users"></i> Group Buy
-      </div>
-      <h1 class="text-3xl md:text-4xl font-extrabold mt-3" id="gb-headline">Loading…</h1>
-      <p class="text-ink-900/80 mt-2">Get 20% off when 3 friends join</p>
-    </div>
-  </div>
-  <div class="gb-card" id="gb-card">
-    <div class="text-center py-8 text-gray-500">
-      <i class="fas fa-spinner fa-spin text-2xl"></i>
-      <div class="mt-2">Loading group buy…</div>
-    </div>
-  </div>
-  <script>
-    (async () => {
-      const params = new URLSearchParams(location.search);
-      const gbId = params.get('id');
-      if (!gbId) {
-        document.getElementById('gb-card').innerHTML = '<div class="text-center py-8 text-red-500">No group buy ID provided.</div>';
-        return;
-      }
-      // Load group buy status
-      const r = await window.EdgeFunctions.groupBuy.status(gbId);
-      if (!r.success || !r.groupBuy) {
-        document.getElementById('gb-card').innerHTML = '<div class="text-center py-8 text-red-500">Group buy not found.</div>';
-        return;
-      }
-      const gb = r.groupBuy;
-      const product = r.product;
-      const pct = Math.min(100, Math.round((gb.current_count / gb.target_count) * 100));
-      const discountPrice = product ? (Number(product.price) * (1 - Number(gb.discount_pct) / 100)).toFixed(2) : null;
-      const isCompleted = gb.status === 'completed';
-      const isExpired = gb.status === 'expired' || (gb.status === 'open' && new Date(gb.expires_at) < new Date());
-      document.getElementById('gb-headline').textContent =
-        isCompleted ? '🎉 Group complete!' :
-        isExpired ? 'Group buy expired' :
-        `${gb.target_count - gb.current_count} more friend${gb.target_count - gb.current_count > 1 ? 's' : ''} needed!`;
-      // Build member avatars
-      const memberAvatars = (r.members || []).map(m => `
-        <div class="gb-avatar">${(m.user_name || (m.user_id || '').slice(0, 2) || '?').charAt(0).toUpperCase()}</div>
-      `).join('');
-      const emptySlots = Math.max(0, gb.target_count - (r.members?.length || 0));
-      const emptyAvatars = Array.from({length: emptySlots}).map(() => `<div class="gb-avatar empty">?</div>`).join('');
-      document.getElementById('gb-card').innerHTML = `
-        ${product ? `
-          <div class="flex gap-4 mb-4">
-            ${product.image_url
-              ? `<img src="${product.image_url}" class="w-24 h-24 rounded-xl object-cover">`
-              : `<div class="w-24 h-24 rounded-xl bg-gray-100 flex items-center justify-center text-3xl text-gray-400"><i class="fas fa-box"></i></div>`}
-            <div class="flex-1">
-              <a href="product.html?id=${product.id}" class="font-bold text-lg hover:text-cyan-600">${escapeHtml(product.name)}</a>
-              <div class="flex items-baseline gap-2 mt-1">
-                <span class="text-2xl font-extrabold text-cyan-600">$${discountPrice}</span>
-                <span class="text-gray-400 line-through">$${Number(product.price).toFixed(2)}</span>
-                <span class="bg-cyan-100 text-amber-800 text-xs font-bold px-2 py-0.5 rounded">-${gb.discount_pct}%</span>
-              </div>
-              <div class="text-xs text-gray-500 mt-1">Category: ${escapeHtml(product.category || 'General')}</div>
-            </div>
-          </div>
-        ` : ''}
-        <div class="my-6">
-          <div class="flex justify-between text-sm font-medium text-gray-700 mb-2">
-            <span>${gb.current_count} / ${gb.target_count} joined</span>
-            <span>${pct}%</span>
-          </div>
-          <div class="gb-progress-track">
-            <div class="gb-progress-fill" style="width: ${pct}%"></div>
-          </div>
-          <div class="gb-avatars mt-3">${memberAvatars}${emptyAvatars}</div>
-        </div>
-        <div class="bg-cyan-50 border border-cyan-200 rounded-lg p-3 text-sm text-amber-900">
-          <div class="font-semibold mb-1">
-            ${isCompleted ? '✅ Group complete — discount unlocked!' :
-              isExpired ? '⏰ This group buy has expired.' :
-              `⏳ Expires ${new Date(gb.expires_at).toLocaleString()}`}
-          </div>
-          ${isCompleted ? 'You and your friends can now check out at the discounted price.' : ''}
-        </div>
-        <div class="flex gap-2 mt-4">
-          ${isCompleted ? `
-            <a href="product.html?id=${product?.id || ''}&gb=${gb.id}" class="flex-1 bg-gradient-to-r from-cyan-400 to-cyan-700 text-ink-900 font-bold text-center py-3 rounded-lg hover:opacity-90">
-              <i class="fas fa-shopping-cart"></i> Buy at $${discountPrice}
-            </a>
-          ` : isExpired ? `
-            <button disabled class="flex-1 bg-gray-200 text-gray-500 font-bold py-3 rounded-lg cursor-not-allowed">Expired</button>
-          ` : `
-            <button onclick="joinGroup('${gb.id}')" class="flex-1 bg-gradient-to-r from-cyan-400 to-cyan-700 text-ink-900 font-bold py-3 rounded-lg hover:opacity-90">
-              <i class="fas fa-plus"></i> Join group buy
-            </button>
-          `}
-          <button onclick="shareGroup('${gb.id}', '${escapeHtml(product?.name || 'this product')}')" class="px-4 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600">
-            <i class="fab fa-whatsapp text-lg"></i>
-          </button>
-          <button onclick="copyGroupLink('${gb.id}')" class="px-4 bg-gray-100 text-gray-700 font-bold rounded-lg hover:bg-gray-200">
-            <i class="fas fa-link"></i>
-          </button>
-        </div>
-      `;
-    })();
-    async function joinGroup(gbId) {
-      // Check login
-      const sess = await window.EdgeFunctions.auth.checkSession();
-      if (!sess.user) {
-        if (confirm('Please login to join the group buy. Go to login page?')) {
-          window.location.href = 'login.html?next=' + encodeURIComponent('/group-buy.html?id=' + gbId);
-        }
-        return;
-      }
-      const r = await window.EdgeFunctions.groupBuy.join(gbId);
-      if (r.success) {
-        // Reload to show updated state
-        window.location.reload();
-      } else {
-        alert('Failed to join: ' + (r.error || 'Unknown error'));
-      }
-    }
-    function shareGroup(gbId, productName) {
-      const url = `${window.location.origin}/group-buy.html?id=${gbId}`;
-      const text = `🛍️ Join my group buy for "${productName}" on Cellex! Get 20% off when 3 of us join. ${url}`;
-      window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
-    }
-    async function copyGroupLink(gbId) {
-      const url = `${window.location.origin}/group-buy.html?id=${gbId}`;
-      try {
-        await navigator.clipboard.writeText(url);
-        alert('Link copied! Share it with friends.');
-      } catch {
-        window.prompt('Copy this link:', url);
-      }
-    }
-    function escapeHtml(s) {
-      return String(s ?? '').replace(/[&<>"']/g, c => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
-      }[c]));
-    }
-  </script>
-</body>
-</html>

index.html DELETED Viewed

@@ -1,1448 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Cellex — One App. Every Deal.</title>
-    <meta name="description" content="Shop millions of products from trusted merchants and local farmers. Best prices, fast delivery, secure payments.">
-    <!-- Fonts & Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap" rel="stylesheet">
-    <!-- Tailwind only - NO Supabase SDK in frontend -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
-                        display: ['Sora', 'system-ui', 'sans-serif'],
-                    },
-                    colors: {
-                        brand: {
-                            50: '#ecfeff',
-                            100: '#cffafe',
-                            200: '#a5f3fc',
-                            300: '#67e8f9',
-                            400: '#22d3ee',
-                            500: '#00d4ff',
-                            600: '#0891b2',
-                            700: '#0e7490',
-                            800: '#155e75',
-                            900: '#164e63',
-                        },
-                        ink: {
-                            900: '#0f172a',
-                            800: '#1e293b',
-                            700: '#334155',
-                            600: '#475569',
-                            500: '#64748b',
-                            400: '#94a3b8',
-                            300: '#cbd5e1',
-                            200: '#e2e8f0',
-                            100: '#f1f5f9',
-                        },
-                    },
-                    boxShadow: {
-                        'glow': '0 4px 24px -4px rgba(0,212,255,0.35)',
-                        'glow-lg': '0 0 32px rgba(0,212,255,0.25)',
-                        'card': '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
-                        'pop': '0 4px 16px -2px rgba(0,0,0,0.1)',
-                        'neon': '0 0 20px rgba(0,212,255,0.3), 0 0 40px rgba(0,212,255,0.1)',
-                    },
-                    animation: {
-                        'float': 'float 3s ease-in-out infinite',
-                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                        'slide-up': 'slideUp 0.5s ease-out',
-                        'fade-in': 'fadeIn 0.5s ease-out',
-                        'shimmer': 'shimmer 2s linear infinite',
-                        'glow-pulse': 'glowPulse 2s ease-in-out infinite',
-                        'scan': 'scan 3s linear infinite',
-                        'neon-flicker': 'neonFlicker 4s ease-in-out infinite',
-                    },
-                    keyframes: {
-                        float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-4px)' } },
-                        slideUp: { '0%': { opacity: '0', transform: 'translateY(20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
-                        fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
-                        shimmer: { '0%': { backgroundPosition: '-200% 0' }, '100%': { backgroundPosition: '200% 0' } },
-                        glowPulse: { '0%, 100%': { boxShadow: '0 0 20px rgba(0,212,255,0.2)' }, '50%': { boxShadow: '0 0 40px rgba(0,212,255,0.5)' } },
-                        scan: { '0%': { transform: 'translateY(-100%)' }, '100%': { transform: 'translateY(100%)' } },
-                        neonFlicker: { '0%, 100%': { opacity: '1' }, '45%': { opacity: '0.85' }, '50%': { opacity: '1' }, '55%': { opacity: '0.9' } },
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        * { -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; box-sizing: border-box; }
-        html { scroll-behavior: smooth; }
-        html, body { font-family: 'Plus Jakarta Sans', sans-serif; }
-        body {
-            background: #ffffff;
-            color: #0f172a;
-            overflow-x: hidden;
-        }
-        .font-display { font-family: 'Sora', sans-serif; }
-        /* Hide scrollbar */
-        .no-scrollbar::-webkit-scrollbar { display: none; }
-        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-        /* Snap scroll */
-        .snap-x-mandatory { scroll-snap-type: x mandatory; }
-        .snap-center { scroll-snap-align: center; }
-        /* Gradients — single cyan accent, futuristic */
-        .grad-flame { background: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%); }
-        .grad-night { background: #0f172a; }
-        .grad-flash { background: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%); }
-        .grad-mint { background: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%); }
-        .grad-gold { background: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%); }
-        /* Pulse for live countdown */
-        @keyframes pulse-dot {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.6; transform: scale(0.9); }
-        }
-        .pulse-dot { animation: pulse-dot 1s ease-in-out infinite; }
-        /* Slide up animation */
-        @keyframes slideUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .reveal { animation: slideUp 0.5s ease-out both; }
-        /* Toast */
-        @keyframes toastIn {
-            from { opacity: 0; transform: translate(-50%, 30px); }
-            to { opacity: 1; transform: translate(-50%, 0); }
-        }
-        .toast-anim { animation: toastIn 0.3s ease-out; }
-        /* Progress bar fill — cyan with glow */
-        .progress-fill {
-            background: linear-gradient(90deg, #00d4ff, #0891b2);
-            transition: width 0.6s ease-out;
-            box-shadow: 0 0 12px rgba(0,212,255,0.4);
-        }
-        /* Heart pop */
-        @keyframes heartPop {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.4); }
-            100% { transform: scale(1); }
-        }
-        .heart-pop { animation: heartPop 0.4s ease-out; }
-        /* Card hover/active */
-        .lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
-        .lift:active { transform: scale(0.97); }
-        .product-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
-        .product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12); }
-        .product-card:hover .product-image { transform: scale(1.08); }
-        .product-card .product-image { transition: transform 0.5s ease; }
-        /* Glow ring for active nav — cyan */
-        .nav-active { position: relative; }
-        .nav-active::before {
-            content: ''; position: absolute; inset: -8px -10px;
-            background: rgba(0,212,255,0.10);
-            border-radius: 16px; z-index: -1;
-        }
-        /* Star rating — cyan */
-        .stars {
-            background: linear-gradient(90deg, #00d4ff var(--p, 100%), #d1d5db var(--p, 100%));
-            -webkit-background-clip: text; background-clip: text; color: transparent;
-        }
-        /* Tab active — cyan with glow */
-        .tab-active { color: #0f172a; font-weight: 700; }
-        .tab-active::after {
-            content: ''; display: block; height: 3px;
-            background: linear-gradient(90deg, #00d4ff, #0891b2);
-            border-radius: 2px; margin-top: 6px;
-            box-shadow: 0 0 8px rgba(0,212,255,0.5);
-        }
-        /* Floating animation */
-        @keyframes float {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-4px); }
-        }
-        .float { animation: float 3s ease-in-out infinite; }
-        /* Skeleton shimmer */
-        @keyframes shimmerBg {
-            0% { background-position: -200% 0; }
-            100% { background-position: 200% 0; }
-        }
-        .skeleton {
-            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
-            background-size: 200% 100%;
-            animation: shimmerBg 1.5s infinite;
-        }
-        /* Header shadow on scroll */
-        header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
-        /* Search focus — cyan glow */
-        .search-box:focus-within {
-            box-shadow: 0 0 0 2px rgba(0,212,255,0.2), 0 0 20px rgba(0,212,255,0.15);
-            border-color: #00d4ff !important;
-        }
-        /* Mobile bottom nav safe area */
-        .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
-        /* Quick action */
-        .quick-action { opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
-        .product-card:hover .quick-action { opacity: 1; transform: translateY(0); }
-        /* Seller badges — unified cyan */
-        .seller-badge { background: linear-gradient(135deg, #00d4ff, #0891b2); }
-        .farmer-badge { background: linear-gradient(135deg, #00d4ff, #0891b2); }
-        /* Flash badge — cyan with pulse */
-        .flash-badge {
-            background: linear-gradient(135deg, #00d4ff, #0891b2);
-            animation: pulse 2s infinite;
-        }
-        /* Custom scrollbar */
-        ::-webkit-scrollbar { width: 6px; height: 6px; }
-        ::-webkit-scrollbar-track { background: #f1f5f9; }
-        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
-        /* Gradient text — cyan */
-        .gradient-text {
-            background: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%);
-            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-        }
-        /* Glass */
-        .glass { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
-        /* Cart drawer transition */
-        .cart-drawer { transition: transform 0.3s ease; }
-        /* === FUTURISTIC ANIMATIONS === */
-        /* Neon border glow on focus/hover */
-        .neon-border { border: 1px solid rgba(0,212,255,0.3); transition: all 0.3s ease; }
-        .neon-border:hover { border-color: #00d4ff; box-shadow: 0 0 16px rgba(0,212,255,0.3), inset 0 0 8px rgba(0,212,255,0.05); }
-        /* Holographic shimmer for cards */
-        .holo-card { position: relative; overflow: hidden; }
-        .holo-card::before {
-            content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(0,212,255,0.08), transparent);
-            transition: left 0.6s ease;
-        }
-        .holo-card:hover::before { left: 100%; }
-        /* Scanline effect for live elements */
-        .scanline { position: relative; overflow: hidden; }
-        .scanline::after {
-            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
-            background: linear-gradient(90deg, transparent, #00d4ff, transparent);
-            animation: scan 3s linear infinite;
-        }
-        @keyframes scan {
-            0% { top: 0; opacity: 0; }
-            10% { opacity: 1; }
-            90% { opacity: 1; }
-            100% { top: 100%; opacity: 0; }
-        }
-        /* Glow pulse for CTAs */
-        .glow-pulse { animation: glowPulse 2s ease-in-out infinite; }
-        @keyframes glowPulse {
-            0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.2); }
-            50% { box-shadow: 0 0 40px rgba(0,212,255,0.5), 0 0 60px rgba(0,212,255,0.2); }
-        }
-        /* Neon text flicker */
-        .neon-text {
-            color: #00d4ff;
-            text-shadow: 0 0 10px rgba(0,212,255,0.5), 0 0 20px rgba(0,212,255,0.3);
-        }
-        /* Smooth reveal on scroll */
-        .reveal-up { opacity: 0; transform: translateY(20px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
-        .reveal-up.visible { opacity: 1; transform: translateY(0); }
-        /* Card hover with cyan lift */
-        .lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
-        .lift:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 24px rgba(0,212,255,0.15), 0 0 0 1px rgba(0,212,255,0.1);
-        }
-        .lift:active { transform: scale(0.97); }
-    </style>
-</head>
-<body class="min-h-screen">
-    <!-- Universal Navbar -->
-    <div id="nav-mount"></div>
-    <script src="js/load-navbar.js"></script>
-    <!-- Main Content -->
-    <main class="pb-20 max-w-7xl mx-auto px-3 sm:px-4 lg:px-6">
-        <!-- Stories Bar (Phase 3 — Instagram-style, 24h stories) -->
-        <section id="storiesBarSection" class="mt-3 hidden">
-            <div class="bg-white rounded-2xl border border-ink-100 shadow-card p-3 overflow-x-auto">
-                <div id="storiesBarContainer" class="flex gap-3" style="min-width:max-content;">
-                    <!-- Stories loaded dynamically -->
-                </div>
-            </div>
-        </section>
-        <!-- Hero Carousel (Choice Day, Beauty Monday, BrandDay) -->
-        <div class="mt-3">
-            <div class="relative h-44 sm:h-52 lg:h-56 rounded-3xl overflow-hidden shadow-pop">
-                <div id="heroCarousel" class="flex h-full overflow-x-auto no-scrollbar snap-x-mandatory">
-                    <!-- Slide 1: Choice Day -->
-                    <div class="snap-center shrink-0 w-full grad-flame relative">
-                        <div class="absolute inset-0 p-4 sm:p-5 flex flex-col justify-between">
-                            <div>
-                                <div class="inline-flex items-center gap-1.5 bg-white/25 backdrop-blur px-2.5 py-1 rounded-full">
-                                    <span class="w-1.5 h-1.5 bg-yellow-300 rounded-full pulse-dot"></span>
-                                    <span class="text-[10px] font-bold text-white tracking-wide">CHOICE DAY • 1ST EVERY MONTH</span>
-                                </div>
-                                <div class="mt-2 font-display font-extrabold text-white text-2xl sm:text-3xl leading-none">Up to <span class="text-yellow-300">70%</span> OFF</div>
-                                <div class="text-white/90 text-xs mt-1.5">Hand-picked deals. Members only.</div>
-                            </div>
-                            <div class="flex items-end justify-between">
-                                <div>
-                                    <div class="text-white/70 text-[10px] font-semibold uppercase tracking-wider">Ends in</div>
-                                    <div class="flex items-center gap-1 mt-1 font-display font-bold text-white text-lg">
-                                        <span class="bg-ink-900/40 backdrop-blur px-2 py-0.5 rounded-md" id="hours">12</span>:
-                                        <span class="bg-ink-900/40 backdrop-blur px-2 py-0.5 rounded-md" id="minutes">45</span>:
-                                        <span class="bg-ink-900/40 backdrop-blur px-2 py-0.5 rounded-md" id="seconds">30</span>
-                                    </div>
-                                </div>
-                                <a href="#flashDeals" class="bg-white text-brand-700 font-bold text-xs px-4 py-2 rounded-full shadow lift">Shop Now →</a>
-                            </div>
-                        </div>
-                        <div class="absolute -right-6 -top-6 w-32 h-32 bg-yellow-300/30 rounded-full blur-2xl"></div>
-                        <div class="absolute right-4 top-4 text-5xl float">🛍️</div>
-                    </div>
-                    <!-- Slide 2: Beauty Monday -->
-                    <div class="snap-center shrink-0 w-full grad-night relative">
-                        <div class="absolute inset-0 p-4 sm:p-5 flex flex-col justify-between">
-                            <div>
-                                <div class="inline-flex items-center gap-1.5 bg-pink-500/30 backdrop-blur px-2.5 py-1 rounded-full">
-                                    <span class="text-[10px] font-bold text-pink-200 tracking-wide">BEAUTY MONDAY</span>
-                                </div>
-                                <div class="mt-2 font-display font-extrabold text-yellow-300 text-2xl sm:text-3xl leading-none">40% OFF</div>
-                                <div class="text-white/90 text-xs mt-1.5">Glow up. Limited time offer.</div>
-                            </div>
-                            <div class="flex items-end justify-between">
-                                <div class="flex -space-x-2">
-                                    <div class="w-10 h-10 rounded-full bg-pink-200 border-2 border-white"></div>
-                                    <div class="w-10 h-10 rounded-full bg-rose-300 border-2 border-white"></div>
-                                    <div class="w-10 h-10 rounded-full bg-fuchsia-300 border-2 border-white"></div>
-                                </div>
-                                <a href="categories.html?category=beauty" class="bg-yellow-300 text-ink-900 font-bold text-xs px-4 py-2 rounded-full shadow lift">Get Glow →</a>
-                            </div>
-                        </div>
-                        <div class="absolute right-4 top-4 text-5xl float" style="animation-delay: -1s">💄</div>
-                    </div>
-                    <!-- Slide 3: Brand Day -->
-                    <div class="snap-center shrink-0 w-full bg-ink-800 relative">
-                        <div class="absolute inset-0 p-4 sm:p-5 flex flex-col justify-between">
-                            <div>
-                                <div class="inline-flex items-center gap-1.5 bg-white/25 backdrop-blur px-2.5 py-1 rounded-full">
-                                    <span class="text-[10px] font-bold text-white tracking-wide">BRAND DAY • FEATURED</span>
-                                </div>
-                                <div class="mt-2 font-display font-extrabold text-white text-2xl sm:text-3xl leading-none">From <span class="text-yellow-300">₦5,000</span></div>
-                                <div class="text-white/90 text-xs mt-1.5">Premium products. Official stores.</div>
-                            </div>
-                            <div class="flex items-end justify-between">
-                                <div class="text-white text-[10px]">
-                                    <div class="opacity-70">Brand Gallery</div>
-                                    <div class="font-bold">Best prices</div>
-                                </div>
-                                <a href="categories.html" class="bg-white text-purple-700 font-bold text-xs px-4 py-2 rounded-full shadow lift">Visit Store →</a>
-                            </div>
-                        </div>
-                        <div class="absolute right-4 top-4 text-5xl float" style="animation-delay: -2s">🔦</div>
-                    </div>
-                </div>
-                <!-- Dots -->
-                <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1.5" id="heroDots">
-                    <span class="w-1.5 h-1.5 rounded-full bg-white"></span>
-                    <span class="w-1.5 h-1.5 rounded-full bg-white/40"></span>
-                    <span class="w-1.5 h-1.5 rounded-full bg-white/40"></span>
-                </div>
-            </div>
-        </div>
-        <!-- Flash Sales (Jumia) -->
-        <section id="flashDeals" class="mt-5 rounded-3xl overflow-hidden shadow-pop">
-            <div class="grad-flash px-4 py-3 flex items-center justify-between">
-                <div class="flex items-center gap-2">
-                    <span class="text-2xl">⚡</span>
-                    <div>
-                        <div class="font-display font-extrabold text-white text-base leading-none">FLASH SALES</div>
-                        <div class="text-white/80 text-[10px] mt-0.5">Hurry up!</div>
-                    </div>
-                </div>
-                <div class="flex items-center gap-1 font-display font-bold text-white text-sm">
-                    <span class="bg-ink-900/40 backdrop-blur px-1.5 py-1 rounded" id="fs-h">00</span>:
-                    <span class="bg-ink-900/40 backdrop-blur px-1.5 py-1 rounded" id="fs-m">02</span>:
-                    <span class="bg-ink-900/40 backdrop-blur px-1.5 py-1 rounded pulse-dot" id="fs-s">15</span>
-                </div>
-            </div>
-            <div class="bg-white p-3">
-                <div id="flashDealsContainer" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 lg:gap-3">
-                    <!-- Products loaded dynamically -->
-                </div>
-            </div>
-        </section>
-        <!-- Category Tiles (Jumia) -->
-        <section class="mt-5">
-            <div class="flex items-center justify-between mb-3">
-                <h2 class="font-display font-extrabold text-base">Shop by Category</h2>
-                <a href="categories.html" class="text-xs font-semibold text-cyan-600">See All →</a>
-            </div>
-            <div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2.5">
-                <a href="categories.html" class="aspect-square grad-flame rounded-2xl p-3 flex flex-col justify-between text-left lift relative overflow-hidden">
-                    <span class="text-white font-display font-extrabold text-sm leading-tight">Awoof of<br>the Month</span>
-                    <span class="text-3xl absolute -right-1 -bottom-1 opacity-80">🎁</span>
-                </a>
-                <a href="categories.html?category=phones" class="aspect-square bg-ink-900 rounded-2xl p-3 flex flex-col justify-between text-left lift relative overflow-hidden">
-                    <div>
-                        <div class="text-white font-display font-extrabold text-base">₦5,000</div>
-                        <div class="text-white/70 text-[10px] font-semibold">Store</div>
-                    </div>
-                    <div class="text-yellow-400 font-display font-extrabold text-2xl">40%</div>
-                </a>
-                <a href="categories.html?category=baby" class="aspect-square bg-gradient-to-br from-sky-400 to-blue-500 rounded-2xl p-3 flex flex-col justify-between text-left lift relative overflow-hidden">
-                    <span class="text-white font-display font-extrabold text-sm leading-tight">Kids, Baby<br>& More</span>
-                    <span class="text-3xl absolute -right-1 -bottom-1 opacity-80">🧸</span>
-                </a>
-                <a href="#flashDeals" class="aspect-square bg-gradient-to-br from-cyan-400 to-cyan-600 rounded-2xl p-3 flex flex-col justify-between text-left lift relative overflow-hidden">
-                    <div>
-                        <div class="text-white font-display font-extrabold text-sm">Up to</div>
-                        <div class="text-white font-display font-extrabold text-2xl">60% OFF</div>
-                    </div>
-                    <span class="text-2xl absolute right-2 bottom-1 opacity-80">🔥</span>
-                </a>
-                <a href="categories.html" class="aspect-square bg-ink-900 rounded-2xl p-3 flex flex-col justify-between text-left lift relative overflow-hidden">
-                    <div>
-                        <div class="text-white font-display font-extrabold text-sm">BUY 2</div>
-                        <div class="text-white/80 text-[10px] font-semibold">PAY FOR 1</div>
-                    </div>
-                    <div class="text-yellow-400 font-display font-extrabold text-xl">50%</div>
-                </a>
-                <a href="#newArrivals" class="aspect-square bg-gradient-to-br from-emerald-400 to-teal-500 rounded-2xl p-3 flex flex-col justify-between text-left lift relative overflow-hidden">
-                    <span class="text-white font-display font-extrabold text-sm leading-tight">New<br>Arrivals</span>
-                    <span class="text-3xl absolute -right-1 -bottom-1 opacity-80">✨</span>
-                </a>
-            </div>
-        </section>
-        <!-- Trending Products -->
-        <section id="trending" class="mt-5">
-            <div class="flex items-center justify-between mb-3">
-                <div class="flex items-center gap-2">
-                    <div class="w-10 h-10 grad-flame rounded-xl flex items-center justify-center">
-                        <i class="fas fa-fire text-white text-lg"></i>
-                    </div>
-                    <div>
-                        <h2 class="font-display font-extrabold text-base">Trending Now</h2>
-                        <p class="text-ink-500 text-[11px] -mt-0.5">Most popular this week</p>
-                    </div>
-                </div>
-                <a href="#" class="text-xs font-semibold text-cyan-600">See All →</a>
-            </div>
-            <div id="trendingProductsContainer" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 lg:gap-3">
-                <!-- Products loaded dynamically -->
-            </div>
-        </section>
-        <!-- Farm Fresh -->
-        <section class="mt-5 rounded-3xl overflow-hidden">
-            <div class="grad-mint px-4 py-3 flex items-center justify-between">
-                <div class="flex items-center gap-2">
-                    <span class="text-2xl">🌱</span>
-                    <div>
-                        <div class="font-display font-extrabold text-white text-base leading-none">FARM FRESH</div>
-                        <div class="text-white/80 text-[10px] mt-0.5">Direct from local farmers</div>
-                    </div>
-                </div>
-                <a href="categories.html?category=farm" class="bg-white text-cyan-700 font-bold text-xs px-3 py-1.5 rounded-full lift">See All →</a>
-            </div>
-            <div class="bg-white p-3">
-                <div id="farmProductsContainer" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 lg:gap-3">
-                    <!-- Farm products loaded dynamically -->
-                </div>
-            </div>
-        </section>
-        <!-- New Arrivals -->
-        <section id="newArrivals" class="mt-5">
-            <div class="flex items-center justify-between mb-3">
-                <div class="flex items-center gap-2">
-                    <div class="w-10 h-10 bg-ink-800 rounded-xl flex items-center justify-center">
-                        <i class="fas fa-sparkles text-white text-lg"></i>
-                    </div>
-                    <div>
-                        <h2 class="font-display font-extrabold text-base">New Arrivals</h2>
-                        <p class="text-ink-500 text-[11px] -mt-0.5">Fresh products just added</p>
-                    </div>
-                </div>
-                <a href="categories.html?sort=newest" class="text-xs font-semibold text-cyan-600">See All →</a>
-            </div>
-            <div id="newArrivalsContainer" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 lg:gap-3">
-                <!-- New arrivals loaded dynamically -->
-            </div>
-        </section>
-        <!-- Following Activity Feed (only shown if user is logged in & follows sellers) -->
-        <section id="followingFeedSection" class="mt-5 hidden">
-            <div class="flex items-center justify-between mb-3">
-                <div class="flex items-center gap-2">
-                    <div class="w-10 h-10 grad-flame rounded-xl flex items-center justify-center shadow-glow">
-                        <i class="fas fa-stream text-white text-base"></i>
-                    </div>
-                    <div>
-                        <h2 class="font-display font-extrabold text-base">From Sellers You Follow</h2>
-                        <p class="text-ink-500 text-[11px] -mt-0.5">Latest updates from your favourite stores</p>
-                    </div>
-                </div>
-            </div>
-            <div id="followingFeedContainer" class="bg-white rounded-2xl border border-ink-100 shadow-card p-3 lg:p-4">
-                <!-- Activity items loaded dynamically -->
-            </div>
-        </section>
-        <!-- Live Now (Phase 2 — Live shopping) -->
-        <section id="liveNowSection" class="mt-5 hidden">
-            <div class="flex items-center justify-between mb-3">
-                <div class="flex items-center gap-2">
-                    <div class="w-10 h-10 bg-red-500 rounded-xl flex items-center justify-center shadow-glow">
-                        <i class="fas fa-broadcast-tower text-white text-base"></i>
-                    </div>
-                    <div>
-                        <h2 class="font-display font-extrabold text-base flex items-center gap-2">
-                            Live Now
-                            <span class="inline-block w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
-                        </h2>
-                        <p class="text-ink-500 text-[11px] -mt-0.5">Watch live demos & buy in real-time</p>
-                    </div>
-                </div>
-                <a href="live.html" class="text-xs font-semibold text-cyan-600">All live →</a>
-            </div>
-            <div id="liveNowContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 lg:gap-3">
-                <!-- Live sessions loaded dynamically -->
-            </div>
-        </section>
-        <!-- Meet the Top Sellers (Depop-style: 2x2 product grid + avatar + Shop button) -->
-        <section id="discoverSellers" class="mt-5">
-            <div class="mb-4">
-                <h2 class="text-xl font-extrabold text-gray-900">Meet the Top Sellers</h2>
-                <p class="text-gray-500 text-sm">Discover stores loved by shoppers</p>
-            </div>
-            <div id="discoverSellersContainer" class="space-y-4">
-                <!-- Seller cards loaded dynamically -->
-            </div>
-        </section>
-        <!-- Trending Now (Phase 3 — most viewed/shared/purchased in last 24h) -->
-        <section id="trendingSection" class="mt-5 hidden">
-            <div class="flex items-center justify-between mb-3">
-                <div class="flex items-center gap-2">
-                    <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-red-500 rounded-xl flex items-center justify-center shadow-glow">
-                        <i class="fas fa-fire text-white text-base"></i>
-                    </div>
-                    <div>
-                        <h2 class="font-display font-extrabold text-base">🔥 Trending Now</h2>
-                        <p class="text-ink-500 text-[11px] -mt-0.5">Most viewed, shared & purchased in the last 24 hours</p>
-                    </div>
-                </div>
-                <span class="text-[10px] text-ink-500" id="trendingRefreshedAt">—</span>
-            </div>
-            <div id="trendingContainer" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 lg:gap-3">
-                <!-- Trending products loaded dynamically -->
-            </div>
-        </section>
-        <!-- AI Recommendations (Phase 3 — only for logged-in users) -->
-        <section id="discoverSection" class="mt-5 hidden">
-            <div class="flex items-center justify-between mb-3">
-                <div class="flex items-center gap-2">
-                    <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-cyan-700 rounded-xl flex items-center justify-center shadow-glow">
-                        <i class="fas fa-sparkles text-white text-base"></i>
-                    </div>
-                    <div>
-                        <h2 class="font-display font-extrabold text-base">✨ For You</h2>
-                        <p class="text-ink-500 text-[11px] -mt-0.5">AI picks based on your purchases, follows & activity</p>
-                    </div>
-                </div>
-            </div>
-            <div id="discoverContainer" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 lg:gap-3">
-                <!-- AI recommendations loaded dynamically -->
-            </div>
-        </section>
-        <!-- Product Videos CTA (Phase 3 — TikTok-style feed) -->
-        <section class="mt-5">
-            <a href="videos.html" class="block bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-700 rounded-3xl p-5 text-white relative overflow-hidden lift">
-                <div class="relative flex items-center gap-4">
-                    <div class="w-14 h-14 bg-white/20 backdrop-blur rounded-2xl flex items-center justify-center">
-                        <i class="fas fa-play-circle text-3xl"></i>
-                    </div>
-                    <div class="flex-1">
-                        <div class="font-display font-extrabold text-lg">Shop what you see</div>
-                        <div class="text-white/80 text-sm">Swipe through 15-second product videos from sellers</div>
-                    </div>
-                    <i class="fas fa-arrow-right text-2xl"></i>
-                </div>
-            </a>
-        </section>
-        <!-- Why Choose Cellex (Dark section) -->
-        <section class="mt-5 grad-night rounded-3xl p-5 lg:p-8">
-            <div class="text-center mb-5">
-                <h2 class="font-display text-xl lg:text-2xl font-bold text-white mb-1">Why Shop With Cellex?</h2>
-                <p class="text-gray-400 text-xs lg:text-sm">The safest, fastest marketplace in Nigeria</p>
-            </div>
-            <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
-                <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-4 border border-white/10 text-center">
-                    <div class="w-12 h-12 mx-auto bg-trust-500/20 rounded-xl flex items-center justify-center mb-2">
-                        <i class="fas fa-shield-alt text-trust-500 text-xl"></i>
-                    </div>
-                    <h3 class="font-semibold text-sm text-white mb-1">Buyer Protection</h3>
-                    <p class="text-gray-400 text-[11px]">Full refund guarantee</p>
-                </div>
-                <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-4 border border-white/10 text-center">
-                    <div class="w-12 h-12 mx-auto bg-cyan-500/20 rounded-xl flex items-center justify-center mb-2">
-                        <i class="fas fa-truck text-cyan-400 text-xl"></i>
-                    </div>
-                    <h3 class="font-semibold text-sm text-white mb-1">Fast Delivery</h3>
-                    <p class="text-gray-400 text-[11px]">Nationwide shipping</p>
-                </div>
-                <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-4 border border-white/10 text-center">
-                    <div class="w-12 h-12 mx-auto bg-blue-500/20 rounded-xl flex items-center justify-center mb-2">
-                        <i class="fas fa-undo text-blue-400 text-xl"></i>
-                    </div>
-                    <h3 class="font-semibold text-sm text-white mb-1">Easy Returns</h3>
-                    <p class="text-gray-400 text-[11px]">7-day return policy</p>
-                </div>
-                <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-4 border border-white/10 text-center">
-                    <div class="w-12 h-12 mx-auto bg-purple-500/20 rounded-xl flex items-center justify-center mb-2">
-                        <i class="fas fa-headset text-purple-400 text-xl"></i>
-                    </div>
-                    <h3 class="font-semibold text-sm text-white mb-1">24/7 Support</h3>
-                    <p class="text-gray-400 text-[11px]">Always here to help</p>
-                </div>
-            </div>
-        </section>
-        <!-- Seller CTA -->
-        <section class="mt-5">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <div class="bg-white rounded-2xl p-4 lg:p-5 border border-ink-100 shadow-card lift">
-                    <div class="flex items-start justify-between">
-                        <div>
-                            <h3 class="font-display text-base font-bold text-ink-900 mb-1">Start Selling Today</h3>
-                            <p class="text-ink-500 text-xs mb-3">Join thousands of successful merchants</p>
-                            <a href="signup.html?next=/seller/index.html" class="inline-flex items-center gap-1 grad-flame text-white px-4 py-2 rounded-lg text-xs font-medium lift">
-                                Become a Merchant <i class="fas fa-arrow-right text-[10px]"></i>
-                            </a>
-                        </div>
-                        <div class="text-brand-200"><i class="fas fa-store text-3xl"></i></div>
-                    </div>
-                </div>
-                <div class="bg-white rounded-2xl p-4 lg:p-5 border border-ink-100 shadow-card lift">
-                    <div class="flex items-start justify-between">
-                        <div>
-                            <div class="inline-flex items-center gap-1 bg-green-100 text-green-700 text-[10px] font-medium px-2 py-0.5 rounded-full mb-2">
-                                <i class="fas fa-leaf text-[8px]"></i> SELLER CENTER
-                            </div>
-                            <h3 class="font-display text-base font-bold text-ink-900 mb-1">Open your dashboard</h3>
-                            <p class="text-ink-500 text-xs mb-3">Manage products, orders, and followers</p>
-                            <a href="seller/index.html" class="inline-flex items-center gap-1 bg-cyan-500 text-white px-4 py-2 rounded-lg text-xs font-medium hover:bg-emerald-600 lift">
-                                Go to Dashboard <i class="fas fa-arrow-right text-[10px]"></i>
-                            </a>
-                        </div>
-                        <div class="text-green-200"><i class="fas fa-tractor text-3xl"></i></div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <!-- Sign-in CTA -->
-        <section class="mt-5">
-            <div class="grad-night rounded-3xl px-5 py-4 flex items-center justify-between relative overflow-hidden">
-                <div class="absolute -right-6 -top-6 w-32 h-32 bg-cyan-500/30 rounded-full blur-2xl"></div>
-                <div class="relative">
-                    <div class="text-white font-display font-extrabold text-base leading-tight">Sign in for the<br>best experience</div>
-                    <div class="text-white/70 text-[11px] mt-1">Member prices • Early access • Coins</div>
-                </div>
-                <a href="login.html" class="relative grad-flame text-white font-bold text-xs px-5 py-2.5 rounded-full shadow-glow lift">Sign in</a>
-            </div>
-        </section>
-    </main>
-    <!-- Footer -->
-    <footer class="bg-ink-900 text-white pt-10 pb-20 lg:pb-10 mt-5">
-        <div class="max-w-7xl mx-auto px-4">
-            <div class="grid grid-cols-2 lg:grid-cols-5 gap-8 mb-10">
-                <div class="col-span-2 lg:col-span-1">
-                    <div class="flex items-center gap-2 mb-4">
-                        <div class="w-10 h-10 grad-flame rounded-xl flex items-center justify-center shadow-glow">
-                            <span class="font-display font-extrabold text-white text-lg">C</span>
-                        </div>
-                        <div class="flex flex-col">
-                            <span class="text-xl font-extrabold gradient-text leading-tight font-display">Cellex</span>
-                            <span class="text-[8px] text-gray-500 tracking-widest uppercase -mt-1">One App. Every Deal.</span>
-                        </div>
-                    </div>
-                    <p class="text-gray-400 text-sm mb-4">Nigeria's #1 online marketplace connecting millions of buyers with trusted sellers.</p>
-                    <div class="flex gap-3">
-                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-cyan-500 transition-colors"><i class="fab fa-facebook-f"></i></a>
-                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-cyan-500 transition-colors"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-cyan-500 transition-colors"><i class="fab fa-instagram"></i></a>
-                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-cyan-500 transition-colors"><i class="fab fa-whatsapp"></i></a>
-                    </div>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-cyan-400 mb-4">Quick Links</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">About Us</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Contact Us</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">FAQs</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Blog</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-cyan-400 mb-4">Customer Service</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Help Center</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Returns</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Shipping Info</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Track Order</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-cyan-400 mb-4">For Sellers</h4>
-                    <ul class="space-y-2">
-                        <li><a href="seller/index.html" class="text-gray-400 hover:text-white text-sm transition-colors">Seller Dashboard</a></li>
-                        <li><a href="seller/go-live.html" class="text-gray-400 hover:text-white text-sm transition-colors">Go Live</a></li>
-                        <li><a href="seller/videos.html" class="text-gray-400 hover:text-white text-sm transition-colors">Upload Product Video</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Seller Guidelines</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-cyan-400 mb-4">Shop Anywhere</h4>
-                    <ul class="space-y-2">
-                        <li><a href="whatsapp.html" class="text-gray-400 hover:text-white text-sm transition-colors"><i class="fab fa-whatsapp mr-1"></i> WhatsApp bot</a></li>
-                        <li><a href="telegram.html" class="text-gray-400 hover:text-white text-sm transition-colors"><i class="fab fa-telegram mr-1"></i> Telegram channel</a></li>
-                        <li><a href="link-account.html" class="text-gray-400 hover:text-white text-sm transition-colors"><i class="fas fa-link mr-1"></i> Link WhatsApp</a></li>
-                        <li><a href="videos.html" class="text-gray-400 hover:text-white text-sm transition-colors"><i class="fas fa-play-circle mr-1"></i> Product videos</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-cyan-400 mb-4">Legal</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Privacy Policy</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Terms of Service</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Cookie Policy</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Disclaimer</a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="border-t border-white/10 pt-6 mb-6">
-                <div class="flex flex-wrap items-center justify-center gap-4">
-                    <span class="text-gray-400 text-sm">We accept:</span>
-                    <div class="flex items-center gap-3">
-                        <div class="bg-white/10 px-4 py-2 rounded-lg"><i class="fab fa-cc-visa text-2xl"></i></div>
-                        <div class="bg-white/10 px-4 py-2 rounded-lg"><i class="fab fa-cc-mastercard text-2xl"></i></div>
-                        <div class="bg-white/10 px-4 py-2 rounded-lg"><i class="fas fa-university text-2xl"></i></div>
-                        <div class="bg-white/10 px-4 py-2 rounded-lg text-sm font-medium">Paystack</div>
-                    </div>
-                </div>
-            </div>
-            <div class="text-center text-gray-400 text-sm">
-                <p>&copy; 2025 Cellex. All rights reserved. Made with <i class="fas fa-heart text-red-500"></i> in Nigeria</p>
-            </div>
-        </div>
-    </footer>
-    <!-- Auth Modal -->
-    <div id="authModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
-        <div class="bg-white rounded-3xl max-w-md w-full p-8 text-center relative animate-slide-up">
-            <button id="closeAuthModal" class="absolute top-4 right-4 w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors">
-                <i class="fas fa-times text-gray-500"></i>
-            </button>
-            <div class="w-20 h-20 bg-brand-50 rounded-full flex items-center justify-center mx-auto mb-6">
-                <i class="fas fa-user-lock text-cyan-500 text-3xl"></i>
-            </div>
-            <h3 class="font-display text-2xl font-bold text-ink-900 mb-2">Sign In Required</h3>
-            <p class="text-gray-500 mb-6">Please log in or create an account to add items to your cart</p>
-            <div class="flex gap-3">
-                <a href="login.html" class="flex-1 bg-ink-900 text-white py-3 rounded-full font-semibold hover:bg-ink-800 transition-colors">Login</a>
-                <a href="signup.html" class="flex-1 grad-flame text-white py-3 rounded-full font-semibold hover:shadow-glow transition-all">Sign Up</a>
-            </div>
-        </div>
-    </div>
-    <!-- Scripts -->
-    <script src="js/config/edge-functions.js?v=2"></script>
-    <script src="js/cart.js?v=10"></script>
-    <script src="js/ai-buyer-assistant.js?v=13"></script>
-    <script>
-        // ===== Global Variables =====
-        window.currentUser = null;
-        // ===== Initialize App =====
-        window.addEventListener('load', () => {
-            initializeApp();
-        });
-        async function initializeApp() {
-            await updateAuthUI();
-            await loadProducts();
-            setupEventListeners();
-            startCountdown();
-            startFlashCountdown();
-            setupHeroCarousel();
-            // Phase 1 — social commerce
-            // loadDiscoverSellers needs to know if user is logged in, so wait for auth
-            loadDiscoverSellers();
-            loadFollowingFeed();
-            // Phase 2 — live shopping
-            loadLiveNow();
-            // Phase 3 — content & discovery
-            loadStoriesBar();
-            loadTrending();
-            loadDiscoverForYou();
-        }
-        // ===== Auth Functions (via edge function) =====
-        // The new shared/navbar.html handles its own auth UI, so we just
-        // set window.currentUser for the home page's use.
-        async function updateAuthUI() {
-            try {
-                const result = await window.EdgeFunctions.auth.checkSession();
-                const user = result.user;
-                if (user) {
-                    window.currentUser = user;
-                } else {
-                    window.currentUser = null;
-                }
-            } catch (error) {
-                console.error('Auth error:', error);
-            }
-        }
-        // ===== Load Products (via Edge Function) =====
-        async function loadProducts() {
-            try {
-                const result = await window.EdgeFunctions.products.home();
-                if (!result.success) {
-                    console.error('Error loading products:', result.error);
-                    showPlaceholderProducts();
-                    return;
-                }
-                renderProducts('flashDealsContainer', result.flashDeals || [], true);
-                renderProducts('trendingProductsContainer', result.trending || []);
-                renderProducts('farmProductsContainer', result.farmProducts || [], false, true);
-                renderProducts('newArrivalsContainer', result.newArrivals || []);
-            } catch (error) {
-                console.error('Error loading products:', error);
-                showPlaceholderProducts();
-            }
-        }
-        // ===== Render Products =====
-        function renderProducts(containerId, products, isFlashDeal = false, isFarmProduct = false) {
-            const container = document.getElementById(containerId);
-            if (!container) return;
-            if (!products || products.length === 0) {
-                container.innerHTML = getPlaceholderProducts(5);
-                return;
-            }
-            container.innerHTML = products.map(product => createProductCard(product, isFlashDeal, isFarmProduct)).join('');
-        }
-        // ===== Create Product Card =====
-        function createProductCard(product, isFlashDeal = false, isFarmProduct = false) {
-            const originalPrice = product.price || 0;
-            const discount = product.discount_percentage || 0;
-            const discountedPrice = discount > 0 ? originalPrice * (1 - discount / 100) : originalPrice;
-            const image = product.image_url || product.images?.[0] || 'https://via.placeholder.com/300x300?text=Product';
-            const name = product.name || product.title || 'Product Name';
-            const rating = product.rating || 4.5;
-            const reviews = product.reviews_count || Math.floor(Math.random() * 500);
-            const sellerBadge = isFarmProduct ?
-                '<span class="farmer-badge text-white text-xs px-2 py-0.5 rounded-full flex items-center gap-1"><i class="fas fa-leaf text-xs"></i> Farmer</span>' :
-                '<span class="seller-badge text-white text-xs px-2 py-0.5 rounded-full flex items-center gap-1"><i class="fas fa-store text-xs"></i> Merchant</span>';
-            const flashBadge = isFlashDeal ?
-                `<div class="flash-badge absolute top-2 left-2 text-white text-xs font-bold px-2 py-1 rounded-lg z-10">-${discount}%</div>` : '';
-            const stockBar = isFlashDeal ?
-                `<div class="mt-2">
-                    <div class="h-1.5 bg-ink-100 rounded-full overflow-hidden">
-                        <div class="h-full progress-fill" style="width: ${Math.random() * 60 + 20}%"></div>
-                    </div>
-                    <p class="text-[10px] text-urgency-600 font-medium mt-1"><i class="fas fa-fire"></i> Selling fast!</p>
-                </div>` : '';
-            return `
-                <div class="product-card bg-white rounded-2xl overflow-hidden shadow-card border border-ink-100 cursor-pointer relative group" onclick="viewProduct('${product.id}')">
-                    ${flashBadge}
-                    <div class="relative overflow-hidden">
-                        <img src="${image}" alt="${name}" class="product-image w-full h-40 sm:h-48 object-cover"
-                             onerror="this.src='https://via.placeholder.com/300x300?text=Product'">
-                        <button onclick="event.stopPropagation(); addToWishlist('${product.id}')"
-                                class="absolute top-2 right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-50">
-                            <i class="far fa-heart text-gray-400 hover:text-red-500"></i>
-                        </button>
-                        <div class="quick-action absolute bottom-2 left-2 right-2">
-                            <button onclick="event.stopPropagation(); addToCart('${product.id}')"
-                                    class="w-full bg-ink-900 text-white py-2 rounded-xl font-medium text-sm hover:bg-cyan-500 transition-colors">
-                                <i class="fas fa-cart-plus mr-1"></i> Add to Cart
-                            </button>
-                        </div>
-                    </div>
-                    <div class="p-3">
-                        <div class="flex items-center gap-2 mb-1">${sellerBadge}</div>
-                        <h3 class="font-medium text-ink-900 text-sm line-clamp-2 mb-1">${name}</h3>
-                        <div class="flex items-center gap-1 mb-2">
-                            <div class="flex text-cyan-400 text-xs">
-                                ${'<i class="fas fa-star"></i>'.repeat(Math.floor(rating))}
-                                ${rating % 1 >= 0.5 ? '<i class="fas fa-star-half-alt"></i>' : ''}
-                            </div>
-                            <span class="text-gray-400 text-xs">(${reviews})</span>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <span class="text-lg font-bold text-ink-900">₦${discountedPrice.toLocaleString()}</span>
-                            ${discount > 0 ? `<span class="text-sm text-gray-400 line-through">₦${originalPrice.toLocaleString()}</span>` : ''}
-                        </div>
-                        ${stockBar}
-                    </div>
-                </div>
-            `;
-        }
-        // ===== Placeholder Products =====
-        function getPlaceholderProducts(count) {
-            let html = '';
-            for (let i = 0; i < count; i++) {
-                html += `
-                    <div class="bg-white rounded-2xl overflow-hidden shadow-card border border-ink-100">
-                        <div class="skeleton w-full h-40 sm:h-48"></div>
-                        <div class="p-3">
-                            <div class="skeleton h-4 w-3/4 rounded mb-2"></div>
-                            <div class="skeleton h-4 w-1/2 rounded mb-2"></div>
-                            <div class="skeleton h-6 w-1/3 rounded"></div>
-                        </div>
-                    </div>
-                `;
-            }
-            return html;
-        }
-        function showPlaceholderProducts() {
-            ['flashDealsContainer', 'trendingProductsContainer', 'farmProductsContainer', 'newArrivalsContainer'].forEach(id => {
-                const container = document.getElementById(id);
-                if (container) container.innerHTML = getPlaceholderProducts(5);
-            });
-        }
-        // ===== Event Listeners =====
-        function setupEventListeners() {
-            window.addEventListener('scroll', () => {
-                const header = document.getElementById('mainHeader');
-                if (window.scrollY > 50) header.classList.add('scrolled');
-                else header.classList.remove('scrolled');
-            });
-            const userAvatarBtn = document.getElementById('userAvatarBtn');
-            const userDropdown = document.getElementById('userDropdown');
-            if (userAvatarBtn && userDropdown) {
-                userAvatarBtn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    userDropdown.classList.toggle('hidden');
-                });
-                document.addEventListener('click', () => userDropdown.classList.add('hidden'));
-            }
-            const logoutBtn = document.getElementById('logoutBtn');
-            if (logoutBtn) {
-                logoutBtn.addEventListener('click', async () => {
-                    await window.EdgeFunctions.auth.logout();
-                    window.location.reload();
-                });
-            }
-            const closeAuthModal = document.getElementById('closeAuthModal');
-            const authModal = document.getElementById('authModal');
-            if (closeAuthModal && authModal) {
-                closeAuthModal.addEventListener('click', () => {
-                    authModal.classList.add('hidden');
-                    authModal.classList.remove('flex');
-                });
-            }
-        }
-        // ===== Hero Countdown (hours, minutes, seconds) =====
-        function startCountdown() {
-            let hours = 12, minutes = 45, seconds = 30;
-            setInterval(() => {
-                seconds--;
-                if (seconds < 0) {
-                    seconds = 59; minutes--;
-                    if (minutes < 0) {
-                        minutes = 59; hours--;
-                        if (hours < 0) hours = 23;
-                    }
-                }
-                document.getElementById('hours').textContent = String(hours).padStart(2, '0');
-                document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
-                document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
-            }, 1000);
-        }
-        // ===== Flash Sales Countdown =====
-        function startFlashCountdown() {
-            let flashSec = 2 * 60 + 15;
-            function pad(n) { return String(n).padStart(2, '0'); }
-            setInterval(() => {
-                if (flashSec <= 0) flashSec = 2 * 60 + 15;
-                flashSec--;
-                const fsH = document.getElementById('fs-h');
-                const fsM = document.getElementById('fs-m');
-                const fsS = document.getElementById('fs-s');
-                if (fsH) fsH.textContent = pad(Math.floor(flashSec / 3600));
-                if (fsM) fsM.textContent = pad(Math.floor((flashSec % 3600) / 60));
-                if (fsS) fsS.textContent = pad(flashSec % 60);
-            }, 1000);
-        }
-        // ===== Hero Carousel Auto-rotate =====
-        function setupHeroCarousel() {
-            const carousel = document.getElementById('heroCarousel');
-            if (!carousel) return;
-            const dots = document.querySelectorAll('#heroDots span');
-            carousel.addEventListener('scroll', () => {
-                const idx = Math.round(carousel.scrollLeft / carousel.offsetWidth);
-                dots.forEach((d, i) => d.className = `w-1.5 h-1.5 rounded-full ${i === idx ? 'bg-white' : 'bg-white/40'}`);
-            });
-            let autoIdx = 0;
-            setInterval(() => {
-                autoIdx = (autoIdx + 1) % 3;
-                carousel.scrollTo({ left: autoIdx * carousel.offsetWidth, behavior: 'smooth' });
-            }, 4500);
-        }
-        // ===== Product Actions =====
-        function viewProduct(productId) {
-            window.location.href = `product.html?id=${productId}`;
-        }
-        async function addToCart(productId) {
-            if (!window.currentUser) {
-                const authModal = document.getElementById('authModal');
-                authModal.classList.remove('hidden');
-                authModal.classList.add('flex');
-                return;
-            }
-            try {
-                if (window.Cart) {
-                    const result = await window.Cart.addToCart(productId, 1);
-                    if (result.success) showNotification('Added to cart!', 'success');
-                    else if (result.requiresAuth) {
-                        const authModal = document.getElementById('authModal');
-                        authModal.classList.remove('hidden');
-                        authModal.classList.add('flex');
-                    } else alert(result.message || 'Failed to add to cart');
-                } else {
-                    console.error('Cart module not loaded');
-                    alert('Cart service unavailable. Please refresh the page.');
-                }
-            } catch (error) {
-                console.error('Error adding to cart:', error);
-                alert('Failed to add to cart. Please try again.');
-            }
-        }
-        function showNotification(message, type = 'success') {
-            const notification = document.createElement('div');
-            notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-pop z-50 transition-all transform translate-y-0 ${
-                type === 'success' ? 'bg-trust-500 text-white' : 'bg-red-500 text-white'
-            }`;
-            notification.innerHTML = `<div class="flex items-center gap-2"><i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i><span>${message}</span></div>`;
-            document.body.appendChild(notification);
-            setTimeout(() => {
-                notification.classList.add('translate-y-20', 'opacity-0');
-                setTimeout(() => notification.remove(), 300);
-            }, 3000);
-        }
-        async function addToWishlist(productId) {
-            if (!window.currentUser) {
-                const authModal = document.getElementById('authModal');
-                authModal.classList.remove('hidden');
-                authModal.classList.add('flex');
-                return;
-            }
-            try { alert('Added to wishlist!'); } catch (error) { console.error('Error:', error); }
-        }
-        // ===== Search =====
-        function handleSearchKeypress(event) {
-            if (event.key === 'Enter') performSearch();
-        }
-        function performSearch() {
-            const searchInput = document.getElementById('searchInput');
-            const query = searchInput.value.trim();
-            if (query) window.location.href = `search-result.html?q=${encodeURIComponent(query)}`;
-        }
-        // ====================================================================
-        // Phase 1 — Social commerce (Discover sellers, Following feed)
-        // ====================================================================
-        async function loadDiscoverSellers() {
-            const container = document.getElementById('discoverSellersContainer');
-            if (!container) return;
-            try {
-                // Always show ALL sellers (both logged in and logged out)
-                const [sellersResp, productsResp, sess] = await Promise.all([
-                    window.EdgeFunctions.social.discover(10),
-                    window.EdgeFunctions.products.all(100),
-                    window.EdgeFunctions.auth.checkSession(),
-                ]);
-                // Set window.currentUser for other functions that need it
-                window.currentUser = (sess.success && sess.user) ? sess.user : null;
-                if (!sellersResp.success || !sellersResp.sellers || sellersResp.sellers.length === 0) {
-                    container.innerHTML = `
-                        <div class="text-center py-8 text-gray-500 text-sm">
-                            <i class="fas fa-store text-3xl block mb-2 text-gray-300"></i>
-                            No sellers yet. <a href="seller/index.html" class="text-cyan-600 font-semibold">Open your store</a>
-                        </div>`;
-                    return;
-                }
-                const allProducts = productsResp.success ? (productsResp.products || []) : [];
-                container.innerHTML = sellersResp.sellers.map(s => {
-                    const name = s.business_name || s.farm_name || 'Unnamed store';
-                    const initial = (name || '?').charAt(0).toUpperCase();
-                    const sellerId = s.id || s.seller_id;
-                    const sellerProducts = allProducts.filter(p => p.seller_id === sellerId).slice(0, 4);
-                    let productGridHtml = '';
-                    if (sellerProducts.length > 0) {
-                        let gridItems = sellerProducts.map(p => {
-                            const img = p.image_url
-                                ? `<img src="${p.image_url}" class="w-full aspect-square object-cover" alt="${escapeHtml(p.name)}">`
-                                : `<div class="w-full aspect-square bg-gray-100 flex items-center justify-center text-gray-400"><i class="fas fa-box text-2xl"></i></div>`;
-                            return `<a href="product.html?id=${p.id}" class="block rounded-lg overflow-hidden bg-gray-50">${img}</a>`;
-                        }).join('');
-                        const emptySlots = 4 - sellerProducts.length;
-                        for (let i = 0; i < emptySlots; i++) {
-                            gridItems += `<div class="w-full aspect-square bg-gray-50 rounded-lg flex items-center justify-center text-gray-300"><i class="fas fa-box text-2xl"></i></div>`;
-                        }
-                        productGridHtml = `<div class="grid grid-cols-2 gap-1.5 mb-3">${gridItems}</div>`;
-                    } else {
-                        productGridHtml = `<div class="grid grid-cols-2 gap-1.5 mb-3">
-                            <div class="w-full aspect-square bg-gray-50 rounded-lg"></div>
-                            <div class="w-full aspect-square bg-gray-50 rounded-lg"></div>
-                            <div class="w-full aspect-square bg-gray-50 rounded-lg"></div>
-                            <div class="w-full aspect-square bg-gray-50 rounded-lg"></div>
-                        </div>`;
-                    }
-                    const avatar = s.profile_image
-                        ? `<img src="${s.profile_image}" class="w-10 h-10 rounded-full object-cover" alt="">`
-                        : `<div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-700 flex items-center justify-center text-white font-bold text-sm">${initial}</div>`;
-                    return `
-                        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-3">
-                            ${productGridHtml}
-                            <div class="flex items-center gap-3">
-                                <a href="seller-profile.html?id=${sellerId}" class="shrink-0">${avatar}</a>
-                                <div class="flex-1 min-w-0">
-                                    <a href="seller-profile.html?id=${sellerId}" class="font-bold text-sm text-gray-900 hover:text-cyan-600 truncate block">${escapeHtml(name)}</a>
-                                    <div class="text-xs text-gray-500">${s.followers || 0} followers · ${escapeHtml(s.business_category || s.seller_type || 'Seller')}</div>
-                                </div>
-                                <a href="seller-profile.html?id=${sellerId}" class="bg-gray-900 text-white text-sm font-semibold px-4 py-2 rounded-lg hover:bg-cyan-600 transition whitespace-nowrap">Shop</a>
-                            </div>
-                        </div>`;
-                }).join('');
-            } catch (e) {
-                console.error('discoverSellers error:', e);
-            }
-        }
-        async function loadFollowingFeed() {
-            const section = document.getElementById('followingFeedSection');
-            const container = document.getElementById('followingFeedContainer');
-            if (!section || !container) return;
-            // Only show if user is logged in
-            if (!window.currentUser) return;
-            try {
-                const resp = await window.EdgeFunctions.social.feed(15, 0);
-                if (!resp.success || !resp.items || resp.items.length === 0) return;
-                section.classList.remove('hidden');
-                const iconMap = {
-                    new_product:    { cls: 'bg-cyan-100 text-cyan-700',  icon: 'fa-box' },
-                    price_drop:     { cls: 'bg-pink-100 text-pink-700',   icon: 'fa-tag' },
-                    restock:        { cls: 'bg-green-100 text-green-700', icon: 'fa-truck' },
-                    sale_milestone: { cls: 'bg-blue-100 text-blue-700',   icon: 'fa-trophy' },
-                    announcement:   { cls: 'bg-cyan-100 text-cyan-700', icon: 'fa-bullhorn' },
-                };
-                container.innerHTML = resp.items.map(it => {
-                    const m = iconMap[it.activity_type] || iconMap.announcement;
-                    const sellerName = it.seller?.business_name || it.seller?.farm_name || 'Seller';
-                    const sellerImg = it.seller?.profile_image
-                        ? `<img src="${it.seller.profile_image}" class="w-8 h-8 rounded-full object-cover">`
-                        : `<div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-700 flex items-center justify-center font-bold text-ink-900 text-sm">${(sellerName || '?').charAt(0).toUpperCase()}</div>`;
-                    return `
-                        <a href="seller-profile.html?id=${it.seller_id}" class="flex items-start gap-3 p-2 hover:bg-ink-50 rounded-xl transition border-b border-ink-100 last:border-0">
-                            ${sellerImg}
-                            <div class="flex-1 min-w-0">
-                                <div class="flex items-center gap-1.5 text-xs text-ink-500 mb-0.5">
-                                    <span class="font-semibold text-ink-800">${escapeHtml(sellerName)}</span>
-                                    <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full ${m.cls} text-[9px] font-bold uppercase tracking-wide">
-                                        <i class="fas ${m.icon} text-[8px]"></i> ${it.activity_type.replace(/_/g, ' ')}
-                                    </span>
-                                    <span class="ml-auto text-[10px]">${timeAgo(it.created_at)}</span>
-                                </div>
-                                <div class="text-sm font-medium text-ink-900">${escapeHtml(it.title)}</div>
-                                ${it.body ? `<div class="text-xs text-ink-500 mt-0.5 line-clamp-2">${escapeHtml(it.body)}</div>` : ''}
-                            </div>
-                            ${it.image_url ? `<img src="${it.image_url}" class="w-14 h-14 rounded-lg object-cover flex-shrink-0">` : ''}
-                        </a>`;
-                }).join('');
-            } catch (e) {
-                console.error('followingFeed error:', e);
-            }
-        }
-        function escapeHtml(s) {
-            return String(s ?? '').replace(/[&<>"']/g, c => ({
-                '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
-            }[c]));
-        }
-        function timeAgo(iso) {
-            if (!iso) return '';
-            const d = new Date(iso);
-            const diff = (Date.now() - d.getTime()) / 1000;
-            if (diff < 60) return 'just now';
-            if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
-            if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
-            if (diff < 604800) return Math.floor(diff / 86400) + 'd ago';
-            return d.toLocaleDateString();
-        }
-        // ====================================================================
-        // Phase 2 — Live shopping "Live Now" carousel
-        // ====================================================================
-        async function loadLiveNow() {
-            const section = document.getElementById('liveNowSection');
-            const container = document.getElementById('liveNowContainer');
-            if (!section || !container) return;
-            try {
-                const resp = await window.EdgeFunctions.live.list('live');
-                if (!resp.success || !resp.sessions || resp.sessions.length === 0) return;
-                section.classList.remove('hidden');
-                container.innerHTML = resp.sessions.slice(0, 6).map(s => {
-                    const sellerName = s.seller?.business_name || 'Seller';
-                    const sellerImg = s.seller?.profile_image;
-                    return `
-                        <a href="live-watch.html?id=${s.id}" class="bg-white rounded-2xl border border-ink-100 shadow-card overflow-hidden lift block hover:border-red-400 transition">
-                            <div class="aspect-video bg-gradient-to-br from-red-500 to-pink-600 flex items-center justify-center text-white relative">
-                                <i class="fas fa-broadcast-tower text-3xl"></i>
-                                <span class="absolute top-2 left-2 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">● Live</span>
-                                <span class="absolute top-2 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded-full">👁 ${s.viewer_count || 0}</span>
-                            </div>
-                            <div class="p-3">
-                                <div class="font-bold text-sm line-clamp-1">${escapeHtml(s.title)}</div>
-                                <div class="flex items-center gap-1.5 mt-1.5 text-xs text-ink-500">
-                                    ${sellerImg
-                                        ? `<img src="${sellerImg}" class="w-4 h-4 rounded-full">`
-                                        : `<div class="w-4 h-4 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-700 flex items-center justify-center text-[8px] font-bold text-ink-900">${(sellerName||'?').charAt(0)}</div>`}
-                                    <span class="truncate">${escapeHtml(sellerName)}</span>
-                                </div>
-                            </div>
-                        </a>`;
-                }).join('');
-            } catch (e) {
-                console.error('liveNow error:', e);
-            }
-        }
-        // ====================================================================
-        // Phase 3 — Stories bar, Trending, AI Discover
-        // ====================================================================
-        async function loadStoriesBar() {
-            const section = document.getElementById('storiesBarSection');
-            const container = document.getElementById('storiesBarContainer');
-            if (!section || !container) return;
-            try {
-                const resp = await window.EdgeFunctions.stories.activeBar();
-                if (!resp.success || !resp.stories || resp.stories.length === 0) return;
-                // If logged in, filter to only show stories from followed sellers
-                // If not logged in, show ALL sellers' stories
-                let storiesToShow = resp.stories;
-                if (window.currentUser) {
-                    // Fetch followed seller IDs
-                    const followingResp = await window.EdgeFunctions.social.following();
-                    if (followingResp.success && followingResp.sellers) {
-                        const followedIds = new Set(followingResp.sellers.map(s => s.id));
-                        storiesToShow = resp.stories.filter(s => followedIds.has(s.seller_id));
-                    }
-                    // If user follows no sellers with stories, don't show the section
-                    if (storiesToShow.length === 0) return;
-                }
-                section.classList.remove('hidden');
-                container.innerHTML = storiesToShow.slice(0, 12).map(s => {
-                    const name = s.business_name || 'Seller';
-                    const initial = (name || '?').charAt(0).toUpperCase();
-                    const ringClass = s.has_unseen ? 'ring-cyan-400' : 'ring-gray-200';
-                    const img = s.profile_image
-                        ? `<img src="${s.profile_image}" class="w-16 h-16 rounded-full object-cover">`
-                        : `<div class="w-16 h-16 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-700 flex items-center justify-center font-bold text-2xl text-white">${initial}</div>`;
-                    return `
-                        <button onclick="openStoryViewer(${JSON.stringify(s.stories).replace(/"/g,'&quot;')}, 0)" class="flex flex-col items-center gap-1 flex-shrink-0" style="width:72px;">
-                            <div class="p-0.5 rounded-full ring-2 ${ringClass}">${img}</div>
-                            <div class="text-[10px] text-gray-700 truncate w-full text-center">${escapeHtml(name.slice(0, 10))}</div>
-                        </button>`;
-                }).join('');
-            } catch (e) {
-                console.error('storiesBar error:', e);
-            }
-        }
-        async function loadTrending() {
-            const section = document.getElementById('trendingSection');
-            const container = document.getElementById('trendingContainer');
-            if (!section || !container) return;
-            try {
-                const resp = await window.EdgeFunctions.trending.list(10, 24);
-                if (!resp.success || !resp.products || resp.products.length === 0) return;
-                section.classList.remove('hidden');
-                document.getElementById('trendingRefreshedAt').textContent = 'Updated ' + timeAgo(resp.refreshed_at);
-                container.innerHTML = resp.products.map(p => `
-                    <a href="product.html?id=${p.id}" class="bg-white rounded-2xl border border-ink-100 shadow-card overflow-hidden lift block">
-                        ${p.image_url
-                            ? `<img src="${p.image_url}" class="w-full aspect-square object-cover">`
-                            : `<div class="w-full aspect-square bg-ink-100 flex items-center justify-center text-3xl text-ink-300"><i class="fas fa-box"></i></div>`}
-                        <div class="p-2">
-                            <div class="font-bold text-sm line-clamp-1">${escapeHtml(p.name)}</div>
-                            <div class="text-cyan-600 font-extrabold text-sm mt-0.5">$${Number(p.price).toFixed(2)}</div>
-                            <div class="flex items-center gap-2 text-[10px] text-ink-500 mt-1">
-                                <span><i class="fas fa-eye"></i> ${p.trending.views}</span>
-                                <span><i class="fas fa-share"></i> ${p.trending.shares}</span>
-                                <span><i class="fas fa-shopping-bag"></i> ${p.trending.purchases}</span>
-                            </div>
-                        </div>
-                    </a>`).join('');
-            } catch (e) {
-                console.error('trending error:', e);
-            }
-        }
-        async function loadDiscoverForYou() {
-            const section = document.getElementById('discoverSection');
-            const container = document.getElementById('discoverContainer');
-            if (!section || !container) return;
-            // Only show for logged-in users
-            if (!window.currentUser) return;
-            try {
-                const resp = await window.EdgeFunctions.discover.recommend(10);
-                if (!resp.success || !resp.recommendations || resp.recommendations.length === 0) return;
-                section.classList.remove('hidden');
-                container.innerHTML = resp.recommendations.map(r => {
-                    const p = r.product;
-                    return `
-                        <a href="product.html?id=${p.id}" onclick="logDiscoverView(${p.id})" class="bg-white rounded-2xl border border-violet-200 shadow-card overflow-hidden lift block relative">
-                            ${p.image_url
-                                ? `<img src="${p.image_url}" class="w-full aspect-square object-cover">`
-                                : `<div class="w-full aspect-square bg-violet-50 flex items-center justify-center text-3xl text-violet-300"><i class="fas fa-box"></i></div>`}
-                            <div class="absolute top-1 right-1 bg-violet-600 text-white text-[9px] font-bold px-1.5 py-0.5 rounded">${escapeHtml(r.signal.replace(/_/g,' '))}</div>
-                            <div class="p-2">
-                                <div class="font-bold text-sm line-clamp-1">${escapeHtml(p.name)}</div>
-                                <div class="text-cyan-600 font-extrabold text-sm mt-0.5">$${Number(p.price).toFixed(2)}</div>
-                                <div class="text-[10px] text-ink-500 mt-1 line-clamp-2">${escapeHtml(r.reason)}</div>
-                            </div>
-                        </a>`;
-                }).join('');
-            } catch (e) {
-                console.error('discover error:', e);
-            }
-        }
-        async function logDiscoverView(productId) {
-            window.EdgeFunctions.discover.logView(productId).catch(() => {});
-        }
-        // Story viewer (simple modal-like full-screen viewer)
-        function openStoryViewer(stories, startIndex) {
-            let idx = startIndex || 0;
-            const overlay = document.createElement('div');
-            overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;';
-            const render = () => {
-                const s = stories[idx];
-                if (!s) { overlay.remove(); return; }
-                overlay.innerHTML = `
-                    <button onclick="this.parentElement.remove()" style="position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,0.2);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.2rem;cursor:pointer;">×</button>
-                    <div style="max-width:420px;width:100%;text-align:center;">
-                        <div style="margin-bottom:0.5rem;color:#fff;font-size:0.85rem;">${idx + 1} / ${stories.length}</div>
-                        ${s.video_url
-                            ? `<video src="${s.video_url}" autoplay style="max-width:100%;max-height:70vh;border-radius:12px;" controls></video>`
-                            : s.image_url
-                                ? `<img src="${s.image_url}" style="max-width:100%;max-height:70vh;border-radius:12px;">`
-                                : `<div style="background:#fff;border-radius:12px;padding:2rem;"><i class="fas fa-bullhorn text-3xl text-cyan-500"></i></div>`}
-                        <div style="color:#fff;margin-top:1rem;font-weight:600;">${escapeHtml(s.title || '')}</div>
-                        ${s.title ? `<div style="color:#cbd5e1;margin-top:0.25rem;font-size:0.85rem;">${escapeHtml(s.title)}</div>` : ''}
-                        <div style="margin-top:1rem;display:flex;gap:0.5rem;justify-content:center;">
-                            ${idx > 0 ? '<button onclick="window._storyPrev()" style="background:rgba(255,255,255,0.2);color:#fff;border:none;padding:0.5rem 1rem;border-radius:8px;cursor:pointer;">← Prev</button>' : ''}
-                            ${idx < stories.length - 1 ? '<button onclick="window._storyNext()" style="background:#00d4ff;color:#0f172a;border:none;padding:0.5rem 1rem;border-radius:8px;font-weight:700;cursor:pointer;">Next →</button>' : '<button onclick="this.parentElement.parentElement.parentElement.remove()" style="background:rgba(255,255,255,0.2);color:#fff;border:none;padding:0.5rem 1rem;border-radius:8px;cursor:pointer;">Done</button>'}
-                        </div>
-                    </div>`;
-                // Mark as seen
-                window.EdgeFunctions.stories.get(s.id).catch(() => {});
-            };
-            window._storyNext = () => { idx = Math.min(idx + 1, stories.length - 1); render(); };
-            window._storyPrev = () => { idx = Math.max(idx - 1, 0); render(); };
-            render();
-            document.body.appendChild(overlay);
-            // Click outside to close
-            overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
-        }
-    </script>
-</body>
-</html>

js/ai-assistant.js DELETED Viewed

@@ -1,301 +0,0 @@
-// AI Shopping Assistant
-class AIShoppingAssistant {
-    constructor() {
-        this.assistantWindow = null;
-        this.createAssistantWindow();
-        this.bindEvents();
-    }
-    createAssistantWindow() {
-        // Create modal HTML
-        const modalHTML = `
-            <div id="ai-assistant-modal" class="ai-modal">
-                <div class="ai-modal-content">
-                    <div class="ai-modal-header">
-                        <h3><i class="fas fa-robot"></i> Shopping Assistant</h3>
-                        <button class="close-modal">&times;</button>
-                    </div>
-                    <div class="ai-chat-container">
-                        <div class="ai-messages" id="aiMessages">
-                            <div class="ai-message">
-                                Hello! I'm your shopping assistant. Tell me what you're looking for, and I'll help you find the perfect product.
-                            </div>
-                        </div>
-                        <div class="ai-input">
-                            <input type="text" id="userInput" placeholder="Describe what you're looking for...">
-                            <button id="sendMessage"><i class="fas fa-paper-plane"></i></button>
-                        </div>
-                    </div>
-                </div>
-            </div>`;
-        // Add modal to body
-        document.body.insertAdjacentHTML('beforeend', modalHTML);
-        this.assistantWindow = document.getElementById('ai-assistant-modal');
-        // Add styles
-        const styles = `
-            .ai-modal {
-                display: none;
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0,0,0,0.5);
-                z-index: 1001;
-            }
-            .ai-modal-content {
-                position: fixed;
-                bottom: 2rem;
-                right: 2rem;
-                width: 350px;
-                height: 500px;
-                background-color: white;
-                border-radius: 12px;
-                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-                display: flex;
-                flex-direction: column;
-            }
-            .ai-modal-header {
-                padding: 1rem;
-                background-color: #00d4ff;
-                color: white;
-                border-radius: 12px 12px 0 0;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            }
-            .ai-modal-header h3 {
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-                margin: 0;
-                font-size: 1.1rem;
-            }
-            .close-modal {
-                background: none;
-                border: none;
-                color: white;
-                font-size: 1.5rem;
-                cursor: pointer;
-                padding: 0;
-            }
-            .ai-chat-container {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-                padding: 1rem;
-            }
-            .ai-messages {
-                flex: 1;
-                overflow-y: auto;
-                padding: 1rem;
-                display: flex;
-                flex-direction: column;
-                gap: 1rem;
-            }
-            .ai-message, .user-message {
-                max-width: 80%;
-                padding: 0.8rem;
-                border-radius: 12px;
-                font-size: 0.9rem;
-            }
-            .ai-message {
-                background-color: #f0f2f5;
-                align-self: flex-start;
-                border-bottom-left-radius: 4px;
-            }
-            .user-message {
-                background-color: #00d4ff;
-                color: white;
-                align-self: flex-end;
-                border-bottom-right-radius: 4px;
-            }
-            .ai-input {
-                display: flex;
-                gap: 0.5rem;
-                padding: 1rem;
-                background-color: white;
-                border-top: 1px solid #eee;
-            }
-            .ai-input input {
-                flex: 1;
-                padding: 0.8rem;
-                border: 1px solid #ddd;
-                border-radius: 20px;
-                font-size: 0.9rem;
-            }
-            .ai-input button {
-                background-color: #00d4ff;
-                color: white;
-                border: none;
-                border-radius: 50%;
-                width: 40px;
-                height: 40px;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transition: background-color 0.3s;
-            }
-            .ai-input button:hover {
-                background-color: #d63d40;
-            }
-            .product-suggestion {
-                background-color: white;
-                border: 1px solid #ddd;
-                border-radius: 8px;
-                padding: 0.8rem;
-                margin-top: 0.5rem;
-                cursor: pointer;
-                transition: transform 0.2s;
-            }
-            .product-suggestion:hover {
-                transform: translateY(-2px);
-            }
-        `;
-        const styleSheet = document.createElement('style');
-        styleSheet.textContent = styles;
-        document.head.appendChild(styleSheet);
-    }
-    bindEvents() {
-        // Open assistant
-        document.querySelector('.ai-button').addEventListener('click', () => this.open());
-        // Close assistant
-        document.querySelector('.close-modal').addEventListener('click', () => this.close());
-        // Send message
-        document.getElementById('sendMessage').addEventListener('click', () => this.sendMessage());
-        document.getElementById('userInput').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') this.sendMessage();
-        });
-    }
-    open() {
-        this.assistantWindow.style.display = 'block';
-        document.getElementById('userInput').focus();
-    }
-    close() {
-        this.assistantWindow.style.display = 'none';
-    }
-    sendMessage() {
-        const input = document.getElementById('userInput');
-        const message = input.value.trim();
-        if (message) {
-            this.addMessage(message, 'user');
-            input.value = '';
-            // Process the message and generate a response
-            this.processUserInput(message);
-        }
-    }
-    addMessage(message, sender) {
-        const messagesContainer = document.getElementById('aiMessages');
-        const messageDiv = document.createElement('div');
-        messageDiv.className = sender === 'user' ? 'user-message' : 'ai-message';
-        messageDiv.textContent = message;
-        messagesContainer.appendChild(messageDiv);
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-    }
-    async processUserInput(message) {
-        // Simulate AI processing
-        const keywords = this.extractKeywords(message);
-        const suggestions = this.findRelevantProducts(keywords);
-        // Simulate typing delay
-        await this.delay(1000);
-        // Generate and display response
-        const response = this.generateResponse(message, suggestions);
-        this.addMessage(response, 'ai');
-        // Display product suggestions if any
-        if (suggestions.length > 0) {
-            await this.delay(500);
-            this.displayProductSuggestions(suggestions);
-        }
-    }
-    extractKeywords(message) {
-        // Simple keyword extraction (can be enhanced with NLP)
-        return message.toLowerCase()
-            .replace(/[^\w\s]/g, '')
-            .split(' ')
-            .filter(word => word.length > 2);
-    }
-    findRelevantProducts(keywords) {
-        // This should be replaced with actual product filtering logic
-        return products.filter(product =>
-            keywords.some(keyword =>
-                product.name.toLowerCase().includes(keyword) ||
-                product.description.toLowerCase().includes(keyword) ||
-                product.category.toLowerCase().includes(keyword)
-            )
-        );
-    }
-    generateResponse(message, suggestions) {
-        if (suggestions.length === 0) {
-            return "I couldn't find any products matching your description. Could you please provide more details about what you're looking for?";
-        }
-        return `I found ${suggestions.length} products that might interest you. Here are some suggestions:`;
-    }
-    displayProductSuggestions(suggestions) {
-        const messagesContainer = document.getElementById('aiMessages');
-        suggestions.forEach(product => {
-            const suggestionDiv = document.createElement('div');
-            suggestionDiv.className = 'product-suggestion';
-            suggestionDiv.innerHTML = `
-                <strong>${product.name}</strong>
-                <p>${product.description}</p>
-                <p class="price">₦${product.price}</p>
-            `;
-            suggestionDiv.addEventListener('click', () => {
-                // Navigate to product details or add to cart
-                this.addMessage(`Would you like to add ${product.name} to your cart?`, 'ai');
-            });
-            messagesContainer.appendChild(suggestionDiv);
-        });
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-    }
-    delay(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
-    }
-}
-// Initialize AI Shopping Assistant when the page loads
-document.addEventListener('DOMContentLoaded', () => {
-    window.aiAssistant = new AIShoppingAssistant();
-});

js/ai-buyer-assistant.js DELETED Viewed

@@ -1,962 +0,0 @@
-/**
- * Cellex AI Buyer Assistant - "Cellex"
- * FREE & OPEN SOURCE - No API keys required!
- *
- * Supports TWO modes:
- * 1. Widget mode (index.html) — creates floating chat widget
- * 2. Full-page mode (ai-chat.html) — attaches to existing page UI
- *
- * The AI backend handles natural language understanding
- * Frontend just sends context and executes actions
- */
-(function() {
-    'use strict';
-    const CONFIG = {
-        // AI chat now goes through our Supabase Edge Function (server-side).
-        // The HF Space URL, AI model, and system prompt are all hidden from the frontend.
-        // Edge function: supabase/functions/ai-chat/index.ts
-        sessionKey: 'eeshamart_ai_session',
-        debug: true
-    };
-    // Detect full-page mode: ai-chat.html has #chatContainer
-    const isFullPage = !!document.getElementById('chatContainer');
-    // Inject shared product + action-result styles ONCE, regardless of mode.
-    // Both widget mode and full-page mode use the same .ai-product-card / .ai-action-result
-    // classes so users get a consistent experience across surfaces.
-    (function injectSharedStyles() {
-        if (document.getElementById('ai-shared-styles')) return;
-        const style = document.createElement('style');
-        style.id = 'ai-shared-styles';
-        style.textContent = `
-            .ai-product-card{background:white;border-radius:10px;padding:10px;margin-top:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;gap:10px;cursor:pointer;transition:all .2s;border:2px solid transparent}
-            .ai-product-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1);border-color:#00d4ff}
-            .ai-product-img{width:64px;height:64px;border-radius:8px;object-fit:cover;background:#f1f5f9;flex-shrink:0}
-            .ai-product-info{flex:1;min-width:0}
-            .ai-product-name{font-weight:600;font-size:12px;margin-bottom:2px;color:#1e293b}
-            .ai-product-price{color:#0891b2;font-weight:700;font-size:13px}
-            .ai-product-meta{font-size:10px;color:#64748b;margin-top:2px}
-            .ai-product-actions{display:flex;gap:4px;margin-top:6px}
-            .ai-action-btn{padding:4px 8px;border-radius:4px;border:none;font-size:10px;font-weight:600;cursor:pointer}
-            .ai-action-btn-primary{background:linear-gradient(135deg,#00d4ff,#00d4ff);color:#0f172a}
-            .ai-action-btn-secondary{background:#f1f5f9;color:#475569}
-            .ai-action-btn:hover{transform:scale(1.05)}
-            .ai-action-result{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f0fdf4;border-radius:8px;margin-top:8px;font-size:12px;color:#166534;border:1px solid #bbf7d0}
-            .ai-action-result.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
-            .ai-action-result.warning{background:#fffbeb;color:#0e7490;border-color:#a5f3fc}
-        `;
-        document.head.appendChild(style);
-    })();
-    let isOpen = false;
-    let isLoading = false;
-    let conversationHistory = [];
-    let sessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    let container = null;
-    let selectedImage = null;
-    let context = {
-        lastShownProducts: [],
-        cartItems: [],
-        user: null
-    };
-    const CATEGORIES = [
-        { name: 'Electronics', icon: 'fa-laptop', query: 'Show me electronics' },
-        { name: 'Fashion', icon: 'fa-tshirt', query: 'Show me fashion' },
-        { name: 'Home', icon: 'fa-couch', query: 'Show me home products' },
-        { name: 'Beauty', icon: 'fa-spa', query: 'Show me beauty products' },
-        { name: 'Sports', icon: 'fa-futbol', query: 'Show me sports gear' },
-        { name: 'Books', icon: 'fa-book', query: 'Show me books' }
-    ];
-    document.addEventListener('DOMContentLoaded', init);
-    function init() {
-        if (isFullPage) {
-            initFullPage();
-        } else {
-            setTimeout(createWidget, 500);
-        }
-    }
-    // ============================================
-    // FULL-PAGE MODE (ai-chat.html)
-    // ============================================
-    function initFullPage() {
-        console.log('[Cellex AI] Full-page mode activated');
-        // Wire suggestion chips to sendMessage
-        document.querySelectorAll('.chip[data-query], .chip[onclick]').forEach(btn => {
-            // Chips already have onclick="sendSuggestion('...')" in HTML
-        });
-        // Wire image upload button
-        const fileInput = document.getElementById('ai-file-input');
-        if (fileInput) {
-            fileInput.addEventListener('change', handleFileSelect);
-        }
-        // Wire image remove button
-        const removeBtn = document.getElementById('ai-remove-image');
-        if (removeBtn) {
-            removeBtn.addEventListener('click', removeSelectedImage);
-        }
-        // Make sendMessage available globally (needed by onclick/onkeypress in HTML)
-        window.sendMessage = sendMessage;
-        // Make sendSuggestion available globally
-        window.sendSuggestion = function(text) {
-            document.getElementById('chatInput').value = text;
-            sendMessage();
-        };
-        // Make clearChat available globally
-        window.clearChat = clearConversation;
-    }
-    function fullPage_addMessage(role, content, data = {}) {
-        const chatContainer = document.getElementById('chatContainer');
-        if (!chatContainer) return;
-        const now = new Date();
-        const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-        const isUser = role === 'user';
-        const parsed = content
-            .replace(/\*\*(.*?)\*\*/g, '<strong>₦1</strong>')
-            .replace(/\n/g, '<br>');
-        // Build image HTML if provided
-        let imageHtml = '';
-        if (data.image) {
-            imageHtml = `<div style="margin-bottom:8px"><img src="${data.image}" alt="Shared image" style="max-width:200px;max-height:150px;border-radius:8px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.1)"></div>`;
-        }
-        if (isUser) {
-            const div = document.createElement('div');
-            div.className = 'flex justify-end mb-3';
-            div.innerHTML = `
-                <div class="message-bubble bg-gradient-to-br from-orange-400 to-cyan-600 rounded-2xl rounded-tr-md p-3.5 shadow-sm max-w-[80%]">
-                    ${imageHtml}
-                    <p class="text-sm text-white leading-relaxed">${parsed}</p>
-                    <p class="text-[10px] text-orange-100 mt-1.5 text-right">${time}</p>
-                </div>`;
-            chatContainer.appendChild(div);
-        } else {
-            const div = document.createElement('div');
-            div.className = 'flex items-start gap-2.5 mb-3';
-            div.innerHTML = `
-                <div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
-                    <i class="fas fa-robot text-white text-xs"></i>
-                </div>
-                <div class="message-bubble bg-white rounded-2xl rounded-tl-md p-3.5 shadow-sm border border-gray-100 max-w-[80%]">
-                    ${imageHtml}
-                    <div class="text-sm text-gray-700 leading-relaxed">${parsed}</div>
-                    ${renderProductsWidget(data.products)}
-                    ${renderActionResultWidget(data.actionResult)}
-                    <p class="text-[10px] text-gray-400 mt-1.5">${time}</p>
-                </div>`;
-            chatContainer.appendChild(div);
-        }
-        fullPageScrollToBottom();
-        addProductHandlers();
-        // Hide suggestion chips after first interaction
-        if (conversationHistory.length > 0 || role === 'user') {
-            const chips = document.getElementById('suggestionChips');
-            if (chips) chips.style.display = 'none';
-        }
-    }
-    function fullPage_showTypingIndicator() {
-        const chatContainer = document.getElementById('chatContainer');
-        if (!chatContainer) return;
-        const div = document.createElement('div');
-        div.id = 'typingIndicator';
-        div.className = 'flex items-start gap-2.5 mb-3';
-        div.innerHTML = `
-            <div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
-                <i class="fas fa-robot text-white text-xs"></i>
-            </div>
-            <div class="bg-white rounded-2xl rounded-tl-md p-3.5 shadow-sm border border-gray-100">
-                <div class="flex items-center gap-1 py-1">
-                    <span class="typing-dot"></span>
-                    <span class="typing-dot"></span>
-                    <span class="typing-dot"></span>
-                </div>
-            </div>`;
-        chatContainer.appendChild(div);
-        fullPageScrollToBottom();
-    }
-    function fullPage_removeTypingIndicator() {
-        document.getElementById('typingIndicator')?.remove();
-    }
-    function fullPage_updateTypingText(text) {
-        const indicator = document.getElementById('typingIndicator');
-        if (indicator) {
-            const bubble = indicator.querySelector('.bg-white');
-            if (bubble) {
-                bubble.innerHTML = `<p class="text-sm text-cyan-500">${text}</p>`;
-            }
-        }
-    }
-    function fullPageScrollToBottom() {
-        const chatContainer = document.getElementById('chatContainer');
-        if (chatContainer) {
-            requestAnimationFrame(() => {
-                chatContainer.scrollTop = chatContainer.scrollHeight;
-            });
-        }
-    }
-    // ============================================
-    // WIDGET MODE (index.html) — original code
-    // ============================================
-    function createWidget() {
-        container = document.createElement('div');
-        container.id = 'ai-buyer-assistant';
-        container.innerHTML = getWidgetHTML();
-        document.body.appendChild(container);
-        document.getElementById('ai-toggle-btn').addEventListener('click', toggleWidget);
-        document.getElementById('ai-close-btn')?.addEventListener('click', toggleWidget);
-        document.getElementById('ai-send-btn').addEventListener('click', sendMessage);
-        document.getElementById('ai-input').addEventListener('keypress', handleKeyPress);
-        document.getElementById('ai-file-input').addEventListener('change', handleFileSelect);
-        document.getElementById('ai-clear-btn')?.addEventListener('click', clearConversation);
-        container.querySelectorAll('.ai-category-btn').forEach(btn => {
-            btn.addEventListener('click', () => {
-                document.getElementById('ai-input').value = btn.dataset.query;
-                sendMessage();
-            });
-        });
-        document.getElementById('ai-remove-image')?.addEventListener('click', removeSelectedImage);
-    }
-    function getWidgetHTML() {
-        return `
-            <style>${getWidgetStyles()}</style>
-            <button id="ai-toggle-btn" class="ai-toggle-btn" title="Open AI Shopping Assistant">
-                <i class="fas fa-wand-magic-sparkles"></i>
-                <span class="ai-pulse"></span>
-            </button>
-            <div id="ai-widget" class="ai-widget ai-hidden">
-                <div class="ai-header">
-                    <div class="ai-header-left">
-                        <div class="ai-logo"><i class="fas fa-wand-magic-sparkles"></i></div>
-                        <div class="ai-header-info">
-                            <h3>Cellex AI</h3>
-                            <span class="ai-status">
-                                <span class="ai-status-dot"></span>
-                                <span id="ai-status-text">FREE & Open Source</span>
-                            </span>
-                        </div>
-                    </div>
-                    <div class="ai-header-actions">
-                        <button id="ai-clear-btn" class="ai-header-btn" title="Clear"><i class="fas fa-refresh"></i></button>
-                        <button id="ai-close-btn" class="ai-header-btn" title="Close"><i class="fas fa-times"></i></button>
-                    </div>
-                </div>
-                <div id="ai-messages" class="ai-messages"></div>
-                <div id="ai-image-preview" class="ai-image-preview ai-hidden">
-                    <div class="ai-preview-container">
-                        <img id="ai-preview-img" src="" alt="Preview">
-                        <button id="ai-remove-image" class="ai-remove-image"><i class="fas fa-times"></i></button>
-                    </div>
-                </div>
-                <div id="ai-quick-actions" class="ai-quick-actions">
-                    <p class="ai-quick-title">Try these:</p>
-                    <div class="ai-categories">
-                        ${CATEGORIES.map(cat => `
-                            <button class="ai-category-btn" data-query="${cat.query}">
-                                <i class="fas ${cat.icon}"></i> ${cat.name}
-                            </button>
-                        `).join('')}
-                    </div>
-                </div>
-                <div class="ai-input-area">
-                    <div class="ai-input-container">
-                        <input type="file" id="ai-file-input" accept="image/*" hidden>
-                        <button id="ai-upload-btn" class="ai-upload-btn" onclick="document.getElementById('ai-file-input').click()">
-                            <i class="fas fa-camera"></i>
-                        </button>
-                        <input type="text" id="ai-input" placeholder="Tell me what you need..." autocomplete="off">
-                        <button id="ai-send-btn" class="ai-send-btn"><i class="fas fa-paper-plane"></i></button>
-                    </div>
-                </div>
-            </div>
-        `;
-    }
-    function getWidgetStyles() {
-        return `
-            .ai-toggle-btn{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#00d4ff,#00d4ff);border:none;cursor:pointer;box-shadow:0 4px 20px rgba(245,158,11,0.4);z-index:9998;display:flex;align-items:center;justify-content:center;transition:all .3s;color:#0f172a;font-size:22px}
-            .ai-toggle-btn:hover{transform:scale(1.1);box-shadow:0 6px 30px rgba(245,158,11,0.5)}
-            .ai-pulse{position:absolute;top:-2px;right:-2px;width:14px;height:14px;background:#22c55e;border-radius:50%;border:2px solid white;animation:pulse 2s infinite}
-            @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}
-            .ai-widget{position:fixed;bottom:96px;right:24px;width:380px;max-width:calc(100vw - 48px);height:560px;max-height:calc(100vh - 140px);background:white;border-radius:16px;box-shadow:0 10px 50px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;overflow:hidden;transition:all .3s;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
-            .ai-hidden{transform:translateY(20px);opacity:0;pointer-events:none}
-            .ai-header{background:linear-gradient(135deg,#0f172a,#1e293b);color:white;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
-            .ai-header-left{display:flex;align-items:center;gap:10px}
-            .ai-logo{width:36px;height:36px;background:linear-gradient(135deg,#00d4ff,#00d4ff);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#0f172a}
-            .ai-header-info h3{margin:0;font-size:16px;font-weight:700}
-            .ai-status{display:flex;align-items:center;gap:5px;font-size:11px;opacity:.8}
-            .ai-status-dot{width:6px;height:6px;background:#22c55e;border-radius:50%}
-            .ai-header-actions{display:flex;gap:6px}
-            .ai-header-btn{width:28px;height:28px;border-radius:6px;border:none;background:rgba(255,255,255,.1);color:white;cursor:pointer;font-size:12px}
-            .ai-header-btn:hover{background:rgba(255,255,255,.2)}
-            .ai-messages{flex:1;overflow-y:auto;padding:16px;background:#f8fafc}
-            .ai-message{display:flex;gap:10px;margin-bottom:14px;animation:fadeIn .3s}
-            @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
-            .ai-message-user{flex-direction:row-reverse}
-            .ai-avatar{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
-            .ai-avatar-assistant{background:linear-gradient(135deg,#00d4ff,#00d4ff);color:#0f172a}
-            .ai-avatar-user{background:#0f172a;color:#00d4ff}
-            .ai-bubble{max-width:260px;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5}
-            .ai-bubble-assistant{background:white;color:#1e293b;border-bottom-left-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
-            .ai-bubble-user{background:linear-gradient(135deg,#00d4ff,#00d4ff);color:#0f172a;border-bottom-right-radius:4px}
-            .ai-bubble strong{font-weight:600}
-            .ai-message-image{margin-bottom:8px}
-            .ai-message-image img{max-width:200px;max-height:150px;border-radius:8px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.1)}
-            /* Product card / action-result / button styles live in #ai-shared-styles (injected once at top of file) so they're shared with full-page mode */
-            .ai-quick-actions{padding:10px 16px;border-top:1px solid #e2e8f0;background:white}
-            .ai-quick-title{font-size:11px;color:#64748b;margin:0 0 6px 0}
-            .ai-categories{display:flex;gap:6px;flex-wrap:wrap}
-            .ai-category-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:16px;border:1px solid #e2e8f0;background:white;font-size:11px;cursor:pointer;color:#475569}
-            .ai-category-btn:hover{border-color:#00d4ff;background:#fffbeb;color:#b45309}
-            .ai-image-preview{padding:10px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}
-            .ai-preview-container{position:relative;display:inline-block}
-            .ai-preview-container img{max-width:80px;max-height:80px;border-radius:6px;object-fit:cover}
-            .ai-remove-image{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:none;background:#ef4444;color:white;cursor:pointer;font-size:10px}
-            .ai-input-area{padding:10px 16px;background:white;border-top:1px solid #e2e8f0}
-            .ai-input-container{display:flex;gap:6px;align-items:center;background:#f1f5f9;border-radius:20px;padding:4px}
-            .ai-upload-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:#64748b;cursor:pointer}
-            .ai-upload-btn:hover{background:#e2e8f0;color:#00d4ff}
-            #ai-input{flex:1;border:none;background:transparent;padding:6px;font-size:13px;outline:none}
-            .ai-send-btn{width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#00d4ff,#00d4ff);color:#0f172a;cursor:pointer}
-            .ai-send-btn:hover{transform:scale(1.05)}
-            .ai-loading{display:flex;gap:4px;padding:12px}
-            .ai-loading span{width:6px;height:6px;background:#00d4ff;border-radius:50%;animation:bounce 1.4s infinite}
-            .ai-loading span:nth-child(1){animation-delay:-.32s}
-            .ai-loading span:nth-child(2){animation-delay:-.16s}
-            @keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
-            @media(max-width:480px){.ai-widget{bottom:0;right:0;width:100%;height:100%;max-height:100%;border-radius:0}.ai-toggle-btn{bottom:80px}}
-        `;
-    }
-    function toggleWidget() {
-        isOpen = !isOpen;
-        const widget = document.getElementById('ai-widget');
-        const toggleBtn = document.getElementById('ai-toggle-btn');
-        if (isOpen) {
-            widget.classList.remove('ai-hidden');
-            toggleBtn.style.display = 'none';
-            document.getElementById('ai-input').focus();
-            if (conversationHistory.length === 0) showWelcomeMessage();
-        } else {
-            widget.classList.add('ai-hidden');
-            toggleBtn.style.display = 'flex';
-        }
-    }
-    function showWelcomeMessage() {
-        if (isFullPage) return; // Welcome already in HTML
-        addMessage('assistant', `<strong>Hi! I'm Cellex, your AI shopping assistant!</strong><br><br>
-I can help you with:<br>
-- Finding products within your budget<br>
-- Planning your shopping list<br>
-- Answering any questions<br><br>
-Just talk to me naturally!<br>
-<strong>100% FREE & Open Source!</strong>`);
-    }
-    function addMessage(role, content, data = {}) {
-        if (isFullPage) {
-            fullPage_addMessage(role, content, data);
-            return;
-        }
-        const messagesContainer = document.getElementById('ai-messages');
-        const isUser = role === 'user';
-        const parsed = content.replace(/\*\*(.*?)\*\*/g, '<strong>₦1</strong>').replace(/\n/g, '<br>');
-        let imageHtml = '';
-        if (data.image) {
-            imageHtml = `<div class="ai-message-image"><img src="${data.image}" alt="Shared image"></div>`;
-        }
-        let html = `
-            <div class="ai-message ${isUser ? 'ai-message-user' : ''}">
-                <div class="ai-avatar ${isUser ? 'ai-avatar-user' : 'ai-avatar-assistant'}">
-                    <i class="fas ${isUser ? 'fa-user' : 'fa-wand-magic-sparkles'}"></i>
-                </div>
-                <div class="ai-message-content">
-                    ${imageHtml}
-                    <div class="ai-bubble ${isUser ? 'ai-bubble-user' : 'ai-bubble-assistant'}">${parsed}</div>
-                    ${renderProductsWidget(data.products)}
-                    ${renderActionResultWidget(data.actionResult)}
-                </div>
-            </div>`;
-        messagesContainer.insertAdjacentHTML('beforeend', html);
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-        addProductHandlers();
-        if (conversationHistory.length > 0 || role === 'user') {
-            document.getElementById('ai-quick-actions').style.display = 'none';
-        }
-    }
-    function renderProductsWidget(products) {
-        if (!products || products.length === 0) return '';
-        return products.slice(0, 5).map((p, i) => `
-            <div class="ai-product-card" data-product-id="${p.id}" data-index="${i + 1}">
-                <img src="${p.image_url || 'https://via.placeholder.com/64'}" class="ai-product-img" alt="${p.name || 'Product'}">
-                <div class="ai-product-info">
-                    <div class="ai-product-name">${i + 1}. ${p.name}</div>
-                    <div class="ai-product-price">₦${(p.price || 0).toLocaleString()}</div>
-                    <div class="ai-product-meta">${p.category || ''}</div>
-                    <div class="ai-product-actions">
-                        <button class="ai-action-btn ai-action-btn-primary" data-action="add" data-product-id="${p.id}"><i class="fas fa-cart-plus"></i> Add</button>
-                        <button class="ai-action-btn ai-action-btn-secondary" data-action="view" data-product-id="${p.id}"><i class="fas fa-eye"></i> View</button>
-                    </div>
-                </div>
-            </div>
-        `).join('');
-    }
-    function renderActionResultWidget(result) {
-        if (!result) return '';
-        const cls = result.success ? '' : (result.requiresAuth ? 'warning' : 'error');
-        const icon = result.success ? 'fa-check-circle' : (result.requiresAuth ? 'fa-exclamation-triangle' : 'fa-times-circle');
-        return `<div class="ai-action-result ${cls}"><i class="fas ${icon}"></i> ${result.message}</div>`;
-    }
-    function addProductHandlers() {
-        const parentEl = isFullPage ? document.getElementById('chatContainer') : document.getElementById('ai-messages');
-        if (!parentEl) return;
-        parentEl.querySelectorAll('.ai-product-card:not([data-handled])').forEach(card => {
-            card.setAttribute('data-handled', 'true');
-            card.addEventListener('click', e => {
-                if (!e.target.closest('.ai-action-btn')) {
-                    window.location.href = `product.html?id=${card.dataset.productId}`;
-                }
-            });
-        });
-        parentEl.querySelectorAll('.ai-action-btn:not([data-handled])').forEach(btn => {
-            btn.setAttribute('data-handled', 'true');
-            btn.addEventListener('click', async e => {
-                e.stopPropagation();
-                const action = btn.dataset.action;
-                const productId = parseInt(btn.dataset.productId);
-                if (action === 'add') {
-                    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
-                    const result = await window.Cart?.addToCart(productId, 1);
-                    if (result?.success) {
-                        btn.innerHTML = '<i class="fas fa-check"></i> Added';
-                        btn.classList.remove('ai-action-btn-primary');
-                        btn.classList.add('ai-action-btn-secondary');
-                    } else {
-                        btn.innerHTML = '<i class="fas fa-cart-plus"></i> Add';
-                        if (result?.requiresAuth) {
-                            addMessage('assistant', 'Please <a href="login.html" style="color:#00d4ff;font-weight:600;">login</a> to add items.');
-                        }
-                    }
-                } else if (action === 'view') {
-                    window.location.href = `product.html?id=${productId}`;
-                }
-            });
-        });
-    }
-    function addLoading() {
-        if (isFullPage) {
-            fullPage_showTypingIndicator();
-            return;
-        }
-        const c = document.getElementById('ai-messages');
-        c.insertAdjacentHTML('beforeend', `<div class="ai-message" id="ai-loading-msg">
-            <div class="ai-avatar ai-avatar-assistant"><i class="fas fa-wand-magic-sparkles"></i></div>
-            <div class="ai-bubble ai-bubble-assistant"><div class="ai-loading"><span></span><span></span><span></span></div></div>
-        </div>`);
-        c.scrollTop = c.scrollHeight;
-    }
-    function removeLoading() {
-        if (isFullPage) {
-            fullPage_removeTypingIndicator();
-            return;
-        }
-        document.getElementById('ai-loading-msg')?.remove();
-    }
-    function handleFileSelect(e) {
-        const file = e.target.files[0];
-        console.log('[Cellex AI] File selected:', file?.name, file?.type, file?.size);
-        if (!file?.type.startsWith('image/')) return;
-        // Compress image to max 512px before sending (phone photos are too large for HF Space)
-        const img = new Image();
-        img.onload = function() {
-            const MAX = 512;
-            let w = img.width, h = img.height;
-            if (w > MAX || h > MAX) {
-                if (w > h) { h = Math.round(h * MAX / w); w = MAX; }
-                else { w = Math.round(w * MAX / h); h = MAX; }
-            }
-            const canvas = document.createElement('canvas');
-            canvas.width = w; canvas.height = h;
-            canvas.getContext('2d').drawImage(img, 0, 0, w, h);
-            selectedImage = canvas.toDataURL('image/jpeg', 0.7);
-            console.log('[Cellex AI] Image compressed. Original:', file.size, 'bytes. Base64 length:', selectedImage.length);
-            if (isFullPage) {
-                const preview = document.getElementById('ai-image-preview');
-                if (preview) {
-                    document.getElementById('ai-preview-img').src = selectedImage;
-                    preview.classList.remove('hidden');
-                }
-            } else {
-                document.getElementById('ai-preview-img').src = selectedImage;
-                document.getElementById('ai-image-preview').classList.remove('ai-hidden');
-            }
-        };
-        img.onerror = function() {
-            // Fallback: use original file
-            const reader = new FileReader();
-            reader.onload = ev => {
-                selectedImage = ev.target.result;
-                if (isFullPage) {
-                    const preview = document.getElementById('ai-image-preview');
-                    if (preview) {
-                        document.getElementById('ai-preview-img').src = selectedImage;
-                        preview.classList.remove('hidden');
-                    }
-                } else {
-                    document.getElementById('ai-preview-img').src = selectedImage;
-                    document.getElementById('ai-image-preview').classList.remove('ai-hidden');
-                }
-            };
-            reader.readAsDataURL(file);
-        };
-        img.src = URL.createObjectURL(file);
-        e.target.value = '';
-    }
-    function removeSelectedImage() {
-        selectedImage = null;
-        if (isFullPage) {
-            const preview = document.getElementById('ai-image-preview');
-            if (preview) preview.classList.add('hidden');
-        } else {
-            document.getElementById('ai-image-preview').classList.add('ai-hidden');
-        }
-    }
-    function handleKeyPress(e) {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            sendMessage();
-        }
-    }
-    // ============================================
-    // SHARED LOGIC — used by BOTH modes
-    // ============================================
-    async function updateContext() {
-        try {
-            console.log('[Cellex AI] Checking login status...');
-            console.log('[Cellex AI] window.Cart exists:', !!window.Cart);
-            console.log('[Cellex AI] window.EdgeFunctions exists:', !!window.EdgeFunctions);
-            if (!window.Cart) {
-                console.error('[Cellex AI] Cart module not loaded!');
-                await new Promise(resolve => setTimeout(resolve, 500));
-                if (!window.Cart) {
-                    console.error('[Cellex AI] Cart module still not loaded after waiting');
-                    context.user = null;
-                    context.cartItems = [];
-                    return;
-                }
-            }
-            context.user = await window.Cart.getCurrentUser();
-            console.log('[Cellex AI] User object:', context.user ? `ID: ${context.user.id}` : 'null');
-            if (context.user) {
-                console.log('[Cellex AI] Fetching cart items for user...');
-                const items = await window.Cart.getCartItems();
-                context.cartItems = items || [];
-                console.log('[Cellex AI] Cart items fetched:', context.cartItems.length);
-            } else {
-                context.cartItems = [];
-                console.log('[Cellex AI] No user logged in - cart empty');
-            }
-        } catch (e) {
-            console.error('[Cellex AI] Error updating context:', e);
-            console.error('[Cellex AI] Error stack:', e.stack);
-        }
-    }
-    async function sendMessage() {
-        const input = isFullPage ? document.getElementById('chatInput') : document.getElementById('ai-input');
-        const text = input.value.trim();
-        if ((!text && !selectedImage) || isLoading) return;
-        // DEBUG COMMAND
-        if (text && (text.toLowerCase() === 'debug' || text.toLowerCase() === '/debug')) {
-            addMessage('user', text);
-            input.value = '';
-            let debugInfo = '**DEBUG INFO:**\n\n';
-            debugInfo += `window.Cart: ${window.Cart ? 'Loaded' : 'NOT LOADED'}\n`;
-            debugInfo += `window.EdgeFunctions: ${window.EdgeFunctions ? 'Loaded' : 'NOT LOADED'}\n`;
-            if (window.Cart) {
-                try {
-                    const user = await window.Cart.getCurrentUser();
-                    debugInfo += `\n**Login Status:**\n`;
-                    debugInfo += `Logged in: ${user ? 'YES' : 'NO'}\n`;
-                    if (user) debugInfo += `User ID: ${user.id}\n`;
-                    const items = await window.Cart.getCartItems();
-                    debugInfo += `\n**Cart Data:**\n`;
-                    debugInfo += `Items count: ${items ? items.length : 0}\n`;
-                    if (items && items.length > 0) {
-                        debugInfo += `Items:\n`;
-                        items.forEach((item, i) => {
-                            debugInfo += `  ${i+1}. ${item.products?.name || 'Unknown'} x${item.quantity}\n`;
-                        });
-                    }
-                } catch (e) {
-                    debugInfo += `\nError: ${e.message}\n`;
-                }
-            }
-            addMessage('assistant', debugInfo);
-            return;
-        }
-        const imageToSend = selectedImage;
-        const displayText = text || 'Shared an image';
-        console.log('[Cellex AI] sendMessage called. Has image:', !!imageToSend, 'Text:', displayText);
-        addMessage('user', displayText, { image: imageToSend });
-        input.value = '';
-        removeSelectedImage();
-        isLoading = true;
-        addLoading();
-        try {
-            await updateContext();
-            const contextForAI = {
-                lastShownProducts: context.lastShownProducts.map(p => ({
-                    id: p.id, name: p.name, price: p.price, category: p.category
-                })),
-                cartItems: context.cartItems.map(i => ({
-                    product_name: i.products?.name || i.product_name || 'Unknown',
-                    quantity: i.quantity || 1,
-                    price: i.products?.price || i.price || 0
-                })),
-                cartTotal: context.cartItems.reduce((s, i) => s + ((i.products?.price || i.price || 0) * (i.quantity || 1)), 0),
-                isLoggedIn: !!context.user,
-                conversationHistory: conversationHistory.slice(-10)
-            };
-            if (imageToSend) {
-                contextForAI.image = imageToSend;
-                console.log('[Cellex AI] Image included in request. Base64 length:', imageToSend.length);
-            }
-            // Update typing status after 10s
-            let statusTimer;
-            if (isFullPage) {
-                statusTimer = setTimeout(() => {
-                    fullPage_updateTypingText('Thinking hard, please wait...');
-                }, 10000);
-            }
-            // Build message text — tell AI this is a product they should search for
-            const messageForAI = imageToSend
-                ? `[User sent a product image] ${text || 'Find me this product or similar ones'}`
-                : text;
-            // Call AI via Supabase Edge Function (server-side).
-            // The edge function handles: AI model call, Supabase product search,
-            // cart context fetching, login enforcement. Frontend just gets the result.
-            const data = await window.EdgeFunctions.aiChat(messageForAI, contextForAI);
-            if (statusTimer) clearTimeout(statusTimer);
-            if (CONFIG.debug) console.log('[Cellex AI] Response:', data);
-            removeLoading();
-            if (data.success) {
-                conversationHistory.push({ role: 'user', content: text });
-                conversationHistory.push({ role: 'assistant', content: data.response });
-                if (conversationHistory.length > 20) {
-                    conversationHistory = conversationHistory.slice(-20);
-                }
-                if (data.products?.length > 0) {
-                    context.lastShownProducts = data.products;
-                }
-                let actionResult = null;
-                let actionProducts = null;
-                if (data.action) {
-                    actionResult = await executeAction(data.action, data);
-                    // If the action returned products (e.g. view_cart), include them for rendering
-                    if (actionResult?.products?.length > 0) {
-                        actionProducts = actionResult.products;
-                    }
-                }
-                // Merge products from API response and action results
-                const allProducts = data.products?.length > 0 ? data.products : actionProducts;
-                // Show image debug info so user can see on phone (no laptop needed)
-                let debugTag = '';
-                if (imageToSend) {
-                    const imgDesc = data.image_description || 'not processed';
-                    debugTag = `\n\n🖼️ Image sent (${Math.round(imageToSend.length / 1024)}KB) → AI saw: "${imgDesc}"`;
-                }
-                addMessage('assistant', data.response + debugTag, { products: allProducts, actionResult });
-            } else {
-                addMessage('assistant', data.response || 'Sorry, an error occurred.');
-            }
-        } catch (error) {
-            console.error('[Cellex AI] Error:', error);
-            removeLoading();
-            let errorMsg = "Connection error. Please try again.";
-            if (error.name === 'AbortError') {
-                errorMsg = "The AI assistant took too long to respond. The server might be busy — please try again.";
-            }
-            addMessage('assistant', errorMsg);
-        }
-        isLoading = false;
-    }
-    async function executeAction(action, data) {
-        const Cart = window.Cart;
-        if (!Cart) return { success: false, message: 'Cart unavailable' };
-        const user = await Cart.getCurrentUser();
-        if (!user) return { success: false, requiresAuth: true, message: 'Please login first.' };
-        const type = action.type;
-        if (type === 'add_to_cart') {
-            let toAdd = [];
-            const qty = action.quantity || 1;
-            if (action.product_id) {
-                const p = context.lastShownProducts.find(p => p.id === action.product_id);
-                if (p) toAdd = [p];
-            } else if (action.all) {
-                toAdd = context.lastShownProducts;
-            } else if (action.product_index !== undefined) {
-                const p = context.lastShownProducts[action.product_index - 1];
-                if (p) toAdd = [p];
-            } else if (action.productIndex !== undefined) {
-                const p = context.lastShownProducts[action.productIndex - 1];
-                if (p) toAdd = [p];
-            } else if (action.productIds) {
-                toAdd = context.lastShownProducts.filter(p => action.productIds.includes(p.id));
-            } else if (context.lastShownProducts.length > 0) {
-                toAdd = context.lastShownProducts.slice(0, 1);
-            }
-            if (toAdd.length === 0) {
-                return { success: false, message: 'Which product would you like to add?' };
-            }
-            let added = 0, total = 0;
-            for (const p of toAdd) {
-                const r = await Cart.addToCart(p.id, qty);
-                if (r.success) { added++; total += (p.price || 0) * qty; }
-            }
-            return {
-                success: true,
-                message: `Added ${added} item(s) to cart${qty > 1 ? ` (${qty}x each)` : ''} - Total: ₦${total.toLocaleString()}`
-            };
-        }
-        if (type === 'remove_from_cart') {
-            // HF Space sends product_index (number from cart list), also supports product_id
-            if (action.product_index !== undefined || action.cart_item_number !== undefined) {
-                const items = await Cart.getCartItems();
-                const idx = action.product_index ?? action.cart_item_number;
-                if (items && items.length >= idx && idx >= 1) {
-                    const item = items[idx - 1];
-                    const productId = item.product_id || item.products?.id;
-                    if (productId) {
-                        const result = await Cart.removeFromCart(productId);
-                        if (result.success) {
-                            return { success: true, message: 'Item removed from cart!' };
-                        }
-                    }
-                }
-                return { success: false, message: 'Could not find that item in cart.' };
-            }
-            if (action.product_id) {
-                const result = await Cart.removeFromCart(action.product_id);
-                if (result.success) {
-                    return { success: true, message: 'Item removed from cart!' };
-                }
-                return { success: false, message: 'Could not remove item.' };
-            }
-            return { success: false, message: 'Which item would you like to remove?' };
-        }
-        if (type === 'view_cart') {
-            const items = await Cart.getCartItems();
-            if (!items || !items.length) {
-                const user = await Cart.getCurrentUser();
-                if (!user) {
-                    return { success: false, requiresAuth: true, message: 'Please login to view your cart.' };
-                }
-                return { success: true, message: 'Your cart is empty. Would you like to browse some products?' };
-            }
-            let cartDetails = 'Your Cart:\n';
-            let total = 0;
-            // Build products array with images for rendering
-            const cartProducts = items.map((item, i) => {
-                const name = item.products?.name || 'Unknown';
-                const price = item.products?.price || 0;
-                const qty = item.quantity || 1;
-                const subtotal = price * qty;
-                total += subtotal;
-                cartDetails += `${i+1}. ${name} x${qty} - ₦${subtotal.toLocaleString()}\n`;
-                return {
-                    id: item.product_id || item.products?.id,
-                    name: name,
-                    price: price,
-                    image_url: item.products?.image_url || null,
-                    category: item.products?.category || ''
-                };
-            });
-            cartDetails += `\nTotal: ₦${total.toLocaleString()}`;
-            // Store cart products so they render with images
-            context.lastShownProducts = cartProducts;
-            return { success: true, message: cartDetails, products: cartProducts };
-        }
-        if (type === 'checkout') {
-            window.location.href = 'checkout.html';
-            return { success: true, message: 'Redirecting to checkout...' };
-        }
-        if (type === 'clear_cart') {
-            const result = await Cart.clearCart();
-            if (result.success) {
-                context.lastShownProducts = [];
-                return { success: true, message: 'Your cart has been cleared! It is now empty.' };
-            }
-            return { success: false, message: 'Could not clear cart. Please try again.' };
-        }
-        if (type === 'update_cart') {
-            const cartItems = await Cart.getCartItems();
-            const cartItemNumber = action.cart_item_number || 1;
-            const newQuantity = action.new_quantity;
-            if (cartItems && cartItems.length >= cartItemNumber && cartItemNumber >= 1 && newQuantity !== undefined) {
-                const item = cartItems[cartItemNumber - 1];
-                const result = await Cart.updateQuantity(item.id, newQuantity);
-                if (result.success) {
-                    return { success: true, message: newQuantity <= 0 ? 'Item removed from cart!' : `Quantity updated to ${newQuantity}!` };
-                }
-                return { success: false, message: 'Could not update quantity.' };
-            }
-            return { success: false, message: cartItems && cartItems.length > 0 ? `Choose a number between 1 and ${cartItems.length}` : 'Your cart is empty.' };
-        }
-        return null;
-    }
-    async function clearConversation() {
-        conversationHistory = [];
-        context.lastShownProducts = [];
-        if (isFullPage) {
-            const chatContainer = document.getElementById('chatContainer');
-            chatContainer.innerHTML = '';
-            // Re-add welcome message
-            const welcomeDiv = document.createElement('div');
-            welcomeDiv.className = 'flex items-start gap-2.5 mb-4 mt-4 animate-fade-in';
-            welcomeDiv.innerHTML = `
-                <div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
-                    <i class="fas fa-robot text-white text-xs"></i>
-                </div>
-                <div class="message-bubble bg-white rounded-2xl rounded-tl-md p-3.5 shadow-sm border border-gray-100">
-                    <p class="text-sm text-gray-700 leading-relaxed">Hi! I'm your <strong class="text-cyan-500">Cellex AI Assistant</strong>. I can help you find products, compare prices, track deals, and more! What are you looking for today?</p>
-                    <p class="text-[10px] text-gray-400 mt-1.5">Just now</p>
-                </div>`;
-            chatContainer.appendChild(welcomeDiv);
-            // Re-add suggestion chips
-            const chipsDiv = document.createElement('div');
-            chipsDiv.id = 'suggestionChips';
-            chipsDiv.className = 'flex flex-wrap gap-2 mb-4 ml-10';
-            chipsDiv.innerHTML = `
-                <button onclick="sendSuggestion('Show me phones under ₦50,000')" class="chip inline-flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 hover:text-cyan-600 shadow-sm">
-                    <i class="fas fa-mobile-alt text-orange-400"></i> Phones under ₦50k
-                </button>
-                <button onclick="sendSuggestion('Best deals today')" class="chip inline-flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 hover:text-cyan-600 shadow-sm">
-                    <i class="fas fa-bolt text-orange-400"></i> Best deals today
-                </button>
-                <button onclick="sendSuggestion('Farm fresh produce')" class="chip inline-flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 hover:text-cyan-600 shadow-sm">
-                    <i class="fas fa-leaf text-orange-400"></i> Farm fresh produce
-                </button>
-                <button onclick="sendSuggestion('Electronics')" class="chip inline-flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 hover:text-cyan-600 shadow-sm">
-                    <i class="fas fa-laptop text-orange-400"></i> Electronics
-                </button>`;
-            chatContainer.appendChild(chipsDiv);
-        } else {
-            document.getElementById('ai-messages').innerHTML = '';
-            document.getElementById('ai-quick-actions').style.display = 'block';
-            showWelcomeMessage();
-        }
-    }
-    // Expose globally
-    window.CellexAI = {
-        open: toggleWidget,
-        close: () => { if (isOpen) toggleWidget(); },
-        clearHistory: clearConversation
-    };
-    window.sendMessage = sendMessage;
-})();

js/cart.js DELETED Viewed

@@ -1,203 +0,0 @@
-/**
- * Cellex Cart Module (Cookie-Based Auth Edition)
- * ----------------------------------------------
- * All cart operations go through the /api/cart proxy → Supabase Edge Function.
- * No Supabase SDK, no localStorage, no tokens in JS.
- * Auth is handled via HTTP-only cookies set by the server.
- *
- * Usage:
- *   <script src="js/config/edge-functions.js"></script>
- *   <script src="js/cart.js"></script>
- *   window.Cart.addToCart(productId);
- */
-(function() {
-    'use strict';
-    /**
-     * Get current user (async — calls checkSession if needed).
-     * Replaces supabase.auth.getSession().
-     */
-    async function getCurrentUser() {
-        return await window.EdgeFunctions.auth.getCurrentUserAsync();
-    }
-    /**
-     * Get total cart items count
-     */
-    async function getCartCount() {
-        const user = await getCurrentUser();
-        if (!user) return 0;
-        const result = await window.EdgeFunctions.cart.count();
-        if (!result.success) {
-            console.error('[Cart] Error fetching cart count:', result.error);
-            return 0;
-        }
-        return result.count || 0;
-    }
-    /**
-     * Update all cart count elements on the page
-     */
-    async function updateCartCountUI() {
-        const count = await getCartCount();
-        const cartCountEl = document.getElementById('cartCount');
-        const mobileCartCountEl = document.getElementById('mobileCartCount');
-        if (cartCountEl) {
-            cartCountEl.textContent = count;
-            cartCountEl.style.display = count > 0 ? 'flex' : 'none';
-        }
-        if (mobileCartCountEl) {
-            mobileCartCountEl.textContent = count;
-            mobileCartCountEl.style.display = count > 0 ? 'flex' : 'none';
-        }
-        return count;
-    }
-    /**
-     * Get all cart items with product details
-     */
-    async function getCartItems() {
-        const user = await getCurrentUser();
-        if (!user) {
-            return [];
-        }
-        const result = await window.EdgeFunctions.cart.get();
-        if (!result.success) {
-            console.error('[Cart] Error fetching cart items:', result.error);
-            return [];
-        }
-        return result.items || [];
-    }
-    /**
-     * Add item to cart
-     */
-    async function addToCart(productId, quantity = 1) {
-        const user = await getCurrentUser();
-        if (!user) {
-            return {
-                success: false,
-                requiresAuth: true,
-                message: 'Please login to add items to cart'
-            };
-        }
-        const result = await window.EdgeFunctions.cart.add(productId, quantity);
-        if (result.success) {
-            await updateCartCountUI();
-            return { success: true, message: 'Added to cart!' };
-        }
-        return { success: false, message: result.error || 'Failed to add to cart' };
-    }
-    /**
-     * Remove item from cart
-     */
-    async function removeFromCart(cartItemId) {
-        const user = await getCurrentUser();
-        if (!user) {
-            return { success: false, message: 'Please login' };
-        }
-        const result = await window.EdgeFunctions.cart.remove(cartItemId);
-        if (result.success) {
-            await updateCartCountUI();
-            return { success: true, message: 'Item removed' };
-        }
-        return { success: false, message: result.error || 'Failed to remove item' };
-    }
-    /**
-     * Update item quantity
-     */
-    async function updateQuantity(cartItemId, newQuantity) {
-        const user = await getCurrentUser();
-        if (!user) {
-            return { success: false, message: 'Please login' };
-        }
-        if (newQuantity < 1) {
-            return await removeFromCart(cartItemId);
-        }
-        const result = await window.EdgeFunctions.cart.update(cartItemId, newQuantity);
-        if (result.success) {
-            await updateCartCountUI();
-            return { success: true, message: 'Quantity updated' };
-        }
-        return { success: false, message: result.error || 'Failed to update quantity' };
-    }
-    /**
-     * Clear entire cart
-     */
-    async function clearCart() {
-        const user = await getCurrentUser();
-        if (!user) {
-            return { success: false, message: 'Please login' };
-        }
-        const result = await window.EdgeFunctions.cart.clear();
-        if (result.success) {
-            await updateCartCountUI();
-            return { success: true, message: 'Cart cleared' };
-        }
-        return { success: false, message: result.error || 'Failed to clear cart' };
-    }
-    /**
-     * Get cart subtotal
-     */
-    async function getCartSubtotal() {
-        const cartItems = await getCartItems();
-        return cartItems.reduce((sum, item) => {
-            const price = item.products?.price || 0;
-            return sum + (price * (item.quantity || 0));
-        }, 0);
-    }
-    /**
-     * Initialize cart on page load
-     */
-    async function initCart() {
-        await updateCartCountUI();
-    }
-    // Expose Cart module globally
-    window.Cart = {
-        getCartCount,
-        updateCartCountUI,
-        getCartItems,
-        addToCart,
-        removeFromCart,
-        updateQuantity,
-        clearCart,
-        getCartSubtotal,
-        initCart,
-        getCurrentUser
-    };
-    // Auto-initialize on DOMContentLoaded
-    document.addEventListener('DOMContentLoaded', async () => {
-        setTimeout(async () => {
-            await initCart();
-        }, 100);
-    });
-})();

js/config/edge-functions.js DELETED Viewed

@@ -1,354 +0,0 @@
-/**
- * Cellex Edge Function Client (HTTP-Only Cookie Auth — Production Standard)
- * --------------------------------------------------------------------------
- * NO localStorage. NO sessionStorage. NO cookies in JavaScript. NO tokens.
- *
- * This is the same approach used by AliExpress, Temu, Alibaba, Amazon,
- * Gmail, and Netflix — HTTP-only cookies that JavaScript CANNOT read.
- *
- * How it works:
- *   - Login: POST /api/auth → server creates session in Supabase → sets
- *     HTTP-only cookie with session_id → returns { user } (no session_id in JS)
- *   - All requests: browser AUTOMATICALLY sends the HTTP-only cookie →
- *     server reads it → forwards as Authorization: Bearer <session_id>
- *   - checkSession(): POST /api/auth { op: 'session' } → server reads cookie
- *     → edge function verifies → returns { user }
- *   - Logout: POST /api/auth { op: 'logout' } → server clears cookie
- *
- * Security:
- *   - HTTP-only cookie: JavaScript CANNOT read it (document.cookie returns nothing)
- *   - Secure: only sent over HTTPS
- *   - SameSite=Lax: CSRF protection
- *   - 7-day expiry: persists across tabs, browser restarts, and 7 days
- *   - The cookie only contains a random UUID (session_id), NOT a JWT token
- *   - The actual JWT tokens live in Supabase web_sessions table
- *   - NO localStorage. NO sessionStorage. NO tokens in JavaScript.
- *
- * The frontend has ZERO knowledge of the session_id. It just calls API
- * endpoints and the browser handles the cookie automatically.
- */
-(function() {
-    'use strict';
-    // User cached in memory (NOT in localStorage/sessionStorage)
-    // This is just a cache so we don't call checkSession() on every render.
-    // The actual auth state is determined by the HTTP-only cookie.
-    let currentUser = null;
-    let sessionVerified = false;
-    /**
-     * Call an API endpoint. The browser automatically sends the HTTP-only
-     * cookie with every request — we don't need to attach anything.
-     */
-    async function call(path, body = {}) {
-        const headers = {
-            'Content-Type': 'application/json',
-        };
-        try {
-            const resp = await fetch(`/api/${path}`, {
-                method: 'POST',
-                headers,
-                body: JSON.stringify(body),
-                credentials: 'same-origin',  // Send cookies for same-origin
-            });
-            const data = await resp.json();
-            if (!resp.ok) {
-                console.error(`[EdgeFunctions] /api/${path} failed:`, resp.status, data);
-                return { success: false, error: data.error || 'Request failed', status: resp.status };
-            }
-            return data;
-        } catch (error) {
-            console.error(`[EdgeFunctions] /api/${path} network error:`, error);
-            return { success: false, error: error.message || 'Network error' };
-        }
-    }
-    // ---- Auth operations ----
-    async function login(email, password) {
-        const result = await call('auth', { op: 'login', email, password });
-        // Server sets HTTP-only cookie. We just cache the user.
-        if (result.success && result.user) {
-            currentUser = result.user;
-            sessionVerified = true;
-        }
-        return result;
-    }
-    async function signup(email, password) {
-        const result = await call('auth', { op: 'signup', email, password });
-        if (result.success && result.user) {
-            currentUser = result.user;
-            sessionVerified = true;
-        }
-        return result;
-    }
-    async function logout() {
-        const result = await call('auth', { op: 'logout' });
-        // Server clears the HTTP-only cookie.
-        currentUser = null;
-        sessionVerified = false;
-        return result;
-    }
-    /**
-     * Check if user is logged in by asking the server.
-     * The server reads the HTTP-only cookie (which JS can't see) and
-     * verifies the session with the edge function.
-     *
-     * Call this on EVERY page load to restore the user session.
-     * The browser auto-sends the cookie, so this works across tabs and
-     * browser restarts.
-     */
-    async function checkSession() {
-        // If we already verified this session and have a user, return cached
-        if (sessionVerified && currentUser) {
-            return { success: true, user: currentUser };
-        }
-        // Ask the server to check the HTTP-only cookie
-        const result = await call('auth', { op: 'session' });
-        sessionVerified = true;
-        if (result.success && result.user) {
-            currentUser = result.user;
-            return { success: true, user: currentUser };
-        }
-        currentUser = null;
-        return { success: true, user: null };
-    }
-    function getCurrentUser() {
-        return currentUser;
-    }
-    async function getCurrentUserAsync() {
-        if (currentUser) return currentUser;
-        await checkSession();
-        return currentUser;
-    }
-    function isLoggedIn() {
-        return !!currentUser;
-    }
-    // Expose the EdgeFunctions module globally
-    window.EdgeFunctions = {
-        auth: {
-            login,
-            signup,
-            logout,
-            checkSession,
-            getCurrentUser,
-            getCurrentUserAsync,
-            isLoggedIn,
-        },
-        aiChat: (message, context = {}) => call('ai-chat', { message, context }),
-        cart: {
-            get: () => call('cart', { op: 'get' }),
-            count: () => call('cart', { op: 'count' }),
-            add: (productId, quantity = 1) => call('cart', { op: 'add', productId, quantity }),
-            remove: (cartItemId) => call('cart', { op: 'remove', cartItemId }),
-            update: (cartItemId, quantity) => call('cart', { op: 'update', cartItemId, quantity }),
-            clear: () => call('cart', { op: 'clear' }),
-        },
-        products: {
-            home: () => call('products', { op: 'home' }),
-            search: (query, maxPrice = null) => call('products', { op: 'search', query, maxPrice }),
-            category: (category, sort = 'newest', page = 1) => call('products', { op: 'category', category, sort, page }),
-            byId: (id) => call('products', { op: 'by_id', id }),
-            all: (limit = 100) => call('products', { op: 'all', limit }),
-        },
-        orders: {
-            list: () => call('orders', { op: 'list' }),
-            details: (orderId) => call('orders', { op: 'details', orderId }),
-        },
-        profile: {
-            get: () => call('profile', { op: 'get' }),
-            update: (data) => call('profile', { op: 'update', ...data }),
-        },
-        wishlist: {
-            get: () => call('wishlist', { op: 'get' }),
-            add: (productId) => call('wishlist', { op: 'add', productId }),
-            remove: (wishlistItemId) => call('wishlist', { op: 'remove', wishlistItemId }),
-        },
-        checkout: {
-            prepare: () => call('checkout', { op: 'prepare' }),
-            placeOrder: (shippingAddress) => call('checkout', { op: 'place_order', shippingAddress }),
-        },
-        // ---- Seller dashboard (Phase 0 — migrated from "Eesha selling folder") ----
-        sellerDashboard: {
-            stats: () => call('seller-dashboard', { op: 'stats' }),
-            recent: () => call('seller-dashboard', { op: 'recent' }),
-            notifications: () => call('seller-dashboard', { op: 'notifications' }),
-        },
-        sellerProducts: {
-            list: () => call('seller-products', { op: 'list' }),
-            create: (data) => call('seller-products', { op: 'create', ...data }),
-            update: (id, data) => call('seller-products', { op: 'update', id, ...data }),
-            delete: (id) => call('seller-products', { op: 'delete', id }),
-        },
-        sellerOrders: {
-            list: () => call('seller-orders', { op: 'list' }),
-            details: (orderId) => call('seller-orders', { op: 'details', orderId }),
-        },
-        sellerProfile: {
-            get: () => call('seller-profile', { op: 'get' }),
-            update: (data) => call('seller-profile', { op: 'update', ...data }),
-        },
-        // ---- Social (Phase 1) ----
-        social: {
-            // Public — no auth required
-            publicProfile: (sellerId, viewerId = null) => call('social', { op: 'public_profile', sellerId, viewerId }),
-            sellerFeed: (sellerId, limit = 20) => call('social', { op: 'seller_feed', sellerId, limit }),
-            discover: (limit = 12) => call('social', { op: 'discover', limit }),
-            // Auth required
-            follow: (sellerId) => call('social', { op: 'follow', sellerId }),
-            unfollow: (sellerId) => call('social', { op: 'unfollow', sellerId }),
-            following: () => call('social', { op: 'following' }),
-            feed: (limit = 20, offset = 0) => call('social', { op: 'feed', limit, offset }),
-        },
-        // ---- Phase 2: Reviews & Ratings ----
-        reviews: {
-            byProduct: (productId) => call('reviews', { op: 'by_product', productId }),
-            bySeller:  (sellerId)  => call('reviews', { op: 'by_seller', sellerId }),
-            create:    (data)      => call('reviews', { op: 'create', ...data }),
-            helpful:   (reviewId)  => call('reviews', { op: 'helpful', reviewId }),
-            delete:    (reviewId)  => call('reviews', { op: 'delete', reviewId }),
-        },
-        // ---- Phase 2: Group Buying (Pinduoduo) ----
-        groupBuy: {
-            create: (productId, targetCount = 3, discountPct = 20) =>
-                call('group-buy', { op: 'create', productId, targetCount, discountPct }),
-            join:   (groupBuyId) => call('group-buy', { op: 'join', groupBuyId }),
-            status: (groupBuyId) => call('group-buy', { op: 'status', groupBuyId }),
-            active: (productId)  => call('group-buy', { op: 'active', productId }),
-            mine:   ()           => call('group-buy', { op: 'mine' }),
-            cancel: (groupBuyId) => call('group-buy', { op: 'cancel', groupBuyId }),
-        },
-        // ---- Phase 2: Wishlist Sharing ----
-        wishlistShare: {
-            share:     (title = null) => call('wishlist-share', { op: 'share', title }),
-            getShared: (token)        => call('wishlist-share', { op: 'get_shared', token }),
-            myShares:  ()             => call('wishlist-share', { op: 'my_shares' }),
-            revoke:    (token)        => call('wishlist-share', { op: 'revoke', token }),
-        },
-        // ---- Phase 2: Live Shopping (Whatnot) ----
-        live: {
-            // Public
-            list:     (status = 'live')    => call('live', { op: 'list', status }),
-            get:      (sessionId)          => call('live', { op: 'get', sessionId }),
-            messages: (sessionId, afterId = 0) => call('live', { op: 'messages', sessionId, afterId }),
-            // Auth
-            start:   (data)                => call('live', { op: 'start', ...data }),
-            end:     (sessionId)           => call('live', { op: 'end', sessionId }),
-            join:    (sessionId, name = null) => call('live', { op: 'join', sessionId, name }),
-            leave:   (sessionId)           => call('live', { op: 'leave', sessionId }),
-            message: (sessionId, message)  => call('live', { op: 'message', sessionId, message }),
-            myNext:  ()                    => call('live', { op: 'mynext' }),
-        },
-        // ---- Phase 3: Short Product Videos (TikTok Shop) ----
-        videos: {
-            // Public
-            feed:       (limit = 20)       => call('videos', { op: 'feed', limit }),
-            byProduct:  (productId)        => call('videos', { op: 'by_product', productId }),
-            bySeller:   (sellerId)         => call('videos', { op: 'by_seller', sellerId }),
-            get:        (videoId)          => call('videos', { op: 'get', videoId }),
-            // Auth (seller)
-            uploadUrl:  (productId, filename, mime = 'video/mp4') => call('videos', { op: 'upload_url', productId, filename, mime }),
-            create:     (data)            => call('videos', { op: 'create', ...data }),
-            delete:     (videoId)          => call('videos', { op: 'delete', videoId }),
-            mine:       ()                 => call('videos', { op: 'mine' }),
-            // Auth (buyer)
-            like:       (videoId)          => call('videos', { op: 'like', videoId }),
-            unlike:     (videoId)          => call('videos', { op: 'unlike', videoId }),
-        },
-        // ---- Phase 3: Trending Feed ----
-        trending: {
-            list:     (limit = 20, hours = 24) => call('trending', { op: 'list', limit, hours }),
-            logView:  (productId, source = 'product_page') => call('trending', { op: 'log_view', productId, source }),
-            logShare: (productId, platform = 'whatsapp') => call('trending', { op: 'log_share', productId, platform }),
-        },
-        // ---- Phase 3: Seller Stories (Instagram-style) ----
-        stories: {
-            // Public
-            activeBar: ()                  => call('stories', { op: 'active_bar' }),
-            bySeller:  (sellerId)          => call('stories', { op: 'by_seller', sellerId }),
-            get:       (storyId)           => call('stories', { op: 'get', storyId }),
-            // Auth
-            markSeen:  (storyIds)          => call('stories', { op: 'mark_seen', storyIds }),
-            create:    (data)              => call('stories', { op: 'create', ...data }),
-            mine:      ()                  => call('stories', { op: 'mine' }),
-            delete:    (storyId)           => call('stories', { op: 'delete', storyId }),
-        },
-        // ---- Phase 3: AI-Powered Discovery ----
-        discover: {
-            recommend: (limit = 10)        => call('discover', { op: 'recommend', limit }),
-            logView:   (productId)         => call('discover', { op: 'log_view', productId }),
-        },
-        // ---- Phase 4: Cross-platform integration ----
-        crossPlatform: {
-            // Web-side (cookie auth)
-            generateLinkCode: (phone)      => call('cross-platform', { op: 'generate_link_code', phone }),
-            myPhoneLinks:     ()           => call('cross-platform', { op: 'my_phone_links' }),
-            unlinkPhone:      (phone)      => call('cross-platform', { op: 'unlink_phone', phone }),
-        },
-        // ---- Payment Gateway (PalmPay verification) ----
-        payment: {
-            createOrder: (data)  => call('payment', { op: 'create_order', ...data }),
-            confirmSent: (orderId) => call('payment', { op: 'confirm_sent', orderId }),
-            checkStatus: (orderId) => call('payment', { op: 'check_status', orderId }),
-        },
-        telegram: {
-            channelInfo: ()                => call('telegram', { op: 'channel_info' }),
-            recent:     ()                 => call('telegram', { op: 'recent' }),
-            subscribe:  (chatId, username = null, userId = null) =>
-                call('telegram', { op: 'subscribe', chatId, username, userId }),
-            unsubscribe: (chatId)          => call('telegram', { op: 'unsubscribe', chatId }),
-            setWebhook:  (url)             => call('telegram', { op: 'set_webhook', url }),
-        },
-        call,
-    };
-    console.log('[EdgeFunctions] HTTP-only cookie auth initialized (no localStorage, no sessionStorage, no tokens in JS)');
-})();

js/load-navbar.js DELETED Viewed

@@ -1,23 +0,0 @@
-// Cellex Navbar Loader — properly executes scripts inside injected HTML
-// Usage: <div id="nav-mount"></div>
-//        <script src="js/load-navbar.js"></script>
-(function() {
-  fetch('shared/navbar.html')
-    .then(r => r.text())
-    .then(html => {
-      const mount = document.getElementById('nav-mount');
-      if (!mount) return;
-      mount.innerHTML = html;
-      // Extract and execute all <script> tags inside the injected HTML
-      // (innerHTML doesn't execute scripts — this is a browser security feature)
-      mount.querySelectorAll('script').forEach(oldScript => {
-        const newScript = document.createElement('script');
-        if (oldScript.src) {
-          newScript.src = oldScript.src;
-        } else {
-          newScript.textContent = oldScript.textContent;
-        }
-        oldScript.parentNode.replaceChild(newScript, oldScript);
-      });
-    });
-})();

js/loader.js DELETED Viewed

File without changes

js/main.js DELETED Viewed

@@ -1,117 +0,0 @@
-// Sample product data (will be replaced with actual data from backend)
-const sampleProducts = [
-    {
-        id: 1,
-        name: "Wireless Headphones",
-        price: 59.99,
-        image: "path/to/headphones.jpg",
-        category: "Electronics"
-    },
-    // More products will be added
-];
-// Hero slider functionality
-function initializeHeroSlider() {
-    const heroSlider = document.querySelector('.hero-slider');
-    // Add slider implementation here
-}
-// Product display functionality
-function displayProducts(products) {
-    const productGrid = document.getElementById('featuredProducts');
-    productGrid.innerHTML = '';
-    products.forEach(product => {
-        const productCard = document.createElement('div');
-        productCard.className = 'product-card';
-        productCard.innerHTML = `
-            <img src="${product.image}" alt="${product.name}">
-            <h3>${product.name}</h3>
-            <p class="price">$${product.price}</p>
-            <button onclick="viewProduct(${product.id})" class="view-btn">View Details</button>
-        `;
-        productGrid.appendChild(productCard);
-    });
-}
-// Product view functionality
-function viewProduct(productId) {
-    // Check if user is logged in
-    const isLoggedIn = checkLoginStatus();
-    if (!isLoggedIn) {
-        window.location.href = 'login.html';
-        return;
-    }
-    // If logged in, show product details
-    // Implementation will be added
-}
-// Login status check
-function checkLoginStatus() {
-    // This will be implemented with actual session management
-    return false;
-}
-// AI Shopping Assistant - DOM elements are queried after DOMContentLoaded
-// Add message to chat
-function addMessageToChat(sender, message) {
-    const messageDiv = document.createElement('div');
-    messageDiv.className = `message ${sender}-message`;
-    messageDiv.textContent = message;
-    chatMessages.appendChild(messageDiv);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-// Simulate AI response (will be replaced with actual AI implementation)
-function simulateAIResponse(userMessage) {
-    setTimeout(() => {
-        const response = "I can help you find products based on your preferences. Could you tell me more about what you're looking for?";
-        addMessageToChat('ai', response);
-    }, 1000);
-}
-// Initialize the page
-document.addEventListener('DOMContentLoaded', () => {
-    initializeHeroSlider();
-    displayProducts(sampleProducts);
-    // Initialize AI chat elements safely (guard against missing elements)
-    const aiChatModal = document.getElementById('ai-chat-modal');
-    const openAIChatBtn = document.getElementById('openAIChat');
-    const closeModal = document.querySelector('.close-modal');
-    const chatMessages = document.getElementById('chatMessages');
-    const userInput = document.getElementById('userInput');
-    const sendMessageBtn = document.getElementById('sendMessage');
-    if (openAIChatBtn && aiChatModal) {
-        openAIChatBtn.addEventListener('click', () => {
-            aiChatModal.style.display = 'block';
-        });
-    }
-    if (closeModal && aiChatModal) {
-        closeModal.addEventListener('click', () => {
-            aiChatModal.style.display = 'none';
-        });
-    }
-    // Close modal when clicking outside (guarded)
-    if (aiChatModal) {
-        window.addEventListener('click', (event) => {
-            if (event.target === aiChatModal) aiChatModal.style.display = 'none';
-        });
-    }
-    // Send message in AI chat (guarded)
-    if (sendMessageBtn && userInput && chatMessages) {
-        sendMessageBtn.addEventListener('click', () => {
-            const message = userInput.value.trim();
-            if (message) {
-                addMessageToChat('user', message);
-                simulateAIResponse(message);
-                userInput.value = '';
-            }
-        });
-    }
-});

js/product.js DELETED Viewed

@@ -1,536 +0,0 @@
-// Product detail page logic — uses EdgeFunctions (cookie-based auth, no Supabase SDK).
-// Requires: ../js/config/edge-functions.js and ../js/cart.js loaded before this file.
-// Get product ID from URL
-function getProductIdFromUrl() {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get('id');
-}
-// Load product details via edge function
-async function loadProductDetails() {
-    const productId = getProductIdFromUrl();
-    if (!productId) {
-        window.location.href = '/index.html';
-        return;
-    }
-    try {
-        // Show loading states
-        document.getElementById('loadingSkeleton').classList.remove('hidden');
-        document.getElementById('loadingText').classList.remove('hidden');
-        document.getElementById('productImagesContainer').classList.add('hidden');
-        document.getElementById('productInfo').classList.add('hidden');
-        document.getElementById('priceSection').classList.add('hidden');
-        document.getElementById('descriptionSection').classList.add('hidden');
-        // Fetch product via edge function
-        const result = await window.EdgeFunctions.products.byId(productId);
-        if (!result.success || !result.product) {
-            console.error('Error loading product:', result.error);
-            window.location.href = '/index.html';
-            return;
-        }
-        const product = result.product;
-        window._currentProduct = product;  // cache for share functions
-        // Hide loading states
-        document.getElementById('loadingSkeleton').classList.add('hidden');
-        document.getElementById('loadingText').classList.add('hidden');
-        document.getElementById('productImagesContainer').classList.remove('hidden');
-        document.getElementById('productInfo').classList.remove('hidden');
-        document.getElementById('priceSection').classList.remove('hidden');
-        document.getElementById('descriptionSection').classList.remove('hidden');
-        // Update the UI with product details
-        document.getElementById('mainImage').src = product.image_url;
-        document.getElementById('productName').textContent = product.name;
-        document.getElementById('productCategory').textContent = product.category || 'General';
-        document.getElementById('productPrice').textContent = `₦${product.price.toFixed(2)}`;
-        document.getElementById('productDescription').textContent = product.description;
-        // Handle optional fields
-        if (product.original_price) {
-            document.getElementById('originalPrice').textContent = `₦${product.original_price.toFixed(2)}`;
-            const discount = Math.round(((product.original_price - product.price) / product.original_price) * 100);
-            document.getElementById('discountBadge').textContent = `-${discount}%`;
-        } else {
-            document.getElementById('originalPrice').classList.add('hidden');
-            document.getElementById('discountBadge').classList.add('hidden');
-        }
-        // Update page title
-        document.title = `${product.name} - Eesha`;
-        // Handle product images
-        const thumbnailContainer = document.getElementById('thumbnailContainer');
-        thumbnailContainer.innerHTML = ''; // Clear existing thumbnails
-        // Add main image to thumbnails
-        const mainThumbnail = createThumbnail(product.image_url, product.name, true);
-        thumbnailContainer.appendChild(mainThumbnail);
-        // Add additional images if available
-        if (product.additional_images && Array.isArray(product.additional_images)) {
-            product.additional_images.forEach(imgUrl => {
-                const thumbnail = createThumbnail(imgUrl, product.name);
-                thumbnailContainer.appendChild(thumbnail);
-            });
-        }
-        // Handle rating if available
-        if (product.rating) {
-            const ratingDiv = document.getElementById('productRating');
-            const stars = '★'.repeat(Math.floor(product.rating)) + '☆'.repeat(5 - Math.floor(product.rating));
-            ratingDiv.innerHTML = `
-                <div class="text-yellow-400">${stars}</div>
-                <span class="text-gray-600">(${product.rating_count || 0} reviews)</span>
-            `;
-        }
-    } catch (error) {
-        console.error('Error loading product:', error);
-        alert('Error loading product details. Please try again.');
-    }
-}
-// Quantity management
-let quantity = 1;
-function increaseQty() {
-    quantity++;
-    updateQuantityDisplay();
-}
-function decreaseQty() {
-    if (quantity > 1) {
-        quantity--;
-        updateQuantityDisplay();
-    }
-}
-function updateQuantityDisplay() {
-    document.getElementById('quantity').textContent = quantity;
-}
-// Add to cart functionality — uses Cart module (requires login, cookie-based)
-async function addToCart() {
-    const productId = getProductIdFromUrl();
-    if (!productId) return;
-    try {
-        // Cart module handles auth check + cart upsert internally
-        const result = await window.Cart.addToCart(productId, quantity);
-        if (!result.success) {
-            if (result.requiresAuth) {
-                // Redirect to login
-                if (confirm('Please login to add items to your cart. Go to login page?')) {
-                    window.location.href = `login.html?redirect=product&id=${productId}`;
-                }
-                return;
-            }
-            alert(result.message || 'Failed to add to cart. Please try again.');
-            return;
-        }
-        // Visual feedback
-        const addBtn = document.querySelector('button[onclick="addToCart()"]');
-        if (addBtn) {
-            const orig = addBtn.innerHTML;
-            addBtn.innerHTML = '<i class="fas fa-check"></i> Added!';
-            addBtn.classList.add('bg-green-500');
-            setTimeout(() => {
-                addBtn.innerHTML = orig;
-                addBtn.classList.remove('bg-green-500');
-            }, 1500);
-        }
-    } catch (error) {
-        console.error('Add to cart failed:', error);
-        alert('Failed to add to cart. Please try again.');
-    }
-}
-// Update cart count in header — delegates to shared Cart module
-async function updateCartCount() {
-    try {
-        if (window.Cart && window.Cart.updateCartCountUI) {
-            await window.Cart.updateCartCountUI();
-        }
-    } catch (err) {
-        console.error('Error updating cart count:', err);
-    }
-}
-// Image gallery functionality
-function createThumbnail(imageUrl, altText, isActive = false) {
-    const div = document.createElement('div');
-    div.className = `cursor-pointer rounded-lg overflow-hidden border-2 ${isActive ? 'border-cyan-500' : 'border-transparent'}`;
-    const img = document.createElement('img');
-    img.src = imageUrl;
-    img.alt = altText;
-    img.className = 'w-full h-full object-cover aspect-square';
-    div.appendChild(img);
-    div.addEventListener('click', () => {
-        // Update main image
-        updateMainImage(imageUrl);
-        // Update active state of thumbnails
-        document.querySelectorAll('#thumbnailContainer > div').forEach(thumb => {
-            thumb.classList.remove('border-cyan-500');
-            thumb.classList.add('border-transparent');
-        });
-        div.classList.remove('border-transparent');
-        div.classList.add('border-cyan-500');
-    });
-    return div;
-}
-function updateMainImage(imageUrl) {
-    const mainImage = document.getElementById('mainImage');
-    mainImage.src = imageUrl;
-}
-// Global user state (kept in memory only — no localStorage)
-let currentUser = null;
-// With cookie-based auth there is no guest cart in localStorage to merge.
-// This function is retained as a no-op for backwards compatibility with the
-// existing init flow.
-async function mergeGuestCartAfterSignIn() {
-    return;
-}
-function updateUIforAuthState(user) {
-    const loginLink = document.getElementById('login-link');
-    const signupLink = document.getElementById('signup-link');
-    const userMenu = document.getElementById('user-menu');
-    const userEmail = document.getElementById('user-email');
-    const mobileLogin = document.querySelector('#mobile-auth-links a[href="login.html"]') || document.querySelector('#mobile-auth-links a[href="login.html"]');
-    const mobileSignup = document.querySelector('#mobile-auth-links a[href="signup.html"]') || document.querySelector('#mobile-auth-links a[href="signup.html"]');
-    const mobileLogout = document.getElementById('mobile-logout-button');
-    if (user) {
-        if (loginLink) loginLink.style.display = 'none';
-        if (signupLink) signupLink.style.display = 'none';
-        if (userMenu) userMenu.style.display = 'block';
-        if (userEmail) userEmail.textContent = user.email || '';
-        if (mobileLogin) mobileLogin.style.display = 'none';
-        if (mobileSignup) mobileSignup.style.display = 'none';
-        if (mobileLogout) mobileLogout.style.display = 'block';
-    } else {
-        if (loginLink) loginLink.style.display = 'block';
-        if (signupLink) signupLink.style.display = 'block';
-        if (userMenu) userMenu.style.display = 'none';
-        if (mobileLogin) mobileLogin.style.display = 'block';
-        if (mobileSignup) mobileSignup.style.display = 'block';
-        if (mobileLogout) mobileLogout.style.display = 'none';
-    }
-}
-// Initialize page and auth handling
-document.addEventListener('DOMContentLoaded', async () => {
-    // Restore session via cookie-based auth (no onAuthStateChange available)
-    try {
-        const { user } = await window.EdgeFunctions.auth.checkSession();
-        currentUser = user || null;
-        updateUIforAuthState(currentUser);
-        await updateCartCount();
-    } catch (err) {
-        console.error('Error checking initial session:', err);
-    }
-    // Wire up logout buttons if present (cookie-based logout clears server cookie)
-    const logoutButton = document.getElementById('logout-button');
-    const mobileLogoutButton = document.getElementById('mobile-logout-button');
-    if (logoutButton) logoutButton.addEventListener('click', async (e) => {
-        e.preventDefault();
-        await window.EdgeFunctions.auth.logout();
-        currentUser = null;
-        updateUIforAuthState(null);
-        await updateCartCount();
-        window.location.reload();
-    });
-    if (mobileLogoutButton) mobileLogoutButton.addEventListener('click', async (e) => {
-        e.preventDefault();
-        await window.EdgeFunctions.auth.logout();
-        currentUser = null;
-        updateUIforAuthState(null);
-        await updateCartCount();
-        window.location.reload();
-    });
-    // User menu toggle
-    const userMenuButton = document.getElementById('user-menu-button');
-    const userMenuDropdown = document.getElementById('user-menu-dropdown');
-    if (userMenuButton && userMenuDropdown) {
-        userMenuButton.addEventListener('click', () => userMenuDropdown.classList.toggle('hidden'));
-        document.addEventListener('click', (e) => {
-            if (!document.getElementById('user-menu').contains(e.target)) {
-                userMenuDropdown.classList.add('hidden');
-            }
-        });
-    }
-    // Mobile menu
-    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
-    const mobileMenu = document.getElementById('mobileMenu');
-    if (mobileMenuBtn && mobileMenu) mobileMenuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
-    // Finally load product details and update cart count
-    await loadProductDetails();
-    await updateCartCount();
-    // Phase 2: load reviews + active group buys for this product
-    loadProductReviews();
-    loadActiveGroupBuys();
-});
-// Search bar behavior (navigate to search-result.html with query)
-(function setupSearch() {
-    try {
-        const searchInput = document.getElementById('searchInput');
-        if (!searchInput) return;
-        const goToSearch = () => {
-            const q = (searchInput.value || '').trim();
-            if (!q) return;
-            // keep relative path consistent with index/product location
-            window.location.href = `../search-result.html?q=${encodeURIComponent(q)}`;
-        };
-        // Enter key
-        searchInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') goToSearch();
-        });
-        // If there's an adjacent button (search icon) try to attach click
-        const btn = searchInput.parentElement?.querySelector('button');
-        if (btn) btn.addEventListener('click', goToSearch);
-    } catch (err) {
-        console.error('Search setup failed:', err);
-    }
-})();
-// ====================================================================
-// Phase 2: Product sharing, group buy, reviews
-// ====================================================================
-function getCurrentProductId() {
-    return getProductIdFromUrl();
-}
-function getCurrentProduct() {
-    // Stored when loadProductDetails runs
-    return window._currentProduct || null;
-}
-// ---- Sharing ----
-function shareProduct(platform) {
-    const id = getCurrentProductId();
-    if (!id) return;
-    const url = `${window.location.origin}/Eesha%20buying%20folder/product.html?id=${id}`;
-    const product = getCurrentProduct();
-    const text = product
-        ? `Check out "${product.name}" on Cellex — ₦${Number(product.price).toFixed(2)}`
-        : 'Check out this product on Cellex';
-    if (platform === 'whatsapp') {
-        window.open(`https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`, '_blank');
-    } else if (platform === 'telegram') {
-        window.open(`https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`, '_blank');
-    }
-}
-async function copyShareLink() {
-    const id = getCurrentProductId();
-    if (!id) return;
-    const url = `${window.location.origin}/Eesha%20buying%20folder/product.html?id=${id}`;
-    try {
-        await navigator.clipboard.writeText(url);
-        const btn = event?.target?.closest('button');
-        if (btn) {
-            const orig = btn.innerHTML;
-            btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
-            setTimeout(() => btn.innerHTML = orig, 1500);
-        }
-    } catch (e) {
-        window.prompt('Copy this link:', url);
-    }
-}
-// ---- Group buy ----
-async function startGroupBuy() {
-    const productId = getCurrentProductId();
-    if (!productId) return;
-    if (!currentUser) {
-        if (confirm('Please login to start a group buy. Go to login page?')) {
-            window.location.href = `login.html?next=${encodeURIComponent('/product.html?id=' + productId)}`;
-        }
-        return;
-    }
-    if (!confirm('Start a group buy?\n\nGet 3 friends to join and everyone gets 20% off.\n\nWe will generate a share link for you.')) return;
-    const r = await window.EdgeFunctions.groupBuy.create(Number(productId), 3, 20);
-    if (r.success) {
-        const url = `${window.location.origin}/group-buy.html?id=${r.groupBuy.id}`;
-        const shareText = `🛍️ Join my group buy on Cellex! Get 20% off when 3 of us join. ${url}`;
-        window.open(`https://wa.me/?text=${encodeURIComponent(shareText)}`, '_blank');
-        // Also navigate to the group buy page
-        window.location.href = `/group-buy.html?id=${r.groupBuy.id}`;
-    } else {
-        alert('Failed to start group buy: ' + (r.error || 'Unknown error'));
-    }
-}
-async function loadActiveGroupBuys() {
-    const productId = getCurrentProductId();
-    if (!productId) return;
-    const container = document.getElementById('activeGroupBuys');
-    if (!container) return;
-    try {
-        const r = await window.EdgeFunctions.groupBuy.active(Number(productId));
-        if (!r.success || !r.groupBuys || r.groupBuys.length === 0) return;
-        container.classList.remove('hidden');
-        container.innerHTML = `
-            <div class="bg-cyan-50 border border-cyan-200 rounded-lg p-3">
-                <div class="text-xs font-bold text-cyan-700 uppercase tracking-wide mb-2">
-                    <i class="fas fa-fire"></i> ${r.groupBuys.length} active group buy${r.groupBuys.length > 1 ? 's' : ''} — join & get 20% off!
-                </div>
-                ${r.groupBuys.map(gb => `
-                    <a href="/group-buy.html?id=${gb.id}" class="block text-sm text-amber-900 hover:underline">
-                        👥 ${gb.current_count}/${gb.target_count} joined · expires ${new Date(gb.expires_at).toLocaleString()}
-                    </a>
-                `).join('')}
-            </div>`;
-    } catch (e) { /* silent fail */ }
-}
-// ---- Reviews ----
-async function loadProductReviews() {
-    const productId = getCurrentProductId();
-    if (!productId) return;
-    try {
-        const r = await window.EdgeFunctions.reviews.byProduct(Number(productId));
-        if (!r.success) return;
-        // Summary
-        const summary = document.getElementById('reviewsSummary');
-        if (r.summary.count > 0) {
-            summary.classList.remove('hidden');
-            document.getElementById('reviewsAvg').textContent = Number(r.summary.avg).toFixed(1);
-            document.getElementById('reviewsStars').textContent =
-                '★'.repeat(Math.round(r.summary.avg)) + '☆'.repeat(5 - Math.round(r.summary.avg));
-            document.getElementById('reviewsCount').textContent = `${r.summary.count} review${r.summary.count > 1 ? 's' : ''}`;
-            document.getElementById('reviewsBlurb').textContent =
-                r.summary.avg >= 4 ? 'Buyers love this product!' :
-                r.summary.avg >= 3 ? 'Most buyers are satisfied.' :
-                'Mixed reviews — read below.';
-        }
-        // List
-        const list = document.getElementById('reviewsList');
-        if (!r.reviews || r.reviews.length === 0) {
-            list.innerHTML = '<div class="text-gray-500 text-sm">No reviews yet. Be the first to write one!</div>';
-            return;
-        }
-        list.innerHTML = r.reviews.map(rev => `
-            <div class="border-b pb-3">
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center gap-2">
-                        <div class="w-8 h-8 rounded-full bg-cyan-100 text-cyan-700 flex items-center justify-center font-bold text-sm">
-                            ${(rev.reviewer_name || 'B').charAt(0).toUpperCase()}
-                        </div>
-                        <div>
-                            <div class="font-medium text-sm">${escapeHtml(rev.reviewer_name || 'Buyer')}</div>
-                            <div class="text-xs text-gray-500">${new Date(rev.created_at).toLocaleDateString()}</div>
-                        </div>
-                    </div>
-                    <div class="text-yellow-400 text-sm">${'★'.repeat(rev.rating)}${'☆'.repeat(5 - rev.rating)}</div>
-                </div>
-                ${rev.title ? `<div class="font-semibold mt-2">${escapeHtml(rev.title)}</div>` : ''}
-                ${rev.comment ? `<p class="text-gray-700 text-sm mt-1">${escapeHtml(rev.comment)}</p>` : ''}
-                ${rev.verified_purchase ? '<div class="text-xs text-green-600 mt-1"><i class="fas fa-check-circle"></i> Verified purchase</div>' : ''}
-                ${rev.images && rev.images.length ? `<div class="flex gap-2 mt-2">${rev.images.map(img => `<img src="${escapeHtml(img)}" class="w-16 h-16 object-cover rounded">`).join('')}</div>` : ''}
-                <button onclick="markHelpful('${rev.id}')" class="text-xs text-gray-500 hover:text-cyan-600 mt-2">
-                    <i class="fas fa-thumbs-up"></i> Helpful (${rev.helpful_count || 0})
-                </button>
-            </div>`).join('');
-    } catch (e) {
-        console.error('reviews load error', e);
-    }
-}
-function escapeHtml(s) {
-    return String(s ?? '').replace(/[&<>"']/g, c => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
-    }[c]));
-}
-// ---- Review modal ----
-function openReviewModal() {
-    if (!currentUser) {
-        if (confirm('Please login to write a review. Go to login page?')) {
-            const id = getCurrentProductId();
-            window.location.href = `login.html?next=${encodeURIComponent('/product.html?id=' + id)}`;
-        }
-        return;
-    }
-    document.getElementById('reviewModal').classList.remove('hidden');
-    // Star picker
-    document.querySelectorAll('#starPicker button').forEach(btn => {
-        btn.onclick = () => {
-            const star = parseInt(btn.dataset.star);
-            document.getElementById('reviewRating').value = star;
-            document.querySelectorAll('#starPicker button').forEach(b => {
-                b.classList.remove('text-cyan-400');
-                b.classList.add('text-gray-300');
-            });
-            for (let i = 1; i <= star; i++) {
-                const b = document.querySelector(`#starPicker button[data-star="${i}"]`);
-                if (b) { b.classList.add('text-cyan-400'); b.classList.remove('text-gray-300'); }
-            }
-        };
-    });
-    document.getElementById('reviewForm').onsubmit = submitReview;
-}
-function closeReviewModal() {
-    document.getElementById('reviewModal').classList.add('hidden');
-}
-async function submitReview(e) {
-    e.preventDefault();
-    const errEl = document.getElementById('reviewError');
-    errEl.classList.add('hidden');
-    const rating = parseInt(document.getElementById('reviewRating').value);
-    if (!rating || rating < 1 || rating > 5) {
-        errEl.textContent = 'Please select a rating (1-5 stars)';
-        errEl.classList.remove('hidden');
-        return;
-    }
-    const r = await window.EdgeFunctions.reviews.create({
-        productId: Number(getCurrentProductId()),
-        rating,
-        title: document.getElementById('reviewTitle').value.trim(),
-        comment: document.getElementById('reviewComment').value.trim(),
-    });
-    if (r.success) {
-        closeReviewModal();
-        await loadProductReviews();
-        alert('Thanks for your review!');
-    } else {
-        errEl.textContent = r.error || 'Failed to submit review';
-        errEl.classList.remove('hidden');
-    }
-}
-async function markHelpful(reviewId) {
-    const r = await window.EdgeFunctions.reviews.helpful(reviewId);
-    if (r.success) await loadProductReviews();
-}

link-account.html DELETED Viewed

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Link WhatsApp · Cellex</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link rel="stylesheet" href="css/common.css">
-  <script src="js/config/edge-functions.js?v=2"></script>
-  <style>
-    body { background: #f8fafc; }
-    .la-card {
-      background: #fff; border-radius: 16px;
-      box-shadow: 0 4px 14px rgba(0,0,0,0.06);
-      padding: 2rem; margin: 2rem auto; max-width: 560px;
-    }
-    .la-code-box {
-      background: linear-gradient(135deg, #00d4ff, #0891b2);
-      color: #0f172a; padding: 1.5rem; border-radius: 12px;
-      text-align: center; margin: 1.5rem 0;
-    }
-    .la-code-box .code {
-      font-size: 3rem; font-weight: 800; letter-spacing: 0.5rem;
-      font-family: 'Courier New', monospace;
-    }
-    .la-step {
-      display: flex; gap: 1rem; padding: 0.75rem 0;
-      border-bottom: 1px solid #e2e8f0;
-    }
-    .la-step:last-child { border-bottom: none; }
-    .la-step .num {
-      width: 32px; height: 32px; border-radius: 50%;
-      background: #cffafe; color: #0891b2;
-      display: flex; align-items: center; justify-content: center;
-      font-weight: 700; flex-shrink: 0;
-    }
-  </style>
-</head>
-<body>
-  <div id="nav-mount"></div>
-  <script src="js/load-navbar.js"></script>
-  <div class="la-card">
-    <h1 class="text-2xl font-bold mb-2">
-      <i class="fab fa-whatsapp text-green-500"></i> Link WhatsApp
-    </h1>
-    <p class="text-gray-600 mb-4">Connect your WhatsApp to your Cellex account so you can manage your cart, join group buys, and checkout — all from WhatsApp.</p>
-    <!-- Generate code form -->
-    <div id="generateSection">
-      <form id="phoneForm" class="space-y-3">
-        <div>
-          <label class="block text-sm font-medium mb-1">Your WhatsApp phone number</label>
-          <input type="tel" id="phone" placeholder="+234 801 234 5678" required
-                 class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-amber-500">
-          <p class="text-xs text-gray-500 mt-1">Include country code (e.g. +234 for Nigeria).</p>
-        </div>
-        <button type="submit" class="w-full bg-gradient-to-r from-cyan-400 to-cyan-700 text-ink-900 font-bold py-2.5 rounded-lg hover:opacity-90">
-          Generate link code
-        </button>
-      </form>
-    </div>
-    <!-- Code display -->
-    <div id="codeSection" style="display:none;">
-      <div class="la-code-box">
-        <div class="text-xs font-bold uppercase tracking-wider mb-1">Your link code</div>
-        <div class="code" id="codeDisplay">—</div>
-        <div class="text-xs mt-1">Expires in 10 minutes</div>
-      </div>
-      <div class="space-y-2">
-        <div class="la-step">
-          <div class="num">1</div>
-          <div>Open WhatsApp and start a chat with the Cellex bot.</div>
-        </div>
-        <div class="la-step">
-          <div class="num">2</div>
-          <div>Send the message: <code class="bg-gray-100 px-1.5 py-0.5 rounded">link <strong id="codeInline">—</strong></code></div>
-        </div>
-        <div class="la-step">
-          <div class="num">3</div>
-          <div>The bot will confirm once your account is linked.</div>
-        </div>
-      </div>
-      <button onclick="resetForm()" class="mt-4 text-sm text-gray-500 hover:text-gray-700">
-        ← Use a different phone number
-      </button>
-    </div>
-    <!-- Linked phones list -->
-    <div class="mt-6 pt-6 border-t">
-      <h2 class="font-bold text-lg mb-3">Linked phones</h2>
-      <div id="linksList" class="text-gray-500 text-sm">Loading…</div>
-    </div>
-  </div>
-  <script>
-    let currentUser = null;
-    (async () => {
-      const sess = await window.EdgeFunctions.auth.checkSession();
-      if (!sess.success || !sess.user) {
-        window.location.href = 'login.html?next=' + encodeURIComponent('/link-account.html');
-        return;
-      }
-      currentUser = sess.user;
-      await loadLinks();
-      document.getElementById('phoneForm').addEventListener('submit', handleGenerate);
-    })();
-    async function handleGenerate(e) {
-      e.preventDefault();
-      const phone = document.getElementById('phone').value.trim();
-      if (!phone) return;
-      const r = await window.EdgeFunctions.crossPlatform.generateLinkCode(phone);
-      if (r.success) {
-        document.getElementById('codeDisplay').textContent = r.code;
-        document.getElementById('codeInline').textContent = r.code;
-        document.getElementById('generateSection').style.display = 'none';
-        document.getElementById('codeSection').style.display = 'block';
-      } else {
-        alert('Failed: ' + (r.error || 'Unknown error'));
-      }
-    }
-    function resetForm() {
-      document.getElementById('phoneForm').reset();
-      document.getElementById('generateSection').style.display = 'block';
-      document.getElementById('codeSection').style.display = 'none';
-    }
-    async function loadLinks() {
-      const r = await window.EdgeFunctions.crossPlatform.myPhoneLinks();
-      const list = document.getElementById('linksList');
-      if (!r.success || !r.links || r.links.length === 0) {
-        list.innerHTML = '<div class="text-gray-500">No phones linked yet.</div>';
-        return;
-      }
-      list.innerHTML = r.links.map(l => `
-        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-2">
-          <div>
-            <div class="font-medium">${escapeHtml(l.phone)}</div>
-            <div class="text-xs ${l.confirmed_at ? 'text-green-600' : 'text-cyan-600'}">
-              ${l.confirmed_at ? '✓ Confirmed ' + new Date(l.confirmed_at).toLocaleDateString() : '⏳ Pending — code ' + l.link_code}
-            </div>
-          </div>
-          <button onclick="unlink('${escapeHtml(l.phone)}')" class="text-red-500 text-sm hover:bg-red-50 px-2 py-1 rounded">
-            <i class="fas fa-trash"></i>
-          </button>
-        </div>`).join('');
-    }
-    async function unlink(phone) {
-      if (!confirm('Unlink ' + phone + '?')) return;
-      const r = await window.EdgeFunctions.crossPlatform.unlinkPhone(phone);
-      if (r.success) await loadLinks();
-    }
-    function escapeHtml(s) {
-      return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
-    }
-  </script>
-</body>
-</html>