<!--
  MyAffirm /play page - paste this into a WordPress Custom HTML block or page template.

  SETUP:
  1. Create a WordPress page with slug "play" (so URL is https://myaffirm.ai/play)
  2. Add a Custom HTML block and paste this entire file
  3. Or use this as a full-page template (disable header/footer if needed)

  BEHAVIOR:
  - Reads ?id= and ?type= from the URL (from app share links)
  - On iPhone: tries myaffirm://play, then shows App Store after 2s if app didn't open
  - On Android: same, shows Play Store
  - On desktop: shows "Open in App" + both store buttons

  APP DEEP LINK: Your app uses myaffirm:// and prefixes https://myaffirm.ai.
  Ensure your app's linking config handles myaffirm://play?id=X&type=Y (it may
  currently only parse ?data= - you might need to add id/type support).
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Open in MyAffirm</title>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
      color: #fff;
      min-height: 100vh;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      text-align: center;
    }
    .card {
      background: rgba(255,255,255,0.08);
      border-radius: 20px;
      padding: 40px;
      max-width: 400px;
      width: 100%;
    }
    .logo { font-size: 48px; margin-bottom: 16px; }
    h1 { font-size: 24px; margin: 0 0 8px; }
    p { color: #aaa; margin: 0 0 24px; font-size: 15px; }
    .btn {
      display: inline-block;
      padding: 14px 28px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      margin: 8px;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .btn:hover { opacity: 0.9; }
    .btn-primary {
      background: #C3682E;
      color: #fff;
      border: none;
    }
    .btn-store {
      background: #fff;
      color: #333;
    }
    .store-buttons { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="card">
    <div class="logo">✨</div>
    <h1>Open in MyAffirm</h1>
    <p id="message">Opening the app...</p>
    <button id="openApp" class="btn btn-primary" style="display:none;">Open in App</button>
    <div id="storeButtons" class="store-buttons" style="display:none;">
      <a id="iosStore" href="https://apps.apple.com/app/id6471609729" class="btn btn-store" style="display:none;">App Store</a>
      <a id="androidStore" href="https://play.google.com/store/apps/details?id=com.myaffirm" class="btn btn-store" style="display:none;">Google Play</a>
    </div>
  </div>

  <script>
    (function() {
      const APP_STORE = 'https://apps.apple.com/app/id6471609729';
      const PLAY_STORE = 'https://play.google.com/store/apps/details?id=com.myaffirm';

      const params = new URLSearchParams(window.location.search);
      const id = params.get('id');
      const type = params.get('type');

      const appUrl = 'myaffirm://play' +
        (id ? '?id=' + encodeURIComponent(id) : '') +
        (type ? (id ? '&' : '?') + 'type=' + encodeURIComponent(type) : '');

      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
      const isAndroid = /Android/.test(navigator.userAgent);

      const msg = document.getElementById('message');
      const openBtn = document.getElementById('openApp');
      const storeDiv = document.getElementById('storeButtons');
      const iosLink = document.getElementById('iosStore');
      const androidLink = document.getElementById('androidStore');

      function showStoreButtons() {
        msg.textContent = id && type ? 'Listen to this in the MyAffirm app.' : 'Get the MyAffirm app for daily affirmations.';
        openBtn.style.display = 'inline-block';
        storeDiv.style.display = 'block';
        if (isIOS) iosLink.style.display = 'inline-block';
        if (isAndroid) androidLink.style.display = 'inline-block';
        if (!isIOS && !isAndroid) {
          iosLink.style.display = 'inline-block';
          androidLink.style.display = 'inline-block';
        }
      }

      openBtn.onclick = function() {
        window.location.href = appUrl;
      };

      if (isIOS || isAndroid) {
        window.location.href = appUrl;
        setTimeout(showStoreButtons, 2000);
      } else {
        showStoreButtons();
      }
    })();
  </script>
</body>
</html>