<style>
  @media (min-width: 1024px) {
    #shopify-section-{{ section.id }} .lg\:items-start {
        align-items: center;
    }
  }
</style>

<section class="bg-gray-900 text-cream overflow-hidden" id="red-light-therapy">
  <div
    class="relative pb-20 pt-40 md:pt-60 md:pb-35 laptop:pt-100 container md:grid md:grid-cols-12  md:gap-x-18"
  >
    <span class="absolute w-full h-1 bg-current opacity-20 top-0 left-0"></span>
    <div class="hidden md:block md:col-span-4 h3 m-0" data-animation="split">{{ section.settings.xuhao }}</div>
    <h3 class="md:col-span-8 m-0" data-animation="split">{{ section.settings.heading }}</h3>
    <span
      class="absolute w-full h-1 bg-current opacity-20 bottom-0 left-0"
    ></span>
  </div>
  <div
    data-animation="parallax"
    data-start="bottom bottom"
    data-end="+=100%"
    data-start-at="0"
    data-speed="1.5"
  >


    <div
      class="container items-end md:grid md:grid-cols-12 md:gap-x-12 laptop:gap-x-18 relative lg:items-start"
    >
      <div class="md:col-span-4 pr-30 md:pr-0 lg:pr-10 laptop:pr-60 mb-100 md:mb-0">
        <div class="pb-100">
          <h3 class="h4 mb-20" data-animation="split">{{ section.settings.title }}</h3>
          <div class="mb-30 grid gap-y-10 laptop:pr-30">
            {% for block in section.blocks %}
            <div class="flex gap-x-10 md:gap-x-18" data-animation="moveUp">
              <div
                class="w-[3.6rem] h-[3.6rem] p-5 flex relative items-center justify-center leading-none flex-shrink-0"
              >
                <span
                  class="w-full h-full rounded-full border border-current opacity-20 absolute left-0 top-0"
                ></span
                >{{ block.settings.xuhao }}
              </div>
              <div class="pr-20 lg:pr-40">
                {{ block.settings.text }}
              </div>
            </div>
            {% endfor %}
          </div>
          <div data-animation="moveUp">
            <button
              class="btn btn--secondary w-full md:w-auto"
              type="button"
              data-scroll-to="#order"
              data-offset="header"
            >
              Order Now
              <div class="btn__icon">
           <span class="svg-wrapper" style="width: 15px;">
              {{- 'icon-arrow.svg' | inline_asset_content -}}
           </span>
              </div>
            </button>
          </div>
        </div>
      </div>
      <div class="md:col-span-8 relative" data-animation="light-controller">
        <div class="grid grid-cols-4 md:grid-cols-2">
          <div class="col-span-3 md:col-span-1">
            <div class="relative">
              <span
                class="absolute left-30 top-30 right-10 rounded-full bg-orange opacity-40 blur-3xl h-full"
                data-light-shadow=""
                data-lamp-shadow=""
              ></span>
              <picture
                class="w-full h-auto flex w-full h-auto relative"
                style="--aspect: {{ section.settings.image0.aspect_ratio }}"
                ><img
                  class="block w-full w-full h-auto relative"
                  src="{{ section.settings.image0 | img_url:'' }}"
                  alt="{{ section.settings.image0.alt }}"
                  width="{{ section.settings.image0.width }}"
                  height="{{ section.settings.image0.height }}"
                  draggable="false"
              ></picture>
              <picture
                class="w-full h-auto flex w-full h-auto absolute left-0 right-0 top-0 opacity-0 object-contain object-top"
                style="--aspect: {{ section.settings.image1.aspect_ratio }}"
                data-lamp-on=""
                ><img
                  class="block w-full w-full h-auto relative"
                  src="{{ section.settings.image1 | img_url:'' }}"
                  alt="{{ section.settings.image1.alt }}"
                  width="{{ section.settings.image1.width }}"
                  height="{{ section.settings.image1.height }}"
                  draggable="false"
              ></picture>
            </div>
          </div>
          <div class="flex items-center px-12 col-span-1 md:relative">
            <div
              class="absolute text-xxs laptop:text-xs uppercase leading-none pb-20 right-0 bottom-full md:left-80 laptop:left-100 md:right-auto md:top-1/2 md:-translate-y-1/2"
              data-animation="fade"
            >
              <div>Hold and move <span class="opacity-60"> to</span></div>
              <div><span class="opacity-60">change the light</span></div>
            </div>
            <div data-drag-controller="" data-lenis-prevent="">
              <svg
                class="w-50 laptop:w-70 h-auto overflow-visible"
                width="70"
                height="287"
                viewbox="0 0 70 287"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M36 1L36 177.5L36 285" stroke="#FCF6EC"></path>
                <path d="M39 1L33 1" stroke="currentColor"></path>
                <path d="M39 231H33" stroke="currentColor"></path>
                <path d="M39 258H33" stroke="currentColor"></path>
                <path d="M39 272H33" stroke="currentColor"></path>
                <path d="M39 57H33" stroke="currentColor"></path>
                <path d="M39 29H33" stroke="currentColor"></path>
                <path d="M39 15L33 15" stroke="currentColor"></path>
                <path d="M39 286H33" stroke="currentColor"></path>
                <g class=" cursor-grab" style="transform: translateY(38%)">
                    <circle cx="35" cy="143" r="34.5" fill="#372C27"
                        stroke="currentColor"></circle>
                    <circle cx="35" cy="143" r="7" fill="currentColor"></circle>
                    <circle cx="35" cy="143" r="6.5" stroke="currentColor"
                        stroke-opacity="0.2"></circle>
                    <path
                        d="M45.5 129V129C47.433 129 49 130.567 49 132.5V132.5M24.5 129V129C22.567 129 21 130.567 21 132.5V132.5M45.5 157V157C47.433 157 49 155.433 49 153.5V153.5M24.5 157V157C22.567 157 21 155.433 21 153.5V153.5"
                        stroke="currentColor"></path>
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "LP 9",
  "blocks": [
    {
      "type": "item",
      "name": "item",
      "settings": [
        {
          "type": "text",
          "id": "xuhao",
          "label": "序号"
        },              
        {
          "type": "textarea",
          "id": "text",
          "label": "text"
        }
      ]
    }    
  ],
  "settings": [
    {
      "type": "text",
      "id": "xuhao",
      "label": "序号"
    },   
    {
      "type": "textarea",
      "id": "heading",
      "label": "heading"
    },
    {
      "type": "textarea",
      "id": "title",
      "label": "title"
    },
    {
      "type": "image_picker",
      "id": "image0",
      "label": "image 0"
    },    
    {
      "type": "image_picker",
      "id": "image1",
      "label": "image 1"
    }      
  ],
  "presets": [{"name": "LP 9"}]
}
{% endschema %}
