<div data-step="4">
  <h2 class="s-step-title">{{ t.sup_step4_title }}</h2>
  <p class="s-step-sub">{{ t.sup_step4_sub }}</p>

  <form method="post" action="{{ url_for('suppliers.signup_checkout') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="_accumulated" value='{{ data | tojson }}'>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0 1rem">
      <div class="s-field">
        <label class="s-label">{{ t.sup_step4_contact_name }} <span style="color:#EF4444">*</span></label>
        <input type="text" name="contact_name" class="s-input" value="{{ data.get('contact_name', '') }}" required>
      </div>
      <div class="s-field">
        <label class="s-label">{{ t.sup_step4_email }} <span style="color:#EF4444">*</span></label>
        <input type="email" name="contact_email" class="s-input" value="{{ data.get('contact_email', '') }}" required>
      </div>
      <div class="s-field">
        <label class="s-label">{{ t.sup_step4_phone }}</label>
        <input type="tel" name="contact_phone" class="s-input" value="{{ data.get('contact_phone', '') }}">
      </div>
      <div class="s-field">
        <label class="s-label">{{ t.sup_step4_short_desc }}</label>
        <input type="text" name="short_description" class="s-input" maxlength="160"
               value="{{ data.get('short_description', '') }}" placeholder="{{ t.sup_step4_short_desc_ph }}">
      </div>
      <div class="s-field">
        <label class="s-label">{{ t.sup_step4_service_cats }}</label>
        <input type="text" name="service_categories" class="s-input"
               value="{{ data.get('service_categories', '') }}" placeholder="{{ t.sup_step4_service_cats_ph }}">
      </div>
      <div class="s-field">
        <label class="s-label">{{ t.sup_step4_service_area }}</label>
        <input type="text" name="service_area" class="s-input"
               value="{{ data.get('service_area', '') }}" placeholder="e.g. DE, ES, FR">
      </div>
      <div class="s-field">
        <label class="s-label">{{ t.sup_step4_years }}</label>
        <input type="number" name="years_in_business" class="s-input" min="0"
               value="{{ data.get('years_in_business', '') }}">
      </div>
      <div class="s-field">
        <label class="s-label">{{ t.sup_step4_projects }}</label>
        <input type="number" name="project_count" class="s-input" min="0"
               value="{{ data.get('project_count', '') }}">
      </div>
    </div>

    {% if data.get('supplier_name') %}
    <p style="font-size:12px;color:#64748B;margin-top:0.5rem">
      {{ t.sup_step4_claiming }} <strong>{{ data.get('supplier_name') }}</strong>
    </p>
    {% endif %}

    <!-- Order Summary -->
    <div class="s-summary">
      <h3>{{ t.sup_step4_order_h3 }}</h3>
      <div class="s-summary-row">
        <span>{{ order.plan_name }} Plan</span>
        <span>
          {% if order.billing_period == 'yearly' %}
            &euro;{{ order.plan_price }}/yr
          {% else %}
            &euro;{{ order.plan_price }}/mo
          {% endif %}
        </span>
      </div>
      <div class="s-summary-row" style="font-size:0.75rem;color:#94A3B8">
        <span>{{ order.billing_label }}</span>
        <span></span>
      </div>
      {% if order.boost_monthly > 0 %}
      <div class="s-summary-row">
        <span>{{ t.sup_step4_boost_row }}</span>
        <span>+&euro;{{ order.boost_monthly }}/mo</span>
      </div>
      {% endif %}
      <div class="s-summary-row s-summary-total">
        <span>{% if order.billing_period == 'yearly' %}{{ t.sup_step4_total_yearly }}{% else %}{{ t.sup_step4_total_monthly }}{% endif %}</span>
        <span>&euro;{{ order.monthly_total }}{% if order.billing_period == 'yearly' %}{{ t.sup_step4_equiv }}{% else %}/mo{% endif %}</span>
      </div>
      {% if order.one_time_total > 0 %}
      <div class="s-summary-row" style="margin-top:8px">
        <span>{{ t.sup_step4_credit_row }}</span>
        <span>&euro;{{ order.one_time_total }}</span>
      </div>
      {% endif %}
    </div>

    <div class="s-nav">
      <button type="button" class="s-btn-back"
              hx-post="{{ url_for('suppliers.signup_step', step=2) }}"
              hx-target="#signup-step" hx-swap="innerHTML"
              hx-include="[name='_accumulated']">{{ t.sup_btn_back }}</button>
      <button type="submit" class="s-btn-next" id="checkout-btn">{{ t.sup_step4_checkout }}</button>
    </div>

    <div id="checkout-error" hidden
      style="background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;padding:10px;margin-top:0.75rem;font-size:0.8125rem;color:#DC2626;text-align:center"></div>
  </form>

  <script>
    (function() {
      var form = document.querySelector('[data-step="4"] form');
      form.addEventListener('submit', function(e) {
        e.preventDefault();
        var btn = document.getElementById('checkout-btn');
        var errBox = document.getElementById('checkout-error');
        btn.disabled = true;
        btn.textContent = {{ t.sup_step4_loading | tojson }};
        errBox.hidden = true;

        fetch(form.action, {
          method: 'POST',
          body: new FormData(form),
          headers: { 'X-CSRF-Token': form.querySelector('[name="csrf_token"]').value }
        })
        .then(function(res) { return res.json().then(function(d) { return { ok: res.ok, data: d }; }); })
        .then(function(result) {
          if (!result.ok || result.data.error) {
            errBox.textContent = result.data.error || {{ t.sup_step4_error | tojson }};
            errBox.hidden = false;
            btn.disabled = false;
            btn.textContent = {{ t.sup_step4_checkout | tojson }};
            return;
          }
          startCheckout(result.data);
          btn.disabled = false;
          btn.textContent = {{ t.sup_step4_checkout | tojson }};
        })
        .catch(function() {
          errBox.textContent = {{ t.sup_step4_network_error | tojson }};
          errBox.hidden = false;
          btn.disabled = false;
          btn.textContent = {{ t.sup_step4_checkout | tojson }};
        });
      });
    })();
  </script>
</div>
