<!-- ============================================================
     PAGE:    CuppaThai Customer Hub (the retail dashboard)
     DEPLOY:  nickosystems-modules/public/customer-hub/index.html (jsQR.js, qrcode.js and pack-details.json in the SAME folder) -> /customer-hub/ on the retail app address. MOVED off Hostinger 4 Oct 2026; ?shop=voice|vocap|pack opens the shop tab
     LATEST REVISION: v9.40, 23 Oct 2026 — sign-ups are counted by source for the Social Feeds results page (src tag + pack only, no personal data). Earlier: v9.38, 22 Oct 2026 — free games opened from packs 1-10 to every pack. Earlier: v9.39, 22 Oct 2026 — free games card: the up-next scene always shows; the list of all free scenes sits in a closed box with a close button. Earlier: v9.37, 22 Oct 2026 — "Close the details" and "Close the list" buttons at the end of the two open boxes in the free book section. Earlier: v9.36, 22 Oct 2026 — header "FREE EPUB ENGLISH LESSON BOOK" as a burgundy pill; "Coming next · Up to Pack 40" stays closed until opened; Back closes the enlarged cover instead of leaving the site. Earlier: v9.35, 22 Oct 2026 — Free EPUBs moved under the free games; current free book with cover + closed Details; scrolling list of every book to the last pack with covers and scene headings; covers on every Lesson Player pack row (tap to enlarge). Earlier: v9.34, 22 Oct 2026 — Free EPUB drip counts through the packs not owned (so owners of early packs still get free books). Earlier: v9.33, 22 Oct 2026 — new account order: free games, Free EPUBs, Lesson Player ("Add a new pack"). Earlier: v9.32, 22 Oct 2026 — welcome card; Unlock opens that pack in the shop with full details. Earlier: v9.31 — Free EPUBs card (drip of EPUBs for packs the account does not own). Earlier: v9.30, 13 Oct 2026 — My payments moved up under Messages. Earlier: v9.29 — phone alerts (Turn on alerts in the Messages card). Earlier: v9.28 — Messages box at the top of the dashboard (table customer_messages). Earlier: v9.27 — Continue cards labelled (Lesson Player vs Practice Games), lesson card smaller; pack action buttons side by side. Earlier: v9.26 — Lesson Player list shows only the most recently practised pack; the rest sit behind a 'See all my packs' button with a search box (number or title) (v9.25: first version showed 5 packs); 'Get the app' install bar (Android prompt, iPhone two-tap hint). Earlier: v9.24, 11 Oct 2026 — Voice Lab card now reads its own table voice_lab_progress (separate from the Lesson Player). Earlier: v9.23, 6 Oct 2026 — Free games for everyone: shown at the top of every dashboard (owners too, collapsed to a header and the Up next card), packs 1–10 always listed. Earlier: v9.22, 5 Oct 2026 — payment-problem messages link to the site contact page instead of a mailto. Earlier: v9.15, 4 Oct 2026 — free "Practice Games" first on the dashboard (v9.21: phone videos shown as the website's overlapping phones. v9.20: sign-up goes straight to the dashboard when Supabase returns a session (no email confirmation). v9.19: ?src= tag from the website/reels saved on sign-up as signup_src. Games page: Scramble shows one sentence at a time. v9.18: Lesson Player card heading + phone videos on the Lesson Player and Voice Lab cards, large until bought then a small helper; v9.17: ?signup=1 opens the create-account form; v9.16: Up next card, one tidy card: FREE pill, heading naming both games, Up next, 5 rows) for accounts with no purchases, with search (v9.14: free section, scene 1 of packs 1-10); v9.13: pack descriptions can come from the pack_details table (ingest tool); v9.12: My payments: finished orders fold away again whenever a waiting order appears/changes (v9.11: pending always shown, finished folded); v9.10: 'In an order' link + buyer can upload the receipt again (needs SQL file 7) (v9.9 lazy-load; v9.8 PromptPay otherwise unchanged)
     ============================================================
     v9.8 CHANGES (26 Sep 2026):
     ✅ ADDED: manual payment. Every "Buy" button now opens an in-page shop (Lesson Packs, Voice Lab credits,
               VOCAP credits) instead of the WooCommerce shop. The buyer gets an order reference and the PromptPay
               details, pays in their own bank app, and uploads the slip; the items open at once and a person then
               checks the money in the payments console. Needs "RUN THIS - shop manual payments.sql".
     ✅ ADDED: "My payments" cards on the dashboard: waiting / receipt received / wrong amount / problem / paid / refund.
     ✅ ADDED: the slip's QR is read in the browser (jsQR.js) to refuse a slip that was already used.
     ✅ SWITCH: MANUAL_SHOP = false (in the script) puts the old WooCommerce Buy links back.
     ============================================================
     CuppaThai — Customer Hub (Dashboard)
     yellow-gull / customer-hub / index.html
     v9.7 — CREDIT TOAST
     ============================================================
     v9.7 CHANGES (9 Sep 2026):
     ✅ ADDED: "You just got X credits!" toast, fires when a Voice Lab
               or VOCAP balance is higher than this device last saw it
               (localStorage-compared, no backend change needed) —
               replaces a silently-updated number with an actual
               acknowledgement that a top-up landed.
     v9.6 CHANGES (8 Sep 2026):
     ✅ RENAMED: "My Account" → "Free Dashboard" throughout (signup
               copy, toggle prompts, success message) to match the
               sitewide nav rename — see global-header-with-game-link.php
     ✅ ADDED: every outbound "Buy" link now carries ?ct_email=<the
               logged-in account's email> (see buyLink()) — pairs with
               a new checkout-side snippet that locks the WooCommerce
               order email to the dashboard account it's meant to land
               on, closing the typo/mismatch risk between the two
     ✅ ADDED: per-pack "Download EPUB" button — fetches a signed URL
               straight from the dashboard session via the new
               hub-download.php broker, no email involved. The
               WooCommerce order email's own download link keeps
               working exactly as before; this is a second, independent
               path to the same file. Replaces the old blanket
               "check your order email" note, which is no longer
               the only way to get the file.
     v9.5 CHANGES (12 Aug 2026):
     ✅ ADDED: VOCAP section — player's own stats (from the new
               vocap_profile table) + a top-5 leaderboard preview,
               with the player's own row highlighted if present.
     v9.4 CHANGES:
     ✅ ADDED: "Forgot password?" link in login form
     ✅ ADDED: Supabase resetPasswordForEmail() flow
     ✅ FIXED: Stats bar "Avg Stars" now rounds cleanly (e.g. 3.3 or 4)
     ✅ FIXED: Voice Lab "attempts" label changed to "total practices"
               to avoid confusing Lesson Player attempts with credit usage
     ============================================================ -->
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#7F2824">
<title>CuppaThai — My Learning</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Sarabun:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
body {
  font-family:'Sarabun',sans-serif; background:#F2EFEA; color:#3D2B1F;
  max-width:520px; margin:0 auto; padding:0 14px 40px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}

/* ══════════════════════════════════════
   PROGRESS BARS (GREEN active / MAROON complete)
   ══════════════════════════════════════ */
.pack-track {
  height: 6px;
  background: #E8E5E0;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 4px;
}
.pack-fill {
  height: 100%;
  background: #16a34a; /* Rich Green */
  border-radius: 6px;
  transition: width 0.4s ease;
}
.pack-fill.done {
  background: #7F2824; /* Deep Maroon */
}

/* ══════════════════════════════════════
   CEFR BADGE
   ══════════════════════════════════════ */
