{% raw %}
  {%- if req.stripe.discount.active and not currentUser.hasPro -%}
    <wa-dialog id="dialog-site" light-dismiss without-header>

      <div class="background-wa-pattern" style="justify-content: center; margin-inline: calc(var(--spacing) * -1); margin-block-start: calc(var(--spacing) * -1); margin-block-end: var(--spacing); background: linear-gradient(to bottom, var(--wa-color-brand), var(--wa-color-brand-50)); color: var(--wa-color-brand-on-loud); padding: var(--wa-space-3xl) var(--spacing); --background-pattern-opacity: 0.2; --background-pattern-image: url('/assets/images/bg-wa-pattern.svg');">

        <div class="wa-stack wa-align-items-center" style="text-align: center;">
          <wa-icon name="party-horn" family="duotone" variant="solid" style="font-size: var(--wa-font-size-3xl); --secondary-color: var(--wa-color-brand-40); --secondary-opacity: 1.0;"></wa-icon>
          <h2 class="wa-heading-2xl brand-font">Get a lifetime discount on Web Awesome Pro!</h2>
        </div>
      </div>

      <div class="wa-stack wa-gap-l">
        <p>Celebrate our official launch with a 20% discount on a Web Awesome Pro plan&hellip;<span class="appearance-underlined variant-drawn" style="--underline-color: var(--wa-color-brand);">for life</span>! But hurry, this lifetime discount is only available for a limited time.</p>

        <div class="wa-split">
          <wa-button type="button" appearance="plain" data-dialog="close" class="plausible-event-name=launch_dialog:close_button_click">Maybe Later</wa-button>
          <wa-button variant="neutral" appearance="accent" href="/purchase" class="brand-font plausible-event-name=launch_dialog:pro_purchase_button_click">
            <wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
            Get Pro + Save 20%
          </wa-button>
        </div>
      </div>
    </wa-dialog>

    <script type="module">
      (function() {
        const SITE_DIALOG_DISMISSED_KEY = 'dialog-wa-launch-sale-dismissed';

        // Early exit if user has dismissed the dialog
        try {
          if (localStorage.getItem(SITE_DIALOG_DISMISSED_KEY) === 'true') {
            return;
          }
        } catch (e) {
          // localStorage may be disabled or unavailable
          return;
        }

        // Wait for DOM and dialog element
        const dialog = document.getElementById('dialog-site');
        if (!dialog) {
          return;
        }

        // Helper function to safely track Plausible events
        const trackEvent = (eventName) => {
          if (typeof plausible !== 'undefined') {
            plausible(eventName);
          }
        };

        // Initialize dialog functionality
        let initCalled = false;
        const initDialog = () => {
          // Prevent double initialization
          if (initCalled) {
            return;
          }
          initCalled = true;

          // Track when dialog is shown
          dialog.addEventListener('wa-show', () => {
            trackEvent('launch_dialog:view');
          }, { once: true });

          // Track when dialog is dismissed
          dialog.addEventListener('wa-hide', (event) => {
            // Track overlay click or Escape key dismissal
            // Button clicks are tracked via CSS classes, so we only track non-button dismissals
            if (event.detail?.source === dialog) {
              trackEvent('launch_dialog:overlay_click');
            }

            // Save dismissal state to localStorage
            try {
              localStorage.setItem(SITE_DIALOG_DISMISSED_KEY, 'true');
            } catch (e) {
              // localStorage may be disabled or unavailable
            }
          }, { once: true });

          // Show dialog after a short delay to ensure page is loaded
          setTimeout(() => {
            dialog.open = true;
          }, 500);
        };

      customElements.whenDefined("wa-dialog").then(() => {
        initDialog()
      })
      })();
    </script>
  {%- endif -%}
{% endraw %}
