// howwework.jsx — Sección "Cómo trabajamos"

function HowWeWork() {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } },
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const steps = [
    { n: '01', label: 'Nos contás qué hacés', desc: 'Una charla corta para entender tu negocio y qué sistema te viene mejor.' },
    { n: '02', label: 'Configuramos todo', desc: 'Armamos tu acceso, cargamos tus datos y te dejamos operativo en horas.' },
    { n: '03', label: 'Empezás a operar', desc: 'Desde el día uno tenés el sistema funcionando. Sin curvas de aprendizaje largas.' },
  ];

  return (
    <section className="howwework" id="como-trabajamos" ref={ref} data-screen-label="03 Cómo trabajamos">
      <div className="shell">

        <div className={`sec-header reveal ${inView ? 'in' : ''}`}>
          <div>
            <div className="label">Cómo trabajamos</div>
            <h2 style={{ marginTop: 24 }}>Dos formas de <em>empezar</em>.</h2>
          </div>
          <p className="desc">Sin inversión inicial grande ni contratos eternos. Elegís cómo querés trabajar con nosotros.</p>
        </div>

        {/* Modelos */}
        <div className={`hww-models reveal ${inView ? 'in' : ''}`}>

          <div className="hww-card hww-card--featured">
            <div className="hww-card-label">Modelo principal</div>
            <div className="hww-card-icon">
              <Icon.Wallet size={28} />
            </div>
            <h3>Suscripción mensual</h3>
            <p>Pagás una cuota mensual accesible y tenés acceso completo al sistema. Sin inversión inicial, sin sorpresas. Incluye actualizaciones, soporte y todas las mejoras que sumemos.</p>
            <ul className="hww-list">
              <li>Sin costo de entrada</li>
              <li>Actualizaciones incluidas</li>
              <li>Soporte directo por WhatsApp</li>
              <li>Cancelás cuando querés</li>
            </ul>
            <a href="#contacto" className="btn btn-primary" style={{ marginTop: 'auto', alignSelf: 'flex-start' }}>
              Consultar precio <Icon.Arrow />
            </a>
          </div>

          <div className="hww-card">
            <div className="hww-card-label">También disponible</div>
            <div className="hww-card-icon">
              <Icon.Store size={28} />
            </div>
            <h3>Sistema a medida</h3>
            <p>Si necesitás algo 100% personalizado para tu negocio, lo construimos desde cero. Lo diseñamos, desarrollamos y entregamos con tu marca, tus flujos y tus reglas.</p>
            <ul className="hww-list">
              <li>Completamente personalizado</li>
              <li>Tu marca y tu identidad</li>
              <li>Flujos a tu manera</li>
              <li>Propiedad tuya al entregar</li>
            </ul>
            <a href="#contacto" className="btn btn-ghost" style={{ marginTop: 'auto', alignSelf: 'flex-start' }}>
              Hablar del proyecto
            </a>
          </div>

        </div>

        {/* Pasos */}
        <div className={`hww-steps reveal-stagger ${inView ? 'in' : ''}`} style={{ marginTop: 80 }}>
          {steps.map((s) => (
            <div key={s.n} className="hww-step">
              <span className="hww-step-n">{s.n}</span>
              <strong>{s.label}</strong>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

window.HowWeWork = HowWeWork;