/* global React */
const { useEffect: pUseEffect, useRef: pUseRef, useState: pUseState } = React;

function Proceso() {
  const stageRef = pUseRef(null);
  const [step, setStep] = pUseState(0);

  const steps = [
    { n: 1, t: 'Contacto inicial', p: 'Llámanos o escríbenos por WhatsApp. Te atenderemos en oficina en horario comercial.', tags: ['Sin coste', 'Sin compromiso', 'Horario comercial'] },
    { n: 2, t: 'Visita y medición', p: 'Nuestro personal técnico se desplaza a tu casa, escucha lo que necesitas e iniciamos el proyecto con medidas reales.', tags: ['Misma semana', 'Equipo propio', 'Málaga y Costa del Sol'] },
    { n: 3, t: 'Planificación y presupuesto', p: 'En 5-7 días tienes el presupuesto. Una vez aprobado, comenzamos: definición de espacios, selección de materiales y planificación de obra.', tags: ['5-7 días', 'Precio cerrado', 'Por escrito'] },
    { n: 4, t: 'Ejecución de la obra', p: 'Profesionales autorizados y seguimiento total del proyecto. Comunicación directa cliente-empresa durante toda la obra.', tags: ['Profesionales autorizados', 'Seguimiento total', 'Plazos firmados'] },
    { n: 5, t: 'Entrega y garantía', p: 'Tranquilidad y garantía sobre el proyecto tras su ejecución. Tu hogar renovado, exactamente como lo acordamos.', tags: ['Garantía', 'Dossier final', 'Postventa real'] },
  ];

  pUseEffect(() => {
    const onScroll = () => {
      if (!stageRef.current) return;
      const rect = stageRef.current.getBoundingClientRect();
      const total = stageRef.current.offsetHeight - window.innerHeight;
      const progressed = Math.min(Math.max(-rect.top / total, 0), 1);
      const i = Math.min(steps.length - 1, Math.floor(progressed * steps.length));
      setStep(i);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="proceso" style={{ padding: 0 }}>
      <div style={{ padding: 'clamp(96px, 12vw, 160px) 0 40px' }}>
        <SectionHead
          eyebrow="Proceso"
          title="Cinco pasos. Cero sorpresas."
          subtitle="Así trabajamos cada proyecto, sea un baño o una reforma integral."
        />
      </div>
      <div className="proceso-stage" ref={stageRef}>
        <div className="proceso-sticky">
          <div className="proceso-track">
            {steps.map((s, i) => {
              const photos = [
                'imagenes/paso-1-contacto.webp?v=10',
                'https://malaga.reparamostuhogar.com/wp-content/uploads/2026/01/WhatsApp-Image-2026-01-19-at-18.30.50.jpeg',
                'imagenes/paso-3-planificacion.webp?v=10',
                'https://malaga.reparamostuhogar.com/wp-content/uploads/2026/01/WhatsApp-Image-2026-01-19-at-18.21.38-1.jpeg',
                'imagenes/paso-5-entrega.webp?v=10',
              ];
              return (
                <article key={s.n} className={"proceso-item " + (i === step ? 'active' : '')}>
                  <div className="proceso-text">
                    <div className="step-num">{String(s.n).padStart(2, '0')}</div>
                    <h3>{s.t}</h3>
                    <p>{s.p}</p>
                    <div className="step-tags">
                      {s.tags.map(t => <span key={t} className="step-tag">{t}</span>)}
                    </div>
                  </div>
                  <div className="proceso-visual"
                       style={{ transform: i === step ? 'scale(1)' : 'scale(1.06)' }}>
                    <img src={photos[i]} alt={`Paso ${s.n} · ${s.t}`} loading="lazy" className="proceso-visual-img" />
                    <span className="proceso-visual-label">{`Paso ${s.n} · ${s.t}`}</span>
                  </div>
                </article>
              );
            })}
            <div className="proceso-progress">
              {steps.map((s, i) => (
                <div key={s.n} className="proceso-progress-bar">
                  <span style={{ width: i <= step ? '100%' : '0%' }} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Proceso = Proceso;