playableads/src/filler/cta.ts

/**
 * CTA 按钮控制器
 *
 * - 页面加载后按钮常驻可见（工具栏之上）
 * - 填色完成后调用 `ctaHighlight()` 放大 + 强脉冲，引导用户点击
 * - 点击后通过 mraid 适配层跳转 Store
 */

import { openStoreUrl } from "./mraid";

/** App Store / Google Play 落地页链接，按需替换 */
// 正式上线时换回自己的 app：
// const STORE_URL_IOS = "https://apps.apple.com/app/id1575480118";
// const STORE_URL_ANDROID = "https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number";

// 测试期间使用 PBN，避免产生无效转化
const STORE_URL_IOS =
  "https://apps.apple.com/gb/app/paint-by-number-coloring-games/id1420058690";
const STORE_URL_ANDROID =
  "https://play.google.com/store/apps/details?id=com.oakever.paintbynumber";

function getStoreUrl(): string {
  const ua = navigator.userAgent;
  if (/android/i.test(ua)) return STORE_URL_ANDROID;
  return STORE_URL_IOS; // iOS / 桌面 fallback
}

/**
 * 初始化 CTA 按钮：绑定点击事件。
 * 应在 DOM ready 后调用一次。
 */
export function initCta(): void {
  const btn = document.getElementById("cta-btn");
  if (!btn) return;
  btn.addEventListener("click", () => {
    openStoreUrl(getStoreUrl());
  });
}

/**
 * 填色完成后调用，放大按钮并加强脉冲动画，吸引用户点击。
 */
export function ctaHighlight(): void {
  const btn = document.getElementById("cta-btn");
  if (!btn) return;
  btn.classList.add("cta-highlight");
}