// PipelineAnatomy — section container. Sticky inner stage during scroll.

function PipelineAnatomy() {
  const { React, PhaseStrip, PhaseDetail, useActivePhase } = window;
  const { useRef } = React;
  const phases = window.PIPELINE_PHASES;
  const sectionRef = useRef(null);
  const { active, setActive, selectedAgent, setSelectedAgent, reduce } =
    useActivePhase({ sectionRef, phaseCount: phases.length });

  const phase = phases[active];

  return (
    <section ref={sectionRef} className={`pipeline-section ${reduce ? 'is-reduced' : ''}`} data-screen-label="02 Pipeline Anatomy" id="how">
      <div className="section-intro">
        <p className="section-intro-text">
          six specialized agents. fifty-plus tools. every scan runs the same
          deterministic sequence — from recon through to proof-of-exploit.
        </p>
        <span className="section-intro-cue">scroll to trace each phase ↓</span>
      </div>
      <div className="pipeline-sticky">
        <header className="pipeline-header">
          <div className="pipeline-eyebrow">
            <span className="ph-line" /> architecture · 6 phases, 50+ tools
          </div>
          <h2 className="pipeline-h2">
            {reduce
              ? 'six phases. read each one.'
              : 'every scan runs through six phases. scroll to trace one.'}
          </h2>
        </header>

        <PhaseStrip
          phases={phases}
          active={active}
          setActive={setActive}
          selectedAgent={selectedAgent}
          setSelectedAgent={setSelectedAgent}
        />

        <PhaseDetail
          phase={phase}
          selectedAgent={selectedAgent}
          setSelectedAgent={setSelectedAgent}
        />
      </div>

      {/* scroll buffer — height that drives the phase progression */}
      {!reduce && <div className="pipeline-scrollbuf" aria-hidden="true" />}

      {/* no-JS / reduced-motion fallback: all phases as static sections */}
      <noscript>
        <div className="pipeline-fallback">
          {phases.map(p => (
            <article key={p.id}>
              <h4>phase {p.id} · {p.name}</h4>
              <p>{p.description}</p>
              <ul>{p.agents.map(a => <li key={a.id}>{a.id} — {a.role}</li>)}</ul>
            </article>
          ))}
        </div>
      </noscript>
    </section>
  );
}
window.PipelineAnatomy = PipelineAnatomy;