// ═══════════════════════════════════════════════════════════════════════════
// 02 · THE FIX — show, then tell.
//
// The six-beat sequence that used to live here made the reader wait to learn
// what the product does. This says it in one frame: three systems that
// disagree, the decision AutoStock produces from them, and what changes for
// the person who orders stock. The three steps beneath are the tell.
//
// The panels are the one sanctioned exception to the no-boxes rule in
// admel-design: three disconnected systems shown as three separate panels is
// the case the rule names, because here the separation IS the argument.
// Everything else in the room is unboxed.
// ═══════════════════════════════════════════════════════════════════════════

function FixRoom() {
  const lang = window.__useLang();
  const T = window.TDATA[lang];
  const R = T.fixRoom;
  window.__useRoomTelemetry('simulation');

  // The reveal plays once when the room is entered. Bumping this key
  // remounts the stage, which restarts the CSS animations: a presenter
  // going back over the point should be able to run it again.
  const [take, setTake] = React.useState(0);

  // Frozen for a headless capture, and for anyone who asked the system not
  // to animate. Both land on the finished frame rather than an empty one.
  const still = window.__STATIC || (function () {
    try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }
    catch (e) { return false; }
  })();
  const anim = still ? 'off' : 'on';

  return (
    <div className="room room-fix2" data-tone="dark" style={{
      position: 'absolute', inset: 0,
      paddingTop: 'calc(56px + var(--s3))', paddingBottom: 'var(--s3)',
      paddingInline: 'var(--margin)',
      display: 'flex', flexDirection: 'column',
      // The content column is capped at --measure. Pinned to flex-start it
      // hugs the left edge on any viewport wider than the cap, which left the
      // whole deck off-centre on a large monitor. It centres instead; the text
      // inside stays left aligned to the column.
      alignItems: 'center', textAlign: 'left', overflow: 'hidden',
    }}>
      <div className="fix2-col" style={{ width: '100%', maxWidth: 'var(--measure)' }}>

        <div className="fix2-top">
          <div className="fix2-label">
            {R.label}
            {!still && (
              <button className="fix2-replay" onClick={() => setTake(t => t + 1)}>
                {R.replay}
              </button>
            )}
          </div>
          <h2 className="fix2-head">{R.headline}</h2>
        </div>

        {/* ── SHOW ─────────────────────────────────────────────────── */}
        <div className="fix2-mid">
          <div className="fix2-stage" key={take} data-anim={anim}>

          {/* Three systems, each certain and each wrong, and then the one he
              does not have. The fourth panel is the same box as the other
              three: same border, same two bands, same padding. Only the
              token changes, from the hairline to gold, because it is ours.
              Its note hangs outside the border so the box itself stays
              geometrically identical to the three above it. */}
          <div className="fix2-sources">
            {(R.sources || []).map((s, i) => (
              <div key={i} className="fix2-src" style={{ '--i': i }}>
                <div className="fix2-src-sys">{s.sys}</div>
                <div className="fix2-src-foot">
                  <span className="fix2-src-field">{s.field}</span>
                  <span className="fix2-src-v">{s.v}</span>
                </div>
              </div>
            ))}
            {R.unmet && (
              <div className="fix2-unmet-slot">
                <div className="fix2-src fix2-src-unmet">
                  <div className="fix2-src-sys">{R.unmet.sys}</div>
                  <div className="fix2-src-foot">
                    <span className="fix2-src-field">{R.unmet.field}</span>
                    <span className="fix2-src-v">{R.unmet.v}</span>
                  </div>
                </div>
                <div className="fix2-unmet-note">{R.unmet.note}</div>
              </div>
            )}
          </div>

          {/* The feeds converging. Measured off the rendered panels: with the
              fourth in the stack their centres sit at 10.7, 36.9, 63.1 and
              89.3 percent of it, so the feeds leave from exactly those
              points. The fourth is gold and draws with its panel, because
              the 26 units has four inputs behind it, not three. */}
          <svg className="fix2-wires" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
            <path pathLength="1" d="M0 10.7 C 58 10.7, 42 50, 100 50" />
            <path pathLength="1" d="M0 36.9 C 58 36.9, 42 50, 100 50" />
            <path pathLength="1" d="M0 63.1 C 58 63.1, 42 50, 100 50" />
            <path pathLength="1" className="fix2-wire-unmet" d="M0 89.3 C 58 89.3, 42 50, 100 50" />
          </svg>

          {/* AutoStock acting: the only gold in the room */}
          <div className="fix2-card">
            {window.OttoPeek && <window.OttoPeek delay={2200} />}
            <div className="fix2-card-top">
              <span className="fix2-brand">{R.cardBrand}</span>
              <span className="fix2-live"><i /> {R.cardLive}</span>
            </div>
            <div className="fix2-card-body">
              <div className="fix2-card-title">{R.cardTitle}</div>
              <div className="fix2-inout">
                <span className="fix2-n">{R.inN}</span><span className="fix2-u">{R.inLabel}</span>
                <span className="fix2-arrow">{'→'}</span>
                <span className="fix2-n fix2-n-gold">{R.outN}</span><span className="fix2-u">{R.outLabel}</span>
                <span className="fix2-truth">
                  <span className="fix2-truth-k">{R.truthLabel}</span>
                  <span className="fix2-truth-v">{R.truthV}</span>
                </span>
              </div>
              <div className="fix2-rows">
                {(R.rows || []).map((r, i) => (
                  <div key={i} className="fix2-row">
                    <span className="fix2-row-k">{r.k}</span>
                    <span className="fix2-row-v">{r.v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <svg className="fix2-out-arrow" viewBox="0 0 40 20" aria-hidden="true">
            <path pathLength="1" d="M0 10 H30 M24 5 L30 10 L24 15" />
          </svg>

          {/* what it changes for one real person */}
          <div className="fix2-out">
            <div className="fix2-out-title">{R.outTitle}</div>
            <div className="fix2-out-scope">{R.outScope}</div>
            {(R.outRows || []).map((r, i) => (
              <div key={i} className="fix2-delta" style={{ '--i': i }}>
                <span className="fix2-a">{r.a}</span>
                <span className="fix2-to">{'→'}</span>
                <span className="fix2-b">{r.b}</span>
                <span className="fix2-dk">{r.k}</span>
              </div>
            ))}
            <div className="fix2-out-foot">{R.outFoot}</div>
          </div>
        </div>
        </div>

        {/* ── TELL ─────────────────────────────────────────────────── */}
        {/* Two paragraphs share one slot. The unmet-demand copy holds the
            floor while its panel does, then hands over to the standing
            explanation. Stacked in a grid cell rather than swapped, so
            neither one moves the questions beneath them. */}
        <div className="fix2-bot">
          <div className="fix2-tell" data-anim={anim}>
            <p className="fix2-unmet-copy">{R.unmetCopy}</p>
            <p className="fix2-how">{R.how}</p>
          </div>

          <window.Objections room="simulation" align="left" onDark />
        </div>
      </div>
    </div>
  );
}

window.FixRoom = FixRoom;