{"id":5,"date":"2025-11-07T06:24:46","date_gmt":"2025-11-07T06:24:46","guid":{"rendered":"https:\/\/honeyai.in\/virsa\/?page_id=5"},"modified":"2025-11-07T07:06:41","modified_gmt":"2025-11-07T07:06:41","slug":"store","status":"publish","type":"page","link":"https:\/\/honeyai.in\/virsa\/","title":{"rendered":"Store"},"content":{"rendered":"    \n    <div id=\"wsp-root\"><\/div>\n    \n        <link rel=\"manifest\" id=\"wsp-manifest\">\n    <meta name=\"theme-color\" content=\"#f0a062\">\n    <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n    <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">\n    <meta name=\"apple-mobile-web-app-title\" content=\"Virsa\">\n        \n    <script>\nconst config = {\n    name: \"Virsa\",\n    whatsapp: \"919319427005\",\n    currency: \"\\u20b9\",\n    desc: \"The Venture of Bhrawan Da Dhaba\",\n    primaryColor: \"#f0a062\",\n    secondaryColor: \"#a14252\",\n    textColor: \"#000000\",\n    buttonTextColor: \"#000000\",\n    logoUrl: \"\",\n    gradientSettings: {\"enable_gradients\":0,\"header_gradient_start\":\"#25d366\",\"header_gradient_end\":\"#128c7e\",\"card_gradient_start\":\"#ffffff\",\"card_gradient_end\":\"#f8f9fa\",\"button_gradient_start\":\"#25d366\",\"button_gradient_end\":\"#128c7e\",\"gradient_direction\":\"to right\"},\n    colorSettings: {\"product_name_color\":\"#1f2937\",\"product_price_color\":\"#1c221e\",\"product_description_color\":\"#6b7280\",\"sale_badge_color\":\"#ef4444\",\"category_badge_color\":\"#8b5cf6\",\"stock_badge_color\":\"#10b981\",\"variation_label_color\":\"#4b5563\",\"variation_price_color\":\"#059669\"},\n    visibilitySettings: {\"show_product_name\":1,\"show_product_image\":1,\"show_product_price\":1,\"show_product_description\":1,\"show_category_badge\":1,\"show_sale_badge\":1,\"show_stock_badge\":1,\"show_featured_badge\":1,\"show_variable_badge\":1,\"show_variations_list\":1,\"show_variation_prices\":1,\"show_add_to_cart_button\":1,\"show_quick_view_button\":0,\"show_wishlist_button\":1},\n    ajaxUrl: 'https:\/\/honeyai.in\/virsa\/wp-admin\/admin-ajax.php',\n    isLoggedIn: false,\n    canManage: false,\n    isAdmin: false,\n    isDemo: false,\n    isRetailer: false,\n    canViewSettings: false,\n    loginUrl: \"https:\\\/\\\/honeyai.in\\\/virsa\\\/wp-login.php?redirect_to=https%3A%2F%2Fhoneyai.in%2Fvirsa%2F\",\n    logoutUrl: \"https:\\\/\\\/honeyai.in\\\/virsa\\\/wp-login.php?action=logout&amp;redirect_to=https%3A%2F%2Fhoneyai.in%2Fvirsa%2F&amp;_wpnonce=17334e8cf4\",\n    maxProducts: 100,\n    maxImages: 5,\n    minOrder: 300,\n    permissions: {\"regular_price\":1,\"sale_price\":1,\"variable_products\":1,\"image_url\":1,\"image_upload\":1,\"stock\":1,\"description\":1,\"category\":1},\n    storeMode: \"whatsapp\",\n    display: {\"show_cart\":1,\"show_add_to_cart\":1,\"show_prices\":1,\"show_stock\":1,\"show_categories\":1,\"show_search\":1,\"show_description\":1,\"enable_pwa\":1,\"show_pwa_install\":1,\"show_sale_badge\":1,\"show_out_of_stock\":1,\"show_store_timings\":1,\"grid_columns_mobile\":2,\"grid_columns_tablet\":3,\"grid_columns_desktop\":3,\"card_style\":\"modern\",\"product_image_mode\":\"all_images\",\"show_product_images\":1,\"show_category_images\":1,\"list_style\":\"detailed\"},\n    payment: {\"enable_cod\":1,\"enable_online\":1,\"payment_gateway\":\"none\",\"stripe_key\":\"\",\"paypal_client_id\":\"\",\"razorpay_key\":\"\"},\n    advanced: {\"enable_wishlist\":0,\"enable_reviews\":0,\"enable_quick_view\":1,\"enable_product_zoom\":1,\"show_related_products\":0,\"enable_discount_codes\":0,\"tax_percentage\":0,\"shipping_charge\":0,\"free_shipping_above\":500},\n    storeTimings: {\"enabled\":1,\"timezone\":\"Asia\\\/Kolkata\",\"schedule\":{\"monday\":{\"enabled\":1,\"open\":\"09:00\",\"close\":\"21:00\"},\"tuesday\":{\"enabled\":1,\"open\":\"09:00\",\"close\":\"21:00\"},\"wednesday\":{\"enabled\":1,\"open\":\"09:00\",\"close\":\"21:00\"},\"thursday\":{\"enabled\":1,\"open\":\"09:00\",\"close\":\"21:00\"},\"friday\":{\"enabled\":1,\"open\":\"09:00\",\"close\":\"21:00\"},\"saturday\":{\"enabled\":1,\"open\":\"09:00\",\"close\":\"21:00\"},\"sunday\":{\"enabled\":1,\"open\":\"09:00\",\"close\":\"21:00\"}}},\n    userRole: \"guest\",\n    delivery_settings: {\"enable_delivery\":1,\"enable_takeaway\":1,\"enable_pincode_check\":0,\"enable_distance_calc\":0,\"store_latitude\":\"\",\"store_longitude\":\"\",\"max_delivery_distance\":10,\"distance_charge_per_km\":5,\"require_landmark\":0,\"require_city\":0,\"require_state\":0,\"google_maps_api_key\":\"\"},\n    userPermissions: []};\n    \n \n\n                const manifest = {\n          name: config.name,\n          short_name: config.name,\n          description: config.desc,\n          start_url: window.location.pathname,\n          display: 'standalone',\n          background_color: '#ffffff',\n          theme_color: config.primaryColor,\n          icons: [\n            {\n              src: 'data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><rect fill=\"' + encodeURIComponent(config.primaryColor) + '\" width=\"100\" height=\"100\"\/><text y=\"75\" x=\"50\" text-anchor=\"middle\" font-size=\"70\" fill=\"white\">\ud83d\udecd\ufe0f<\/text><\/svg>',\n              sizes: '512x512',\n              type: 'image\/svg+xml'\n            }\n          ]\n        };\n        \n        const stringManifest = JSON.stringify(manifest);\n        const blob = new Blob([stringManifest], {type: 'application\/json'});\n        const manifestURL = URL.createObjectURL(blob);\n        document.getElementById('wsp-manifest').setAttribute('href', manifestURL);\n                <\/script>\n        \n        <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n        <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n        <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n        <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n        \n        \n\n<style>\n        \n    #wsp-root { \n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; \n        font-size: 18px;\n    }\n    \n    \/* Primary Colors *\/\n    .wsp-primary { \n                    background-color: #f0a062 !important;\n            }\n    \n    .wsp-secondary { \n        background-color: #a14252 !important; \n    }\n    \n    .wsp-text { \n        color: #000000 !important; \n    }\n    \n    .wsp-button-text { \n        color: #000000 !important; \n    }\n    \n    .wsp-border-primary { \n        border-color: #f0a062 !important; \n    }\n    \n    \/* Header with gradient *\/\n    header.wsp-primary {\n            }\n    \n    \/* Product Cards with gradient *\/\n    .wsp-product-card {\n                    background: white !important;\n            }\n    \n    \/* Element-specific colors *\/\n    .wsp-product-name {\n        font-size: 1.25rem !important;\n        font-weight: 700 !important;\n        line-height: 1.4 !important;\n        color: #1f2937 !important;\n        margin-bottom: 0.5rem !important;\n    }\n    \n    .wsp-product-description {\n        font-size: 1rem !important;\n        line-height: 1.5 !important;\n        color: #6b7280 !important;\n        margin-bottom: 1rem !important;\n    }\n    \n    .wsp-product-price {\n        font-size: 1.5rem !important;\n        font-weight: 700 !important;\n        color: #1c221e !important;\n    }\n    \n    .wsp-sale-badge {\n        background-color: #ef4444 !important;\n        color: white !important;\n    }\n    \n    .wsp-category-badge {\n        background-color: #8b5cf6 !important;\n        color: white !important;\n    }\n    \n    .wsp-stock-badge {\n        background-color: #10b981 !important;\n        color: white !important;\n    }\n    \n    .wsp-variation-name {\n        font-size: 1rem !important;\n        font-weight: 600 !important;\n        color: #4b5563 !important;\n    }\n    \n    .wsp-variation-price {\n        font-size: 1.125rem !important;\n        font-weight: 700 !important;\n        color: #059669 !important;\n    }\n    \n    \/* Logo styling *\/\n    .wsp-logo {\n        max-height: 60px;\n        max-width: 200px;\n        object-fit: contain;\n    }\n    \n    @media (max-width: 640px) {\n        .wsp-logo {\n            max-height: 40px;\n            max-width: 150px;\n        }\n    }\n    \n    \/* Responsive adjustments *\/\n    @media (max-width: 640px) {\n        .wsp-mobile-grid { \n            grid-template-columns: repeat(2, 1fr) !important; \n        }\n        #wsp-root { font-size: 16px; }\n        \n        .wsp-product-name {\n            font-size: 1.125rem !important;\n        }\n        \n        .wsp-product-price {\n            font-size: 1.25rem !important;\n        }\n        \n        .wsp-variation-name {\n            font-size: 0.9rem !important;\n        }\n        \n        .wsp-variation-price {\n            font-size: 1rem !important;\n        }\n    }\n    \n    @media (min-width: 641px) and (max-width: 1024px) {\n        .wsp-tablet-grid { \n            grid-template-columns: repeat(3, 1fr) !important; \n        }\n    }\n    \n    @media (min-width: 1025px) {\n        .wsp-desktop-grid { \n            grid-template-columns: repeat(3, 1fr) !important; \n        }\n    }\n    \n    \/* Rest of existing CSS... *\/\n    .wsp-list-item { \n        transition: all 0.3s ease; \n    }\n    .wsp-list-item:hover { \n        transform: translateX(5px); \n    }\n    \n    .wsp-image-gallery { \n        position: relative; \n        width: 100%; \n    }\n    .wsp-image-main { \n        width: 100%; \n        aspect-ratio: 1; \n        object-fit: cover; \n        border-radius: 12px; \n    }\n    .wsp-image-thumbs { \n        display: flex; \n        gap: 10px; \n        margin-top: 10px; \n        overflow-x: auto; \n        padding: 5px 0; \n    }\n    .wsp-image-thumb { \n        width: 70px; \n        height: 70px; \n        object-fit: cover; \n        cursor: pointer; \n        border: 3px solid transparent; \n        border-radius: 10px; \n        transition: all 0.3s;\n    }\n    .wsp-image-thumb.active { \n        border-color: #f0a062; \n        transform: scale(1.05); \n    }\n    .wsp-image-thumb:hover { \n        transform: scale(1.05); \n    }\n    \n        \n    \/* Hide scrollbar *\/\n    .scrollbar-hide::-webkit-scrollbar {\n        display: none;\n    }\n    .scrollbar-hide {\n        -ms-overflow-style: none;\n        scrollbar-width: none;\n        scroll-behavior: smooth;\n    }\n    \n    \/* Smooth transitions *\/\n    .transition-all {\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    @keyframes pulse {\n        0%, 100% {\n            opacity: 1;\n        }\n        50% {\n            opacity: 0.5;\n        }\n    }\n    \n    .animate-pulse {\n        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n    \n    @keyframes fadeIn {\n        from {\n            opacity: 0;\n            transform: translateY(10px);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n    \n    .wsp-product-card {\n        animation: fadeIn 0.3s ease-out;\n    }\n<\/style>\n        \n     <script type=\"text\/babel\">\n\/\/ ==================== UTILITY FUNCTIONS ====================\n\nfunction debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n\n\n\/\/ NEW: Get next opening time\nfunction getNextOpeningTime() {\n  if (!config.storeTimings || !config.storeTimings.enabled || config.storeTimings.enabled != 1) {\n    return null;\n  }\n  \n  if (!config.storeTimings.schedule) {\n    return null;\n  }\n  \n  try {\n    const now = new Date();\n    const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];\n    const today = days[now.getDay()];\n    \n    \/\/ Check if opening later today\n    const todaySchedule = config.storeTimings.schedule[today];\n    if (todaySchedule && todaySchedule.enabled == 1 && todaySchedule.open) {\n      const [openHour, openMin] = todaySchedule.open.split(':').map(Number);\n      const currentMinutes = now.getHours() * 60 + now.getMinutes();\n      const openMinutes = openHour * 60 + openMin;\n      \n      if (currentMinutes < openMinutes) {\n        return `Today at ${todaySchedule.open}`;\n      }\n    }\n    \n    \/\/ Check next days\n    for (let i = 1; i <= 7; i++) {\n      const checkDay = days[(now.getDay() + i) % 7];\n      const schedule = config.storeTimings.schedule[checkDay];\n      \n      if (schedule && schedule.enabled == 1 && schedule.open) {\n        const dayName = checkDay.charAt(0).toUpperCase() + checkDay.slice(1);\n        return `${dayName} at ${schedule.open}`;\n      }\n    }\n    \n    return 'Check back soon';\n  } catch (err) {\n    console.error('Error getting next opening:', err);\n    return null;\n  }\n}\n\n\/\/ ==================== COMPONENTS ====================\n\n\/\/ Product Image Gallery Component\nfunction ProductImageGallery({ images, imageUrl }) {\n  const [currentIndex, setCurrentIndex] = React.useState(0);\n  \n  const allImages = [];\n  if (imageUrl) allImages.push(imageUrl);\n  if (images && images.length > 0) allImages.push(...images);\n  \n  if (allImages.length === 0) {\n    return React.createElement('div', {\n      className: \"w-full aspect-square bg-gray-200 rounded-xl flex items-center justify-center text-6xl\"\n    }, \"\ud83d\udce6\");\n  }\n  \n  return React.createElement('div', {className: \"wsp-image-gallery\"},\n    React.createElement('img', {\n      src: allImages[currentIndex],\n      alt: \"Product\",\n      className: \"wsp-image-main\",\n      onError: (e) => { \n        e.target.src = 'data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><rect fill=\"%23e0e0e0\" width=\"100\" height=\"100\"\/><text y=\"60\" x=\"50\" text-anchor=\"middle\" font-size=\"40\" fill=\"%23999\">\ud83d\udce6<\/text><\/svg>'; \n      }\n    }),\n    allImages.length > 1 && \n      React.createElement('div', {className: \"wsp-image-thumbs\"},\n        allImages.map((img, idx) => \n          React.createElement('img', {\n            key: idx,\n            src: img,\n            alt: `Image ${idx + 1}`,\n            className: `wsp-image-thumb ${idx === currentIndex ? 'active' : ''}`,\n            onClick: () => setCurrentIndex(idx),\n            onError: (e) => { \n              e.target.src = 'data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><rect fill=\"%23e0e0e0\" width=\"100\" height=\"100\"\/><text y=\"60\" x=\"50\" text-anchor=\"middle\" font-size=\"40\" fill=\"%23999\">\ud83d\udce6<\/text><\/svg>'; \n            }\n          })\n        )\n      )\n  );\n}\n\n\/\/ NEW: Store Timings Banner Component - FIXED VERSION\nfunction StoreTimingsBanner() {\n  const [isOpen, setIsOpen] = React.useState(true);\n  const [nextOpening, setNextOpening] = React.useState('');\n  \n  React.useEffect(() => {\n    const checkStatus = () => {\n      const open = isStoreOpen();\n      setIsOpen(open);\n      \n      if (!open) {\n        setNextOpening(getNextOpeningTime());\n      }\n    };\n    \n    checkStatus();\n    const interval = setInterval(checkStatus, 60000); \/\/ Check every minute\n    \n    return () => clearInterval(interval);\n  }, []);\n  \n  \/\/ FIX: Check if store timings are enabled AND should be shown on display\n  if (!config.storeTimings || !config.storeTimings.enabled || config.storeTimings.enabled != 1) {\n    return null;\n  }\n  \n  if (!config.display || !config.display.show_store_timings || config.display.show_store_timings != 1) {\n    return null;\n  }\n  \n  if (isOpen) {\n    const now = new Date();\n    const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];\n    const today = days[now.getDay()];\n    const todaySchedule = config.storeTimings.schedule ? config.storeTimings.schedule[today] : null;\n    \n    if (!todaySchedule) {\n      return null;\n    }\n    \n    return React.createElement('div', {\n      className: \"bg-green-50 border-2 border-green-500 rounded-2xl p-4 mb-6 text-center shadow-md animate-fadeIn\"\n    },\n      React.createElement('div', {className: \"flex items-center justify-center gap-3 flex-wrap\"},\n        React.createElement('span', {className: \"text-3xl\"}, \"\ud83d\udfe2\"),\n        React.createElement('div', {className: \"text-center sm:text-left\"},\n          React.createElement('p', {className: \"text-xl font-bold text-green-800\"}, \"Store Open\"),\n          React.createElement('p', {className: \"text-sm text-green-700\"}, \n            `Closes at ${todaySchedule.close}`\n          )\n        )\n      )\n    );\n  } else {\n    return React.createElement('div', {\n      className: \"bg-red-50 border-2 border-red-500 rounded-2xl p-4 mb-6 text-center shadow-md animate-fadeIn\"\n    },\n      React.createElement('div', {className: \"flex items-center justify-center gap-3 flex-wrap\"},\n        React.createElement('span', {className: \"text-3xl\"}, \"\ud83d\udd34\"),\n        React.createElement('div', {className: \"text-center sm:text-left\"},\n          React.createElement('p', {className: \"text-xl font-bold text-red-800\"}, \"Store Closed\"),\n          nextOpening && React.createElement('p', {className: \"text-sm text-red-700\"}, \n            `Opens ${nextOpening}`\n          )\n        )\n      )\n    );\n  }\n}\n\n\/\/ Also update the isStoreOpen function to properly handle disabled days:\nfunction isStoreOpen() {\n  if (!config.storeTimings || !config.storeTimings.enabled || config.storeTimings.enabled != 1) {\n    return true; \/\/ Store always open if timings not enabled\n  }\n  \n  if (!config.storeTimings.schedule) {\n    return true; \/\/ Store always open if no schedule configured\n  }\n  \n  try {\n    const now = new Date();\n    const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];\n    const today = days[now.getDay()];\n    \n    const todaySchedule = config.storeTimings.schedule[today];\n    \n    \/\/ FIX: Check if today is enabled\n    if (!todaySchedule || !todaySchedule.enabled || todaySchedule.enabled != 1) {\n      return false; \/\/ Store closed today\n    }\n    \n    if (!todaySchedule.open || !todaySchedule.close) {\n      return false; \/\/ Invalid schedule\n    }\n    \n    const [openHour, openMin] = todaySchedule.open.split(':').map(Number);\n    const [closeHour, closeMin] = todaySchedule.close.split(':').map(Number);\n    \n    const currentMinutes = now.getHours() * 60 + now.getMinutes();\n    const openMinutes = openHour * 60 + openMin;\n    const closeMinutes = closeHour * 60 + closeMin;\n    \n    return currentMinutes >= openMinutes && currentMinutes < closeMinutes;\n  } catch (err) {\n    console.error('Error checking store hours:', err);\n    return true; \/\/ Default to open on error\n  }\n}\n\n\/\/ Product Card Component (updated with store hours check)\nfunction ProductCard({ product, addToCart, viewMode, showAddToCart, showPrices, showDescription, showCategories, showStock, showSaleBadge, enableWishlist, wishlist, toggleWishlist, onQuickView }) {\n  const [selectedVariation, setSelectedVariation] = React.useState(null);\n  const [showVariations, setShowVariations] = React.useState(false);\n  const storeOpen = isStoreOpen();\n  \n  \/\/ Get visibility settings\n  const vis = config.visibilitySettings || {};\n  const showProductName = vis.show_product_name !== 0;\n  const showProductImage = vis.show_product_image !== 0;\n  const showProductPrice = vis.show_product_price !== 0;\n  const showProductDescription = vis.show_product_description !== 0;\n  const showCategoryBadge = vis.show_category_badge !== 0;\n  const showSaleBadgeVis = vis.show_sale_badge !== 0;\n  const showStockBadge = vis.show_stock_badge !== 0;\n  const showFeaturedBadge = vis.show_featured_badge !== 0;\n  const showVariableBadge = vis.show_variable_badge !== 0;\n  const showVariationsList = vis.show_variations_list !== 0;\n  const showVariationPrices = vis.show_variation_prices !== 0;\n  const showAddToCartButton = vis.show_add_to_cart_button !== 0;\n  const showQuickViewButton = vis.show_quick_view_button !== 0;\n  const showWishlistButton = vis.show_wishlist_button !== 0;\n\n  const handleAddToCart = () => {\n    if (!storeOpen) {\n      alert('\ud83d\udd34 Store is currently closed. Please come back during business hours!');\n      return;\n    }\n    \n    if (product.type === 'variable' && product.variations && product.variations.length > 0) {\n      if (!selectedVariation) {\n        setShowVariations(true);\n        return;\n      }\n      addToCart({...product, selectedVariation});\n      setSelectedVariation(null);\n      setShowVariations(false);\n    } else {\n      addToCart(product);\n    }\n  };\n\n  const showSalePrice = config.permissions.sale_price && product.sale_price > 0 && product.sale_price < product.price;\n  const displayPrice = showSalePrice ? product.sale_price : product.price;\n  const isOutOfStock = product.stock <= 0;\n  const isInWishlist = wishlist.includes(product.id);\n  const isDigitalMenu = config.storeMode === 'digital_menu';\n  const enableQuickView = config.advanced.enable_quick_view == 1 && showQuickViewButton;\n\n  return React.createElement('div', {\n    className: `wsp-product-card rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden ${viewMode === 'list' ? 'flex gap-6' : ''}`\n  },\n    \/\/ Image Section\n    showProductImage && React.createElement('div', {className: viewMode === 'list' ? 'w-48 sm:w-56 relative' : 'w-full relative group'},\n      React.createElement(ProductImageGallery, {\n        images: product.images || [],\n        imageUrl: product.image_url\n      }),\n      \n      \/\/ Badges on Image\n      isOutOfStock && showStock && showStockBadge && \n        React.createElement('div', {\n          className: \"absolute top-2 right-2 wsp-stock-badge text-white px-3 py-1 rounded-full text-sm font-bold\"\n        }, \"Out of Stock\"),\n      \n      showSaleBadge && showSaleBadgeVis && showSalePrice &&\n        React.createElement('div', {\n          className: \"absolute top-2 left-2 wsp-sale-badge text-white px-3 py-1 rounded-full text-sm font-bold\"\n        }, \"SALE\"),\n      \n      showFeaturedBadge && product.featured == 1 &&\n        React.createElement('div', {\n          className: `absolute ${showSaleBadge && showSalePrice ? 'top-14' : 'top-2'} left-2 bg-yellow-400 text-yellow-900 px-3 py-1 rounded-full text-sm font-bold shadow-lg`\n        }, \"\u2b50 Featured\"),\n      \n      enableWishlist && showWishlistButton && \n        React.createElement('button', {\n          onClick: () => toggleWishlist(product.id),\n          className: `absolute ${(showSaleBadge && showSalePrice) || (showFeaturedBadge && product.featured == 1) ? 'top-24' : 'top-2'} left-2 w-12 h-12 rounded-full shadow-lg flex items-center justify-center text-2xl transition ${isInWishlist ? 'bg-red-500' : 'bg-white'}`\n        }, isInWishlist ? \"\u2764\ufe0f\" : \"\ud83e\udd0d\"),\n      \n      enableQuickView && React.createElement('button', {\n        onClick: () => onQuickView(product),\n        className: \"absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100\"\n      },\n        React.createElement('span', {\n          className: \"px-6 py-3 bg-white rounded-xl font-bold text-lg shadow-xl transform scale-90 group-hover:scale-100 transition\"\n        }, \"\ud83d\udc41\ufe0f Quick View\")\n      )\n    ),\n    \n    \/\/ Content Section\n    React.createElement('div', {className: \"p-5 sm:p-6 flex-1\"},\n      \/\/ Category Badge\n      showCategories && showCategoryBadge && config.permissions.category && product.category &&\n        React.createElement('div', {\n          className: \"text-sm font-bold uppercase tracking-wide mb-2 wsp-category-badge inline-block px-3 py-1 rounded-full\"\n        }, product.category),\n      \n      \/\/ Product Name\n      showProductName && React.createElement('h3', {\n        className: \"text-xl sm:text-2xl font-bold mb-3 wsp-product-name line-clamp-2\"\n      }, product.name),\n      \n      \/\/ Badges Row (Variable, Featured if not on image)\n      React.createElement('div', {className: \"flex flex-wrap gap-2 mb-2\"},\n        config.permissions.variable_products && product.type === 'variable' && !isDigitalMenu && showVariableBadge &&\n          React.createElement('span', {\n            className: \"inline-block px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-bold\"\n          }, \"\ud83c\udfa8 Variable\"),\n        \n        !showProductImage && showFeaturedBadge && product.featured == 1 &&\n          React.createElement('span', {\n            className: \"inline-block px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-sm font-bold\"\n          }, \"\u2b50 Featured\")\n      ),\n      \n      \/\/ Description\n      showDescription && showProductDescription && config.permissions.description && product.description &&\n        React.createElement('p', {\n          className: \"wsp-product-description text-base sm:text-lg mb-4 line-clamp-3\"\n        }, product.description),\n      \n      \/\/ Variations List (for Digital Menu with all images or variable products)\n      showPrices && showVariationsList && isDigitalMenu && product.type === 'variable' && product.variations && product.variations.length > 0 &&\n        React.createElement('div', {\n          className: \"mb-4 p-5 rounded-xl\",\n          style: {\n            background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',\n            border: '2px solid #dee2e6'\n          }\n        },\n          React.createElement('p', {\n            className: \"font-bold mb-4 flex items-center gap-2\",\n            style: {fontSize: '18px', color: '#495057'}\n          },\n            React.createElement('span', null, \"\ud83d\udccb\"),\n            \"Available Options\"\n          ),\n          product.variations.map((v, idx) => \n            React.createElement('div', {\n              key: v.id,\n              className: \"flex justify-between items-center py-3 px-3 hover:bg-white rounded-lg transition\",\n              style: {\n                borderBottom: idx < product.variations.length - 1 ? '1px solid #dee2e6' : 'none'\n              }\n            },\n              React.createElement('span', {\n                className: \"wsp-variation-name\"\n              }, v.name),\n              showVariationPrices && React.createElement('span', {\n                className: \"wsp-variation-price\"\n              }, `${config.currency}${v.price}`)\n            )\n          )\n        ),\n      \n      \/\/ Variation Selection (for non-digital menu)\n      showVariations && !isDigitalMenu && showVariationsList && product.variations && product.variations.length > 0 &&\n        React.createElement('div', {className: \"mb-4 space-y-2\"},\n          React.createElement('p', {className: \"font-bold text-sm\"}, \"Select variation:\"),\n          product.variations.map(v => \n            React.createElement('button', {\n              key: v.id,\n              onClick: () => setSelectedVariation(v),\n              className: `block w-full px-4 py-2 rounded-xl text-left font-medium transition ${selectedVariation?.id === v.id ? 'bg-purple-600 text-white' : 'bg-gray-100 hover:bg-gray-200'}`\n            }, `${v.name}${showPrices && showVariationPrices ? ` - ${config.currency}${v.price}` : ''}`)\n          )\n        ),\n      \n      \/\/ Price and Add to Cart Section\n      React.createElement('div', {className: \"flex items-center justify-between mt-4\"},\n        showPrices && showProductPrice && product.type === 'simple' &&\n          React.createElement('div', null,\n            showSalePrice && showSaleBadgeVis && \n              React.createElement('div', {className: \"flex items-center gap-2 mb-1\"},\n                React.createElement('span', {\n                  className: \"text-xl sm:text-2xl font-bold line-through text-gray-400\"\n                }, `${config.currency}${product.price}`),\n                React.createElement('span', {\n                  className: \"px-2 py-1 wsp-sale-badge text-white text-sm font-bold rounded-lg\"\n                }, \"SALE\")\n              ),\n            React.createElement('span', {\n              className: \"text-3xl sm:text-4xl font-bold wsp-product-price\"\n            }, `${config.currency}${displayPrice}`)\n          ),\n        \n        showAddToCart && showAddToCartButton && !isDigitalMenu && !isOutOfStock &&\n          React.createElement('button', {\n            onClick: handleAddToCart,\n            disabled: !storeOpen,\n            className: `px-6 py-3 sm:px-8 sm:py-4 wsp-primary wsp-button-text rounded-2xl hover:shadow-2xl transition-all duration-300 font-bold text-lg sm:text-xl ${!storeOpen ? 'opacity-50 cursor-not-allowed' : ''}`\n          }, !storeOpen ? '\ud83d\udd34 Closed' : (product.type === 'variable' && !selectedVariation && !showVariations ? 'Select' : 'Add to Cart'))\n      )\n    )\n  );\n}\n\n\/\/ Compact List View Component (updated with store hours)\nfunction CompactProductList({ products, addToCart, showAddToCart, showPrices, showDescription, enableWishlist, wishlist, toggleWishlist }) {\n  const isDigitalMenu = config.storeMode === 'digital_menu';\n  const storeOpen = isStoreOpen();\n  const [showVariationModal, setShowVariationModal] = React.useState(null);\n  \n  \/\/ Get visibility settings\n  const vis = config.visibilitySettings || {};\n  const showProductName = vis.show_product_name !== 0;\n  const showProductPrice = vis.show_product_price !== 0;\n  const showProductDescription = vis.show_product_description !== 0;\n  const showVariableBadge = vis.show_variable_badge !== 0;\n  const showSaleBadgeVis = vis.show_sale_badge !== 0;\n  const showVariationsList = vis.show_variations_list !== 0;\n  const showVariationPrices = vis.show_variation_prices !== 0;\n  const showAddToCartButton = vis.show_add_to_cart_button !== 0;\n  \n  const handleAddToCart = (product) => {\n    if (!storeOpen) {\n      alert('\ud83d\udd34 Store is currently closed. Please come back during business hours!');\n      return;\n    }\n    \n    if (product.type === 'variable' && product.variations && product.variations.length > 0) {\n      setShowVariationModal(product);\n    } else {\n      addToCart(product);\n    }\n  };\n  \n  const handleVariationSelect = (product, variation) => {\n    addToCart({...product, selectedVariation: variation});\n    setShowVariationModal(null);\n  };\n  \n  return React.createElement('div', {className: \"space-y-3 wsp-compact-list\"},\n    products.map(p => {\n      const showSalePrice = config.permissions.sale_price && p.sale_price > 0 && p.sale_price < p.price;\n      const displayPrice = showSalePrice ? p.sale_price : p.price;\n      const isOutOfStock = p.stock <= 0;\n      \n      return React.createElement('div', {\n        key: p.id,\n        className: \"bg-white rounded-xl shadow-md hover:shadow-xl transition-all p-4 border-l-4\",\n        style: {borderLeftColor: config.primaryColor}\n      },\n        React.createElement('div', {className: \"flex items-center justify-between\"},\n          React.createElement('div', {className: \"flex-1\"},\n            showProductName && React.createElement('h3', {className: \"text-lg sm:text-xl font-bold wsp-product-name\"}, p.name),\n            \n            showVariableBadge && p.type === 'variable' && \n              React.createElement('span', {className: \"inline-block px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold mr-2 mt-1\"}, \"Variable\"),\n            \n            showSaleBadgeVis && showSalePrice &&\n              React.createElement('span', {className: \"inline-block px-2 py-1 wsp-sale-badge text-white rounded-full text-xs font-bold mt-1\"}, \"SALE\"),\n            \n            showDescription && showProductDescription && p.description && \n              React.createElement('p', {className: \"text-sm wsp-product-description mt-1 line-clamp-2\"}, p.description),\n            \n            isDigitalMenu && p.type === 'variable' && p.variations && p.variations.length > 0 && showVariationsList &&\n              React.createElement('div', {className: \"mt-3 space-y-2\"},\n                p.variations.map(v =>\n                  React.createElement('div', {\n                    key: v.id,\n                    className: \"flex justify-between items-center py-2 px-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition\"\n                  },\n                    React.createElement('span', {\n                      className: \"wsp-variation-name text-gray-700 font-medium\",\n                      style: {fontSize: '16px'}\n                    }, `\u2022 ${v.name}`),\n                    showPrices && showVariationPrices && showProductPrice && React.createElement('span', {\n                      className: \"font-bold wsp-variation-price\"\n                    }, `${config.currency}${v.price}`)\n                  )\n                )\n              )\n          ),\n          \n          React.createElement('div', {className: \"flex items-center gap-3\"},\n            showPrices && showProductPrice && p.type === 'simple' &&\n              React.createElement('div', {className: \"text-right\"},\n                showSalePrice && showSaleBadgeVis && \n                  React.createElement('div', {className: \"text-sm line-through text-gray-400\"}, \n                    `${config.currency}${p.price}`\n                  ),\n                React.createElement('div', {\n                  className: \"text-2xl font-bold wsp-product-price\"\n                }, `${config.currency}${displayPrice}`)\n              ),\n            \n            showAddToCart && showAddToCartButton && !isDigitalMenu && !isOutOfStock &&\n              React.createElement('button', {\n                onClick: () => handleAddToCart(p),\n                disabled: !storeOpen,\n                className: `px-4 py-2 wsp-primary wsp-button-text rounded-lg font-bold hover:shadow-lg transition ${!storeOpen ? 'opacity-50 cursor-not-allowed' : ''}`\n              }, !storeOpen ? \"\ud83d\udd34\" : (p.type === 'variable' ? \"Select\" : \"+\"))\n          )\n        )\n      );\n    }),\n    \n    \/\/ Variation Modal\n    showVariationModal && React.createElement('div', {\n      className: \"fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4\",\n      onClick: () => setShowVariationModal(null)\n    },\n      React.createElement('div', {\n        className: \"bg-white rounded-2xl p-6 max-w-md w-full shadow-2xl\",\n        onClick: (e) => e.stopPropagation()\n      },\n        React.createElement('h3', {className: \"text-2xl font-bold mb-4 wsp-product-name\"}, \"Select Variation\"),\n        showProductName && React.createElement('p', {className: \"text-lg mb-4 text-gray-600\"}, showVariationModal.name),\n        React.createElement('div', {className: \"space-y-3\"},\n          showVariationModal.variations.map(v =>\n            React.createElement('button', {\n              key: v.id,\n              onClick: () => handleVariationSelect(showVariationModal, v),\n              className: \"w-full flex justify-between items-center px-4 py-3 border-2 border-gray-300 rounded-xl hover:border-green-500 hover:bg-green-50 transition font-semibold\"\n            },\n              React.createElement('span', {className: \"wsp-variation-name\"}, v.name),\n              showPrices && showVariationPrices && showProductPrice && React.createElement('span', {\n                className: \"font-bold wsp-variation-price\"\n              }, `${config.currency}${v.price}`)\n            )\n          )\n        ),\n        React.createElement('button', {\n          onClick: () => setShowVariationModal(null),\n          className: \"w-full mt-4 px-4 py-3 bg-gray-300 text-gray-700 rounded-xl font-bold hover:bg-gray-400 transition\"\n        }, \"Cancel\")\n      )\n    )\n  );\n}\n\/\/ Table View Component (keeping similar structure, add storeOpen check)\nfunction TableProductView({ products, addToCart, showAddToCart, showPrices, showDescription }) {\n  const isDigitalMenu = config.storeMode === 'digital_menu';\n  const storeOpen = isStoreOpen();\n  const [showVariationModal, setShowVariationModal] = React.useState(null);\n  \n  const handleAddToCart = (product) => {\n    if (!storeOpen) {\n      alert('\ud83d\udd34 Store is currently closed. Please come back during business hours!');\n      return;\n    }\n    \n    if (product.type === 'variable' && product.variations && product.variations.length > 0) {\n      setShowVariationModal(product);\n    } else {\n      addToCart(product);\n    }\n  };\n  \n  const handleVariationSelect = (product, variation) => {\n    addToCart({...product, selectedVariation: variation});\n    setShowVariationModal(null);\n  };\n  \n  return React.createElement('div', {className: \"bg-white rounded-xl shadow-lg overflow-hidden\"},\n    React.createElement('table', {className: \"w-full wsp-table\"},\n      React.createElement('thead', null,\n        React.createElement('tr', {className: \"wsp-primary text-white\"},\n          React.createElement('th', {className: \"text-left p-4 text-lg font-bold\"}, \"Item\"),\n          showDescription && React.createElement('th', {className: \"text-left p-4 text-lg font-bold hidden md:table-cell\"}, \"Description\"),\n          showPrices && React.createElement('th', {className: \"text-right p-4 text-lg font-bold\"}, \"Price\"),\n          showAddToCart && !isDigitalMenu && React.createElement('th', {className: \"text-center p-4 text-lg font-bold\"}, \"Action\")\n        )\n      ),\n      React.createElement('tbody', null,\n        products.map((p, idx) => {\n          const showSalePrice = config.permissions.sale_price && p.sale_price > 0 && p.sale_price < p.price;\n          const displayPrice = showSalePrice ? p.sale_price : p.price;\n          const isOutOfStock = p.stock <= 0;\n          \n          return React.createElement('tr', {\n            key: p.id,\n            className: `border-b border-gray-200 hover:bg-gray-50 transition ${idx % 2 === 0 ? 'bg-gray-50' : 'bg-white'}`\n          },\n            React.createElement('td', {className: \"p-4\"},\n              React.createElement('div', {className: \"font-bold text-lg wsp-text\"}, p.name),\n              config.permissions.variable_products && p.type === 'variable' && \n                React.createElement('span', {className: \"text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full\"}, \"Variable\")\n            ),\n            showDescription && React.createElement('td', {className: \"p-4 text-gray-600 hidden md:table-cell\"}, \n              p.description || '-'\n            ),\n            showPrices && React.createElement('td', {className: \"p-4 text-right\"},\n              p.type === 'variable' && p.variations && p.variations.length > 0 ?\n                React.createElement('div', {className: \"space-y-2\"},\n                  p.variations.map(v =>\n                    React.createElement('div', {key: v.id, className: \"flex justify-between gap-3\"},\n                      React.createElement('span', {\n                        className: \"text-gray-600\",\n                        style: {fontSize: '15px'}\n                      }, v.name),\n                      React.createElement('span', {\n                        className: \"font-bold\",\n                        style: {fontSize: '17px', color: config.primaryColor}\n                      }, `${config.currency}${v.price}`)\n                    )\n                  )\n                )\n              :\n                React.createElement('div', null,\n                  showSalePrice && \n                    React.createElement('div', {className: \"text-sm line-through text-gray-400\"}, \n                      `${config.currency}${p.price}`\n                    ),\n                  React.createElement('div', {\n                    className: \"text-xl font-bold\",\n                    style: {color: config.primaryColor}\n                  }, `${config.currency}${displayPrice}`)\n                )\n            ),\n            showAddToCart && !isDigitalMenu && React.createElement('td', {className: \"p-4 text-center\"},\n              !isOutOfStock ?\n                React.createElement('button', {\n                  onClick: () => handleAddToCart(p),\n                  disabled: !storeOpen,\n                  className: `px-4 py-2 wsp-primary wsp-button-text rounded-lg font-bold hover:shadow-lg transition ${!storeOpen ? 'opacity-50 cursor-not-allowed' : ''}`\n                }, !storeOpen ? \"\ud83d\udd34\" : (p.type === 'variable' ? \"Select\" : \"Add\"))\n              :\n                React.createElement('span', {className: \"text-red-500 font-bold\"}, \"Out\")\n            )\n          );\n        })\n      )\n    ),\n    \n    showVariationModal && React.createElement('div', {\n      className: \"fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4\",\n      onClick: () => setShowVariationModal(null)\n    },\n      React.createElement('div', {\n        className: \"bg-white rounded-2xl p-6 max-w-md w-full shadow-2xl\",\n        onClick: (e) => e.stopPropagation()\n      },\n        React.createElement('h3', {className: \"text-2xl font-bold mb-4 wsp-text\"}, \"Select Variation\"),\n        React.createElement('p', {className: \"text-lg mb-4 text-gray-600\"}, showVariationModal.name),\n        React.createElement('div', {className: \"space-y-3\"},\n          showVariationModal.variations.map(v =>\n            React.createElement('button', {\n              key: v.id,\n              onClick: () => handleVariationSelect(showVariationModal, v),\n              className: \"w-full flex justify-between items-center px-4 py-3 border-2 border-gray-300 rounded-xl hover:border-green-500 hover:bg-green-50 transition font-semibold\"\n            },\n              React.createElement('span', {style: {fontSize: '18px'}}, v.name),\n              showPrices && React.createElement('span', {\n                className: \"font-bold\",\n                style: {fontSize: '20px', color: config.primaryColor}\n              }, `${config.currency}${v.price}`)\n            )\n          )\n        ),\n        React.createElement('button', {\n          onClick: () => setShowVariationModal(null),\n          className: \"w-full mt-4 px-4 py-3 bg-gray-300 text-gray-700 rounded-xl font-bold hover:bg-gray-400 transition\"\n        }, \"Cancel\")\n      )\n    )\n  );\n}\n\n\/\/ Price List View Component (similar updates)\nfunction PriceListView({ products, addToCart, showAddToCart, showPrices, showDescription }) {\n  const isDigitalMenu = config.storeMode === 'digital_menu';\n  const storeOpen = isStoreOpen();\n  \n  return React.createElement('div', {className: \"bg-white rounded-xl shadow-lg p-6 sm:p-8 wsp-price-list\"},\n    products.map((p, idx) => {\n      const showSalePrice = config.permissions.sale_price && p.sale_price > 0 && p.sale_price < p.price;\n      const displayPrice = showSalePrice ? p.sale_price : p.price;\n      const isOutOfStock = p.stock <= 0;\n      \n      return React.createElement('div', {\n        key: p.id,\n        className: \"py-4 border-b border-dashed border-gray-300 last:border-0\"\n      },\n\t  React.createElement('div', {className: \"flex justify-between items-start gap-4\"},\n          React.createElement('div', {className: \"flex-1\"},\n            React.createElement('div', {className: \"flex items-center gap-3 mb-1\"},\n              React.createElement('h3', {className: \"text-xl font-bold wsp-text\"}, p.name),\n              config.permissions.variable_products && p.type === 'variable' && \n                React.createElement('span', {className: \"text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full\"}, \"V\")\n            ),\n            showDescription && p.description && \n              React.createElement('p', {className: \"text-gray-600 text-sm mb-2\"}, p.description),\n            \n            p.type === 'variable' && p.variations && p.variations.length > 0 &&\n              React.createElement('div', {className: \"space-y-1 mt-2\"},\n                p.variations.map(v =>\n                  React.createElement('div', {\n                    key: v.id,\n                    className: \"flex items-center gap-2 text-sm\"\n                  },\n                    React.createElement('span', {className: \"w-2 h-2 rounded-full\", style: {background: config.primaryColor}}),\n                    React.createElement('span', {className: \"text-gray-700\"}, v.name),\n                    showPrices && React.createElement('span', {className: \"ml-auto font-bold\"}, \n                      `${config.currency}${v.price}`\n                    )\n                  )\n                )\n              )\n          ),\n          \n          React.createElement('div', {className: \"text-right flex items-start gap-3\"},\n            showPrices && p.type === 'simple' &&\n              React.createElement('div', null,\n                showSalePrice && \n                  React.createElement('div', {className: \"text-sm line-through text-gray-400\"}, \n                    `${config.currency}${p.price}`\n                  ),\n                React.createElement('div', {\n                  className: \"text-2xl font-bold\",\n                  style: {color: config.primaryColor}\n                }, `${config.currency}${displayPrice}`)\n              ),\n            \n            showAddToCart && !isDigitalMenu && !isOutOfStock &&\n              React.createElement('button', {\n                onClick: () => {\n                  if (!storeOpen) {\n                    alert('\ud83d\udd34 Store is currently closed. Please come back during business hours!');\n                    return;\n                  }\n                  addToCart(p);\n                },\n                disabled: !storeOpen,\n                className: `px-3 py-2 wsp-primary wsp-button-text rounded-lg font-bold text-sm hover:shadow-lg transition ${!storeOpen ? 'opacity-50 cursor-not-allowed' : ''}`\n              }, !storeOpen ? \"\ud83d\udd34\" : \"+\")\n          )\n        )\n      );\n    })\n  );\n}\n\n\n\/\/ Category Grouped View Component (updated with consistent fonts and responsive design)\nfunction CategoryGroupedView({ products, categories, addToCart, showAddToCart, showPrices, showDescription, category }) {\n  const isDigitalMenu = config.storeMode === 'digital_menu';\n  const storeOpen = isStoreOpen();\n  const [categoryImages, setCategoryImages] = React.useState({});\n  const showCategoryImages = config.display.show_category_images == 1;\n  \n  React.useEffect(() => {\n    if (showCategoryImages) {\n      fetch(config.ajaxUrl + '?action=wsp_get_category_images')\n        .then(res => res.json())\n        .then(data => {\n          if (data.success) {\n            setCategoryImages(data.data || {});\n          }\n        })\n        .catch(err => console.error('Error loading category images:', err));\n    }\n  }, [showCategoryImages]);\n  \n  const groupedProducts = {};\n  const activeCategories = category === 'All' ? categories.filter(c => c !== 'All') : [category];\n  \n  activeCategories.forEach(cat => {\n    groupedProducts[cat] = products.filter(p => p.category === cat);\n  });\n  \n  return React.createElement('div', {className: \"space-y-8\"},\n    Object.keys(groupedProducts).map(cat => {\n      if (groupedProducts[cat].length === 0) return null;\n      \n      const categoryImage = categoryImages[cat];\n      \n      return React.createElement('div', {\n        key: cat,\n        className: \"bg-white rounded-2xl shadow-xl overflow-hidden wsp-category-section\"\n      },\n        React.createElement('div', {\n          className: \"wsp-primary text-white relative overflow-hidden\"\n        },\n          showCategoryImages && categoryImage &&\n            React.createElement('div', {\n              className: \"absolute inset-0 opacity-20\",\n              style: {\n                backgroundImage: `url(${categoryImage})`,\n                backgroundSize: 'cover',\n                backgroundPosition: 'center'\n              }\n            }),\n          React.createElement('div', {className: \"relative z-10 p-6 sm:p-8\"},\n            React.createElement('h2', {className: \"text-2xl sm:text-3xl lg:text-4xl font-bold flex items-center gap-3 mb-2\"},\n              showCategoryImages && categoryImage &&\n                React.createElement('img', {\n                  src: categoryImage,\n                  alt: cat,\n                  className: \"w-12 h-12 sm:w-16 sm:h-16 rounded-full object-cover border-4 border-white shadow-lg\"\n                }),\n              cat\n            ),\n            React.createElement('div', {className: \"h-1 w-20 bg-white rounded mb-2\"}),\n            React.createElement('p', {className: \"mt-2 opacity-90 text-sm sm:text-base\"}, \n              `${groupedProducts[cat].length} ${groupedProducts[cat].length === 1 ? 'item' : 'items'}`\n            )\n          )\n        ),\n        \n        React.createElement('div', {className: \"p-4 sm:p-6 lg:p-8\"},\n          React.createElement('div', {className: \"space-y-4 sm:space-y-6\"},\n            groupedProducts[cat].map((p, idx) => {\n              const showSalePrice = config.permissions.sale_price && p.sale_price > 0 && p.sale_price < p.price;\n              const displayPrice = showSalePrice ? p.sale_price : p.price;\n              const isOutOfStock = p.stock <= 0;\n              \n              return React.createElement('div', {\n                key: p.id,\n                className: \"flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3 sm:gap-4 py-4 border-b border-gray-200 last:border-0 hover:bg-gray-50 px-3 sm:px-4 -mx-3 sm:-mx-4 rounded-lg transition-all duration-300\"\n              },\n                React.createElement('div', {className: \"flex-1 min-w-0\"},\n                  React.createElement('div', {className: \"flex items-start gap-3 mb-2\"},\n                    React.createElement('span', {\n                      className: \"text-base sm:text-lg font-bold flex-shrink-0 mt-1\",\n                      style: {color: config.primaryColor}\n                    }, `${idx + 1}.`),\n                    React.createElement('div', {className: \"flex-1 min-w-0\"},\n                      React.createElement('h3', {\n                        className: \"wsp-product-name line-clamp-2 mb-1\"\n                      }, p.name),\n                      \n                      config.permissions.variable_products && p.type === 'variable' && \n                        React.createElement('span', {\n                          className: \"inline-block px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold mb-2\"\n                        }, \"Variable\"),\n                      \n                      showDescription && p.description && \n                        React.createElement('p', {\n                          className: \"wsp-product-description line-clamp-2\"\n                        }, p.description),\n                      \n                      p.type === 'variable' && p.variations && p.variations.length > 0 &&\n                        React.createElement('div', {className: \"mt-3 space-y-2\"},\n                          p.variations.map(v =>\n                            React.createElement('div', {\n                              key: v.id,\n                              className: \"flex justify-between items-center gap-3 sm:gap-4 py-2 px-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition\"\n                            },\n                              React.createElement('span', {\n                                className: \"wsp-variation-name flex items-center gap-2\"\n                              },\n                                React.createElement('span', {className: \"w-1.5 h-1.5 rounded-full bg-gray-400 flex-shrink-0\"}),\n                                v.name\n                              ),\n                              showPrices && React.createElement('span', {\n                                className: \"wsp-variation-price whitespace-nowrap flex-shrink-0\"\n                              }, `${config.currency}${v.price}`)\n                            )\n                          )\n                        )\n                    )\n                  )\n                ),\n                \n                React.createElement('div', {className: \"flex items-center justify-between sm:justify-end gap-3 sm:gap-4 flex-shrink-0 w-full sm:w-auto\"},\n                  showPrices && p.type === 'simple' &&\n                    React.createElement('div', {className: \"text-right sm:text-left\"},\n                      showSalePrice && \n                        React.createElement('div', {className: \"text-sm line-through text-gray-400 mb-1\"}, \n                          `${config.currency}${p.price}`\n                        ),\n                      React.createElement('div', {\n                        className: \"wsp-product-price whitespace-nowrap\"\n                      }, `${config.currency}${displayPrice}`)\n                    ),\n                  \n                  showAddToCart && !isDigitalMenu && !isOutOfStock &&\n                    React.createElement('button', {\n                      onClick: () => {\n                        if (!storeOpen) {\n                          alert('\ud83d\udd34 Store is currently closed. Please come back during business hours!');\n                          return;\n                        }\n                        \n                        if (p.type === 'variable' && p.variations && p.variations.length > 0) {\n                          \/\/ For variable products in category view, we'll use a simple add to cart\n                          \/\/ that adds the first variation, or we could show a modal\n                          const firstVariation = p.variations[0];\n                          addToCart({...p, selectedVariation: firstVariation});\n                        } else {\n                          addToCart(p);\n                        }\n                      },\n                      disabled: !storeOpen,\n                      className: `px-4 py-2 wsp-primary wsp-button-text rounded-lg font-bold hover:shadow-lg transition text-sm whitespace-nowrap ${!storeOpen ? 'opacity-50 cursor-not-allowed' : ''}`\n                    }, !storeOpen ? \"\ud83d\udd34\" : (p.type === 'variable' ? \"Add\" : \"Add to Cart\"))\n                )\n              );\n            })\n          )\n        )\n      );\n    })\n  );\n}\n\n\/\/ Quick View Modal Component (keep existing implementation)\nfunction QuickViewModal({ product, onClose, addToCart, showAddToCart, showPrices, showDescription }) {\n  const [selectedVariation, setSelectedVariation] = React.useState(null);\n  const [currentImageIndex, setCurrentImageIndex] = React.useState(0);\n  const isDigitalMenu = config.storeMode === 'digital_menu';\n  const storeOpen = isStoreOpen();\n  \n  if (!product) return null;\n  \n  const allImages = [];\n  if (product.image_url) allImages.push(product.image_url);\n  if (product.images && product.images.length > 0) allImages.push(...product.images);\n  \n  const showSalePrice = config.permissions.sale_price && product.sale_price > 0 && product.sale_price < product.price;\n  const displayPrice = showSalePrice ? product.sale_price : product.price;\n  const isOutOfStock = product.stock <= 0;\n  \n  const handleAddToCart = () => {\n    if (!storeOpen) {\n      alert('\ud83d\udd34 Store is currently closed. Please come back during business hours!');\n      return;\n    }\n    \n    if (product.type === 'variable' && product.variations && product.variations.length > 0 && !selectedVariation) {\n      alert('Please select a variation');\n      return;\n    }\n    \n    if (product.type === 'variable' && selectedVariation) {\n      addToCart({...product, selectedVariation});\n    } else {\n      addToCart(product);\n    }\n    onClose();\n  };\n  \n  return React.createElement('div', {\n    className: \"fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4 backdrop-blur-sm\",\n    onClick: onClose\n  },\n    React.createElement('div', {\n      className: \"bg-white rounded-3xl max-w-4xl w-full max-h-[90vh] overflow-y-auto shadow-2xl relative\",\n      onClick: (e) => e.stopPropagation()\n    },\n      React.createElement('button', {\n        onClick: onClose,\n        className: \"absolute top-4 right-4 z-10 w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center text-2xl hover:bg-gray-100 transition\"\n      }, \"\u00d7\"),\n      \n      React.createElement('div', {className: \"grid md:grid-cols-2 gap-6 p-6 sm:p-8\"},\n        React.createElement('div', {className: \"space-y-4\"},\n          allImages.length > 0 ? React.createElement(React.Fragment, null,\n            React.createElement('div', {className: \"relative\"},\n              React.createElement('img', {\n                src: allImages[currentImageIndex],\n                alt: product.name,\n                className: \"w-full aspect-square object-cover rounded-2xl shadow-lg\"\n              }),\n              isOutOfStock && React.createElement('div', {\n                className: \"absolute top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-full font-bold\"\n              }, \"Out of Stock\")\n            ),\n            allImages.length > 1 && React.createElement('div', {className: \"flex gap-2 overflow-x-auto pb-2\"},\n              allImages.map((img, idx) =>\n                React.createElement('img', {\n                  key: idx,\n                  src: img,\n                  alt: `${product.name} ${idx + 1}`,\n                  onClick: () => setCurrentImageIndex(idx),\n                  className: `w-20 h-20 object-cover rounded-lg cursor-pointer border-3 transition ${idx === currentImageIndex ? 'border-green-500 scale-105' : 'border-gray-300 hover:border-green-300'}`\n                })\n              )\n            )\n          ) : React.createElement('div', {\n            className: \"w-full aspect-square bg-gray-200 rounded-2xl flex items-center justify-center text-6xl\"\n          }, \"\ud83d\udce6\")\n        ),\n        \n        React.createElement('div', {className: \"space-y-4\"},\n          React.createElement('div', null,\n            config.permissions.category && product.category && React.createElement('span', {\n              className: \"text-sm font-bold uppercase tracking-wide\",\n              style: {color: config.primaryColor}\n            }, product.category),\n            React.createElement('h2', {className: \"text-3xl font-bold wsp-text mt-2\"}, product.name),\n            config.permissions.variable_products && product.type === 'variable' && React.createElement('span', {\n              className: \"inline-block px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-bold mt-2\"\n            }, \"Variable Product\")\n          ),\n          \n          showPrices && React.createElement('div', {className: \"py-4 border-y border-gray-200\"},\n            product.type === 'simple' ? React.createElement('div', null,\n              showSalePrice && React.createElement('div', {className: \"flex items-center gap-3 mb-2\"},\n                React.createElement('span', {className: \"text-2xl line-through text-gray-400\"}, `${config.currency}${product.price}`),\n                React.createElement('span', {className: \"px-3 py-1 bg-red-500 text-white text-sm font-bold rounded-lg\"}, \"SALE\")\n              ),\n              React.createElement('div', {\n                className: \"text-4xl font-bold\",\n                style: {color: config.primaryColor}\n              }, `${config.currency}${displayPrice}`)\n            ) : React.createElement('div', {\n              className: \"text-3xl font-bold\",\n              style: {color: config.primaryColor}\n            }, `From ${config.currency}${product.variations && product.variations.length > 0 ? Math.min(...product.variations.map(v => v.price)) : displayPrice}`)\n          ),\n          \n          showDescription && config.permissions.description && product.description && React.createElement('div', null,\n            React.createElement('h3', {className: \"font-bold text-lg mb-2\"}, \"Description\"),\n            React.createElement('p', {className: \"text-gray-600 leading-relaxed\"}, product.description)\n          ),\n          \n          config.permissions.stock && React.createElement('div', null,\n            React.createElement('span', {className: `font-semibold ${product.stock > 0 ? 'text-green-600' : 'text-red-600'}`},\n              product.stock > 0 ? `\u2713 In Stock (${product.stock} available)` : '\u2717 Out of Stock'\n            )\n          ),\n          \n          product.type === 'variable' && product.variations && product.variations.length > 0 && React.createElement('div', null,\n            React.createElement('h3', {className: \"font-bold text-lg mb-3\"}, \"Select Option\"),\n            React.createElement('div', {className: \"space-y-2\"},\n              product.variations.map(v =>\n                React.createElement('button', {\n                  key: v.id,\n                  onClick: () => setSelectedVariation(v),\n                  className: `w-full flex justify-between items-center px-4 py-3 rounded-xl border-2 transition ${selectedVariation?.id === v.id ? 'border-purple-600 bg-purple-50' : 'border-gray-300 hover:border-purple-300'}`\n                },\n                  React.createElement('span', {className: \"font-semibold\"}, v.name),\n                  showPrices && React.createElement('span', {\n                    className: \"font-bold text-lg\",\n                    style: {color: config.primaryColor}\n                  }, `${config.currency}${v.price}`)\n                )\n              )\n            )\n          ),\n          \n          showAddToCart && !isDigitalMenu && !isOutOfStock && React.createElement('button', {\n            onClick: handleAddToCart,\n            disabled: !storeOpen,\n            className: `w-full py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition ${!storeOpen ? 'opacity-50 cursor-not-allowed' : ''}`\n          }, !storeOpen ? \"\ud83d\udd34 Store Closed\" : \"Add to Cart\")\n        )\n      )\n    )\n  );\n}\n\n\/\/ Store View Component (add StoreTimingsBanner)\nfunction StoreView({ products, search, setSearch, addToCart, categories, category, setCategory, viewMode, setViewMode, showAddToCart, showPrices, showDescription, showCategories, showSearch, showStock, showSaleBadge, enableWishlist, wishlist, toggleWishlist }) {\n  const [quickViewProduct, setQuickViewProduct] = React.useState(null);\n  \n  const productImageMode = config.display.product_image_mode || 'all_images';\n  const listStyle = config.display.list_style || 'detailed';\n  const showProductImages = config.display.show_product_images == 1;\n\n  \/\/ Auto-scroll active category into view\n  React.useEffect(() => {\n    if (category && category !== 'All') {\n      setTimeout(() => {\n        const button = document.querySelector(`[data-category=\"${category}\"]`);\n        if (button) {\n          button.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n        }\n      }, 100);\n    }\n  }, [category]);\n\n  return React.createElement('div', {className: \"space-y-4 sm:space-y-6\"},\n    \/\/ Store Timings Banner\n    React.createElement(StoreTimingsBanner),\n    \n    \/\/ Search Bar Section\n    showSearch && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-3 sm:p-4 border-2 border-gray-200\"},\n      React.createElement('div', {className: \"flex flex-col sm:flex-row gap-3\"},\n        \/\/ Search Input\n        React.createElement('div', {className: \"relative flex-1\"},\n          React.createElement('span', {className: \"absolute left-4 top-1\/2 -translate-y-1\/2 text-xl sm:text-2xl text-gray-400\"}, \"\ud83d\udd0d\"),\n          React.createElement('input', {\n            type: \"text\",\n            placeholder: \"Search products...\",\n            value: search,\n            onChange: (e) => setSearch(e.target.value),\n            className: \"w-full pl-12 pr-4 py-3 sm:py-4 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-base sm:text-lg font-medium\"\n          }),\n          search && React.createElement('button', {\n            onClick: () => setSearch(''),\n            className: \"absolute right-3 top-1\/2 -translate-y-1\/2 w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300 transition text-sm\"\n          }, \"\u00d7\"),\n          search && React.createElement('div', {\n            className: \"absolute right-12 top-1\/2 -translate-y-1\/2 px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-xs sm:text-sm font-bold\"\n          }, `${products.length} found`)\n        ),\n        \n        \/\/ View Mode Toggle (Desktop & Tablet Only)\n        productImageMode === 'all_images' && showProductImages && React.createElement('div', {className: \"hidden sm:flex gap-2\"},\n          React.createElement('button', {\n            onClick: () => setViewMode('grid'),\n            className: `px-4 py-3 rounded-xl text-2xl transition shadow-md ${viewMode === 'grid' ? 'wsp-primary text-white shadow-lg scale-105' : 'bg-white hover:shadow-lg'}`\n          }, \"\ud83d\udcf1\"),\n          React.createElement('button', {\n            onClick: () => setViewMode('list'),\n            className: `px-4 py-3 rounded-xl text-2xl transition shadow-md ${viewMode === 'list' ? 'wsp-primary text-white shadow-lg scale-105' : 'bg-white hover:shadow-lg'}`\n          }, \"\ud83d\udccb\")\n        )\n      )\n    ),\n\n    \/\/ Category Filter Section - ALWAYS VISIBLE (No Toggle)\n    showCategories && config.permissions.category && React.createElement('div', {\n      className: \"bg-white rounded-2xl shadow-lg border-2 border-gray-200\"\n    },\n      React.createElement('div', {className: \"p-3 sm:p-4\"},\n        \/\/ Header\n        React.createElement('div', {className: \"flex items-center justify-between mb-3\"},\n          React.createElement('h3', {className: \"text-base sm:text-lg font-bold flex items-center gap-2\"},\n            React.createElement('span', null, \"\ud83c\udff7\ufe0f\"),\n            React.createElement('span', {className: \"hidden sm:inline\"}, \"Filter by Category\"),\n            React.createElement('span', {className: \"sm:hidden\"}, \"Categories\")\n          ),\n          React.createElement('div', {className: \"flex items-center gap-2\"},\n            React.createElement('div', {className: \"text-xs sm:text-sm text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full font-semibold\"}, \n              `${products.length} products`\n            ),\n            category !== 'All' && React.createElement('button', {\n              onClick: () => setCategory('All'),\n              className: \"text-xs sm:text-sm text-red-600 hover:text-red-700 font-semibold underline\"\n            }, \"Clear\")\n          )\n        ),\n        \n        \/\/ Scrollable Categories with Gradients\n        React.createElement('div', {className: \"relative -mx-3 sm:mx-0\"},\n          \/\/ Left Gradient\n          React.createElement('div', {\n            className: \"absolute left-0 top-0 bottom-0 w-6 sm:w-8 bg-gradient-to-r from-white via-white to-transparent z-10 pointer-events-none\"\n          }),\n          \/\/ Right Gradient\n          React.createElement('div', {\n            className: \"absolute right-0 top-0 bottom-0 w-6 sm:w-8 bg-gradient-to-l from-white via-white to-transparent z-10 pointer-events-none\"\n          }),\n          \n          \/\/ Scrollable Container\n          React.createElement('div', {\n            className: \"flex gap-2 overflow-x-auto scrollbar-hide pb-2 px-3 sm:px-0\",\n            style: {\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n              WebkitOverflowScrolling: 'touch',\n              scrollPaddingLeft: '12px',\n              scrollPaddingRight: '12px'\n            }\n          },\n            categories.map((cat, index) => {\n              const isActive = category === cat;\n              const count = cat === 'All' ? products.length : products.filter(p => p.category === cat).length;\n              \n              return React.createElement('button', {\n                key: cat,\n                onClick: () => setCategory(cat),\n                'data-category': cat,\n                className: `flex-shrink-0 px-4 sm:px-5 py-2.5 sm:py-3 rounded-full font-bold text-sm sm:text-base transition-all duration-300 shadow-md transform hover:scale-105 relative whitespace-nowrap ${\n                  isActive \n                    ? 'wsp-primary wsp-button-text shadow-xl scale-105 ring-2 ring-offset-2' \n                    : 'bg-white wsp-text hover:shadow-xl border-2 border-gray-300 hover:border-green-400'\n                }`,\n                style: index === 0 ? { marginLeft: '0' } : {}\n              }, \n                React.createElement('span', {className: \"flex items-center gap-1.5 sm:gap-2\"},\n                  cat === 'All' && React.createElement('span', {className: \"text-base sm:text-lg\"}, '\ud83c\udfe0'),\n                  React.createElement('span', null, cat),\n                  React.createElement('span', {\n                    className: `ml-1 sm:ml-1.5 px-1.5 sm:px-2 py-0.5 text-xs rounded-full font-bold ${\n                      isActive ? 'bg-white bg-opacity-30' : 'bg-gray-200 text-gray-700'\n                    }`\n                  }, count)\n                )\n              );\n            })\n          )\n        )\n      )\n    ),\n\n    \/\/ Quick Stats Bar (Mobile Only)\n    React.createElement('div', {className: \"sm:hidden bg-gradient-to-r from-green-50 to-blue-50 rounded-xl p-3 border border-green-200\"},\n      React.createElement('div', {className: \"flex items-center justify-between text-sm\"},\n        React.createElement('div', {className: \"flex items-center gap-2\"},\n          React.createElement('span', {className: \"font-bold\"}, \"\ud83d\udce6\"),\n          React.createElement('span', null, `${products.length} Products`)\n        ),\n        enableWishlist && wishlist.length > 0 && React.createElement('div', {className: \"flex items-center gap-2\"},\n          React.createElement('span', {className: \"font-bold\"}, \"\u2764\ufe0f\"),\n          React.createElement('span', null, `${wishlist.length} Saved`)\n        ),\n        category !== 'All' && React.createElement('div', {className: \"px-2.5 py-1 bg-green-200 text-green-800 rounded-full text-xs font-bold\"},\n          category\n        )\n      )\n    ),\n\n    \/\/ Products Grid\/List\n    React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-3 sm:p-4 md:p-6 border-2 border-gray-200\"},\n      productImageMode === 'all_images' && showProductImages ? (\n        products.length > 0 ? React.createElement('div', {\n          className: `${viewMode === 'grid' ? 'grid gap-4 sm:gap-5 md:gap-6' : 'space-y-4 sm:space-y-6'} wsp-mobile-grid wsp-tablet-grid wsp-desktop-grid`\n        },\n          products.map(p => \n            React.createElement(ProductCard, {\n              key: p.id,\n              product: p,\n              addToCart: addToCart,\n              viewMode: viewMode,\n              showAddToCart: showAddToCart,\n              showPrices: showPrices,\n              showDescription: showDescription,\n              showCategories: showCategories,\n              showStock: showStock,\n              showSaleBadge: showSaleBadge,\n              enableWishlist: enableWishlist,\n              wishlist: wishlist,\n              toggleWishlist: toggleWishlist,\n              onQuickView: setQuickViewProduct\n            })\n          )\n        ) : React.createElement('div', {className: \"text-center py-16 sm:py-24\"},\n          React.createElement('div', {className: \"text-6xl sm:text-8xl mb-4 sm:mb-6\"}, \"\ud83d\udce6\"),\n          React.createElement('p', {className: \"text-2xl sm:text-3xl wsp-text font-bold mb-2\"}, \"No products found\"),\n          React.createElement('p', {className: \"text-lg sm:text-xl text-gray-500\"}, \"Try different search terms or category\"),\n          search && React.createElement('button', {\n            onClick: () => setSearch(''),\n            className: \"mt-4 px-6 py-3 wsp-primary wsp-button-text rounded-xl font-bold hover:shadow-lg transition\"\n          }, \"Clear Search\")\n        )\n      ) : productImageMode === 'no_images' && listStyle === 'compact' ? (\n        products.length > 0 ? React.createElement(CompactProductList, {\n          products: products,\n          addToCart: addToCart,\n          showAddToCart: showAddToCart,\n          showPrices: showPrices,\n          showDescription: showDescription,\n          enableWishlist: enableWishlist,\n          wishlist: wishlist,\n          toggleWishlist: toggleWishlist\n        }) : React.createElement('div', {className: \"text-center py-16 sm:py-24\"},\n          React.createElement('div', {className: \"text-6xl sm:text-8xl mb-4 sm:mb-6\"}, \"\ud83d\udce6\"),\n          React.createElement('p', {className: \"text-2xl sm:text-3xl wsp-text font-bold\"}, \"No products found\")\n        )\n      ) : productImageMode === 'no_images' && listStyle === 'table' ? (\n        products.length > 0 ? React.createElement(TableProductView, {\n          products: products,\n          addToCart: addToCart,\n          showAddToCart: showAddToCart,\n          showPrices: showPrices,\n          showDescription: showDescription\n        }) : React.createElement('div', {className: \"text-center py-16 sm:py-24\"},\n          React.createElement('div', {className: \"text-6xl sm:text-8xl mb-4 sm:mb-6\"}, \"\ud83d\udce6\"),\n          React.createElement('p', {className: \"text-2xl sm:text-3xl wsp-text font-bold\"}, \"No products found\")\n        )\n      ) : productImageMode === 'no_images' && listStyle === 'price_list' ? (\n        products.length > 0 ? React.createElement(PriceListView, {\n          products: products,\n          addToCart: addToCart,\n          showAddToCart: showAddToCart,\n          showPrices: showPrices,\n          showDescription: showDescription\n        }) : React.createElement('div', {className: \"text-center py-16 sm:py-24\"},\n          React.createElement('div', {className: \"text-6xl sm:text-8xl mb-4 sm:mb-6\"}, \"\ud83d\udce6\"),\n          React.createElement('p', {className: \"text-2xl sm:text-3xl wsp-text font-bold\"}, \"No products found\")\n        )\n      ) : productImageMode === 'category_image_only' ? (\n        products.length > 0 ? React.createElement(CategoryGroupedView, {\n          products: products,\n          categories: categories,\n          addToCart: addToCart,\n          showAddToCart: showAddToCart,\n          showPrices: showPrices,\n          showDescription: showDescription,\n          category: category\n        }) : React.createElement('div', {className: \"text-center py-16 sm:py-24\"},\n          React.createElement('div', {className: \"text-6xl sm:text-8xl mb-4 sm:mb-6\"}, \"\ud83d\udce6\"),\n          React.createElement('p', {className: \"text-2xl sm:text-3xl wsp-text font-bold\"}, \"No products found\")\n        )\n      ) : (\n        products.length > 0 ? React.createElement(CompactProductList, {\n          products: products,\n          addToCart: addToCart,\n          showAddToCart: showAddToCart,\n          showPrices: showPrices,\n          showDescription: showDescription,\n          enableWishlist: enableWishlist,\n          wishlist: wishlist,\n          toggleWishlist: toggleWishlist\n        }) : React.createElement('div', {className: \"text-center py-16 sm:py-24\"},\n          React.createElement('div', {className: \"text-6xl sm:text-8xl mb-4 sm:mb-6\"}, \"\ud83d\udce6\"),\n          React.createElement('p', {className: \"text-2xl sm:text-3xl wsp-text font-bold\"}, \"No products found\")\n        )\n      )\n    ),\n    \n    \/\/ Quick View Modal\n    quickViewProduct && React.createElement(QuickViewModal, {\n      product: quickViewProduct,\n      onClose: () => setQuickViewProduct(null),\n      addToCart: addToCart,\n      showAddToCart: showAddToCart,\n      showPrices: showPrices,\n      showDescription: showDescription\n    })\n  );\n}\n\n\/\/ NEW: Orders List Component for Admin View\nfunction OrdersList() {\n  const [orders, setOrders] = React.useState([]);\n  const [loading, setLoading] = React.useState(true);\n  \n  React.useEffect(() => {\n    loadOrders();\n  }, []);\n  \n  const loadOrders = () => {\n    setLoading(true);\n    fetch(config.ajaxUrl + '?action=wsp_get_orders')\n      .then(res => res.json())\n      .then(data => {\n        if (data.success) {\n          setOrders(data.data || []);\n        }\n        setLoading(false);\n      })\n      .catch(err => {\n        console.error('Error loading orders:', err);\n        setLoading(false);\n      });\n  };\n  \n  const updateOrderStatus = (orderId, status, type) => {\n    const formData = new FormData();\n    formData.append('action', 'wsp_update_order_status');\n    formData.append('order_id', orderId);\n    if (type === 'order_status') {\n      formData.append('status', status);\n    } else {\n      formData.append('payment_status', status);\n    }\n    \n    fetch(config.ajaxUrl, {\n      method: 'POST',\n      body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n      if (data.success) {\n        alert('\u2705 Order updated!');\n        loadOrders();\n      } else {\n        alert('\u274c Failed to update order');\n      }\n    });\n  };\n  \n  const deleteOrder = (orderId) => {\n    if (!confirm('Are you sure you want to delete this order?')) return;\n    \n    const formData = new FormData();\n    formData.append('action', 'wsp_delete_order');\n    formData.append('order_id', orderId);\n    \n    fetch(config.ajaxUrl, {\n      method: 'POST',\n      body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n      if (data.success) {\n        alert('\u2705 Order deleted!');\n        loadOrders();\n      } else {\n        alert('\u274c Failed to delete order');\n      }\n    });\n  };\n  \n  if (loading) {\n    return React.createElement('div', {className: \"text-center py-16\"},\n      React.createElement('div', {className: \"text-6xl mb-4\"}, \"\u23f3\"),\n      React.createElement('p', {className: \"text-2xl font-bold\"}, \"Loading orders...\")\n    );\n  }\n  \n  if (orders.length === 0) {\n    return React.createElement('div', {className: \"text-center py-16\"},\n      React.createElement('div', {className: \"text-8xl mb-6\"}, \"\ud83d\udce6\"),\n      React.createElement('p', {className: \"text-3xl font-bold wsp-text\"}, \"No orders yet\"),\n      React.createElement('p', {className: \"text-xl text-gray-500 mt-2\"}, \"Orders will appear here when customers place them\")\n    );\n  }\n  \n  return React.createElement('div', {className: \"space-y-4\"},\n    orders.map(order => {\n      const statusColor = order.order_status === 'pending' ? '#FFC107' : order.order_status === 'completed' ? '#4CAF50' : '#F44336';\n      const paymentStatusColor = order.payment_status === 'paid' ? '#4CAF50' : '#FFC107';\n      \n      return React.createElement('div', {\n        key: order.id,\n        className: \"bg-white rounded-2xl shadow-lg p-5 border-2 border-gray-200\"\n      },\n        React.createElement('div', {className: \"flex justify-between items-start mb-4\"},\n          React.createElement('div', null,\n  React.createElement('h3', {className: \"text-2xl font-bold wsp-text\"}, `Order #${order.order_number}`),\n  order.order_type && React.createElement('span', {\n    className: `inline-block px-3 py-1 rounded-full text-sm font-bold ml-3 ${order.order_type === 'takeaway' ? 'bg-orange-100 text-orange-700' : 'bg-blue-100 text-blue-700'}`\n  }, order.order_type === 'takeaway' ? '\ud83c\udfc3 TAKEAWAY' : '\ud83d\ude9a DELIVERY')\n),\n          React.createElement('div', {className: \"text-right\"},\n            React.createElement('div', {className: \"text-3xl font-bold\", style: {color: config.primaryColor}}, `${config.currency}${order.total}`),\n            React.createElement('div', {className: \"flex gap-2 mt-2\"},\n              React.createElement('span', {\n                className: \"px-3 py-1 rounded-full text-xs font-bold text-white\",\n                style: {background: statusColor}\n              }, order.order_status.toUpperCase()),\n              React.createElement('span', {\n                className: \"px-3 py-1 rounded-full text-xs font-bold text-white\",\n                style: {background: paymentStatusColor}\n              }, order.payment_status.toUpperCase())\n            )\n          )\n        ),\n\t\t\n        \n        React.createElement('div', {className: \"grid md:grid-cols-2 gap-4 mb-4\"},\n          React.createElement('div', null,\n            React.createElement('p', {className: \"font-bold mb-2\"}, \"\ud83d\udc64 Customer:\"),\n            React.createElement('p', null, order.customer_name),\n            React.createElement('p', null, `\ud83d\udcf1 ${order.customer_phone}`),\n            order.customer_email && React.createElement('p', null, `\u2709\ufe0f ${order.customer_email}`),\n            React.createElement('p', null, `\ud83d\udccd ${order.customer_address}`)\n          ),\n          React.createElement('div', null,\n            React.createElement('p', {className: \"font-bold mb-2\"}, \"\ud83d\udcb3 Payment:\"),\n            React.createElement('p', null, order.payment_method.toUpperCase()),\n            React.createElement('p', null, `\ud83d\udce6 Items: ${order.order_items.length}`),\n            React.createElement('p', null, `\ud83d\udcb0 Subtotal: ${config.currency}${order.subtotal}`),\n            order.tax > 0 && React.createElement('p', null, `\ud83d\udcca Tax: ${config.currency}${order.tax}`),\n            order.shipping > 0 && React.createElement('p', null, `\ud83d\ude9a Shipping: ${config.currency}${order.shipping}`)\n          )\n        ),\n        \n        React.createElement('details', {className: \"mb-4\"},\n          React.createElement('summary', {className: \"cursor-pointer font-bold p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition\"}, \"\ud83d\udccb View Order Items\"),\n          React.createElement('div', {className: \"mt-3 space-y-2\"},\n            order.order_items.map((item, idx) => {\n              const variation = item.selectedVariation ? ` (${item.selectedVariation.name})` : '';\n              const itemPrice = item.selectedVariation ? item.selectedVariation.price : (item.sale_price > 0 ? item.sale_price : item.price);\n              return React.createElement('div', {\n                key: idx,\n                className: \"flex justify-between items-center p-3 bg-gray-50 rounded-lg\"\n              },\n                React.createElement('div', null,\n                  React.createElement('span', {className: \"font-bold\"}, `${item.qty}x ${item.name}${variation}`),\n                  React.createElement('div', {className: \"text-sm text-gray-600\"}, `${config.currency}${itemPrice} each`)\n                ),\n                React.createElement('span', {className: \"font-bold text-lg\", style: {color: config.primaryColor}}, \n                  `${config.currency}${(itemPrice * item.qty).toFixed(2)}`\n                )\n              );\n            })\n          )\n        ),\n        \n        React.createElement('div', {className: \"flex gap-3 flex-wrap\"},\n          React.createElement('select', {\n            value: order.order_status,\n            onChange: (e) => updateOrderStatus(order.id, e.target.value, 'order_status'),\n            className: \"px-4 py-2 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\"\n          },\n            React.createElement('option', {value: \"pending\"}, \"Pending\"),\n            React.createElement('option', {value: \"processing\"}, \"Processing\"),\n            React.createElement('option', {value: \"completed\"}, \"Completed\"),\n            React.createElement('option', {value: \"cancelled\"}, \"Cancelled\")\n          ),\n          \n          React.createElement('select', {\n            value: order.payment_status,\n            onChange: (e) => updateOrderStatus(order.id, e.target.value, 'payment_status'),\n            className: \"px-4 py-2 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\"\n          },\n            React.createElement('option', {value: \"pending\"}, \"Payment Pending\"),\n            React.createElement('option', {value: \"paid\"}, \"Paid\"),\n            React.createElement('option', {value: \"refunded\"}, \"Refunded\")\n          ),\n          \n          React.createElement('button', {\n            onClick: () => deleteOrder(order.id),\n            className: \"px-4 py-2 bg-red-500 text-white rounded-xl font-bold hover:bg-red-600 transition ml-auto\"\n          }, \"\ud83d\uddd1\ufe0f Delete\")\n        )\n      );\n    })\n  );\n}\n\n\/\/ Admin View Component (UPDATED with Orders Tab and simplified structure)\nfunction AdminView({ products, categories, saveProduct, deleteProduct, loadCategories }) {\n  const [activeTab, setActiveTab] = React.useState('products');\n  const [show, setShow] = React.useState(false);\n  const [editing, setEditing] = React.useState(null);\n  const [editingProductId, setEditingProductId] = React.useState(null);\n  const [form, setForm] = React.useState({ \n    id: 0, name: '', price: '', sale_price: '', category: '', images: [], \n    image_url: '', description: '', stock: 10, type: 'simple', variations: [], featured: 0 \n  });\n  const [saving, setSaving] = React.useState(false);\n  \n  \/\/ Search and filter states\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [selectedCategory, setSelectedCategory] = React.useState('All');\n  const [sortedProducts, setSortedProducts] = React.useState([]);\n  const [draggedItem, setDraggedItem] = React.useState(null);\n  \n  \/\/ NEW: Category ordering states\n  const [sortedCategories, setSortedCategories] = React.useState([]);\n  const [draggedCategory, setDraggedCategory] = React.useState(null);\n  const [showCategoryManager, setShowCategoryManager] = React.useState(false);\n\n  \/\/ Initialize sorted products\n  React.useEffect(() => {\n    setSortedProducts([...products]);\n  }, [products]);\n\n  \/\/ Initialize sorted categories\n  React.useEffect(() => {\n    setSortedCategories([...categories]);\n  }, [categories]);\n\n  if (!config.canManage) {\n    return React.createElement('div', {className: \"text-center py-24 bg-white rounded-3xl shadow-xl p-8\"},\n      React.createElement('div', {className: \"text-8xl mb-6\"}, \"\ud83d\udd12\"),\n      React.createElement('h2', {className: \"text-3xl font-bold wsp-text mb-4\"}, \"Access Denied\"),\n      React.createElement('p', {className: \"text-xl text-gray-600 mb-6\"}, \"You need Administrator or Retailer permissions\"),\n      React.createElement('a', {\n        href: config.loginUrl,\n        className: \"inline-block px-8 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n      }, \"Login\")\n    );\n  }\n\n  const handleEdit = (product, event) => {\n    if (event && event.target.closest('.delete-button')) {\n      return;\n    }\n    \n    setEditing(product);\n    setEditingProductId(product.id);\n    setForm({\n      id: product.id,\n      name: product.name,\n      price: product.price,\n      sale_price: product.sale_price || '',\n      category: product.category,\n      images: product.images || [],\n      image_url: product.image_url || '',\n      description: product.description || '',\n      stock: product.stock,\n      type: product.type,\n      variations: product.variations || [],\n      featured: product.featured || 0\n    });\n    setShow(true);\n    \n    \/\/ Scroll to the product card after a short delay\n    setTimeout(() => {\n      const productElement = document.getElementById(`product-${product.id}`);\n      if (productElement) {\n        productElement.scrollIntoView({ behavior: 'smooth', block: 'center' });\n      }\n    }, 100);\n  };\n\n  const handleImage = (e) => {\n    const files = Array.from(e.target.files);\n    const currentImages = form.images || [];\n    \n    if (currentImages.length + files.length > config.maxImages) {\n      alert(`Maximum ${config.maxImages} images allowed`);\n      return;\n    }\n\n    files.forEach(file => {\n      const reader = new FileReader();\n      reader.onload = (ev) => {\n        setForm(prev => ({\n          ...prev,\n          images: [...(prev.images || []), ev.target.result]\n        }));\n      };\n      reader.readAsDataURL(file);\n    });\n  };\n\n  const removeImage = (index) => {\n    setForm(prev => ({\n      ...prev,\n      images: prev.images.filter((_, i) => i !== index)\n    }));\n  };\n\n  const handleSave = () => {\n    if (!form.name || !form.price) {\n      alert('Fill required fields: name and price');\n      return;\n    }\n    \n    if (!form.image_url && (!form.images || form.images.length === 0)) {\n      alert('Add at least one image or image URL');\n      return;\n    }\n    \n    setSaving(true);\n    \n    const productData = {\n      ...form,\n      price: parseFloat(form.price),\n      sale_price: parseFloat(form.sale_price) || 0,\n      stock: parseInt(form.stock) || 0,\n      featured: parseInt(form.featured) || 0\n    };\n\n    saveProduct(productData);\n\n    setTimeout(() => {\n      setForm({ \n        id: 0, name: '', price: '', sale_price: '', category: '', images: [], \n        image_url: '', description: '', stock: 10, type: 'simple', variations: [], featured: 0 \n      });\n      setEditing(null);\n      setEditingProductId(null);\n      setShow(false);\n      setSaving(false);\n    }, 1000);\n  };\n\n  const handleCancelEdit = () => {\n    setShow(false);\n    setEditing(null);\n    setEditingProductId(null);\n    setForm({ \n      id: 0, name: '', price: '', sale_price: '', category: '', images: [], \n      image_url: '', description: '', stock: 10, type: 'simple', variations: [], featured: 0 \n    });\n  };\n\n  const handleDeleteCategory = (categoryName) => {\n    if (!config.isAdmin) {\n      alert('Only administrators can delete categories');\n      return;\n    }\n    \n    const productsInCategory = products.filter(p => p.category === categoryName);\n    \n    if (productsInCategory.length > 0) {\n      if (!confirm(`This category has ${productsInCategory.length} product(s). Deleting the category will remove the category from all these products. Continue?`)) {\n        return;\n      }\n    } else {\n      if (!confirm(`Delete category \"${categoryName}\"?`)) {\n        return;\n      }\n    }\n    \n    const formData = new FormData();\n    formData.append('action', 'wsp_delete_category');\n    formData.append('category', categoryName);\n    \n    fetch(config.ajaxUrl, {\n      method: 'POST',\n      body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n      if (data.success) {\n        alert('\u2705 Category deleted successfully!');\n        loadCategories();\n        window.location.reload();\n      } else {\n        alert('Error: ' + (data.data || 'Failed to delete category'));\n      }\n    })\n    .catch(err => {\n      console.error('Error:', err);\n      alert('Failed to delete category');\n    });\n  };\n\n  \/\/ Product drag and drop handlers\n  const handleDragStart = (e, product, index) => {\n    setDraggedItem({ product, index });\n    e.dataTransfer.effectAllowed = 'move';\n  };\n\n  const handleDragOver = (e, index) => {\n    e.preventDefault();\n    e.dataTransfer.dropEffect = 'move';\n    \n    if (draggedItem && draggedItem.index !== index) {\n      const newProducts = [...sortedProducts];\n      const draggedProduct = newProducts[draggedItem.index];\n      \n      newProducts.splice(draggedItem.index, 1);\n      newProducts.splice(index, 0, draggedProduct);\n      \n      setSortedProducts(newProducts);\n      setDraggedItem({ ...draggedItem, index });\n    }\n  };\n\n  const handleDragEnd = () => {\n    setDraggedItem(null);\n  };\n\n  const handleDrop = (e) => {\n    e.preventDefault();\n    setDraggedItem(null);\n  };\n\n  const saveProductOrder = () => {\n    if (!config.isAdmin) {\n      alert('Only administrators can reorder products');\n      return;\n    }\n    \n    const orderData = sortedProducts.map((p, idx) => ({\n      id: p.id,\n      sort_order: idx\n    }));\n    \n    const formData = new FormData();\n    formData.append('action', 'wsp_save_product_order');\n    formData.append('order_data', JSON.stringify(orderData));\n    \n    fetch(config.ajaxUrl, {\n      method: 'POST',\n      body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n      if (data.success) {\n        alert('\u2705 Product order saved!');\n      } else {\n        alert('Error saving order');\n      }\n    })\n    .catch(err => {\n      console.error('Error:', err);\n      alert('Failed to save order');\n    });\n  };\n\n  \/\/ NEW: Category drag and drop handlers\n  const handleCategoryDragStart = (e, category, index) => {\n    setDraggedCategory({ category, index });\n    e.dataTransfer.effectAllowed = 'move';\n  };\n\n  const handleCategoryDragOver = (e, index) => {\n    e.preventDefault();\n    e.dataTransfer.dropEffect = 'move';\n    \n    if (draggedCategory && draggedCategory.index !== index) {\n      const newCategories = [...sortedCategories];\n      const draggedCat = newCategories[draggedCategory.index];\n      \n      newCategories.splice(draggedCategory.index, 1);\n      newCategories.splice(index, 0, draggedCat);\n      \n      setSortedCategories(newCategories);\n      setDraggedCategory({ ...draggedCategory, index });\n    }\n  };\n\n  const handleCategoryDragEnd = () => {\n    setDraggedCategory(null);\n  };\n\n  const handleCategoryDrop = (e) => {\n    e.preventDefault();\n    setDraggedCategory(null);\n  };\n\n  \/\/ NEW: Save category order\n  const saveCategoryOrder = () => {\n    if (!config.isAdmin) {\n      alert('Only administrators can reorder categories');\n      return;\n    }\n    \n    const formData = new FormData();\n    formData.append('action', 'wsp_save_category_order');\n    formData.append('categories', JSON.stringify(sortedCategories));\n    \n    fetch(config.ajaxUrl, {\n      method: 'POST',\n      body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n      if (data.success) {\n        alert('\u2705 Category order saved!');\n        setShowCategoryManager(false);\n        loadCategories();\n      } else {\n        alert('Error saving category order');\n      }\n    })\n    .catch(err => {\n      console.error('Error:', err);\n      alert('Failed to save category order');\n    });\n  };\n\n  \/\/ Filter products\n  const filteredProducts = sortedProducts.filter(p => {\n    const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n                         p.description.toLowerCase().includes(searchQuery.toLowerCase());\n    const matchesCategory = selectedCategory === 'All' || p.category === selectedCategory;\n    return matchesSearch && matchesCategory;\n  });\n\n  \/\/ Group products by category\n  const productsByCategory = {};\n  sortedCategories.forEach(cat => {\n    productsByCategory[cat] = sortedProducts.filter(p => p.category === cat);\n  });\n  productsByCategory['All'] = sortedProducts;\n\n  const canViewOrders = config.userPermissions.view_orders === true;\n\n  \/\/ Render edit form inline with product\n  const renderEditForm = (product) => {\n    if (editingProductId !== product.id || !show) return null;\n    \n    return React.createElement('div', {className: \"mt-4 bg-gradient-to-br from-yellow-50 to-orange-50 p-6 rounded-2xl border-2 border-orange-300 shadow-lg\"},\n      React.createElement('h4', {className: \"text-xl font-bold mb-4 text-orange-900 flex items-center gap-2\"},\n        React.createElement('span', null, \"\u270f\ufe0f\"),\n        \"Editing: \", product.name\n      ),\n      \n      React.createElement('div', {className: \"space-y-4\"},\n        React.createElement('div', {className: \"grid grid-cols-1 md:grid-cols-2 gap-4\"},\n          React.createElement('div', null,\n            React.createElement('label', {className: \"block font-bold text-sm mb-1\"}, \"\ud83d\udcdd Product Name *\"),\n            React.createElement('input', {\n              type: \"text\",\n              value: form.name,\n              onChange: (e) => setForm({...form, name: e.target.value}),\n              className: \"w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-orange-500 transition\"\n            })\n          ),\n          \n          config.permissions.category && React.createElement('div', null,\n  React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83d\uddc2\ufe0f Category\"),\n  React.createElement('div', {className: \"flex gap-2\"},\n    React.createElement('select', {\n      value: form.category,\n      onChange: (e) => setForm({...form, category: e.target.value}),\n      className: \"flex-1 px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-lg\"\n    },\n      React.createElement('option', {value: \"\"}, \"Select category\"),\n      sortedCategories.map(cat => \n        React.createElement('option', {key: cat, value: cat}, cat)\n      )\n    ),\n    config.isAdmin && React.createElement('button', {\n      type: \"button\",\n      onClick: () => {\n        const newCat = prompt('Enter new category name:');\n        if (newCat && newCat.trim()) {\n          const formData = new FormData();\n          formData.append('action', 'wsp_add_category');\n          formData.append('category', newCat.trim());\n          \n          fetch(config.ajaxUrl, {\n            method: 'POST',\n            body: formData\n          })\n          .then(res => res.json())\n          .then(data => {\n            if (data.success) {\n              loadCategories();\n              setForm({...form, category: newCat.trim()});\n              alert('\u2705 Category added!');\n            } else {\n              alert('Error adding category');\n            }\n          })\n          .catch(err => {\n            console.error('Error:', err);\n            alert('Failed to add category');\n          });\n        }\n      },\n      className: \"px-4 py-3 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition font-bold whitespace-nowrap\"\n    }, \"\u2795 Add\")\n  )\n  )\n),\n\n        config.permissions.variable_products && React.createElement('div', null,\n          React.createElement('label', {className: \"block font-bold text-sm mb-1\"}, \"\ud83d\udce6 Product Type\"),\n          React.createElement('select', {\n            value: form.type,\n            onChange: (e) => setForm({...form, type: e.target.value, variations: e.target.value === 'simple' ? [] : form.variations}),\n            className: \"w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-orange-500 transition\"\n          },\n            React.createElement('option', {value: \"simple\"}, \"Simple Product\"),\n            React.createElement('option', {value: \"variable\"}, \"Variable Product\")\n          )\n        ),\n\n        form.type === 'simple' && React.createElement('div', {className: \"grid grid-cols-1 md:grid-cols-2 gap-4\"},\n          config.permissions.regular_price && React.createElement('div', null,\n            React.createElement('label', {className: \"block font-bold text-sm mb-1\"}, \"\ud83d\udcb0 Regular Price *\"),\n            React.createElement('input', {\n              type: \"number\",\n              value: form.price,\n              onChange: (e) => setForm({...form, price: e.target.value}),\n              className: \"w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-orange-500 transition\",\n              step: \"0.01\",\n              min: \"0\"\n            })\n          ),\n          config.permissions.sale_price && React.createElement('div', null,\n            React.createElement('label', {className: \"block font-bold text-sm mb-1\"}, \"\ud83c\udff7\ufe0f Sale Price\"),\n            React.createElement('input', {\n              type: \"number\",\n              value: form.sale_price,\n              onChange: (e) => setForm({...form, sale_price: e.target.value}),\n              className: \"w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-orange-500 transition\",\n              step: \"0.01\",\n              min: \"0\"\n            })\n          )\n        ),\n\n        form.type === 'variable' && config.permissions.variable_products && React.createElement('div', null,\n          React.createElement('label', {className: \"block font-bold text-sm mb-1\"}, \"\ud83c\udfa8 Variations\"),\n          React.createElement('div', {className: \"space-y-2 mb-2\"},\n            form.variations.map((v, idx) =>\n              React.createElement('div', {key: idx, className: \"flex gap-2 items-center\"},\n                React.createElement('input', {\n                  type: \"text\",\n                  value: v.name,\n                  onChange: (e) => {\n                    const newVars = [...form.variations];\n                    newVars[idx].name = e.target.value;\n                    setForm({...form, variations: newVars});\n                  },\n                  className: \"flex-1 px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-purple-500 transition\",\n                  placeholder: \"Variation name\"\n                }),\n                React.createElement('input', {\n                  type: \"number\",\n                  value: v.price,\n                  onChange: (e) => {\n                    const newVars = [...form.variations];\n                    newVars[idx].price = e.target.value;\n                    setForm({...form, variations: newVars});\n                  },\n                  className: \"w-24 px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-purple-500 transition\",\n                  placeholder: \"Price\",\n                  step: \"0.01\"\n                }),\n                React.createElement('button', {\n                  onClick: () => setForm({...form, variations: form.variations.filter((_, i) => i !== idx)}),\n                  className: \"px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition\"\n                }, \"\ud83d\uddd1\ufe0f\")\n              )\n            )\n          ),\n          React.createElement('button', {\n            onClick: () => setForm({...form, variations: [...form.variations, {name: '', price: ''}]}),\n            className: \"w-full px-3 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition text-sm\"\n          }, \"\u2795 Add Variation\")\n        ),\n\n        React.createElement('div', {className: \"grid grid-cols-1 md:grid-cols-2 gap-4\"},\n          config.permissions.stock && React.createElement('div', null,\n            React.createElement('label', {className: \"block font-bold text-sm mb-1\"}, \"\ud83d\udce6 Stock\"),\n            React.createElement('input', {\n              type: \"number\",\n              value: form.stock,\n              onChange: (e) => setForm({...form, stock: e.target.value}),\n              className: \"w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-orange-500 transition\",\n              min: \"0\"\n            })\n          ),\n          \n          React.createElement('div', null,\n            React.createElement('label', {className: \"flex items-center gap-2 cursor-pointer mt-6\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: form.featured == 1,\n                onChange: (e) => setForm({...form, featured: e.target.checked ? 1 : 0}),\n                className: \"w-4 h-4\"\n              }),\n              React.createElement('span', {className: \"font-bold text-sm\"}, \"\u2b50 Featured\")\n            )\n          )\n        ),\n\n        config.permissions.description && React.createElement('div', null,\n          React.createElement('label', {className: \"block font-bold text-sm mb-1\"}, \"\ud83d\udcc4 Description\"),\n          React.createElement('textarea', {\n            value: form.description,\n            onChange: (e) => setForm({...form, description: e.target.value}),\n            className: \"w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-orange-500 transition\",\n            rows: 3\n          })\n        ),\n\n        config.permissions.image_url && React.createElement('div', null,\n          React.createElement('label', {className: \"block font-bold text-sm mb-1\"}, \"\ud83d\udd17 Main Image URL\"),\n          React.createElement('input', {\n            type: \"url\",\n            value: form.image_url,\n            onChange: (e) => setForm({...form, image_url: e.target.value}),\n            className: \"w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-orange-500 transition\"\n          }),\n          form.image_url && React.createElement('img', {\n            src: form.image_url,\n            alt: \"Preview\",\n            className: \"mt-2 w-20 h-20 object-cover rounded-lg\"\n          })\n        ),\n\n        config.permissions.image_upload && React.createElement('div', null,\n          React.createElement('label', {className: \"block font-bold text-sm mb-1\"}, \n            `\ud83d\udcf8 Images (${form.images.length}\/${config.maxImages})`\n          ),\n          React.createElement('input', {\n            type: \"file\",\n            onChange: handleImage,\n            accept: \"image\/*\",\n            multiple: true,\n            className: \"w-full px-3 py-2 border-2 border-dashed border-gray-300 rounded-lg text-sm\",\n            disabled: form.images.length >= config.maxImages\n          }),\n          form.images.length > 0 && React.createElement('div', {className: \"grid grid-cols-4 gap-2 mt-2\"},\n            form.images.map((img, idx) =>\n              React.createElement('div', {key: idx, className: \"relative group\"},\n                React.createElement('img', {\n                  src: img,\n                  alt: `Image ${idx + 1}`,\n                  className: \"w-full aspect-square object-cover rounded-lg\"\n                }),\n                React.createElement('button', {\n                  onClick: () => removeImage(idx),\n                  className: \"absolute -top-1 -right-1 w-6 h-6 bg-red-500 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition\"\n                }, \"\u00d7\")\n              )\n            )\n          )\n        ),\n\n        React.createElement('div', {className: \"flex gap-3 pt-2\"},\n          React.createElement('button', {\n            onClick: handleSave,\n            disabled: saving,\n            className: \"flex-1 px-4 py-3 wsp-primary wsp-button-text rounded-xl font-bold hover:shadow-lg transition disabled:opacity-50\"\n          }, saving ? '\u23f3 Saving...' : '\ud83d\udcbe Update Product'),\n          React.createElement('button', {\n            onClick: handleCancelEdit,\n            className: \"px-4 py-3 bg-gray-300 text-gray-700 rounded-xl font-bold hover:bg-gray-400 transition\"\n          }, \"Cancel\")\n        )\n      )\n    );\n  };\n\n  return React.createElement('div', {className: \"space-y-8\"},\n    React.createElement('div', {className: \"bg-gradient-to-r from-blue-50 to-indigo-50 rounded-3xl p-6 sm:p-8 border-2 border-blue-200 shadow-lg\"},\n      React.createElement('h2', {className: \"text-2xl sm:text-3xl font-bold mb-3 text-blue-900\"}, \"\u2699\ufe0f Admin Panel\"),\n      React.createElement('p', {className: \"text-lg sm:text-xl text-blue-700\"}, \n        \"Products: \", React.createElement('strong', null, config.isAdmin ? '\u221e' : `${products.length}\/${config.maxProducts}`), \n        \" | Max Images: \", React.createElement('strong', null, config.maxImages)\n      )\n    ),\n\n    React.createElement('div', {className: \"bg-white rounded-3xl shadow-xl overflow-hidden\"},\n      React.createElement('div', {className: \"flex border-b border-gray-200 bg-gray-50\"},\n        React.createElement('button', {\n          onClick: () => setActiveTab('products'),\n          className: `px-6 py-4 font-bold transition ${activeTab === 'products' ? 'wsp-primary text-white' : 'text-gray-700 hover:bg-gray-200'}`\n        }, \"\ud83d\udce6 Products\"),\n        \n        canViewOrders && React.createElement('button', {\n          onClick: () => setActiveTab('orders'),\n          className: `px-6 py-4 font-bold transition ${activeTab === 'orders' ? 'wsp-primary text-white' : 'text-gray-700 hover:bg-gray-200'}`\n        }, \"\ud83d\uded2 Orders\")\n      ),\n      \n      React.createElement('div', {className: \"p-6 sm:p-8\"},\n        activeTab === 'products' ? React.createElement('div', null,\n          React.createElement('div', {className: \"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8\"},\n            React.createElement('h2', {className: \"text-3xl sm:text-4xl font-bold wsp-text\"}, `\ud83d\udce6 Products (${filteredProducts.length})`),\n            React.createElement('div', {className: \"flex flex-wrap gap-3\"},\n              config.isAdmin && sortedCategories.length > 0 && React.createElement('button', {\n                onClick: () => setShowCategoryManager(!showCategoryManager),\n                className: \"px-6 py-4 bg-indigo-500 text-white rounded-2xl font-bold text-lg shadow-lg hover:shadow-2xl transition\"\n              }, \"\ud83d\uddc2\ufe0f Manage Categories\"),\n              config.isAdmin && sortedProducts.length > 0 && React.createElement('button', {\n                onClick: saveProductOrder,\n                className: \"px-6 py-4 bg-purple-500 text-white rounded-2xl font-bold text-lg shadow-lg hover:shadow-2xl transition\"\n              }, \"\ud83d\udcbe Save Order\"),\n              React.createElement('button', {\n                onClick: () => { \n                  setShow(!show); \n                  setEditing(null);\n                  setEditingProductId(null);\n                  setForm({ id: 0, name: '', price: '', sale_price: '', category: '', images: [], image_url: '', description: '', stock: 10, type: 'simple', variations: [], featured: 0 }); \n                },\n                className: \"px-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n              }, show && !editingProductId ? \"\u2716 Cancel\" : \"\u2795 Add Product\")\n            )\n          ),\n\n          \/\/ NEW: Category Manager Modal\n          showCategoryManager && React.createElement('div', {\n            className: \"fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4\",\n            onClick: () => setShowCategoryManager(false)\n          },\n            React.createElement('div', {\n              className: \"bg-white rounded-3xl w-full max-w-2xl max-h-[80vh] overflow-y-auto shadow-2xl\",\n              onClick: (e) => e.stopPropagation()\n            },\n              React.createElement('div', {className: \"wsp-primary text-white p-6 flex justify-between items-center\"},\n                React.createElement('h3', {className: \"text-2xl font-bold\"}, \"\ud83d\uddc2\ufe0f Manage Category Order\"),\n                React.createElement('button', {\n                  onClick: () => setShowCategoryManager(false),\n                  className: \"text-4xl hover:scale-110 transition\"\n                }, \"\u00d7\")\n              ),\n              \n              React.createElement('div', {className: \"p-6\"},\n                React.createElement('p', {className: \"text-gray-600 mb-4\"}, \n                  \"Drag categories to reorder them. This order will be shown to customers.\"\n                ),\n                \n                React.createElement('div', {className: \"space-y-3 mb-6\"},\n                  sortedCategories.map((cat, idx) =>\n                    React.createElement('div', {\n                      key: cat,\n                      draggable: true,\n                      onDragStart: (e) => handleCategoryDragStart(e, cat, idx),\n                      onDragOver: (e) => handleCategoryDragOver(e, idx),\n                      onDragEnd: handleCategoryDragEnd,\n                      onDrop: handleCategoryDrop,\n                      className: `flex items-center gap-4 p-4 border-2 border-gray-300 rounded-xl cursor-move hover:border-indigo-500 hover:shadow-lg transition ${draggedCategory?.index === idx ? 'opacity-50' : ''}`\n                    },\n                      React.createElement('span', {className: \"text-2xl text-gray-400\"}, \"\u22ee\u22ee\"),\n                      React.createElement('span', {className: \"flex-1 font-bold text-lg\"}, cat),\n                      React.createElement('span', {className: \"px-3 py-1 bg-gray-100 rounded-full text-sm font-semibold\"}, \n                        `${productsByCategory[cat]?.length || 0} products`\n                      ),\n                      React.createElement('button', {\n                        onClick: (e) => {\n                          e.stopPropagation();\n                          handleDeleteCategory(cat);\n                        },\n                        className: \"px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition\"\n                      }, \"\ud83d\uddd1\ufe0f\")\n                    )\n                  )\n                ),\n                \n                React.createElement('div', {className: \"flex gap-3\"},\n                  React.createElement('button', {\n                    onClick: saveCategoryOrder,\n                    className: \"flex-1 px-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-lg shadow-lg hover:shadow-2xl transition\"\n                  }, \"\ud83d\udcbe Save Category Order\"),\n                  React.createElement('button', {\n                    onClick: () => setShowCategoryManager(false),\n                    className: \"px-6 py-4 bg-gray-300 text-gray-700 rounded-2xl font-bold text-lg hover:bg-gray-400 transition\"\n                  }, \"Cancel\")\n                )\n              )\n            )\n          ),\n\n          \/\/ Search and Filter Bar\n          React.createElement('div', {className: \"bg-gradient-to-r from-purple-50 to-pink-50 rounded-2xl p-6 mb-6 border-2 border-purple-200\"},\n            React.createElement('div', {className: \"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\"},\n              React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-purple-900\"}, \"\ud83d\udd0d Search Products\"),\n                React.createElement('input', {\n                  type: \"text\",\n                  value: searchQuery,\n                  onChange: (e) => setSearchQuery(e.target.value),\n                  placeholder: \"Search by name or description...\",\n                  className: \"w-full px-4 py-3 border-2 border-purple-300 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 transition text-lg\"})\n              ),\n              React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-purple-900\"}, \"\ud83d\uddc2\ufe0f Filter by Category\"),\n                React.createElement('select', {\n                  value: selectedCategory,\n                  onChange: (e) => setSelectedCategory(e.target.value),\n                  className: \"w-full px-4 py-3 border-2 border-purple-300 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 transition text-lg\"\n                },\n                  React.createElement('option', {value: \"All\"}, \"All Categories\"),\n                  sortedCategories.map(cat => React.createElement('option', {key: cat, value: cat}, cat))\n                )\n              )\n            ),\n            React.createElement('div', {className: \"flex justify-between items-center\"},\n              React.createElement('p', {className: \"text-purple-700 font-semibold\"}, \n                `Showing ${filteredProducts.length} of ${products.length} products`\n              ),\n              searchQuery && React.createElement('button', {\n                onClick: () => setSearchQuery(''),\n                className: \"px-4 py-2 bg-purple-500 text-white rounded-xl font-bold hover:bg-purple-600 transition\"\n              }, \"Clear Search\")\n            )\n          ),\n\n          \/\/ Category Tabs\n          sortedCategories.length > 0 && React.createElement('div', {className: \"bg-gray-50 rounded-2xl p-4 mb-6 border-2 border-gray-200\"},\n            React.createElement('div', {className: \"flex items-center justify-between mb-3\"},\n              React.createElement('h3', {className: \"font-bold text-xl text-gray-800\"}, \"\ud83d\udcd1 Categories\"),\n              config.isAdmin && React.createElement('p', {className: \"text-sm text-gray-600\"}, \"Click category to filter\")\n            ),\n            React.createElement('div', {className: \"flex flex-wrap gap-3\"},\n              React.createElement('button', {\n                onClick: () => setSelectedCategory('All'),\n                className: `px-4 py-2 rounded-xl font-bold transition ${selectedCategory === 'All' ? 'wsp-primary wsp-button-text' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}`\n              }, `All (${products.length})`),\n              sortedCategories.map(cat => \n                React.createElement('button', {\n                  key: cat,\n                  onClick: () => setSelectedCategory(cat),\n                  className: `px-4 py-2 rounded-xl font-bold transition ${selectedCategory === cat ? 'wsp-primary wsp-button-text' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}`\n                }, `${cat} (${productsByCategory[cat]?.length || 0})`)\n              )\n            )\n          ),\n\n          \/\/ Add Product Form (only when adding new, not editing)\n          show && !editingProductId && React.createElement('div', {className: \"bg-gradient-to-br from-green-50 to-emerald-50 p-6 sm:p-8 rounded-3xl mb-8 border-2 border-green-300 shadow-lg\"},\n            React.createElement('h3', {className: \"text-2xl sm:text-3xl font-bold mb-6 text-green-900\"}, '\u2728 New Product'),\n            \n            React.createElement('div', {className: \"space-y-6\"},\n              React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83d\udcdd Product Name *\"),\n                React.createElement('input', {\n                  type: \"text\",\n                  value: form.name,\n                  onChange: (e) => setForm({...form, name: e.target.value}),\n                  className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-lg\",\n                  placeholder: \"Enter product name\"\n                })\n              ),\n\n              config.permissions.category && React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83d\uddc2\ufe0f Category\"),\n                React.createElement('select', {\n                  value: form.category,\n                  onChange: (e) => setForm({...form, category: e.target.value}),\n                  className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-lg\"\n                },\n                  React.createElement('option', {value: \"\"}, \"Select category\"),\n                  sortedCategories.map(cat => \n                    React.createElement('option', {key: cat, value: cat}, cat)\n                  )\n                )\n              ),\n\n              config.permissions.variable_products && React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83d\udce6 Product Type\"),\n                React.createElement('select', {\n                  value: form.type,\n                  onChange: (e) => setForm({...form, type: e.target.value, variations: e.target.value === 'simple' ? [] : form.variations}),\n                  className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-lg\"\n                },\n                  React.createElement('option', {value: \"simple\"}, \"Simple Product\"),\n                  React.createElement('option', {value: \"variable\"}, \"Variable Product\")\n                )\n              ),\n\n              form.type === 'simple' && React.createElement('div', {className: \"grid grid-cols-1 sm:grid-cols-2 gap-6\"},\n                config.permissions.regular_price && React.createElement('div', null,\n                  React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83d\udcb0 Regular Price *\"),\n                  React.createElement('input', {\n                    type: \"number\",\n                    value: form.price,\n                    onChange: (e) => setForm({...form, price: e.target.value}),\n                    className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-lg\",\n                    placeholder: \"0.00\",\n                    step: \"0.01\",\n                    min: \"0\"\n                  })\n                ),\n                config.permissions.sale_price && React.createElement('div', null,\n                  React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83c\udff7\ufe0f Sale Price\"),\n                  React.createElement('input', {\n                    type: \"number\",\n                    value: form.sale_price,\n                    onChange: (e) => setForm({...form, sale_price: e.target.value}),\n                    className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-lg\",\n                    placeholder: \"Leave empty for no sale\",\n                    step: \"0.01\",\n                    min: \"0\"\n                  })\n                )\n              ),\n\n              form.type === 'variable' && config.permissions.variable_products && React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83c\udfa8 Variations\"),\n                React.createElement('div', {className: \"space-y-3 mb-3\"},\n                  form.variations.map((v, idx) =>\n                    React.createElement('div', {key: idx, className: \"flex gap-3 items-center\"},\n                      React.createElement('input', {\n                        type: \"text\",\n                        value: v.name,\n                        onChange: (e) => {\n                          const newVars = [...form.variations];\n                          newVars[idx].name = e.target.value;\n                          setForm({...form, variations: newVars});\n                        },\n                        className: \"flex-1 px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 transition text-lg\",\n                        placeholder: \"Variation name\"\n                      }),\n                      React.createElement('input', {\n                        type: \"number\",\n                        value: v.price,\n                        onChange: (e) => {\n                          const newVars = [...form.variations];\n                          newVars[idx].price = e.target.value;\n                          setForm({...form, variations: newVars});\n                        },\n                        className: \"w-32 px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 transition text-lg\",\n                        placeholder: \"Price\",\n                        step: \"0.01\",\n                        min: \"0\"\n                      }),\n                      React.createElement('button', {\n                        onClick: () => setForm({...form, variations: form.variations.filter((_, i) => i !== idx)}),\n                        className: \"px-4 py-3 bg-red-500 text-white rounded-xl hover:bg-red-600 transition font-bold text-lg\"\n                      }, \"\ud83d\uddd1\ufe0f\")\n                    )\n                  )\n                ),\n                React.createElement('button', {\n                  onClick: () => setForm({...form, variations: [...form.variations, {name: '', price: ''}]}),\n                  className: \"w-full px-4 py-3 bg-purple-500 text-white rounded-xl hover:bg-purple-600 transition font-bold text-lg\"\n                }, \"\u2795 Add Variation\")\n              ),\n\n              config.permissions.stock && React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83d\udce6 Stock Quantity\"),\n                React.createElement('input', {\n                  type: \"number\",\n                  value: form.stock,\n                  onChange: (e) => setForm({...form, stock: e.target.value}),\n                  className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-lg\",\n                  placeholder: \"10\",\n                  min: \"0\"\n                })\n              ),\n\n              config.permissions.description && React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83d\udcc4 Description\"),\n                React.createElement('textarea', {\n                  value: form.description,\n                  onChange: (e) => setForm({...form, description: e.target.value}),\n                  className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-lg\",\n                  rows: 4,\n                  placeholder: \"Product description...\"\n                })\n              ),\n\n              config.permissions.image_url && React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \"\ud83d\udd17 Main Image URL\"),\n                React.createElement('input', {\n                  type: \"url\",\n                  value: form.image_url,\n                  onChange: (e) => setForm({...form, image_url: e.target.value}),\n                  className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition text-lg\",\n                  placeholder: \"https:\/\/example.com\/image.jpg\"\n                }),\n                form.image_url && React.createElement('img', {\n                  src: form.image_url,\n                  alt: \"Preview\",\n                  className: \"mt-3 w-32 h-32 object-cover rounded-xl shadow-md\"\n                })\n              ),\n\n              config.permissions.image_upload && React.createElement('div', null,\n                React.createElement('label', {className: \"block font-bold text-lg mb-2 text-gray-700\"}, \n                  `\ud83d\udcf8 Additional Images (Max ${config.maxImages}, Current: ${form.images.length})`\n                ),\n                React.createElement('input', {\n                  type: \"file\",\n                  onChange: handleImage,\n                  accept: \"image\/*\",\n                  multiple: true,\n                  className: \"w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-xl focus:border-green-500 transition text-lg cursor-pointer\",\n                  disabled: form.images.length >= config.maxImages\n                }),\n                form.images.length > 0 && React.createElement('div', {className: \"grid grid-cols-3 sm:grid-cols-4 gap-3 mt-4\"},\n                  form.images.map((img, idx) =>\n                    React.createElement('div', {key: idx, className: \"relative group\"},\n                      React.createElement('img', {\n                        src: img,\n                        alt: `Image ${idx + 1}`,\n                        className: \"w-full aspect-square object-cover rounded-xl shadow-md\"\n                      }),\n                      React.createElement('button', {\n                        onClick: () => removeImage(idx),\n                        className: \"absolute -top-2 -right-2 w-8 h-8 bg-red-500 text-white rounded-full font-bold opacity-0 group-hover:opacity-100 transition\"\n                      }, \"\u00d7\")\n                    )\n                  )\n                )\n              ),\n\n              React.createElement('div', null,\n                React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer\"},\n                  React.createElement('input', {\n                    type: \"checkbox\",\n                    checked: form.featured == 1,\n                    onChange: (e) => setForm({...form, featured: e.target.checked ? 1 : 0}),\n                    className: \"w-5 h-5\"\n                  }),\n                  React.createElement('span', {className: \"font-bold text-lg\"}, \"\u2b50 Featured Product\")\n                )\n              ),\n\n              React.createElement('div', {className: \"flex gap-4 mt-8\"},\n                React.createElement('button', {\n                  onClick: handleSave,\n                  disabled: saving,\n                  className: \"flex-1 px-8 py-5 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition disabled:opacity-50\"\n                }, saving ? '\u23f3 Saving...' : '\u2705 Add Product'),\n                React.createElement('button', {\n                  onClick: handleCancelEdit,\n                  className: \"px-8 py-5 bg-gray-300 text-gray-700 rounded-2xl font-bold text-xl shadow-md hover:shadow-lg transition\"\n                }, \"Cancel\")\n              )\n            )\n          ),\n\n          \/\/ Products List\n          React.createElement('div', {className: \"space-y-4\"},\n            filteredProducts.length === 0 ? \n              React.createElement('div', {className: \"text-center py-16 bg-gray-50 rounded-2xl\"},\n                React.createElement('div', {className: \"text-6xl mb-4\"}, \"\ud83d\udce6\"),\n                React.createElement('p', {className: \"text-2xl wsp-text font-bold\"}, \n                  searchQuery ? \"No products found\" : (show ? \"Add your first product above\" : \"No products yet\")\n                ),\n                searchQuery && React.createElement('button', {\n                  onClick: () => setSearchQuery(''),\n                  className: \"mt-4 px-6 py-3 wsp-primary wsp-button-text rounded-xl font-bold hover:shadow-lg transition\"\n                }, \"Clear Search\")\n              )\n            :\n              filteredProducts.map((p, idx) => \n                React.createElement('div', {\n                  key: p.id,\n                  id: `product-${p.id}`\n                },\n                  React.createElement('div', {\n                    draggable: config.isAdmin && !searchQuery && selectedCategory === 'All',\n                    onDragStart: (e) => handleDragStart(e, p, idx),\n                    onDragOver: (e) => handleDragOver(e, idx),\n                    onDragEnd: handleDragEnd,\n                    onDrop: handleDrop,\n                    onClick: (e) => handleEdit(p, e),\n                    className: `flex items-center gap-5 p-5 border-2 ${editingProductId === p.id ? 'border-orange-500 bg-orange-50' : 'border-gray-200'} rounded-2xl hover:border-green-400 hover:shadow-lg transition cursor-pointer ${draggedItem?.index === idx ? 'opacity-50' : ''}`\n                  },\n                    config.isAdmin && !searchQuery && selectedCategory === 'All' && React.createElement('div', {\n                      className: \"cursor-move text-2xl text-gray-400 hover:text-gray-600\",\n                      onClick: (e) => e.stopPropagation()\n                    }, \"\u22ee\u22ee\"),\n                    React.createElement('img', {\n                      src: p.image_url || p.images?.[0] || '',\n                      alt: p.name,\n                      className: \"w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-2xl shadow-md\",\n                      onError: (e) => { e.target.src = 'data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><rect fill=\"%23e0e0e0\" width=\"100\" height=\"100\"\/><text y=\"60\" x=\"50\" text-anchor=\"middle\" font-size=\"40\" fill=\"%23999\">\ud83d\udce6<\/text><\/svg>'; }\n                    }),\n                    React.createElement('div', {className: \"flex-1 min-w-0\"},\n                      React.createElement('h3', {className: \"font-bold text-xl sm:text-2xl wsp-text truncate\"}, p.name),\n                      React.createElement('div', {className: \"flex flex-wrap items-center gap-2 mt-1\"},\n                        config.permissions.category && p.category && React.createElement('span', {className: \"text-base sm:text-lg text-gray-600\"}, p.category),\n                        p.featured == 1 && React.createElement('span', {className: \"px-2 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-bold\"}, \"\u2b50 Featured\"),\n                        config.permissions.variable_products && p.type === 'variable' && React.createElement('span', {className: \"px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold\"}, \"Variable\"),\n                        config.permissions.sale_price && p.sale_price > 0 && React.createElement('span', {className: \"px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs font-bold\"}, \"Sale\"),\n                        p.stock <= 0 && React.createElement('span', {className: \"px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-bold\"}, \"Out of Stock\")\n                      ),\n                      React.createElement('div', {className: \"flex items-center gap-3 mt-1\"},\n                        config.permissions.sale_price && p.sale_price > 0 ? \n                          React.createElement(React.Fragment, null,\n                            React.createElement('span', {className: \"text-lg line-through text-gray-400\"}, `${config.currency}${p.price}`),\n                            React.createElement('span', {className: \"text-xl font-bold text-red-600\"}, `${config.currency}${p.sale_price}`)\n                          ) : \n                          config.permissions.regular_price && React.createElement('span', {\n                            className: \"text-xl font-bold\",\n                            style: {color: config.primaryColor}\n                          }, `${config.currency}${p.price}`),\n                        React.createElement('span', {className: \"text-sm text-gray-500\"}, `\u2022 ${(p.image_url ? 1 : 0) + (p.images?.length || 0)} images`),\n                        config.permissions.variable_products && p.variations && p.variations.length > 0 && React.createElement('span', {className: \"text-sm text-purple-600\"}, `\u2022 ${p.variations.length} variations`),\n                        config.permissions.stock && React.createElement('span', {className: \"text-sm text-gray-500\"}, `\u2022 Stock: ${p.stock}`)\n                      )\n                    ),\n                    React.createElement('div', {className: \"flex gap-3\"},\n                      React.createElement('button', {\n                        onClick: (e) => {\n                          e.stopPropagation();\n                          handleEdit(p, e);\n                        },\n                        className: \"p-4 bg-blue-100 text-blue-600 rounded-2xl text-2xl shadow-md hover:shadow-lg transition\"\n                      }, \"\u270f\ufe0f\"),\n                      React.createElement('button', {\n                        onClick: (e) => {\n                          e.stopPropagation();\n                          deleteProduct(p.id);\n                        },\n                        className: \"delete-button p-4 bg-red-100 text-red-600 rounded-2xl text-2xl shadow-md hover:shadow-lg transition\"\n                      }, \"\ud83d\uddd1\ufe0f\")\n                    )\n                  ),\n                  \/\/ Inline Edit Form\n                  renderEditForm(p)\n                )\n              )\n          )\n        ) : activeTab === 'orders' && canViewOrders ? React.createElement(OrdersList) : null\n      )\n    )\n  );\n}\n\n\/\/ Cart Modal Component (keep existing, add store hours check)\n\/\/ Cart Modal Component (UPDATED with Takeaway\/Delivery toggle)\nfunction CartModal({ cart, removeItem, updateQty, total, count, sendOrder, setShowCart }) {\n  const [showCheckout, setShowCheckout] = React.useState(false);\n  const [customerName, setCustomerName] = React.useState('');\n  const [customerPhone, setCustomerPhone] = React.useState('');\n  const [customerEmail, setCustomerEmail] = React.useState('');\n  const [customerAddress, setCustomerAddress] = React.useState('');\n  const [customerPincode, setCustomerPincode] = React.useState('');\n  const [customerLandmark, setCustomerLandmark] = React.useState('');\n  const [customerCity, setCustomerCity] = React.useState('');\n  const [customerState, setCustomerState] = React.useState('');\n  const [paymentMethod, setPaymentMethod] = React.useState('cod');\n  const [submitting, setSubmitting] = React.useState(false);\n  const [pincodeChecking, setPincodeChecking] = React.useState(false);\n  const [pincodeValid, setPincodeValid] = React.useState(null);\n  const [deliveryInfo, setDeliveryInfo] = React.useState(null);\n  const [distanceInfo, setDistanceInfo] = React.useState(null);\n  const storeOpen = isStoreOpen();\n\n  const deliverySettings = config.delivery_settings || {};\n  const enableDeliveryOption = deliverySettings.enable_delivery == 1;\n  const enableTakeawayOption = deliverySettings.enable_takeaway == 1;\n  const enablePincodeCheck = deliverySettings.enable_pincode_check == 1;\n  const enableDistanceCalc = deliverySettings.enable_distance_calc == 1;\n  const requireLandmark = deliverySettings.require_landmark == 1;\n  const requireCity = deliverySettings.require_city == 1;\n  const requireState = deliverySettings.require_state == 1;\n  \n  \/\/ Auto-select order type based on enabled options\n  const getInitialOrderType = () => {\n    if (enableDeliveryOption && !enableTakeawayOption) return 'delivery';\n    if (!enableDeliveryOption && enableTakeawayOption) return 'takeaway';\n    return 'delivery'; \/\/ Default if both enabled\n  };\n  \n  const [orderType, setOrderType] = React.useState(getInitialOrderType());\n\n  const subtotal = cart.reduce((s, i) => {\n    const itemPrice = i.selectedVariation ? i.selectedVariation.price : (i.sale_price > 0 ? i.sale_price : i.price);\n    return s + itemPrice * i.qty;\n  }, 0);\n\n  let tax = 0;\n  if (config.advanced.tax_percentage > 0) {\n    tax = subtotal * config.advanced.tax_percentage \/ 100;\n  }\n\n  let shipping = 0;\n  \n  \/\/ Only calculate shipping for delivery orders\n  if (orderType === 'delivery') {\n    if (enableDistanceCalc && distanceInfo && distanceInfo.delivery_charge) {\n      shipping = parseFloat(distanceInfo.delivery_charge);\n    } else if (enablePincodeCheck && deliveryInfo && deliveryInfo.delivery_charge) {\n      shipping = parseFloat(deliveryInfo.delivery_charge);\n    } else if (config.advanced.shipping_charge > 0) {\n      if (config.advanced.free_shipping_above > 0 && subtotal >= config.advanced.free_shipping_above) {\n        shipping = 0;\n      } else {\n        shipping = parseFloat(config.advanced.shipping_charge);\n      }\n    }\n  }\n\n  const cartTotal = subtotal + tax + shipping;\n\n  const isWhatsAppMode = config.storeMode === 'whatsapp';\n  const isEcommerceMode = config.storeMode === 'ecommerce';\n  const isDigitalMenu = config.storeMode === 'digital_menu';\n  const enableCOD = config.payment.enable_cod == 1;\n  const enableOnline = config.payment.enable_online == 1;\n\n  \/\/ Reset delivery-related fields when switching to takeaway\n  React.useEffect(() => {\n    if (orderType === 'takeaway') {\n      setCustomerAddress('');\n      setCustomerPincode('');\n      setCustomerLandmark('');\n      setCustomerCity('');\n      setCustomerState('');\n      setPincodeValid(null);\n      setDeliveryInfo(null);\n      setDistanceInfo(null);\n    }\n  }, [orderType]);\n\n  const checkPincode = React.useCallback(\n    debounce((pincode) => {\n      if (!enablePincodeCheck || pincode.length < 6 || orderType === 'takeaway') return;\n      \n      setPincodeChecking(true);\n      setPincodeValid(null);\n      setDeliveryInfo(null);\n      \n      const formData = new FormData();\n      formData.append('action', 'wsp_check_pincode');\n      formData.append('pincode', pincode);\n      \n      fetch(config.ajaxUrl, {\n        method: 'POST',\n        body: formData\n      })\n      .then(res => res.json())\n      .then(data => {\n        setPincodeChecking(false);\n        if (data.success) {\n          setPincodeValid(true);\n          setDeliveryInfo(data.data);\n        } else {\n          setPincodeValid(false);\n          setDeliveryInfo(null);\n          alert('\u274c ' + (data.data?.message || 'Delivery not available in this area'));\n        }\n      })\n      .catch(err => {\n        setPincodeChecking(false);\n        console.error('Pincode check error:', err);\n      });\n    }, 500),\n    [enablePincodeCheck, orderType]\n  );\n\n  const calculateDistance = () => {\n    if (!enableDistanceCalc || orderType === 'takeaway') return;\n    \n    const fullAddress = `${customerAddress}, ${customerLandmark}, ${customerCity}, ${customerState} ${customerPincode}`.trim();\n    \n    if (!customerAddress || !customerPincode) {\n      alert('Please enter complete address');\n      return;\n    }\n    \n    setSubmitting(true);\n    \n    const formData = new FormData();\n    formData.append('action', 'wsp_calculate_distance');\n    formData.append('address', fullAddress);\n    \n    fetch(config.ajaxUrl, {\n      method: 'POST',\n      body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n      setSubmitting(false);\n      if (data.success) {\n        setDistanceInfo(data.data);\n        alert(`\u2705 Distance: ${data.data.distance}km\\nDelivery Charge: ${config.currency}${data.data.delivery_charge}`);\n      } else {\n        alert('\u274c ' + (data.data?.message || 'Could not calculate distance'));\n      }\n    })\n    .catch(err => {\n      setSubmitting(false);\n      console.error('Distance calculation error:', err);\n      alert('Failed to calculate distance');\n    });\n  };\n\n  const handleCheckout = () => {\n    if (!storeOpen) {\n      alert('\ud83d\udd34 Store is currently closed. You can browse products but cannot place orders now.\\n\\nWe will be open ' + getNextOpeningTime());\n      return;\n    }\n    \n    \/\/ Check zone minimum order first (only for delivery with pincode checking)\n    if (orderType === 'delivery' && enablePincodeCheck && deliveryInfo && deliveryInfo.min_order_amount > 0) {\n      if (subtotal < deliveryInfo.min_order_amount) {\n        alert(`\u26a0\ufe0f Minimum order amount for ${deliveryInfo.zone_name}: ${config.currency}${deliveryInfo.min_order_amount.toFixed(2)}\\n\\nYour cart subtotal: ${config.currency}${subtotal.toFixed(2)}\\n\\nPlease add ${config.currency}${(deliveryInfo.min_order_amount - subtotal).toFixed(2)} more to continue.`);\n        return;\n      }\n    }\n    \n    \/\/ Check global minimum order\n    if (config.minOrder > 0 && cartTotal < config.minOrder) {\n      alert(`\u26a0\ufe0f Minimum order amount: ${config.currency}${config.minOrder.toFixed(2)}\\n\\nYour cart total: ${config.currency}${cartTotal.toFixed(2)}\\n\\nPlease add ${config.currency}${(config.minOrder - cartTotal).toFixed(2)} more to continue.`);\n      return;\n    }\n\n    setShowCheckout(true);\n  };\n\n  const handleSubmitOrder = () => {\n    if (!storeOpen) {\n      alert('\ud83d\udd34 Store is currently closed. Please try again during business hours.');\n      return;\n    }\n    \n    \/\/ Basic validation\n    if (!customerName.trim()) {\n      alert('Please enter your name');\n      return;\n    }\n    if (!customerPhone.trim()) {\n      alert('Please enter your phone number');\n      return;\n    }\n    \n    \/\/ Delivery-specific validation\n    if (orderType === 'delivery') {\n      if (!customerAddress.trim()) {\n        alert('Please enter your delivery address');\n        return;\n      }\n      \n      if (enablePincodeCheck) {\n        if (!customerPincode.trim()) {\n          alert('Please enter your pincode');\n          return;\n        }\n        if (pincodeValid !== true) {\n          alert('Please enter a valid pincode where delivery is available');\n          return;\n        }\n        \n        if (deliveryInfo && deliveryInfo.min_order_amount > 0) {\n          if (subtotal < deliveryInfo.min_order_amount) {\n            alert(`\u26a0\ufe0f Minimum order amount for ${deliveryInfo.zone_name}: ${config.currency}${deliveryInfo.min_order_amount.toFixed(2)}\\n\\nYour cart subtotal: ${config.currency}${subtotal.toFixed(2)}`);\n            return;\n          }\n        }\n      }\n      \n      if (requireLandmark && !customerLandmark.trim()) {\n        alert('Please enter a landmark');\n        return;\n      }\n      if (requireCity && !customerCity.trim()) {\n        alert('Please enter your city');\n        return;\n      }\n      if (requireState && !customerState.trim()) {\n        alert('Please enter your state');\n        return;\n      }\n    }\n    \n    if (config.minOrder > 0 && cartTotal < config.minOrder) {\n      alert(`\u26a0\ufe0f Minimum order amount: ${config.currency}${config.minOrder.toFixed(2)}\\n\\nYour cart total: ${config.currency}${cartTotal.toFixed(2)}`);\n      return;\n    }\n\n    setSubmitting(true);\n\n    const fullAddress = orderType === 'delivery' ? [\n      customerAddress,\n      customerLandmark && `Landmark: ${customerLandmark}`,\n      customerCity && `City: ${customerCity}`,\n      customerState && `State: ${customerState}`,\n      customerPincode && `Pincode: ${customerPincode}`\n    ].filter(Boolean).join(', ') : 'Takeaway - No delivery address';\n    \n    const formData = new FormData();\n    formData.append('action', 'wsp_submit_order');\n    formData.append('cart', JSON.stringify(cart));\n    formData.append('customer_name', customerName);\n    formData.append('customer_phone', customerPhone);\n    formData.append('customer_email', customerEmail);\n    formData.append('customer_address', fullAddress);\n    formData.append('payment_method', isWhatsAppMode ? 'whatsapp' : paymentMethod);\n    formData.append('order_type', orderType); \/\/ NEW\n    formData.append('subtotal', subtotal);\n    formData.append('tax', tax);\n    formData.append('shipping', shipping);\n    formData.append('total', cartTotal);\n    \n    if (orderType === 'delivery' && deliveryInfo) {\n      formData.append('delivery_zone', deliveryInfo.zone_name);\n      formData.append('delivery_time', deliveryInfo.delivery_time || '');\n    }\n    \n    if (orderType === 'delivery' && distanceInfo) {\n      formData.append('delivery_distance', distanceInfo.distance);\n    }\n\n    fetch(config.ajaxUrl, {\n      method: 'POST',\n      body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n      setSubmitting(false);\n      \n      if (data.success) {\n        if (isWhatsAppMode && data.data.whatsapp_url) {\n          window.open(data.data.whatsapp_url, '_blank');\n          alert(`\u2705 Order placed successfully!\\n\\nOrder #${data.data.order_number}\\nType: ${orderType === 'takeaway' ? 'Takeaway' : 'Delivery'}\\n\\nRedirecting to WhatsApp...`);\n        } else {\n          if (paymentMethod === 'online') {\n            alert('\ud83d\udd04 Redirecting to payment gateway...\\n\\nNote: Payment gateway integration coming soon!');\n          } else {\n            alert(`\u2705 Order placed successfully!\\n\\nOrder #${data.data.order_number}\\nType: ${orderType === 'takeaway' ? 'Takeaway' : 'Delivery'}\\n\\nYou will be contacted shortly for confirmation.`);\n          }\n          if (data.data.whatsapp_url) {\n            window.open(data.data.whatsapp_url, '_blank');\n          }\n        }\n        \n        setTimeout(() => {\n          window.location.reload();\n        }, 1000);\n        \n        setCart([]);\n        setCustomerName('');\n        setCustomerPhone('');\n        setCustomerEmail('');\n        setCustomerAddress('');\n        setCustomerPincode('');\n        setCustomerLandmark('');\n        setCustomerCity('');\n        setCustomerState('');\n        setPincodeValid(null);\n        setDeliveryInfo(null);\n        setDistanceInfo(null);\n        setShowCheckout(false);\n        setShowCart(false);\n      } else {\n        alert('\u274c Error: ' + (data.data || 'Failed to place order'));\n      }\n    })\n    .catch(err => {\n      setSubmitting(false);\n      console.error('Order error:', err);\n      alert('\u274c Failed to place order. Please try again.');\n    });\n  };\n\n  return React.createElement('div', {\n    className: \"fixed inset-0 bg-black bg-opacity-60 z-50 flex justify-end backdrop-blur-sm\",\n    onClick: () => { setShowCart(false); setShowCheckout(false); }\n  },\n    React.createElement('div', {\n      className: \"bg-white w-full max-w-lg h-full overflow-y-auto shadow-2xl\",\n      onClick: (e) => e.stopPropagation()\n    },\n      React.createElement('div', {className: \"wsp-primary text-white p-6 sm:p-8 flex justify-between items-center shadow-lg\"},\n        React.createElement('div', null,\n          React.createElement('h2', {className: \"text-3xl sm:text-4xl font-bold\"}, showCheckout ? \"\ud83d\udccb Checkout\" : \"\ud83d\uded2 Cart\"),\n          React.createElement('p', {className: \"text-lg sm:text-xl opacity-90 mt-1\"}, showCheckout ? \"Complete your order\" : `${count} items`)\n        ),\n        React.createElement('button', {\n          onClick: () => { \n            if (showCheckout) {\n              setShowCheckout(false);\n            } else {\n              setShowCart(false);\n            }\n          },\n          className: \"text-5xl hover:scale-110 transition\"\n        }, \"\u00d7\")\n      ),\n\n      React.createElement('div', {className: \"p-6 sm:p-8\"},\n        cart.length === 0 ? \n          React.createElement('div', {className: \"text-center py-24\"},\n            React.createElement('div', {className: \"text-8xl mb-6\"}, \"\ud83d\uded2\"),\n            React.createElement('p', {className: \"text-3xl wsp-text font-bold\"}, \"Empty cart\"),\n            React.createElement('p', {className: \"text-xl text-gray-500 mt-2\"}, \"Add products to continue\")\n          )\n        : \n          React.createElement(React.Fragment, null,\n            !showCheckout ? \n              React.createElement(React.Fragment, null,\n                !storeOpen && React.createElement('div', {\n                  className: \"bg-red-50 border-2 border-red-400 rounded-2xl p-4 mb-6\"\n                },\n                  React.createElement('p', {className: \"text-red-800 font-bold text-center\"}, \n                    \"\ud83d\udd34 Store is currently closed\"\n                  ),\n                  React.createElement('p', {className: \"text-red-700 text-center text-sm mt-2\"}, \n                    `Opens ${getNextOpeningTime()}`\n                  )\n                ),\n                \n                React.createElement('div', {className: \"space-y-5 mb-8\"},\n                  cart.map((i, idx) => {\n                    const itemPrice = i.selectedVariation ? i.selectedVariation.price : (i.sale_price > 0 ? i.sale_price : i.price);\n                    const itemKey = i.cartKey || i.id;\n                    \n                    return React.createElement('div', {\n                      key: itemKey + '-' + idx,\n                      className: \"flex gap-5 p-5 border-2 border-gray-200 rounded-3xl hover:border-green-400 hover:shadow-lg transition\"\n                    },\n                      React.createElement('img', {\n                        src: i.image_url || i.images?.[0] || '',\n                        alt: i.name,\n                        className: \"w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-2xl shadow-md\",\n                        onError: (e) => { e.target.src = 'data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><rect fill=\"%23e0e0e0\" width=\"100\" height=\"100\"\/><text y=\"60\" x=\"50\" text-anchor=\"middle\" font-size=\"40\" fill=\"%23999\">\ud83d\udce6<\/text><\/svg>'; }\n                      }),\n                      React.createElement('div', {className: \"flex-1\"},\n                        React.createElement('h3', {className: \"font-bold text-xl sm:text-2xl wsp-text mb-1\"}, i.name),\n                        i.selectedVariation && \n                          React.createElement('p', {className: \"text-sm text-purple-600 font-semibold mb-1\"}, `\ud83d\udce6 ${i.selectedVariation.name}`),\n                        React.createElement('p', {\n                          className: \"text-2xl sm:text-3xl font-bold mb-4\",\n                          style: {color: config.primaryColor}\n                        }, `${config.currency}${itemPrice.toFixed(2)}`),\n                        React.createElement('div', {className: \"flex items-center gap-3\"},\n                          React.createElement('button', {\n                            onClick: () => updateQty(itemKey, -1),\n                            className: \"w-12 h-12 bg-gray-200 rounded-xl text-2xl font-bold hover:bg-gray-300 transition\"\n                          }, \"-\"),\n                          React.createElement('span', {className: \"w-12 text-center font-bold text-2xl wsp-text\"}, i.qty),\n                          React.createElement('button', {\n                            onClick: () => updateQty(itemKey, 1),\n                            className: \"w-12 h-12 bg-gray-200 rounded-xl text-2xl font-bold hover:bg-gray-300 transition\"\n                          }, \"+\"),\n                          React.createElement('button', {\n                            onClick: () => removeItem(itemKey),\n                            className: \"ml-auto text-3xl text-red-600 hover:scale-110 transition\"\n                          }, \"\ud83d\uddd1\ufe0f\")\n                        )\n                      )\n                    );\n                  })\n                ),\n\n                config.minOrder > 0 && cartTotal < config.minOrder && \n                  React.createElement('div', {className: \"bg-yellow-50 border-2 border-yellow-400 rounded-2xl p-4 mb-6\"},\n                    React.createElement('p', {className: \"text-yellow-800 font-bold text-center\"}, \n                      `\u26a0\ufe0f Minimum order: ${config.currency}${config.minOrder.toFixed(2)}`\n                    ),\n                    React.createElement('p', {className: \"text-yellow-700 text-center text-sm mt-1\"}, \n                      `Add ${config.currency}${(config.minOrder - cartTotal).toFixed(2)} more`\n                    )\n                  ),\n\n                React.createElement('div', {className: \"border-t-2 border-gray-200 pt-6\"},\n                  React.createElement('div', {className: \"bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-3xl mb-6 border-2 border-green-300 shadow-md\"},\n                    React.createElement('div', {className: \"space-y-2 text-lg\"},\n                      React.createElement('div', {className: \"flex justify-between\"},\n                        React.createElement('span', {className: \"font-medium\"}, \"Subtotal:\"),\n                        React.createElement('span', {className: \"font-bold\"}, `${config.currency}${subtotal.toFixed(2)}`)\n                      ),\n                      tax > 0 && \n                        React.createElement('div', {className: \"flex justify-between\"},\n                          React.createElement('span', {className: \"font-medium\"}, `Tax (${config.advanced.tax_percentage}%):`),\n                          React.createElement('span', {className: \"font-bold\"}, `${config.currency}${tax.toFixed(2)}`)\n                        ),\n                      (orderType === 'delivery' && (config.advanced.shipping_charge > 0 || deliveryInfo || distanceInfo)) && \n                        React.createElement('div', {className: \"flex justify-between\"},\n                          React.createElement('span', {className: \"font-medium\"}, \"Shipping:\"),\n                          React.createElement('span', {className: \"font-bold\"}, \n                            shipping === 0 ? 'FREE' : config.currency + shipping.toFixed(2)\n                          )\n                        ),\n                      React.createElement('div', {className: \"border-t-2 border-green-300 pt-2 mt-2\"},\n                        React.createElement('div', {className: \"flex justify-between text-2xl\"},\n                          React.createElement('span', {className: \"font-bold wsp-text\"}, \"Total:\"),\n                          React.createElement('span', {\n                            className: \"font-bold\",\n                            style: {color: config.primaryColor}\n                          }, `${config.currency}${cartTotal.toFixed(2)}`)\n                        )\n                      )\n                    )\n                  ),\n                  React.createElement('button', {\n                    onClick: handleCheckout,\n                    disabled: (config.minOrder > 0 && cartTotal < config.minOrder) || !storeOpen,\n                    className: \"w-full py-6 wsp-primary wsp-button-text rounded-3xl font-bold text-2xl shadow-xl hover:shadow-2xl transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed\"\n                  }, !storeOpen ? \"\ud83d\udd34 Store Closed\" : \"\ud83d\udccb Proceed to Checkout\"),\n                  React.createElement('p', {className: \"text-base text-gray-500 text-center mt-4\"}, \n                    \"\ud83d\udd12 Secure checkout\"\n                  )\n                )\n              )\n            :\n              React.createElement('div', {className: \"space-y-6\"},\n                React.createElement('div', {className: \"bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-3xl border-2 border-blue-300\"},\n                  React.createElement('h3', {className: \"font-bold text-xl mb-4 text-blue-900\"}, \"\ud83d\udce6 Order Summary\"),\n                  React.createElement('div', {className: \"space-y-2 text-base\"},\n                    React.createElement('div', {className: \"flex justify-between\"},\n                      React.createElement('span', null, `Items (${count})`),\n                      React.createElement('span', {className: \"font-bold\"}, `${config.currency}${subtotal.toFixed(2)}`)\n                    ),\n                    tax > 0 && React.createElement('div', {className: \"flex justify-between\"},\n                      React.createElement('span', null, \"Tax\"),\n                      React.createElement('span', {className: \"font-bold\"}, `${config.currency}${tax.toFixed(2)}`)\n                    ),\n                    orderType === 'delivery' && shipping > 0 && React.createElement('div', {className: \"flex justify-between\"},\n                      React.createElement('span', null, \"Delivery\"),\n                      React.createElement('span', {className: \"font-bold\"}, `${config.currency}${shipping.toFixed(2)}`)\n                    ),\n                    orderType === 'delivery' && deliveryInfo && deliveryInfo.delivery_time && React.createElement('div', {className: \"flex justify-between text-sm text-blue-700\"},\n                      React.createElement('span', null, \"\u23f1\ufe0f Delivery Time:\"),\n                      React.createElement('span', {className: \"font-bold\"}, deliveryInfo.delivery_time)\n                    ),\n                    React.createElement('div', {className: \"border-t-2 border-blue-300 pt-2 mt-2 flex justify-between text-xl\"},\n                      React.createElement('span', {className: \"font-bold\"}, \"Total:\"),\n                      React.createElement('span', {className: \"font-bold\", style: {color: config.primaryColor}}, `${config.currency}${cartTotal.toFixed(2)}`)\n                    )\n                  )\n                ),\n\n                \/\/ NEW: Order Type Toggle\n                \/\/ NEW: Order Type Toggle (only show if not digital menu and at least one option is enabled)\n!isDigitalMenu && (enableDeliveryOption || enableTakeawayOption) && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n  React.createElement('h3', {className: \"font-bold text-xl mb-4 wsp-text\"}, \"\ud83d\ude9a Order Type\"),\n  \n  \/\/ If only one option is enabled, show info instead of toggle\n  (enableDeliveryOption && !enableTakeawayOption) ? \n    React.createElement('div', {className: \"p-4 bg-blue-50 border border-blue-300 rounded-xl text-center\"},\n      React.createElement('div', {className: \"text-4xl mb-2\"}, \"\ud83d\ude9a\"),\n      React.createElement('p', {className: \"font-bold text-lg text-blue-900\"}, \"Delivery Only\"),\n      React.createElement('p', {className: \"text-sm text-blue-700 mt-1\"}, \"All orders will be delivered to your address\")\n    )\n  : (!enableDeliveryOption && enableTakeawayOption) ?\n    React.createElement('div', {className: \"p-4 bg-orange-50 border border-orange-300 rounded-xl text-center\"},\n      React.createElement('div', {className: \"text-4xl mb-2\"}, \"\ud83c\udfc3\"),\n      React.createElement('p', {className: \"font-bold text-lg text-orange-900\"}, \"Takeaway Only\"),\n      React.createElement('p', {className: \"text-sm text-orange-700 mt-1\"}, \"Pickup your order from our store\")\n    )\n  : \/\/ Both options enabled - show toggle\n    React.createElement('div', null,\n      React.createElement('div', {className: \"grid grid-cols-2 gap-4\"},\n        enableDeliveryOption && React.createElement('button', {\n          onClick: () => setOrderType('delivery'),\n          className: `p-4 rounded-xl font-bold transition ${orderType === 'delivery' ? 'wsp-primary wsp-button-text shadow-lg scale-105' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`\n        },\n          React.createElement('div', {className: \"text-3xl mb-2\"}, \"\ud83d\ude9a\"),\n          React.createElement('div', null, \"Delivery\")\n        ),\n        enableTakeawayOption && React.createElement('button', {\n          onClick: () => setOrderType('takeaway'),\n          className: `p-4 rounded-xl font-bold transition ${orderType === 'takeaway' ? 'wsp-primary wsp-button-text shadow-lg scale-105' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`\n        },\n          React.createElement('div', {className: \"text-3xl mb-2\"}, \"\ud83c\udfc3\"),\n          React.createElement('div', null, \"Takeaway\")\n        )\n      ),\n      orderType === 'takeaway' && React.createElement('div', {className: \"mt-4 p-3 bg-green-50 border border-green-300 rounded-xl text-sm text-green-800\"},\n        React.createElement('p', {className: \"font-bold\"}, \"\u2705 Takeaway Order\"),\n        React.createElement('p', null, \"You can pickup your order from our store. No delivery charges!\")\n      )\n    )\n),\nReact.createElement('div', {className: \"space-y-4\"},\n  React.createElement('h3', {className: \"font-bold text-xl wsp-text\"}, \"\ud83d\udc64 Customer Details\"),\n  \n  React.createElement('div', null,\n    React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Full Name *\"),\n    React.createElement('input', {\n      type: \"text\",\n      value: customerName,\n      onChange: (e) => setCustomerName(e.target.value),\n      className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition text-lg\",\n      placeholder: \"John Doe\"\n    })\n  ),\n\n  React.createElement('div', null,\n    React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Phone Number *\"),\n    React.createElement('input', {\n      type: \"tel\",\n      value: customerPhone,\n      onChange: (e) => setCustomerPhone(e.target.value),\n      className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition text-lg\",\n      placeholder: \"+91 98765 43210\"\n    })\n  ),\n\n  React.createElement('div', null,\n    React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Email (Optional)\"),\n    React.createElement('input', {\n      type: \"email\",\n      value: customerEmail,\n      onChange: (e) => setCustomerEmail(e.target.value),\n      className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition text-lg\",\n      placeholder: \"john@example.com\"\n    })\n  )\n),\n\n\/\/ Delivery Address Section - ONLY FOR DELIVERY ORDERS\norderType === 'delivery' && React.createElement('div', {className: \"space-y-4\"},\n  React.createElement('h3', {className: \"font-bold text-xl wsp-text\"}, \"\ud83d\udccd Delivery Address\"),\n  \n  React.createElement('div', null,\n    React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Street Address *\"),\n    React.createElement('textarea', {\n      value: customerAddress,\n      onChange: (e) => setCustomerAddress(e.target.value),\n      className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition text-lg\",\n      rows: 2,\n      placeholder: \"House No., Building, Street...\"\n    })\n  ),\n\n  React.createElement('div', null,\n    React.createElement('label', {className: \"block font-semibold mb-2\"}, \n      `Landmark ${requireLandmark ? '*' : '(Optional)'}`\n    ),\n    React.createElement('input', {\n      type: \"text\",\n      value: customerLandmark,\n      onChange: (e) => setCustomerLandmark(e.target.value),\n      className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition text-lg\",\n      placeholder: \"Near park, Next to mall...\"\n    })\n  ),\n\n  React.createElement('div', {className: \"grid grid-cols-2 gap-4\"},\n    React.createElement('div', null,\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \n        `City ${requireCity ? '*' : '(Optional)'}`\n      ),\n      React.createElement('input', {\n        type: \"text\",\n        value: customerCity,\n        onChange: (e) => setCustomerCity(e.target.value),\n        className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition text-lg\",\n        placeholder: \"City\"\n      })\n    ),\n    React.createElement('div', null,\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \n        `State ${requireState ? '*' : '(Optional)'}`\n      ),\n      React.createElement('input', {\n        type: \"text\",\n        value: customerState,\n        onChange: (e) => setCustomerState(e.target.value),\n        className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition text-lg\",\n        placeholder: \"State\"\n      })\n    )\n  ),\n\n  React.createElement('div', null,\n    React.createElement('label', {className: \"block font-semibold mb-2\"}, \n      `Pincode ${enablePincodeCheck ? '*' : '(Optional)'}`\n    ),\n    React.createElement('div', {className: \"relative\"},\n      React.createElement('input', {\n        type: \"text\",\n        value: customerPincode,\n        onChange: (e) => {\n          const value = e.target.value.replace(\/[^0-9]\/g, '').slice(0, 6);\n          setCustomerPincode(value);\n          if (enablePincodeCheck && value.length === 6) {\n            checkPincode(value);\n          }\n        },\n        className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition text-lg pr-12\",\n        placeholder: \"110001\",\n        maxLength: \"6\"\n      }),\n      enablePincodeCheck && React.createElement('div', {className: \"absolute right-4 top-1\/2 transform -translate-y-1\/2\"},\n        pincodeChecking ? React.createElement('span', {className: \"text-2xl\"}, \"\u23f3\") :\n        pincodeValid === true ? React.createElement('span', {className: \"text-2xl\"}, \"\u2705\") :\n        pincodeValid === false ? React.createElement('span', {className: \"text-2xl\"}, \"\u274c\") : null\n      )\n    ),\n    enablePincodeCheck && pincodeValid === true && deliveryInfo && \n      React.createElement('div', {className: \"mt-2 p-3 bg-green-50 border border-green-300 rounded-xl text-sm\"},\n        React.createElement('p', {className: \"font-bold text-green-800\"}, `\u2705 Delivery available in ${deliveryInfo.zone_name}`),\n        deliveryInfo.delivery_charge > 0 && React.createElement('p', {className: \"text-green-700\"}, `Charge: ${config.currency}${deliveryInfo.delivery_charge}`),\n        deliveryInfo.min_order_amount > 0 && React.createElement('p', {className: \"text-green-700\"}, `Min Order: ${config.currency}${deliveryInfo.min_order_amount}`),\n        deliveryInfo.delivery_time && React.createElement('p', {className: \"text-green-700\"}, `Time: ${deliveryInfo.delivery_time}`)\n      )\n  ),\n\n  enableDistanceCalc && React.createElement('button', {\n    onClick: calculateDistance,\n    disabled: !customerAddress || !customerPincode,\n    className: \"w-full py-3 bg-blue-500 text-white rounded-xl font-bold hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed\"\n  }, \"\ud83d\udccd Calculate Distance & Delivery Charge\"),\n\n  distanceInfo && React.createElement('div', {className: \"p-3 bg-blue-50 border border-blue-300 rounded-xl text-sm\"},\n    React.createElement('p', {className: \"font-bold text-blue-800\"}, `\ud83d\udccd Distance: ${distanceInfo.distance}km`),\n    React.createElement('p', {className: \"text-blue-700\"}, `Delivery Charge: ${config.currency}${distanceInfo.delivery_charge}`)\n  )\n),\n                isEcommerceMode && React.createElement('div', {className: \"space-y-4\"},\n                  React.createElement('h3', {className: \"font-bold text-xl wsp-text\"}, \"\ud83d\udcb3 Payment Method\"),\n                  \n                  enableCOD && React.createElement('label', {className: \"flex items-center gap-4 p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-green-500 transition \" + (paymentMethod === 'cod' ? 'border-green-500 bg-green-50' : '')},\n                    React.createElement('input', {\n                      type: \"radio\",\n                      name: \"payment\",\n                      value: \"cod\",\n                      checked: paymentMethod === 'cod',\n                      onChange: (e) => setPaymentMethod(e.target.value),\n                      className: \"w-5 h-5\"\n                    }),\n                    React.createElement('div', null,\n                      React.createElement('div', {className: \"font-bold text-lg\"}, \n                        orderType === 'takeaway' ? \"\ud83d\udcb5 Cash on Pickup\" : \"\ud83d\udcb5 Cash on Delivery\"\n                      ),\n                      React.createElement('div', {className: \"text-sm text-gray-600\"}, \n                        orderType === 'takeaway' ? \"Pay when you pickup\" : \"Pay when you receive\"\n                      )\n                    )\n                  ),\n\n                  enableOnline && React.createElement('label', {className: \"flex items-center gap-4 p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-green-500 transition \" + (paymentMethod === 'online' ? 'border-green-500 bg-green-50' : '')},\n                    React.createElement('input', {\n                      type: \"radio\",\n                      name: \"payment\",\n                      value: \"online\",\n                      checked: paymentMethod === 'online',\n                      onChange: (e) => setPaymentMethod(e.target.value),\n                      className: \"w-5 h-5\"\n                    }),\n                    React.createElement('div', null,\n                      React.createElement('div', {className: \"font-bold text-lg\"}, \"\ud83d\udcb3 Online Payment\"),\n                      React.createElement('div', {className: \"text-sm text-gray-600\"}, \"Pay securely online\")\n                    )\n                  )\n                ),\n\n                React.createElement('div', {className: \"flex gap-4 pt-4\"},\n                  React.createElement('button', {\n                    onClick: () => setShowCheckout(false),\n                    className: \"flex-1 py-4 bg-gray-300 text-gray-700 rounded-2xl font-bold text-lg hover:bg-gray-400 transition\"\n                  }, \"\u2190 Back\"),\n                  React.createElement('button', {\n                    onClick: handleSubmitOrder,\n                    disabled: submitting || !storeOpen || (orderType === 'delivery' && enablePincodeCheck && !pincodeValid),\n                    className: \"flex-1 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-lg hover:shadow-xl transition disabled:opacity-50\"\n                  }, !storeOpen ? \"\ud83d\udd34 Closed\" : (submitting ? \"\u23f3 Processing...\" : (isWhatsAppMode ? \"\ud83d\udcf1 Send to WhatsApp\" : \"\ud83d\ude80 Place Order\")))\n                )\n              )\n          )\n      )\n    )\n  );\n}\n\/\/ NEW: Frontend Settings Component with Permission-Based Field Visibility\nfunction FrontendSettings({ onClose }) {\n  const [settings, setSettings] = React.useState(null);\n  const [loading, setLoading] = React.useState(true);\n  const [saving, setSaving] = React.useState(false);\n  const [userPermissions, setUserPermissions] = React.useState({});\n  const [userRole, setUserRole] = React.useState('guest');\n\n  React.useEffect(() => {\n    fetch(config.ajaxUrl + '?action=wsp_get_all_settings')\n      .then(res => res.json())\n      .then(data => {\n        if (data.success) {\n          setSettings(data.data);\n          setUserPermissions(data.data.user_permissions || {});\n          setUserRole(data.data.user_role || 'guest');\n        }\n        setLoading(false);\n      });\n  }, []);\n\n  const canEdit = (field) => {\n    if (config.isAdmin) return true;\n    return userPermissions[`edit_${field}`] === true;\n  };\n\nconst canEditSection = (section) => {\n  if (config.isAdmin) return true;\n  \n  \/\/ Check if user has ANY edit permission for this section\n  const sectionPermissions = {\n    'basic': ['edit_basic_store_name', 'edit_basic_whatsapp', 'edit_basic_currency', 'edit_basic_colors', 'edit_basic_mode', 'edit_basic_store_timings'],\n    'display': ['edit_display_cart', 'edit_display_prices', 'edit_display_categories', 'edit_display_search', 'edit_display_images', 'edit_display_layout', 'edit_display_pwa', 'edit_display_store_timings'],\n    'payment': ['edit_payment'],\n    'advanced': ['edit_advanced', 'edit_advanced_shipping', 'edit_advanced_tax'],\n    'store_timings': ['edit_basic_store_timings', 'edit_display_store_timings'],\n    'delivery': ['edit_advanced_shipping'],\n    'logo': ['edit_basic_store_name'], \/\/ Only admins\n    'gradients': [], \/\/ Only admins\n    'colors': [], \/\/ Only admins\n    'visibility': [] \/\/ Only admins\n  };\n  \n  const perms = sectionPermissions[section] || [];\n  \n  \/\/ For admin-only sections\n  if (perms.length === 0) return false;\n  \n  \/\/ Check if user has at least one permission for this section\n  return perms.some(perm => userPermissions[perm] === true);\n};\n\n  const handleSave = (settingsType) => {\n  setSaving(true);\n\n  const formData = new FormData();\n  formData.append('action', 'wsp_update_settings');\n  formData.append('settings_type', settingsType);\n  \n  let dataToSend;\n  if (settingsType === 'basic') {\n    dataToSend = {\n      store_name: settings.store_name,\n      whatsapp_number: settings.whatsapp_number,\n      currency: settings.currency,\n      description: settings.description,\n      primary_color: settings.primary_color,\n      secondary_color: settings.secondary_color,\n      text_color: settings.text_color,\n      button_text_color: settings.button_text_color,\n      max_products: settings.max_products,\n      max_images: settings.max_images,\n      min_order_amount: settings.min_order_amount,\n      store_mode: settings.store_mode\n    };\n  } else if (settingsType === 'store_timings') {\n    dataToSend = settings.store_timings;\n  } else if (settingsType === 'logo') {\n    dataToSend = {logo_url: settings.logo_url};\n  } else if (settingsType === 'gradients') {\n    dataToSend = settings.gradient_settings;\n  } else if (settingsType === 'colors') {\n    dataToSend = settings.color_settings;\n  } else if (settingsType === 'visibility') {\n    dataToSend = settings.visibility_settings;\n  } else if (settingsType === 'delivery') {\n    dataToSend = settings.delivery_settings;\n  } else {\n    dataToSend = settings[`${settingsType}_settings`];\n  }\n  \n  formData.append('settings_data', JSON.stringify(dataToSend));\n\n  fetch(config.ajaxUrl, {\n    method: 'POST',\n    body: formData\n  })\n  .then(res => res.json())\n  .then(data => {\n    setSaving(false);\n    if (data.success) {\n      alert('\u2705 Settings saved successfully!\\n\\nRefresh the page to see changes.');\n    } else {\n      alert('\u274c Error: ' + (data.data || 'Failed to save settings'));\n      console.error('Save error:', data);\n    }\n  })\n  .catch(err => {\n    setSaving(false);\n    alert('\u274c Error saving settings: ' + err.message);\n    console.error('Save error:', err);\n  });\n};\n\n  if (loading) {\n    return React.createElement('div', {\n      className: \"fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center\"\n    },\n      React.createElement('div', {className: \"text-white text-4xl\"}, \"\u23f3 Loading...\")\n    );\n  }\n\n  \/\/ Count how many permissions the user has\n  const editableFieldsCount = Object.keys(userPermissions).filter(k => k.startsWith('edit_') && userPermissions[k] === true).length;\n\n  return React.createElement('div', {\n    className: \"fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4 backdrop-blur-sm overflow-y-auto\"\n  },\n    React.createElement('div', {\n      className: \"bg-white rounded-3xl w-full max-w-5xl max-h-[90vh] overflow-y-auto shadow-2xl my-8\"\n    },\n      React.createElement('div', {className: \"wsp-primary text-white p-6 sticky top-0 z-10 flex justify-between items-center shadow-lg\"},\n        React.createElement('div', null,\n          React.createElement('h2', {className: \"text-3xl font-bold\"}, \"\u2699\ufe0f Store Settings\"),\n          React.createElement('p', {className: \"text-lg opacity-90 mt-1\"}, \n            config.isAdmin ? \"Administrator - Full Control\" : \n            `${userRole === 'demo_manager' ? 'Demo Manager' : 'Retailer'} - ${editableFieldsCount} Editable Fields`\n          )\n        ),\n        React.createElement('button', {\n          onClick: onClose,\n          className: \"text-5xl hover:scale-110 transition\"\n        }, \"\u00d7\")\n      ),\n\n      React.createElement('div', {className: \"p-6 space-y-6\"},\n        \/\/ BASIC SETTINGS SECTION\n        canEditSection('basic') && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n          React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n            React.createElement('span', null, \"\ud83c\udfea\"),\n            \"Basic Settings\"\n          ),\n          \n          React.createElement('div', {className: \"space-y-4\"},\n            canEdit('basic_store_name') && React.createElement('div', null,\n              React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Store Name\"),\n              React.createElement('input', {\n                type: \"text\",\n                value: settings.store_name,\n                onChange: (e) => setSettings({...settings, store_name: e.target.value}),\n                className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\"\n              })\n            ),\n\n            canEdit('basic_whatsapp') && React.createElement('div', null,\n              React.createElement('label', {className: \"block font-semibold mb-2\"}, \"WhatsApp Number\"),\n              React.createElement('input', {\n                type: \"text\",\n                value: settings.whatsapp_number,\n                onChange: (e) => setSettings({...settings, whatsapp_number: e.target.value}),\n                className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\",\n                placeholder: \"919876543210\"\n              })\n            ),\n\n            canEdit('basic_currency') && React.createElement('div', null,\n              React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Currency\"),\n              React.createElement('input', {\n                type: \"text\",\n                value: settings.currency,\n                onChange: (e) => setSettings({...settings, currency: e.target.value}),\n                className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\"\n              })\n            ),\n\n            canEdit('basic_mode') && React.createElement('div', null,\n              React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Store Mode\"),\n              React.createElement('select', {\n                value: settings.store_mode,\n                onChange: (e) => setSettings({...settings, store_mode: e.target.value}),\n                className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\"\n              },\n                React.createElement('option', {value: \"digital_menu\"}, \"\ud83d\udcf1 Digital Menu\"),\n                React.createElement('option', {value: \"whatsapp\"}, \"\ud83d\udc9a WhatsApp Store\"),\n                React.createElement('option', {value: \"ecommerce\"}, \"\ud83c\udfea Full E-commerce\")\n              )\n            ),\n\n            canEdit('basic_colors') && React.createElement('div', {className: \"grid grid-cols-2 gap-4\"},\n              React.createElement('div', null,\n                React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Primary Color\"),\n                React.createElement('input', {\n                  type: \"color\",\n                  value: settings.primary_color,\n                  onChange: (e) => setSettings({...settings, primary_color: e.target.value}),\n                  className: \"w-full h-16 cursor-pointer rounded-xl\"\n                })\n              ),\n              React.createElement('div', null,\n                React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Secondary Color\"),\n                React.createElement('input', {\n                  type: \"color\",\n                  value: settings.secondary_color,\n                  onChange: (e) => setSettings({...settings, secondary_color: e.target.value}),\n                  className: \"w-full h-16 cursor-pointer rounded-xl\"\n                })\n              )\n            )\n          ),\n\n          React.createElement('button', {\n            onClick: () => handleSave('basic'),\n            disabled: saving,\n            className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n          }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Basic Settings\")\n        ),\n\n        \/\/ STORE TIMINGS SECTION\n        canEditSection('store_timings') && settings.store_timings && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n          React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n            React.createElement('span', null, \"\u23f0\"),\n            \"Store Timings\"\n          ),\n          \n          React.createElement('div', {className: \"space-y-4\"},\n            canEdit('basic_store_timings') && React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer p-4 bg-gray-50 rounded-xl\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.store_timings.enabled == 1,\n                onChange: (e) => setSettings({\n                  ...settings, \n                  store_timings: {...settings.store_timings, enabled: e.target.checked ? 1 : 0}\n                }),\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-bold text-lg\"}, \"Enable Store Hours\")\n            ),\n\n            canEdit('display_store_timings') && React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer p-4 bg-gray-50 rounded-xl\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.display_settings.show_store_timings == 1,\n                onChange: (e) => setSettings({\n                  ...settings,\n                  display_settings: {...settings.display_settings, show_store_timings: e.target.checked ? 1 : 0}\n                }),\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-bold text-lg\"}, \"Show Store Hours on Frontend\")\n            ),\n\n            canEdit('basic_store_timings') && settings.store_timings.enabled == 1 && React.createElement('div', {className: \"space-y-3 border-t-2 border-gray-200 pt-4\"},\n              ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'].map(day => {\n                const daySchedule = settings.store_timings.schedule[day] || {enabled: 0, open: '09:00', close: '21:00'};\n                \n                return React.createElement('div', {key: day, className: \"bg-gray-50 p-4 rounded-xl\"},\n                  React.createElement('div', {className: \"flex items-center justify-between mb-2\"},\n                    React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer\"},\n                      React.createElement('input', {\n  type: \"checkbox\",\n  checked: daySchedule.enabled == 1,\n  onChange: (e) => {\n    const newSchedule = {...settings.store_timings.schedule};\n    newSchedule[day] = {...daySchedule, enabled: e.target.checked ? 1 : 0};\n                          setSettings({\n                            ...settings,\n                            store_timings: {...settings.store_timings, schedule: newSchedule}\n                          });\n                        },\n                        className: \"w-4 h-4\"\n                      }),\n                      React.createElement('span', {className: \"font-bold capitalize\"}, day)\n                    ),\n                    daySchedule.enabled == 1 && React.createElement('div', {className: \"flex gap-3 items-center\"},\n                      React.createElement('input', {\n                        type: \"time\",\n                        value: daySchedule.open,\n                        onChange: (e) => {\n                          const newSchedule = {...settings.store_timings.schedule};\n                          newSchedule[day] = {...daySchedule, open: e.target.value};\n                          setSettings({\n                            ...settings,\n                            store_timings: {...settings.store_timings, schedule: newSchedule}\n                          });\n                        },\n                        className: \"px-3 py-2 border-2 border-gray-300 rounded-lg\"\n                      }),\n                      React.createElement('span', null, \"to\"),\n                      React.createElement('input', {\n                        type: \"time\",\n                        value: daySchedule.close,\n                        onChange: (e) => {\n                          const newSchedule = {...settings.store_timings.schedule};\n                          newSchedule[day] = {...daySchedule, close: e.target.value};\n                          setSettings({\n                            ...settings,\n                            store_timings: {...settings.store_timings, schedule: newSchedule}\n                          });\n                        },\n                        className: \"px-3 py-2 border-2 border-gray-300 rounded-lg\"\n                      })\n                    )\n                  ),\n                  !daySchedule.enabled && React.createElement('p', {className: \"text-sm text-gray-500 ml-7\"}, \"Closed\")\n                );\n              })\n            )\n          ),\n\n          (canEdit('basic_store_timings') || canEdit('display_store_timings')) && React.createElement('button', {\n            onClick: () => {\n              if (canEdit('basic_store_timings')) {\n                handleSave('store_timings');\n              }\n              if (canEdit('display_store_timings')) {\n                handleSave('display');\n              }\n            },\n            disabled: saving,\n            className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n          }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Store Timings\")\n        ),\n\n        \/\/ DISPLAY SETTINGS SECTION\n        canEditSection('display') && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n          React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n            React.createElement('span', null, \"\ud83c\udfa8\"),\n            \"Display Settings\"\n          ),\n          \n          React.createElement('div', {className: \"grid grid-cols-2 gap-4 mb-4\"},\n            canEdit('display_cart') && React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-green-500 transition\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.display_settings.show_cart == 1,\n                onChange: (e) => {\n                  const newDisplay = {...settings.display_settings};\n                  newDisplay.show_cart = e.target.checked ? 1 : 0;\n                  setSettings({...settings, display_settings: newDisplay});\n                },\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-medium\"}, \"\ud83d\uded2 Show Cart\")\n            ),\n\n            canEdit('display_cart') && React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-green-500 transition\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.display_settings.show_add_to_cart == 1,\n                onChange: (e) => {\n                  const newDisplay = {...settings.display_settings};\n                  newDisplay.show_add_to_cart = e.target.checked ? 1 : 0;\n                  setSettings({...settings, display_settings: newDisplay});\n                },\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-medium\"}, \"\u2795 Add to Cart Button\")\n            ),\n\n            canEdit('display_prices') && React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-green-500 transition\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.display_settings.show_prices == 1,\n                onChange: (e) => {\n                  const newDisplay = {...settings.display_settings};\n                  newDisplay.show_prices = e.target.checked ? 1 : 0;\n                  setSettings({...settings, display_settings: newDisplay});\n                },\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udcb0 Show Prices\")\n            ),\n\n            canEdit('display_categories') && React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-green-500 transition\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.display_settings.show_categories == 1,\n                onChange: (e) => {\n                  const newDisplay = {...settings.display_settings};\n                  newDisplay.show_categories = e.target.checked ? 1 : 0;\n                  setSettings({...settings, display_settings: newDisplay});\n                },\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-medium\"}, \"\ud83c\udff7\ufe0f Show Categories\")\n            ),\n\n            canEdit('display_search') && React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-green-500 transition\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.display_settings.show_search == 1,\n                onChange: (e) => {\n                  const newDisplay = {...settings.display_settings};\n                  newDisplay.show_search = e.target.checked ? 1 : 0;\n                  setSettings({...settings, display_settings: newDisplay});\n                },\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udd0d Show Search\")\n            ),\n\n            canEdit('display_pwa') && React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer hover:border-green-500 transition\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.display_settings.enable_pwa == 1,\n                onChange: (e) => {\n                  const newDisplay = {...settings.display_settings};\n                  newDisplay.enable_pwa = e.target.checked ? 1 : 0;\n                  setSettings({...settings, display_settings: newDisplay});\n                },\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udcf1 Enable PWA\")\n            )\n          ),\n\n          canEdit('display_images') && React.createElement('div', {className: \"border-t-2 border-gray-200 pt-4 mt-4\"},\n            React.createElement('h4', {className: \"font-bold text-lg mb-3\"}, \"\ud83d\udcf8 Image Display Mode\"),\n            React.createElement('select', {\n              value: settings.display_settings.product_image_mode || 'all_images',\n              onChange: (e) => {\n                const newDisplay = {...settings.display_settings};\n                newDisplay.product_image_mode = e.target.value;\n                setSettings({...settings, display_settings: newDisplay});\n              },\n              className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\"\n            },\n              React.createElement('option', {value: \"all_images\"}, \"Show All Product Images\"),\n              React.createElement('option', {value: \"no_images\"}, \"No Product Images\"),\n              React.createElement('option', {value: \"category_image_only\"}, \"Category Image Only\")\n            )\n          ),\n\n          canEdit('display_layout') && React.createElement('div', {className: \"border-t-2 border-gray-200 pt-4 mt-4\"},\n            React.createElement('h4', {className: \"font-bold text-lg mb-3\"}, \"\ud83d\udccb List Display Style\"),\n            React.createElement('select', {\n              value: settings.display_settings.list_style || 'detailed',\n              onChange: (e) => {\n                const newDisplay = {...settings.display_settings};\n                newDisplay.list_style = e.target.value;\n                setSettings({...settings, display_settings: newDisplay});\n              },\n              className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\"\n            },\n              React.createElement('option', {value: \"detailed\"}, \"Detailed\"),\n              React.createElement('option', {value: \"compact\"}, \"Compact\"),\n              React.createElement('option', {value: \"minimal\"}, \"Minimal\"),\n              React.createElement('option', {value: \"table\"}, \"Table View\"),\n              React.createElement('option', {value: \"price_list\"}, \"Price List\")\n            )\n          ),\n\n          React.createElement('button', {\n            onClick: () => handleSave('display'),\n            disabled: saving,\n            className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n          }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Display Settings\")\n        ),\n\n        \/\/ PAYMENT SETTINGS SECTION\n        canEditSection('payment') && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n          React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n            React.createElement('span', null, \"\ud83d\udcb3\"),\n            \"Payment Settings\"\n          ),\n          \n          React.createElement('div', {className: \"grid grid-cols-2 gap-4\"},\n            React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.payment_settings.enable_cod == 1,\n                onChange: (e) => {\n                  const newPayment = {...settings.payment_settings};\n                  newPayment.enable_cod = e.target.checked ? 1 : 0;\n                  setSettings({...settings, payment_settings: newPayment});\n                },\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udcb5 Cash on Delivery\")\n            ),\n            React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer\"},\n              React.createElement('input', {\n                type: \"checkbox\",\n                checked: settings.payment_settings.enable_online == 1,\n                onChange: (e) => {\n                  const newPayment = {...settings.payment_settings};\n                  newPayment.enable_online = e.target.checked ? 1 : 0;\n                  setSettings({...settings, payment_settings: newPayment});\n                },\n                className: \"w-5 h-5\"\n              }),\n              React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udcb3 Online Payment\")\n            )\n          ),\n\n          React.createElement('button', {\n            onClick: () => handleSave('payment'),\n            disabled: saving,\n            className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n          }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Payment Settings\")\n        ),\n\n        \/\/ ADVANCED SETTINGS SECTION\n        canEditSection('advanced') && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n          React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n            React.createElement('span', null, \"\u26a1\"),\n            \"Advanced Settings\"\n          ),\n          \n          React.createElement('div', {className: \"space-y-4\"},\n            canEdit('advanced_tax') && React.createElement('div', null,\n              React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83d\udcca Tax Percentage (%)\"),\n              React.createElement('input', {\n                type: \"number\",\n                value: settings.advanced_settings.tax_percentage,\n                onChange: (e) => {\n                  const newAdvanced = {...settings.advanced_settings};\n                  newAdvanced.tax_percentage = e.target.value;\n                  setSettings({...settings, advanced_settings: newAdvanced});\n                },\n                className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\",\n                min: \"0\",\n                max: \"100\",\n                step: \"0.01\"\n              })\n            ),\n\n            canEdit('advanced_shipping') && React.createElement('div', null,\n              React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83d\ude9a Shipping Charge\"),\n              React.createElement('input', {\n                type: \"number\",\n                value: settings.advanced_settings.shipping_charge,\n                onChange: (e) => {\n                  const newAdvanced = {...settings.advanced_settings};\n                  newAdvanced.shipping_charge = e.target.value;\n                  setSettings({...settings, advanced_settings: newAdvanced});\n                },\n                className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\",\n                min: \"0\",\n                step: \"0.01\"\n              })\n            ),\n\n            canEdit('advanced_shipping') && React.createElement('div', null,\n              React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83c\udd93 Free Shipping Above\"),\n              React.createElement('input', {\n                type: \"number\",\n                value: settings.advanced_settings.free_shipping_above,\n                onChange: (e) => {\n                  const newAdvanced = {...settings.advanced_settings};\n                  newAdvanced.free_shipping_above = e.target.value;\n                  setSettings({...settings, advanced_settings: newAdvanced});\n                },\n                className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\",\n                min: \"0\",\n                step: \"0.01\"\n              }),\n              React.createElement('p', {className: \"text-sm text-gray-500 mt-1\"}, \"Set to 0 to disable free shipping\")\n            ),\n\n            canEdit('advanced') && React.createElement('div', {className: \"grid grid-cols-2 gap-4 border-t-2 border-gray-200 pt-4\"},\n              React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer\"},\n                React.createElement('input', {\n                  type: \"checkbox\",\n                  checked: settings.advanced_settings.enable_wishlist == 1,\n                  onChange: (e) => {\n                    const newAdvanced = {...settings.advanced_settings};\n                    newAdvanced.enable_wishlist = e.target.checked ? 1 : 0;\n                    setSettings({...settings, advanced_settings: newAdvanced});\n                  },\n                  className: \"w-5 h-5\"\n                }),\n                React.createElement('span', {className: \"font-medium\"}, \"\u2764\ufe0f Wishlist\")\n              ),\n              React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer\"},\n                React.createElement('input', {\n                  type: \"checkbox\",\n                  checked: settings.advanced_settings.enable_quick_view == 1,\n                  onChange: (e) => {\n                    const newAdvanced = {...settings.advanced_settings};\n                    newAdvanced.enable_quick_view = e.target.checked ? 1 : 0;\n                    setSettings({...settings, advanced_settings: newAdvanced});\n                  },\n                  className: \"w-5 h-5\"\n                }),\n                React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udc41\ufe0f Quick View\")\n              )\n            )\n          ),\n\n          React.createElement('button', {\n            onClick: () => handleSave('advanced'),\n            disabled: saving,\n            className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n          }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Advanced Settings\")\n        ),\n\t\t\/\/ DELIVERY SETTINGS SECTION\ncanEditSection('delivery') && settings.delivery_settings && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n  React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n    React.createElement('span', null, \"\ud83d\udccd\"),\n    \"Delivery Settings\"\n  ),\n  \n  React.createElement('div', {className: \"space-y-4\"},\n    config.isAdmin && React.createElement('div', {className: \"grid grid-cols-2 gap-4 mb-4\"},\n      React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer\"},\n        React.createElement('input', {\n          type: \"checkbox\",\n          checked: settings.delivery_settings.enable_pincode_check == 1,\n          onChange: (e) => setSettings({\n            ...settings,\n            delivery_settings: {...settings.delivery_settings, enable_pincode_check: e.target.checked ? 1 : 0}\n          }),\n          className: \"w-5 h-5\"\n        }),\n        React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udccc Pincode Verification\")\n      ),\n      React.createElement('label', {className: \"flex items-center gap-3 p-4 border-2 border-gray-300 rounded-xl cursor-pointer\"},\n        React.createElement('input', {\n          type: \"checkbox\",\n          checked: settings.delivery_settings.enable_distance_calc == 1,\n          onChange: (e) => setSettings({\n            ...settings,\n            delivery_settings: {...settings.delivery_settings, enable_distance_calc: e.target.checked ? 1 : 0}\n          }),\n          className: \"w-5 h-5\"\n        }),\n        React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udccf Distance Calculation\")\n      )\n    ),\n    \n    React.createElement('div', {className: \"p-4 bg-blue-50 rounded-xl\"},\n      React.createElement('p', {className: \"text-sm text-blue-800 mb-2\"}, \n        React.createElement('strong', null, \"\ud83d\udccc Pincode Zones: \"),\n        \"Configure delivery zones and pincodes from WordPress Admin \u2192 WhatsApp Store \u2192 Delivery Zones\"\n      ),\n      settings.delivery_settings.enable_distance_calc == 1 && React.createElement('p', {className: \"text-sm text-blue-800\"}, \n        React.createElement('strong', null, \"\ud83d\udccf Distance Calculation: \"),\n        \"Automatically calculates delivery charge based on customer's distance from store\"\n      )\n    )\n  ),\n\n  config.isAdmin && React.createElement('button', {\n    onClick: () => handleSave('delivery'),\n    disabled: saving,\n    className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n  }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Delivery Settings\")\n),\n\n\/\/ Logo Settings Section\n(canEdit('basic_store_name') || config.isAdmin) && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n  React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n    React.createElement('span', null, \"\ud83d\uddbc\ufe0f\"),\n    \"Logo & Branding\"\n  ),\n  \n  React.createElement('div', {className: \"space-y-4\"},\n    React.createElement('div', null,\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Store Logo URL\"),\n      React.createElement('input', {\n        type: \"url\",\n        value: settings.logo_url || '',\n        onChange: (e) => setSettings({...settings, logo_url: e.target.value}),\n        className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\",\n        placeholder: \"https:\/\/example.com\/logo.png\"\n      }),\n      React.createElement('p', {className: \"text-sm text-gray-500 mt-1\"}, \"Upload to WordPress Media Library and paste URL here\"),\n      settings.logo_url && React.createElement('img', {\n        src: settings.logo_url,\n        alt: \"Logo Preview\",\n        className: \"mt-3 max-w-[200px] rounded-xl shadow-md\",\n        onError: (e) => { e.target.style.display = 'none'; }\n      })\n    )\n  ),\n\n  React.createElement('button', {\n    onClick: () => handleSave('logo'),\n    disabled: saving,\n    className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n  }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Logo Settings\")\n),\n\n\/\/ Gradient Settings Section\nconfig.isAdmin && settings.gradient_settings && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n  React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n    React.createElement('span', null, \"\ud83c\udfa8\"),\n    \"Gradient Customization\"\n  ),\n  \n  React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer p-4 bg-gray-50 rounded-xl mb-4\"},\n    React.createElement('input', {\n      type: \"checkbox\",\n      checked: settings.gradient_settings.enable_gradients == 1,\n      onChange: (e) => setSettings({\n        ...settings, \n        gradient_settings: {...settings.gradient_settings, enable_gradients: e.target.checked ? 1 : 0}\n      }),\n      className: \"w-5 h-5\"\n    }),\n    React.createElement('span', {className: \"font-bold text-lg\"}, \"\u2728 Enable Gradient Backgrounds\")\n  ),\n  \n  settings.gradient_settings.enable_gradients == 1 && React.createElement('div', {className: \"space-y-4\"},\n    React.createElement('div', {className: \"grid grid-cols-2 gap-4\"},\n      React.createElement('div', null,\n        React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Header Gradient Start\"),\n        React.createElement('input', {\n          type: \"color\",\n          value: settings.gradient_settings.header_gradient_start || '#25D366',\n          onChange: (e) => setSettings({\n            ...settings,\n            gradient_settings: {...settings.gradient_settings, header_gradient_start: e.target.value}\n          }),\n          className: \"w-full h-16 cursor-pointer rounded-xl\"\n        })\n      ),\n      React.createElement('div', null,\n        React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Header Gradient End\"),\n        React.createElement('input', {\n          type: \"color\",\n          value: settings.gradient_settings.header_gradient_end || '#128C7E',\n          onChange: (e) => setSettings({\n            ...settings,\n            gradient_settings: {...settings.gradient_settings, header_gradient_end: e.target.value}\n          }),\n          className: \"w-full h-16 cursor-pointer rounded-xl\"\n        })\n      ),\n      React.createElement('div', null,\n        React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Card Gradient Start\"),\n        React.createElement('input', {\n          type: \"color\",\n          value: settings.gradient_settings.card_gradient_start || '#ffffff',\n          onChange: (e) => setSettings({\n            ...settings,\n            gradient_settings: {...settings.gradient_settings, card_gradient_start: e.target.value}\n          }),\n          className: \"w-full h-16 cursor-pointer rounded-xl\"\n        })\n      ),\n      React.createElement('div', null,\n        React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Card Gradient End\"),\n        React.createElement('input', {\n          type: \"color\",\n          value: settings.gradient_settings.card_gradient_end || '#f8f9fa',\n          onChange: (e) => setSettings({\n            ...settings,\n            gradient_settings: {...settings.gradient_settings, card_gradient_end: e.target.value}\n          }),\n          className: \"w-full h-16 cursor-pointer rounded-xl\"\n        })\n      ),\n      React.createElement('div', null,\n        React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Button Gradient Start\"),\n        React.createElement('input', {\n          type: \"color\",\n          value: settings.gradient_settings.button_gradient_start || '#25D366',\n          onChange: (e) => setSettings({\n            ...settings,\n            gradient_settings: {...settings.gradient_settings, button_gradient_start: e.target.value}\n          }),\n          className: \"w-full h-16 cursor-pointer rounded-xl\"\n        })\n      ),\n      React.createElement('div', null,\n        React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Button Gradient End\"),\n        React.createElement('input', {\n          type: \"color\",\n          value: settings.gradient_settings.button_gradient_end || '#128C7E',\n          onChange: (e) => setSettings({\n            ...settings,\n            gradient_settings: {...settings.gradient_settings, button_gradient_end: e.target.value}\n          }),\n          className: \"w-full h-16 cursor-pointer rounded-xl\"\n        })\n      )\n    ),\n    \n    React.createElement('div', null,\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"Gradient Direction\"),\n      React.createElement('select', {\n        value: settings.gradient_settings.gradient_direction || 'to right',\n        onChange: (e) => setSettings({\n          ...settings,\n          gradient_settings: {...settings.gradient_settings, gradient_direction: e.target.value}\n        }),\n        className: \"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-green-500 transition\"\n      },\n        React.createElement('option', {value: \"to right\"}, \"Left to Right \u2192\"),\n        React.createElement('option', {value: \"to left\"}, \"Right to Left \u2190\"),\n        React.createElement('option', {value: \"to bottom\"}, \"Top to Bottom \u2193\"),\n        React.createElement('option', {value: \"to top\"}, \"Bottom to Top \u2191\"),\n        React.createElement('option', {value: \"135deg\"}, \"Diagonal \u2198\"),\n        React.createElement('option', {value: \"to bottom right\"}, \"To Bottom Right \u2198\")\n      )\n    )\n  ),\n\n  React.createElement('button', {\n    onClick: () => handleSave('gradients'),\n    disabled: saving,\n    className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n  }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Gradient Settings\")\n),\n\/\/ Element Color Settings Section\nconfig.isAdmin && settings.color_settings && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n  React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n    React.createElement('span', null, \"\ud83c\udfa8\"),\n    \"Element Color Customization\"\n  ),\n  React.createElement('p', {className: \"text-gray-600 mb-4\"}, \"Customize colors for specific elements in your store\"),\n  \n  React.createElement('div', {className: \"grid grid-cols-1 md:grid-cols-2 gap-4\"},\n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83d\udcdd Product Name Color\"),\n      React.createElement('input', {\n        type: \"color\",\n        value: settings.color_settings.product_name_color || '#1F2937',\n        onChange: (e) => setSettings({\n          ...settings,\n          color_settings: {...settings.color_settings, product_name_color: e.target.value}\n        }),\n        className: \"w-full h-16 cursor-pointer rounded-xl\"\n      }),\n      React.createElement('p', {className: \"text-sm text-gray-500 mt-2\"}, \"Title text color on product cards\")\n    ),\n    \n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83d\udcb0 Product Price Color\"),\n      React.createElement('input', {\n        type: \"color\",\n        value: settings.color_settings.product_price_color || '#25D366',\n        onChange: (e) => setSettings({\n          ...settings,\n          color_settings: {...settings.color_settings, product_price_color: e.target.value}\n        }),\n        className: \"w-full h-16 cursor-pointer rounded-xl\"\n      }),\n      React.createElement('p', {className: \"text-sm text-gray-500 mt-2\"}, \"Price text color\")\n    ),\n    \n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83d\udcc4 Description Color\"),\n      React.createElement('input', {\n        type: \"color\",\n        value: settings.color_settings.product_description_color || '#6B7280',\n        onChange: (e) => setSettings({\n          ...settings,\n          color_settings: {...settings.color_settings, product_description_color: e.target.value}\n        }),\n        className: \"w-full h-16 cursor-pointer rounded-xl\"\n      }),\n      React.createElement('p', {className: \"text-sm text-gray-500 mt-2\"}, \"Product description text color\")\n    ),\n    \n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83d\udd25 Sale Badge Color\"),\n      React.createElement('input', {\n        type: \"color\",\n        value: settings.color_settings.sale_badge_color || '#EF4444',\n        onChange: (e) => setSettings({\n          ...settings,\n          color_settings: {...settings.color_settings, sale_badge_color: e.target.value}\n        }),\n        className: \"w-full h-16 cursor-pointer rounded-xl\"\n      }),\n      React.createElement('p', {className: \"text-sm text-gray-500 mt-2\"}, \"Sale badge background color\")\n    ),\n    \n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83c\udff7\ufe0f Category Badge Color\"),\n      React.createElement('input', {\n        type: \"color\",\n        value: settings.color_settings.category_badge_color || '#8B5CF6',\n        onChange: (e) => setSettings({\n          ...settings,\n          color_settings: {...settings.color_settings, category_badge_color: e.target.value}\n        }),\n        className: \"w-full h-16 cursor-pointer rounded-xl\"\n      }),\n      React.createElement('p', {className: \"text-sm text-gray-500 mt-2\"}, \"Category badge background color\")\n    ),\n    \n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83d\udce6 Stock Badge Color\"),\n      React.createElement('input', {\n        type: \"color\",\n        value: settings.color_settings.stock_badge_color || '#10B981',\n        onChange: (e) => setSettings({\n          ...settings,\n          color_settings: {...settings.color_settings, stock_badge_color: e.target.value}\n        }),\n        className: \"w-full h-16 cursor-pointer rounded-xl\"\n      }),\n      React.createElement('p', {className: \"text-sm text-gray-500 mt-2\"}, \"Stock status badge color\")\n    ),\n    \n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83c\udfa8 Variation Label Color\"),\n      React.createElement('input', {\n        type: \"color\",\n        value: settings.color_settings.variation_label_color || '#4B5563',\n        onChange: (e) => setSettings({\n          ...settings,\n          color_settings: {...settings.color_settings, variation_label_color: e.target.value}\n        }),\n        className: \"w-full h-16 cursor-pointer rounded-xl\"\n      }),\n      React.createElement('p', {className: \"text-sm text-gray-500 mt-2\"}, \"Variation name text color\")\n    ),\n    \n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('label', {className: \"block font-semibold mb-2\"}, \"\ud83d\udcb5 Variation Price Color\"),\n      React.createElement('input', {\n        type: \"color\",\n        value: settings.color_settings.variation_price_color || '#059669',\n        onChange: (e) => setSettings({\n          ...settings,\n          color_settings: {...settings.color_settings, variation_price_color: e.target.value}\n        }),\n        className: \"w-full h-16 cursor-pointer rounded-xl\"\n      }),\n      React.createElement('p', {className: \"text-sm text-gray-500 mt-2\"}, \"Variation price text color\")\n    )\n  ),\n  \n  React.createElement('div', {className: \"mt-6 p-4 bg-blue-50 rounded-xl border-2 border-blue-200\"},\n    React.createElement('h4', {className: \"font-bold text-blue-900 mb-2\"}, \"\ud83d\udca1 Color Tips\"),\n    React.createElement('ul', {className: \"text-sm text-blue-800 space-y-1 ml-4 list-disc\"},\n      React.createElement('li', null, \"Use contrasting colors for better readability\"),\n      React.createElement('li', null, \"Keep brand consistency across all colors\"),\n      React.createElement('li', null, \"Test colors on both light and dark backgrounds\"),\n      React.createElement('li', null, \"Consider accessibility - ensure sufficient contrast\")\n    )\n  ),\n\n  React.createElement('button', {\n    onClick: () => handleSave('colors'),\n    disabled: saving,\n    className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n  }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Color Settings\")\n),\n\n\/\/ Visibility Settings Section\nconfig.isAdmin && settings.visibility_settings && React.createElement('div', {className: \"bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-200\"},\n  React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n    React.createElement('span', null, \"\ud83d\udc41\ufe0f\"),\n    \"Element Visibility Controls\"\n  ),\n  React.createElement('p', {className: \"text-gray-600 mb-4\"}, \"Show or hide specific elements on your product cards\"),\n  \n  React.createElement('div', {className: \"grid grid-cols-1 md:grid-cols-2 gap-4\"},\n    \/\/ Product Elements\n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('h4', {className: \"font-bold text-lg mb-3 text-gray-800\"}, \"\ud83d\udce6 Product Elements\"),\n      React.createElement('div', {className: \"space-y-3\"},\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_product_name !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_product_name: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udcdd Product Name\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_product_image !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_product_image: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\uddbc\ufe0f Product Image\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_product_price !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_product_price: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udcb0 Product Price\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_product_description !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_product_description: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udcc4 Product Description\")\n        )\n      )\n    ),\n    \n    \/\/ Badges\n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('h4', {className: \"font-bold text-lg mb-3 text-gray-800\"}, \"\ud83c\udff7\ufe0f Badges & Labels\"),\n      React.createElement('div', {className: \"space-y-3\"},\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_category_badge !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_category_badge: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83c\udff7\ufe0f Category Badge\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_sale_badge !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_sale_badge: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udd25 Sale Badge\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_stock_badge !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_stock_badge: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udce6 Stock Badge\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_featured_badge !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_featured_badge: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\u2b50 Featured Badge\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_variable_badge !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_variable_badge: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83c\udfa8 Variable Product Badge\")\n        )\n      )\n    ),\n    \n    \/\/ Variations\n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('h4', {className: \"font-bold text-lg mb-3 text-gray-800\"}, \"\ud83c\udfa8 Product Variations\"),\n      React.createElement('div', {className: \"space-y-3\"},\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_variations_list !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_variations_list: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udccb Variations List\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_variation_prices !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_variation_prices: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udcb5 Variation Prices\")\n        )\n      ),\n      React.createElement('p', {className: \"text-xs text-gray-500 mt-3 p-2 bg-gray-50 rounded\"}, \n        \"Shows variation options directly on product cards (useful for digital menus)\"\n      )\n    ),\n    \n    \/\/ Action Buttons\n    React.createElement('div', {className: \"p-4 border-2 border-gray-200 rounded-xl\"},\n      React.createElement('h4', {className: \"font-bold text-lg mb-3 text-gray-800\"}, \"\ud83d\udd18 Action Buttons\"),\n      React.createElement('div', {className: \"space-y-3\"},\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_add_to_cart_button !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_add_to_cart_button: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\uded2 Add to Cart Button\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_quick_view_button !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_quick_view_button: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\ud83d\udc41\ufe0f Quick View Button\")\n        ),\n        React.createElement('label', {className: \"flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition\"},\n          React.createElement('input', {\n            type: \"checkbox\",\n            checked: settings.visibility_settings.show_wishlist_button !== 0,\n            onChange: (e) => setSettings({\n              ...settings,\n              visibility_settings: {...settings.visibility_settings, show_wishlist_button: e.target.checked ? 1 : 0}\n            }),\n            className: \"w-5 h-5\"\n          }),\n          React.createElement('span', {className: \"font-medium\"}, \"\u2764\ufe0f Wishlist Button\")\n        )\n      )\n    )\n  ),\n  \n  React.createElement('div', {className: \"mt-6 p-4 bg-yellow-50 rounded-xl border-2 border-yellow-200\"},\n    React.createElement('h4', {className: \"font-bold text-yellow-900 mb-2\"}, \"\u26a0\ufe0f Important Notes\"),\n    React.createElement('ul', {className: \"text-sm text-yellow-800 space-y-1 ml-4 list-disc\"},\n      React.createElement('li', null, \"Disabling Product Name is not recommended\"),\n      React.createElement('li', null, \"Quick View requires images to be visible\"),\n      React.createElement('li', null, \"Variations list is best for digital menu mode\"),\n      React.createElement('li', null, \"Add to Cart button is hidden in digital menu mode by default\"),\n      React.createElement('li', null, \"Changes apply to all product display modes (grid, list, table)\")\n    )\n  ),\n\n  React.createElement('button', {\n    onClick: () => handleSave('visibility'),\n    disabled: saving,\n    className: \"w-full mt-6 py-4 wsp-primary wsp-button-text rounded-2xl font-bold text-xl shadow-lg hover:shadow-2xl transition\"\n  }, saving ? \"\u23f3 Saving...\" : \"\ud83d\udcbe Save Visibility Settings\")\n),\n\n\/\/ Preview Section\nconfig.isAdmin && React.createElement('div', {className: \"bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl shadow-lg p-6 border-2 border-purple-200\"},\n  React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3\"},\n    React.createElement('span', null, \"\ud83d\udc40\"),\n    \"Live Preview\"\n  ),\n  React.createElement('p', {className: \"text-gray-700 mb-4\"}, \"To see your changes in action:\"),\n  React.createElement('ol', {className: \"list-decimal ml-6 space-y-2 text-gray-700\"},\n    React.createElement('li', null, \"Save your settings using the buttons above\"),\n    React.createElement('li', null, \"Close this settings panel\"),\n    React.createElement('li', null, \"Refresh the page to see all changes applied\"),\n    React.createElement('li', null, \"Test on different devices (mobile, tablet, desktop)\")\n  ),\n  React.createElement('div', {className: \"mt-4 p-3 bg-white rounded-lg border border-purple-200\"},\n    React.createElement('p', {className: \"text-sm text-purple-800 font-semibold\"}, \n      \"\ud83d\udca1 Pro Tip: Test your color combinations for accessibility and readability before finalizing!\"\n    )\n  )\n),\n\/\/ Reset to Defaults Section\nconfig.isAdmin && React.createElement('div', {className: \"bg-red-50 rounded-2xl shadow-lg p-6 border-2 border-red-200\"},\n  React.createElement('h3', {className: \"text-2xl font-bold mb-4 flex items-center gap-3 text-red-800\"},\n    React.createElement('span', null, \"\u26a0\ufe0f\"),\n    \"Danger Zone\"\n  ),\n  React.createElement('p', {className: \"text-red-700 mb-4\"}, \n    \"Reset all customizations to default values. This action cannot be undone!\"\n  ),\n  React.createElement('button', {\n    onClick: () => {\n      if (confirm('\u26a0\ufe0f Are you sure you want to reset ALL customizations to default values?\\n\\nThis will reset:\\n- Logo\\n- All colors\\n- Gradients\\n- Visibility settings\\n\\nThis action CANNOT be undone!')) {\n        if (confirm('\u26a0\ufe0f FINAL CONFIRMATION\\n\\nThis will permanently reset all your customization settings. Are you absolutely sure?')) {\n          \/\/ Reset all settings to defaults\n          const defaultSettings = {\n            logo_url: '',\n            gradient_settings: {\n              enable_gradients: 0,\n              header_gradient_start: '#25D366',\n              header_gradient_end: '#128C7E',\n              card_gradient_start: '#ffffff',\n              card_gradient_end: '#f8f9fa',\n              button_gradient_start: '#25D366',\n              button_gradient_end: '#128C7E',\n              gradient_direction: 'to right'\n            },\n            color_settings: {\n              product_name_color: '#1F2937',\n              product_price_color: '#25D366',\n              product_description_color: '#6B7280',\n              sale_badge_color: '#EF4444',\n              category_badge_color: '#8B5CF6',\n              stock_badge_color: '#10B981',\n              variation_label_color: '#4B5563',\n              variation_price_color: '#059669'\n            },\n            visibility_settings: {\n              show_product_name: 1,\n              show_product_image: 1,\n              show_product_price: 1,\n              show_product_description: 1,\n              show_category_badge: 1,\n              show_sale_badge: 1,\n              show_stock_badge: 1,\n              show_featured_badge: 1,\n              show_variable_badge: 1,\n              show_variations_list: 1,\n              show_variation_prices: 1,\n              show_add_to_cart_button: 1,\n              show_quick_view_button: 1,\n              show_wishlist_button: 1\n            }\n          };\n          \n          setSettings({\n            ...settings,\n            logo_url: defaultSettings.logo_url,\n            gradient_settings: defaultSettings.gradient_settings,\n            color_settings: defaultSettings.color_settings,\n            visibility_settings: defaultSettings.visibility_settings\n          });\n          \n          \/\/ Save each setting type\n          ['logo', 'gradients', 'colors', 'visibility'].forEach(type => {\n            const formData = new FormData();\n            formData.append('action', 'wsp_update_settings');\n            formData.append('settings_type', type);\n            formData.append('settings_data', JSON.stringify(\n              type === 'logo' ? {logo_url: defaultSettings.logo_url} :\n              type === 'gradients' ? defaultSettings.gradient_settings :\n              type === 'colors' ? defaultSettings.color_settings :\n              defaultSettings.visibility_settings\n            ));\n            \n            fetch(config.ajaxUrl, {\n              method: 'POST',\n              body: formData\n            });\n          });\n          \n          alert('\u2705 All settings have been reset to defaults!\\n\\nPlease refresh the page to see the changes.');\n        }\n      }\n    },\n    disabled: saving,\n    className: \"px-6 py-4 bg-red-600 text-white rounded-2xl font-bold text-lg hover:bg-red-700 transition shadow-lg\"\n  }, \"\ud83d\udd04 Reset All Customizations to Defaults\")\n),\n        \/\/ NO EDITABLE FIELDS MESSAGE\n        editableFieldsCount === 0 && React.createElement('div', {className: \"text-center py-16 bg-gray-50 rounded-2xl\"},\n          React.createElement('div', {className: \"text-6xl mb-4\"}, \"\ud83d\udd12\"),\n          React.createElement('p', {className: \"text-2xl font-bold text-gray-700\"}, \"No Editable Settings\"),\n          React.createElement('p', {className: \"text-gray-500 mt-2\"}, \"You don't have permission to edit any settings\"),\n          React.createElement('p', {className: \"text-sm text-gray-400 mt-4\"}, \n            \"Contact your administrator to request permissions\"\n          )\n        )\n\t\t\n\t\t\n      )\n    )\n  );\n}\n\n\/\/ ==================== MAIN APP COMPONENT ====================\n\nfunction App() {\n  const [view, setView] = React.useState('store');\n  const [products, setProducts] = React.useState([]);\n  const [categories, setCategories] = React.useState([]);\n  const [loading, setLoading] = React.useState(true);\n  const [cart, setCart] = React.useState([]);\n  const [showCart, setShowCart] = React.useState(false);\n  const [search, setSearch] = React.useState('');\n  const [category, setCategory] = React.useState('All');\n  const [viewMode, setViewMode] = React.useState('grid');\n  const [deferredPrompt, setDeferredPrompt] = React.useState(null);\n  const [showInstall, setShowInstall] = React.useState(false);\n  const [wishlist, setWishlist] = React.useState([]);\n  const [showSettings, setShowSettings] = React.useState(false);\n\n  const showPWAInstall = config.display.enable_pwa == 1 && config.display.show_pwa_install == 1;\n  const showCartButton = config.display.show_cart == 1;\n  const showAddToCartBtn = config.display.show_add_to_cart == 1;\n  const showPrices = config.display.show_prices == 1;\n  const showStock = config.display.show_stock == 1;\n  const showCategories = config.display.show_categories == 1;\n  const showSearch = config.display.show_search == 1;\n  const showDescription = config.display.show_description == 1;\n  const showSaleBadge = config.display.show_sale_badge == 1;\n  const showOutOfStock = config.display.show_out_of_stock == 1;\n  \n  const enableWishlist = config.advanced.enable_wishlist == 1;\n\n  React.useEffect(() => {\n    if (!showPWAInstall) return;\n    \n    const handler = (e) => {\n      e.preventDefault();\n      setDeferredPrompt(e);\n      setTimeout(() => setShowInstall(true), 2000);\n    };\n    \n    window.addEventListener('beforeinstallprompt', handler);\n    \n    if (window.matchMedia('(display-mode: standalone)').matches) {\n      setShowInstall(false);\n    }\n    \n    return () => window.removeEventListener('beforeinstallprompt', handler);\n  }, [showPWAInstall]);\n\n  const handleInstallPWA = async () => {\n    if (!deferredPrompt) {\n      alert('Install prompt not available. Try adding to home screen manually from your browser menu.');\n      return;\n    }\n    \n    try {\n      await deferredPrompt.prompt();\n      const choiceResult = await deferredPrompt.userChoice;\n      \n      if (choiceResult.outcome === 'accepted') {\n        alert('\u2705 App installed! Check your home screen.');\n      }\n      \n      setDeferredPrompt(null);\n      setShowInstall(false);\n    } catch (err) {\n      console.error('Install error:', err);\n      alert('Installation failed. Try adding to home screen from your browser menu.');\n    }\n  };\n\n  const loadProducts = () => {\n    fetch(config.ajaxUrl + '?action=wsp_get_products')\n      .then(res => res.json())\n      .then(data => {\n        if (data.success) {\n          setProducts(data.data || []);\n        }\n        setLoading(false);\n      })\n      .catch(err => {\n        console.error('Error loading products:', err);\n        setLoading(false);\n      });\n  };\n\n  const loadCategories = () => {\n    fetch(config.ajaxUrl + '?action=wsp_get_categories')\n      .then(res => res.json())\n      .then(data => {\n        if (data.success) {\n          setCategories(data.data || []);\n        }\n      });\n  };\n\n  React.useEffect(() => {\n    loadProducts();\n    loadCategories();\n  }, []);\n\n  const handleAdminClick = () => {\n    if (!config.isLoggedIn) {\n      if (confirm('Login to manage products?')) {\n        window.location.href = config.loginUrl;\n      }\n      return;\n    }\n    \n    if (!config.canManage) {\n      alert('\u274c No permission');\n      return;\n    }\n    \n    setView('admin');\n  };\n\n  const addToCart = (p) => {\n    const cartKey = p.selectedVariation ? `${p.id}-${p.selectedVariation.id}` : p.id;\n    const ex = cart.find(i => {\n      const itemKey = i.selectedVariation ? `${i.id}-${i.selectedVariation.id}` : i.id;\n      return itemKey === cartKey;\n    });\n    \n    if (ex) {\n      setCart(cart.map(i => {\n        const itemKey = i.selectedVariation ? `${i.id}-${i.selectedVariation.id}` : i.id;\n        return itemKey === cartKey ? {...i, qty: i.qty + 1} : i;\n      }));\n    } else {\n      setCart([...cart, {...p, qty: 1, cartKey}]);\n    }\n  };\n\n  const toggleWishlist = (productId) => {\n    if (wishlist.includes(productId)) {\n      setWishlist(wishlist.filter(id => id !== productId));\n    } else {\n      setWishlist([...wishlist, productId]);\n    }\n  };\n\n  const updateQty = (cartKey, change) => {\n    setCart(cart.map(i => {\n      if ((i.cartKey || i.id) === cartKey) {\n        const newQty = i.qty + change;\n        return newQty > 0 ? {...i, qty: newQty} : null;\n      }\n      return i;\n    }).filter(Boolean));\n  };\n\n  const removeItem = (cartKey) => setCart(cart.filter(i => (i.cartKey || i.id) !== cartKey));\n\n  const sendOrder = () => {\n    if (!config.whatsapp) {\n      alert('WhatsApp not configured');\n      return;\n    }\n    \n    const subtotal = cart.reduce((s, i) => {\n      const itemPrice = i.selectedVariation ? i.selectedVariation.price : (i.sale_price > 0 ? i.sale_price : i.price);\n      return s + itemPrice * i.qty;\n    }, 0);\n    \n    let total = subtotal;\n    \n    if (config.advanced.tax_percentage > 0) {\n      total += (subtotal * config.advanced.tax_percentage \/ 100);\n    }\n    \n    if (config.advanced.shipping_charge > 0) {\n      if (config.advanced.free_shipping_above > 0 && subtotal >= config.advanced.free_shipping_above) {\n        \/\/ Free shipping\n      } else {\n        total += parseFloat(config.advanced.shipping_charge);\n      }\n    }\n    \n    if (config.minOrder > 0 && total < config.minOrder) {\n      alert(`Minimum order amount is ${config.currency}${config.minOrder.toFixed(2)}. Your cart total is ${config.currency}${total.toFixed(2)}`);\n      return;\n    }\n    \n    let msg = `\ud83d\udecd\ufe0f New Order from ${config.name}\\n\\n`;\n    cart.forEach(i => {\n      const itemPrice = i.selectedVariation ? i.selectedVariation.price : (i.sale_price > 0 ? i.sale_price : i.price);\n      const sub = itemPrice * i.qty;\n      const variation = i.selectedVariation ? ` (${i.selectedVariation.name})` : '';\n      msg += `${i.qty}x ${i.name}${variation} - ${config.currency}${sub.toFixed(2)}\\n`;\n    });\n    \n    msg += `\\nTotal: ${config.currency}${total.toFixed(2)}`;\n    \n    window.open(`https:\/\/wa.me\/${config.whatsapp.replace(\/[^0-9]\/g, '')}?text=${encodeURIComponent(msg)}`);\n    setCart([]);\n    setShowCart(false);\n  };\n\n  const saveProduct = (product) => {\n    const formData = new FormData();\n    formData.append('action', 'wsp_save_product');\n    formData.append('id', product.id);\n    formData.append('name', product.name);\n    formData.append('price', product.price);\n    formData.append('sale_price', product.sale_price || 0);\n    formData.append('category', product.category);\n    formData.append('desc', product.description);\n    formData.append('stock', product.stock);\n    formData.append('image_url', product.image_url || '');\n    formData.append('type', product.type);\n    formData.append('featured', product.featured || 0);\n    formData.append('images', JSON.stringify(product.images));\n    formData.append('variations', JSON.stringify(product.variations));\n\n    fetch(config.ajaxUrl, {\n      method: 'POST',\n      body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n      if (data.success) {\n        loadProducts();\n        loadCategories();\n        alert('\u2705 Product saved successfully!');\n      } else {\n        alert('Error: ' + (data.data || 'Unknown error'));\n      }\n    })\n    .catch(err => {\n      console.error('Error:', err);\n      alert('Failed to save product');\n    });\n  };\n\n  const deleteProduct = (id) => {\n    if (!confirm('Delete this product?')) return;\n\n    const formData = new FormData();\n    formData.append('action', 'wsp_delete_product');\n    formData.append('id', id);\n\n    fetch(config.ajaxUrl, {\n      method: 'POST',\n      body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n      if (data.success) {\n        loadProducts();\n        alert('\u2705 Product deleted!');\n      }\n    });\n  };\n\n  const allCategories = ['All', ...categories];\n  let filtered = products.filter(p => {\n    const matchesSearch = p.name.toLowerCase().includes(search.toLowerCase());\n    const matchesCategory = category === 'All' || p.category === category;\n    const inStock = showOutOfStock || p.stock > 0;\n    return matchesSearch && matchesCategory && inStock;\n  });\n\n  const total = cart.reduce((s, i) => {\n    const itemPrice = i.selectedVariation ? i.selectedVariation.price : (i.sale_price > 0 ? i.sale_price : i.price);\n    return s + itemPrice * i.qty;\n  }, 0);\n  const count = cart.reduce((s, i) => s + i.qty, 0);\n\n  if (loading) {\n    return React.createElement('div', {className: \"flex items-center justify-center min-h-screen\"},\n      React.createElement('div', {className: \"text-center\"},\n        React.createElement('div', {className: \"text-8xl mb-6\"}, \"\ud83d\udecd\ufe0f\"),\n        React.createElement('div', {className: \"text-3xl font-bold wsp-text\"}, \"Loading...\")\n      )\n    );\n  }\n\n  return React.createElement('div', {className: \"min-h-screen bg-gradient-to-br from-gray-50 to-gray-100\"},\n    showPWAInstall && showInstall && \n      React.createElement('div', {className: \"fixed top-20 right-4 z-50 bg-white rounded-2xl shadow-2xl p-4 border-2 border-green-400 animate-bounce\"},\n        React.createElement('button', {\n          onClick: handleInstallPWA,\n          className: \"flex items-center gap-3 px-6 py-3 wsp-primary wsp-button-text rounded-xl font-bold\"\n        }, \"\ud83d\udcf1 Install App\"),\n        React.createElement('button', {\n          onClick: () => setShowInstall(false),\n          className: \"absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold\"\n        }, \"\u00d7\")\n      ),\n    \n    React.createElement('header', {className: \"wsp-primary text-white shadow-xl sticky top-0 z-50\"},\n  React.createElement('div', {className: \"max-w-7xl mx-auto px-4 sm:px-6 py-5 sm:py-6 flex items-center justify-between\"},\n    React.createElement('div', {className: \"flex items-center gap-4\"},\n      config.logoUrl && React.createElement('img', {\n        src: config.logoUrl,\n        alt: config.name,\n        className: \"wsp-logo\",\n        onError: (e) => { e.target.style.display = 'none'; }\n      }),\n      React.createElement('div', null,\n        React.createElement('h1', {className: \"text-3xl sm:text-4xl font-bold tracking-tight\"}, config.name),\n        React.createElement('p', {className: \"text-base sm:text-lg opacity-90 mt-1\"}, config.desc)\n      )\n    ),\n        React.createElement('div', {className: \"flex gap-3\"},\n          config.canViewSettings && view === 'store' && React.createElement('button', {\n            onClick: () => setShowSettings(true),\n            className: \"p-4 bg-white bg-opacity-20 rounded-xl hover:bg-opacity-30 transition text-3xl\",\n            title: \"Settings\"\n          }, \"\u2699\ufe0f\"),\n          \n          view === 'store' && enableWishlist && \n            React.createElement('button', {\n              onClick: () => alert('Wishlist: ' + wishlist.length + ' items'),\n              className: \"relative p-4 bg-white bg-opacity-20 rounded-xl hover:bg-opacity-30 transition\"\n            },\n              React.createElement('span', {className: \"text-3xl\"}, \"\u2764\ufe0f\"),\n              wishlist.length > 0 && React.createElement('span', {\n                className: \"absolute -top-2 -right-2 bg-red-500 text-white text-sm font-bold rounded-full w-8 h-8 flex items-center justify-center shadow-lg\"\n              }, wishlist.length)\n            ),\n          view === 'store' && showCartButton && config.storeMode !== 'digital_menu' && \n            React.createElement('button', {\n              onClick: () => setShowCart(true),\n\t\t\t  className: \"relative p-4 bg-white bg-opacity-20 rounded-xl hover:bg-opacity-30 transition\"\n            },\n              React.createElement('span', {className: \"text-3xl\"}, \"\ud83d\uded2\"),\n              count > 0 && React.createElement('span', {\n                className: \"absolute -top-2 -right-2 bg-red-500 text-white text-sm font-bold rounded-full w-8 h-8 flex items-center justify-center shadow-lg\"\n              }, count)\n            ),\n          React.createElement('button', {\n            onClick: () => view === 'store' ? handleAdminClick() : setView('store'),\n            className: \"px-5 py-3 bg-white wsp-text rounded-xl hover:shadow-lg transition font-bold text-lg\"\n          }, view === 'store' ? (config.canManage ? '\u2699\ufe0f Admin' : '\ud83d\udd10 Login') : '\ud83e\udea7 Store'),\n          config.isLoggedIn && view === 'admin' && \n            React.createElement('a', {\n              href: config.logoutUrl,\n              className: \"px-5 py-3 bg-red-500 text-white rounded-xl hover:shadow-lg transition font-bold text-lg\"\n            }, \"Logout\")\n        )\n      )\n    ),\n\n    React.createElement('main', {className: \"max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-10\"},\n      view === 'store' ? \n        React.createElement(StoreView, {\n          products: filtered,\n          search: search,\n          setSearch: setSearch,\n          addToCart: addToCart,\n          categories: allCategories,\n          category: category,\n          setCategory: setCategory,\n          viewMode: viewMode,\n          setViewMode: setViewMode,\n          showAddToCart: showAddToCartBtn,\n          showPrices: showPrices,\n          showDescription: showDescription,\n          showCategories: showCategories,\n          showSearch: showSearch,\n          showStock: showStock,\n          showSaleBadge: showSaleBadge,\n          enableWishlist: enableWishlist,\n          wishlist: wishlist,\n          toggleWishlist: toggleWishlist\n        })\n      :\n        config.canManage && React.createElement(AdminView, {\n          products: products,\n          categories: categories,\n          saveProduct: saveProduct,\n          deleteProduct: deleteProduct,\n          loadCategories: loadCategories\n        })\n    ),\n\n    showCart && config.storeMode !== 'digital_menu' && \n      React.createElement(CartModal, {\n        cart: cart,\n        removeItem: removeItem,\n        updateQty: updateQty,\n        total: total,\n        count: count,\n        sendOrder: sendOrder,\n        setShowCart: setShowCart\n      }),\n\n    showSettings && React.createElement(FrontendSettings, {\n      onClose: () => setShowSettings(false)\n    })\n  );\n}\n\n\/\/ ==================== RENDER APP ====================\n\nReactDOM.render(React.createElement(App), document.getElementById('wsp-root'));\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"off","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"off","ocean_display_footer_bottom":"off","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry","entry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/honeyai.in\/virsa\/wp-json\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/honeyai.in\/virsa\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/honeyai.in\/virsa\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/honeyai.in\/virsa\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/honeyai.in\/virsa\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":2,"href":"https:\/\/honeyai.in\/virsa\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/honeyai.in\/virsa\/wp-json\/wp\/v2\/pages\/5\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/honeyai.in\/virsa\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}