/* ============================================================
   Course page — "Авторский курс по трейдингу от Алексея Лобова"
   Full program (doc2) + enrollment & payment form (#enroll).
   ============================================================ */

const MODULES = [
  { n: "01", title: "Базовая подготовка", items: [
    "Знакомство с рынком и торговым терминалом",
    "Что такое котировки и как формируется цена",
    "Правильная настройка торговой платформы",
    "Работа со Stop Loss и Take Profit",
  ]},
  { n: "02", title: "Чтение рынка", items: [
    "Определение экстремумов и их значение",
    "Построение сильных ценовых уровней",
    "Трендовые линии и каналы",
    "Причины отскоков и пробоев уровней",
    "Формирование импульсов и логика движения",
  ]},
  { n: "03", title: "Работа со свечным графиком", items: [
    "Как на самом деле работают свечи",
    "Чтение поведения участников рынка",
    "Практический подход без бесполезных паттернов",
  ]},
  { n: "04", title: "Индикаторы и инструменты анализа", items: [
    "Коррекционные и расширенные уровни Фибоначчи",
    "Кластеры Фибоначчи и поиск сильных зон",
    "Полосы Боллинджера",
    "Скользящие средние",
    "Осцилляторы и защита от ложных сигналов",
  ]},
  { n: "05", title: "Продвинутый анализ", items: [
    "Фигуры технического анализа",
    "Smart Money и Price Action: ордер-блоки, дисбалансы",
    "Сломы структуры и работа с ликвидностью",
    "Сильные и слабые стороны современных подходов",
  ]},
  { n: "06", title: "Понимание рыночной среды", items: [
    "Торговые сессии",
    "Ликвидность и активность валютных пар",
    "Экономический календарь",
    "Причины ложных пробоев и рыночных ловушек",
  ]},
  { n: "07", title: "Практика и сопровождение", items: [
    "Каждый инструмент — на реальных рыночных примерах",
    "Практические встречи с учеником для закрепления",
  ]},
];

const DIFF = [
  "Более 15 лет практического опыта на финансовых рынках",
  "Материал основан на реальной торговле, а не на теории из книг",
  "Простая и понятная подача даже для новичков",
  "Авторские наработки, которых нет в открытом доступе",
  "Универсальная стратегия: валюты, криптовалюты, акции и другие инструменты",
  "Особое внимание работе от старших таймфреймов к младшим",
];

const FOR_WHOM = [
  "Новичкам, которые хотят системное понимание рынка",
  "Трейдерам, уставшим от хаотичных сигналов и противоречий",
  "Скальперам и внутридневным трейдерам",
  "Тем, кто хочет анализировать рынок и решать самостоятельно",
];

function ModuleCard({ n, title, items }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ background: "var(--paper)", border: "1px solid var(--hairline)", borderRadius: 8,
        padding: "26px 26px 28px", transition: "border-color var(--dur) var(--ease)",
        borderColor: h ? "var(--hairline-2)" : "var(--hairline)" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 18 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink-3)" }}>{n}</span>
        <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 20, letterSpacing: "-0.005em",
          color: "var(--ink)", margin: 0 }}>{title}</h3>
      </div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 11 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 12, alignItems: "start" }}>
            <span style={{ marginTop: 7 }}><Plus size={9} weight={1.4} color="var(--ink-3)" /></span>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.5, color: "var(--ink-2)" }}>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function CheckItem({ children, dark }) {
  return (
    <li style={{ display: "grid", gridTemplateColumns: "22px 1fr", gap: 14, alignItems: "start",
      padding: "16px 0", borderBottom: `1px solid ${dark ? "rgba(255,255,255,0.12)" : "var(--hairline)"}` }}>
      <Icon name="check" style={{ width: 17, height: 17, strokeWidth: 2, marginTop: 3,
        color: dark ? "var(--paper-on-ink)" : "var(--ink)" }} />
      <span style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.55,
        color: dark ? "var(--ink-on-ink-2)" : "var(--ink-2)" }}>{children}</span>
    </li>
  );
}

