// shaiAcademy — Forms part 1
// Inscripción (wizard), Pago, Grupo, Evaluación física, Settings

/* ============================================================
   1) FORM — INSCRIPCIÓN / MATRÍCULA (Wizard, 4 steps)
   ============================================================ */
const FormInscripcion = () => {
  const [step, setStep] = React.useState(0);
  const [nombre, setNombre] = React.useState('');
  const [dniOk, setDniOk] = React.useState(false);

  const steps = [
    { label: 'Atleta',     hint: 'Datos personales' },
    { label: 'Apoderado',  hint: 'Tutor legal' },
    { label: 'Plan',       hint: 'Disciplina y horario' },
    { label: 'Resumen',    hint: 'Firma y envío' },
  ];

  return (
    <div className="page">
      <FormHeader
        eyebrow="Matrícula · Temporada 2026"
        title={<>Nueva <em>inscripción</em></>}
        meta={<>
          <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em'}}>BORRADOR</div>
          <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)'}}>ID MAT-2026-0109</div>
          <div className="tiny muted" style={{marginTop: 4}}>Iniciado 18 abr · 14:32</div>
        </>}
      />

      <div className="wizard-progress"><span style={{width: ((step + 1) / 4 * 100) + '%'}}></span></div>

      <div className="form-shell">
        <FormSteps steps={steps} current={step} onJump={setStep}/>

        <div>
          {step === 0 && (
            <>
              <FormSection title="Sobre la atleta" desc="Usa el DNI para autocompletar desde RENIEC. Puedes cargar la foto al final.">
                <Field label="DNI" required hint="8 dígitos">
                  <Input placeholder="12345678" mono prefix="PE" suffix={<button className="btn btn-dark btn-sm" onClick={() => setDniOk(true)} style={{margin: -4}}>Buscar</button>}/>
                  {dniOk && <DniResult name="Camila Reyes Torres" nacimiento="14 mar 2011"/>}
                </Field>

                <div className="fld-grid">
                  <Field label="Nombres" required success={dniOk ? 'Verificado con RENIEC' : null}>
                    <Input value={dniOk ? 'Camila' : ''} placeholder="Primer nombre" ok={dniOk}/>
                  </Field>
                  <Field label="Apellidos" required>
                    <Input value={dniOk ? 'Reyes Torres' : ''} placeholder="Apellidos" ok={dniOk}/>
                  </Field>
                  <Field label="Fecha de nacimiento" required hint="DD/MM/AAAA">
                    <Input value={dniOk ? '14/03/2011' : ''} placeholder="DD/MM/AAAA" mono/>
                  </Field>
                  <Field label="Sexo" required>
                    <Select options={['Seleccionar…', 'Femenino', 'Masculino', 'Prefiero no decirlo']}/>
                  </Field>
                  <Field label="Colegio">
                    <Input placeholder="Nombre del colegio"/>
                  </Field>
                  <Field label="Grado">
                    <Select options={['1° Primaria', '2° Primaria', '3° Primaria', '4° Primaria', '5° Primaria', '6° Primaria', '1° Secundaria', '2° Secundaria', '3° Secundaria', '4° Secundaria', '5° Secundaria']}/>
                  </Field>
                  <Field label="Alergias / condiciones médicas" span="2" hint="Importante para entrenadores y plan nutricional">
                    <Textarea rows={3} placeholder="Ej: asma leve, alergia al maní, lente de contacto…"/>
                  </Field>
                </div>
              </FormSection>

              <FormSection title="Foto de perfil" desc="La usaremos en tu CV deportivo y en la ficha del equipo.">
                <Dropzone title="Sube una foto de la atleta" hint="JPG o PNG · mínimo 400×400" icon="user"/>
              </FormSection>
            </>
          )}

          {step === 1 && (
            <>
              <FormSection title="Apoderado principal" desc="Persona responsable legal. Recibirá comunicados, facturas y el enlace para firmar.">
                <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="Relación" required>
                    <Select options={['Madre', 'Padre', 'Tutor/a legal', 'Abuelo/a', 'Tío/a']}/>
                  </Field>
                  <Field label="Nombres y apellidos" required span="2">
                    <Input placeholder="Nombre completo"/>
                  </Field>
                  <Field label="Celular" required hint="WhatsApp">
                    <Input placeholder="999 888 777" mono prefix="+51"/>
                  </Field>
                  <Field label="Email" required>
                    <Input placeholder="nombre@ejemplo.com" type="email"/>
                  </Field>
                  <Field label="Dirección" span="2">
                    <Input placeholder="Av. / Jr. / Calle — número — distrito"/>
                  </Field>
                </div>
              </FormSection>

              <FormSection title="Contacto secundario" desc="Opcional — alguien más a quien llamar en emergencias.">
                <div className="fld-grid">
                  <Field label="Nombre">
                    <Input placeholder="Contacto alterno"/>
                  </Field>
                  <Field label="Celular">
                    <Input placeholder="999 888 777" mono prefix="+51"/>
                  </Field>
                </div>
              </FormSection>
            </>
          )}

          {step === 2 && (
            <>
              <FormSection title="Disciplina" desc="¿Qué deporte va a practicar Camila?">
                <div className="radio-group" style={{gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))'}}>
                  <RadioCard label="Voleibol" desc="6 grupos · mixto" selected/>
                  <RadioCard label="Fútbol" desc="4 grupos · masc/fem"/>
                  <RadioCard label="Atletismo" desc="2 grupos · mixto"/>
                  <RadioCard label="Natación" desc="3 grupos · mixto"/>
                </div>
              </FormSection>

              <FormSection title="Grupo y horario" desc="Solo se muestran grupos donde Camila (14 años, femenino) es elegible.">
                <div className="radio-group" style={{gridTemplateColumns: '1fr'}}>
                  <RadioCard label="Sub-15 Voleibol Femenino · Turno tarde" desc="Lun, Mié, Vie · 17:00–19:00 · Cupos 3/24 · Prof. Laura Salcedo" accent selected/>
                  <RadioCard label="Sub-15 Voleibol Femenino · Turno mañana" desc="Mar, Jue · 08:00–10:00 · Cupos 8/24 · Prof. Laura Salcedo"/>
                  <RadioCard label="Sub-17 Voleibol Femenino" desc="Lun, Mié, Vie · 19:00–21:00 · Cupos 1/24 · Solicita evaluación previa"/>
                </div>
              </FormSection>

              <FormSection title="Plan mensual" desc="Incluye entrenamiento + uniforme de temporada + evaluación trimestral.">
                <div className="radio-group" style={{gridTemplateColumns: '1fr 1fr'}}>
                  <RadioCard label="Básico · S/ 280 / mes" desc="3 sesiones/semana · evaluación mensual"/>
                  <RadioCard label="Competitivo · S/ 380 / mes" desc="5 sesiones/semana · plan nutricional · evaluación quincenal" accent selected/>
                </div>
                <Field label="Cupón / código de descuento" hint="Opcional" style={{marginTop: 18}}>
                  <Input placeholder="Ej: HERMANO-15" mono/>
                </Field>
              </FormSection>
            </>
          )}

          {step === 3 && (
            <>
              <FormSection title="Revisa antes de enviar" desc="Verifica que todo esté correcto. Puedes editar cualquier sección.">
                <div>
                  <RevRow label="Atleta" value="Camila Reyes Torres · DNI 12345678 · 14 años" onEdit={() => setStep(0)}/>
                  <RevRow label="Colegio · Grado" value="Colegio San Agustín · 3° Secundaria" onEdit={() => setStep(0)}/>
                  <RevRow label="Alergias" value="Asma leve (inhalador de rescate en mochila)" onEdit={() => setStep(0)}/>
                  <RevRow label="Apoderado" value="Rocío Torres (madre) · +51 999 888 777" onEdit={() => setStep(1)}/>
                  <RevRow label="Disciplina" value="Voleibol · Sub-15 Femenino · Turno tarde" onEdit={() => setStep(2)}/>
                  <RevRow label="Horario" value="Lun, Mié, Vie · 17:00–19:00 · Prof. Laura Salcedo" onEdit={() => setStep(2)}/>
                  <RevRow label="Plan" value="Competitivo · S/ 380 / mes" onEdit={() => setStep(2)}/>
                </div>
              </FormSection>

              <FormSection title="Consentimiento del apoderado" desc="Al firmar, Rocío Torres autoriza el entrenamiento físico, uso de imagen en redes del club y comparte ficha médica con el staff.">
                <Checkbox label="He leído y acepto el reglamento del club" checked/>
                <Checkbox label="Autorizo el uso de fotos y videos de entrenamiento en redes del club" checked/>
                <Checkbox label="Autorizo atención médica de emergencia si no me puedo contactar" checked/>
                <div className="stack-s" style={{marginTop: 20}}>
                  <div className="eyebrow">Firma del apoderado</div>
                  <SignaturePad signed name="Rocío Torres Vega"/>
                </div>
              </FormSection>

              <div className="card" style={{padding: 20, background: 'var(--ink)', color: 'var(--paper)', marginTop: 24}}>
                <div className="between">
                  <div>
                    <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Total inicial</div>
                    <div style={{fontFamily: 'var(--font-serif)', fontSize: 36, lineHeight: 1, marginTop: 4}}>S/ 380.00</div>
                    <div className="tiny" style={{color: 'var(--ink-4)', marginTop: 4}}>Matrícula + 1ª mensualidad · pago el 01/05</div>
                  </div>
                  <Icon name="money" size={32} stroke={1.2}/>
                </div>
              </div>
            </>
          )}

          <FormFooter
            step={step}
            total={4}
            onPrev={step > 0 ? () => setStep(step - 1) : null}
            onNext={step < 3 ? () => setStep(step + 1) : null}
            onSubmit={step === 3 ? () => {} : null}
            nextLabel={step === 3 ? 'Firmar e inscribir' : 'Continuar'}
            saving={step === 1}
            saved="Guardado hace 12s"
          />
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   2) FORM — REGISTRO DE PAGO (single page)
   ============================================================ */
