/* ============================================================
   SalesSections — Курсы · Отзывы · FAQ · Бонусная полоса
   Два курса: «Системная торговля» (101 000 ₽) и
   «Системная торговля PRO» (198 000 ₽). Без личного общения;
   общие бонусы — доступ 2 месяца, ежедневный разбор рынка,
   закрытый Telegram-канал на 1 месяц.
   Монохром, hairline-сетки, mono-цифры — язык системы сохранён.
   Цены правятся в одном месте: SALES_TARIFFS ниже.
   ============================================================ */

/* Два курса. Цены правятся только здесь. */
const SALES_TARIFFS = [
  { id: "flagship", price: 101000, featured: true },
  { id: "pro",      price: 198000, featured: false },
];
const TG_CALL_URL = "https://t.me/trading_architecture";
const fmtRub = (n) => n.toLocaleString("ru-RU") + " ₽";

/* локальная копия секционного заголовка (Sections.jsx не грузится на подстраницах) */
function SHead({ index, eyebrow, words, sub, color = "var(--ink)", dark }) {
  return (
    <div style={{ paddingBottom: 40, borderBottom: `1px solid ${dark ? "rgba(255,255,255,0.14)" : "var(--hairline)"}` }}>
      <div style={{ marginBottom: 22 }}><Label tone={dark ? "faint" : "muted"}>{index} — {eyebrow}</Label></div>
      <h2 style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "0 24px",
        fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(34px,6vw,76px)",
        letterSpacing: "-0.01em", lineHeight: 1.0, color, margin: 0 }}>
        {words.map((w, i) => <span key={i} style={{ display: "block" }}>{w}</span>)}
      </h2>
      {sub && <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.6,
        color: dark ? "var(--ink-on-ink-2)" : "var(--ink-2)", maxWidth: 440, margin: "26px 0 0" }}>{sub}</p>}
    </div>
  );
}

const salesWrap = { maxWidth: 1200, margin: "0 auto", padding: "clamp(64px,9vw,120px) 28px" };

/* ============================================================
   ТАРИФЫ — три уровня погружения, флагман выделен тёмной картой
   ============================================================ */
function TierCard({ tier, copy, badge }) {
  const [h, setH] = React.useState(false);
  const dark = tier.featured;
  const ink = dark ? "var(--paper-on-ink)" : "var(--ink)";
  const sub = dark ? "var(--ink-on-ink-2)" : "var(--ink-2)";
  const line = dark ? "rgba(255,255,255,0.14)" : "var(--hairline)";
  const go = () => { window.location.href = "enroll.html?tariff=" + tier.id; };

  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: "relative", display: "flex", flexDirection: "column",
        background: dark ? "var(--ink)" : "var(--paper)",
        border: `1px solid ${dark ? "var(--ink)" : h ? "var(--hairline-2)" : "var(--hairline)"}`,
        borderRadius: 10, padding: "clamp(26px,2.6vw,36px)",
        boxShadow: dark ? "0 24px 70px rgba(14,14,12,0.18)" : h ? "var(--shadow-md)" : "none",
        transform: h && !dark ? "translateY(-3px)" : "none",
        transition: "transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)" }}>

      {/* бейдж */}
      {badge && (
        <span style={{ position: "absolute", top: -13, right: 24, height: 26, padding: "0 14px",
          display: "inline-flex", alignItems: "center", borderRadius: 999,
          background: dark ? "var(--paper-on-ink)" : "var(--surface-2)",
          color: dark ? "var(--ink)" : "var(--ink-2)",
          fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 10, letterSpacing: "0.14em",
          textTransform: "uppercase", whiteSpace: "nowrap" }}>{badge}</span>
      )}

      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
        <Label tone={dark ? "faint" : "muted"}>{copy.tag}</Label>
      </div>
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(24px,2.4vw,32px)",
        letterSpacing: "-0.01em", lineHeight: 1.1, color: ink, margin: "14px 0 10px" }}>{copy.name}</h3>
      <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.55, color: sub, margin: 0,
        minHeight: 44 }}>{copy.desc}</p>

      {/* цена */}
      <div style={{ display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap",
        padding: "22px 0", margin: "20px 0 4px", borderTop: `1px solid ${line}`, borderBottom: `1px solid ${line}` }}>
        {tier.from && <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: sub }}>{copy.from}</span>}
        <span style={{ fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: "clamp(28px,2.8vw,38px)",
          color: ink, fontVariantNumeric: "tabular-nums", lineHeight: 1, letterSpacing: "0.01em" }}>
          {fmtRub(tier.price)}
        </span>
      </div>

      <ul style={{ listStyle: "none", margin: "18px 0 28px", padding: 0, display: "flex",
        flexDirection: "column", gap: 12, flex: 1 }}>
        {copy.feats.map((f, i) => (
          <li key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 12, alignItems: "start" }}>
            <Icon name="check" style={{ width: 15, height: 15, strokeWidth: 2, marginTop: 3,
              color: dark ? "var(--paper-on-ink)" : "var(--ink)" }} />
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.5, color: sub }}>{f}</span>
          </li>
        ))}
      </ul>

      <button onClick={go} style={{ height: 50, borderRadius: 999, cursor: "pointer", width: "100%",
        border: `1px solid ${dark ? "var(--paper-on-ink)" : "var(--ink)"}`,
        background: dark ? "var(--paper-on-ink)" : h ? "var(--ink)" : "transparent",
        color: dark ? "var(--ink)" : h ? "var(--paper-on-ink)" : "var(--ink)",
        fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11, letterSpacing: "0.16em",
        textTransform: "uppercase", display: "inline-flex", alignItems: "center", justifyContent: "center",
        gap: 10, transition: "background var(--dur) var(--ease), color var(--dur) var(--ease)" }}>
        {copy.cta}
        <Icon name="arrow-up-right" style={{ width: 14, height: 14 }} />
      </button>
    </div>
  );
}

