/* ============================================================
   Sections — Method, Program, Results, Contact
   Patterns lifted from the reference (aircenter.space):
   · split headings (phrase flush-left / phrase flush-right)
   · location-style stat cards (big number / unit / label)
   · big split CTA footer ("Choose … an office")
   ============================================================ */

/* Split heading — the AIR `group group--between` signature.
   words = array of strings; they distribute left↔right across the row. */
function SplitHead({ words, color = "var(--ink)" }) {
  return (
    <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>
  );
}

function SectionHead({ index, eyebrow, words, sub, color, 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>
      <SplitHead words={words} color={color} />
      {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 wrap = { maxWidth: 1200, margin: "0 auto", padding: "clamp(64px,9vw,120px) 28px" };

/* ---- ЗНАКОМСТВО (01) — brief acquaintance with Aleksey, links to the full story ---- */
function IntroFact({ value, label }) {
  return (
    <div style={{ paddingTop: 18, borderTop: "1px solid var(--hairline-2)" }}>
      <div style={{ fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: "clamp(24px,2.4vw,32px)",
        color: "var(--ink)", fontVariantNumeric: "tabular-nums", lineHeight: 1, letterSpacing: "0.01em" }}>{value}</div>
      <div style={{ marginTop: 12 }}><Label>{label}</Label></div>
    </div>
  );
}

function MethodSection() {
  const { t } = useT();
  const go = () => { window.location.href = "about.html"; };
  return (
    <section data-screen-label="Intro" style={{ background: "var(--surface)" }}>
      <div style={wrap}>
        <SectionHead index="01" eyebrow={t("home.m1.eyebrow")} words={[t("home.m1.title")]}
          sub={t("home.m1.sub")} />

        <div style={{ display: "grid", gridTemplateColumns: "minmax(280px,0.9fr) 1.1fr", gap: "clamp(28px,5vw,72px)",
          alignItems: "start", marginTop: 56 }} className="intro-grid">
          {/* portrait */}
          <div data-r="clip" style={{ position: "relative", aspectRatio: "4 / 5" }}>
            <Smoke style={{ width: "120%", height: "110%", left: "-10%", top: "-6%" }} />
            <ImagePlaceholder variant="a" src="assets/aleksey-portrait-bw.jpg" alt={t("brand")}
              objectPosition="center 20%" style={{ position: "absolute", inset: 0 }} />
          </div>

          {/* brief story + facts + CTA */}
          <div>
            <p style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(22px,2.4vw,30px)",
              lineHeight: 1.35, letterSpacing: "-0.005em", color: "var(--ink)", margin: 0 }}>
              {t("home.m1.lead")}
            </p>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.65, color: "var(--ink-2)",
              margin: "24px 0 0", maxWidth: 540 }}>
              {t("home.m1.body")}
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, margin: "40px 0 36px" }}>
              <IntroFact value={t("home.m1.fact1v")} label={t("home.m1.fact1l")} />
              <IntroFact value={t("home.m1.fact2v")} label={t("home.m1.fact2l")} />
              <IntroFact value={t("course.stats")[0].value} label={t("course.stats")[0].label} />
            </div>

            <Pill variant="primary" icon="arrow" onClick={go}>{t("home.m1.cta")}</Pill>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- ПРОГРАММА КУРСА (02) — brief outline, links to the full course + enrollment ---- */
function ProgramRow({ n, title, body, onClick }) {
  const [h, setH] = React.useState(false);
  return (
    <div onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "grid", gridTemplateColumns: "60px 1fr auto", alignItems: "center", gap: 24,
        padding: "26px 8px", borderBottom: "1px solid var(--hairline)", cursor: onClick ? "pointer" : "default",
        background: h ? "var(--surface)" : "transparent", transition: "background var(--dur) var(--ease)" }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink-3)" }}>{n}</span>
      <div>
        <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.005em", color: "var(--ink)", margin: "0 0 6px" }}>{title}</h3>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)", margin: 0, maxWidth: 620 }}>{body}</p>
      </div>
      <Icon name="arrow-up-right" style={{ width: 22, height: 22, strokeWidth: 1.5,
        color: "var(--ink)", opacity: h ? 1 : 0.35, transition: "opacity var(--dur) var(--ease)" }} />
    </div>
  );
}

