// La oferta — tres movimientos, un solo camino.
// Acordeón editorial + banner oscuro con el camino completo y línea que se dibuja.
function Camino() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.camino;
  const [open, setOpen] = React.useState('arranque');
  const [pre, emph, post] = C.h2[lang];
  const bannerRef = React.useRef(null);

  // Draw the path line when the banner scrolls into view.
  React.useEffect(() => {
    const el = bannerRef.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); }
    }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <section id="camino" className="section divider-top" style={{ background: 'var(--paper)' }} data-screen-label="camino">
      <div className="container">
        <header className="reveal" style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24,
          paddingBottom: 24, marginBottom: 0, flexWrap: 'wrap',
        }}>
          <div>
            <div className="kicker kicker-accent">{C.kicker[lang]}</div>
            <h2 className="h-section" style={{ marginTop: 14, maxWidth: '18ch' }}>
              {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>
          </div>
          <span className="kicker" style={{ maxWidth: '34ch', textAlign: 'right' }}>{C.founder_note[lang]}</span>
        </header>

        <div className="movs-list" style={{ marginTop: 28 }}>
          {C.items[lang].map((m, i) => {
            const isOpen = open === m.id;
            return (
              <div
                key={m.id}
                className="mov-row reveal"
                data-delay={i + 1}
                data-open={isOpen}
                onClick={() => setOpen(isOpen ? null : m.id)}
                role="button"
                aria-expanded={isOpen}
              >
                <div className="v-num">{m.num}</div>
                <div>
                  <div className="v-title">{m.title}</div>
                  <div className="v-type">§ {m.type}</div>
                </div>
                <p className="v-summary">{m.summary}</p>
                <div className="v-price">
                  <b>{m.price}</b>
                  <span>{m.founder}</span><br />
                  <span>{m.cadence}</span>
                </div>
                <div className="v-toggle" aria-hidden>+</div>

                {isOpen && (
                  <div className="mov-expanded" onClick={e => e.stopPropagation()}>
                    <div className="ve-dur">{m.duration}</div>
                    <dl className="ve-rows">
                      {m.rows.map(([dt, dd]) => (
                        <div className="ve-row" key={dt}>
                          <dt>{dt}</dt>
                          <dd>{dd}</dd>
                        </div>
                      ))}
                    </dl>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <div className="path-banner reveal" ref={bannerRef}>
          <div className="pb-kicker">§ {C.path_label[lang]}</div>
          <div className="path-steps">
            <span className="ps-line" aria-hidden />
            {C.path[lang].map(([name, price, dur]) => (
              <div className="path-step" key={name}>
                <div className="ps-name">{name}</div>
                <div className="ps-price">{price}</div>
                <div className="ps-dur">{dur}</div>
              </div>
            ))}
          </div>
          <p className="pb-note">{C.path_note[lang]}</p>
        </div>
      </div>
    </section>
  );
}

window.Camino = Camino;