From 78b9d15257b459f6869783e81af81d786d32baa0 Mon Sep 17 00:00:00 2001
From: vctb12 <78221586+vctb12@users.noreply.github.com>
Date: Mon, 2 Mar 2026 14:45:18 +0400
Subject: [PATCH] Extend UX system with accessibility helpers and productivity
 overlays

---
 README.md                                |  65 ++-
 about.html                               |  58 +--
 admin.html                               | 192 ++++++--
 ar-blog.html                             |  24 +-
 ar/blog.html                             |  62 ++-
 ar/index.html                            |  35 +-
 assets/placeholder.svg                   |  28 +-
 assets/products/case-mid-tower.svg       |  10 +
 assets/products/chair-ergonomic.svg      |  10 +
 assets/products/cooler-240-aio.svg       |  10 +
 assets/products/cpu-7800x3d.svg          |  10 +
 assets/products/cpu-i7-14700k.svg        |  10 +
 assets/products/gpu-rtx4070s.svg         |  10 +
 assets/products/gpu-rx7800xt.svg         |  10 +
 assets/products/headset-7-1.svg          |  10 +
 assets/products/kb-mech.svg              |  10 +
 assets/products/mobo-b650.svg            |  10 +
 assets/products/monitor-27-165.svg       |  10 +
 assets/products/mouse-pro.svg            |  10 +
 assets/products/psu-850w-gold.svg        |  10 +
 assets/products/ram-32gb-ddr5.svg        |  10 +
 assets/products/ssd-1tb-nvme.svg         |  10 +
 blog.html                                | 106 +++--
 build.html                               |  87 ++++
 buildRules.json                          |  13 +
 changelog.html                           |  45 ++
 checkout.html                            | 164 ++++---
 contact.html                             |  25 +-
 css/enterprise-upgrades.css              | 546 +++++++++++++++++++++++
 health.html                              |   1 +
 index.html                               |  86 +---
 js/lib/api.js                            |  19 +
 js/lib/dom.js                            |  11 +
 js/lib/format.js                         |   2 +
 js/lib/logger.js                         |  39 ++
 js/lib/rules.js                          |  27 ++
 js/lib/security.js                       |  13 +
 js/lib/ux-enhancements.js                | 535 ++++++++++++++++++++++
 js/pages/chat.js                         |  77 ++++
 js/pages/warranty.js                     |  75 ++++
 netlify.toml                             |  61 ++-
 netlify/functions/_utils.js              |   3 +
 netlify/functions/adminLogin.js          |  87 ++--
 netlify/functions/chat.js                |  44 ++
 netlify/functions/createOrder.js         | 158 +++++--
 netlify/functions/createPaymentIntent.js |  12 +
 netlify/functions/markOrderPaid.js       |  22 +
 netlify/functions/notifyCapture.js       |  41 ++
 netlify/functions/ordersList.js          |  39 ++
 netlify/functions/updateOrderStatus.js   |  22 +
 package.json                             |  14 +
 partials/footer.html                     |  16 +
 partials/header.html                     |  27 ++
 payment-demo.html                        |   1 +
 payment.js                               |   8 +-
 playwright.config.ts                     |  15 +
 products.html                            | 159 +++++--
 products.json                            | 236 ++++++++--
 robots.txt                               |   3 +
 script.js                                | 353 ++++++++++++++-
 scripts/audit-links.mjs                  |  76 ++++
 scripts/validate-assets.mjs              |  38 ++
 services.html                            |  23 +-
 sitemap.xml                              |  16 +
 style.css                                | 208 +++++++++
 tests/e2e/site.spec.ts                   | 148 ++++++
 warranty.html                            |  88 ++--
 warrantyRules.json                       |  22 +
 68 files changed, 3816 insertions(+), 609 deletions(-)
 create mode 100644 assets/products/case-mid-tower.svg
 create mode 100644 assets/products/chair-ergonomic.svg
 create mode 100644 assets/products/cooler-240-aio.svg
 create mode 100644 assets/products/cpu-7800x3d.svg
 create mode 100644 assets/products/cpu-i7-14700k.svg
 create mode 100644 assets/products/gpu-rtx4070s.svg
 create mode 100644 assets/products/gpu-rx7800xt.svg
 create mode 100644 assets/products/headset-7-1.svg
 create mode 100644 assets/products/kb-mech.svg
 create mode 100644 assets/products/mobo-b650.svg
 create mode 100644 assets/products/monitor-27-165.svg
 create mode 100644 assets/products/mouse-pro.svg
 create mode 100644 assets/products/psu-850w-gold.svg
 create mode 100644 assets/products/ram-32gb-ddr5.svg
 create mode 100644 assets/products/ssd-1tb-nvme.svg
 create mode 100644 build.html
 create mode 100644 buildRules.json
 create mode 100644 changelog.html
 create mode 100644 css/enterprise-upgrades.css
 create mode 100644 health.html
 create mode 100644 js/lib/api.js
 create mode 100644 js/lib/dom.js
 create mode 100644 js/lib/format.js
 create mode 100644 js/lib/logger.js
 create mode 100644 js/lib/rules.js
 create mode 100644 js/lib/security.js
 create mode 100644 js/lib/ux-enhancements.js
 create mode 100644 js/pages/chat.js
 create mode 100644 js/pages/warranty.js
 create mode 100644 netlify/functions/chat.js
 create mode 100644 netlify/functions/createPaymentIntent.js
 create mode 100644 netlify/functions/markOrderPaid.js
 create mode 100644 netlify/functions/notifyCapture.js
 create mode 100644 netlify/functions/ordersList.js
 create mode 100644 netlify/functions/updateOrderStatus.js
 create mode 100644 package.json
 create mode 100644 partials/footer.html
 create mode 100644 partials/header.html
 create mode 100644 payment-demo.html
 create mode 100644 playwright.config.ts
 create mode 100644 robots.txt
 create mode 100644 scripts/audit-links.mjs
 create mode 100644 scripts/validate-assets.mjs
 create mode 100644 sitemap.xml
 create mode 100644 tests/e2e/site.spec.ts
 create mode 100644 warrantyRules.json

diff --git a/README.md b/README.md
index 130e921..44fbc0a 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,65 @@
-# nex
+# Nexus Gaming UAE Storefront
 
+Production-focused static storefront for Netlify (`https://akastore.netlify.app`) with UAE AED/VAT logic, modular JS pages, Netlify Functions, chatbot demo mode, warranty calculator, build configurator, and demo payment lifecycle.
+
+## Local development
+
+```bash
+python -m http.server 4173
+# open http://127.0.0.1:4173/index.html
+```
+
+## Commands
+
+```bash
+npm run build
+npm run validate-assets
+npm run audit-links
+npm run test:e2e
+```
+
+## Environment variables
+
+### Admin auth
+- `ADMIN_USER`
+- `ADMIN_PASS_HASH` (bcrypt hash)
+- `JWT_SECRET`
+
+### Optional persistence (Supabase)
+- `SUPABASE_URL`
+- `SUPABASE_SERVICE_ROLE_KEY`
+
+Expected tables:
+- `orders(orderid text, createdat timestamptz, status text, deliverymode text, promocode text, totals jsonb, items jsonb, customer jsonb)`
+- `notify_requests(productid text, sku text, email text, phone text, preferredcontact text, createdat timestamptz)`
+
+### Optional email
+- `RESEND_API_KEY`
+- `ORDER_FROM_EMAIL`
+- `ORDER_NOTIFY_TO`
+
+### Optional AI
+- `OPENAI_API_KEY` (if missing, chatbot works in demo intent mode)
+
+### Optional payment provider keys
+- (future-ready scaffolding) `TABBY_*` / card provider keys can be added later; demo payment works without keys.
+
+## Deployment (Netlify)
+1. Connect repo.
+2. Publish directory: `.`
+3. Functions directory: `netlify/functions`
+4. Set env vars as needed.
+
+## Key pages
+- `build.html` — Build PC wizard with compatibility checks
+- `warranty.html` — dynamic extended warranty calculator
+- `payment-demo.html` — demo payment lifecycle
+- `health.html` — functions health checks
+
+## Notes
+- No external keys required for demo-mode operation.
+- Netlify headers/redirects are configured in `netlify.toml` only (single source of truth).
+
+
+## Layout partials
+- Shared navigation/footer are loaded from `partials/header.html` and `partials/footer.html` at runtime with session cache and fallback handling.
diff --git a/about.html b/about.html
index 96f7072..811e8a9 100644
--- a/about.html
+++ b/about.html
@@ -8,24 +8,7 @@
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html">Products</a>
-        <a href="./services.html">Services & Fixing</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./warranty.html">Warranty</a>
-        <a href="./contact.html">Contact</a>
-        <a href="./admin.html" class="badge neo">Admin</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">WhatsApp</span></a>
-        <a class="icon-btn" href="./checkout.html"><span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme">🌓</button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="section">
     <div class="container">
@@ -64,29 +47,34 @@ <h3>Roadmap</h3>
           </div>
         </div>
       </div>
-    </div>
-  </main>
 
-  <footer class="footer">
-    <div class="container footer-grid">
-      <div>
-        <div class="brand small"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></div>
-        <div class="hint">Online store • WhatsApp: +971 50 505 8609</div>
-      </div>
-      <div class="footer-links">
-        <a href="./index.html">Home</a>
-        <a href="./products.html">Products</a>
-        <a href="./services.html">Services</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./contact.html">Contact</a>
-        <a href="./README.md">README</a>
+
+      <div class="space"></div>
+      <div class="card" style="padding:16px;">
+        <div class="row" style="justify-content:space-between;">
+          <div>
+            <h3 style="margin:0;">Why customers like this store</h3>
+            <div class="small">Built to be clear, fast, and mobile-friendly.</div>
+          </div>
+          <a class="btn" href="./products.html">Shop now</a>
+        </div>
+        <div class="space"></div>
+        <div class="products-grid" style="grid-template-columns: repeat(3, 1fr);">
+          <div class="mini"><b>Transparent pricing</b><div class="small">AED format, promo logic, VAT display.</div></div>
+          <div class="mini"><b>Fast support</b><div class="small">WhatsApp and guided support flows.</div></div>
+          <div class="mini"><b>Mobile first</b><div class="small">Better touch targets and responsive nav.</div></div>
+        </div>
       </div>
+
     </div>
-  </footer>
+  </main>
+
+  <footer data-include="footer"></footer>
 
-  <script type="module" src="./script.js"></script>
   <script type="module">
+    import { boot } from './script.js';
     import { wireForms } from './form-handler.js';
+    boot();
     wireForms();
   </script>
 </body>
diff --git a/admin.html b/admin.html
index 03d1e44..e706373 100644
--- a/admin.html
+++ b/admin.html
@@ -6,26 +6,14 @@
   <meta name="theme-color" content="#070B14" />
   <title>Admin — Nexus Gaming UAE</title>
   <link rel="stylesheet" href="./style.css" />
+  <meta name="description" content="Admin — Nexus Gaming UAE - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Admin — Nexus Gaming UAE" />
+  <meta property="og:description" content="Admin — Nexus Gaming UAE - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/admin.html" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html">Products</a>
-        <a href="./services.html">Services & Fixing</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./warranty.html">Warranty</a>
-        <a href="./contact.html">Contact</a>
-        <a href="./admin.html" class="badge neo" aria-current="page">Admin</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">WhatsApp</span></a>
-        <a class="icon-btn" href="./checkout.html"><span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme">🌓</button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="section">
     <div class="container">
@@ -59,6 +47,7 @@ <h3>System status</h3>
             <div class="mini"><h3>Storage</h3><p id="st">localStorage</p></div>
           </div>
           <div class="space"></div>
+          <div id="adminConfigBanner" class="mini" style="display:none;"></div>
           <p class="sub">This admin reads orders saved by the checkout flow (localStorage). To make it multi-device, connect a DB (Supabase) or Netlify Blobs.</p>
         </div>
       </div>
@@ -71,15 +60,41 @@ <h3 style="margin:0;">Orders & Products</h3>
           <div class="row">
             <button class="btn" id="refreshBtn">Refresh</button>
             <button class="btn" id="exportBtn">Export Orders JSON</button>
+            <button class="btn" id="exportOrdersCsvBtn">Export Orders CSV</button>
           </div>
         </div>
         <div class="space"></div>
+        <div id="kpis" class="kpi-grid" style="margin-bottom:12px;"></div>
 
         <div class="grid-2" style="align-items:start;">
+          <div>
+            <div class="mini">
+              <h3>Notify captures</h3>
+              <div class="hint">In-stock requests from product modal.</div>
+              <div class="space"></div>
+              <div class="row">
+                <input id="notifySearch" class="input" placeholder="Search email, phone, SKU" style="flex:1;" />
+                <button class="btn" id="exportNotifyBtn" type="button">Export Notify CSV</button>
+              </div>
+            </div>
+            <div id="notifyList" class="stack"></div>
+          </div>
+
           <div>
             <div class="mini">
               <h3>Recent orders (local)</h3>
-              <div class="hint">Created at checkout. For real tracking, store orders in a DB.</div>
+              <div class="hint">Server-backed when Supabase is configured, otherwise local fallback.</div>
+              <div class="space"></div>
+              <input id="orderSearch" class="input" placeholder="Search by order ID, customer, phone" />
+              <div class="row">
+                <input id="orderFrom" class="input" type="date" />
+                <input id="orderTo" class="input" type="date" />
+                <select id="orderStatus" class="select">
+                  <option value="">All statuses</option>
+                  <option value="created">Created</option>
+                  <option value="completed">Completed</option>
+                </select>
+              </div>
             </div>
             <div id="orders" class="stack"></div>
           </div>
@@ -95,38 +110,36 @@ <h3>Products snapshot</h3>
     </div>
   </main>
 
-  <footer class="footer">
-    <div class="container footer-grid">
-      <div>
-        <div class="brand small"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></div>
-        <div class="hint">Online store • WhatsApp: +971 50 505 8609</div>
-      </div>
-      <div class="footer-links">
-        <a href="./README.md">README</a>
-        <a href="./CHANGELOG.md">Changelog</a>
-        <a href="./about.html">About</a>
-      </div>
-    </div>
-  </footer>
+  <footer data-include="footer"></footer>
 
-  <script type="module" src="./script.js"></script>
   <script type="module">
-    import { toast, formatTime } from './script.js';
+    import { boot, toast, formatTime, fetchJSON, escapeHtml } from './script.js';
     import { formatAED } from './cart.js';
 
+    boot();
+
     const tokenKey = 'nexus_admin_token_v1';
     const dash = document.getElementById('dash');
     const loginForm = document.getElementById('loginForm');
     const logoutBtn = document.getElementById('logoutBtn');
     const fnEl = document.getElementById('fn');
+    const configBanner = document.getElementById('adminConfigBanner');
 
     async function checkFunctions(){
+      if(location.hostname === '127.0.0.1' || location.hostname === 'localhost'){
+        fnEl.textContent = 'Local preview';
+        return;
+      }
       try{
-        const res = await fetch('/.netlify/functions/adminLogin', {method:'OPTIONS'});
+        const res = await fetch('/.netlify/functions/adminLogin');
         fnEl.textContent = res.ok ? 'Available' : 'Unknown';
       }catch{ fnEl.textContent = 'Not deployed'; }
     }
     checkFunctions();
+    if(!localStorage.getItem('nexus_admin_cfg_seen')){
+      configBanner.style.display='block';
+      configBanner.innerHTML = '<b>Admin not fully configured:</b> set JWT/Supabase env vars in Netlify for server-backed mode.';
+    }
 
     function isAuthed(){ return !!localStorage.getItem(tokenKey); }
 
@@ -134,9 +147,22 @@ <h3>Products snapshot</h3>
       const el = document.getElementById('orders');
       let orders = [];
       try{ orders = JSON.parse(localStorage.getItem('nexus_orders_v1')||'[]'); }catch{}
-      if(!orders.length){ el.innerHTML = '<div class="hint">No orders yet.</div>'; return; }
+      if(!orders.length){ el.innerHTML = '<div class="hint">No orders yet.</div>'; return []; }
 
-      el.innerHTML = orders.slice(0,20).map(o=>{
+      const q = (document.getElementById('orderSearch')?.value || '').trim().toLowerCase();
+      const from = document.getElementById('orderFrom')?.value || '';
+      const to = document.getElementById('orderTo')?.value || '';
+      const status = (document.getElementById('orderStatus')?.value || '').toLowerCase();
+      const filtered = orders.filter(o=>{
+        const text = `${o.orderId||''} ${o.customer?.name||''} ${o.customer?.phone||''}`.toLowerCase();
+        if(q && !text.includes(q)) return false;
+        if(status && String(o.status||'').toLowerCase() !== status) return false;
+        const d = String(o.createdAt||'').slice(0,10);
+        if(from && d < from) return false;
+        if(to && d > to) return false;
+        return true;
+      });
+      el.innerHTML = filtered.slice(0,20).map(o=>{
         const items = (o.items||[]).reduce((a,b)=>a+(b.qty||0),0);
         return `
           <div class="card">
@@ -155,13 +181,15 @@ <h3>Products snapshot</h3>
           </div>
         `;
       }).join('');
+      return orders;
     }
 
     async function renderProducts(){
       const el = document.getElementById('products');
-      const res = await fetch('./products.json', {cache:'no-store'});
-      const data = await res.json();
+      const data = await fetchJSON('./products.json', {timeoutMs:6000, fallback: []});
       const list = Array.isArray(data) ? data : (data.products || []);
+      let stockOverrides = {};
+      try{ stockOverrides = JSON.parse(localStorage.getItem('nexus_stock_overrides_v1') || '{}'); }catch{}
       el.innerHTML = list.slice(0,12).map(p=>`
         <div class="card">
           <div class="row" style="justify-content:space-between;">
@@ -171,16 +199,73 @@ <h3>Products snapshot</h3>
             </div>
             <div style="text-align:right">
               <div><b>${formatAED(p.price)}</b></div>
-              <div class="hint">Stock: ${p.stock}</div>
+              <div class="hint">Stock: <span data-stock-label="${escapeHtml(p.id)}">${escapeHtml(stockOverrides[p.id] ?? p.stock)}</span></div>
+              <button class="btn small" data-stock-edit="${escapeHtml(p.id)}" type="button">Update stock</button>
             </div>
           </div>
         </div>
       `).join('');
+
+      el.querySelectorAll('[data-stock-edit]').forEach((btn)=>{
+        btn.addEventListener('click', ()=>{
+          const id = btn.dataset.stockEdit;
+          const val = prompt('Enter new stock quantity (0-999):');
+          if(val===null) return;
+          const q = Math.max(0, Math.min(999, Number(val)||0));
+          let stockOverrides = {};
+          try{ stockOverrides = JSON.parse(localStorage.getItem('nexus_stock_overrides_v1') || '{}'); }catch{}
+          stockOverrides[id] = q;
+          localStorage.setItem('nexus_stock_overrides_v1', JSON.stringify(stockOverrides));
+          toast('Stock override updated.');
+          renderProducts();
+        });
+      });
+
+      return list;
+    }
+
+    function renderKpis(orders, products){
+      const k = document.getElementById('kpis');
+      const revenue = orders.reduce((s,o)=> s + Number(o?.totals?.total||0), 0);
+      const openOrders = orders.filter(o=>String(o.status||'Created').toLowerCase()!=='completed').length;
+      const lowStock = products.filter(p=>Number(p.stock||0) <= 2).length;
+      const top = orders.flatMap(o=>o.items||[]).reduce((m,i)=>{ m[i.id]=(m[i.id]||0)+(Number(i.qty)||0); return m; },{});
+      const topProduct = Object.entries(top).sort((a,b)=>b[1]-a[1])[0]?.[0] || '-';
+      k.innerHTML = `
+        <div class="kpi"><div class="num">${orders.length}</div><div class="lbl">Orders saved</div></div>
+        <div class="kpi"><div class="num">${formatAED(revenue)}</div><div class="lbl">Tracked revenue</div></div>
+        <div class="kpi"><div class="num">${openOrders}</div><div class="lbl">Open orders</div></div>
+        <div class="kpi"><div class="num">${lowStock}</div><div class="lbl">Low stock products</div></div>
+        <div class="kpi"><div class="num">${escapeHtml(topProduct)}</div><div class="lbl">Top product</div></div>
+      `;
+    }
+
+
+    function renderNotify(){
+      const el = document.getElementById('notifyList');
+      let rows = [];
+      try{ rows = JSON.parse(localStorage.getItem('nexus_notify_v1') || '[]'); }catch{}
+      const q = (document.getElementById('notifySearch')?.value || '').trim().toLowerCase();
+      rows = rows.filter(r=> !q || `${r.email||''} ${r.phone||''} ${r.sku||''}`.toLowerCase().includes(q));
+      el.innerHTML = rows.slice(0,80).map(r=>`<div class="card"><div><b>${escapeHtml(r.email||'-')}</b></div><div class="hint">SKU: ${escapeHtml(r.sku||'-')} • Phone: ${escapeHtml(r.phone||'-')} • ${escapeHtml(r.preferredContact||'email')}</div></div>`).join('') || '<div class="hint">No notify captures.</div>';
+      return rows;
     }
 
     async function refresh(){
-      renderOrders();
-      await renderProducts();
+      try{
+        const token = localStorage.getItem(tokenKey);
+        if(token){
+          const res = await fetch('/.netlify/functions/ordersList', { headers:{authorization:`Bearer ${token}`} });
+          const out = await res.json().catch(()=>({}));
+          if(res.ok && out.ok && Array.isArray(out.orders)){
+            localStorage.setItem('nexus_orders_v1', JSON.stringify(out.orders));
+          }
+        }
+      }catch{}
+      const orders = renderOrders();
+      const products = await renderProducts();
+      renderKpis(orders, products);
+      renderNotify();
     }
 
     function showDash(){
@@ -233,6 +318,25 @@ <h3>Products snapshot</h3>
     });
 
     document.getElementById('refreshBtn').addEventListener('click', refresh);
+    ['orderSearch','orderFrom','orderTo','orderStatus'].forEach(id=> document.getElementById(id)?.addEventListener('input', renderOrders));
+    document.getElementById('notifySearch')?.addEventListener('input', renderNotify);
+
+    document.getElementById('exportOrdersCsvBtn').addEventListener('click', ()=>{
+      let rows=[]; try{ rows=JSON.parse(localStorage.getItem('nexus_orders_v1')||'[]'); }catch{}
+      const csv=['orderId,createdAt,status,delivery,total,customer,phone'];
+      rows.forEach(o=> csv.push([o.orderId,o.createdAt,o.status,o.deliveryMode,o.totals?.total,o.customer?.name,o.customer?.phone].map(v=>`"${String(v??'').replaceAll('"','""')}"`).join(',')));
+      const blob = new Blob([csv.join("\n")], {type:'text/csv'});
+      const u = URL.createObjectURL(blob); const a=document.createElement('a'); a.href=u; a.download='orders.csv'; a.click(); URL.revokeObjectURL(u);
+    });
+
+    document.getElementById('exportNotifyBtn').addEventListener('click', ()=>{
+      let rows=[]; try{ rows=JSON.parse(localStorage.getItem('nexus_notify_v1')||'[]'); }catch{}
+      const csv=['productId,sku,email,phone,preferredContact,createdAt'];
+      rows.forEach(r=> csv.push([r.productId,r.sku,r.email,r.phone,r.preferredContact,r.createdAt].map(v=>`"${String(v??'').replaceAll('"','""')}"`).join(',')));
+      const blob = new Blob([csv.join("\n")], {type:'text/csv'});
+      const u = URL.createObjectURL(blob); const a=document.createElement('a'); a.href=u; a.download='notify-captures.csv'; a.click(); URL.revokeObjectURL(u);
+    });
+
     document.getElementById('exportBtn').addEventListener('click', ()=>{
       const orders = localStorage.getItem('nexus_orders_v1') || '[]';
       const blob = new Blob([orders], {type:'application/json'});
@@ -243,10 +347,6 @@ <h3>Products snapshot</h3>
       a.click();
       URL.revokeObjectURL(url);
     });
-
-    function escapeHtml(s){
-      return String(s).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('"','&quot;');
-    }
   </script>
 </body>
 </html>
diff --git a/ar-blog.html b/ar-blog.html
index be93508..2cb4484 100644
--- a/ar-blog.html
+++ b/ar-blog.html
@@ -7,24 +7,7 @@
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html">المنتجات</a>
-        <a href="./services.html">الخدمات والصيانة</a>
-        <a href="./ar-blog.html" class="badge neo">المدونة</a>
-        <a href="./warranty.html">الضمان</a>
-        <a href="./contact.html">تواصل</a>
-        <a href="./blog.html" class="badge">EN</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">واتساب</span></a>
-        <a class="icon-btn" href="./checkout.html"><span>السلة</span> <span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme"></button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="container" style="padding: 20px 18px 0;">
     <div class="card" style="padding:16px;">
@@ -59,6 +42,11 @@ <h3>أفضل 10 إكسسوارات للاعبين</h3>
 
       <div class="space"></div>
       <div class="small">المسار العربي الكامل: <a class="badge" href="./ar/index.html">/ar</a> و <a class="badge" href="./ar/blog.html">/ar/blog.html</a></div>
+      <div class="space"></div>
+      <div class="row">
+        <a class="btn" href="https://wa.me/971505058609" target="_blank" rel="noopener">دعم واتساب</a>
+        <a class="btn" href="./products.html">تصفح المتجر</a>
+      </div>
     </div>
   </main>
 
diff --git a/ar/blog.html b/ar/blog.html
index c87b0ca..46d3ca6 100644
--- a/ar/blog.html
+++ b/ar/blog.html
@@ -5,31 +5,30 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>المدونة — Nexus Gaming UAE</title>
   <link rel="stylesheet" href="../style.css" />
+  <meta name="description" content="المدونة — Nexus Gaming UAE - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="المدونة — Nexus Gaming UAE" />
+  <meta property="og:description" content="المدونة — Nexus Gaming UAE - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/ar/blog.html" />
+  <link rel="alternate" hreflang="en" href="https://akastore.netlify.app/blog.html" />
+  <link rel="alternate" hreflang="ar" href="https://akastore.netlify.app/ar/blog.html" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="../index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="../products.html">المنتجات</a>
-        <a href="../services.html">الخدمات والصيانة</a>
-        <a href="./blog.html" class="badge neo">المدونة</a>
-        <a href="../contact.html">تواصل</a>
-        <a href="../blog.html" class="badge">EN</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" href="https://wa.me/971505058609" target="_blank" rel="noopener"><span class="badge green">واتساب</span></a>
-        <a class="icon-btn" href="../checkout.html"><span>السلة</span> <span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme"></button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="container" style="padding: 20px 18px 0;">
     <div class="card" style="padding:16px;">
       <div class="badge neo">مقالات</div>
       <h1 class="h1" style="font-size:28px; margin-top:10px;">المدونة</h1>
       <p class="sub">واجهة قراءة بسيطة + صور. اضغط على المقال لفتحه.</p>
+      <div class="row">
+        <input id="blogSearch" class="input" placeholder="ابحث في المقالات..." style="flex:1; min-width:220px;" />
+        <select id="blogTime" class="select" style="min-width:170px;">
+          <option value="">كل المدد</option>
+          <option value="short">حتى 5 دقائق</option>
+          <option value="long">6+ دقائق</option>
+        </select>
+      </div>
       <div class="hr"></div>
       <div id="posts" class="products-grid" style="grid-template-columns: repeat(2, 1fr);"></div>
     </div>
@@ -50,6 +49,7 @@ <h1 class="h1" style="font-size:28px; margin-top:10px;">المدونة</h1>
         title:'أفضل تجميعات الألعاب في 2025 (للإمارات)',
         image:'https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1600&q=80',
         mins: 6,
