Primer commit

checkout/common.php

@@ -0,0 +1,329 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * KAPVOE Stripe Checkout helpers
+ * Plain PHP + cURL. No Composer dependency required.
+ */
+
+function kapvoe_load_config(): array {
+    $configFile = __DIR__ . '/config.php';
+    if (!file_exists($configFile)) {
+        http_response_code(500);
+        header('Content-Type: application/json; charset=utf-8');
+        echo json_encode([
+            'ok' => false,
+            'error' => 'Falta el fitxer config.php'
+        ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+        exit;
+    }
+
+    /** @var array $config */
+    $config = require $configFile;
+    return $config;
+}
+
+function kapvoe_json_input(): array {
+    $raw = file_get_contents('php://input') ?: '{}';
+    $decoded = json_decode($raw, true);
+    return is_array($decoded) ? $decoded : [];
+}
+
+function kapvoe_json_response(array $payload, int $status = 200): never {
+    http_response_code($status);
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode($payload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+
+function kapvoe_require_post(): void {
+    if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+        kapvoe_json_response(['ok' => false, 'error' => 'Mètode no permès'], 405);
+    }
+}
+
+function kapvoe_validate_required(array $data, array $fields): array {
+    $errors = [];
+    foreach ($fields as $field) {
+        if (!isset($data[$field]) || trim((string)$data[$field]) === '') {
+            $errors[$field] = 'Camp obligatori';
+        }
+    }
+    return $errors;
+}
+
+function kapvoe_orders_csv_path(array $config): string {
+    $dir = rtrim((string)$config['orders_storage_dir'], DIRECTORY_SEPARATOR);
+    if (!is_dir($dir)) {
+        mkdir($dir, 0775, true);
+    }
+    return $dir . DIRECTORY_SEPARATOR . 'orders.csv';
+}
+
+function kapvoe_append_order(array $config, array $order): void {
+    $path = kapvoe_orders_csv_path($config);
+    $exists = file_exists($path);
+    $fh = fopen($path, 'ab');
+    if (!$fh) {
+        throw new RuntimeException('No s\'ha pogut obrir orders.csv');
+    }
+
+    if (!$exists) {
+        fputcsv($fh, array_keys($order), ';');
+    }
+    fputcsv($fh, array_values($order), ';');
+    fclose($fh);
+}
+
+function kapvoe_update_order_status(array $config, string $sessionId, string $newStatus, string $paymentIntent = ''): void {
+    $path = kapvoe_orders_csv_path($config);
+    if (!file_exists($path)) {
+        return;
+    }
+
+    $rows = [];
+    $fh = fopen($path, 'rb');
+    if (!$fh) {
+        return;
+    }
+    while (($row = fgetcsv($fh, 0, ';')) !== false) {
+        $rows[] = $row;
+    }
+    fclose($fh);
+
+    if (count($rows) < 2) {
+        return;
+    }
+
+    $header = $rows[0];
+    $sessionIdx = array_search('stripe_session_id', $header, true);
+    $statusIdx = array_search('payment_status', $header, true);
+    $intentIdx = array_search('payment_intent_id', $header, true);
+
+    if ($sessionIdx === false || $statusIdx === false) {
+        return;
+    }
+
+    for ($i = 1; $i < count($rows); $i++) {
+        while (count($rows[$i]) < count($header)) {
+            $rows[$i][] = '';
+        }
+
+        if (($rows[$i][$sessionIdx] ?? '') === $sessionId) {
+            $rows[$i][$statusIdx] = $newStatus;
+            if ($intentIdx !== false) {
+                $rows[$i][$intentIdx] = $paymentIntent;
+            }
+            break;
+        }
+    }
+
+    $fh = fopen($path, 'wb');
+    if (!$fh) {
+        return;
+    }
+    foreach ($rows as $row) {
+        while (count($row) < count($header)) {
+            $row[] = '';
+        }
+        fputcsv($fh, $row, ';');
+    }
+    fclose($fh);
+}
+
+function kapvoe_get_order_by_session_id(array $config, string $sessionId): ?array {
+    $path = kapvoe_orders_csv_path($config);
+    if (!file_exists($path)) {
+        return null;
+    }
+
+    $fh = fopen($path, 'rb');
+    if (!$fh) {
+        return null;
+    }
+
+    $header = fgetcsv($fh, 0, ';');
+    if (!$header) {
+        fclose($fh);
+        return null;
+    }
+
+    while (($row = fgetcsv($fh, 0, ';')) !== false) {
+        while (count($row) < count($header)) {
+            $row[] = '';
+        }
+        $assoc = array_combine($header, $row);
+        if (($assoc['stripe_session_id'] ?? '') === $sessionId) {
+            fclose($fh);
+            return $assoc ?: null;
+        }
+    }
+
+    fclose($fh);
+    return null;
+}
+
+function kapvoe_mark_order_stock_updated(array $config, string $sessionId): void {
+    $path = kapvoe_orders_csv_path($config);
+    if (!file_exists($path)) {
+        return;
+    }
+
+    $rows = [];
+    $fh = fopen($path, 'rb');
+    if (!$fh) {
+        return;
+    }
+
+    while (($row = fgetcsv($fh, 0, ';')) !== false) {
+        $rows[] = $row;
+    }
+    fclose($fh);
+
+    if (count($rows) < 1) {
+        return;
+    }
+
+    $header = $rows[0];
+
+    $sessionIdx = array_search('stripe_session_id', $header, true);
+    $stockUpdatedIdx = array_search('stock_updated', $header, true);
+    $stockUpdatedAtIdx = array_search('stock_updated_at', $header, true);
+    $webhookProcessedIdx = array_search('webhook_processed_at', $header, true);
+
+    if ($sessionIdx === false) {
+        return;
+    }
+
+    if ($stockUpdatedIdx === false) {
+        $header[] = 'stock_updated';
+        $stockUpdatedIdx = count($header) - 1;
+    }
+
+    if ($stockUpdatedAtIdx === false) {
+        $header[] = 'stock_updated_at';
+        $stockUpdatedAtIdx = count($header) - 1;
+    }
+
+    if ($webhookProcessedIdx === false) {
+        $header[] = 'webhook_processed_at';
+        $webhookProcessedIdx = count($header) - 1;
+    }
+
+    $rows[0] = $header;
+    $now = date('Y-m-d H:i:s');
+
+    for ($i = 1; $i < count($rows); $i++) {
+        while (count($rows[$i]) < count($header)) {
+            $rows[$i][] = '';
+        }
+
+        if (($rows[$i][$sessionIdx] ?? '') === $sessionId) {
+            if (($rows[$i][$stockUpdatedIdx] ?? '') === '1') {
+                return;
+            }
+
+            $rows[$i][$stockUpdatedIdx] = '1';
+            $rows[$i][$stockUpdatedAtIdx] = $now;
+            $rows[$i][$webhookProcessedIdx] = $now;
+            break;
+        }
+    }
+
+    $fh = fopen($path, 'wb');
+    if (!$fh) {
+        return;
+    }
+
+    foreach ($rows as $row) {
+        while (count($row) < count($header)) {
+            $row[] = '';
+        }
+        fputcsv($fh, $row, ';');
+    }
+
+    fclose($fh);
+}
+
+function kapvoe_create_checkout_session(array $config, array $payload): array {
+    $secretKey = (string)$config['stripe_secret_key'];
+
+    $fields = [
+        'mode' => 'payment',
+        'success_url' => (string)$config['success_url'] . '?session_id={CHECKOUT_SESSION_ID}',
+        'cancel_url' => (string)$config['cancel_url'],
+        'customer_email' => (string)$payload['email'],
+        'client_reference_id' => (string)$payload['order_id'],
+        'locale' => 'es',
+        'payment_method_types[0]' => 'card',
+        'line_items[0][price_data][currency]' => (string)$config['currency'],
+        'line_items[0][price_data][product_data][name]' => (string)$payload['product_name'],
+        'line_items[0][price_data][unit_amount]' => (string)$payload['unit_amount_cents'],
+        'line_items[0][quantity]' => (string)$payload['quantity'],
+        'metadata[order_id]' => (string)$payload['order_id'],
+        'metadata[product_code]' => (string)$payload['product_code'],
+        'metadata[customer_name]' => (string)$payload['customer_name'],
+        'metadata[phone]' => (string)$payload['phone'],
+        'metadata[postal_code]' => (string)$payload['postal_code'],
+        'metadata[city]' => (string)$payload['city'],
+        'metadata[province]' => (string)$payload['province'],
+    ];
+
+    $ch = curl_init('https://api.stripe.com/v1/checkout/sessions');
+    curl_setopt_array($ch, [
+        CURLOPT_RETURNTRANSFER => true,
+        CURLOPT_POST => true,
+        CURLOPT_POSTFIELDS => http_build_query($fields),
+        CURLOPT_HTTPHEADER => [
+            'Authorization: Bearer ' . $secretKey
+        ],
+    ]);
+
+    $raw = curl_exec($ch);
+    if ($raw === false) {
+        throw new RuntimeException('Error cURL Stripe: ' . curl_error($ch));
+    }
+
+    $httpCode = (int)curl_getinfo($ch, CURLINFO_HTTP_CODE);
+    curl_close($ch);
+
+    $decoded = json_decode($raw, true);
+    if ($httpCode >= 400 || !is_array($decoded)) {
+        throw new RuntimeException('Stripe ha retornat un error: ' . $raw);
+    }
+
+    return $decoded;
+}
+
+function kapvoe_verify_stripe_signature(string $payload, string $header, string $secret, int $tolerance = 300): bool {
+    if (!$header || !$secret) {
+        return false;
+    }
+
+    $parts = explode(',', $header);
+    $timestamp = null;
+    $signature = null;
+
+    foreach ($parts as $part) {
+        [$k, $v] = array_pad(explode('=', trim($part), 2), 2, null);
+        if ($k === 't') {
+            $timestamp = $v;
+        }
+        if ($k === 'v1') {
+            $signature = $v;
+        }
+    }
+
+    if (!$timestamp || !$signature) {
+        return false;
+    }
+
+    if (abs(time() - (int)$timestamp) > $tolerance) {
+        return false;
+    }
+
+    $signedPayload = $timestamp . '.' . $payload;
+    $expected = hash_hmac('sha256', $signedPayload, $secret);
+
+    return hash_equals($expected, $signature);
+}

checkout/config.php

@@ -0,0 +1,20 @@
+<?php
+declare(strict_types=1);
+
+return [
+    // Clau secreta real de Stripe. NO la posis mai al HTML.
+    'stripe_secret_key' => 'sk_test_51IvGaFHRV8rA2XwsDiGII0rVfot2HabnvF862L8G6rYIzUscZDMkM4WlVAV6GbYSMZsFEDF44PEppdJaLdGo0idB00UyabGh0u',
+
+    // Secret del webhook de Stripe (Signing secret)
+    'stripe_webhook_secret' => 'whsec_wBJZjwPIhPclM1i4bKUtnQqol26caq5L',
+
+    // Moneda
+    'currency' => 'eur',
+
+    // On guardar les comandes provisionals
+    'orders_storage_dir' => __DIR__ . '/data',
+
+    // URLs públiques
+    'success_url' => 'https://kapvoe-portfoli.treblarella.org/checkout/payment-success.php',
+    'cancel_url' => 'https://kapvoe-portfoli.treblarella.org/checkout/payment-cancel.php',
+];

checkout/create-checkout-session.php

@@ -0,0 +1,96 @@
+<?php
+declare(strict_types=1);
+
+require __DIR__ . '/common.php';
+
+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']);
+
+if ($price <= 0) {
+    $errors['price'] = 'Preu invàlid';
+}
+
+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);
+
+$payload = [
+    'order_id' => $orderId,
+    'product_code' => trim((string)$data['product_code']),
+    'product_name' => trim((string)$data['product_name']),
+    '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']),
+];
+
+try {
+    $session = kapvoe_create_checkout_session($config, $payload);
+
+    kapvoe_append_order($config, [
+        'order_id' => $orderId,
+        'created_at' => date('Y-m-d H:i:s'),
+        'product_code' => $payload['product_code'],
+        'product_name' => $payload['product_name'],
+        'unit_price' => $price,
+        'quantity' => $quantity,
+        'customer_name' => $payload['customer_name'],
+        'address' => $payload['address'],
+        'postal_code' => $payload['postal_code'],
+        'city' => $payload['city'],
+        'province' => $payload['province'],
+        'phone' => $payload['phone'],
+        'email' => $payload['email'],
+        'payment_status' => 'pending',
+        'stripe_session_id' => $session['id'] ?? '',
+        'payment_intent_id' => '',
+    ]);
+
+    kapvoe_json_response([
+        'ok' => true,
+        'checkout_url' => $session['url'] ?? null,
+        'order_id' => $orderId,
+    ]);
+} catch (Throwable $e) {
+    kapvoe_json_response([
+        'ok' => false,
+        'error' => $e->getMessage(),
+    ], 500);
+}

