// Scene 3: GPU package.
// The die we extracted is now mounted on a GPU substrate / package.
// Substrate, contact pads, heat-spreader outline draw in around it.

const GPU_INK = 'rgba(244, 241, 236, 0.85)';
const GPU_FAINT = 'rgba(244, 241, 236, 0.22)';
const GPU_ACCENT = '#6DD0FF';

function GPUPackage({ cx = 960, cy = 540, drawProgress = 1, dieScale = 1, scale = 1 }) {
  // Package is 1100x780 outer, die is 440x360 centered.
  const PKG_W = 1100;
  const PKG_H = 780;
  const DIE_W = 440;
  const DIE_H = 360;

  // Memory chip positions around the die (HBM-style stacks, rendered abstractly)
  const memChips = [
    { x: -PKG_W / 2 + 60, y: -DIE_H / 2 - 30, w: 200, h: DIE_H + 60 },
    { x: PKG_W / 2 - 260, y: -DIE_H / 2 - 30, w: 200, h: DIE_H + 60 },
  ];

  // Contact pads along bottom of package (BGA hint)
  const pads = [];
  const padCount = 28;
  const padSpacing = (PKG_W - 60) / padCount;
  for (let i = 0; i < padCount; i++) {
    pads.push({ x: -PKG_W / 2 + 30 + i * padSpacing + padSpacing / 2, y: PKG_H / 2 - 18 });
  }

  // Trace lines from die edge to memory chips (interposer hint)
  const traces = [];
  for (let i = 0; i < 8; i++) {
    const yOff = -DIE_H / 2 + 30 + i * (DIE_H - 60) / 7;
    traces.push({ side: 'left', y: yOff });
    traces.push({ side: 'right', y: yOff });
  }

  // drawProgress drives a stagger: outline first, then memory, traces, pads
  const outlineP = clamp(drawProgress * 4 - 0, 0, 1);
  const memP     = clamp(drawProgress * 4 - 1, 0, 1);
  const traceP   = clamp(drawProgress * 4 - 2, 0, 1);
  const padP     = clamp(drawProgress * 4 - 3, 0, 1);

  return (
    <div style={{
      position: 'absolute',
      left: cx, top: cy,
      transform: `translate(-50%, -50%) scale(${scale})`,
      transformOrigin: 'center',
      willChange: 'transform',
    }}>
      <svg
        width={PKG_W + 100} height={PKG_H + 100}
        viewBox={`${-(PKG_W + 100) / 2} ${-(PKG_H + 100) / 2} ${PKG_W + 100} ${PKG_H + 100}`}
        style={{ overflow: 'visible' }}
      >
        {/* Outer package (substrate) */}
        <rect
          x={-PKG_W / 2} y={-PKG_H / 2}
          width={PKG_W} height={PKG_H}
          fill="#0B0D11"
          stroke={GPU_INK}
          strokeWidth={1.4}
          strokeDasharray={`${PKG_W * 2 + PKG_H * 2}`}
          strokeDashoffset={`${(PKG_W * 2 + PKG_H * 2) * (1 - outlineP)}`}
        />
        {/* Inner heat-spreader outline */}
        <rect
          x={-PKG_W / 2 + 30} y={-PKG_H / 2 + 30}
          width={PKG_W - 60} height={PKG_H - 60}
          fill="none"
          stroke={GPU_FAINT}
          strokeWidth={1}
          opacity={outlineP}
        />
        {/* Pin-1 indicator */}
        <circle cx={-PKG_W / 2 + 18} cy={-PKG_H / 2 + 18} r={3.5} fill={GPU_ACCENT} opacity={outlineP} />

        {/* Memory chips (HBM stacks shown as outlined rectangles with stripe lines) */}
        {memChips.map((m, i) => (
          <g key={i} opacity={memP}>
            <rect x={m.x} y={m.y} width={m.w} height={m.h} fill="none" stroke={GPU_INK} strokeWidth={1.2} />
            {/* Stack lines suggesting layered memory */}
            {[0.2, 0.4, 0.6, 0.8].map((p, j) => (
              <line
                key={j}
                x1={m.x} y1={m.y + m.h * p}
                x2={m.x + m.w} y2={m.y + m.h * p}
                stroke={GPU_FAINT}
                strokeWidth={0.7}
              />
            ))}
            {/* Label */}
            <text
              x={m.x + m.w / 2} y={m.y + m.h + 22}
              textAnchor="middle"
              fill="rgba(244,241,236,0.45)"
              fontFamily="JetBrains Mono, ui-monospace, monospace"
              fontSize={11}
              letterSpacing="0.12em"
            >
              HBM
            </text>
          </g>
        ))}

        {/* Interposer traces */}
        {traces.map((tr, i) => {
          const startX = tr.side === 'left' ? -DIE_W / 2 : DIE_W / 2;
          const endX = tr.side === 'left'
            ? memChips[0].x + memChips[0].w
            : memChips[1].x;
          const reveal = clamp(traceP * traces.length - i * 0.5, 0, 1);
          return (
            <line
              key={i}
              x1={startX} y1={tr.y}
              x2={startX + (endX - startX) * reveal} y2={tr.y}
              stroke={GPU_INK}
              strokeWidth={0.8}
              opacity={0.5}
            />
          );
        })}

        {/* Contact pads (BGA balls shown as small circles along bottom) */}
        {pads.map((p, i) => {
          const reveal = clamp(padP * pads.length * 1.5 - i, 0, 1);
          return (
            <circle
              key={i}
              cx={p.x} cy={p.y}
              r={3.5}
              fill="none"
              stroke={GPU_INK}
              strokeWidth={0.9}
              opacity={reveal * 0.7}
            />
          );
        })}

        {/* The DIE itself — drawn last on top */}
        <g>
          <rect
            x={-DIE_W / 2 * dieScale} y={-DIE_H / 2 * dieScale}
            width={DIE_W * dieScale} height={DIE_H * dieScale}
            fill="#0B0D11"
            stroke={GPU_ACCENT}
            strokeWidth={1.6}
          />
          {/* Corner brackets — keep the die feeling like the same hero element */}
          {[
            [-DIE_W / 2, -DIE_H / 2, 1, 1],
            [DIE_W / 2, -DIE_H / 2, -1, 1],
            [-DIE_W / 2, DIE_H / 2, 1, -1],
            [DIE_W / 2, DIE_H / 2, -1, -1],
          ].map(([x, y, sx, sy], i) => (
            <g key={i} stroke={GPU_ACCENT} strokeWidth={1.4} fill="none">
              <line x1={x * dieScale} y1={y * dieScale} x2={(x + sx * 18) * dieScale} y2={y * dieScale} />
              <line x1={x * dieScale} y1={y * dieScale} x2={x * dieScale} y2={(y + sy * 18) * dieScale} />
            </g>
          ))}
          {/* Die label */}
          <text
            x={0} y={-DIE_H / 2 - 14}
            textAnchor="middle"
            fill="rgba(244,241,236,0.6)"
            fontFamily="JetBrains Mono, ui-monospace, monospace"
            fontSize={11}
            letterSpacing="0.18em"
          >
            GPU DIE
          </text>
        </g>
      </svg>
    </div>
  );
}

