// act-stub.jsx — F1 placeholder for unbuilt acts.
// A full-bleed scene that shows the act label + detail, with a subtle grid
// and a "F1 STUB" watermark, so the user can see the scaffold is wired.
//
// Exports on window: ActStub

function ActStub({ label = "Acto", detail = "", accent = "#007AFF" }) {
  const { localTime, duration } = useSprite();
  const fadeIn = 0.4;
  const fadeOut = 0.4;
  const exitStart = duration - fadeOut;
  let opacity = 1;
  if (localTime < fadeIn) opacity = Easing.easeOutCubic(Math.min(1, localTime / fadeIn));
  else if (localTime > exitStart) opacity = 1 - Easing.easeInCubic(Math.min(1, (localTime - exitStart) / fadeOut));

  // Animate accent ring breathing
  const breath = 0.5 + 0.5 * Math.sin(localTime * 1.8);

  return (
    <div style={{
      position: 'absolute',
      inset: 0,
      background: '#f5f5f7',
      opacity,
      overflow: 'hidden',
    }}>
      {/* Subtle grid bg */}
      <div style={{
        position: 'absolute',
        inset: 0,
        background:
          'repeating-linear-gradient(0deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 60px),' +
          'repeating-linear-gradient(90deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 60px)',
        pointerEvents: 'none',
      }} />

      {/* Top eyebrow with accent */}
      <div style={{
        position: 'absolute',
        top: 40, left: 40,
        display: 'flex',
        alignItems: 'center',
        gap: 12,
      }}>
        <div style={{
          width: 12, height: 12,
          borderRadius: '50%',
          background: accent,
          boxShadow: `0 0 ${8 + breath * 14}px ${accent}aa`,
          transition: 'box-shadow 200ms',
        }} />
        <div style={{
          fontFamily: 'ui-monospace, "SF Mono", monospace',
          fontSize: 12,
          fontWeight: 600,
          letterSpacing: 0.16,
          textTransform: 'uppercase',
          color: '#1d1d1f',
        }}>
          {label}
        </div>
      </div>

      {/* Center detail panel */}
      <div style={{
        position: 'absolute',
        left: 60,
        top: 140,
        width: 880,
        height: 480,
        background: '#fff',
        borderRadius: 18,
        border: '1px solid #e8e8ed',
        boxShadow: '0 16px 48px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
        padding: '40px 60px',
        textAlign: 'center',
      }}>
        <div style={{
          width: 56, height: 56,
          borderRadius: 14,
          background: `linear-gradient(135deg, ${accent}, ${accent}66)`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginBottom: 22,
          boxShadow: `0 8px 24px ${accent}33`,
        }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
            <path d="M5 12l5 5L20 7" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>

        <div style={{
          fontSize: 26,
          fontWeight: 600,
          letterSpacing: -0.02,
          color: '#1d1d1f',
          marginBottom: 14,
        }}>
          Escena en construcción
        </div>

        <div style={{
          fontSize: 15,
          color: '#6e6e73',
          lineHeight: 1.55,
          maxWidth: 640,
          letterSpacing: -0.005,
        }}>
          {detail}
        </div>

        <div style={{
          marginTop: 36,
          fontFamily: 'ui-monospace, "SF Mono", monospace',
          fontSize: 11,
          color: '#a1a1a6',
          letterSpacing: 0.08,
          textTransform: 'uppercase',
        }}>
          F1 · Andamio · próximas fases
        </div>
      </div>

      {/* Watermark */}
      <div style={{
        position: 'absolute',
        bottom: 16,
        left: 40,
        fontFamily: 'ui-monospace, "SF Mono", monospace',
        fontSize: 11,
        color: '#a1a1a6',
        letterSpacing: 0.04,
      }}>
        {label.toUpperCase()} · stub placeholder
      </div>
    </div>
  );
}

Object.assign(window, { ActStub });