const FormPago = () => (
  <div className="page">
    <FormHeader
      eyebrow="Boletario · Abril 2026"
      title={<>Registrar <em>pago</em></>}
      meta={<>
        <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em'}}>BORRADOR</div>
        <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)'}}>ID PAY-20260418-0042</div>
      </>}
    />

    <div className="form-shell">
      <div className="form-sidebar">
        <div className="tiny mono" style={{color: 'var(--ink-3)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12}}>En este formulario</div>
        <div className="stack-s">
          {['Atleta & concepto', 'Monto y método', 'Comprobante', 'Notas'].map((s, i) => (
            <div key={s} className="tiny" style={{color: 'var(--ink-3)', padding: '6px 0', borderBottom: '1px solid var(--rule)'}}>
              <span className="mono" style={{marginRight: 10}}>{String(i + 1).padStart(2, '0')}</span>{s}
            </div>
          ))}
        </div>
      </div>

      <div>
        <FormSection title="Atleta y concepto">
          <div className="fld-grid">
            <Field label="Atleta" required hint="Busca por nombre, DNI o dorsal" span="2">
              <Input placeholder="Camila Reyes · DNI 12345678 · Dorsal 07" prefix={<Icon name="search" size={14}/>}/>
            </Field>
            <Field label="Concepto" required>
              <Select options={['Mensualidad', 'Matrícula', 'Uniforme', 'Torneo externo', 'Evaluación médica', 'Otro']} value="Mensualidad"/>
            </Field>
            <Field label="Período" required>
              <Select options={['Abril 2026', 'Mayo 2026', 'Marzo 2026 (atrasado)']} value="Abril 2026"/>
            </Field>
          </div>
        </FormSection>

        <FormSection title="Monto y método de pago">
          <div className="fld-grid">
            <Field label="Monto" required>
              <Input value="380.00" mono prefix="S/" suffix="PEN"/>
            </Field>
            <Field label="Fecha de pago" required>
              <Input value="18/04/2026" mono/>
            </Field>
          </div>

          <div className="fld-label" style={{marginBottom: 10}}><span>Método de pago <span className="req">*</span></span></div>
          <div className="radio-group">
            <RadioCard label="Yape / Plin" desc="QR o número de celular" accent selected/>
            <RadioCard label="Transferencia" desc="BCP / Interbank / BBVA"/>
            <RadioCard label="Efectivo" desc="Recibo interno"/>
            <RadioCard label="Tarjeta" desc="POS · + 3.5% comisión"/>
          </div>

          <div className="fld-grid" style={{marginTop: 20}}>
            <Field label="Código de operación" hint="Aparece en el voucher">
              <Input placeholder="YAPE-123456789" mono/>
            </Field>
            <Field label="Banco / billetera">
              <Select options={['Yape', 'Plin', 'BCP', 'Interbank', 'BBVA', 'Scotiabank']} value="Yape"/>
            </Field>
          </div>
        </FormSection>

        <FormSection title="Comprobante" desc="Sube captura del voucher o foto del depósito.">
          <div className="stack-s" style={{gap: 12}}>
            <Dropzone hint="JPG, PNG, PDF · máx 10 MB" icon="file"/>
            <FileTile name="yape-camila-reyes-abril.jpg" size="243 KB" type="img" progress={100}/>
          </div>
        </FormSection>

        <FormSection title="Notas internas" desc="Solo visible para el equipo administrativo.">
          <Textarea placeholder="Ej: madre pidió descuento por hermano inscrito, pagar mitad ahora y mitad el 30…" rows={3}/>
        </FormSection>

        <FormFooter
          saved="Guardado hace 3s"
          nextLabel="Registrar y enviar comprobante"
          onSubmit={() => {}}
        />
      </div>
    </div>
  </div>
);

/* ============================================================
   3) FORM — CREAR GRUPO / CLASE
   ============================================================ */
const FormGrupo = () => {
  const [dias, setDias] = React.useState(['Lun', 'Mié', 'Vie']);
  const tog = (d) => setDias(dias.includes(d) ? dias.filter(x => x !== d) : [...dias, d]);

  return (
    <div className="page">
      <FormHeader
        eyebrow="Grupos · Temporada 2026"
        title={<>Nuevo <em>grupo</em></>}
        meta={<div className="saving-dot">Borrador · guardado</div>}
      />

      <div className="form-shell">
        <FormSteps steps={[
          { label: 'Identidad', hint: 'Nombre y disciplina' },
          { label: 'Horario', hint: 'Días y duración' },
          { label: 'Staff & cupos', hint: 'Profesores, límite' },
        ]} current={0} onJump={() => {}}/>

        <div>
          <FormSection title="Identidad del grupo" desc="Un nombre claro ayuda a apoderados y alumnos a reconocerlo.">
            <div className="fld-grid">
              <Field label="Nombre del grupo" required span="2">
                <Input placeholder="Sub-15 Voleibol Femenino"/>
              </Field>
              <Field label="Disciplina" required>
                <Select options={['Voleibol', 'Fútbol', 'Atletismo', 'Natación', 'Básquetbol']}/>
              </Field>
              <Field label="Categoría" required hint="Por edad FIVB / FPV">
                <Select options={['Sub-11', 'Sub-13', 'Sub-15', 'Sub-17', 'Juvenil']}/>
              </Field>
              <Field label="Género">
                <Select options={['Femenino', 'Masculino', 'Mixto']}/>
              </Field>
              <Field label="Nivel">
                <Select options={['Iniciación', 'Intermedio', 'Avanzado', 'Competitivo']}/>
              </Field>
              <Field label="Cancha / sede" required span="2">
                <Select options={['Complejo La Molina · Cancha 1', 'Complejo La Molina · Cancha 2', 'Coliseo San Borja', 'Polideportivo Surco']}/>
              </Field>
            </div>
          </FormSection>

          <FormSection title="Horario" desc="Selecciona los días y duración típica de cada sesión.">
            <div className="fld-label" style={{marginBottom: 10}}><span>Días de la semana <span className="req">*</span></span></div>
            <div className="row" style={{gap: 8, flexWrap: 'wrap', marginBottom: 20}}>
              {['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'].map(d => (
                <button key={d} className={`chip ${dias.includes(d) ? 'active' : ''}`} onClick={() => tog(d)}>{d}</button>
              ))}
            </div>

            <div className="fld-grid-3">
              <Field label="Hora inicio" required><Input value="17:00" mono/></Field>
              <Field label="Hora fin" required><Input value="19:00" mono/></Field>
              <Field label="Fecha inicio" required><Input value="01/05/2026" mono/></Field>
            </div>
          </FormSection>

          <FormSection title="Staff y cupos" desc="Puedes asignar más de un profesor por grupo.">
            <div className="fld-grid">
              <Field label="Profesor titular" required>
                <Select options={['Laura Salcedo · Voleibol', 'Andrés Yataco · Voleibol', 'Sofía Huamán · Natación']}/>
              </Field>
              <Field label="Profesor asistente" hint="Opcional">
                <Select options={['—', 'Andrés Yataco', 'Renzo Gamarra', 'Luis Chávez']}/>
              </Field>
              <Field label="Cupos máximos" required>
                <Input value="24" mono suffix="alumnos"/>
              </Field>
              <Field label="Cupos mínimos" hint="Para activar el grupo">
                <Input value="8" mono suffix="alumnos"/>
              </Field>
            </div>
          </FormSection>

          <FormFooter step={0} total={3} onNext={() => {}} saved="Guardado hace 8s"/>
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   4) FORM — EVALUACIÓN FÍSICA / TEST DE CAPACIDADES
   ============================================================ */
const FormEvaluacion = () => (
  <div className="page">
    <FormHeader
      eyebrow="Evaluación trimestral · T1 2026"
      title={<>Test de <em>capacidades</em></>}
      meta={<>
        <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)'}}>EVAL-T1-0024</div>
        <div className="tiny muted">Evaluador: Prof. Laura Salcedo</div>
      </>}
    />

    <div className="form-shell">
      <div className="form-sidebar">
        <div className="card" style={{padding: 16, background: 'var(--paper-2)'}}>
          <Avatar name="Camila Reyes" size="avatar-lg"/>
          <div style={{fontWeight: 500, marginTop: 10}}>Camila Reyes</div>
          <div className="tiny muted">Dorsal 07 · Sub-15 Voleibol</div>
          <div style={{height: 1, background: 'var(--rule)', margin: '14px 0'}}></div>
          <div className="tiny muted">Última evaluación</div>
          <div className="mono tiny" style={{marginTop: 2}}>18 ENE 2026 · Score 72</div>
        </div>
      </div>

      <div>
        <FormSection title="Medidas antropométricas">
          <div className="fld-grid-3">
            <Field label="Talla" required hint="cm"><Input value="162" mono suffix="cm"/></Field>
            <Field label="Peso" required hint="kg"><Input value="52.4" mono suffix="kg"/></Field>
            <Field label="Envergadura" hint="cm"><Input value="165" mono suffix="cm"/></Field>
            <Field label="% Grasa corporal" hint="Bioimpedancia"><Input value="18.2" mono suffix="%"/></Field>
            <Field label="Alcance sin salto" hint="cm desde el suelo"><Input value="208" mono suffix="cm"/></Field>
            <Field label="Alcance con salto" hint="máx. registrado"><Input value="260" mono suffix="cm"/></Field>
          </div>
        </FormSection>

        <FormSection title="Test físicos" desc="Registra el mejor intento de 3. El sistema calcula el percentil contra su grupo.">
          <div className="stack" style={{gap: 0}}>
            {[
              { test: 'Salto vertical (CMJ)', unit: 'cm', v: '52', pct: 84 },
              { test: '30 m velocidad', unit: 's', v: '4.82', pct: 71 },
              { test: 'T-test agilidad', unit: 's', v: '10.4', pct: 66 },
              { test: 'Lanzamiento medicinal (2kg)', unit: 'm', v: '6.8', pct: 78 },
              { test: 'Plancha abdominal', unit: 's', v: '95', pct: 82 },
              { test: 'Sit & reach flexibilidad', unit: 'cm', v: '12', pct: 58 },
            ].map((t, i) => (
              <div key={i} className="row between" style={{padding: '14px 0', borderBottom: '1px solid var(--rule)', gap: 20, flexWrap: 'wrap'}}>
                <div style={{flex: '1 1 180px', minWidth: 0}}>
                  <div style={{fontSize: 14, fontWeight: 500}}>{t.test}</div>
                  <div className="tiny muted">Percentil {t.pct} · Sub-15 Voleibol</div>
                </div>
                <div className="row" style={{gap: 10, flex: 'none'}}>
                  <Input value={t.v} mono suffix={t.unit} style={{width: 110}}/>
                  <div style={{width: 90}}>
                    <div className="tiny mono" style={{color: 'var(--ink-3)'}}>P{t.pct}</div>
                    <div className="bar accent"><span style={{width: t.pct + '%'}}></span></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </FormSection>

        <FormSection title="Habilidades técnicas (subjetivas)" desc="Escala 1–100 del criterio del evaluador. Se usa en el radar de habilidades.">
          <div className="fld-grid">
            {[
              ['Saque', 78], ['Recepción', 82], ['Colocación', 91], ['Ataque', 76], ['Bloqueo', 68], ['Defensa', 85],
            ].map(([k, v]) => (
              <Field key={k} label={k} hint={`Actual: ${v}`}>
                <div className="row" style={{gap: 12, alignItems: 'center'}}>
                  <div className="bar accent" style={{flex: 1, height: 8}}><span style={{width: v + '%'}}></span></div>
                  <Input value={v} mono style={{width: 64, textAlign: 'center'}}/>
                </div>
              </Field>
            ))}
          </div>
        </FormSection>

        <FormSection title="Observaciones del evaluador">
          <Textarea rows={5} placeholder="Fortalezas observadas, áreas de mejora, plan para los próximos 3 meses…" value="Mejora importante en salto vertical (+6 cm vs. enero). Trabajar técnica de bloqueo y resistencia aeróbica. Mantener plan de fuerza."/>
        </FormSection>

        <FormFooter onSubmit={() => {}} nextLabel="Publicar evaluación" saved="Autoguardado · hace 4s"/>
      </div>
    </div>
  </div>
);

/* ============================================================
   5) FORM — SETTINGS (tabbed, long page)
   ============================================================ */
const FormSettings = () => {
  const [tab, setTab] = React.useState('academia');
  const tabs = [
    { id: 'academia',  label: 'Academia' },
    { id: 'branding',  label: 'Marca y logo' },
    { id: 'horarios',  label: 'Turnos & feriados' },
    { id: 'pagos',     label: 'Pagos & facturación' },
    { id: 'notif',     label: 'Notificaciones' },
    { id: 'roles',     label: 'Roles & permisos' },
    { id: 'privacidad',label: 'Privacidad & datos' },
  ];

  return (
    <div className="page">
      <FormHeader
        eyebrow="Academia Gutiérrez · Configuración"
        title={<>Configu<em>ración</em></>}
        meta={<div className="saving-dot">Cambios se guardan automáticamente</div>}
      />

      <div className="settings-shell">
        <div className="settings-tabs" style={{display: 'flex', flexDirection: 'column', gap: 2}}>
          {tabs.map(t => (
            <div key={t.id} className={`settings-tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>{t.label}</div>
          ))}
        </div>

        <div>
          {tab === 'academia' && (
            <>
              <FormSection title="Identidad de la academia">
                <div className="fld-grid">
                  <Field label="Nombre comercial" required><Input value="Academia Gutiérrez"/></Field>
                  <Field label="Razón social" required><Input value="Shai Sport Perú S.A.C."/></Field>
                  <Field label="RUC" required><Input value="20512345678" mono/></Field>
                  <Field label="Fundación"><Input value="Marzo 2018" mono/></Field>
                  <Field label="Zona horaria"><Select options={['America/Lima (GMT-5)', 'America/Bogota', 'America/Mexico_City']}/></Field>
                  <Field label="Idioma por defecto"><Select options={['Español (PE)', 'Español (MX)', 'English']}/></Field>
                  <Field label="Dirección principal" span="2"><Input value="Av. Javier Prado Este 1540, San Isidro, Lima"/></Field>
                </div>
              </FormSection>

              <FormSection title="Contacto público">
                <div className="fld-grid">
                  <Field label="Teléfono"><Input value="01 234-5678" mono prefix="+51"/></Field>
                  <Field label="WhatsApp"><Input value="999 888 777" mono prefix="+51"/></Field>
                  <Field label="Email de contacto"><Input value="hola@academiagutierrez.pe"/></Field>
                  <Field label="Email de facturación"><Input value="facturacion@academiagutierrez.pe"/></Field>
                </div>
              </FormSection>
            </>
          )}

          {tab === 'branding' && (
            <>
              <FormSection title="Marca" desc="Se aplicará a la app de apoderados, CVs deportivos y comprobantes.">
                <div className="fld-grid">
                  <Field label="Logo (color)">
                    <FileTile name="logo-academia.svg" size="24 KB" type="img"/>
                  </Field>
                  <Field label="Logo (monocromo)">
                    <Dropzone title="Subir logo monocromo" hint="SVG recomendado"/>
                  </Field>
                  <Field label="Color primario" span="2">
                    <div className="row" style={{gap: 12, alignItems: 'center', flexWrap: 'wrap'}}>
                      {['#D94F2A', '#1A5F4C', '#2563EB', '#111111', '#7C3AED'].map((c, i) => (
                        <div key={c} style={{width: 48, height: 48, background: c, borderRadius: 8, cursor: 'pointer', border: i === 0 ? '3px solid var(--ink)' : '1px solid var(--rule)'}}></div>
                      ))}
                      <Input value="#D94F2A" mono style={{width: 120}}/>
                    </div>
                  </Field>
                </div>
              </FormSection>
            </>
          )}

          {tab === 'notif' && (
            <>
              <FormSection title="Notificaciones automáticas" desc="Decide qué avisos se envían y por dónde.">
                {[
                  { k: 'Recordatorio de pago · 3 días antes', on: true, canales: 'WhatsApp + Email' },
                  { k: 'Confirmación de pago recibido', on: true, canales: 'WhatsApp' },
                  { k: 'Aviso de falta del día', on: true, canales: 'WhatsApp' },
                  { k: 'Recordatorio de evaluación', on: false, canales: 'Email' },
                  { k: 'Reporte semanal al apoderado', on: true, canales: 'Email · domingos 18:00' },
                  { k: 'Incidente / lesión en entrenamiento', on: true, canales: 'Llamada + WhatsApp · inmediato' },
                ].map((n, i) => (
                  <div key={i} className="row between" style={{padding: '14px 0', borderBottom: '1px solid var(--rule)', gap: 16, flexWrap: 'wrap'}}>
                    <div style={{flex: '1 1 260px', minWidth: 0}}>
                      <div style={{fontSize: 14, fontWeight: 500}}>{n.k}</div>
                      <div className="tiny muted">Canal: {n.canales}</div>
                    </div>
                    <Switch on={n.on}/>
                  </div>
                ))}
              </FormSection>
            </>
          )}

          {tab === 'pagos' && (
            <>
              <FormSection title="Cuentas de cobro">
                <div className="stack-s">
                  <FileTile name="BCP · Soles · ****4821" size="Titular: Shai Sport Perú SAC" type="pdf"/>
                  <FileTile name="Yape · +51 999 888 777" size="Cuenta del administrador" type="img"/>
                </div>
                <button className="btn btn-ghost btn-sm" style={{marginTop: 14}}><Icon name="plus" size={12}/> Agregar cuenta</button>
              </FormSection>

              <FormSection title="Mora y descuentos">
                <div className="fld-grid">
                  <Field label="Día de corte del mes"><Input value="05" mono suffix="cada mes"/></Field>
                  <Field label="% recargo por mora"><Input value="5" mono suffix="%"/></Field>
                  <Field label="Descuento por hermano"><Input value="15" mono suffix="%"/></Field>
                  <Field label="Descuento pronto pago"><Input value="5" mono suffix="% si paga antes del día 3"/></Field>
                </div>
              </FormSection>
            </>
          )}

          {(tab === 'horarios' || tab === 'roles' || tab === 'privacidad') && (
            <FormSection title="Próximamente" desc="Esta sección aún está en desarrollo.">
              <div className="card" style={{padding: 24, background: 'var(--paper-2)', textAlign: 'center'}}>
                <div className="tiny muted">Placeholder</div>
                <div style={{fontFamily: 'var(--font-serif)', fontSize: 24, marginTop: 8}}>En construcción</div>
              </div>
            </FormSection>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { FormInscripcion, FormPago, FormGrupo, FormEvaluacion, FormSettings });