// ProgramaFamilias-Practica.jsx // Página de práctica (single-file React component). // Requisitos / notas: // - Usa Tailwind CSS (se asume que tu proyecto React ya tiene Tailwind configurado). // - NO recolecta datos reales. El campo "Documento (prueba)" es sólo para datos ficticios. // - Incluye validación cliente y simulación de verificación sin llamadas reales a terceros. import React, { useState } from "react"; export default function ProgramaFamiliasPractica() { const [form, setForm] = useState({ nombre: "", correo: "", region: "", documento: "", // etiqueta claro: solo para pruebas aceptar: false, captcha: false, }); const [status, setStatus] = useState({loading: false, message: "", type: ""}); function handleChange(e) { const { name, value, type, checked } = e.target; setForm(prev => ({...prev, [name]: type === 'checkbox' ? checked : value})); } function validarCorreo(email){ // validación simple return /\S+@\S+\.\S+/.test(email); } function validar(){ if (!form.nombre.trim()) return "Ingrese nombre"; if (!validarCorreo(form.correo)) return "Ingrese correo válido"; if (!form.region) return "Seleccione región"; if (!form.aceptar) return "Debe aceptar la política de privacidad (este es un prototipo)"; if (!form.captcha) return "Confirme que no eres un robot"; return null; } async function handleSubmit(e){ e.preventDefault(); setStatus({loading:false, message: "", type: ""}); const error = validar(); if (error) return setStatus({loading:false, message: error, type: 'error'}); // Simulación de proceso (no enviar datos reales) setStatus({loading:true, message: 'Verificando elegibilidad (simulado)...', type: 'info'}); await new Promise(r => setTimeout(r, 1200)); // Lógica simulada: si el nombre contiene la letra 'a' se considera "elegible" (solo demo) const elegible = /a/i.test(form.nombre); setStatus({loading:false, message: elegible ? '¡Felicidades! Registro de práctica aceptado (simulado).' : 'No eres elegible en esta simulación. Intenta otro nombre.', type: elegible ? 'success' : 'error'}); } function resetForm(){ setForm({nombre:'', correo:'', region:'', documento:'', aceptar:false, captcha:false}); setStatus({loading:false, message:'', type:''}); } return (

ProgramaFamilias — Demo de práctica

Sitio de práctica: no solicites ni almacenes datos reales. Diseño responsivo, validaciones y simulación.

Este campo es opcional y debe usarse solo con datos ficticios para pruebas.

{status.message && (
{status.message}
)}

Importante — Esta página es un prototipo de práctica. No conectes con servicios reales ni compartas información sensible. Para producción implementa HTTPS, protección contra CSRF, validación en servidor y almacenamiento cifrado.

); }