/* ============================================================
   Enroll page — standalone "Запись и оплата" (block 05)
   Lifted verbatim from CoursePage's #enroll section so the
   menu item «Записаться и оплатить» gets its own page.
   Reuses Subpage chrome + EnrollForm.
   ============================================================ */

function EnrollPage() {
  const { t } = useT();
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const wrap = { maxWidth: 1100, margin: "0 auto", padding: "0 28px" };

  return (
    <React.Fragment>
      <SubHeader cta={t("common.enrollShort")} ctaHref="#enroll" />

      {/* ---- ENROLL + PAYMENT (block 05) ---- */}
      <section id="enroll" data-screen-label="Enroll" style={{ background: "var(--paper)",
        paddingTop: 124, scrollMarginTop: 80 }}>
        <div style={{ ...wrap, padding: "clamp(40px,6vw,72px) 28px clamp(56px,8vw,100px)" }}>
          <div style={{ marginBottom: 30 }}><SubCrumb here={t("course.enrollLabel")} /></div>
          <div style={{ paddingBottom: 36, borderBottom: "1px solid var(--hairline)", marginBottom: 48 }}>
            <div style={{ marginBottom: 20 }}><Label>{t("course.enrollLabel")}</Label></div>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(32px,5vw,64px)",
              lineHeight: 1.03, letterSpacing: "-0.012em", color: "var(--ink)", margin: 0 }}>
              {t("course.enrollTitle")}
            </h1>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(15px,1.6vw,17px)", lineHeight: 1.6,
              color: "var(--ink-2)", margin: "24px 0 0", maxWidth: 520 }}>
              {t("course.enrollSub")}
            </p>
          </div>
          <EnrollForm />
        </div>
      </section>

      <SubFooter />
    </React.Fragment>
  );
}

Object.assign(window, { EnrollPage });