function PricingSection({ index = "05" }) {
  const { t } = useT();
  const tiers = t("sales.pricing.tiers");
  return (
    <section data-screen-label="Pricing" style={{ background: "var(--surface)" }}>
      <div style={salesWrap}>
        <SHead index={index} eyebrow={t("sales.pricing.eyebrow")}
          words={[t("sales.pricing.title1"), t("sales.pricing.title2")]} sub={t("sales.pricing.sub")} />
        <div className="pricing-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)",
          gap: 18, alignItems: "stretch", marginTop: 56, maxWidth: 900, marginLeft: "auto", marginRight: "auto" }}>
          {SALES_TARIFFS.map((tier, i) => (
            <TierCard key={tier.id} tier={tier}
              copy={{ ...tiers[i], from: t("sales.pricing.from") }}
              badge={tier.featured ? t("sales.pricing.featuredBadge") : t("sales.pricing.maxBadge")} />
          ))}
        </div>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.6, color: "var(--ink-3)",
          margin: "36px 0 0", maxWidth: 640 }}>
          {t("sales.pricing.note")}{" "}
          <a href={TG_CALL_URL} target="_blank" rel="noopener noreferrer"
            style={{ color: "var(--ink)", textDecorationThickness: 1, textUnderlineOffset: 3 }}>
            {t("sales.pricing.noteLink")}
          </a>
        </p>
      </div>
    </section>
  );
}

/* ============================================================
   ОТЗЫВЫ ПЕРВОГО ПОТОКА
   NB: цитаты — черновые заготовки. Перед публикацией заменить
   на настоящие отзывы учеников (см. план продюсера, раздел 1).
   ============================================================ */
function ReviewCard({ n, quote, name, meta }) {
  return (
    <figure style={{ margin: 0, display: "flex", flexDirection: "column", gap: 26,
      background: "var(--paper)", border: "1px solid var(--hairline)", borderRadius: 10,
      padding: "clamp(26px,2.6vw,36px)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span aria-hidden style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 64,
          lineHeight: 0.6, color: "var(--ink-4)", transform: "translateY(0.22em)" }}>«</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-4)",
          fontVariantNumeric: "tabular-nums" }}>{n}</span>
      </div>
      <blockquote style={{ margin: 0, flex: 1, fontFamily: "var(--font-display)", fontWeight: 300,
        fontSize: "clamp(18px,1.8vw,22px)", lineHeight: 1.45, letterSpacing: "-0.005em", color: "var(--ink)" }}>
        {quote}
      </blockquote>
      <figcaption style={{ paddingTop: 20, borderTop: "1px solid var(--hairline)" }}>
        <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 15, color: "var(--ink)" }}>{name}</div>
        <div style={{ marginTop: 6, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.02em",
          color: "var(--ink-3)" }}>{meta}</div>
      </figcaption>
    </figure>
  );
}