.cefr-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  border: 1px solid;
}
.cefr-badge.a1 { background: rgba(46,134,193,0.12); color: #2E86C1; border-color: #2E86C1; }
.cefr-badge.a2 { background: rgba(40,180,99,0.12); color: #28B463; border-color: #28B463; }
.cefr-badge.b1 { background: rgba(243,156,18,0.12); color: #F39C12; border-color: #F39C12; }
.cefr-badge.b2 { background: rgba(231,76,60,0.12); color: #E74C3C; border-color: #E74C3C; }

.pack-number-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #7A6A5A;
  background: #EDE9E2;
  padding: 0 8px;
  border-radius: 10px;
}
.grade-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: #7F2824;
  padding: 1px 8px;
  border-radius: 10px;
}
.continue-grade {
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.2);
  padding: 1px 8px;
  border-radius: 10px;
}
.continue-pack {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.15);
  padding: 0 8px;
  border-radius: 10px;
}
.continue-cefr {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 8px;
  color: #fff;
}
.continue-cefr.a1 { background: #2E86C1; }
.continue-cefr.a2 { background: #28B463; }
.continue-cefr.b1 { background: #F39C12; }
.continue-cefr.b2 { background: #E74C3C; }

.pack-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════ */
.top { display:flex; align-items:center; justify-content:space-between; padding:14px 2px 6px; }
.logo { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; color:#7F2824; text-decoration:none; }
.logo span { color:#3D2B1F; }
.top-right { display:flex; align-items:center; gap:8px; }
.lang { display:flex; background:#fff; border:1.5px solid rgba(191,172,149,0.35); border-radius:60px; overflow:hidden; }
.lang button { padding:5px 11px; font-family:'Sarabun',sans-serif; font-size:11px; font-weight:700; color:#7A6A5A; border:none; background:transparent; cursor:pointer; }
.lang button.active { background:#7F2824; color:#fff; border-radius:60px; }
.iconbtn { background:none; border:1.5px solid #ddd; color:#7A6A5A; font-family:'Sarabun',sans-serif; font-size:0.72rem; font-weight:700; padding:5px 11px; border-radius:20px; cursor:pointer; }

/* ══════════════════════════════════════
   GREETING
   ══════════════════════════════════════ */
.hello { padding:6px 2px 2px; }
.hello h1 { font-family:'Playfair Display',serif; font-size:1.5rem; color:#7F2824; font-weight:700; line-height:1.2; }
.hello p { font-size:0.85rem; color:#7A6A5A; margin-top:2px; }

/* ══════════════════════════════════════
   STATS BAR (bigger, lifted, exciting)
   ══════════════════════════════════════ */
.stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin: 14px 0 12px;
}
.stat-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 4px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(127, 40, 36, 0.08);
  border: 1px solid rgba(191,172,149,0.15);
  transition: transform 0.2s ease;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card .icon { font-size: 1.4rem; display: block; }
.stat-card .val { font-size: 1.4rem; font-weight: 700; color: #2D1C12; display: block; line-height: 1.3; }
.stat-card .lbl { font-size: 0.6rem; color: #7A6A5A; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin-top: 2px; font-weight: 700; }
.stat-card.pass .val { color: #16a34a; }
.stat-card.honor .val { color: #7F2824; }
.stat-card.star .val { color: #c9963a; }
.stat-card.phrase .val { color: #2A6B6B; }

/* ══════════════════════════════════════
   CONTINUE CARD (Maroon Gradient with White Button)
   ══════════════════════════════════════ */
.continue-card {
  background: linear-gradient(135deg, #7F2824, #5A1C19);
  border-radius: 16px;
  padding: 9px 14px;
  margin-top: 8px;
  box-shadow: 0 3px 12px rgba(127, 40, 36, 0.18);
  color: #fff;
}
.continue-card .label { color: rgba(255,255,255,0.7); }
.continue-card .label { font-size: 0.7rem; font-weight: 700; letter-spacing: .4px; }
.continue-card .title { font-size: 0.95rem !important; }
.continue-card .sub, .continue-card .row { font-size: 0.72rem !important; }
.continue-card .title { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.continue-card .sub { color: rgba(255,255,255,0.85); }
.continue-card .track { background: rgba(255,255,255,0.25); }
.continue-card .fill { height: 100%; background: #16a34a; border-radius: 4px; transition: width 0.5s ease; }
.continue-card .fill.done { background: #7F2824; }
.continue-card .row { color: rgba(255,255,255,0.7); }
.continue-card .go {
  display: block; width: auto; margin: 6px 0 0 auto; padding: 6px 18px;
  background: #fff; color: #7F2824; border: none; border-radius: 30px;
  font-family: 'Sarabun', sans-serif; font-weight: 800; font-size: 0.8rem;
  cursor: pointer; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.continue-card .go:hover { transform: scale(1.02); }
.continue-card .go:active { transform: scale(0.98); }
.continue-card .go.empty { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.continue-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════
   PRODUCT SECTIONS
   ══════════════════════════════════════ */
.sect {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #BFAC95;
  margin: 20px 2px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sect .badge {
  font-size: 0.6rem;
  background: #7F2824;
  color: #fff;
  padding: 2px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

/* ── MAIN CARD ── */
.card {
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.card.locked { background: #FBF9F7; border: 1.5px dashed rgba(191,172,149,0.55); box-shadow: none; }
.card-head { display:flex; align-items:flex-start; gap:12px; }
.card-icon { font-size:1.5rem; line-height:1; flex-shrink:0; }
.card-title { font-weight:700; font-size:1.05rem; color:#2A1A0E; }
.card-desc { font-size:0.82rem; color:#7A6A5A; margin-top:2px; line-height:1.5; }
.card-body { margin-top:12px; }

/* ── BUTTONS ── */
.btn {
  display:block; width:100%; padding:12px; border:none; border-radius:60px;
  background:#7F2824; color:#fff; font-family:'Sarabun',sans-serif; font-weight:700; font-size:0.95rem;
  cursor:pointer; text-align:center; text-decoration:none; margin-top:12px;
  transition: transform 0.15s ease;
}
.btn:active { transform:scale(0.985); }
.btn.ghost { background:transparent; color:#7F2824; border:1.5px solid rgba(191,172,149,0.6); }
.price { display:inline-block; background:rgba(127,40,36,0.08); color:#7F2824; font-weight:700; font-size:0.85rem; padding:3px 11px; border-radius:20px; margin-top:8px; }

/* ── PACK ROWS ── */
.pack-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(191,172,149,0.18);
  cursor: pointer;
  transition: background 0.1s, transform 0.15s;
}
.pack-row:first-child { border-top: none; }
a.fe-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:7px 14px; border-radius:8px; background:#7F2824; color:#fff !important; font-weight:600; font-size:0.82rem; text-decoration:none; cursor:pointer; }
a.fe-btn:hover { background:#6a201c; }
.pk-cover { width:56px; height:90px; object-fit:cover; border-radius:8px; flex:none; cursor:zoom-in; background:#F2EFEA; box-shadow:0 2px 6px rgba(0,0,0,0.18); }
.fe-cover-big { width:112px; height:179px; object-fit:cover; border-radius:10px; flex:none; cursor:zoom-in; background:#F2EFEA; box-shadow:0 3px 10px rgba(0,0,0,0.22); }
.fe-cur { display:flex; gap:12px; align-items:flex-start; }
.fe-cur-b, .fe-row-b { flex:1; min-width:0; }
.fe-sub { font-size:0.74rem; color:#7A6A5A; margin-top:1px; }
.fe-heads { margin-top:5px; font-size:0.74rem; line-height:1.45; }
.fe-h-th { color:#3D2B1F; font-weight:600; }
.fe-h-en { color:#9A8A7A; font-size:0.68rem; }
.fe-det { margin-top:10px; background:#FBF9F7; border-radius:10px; padding:8px 12px; }
.fe-det summary { cursor:pointer; font-weight:700; font-size:0.85rem; color:#7F2824; }
.fg-hero { margin:0 0 10px; }
.fg-pill { display:inline-block; background:#7F2824; color:#fff; font-size:0.66rem; font-weight:800; letter-spacing:.6px; border-radius:999px; padding:2px 9px; margin-bottom:5px; }
.fe-close { display:block; text-align:center; margin-top:10px; padding:8px; border-radius:8px; background:#fff; border:1.5px solid #7F2824; color:#7F2824; font-weight:700; font-size:0.82rem; text-decoration:none; cursor:pointer; }
.fe-more { margin-top:12px; }
.fe-more .fe-list { margin-top:8px; }
.fe-next-h { margin:14px 0 6px; font-weight:800; font-size:0.85rem; color:#2A1A0E; }
.fe-list { max-height:440px; overflow-y:auto; -webkit-overflow-scrolling:touch; border-top:1px solid #eee; padding-right:2px; }
.fe-row { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f0ebe4; align-items:flex-start; }
.fe-row-t { font-size:0.88rem; font-weight:700; line-height:1.3; }
.fe-n { display:inline-block; font-size:0.7rem; font-weight:800; color:#fff; background:#7F2824; border-radius:6px; padding:1px 6px; margin-right:2px; }
.fe-lock { display:inline-block; margin-top:6px; font-size:0.74rem; color:#7A6A5A; }
.fe-div { margin:10px 0 2px; font-size:0.74rem; font-weight:800; color:#7F2824; }
.pack-row:hover { background: #f8f6f3; margin: 0 -4px; padding-left: 4px; padding-right: 4px; border-radius: 6px; transform: scale(1.01); }
.pack-main { flex: 1; min-width: 0; }
.pack-name { font-size: 0.92rem; font-weight: 600; color: #2A1A0E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack-stats {
  display: flex;
  gap: 8px;
  font-size: 0.68rem;
  color: #7A6A5A;
  margin-top: 4px;
  flex-wrap: wrap;
}
.pack-stats span {
  background: #F2EFEA;
  padding: 2px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pack-stats .pass { color: #16a34a; font-weight: 700; }
.pack-stats .hon { color: #7F2824; font-weight: 700; }
.pack-stats .avg { color: #c9963a; font-weight: 700; font-size: 0.85rem; }
.pack-stats a.games-link { color: #7F2824; font-weight: 700; cursor: pointer; text-decoration: none; background: rgba(127,40,36,0.1); }
.pack-stats a.games-link:hover { background: rgba(127,40,36,0.18); }
.pack-actions { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; margin-top: 8px; }
.pack-actions a.act-btn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border-radius: 8px; background: #7F2824; color: #fff; font-weight: 600; font-size: 0.72rem; text-align: center; text-decoration: none; cursor: pointer; line-height: 1.2; }
.pack-actions a.act-btn:hover { background: #6a201c; }
.pack-status {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.pack-status.done { background: #16a34a20; color: #16a34a; }
.pack-status.active {
  background: #7F282420;
  color: #7F2824;
  animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(127,40,36,0.3); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(127,40,36,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(127,40,36,0); }
}
.pack-status.locked { background: #EDE9E2; color: #7A6A5A; }
.pack-arrow { color: #BFAC95; font-size: 0.9rem; flex-shrink: 0; }

/* ── VOICE LAB CARD ── */
.vl-credit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #F2EFEA;
  border-radius: 30px;
  justify-content: center;
}
.vl-credit-row .num { font-size: 1.3rem; font-weight: 700; color: #7F2824; }
.vl-credit-row .lbl { font-size: 0.75rem; color: #7A6A5A; }

.vl-track { height: 6px; background: #EDE9E2; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.vl-fill { height: 100%; background: #16a34a; border-radius: 4px; transition: width 0.4s ease; }
.vl-fill.high { background: #16a34a; }
.vl-fill.medium { background: #7F2824; }
.vl-fill.low { background: #dc2626; }

/* Added 12 Aug 2026 — VOCAP standalone credit bar, same shape as Voice
   Lab's above but amber to match VOCAP's own accent. No "total ever
   purchased" figure is tracked (only the current balance), so the bar
   is scaled against the largest top-up tier (600 credits) as a rough
   "how full is the tank" reference, not a literal % of a real total. */
.vocap-credit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 12px; background: #F2EFEA; border-radius: 30px; justify-content: center; }
.vocap-credit-row .num { font-size: 1.3rem; font-weight: 700; color: #C9791F; }
.vocap-credit-row .lbl { font-size: 0.75rem; color: #7A6A5A; }
.vocap-credit-track { height: 6px; background: #EDE9E2; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.vocap-credit-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; background: #C9791F; }
.vocap-credit-fill.low { background: #dc2626; }
.vocap-credit-status { font-size: 0.7rem; font-weight: 700; padding: 3px 14px; border-radius: 12px; display: inline-block; margin-top: 4px; }
.vocap-credit-status.healthy { background: rgba(201,121,31,0.15); color: #C9791F; }
.vocap-credit-status.low { background: #c9963a20; color: #c9963a; }
.vocap-credit-status.empty { background: #dc262620; color: #dc2626; }

.vl-stats {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.vl-stats span {
  background: #F2EFEA;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vl-stats .pass { color: #16a34a; font-weight: 700; }
.vl-stats .hon { color: #7F2824; font-weight: 700; }
.vl-stats .avg { color: #c9963a; font-weight: 700; font-size: 0.85rem; }

.vl-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 12px;
  display: inline-block;
  margin-top: 4px;
}
.vl-status.healthy { background: #16a34a20; color: #16a34a; }
.vl-status.low { background: #c9963a20; color: #c9963a; }
.vl-status.empty { background: #dc262620; color: #dc2626; }

/* ── epub note ── */
.epub-note {
  background: rgba(191,172,149,0.12);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: #7A6A5A;
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.epub-note .icon { font-size: 1rem; flex-shrink: 0; }

/* ══════════════════════════════════════
   VOCAP CARD — added v9.5 (12 Aug 2026)
   ══════════════════════════════════════ */
.vocap-stats {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.vocap-stats span {
  background: #F2EFEA;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vocap-stats .words { color: #16a34a; font-weight: 700; }
.vocap-stats .laurels { color: #C9791F; font-weight: 700; }
.vocap-stats .streak { color: #7F2824; font-weight: 700; }
.vocap-lb {
  margin-top: 10px;
  border-top: 1px solid rgba(191,172,149,0.25);
  padding-top: 8px;
}
.vocap-lb-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #BFAC95; margin-bottom: 6px;
}
.vocap-lb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 8px; font-size: 0.8rem;
}
.vocap-lb-row.me { background: rgba(201,121,31,0.1); font-weight: 700; }
.vocap-lb-pos { width: 18px; color: #7A6A5A; font-weight: 700; font-size: 0.72rem; flex-shrink: 0; }
.vocap-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2A1A0E; }
.vocap-lb-val { color: #7A6A5A; font-size: 0.72rem; flex-shrink: 0; }
.vocap-lb-empty { font-size: 0.78rem; color: #7A6A5A; padding: 6px 0; }
/* ── what's new ── */
.newstrip {
  background: linear-gradient(135deg, #2A1A0E, #3D2B1F);
  color: #fff;
  border-radius: 18px;
  padding: 16px;
  margin-top: 18px;
}
.newstrip .tag {
  display: inline-block;
  background: #BFAC95;
  color: #2A1A0E;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: 0.6px;
}
.newstrip h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin: 8px 0 3px; }
.newstrip p { font-size: 0.78rem; color: rgba(255,255,255,0.75); line-height: 1.5; }

/* ══════════════════════════════════════
   LOGIN
   ══════════════════════════════════════ */
.login-wrap { max-width:380px; margin:48px auto 0; }
/* ╔═══ ║ SIGN-IN PAGE LOOK (10 Oct 2026) — layout only, sign-in logic untouched ╚═══ */
#login-view.login-wrap { max-width:420px; margin:0 auto; padding:0 0 28px; }
.lg-hero { background:linear-gradient(160deg,#7F2824 0%,#9A3A33 55%,#B5645A 100%); color:#F2EFEA; text-align:center; padding:22px 20px 70px; border-radius:0 0 28px 28px; position:relative; overflow:hidden; }
.lg-hero::before,.lg-hero::after { content:""; position:absolute; border-radius:50%; background:rgba(242,239,234,.07); }
.lg-hero::before { width:220px; height:220px; top:-90px; right:-70px; }
.lg-hero::after { width:150px; height:150px; bottom:-60px; left:-40px; }
.lg-hero > * { position:relative; z-index:1; }
.lg-lang { display:flex; justify-content:flex-end; gap:6px; margin-bottom:6px; }
.lg-lang button { background:rgba(242,239,234,.14); color:#F2EFEA; border:1px solid rgba(242,239,234,.35); border-radius:999px; padding:5px 12px; font:700 .78rem 'Sarabun',sans-serif; cursor:pointer; }
.lg-lang button.active { background:#F2EFEA; color:#7F2824; }
.lg-hero .logo { color:#F2EFEA; font-size:1.9rem; }
.lg-hero .logo span { color:#F2D9B0; }
.lg-cup { font-size:2rem; margin:2px 0 0; display:block; animation:lgsteam 3.5s ease-in-out infinite; }
.lg-tag { font:700 1.15rem/1.4 'Playfair Display','Sarabun',serif; margin:10px 0 4px; }
.lg-sub { font-size:.92rem; opacity:.9; margin:0; }
.lg-demo { background:#fff; color:#3D2B1F; border-radius:16px; margin:-46px 18px 0; padding:14px 16px; box-shadow:0 8px 24px rgba(61,43,31,.18); text-align:center; position:relative; z-index:2; }
.lg-demo .en { font:700 1.05rem 'Playfair Display',serif; }
.lg-demo .th { font-size:.85rem; color:#7A6A5A; margin-top:2px; }
.lg-stars { font-size:1.6rem; letter-spacing:4px; margin-top:8px; color:#E3D8C9; }
.lg-stars span { display:inline-block; animation:lgstar 6s infinite; }
.lg-stars span:nth-child(2){animation-delay:.5s}.lg-stars span:nth-child(3){animation-delay:1s}.lg-stars span:nth-child(4){animation-delay:1.5s}
.lg-pass { font-size:.74rem; color:#7A6A5A; margin-top:4px; }
.lg-feats { display:flex; gap:8px; margin:16px 18px 4px; }
.lg-feats div { flex:1; background:#fff; border:1px solid #E3D8C9; border-radius:14px; padding:10px 6px; text-align:center; font-size:.76rem; line-height:1.35; color:#3D2B1F; }
.lg-feats b { display:block; font-size:1.3rem; margin-bottom:2px; }
.lg-trust { text-align:center; font-size:.8rem; font-weight:700; color:#7F2824; margin:12px 18px 0; letter-spacing:.2px; }
#login-view > .card { margin:14px 18px 0; }
#login-view > .tiny { margin-left:18px; margin-right:18px; }
@keyframes lgstar { 0%,8%{color:#E3D8C9;transform:scale(1)} 14%,70%{color:#E0A526;transform:scale(1.18)} 80%,100%{color:#E3D8C9;transform:scale(1)} }
@keyframes lgsteam { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(-4px);opacity:.85} }
@media (prefers-reduced-motion:reduce){ .lg-stars span,.lg-cup{animation:none} .lg-stars{color:#E0A526} }
body:has(#login-view[style*="block"]) { padding-bottom:8px; }
/* one-screen fit (keeps the first look, scaled to the screen height) */
#login-view.login-wrap { padding-bottom:10px; }
.lg-hero { padding:10px 18px 46px; border-radius:0 0 24px 24px; }
.lg-lang { margin-bottom:0; }
.lg-lang button { padding:3px 10px; font-size:.72rem; }
.lg-hero .logo { font-size:1.7rem; }
.lg-cup { font-size:1.6rem; margin:0; animation:lgsteam 3.5s ease-in-out infinite; }
.lg-tag { font-size:1.02rem; margin:4px 0 2px; }
.lg-sub { font-size:.84rem; }
.lg-demo { margin:-32px 18px 0; padding:9px 14px; }
.lg-demo .en { font-size:1rem; }
.lg-demo .th { font-size:.8rem; }
.lg-stars { font-size:1.3rem; margin-top:3px; }
.lg-pass { display:none; }
.lg-feats { margin:10px 18px 0; gap:6px; }
.lg-feats div { padding:6px 4px; font-size:.7rem; line-height:1.25; }
.lg-feats b { font-size:1.1rem; margin-bottom:0; }
.lg-trust { margin:8px 18px 0; font-size:.74rem; }
#login-view > .card { margin:8px 18px 0; padding:14px 18px; }
#login-view .card-title { font-size:1.08rem; }
#login-view .card-desc { margin:2px 0 0; font-size:.82rem; }
.login-wrap input { padding:10px 14px; margin-bottom:7px; }
#login-view .forgot-link { margin:-2px 0 6px; }
#login-view .btn { padding:12px; }
#login-view > .tiny { margin-top:8px; }
@media (max-height:720px){ .lg-sub{display:none} .lg-feats div span{display:none} .lg-feats div{padding:5px} }
@media (max-height:640px){ .lg-demo{display:none} .lg-hero{padding-bottom:16px} .lg-feats{display:none} }
.login-wrap input { width:100%; padding:13px 14px; border:1.5px solid #ddd; border-radius:12px; font-family:'Sarabun',sans-serif; font-size:1rem; margin-bottom:10px; background:#fff; }
.login-wrap input:focus { outline:none; border-color:#BFAC95; }
.msg { font-size:0.82rem; padding:10px 12px; border-radius:10px; margin-bottom:10px; display:none; }
.msg.show { display:block; }
.msg.err { background:#fee2e2; color:#dc2626; }
.msg.ok { background:rgba(22,163,74,0.12); color:#16a34a; }
.tiny { font-size:0.74rem; color:#7A6A5A; text-align:center; margin-top:14px; line-height:1.6; }
.tiny a { color:#7F2824; font-weight:700; cursor:pointer; }
.empty { font-size:0.82rem; color:#7A6A5A; padding:4px 0; }

/* ── Forgot password link ── */
.forgot-link {
  text-align: right;
  margin: -6px 0 12px 0;
}
.forgot-link a {
  font-size: 0.8rem;
  color: #7F2824;
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}

/* ══════════════════════════════════════
   FOOTER (TONED DOWN TO KEEP EYES UP)
   ══════════════════════════════════════ */
.foot {
  text-align: center;
  font-size: 0.7rem;
  color: #BFAC95;
  padding-top: 20px;
  margin-top: 14px;
  border-top: 1px solid rgba(191,172,149,0.2);
}
.foot span { color: #7A6A5A; font-weight: 600; }
.foot a { color: #7A6A5A; text-decoration: none; font-weight: 600; transition: color 0.2s; }
.foot a:hover { color: #7F2824; }

.spin { display:inline-block; animation:sp 1s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════
   CREDIT TOAST — added 9 Sep 2026
   Fires when a credit balance is higher than it was on this device's
   last visit (compared via localStorage, see checkCreditIncrease()).
   ══════════════════════════════════════ */
#credit-toast-wrap {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 28px);
  max-width: 460px;
  pointer-events: none;
}
.credit-toast {
  background: linear-gradient(135deg, #7F2824, #5A1C19);
  color: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(127,40,36,0.35);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Sarabun', sans-serif;
  animation: creditToastIn 0.35s ease, creditToastOut 0.4s ease 3.6s forwards;
}
.credit-toast .icon { font-size: 1.5rem; flex-shrink: 0; }
.credit-toast .msg { font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
@keyframes creditToastIn {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes creditToastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-14px); }
}

/* ══════════════════════════════════════
   SHOP — PAY BY PROMPTPAY (added v9.8, 26 Sep 2026)
   ══════════════════════════════════════ */
.backlink { color:#7F2824; font-weight:700; font-size:0.85rem; text-decoration:none; cursor:pointer; }
.shop-tabs { display:flex; gap:6px; margin:14px 0 12px; }
.shop-tabs button { flex:1; padding:9px 4px; border:1.5px solid rgba(191,172,149,0.5); background:#fff; color:#7A6A5A; font-family:'Sarabun',sans-serif; font-weight:700; font-size:0.78rem; border-radius:12px; cursor:pointer; }
.shop-tabs button.on { background:#7F2824; color:#fff; border-color:#7F2824; }
.shop-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid rgba(191,172,149,0.18); cursor:pointer; }
.shop-row:first-child { border-top:none; }
.shop-row.dim { opacity:0.5; cursor:default; }
.shop-row.inorder { opacity:0.92; cursor:default; }
.shop-row.inorder .shop-price { white-space:normal; text-align:right; flex:0 0 96px; font-size:0.8rem; line-height:1.35; }
.shop-row .order-link { display:inline-block; margin-top:4px; font-size:0.78rem; font-weight:700; color:#7F2824; text-decoration:underline; }
.shop-row.sel { background:rgba(127,40,36,0.05); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:8px; }
.shop-check { width:22px; height:22px; border:2px solid #BFAC95; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#fff; flex-shrink:0; }
.shop-row.sel .shop-check { background:#7F2824; border-color:#7F2824; }
.shop-price { font-weight:700; color:#7F2824; font-size:0.9rem; white-space:nowrap; }
.qty { display:inline-flex; align-items:center; gap:8px; }
.qty button { width:30px; height:30px; border-radius:50%; border:1.5px solid #BFAC95; background:#fff; color:#7F2824; font-size:1.1rem; font-weight:700; cursor:pointer; line-height:1; }
.qty span { min-width:18px; text-align:center; font-weight:700; }
.cartbar { position:sticky; bottom:calc(8px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1.5px solid rgba(127,40,36,0.25); border-radius:16px; padding:10px 12px; margin-top:12px; box-shadow:0 6px 20px rgba(127,40,36,0.15); font-size:0.85rem; }
.cartbar .btn { width:auto; margin-top:0; padding:10px 18px; }
.cartbar .btn[disabled] { opacity:0.45; }
.shop-err { display:none; background:#fee2e2; color:#dc2626; font-size:0.82rem; padding:9px 12px; border-radius:10px; margin:10px 0 0; }
.pay-hint { font-size:0.78rem; color:#7A6A5A; margin-top:10px; line-height:1.55; }
.pay-hint a { color:#7F2824; font-weight:700; }
.paybox .pay-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0; border-top:1px solid rgba(191,172,149,0.18); }
.paybox .pay-line:first-child { border-top:none; }
.pay-lbl { flex:1 1 100%; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#BFAC95; }
.pay-val { flex:1; font-size:1.15rem; font-weight:700; color:#2A1A0E; word-break:break-all; }
.copy { border:1.5px solid rgba(191,172,149,0.6); background:#fff; color:#7F2824; font-family:'Sarabun',sans-serif; font-weight:700; font-size:0.72rem; padding:5px 12px; border-radius:20px; cursor:pointer; }
.pay-steps { padding-left:20px; font-size:0.85rem; line-height:1.6; color:#3D2B1F; }
.pay-steps li { margin-bottom:6px; }
.upl input[type=file] { width:100%; margin:10px 0 0; font-family:'Sarabun',sans-serif; font-size:0.85rem; }
.order-card { border-left:4px solid #BFAC95; }
.order-card.ok { border-left-color:#16a34a; }
.order-card.warn { border-left-color:#c9963a; }
.order-card.err { border-left-color:#dc2626; }
.order-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.order-what { font-weight:700; font-size:0.95rem; color:#2A1A0E; }
.order-amt { font-weight:700; color:#7F2824; white-space:nowrap; }
.order-ref { font-size:0.75rem; color:#7A6A5A; margin:2px 0 8px; }
.order-card p { font-size:0.82rem; line-height:1.55; color:#3D2B1F; }

.det-link { display:inline-block; margin-top:3px; font-size:0.72rem; font-weight:700; color:#7F2824; text-decoration:none; cursor:pointer; }
.shop-detail { background:#FBF9F7; border-radius:10px; padding:10px 12px; margin:0 0 6px 0; font-size:0.8rem; line-height:1.55; color:#3D2B1F; white-space:pre-line; }
.shop-detail p { margin:6px 0 0; }
.shop-detail .pack-stats { margin-top:0; }

.shop-cover { width:72px; height:115px; cursor:zoom-in; object-fit:cover; border-radius:10px; flex-shrink:0; background:#F2EFEA; }
.shop-detail .detail-cover { display:block; width:100%; max-width:220px; height:auto; border-radius:12px; margin:0 0 8px; cursor:zoom-in; }

.pack-desc[data-filled] { white-space:normal; overflow-x:auto; }
.pack-desc img { max-width:100%; height:auto; }
.cover-lb { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.88); display:flex; align-items:center; justify-content:center; z-index:10000; padding:12px; cursor:zoom-out; }
.cover-lb img { max-width:100%; max-height:100%; border-radius:10px; }

.hide-link { color:#7A6A5A; font-weight:700; font-size:0.72rem; text-decoration:none; cursor:pointer; }
.pay-fold { display:flex; align-items:center; gap:6px; width:100%; margin:4px 0 10px; padding:11px 14px; background:#fff; border:1.5px solid rgba(191,172,149,0.5); border-radius:12px; font-family:'Sarabun',sans-serif; font-size:0.85rem; font-weight:700; color:#3D2B1F; cursor:pointer; text-align:left; }
.pay-fold .pf-arrow { color:#7F2824; width:14px; }
.pay-fold .pf-hint { margin-left:auto; color:#7F2824; font-size:0.75rem; }
.pk-in { width:100%; box-sizing:border-box; margin:0 0 8px; padding:9px 14px; border:1.5px solid #ddd; border-radius:999px; font-size:0.9rem; background:#F2EFEA; font-family:inherit; outline:none; }
.pk-in:focus { border-color:#7F2824; background:#fff; }
.pk-none { text-align:center; padding:12px 0; color:#7A6A5A; font-size:0.85rem; }
.install-bar { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:11px 14px; background:#fff; border:1.5px solid rgba(191,172,149,0.5); border-radius:12px; font-family:'Sarabun',sans-serif; }
.install-bar .ib-text { flex:1; min-width:0; font-size:0.85rem; font-weight:700; color:#3D2B1F; line-height:1.35; }
.install-bar .ib-text small { display:block; font-weight:400; color:#7A6A5A; font-size:0.76rem; }
.install-bar button { border:0; border-radius:999px; padding:9px 16px; font-family:inherit; font-size:0.85rem; font-weight:700; cursor:pointer; }
.install-bar .ib-go { background:#7F2824; color:#fff; }
.install-bar .ib-x { background:transparent; color:#7A6A5A; padding:6px 8px; font-size:1rem; }
.hist-link { text-align:center; margin:2px 0 8px; font-size:0.82rem; }
.hist-link a { color:#7F2824; font-weight:700; text-decoration:none; }
.hist-row { padding:10px 0; border-top:1px solid rgba(191,172,149,0.18); }
.hist-row:first-child { border-top:none; }
.hist-top { display:flex; justify-content:space-between; gap:10px; font-size:0.9rem; }
.hist-what { font-weight:600; color:#2A1A0E; }
.hist-amt { font-weight:700; color:#7F2824; white-space:nowrap; }
.hist-sub { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:0.72rem; color:#7A6A5A; margin-top:3px; }
.hist-st.ok { color:#16a34a; font-weight:700; } .hist-st.warn { color:#c9963a; font-weight:700; }

.qr-wrap { text-align:center; padding:4px 0 12px; border-bottom:1px solid rgba(191,172,149,0.18); margin-bottom:6px; }
.qr-box { display:inline-block; min-width:150px; min-height:150px; }
.qr-img { width:100%; max-width:250px; height:auto; border:1px solid rgba(191,172,149,0.5); border-radius:10px; background:#fff; }
.qr-cap { font-size:0.85rem; font-weight:700; color:#2A1A0E; margin:6px 0 8px; }
</style>
<!-- APP INSTALL (PWA): manifest, icons and app tags. The same block is on every retail page. -->
<link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" type="image/png" href="/icons/cuppathai-com-b-192.png">
<link rel="apple-touch-icon" href="/icons/cuppathai-com-b-apple-180.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="CuppaThai">
<script src="/pwa.js" defer></script>
</head>
<body>

<!-- Credit-increase toasts — added 9 Sep 2026, see checkCreditIncrease() -->
<div id="credit-toast-wrap"></div>

<!-- ╔═══════════════════════════════════════════
     ║ NAV BAR
     ╚═══════════════════════════════════════════ -->
<div class="top" id="topbar" style="display:none;">
  <a href="https://cuppathai.com" class="logo">Cuppa<span>Thai</span></a>
  <div class="top-right">
    <div class="lang">
      <button id="lang-th" onclick="setLang('th')">ไทย</button>
      <button id="lang-en" onclick="setLang('en')">EN</button>
    </div>
    <button class="iconbtn" onclick="signOut()" data-th="ออก" data-en="Sign out">ออก</button>
  </div>
</div>

<!-- ╔═══════════════════════════════════════════
     ║ LOGIN VIEW
     ╚═══════════════════════════════════════════ -->
<div id="login-view" class="login-wrap" style="display:block;">
  <!-- ╔═══ ║ SIGN-IN HERO — welcome, sample scoring card, three features, trust line ╚═══ -->
  <div class="lg-hero">
    <div class="lg-lang">
      <button class="ll-th" onclick="setLang('th')">ไทย</button>
      <button class="ll-en" onclick="setLang('en')">EN</button>
    </div>
    <a href="https://cuppathai.com" class="logo">Cuppa<span>Thai</span></a>
    <span class="lg-cup" aria-hidden="true">☕</span>
    <p class="lg-tag" data-th="ฝึกพูดภาษาอังกฤษให้มั่นใจ ทีละวลี" data-en="Practice English out loud, one phrase at a time">ฝึกพูดภาษาอังกฤษให้มั่นใจ ทีละวลี</p>
    <p class="lg-sub" data-th="พูดใส่ไมค์ แล้วรับคะแนนจาก AI ทันที" data-en="Speak into your phone and get an instant AI score">พูดใส่ไมค์ แล้วรับคะแนนจาก AI ทันที</p>
  </div>
  <div class="lg-demo" aria-hidden="true">
    <div class="en">It is sunny and warm.</div>
    <div class="th">อากาศแจ่มใสและอบอุ่น</div>
    <div class="lg-stars"><span>★</span><span>★</span><span>★</span><span>★</span></div>
    <div class="lg-pass" data-th="4 ดาว = ผ่าน" data-en="4 stars = pass">4 ดาว = ผ่าน</div>
  </div>
  <div class="lg-feats">
    <div><b>🎤</b><span data-th="Voice Lab ฝึกพูด" data-en="Voice Lab speaking practice">Voice Lab ฝึกพูด</span></div>
    <div><b>📖</b><span data-th="บทเรียนพร้อมเสียง" data-en="Lessons with audio">บทเรียนพร้อมเสียง</span></div>
    <div><b>🎮</b><span data-th="เกมฝึกคำศัพท์" data-en="Practice games">เกมฝึกคำศัพท์</span></div>
  </div>
  <p class="lg-trust" data-th="เริ่มใช้ฟรี · 1,900+ วลี · ให้คะแนนด้วย AI" data-en="Free to start · 1,900+ phrases · scored by AI">เริ่มใช้ฟรี · 1,900+ วลี · ให้คะแนนด้วย AI</p>
  <div class="card">
    <div class="card-title" id="auth-card-title" data-th="เข้าสู่ระบบ" data-en="Sign in">เข้าสู่ระบบ</div>
    <p class="card-desc" id="auth-card-desc" data-th="ใช้อีเมลเดียวกับตอนสั่งซื้อ" data-en="Use the same email you bought with">ใช้อีเมลเดียวกับตอนสั่งซื้อ</p>
    <div style="margin-top:14px;">
      <div class="msg err" id="login-err"></div>
      <div class="msg ok" id="login-ok"></div>
      <input type="text" id="nickname" placeholder="ชื่อเล่น / Nickname" autocomplete="given-name" style="display:none;">
      <input type="email" id="email" placeholder="อีเมล / Email" autocomplete="username">
      <input type="password" id="password" placeholder="รหัสผ่าน / Password" autocomplete="current-password">

      <!-- ─── FORGOT PASSWORD LINK ─── -->
      <div class="forgot-link">
        <a id="forgot-pw-link" data-th="ลืมรหัสผ่าน?" data-en="Forgot password?">ลืมรหัสผ่าน?</a>
      </div>

      <button class="btn" id="login-btn" onclick="doLogin()" data-th="เข้าสู่ระบบ" data-en="Sign in">เข้าสู่ระบบ</button>
      <p class="tiny" id="toggle-line">
        <span id="toggle-text" data-th="ยังไม่มีแดชบอร์ด?" data-en="No dashboard yet?">ยังไม่มีแดชบอร์ด?</span>
        <a id="toggle-link" onclick="toggleSignupMode()" data-th="สร้างแดชบอร์ดฟรี" data-en="Get your free dashboard">สร้างแดชบอร์ดฟรี</a>
      </p>
    </div>
  </div>
  <p class="tiny" style="margin-top:18px;">
    <a href="https://cuppathai.com" data-th="← กลับหน้าแรก" data-en="← Back to home">← กลับหน้าแรก</a>
  </p>
</div>

<!-- ╔═══════════════════════════════════════════
     ║ RESET PASSWORD VIEW — added 12 Aug 2026
     ║ Reached only when Supabase hands the page a
     ║ recovery session (PASSWORD_RECOVERY auth event,
     ║ see the listener below) after the emailed reset
     ║ link is clicked. Before this existed, that link
     ║ landed here with no way to actually set a new
     ║ password — the page just fell through to the
     ║ ordinary sign-in form.
     ╚═══════════════════════════════════════════ -->
<div id="reset-view" class="login-wrap" style="display:none;">
  <div style="text-align:center;margin-bottom:18px;">
    <a href="https://cuppathai.com" class="logo" style="font-size:1.6rem;text-decoration:none;">Cuppa<span>Thai</span></a>
  </div>
  <div class="card">
    <div class="card-title" data-th="ตั้งรหัสผ่านใหม่" data-en="Set a new password">ตั้งรหัสผ่านใหม่</div>
    <p class="card-desc" data-th="กรอกรหัสผ่านใหม่ของคุณด้านล่าง" data-en="Enter your new password below">กรอกรหัสผ่านใหม่ของคุณด้านล่าง</p>
    <div style="margin-top:14px;">
      <div class="msg err" id="reset-err"></div>
      <div class="msg ok" id="reset-ok"></div>
      <input type="password" id="reset-password" placeholder="รหัสผ่านใหม่ / New password" autocomplete="new-password">
      <button class="btn" id="reset-btn" onclick="doPasswordUpdate()" data-th="บันทึกรหัสผ่านใหม่" data-en="Save new password">บันทึกรหัสผ่านใหม่</button>
    </div>
  </div>
</div>

<!-- ╔═══════════════════════════════════════════
     ║ NICKNAME GATE — added 12 Aug 2026
     ║ Nickname is mandatory for new signups, but
     ║ accounts created before that fix have no
     ║ display_name at all and silently show their
     ║ email everywhere a name is displayed (the
     ║ greeting, VOCAP's leaderboard). Any such
     ║ account is routed here on login instead of
     ║ straight to the dashboard, once, until they
     ║ set one.
     ╚═══════════════════════════════════════════ -->
<div id="nickname-gate-view" class="login-wrap" style="display:none;">
  <div style="text-align:center;margin-bottom:18px;">
    <a href="https://cuppathai.com" class="logo" style="font-size:1.6rem;text-decoration:none;">Cuppa<span>Thai</span></a>
  </div>
  <div class="card">
    <div class="card-title" data-th="ตั้งชื่อเล่นของคุณ" data-en="Set your nickname">ตั้งชื่อเล่นของคุณ</div>
    <p class="card-desc" data-th="บัญชีนี้ยังไม่มีชื่อเล่น — ตั้งชื่อที่จะแสดงในระบบ" data-en="This account doesn't have a nickname yet — set the name that shows across the site">บัญชีนี้ยังไม่มีชื่อเล่น — ตั้งชื่อที่จะแสดงในระบบ</p>
    <div style="margin-top:14px;">
      <div class="msg err" id="nick-gate-err"></div>
      <input type="text" id="nick-gate-input" placeholder="ชื่อเล่น / Nickname" autocomplete="given-name">
      <button class="btn" id="nick-gate-btn" onclick="doSetNickname()" data-th="บันทึกและดำเนินการต่อ" data-en="Save and continue">บันทึกและดำเนินการต่อ</button>
    </div>
  </div>
</div>

<!-- ╔═══════════════════════════════════════════
     ║ LOADING SPINNER
     ╚═══════════════════════════════════════════ -->
<div id="loading-view" style="display:none;text-align:center;padding-top:70px;">
  <div class="spin" style="font-size:1.7rem;">☕</div>
  <p class="card-desc" data-th="กำลังโหลด..." data-en="Loading...">กำลังโหลด...</p>
</div>

<!-- ╔═══════════════════════════════════════════
     ║ SHOP VIEW — added v9.8 (choose items, pay by PromptPay, upload the slip)
     ╚═══════════════════════════════════════════ -->
<div id="shop-view" style="display:none;"><div id="shop-body"></div></div>

<!-- ╔═══════════════════════════════════════════
     ║ HUB — THE DASHBOARD
     ╚═══════════════════════════════════════════ -->
<div id="hub" style="display:none;">

  <!-- greeting -->
  <div class="hello">
    <h1 id="greet">—</h1>
    <p id="subgreet">—</p>
  </div>

  <!-- INSTALL THE APP bar (v9.25): shown only in a browser tab, never inside the installed app -->
  <div id="install-slot"></div>

  <!-- MESSAGES box (v9.28): the customer's own notices from customer_messages -->
  <div id="msg-slot"></div>

  <!-- MY PAYMENTS — added v9.8, moved under Messages v9.30: open and recent shop orders -->
  <div id="orders-slot"></div>

  <!-- stats bar -->
  <div class="stats-bar" id="stats-bar"></div>

  <!-- FREE GAMES FIRST for accounts with no purchases (v9.15) -->
  <div id="freegames-top"></div>

  <!-- FREE EPUBs (22 Oct 2026): right under the free games, then the Continue card and the Lesson Player -->
  <div id="freeepub-top"></div>

  <!-- continue card -->
  <div id="continue-slot"></div>


  <!-- LESSON PLAYER SECTION -->
  <div class="sect" data-th="บทเรียนออนไลน์" data-en="Interactive Lessons">
    <span>📚</span>
    <span data-th="บทเรียนออนไลน์" data-en="Interactive Lessons">บทเรียนออนไลน์</span>
    <span class="badge" id="pack-count-badge">0 แพ็ก</span>
  </div>
  <div id="lesson-cards"></div>

  <!-- FREE PRACTICE GAMES — added v9.14: scene 1 of every pack for any signed-in account -->
  <div id="freegames-slot"></div>

  <!-- VOICE LAB SECTION -->
  <div class="sect" data-th="Voice Lab" data-en="Voice Lab">
    <span>🎤</span>
    <span data-th="Voice Lab" data-en="Voice Lab">Voice Lab</span>
    <span class="badge" id="vl-credit-badge">0 เครดิต</span>
  </div>
  <div id="voice-cards"></div>

  <!-- VOCAP SECTION — added v9.5 -->
  <div class="sect" data-th="VOCAP" data-en="VOCAP">
    <span>🎮</span>
    <span data-th="VOCAP" data-en="VOCAP">VOCAP</span>
  </div>
  <div id="vocap-cards"></div>

  <!-- what's new -->
  <div class="newstrip" id="newstrip" style="display:none;">
    <span class="tag" data-th="ใหม่" data-en="NEW">ใหม่</span>
    <h3 id="new-title">—</h3>
    <p id="new-body">—</p>
  </div>

  <div class="foot">
    <a href="https://cuppathai.com">Cuppa<span>Thai</span></a>
    <span style="color:#BFAC95;"> · </span>
    <a href="javascript:void(0)" onclick="openShop('pack')" style="font-weight:400;color:#7A6A5A;" data-th="ร้านค้า" data-en="Shop">ร้านค้า</a>
  </div>
  <div style="text-align:center;font-size:0.72rem;color:#7A6A5A;padding:14px 0 18px;font-family:Sarabun,Tahoma,sans-serif">Powered by <b style="color:#B23A2E">Nicko</b><b style="color:#000">Systems</b></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
// ╔═══════════════ CONFIG ═══════════════╗
var SUPABASE_URL = 'https://lkuvqlsrmcrjkijvvfwv.supabase.co';
var SUPABASE_KEY = 'sb_publishable_chxJcSRaJLaeTnXO3Yfqog_m30lXfK1';
var SITE   = 'https://cuppathai.com';
// Retail Practice Games — free bonus practice on any owned pack (18 Aug
// 2026 direction: "stand alone bonus", not a separately monetized tier).
// See fixes-archive/retail-games-fix/games-index.html.
var GAMES_URL = '/games/';
// Added 8 Sep 2026 — direct EPUB download straight from the dashboard,
// no email involved. Runs as a Supabase Edge Function (Hostinger's File
// Manager blocked every version of the original PHP script — see
// fixes-archive/hub-epub-download-fix/ for the story and both versions).
var DOWNLOAD_BROKER_URL = 'https://lkuvqlsrmcrjkijvvfwv.supabase.co/functions/v1/hub-download';
var PACK_SIZE = 48;
var TRIES_PER_LESSON = 48;

// ╔═══════════════ SUPABASE ═══════════════╗
var sb = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

// ── state ──
var accessToken=null, user=null, profile={}, ownedPacks=[], progressRows=[], voiceRows=[], catalogue={};
// Added v9.5: vocapProfile is this user's own vocap_profile row (whichever
// language variant has the most words found, so something sensible shows
// even before a per-language toggle exists). vocapLeaderboard is a top-5
// preview of vocap_classic_scores for the 'en' game.
var vocapProfile=null, vocapLeaderboard=[];

// ╔═══════════════ LANGUAGE ═══════════════╗
function getCookie(n){var m=document.cookie.match(new RegExp('(^| )'+n+'=([^;]+)'));return m?m[2]:null;}
function setCookie(l){var d=new Date();d.setFullYear(d.getFullYear()+1);document.cookie='ct_lang='+l+'; expires='+d.toUTCString()+'; path=/; SameSite=Lax';}
var lang=(getCookie('ct_lang')==='en')?'en':'th';

function setLang(l){lang=l;setCookie(l);applyLang();if(user){ if(currentView==='shop-view') renderShopView(); else render(); }}

function applyLang(){
  var a=document.getElementById('lang-th'), b=document.getElementById('lang-en');
  if(a) a.classList.toggle('active',lang==='th');
  if(b) b.classList.toggle('active',lang==='en');
  document.querySelectorAll('.ll-th').forEach(function(x){x.classList.toggle('active',lang==='th');});
  document.querySelectorAll('.ll-en').forEach(function(x){x.classList.toggle('active',lang==='en');});
  document.querySelectorAll('[data-th]').forEach(function(el){var v=el.getAttribute('data-'+lang);if(v!==null)el.textContent=v;});
}

function T(th,en){return lang==='en'?en:th;}
function P(o,f){return o[f+'_'+lang]!==undefined?o[f+'_'+lang]:o[f+'_en'];}
function esc(s){return String(s).replace(/[&<>"']/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];});}

// Added 8 Sep 2026 — every "Buy" link out to WooCommerce carries the
// logged-in dashboard email as ?ct_email=, so checkout (via a matching
// snippet on cuppathai.com) can pre-fill and lock the order email to
// the account it's meant to land on. The road to any product page is
// only ever through here, so this covers the intended path; a WooCommerce
// snippet still falls back to a normal editable field if the parameter
// is ever missing (direct/bookmarked links).
function buyLink(url){
  if (!user || !user.email) return url;
  return url + (url.indexOf('?') > -1 ? '&' : '?') + 'ct_email=' + encodeURIComponent(user.email);
}

// ╔═══════════════ CEFR HELPERS ═══════════════╗
var CEFR_MAP = {
  '01': 'A1', '02': 'A1', '03': 'A1', '04': 'A1', '05': 'A1',
  '06': 'A1', '07': 'A1', '08': 'A1', '09': 'A1', '10': 'A1',
  '11': 'A2', '12': 'A2', '13': 'A2', '14': 'A2', '15': 'A2',
  '16': 'A2', '17': 'A2', '18': 'A2', '19': 'A2', '20': 'A2',
  '21': 'B1', '22': 'B1', '23': 'B1', '24': 'B1', '25': 'B1',
  '26': 'B1', '27': 'B1', '28': 'B1', '29': 'B1', '30': 'B1',
  '31': 'B1', '32': 'B1', '33': 'B1', '34': 'B1', '35': 'B1',
  '36': 'B1', '37': 'B1', '38': 'B1', '39': 'B1', '40': 'B1',
  '41': 'B2', '42': 'B2', '43': 'B2', '44': 'B2', '45': 'B2',
  '46': 'B2', '47': 'B2', '48': 'B2', '49': 'B2', '50': 'B2'
};

var CEFR_GRADE_MAP = {
  '01': 'ม.2', '02': 'ม.2', '03': 'ม.2', '04': 'ม.2', '05': 'ม.2',
  '06': 'ม.2', '07': 'ม.2', '08': 'ม.2', '09': 'ม.2', '10': 'ม.2',
  '11': 'ม.3', '12': 'ม.3', '13': 'ม.3', '14': 'ม.3', '15': 'ม.3',
  '16': 'ม.3', '17': 'ม.3', '18': 'ม.3', '19': 'ม.3', '20': 'ม.3',
  '21': 'ม.4', '22': 'ม.4', '23': 'ม.4', '24': 'ม.4', '25': 'ม.4',
  '26': 'ม.4', '27': 'ม.4', '28': 'ม.4', '29': 'ม.4', '30': 'ม.4',
  '31': 'ม.5', '32': 'ม.5', '33': 'ม.5', '34': 'ม.5', '35': 'ม.5',
  '36': 'ม.5', '37': 'ม.5', '38': 'ม.5', '39': 'ม.5', '40': 'ม.5',
  '41': 'ม.6', '42': 'ม.6', '43': 'ม.6', '44': 'ม.6', '45': 'ม.6',
  '46': 'ม.6', '47': 'ม.6', '48': 'ม.6', '49': 'ม.6', '50': 'ม.6'
};

function getCEFR(packId) {
  if (!packId) return 'A1';
  var num = getPackNum(packId);
  return CEFR_MAP[num] || 'A1';
}

function getGrade(packId) {
  if (!packId) return 'ม.2';
  var num = getPackNum(packId);
  return CEFR_GRADE_MAP[num] || 'ม.2';
}

// ─── Get pack number from catalogue ──────────────
function getPackNum(packId) {
  if (!packId) return '01';
  var c = catalogue[packId];
  if (c && c.pack_num) {
    return String(c.pack_num).padStart(2, '0');
  }
  var match = packId.match(/-([0-9]+)-/);
  if (match) return match[1];
  match = packId.match(/-([0-9]+)$/);
  if (match) return match[1];
  match = packId.match(/([0-9]{2})/);
  if (match) return match[1];
  return '01';
}

function packDisplayInfo(packId) {
  var title = titleOf(packId);
  var packNum = getPackNum(packId);
  var cefr = getCEFR(packId);
  var grade = getGrade(packId);
  return { title: title, packNum: packNum, cefr: cefr, grade: grade };
}

function cefrColorClass(cefr) {
  return cefr ? cefr.toLowerCase() : 'a1';
}

// ╔═══════════════ API HELPER ═══════════════╗
function api(path){
  return fetch(SUPABASE_URL+'/rest/v1/'+path,{
    headers:{'apikey':SUPABASE_KEY,'Authorization':'Bearer '+(accessToken||SUPABASE_KEY),'Content-Type':'application/json'}
  }).then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); });
}

// ╔═══════════════ VIEW SWITCHER ═══════════════╗
function show(v){
  currentView = v;
  ['login-view','reset-view','nickname-gate-view','loading-view','shop-view','hub'].forEach(function(x){
    var el = document.getElementById(x);
    if (el) el.style.display = (x === v) ? 'block' : 'none';
  });
  var topbar = document.getElementById('topbar');
  if (topbar) topbar.style.display = (v === 'hub' || v === 'shop-view') ? 'flex' : 'none';
}

// ╔═══════════════ AUTH ═══════════════╗
// Fix (12 Aug 2026): clicking the emailed "reset password" link hands this
// page a temporary recovery session. The PASSWORD_RECOVERY auth event is
// supposed to catch that, but Supabase does not reliably fire it when a
// normal session is already active in the same browser (a known
// supabase-js quirk) - it just silently keeps the existing session,
// skipping straight to the dashboard instead of the reset form. Checking
// the URL directly for type=recovery (present on the link regardless of
// any existing session) is the reliable way to catch this - Supabase
// always includes it, whether the link lands as a #hash (implicit flow)
// or a ?query (PKCE flow).
function urlHasRecoveryType(){
  var hash = window.location.hash || '';
  var search = window.location.search || '';
  return /type=recovery/.test(hash) || /type=recovery/.test(search);
}
var inPasswordRecovery = urlHasRecoveryType();
if (inPasswordRecovery) show('reset-view');

sb.auth.onAuthStateChange(function(event, session){
  if (event === 'PASSWORD_RECOVERY') {
    inPasswordRecovery = true;
    accessToken = session.access_token;
    user = session.user;
    show('reset-view');
  }
});

window.addEventListener('load',function(){
  applyLang();
  if (inPasswordRecovery) return;   // already routed to the reset form above
  sb.auth.getSession().then(function(res){
    if (inPasswordRecovery) return;   // onAuthStateChange may have fired since
    var data = res.data;
    if(data&&data.session&&data.session.user){ accessToken=data.session.access_token; user=data.session.user; proceedAfterAuth(); }
    else {
      show('login-view');
      // ?signup=1 (the website's "play free" buttons): open on the create-account form
      if (/[?&]signup=1/.test(location.search || '') && !isSignupMode) toggleSignupMode();
    }
  });
});

// Fix (12 Aug 2026): nickname is mandatory for new signups, but accounts
// created before that fix have no display_name at all and silently show
// their email everywhere a name is displayed. Every path that establishes
// a logged-in user (normal load, sign-in, post-password-reset) now routes
// through here instead of calling loadAll() directly, so any account
// missing a nickname gets caught once and asked to set one before
// continuing - rather than needing a one-off SQL fix per account.
function needsNickname(u){
  var dn = u && u.user_metadata && u.user_metadata.display_name;
  return !(dn && dn.trim());
}
function proceedAfterAuth(){
  if (needsNickname(user)) { show('nickname-gate-view'); return; }
  loadAll();
}
function doSetNickname(){
  var nick = document.getElementById('nick-gate-input').value.trim();
  var err = document.getElementById('nick-gate-err');
  err.classList.remove('show');
  if(!nick){ err.textContent=T('กรุณากรอกชื่อเล่น','Please enter a nickname'); err.classList.add('show'); return; }
  var btn = document.getElementById('nick-gate-btn');
  btn.textContent = T('กำลังบันทึก...','Saving...');
  sb.auth.updateUser({ data: { display_name: nick } }).then(function(res){
    btn.textContent = T('บันทึกและดำเนินการต่อ','Save and continue');
    if(res.error){ err.textContent = res.error.message; err.classList.add('show'); return; }
    user = res.data.user;
    loadAll();
  });
}

function doPasswordUpdate(){
  var pw = document.getElementById('reset-password').value;
  var err = document.getElementById('reset-err'), ok = document.getElementById('reset-ok');
  err.classList.remove('show'); ok.classList.remove('show');
  if(!pw || pw.length<6){ err.textContent=T('รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร','Password must be at least 6 characters'); err.classList.add('show'); return; }
  var btn = document.getElementById('reset-btn');
  btn.textContent = T('กำลังบันทึก...','Saving...');
  sb.auth.updateUser({ password: pw }).then(function(res){
    btn.textContent = T('บันทึกรหัสผ่านใหม่','Save new password');
    if(res.error){ err.textContent = res.error.message; err.classList.add('show'); return; }
    inPasswordRecovery = false;
    ok.textContent = T('ตั้งรหัสผ่านใหม่แล้ว — กำลังเข้าสู่ระบบ','Password updated — signing you in');
    ok.classList.add('show');
    setTimeout(function(){ proceedAfterAuth(); }, 1200);
  });
}

// ─── FORGOT PASSWORD ──────────────────────────
document.addEventListener('click', function(e) {
  var target = e.target.closest('#forgot-pw-link');
  if (!target) return;
  e.preventDefault();
  var email = document.getElementById('email').value.trim();
  var err = document.getElementById('login-err');
  var ok = document.getElementById('login-ok');
  err.classList.remove('show');
  ok.classList.remove('show');
  if (!email) {
    err.textContent = T('กรุณากรอกอีเมลของคุณก่อน', 'Please enter your email first.');
    err.classList.add('show');
    return;
  }
  sb.auth.resetPasswordForEmail(email, {
    redirectTo: window.location.origin + '/customer-hub/'
  }).then(function(res) {
    if (res.error) {
      err.textContent = res.error.message;
      err.classList.add('show');
    } else {
      ok.textContent = T('ส่งลิงก์รีเซ็ตรหัสผ่านแล้ว ตรวจอีเมล (รวมสแปม)', 'Password reset link sent. Check your inbox (and spam).');
      ok.classList.add('show');
      setTimeout(function() {
        ok.classList.remove('show');
      }, 6000);
    }
  });
});

function doLogin(){
  var e=document.getElementById('email').value.trim(), p=document.getElementById('password').value;
  var err=document.getElementById('login-err'); err.classList.remove('show');
  if(!e||!p){ err.textContent=T('กรุณากรอกอีเมลและรหัสผ่าน','Please enter email and password'); err.classList.add('show'); return; }
  document.getElementById('login-btn').textContent=T('กำลังเข้า...','Signing in...');
  sb.auth.signInWithPassword({email:e,password:p}).then(function(res){
    document.getElementById('login-btn').textContent=T('เข้าสู่ระบบ','Sign in');
    if(res.error){ err.textContent=T('อีเมลหรือรหัสผ่านไม่ถูกต้อง','Incorrect email or password'); err.classList.add('show'); return; }
    accessToken=res.data.session.access_token; user=res.data.session.user; proceedAfterAuth();
  });
}

// ── signup mode toggle ──
var isSignupMode = false;

function toggleSignupMode(){
  isSignupMode = !isSignupMode;
  var btn   = document.getElementById('login-btn');
  var nick  = document.getElementById('nickname');
  var text  = document.getElementById('toggle-text');
  var link  = document.getElementById('toggle-link');
  var title = document.getElementById('auth-card-title');
  var desc  = document.getElementById('auth-card-desc');
  document.getElementById('login-err').classList.remove('show');
  document.getElementById('login-ok').classList.remove('show');

  if(isSignupMode){
    nick.style.display = 'block';
    nick.focus();
    title.setAttribute('data-th','สร้างแดชบอร์ดฟรีของคุณ');
    title.setAttribute('data-en','Create your free dashboard');
    title.textContent = T('สร้างแดชบอร์ดฟรีของคุณ','Create your free dashboard');
    desc.setAttribute('data-th','ใช้ซื้อและเข้าถึงบทเรียน เกม และ Voice Lab ได้ในที่เดียว ไม่มีค่าใช้จ่าย');
    desc.setAttribute('data-en','Shop lessons, play games, and use Voice Lab — all in one free dashboard.');
    desc.textContent = T('ใช้ซื้อและเข้าถึงบทเรียน เกม และ Voice Lab ได้ในที่เดียว ไม่มีค่าใช้จ่าย','Shop lessons, play games, and use Voice Lab — all in one free dashboard.');
    btn.textContent = T('สร้างแดชบอร์ดฟรี','Create my free dashboard');
    btn.setAttribute('onclick','doSignup()');
    text.setAttribute('data-th','มีแดชบอร์ดอยู่แล้ว?');
    text.setAttribute('data-en','Already have a dashboard?');
    text.textContent = T('มีแดชบอร์ดอยู่แล้ว?','Already have a dashboard?');
    link.setAttribute('data-th','เข้าสู่ระบบ');
    link.setAttribute('data-en','Sign in');
    link.textContent = T('เข้าสู่ระบบ','Sign in');
  } else {
    nick.style.display = 'none';
    nick.value = '';
    title.setAttribute('data-th','เข้าสู่ระบบ');
    title.setAttribute('data-en','Sign in');
    title.textContent = T('เข้าสู่ระบบ','Sign in');
    desc.setAttribute('data-th','ใช้อีเมลเดียวกับตอนสั่งซื้อ');
    desc.setAttribute('data-en','Use the same email you bought with');
    desc.textContent = T('ใช้อีเมลเดียวกับตอนสั่งซื้อ','Use the same email you bought with');
    btn.textContent = T('เข้าสู่ระบบ','Sign in');
    btn.setAttribute('onclick','doLogin()');
    text.setAttribute('data-th','ยังไม่มีแดชบอร์ด?');
    text.setAttribute('data-en','No dashboard yet?');
    text.textContent = T('ยังไม่มีแดชบอร์ด?','No dashboard yet?');
    link.setAttribute('data-th','สร้างแดชบอร์ดฟรี');
    link.setAttribute('data-en','Get your free dashboard');
    link.textContent = T('สร้างแดชบอร์ดฟรี','Get your free dashboard');
  }
}

// v9.40 (23 Oct 2026): tell the Social Feeds module (our marketing results page) that a sign-up happened, so it can show which
// channel brought it. Sends ONLY the ?src tag the visitor arrived with and the pack number: no email, nickname, password or account id.
// It never blocks or breaks sign-up: any failure is ignored. The exact sign-up count stays in this Hub's own database.
var SOCIAL_API = 'https://czhcanfwctsukojdpjso.supabase.co';
var SOCIAL_KEY = 'sb_publishable_kxwzyZo8PZWdZQ8pu7rSXA_LTx-8Idy';   // public by design: it can only call the two public count functions
function reportSignup(){
  try {
    var src = sessionStorage.getItem('ct_src') || 'direct';
    var pk = parseInt(sessionStorage.getItem('ct_pack') || '', 10);
    fetch(SOCIAL_API + '/rest/v1/rpc/social_signup_track', {
      method: 'POST', keepalive: true,
      headers: { 'content-type': 'application/json', apikey: SOCIAL_KEY, authorization: 'Bearer ' + SOCIAL_KEY },
      body: JSON.stringify({ p_slug: 'cuppathai', p_event: 'signup', p_source: src, p_campaign: null, p_pack: isNaN(pk) ? null : pk })
    }).catch(function(){});
  } catch(e){}
}

function doSignup(){
  var nick=document.getElementById('nickname').value.trim();
  var e=document.getElementById('email').value.trim(), p=document.getElementById('password').value;
  var err=document.getElementById('login-err'), ok=document.getElementById('login-ok');
  err.classList.remove('show'); ok.classList.remove('show');
  // Fix (12 Aug 2026): nickname used to be optional, silently falling back
  // to the account's email everywhere a display name is shown (the Hub
  // greeting, VOCAP's leaderboard via ct_user_name) - now required at
  // signup so every account has a real, intentional display name.
  if(!nick){ err.textContent=T('กรุณากรอกชื่อเล่น','Please enter a nickname'); err.classList.add('show'); return; }
  if(!e||!p||p.length<6){ err.textContent=T('กรอกอีเมลและรหัสผ่านอย่างน้อย 6 ตัวอักษร','Enter an email and a password of at least 6 characters'); err.classList.add('show'); return; }
  var opts = { data: { display_name: nick } };
  try { var sg = sessionStorage.getItem('ct_src'); if (sg) opts.data.signup_src = sg; } catch(e){}
  sb.auth.signUp({email:e,password:p,options:opts}).then(function(res){
    if(res.error){ err.textContent=res.error.message; err.classList.add('show'); return; }
    reportSignup();
    // No email confirmation (decided 5 Oct 2026): Supabase returns a session straight away, so go to the dashboard.
    // If confirmation is ever switched back on there is no session yet, and the message below tells the person to confirm.
    if(res.data && res.data.session && res.data.session.user){
      accessToken = res.data.session.access_token; user = res.data.session.user;
      proceedAfterAuth();
      return;
    }
    ok.textContent=T('แดชบอร์ดของคุณพร้อมแล้ว — ตรวจอีเมลเพื่อยืนยัน แล้วเข้าสู่ระบบ','Your dashboard is ready — check your email to confirm, then sign in');
    ok.classList.add('show');
    toggleSignupMode();
  });
}

function signOut(){ sb.auth.signOut().then(function(){ location.reload(); }); }

// ╔═══════════════ LOAD DATA ═══════════════╗
function loadAll(){
  show('loading-view');
  var uid=user.id;
  Promise.all([
    api('users?id=eq.'+uid+'&select=*').catch(function(){return [];}),
    api('user_purchases?user_id=eq.'+uid+'&status=eq.active&select=epub_id').catch(function(){return [];}),
    api('user_phrase_progress?user_id=eq.'+uid+'&select=*').catch(function(){return [];}),
    api('epub_catalog?select=epub_id,title_en,title_th,pack_num').catch(function(){return [];}),
    // Added v9.5 — this user's own VOCAP profile (may not exist yet if
    // they've never played) and a top-5 leaderboard preview.
    api('vocap_profile?user_id=eq.'+uid+'&select=*').catch(function(){return [];}),
    api('vocap_classic_scores?select=player_id,name,words_found,sparks,longest_word&lang=eq.en&order=words_found.desc&limit=5').catch(function(){return [];}),
    // Added v9.8 — this buyer's open and recent PromptPay orders.
    loadOrders(),
    // 11 Oct 2026: the Voice Lab has its own progress table, separate from the Lesson Player's.
    api('voice_lab_progress?user_id=eq.'+uid+'&select=*').catch(function(){return [];})
  ]).then(function(res){
    profile = (res[0]&&res[0].length) ? res[0][0] : {};
    ownedPacks = (res[1]||[]).map(function(r){ return r.epub_id; }).filter(Boolean);
    progressRows = res[2]||[];
    catalogue = {};
    (res[3]||[]).forEach(function(c){
      catalogue[c.epub_id] = c;
    });
    // user_purchases has no defined order (purchase order, not pack order),
    // so the Lesson section listed packs randomly. Sort by pack number
    // now that catalogue (which getPackNum reads pack_num from) is ready.
    ownedPacks.sort(function(a,b){
      return parseInt(getPackNum(a),10) - parseInt(getPackNum(b),10);
    });
    // Pick whichever language profile has more words found, so something
    // sensible shows even before there's a per-language toggle in the Hub.
    var vp = res[4]||[];
    vocapProfile = vp.length ? vp.reduce(function(best,row){
      var bw=(best&&best.stats&&best.stats.words)||0, rw=(row.stats&&row.stats.words)||0;
      return rw>bw ? row : (best||row);
    }, null) : null;
    vocapLeaderboard = res[5]||[];
    shopOrders = res[6]||[];
    voiceRows = res[7]||[];
    render();
    handleBuyParam();
  }).catch(function(){ show('login-view'); });
}

// ╔═══════════════ GLOBAL STATS ═══════════════╗
function getGlobalStats(){
  var attempts=0, passes=0, honorary=0, starSum=0, starCnt=0;
  var uniquePhrases = {};
  progressRows.forEach(function(r){
    attempts += (r.attempts||0);
    if (r.passed===true || r.passed==='true') passes++;
    if (r.special===true || r.special==='true') honorary++;
    if (r.stars){ starSum += r.stars; starCnt++; }
    if (r.phrase_id) uniquePhrases[r.phrase_id] = true;
  });
  return {
    attempts: attempts,
    passes: passes,
    honorary: honorary,
    avgStars: starCnt>0 ? Math.round((starSum/starCnt)*10)/10 : 0,
    phrasesAttempted: Object.keys(uniquePhrases).length
  };
}

// Voice Lab practice, from its own table (voice_lab_progress). Never mixed with the Lesson Player's numbers.
function getVoiceStats(){
  var attempts=0, passes=0, starSum=0, starCnt=0, uniq={};
  voiceRows.forEach(function(r){
    attempts += (r.attempts||0);
    if (r.passed===true || r.passed==='true') passes++;
    if (r.stars){ starSum += r.stars; starCnt++; }
    if (r.phrase_id) uniq[r.phrase_id] = true;
  });
  return { attempts:attempts, passes:passes, phrases:Object.keys(uniq).length,
           avgStars: starCnt>0 ? Math.round((starSum/starCnt)*10)/10 : 0 };
}

// ╔═══════════════ DERIVATION ═══════════════╗
function packStats(packId){
  var rows = progressRows.filter(function(r){
    if (!r.phrase_id) return false;
    return r.phrase_id.startsWith(packId + ':') || r.phrase_id.startsWith(packId + '-');
  });

  var passed = 0, honorary = 0, starSum = 0, starCnt = 0;
  var phraseStatus = {};

  rows.forEach(function(r){
    var pid = r.phrase_id;
    if (!phraseStatus[pid]) phraseStatus[pid] = {};
    if (r.passed === true || r.passed === 'true') phraseStatus[pid].passed = true;
    if (r.special === true || r.special === 'true') phraseStatus[pid].special = true;
    if (r.stars) {
      phraseStatus[pid].stars = Math.max(phraseStatus[pid].stars || 0, r.stars);
    }
  });

  var done = 0;
  Object.keys(phraseStatus).forEach(function(pid){
    var s = phraseStatus[pid];
    if (s.passed) { passed++; done++; }
    else if (s.special) { honorary++; done++; }
    if (s.stars) { starSum += s.stars; starCnt++; }
  });

  var pct = Math.round(done / PACK_SIZE * 100);
  if (pct > 100) pct = 100;
  var avgStars = starCnt > 0 ? Math.round((starSum / starCnt) * 10) / 10 : 0;

  return { passed: passed, honorary: honorary, done: done, pct: pct, avgStars: avgStars };
}

function titleOf(packId){
  var c=catalogue[packId];
  if(c) return (lang==='en' ? (c.title_en||c.title_th) : (c.title_th||c.title_en));
  return packId;
}

function mostRecentPack(){
  if (!progressRows.length) return ownedPacks.length ? ownedPacks[0] : null;

  var latest = null, when = 0;
  progressRows.forEach(function(r){
    if (!r.phrase_id) return;
    var packId = null;
    if (r.phrase_id.indexOf(':') !== -1) {
      packId = r.phrase_id.split(':')[0];
    } else if (r.phrase_id.indexOf('-sc') !== -1) {
      packId = r.phrase_id.split('-sc')[0];
    }
    if (!packId) return;

    var t = r.updated_at ? Date.parse(r.updated_at) : 0;
    if (t >= when) {
      when = t;
      latest = packId;
    }
  });

  return latest || (ownedPacks.length ? ownedPacks[0] : null);
}

// ╔═══════════════ RENDER ═══════════════╗
function render(){
  show('hub'); applyLang();
  var meta = (user.user_metadata || {});
  var name = meta.display_name || profile.name || user.email || '';
  document.getElementById('greet').textContent = T('สวัสดี ','Hello ')+name;
  document.getElementById('subgreet').textContent = T('ยินดีต้อนรับกลับมา','Welcome back');

  renderStatsBar();
  renderContinue();
  renderMessages();
  renderOrders();
  renderInstallBar();
  renderLessonCards();
  renderFreeGames();
  renderFreeEpubs();
  renderVoiceCards();
  renderVocapCard();
  checkCreditIncrease('voice', profile.voice_credits || 0, 'Voice Lab');
  checkCreditIncrease('vocap', profile.vocap_credits || 0, 'VOCAP');

  if(WHATS_NEW){
    document.getElementById('newstrip').style.display='block';
    document.getElementById('new-title').textContent=P(WHATS_NEW,'title');
    document.getElementById('new-body').textContent=P(WHATS_NEW,'body');
  }
}

function renderStatsBar(){
  var g = getGlobalStats();
  var el = document.getElementById('stats-bar');
  if (!el) return;
  // Fixed: clean star rounding (e.g. 3.3 or 4)
  var avgDisplay = (g.avgStars % 1 === 0) ? g.avgStars : g.avgStars.toFixed(1);
  el.innerHTML =
    '<div class="stat-card pass"><span class="icon">✅</span><span class="val">'+g.passes+'</span><span class="lbl">'+T('ผ่าน','Passes')+'</span></div>'+
    '<div class="stat-card honor"><span class="icon">🌟</span><span class="val">'+g.honorary+'</span><span class="lbl">'+T('รางวัลปลอบใจ','Honorary')+'</span></div>'+
    '<div class="stat-card star"><span class="icon">⭐</span><span class="val">'+avgDisplay+'</span><span class="lbl">'+T('เฉลี่ย','Avg Stars')+'</span></div>'+
    '<div class="stat-card phrase"><span class="icon">📊</span><span class="val">'+g.phrasesAttempted+'</span><span class="lbl">'+T('วลีที่ฝึก','Practised')+'</span></div>';
}


// ── Messages box (v9.28) ── reads customer_messages (own rows only; RLS). Rows are written by the server/admin, never by the page.
var msgRows = [], msgOpen = false;
function renderMessages(){
  var slot = document.getElementById('msg-slot'); if (!slot || !user) return;
  api('customer_messages?select=id,kind,title_th,title_en,body_th,body_en,link,created_at,read_at&order=created_at.desc&limit=20')
    .then(function(rows){ msgRows = rows || []; drawMessages(); if (pushState === 'unknown') checkPushState(); })
    .catch(function(){ slot.innerHTML = ''; });
}
function msgUnread(){ return msgRows.filter(function(m){ return !m.read_at; }).length; }
function drawMessages(){
  var slot = document.getElementById('msg-slot'); if (!slot) return;
  var n = msgUnread();
  var head = '<div onclick="toggleMessages()" role="button" tabindex="0" style="display:flex;align-items:center;gap:8px;cursor:pointer;">'+
    '<span style="font-size:1.05rem;">🔔</span><span style="flex:1;font-weight:700;font-size:0.9rem;color:#2A1A0E;">'+T('ข้อความ','Messages')+'</span>'+
    (n ? '<span style="background:#7F2824;color:#fff;border-radius:999px;padding:2px 9px;font-size:0.72rem;font-weight:800;">'+n+' '+T('ใหม่','new')+'</span>'
       : '<span style="font-size:0.75rem;color:#7A6A5A;">'+T('ไม่มีข้อความใหม่','No new messages')+'</span>')+
    '<span style="color:#7F2824;">'+(msgOpen ? '▾' : '▸')+'</span></div>';
  var body = '';
  if (msgOpen) {
    body = msgRows.length ? msgRows.map(function(m){
      var t = T(m.title_th || m.title_en, m.title_en), b = T(m.body_th || m.body_en || '', m.body_en || m.body_th || '');
      var d = new Date(m.created_at).toLocaleDateString(undefined,{day:'numeric',month:'short'});
      return '<div onclick="openMessage(\''+m.id+'\')" style="border-top:1px solid #eee;padding:8px 2px;cursor:pointer;'+(m.read_at?'opacity:.6;':'')+'">'+
        '<div style="display:flex;gap:6px;align-items:baseline;"><span style="flex:1;font-weight:'+(m.read_at?'600':'800')+';font-size:0.85rem;color:#2A1A0E;">'+(m.read_at?'':'<span style="color:#7F2824;">● </span>')+esc(t)+'</span><span style="font-size:0.68rem;color:#7A6A5A;">'+d+'</span></div>'+
        (b ? '<div style="font-size:0.78rem;color:#5A4A3A;margin-top:2px;line-height:1.4;">'+esc(b)+'</div>' : '')+'</div>';
    }).join('') : '<div class="card-desc" style="padding:8px 0;">'+T('ยังไม่มีข้อความ','Nothing here yet.')+'</div>';
  }
  slot.innerHTML = '<div class="card" style="padding:10px 14px;margin-top:8px;">'+head+(msgOpen || pushState === 'off' ? pushRow() : '')+body+'</div>';
}

// ── Phone alerts (v9.29) ── a push with no text; the phone shows a fixed "You have an update" line.
var pushState = 'unknown'; // on | off | install | none
function pushB64(b){ b=(b+'===='.slice(b.length%4||4)).replace(/-/g,'+').replace(/_/g,'/'); var raw=atob(b),a=new Uint8Array(raw.length); for(var i=0;i<raw.length;i++)a[i]=raw.charCodeAt(i); return a; }
function checkPushState(){
  var standalone = (window.matchMedia && matchMedia('(display-mode: standalone)').matches) || navigator.standalone;
  var ios = /iphone|ipad|ipod/i.test(navigator.userAgent);
  if (!('serviceWorker' in navigator) || !('PushManager' in window) || !('Notification' in window)) { pushState = (ios && !standalone) ? 'install' : 'none'; drawMessages(); return; }
  navigator.serviceWorker.ready.then(function(r){ return r.pushManager.getSubscription(); }).then(function(sub){
    pushState = (sub && Notification.permission === 'granted') ? 'on' : (Notification.permission === 'denied' ? 'blocked' : 'off'); drawMessages();
  }).catch(function(){ pushState = 'none'; drawMessages(); });
}
function pushApi(body){
  return fetch('/api/hub-push-subscribe',{method:'POST',headers:{'Content-Type':'application/json','Authorization':'Bearer '+accessToken},body:JSON.stringify(body)}).then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); });
}
function pushOn(){
  var btn = document.getElementById('push-btn'); if (btn) btn.textContent = T('กำลังเปิด...','Turning on...');
  Notification.requestPermission().then(function(p){
    if (p !== 'granted') { pushState = (p === 'denied') ? 'blocked' : 'off'; drawMessages(); return; }
    return Promise.all([navigator.serviceWorker.ready, fetch('/api/hub-push-key').then(function(r){ if(!r.ok) throw new Error('key'); return r.json(); })]).then(function(x){
      return x[0].pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: pushB64(x[1].key) });
    }).then(function(sub){ return pushApi({ subscription: sub.toJSON() }); }).then(function(){ pushState = 'on'; drawMessages(); });
  }).catch(function(){ pushState = 'off'; drawMessages(); alert(T('เปิดการแจ้งเตือนไม่สำเร็จ ลองอีกครั้ง','Could not turn alerts on. Please try again.')); });
}
function pushOff(){
  navigator.serviceWorker.ready.then(function(r){ return r.pushManager.getSubscription(); }).then(function(sub){
    if (!sub) return; var ep = sub.endpoint; return sub.unsubscribe().then(function(){ return pushApi({ off: true, endpoint: ep }); });
  }).then(function(){ pushState = 'off'; drawMessages(); }).catch(function(){ drawMessages(); });
}
function pushRow(){
  var st = 'font-size:0.76rem;color:#5A4A3A;margin-top:8px;line-height:1.4;';
  if (pushState === 'off') return '<div style="'+st+'display:flex;align-items:center;gap:8px;"><span style="flex:1;">'+T('รับแจ้งเตือนบนโทรศัพท์เมื่อมีข้อความใหม่','Get a phone alert when there is a new message')+'</span><button id="push-btn" onclick="event.stopPropagation();pushOn()" style="background:#7F2824;color:#fff;border:none;border-radius:999px;padding:6px 14px;font-weight:700;font-size:0.76rem;cursor:pointer;">'+T('เปิดแจ้งเตือน','Turn on alerts')+'</button></div>';
  if (pushState === 'on') return '<div style="'+st+'display:flex;align-items:center;gap:8px;"><span style="flex:1;color:#16a34a;font-weight:700;">✓ '+T('เปิดแจ้งเตือนบนโทรศัพท์เครื่องนี้แล้ว','Phone alerts are on for this device')+'</span><a href="javascript:void(0)" onclick="event.stopPropagation();pushOff()" style="color:#7A6A5A;">'+T('ปิด','Turn off')+'</a></div>';
  if (pushState === 'blocked') return '<div style="'+st+'">'+T('การแจ้งเตือนถูกปิดไว้ในเบราว์เซอร์ เปิดได้ในการตั้งค่าของเว็บไซต์','Alerts are blocked in this browser. You can allow them in the site settings.')+'</div>';
  if (pushState === 'install') return '<div style="'+st+'">'+T('บน iPhone: แตะปุ่มแชร์ แล้ว “เพิ่มไปยังหน้าจอโฮม” จากนั้นเปิดแอปเพื่อรับแจ้งเตือน','On iPhone: tap Share, then “Add to Home Screen”, then open the app to get alerts.')+'</div>';
  return '';
}
function toggleMessages(){ msgOpen = !msgOpen; drawMessages(); }
function openMessage(id){
  var m = msgRows.filter(function(x){ return x.id === id; })[0]; if (!m) return;
  if (!m.read_at) {
    m.read_at = new Date().toISOString(); drawMessages();
    fetch(SUPABASE_URL+'/rest/v1/customer_messages?id=eq.'+encodeURIComponent(id),{method:'PATCH',
      headers:{'apikey':SUPABASE_KEY,'Authorization':'Bearer '+(accessToken||SUPABASE_KEY),'Content-Type':'application/json'},
      body:JSON.stringify({read_at:m.read_at})}).catch(function(){});
  }
  if (m.link && /^https:\/\/([a-z0-9-]+\.)?cuppathai\.com(\/|$)/i.test(m.link)) location.href = m.link;
}

function renderContinue(){
  var slot = document.getElementById('continue-slot');
  if (!slot) return;
  var pack = mostRecentPack();

  if(!pack && freePackList().length){ slot.innerHTML=''; return; }
  if(!pack){
    slot.innerHTML='<div class="continue-card">'+
      '<div class="label">'+T('เริ่มต้นการเรียนของคุณ','Start learning')+'</div>'+
      '<div class="title">'+T('ยังไม่มีแพ็ก','No packs yet')+'</div>'+
      '<div class="sub">'+T('เลือกแพ็กแรกของคุณแล้วเริ่มฝึก','Choose your first pack and start practising.')+'</div>'+
      '<a class="go empty" '+shopAttrs('pack', SITE+'/product-category/unlesson-packs/')+'>'+T('ดูแพ็กทั้งหมด →','Browse packs →')+'</a>'+
      '</div>';
    return;
  }

  var st = packStats(pack);
  var info = packDisplayInfo(pack);
  var statusLabel = st.done >= PACK_SIZE ? T('เรียนจบ 🎉','Complete 🎉') : T('กำลังเรียน','In progress');
  var fillClass = st.done >= PACK_SIZE ? 'done' : '';
  var cefrClass = cefrColorClass(info.cefr);

  slot.innerHTML='<div class="continue-card">'+
    '<div class="label">📚 '+T('เรียนต่อ · Lesson Player','CONTINUE · LESSON PLAYER')+'</div>'+
    '<div class="continue-meta">'+
      '<span class="continue-pack">Pack '+info.packNum+'</span>'+
      '<span class="continue-cefr '+cefrClass+'">'+info.cefr+'</span>'+
      '<span class="continue-grade">'+info.grade+'</span>'+
    '</div>'+
    '<div class="title" style="margin-top:4px;">'+esc(info.title)+'</div>'+
    '<div class="sub">'+st.done+' / '+PACK_SIZE+' '+T('วลี','phrases')+
      (st.honorary ? ' · 🌟 '+st.honorary : '')+
      ' · ⭐ '+st.avgStars+'</div>'+
    '<div class="track"><div class="fill '+fillClass+'" style="width:'+st.pct+'%"></div></div>'+
    '<div class="row"><span>'+st.pct+'%</span><span>'+statusLabel+'</span></div>'+
    '<button class="go" onclick="openPack(\''+pack+'\')">'+T('ฝึกต่อ →','Continue →')+'</button>'+
    '</div>';
}

// Free Practice Games (v9.14, search added v9.15): scene 1 of every pack is open to every signed-in account, no purchase.
// An account with no purchases sees this FIRST on the dashboard; an owner sees only the packs they don't own yet, lower down.
var FREE_GAMES_MAX_PACK = 999; // every pack in epub_catalog (opened from packs 1-10 on 22 Oct 2026)
var freeScenes = null;      // grouped scenes once loaded
var freeQuery = '';
function freePackList(){
  return Object.keys(catalogue).filter(function(id){
    var n = parseInt(getPackNum(id), 10);
    return n >= 1 && n <= FREE_GAMES_MAX_PACK;
  }).sort(function(a,b){ return parseInt(getPackNum(a),10) - parseInt(getPackNum(b),10); });
}
// open/closed: open by default for an account with no purchases, collapsed for owners; the choice is remembered on this device
function fgOpen(){
  try { var v = localStorage.getItem('ct_fg_open'); if (v === '1') return true; if (v === '0') return false; } catch (e) {}
  return !ownedPacks.length;
}
function fgToggle(){
  var b = document.getElementById('fg-body'), c = document.getElementById('fg-chev'); if (!b) return;
  var open = b.style.display === 'none'; b.style.display = open ? 'block' : 'none';
  if (c) c.style.transform = open ? 'rotate(180deg)' : '';
  try { localStorage.setItem('ct_fg_open', open ? '1' : '0'); } catch (e) {}
}
function freeKey(s){ return String(s == null ? '' : s).toLowerCase().replace(/[\s&.,?!;:'"“”‘’()\-–—]/g, ''); }
function renderFreeGames(){
  var top = document.getElementById('freegames-top'), low = document.getElementById('freegames-slot');
  if (top) top.innerHTML = ''; if (low) low.innerHTML = '';
  var packs = freePackList();
  var host = top; // v9.23: at the top of every dashboard, owners included (compact for owners)
  if (!packs.length || !host) return;
  host.innerHTML = '<style>.fg-in{width:100%;box-sizing:border-box;padding:7px 12px;border:1.5px solid #ddd;border-radius:999px;font-size:0.85rem;background:#F2EFEA;font-family:inherit;outline:none}.fg-in:focus{border-color:#7F2824;background:#fff}'+
    '.fg-list{max-height:216px;overflow-y:auto;margin-top:6px;-webkit-overflow-scrolling:touch}.fg-row{display:flex;align-items:center;gap:8px;padding:7px 2px;border-top:1px solid #eee;cursor:pointer;min-height:42px}'+
    '.fg-row:first-child{border-top:0}.fg-num{flex:none;font-size:0.72rem;font-weight:800;color:#7F2824;background:#7F282414;border-radius:6px;padding:2px 6px}'+
    '.fg-main{flex:1;min-width:0}.fg-title{font-size:0.88rem;font-weight:600;color:#2A1A0E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fg-hit{font-size:0.72rem;color:#7A6A5A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}'+
    '.fg-prog{flex:none;font-size:0.72rem;color:#7A6A5A}.fg-hero{margin:0 0 10px}.fg-pill{display:inline-block;background:#7F2824;color:#fff;font-size:0.66rem;font-weight:800;letter-spacing:.6px;border-radius:999px;padding:2px 9px;margin-bottom:5px}.fg-h{font-family:Playfair Display,Sarabun,serif;font-weight:800;font-size:1.1rem;line-height:1.3;color:#2A1A0E}.fg-s{font-size:0.8rem;color:#7A6A5A;margin-top:2px;line-height:1.4}.fg-row.done{opacity:.55}.fg-row.done .fg-prog{color:#16a34a;font-weight:700}.fg-next{display:flex;align-items:center;gap:10px;background:#7F2824;color:#fff;border-radius:12px;padding:10px 12px;margin-top:8px;cursor:pointer}.fg-next .k{font-size:0.68rem;opacity:.8;letter-spacing:.4px}.fg-next .t{font-size:0.92rem;font-weight:700;line-height:1.25}.fg-next .b{flex:none;background:#fff;color:#7F2824;border-radius:999px;padding:6px 12px;font-weight:700;font-size:0.8rem}.fg-go{flex:none;font-size:0.72rem;font-weight:700;color:#7F2824}.fg-chev{flex:none;font-size:1rem;color:#7F2824;transition:transform .2s}.fg-hero{margin:0 0 4px}</style>'+
    '<div class="card" style="padding:14px;margin-top:6px;"><div class="fg-hero"><div><span class="fg-pill">'+T('เกมฟรี · ทุกแพ็ก','FREE GAMES · ALL PACKS')+'</span></div>'+
      '<div class="fg-h">🧩🔤 '+T('เรียงประโยค & จับคู่วลี','Sentence Scramble & Phrase Match')+'</div>'+
      '<div class="fg-s">'+T('ฝึกกับวลีจริง ฟังเสียงอวตาร ไม่ต้องซื้อ','Real phrases, avatar voices, no purchase needed')+'</div></div><div id="fg-next"></div><details class="fe-det fe-more" id="fg-body"><summary>🔽 '+T('ดูทุกฉาก ('+packs.length+' ฉาก)','See all '+packs.length+' free scenes')+'</summary><input type="text" class="fg-in" id="fg-search" style="margin-top:8px;" placeholder="'+T('🔍 ค้นหาฉากหรือวลี เช่น อาหาร, food','🔍 Search a scene or phrase — Thai or English')+'" value="'+esc(freeQuery)+'" oninput="freeSearch(this.value)" autocomplete="off">'+
    '<div class="fg-list" id="fg-list"><div class="card-desc" style="padding:8px 0;">'+T('กำลังโหลด...','Loading...')+'</div></div>'+
    '<div class="card-desc" style="margin-top:6px;font-size:0.72rem;">'+T('เลื่อนดูทั้ง '+packs.length+' ฉาก · เล่นซ้ำได้ไม่จำกัด','Scroll for all '+packs.length+' scenes · unlimited tries')+'</div>'+feCloseBtn(T('ปิดรายการ','Close the list'))+'</details></div>';
  loadFreeScenes(packs).then(drawFreeList).catch(function(){
    var l = document.getElementById('fg-list'); if (l) l.innerHTML = '<div class="card-desc">'+T('โหลดรายการไม่สำเร็จ ลองรีเฟรชหน้านี้','Could not load the list — refresh the page')+'</div>';
  });
}

// ── Free EPUBs (22 Oct 2026) ── packs the account does not own, released one every FREE_DRIP_DAYS (same formula as the hub-download function).
// An EPUB only: the Lesson Player, Voice Lab and games still need the pack to be owned.
var FREE_DRIP_DAYS = 14;
function freeEpubDays(){ return Math.floor((Date.now() - new Date(user.created_at).getTime()) / 86400000); }
// "Unlock the online lesson": opens the shop on this pack, with its full details (what you get, what's inside, book-only vs bundle comparison) already open and the pack in the basket.
function unlockPack(n){
  var sku = 'PACK-' + String(n).padStart(2, '0');
  shopOpen[sku] = true;
  openShop('pack', sku);
}
function dismissFreeWelcome(){
  try { localStorage.setItem('ct_free_welcome_x', '1'); } catch(e){}
  var w = document.getElementById('free-welcome'); if (w) w.remove();
}
function freeWelcomeHtml(firstN){
  var hid = false; try { hid = localStorage.getItem('ct_free_welcome_x') === '1'; } catch(e){}
  if (hid) return '';
  return '<div class="card" id="free-welcome" style="padding:14px;margin-bottom:10px;position:relative;">'+
    '<a href="javascript:void(0)" onclick="dismissFreeWelcome()" aria-label="close" style="position:absolute;top:8px;right:12px;font-size:1.2rem;color:#7A6A5A;text-decoration:none;">×</a>'+
    '<div style="font-weight:800;font-size:1rem;margin-bottom:2px;">'+T('ยินดีต้อนรับ! นี่คือสิ่งที่คุณได้รับฟรี','Welcome! Here is what you get free')+'</div>'+
    '<div class="card-desc" style="margin-bottom:10px;">'+T('หนังสือ EPUB เล่มแรกพร้อมให้ดาวน์โหลดแล้ว และจะมีเล่มใหม่ทุก 2 สัปดาห์','Your first lesson book (EPUB file) is ready to download, and a new one arrives every 2 weeks')+'</div>'+
    '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:0.78rem;line-height:1.5;">'+
      '<div style="background:#FBF9F7;border-radius:10px;padding:10px;"><b>📘 '+T('หนังสือเรียนฟรี','Free lesson book')+'</b><br>'+T('ข้อความ 2 ภาษา + คำอ่านไทย<br>เสียงอ่านทุกประโยค (MP3)<br>เคล็ดลับการใช้ประโยค<br>เกมฝึกประโยคฟรี','Two-language text + Thai phonetics<br>Audio for every phrase (MP3)<br>Grammar tips<br>Free practice games')+'</div>'+
      '<div style="background:#FBF9F7;border-radius:10px;padding:10px;border:2px solid #7F2824;"><b>🎤 '+T('เวอร์ชันออนไลน์','Online version')+'</b><br>'+T('ครูอวตารพูดเป็นวิดีโอ<br>AI ให้ดาวทีละวลี<br>บอกว่าคำไหนยังไม่ชัด<br>ซื้อเล่มไหนก็ได้ทันที','Avatar teacher on video<br>AI star scoring per phrase<br>Word-by-word feedback<br>Buy any pack right away')+'</div>'+
    '</div>'+
    '<div style="margin-top:10px;"><a class="fe-btn" href="javascript:void(0)" onclick="unlockPack('+firstN+')">'+T('ดูรายละเอียดและเปรียบเทียบ','See details and compare')+'</a></div></div>';
}

// ── Covers (22 Oct 2026) ── every pack shows its cover first, then its name; tap a cover to open it large. Covers live in the public Supabase bucket "covers" as <epub_id>.jpg.
function coverUrl(id){ return SUPABASE_URL + '/storage/v1/object/public/covers/' + id + '.jpg'; }
function coverImg(id, cls){
  var u = coverUrl(id);
  return '<img class="' + (cls || 'pk-cover') + '" loading="lazy" decoding="async" src="' + u + '" alt="" onclick="event.stopPropagation(); openCover(\'' + u + '\')">';
}
// scene headings per pack: the first phrase of each of the 4 scenes (sequence 1, 13, 25, 37) carries the scene title; one request for every pack
var sceneHeads = null, sceneHeadsLoading = false;
function fillSceneHeads(){
  document.querySelectorAll('.fe-heads[data-pack]').forEach(function(el){
    var h = sceneHeads && sceneHeads[el.getAttribute('data-pack')];
    if (!h || !h.length) return;
    el.innerHTML = '<div class="fe-h-th">' + h.map(function(x){ return esc(x.th || x.en); }).join(' · ') + '</div>' +
      '<div class="fe-h-en">' + h.map(function(x){ return esc(x.en || x.th); }).join(' · ') + '</div>';
  });
}
function loadSceneHeads(){
  if (sceneHeads) { fillSceneHeads(); return; }
  if (sceneHeadsLoading) return;
  sceneHeadsLoading = true;
  api('phrases?sequence_num=in.(1,13,25,37)&select=pack_id,sequence_num,scene_title_th,scene_title_en&order=pack_id,sequence_num').then(function(rows){
    var by = {};
    (rows || []).forEach(function(r){ (by[r.pack_id] = by[r.pack_id] || []).push({ th: r.scene_title_th, en: r.scene_title_en }); });
    sceneHeads = by; sceneHeadsLoading = false; fillSceneHeads();
  }).catch(function(){ sceneHeadsLoading = false; });
}
function freeEpubTitle(c, id){ return lang === 'en' ? (c.title_en || c.title_th || id) : (c.title_th || c.title_en || id); }
function freeEpubSub(c){ return lang === 'en' ? (c.title_th || '') : (c.title_en || ''); }

// The Free EPUBs section: sits right under the free games. The current free book (cover, name, Download, closed Details), then a scrolling
// list of the books coming next and the earlier ones, each with its cover and scene headings, down to the last pack.
function feClose(el){ var d = el.closest('details'); if (!d) return; d.open = false; try { d.scrollIntoView({ block: 'nearest' }); } catch (e) {} }
function feCloseBtn(label){ return '<a class="fe-close" href="javascript:void(0)" onclick="feClose(this)">▲ ' + label + '</a>'; }
function renderFreeEpubs(){
  var host = document.getElementById('freeepub-top');
  if (!host) return;
  host.innerHTML = '';
  if (!user || !user.created_at) return;
  var rows = Object.keys(catalogue).map(function(id){ return { id: id, n: parseInt(catalogue[id].pack_num, 10) }; })
    .filter(function(r){ return r.n && ownedPacks.indexOf(r.id) < 0; }).sort(function(a,b){ return a.n - b.n; });
  if (!rows.length) return;
  var days = freeEpubDays(), unlocked = Math.min(rows.length, 1 + Math.max(0, Math.floor(days / FREE_DRIP_DAYS)));
  var daysLeft = FREE_DRIP_DAYS - (days % FREE_DRIP_DAYS);
  var open = rows.slice(0, unlocked), cur = open[open.length - 1], coming = rows.slice(unlocked), earlier = open.slice(0, -1).reverse();
  var cc = catalogue[cur.id], num = String(cur.n).padStart(2, '0');
  var html = (ownedPacks.length ? '' : freeWelcomeHtml(1)) +
    '<div class="card" style="padding:14px;margin-top:6px;"><div class="fg-hero"><span class="fg-pill">' + T('หนังสือเรียนภาษาอังกฤษฟรี', 'FREE EPUB ENGLISH LESSON BOOK') + '</span></div>' +
    '<div class="card-desc" style="margin-bottom:10px;">' + T('หนังสือใหม่ทุก 2 สัปดาห์ ดาวน์โหลดแล้วอ่านและฟังได้เลย', 'A new book every two weeks. Download, read and listen.') + '</div>' +
    '<div class="fe-cur">' + coverImg(cur.id, 'fe-cover-big') +
      '<div class="fe-cur-b"><span class="pack-number-badge">Pack ' + num + '</span>' +
      '<div class="pack-name">' + esc(freeEpubTitle(cc, cur.id)) + '</div>' +
      '<div class="fe-sub">' + esc(freeEpubSub(cc)) + '</div>' +
      '<div class="fe-heads" data-pack="' + cur.id + '"></div>' +
      '<a class="fe-btn" style="display:inline-block;margin-top:8px;" href="javascript:void(0)" onclick="downloadPack(\'' + cur.id + '\', this); return false;">📥 ' + T('ดาวน์โหลดหนังสือฟรี', 'Download free book') + '</a>' +
      '</div></div>' +
    '<details class="fe-det" ontoggle="if(this.open) fillPackDescs()"><summary>📖 ' + T('รายละเอียดหนังสือ', 'Book details') + '</summary>' +
      '<div class="pack-desc" data-sku="PACK-' + num + '"></div>' + feCloseBtn(T('ปิดรายละเอียด', 'Close the details')) + '</details>' +
    '<div class="card-desc" style="font-size:0.78rem;padding:6px 0 0;">🎤 ' + T('อยากพูดให้ AI ให้ดาว? ', 'Want AI star scoring? ') +
      '<a href="javascript:void(0)" onclick="unlockPack(' + cur.n + ')" style="color:#7F2824;font-weight:700;">' + T('ปลดล็อกบทเรียนออนไลน์', 'Unlock the online lesson') + '</a></div>';
  var rowHtml = function(r, locked, idx){
    var c = catalogue[r.id], n = String(r.n).padStart(2, '0');
    var tail = locked
      ? '<span class="fe-lock">🔒 ' + T('ปลดล็อกในอีก ' + (daysLeft + (idx) * FREE_DRIP_DAYS) + ' วัน', 'Unlocks in ' + (daysLeft + (idx) * FREE_DRIP_DAYS) + ' days') + '</span>'
      : '<a class="fe-btn" style="display:inline-block;" href="javascript:void(0)" onclick="downloadPack(\'' + r.id + '\', this); return false;">📥 ' + T('ดาวน์โหลด', 'Download') + '</a>';
    return '<div class="fe-row">' + coverImg(r.id) +
      '<div class="fe-row-b"><div class="fe-row-t"><span class="fe-n">' + n + '</span> ' + esc(freeEpubTitle(c, r.id)) + '</div>' +
      '<div class="fe-sub">' + esc(freeEpubSub(c)) + '</div>' +
      '<div class="fe-heads" data-pack="' + r.id + '"></div>' + tail + '</div></div>';
  };
  if (coming.length || earlier.length) {
    html += '<details class="fe-det fe-more"><summary>🔽 ' + (coming.length ? T('ถัดไป · Coming next · ถึงเล่มที่ ', 'Coming next · Up to Pack ') + coming[coming.length - 1].n : T('เล่มที่ปลดล็อกแล้ว', 'Unlocked books')) + '</summary><div class="fe-list">';
    coming.forEach(function(r, i){ html += rowHtml(r, true, i); });
    if (earlier.length) {
      html += '<div class="fe-div">' + T('ปลดล็อกแล้ว · ดาวน์โหลดได้', 'Unlocked · ready to download') + '</div>';
      earlier.forEach(function(r){ html += rowHtml(r, false, 0); });
    }
    html += '</div>' + feCloseBtn(T('ปิดรายการ', 'Close the list')) + '</details>';
  }
  host.innerHTML = html + '</div>';
  loadSceneHeads();
}
function loadFreeScenes(packs){
  return Promise.all([
    api('phrases?pack_id=in.('+packs.join(',')+')&sequence_num=lte.12&select=phrase_id,pack_id,sequence_num,english,thai,phonetic,scene_title_en,scene_title_th&order=sequence_num'),
    api('user_game_progress?user_id=eq.'+user.id+'&mastered=eq.true&game_mode=eq.scramble&select=phrase_id').catch(function(){ return []; })
  ]).then(function(res){
    var done = {}; (res[1]||[]).forEach(function(r){ done[r.phrase_id] = true; });
    var by = {};
    (res[0]||[]).forEach(function(p){
      var s = by[p.pack_id] || (by[p.pack_id] = { pack: p.pack_id, en: p.scene_title_en, th: p.scene_title_th, phrases: [], done: 0 });
      s.phrases.push(p); if (done[p.phrase_id]) s.done++;
    });
    freeScenes = packs.filter(function(id){ return by[id]; }).map(function(id){ return by[id]; });
  });
}
function freeSearch(q){ freeQuery = q; drawFreeList(); }
function drawFreeList(){
  var host = document.getElementById('fg-list');
  if (!host || !freeScenes) return;
  var qk = freeKey(freeQuery), html = '', shown = 0;
  // "up next": a scene already started, else the first unfinished one
  var nextS = null;
  freeScenes.forEach(function(x){ if (!nextS && x.done > 0 && x.done < x.phrases.length) nextS = x; });
  freeScenes.forEach(function(x){ if (!nextS && x.done < x.phrases.length) nextS = x; });
  var nx = document.getElementById('fg-next');
  if (nx) {
    if (qk) nx.innerHTML = '';
    else if (nextS) {
      var ni = packDisplayInfo(nextS.pack);
      nx.innerHTML = '<div class="fg-next" onclick="location.href=\''+GAMES_URL+'?free=1&pack='+encodeURIComponent(nextS.pack)+'\'"><div style="flex:1;min-width:0;"><div class="k">'+
        '🎮 '+(nextS.done ? T('เล่นต่อ · เกมฝึกฝน','CONTINUE · PRACTICE GAMES') : T('ฉากถัดไป · เกมฝึกฝน','UP NEXT · PRACTICE GAMES'))+' · '+nextS.done+'/'+nextS.phrases.length+' ✅</div><div class="t">'+ni.packNum+' · '+esc(T(nextS.th || nextS.en, nextS.en || nextS.th))+'</div></div><span class="b">'+T('เล่นเลย →','Play →')+'</span></div>';
    } else nx.innerHTML = '<div class="fg-next" style="cursor:default;"><div class="t">🎉 '+T('เล่นครบทั้ง '+freeScenes.length+' ฉากฟรีแล้ว! ปลดล็อกแพ็กเต็มเพื่อเล่นต่อ','You finished all '+freeScenes.length+' free scenes! Unlock a full pack to keep going.')+'</div></div>';
  }
  freeScenes.forEach(function(s){
    var info = packDisplayInfo(s.pack), c = catalogue[s.pack] || {};
    var hit = null;
    if (qk) {
      var head = [s.en, s.th, c.title_en, c.title_th, 'pack'+info.packNum].some(function(f){ return freeKey(f).indexOf(qk) !== -1; });
      s.phrases.some(function(p){ if ([p.english, p.thai, p.phonetic].some(function(f){ return freeKey(f).indexOf(qk) !== -1; })) { hit = p; return true; } });
      if (!head && !hit) return;
    }
    shown++;
    var hitLine = hit ? '<div class="fg-hit">“'+esc(hit.english)+'” · '+esc(hit.thai || '')+'</div>' : '';
    html += '<div class="fg-row'+(s.done >= s.phrases.length ? ' done' : '')+'" onclick="location.href=\''+GAMES_URL+'?free=1&pack='+encodeURIComponent(s.pack)+'\'">'+
      '<span class="fg-num">'+info.packNum+'</span>'+
      '<div class="fg-main"><div class="fg-title">'+esc(T(s.th || s.en, s.en || s.th))+'</div>'+hitLine+'</div>'+
      '<span class="fg-prog">'+(s.done >= s.phrases.length ? '✓ '+T('ครบแล้ว','done') : s.done+'/'+s.phrases.length+' ✅')+'</span><span class="fg-go">'+T('เล่นฟรี →','Play →')+'</span></div>';
  });
  host.innerHTML = shown ? html : '<div class="card-desc" style="padding:10px 0;">'+T('ไม่พบฉากที่ตรงกัน','No matching scenes')+'</div>';
}

// ── Phone videos (v9.18): the product videos shown on the Lesson Player and Voice Lab cards. Large while the customer has
//    not bought yet (they are the pitch), a small collapsed "how it works" helper afterwards. Files are in the Supabase `reels` bucket.
var REELS_BASE = SUPABASE_URL + '/storage/v1/object/public/reels/';
var SITE_PAGES = 'https://cuppathai.com';   // the website with the full product pages; becomes https://cuppathai.com at cutover
// Phone videos on the Lesson Player and Voice Lab cards: the same overlapping-phones look as the website's sales pages.
// The pictures on the phone screens are the website's stills (SITE_PAGES + /reels/p-*.jpg); tapping a phone plays the video in a full-screen player.
var REEL_SETS = {
  lesson: [
    { f: 'reel-3-your-lesson-pack-FRAMED.mp4', p: 'p-dash.jpg', th: 'แพ็กบทเรียนของคุณ', en: 'Your lesson pack' },
    { f: 'reel-2-speak-and-score-FRAMED.mp4', p: 'p-score.jpg', th: 'พูดแล้วรับคะแนน', en: 'Speak and score' },
    { f: 'reel-4-practice-games-FRAMED.mp4', p: 'p-games.jpg', th: 'เกมฝึกฝน', en: 'Practice games' }
  ],
  voice: [
    { f: 'reel-1-find-your-phrase-FRAMED.mp4', p: 'p-find.jpg', th: 'ค้นหาวลี', en: 'Find your phrase' },
    { f: 'reel-2-speak-and-score-FRAMED.mp4', p: 'p-score.jpg', th: 'พูดแล้วรับคะแนน', en: 'Speak and score' }
  ]
};
function reelCss(){
  return '<style>'+
    '.hc{text-align:center;margin:6px 0 2px}.hc-stage{display:flex;justify-content:center;align-items:center;padding:14px 0 6px}'+
    '.hc-phone{all:unset;cursor:pointer;display:block;position:relative;width:31%;max-width:118px;transition:transform .25s ease}'+
    '.hc-body,.hc-screen{box-sizing:border-box}.hc-body{display:block;position:relative;aspect-ratio:1/1.75;background:#121212;border:2px solid #3b3b3b;border-radius:13%/6.2%;padding:8% 4.6% 5%;box-shadow:0 14px 28px rgba(60,40,20,.28)}'+
    '.hc-speaker{position:absolute;top:3.2%;left:50%;width:24%;height:1.2%;transform:translateX(-50%);background:#2b2b2b;border-radius:99px}'+
    '.hc-screen{display:block;position:relative;width:100%;height:100%;background-size:cover;background-position:center top;background-color:#f2efea;border-radius:8%/4%;overflow:hidden}'+
    '.hc-play{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;background:#fff;border:2px solid #000;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.25)}'+
    '.hc-play svg{width:55%;fill:#000;margin-left:8%}'+
    '.hc-phone:hover{transform:translateY(-5px) scale(1.03);z-index:5}'+
    '.hc[data-n="3"] .hc-p0{transform:rotate(-5deg) translateY(4%);margin-right:-6%;z-index:1}'+
    '.hc[data-n="3"] .hc-p1{width:36%;max-width:136px;z-index:3}'+
    '.hc[data-n="3"] .hc-p2{transform:rotate(5deg) translateY(4%);margin-left:-6%;z-index:2}'+
    '.hc[data-n="3"] .hc-p0:hover{transform:rotate(-5deg) translateY(0) scale(1.04)}.hc[data-n="3"] .hc-p2:hover{transform:rotate(5deg) translateY(0) scale(1.04)}'+
    '.hc[data-n="2"] .hc-phone{width:38%;max-width:132px}'+
    '.hc[data-n="2"] .hc-p0{transform:rotate(-4deg) translateY(3%);margin-right:-7%;z-index:1}'+
    '.hc[data-n="2"] .hc-p1{transform:rotate(3deg);z-index:2}'+
    '.hc[data-n="2"] .hc-p0:hover{transform:rotate(-4deg) translateY(0) scale(1.04)}.hc[data-n="2"] .hc-p1:hover{transform:rotate(3deg) translateY(-4px) scale(1.04)}'+
    '.hc-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 0}'+
    '.hc-leg{all:unset;cursor:pointer;background:#F2EFEA;border-radius:999px;padding:5px 12px;font-size:0.72rem;font-weight:700;color:#2A1A0E}.hc-leg:hover{background:#e8e1d4}'+
    '.hc-label{font-size:0.78rem;font-weight:700;color:#7F2824;margin-bottom:2px}'+
    '.hc.small .hc-stage{padding:6px 0 0;transform:scale(.7);transform-origin:center top;height:176px;align-items:flex-start}.hc.small .hc-legend{margin-top:0}'+
    '.hc-more{border-top:1px solid #eee;margin-top:12px;padding-top:10px}'+
    '.rt-link{display:block;text-align:center;font-size:0.8rem;font-weight:700;color:#7F2824;margin:6px 0 2px}'+
    '</style>';
}
function reelCluster(kind, small){
  var set = REEL_SETS[kind];
  var phones = set.map(function(r, i){
    return '<button type="button" class="hc-phone hc-p'+i+'" onclick="openReel(\''+r.f+'\')" aria-label="'+T(r.th, r.en)+'">'+
      '<span class="hc-body"><span class="hc-speaker"></span><span class="hc-screen" style="background-image:url(\''+SITE_PAGES+'/reels/'+r.p+'\')">'+
      '<span class="hc-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span></span></span></button>';
  }).join('');
  var legend = set.map(function(r){
    return '<button type="button" class="hc-leg" onclick="openReel(\''+r.f+'\')">▶ '+T(r.th, r.en)+'</button>';
  }).join('');
  return '<div class="hc'+(small ? ' small' : '')+'" data-n="'+set.length+'">'+
    (small ? '<div class="hc-label">▶ '+T('วิดีโอแนะนำการใช้งาน','How to use it: instruction videos')+'</div>' : '')+
    '<div class="hc-stage">'+phones+'</div><div class="hc-legend">'+legend+'</div></div>';
}
// big (not bought yet: the pitch) or small (bought: how-to helper); `page` = the product page on the website with the full explanation
function reelBlock(kind, page, bought){
  var more = '<a class="rt-link" href="'+SITE_PAGES+page+'" target="_blank" rel="noopener">'+T('ดูรายละเอียดเพิ่มเติม →','See full details →')+'</a>';
  if (bought) return reelCss()+'<div class="hc-more">'+reelCluster(kind, true)+more+'</div>';
  return reelCss()+reelCluster(kind, false)+more;
}

function openReel(file){
  var m = document.getElementById('reel-modal');
  if (!m) {
    m = document.createElement('div'); m.id = 'reel-modal';
    m.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:9500;display:none;align-items:center;justify-content:center;padding:14px';
    m.onclick = closeReel;
    m.innerHTML = '<div style="position:relative;height:min(100%,780px);aspect-ratio:9/16;max-width:100%" onclick="event.stopPropagation()">'+
      '<video id="reel-video" controls playsinline style="width:100%;height:100%;border-radius:14px;background:#000"></video>'+
      '<button onclick="closeReel()" aria-label="Close" style="position:absolute;top:-8px;right:-8px;width:34px;height:34px;border-radius:50%;border:0;background:#fff;font-size:18px;cursor:pointer">✕</button></div>';
    document.body.appendChild(m);
    document.addEventListener('keydown', function(e){ if (e.key === 'Escape') closeReel(); });
  }
  var v = document.getElementById('reel-video');
  v.src = REELS_BASE + file; m.style.display = 'flex';
  var p = v.play(); if (p && p.catch) p.catch(function(){});
}
function closeReel(){
  var m = document.getElementById('reel-modal'); if (!m) return;
  var v = document.getElementById('reel-video'); try { v.pause(); } catch(e){}
  m.style.display = 'none';
}

// ── Lesson Player pack list (v9.25) ──
// Only the pack practised most recently shows (the same pack as the Continue card; a customer who has not practised yet sees the lowest pack number).
// Every other pack sits behind one 'See all my packs' button with its own search box. One pack only: no button.
var PACKS_SHOWN = 1;
var packsOpen = false, packQuery = '';   // not remembered: a new visit starts with the fold closed

// when each owned pack was last practised (milliseconds), from the progress rows
function packLastUsed(){
  var last = {};
  progressRows.forEach(function(r){
    if (!r.phrase_id) return;
    var id = null;
    if (r.phrase_id.indexOf(':') !== -1) id = r.phrase_id.split(':')[0];
    else if (r.phrase_id.indexOf('-sc') !== -1) id = r.phrase_id.split('-sc')[0];
    if (!id) return;
    var t = r.updated_at ? Date.parse(r.updated_at) : 0;
    if (!last[id] || t > last[id]) last[id] = t || 1;
  });
  return last;
}
function packNumSort(a, b){ return parseInt(getPackNum(a),10) - parseInt(getPackNum(b),10); }
// returns { top:[...pack ids shown], rest:[...pack ids behind the fold] }
function splitPacks(){
  var all = ownedPacks.slice().sort(packNumSort);
  if (all.length <= PACKS_SHOWN) return { top: all, rest: [] };
  var last = packLastUsed();
  var used = all.filter(function(p){ return last[p]; }).sort(function(a,b){ return last[b] - last[a] || packNumSort(a,b); });
  var unused = all.filter(function(p){ return !last[p]; });   // already in pack-number order
  var top = used.concat(unused).slice(0, PACKS_SHOWN);
  var rest = all.filter(function(p){ return top.indexOf(p) === -1; });
  return { top: top, rest: rest };
}

function packRowHtml(pk){
  var st = packStats(pk);
  var info = packDisplayInfo(pk);
  var statusClass = st.done >= PACK_SIZE ? 'done' : 'active';
  var statusText = st.done >= PACK_SIZE ? T('เรียนจบ','Complete') : T('กำลังเรียน','Active');
  var fillClass = st.done >= PACK_SIZE ? 'done' : '';
  var starsDisplay = '';
  for (var i = 1; i <= 4; i++) {
    starsDisplay += (i <= Math.round(st.avgStars)) ? '⭐' : '☆';
  }
  var cefrClass = cefrColorClass(info.cefr);

  return '<div class="pack-row" onclick="openPack(\''+pk+'\')">'+
    coverImg(pk)+'<div class="pack-main">'+
      '<div class="pack-meta-row">'+
        '<span class="pack-number-badge">Pack '+info.packNum+'</span>'+
        '<span class="cefr-badge '+cefrClass+'">'+info.cefr+'</span>'+
        '<span class="grade-badge">'+info.grade+'</span>'+
      '</div>'+
      '<div class="pack-name">'+esc(info.title)+'</div>'+
      '<div class="pack-track"><div class="pack-fill '+fillClass+'" style="width:'+st.pct+'%"></div></div>'+
      '<div class="pack-stats">'+
        '<span>📊 '+st.done+'/'+PACK_SIZE+'</span>'+
        '<span class="pass">✅ '+st.passed+'</span>'+
        '<span class="hon">🌟 '+st.honorary+'</span>'+
        '<span class="avg">'+starsDisplay+'</span>'+
      '</div>'+
      '<div class="pack-actions">'+
        '<a class="act-btn" href="'+GAMES_URL+'?pack='+encodeURIComponent(pk)+'" onclick="event.stopPropagation();" target="_blank" rel="noopener">🧩 '+T('เกมฝึกฝน','Practice games')+'</a>'+
        '<a class="act-btn" href="javascript:void(0)" onclick="event.stopPropagation(); downloadPack(\''+pk+'\', this); return false;">📥 '+T('ดาวน์โหลด EPUB','Download EPUB')+'</a>'+
      '</div>'+
    '</div>'+
    '<span class="pack-status '+statusClass+'">'+statusText+'</span>'+
    '<span class="pack-arrow">→</span>'+
  '</div>';
}

function togglePacksFold(){ packsOpen = !packsOpen; renderLessonCards(); }
function packSearch(q){ packQuery = q; drawRestPacks(); }

// the packs behind the fold, filtered by the search box (a number matches that pack number; words match the Thai or English title)
function drawRestPacks(){
  var host = document.getElementById('pk-rest-list');
  if (!host) return;
  var rest = splitPacks().rest;
  var q = packQuery.trim().toLowerCase();
  if (q) {
    var isNum = /^[0-9]+$/.test(q);
    rest = rest.filter(function(pk){
      if (isNum && parseInt(getPackNum(pk),10) === parseInt(q,10)) return true;
      var c = catalogue[pk] || {};
      var hay = ((c.title_th||'')+' '+(c.title_en||'')).toLowerCase();
      return hay.indexOf(q) !== -1;
    });
  }
  host.innerHTML = rest.length ? rest.map(packRowHtml).join('')
    : '<div class="pk-none">'+T('ไม่พบแพ็กที่ตรงกับคำค้น','No pack matches your search')+'</div>';
}

function renderLessonCards(){
  var host = document.getElementById('lesson-cards');
  if (!host) return;
  host.innerHTML = '';

  var html = '<div class="card">';
  html += '<div class="card-head"><span class="card-icon">📚</span><div style="flex:1;min-width:0;">'+
    '<div class="card-title">English Lesson Player</div>'+
    '<div class="card-desc">'+T('เรียนทีละแพ็ก ทีละฉาก ฟังอวตารพูด ดูคำแปลและคำอ่านภาษาไทย แล้วพูดตามเพื่อรับคะแนนจาก AI','One pack, one scene at a time: hear the avatar, see the Thai meaning and pronunciation, then speak for your AI score.')+'</div></div></div>';
  if(ownedPacks.length){
    var sp = splitPacks();
    sp.top.forEach(function(pk){ html += packRowHtml(pk); });

    if (sp.rest.length) {
      html += '<button type="button" class="pay-fold" aria-expanded="'+(packsOpen ? 'true' : 'false')+'" onclick="togglePacksFold()">'+
        '<span class="pf-arrow">'+(packsOpen ? '▾' : '▸')+'</span> <span><span style="color:#7F2824;">'+T('ดู','See')+'</span>'+T('แพ็กทั้งหมดของฉัน',' all my packs')+'</span>'+
        '<span class="pf-hint">'+(packsOpen ? T('ซ่อน','Hide') : T('แสดง','Show'))+'</span></button>';
      if (packsOpen) {
        html += '<input type="text" class="pk-in" id="pk-search" placeholder="'+T('🔍 ค้นหาแพ็ก เช่น 12 หรือชื่อแพ็ก','🔍 Search your packs: a number like 12, or a title')+'" value="'+esc(packQuery)+'" oninput="packSearch(this.value)" autocomplete="off">'+
                '<div id="pk-rest-list"></div>';
      }
    }

    html += '<a class="btn ghost" '+shopAttrs('pack', SITE+'/product-category/unlesson-packs/')+'>'+T('เพิ่มแพ็ก','Add another pack')+'</a>';
    html += reelBlock('lesson', '/lesson-player/', true);
  } else {
    html += reelBlock('lesson', '/lesson-player/', false);
    html += '<div style="text-align:center;padding:10px 0 14px;color:#7A6A5A;font-size:0.85rem;">'+
      T('ยังไม่มีแพ็กที่ซื้อ','No packs purchased yet')+
      '</div>'+
      '<a class="btn" '+shopAttrs('pack', SITE+'/product-category/unlesson-packs/')+'>'+T('เพิ่มแพ็กใหม่','Add a new pack')+'</a>';
  }
  html += '</div>';
  host.innerHTML = html;
  drawRestPacks();
  var badge = document.getElementById('pack-count-badge');
  if (badge) badge.textContent = ownedPacks.length + ' ' + T('แพ็ก','packs');
}

// ── Install the app bar (v9.25) ──
// Android/Chrome offers a real install prompt; iPhone has none, so the bar shows the two taps instead.
// Never shown inside the installed app. "x" hides it for 30 days.
var installEvt = null;
window.addEventListener('beforeinstallprompt', function(e){ e.preventDefault(); installEvt = e; renderInstallBar(); });
window.addEventListener('appinstalled', function(){ installEvt = null; renderInstallBar(); });
function isInstalledApp(){
  try { return (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || window.navigator.standalone === true; } catch(e){ return false; }
}
function installHidden(){
  try { var t = parseInt(localStorage.getItem('ct_install_hide')||'0',10); return t && (Date.now() - t) < 30*86400000; } catch(e){ return false; }
}
function hideInstallBar(){
  try { localStorage.setItem('ct_install_hide', String(Date.now())); } catch(e){}
  var h = document.getElementById('install-slot'); if (h) h.innerHTML = '';
}
function doInstall(){
  if (installEvt) {
    installEvt.prompt();
    installEvt.userChoice.then(function(){ installEvt = null; renderInstallBar(); }).catch(function(){});
  } else {
    var n = document.getElementById('ib-ios');
    if (n) n.style.display = (n.style.display === 'none' ? 'block' : 'none');
  }
}
function renderInstallBar(){
  var host = document.getElementById('install-slot');
  if (!host) return;
  if (isInstalledApp() || installHidden()) { host.innerHTML = ''; return; }
  var ios = /iphone|ipad|ipod/i.test(navigator.userAgent || '');
  if (!installEvt && !ios) { host.innerHTML = ''; return; }   // no way to install from this browser: show nothing
  host.innerHTML = '<div class="install-bar"><span style="font-size:1.4rem;">📲</span>'+
    '<div class="ib-text">'+T('ติดตั้งแอป CuppaThai','Get the CuppaThai app')+'<small>'+T('เปิดได้ทันทีจากหน้าจอหลัก','Opens in one tap from your home screen')+'</small>'+
    '<small id="ib-ios" style="display:none;margin-top:6px;color:#3D2B1F;">'+T('บน iPhone: แตะปุ่มแชร์ แล้วเลือก "เพิ่มลงในหน้าจอโฮม"','On iPhone: tap the Share button, then "Add to Home Screen".')+'</small></div>'+
    '<button type="button" class="ib-go" onclick="doInstall()">'+T('ติดตั้ง','Install')+'</button>'+
    '<button type="button" class="ib-x" aria-label="'+T('ปิด','Close')+'" onclick="hideInstallBar()">✕</button></div>';
}

function renderVoiceCards(){
  var host = document.getElementById('voice-cards');
  if (!host) return;
  var cr = profile.voice_credits || 0;
  var g = getVoiceStats();

  var creditsUsed = g.attempts;
  var creditsRemaining = cr;
  var totalCreditsUsed = creditsUsed + creditsRemaining;
  var usagePct = totalCreditsUsed > 0 ? Math.round((creditsUsed / totalCreditsUsed) * 100) : 0;

  var statusClass = 'empty';
  var statusText = T('ไม่มีเครดิต','No credits');
  if (cr > 20) { statusClass = 'healthy'; statusText = T('พร้อมฝึก','Ready to practise'); }
  else if (cr > 5) { statusClass = 'low'; statusText = T('เครดิตเหลือน้อย','Low credits'); }
  else if (cr > 0) { statusClass = 'low'; statusText = T('เครดิตใกล้หมด','Almost empty'); }

  var fillClass = 'low';
  if (usagePct > 75) fillClass = 'high';
  else if (usagePct > 40) fillClass = 'medium';

  var html = '<div class="card">';
  html += '<div class="card-head"><span class="card-icon">🎤</span><div style="flex:1;min-width:0;">'+
    '<div class="card-title">Voice Lab</div>'+
    '<div class="card-desc">'+T('ฝึกออกเสียงกับ AI ใช้เครดิตครั้งละ 1','AI pronunciation practice. 1 credit per scored try.')+'</div></div></div>';

  html += '<div class="card-body">';

  // no credits yet: the phone videos are the pitch; with credits they shrink to a collapsed helper at the bottom
  if (cr <= 0) html += reelBlock('voice', '/en-lab/', false);

  html += '<div class="vl-credit-row">'+
    '<span class="num">🪙 '+cr+'</span>'+
    '<span class="lbl">'+T('เครดิต','credits')+'</span>'+
    (cr>0 ? '<span style="font-size:0.65rem;color:#7A6A5A;">· '+T('ประมาณ ','about ')+Math.max(1,Math.round(cr/TRIES_PER_LESSON))+' '+T('บทเรียน','lessons')+'</span>' : '')+
  '</div>';

  if (totalCreditsUsed > 0) {
    html += '<div class="vl-track"><div class="vl-fill '+fillClass+'" style="width:'+usagePct+'%"></div></div>';
    html += '<div style="display:flex;justify-content:space-between;font-size:0.65rem;color:#7A6A5A;margin-bottom:6px;">'+
      '<span>'+T('ใช้ไป','Used')+' '+creditsUsed+'</span>'+
      '<span>'+T('เหลือ','Remaining')+' '+creditsRemaining+'</span>'+
    '</div>';
  }

  // Fixed label: "total practices" instead of "attempts" to avoid confusion
  html += '<div class="vl-stats">'+
    '<span class="pass">✅ '+g.passes+'</span>'+
    '<span class="avg">⭐ '+g.avgStars+'</span>'+
    '<span>📊 '+g.attempts+' '+T('การฝึกทั้งหมด','total practices')+'</span>'+
  '</div>';

  html += '<span class="vl-status '+statusClass+'">'+statusText+'</span>';

  html += '<a class="btn" href="/voicelabdemo/">'+T('เข้า Voice Lab','Open Voice Lab')+'</a>';
  html += '<a class="btn ghost" '+shopAttrs('voice', SITE+'/shop/?product_cat=voice-credits')+'>'+T('เติมเครดิต','Buy credits')+'</a>';
  if (cr > 0) html += reelBlock('voice', '/en-lab/', true);

  html += '</div>';
  html += '</div>';
  host.innerHTML = html;
  var badge = document.getElementById('vl-credit-badge');
  if (badge) badge.textContent = cr + ' ' + T('เครดิต','credits');
}

// ╔═══════════════ VOCAP CARD — added v9.5 ═══════════════╗
// NOTE: this shows stats and a leaderboard preview only. It does not
// show a subscription/access status badge, because that model isn't
// decided yet (see the instruction book). Once it is, add a status
// line here reading whichever field ends up recording it (e.g. a
// vocap_access_until timestamp, or a bundle flag on user_purchases).
function renderVocapCard(){
  var host = document.getElementById('vocap-cards');
  if (!host) return;

  var html = '<div class="card">';
  html += '<div class="card-head"><span class="card-icon">🎮</span><div style="flex:1;min-width:0;">'+
    '<div class="card-title">VOCAP</div>'+
    '<div class="card-desc">'+T('เกมคำศัพท์สองภาษา — ค้นหาคำ แข่งเวลา และอีกมากมาย','Bilingual word game — Word Hunt, Race, and more.')+'</div></div></div>';

  html += '<div class="card-body">';

  // Revised 9 Sep 2026 — free monthly allowance (200 games) added ahead
  // of the paid top-up balance, so this now shows two figures instead of
  // one. profile.vocap_free_credits / vocap_free_reset_at come for free
  // from the Hub's existing users?select=* fetch, same as vocap_credits
  // always has — no new API call needed. Because that raw column only
  // actually gets reset server-side the next time the player spends a
  // credit (see decrement_vocap_credit() / get_vocap_balance() in
  // Supabase), a reset that's overdue would otherwise show a stale,
  // wrongly-empty free balance here — so if 30 days have passed since
  // vocap_free_reset_at, this shows the fresh 200 too, purely for
  // display. The real column catches up the moment they next play.
  var VOCAP_FREE_MONTHLY = 200;
  var vcPaid = profile.vocap_credits || 0;
  var vcResetAt = profile.vocap_free_reset_at ? new Date(profile.vocap_free_reset_at) : null;
  var vcFreeStale = !vcResetAt || (Date.now() - vcResetAt.getTime()) > 30*24*60*60*1000;
  var vcFree = vcFreeStale ? VOCAP_FREE_MONTHLY : (profile.vocap_free_credits != null ? profile.vocap_free_credits : VOCAP_FREE_MONTHLY);
  var vc = vcFree + vcPaid; // combined, drives the status badge below same as before
  var vcPct = Math.max(0, Math.min(100, Math.round(vcFree / VOCAP_FREE_MONTHLY * 100)));
  var vcStatusClass = 'empty', vcStatusText = T('ไม่มีเครดิต','No credits');
  if (vc > 100) { vcStatusClass = 'healthy'; vcStatusText = T('พร้อมเล่น','Ready to play'); }
  else if (vc > 20) { vcStatusClass = 'low'; vcStatusText = T('เครดิตเหลือน้อย','Low credits'); }
  else if (vc > 0) { vcStatusClass = 'low'; vcStatusText = T('เครดิตใกล้หมด','Almost empty'); }

  html += '<div class="vocap-credit-row">'+
    '<span class="num">🎮 '+vcFree+' / '+VOCAP_FREE_MONTHLY+'</span>'+
    '<span class="lbl">'+T('เกมฟรีเดือนนี้','free games this month')+'</span>'+
  '</div>';
  html += '<div class="vocap-credit-track"><div class="vocap-credit-fill'+(vcFree<=20?' low':'')+'" style="width:'+vcPct+'%"></div></div>';
  if (vcPaid > 0) {
    html += '<div class="vocap-credit-row" style="margin-top:4px;">'+
      '<span class="num">🪙 '+vcPaid+'</span>'+
      '<span class="lbl">'+T('เครดิตที่ซื้อ (ไม่หมดอายุ)','purchased credits (never expire)')+'</span>'+
    '</div>';
  }
  html += '<div style="text-align:center;"><span class="vocap-credit-status '+vcStatusClass+'">'+vcStatusText+'</span></div>';

  if (vocapProfile && vocapProfile.stats) {
    var s = vocapProfile.stats;
    html += '<div class="vocap-stats">'+
      '<span class="words">📖 '+(s.words||0)+' '+T('คำที่พบ','words found')+'</span>'+
      '<span class="laurels">🏅 '+(vocapProfile.laurels||0)+' '+T('รางวัล','laurels')+'</span>'+
      '<span class="streak">🔥 '+(s.beststreak||0)+' '+T('สถิติต่อเนื่อง','best streak')+'</span>'+
    '</div>';
    if (vocapProfile.title) {
      html += '<div style="font-size:0.78rem;color:#7A6A5A;margin-bottom:4px;">'+T('ตำแหน่ง: ','Title: ')+esc(vocapProfile.title)+'</div>';
    }
  } else {
    // Fix (12 Aug 2026): vocap_profile is written only when a Race
    // finishes (profSave(), race-specific), not from Classic mode - so
    // this can be empty even for someone who's played plenty of Classic,
    // as the leaderboard right below this may already show. "Never
    // played" was misleading in that case; this is specific about what's
    // actually missing.
    html += '<div style="font-size:0.82rem;color:#7A6A5A;padding:4px 0 8px;">'+
      T('ยังไม่มีสถิติโหมดแข่ง — ลองเล่นโหมด Play Together เพื่อดูสถิติที่นี่','No Race stats yet — play a round of Play Together to see stats here.')+
    '</div>';
  }

  // Mini leaderboard — top 5, own row highlighted if present.
  html += '<div class="vocap-lb">';
  html += '<div class="vocap-lb-title">'+T('อันดับสูงสุด (คำศัพท์อังกฤษ)','Top players (English)')+'</div>';
  if (vocapLeaderboard.length) {
    vocapLeaderboard.forEach(function(row, i){
      var isMe = user && row.player_id === user.id;
      html += '<div class="vocap-lb-row'+(isMe?' me':'')+'">'+
        '<span class="vocap-lb-pos">'+(i+1)+'</span>'+
        '<span class="vocap-lb-name">'+esc(row.name||'—')+(isMe?' ('+T('คุณ','you')+')':'')+'</span>'+
        '<span class="vocap-lb-val">'+(row.words_found||0)+' '+T('คำ','words')+'</span>'+
      '</div>';
    });
  } else {
    html += '<div class="vocap-lb-empty">'+T('ยังไม่มีอันดับ — เป็นคนแรก!','No scores yet — be the first!')+'</div>';
  }
  html += '</div>';

  // Removed (9 Sep 2026): the ฿179 "Learning Bundle" promo that used to
  // sit here (VOCAP unlimited + 50 Voice Lab credits + 1 Lesson Pack) —
  // its CT-DASH-nn products and vocap-bundles category were never built,
  // so the button always pointed at an empty shop page, and now that
  // VOCAP has its own free 200-games/month allowance (see instruction
  // book), "VOCAP unlimited" stops being a meaningful paid perk anyway.
  // If a combo bundle comes back later it needs redesigning without the
  // VOCAP-access component — e.g. Pack + Voice Lab credits, or Pack +
  // VOCAP top-up credits — not just re-added as-is.

  html += '<a class="btn" href="/vocap/">'+T('เล่น VOCAP →','Play VOCAP →')+'</a>';
  // Added 12 Aug 2026 — dedicated top-up button, matching the Voice Lab
  // card's own "Open Voice Lab" + "Buy credits" pattern above.
  // Fix (9 Sep 2026): pointed at a "vocap-credits" category that was
  // never created. The three CT-VOCAP-nn products (published 9 Sep 2026)
  // actually live in the existing "Game" category (slug: game) — no new
  // category needed after all. Confirmed live at /product-category/game/.
  html += '<a class="btn ghost" '+shopAttrs('vocap', SITE+'/product-category/game/')+'>'+T('เติมเครดิต VOCAP','Top up VOCAP credits')+'</a>';

  html += '</div>';
  html += '</div>';
  host.innerHTML = html;
}

// ─── CREDIT-INCREASE TOAST (added 9 Sep 2026) ──────────────
// Compares each credit balance against what this browser last saw (via
// localStorage — no backend change needed, since the Hub already fetches
// the current balance on every load). Fires a toast only when a PRIOR
// value is on record and the balance has gone up since; a brand-new
// device/browser with no prior record just quietly stores the baseline,
// so an existing customer logging in somewhere new never gets a false
// "you just got credits" for a balance they've had all along.
function checkCreditIncrease(kind, current, label){
  if (!user) return;
  var key = 'ct_last_credits_' + kind + '_' + user.id;
  var lastRaw = localStorage.getItem(key);
  if (lastRaw !== null) {
    var last = parseInt(lastRaw, 10) || 0;
    if (current > last) {
      showCreditToast(current - last, label);
    }
  }
  localStorage.setItem(key, String(current));
}

function showCreditToast(amount, label){
  var wrap = document.getElementById('credit-toast-wrap');
  if (!wrap) return;
  var el = document.createElement('div');
  el.className = 'credit-toast';
  el.innerHTML = '<span class="icon">🪙</span><span class="msg">'+
    T('คุณได้รับ '+amount+' เครดิต '+label+'!', 'You just got '+amount+' '+label+' credits!')+
    '</span>';
  wrap.appendChild(el);
  setTimeout(function(){ el.remove(); }, 4200);
}

// ─── OPEN PACK ────────────────────────────────────────────
function openPack(packId){
  window.location.href = '/lessondemo/?pack=' + encodeURIComponent(packId);
}

// ─── DOWNLOAD PACK (added 8 Sep 2026) ──────────────────────
// Fetches a fresh signed URL straight from the dashboard session —
// no email involved. See fixes-archive/hub-epub-download-fix/hub-download.php.
// The WooCommerce order email's own download link keeps working exactly
// as before for anyone who gets it; this is a second, independent path
// to the same file, not a replacement.
function downloadPack(epubId, linkEl){
  var original = linkEl.textContent;
  linkEl.textContent = T('กำลังเตรียม...','Preparing...');
  fetch(DOWNLOAD_BROKER_URL, {
    method: 'POST',
    headers: { 'Authorization': 'Bearer ' + accessToken, 'Content-Type': 'application/json' },
    body: JSON.stringify({ epub_id: epubId })
  }).then(function(r){ return r.json(); }).then(function(res){
    linkEl.textContent = original;
    if (!res || !res.ok || !res.url) {
      alert(T('ดาวน์โหลดไม่สำเร็จ ลองใหม่อีกครั้ง หรือใช้ลิงก์ในอีเมลสั่งซื้อ','Download failed — try again, or use the link in your order email.'));
      return;
    }
    window.location.href = res.url;
  }).catch(function(){
    linkEl.textContent = original;
    alert(T('ดาวน์โหลดไม่สำเร็จ ลองใหม่อีกครั้ง หรือใช้ลิงก์ในอีเมลสั่งซื้อ','Download failed — try again, or use the link in your order email.'));
  });
}

// ╔═══════════════ SHOP: PAY BY PROMPTPAY (added v9.8, 26 Sep 2026) ═══════════════╗
// A buyer chooses items here, gets an order reference and the PromptPay details, pays in their own bank app and
// uploads the slip. The items open at once; a person then checks the money. All of it runs through the database
// functions shop_* (see "RUN THIS - shop manual payments.sql"); nothing here talks to WooCommerce or Omise.
// MANUAL_SHOP = false puts the old "Buy" links back (WooCommerce shop).
var MANUAL_SHOP = true;
var CONTACT_EMAIL = 'cuppathai@gmail.com';
// Payment-problem messages send people to the site's own contact page (billing topic preselected), not to a bare email.
function contactLink(){var u=lang==='en'?'https://cuppathai.com/en/contact/?topic=billing':'https://cuppathai.com/contact/?topic=billing';return '<a href="'+u+'" target="_blank" rel="noopener">'+T('ติดต่อเรา','contact us')+'</a>';}
var shopCat = null;          // the catalogue from shop_catalog()
var shopOrders = [];         // this buyer's open and recent orders from shop_my_orders()
var shopCart = {};           // sku -> quantity
var shopTab = 'pack';
var shopScreen = 'list';     // list | pay | done
var shopPayOrder = null;     // {id, reference, amount_thb, promptpay_id} while on the payment screen
var shopDone = null;
var shopBusy = false;
var currentView;

// A visitor who pressed "Buy in your dashboard" on a cuppathai.com product page arrives with ?buy=<website SKU>. It is kept through sign-in
// (sessionStorage) and, once the dashboard is open, the shop opens with that item already chosen.
function captureBuyParam(){
  try {
    // ?src=<tag> from a reel / the website's /play/ page: kept until sign-up, then saved on the new account (raw_user_meta_data.signup_src)
    var msrc = /[?&]src=([A-Za-z0-9_-]{1,30})/.exec(location.search || '');
    if (msrc) sessionStorage.setItem('ct_src', msrc[1]);
    var mpk = /[?&]pack=([0-9]{1,2})(?![0-9])/.exec(location.search || '');   // v9.40: which pack they were looking at, for the sign-up count
    if (mpk) sessionStorage.setItem('ct_pack', mpk[1]);
    var m = /[?&]buy=([A-Za-z0-9-]{3,30})/.exec(location.search || '');
    if (m && /^(CT-BUNDLE-\d{2}|VC-\d{2,3}|CT-VOCAP-\d{2})$/.test(m[1])) sessionStorage.setItem('ct_buy', m[1]);
    var ms = /[?&]shop=(pack|voice|vocap)/.exec(location.search || '');
    if (ms) sessionStorage.setItem('ct_shop_tab', ms[1]);
    if ((m || ms) && window.history && history.replaceState) history.replaceState(null, '', location.pathname);
  } catch(e){}
}
function handleBuyParam(){
  var w = null;
  var wt = null;
  try { w = sessionStorage.getItem('ct_buy'); if (w) sessionStorage.removeItem('ct_buy'); wt = sessionStorage.getItem('ct_shop_tab'); if (wt) sessionStorage.removeItem('ct_shop_tab'); } catch(e){}
  if (!w && wt && MANUAL_SHOP) { openShop(wt); return; }
  if (!w || !MANUAL_SHOP) return;
  var sku = w.replace(/^CT-BUNDLE-/, 'PACK-');
  var tab = /^PACK-/.test(sku) ? 'pack' : (/^VC-/.test(sku) ? 'voice' : 'vocap');
  openShop(tab, sku);
}
captureBuyParam();
function shopAttrs(tab, url){
  return MANUAL_SHOP ? 'href="javascript:void(0)" onclick="openShop(\''+tab+'\')"' : 'href="'+buyLink(url)+'"';
}
function baht(n){ return 'THB '+Number(n).toLocaleString('en-GB'); }
function checkTime(){ return T('ปกติภายใน 24 ชั่วโมง','usually within 24 hours'); }
// Messages the database sends in English, and the clerk's Problem reasons, shown in Thai when the buyer uses Thai (source: thai_shop_strings.py).
var SERVER_MSG_TH = [
  [new RegExp("^Please sign in\\.$"), "กรุณาเข้าสู่ระบบ"],
  [new RegExp("^Please sign in again\\.$"), "กรุณาเข้าสู่ระบบอีกครั้ง"],
  [new RegExp("^No dashboard was found for this sign\\-in\\.$"), "ไม่พบแดชบอร์ดของบัญชีนี้"],
  [new RegExp("^Payment by PromptPay is not open yet\\. Please try again soon\\.$"), "การชำระเงินด้วยพร้อมเพย์ยังไม่เปิดให้บริการ กรุณาลองใหม่ภายหลัง"],
  [new RegExp("^Please choose at least one item\\.$"), "กรุณาเลือกสินค้าอย่างน้อยหนึ่งรายการ"],
  [new RegExp("^You already have 3 orders waiting for payment\\. Please pay or cancel one of them first\\.$"), "คุณมีคำสั่งซื้อที่รอชำระเงินครบ 3 รายการแล้ว กรุณาชำระเงินหรือยกเลิกรายการใดรายการหนึ่งก่อน"],
  [new RegExp("^One of those items is not available\\.$"), "สินค้าบางรายการไม่พร้อมจำหน่าย"],
  [new RegExp("^Each item can appear once\\. Use the quantity instead\\.$"), "แต่ละสินค้าเลือกได้ครั้งเดียว กรุณาใช้ช่องจำนวนแทน"],
  [new RegExp("^You already have (.+) in your dashboard\\.$"), "คุณมี {0} ในแดชบอร์ดของคุณอยู่แล้ว"],
  [new RegExp("^(.+) is already in one of your open orders\\.$"), "{0} อยู่ในคำสั่งซื้อที่ยังเปิดอยู่ของคุณแล้ว"],
  [new RegExp("^Please choose a quantity from 1 to 20\\.$"), "กรุณาเลือกจำนวนตั้งแต่ 1 ถึง 20"],
  [new RegExp("^(.+) is not available yet\\.$"), "{0} ยังไม่พร้อมจำหน่าย"],
  [new RegExp("^That order was not found\\.$"), "ไม่พบคำสั่งซื้อนี้"],
  [new RegExp("^That order was not found, or it is already confirmed\\.$"), "ไม่พบคำสั่งซื้อนี้ หรือได้รับการยืนยันแล้ว"],
  [new RegExp("^A receipt has already been sent for this order, so it cannot be cancelled here\\. Please write to us\\.$"), "คำสั่งซื้อนี้ส่งสลิปแล้ว จึงยกเลิกที่นี่ไม่ได้ กรุณาติดต่อเรา"],
  [new RegExp("^You have already uploaded a receipt for this order\\. It is being checked\\.$"), "คุณอัปโหลดสลิปของคำสั่งซื้อนี้แล้ว กำลังตรวจสอบ"],
  [new RegExp("^That receipt file was not recognised\\. Please try again\\.$"), "ไม่รู้จักไฟล์สลิปนี้ กรุณาลองใหม่อีกครั้ง"],
  [new RegExp("^Your receipt file did not arrive\\. Please try again\\.$"), "ไฟล์สลิปของคุณส่งไม่สำเร็จ กรุณาลองใหม่อีกครั้ง"],
  [new RegExp("^That receipt image has already been used\\. Please upload the receipt for this order\\.$"), "รูปสลิปนี้เคยถูกใช้แล้ว กรุณาอัปโหลดสลิปของคำสั่งซื้อนี้"],
  [new RegExp("^This slip has already been used for a payment\\. Please upload the slip for this order\\.$"), "สลิปนี้เคยใช้ชำระเงินแล้ว กรุณาอัปโหลดสลิปของคำสั่งซื้อนี้"],
  [new RegExp("^Your credits are on hold while a payment is being checked\\. Please see the payments section of your dashboard\\.$"), "เครดิตของคุณถูกระงับชั่วคราวระหว่างตรวจสอบการชำระเงิน กรุณาดูส่วน \"การชำระเงินของฉัน\" ในแดชบอร์ด"],
  [new RegExp("^Could not create the order\\. Please try again\\.$"), "สร้างคำสั่งซื้อไม่สำเร็จ กรุณาลองใหม่อีกครั้ง"],
];
function thServerMsg(m){
  if (lang !== 'th') return m;
  for (var i = 0; i < SERVER_MSG_TH.length; i++) {
    var x = SERVER_MSG_TH[i][0].exec(m);
    if (x) return SERVER_MSG_TH[i][1].replace('{0}', x[1] || '');
  }
  return m;
}
var REASON_TH = {"The amount we received does not match the amount due.": "จำนวนเงินที่เราได้รับไม่ตรงกับยอดที่ต้องชำระ", "We could not find this payment in the bank record.": "เราไม่พบรายการชำระเงินนี้ในบัญชีธนาคาร", "We could not verify the slip you sent.": "เราไม่สามารถยืนยันสลิปที่คุณส่งมาได้", "The payment appears to have gone to a different account.": "ดูเหมือนว่าเงินถูกโอนไปยังบัญชีอื่น"};
function reasonText(r){ return (lang === 'th' && REASON_TH[r]) ? REASON_TH[r] : r; }

function errText(e){
  var m = (e && e.message) ? String(e.message) : '';
  if (!m || /Failed to fetch|NetworkError|Load failed/i.test(m)) return T('เชื่อมต่อไม่ได้ ลองใหม่อีกครั้ง','Could not connect. Please try again.');
  if (/jwt|expired|refresh|invalid.*token|not authenticated|sign in|sign-in/i.test(m)) return T('การเข้าสู่ระบบหมดอายุ กรุณากด "ออก" แล้วเข้าสู่ระบบใหม่ จากนั้นลองอีกครั้ง','Your sign-in has expired. Please press Sign out, sign in again, then try again.');
  return thServerMsg(m);
}

var shopHistory = null, shopHistoryCount = 0;
function loadOrders(){
  if (!MANUAL_SHOP) return Promise.resolve([]);
  sb.rpc('shop_history_count').then(function(r){ if (!r.error) { shopHistoryCount = r.data || 0; renderOrders(); } }).catch(function(){});
  return sb.rpc('shop_my_orders').then(function(r){ return r.error ? [] : (r.data || []); }).catch(function(){ return []; });
}
function hideOrder(id){
  sb.rpc('shop_hide_order', {p_id: id}).then(function(r){
    if (r.error) throw new Error(r.error.message);
    return loadOrders();
  }).then(function(o){ shopOrders = o; renderOrders(); }).catch(function(e){ alert(errText(e)); });
}
// ── payment history: every order that involved a payment, newest first ──
function openHistory(){
  show('shop-view'); shopScreen = 'history';
  document.getElementById('shop-body').innerHTML = '<p class="card-desc" style="text-align:center;padding:40px 0;">'+T('กำลังโหลด...','Loading...')+'</p>';
  sb.rpc('shop_order_history').then(function(r){
    if (r.error) throw new Error(r.error.message);
    shopHistory = r.data || []; renderShopView(); window.scrollTo(0, 0);
  }).catch(function(e){
    document.getElementById('shop-body').innerHTML = '<div class="card"><p class="shop-err" style="display:block">'+esc(errText(e))+'</p><button class="btn" onclick="closeShop()">'+T('กลับไปหน้าแดชบอร์ด','Back to my dashboard')+'</button></div>';
  });
}
function historyStatus(h){
  if (h.status === 'paid') return ['ok', T('ชำระแล้ว','Paid')];
  if (h.status === 'cancelled') {
    if (h.amount_received > 0) return h.refunded_at ? ['warn', T('คืนเงินแล้ว','Refunded')] : ['warn', T('ยกเลิก กำลังคืนเงิน','Cancelled, refund on its way')];
    return ['', T('ยกเลิก','Cancelled')];
  }
  if (h.receipt_uploaded) return ['', T('ได้รับสลิปแล้ว รอตรวจสอบ','Receipt received, being checked')];
  if (h.claimed) return ['', T('แจ้งว่าโอนแล้ว รอตรวจสอบ','You said you paid, being checked')];
  return ['', T('รอชำระเงิน','Waiting for payment')];
}
function historyHtml(){
  var loc = lang === 'th' ? 'th-TH' : 'en-GB';
  var h = '<p style="margin:6px 0 10px"><a href="javascript:void(0)" class="backlink" onclick="closeShop()">← '+T('กลับไปหน้าแดชบอร์ด','Back to my dashboard')+'</a></p>'+
    '<div class="hello"><h1>'+T('ประวัติการชำระเงิน','Payment history')+'</h1><p>'+T('รายการสั่งซื้อทั้งหมดของคุณ ใช้เป็นใบเสร็จรับเงินได้','All your orders. Keep it as your record of payments.')+'</p></div><div class="card">';
  if (!shopHistory || !shopHistory.length) return h + '<p class="empty">'+T('ยังไม่มีรายการ','No orders yet.')+'</p></div>';
  shopHistory.forEach(function(o){
    var st = historyStatus(o), d = new Date(o.received_at || o.created_at);
    h += '<div class="hist-row"><div class="hist-top"><span class="hist-what">'+esc(o.for_what.replace(/^Shop:\s*/, ''))+'</span><span class="hist-amt">'+baht(o.amount_thb)+'</span></div>'+
         '<div class="hist-sub"><span>'+d.toLocaleDateString(loc, {day:'numeric', month:'short', year:'numeric'})+'</span><span>'+esc(o.reference)+'</span><span class="hist-st '+st[0]+'">'+st[1]+'</span></div></div>';
  });
  return h + '</div>';
}
function itemName(it){ return (lang==='en' ? it.name_en : it.name_th) + (it.kind !== 'pack' && it.qty > 1 ? ' ×'+it.qty : ''); }
function orderWhat(o){ return (o.items || []).map(itemName).join(', '); }
// v9.10: a pack that is "In an order" used to be a dead end. Find that order so the buyer can go and pay / upload the slip.
function pendingOrderIdForSku(sku){
  for (var i = 0; i < shopOrders.length; i++) {
    var o = shopOrders[i]; if (o.status === 'paid' || o.cancelled) continue;
    var its = o.items || [];
    for (var k = 0; k < its.length; k++) if (its[k].sku === sku) return o.id;
  }
  return null;
}
function orderLinkHtml(sku){
  var txt = T('อยู่ในคำสั่งซื้อ','In an order'), id = pendingOrderIdForSku(sku);
  if (id === null) return txt;
  return txt + '<br><a class="order-link" href="javascript:void(0)" onclick="event.stopPropagation(); openPay('+id+')">' + T('ชำระเงิน / อัปโหลดสลิป','Pay / upload receipt') + '</a>';
}

// v9.10: a buyer who uploaded the wrong slip can send another one (the database allows 3 replacements and keeps the original 72-hour window).
function replaceLink(id){
  return '<p class="pay-hint" id="rp-'+id+'"><a href="javascript:void(0)" onclick="showReplace('+id+')">'+T('อัปโหลดสลิปใหม่ (ส่งผิดไฟล์)','Uploaded the wrong file? Upload the receipt again')+'</a></p>';
}
function showReplace(id){
  var p = document.getElementById('rp-'+id); if (p) p.innerHTML = uploadBox(id);
}
function uploadBox(id){
  return '<div class="upl">'+
    '<input type="file" id="rc-file-'+id+'" accept="image/*,application/pdf">'+
    '<button class="btn" id="rc-btn-'+id+'" onclick="doReceipt('+id+')">'+T('อัปโหลดสลิปของฉัน','Upload my receipt')+'</button>'+
    '<p class="shop-err" id="rc-err-'+id+'"></p>'+
  '</div>';
}

function orderCard(o){
  var body = '', tone = '';
  if (o.cancelled) {
    tone = 'warn';
    body = o.refunded_at
      ? '<p>'+T('คำสั่งซื้อนี้ถูกยกเลิกและเราได้คืนเงินให้คุณแล้ว','This order was cancelled and we have sent your refund.')+'</p>'
      : '<p>'+T('คำสั่งซื้อนี้ถูกยกเลิก เรากำลังคืนเงิน '+baht(o.amount_received)+' ให้คุณ','This order was cancelled. We are refunding '+baht(o.amount_received)+' to you.')+'</p>';
  } else if (o.status === 'paid') {
    tone = 'ok';
    body = '<p>✅ '+T('ชำระเงินแล้ว ขอบคุณค่ะ/ครับ','Paid. Thank you!')+'</p>';
  } else if (o.flag_reason) {
    tone = 'err';
    body = '<p>'+T('เรายังยืนยันการชำระเงินไม่ได้: ','We could not confirm your payment yet: ')+esc(reasonText(String(o.flag_reason)).replace(/[.\s]+$/, ''))+'. '+
           T('สินค้านี้ถูกหยุดใช้งานชั่วคราว กรุณาอัปโหลดสลิปใหม่ด้านล่าง หรือ ','This is paused until it is sorted out. Please upload a new receipt below, or ')+
           contactLink()+'.</p>'+uploadBox(o.id);
  } else if (o.short_note) {
    tone = 'warn';
    var got = Number(o.amount_received || 0), due = Number(o.amount_thb), bal = due - got;
    body = '<p>'+T('เราได้รับเงิน '+baht(got)+' สำหรับคำสั่งซื้อนี้ แต่ยอดที่ต้องชำระคือ '+baht(due)+' กรุณาโอนยอดที่เหลือ '+baht(bal)+' แล้วอัปโหลดสลิปของยอดที่เหลือด้านล่าง สินค้านี้ถูกหยุดใช้งานชั่วคราวจนกว่ายอดที่เหลือจะเข้า',
           'We received '+baht(got)+' for this order, but the amount due is '+baht(due)+'. Please pay the balance of '+baht(bal)+' and upload that receipt below. It is paused until the balance arrives.')+'</p>'+
           '<p class="pay-hint">'+T('หมายเลขพร้อมเพย์และเลขอ้างอิงอยู่ที่ปุ่ม "วิธีชำระเงิน" ด้านล่าง','The PromptPay number and reference are under "How to pay" below.')+'</p>'+
           '<button class="btn ghost" onclick="openPay('+o.id+')">'+T('วิธีชำระเงิน','How to pay')+'</button>'+uploadBox(o.id);
  } else if (o.provisional) {
    tone = 'ok';
    body = '<p>'+T('ขอบคุณค่ะ/ครับ เราได้รับสลิปของคุณแล้ว และสินค้าเปิดให้ใช้งานได้ทันที เจ้าหน้าที่จะตรวจสอบยอดเงินทุกรายการ ('+checkTime()+') และหน้านี้จะอัปเดตเมื่อยืนยันแล้ว',
           'Thank you, we have your receipt and your items are open now. A person checks every payment ('+checkTime()+'), and this page updates once it is confirmed.')+'</p>'+replaceLink(o.id);
  } else if (o.receipt_uploaded) {
    body = '<p>'+T('เราได้รับสลิปแล้วและกำลังตรวจสอบ ('+checkTime()+') สินค้าจะเปิดให้ใช้งานเมื่อยืนยันยอดเงินเรียบร้อย',
           'We have your receipt and are checking it ('+checkTime()+'). Your items open once the payment is confirmed.')+'</p>'+replaceLink(o.id);
  } else if (o.claimed) {
    body = '<p>'+T('คุณแจ้งว่าโอนเงินแล้ว เจ้าหน้าที่จะตรวจสอบกับบัญชีธนาคาร ('+checkTime()+') หากต้องการเปิดใช้สินค้าทันที ให้อัปโหลดสลิปด้านล่าง',
           'You have told us you paid. A person checks it against our bank ('+checkTime()+'). To open your items straight away, upload your receipt below.')+'</p>'+uploadBox(o.id);
  } else {
    body = '<p>'+T('รอการชำระเงิน โอนตามวิธีที่แสดงแล้วอัปโหลดสลิป สินค้าจะเปิดให้ใช้ทันที','Waiting for your payment. Pay as shown, then upload the slip and your items open straight away.')+'</p>'+
           '<button class="btn" onclick="openPay('+o.id+')">'+T('ชำระเงิน / อัปโหลดสลิป','Pay / upload receipt')+'</button>'+
           '<p class="pay-hint"><a href="javascript:void(0)" onclick="cancelOrder('+o.id+')">'+T('ยกเลิกคำสั่งซื้อนี้','Cancel this order')+'</a></p>';
  }
  return '<div class="card order-card '+tone+'">'+
    '<div class="order-top"><div class="order-what">'+esc(orderWhat(o))+'</div><div class="order-amt">'+baht(o.amount_thb)+'</div></div>'+
    '<div class="order-ref">'+T('หมายเลขคำสั่งซื้อ','Order number')+' <b>'+esc(o.reference)+'</b>'+
      ((o.status === 'paid' || (o.cancelled && (!(o.amount_received > 0) || o.refunded_at))) ? ' &nbsp;·&nbsp; <a href="javascript:void(0)" class="hide-link" onclick="hideOrder('+o.id+')">'+T('ซ่อน','Hide')+'</a>' : '')+
    '</div>'+body+'</div>';
}
var ordersDoneOpen = false, ordersSig = '';   // not remembered: a new visit starts with the finished payments folded away
function toggleDoneOrders(){ ordersDoneOpen = !ordersDoneOpen; renderOrders(); }
function renderOrders(){
  var host = document.getElementById('orders-slot');
  if (!host) return;
  if (!MANUAL_SHOP || (!shopOrders.length && !shopHistoryCount)) { host.innerHTML = ''; return; }
  // v9.11: anything still waiting (unpaid, receipt being checked, paused) is always shown. Finished orders
  // (paid, or cancelled) are folded away behind one toggle that starts closed on every page load.
  var live = [], done = [];
  // a cancelled order still waiting for its refund stays visible
  shopOrders.forEach(function(o){ ((o.status === 'paid' || o.cancelled) && !(o.cancelled && o.amount_received > 0 && !o.refunded_at) ? done : live).push(o); });
  // v9.12: whenever the set of waiting orders changes (a new purchase, a receipt uploaded, an order confirmed) the finished
  // list folds itself away again, so the dashboard always shows "what is happening now" first and the history on request.
  var sig = live.map(function(o){ return o.id+':'+o.status+':'+(o.receipt_uploaded ? 1 : 0)+':'+(o.provisional ? 1 : 0)+':'+(o.flag_reason ? 1 : 0); }).join('|');
  if (sig !== ordersSig) { ordersSig = sig; ordersDoneOpen = false; }
  var h = '<div class="sect"><span>🧾</span><span>'+T('การชำระเงินของฉัน','My payments')+'</span></div>';
  live.forEach(function(o){ h += orderCard(o); });
  if (done.length) {
    h += '<button type="button" class="pay-fold" aria-expanded="'+(ordersDoneOpen ? 'true' : 'false')+'" onclick="toggleDoneOrders()">'+
         '<span class="pf-arrow">'+(ordersDoneOpen ? '▾' : '▸')+'</span> '+T('การชำระเงินที่เสร็จสิ้นแล้ว','Completed payments')+' ('+done.length+')'+
         '<span class="pf-hint">'+(ordersDoneOpen ? T('ซ่อน','Hide') : T('แสดง','Show'))+'</span></button>';
    if (ordersDoneOpen) done.forEach(function(o){ h += orderCard(o); });
  }
  if (shopHistoryCount) h += '<p class="hist-link"><a href="javascript:void(0)" onclick="openHistory()">'+T('ประวัติการชำระเงิน','Payment history')+' ('+shopHistoryCount+') →</a></p>';
  host.innerHTML = h;
}

// ── opening the shop ──
function openShop(tab, preselect){
  shopTab = tab || 'pack'; shopScreen = 'list'; shopCart = {};
  show('shop-view');
  document.getElementById('shop-body').innerHTML = '<p class="card-desc" style="text-align:center;padding:40px 0;">'+T('กำลังโหลด...','Loading...')+'</p>';
  sb.rpc('shop_catalog').then(function(r){
    if (r.error) throw new Error(r.error.message);
    shopCat = r.data;
    if (preselect) {
      var pp = null; (shopCat.products || []).forEach(function(x){ if (x.sku === preselect) pp = x; });
      if (pp) {
        shopTab = pp.kind;
        var taken = (shopCat.owned || []).indexOf(pp.sku) > -1 || (shopCat.in_order || []).indexOf(pp.sku) > -1;
        if (!taken) shopCart[pp.sku] = 1;
      }
    }
    renderShopView();
  }).catch(function(e){
    document.getElementById('shop-body').innerHTML = '<div class="card"><p class="shop-err" style="display:block">'+esc(errText(e))+'</p><button class="btn" onclick="closeShop()">'+T('กลับไปหน้าแดชบอร์ด','Back to my dashboard')+'</button></div>';
  });
}
function closeShop(){ shopScreen = 'list'; loadAll(); }
function openPay(orderId){
  var o = null; shopOrders.forEach(function(x){ if (x.id === orderId) o = x; });
  if (!o) return;
  show('shop-view');
  var go = function(){
    shopPayOrder = {id:o.id, reference:o.reference, amount_thb:o.amount_thb, promptpay_id:shopCat && shopCat.promptpay_id, claimed:o.claimed, receipt_uploaded:o.receipt_uploaded};
    shopScreen = 'pay'; renderShopView();
  };
  if (shopCat) { go(); return; }
  sb.rpc('shop_catalog').then(function(r){ if (r.error) throw new Error(r.error.message); shopCat = r.data; go(); })
    .catch(function(e){ alert(errText(e)); loadAll(); });
}

function renderShopView(){
  var host = document.getElementById('shop-body');
  if (!host) return;
  if (shopScreen === 'pay') { host.innerHTML = payScreenHtml(); drawPayQr(); return; }
  if (shopScreen === 'done') { host.innerHTML = doneHtml(); return; }
  if (shopScreen === 'history') { host.innerHTML = historyHtml(); return; }
  host.innerHTML = listHtml();
  fillPackDescs();
}

// ── the list of things to buy ──
function cartCount(){ var n = 0; Object.keys(shopCart).forEach(function(k){ n += shopCart[k]; }); return n; }
function cartTotal(){
  var t = 0;
  (shopCat.products || []).forEach(function(p){ if (shopCart[p.sku]) t += p.price * shopCart[p.sku]; });
  return t;
}
function bonusCredits(base){
  return (shopCat && shopCat.first_voice_order && shopCat.bonus_pct > 0) ? Math.ceil(base * shopCat.bonus_pct / 100) : 0;
}
function listHtml(){
  var tabs = [['pack', T('แพ็กบทเรียน','Lesson Packs')], ['voice', T('เครดิต Voice Lab','Voice Lab credits')], ['vocap', T('เครดิต VOCAP','VOCAP credits')]];
  var h = '<p style="margin:6px 0 10px"><a href="javascript:void(0)" class="backlink" onclick="closeShop()">← '+T('กลับไปหน้าแดชบอร์ด','Back to my dashboard')+'</a></p>'+
    '<div class="hello"><h1>'+T('ซื้อสินค้า','Shop')+'</h1><p>'+T('ชำระเงินด้วยพร้อมเพย์ เปิดใช้ทันทีหลังอัปโหลดสลิป','Pay by PromptPay. Your items open as soon as you upload the slip.')+'</p></div>';
  if (!shopCat.pay_ready) {
    return h + '<div class="card"><p>'+T('การชำระเงินด้วยพร้อมเพย์ยังไม่เปิดให้บริการ ขออภัย กรุณาลองใหม่ภายหลัง หรือ ','Payment by PromptPay is not open yet, sorry. Please try again soon, or ')+contactLink()+'.</p></div>';
  }
  h += '<div class="shop-tabs">';
  tabs.forEach(function(t){ h += '<button type="button" class="'+(shopTab === t[0] ? 'on' : '')+'" onclick="shopSetTab(\''+t[0]+'\')">'+t[1]+'</button>'; });
  h += '</div><div class="card">';
  var any = false;
  (shopCat.products || []).forEach(function(p){
    if (p.kind !== shopTab) return;
    any = true;
    if (p.kind === 'pack') {
      var owned = (shopCat.owned || []).indexOf(p.sku) > -1, inOrder = (shopCat.in_order || []).indexOf(p.sku) > -1;
      var on = !!shopCart[p.sku], cefr = CEFR_MAP[p.pack_num] || 'A1', grade = CEFR_GRADE_MAP[p.pack_num] || '';
      h += '<div class="shop-row'+(owned ? ' dim' : inOrder ? ' inorder' : '')+(on ? ' sel' : '')+'"'+(owned || inOrder ? '' : ' onclick="shopTogglePack(\''+p.sku+'\')"')+'>'+
        '<span class="shop-check">'+(on ? '✓' : '')+'</span>'+
        ((p.thumb || p.cover) ? '<img class="shop-cover" loading="lazy" decoding="async" src="'+esc(p.thumb || p.cover)+'" alt="'+esc(p.name_en)+'" onclick="event.stopPropagation(); openCover(\''+esc(p.cover || p.thumb)+'\')" onerror="this.style.display=\'none\'">' : '')+
        '<div class="pack-main"><div class="pack-meta-row"><span class="pack-number-badge">'+esc(lang==='en' ? p.name_en : p.name_th)+'</span>'+
          '<span class="cefr-badge '+cefr.toLowerCase()+'">'+cefr+'</span>'+(grade ? '<span class="grade-badge">'+grade+'</span>' : '')+'</div>'+
        '<div class="pack-name">'+esc(lang==='en' ? (p.title_en || p.title_th || '') : (p.title_th || p.title_en || ''))+'</div>'+
        '<a class="det-link" href="javascript:void(0)" onclick="event.stopPropagation(); shopToggleDetail(\''+p.sku+'\')">'+(shopOpen[p.sku] ? T('ซ่อนรายละเอียด ▴','Hide details ▴') : T('รายละเอียด ▾','Details ▾'))+'</a></div>'+
        '<div class="shop-price">'+(owned ? T('มีแล้ว','You have it') : inOrder ? orderLinkHtml(p.sku) : '฿'+Number(p.price).toLocaleString('en-GB'))+'</div></div>'+
        (shopOpen[p.sku] ? packDetailHtml(p, cefr, grade) : '');
    } else {
      var q = shopCart[p.sku] || 0, b = bonusCredits(p.credits);
      h += '<div class="shop-row'+(q ? ' sel' : '')+'"><div class="pack-main"><div class="pack-name">'+esc(lang==='en' ? p.name_en : p.name_th)+'</div>'+
        (b && p.kind === 'voice' ? '<div class="pack-stats"><span class="pass">+'+b+' '+T('โบนัสสั่งซื้อครั้งแรก','first-order bonus')+'</span></div>' : '')+'</div>'+
        '<div class="shop-price">฿'+Number(p.price).toLocaleString('en-GB')+'</div>'+
        '<div class="qty"><button type="button" onclick="shopQty(\''+p.sku+'\',-1)" aria-label="−">−</button><span>'+q+'</span><button type="button" onclick="shopQty(\''+p.sku+'\',1)" aria-label="+">+</button></div></div>';
    }
  });
  if (!any) h += '<p class="empty">'+T('ยังไม่มีสินค้าในหมวดนี้','Nothing here yet.')+'</p>';
  h += '</div>';
  if (shopTab === 'voice' && shopCat.first_voice_order && shopCat.bonus_pct > 0) {
    h += '<p class="pay-hint">'+T('ออเดอร์เครดิต Voice Lab ครั้งแรกของคุณได้โบนัส +'+shopCat.bonus_pct+'%','Your first Voice Lab credits order gets a +'+shopCat.bonus_pct+'% bonus.')+'</p>';
  }
  var n = cartCount();
  h += '<div class="cartbar"><div><b>'+n+'</b> '+T('รายการ','item'+(n === 1 ? '' : 's'))+' · <b>'+(n ? baht(cartTotal()) : '—')+'</b></div>'+
       '<button class="btn" id="shop-go" onclick="shopCheckout()"'+(n ? '' : ' disabled')+'>'+T('ไปหน้าชำระเงิน','Continue to payment')+'</button></div>'+
       '<p class="shop-err" id="shop-err"></p>';
  return h;
}
var shopOpen = {};
// Tap a cover to see it big.
function closeCoverLb(){ var l = document.querySelector('.cover-lb'); if (l) l.remove(); }
window.addEventListener('popstate', closeCoverLb);
document.addEventListener('keydown', function(e){ if (e.key === 'Escape') closeCoverLb(); });
function openCover(url){
  closeCoverLb();
  var lb = document.createElement('div'); lb.className = 'cover-lb';
  var im = document.createElement('img'); im.src = url; im.alt = '';
  // one history step while the picture is open: Back (or a tap) closes it and the visitor stays on the dashboard
  lb.appendChild(im); lb.onclick = function(){ if (history.state && history.state.ctCover) history.back(); else closeCoverLb(); };
  document.body.appendChild(lb);
  try { history.pushState({ ctCover: 1 }, ''); } catch (e) {}
}
// The full pack description (the same text as the website's product page, without its price and old checkout steps) sits in
// pack-details.json next to this page. It is shown under "Details"; if the file is missing, the short catalogue details show instead.
var packDescCache = null, packDescLoading = false, packDescFailedAt = 0;
function sanitizeDesc(html){
  var doc = new DOMParser().parseFromString(html, 'text/html');
  doc.querySelectorAll('script,style,iframe,object,embed,link,meta,form,input,button,textarea,select,svg,img').forEach(function(n){ n.remove(); });
  doc.body.querySelectorAll('*').forEach(function(n){
    Array.prototype.slice.call(n.attributes).forEach(function(a){
      if (a.name.toLowerCase().indexOf('on') === 0 || /^\s*(javascript|data|vbscript):/i.test(String(a.value))) n.removeAttribute(a.name);
    });
    if (n.tagName === 'A') { n.setAttribute('target', '_blank'); n.setAttribute('rel', 'noopener'); }
  });
  return doc.body.innerHTML;
}
function fillPackDescs(){
  if (!document.querySelector('.pack-desc[data-sku]')) return;
  var put = function(){
    document.querySelectorAll('.pack-desc[data-sku]').forEach(function(el){
      var h = packDescCache && packDescCache[el.getAttribute('data-sku')];
      if (h && !el.getAttribute('data-filled')) { el.innerHTML = sanitizeDesc(h); el.setAttribute('data-filled', '1'); }
    });
  };
  var note = function(msg){
    document.querySelectorAll('.pack-desc[data-sku]:not([data-filled])').forEach(function(el){
      var n = el.querySelector('.desc-note');
      if (!n) { n = document.createElement('p'); n.className = 'pay-hint desc-note'; el.appendChild(n); }
      n.textContent = msg;
    });
  };
  if (packDescCache) { put(); return; }
  if (packDescLoading) { note(T('กำลังโหลดรายละเอียดทั้งหมด...', 'Loading the full description...')); return; }
  // a failed load is retried the next time Details is opened, after a few seconds
  if (packDescFailedAt && Date.now() - packDescFailedAt < 4000) { note(T('โหลดรายละเอียดทั้งหมดไม่สำเร็จ ลองปิดแล้วเปิดใหม่ หรือรีเฟรชหน้านี้', 'The full description could not be loaded. Close and open Details again, or refresh this page.')); return; }
  packDescLoading = true;
  note(T('กำลังโหลดรายละเอียดทั้งหมด...', 'Loading the full description...'));
  var base = location.pathname.replace(/[^\/]*$/, '');
  var tries = ['pack-details.json?v=1', base + 'pack-details.json?v=1', '/customer-hub/pack-details.json?v=1'];
  var attempt = function(i){
    if (i >= tries.length) { packDescLoading = false; packDescFailedAt = Date.now(); note(T('โหลดรายละเอียดทั้งหมดไม่สำเร็จ ลองปิดแล้วเปิดใหม่ หรือรีเฟรชหน้านี้', 'The full description could not be loaded. Close and open Details again, or refresh this page.')); return; }
    fetch(tries[i], {cache: 'no-cache'}).then(function(r){ if (!r.ok) throw new Error('missing'); return r.json(); })
      .then(function(j){
        // v9.13: packs ingested from 4 Oct 2026 keep their description in the database (table pack_details, written by the ingest tool);
        // those rows are laid over the stored file, which still serves packs 1-35. If the table is missing or empty nothing changes.
        return Promise.resolve(sb.from('pack_details').select('sku,html')).then(function(r){
          if (r && !r.error && r.data) r.data.forEach(function(x){ if (x && x.sku && x.html) j[x.sku] = x.html; });
          return j;
        }).catch(function(){ return j; });
      })
      .then(function(j){ packDescCache = j; packDescLoading = false; put(); })
      .catch(function(){ attempt(i + 1); });
  };
  attempt(0);
}
function shopToggleDetail(sku){ shopOpen[sku] = !shopOpen[sku]; renderShopView(); }
function packDetailHtml(p, cefr, grade){
  var lvl = lang==='en' ? p.desc_en : p.desc_th, can = lang==='en' ? p.cando_en : p.cando_th;
  return '<div class="shop-detail">'+(p.cover ? '<img class="detail-cover" loading="lazy" decoding="async" onclick="openCover(\''+esc(p.cover)+'\')" src="'+esc(p.cover)+'" alt="'+esc(lang==='en' ? (p.title_en || p.name_en) : (p.title_th || p.name_th))+'" onerror="this.style.display=\'none\'">' : '')+'<div class="pack-desc" data-sku="'+p.sku+'"><div class="pack-stats"><span>📊 '+(p.phrases || PACK_SIZE)+' '+T('วลี','phrases')+'</span>'+
    '<span>CEFR '+esc(p.cefr || cefr)+'</span>'+(grade ? '<span>'+grade+'</span>' : '')+'</div>'+
    (lvl ? '<p>'+esc(lvl)+'</p>' : '')+
    (can ? '<p><b>'+T('เมื่อเรียนจบ คุณจะ...','After this pack you can...')+'</b><br>'+esc(can)+'</p>' : '')+
    '<p class="pay-hint">'+T('บทเรียนแบบโต้ตอบ + ไฟล์ EPUB + เกมฝึกฝน เปิดใช้ทันทีหลังอัปโหลดสลิป','Interactive lessons + EPUB + practice games. Opens as soon as you upload your slip.')+'</p></div></div>';
}
function shopSetTab(t){ shopTab = t; renderShopView(); }
function shopTogglePack(sku){ if (shopCart[sku]) delete shopCart[sku]; else shopCart[sku] = 1; renderShopView(); }
function shopQty(sku, d){
  var q = (shopCart[sku] || 0) + d;
  if (q < 0) q = 0; if (q > 20) q = 20;
  if (q) shopCart[sku] = q; else delete shopCart[sku];
  renderShopView();
}
function shopCheckout(){
  if (shopBusy || !cartCount()) return;
  shopBusy = true;
  var btn = document.getElementById('shop-go'), err = document.getElementById('shop-err');
  if (btn) { btn.disabled = true; btn.textContent = T('กำลังสร้างคำสั่งซื้อ...','Creating your order...'); }
  var items = Object.keys(shopCart).map(function(k){ return {sku:k, qty:shopCart[k]}; });
  sb.rpc('shop_create_order', {p_items: items}).then(function(r){
    shopBusy = false;
    if (r.error) throw new Error(r.error.message);
    shopCart = {};
    shopPayOrder = r.data; shopScreen = 'pay';
    loadOrders().then(function(o){ shopOrders = o; });
    renderShopView(); window.scrollTo(0, 0);
  }).catch(function(e){
    shopBusy = false;
    if (btn) { btn.disabled = false; btn.textContent = T('ไปหน้าชำระเงิน','Continue to payment'); }
    if (err) { err.textContent = errText(e); err.style.display = 'block'; }
  });
}

// ── how to pay + upload ──
function copyBtn(text, label){
  return '<button type="button" class="copy" onclick="copyText(\''+esc(String(text)).replace(/'/g, '')+'\', this)">'+label+'</button>';
}
function copyText(t, btn){
  var done = function(){ var old = btn.textContent; btn.textContent = T('คัดลอกแล้ว','Copied'); setTimeout(function(){ btn.textContent = old; }, 1400); };
  try { navigator.clipboard.writeText(t).then(done, done); } catch(e){ done(); }
}
// ── PromptPay QR (added 27 Sep 2026) ──
// Built from the PromptPay ID saved in the teacher view (live_settings.promptpay_id) and the exact order amount, so changing the ID there
// changes every QR from then on; nothing is fixed in this page. The QR is the standard Thai credit-transfer code: the buyer's banking app
// shows the account name and locks the amount. qrcode.js (the open-source "qrcode-generator", MIT) sits beside this page.
function ppTlv(tag, val){ return tag + ('0' + String(val.length)).slice(-2) + val; }
function ppCrc16(s){
  var c = 0xFFFF;
  for (var i = 0; i < s.length; i++) {
    c ^= s.charCodeAt(i) << 8;
    for (var b = 0; b < 8; b++) c = (c & 0x8000) ? (((c << 1) ^ 0x1021) & 0xFFFF) : ((c << 1) & 0xFFFF);
  }
  return ('000' + c.toString(16).toUpperCase()).slice(-4);
}
// id: a 10-digit mobile number (0812345678), a 13-digit national or tax ID, or a 15-digit e-wallet ID. Returns '' if it is none of these.
function promptPayPayload(id, amount){
  var d = String(id || '').replace(/\D/g, ''), acct;
  if (d.length === 10 && d.charAt(0) === '0') acct = ppTlv('01', '0066' + d.slice(1));
  else if (d.length === 13) acct = ppTlv('02', d);
  else if (d.length === 15) acct = ppTlv('03', d);
  else return '';
  var amt = Number(amount);
  var p = ppTlv('00', '01') + ppTlv('01', amt > 0 ? '12' : '11') + ppTlv('29', ppTlv('00', 'A000000677010111') + acct) + ppTlv('58', 'TH') + ppTlv('53', '764') +
          (amt > 0 ? ppTlv('54', amt.toFixed(2)) : '') + '6304';   // same field order as the widely used promptpay-qr generator
  return p + ppCrc16(p);
}
var ppQrCanvas = null, ppQrAmount = '';
function loadQrLib(){
  return new Promise(function(res){
    if (typeof qrcode === 'function') return res(true);
    var s = document.createElement('script'); s.src = 'qrcode.js';
    s.onload = function(){ res(typeof qrcode === 'function'); }; s.onerror = function(){ res(false); };
    document.head.appendChild(s);
  });
}
// Draws the QR into the box on the payment screen as a picture (so it can also be long-pressed and saved on a phone).
function drawPayQr(){
  var box = document.getElementById('pp-qr');
  if (!box || !shopPayOrder) return;
  var payload = promptPayPayload(shopPayOrder.promptpay_id, shopPayOrder.amount_thb);
  if (!payload) { box.parentNode.style.display = 'none'; return; }
  loadQrLib().then(function(ok){
    if (!ok) { box.parentNode.style.display = 'none'; return; }
    try {
      var qr = qrcode(0, 'M'); qr.addData(payload); qr.make();
      var n = qr.getModuleCount(), scale = 8, quiet = 4, size = (n + quiet * 2) * scale;
      var c = document.createElement('canvas'); c.width = c.height = size;
      var g = c.getContext('2d'); g.fillStyle = '#fff'; g.fillRect(0, 0, size, size); g.fillStyle = '#000';
      for (var r = 0; r < n; r++) for (var k = 0; k < n; k++) if (qr.isDark(r, k)) g.fillRect((k + quiet) * scale, (r + quiet) * scale, scale, scale);
      ppQrCanvas = c; ppQrAmount = String(shopPayOrder.amount_thb);
      var im = document.createElement('img'); im.src = c.toDataURL('image/png'); im.alt = 'PromptPay QR'; im.className = 'qr-img';
      box.innerHTML = ''; box.appendChild(im);
    } catch (e) { box.parentNode.style.display = 'none'; }
  });
}
function saveQr(){
  if (!ppQrCanvas) return;
  var a = document.createElement('a'); a.href = ppQrCanvas.toDataURL('image/png'); a.download = 'promptpay-' + ppQrAmount + '-baht.png';
  document.body.appendChild(a); a.click(); a.remove();
}
function payScreenHtml(){
  var o = shopPayOrder, hasQr = !!promptPayPayload(o.promptpay_id, o.amount_thb);
  var h = '<p style="margin:6px 0 10px"><a href="javascript:void(0)" class="backlink" onclick="closeShop()">← '+T('กลับไปหน้าแดชบอร์ด','Back to my dashboard')+'</a></p>'+
    '<div class="hello"><h1>'+T('ชำระเงินด้วยพร้อมเพย์','Pay by PromptPay')+'</h1><p>'+T('คำสั่งซื้อของคุณถูกบันทึกแล้ว','Your order is saved.')+'</p></div>'+
    '<div class="card paybox">'+
      (hasQr ? '<div class="qr-wrap"><div id="pp-qr" class="qr-box"></div>'+
        '<p class="qr-cap">'+T('สแกนด้วยแอปธนาคาร ยอดเงินถูกกรอกไว้ให้แล้ว','Scan with your banking app. The amount is already filled in.')+'</p>'+
        '<button type="button" class="copy" onclick="saveQr()">'+T('บันทึกรูป QR','Save QR image')+'</button>'+
        '<p class="pay-hint" style="margin-top:8px">'+T('ใช้มือถือเครื่องเดียวกันอยู่? กดบันทึกรูป QR (หรือกดค้างที่รูป) แล้วเปิดแอปธนาคาร เลือกสแกน แล้วเลือกรูปจากคลังภาพ','Paying from this same phone? Save the QR image (or press and hold it), open your banking app, choose Scan, then pick the picture from your photos.')+'</p></div>' : '')+
      '<div class="pay-line"><span class="pay-lbl">'+T('จำนวนเงิน','Amount')+'</span><span class="pay-val">'+baht(o.amount_thb)+'</span></div>'+
      '<div class="pay-line"><span class="pay-lbl">'+(hasQr ? T('หรือโอนไปที่หมายเลขพร้อมเพย์','Or transfer to this PromptPay number') : T('หมายเลขพร้อมเพย์','PromptPay number'))+'</span><span class="pay-val">'+esc(o.promptpay_id || '—')+'</span>'+(o.promptpay_id ? copyBtn(o.promptpay_id, T('คัดลอก','Copy')) : '')+'</div>'+
    '</div>'+
    '<div class="card"><ol class="pay-steps">'+
      (hasQr ? '<li>'+T('เปิดแอปธนาคารของคุณ เลือกสแกน แล้วสแกน QR ด้านบน หรือเลือก โอนเงิน › พร้อมเพย์ แล้วใส่หมายเลขด้านบนเป็นผู้รับ','Open your banking app and scan the QR code above. Or choose Transfer, then PromptPay, and enter the number above as the recipient.')+'</li>'
             : '<li>'+T('เปิดแอปธนาคารของคุณ เลือก โอนเงิน แล้วเลือก พร้อมเพย์ ใส่หมายเลขด้านบนเป็นผู้รับ','Open your banking app, choose Transfer, then PromptPay, and enter the number above as the recipient.')+'</li>')+
      '<li>'+T('โอนยอดเต็มตามจำนวนด้านบน (ค่าธรรมเนียมธนาคาร ถ้ามี ผู้โอนเป็นผู้จ่าย)','Send the full amount shown above. Any bank fee is paid by you as the sender.')+'</li>'+
      '<li>'+T('แคปหน้าสลิปการโอน แล้วอัปโหลดด้านล่าง สินค้าจะเปิดให้ใช้ทันที และเจ้าหน้าที่จะตรวจสอบยอดเงิน ('+checkTime()+')','Take a screenshot of the transfer slip and upload it below. Your items open straight away and a person checks the money ('+checkTime()+').')+'</li>'+
    '</ol></div>'+
    '<div class="card"><div class="card-title">'+T('อัปโหลดสลิป','Upload your slip')+'</div>'+uploadBox(o.id)+
      '<p class="pay-hint"><a href="javascript:void(0)" onclick="claimPaid('+o.id+')">'+T('ฉันโอนแล้ว แต่อัปโหลดสลิปไม่ได้','I have paid, but I cannot upload a slip')+'</a>'+
      (o.receipt_uploaded ? '' : ' &nbsp;·&nbsp; <a href="javascript:void(0)" onclick="cancelOrder('+o.id+')">'+T('ยกเลิกคำสั่งซื้อนี้','Cancel this order')+'</a>')+'</p></div>';
  return h;
}
function showRcErr(id, msg){ var e = document.getElementById('rc-err-'+id); if (e) { e.textContent = msg; e.style.display = 'block'; } }
function sha256File(f){
  if (!(window.crypto && crypto.subtle && f.arrayBuffer)) return Promise.resolve('');
  return f.arrayBuffer().then(function(b){ return crypto.subtle.digest('SHA-256', b); }).then(function(d){
    return Array.prototype.map.call(new Uint8Array(d), function(x){ return ('0'+x.toString(16)).slice(-2); }).join('');
  }).catch(function(){ return ''; });
}
// The mini-QR printed on a Thai bank slip holds the bank's unique transaction reference. It is read here, in the
// browser (jsQR.js sits next to this page), and re-checked by the database: a duplicate check, not proof of payment.
function loadJsQR(){
  return new Promise(function(res){
    if (typeof jsQR === 'function') return res(true);
    var s = document.createElement('script'); s.src = 'jsQR.js';
    s.onload = function(){ res(typeof jsQR === 'function'); }; s.onerror = function(){ res(false); };
    document.head.appendChild(s);
  });
}
function readSlipQr(file){
  return loadJsQR().then(function(has){
    if (!has || !file || !/^image\//.test(file.type)) return '';
    return new Promise(function(resolve){
      var url = URL.createObjectURL(file), img = new Image();
      img.onerror = function(){ URL.revokeObjectURL(url); resolve(''); };
      img.onload = function(){
        URL.revokeObjectURL(url);
        var found = '', widths = [Math.min(img.naturalWidth, 2000), 1200, 800, 500];
        for (var i = 0; i < widths.length && !found; i++) {
          var w = Math.min(widths[i], img.naturalWidth), h = Math.round(img.naturalHeight * w / img.naturalWidth);
          try {
            var c = document.createElement('canvas'); c.width = w; c.height = h;
            var ctx = c.getContext('2d'); ctx.drawImage(img, 0, 0, w, h);
            var q = jsQR(ctx.getImageData(0, 0, w, h).data, w, h, {inversionAttempts: 'attemptBoth'});
            if (q && q.data) found = q.data;
          } catch(e){}
        }
        resolve(found);
      };
      img.src = url;
    });
  });
}
function doReceipt(id){
  var fi = document.getElementById('rc-file-'+id), btn = document.getElementById('rc-btn-'+id), er = document.getElementById('rc-err-'+id);
  if (er) { er.textContent = ''; er.style.display = 'none'; }
  var f = fi && fi.files && fi.files[0];
  if (!f) { showRcErr(id, T('กรุณาเลือกไฟล์สลิปก่อน','Please choose your slip file first.')); return; }
  if (f.size > 5 * 1024 * 1024) { showRcErr(id, T('ไฟล์ใหญ่เกิน 5 MB กรุณาเลือกรูปที่เล็กลงหรือไฟล์ PDF','That file is over 5 MB. Please choose a smaller photo or a PDF.')); return; }
  if (!(/^image\/(jpeg|png|webp)$/.test(f.type) || f.type === 'application/pdf')) { showRcErr(id, T('กรุณาอัปโหลดรูปภาพ (JPG, PNG หรือ WebP) หรือไฟล์ PDF','Please upload a photo or screenshot (JPG, PNG or WebP) or a PDF.')); return; }
  if (btn) { btn.disabled = true; btn.textContent = T('กำลังอัปโหลด...','Uploading...'); }
  sb.auth.refreshSession().then(function(rs){
    if (rs.error || !rs.data || !rs.data.session) throw new Error('sign-in expired');
    accessToken = rs.data.session.access_token; user = rs.data.session.user;
    return Promise.all([sha256File(f), readSlipQr(f)]);
  }).then(function(r){
    var ext = f.type === 'application/pdf' ? 'pdf' : (f.type === 'image/png' ? 'png' : (f.type === 'image/webp' ? 'webp' : 'jpg'));
    var path = user.id+'/'+id+'/'+Date.now()+'-'+Math.random().toString(16).slice(2, 10)+'.'+ext;
    return sb.storage.from('shop-receipts').upload(path, f, {contentType: f.type, upsert: false}).then(function(u){
      if (u.error) {
        try { console.error('shop upload failed', u.error); } catch(e){}
        throw new Error(T('อัปโหลดไฟล์ไม่สำเร็จ ลองใหม่อีกครั้ง','Could not upload the file. Please try again.') + ' (' + String(u.error.message || u.error.error || u.error.statusCode || 'unknown') + '; ' + f.type + ', ' + Math.round(f.size / 1024) + ' KB)');
      }
      return sb.rpc('shop_attach_receipt', {p_id: id, p_path: path, p_hash: r[0] || null, p_qr: r[1] || null});
    });
  }).then(function(res){
    if (res.error) throw new Error(res.error.message);
    shopDone = {provisional: !!(res.data && res.data.provisional), reason: res.data && res.data.reason};
    shopScreen = 'done'; show('shop-view'); renderShopView(); window.scrollTo(0, 0);
  }).catch(function(e){
    if (btn) { btn.disabled = false; btn.textContent = T('อัปโหลดสลิปของฉัน','Upload my receipt'); }
    showRcErr(id, errText(e));
  });
}
function doneHtml(){
  var open = shopDone && shopDone.provisional;
  return '<div class="hello" style="margin-top:30px"><h1>'+T('ขอบคุณค่ะ/ครับ','Thank you!')+'</h1></div>'+
    '<div class="card"><p>'+(open
      ? T('เราได้รับสลิปของคุณแล้ว และสินค้าเปิดให้ใช้งานได้ทันที เจ้าหน้าที่จะตรวจสอบยอดเงินทุกรายการ ('+checkTime()+') และหน้าแดชบอร์ดจะอัปเดตเมื่อยืนยันแล้ว',
          'We have your receipt and your items are open now. A person checks every payment ('+checkTime()+'), and your dashboard updates once it is confirmed.')
      : (shopDone && shopDone.reason === 'buyer_limit'
          ? T('เราได้รับสลิปของคุณแล้ว การชำระเงินก่อนหน้านี้ของคุณยังอยู่ระหว่างตรวจสอบ คำสั่งซื้อนี้จะเปิดให้ใช้งานเมื่อเจ้าหน้าที่ยืนยันยอดเงินแล้ว ('+checkTime()+')',
              'We have your receipt. Your earlier payment is still being checked, so this order opens once our team has confirmed the payments ('+checkTime()+').')
          : T('เราได้รับสลิปของคุณแล้วและกำลังตรวจสอบ สินค้าจะเปิดให้ใช้งานเมื่อยืนยันยอดเงินเรียบร้อย ('+checkTime()+')',
              'We have your receipt and are checking it. Your items open once the payment is confirmed ('+checkTime()+').')))+'</p>'+
    '<button class="btn" onclick="closeShop()">'+T('กลับไปหน้าแดชบอร์ด','Back to my dashboard')+'</button></div>';
}
function claimPaid(id){
  if (!confirm(T('ยืนยันว่าคุณโอนเงินแล้ว? เจ้าหน้าที่จะตรวจสอบกับบัญชีธนาคาร สินค้าจะเปิดเมื่อยืนยันแล้ว','Confirm you have paid? A person will check it against our bank, and your items open once it is confirmed.'))) return;
  sb.rpc('shop_claim_paid', {p_id: id}).then(function(r){
    if (r.error) throw new Error(r.error.message);
    closeShop();
  }).catch(function(e){ if (document.getElementById('rc-err-'+id)) showRcErr(id, errText(e)); else alert(errText(e)); });
}
function cancelOrder(id){
  if (!confirm(T('ยกเลิกคำสั่งซื้อนี้?','Cancel this order?'))) return;
  sb.rpc('shop_cancel_order', {p_id: id}).then(function(r){
    if (r.error) throw new Error(r.error.message);
    closeShop();
  }).catch(function(e){ if (document.getElementById('rc-err-'+id)) showRcErr(id, errText(e)); else alert(errText(e)); });
}

// ─── WHAT'S NEW (set to null = hidden) ──────────────────
var WHATS_NEW = null;
</script>
</body>
</html>