// Instrucciones — guía de uso paso a paso de Cynamonurs (con imágenes).
// Vista propia: setView('instrucciones').

const INSTR_STEPS = [
  {
    n: '01',
    titulo: 'Entra a la app y sube tus taxonomías',
    img: 'assets/instr/paso-01.png',
    cuerpo: 'Pulsa “Entrar a la app”. La primera vez, sube tus tres libros de referencia (diagnósticos, objetivos e intervenciones). Cynamonurs los codifica y los organiza; no se almacenan, solo se transforman para tu lectura.',
    tips: ['Tus documentos quedan en tu sesión.', 'Solo necesitas hacerlo una vez por dispositivo.'],
  },
  {
    n: '02',
    titulo: 'Elige el diagnóstico',
    img: 'assets/instr/paso-02.png',
    cuerpo: 'En el explorador, busca por código o palabra, o navega por dominios y clases. Abre la ficha del diagnóstico y marca sus características definitorias y factores relacionados según tu valoración.',
    tips: ['El buscador encuentra coincidencias en dominio, clase, características y factores.', 'La app irá sugiriendo objetivos relacionados.'],
  },
  {
    n: '03',
    titulo: 'Escribe las manifestaciones',
    img: 'assets/instr/paso-03.png',
    cuerpo: 'Dentro del diagnóstico, usa el campo “Manifestaciones” para describir cómo se presenta en tu paciente. Ese texto aparecerá en el documento final como parte de la valoración.',
    tips: ['Texto libre, con tus palabras.', 'No incluyas datos identificables del paciente, solo iniciales.'],
  },
  {
    n: '04',
    titulo: 'Define el objetivo y la escala por indicador',
    img: 'assets/instr/paso-04.png',
    cuerpo: 'Selecciona el objetivo (resultado esperado) y marca sus indicadores. Cada indicador despliega su propia escala de medición: define la puntuación basal (mantener) y la meta (aumentar a).',
    tips: ['Cada indicador se configura por separado.', 'La escala se relaciona con el indicador que elegiste.'],
  },
  {
    n: '05',
    titulo: 'Aplica la intervención',
    img: 'assets/instr/paso-05.png',
    cuerpo: 'Elige la intervención y marca sus actividades. Igual que los objetivos, las intervenciones están ordenadas por campo y clase para que las encuentres rápido.',
    tips: ['Marca solo las actividades que vas a aplicar.', 'Puedes cambiar la intervención en cualquier momento.'],
  },
  {
    n: '06',
    titulo: 'Revisa, edita y exporta el documento',
    img: 'assets/instr/paso-06.png',
    cuerpo: 'Abre “Ver tabla final”. Verás tu plan completo listo para imprimir. Con “Editar documento” puedes escribir directamente sobre él y guardar tus cambios; luego expórtalo a PDF o compártelo. También puedes guardar el plan como un caso para reutilizarlo.',
    tips: ['“Editar documento” → escribe → “Guardar cambios”.', 'Exporta a PDF o guárdalo como caso.'],
  },
];

const Instrucciones = ({ setView }) => {
  React.useEffect(() => { window.scrollTo({ top: 0 }); }, []);
  return (
    <main className="instr-page fade-in" data-screen-label="Instrucciones — Guía de uso">
      <div className="instr-hero">
        <div className="container">
          <button className="legal-back" onClick={() => { setView('landing'); window.scrollTo({ top: 0 }); }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
            Volver al inicio
          </button>
          <div className="instr-eyebrow">Instrucciones de funcionamiento</div>
          <h1 className="instr-title">Cómo usar <em>Cynamonurs</em>, paso a paso.</h1>
          <p className="instr-sub">
            Una guía breve para ir de tu valoración clínica a un plan de cuidados listo para imprimir. Sigue los
            pasos en orden la primera vez; después, el flujo te saldrá natural.
          </p>
          <div className="instr-flow">
            {INSTR_STEPS.map((s, i) => (
              <React.Fragment key={s.n}>
                <span className="instr-flow-pill">{s.n}</span>
                {i < INSTR_STEPS.length - 1 && <span className="instr-flow-arrow">→</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      <div className="container instr-body">
        {INSTR_STEPS.map((s, i) => (
          <section className={'instr-step' + (i % 2 ? ' rev' : '')} key={s.n} id={'paso-' + s.n}>
            <div className="instr-step-media">
              <div className="instr-shot">
                <div className="instr-shot-bar"><span/><span/><span/></div>
                <image-slot
                  id={'instr-' + s.n}
                  class="instr-slot"
                  shape="rect"
                  placeholder={'Suelta aquí tu captura del paso ' + s.n}
                  src={s.img}
                ></image-slot>
              </div>
            </div>
            <div className="instr-step-text">
              <div className="instr-step-num mono">Paso {s.n}</div>
              <h2 className="instr-step-title">{s.titulo}</h2>
              <p className="instr-step-desc">{s.cuerpo}</p>
              <ul className="instr-tips">
                {s.tips.map((t, k) => (
                  <li key={k}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                    {t}
                  </li>
                ))}
              </ul>
            </div>
          </section>
        ))}

        <div className="instr-cta">
          <div>
            <h3>¿Listo para tu primer plan?</h3>
            <p>Abre el explorador y empieza por un diagnóstico. En minutos tendrás tu tabla lista.</p>
          </div>
          <button className="btn-primary" onClick={() => { setView('gate'); window.scrollTo({ top: 0 }); }}>
            Entrar a la app
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>
    </main>
  );
};

Object.assign(window, { Instrucciones, INSTR_STEPS });