{% extends "base.html" %}
{% block page_title %}3D Supermarket{% endblock %}

{% block head %}
<script>document.documentElement.classList.add('sm3d-game-active');</script>
<style>
html.sm3d-game-active { --sm3d-overlay-top:0px; }
html.sm3d-game-active body { overflow:hidden; }
html.sm3d-game-active .main-header,
html.sm3d-game-active .mobile-nav-drawer,
html.sm3d-game-active .mobile-bottom-nav,
html.sm3d-game-active .renewal-cta-banner,
html.sm3d-game-active .site-header,
html.sm3d-game-active .site-nav,
html.sm3d-game-active [data-site-header],
html.sm3d-game-active [data-site-nav],
html.sm3d-game-active .site-cta,
html.sm3d-game-active .cta-banner,
html.sm3d-game-active .call-to-action,
html.sm3d-game-active #site-cta,
html.sm3d-game-active #mobile-bottom-nav,
html.sm3d-game-active body > nav,
html.sm3d-game-active body > header { display:none !important; }
</style>
<link rel="stylesheet" href="/plugins/supermarket-3d/assets/css/supermarket-3d.css">
<script type="importmap">
{
  "imports": {
    "three": "/plugins/supermarket-3d/assets/vendor/three/three.module.js",
    "three/addons/": "/plugins/supermarket-3d/assets/vendor/three/examples/jsm/"
  }
}
</script>
{% endblock %}

{% block content %}
<div id="sm3d-root"
  data-store-name="{{ brand_name | default(value=tenant_name) | default(value='Store') }} 3D"
  data-camera-mode="{{ plugin_settings.camera_mode | default(value='first_person') }}"
  data-enable-running="{{ plugin_settings.enable_running | default(value='true') }}"
  data-show-price-tags="{{ plugin_settings.show_price_tags | default(value='true') }}"
  data-show-product-info="{{ plugin_settings.show_product_info | default(value='true') }}"
  data-enable-checkout="{{ plugin_settings.enable_checkout | default(value='true') }}"
  data-max-cart-items="{{ plugin_settings.max_cart_items | default(value='50') }}"
  data-store-theme="{{ plugin_settings.store_theme | default(value='modern') }}"
  data-products-per-section="{{ plugin_settings.products_per_section | default(value='24') }}"
  data-currency="{{ currency_symbol | default(value='$') }}">
</div>

<script type="application/json" id="sm3d-products-data">{{ products | default(value=[]) | json_encode | safe }}</script>
<script type="application/json" id="sm3d-categories-data">{{ categories | default(value=[]) | json_encode | safe }}</script>
<script type="application/json" id="sm3d-links-data">{{ links | default(value=[]) | json_encode | safe }}</script>
<script type="application/json" id="sm3d-sectionmap-data">{{ section_map | default(value=[]) | json_encode | safe }}</script>
<script type="application/json" id="sm3d-config-data">{{ sm3d_config | default(value=config) | json_encode | safe }}</script>
<script type="application/json" id="sm3d-me-data">{{ me | default(value='') | json_encode | safe }}</script>
<script type="application/json" id="sm3d-user-name-data">{{ user.name | default(value='') | json_encode | safe }}</script>

<script type="application/json" id="sm3d-npc-names-data">{{ npc_names | default(value=[]) | json_encode | safe }}</script>

<div id="sm3d-loading" class="sm3d-loading">
  <div class="sm3d-loading-card">
    <div class="sm3d-loading-logo"><i class="fas fa-store"></i></div>
    <h2 id="sm3d-loading-store">{{ brand_name | default(value=tenant_name) | default(value='Store') }} 3D</h2>
    <div class="sm3d-loading-bar"><div id="sm3d-loading-fill" class="sm3d-loading-fill"></div></div>
    <p id="sm3d-loading-text">Stocking shelves…</p>
  </div>
</div>

<div id="sm3d-avatar-screen" class="sm3d-overlay hidden">
  <div class="sm3d-card sm3d-avatar-card">
    <div class="sm3d-avatar-hero">
      <div class="sm3d-avatar-preview"><canvas id="sm3d-avatar-preview" width="220" height="220"></canvas></div>
      <div>
        <h2>Choose your shopper</h2>
        <p class="sm3d-preview-caption">Live preview · <strong id="sm3d-preview-name">Shopper</strong></p>
        <p id="sm3d-preview-details" class="sm3d-preview-details"></p>
        <p class="sm3d-muted">Pick a shopper; the preview updates as you choose.</p>
        <input id="sm3d-persona-name" class="sm3d-input" maxlength="20" placeholder="Your display name" autocomplete="off">
      </div>
    </div>
    <div class="sm3d-avatar-options">
      <input id="sm3d-persona-search" class="sm3d-input sm3d-persona-search" type="search" placeholder="Find a persona, background, or outfit" autocomplete="off">
      <div id="sm3d-avatar-grid" class="sm3d-avatar-grid"></div>
    </div>
    <div class="sm3d-avatar-footer">
      <div class="sm3d-row">
        <label>Camera
          <select id="sm3d-camera-select">
            <option value="first_person">First person</option>
            <option value="third_person">Third person</option>
          </select>
        </label>
      </div>
      <button id="sm3d-enter-btn" class="sm3d-btn-primary sm3d-btn-block">Enter store</button>
    </div>
  </div>
