<template>
  <q-layout>
    <q-no-ssr>
      <header-primary />
    </q-no-ssr>
    <mobile-nav />

    <q-page-container class="no-padding" role="main">
      <router-view />
    </q-page-container>

    <reasons-section />
    <info-section />
    <question-section />

    <footer-component />
  </q-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import { storeToRefs } from 'pinia';
import FooterComponent from 'src/components/footer/FooterComponent.vue';
import HeaderPrimary from 'src/components/header/HeaderPrimary.vue';
import InfoSection from 'src/components/sections/InfoSection.vue';
import QuestionSection from 'src/components/sections/QuestionSection.vue';
import ReasonsSection from 'src/components/sections/ReasonsSection.vue';
import MobileNav from 'src/components/ui/MobileNav.vue';
import { useMobileStore } from 'src/stores/mobileNav';

export default defineComponent({
  name: 'HomeLayout',
  components: {
    HeaderPrimary,
    QuestionSection,
    InfoSection,
    ReasonsSection,
    FooterComponent,
    MobileNav,
  },
  setup() {
    const mobileStore = useMobileStore();
    const { isOpenNav } = storeToRefs(mobileStore);

    return { isOpenNav };
  },
});
</script>

<style lang="scss" scoped></style>
