web_Admision/front/src/components/WebPage.vue

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

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

    <!-- Proceso de Admisión -->
    <ProcessSection />

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

    <!-- Programas Académicos -->
    <ProgramasSection :facultades="facultades" />

    <!-- Estadísticas -->
    <StatsSection />

    <!-- Noticias -->
    <NoticiasSection :noticias="noticias" />

    <!-- Modalidades -->
    <ModalidadesSection :modalidades="modalidades" />

    <!-- Contacto -->
    <ContactSection />
  </div>

  <!-- Modal de Preinscripción -->
  <PreinscripcionModal 
    v-model:visible="preinscripcionModalVisible"
    :facultades="facultades"
    @submit="submitPreinscripcion"
  />

  <FooterModerno />
</template>

<script setup>
import { ref } from '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 para programas y modalidades
import { 
  MedicineBoxOutlined,
  BuildOutlined,
  CodeOutlined,
  BookOutlined,
  TrophyOutlined,
  BankOutlined,
  ExperimentOutlined
} from '@ant-design/icons-vue'

// Estado
const preinscripcionModalVisible = ref(false)

// Datos

const facultades = ref([
  {
    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: MedicineBoxOutlined },
      { id: 2, nombre: 'Enfermería', grado: 'Bachiller', descripcion: 'Cuidado integral de la salud', vacantes: 60, puntaje: '1500+', icono: '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: BuildOutlined },
      { id: 4, nombre: 'Ingeniería de Sistemas', grado: 'Bachiller', descripcion: 'Desarrollo de software e inteligencia artificial', vacantes: 100, puntaje: '1600+', icono: CodeOutlined }
    ]
  },
  {
    id: '3',
    nombre: 'Derecho y Humanidades',
    carreras: [
      { id: 5, nombre: 'Derecho', grado: 'Bachiller', descripcion: 'Formación jurídica integral', vacantes: 120, puntaje: '1550+' },
      { id: 6, nombre: 'Psicología', grado: 'Bachiller', descripcion: 'Ciencias del comportamiento humano', vacantes: 70, puntaje: '1450+', icono: 'UserOutlined' }
    ]
  }
])

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

const noticias = ref([
  {
    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?ixlib=rb-1.2.1&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?ixlib=rb-1.2.1&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?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80'
  }
])

// Métodos
const scrollToConvocatoria = () => {
  const element = document.getElementById('convocatorias')
  element?.scrollIntoView({ behavior: 'smooth' })
}

const openVirtualTour = () => {
  window.open('#', '_blank')
}

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

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

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

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