// Design tokens for D1 Leads animation
const D1 = {
  // Colors
  bg: '#0a0e1f',
  bgDeep: '#060818',
  bgPanel: 'rgba(20, 26, 50, 0.85)',
  bgPanelSolid: '#141a32',
  border: 'rgba(120, 140, 220, 0.18)',
  borderBright: 'rgba(140, 160, 240, 0.35)',

  // Text
  text: '#e8ecff',
  textMuted: 'rgba(232, 236, 255, 0.62)',
  textDim: 'rgba(232, 236, 255, 0.38)',

  // Accents (blue/violet tech)
  blue: '#5b8dff',
  blueDeep: '#3a64d8',
  violet: '#a070ff',
  violetDeep: '#7a4ad8',
  cyan: '#5be0ff',
  pink: '#ff6fb5',
  green: '#4ade80',
  amber: '#f59e0b',

  // Gradients
  gradPrimary: 'linear-gradient(135deg, #5b8dff 0%, #a070ff 100%)',
  gradSubtle: 'linear-gradient(180deg, rgba(91,141,255,0.08) 0%, rgba(160,112,255,0.04) 100%)',

  // Type
  font: '"Inter", system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',

  // Shadows
  shadowGlow: '0 0 40px rgba(91, 141, 255, 0.25)',
  shadowGlowStrong: '0 0 60px rgba(91, 141, 255, 0.45)',
  shadowCard: '0 8px 32px rgba(0, 0, 0, 0.4)',
};

// ── Reusable visual primitives ──────────────────────────────────────────────

// Background: deep blue with subtle grid + glow
function StageBackground() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at 50% 30%, rgba(91, 141, 255, 0.12) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 80%, rgba(160, 112, 255, 0.10) 0%, transparent 50%),
                   ${D1.bgDeep}`,
    }}>
      {/* Subtle grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(120,140,220,0.05) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(120,140,220,0.05) 1px, transparent 1px)`,
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
      }}/>
    </div>
  );
}

// Card: glass-panel with border
function Card({ x, y, width, height, children, style = {}, glow = false }) {
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y, width, height,
      background: D1.bgPanel,
      border: `1px solid ${D1.border}`,
      borderRadius: 14,
      backdropFilter: 'blur(8px)',
      boxShadow: glow ? D1.shadowGlow : D1.shadowCard,
      overflow: 'hidden',
      ...style,
    }}>
      {children}
    </div>
  );
}

// Pill / tag
function Pill({ label, color = D1.blue, x, y, size = 'md' }) {
  const heights = { sm: 22, md: 28, lg: 34 };
  const fonts = { sm: 10, md: 12, lg: 14 };
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      height: heights[size],
      padding: `0 ${heights[size] * 0.5}px`,
      background: `color-mix(in oklab, ${color} 18%, transparent)`,
      border: `1px solid color-mix(in oklab, ${color} 50%, transparent)`,
      borderRadius: heights[size] / 2,
      color,
      fontSize: fonts[size],
      fontFamily: D1.font,
      fontWeight: 600,
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      display: 'inline-flex',
      alignItems: 'center',
      whiteSpace: 'nowrap',
    }}>
      {label}
    </div>
  );
}

// Step counter (top-left during scenes)
function StepBadge({ num, total = 13, label }) {
  return (
    <div style={{
      position: 'absolute', left: 80, top: 70,
      display: 'flex', alignItems: 'center', gap: 22,
      fontFamily: D1.mono,
      color: D1.textMuted,
      fontSize: 26,
      fontWeight: 600,
      letterSpacing: '0.12em',
    }}>
      <span style={{ color: D1.blue, fontWeight: 800, fontSize: 32 }}>
        {String(num).padStart(2, '0')}
      </span>
      <span style={{
        width: 56, height: 2, background: D1.border,
      }}/>
      <span style={{ textTransform: 'uppercase' }}>{label}</span>
      <span style={{ color: D1.textDim, marginLeft: 10 }}>/ {String(total).padStart(2, '0')}</span>
    </div>
  );
}

