/* global React, Section, Eyebrow */
// Process.jsx — 10 · "Antes de ingresar" step-by-step

const STEPS = [
  { n: '01', title: 'Conversamos tu caso', text: 'Conocemos la situación del adulto mayor, sus cuidados actuales y sus necesidades.' },
  { n: '02', title: 'Coordinamos una visita', text: 'Te invitamos a recorrer los espacios y resolver todas tus preguntas con calma.' },
  { n: '03', title: 'Evaluamos las necesidades', text: 'Revisamos juntos el nivel de autonomía y el tipo de acompañamiento adecuado.' },
  { n: '04', title: 'Definimos juntos el ingreso', text: 'Si corresponde, acordamos los pasos con claridad, tiempo y confianza.' },
];

function Process() {
  return (
    <Section id="proceso" bg="sand">
      <div className="mr-sectionhead">
        <Eyebrow>Antes de tomar una decisión</Eyebrow>
        <h2 className="mr-h2">Una buena decisión necesita información, tiempo y confianza</h2>
        <p className="mr-lead" style={{ marginTop: 16, maxWidth: '58ch' }}>
          Antes de cualquier ingreso conversamos con la familia para conocer la situación, las
          rutinas y los cuidados principales de tu ser querido.
        </p>
      </div>
      <ol className="mr-steps">
        {STEPS.map((s) => (
          <li key={s.n} className="mr-step">
            <span className="mr-step__n">{s.n}</span>
            <div>
              <h3 className="mr-h3" style={{ fontSize: 'var(--step-2)' }}>{s.title}</h3>
              <p className="mr-body mr-muted" style={{ marginTop: 6 }}>{s.text}</p>
            </div>
          </li>
        ))}
      </ol>
    </Section>
  );
}

window.Process = Process;