web_Admision/front/src/components/WebPage.vue

<!-- ContenidoPrincipal.vue (refactorizado) -->
<template>
  <NavbarModerno />

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

    <ProcessSection />

    <ConvocatoriasSection
      @show-modal="showModal"
      @open-preinscripcion="openPreinscripcion"
    />

    <ProgramasSection :facultades="facultades" />

    <StatsSection />

    <NoticiasSection :noticias="noticias" />

    <ModalidadesSection :modalidades="modalidades" />

    <ContactSection />
  </div>

  <PreinscripcionModal
    v-model:visible="preinscripcionModalVisible"
    :facultades="facultades"
    @submit="submitPreinscripcion"
  />

  <FooterModerno />
</template>

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

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

// Secciones
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'
import PreinscripcionModal from './WebPageSections//modal/PreinscripcionModal.vue'


// Iconos
import {
  MedicineBoxOutlined,
  BuildOutlined,
  CodeOutlined,
  BookOutlined,
  TrophyOutlined,
  BankOutlined,
  ExperimentOutlined,
  UserOutlined,
} from "@ant-design/icons-vue"

// Estado
const preinscripcionModalVisible = ref(false)

// Datos (estáticos → const, no ref)
const facultades = [
  {
    id: "1",
    nombre: "Ciencias de la Salud",
    carreras: [
      {
        id: 1,
        nombre: "Medicina Humana",
        grado: "Bachiller",
        descripcion: "Formación médica integral con prácticas desde primer año",
        vacantes: 50,
        puntaje: "1800+",
        icono: markRaw(MedicineBoxOutlined),
      },
      {
        id: 2,
        nombre: "Enfermería",
        grado: "Bachiller",
        descripcion: "Cuidado integral de la salud",
        vacantes: 60,
        puntaje: "1500+",
        icono: markRaw(UserOutlined),
      },
    ],
  },
  {
    id: "2",
    nombre: "Ingenierías",
    carreras: [
      {
        id: 3,
        nombre: "Ingeniería Civil",
        grado: "Bachiller",
        descripcion: "Diseño y construcción de infraestructura",
        vacantes: 80,
        puntaje: "1700+",
        icono: markRaw(BuildOutlined),
      },
      {
        id: 4,
        nombre: "Ingeniería de Sistemas",
        grado: "Bachiller",
        descripcion: "Desarrollo de software e inteligencia artificial",
        vacantes: 100,
        puntaje: "1600+",
        icono: markRaw(CodeOutlined),
      },
    ],
  },
  {
    id: "3",
    nombre: "Derecho y Humanidades",
    carreras: [
      {
        id: 5,
        nombre: "Derecho",
        grado: "Bachiller",
        descripcion: "Formación jurídica integral",
        vacantes: 120,
        puntaje: "1550+",
        icono: markRaw(BookOutlined),
      },
      {
        id: 6,
        nombre: "Psicología",
        grado: "Bachiller",
        descripcion: "Ciencias del comportamiento humano",
        vacantes: 70,
        puntaje: "1450+",
        icono: markRaw(UserOutlined),
      },
    ],
  },
]

const modalidades = [
  {
    id: 1,
    nombre: "Admisión Ordinaria",
    descripcion: "Examen de conocimientos generales",
    estado: "Abierto",
    estadoColor: "success",
    color: "#1890ff",
    icono: markRaw(BookOutlined),
  },
  {
    id: 2,
    nombre: "Evaluación de Talentos",
    descripcion: "Para deportistas y artistas destacados",
    estado: "Próximamente",
    estadoColor: "orange",
    color: "#faad14",
    icono: markRaw(TrophyOutlined),
  },
  {
    id: 3,
    nombre: "Traslado Externo",
    descripcion: "Estudiantes de otras universidades",
    estado: "Cerrado",
    estadoColor: "red",
    color: "#ff4d4f",
    icono: markRaw(BankOutlined),
  },
  {
    id: 4,
    nombre: "Segunda Carrera",
    descripcion: "Para profesionales graduados",
    estado: "Abierto",
    estadoColor: "success",
    color: "#52c41a",
    icono: markRaw(ExperimentOutlined),
  },
]

const noticias = [
  {
    id: 1,
    titulo: "Nuevo Laboratorio de Investigación",
    descripcion: "Inauguramos el moderno laboratorio de ciencias con tecnología de punta.",
    fecha: "15 Nov 2023",
    categoria: "Infraestructura",
    tagColor: "blue",
    imagen:
      "https://images.unsplash.com/photo-1532094349884-543bc11b234d?auto=format&fit=crop&w=600&q=80",
  },
  {
    id: 2,
    titulo: "Convenio Internacional",
    descripcion: "Firmamos acuerdo con universidad europea para intercambio estudiantil.",
    fecha: "10 Nov 2023",
    categoria: "Internacional",
    tagColor: "green",
    imagen:
      "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=600&q=80",
  },
  {
    id: 3,
    titulo: "Resultados Publicados",
    descripcion: "Consulta los resultados del examen de admisión extraordinario.",
    fecha: "5 Nov 2023",
    categoria: "Resultados",
    tagColor: "red",
    imagen:
      "https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=600&q=80",
  },
]

// Métodos
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")
}

const openPreinscripcion = () => {
  preinscripcionModalVisible.value = true
}

const showModal = (type) => {
  console.log("Mostrar modal:", type)
}

const submitPreinscripcion = () => {
  message.success("Preinscripción iniciada exitosamente")
  preinscripcionModalVisible.value = false
}
</script>

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