<script setup lang="ts">
import {useMouse, useWindowScroll} from "@vueuse/core"

const y = ref<number>()
const x = ref<number>()

const handleMouseMove = (event: MouseEvent) => {
  x.value = event.clientX
  y.value = event.clientY
}
</script>

<template>
<section
  class="overflow-hidden"
  @mousemove="handleMouseMove"
>
  <div class="about__grid py-16">
    <NuxtPicture
      class="overflow-hidden rounded-r-xl col-span-1 sm:col-span-2 h-0 min-h-full"
      src="/images/sweep.jpg"
    ></NuxtPicture>
    <div class="rounded-xl p-4 lg:p-8 bg-slate-100 col-start-2 sm:col-start-auto col-span-2 sm:col-span-1 text-2xl mr-4 sm:mr-0">
      Осуществляем профессиональные комплексные услуги по уборке помещений для частных и корпоративных клиентов.
    </div>
    <div class="rounded-xl p-4 lg:p-8 bg-slate-100 mx-4 sm:mx-0 md:mr-16 col-span-3 sm:col-span-1 text-base">
      Высокое качество выполняемых услуг обеспечивается за счет использования современной профессиональной техники с использованием качественных моющих средств нашими опытными специалистами.
    </div>
    <div class="rounded-xl p-4 lg:p-8 bg-slate-100 ml-4 sm:mx-0 md:ml-16 sm:col-start-2 col-span-2 text-base">
      Нам дорог каждый клиент и важно каждое мнение о нас, поэтому мы с максимальной ответственностью подходим к своей работе! Наша работа делает мир чище! Благодаря нашему труду пространство становиться чистым, а чистота залог здоровья и приятно находиться в убранном чистом месте, пусть это будет ваша квартира, дом или рабочее место! Нам важно, чтобы наши клиенты оставались с нами и рекомендовали нас как ответственных профессионалов своего дела!
    </div>
    <NuxtPicture
      class="overflow-hidden rounded-l-xl col-span-1 sm:col-span-2 h-0 min-h-full"
      src="/images/building-window.jpg"
    ></NuxtPicture>
  </div>

  <div
    class="about__blob-wrapper"
    :style="{
      transform: `translate(${x}px, ${y}px)`
    }"
  >
    <div
      class="about__blob bg-lime-500"
    ></div>
  </div>
</section>
</template>

<style scoped lang="postcss">
.about__grid {
  --about-grid-gap: 16px;
  --about-grid-magic: calc(calc(var(--about-grid-gap) * 4) / 3);

  display: grid;
  gap: var(--about-grid-gap);
  grid-template-columns:
    calc(calc(100% - var(--col-width)) / 2)
    repeat(3,
      calc(calc(var(--col-width) / 3) - var(--about-grid-magic))
    )
    calc(calc(100% - var(--col-width)) / 2);
  grid-auto-rows: auto;

  @media screen and (max-width: 1280px) {
    grid-template-columns: auto repeat(3, 1fr) auto;
  }

  @media screen and (max-width: 639px) {
    grid-template-columns: repeat(3, 1fr)
  }
}

:deep(img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__blob-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;

  @media (hover: none) {
    display: none;
  }
}

.about__blob {
  width: 300px;
  height: 300px;
  border-radius: 999px;
  filter: blur(96px);
  transform: translate(-50%, -50%);
}
</style>
