/* Embarque — final page · v2 Caribe */

function Embarque(){
  const people = CDC.PEOPLE;
  const days = CDC.daysUntil(CDC.EMBARQUE_DATE);
  const embarcados = people.filter(p => p.embarcado);
  const onPace = people.filter(p => !p.embarcado && p.pts >= 700);
  const inRisk = people.filter(p => p.pts < 400);

  return (
    <div className="fade-in">
      <div className="hero-photo">
        <div className="bg embarque"></div>
        <div className="veil"></div>
        <div className="content">
          <div className="eb"><span className="bar"></span><span>Fevereiro · 15 · 2027 · Porto de Santos</span></div>
          <h1>
            <span className="not-italic">A diferença entre</span> <span className="turq">R$200M</span> <span className="not-italic">e</span> <span className="turq">R$400M</span><br/>
            é <span style={{ fontStyle:'normal', fontWeight:700 }}>uma</span> variável.
          </h1>
        </div>
      </div>

      <div className="page">
        <div className="emb-stats">
          <div className="emb-stat feature">
            <div className="k">Dias até embarque</div>
            <div className="v">{days}</div>
            <div className="sub">15 · FEV · 2027</div>
          </div>
          <div className="emb-stat">
            <div className="k">Equipe</div>
            <div className="v">13</div>
            <div className="sub">colaboradores · Grupo Mirandas</div>
          </div>
          <div className="emb-stat">
            <div className="k">Bilhetes</div>
            <div className="v">13</div>
            <div className="sub">cabines · 1 destino</div>
          </div>
          <div className="emb-stat">
            <div className="k">Já a bordo</div>
            <div className="v">{embarcados.length}</div>
            <div className="sub">≥ 1.000 pts garantidos</div>
          </div>
        </div>

        <div className="emb-list">
          <h3 className="turq">Já a bordo.</h3>
          <p className="desc">
            Atingiram 1.000 pts individuais. Suíte garantida — independente do que o time fizer no resto do ano, esses estão no navio.
          </p>
          <div className="emb-grid">
            {embarcados.map(p => (
              <div className="emb-card embarked" key={p.id}>
                <div className="av">{CDCComp.initials(p.nome)}</div>
                <div className="body">
                  <span className="nm">{p.nome}</span>
                  <span className="rl">{p.cargo} · {p.time}</span>
                </div>
                <span className="status tier-suite">Suíte</span>
              </div>
            ))}
            {embarcados.length === 0 && (
              <div style={{ color:'var(--ink-mute)', padding:'24px', gridColumn:'1 / -1', textAlign:'center', fontFamily:'var(--mono)', fontSize:13, letterSpacing:'.1em' }}>
                Ainda ninguém atingiu 1.000 pts.
              </div>
            )}
          </div>
        </div>

        <div className="emb-list">
          <h3>A caminho.</h3>
          <p className="desc">
            Acima de 700 pts — em trajetória sustentável de pegar a Suíte ou subir do Premium. Falta o último empurrão até o porto.
          </p>
          <div className="emb-grid">
            {onPace.map(p => {
              const tier = CDC.tierOf(p.pts);
              const next = CDC.nextTier(p.pts);
              return (
                <div className="emb-card" key={p.id}>
                  <div className="av">{CDCComp.initials(p.nome)}</div>
                  <div className="body">
                    <span className="nm">{p.nome}</span>
                    <span className="rl">{p.pts.toLocaleString('pt-BR')} pts · {next ? `+${next.delta} → ${next.tier.nome}` : 'Suíte garantida'}</span>
                  </div>
                  <span className={`status tier-${tier.key}`}>{tier.nome}</span>
                </div>
              );
            })}
          </div>
        </div>

        {inRisk.length > 0 && (
          <div className="emb-list">
            <h3>Atenção.</h3>
            <p className="desc">
              Abaixo de 400 pts — dependendo só do caminho coletivo. Sem virada nos próximos meses, é a Interna — ou ficar no porto.
            </p>
            <div className="emb-grid">
              {inRisk.map(p => {
                const tier = CDC.tierOf(p.pts);
                return (
                  <div className="emb-card" key={p.id}>
                    <div className="av">{CDCComp.initials(p.nome)}</div>
                    <div className="body">
                      <span className="nm">{p.nome}</span>
                      <span className="rl">{p.pts.toLocaleString('pt-BR')} pts · {p.cargo}</span>
                    </div>
                    <span className={`status tier-${tier.key}`}>{tier.nome}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        <div className="emb-close">
          <span className="left">Quem faz sua parte, embarca.</span>
          <span className="stamp">Grupo Mirandas · Fev 2027</span>
        </div>
      </div>
    </div>
  );
}

window.Embarque = Embarque;