// Base do kit luxo: cores, fontes, curvas e medidas. Todo número visual sai daqui.
// Os elementos importam só este arquivo, 'react' e 'remotion'. Nada de fora da pasta do kit.
import {continueRender, delayRender} from 'remotion';
import fonte0Url from './fontes/cormorant.woff2';
import fonte1Url from './fontes/cormorant-i.woff2';
import fonte2Url from './fontes/jost.woff2';

// ---------- tela ----------
export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
// área segura (Reels/TikTok): o que se lê fica entre estas linhas
export const SEGURA = {topo: 168, base: 1330, lado: 80};
export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px

// ---------- cor ----------
export const COR = {
  preto: '#0B0907',
  marrom: '#1A1410',
  ouro: '#C8A24D',
  ouroClaro: '#F3DFA4',
  ouroEscuro: '#8F6B26',
  creme: '#F1E6D0'
};


// ---------- fonte ----------
// Nome de família com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
export const FONTE = "\"LX Cormorant\", Georgia, serif";
export const ITALICA = "\"LX Cormorant\", Georgia, serif";
export const CAIXA = "\"LX Jost\", system-ui, sans-serif";
const fontes = [
  {nome: 'LX Cormorant', url: fonte0Url, peso: '300 600', estilo: 'normal'},
  {nome: 'LX Cormorant', url: fonte1Url, peso: '300 500', estilo: 'italic'},
  {nome: 'LX Jost', url: fonte2Url, peso: '300 500', estilo: 'normal'},
];
if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__luxo) {
  (globalThis as Record<string, unknown>).__luxo = true;
  for (const f of fontes) {
    const h = delayRender('luxo: ' + f.nome);
    new FontFace(f.nome, `url(${f.url}) format('woff2')`, {weight: f.peso, style: f.estilo}).load()
      .then((ff) => {document.fonts.add(ff); continueRender(h);})
      .catch(() => continueRender(h));
  }
}

// ---------- tempo e curva ----------
export const c01 = (t: number) => Math.max(0, Math.min(1, t));
/** progresso 0..1 de f entre a e b */
export const seg = (f: number, a: number, b: number) => c01((f - a) / (b - a));
/** saída rápida e pouso longo, parecida com cubic-bezier(.2,.8,.2,1) */
export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
/** pouso com overshoot (passa 1.03x e volta), toda entrada usa esta */
export const ov = (t: number) => { const x = c01(t) - 1; const k = 0.8; return 1 + (k + 1) * x * x * x + k * x * x; };
export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
/** uma batida da trilha do kit (78 bpm) em quadros */
export const BATIDA = 23.1;

// ---------- medida de texto ----------
// Mede com canvas (só guarda no cache depois que a fonte carregou) pra encolher a linha que passaria
// da largura útil. Nunca deixa palavra cortada.
let canvas: HTMLCanvasElement | null = null;
const cache = new Map<string, number>();
export const larguraTexto = (texto: string, tamanho: number, peso = 300, trackingEm = 0, familia = 'LX Cormorant'): number => {
  const chave = `${texto}|${tamanho}|${peso}|${trackingEm}|${familia}`;
  const c = cache.get(chave); if (c !== undefined) return c;
  if (typeof document === 'undefined') return texto.length * tamanho * 0.56;
  canvas = canvas || document.createElement('canvas');
  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.56;
  const fonte = `${peso} ${tamanho}px "${familia}"`;
  ctx.font = fonte;
  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
  if (document.fonts.check(fonte)) cache.set(chave, w);
  return w;
};
/** o maior tamanho até `tamanho` em que o texto cabe em `largura` */
export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 300, trackingEm = 0, familia = 'LX Cormorant') => {
  const w = larguraTexto(texto, tamanho, peso, trackingEm, familia);
  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
};
/** tira os asteriscos de destaque: "Usar *IA*" -> "Usar IA" */
export const textoLimpo = (t: string) => t.replace(/\*/g, '');
/** quebra "a *b* c" em partes {t, d}: d = destaque */
export const partes = (t: string) => t.split(/(\*[^*]+\*)/).filter(Boolean).map((s) => s.startsWith('*') ? {t: s.slice(1, -1), d: true} : {t: s, d: false});
export const OURO = `linear-gradient(100deg, ${COR.ouroEscuro} 0%, #E8CD83 38%, #B88B35 52%, ${COR.ouroClaro} 70%, ${COR.ouroEscuro} 100%)`;
/** suave e lento: nada de pancada neste kit */
export const suave = (t: number) => { const x = c01(t); return x * x * (3 - 2 * x); };