{%- comment -%}
  Floating Comments — customer quotes drifting over a backdrop.
  Purely decorative motion; every comment is one you write. Respects
  prefers-reduced-motion by falling back to a static grid.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
-%}

{% style %}
  .fc-{{ uid }} {
    position: relative; overflow: hidden;
    padding: {{ s.padding_y }}px 0;
    background: {{ s.bg_color }}; color: {{ s.text_color }};
    min-height: {{ s.height }}px;
  }
  .fc-{{ uid }}__head { text-align: center; position: relative; z-index: 3; margin-bottom: 18px; }
  .fc-{{ uid }}__title { margin: 0; font-size: {{ s.heading_size }}px; }
  .fc-{{ uid }}__lane { position: relative; z-index: 2; }
  .fc-{{ uid }}__bubble {
    display: inline-flex; flex-direction: column; gap: 4px;
    max-width: {{ s.bubble_width }}px;
    padding: {{ s.bubble_padding }}px;
    border-radius: {{ s.radius }}px;
    background: {{ s.bubble_bg }}; color: {{ s.bubble_text }};
    box-shadow: 0 6px 22px rgba(0,0,0,.10);
    font-size: {{ s.text_size }}px;
  }
  .fc-{{ uid }}__who { display: flex; align-items: center; gap: 7px; font-size: {{ s.text_size | minus: 2 }}px; opacity: .75; }
  .fc-{{ uid }}__who img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
  .fc-{{ uid }}__float {
    display: flex; flex-wrap: wrap; gap: {{ s.gap }}px; justify-content: center;
  }
  .fc-{{ uid }}__float > * { animation: fcDrift-{{ uid }} {{ s.speed }}s ease-in-out infinite; }
  .fc-{{ uid }}__float > *:nth-child(2n) { animation-delay: -{{ s.speed | divided_by: 3 }}s; }
  .fc-{{ uid }}__float > *:nth-child(3n) { animation-delay: -{{ s.speed | divided_by: 2 }}s; }
  @keyframes fcDrift-{{ uid }} {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-{{ s.drift }}px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .fc-{{ uid }}__float > * { animation: none; }
  }
{% endstyle %}

<div class="fc-{{ uid }}">
  <div class="page-width">
    {%- if s.heading != blank -%}
      <div class="fc-{{ uid }}__head"><h2 class="fc-{{ uid }}__title">{{ s.heading | escape }}</h2></div>
    {%- endif -%}
    <div class="fc-{{ uid }}__lane">
      <div class="fc-{{ uid }}__float">
        {%- for block in section.blocks -%}
          <div class="fc-{{ uid }}__bubble" {{ block.shopify_attributes }}>
            <span>{{ block.settings.text }}</span>
            {%- if block.settings.author != blank -%}
              <span class="fc-{{ uid }}__who">
                {%- if block.settings.avatar != blank -%}
                  {{ block.settings.avatar | image_url: width: 60 | image_tag: loading: "lazy", alt: "" }}
                {%- elsif block.settings.avatar_url != blank -%}
                  <img src="{{ block.settings.avatar_url }}" alt="" loading="lazy" width="22" height="22">
                {%- endif -%}
                {{ block.settings.author | escape }}
              </span>
            {%- endif -%}
          </div>
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Floating Comments",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": [
      "header",
      "footer"
    ]
  },
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "What people say"
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 16,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Heading size",
      "default": 26
    },
    {
      "type": "range",
      "id": "height",
      "min": 120,
      "max": 700,
      "step": 20,
      "unit": "px",
      "label": "Min height",
      "default": 300
    },
    {
      "type": "range",
      "id": "speed",
      "min": 3,
      "max": 24,
      "step": 1,
      "unit": "s",
      "label": "Drift duration",
      "default": 9
    },
    {
      "type": "range",
      "id": "drift",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Drift distance",
      "default": 12
    },
    {
      "type": "range",
      "id": "gap",
      "min": 6,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Gap",
      "default": 14
    },
    {
      "type": "header",
      "content": "Bubbles"
    },
    {
      "type": "range",
      "id": "bubble_width",
      "min": 140,
      "max": 420,
      "step": 10,
      "unit": "px",
      "label": "Max bubble width",
      "default": 260
    },
    {
      "type": "range",
      "id": "bubble_padding",
      "min": 6,
      "max": 28,
      "step": 2,
      "unit": "px",
      "label": "Bubble padding",
      "default": 14
    },
    {
      "type": "range",
      "id": "radius",
      "min": 0,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Corner radius",
      "default": 14
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 11,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Text size",
      "default": 14
    },
    {
      "type": "color",
      "id": "bubble_bg",
      "label": "Bubble background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "bubble_text",
      "label": "Bubble text",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Section background",
      "default": "#f4f1ec"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Heading colour",
      "default": "#111111"
    },
    {
      "type": "range",
      "id": "padding_y",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Vertical padding",
      "default": 44
    }
  ],
  "blocks": [
    {
      "type": "comment",
      "name": "Comment",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "Comment",
          "default": "<p>Arrived next day and the quality is unreal.</p>"
        },
        {
          "type": "text",
          "id": "author",
          "label": "Author",
          "default": "Rimi K."
        },
        {
          "type": "image_picker",
          "id": "avatar",
          "label": "Avatar"
        },
        {
          "type": "text",
          "id": "avatar_url",
          "label": "Avatar URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Floating Comments",
      "blocks": [
        {
          "type": "comment"
        },
        {
          "type": "comment"
        },
        {
          "type": "comment"
        },
        {
          "type": "comment"
        },
        {
          "type": "comment"
        }
      ]
    }
  ]
}
{% endschema %}
