{%- liquid
  assign button_variant = variant | default: 'primary'
  assign button_href = href | default: '#'
  assign button_classes = 'inline-flex min-h-11 items-center justify-center rounded-md px-6 py-3 text-sm font-semibold no-underline transition-colors'

  case button_variant
    when 'secondary'
      assign button_classes = button_classes | append: ' border border-white bg-transparent text-white hover:bg-white hover:text-black'
    when 'tertiary'
      assign button_classes = button_classes | append: ' px-0 text-white underline underline-offset-4 hover:no-underline'
    when 'transparent'
      assign button_classes = button_classes | append: ' border border-white/60 bg-black/20 text-white hover:bg-black/35'
    else
      assign button_classes = button_classes | append: ' bg-white text-black hover:bg-white/90'
  endcase
-%}

<a href="{{ button_href }}" class="{{ button_classes }}">
  {{- text | escape -}}
</a>

<div
  x-data='counter'
>
  Let's get physical
  <div x-text='count'>12</div>
  <button @click='increment()' class=''>+1</button>
</div>

{%- liquid
  assign padding_top = section.settings.padding_top
  assign padding_bottom = section.settings.padding_bottom
  assign padding_top_class = ''
  assign padding_bottom_class = ''

  case padding_top
    when 'sm'
      assign padding_top_class = 'pt-5 lg:pt-8'
    when 'base'
      assign padding_top_class = 'pt-8 lg:pt-16'
    when 'md'
      assign padding_top_class = 'pt-12 lg:pt-20'
    when 'lg'
      assign padding_top_class = 'pt-14 lg:pt-30'
  endcase

  case padding_bottom
    when 'sm'
      assign padding_bottom_class = 'pb-5 lg:pb-8'
    when 'base'
      assign padding_bottom_class = 'pb-8 lg:pb-16'
    when 'md'
      assign padding_bottom_class = 'pb-12 lg:pb-20'
    when 'lg'
      assign padding_bottom_class = 'pb-14 lg:pb-30'
  endcase
-%}

{{ padding_top_class }} {{ padding_bottom_class }}

{% assign class = class | default: 'justify-center' %}

<a
  href='https://www.google.com/maps'
  target='_blank'
  class='flex items-center gap-2.5 {{ class }}'
>
  {% render 'icon-google-rating' %}
  <span class='text-5xl font-bold -tracking-[0.06em] leading-none'>4.9</span>
  <div class='flex flex-col justify-between'>
    {% render 'icon-stars' %}
    <span class='mt-2 opacity-80'> based on 288 reviews</span>
  </div>
</a>

<hr class='border-gray-100 mt-6'>
<div class='pt-6 lg:pt-12 flex items-start gap-4'>
  <div>
    {% render 'icon-truck', class: 'size-6 text-black' %}
  </div>
  <p class='leading-normal'>
    Orders placed by 2pm PT are fulfilled same-day. Once fulfilled, ships in 5-8 business days unless an expedited
    shipping option available to your address is selected at checkout.
  </p>
</div>

{%- liquid
  if show_variants == null
    assign show_variants = show_variants | default: false
  endif
  assign randomId = 'now' | date: '%N' | modulo: 100
  assign newColors = false
  for tag in product.tags
    if tag contains 'New colors'
      assign newColors = true
    endif
  endfor

  assign new_arrivals = product.collections | where: 'handle', 'new-arrivals'
  assign unique_variants = product.variants | where: 'available', true | map: 'option2' | uniq
-%}

<article
  data-product='{{ product.id }}-{{ randomId }}'