</div>
<div id="sm3d-auth-screen" class="sm3d-overlay hidden">
  <div class="sm3d-card sm3d-auth-card">
    <div class="sm3d-auth-mark"><i class="fas fa-store"></i></div>
    <p class="sm3d-eyebrow">A new way to shop</p>
    <h2>Step inside the store</h2>
    <p class="sm3d-muted">Sign in to save your basket, see other shoppers moving through the aisles, and continue to secure checkout.</p>
    <a id="sm3d-signin-link" class="sm3d-btn-primary sm3d-btn-block" href="/auth/login">Sign in to enter</a>
    <p class="sm3d-auth-footnote">Your cart and checkout are connected to your account.</p>
  </div>
</div>

<div id="sm3d-location-screen" class="sm3d-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="sm3d-location-title">
  <div class="sm3d-card sm3d-location-card">
    <div class="sm3d-auth-mark"><i class="fas fa-location-dot"></i></div>
    <h2 id="sm3d-location-title">Share your delivery location</h2>
    <p id="sm3d-location-message" class="sm3d-muted">Your delivery fee needs your location. Allow location access to add this item to your cart.</p>
    <button id="sm3d-location-share" class="sm3d-btn-primary sm3d-btn-block"><i class="fas fa-location-crosshairs"></i> Share location</button>
    <button id="sm3d-location-cancel" class="sm3d-btn-ghost sm3d-btn-block">Not now</button>
  </div>
</div>

