{% if section.settings.italic_font_family == 'georgia-pro' or section.settings.italic_font_family == 'bodoni-moda' or section.settings.italic_font_family == 'instrument-serif' or section.settings.italic_font_family == 'custom_google_font' %}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {% if section.settings.italic_font_family == 'georgia-pro' %}
    <link href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'bodoni-moda' %}
    <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'instrument-serif' %}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
    <link href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  {% endif %}
{% endif %}

<div class="social-comments-section animate-section animate--hidden {{ section.settings.visibility }}" id="section-{{ section.id }}" style="
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
  background-color: {{ section.settings.background_color }};
">
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
<div class="page-width{% if section.settings.slider_mobile %} mobile-full-page{% endif %}">
  {% if section.settings.heading != blank %}
    <div class="social-comments-header" style="text-align: {{ section.settings.heading_alignment }}; margin-bottom: {{ section.settings.heading_spacing }}px;">
      <h2 class="social-comments-title title-with-highlight{% if section.settings.override_heading_size %} {{ section.settings.theme_heading_size }}{% endif %}" style="
        {% unless section.settings.override_heading_size %}font-size: {{ section.settings.heading_font_size_mobile }}px;{% endunless %}
        color: {{ section.settings.heading_color }};
        margin: 0;
        --hightlight-color:{{ section.settings.title_highlight_color }};
        --gradient-text: {{ section.settings.title_gradient_background }};
      ">
        {{ section.settings.heading }}
      </h2>
      {% if section.settings.subheading != blank %}
        <p class="social-comments-subtitle" style="
          font-size: {{ section.settings.subheading_font_size_mobile }}px;
          color: {{ section.settings.subheading_color }};
          margin: 8px 0 0 0;
        ">
          {{ section.settings.subheading }}
        </p>
      {% endif %}
    </div>
  {% endif %}

{% if section.settings.slider_mobile %}
  <splide-component
    data-type='{{ section.settings.type }}'
    data-autoplay='{{ section.settings.autoplay }}'
    data-autoplay-speed='{{ section.settings.autoplay_speed }}'
    data-arrows-color="{{ section.settings.arrows_color_scheme }}"
    data-dots-color="{{ section.settings.dots_color_scheme }}"
    data-slides-desktop="{{ section.settings.comments_per_row }}"
    data-per-move-desktop='1'
    data-gap-desktop='{{ section.settings.grid_gap }}'
    data-side-padding-desktop='0'
    data-padding-calc-desktop='false'
    data-slides-mobile="1"
    data-gap-mobile='15'
    {% if section.settings.enable_mobile_preview %}
      data-side-padding-mobile='24'
    {% else %}
      data-side-padding-mobile='15'
    {% endif %}
    data-destroy-desktop="true"
  >
{% endif %}
    <div 
      class='{% if section.settings.slider_mobile %}splide splide--destroy-desktop splide--mobile-dots-{{ section.settings.mobile_dots_position }} splide--mobile-arrows-{{ section.settings.mobile_arrows_position }}{% if section.settings.transparent_arrows %} splide--transparent-arrows{% endif %}{% else %}social-comments-grid{% endif %}'
      style="{% unless section.settings.slider_mobile %}
        display: grid;
        grid-template-columns: repeat({{ section.settings.comments_per_row }}, 1fr);
        gap: {{ section.settings.grid_gap }}px;
        margin-top: {{ section.settings.content_spacing }}px;
      {% else %}
        --columns-desktop: {{ section.settings.comments_per_row }};
        --columns-mobile: 1;
        --gap-desktop: {{ section.settings.grid_gap | divided_by: 10.0 }}rem;
        --gap-mobile: 1.5rem;
      {% endunless %}"
      {% assign force_adaptive = false %}
      {% if section.settings.mobile_adaptive_height %}
        {% assign force_adaptive = true %}
      {% endif %}
      {% if section.settings.mobile_arrows_position == 'under' %}
        {% assign force_adaptive = true %}
      {% endif %}

      {% if section.settings.slider_mobile and force_adaptive %}
        data-mobile-adaptive-height="true"
      {% endif %}
    >
      {% if section.settings.slider_mobile %}
        <div class="splide__track">
          <ul class="splide__list" style="margin-top: {{ section.settings.content_spacing }}px;">
      {% endif %}

      {% for block in section.blocks %}
        {% if section.settings.slider_mobile %}
          <li class="splide__slide">
            <div class="splide__slide__container">
        {% endif %}

        {% case block.type %}
          {% when 'tiktokcomment' %}
            {% render 'tiktok-comment-block', block: block %}
          {% when 'instagramcomment' %}
            {% render 'instagram-comment-block', block: block %}
          {% when 'facebook_comment' %}
            {% render 'facebook-comment-block', block: block %}
        {% endcase %}

        {% if section.settings.slider_mobile %}
            </div>
          </li>
        {% endif %}
      {% endfor %}

      {% if section.settings.slider_mobile %}
          </ul>
        </div>
        <div class='splide__dots-and-arrows'>
          <ul class="splide__pagination"></ul>
          <div class="splide__arrows"></div>
        </div>
      {% endif %}
    </div>

  {% if section.settings.slider_mobile %}
    </splide-component>
  {% endif %}
