<template>
  <div>
    <Navbar/>
    <div ref="goodsRef" class="space-y-8 mt-4">
      <MainPage/>
    </div>
  </div>
</template>

<script setup>
import {onActivated, onMounted} from "vue";
import {useRouter} from "vue-router";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
import {useSettingsStore} from "@/stores/SettingsStore.js";
import MainPage from "@/components/MainPage/MainPage.vue";
import {useBlocksStore} from "@/stores/BlocksStore.js";
import Navbar from "@/components/Navbar.vue";
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";

defineOptions({
  name: 'Home'
});

const router = useRouter();
const filtersStore = useProductFiltersStore();
const yaMetrika = useYaMetrikaStore();
const haptic = useHapticFeedback();
const settings = useSettingsStore();
const blocks = useBlocksStore();

onActivated(() => {
  console.debug("[Home] Home Activated");
  yaMetrika.pushHit('/', {
    title: 'Главная страница',
  });
  yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_HOME);
});

onMounted(async () => {
  window.document.title = 'Главная страница';
  console.debug("[Home] Home Mounted");
  window.scrollTo(0, 0);
});
</script>

<style scoped>
.filters-status {
  background-color: var(--color-info);
  color: var(--color-info);
  box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
  aspect-ratio: 1;
  border-radius: var(--radius-selector);
  width: .5rem;
  height: .5rem;
  display: inline-block;
}
</style>