main.js

// Colección principal de secciones disponibles (Set)
const seccionesDisponibles = new Set(["inicio", "servicios", "precios", "contacto"]);

// Orden de navegación (Array)
const ordenMenu = ["inicio", "servicios", "precios", "contacto"];

// Etiquetas amigables para la navegación (Map)
const etiquetas = new Map([
	["inicio", "Inicio"],
	["servicios", "Servicios"],
	["precios", "Precios"],
	["contacto", "Contacto"]
]);

const app = document.getElementById("app");
const menu = document.getElementById("menu-principal");
const footer = document.getElementById("footer-dinamico");

const planes = [
	{ plan: "Basico", incluye: "1 pagina + formulario", precio: "USD 60", tiempo: "3 dias" },
	{ plan: "Pro", incluye: "Hasta 5 paginas + SEO basico", precio: "USD 140", tiempo: "7 dias" },
	{ plan: "Premium", incluye: "Tienda simple + soporte", precio: "USD 220", tiempo: "10 dias" }
];

function limpiarApp() {
	app.innerHTML = "";
}

function crearCard(titulo) {
	const section = document.createElement("section");
	section.className = "card";
	const h2 = document.createElement("h2");
	h2.textContent = titulo;
	section.appendChild(h2);
	return section;
}

function renderInicio() {
	const card = crearCard("Bienvenido");
	const texto = document.createElement("p");
	texto.textContent = "Explora nuestras secciones usando la barra de navegacion superior.";
	card.appendChild(texto);
	app.appendChild(card);
}

function renderServicios() {
	const card = crearCard("Servicios destacados");

	const listaServicios = [
		"Landing pages",
		"Sitios web corporativos",
		"Mantenimiento mensual"
	];

	const ul = document.createElement("ul");

	// Uso de while para recorrer lista de servicios
	let indice = 0;
	while (indice < listaServicios.length) {
		const li = document.createElement("li");
		li.textContent = listaServicios[indice];
		ul.appendChild(li);
		indice += 1;
	}

	card.appendChild(ul);
	app.appendChild(card);
}

function renderPrecios() {
	const card = crearCard("Tabla de planes");
	const table = document.createElement("table");

	const caption = document.createElement("caption");
	caption.textContent = "Comparacion de planes mensuales";
	table.appendChild(caption);

	const thead = document.createElement("thead");
	const trHead = document.createElement("tr");
	const columnas = ["Plan", "Incluye", "Precio", "Tiempo de entrega"];

	// Uso de for clásico
	for (let i = 0; i < columnas.length; i += 1) {
		const th = document.createElement("th");
		th.scope = "col";
		th.textContent = columnas[i];
		trHead.appendChild(th);
	}

	thead.appendChild(trHead);
	table.appendChild(thead);

	const tbody = document.createElement("tbody");

	// Uso de for...of
	for (const plan of planes) {
		const tr = document.createElement("tr");
		tr.innerHTML = `
			<td>${plan.plan}</td>
			<td>${plan.incluye}</td>
			<td>${plan.precio}</td>
			<td>${plan.tiempo}</td>
		`;
		tbody.appendChild(tr);
	}

	table.appendChild(tbody);
	card.appendChild(table);
	app.appendChild(card);
}

function renderContacto() {
	const card = crearCard("Formulario de contacto");
	const form = document.createElement("form");
	form.action = "#";
	form.method = "post";

	form.innerHTML = `
		<label for="nombre">Nombre</label>
		<input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required maxlength="50">

		<label for="correo">Correo</label>
		<input type="email" id="correo" name="correo" placeholder="tucorreo@ejemplo.com" required>

		<label for="mensaje">Mensaje</label>
		<textarea id="mensaje" name="mensaje" rows="5" minlength="10" maxlength="500" required></textarea>

		<div class="acciones">
			<button type="submit">Enviar</button>
			<button type="reset">Limpiar</button>
		</div>
	`;

	card.appendChild(form);
	app.appendChild(card);
}

const renderizadores = new Map([
	["inicio", renderInicio],
	["servicios", renderServicios],
	["precios", renderPrecios],
	["contacto", renderContacto]
]);

function marcarActivo(idSeccion) {
	const enlaces = menu.querySelectorAll("a");
	enlaces.forEach((enlace) => {
		if (enlace.dataset.seccion === idSeccion) {
			enlace.classList.add("activo");
		} else {
			enlace.classList.remove("activo");
		}
	});
}

function cambiarSeccion(idSeccion) {
	// Uso de if para validar secciones existentes
	if (!seccionesDisponibles.has(idSeccion)) {
		return;
	}

	limpiarApp();

	// Uso de switch para decidir renderizado
	switch (idSeccion) {
		case "inicio":
		case "servicios":
		case "precios":
		case "contacto": {
			const render = renderizadores.get(idSeccion);
			if (render) {
				render();
			}
			break;
		}
		default:
			renderInicio();
	}

	marcarActivo(idSeccion);
}

function construirMenu() {
	ordenMenu.forEach((idSeccion) => {
		const a = document.createElement("a");
		a.href = "#";
		a.dataset.seccion = idSeccion;
		a.textContent = etiquetas.get(idSeccion) || idSeccion;

		a.addEventListener("click", (event) => {
			event.preventDefault();
			cambiarSeccion(idSeccion);
		});

		menu.appendChild(a);
	});
}

function construirFooter() {
	const year = new Date().getFullYear();
	footer.innerHTML = `<small>${year} - Antonio Vega Studio. Todos los derechos reservados.</small>`;
}

function iniciarApp() {
	construirMenu();
	construirFooter();
	cambiarSeccion("inicio");
}

iniciarApp();