function ProgramSection() {
  const { t } = useT();
  const go = () => { window.location.href = "course.html"; };
  const rows = t("home.m2.rows");
  return (
    <section data-screen-label="Program">
      <div style={wrap}>
        <SectionHead index="02" eyebrow={t("menu.program")} words={[t("home.m2.title1"), t("home.m2.title2")]}
          sub={t("home.m2.sub")} />
        <div style={{ marginTop: 30 }}>
          <ProgramRow onClick={go} n="01" title={rows[0].title} body={rows[0].body} />
          <ProgramRow onClick={go} n="02" title={rows[1].title} body={rows[1].body} />
          <ProgramRow onClick={go} n="03" title={rows[2].title} body={rows[2].body} />
          <ProgramRow onClick={go} n="04" title={rows[3].title} body={rows[3].body} />
        </div>
        <div style={{ marginTop: 44, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Pill variant="primary" icon="arrow" onClick={go}>{t("home.m2.ctaAll")}</Pill>
          <Pill variant="secondary" onClick={() => { window.location.href = "enroll.html"; }}>{t("common.enrollPay")}</Pill>
        </div>
      </div>
    </section>
  );
}

/* ---- RESULTS ---- (dark, location-style stat cards) */
function StatCard({ value, unit, label }) {
  return (
    <div style={{ position: "relative", aspectRatio: "1 / 1", border: "1px solid rgba(255,255,255,0.14)",
      padding: "22px 22px 20px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
      {/* top row: number + unit side by side; wraps instead of overlapping on wide numbers */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start",
        flexWrap: "wrap", gap: "6px 12px" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: "clamp(30px,3.4vw,48px)",
          color: "var(--paper-on-ink)", fontVariantNumeric: "tabular-nums", lineHeight: 0.95,
          whiteSpace: "nowrap" }}>{value}</div>
        {unit && <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, lineHeight: 1.15,
          color: "var(--ink-on-ink-2)", textAlign: "right", whiteSpace: "pre-line",
          marginLeft: "auto", paddingTop: 3 }}>{unit}</span>}
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(17px,1.6vw,22px)",
        color: "var(--paper-on-ink)", textAlign: "right", letterSpacing: "-0.01em", lineHeight: 1.05 }}>{label}</div>
    </div>
  );
}

function ResultsSection() {
  const { t } = useT();
  const labels = t("home.m3.labels");
  const units = t("home.m3.units");
  return (
    <section data-screen-label="Results" style={{ background: "var(--ink)" }}>
      <div style={wrap}>
        <SectionHead index="03" eyebrow={t("menu.results")} dark color="var(--paper-on-ink)"
          words={[t("home.m3.title1"), t("home.m3.title2")]}
          sub={t("home.m3.sub")} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14, marginTop: 48 }}>
          <StatCard value="2010" unit={units[0]} label={labels[0]} />
          <StatCard value="4 000+" unit={units[1]} label={labels[1]} />
          <StatCard value="1 : 3" unit={units[2]} label={labels[2]} />
          <StatCard value="1" unit={units[3]} label={labels[3]} />
        </div>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.6, color: "var(--ink-on-ink-2)", margin: "44px 0 0", maxWidth: 640 }}>
          {t("home.m3.disclaimer")}
        </p>
      </div>
    </section>
  );
}

/* ---- ЧАНГЕЛЫ / SOCIAL ---- (monochrome brand glyphs, one tile per platform) */

// Brand glyphs — filled marks in their original brand colours. 24×24 viewBox.
const BRAND_COLOR = {
  youtube: "#FF0000",
  telegram: "#229ED9",
  vk: "#0077FF",
  tiktok: "#010101",
};
function SocialGlyph({ name, size = 26 }) {
  const gid = "ig-grad-" + name;
  const paths = {
    youtube: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
    telegram: "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
    instagram: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z",
    vk: "M15.07 2H8.93C3.33 2 2 3.33 2 8.93v6.14C2 20.67 3.33 22 8.93 22h6.14c5.6 0 6.93-1.33 6.93-6.93V8.93C22 3.33 20.66 2 15.07 2zm3.15 14.27h-1.46c-.55 0-.72-.44-1.71-1.44-.86-.83-1.24-.94-1.45-.94-.3 0-.39.08-.39.49v1.32c0 .35-.11.56-1.04.56-1.54 0-3.24-.93-4.44-2.66C6.39 11.1 5.9 9.18 5.9 8.79c0-.21.08-.4.49-.4h1.46c.37 0 .51.17.65.56.72 2.07 1.92 3.88 2.42 3.88.19 0 .27-.08.27-.57V10.1c-.06-.98-.58-1.06-.58-1.41 0-.17.14-.34.37-.34h2.29c.31 0 .42.17.42.53v2.89c0 .31.14.42.23.42.19 0 .34-.11.68-.45 1.05-1.18 1.8-2.99 1.8-2.99.1-.21.27-.4.64-.4h1.46c.44 0 .53.23.44.53-.18.85-1.97 3.38-1.97 3.38-.15.25-.21.36 0 .64.15.21.65.64 1 1.04.63.72 1.11 1.32 1.24 1.74.14.43-.08.65-.51.65z",
    tiktok: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z",
  };
  const fill = name === "instagram" ? "url(#" + gid + ")" : (BRAND_COLOR[name] || "currentColor");
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} aria-hidden="true"
      style={{ display: "block" }}>
      {name === "instagram" && (
        <defs>
          <linearGradient id={gid} x1="0" y1="24" x2="24" y2="0" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor="#FEDA77" />
            <stop offset="0.28" stopColor="#F58529" />
            <stop offset="0.58" stopColor="#DD2A7B" />
            <stop offset="0.82" stopColor="#8134AF" />
            <stop offset="1" stopColor="#515BD4" />
          </linearGradient>
        </defs>
      )}
      <path d={paths[name]} />
    </svg>
  );
}

