<template>
  <div class="home">
    <home-hero />
    <home-brands />
    <home-collection />
  </div>
</template>

<script setup>
import {onMounted} from "vue";
import {useRoute} from "vue-router";
import {useUserActivation} from "@/composables/user";
import {useAppStore} from "@/stores/app.js";
import HomeHero from "@/components/home/home-hero.vue";
import HomeCollection from "@/components/home/home-collection.vue";
import HomeBrands from "@/components/home/home-brands.vue";

const route = useRoute()
const appStore = useAppStore()

const { activateUser } = useUserActivation();

onMounted( async () => {
  if (route.name === "activate-user") {
    await activateUser()
  }

  if (route.name === "reset-password") {
    await appStore.setActiveState('new-password')
  }
})
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  gap: 125px;
}
</style>