+        tags:['تجميعات','دليل'],
         body:`
           <p class="small">هدفنا: أداء ممتاز مع حرارة مستقرة في الخليج، وترقية سهلة لاحقاً.</p>
           <h2 style="margin:12px 0 6px; font-size:18px;">فئة 1080p الذكية</h2>
@@ -67,6 +67,7 @@ <h2 style="margin:12px 0 6px; font-size:18px;">فئة 1440p الأفضل</h2>
         title:'أبني جهاز ولا أشتري جاهز؟',
         image:'https://images.unsplash.com/photo-1587202372775-e229f172b9d4?auto=format&fit=crop&w=1600&q=80',
         mins: 5,
+        tags:['تجميع','جاهز'],
         body:`
           <p class="small">التجميع أفضل لو تبي قيمة أعلى وتحكم بالتوافق. الجاهز أفضل لو تبي اختصار وقت وضمان مبسط.</p>
           <div class="mini"><b>تجميع:</b> قيمة أعلى، لكن يحتاج فحص توافق واختبارات ضغط.</div>
@@ -78,6 +79,7 @@ <h2 style="margin:12px 0 6px; font-size:18px;">فئة 1440p الأفضل</h2>
         title:'تبريد جهازك في صيف الخليج',
         image:'https://images.unsplash.com/photo-1591488320449-011701bb6704?auto=format&fit=crop&w=1600&q=80',
         mins: 7,
+        tags:['تبريد','استقرار'],
         body:`
           <p class="small">الحرارة ترفع الاستهلاك وتقلل الاستقرار. عالج التهوية أولاً.</p>
           <ul class="small" style="margin-left:18px; color:var(--muted)">
@@ -93,6 +95,7 @@ <h2 style="margin:12px 0 6px; font-size:18px;">فئة 1440p الأفضل</h2>
         title:'أفضل 10 إكسسوارات للاعبين',
         image:'https://images.unsplash.com/photo-1612198188060-c7c2a3b2a0bd?auto=format&fit=crop&w=1600&q=80',
         mins: 4,
+        tags:['إكسسوارات','أداء'],
         body:`
           <p class="small">أشياء تفرق فعلاً في الأداء والراحة.</p>
           <ol class="small" style="margin-left:18px; color:var(--muted)">
@@ -108,18 +111,37 @@ <h2 style="margin:12px 0 6px; font-size:18px;">فئة 1440p الأفضل</h2>
 
     const list = document.getElementById('posts');
     const reader = document.getElementById('reader');
+    const blogSearch = document.getElementById('blogSearch');
+    const blogTime = document.getElementById('blogTime');
 
     const card = (p)=>`
       <article class="prod" style="min-height:260px;">
         <div class="prod-img" style="height:150px;"><img alt="${p.title}" loading="lazy" src="${p.image}"></div>
         <div class="prod-title">${p.title}</div>
-        <div class="small">${p.mins} دقائق قراءة</div>
+        <div class="small">${p.mins} دقائق • ${(p.tags||[]).join(' • ')}</div>
         <div class="prod-actions">
           <a class="btn small primary" href="./blog.html?id=${p.id}">اقرأ</a>
         </div>
       </article>`;
 
-    list.innerHTML = posts.map(card).join('');
+    function matchPost(p){
+      const q = (blogSearch.value||'').trim().toLowerCase();
+      const text = `${p.title} ${(p.tags||[]).join(' ')}`.toLowerCase();
+      const t = blogTime.value;
+      if(q && !text.includes(q)) return false;
+      if(t==='short' && p.mins > 5) return false;
+      if(t==='long' && p.mins < 6) return false;
+      return true;
+    }
+
+    function renderList(){
+      const filtered = posts.filter(matchPost);
+      list.innerHTML = filtered.map(card).join('') || '<div class="mini">لا يوجد نتائج مطابقة.</div>';
+    }
+
+    renderList();
+    blogSearch.addEventListener('input', renderList);
+    blogTime.addEventListener('change', renderList);
 
     const u = new URL(location.href);
     const id = u.searchParams.get('id');
@@ -140,6 +162,8 @@ <h2 style="margin:10px 0 0; letter-spacing:-.02em;">${p.title}</h2>
           <div class="prod-img" style="height:280px;"><img alt="${p.title}" src="${p.image}"></div>
           <div class="space"></div>
           <div class="small" style="color:var(--muted)">${p.body}</div>
+          <div class="hr"></div>
+          <div class="small">تحتاج مساعدة؟ <a class="badge neo" href="../contact.html">تواصل معنا</a></div>
         `;
         window.scrollTo({top: reader.offsetTop - 88, behavior:'smooth'});
       }
diff --git a/ar/index.html b/ar/index.html
index 7b646e8..f87efd0 100644
--- a/ar/index.html
+++ b/ar/index.html
@@ -5,25 +5,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Nexus Gaming UAE — العربية</title>
   <link rel="stylesheet" href="../style.css" />
+  <meta name="description" content="Nexus Gaming UAE — العربية - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Nexus Gaming UAE — العربية" />
+  <meta property="og:description" content="Nexus Gaming UAE — العربية - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/ar/index.html" />
+  <link rel="alternate" hreflang="en" href="https://akastore.netlify.app/index.html" />
+  <link rel="alternate" hreflang="ar" href="https://akastore.netlify.app/ar/index.html" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="../index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="../products.html">المنتجات</a>
-        <a href="../services.html">الخدمات والصيانة</a>
-        <a href="./blog.html" class="badge neo">المدونة</a>
-        <a href="../contact.html">تواصل</a>
-        <a href="../index.html" class="badge">EN</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" href="https://wa.me/971505058609" target="_blank" rel="noopener"><span class="badge green">واتساب</span></a>
-        <a class="icon-btn" href="../checkout.html"><span>السلة</span> <span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme"></button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="container" style="padding: 20px 18px 0;">
     <div class="card" style="padding:16px;">
@@ -31,7 +22,15 @@
       <h1 class="h1" style="font-size:28px; margin-top:10px;">نسخة عربية (تجهيز)</h1>
       <p class="sub">هذا مسار عربي مبدئي. المحتوى الأهم موجود في صفحة المدونة العربية.</p>
       <div class="space"></div>
-      <a class="btn primary" href="./blog.html">افتح المدونة</a>
+      <div class="row">
+        <a class="btn primary" href="./blog.html">افتح المدونة</a>
+        <a class="btn" href="../products.html">تصفح المنتجات</a>
+      </div>
+      <div class="space"></div>
+      <div class="products-grid" style="grid-template-columns:repeat(2,1fr);">
+        <div class="mini"><b>تصميم متجاوب</b><div class="small">تجربة أفضل على الموبايل.</div></div>
+        <div class="mini"><b>دعم سريع</b><div class="small">واتساب متاح للاستفسارات.</div></div>
+      </div>
     </div>
   </main>
 
diff --git a/assets/placeholder.svg b/assets/placeholder.svg
index 0f331f3..54b9220 100644
--- a/assets/placeholder.svg
+++ b/assets/placeholder.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="700" viewBox="0 0 1200 700">
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="700" viewBox="0 0 1200 700" role="img" aria-label="Nexus product placeholder image">
   <defs>
     <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0" stop-color="#0b1220"/>
@@ -13,23 +13,17 @@
   <rect width="1200" height="700" fill="url(#g)"/>
   <rect width="1200" height="700" fill="url(#r)"/>
   <g fill="none" stroke="#2a3b63" stroke-opacity="0.55">
-    <path d="M0 120 H1200"/>
-    <path d="M0 240 H1200"/>
-    <path d="M0 360 H1200"/>
-    <path d="M0 480 H1200"/>
-    <path d="M0 600 H1200"/>
-    <path d="M120 0 V700"/>
-    <path d="M240 0 V700"/>
-    <path d="M360 0 V700"/>
-    <path d="M480 0 V700"/>
-    <path d="M600 0 V700"/>
-    <path d="M720 0 V700"/>
-    <path d="M840 0 V700"/>
-    <path d="M960 0 V700"/>
-    <path d="M1080 0 V700"/>
+    <path d="M0 120 H1200"/><path d="M0 240 H1200"/><path d="M0 360 H1200"/><path d="M0 480 H1200"/><path d="M0 600 H1200"/>
+    <path d="M120 0 V700"/><path d="M240 0 V700"/><path d="M360 0 V700"/><path d="M480 0 V700"/>
+    <path d="M600 0 V700"/><path d="M720 0 V700"/><path d="M840 0 V700"/><path d="M960 0 V700"/><path d="M1080 0 V700"/>
+  </g>
+  <g transform="translate(910 76)" fill="none" stroke="#60a5fa" stroke-width="5">
+    <rect x="0" y="0" width="190" height="110" rx="18"/>
+    <circle cx="52" cy="55" r="20"/>
+    <path d="M90 72 122 38l24 24 20-18 18 28"/>
   </g>
   <g font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace" fill="#cbd5e1">
-    <text x="60" y="340" font-size="40" opacity="0.9">NEXUS</text>
-    <text x="60" y="390" font-size="22" opacity="0.75">Gaming UAE • Product image placeholder</text>
+    <text x="60" y="330" font-size="40" opacity="0.95">NEXUS GAMING UAE</text>
+    <text x="60" y="382" font-size="22" opacity="0.78">Product image placeholder • صورة افتراضية للمنتج</text>
   </g>
 </svg>
diff --git a/assets/products/case-mid-tower.svg b/assets/products/case-mid-tower.svg
new file mode 100644
index 0000000..3bcdf0f
--- /dev/null
+++ b/assets/products/case-mid-tower.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="Airflow Mid-Tower Case">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#06b6d4" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">Airflow Mid-Tower Case</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: Lian Li • Category: Case</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/chair-ergonomic.svg b/assets/products/chair-ergonomic.svg
new file mode 100644
index 0000000..bf8ac1c
--- /dev/null
+++ b/assets/products/chair-ergonomic.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="Ergonomic Gaming Chair">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#f59e0b" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">Ergonomic Gaming Chair</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: Secretlab • Category: Accessories</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/cooler-240-aio.svg b/assets/products/cooler-240-aio.svg
new file mode 100644
index 0000000..4fe4063
--- /dev/null
+++ b/assets/products/cooler-240-aio.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="240mm AIO Liquid Cooler">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#8b5cf6" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">240mm AIO Liquid Cooler</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: NZXT • Category: Cooling</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/cpu-7800x3d.svg b/assets/products/cpu-7800x3d.svg
new file mode 100644
index 0000000..c240dd8
--- /dev/null
+++ b/assets/products/cpu-7800x3d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="AMD Ryzen 7 7800X3D">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#ef4444" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">AMD Ryzen 7 7800X3D</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: AMD • Category: CPU</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/cpu-i7-14700k.svg b/assets/products/cpu-i7-14700k.svg
new file mode 100644
index 0000000..54af100
--- /dev/null
+++ b/assets/products/cpu-i7-14700k.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="Intel Core i7-14700K">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#10b981" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">Intel Core i7-14700K</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: Intel • Category: CPU</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/gpu-rtx4070s.svg b/assets/products/gpu-rtx4070s.svg
new file mode 100644
index 0000000..18c10bc
--- /dev/null
+++ b/assets/products/gpu-rtx4070s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="NVIDIA GeForce RTX 4070 SUPER 12GB">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#ef4444" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">NVIDIA GeForce RTX 4070 SUPER 12GB</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: NVIDIA • Category: GPU</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/gpu-rx7800xt.svg b/assets/products/gpu-rx7800xt.svg
new file mode 100644
index 0000000..6da3f68
--- /dev/null
+++ b/assets/products/gpu-rx7800xt.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="AMD Radeon RX 7800 XT 16GB">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#06b6d4" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">AMD Radeon RX 7800 XT 16GB</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: AMD • Category: GPU</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/headset-7-1.svg b/assets/products/headset-7-1.svg
new file mode 100644
index 0000000..236a18c
--- /dev/null
+++ b/assets/products/headset-7-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="7.1 Surround Gaming Headset">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#8b5cf6" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">7.1 Surround Gaming Headset</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: HyperX • Category: Accessories</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/kb-mech.svg b/assets/products/kb-mech.svg
new file mode 100644
index 0000000..eccf74c
--- /dev/null
+++ b/assets/products/kb-mech.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="Mechanical Keyboard (Hot‑swap)">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#ef4444" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">Mechanical Keyboard (Hot‑swap)</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: Keychron • Category: Accessories</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/mobo-b650.svg b/assets/products/mobo-b650.svg
new file mode 100644
index 0000000..0819bd2
--- /dev/null
+++ b/assets/products/mobo-b650.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="B650 ATX Motherboard (Wi‑Fi)">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#8b5cf6" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">B650 ATX Motherboard (Wi‑Fi)</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: MSI • Category: Motherboard</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/monitor-27-165.svg b/assets/products/monitor-27-165.svg
new file mode 100644
index 0000000..bc156a3
--- /dev/null
+++ b/assets/products/monitor-27-165.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="27&quot; 165Hz QHD Gaming Monitor">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#f59e0b" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">27&quot; 165Hz QHD Gaming Monitor</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: ASUS • Category: Monitor</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/mouse-pro.svg b/assets/products/mouse-pro.svg
new file mode 100644
index 0000000..364c47f
--- /dev/null
+++ b/assets/products/mouse-pro.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="Wireless Gaming Mouse (Pro Sensor)">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#10b981" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">Wireless Gaming Mouse (Pro Sensor)</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: Logitech • Category: Accessories</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/psu-850w-gold.svg b/assets/products/psu-850w-gold.svg
new file mode 100644
index 0000000..b8a2dbf
--- /dev/null
+++ b/assets/products/psu-850w-gold.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="850W 80+ Gold Modular PSU">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#3b82f6" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">850W 80+ Gold Modular PSU</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: Seasonic • Category: PSU</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/ram-32gb-ddr5.svg b/assets/products/ram-32gb-ddr5.svg
new file mode 100644
index 0000000..78bb51d
--- /dev/null
+++ b/assets/products/ram-32gb-ddr5.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="DDR5 32GB (2x16) 6000MT/s Kit">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#8b5cf6" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">DDR5 32GB (2x16) 6000MT/s Kit</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: Corsair • Category: RAM</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/assets/products/ssd-1tb-nvme.svg b/assets/products/ssd-1tb-nvme.svg
new file mode 100644
index 0000000..28ccf37
--- /dev/null
+++ b/assets/products/ssd-1tb-nvme.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="NVMe SSD 1TB (Gen4)">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0b1220"/><stop offset="1" stop-color="#111827"/></linearGradient></defs>
+<rect width="1600" height="1000" fill="url(#g)"/>
+<circle cx="1250" cy="220" r="260" fill="#8b5cf6" opacity="0.25"/>
+<rect x="90" y="90" width="1420" height="820" rx="28" fill="none" stroke="#334155"/>
+<text x="120" y="220" fill="#93c5fd" font-size="42" font-family="Arial">NEXUS GAMING UAE</text>
+<text x="120" y="360" fill="#f8fafc" font-size="64" font-family="Arial" font-weight="700">NVMe SSD 1TB (Gen4)</text>
+<text x="120" y="440" fill="#cbd5e1" font-size="36" font-family="Arial">Brand: Samsung • Category: Storage</text>
+<text x="120" y="850" fill="#94a3b8" font-size="30" font-family="Arial">High-resolution placeholder image • Replace with product photography anytime.</text>
+</svg>
\ No newline at end of file
diff --git a/blog.html b/blog.html
index 169397d..c5b2707 100644
--- a/blog.html
+++ b/blog.html
@@ -5,32 +5,30 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Blog — Nexus Gaming UAE</title>
   <link rel="stylesheet" href="./style.css" />
+  <meta name="description" content="Blog — Nexus Gaming UAE - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Blog — Nexus Gaming UAE" />
+  <meta property="og:description" content="Blog — Nexus Gaming UAE - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/blog.html" />
+  <link rel="alternate" hreflang="ar" href="https://akastore.netlify.app/ar/blog.html" />
+  <link rel="alternate" hreflang="en" href="https://akastore.netlify.app/blog.html" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html">Products</a>
-        <a href="./services.html">Services & Fixing</a>
-        <a href="./blog.html" class="badge neo">Blog</a>
-        <a href="./warranty.html">Warranty</a>
-        <a href="./contact.html">Contact</a>
-        <a href="./ar-blog.html" class="badge">العربية</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">WhatsApp</span></a>
-        <a class="icon-btn" href="./checkout.html"><span>Cart</span> <span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme"></button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="container" style="padding: 20px 18px 0;">
     <div class="card" style="padding:16px;">
       <div class="badge neo">Blog</div>
       <h1 class="h1" style="font-size:28px; margin-top:10px;">Guides & Builds</h1>
       <p class="sub">Clean reading view with image support. Click an article to open it.</p>
+      <div class="row">
+        <input id="blogSearch" class="input" placeholder="Search articles..." style="flex:1; min-width:220px;" />
+        <select id="blogTime" class="select" style="min-width:170px;">
+          <option value="">Any length</option>
+          <option value="short">Up to 5 min</option>
+          <option value="medium">6-7 min</option>
+        </select>
+      </div>
       <div class="hr"></div>
       <div id="posts" class="products-grid" style="grid-template-columns: repeat(2, 1fr);"></div>
     </div>
@@ -52,6 +50,7 @@ <h1 class="h1" style="font-size:28px; margin-top:10px;">Guides & Builds</h1>
         title:'Best Gaming Setups in 2025 (UAE-friendly)',
         image:'https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1600&q=80',
         mins: 6,
+        tags:['setup','buyers-guide'],
         body: `
           <p class="small">A practical 2025 setup roadmap for UAE buyers — focused on value, thermals, and upgrade paths.</p>
           <h2 style="margin:12px 0 6px; font-size:18px;">Tier 1: Smart 1080p</h2>
@@ -71,6 +70,7 @@ <h2 style="margin:12px 0 6px; font-size:18px;">Tier 3: Creator + gaming</h2>
         title:'Should You Build or Buy Your Rig in the UAE?',
         image:'https://images.unsplash.com/photo-1587202372775-e229f172b9d4?auto=format&fit=crop&w=1600&q=80',
         mins: 5,
+        tags:['buying','comparison'],
         body: `
           <p class="small">Build if you want control, lower wasted spend, and a clean upgrade path. Buy prebuilt if you value time and warranty simplicity.</p>
           <div class="mini"><b>Build:</b> better value + customization, but needs compatibility checks and stress tests.</div>
@@ -83,6 +83,7 @@ <h2 style="margin:12px 0 6px; font-size:18px;">Tier 3: Creator + gaming</h2>
         title:'How to Keep Your Gaming PC Cool in Gulf Summer',
         image:'https://images.unsplash.com/photo-1591488320449-011701bb6704?auto=format&fit=crop&w=1600&q=80',
         mins: 7,
+        tags:['cooling','stability'],
         body: `
           <p class="small">Heat kills performance and stability. Treat airflow like an investment.</p>
           <ul class="small" style="margin-left:18px; color:var(--muted)">
@@ -99,6 +100,7 @@ <h2 style="margin:12px 0 6px; font-size:18px;">Tier 3: Creator + gaming</h2>
         title:'Top 10 Accessories for Pro Gamers',
         image:'https://images.unsplash.com/photo-1612198188060-c7c2a3b2a0bd?auto=format&fit=crop&w=1600&q=80',
         mins: 4,
+        tags:['accessories','performance'],
         body: `
           <p class="small">Accessories that actually impact performance (not just looks).</p>
           <ol class="small" style="margin-left:18px; color:var(--muted)">
@@ -119,47 +121,63 @@ <h2 style="margin:12px 0 6px; font-size:18px;">Tier 3: Creator + gaming</h2>
 
     const list = document.getElementById('posts');
     const reader = document.getElementById('reader');
+    const blogSearch = document.getElementById('blogSearch');
+    const blogTime = document.getElementById('blogTime');
 
     const card = (p)=>`
       <article class="prod" style="min-height:260px;">
         <div class="prod-img" style="height:150px;"><img alt="${p.title}" loading="lazy" src="${p.image}"></div>
         <div class="prod-title">${p.title}</div>
-        <div class="small">${p.mins} min read</div>
+        <div class="small">${p.mins} min read • ${(p.tags||[]).join(' • ')}</div>
         <div class="prod-actions">
