// The signature interactive 3D ladder section.
// Click rungs to climb. A pressure & realism meter to the right fills as you ascend.

function PerformanceLadder() {
  const [activeIdx, setActiveIdx] = React.useState(5); // start at top (Independent), most impressive
  const stageRef = React.useRef(null);
  const [hoverIdx, setHoverIdx] = React.useState(null);

  const focusIdx = hoverIdx ?? activeIdx;
  const active = window.LADDER[focusIdx];

  // Auto-step on first load — gives a guided climb feel.
  React.useEffect(() => {
    let i = 0;
    setActiveIdx(0);
    const t = setInterval(() => {
      i++;
      if (i >= window.LADDER.length) { clearInterval(t); return; }
      setActiveIdx(i);
    }, 700);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="section ladder-section" id="ladder">
      <div className="ladder-bg-grid"></div>
      <div className="ladder-bg-glow"></div>

      <div className="wrap" style={{position:'relative', zIndex:2}}>
        <div className="section-head">
          <p className="eyebrow-strong">04 · SIGNATURE SYSTEM</p>
          <h2 className="headline-lg" style={{color:'#fff'}}>
            The AMBIZ Performance Ladder.<br/>
            <span style={{color:'rgba(255,255,255,0.55)'}}>Capability climbs one rung at a time — until reaching full client readiness.</span>
          </h2>
          <p className="lede" style={{marginTop:20}}>
            Advisory skill is not transferred through content. It is built through staged practice that adds complexity and consequence at each rung. Click a level to climb.
          </p>
        </div>

        <div className="ladder-layout">
          {/* 3D stage */}
          <div className="ladder-stage" ref={stageRef}>
            <div className="ladder-3d">
              {window.LADDER.map((r, i) => {
                const isActive = i === activeIdx;
                const liftZ = isActive ? 80 : 0;
                const liftY = -i * 90;
                const scale = isActive ? 1.05 : 1;
                return (
                  <div
                    key={r.id}
                    className={'rung' + (isActive ? ' rung--active' : '')}
                    onClick={() => setActiveIdx(i)}
                    onMouseEnter={() => setHoverIdx(i)}
                    onMouseLeave={() => setHoverIdx(null)}
                    style={{
                      transform: `translateY(${liftY}px) translateZ(${liftZ}px) scale(${scale})`,
                      zIndex: 10 + i,
                    }}
                  >
                    <div className="rung-plate"></div>
                    <div className="rung-content">
                      <div>
                        <div className="rung-label">{r.label}</div>
                        <div className="rung-title">{r.title}</div>
                      </div>
                      <div className="rung-num">{r.num}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Meter + detail */}
          <div className="ladder-side">
            <div className="ladder-meter">
              <div
                className="ladder-meter-fill"
                style={{ height: active.realism + '%' }}
              ></div>
              <div
                className="ladder-meter-marker"
                style={{ bottom: `calc(${active.realism}% - 8px)` }}
              ></div>
              <div className="ladder-meter-labels">
                <div className="ladder-meter-tick">Controlled</div>
                <div className="ladder-meter-tick">Applied</div>
                <div className="ladder-meter-tick">Real</div>
                <div className="ladder-meter-tick">Independent</div>
              </div>
            </div>

            <div className="ladder-detail">
              <div className="ladder-detail-label">Rung {active.num} · {active.label}</div>
              <h3 className="ladder-detail-title">{active.title}</h3>
              <p className="ladder-detail-body">{active.desc}</p>
              <div className="ladder-detail-meta">
                <div>
                  <div className="ladder-detail-meta-lbl">Mode</div>
                  <div className="ladder-detail-meta-num" style={{color:'#fff'}}>{active.pressure}</div>
                </div>
                <div>
                  <div className="ladder-detail-meta-lbl">Evidence / Artifact</div>
                  <div className="ladder-detail-meta-num" style={{color:'var(--y-400)', fontSize: 16}}>{active.artifact}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

window.PerformanceLadder = PerformanceLadder;