function TestimonialsSection({ index = "04" }) {
  const { t } = useT();
  const items = t("sales.reviews.items");
  return (
    <section data-screen-label="Reviews" style={{ background: "var(--paper)" }}>
      <div style={salesWrap}>
        <SHead index={index} eyebrow={t("sales.reviews.eyebrow")}
          words={[t("sales.reviews.title1"), t("sales.reviews.title2")]} sub={t("sales.reviews.sub")} />
        <div className="reviews-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)",
          gap: 18, marginTop: 56, alignItems: "stretch" }}>
          {items.map((r, i) => (
            <ReviewCard key={i} n={String(i + 1).padStart(2, "0")} quote={r.quote} name={r.name} meta={r.meta} />
          ))}
        </div>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, lineHeight: 1.6, color: "var(--ink-3)",
          margin: "32px 0 0", maxWidth: 640 }}>{t("sales.reviews.disclaimer")}</p>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ — аккордеон на hairline-линиях
   ============================================================ */
function FaqRow({ q, a, openDefault }) {
  const [open, setOpen] = React.useState(!!openDefault);
  return (
    <div style={{ borderBottom: "1px solid var(--hairline)" }}>
      <button onClick={() => setOpen((o) => !o)} aria-expanded={open}
        style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 24, padding: "24px 4px", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
        <span style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: "clamp(16px,1.6vw,19px)",
          letterSpacing: "-0.005em", lineHeight: 1.35, color: "var(--ink)" }}>{q}</span>
        <span style={{ flexShrink: 0, width: 34, height: 34, borderRadius: 999,
          border: "1px solid var(--hairline-2)", display: "grid", placeItems: "center",
          transform: open ? "rotate(135deg)" : "none", transition: "transform var(--dur) var(--ease)" }}>
          <Plus size={12} weight={1.4} color="var(--ink)" />
        </span>
      </button>
      <div style={{ display: "grid", gridTemplateRows: open ? "1fr" : "0fr",
        transition: "grid-template-rows var(--dur-slow) var(--ease-out)" }}>
        <div style={{ overflow: "hidden" }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.65, color: "var(--ink-2)",
            margin: 0, padding: "0 44px 26px 4px", maxWidth: 720 }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

function FaqSection({ index = "06" }) {
  const { t } = useT();
  const items = t("sales.faq.items");
  return (
    <section data-screen-label="FAQ" style={{ background: "var(--paper)" }}>
      <div style={{ ...salesWrap, display: "grid", gridTemplateColumns: "0.85fr 1.15fr",
        gap: "clamp(28px,5vw,72px)", alignItems: "start" }} className="faq-grid">
        <div>
          <div style={{ marginBottom: 22 }}><Label>{index} — {t("sales.faq.eyebrow")}</Label></div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(32px,4.6vw,60px)",
            letterSpacing: "-0.01em", lineHeight: 1.02, color: "var(--ink)", margin: 0 }}>
            {t("sales.faq.title1")}<br />{t("sales.faq.title2")}
          </h2>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)",
            margin: "24px 0 0", maxWidth: 340 }}>{t("sales.faq.sub")}</p>
        </div>
        <div style={{ borderTop: "1px solid var(--hairline)" }}>
          {items.map((f, i) => <FaqRow key={i} q={f.q} a={f.a} openDefault={i === 0} />)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ДИАГНОСТИЧЕСКИЙ СОЗВОН — тёмная финальная полоса
   (воронка высокого чека: эфир → заявка → созвон → продажа)
   ============================================================ */
function CallBand() {
  const { t } = useT();
  return (
    <section data-screen-label="Call" style={{ background: "var(--ink)" }}>
      <div style={{ ...salesWrap, paddingTop: "clamp(56px,8vw,104px)", paddingBottom: "clamp(56px,8vw,104px)",
        display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "28px 48px",
        flexWrap: "wrap" }}>
        <div style={{ maxWidth: 640 }}>
          <div style={{ marginBottom: 22 }}><Label tone="faint">{t("sales.call.label")}</Label></div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 200, fontSize: "clamp(34px,5.4vw,72px)",
            letterSpacing: "-0.015em", lineHeight: 1.02, color: "var(--paper-on-ink)", margin: 0 }}>
            {t("sales.call.title1")}<br />{t("sales.call.title2")}
          </h2>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.65,
            color: "var(--ink-on-ink-2)", margin: "26px 0 0", maxWidth: 480 }}>{t("sales.call.sub")}</p>
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Pill variant="secondary" onClick={() => { window.location.href = "course.html"; }}
            style={{ color: "var(--paper-on-ink)", borderColor: "rgba(250,250,248,0.32)" }}>
            {t("sales.call.cta2")}
          </Pill>
          <Pill variant="primary" icon="arrow"
            onClick={() => { window.open(TG_CALL_URL, "_blank", "noopener"); }}
            style={{ background: "var(--paper-on-ink)", color: "var(--ink)", boxShadow: "none" }}>
            {t("sales.call.cta")}
          </Pill>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SALES_TARIFFS, TG_CALL_URL, PricingSection, TestimonialsSection, FaqSection, CallBand });