<!DOCTYPE html>
<html lang="{{HTML_LANG}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {{BOOTSTRAP_CSS}}
  <style>{{DIALOG_CSS}}</style>
  <style>
    body { font-size: 13px; }
    .promo-title { font-size: 1.05rem; font-weight: 700; color: #0f766e; }
    .promo-body { font-size: 13px; color: #334155; white-space: pre-line; margin-bottom: 8px; }
    .promo-amount { font-size: 1.1rem; font-weight: 700; color: #0f766e; }
    .subtitle { font-size: 12px; margin-bottom: 6px; }
    .sepay-wrapper { display: flex; justify-content: center; margin: 6px 0; }
    .sepay-img { width: 300px; max-width: 100%; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 2px 6px rgba(15,23,42,.08); }
    .promo-instructions { text-align: left; font-size: 12px; color: #495057; margin-top: 8px; }
    .promo-instructions ol { margin-bottom: 4px; }
    #gumroad-qr-wrapper { display: flex; justify-content: center; margin: 6px 0; }
    .nav-tabs .nav-link { font-size: 12px; padding: 4px 10px; }
    .tab-content { padding-top: 6px; }
  </style>
</head>
<body class="p-3">
  <div class="container-fluid">
    <h2 class="h6 mb-1 promo-title">{{PROMO_TITLE}}</h2>
    <p class="promo-body">{{PROMO_BODY}}</p>
    <p class="text-muted subtitle">{{PROMO_AMOUNT_LABEL}} — <strong class="promo-amount">{{AMOUNT_DISPLAY}} ₫</strong></p>

    <ul class="nav nav-tabs mb-0" id="promoTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab-bank-btn" data-bs-toggle="tab" data-bs-target="#tab-bank" type="button" role="tab">{{UPGRADE_BANK_TAB}}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-gumroad-btn" data-bs-toggle="tab" data-bs-target="#tab-gumroad" type="button" role="tab">{{UPGRADE_GUMROAD_TAB}}</button>
      </li>
    </ul>

    <div class="tab-content" id="promoTabContent">
      <div class="tab-pane fade show active" id="tab-bank" role="tabpanel">
        <p class="small text-muted mb-1 mt-1">{{PROMO_BANK_HINT}}</p>
        <div class="sepay-wrapper">
          {{SEPAY_QR_IMG}}
        </div>
        <div class="promo-instructions border-top pt-1">
          <ol class="mb-0 mt-1 ps-3">
            <li>{{UPGRADE_TRANSFER_STEP_HTML}}</li>
            <li>{{PROMO_BANK_STEP2}}</li>
          </ol>
          <p class="mt-1 mb-0 small">{{UPGRADE_TRANSFER_MSG}} <code>{{TOKEN}}</code></p>
        </div>
      </div>

      <div class="tab-pane fade" id="tab-gumroad" role="tabpanel">
        <p class="small text-muted mb-1 mt-1">{{PROMO_GUMROAD_HINT}}</p>
        <div id="gumroad-qr-wrapper"></div>
        <div class="text-center mb-1">
          <a class="btn btn-sm btn-success" id="btn-open-gumroad" href="#" onclick="openGumroad();return false;">{{UPGRADE_GUMROAD_OPEN_BTN}}</a>
        </div>
        <div class="promo-instructions border-top pt-1">
          <ol class="mb-0 mt-1 ps-3">
            <li>{{PROMO_GUMROAD_STEP1}}</li>
            <li>{{PROMO_GUMROAD_STEP2}}</li>
          </ol>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mt-3">
      <button type="button" class="btn btn-sm btn-outline-secondary" onclick="sketchup.on_close_promo()">{{PROMO_CLOSE}}</button>
      <button type="button" class="btn btn-sm btn-warning" onclick="sketchup.on_open_upgrade()">{{SETTINGS_GO_PRO}}</button>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" crossorigin="anonymous"></script>
  {{BOOTSTRAP_JS}}
  <script>
    var GUMROAD_URL = {{GUMROAD_URL_JSON}};
    var GG_PROMO_STRINGS = {
      gumroad_scan: {{UPGRADE_GUMROAD_SCAN_JSON}}
    };

    (function() {
      var url = GUMROAD_URL;
      if (!url) return;
      var wrap = document.getElementById('gumroad-qr-wrapper');
      if (!wrap) return;
      new QRCode(wrap, {
        text: url,
        width: 160,
        height: 160,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.M
      });
      var lbl = document.createElement('p');
      lbl.className = 'text-muted small mt-1 mb-0 text-center';
      lbl.textContent = GG_PROMO_STRINGS.gumroad_scan;
      wrap.parentNode.insertBefore(lbl, wrap.nextSibling);
      var btn = document.getElementById('btn-open-gumroad');
      if (btn) btn.href = url;
    })();

    function openGumroad() {
      if (GUMROAD_URL) sketchup.on_open_gumroad(GUMROAD_URL);
    }
  </script>
</body>
</html>
