<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>APAC Swag Inventory — Cloudflare</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --orange:       #F6821F;
      --orange-dark:  #D9691A;
      --orange-light: #FBAD41;
      --orange-pale:  #FFF3E8;
      --bg:           #F7F7F7;
      --card:         #FFFFFF;
      --text:         #1D1D1D;
      --text-muted:   #6B7280;
      --border:       #E5E7EB;
      --green:        #22C55E;
      --amber:        #F59E0B;
      --red:          #EF4444;
      --radius:       12px;
      --shadow:       0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-hover: 0 6px 20px rgba(0,0,0,0.10);
    }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* ═══════════════════════════════════════ NAV ══ */
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: #fff;
      border-bottom: 1px solid var(--border);
      box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    }
    .nav-inner {
      max-width: 1280px; margin: 0 auto;
      display: flex; align-items: center; gap: 28px;
      padding: 0 24px; height: 68px;
    }
    /* Horizontal CF logo + "APAC Swag Shop" pill */
    .nav-logo {
      display: flex; align-items: center; gap: 14px;
      text-decoration: none; flex-shrink: 0;
    }
    .nav-logo img {
      height: 36px; width: auto;
      object-fit: contain;
    }
    .nav-divider {
      width: 1px; height: 24px;
      background: var(--border);
    }
    .nav-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--orange-pale);
      border: 1px solid rgba(246,130,31,0.25);
      color: var(--orange-dark);
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 12px; font-weight: 700;
      letter-spacing: 0.04em; text-transform: uppercase;
      white-space: nowrap;
    }
    .nav-tag::before {
      content: ''; width: 6px; height: 6px;
      border-radius: 50%; background: var(--orange);
    }
    .nav-links {
      display: flex; gap: 2px; flex: 1;
    }
    .nav-link {
      padding: 6px 13px; border-radius: 7px;
      font-size: 14px; font-weight: 500; color: var(--text-muted);
      text-decoration: none; transition: all 0.15s;
    }
    .nav-link:hover, .nav-link.active {
      color: var(--text); background: var(--bg);
    }
    .nav-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }

    /* ═══════════════════════════════════════ BUTTONS ══ */
    .btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 18px; border-radius: 6px;
      font-size: 14px; font-weight: 600;
      cursor: pointer; transition: all 0.15s;
      border: none; text-decoration: none;
      font-family: inherit; white-space: nowrap;
    }
    .btn-primary { background: var(--orange); color: #fff; }
    .btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(246,130,31,0.35); }
    .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
    .btn-ghost:hover { border-color: #bbb; color: var(--text); }
    .btn-sm { padding: 7px 13px; font-size: 13px; }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

    /* ═══════════════════════════════════════ HERO ══ */
    /* Light warm gradient — no black! */
    .hero {
      background:
        radial-gradient(ellipse 75% 90% at 70% 40%, rgba(251,173,65,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 20% 80%, rgba(246,130,31,0.10) 0%, transparent 60%),
        linear-gradient(160deg, #FFFBF7 0%, #FFF6EE 40%, #FAFAFA 100%);
      padding: 72px 24px 64px;
      border-bottom: 1px solid rgba(246,130,31,0.15);
      position: relative; overflow: hidden;
    }
    /* Decorative orange arc */
    .hero::after {
      content: '';
      position: absolute; right: -120px; top: -120px;
      width: 520px; height: 520px;
      border-radius: 50%;
      border: 60px solid rgba(246,130,31,0.07);
      pointer-events: none;
    }
    .hero-inner {
      max-width: 1280px; margin: 0 auto; position: relative; z-index: 1;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      margin-bottom: 20px;
      font-size: 13px; font-weight: 700;
      color: var(--orange-dark);
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .hero-eyebrow svg { width: 16px; height: 16px; }
    .hero h1 {
      font-size: clamp(2rem, 4.5vw, 3rem);
      font-weight: 800; color: var(--text);
      line-height: 1.15; letter-spacing: -0.025em;
      max-width: 600px;
    }
    .hero h1 span { color: var(--orange); }
    .hero p {
      margin-top: 16px;
      font-size: 17px; color: var(--text-muted);
      max-width: 500px; line-height: 1.65;
    }

    /* Stat chips row */
    .hero-stats {
      display: flex; gap: 12px; flex-wrap: wrap;
      margin-top: 40px;
    }
    .stat-chip {
      display: flex; align-items: center; gap: 10px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 20px;
      box-shadow: var(--shadow);
    }
    .stat-chip-icon {
      width: 36px; height: 36px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .stat-chip-icon.orange { background: var(--orange-pale); color: var(--orange); }
    .stat-chip-icon.green  { background: #DCFCE7; color: #15803D; }
    .stat-chip-icon.amber  { background: #FEF3C7; color: #92400E; }
    .stat-chip-icon.red    { background: #FEE2E2; color: #991B1B; }
    .stat-chip-val  { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
    .stat-chip-label { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

    /* ═══════════════════════════════════════ FILTER BAR ══ */
    .filter-bar {
      background: #fff;
      border-bottom: 1px solid var(--border);
      padding: 14px 24px;
      position: sticky; top: 68px; z-index: 90;
    }
    .filter-inner {
      max-width: 1280px; margin: 0 auto;
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    }
    .search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
    .search-icon {
      position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
      color: var(--text-muted); pointer-events: none;
      display: flex; align-items: center;
    }
    .search-input {
      width: 100%; padding: 9px 12px 9px 36px;
      border: 1px solid var(--border); border-radius: 8px;
      font-size: 14px; font-family: inherit; color: var(--text);
      background: var(--bg); outline: none; transition: all 0.15s;
    }
    .search-input:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px rgba(246,130,31,0.1); }

    .cat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
    .chip {
      padding: 6px 14px; border-radius: 20px; font-size: 13px;
      font-weight: 500; cursor: pointer;
      border: 1px solid var(--border);
      background: #fff; color: var(--text-muted);
      transition: all 0.15s; white-space: nowrap;
    }
    .chip:hover { border-color: var(--orange); color: var(--orange-dark); }
    .chip.active { background: var(--orange); border-color: var(--orange); color: #fff; }

    .status-filter { display: flex; gap: 6px; margin-left: auto; }
    .status-chip {
      padding: 6px 12px; border-radius: 20px; font-size: 12px;
      font-weight: 600; cursor: pointer; border: 1px solid transparent;
      transition: all 0.15s; white-space: nowrap;
    }
    .status-chip.all   { background: #F3F4F6; color: var(--text-muted); }
    .status-chip.green { background: #DCFCE7; color: #15803D; }
    .status-chip.amber { background: #FEF3C7; color: #92400E; }
    .status-chip.red   { background: #FEE2E2; color: #991B1B; }
    .status-chip.active.all   { background: var(--text); color: #fff; }
    .status-chip.active.green { background: var(--green); color: #fff; }
    .status-chip.active.amber { background: var(--amber); color: #fff; }
    .status-chip.active.red   { background: var(--red); color: #fff; }

    /* ═══════════════════════════════════════ GRID ══ */
    .main { max-width: 1280px; margin: 0 auto; padding: 32px 24px 80px; }
    .grid-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 24px;
    }
    .grid-count { font-size: 14px; color: var(--text-muted); font-weight: 500; }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
      gap: 20px;
    }
    .empty-state {
      grid-column: 1/-1; text-align: center; padding: 80px 24px; color: var(--text-muted);
    }
    .empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--text); }

    /* ═══════════════════════════════════════ CARD ══ */
    .card {
      background: var(--card); border-radius: var(--radius);
      box-shadow: var(--shadow); border: 1px solid var(--border);
      overflow: hidden; display: flex; flex-direction: column;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

    .card-img {
      height: 180px;
      background: linear-gradient(135deg, #FFF6EE 0%, #FFE8CC 100%);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .card-img-inner {
      width: 88px; height: 88px; border-radius: 50%;
      background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 24px rgba(246,130,31,0.30);
    }
    .card-img-inner svg { width: 42px; height: 42px; color: #fff; }
    .card-img img { width: 100%; height: 100%; object-fit: cover; }

    .stock-bar-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(0,0,0,0.06); }
    .stock-bar { height: 100%; border-radius: 0 2px 2px 0; transition: width 0.5s ease; }
    .stock-bar.green { background: var(--green); }
    .stock-bar.amber { background: var(--amber); }
    .stock-bar.red   { background: var(--red); width: 0 !important; }

    .card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .card-top  { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .card-title { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); }
    .card-sku   { font-size: 11px; color: var(--text-muted); font-family: monospace; margin-top: 2px; }

    .badge {
      display: inline-flex; align-items: center;
      padding: 3px 8px; border-radius: 4px;
      font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
    }
    .badge-cat   { background: #EEF2FF; color: #4338CA; }
    .badge-green { background: #DCFCE7; color: #15803D; }
    .badge-amber { background: #FEF3C7; color: #92400E; }
    .badge-red   { background: #FEE2E2; color: #991B1B; }

    .card-stock {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 13px; margin-top: auto; padding-top: 8px;
    }
    .card-qty { font-weight: 600; }
    .card-footer { padding: 14px 18px 18px; border-top: 1px solid var(--border); }

    /* ═══════════════════════════════════════ MODAL ══ */
    .modal-backdrop {
      display: none; position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
      align-items: center; justify-content: center; padding: 16px;
    }
    .modal-backdrop.open { display: flex; }
    .modal {
      background: #fff; border-radius: 16px; width: 100%; max-width: 520px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.18); max-height: 90vh; overflow-y: auto;
    }
    .modal-header { padding: 24px 24px 0; display: flex; align-items: flex-start; justify-content: space-between; }
    .modal-title  { font-size: 20px; font-weight: 800; }
    .modal-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
    .modal-close  {
      width: 32px; height: 32px; border-radius: 8px; border: none;
      background: var(--bg); cursor: pointer; font-size: 18px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .modal-close:hover { background: var(--border); }
    .modal-body   { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
    .form-group   { display: flex; flex-direction: column; gap: 6px; }
    .form-label   { font-size: 13px; font-weight: 600; }
    .form-input, .form-select, .form-textarea {
      padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
      font-size: 14px; font-family: inherit; color: var(--text);
      background: var(--bg); outline: none; transition: all 0.15s;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--orange); background: #fff;
      box-shadow: 0 0 0 3px rgba(246,130,31,0.10);
    }
    .form-textarea { resize: vertical; min-height: 80px; }
    .form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-error { font-size: 12px; color: var(--red); }
    .modal-footer { padding: 0 24px 24px; display: flex; gap: 10px; justify-content: flex-end; }

    /* ═══════════════════════════════════════ TOAST ══ */
    .toast {
      position: fixed; bottom: 24px; right: 24px; z-index: 300;
      background: #1D1D1D; color: #fff; border-radius: 10px;
      padding: 14px 20px; font-size: 14px; font-weight: 500;
      display: flex; align-items: center; gap: 10px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.20);
      transform: translateY(80px); opacity: 0;
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none;
    }
    .toast.show { transform: translateY(0); opacity: 1; }

    /* ═══════════════════════════════════════ LOADER ══ */
    .loader-wrap { grid-column: 1/-1; display: flex; justify-content: center; padding: 60px; }
    .spinner {
      width: 36px; height: 36px; border: 3px solid var(--border);
      border-top-color: var(--orange); border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ═══════════════════════════════════════ FOOTER ══ */
    footer {
      background: #fff;
      border-top: 1px solid var(--border);
      padding: 48px 24px 36px;
      text-align: center;
    }
    .footer-logo {
      display: block; margin: 0 auto 16px;
      height: 72px; width: auto;
      object-fit: contain;
    }
    .footer-tagline {
      font-size: 13px; color: var(--text-muted);
      margin-bottom: 6px;
    }
    .footer-sub {
      font-size: 12px; color: #B0B7C3;
    }
    .footer-sub a { color: var(--orange); text-decoration: none; }
    .footer-sub a:hover { text-decoration: underline; }
    .footer-divider {
      width: 48px; height: 3px; border-radius: 2px;
      background: linear-gradient(90deg, var(--orange), var(--orange-light));
      margin: 16px auto;
    }

    /* ═══════════════════════════════════════ RESPONSIVE ══ */
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hero { padding: 48px 20px 40px; }
      .hero-stats { gap: 10px; }
      .stat-chip { padding: 10px 14px; }
      .filter-bar { padding: 12px 16px; top: 68px; }
      .status-filter { display: none; }
      .main { padding: 20px 16px 48px; }
    }
    @media (max-width: 480px) {
      .form-row { grid-template-columns: 1fr; }
      .hero-stats { flex-direction: column; }
    }
  </style>
</head>
<body>

<!-- ══════════════════════════════════════════ NAV ══ -->
<nav class="nav" role="navigation">
  <div class="nav-inner">

    <!-- TOP LEFT: horizontal CF logo + shop tag -->
    <a class="nav-logo" href="/" aria-label="Cloudflare APAC Swag Shop">
      <img src="cf-logo-horizontal.png" alt="Cloudflare" />
      <div class="nav-divider"></div>
      <span class="nav-tag">APAC Swag Shop</span>
    </a>

    <div class="nav-links">
      <a class="nav-link active" href="/">Catalog</a>
      <a class="nav-link" href="#categories">Categories</a>
    </div>

    <div class="nav-actions">
      <a class="btn btn-ghost btn-sm" href="/admin.html">
        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
          <rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
        </svg>
        Admin
      </a>
    </div>

  </div>
</nav>

<!-- ══════════════════════════════════════════ HERO ══ -->
<section class="hero">
  <div class="hero-inner">

    <div class="hero-eyebrow">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"/>
      </svg>
      APAC Region · Swag Inventory
    </div>

    <h1>Browse &amp; Request<br><span>Cloudflare Swag</span></h1>
    <p>Find branded merchandise for events, conferences &amp; team milestones. Check availability and submit a request in seconds.</p>

    <!-- Live stats as white chips -->
    <div class="hero-stats">
      <div class="stat-chip">
        <div class="stat-chip-icon orange">
          <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0l-3-3m3 3l3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
        </div>
        <div><div class="stat-chip-val" id="stat-total">—</div><div class="stat-chip-label">Total Items</div></div>
      </div>
      <div class="stat-chip">
        <div class="stat-chip-icon green">
          <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <div><div class="stat-chip-val" id="stat-instock">—</div><div class="stat-chip-label">In Stock</div></div>
      </div>
      <div class="stat-chip">
        <div class="stat-chip-icon amber">
          <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
        </div>
        <div><div class="stat-chip-val" id="stat-low">—</div><div class="stat-chip-label">Low Stock</div></div>
      </div>
      <div class="stat-chip">
        <div class="stat-chip-icon red">
          <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
        </div>
        <div><div class="stat-chip-val" id="stat-out">—</div><div class="stat-chip-label">Out of Stock</div></div>
      </div>
    </div>

  </div>
</section>

<!-- ══════════════════════════════════════════ FILTER BAR ══ -->
<div class="filter-bar" id="categories">
  <div class="filter-inner">
    <div class="search-wrap">
      <span class="search-icon">
        <svg width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
        </svg>
      </span>
      <input class="search-input" id="searchInput" type="search" placeholder="Search by name, SKU…" autocomplete="off" />
    </div>
    <div class="cat-chips" id="catChips">
      <div class="chip active" data-cat="">All Items</div>
    </div>
    <div class="status-filter">
      <span class="status-chip all active"  data-status="">All</span>
      <span class="status-chip green" data-status="in_stock">In Stock</span>
      <span class="status-chip amber" data-status="low_stock">Low Stock</span>
      <span class="status-chip red"   data-status="out_of_stock">Out of Stock</span>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════ PRODUCT GRID ══ -->
<main class="main">
  <div class="grid-header">
    <span class="grid-count" id="gridCount">Loading products…</span>
  </div>
  <div class="grid" id="productGrid">
    <div class="loader-wrap"><div class="spinner"></div></div>
  </div>
</main>

<!-- ══════════════════════════════════════════ REQUEST MODAL ══ -->
<div class="modal-backdrop" id="requestModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div class="modal">
    <div class="modal-header">
      <div>
        <h2 class="modal-title" id="modalTitle">Request Swag Item</h2>
        <p class="modal-subtitle" id="modalSubtitle"></p>
      </div>
      <button class="modal-close" onclick="closeModal()" aria-label="Close">✕</button>
    </div>
    <form class="modal-body" id="requestForm" novalidate>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label" for="fname">Your Name <span style="color:var(--red)">*</span></label>
          <input class="form-input" id="fname" type="text" placeholder="Jane Smith" required />
          <span class="form-error" id="err-fname"></span>
        </div>
        <div class="form-group">
          <label class="form-label" for="femail">Email <span style="color:var(--red)">*</span></label>
          <input class="form-input" id="femail" type="email" placeholder="jane@cloudflare.com" required />
          <span class="form-error" id="err-femail"></span>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label" for="fteam">Team / Department <span style="color:var(--red)">*</span></label>
          <input class="form-input" id="fteam" type="text" placeholder="Marketing" required />
          <span class="form-error" id="err-fteam"></span>
        </div>
        <div class="form-group">
          <label class="form-label" for="fqty">Quantity <span style="color:var(--red)">*</span></label>
          <input class="form-input" id="fqty" type="number" min="1" value="1" required />
          <span class="form-error" id="err-fqty"></span>
        </div>
      </div>
      <div class="form-group">
        <label class="form-label" for="fevent">Event / Occasion</label>
        <input class="form-input" id="fevent" type="text" placeholder="e.g. Cloudflare Summit Singapore 2025" />
      </div>
      <div class="form-group">
        <label class="form-label" for="fnotes">Additional Notes</label>
        <textarea class="form-textarea" id="fnotes" placeholder="Any special requirements…"></textarea>
      </div>
      <input type="hidden" id="fproductId" />
      <input type="hidden" id="fproductName" />
    </form>
    <div class="modal-footer">
      <button class="btn btn-ghost" onclick="closeModal()">Cancel</button>
      <button class="btn btn-primary" id="submitBtn" onclick="submitRequest()">Submit Request</button>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════ TOAST ══ -->
<div class="toast" id="toast"><span id="toastMsg"></span></div>

<!-- ══════════════════════════════════════════ FOOTER ══ -->
<footer>
  <!-- MIDDLE BOTTOM: stacked CF logo -->
  <img class="footer-logo" src="cf-logo-stacked.jpg" alt="Cloudflare" />
  <div class="footer-divider"></div>
  <p class="footer-tagline">APAC Swag Inventory — Powered by Cloudflare Pages &amp; D1</p>
  <p class="footer-sub">
    <a href="https://pages.cloudflare.com" target="_blank" rel="noopener">Cloudflare Pages</a>
    &nbsp;·&nbsp;
    <a href="https://developers.cloudflare.com/d1/" target="_blank" rel="noopener">D1 Database</a>
    &nbsp;·&nbsp;
    <a href="/admin.html">Admin Panel</a>
  </p>
</footer>

<!-- ══════════════════════════════════════════ SCRIPT ══ -->
<script>
  let products = [], categories = [];
  let activeCategory = '', activeStatus = '', searchQuery = '';
  let debounceTimer = null;

  async function init() {
    await Promise.all([loadCategories(), loadProducts()]);
  }

  async function safeJson(res) {
    const ct = res.headers.get('content-type') || '';
    if (!ct.includes('application/json')) {
      const text = await res.text();
      throw new Error(
        res.ok
          ? 'API returned HTML instead of JSON — make sure Pages Functions are running.\n\nRun from your project root:\n  npx wrangler pages dev public --d1=DB=<your-db-id>'
          : `HTTP ${res.status}: ${text.slice(0, 120)}`
      );
    }
    return res.json();
  }

  async function loadCategories() {
    try {
      const res  = await fetch('/api/categories');
      const data = await safeJson(res);
      categories = data.categories || [];
      renderCategoryChips();
    } catch (e) { console.error('Categories error:', e.message); }
  }

  async function loadProducts() {
    const params = new URLSearchParams();
    if (searchQuery)    params.set('search',   searchQuery);
    if (activeCategory) params.set('category', activeCategory);
    if (activeStatus)   params.set('status',   activeStatus);
    try {
      const res  = await fetch('/api/products?' + params.toString());
      const data = await safeJson(res);
      products = data.products || [];
      updateStats(data.stats);
      renderGrid();
    } catch (e) {
      document.getElementById('productGrid').innerHTML = `
        <div class="empty-state">
          <svg width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="#F59E0B" stroke-width="1.5" style="margin:0 auto 16px;display:block">
            <path stroke-linecap="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
          </svg>
          <h3>API not reachable</h3>
          <p style="max-width:420px;margin:8px auto 0;font-size:13px;line-height:1.6">
            Pages Functions are not running. Start the dev server from your project root:<br/>
            <code style="background:#F3F4F6;padding:6px 10px;border-radius:6px;display:inline-block;margin-top:8px;font-size:12px">
              npx wrangler pages dev public --d1=DB=&lt;your-db-id&gt;
            </code>
          </p>
        </div>`;
      console.error('loadProducts:', e.message);
    }
  }

  function renderCategoryChips() {
    const container = document.getElementById('catChips');
    container.innerHTML = `<div class="chip ${activeCategory===''?'active':''}" data-cat="">All Items</div>`;
    categories.forEach(c => {
      const el = document.createElement('div');
      el.className = `chip ${activeCategory===c.slug?'active':''}`;
      el.dataset.cat = c.slug;
      el.textContent = `${c.name} (${c.product_count})`;
      container.appendChild(el);
    });
    container.addEventListener('click', e => {
      const chip = e.target.closest('[data-cat]');
      if (!chip) return;
      activeCategory = chip.dataset.cat;
      document.querySelectorAll('.cat-chips .chip').forEach(c => c.classList.remove('active'));
      chip.classList.add('active');
      loadProducts();
    });
  }

  function updateStats(stats) {
    if (!stats) return;
    document.getElementById('stat-total').textContent   = stats.total ?? '—';
    document.getElementById('stat-instock').textContent = stats.in_stock ?? '—';
    document.getElementById('stat-low').textContent     = stats.low_stock ?? '—';
    document.getElementById('stat-out').textContent     = stats.out_of_stock ?? '—';
  }

  function stockClass(p) {
    if (p.quantity === 0)                    return 'red';
    if (p.quantity <= p.low_stock_threshold) return 'amber';
    return 'green';
  }

  function stockLabel(p) {
    if (p.quantity === 0)                    return '<span class="badge badge-red">Out of Stock</span>';
    if (p.quantity <= p.low_stock_threshold) return '<span class="badge badge-amber">Low Stock</span>';
    return '<span class="badge badge-green">In Stock</span>';
  }

  function stockBarWidth(p) {
    if (p.quantity === 0) return 0;
    const max = Math.max(p.quantity, p.low_stock_threshold * 3);
    return Math.min(100, Math.round((p.quantity / max) * 100));
  }

  function renderGrid() {
    const grid  = document.getElementById('productGrid');
    const count = document.getElementById('gridCount');
    count.textContent = `${products.length} item${products.length !== 1 ? 's' : ''}`;

    if (!products.length) {
      grid.innerHTML = `<div class="empty-state">
        <svg width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="#CBD5E1" stroke-width="1.5" style="margin:0 auto 16px;display:block">
          <path stroke-linecap="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
        </svg>
        <h3>No items found</h3>
        <p>Try adjusting your search or filter.</p>
      </div>`;
      return;
    }

    grid.innerHTML = products.map(p => {
      const sc = stockClass(p);
      const imgContent = p.image_url
        ? `<img src="${escHtml(p.image_url)}" alt="${escHtml(p.name)}" loading="lazy" />`
        : `<div class="card-img-inner">
             <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
               <path stroke-linecap="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
             </svg>
           </div>`;
      return `<article class="card">
        <div class="card-img">
          ${imgContent}
          <div class="stock-bar-wrap">
            <div class="stock-bar ${sc}" style="width:${stockBarWidth(p)}%"></div>
          </div>
        </div>
        <div class="card-body">
          <div class="card-top">
            <div>
              <div class="card-title">${escHtml(p.name)}</div>
              <div class="card-sku">SKU: ${escHtml(p.sku || 'N/A')}</div>
            </div>
            ${p.category_name ? `<span class="badge badge-cat">${escHtml(p.category_name)}</span>` : ''}
          </div>
          ${p.description ? `<p style="font-size:13px;color:var(--text-muted);line-height:1.5">${escHtml(p.description)}</p>` : ''}
          <div class="card-stock">
            <span class="card-qty" style="color:var(--${sc==='red'?'red':sc==='amber'?'amber':'green'})">
              ${p.quantity === 0 ? 'No stock' : p.quantity + ' remaining'}
            </span>
            ${stockLabel(p)}
          </div>
        </div>
        <div class="card-footer">
          <button class="btn btn-primary" style="width:100%"
            ${p.quantity === 0 ? 'disabled' : ''}
            onclick="openModal(${p.id},'${escAttr(p.name)}',${p.quantity})">
            ${p.quantity === 0 ? 'Out of Stock' : 'Request Item'}
          </button>
        </div>
      </article>`;
    }).join('');
  }

  /* ── Modal ── */
  function openModal(productId, productName, maxQty) {
    document.getElementById('modalSubtitle').textContent = productName;
    document.getElementById('fproductId').value   = productId;
    document.getElementById('fproductName').value = productName;
    document.getElementById('fqty').max   = maxQty;
    document.getElementById('fqty').value = 1;
    clearErrors();
    document.getElementById('requestModal').classList.add('open');
    document.getElementById('fname').focus();
  }
  function closeModal() { document.getElementById('requestModal').classList.remove('open'); }
  document.getElementById('requestModal').addEventListener('click', e => { if (e.target === e.currentTarget) closeModal(); });
  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });

  function clearErrors() { document.querySelectorAll('.form-error').forEach(el => el.textContent = ''); }

  async function submitRequest() {
    clearErrors();
    let valid = true;
    const name  = document.getElementById('fname').value.trim();
    const email = document.getElementById('femail').value.trim();
    const team  = document.getElementById('fteam').value.trim();
    const qty   = parseInt(document.getElementById('fqty').value, 10);
    const event = document.getElementById('fevent').value.trim();
    const notes = document.getElementById('fnotes').value.trim();
    const pid   = document.getElementById('fproductId').value;
    const pname = document.getElementById('fproductName').value;

    if (!name)  { document.getElementById('err-fname').textContent  = 'Name is required.';  valid = false; }
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      document.getElementById('err-femail').textContent = 'Valid email required.'; valid = false;
    }
    if (!team)  { document.getElementById('err-fteam').textContent  = 'Team is required.';  valid = false; }
    if (!qty || qty < 1) { document.getElementById('err-fqty').textContent = 'Quantity must be ≥ 1.'; valid = false; }
    if (!valid) return;

    const btn = document.getElementById('submitBtn');
    btn.disabled = true; btn.textContent = 'Submitting…';
    try {
      const res = await fetch('/api/orders', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ requester_name:name, requester_email:email,
          requester_team:team, event_name:event, notes,
          items:[{ product_id:parseInt(pid,10), quantity:qty }] })
      });
      if (!res.ok) throw new Error('Server error');
      closeModal();
      showToast(`✅ Request for "${pname}" submitted!`);
    } catch (e) {
      showToast('❌ Failed to submit — please try again.', true);
    } finally {
      btn.disabled = false; btn.textContent = 'Submit Request';
    }
  }

  /* ── Filters ── */
  document.getElementById('searchInput').addEventListener('input', e => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => { searchQuery = e.target.value.trim(); loadProducts(); }, 320);
  });
  document.querySelectorAll('.status-chip').forEach(chip => {
    chip.addEventListener('click', () => {
      activeStatus = chip.dataset.status;
      document.querySelectorAll('.status-chip').forEach(c => c.classList.remove('active'));
      chip.classList.add('active');
      loadProducts();
    });
  });

  /* ── Utils ── */
  function showToast(msg, isError = false) {
    const toast = document.getElementById('toast');
    document.getElementById('toastMsg').textContent = msg;
    toast.style.background = isError ? '#7F1D1D' : '#1D1D1D';
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 4000);
  }
  function escHtml(s)  { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
  function escAttr(s)  { return String(s).replace(/'/g,"\\'").replace(/"/g,'\\"'); }

  init();
</script>
</body>
</html>