/* заголовок блока программы курса: тег + название + кнопка записи */
function ProgramHead({ index, tag, name, cta, onEnroll }) {
  return (
    <div style={{ paddingBottom: 36, borderBottom: "1px solid var(--hairline)",
      display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
      <div>
        <div style={{ marginBottom: 20 }}><Label>{index} — {tag}</Label></div>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(30px,4.4vw,56px)",
          lineHeight: 1.05, letterSpacing: "-0.01em", color: "var(--ink)", margin: 0, maxWidth: 16 + "ch" }}>
          {name}
        </h2>
      </div>
      {cta && <Pill variant="primary" icon="plus" onClick={onEnroll}>{cta}</Pill>}
    </div>
  );
}

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

  /* два курса — данные берём из тарифов (SalesSections.jsx) */
  const tiers = t("sales.pricing.tiers");
  const T = window.SALES_TARIFFS || [];
  const baseCopy = tiers[0] || {}, proCopy = tiers[1] || {};
  const baseId = (T[0] && T[0].id) || "flagship", proId = (T[1] && T[1].id) || "pro";
  const goEnroll = (id) => { window.location.href = "enroll.html?tariff=" + id; };

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

      {/* ---- title ---- */}
      <section data-screen-label="Course — title" style={{ paddingTop: 132, background: "var(--surface)" }}>
        <div style={{ ...wrap, paddingBottom: "clamp(48px,7vw,80px)" }}>
          <div style={{ marginBottom: 30 }}><SubCrumb here={t("course.crumb")} /></div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(38px,6vw,80px)",
            lineHeight: 1.02, letterSpacing: "-0.015em", color: "var(--ink)", margin: 0, maxWidth: 18 + "ch" }}>
            {t("course.title")}
          </h1>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(17px,1.9vw,21px)", lineHeight: 1.5,
            color: "var(--ink)", margin: "26px 0 0", maxWidth: 560 }}>
            {t("course.subLead")}
          </p>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(15px,1.6vw,17px)", lineHeight: 1.65,
            color: "var(--ink-2)", margin: "20px 0 0", maxWidth: 600 }}>
            {t("course.subBody")}
          </p>

          <div style={{ display: "flex", gap: "clamp(28px,5vw,64px)", flexWrap: "wrap", margin: "44px 0 36px" }}>
            {stats.map((s) => (
              <div key={s.label}>
                <div style={{ fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: "clamp(26px,3vw,40px)",
                  color: "var(--ink)", fontVariantNumeric: "tabular-nums", lineHeight: 1 }}>{s.value}</div>
                <div style={{ marginTop: 12 }}><Label>{s.label}</Label></div>
              </div>
            ))}
          </div>

          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Pill variant="primary" icon="down" onClick={() => {
              document.getElementById("enroll").scrollIntoView ?
                window.scrollTo({ top: document.getElementById("enroll").offsetTop - 40, behavior: "smooth" }) : null;
            }}>{t("common.enrollPay")}</Pill>
            <Pill variant="secondary" onClick={() => { window.location.href = "about.html"; }}>{t("common.aboutAuthor")}</Pill>
          </div>
        </div>
      </section>

      {/* ---- выбор курса: две карточки-тарифа ---- */}
      <div id="choose" style={{ scrollMarginTop: 80 }}><PricingSection index="01" /></div>

      {/* ---- программа · базовый курс ---- */}
      <section data-screen-label="Course — base program" style={{ background: "var(--paper)" }}>
        <div style={{ ...wrap, padding: "clamp(56px,8vw,100px) 28px" }}>
          <ProgramHead index="02" tag={baseCopy.tag} name={baseCopy.name || t("course.learnTitle")}
            cta={baseCopy.cta} onEnroll={() => goEnroll(baseId)} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 44 }} className="module-grid">
            {modules.map((m, i) => <ModuleCard key={i} n={String(i + 1).padStart(2, "0")} title={m.title} items={m.items} />)}
          </div>
        </div>
      </section>

      {/* ---- программа · курс PRO (детальные модули пришлёт автор) ---- */}
      <section data-screen-label="Course — pro program" style={{ background: "var(--surface)" }}>
        <div style={{ ...wrap, padding: "clamp(56px,8vw,100px) 28px" }}>
          <ProgramHead index="03" tag={proCopy.tag} name={proCopy.name}
            cta={proCopy.cta} onEnroll={() => goEnroll(proId)} />
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(16px,1.8vw,19px)", lineHeight: 1.5,
            color: "var(--ink)", margin: "44px 0 24px", fontWeight: 500 }}>
            {t("course.proIntro")}
          </p>
          <ul style={{ listStyle: "none", margin: 0, padding: 0, maxWidth: 720 }}>
            {(proCopy.feats || []).slice(1).map((f, i) => <CheckItem key={i}>{f}</CheckItem>)}
          </ul>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.6, color: "var(--ink-3)",
            margin: "28px 0 0", maxWidth: 640 }}>
            {t("course.proSoon")}
          </p>
        </div>
      </section>

      {/* ---- why this course (dark) ---- */}
      <section style={{ background: "var(--ink)" }}>
        <div style={{ ...wrap, padding: "clamp(56px,8vw,100px) 28px",
          display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: "clamp(28px,5vw,72px)", alignItems: "start" }}
          className="diff-grid">
          <div>
            <div style={{ marginBottom: 20 }}><Label tone="faint">{t("course.diffLabel")}</Label></div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 200, fontSize: "clamp(30px,4.2vw,52px)",
              lineHeight: 1.06, letterSpacing: "-0.01em", color: "var(--paper-on-ink)", margin: 0 }}>
              {t("course.diffTitle")}
            </h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.65, color: "var(--ink-on-ink-2)",
              margin: "26px 0 0", maxWidth: 360 }}>
              {t("course.diffSub")}
            </p>
          </div>
          <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
            {diff.map((d, i) => <CheckItem key={i} dark>{d}</CheckItem>)}
          </ul>
        </div>
      </section>

      {/* ---- for whom ---- */}
      <section style={{ background: "var(--surface)" }}>
        <div style={{ ...wrap, padding: "clamp(56px,8vw,100px) 28px" }}>
          <div style={{ marginBottom: 20 }}><Label>{t("course.whomLabel")}</Label></div>
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "clamp(28px,5vw,64px)",
            alignItems: "start" }} className="whom-grid">
            <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
              {whom.map((d, i) => <CheckItem key={i}>{d}</CheckItem>)}
            </ul>
            <div style={{ background: "var(--paper)", border: "1px solid var(--hairline)", borderRadius: 8,
              padding: "30px 28px" }}>
              <div style={{ marginBottom: 16 }}><Label>{t("course.goalLabel")}</Label></div>
              <p style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(20px,2.2vw,26px)",
                lineHeight: 1.35, letterSpacing: "-0.005em", color: "var(--ink)", margin: 0 }}>
                {t("course.goalText")}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ---- FAQ (общий с главной, SalesSections.jsx) ---- */}
      <FaqSection index="04" />

      {/* ---- ENROLL + PAYMENT ---- */}
      <section id="enroll" data-screen-label="Course — enroll" style={{ background: "var(--paper)",
        scrollMarginTop: 80 }}>
        <div style={{ ...wrap, padding: "clamp(56px,8vw,100px) 28px" }}>
          <div style={{ paddingBottom: 36, borderBottom: "1px solid var(--hairline)", marginBottom: 48 }}>
            <div style={{ marginBottom: 20 }}><Label>05 — {t("course.enrollTitle")}</Label></div>
            <h2 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")}
            </h2>
            <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, { CoursePage });