// Diagram 1 — restyled for Three Palms deck
// The Orientation Tax: Claude as a stranger getting buried under context,
// then "okay, run." → can't move. Then handoff packet → moves immediately.

function Stranger_v2({ x, y, label, burdenY = 0, lean = 0, opacity = 1, accent = false }) {
  const stroke = accent ? TP_VIOLET : TP_FG;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: 'translate(-50%, -100%)',
      opacity,
    }}>
      <svg width="120" height="200" viewBox="0 0 120 200" style={{ overflow: 'visible' }}>
        <g transform={`translate(60, ${100 + burdenY}) rotate(${lean})`}>
          <circle cx="0" cy="-70" r="14" stroke={stroke} strokeWidth="1.5" fill="none" />
          <line x1="0" y1="-56" x2="0" y2="-10" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
          <line x1="0" y1="-44" x2="-26" y2="-30" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
          <line x1="0" y1="-44" x2="26" y2="-30" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
          <line x1="0" y1="-10" x2="-14" y2="32" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
          <line x1="0" y1="-10" x2="14" y2="32" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" />
        </g>
      </svg>
      {label && (
        <div style={{
          position: 'absolute', left: '50%', top: '100%',
          transform: 'translate(-50%, 12px)',
          fontFamily: TP_MONO, fontSize: 13,
          color: accent ? TP_VIOLET : TP_DIMMER,
          whiteSpace: 'nowrap', letterSpacing: '0.15em', textTransform: 'uppercase',
        }}>{label}</div>
      )}
    </div>
  );
}

function ContextChip_v2({ label, fromX, fromY, toX, toY, start, dropDur = 0.5 }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - start) / dropDur, 0, 1);
  const eased = Easing.easeOutCubic(t);
  const x = fromX + (toX - fromX) * eased;
  const y = fromY + (toY - fromY) * eased;
  if (localTime < start) return null;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: 'translate(-50%, -50%)',
      padding: '6px 12px',
      border: `1px solid ${TP_BORDER}`,
      background: TP_ELEV,
      color: TP_FG,
      fontFamily: TP_MONO, fontSize: 12,
      letterSpacing: '0.02em',
      opacity: clamp(t * 4, 0, 1),
      borderRadius: 999,
    }}>{label}</div>
  );
}

function PackedVault({ x, y, opacity = 1 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: 'translate(-50%, -50%)',
      opacity,
      width: 180,
      border: `1px solid ${TP_VIOLET}`,
      background: TP_VIOLET_SOFT,
      borderRadius: 14,
      padding: '16px 18px',
    }}>
      <div style={{
        fontFamily: TP_MONO, fontSize: 11, color: TP_VIOLET,
        letterSpacing: '0.15em', textTransform: 'uppercase',
        marginBottom: 10,
      }}>vault</div>
      {['Notes/', 'Transcripts/', 'CLAUDE.md'].map((f, i) => (
        <div key={i} style={{
          fontFamily: TP_MONO, fontSize: 13, color: TP_FG,
          opacity: 0.9, lineHeight: 1.7,
        }}>{f}</div>
      ))}
    </div>
  );
}

