Trust Indicators

{%- comment -%} modblo. Trust Indicators {%- endcomment -%}
<section class="modblo-trust" data-section-id="{{ section.id }}"
  style="--modblo-bg: {{ section.settings.bg }}; --modblo-fg: {{ section.settings.fg }}; --modblo-accent: {{ section.settings.accent }};">
  <div class="modblo-trust__inner page-width">
    <div class="modblo-trust__grid">
      {%- for block in section.blocks -%}
        <div class="modblo-trust__cell" {{ block.shopify_attributes }}>
          <div class="modblo-trust__icon" aria-hidden="true">
            {%- case block.settings.icon -%}
              {%- when 'shipping' -%}
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M1 3h13v13H1zM14 8h5l3 3v5h-8V8z"/><circle cx="6" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>
              {%- when 'returns' -%}
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
              {%- when 'support' -%}
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.5 8.5 0 0 1-12.85 7.3L3 21l2.2-5.15A8.5 8.5 0 1 1 21 11.5z"/></svg>
              {%- when 'secure' -%}
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>
              {%- when 'sustainable' -%}
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 4 13c0-7 7-11 16-11-1 9-5 16-12 16z"/><path d="M2 22c1-4 4-7 8-9"/></svg>
              {%- else -%}
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
            {%- endcase -%}
          </div>
          <div class="modblo-trust__copy">
            <p class="modblo-trust__title">{{ block.settings.title }}</p>
            <p class="modblo-trust__sub">{{ block.settings.text }}</p>
          </div>
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

<style>
  .modblo-trust { background: var(--modblo-bg, #fafafa); color: var(--modblo-fg, #0b0b0c); padding: clamp(40px,6vw,80px) 0; }
  .modblo-trust__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .modblo-trust__grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .modblo-trust__cell {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px 20px;
    background: color-mix(in oklab, var(--modblo-fg) 3%, transparent);
    border: 1px solid color-mix(in oklab, var(--modblo-fg) 8%, transparent);
    border-radius: 14px;
    transition: border-color .2s, transform .25s;
  }
  .modblo-trust__cell:hover { border-color: color-mix(in oklab, var(--modblo-accent) 50%, transparent); transform: translateY(-2px); }
  .modblo-trust__icon {
    width: 40px; height: 40px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; color: var(--modblo-accent, #6366f1);
    background: color-mix(in oklab, var(--modblo-accent) 10%, transparent);
  }
  .modblo-trust__title { font-size: 14px; font-weight: 600; margin: 0 0 2px; letter-spacing: -.01em; }
  .modblo-trust__sub { font-size: 13px; line-height: 1.5; opacity: .7; margin: 0; }
</style>

{% schema %}
{
  "name": "Trust Indicators",
  "tag": "section",
  "settings": [
    { "type": "color", "id": "bg", "label": "Background", "default": "#fafafa" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Icon accent", "default": "#6366f1" }
  ],
  "blocks": [{
    "type": "trust",
    "name": "Indicator",
    "settings": [
      { "type": "select", "id": "icon", "label": "Icon",
        "options": [
          { "value": "shipping", "label": "Shipping" },
          { "value": "returns", "label": "Returns" },
          { "value": "support", "label": "Support" },
          { "value": "secure", "label": "Secure" },
          { "value": "sustainable", "label": "Sustainable" }
        ], "default": "shipping" },
      { "type": "text", "id": "title", "label": "Title", "default": "Free shipping" },
      { "type": "text", "id": "text", "label": "Text", "default": "On orders over $75" }
    ]
  }],
  "max_blocks": 8,
  "presets": [{
    "name": "Trust Indicators",
    "blocks": [
      { "type": "trust", "settings": { "icon": "shipping", "title": "Free shipping", "text": "On orders over $75" } },
      { "type": "trust", "settings": { "icon": "returns", "title": "60-day returns", "text": "No questions asked" } },
      { "type": "trust", "settings": { "icon": "support", "title": "Real humans", "text": "Reply within 4 hours" } },
      { "type": "trust", "settings": { "icon": "sustainable", "title": "Sustainably made", "text": "Carbon-neutral shipping" } }
    ]
  }]
}
{% endschema %}