-          <a class="btn small primary" href="./blog.html?id=${p.id}">Open</a>
+          <a class="btn small primary" href="./blog.html?id=${p.id}">Read</a>
         </div>
       </article>`;
 
-    list.innerHTML = posts.map(card).join('');
+    function matchPost(p){
+      const q = (blogSearch.value||'').trim().toLowerCase();
+      const text = `${p.title} ${(p.tags||[]).join(' ')}`.toLowerCase();
+      const time = blogTime.value;
+      if(q && !text.includes(q)) return false;
+      if(time==='short' && p.mins > 5) return false;
+      if(time==='medium' && (p.mins < 6 || p.mins > 7)) return false;
+      return true;
+    }
 
-    function getId(){
-      const u = new URL(location.href);
-      return u.searchParams.get('id');
+    function renderList(){
+      const filtered = posts.filter(matchPost);
+      list.innerHTML = filtered.map(card).join('') || '<div class="mini">No matching posts.</div>';
     }
 
-    function open(id){
+    renderList();
+    blogSearch.addEventListener('input', renderList);
+    blogTime.addEventListener('change', renderList);
+
+    const u = new URL(location.href);
+    const id = u.searchParams.get('id');
+    if(id){
       const p = posts.find(x=>x.id===id);
-      if(!p){ reader.style.display='none'; return; }
-      reader.style.display='block';
-      reader.innerHTML = `
-        <div class="row" style="justify-content:space-between;">
-          <div>
-            <div class="badge neo">Article</div>
-            <h2 style="margin:10px 0 0; letter-spacing:-.02em;">${p.title}</h2>
-            <div class="small">${p.mins} min read</div>
+      if(p){
+        reader.style.display='block';
+        reader.innerHTML = `
+          <div class="row" style="justify-content:space-between;">
+            <div>
+              <div class="badge neo">Article</div>
+              <h2 style="margin:10px 0 0; letter-spacing:-.02em;">${p.title}</h2>
+              <div class="small">${p.mins} min read</div>
+            </div>
+            <a class="btn" href="./blog.html">Back</a>
           </div>
-          <a class="btn" href="./blog.html">Back</a>
-        </div>
-        <div class="space"></div>
-        <div class="prod-img" style="height:280px;"><img alt="${p.title}" src="${p.image}"></div>
-        <div class="space"></div>
-        <div class="small" style="color:var(--muted)">${p.body}</div>
-      `;
-      window.scrollTo({top: reader.offsetTop - 88, behavior:'smooth'});
+          <div class="space"></div>
+          <div class="prod-img" style="height:280px;"><img alt="${p.title}" src="${p.image}"></div>
+          <div class="space"></div>
+          <div class="small" style="color:var(--muted)">${p.body}</div>
+          <div class="hr"></div>
+          <div class="small">Need help choosing parts? <a class="badge neo" href="./contact.html">Talk to support</a></div>
+        `;
+        window.scrollTo({top: reader.offsetTop - 88, behavior:'smooth'});
+      }
     }
-
-    const id = getId();
-    if(id) open(id);
   </script>
 </body>
 </html>
diff --git a/build.html b/build.html
new file mode 100644
index 0000000..97870e6
--- /dev/null
+++ b/build.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Build Your PC — Nexus Gaming UAE</title>
+  <meta name="description" content="Build Your PC — Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Build Your PC — Nexus Gaming UAE" />
+  <meta property="og:description" content="Build Your PC — UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/build.html" />
+  <link rel="stylesheet" href="./style.css" />
+</head>
+<body>
+  <header data-include="header"></header>
+  <main class="container" style="padding:20px 18px 0;">
+    <div class="card" style="padding:16px;">
+      <h1 class="h1" style="font-size:28px;">Build your PC</h1>
+      <div class="field"><div class="label">Mode preset</div><select id="bMode" class="select"><option value="balanced">Balanced</option><option value="budget">Budget</option><option value="pro">Pro</option><option value="creator">Creator</option></select></div>
+      <div class="grid-2">
+        <div class="field"><div class="label">CPU</div><select id="bCpu" class="select"></select></div>
+        <div class="field"><div class="label">Motherboard</div><select id="bMobo" class="select"></select></div>
+        <div class="field"><div class="label">GPU</div><select id="bGpu" class="select"></select></div>
+        <div class="field"><div class="label">PSU</div><select id="bPsu" class="select"></select></div>
+        <div class="field"><div class="label">RAM</div><select id="bRam" class="select"></select></div>
+        <div class="field"><div class="label">Case</div><select id="bCase" class="select"></select></div>
+      </div>
+      <div class="space"></div>
+      <div id="compat" class="mini"></div>
+      <div class="space"></div>
+      <div id="buildSuggest" class="small"></div>
+      <div class="space"></div>
+      <div class="row"><button class="btn" id="saveBuild">Save build</button><button class="btn primary" id="addBuild">Add build to cart</button></div>
+    </div>
+  </main>
+  <div id="toast" class="toast" role="status" aria-live="polite"></div>
+  <script type="module">
+    import { boot, fetchJSON, toast, escapeHtml } from './script.js';
+    import { addToCart } from './cart.js';
+    boot();
+    const ids={cpu:'bCpu',mobo:'bMobo',gpu:'bGpu',psu:'bPsu',ram:'bRam',case:'bCase'};
+    let buildRules={psuHeadroom:1.25, heatAdvice:{}};
+    let items=[];
+    function fill(sel,list){ sel.innerHTML='<option value="">Select...</option>'+list.map(p=>`<option value="${p.id}">${escapeHtml(p.title)}</option>`).join(''); }
+    function get(id){ return items.find(x=>x.id===document.getElementById(id).value); }
+    function evaluate(){
+      const cpu=get(ids.cpu), mobo=get(ids.mobo), gpu=get(ids.gpu), psu=get(ids.psu);
+      const out=document.getElementById('compat');
+      let ok=true; let notes=[];
+      if(cpu && mobo && cpu.socket && mobo.socket && cpu.socket!==mobo.socket){ ok=false; notes.push('CPU socket does not match motherboard socket.'); }
+      const need = Math.round((gpu?.recommendedPsuW || 0) * Number(buildRules.psuHeadroom||1.25)); const have = psu?.psuWatt || 0;
+      if(need && have && have<need){ ok=false; notes.push(`PSU wattage is low. Need at least ${need}W with headroom.`); }
+      out.innerHTML = `<b>${ok?'Compatible ✅':'Not compatible ❌'}</b><div class="small">${notes.join(' ') || 'Your current selection looks compatible.'}</div>`;
+      const suggest = document.getElementById('buildSuggest');
+      const gpuTier = gpu?.gpuTier || 'mid';
+      const msg = buildRules?.heatAdvice?.[gpuTier] || 'Keep airflow and cooling balanced for UAE temperatures.';
+      const altMobo = items.filter(x=>x.category==='Motherboard' && (!cpu?.socket || x.socket===cpu.socket)).slice(0,3).map(x=>x.title).join(', ');
+      suggest.textContent = `Recommendation: ${msg}${ok?'':' Try compatible motherboard options: '+altMobo}`;
+      return {ok,notes};
+    }
+    function selectedBuild(){
+      return ['cpu','mobo','gpu','psu','ram','case'].map(k=>get(ids[k])).filter(Boolean);
+    }
+    async function init(){
+      items = await fetchJSON('./products.json',{fallback:[]});
+      buildRules = await fetchJSON('./buildRules.json',{fallback:buildRules});
+      fill(document.getElementById(ids.cpu), items.filter(x=>x.category==='CPU'));
+      fill(document.getElementById(ids.mobo), items.filter(x=>x.category==='Motherboard'));
+      fill(document.getElementById(ids.gpu), items.filter(x=>x.category==='GPU'));
+      fill(document.getElementById(ids.psu), items.filter(x=>x.category==='PSU'));
+      fill(document.getElementById(ids.ram), items.filter(x=>x.category==='RAM'));
+      fill(document.getElementById(ids.case), items.filter(x=>x.category==='Case'));
+      Object.values(ids).forEach(id=>document.getElementById(id).addEventListener('change', evaluate));
+      document.getElementById('bMode').addEventListener('change', ()=>{
+        const m=document.getElementById('bMode').value;
+        if(m==='budget'){ document.getElementById('bGpu').selectedIndex=2; }
+        if(m==='pro'){ document.getElementById('bGpu').selectedIndex=1; }
+        evaluate();
+      });
+      const saved=localStorage.getItem('nexus_build_v1'); if(saved){ const b=JSON.parse(saved); Object.entries(ids).forEach(([k,id])=>{ if(b[k]) document.getElementById(id).value=b[k];}); evaluate(); }
+    }
+    document.getElementById('saveBuild').addEventListener('click', ()=>{ const b={}; Object.entries(ids).forEach(([k,id])=>b[k]=document.getElementById(id).value); localStorage.setItem('nexus_build_v1', JSON.stringify(b)); toast('Build saved.'); });
+    document.getElementById('addBuild').addEventListener('click', ()=>{ const c=evaluate(); if(!c.ok){ toast('Fix compatibility before adding to cart.'); return;} selectedBuild().forEach(p=>addToCart(p,1)); toast('Build added to cart.'); });
+    init();
+  </script>
+</body>
+</html>
diff --git a/buildRules.json b/buildRules.json
new file mode 100644
index 0000000..e8152ac
--- /dev/null
+++ b/buildRules.json
@@ -0,0 +1,13 @@
+{
+  "modes": {
+    "budget": { "label": "Budget", "target": "1080p esports" },
+    "balanced": { "label": "Balanced", "target": "1440p mixed gaming" },
+    "pro": { "label": "Pro", "target": "high refresh 1440p" },
+    "creator": { "label": "Creator", "target": "gaming + content" }
+  },
+  "psuHeadroom": 1.25,
+  "heatAdvice": {
+    "high": "Use high airflow case and 240mm+ cooling in UAE heat.",
+    "mid": "Use mesh case and at least 3 fans for stable thermals."
+  }
+}
diff --git a/changelog.html b/changelog.html
new file mode 100644
index 0000000..69395e6
--- /dev/null
+++ b/changelog.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Changelog — Nexus Gaming UAE</title>
+  <link rel="stylesheet" href="./style.css" />
+  <meta name="description" content="Changelog — Nexus Gaming UAE - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Changelog — Nexus Gaming UAE" />
+  <meta property="og:description" content="Changelog — Nexus Gaming UAE - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/changelog.html" />
+</head>
+<body>
+  <header data-include="header"></header>
+
+  <main class="container" style="padding:20px 18px 0;">
+    <article class="card" style="padding:16px;">
+      <div class="badge neo">Changelog</div>
+      <h1 class="h1" style="font-size:28px; margin-top:10px;">Release Notes</h1>
+      <div class="hr"></div>
+      <div class="small">
+        <h3>v2.0 — Reliability + Mobile Revamp</h3>
+        <ul>
+          <li>Mobile menu + improved focus/reduced-motion support.</li>
+          <li>More resilient product loading and safer rendering.</li>
+          <li>Admin KPIs and serverless hardening.</li>
+        </ul>
+        <h3>v1.x — Store launch</h3>
+        <ul>
+          <li>Catalog, cart, checkout flow, Arabic content, and support channels.</li>
+        </ul>
+      </div>
+      <div class="space"></div>
+      <a class="btn" href="./index.html">Back home</a>
+    </article>
+  </main>
+
+  <div id="toast" class="toast" role="status" aria-live="polite"></div>
+  <script type="module">
+    import { boot } from './script.js';
+    boot();
+  </script>
+</body>
+</html>
diff --git a/checkout.html b/checkout.html
index 1c5f7cb..b93e94a 100644
--- a/checkout.html
+++ b/checkout.html
@@ -7,23 +7,7 @@
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html">Products</a>
-        <a href="./services.html">Services & Fixing</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./warranty.html">Warranty</a>
-        <a href="./contact.html">Contact</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">WhatsApp</span></a>
-        <span class="icon-btn"><span>Cart</span> <span class="badge" id="cartCount">0</span></span>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme"></button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="container" style="padding: 20px 18px 0;">
     <div class="card" style="padding:16px;">
@@ -46,7 +30,18 @@ <h1 class="h1" style="font-size:28px; margin-top:10px;">Cart & Checkout</h1>
         <h2 style="margin:0; font-size:18px;">Your cart</h2>
         <button class="btn" id="clearCart" type="button">Clear cart</button>
       </div>
-      <div class="hr"></div>
+      <div class="field">
+            <div class="label">Payment method</div>
+            <select id="paymentMethod" class="select">
+              <option value="cod">Cash on Delivery (active)</option>
+              <option value="card">Credit / Debit Card (demo)</option>
+              <option value="tabby">Tabby BNPL (demo)</option>
+            </select>
+            <div class="small" id="paymentHint">Select a method to continue.</div>
+            <button class="btn small" id="simulatePay" type="button">Simulate payment</button>
+          </div>
+
+          <div class="hr"></div>
       <div id="cartList" style="display:grid; gap:12px;"></div>
       <div id="empty" class="mini" style="display:none;">Cart is empty. Go to <a href="./products.html" class="badge neo">Products</a>.</div>
     </div>
@@ -97,6 +92,12 @@ <h2 style="margin:0; font-size:18px;">Delivery / Pickup</h2>
 
           <div class="space"></div>
           <div class="small">Quotation is useful for services/bulk orders. Payment uses a hosted payment link (static-site safe). You can also message your Order ID on WhatsApp.</div>
+
+          <div class="space"></div>
+          <details class="mini">
+            <summary><b>Shipping & Warranty details</b></summary>
+            <div class="small" style="margin-top:8px;">Delivery ETA is confirmed after order placement. Warranty follows product-specific coverage and standard store terms.</div>
+          </details>
         </div>
 
         <div style="width:min(420px, 100%);">
@@ -150,7 +151,7 @@ <h3>Track order</h3>
   <div id="toast" class="toast" role="status" aria-live="polite"></div>
 
   <script type="module">
-    import { boot, toast, openModal } from './script.js';
+    import { boot, toast, openModal, escapeHtml } from './script.js';
     import { loadCart, removeFromCart, setQty, clearCart, calcTotals, formatAED, saveForLater } from './cart.js';
     import { startCheckout, getOrderById, renderInvoiceHTML } from './payment.js';
 
@@ -170,6 +171,9 @@ <h3>Track order</h3>
 
     const payBtn = document.getElementById('payBtn');
     const quoteBtn = document.getElementById('quoteBtn');
+    const paymentMethod = document.getElementById('paymentMethod');
+    const paymentHint = document.getElementById('paymentHint');
+    const simulatePay = document.getElementById('simulatePay');
 
     const trackOpen = document.getElementById('trackOpen');
     const trackBtn = document.getElementById('trackBtn');
@@ -180,13 +184,25 @@ <h3>Track order</h3>
 
     let promoCode = '';
 
+    function setActionLoading(btn, loading, text){
+      if(!btn) return;
+      if(loading){
+        btn.dataset.label = btn.textContent;
+        btn.textContent = text;
+        btn.disabled = true;
+        return;
+      }
+      btn.disabled = false;
+      btn.textContent = btn.dataset.label || btn.textContent;
+    }
+
     function rowItem(i){
       return `
         <div class="mini">
           <div class="row" style="justify-content:space-between;">
             <div>
-              <div style="font-weight:700; letter-spacing:-.02em;">${i.title}</div>
-              <div class="small">SKU: <span class="mono">${i.sku||i.id}</span> • Unit: ${formatAED(i.price)}</div>
+              <div style="font-weight:700; letter-spacing:-.02em;">${escapeHtml(i.title)}</div>
+              <div class="small">SKU: <span class="mono">${escapeHtml(i.sku||i.id)}</span> • Unit: ${formatAED(i.price)}</div>
             </div>
             <div class="row">
               <input class="input" data-qty="${i.id}" type="number" min="1" max="99" value="${i.qty}" style="width:88px;" />
@@ -278,46 +294,88 @@ <h3>Track order</h3>
       if(!loadCart().length){ toast('Cart empty.'); return; }
       if(!validateCustomer()) return;
 
-      const mode = modeInputs.find(x=>x.checked)?.value || 'delivery';
-      const customer = getCustomer();
-      // Create order record as quote
-      const out = await startCheckout({promoCode, customer, deliveryMode: mode});
-      if(!out) return;
-      toast(`Quotation requested. Order ID: ${out.orderId}`);
+      setActionLoading(quoteBtn, true, 'Creating quote...');
+      try{
+        const mode = modeInputs.find(x=>x.checked)?.value || 'delivery';
+        const customer = getCustomer();
+        const out = await startCheckout({promoCode, customer, deliveryMode: mode});
+        if(!out) return;
+        toast(`Quotation requested. Order ID: ${out.orderId}`);
+
+        const order = getOrderById(out.orderId);
+        const html = renderInvoiceHTML(order).replace('Tax Invoice','Quotation');
+        const w = window.open('', '_blank');
+        if(w){ w.document.write(html); w.document.close(); }
+      }catch{
+        toast('Could not create quotation. Please try again.');
+      }finally{
+        setActionLoading(quoteBtn, false);
+      }
+    });
 
-      // Create a quote print page
-      const order = getOrderById(out.orderId);
-      const html = renderInvoiceHTML(order).replace('Tax Invoice','Quotation');
-      const w = window.open('', '_blank');
-      if(w){ w.document.write(html); w.document.close(); }
+
+    paymentMethod.addEventListener('change', ()=>{
+      const m = paymentMethod.value;
+      if(m==='cod') paymentHint.textContent = 'Pay on delivery. Order will be marked as pending confirmation.';
+      else if(m==='card') paymentHint.textContent = 'Card checkout opens demo payment when gateway keys are not configured.';
+      else paymentHint.textContent = 'Tabby is in demo mode unless API keys are configured.';
     });
 
-    payBtn.addEventListener('click', async ()=>{
+    simulatePay.addEventListener('click', async ()=>{
       if(!loadCart().length){ toast('Cart empty.'); return; }
       if(!validateCustomer()) return;
-
       const mode = modeInputs.find(x=>x.checked)?.value || 'delivery';
       const customer = getCustomer();
       const out = await startCheckout({promoCode, customer, deliveryMode: mode});
       if(!out) return;
+      try{
+        const res = await fetch('/.netlify/functions/createPaymentIntent', {
+          method:'POST', headers:{'content-type':'application/json'},
+          body: JSON.stringify({ orderId: out.orderId, amount: out.totals?.total, method: paymentMethod.value })
+        });
+        const pay = await res.json().catch(()=>({}));
+        if(pay?.payment_url){
+          location.href = pay.payment_url;
+          return;
+        }
+      }catch{}
+      location.href = `./payment-demo.html?orderId=${encodeURIComponent(out.orderId)}&method=${encodeURIComponent(paymentMethod.value)}`;
+    });
 
-      toast(`Order created: ${out.orderId}`);
-      if(out.paymentLink){
-        // Redirect to hosted payment
-        window.location.href = out.paymentLink;
-      }else{
-        // No link configured
-        openModal('trackModal');
-        trackId.value = out.orderId;
-        trackOut.innerHTML = `
-          <div><b>Order created.</b> Your Order ID is <span class="mono">${out.orderId}</span>.</div>
-          <div class="space"></div>
-          <div class="small">Payment link not configured yet. Add it inside <span class="mono">payment.json</span> → <span class="mono">links.card_applepay</span>. Then redeploy.</div>
-          <div class="space"></div>
-          <a class="btn" href="./contact.html">Contact support</a>
-        `;
+    payBtn.addEventListener('click', async ()=>{
+      if(!loadCart().length){ toast('Cart empty.'); return; }
+      if(!validateCustomer()) return;
+
+      setActionLoading(payBtn, true, 'Placing order...');
+      try{
+        const mode = modeInputs.find(x=>x.checked)?.value || 'delivery';
+        const customer = getCustomer();
+        const out = await startCheckout({promoCode, customer, deliveryMode: mode});
+        if(!out) return;
+
+        toast(`Order created: ${out.orderId}`);
+        if(out.emailSent === false){
+          toast('Order placed but confirmation email failed. Please save your Order ID.');
+        }
+        if(out.paymentLink){
+          window.location.href = out.paymentLink;
+        }else{
+          openModal('trackModal');
+          trackId.value = out.orderId;
+          trackOut.innerHTML = `
+            <div><b>Order created.</b> Your Order ID is <span class="mono">${escapeHtml(out.orderId)}</span>.</div>
+            <div class="space"></div>
+            <div class="small">Payment link not configured yet. Add it inside <span class="mono">payment.json</span> → <span class="mono">links.card_applepay</span>. Then redeploy.</div>
+            <div class="space"></div>
+            <a class="btn" href="./contact.html">Contact support</a>
+          `;
+        }
+        render();
+      }catch{
+        toast('Payment flow failed. Please try again.');
+      }finally{
+        setActionLoading(payBtn, false);
       }
-      render();
     });
 
     trackOpen.addEventListener('click', ()=> openModal('trackModal'));
@@ -331,11 +389,11 @@ <h3>Track order</h3>
       }
       trackOut.innerHTML = `
         <div class="row" style="justify-content:space-between;">
-          <div><b>${o.orderId}</b></div>
-          <span class="badge green">${o.status}</span>
+          <div><b>${escapeHtml(o.orderId)}</b></div>
+          <span class="badge green">${escapeHtml(o.status)}</span>
         </div>
         <div class="small">Created: ${new Date(o.createdAt).toLocaleString()}</div>
-        <div class="small">Delivery: ${o.deliveryMode}</div>
+        <div class="small">Delivery: ${escapeHtml(o.deliveryMode)}</div>
         <div class="small">Total: <b>${formatAED(o.totals.total)}</b></div>
         <div class="space"></div>
         <a class="btn" href="https://wa.me/971505058609?text=${encodeURIComponent('Hi Nexus Gaming — my Order ID is '+id)}" target="_blank" rel="noopener">Send Order ID on WhatsApp</a>
diff --git a/contact.html b/contact.html
index f250539..6e00bc2 100644
--- a/contact.html
+++ b/contact.html
@@ -5,25 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Contact — Nexus Gaming UAE</title>
   <link rel="stylesheet" href="./style.css" />
+  <meta name="description" content="Contact — Nexus Gaming UAE - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Contact — Nexus Gaming UAE" />
+  <meta property="og:description" content="Contact — Nexus Gaming UAE - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/contact.html" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html">Products</a>
-        <a href="./services.html">Services & Fixing</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./warranty.html">Warranty</a>
-        <a href="./contact.html" class="badge neo">Contact</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">WhatsApp</span></a>
-        <a class="icon-btn" href="./checkout.html"><span>Cart</span> <span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme"></button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="container" style="padding: 20px 18px 0;">
     <div class="card" style="padding:16px;">
@@ -71,7 +60,7 @@ <h2 style="margin:0; font-size:18px;">Message us</h2>
       <div class="hr"></div>
 
       <h2 style="margin:0; font-size:18px;">Crisp live chat (optional)</h2>
-      <div class="small">Add your Crisp embed snippet in <span class="mono">script.js</span> or right before <span class="mono">&lt;/body&gt;</span> on all pages.
+      <div class="small">Live chat is embedded site-wide via Tawk.to in <span class="mono">script.js</span> and loads on every page.
       You can also keep WhatsApp as the default for conversion.</div>
     </div>
   </main>
diff --git a/css/enterprise-upgrades.css b/css/enterprise-upgrades.css
new file mode 100644
index 0000000..bcde8dd
--- /dev/null
+++ b/css/enterprise-upgrades.css
@@ -0,0 +1,546 @@
+/* Enterprise UX upgrade pack: premium interactions, accessibility, utility states */
+
+.skip-link {
+  position: fixed;
+  left: 10px;
+  top: -50px;
+  z-index: 3200;
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  background: var(--panel2);
+  color: var(--text);
+  transition: top .2s ease;
+}
+.skip-link:focus { top: 10px; }
+
+.network-status {
+  position: fixed;
+  inset: auto 14px 14px 14px;
+  z-index: 2800;
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  background: rgba(15, 23, 42, .86);
+  color: #fff;
+  padding: 10px 12px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 12px 40px rgba(0,0,0,.4);
+}
+.network-status.show { display: flex; }
+.network-status[data-state="online"] { border-color: rgba(16,185,129,.45); }
+.network-status[data-state="offline"] { border-color: rgba(245,158,11,.45); }
+.network-status-text { font-size: 13px; line-height: 1.3; }
+.network-status-close {
+  border: 1px solid rgba(255,255,255,.2);
+  background: rgba(255,255,255,.06);
+  color: inherit;
+  border-radius: 999px;
+  padding: 7px 10px;
+  min-height: 36px;
+  cursor: pointer;
+}
+
+.scroll-progress {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 2600;
+  width: var(--progress, 0%);
+  height: 3px;
+  background: linear-gradient(90deg, #2563eb, #06b6d4, #22c55e);
+  transition: width .08s linear;
+}
+
+.cmd-palette {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  display: none;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 9vh 14px 24px;
+  background: rgba(2,6,23,.48);
+  backdrop-filter: blur(6px);
+}
+.cmd-palette.show { display: flex; }
+.cmd-shell {
+  width: min(760px, 100%);
+  border-radius: 28px;
+  border: 1px solid var(--line);
+  background: rgba(255,255,255,.9);
+  box-shadow: 0 40px 100px rgba(15,23,42,.28);
+  overflow: hidden;
+}
+:root[data-theme="dark"] .cmd-shell {
+  background: rgba(15,23,42,.92);
+  border-color: rgba(148,163,184,.24);
+}
+.cmd-head {
+  padding: 14px;
+  border-bottom: 1px solid var(--line);
+}
+.cmd-input {
+  width: 100%;
+  border: 1px solid var(--line);
+  background: rgba(255,255,255,.6);
+  color: var(--text);
+  border-radius: 14px;
+  padding: 12px 14px;
+  font-size: 15px;
+  outline: none;
+}
+:root[data-theme="dark"] .cmd-input {
+  background: rgba(30,41,59,.64);
+}
+.cmd-input:focus {
+  border-color: rgba(37,99,235,.6);
+  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
+}
+.cmd-list {
+  max-height: min(64vh, 560px);
+  overflow: auto;
+  padding: 10px;
+  display: grid;
+  gap: 8px;
+}
+.cmd-item {
+  border: 1px solid transparent;
+  border-radius: 14px;
+  padding: 10px 12px;
+  display: grid;
+  gap: 3px;
+  text-decoration: none;
+}
+.cmd-item.active,
+.cmd-item:hover {
+  border-color: var(--line);
+  background: var(--panel);
+}
+.cmd-item-main {
+  font-weight: 700;
+}
+.cmd-item-meta {
+  color: var(--muted);
+  font-size: 12px;
+}
+.cmd-empty {
+  color: var(--muted);
+  padding: 10px;
+}
+.cmd-foot {
+  border-top: 1px solid var(--line);
+  padding: 10px 14px;
+  color: var(--muted);
+  font-size: 12px;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.perf-panel {
+  position: fixed;
+  left: 12px;
+  bottom: 12px;
+  z-index: 2400;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: rgba(15,23,42,.86);
+  color: #fff;
+  padding: 10px;
+  min-width: 180px;
+}
+.perf-title { font-weight: 800; margin-bottom: 6px; }
+.perf-line { font-size: 12px; opacity: .95; }
+
+/* high-fidelity cards */
+.card-elevated {
+  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
+  border: 1px solid rgba(255,255,255,.58);
+  border-radius: 24px;
+  box-shadow: 0 20px 60px rgba(15,23,42,.12);
+}
+:root[data-theme="dark"] .card-elevated {
+  background: linear-gradient(180deg, rgba(30,41,59,.74), rgba(15,23,42,.65));
+  border-color: rgba(148,163,184,.2);
+}
+
+.badge-soft {
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: rgba(255,255,255,.66);
+  color: var(--text);
+  padding: 6px 10px;
+  font-size: 11px;
+}
+
+.stat-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+.stat-item {
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 10px;
+  background: rgba(255,255,255,.6);
+}
+.stat-item b { font-size: 18px; display: block; }
+.stat-item span { font-size: 12px; color: var(--muted); }
+
+/* forms */
+.form-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+.form-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+@media (max-width: 900px) {
+  .form-grid-3,
+  .form-grid-2,
+  .stat-strip { grid-template-columns: 1fr; }
+}
+
+.input,
+.select,
+textarea,
+button,
+.btn,
+.icon-btn {
+  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
+}
+
+.input:focus,
+.select:focus,
+textarea:focus,
+button:focus-visible,
+.btn:focus-visible,
+.icon-btn:focus-visible {
+  outline: none;
+  border-color: rgba(37,99,235,.5);
+  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
+}
+
+/* reusable skeleton variants */
+.skeleton-line {
+  height: 12px;
+  border-radius: 10px;
+  background: linear-gradient(90deg, var(--panel), rgba(255,255,255,.22), var(--panel));
+  background-size: 200% 100%;
+  animation: shimmer 1.2s linear infinite;
+}
+.skeleton-box {
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  background: linear-gradient(90deg, var(--panel), rgba(255,255,255,.18), var(--panel));
+  background-size: 200% 100%;
+  animation: shimmer 1.2s linear infinite;
+}
+.skeleton-grid {
+  display: grid;
+  gap: 10px;
+}
+.skeleton-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.skeleton-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+/* advanced table */
+.table-advanced {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.table-advanced thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: rgba(255,255,255,.82);
+  font-size: 12px;
+  color: var(--muted);
+  text-align: left;
+  padding: 10px;
+  border-bottom: 1px solid var(--line);
+}
+:root[data-theme="dark"] .table-advanced thead th {
+  background: rgba(30,41,59,.88);
+}
+.table-advanced tbody td {
+  padding: 10px;
+  border-bottom: 1px solid var(--line);
+}
+.table-advanced tbody tr:hover {
+  background: rgba(37,99,235,.07);
+}
+
+/* chips */
+.chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.chip {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: 12px;
+  background: rgba(255,255,255,.62);
+}
+.chip.active {
+  border-color: rgba(37,99,235,.44);
+  background: rgba(37,99,235,.16);
+}
+
+/* mobile improvements */
+@media (max-width: 860px) {
+  .cmd-shell {
+    border-radius: 22px;
+  }
+  .cmd-list {
+    max-height: 58vh;
+  }
+  .network-status {
+    inset: auto 10px 10px 10px;
+  }
+  .table-advanced {
+    min-width: 720px;
+  }
+}
+
+/* animation utility pack */
+.fade-in {
+  animation: fadeIn .25s ease both;
+}
+.slide-up {
+  animation: slideUp .28s ease both;
+}
+.pop {
+  animation: pop .2s ease both;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes pop {
+  from { transform: scale(.98); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+/* layout utility classes */
+.stack-xs > * + * { margin-top: 6px; }
+.stack-sm > * + * { margin-top: 10px; }
+.stack-md > * + * { margin-top: 14px; }
+.stack-lg > * + * { margin-top: 18px; }
+
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.cluster-between {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.centered {
+  display: grid;
+  place-items: center;
+}
+
+.glass {
+  background: rgba(255,255,255,.66);
+  border: 1px solid rgba(255,255,255,.5);
+  backdrop-filter: blur(14px);
+}
+:root[data-theme="dark"] .glass {
+  background: rgba(15,23,42,.66);
+  border-color: rgba(148,163,184,.2);
+}
+
+/* safety: reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  .skeleton,
+  .skeleton-line,
+  .skeleton-box,
+  .fade-in,
+  .slide-up,
+  .pop {
+    animation: none !important;
+  }
+  .scroll-progress {
+    transition: none;
+  }
+}
+
+/* compact typography scale helpers */
+.text-xs { font-size: 11px; }
+.text-sm { font-size: 13px; }
+.text-md { font-size: 15px; }
+.text-lg { font-size: 18px; }
+.text-xl { font-size: 22px; }
+.text-2xl { font-size: 28px; }
+
+.weight-500 { font-weight: 500; }
+.weight-600 { font-weight: 600; }
+.weight-700 { font-weight: 700; }
+.weight-800 { font-weight: 800; }
+
+/* spacing helper classes */
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: 4px; }
+.mt-2 { margin-top: 8px; }
+.mt-3 { margin-top: 12px; }
+.mt-4 { margin-top: 16px; }
+.mt-5 { margin-top: 20px; }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: 4px; }
+.mb-2 { margin-bottom: 8px; }
+.mb-3 { margin-bottom: 12px; }
+.mb-4 { margin-bottom: 16px; }
+.mb-5 { margin-bottom: 20px; }
+
+.p-1 { padding: 4px; }
+.p-2 { padding: 8px; }
+.p-3 { padding: 12px; }
+.p-4 { padding: 16px; }
+.p-5 { padding: 20px; }
+
+/* responsive columns */
+.cols-2,
+.cols-3,
+.cols-4 {
+  display: grid;
+  gap: 12px;
+}
+.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
+.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
+.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
+
+@media (max-width: 1080px) {
+  .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
+}
+
+@media (max-width: 760px) {
+  .cols-2,
+  .cols-3,
+  .cols-4 { grid-template-columns: 1fr; }
+}
+
+.shortcut-help {
+  position: fixed;
+  inset: 0;
+  z-index: 2950;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(2,6,23,.45);
+  backdrop-filter: blur(6px);
+  padding: 14px;
+}
+.shortcut-help.show { display: flex; }
+.shortcut-help-card {
+  width: min(540px, 100%);
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: rgba(255,255,255,.92);
+  box-shadow: 0 24px 80px rgba(15,23,42,.25);
+}
+:root[data-theme="dark"] .shortcut-help-card {
+  background: rgba(15,23,42,.94);
+}
+.shortcut-head {
+  padding: 12px;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.shortcut-head h3 { margin: 0; font-size: 18px; }
+.shortcut-body {
+  padding: 10px;
+  display: grid;
+  gap: 8px;
+}
+.shortcut-row {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  gap: 10px;
+  align-items: center;
+}
+.shortcut-row kbd {
+  font-family: var(--mono);
+  font-size: 12px;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  padding: 5px 8px;
+}
+.shortcut-row span { font-size: 13px; }
+
+.cart-peek {
+  position: fixed;
+  top: 78px;
+  right: 14px;
+  z-index: 2100;
+  width: min(280px, calc(100% - 28px));
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: rgba(255,255,255,.92);
+  box-shadow: 0 20px 60px rgba(15,23,42,.2);
+  padding: 12px;
+  display: none;
+}
+:root[data-theme="dark"] .cart-peek {
+  background: rgba(15,23,42,.92);
+}
+.cart-peek.show { display: grid; gap: 8px; }
+.cart-peek-head { font-weight: 800; }
+.cart-peek-body { font-size: 13px; color: var(--muted); }
+
+.page-hints {
+  border: 1px dashed rgba(37,99,235,.35);
+  background: rgba(37,99,235,.08);
+  border-radius: 16px;
+  padding: 12px;
+  margin-bottom: 10px;
+}
+.page-hints-title {
+  font-weight: 800;
+  margin-bottom: 6px;
+}
+.page-hints ul {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--muted);
+  display: grid;
+  gap: 4px;
+}
+
+@media (max-width: 720px) {
+  .shortcut-row {
+    grid-template-columns: 1fr;
+  }
+  .cart-peek {
+    top: 112px;
+    right: 10px;
+  }
+}
diff --git a/health.html b/health.html
new file mode 100644
index 0000000..24b695d
--- /dev/null
+++ b/health.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en" data-theme="dark"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Health — Nexus</title><meta name="description" content="Health — Nexus online storefront." /><meta property="og:title" content="Health — Nexus" /><meta property="og:description" content="Health — UAE-focused gaming store." /><meta property="og:image" content="/assets/placeholder.svg" /><link rel="canonical" href="https://akastore.netlify.app/health.html" /><link rel="stylesheet" href="./style.css"/></head><body><main class="container" style="padding:20px 18px 0;"><div class="card" style="padding:16px;"><h1 class="h1" style="font-size:26px;">System health</h1><div id="healthOut" class="small">Checking…</div><a class="btn" href="./index.html">Home</a></div></main><script type="module">import {boot} from './script.js';boot();const checks=[['adminLogin','/.netlify/functions/adminLogin'],['createOrder','/.netlify/functions/createOrder']];const out=document.getElementById('healthOut');let html='';for(const [name,url] of checks){try{const r=await fetch(url,{method:'OPTIONS'});html+=`<div>${name}: ${r.ok?'OK':'FAIL'}</div>`;}catch{html+=`<div>${name}: FAIL</div>`;}}out.innerHTML=html;</script></body></html>
diff --git a/index.html b/index.html
index f006c8b..fd0055d 100644
--- a/index.html
+++ b/index.html
@@ -9,41 +9,16 @@
   <title>Nexus Gaming UAE — Online PC Parts, Builds, Repair</title>
   <link rel="stylesheet" href="./style.css" />
   <link rel="manifest" href="./payment.json" />
+  <meta name="description" content="Nexus Gaming UAE — Online PC Parts, Builds, Repair - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Nexus Gaming UAE — Online PC Parts, Builds, Repair" />
+  <meta property="og:description" content="Nexus Gaming UAE — Online PC Parts, Builds, Repair - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/" />
+  <link rel="alternate" hreflang="ar" href="https://akastore.netlify.app/ar/index.html" />
+  <link rel="alternate" hreflang="en" href="https://akastore.netlify.app/index.html" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html" aria-label="Home">
-        <span class="brand-badge" aria-hidden="true"></span>
-        <div>Nexus <span>Gaming</span> UAE</div>
-      </a>
-
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html">Products</a>
-        <a href="./services.html">Services & Fixing</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./warranty.html">Warranty</a>
-        <a href="./contact.html">Contact</a>
-        <a href="./admin.html" class="badge neo">Admin</a>
-      </nav>
-
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.49 15.3L2 22l4.86-1.28A10 10 0 1 0 12 2Z" stroke="currentColor" opacity=".7"/><path d="M16.6 14.8c-.2.6-1 1.1-1.7 1.2-.4.1-.9.1-1.5-.1-1.6-.5-3.4-1.8-4.7-3.7-.5-.7-.8-1.4-.9-2.1-.1-.7.1-1.4.7-1.8.2-.2.5-.2.7-.2h.5c.2 0 .4 0 .5.3l.7 1.7c.1.2.1.5-.1.7l-.5.6c-.1.1-.1.3 0 .5.4.7 1.4 2 2.8 2.6.2.1.4.1.5 0l.7-.4c.2-.1.4-.1.6 0l1.6.8c.2.1.3.3.2.5Z" fill="currentColor"/></svg>
-          <span class="badge green">WhatsApp</span>
-        </a>
-
-        <a class="icon-btn" href="./checkout.html" aria-label="Cart">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 7h14l-2 8H9L7 7Z" stroke="currentColor" opacity=".7"/><path d="M7 7 6 3H3" stroke="currentColor" opacity=".7"/><path d="M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor"/></svg>
-          <span class="badge" id="cartCount">0</span>
-        </a>
-
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M21 12.8A8.5 8.5 0 0 1 11.2 3a7 7 0 1 0 9.8 9.8Z" stroke="currentColor" opacity=".7"/></svg>
-        </button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main>
     <section class="hero">
@@ -74,7 +49,7 @@ <h1 class="h1">Techy builds. Real parts. Fast support — built for UAE.</h1>
             </div>
             <div class="space"></div>
             <div class="row">
-              <input class="input" id="cmd" placeholder="buy gpu • service format • track NG-123456 • warranty" style="flex:1;" />
+              <input class="input" id="cmd" placeholder="buy gpu • service format • track NG-123456 • warranty" style="flex:1;" aria-label="Command input" autocomplete="off" />
               <button class="btn primary" id="cmdRun" type="button">Run</button>
             </div>
             <div class="small">This is a UI shortcut layer (fast navigation + support routing). Not a conventional homepage.</div>
@@ -159,25 +134,7 @@ <h2>Newsletter</h2>
     </section>
   </main>
 
-  <footer class="footer">
-    <div class="container footer-grid">
-      <div>
-        <div class="row"><span class="badge neo">Nexus Gaming UAE</span><span class="badge">Online store</span></div>
-        <div class="space"></div>
-        <div class="small">Support: WhatsApp <span class="mono">+971 50 505 8609</span>. Use the built-in chatbot for routing. For payments, connect a UAE gateway via hosted payment link (see README).</div>
-      </div>
-      <div>
-        <div class="row">
-          <a class="pill" href="./about.html">About</a>
-          <a class="pill" href="./warranty.html">Warranty</a>
-          <a class="pill" href="./CHANGELOG.md">Changelog</a>
-          <a class="pill" href="./ar-blog.html">Arabic</a>
-        </div>
-        <div class="space"></div>
-        <div class="small">© <span id="year"></span> Nexus Gaming UAE. Built as a modular static site.</div>
-      </div>
-    </div>
-  </footer>
+  <footer data-include="footer"></footer>
 
   <!-- Floating actions -->
   <div class="fab-wrap">
@@ -208,7 +165,7 @@ <h2>Newsletter</h2>
   <div id="toast" class="toast" role="status" aria-live="polite"></div>
 
   <script type="module">
-    import { boot, toast } from './script.js';
+    import { boot, toast, fetchJSON, escapeHtml, debounce, productImage } from './script.js';
     import { addToCart, formatAED } from './cart.js';
     import { wireForms } from './form-handler.js';
 
@@ -236,7 +193,6 @@ <h2>Newsletter</h2>
       if(t.includes('buy') || t.includes('product') || t.includes('gpu') || t.includes('cpu')){ window.location.href = './products.html'; return; }
       toast('Command not recognized. Try: products, services, track, warranty.');
     };
-    cmdRun?.addEventListener('click', runCmd);
     cmd?.addEventListener('keydown', (e)=>{ if(e.key==='Enter') runCmd(); });
 
     function skeletons(n=6){
@@ -258,12 +214,12 @@ <h2>Newsletter</h2>
       return `
       <article class="prod">
         <div class="row" style="justify-content:space-between;">
-          <span class="badge">${p.category}</span>
+          <span class="badge">${escapeHtml(p.category)}</span>
           ${stockBadge(p)}
         </div>
-        <div class="prod-img"><img alt="${p.title}" loading="lazy" src="${p.image}" onerror="this.onerror=null;this.src='./assets/placeholder.svg';"></div>
-        <div class="prod-title">${p.title}</div>
-        <div class="prod-meta">Brand: <b>${p.brand}</b> • SKU: <span class="mono">${p.sku}</span></div>
+        <div class="prod-img"><img alt="${escapeHtml(p.title)}" loading="lazy" src="${productImage(p)}" onerror="this.onerror=null;this.src='./assets/placeholder.svg';"></div>
+        <div class="prod-title">${escapeHtml(p.title)}</div>
+        <div class="prod-meta">Brand: <b>${escapeHtml(p.brand)}</b> • SKU: <span class="mono">${escapeHtml(p.sku)}</span></div>
         <div class="prod-price">
           <div class="price">${formatAED(p.price)}</div>
           <span class="badge">★ ${p.rating}</span>
@@ -278,8 +234,11 @@ <h2>Newsletter</h2>
     async function load(){
       skeletons(6);
       try{
-        const res = await fetch('./products.json', {cache:'no-store'});
-        const items = await res.json();
+        const items = await fetchJSON('./products.json', {timeoutMs: 6000, fallback: []});
+        if(!items.length){
+          grid.innerHTML = '<div class="mini">Catalog is currently unavailable. Please retry in a moment.</div>';
+          return;
+        }
         const featured = items.slice(0,6);
         grid.innerHTML = featured.map(card).join('');
         grid.querySelectorAll('[data-add]').forEach(btn=>{
@@ -288,7 +247,7 @@ <h2>Newsletter</h2>
             const p = items.find(x=>x.id===id);
             if(!p) return;
             addToCart(p, 1);
-            toast('Added to cart.');
+            toast(`${escapeHtml(p.title)} added to cart.`);
           });
         });
       }catch{
@@ -296,6 +255,9 @@ <h2>Newsletter</h2>
       }
     }
 
