// Diagram 2 v2 — Before vs After, Three Palms styled

function Node_v2({ x, y, w = 200, h = 100, label, sublabel, opacity = 1, accent = false, dashed = false, glow = false }) {
  const borderColor = accent ? TP_VIOLET : TP_BORDER;
  const bg = accent ? TP_VIOLET_SOFT : TP_ELEV;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: w, height: h,
      transform: 'translate(-50%, -50%)',
      opacity,
      border: `1px ${dashed ? 'dashed' : 'solid'} ${borderColor}`,
      background: bg,
      borderRadius: 14,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      gap: 6,
      boxShadow: glow ? `0 0 60px rgba(139, 92, 246, 0.3)` : 'none',
    }}>
      <div style={{
        fontFamily: TP_DISPLAY, fontSize: 24, fontWeight: 600,
        color: accent ? TP_VIOLET : TP_FG,
        letterSpacing: '-0.02em',
      }}>{label}</div>
      {sublabel && (
        <div style={{
          fontFamily: TP_MONO, fontSize: 11,
          color: TP_DIMMER, letterSpacing: '0.15em',
          textTransform: 'uppercase',
        }}>{sublabel}</div>
      )}
    </div>
  );
}

function Paste_v2({ start, fromX, fromY, toX, toY, label, dur = 1.4 }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - start) / dur, 0, 1);
  if (localTime < start || t >= 1) return null;
  const eased = Easing.easeInOutCubic(t);
  const x = fromX + (toX - fromX) * eased;
  const yArc = -40 * Math.sin(eased * Math.PI);
  const y = fromY + (toY - fromY) * eased + yArc;
  const opacity = t < 0.15 ? t / 0.15 : t > 0.85 ? (1 - t) / 0.15 : 1;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: 'translate(-50%, -50%)',
      padding: '5px 11px',
      border: `1px solid ${TP_BORDER}`,
      background: TP_ELEV,
      fontFamily: TP_MONO, fontSize: 11,
      color: TP_FG,
      letterSpacing: '0.02em',
      opacity, borderRadius: 999,
      whiteSpace: 'nowrap',
    }}>{label}</div>
  );
}

function Arrow_v2({ x1, y1, x2, y2, opacity = 1, dashed = false, color = TP_BORDER }) {
  const dx = x2 - x1, dy = y2 - y1;
  const len = Math.sqrt(dx * dx + dy * dy);
  const angle = Math.atan2(dy, dx) * 180 / Math.PI;
  return (
    <>
      <div style={{
        position: 'absolute', left: x1, top: y1,
        width: len, height: 1,
        background: dashed ? 'transparent' : color,
        borderTop: dashed ? `1px dashed ${color}` : 'none',
        transformOrigin: '0 50%',
        transform: `rotate(${angle}deg)`,
        opacity,
      }} />
      <svg style={{
        position: 'absolute', left: x2 - 4, top: y2 - 4,
        width: 8, height: 8, opacity,
        transform: `rotate(${angle}deg)`, transformOrigin: 'center',
        overflow: 'visible',
      }}>
        <path d="M 0 0 L 8 4 L 0 8 Z" fill={color} />
      </svg>
    </>
  );
}

function FlowDot_v2({ x1, y1, x2, y2, phase = 0, color = TP_VIOLET }) {
  const time = useTime();
  const t = ((time + phase) % 1.6) / 1.6;
  const x = x1 + (x2 - x1) * t;
  const y = y1 + (y2 - y1) * t;
  const opacity = t < 0.15 ? t / 0.15 : t > 0.85 ? (1 - t) / 0.15 : 1;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: 5, height: 5,
      background: color, borderRadius: '50%',
      transform: 'translate(-50%, -50%)',
      opacity, boxShadow: `0 0 10px ${color}`,
    }} />
  );
}