>
  <a
    href='{{ product.url }}'
    class='bg-gray-100 mb-5 block h-auto aspect-square w-full relative'
  >
    <div class='absolute top-6 right-6 text-sm flex gap-3'>
      {% if newColors %}
        <div class='px-3 py-1.5 bg-black text-white rounded-lg font-semibold'>New colors</div>
      {% endif %}
      {% if new_arrivals.size > 0 %}
        <div class='px-3 py-1.5 bg-black text-white rounded-lg font-semibold'>New</div>
      {% endif %}
    </div>

    {% if product.selected_or_first_available_variant.featured_media != blank %}
      {{
        product.selected_or_first_available_variant.featured_media
        | image_url: width: 1000
        | image_tag:
          loading: 'lazy',
          width: 1000,
          height: 1000,
          class: 'relative active h-auto aspect-square w-full object-cover mix-blend-multiply'
      }}
    {% elsif product.featured_image %}
      {{
        product.featured_image
        | image_url: width: 1000
        | image_tag:
          loading: 'lazy',
          width: 1000,
          height: 1000,
          class: 'relative active h-auto aspect-square w-full object-cover mix-blend-multiply'
      }}
    {% endif %}
    {% if show_variants %}
      {%- for value in unique_variants -%}
        {%- assign unique_variant = product.variants | where: 'option2', value | first -%}
        {%- if unique_variant.featured_media.preview_image != blank -%}
          {% capture class %}
            img-variant-{{ unique_variant.id }} relative h-auto aspect-square w-full object-cover mix-blend-multiply hidden
          {% endcapture %}
          {{
            unique_variant.featured_media.preview_image
            | image_url: width: 1000
            | image_tag: loading: 'lazy', width: 1000, height: 1000, class: class
          }}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  </a>

  <a href='{{ product.url }}' class='block'>
    <div
      data-oke-star-rating
      data-oke-reviews-product-id='shopify-{{ product.id }}'
    >
      {{ product.metafields.okendo.StarRatingSnippet }}
    </div>
    <div class='text-lg text-black font-semibold leading-[24px] tracking-tight mt-[16px]'>
      {{ product.title }}
    </div>
    <div class='text-sm text-gray-800 mt-[8px]'>
      {{ product.type }}
    </div>
    <div class='text-lg text-black font-semibold leading-[24px] tracking-tight mt-[12px]'>
      {% if product.compare_at_price > product.price %}
        <span class='text-[#F9423A]'>{{ product.price | money }}</span>
        <s class='text-gray-500'>{{ product.compare_at_price | money }}</s>
      {% else %}
        {{ product.price | money }}
      {% endif %}
    </div>
  </a>

  {% if show_variants %}
    <div class='max-w-full'>
      <div class='flex gap-[6px] mt-[20px] flex-nowrap snap-x overflow-x-auto overflow-y-hidden scrollbar'>
        {%- for value in unique_variants -%}
          {%- assign unique_variant = product.variants | where: 'option2', value | first -%}
          {%- if unique_variant.featured_media.preview_image != blank -%}
            
            <button
              class='
                bg-gray-100 flex-shrink-0 size-16 block border border-solid  !rounded
                {% if forloop.index0 == 0 %}
                border-[#4541408F]
                {% else %}
                border-transparent
                {% endif %}
              '
              onclick="
                const container = document.querySelector('article[data-product=\'{{ product.id }}-{{ randomId }}\']');
                container.querySelectorAll('img.active').forEach((el) => el.classList.replace('active', 'hidden'));
                container.querySelector('.img-variant-{{ unique_variant.id }}').classList.replace('hidden', 'active');
                container.querySelectorAll('a[href=\'{{ product.url }}\']').forEach((el) => el.href = '{{ product.url }}/?variant={{ unique_variant.id }}');
                container.querySelectorAll('button').forEach((el) => {el.classList.replace('border-[#4541408F]', 'border-transparent')});
                this.classList.replace('border-transparent', 'border-[#4541408F]');
              "
              href='{% if unique_variant.id != null %}{{ product.url }}/?variant={{ unique_variant.id }}{% else %}{{ product.url }}{% endif %}'
            >
              {{
                unique_variant.featured_media.preview_image
                | image_url: width: 104
                | image_tag:
                  loading: 'lazy',
                  width: 104,
                  height: 104,
                  class: 'relative h-auto aspect-square object-cover mix-blend-multiply object-center w-16'
              }}
            </button>
          {%- endif -%}
        {%- endfor -%}
      </div>
    </div>
  {% endif %}
</article>

{% liquid
  assign discount_title = block.settings.discount_title | default: 'Buy More, Save More'
  assign discount_description = block.settings.discount_description | default: 'Buy 4 items and save 10% off your first order'
  assign discount_code = block.settings.discount_code | default: 'BUY4SAVE10'
%}

<div
  class='relative flex items-center justify-between rounded-lg bg-gray-200 px-8 py-5 font-figtree gap-3'
>
  <div class='absolute left-0 top-1/2 size-6 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white'></div>
  <div class='absolute right-0 top-1/2 size-6 -translate-y-1/2 translate-x-1/2 rounded-full bg-white'></div>
  <div>
    <h3 class='text-xl font-semibold text-black'>
      {{ discount_title }}
    </h3>
    {% if discount_description %}
      <p class='font-figtree text-lg font-normal text-gray-500'>
        {{ discount_description }}
      </p>
    {% endif %}
  </div>
  <div
    class='rounded-md border border-dashed border-gray-425 px-2 py-1.5 text-xl text-black'
  >
    {{ discount_code }}
  </div>
</div>