</div>
</div>

<style>
  .social-comments-section {
    width: 100%;
  }

  .social-comments-grid {
    width: 100%;
  }

  /* Enhanced heading styles */
  .social-comments-title.title-with-highlight em {
    {% if section.settings.italic_style == 'italic' %}
                  /* Normal italic styling */
                  text-decoration: none !important;
                  font-style: italic !important;
                  {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      /* Font family styling - no underline */
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
      font-family: 'Bodoni Moda', Georgia, serif !important;
    {% elsif section.settings.italic_font_family == 'instrument-serif' %}
      font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
                      font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
    {% elsif section.settings.italic_font_family == 'cursive' %}
      font-family: cursive !important;
    {% endif %}
    {% if section.settings.italic_font_weight != 'inherit' %}
      font-weight: {{ section.settings.italic_font_weight }} !important;
    {% endif %}
  {% else %}
      /* Underline styling */
      text-decoration: underline !important;
      font-style: normal !important;
      text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
    {% endif %}
  }

  {% if section.settings.enable_gradient %}
    .social-comments-title.title-with-highlight strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% else %}
    .social-comments-title.title-with-highlight strong {
      color: {{ section.settings.title_highlight_color }};
    }
  {% endif %}

  /* Desktop font sizes */
  @media (min-width: 751px) {
    {% unless section.settings.override_heading_size %}
    .social-comments-title {
      font-size: {{ section.settings.heading_font_size_desktop }}px !important;
    }
    {% endunless %}
    
    .social-comments-subtitle {
      font-size: {{ section.settings.subheading_font_size_desktop }}px !important;
    }
  }

