// shaiAcademy — Forms part 2
// Asistencia manual, Nutrición, Alta profesor, Justificación (drawer/mobile),
// Incidente/lesión, Agendar evaluación con apoderado

/* ============================================================
   6) FORM — ASISTENCIA MANUAL (bulk, desktop)
   ============================================================ */
const FormAsistenciaManual = () => {
  const ALUMNOS = [
    { n: 'Camila Reyes',    d: '07', st: 'P' },
    { n: 'Valentina Pérez',  d: '03', st: 'P' },
    { n: 'Lucía Medina',     d: '11', st: 'T' },
    { n: 'Mariana Zavala',   d: '14', st: 'A' },
    { n: 'Ana Paula Castillo',d: '05', st: 'P' },
    { n: 'Sofía Guzmán',     d: '09', st: 'J' },
    { n: 'Renata Dávila',    d: '12', st: 'P' },
    { n: 'Isabella Ríos',    d: '04', st: 'P' },
    { n: 'Joaquina Yáñez',   d: '16', st: 'T' },
    { n: 'Andrea Ocampo',    d: '08', st: 'P' },
    { n: 'Fiorella Sánchez', d: '10', st: 'P' },
    { n: 'Luciana Torres',   d: '15', st: '' },
  ];
  const counts = ALUMNOS.reduce((s, a) => { s[a.st] = (s[a.st] || 0) + 1; return s; }, {});

  return (
    <div className="page">
      <FormHeader
        eyebrow="Sub-15 Voleibol · Sesión del Lun 18 abr"
        title={<>Pasar <em>lista</em></>}
        meta={<>
          <div className="mono tiny" style={{color: 'var(--ink-3)'}}>17:00–19:00 · Cancha 1</div>
          <div className="tiny muted" style={{marginTop: 4}}>Prof. Laura Salcedo</div>
        </>}
      />

      <div className="row between" style={{marginBottom: 20, flexWrap: 'wrap', gap: 12}}>
        <div className="row" style={{gap: 8, flexWrap: 'wrap'}}>
          <span className="chip">Todos ({ALUMNOS.length})</span>
          <span className="chip active">Presentes ({counts.P || 0})</span>
          <span className="chip">Tarde ({counts.T || 0})</span>
          <span className="chip">Faltas ({counts.A || 0})</span>
          <span className="chip">Justificados ({counts.J || 0})</span>
        </div>
        <div className="row" style={{gap: 8}}>
          <button className="btn btn-ghost btn-sm"><Icon name="qr" size={14}/> Pase por QR</button>
          <button className="btn btn-dark btn-sm">Marcar todos presentes</button>
        </div>
      </div>

      <div className="card" style={{padding: 0, overflow: 'hidden'}}>
        <div className="tbl-head" style={{padding: '12px 16px', background: 'var(--paper-2)', borderBottom: '1px solid var(--rule)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-3)', display: 'grid', gridTemplateColumns: '44px 1fr auto', gap: 14}}>
          <div>#</div>
          <div>Atleta</div>
          <div>P · T · A · J</div>
        </div>
        {ALUMNOS.map((a, i) => (
          <div key={i} className="att-row">
            <div className="mono" style={{color: 'var(--ink-3)', fontSize: 12}}>{a.d}</div>
            <div className="row" style={{gap: 10, minWidth: 0}}>
              <Avatar name={a.n} size="avatar-sm"/>
              <div style={{minWidth: 0}}>
                <div style={{fontSize: 14, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{a.n}</div>
                <div className="tiny muted">Dorsal {a.d}</div>
              </div>
            </div>
            <div className="att-pills">
              {['P', 'T', 'A', 'J'].map(k => (
                <span key={k} className={`att-pill ${k} ${a.st === k ? 'on' : ''}`}>{k}</span>
              ))}
            </div>
          </div>
        ))}
      </div>

      <FormSection title="Notas de la sesión" desc="Qué se trabajó, observaciones de grupo. Se adjunta al registro.">
        <Textarea rows={4} placeholder="Ej: trabajo técnico de recepción en parejas, 3×8 saltos pliométricos…"/>
      </FormSection>

      <FormFooter saved="Guardado hace 2s" nextLabel="Cerrar lista y notificar" onSubmit={() => {}}/>
    </div>
  );
};

/* ============================================================
   7) FORM — NUTRICIÓN / REGISTRAR COMIDA
   ============================================================ */
const FormNutricion = () => (
  <div className="page">
    <FormHeader
      eyebrow="Plan · Camila Reyes · 18 abr"
      title={<>Registrar <em>comida</em></>}
      meta={<div className="mono tiny" style={{color: 'var(--ink-3)'}}>ALMUERZO · 13:20</div>}
    />

    <div className="form-shell">
      <div className="form-sidebar">
        <div className="stack-s">
          {[
            { k: 'Desayuno',   cal: 520, done: true },
            { k: 'Snack AM',   cal: 180, done: true },
            { k: 'Almuerzo',   cal: 720, done: false, active: true },
            { k: 'Snack PM',   cal: 240, done: false },
            { k: 'Pre-entreno',cal: 160, done: false },
            { k: 'Cena',       cal: 580, done: false },
          ].map((m, i) => (
            <div key={i} className={`form-step ${m.active ? 'active' : m.done ? 'done' : ''}`}>
              <span className="form-step-num">{m.done ? <Icon name="check" size={12}/> : String(i + 1).padStart(2, '0')}</span>
              <div className="form-step-label">
                {m.k}
                <span className="tiny">{m.cal} kcal</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div>
        <FormSection title="Plato principal" desc="Busca en la base nutricional o agrega manualmente.">
          <Field label="Buscar alimento">
            <Input placeholder="Ej: quinua, pollo a la plancha, palta…" prefix={<Icon name="search" size={14}/>}/>
          </Field>

          <div className="stack-s" style={{marginTop: 18}}>
            {[
              { k: 'Pollo a la plancha', p: 180, cal: 320, m: {p: 42, c: 2, g: 14} },
              { k: 'Quinua cocida',      p: 150, cal: 175, m: {p: 6, c: 32, g: 3} },
              { k: 'Palta',              p: 50,  cal: 80,  m: {p: 1, c: 4, g: 7} },
              { k: 'Ensalada mixta',     p: 120, cal: 45,  m: {p: 2, c: 8, g: 1} },
            ].map((it, i) => (
              <div key={i} className="row between" style={{padding: 14, background: 'var(--paper-2)', border: '1px solid var(--rule)', borderRadius: 'var(--r-s)', gap: 12, flexWrap: 'wrap'}}>
                <div style={{flex: '1 1 200px', minWidth: 0}}>
                  <div style={{fontSize: 14, fontWeight: 500}}>{it.k}</div>
                  <div className="tiny muted">P {it.m.p}g · C {it.m.c}g · G {it.m.g}g</div>
                </div>
                <div className="row" style={{gap: 10, flex: 'none'}}>
                  <Input value={it.p} mono suffix="g" style={{width: 100}}/>
                  <div className="tiny mono" style={{color: 'var(--ink-3)', minWidth: 60, textAlign: 'right'}}>{it.cal} kcal</div>
                  <button className="btn btn-ghost btn-sm"><Icon name="x" size={12}/></button>
                </div>
              </div>
            ))}
          </div>

          <button className="btn btn-ghost" style={{marginTop: 14}}><Icon name="plus" size={14}/> Agregar alimento</button>
        </FormSection>

        <FormSection title="Total de la comida">
          <div className="macro-grid">
            <div className="macro-cell">
              <div className="eyebrow">kcal</div>
              <div className="num">620</div>
              <div className="tiny muted">meta 720</div>
            </div>
            <div className="macro-cell" style={{background: 'oklch(0.96 0.04 45)', borderColor: 'var(--accent)'}}>
              <div className="eyebrow">Proteína</div>
              <div className="num">51g</div>
              <div className="tiny muted">meta 55g</div>
            </div>
            <div className="macro-cell">
              <div className="eyebrow">Carbos</div>
              <div className="num">46g</div>
              <div className="tiny muted">meta 80g</div>
            </div>
            <div className="macro-cell">
              <div className="eyebrow">Grasa</div>
              <div className="num">25g</div>
              <div className="tiny muted">meta 22g</div>
            </div>
          </div>
        </FormSection>

        <FormSection title="Foto del plato (opcional)" desc="Nos ayuda a aprender mejor tus porciones y darte mejor feedback.">
          <Dropzone title="Toma una foto o arrastra desde galería" hint="JPG · máx 5 MB" icon="file"/>
        </FormSection>

        <FormFooter saved="Sincronizado" nextLabel="Registrar comida" onSubmit={() => {}}/>
      </div>
    </div>
  </div>
);

/* ============================================================
   8) FORM — ALTA DE PROFESOR / STAFF
   ============================================================ */
const FormProfesor = () => (
  <div className="page">
    <FormHeader
      eyebrow="Staff · Incorporación"
      title={<>Alta de <em>profesor</em></>}
      meta={<div className="mono tiny" style={{color: 'var(--ink-3)'}}>PROF-2026-007</div>}
    />

    <div className="form-shell">
      <FormSteps
        steps={[
          { label: 'Identidad', hint: 'Datos y foto' },
          { label: 'Contrato', hint: 'Modalidad y pago' },
          { label: 'Disciplina', hint: 'Qué enseña' },
          { label: 'Documentos', hint: 'Certificaciones' },
        ]}
        current={0}
        onJump={() => {}}
      />

      <div>
        <FormSection title="Identidad">
          <div className="fld-grid">
            <Field label="DNI" required>
              <Input placeholder="12345678" mono prefix="PE" suffix={<button className="btn btn-dark btn-sm" style={{margin: -4}}>Buscar</button>}/>
            </Field>
            <Field label="Celular" required><Input placeholder="999 888 777" mono prefix="+51"/></Field>
            <Field label="Nombres" required><Input placeholder="Nombre"/></Field>
            <Field label="Apellidos" required><Input placeholder="Apellidos"/></Field>
            <Field label="Fecha nacimiento"><Input placeholder="DD/MM/AAAA" mono/></Field>
            <Field label="Email" required><Input placeholder="prof@ejemplo.com" type="email"/></Field>
            <Field label="Dirección" span="2"><Input placeholder="Calle, número, distrito"/></Field>
          </div>
        </FormSection>

        <FormSection title="Foto de perfil">
          <Dropzone title="Sube una foto profesional" hint="JPG o PNG · 400×400 mínimo" icon="user"/>
        </FormSection>

        <FormSection title="Contrato y pago">
          <div className="fld-grid">
            <Field label="Modalidad" required>
              <Select options={['Planilla (contrato fijo)', 'Honorarios (recibo)', 'Por hora']}/>
            </Field>
            <Field label="Fecha de inicio" required><Input value="01/05/2026" mono/></Field>
            <Field label="Sueldo / tarifa"><Input placeholder="3500" mono prefix="S/" suffix="mensual"/></Field>
            <Field label="Cuenta bancaria (CCI)"><Input placeholder="20-digits" mono/></Field>
          </div>
        </FormSection>

        <FormFooter step={0} total={4} onNext={() => {}} saved="Autoguardado"/>
      </div>
    </div>
  </div>
);

/* ============================================================
   9) FORM — JUSTIFICACIÓN DE FALTA (DRAWER · para apoderado)
   ============================================================ */
const FormJustificacion = () => (
  <div className="page" style={{background: 'var(--paper-3)', minHeight: '100vh', padding: 40, position: 'relative'}}>
    {/* Faux app behind drawer */}
    <div style={{opacity: 0.4, pointerEvents: 'none'}}>
      <FormHeader eyebrow="Panel apoderado · Rocío Torres" title={<>Justificar <em>falta</em></>} meta={<div className="tiny muted">Camila Reyes · Dorsal 07</div>}/>
      <div className="grid-3" style={{marginTop: 20}}>
        <div className="stat"><div className="stat-label">Asistencia abril</div><div className="stat-value">94%</div></div>
        <div className="stat"><div className="stat-label">Faltas · mes</div><div className="stat-value">1</div></div>
        <div className="stat"><div className="stat-label">Justificadas</div><div className="stat-value">1</div></div>
      </div>
    </div>

    <div style={{position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.35)', zIndex: 50}}></div>

    <div className="drawer open" style={{transform: 'translateX(0)'}}>
      <div className="drawer-head">
        <div>
          <div className="eyebrow">Camila Reyes · Sub-15 Voleibol</div>
          <div style={{fontFamily: 'var(--font-serif)', fontSize: 24, lineHeight: 1.1, marginTop: 4}}>Justificar falta</div>
        </div>
        <button className="btn btn-ghost btn-sm"><Icon name="x" size={14}/></button>
      </div>

      <div className="drawer-body">
        <Field label="Fecha de la falta" required>
          <div className="row" style={{gap: 10, flexWrap: 'wrap'}}>
            <div className="chip active">Vie 15 abr</div>
            <div className="chip">Mié 13 abr</div>
            <div className="chip">Lun 11 abr</div>
          </div>
        </Field>

        <Field label="Motivo" required style={{marginTop: 18}}>
          <div className="radio-group" style={{gridTemplateColumns: '1fr 1fr', gap: 8}}>
            <RadioCard label="Enfermedad" selected/>
            <RadioCard label="Cita médica"/>
            <RadioCard label="Viaje familiar"/>
            <RadioCard label="Evaluación escolar"/>
            <RadioCard label="Otro"/>
          </div>
        </Field>

        <Field label="Detalle" hint="Mínimo 20 caracteres" style={{marginTop: 18}}>
          <Textarea rows={4} placeholder="Describe brevemente el motivo…" value="Tuvo fiebre desde la tarde del jueves. Hoy está mejor pero el pediatra indicó reposo 24h adicional."/>
        </Field>

        <Field label="Constancia médica" hint="Opcional · acelera la aprobación" style={{marginTop: 18}}>
          <Dropzone title="Sube foto o PDF" hint="JPG, PDF · máx 5 MB" icon="file"/>
        </Field>

        <div className="card" style={{padding: 14, background: 'var(--paper-2)', marginTop: 18, display: 'flex', gap: 10, alignItems: 'flex-start'}}>
          <div style={{width: 28, height: 28, borderRadius: 999, background: 'var(--ink)', color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none'}}>i</div>
          <div className="tiny" style={{color: 'var(--ink-2)', lineHeight: 1.5}}>
            Las justificaciones se aprueban automáticamente si llegan antes de las 9:00 del día de la clase. Después, requieren validación de la Prof. Laura Salcedo.
          </div>
        </div>
      </div>

      <div className="drawer-foot">
        <button className="btn btn-ghost">Cancelar</button>
        <button className="btn btn-accent">Enviar justificación <Icon name="arrow_right" size={14}/></button>
      </div>
    </div>
  </div>
);

/* ============================================================
   10) FORM — REPORTE DE INCIDENTE / LESIÓN
   ============================================================ */
const FormIncidente = () => {
  const [sev, setSev] = React.useState('med');
  const parts = ['Cabeza', 'Hombro D', 'Hombro I', 'Brazo D', 'Brazo I', 'Torso', 'Espalda', 'Rodilla D', 'Rodilla I', 'Tobillo D', 'Tobillo I', 'Pie D', 'Pie I'];
  const [body, setBody] = React.useState(['Tobillo D']);
  const tog = (p) => setBody(body.includes(p) ? body.filter(x => x !== p) : [...body, p]);

  return (
    <div className="page">
      <FormHeader
        eyebrow="Incidente · Temporada 2026"
        title={<>Reporte de <em>lesión</em></>}
        meta={<>
          <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em'}}>URGENTE</div>
          <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)'}}>INC-2026-0018</div>
        </>}
      />

      <div className="form-shell">
        <div className="form-sidebar">
          <div className="card" style={{padding: 18, background: 'var(--accent)', color: 'var(--paper)'}}>
            <div className="eyebrow" style={{color: 'oklch(0.95 0.03 45)'}}>Ruta del reporte</div>
            <div style={{fontSize: 13, lineHeight: 1.5, marginTop: 10}}>
              1. Profesor completa este formulario<br/>
              2. Se notifica al apoderado por WhatsApp<br/>
              3. Se notifica a admin para seguimiento<br/>
              4. Queda archivado en ficha médica
            </div>
          </div>
        </div>

        <div>
          <FormSection title="Atleta y momento">
            <div className="fld-grid">
              <Field label="Atleta" required span="2">
                <Input placeholder="Buscar por nombre o DNI" value="Valentina Pérez · DNI 87654321 · Dorsal 03" prefix={<Icon name="search" size={14}/>}/>
              </Field>
              <Field label="Fecha" required><Input value="18/04/2026" mono/></Field>
              <Field label="Hora" required><Input value="18:12" mono/></Field>
              <Field label="Contexto" required span="2">
                <Select options={['Entrenamiento regular', 'Partido oficial', 'Partido amistoso', 'Calentamiento', 'Viaje / traslado']} value="Entrenamiento regular"/>
              </Field>
            </div>
          </FormSection>

          <FormSection title="Severidad" desc="Elige la más representativa. Esto determina urgencia de aviso al apoderado.">
            <div className="sev-pick">
              <button className={`sev-btn low ${sev === 'low' ? 'active' : ''}`} onClick={() => setSev('low')}>Leve · rasguño, calambre</button>
              <button className={`sev-btn med ${sev === 'med' ? 'active' : ''}`} onClick={() => setSev('med')}>Moderada · golpe, torcedura</button>
              <button className={`sev-btn high ${sev === 'high' ? 'active' : ''}`} onClick={() => setSev('high')}>Alta · sospecha fractura, desmayo</button>
            </div>
          </FormSection>

          <FormSection title="Zona afectada" desc="Toca las partes del cuerpo involucradas.">
            <div className="body-map-shell">
              <div className="card" style={{padding: 20, background: 'var(--paper-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 280}}>
                <svg viewBox="0 0 80 160" width="140" style={{color: 'var(--ink-3)'}}>
                  <circle cx="40" cy="15" r="10" fill="none" stroke="currentColor" strokeWidth="1.5"/>
                  <path d="M30 25 Q25 40 25 60 L20 90 Q18 110 22 130 L28 155 M30 25 L50 25 Q55 40 55 60 L60 90 Q62 110 58 130 L52 155 M25 40 L10 65 L12 95 M55 40 L70 65 L68 95" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                  <circle cx="68" cy="130" r="5" fill="var(--accent)" opacity="0.6"/>
                </svg>
              </div>
              <div>
                <div className="tiny mono" style={{color: 'var(--ink-3)', marginBottom: 10, letterSpacing: '0.08em', textTransform: 'uppercase'}}>Seleccionar zonas</div>
                <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
                  {parts.map(p => (
                    <span key={p} className={`chip ${body.includes(p) ? 'active' : ''}`} onClick={() => tog(p)}>{p}</span>
                  ))}
                </div>
              </div>
            </div>
          </FormSection>

          <FormSection title="¿Qué pasó?" desc="Narra los hechos. Hora, acción, caída, persona involucrada.">
            <Textarea rows={5} placeholder="Al recibir un remate…" value="Durante rotación, aterrizó mal tras un bloqueo y se torció el tobillo derecho. Aplicamos hielo inmediato por 15 min, no pudo apoyar el pie. Se quedó sentada el resto de la sesión."/>
          </FormSection>

          <FormSection title="Acción tomada">
            <div className="stack">
              <Checkbox label="Hielo / frío local" checked/>
              <Checkbox label="Inmovilización (vendaje, férula)" checked/>
              <Checkbox label="Llamada al apoderado" checked/>
              <Checkbox label="Derivación a centro médico"/>
              <Checkbox label="Traslado en ambulancia"/>
            </div>
          </FormSection>

          <FormSection title="Evidencia (opcional)" desc="Fotos de la zona o video del momento si fue grabado.">
            <Dropzone hint="JPG, PNG, MP4 · máx 25 MB · queda restringido al staff médico"/>
          </FormSection>

          <FormFooter
            saved="Autoguardado cada 10s"
            nextLabel="Enviar reporte y notificar apoderado"
            onSubmit={() => {}}
          />
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   11) FORM — AGENDAR EVALUACIÓN CON APODERADO
   ============================================================ */
const FormAgendar = () => (
  <div className="page">
    <FormHeader
      eyebrow="Reunión de evaluación · T1 2026"
      title={<>Agendar con <em>apoderado</em></>}
      meta={<div className="tiny muted">Se envía por WhatsApp al apoderado</div>}
    />

    <div className="form-shell">
      <div className="form-sidebar">
        <div className="card" style={{padding: 18}}>
          <Avatar name="Camila Reyes" size="avatar-lg"/>
          <div style={{fontWeight: 500, marginTop: 10}}>Camila Reyes</div>
          <div className="tiny muted">Sub-15 Voleibol</div>
          <div style={{height: 1, background: 'var(--rule)', margin: '14px 0'}}></div>
          <div className="tiny muted">Apoderado</div>
          <div style={{fontSize: 13, fontWeight: 500, marginTop: 2}}>Rocío Torres Vega</div>
          <div className="tiny mono" style={{color: 'var(--ink-3)', marginTop: 2}}>+51 999 888 777</div>
        </div>

        <div className="card" style={{padding: 18, marginTop: 12, background: 'var(--ink)', color: 'var(--paper)'}}>
          <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Duración</div>
          <div style={{fontFamily: 'var(--font-serif)', fontSize: 32, lineHeight: 1, marginTop: 4}}>30 min</div>
          <div className="tiny" style={{color: 'var(--ink-4)', marginTop: 6}}>Presencial · Oficina 2</div>
        </div>
      </div>

      <div>
        <FormSection title="Modalidad">
          <div className="radio-group" style={{gridTemplateColumns: 'repeat(3, 1fr)'}}>
            <RadioCard label="Presencial" desc="Oficina del club" selected/>
            <RadioCard label="Videollamada" desc="Google Meet · enlace auto"/>
            <RadioCard label="Llamada" desc="Vía celular"/>
          </div>
        </FormSection>

        <FormSection title="Elige fecha" desc="Solo se muestran días donde Laura Salcedo tiene disponibilidad.">
          <div className="split-2">
            <MiniCal selectedDate={24}/>
            <div>
              <div className="fld-label" style={{marginBottom: 10}}><span>Horarios del Vie 24 abr</span></div>
              <TimeSlots selected="16:30"/>
              <div className="tiny muted mono" style={{marginTop: 16, letterSpacing: '0.08em', textTransform: 'uppercase'}}>Zona horaria: America/Lima (GMT-5)</div>
            </div>
          </div>
        </FormSection>

        <FormSection title="Agenda de la reunión" desc="Estos puntos se incluyen en el mensaje al apoderado.">
          <div className="stack">
            <Checkbox label="Revisar resultados de evaluación trimestral" checked/>
            <Checkbox label="Plan de desarrollo próximos 3 meses" checked/>
            <Checkbox label="Asistencia y compromiso" checked/>
            <Checkbox label="Ajustes nutricionales"/>
            <Checkbox label="Posible convocatoria a selección Sub-15"/>
          </div>

          <Field label="Nota personalizada" hint="Se agrega al final del mensaje" style={{marginTop: 20}}>
            <Textarea rows={3} placeholder="Ej: muy feliz con el progreso de Camila este trimestre, tengo novedades importantes que compartir…"/>
          </Field>
        </FormSection>

        <FormSection title="Vista previa del mensaje">
          <div className="card" style={{padding: 18, background: 'oklch(0.96 0.02 145)', border: '1px solid oklch(0.82 0.10 145)'}}>
            <div className="tiny mono" style={{color: 'oklch(0.35 0.12 145)', letterSpacing: '0.08em'}}>WHATSAPP · ROCÍO TORRES</div>
            <div style={{marginTop: 10, fontSize: 14, lineHeight: 1.6}}>
              Hola Rocío 👋 Soy Laura, profesora de Camila. Me gustaría agendar una reunión <strong>presencial</strong> el <strong>Vie 24 abr · 16:30</strong> para revisar la evaluación T1 y planear los próximos 3 meses.<br/><br/>
              ¿Te queda bien? Si no, acá puedes ver mi disponibilidad: <u>academia.pe/r/laura-04</u>
            </div>
          </div>
        </FormSection>

        <FormFooter saved="Listo para enviar" nextLabel="Enviar invitación" onSubmit={() => {}}/>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  FormAsistenciaManual, FormNutricion, FormProfesor,
  FormJustificacion, FormIncidente, FormAgendar,
});