<% extends 'layout.html' %>

<% block content %>
<style>
  body { background: white; }
  #wpbody-content { padding-top: 64px; }
</style>
<div class="mailpoet-top-bar">
  <a role="button" class="mailpoet-top-bar-logo" title="<%= esc_attr__('Back to section root', 'mailpoet') %>" tabindex="0" href="admin.php?page=mailpoet-homepage">
    <img src="<%= cdn_url('logo-orange.svg') %>" alt="MailPoet logo" />
  </a>
</div>
<div class="mailpoet-tiers-page">
  <br><br>
  <div class="mp-toggle pricing-period-toggle mailpoet-tiers-page-billing-toggle">
    <input id="pricing_duration" type="checkbox">
    <label for="pricing_duration" data-automation-id="pricing_duration">
      <div class="mp-toggle__switch" data-unchecked="<%= esc_attr__('Pay monthly') %>" data-checked="<%= esc_attr__('Pay yearly') %>"></div>
    </label>
    <div class="mailpoet-tiers-page-pricing-period-description"><%= esc_html__('Save up to 15% on yearly plans') %></div>
    <div class="mailpoet-tiers-page-pricing-period-description-selected"><%= esc_html__('You are saving up to 15%!') %></div>
  </div>
  <figure class="mailpoet-tiers-page-content">
    <div class="mailpoet-tiers-page-content__pricing">
      <div class="mailpoet-tiers-page-content__tier">
        <div class="mailpoet-tiers-page-tier-header">
          <div class="mailpoet-tiers-page-tier-header__title">
            <div class="mailpoet-tiers-page-tier-header__icon starter"></div>
            <h2 class="mailpoet-tiers-page-tier-header-label">
              <%= esc_html__('Starter') %>
            </h2>
          </div>
          <p><%= esc_html__('Email marketing essentials for bloggers, small businesses, or those just starting out.') %></p>
        </div>
        <div class="mailpoet-tiers-page-tier-price">
          <p>&nbsp;</p>
          <h3>
            <span class="pricing-value"><%= esc_html__('Free') %></span>
          </h3>
          <p><%= esc_html__('Up to 500 subscribers') %></p>
        </div>
        <%= include('upgrade/upgrade_button.html', {label:esc_html__('Get Starter'), button_class: 'is-secondary', group:'starter'}) %>
        <ul class="free">
          <li><%= __('Send up to <b>5,000</b> emails per month') | wpKses({'b': {}}) %></li>
          <li><%= esc_html__('Subscription forms') %></li>
          <li><%= esc_html__('Email and ecommerce marketing') %></li>
          <li><%= esc_html__('Basic marketing automation') %></li>
          <li><%= esc_html__('Summarized email engagement statistics') %></li>
          <li><%= esc_html__('Send with MailPoet Sending Service') %></li>
        </ul>
      </div>
      <div class="mailpoet-tiers-page-content__tier popular">
        <div class="mailpoet-tiers-page-label">
          <div class="mailpoet-tiers-page-label__content">
            <%= esc_html__('Most popular') %>
          </div>
        </div>
        <div class="mailpoet-tiers-page-tier-header">
          <div class="mailpoet-tiers-page-tier-header__title">
            <div class="mailpoet-tiers-page-tier-header__icon business"></div>
            <h2 class="mailpoet-tiers-page-tier-header-label">
              <%= esc_html__('Business') %>
            </h2>
          </div>
          <p><%= esc_html__('Advanced email marketing functionality designed to help businesses of all sizes grow.') %></p>
        </div>
        <div class="mailpoet-tiers-page-tier-price">
          <p><%= esc_html__('From') %></p>
          <h3 id="mailpoet-business-yearly-price">
            <span class="pricing-discount">
              <sup class="pricing-discount-currency">$</sup>
              <span class="pricing-discount-value">10</span>
              &nbsp;
            </span>
            <sup class="pricing-currency">$</sup>
            <span class="pricing-value">9</span>
            <%= esc_html__(' / month') %>
          </h3>
          <h3 id="mailpoet-business-monthly-price">
            <sup class="pricing-currency">$</sup>
            <span class="pricing-value">10</span>
            <%= esc_html__(' / month') %>
          </h3>
          <p><%= esc_html__('for 500 subscribers') %></p>
        </div>
        <%= include('upgrade/upgrade_button.html', {label:esc_html__('Get Business'), button_class:'is-primary', group:'business'}) %>
        <div>
          <p><%= __('<b>All Starter plan features</b>, plus:') | wpKses({'b': {}}) %></p>
          <ul class="business">
            <li><%= __('Send <b>unlimited</b> emails per month') | wpKses({'b': {}}) %></li>
            <li><%= esc_html__('Remove MailPoet branding') %></li>
            <li><%= esc_html__('Priority support') %></li>
            <li><%= esc_html__('Subscriber segmentation') %></li>
            <li><%= esc_html__('Targeted marketing automation') %></li>
            <li><%= esc_html__('Detailed email engagement and ecommerce statistics') %></li>
          </ul>
        </div>
      </div>
      <div class="mailpoet-tiers-page-content__tier">
        <div class="mailpoet-tiers-page-tier-header">
          <div class="mailpoet-tiers-page-tier-header__title">
            <div class="mailpoet-tiers-page-tier-header__icon agency"></div>
            <h2 class="mailpoet-tiers-page-tier-header-label">
              <%= esc_html__('Agency') %>
            </h2>
          </div>
          <p><%= esc_html__('Add MailPoet’s full functionality to multiple websites – perfect for WordPress agencies or freelancers.') %></p>
        </div>
        <div class="mailpoet-tiers-page-tier-price">
          <p><%= esc_html__('From') %></p>
          <h3 id="mailpoet-agency-yearly-price">
            <span class="pricing-discount">
              <sup class="pricing-discount-currency">$</sup>
              <span class="pricing-discount-value">30</span>
              &nbsp;
            </span>
            <sup class="pricing-currency">$</sup>
            <span class="pricing-value">26</span>
            <%= esc_html__(' / month') %>
          </h3>
          <h3 id="mailpoet-agency-monthly-price">
            <sup class="pricing-currency">$</sup>
            <span class="pricing-value">30</span>
            <%= esc_html__(' / month') %>
          </h3>
          <p><%= esc_html__('for 500 subscribers') %></p>
        </div>
        <%= include('upgrade/upgrade_button.html', {label:esc_html__('Get Agency'), button_class:'is-secondary', group:'agency'}) %>
        <div>
          <p><%= __('<b>All Business features</b>, plus:') | wpKses({'b': {}}) %></p>
          <ul>
            <li><%= __('Use MailPoet on <b>50 websites</b>') | wpKses({'b': {}}) %></li>
            <li><%= esc_html__('Number of subscribers is per MailPoet instance') %></li>
          </ul>
        </div>
      </div>
    </div>
    <figcaption>
      <p>
        <% set allowedHtml = {'a': {'href': [], 'target': []}} %>
        <%=
        __('Compare full plan features and view more pricing options on [link]MailPoet.com[/link]')
        |replaceLinkTags('https://www.mailpoet.com/', {'target': '_blank'})
        |wpKses(allowedHtml)
        %>
      </p>
    </figcaption>
  </figure>
  <div class="mailpoet-tiers-page-hero-section footer">
    <div class="mailpoet-tiers-page-hero-section-questions">
      <div class="mailpoet-tiers-page-hero-section-questions-content">
        <h1 class="mailpoet-tiers-page-hero-section__title">
          <%= esc_html__('Have questions?') %>
        </h1>
        <p>
          <%= esc_html__('Visit our website to learn more about our plans.') %>
          <% set allowedHtml = {'a': {'href': [], 'target': []}} %>
          <%=
          __('And if you’re not sure which plan is the right one for you, our [link]Customer Support team[/link] are on hand to help you decide.')
          |replaceLinkTags('https://www.mailpoet.com/support/sales-pre-sales-questions/?ref=plugin-upgrade-page', {'target': '_blank'})
          |wpKses(allowedHtml)
          %>
        </p>
      </div>
      <div class="mailpoet-tiers-page-hero-section-questions__actions">
        <a target="_blank" href="https://account.mailpoet.com/" class="components-button is-secondary">
          <%= esc_html__('Compare plans') %>
        </a>
        <a target="_blank" href="https://kb.mailpoet.com/article/223-licenses-and-sales" class="components-button is-link">
          <%= esc_html__('Read FAQ') %>
        </a>
      </div>
    </div>
    <img src="<%= cdn_url('premium/6-hero.png') %>" alt="" />
  </div>
</div>
<% endblock %>

<% block after_javascript %>
<script type="text/javascript">
  MailPoet.trackEvent('Premium page viewed');

  jQuery(function($) {
    $('#pricing_duration').on('change', function() {
      const billingValue = $(this).prop('checked') ? 'annual' : 'monthly';

      $('.mailpoet-tiers-page a.mailpoet-premium-shop-link').each(function() {
        let href = $(this).attr('href');
        if (href) {
          let newHref = href.replace(/([?&]billing=)[^&]*/, '$1' + billingValue);
          $(this).attr('href', newHref);
        }
      });
    });

    $('.mailpoet-tiers-page a.mailpoet-premium-shop-link').on('click', function() {
      MailPoet.trackEvent('Upgrade page CTA clicked');
    });
  });
</script>
<% endblock %>
