/* ============================================================
   Subpage chrome — shared header / footer for inner pages
   (about.html · course.html). Brand-faithful: floating chrome
   with a back square + А|Л wordmark, sticky on scroll.
   Reuses ui.jsx primitives (Label, Pill, IconButton).
   ============================================================ */

/* thin geometric А|Л monogram (matches the logo) */
function SubMonogram({ size = 22, color = "var(--ink)" }) {
  const st = { fontFamily: "var(--font-display)", fontWeight: 300, fontSize: size, lineHeight: 1,
    letterSpacing: "-0.01em", color };
  return (
    <a href="index.html" aria-label="На главную" style={{ display: "inline-flex", alignItems: "center",
      gap: size * 0.34, textDecoration: "none" }}>
      <span style={st}>А</span>
      <span style={{ width: 1, height: size * 0.92, background: color }} />
      <span style={st}>Л</span>
    </a>
  );
}

/* fixed chrome: back square + monogram (left) · primary CTA (right) */
function SubHeader({ cta, ctaHref = "enroll.html" }) {
  const { t } = useT();
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 40,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "16px 28px",
      background: solid ? "rgba(255,255,255,0.82)" : "transparent",
      backdropFilter: solid ? "blur(12px)" : "none", WebkitBackdropFilter: solid ? "blur(12px)" : "none",
      borderBottom: `1px solid ${solid ? "var(--hairline)" : "transparent"}`,
      transition: "background var(--dur) var(--ease), border-color var(--dur) var(--ease)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <a href="index.html" aria-label={t("sub.backAria")} style={{ width: 46, height: 40, borderRadius: 6,
          display: "grid", placeItems: "center", background: "var(--ink)", color: "var(--paper-on-ink)",
          textDecoration: "none" }}>
          <Icon name="arrow-left" style={{ width: 18, height: 18, strokeWidth: 1.6 }} />
        </a>
        <a href="index.html" aria-label={t("common.home")} style={{ display: "inline-flex", alignItems: "center" }}>
          <img src="logo-mark-ink.png" alt={t("brand")} style={{ height: 30, width: "auto", display: "block" }} />
        </a>
        <LangSwitcher tone="out" menuAlign="left" />
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div className="subheader-account"><AccountChip /></div>
        <Pill variant="primary" icon="plus" onClick={() => { window.location.href = ctaHref; }}>{cta || t("common.enroll")}</Pill>
      </div>
    </header>
  );
}

/* breadcrumb-style eyebrow row under the chrome */
function SubCrumb({ here }) {
  const { t } = useT();
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <a href="index.html" style={{ textDecoration: "none" }}><Label>{t("common.home")}</Label></a>
      <span style={{ color: "var(--ink-4)" }}>·</span>
      <Label tone="ink">{here}</Label>
    </div>
  );
}

/* shared footer — mirrors the home contact strip */
function SubFooter() {
  const { t } = useT();
  return (
    <footer style={{ borderTop: "1px solid var(--hairline)", background: "var(--paper)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", padding: "56px 28px",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 28 }}>
        <div>
          <div style={{ marginBottom: 16 }}>
            <img src="assets/logo-lockup-ink.png" alt={t("brand")} style={{ height: 56, width: "auto", display: "block" }} />
          </div>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.6, color: "var(--ink-2)",
            margin: 0, maxWidth: 360 }}>
            {t("sub.footerDesc")}
          </p>
        </div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <Pill variant="secondary" onClick={() => window.open((window.CHANNELS && window.CHANNELS.telegramOpen) || "#", "_blank", "noopener")}>Telegram</Pill>
          <Pill variant="secondary" onClick={() => window.open((window.CHANNELS && window.CHANNELS.youtube) || "#", "_blank", "noopener")}>YouTube</Pill>
          <Pill variant="primary" icon="plus" onClick={() => { window.location.href = "enroll.html"; }}>{t("sub.register")}</Pill>
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--hairline)", padding: "20px 28px",
        display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14 }}>
        <Label>{t("sub.footerBrandLine")}</Label>
        <Label tone="faint">{t("common.rights")}</Label>
      </div>
    </footer>
  );
}

Object.assign(window, { SubMonogram, SubHeader, SubCrumb, SubFooter });