function ScenePileOn_v2() {
  const { localTime } = useSprite();
  const stranger_y = 620;
  const stranger_x = 1100;

  const labels = [
    { t: 0.5, label: 'venice beach vein clinic' },
    { t: 0.85, label: '~/Projects/medical-intake' },
    { t: 1.2, label: 'Retell + Twilio + Firebase' },
    { t: 1.55, label: 'pricing tiers (last week)' },
    { t: 1.9, label: 'discovery transcript' },
    { t: 2.25, label: 'intake questions' },
    { t: 2.6, label: 'retell prompt (other clinic)' },
    { t: 2.95, label: 'safety constraints' },
    { t: 3.3, label: 'tone + voice guide' },
  ];

  const boxesLanded = labels.filter(l => localTime >= l.t + 0.5).length;
  const burdenY = Math.min(boxesLanded * 1.6, 16);
  const lean = Math.min(boxesLanded * 0.4, 5);

  const promptOpacity = clamp((localTime - 4.0) / 0.5, 0, 1);
  const promptShake = localTime > 4.6 && localTime < 5.0
    ? Math.sin(localTime * 30) * 1.5 : 0;
  const stuckOpacity = clamp((localTime - 5.0) / 0.4, 0, 1);

  const slotPositions = [
    [-110, -20], [110, -20],
    [-110, -65], [110, -65],
    [-110, -110], [110, -110],
    [-110, -155], [110, -155],
    [-110, -200],
  ];

  return (
    <>
      <Stranger_v2 x={stranger_x} y={stranger_y} label={localTime < 0.4 ? '' : 'claude · cold start'} burdenY={burdenY} lean={lean} />

      {labels.map((l, i) => {
        const [dx, dy] = slotPositions[i] || [0, 0];
        return (
          <ContextChip_v2
            key={i}
            label={l.label}
            fromX={i % 2 === 0 ? -100 : 1700}
            fromY={-50 + i * 15}
            toX={stranger_x + dx}
            toY={stranger_y - 90 + dy}
            start={l.t}
          />
        );
      })}

      {/* "okay, run." prompt */}
      <div style={{
        position: 'absolute', left: 80, top: 470,
        opacity: promptOpacity,
        transform: `translateX(${promptShake}px)`,
      }}>
        <div style={{
          fontFamily: TP_DISPLAY, fontSize: 56, fontWeight: 600,
          color: TP_FG, letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>"okay, now run."</div>
        <div style={{
          marginTop: 14,
          fontFamily: TP_MONO, fontSize: 13, color: TP_CYAN,
          letterSpacing: '0.15em', textTransform: 'uppercase',
        }}>↳ you · every single session</div>
      </div>

      {/* stuck */}
      <div style={{
        position: 'absolute', left: stranger_x, top: stranger_y + 60,
        transform: 'translate(-50%, 0)',
        opacity: stuckOpacity,
        textAlign: 'center',
      }}>
        <div style={{
          display: 'inline-block',
          padding: '6px 14px',
          border: `1px solid #f59e0b`,
          color: '#f59e0b',
          background: 'rgba(245, 158, 11, 0.08)',
          fontFamily: TP_MONO, fontSize: 12,
          letterSpacing: '0.15em', textTransform: 'uppercase',
          borderRadius: 999,
        }}>can't move</div>
      </div>
    </>
  );
}

function SceneHandoff_v2() {
  const { localTime } = useSprite();
  const stranger_x_base = 460;
  const walk = Easing.easeInOutCubic(clamp((localTime - 2.2) / 1.1, 0, 1));
  const stranger_x = stranger_x_base + walk * 900;

  const packetT = clamp((localTime - 0.6) / 1.0, 0, 1);
  const packetEased = Easing.easeOutCubic(packetT);
  const packetOpacity = clamp(packetT * 3, 0, 1);

  const promptOpacity = clamp((localTime - 1.8) / 0.5, 0, 1);

  return (
    <>
      <Stranger_v2 x={stranger_x} y={620} label={localTime < 0.4 ? '' : 'claude · with vault'} accent />

      {/* packet drops to claude's arms */}
      <div style={{
        position: 'absolute',
        left: stranger_x,
        top: 540 + (1 - packetEased) * -300,
        transform: 'translate(-50%, -50%)',
        opacity: packetOpacity * (walk < 0.05 ? 1 : 1),
      }}>
        <PackedVault x={0} y={0} />
      </div>

      {/* motion lines */}
      {walk > 0.05 && walk < 0.95 && [0, 1, 2].map(i => (
        <div key={i} style={{
          position: 'absolute',
          left: stranger_x - 80 - i * 24,
          top: 540 + i * 18,
          width: 50, height: 1,
          background: TP_VIOLET,
          opacity: (1 - i * 0.3) * 0.6,
        }} />
      ))}

      {/* prompt */}
      <div style={{
        position: 'absolute', left: 80, top: 470,
        opacity: promptOpacity,
      }}>
        <div style={{
          fontFamily: TP_DISPLAY, fontSize: 56, fontWeight: 600,
          color: TP_FG, letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>"okay, now run."</div>
        <div style={{
          marginTop: 14,
          fontFamily: TP_MONO, fontSize: 13, color: TP_VIOLET,
          letterSpacing: '0.15em', textTransform: 'uppercase',
        }}>↳ you · just once</div>
      </div>
    </>
  );
}

function DiagramOrientationTax_v2() {
  return (
    <Stage width={1600} height={900} duration={14} background={TP_BG} persistKey="d1-v2">
      <SlideChrome eyebrow="three palms / the orientation tax" hint="diagram · 01 / 03" />

      {/* Title (pile-on phase) */}
      <Sprite start={0} end={6.5}>
        {({ localTime, duration }) => {
          const op = localTime < 0.4 ? localTime / 0.4
            : localTime > duration - 0.5 ? clamp((duration - localTime) / 0.5, 0, 1) : 1;
          return (
            <SlideTitle opacity={op}>
              every session, you bury Claude<br/>
              <span style={{ color: TP_DIM }}>before the work begins.</span>
            </SlideTitle>
          );
        }}
      </Sprite>

      <Sprite start={0.4} end={6.5}>
        <ScenePileOn_v2 />
      </Sprite>

      {/* divider */}
      <Sprite start={6.5} end={7.5}>
        {({ localTime, duration }) => {
          const t = clamp(localTime / duration, 0, 1);
          return (
            <div style={{
              position: 'absolute', left: '50%', top: '50%',
              transform: 'translate(-50%, -50%)',
              fontFamily: TP_DISPLAY, fontSize: 28, fontWeight: 500,
              color: TP_DIM, letterSpacing: '-0.02em',
              opacity: t < 0.5 ? t * 2 : (1 - t) * 2,
            }}>or…</div>
          );
        }}
      </Sprite>

      {/* handoff scene */}
      <Sprite start={7.5} end={13.5}>
        {({ localTime, duration }) => {
          const op = localTime < 0.4 ? localTime / 0.4
            : localTime > duration - 0.5 ? clamp((duration - localTime) / 0.5, 0, 1) : 1;
          return (
            <>
              <SlideTitle opacity={op}>
                hand off a packet.<br/>
                <span style={{
                  background: `linear-gradient(135deg, ${TP_VIOLET} 0%, ${TP_CYAN} 100%)`,
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text',
                }}>Claude moves immediately.</span>
              </SlideTitle>
              <SceneHandoff_v2 />
            </>
          );
        }}
      </Sprite>
    </Stage>
  );
}

window.DiagramOrientationTax_v2 = DiagramOrientationTax_v2;