<div data-step="1">
  <h2 class="s-step-title">{{ t.sup_step1_title }}</h2>
  <p class="s-step-sub">{{ t.sup_step1_sub }}</p>

  <!-- Billing period toggle (CSS sibling selector trick).
       Radios must be direct siblings of .s-billing-toggle AND <form> so that
       #bp-X:checked ~ * .price-X can reach into the plan cards. -->
  <input type="radio" name="_bp_toggle" id="bp-monthly" value="monthly"
         {% if data.get('billing_period', 'yearly') == 'monthly' %}checked{% endif %}>
  <input type="radio" name="_bp_toggle" id="bp-yearly" value="yearly"
         {% if data.get('billing_period', 'yearly') != 'monthly' %}checked{% endif %}>
  <div class="s-billing-toggle">
    <div class="s-billing-toggle__pill">
      <label for="bp-monthly" class="s-billing-toggle__opt">{{ t.sup_step1_monthly }}</label>
      <label for="bp-yearly" class="s-billing-toggle__opt">
        {{ t.sup_step1_yearly }} <span class="s-save-badge">{{ t.sup_step1_save_badge }}</span>
      </label>
    </div>
  </div>

  <style>
    #bp-monthly, #bp-yearly { display: none; } /* radios are layout-only */
    .s-billing-toggle { margin-bottom: 1.25rem; }
    .s-billing-toggle__pill {
      display: inline-flex; border: 1px solid #E2E8F0; border-radius: 999px;
      background: #F8FAFC; overflow: hidden;
    }
    .s-billing-toggle__opt {
      padding: 6px 18px; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
      color: #64748B; transition: all 0.15s; border-radius: 999px;
      display: flex; align-items: center; gap: 6px;
    }
    /* Radios are now direct siblings of .s-billing-toggle, so ~ reaches it */
    #bp-monthly:checked ~ .s-billing-toggle label[for="bp-monthly"],
    #bp-yearly:checked  ~ .s-billing-toggle label[for="bp-yearly"] {
      background: #1D4ED8; color: white;
    }
    .s-save-badge {
      font-size: 0.625rem; font-weight: 700; background: #DCFCE7; color: #16A34A;
      padding: 2px 6px; border-radius: 999px;
    }
    #bp-yearly:checked ~ .s-billing-toggle label[for="bp-yearly"] .s-save-badge {
      background: rgba(255,255,255,0.2); color: white;
    }

    /* Price display: radios are siblings of <form>, so ~ * reaches plan cards */
    .price-monthly, .price-yearly { display: none; }
    #bp-monthly:checked ~ * .price-monthly { display: block; }
    #bp-yearly:checked  ~ * .price-yearly  { display: block; }
  </style>

  <form hx-post="{{ url_for('suppliers.signup_step', step=1) }}"
        hx-target="#signup-step" hx-swap="innerHTML" id="step1-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="_accumulated" value='{{ data | tojson }}'>
    <input type="hidden" name="billing_period" id="billing_period_input"
           value="{{ data.get('billing_period', 'yearly') }}">

    <div class="s-plan-grid">
      {% for key, plan in plans.items() %}
      <label class="s-plan-card {% if data.get('plan', 'supplier_growth') == key %}s-plan-card--selected{% endif %}"
             onclick="this.parentNode.querySelectorAll('.s-plan-card').forEach(c=>c.classList.remove('s-plan-card--selected')); this.classList.add('s-plan-card--selected')">
        <input type="radio" name="plan" value="{{ key }}" {% if data.get('plan', 'supplier_growth') == key %}checked{% endif %}>
        {% if key == 'supplier_growth' %}<div class="s-plan-card__popular">{{ t.sup_step1_popular }}</div>{% endif %}
        <h3>{{ plan.name }}</h3>
        <div class="price-yearly">
          {% if plan.yearly_price == 0 %}
          <div class="price">{{ t.sup_basic_free_label }}</div>
          <div style="font-size:0.6875rem;color:#16A34A;margin-top:2px">{{ t.sup_step1_free_forever }}</div>
          {% else %}
          <div class="price">&euro;{{ plan.yearly_monthly_equivalent }} <span>/mo</span></div>
          <div style="font-size:0.6875rem;color:#94A3B8;margin-top:2px">{{ t.sup_step1_billed_yearly | tformat(price=plan.yearly_price) }}</div>
          {% endif %}
        </div>
        <div class="price-monthly">
          {% if plan.monthly_price == 0 %}
          <div class="price">{{ t.sup_basic_free_label }}</div>
          <div style="font-size:0.6875rem;color:#16A34A;margin-top:2px">{{ t.sup_step1_free_forever }}</div>
          {% else %}
          <div class="price">&euro;{{ plan.monthly_price }} <span>/mo</span></div>
          <div style="font-size:0.6875rem;color:#94A3B8;margin-top:2px">{{ t.sup_step1_billed_monthly }}</div>
          {% endif %}
        </div>
        <ul>
          {% for key in plan.feature_keys %}
          <li>{{ t[key] }}</li>
          {% endfor %}
        </ul>
      </label>
      {% endfor %}
    </div>

    <div class="s-nav">
      <span></span>
      <button type="submit" class="s-btn-next">{{ t.sup_step1_next }}</button>
    </div>
  </form>

  <script>
    (function() {
      // Sync billing period radio → hidden input so it flows into _accumulated
      var form = document.getElementById('step1-form');
      var hiddenInput = document.getElementById('billing_period_input');
      var radios = document.querySelectorAll('[name="_bp_toggle"]');

      function syncPeriod() {
        radios.forEach(function(r) {
          if (r.checked) hiddenInput.value = r.value;
        });
      }
      radios.forEach(function(r) { r.addEventListener('change', syncPeriod); });

      // Apply initial display state from existing value
      var initial = hiddenInput.value;
      radios.forEach(function(r) { if (r.value === initial) r.checked = true; });
    })();
  </script>
</div>
