// Act 2 — THE NODE. The detachment metaphor in full: the node that left the formation
// relocates here (Phuket). Status, rate, and stack surface as live system readouts.

function TheNode() {
  const { StatusDot } = window.WollenbergUIKit;
  const m = WB.meta;
  return (
    <section className="wb-act" id="node" data-section="node" data-screen-label="The Node">
      <div className="wb-shell wb-node__grid">
        {/* the node enters top-right, runs straight down the right gutter past the readouts,
            and only crosses left to the systems below them (two anchors keep it outside) */}
        <span className="wb-node__gutter-anchor" data-node="node" aria-hidden="true" />
        <span className="wb-node__gutter-anchor wb-node__gutter-anchor--exit" data-node="node-exit" aria-hidden="true" />
        <div className="wb-reveal">
          <div className="wb-eyebrow"><span className="wb-eyebrow__num">02</span><span>The Node</span></div>
          <h2 className="wb-display wb-display--l" style={{ marginTop: 22 }}>
            No black boxes.<br />Everything you get<br />is auditable.
          </h2>
          <p className="wb-body" style={{ marginTop: 28, fontSize: 18, maxWidth: '42ch' }}>
            Six years in regulated labs set the bar. Accuracy and traceability were not optional.
            Every system I build holds that line. Explicit logic, modular scripts, documented
            handoff. You can re-run it without me and see exactly why it did what it did.
          </p>
        </div>

        <div className="wb-reveal wb-readouts" role="table" aria-label="System readouts">
          <div className="wb-readout">
            <span className="wb-readout__k">Status</span>
            <span className="wb-readout__v"><StatusDot pulse={true} color="accent" />{m.status}</span>
          </div>
          {/* availability — framed for EU/Germany reachability, not a raw address */}
          <div className="wb-readout">
            <span className="wb-readout__k">Available</span>
            <span className="wb-readout__v">{m.availability}</span>
          </div>
          <div className="wb-readout">
            <span className="wb-readout__k">Languages</span>
            <span className="wb-readout__v">{m.languages.join(' · ')}</span>
          </div>
          {/* two credentials as a progression: bench → data */}
          <div className="wb-readout">
            <span className="wb-readout__k">Training</span>
            <span className="wb-readout__v">
              <span className="wb-creds">
                {m.credentials.map((c, i) => (
                  <span className="wb-cred" key={c.title}>
                    <span className="wb-cred__step" aria-hidden="true">{i === 0 ? '01' : '02'}</span>
                    <span className="wb-cred__body">
                      <span className="wb-cred__title">{c.title}</span>
                      <span className="wb-cred__sub">{c.sub}</span>
                    </span>
                  </span>
                ))}
              </span>
            </span>
          </div>
          <div className="wb-readout">
            <span className="wb-readout__k">Rate</span>
            <span className="wb-readout__v">{m.rate}</span>
          </div>
          <div className="wb-readout">
            <span className="wb-readout__k">Works across</span>
            <span className="wb-readout__v">
              <span className="wb-stackgroups">
                {m.stack.map((g) => (
                  <span className="wb-stackgroup" key={g.area}>
                    <span className="wb-stackgroup__area">{g.area}</span>
                    <span className="wb-chiprow">{g.tools.map((t) => <span className="wb-chip" key={t}>{t}</span>)}</span>
                  </span>
                ))}
              </span>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.TheNode = TheNode;