{% extends "base.html" %}

{% block title %}{{ t.sup_meta_title }} | {{ config.APP_NAME }}{% endblock %}

{% block head %}
<meta name="description" content="{{ t.sup_meta_desc }}">
<style>
  /* Hero */
  .sup-hero { text-align: center; padding: 3rem 0 2rem; }
  .sup-hero h1 { font-size: 2.25rem; line-height: 1.3; }
  .sup-hero p { color: #64748B; font-size: 1.125rem; max-width: 560px; margin: 0.75rem auto 0; }
  .sup-hero .btn { margin-top: 1.5rem; padding: 14px 32px; font-size: 1rem; }
  .sup-hero__proof { font-size: 0.8125rem; color: #94A3B8; margin-top: 0.75rem; }

  /* Stats */
  .sup-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    max-width: 720px; margin: 0 auto; padding: 1.5rem 0 2rem;
  }
  .sup-stat-card {
    text-align: center; background: white; border: 1px solid #E2E8F0;
    border-radius: 12px; padding: 1rem;
  }
  .sup-stat-card strong { display: block; font-size: 1.75rem; color: #1E293B; font-weight: 800; }
  .sup-stat-card span { font-size: 0.8125rem; color: #64748B; }

  /* Sections */
  .sup-section { padding: 2.5rem 0; }
  .sup-section h2 { text-align: center; font-size: 1.5rem; margin-bottom: 0.5rem; }
  .sup-section .sub { text-align: center; color: #64748B; margin-bottom: 2rem; }

  /* Problem section */
  .sup-problem { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px; padding: 2rem; }
  .sup-problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
  .sup-problem-card {
    border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.25rem;
    background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .sup-problem-card .stat { font-size: 2rem; font-weight: 800; color: #DC2626; line-height: 1; margin-bottom: 0.5rem; }
  .sup-problem-card h3 { font-size: 0.9375rem; margin-bottom: 0.25rem; color: #1E293B; }
  .sup-problem-card p { font-size: 0.8125rem; color: #64748B; margin: 0; }
  .sup-problem-transition {
    text-align: center; font-size: 1rem; color: #334155; font-style: italic;
    margin-top: 1.5rem; font-weight: 500;
  }

  /* Why section */
  .sup-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .sup-why-card {
    border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.25rem;
    text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .sup-why-card h3 { font-size: 0.9375rem; margin-bottom: 0.25rem; }
  .sup-why-card p { font-size: 0.8125rem; color: #64748B; }

  /* Lead-back guarantee */
  .sup-guarantee {
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
    border: 2px solid #16A34A; border-radius: 20px; padding: 2rem;
    max-width: 680px; margin: 0 auto; text-align: center;
  }
  .sup-guarantee__icon {
    font-size: 2.5rem; margin-bottom: 0.5rem; display: block; line-height: 1;
  }
  .sup-guarantee h2 {
    font-size: 1.375rem; color: #14532D; margin-bottom: 0.5rem; text-align: center;
  }
  .sup-guarantee p {
    color: #166534; font-size: 0.9375rem; line-height: 1.65; max-width: 520px; margin: 0 auto;
  }
  .sup-guarantee__badge {
    display: inline-block; background: #16A34A; color: white; font-size: 0.6875rem;
    font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-top: 1rem;
    text-transform: uppercase; letter-spacing: 0.04em;
  }

  /* Lead preview */
  .sup-lead-preview {
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px;
    padding: 1.5rem; max-width: 720px; margin: 2rem auto 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }
  .sup-lead-preview h4 {
    font-size: 0.875rem; color: #94A3B8; text-transform: uppercase;
    letter-spacing: 0.04em; margin-bottom: 1rem;
  }
  .lead-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
  .lead-preview-card { background: white; border: 1px solid #E2E8F0; border-radius: 10px; padding: 1rem; }
  .lead-preview-card .lp-heat {
    font-size: 0.6875rem; font-weight: 700; padding: 2px 8px;
    border-radius: 999px; display: inline-block; margin-bottom: 0.5rem;
  }
  .lead-preview-card .lp-heat--hot { background: #FEE2E2; color: #DC2626; }
  .lead-preview-card .lp-heat--warm { background: #FEF3C7; color: #D97706; }
  .lead-preview-card dl { font-size: 0.8125rem; }
  .lead-preview-card dt { color: #94A3B8; font-size: 0.6875rem; text-transform: uppercase; margin-top: 0.5rem; }
  .lead-preview-card dd { color: #1E293B; font-weight: 500; margin: 0; }
  .lead-preview-card .lp-blur { color: transparent; text-shadow: 0 0 8px rgba(30,41,59,0.5); user-select: none; }

  /* How it works */
  .sup-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    max-width: 800px; margin: 0 auto;
  }
  .sup-step { text-align: center; }
  .sup-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: #EFF6FF; color: #1D4ED8; font-weight: 700; font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  .sup-step h3 { font-size: 1rem; margin-bottom: 0.25rem; }
  .sup-step p { font-size: 0.8125rem; color: #64748B; }

  /* Social proof */
  .sup-proof-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    max-width: 720px; margin: 0 auto;
  }
  .sup-proof-card {
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px;
    padding: 1.75rem; text-align: left; position: relative;
  }
  .sup-proof-card::before {
    content: "\201C"; font-size: 4rem; color: #DBEAFE; line-height: 1;
    position: absolute; top: 1rem; left: 1.25rem; font-family: Georgia, serif;
  }
  .sup-proof-card blockquote {
    font-size: 0.9375rem; color: #334155; font-style: italic;
    line-height: 1.6; margin: 1.5rem 0 0.75rem; padding: 0;
  }
  .sup-proof-card cite { font-size: 0.8125rem; color: #94A3B8; font-style: normal; }

  /* Billing toggle — CSS-only via radio sibling trick */
  input[name="billing"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
  .billing-toggle {
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 2rem; width: fit-content;
    background: #F1F5F9; border-radius: 999px; padding: 4px;
  }
  .billing-toggle label {
    padding: 8px 20px; border-radius: 999px; cursor: pointer;
    font-size: 0.875rem; font-weight: 500; color: #64748B; transition: all 0.15s;
    white-space: nowrap;
  }
  .billing-toggle .save-badge {
    background: #DCFCE7; color: #16A34A; font-size: 0.6875rem;
    font-weight: 700; padding: 2px 6px; border-radius: 999px; margin-left: 4px;
  }
  #billing-monthly:checked ~ .billing-toggle label[for="billing-monthly"],
  #billing-yearly:checked ~ .billing-toggle label[for="billing-yearly"] {
    background: white; color: #1E293B; box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  }
  /* Default: monthly visible, yearly hidden */
  .price-yearly { display: none; }
  /* When yearly is selected */
  #billing-yearly:checked ~ .pricing-grid .price-monthly { display: none; }
  #billing-yearly:checked ~ .pricing-grid .price-yearly { display: block; }
  .yearly-note { display: block; font-size: 0.6875rem; color: #16A34A; margin-bottom: 0.25rem; }

  /* Pricing cards */
  .pricing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    max-width: 960px; margin: 0 auto;
  }
  .pricing-card {
    border: 1px solid #E2E8F0; border-radius: 16px; padding: 1.5rem;
    background: white; position: relative; display: flex; flex-direction: column;
  }
  .pricing-card--highlight {
    border-color: #1D4ED8; border-width: 2px;
    box-shadow: 0 4px 20px rgba(29,78,216,0.12);
  }
  .pricing-card__popular {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: #1D4ED8; color: white; font-size: 0.6875rem; font-weight: 700;
    padding: 4px 14px; border-radius: 999px; text-transform: uppercase;
    letter-spacing: 0.04em; white-space: nowrap;
  }
  .pricing-card h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
  .pricing-card .price { font-size: 1.75rem; font-weight: 800; color: #1E293B; margin-bottom: 0.25rem; }
  .pricing-card .price span { font-size: 0.875rem; font-weight: 400; color: #64748B; }
  .pricing-card .credits-inc { font-size: 0.8125rem; color: #1D4ED8; font-weight: 600; margin-bottom: 1rem; }
  .pricing-card .credits-inc--muted { color: #64748B; }
  .pricing-card ul { list-style: none; padding: 0; margin: 0 0 1.5rem; flex-grow: 1; }
  .pricing-card li {
    font-size: 0.8125rem; color: #475569; padding: 4px 0;
    display: flex; align-items: flex-start; gap: 6px;
  }
  .pricing-card li::before { content: "\2713"; color: #16A34A; font-weight: 700; flex-shrink: 0; }
  .pricing-card .btn, .pricing-card .btn-outline { width: 100%; text-align: center; margin-top: auto; }
  .pricing-card__eur-note { font-size: 0.6875rem; color: #94A3B8; text-align: center; margin-top: 0.5rem; }

  /* ROI callout */
  .sup-roi {
    background: #0F172A; border-radius: 14px; padding: 1.25rem 2rem;
    text-align: center; max-width: 720px; margin: 1.75rem auto 0;
  }
  .sup-roi p { color: #E2E8F0; font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.5; }
  .sup-roi strong { color: #34D399; }

  /* Credits-only callout */
  .sup-credits-only {
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px;
    padding: 1.25rem 1.5rem; text-align: center; max-width: 640px; margin: 1.5rem auto 0;
  }
  .sup-credits-only p { font-size: 0.875rem; color: #475569; margin: 0; }
  .sup-credits-only a { color: #1D4ED8; font-weight: 600; }

  /* Boosts */
  .boost-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem; max-width: 720px; margin: 1.5rem auto 0;
  }
  .boost-card { border: 1px solid #E2E8F0; border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.8125rem; }
  .boost-card strong { color: #1E293B; display: block; margin-bottom: 2px; }
  .boost-card .boost-price { color: #1D4ED8; font-weight: 700; font-size: 0.75rem; }

  /* Comparison table */
  .comparison-wrap { overflow-x: auto; max-width: 900px; margin: 0 auto; }
  .comparison-table {
    width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 580px;
  }
  .comparison-table th, .comparison-table td {
    padding: 0.75rem 1rem; border-bottom: 1px solid #E2E8F0; text-align: left;
  }
  .comparison-table thead th { font-weight: 700; color: #1E293B; font-size: 0.8125rem; }
  .comparison-table thead .col-us { color: #1D4ED8; }
  .comparison-table tbody tr:nth-child(even) td { background: #F8FAFC; }
  .comparison-table td { color: #475569; }
  .comparison-table td.col-us { color: #1D4ED8; font-weight: 600; }
  .comparison-table td:first-child { font-weight: 600; color: #1E293B; white-space: nowrap; }
  .comparison-table .check { color: #16A34A; font-weight: 700; }
  .comparison-table .dash { color: #94A3B8; }
  .comparison-footnote {
    font-size: 0.75rem; color: #94A3B8; text-align: center;
    margin: 0.75rem auto 0; max-width: 560px;
  }

  /* FAQ */
  .sup-faq { max-width: 640px; margin: 0 auto; }
  .sup-faq details { border-bottom: 1px solid #E2E8F0; padding: 1rem 0; }
  .sup-faq summary {
    font-weight: 600; cursor: pointer; font-size: 0.9375rem; color: #1E293B; list-style: none;
  }
  .sup-faq summary::-webkit-details-marker { display: none; }
  .sup-faq summary::before { content: "+ "; color: #1D4ED8; font-weight: 700; }
  .sup-faq details[open] summary::before { content: "- "; }
  .sup-faq p { color: #64748B; font-size: 0.875rem; margin-top: 0.5rem; line-height: 1.6; }

  /* Final CTA */
  .sup-cta {
    text-align: center; padding: 4rem 2rem; margin: 2rem 0;
    background: #0F172A; border-radius: 20px;
  }
  .sup-cta h2 { font-size: 1.75rem; margin-bottom: 0.75rem; color: white; }
  .sup-cta p { color: #94A3B8; margin-bottom: 1.5rem; font-size: 1rem; }

  /* Supplier struggling moments */
  .sup-familiar-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
    max-width: 900px; margin: 0 auto;
  }
  .sup-familiar-card {
    background: #FEF2F2; border: 1px solid #FECACA; border-radius: 14px;
    padding: 1.5rem; text-align: center;
  }
  .sup-familiar-card blockquote {
    font-size: 0.9375rem; color: #991B1B; font-style: italic;
    line-height: 1.5; margin: 0 0 0.75rem; padding: 0;
  }
  .sup-familiar-card p {
    font-size: 0.8125rem; color: #1D4ED8; font-weight: 600; margin: 0;
  }

  @media (max-width: 640px) {
    .sup-stats { grid-template-columns: repeat(2, 1fr); }
    .sup-steps, .sup-why, .sup-problem-grid, .sup-proof-grid, .sup-familiar-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .lead-preview-grid { grid-template-columns: 1fr; }
    .sup-hero h1 { font-size: 1.75rem; }
  }
</style>
{% endblock %}

{% block content %}
<main class="container-page">

  <!-- Hero -->
  <div class="sup-hero">
    <h1>{{ t.sup_hero_h1a }}<br>{{ t.sup_hero_h1b }}</h1>
    <p>{{ t.sup_hero_sub }}</p>
    <a href="{{ url_for('suppliers.signup') }}" class="btn">{{ t.sup_hero_cta }}</a>
    <p class="sup-hero__proof">{{ t.sup_hero_trust_pre }} {{ total_countries }} {{ t.sup_hero_trust_post }}</p>
  </div>

  <!-- Live Stats (conditional — hide if numbers aren't meaningful) -->
  <div class="sup-stats">
    {% if calc_requests >= 10 %}
    <div class="sup-stat-card">
      <strong>{{ calc_requests }}+</strong>
      <span>{{ t.sup_stat_plans }}</span>
    </div>
    {% endif %}
    {% if avg_budget and avg_budget > 50000 %}
    <div class="sup-stat-card">
      <strong>&euro;{{ "{:,.0f}".format(avg_budget / 1000) }}K</strong>
      <span>{{ t.sup_stat_avg }}</span>
    </div>
    {% endif %}
    <div class="sup-stat-card">
      <strong>{{ total_suppliers }}+</strong>
      <span>{{ t.sup_stat_suppliers_pre }} {{ total_countries }} {{ t.sup_stat_suppliers_post }}</span>
    </div>
    {% if monthly_leads >= 3 %}
    <div class="sup-stat-card">
      <strong>{{ monthly_leads }}</strong>
      <span>{{ t.sup_stat_leads }}</span>
    </div>
    {% endif %}
  </div>

  <!-- Problem section -->
  <section class="sup-section">
    <div class="sup-problem">
      <h2 style="margin-bottom:0.5rem">{{ t.sup_prob_h2 }}</h2>
      <p style="text-align:center;color:#64748B;margin-bottom:0">{{ t.sup_prob_sub }}</p>
      <div class="sup-problem-grid">
        <div class="sup-problem-card">
          <div class="stat">&euro;10K+</div>
          <h3>{{ t.sup_prob_tradeshow_h3 }}</h3>
          <p>{{ t.sup_prob_tradeshow_p }}</p>
        </div>
        <div class="sup-problem-card">
          <div class="stat">&euro;20&ndash;80</div>
          <h3>{{ t.sup_prob_ads_h3 }}</h3>
          <p>{{ t.sup_prob_ads_p }}</p>
        </div>
        <div class="sup-problem-card">
          <div class="stat">&lt;2%</div>
          <h3>{{ t.sup_prob_cold_h3 }}</h3>
          <p>{{ t.sup_prob_cold_p }}</p>
        </div>
      </div>
      <p class="sup-problem-transition">{{ t.sup_prob_transition }}</p>
    </div>
  </section>

  <!-- "Is this your sales team?" — struggling moments -->
  <section class="sup-section">
    <h2 style="text-align:center;margin-bottom:1.5rem">{{ t.sup_familiar_title }}</h2>
    <div class="sup-familiar-grid">
      <div class="sup-familiar-card">
        <blockquote>&ldquo;{{ t.sup_familiar_1_quote }}&rdquo;</blockquote>
        <p>{{ t.sup_familiar_1_pivot }}</p>
      </div>
      <div class="sup-familiar-card">
        <blockquote>&ldquo;{{ t.sup_familiar_2_quote }}&rdquo;</blockquote>
        <p>{{ t.sup_familiar_2_pivot }}</p>
      </div>
      <div class="sup-familiar-card">
        <blockquote>&ldquo;{{ t.sup_familiar_3_quote }}&rdquo;</blockquote>
        <p>{{ t.sup_familiar_3_pivot }}</p>
      </div>
    </div>
  </section>

  <!-- Why Padelnomics — moved above lead preview -->
  <section class="sup-section">
    <h2>{{ t.sup_why_h2 }}</h2>
    <p class="sub">{{ t.sup_why_sub }}</p>
    <div class="sup-why">
      <div class="sup-why-card">
        <h3>{{ t.sup_why_card1_h3 }}</h3>
        <p>{{ t.sup_why_card1_p }}</p>
      </div>
      <div class="sup-why-card">
        <h3>{{ t.sup_why_card2_h3 }}</h3>
        <p>{{ t.sup_why_card2_p }}</p>
      </div>
      <div class="sup-why-card">
        <h3>{{ t.sup_why_card3_h3 }}</h3>
        <p>{{ t.sup_why_card3_p }}</p>
      </div>
    </div>
  </section>

  <!-- Lead-Back Guarantee -->
  <section class="sup-section">
    <div class="sup-guarantee">
      <span class="sup-guarantee__icon">&#x1F6E1;&#xFE0F;</span>
      <h2>{{ t.sup_guarantee_h2 }}</h2>
      <p>{{ t.sup_guarantee_p }}</p>
      <span class="sup-guarantee__badge">{{ t.sup_guarantee_badge }}</span>
    </div>
  </section>

  <!-- Live lead preview -->
  <section class="sup-section">
    <h2>{{ t.sup_leads_section_h2 }}</h2>
    <p class="sub">{{ t.sup_leads_section_sub }}</p>
    <div class="sup-lead-preview">
      <h4>{{ t.sup_leads_heading }}</h4>
      {% if preview_leads %}
      <div class="lead-preview-grid">
        {% for lead in preview_leads %}
        <div class="lead-preview-card">
          <span class="lp-heat lp-heat--{{ lead.heat_score }}">{{ lead.heat_score | upper }}</span>
          <dl>
            <dt>{{ t.sup_lead_facility }}</dt>
            <dd>{{ lead.facility_type | default("Indoor", true) | capitalize }} &middot; {{ lead.court_count | default("?") }} courts</dd>
            <dt>{{ t.sup_lead_country }}</dt>
            <dd>{{ lead.country | default("&mdash;") }}</dd>
            <dt>{{ t.sup_lead_budget }}</dt>
            <dd>{% if lead.budget_estimate %}&euro;{{ "{:,.0f}".format(lead.budget_estimate / 1000) }}K{% else %}&mdash;{% endif %}</dd>
            <dt>{{ t.sup_lead_timeline }}</dt>
            <dd>{{ lead.timeline | default("&mdash;") }}</dd>
            <dt>{{ t.sup_lead_contact }}</dt>
            <dd class="lp-blur">john@example.com</dd>
          </dl>
        </div>
        {% endfor %}
      </div>
      <p style="text-align:center;margin-top:1rem;font-size:0.8125rem;color:#64748B">
        {{ t.sup_leads_unlock_pre }}
        <a href="{{ url_for('suppliers.signup') }}" style="color:#1D4ED8;font-weight:600">{{ t.sup_leads_unlock_cta }}</a>
      </p>
      {% else %}
      <div class="lead-preview-grid">
        <div class="lead-preview-card">
          <span class="lp-heat lp-heat--hot">HOT</span>
          <dl>
            <dt>{{ t.sup_lead_facility }}</dt><dd>Indoor (Rent) &middot; 6 courts</dd>
            <dt>{{ t.sup_lead_country }}</dt><dd>Germany</dd>
            <dt>{{ t.sup_lead_budget }}</dt><dd>&euro;450K</dd>
            <dt>{{ t.sup_lead_timeline }}</dt><dd>3-6 months</dd>
            <dt>{{ t.sup_lead_contact }}</dt><dd class="lp-blur">john@example.com</dd>
          </dl>
        </div>
        <div class="lead-preview-card">
          <span class="lp-heat lp-heat--warm">WARM</span>
          <dl>
            <dt>{{ t.sup_lead_facility }}</dt><dd>Outdoor &middot; 4 courts</dd>
            <dt>{{ t.sup_lead_country }}</dt><dd>Spain</dd>
            <dt>{{ t.sup_lead_budget }}</dt><dd>&euro;280K</dd>
            <dt>{{ t.sup_lead_timeline }}</dt><dd>6-12 months</dd>
            <dt>{{ t.sup_lead_contact }}</dt><dd class="lp-blur">maria@example.com</dd>
          </dl>
        </div>
        <div class="lead-preview-card">
          <span class="lp-heat lp-heat--hot">HOT</span>
          <dl>
            <dt>{{ t.sup_lead_facility }}</dt><dd>Indoor (Own) &middot; 8 courts</dd>
            <dt>{{ t.sup_lead_country }}</dt><dd>Sweden</dd>
            <dt>{{ t.sup_lead_budget }}</dt><dd>&euro;720K</dd>
            <dt>{{ t.sup_lead_timeline }}</dt><dd>ASAP</dd>
            <dt>{{ t.sup_lead_contact }}</dt><dd class="lp-blur">erik@example.com</dd>
          </dl>
        </div>
      </div>
      <p style="text-align:center;margin-top:1rem;font-size:0.8125rem;color:#64748B">
        {{ t.sup_leads_example }}
      </p>
      {% endif %}
    </div>
  </section>

  <!-- How it works -->
  <section class="sup-section">
    <h2>{{ t.sup_how_h2 }}</h2>
    <p class="sub">{{ t.sup_how_sub }}</p>
    <div class="sup-steps">
      <div class="sup-step">
        <div class="sup-step__num">1</div>
        <h3>{{ t.sup_how_step1_h3 }}</h3>
        <p>{{ t.sup_how_step1_p }}</p>
      </div>
      <div class="sup-step">
        <div class="sup-step__num">2</div>
        <h3>{{ t.sup_how_step2_h3 }}</h3>
        <p>{{ t.sup_how_step2_p }}</p>
      </div>
      <div class="sup-step">
        <div class="sup-step__num">3</div>
        <h3>{{ t.sup_how_step3_h3 }}</h3>
        <p>{{ t.sup_how_step3_p }}</p>
      </div>
    </div>
  </section>

  <!-- What you get with every lead -->
  <section class="sup-section">
    <h2>{{ t.sup_proof_h2 }}</h2>
    <p class="sub">{{ calc_requests }}+ {{ t.sup_proof_stat1 }} &middot; {{ total_suppliers }}+ {{ t.sup_proof_stat2 }} &middot; {{ total_countries }} {{ t.sup_proof_stat3 }}</p>
    <div class="sup-proof-grid">
      <div class="sup-proof-card">
        <h3 style="font-size:1rem;margin-bottom:0.5rem">{{ t.sup_proof_point1_h3 }}</h3>
        <p style="font-size:0.875rem;color:#475569;line-height:1.6;margin:0">{{ t.sup_proof_point1_p }}</p>
      </div>
      <div class="sup-proof-card">
        <h3 style="font-size:1rem;margin-bottom:0.5rem">{{ t.sup_proof_point2_h3 }}</h3>
        <p style="font-size:0.875rem;color:#475569;line-height:1.6;margin:0">{{ t.sup_proof_point2_p }}</p>
      </div>
    </div>
  </section>

  <!-- ROI callout — bridge to pricing -->
  <div class="sup-roi" style="margin-bottom:0">
    <p>{{ t.sup_roi_line }}</p>
  </div>

  <!-- Pricing -->
  <section id="pricing" class="sup-section">
    <!-- Hidden radio inputs MUST come before the elements they control (CSS sibling selector) -->
    <input type="radio" id="billing-monthly" name="billing" checked>
    <input type="radio" id="billing-yearly" name="billing">

    <h2>{{ t.sup_pricing_h2 }}</h2>
    <p class="sub">{{ t.sup_pricing_sub }}</p>

    <div class="billing-toggle">
      <label for="billing-monthly">{{ t.sup_billing_monthly }}</label>
      <label for="billing-yearly">{{ t.sup_billing_yearly }} <span class="save-badge">{{ t.sup_billing_save }}</span></label>
    </div>

    <div class="pricing-grid">
      <!-- Basic — Free -->
      <div class="pricing-card">
        <h3>{{ t.sup_basic_name }}</h3>
        <div class="price-monthly">
          <div class="price">{{ t.sup_basic_free_label }}</div>
        </div>
        <div class="price-yearly">
          <div class="price">{{ t.sup_basic_free_label }}</div>
        </div>
        <div class="credits-inc credits-inc--muted">{{ t.sup_basic_dir }}</div>
        <ul>
          <li>{{ t.sup_basic_f1 }}</li>
          <li>{{ t.sup_basic_f2 }}</li>
          <li>{{ t.sup_basic_f3 }}</li>
          <li>{{ t.sup_basic_f4 }}</li>
          <li>{{ t.sup_basic_f5 }}</li>
          <li>{{ t.sup_basic_f6 }}</li>
        </ul>
        <a href="{{ url_for('suppliers.signup') }}?plan=supplier_basic" class="btn-outline" style="display:block;text-align:center">{{ t.sup_basic_cta }}</a>
        <p class="pricing-card__eur-note">{{ t.sup_pricing_eur_note }}</p>
      </div>

      <!-- Growth -->
      <div class="pricing-card pricing-card--highlight">
        <div class="pricing-card__popular">{{ t.sup_growth_popular }}</div>
        <h3>{{ t.sup_growth_name }}</h3>
        <div class="price-monthly">
          <div class="price">&euro;199 <span>/mo</span></div>
        </div>
        <div class="price-yearly">
          <div class="price">&euro;150 <span>/mo</span></div>
          <span class="yearly-note">{{ t.sup_yearly_note_growth }}</span>
        </div>
        <div class="credits-inc">{{ t.sup_growth_credits }}</div>
        <ul>
          <li>{{ t.sup_growth_f1 }}</li>
          <li>{{ t.sup_growth_f2 }}</li>
          <li>{{ t.sup_growth_f3 }}</li>
          <li>{{ t.sup_growth_f4 }}</li>
          <li>{{ t.sup_growth_f5 }}</li>
          <li>{{ t.sup_growth_f6 }}</li>
        </ul>
        <a href="{{ url_for('suppliers.signup') }}?plan=supplier_growth" class="btn" style="display:block;text-align:center">{{ t.sup_growth_cta }}</a>
        <p class="pricing-card__eur-note">{{ t.sup_pricing_eur_note }}</p>
      </div>

      <!-- Pro -->
      <div class="pricing-card">
        <h3>{{ t.sup_pro_name }}</h3>
        <div class="price-monthly">
          <div class="price">&euro;499 <span>/mo</span></div>
        </div>
        <div class="price-yearly">
          <div class="price">&euro;375 <span>/mo</span></div>
          <span class="yearly-note">{{ t.sup_yearly_note_pro }}</span>
        </div>
        <div class="credits-inc">{{ t.sup_pro_credits }}</div>
        <ul>
          <li>{{ t.sup_pro_f1 }}</li>
          <li>{{ t.sup_pro_f2 }}</li>
          <li>{{ t.sup_pro_f3 }}</li>
          <li>{{ t.sup_pro_f4 }}</li>
          <li>{{ t.sup_pro_f5 }}</li>
          <li>{{ t.sup_pro_f6 }}</li>
        </ul>
        <a href="{{ url_for('suppliers.signup') }}?plan=supplier_pro" class="btn-outline" style="display:block;text-align:center">{{ t.sup_pro_cta }}</a>
        <p class="pricing-card__eur-note">{{ t.sup_pricing_eur_note }}</p>
      </div>
    </div>

    <!-- Credits-only callout -->
    <div class="sup-credits-only">
      <p>{{ t.sup_credits_only_pre }} <a href="{{ url_for('suppliers.signup') }}?plan=supplier_basic#credits">{{ t.sup_credits_only_cta }}</a></p>
    </div>

    <!-- Boost add-ons -->
    <h3 style="text-align:center;font-size:1rem;margin-top:2rem;margin-bottom:0.25rem">{{ t.sup_boosts_h3 }}</h3>
    <p style="text-align:center;color:#64748B;font-size:0.8125rem;margin-bottom:1rem">{{ t.sup_boosts_sub }}</p>
    <div class="boost-grid">
      <div class="boost-card">
        <strong>{{ t.sup_boost_logo }}</strong>
        <span class="boost-price">&euro;29/mo</span>
      </div>
      <div class="boost-card">
        <strong>{{ t.sup_boost_highlight }}</strong>
        <span class="boost-price">&euro;39/mo</span>
      </div>
      <div class="boost-card">
        <strong>{{ t.sup_boost_verified }}</strong>
        <span class="boost-price">&euro;49/mo</span>
      </div>
      <div class="boost-card">
        <strong>{{ t.sup_boost_sticky }}</strong>
        <span class="boost-price">&euro;79/wk or &euro;199/mo</span>
      </div>
      <div class="boost-card">
        <strong>{{ t.sup_boost_color }}</strong>
        <span class="boost-price">&euro;59/mo</span>
      </div>
    </div>
  </section>

  <!-- Comparison table -->
  <section class="sup-section">
    <h2>{{ t.sup_cmp_h2 }}</h2>
    <p class="sub">{{ t.sup_cmp_sub }}</p>
    <div class="comparison-wrap">
      <table class="comparison-table">
        <thead>
          <tr>
            <th></th>
            <th class="col-us">{{ t.sup_cmp_th_us }}</th>
            <th>{{ t.sup_cmp_th_tradeshow }}</th>
            <th>{{ t.sup_cmp_th_ads }}</th>
            <th>{{ t.sup_cmp_th_cold }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ t.sup_cmp_row1 }}</td>
            <td class="col-us">&euro;1,799/yr <small style="font-weight:400;font-size:0.6875rem">(yearly plan)</small></td>
            <td>&euro;10,000+/event</td>
            <td>&euro;5,000+/yr*</td>
            <td>&euro;600/yr</td>
          </tr>
          <tr>
            <td>{{ t.sup_cmp_row2 }}</td>
            <td class="col-us">{{ t.sup_cmp_q1 }}</td>
            <td>{{ t.sup_cmp_q2 }}</td>
            <td>{{ t.sup_cmp_q3 }}</td>
            <td>{{ t.sup_cmp_q4 }}</td>
          </tr>
          <tr>
            <td>{{ t.sup_cmp_row3 }}</td>
            <td class="col-us">{{ t.sup_cmp_c1 }}</td>
            <td class="dash">&mdash;</td>
            <td class="dash">{{ t.sup_cmp_c2 }}</td>
            <td class="dash">&mdash;</td>
          </tr>
          <tr>
            <td>{{ t.sup_cmp_row4 }}</td>
            <td class="col-us">{{ t.sup_cmp_d1 }}</td>
            <td>{{ t.sup_cmp_d2 }}</td>
            <td>{{ t.sup_cmp_d3 }}</td>
            <td>{{ t.sup_cmp_d3 }}</td>
          </tr>
          <tr>
            <td>{{ t.sup_cmp_row5 }}</td>
            <td class="col-us">{{ t.sup_cmp_t1 }}</td>
            <td>{{ t.sup_cmp_t2 }}</td>
            <td>{{ t.sup_cmp_t3 }}</td>
            <td>{{ t.sup_cmp_t4 }}</td>
          </tr>
          <tr>
            <td>{{ t.sup_cmp_row6 }}</td>
            <td class="col-us check">&#10003; {{ t.sup_cmp_m1 }}</td>
            <td class="dash">&mdash;</td>
            <td class="dash">&mdash;</td>
            <td class="dash">&mdash;</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p class="comparison-footnote">{{ t.sup_cmp_footnote }}</p>
  </section>

  <!-- FAQ -->
  <section class="sup-section">
    <h2>{{ t.sup_faq_h2 }}</h2>
    <div class="sup-faq">
      <details>
        <summary>{{ t.sup_faq_q3 }}</summary>
        <p>{{ t.sup_faq_a3 }}</p>
      </details>
      <details>
        <summary>{{ t.sup_faq_q1 }}</summary>
        <p>{{ t.sup_faq_a1_pre }} <a href="{{ url_for('directory.index') }}">{{ t.sup_faq_dir_link }}</a> {{ t.sup_faq_a1_post }}</p>
      </details>
      <details>
        <summary>{{ t.sup_faq_q2 }}</summary>
        <p>{{ t.sup_faq_a2 }}</p>
      </details>
      <details>
        <summary>{{ t.sup_faq_q4 }}</summary>
        <p>{{ t.sup_faq_a4 }}</p>
      </details>
      <details>
        <summary>{{ t.sup_faq_q5 }}</summary>
        <p>{{ t.sup_faq_a5 }}</p>
      </details>
      <details>
        <summary>{{ t.sup_faq_q6 }}</summary>
        <p>{{ t.sup_faq_a6 }}</p>
      </details>
      <details>
        <summary>{{ t.sup_faq_q7 }}</summary>
        <p>{{ t.sup_faq_a7 }}</p>
      </details>
      <details>
        <summary>{{ t.sup_faq_q8 }}</summary>
        <p>{{ t.sup_faq_a8_pre }} {{ total_countries }} {{ t.sup_faq_a8_post }}</p>
      </details>
      <details>
        <summary>{{ t.sup_faq_q9 }}</summary>
        <p>{{ t.sup_faq_a9 }}</p>
      </details>
      <details>
        <summary>{{ t.sup_faq_q10 }}</summary>
        <p>{{ t.sup_faq_a10_pre }} {{ config.EMAIL_FROM }} {{ t.sup_faq_a10_post }}</p>
      </details>
    </div>
  </section>

  <!-- Final CTA -->
  <section class="sup-cta">
    <h2>{{ t.sup_cta_h2 }}</h2>
    <p>{{ t.sup_cta_p }}</p>
    <a href="{{ url_for('suppliers.signup') }}" class="btn">{{ t.sup_cta_btn }}</a>
  </section>

</main>
{% endblock %}