function Scene3_GPU() {
  const { localTime, duration } = useSprite();
  const t = localTime;

  // Camera: starts roughly at the die's filled-frame state from Scene 2,
  // then pulls back so the package fits.
  const stageScale = interpolate(
    [0, duration * 0.6, duration],
    [2.2, 1.0, 1.05],
    Easing.easeInOutCubic
  )(t);

  // Die internal scale (held at 1)
  const dieScale = 1;

  // Package outline + memory + traces + pads draw in
  const drawProgress = interpolate(
    [duration * 0.05, duration * 0.85],
    [0, 1],
    Easing.easeInOutCubic
  )(t);

  const captionOp = interpolate(
    [duration * 0.4, duration * 0.6, duration * 0.9, duration],
    [0, 1, 1, 0],
    Easing.easeInOutCubic
  )(t);

  return (
    <>
      <GPUPackage
        cx={960} cy={540}
        drawProgress={drawProgress}
        dieScale={dieScale}
        scale={stageScale}
      />

      <div style={{
        position: 'absolute',
        left: 960, top: 1010,
        transform: 'translate(-50%, -50%)',
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: 13,
        letterSpacing: '0.18em',
        color: 'rgba(244, 241, 236, 0.55)',
        textTransform: 'uppercase',
        whiteSpace: 'nowrap',
        opacity: captionOp,
      }}>
        GPU package · die + interposer + HBM
      </div>
    </>
  );
}

window.Scene3_GPU = Scene3_GPU;
window.GPUPackage = GPUPackage;