@media (min-width: 991px) {
  .social-comments-section .splide--destroy-desktop .splide__list {
    display: grid !important;
    grid-template-columns: repeat({{ section.settings.comments_per_row }}, 1fr) !important;
    gap: {{ section.settings.grid_gap }}px !important;
  }
  
  .social-comments-section .splide--destroy-desktop .splide__slide {
    width: auto !important;
  }
}

    @media (max-width: 990px) {
      {% unless section.settings.slider_mobile %}
        .social-comments-grid {
          grid-template-columns: repeat(2, 1fr) !important;
        }
      {% endunless %}
      
      {% if section.settings.slider_mobile %}
        .social-comments-section .splide:not(.splide--destroy-desktop) .splide__list {
          display: grid !important;
          grid-template-columns: repeat(2, 1fr) !important;
          gap: {{ section.settings.grid_gap }}px !important;
        }
      {% endif %}
    }

    @media (max-width: 750px) {
      {% unless section.settings.slider_mobile %}
        .social-comments-grid {
          grid-template-columns: 1fr !important;
        }
      {% endunless %}
      
      .social-comments-section {
        padding-left: 15px;
        padding-right: 15px;
      }
    }

    @media (max-width: 750px) {
      {% unless section.settings.slider_mobile %}
        .social-comments-grid {
          grid-template-columns: 1fr !important;
        }
      {% endunless %}
        
      .social-comments-section {
        padding-left: 15px;
        padding-right: 15px;
      }
    }

  /* TikTok Comment Styles */
  .tiktok-comment-block {
    line-height: 1.4;
    width: 100%;
  }

  .tiktok-comment-block .heart-button:hover .heart-icon {
    stroke: #fe2c55 !important;
  }

  .tiktok-comment-block .reply-button:hover {
    color: #161823 !important;
  }

  /* Facebook Comment Styles */
  .fb-comment-meta-item:hover {
    text-decoration: underline;
  }

  /* Instagram Comment Styles */
  .instagram-comment-block .action-item:hover {
    color: #262626;
  }
  
  .instagram-comment-block .heart-icon:hover {
    stroke: #ed4956 !important;
  }

  @media (max-width: 550px) {
    .tiktok-comment-block .comment-meta {
      gap: 12px !important;
    }
    
    .tiktok-comment-block .like-section {
      margin-left: 8px !important;
    }

    .fb-comment-container {
      margin: 0;
      border-radius: 0;
      box-shadow: none;
      width: 100%;
      max-width: none;
    }
    .fb-comment-meta {
      gap: 8px;
    }

    .instagram-comment-block .instagram-comment {
      margin: 0;
      border-radius: 0;
      box-shadow: none;
      width: 100%;
      max-width: none;
    }
    
    .instagram-comment-block .comment-actions {
      gap: 12px;
    }
  }
</style>

