/**
 * <ScreenPlaceholder> — ocupa as secções ainda por construir.
 *
 * Cada uma é substituída pelo ecrã real na fase indicada. Assim a navegação
 * do shell é testável desde a FASE 0 sem simular dados que não existem.
 */

const FASES_POR_SECCAO = {
  campanhas:     { fase: 'Fase 4', semana: 'Semanas 6–8' },
  lojas:         { fase: 'Fase 3', semana: 'Semana 5' },
  admin:         { fase: 'Fase 7', semana: 'Semana 10' },
};

function ScreenPlaceholder({ seccao, titulo }) {
  const info = FASES_POR_SECCAO[seccao] || {};

  return (
    <div className="mx-auto max-w-6xl">
      <div className="border border-border bg-card p-8">
        <p className="label-eyebrow">
          Por construir
        </p>
        <h1 className="mt-2 font-display text-3xl leading-none">{titulo}</h1>
        <p className="mt-3 max-w-lg text-sm text-muted-foreground">
          Esta página ainda não existe. Usa o menu para voltar ao que já está pronto.
        </p>
      </div>
    </div>
  );
}