Tot funcionant al 100% i amb Looker

2026-04-13 20:26:14 +02:00
parent cd9633dfab
commit 9dfbe7b1be
46 changed files with 4164 additions and 406 deletions
@@ -0,0 +1 @@
+timestamp,event_type,product_code,model,category,price,stock,page_url,user_agent,session_id,event_id,order_id,stripe_session_id,payment_status,quantity,shipping_method,total_amount,referrer,utm_source,utm_medium,utm_campaign,device_type,page_type
@@ -0,0 +1,75 @@
+RESUM
+A1: Metrica
+B1: Valor
+A2: Sessions uniques
+B2: =COUNTUNIQUE(FILTER(EVENTS!J2:J,EVENTS!J2:J<>""))
+A3: Page views
+B3: =COUNTIF(EVENTS!B:B,"page_view")
+A4: Veure gran
+B4: =COUNTIF(EVENTS!B:B,"view_large")
+A5: Clicks WhatsApp
+B5: =COUNTIF(EVENTS!B:B,"whatsapp_click")
+A6: Clicks Comprar
+B6: =COUNTIF(EVENTS!B:B,"buy_click")
+A7: Checkout submit
+B7: =COUNTIF(EVENTS!B:B,"checkout_submit")
+A8: Compres pagades
+B8: =COUNTIF(EVENTS!B:B,"payment_success")
+A9: CTR comprar
+B9: =IF(B3=0,0,B6/B3)
+A10: Checkout rate
+B10: =IF(B6=0,0,B7/B6)
+A11: Conversio final
+B11: =IF(B3=0,0,B8/B3)
+A12: Checkout -> paid
+B12: =IF(B7=0,0,B8/B7)
+A13: Facturacio
+B13: =IFERROR(SUM(FILTER(ORDERS!I2:I,ORDERS!J2:J="paid")),0)
+A14: Ticket mitja
+B14: =IF(B8=0,0,B13/B8)
+
+FUNNEL
+A1: Pas
+B1: Valor
+C1: Ratio vs pas anterior
+A2: page_view
+B2: =COUNTIF(EVENTS!B:B,"page_view")
+C2:
+A3: buy_click
+B3: =COUNTIF(EVENTS!B:B,"buy_click")
+C3: =IF(B2=0,0,B3/B2)
+A4: checkout_submit
+B4: =COUNTIF(EVENTS!B:B,"checkout_submit")
+C4: =IF(B3=0,0,B4/B3)
+A5: payment_success
+B5: =COUNTIF(EVENTS!B:B,"payment_success")
+C5: =IF(B4=0,0,B5/B4)
+
+TOP_MODELS
+A1: product_code
+B1: view_large
+C1: whatsapp_clicks
+D1: buy_clicks
+E1: checkout_submit
+F1: payment_success
+G1: conversion_rate
+H1: revenue
+A2: =SORT(UNIQUE(FILTER(EVENTS!C2:C,EVENTS!C2:C<>"")))
+B2: =ARRAYFORMULA(IF(A2:A="","",COUNTIFS(EVENTS!C:C,A2:A,EVENTS!B:B,"view_large")))
+C2: =ARRAYFORMULA(IF(A2:A="","",COUNTIFS(EVENTS!C:C,A2:A,EVENTS!B:B,"whatsapp_click")))
+D2: =ARRAYFORMULA(IF(A2:A="","",COUNTIFS(EVENTS!C:C,A2:A,EVENTS!B:B,"buy_click")))
+E2: =ARRAYFORMULA(IF(A2:A="","",COUNTIFS(EVENTS!C:C,A2:A,EVENTS!B:B,"checkout_submit")))
+F2: =ARRAYFORMULA(IF(A2:A="","",COUNTIFS(EVENTS!C:C,A2:A,EVENTS!B:B,"payment_success")))
+G2: =ARRAYFORMULA(IF(A2:A="","",IF(D2:D=0,0,F2:F/D2:D)))
+H2: =ARRAYFORMULA(IF(A2:A="","",SUMIF(ORDERS!D:D,A2:A,ORDERS!I:I)))
+
+FILTERS
+A1: filter_key
+B1: uses
+A2: =SORT(UNIQUE(FILTER(EVENTS!C2:C,EVENTS!B2:B="filter_use",EVENTS!C2:C<>"")))
+B2: =ARRAYFORMULA(IF(A2:A="","",COUNTIFS(EVENTS!B:B,"filter_use",EVENTS!C:C,A2:A)))
+
+Notes
+- Si el teu Google Sheets et dona error de sintaxi, substitueix les comes "," per punt i coma ";".
+- Formata B9:B12, C3:C5 i G2:G com a percentatge.
+- Formata B13:B14 i H2:H com a moneda EUR.
@@ -0,0 +1,17 @@
+EVENTS
+timestamp,event_type,product_code,model,category,price,stock,page_url,user_agent,session_id,event_id,order_id,stripe_session_id,payment_status,quantity,shipping_method,total_amount,referrer,utm_source,utm_medium,utm_campaign,device_type,page_type
+
+ORDERS
+timestamp,order_id,stripe_session_id,product_code,model,quantity,price,shipping_method,total_amount,payment_status,customer_name,email,phone,session_id,utm_source,utm_medium,utm_campaign,device_type,page_type
+
+RESUM
+Metrica,Valor
+
+TOP_MODELS
+product_code,views,buy_clicks,checkout_submit,payment_success,conversion_rate
+
+FUNNEL
+step,value
+
+FILTERS
+filter_key,uses
@@ -0,0 +1 @@
+timestamp,order_id,stripe_session_id,product_code,model,quantity,price,shipping_method,total_amount,payment_status,customer_name,email,phone,session_id,utm_source,utm_medium,utm_campaign,device_type,page_type
@@ -0,0 +1,62 @@
+<?php
+declare(strict_types=1);
+
+require_once dirname(__DIR__) . '/checkout/common.php';
+
+kapvoe_require_post();
+
+$config = kapvoe_load_config();
+$data = kapvoe_json_input();
+
+$allowedEvents = [
+    'page_view',
+    'view_large',
+    'whatsapp_click',
+    'buy_click',
+    'checkout_open',
+    'checkout_submit',
+    'filter_use',
+    'refresh_click',
+    'payment_cancel',
+];
+
+$eventType = trim((string)($data['event_type'] ?? ''));
+if ($eventType === '' || !in_array($eventType, $allowedEvents, true)) {
+    kapvoe_json_response([
+        'ok' => false,
+        'error' => 'event_type invalid',
+    ], 422);
+}
+
+$payload = [
+    'timestamp' => date('c'),
+    'event_type' => $eventType,
+    'product_code' => trim((string)($data['product_code'] ?? '')),
+    'model' => trim((string)($data['model'] ?? '')),
+    'category' => trim((string)($data['category'] ?? '')),
+    'price' => trim((string)($data['price'] ?? '')),
+    'stock' => trim((string)($data['stock'] ?? '')),
+    'page_url' => trim((string)($data['page_url'] ?? '')),
+    'user_agent' => trim((string)($data['user_agent'] ?? ($_SERVER['HTTP_USER_AGENT'] ?? ''))),
+    'session_id' => trim((string)($data['session_id'] ?? '')),
+    'event_id' => trim((string)($data['event_id'] ?? ('evt_' . bin2hex(random_bytes(8))))),
+    'order_id' => trim((string)($data['order_id'] ?? '')),
+    'stripe_session_id' => trim((string)($data['stripe_session_id'] ?? '')),
+    'payment_status' => trim((string)($data['payment_status'] ?? '')),
+    'quantity' => trim((string)($data['quantity'] ?? '')),
+    'shipping_method' => trim((string)($data['shipping_method'] ?? '')),
+    'total_amount' => trim((string)($data['total_amount'] ?? '')),
+    'referrer' => trim((string)($data['referrer'] ?? ($_SERVER['HTTP_REFERER'] ?? ''))),
+    'utm_source' => trim((string)($data['utm_source'] ?? '')),
+    'utm_medium' => trim((string)($data['utm_medium'] ?? '')),
+    'utm_campaign' => trim((string)($data['utm_campaign'] ?? '')),
+    'device_type' => trim((string)($data['device_type'] ?? '')),
+    'page_type' => trim((string)($data['page_type'] ?? 'catalog')),
+];
+
+$ok = kapvoe_track_analytics_event($config, $payload);
+
+kapvoe_json_response([
+    'ok' => $ok,
+    'event_type' => $eventType,
+], $ok ? 200 : 202);
@@ -0,0 +1,309 @@
+import {
+  API_URL,
+  AUTO_REFRESH_MS,
+  BLOODBROS_LOGO_URL,
+  CREATE_CHECKOUT_URL
+} from './config.js';
+
+import {
+  fmtPrice,
+  parseDescription,
+  getStockState,
+  getSalesHook,
+  buildWhatsappLink,
+  getFilteredProducts
+} from './catalog.js';
+    
+    const els = {
+      cards: document.getElementById('cards'),
+      errorBox: document.getElementById('errorBox'),
+      errorText: document.getElementById('errorText'),
+      emptyBox: document.getElementById('emptyBox'),
+      statVisible: document.getElementById('statVisible'),
+      statTop: document.getElementById('statTop'),
+      statUpdated: document.getElementById('statUpdated'),
+      searchInput: document.getElementById('searchInput'),
+      topFilter: document.getElementById('topFilter'),
+      sortFilter: document.getElementById('sortFilter'),
+      priceFilter: document.getElementById('priceFilter'),
+      refreshBtn: document.getElementById('refreshBtn'),
+      modal: document.getElementById('imageModal'),
+      modalImage: document.getElementById('modalImage'),
+      modalClose: document.getElementById('modalClose'),
+      brandLogo: document.getElementById('brandLogo'),
+      brandFallback: document.getElementById('brandFallback')
+    };
+
+    let products = [];
+    let lastFetchAt = null;
+    let lastUpdatedAt = null;
+
+    function escapeHtml(value) {
+      return String(value ?? '')
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+    }
+
+
+    function fmtTime(value) {
+      if (!value) return '--:--';
+      const d = new Date(value);
+      if (Number.isNaN(d.getTime())) return '--:--';
+      return d.toLocaleTimeString('ca-ES', { hour: '2-digit', minute: '2-digit' });
+    }
+
+
+    function renderDescription(product) {
+      const items = parseDescription(product.description);
+      if (items.length) {
+        return `
+          <div class="desc-box">
+            <div class="desc-title">Característiques</div>
+            <ul class="desc-list">${items.map(item => `<li>${escapeHtml(item)}</li>`).join('')}</ul>
+          </div>
+        `;
+      }
+      return `
+        <div class="desc-box">
+          <div class="desc-title">Característiques</div>
+          <p class="desc-plain">Sense descripció disponible.</p>
+        </div>
+      `;
+    }
+
+    function render() {
+      const data = getFilteredProducts(products, {
+        search: els.searchInput.value,
+        top: els.topFilter.value,
+        sort: els.sortFilter.value,
+        price: els.priceFilter.value
+      });
+
+      els.cards.innerHTML = '';
+      els.errorBox.style.display = 'none';
+      els.emptyBox.style.display = data.length ? 'none' : 'block';      const totalTop = data.filter(p => !!p.top_vendes).length;
+
+      els.statVisible.textContent = data.length;
+      els.statTop.textContent = totalTop;      els.statUpdated.textContent = fmtTime(lastUpdatedAt || lastFetchAt);
+      if (!data.length) return;
+
+      const frag = document.createDocumentFragment();
+
+      data.forEach(product => {
+        const card = document.createElement('article');
+        card.className = 'card';
+
+        const chips = [];
+        if (product.colors) chips.push(product.colors);
+
+
+
+        const imageHtml = product.image_url
+          ? `<img src="${escapeHtml(product.image_url)}" alt="${escapeHtml(product.product_code || product.model || 'Producte')}" loading="lazy" referrerpolicy="no-referrer">`
+          : `<div class="media-placeholder"><strong>${escapeHtml(product.product_code || 'Sense codi')}</strong><div>Sense imatge definida a IMAGE_URL.</div></div>`;
+
+        const stockState = getStockState(product.stock);
+        const salesHook = getSalesHook(product);
+
+        card.innerHTML = `
+          ${product.top_vendes ? '<div class="top-badge">Top vendes</div>' : ''}
+          <div class="card-media">
+            <div class="media-stage" data-image="${escapeHtml(product.image_url || '')}">
+              ${imageHtml}
+            </div>
+          </div>
+          <div class="card-actions">
+            <div class="media-actions">
+              <button class="action-btn action-view js-view" type="button" data-image="${escapeHtml(product.image_url || '')}">🔎 Veure gran</button>
+              <button class="action-btn action-buy js-buy" type="button"
+                data-code="${escapeHtml(product.product_code || '')}"
+                data-name="${escapeHtml(product.product_code || '')}"
+                data-price="${escapeHtml(product.europe_price_number || 0)}"
+                data-stock="${escapeHtml(product.stock || 0)}">💳 Comprar ara</button>
+              <a class="action-btn action-wa" href="${escapeHtml(buildWhatsappLink(product))}" target="_blank" rel="noopener noreferrer"><span class="wa-icon" aria-hidden="true"></span>WhatsApp</a>
+            </div>
+          </div>
+          <div class="body">
+            <div class="title-row">
+              <div class="title-stack">
+                <div class="product-code">${escapeHtml(product.product_code || '')}</div>
+
+              </div>
+
+            </div>
+
+            <div class="price-stock">
+              <div class="price-box">
+                <div class="price-label">Preu</div>
+                <div class="price">${escapeHtml(fmtPrice(product))}</div>
+              </div>
+              <div class="stock-pill ${stockState.cls}">${escapeHtml(stockState.label)}</div>
+            </div>
+
+            ${salesHook ? `
+            <div class="sales-hook">
+              <span class="sales-hook-badge">${escapeHtml(salesHook.badge)}</span>
+            </div>` : ''}
+
+            ${chips.length ? `<div class="chips">${chips.map(c => `<span class="chip">${escapeHtml(c)}</span>`).join('')}</div>` : ''}
+            ${renderDescription(product)}
+
+            <div class="footer-row">
+              <div class="footer-box"><strong>Família</strong><span>${escapeHtml(product.category || 'No indicada')}</span></div>
+              <div class="footer-box"><strong>Vidre</strong><span>${escapeHtml(product.colors || 'No indicats')}</span></div>
+            </div>
+          </div>
+        `;
+
+        frag.appendChild(card);
+      });
+
+      els.cards.appendChild(frag);
+
+      document.querySelectorAll('.js-view, .media-stage').forEach(node => {
+        node.addEventListener('click', () => {
+          const src = node.getAttribute('data-image');
+          if (!src) return;
+          els.modalImage.src = src;
+          els.modal.classList.add('open');
+          els.modal.setAttribute('aria-hidden', 'false');
+        });
+      });
+    }
+
+    async function loadData() {      els.errorBox.style.display = 'none';
+
+      try {
+        const response = await fetch(API_URL, { method: 'GET', cache: 'no-store' });
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+        const json = await response.json();
+        if (!json || json.ok !== true || !Array.isArray(json.products)) {
+          throw new Error('Resposta JSON invàlida');
+        }
+
+        products = json.products;
+        lastFetchAt = new Date().toISOString();
+        lastUpdatedAt = json.updated_at || lastFetchAt;        render();
+      } catch (err) {
+        products = [];
+        lastFetchAt = new Date().toISOString();
+        lastUpdatedAt = null;        els.errorText.textContent = `No s'ha pogut llegir l'endpoint JSON. Detall: ${err.message}`;
+        els.errorBox.style.display = 'block';
+        render();
+      }
+    }
+
+    
+    const buyEls = {
+      modal: document.getElementById('buyModal'),
+      form: document.getElementById('buyForm'),
+      summary: document.getElementById('buySummary'),
+      error: document.getElementById('buyError'),
+      cancel: document.getElementById('buyCancel'),
+    };
+
+    function openBuyModal(product) {
+      buyEls.form.product_code.value = product.code;
+      buyEls.form.product_name.value = product.name;
+      buyEls.form.price.value = product.price;
+      buyEls.summary.innerHTML = `<strong>${escapeHtml(product.name)}</strong><br>Preu: ${escapeHtml(String(product.price).replace('.', ',') + ' €')} · Stock visible: ${escapeHtml(product.stock)}`;
+      buyEls.error.style.display = 'none';
+      buyEls.error.textContent = '';
+      buyEls.modal.classList.add('open');
+      buyEls.modal.setAttribute('aria-hidden', 'false');
+    }
+
+    function closeBuyModal() {
+      buyEls.modal.classList.remove('open');
+      buyEls.modal.setAttribute('aria-hidden', 'true');
+    }
+
+    function initLogo() {
+      if (!BLOODBROS_LOGO_URL) return;
+      els.brandLogo.onload = () => {
+        els.brandLogo.style.display = 'block';
+        els.brandFallback.style.display = 'none';
+      };
+      els.brandLogo.onerror = () => {
+        els.brandLogo.style.display = 'none';
+        els.brandFallback.style.display = 'flex';
+      };
+      els.brandLogo.src = BLOODBROS_LOGO_URL;
+    }
+
+    [els.searchInput, els.topFilter, els.sortFilter, els.priceFilter].forEach(el => {
+      el.addEventListener('input', render);
+      el.addEventListener('change', render);
+    });
+
+    els.refreshBtn.addEventListener('click', loadData);
+
+    els.modalClose.addEventListener('click', () => {
+      els.modal.classList.remove('open');
+      els.modal.setAttribute('aria-hidden', 'true');
+      els.modalImage.src = '';
+    });
+
+    els.modal.addEventListener('click', (e) => {
+      if (e.target === els.modal) {
+        els.modal.classList.remove('open');
+        els.modal.setAttribute('aria-hidden', 'true');
+        els.modalImage.src = '';
+      }
+    });
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        els.modal.classList.remove('open');
+        els.modal.setAttribute('aria-hidden', 'true');
+        els.modalImage.src = '';
+        closeBuyModal();
+      }
+    });
+
+
+    document.addEventListener('click', (e) => {
+      const btn = e.target.closest('.js-buy');
+      if (!btn) return;
+      openBuyModal({
+        code: btn.getAttribute('data-code') || '',
+        name: btn.getAttribute('data-name') || '',
+        price: btn.getAttribute('data-price') || '0',
+        stock: btn.getAttribute('data-stock') || '0'
+      });
+    });
+
+    buyEls.cancel.addEventListener('click', closeBuyModal);
+    buyEls.modal.addEventListener('click', (e) => {
+      if (e.target === buyEls.modal) closeBuyModal();
+    });
+
+    buyEls.form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      buyEls.error.style.display = 'none';
+      const payload = Object.fromEntries(new FormData(buyEls.form).entries());
+
+      try {
+        const response = await fetch(CREATE_CHECKOUT_URL, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+        const json = await response.json();
+        if (!response.ok || !json.ok || !json.checkout_url) {
+          throw new Error(json.error || 'No s\'ha pogut crear el checkout');
+        }
+        window.location.href = json.checkout_url;
+      } catch (err) {
+        buyEls.error.textContent = err.message || 'Error inesperat';
+        buyEls.error.style.display = 'block';
+      }
+    });
+
+    initLogo();
+    loadData();
+    setInterval(loadData, AUTO_REFRESH_MS);
@@ -11,8 +11,8 @@ return [
    // Moneda
    'currency' => 'eur',

-    // On guardar les comandes provisionals
-    'orders_storage_dir' => __DIR__ . '/data',
+    // On guardar les comandes i logs
+    'orders_storage_dir' => dirname(__DIR__) . '/data',

    // URLs públiques
    'success_url' => 'https://kapvoe-portfoli.treblarella.org/checkout/payment-success.php',
@@ -20,4 +20,58 @@ return [
    
    'stock_sync_url' => 'https://script.google.com/macros/s/AKfycbyH6PuQPR342mwSiKCkYZ1lOnn1VccqzFO-ScbhwjvJoABU3LqVNJcS3gtPE5ZuT0JyvQ/exec',
    'stock_sync_token' => 'kapvoe_stock_2026_x7F9mQpL2vN8rT4sZ1kW',
+
+    'catalog_api_url' => 'https://kapvoe-portfoli.treblarella.org/api/products.php',
+
+    // Tracking i analytics per Google Sheets / Looker Studio
+    'analytics_enabled' => true,
+    'analytics_sync_url' => 'https://script.google.com/macros/s/AKfycbyyK8fAytZcPHuJKn-LVItMC8BAyTz0jzHml47vvfOHsTwhetCITND_-_yNd7HqickQ/exec',
+    'analytics_sync_token' => 'kapvoe_analitycs_2026_x7F9mQpL2vN8rT4sZ1kW',
+    'analytics_timeout' => 10,
+
+    // Correu sortint
+    // Si vols dependre nomes de la Synology, fes servir 'smtp'.
+    // Opcions: auto | mail | smtp | resend
+    'mail_transport' => 'smtp',
+    'mail_from_email' => 'pedidos@bloodbros.store',
+    'mail_from_name' => 'Blood Bros Sports',
+    'mail_reply_to' => 'pedidos@bloodbros.store',
+
+    // API HTTP de correu. Recomanat si el hosting falla amb mail() o SMTP.
+    // Amb Resend nomes cal una API key i el domini verificat.
+    'resend_api_key' => '',
+    'resend_api_url' => 'https://api.resend.com/emails',
+
+    // AvÃs intern de noves comandes
+    // SMTP sortint. Activa-ho si el servidor no envia be amb mail().
+    // SMTP sortint. Idealment apunta al servidor SMTP de la teva Synology.
+    // Exemples habituals:
+    // - NAS mateixa maquina: 127.0.0.1
+    // - NAS a la LAN: 192.168.x.x
+    'smtp_enabled' => true,
+    'smtp_host' => 'mail.bloodbros.store',
+	'smtp_port' => 587,
+	'smtp_encryption' => 'tls',
+    'smtp_username' => 'pedidos@bloodbros.store',
+    'smtp_password' => '2%0Jx5zv',
+    'smtp_timeout' => 15,
+    // Prova de compatibilitat TLS per hostings/PHPs restrictius.
+    // Activa-ho nomes per provar si el problema es la validacio del certificat.
+    'smtp_allow_invalid_certificates' => true,
+
+    // Avis intern per correu
+    'admin_notification_email' => 'pedidos@bloodbros.store',
+
+    // Avis intern independent del correu.
+    // Si poses un webhook intern de la Synology, es cridara per cada compra pagada.
+    // Si ho deixes buit, es guardara a data/internal-notifications.log
+    'internal_notification_enabled' => true,
+    'internal_notification_webhook_url' => '',
+    'internal_notification_webhook_token' => '',
+    'internal_notification_timeout' => 10,
+    'internal_notification_log_path' => dirname(__DIR__) . '/data/internal-notifications.log',
+
+    // Token per eines internes com el test de correu.
+    // Posa-hi un valor llarg i privat abans d'usar test-mail.php
+    'admin_tools_token' => 'kapvoe-test-2026-9xF2mL7qP4sT8vN1',
 ];
@@ -3,65 +3,108 @@ declare(strict_types=1);

 require __DIR__ . '/common.php';

+const KAPVOE_SHIPPING_PRICE = 7.99;
+
 kapvoe_require_post();
 $config = kapvoe_load_config();
 $data = kapvoe_json_input();

 $required = [
    'product_code',
-    'product_name',
-    'price',
    'quantity',
    'customer_name',
-    'address',
-    'postal_code',
-    'city',
-    'province',
    'phone',
    'email',
 ];
+
 $errors = kapvoe_validate_required($data, $required);

 if (!filter_var((string)($data['email'] ?? ''), FILTER_VALIDATE_EMAIL)) {
    $errors['email'] = 'Correu electrònic invàlid';
 }
-if (!preg_match('/^\d{5}$/', (string)($data['postal_code'] ?? ''))) {
-    $errors['postal_code'] = 'Codi postal invàlid';
-}
+
 if (!preg_match('/^[0-9+\s]{8,20}$/', (string)($data['phone'] ?? ''))) {
    $errors['phone'] = 'Telèfon invàlid';
 }

-$price = (float)str_replace(',', '.', (string)$data['price']);
-$quantity = max(1, (int)$data['quantity']);
+$quantity = max(1, (int)($data['quantity'] ?? 1));

-if ($price <= 0) {
-    $errors['price'] = 'Preu invàlid';
+$productCode = trim((string)($data['product_code'] ?? ''));
+$shippingMethod = ((string)($data['shipping_method'] ?? 'pickup') === 'shipping') ? 'shipping' : 'pickup';
+$shippingCost = $shippingMethod === 'shipping' ? KAPVOE_SHIPPING_PRICE : 0.0;
+
+$address = trim((string)($data['address'] ?? ''));
+$postalCode = trim((string)($data['postal_code'] ?? ''));
+$city = trim((string)($data['city'] ?? ''));
+$province = trim((string)($data['province'] ?? ''));
+
+if ($shippingMethod === 'shipping') {
+    if ($address === '') {
+        $errors['address'] = 'Adreça obligatòria si hi ha enviament';
+    }
+    if (!preg_match('/^\d{5}$/', $postalCode)) {
+        $errors['postal_code'] = 'Codi postal invàlid';
+    }
+    if ($city === '') {
+        $errors['city'] = 'Ciutat obligatòria si hi ha enviament';
+    }
+    if ($province === '') {
+        $errors['province'] = 'Província obligatòria si hi ha enviament';
+    }
 }

 if ($errors) {
    kapvoe_json_response(['ok' => false, 'errors' => $errors], 422);
 }

-$orderId = 'ORD-' . date('Ymd-His') . '-' . substr(bin2hex(random_bytes(3)), 0, 6);
-$unitAmountCents = (int)round($price * 100);
+try {
+    $catalogProduct = kapvoe_get_catalog_product_by_code($config, $productCode);

-$payload = [
+    $realPrice = (float)($catalogProduct['europe_price_number'] ?? 0);
+    if ($realPrice <= 0) {
+        throw new RuntimeException("El producte {$productCode} no té un preu vàlid");
+    }
+
+    $productName = trim((string)($catalogProduct['product_code'] ?? $productCode));
+    $productImageUrl = trim((string)($catalogProduct['image_url'] ?? ''));
+
+    $orderId = 'ORD-' . date('Ymd-His') . '-' . substr(bin2hex(random_bytes(3)), 0, 6);
+
+    $unitAmountCents = (int)round($realPrice * 100);
+    $subtotalCents = $unitAmountCents * $quantity;
+    $shippingCostCents = (int)round($shippingCost * 100);
+    $totalAmountCents = $subtotalCents + $shippingCostCents;
+
+    $payload = [
        'order_id' => $orderId,
-    'product_code' => trim((string)$data['product_code']),
-    'product_name' => trim((string)$data['product_name']),
+        'product_code' => $productCode,
+        'product_name' => $productName,
        'unit_amount_cents' => $unitAmountCents,
        'quantity' => $quantity,
        'customer_name' => trim((string)$data['customer_name']),
-    'address' => trim((string)$data['address']),
-    'postal_code' => trim((string)$data['postal_code']),
-    'city' => trim((string)$data['city']),
-    'province' => trim((string)$data['province']),
        'phone' => trim((string)$data['phone']),
        'email' => trim((string)$data['email']),
-];
+        'analytics_session_id' => trim((string)($data['analytics_session_id'] ?? '')),
+        'analytics_page_url' => trim((string)($data['analytics_page_url'] ?? '')),
+        'analytics_referrer' => trim((string)($data['analytics_referrer'] ?? '')),
+        'analytics_user_agent' => trim((string)($data['analytics_user_agent'] ?? '')),
+        'analytics_utm_source' => trim((string)($data['analytics_utm_source'] ?? '')),
+        'analytics_utm_medium' => trim((string)($data['analytics_utm_medium'] ?? '')),
+        'analytics_utm_campaign' => trim((string)($data['analytics_utm_campaign'] ?? '')),
+        'analytics_device_type' => trim((string)($data['analytics_device_type'] ?? '')),
+        'analytics_page_type' => trim((string)($data['analytics_page_type'] ?? 'catalog')),
+
+        'shipping_method' => $shippingMethod,
+        'shipping_cost_cents' => $shippingCostCents,
+        'subtotal_cents' => $subtotalCents,
+        'total_amount_cents' => $totalAmountCents,
+
+        'address' => $address,
+        'postal_code' => $postalCode,
+        'city' => $city,
+        'province' => $province,
+    ];

-try {
    $session = kapvoe_create_checkout_session($config, $payload);

    kapvoe_append_order($config, [
@@ -69,8 +112,13 @@ try {
        'created_at' => date('Y-m-d H:i:s'),
        'product_code' => $payload['product_code'],
        'product_name' => $payload['product_name'],
-        'unit_price' => $price,
+        'product_image_url' => $productImageUrl,
+        'unit_price' => number_format($realPrice, 2, '.', ''),
        'quantity' => $quantity,
+        'subtotal' => number_format($subtotalCents / 100, 2, '.', ''),
+        'shipping_method' => $shippingMethod,
+        'shipping_cost' => number_format($shippingCostCents / 100, 2, '.', ''),
+        'total_amount' => number_format($totalAmountCents / 100, 2, '.', ''),
        'customer_name' => $payload['customer_name'],
        'address' => $payload['address'],
        'postal_code' => $payload['postal_code'],
@@ -78,9 +126,24 @@ try {
        'province' => $payload['province'],
        'phone' => $payload['phone'],
        'email' => $payload['email'],
+        'analytics_session_id' => $payload['analytics_session_id'],
+        'analytics_page_url' => $payload['analytics_page_url'],
+        'analytics_referrer' => $payload['analytics_referrer'],
+        'analytics_user_agent' => $payload['analytics_user_agent'],
+        'analytics_utm_source' => $payload['analytics_utm_source'],
+        'analytics_utm_medium' => $payload['analytics_utm_medium'],
+        'analytics_utm_campaign' => $payload['analytics_utm_campaign'],
+        'analytics_device_type' => $payload['analytics_device_type'],
+        'analytics_page_type' => $payload['analytics_page_type'],
        'payment_status' => 'pending',
        'stripe_session_id' => $session['id'] ?? '',
        'payment_intent_id' => '',
+        'stock_updated' => '0',
+        'stock_updated_at' => '',
+        'webhook_processed_at' => '',
+        'customer_email_sent' => '0',
+        'admin_email_sent' => '0',
+        'email_notifications_sent_at' => '',
    ]);

    kapvoe_json_response([
@@ -1,20 +1,163 @@
-<!doctype html>
+<?php
+declare(strict_types=1);
+?>
+<!DOCTYPE html>
 <html lang="ca">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Pagament cancel·lat</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pagament cancel·lat · Blood Bros Sports</title>
+  <link rel="icon" type="image/png" href="/assets/logo/bloodbros-sports-logo.png">
  <style>
-    body{font-family:Arial,Helvetica,sans-serif;background:#081221;color:#fff;margin:0;padding:40px}
-    .box{max-width:780px;margin:auto;background:#0f1d34;border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:32px}
-    a{color:#7dd3fc}
+    :root{
+      --bg-1:#040b16;
+      --bg-2:#071425;
+      --bg-3:#091a30;
+      --text:#f4f7fb;
+      --muted:#9fb0ca;
+      --shadow:0 16px 44px rgba(0,0,0,.34);
+    }
+
+    *{box-sizing:border-box}
+    html,body{margin:0;padding:0}
+    body{
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+      color:var(--text);
+      background:
+        radial-gradient(circle at 12% 10%, rgba(52,122,255,.18), transparent 24%),
+        radial-gradient(circle at 82% 12%, rgba(100,196,255,.12), transparent 24%),
+        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 38%, var(--bg-3) 100%);
+      min-height:100vh;
+    }
+
+    .wrap{
+      max-width:900px;
+      margin:0 auto;
+      padding:48px 18px;
+    }
+
+    .card{
+      border-radius:32px;
+      border:1px solid rgba(255,255,255,.10);
+      background:
+        radial-gradient(circle at 75% 15%, rgba(104,133,255,.18), transparent 28%),
+        linear-gradient(180deg, rgba(17,29,52,.95), rgba(12,20,36,.98));
+      box-shadow:var(--shadow);
+      padding:28px;
+    }
+
+    .head{
+      display:flex;
+      align-items:center;
+      gap:18px;
+      margin-bottom:18px;
+    }
+
+    .logo-wrap{
+      width:84px;
+      height:84px;
+      border-radius:24px;
+      background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
+      border:1px solid rgba(255,255,255,.10);
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      overflow:hidden;
+      flex:0 0 auto;
+    }
+
+    .logo-wrap img{
+      max-width:82%;
+      max-height:82%;
+      object-fit:contain;
+      display:block;
+    }
+
+    h1{
+      margin:0 0 6px;
+      font-size:24px;
+      font-weight:1000;
+    }
+
+    p{
+      margin:0;
+      color:var(--muted);
+      font-size:16px;
+      line-height:1.5;
+    }
+
+    .actions{
+      display:flex;
+      gap:12px;
+      flex-wrap:wrap;
+      margin-top:26px;
+    }
+
+    .btn{
+      min-height:52px;
+      padding:0 20px;
+      border-radius:999px;
+      border:1px solid rgba(255,255,255,.10);
+      text-decoration:none;
+      display:inline-flex;
+      align-items:center;
+      justify-content:center;
+      font-weight:900;
+      color:#fff;
+      background:rgba(255,255,255,.05);
+    }
+
+    .btn-primary{
+      background:linear-gradient(180deg, rgba(93,154,255,.34), rgba(52,115,214,.28));
+      border-color:rgba(100,196,255,.24);
+    }
+
+    @media (max-width:640px){
+      .head{
+        align-items:flex-start;
+      }
+    }
  </style>
 </head>
 <body>
-  <div class="box">
-    <h1>Pagament cancel·lat</h1>
-    <p>No s'ha completat el pagament. Pots tornar al catàleg i provar-ho de nou.</p>
-    <p><a href="https://kapvoe-portfoli.treblarella.org/">Torna al catàleg</a></p>
+  <div class="wrap">
+    <div class="card">
+      <div class="head">
+        <div class="logo-wrap">
+          <img src="/assets/logo/bloodbros-sports-logo.png" alt="Blood Bros Sports">
        </div>
+        <div>
+          <h1>Pagament cancel·lat</h1>
+          <p>No s'ha completat la compra. Si vols, pots tornar al catàleg i reprendre la comanda quan et vagi bé.</p>
+        </div>
+      </div>
+
+      <div class="actions">
+        <a class="btn btn-primary" href="/">Torna al catàleg</a>
+      </div>
+    </div>
+  </div>
+  <script>
+    (function () {
+      try {
+        var key = 'kapvoe_session_id';
+        var sessionId = localStorage.getItem(key) || '';
+        fetch('/api/track-event.php', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          keepalive: true,
+          body: JSON.stringify({
+            event_type: 'payment_cancel',
+            session_id: sessionId,
+            page_url: window.location.href,
+            referrer: document.referrer || '',
+            user_agent: navigator.userAgent || '',
+            device_type: /mobile|android|iphone|ipod/i.test(navigator.userAgent || '') ? 'mobile' : 'desktop',
+            page_type: 'checkout'
+          })
+        });
+      } catch (e) {}
+    })();
+  </script>
 </body>
 </html>
@@ -1,26 +1,469 @@
 <?php
 declare(strict_types=1);
-$sessionId = htmlspecialchars($_GET['session_id'] ?? '', ENT_QUOTES, 'UTF-8');
-?><!doctype html>
+
+require_once __DIR__ . '/common.php';
+
+$config = kapvoe_load_config();
+$sessionId = trim((string)($_GET['session_id'] ?? ''));
+$order = null;
+$product = null;
+$error = '';
+$catalogProductMissing = false;
+$mailRetryResult = null;
+
+if ($sessionId === '') {
+    $error = 'Falta el codi de sessió de Stripe.';
+} else {
+    $order = kapvoe_get_order_by_session_id($config, $sessionId);
+
+    if (!$order) {
+        $error = 'No s\'ha trobat la comanda associada a aquesta sessió.';
+    } else {
+        try {
+            $product = kapvoe_get_catalog_product_by_code(
+                $config,
+                (string)($order['product_code'] ?? '')
+            );
+        } catch (Throwable $e) {
+            $product = null;
+            $catalogProductMissing = true;
+        }
+
+        if ((string)($order['payment_status'] ?? '') === 'paid') {
+            try {
+                $mailRetryResult = kapvoe_send_order_notifications($config, $order, $sessionId);
+                $order = kapvoe_get_order_by_session_id($config, $sessionId) ?? $order;
+            } catch (Throwable $e) {
+                $mailRetryResult = [
+                    'error' => $e->getMessage(),
+                ];
+            }
+        }
+    }
+}
+
+function kapvoe_find_local_product_image_url(string $productCode): string {
+    $productCode = trim($productCode);
+    if ($productCode === '') {
+        return '';
+    }
+
+    foreach (['png', 'jpg', 'jpeg', 'webp'] as $ext) {
+        $absolutePath = dirname(__DIR__) . "/assets/products/{$productCode}.{$ext}";
+        if (is_file($absolutePath)) {
+            return "/assets/products/{$productCode}.{$ext}";
+        }
+    }
+
+    return '';
+}
+
+function e(?string $value): string {
+    return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
+}
+
+function fmt_eur($value): string {
+    $n = (float)$value;
+    return number_format($n, 2, ',', '.') . ' €';
+}
+
+$productCode = (string)($order['product_code'] ?? '');
+$imageUrl = trim((string)($order['product_image_url'] ?? ''));
+if ($imageUrl === '') {
+    $imageUrl = (string)($product['image_url'] ?? '');
+}
+if ($imageUrl === '') {
+    $imageUrl = kapvoe_find_local_product_image_url($productCode);
+}
+$shippingMethod = (string)($order['shipping_method'] ?? 'pickup');
+$subtotal = (string)($order['subtotal'] ?? $order['unit_price'] ?? '0.00');
+$shippingCost = (string)($order['shipping_cost'] ?? '0.00');
+$totalAmount = (string)($order['total_amount'] ?? $order['unit_price'] ?? '0.00');
+?>
+<!DOCTYPE html>
 <html lang="ca">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Pagament correcte</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Compra confirmada · Blood Bros Sports</title>
+  <link rel="icon" type="image/png" href="/assets/logo/bloodbros-sports-logo.png">
  <style>
-    body{font-family:Arial,Helvetica,sans-serif;background:#081221;color:#fff;margin:0;padding:40px}
-    .box{max-width:780px;margin:auto;background:#0f1d34;border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:32px}
-    a{color:#7dd3fc}
+    :root{
+      --bg-1:#040b16;
+      --bg-2:#071425;
+      --bg-3:#091a30;
+      --card:#0d1729;
+      --line:rgba(255,255,255,.10);
+      --text:#f4f7fb;
+      --muted:#9fb0ca;
+      --accent:#64c4ff;
+      --green:#28d267;
+      --shadow:0 16px 44px rgba(0,0,0,.34);
+      --radius-xl:30px;
+      --radius-lg:24px;
+      --radius-md:18px;
+    }
+
+    *{box-sizing:border-box}
+    html,body{margin:0;padding:0}
+    body{
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+      color:var(--text);
+      background:
+        radial-gradient(circle at 12% 10%, rgba(52,122,255,.18), transparent 24%),
+        radial-gradient(circle at 82% 12%, rgba(100,196,255,.12), transparent 24%),
+        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 38%, var(--bg-3) 100%);
+      min-height:100vh;
+    }
+
+    .wrap{
+      max-width:980px;
+      margin:0 auto;
+      padding:38px 18px 42px;
+    }
+
+    .card{
+      border-radius:32px;
+      border:1px solid rgba(255,255,255,.10);
+      background:
+        radial-gradient(circle at 75% 15%, rgba(104,133,255,.18), transparent 28%),
+        linear-gradient(180deg, rgba(17,29,52,.95), rgba(12,20,36,.98));
+      box-shadow:var(--shadow);
+      overflow:hidden;
+    }
+
+    .head{
+      display:flex;
+      align-items:center;
+      gap:18px;
+      padding:28px 28px 10px;
+    }
+
+    .logo-wrap{
+      width:84px;
+      height:84px;
+      border-radius:24px;
+      background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
+      border:1px solid rgba(255,255,255,.10);
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      overflow:hidden;
+      flex:0 0 auto;
+    }
+
+    .logo-wrap img{
+      max-width:82%;
+      max-height:82%;
+      object-fit:contain;
+      display:block;
+    }
+
+    .head-copy h1{
+      margin:0 0 6px;
+      font-size:24px;
+      font-weight:1000;
+    }
+
+    .head-copy p{
+      margin:0;
+      color:var(--muted);
+      font-size:16px;
+      line-height:1.45;
+    }
+
+    .ok-badge{
+      margin:0 28px 22px;
+      display:inline-flex;
+      align-items:center;
+      gap:10px;
+      min-height:40px;
+      padding:0 16px;
+      border-radius:999px;
+      background:rgba(40,210,103,.14);
+      border:1px solid rgba(40,210,103,.28);
+      color:#c8ffd9;
+      font-weight:900;
+    }
+
+    .content{
+      padding:0 28px 30px;
+      display:grid;
+      gap:18px;
+    }
+
+    .summary-card{
+      display:grid;
+      grid-template-columns:120px 1fr;
+      gap:18px;
+      align-items:center;
+      border:1px solid rgba(255,255,255,.08);
+      background:rgba(255,255,255,.04);
+      border-radius:24px;
+      padding:18px;
+    }
+
+    .summary-media{
+      width:120px;
+      height:120px;
+      border-radius:18px;
+      background:rgba(255,255,255,.92);
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      overflow:hidden;
+    }
+
+    .summary-media img{
+      width:100%;
+      height:100%;
+      object-fit:contain;
+      display:block;
+    }
+
+    .summary-placeholder{
+      color:#0b1630;
+      font-size:12px;
+      font-weight:900;
+      text-align:center;
+      padding:8px;
+    }
+
+    .summary-info h2{
+      margin:0 0 6px;
+      font-size:38px;
+      line-height:1;
+      font-weight:1000;
+      letter-spacing:-.04em;
+    }
+
+    .summary-info .meta{
+      color:var(--muted);
+      font-size:15px;
+      line-height:1.5;
+    }
+
+    .grid{
+      display:grid;
+      grid-template-columns:1fr 1fr;
+      gap:18px;
+    }
+
+    .box{
+      border:1px solid rgba(255,255,255,.08);
+      background:rgba(255,255,255,.04);
+      border-radius:24px;
+      padding:18px;
+    }
+
+    .box-title{
+      margin:0 0 14px;
+      color:var(--muted);
+      font-size:12px;
+      text-transform:uppercase;
+      letter-spacing:.16em;
+      font-weight:900;
+    }
+
+    .line{
+      display:flex;
+      justify-content:space-between;
+      gap:14px;
+      padding:8px 0;
+      color:#eef4ff;
+      font-size:15px;
+      border-bottom:1px solid rgba(255,255,255,.06);
+    }
+
+    .line:last-child{
+      border-bottom:none;
+    }
+
+    .line.total{
+      font-size:18px;
+      font-weight:1000;
+      padding-top:12px;
+    }
+
+    .contact-item{
+      display:grid;
+      gap:4px;
+      padding:10px 0;
+      border-bottom:1px solid rgba(255,255,255,.06);
+    }
+
+    .contact-item:last-child{
+      border-bottom:none;
+    }
+
+    .contact-item strong{
+      font-size:12px;
+      color:var(--muted);
+      text-transform:uppercase;
+      letter-spacing:.12em;
+    }
+
+    .contact-item span{
+      color:#eef4ff;
+      font-size:15px;
+      line-height:1.45;
+      word-break:break-word;
+    }
+
+    .actions{
+      display:flex;
+      gap:12px;
+      flex-wrap:wrap;
+      margin-top:6px;
+    }
+
+    .btn{
+      min-height:52px;
+      padding:0 20px;
+      border-radius:999px;
+      border:1px solid rgba(255,255,255,.10);
+      text-decoration:none;
+      display:inline-flex;
+      align-items:center;
+      justify-content:center;
+      font-weight:900;
+      color:#fff;
+      background:rgba(255,255,255,.05);
+    }
+
+    .btn-primary{
+      background:linear-gradient(180deg, rgba(93,154,255,.34), rgba(52,115,214,.28));
+      border-color:rgba(100,196,255,.24);
+    }
+
+    .error-box{
+      margin:28px;
+      padding:20px;
+      border-radius:22px;
+      border:1px solid rgba(255,90,98,.20);
+      background:rgba(255,90,98,.08);
+      color:#ffd9dc;
+    }
+
+    @media (max-width:780px){
+      .summary-card{
+        grid-template-columns:1fr;
+      }
+      .summary-media{
+        width:100%;
+        height:220px;
+      }
+      .grid{
+        grid-template-columns:1fr;
+      }
+      .head{
+        align-items:flex-start;
+      }
+    }
  </style>
 </head>
 <body>
-  <div class="box">
+  <div class="wrap">
+    <div class="card">
+      <div class="head">
+        <div class="logo-wrap">
+          <img src="/assets/logo/bloodbros-sports-logo.png" alt="Blood Bros Sports">
+        </div>
+        <div class="head-copy">
          <h1>Pagament correcte</h1>
-    <p>Hem rebut la teva compra. En breu revisarem la comanda i t'avisarem.</p>
-    <?php if ($sessionId): ?>
-      <p><strong>Stripe session:</strong> <?= $sessionId ?></p>
+          <p>Hem rebut la teva compra. Aquí tens un resum de la comanda confirmada.</p>
+        </div>
+      </div>
+
+      <?php if ($error !== ''): ?>
+        <div class="error-box">
+          <strong>No hem pogut carregar el resum de la comanda.</strong><br><br>
+          <?= e($error) ?>
+        </div>
+      <?php else: ?>
+        <div class="ok-badge">✅ Compra confirmada</div>
+
+        <div class="content">
+          <div class="summary-card">
+            <div class="summary-media">
+              <?php if ($imageUrl !== ''): ?>
+                <img src="<?= e($imageUrl) ?>" alt="<?= e($productCode) ?>">
+              <?php else: ?>
+                <div class="summary-placeholder">Sense imatge</div>
              <?php endif; ?>
-    <p><a href="https://kapvoe-portfoli.treblarella.org/">Torna al catàleg</a></p>
+            </div>
+
+            <div class="summary-info">
+              <h2><?= e($productCode) ?></h2>
+              <div class="meta">
+                Sessió Stripe: <strong><?= e($sessionId) ?></strong><br>
+                Mètode: <strong><?= e($shippingMethod === 'shipping' ? 'Enviament' : 'Entrega en persona') ?></strong>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid">
+            <div class="box">
+              <div class="box-title">Resum econòmic</div>
+
+              <div class="line">
+                <span>Subtotal producte</span>
+                <strong><?= fmt_eur($subtotal) ?></strong>
+              </div>
+
+              <div class="line">
+                <span>Enviament</span>
+                <strong><?= fmt_eur($shippingCost) ?></strong>
+              </div>
+
+              <div class="line total">
+                <span>Total</span>
+                <strong><?= fmt_eur($totalAmount) ?></strong>
+              </div>
+            </div>
+
+            <div class="box">
+              <div class="box-title">Dades de contacte</div>
+
+              <div class="contact-item">
+                <strong>Nom</strong>
+                <span><?= e((string)($order['customer_name'] ?? '')) ?></span>
+              </div>
+
+              <div class="contact-item">
+                <strong>Telèfon</strong>
+                <span><?= e((string)($order['phone'] ?? '')) ?></span>
+              </div>
+
+              <div class="contact-item">
+                <strong>Correu electrònic</strong>
+                <span><?= e((string)($order['email'] ?? '')) ?></span>
+              </div>
+
+              <?php if ($shippingMethod === 'shipping'): ?>
+                <div class="contact-item">
+                  <strong>Adreça d'enviament</strong>
+                  <span>
+                    <?= e((string)($order['address'] ?? '')) ?><br>
+                    <?= e((string)($order['postal_code'] ?? '')) ?> <?= e((string)($order['city'] ?? '')) ?><br>
+                    <?= e((string)($order['province'] ?? '')) ?>
+                  </span>
+                </div>
+              <?php else: ?>
+                <div class="contact-item">
+                  <strong>Entrega</strong>
+                  <span>Quedarem amb tu per WhatsApp per entregar-te les ulleres en persona a Lleida o Mollerussa.</span>
+                </div>
+              <?php endif; ?>
+            </div>
+          </div>
+
+          <div class="actions">
+            <a class="btn btn-primary" href="/">Torna al catàleg</a>
+          </div>
+        </div>
+      <?php endif; ?>
+    </div>
  </div>
 </body>
 </html>
@@ -34,6 +34,8 @@ if (!is_array($event)) {
 $type = (string)($event['type'] ?? '');
 $object = $event['data']['object'] ?? null;

+error_log('[KAPVOE WEBHOOK] event_type=' . $type);
+
 if (!is_array($object)) {
    http_response_code(400);
    header('Content-Type: application/json; charset=utf-8');
@@ -51,6 +53,8 @@ try {
            $paymentIntentId = (string)($object['payment_intent'] ?? '');
            $paymentStatus = (string)($object['payment_status'] ?? '');

+            error_log('[KAPVOE WEBHOOK] checkout.session.completed session_id=' . $sessionId . ' payment_status=' . $paymentStatus);
+
            if ($sessionId === '') {
                throw new RuntimeException('Falta session id');
            }
@@ -70,6 +74,8 @@ try {

            $alreadyUpdated = (string)($order['stock_updated'] ?? '') === '1';
            $stockResult = null;
+            $mailResult = null;
+            $analyticsResult = null;

            if ($paymentStatus === 'paid' && !$alreadyUpdated) {
                $stockResult = kapvoe_decrement_sheet_stock($config, $order, $sessionId);
@@ -82,6 +88,15 @@ try {
                $alreadyUpdated = true;
            }

+            if ($paymentStatus === 'paid') {
+                $order = kapvoe_get_order_by_session_id($config, $sessionId) ?? $order;
+                error_log('[KAPVOE WEBHOOK] sending_order_notifications session_id=' . $sessionId . ' customer_email=' . (string)($order['email'] ?? ''));
+                $mailResult = kapvoe_send_order_notifications($config, $order, $sessionId);
+                error_log('[KAPVOE WEBHOOK] mail_result session_id=' . $sessionId . ' result=' . json_encode($mailResult, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES));
+                $analyticsResult = kapvoe_track_analytics_event($config, kapvoe_build_payment_success_event($order, $sessionId));
+                error_log('[KAPVOE WEBHOOK] analytics_result session_id=' . $sessionId . ' result=' . ($analyticsResult ? '1' : '0'));
+            }
+
            http_response_code(200);
            header('Content-Type: application/json; charset=utf-8');
            echo json_encode([
@@ -90,7 +105,9 @@ try {
                'session_id' => $sessionId,
                'payment_intent_id' => $paymentIntentId,
                'already_updated' => $alreadyUpdated,
-                'stock_result' => $stockResult
+                'stock_result' => $stockResult,
+                'mail_result' => $mailResult,
+                'analytics_result' => $analyticsResult,
            ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
            exit;

@@ -104,6 +121,7 @@ try {
            exit;
    }
 } catch (Throwable $e) {
+    error_log('[KAPVOE WEBHOOK] ERROR ' . $e->getMessage());
    http_response_code(500);
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode([
@@ -0,0 +1,81 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/common.php';
+
+$config = kapvoe_load_config();
+
+header('Content-Type: application/json; charset=utf-8');
+
+$configuredToken = trim((string)($config['admin_tools_token'] ?? ''));
+$providedToken = trim((string)($_GET['key'] ?? ''));
+
+if ($configuredToken === '') {
+    http_response_code(403);
+    echo json_encode([
+        'ok' => false,
+        'error' => 'Falta configurar admin_tools_token a config.php',
+    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+
+if (!hash_equals($configuredToken, $providedToken)) {
+    http_response_code(403);
+    echo json_encode([
+        'ok' => false,
+        'error' => 'Token invalid',
+    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+
+$defaultRecipient = trim((string)($config['admin_notification_email'] ?? ''));
+$toEmail = trim((string)($_GET['to'] ?? $defaultRecipient));
+
+if ($toEmail === '' || !filter_var($toEmail, FILTER_VALIDATE_EMAIL)) {
+    http_response_code(400);
+    echo json_encode([
+        'ok' => false,
+        'error' => 'Cal una adreca de correu valida',
+    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+
+$transport = strtolower(trim((string)($config['mail_transport'] ?? 'auto')));
+$smtpHost = trim((string)($config['smtp_host'] ?? ''));
+$smtpPort = (int)($config['smtp_port'] ?? 0);
+
+$subject = 'Prova SMTP Blood Bros Sports';
+$htmlBody = '<!DOCTYPE html>
+<html lang="ca">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Prova SMTP</title>
+</head>
+<body style="margin:0;padding:24px;background:#081221;font-family:Arial,Helvetica,sans-serif;color:#f4f7fb;">
+  <div style="max-width:720px;margin:0 auto;border-radius:24px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,#172544 0%,#0f1b32 100%);padding:24px;">
+    <h1 style="margin:0 0 12px;font-size:28px;">Prova d\'enviament correcta</h1>
+    <p style="margin:0 0 14px;line-height:1.6;color:#d8e3f3;">Aquest correu s\'ha enviat des de <strong>test-mail.php</strong> per comprovar la configuracio SMTP del projecte.</p>
+    <div style="padding:16px;border-radius:16px;background:rgba(255,255,255,.05);line-height:1.7;">
+      <div><strong>Data:</strong> ' . htmlspecialchars(date('Y-m-d H:i:s'), ENT_QUOTES, 'UTF-8') . '</div>
+      <div><strong>Destinatari:</strong> ' . htmlspecialchars($toEmail, ENT_QUOTES, 'UTF-8') . '</div>
+      <div><strong>Transport:</strong> ' . htmlspecialchars($transport, ENT_QUOTES, 'UTF-8') . '</div>
+      <div><strong>SMTP host:</strong> ' . htmlspecialchars($smtpHost !== '' ? $smtpHost : '(buit)', ENT_QUOTES, 'UTF-8') . '</div>
+      <div><strong>SMTP port:</strong> ' . htmlspecialchars((string)$smtpPort, ENT_QUOTES, 'UTF-8') . '</div>
+      <div><strong>Servidor:</strong> ' . htmlspecialchars((string)($_SERVER['HTTP_HOST'] ?? 'localhost'), ENT_QUOTES, 'UTF-8') . '</div>
+    </div>
+  </div>
+</body>
+</html>';
+
+$sent = kapvoe_send_html_email($config, $toEmail, $subject, $htmlBody);
+
+echo json_encode([
+    'ok' => $sent,
+    'to' => $toEmail,
+    'subject' => $subject,
+    'transport' => $transport,
+    'smtp_host' => $smtpHost,
+    'smtp_port' => $smtpPort,
+    'mail_log' => kapvoe_mail_log_path($config),
+], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
@@ -0,0 +1,725 @@
+<!DOCTYPE html>
+<html lang="ca">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>KAPVOE Portfolio · Blood Bros Sports</title>
+  <link rel="icon" type="image/png" href="/assets/logo/bloodbros-sports-logo.png">
+  <style>
+    :root{
+      --bg-1:#040b16;
+      --bg-2:#071425;
+      --bg-3:#091a30;
+      --card:#0d1729;
+      --card-2:#101d35;
+      --line:rgba(255,255,255,.10);
+      --line-strong:rgba(119,173,255,.28);
+      --text:#f4f7fb;
+      --muted:#9fb0ca;
+      --muted-2:#c7d4ea;
+      --accent:#64c4ff;
+      --accent-2:#4d7fff;
+      --green:#28d267;
+      --orange:#ff9b3d;
+      --red:#ff5a62;
+      --shadow:0 16px 44px rgba(0,0,0,.34);
+      --shadow-soft:0 10px 30px rgba(0,0,0,.22);
+      --radius-xl:30px;
+      --radius-lg:24px;
+      --radius-md:18px;
+    }
+
+    *{box-sizing:border-box}
+    html,body{margin:0;padding:0}
+    body{
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+      color:var(--text);
+      background:
+        radial-gradient(circle at 12% 10%, rgba(52,122,255,.18), transparent 24%),
+        radial-gradient(circle at 82% 12%, rgba(100,196,255,.12), transparent 24%),
+        radial-gradient(circle at 50% 0%, rgba(255,255,255,.03), transparent 30%),
+        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 38%, var(--bg-3) 100%);
+      min-height:100vh;
+    }
+
+    .wrap{max-width:1660px;margin:0 auto;padding:20px 18px 42px}
+
+    .hero{
+      display:block;
+      margin-bottom:18px;
+      padding:10px 0 4px;
+    }
+
+    .brand-block{display:flex;align-items:center;gap:28px;min-width:0}
+    .brand-logo-wrap{
+      width:148px;height:148px;border-radius:38px;
+      background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
+      border:1px solid rgba(255,255,255,.10);
+      box-shadow:var(--shadow-soft);
+      display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;
+      position:relative;
+    }
+    .brand-logo-wrap::before{
+      content:"";position:absolute;inset:0;
+      background:radial-gradient(circle at 30% 25%, rgba(100,196,255,.22), transparent 38%);
+      pointer-events:none;
+    }
+    .brand-logo{max-width:88%;max-height:88%;object-fit:contain;display:none;position:relative;z-index:1}
+    .brand-fallback{
+      width:96px;height:96px;border-radius:28px;
+      display:flex;align-items:center;justify-content:center;
+      background:linear-gradient(135deg,#66d6ff,#5b83ff);
+      color:#04101f;font-weight:1000;font-size:28px;letter-spacing:.04em;
+      box-shadow:0 10px 20px rgba(0,0,0,.2);
+      position:relative;z-index:1;
+    }
+
+    .hero-copy{min-width:0}
+    .hero-copy h1{
+      margin:0;
+      font-size:clamp(54px, 8.1vw, 108px);
+      line-height:.92;
+      letter-spacing:-.055em;
+      font-weight:1000;
+      text-wrap:balance;
+    }
+    .hero-copy p{
+      margin:8px 0 0;
+      color:var(--muted);
+      font-size:18px;
+      line-height:1.42;
+      max-width:900px
+    }
+
+
+    .controls{
+      display:grid;
+      grid-template-columns:minmax(300px,1.8fr) minmax(190px,.8fr) minmax(190px,.9fr) minmax(190px,.9fr) auto;
+      gap:12px;
+      margin-bottom:14px;
+      padding:14px;
+      border-radius:28px;
+      border:1px solid rgba(255,255,255,.08);
+      background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
+      box-shadow:var(--shadow-soft);
+    }
+    .field,.button{
+      min-height:58px;border-radius:20px;border:1px solid rgba(255,255,255,.10);
+      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
+      color:var(--text);padding:0 18px;font-size:15px;outline:none;box-shadow:var(--shadow-soft);
+    }
+    .field{
+      width:100%;
+      min-height:58px;
+      border-radius:20px;
+      border:1px solid rgba(255,255,255,.10);
+      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
+      color:var(--text);
+      padding:0 18px;
+      font-size:15px;
+      outline:none;
+      box-shadow:var(--shadow-soft);
+      -webkit-appearance:none;
+      appearance:none;
+    }
+    select.field option{
+      background:#14233d;
+      color:#f4f7fb;
+    }
+    select.field option:checked{
+      background:#234a86;
+      color:#ffffff;
+    }
+    .field:focus,.button:focus{border-color:rgba(100,196,255,.45);box-shadow:0 0 0 4px rgba(100,196,255,.12), var(--shadow-soft)}
+    .button{
+      cursor:pointer;font-weight:900;
+      background:linear-gradient(180deg, rgba(93,154,255,.34), rgba(52,115,214,.28));
+      transition:transform .16s ease, border-color .16s ease, filter .16s ease;
+    }
+    .button:hover{transform:translateY(-1px);filter:brightness(1.04);border-color:rgba(100,196,255,.36)}
+
+    .stats{
+      display:grid;
+      grid-template-columns:repeat(3,1fr);
+      gap:14px;
+      margin-bottom:22px
+    }
+    .stat{
+      min-height:98px;
+      padding:18px 20px;
+      border-radius:24px;
+      background:
+        radial-gradient(circle at 62% 28%, rgba(91,129,255,.15), transparent 24%),
+        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.028));
+      border:1px solid rgba(255,255,255,.09);
+      box-shadow:var(--shadow-soft);
+    }
+    .stat .k{color:var(--muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
+    .stat .v{font-size:34px;font-weight:1000;line-height:1}
+
+
+    .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:22px}
+
+    .card{
+      position:relative;overflow:hidden;display:flex;flex-direction:column;
+      border-radius:32px;border:1px solid rgba(255,255,255,.10);
+      background:
+        radial-gradient(circle at 75% 15%, rgba(104,133,255,.18), transparent 28%),
+        linear-gradient(180deg, rgba(17,29,52,.95), rgba(12,20,36,.98));
+      box-shadow:var(--shadow);
+      min-height:780px;
+      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
+    }
+    .card:hover{
+      transform:translateY(-6px);
+      box-shadow:0 24px 56px rgba(0,0,0,.42);
+      border-color:rgba(100,196,255,.22);
+    }
+    .card::before{
+      content:"";position:absolute;inset:0;pointer-events:none;
+      background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%, transparent 75%, rgba(255,255,255,.02));
+    }
+
+    .top-badge{
+      position:absolute;
+      top:14px;
+      left:-60px;
+      z-index:4;
+      width:218px;
+      text-align:center;
+      transform:rotate(-31deg);
+      background:linear-gradient(90deg, #ffb347 0%, #ff7a3d 44%, #ff555f 100%);
+      color:#fff;
+      font-weight:1000;
+      letter-spacing:.14em;
+      font-size:12px;
+      padding:10px 0;
+      box-shadow:0 10px 22px rgba(255,100,60,.30);
+      text-transform:uppercase;
+      transform-origin:center;
+      overflow:visible;
+    }
+
+    .card-media{
+      position:relative;height:340px;display:flex;align-items:center;justify-content:center;
+      padding:26px 26px 0;overflow:hidden;
+    }
+    .card-actions{
+      display:flex;gap:12px;
+      padding:0 26px 6px;
+      margin-top:2px;
+    }
+    .media-stage{
+      width:100%;height:100%;border-radius:26px;
+      background:
+        radial-gradient(circle at 50% 18%, rgba(255,255,255,.12), transparent 34%),
+        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
+      border:1px solid rgba(255,255,255,.08);
+      display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
+    }
+    .media-stage img{width:100%;height:100%;object-fit:contain;padding:22px;display:block;transition:transform .26s ease}
+    .card:hover .media-stage img{transform:scale(1.035)}
+    .media-placeholder{padding:30px;text-align:center;color:var(--muted)}
+    .media-placeholder strong{display:block;color:var(--text);font-size:18px;margin-bottom:8px}
+
+    .media-actions{
+      display:flex;gap:12px;justify-content:stretch;z-index:3;
+      pointer-events:none;width:100%;
+    }
+    .action-btn{
+      pointer-events:auto;
+      display:inline-flex;align-items:center;justify-content:center;gap:10px;
+      min-height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
+      text-decoration:none;color:#fff;font-weight:900;font-size:14px;backdrop-filter:blur(10px);
+      box-shadow:0 8px 18px rgba(0,0,0,.22);
+      transition:transform .16s ease, filter .16s ease, border-color .16s ease;
+      cursor:pointer;flex:1;
+    }
+    .action-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
+    .action-wa:hover{animation-play-state:paused}
+    .action-view{background:rgba(8,15,29,.66)}
+    .action-wa{
+      background:linear-gradient(180deg, rgba(37,211,102,.92), rgba(26,171,79,.92));
+      border-color:rgba(255,255,255,.18);
+      animation:waPulse 2.2s ease-in-out infinite;
+    }
+    @keyframes waPulse{
+      0%,100%{transform:translateY(0) scale(1); box-shadow:0 8px 18px rgba(0,0,0,.22);}
+      50%{transform:translateY(-1px) scale(1.02); box-shadow:0 12px 24px rgba(22,163,74,.32);}
+    }
+    .wa-icon{
+      width:18px;height:18px;display:inline-block;flex:0 0 18px;
+      background-repeat:no-repeat;background-position:center;background-size:contain;
+      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M19.11 17.21c-.29-.15-1.71-.84-1.97-.94-.26-.1-.45-.15-.64.15-.19.29-.74.94-.91 1.13-.17.19-.34.22-.63.08-.29-.15-1.24-.46-2.36-1.47-.87-.78-1.46-1.75-1.63-2.04-.17-.29-.02-.45.13-.6.13-.13.29-.34.43-.51.14-.17.19-.29.29-.49.1-.19.05-.37-.02-.52-.08-.15-.64-1.54-.88-2.11-.23-.56-.47-.48-.64-.49h-.54c-.19 0-.49.07-.74.34-.26.27-.98.95-.98 2.31s1 2.67 1.14 2.85c.15.19 1.97 3.13 4.88 4.26 2.92 1.13 2.92.75 3.45.7.53-.05 1.71-.7 1.95-1.38.24-.68.24-1.26.17-1.38-.07-.12-.26-.19-.55-.34Z'/%3E%3Cpath fill='%23ffffff' d='M16.03 3.2c-7.06 0-12.79 5.73-12.79 12.79 0 2.25.59 4.45 1.7 6.39L3 29l6.82-1.79a12.75 12.75 0 0 0 6.21 1.61h.01c7.05 0 12.78-5.74 12.78-12.79S23.09 3.2 16.03 3.2Zm0 23.46h-.01a10.6 10.6 0 0 1-5.4-1.48l-.39-.23-4.05 1.06 1.08-3.95-.25-.4a10.62 10.62 0 1 1 9.02 5Z'/%3E%3C/svg%3E");
+    }
+
+    .body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:16px;flex:1;position:relative;z-index:1}
+
+    .title-row{display:flex;justify-content:flex-start;gap:12px;align-items:flex-start}
+    .title-stack{min-width:0}
+    .product-code{font-size:16px;font-weight:1000;letter-spacing:.02em;color:#edf4ff}
+    .model{font-size:34px;font-weight:1000;line-height:1.02;letter-spacing:-.03em;margin-top:8px}
+
+    .family-pill{
+      display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
+      min-height:42px;padding:0 16px;border-radius:999px;
+      background:linear-gradient(180deg, rgba(100,196,255,.18), rgba(77,127,255,.14));
+      border:1px solid rgba(100,196,255,.22);color:#ddf4ff;font-weight:900;font-size:13px;text-transform:uppercase;
+      letter-spacing:.08em;white-space:nowrap;
+    }
+
+    .price-stock{
+      display:flex;
+      justify-content:space-between;
+      gap:16px;
+      align-items:flex-end;
+      padding:4px 0 2px;
+    }
+    .price-box{display:flex;flex-direction:column;gap:6px}
+    .price-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.16em}
+    .price{font-size:38px;font-weight:1000;line-height:1}
+    .stock-pill{
+      padding:11px 16px;border-radius:999px;background:rgba(40,210,103,.12);
+      border:1px solid rgba(40,210,103,.24);color:#b9ffd2;font-weight:900;white-space:nowrap;
+      box-shadow:0 8px 18px rgba(0,0,0,.16);
+    }
+    .sales-hook{
+      margin-top:10px;
+      display:flex;align-items:center;gap:10px;flex-wrap:wrap;
+      color:#eef6ff;font-size:14px;font-weight:800;
+    }
+    .sales-hook-badge{
+      display:inline-flex;align-items:center;justify-content:center;
+      min-height:28px;padding:0 10px;border-radius:999px;
+      background:rgba(255,255,255,.06);
+      border:1px solid rgba(255,255,255,.10);
+      color:#dfeaff;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
+    }
+    .sales-hook-text{color:#dfeaff}
+    .stock-pill.stock-last{
+      background:rgba(255,90,98,.14);
+      border-color:rgba(255,90,98,.28);
+      color:#ffd6d9;
+    }
+    .stock-pill.stock-low{
+      background:rgba(255,155,61,.14);
+      border-color:rgba(255,155,61,.28);
+      color:#ffe2c2;
+    }
+    .stock-pill.stock-ok{
+      background:rgba(40,210,103,.12);
+      border-color:rgba(40,210,103,.24);
+      color:#b9ffd2;
+    }
+
+
+    .chips{display:flex;gap:8px;flex-wrap:wrap}
+    .chip{
+      padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);
+      background:rgba(255,255,255,.04);color:var(--muted-2);font-size:12px;font-weight:800;
+    }
+
+    .desc-box{
+      border-radius:20px;padding:18px 18px 16px;
+      background:linear-gradient(180deg, rgba(36,61,112,.88), rgba(29,53,102,.92));
+      border:1px solid rgba(100,196,255,.22);
+      box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.15);
+    }
+    .desc-title{font-size:15px;font-weight:1000;margin:0 0 12px;color:#fff}
+    .desc-list{margin:0;padding-left:22px;color:#fff;display:grid;gap:10px;font-size:15px;line-height:1.45}
+    .desc-list li::marker{color:#ffffff}
+    .desc-plain{margin:0;color:#fff;font-size:15px;line-height:1.55}
+
+    .footer-row{
+      margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;color:var(--muted);font-size:13px;
+    }
+    .footer-box{
+      min-height:62px;border-radius:18px;padding:12px 14px;
+      border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
+      display:flex;flex-direction:column;justify-content:center;gap:6px;
+    }
+    .footer-box strong{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
+    .footer-box span{color:#edf4ff;font-weight:800}
+
+    .error,.empty{
+      border:1px dashed rgba(255,255,255,.16);border-radius:28px;padding:40px 24px;text-align:center;color:var(--muted);
+      background:rgba(255,255,255,.03);box-shadow:var(--shadow-soft);margin-bottom:18px;
+    }
+    .error strong,.empty strong{display:block;color:var(--text);font-size:24px;margin-bottom:10px}
+
+    .modal{
+      position:fixed;inset:0;background:rgba(0,0,0,.80);display:none;align-items:center;justify-content:center;
+      padding:30px;z-index:999;backdrop-filter:blur(8px);
+    }
+    .modal.open{display:flex}
+    .modal-box{
+      position:relative;max-width:min(1280px,96vw);max-height:92vh;border-radius:24px;overflow:hidden;
+      background:#09101c;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.55);
+    }
+    .modal-box img{display:block;max-width:100%;max-height:92vh;object-fit:contain;background:#09101c}
+    .modal-close{
+      position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;cursor:pointer;
+      border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.45);color:#fff;font-size:24px;
+    }
+
+    
+    .action-buy{
+      background:linear-gradient(180deg, rgba(93,154,255,.34), rgba(52,115,214,.28));
+      border-color:rgba(100,196,255,.24);
+    }
+    .buy-modal{
+      position:fixed;inset:0;display:none;align-items:center;justify-content:center;
+      background:rgba(0,0,0,.72);backdrop-filter:blur(8px);z-index:1200;padding:20px;
+    }
+    .buy-modal.open{display:flex}
+    .buy-box{
+      width:min(760px,96vw);max-height:92vh;overflow:auto;
+      background:linear-gradient(180deg,#12203a,#0b1630);
+      border:1px solid rgba(255,255,255,.12);
+      border-radius:28px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.45)
+    }
+    .buy-title{margin:0 0 8px;font-size:28px;font-weight:1000}
+    .buy-subtitle{margin:0 0 18px;color:var(--muted)}
+    .buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+    .buy-grid .full{grid-column:1 / -1}
+    .buy-input{
+      width:100%;min-height:54px;border-radius:16px;border:1px solid rgba(255,255,255,.10);
+      background:rgba(255,255,255,.04);color:#fff;padding:14px 16px;font-size:15px;outline:none
+    }
+    .buy-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
+    .buy-btn{
+      min-height:50px;padding:0 18px;border:none;border-radius:999px;cursor:pointer;
+      font-weight:900;font-size:15px
+    }
+    .buy-btn-secondary{background:rgba(255,255,255,.08);color:#fff}
+    .buy-btn-primary{background:#2563eb;color:#fff}
+    .buy-summary{
+      margin:0 0 18px;padding:14px 16px;border-radius:18px;
+      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)
+    }
+    .buy-error{color:#fecaca;font-size:14px;margin-top:10px;display:none}
+
+
+    @media (max-width:1320px){
+      .controls{grid-template-columns:1fr 1fr 1fr 1fr}
+      .controls .button{grid-column:1 / -1}
+      .stats{grid-template-columns:1fr 1fr}
+    }
+    @media (max-width:920px){
+      .controls{grid-template-columns:1fr;padding:12px}
+      .stats{grid-template-columns:1fr}
+      .cards{grid-template-columns:1fr}
+      .card{min-height:auto}
+      .card-media{height:300px}
+      .title-row{flex-direction:column;align-items:flex-start}
+      .family-pill{white-space:normal}
+      .price-stock{flex-direction:column;align-items:flex-start}
+      .card-actions{padding:0 18px 6px}
+      .media-actions{justify-content:stretch}
+      .action-btn{flex:1}
+    }
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus,
+    input:-webkit-autofill:active,
+    textarea:-webkit-autofill,
+    select:-webkit-autofill {
+      -webkit-text-fill-color: #f4f7fb !important;
+      transition: background-color 9999s ease-in-out 0s;
+      box-shadow: 0 0 0px 1000px rgba(255,255,255,.05) inset !important;
+      border: 1px solid rgba(255,255,255,.10) !important;
+}
+.buy-delivery{
+  border:1px solid rgba(255,255,255,.10);
+  background:rgba(255,255,255,.04);
+  border-radius:18px;
+  padding:14px 16px;
+}
+
+.buy-check{
+  display:flex;
+  align-items:center;
+  gap:12px;
+  font-weight:800;
+  color:#eef6ff;
+  cursor:pointer;
+}
+
+.buy-check input{
+  width:18px;
+  height:18px;
+  accent-color:#2563eb;
+  cursor:pointer;
+}
+
+.buy-delivery-note{
+  margin-top:8px;
+  color:var(--muted);
+  font-size:13px;
+  line-height:1.4;
+}
+
+.buy-totals{
+  margin-top:4px;
+  border:1px solid rgba(255,255,255,.10);
+  background:rgba(255,255,255,.04);
+  border-radius:18px;
+  padding:14px 16px;
+  display:grid;
+  gap:10px;
+}
+
+.buy-total-row{
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  gap:12px;
+  color:#eef4ff;
+  font-size:15px;
+}
+
+.buy-total-final{
+  padding-top:10px;
+  border-top:1px solid rgba(255,255,255,.08);
+  font-size:17px;
+  font-weight:1000;
+}
+.buy-head{
+  margin-bottom:18px;
+}
+
+.buy-head-brand{
+  display:flex;
+  align-items:center;
+  gap:14px;
+}
+
+.buy-head-logo{
+  width:64px;
+  height:64px;
+  object-fit:contain;
+  border-radius:18px;
+  padding:6px;
+  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
+  border:1px solid rgba(255,255,255,.08);
+  box-shadow:0 16px 32px rgba(0,0,0,.28);
+  flex:0 0 auto;
+}
+
+.buy-head h3{
+  margin:0 0 6px;
+}
+
+.buy-head p{
+  margin:0;
+}
+
+.buy-summary-card{
+  display:grid;
+  grid-template-columns:84px 1fr;
+  gap:16px;
+  align-items:center;
+  border:1px solid rgba(255,255,255,.10);
+  background:rgba(255,255,255,.04);
+  border-radius:18px;
+  padding:14px;
+}
+
+.buy-summary-media{
+  width:84px;
+  height:84px;
+  border-radius:16px;
+  background:rgba(255,255,255,.92);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  overflow:hidden;
+}
+
+.buy-summary-media img{
+  width:100%;
+  height:100%;
+  object-fit:contain;
+  display:block;
+}
+
+.buy-summary-info strong{
+  display:block;
+  font-size:28px;
+  line-height:1.05;
+  margin-bottom:6px;
+  color:#fff;
+}
+
+.buy-summary-info div{
+  color:var(--muted);
+  font-size:15px;
+  line-height:1.45;
+}
+
+@media (max-width:640px){
+  .buy-summary-card{
+    grid-template-columns:1fr;
+  }
+
+  .buy-summary-media{
+    width:100%;
+    height:180px;
+  }
+
+  .buy-head-brand{
+    align-items:flex-start;
+  }
+
+  .buy-head-logo{
+    width:56px;
+    height:56px;
+  }
+}
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <section class="hero">
+      <div class="brand-block">
+        <div class="brand-logo-wrap">
+          <img id="brandLogo" class="brand-logo" alt="Blood Bros Sports logo">
+          <div id="brandFallback" class="brand-fallback">BB</div>
+        </div>
+        <div class="hero-copy">
+<h1>KAPVOE Portfolio</h1>
+          <p>Catàleg de les ulleres que estan marcant tendència. Explora cada model, descobreix-ne les característiques, amplia la imatge per veure-les en detall i compra-les per WhatsApp en segons.</p>
+        </div>
+      </div>
+    </section>
+
+    <div style="margin:8px 0 10px;color:var(--muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;">Explora el catàleg</div>
+    <section class="controls">
+      <input id="searchInput" class="field" type="search" autocomplete="off" placeholder="🔎  Cerca per codi, model, família, colors o descripció..." />
+      <select id="topFilter" class="field">
+        <option value="all">🏷️  Tots</option>
+        <option value="top">Només TOP VENDES</option>
+        <option value="normal">Sense TOP VENDES</option>
+      </select>
+      <select id="sortFilter" class="field">
+        <option value="code-asc">↕️  Codi A → Z</option>
+        <option value="code-desc">Codi Z → A</option>
+        <option value="price-asc">Preu menor → major</option>
+        <option value="price-desc">Preu major → menor</option>
+        <option value="stock-desc">Més stock</option>
+      </select>
+      <select id="priceFilter" class="field">
+        <option value="all">💶  Tots els preus</option>
+        <option value="0-60">Fins a 60 €</option>
+        <option value="60-80">De 60 € a 80 €</option>
+        <option value="80+">Més de 80 €</option>
+      </select>
+      <button id="refreshBtn" class="button">Actualitza</button>
+    </section>
+
+    <div style="margin:2px 0 10px;color:var(--muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;">Resum en viu</div>
+    <section class="stats">
+      <div class="stat"><div class="k">Models visibles</div><div class="v" id="statVisible">0</div></div>
+      <div class="stat"><div class="k">Top vendes visibles</div><div class="v" id="statTop">0</div></div>
+      <div class="stat"><div class="k">Darrera actualització</div><div class="v" id="statUpdated">--:--</div></div>
+    </section>
+
+
+    <div id="errorBox" class="error" style="display:none;">
+      <strong>No s'han pogut carregar les dades</strong>
+      <div id="errorText">Revisa l'endpoint JSON i la publicació del Web App.</div>
+    </div>
+
+    <div id="emptyBox" class="empty" style="display:none;">
+      <strong>No hi ha cap model visible</strong>
+      <div>No hi ha cap producte que compleixi els filtres actuals o amb stock suficient.</div>
+    </div>
+
+    <section id="cards" class="cards"></section>
+  </div>
+
+  <div id="imageModal" class="modal" aria-hidden="true">
+    <div class="modal-box">
+      <button class="modal-close" id="modalClose" aria-label="Tanca">×</button>
+      <img id="modalImage" src="" alt="">
+    </div>
+  </div>
+
+  <div id="buyModal" class="buy-modal" aria-hidden="true">
+    <div class="buy-box">
+      <div class="buy-head">
+        <div class="buy-head-brand">
+          <img src="assets/logo/bloodbros-sports-logo.png" alt="Blood Bros Sports" class="buy-head-logo">
+          <div>
+            <h2 class="buy-title">Comprar ara</h2>
+            <p class="buy-subtitle">Omple les teves dades i et redirigirem al pagament segur amb Stripe.</p>
+          </div>
+        </div>
+      </div>
+      <div id="buySummary" class="buy-summary-card">
+        <div class="buy-summary-media">
+          <img id="buySummaryImage" src="" alt="">
+        </div>
+        <div class="buy-summary-info">
+          <strong id="buySummaryCode">-</strong>
+          <div id="buySummaryMeta">Preu: - · Stock visible: -</div>
+        </div>
+      </div>
+<form id="buyForm">
+  <div class="buy-grid">
+    <input class="buy-input full" name="customer_name" autocomplete="name" placeholder="Nom complet" required>
+
+    <input class="buy-input" name="phone" autocomplete="tel" placeholder="Telèfon" required>
+    <input class="buy-input" type="email" name="email" autocomplete="email" placeholder="Correu electrònic" required>
+
+    <div class="buy-delivery full">
+      <label class="buy-check">
+        <input type="checkbox" id="shippingToggle" name="shipping_requested" value="1">
+        <span>Vull enviament per <strong>7,99 €</strong></span>
+      </label>
+      <div class="buy-delivery-note">
+        Si no marques aquesta opció, quedarem amb tu per WhatsApp per entregar-te les ulleres en persona a Lleida o Mollerussa. Si prefereixes enviament, marca aquesta casella.
+      </div>
+    </div>
+
+    <div id="shippingFields" class="buy-grid full" style="display:none;">
+      <input class="buy-input full" name="address" autocomplete="street-address" placeholder="Adreça postal">
+      <input class="buy-input" name="postal_code" autocomplete="postal-code" placeholder="Codi postal">
+      <input class="buy-input" name="city" autocomplete="address-level2" placeholder="Ciutat">
+      <input class="buy-input" name="province" autocomplete="address-level1" placeholder="Província">
+    </div>
+
+    <div id="buyTotals" class="buy-totals full">
+      <div class="buy-total-row">
+        <span>Subtotal producte</span>
+        <strong id="buySubtotal">-</strong>
+      </div>
+      <div class="buy-total-row">
+        <span>Enviament</span>
+        <strong id="buyShippingCost">0,00 €</strong>
+      </div>
+      <div class="buy-total-row buy-total-final">
+        <span>Total</span>
+        <strong id="buyTotalAmount">-</strong>
+      </div>
+    </div>
+
+    <input type="hidden" name="shipping_method" value="pickup">
+    <input type="hidden" name="product_code">
+    <input type="hidden" name="product_name">
+    <input type="hidden" name="price">
+    <input type="hidden" name="quantity" value="1">
+  </div>
+
+  <div id="buyError" class="buy-error"></div>
+
+  <div class="buy-actions">
+    <button type="button" class="buy-btn buy-btn-secondary" id="buyCancel">Cancel·la</button>
+    <button type="submit" class="buy-btn buy-btn-primary">Continuar al pagament</button>
+  </div>
+</form>
+    </div>
+  </div>
+<script type="module" src="js/app.js"></script>  
+</body>
+</html>
@@ -205,9 +205,9 @@
      padding:26px 26px 0;overflow:hidden;
    }
    .card-actions{
-      display:flex;gap:12px;
      padding:0 26px 6px;
      margin-top:2px;
+      width:100%;
    }
    .media-stage{
      width:100%;height:100%;border-radius:26px;
@@ -223,24 +223,33 @@
    .media-placeholder strong{display:block;color:var(--text);font-size:18px;margin-bottom:8px}

    .media-actions{
-      display:flex;gap:12px;justify-content:stretch;z-index:3;
+      display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.18fr);gap:10px;justify-content:stretch;z-index:3;
      pointer-events:none;width:100%;
    }
    .action-btn{
      pointer-events:auto;
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
-      min-height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
-      text-decoration:none;color:#fff;font-weight:900;font-size:14px;backdrop-filter:blur(10px);
+      min-height:48px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
+      text-decoration:none;color:#fff;font-weight:900;font-size:13px;backdrop-filter:blur(10px);
      box-shadow:0 8px 18px rgba(0,0,0,.22);
      transition:transform .16s ease, filter .16s ease, border-color .16s ease;
-      cursor:pointer;flex:1;
+      cursor:pointer;min-width:0;white-space:nowrap;line-height:1;
    }
    .action-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
-    .action-wa:hover{animation-play-state:paused}
+    .action-buy:hover{animation-play-state:paused}
    .action-view{background:rgba(8,15,29,.66)}
    .action-wa{
      background:linear-gradient(180deg, rgba(37,211,102,.92), rgba(26,171,79,.92));
      border-color:rgba(255,255,255,.18);
+    }
+    .action-view,
+    .action-buy,
+    .action-wa{
+      min-width:0;
+    }
+    .action-buy{
+      background:linear-gradient(180deg, rgba(93,154,255,.34), rgba(52,115,214,.28));
+      border-color:rgba(100,196,255,.24);
      animation:waPulse 2.2s ease-in-out infinite;
    }
    @keyframes waPulse{
@@ -274,14 +283,16 @@
      gap:16px;
      align-items:flex-end;
      padding:4px 0 2px;
+      flex-wrap:wrap;
    }
    .price-box{display:flex;flex-direction:column;gap:6px}
    .price-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.16em}
    .price{font-size:38px;font-weight:1000;line-height:1}
    .stock-pill{
-      padding:11px 16px;border-radius:999px;background:rgba(40,210,103,.12);
-      border:1px solid rgba(40,210,103,.24);color:#b9ffd2;font-weight:900;white-space:nowrap;
-      box-shadow:0 8px 18px rgba(0,0,0,.16);
+      padding:9px 14px;border-radius:999px;background:rgba(40,210,103,.12);
+      border:1px solid rgba(40,210,103,.24);color:#b9ffd2;font-weight:900;white-space:normal;
+      box-shadow:0 8px 18px rgba(0,0,0,.16);font-size:11px;line-height:1.2;max-width:100%;
+      overflow-wrap:anywhere;
    }
    .sales-hook{
      margin-top:10px;
@@ -363,10 +374,6 @@
    }

    
-    .action-buy{
-      background:linear-gradient(180deg, rgba(93,154,255,.34), rgba(52,115,214,.28));
-      border-color:rgba(100,196,255,.24);
-    }
    .buy-modal{
      position:fixed;inset:0;display:none;align-items:center;justify-content:center;
      background:rgba(0,0,0,.72);backdrop-filter:blur(8px);z-index:1200;padding:20px;
@@ -415,8 +422,11 @@
      .family-pill{white-space:normal}
      .price-stock{flex-direction:column;align-items:flex-start}
      .card-actions{padding:0 18px 6px}
-      .media-actions{justify-content:stretch}
-      .action-btn{flex:1}
+      .media-actions{justify-content:stretch;grid-template-columns:1fr}
+      .action-btn{width:100%;font-size:13px;padding:0 12px;gap:8px}
+      .price-stock{gap:12px;align-items:flex-start;flex-direction:column}
+      .price-box{width:100%}
+      .stock-pill{width:100%;font-size:11px;padding:10px 12px;border-radius:18px}
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
@@ -429,7 +439,153 @@
      box-shadow: 0 0 0px 1000px rgba(255,255,255,.05) inset !important;
      border: 1px solid rgba(255,255,255,.10) !important;
 }
+.buy-delivery{
+  border:1px solid rgba(255,255,255,.10);
+  background:rgba(255,255,255,.04);
+  border-radius:18px;
+  padding:14px 16px;
+}

+.buy-check{
+  display:flex;
+  align-items:center;
+  gap:12px;
+  font-weight:800;
+  color:#eef6ff;
+  cursor:pointer;
+}
+
+.buy-check input{
+  width:18px;
+  height:18px;
+  accent-color:#2563eb;
+  cursor:pointer;
+}
+
+.buy-delivery-note{
+  margin-top:8px;
+  color:var(--muted);
+  font-size:13px;
+  line-height:1.4;
+}
+
+.buy-totals{
+  margin-top:4px;
+  border:1px solid rgba(255,255,255,.10);
+  background:rgba(255,255,255,.04);
+  border-radius:18px;
+  padding:14px 16px;
+  display:grid;
+  gap:10px;
+}
+
+.buy-total-row{
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  gap:12px;
+  color:#eef4ff;
+  font-size:15px;
+}
+
+.buy-total-final{
+  padding-top:10px;
+  border-top:1px solid rgba(255,255,255,.08);
+  font-size:17px;
+  font-weight:1000;
+}
+.buy-head{
+  margin-bottom:18px;
+}
+
+.buy-head-brand{
+  display:flex;
+  align-items:center;
+  gap:14px;
+}
+
+.buy-head-logo{
+  width:64px;
+  height:64px;
+  object-fit:contain;
+  border-radius:18px;
+  padding:6px;
+  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
+  border:1px solid rgba(255,255,255,.08);
+  box-shadow:0 16px 32px rgba(0,0,0,.28);
+  flex:0 0 auto;
+}
+
+.buy-head h3{
+  margin:0 0 6px;
+}
+
+.buy-head p{
+  margin:0;
+}
+
+.buy-summary-card{
+  display:grid;
+  grid-template-columns:84px 1fr;
+  gap:16px;
+  align-items:center;
+  border:1px solid rgba(255,255,255,.10);
+  background:rgba(255,255,255,.04);
+  border-radius:18px;
+  padding:14px;
+}
+
+.buy-summary-media{
+  width:84px;
+  height:84px;
+  border-radius:16px;
+  background:rgba(255,255,255,.92);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  overflow:hidden;
+}
+
+.buy-summary-media img{
+  width:100%;
+  height:100%;
+  object-fit:contain;
+  display:block;
+}
+
+.buy-summary-info strong{
+  display:block;
+  font-size:28px;
+  line-height:1.05;
+  margin-bottom:6px;
+  color:#fff;
+}
+
+.buy-summary-info div{
+  color:var(--muted);
+  font-size:15px;
+  line-height:1.45;
+}
+
+@media (max-width:640px){
+  .buy-summary-card{
+    grid-template-columns:1fr;
+  }
+
+  .buy-summary-media{
+    width:100%;
+    height:180px;
+  }
+
+  .buy-head-brand{
+    align-items:flex-start;
+  }
+
+  .buy-head-logo{
+    width:56px;
+    height:56px;
+  }
+}
  </style>
 </head>
 <body>
@@ -501,29 +657,77 @@

  <div id="buyModal" class="buy-modal" aria-hidden="true">
    <div class="buy-box">
+      <div class="buy-head">
+        <div class="buy-head-brand">
+          <img src="assets/logo/bloodbros-sports-logo.png" alt="Blood Bros Sports" class="buy-head-logo">
+          <div>
            <h2 class="buy-title">Comprar ara</h2>
            <p class="buy-subtitle">Omple les teves dades i et redirigirem al pagament segur amb Stripe.</p>
-      <div id="buySummary" class="buy-summary"></div>
-      <form id="buyForm">
+          </div>
+        </div>
+      </div>
+      <div id="buySummary" class="buy-summary-card">
+        <div class="buy-summary-media">
+          <img id="buySummaryImage" src="" alt="">
+        </div>
+        <div class="buy-summary-info">
+          <strong id="buySummaryCode">-</strong>
+          <div id="buySummaryMeta">Preu: - · Stock visible: -</div>
+        </div>
+      </div>
+<form id="buyForm">
  <div class="buy-grid">
    <input class="buy-input full" name="customer_name" autocomplete="name" placeholder="Nom complet" required>
-          <input class="buy-input full" name="address" autocomplete="street-address" placeholder="Adreça postal" required>
-          <input class="buy-input" name="postal_code" autocomplete="postal-code" placeholder="Codi postal" required>
-          <input class="buy-input" name="city" autocomplete="address-level2" placeholder="Ciutat" required>
-          <input class="buy-input" name="province" autocomplete="address-level1" placeholder="Província" required>
+
    <input class="buy-input" name="phone" autocomplete="tel" placeholder="Telèfon" required>
-          <input class="buy-input full" type="email" name="email" autocomplete="email" placeholder="Correu electrònic" required>
+    <input class="buy-input" type="email" name="email" autocomplete="email" placeholder="Correu electrònic" required>
+
+    <div class="buy-delivery full">
+      <label class="buy-check">
+        <input type="checkbox" id="shippingToggle" name="shipping_requested" value="1">
+        <span>Vull enviament per <strong>7,99 €</strong></span>
+      </label>
+      <div class="buy-delivery-note">
+        Si no marques aquesta opció, quedarem amb tu per WhatsApp per entregar-te les ulleres en persona a Lleida o Mollerussa. Si prefereixes enviament, marca aquesta casella.
+      </div>
+    </div>
+
+    <div id="shippingFields" class="buy-grid full" style="display:none;">
+      <input class="buy-input full" name="address" autocomplete="street-address" placeholder="Adreça postal">
+      <input class="buy-input" name="postal_code" autocomplete="postal-code" placeholder="Codi postal">
+      <input class="buy-input" name="city" autocomplete="address-level2" placeholder="Ciutat">
+      <input class="buy-input" name="province" autocomplete="address-level1" placeholder="Província">
+    </div>
+
+    <div id="buyTotals" class="buy-totals full">
+      <div class="buy-total-row">
+        <span>Subtotal producte</span>
+        <strong id="buySubtotal">-</strong>
+      </div>
+      <div class="buy-total-row">
+        <span>Enviament</span>
+        <strong id="buyShippingCost">0,00 €</strong>
+      </div>
+      <div class="buy-total-row buy-total-final">
+        <span>Total</span>
+        <strong id="buyTotalAmount">-</strong>
+      </div>
+    </div>
+
+    <input type="hidden" name="shipping_method" value="pickup">
    <input type="hidden" name="product_code">
    <input type="hidden" name="product_name">
    <input type="hidden" name="price">
    <input type="hidden" name="quantity" value="1">
  </div>
+
  <div id="buyError" class="buy-error"></div>
+
  <div class="buy-actions">
    <button type="button" class="buy-btn buy-btn-secondary" id="buyCancel">Cancel·la</button>
    <button type="submit" class="buy-btn buy-btn-primary">Continuar al pagament</button>
  </div>
-      </form>
+</form>
    </div>
  </div>
 <script type="module" src="js/app.js"></script>  
@@ -2,7 +2,8 @@ import {
  API_URL,
  AUTO_REFRESH_MS,
  BLOODBROS_LOGO_URL,
-  CREATE_CHECKOUT_URL
+  CREATE_CHECKOUT_URL,
+  TRACK_EVENT_URL
 } from './config.js';

 import {
@@ -14,7 +15,9 @@ import {
  getFilteredProducts
 } from './catalog.js';

-    const els = {
+const SHIPPING_PRICE = 7.99;
+
+const els = {
  cards: document.getElementById('cards'),
  errorBox: document.getElementById('errorBox'),
  errorText: document.getElementById('errorText'),
@@ -32,31 +35,91 @@ import {
  modalClose: document.getElementById('modalClose'),
  brandLogo: document.getElementById('brandLogo'),
  brandFallback: document.getElementById('brandFallback')
+};
+
+let products = [];
+let lastFetchAt = null;
+let lastUpdatedAt = null;
+let pageViewTracked = false;
+
+function getSessionId() {
+  const key = 'kapvoe_session_id';
+  let sessionId = localStorage.getItem(key);
+  if (!sessionId) {
+    sessionId = `sess_${Math.random().toString(36).slice(2)}${Date.now()}`;
+    localStorage.setItem(key, sessionId);
+  }
+  return sessionId;
+}
+
+function getPageType() {
+  const path = window.location.pathname.toLowerCase();
+  if (path.includes('top-vendes')) return 'top-vendes';
+  if (path.includes('checkout')) return 'checkout';
+  return 'catalog';
+}
+
+function getDeviceType() {
+  const ua = navigator.userAgent || '';
+  if (/tablet|ipad/i.test(ua)) return 'tablet';
+  if (/mobile|android|iphone|ipod/i.test(ua)) return 'mobile';
+  return 'desktop';
+}
+
+function getUtmParams() {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    utm_source: params.get('utm_source') || '',
+    utm_medium: params.get('utm_medium') || '',
+    utm_campaign: params.get('utm_campaign') || ''
  };
+}

-    let products = [];
-    let lastFetchAt = null;
-    let lastUpdatedAt = null;
+function buildAnalyticsPayload(eventType, extra = {}) {
+  const utm = getUtmParams();
+  return {
+    event_type: eventType,
+    session_id: getSessionId(),
+    page_url: window.location.href,
+    referrer: document.referrer || '',
+    user_agent: navigator.userAgent || '',
+    device_type: getDeviceType(),
+    page_type: getPageType(),
+    ...utm,
+    ...extra
+  };
+}

-    function escapeHtml(value) {
+async function trackEvent(eventType, extra = {}) {
+  try {
+    await fetch(TRACK_EVENT_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(buildAnalyticsPayload(eventType, extra)),
+      keepalive: true
+    });
+  } catch (_) {
+    // Ignore tracking failures to avoid affecting the storefront UX.
+  }
+}
+
+function escapeHtml(value) {
  return String(value ?? '')
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');
-    }
+}

-
-    function fmtTime(value) {
+function fmtTime(value) {
  if (!value) return '--:--';
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return '--:--';
  return d.toLocaleTimeString('ca-ES', { hour: '2-digit', minute: '2-digit' });
-    }
+}

-
-    function renderDescription(product) {
+function renderDescription(product) {
  const items = parseDescription(product.description);
  if (items.length) {
    return `
@@ -72,9 +135,9 @@ import {
      <p class="desc-plain">Sense descripció disponible.</p>
    </div>
  `;
-    }
+}

-    function render() {
+function render() {
  const data = getFilteredProducts(products, {
    search: els.searchInput.value,
    top: els.topFilter.value,
@@ -84,10 +147,14 @@ import {

  els.cards.innerHTML = '';
  els.errorBox.style.display = 'none';
-      els.emptyBox.style.display = data.length ? 'none' : 'block';      const totalTop = data.filter(p => !!p.top_vendes).length;
+  els.emptyBox.style.display = data.length ? 'none' : 'block';
+
+  const totalTop = data.filter(p => !!p.top_vendes).length;

  els.statVisible.textContent = data.length;
-      els.statTop.textContent = totalTop;      els.statUpdated.textContent = fmtTime(lastUpdatedAt || lastFetchAt);
+  els.statTop.textContent = totalTop;
+  els.statUpdated.textContent = fmtTime(lastUpdatedAt || lastFetchAt);
+
  if (!data.length) return;

  const frag = document.createDocumentFragment();
@@ -99,8 +166,6 @@ import {
    const chips = [];
    if (product.colors) chips.push(product.colors);

-
-
    const imageHtml = product.image_url
      ? `<img src="${escapeHtml(product.image_url)}" alt="${escapeHtml(product.product_code || product.model || 'Producte')}" loading="lazy" referrerpolicy="no-referrer">`
      : `<div class="media-placeholder"><strong>${escapeHtml(product.product_code || 'Sense codi')}</strong><div>Sense imatge definida a IMAGE_URL.</div></div>`;
@@ -122,7 +187,8 @@ import {
            data-code="${escapeHtml(product.product_code || '')}"
            data-name="${escapeHtml(product.product_code || '')}"
            data-price="${escapeHtml(product.europe_price_number || 0)}"
-                data-stock="${escapeHtml(product.stock || 0)}">💳 Comprar ara</button>
+            data-stock="${escapeHtml(product.stock || 0)}"
+            data-image="${escapeHtml(product.image_url || '')}">💳 Comprar ara</button>
          <a class="action-btn action-wa" href="${escapeHtml(buildWhatsappLink(product))}" target="_blank" rel="noopener noreferrer"><span class="wa-icon" aria-hidden="true"></span>WhatsApp</a>
        </div>
      </div>
@@ -130,9 +196,7 @@ import {
        <div class="title-row">
          <div class="title-stack">
            <div class="product-code">${escapeHtml(product.product_code || '')}</div>
-
          </div>
-
        </div>

        <div class="price-stock">
@@ -167,14 +231,30 @@ import {
    node.addEventListener('click', () => {
      const src = node.getAttribute('data-image');
      if (!src) return;
+      const card = node.closest('.card');
+      const code = card?.querySelector('.product-code')?.textContent?.trim() || '';
+      trackEvent('view_large', {
+        product_code: code
+      });
      els.modalImage.src = src;
      els.modal.classList.add('open');
      els.modal.setAttribute('aria-hidden', 'false');
    });
  });
-    }

-    async function loadData() {      els.errorBox.style.display = 'none';
+  document.querySelectorAll('.action-wa').forEach(node => {
+    node.addEventListener('click', () => {
+      const card = node.closest('.card');
+      const code = card?.querySelector('.product-code')?.textContent?.trim() || '';
+      trackEvent('whatsapp_click', {
+        product_code: code
+      });
+    });
+  });
+}
+
+async function loadData() {
+  els.errorBox.style.display = 'none';

  try {
    const response = await fetch(API_URL, { method: 'GET', cache: 'no-store' });
@@ -187,42 +267,114 @@ import {

    products = json.products;
    lastFetchAt = new Date().toISOString();
-        lastUpdatedAt = json.updated_at || lastFetchAt;        render();
+    lastUpdatedAt = json.updated_at || lastFetchAt;
+    render();
+
+    if (!pageViewTracked) {
+      pageViewTracked = true;
+      trackEvent('page_view');
+    }
  } catch (err) {
    products = [];
    lastFetchAt = new Date().toISOString();
-        lastUpdatedAt = null;        els.errorText.textContent = `No s'ha pogut llegir l'endpoint JSON. Detall: ${err.message}`;
+    lastUpdatedAt = null;
+    els.errorText.textContent = `No s'ha pogut llegir l'endpoint JSON. Detall: ${err.message}`;
    els.errorBox.style.display = 'block';
    render();
  }
-    }
+}

-    
-    const buyEls = {
+const buyEls = {
  modal: document.getElementById('buyModal'),
  form: document.getElementById('buyForm'),
  summary: document.getElementById('buySummary'),
+  summaryImage: document.getElementById('buySummaryImage'),
+  summaryCode: document.getElementById('buySummaryCode'),
+  summaryMeta: document.getElementById('buySummaryMeta'),
  error: document.getElementById('buyError'),
  cancel: document.getElementById('buyCancel'),
-    };
+  shippingToggle: document.getElementById('shippingToggle'),
+  shippingFields: document.getElementById('shippingFields'),
+  subtotal: document.getElementById('buySubtotal'),
+  shippingCost: document.getElementById('buyShippingCost'),
+  totalAmount: document.getElementById('buyTotalAmount')
+};
+
+function formatEuro(value) {
+  const n = Number(value || 0);
+  return new Intl.NumberFormat('ca-ES', {
+    style: 'currency',
+    currency: 'EUR'
+  }).format(n);
+}
+
+function updateBuyTotals() {
+  const price = Number(buyEls.form.price.value || 0);
+  const quantity = Number(buyEls.form.quantity.value || 1);
+  const shippingRequested = !!buyEls.shippingToggle.checked;
+
+  const subtotal = price * quantity;
+  const shipping = shippingRequested ? SHIPPING_PRICE : 0;
+  const total = subtotal + shipping;
+
+  buyEls.form.shipping_method.value = shippingRequested ? 'shipping' : 'pickup';
+
+  buyEls.subtotal.textContent = formatEuro(subtotal);
+  buyEls.shippingCost.textContent = formatEuro(shipping);
+  buyEls.totalAmount.textContent = formatEuro(total);
+
+  buyEls.shippingFields.style.display = shippingRequested ? 'grid' : 'none';
+
+  ['address', 'postal_code', 'city', 'province'].forEach(name => {
+    const field = buyEls.form.elements[name];
+    if (!field) return;
+    field.required = shippingRequested;
+  });
+}
+
+function openBuyModal(product) {
+  trackEvent('checkout_open', {
+    product_code: product.code || '',
+    model: product.name || '',
+    price: String(product.price || ''),
+    stock: String(product.stock || ''),
+    quantity: String(product.quantity || 1)
+  });

-    function openBuyModal(product) {
  buyEls.form.product_code.value = product.code;
  buyEls.form.product_name.value = product.name;
  buyEls.form.price.value = product.price;
-      buyEls.summary.innerHTML = `<strong>${escapeHtml(product.name)}</strong><br>Preu: ${escapeHtml(String(product.price).replace('.', ',') + ' €')} · Stock visible: ${escapeHtml(product.stock)}`;
+  buyEls.form.quantity.value = product.quantity || 1;
+
+  buyEls.summaryCode.textContent = product.name || product.code || '-';
+  buyEls.summaryMeta.innerHTML = `Preu: ${formatEuro(product.price)} · Stock visible: ${escapeHtml(product.stock)}`;
+
+  if (product.image) {
+    buyEls.summaryImage.src = product.image;
+    buyEls.summaryImage.alt = product.name || product.code || 'Producte';
+    buyEls.summaryImage.style.display = 'block';
+  } else {
+    buyEls.summaryImage.removeAttribute('src');
+    buyEls.summaryImage.alt = '';
+    buyEls.summaryImage.style.display = 'none';
+  }
+
+  buyEls.shippingToggle.checked = false;
  buyEls.error.style.display = 'none';
  buyEls.error.textContent = '';
+
+  updateBuyTotals();
+
  buyEls.modal.classList.add('open');
  buyEls.modal.setAttribute('aria-hidden', 'false');
-    }
+}

-    function closeBuyModal() {
+function closeBuyModal() {
  buyEls.modal.classList.remove('open');
  buyEls.modal.setAttribute('aria-hidden', 'true');
-    }
+}

-    function initLogo() {
+function initLogo() {
  if (!BLOODBROS_LOGO_URL) return;
  els.brandLogo.onload = () => {
    els.brandLogo.style.display = 'block';
@@ -233,77 +385,138 @@ import {
    els.brandFallback.style.display = 'flex';
  };
  els.brandLogo.src = BLOODBROS_LOGO_URL;
-    }
+}

-    [els.searchInput, els.topFilter, els.sortFilter, els.priceFilter].forEach(el => {
+[els.searchInput, els.topFilter, els.sortFilter, els.priceFilter].forEach(el => {
  el.addEventListener('input', render);
  el.addEventListener('change', render);
+});
+
+els.topFilter.addEventListener('change', () => {
+  trackEvent('filter_use', {
+    category: `${els.topFilter.value}|${els.sortFilter.value}|${els.priceFilter.value}|${els.searchInput.value || ''}`
  });
+});

-    els.refreshBtn.addEventListener('click', loadData);
+els.sortFilter.addEventListener('change', () => {
+  trackEvent('filter_use', {
+    category: `${els.topFilter.value}|${els.sortFilter.value}|${els.priceFilter.value}|${els.searchInput.value || ''}`
+  });
+});

-    els.modalClose.addEventListener('click', () => {
+els.priceFilter.addEventListener('change', () => {
+  trackEvent('filter_use', {
+    category: `${els.topFilter.value}|${els.sortFilter.value}|${els.priceFilter.value}|${els.searchInput.value || ''}`
+  });
+});
+
+els.refreshBtn.addEventListener('click', () => {
+  trackEvent('refresh_click');
+  loadData();
+});
+
+els.modalClose.addEventListener('click', () => {
  els.modal.classList.remove('open');
  els.modal.setAttribute('aria-hidden', 'true');
  els.modalImage.src = '';
-    });
+});

-    els.modal.addEventListener('click', (e) => {
+els.modal.addEventListener('click', (e) => {
  if (e.target === els.modal) {
    els.modal.classList.remove('open');
    els.modal.setAttribute('aria-hidden', 'true');
    els.modalImage.src = '';
  }
-    });
+});

-    document.addEventListener('keydown', (e) => {
+document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    els.modal.classList.remove('open');
    els.modal.setAttribute('aria-hidden', 'true');
    els.modalImage.src = '';
    closeBuyModal();
  }
-    });
+});

-
-    document.addEventListener('click', (e) => {
+document.addEventListener('click', (e) => {
  const btn = e.target.closest('.js-buy');
  if (!btn) return;
+
+  trackEvent('buy_click', {
+    product_code: btn.getAttribute('data-code') || '',
+    model: btn.getAttribute('data-name') || '',
+    price: btn.getAttribute('data-price') || '',
+    stock: btn.getAttribute('data-stock') || '',
+    quantity: '1'
+  });
+
  openBuyModal({
    code: btn.getAttribute('data-code') || '',
    name: btn.getAttribute('data-name') || '',
-        price: btn.getAttribute('data-price') || '0',
-        stock: btn.getAttribute('data-stock') || '0'
-      });
+    price: Number(btn.getAttribute('data-price') || 0),
+    stock: btn.getAttribute('data-stock') || '0',
+    image: btn.getAttribute('data-image') || '',
+    quantity: 1
  });
+});

-    buyEls.cancel.addEventListener('click', closeBuyModal);
-    buyEls.modal.addEventListener('click', (e) => {
+buyEls.shippingToggle.addEventListener('change', updateBuyTotals);
+
+buyEls.cancel.addEventListener('click', closeBuyModal);
+buyEls.modal.addEventListener('click', (e) => {
  if (e.target === buyEls.modal) closeBuyModal();
-    });
+});

-    buyEls.form.addEventListener('submit', async (e) => {
+buyEls.form.addEventListener('submit', async (e) => {
  e.preventDefault();
  buyEls.error.style.display = 'none';
+
  const payload = Object.fromEntries(new FormData(buyEls.form).entries());
+  const analyticsPayload = buildAnalyticsPayload('checkout_submit', {
+    product_code: payload.product_code || '',
+    model: payload.product_name || '',
+    price: payload.price || '',
+    quantity: payload.quantity || '1',
+    shipping_method: payload.shipping_method || 'pickup'
+  });
+
+  payload.analytics_session_id = analyticsPayload.session_id;
+  payload.analytics_page_url = analyticsPayload.page_url;
+  payload.analytics_referrer = analyticsPayload.referrer;
+  payload.analytics_user_agent = analyticsPayload.user_agent;
+  payload.analytics_utm_source = analyticsPayload.utm_source;
+  payload.analytics_utm_medium = analyticsPayload.utm_medium;
+  payload.analytics_utm_campaign = analyticsPayload.utm_campaign;
+  payload.analytics_device_type = analyticsPayload.device_type;
+  payload.analytics_page_type = analyticsPayload.page_type;

  try {
+    trackEvent('checkout_submit', {
+      product_code: payload.product_code || '',
+      model: payload.product_name || '',
+      price: payload.price || '',
+      quantity: payload.quantity || '1',
+      shipping_method: payload.shipping_method || 'pickup'
+    });
+
    const response = await fetch(CREATE_CHECKOUT_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
+
    const json = await response.json();
    if (!response.ok || !json.ok || !json.checkout_url) {
      throw new Error(json.error || 'No s\'ha pogut crear el checkout');
    }
+
    window.location.href = json.checkout_url;
  } catch (err) {
    buyEls.error.textContent = err.message || 'Error inesperat';
    buyEls.error.style.display = 'block';
  }
-    });
+});

-    initLogo();
-    loadData();
-    setInterval(loadData, AUTO_REFRESH_MS);
+initLogo();
+loadData();
+setInterval(loadData, AUTO_REFRESH_MS);
@@ -6,5 +6,6 @@

    // Si vols que l'acció vagi al teu número real, posa'l aquí en format internacional sense + ni espais.
    // Exemple: '34600111222'
-    export const WHATSAPP_PHONE = '34644695160';
-    export const CREATE_CHECKOUT_URL = '/checkout/create-checkout-session.php';
+export const WHATSAPP_PHONE = '34644695160';
+export const CREATE_CHECKOUT_URL = '/checkout/create-checkout-session.php';
+export const TRACK_EVENT_URL = '/api/track-event.php';
@@ -0,0 +1 @@
+<?php phpinfo();
				`@@ -0,0 +1 @@`
				`timestamp,event_type,product_code,model,category,price,stock,page_url,user_agent,session_id,event_id,order_id,stripe_session_id,payment_status,quantity,shipping_method,total_amount,referrer,utm_source,utm_medium,utm_campaign,device_type,page_type`
				`@@ -0,0 +1 @@`
				`timestamp,order_id,stripe_session_id,product_code,model,quantity,price,shipping_method,total_amount,payment_status,customer_name,email,phone,session_id,utm_source,utm_medium,utm_campaign,device_type,page_type`