/**
 * A moldura dos ecrãs de entrada: login e os dois passos da MFA.
 *
 * Existe para os três serem o mesmo cartão. Quem está a configurar a MFA
 * acabou de escrever a password no ecrã anterior — se a moldura saltasse,
 * parecia que tinha ido parar a outro sítio, que é exactamente a sensação que
 * um ecrã a pedir um código não pode dar.
 */
function CartaoAuth({ sobretitulo, titulo, children, rodape }) {
  return (
    <div className="grid min-h-screen lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)]">
      <div className="flex items-center justify-center p-6">
      <div className="w-full max-w-sm">
        <div className="border border-border bg-card">
          {/* Filete laranja no topo — o mesmo gesto da página activa na sidebar */}
          <div className="h-0.5 bg-primary" aria-hidden="true" />

          <div className="p-8">
            <Logo size="md" />

            <p className="label-eyebrow mt-8">{sobretitulo}</p>
            <h1 className="mt-1 font-display text-3xl leading-none">{titulo}</h1>

            {children}
          </div>
        </div>

        {rodape}
      </div>
      </div>

      {/* Em ecrã largo, ao lado do cartão, um painel LED com o que a plataforma faz (crítica visual, 3 Nov).
          Decorativo: o cartão continua a ser tudo o que se lê e se usa. */}
      <aside className="ns-led relative m-4 hidden overflow-hidden rounded-[var(--raio)] border border-border lg:flex lg:flex-col lg:justify-end">
        <div className="relative z-10 p-12 xl:p-16">
          <p className="ns-led-titulo uppercase text-foreground">
            Da tua marca<br /><span className="text-primary">ao ecrã</span>
          </p>
          <p className="mt-5 max-w-md text-base leading-relaxed text-muted-foreground">
            Vídeos para painéis LED e redes sociais, criados a partir do site e do manual da marca, e revistos por ti antes de saírem.
          </p>
        </div>
      </aside>
    </div>
  );
}

/** O erro dos ecrãs de entrada. `role="alert"` para um leitor de ecrã o anunciar. */
function ErroAuth({ children }) {
  if (!children) return null;
  return (
    <p role="alert" className="border-l-2 border-primary bg-muted px-3 py-2 text-sm text-foreground">
      {children}
    </p>
  );
}

/** O botão principal dos ecrãs de entrada. */
// `props` inteiro e não `{ children, ...resto }`: o resto compila para um
// `var _excluded` global que outro ficheiro pisa (scripts/verificar-jsx.js).
// Os `children` seguem dentro do `props` e o React desenha-os na mesma.
function BotaoAuth(props) {
  return (
    <button
      type="submit"
      /* Desactivado fica neutro em vez de laranja esbatido — laranja a 40%
         lê-se como avariado, não como "ainda não". Fundo em secondary, não
         muted: muted é a cor do card e o botão desaparecia. */
      className="w-full bg-primary px-5 py-2.5 text-sm text-primary-foreground transition-colors
                 hover:opacity-90
                 disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted-foreground"
      {...props}
    />
  );
}