// Cómo entregamos — las cuatro fases, la regla de reutilización (Fuse OS)
// y los estándares innegociables.
function Metodo() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.metodo;
  const [pre, emph, post] = C.h2[lang];
  const meterRef = React.useRef(null);

  // Fuse OS meter bars fill when visible.
  React.useEffect(() => {
    const el = meterRef.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); }
    }, { threshold: 0.5 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const meterRows = lang === 'es'
    ? [['Cliente 1', '20%'], ['Cliente 3', '45%'], ['Cliente 5', '70%']]
    : [['Client 1', '20%'], ['Client 3', '45%'], ['Client 5', '70%']];

  return (
    <section id="metodo" className="section divider-top" style={{ background: 'var(--paper)' }} data-screen-label="metodo">
      <div className="container">
        <header className="reveal" style={{ marginBottom: 'clamp(36px, 5vw, 56px)' }}>
          <div className="kicker kicker-accent">{C.kicker[lang]}</div>
          <h2 className="h-section" style={{ marginTop: 14, maxWidth: '24ch' }}>
            {pre} <span className="mk-emph">{emph}</span>{post}
          </h2>
          <p style={{ marginTop: 16, fontSize: 15.5, color: 'var(--ink-2)', maxWidth: '56ch' }}>{C.body[lang]}</p>
        </header>

        <div className="fases">
          {C.fases[lang].map((f, i) => (
            <div key={f.n} className="fase-row reveal" data-delay={i + 1}>
              <span className="f-num">{f.n}</span>
              <span className="f-label">{f.label}</span>
              <span className="f-dur">{f.dur}</span>
              <p className="f-body">{f.body}</p>
            </div>
          ))}
        </div>

        <div className="os-block reveal" data-delay="2">
          <div>
            <div className="kicker kicker-accent" style={{ marginBottom: 14 }}>{C.os_kicker[lang]}</div>
            <h3 style={{ fontSize: 'clamp(1.5rem, 2.6vw, 2.1rem)', letterSpacing: '-0.015em', marginBottom: 16 }}>
              {C.os_title[lang]}
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--ink-2)' }}>{C.os_body[lang]}</p>
          </div>
          <div className="os-meter" ref={meterRef} aria-label={lang === 'es' ? 'Porcentaje de delivery pre-armado por cliente' : 'Share of delivery pre-built, per client'}>
            <div className="kicker" style={{ marginBottom: 10 }}>
              {lang === 'es' ? '↳ Delivery pre-armado (Fuse OS)' : '↳ Pre-built delivery (Fuse OS)'}
            </div>
            {meterRows.map(([label, w]) => (
              <div className="om-row" key={label}>
                <span className="om-label">{label}</span>
                <span className="om-bar"><i style={{ '--w': w }} /></span>
                <span className="om-val">{w}</span>
              </div>
            ))}
            <div className="caption" style={{ marginTop: 8 }}>
              {lang === 'es' ? 'Al quinto cliente, el plazo baja de 30 días a dos semanas — sin tocar el precio.' : 'By client five, the timeline drops from 30 days to two weeks — without touching the price.'}
            </div>
          </div>
        </div>

        <div className="reveal" style={{ marginTop: 64 }}>
          <span className="kicker">§ {C.estandares_label[lang]}</span>
        </div>
        <div className="std-grid" style={{ marginTop: 16 }}>
          {C.estandares[lang].map((s, i) => (
            <div key={s.title} className="std-cell reveal" data-delay={(i % 2) + 1}>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Metodo = Metodo;