function DiagramBeforeAfter_v2() {
  return (
    <Stage width={1600} height={900} duration={14} background={TP_BG} persistKey="d2-v2">
      <SlideChrome eyebrow="three palms / the shift" hint="diagram · 02 / 03" />

      <Sprite start={0} end={14}>
        {({ localTime, duration }) => {
          const op = clamp(localTime / 0.5, 0, 1)
            * (localTime > duration - 0.5 ? clamp((duration - localTime) / 0.5, 0, 1) : 1);
          return (
            <SlideTitle opacity={op}>
              before · after
              <div style={{
                marginTop: 14,
                fontFamily: TP_BODY, fontSize: 22, fontWeight: 400,
                color: TP_DIM, letterSpacing: 0,
              }}>stop catching Claude up. let Claude read.</div>
            </SlideTitle>
          );
        }}
      </Sprite>

      {/* BEFORE row */}
      <Sprite start={0.8} end={14}>
        {({ localTime, duration }) => {
          const op = clamp(localTime / 0.5, 0, 1);
          const dim = localTime > 7.5 ? clamp(1 - (localTime - 7.5) / 1.0, 0.3, 1) : 1;
          const finalOp = op * dim
            * (localTime > duration - 0.5 ? clamp((duration - localTime) / 0.5, 0, 1) : 1);
          return (
            <>
              <div style={{
                position: 'absolute', left: 80, top: 320,
                fontFamily: TP_MONO, fontSize: 12, color: '#f59e0b',
                letterSpacing: '0.15em', textTransform: 'uppercase',
                opacity: finalOp,
              }}>before</div>

              <Node_v2 x={240} y={420} w={150} h={80} label="you" sublabel="every session" opacity={finalOp} />
              <Node_v2 x={1120} y={420} w={180} h={80} label="claude" sublabel="cold start" opacity={finalOp} dashed />
              <Node_v2 x={1420} y={420} w={140} h={80} label="output" opacity={finalOp} />

              <Arrow_v2 x1={315} y1={420} x2={1030} y2={420} opacity={finalOp * 0.8} />
              <Arrow_v2 x1={1210} y1={420} x2={1350} y2={420} opacity={finalOp * 0.8} />
            </>
          );
        }}
      </Sprite>

      <Sprite start={1.5} end={7.5}>
        {() => {
          const pastes = [
            { t: 0.0, label: '"hey claude, let me catch you up..."' },
            { t: 0.5, label: 'project context' },
            { t: 1.0, label: 'pricing tiers' },
            { t: 1.4, label: 'transcript' },
            { t: 1.8, label: 'intake questions' },
            { t: 2.2, label: 'retell prompt' },
            { t: 2.6, label: 'safety constraints' },
            { t: 3.0, label: 'tone guide' },
            { t: 3.4, label: 'oh wait, also...' },
            { t: 3.8, label: 'one more thing...' },
          ];
          return (
            <>
              {pastes.map((p, i) => (
                <Paste_v2 key={i} start={p.t}
                  fromX={315} fromY={420} toX={1030} toY={420}
                  label={p.label} />
              ))}
            </>
          );
        }}
      </Sprite>

      <Sprite start={5.5} end={8}>
        {({ localTime, duration }) => {
          const t = clamp(localTime / 0.6, 0, 1);
          const out = localTime > duration - 0.5 ? clamp((duration - localTime) / 0.5, 0, 1) : 1;
          return (
            <div style={{
              position: 'absolute', left: 670, top: 510,
              transform: 'translate(-50%, 0)',
              opacity: t * out,
              fontFamily: TP_DISPLAY, fontSize: 22, fontWeight: 500,
              color: TP_DIM, letterSpacing: '-0.02em',
              textAlign: 'center',
            }}>every. single. session.</div>
          );
        }}
      </Sprite>

      {/* AFTER row */}
      <Sprite start={7.8} end={14}>
        {({ localTime, duration }) => {
          const op = clamp(localTime / 0.6, 0, 1)
            * (localTime > duration - 0.5 ? clamp((duration - localTime) / 0.5, 0, 1) : 1);
          return (
            <>
              <div style={{
                position: 'absolute', left: 80, top: 640,
                fontFamily: TP_MONO, fontSize: 12, color: '#22c55e',
                letterSpacing: '0.15em', textTransform: 'uppercase',
                opacity: op,
              }}>after</div>

              <Node_v2 x={240} y={750} w={150} h={80} label="you" sublabel="one prompt" opacity={op} />
              <Node_v2 x={920} y={750} w={180} h={80} label="claude" sublabel="reads vault" opacity={op} accent glow={localTime > 1} />

              {/* vault card above claude */}
              <div style={{
                position: 'absolute', left: 920, top: 530,
                width: 200,
                transform: 'translate(-50%, -50%)',
                opacity: op,
                border: `1px solid ${TP_VIOLET}`,
                background: TP_VIOLET_SOFT,
                borderRadius: 14,
                padding: '14px 16px',
              }}>
                <div style={{
                  fontFamily: TP_MONO, fontSize: 10, color: TP_VIOLET,
                  letterSpacing: '0.15em', textTransform: 'uppercase',
                  marginBottom: 8,
                }}>vault</div>
                {['Notes/', 'Transcripts/', 'Services/', 'CLAUDE.md'].map((f, i) => (
                  <div key={i} style={{
                    fontFamily: TP_MONO, fontSize: 12, color: TP_FG,
                    opacity: 0.85, lineHeight: 1.7,
                  }}>{f}</div>
                ))}
              </div>

              <Node_v2 x={1280} y={750} w={180} h={80} label="proposal" sublabel="+ live demo" opacity={op} />

              <Arrow_v2 x1={315} y1={750} x2={830} y2={750} opacity={op * 0.8} color={TP_VIOLET} />
              <Arrow_v2 x1={1010} y1={750} x2={1190} y2={750} opacity={op * 0.8} color={TP_VIOLET} />
              <Arrow_v2 x1={920} y1={620} x2={920} y2={710} opacity={op * 0.8} color={TP_VIOLET} dashed />

              <div style={{
                position: 'absolute', left: 570, top: 720,
                transform: 'translate(-50%, 0)',
                fontFamily: TP_DISPLAY, fontSize: 18, fontWeight: 500,
                color: TP_DIM,
                opacity: clamp((localTime - 0.6) / 0.5, 0, 1),
              }}>"deploy a proposal..."</div>

              <div style={{
                position: 'absolute', left: 945, top: 660,
                fontFamily: TP_MONO, fontSize: 11, color: TP_VIOLET,
                letterSpacing: '0.05em',
                opacity: clamp((localTime - 0.8) / 0.5, 0, 1),
              }}>claude reads</div>
            </>
          );
        }}
      </Sprite>

      <Sprite start={9} end={14}>
        {() => (
          <>
            <FlowDot_v2 x1={920} y1={620} x2={920} y2={710} phase={0} />
            <FlowDot_v2 x1={920} y1={620} x2={920} y2={710} phase={0.5} />
            <FlowDot_v2 x1={920} y1={620} x2={920} y2={710} phase={1.0} />
          </>
        )}
      </Sprite>
    </Stage>
  );
}

window.DiagramBeforeAfter_v2 = DiagramBeforeAfter_v2;