// scene1.jsx — "Broken button" — user clicks Export CSV, nothing happens

function Scene1() {
  const { localTime: rawTime } = useSprite();
  const localTime = rawTime / 1.3; // slow down 1.3x

  // Cursor path uses data-target lookups so clicks always land on the
  // real button regardless of layout. Cursor enters from the right.
  const cursorPath = [
    { t: 0.0, x: 1900, y: 780 },
    { t: 1.2, x: 1750, y: 500 },
    { t: 2.4, target: 'exportCsv' },
    { t: 3.6, target: 'exportCsv' },
    { t: 4.6, target: 'exportCsv', dx: -40, dy: 70 },
    { t: 5.0, target: 'exportCsv', dx: -40, dy: 70 },
  ];
  const clicks = [
    { t: 2.5, target: 'exportCsv', color: '#dc2626' },
    { t: 3.4, target: 'exportCsv', color: '#dc2626' },
  ];

  // Shake the page slightly on each failed click
  const shakeAt = (clickT) => {
    const dt = localTime - clickT;
    if (dt < 0 || dt > 0.45) return 0;
    return Math.sin(dt * 60) * (1 - dt / 0.45) * 3;
  };
  const shakeX = shakeAt(2.5) + shakeAt(3.4);

  // Failure callout appears after second click
  const calloutOpacity = clamp((localTime - 3.7) / 0.4, 0, 1);

  return (
    <SceneFade>
      <BrowserChrome>
        <AcmeAnalyticsApp exportButtonState="broken" shakeX={shakeX} />
      </BrowserChrome>

      {/* Failure callout pointing at Export CSV button */}
      {calloutOpacity > 0 && (
        <div
          style={{
            position: 'absolute',
            left: 1370,
            top: 280,
            opacity: calloutOpacity,
            transform: `translateY(${(1 - calloutOpacity) * 6}px)`,
            zIndex: 90,
          }}
        >
          <div
            style={{
              padding: '12px 16px',
              borderRadius: 12,
              background: '#0f172a',
              color: '#fff',
              fontWeight: 600,
              fontSize: 14,
              boxShadow: '0 16px 36px rgba(15,23,42,0.45)',
              display: 'flex',
              alignItems: 'center',
              gap: 10,
              maxWidth: 320,
              border: '1px solid rgba(220,38,38,0.5)',
            }}
          >
            <span
              style={{
                width: 22,
                height: 22,
                borderRadius: 99,
                background: 'rgba(220,38,38,0.18)',
                color: '#fca5a5',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                flex: 'none',
              }}
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 8v4M12 16h.01" /></svg>
            </span>
            <div style={{ lineHeight: 1.3 }}>
              <div>Click silently failed</div>
              <div style={{ fontSize: 12, fontWeight: 500, color: '#94a3b8', marginTop: 2 }}>
                <span style={{ fontFamily: 'JetBrains Mono, ui-monospace, monospace' }}>TypeError</span> · null reference
              </div>
            </div>
            {/* arrow pointing left toward button */}
            <div
              style={{
                position: 'absolute',
                left: -7,
                top: 22,
                width: 14,
                height: 14,
                background: '#0f172a',
                transform: 'rotate(45deg)',
                borderLeft: '1px solid rgba(220,38,38,0.5)',
                borderBottom: '1px solid rgba(220,38,38,0.5)',
              }}
            />
          </div>
        </div>
      )}

      <Cursor path={cursorPath} clicks={clicks} time={localTime} />
      <SceneCaption
        scene="01"
        title="Broken button"
        caption="User clicks. Nothing happens."
      />
    </SceneFade>
  );
}

Object.assign(window, { Scene1 });