// Scene 02 — PARALLEL
// Five sub-agent lanes animate outward from the orchestrator point.
// Each lane carries a bracket-labeled pill tracking along its arc.
// Structure-blue curves, one orange — the lane that will self-file a bug.

const LANES = [
  { id: 'a', label: '(A) HALFTONE', y: 220, delay: 0.00 },
  { id: 'b', label: '(B) CROSSHAIR', y: 340, delay: 0.10 },
  { id: 'c', label: '(C) SPECTRUM', y: 460, delay: 0.20, accent: true },
  { id: 'd', label: '(D) CONVERGE', y: 580, delay: 0.30 },
  { id: 'e', label: '(E) PILL', y: 700, delay: 0.40 },
];

function SceneParallel() {
  const { localTime, duration } = useSprite();
  const exit = clamp((localTime - (duration - 0.4)) / 0.4, 0, 1);
  const headerT = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));

  // Orchestrator anchor + right terminus
  const ox = 360, rightX = 1680;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: 1 - exit }}>
      <div style={{
        position: 'absolute', left: 80, top: 220,
        width: 900,
        fontFamily: O8.fontSans,
        fontSize: 54, lineHeight: 1.04,
        letterSpacing: '-0.03em', fontWeight: 500,
        color: O8.ink,
        opacity: headerT,
      }}>
        Five sub-agents work in isolation.
      </div>

      {/* The parallel lanes SVG — spans the full canvas */}
      <svg
        style={{ position: 'absolute', left: 0, top: 0 }}
        width="1920" height="1080" viewBox="0 0 1920 1080"
        aria-hidden
      >
        {/* Orchestrator anchor — black pill + short stub */}
        <g>
          <rect x={ox - 100} y={456} width={200} height={28} rx={14} fill={O8.ink}/>
          <text
            x={ox} y={475}
            textAnchor="middle"
            fill={O8.paper} fontSize="11" fontWeight="500"
            letterSpacing="0.06em" fontFamily={O8.fontMono}
          >
            (ORCHESTRATOR)
          </text>
        </g>

        {/* Gate on right — thin vertical ink line, with label at top */}
        <line x1={rightX} y1={180} x2={rightX} y2={820} stroke={O8.ink} strokeWidth="1" opacity={clamp(localTime / 0.8, 0, 1)}/>
        <g opacity={clamp((localTime - 0.2) / 0.6, 0, 1)}>
          <rect x={rightX - 90} y={140} width={180} height={28} rx={14} fill={O8.ink}/>
          <text
            x={rightX} y={159}
            textAnchor="middle"
            fill={O8.paper} fontSize="11" fontWeight="500"
            letterSpacing="0.06em" fontFamily={O8.fontMono}
          >
            (GATE)
          </text>
        </g>

        {/* Lanes — each a smooth Bézier from orchestrator to its lane row */}
        {LANES.map((lane) => {
          const laneStart = lane.delay;
          const drawT = Easing.easeInOutCubic(clamp((localTime - laneStart) / 1.2, 0, 1));
          const laneColor = lane.accent ? O8.accent : O8.structure;
          const laneWidth = lane.accent ? 2 : 1.25;
          const opacity = lane.accent ? 1 : 0.75;

          // Path from orchestrator (ox+100, 470) out to (rightX-90, lane.y)
          const x0 = ox + 100, y0 = 470;
          const x1 = rightX - 90, y1 = lane.y;
          const cx1 = x0 + 320, cy1 = y0;
          const cx2 = x1 - 320, cy2 = y1;
          const pathD = `M ${x0} ${y0} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x1} ${y1}`;

          // Stroke dash trick for draw-on animation
          const pathLen = 1600; // approximate
          const dashOffset = pathLen * (1 - drawT);

          // Position of the packet-pill along path
          const traverseT = clamp((localTime - laneStart - 0.4) / 1.4, 0, 1);
          // Bezier lerp (quadratic-ish)
          const bt = Easing.easeInOutCubic(traverseT);
          const bx = (1-bt)**3 * x0 + 3*(1-bt)**2*bt*cx1 + 3*(1-bt)*bt**2*cx2 + bt**3*x1;
          const by = (1-bt)**3 * y0 + 3*(1-bt)**2*bt*cy1 + 3*(1-bt)*bt**2*cy2 + bt**3*y1;

          return (
            <g key={lane.id}>
              {/* The curve */}
              <path
                d={pathD}
                stroke={laneColor} strokeWidth={laneWidth}
                fill="none" opacity={opacity}
                strokeDasharray={pathLen}
                strokeDashoffset={dashOffset}
                strokeLinecap="round"
              />
              {/* Lane label at right, appearing as packet arrives */}
              <text
                x={x1 + 20} y={y1 + 5}
                fontFamily={O8.fontMono}
                fontSize="14"
                letterSpacing="0.04em"
                fill={lane.accent ? O8.accent : O8.inkMuted}
                opacity={clamp((traverseT - 0.7) / 0.3, 0, 1)}
              >
                {lane.label}
              </text>
              {/* Packet dot traveling the curve */}
              {traverseT > 0 && traverseT < 1 ? (
                <circle cx={bx} cy={by} r={lane.accent ? 5 : 3.5} fill={lane.accent ? O8.accent : O8.ink}/>
              ) : null}
              {/* Arrival pin */}
              {traverseT >= 1 ? (
                <circle cx={x1} cy={y1} r={lane.accent ? 5 : 3.5} fill={lane.accent ? O8.accent : O8.ink}/>
              ) : null}
            </g>
          );
        })}

        {/* Hairline axes on sides */}
        <line x1={ox} y1={200} x2={ox} y2={820} stroke={O8.hairline} strokeWidth="0.5"/>
      </svg>

      {/* Bottom meta line */}
      <div style={{
        position: 'absolute',
        left: 80, top: 900,
        display: 'flex', gap: 40,
        fontFamily: O8.fontMono, fontSize: 14,
        color: O8.inkMuted, letterSpacing: '0.04em',
        opacity: clamp((localTime - 1.2) / 0.5, 0, 1),
      }}>
        <span>(ISOLATED WORKTREES)</span>
        <span>(TASK-SCOPED CONTEXT)</span>
        <span>(NO SHARED STATE)</span>
      </div>
    </div>
  );
}

window.SceneParallel = SceneParallel;