/* Shared components — Cruzeiro dos Campeões · Grupo Mirandas · v2 Caribe */

const { useState, useEffect, useMemo, useRef } = React;

function initials(name){
  return name.split(' ').filter(Boolean).slice(0,2).map(s => s[0]).join('').toUpperCase();
}

function useCountUp(target, dur = 1200, decimals = 0){
  const [val, setVal] = useState(0);
  useEffect(() => {
    let raf;
    const t0 = performance.now();
    const tick = (t) => {
      const k = Math.min(1, (t - t0) / dur);
      const eased = 1 - Math.pow(1 - k, 3);
      setVal(target * eased);
      if (k < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, dur]);
  return decimals > 0
    ? val.toFixed(decimals).replace('.', ',')
    : Math.round(val).toLocaleString('pt-BR');
}

function TierPill({ pts }){
  const t = CDC.tierOf(pts);
  const label = pts < 200 ? 'Fora' : t.nome;
  return <span className={`tier-pill tier-${t.key}`}>{label}</span>;
}

function Delta({ value }){
  if (value === 0) return <span className="d flat">— FLAT</span>;
  if (value > 0)   return <span className="d up">▲ +{value}</span>;
  return <span className="d down">▼ {value}</span>;
}

/* ---------- Mast / top nav ---------- */
function Mast({ tab, setTab }){
  const [days, setDays] = useState(CDC.daysUntil(CDC.EMBARQUE_DATE));
  useEffect(() => {
    const id = setInterval(() => setDays(CDC.daysUntil(CDC.EMBARQUE_DATE)), 60000);
    return () => clearInterval(id);
  }, []);
  const tabs = [
    { k:'placar',   ix:'01', label:'Placar' },
    { k:'regras',   ix:'02', label:'Regras' },
    { k:'embarque', ix:'03', label:'Embarque' },
  ];
  return (
    <header className="mast">
      <div className="brand">
        <img className="logo-img" src="./assets/logo-navy.png" alt="Grupo Mirandas" />
        <div className="txt">
          <span className="l1">Grupo Mirandas</span>
          <span className="l2">Cruzeiro dos Campeões · 2027</span>
        </div>
      </div>
      <nav>
        {tabs.map(t => (
          <button key={t.k} className={tab === t.k ? 'active' : ''} onClick={() => setTab(t.k)}>
            <span className="ix">{t.ix}</span>{t.label}
          </button>
        ))}
      </nav>
      <div className="count">
        <span className="dot"></span>
        <div className="info">
          <span className="d"><em>{days}</em> dias</span>
          <span className="l">15 fev · 2027</span>
        </div>
      </div>
    </header>
  );
}

function Foot(){
  return (
    <footer className="foot">
      <span>Grupo Mirandas<span className="dot"></span>Cruzeiro dos Campeões · 2027</span>
      <span>13 colaboradores<span className="dot"></span>R$ 400M<span className="dot"></span>1 destino</span>
      <span>Atualizado · {CDC.KPIS_COLETIVOS.ultimaAtualizacao}</span>
    </footer>
  );
}

window.CDCComp = { initials, useCountUp, TierPill, Delta, Mast, Foot };