<template>
  <div class="theme-school">
    <LayoutNavigation />

    <LogicielsTitle>
      <template #left-text>Artist</template>
      Opentalent School
      <template #right-text>Manager</template>
    </LogicielsTitle>

    <CommonBanner
      image-src="/images/solutions/school.jpg"
      image-alt="line"
      square-text="École de musique, d'art, de danse, de cirque, conservatoires et MJC"
      logo-src="/images/logo/logiciels/School-Blanc.png"
      :logo-alt-theme="true"
    />

    <CommonMenuScroll :menus="menus" class="mb-6" />

    <CommonActionMenu :actions="stickyMenuActions" />

    <LogicielsSchoolPresentation />

    <LogicielsSchoolAvantages />

    <div v-if="mdAndUp" class="alt-theme">
      <LogicielsSchoolFonctionnalites />
    </div>

    <LogicielsSchoolComparatif />

    <LogicielsSchoolContact />

    <LogicielsSchoolFormations />

    <LogicielsSchoolReviews/>

    <LayoutFAQ  />

    <LayoutFooterSolutions :show-school="false" />

    <LayoutFooter />
  </div>
</template>

<script setup lang="ts">
import type { MenuScroll, ActionMenuItem } from "~/types/interface";
import { ActionMenuItemType } from "~/types/enum/layout";
import { useDisplay } from "vuetify";

const { mdAndUp } = useDisplay()

const menus: Array<MenuScroll> = [
  { anchor: "presentation", label: "Présentation" },
  { anchor: "benefits", label: "Avantages" },
  { anchor: "functionalities", label: "Fonctionnalités" },
  { anchor: "comparative", label: "Comparatif" },
  { anchor: "contact", label: "Contact" },
  { anchor: "webinars", label: "Wébinaires" },
  { anchor: "testimonials", label: "Témoignages" },
];

const stickyMenuActions: Array<ActionMenuItem> = [
  {
    type: ActionMenuItemType.FOLLOW_LINK,
    color: "primary",
    icon: "fa-regular fa-comments icon",
    text: "Nous contacter",
    url: "/nous-contacter",
  },
  {
    type: ActionMenuItemType.FOLLOW_LINK,
    color: "primary",
    icon: "fa-solid fa-circle-info icon",
    text: "Demander une demo",
    url: "/nous-contacter",
  },
  {
    type: ActionMenuItemType.FOLLOW_LINK,
    color: "primary",
    icon: "fa-brands fa-readme icon",
    text: "Brochure",
    url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
  },
  {
    type: ActionMenuItemType.CALL_US,
    color: "secondary",
    icon: "fa-solid fa-phone icon",
    text: "Nous Appeler",
  },
];

</script>

<style scoped lang="scss">
.theme-school {
  --primary-color: #ffffff;
  --secondary-color: #c3e5e7;
  --on-primary-color: #0e2d32;
  --primary-color-alt: #262626;
  --on-primary-color-alt: #c3e5e7;

  --banner-center-image: 40%;

  --action-menu-primary-color: #c3e5e7;
  --action-menu-on-primary-color: #262626;
  --action-menu-secondary-color: #0e2d32;
  --action-menu-on-secondary-color: #ffffff;
}
</style>
