// Shared scene primitives for the AMLify video.
// Helpers for fades, ring, status pills, and small UI bits used across scenes.

const BRAND = '#0d9488';
const BRAND_700 = '#0f766e';
const BRAND_50 = '#f0fdfa';
const ACCENT = '#d97706';
const ACCENT_50 = '#fffbeb';
const SLATE_900 = '#0f172a';
const SLATE_500 = '#64748b';
const SLATE_400 = '#94a3b8';
const SLATE_200 = '#e2e8f0';
const SLATE_50 = '#f8fafc';
const RED = '#dc2626';
const EMERALD = '#059669';

const FONT = "'Plus Jakarta Sans', system-ui, sans-serif";
const MONO = "'JetBrains Mono', ui-monospace, monospace";

// Fade element in/out based on local sprite time.
function FadeIn({ delay = 0, dur = 0.4, y = 8, children, style }) {
  const { localTime } = window.useSprite();
  const t = window.clamp((localTime - delay) / dur, 0, 1);
  const eased = window.Easing.easeOutCubic(t);
  return (
    <div style={{
      opacity: eased,
      transform: `translateY(${(1 - eased) * y}px)`,
      ...style,
    }}>
      {children}
    </div>
  );
}

// Same but absolute-positioned.
function FadeInAt({ x, y, delay = 0, dur = 0.4, dy = 8, children, style }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, ...style }}>
      <FadeIn delay={delay} dur={dur} y={dy}>{children}</FadeIn>
    </div>
  );
}

// Animated ring (for the AUSTRAC readiness card).
function ProgressRing({ size = 88, stroke = 8, value, color = BRAND, bg = '#e2e8f0', label, sublabel }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - window.clamp(value / 100, 0, 1));
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke={bg} strokeWidth={stroke} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r}
          stroke={color} strokeWidth={stroke} fill="none"
          strokeDasharray={c} strokeDashoffset={off}
          strokeLinecap="round"
          style={{ transition: 'stroke-dashoffset 200ms linear' }}/>
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ fontSize: size * 0.28, fontWeight: 700, color: SLATE_900, letterSpacing: '-0.02em' }}>
          {Math.round(value)}%
        </div>
        {sublabel && <div style={{ fontSize: 10, color: SLATE_500, marginTop: -2 }}>{sublabel}</div>}
      </div>
    </div>
  );
}

// Status pill — used everywhere.
function Pill({ tone = 'neutral', children, icon = null, size = 'md' }) {
  const tones = {
    neutral: { bg: SLATE_50, fg: SLATE_500, br: SLATE_200 },
    brand:   { bg: BRAND_50, fg: BRAND_700, br: '#99f6e4' },
    success: { bg: '#ecfdf5', fg: EMERALD,  br: '#a7f3d0' },
    warn:    { bg: ACCENT_50, fg: ACCENT,   br: '#fde68a' },
    danger:  { bg: '#fef2f2', fg: RED,      br: '#fecaca' },
    dark:    { bg: '#0f172a', fg: '#5eead4', br: 'transparent' },
  };
  const T = tones[tone];
  const sizes = {
    sm: { padding: '2px 8px', fontSize: 10.5, gap: 4 },
    md: { padding: '4px 10px', fontSize: 11.5, gap: 5 },
    lg: { padding: '6px 12px', fontSize: 12.5, gap: 6 },
  };
  const S = sizes[size];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: S.gap,
      padding: S.padding, fontSize: S.fontSize, fontWeight: 600,
      background: T.bg, color: T.fg,
      borderRadius: 999,
      border: `1px solid ${T.br}`,
      letterSpacing: '0.01em',
      lineHeight: 1.2,
      whiteSpace: 'nowrap',
    }}>
      {icon}{children}
    </span>
  );
}

// Generic card.
function Card({ children, style, padding = 24 }) {
  return (
    <div style={{
      background: '#fff',
      border: '1px solid rgba(226,232,240,0.8)',
      borderRadius: 16,
      padding,
      ...style,
    }}>{children}</div>
  );
}