function ChannelTile({ glyph, name, purpose, handle, href }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href} target="_blank" rel="noopener noreferrer"
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: "relative", display: "flex", flexDirection: "column", gap: 18,
        padding: "26px 24px 24px", textDecoration: "none", border: "1px solid var(--hairline)",
        marginLeft: -1, marginTop: -1, background: h ? "var(--surface)" : "transparent",
        transition: "background var(--dur) var(--ease)" }}>
      <span style={{ color: "var(--ink)" }}><SocialGlyph name={glyph} /></span>
      <Icon name="arrow-up-right" style={{ position: "absolute", top: 22, right: 22, width: 18, height: 18,
        strokeWidth: 1.5, color: "var(--ink)", opacity: h ? 1 : 0.3, transition: "opacity var(--dur) var(--ease)" }} />
      <div style={{ marginTop: 4 }}>
        <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 19, letterSpacing: "-0.005em",
          color: "var(--ink)", margin: "0 0 6px" }}>{name}</h3>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-2)",
          margin: "0 0 14px", minHeight: 40 }}>{purpose}</p>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)",
          letterSpacing: "0.01em" }}>{handle}</span>
      </div>
    </a>
  );
}

const _CH = (typeof window !== "undefined" && window.CHANNELS) || {};
const channels = [
  { glyph: "youtube",   name: "YouTube",   purpose: "Разборы сделок и обучающие видео.", handle: "@ALEKSEY_LOBOV_STUDIO", href: _CH.youtube || "#" },
  { glyph: "telegram",  name: "Telegram",  purpose: "Аналитика рынка, анонсы и связь со мной.", handle: "@trading_architecture", href: _CH.telegramOpen || "#" },
  { glyph: "instagram", name: "Instagram", purpose: "Закулисье процесса и короткие разборы.", handle: "@alekseylobov", href: "#" },
  { glyph: "vk",        name: "VK",        purpose: "Сообщество и записи прошедших эфиров.", handle: "vk.com/alekseylobov", href: "#" },
  { glyph: "tiktok",    name: "TikTok",    purpose: "Короткие видео о дисциплине в трейдинге.", handle: "@lobov_trading_club", href: _CH.tiktok || "#" },
];

function ContactSection() {
  const { t } = useT();
  return (
    <section data-screen-label="Channels">
      <div style={{ ...wrap, paddingBottom: "clamp(40px,5vw,64px)" }}>
        <SectionHead index="06" eyebrow={t("menu.channels")} words={[t("home.m4.title1"), t("home.m4.title2")]}
          sub={t("home.m4.sub")} />

        <div className="socials-grid"
          style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", marginTop: 48,
            borderTop: "1px solid var(--hairline)", borderLeft: "1px solid var(--hairline)" }}>
          {channels.map((c) => <ChannelTile key={c.name} {...c} purpose={t("home.m4.purposes." + c.glyph)} />)}
        </div>
      </div>

      <div style={{ borderTop: "1px solid var(--hairline)", padding: "26px 28px",
        display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 18 }}>
        <img src="assets/logo-lockup-ink.png" alt={t("brand")} style={{ height: 48, width: "auto", display: "block" }} />
        <Label tone="faint">{t("common.rights")}</Label>
      </div>
    </section>
  );
}

Object.assign(window, { MethodSection, ProgramSection, ResultsSection, ContactSection, SectionHead, SplitHead });