/* ============================================================
   About page — "От первых ошибок до сотен успешных учеников"
   Full story of Aleksey Lobov. Long-form editorial layout.
   ============================================================ */

function PullStat({ value, label }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: "clamp(30px,3.4vw,46px)",
        color: "var(--ink)", fontVariantNumeric: "tabular-nums", lineHeight: 1, letterSpacing: "0.01em" }}>{value}</div>
      <div style={{ marginTop: 14 }}><Label>{label}</Label></div>
    </div>
  );
}

/* a body paragraph in the reading column */
function P({ children, lead }) {
  return (
    <p style={{ fontFamily: "var(--font-sans)", fontWeight: lead ? 400 : 400,
      fontSize: lead ? "clamp(19px,2vw,23px)" : "clamp(16px,1.6vw,18px)",
      lineHeight: lead ? 1.5 : 1.7, color: lead ? "var(--ink)" : "var(--ink-2)",
      margin: "0 0 26px", textWrap: "pretty" }}>{children}</p>
  );
}

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

  return (
    <React.Fragment>
      <SubHeader />

      {/* ---- title block ---- */}
      <section data-screen-label="About — title" style={{ paddingTop: 132, background: "var(--surface)" }}>
        <div style={{ ...wrap, paddingBottom: "clamp(48px,7vw,88px)" }}>
          <div style={{ marginBottom: 30 }}><SubCrumb here={t("about.crumb")} /></div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(40px,6.4vw,84px)",
            lineHeight: 1.02, letterSpacing: "-0.015em", color: "var(--ink)", margin: 0, maxWidth: 16 + "ch" }}>
            {t("about.title")}
          </h1>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(16px,1.7vw,19px)", lineHeight: 1.6,
            color: "var(--ink-2)", margin: "30px 0 0", maxWidth: 560 }}>
            {t("about.sub")}
          </p>
        </div>
      </section>

      {/* ---- portrait + facts band ---- */}
      <section style={{ background: "var(--paper)" }}>
        <div style={{ ...wrap, padding: "clamp(40px,6vw,72px) 28px",
          display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: "clamp(28px,5vw,64px)", alignItems: "center" }}
          className="about-band">
          <div style={{ position: "relative", aspectRatio: "16 / 10" }}>
            <Smoke style={{ width: "70%", height: "80%", right: "-6%", top: "8%" }} />
            <ImagePlaceholder variant="c" label={t("about.imgLabel")} style={{ position: "absolute", inset: 0 }} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "36px 28px" }}>
            <PullStat value={stats[0].value} label={stats[0].label} />
            <PullStat value={stats[1].value} label={stats[1].label} />
            <PullStat value={stats[2].value} label={stats[2].label} />
            <PullStat value={stats[3].value} label={stats[3].label} />
          </div>
        </div>
      </section>

      {/* ---- the story ---- */}
      <section style={{ background: "var(--paper)" }}>
        <div style={{ ...wrap, paddingBottom: "clamp(56px,8vw,104px)" }}>
          <div style={{ ...read }}>
            <div style={{ marginBottom: 28 }}><Label>{t("about.pathLabel")}</Label></div>
            <P lead>{p[0]}</P>
            <P>{p[1]}</P>
            <P>{p[2]}</P>
          </div>

          {/* pull quote */}
          <blockquote style={{ margin: "clamp(40px,5vw,64px) 0", padding: "0 0 0 28px",
            borderLeft: "2px solid var(--ink)", maxWidth: 760 }}>
            <p style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(24px,3.2vw,40px)",
              lineHeight: 1.25, letterSpacing: "-0.01em", color: "var(--ink)", margin: 0 }}>
              {t("about.quote")}
            </p>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--ink-3)",
              margin: "20px 0 0" }}>
              {t("about.quoteSub")}
            </p>
          </blockquote>

          <div style={{ ...read }}>
            <P>{p[3]}</P>
            <P>{p[4]}</P>
            <P>{p[5]}</P>
            <P>{p[6]}</P>
          </div>
        </div>
      </section>

      {/* ---- closing CTA (dark) ---- */}
      <section data-screen-label="About — CTA" style={{ background: "var(--ink)" }}>
        <div style={{ ...wrap, padding: "clamp(64px,9vw,120px) 28px" }}>
          <div style={{ marginBottom: 24 }}><Label tone="faint">{t("about.ctaLabel")}</Label></div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 200, fontSize: "clamp(34px,5.4vw,68px)",
            lineHeight: 1.04, letterSpacing: "-0.01em", color: "var(--paper-on-ink)", margin: 0, maxWidth: 18 + "ch" }}>
            {t("about.ctaTitle")}
          </h2>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(16px,1.7vw,19px)", lineHeight: 1.6,
            color: "var(--ink-on-ink-2)", margin: "30px 0 40px", maxWidth: 520 }}>
            {t("about.ctaSub")}
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Pill variant="primary" icon="arrow" onClick={() => { window.location.href = "course.html"; }}
              style={{ background: "var(--paper-on-ink)", color: "var(--ink)", boxShadow: "none" }}>{t("about.ctaProgram")}</Pill>
            <Pill variant="secondary" onClick={() => { window.location.href = "enroll.html"; }}
              style={{ color: "var(--paper-on-ink)", borderColor: "rgba(255,255,255,0.3)" }}>{t("common.enrollPay")}</Pill>
          </div>
        </div>
      </section>

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

Object.assign(window, { AboutPage });