checkout/payment-cancel.php

@@ -0,0 +1,20 @@
+<!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>
+  <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}
+  </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>
+</body>
+</html>

checkout/payment-success.php

@@ -0,0 +1,26 @@
+<?php
+declare(strict_types=1);
+$sessionId = htmlspecialchars($_GET['session_id'] ?? '', ENT_QUOTES, 'UTF-8');
+?><!doctype html>
+<html lang="ca">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Pagament correcte</title>
+  <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}
+  </style>
+</head>
+<body>
+  <div class="box">
+    <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>
+    <?php endif; ?>
+    <p><a href="https://kapvoe-portfoli.treblarella.org/">Torna al catàleg</a></p>
+  </div>
+</body>
+</html>

checkout/stripe-webhook.php

@@ -0,0 +1,106 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/common.php';
+
+$config = kapvoe_load_config();
+
+$payload = file_get_contents('php://input') ?: '';
+$sigHeader = $_SERVER['HTTP_STRIPE_SIGNATURE'] ?? '';
+$secret = (string)($config['stripe_webhook_secret'] ?? '');
+
+if (!kapvoe_verify_stripe_signature($payload, $sigHeader, $secret)) {
+    http_response_code(400);
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode([
+        'ok' => false,
+        'error' => 'Signatura Stripe invàlida'
+    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+
+$event = json_decode($payload, true);
+
+if (!is_array($event)) {
+    http_response_code(400);
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode([
+        'ok' => false,
+        'error' => 'Payload JSON invàlid'
+    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+
+$type = (string)($event['type'] ?? '');
+$object = $event['data']['object'] ?? null;
+
+if (!is_array($object)) {
+    http_response_code(400);
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode([
+        'ok' => false,
+        'error' => 'Event sense objecte de dades'
+    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+
+try {
+    switch ($type) {
+        case 'checkout.session.completed':
+            $sessionId = (string)($object['id'] ?? '');
+            $paymentIntentId = (string)($object['payment_intent'] ?? '');
+            $paymentStatus = (string)($object['payment_status'] ?? '');
+
+            if ($sessionId === '') {
+                throw new RuntimeException('Falta session id');
+            }
+
+            kapvoe_update_order_status(
+                $config,
+                $sessionId,
+                $paymentStatus === 'paid' ? 'paid' : 'pending',
+                $paymentIntentId
+            );
+
+            $order = kapvoe_get_order_by_session_id($config, $sessionId);
+
+            if (!$order) {
+                throw new RuntimeException('No s\'ha trobat la comanda al CSV');
+            }
+
+            $alreadyUpdated = (string)($order['stock_updated'] ?? '') === '1';
+
+            if ($paymentStatus === 'paid' && !$alreadyUpdated) {
+                kapvoe_mark_order_stock_updated($config, $sessionId);
+                $alreadyUpdated = true;
+            }
+
+            http_response_code(200);
+            header('Content-Type: application/json; charset=utf-8');
+            echo json_encode([
+                'ok' => true,
+                'handled' => $type,
+                'session_id' => $sessionId,
+                'payment_intent_id' => $paymentIntentId,
+                'already_updated' => $alreadyUpdated
+            ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+            exit;
+
+        default:
+            http_response_code(200);
+            header('Content-Type: application/json; charset=utf-8');
+            echo json_encode([
+                'ok' => true,
+                'ignored' => $type
+            ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+            exit;
+    }
+} catch (Throwable $e) {
+    http_response_code(500);
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode([
+        'ok' => false,
+        'error' => $e->getMessage()
+    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}

data/orders.csv

@@ -0,0 +1,2 @@
+order_id;created_at;product_code;product_name;unit_price;quantity;customer_name;address;postal_code;city;province;phone;email;payment_status;stripe_session_id;payment_intent_id;stock_updated;stock_updated_at;webhook_processed_at
+ORD-20260403-114000-45c216;"2026-04-03 11:40:02";K383;K383;60;1;"Albert Gadea Llevot";"Carrer del Progrés 5";25244;Fondarella;Lleida;686255350;albert@bloodbros.store;paid;cs_test_a1OGoVroq2P9ljWEHeyNewPwku0zZ1aJG3d2uDyDwIzl1q70bCZPRbrWT8;pi_3TI4CsHRV8rA2Xws1vaNX2My;1;"2026-04-03 11:40:24";"2026-04-03 11:40:24"

index.html

@@ -0,0 +1,510 @@
+<!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>
+  <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%;-webkit-appearance:none;appearance:none;color-scheme:dark}
+    select.field{
+      background:
+        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
+      color:var(--text);
+    }
+    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}
+    }
+  </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="text" 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">
+      <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 class="buy-grid">
+          <input class="buy-input full" name="customer_name" placeholder="Nom complet" required>
+          <input class="buy-input full" name="address" placeholder="Adreça postal" required>
+          <input class="buy-input" name="postal_code" placeholder="Codi postal" required>
+          <input class="buy-input" name="city" placeholder="Ciutat" required>
+          <input class="buy-input" name="province" placeholder="Província" required>
+          <input class="buy-input" name="phone" placeholder="Telèfon" required>
+          <input class="buy-input full" type="email" name="email" placeholder="Correu electrònic" required>
+          <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>

js/app.js

@@ -0,0 +1,428 @@
+import { 
+  API_URL, 
+  AUTO_REFRESH_MS, 
+  BLOODBROS_LOGO_URL, 
+  WHATSAPP_PHONE, 
+  CREATE_CHECKOUT_URL 
+} from './config.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('&', '&')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+    }
+
+    function fmtPrice(product) {
+      if (product.europe_price_text) return product.europe_price_text;
+      const n = Number(product.europe_price_number);
+      if (Number.isFinite(n)) {
+        return new Intl.NumberFormat('ca-ES', { style: 'currency', currency: 'EUR' }).format(n);
+      }
+      return '-';
+    }
+
+    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 normalizeText(v) {
+      return String(v ?? '').toLowerCase().trim();
+    }
+
+    function parseDescription(description) {
+      const raw = String(description ?? '').trim();
+      if (!raw) return [];
+      const lines = raw
+        .split(/\n|\r|\||•|;/g)
+        .map(s => s.trim())
+        .filter(Boolean);
+      return lines;
+    }
+
+    function getStockState(stock) {
+      const n = Number(stock || 0);
+      if (n <= 1) {
+        return {
+          cls: 'stock-last',
+          label: '🔥 Última unitat'
+        };
+      }
+      if (n <= 3) {
+        return {
+          cls: 'stock-low',
+          label: `⚠️ Queden poques unitats · ${n} disponibles`
+        };
+      }
+      return {
+        cls: 'stock-ok',
+        label: `Stock disponible · ${n} unitats`
+      };
+    }
+
+    function getSalesHook(product) {
+      if (product.top_vendes) {
+        return null;
+      }
+      const stock = Number(product.stock || 0);
+      if (stock <= 1) {
+        return {
+          badge: 'Última oportunitat',
+          text: 'Aquest model està a punt d’esgotar-se.'
+        };
+      }
+      if (stock <= 3) {
+        return {
+          badge: 'Alta demanda',
+          text: 'Model amb poques unitats disponibles.'
+        };
+      }
+      return {
+        badge: 'Selecció premium',
+        text: 'Una aposta segura per estil i rendiment.'
+      };
+    }
+
+    function buildWhatsappLink(product) {
+      const text = [
+        'Hola Blood Bros Sports,',
+        'voldria encomanar aquest model:',
+        `${product.product_code || ''}`,
+        product.model ? `Model: ${product.model}` : '',
+        product.category ? `Família: ${product.category}` : '',
+        product.colors ? `Colors: ${product.colors}` : '',
+        Number(product.europe_price_number) ? `Preu: ${fmtPrice(product)}` : '',
+        `Stock visible: ${product.stock ?? ''}`
+      ].filter(Boolean).join('\n');
+
+      if (WHATSAPP_PHONE) {
+        return `https://wa.me/${encodeURIComponent(WHATSAPP_PHONE)}?text=${encodeURIComponent(text)}`;
+      }
+      return `https://api.whatsapp.com/send?text=${encodeURIComponent(text)}`;
+    }
+
+    function getFilteredProducts() {
+      const q = normalizeText(els.searchInput.value);
+      const top = els.topFilter.value;
+      const sort = els.sortFilter.value;
+      const price = els.priceFilter.value;
+
+      let data = products.filter(p => Number(p.stock) >= 1);
+
+      if (q) {
+        data = data.filter(p => {
+          const hay = [p.product_code, p.model, p.category, p.colors, p.description]
+            .map(normalizeText).join(' ');
+          return hay.includes(q);
+        });
+      }
+
+      if (top === 'top') data = data.filter(p => !!p.top_vendes);
+      if (top === 'normal') data = data.filter(p => !p.top_vendes);
+
+      if (price !== 'all') {
+        data = data.filter(p => {
+          const n = Number(p.europe_price_number);
+          if (!Number.isFinite(n)) return false;
+          if (price === '0-60') return n <= 60;
+          if (price === '60-80') return n > 60 && n <= 80;
+          if (price === '80+') return n > 80;
+          return true;
+        });
+      }
+
+      data.sort((a, b) => {
+        const codeA = String(a.product_code || '');
+        const codeB = String(b.product_code || '');
+        const priceA = Number.isFinite(Number(a.europe_price_number)) ? Number(a.europe_price_number) : -Infinity;
+        const priceB = Number.isFinite(Number(b.europe_price_number)) ? Number(b.europe_price_number) : -Infinity;
+        const stockA = Number(a.stock || 0);
+        const stockB = Number(b.stock || 0);
+
+        switch (sort) {
+          case 'code-desc': return codeB.localeCompare(codeA, 'ca');
+          case 'price-asc': return priceA - priceB;
+          case 'price-desc': return priceB - priceA;
+          case 'stock-desc': return stockB - stockA;
+          default: return codeA.localeCompare(codeB, 'ca');
+        }
+      });
+
+      return data;
+    }
+
+    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();
+
+      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);

js/config.js

@@ -0,0 +1,10 @@
+   export const API_URL = 'https://script.googleusercontent.com/macros/echo?user_content_key=AWDtjMVe9JQMYFUTitGGiHSzQsuEyr7VsarNnNpOluFcWHXa-CGnuKhrinmwBYVLw1otHQoBg5rnYNpGlIvCg_I8u1QhCKr-FQwCC2bG9LdttpST6nS_k8TxRcaT5LmmDjeZENcy8A0ujTU1yJwFLoxudMFW-OGjkYtywE5YT_CUJpKQWmqPN8IRV1drNysBtQFfQH1tXUS1JrOODghrxxjAA3T77kqRnz-aaMZJ23YfZntVm4C1KpaBBloFs4OO2wYIcD7Sf1iAYX1OMjIHXsCypvIgFRfIdhMqADWRmluv&lib=MLri0H8XjzrQY2XIy3BzwJ1YbTZr7i_Wa';
+   export const AUTO_REFRESH_MS = 120000;
+
+    // Si vols el logo real, puja'l a assets i canvia aquesta URL.
+   export const BLOODBROS_LOGO_URL = 'assets/logo/bloodbros-sports-logo.png';
+
+    // 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';