// Animated dot connecting two points (lead "moving")
function FlowDot({ from, to, progress, color = D1.blue, size = 10 }) {
  const t = clamp(progress, 0, 1);
  const x = from.x + (to.x - from.x) * t;
  const y = from.y + (to.y - from.y) * t;
  return (
    <div style={{
      position: 'absolute',
      left: x - size/2, top: y - size/2,
      width: size, height: size,
      borderRadius: '50%',
      background: color,
      boxShadow: `0 0 16px ${color}, 0 0 4px ${color}`,
    }}/>
  );
}

// Connection line drawn from (x1,y1) to (x2,y2). progress 0..1 reveals it.
function FlowLine({ x1, y1, x2, y2, progress = 1, color = D1.blue, dashed = false, thickness = 2 }) {
  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 - thickness/2,
      width: len * progress,
      height: thickness,
      background: dashed
        ? `repeating-linear-gradient(90deg, ${color} 0 6px, transparent 6px 12px)`
        : `linear-gradient(90deg, color-mix(in oklab, ${color} 30%, transparent), ${color})`,
      transformOrigin: '0 50%',
      transform: `rotate(${angle}deg)`,
      borderRadius: thickness/2,
    }}/>
  );
}

// Lead card: a small avatar+name card representing one lead
function LeadCard({ name = 'Marie L.', role = 'CMO', company = 'Acme Corp', size = 'md', extra = null }) {
  const dim = size === 'sm'
    ? { w: 200, padY: 10, padX: 12, av: 32, name: 13, role: 11 }
    : { w: 240, padY: 12, padX: 14, av: 38, name: 14, role: 12 };
  return (
    <div style={{
      width: dim.w,
      padding: `${dim.padY}px ${dim.padX}px`,
      background: D1.bgPanel,
      border: `1px solid ${D1.borderBright}`,
      borderRadius: 12,
      display: 'flex', alignItems: 'center', gap: 12,
      boxShadow: D1.shadowGlow,
      backdropFilter: 'blur(6px)',
    }}>
      <div style={{
        width: dim.av, height: dim.av, flexShrink: 0,
        borderRadius: '50%',
        background: D1.gradPrimary,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'white', fontWeight: 700,
        fontFamily: D1.font, fontSize: dim.av * 0.4,
      }}>
        {name.split(' ').map(s => s[0]).join('').slice(0,2)}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ color: D1.text, fontWeight: 600, fontSize: dim.name, fontFamily: D1.font }}>
          {name}
        </div>
        <div style={{ color: D1.textMuted, fontSize: dim.role, fontFamily: D1.font, marginTop: 2 }}>
          {role} · {company}
        </div>
        {extra && <div style={{ marginTop: 6 }}>{extra}</div>}
      </div>
    </div>
  );
}

// Scene title (centered low)
function SceneTitle({ kicker, title, x = 960, y = 820 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: 'translateX(-50%)',
      textAlign: 'center',
      fontFamily: D1.font,
      width: '90%',
    }}>
      {kicker && (
        <div style={{
          color: D1.blue,
          fontFamily: D1.mono,
          fontSize: 22,
          letterSpacing: '0.24em',
          textTransform: 'uppercase',
          marginBottom: 22,
          fontWeight: 600,
        }}>
          {kicker}
        </div>
      )}
      <div style={{
        color: D1.text,
        fontSize: 84,
        fontWeight: 800,
        letterSpacing: '-0.03em',
        lineHeight: 1.05,
      }}>
        {title}
      </div>
    </div>
  );
}

// Tool tag (e.g. "Sales Navigator", "Ringover") — generic text label
function ToolTag({ name, color = D1.violet, x, y, icon }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '8px 14px',
      background: D1.bgPanelSolid,
      border: `1px solid ${color}`,
      borderRadius: 8,
      color: D1.text,
      fontFamily: D1.font,
      fontWeight: 600,
      fontSize: 14,
      boxShadow: `0 0 24px color-mix(in oklab, ${color} 30%, transparent)`,
    }}>
      <div style={{
        width: 8, height: 8, borderRadius: 2,
        background: color,
        boxShadow: `0 0 8px ${color}`,
      }}/>
      {name}
    </div>
  );
}

Object.assign(window, {
  D1, StageBackground, Card, Pill, StepBadge,
  FlowDot, FlowLine, LeadCard, SceneTitle, ToolTag,
});