// Section eyebrow label
function Eyebrow({ children, color = SLATE_400 }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 600, color,
      textTransform: 'uppercase', letterSpacing: '0.1em',
    }}>{children}</div>
  );
}

// The dotted blurred orbs used in marketing dark spotlights.
function GlowOrbs({ tealOpacity = 0.18, amberOpacity = 0.12 }) {
  return (
    <>
      <div style={{
        position: 'absolute', left: -120, top: -100,
        width: 380, height: 380, borderRadius: '50%',
        background: `rgba(13,148,136,${tealOpacity})`,
        filter: 'blur(80px)', pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', right: -100, bottom: -120,
        width: 360, height: 360, borderRadius: '50%',
        background: `rgba(217,119,6,${amberOpacity})`,
        filter: 'blur(80px)', pointerEvents: 'none',
      }}/>
    </>
  );
}

// Logo lockup (full word).
function LogoLockup({ size = 32, color = '#fff' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <div style={{
        width: size, height: size, borderRadius: size * 0.27,
        background: `linear-gradient(135deg,${BRAND},${BRAND_700})`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff',
      }}>
        <window.L_ShieldCheck size={size * 0.55} strokeWidth={2.25}/>
      </div>
      <div style={{
        fontSize: size * 0.78, fontWeight: 800, letterSpacing: '-0.025em',
        color, fontFamily: FONT,
      }}>AMLify</div>
    </div>
  );
}

// Section title — 5-min tour scene labels.
function SceneLabel({ chapter, title, color = SLATE_400 }) {
  return (
    <FadeIn>
      <div style={{ fontFamily: FONT }}>
        <div style={{
          fontFamily: MONO, fontSize: 12, color, letterSpacing: '0.08em',
          textTransform: 'uppercase', marginBottom: 10,
        }}>{chapter}</div>
        <div style={{
          fontSize: 56, fontWeight: 800, color: SLATE_900, letterSpacing: '-0.025em',
          lineHeight: 1.05,
        }}>{title}</div>
      </div>
    </FadeIn>
  );
}

// Caption banner used at top/bottom of dashboard scenes — narrates what's happening.
function Caption({ children, position = 'top', tone = 'dark' }) {
  const isTop = position === 'top';
  const palette = tone === 'dark'
    ? { bg: 'rgba(15,23,42,0.94)', fg: '#fff', br: 'rgba(255,255,255,0.08)' }
    : { bg: 'rgba(255,255,255,0.96)', fg: SLATE_900, br: SLATE_200 };
  return (
    <div style={{
      position: 'absolute', left: '50%', transform: 'translateX(-50%)',
      [isTop ? 'top' : 'bottom']: 28,
      background: palette.bg, color: palette.fg,
      border: `1px solid ${palette.br}`,
      borderRadius: 999,
      padding: '11px 22px',
      fontSize: 16, fontWeight: 600, letterSpacing: '-0.005em',
      fontFamily: FONT,
      backdropFilter: 'blur(20px)',
      boxShadow: '0 8px 24px -8px rgba(15,23,42,0.25)',
      display: 'flex', alignItems: 'center', gap: 10,
      maxWidth: '80%',
      whiteSpace: 'nowrap',
    }}>{children}</div>
  );
}

// Mouse cursor for interaction scenes.
function Cursor({ x, y }) {
  return (
    <svg width="20" height="22" viewBox="0 0 20 22" style={{
      position: 'absolute', left: x, top: y,
      pointerEvents: 'none', zIndex: 100,
      filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))',
    }}>
      <path d="M2 1 L2 18 L7 14 L10 21 L13 19 L10 13 L17 13 Z"
        fill="#fff" stroke="#0f172a" strokeWidth="1.2" strokeLinejoin="round"/>
    </svg>
  );
}

Object.assign(window, {
  BRAND, BRAND_700, BRAND_50, ACCENT, ACCENT_50,
  SLATE_900, SLATE_500, SLATE_400, SLATE_200, SLATE_50, RED, EMERALD,
  FONT, MONO,
  FadeIn, FadeInAt, ProgressRing, Pill, Card, Eyebrow,
  GlowOrbs, LogoLockup, SceneLabel, Caption, Cursor,
});