import { createRouter, createWebHashHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import HomeViewOffensive from '../views/HomeViewOffensive.vue';

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/offensive',
      name: 'offensive',
      component: HomeViewOffensive,
    },
    {
      path: '/mixed',
      name: 'mixed',
      component: () => import('../views/HomeViewMixed.vue'),
    },
    {
      path: '/docs',
      name: 'Docs',
      meta: {
        title: 'Docs',
        group: 'navbar',
        // group: "navbar",
      },
      redirect: '/docs/introduction',
      component: () => import('../views/DocsView.vue'),
      children: [
        {
          path: '/docs/introduction',
          name: 'DocsIntroduction',
          meta: {
            title: 'Docs',
            // group: "navbar",
          },
          alias: ['/docs/Introduction'],
          component: () => import('../views/docs/IntroductionDocs.vue'),
        },
        {
          path: '/docs/how-it-works',
          name: 'DocsHowItWorks',
          meta: {
            title: 'Docs',
            // group: "navbar",
          },
          alias: ['/docs/How-It-Works'],
          component: () => import('../views/docs/HowItWorks.vue'),
        },
        {
          path: '/docs/liquidity-management',
          name: 'DocsLiquidityManagement',
          meta: {
            title: 'Docs',
            // group: "navbar",
          },
          alias: ['/docs/Liquidity-Management'],
          component: () => import('../views/docs/LiquidityManagement.vue'),
        },
        {
          path: '/docs/ai-agent',
          name: 'DocsAiAgent',
          meta: {
            title: 'Docs',
            // group: "navbar",
          },
          alias: ['/docs/AI-agent'],
          component: () => import('../views/docs/AiAgent.vue'),
        },
        {
          path: '/docs/tokenomics',
          name: 'DocsTokenomics',
          meta: {
            title: 'Docs',
            // group: "navbar",
          },
          alias: ['/docs/Tokenomics'],
          component: () => import('../views/docs/TokenomicsDocs.vue'),
        },
        {
          path: '/docs/staking',
          name: 'DocsStaking',
          meta: {
            title: 'Docs',
            // group: "navbar",
          },
          alias: ['/docs/Staking'],
          component: () => import('../views/docs/StakingDocs.vue'),
        },
        {
          path: '/docs/faq',
          name: 'DocsFaq',
          meta: {
            title: 'Docs',
            // group: "navbar",
          },
          alias: ['/docs/FAQ'],
          component: () => import('../views/docs/FaqDocs.vue'),
        },
      ],
    },
  ],
  scrollBehavior(to, from, savedPosition) {
    // Überprüfen, ob der Zielort ein Hash enthält
    if (to.hash) {
      // Warten, bis die Komponente geladen ist und dann zum Ziel scrollen
      return {
        el: to.hash,
        behavior: 'smooth', // Optional: für sanftes Scrollen
        top: 80,
      };
    }
    return savedPosition || { top: 0 }; // Scrollen zum Anfang der Seite, falls kein Hash vorhanden ist
  },
});

export default router;
