script.js

//...

// Working demo configuration using Cloudinary's sample videos
const DEMO_CONFIG = {
  cloudName: "demo", // Using Cloudinary's demo account for testing
};

// Mock product database - simulates Shopify API responses
const MOCK_PRODUCTS = {
  1: {
    id: 1,
    title: "Classic Sunglasses",
    price: 89.99,
    comparePrice: 129.99,
    available: true,
    stockLevel: 12,
    description: "UV protection with style",
    url: "#product-1",
  },
  2: {
    id: 2,
    title: "Summer Dress", 
    price: 149.99,
    comparePrice: null,
    available: true,
    stockLevel: 3,
    description: "Perfect for sunny days",
    url: "#product-2",
  },
  3: {
    id: 3,
    title: "Leather Handbag",
    price: 299.99,
    comparePrice: 399.99,
    available: false,
    stockLevel: 0,
    description: "Premium leather craftsmanship",
    url: "#product-3",
  },
};

// Demo video configuration with shoppable products
const VIDEO_PRODUCTS = {
  "docs/shoppable_demo": {
    products: [
      {
        productId: 1,
        productName: MOCK_PRODUCTS[1].title,
        startTime: 0,
        endTime: 10,
        publicId: "docs/shoppable_sunglasses",
        hotspots: [
          {
            time: "00:03",
            x: "30%",
            y: "40%",
            tooltipPosition: "right",
            clickUrl: MOCK_PRODUCTS[1].url,
          },
        ],
        onClick: {
          action: "goto",
          pause: true,
          args: {
            url: MOCK_PRODUCTS[1].url,
          },
        },
        onHover: {
          action: "overlay",
          args: `${MOCK_PRODUCTS[1].title} - $${MOCK_PRODUCTS[1].price}`,
        },
      },
      // Add more products following the same pattern
    ],
  },
};