+    const runCmdDebounced = debounce(runCmd, 120);
+    cmdRun?.addEventListener('click', runCmdDebounced);
+
     load();
   </script>
 </body>
diff --git a/js/lib/api.js b/js/lib/api.js
new file mode 100644
index 0000000..e44a933
--- /dev/null
+++ b/js/lib/api.js
@@ -0,0 +1,19 @@
+export async function apiJSON(url, opts={}){
+  const res = await fetch(url, opts);
+  const out = await res.json().catch(()=>({}));
+  if(!res.ok) throw new Error(out?.error || `HTTP ${res.status}`);
+  return out;
+}
+
+export async function fetchJSON(url, {timeoutMs=7000, fallback=null}={}){
+  const ctl = new AbortController();
+  const t = setTimeout(()=> ctl.abort(), timeoutMs);
+  try{
+    const r = await fetch(url, {cache:'no-store', signal: ctl.signal});
+    if(!r.ok) throw new Error(`HTTP ${r.status}`);
+    return await r.json();
+  }catch(err){
+    if(fallback !== null) return fallback;
+    throw err;
+  }finally{ clearTimeout(t); }
+}
diff --git a/js/lib/dom.js b/js/lib/dom.js
new file mode 100644
index 0000000..7180152
--- /dev/null
+++ b/js/lib/dom.js
@@ -0,0 +1,11 @@
+export const $ = (sel, root=document)=> root.querySelector(sel);
+export const $$ = (sel, root=document)=> [...root.querySelectorAll(sel)];
+
+export function on(sel, ev, cb, root=document){
+  const el = $(sel, root);
+  if(el) el.addEventListener(ev, cb);
+  return el;
+}
+
+export function show(el){ if(el) el.style.display = ''; }
+export function hide(el){ if(el) el.style.display = 'none'; }
diff --git a/js/lib/format.js b/js/lib/format.js
new file mode 100644
index 0000000..5a86cfc
--- /dev/null
+++ b/js/lib/format.js
@@ -0,0 +1,2 @@
+export const formatAED = (n)=> `AED ${Number(n||0).toFixed(2)}`;
+export const todayISO = ()=> new Date().toISOString().slice(0,10);
diff --git a/js/lib/logger.js b/js/lib/logger.js
new file mode 100644
index 0000000..20dc0ac
--- /dev/null
+++ b/js/lib/logger.js
@@ -0,0 +1,39 @@
+import { escapeHtml } from './security.js';
+
+const KEY = 'nexus_errors_v1';
+export function logError(entry){
+  let arr = [];
+  try{ arr = JSON.parse(localStorage.getItem(KEY)||'[]'); }catch{}
+  arr.unshift({ at: new Date().toISOString(), ...entry });
+  arr = arr.slice(0,50);
+  localStorage.setItem(KEY, JSON.stringify(arr));
+}
+
+export function getErrors(){
+  try{ return JSON.parse(localStorage.getItem(KEY)||'[]'); }catch{ return []; }
+}
+
+export function wireGlobalErrorCapture(){
+  window.addEventListener('error', (e)=> logError({type:'error', message:e.message || 'Unknown error'}));
+  window.addEventListener('unhandledrejection', (e)=> logError({type:'promise', message:String(e.reason||'Unhandled rejection')}));
+}
+
+export function renderErrorBanner(){
+  if(document.getElementById('fatalBanner')) return;
+  const wrap = document.createElement('div');
+  wrap.id = 'fatalBanner';
+  wrap.className = 'card';
+  wrap.style.cssText='display:none;position:fixed;bottom:14px;left:14px;right:14px;z-index:3000;padding:12px;';
+  wrap.innerHTML = '<b>We hit an issue</b><div id="fatalMsg" class="small"></div><div class="row" style="margin-top:8px;"><button class="btn" id="fatalRetry" type="button">Retry</button><a class="btn" href="./health.html">Open health page</a></div><details><summary>Details</summary><pre id="fatalDetail" class="small"></pre></details>';
+  document.body.appendChild(wrap);
+  document.getElementById('fatalRetry')?.addEventListener('click', ()=> location.reload());
+
+  const show = (msg, detail='')=>{
+    wrap.style.display='block';
+    document.getElementById('fatalMsg').textContent = msg;
+    document.getElementById('fatalDetail').textContent = escapeHtml(detail);
+  };
+  window.__nexusShowFatal = show;
+  window.addEventListener('error', (e)=> show('A runtime error occurred.', e.message||''));
+  window.addEventListener('unhandledrejection', (e)=> show('A background request failed.', String(e.reason||'')));
+}
diff --git a/js/lib/rules.js b/js/lib/rules.js
new file mode 100644
index 0000000..4abb711
--- /dev/null
+++ b/js/lib/rules.js
@@ -0,0 +1,27 @@
+import { fetchJSON } from './api.js';
+
+let warrantyCfg;
+export async function getWarrantyRules(){
+  if(!warrantyCfg) warrantyCfg = await fetchJSON('./warrantyRules.json', {fallback:{tiers:{}, exclusions:[]}});
+  return warrantyCfg;
+}
+
+export async function calcWarrantyPrice(product, extraMonths){
+  const cfg = await getWarrantyRules();
+  if(!product?.eligibleExtendedWarranty) return {eligible:false, price:0, reason:'not-eligible'};
+  if((cfg.exclusions||[]).includes(product.category)) return {eligible:false, price:0, reason:'excluded-category'};
+  const tier = cfg.tiers?.[product.warrantyTier || 'C'];
+  if(!tier) return {eligible:false, price:0, reason:'missing-tier'};
+
+  const fixed = tier.fixed?.[String(extraMonths)];
+  if(typeof fixed === 'number') return {eligible:true, price: fixed};
+
+  const pct = tier.percent?.[String(extraMonths)];
+  if(typeof pct === 'number'){
+    const raw = Number(product.price||0) * pct;
+    const min = Number(tier.min || 0);
+    const max = Number(tier.max || Number.MAX_SAFE_INTEGER);
+    return {eligible:true, price: Math.max(min, Math.min(max, Math.round(raw))) };
+  }
+  return {eligible:false, price:0, reason:'duration-not-supported'};
+}
diff --git a/js/lib/security.js b/js/lib/security.js
new file mode 100644
index 0000000..ada69a0
--- /dev/null
+++ b/js/lib/security.js
@@ -0,0 +1,13 @@
+export function escapeHtml(str){
+  return String(str ?? '')
+    .replaceAll('&','&amp;')
+    .replaceAll('<','&lt;')
+    .replaceAll('>','&gt;')
+    .replaceAll('"','&quot;')
+    .replaceAll("'",'&#039;');
+}
+
+export function safeText(el, text){
+  if(!el) return;
+  el.textContent = String(text ?? '');
+}
diff --git a/js/lib/ux-enhancements.js b/js/lib/ux-enhancements.js
new file mode 100644
index 0000000..9a7c868
--- /dev/null
+++ b/js/lib/ux-enhancements.js
@@ -0,0 +1,535 @@
+import { escapeHtml } from '../../script.js';
+
+const LS_KEYS = {
+  paletteRecent: 'nexus_palette_recent_v1',
+  formDraftPrefix: 'nexus_form_draft_',
+  perf: 'nexus_perf_snapshots_v1',
+};
+
+function qs(sel, root = document) {
+  return root.querySelector(sel);
+}
+
+function qsa(sel, root = document) {
+  return [...root.querySelectorAll(sel)];
+}
+
+function safeParse(json, fallback) {
+  try {
+    return JSON.parse(json);
+  } catch {
+    return fallback;
+  }
+}
+
+function saveJSON(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    // ignore storage quota
+  }
+}
+
+function readJSON(key, fallback) {
+  try {
+    return safeParse(localStorage.getItem(key), fallback);
+  } catch {
+    return fallback;
+  }
+}
+
+function routeBase() {
+  return location.pathname.startsWith('/ar/') ? '..' : '.';
+}
+
+function routeCatalog() {
+  const b = routeBase();
+  return [
+    { label: 'Home', href: `${b}/index.html`, tags: ['landing', 'main', 'featured'] },
+    { label: 'Products', href: `${b}/products.html`, tags: ['catalog', 'items', 'hardware'] },
+    { label: 'Services & Fixing', href: `${b}/services.html`, tags: ['repair', 'troubleshoot', 'support'] },
+    { label: 'Blog', href: `${b}/blog.html`, tags: ['guides', 'articles'] },
+    { label: 'Build PC', href: `${b}/build.html`, tags: ['configurator', 'builder', 'compatibility'] },
+    { label: 'Warranty', href: `${b}/warranty.html`, tags: ['coverage', 'extended', 'terms'] },
+    { label: 'Contact', href: `${b}/contact.html`, tags: ['support', 'whatsapp', 'help'] },
+    { label: 'Checkout', href: `${b}/checkout.html`, tags: ['cart', 'payment', 'invoice'] },
+    { label: 'Admin', href: `${b}/admin.html`, tags: ['dashboard', 'orders', 'kpis'] },
+    { label: 'Health', href: `${b}/health.html`, tags: ['status', 'diagnostics', 'functions'] },
+    { label: 'Changelog', href: `${b}/changelog.html`, tags: ['updates', 'releases'] },
+  ];
+}
+
+export function initNetworkStatusBanner() {
+  if (qs('#networkStatusBanner')) return;
+
+  const banner = document.createElement('div');
+  banner.id = 'networkStatusBanner';
+  banner.className = 'network-status';
+  banner.setAttribute('role', 'status');
+  banner.setAttribute('aria-live', 'polite');
+
+  const text = document.createElement('div');
+  text.className = 'network-status-text';
+
+  const closeBtn = document.createElement('button');
+  closeBtn.className = 'network-status-close';
+  closeBtn.type = 'button';
+  closeBtn.setAttribute('aria-label', 'Dismiss network banner');
+  closeBtn.textContent = 'Dismiss';
+
+  banner.append(text, closeBtn);
+  document.body.appendChild(banner);
+
+  const sync = () => {
+    const online = navigator.onLine;
+    if (online) {
+      text.textContent = 'Back online. Sync and checkout functions are available.';
+      banner.dataset.state = 'online';
+      banner.classList.add('show');
+      setTimeout(() => banner.classList.remove('show'), 2400);
+    } else {
+      text.textContent = 'You are offline. Cart remains local and sync resumes when online.';
+      banner.dataset.state = 'offline';
+      banner.classList.add('show');
+    }
+  };
+
+  window.addEventListener('online', sync);
+  window.addEventListener('offline', sync);
+  closeBtn.addEventListener('click', () => banner.classList.remove('show'));
+}
+
+function scoreMatch(item, query) {
+  if (!query) return 1;
+  const q = query.toLowerCase().trim();
+  let score = 0;
+  if (item.label.toLowerCase().startsWith(q)) score += 5;
+  if (item.label.toLowerCase().includes(q)) score += 3;
+  for (const t of item.tags || []) {
+    if (t.startsWith(q)) score += 2;
+    if (t.includes(q)) score += 1;
+  }
+  return score;
+}
+
+function mergeRecent(items) {
+  const recent = readJSON(LS_KEYS.paletteRecent, []);
+  if (!Array.isArray(recent) || !recent.length) return items;
+  const rank = new Map(recent.map((href, idx) => [href, idx]));
+  return [...items].sort((a, b) => {
+    const ra = rank.has(a.href) ? rank.get(a.href) : 9999;
+    const rb = rank.has(b.href) ? rank.get(b.href) : 9999;
+    if (ra !== rb) return ra - rb;
+    return a.label.localeCompare(b.label);
+  });
+}
+
+function rememberVisit(href) {
+  const recent = readJSON(LS_KEYS.paletteRecent, []);
+  const next = [href, ...recent.filter((x) => x !== href)].slice(0, 8);
+  saveJSON(LS_KEYS.paletteRecent, next);
+}
+
+function createPaletteResult(item, index) {
+  const row = document.createElement('a');
+  row.className = 'cmd-item';
+  row.href = item.href;
+  row.dataset.idx = String(index);
+  row.innerHTML = `
+    <span class="cmd-item-main">${escapeHtml(item.label)}</span>
+    <span class="cmd-item-meta">${escapeHtml((item.tags || []).slice(0, 3).join(' • '))}</span>
+  `;
+  row.addEventListener('click', () => rememberVisit(item.href));
+  return row;
+}
+
+export function initCommandPaletteV2() {
+  if (qs('#cmdPaletteV2')) return;
+
+  const wrap = document.createElement('div');
+  wrap.id = 'cmdPaletteV2';
+  wrap.className = 'cmd-palette';
+  wrap.innerHTML = `
+    <div class="cmd-shell" role="dialog" aria-modal="true" aria-label="Site command palette">
+      <div class="cmd-head">
+        <input id="cmdInputV2" class="cmd-input" type="text" placeholder="Search pages, tools, flows…" aria-label="Command palette search" />
+      </div>
+      <div class="cmd-list" id="cmdListV2"></div>
+      <div class="cmd-foot">
+        <span>Use ↑ ↓ to navigate</span>
+        <span>Enter to open</span>
+        <span>Esc to close</span>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(wrap);
+
+  const input = qs('#cmdInputV2');
+  const list = qs('#cmdListV2');
+  let items = mergeRecent(routeCatalog());
+  let focusIndex = 0;
+
+  const render = () => {
+    const q = input.value;
+    const out = items
+      .map((item) => ({ item, score: scoreMatch(item, q) }))
+      .filter((x) => x.score > 0)
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 12)
+      .map((x) => x.item);
+
+    list.innerHTML = '';
+    if (!out.length) {
+      list.innerHTML = '<div class="cmd-empty">No results. Try “checkout”, “warranty”, or “build”.</div>';
+      return;
+    }
+
+    out.forEach((item, idx) => {
+      const row = createPaletteResult(item, idx);
+      if (idx === focusIndex) row.classList.add('active');
+      list.appendChild(row);
+    });
+  };
+
+  const open = () => {
+    wrap.classList.add('show');
+    items = mergeRecent(routeCatalog());
+    focusIndex = 0;
+    render();
+    setTimeout(() => input.focus(), 0);
+  };
+
+  const close = () => {
+    wrap.classList.remove('show');
+    input.value = '';
+    focusIndex = 0;
+  };
+
+  const move = (dir) => {
+    const rows = qsa('.cmd-item', list);
+    if (!rows.length) return;
+    focusIndex = (focusIndex + dir + rows.length) % rows.length;
+    rows.forEach((x) => x.classList.remove('active'));
+    rows[focusIndex].classList.add('active');
+    rows[focusIndex].scrollIntoView({ block: 'nearest' });
+  };
+
+  input.addEventListener('input', () => {
+    focusIndex = 0;
+    render();
+  });
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      move(1);
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      move(-1);
+    }
+    if (e.key === 'Enter') {
+      const rows = qsa('.cmd-item', list);
+      if (rows[focusIndex]) rows[focusIndex].click();
+    }
+  });
+
+  wrap.addEventListener('click', (e) => {
+    if (e.target === wrap) close();
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+      e.preventDefault();
+      if (wrap.classList.contains('show')) close();
+      else open();
+    }
+    if (e.key === 'Escape') close();
+  });
+}
+
+export function initScrollProgress() {
+  if (qs('#scrollProgress')) return;
+  const bar = document.createElement('div');
+  bar.id = 'scrollProgress';
+  bar.className = 'scroll-progress';
+  document.body.appendChild(bar);
+
+  const update = () => {
+    const h = document.documentElement;
+    const max = h.scrollHeight - h.clientHeight;
+    const pct = max > 0 ? (h.scrollTop / max) * 100 : 0;
+    bar.style.setProperty('--progress', `${pct.toFixed(2)}%`);
+  };
+
+  window.addEventListener('scroll', update, { passive: true });
+  window.addEventListener('resize', update);
+  update();
+}
+
+export function initFormDrafts() {
+  const forms = qsa('form');
+  forms.forEach((form, idx) => {
+    const id = form.id || `form_${idx}`;
+    const key = `${LS_KEYS.formDraftPrefix}${id}`;
+
+    const restore = readJSON(key, null);
+    if (restore && typeof restore === 'object') {
+      qsa('input,textarea,select', form).forEach((el) => {
+        if (!el.name) return;
+        if (el.type === 'password') return;
+        if (restore[el.name] == null) return;
+        if (el.type === 'checkbox') el.checked = !!restore[el.name];
+        else el.value = String(restore[el.name]);
+      });
+    }
+
+    const persist = () => {
+      const payload = {};
+      qsa('input,textarea,select', form).forEach((el) => {
+        if (!el.name) return;
+        if (el.type === 'password') return;
+        payload[el.name] = el.type === 'checkbox' ? !!el.checked : el.value;
+      });
+      saveJSON(key, payload);
+    };
+
+    form.addEventListener('input', persist);
+    form.addEventListener('change', persist);
+    form.addEventListener('submit', () => {
+      try {
+        localStorage.removeItem(key);
+      } catch {
+        // ignore
+      }
+    });
+  });
+}
+
+function collectVital() {
+  const nav = performance.getEntriesByType('navigation')[0];
+  if (!nav) return null;
+
+  const snapshot = {
+    path: location.pathname,
+    ts: new Date().toISOString(),
+    dcl: Math.round(nav.domContentLoadedEventEnd),
+    load: Math.round(nav.loadEventEnd),
+    ttfb: Math.round(nav.responseStart),
+    transferKb: Math.round((nav.transferSize || 0) / 1024),
+  };
+  return snapshot;
+}
+
+export function initPerfSnapshots() {
+  if (!('performance' in window)) return;
+  const snapshot = collectVital();
+  if (!snapshot) return;
+
+  const prev = readJSON(LS_KEYS.perf, []);
+  const next = [snapshot, ...prev].slice(0, 20);
+  saveJSON(LS_KEYS.perf, next);
+
+  if (new URLSearchParams(location.search).get('debug') === '1') {
+    const panel = document.createElement('div');
+    panel.className = 'perf-panel';
+    panel.innerHTML = `
+      <div class="perf-title">Performance snapshot</div>
+      <div class="perf-line">TTFB: <b>${snapshot.ttfb}ms</b></div>
+      <div class="perf-line">DCL: <b>${snapshot.dcl}ms</b></div>
+      <div class="perf-line">Load: <b>${snapshot.load}ms</b></div>
+      <div class="perf-line">Transfer: <b>${snapshot.transferKb}kb</b></div>
+    `;
+    document.body.appendChild(panel);
+  }
+}
+
+export function initAccessibilityHelpers() {
+  if (qs('#skipToContent')) return;
+
+  const main = qs('main');
+  if (main && !main.id) main.id = 'main-content';
+
+  const skip = document.createElement('a');
+  skip.id = 'skipToContent';
+  skip.className = 'skip-link';
+  skip.href = '#main-content';
+  skip.textContent = 'Skip to main content';
+  document.body.prepend(skip);
+
+  qsa('button, a, input, select, textarea').forEach((el) => {
+    if (!el.getAttribute('aria-label') && !el.textContent?.trim() && !el.getAttribute('title')) {
+      el.setAttribute('aria-label', 'Interactive control');
+    }
+  });
+}
+
+export function initAnnouncementRotator() {
+  const strip = qs('.top-strip-inner');
+  if (!strip) return;
+  const textNode = qsa('span', strip)[1];
+  if (!textNode) return;
+
+  const messages = [
+    'Free UAE shipping over AED 499 • Express support 10am–10pm',
+    'Extended warranty options available during checkout',
+    'Build PC wizard now includes compatibility checks',
+    'Need help fast? Use WhatsApp from header or quick menu',
+  ];
+
+  let idx = 0;
+  setInterval(() => {
+    idx = (idx + 1) % messages.length;
+    textNode.textContent = messages[idx];
+  }, 5600);
+}
+
+export function initGlobalUXEnhancements() {
+  initNetworkStatusBanner();
+  initCommandPaletteV2();
+  initScrollProgress();
+  initFormDrafts();
+  initPerfSnapshots();
+  initAccessibilityHelpers();
+  initAnnouncementRotator();
+}
+
+function shortcutRows(){
+  return [
+    ['Ctrl/Cmd + K', 'Open quick command palette'],
+    ['Esc', 'Close open overlay (palette/chat/modals)'],
+    ['Enter', 'Submit command/search in focused controls'],
+    ['Tab', 'Navigate interactive controls accessibly'],
+  ];
+}
+
+export function initShortcutHelpModal(){
+  if (qs('#shortcutHelpModal')) return;
+
+  const shell = document.createElement('div');
+  shell.id = 'shortcutHelpModal';
+  shell.className = 'shortcut-help';
+  shell.setAttribute('aria-hidden', 'true');
+  shell.innerHTML = `
+    <div class="shortcut-help-card" role="dialog" aria-modal="true" aria-label="Keyboard shortcuts">
+      <div class="shortcut-head">
+        <h3>Keyboard shortcuts</h3>
+        <button class="btn" id="shortcutClose" type="button">Close</button>
+      </div>
+      <div class="shortcut-body" id="shortcutBody"></div>
+    </div>
+  `;
+  document.body.appendChild(shell);
+
+  const body = qs('#shortcutBody');
+  const rows = shortcutRows()
+    .map(([keys, desc]) => `<div class="shortcut-row"><kbd>${escapeHtml(keys)}</kbd><span>${escapeHtml(desc)}</span></div>`)
+    .join('');
+  body.innerHTML = rows;
+
+  const open = () => {
+    shell.classList.add('show');
+    shell.setAttribute('aria-hidden', 'false');
+  };
+  const close = () => {
+    shell.classList.remove('show');
+    shell.setAttribute('aria-hidden', 'true');
+  };
+
+  document.getElementById('shortcutClose')?.addEventListener('click', close);
+  shell.addEventListener('click', (e) => {
+    if (e.target === shell) close();
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === '?') {
+      const el = document.activeElement;
+      const typing = el && ['INPUT', 'TEXTAREA'].includes(el.tagName);
+      if (!typing) {
+        e.preventDefault();
+        open();
+      }
+    }
+  });
+}
+
+export function initSmartSectionObserver(){
+  const targets = qsa('main section, main .card, main article');
+  if (!targets.length || !('IntersectionObserver' in window)) return;
+
+  const obs = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('fade-in');
+      }
+    }
+  }, { threshold: .12 });
+
+  targets.forEach((el) => obs.observe(el));
+}
+
+export function initCartQuickPeek(){
+  const navCart = qs('[data-testid="nav-cart"]');
+  if (!navCart || qs('#cartPeek')) return;
+
+  const peek = document.createElement('div');
+  peek.id = 'cartPeek';
+  peek.className = 'cart-peek';
+  peek.setAttribute('aria-hidden', 'true');
+  peek.innerHTML = `
+    <div class="cart-peek-head">Cart shortcut</div>
+    <div class="cart-peek-body">Go to checkout to review totals, VAT, and payment options.</div>
+    <a class="btn primary" href="${navCart.getAttribute('href') || './checkout.html'}">Open checkout</a>
+  `;
+  document.body.appendChild(peek);
+
+  let timer;
+  const show = () => {
+    clearTimeout(timer);
+    peek.classList.add('show');
+    peek.setAttribute('aria-hidden', 'false');
+  };
+  const hide = () => {
+    timer = setTimeout(() => {
+      peek.classList.remove('show');
+      peek.setAttribute('aria-hidden', 'true');
+    }, 120);
+  };
+
+  navCart.addEventListener('mouseenter', show);
+  navCart.addEventListener('mouseleave', hide);
+  peek.addEventListener('mouseenter', show);
+  peek.addEventListener('mouseleave', hide);
+}
+
+const pageHints = {
+  '/products.html': ['Try filter: stock=out to capture notify requests', 'Tip: click product card body to quick-open details modal.'],
+  '/warranty.html': ['Choose a duration +24 or +36 months to compare pricing.'],
+  '/build.html': ['Start with a CPU then match motherboard socket for compatibility.'],
+  '/checkout.html': ['Card/Tabby can use demo payment link if live keys are unavailable.'],
+};
+
+export function initContextHints(){
+  if (qs('#pageHints') || !pageHints[location.pathname]) return;
+
+  const hints = pageHints[location.pathname];
+  const box = document.createElement('aside');
+  box.id = 'pageHints';
+  box.className = 'page-hints';
+  box.innerHTML = `
+    <div class="page-hints-title">Helpful hints</div>
+    <ul>${hints.map((h) => `<li>${escapeHtml(h)}</li>`).join('')}</ul>
+  `;
+
+  const main = qs('main .container') || qs('main');
+  if (main) main.prepend(box);
+}
+
+const originalInitGlobalUXEnhancements = initGlobalUXEnhancements;
+export function initGlobalUXEnhancementsExtended(){
+  originalInitGlobalUXEnhancements();
+  initShortcutHelpModal();
+  initSmartSectionObserver();
+  initCartQuickPeek();
+  initContextHints();
+}
diff --git a/js/pages/chat.js b/js/pages/chat.js
new file mode 100644
index 0000000..da24661
--- /dev/null
+++ b/js/pages/chat.js
@@ -0,0 +1,77 @@
+import { apiJSON, fetchJSON } from '../lib/api.js';
+import { escapeHtml } from '../lib/security.js';
+
+const CHAT_KEY = 'nexus_chat_history_v2';
+
+function loadHistory(){
+  try{ return JSON.parse(localStorage.getItem(CHAT_KEY)||'[]'); }catch{ return []; }
+}
+function saveHistory(arr){ localStorage.setItem(CHAT_KEY, JSON.stringify(arr.slice(-40))); }
+
+function createUI(){
+  if(document.getElementById('chatFabGlobal')) return;
+  const fab = document.createElement('button');
+  fab.id='chatFabGlobal'; fab.className='fab'; fab.type='button';
+  fab.innerHTML='<span class="badge neo">AI</span><span>Chat</span>';
+
+  const panel = document.createElement('div');
+  panel.id='chatPanelGlobal';
+  panel.className='card';
+  panel.style.cssText='display:none;position:fixed;right:16px;bottom:88px;width:min(420px,calc(100% - 24px));z-index:2600;padding:12px;';
+  panel.innerHTML = '<div class="row" style="justify-content:space-between;"><b>Nexus Assistant</b><button class="btn small" id="chatCloseGlobal" type="button">Close</button></div><div class="row"><button class="btn small" data-quick="Help me build a PC">Build Help</button><button class="btn small" data-quick="Warranty question">Warranty</button><button class="btn small" data-quick="Shipping & delivery">Shipping</button><button class="btn small" data-quick="Order status">Order</button></div><div id="chatListGlobal" style="display:grid;gap:8px;max-height:280px;overflow:auto;margin-top:8px;"></div><div class="row"><input id="chatInputGlobal" class="input" placeholder="Ask me anything..." style="flex:1;"><button class="btn primary" id="chatSendGlobal" type="button">Send</button></div>';
+
+  const wrap = document.createElement('div');
+  wrap.className='fab-wrap'; wrap.appendChild(fab);
+  document.body.appendChild(wrap);
+  document.body.appendChild(panel);
+
+  return {fab,panel};
+}
+
+function renderList(){
+  const list = document.getElementById('chatListGlobal');
+  if(!list) return;
+  const h = loadHistory();
+  list.innerHTML = (h.length?h:[{role:'assistant', text:'Hi! Ask about products, warranty, build PC, shipping, or order status.'}]).map(m=>`<div class="mini"><div class="badge ${m.role==='user'?'neo':'green'}">${m.role==='user'?'You':'Nexus'}</div><div class="small">${escapeHtml(m.text)}</div></div>`).join('');
+  list.scrollTop = list.scrollHeight;
+}
+
+async function sendMessage(text){
+  const h = loadHistory();
+  h.push({role:'user', text});
+  saveHistory(h);
+  renderList();
+
+  try{
+    const products = await fetchJSON('./products.json',{fallback:[]});
+    const rules = await fetchJSON('./warrantyRules.json',{fallback:{}});
+    const out = await apiJSON('/.netlify/functions/chat', {
+      method:'POST',
+      headers:{'content-type':'application/json'},
+      body: JSON.stringify({ message:text, products, warrantyRules: rules }),
+    });
+    h.push({role:'assistant', text: out.reply || 'Sorry, I could not generate a reply right now.'});
+  }catch{
+    h.push({role:'assistant', text:'I can help with products, builds, warranty, shipping, and order tracking. Try one of the quick buttons.'});
+  }
+  saveHistory(h);
+  renderList();
+}
+
+export function initChat(){
+  const ui = createUI();
+  if(!ui) return;
+  const {fab,panel} = ui;
+  fab.addEventListener('click', ()=>{ panel.style.display = panel.style.display==='none' ? 'block' : 'none'; if(panel.style.display==='block') renderList(); });
+  document.getElementById('chatCloseGlobal')?.addEventListener('click', ()=> panel.style.display='none');
+
+  document.getElementById('chatSendGlobal')?.addEventListener('click', ()=>{
+    const i = document.getElementById('chatInputGlobal');
+    const text = i.value.trim();
+    if(!text) return;
+    i.value='';
+    sendMessage(text);
+  });
+  document.getElementById('chatInputGlobal')?.addEventListener('keydown', (e)=>{ if(e.key==='Enter') document.getElementById('chatSendGlobal')?.click(); });
+  [...panel.querySelectorAll('[data-quick]')].forEach(b=> b.addEventListener('click', ()=> sendMessage(b.dataset.quick)));
+}
diff --git a/js/pages/warranty.js b/js/pages/warranty.js
new file mode 100644
index 0000000..d07c84b
--- /dev/null
+++ b/js/pages/warranty.js
@@ -0,0 +1,75 @@
+import { fetchJSON } from '../lib/api.js';
+import { calcWarrantyPrice } from '../lib/rules.js';
+import { escapeHtml } from '../lib/security.js';
+import { addToCart } from '../../cart.js';
+
+export async function initWarrantyPage(){
+  const q = document.getElementById('wq');
+  const btn = document.getElementById('wBtn');
+  const box = document.getElementById('wResult');
+  const productSel = document.getElementById('wProduct');
+  const durSel = document.getElementById('wDuration');
+  const calcOut = document.getElementById('wCalcOut');
+  const addBtn = document.getElementById('wAddCart');
+  if(!q || !btn || !box) return;
+
+  const data = await fetchJSON('./products.json', {fallback: []});
+  const items = Array.isArray(data)?data:[];
+
+  if(productSel){
+    const eligible = items.filter(x=>x.eligibleExtendedWarranty);
+    productSel.innerHTML = '<option value="">Select product</option>' + eligible.map(p=>`<option value="${p.id}">${escapeHtml(p.title)} (${escapeHtml(p.sku||p.id)})</option>`).join('');
+  }
+
+  async function lookup(){
+    const term = String(q.value||'').trim().toLowerCase();
+    if(!term) return;
+    const p = items.find(x=> String(x.id).toLowerCase()===term || String(x.sku||'').toLowerCase()===term);
+    box.style.display='block';
+    if(!p){
+      box.innerHTML = '<h3>Not found</h3><p class="sub">Default manufacturer warranty applies.</p>';
+      return;
+    }
+    box.innerHTML = `<h3>${escapeHtml(p.title)}</h3><div class="hint">Tier: ${escapeHtml(p.warrantyTier||'-')} • Base: ${Number(p.baseWarrantyMonths||12)} months</div><p class="sub"><b>Warranty note:</b> ${escapeHtml(p.warranty || '')}</p>`;
+  }
+
+  async function recalc(){
+    const pid = productSel?.value;
+    const dur = Number(durSel?.value || 0);
+    if(!pid || !dur || !calcOut) return;
+    const p = items.find(x=>x.id===pid);
+    if(!p) return;
+    const r = await calcWarrantyPrice(p, dur);
+    if(!r.eligible){
+      calcOut.innerHTML = '<span class="badge red">Not eligible</span>';
+      addBtn.disabled = true;
+      return;
+    }
+    const totalMonths = Number(p.baseWarrantyMonths||12)+dur;
+    calcOut.innerHTML = `<span class="badge green">AED ${r.price.toFixed(2)}</span><div class="small">Coverage: ${totalMonths} months</div>`;
+    addBtn.disabled = false;
+    addBtn.dataset.warrantyPayload = JSON.stringify({ pid:p.id, sku:p.sku||p.id, dur, price:r.price, title:p.title });
+  }
+
+  btn.addEventListener('click', lookup);
+  q.addEventListener('keydown', (e)=>{ if(e.key==='Enter') lookup(); });
+  productSel?.addEventListener('change', recalc);
+  durSel?.addEventListener('change', recalc);
+  addBtn?.addEventListener('click', ()=>{
+    const payload = JSON.parse(addBtn.dataset.warrantyPayload || '{}');
+    if(!payload?.pid) return;
+    const line = {
+      id: `warranty-${payload.pid}-${payload.dur}`,
+      sku: `WAR-${payload.sku}-${payload.dur}`,
+      title: `Extended Warranty for ${payload.title} (+${payload.dur} months)`,
+      price: payload.price,
+      image: './assets/placeholder.svg',
+      brand: 'Nexus Care',
+      category: 'Warranty',
+      stock: 999,
+      meta: { type:'extended_warranty', parentProductId: payload.pid, duration: payload.dur }
+    };
+    addToCart(line, 1);
+    window.dispatchEvent(new CustomEvent('toast:show', {detail:'Extended warranty added to cart.'}));
+  });
+}
diff --git a/netlify.toml b/netlify.toml
index 678062f..76a1a48 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -7,4 +7,63 @@
   [headers.values]
     X-Content-Type-Options = "nosniff"
     Referrer-Policy = "strict-origin-when-cross-origin"
-    Permissions-Policy = "geolocation=(), microphone=(), camera=()"
+
+[[redirects]]
+  from = "/products"
+  to = "/products.html"
+  status = 301
+
+[[redirects]]
+  from = "/services"
+  to = "/services.html"
+  status = 301
+
+[[redirects]]
+  from = "/blog"
+  to = "/blog.html"
+  status = 301
+
+[[redirects]]
+  from = "/warranty"
+  to = "/warranty.html"
+  status = 301
+
+[[redirects]]
+  from = "/contact"
+  to = "/contact.html"
+  status = 301
+
+[[redirects]]
+  from = "/admin"
+  to = "/admin.html"
+  status = 301
+
+[[redirects]]
+  from = "/checkout"
+  to = "/checkout.html"
+  status = 301
+
+[[redirects]]
+  from = "/ar"
+  to = "/ar/index.html"
+  status = 301
+
+[[redirects]]
+  from = "/ar/blog"
+  to = "/ar/blog.html"
+  status = 301
+
+[[redirects]]
+  from = "/build"
+  to = "/build.html"
+  status = 301
+
+[[redirects]]
+  from = "/health"
+  to = "/health.html"
+  status = 301
+
+[[redirects]]
+  from = "/payment-demo"
+  to = "/payment-demo.html"
+  status = 301
diff --git a/netlify/functions/_utils.js b/netlify/functions/_utils.js
index 094f31a..031c35b 100644
--- a/netlify/functions/_utils.js
+++ b/netlify/functions/_utils.js
@@ -3,6 +3,7 @@ export function json(statusCode, bodyObj, extraHeaders={}){
     statusCode,
     headers: {
       'content-type': 'application/json; charset=utf-8',
+      'cache-control': 'no-store',
       'access-control-allow-origin': '*',
       'access-control-allow-methods': 'GET,POST,OPTIONS',
       'access-control-allow-headers': 'content-type,authorization',
@@ -25,3 +26,5 @@ export function randToken(){
   const b = Math.random().toString(36).slice(2);
   return `tok_${a}${b}`;
 }
+
+export function methodNotAllowed(){ return json(405, { ok:false, error:'method-not-allowed' }); }
diff --git a/netlify/functions/adminLogin.js b/netlify/functions/adminLogin.js
index d2c59c1..7edaed8 100644
--- a/netlify/functions/adminLogin.js
+++ b/netlify/functions/adminLogin.js
@@ -1,66 +1,51 @@
-import { ok, bad, parseJSON } from './utils.js';
+import { ok, bad, unauth, parseJSON } from './_utils.js';
 import jwt from 'jsonwebtoken';
 import bcrypt from 'bcryptjs';
 
-export const handler = async (event) => {
-  // Allow OPTIONS requests (for CORS)
-  if (event.httpMethod === 'OPTIONS') {
-    return {
-      statusCode: 200,
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'POST, OPTIONS',
-        'Access-Control-Allow-Headers': 'Content-Type'
-      },
-      body: JSON.stringify({ ok: true })
-    };
-  }
-  
-  if (event.httpMethod !== 'POST') {
-    return bad({ ok: false, error: 'method-not-allowed' });
+const attempts = new Map();
+
+function registerAttempt(ip) {
+  const now = Date.now();
+  const row = attempts.get(ip) || { count: 0, resetAt: now + 10 * 60 * 1000 };
+  if (now > row.resetAt) {
+    row.count = 0;
+    row.resetAt = now + 10 * 60 * 1000;
   }
-  
+  row.count += 1;
+  attempts.set(ip, row);
+  return row;
+}
+
+export const handler = async (event) => {
+  if (event.httpMethod === 'OPTIONS') return ok({ ok: true });
+  if (event.httpMethod !== 'POST') return bad({ ok: false, error: 'method-not-allowed' });
+
+  const ip = event.headers['x-forwarded-for'] || 'unknown';
+  const attempt = registerAttempt(ip);
+  if (attempt.count > 30) return unauth({ ok: false, error: 'too-many-attempts' });
+
   const { username, password } = parseJSON(event);
-  
-  // Get credentials from environment variables
+  if (!username || !password) return bad({ ok: false, error: 'missing-credentials' });
+
   const expectedUser = process.env.ADMIN_USER || 'admin';
   const expectedPassHash = process.env.ADMIN_PASS_HASH;
-  
-  // Check if environment variables are set
-  if (!expectedPassHash) {
-    console.error('ADMIN_PASS_HASH not set in environment variables');
+  const jwtSecret = process.env.JWT_SECRET;
+
+  if (!expectedPassHash || !jwtSecret) {
+    console.error('Missing ADMIN_PASS_HASH or JWT_SECRET');
     return bad({ ok: false, error: 'server-not-configured' });
   }
-  
-  // Check username
-  if (username !== expectedUser) {
-    return {
-      statusCode: 401,
-      body: JSON.stringify({ ok: false, error: 'invalid-credentials' })
-    };
-  }
-  
-  // Check password
-  const isValid = await bcrypt.compare(password, expectedPassHash);
-  
-  if (!isValid) {
-    return {
-      statusCode: 401,
-      body: JSON.stringify({ ok: false, error: 'invalid-credentials' })
-    };
-  }
-  
-  // Generate JWT token (like a secure login ticket that expires in 24 hours)
-  const jwtSecret = process.env.JWT_SECRET || 'temporary-secret-change-this';
+
+  if (String(username) !== expectedUser) return unauth({ ok: false, error: 'invalid-credentials' });
+
+  const isValid = await bcrypt.compare(String(password), expectedPassHash);
+  if (!isValid) return unauth({ ok: false, error: 'invalid-credentials' });
+
   const token = jwt.sign(
-    { 
-      userId: username, 
-      role: 'admin',
-      loginTime: new Date().toISOString()
-    },
+    { userId: username, role: 'admin', loginTime: new Date().toISOString() },
     jwtSecret,
     { expiresIn: '24h' }
   );
-  
+
   return ok({ ok: true, token });
 };
diff --git a/netlify/functions/chat.js b/netlify/functions/chat.js
new file mode 100644
index 0000000..1370ab1
--- /dev/null
+++ b/netlify/functions/chat.js
@@ -0,0 +1,44 @@
+import { ok, bad, parseJSON } from './_utils.js';
+
+function demoReply(message, products, warrantyRules){
+  const t = String(message||'').toLowerCase();
+  if(t.includes('build')) return 'For UAE heat, prioritize airflow case + high quality cooler and keep PSU headroom at 25%.';
+  if(t.includes('warranty')) {
+    const tiers = Object.keys(warrantyRules?.tiers||{}).join(', ') || 'A/B/C';
+    return `Extended warranty is available by tier (${tiers}). Open Warranty page calculator for exact AED pricing.`;
+  }
+  if(t.includes('shipping') || t.includes('delivery')) return 'Delivery is UAE-wide. ETA is shared after order confirmation.';
+  if(t.includes('order')) return 'Use Checkout > Track order with your Order ID (NG-xxxxxx).';
+  const p = (products||[]).find(x=>String(x.title||'').toLowerCase().includes(t) || String(x.sku||'').toLowerCase().includes(t));
+  if(p) return `${p.title} is listed at AED ${Number(p.price||0).toFixed(2)} with stock ${p.stock}.`;
+  return 'I can help with products, build compatibility, warranty, shipping, and order tracking.';
+}
+
+export const handler = async (event)=>{
+  if(event.httpMethod==='OPTIONS') return ok({ok:true});
+  if(event.httpMethod!=='POST') return bad({ok:false,error:'method-not-allowed'});
+  const { message, products, warrantyRules } = parseJSON(event);
+  if(!message) return bad({ok:false,error:'missing-message'});
+
+  if(process.env.OPENAI_API_KEY){
+    try{
+      const res = await fetch('https://api.openai.com/v1/chat/completions', {
+        method:'POST',
+        headers:{'content-type':'application/json', authorization:`Bearer ${process.env.OPENAI_API_KEY}`},
+        body: JSON.stringify({
+          model:'gpt-4o-mini',
+          messages:[
+            {role:'system', content:'You are a concise UAE gaming storefront assistant.'},
+            {role:'user', content: String(message)}
+          ],
+          temperature:0.5
+        })
+      });
+      const out = await res.json();
+      const reply = out?.choices?.[0]?.message?.content;
+      if(reply) return ok({ok:true, reply});
+    }catch{}
+  }
+
+  return ok({ok:true, reply: demoReply(message, products, warrantyRules)});
+};
diff --git a/netlify/functions/createOrder.js b/netlify/functions/createOrder.js
index 2602b19..eda5ae3 100644
--- a/netlify/functions/createOrder.js
+++ b/netlify/functions/createOrder.js
@@ -1,41 +1,76 @@
-import { ok, bad, parseJSON } from './utils.js';
+import { ok, bad, parseJSON } from './_utils.js';
+import fs from 'fs';
+import path from 'path';
+
+function getWarrantyRules(){
+  try{
+    const p = path.join(process.cwd(), 'warrantyRules.json');
+    return JSON.parse(fs.readFileSync(p,'utf-8'));
+  }catch{
+    return {tiers:{}, exclusions:[]};
+  }
+}
+
+function warrantyPriceFor(product, extraMonths, rules){
+  const tier = rules?.tiers?.[product?.warrantyTier || 'C'];
+  if(!tier) return null;
+  const fixed = tier.fixed?.[String(extraMonths)];
+  if(typeof fixed==='number') return fixed;
+  const pct = tier.percent?.[String(extraMonths)];
+  if(typeof pct==='number'){
+    const raw = Number(product.price||0)*pct;
+    const min = Number(tier.min||0);
+    const max = Number(tier.max||Number.MAX_SAFE_INTEGER);
+    return Math.max(min, Math.min(max, Math.round(raw)));
+  }
+  return null;
+}
+
 
-// NEW: Fetch products from JSON (later we'll move to database)
 async function getProductPrices() {
-  // In your current setup, read products.json
-  const fs = require('fs');
-  const path = require('path');
-  const productsPath = path.join(__dirname, '../../products.json');
-  const data = JSON.parse(fs.readFileSync(productsPath, 'utf-8'));
-  return data;
+  const productsPath = path.join(process.cwd(), 'products.json');
+  const raw = fs.readFileSync(productsPath, 'utf-8');
+  const data = JSON.parse(raw);
+  return Array.isArray(data) ? data : [];
 }
 
 function calcTotals(items, promoCode, productCatalog) {
-  // VALIDATE: Check that prices match server-side catalog
   let subtotal = 0;
-  
+
+  const rules = getWarrantyRules();
   for (const item of items) {
-    const product = productCatalog.find(p => p.id === item.id);
-    
-    if (!product) {
-      throw new Error(`Invalid product: ${item.id}`);
+    const qty = Math.max(1, Math.min(99, Number(item.qty) || 1));
+
+    if(String(item?.meta?.type||'') === 'extended_warranty'){
+      const parent = productCatalog.find((p)=>p.id===item?.meta?.parentProductId);
+      if(!parent) throw new Error('Invalid warranty parent product');
+      const d = Number(item?.meta?.duration || 0);
+      const expected = warrantyPriceFor(parent, d, rules);
+      if(expected === null) throw new Error('Invalid warranty duration');
+      if(Math.abs(Number(item.price)-Number(expected))>0.01) throw new Error('Warranty price mismatch');
+      subtotal += Number(expected) * qty;
+      continue;
     }
-    
+
+    const product = productCatalog.find((p) => p.id === item.id);
+    if (!product) throw new Error(`Invalid product: ${item.id}`);
+    if (qty > Number(product.stock || 0)) throw new Error(`Insufficient stock for ${item.id}`);
+
     if (Math.abs(Number(item.price) - Number(product.price)) > 0.01) {
       throw new Error(`Price mismatch for ${item.id}. Expected ${product.price}, got ${item.price}`);
     }
-    
-    subtotal += Number(product.price) * Number(item.qty);
+
+    subtotal += Number(product.price) * qty;
   }
-  
-  const code = String(promoCode).trim().toUpperCase();
+
+  const code = String(promoCode || '').trim().toUpperCase();
   const promoEligible = code === 'AKA15' && subtotal >= 500;
   const discount = promoEligible ? subtotal * 0.15 : 0;
   const afterDiscount = Math.max(0, subtotal - discount);
   const vatWaived = afterDiscount >= 5000;
   const vat = vatWaived ? 0 : afterDiscount * 0.05;
   const total = afterDiscount + vat;
-  
+
   return {
     subtotal: round2(subtotal),
     discount: round2(discount),
@@ -43,7 +78,7 @@ function calcTotals(items, promoCode, productCatalog) {
     vatWaived,
     vat: round2(vat),
     total: round2(total),
-    promoApplied: promoEligible ? 'AKA15' : null
+    promoApplied: promoEligible ? 'AKA15' : null,
   };
 }
 
@@ -51,27 +86,58 @@ function round2(n) {
   return Math.round(Number(n) * 100) / 100;
 }
 
+async function saveOrderToSupabase(order) {
+  const url = process.env.SUPABASE_URL;
+  const key = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  if (!url || !key) return false;
+  const payload = {
+    orderid: order.orderId,
+    createdat: order.createdAt,
+    status: order.status,
+    deliverymode: order.deliveryMode,
+    promocode: order.promoCode || null,
+    totals: order.totals,
+    items: order.items,
+    customer: order.customer,
+  };
+  const res = await fetch(`${url}/rest/v1/orders`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json', apikey: key, Authorization: `Bearer ${key}`, Prefer: 'return=minimal' },
+    body: JSON.stringify(payload),
+  });
+  return res.ok;
+}
+
+async function sendEmail(order) {
+  const apiKey = process.env.RESEND_API_KEY;
+  const to = process.env.ORDER_NOTIFY_TO || order.customer?.email;
+  const from = process.env.ORDER_FROM_EMAIL || 'orders@akastore.netlify.app';
+  if (!apiKey || !to) return false;
+
+  const html = `<h2>New order ${order.orderId}</h2><p>Total: AED ${order.totals.total}</p><p>Customer: ${order.customer.name} (${order.customer.email || 'no email'})</p>`;
+  const res = await fetch('https://api.resend.com/emails', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json', Authorization: `Bearer ${apiKey}` },
+    body: JSON.stringify({ from, to: [to], subject: `Order ${order.orderId} confirmation`, html }),
+  });
+  return res.ok;
+}
+
 export const handler = async (event) => {
   if (event.httpMethod === 'OPTIONS') return ok({ ok: true });
   if (event.httpMethod !== 'POST') return bad({ ok: false, error: 'method-not-allowed' });
-  
+
   const { items, promoCode, customer, deliveryMode } = parseJSON(event);
-  
-  if (!Array.isArray(items) || !items.length) {
-    return bad({ ok: false, error: 'empty-cart' });
-  }
-  
-  if (!customer?.name || !customer?.phone) {
-    return bad({ ok: false, error: 'missing-customer' });
-  }
-  
+
+  if (!Array.isArray(items) || !items.length) return bad({ ok: false, error: 'empty-cart' });
+  if (items.length > 40) return bad({ ok: false, error: 'cart-too-large' });
+  if (!customer?.name || !customer?.phone) return bad({ ok: false, error: 'missing-customer' });
+
   try {
-    // NEW: Validate against product catalog
     const productCatalog = await getProductPrices();
     const totals = calcTotals(items, promoCode, productCatalog);
-    
+
     const orderId = `NG-${Math.floor(Math.random() * 900000) + 100000}`;
-    
     const order = {
       orderId,
       createdAt: new Date().toISOString(),
@@ -79,22 +145,20 @@ export const handler = async (event) => {
       deliveryMode: deliveryMode === 'delivery' ? 'delivery' : 'pickup',
       promoCode: totals.promoApplied,
       totals,
-      items,
+      items: items.map((i) => ({ ...i, qty: Math.max(1, Math.min(99, Number(i.qty) || 1)) })),
       customer: {
-        name: String(customer.name).trim(),
-        phone: String(customer.phone).trim(),
-        email: String(customer.email || '').trim(),
-        address: String(customer.address || '').trim()
-      }
+        name: String(customer.name).trim().slice(0, 100),
+        phone: String(customer.phone).trim().slice(0, 40),
+        email: String(customer.email || '').trim().slice(0, 120),
+        address: String(customer.address || '').trim().slice(0, 240),
+      },
     };
-    
-    // Send email (existing code)
-    // ...
-    
-    return ok({ ok: true, order });
-    
+
+    const stored = await saveOrderToSupabase(order);
+    const emailSent = await sendEmail(order);
+    return ok({ ok: true, order, stored, emailSent });
   } catch (error) {
     console.error('Validation error:', error);
-    return bad({ ok: false, error: error.message });
+    return bad({ ok: false, error: error.message || 'validation-failed' });
   }
 };
diff --git a/netlify/functions/createPaymentIntent.js b/netlify/functions/createPaymentIntent.js
new file mode 100644
index 0000000..dd6d9b2
--- /dev/null
+++ b/netlify/functions/createPaymentIntent.js
@@ -0,0 +1,12 @@
+import { ok, bad, parseJSON } from './_utils.js';
+
+export const handler = async (event)=>{
+  if(event.httpMethod==='OPTIONS') return ok({ok:true});
+  if(event.httpMethod!=='POST') return bad({ok:false,error:'method-not-allowed'});
+  const { orderId, amount, method } = parseJSON(event);
+  if(!orderId || !amount) return bad({ok:false,error:'missing-order'});
+
+  // Demo-first payment intent
+  const payment_url = `/payment-demo.html?orderId=${encodeURIComponent(orderId)}&amount=${encodeURIComponent(amount)}&method=${encodeURIComponent(method||'cod')}`;
+  return ok({ ok:true, mode:'demo', status:'pending_payment', payment_url });
+};
diff --git a/netlify/functions/markOrderPaid.js b/netlify/functions/markOrderPaid.js
new file mode 100644
index 0000000..0be35c0
--- /dev/null
+++ b/netlify/functions/markOrderPaid.js
@@ -0,0 +1,22 @@
+import { ok, bad, parseJSON } from './_utils.js';
+
+export const handler = async (event)=>{
+  if(event.httpMethod==='OPTIONS') return ok({ok:true});
+  if(event.httpMethod!=='POST') return bad({ok:false,error:'method-not-allowed'});
+  const { orderId } = parseJSON(event);
+  if(!orderId) return bad({ok:false,error:'missing-order-id'});
+
+  const url = process.env.SUPABASE_URL;
+  const key = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  if(url && key){
+    try{
+      await fetch(`${url}/rest/v1/orders?orderid=eq.${encodeURIComponent(orderId)}`, {
+        method:'PATCH',
+        headers:{'content-type':'application/json',apikey:key,Authorization:`Bearer ${key}`},
+        body: JSON.stringify({ status:'paid' })
+      });
+    }catch{}
+  }
+
+  return ok({ok:true, orderId, status:'paid'});
+};
diff --git a/netlify/functions/notifyCapture.js b/netlify/functions/notifyCapture.js
new file mode 100644
index 0000000..0b26e8b
--- /dev/null
+++ b/netlify/functions/notifyCapture.js
@@ -0,0 +1,41 @@
+import { ok, bad, parseJSON } from './_utils.js';
+
+async function saveSupabaseNotify(payload) {
+  const url = process.env.SUPABASE_URL;
+  const key = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  if (!url || !key) return false;
+
+  const res = await fetch(`${url}/rest/v1/notify_requests`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+      apikey: key,
+      Authorization: `Bearer ${key}`,
+      Prefer: 'return=minimal',
+    },
+    body: JSON.stringify(payload),
+  });
+  return res.ok;
+}
+
+export const handler = async (event) => {
+  if (event.httpMethod === 'OPTIONS') return ok({ ok: true });
+  if (event.httpMethod !== 'POST') return bad({ ok: false, error: 'method-not-allowed' });
+
+  const { productId, sku, email, phone, preferredContact } = parseJSON(event);
+  if (!productId || !email || !String(email).includes("@")) {
+    return bad({ ok: false, error: "invalid-payload" });
+  }
+
+  const payload = {
+    productid: String(productId).trim().slice(0, 80),
+    sku: String(sku || "").trim().slice(0, 80),
+    email: String(email).trim().slice(0, 120),
+    phone: String(phone || "").trim().slice(0, 40),
+    preferredcontact: String(preferredContact || "email").trim().slice(0, 20),
+    createdat: new Date().toISOString(),
+  };
+
+  const stored = await saveSupabaseNotify(payload);
+  return ok({ ok: true, stored });
+};
diff --git a/netlify/functions/ordersList.js b/netlify/functions/ordersList.js
new file mode 100644
index 0000000..50042fc
--- /dev/null
+++ b/netlify/functions/ordersList.js
@@ -0,0 +1,39 @@
+import { ok, bad, unauth } from './_utils.js';
+import jwt from 'jsonwebtoken';
+
+async function fetchSupabaseOrders() {
+  const url = process.env.SUPABASE_URL;
+  const key = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  if (!url || !key) return [];
+
+  const res = await fetch(`${url}/rest/v1/orders?select=*&order=createdat.desc&limit=200`, {
+    headers: { apikey: key, Authorization: `Bearer ${key}` },
+  });
+  if (!res.ok) throw new Error('orders-fetch-failed');
+  return res.json();
+}
+
+export const handler = async (event) => {
+  if (event.httpMethod === 'OPTIONS') return ok({ ok: true });
+  if (event.httpMethod !== 'GET') return bad({ ok: false, error: 'method-not-allowed' });
+
+  const auth = event.headers.authorization || '';
+  const token = auth.startsWith('Bearer ') ? auth.slice(7) : '';
+  if (!token) return unauth({ ok: false, error: 'missing-token' });
+
+  const jwtSecret = process.env.JWT_SECRET;
+  if (!jwtSecret) return bad({ ok: false, error: 'server-not-configured' });
+
+  try {
+    jwt.verify(token, jwtSecret);
+  } catch {
+    return unauth({ ok: false, error: 'invalid-token' });
+  }
+
+  try {
+    const orders = await fetchSupabaseOrders();
+    return ok({ ok: true, orders });
+  } catch (err) {
+    return bad({ ok: false, error: err.message || 'orders-list-failed' });
+  }
+};
diff --git a/netlify/functions/updateOrderStatus.js b/netlify/functions/updateOrderStatus.js
new file mode 100644
index 0000000..61d09d4
--- /dev/null
+++ b/netlify/functions/updateOrderStatus.js
@@ -0,0 +1,22 @@
+import { ok, bad, parseJSON } from './_utils.js';
+
+export const handler = async (event)=>{
+  if(event.httpMethod==='OPTIONS') return ok({ok:true});
+  if(event.httpMethod!=='POST') return bad({ok:false,error:'method-not-allowed'});
+  const { orderId, status } = parseJSON(event);
+  if(!orderId || !status) return bad({ok:false,error:'missing-fields'});
+
+  // Optional Supabase sync
+  const url = process.env.SUPABASE_URL;
+  const key = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  if(url && key){
+    try{
+      await fetch(`${url}/rest/v1/orders?orderid=eq.${encodeURIComponent(orderId)}`, {
+        method:'PATCH',
+        headers:{'content-type':'application/json',apikey:key,Authorization:`Bearer ${key}`},
+        body: JSON.stringify({ status })
+      });
+    }catch{}
+  }
+  return ok({ok:true, orderId, status});
+};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..f1140b3
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "nexus-storefront",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "validate-assets": "node scripts/validate-assets.mjs && node scripts/audit-links.mjs",
+    "test:e2e": "playwright test",
+    "build": "node -e \"console.log('Static site: no build step required')\"",
+    "audit-links": "node scripts/audit-links.mjs"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.54.2"
+  }
+}
diff --git a/partials/footer.html b/partials/footer.html
new file mode 100644
index 0000000..536c951
--- /dev/null
+++ b/partials/footer.html
@@ -0,0 +1,16 @@
+<footer class="footer" data-partial="footer">
+  <div class="container footer-grid">
+    <div>
+      <div class="brand small"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></div>
+      <div class="hint">Online store • WhatsApp: +971 50 505 8609</div>
+      <div class="small" style="margin-top:8px;">Designed with premium glass UI, mobile-first checkout, and resilient demo-mode backend flows.</div>
+    </div>
+    <div class="row">
+      <a class="pill" href="./about.html">About</a>
+      <a class="pill" href="./warranty.html">Warranty</a>
+      <a class="pill" href="./changelog.html">Changelog</a>
+      <a class="pill" href="./build.html">Build PC</a>
+      <a class="pill" href="./health.html">Health</a>
+    </div>
+  </div>
+</footer>
diff --git a/partials/header.html b/partials/header.html
new file mode 100644
index 0000000..48662a2
--- /dev/null
+++ b/partials/header.html
@@ -0,0 +1,27 @@
+<header class="nav" data-partial="header">
+  <div class="top-strip">
+    <div class="container top-strip-inner">
+      <span class="badge neo">Apple-like redesign</span>
+      <span>Free UAE shipping over AED 499 • Express support 10am–10pm</span>
+      <button class="pill top-strip-action" type="button" id="openQuickNav" aria-label="Open quick navigation">Quick menu ⌘K</button>
+    </div>
+  </div>
+  <div class="container nav-inner">
+    <a class="brand" data-testid="nav-brand" href="./index.html" aria-label="Home"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
+    <nav class="nav-links" aria-label="Primary">
+      <a data-testid="nav-home" href="./index.html" data-nav="home">Home</a>
+      <a data-testid="nav-products" href="./products.html" data-nav="products">Products</a>
+      <a data-testid="nav-services" href="./services.html" data-nav="services">Services & Fixing</a>
+      <a data-testid="nav-blog" href="./blog.html" data-nav="blog">Blog</a>
+      <a data-testid="nav-build" href="./build.html" data-nav="build">Build PC</a>
+      <a data-testid="nav-warranty" href="./warranty.html" data-nav="warranty">Warranty</a>
+      <a data-testid="nav-contact" href="./contact.html" data-nav="contact">Contact</a>
+      <a data-testid="nav-admin" href="./admin.html" class="badge neo" data-nav="admin">Admin</a>
+    </nav>
+    <div class="nav-actions">
+      <a class="icon-btn" data-testid="nav-whatsapp" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">WhatsApp</span></a>
+      <a class="icon-btn" data-testid="nav-cart" href="./checkout.html" aria-label="Cart"><span>Cart</span> <span class="badge" id="cartCount">0</span></a>
+      <button class="icon-btn" data-testid="nav-theme" id="themeToggle" type="button" aria-label="Toggle theme"></button>
+    </div>
+  </div>
+</header>
diff --git a/payment-demo.html b/payment-demo.html
new file mode 100644
index 0000000..f90c054
--- /dev/null
+++ b/payment-demo.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en" data-theme="dark"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Payment Demo</title><link rel="stylesheet" href="./style.css"/></head><body><main class="container" style="padding:20px 18px 0;"><div class="card" style="padding:16px;"><h1 class="h1" style="font-size:26px;">Demo Payment</h1><div id="payMeta" class="small"></div><div class="space"></div><button class="btn primary" id="payNow" type="button">Pay (Demo)</button><a class="btn" href="./checkout.html">Back</a></div></main><div id="toast" class="toast"></div><script type="module">import { boot, toast, escapeHtml } from './script.js';boot();const u=new URL(location.href);const orderId=u.searchParams.get('orderId')||'';const method=u.searchParams.get('method')||'card';const amount=u.searchParams.get('amount')||'0';document.getElementById('payMeta').innerHTML=`Order: <b>${escapeHtml(orderId)}</b><br/>Method: ${escapeHtml(method)}<br/>Amount: AED ${escapeHtml(amount)}`;document.getElementById('payNow').addEventListener('click', async ()=>{try{await fetch('/.netlify/functions/markOrderPaid',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({orderId,status:'paid'})});}catch{};let orders=[];try{orders=JSON.parse(localStorage.getItem('nexus_orders_v1')||'[]');}catch{};orders=orders.map(o=>o.orderId===orderId?{...o,status:'paid'}:o);localStorage.setItem('nexus_orders_v1',JSON.stringify(orders));toast('Payment successful (demo).');setTimeout(()=>location.href='./checkout.html#track',800);});</script></body></html>
diff --git a/payment.js b/payment.js
index 4a2da35..88a744d 100644
--- a/payment.js
+++ b/payment.js
@@ -35,6 +35,7 @@ export async function startCheckout({promoCode, customer, deliveryMode}){
   // Create order via Netlify Functions when available (recommended).
   // Fallback to client-only order for local preview.
   let serverOrder = null;
+  let emailSent = null;
   try{
     const res = await fetch('/.netlify/functions/createOrder', {
       method:'POST',
@@ -43,7 +44,10 @@ export async function startCheckout({promoCode, customer, deliveryMode}){
     });
     if(res.ok){
       const out = await res.json();
-      if(out?.ok && out?.order) serverOrder = out.order;
+      if(out?.ok && out?.order){
+        serverOrder = out.order;
+        emailSent = typeof out.emailSent === 'boolean' ? out.emailSent : null;
+      }
     }
   }catch{}
 
@@ -69,7 +73,7 @@ export async function startCheckout({promoCode, customer, deliveryMode}){
 
   clearCart();
 
-  return { orderId, totals: order.totals, paymentLink: link };
+  return { orderId, totals: order.totals, paymentLink: link, emailSent };
 }
 
 export function renderInvoiceHTML(order){
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..ef7ae83
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  timeout: 30000,
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    headless: true,
+  },
+  webServer: {
+    command: 'python -m http.server 4173',
+    port: 4173,
+    reuseExistingServer: true,
+  },
+});
diff --git a/products.html b/products.html
index 6b5774f..0e27dad 100644
--- a/products.html
+++ b/products.html
@@ -5,26 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Products — Nexus Gaming UAE</title>
   <link rel="stylesheet" href="./style.css" />
+  <meta name="description" content="Products — Nexus Gaming UAE - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Products — Nexus Gaming UAE" />
+  <meta property="og:description" content="Products — Nexus Gaming UAE - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/products.html" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html" class="badge neo">Products</a>
-        <a href="./services.html">Services & Fixing</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./warranty.html">Warranty</a>
-        <a href="./contact.html">Contact</a>
-        <a href="./admin.html" class="badge neo">Admin</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">WhatsApp</span></a>
-        <a class="icon-btn" href="./checkout.html"><span>Cart</span> <span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme"></button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="container" style="padding: 20px 18px 0;">
     <div class="card" style="padding:16px;">
@@ -65,6 +53,16 @@ <h1 class="h1" style="font-size:28px; margin-top:10px;">Products</h1>
           <div class="label">Max price (AED)</div>
           <input id="max" class="input" type="number" min="0" step="1" placeholder="e.g., 1000" />
         </div>
+        <div class="field">
+          <div class="label">Sort</div>
+          <select id="sort" class="select">
+            <option value="featured">Featured</option>
+            <option value="priceAsc">Price: low to high</option>
+            <option value="priceDesc">Price: high to low</option>
+            <option value="ratingDesc">Top rated</option>
+            <option value="titleAsc">Name A-Z</option>
+          </select>
+        </div>
         <button id="clear" class="btn">Clear</button>
       </div>
     </div>
@@ -112,10 +110,22 @@ <h3>Notify me when in stock</h3>
         <div class="space"></div>
         <form class="form" id="notifyForm">
           <input type="hidden" name="productId" id="notifyProductId" />
+          <input type="hidden" name="sku" id="notifySku" />
           <div class="field">
             <div class="label">Email</div>
             <input class="input" type="email" name="email" required placeholder="you@email.com" />
           </div>
+          <div class="field">
+            <div class="label">Phone (optional)</div>
+            <input class="input" type="text" name="phone" placeholder="+971..." />
+          </div>
+          <div class="field">
+            <div class="label">Preferred contact</div>
+            <select class="select" name="preferredContact">
+              <option value="email">Email</option>
+              <option value="whatsapp">WhatsApp</option>
+            </select>
+          </div>
           <button class="btn primary" type="submit">Save</button>
         </form>
       </div>
@@ -125,7 +135,7 @@ <h3>Notify me when in stock</h3>
   <div id="toast" class="toast" role="status" aria-live="polite"></div>
 
   <script type="module">
-    import { boot, toast, openModal } from './script.js';
+    import { boot, toast, openModal, escapeHtml, fetchJSON, debounce, productImage } from './script.js';
     import { addToCart, formatAED, loadSaved, saveForLater, moveSavedToCart } from './cart.js';
 
     boot();
@@ -137,6 +147,7 @@ <h3>Notify me when in stock</h3>
     const brand = document.getElementById('brand');
     const stock = document.getElementById('stock');
     const max = document.getElementById('max');
+    const sort = document.getElementById('sort');
     const clear = document.getElementById('clear');
 
     const pmTitle = document.getElementById('pmTitle');
@@ -144,6 +155,26 @@ <h3>Notify me when in stock</h3>
 
     const notifyForm = document.getElementById('notifyForm');
     const notifyProductId = document.getElementById('notifyProductId');
+    const notifySku = document.getElementById('notifySku');
+
+    const params = new URLSearchParams(location.search);
+    const initialBrand = params.get('brand') || '';
+    q.value = params.get('q') || '';
+    stock.value = params.get('stock') || '';
+    max.value = params.get('max') || '';
+    sort.value = params.get('sort') || 'featured';
+
+    function syncUrlState(){
+      const next = new URLSearchParams();
+      if(q.value.trim()) next.set('q', q.value.trim());
+      if(brand.value) next.set('brand', brand.value);
+      if(stock.value) next.set('stock', stock.value);
+      if(max.value.trim()) next.set('max', max.value.trim());
+      if(sort.value && sort.value !== 'featured') next.set('sort', sort.value);
+      const query = next.toString();
+      const nextUrl = `${location.pathname}${query ? `?${query}` : ''}${location.hash || ''}`;
+      history.replaceState(null, '', nextUrl);
+    }
 
     function stockBadge(p){
       if(p.stock === 0) return '<span class="badge red">Out of stock</span>';
@@ -167,12 +198,12 @@ <h3>Notify me when in stock</h3>
       return `
         <article class="prod" id="${p.id}">
           <div class="row" style="justify-content:space-between;">
-            <span class="badge">${p.category}</span>
+            <span class="badge">${escapeHtml(p.category)}</span>
             ${stockBadge(p)}
           </div>
-          <div class="prod-img"><img alt="${p.title}" loading="lazy" src="${p.image}" onerror="this.onerror=null;this.src='./assets/placeholder.svg';"></div>
-          <div class="prod-title">${p.title}</div>
-          <div class="prod-meta">Brand: <b>${p.brand}</b> • SKU: <span class="mono">${p.sku}</span></div>
+          <div class="prod-img"><img alt="${escapeHtml(p.title)}" loading="lazy" src="${productImage(p)}" onerror="this.onerror=null;this.src='./assets/placeholder.svg';"></div>
+          <div class="prod-title">${escapeHtml(p.title)}</div>
+          <div class="prod-meta">Brand: <b>${escapeHtml(p.brand)}</b> • SKU: <span class="mono">${escapeHtml(p.sku)}</span></div>
           <div class="prod-price">
             <div class="price">${formatAED(p.price)}</div>
             <span class="badge">★ ${p.rating}</span>
@@ -197,10 +228,21 @@ <h3>Notify me when in stock</h3>
 
     let items = [];
 
+
+    function sortItems(list, mode){
+      const copy = [...list];
+      if(mode === 'priceAsc') return copy.sort((a,b)=>Number(a.price)-Number(b.price));
+      if(mode === 'priceDesc') return copy.sort((a,b)=>Number(b.price)-Number(a.price));
+      if(mode === 'ratingDesc') return copy.sort((a,b)=>Number(b.rating)-Number(a.rating));
+      if(mode === 'titleAsc') return copy.sort((a,b)=>String(a.title).localeCompare(String(b.title)));
+      return copy;
+    }
+
     function render(){
       const filters = { q: q.value.trim(), brand: brand.value, stock: stock.value, max: max.value.trim() };
-      const out = items.filter(p=>matches(p, filters));
+      const out = sortItems(items.filter(p=>matches(p, filters)), sort.value);
       grid.innerHTML = out.map(productCard).join('') || '<div class="mini">No matches.</div>';
+      syncUrlState();
 
       grid.querySelectorAll('[data-add]').forEach(btn=>{
         btn.addEventListener('click', ()=>{
@@ -226,9 +268,19 @@ <h3>Notify me when in stock</h3>
       grid.querySelectorAll('[data-notify]').forEach(btn=>{
         btn.addEventListener('click', ()=>{
           notifyProductId.value = btn.dataset.notify;
+          const pp = items.find(x=>x.id===btn.dataset.notify);
+          notifySku.value = pp?.sku || pp?.id || '';
           openModal('notifyModal');
         });
       });
+      grid.querySelectorAll('.prod').forEach(cardEl=>{
+        cardEl.addEventListener('click', (e)=>{
+          if(e.target.closest('button,a,input,select,textarea,label')) return;
+          const id = cardEl.id;
+          if(id) openProduct(id);
+        });
+      });
+
 
       // Jump highlight if anchor
       if(location.hash){
@@ -243,20 +295,20 @@ <h3>Notify me when in stock</h3>
       pmTitle.textContent = p.title;
       pmBody.innerHTML = `
         <div class="row" style="justify-content:space-between;">
-          <div class="row"><span class="badge">${p.category}</span>${stockBadge(p)}</div>
+          <div class="row"><span class="badge">${escapeHtml(p.category)}</span>${stockBadge(p)}</div>
           <div class="price">${formatAED(p.price)}</div>
         </div>
         <div class="space"></div>
-        <div class="prod-img" style="height:220px;"><img alt="${p.title}" src="${p.image}" onerror="this.onerror=null;this.src='./assets/placeholder.svg';"></div>
+        <div class="prod-img" style="height:220px;"><img alt="${escapeHtml(p.title)}" src="${productImage(p)}" onerror="this.onerror=null;this.src='./assets/placeholder.svg';"></div>
         <div class="space"></div>
-        <div class="small"><b>Brand:</b> ${p.brand} • <b>SKU:</b> <span class="mono">${p.sku}</span></div>
+        <div class="small"><b>Brand:</b> ${escapeHtml(p.brand)} • <b>SKU:</b> <span class="mono">${escapeHtml(p.sku)}</span></div>
         <div class="space"></div>
         <div class="small"><b>Specs</b></div>
         <ul class="small" style="margin:8px 0 0 18px; color: var(--muted);">
-          ${(p.specs||[]).map(s=>`<li>${s}</li>`).join('')}
+          ${(p.specs||[]).map(s=>`<li>${escapeHtml(s)}</li>`).join('')}
         </ul>
         <div class="hr"></div>
-        <div class="small"><b>Warranty</b>: ${p.warranty || 'Standard store policy.'}</div>
+        <div class="small"><b>Warranty</b>: ${escapeHtml(p.warranty || 'Standard store policy.')}</div>
         <div class="space"></div>
         <div class="row">
           <button class="btn primary" id="pmAdd" ${p.stock===0?'disabled':''}>Add to cart</button>
@@ -280,10 +332,10 @@ <h3>Notify me when in stock</h3>
         <article class="prod">
           <div class="row" style="justify-content:space-between;">
             <span class="badge">Saved</span>
-            <span class="badge">${p.category||p.brand||''}</span>
+            <span class="badge">${escapeHtml(p.category||p.brand||'')}</span>
           </div>
-          <div class="prod-img"><img alt="${p.title}" loading="lazy" src="${p.image}" onerror="this.onerror=null;this.src='./assets/placeholder.svg';"></div>
-          <div class="prod-title">${p.title}</div>
+          <div class="prod-img"><img alt="${escapeHtml(p.title)}" loading="lazy" src="${productImage(p)}" onerror="this.onerror=null;this.src='./assets/placeholder.svg';"></div>
+          <div class="prod-title">${escapeHtml(p.title)}</div>
           <div class="prod-price">
             <div class="price">${formatAED(p.price)}</div>
             <span class="badge">Qty: ${p.qty||1}</span>
@@ -305,8 +357,11 @@ <h3>Notify me when in stock</h3>
 
     async function load(){
       skeletons(9);
-      const res = await fetch('./products.json', {cache:'no-store'});
-      items = await res.json();
+      items = await fetchJSON('./products.json', {timeoutMs: 6000, fallback: []});
+      if(!items.length){
+        grid.innerHTML = '<div class="mini">Unable to load products right now. Please refresh.</div>';
+        return;
+      }
 
       // Populate brand select
       const brands = [...new Set(items.map(x=>x.brand))].sort();
@@ -315,25 +370,41 @@ <h3>Notify me when in stock</h3>
         o.value = b; o.textContent = b;
         brand.appendChild(o);
       });
+      if(initialBrand && brands.includes(initialBrand)) brand.value = initialBrand;
 
       render();
       renderSaved();
     }
 
-    [q, brand, stock, max].forEach(el=> el.addEventListener('input', render));
-    clear.addEventListener('click', ()=>{ q.value=''; brand.value=''; stock.value=''; max.value=''; render(); });
+    const renderDebounced = debounce(render, 120);
+    [q, brand, stock, max].forEach(el=> el.addEventListener('input', renderDebounced));
+    sort.addEventListener('change', render);
+    clear.addEventListener('click', ()=>{ q.value=''; brand.value=''; stock.value=''; max.value=''; sort.value='featured'; render(); });
 
-    notifyForm.addEventListener('submit', (e)=>{
+    notifyForm.addEventListener('submit', async (e)=>{
       e.preventDefault();
       const id = notifyProductId.value;
-      const email = new FormData(notifyForm).get('email');
-      const key = 'nexus_notify_v1';
-      let arr = [];
-      try{ arr = JSON.parse(localStorage.getItem(key) || '[]'); }catch{}
-      arr.push({productId:id, email, createdAt:new Date().toISOString()});
-      localStorage.setItem(key, JSON.stringify(arr));
+      const fd = new FormData(notifyForm);
+      const email = fd.get('email');
+      const phone = fd.get('phone');
+      const preferredContact = fd.get('preferredContact');
+      const sku = fd.get('sku');
+      try{
+        const res = await fetch('/.netlify/functions/notifyCapture', {
+          method:'POST',
+          headers:{'content-type':'application/json'},
+          body: JSON.stringify({productId:id, sku, email, phone, preferredContact})
+        });
+        if(!res.ok) throw new Error('notify-failed');
+      }catch{
+        const key = 'nexus_notify_v1';
+        let arr = [];
+        try{ arr = JSON.parse(localStorage.getItem(key) || '[]'); }catch{}
+        arr.push({productId:id, sku, email, phone, preferredContact, createdAt:new Date().toISOString()});
+        localStorage.setItem(key, JSON.stringify(arr));
+      }
       notifyForm.reset();
-      toast('Saved. We will notify you (placeholder).');
+      toast('Saved. We will notify you when stock is available.');
       document.querySelector('[data-close="notifyModal"]').click();
     });
 
diff --git a/products.json b/products.json
index 0f02314..1d93851 100644
--- a/products.json
+++ b/products.json
@@ -8,9 +8,21 @@
     "price": 2699,
     "stock": 4,
     "rating": 4.7,
-    "image": "https://images.unsplash.com/photo-1624701928512-33b3b8f6f52b?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["12GB GDDR6X", "DLSS 3", "Ray Tracing", "Ideal for 1440p"],
-    "warranty": "Manufacturer warranty (varies by brand) + Nexus handling support."
+    "image": "./assets/products/gpu-rtx4070s.svg",
+    "specs": [
+      "12GB GDDR6X",
+      "DLSS 3",
+      "Ray Tracing",
+      "Ideal for 1440p"
+    ],
+    "warranty": "Manufacturer warranty (varies by brand) + Nexus handling support.",
+    "image_fallback_svg": "./assets/products/gpu-rtx4070s.svg",
+    "image_main": "",
+    "gpuTier": "high",
+    "recommendedPsuW": 750,
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "B"
   },
   {
     "id": "gpu-rx7800xt",
@@ -21,9 +33,21 @@
     "price": 2299,
     "stock": 7,
     "rating": 4.6,
-    "image": "https://images.unsplash.com/photo-1624701928512-33b3b8f6f52b?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["16GB GDDR6", "Great 1440p", "AV1 encode", "Smart Access Memory"],
-    "warranty": "Manufacturer warranty (varies)."
+    "image": "./assets/products/gpu-rx7800xt.svg",
+    "specs": [
+      "16GB GDDR6",
+      "Great 1440p",
+      "AV1 encode",
+      "Smart Access Memory"
+    ],
+    "warranty": "Manufacturer warranty (varies).",
+    "image_fallback_svg": "./assets/products/gpu-rx7800xt.svg",
+    "image_main": "",
+    "gpuTier": "mid",
+    "recommendedPsuW": 650,
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "B"
   },
   {
     "id": "cpu-7800x3d",
@@ -34,9 +58,19 @@
     "price": 1699,
     "stock": 5,
     "rating": 4.9,
-    "image": "https://images.unsplash.com/photo-1612810436589-05d0a30f6911?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["8C/16T", "3D V-Cache", "Best-in-class gaming"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/cpu-7800x3d.svg",
+    "specs": [
+      "8C/16T",
+      "3D V-Cache",
+      "Best-in-class gaming"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/cpu-7800x3d.svg",
+    "image_main": "",
+    "socket": "AM5",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "B"
   },
   {
     "id": "cpu-i7-14700k",
@@ -47,9 +81,18 @@
     "price": 1799,
     "stock": 3,
     "rating": 4.7,
-    "image": "https://images.unsplash.com/photo-1612810436589-05d0a30f6911?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["20 cores (8P+12E)", "Excellent productivity + gaming"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/cpu-i7-14700k.svg",
+    "specs": [
+      "20 cores (8P+12E)",
+      "Excellent productivity + gaming"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/cpu-i7-14700k.svg",
+    "image_main": "",
+    "socket": "LGA1700",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "B"
   },
   {
     "id": "ram-32gb-ddr5",
@@ -60,9 +103,18 @@
     "price": 499,
     "stock": 12,
     "rating": 4.6,
-    "image": "https://images.unsplash.com/photo-1613024169876-91dbd17f5ea8?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["6000MT/s", "Low latency", "XMP/EXPO compatible"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/ram-32gb-ddr5.svg",
+    "specs": [
+      "6000MT/s",
+      "Low latency",
+      "XMP/EXPO compatible"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/ram-32gb-ddr5.svg",
+    "image_main": "",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "A"
   },
   {
     "id": "ssd-1tb-nvme",
@@ -73,9 +125,18 @@
     "price": 399,
     "stock": 18,
     "rating": 4.8,
-    "image": "https://images.unsplash.com/photo-1587202372775-e229f172b9d4?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["Up to 7,000MB/s", "Gen4", "Great for OS + games"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/ssd-1tb-nvme.svg",
+    "specs": [
+      "Up to 7,000MB/s",
+      "Gen4",
+      "Great for OS + games"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/ssd-1tb-nvme.svg",
+    "image_main": "",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "A"
   },
   {
     "id": "psu-850w-gold",
@@ -86,9 +147,19 @@
     "price": 549,
     "stock": 9,
     "rating": 4.7,
-    "image": "https://images.unsplash.com/photo-1587202372775-e229f172b9d4?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["Fully modular", "80+ Gold", "Quiet fan profile"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/psu-850w-gold.svg",
+    "specs": [
+      "Fully modular",
+      "80+ Gold",
+      "Quiet fan profile"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/psu-850w-gold.svg",
+    "image_main": "",
+    "psuWatt": 850,
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "B"
   },
   {
     "id": "case-mid-tower",
@@ -99,9 +170,18 @@
     "price": 389,
     "stock": 6,
     "rating": 4.5,
-    "image": "https://images.unsplash.com/photo-1587202372775-e229f172b9d4?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["Mesh front", "ARGB ready", "Good cable management"],
-    "warranty": "Standard store warranty for defects on arrival."
+    "image": "./assets/products/case-mid-tower.svg",
+    "specs": [
+      "Mesh front",
+      "ARGB ready",
+      "Good cable management"
+    ],
+    "warranty": "Standard store warranty for defects on arrival.",
+    "image_fallback_svg": "./assets/products/case-mid-tower.svg",
+    "image_main": "",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "A"
   },
   {
     "id": "cooler-240-aio",
@@ -112,9 +192,18 @@
     "price": 449,
     "stock": 8,
     "rating": 4.4,
-    "image": "https://images.unsplash.com/photo-1624701928512-33b3b8f6f52b?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["240mm radiator", "Low noise", "ARGB"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/cooler-240-aio.svg",
+    "specs": [
+      "240mm radiator",
+      "Low noise",
+      "ARGB"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/cooler-240-aio.svg",
+    "image_main": "",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "A"
   },
   {
     "id": "mobo-b650",
@@ -125,9 +214,20 @@
     "price": 699,
     "stock": 7,
     "rating": 4.5,
-    "image": "https://images.unsplash.com/photo-1613024169876-91dbd17f5ea8?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["AM5", "PCIe 4.0", "Wi‑Fi", "2.5G LAN"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/mobo-b650.svg",
+    "specs": [
+      "AM5",
+      "PCIe 4.0",
+      "Wi‑Fi",
+      "2.5G LAN"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/mobo-b650.svg",
+    "image_main": "",
+    "socket": "AM5",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "B"
   },
   {
     "id": "kb-mech",
@@ -138,9 +238,18 @@
     "price": 329,
     "stock": 14,
     "rating": 4.4,
-    "image": "https://images.unsplash.com/photo-1612198188060-c7c2a3b2a0bd?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["Hot‑swap switches", "RGB", "USB‑C"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/kb-mech.svg",
+    "specs": [
+      "Hot‑swap switches",
+      "RGB",
+      "USB‑C"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/kb-mech.svg",
+    "image_main": "",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "A"
   },
   {
     "id": "mouse-pro",
@@ -151,9 +260,18 @@
     "price": 249,
     "stock": 20,
     "rating": 4.6,
-    "image": "https://images.unsplash.com/photo-1615663245857-ac93bb7c39e7?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["Low latency", "Adjustable DPI", "Lightweight"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/mouse-pro.svg",
+    "specs": [
+      "Low latency",
+      "Adjustable DPI",
+      "Lightweight"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/mouse-pro.svg",
+    "image_main": "",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "A"
   },
   {
     "id": "headset-7-1",
@@ -164,9 +282,18 @@
     "price": 279,
     "stock": 11,
     "rating": 4.3,
-    "image": "https://images.unsplash.com/photo-1599669454699-248893623440?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["7.1 surround", "Noise isolation", "Detachable mic"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/headset-7-1.svg",
+    "specs": [
+      "7.1 surround",
+      "Noise isolation",
+      "Detachable mic"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/headset-7-1.svg",
+    "image_main": "",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "A"
   },
   {
     "id": "monitor-27-165",
@@ -177,9 +304,19 @@
     "price": 999,
     "stock": 2,
     "rating": 4.5,
-    "image": "https://images.unsplash.com/photo-1587825140400-7d48a1127f5b?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["2560×1440", "165Hz", "1ms", "Adaptive Sync"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/monitor-27-165.svg",
+    "specs": [
+      "2560×1440",
+      "165Hz",
+      "1ms",
+      "Adaptive Sync"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/monitor-27-165.svg",
+    "image_main": "",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "A"
   },
   {
     "id": "chair-ergonomic",
@@ -190,8 +327,17 @@
     "price": 1199,
     "stock": 5,
     "rating": 4.2,
-    "image": "https://images.unsplash.com/photo-1598550476439-6847785fcea6?auto=format&fit=crop&w=1200&q=80",
-    "specs": ["Lumbar support", "Adjustable armrests", "Recline"],
-    "warranty": "Manufacturer warranty."
+    "image": "./assets/products/chair-ergonomic.svg",
+    "specs": [
+      "Lumbar support",
+      "Adjustable armrests",
+      "Recline"
+    ],
+    "warranty": "Manufacturer warranty.",
+    "image_fallback_svg": "./assets/products/chair-ergonomic.svg",
+    "image_main": "",
+    "eligibleExtendedWarranty": true,
+    "baseWarrantyMonths": 12,
+    "warrantyTier": "A"
   }
 ]
diff --git a/robots.txt b/robots.txt
new file mode 100644
index 0000000..8d97e95
--- /dev/null
+++ b/robots.txt
@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Sitemap: https://akastore.netlify.app/sitemap.xml
diff --git a/script.js b/script.js
index db1c154..4338c6d 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,6 @@
+import { initChat } from './js/pages/chat.js';
 import { cartCount } from './cart.js';
+import { initGlobalUXEnhancementsExtended } from './js/lib/ux-enhancements.js';
 
 export const WHATSAPP_NUMBER = '+971505058609';
 
@@ -13,6 +15,11 @@ export function toast(msg){
   setTimeout(()=> el.classList.remove('show'), 2200);
 }
 
+window.addEventListener('toast:show', (e)=>{
+  if(e?.detail) toast(String(e.detail));
+});
+
+
 export function setCartCount(){
   const el = $('#cartCount');
   if(el) el.textContent = String(cartCount());
@@ -41,6 +48,194 @@ export function initTheme(){
   });
 }
 
+
+export function initMobileNav(){
+  const nav = document.querySelector('.nav');
+  const links = document.querySelector('.nav-links');
+  const actions = document.querySelector('.nav-actions');
+  if(!nav || !links || !actions || links.dataset.mobileReady==='1') return;
+
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'icon-btn nav-menu-btn';
+  btn.setAttribute('aria-label', 'Toggle menu');
+  btn.setAttribute('aria-expanded', 'false');
+  btn.innerHTML = '<span class="badge">Menu</span>';
+  actions.prepend(btn);
+
+  const drawer = document.createElement('div');
+  drawer.className = 'mobile-drawer-actions';
+  drawer.innerHTML = `
+    <a class="btn" href="${actions.querySelector('[data-testid="nav-whatsapp"]')?.getAttribute('href') || '#'}" target="_blank" rel="noopener">WhatsApp</a>
+    <a class="btn" href="./checkout.html">Cart</a>
+    <button class="btn" type="button" data-mobile-theme-toggle="1">Dark mode</button>
+  `;
+  links.appendChild(drawer);
+
+  const close = ()=>{
+    nav.classList.remove('nav-open');
+    btn.setAttribute('aria-expanded', 'false');
+  };
+  const open = ()=>{
+    nav.classList.add('nav-open');
+    btn.setAttribute('aria-expanded', 'true');
+  };
+
+  btn.addEventListener('click', ()=> nav.classList.contains('nav-open') ? close() : open());
+
+  links.querySelectorAll('a').forEach(a=> a.addEventListener('click', close));
+  drawer.querySelector('[data-mobile-theme-toggle="1"]')?.addEventListener('click', ()=>{
+    document.getElementById('themeToggle')?.click();
+  });
+
+  document.addEventListener('keydown', (e)=>{ if(e.key==='Escape') close(); });
+  window.addEventListener('resize', ()=>{ if(window.innerWidth > 860) close(); });
+
+  links.dataset.mobileReady = '1';
+}
+
+
+export function initGlobalErrorUI(){
+  if(document.getElementById('globalErrorPanel')) return;
+  const panel = document.createElement('div');
+  panel.id = 'globalErrorPanel';
+  panel.className = 'card';
+  panel.style.cssText = 'display:none;position:fixed;inset:auto 16px 16px 16px;z-index:2600;padding:14px;max-width:680px;margin:0 auto;';
+  panel.innerHTML = `
+    <div class="row" style="justify-content:space-between;">
+      <b>Something went wrong</b>
+      <span class="badge red">Runtime error</span>
+    </div>
+    <div class="small" id="globalErrorText" style="margin-top:8px;">An unexpected issue occurred.</div>
+    <div class="row" style="margin-top:10px;">
+      <button class="btn" id="globalErrorRetry" type="button">Retry</button>
+      <a class="btn" href="./health.html">Open health</a>
+      <a class="btn primary" href="./index.html">Go home</a>
+    </div>
+    <details class="small" style="margin-top:8px;">
+      <summary>Error details</summary>
+      <pre id="globalErrorDetails" class="mono" style="white-space:pre-wrap; margin:8px 0 0;"></pre>
+    </details>
+  `;
+  document.body.appendChild(panel);
+  document.getElementById('globalErrorRetry')?.addEventListener('click', ()=> location.reload());
+
+  const show = (msg, details='')=>{
+    const t = document.getElementById('globalErrorText');
+    const d = document.getElementById('globalErrorDetails');
+    if(t) t.textContent = msg || 'An unexpected issue occurred.';
+    if(d) d.textContent = details || '';
+    panel.style.display = 'block';
+  };
+
+  window.addEventListener('error', (e)=> show(`Error: ${e.message || 'unknown error'}`, `${e.filename || ''}:${e.lineno || 0}:${e.colno || 0}`));
+  window.addEventListener('unhandledrejection', (e)=> show('A background operation failed. Please retry.', String(e?.reason || 'Unhandled rejection')));
+  window.addEventListener('nexus:critical-fetch-failed', (e)=>{
+    const msg = e?.detail?.message || 'Failed to load critical content.';
+    const details = e?.detail?.url ? `URL: ${e.detail.url}` : '';
+    show(msg, details);
+  });
+}
+
+
+async function fetchPartial(name){
+  const key = `nexus_partial_${name}`;
+  try{
+    const cached = sessionStorage.getItem(key);
+    if(cached) return cached;
+  }catch{}
+  const base = location.pathname.startsWith('/ar/') ? '../partials' : './partials';
+  const res = await fetch(`${base}/${name}.html`, {cache:'no-store'});
+  if(!res.ok) throw new Error(`partial-${name}-failed`);
+  const html = await res.text();
+  try{ sessionStorage.setItem(key, html); }catch{}
+  return html;
+}
+
+export async function loadPartials(){
+  const headerHost = document.querySelector('header[data-include="header"]');
+  const footerHost = document.querySelector('footer[data-include="footer"]');
+
+  try{
+    if(headerHost){
+      let html = await fetchPartial('header');
+      if(location.pathname.startsWith('/ar/')){
+        html = html.replaceAll('href="./','href="../');
+      }
+      headerHost.outerHTML = html;
+    }
+    if(footerHost){
+      let html = await fetchPartial('footer');
+      if(location.pathname.startsWith('/ar/')){
+        html = html.replaceAll('href="./','href="../');
+      }
+      footerHost.outerHTML = html;
+    }
+  }catch(e){
+    const base = location.pathname.startsWith('/ar/') ? '..' : '.';
+    if(headerHost){
+      headerHost.outerHTML = `
+        <header class="nav" data-partial="header-fallback">
+          <div class="container nav-inner">
+            <a class="brand" href="${base}/index.html" aria-label="Home">Nexus Gaming UAE</a>
+            <nav class="nav-links" aria-label="Primary">
+              <a data-testid="nav-home" href="${base}/index.html">Home</a>
+              <a data-testid="nav-products" href="${base}/products.html">Products</a>
+              <a data-testid="nav-services" href="${base}/services.html">Services & Fixing</a>
+              <a data-testid="nav-blog" href="${base}/blog.html">Blog</a>
+              <a data-testid="nav-build" href="${base}/build.html">Build PC</a>
+              <a data-testid="nav-warranty" href="${base}/warranty.html">Warranty</a>
+              <a data-testid="nav-contact" href="${base}/contact.html">Contact</a>
+              <a data-testid="nav-admin" href="${base}/admin.html">Admin</a>
+            </nav>
+            <div class="nav-actions">
+              <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener">WhatsApp</a>
+              <a class="icon-btn" href="${base}/checkout.html" aria-label="Cart"><span>Cart</span> <span class="badge" id="cartCount">0</span></a>
+              <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme"></button>
+            </div>
+          </div>
+        </header>`;
+    }
+    if(footerHost){
+      footerHost.outerHTML = `<footer class="site-footer"><div class="container"><p class="small">Nexus Gaming UAE</p></div></footer>`;
+    }
+    console.error('Failed to load shared partials', e);
+  }
+}
+
+export function initDebugPanel(){
+  const enabled = new URLSearchParams(location.search).get('debug') === '1';
+  if(!enabled) return;
+  const panel = document.createElement('div');
+  panel.className = 'card';
+  panel.style.cssText = 'position:fixed;left:12px;bottom:12px;z-index:2601;max-width:min(560px,90vw);max-height:44vh;overflow:auto;padding:10px;';
+  panel.innerHTML = '<div class="row" style="justify-content:space-between;"><b>Debug panel</b><span class="badge">v:2026.02.28</span></div><pre id="dbgText" class="small" style="white-space:pre-wrap;margin-top:8px;"></pre>';
+  document.body.appendChild(panel);
+  const target = panel.querySelector('#dbgText');
+  const logs = [];
+  const push = (line)=>{
+    logs.push(line);
+    while(logs.length > 40) logs.shift();
+    target.textContent = logs.join('\n');
+  };
+  push(`Path: ${location.pathname}`);
+  push(`UA: ${navigator.userAgent.slice(0,90)}`);
+  window.addEventListener('error', (e)=> push(`error: ${e.message}`));
+  window.addEventListener('unhandledrejection', ()=> push('error: unhandled rejection'));
+}
+
+export function markActiveNav(){
+  const p = location.pathname.toLowerCase();
+  const map = [
+    ['products','/products'],['services','/services'],['blog','/blog'],['build','/build'],['warranty','/warranty'],['contact','/contact'],['admin','/admin']
+  ];
+  for(const [id,route] of map){
+    const a = document.querySelector(`[data-nav="${id}"]`);
+    if(!a) continue;
+    if(p.includes(route) || (route==='/blog' && p.includes('/ar/blog'))){ a.classList.add('badge','neo'); a.setAttribute('aria-current','page'); }
+  }
+}
+
 export function initNav(){
   // Cart count
   setCartCount();
@@ -54,16 +249,138 @@ export function initNav(){
   }
 }
 
+export function initQuickNav(){
+  if(document.getElementById('quickNav')) return;
+  const base = location.pathname.startsWith('/ar/') ? '..' : '.';
+  const links = [
+    ['Home', `${base}/index.html`, 'H'],
+    ['Products', `${base}/products.html`, 'P'],
+    ['Services & Fixing', `${base}/services.html`, 'S'],
+    ['Blog', `${base}/blog.html`, 'B'],
+    ['Build PC', `${base}/build.html`, 'U'],
+    ['Warranty', `${base}/warranty.html`, 'W'],
+    ['Contact', `${base}/contact.html`, 'C'],
+    ['Admin', `${base}/admin.html`, 'A'],
+    ['Checkout / Cart', `${base}/checkout.html`, 'K'],
+    ['Health', `${base}/health.html`, 'L'],
+  ];
+
+  const wrap = document.createElement('div');
+  wrap.id = 'quickNav';
+  wrap.className = 'quick-nav';
+  wrap.innerHTML = `
+    <div class="quick-nav-card" role="dialog" aria-label="Quick navigation" aria-modal="true">
+      <div class="quick-nav-head">
+        <input id="quickNavInput" type="text" placeholder="Jump to page…" aria-label="Search navigation links" />
+      </div>
+      <div class="quick-nav-list" id="quickNavList"></div>
+    </div>
+  `;
+  document.body.appendChild(wrap);
+
+  const list = document.getElementById('quickNavList');
+  const input = document.getElementById('quickNavInput');
+  const render = (q='')=>{
+    const term = q.toLowerCase();
+    list.innerHTML = links
+      .filter(([label])=> label.toLowerCase().includes(term))
+      .map(([label, href, key])=>`<a class="quick-nav-link" href="${href}"><span>${escapeHtml(label)}</span><span class="quick-nav-kbd">${key}</span></a>`)
+      .join('') || '<div class="small" style="padding:12px;">No matches.</div>';
+    list.querySelectorAll('a').forEach((a)=> a.addEventListener('click', ()=> wrap.classList.remove('show')));
+  };
+
+  const open = ()=>{
+    wrap.classList.add('show');
+    render(input.value);
+    setTimeout(()=> input.focus(), 0);
+  };
+  const close = ()=> wrap.classList.remove('show');
+
+  document.getElementById('openQuickNav')?.addEventListener('click', open);
+  wrap.addEventListener('click', (e)=>{ if(e.target === wrap) close(); });
+  input.addEventListener('input', ()=> render(input.value));
+  document.addEventListener('keydown', (e)=>{
+    if((e.metaKey || e.ctrlKey) && e.key.toLowerCase()==='k'){
+      e.preventDefault();
+      open();
+    }
+    if(e.key === 'Escape') close();
+  });
+}
+
+export function initBackToTop(){
+  if(document.getElementById('backTopBtn')) return;
+  const btn = document.createElement('button');
+  btn.id = 'backTopBtn';
+  btn.className = 'btn';
+  btn.type = 'button';
+  btn.textContent = '↑ Top';
+  btn.setAttribute('aria-label', 'Back to top');
+  btn.addEventListener('click', ()=> window.scrollTo({top:0, behavior:'smooth'}));
+  document.body.appendChild(btn);
+  window.addEventListener('scroll', ()=>{
+    if(window.scrollY > 480) btn.classList.add('show');
+    else btn.classList.remove('show');
+  });
+}
+
 export function setWhatsAppLink(el, message){
   if(!el) return;
   const encoded = encodeURIComponent(String(message||'').trim() || 'Hi Nexus Gaming — I need help.');
   el.href = `https://wa.me/${WHATSAPP_NUMBER.replace(/[^\d]/g,'')}?text=${encoded}`;
 }
 
+export function productImage(p){
+  if(!p || typeof p !== "object") return "./assets/placeholder.svg";
+  return p.image_main || p.imageMain || p.image || p.image_fallback_svg || p.imageFallbackSvg || "./assets/placeholder.svg";
+}
+
 export function formatTime(iso){
   try{ return new Date(iso).toLocaleString(); }catch{ return String(iso||''); }
 }
 
+export function escapeHtml(str){
+  return String(str)
+    .replaceAll('&','&amp;')
+    .replaceAll('<','&lt;')
+    .replaceAll('>','&gt;')
+    .replaceAll('"','&quot;')
+    .replaceAll("'",'&#039;');
+}
+
+export function debounce(fn, wait=180){
+  let t;
+  return (...args)=>{
+    clearTimeout(t);
+    t = setTimeout(()=> fn(...args), wait);
+  };
+}
+
+export async function fetchJSON(url, {timeoutMs=6000, fallback=null}={}){
+  const cacheKey = `nexus_cache:${url}`;
+  const ctl = new AbortController();
+  const timer = setTimeout(()=> ctl.abort(), timeoutMs);
+  try{
+    const res = await fetch(url, {cache:'no-store', signal:ctl.signal});
+    if(!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    try{ sessionStorage.setItem(cacheKey, JSON.stringify(data)); }catch{}
+    return data;
+  }catch(err){
+    try{
+      const cached = sessionStorage.getItem(cacheKey);
+      if(cached) return JSON.parse(cached);
+    }catch{}
+    if(fallback) return fallback;
+    window.dispatchEvent(new CustomEvent('nexus:critical-fetch-failed', {
+      detail: { url, message: `Unable to load ${url}.` }
+    }));
+    throw err;
+  }finally{
+    clearTimeout(timer);
+  }
+}
+
 /* Modal helpers */
 export function openModal(id){
   const b = document.getElementById(id);
@@ -183,22 +500,40 @@ export function initChatbot(){
   render();
 }
 
-function escapeHtml(str){
-  return String(str)
-    .replaceAll('&','&amp;')
-    .replaceAll('<','&lt;')
-    .replaceAll('>','&gt;')
-    .replaceAll('"','&quot;')
-    .replaceAll("'",'&#039;');
+
+export function initTawkWidget(){
+  if(typeof window === 'undefined') return;
+  if(document.getElementById('tawkto-script')) return;
+  const w = window;
+  w.Tawk_API = w.Tawk_API || {};
+  w.Tawk_LoadStart = new Date();
+  const s1 = document.createElement('script');
+  const s0 = document.getElementsByTagName('script')[0];
+  if(!s0?.parentNode) return;
+  s1.async = true;
+  s1.src = 'https://embed.tawk.to/69a2bdc403cc5c1c3465cc9f/1jihrair4';
+  s1.charset = 'UTF-8';
+  s1.id = 'tawkto-script';
+  s1.setAttribute('crossorigin', '*');
+  s0.parentNode.insertBefore(s1, s0);
 }
 
 /* Init for all pages */
-export function boot(){
+export async function boot(){
   // Smooth page entry
   try{ document.body.classList.add('ready'); }catch{}
+  await loadPartials();
+  markActiveNav();
   initTheme();
   initNav();
+  initMobileNav();
+  initQuickNav();
+  initBackToTop();
+  initGlobalUXEnhancementsExtended();
+  initGlobalErrorUI();
+  initDebugPanel();
   initModals();
   initChatbot();
+  initChat();
+  initTawkWidget();
 }
-
diff --git a/scripts/audit-links.mjs b/scripts/audit-links.mjs
new file mode 100644
index 0000000..9f052f5
--- /dev/null
+++ b/scripts/audit-links.mjs
@@ -0,0 +1,76 @@
+import fs from 'fs';
+import path from 'path';
+
+const root = process.cwd();
+const htmlFiles = fs.readdirSync(root).filter((f) => f.endsWith('.html'));
+const all = [
+  ...htmlFiles,
+  ...fs.readdirSync(path.join(root, 'ar')).map((f) => path.join('ar', f)).filter((f) => f.endsWith('.html')),
+];
+
+const broken = [];
+const seenHttp = new Set();
+const base = process.env.AUDIT_BASE_URL || '';
+
+const requiredNav = ['Products','Services','Blog','Build','Warranty','Contact','Admin'];
+const requiredNavTestIds = ['nav-home','nav-products','nav-services','nav-blog','nav-build','nav-warranty','nav-contact','nav-admin','nav-whatsapp','nav-cart','nav-theme'];
+const headerPartialPath = path.join(root, 'partials', 'header.html');
+const headerPartial = fs.existsSync(headerPartialPath) ? fs.readFileSync(headerPartialPath, 'utf8') : '';
+
+
+for (const rel of all) {
+  const full = path.join(root, rel);
+  const src = fs.readFileSync(full, 'utf8');
+
+  const hasPartialHeader = src.includes('data-include="header"');
+  const hasInlineNav = requiredNav.every(t=>src.toLowerCase().includes(t.toLowerCase()));
+  const skipHeaderAudit = ['health.html','payment-demo.html'].includes(rel);
+  if(!skipHeaderAudit && !hasPartialHeader && !hasInlineNav) broken.push(`${rel}: missing unified header links`);
+  if(!skipHeaderAudit && hasPartialHeader){
+    if(!headerPartial){
+      broken.push(`${rel}: uses shared header include but partials/header.html is missing`);
+    }else{
+      for(const id of requiredNavTestIds){
+        if(!headerPartial.includes(`data-testid="${id}"`)){
+          broken.push(`${rel}: shared header missing data-testid ${id}`);
+        }
+      }
+    }
+  }
+
+  const refs = [
+    ...[...src.matchAll(/href="([^"]+)"/g)].map((m) => m[1]),
+    ...[...src.matchAll(/src="([^"]+)"/g)].map((m) => m[1]),
+  ];
+
+  for (const ref of refs) {
+    if (ref.includes('${')) continue;
+    if (ref.startsWith('http') || ref.startsWith('#') || ref.startsWith('mailto:') || ref.startsWith('tel:') || ref.startsWith('data:')) continue;
+    const clean = ref.split('#')[0].split('?')[0];
+    if (!clean) continue;
+    const target = path.resolve(path.dirname(full), clean);
+    if (!fs.existsSync(target)) broken.push(`${rel} -> ${ref}`);
+
+    if (base) {
+      const url = new URL(clean.replace(/^\.\//,''), `${base}/${rel}`).toString();
+      seenHttp.add(url);
+    }
+  }
+}
+
+if (base) {
+  for (const url of seenHttp) {
+    try {
+      const r = await fetch(url);
+      if (!r.ok) broken.push(`HTTP ${r.status}: ${url}`);
+    } catch {
+      broken.push(`Fetch failed: ${url}`);
+    }
+  }
+}
+
+if (broken.length) {
+  console.error('Broken links/assets found:\n' + broken.join('\n'));
+  process.exit(1);
+}
+console.log(`Audited ${all.length} HTML files. No broken local links/assets.`);
diff --git a/scripts/validate-assets.mjs b/scripts/validate-assets.mjs
new file mode 100644
index 0000000..e5658da
--- /dev/null
+++ b/scripts/validate-assets.mjs
@@ -0,0 +1,38 @@
+import fs from 'fs';
+import path from 'path';
+
+const root = process.cwd();
+const productsPath = path.join(root, 'products.json');
+const products = JSON.parse(fs.readFileSync(productsPath, 'utf8'));
+const warrantyRules = JSON.parse(fs.readFileSync(path.join(root, 'warrantyRules.json'), 'utf8'));
+
+const missing = [];
+for (const p of products) {
+  const fallback = p.image_fallback_svg || p.image;
+  if (!fallback || !fallback.startsWith('./assets/products/')) {
+    missing.push(`${p.id}: fallback image must point to ./assets/products/*`);
+  } else {
+    const fallbackPath = path.join(root, fallback.replace('./', ''));
+    if (!fs.existsSync(fallbackPath)) missing.push(`${p.id}: missing fallback ${fallback}`);
+  }
+
+  const main = p.image_main || '';
+  if (main) {
+    const mainPath = path.join(root, main.replace('./', ''));
+    if (!fs.existsSync(mainPath)) missing.push(`${p.id}: missing image_main ${main}`);
+    if (!main.includes('/assets/products/photos/')) {
+      missing.push(`${p.id}: image_main should live under ./assets/products/photos/`);
+    }
+  }
+
+  if (p.eligibleExtendedWarranty && !warrantyRules.tiers?.[p.warrantyTier || '']) {
+    missing.push(`${p.id}: eligible product missing warranty tier mapping`);
+  }
+}
+
+if (missing.length) {
+  console.error('Asset validation failed:\n' + missing.join('\n'));
+  process.exit(1);
+}
+
+console.log(`Validated ${products.length} product images and warranty rules.`);
diff --git a/services.html b/services.html
index cbb7a1e..2b60e7b 100644
--- a/services.html
+++ b/services.html
@@ -5,25 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Services & Fixing — Nexus Gaming UAE</title>
   <link rel="stylesheet" href="./style.css" />
+  <meta name="description" content="Services & Fixing — Nexus Gaming UAE - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Services & Fixing — Nexus Gaming UAE" />
+  <meta property="og:description" content="Services & Fixing — Nexus Gaming UAE - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/services.html" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html">Products</a>
-        <a href="./services.html" class="badge neo">Services & Fixing</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./warranty.html">Warranty</a>
-        <a href="./contact.html">Contact</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">WhatsApp</span></a>
-        <a class="icon-btn" href="./checkout.html"><span>Cart</span> <span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme"></button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="container" style="padding: 20px 18px 0;">
     <div class="card" style="padding:16px;">
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 0000000..3c27dcb
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url><loc>https://akastore.netlify.app/</loc></url>
+  <url><loc>https://akastore.netlify.app/products.html</loc></url>
+  <url><loc>https://akastore.netlify.app/services.html</loc></url>
+  <url><loc>https://akastore.netlify.app/blog.html</loc></url>
+  <url><loc>https://akastore.netlify.app/warranty.html</loc></url>
+  <url><loc>https://akastore.netlify.app/contact.html</loc></url>
+  <url><loc>https://akastore.netlify.app/admin.html</loc></url>
+  <url><loc>https://akastore.netlify.app/build.html</loc></url>
+  <url><loc>https://akastore.netlify.app/health.html</loc></url>
+  <url><loc>https://akastore.netlify.app/ar/index.html</loc></url>
+  <url><loc>https://akastore.netlify.app/ar/blog.html</loc></url>
+  <url><loc>https://akastore.netlify.app/changelog.html</loc></url>
+  <url><loc>https://akastore.netlify.app/payment-demo.html</loc></url>
+</urlset>
diff --git a/style.css b/style.css
index 47d1b8b..8d77f54 100644
--- a/style.css
+++ b/style.css
@@ -267,3 +267,211 @@ textarea{ min-height: 110px; resize: vertical; }
   .products-grid{ grid-template-columns: 1fr; }
   .grid-2{ grid-template-columns: 1fr; }
 }
+
+
+.input:focus, textarea:focus, .select:focus, .btn:focus-visible, .icon-btn:focus-visible, a:focus-visible{
+  outline: 2px solid rgba(59,130,246,.6);
+  outline-offset: 2px;
+}
+
+img{ image-rendering:auto; }
+
+@media (prefers-reduced-motion: reduce){
+  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
+  .hero::before{ animation: none !important; }
+}
+
+
+.nav-menu-btn{ display:none; }
+
+.mobile-drawer-actions{ display:none; gap:8px; grid-template-columns:1fr 1fr; margin-top:6px; }
+.mobile-drawer-actions .btn{ width:100%; justify-content:center; }
+
+
+@media (max-width: 860px){
+  .nav-inner{ align-items:flex-start; }
+  .nav-actions{ margin-left:auto; }
+  .nav-menu-btn{ display:inline-flex; }
+  .nav-links{
+    display:none;
+    width:100%;
+    order: 3;
+    padding: 8px 0 2px;
+    flex-direction:column;
+    align-items:stretch;
+    gap:8px;
+  }
+  .nav-links a{ width:100%; }
+  .nav.nav-open .nav-links{ display:flex; }
+  .mobile-drawer-actions{ display:grid; }
+}
+
+
+@media (max-width: 700px){
+  .modal{
+    width:100%;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    position: fixed;
+    bottom:0;
+    max-height: 88vh;
+    overflow:auto;
+  }
+  .fab-wrap{ right:12px; bottom:12px; }
+  .btn, .icon-btn, .input, .select{ min-height:44px; }
+}
+
+/* =====================
+   Apple-inspired redesign layer
+   ===================== */
+:root{
+  --apple-bg: #f5f5f7;
+  --apple-text: #1d1d1f;
+  --apple-muted: #6e6e73;
+  --apple-card: rgba(255,255,255,.72);
+  --apple-card-border: rgba(255,255,255,.45);
+  --apple-radius: 24px;
+}
+
+body{
+  background:
+    radial-gradient(900px 500px at 0% 0%, rgba(128,188,255,.25), transparent 60%),
+    radial-gradient(900px 700px at 100% 20%, rgba(167,139,250,.20), transparent 62%),
+    linear-gradient(180deg, #f7f9ff 0%, #eef2fb 55%, #f9fafc 100%);
+  color: var(--apple-text);
+}
+
+:root[data-theme="dark"] body{
+  background:
+    radial-gradient(1000px 500px at 10% 0%, rgba(88,125,255,.25), transparent 60%),
+    radial-gradient(900px 700px at 100% 10%, rgba(56,189,248,.17), transparent 62%),
+    linear-gradient(180deg, #0d1117 0%, #111827 55%, #0b1220 100%);
+  color: rgba(255,255,255,.92);
+}
+
+.top-strip{
+  border-bottom: 1px solid var(--line);
+  background: rgba(255,255,255,.5);
+  backdrop-filter: blur(16px);
+}
+:root[data-theme="dark"] .top-strip{ background: rgba(15,23,42,.5); }
+.top-strip-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; font-size:12px; color:var(--muted); }
+.top-strip-action{ margin-left:auto; background:transparent; }
+
+.nav{
+  background: rgba(255,255,255,.55);
+  backdrop-filter: blur(26px) saturate(140%);
+  border-bottom: 1px solid rgba(255,255,255,.6);
+}
+:root[data-theme="dark"] .nav{
+  background: rgba(2,6,23,.58);
+  border-bottom-color: rgba(148,163,184,.2);
+}
+
+.card,.prod,.mini,.modal{
+  border-radius: var(--apple-radius);
+  background: var(--apple-card);
+  border: 1px solid var(--apple-card-border);
+  box-shadow: 0 12px 40px rgba(15,23,42,.08);
+  backdrop-filter: blur(18px);
+}
+:root[data-theme="dark"] .card,
+:root[data-theme="dark"] .prod,
+:root[data-theme="dark"] .mini,
+:root[data-theme="dark"] .modal{
+  background: rgba(15,23,42,.62);
+  border-color: rgba(148,163,184,.22);
+  box-shadow: 0 14px 44px rgba(0,0,0,.4);
+}
+
+.h1{ font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing:-.04em; }
+.sub{ font-size: 1.03rem; max-width: 68ch; }
+
+.btn,.icon-btn{
+  border-radius: 999px;
+  border-color: rgba(29,29,31,.08);
+  background: rgba(255,255,255,.78);
+}
+:root[data-theme="dark"] .btn,
+:root[data-theme="dark"] .icon-btn{
+  background: rgba(30,41,59,.65);
+  border-color: rgba(148,163,184,.22);
+}
+.btn.primary{
+  background: linear-gradient(180deg, #2563eb, #1d4ed8);
+  border-color: transparent;
+  color: #fff;
+}
+.btn.green{
+  background: linear-gradient(180deg, #22c55e, #16a34a);
+  border-color: transparent;
+  color: #fff;
+}
+
+.products-grid{ gap:16px; }
+.prod{ transition: transform .28s ease, box-shadow .28s ease; }
+.prod:hover{ transform: translateY(-3px); box-shadow: 0 18px 50px rgba(37,99,235,.12); }
+
+.input,.select,textarea{
+  border-radius: 18px;
+  background: rgba(255,255,255,.8);
+  border-color: rgba(15,23,42,.12);
+}
+:root[data-theme="dark"] .input,
+:root[data-theme="dark"] .select,
+:root[data-theme="dark"] textarea{
+  background: rgba(30,41,59,.72);
+  border-color: rgba(148,163,184,.24);
+}
+
+/* quick nav command palette */
+.quick-nav{
+  position: fixed;
+  inset: 0;
+  z-index: 2500;
+  background: rgba(15,23,42,.35);
+  backdrop-filter: blur(8px);
+  display:none;
+  align-items:flex-start;
+  justify-content:center;
+  padding: 12vh 14px 20px;
+}
+.quick-nav.show{ display:flex; }
+.quick-nav-card{
+  width:min(700px,100%);
+  border-radius: 28px;
+  background: rgba(255,255,255,.95);
+  border:1px solid rgba(15,23,42,.08);
+  box-shadow: 0 30px 80px rgba(15,23,42,.2);
+  overflow:hidden;
+}
+:root[data-theme="dark"] .quick-nav-card{
+  background: rgba(15,23,42,.93);
+  border-color: rgba(148,163,184,.2);
+}
+.quick-nav-head{ padding:14px; border-bottom:1px solid var(--line); }
+.quick-nav-head input{ width:100%; border:none; background:transparent; color:inherit; font-size:16px; outline:none; }
+.quick-nav-list{ max-height:min(60vh,480px); overflow:auto; padding: 8px; display:grid; gap:8px; }
+.quick-nav-link{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-radius:16px; border:1px solid transparent; }
+.quick-nav-link:hover{ border-color:var(--line); background:var(--panel); }
+.quick-nav-kbd{ font-family:var(--mono); font-size:12px; opacity:.7; }
+
+#backTopBtn{
+  position:fixed;
+  right:16px;
+  bottom:22px;
+  z-index:1700;
+  display:none;
+}
+#backTopBtn.show{ display:inline-flex; }
+
+@media (max-width: 900px){
+  .top-strip-inner span:nth-child(2){ display:none; }
+  .top-strip-action{ margin-left:0; }
+}
+@media (max-width: 640px){
+  .top-strip-inner{ justify-content:center; gap:8px; }
+  .top-strip-action{ font-size:11px; padding:6px 10px; }
+}
+
+@import url("./css/enterprise-upgrades.css");
diff --git a/tests/e2e/site.spec.ts b/tests/e2e/site.spec.ts
new file mode 100644
index 0000000..591bc23
--- /dev/null
+++ b/tests/e2e/site.spec.ts
@@ -0,0 +1,148 @@
+import { test, expect } from '@playwright/test';
+
+const routes = [
+  ['/', 'Nexus'],
+  ['/products.html', 'Products'],
+  ['/services.html', 'Services'],
+  ['/blog.html', 'Guides'],
+  ['/warranty.html', 'Warranty'],
+  ['/contact.html', 'Contact'],
+  ['/admin.html', 'Admin'],
+  ['/ar/index.html', 'نسخة عربية'],
+  ['/ar/blog.html', 'المدونة'],
+  ['/build.html', 'Build your PC'],
+];
+
+
+test('header links stable across routes', async ({ page }) => {
+  const required = [
+    'nav-home','nav-products','nav-services','nav-blog','nav-build','nav-warranty','nav-contact','nav-admin','nav-whatsapp','nav-cart','nav-theme'
+  ];
+  for (const [route] of routes) {
+    await page.goto(route);
+    for (const id of required) {
+      await expect(page.locator(`[data-testid=\"${id}\"]`)).toBeVisible();
+    }
+  }
+});
+
+test('core routes render without console errors', async ({ page }) => {
+  const errors: string[] = [];
+  page.on('console', (m) => {
+    if (m.type() === 'error') errors.push(m.text());
+  });
+
+  for (const [route, text] of routes) {
+    await page.goto(route);
+    await expect(page.locator('body')).toContainText(text);
+  }
+
+  expect(errors, `Console errors:\n${errors.join('\n')}`).toEqual([]);
+});
+
+test('chatbot opens and responds in demo mode', async ({ page }) => {
+  await page.goto('/index.html');
+  await page.click('#chatFabGlobal');
+  await page.click('[data-quick="Warranty question"]');
+  await expect(page.locator('#chatListGlobal')).toContainText(/warranty|tier|coverage/i);
+});
+
+test('warranty calculator adds coverage line to cart', async ({ page }) => {
+  await page.goto('/warranty.html');
+  await page.selectOption('#wProduct', { index: 1 });
+  await page.selectOption('#wDuration', '24');
+  await page.click('#wAddCart');
+  await page.goto('/checkout.html');
+  await expect(page.locator('#cartList')).toContainText(/Extended Warranty/i);
+});
+
+test('products modal notify and add to checkout', async ({ page }) => {
+  await page.goto('/products.html');
+  await page.click('[data-view]');
+  await expect(page.locator('#pmBody img')).toBeVisible();
+
+  const notifyBtn = page.locator('[data-notify]').first();
+  if (await notifyBtn.count()) {
+    await notifyBtn.click();
+    await page.fill('#notifyForm input[name="email"]', 'qa@example.com');
+    await page.click('#notifyForm button[type="submit"]');
+  }
+
+  await page.locator('[data-add]').first().click();
+  await page.goto('/checkout.html');
+  await expect(page.locator('#cartList')).not.toBeEmpty();
+});
+
+test('admin login gate and dashboard render not blank', async ({ page }) => {
+  await page.goto('/admin.html');
+  await expect(page.locator('#loginForm')).toBeVisible();
+  await page.evaluate(() => localStorage.setItem('nexus_admin_token_v1', 'dummy-token'));
+  await page.reload();
+  await expect(page.locator('#dash')).toBeVisible();
+});
+
+test('build page compatibility indicator works on mobile viewport', async ({ browser }) => {
+  const context = await browser.newContext({ viewport: { width: 390, height: 844 } });
+  const page = await context.newPage();
+  await page.goto('/build.html');
+  await page.selectOption('#bCpu', { index: 1 });
+  await page.selectOption('#bMobo', { index: 1 });
+  await page.selectOption('#bGpu', { index: 1 });
+  await page.selectOption('#bPsu', { index: 1 });
+  await expect(page.locator('#compat')).toContainText(/Compatible|Not compatible/);
+  await context.close();
+});
+
+test('checkout demo payment lifecycle', async ({ page }) => {
+  await page.goto('/products.html');
+  await page.locator('[data-add]').first().click();
+  await page.goto('/checkout.html');
+  await page.fill('#name', 'QA Tester');
+  await page.fill('#phone', '+971500000000');
+  await page.fill('#address', 'Dubai, UAE');
+  await page.selectOption('#paymentMethod', 'card');
+  await page.click('#simulatePay');
+  await expect(page).toHaveURL(/payment-demo\.html/);
+  await page.click('#payNow');
+});
+
+test('quick command palette opens and filters routes', async ({ page }) => {
+  await page.goto('/index.html');
+  await page.keyboard.press('Control+K');
+  await expect(page.locator('#cmdPaletteV2')).toHaveClass(/show/);
+  await page.fill('#cmdInputV2', 'warranty');
+  await expect(page.locator('#cmdListV2')).toContainText('Warranty');
+  await page.keyboard.press('Escape');
+  await expect(page.locator('#cmdPaletteV2')).not.toHaveClass(/show/);
+});
+
+test('scroll progress and back to top controls render on long pages', async ({ page }) => {
+  await page.goto('/products.html');
+  await expect(page.locator('#scrollProgress')).toBeVisible();
+  await page.evaluate(() => window.scrollTo(0, 900));
+  await page.waitForTimeout(150);
+  await expect(page.locator('#backTopBtn')).toHaveClass(/show/);
+  await page.click('#backTopBtn');
+  await page.waitForTimeout(150);
+  const scrolled = await page.evaluate(() => window.scrollY);
+  expect(scrolled).toBeLessThan(200);
+});
+
+test('network status banner appears on offline simulation', async ({ page }) => {
+  await page.goto('/index.html');
+  await page.evaluate(() => {
+    window.dispatchEvent(new Event('offline'));
+  });
+  await expect(page.locator('#networkStatusBanner')).toHaveClass(/show/);
+  await expect(page.locator('#networkStatusBanner')).toContainText('offline');
+});
+
+test('form draft persistence for checkout fields', async ({ page }) => {
+  await page.goto('/checkout.html');
+  await page.fill('#name', 'Draft User');
+  await page.fill('#phone', '+971511112222');
+  await page.fill('#address', 'Draft Address Test');
+  await page.reload();
+  await expect(page.locator('#name')).toHaveValue('Draft User');
+  await expect(page.locator('#phone')).toHaveValue('+971511112222');
+});
diff --git a/warranty.html b/warranty.html
index 97e9d29..dbfd947 100644
--- a/warranty.html
+++ b/warranty.html
@@ -6,26 +6,14 @@
   <meta name="theme-color" content="#070B14" />
   <title>Warranty — Nexus Gaming UAE</title>
   <link rel="stylesheet" href="./style.css" />
+  <meta name="description" content="Warranty — Nexus Gaming UAE - Nexus Gaming UAE online storefront." />
+  <meta property="og:title" content="Warranty — Nexus Gaming UAE" />
+  <meta property="og:description" content="Warranty — Nexus Gaming UAE - UAE-focused gaming store." />
+  <meta property="og:image" content="/assets/placeholder.svg" />
+  <link rel="canonical" href="https://akastore.netlify.app/warranty.html" />
 </head>
 <body>
-  <header class="nav">
-    <div class="container nav-inner">
-      <a class="brand" href="./index.html"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></a>
-      <nav class="nav-links" aria-label="Primary">
-        <a href="./products.html">Products</a>
-        <a href="./services.html">Services & Fixing</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./warranty.html" aria-current="page">Warranty</a>
-        <a href="./contact.html">Contact</a>
-        <a href="./admin.html" class="badge neo">Admin</a>
-      </nav>
-      <div class="nav-actions">
-        <a class="icon-btn" id="waLink" href="#" target="_blank" rel="noopener"><span class="badge green">WhatsApp</span></a>
-        <a class="icon-btn" href="./checkout.html"><span class="badge" id="cartCount">0</span></a>
-        <button class="icon-btn" id="themeToggle" type="button" aria-label="Toggle theme">🌓</button>
-      </div>
-    </div>
-  </header>
+  <header data-include="header"></header>
 
   <main class="section">
     <div class="container">
@@ -66,6 +54,21 @@ <h3>Per-product warranty lookup</h3>
         </div>
       </div>
 
+
+      <div class="space"></div>
+      <div class="card" style="padding:16px;">
+        <h3>Extended warranty calculator</h3>
+        <div class="grid-2">
+          <div class="field"><div class="label">Product</div><select id="wProduct" class="select"></select></div>
+          <div class="field"><div class="label">Extra duration</div><select id="wDuration" class="select"><option value="">Select</option><option value="12">+12 months</option><option value="24">+24 months</option><option value="36">+36 months</option></select></div>
+        </div>
+        <div class="space"></div>
+        <div id="wCalcOut" class="mini">Select product and duration.</div>
+        <div class="space"></div>
+        <button id="wAddCart" class="btn primary" type="button" disabled>Add extended warranty to cart</button>
+      </div>
+
+
       <div class="space"></div>
       <div class="card">
         <h3>Important exclusions</h3>
@@ -78,53 +81,14 @@ <h3>Important exclusions</h3>
     </div>
   </main>
 
-  <footer class="footer">
-    <div class="container footer-grid">
-      <div>
-        <div class="brand small"><span class="brand-badge" aria-hidden="true"></span><div>Nexus <span>Gaming</span> UAE</div></div>
-        <div class="hint">Online store • WhatsApp: +971 50 505 8609</div>
-      </div>
-      <div class="footer-links">
-        <a href="./index.html">Home</a>
-        <a href="./products.html">Products</a>
-        <a href="./services.html">Services</a>
-        <a href="./blog.html">Blog</a>
-        <a href="./about.html">About</a>
-        <a href="./CHANGELOG.md">Changelog</a>
-      </div>
-    </div>
-  </footer>
+  <footer data-include="footer"></footer>
 
-  <script type="module" src="./script.js"></script>
   <script type="module">
-    import { setWhatsAppLink, toast } from './script.js';
+    import { boot, setWhatsAppLink } from './script.js';
+    import { initWarrantyPage } from './js/pages/warranty.js';
+    boot();
     setWhatsAppLink(document.getElementById('waClaim'), 'Warranty claim: order ID ______, issue: ______');
-
-    const btn = document.getElementById('wBtn');
-    const q = document.getElementById('wq');
-    const box = document.getElementById('wResult');
-
-    async function lookup(){
-      const term = String(q.value||'').trim().toLowerCase();
-      if(!term){ toast('Enter a product ID or SKU.'); return; }
-      const res = await fetch('./products.json', {cache:'no-store'});
-      const data = await res.json();
-      const p = (data.products||[]).find(x=> String(x.id).toLowerCase()===term || String(x.sku||'').toLowerCase()===term);
-      if(!p){
-        box.style.display='block';
-        box.innerHTML = `<h3>Not found</h3><p class="sub">Default manufacturer warranty applies (when available). If you need help, contact support.</p>`;
-        return;
-      }
-      box.style.display='block';
-      box.innerHTML = `
-        <h3>${p.title}</h3>
-        <div class="hint">ID: <span class="mono">${p.id}</span> • SKU: <span class="mono">${p.sku||p.id}</span></div>
-        <div class="space"></div>
-        <p class="sub"><b>Warranty note:</b> ${p.warranty || 'Manufacturer warranty (varies by brand/item).'}</p>
-      `;
-    }
-    btn.addEventListener('click', lookup);
-    q.addEventListener('keydown', (e)=>{ if(e.key==='Enter') lookup(); });
+    initWarrantyPage();
   </script>
 </body>
 </html>
diff --git a/warrantyRules.json b/warrantyRules.json
new file mode 100644
index 0000000..a3a2cb7
--- /dev/null
+++ b/warrantyRules.json
@@ -0,0 +1,22 @@
+{
+  "tiers": {
+    "A": {
+      "fixed": { "12": 79, "24": 149, "36": 219 }
+    },
+    "B": {
+      "percent": { "12": 0.06, "24": 0.1, "36": 0.14 },
+      "min": 69,
+      "max": 499
+    },
+    "C": {
+      "fixed": { "12": 99, "24": 179, "36": 259 }
+    }
+  },
+  "bundle": {
+    "percent": { "12": 0.05, "24": 0.09, "36": 0.12 },
+    "min": 199,
+    "max": 1499
+  },
+  "durations": [12,24,36],
+  "exclusions": ["Services","Consumables"]
+}