<style>
  @media(min-width:750px){
    #shopify-section-{{ section.id }} .left-area{
      max-width: 80%;
    }    
  }
  #shopify-section-{{ section.id }} .left-area .price_block h4{
    display: flex;
    align-items: baseline;
    gap: 2rem;
    margin-bottom:0;
  }
  #shopify-section-{{ section.id }} .left-area .price_block h4 span{
    font-size: 1.6rem;
    color: #666;
    text-decoration: line-through;
  }
  #shopify-section-{{ section.id }} input[type=submit]{
    text-align: center;
  }
  #shopify-section-{{ section.id }} input[type=submit]:hover{
  
  }
</style>

<section class="bg-cream text-gray-900 relative z-2 pb-12 laptop:pb-0" data-animation="3d-showcase" data-header-theme="dark">
  <div data-large-preview-image="">
    <div class="container relative z-2 -mb-1">
      <div class="rounded bg-cream" data-trigger-point="">
        <div
          class="p-20 md:pt-60 laptop:px-30 laptop:pb-30 md:justify-between md:items-end relative md:grid md:grid-cols-12 md:gap-x-12 laptop:gap-x-18"
        >
          <h3 class="h4 mb-15 md:mb-0 md:col-span-4" data-animation="split">
            {{ section.settings.title }}
          </h3>
          <div
            class="pr-50 md:pr-0 lg:pr-50 md:col-span-3 md:col-start-10"
            data-animation="split"
          >
            <p class="max-w-230 mb-0">{{ section.settings.text }}</p>
          </div>
          <span
            class="w-full h-1 absolute left-0 bottom-0 bg-current opacity-20"
          ></span>
        </div>
        <div class="pt-40 md:pt-50 md:pb-80 laptop:pb-150 px-20 laptop:px-30">
          <div class="flex flex-col md:grid md:grid-cols-12 md:gap-x-20">
            <div
              class="md:col-span-3 laptop:col-span-4 order-2 md:order-first"
              data-animation="moveUp"
            >
              <div class="md:max-w-190 md:sticky md:top-110 mb-70 md:mb-0 left-area" id="order">

                <div class="price_block p-12 rounded bg-gray-900 text-cream grid md:gap-y-15 md:p-15 lg:p-20">
                  {% if product.compare_at_price != product.price %}
                    <h4>{{ product.price | money }} <span>{{ product.compare_at_price | money }}</span></h4>
                    {% else %}
                    <h4>{{ product.price | money }}</h4>
                  {% endif %}
                </div>

                
                <div
                  class="rounded bg-gray-900 text-cream grid md:gap-y-15 md:p-15 lg:p-20 mt-20"
                  data-component="color-picker"
                  novalidate=""
                >
                  {% for variant in product.variants %}
                  <div
                    class="lplp-co group flex items-center p-12 md:p-0 cursor-pointer {% if forloop.index == 1 %} is-active{% else %} border-t border-gray-900 border-opacity-20 md:border-0{% endif %}"
                    for="{{ variant.title | handleize }}"
                    data-color="{{ variant.url }}"
                    data-value="{{ variant.id }}"
                    data-image-url="{{ variant.metafields.custom.color | img_url:'' }}"
                    data-color-name="{{ variant.title }}"
                  >
                    <input
                      class="sr-only"
                      type="radio"
                      required=""
                      name="color_option"
                      value="{{ variant.title | handleize }}"
                      data-value="{{ variant.id }}"
                      id="{{ variant.title | handleize }}"
                      {% if forloop.index == 1 %} checked="checked"{% endif %}
                    ><span
                      class="w-[2.8rem] h-[2.8rem] laptop:w-[3.2rem] laptop:h-[3.2rem] mr-8 rounded-full flex-shrink-0 overflow-hidden"
                    >
                      <picture class="w-full h-auto flex" style="--aspect: 1">
                        <img
                          class="block w-full w-full h-full object-cover opacity-0"
                          data-component="lazyload"
                          data-src="{{ variant.metafields.custom.color | img_url:'' }}"
                          alt="{{ variant.metafields.custom.color.alt }}"
                          width="128"
                          height="128"
                          draggable="false"
                      ></picture> </span
                    ><span
                      class="font-medium text-xs laptop:text-sm"
                      >{{ variant.title }}</span
                    >
                  </div>
                  {% endfor %}                
                </div>
                
                <div class="mt-20">
                  {%- form 'product', product-%}
                    
                  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" class="lp-product-variant-id">
                  <input
                    class="btn btn--secondary w-full"
                    type="submit"
                    data-offset="100svh"
                    value="{% if product.available %}Order Now{% else %}Pre-Order Now{% endif %}">
                    
                  {%- endform -%}
                </div>
              </div>
            </div>
            <div
              class="md:col-span-6 laptop:col-span-4 order-3 md:order-2 mb-30 md:mb-0 md:pt-25"
            >
              <div
                id="lp-data-lamp-container"
                class="bg-bronze py-30 bg-opacity-10 rounded aspect-[260/360] relative flex"
                data-lamp-container=""
              >
                <div
                  class="relative h-auto flex-grow w-full flex justify-center overflow-hidden"
                >
                  {% for variant in product.variants %}
                  <picture
                    class="w-full h-auto flex absolute w-full h-full {% if forloop.index != 1 %} opacity-0 pointer-events-none{% endif %}"
                    style="--aspect: 0.2222222222222222"
                    data-color-variant="{{ variant.url }}"
                    data-color-image-mobile=""
                    ><img
                      class="block w-full  w-full h-full object-contain opacity-0"
                      data-component="lazyload"
                      data-src="{{ variant.image | img_url:'' }}"
                      alt="{{ variant.image.alt }}"
                      width="744"
                      height="3348"
                      draggable="false"
                  ></picture>
                  {% endfor %}
                </div>
                <div class="dashed-dimensions dashed-dimensions--height">
                  <span>{{ section.settings.height }}</span>
                </div>
                <div class="dashed-dimensions dashed-dimensions--width">
                  <span>{{ section.settings.width }}</span>
                </div>
                <div class="dashed-dimensions dashed-dimensions--top">
                  <span>{{ section.settings.bottom }}</span>
                </div>
              </div>
            </div>
            <div class="md:col-span-3 md:col-start-10 order-1 md:order-3 mb-40 md:mb-0">
              <div class="md:sticky md:top-110">
                <p class="mb-20">{{ section.settings.anxintiao }}</p>
                <div class="grid gap-y-10">
                  {% for block in section.blocks %}
                  <div class="flex items-center" data-animation="moveUp">
                    <div class="mr-10 flex">
                      <div class="custom-icon custom-icon--small">
                        <img
                          class="w-full h-full object-contain"
                          src="{{ block.settings.icon | img_url:'' }}"
                          alt="{{ block.settings.icon.alt }}"
                        >
                      </div>
                    </div>
                    <p class="mb-0">{{ block.settings.text }}</p>
                  </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
    // Function to handle click events
    function handleClick(event) {
        // Remove 'is-active' class from all elements
        document.querySelectorAll('.lplp-co').forEach(el => el.classList.remove('is-active'));
        
        // Add 'is-active' class to the clicked element
        event.currentTarget.classList.add('is-active');
        
        // Get the data-value of the clicked element
        const value = event.currentTarget.getAttribute('data-value');
        
        // Update the content of the lp-product-variant-id element
        const targetElement = document.querySelector('.lp-product-variant-id');
        targetElement.value = value;
    }

    // Attach click event listeners to all .lplp-co elements
    document.querySelectorAll('.lplp-co').forEach(el => {
        el.addEventListener('click', handleClick);
    });
</script>

{% schema %}
{
  "name": "LP 12",
  "blocks": [
    {
      "type": "item",
      "name": "item",
      "settings": [        
        {
          "type": "textarea",
          "id": "text",
          "label": "text"
        },
        {
          "type": "image_picker",
          "id": "icon",
          "label": "icon"
        }           
      ]
    }    
  ],
  "settings": [        
    {
      "type": "textarea",
      "id": "title",
      "label": "title"
    },    
    {
      "type": "textarea",
      "id": "text",
      "label": "text"
    },   
    {
      "type": "text",
      "id": "width",
      "label": "width"
    },   
    {
      "type": "text",
      "id": "height",
      "label": "height"
    },    
    {
      "type": "text",
      "id": "bottom",
      "label": "bottom"
    }     
  ],
  "presets": [{"name": "LP 12"}]
}
{% endschema %}
