/* NeuralVault — Verticals.jsx
   Three building blocks. Each pairs a text column with its diagram:
     v01 · Attention & Scale     → TrafficFlow
     v02 · Engineer the Data     → TouchLattice
     v03 · Computer Vision & ML  → VisionScene */

function SectionRef({ pos = "tr", ref_ = "REF_0000" }) {
  return (
    <div className={`section-ref ref-${pos} mono`}>
      <span>SYS_REF</span>
      <span className="ref-id">{ref_}</span>
    </div>
  );
}

function VerticalCapability({ children }) {
  return (
    <li className="vc-item">
      <span className="vc-bullet" aria-hidden="true" />
      <span className="vc-text">{children}</span>
    </li>
  );
}

function VerticalDiagram({ kind }) {
  if (kind === "traffic") return <TrafficFlow />;
  if (kind === "touch")   return <TouchLattice />;
  if (kind === "vision")  return <VisionScene />;
  return null;
}

function VerticalBlock({ v, index }) {
  // alternate: even index = text left, odd index = text right
  const flipped = index % 2 === 1;
  return (
    <div className={`vertical ${flipped ? "flip" : ""}`} id={v.id}>
      <div className="v-text">
        <div className="s-num mono">{v.num} · {v.ref}</div>
        <h3 className="v-title">{v.title}</h3>
        <p className="v-subtitle">{v.subtitle}</p>
        <p className="v-body">{v.body}</p>
        <ul className="v-caps">
          {v.capabilities.map((c) => (
            <VerticalCapability key={c}>{c}</VerticalCapability>
          ))}
        </ul>
      </div>

      <div className="v-diagram">
        <div className="vd-head mono">
          <span>DIAGRAM · {v.ref}</span>
          <span className="vd-status"><span className="vd-dot" /> LIVE</span>
        </div>
        <div className="vd-canvas">
          <VerticalDiagram kind={v.diagram} />
        </div>
      </div>
    </div>
  );
}

function Verticals() {
  return (
    <section className="s" id="verticals" data-screen-label="02 Fundamentals">
      <div className="wrap">
        <div className="s-head">
          <div>
            <div className="s-num mono">§01 — Fundamentals</div>
            <h2 className="s-title">
              Three building<br />
              <em>blocks</em>
            </h2>
          </div>
          <p className="s-sub">
            <strong>Attention</strong>, <strong>data</strong>, and <strong>intelligence</strong> —
            built in order, so each one earns the next. We engage on one block or all three,
            quietly and over multiple quarters.
          </p>
        </div>

        <div className="verticals">
          {VERTICALS.map((v, i) => (
            <VerticalBlock key={v.id} v={v} index={i} />
          ))}
        </div>
      </div>
      <SectionRef pos="br" ref_="REF · FUND.26" />
    </section>
  );
}

Object.assign(window, { Verticals, VerticalBlock, VerticalDiagram, SectionRef });