// ===== Pleita brand tokens para a animação =====

const C = {
  ink:     '#0F1E3A',
  ink2:    '#1B2D4F',
  ink3:    '#243A66',
  lime:    '#9FE870',
  lime2:   '#B8F299',
  paper:   '#FAFAF7',
  paper2:  '#F0EFE8',
  stone:   '#2C2C2C',
  stone2:  '#6B6B6B',
  stone3:  '#9B9B9B',
  line:    '#E5E3DA',
  lineDk:  '#2A3C62',
  go:      '#16A34A',
  caution: '#F59E0B',
  stop:    '#DC2626',
  info:    '#3B82F6',
};

const F = {
  display: '"DM Serif Display", "DM Sans", serif',
  sans:    '"DM Sans", system-ui, sans-serif',
  mono:    '"JetBrains Mono", ui-monospace, monospace',
};

// Marca composta: P geométrico + wordmark "Pleita."
function Wordmark({ size = 40, color = C.ink, onDark = false }) {
  const ink = onDark ? C.paper : color;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.32, lineHeight: 1 }}>
      <svg viewBox="0 0 64 64" width={size * 1.1} height={size * 1.1} aria-hidden="true">
        <path
          d="M10 6 L10 58 L22 58 L22 40 L34 40 C46.15 40 56 32.36 56 23 C56 13.64 46.15 6 34 6 Z"
          fill={ink}
        />
        <path d="M28 14 L44 23 L28 32 Z" fill={C.lime} />
      </svg>
      <span style={{ fontFamily: F.display, fontSize: size, color: ink, letterSpacing: '-0.015em' }}>
        Pleita<span style={{ color: C.lime }}>.</span>
      </span>
    </span>
  );
}

// Pequena pílula com tipografia mono — usada em headers/rótulos
function MonoTag({ children, color = C.stone2, bg = 'transparent', border = 'transparent', uppercase = true, size = 11 }) {
  return (
    <span style={{
      fontFamily: F.mono,
      fontSize: size,
      letterSpacing: '0.14em',
      textTransform: uppercase ? 'uppercase' : 'none',
      color, background: bg,
      border: border === 'transparent' ? 'none' : `1px solid ${border}`,
      borderRadius: 999,
      padding: bg === 'transparent' && border === 'transparent' ? 0 : '6px 12px',
      display: 'inline-flex', alignItems: 'center', gap: 8,
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

// Header de cena reutilizável: eyebrow + título display + sub mono
function SceneHeader({ x = 96, y = 96, eyebrow, title, sub, color = C.paper, dim = C.stone3, accent = C.lime, maxW = 1280 }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, maxWidth: maxW, color }}>
      {eyebrow && (
        <div style={{
          fontFamily: F.mono, fontSize: 13, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: accent, marginBottom: 20,
        }}>{eyebrow}</div>
      )}
      {title && (
        <h1 style={{
          fontFamily: F.display, fontSize: 96, lineHeight: 1.02,
          margin: 0, letterSpacing: '-0.02em', color,
        }}>{title}</h1>
      )}
      {sub && (
        <p style={{
          fontFamily: F.sans, fontSize: 26, lineHeight: 1.4,
          margin: '24px 0 0', color: dim, maxWidth: 920,
        }}>{sub}</p>
      )}
    </div>
  );
}

Object.assign(window, { C, F, Wordmark, MonoTag, SceneHeader });