// Bloco vídeo + CTAs matrícula 2026 / pré-inscrição 2027
const Enrollment = () => {
  return (
    <section id="matricula" className="enroll">
      <div className="container">
        <div className="enroll-card">
          <div className="enroll-video">
            <div className="ph navy enroll-video-ph">
              <span>vídeo — convite das matrículas</span>
            </div>
            <button className="enroll-play" aria-label="play">
              <svg viewBox="0 0 24 24" width="32" height="32" fill="var(--abc-navy)">
                <path d="M8 5v14l11-7z" />
              </svg>
            </button>
            <div className="enroll-video-deco" />
          </div>
          <div className="enroll-body">
            <div className="eyebrow">Matrículas abertas</div>
            <h2>Seu lugar no Ábaco<br/>te espera.</h2>
            <p>
              Agende uma visita guiada e conheça o projeto pedagógico que há 48 anos
              forma estudantes que pensam, criam e transformam.
            </p>

            <div className="enroll-actions">
              <a href="#" className="enroll-cta enroll-cta-main">
                <div className="enroll-cta-eyebrow">Para 2026</div>
                <div className="enroll-cta-title">Matricule-se</div>
                <div className="enroll-cta-sub">Últimas vagas — agende sua visita</div>
                <svg className="enroll-cta-arrow" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </a>
              <a href="#" className="enroll-cta enroll-cta-alt">
                <div className="enroll-cta-eyebrow">Para 2027</div>
                <div className="enroll-cta-title">Pré-inscrição</div>
                <div className="enroll-cta-sub">Reserve sua vaga com prioridade</div>
                <svg className="enroll-cta-arrow" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Enrollment = Enrollment;