import { RegistrationForm } from "../../components/RegistrationForm";
import { institution } from "../../config/institution";
import { registration } from "../../config/registration";
import "./registration.css";

export const metadata = {
  title: "Inscrições",
  alternates: { canonical: "/inscricoes" },
  robots: { index: false, follow: true },
};

export default function Registrations() {
  return (
    <main id="conteudo" className="registration-shell">
      <section className="registration-intro shell">
        <div>
          <p className="eyebrow">Ano letivo {registration.academicYear.name}</p>
          <h1>Inscrição infantil</h1>
          <p className="lead">
            Preencha ao seu ritmo, guarde um rascunho e reveja tudo antes de
            enviar.
          </p>
        </div>
        <div className="prototype-notice" role="note">
          <strong>Amostra para validação</strong>
          <p>
            Este percurso ainda não deve ser usado para uma inscrição real. A
            instituição irá confirmar respostas abertas, critérios, campos e
            documentos obrigatórios.
          </p>
        </div>
      </section>
      <div className="shell registration-page">
        <aside className="registration-help">
          <p className="eyebrow">Apoio</p>
          <h2>Precisa de ajuda?</h2>
          <p>
            A secretaria pode esclarecer dúvidas sobre o processo e os
            documentos.
          </p>
          <a href={`tel:${institution.phone.replaceAll(" ", "")}`}>
            {institution.phone}
          </a>
          <a href={`mailto:${institution.email}`}>{institution.email}</a>
          <div className="secure-note">
            <span aria-hidden="true">✓</span>
            <p>Documentos guardados em área privada e acesso reservado.</p>
          </div>
        </aside>
        <RegistrationForm />
      </div>
    </main>
  );
}