{# QA Personas section — rendered only in local dev mode when qa_personas is non-empty (#768)
   v0.62 CSS refactor: inline Tailwind → semantic .dz-qa-* family
   (site-sections.css). Drive-by fix: the cycle 250 sweep had renamed
   the JS arrow-function `btn` parameter to a Tailwind class string,
   producing a SyntaxError; restored to `btn`. #}
<section class="dz-qa-personas">
  <div class="dz-qa-personas-header">
    <div class="dz-qa-banner">
      <svg class="dz-qa-banner-icon" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
        <path d="M10 2L2 18h16L10 2zm0 5l5 9H5l5-9z"/>
      </svg>
      Local Dev Mode — not visible in production
    </div>
    <h2 class="dz-qa-personas-title">Try the app as different personas</h2>
    <p class="dz-qa-personas-subtitle">
      This is local QA mode. Pick a persona to explore the app with their permissions and data.
    </p>
  </div>

  <div class="dz-qa-personas-grid">
    {% for persona in qa_personas %}
    <article class="dz-qa-persona">
      <div class="dz-qa-persona-header">
        <h3 class="dz-qa-persona-name">{{ persona.display_name }}</h3>
        <span class="dz-qa-persona-id">{{ persona.id }}</span>
      </div>
      <p class="dz-qa-persona-email">{{ persona.email }}</p>
      <p class="dz-qa-persona-description">{{ persona.description }}</p>
      {% if persona.stories %}
      <ul class="dz-qa-persona-stories">
        {% for story in persona.stories %}
        <li>
          <span aria-hidden="true">→</span>
          <span>{{ story }}</span>
        </li>
        {% endfor %}
      </ul>
      {% endif %}
      <button
        type="button"
        data-qa-login-persona="{{ persona.id }}"
        class="dz-button dz-button-primary dz-qa-persona-login">
        Log in as {{ persona.display_name }}
      </button>
    </article>
    {% endfor %}
  </div>
</section>

<script>
(function() {
  document.querySelectorAll('[data-qa-login-persona]').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var personaId = btn.dataset.qaLoginPersona;
      btn.disabled = true;
      var originalText = btn.textContent;
      btn.textContent = 'Logging in...';
      fetch('/qa/magic-link', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({persona_id: personaId})
      }).then(function(r) {
        if (!r.ok) throw new Error('HTTP ' + r.status);
        return r.json();
      }).then(function(data) {
        if (data.url) {
          window.location.href = data.url;
        } else {
          throw new Error('No URL in response');
        }
      }).catch(function(err) {
        btn.disabled = false;
        btn.textContent = 'Error — try again';
        setTimeout(function() { btn.textContent = originalText; }, 2000);
        console.error('QA magic link failed:', err);
      });
    });
  });
})();
</script>