// Shared primitives for FitNexus promo video
// Brand tokens (from fitnexus/packages/ui/src/theme.ts)
const BRAND = {
  volt: '#CCFF00',
  voltHover: '#D9FF33',
  voltDim: '#A2CC00',
  voltGlow: 'rgba(204, 255, 0, 0.45)',
  bg: '#0a0a0a',
  surface: '#111111',
  surfaceHigh: '#1a1a1a',
  cardLow: '#131313',
  cardHigh: '#1c1c1c',
  glassBg: 'rgba(255,255,255,0.04)',
  glassBorder: 'rgba(255,255,255,0.08)',
  glassBorderStrong: 'rgba(255,255,255,0.14)',
  textPrimary: '#ffffff',
  textSecondary: 'rgba(255,255,255,0.65)',
  textTertiary: 'rgba(255,255,255,0.38)',
  textMeta: 'rgba(255,255,255,0.25)',
};

const FONT_SANS = '"Inter", "SF Pro Display", -apple-system, system-ui, sans-serif';
const FONT_MONO = '"JetBrains Mono", ui-monospace, SFMono-Regular, monospace';
const FONT_DISPLAY = '"Inter", "SF Pro Display", -apple-system, system-ui, sans-serif';

// ── Glass card ──
function GlassCard({ x, y, width, height, children, style = {}, elevation = 'default', radius = 18 }) {
  const bgByElev = {
    subtle: 'rgba(255,255,255,0.025)',
    default: 'rgba(255,255,255,0.045)',
    elevated: 'rgba(255,255,255,0.07)',
  };
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width, height,
      background: bgByElev[elevation],
      border: `1px solid ${BRAND.glassBorder}`,
      borderRadius: radius,
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
      overflow: 'hidden',
      ...style,
    }}>
      {children}
    </div>
  );
}

// ── Lime button ──
function VoltButton({ x, y, width = 140, height = 44, children, style = {}, ghost = false }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width, height,
      borderRadius: 12,
      background: ghost ? 'transparent' : BRAND.volt,
      border: ghost ? `1px solid ${BRAND.glassBorderStrong}` : 'none',
      color: ghost ? '#fff' : '#0a0a0a',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: FONT_SANS,
      fontWeight: 700,
      fontSize: 14,
      letterSpacing: '-0.01em',
      boxShadow: ghost ? 'none' : `0 0 24px ${BRAND.voltGlow}`,
      ...style,
    }}>{children}</div>
  );
}

// ── Scene wrapper: vignette + optional bg fx ──
function SceneBG({ children }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: BRAND.bg,
      overflow: 'hidden',
    }}>
      {/* subtle gradient */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 40%, rgba(204,255,0,0.05) 0%, transparent 60%)',
      }}/>
      {/* grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)
        `,
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
      }}/>
      {children}
      {/* vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%)',
        pointerEvents: 'none',
      }}/>
    </div>
  );
}

// ── Logo mark ──
function LogoMark({ size = 56, glow = true }) {
  return (
    <div style={{
      width: size, height: size, position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <img src="assets/logo.png" alt="FitNexus" style={{
        width: '100%', height: '100%', objectFit: 'contain',
        display: 'block',
      }}/>
      {glow && (
        <div style={{
          position: 'absolute', inset: -8,
          background: `radial-gradient(circle, ${BRAND.voltGlow} 0%, transparent 70%)`,
          pointerEvents: 'none',
          zIndex: -1,
        }}/>
      )}
    </div>
  );
}

function Wordmark({ size = 28, opacity = 1 }) {
  return (
    <div style={{
      fontFamily: FONT_DISPLAY,
      fontWeight: 800,
      fontSize: size,
      letterSpacing: '-0.03em',
      color: '#fff',
      opacity,
      display: 'flex', alignItems: 'baseline', gap: 0,
    }}>
      <span>Fit</span>
      <span style={{ color: BRAND.volt, textShadow: `0 0 20px ${BRAND.voltGlow}` }}>Nexus</span>
    </div>
  );
}

// ── Chapter label (scene intro marker) — bold audience headline ──
function ChapterLabel({ x, y, chapter, title, progress = 1 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      opacity: progress,
      transform: `translateX(${(1 - progress) * -16}px)`,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6,
      }}>
        <div style={{
          width: 32, height: 2,
          background: BRAND.volt,
          boxShadow: `0 0 10px ${BRAND.voltGlow}`,
        }}/>
        <div style={{
          fontFamily: FONT_MONO,
          fontSize: 13,
          color: BRAND.volt,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          fontWeight: 700,
        }}>
          {chapter}
        </div>
      </div>
      <div style={{
        fontFamily: FONT_DISPLAY,
        fontSize: 36,
        fontWeight: 800,
        color: '#fff',
        letterSpacing: '-0.025em',
        textShadow: `0 0 24px rgba(0,0,0,0.6)`,
      }}>
        {title}
      </div>
    </div>
  );
}

// ── Big overlay text (Apple-style) ──
function BigHeadline({ x, y, line1, line2, accent, progress = 1, size = 64, width = 800 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width,
      fontFamily: FONT_DISPLAY,
      fontWeight: 800,
      fontSize: size,
      lineHeight: 1.02,
      letterSpacing: '-0.035em',
      color: '#fff',
    }}>
      <div style={{
        opacity: Math.min(1, progress * 1.5),
        transform: `translateY(${(1 - Math.min(1, progress * 1.5)) * 20}px)`,
      }}>{line1}</div>
      {line2 && (
        <div style={{
          opacity: Math.max(0, (progress - 0.25) * 1.5),
          transform: `translateY(${Math.max(0, 1 - (progress - 0.25) * 1.5) * 20}px)`,
          color: accent || BRAND.volt,
        }}>{line2}</div>
      )}
    </div>
  );
}

// ── Pulse dot (live indicator) ──
function PulseDot({ x, y, size = 8, color = BRAND.volt, time = 0 }) {
  const p = (Math.sin(time * 4) + 1) / 2;
  return (
    <div style={{ position: 'absolute', left: x, top: y }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: color,
        boxShadow: `0 0 ${8 + p * 12}px ${color}`,
      }}/>
    </div>
  );
}

Object.assign(window, {
  BRAND, FONT_SANS, FONT_MONO, FONT_DISPLAY,
  GlassCard, VoltButton, SceneBG, LogoMark, Wordmark,
  ChapterLabel, BigHeadline, PulseDot,
});