// Scene 03 — GATE
// Converging lines: 7 sub-agent output streams funnel through the
// governance gate and emerge as a single reviewed output.
// The orange stream is the one flagged for review.

function SceneGate() {
  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));

  const inputs = 7;
  const left = 260;
  const gateX = 1100;
  const rightEnd = 1760;
  const gateY = 620;
  const topY = 400;
  const bottomY = 840;
  const rowH = (bottomY - topY) / (inputs - 1);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: 1 - exit }}>
      <div style={{
        position: 'absolute', left: 80, top: 220,
        width: 1100,
        fontFamily: O8.fontSans,
        fontSize: 54, lineHeight: 1.04,
        letterSpacing: '-0.03em', fontWeight: 500,
        color: O8.ink,
        opacity: headerT,
      }}>
        Every output passes one gate.
      </div>

      <svg
        style={{ position: 'absolute', left: 0, top: 0 }}
        width="1920" height="1080" viewBox="0 0 1920 1080"
        aria-hidden
      >
        {/* Input streams */}
        {Array.from({ length: inputs }).map((_, i) => {
          const y = topY + i * rowH;
          const isAccent = i === 2;
          const startT = i * 0.06;
          const drawT = Easing.easeInOutCubic(clamp((localTime - startT) / 1.0, 0, 1));
          const pathLen = 1200;
          const dashOffset = pathLen * (1 - drawT);
          return (
            <g key={i}>
              <path
                d={`M ${left} ${y} C ${(left + gateX) / 2} ${y}, ${(left + gateX) / 2} ${gateY}, ${gateX} ${gateY}`}
                stroke={isAccent ? O8.accent : O8.structure}
                strokeWidth={isAccent ? 2 : 1.25}
                opacity={isAccent ? 1 : 0.75}
                fill="none"
                strokeDasharray={pathLen}
                strokeDashoffset={dashOffset}
                strokeLinecap="round"
              />
              {/* Origin dot */}
              <circle cx={left} cy={y} r={3.5}
                fill={isAccent ? O8.accent : O8.ink}
                opacity={clamp(drawT * 2, 0, 1)}/>
            </g>
          );
        })}

        {/* Labels above input cluster */}
        <text x={left} y={topY - 32}
          fontFamily={O8.fontMono} fontSize="14"
          letterSpacing="0.04em" fill={O8.inkMuted}
          opacity={clamp(localTime / 0.4, 0, 1)}>
          (SUB-AGENT OUTPUTS)
        </text>

        {/* The gate — vertical ink line with choke rectangle */}
        <g opacity={clamp((localTime - 0.8) / 0.4, 0, 1)}>
          <line x1={gateX} y1={topY - 20} x2={gateX} y2={bottomY + 20}
            stroke={O8.ink} strokeWidth="1"/>
          <rect x={gateX - 5} y={gateY - 22} width={10} height={44} fill={O8.ink}/>
          <text x={gateX} y={topY - 32}
            textAnchor="middle"
            fontFamily={O8.fontMono} fontSize="14"
            letterSpacing="0.04em" fill={O8.inkMuted}>
            (GATE)
          </text>
        </g>

        {/* Gate checks — horizontal row below the output line */}
        {['TYPECHECK','STATIC','DIFF','APPROVAL'].map((check, i) => {
          const checkT = clamp((localTime - 1.3 - i * 0.12) / 0.35, 0, 1);
          const x = gateX + 40 + i * 200;
          const y = bottomY + 60;
          return (
            <g key={check} opacity={checkT}>
              <circle cx={x} cy={y} r={3} fill={O8.accent}/>
              <text x={x + 14} y={y + 4}
                fontFamily={O8.fontMono} fontSize="13"
                letterSpacing="0.04em" fill={O8.ink}>
                {check} ✓
              </text>
            </g>
          );
        })}

        {/* Emerging output */}
        <path
          d={`M ${gateX} ${gateY} L ${rightEnd} ${gateY}`}
          stroke={O8.ink}
          strokeWidth="2.5"
          fill="none"
          strokeDasharray={rightEnd - gateX}
          strokeDashoffset={(rightEnd - gateX) * (1 - Easing.easeOutCubic(clamp((localTime - 1.6) / 0.8, 0, 1)))}
        />
        {/* Endpoint */}
        <circle
          cx={rightEnd} cy={gateY}
          r={6 * clamp((localTime - 2.2) / 0.3, 0, 1)}
          fill={O8.ink}
        />
        <text x={rightEnd - 10} y={gateY + 34}
          textAnchor="end"
          fontFamily={O8.fontMono} fontSize="14"
          letterSpacing="0.04em" fill={O8.inkMuted}
          opacity={clamp((localTime - 2.2) / 0.4, 0, 1)}>
          (MERGED)
        </text>
      </svg>
    </div>
  );
}

window.SceneGate = SceneGate;