{% schema %}
{
  "name": "Social media comments",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used to be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Section Header"
    },
    {
      "type": "inline_richtext",
      "id": "heading",
      "label": "Heading",
      "default": "What Our Customers Say",
      "info": "Bold certain words to highlight them with a different color."
    },
     {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#2c2c2c"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "checkbox",
      "id": "override_heading_size",
      "label": "Use theme heading size",
      "default": false,
      "info": "Overrides the custom font size settings below with Ascendify's global heading scale"
    },
    {
      "type": "select",
      "id": "theme_heading_size",
      "label": "Theme heading size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1",
      "visible_if": "{{ section.settings.override_heading_size }}"
    },
    {
      "type": "range",
      "id": "heading_font_size_mobile",
      "min": 16,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Heading font size (Mobile)",
      "default": 23,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "range",
      "id": "heading_font_size_desktop",
      "min": 28,
      "max": 48,
      "step": 1,
      "unit": "px",
      "label": "Heading font size (Desktop)",
      "default": 30,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Override solid color with gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Choose how italic text (created with *text*) should be displayed"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
          {
              "value": "italic",
              "label": "Normal Italic"
        },
        {
          "value": "underline",
          "label": "Underline"
        },
        {
          "value": "font_family",
          "label": "Custom Font Family"
        }
      ],
      "default": "underline",
      "info": "Choose to either underline italic text or use a custom font family"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic Text Font Family",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "serif",
          "label": "Serif"
        },
        {
              "value": "instrument-serif",
              "label": "Instrument Serif"
        },
        {
          "value": "georgia-pro",
          "label": "Georgia Pro"
        },
        {
          "value": "bodoni-moda",
          "label": "Bodoni Moda"
        },
        {
          "value": "cursive",
          "label": "Cursive"
        },
        {
            "value": "custom_google_font",
            "label": "Custom Google Font"
          }
      ],
      "default": "serif",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
          "type": "text",
          "id": "custom_google_font_name",
          "label": "Custom Google Font Name",
          "info": "Enter the exact Google Font family name (e.g., 'Roboto', 'Open Sans', 'Playfair Display'). Font will be loaded from Google Fonts automatically. Browse fonts at https://fonts.google.com/"
        },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic Text Font Weight",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "300",
          "label": "Light (300)"
        },
        {
          "value": "400",
          "label": "Normal (400)"
        },
        {
          "value": "500",
          "label": "Medium (500)"
        },
        {
          "value": "600",
          "label": "Semi Bold (600)"
        },
        {
          "value": "700",
          "label": "Bold (700)"
        },
        {
          "value": "800",
          "label": "Extra Bold (800)"
        },
        {
          "value": "900",
          "label": "Black (900)"
        }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Real reviews from real customers"
    },
    {
      "type": "range",
      "id": "subheading_font_size_mobile",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Subheading font size (Mobile)",
      "default": 15
    },
    {
      "type": "range",
      "id": "subheading_font_size_desktop",
      "min": 14,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Subheading font size (Desktop)",
      "default": 18
    },
    {
      "type": "color",
      "id": "subheading_color",
      "label": "Subheading Color",
      "default": "#666666"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "comments_per_row",
      "label": "Comments Per Row (Desktop)",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        }
      ],
      "default": "2",
      "info": "Automatically adjusts to 2 on tablet and 1 on mobile"
    },
    {
      "type": "range",
      "id": "grid_gap",
      "min": 10,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Gap Between Comments",
      "default": 10
    },
    {
      "type": "header",
      "content": "Mobile Slider"
    },
    {
      "type": "checkbox",
      "id": "slider_mobile",
      "label": "Enable mobile slider",
      "default": false,
      "info": "The settings below are applied if this option is checked"
    },
    {
      "type": "select",
      "id": "type",
      "options": [
        {
          "value": "slide",
          "label": "Classic"
        },
        {
          "value": "loop",
          "label": "Infinite"
        }
      ],
      "default": "loop",
      "label": "Type"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable autoplay",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "min": 1,
      "max": 15,
      "step": 0.5,
      "default": 5,
      "unit": "sec",
      "label": "Autoplay speed"
    },
    {
      "type": "select",
      "id": "arrows_color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        }
      ],
      "default": "inverse",
      "label": "Arrows color scheme"
    },
    {
      "type": "checkbox",
      "id": "transparent_arrows",
      "label": "Transparent arrows",
      "default": true
    },
    {
      "type": "select",
      "id": "dots_color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Text"
        }
      ],
      "default": "inverse",
      "label": "Dots color"
    },
    {
      "type": "checkbox",
      "id": "enable_mobile_preview",
      "label": "Preview of prev & next slides",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "mobile_adaptive_height",
      "label": "Adaptive height",
      "default": false
    },
    {
      "type": "select",
      "id": "mobile_dots_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        }
      ],
      "default": "hidden",
      "label": "Dots position"
    },
    {
      "type": "select",
      "id": "mobile_arrows_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        },
        {
          "value": "sides",
          "label": "On sides of the slider"
        }
      ],
      "default": "under",
      "label": "Arrows position"
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "heading_spacing",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Space Below Heading",
      "default": 24
    },
    {
      "type": "range",
      "id": "content_spacing",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Space Above Comments",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top Padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom Padding",
      "default": 36
    },
    {
      "type": "header",
      "content": "Background"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    }
  ],
  "blocks": [
    {
      "name": "TikTok Comment",
      "type": "tiktokcomment",
      "settings": [
        {
          "type": "image_picker",
          "id": "profile_image",
          "label": "Profile Picture Image"
        },
        {
          "type": "header",
          "content": "Comment Content"
        },
        {
          "type": "text",
          "id": "username",
          "label": "Username",
          "default": "customer_review"
        },
        {
          "type": "textarea",
          "id": "comment_text",
          "label": "Comment Text",
          "default": "This product exceeded my expectations! Great quality and value."
        },
        {
          "type": "text",
          "id": "timestamp",
          "label": "Timestamp",
          "default": "3d ago"
        },
        {
          "type": "header",
          "content": "Like Section"
        },
        {
          "type": "checkbox",
          "id": "show_like_section",
          "label": "Show Like Section",
          "default": true
        },
        {
          "type": "text",
          "id": "like_count",
          "label": "Like Count",
          "default": "1.2K"
        },
        {
          "type": "checkbox",
          "id": "show_box_shadow",
          "label": "Show Box Shadow",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "show_verified_badge",
          "label": "Show Verified Badge",
          "default": true
        },
        {
          "type": "color",
          "id": "verified_badge_color",
          "label": "Verified Badge Color",
          "default": "#12DBF0"
        },
        {
          "type": "header",
          "content": "Reply Section"
        },
        {
          "type": "checkbox",
          "id": "show_reply_button",
          "label": "Show Reply Button",
          "default": true
        },
        {
          "type": "text",
          "id": "reply_text",
          "label": "Reply Button Text",
          "default": "Reply"
        },
        {
          "type": "header",
          "content": "Typography"
        },
        {
          "type": "range",
          "id": "username_font_size",
          "min": 12,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Username Font Size",
          "default": 15
        },
        {
          "type": "range",
          "id": "comment_text_font_size",
          "min": 12,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Comment Text Font Size",
          "default": 15
        },
        {
          "type": "range",
          "id": "like_count_font_size",
          "min": 10,
          "max": 16,
          "step": 1,
          "unit": "px",
          "label": "Like Count Font Size",
          "default": 12
        },
        {
          "type": "range",
          "id": "meta_font_size",
          "min": 10,
          "max": 18,
          "step": 1,
          "unit": "px",
          "label": "Meta Text Font Size",
          "default": 14
        },
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background Color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "username_color",
          "label": "Username Color",
          "default": "#161823"
        },
        {
          "type": "color",
          "id": "comment_text_color",
          "label": "Comment Text Color",
          "default": "#161823"
        },
        {
          "type": "color",
          "id": "heart_color",
          "label": "Heart Icon Color",
          "default": "#8a8b8c"
        },
        {
          "type": "color",
          "id": "like_count_color",
          "label": "Like Count Color",
          "default": "#8a8b8c"
        },
        {
          "type": "color",
          "id": "meta_color",
          "label": "Meta Text Color",
          "default": "#8a8b8c"
        },
        {
          "type": "color",
          "id": "border_color",
          "label": "Border Color",
          "default": "#f1f1f2"
        },
        {
          "type": "header",
          "content": "Layout"
        },
        {
          "type": "range",
          "id": "border_radius",
          "min": 0,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Border Radius",
          "default": 8
        },
        {
          "type": "range",
          "id": "block_padding",
          "min": 8,
          "max": 32,
          "step": 2,
          "unit": "px",
          "label": "Block Padding",
          "default": 16
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 50,
          "step": 2,
          "unit": "px",
          "label": "Top Margin",
          "default": 6
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 50,
          "step": 2,
          "unit": "px",
          "label": "Bottom Margin",
          "default": 6
        }
      ]
    },
    {
      "name": "Instagram Comment",
      "type": "instagramcomment",
      "settings": [
        {
          "type": "image_picker",
          "id": "profile_image",
          "label": "Profile Picture Image"
        },
        {
          "type": "header",
          "content": "Comment Content"
        },
        {
          "type": "text",
          "id": "username",
          "label": "Username",
          "default": "happycustomer"
        },
        {
          "type": "text",
          "id": "timestamp",
          "label": "Timestamp",
          "default": "2w"
        },
        {
          "type": "textarea",
          "id": "comment_text",
          "label": "Comment Text",
          "default": "Love this product! Amazing quality and fast shipping. Highly recommend!"
        },
        {
          "type": "text",
          "id": "like_count",
          "label": "Like Count",
          "default": "24 likes"
        },
        {
          "type": "header",
          "content": "Author Heart Badge"
        },
        {
          "type": "checkbox",
          "id": "show_author_heart",
          "label": "Show Author Heart",
          "default": true
        },
        {
          "type": "text",
          "id": "author_label_text",
          "label": "Author Label Text",
          "default": "by author"
        },
        {
          "type": "checkbox",
          "id": "show_like_button",
          "label": "Show Like Button",
          "default": true
        },
        {
          "type": "text",
          "id": "reply_text",
          "label": "Reply text",
          "default": "Reply"
        },
        {
          "type": "header",
          "content": "Typography"
        },
        {
          "type": "range",
          "id": "username_font_size",
          "min": 10,
          "max": 18,
          "step": 1,
          "unit": "px",
          "label": "Username Font Size",
          "default": 14
        },
        {
          "type": "range",
          "id": "timestamp_font_size",
          "min": 10,
          "max": 16,
          "step": 1,
          "unit": "px",
          "label": "Timestamp Font Size",
          "default": 12
        },
        {
          "type": "range",
          "id": "comment_text_font_size",
          "min": 12,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Comment Text Font Size",
          "default": 14
        },
        {
          "type": "range",
          "id": "author_label_font_size",
          "min": 10,
          "max": 16,
          "step": 1,
          "unit": "px",
          "label": "Author Label Font Size",
          "default": 12
        },
        {
          "type": "range",
          "id": "actions_font_size",
          "min": 10,
          "max": 16,
          "step": 1,
          "unit": "px",
          "label": "Actions Font Size",
          "default": 12
        },
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background Color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "username_color",
          "label": "Username Color",
          "default": "#262626"
        },
        {
          "type": "color",
          "id": "timestamp_color",
          "label": "Timestamp Color",
          "default": "#8e8e8e"
        },
        {
          "type": "color",
          "id": "comment_text_color",
          "label": "Comment Text Color",
          "default": "#262626"
        },
        {
          "type": "color",
          "id": "author_heart_color",
          "label": "Author Heart Color",
          "default": "#ed4956"
        },
        {
          "type": "color",
          "id": "author_label_color",
          "label": "Author Label Color",
          "default": "#8e8e8e"
        },
        {
          "type": "color",
          "id": "actions_color",
          "label": "Actions Color",
          "default": "#8e8e8e"
        },
        {
          "type": "color",
          "id": "like_heart_color",
          "label": "Like Heart Color",
          "default": "#8e8e8e"
        },
        {
          "type": "header",
          "content": "Layout"
        },
        {
          "type": "range",
          "id": "border_radius",
          "min": 0,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Border Radius",
          "default": 8
        },
        {
          "type": "range",
          "id": "block_padding",
          "min": 8,
          "max": 32,
          "step": 2,
          "unit": "px",
          "label": "Block Padding",
          "default": 16
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 50,
          "step": 2,
          "unit": "px",
          "label": "Top Margin",
          "default": 6
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 50,
          "step": 2,
          "unit": "px",
          "label": "Bottom Margin",
          "default": 6
        }
      ]
    },
    {
      "name": "Facebook Comment",
      "type": "facebook_comment",
      "settings": [
        {
          "type": "image_picker",
          "id": "profile_image",
          "label": "Profile Picture Image"
        },
        {
          "type": "color",
          "id": "profile_center_color",
          "label": "Fallback Profile Color",
          "default": "#4a90e2",
          "info": "Used when no custom image is uploaded"
        },
        {
          "type": "header",
          "content": "Comment Content"
        },
        {
          "type": "text",
          "id": "author_name",
          "label": "Author Name",
          "default": "Sarah Johnson"
        },
        {
          "type": "textarea",
          "id": "comment_text",
          "label": "Comment Text",
          "default": "I absolutely love this product! The quality exceeded my expectations and it arrived quickly."
        },
        {
          "type": "number",
          "id": "reaction_count",
          "label": "Reaction Count",
          "default": 12
        },
        {
          "type": "text",
          "id": "time_stamp",
          "label": "Time Stamp",
          "default": "2d"
        },
        {
          "type": "text",
          "id": "like_text",
          "label": "Like text",
          "default": "Like"
        },
        {
          "type": "text",
          "id": "reply_text",
          "label": "Reply text",
          "default": "Reply"
        },
        {
          "type": "header",
          "content": "Typography"
        },
        {
          "type": "range",
          "id": "author_name_font_size",
          "min": 10,
          "max": 18,
          "step": 1,
          "unit": "px",
          "label": "Author Name Font Size",
          "default": 13
        },
        {
          "type": "range",
          "id": "comment_text_font_size",
          "min": 12,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Comment Text Font Size",
          "default": 15
        },
        {
          "type": "range",
          "id": "meta_font_size",
          "min": 10,
          "max": 16,
          "step": 1,
          "unit": "px",
          "label": "Meta Text Font Size",
          "default": 13
        },
        {
          "type": "checkbox",
          "id": "use_facebook_font",
          "label": "Use Facebook Font (Roboto)",
          "default": false
        },
        {
          "type": "header",
          "content": "Spacing"
        },
        {
          "type": "range",
          "id": "block_padding",
          "min": 8,
          "max": 32,
          "step": 2,
          "unit": "px",
          "label": "Block Padding",
          "default": 16
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 50,
          "step": 2,
          "unit": "px",
          "label": "Top Margin",
          "default": 6
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 50,
          "step": 2,
          "unit": "px",
          "label": "Bottom Margin",
          "default": 6
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Social media comments",
      "category": "Testimonials",
      "blocks": [
        {
          "type": "tiktokcomment",
          "settings": {
            "username": "megan_rose",
            "comment_text": "Swear I'm a real person lol just got mine yesterday and I immediately tried it out on my 24 hour post shave stubble - gone instantly and so dang smooth. Even my mom snatched it out of my hands to try! I swear she wanted to ask for the second one I bought 😂",
            "timestamp": "5d ago",
            "like_count": "2.8K"
          }
        },
        {
          "type": "instagramcomment",
          "settings": {
            "username": "brooke.burnett",
            "comment_text": "Ok. For my hairy girls. My hair grows SO fast. And it's thick and I have PCOS and I'm fair skinned and my hair is dark. I am in no way being compensated for saying this..... But WHAT IN THE WITCH CRAFT?!?! I bought this being with the skepticism.... And it works. I don't know how it works, but it works.",
            "timestamp": "1w",
            "like_count": "156 likes"
          }
        },
        {
          "type": "facebook_comment",
          "settings": {
            "author_name": "Amanda Emerson",
            "comment_text": "I'm always skeptical of these 'made for TV' vibe products. But I bit the bullet and gave it a shot. Got mine yesterday and 'erased' all my leg hair in about 10 min. Even had to test on my husbands legs to see if it would work on more coarse hair (mine is pretty fine). He woke up from his nap with a small mysterious bald patch on his calf. 😂 I don't understand how this works but it does and I'm never shaving with THIS.",
            "time_stamp": "3d",
            "reaction_count": 47
          }
        },
        {
          "type": "instagramcomment",
          "settings": {
            "username": "brooke.burnett",
            "comment_text": "Ok. For my hairy girls. My hair grows SO fast. And it's thick and I have PCOS and I'm fair skinned and my hair is dark. I am in no way being compensated for saying this..... But WHAT IN THE WITCH CRAFT?!?! I bought this being with the skepticism.... And it works. I don't know how it works, but it works.",
            "timestamp": "1w",
            "like_count": "156 likes"
          }
        }
      ]
    }
  ]
}
{% endschema %}