Comparison Table

{%- comment -%} modblo. Comparison Table {%- endcomment -%}
<section class="modblo-cmp" data-section-id="{{ section.id }}"
  style="--modblo-bg: {{ section.settings.bg }}; --modblo-fg: {{ section.settings.fg }}; --modblo-accent: {{ section.settings.accent }};">
  <div class="modblo-cmp__inner page-width">
    {%- if section.settings.heading != blank -%}
      <h2 class="modblo-cmp__heading">{{ section.settings.heading }}</h2>
    {%- endif -%}
    {%- if section.settings.subheading != blank -%}
      <p class="modblo-cmp__sub">{{ section.settings.subheading }}</p>
    {%- endif -%}

    <div class="modblo-cmp__wrap">
      <table class="modblo-cmp__table">
        <thead>
          <tr>
            <th scope="col">Feature</th>
            <th scope="col" class="modblo-cmp__us">{{ section.settings.us_label | default: 'You' }}</th>
            <th scope="col">{{ section.settings.them_label | default: 'Them' }}</th>
          </tr>
        </thead>
        <tbody>
          {%- for block in section.blocks -%}
            <tr {{ block.shopify_attributes }}>
              <th scope="row">{{ block.settings.feature }}</th>
              <td class="modblo-cmp__us">
                {%- if block.settings.us == 'yes' -%}<span class="modblo-cmp__check" aria-label="Included">✓</span>
                {%- elsif block.settings.us == 'no' -%}<span class="modblo-cmp__x" aria-label="Not included">, </span>
                {%- else -%}{{ block.settings.us_text }}{%- endif -%}
              </td>
              <td>
                {%- if block.settings.them == 'yes' -%}<span class="modblo-cmp__check" aria-label="Included">✓</span>
                {%- elsif block.settings.them == 'no' -%}<span class="modblo-cmp__x" aria-label="Not included">, </span>
                {%- else -%}{{ block.settings.them_text }}{%- endif -%}
              </td>
            </tr>
          {%- endfor -%}
        </tbody>
      </table>
    </div>
  </div>
</section>

<style>
  .modblo-cmp { background: var(--modblo-bg, #fff); color: var(--modblo-fg, #0b0b0c); padding: clamp(64px,10vw,128px) 0; }
  .modblo-cmp__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
  .modblo-cmp__heading { font-size: clamp(28px,4vw,44px); letter-spacing: -.025em; margin: 0 0 12px; max-width: 640px; }
  .modblo-cmp__sub { font-size: 17px; opacity: .72; max-width: 560px; margin: 0 0 36px; }
  .modblo-cmp__wrap { overflow-x: auto; border: 1px solid color-mix(in oklab, var(--modblo-fg) 10%, transparent); border-radius: 18px; }
  .modblo-cmp__table { width: 100%; border-collapse: collapse; min-width: 560px; }
  .modblo-cmp__table th, .modblo-cmp__table td {
    padding: 18px 20px; text-align: left; font-size: 15px;
    border-bottom: 1px solid color-mix(in oklab, var(--modblo-fg) 8%, transparent);
  }
  .modblo-cmp__table thead th {
    font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
    opacity: .65; font-weight: 600;
    background: color-mix(in oklab, var(--modblo-fg) 3%, transparent);
  }
  .modblo-cmp__table tbody th { font-weight: 500; }
  .modblo-cmp__table tr:last-child th, .modblo-cmp__table tr:last-child td { border-bottom: 0; }
  .modblo-cmp__us {
    background: color-mix(in oklab, var(--modblo-accent) 6%, transparent);
    border-left: 1px solid color-mix(in oklab, var(--modblo-accent) 30%, transparent);
    border-right: 1px solid color-mix(in oklab, var(--modblo-accent) 30%, transparent);
  }
  .modblo-cmp__check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 999px;
    background: var(--modblo-accent, #6366f1); color: #fff; font-size: 12px;
  }
  .modblo-cmp__x { opacity: .45; font-size: 18px; }
</style>

{% schema %}
{
  "name": "Comparison Table",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Why brands switch to modblo." },
    { "type": "textarea", "id": "subheading", "label": "Subheading",
      "default": "A quick read on why merchants choose native sections over app-stitched themes." },
    { "type": "text", "id": "us_label", "label": "Your column label", "default": "modblo" },
    { "type": "text", "id": "them_label", "label": "Their column label", "default": "Bundled apps" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "blocks": [{
    "type": "row",
    "name": "Row",
    "settings": [
      { "type": "text", "id": "feature", "label": "Feature", "default": "Native Liquid (no app)" },
      { "type": "select", "id": "us", "label": "You",
        "options": [
          { "value": "yes", "label": "Yes (✓)" },
          { "value": "no", "label": "No (, )" },
          { "value": "text", "label": "Text" }
        ], "default": "yes" },
      { "type": "text", "id": "us_text", "label": "Your text (if Text)" },
      { "type": "select", "id": "them", "label": "Them",
        "options": [
          { "value": "yes", "label": "Yes (✓)" },
          { "value": "no", "label": "No (, )" },
          { "value": "text", "label": "Text" }
        ], "default": "no" },
      { "type": "text", "id": "them_text", "label": "Their text (if Text)" }
    ]
  }],
  "max_blocks": 16,
  "presets": [{
    "name": "Comparison Table",
    "blocks": [{ "type": "row" }, { "type": "row" }, { "type": "row" }, { "type": "row" }]
  }]
}
{% endschema %}