{# Import smart link macro for intelligent URL handling #}
{% import "../../includes/macros/smart-link.html" as links %}

{% set c = module.content %}
{% set s = module.style %}
{% set colors = module.colors %}
{% set spacing = module.spacing %}
{% set a = module.advanced %}

{# Build CSS classes #}
{% set module_classes = "comparison-table" %}
{% if s.row_striping %}
  {% set module_classes = module_classes ~ " comparison-table--striped" %}
{% endif %}
{% if s.sticky_header %}
  {% set module_classes = module_classes ~ " comparison-table--sticky" %}
{% endif %}
{% if a.custom_class %}
  {% set module_classes = module_classes ~ " " ~ a.custom_class %}
{% endif %}

{% set num_cols = c.columns|length %}

<section class="{{ module_classes }}"
         {% if a.custom_id %}id="{{ a.custom_id }}"{% endif %}
         style="
           --ct-radius: {{ s.border_radius }};
           --ct-padding: {{ s.cell_padding }};
           --ct-header-bg: {{ colors.header_bg.color }};
           --ct-highlight: {{ colors.highlight_color.color }};
           --ct-check: {{ colors.check_color.color }};
           --ct-x: {{ colors.x_color.color }};
           --ct-partial: {{ colors.partial_color.color }};
           --ct-pt: {{ spacing.padding_top }};
           --ct-pb: {{ spacing.padding_bottom }};
           --ct-cols: {{ num_cols }};
         ">

  {# Section Header #}
  {% if c.section_heading or c.section_subheading %}
    <header class="comparison-table__header">
      {% if c.section_heading %}
        <h2 class="comparison-table__heading">{{ c.section_heading|escape }}</h2>
      {% endif %}
      {% if c.section_subheading %}
        <p class="comparison-table__subheading">{{ c.section_subheading|escape }}</p>
      {% endif %}
    </header>
  {% endif %}

  {# Table Container (for scroll on mobile) #}
  <div class="comparison-table__wrapper">
    <table class="comparison-table__table">
      {# Table Header #}
      <thead class="comparison-table__thead">
        <tr>
          <th class="comparison-table__th comparison-table__th--feature" scope="col">
            <span class="sr-only">Feature</span>
          </th>
          {% for col in c.columns %}
            <th class="comparison-table__th{% if col.highlight %} comparison-table__th--highlight{% endif %}" scope="col">
              {% if col.highlight and col.highlight_text %}
                <span class="comparison-table__badge">{{ col.highlight_text|escape }}</span>
              {% endif %}
              <span class="comparison-table__col-name">{{ col.column_name|escape }}</span>
              {% if col.column_subtitle %}
                <span class="comparison-table__col-subtitle">{{ col.column_subtitle|escape }}</span>
              {% endif %}
            </th>
          {% endfor %}
        </tr>
      </thead>

      {# Table Body #}
      <tbody class="comparison-table__tbody">
        {% for row in c.rows %}
          {% if row.is_category %}
            <tr class="comparison-table__tr comparison-table__tr--category">
              <th colspan="{{ num_cols + 1 }}" class="comparison-table__td comparison-table__td--category" scope="colgroup">
                {{ row.feature_name|escape }}
              </th>
            </tr>
          {% else %}
            <tr class="comparison-table__tr">
              <th class="comparison-table__td comparison-table__td--feature" scope="row">
                {{ row.feature_name|escape }}
                {% if row.feature_tooltip %}
                  <span class="comparison-table__tooltip" data-tooltip="{{ row.feature_tooltip|escape }}" aria-label="{{ row.feature_tooltip|escape }}">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="12" cy="12" r="10"/>
                      <path d="M12 16v-4m0-4h.01"/>
                    </svg>
                  </span>
                {% endif %}
              </th>
              {% for i in range(num_cols) %}
                {% set col = c.columns[i] %}
                {% set val_key = "value_" ~ (i + 1) %}
                {% set text_key = "text_" ~ (i + 1) %}
                {% set value = row[val_key]|default('check') %}
                {% set text = row[text_key]|default('') %}

                <td class="comparison-table__td{% if col.highlight %} comparison-table__td--highlight{% endif %}">
                  {% if value == "check" %}
                    <span class="comparison-table__icon comparison-table__icon--check" aria-label="Yes">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                        <polyline points="20 6 9 17 4 12"/>
                      </svg>
                    </span>
                  {% elif value == "x" %}
                    <span class="comparison-table__icon comparison-table__icon--x" aria-label="No">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                      </svg>
                    </span>
                  {% elif value == "partial" %}
                    <span class="comparison-table__icon comparison-table__icon--partial" aria-label="Partial">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                        <path d="M12 4v8l8 0c0-4.42-3.58-8-8-8z"/>
                      </svg>
                    </span>
                  {% elif value == "text" %}
                    <span class="comparison-table__text">{{ text|escape }}</span>
                  {% endif %}
                </td>
              {% endfor %}
            </tr>
          {% endif %}
        {% endfor %}
      </tbody>

      {# CTA Row (if any column has CTA) #}
      {% if c.columns | selectattr('cta_text') | selectattr('cta_url') | list | length %}
        <tfoot class="comparison-table__tfoot">
          <tr>
            <td class="comparison-table__td comparison-table__td--feature"></td>
            {% for col in c.columns %}
              <td class="comparison-table__td comparison-table__td--cta{% if col.highlight %} comparison-table__td--highlight{% endif %}">
                {% if col.cta_text and col.cta_url %}
                  <a href="{{ col.cta_url.href }}"
                     class="button {% if col.highlight %}btn-primary{% else %}btn-secondary{% endif %}"
                     {{ links.attrs(col.cta_url.href) }}>
                    {{ col.cta_text|escape }}
                  </a>
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        </tfoot>
      {% endif %}
    </table>
  </div>
</section>

{% require_css %}
<style>
  .comparison-table {
    padding: var(--ct-pt, 48px) 0 var(--ct-pb, 48px);
  }

  /* Header */
  .comparison-table__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
  }

  .comparison-table__heading {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    color: var(--color-text, #111827);
  }

  .comparison-table__subheading {
    color: var(--color-text-secondary, #6b7280);
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
  }

  /* Wrapper. overflow-x:auto is applied ONLY on mobile — as a desktop scroll
     container it became the sticky containing block and broke "Sticky Header"
     (position:sticky;top:0 never stuck to the viewport). The table's min-width
     means horizontal scroll is only needed below the breakpoint anyway. */
  .comparison-table__wrapper {
    border-radius: var(--ct-radius, 8px);
    border: 1px solid var(--color-border, #e5e7eb);
  }

  @media (max-width: 992px) {
    .comparison-table__wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  /* Table */
  .comparison-table__table {
    width: 100%;
    border-collapse: collapse;
    min-width: calc(150px + (var(--ct-cols, 3) * 120px));
  }

  /* Header cells */
  .comparison-table__th {
    background: var(--ct-header-bg, var(--color-bg-secondary, #f9fafb));
    padding: var(--ct-padding, 16px);
    text-align: center;
    vertical-align: bottom;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    position: relative;
  }

  .comparison-table__th--feature {
    width: 200px;
    min-width: 150px;
  }

  .comparison-table__th--highlight {
    background: color-mix(in srgb, var(--ct-highlight, #3b82f6) 5%, transparent);
  }

  .comparison-table--sticky .comparison-table__th {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .comparison-table__badge {
    display: inline-block;
    background: var(--ct-highlight, #3b82f6);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
  }

  .comparison-table__col-name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #111827);
  }

  .comparison-table__col-subtitle {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary, #6b7280);
    margin-top: 0.25rem;
  }

  /* Body cells */
  .comparison-table__td {
    padding: var(--ct-padding, 16px);
    text-align: center;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
  }

  .comparison-table__td--feature {
    text-align: left;
    font-weight: 500;
    color: var(--color-text, #111827);
  }

  .comparison-table__td--highlight {
    background: color-mix(in srgb, var(--ct-highlight, #3b82f6) 2%, transparent);
  }

  .comparison-table__td--category {
    background: var(--color-bg-tertiary, #f3f4f6);
    font-weight: 600;
    text-align: left;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary, #6b7280);
  }

  .comparison-table__td--cta {
    padding: 1.5rem var(--ct-padding, 16px);
  }

  /* Striped rows */
  .comparison-table--striped .comparison-table__tr:nth-child(even) .comparison-table__td {
    background: var(--color-bg-secondary, #fafafa);
  }

  .comparison-table--striped .comparison-table__tr:nth-child(even) .comparison-table__td--highlight {
    background: color-mix(in srgb, var(--ct-highlight, #3b82f6) 4%, transparent);
  }

  /* Icons */
  .comparison-table__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .comparison-table__icon--check {
    color: var(--ct-check, #10b981);
  }

  .comparison-table__icon--x {
    color: var(--ct-x, #9ca3af);
  }

  .comparison-table__icon--partial {
    color: var(--ct-partial, #f59e0b);
  }

  .comparison-table__text {
    font-weight: 500;
    color: var(--color-text, #111827);
  }

  /* Tooltip */
  .comparison-table__tooltip {
    display: inline-flex;
    margin-left: 0.25rem;
    color: var(--color-text-muted, #9ca3af);
    cursor: help;
    vertical-align: middle;
    position: relative;
  }

  .comparison-table__tooltip:hover {
    color: var(--color-text-secondary, #6b7280);
  }

  /* Tooltip popup */
  .comparison-table__tooltip::before,
  .comparison-table__tooltip::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 100;
  }

  /* Tooltip text */
  .comparison-table__tooltip::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    background: #1f2937;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 250px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* Tooltip arrow */
  .comparison-table__tooltip::after {
    content: '';
    bottom: calc(100% + 2px);
    border: 6px solid transparent;
    border-top-color: #1f2937;
  }

  /* Show tooltip on hover and focus */
  .comparison-table__tooltip:hover::before,
  .comparison-table__tooltip:hover::after,
  .comparison-table__tooltip:focus::before,
  .comparison-table__tooltip:focus::after {
    opacity: 1;
    visibility: visible;
  }

  /* Ensure tooltip stays within viewport on left edge */
  .comparison-table__td--feature:first-child .comparison-table__tooltip::before {
    left: 0;
    transform: none;
  }

  .comparison-table__td--feature:first-child .comparison-table__tooltip::after {
    left: 7px;
    transform: none;
  }

  /* CTA buttons */
  .comparison-table__td--cta .button {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  /* Screen reader only */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  /* Mobile responsive */
  @media (max-width: 992px) {
    .comparison-table__wrapper {
      margin: 0 -1rem;
      border-radius: 0;
      border-left: none;
      border-right: none;
    }

    .comparison-table__th--feature,
    .comparison-table__td--feature {
      position: sticky;
      left: 0;
      z-index: 5;
      background: var(--color-bg, #ffffff);
      box-shadow: 2px 0 4px rgba(0,0,0,0.05);
    }

    .comparison-table__th--feature {
      background: var(--ct-header-bg, #f9fafb);
    }
  }

  /* Print */
  @media print {
    .comparison-table {
      padding: 1rem 0;
    }

    .comparison-table__wrapper {
      overflow: visible;
    }

    .comparison-table__badge {
      background: none;
      color: var(--ct-highlight, #3b82f6);
      border: 1px solid currentColor;
    }
  }

  {% if theme.dark_mode.enabled %}
  /* Dark mode - uses CSS variables that auto-update with theme */
  @media (prefers-color-scheme: dark) {
    .comparison-table__wrapper {
      border-color: var(--color-border);
    }

    .comparison-table__th {
      background: var(--color-bg-secondary);
      border-color: var(--color-border);
    }

    .comparison-table__td {
      border-color: var(--color-border);
    }

    .comparison-table__td--category {
      background: var(--color-bg-tertiary);
    }

    {# Striping override removed: the light striped rule already uses
       --color-bg-secondary, which dark.css flips correctly. Forcing --color-bg
       here killed the stripe in dark mode. #}

    .comparison-table__col-name,
    .comparison-table__td--feature,
    .comparison-table__text {
      color: var(--color-text);
    }

    .comparison-table__th--feature,
    .comparison-table__td--feature {
      background: var(--color-bg);
    }

    /* Tooltip in dark mode */
    .comparison-table__tooltip::before {
      background: var(--color-bg-secondary);
      color: var(--color-text);
    }

    .comparison-table__tooltip::after {
      border-top-color: var(--color-bg-secondary);
    }
  }

  /* Mobile sticky column - dark mode */
  @media (prefers-color-scheme: dark) and (max-width: 992px) {
    .comparison-table__th--feature,
    .comparison-table__td--feature {
      background: var(--color-bg);
    }
    .comparison-table__th--feature {
      background: var(--color-bg-secondary);
    }
  }
  {% endif %}
</style>
{% end_require_css %}