/* Wisdom — Página Metodología: timeline interactivo + Foundation Stack + criterio técnico. */
(function () {
  const { useState } = React;
  const W = window.WISDOM;
  const Arrow = window.WArrow;

  function Timeline() {
    const [active, setActive] = useState(0);
    const p = W.PHASES[active];
    return (
      <section className="section method" id="metodologia">
        <div className="wrap">
          <div className="section-head">
            <p className="eyebrow">Las cinco fases</p>
            <h2>Un ciclo que <span className="gold-text">mejora</span>.</h2>
            <p>Hacé click en cada fase para ver objetivo, qué se hace, entregable y criterio de salida.</p>
          </div>

          <div className="timeline">
            <div className="timeline-track" role="tablist" aria-label="Fases de la metodología">
              {W.PHASES.map((ph, i) => (
                <button key={ph.n} className="tl-node" role="tab" aria-selected={i === active} onClick={() => setActive(i)}>
                  <span className="tl-num">{ph.n}</span>
                  <span className="tl-name">{ph.key}</span>
                  <span className="tl-sub">{ph.sub}</span>
                </button>
              ))}
            </div>

            <div className="tl-detail" role="tabpanel">
              <div className="tl-detail-inner">
                <div className="tl-detail-left">
                  <div className="tl-detail-bignum">FASE {p.n}</div>
                  <h3>{p.key}</h3>
                  <div className="tl-detail-tag">{p.tag}</div>
                  <p className="tl-detail-obj">{p.objetivo}</p>
                </div>
                <div className="tl-detail-right">
                  <div className="tl-field">
                    <p className="tl-field-label">Qué se hace</p>
                    <p className="tl-field-value">{p.hace}</p>
                  </div>
                  <div className="tl-field">
                    <p className="tl-field-label">Entregable</p>
                    <p className="tl-field-value">{p.entregable}</p>
                  </div>
                  <div className="tl-field">
                    <p className="tl-field-label">Criterio de salida</p>
                    <p className="tl-field-value">{p.salida}</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="method-band">
              <div className="method-band-row">
                <b>Gobernanza</b><span className="dot">·</span>
                <b>Gestión</b><span className="dot">·</span>
                <b>Cultura</b>
              </div>
              <span className="method-band-note">Transversal a las cinco fases</span>
            </div>

          </div>
        </div>
      </section>
    );
  }

  function FoundationStack() {
    return (
      <section className="section section--light" id="stack">
        <div className="wrap">
          <div className="section-head">
            <p className="eyebrow eyebrow--dark">Foundation Stack</p>
            <h2>Las cinco capas que definen si tu organización está <span className="gold-text">lista</span>.</h2>
            <p>
              El stack ordena las dimensiones que hay que mirar para automatizar con sentido. Se lee de arriba hacia abajo:
              los objetivos guían, los procesos y sistemas ejecutan, los datos y la governance sostienen.
            </p>
          </div>
          <div className="stack-wrap">
            <div className="stack-side"><span>Gestión</span></div>
            <div className="stack-layers">
              {W.STACK.map((l) => (
                <div className="stack-layer" key={l.n}>
                  <div className="stack-layer-n">{l.n}</div>
                  <div>
                    <h3 className="stack-layer-name">{l.name}</h3>
                    <p className="stack-layer-q">{l.q}</p>
                  </div>
                  <div className="stack-layer-en">{l.en}</div>
                </div>
              ))}
            </div>
            <div className="stack-side"><span>Cultura</span></div>
          </div>
          <p className="stack-note">
            El Stack muestra qué bases necesita una organización para automatizar con IA.
            La metodología muestra cómo avanzar paso a paso.
          </p>
        </div>
      </section>
    );
  }

  function Criterio() {
    return (
      <section className="section crit" id="criterio">
        <div className="wrap">
          <div className="section-head">
            <p className="eyebrow">Criterio técnico</p>
            <h2>La tecnología más simple que <span className="gold-text">resuelva el caso</span>.</h2>
            <p>Somos agnósticos a la tecnología: primero entendemos la tarea y después elegimos la herramienta adecuada.</p>
          </div>
          <div className="crit-table crit-table--dark">
            <div className="crit-head">
              <span>Si necesitamos…</span>
              <span>Evaluamos…</span>
            </div>
            {W.CRIT.map((r) => (
              <div className="crit-row" key={r.a}>
                <div className="crit-q">{r.q}</div>
                <div className="crit-a">{r.a}</div>
              </div>
            ))}
          </div>
          <p className="crit-foot">La mejor solución no siempre es la más sofisticada. Es la que resuelve mejor el caso.</p>
        </div>
      </section>
    );
  }

  Object.assign(window, { WTimeline: Timeline, WFoundationStack: FoundationStack, WCriterio: Criterio });
})();