{% extends "base.html" %}

{% block title %}{% trans %}Pricing Plans{% endtrans %} | {{ site.site_name if site is defined and site.site_name else 'OnlineConvert' }}{% endblock %}

{% block description %}{% trans %}Compare our plans and pick the one that fits you best. Convert files, use advanced tools, and get more with a paid plan.{% endtrans %}{% endblock %}

{% block extra_head %}
<style>
  /* ── Sticky column label ── */
  .col-label {
    position: sticky;
    left: 0;
    z-index: 9;
    background: #ffffff;
  }
  .dark .col-label { background: #111827; }

  /* ── Table header: solid backgrounds (JS handles the sticky translateY) ── */
  .tbl-head-cell {
    background: #e2e8f0;
    border-bottom: 3px solid #94a3b8;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
  }
  .dark .tbl-head-cell {
    background: #0f172a;
    border-bottom-color: #334155;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  }
  .tbl-head-cell.col-highlighted { background: #c7d2fe; }
  .dark .tbl-head-cell.col-highlighted { background: #1e1b4b; }
  .tbl-head-cell.col-current { background: #bbf7d0; }
  .dark .tbl-head-cell.col-current { background: #052e16; }

  /* thead stacking context so translateY overlaps tbody rows correctly */
  #pricing-comparison-table thead {
    position: relative;
    z-index: 20;
    will-change: transform;
  }
  /* .col-label keeps horizontal sticky (scroll left) — works fine with overflow-x:auto */ 

  /* ── Column highlight stripe ── */
  .col-highlighted-cell { background: #eef2ff; }
  .dark .col-highlighted-cell { background: rgba(99,102,241,0.08); }
  .col-current-cell { background: #f0fdf4; }
  .dark .col-current-cell { background: rgba(34,197,94,0.06); }

  /* ── Plan card hover ── */
  .plan-card { transition: transform .22s ease, box-shadow .22s ease; }
  .plan-card:hover { transform: translateY(-4px); }

  /* ── Pricing page: restore white text in intentionally-dark sections (light mode) ── */

  /* Hero section — dark navy gradient background */
  html:not(.dark) #pricing-hero h1.text-white { color: #fff !important; }
  html:not(.dark) #pricing-hero p.text-white,
  html:not(.dark) #pricing-hero p.text-slate-300 { color: #cbd5e1 !important; }
  html:not(.dark) #pricing-hero .text-indigo-300 { color: #a5b4fc !important; }
  html:not(.dark) #pricing-hero .text-white:not(.text-transparent) { color: #fff !important; }
  /* Monthly/Yearly toggle labels */
  html:not(.dark) #pricing-hero span.font-semibold.text-white { color: #fff !important; }
  html:not(.dark) #pricing-hero .text-emerald-300 { color: #6ee7b7 !important; }

  /* Why upgrade strip — indigo-to-violet gradient */
  html:not(.dark) #why-upgrade h2.text-white { color: #fff !important; }
  html:not(.dark) #why-upgrade h3.text-white { color: #fff !important; }
  html:not(.dark) #why-upgrade p.text-indigo-200 { color: #c7d2fe !important; }

  /* Pro plan highlighted card — restore white/light text on purple gradient */
  html:not(.dark) .plan-card[style*="linear-gradient"] h2.text-white { color: #fff !important; }
  html:not(.dark) .plan-card[style*="linear-gradient"] div.text-white { color: #fff !important; }
  html:not(.dark) .plan-card[style*="linear-gradient"] span.text-indigo-200 { color: #c7d2fe !important; }
  html:not(.dark) .plan-card[style*="linear-gradient"] li.text-indigo-100 { color: #e0e7ff !important; }
  html:not(.dark) .plan-card[style*="linear-gradient"] p.text-indigo-200 { color: #c7d2fe !important; }

  /* ── FAQ accordion ── */
  .faq-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .faq-body.open { max-height: 800px; }
  .faq-icon { transition: transform .25s ease; }
  .faq-open .faq-icon { transform: rotate(45deg); }

  /* ── Section separator ── */
  .section-sep td { padding-top:.75rem; padding-bottom:.75rem; }
</style>
{% endblock %}

{% block content %}

{# ── Reusable macros ──────────────────────────────────────────────────────── #}
{% set user_plan_id = current_user.plan_id if current_user else 0 %}

{% macro cell_bg(plan, loop) %}
{%- if loop.last and plan.price_monthly > 0 %}col-highlighted-cell
{%- elif user_plan_id == plan.id %}col-current-cell{% endif -%}
{% endmacro %}

{% macro limit_cell(v, plan, plan_loop) %}
<td class="px-4 py-3 text-center {{ cell_bg(plan, plan_loop) }}">
  {% if v is none or v == '' %}
    <i class="fa fa-times-circle text-red-500 text-xl"></i>
  {% elif v | int == -1 %}
    <span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
  {% elif v | int == 0 %}
    <i class="fa fa-times-circle text-red-500 text-xl"></i>
  {% else %}
    <span class="font-semibold text-gray-900 dark:text-white">{{ v | int }}</span>
  {% endif %}
</td>
{% endmacro %}

{% macro bool_cell(v, plan, plan_loop) %}
<td class="px-4 py-3 text-center {{ cell_bg(plan, plan_loop) }}">
  {% if v %}
    <i class="fa fa-check-circle text-emerald-500 text-xl"></i>
  {% else %}
    <i class="fa fa-times-circle text-red-500 text-xl"></i>
  {% endif %}
</td>
{% endmacro %}

{% macro section_row(icon, label) %}
<tr class="section-sep bg-gray-50 dark:bg-gray-800/60 border-t border-gray-200 dark:border-gray-700">
  <td colspan="{{ plans|length + 1 }}" class="px-5 text-xs font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
    <i class="fa {{ icon }} mr-2 opacity-60"></i>{{ label }}
  </td>
</tr>
{% endmacro %}

<!-- ════════════════════════════════════════════════════════
     HERO
════════════════════════════════════════════════════════ -->
<section id="pricing-hero" class="relative overflow-hidden bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 pt-20 pb-28">
  <div class="absolute inset-0 pointer-events-none overflow-hidden">
    <div class="absolute -top-32 -left-32 w-[600px] h-[600px] rounded-full bg-indigo-600/20 blur-3xl"></div>
    <div class="absolute -bottom-32 -right-32 w-[500px] h-[500px] rounded-full bg-violet-600/20 blur-3xl"></div>
  </div>

  <div class="relative max-w-4xl mx-auto px-6 text-center">
    <span class="inline-block mb-5 px-4 py-1.5 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-xs font-semibold uppercase tracking-widest">
      {% trans %}Simple & Transparent Pricing{% endtrans %}
    </span>

    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight mb-5">
      {% trans %}Plans that grow{% endtrans %}<br>
      <span class="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">{% trans %}with your work{% endtrans %}</span>
    </h1>

    <p class="text-lg text-slate-300 max-w-2xl mx-auto mb-10">
      {% trans %}Start free and convert your first file in seconds. Upgrade any time to unlock larger files, faster queues, API access, cloud integrations, and team tools — with no hidden fees.{% endtrans %}
    </p>

    <!-- billing toggle -->
    <div class="inline-flex items-center gap-4 bg-white/10 rounded-full px-2 py-2 border border-white/10 mb-2">
      <span class="pl-3 text-sm font-semibold text-white">{% trans %}Monthly{% endtrans %}</span>
      <button id="billing-toggle" role="switch" aria-checked="false" data-months-a="1" data-months-b="12"
        class="relative w-14 h-7 rounded-full bg-white/20 border border-white/30 flex items-center cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-400 transition-colors">
        <span class="toggle-pill absolute left-1 w-5 h-5 rounded-full bg-white shadow transition-transform duration-300"></span>
      </button>
      <span class="pr-3 text-sm font-semibold text-white">
        {% trans %}Yearly{% endtrans %}
        {% if yearly_disc_pct > 0 %}
        <span class="ml-1.5 text-xs bg-emerald-500/30 border border-emerald-400/40 text-emerald-300 px-2 py-0.5 rounded-full font-semibold">{% trans %}Save{% endtrans %} {{ yearly_disc_pct }}%</span>
        {% endif %}
      </span>
    </div>
  </div>
</section>

<!-- ════════════════════════════════════════════════════════
     PLAN CARDS (pulled up over hero)
════════════════════════════════════════════════════════ -->
<section class="max-w-6xl mx-auto px-4 -mt-16 pb-6 relative z-10">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-{% if plans|length <= 3 %}{{ plans|length }}{% else %}4{% endif %} gap-6">
    {% for plan in plans %}
    {% set is_current     = (user_plan_id == plan.id) %}
    {% set is_highlighted = loop.last and plan.price_monthly > 0 %}
    {% set monthly_price  = plan.price_monthly | float %}
    {% set yearly_per_mo  = plan._yearly_per_mo | float %}

    <div class="relative flex flex-col rounded-2xl plan-card
        {% if is_highlighted %}shadow-2xl ring-2 ring-white/30
        {% elif is_current    %}bg-white dark:bg-gray-900 shadow-lg ring-2 ring-emerald-500/60
        {% else               %}bg-white dark:bg-gray-900 shadow-md ring-1 ring-gray-200 dark:ring-gray-700{% endif %}"
        {% if is_highlighted %}style="background:linear-gradient(160deg,#8b5cf6 0%,#7c3aed 55%,#5b21b6 100%);border:2px solid rgba(255,255,255,0.18);box-shadow:0 0 40px rgba(124,58,237,0.45);"{% endif %}
        data-plan-id="{{ plan.id }}"
        data-monthly="{{ monthly_price }}"
        data-yearly="{{ yearly_per_mo }}">

      {% if is_highlighted %}
      <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 whitespace-nowrap">
        <span class="bg-white text-indigo-600 text-xs font-extrabold px-4 py-1 rounded-full shadow-lg uppercase tracking-wide">
          <i class="fa fa-star mr-1 text-yellow-400"></i>{% trans %}Most Popular{% endtrans %}
        </span>
      </div>
      {% elif is_current %}
      <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 whitespace-nowrap">
        <span class="bg-emerald-500 text-white text-xs font-bold px-4 py-1 rounded-full shadow">
          <i class="fa fa-check mr-1"></i>{% trans %}Current Plan{% endtrans %}
        </span>
      </div>
      {% endif %}

      <div class="p-6 flex-1 flex flex-col">
        <!-- plan name -->
        <div class="mb-5">
          <h2 class="text-lg font-bold {% if is_highlighted %}text-white{% else %}text-gray-900 dark:text-white{% endif %} mb-1">{{ plan.name }}</h2>
          {% if monthly_price == 0 %}
          <p class="text-sm {% if is_highlighted %}text-indigo-200{% else %}text-gray-500 dark:text-gray-400{% endif %}">{% trans %}Great for occasional use. No credit card required.{% endtrans %}</p>
          {% elif monthly_price < 10 %}
          <p class="text-sm {% if is_highlighted %}text-indigo-200{% else %}text-gray-500 dark:text-gray-400{% endif %}">{% trans %}Perfect for freelancers and regular users.{% endtrans %}</p>
          {% elif monthly_price < 30 %}
          <p class="text-sm {% if is_highlighted %}text-indigo-200{% else %}text-gray-500 dark:text-gray-400{% endif %}">{% trans %}Ideal for professionals with demanding workflows.{% endtrans %}</p>
          {% else %}
          <p class="text-sm {% if is_highlighted %}text-indigo-200{% else %}text-gray-500 dark:text-gray-400{% endif %}">{% trans %}Built for teams and power users at scale.{% endtrans %}</p>
          {% endif %}
        </div>

        <!-- price display -->
        <div class="mb-5">
          {% if monthly_price == 0 %}
          <div class="text-4xl font-extrabold {% if is_highlighted %}text-white{% else %}text-gray-900 dark:text-white{% endif %}">{% trans %}Free{% endtrans %}</div>
          <p class="text-xs {% if is_highlighted %}text-indigo-200{% else %}text-gray-400 dark:text-gray-500{% endif %} mt-1">{% trans %}Always free, forever{% endtrans %}</p>
          {% else %}
          <div class="flex items-end gap-1">
            <span class="text-4xl font-extrabold {% if is_highlighted %}text-white{% else %}text-gray-900 dark:text-white{% endif %} card-price">${{ monthly_price }}</span>
            <span class="{% if is_highlighted %}text-indigo-200{% else %}text-gray-500 dark:text-gray-400{% endif %} text-sm mb-1.5">/{% trans %}mo{% endtrans %}</span>
          </div>
          <p class="text-xs {% if is_highlighted %}text-indigo-200{% else %}text-gray-400 dark:text-gray-500{% endif %} mt-1 card-billing-note">{% trans %}Billed monthly{% endtrans %}</p>
          {% endif %}
        </div>

        <!-- highlights -->
        <ul class="space-y-2 mb-6 flex-1 text-sm">
          <li class="flex items-start gap-2 {% if is_highlighted %}text-indigo-100{% else %}text-gray-600 dark:text-gray-300{% endif %}">
            <i class="fa fa-check-circle {% if is_highlighted %}text-indigo-200{% else %}text-emerald-500{% endif %} mt-0.5 flex-shrink-0"></i>
            {% if plan.max_files_per_day | int <= 0 %}
              {% trans %}Unlimited file conversions / day{% endtrans %}
            {% else %}
              <strong>{{ plan.max_files_per_day }}</strong>&nbsp;{% trans %}conversions / day{% endtrans %}
            {% endif %}
          </li>
          <li class="flex items-start gap-2 {% if is_highlighted %}text-indigo-100{% else %}text-gray-600 dark:text-gray-300{% endif %}">
            <i class="fa fa-check-circle {% if is_highlighted %}text-indigo-200{% else %}text-emerald-500{% endif %} mt-0.5 flex-shrink-0"></i>
            {% if plan.max_file_size_mb | int <= 0 %}
              {% trans %}No file size limit{% endtrans %}
            {% else %}
              {% trans %}Up to{% endtrans %} <strong>{{ plan.max_file_size_mb }} MB</strong>&nbsp;{% trans %}per file{% endtrans %}
            {% endif %}
          </li>
          {% if plan.api_enabled %}
          <li class="flex items-start gap-2 {% if is_highlighted %}text-indigo-100{% else %}text-gray-600 dark:text-gray-300{% endif %}">
            <i class="fa fa-check-circle {% if is_highlighted %}text-indigo-200{% else %}text-emerald-500{% endif %} mt-0.5 flex-shrink-0"></i>
            {% trans %}Full REST API access{% endtrans %}
          </li>
          {% endif %}
          {% if plan.cloud_export_google_drive or plan.cloud_export_dropbox or plan.cloud_export_onedrive %}
          <li class="flex items-start gap-2 {% if is_highlighted %}text-indigo-100{% else %}text-gray-600 dark:text-gray-300{% endif %}">
            <i class="fa fa-check-circle {% if is_highlighted %}text-indigo-200{% else %}text-emerald-500{% endif %} mt-0.5 flex-shrink-0"></i>
            {% trans %}Cloud export: Drive, Dropbox, OneDrive{% endtrans %}
          </li>
          {% endif %}
          {% if plan.share_link_enabled %}
          <li class="flex items-start gap-2 {% if is_highlighted %}text-indigo-100{% else %}text-gray-600 dark:text-gray-300{% endif %}">
            <i class="fa fa-check-circle {% if is_highlighted %}text-indigo-200{% else %}text-emerald-500{% endif %} mt-0.5 flex-shrink-0"></i>
            {% trans %}Shareable download links{% endtrans %}{% if plan.share_link_password %} + {% trans %}password protection{% endtrans %}{% endif %}
          </li>
          {% endif %}
          {% if plan.max_teams | int > 0 %}
          <li class="flex items-start gap-2 {% if is_highlighted %}text-indigo-100{% else %}text-gray-600 dark:text-gray-300{% endif %}">
            <i class="fa fa-check-circle {% if is_highlighted %}text-indigo-200{% else %}text-emerald-500{% endif %} mt-0.5 flex-shrink-0"></i>
            {% if plan.max_teams | int == 1 %}{% trans %}1 team{% endtrans %}{% else %}{{ plan.max_teams | int }} {% trans %}teams{% endtrans %}{% endif %},
            {% trans %}up to{% endtrans %} {{ plan.max_members_per_team | int }} {% trans %}members each{% endtrans %}
          </li>
          {% endif %}
          {% if plan.batch_archive_download %}
          <li class="flex items-start gap-2 {% if is_highlighted %}text-indigo-100{% else %}text-gray-600 dark:text-gray-300{% endif %}">
            <i class="fa fa-check-circle {% if is_highlighted %}text-indigo-200{% else %}text-emerald-500{% endif %} mt-0.5 flex-shrink-0"></i>
            {% trans %}Batch ZIP download{% endtrans %}
          </li>
          {% endif %}
          {% if plan.queue | int > 0 %}
          <li class="flex items-start gap-2 {% if is_highlighted %}text-indigo-100{% else %}text-gray-600 dark:text-gray-300{% endif %}">
            <i class="fa fa-bolt {% if is_highlighted %}text-yellow-300{% else %}text-amber-500{% endif %} mt-0.5 flex-shrink-0"></i>
            {% trans %}High-priority conversion queue{% endtrans %}
          </li>
          {% endif %}
        </ul>

        <!-- CTA -->
        {% if is_current %}
        <span class="block w-full text-center py-3 rounded-xl font-semibold text-sm
          {% if is_highlighted %}bg-white/20 text-white border border-white/30{% else %}bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800{% endif %}">
          <i class="fa fa-check mr-1.5"></i>{% trans %}Current Plan{% endtrans %}
        </span>
        {% elif monthly_price == 0 %}
        <a href="{{ url_for('user_register') if not current_user else url_for('dashboard') }}"
           class="block w-full text-center py-3 rounded-xl font-semibold text-sm transition-colors
           {% if is_highlighted %}bg-white/20 text-white hover:bg-white/30 border border-white/30{% else %}bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700{% endif %}">
          {% if current_user %}{% trans %}Go to Dashboard{% endtrans %}{% else %}{% trans %}Get started free{% endtrans %}{% endif %}
        </a>
        {% else %}
        <a href="{{ url_for('checkout_select', plan_id=plan.id) if current_user else url_for('user_register') ~ '?plan=' ~ plan.id }}"
           class="block w-full text-center py-3 rounded-xl font-semibold text-sm transition-all duration-200 plan-cta-btn
           {% if is_highlighted %}bg-white text-indigo-600 hover:bg-indigo-50 shadow-md{% else %}bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm{% endif %}">
          {% trans %}Upgrade Now{% endtrans %} <i class="fa fa-arrow-right ml-1 text-xs"></i>
        </a>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- trust badges under cards -->
  <div class="flex flex-wrap justify-center gap-6 mt-8 text-sm text-gray-500 dark:text-gray-400">
    <span><i class="fa fa-lock text-indigo-400 mr-1.5"></i>{% trans %}Secure payments{% endtrans %}</span>
    <span><i class="fa fa-rotate-left text-indigo-400 mr-1.5"></i>{% trans %}Cancel any time{% endtrans %}</span>
    <span><i class="fa fa-headset text-indigo-400 mr-1.5"></i>{% trans %}Priority support on paid plans{% endtrans %}</span>
    <span><i class="fa fa-bolt text-indigo-400 mr-1.5"></i>{% trans %}Instant activation{% endtrans %}</span>
    <span><i class="fa fa-shield-halved text-indigo-400 mr-1.5"></i>{% trans %}No hidden fees{% endtrans %}</span>
  </div>
</section>

<!-- ════════════════════════════════════════════════════════
     FEATURE COMPARISON TABLE
════════════════════════════════════════════════════════ -->
<section class="max-w-6xl mx-auto px-4 py-12">
  <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white text-center mb-2">
    {% trans %}Full Feature Comparison{% endtrans %}
  </h2>
  <p class="text-center text-gray-500 dark:text-gray-400 mb-8 max-w-xl mx-auto">
    {% trans %}Every feature, side by side. No marketing speak — just the facts about what you get on each plan.{% endtrans %}
  </p>

  <div class="rounded-2xl border border-gray-200 dark:border-gray-700 shadow-lg" style="overflow-x:auto;overflow-y:clip;">
    <table id="pricing-comparison-table" class="w-full text-sm min-w-[640px] border-collapse">

      <!-- ── STICKY HEADER ── -->
      <thead>
        <tr>
          <th class="tbl-head-cell col-label px-5 py-4 text-left text-gray-500 dark:text-gray-400 font-semibold w-56">
            {% trans %}Feature{% endtrans %}
          </th>
          {% for plan in plans %}
          {% set h_class = 'col-highlighted' if (loop.last and plan.price_monthly > 0) else ('col-current' if user_plan_id == plan.id else '') %}
          <th class="tbl-head-cell {{ h_class }} px-4 py-4 text-center font-bold text-sm
              {% if loop.last and plan.price_monthly > 0 %}text-indigo-600 dark:text-indigo-400
              {% elif user_plan_id == plan.id %}text-emerald-600 dark:text-emerald-400
              {% else %}text-gray-900 dark:text-white{% endif %}">
            {{ plan.name }}
            {% if user_plan_id == plan.id %}
            <div class="text-xs font-normal text-emerald-500 mt-0.5">{% trans %}Your plan{% endtrans %}</div>
            {% elif loop.last and plan.price_monthly > 0 %}
            <div class="text-xs font-normal text-indigo-400 mt-0.5">⭐ {% trans %}Most popular{% endtrans %}</div>
            {% elif plan.price_monthly == 0 %}
            <div class="text-xs font-normal text-gray-400 dark:text-gray-500 mt-0.5">{% trans %}Free{% endtrans %}</div>
            {% else %}
            <div class="text-xs font-normal text-gray-400 dark:text-gray-500 mt-0.5">${{ plan.price_monthly }}/{% trans %}mo{% endtrans %}</div>
            {% endif %}
          </th>
          {% endfor %}
        </tr>
      </thead>

      <tbody class="divide-y divide-gray-100 dark:divide-gray-800">

        <!-- ── CONVERSIONS & FILES ──────────────────────────────────────── -->
        {{ section_row('fa-file-arrow-up', 'Conversions & Files') }}

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            {% trans %}File conversions / day{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Total jobs per calendar day{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% set v = plan.max_files_per_day | int %}
            {% if v <= 0 %}<span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% else %}<span class="font-semibold text-gray-900 dark:text-white">{{ v }}</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            {% trans %}Max file size{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Per uploaded file{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center font-semibold text-gray-900 dark:text-white {{ cell_bg(plan, loop) }}">
            {% if plan.max_file_size_mb | int <= 0 %}
              <span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% else %}
              {{ plan.max_file_size_mb }} MB
            {% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            {% trans %}Files kept after conversion{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}How long your results stay available{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center text-gray-700 dark:text-gray-300 {{ cell_bg(plan, loop) }}">
            {% set h = plan.auto_delete_hours | int %}
            {% if h <= 0 %}<span class="text-emerald-600 dark:text-emerald-400 font-semibold">{% trans %}Never deleted{% endtrans %}</span>
            {% elif h < 24 %}<span class="font-medium">{{ h }}{% trans %}h{% endtrans %}</span>
            {% else %}<span class="font-medium">{{ (h / 24) | int }}&nbsp;{% trans %}days{% endtrans %}</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Conversion history{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Stored in your dashboard{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% set v = plan.max_conversions_stored | int %}
            {% if v <= 0 %}<span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% else %}<span class="font-semibold text-gray-900 dark:text-white">{{ v }}</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Max files per batch{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Files per single conversion job{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% set v = plan.max_batch_files %}
            {% if v is none or v == '' or v | int <= 0 %}
              <span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% else %}<span class="font-semibold text-gray-900 dark:text-white">{{ v | int }}</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Processing time limit{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Max CPU time per job{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% set v = plan.max_processing_seconds %}
            {% if v is none or v == '' or v | int <= 0 %}
              <span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% else %}<span class="font-semibold text-gray-900 dark:text-white">{{ v | int }}s</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Queue priority{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}How fast your job starts{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% set q = plan.queue | int %}
            {% if q == 0 %}<span class="text-gray-500 dark:text-gray-400">{% trans %}Standard{% endtrans %}</span>
            {% elif q == 1 %}<span class="font-semibold text-amber-600 dark:text-amber-400"><i class="fa fa-bolt mr-1 text-xs"></i>{% trans %}High{% endtrans %}</span>
            {% else %}<span class="font-semibold text-amber-500 dark:text-amber-300"><i class="fa fa-bolt mr-1 text-xs"></i>{% trans %}Priority{% endtrans %}</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Batch ZIP download{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Download all outputs as one archive{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.batch_archive_download, plan, loop) }}{% endfor %}
        </tr>

        <!-- ── DAILY TOOL LIMITS ────────────────────────────────────────── -->
        {{ section_row('fa-wrench', 'Daily Tool Limits') }}

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            <i class="fa fa-file-pdf text-red-400 mr-1"></i>{% trans %}PDF operations / day{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Compress, merge, split, convert PDF{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ limit_cell(plan.max_pdf_per_day, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            <i class="fa fa-hashtag text-violet-400 mr-1"></i>{% trans %}Hash tool ops / day{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}MD5, SHA, CRC32, and more{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ limit_cell(plan.max_hash_per_day, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            <i class="fa fa-camera text-sky-400 mr-1"></i>{% trans %}Screenshots / day{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Web page screenshot capture{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ limit_cell(plan.max_screenshot_per_day, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            <i class="fa fa-wand-magic-sparkles text-pink-400 mr-1"></i>{% trans %}Background removals / day{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}AI-powered image background removal{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ limit_cell(plan.max_bg_remove_per_day, plan, loop) }}{% endfor %}
        </tr>

        <!-- ── NOTIFICATIONS ────────────────────────────────────────────── -->
        {{ section_row('fa-bell', 'Notifications') }}

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Email job notifications{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Get emailed when your file is ready{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.job_notify_email, plan, loop) }}{% endfor %}
        </tr>

        <!-- ── API ACCESS ───────────────────────────────────────────────── -->
        {{ section_row('fa-code', 'API Access') }}

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}REST API enabled{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Integrate conversions into your own apps{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.api_enabled, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}API calls / day{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Total programmatic requests per day{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% if not plan.api_enabled %}
              <i class="fa fa-times-circle text-red-500 text-xl"></i>
            {% elif plan.api_calls_per_day | int <= 0 %}
              <span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% else %}
              <span class="font-semibold text-gray-900 dark:text-white">{{ plan.api_calls_per_day | int }}</span>
            {% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}API rate limit{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Requests per minute{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% if not plan.api_enabled %}
              <i class="fa fa-times-circle text-red-500 text-xl"></i>
            {% elif plan.api_calls_per_minute | int <= 0 %}
              <span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% else %}
              <span class="font-semibold text-gray-900 dark:text-white">{{ plan.api_calls_per_minute | int }}/{% trans %}min{% endtrans %}</span>
            {% endif %}
          </td>
          {% endfor %}
        </tr>

        <!-- ── TEAMS ────────────────────────────────────────────────────── -->
        {{ section_row('fa-users', 'Teams & Collaboration') }}

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Teams{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Workspaces shared with your colleagues{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% set v = plan.max_teams | int %}
            {% if v < 0 %}<span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% elif v == 0 %}<i class="fa fa-times-circle text-red-500 text-xl"></i>
            {% else %}<span class="font-semibold text-gray-900 dark:text-white">{{ v }}</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Sub-teams per team{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Nested departments or projects{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% set v = plan.max_sub_teams | int %}
            {% if v < 0 %}<span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% elif v == 0 %}<i class="fa fa-times-circle text-red-500 text-xl"></i>
            {% else %}<span class="font-semibold text-gray-900 dark:text-white">{{ v }}</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Members per team{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Users invited to each workspace{% endtrans %}</div>
          </td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% set v = plan.max_members_per_team | int %}
            {% if v < 0 %}<span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% elif v == 0 %}<i class="fa fa-times-circle text-red-500 text-xl"></i>
            {% else %}<span class="font-semibold text-gray-900 dark:text-white">{{ v }}</span>{% endif %}
          </td>
          {% endfor %}
        </tr>

        <!-- ── CLOUD EXPORT ─────────────────────────────────────────────── -->
        {{ section_row('fa-cloud-arrow-up', 'Cloud Export') }}

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            <i class="fab fa-google-drive text-yellow-500 mr-1"></i> Google Drive
            <div class="text-xs text-gray-400 font-normal">{% trans %}Send converted files directly to Drive{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.cloud_export_google_drive, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            <i class="fab fa-dropbox text-blue-500 mr-1"></i> Dropbox
            <div class="text-xs text-gray-400 font-normal">{% trans %}Save outputs straight to Dropbox{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.cloud_export_dropbox, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">
            <i class="fab fa-microsoft text-blue-600 mr-1"></i> OneDrive
            <div class="text-xs text-gray-400 font-normal">{% trans %}Export results to Microsoft OneDrive{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.cloud_export_onedrive, plan, loop) }}{% endfor %}
        </tr>

        <!-- ── SHARE LINKS ──────────────────────────────────────────────── -->
        {{ section_row('fa-share-nodes', 'Share Links') }}

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Share links{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Create public download links for your files{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.share_link_enabled, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Password protection{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Require a password to access your link{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.share_link_password, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}One-time links{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Link expires after first download{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.share_link_onetime, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Link expiry{% endtrans %}
            <div class="text-xs text-gray-400 font-normal">{% trans %}Set an automatic expiry date{% endtrans %}</div>
          </td>
          {% for plan in plans %}{{ bool_cell(plan.share_link_expiry, plan, loop) }}{% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Max link expiry{% endtrans %}</td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% if not plan.share_link_expiry %}
              <i class="fa fa-times-circle text-red-500 text-xl"></i>
            {% elif plan.share_link_max_expiry_hours | int == 0 %}
              <span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i></span>
            {% else %}
              <span class="font-medium text-gray-900 dark:text-white">{{ plan.share_link_max_expiry_hours | int }}h</span>
            {% endif %}
          </td>
          {% endfor %}
        </tr>

        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
          <td class="col-label px-5 py-3 text-gray-700 dark:text-gray-300 font-medium">{% trans %}Share links per job{% endtrans %}</td>
          {% for plan in plans %}
          <td class="px-4 py-3 text-center {{ cell_bg(plan, loop) }}">
            {% if not plan.share_link_enabled %}
              <i class="fa fa-times-circle text-red-500 text-xl"></i>
            {% elif plan.share_link_max_per_job | int == 0 %}
              <span class="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-semibold text-sm"><i class="fa fa-infinity text-xs"></i>{% trans %}Unlimited{% endtrans %}</span>
            {% else %}
              <span class="font-semibold text-gray-900 dark:text-white">{{ plan.share_link_max_per_job | int }}</span>
            {% endif %}
          </td>
          {% endfor %}
        </tr>

        <!-- ── CTA FOOTER ───────────────────────────────────────────────── -->
        <tr class="border-t-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
          <td class="col-label px-5 py-5 bg-gray-50 dark:bg-gray-800/50"></td>
          {% for plan in plans %}
          {% set is_current = (user_plan_id == plan.id) %}
          <td class="px-4 py-5 text-center {{ cell_bg(plan, loop) }}">
            {% if is_current %}
            <span class="inline-block px-4 py-2 rounded-xl bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 font-semibold text-sm border border-emerald-200 dark:border-emerald-800">
              <i class="fa fa-check mr-1"></i>{% trans %}Current{% endtrans %}
            </span>
            {% elif plan.price_monthly == 0 %}
            <a href="{{ url_for('user_register') if not current_user else url_for('dashboard') }}"
               class="inline-block px-4 py-2 rounded-xl bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-semibold text-sm hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors">
              {% if current_user %}{% trans %}Dashboard{% endtrans %}{% else %}{% trans %}Get started{% endtrans %}{% endif %}
            </a>
            {% else %}
            <a href="{{ url_for('checkout_select', plan_id=plan.id) if current_user else url_for('user_register') ~ '?plan=' ~ plan.id }}"
               class="inline-block px-4 py-2 rounded-xl font-semibold text-sm transition-colors plan-cta-btn
               {% if loop.last and plan.price_monthly > 0 %}bg-indigo-600 hover:bg-indigo-700 text-white{% else %}bg-gray-900 dark:bg-white text-white dark:text-gray-900 hover:bg-gray-700 dark:hover:bg-gray-200{% endif %}">
              {% trans %}Upgrade{% endtrans %}
            </a>
            {% endif %}
          </td>
          {% endfor %}
        </tr>

      </tbody>
    </table>
  </div>
</section>

<!-- ════════════════════════════════════════════════════════
     WHY UPGRADE STRIP
════════════════════════════════════════════════════════ -->
<section id="why-upgrade" class="bg-gradient-to-r from-indigo-600 to-violet-600 py-14 px-4">
  <div class="max-w-5xl mx-auto">
    <h2 class="text-2xl md:text-3xl font-extrabold text-white text-center mb-10">
      {% trans %}Why upgrade from Free?{% endtrans %}
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 text-center">
      <div class="bg-white/10 rounded-2xl p-5 border border-white/20">
        <i class="fa fa-gauge-high text-3xl text-white mb-3"></i>
        <h3 class="font-bold text-white mb-1">{% trans %}Bigger Files{% endtrans %}</h3>
        <p class="text-indigo-200 text-sm">{% trans %}Upload files up to 10× larger than the free tier. No more file size errors.{% endtrans %}</p>
      </div>
      <div class="bg-white/10 rounded-2xl p-5 border border-white/20">
        <i class="fa fa-bolt text-3xl text-white mb-3"></i>
        <h3 class="font-bold text-white mb-1">{% trans %}Priority Queue{% endtrans %}</h3>
        <p class="text-indigo-200 text-sm">{% trans %}Your jobs skip the line and start instantly, even at peak hours.{% endtrans %}</p>
      </div>
      <div class="bg-white/10 rounded-2xl p-5 border border-white/20">
        <i class="fa fa-code text-3xl text-white mb-3"></i>
        <h3 class="font-bold text-white mb-1">{% trans %}Full API Access{% endtrans %}</h3>
        <p class="text-indigo-200 text-sm">{% trans %}Automate conversions in your apps and workflows via REST API.{% endtrans %}</p>
      </div>
      <div class="bg-white/10 rounded-2xl p-5 border border-white/20">
        <i class="fa fa-users text-3xl text-white mb-3"></i>
        <h3 class="font-bold text-white mb-1">{% trans %}Team Tools{% endtrans %}</h3>
        <p class="text-indigo-200 text-sm">{% trans %}Shared workspaces, permissions, and collaboration for your whole team.{% endtrans %}</p>
      </div>
    </div>
  </div>
</section>

<!-- ════════════════════════════════════════════════════════
     FAQ
════════════════════════════════════════════════════════ -->
<section class="max-w-3xl mx-auto px-4 py-16">
  <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white text-center mb-2">
    {% trans %}Frequently Asked Questions{% endtrans %}
  </h2>
  <p class="text-center text-gray-500 dark:text-gray-400 mb-10">{% trans %}Everything you need to know before upgrading{% endtrans %}</p>

  <div class="space-y-3" id="faq-list">

    {% set faqs = [
      ('Can I cancel any time?',
       'Yes — you can cancel your subscription at any time from your dashboard. You will retain access to your paid plan features until the end of the current billing period. No questions asked.'),
      ('What happens to my files when I downgrade?',
       'Your converted files remain in your account history. However, if your new plan has a lower storage limit or shorter retention period, older files may be removed once the limit is reached.'),
      ('Is there a free trial for paid plans?',
       'All plans start immediately upon payment. The Free plan gives you full access to the core conversion features with no time limit — try it before you upgrade.'),
      ('Do I get API access on all plans?',
       'API access is available on paid plans only. Once enabled, you will find your API key in the dashboard under API Keys. Full documentation is available on the developers page.'),
      ('Can I switch plans later?',
       'Absolutely. You can upgrade or downgrade your plan at any time from the billing section of your dashboard. Upgrades take effect immediately; downgrades apply at the next renewal.'),
      ('Are payments secure?',
       'Yes. All payments are processed by Stripe or PayPal — two of the most trusted payment processors in the world. We never store your card details.'),
      ('What formats are supported?',
       'We support hundreds of formats across images, video, audio, documents, archives, and more — PDF, DOCX, MP4, MP3, PNG, ZIP, and many others. See the full list on our formats page.'),
    ] %}

    {% for q, a in faqs %}
    <div class="faq-item rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
      <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 py-4 text-left text-gray-900 dark:text-white font-semibold hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors">
        <span>{% trans %}{{ q }}{% endtrans %}</span>
        <i class="fa fa-plus faq-icon text-gray-400 flex-shrink-0 ml-3"></i>
      </button>
      <div class="faq-body px-5">
        <p class="pb-5 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">{% trans %}{{ a }}{% endtrans %}</p>
      </div>
    </div>
    {% endfor %}

  </div>
</section>

<!-- ════════════════════════════════════════════════════════
     BOTTOM CTA
════════════════════════════════════════════════════════ -->
<section class="bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700 py-14 px-4 text-center">
  <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-3">
    {% trans %}Ready to get started?{% endtrans %}
  </h2>
  <p class="text-gray-500 dark:text-gray-400 mb-7 max-w-md mx-auto">
    {% trans %}Join thousands of users who trust us for fast, accurate file conversions. Start free — no credit card required.{% endtrans %}
  </p>
  <div class="flex flex-wrap justify-center gap-3">
    {% if not current_user %}
    <a href="{{ url_for('user_register') }}"
       class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-indigo-600 text-white font-semibold hover:bg-indigo-700 shadow-md transition-colors">
      <i class="fa fa-user-plus"></i>{% trans %}Create Free Account{% endtrans %}
    </a>
    {% else %}
    <a href="{{ url_for('dashboard') }}"
       class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-indigo-600 text-white font-semibold hover:bg-indigo-700 shadow-md transition-colors">
      <i class="fa fa-gauge"></i>{% trans %}Go to Dashboard{% endtrans %}
    </a>
    {% endif %}
    <a href="/"
       class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-semibold border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
      <i class="fa fa-file-arrow-up"></i>{% trans %}Convert a File Now{% endtrans %}
    </a>
  </div>
</section>

{% endblock %}

{% block page_scripts %}
<script>
(function () {
    'use strict';

    /* ── Billing toggle ────────────────────────────────────────────────── */
    var PLANS = {{ plans_js | tojson }};
    var toggle  = document.getElementById('billing-toggle');
    var pill    = toggle ? toggle.querySelector('.toggle-pill') : null;
    var monthly = 1;

    var cardMap = {};
    document.querySelectorAll('.plan-card').forEach(function (card) {
        var pid = parseInt(card.dataset.planId, 10);
        cardMap[pid] = {
            priceEl: card.querySelector('.card-price'),
            noteEl:  card.querySelector('.card-billing-note'),
            ctaEl:   card.querySelector('.plan-cta-btn'),
        };
    });

    function findPeriod(plan, months) {
        for (var i = 0; i < plan.periods.length; i++) {
            if (plan.periods[i].months === months) return plan.periods[i];
        }
        return plan.periods[0] || null;
    }

    function updatePrices(months) {
        monthly = months;
        PLANS.forEach(function (plan) {
            if (plan.price_monthly === 0) return;
            var els = cardMap[plan.id];
            if (!els) return;
            var period = findPeriod(plan, months);
            if (!period) return;
            if (els.priceEl) {
                var val = months === 1 ? plan.price_monthly : period.per_month;
                els.priceEl.textContent = '$' + val.toFixed(2);
            }
            if (els.noteEl) {
                els.noteEl.textContent = months === 1 ? 'Billed monthly' : 'Billed yearly (' + period.discount_percent + '% off)';
            }
            if (els.ctaEl) {
                var href = els.ctaEl.getAttribute('href');
                /* strip any existing period param (handles both ?period= and &period=) */
                var base = href.replace(/[?&]period=[^&]*/g, '');
                var sep  = base.indexOf('?') === -1 ? '?' : '&';
                els.ctaEl.setAttribute('href', base + sep + 'period=' + months);
            }
        });
    }

    if (toggle) {
        toggle.addEventListener('click', function () {
            var yearly = monthly === 1;
            toggle.setAttribute('aria-checked', yearly ? 'true' : 'false');
            if (pill) pill.style.transform = yearly ? 'translateX(28px)' : '';
            updatePrices(yearly ? 12 : 1);
        });
    }

    /* ── Sticky table header (JS translateY — works despite overflow-x:auto) ── */
    (function () {
        var table = document.getElementById('pricing-comparison-table');
        if (!table) return;
        var thead = table.querySelector('thead');

        /* Measure the combined height of ALL fixed/sticky elements pinned to
           the top of the page (navbar, announcement bars, etc.)             */
        function stickyTopHeight() {
            var h = 0;
            document.querySelectorAll('body > *').forEach(function (el) {
                var s = window.getComputedStyle(el);
                if ((s.position === 'fixed' || s.position === 'sticky') && parseInt(s.top, 10) === 0) {
                    var r = el.getBoundingClientRect();
                    if (r.height > 0) h = Math.max(h, r.height);
                }
            });
            /* Also check common selector patterns used in Flask templates */
            var selectors = ['nav', 'header', '[class*="navbar"]', '[class*="topbar"]',
                             '[id*="navbar"]', '[id*="header"]', '[id*="nav"]'];
            selectors.forEach(function (sel) {
                try {
                    document.querySelectorAll(sel).forEach(function (el) {
                        var s = window.getComputedStyle(el);
                        if (s.position === 'fixed' || s.position === 'sticky') {
                            var r = el.getBoundingClientRect();
                            if (r.top <= 1 && r.height > 0) h = Math.max(h, r.height);
                        }
                    });
                } catch (e) {}
            });
            return h;
        }

        var cachedNavH = null;

        function onScroll() {
            /* Cache navbar height after first scroll to avoid repeated DOM queries */
            if (cachedNavH === null) cachedNavH = stickyTopHeight();
            var navH   = cachedNavH;
            var rect   = table.getBoundingClientRect();
            var headH  = thead.offsetHeight;
            /* How far past the sticky offset has the table-top scrolled?    */
            var raw    = navH - rect.top;
            /* Clamp: 0 (not yet sticky) → table.height - headH (don't push header below table) */
            var shift  = Math.max(0, Math.min(raw, rect.height - headH));
            thead.style.transform = shift > 0 ? 'translateY(' + shift + 'px)' : '';
        }

        window.addEventListener('scroll', onScroll, {passive: true});
        /* Re-detect navbar height on resize (mobile nav collapses etc.) */
        window.addEventListener('resize', function () { cachedNavH = null; onScroll(); }, {passive: true});
        onScroll();
    }());

    /* ── FAQ accordion ─────────────────────────────────────────────────── */
    window.toggleFaq = function (btn) {
        var item = btn.closest('.faq-item');
        var body = item.querySelector('.faq-body');
        var isOpen = item.classList.contains('faq-open');
        document.querySelectorAll('.faq-item.faq-open').forEach(function (el) {
            el.classList.remove('faq-open');
            el.querySelector('.faq-body').classList.remove('open');
        });
        if (!isOpen) {
            item.classList.add('faq-open');
            body.classList.add('open');
        }
    };

})();
</script>
{% endblock %}