<div id="sm3d-game" class="sm3d-game hidden">
  <div id="sm3d-landscape-prompt" class="sm3d-landscape-prompt hidden" role="status" aria-live="polite">
    <div class="sm3d-landscape-card"><span class="sm3d-landscape-icon" aria-hidden="true">↻</span><strong>Rotate your phone</strong><span>Game Mode is best played in landscape.</span></div>
  </div>
  <canvas id="sm3d-canvas"></canvas>
  <div id="sm3d-crosshair" class="sm3d-crosshair"></div>
  <div id="sm3d-store-indicator" class="sm3d-store-indicator"><span class="sm3d-live-dot"></span><span id="sm3d-store-indicator-name">FRESH MARKET</span><span class="sm3d-indicator-divider"></span><span>OPEN</span></div>
  <section id="sm3d-shopping-targets" class="sm3d-shopping-targets hidden" aria-live="polite" aria-label="Slab discount progress">
    <span class="sm3d-target-icon"><i class="fas fa-piggy-bank"></i></span>
    <div class="sm3d-target-content"><strong id="sm3d-target-title">Savings progress</strong><span id="sm3d-target-copy"></span><span class="sm3d-target-progress"><i id="sm3d-target-progress-fill"></i></span></div>
    <button id="sm3d-target-dismiss" type="button" aria-label="Dismiss savings update">×</button>
  </section>
  <div id="sm3d-hud" class="sm3d-hud">
    <div id="sm3d-online-badge" class="sm3d-online-badge" title="Real shoppers online; NPCs are labelled separately"><i class="fas fa-users"></i><span id="sm3d-online-count">1</span></div>
    <button id="sm3d-persona-btn" class="sm3d-hud-persona" aria-label="Change shopper persona" title="Change shopper persona"><span id="sm3d-persona-initial">?</span></button>
    <button id="sm3d-cart-btn" class="sm3d-hud-cart" aria-label="Cart">
      <i class="fas fa-shopping-cart"></i>
      <span id="sm3d-cart-count">0</span>
      <span id="sm3d-cart-total">$0.00</span>
    </button>
    <button id="sm3d-cam-btn" class="sm3d-hud-btn" aria-label="Toggle camera"><i class="fas fa-video"></i></button>
    <button id="sm3d-help-btn" class="sm3d-hud-btn" aria-label="Help"><i class="fas fa-question"></i></button>
    <button id="sm3d-exit-game-btn" class="sm3d-hud-exit" aria-label="Exit Game Mode and open App Mode" title="Exit Game Mode · Open App Mode"><i class="fas fa-arrow-right-from-bracket"></i><span>Exit</span></button>
  </div>
  <button id="sm3d-checkout-prompt" class="sm3d-checkout-prompt hidden"><i class="fas fa-cash-register"></i> You're at checkout — tap to pay (X)</button>
  <div id="sm3d-product-info" class="sm3d-product-info hidden">
    <div id="sm3d-pi-name" class="sm3d-pi-name"></div>
    <div class="sm3d-pi-row"><span id="sm3d-pi-price" class="sm3d-pi-price"></span><span id="sm3d-pi-stock" class="sm3d-pi-stock"></span></div>
    <div id="sm3d-pi-hint" class="sm3d-pi-hint">Press E, or tap Pick up</div>
  </div>
  <div id="sm3d-toast" class="sm3d-toast hidden"></div>
  <div id="sm3d-help" class="sm3d-overlay hidden" data-dismissable="1">
    <div class="sm3d-card">
      <button class="sm3d-x" data-close="sm3d-help" aria-label="Close">×</button>
      <h3>How to shop</h3>
      <ul>
        <li><b>WASD / arrows</b> — walk, <b>mouse</b> — look, <b>Shift</b> — run</li>
        <li><b>E / double-click</b> — pick up the product you are aiming at</li>
        <li><b>C</b> — camera view, <b>M</b> — cart, <b>X</b> — checkout, <b>Esc</b> — close</li>
        <li>Walk to the <b>checkout counters</b>, then press <b>X</b> to pay.</li>
      </ul>
      <button id="sm3d-help-close" class="sm3d-btn-primary">Back to shopping</button>
    </div>
  </div>
  <div id="sm3d-cart-panel" class="sm3d-overlay hidden" data-dismissable="1">
    <div class="sm3d-card sm3d-cart-card">
      <button class="sm3d-x" data-close="sm3d-cart-panel" aria-label="Close">×</button>
      <h3>Your cart</h3>
      <div id="sm3d-cart-items" class="sm3d-cart-items"></div>
      <div id="sm3d-cart-summary" class="sm3d-cart-summary"></div>
      <div class="sm3d-row">
        <button id="sm3d-cart-close" class="sm3d-btn-ghost">Keep shopping</button>
        <button id="sm3d-goto-checkout" class="sm3d-btn-primary">Go to checkout</button>
      </div>
    </div>
  </div>
  <div id="sm3d-checkout-panel" class="sm3d-overlay hidden" data-dismissable="1">
    <div class="sm3d-card sm3d-cart-card">
      <button class="sm3d-x" data-close="sm3d-checkout-panel" aria-label="Close">×</button>
      <h3>Checkout</h3>
      <div id="sm3d-checkout-items" class="sm3d-cart-items"></div>
      <div id="sm3d-checkout-summary" class="sm3d-cart-summary"></div>
      <div class="sm3d-row">
        <button id="sm3d-checkout-close" class="sm3d-btn-ghost">Back</button>
      <button id="sm3d-complete-purchase" class="sm3d-btn-primary"><i class="fas fa-lock"></i> Continue to secure checkout</button>
      </div>
    </div>
  </div>
  <div id="sm3d-mobile-controls" class="sm3d-mobile-controls hidden">
    <div id="sm3d-joystick" class="sm3d-joystick"><div id="sm3d-stick" class="sm3d-stick"></div></div>
    <div class="sm3d-mobile-actions">
      <button id="sm3d-pick-btn" class="sm3d-pick-btn" disabled><i class="fas fa-basket-shopping"></i><span id="sm3d-pick-label">Aim at a product</span></button>
      <button id="sm3d-run-btn" class="sm3d-mobile-btn" aria-label="Run"><i class="fas fa-running"></i></button>
    </div>
  </div>
  <div class="sm3d-controls-hint" aria-hidden="true"><span>WASD <small>MOVE</small></span><span>MOUSE <small>LOOK</small></span><span>E <small>PICK</small></span></div>
</div>
{% endblock %}

{% block scripts %}
<script type="module">
import './assets/js/supermarket-audio.js';
import './assets/js/supermarket-game.js';
</script>
<script>
// Watchdog: ES-module import failure (e.g. three.js CDN blocked) would
// otherwise leave the loading screen on "Stocking shelves…" forever.
setTimeout(function () {
  var loading = document.getElementById('sm3d-loading');
  var text = document.getElementById('sm3d-loading-text');
  if (loading && !loading.classList.contains('hidden') && text
      && /stocking/i.test(text.textContent || '')) {
    text.textContent = 'Could not load the 3D engine (network/CDN blocked?). Check connection and reload.';
  }
}, 12000);
</script>
{% endblock %}