<template>
  <NavbarModerno />

  <div class="main-content">
    <HeroSection
      @scroll-to-convocatoria="scrollToConvocatoria"
      @virtual-tour="openVirtualTour"
    />

    <ProcessSection />

    <ConvocatoriasSection/>

    <!-- <ProgramasSection/> -->

    <StatsSection />

    <NoticiasSection/>


    <ContactSection />

  </div>


  <FooterModerno />
</template>

<script setup>
import { ref, markRaw } from "vue"
import { message } from "ant-design-vue"


import NavbarModerno from '../components/nabvar.vue'
import FooterModerno from '../components/footer.vue'

import HeroSection from './WebPageSections/HeroSection.vue'
import ProcessSection from './WebPageSections/ProcessSection.vue'
import ConvocatoriasSection from './WebPageSections/ConvocatoriasSection.vue'
import ProgramasSection from './WebPageSections/ProgramasSection.vue'
import StatsSection from './WebPageSections/StatsSection.vue'
import NoticiasSection from './WebPageSections/NoticiasSection.vue'
import ModalidadesSection from './WebPageSections/ModalidadesSection.vue'
import ContactSection from './WebPageSections/ContactSection.vue'




const scrollToConvocatoria = () => {
  const el = document.getElementById("convocatorias")
  el?.scrollIntoView({ behavior: "smooth", block: "start" })
}

const openVirtualTour = () => {
  // pon aquí tu URL real
  window.open("https://example.com", "_blank", "noopener,noreferrer")
}

</script>

<style scoped>
.main-content {
  min-height: 100vh;
}
</style>