/* ============================================================
   Webinar page — "Бесплатный вебинар"
   A focused landing: a faux YouTube-channel SCREEN (browser
   window → channel header → featured webinar player) and a
   single primary CTA — «Записаться на курс».
   Monochrome brand + one accent: YouTube red.
   Reuses ui.jsx (Label, Pill, Smoke) and Subpage.jsx chrome.
   ============================================================ */

const WB_RED = "#FF0000";

/* red YouTube play-button mark */
function WbMark({ size = 20 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden style={{ display: "block", flexShrink: 0 }}>
      <path fill={WB_RED} d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8z" />
      <path fill="#fff" d="M9.6 15.6V8.4l6.4 3.6-6.4 3.6z" />
    </svg>
  );
}

/* round red play button overlaid on the player */
function WbPlay({ size = 96 }) {
  return (
    <span className="wb-play" style={{ width: size, height: size, borderRadius: 999, background: WB_RED,
      display: "grid", placeItems: "center", boxShadow: "0 16px 50px rgba(0,0,0,0.4)",
      transition: "transform var(--dur) var(--ease)" }}>
      <svg viewBox="0 0 24 24" width={size * 0.4} height={size * 0.4} aria-hidden>
        <path fill="#fff" d="M7 5.5v13l11-6.5L7 5.5z" />
      </svg>
    </span>
  );
}

/* small channel-grid thumbnail */
function MiniThumb({ variant, duration, title }) {
  const bgs = {
    a: "linear-gradient(135deg, #cfcfca, #f4f4f2 55%, #e2e2dd)",
    b: "radial-gradient(120% 90% at 70% 22%, #ffffff 0%, #e6e6e2 45%, #c9c9c4 100%)",
    c: "linear-gradient(220deg, #d6d6d1, #f2f2ef 60%, #dcdcd7)",
  };
  return (
    <div className="wb-mini">
      <div style={{ position: "relative", overflow: "hidden", borderRadius: 6, aspectRatio: "16 / 9",
        background: bgs[variant], filter: "grayscale(1)" }}>
        <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
          <span style={{ width: 38, height: 38, borderRadius: 999, background: WB_RED, display: "grid",
            placeItems: "center", boxShadow: "0 6px 18px rgba(0,0,0,0.28)" }}>
            <svg viewBox="0 0 24 24" width={15} height={15} aria-hidden><path fill="#fff" d="M7 5.5v13l11-6.5L7 5.5z" /></svg>
          </span>
        </div>
        <span style={{ position: "absolute", right: 8, bottom: 8, fontFamily: "var(--font-mono)", fontSize: 11,
          color: "#fff", background: "rgba(14,14,12,0.82)", padding: "2px 6px", borderRadius: 4 }}>{duration}</span>
      </div>
      <p style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, lineHeight: 1.3,
        color: "var(--ink)", margin: "10px 0 0" }}>{title}</p>
    </div>
  );
}

/* faux YouTube-channel screen inside a browser window */
function ChannelScreen() {
  const { t } = useT();
  const tabs = t("webinar.tabs");
  const mini = t("webinar.mini");
  return (
    <div className="wb-screen" style={{ position: "relative", borderRadius: 12, overflow: "hidden",
      background: "var(--paper)", border: "1px solid var(--hairline)", boxShadow: "0 40px 120px rgba(14,14,12,0.18)" }}>

      {/* browser chrome */}
      <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "12px 16px",
        background: "var(--surface)", borderBottom: "1px solid var(--hairline)" }}>
        <div style={{ display: "flex", gap: 7 }}>
          <span style={{ width: 11, height: 11, borderRadius: 999, background: "#D8D8D3" }} />
          <span style={{ width: 11, height: 11, borderRadius: 999, background: "#D8D8D3" }} />
          <span style={{ width: 11, height: 11, borderRadius: 999, background: "#D8D8D3" }} />
        </div>
        <div style={{ flex: 1, maxWidth: 420, display: "flex", alignItems: "center", gap: 9, padding: "6px 14px",
          background: "var(--paper)", border: "1px solid var(--hairline)", borderRadius: 999,
          fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--ink-3)" }}>
          <Icon name="lock" style={{ width: 13, height: 13, strokeWidth: 1.6 }} />
          youtube.com/@ALEKSEY_LOBOV_STUDIO
        </div>
        <WbMark size={20} />
      </div>

      {/* channel banner */}
      <div style={{ position: "relative", height: 132, overflow: "hidden",
        background: "linear-gradient(115deg, #1a1a18 0%, #2c2c28 45%, #4a4a44 100%)" }}>
        <Smoke style={{ width: 360, height: 260, right: "6%", top: "-40%", opacity: 0.5 }} />
        <div style={{ position: "absolute", left: 28, bottom: 18, display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 22, letterSpacing: "0.18em",
            color: "rgba(255,255,255,0.92)" }}>{t("brandUpper")}</span>
          <span style={{ width: 1, height: 18, background: "rgba(255,255,255,0.4)" }} />
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em",
            color: "rgba(255,255,255,0.7)" }}>{t("webinar.channelTagline")}</span>
        </div>
      </div>

      {/* channel header */}
      <div className="wb-chan-head" style={{ display: "flex", alignItems: "center", gap: 22,
        padding: "22px 28px 4px" }}>
        <img src="assets/aleksey-portrait-bw.jpg" alt={t("brand")} className="wb-avatar"
          style={{ width: 92, height: 92, borderRadius: 999, objectFit: "cover", objectPosition: "center top",
            flexShrink: 0, border: "1px solid var(--hairline)" }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 30, letterSpacing: "-0.01em",
            color: "var(--ink)", margin: 0 }}>{t("brand")}</h3>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6, flexWrap: "wrap",
            fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink-3)" }}>
            <span style={{ color: "var(--ink-2)" }}>@alekseylobov</span>
            <span style={{ width: 3, height: 3, borderRadius: 999, background: "var(--ink-4)" }} />
            <span>{t("webinar.subscribers")}</span>
            <span style={{ width: 3, height: 3, borderRadius: 999, background: "var(--ink-4)" }} />
            <span>{t("webinar.videosCount")}</span>
          </div>
        </div>
        <button className="wb-subscribe" style={{ flexShrink: 0, display: "inline-flex", alignItems: "center", gap: 8,
          height: 42, padding: "0 22px", borderRadius: 999, border: "none", cursor: "pointer",
          background: WB_RED, color: "#fff", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14,
          letterSpacing: "0.02em" }}>
          <WbMark size={16} /> {t("webinar.subscribe")}
        </button>
      </div>

      {/* channel tabs */}
      <div style={{ display: "flex", gap: 26, padding: "8px 28px 0", borderBottom: "1px solid var(--hairline)" }}>
        {tabs.map((tb, i) => {
          const on = i === 0;
          return (
          <span key={tb} style={{ position: "relative", padding: "12px 0", fontFamily: "var(--font-sans)",
            fontWeight: on ? 600 : 500, fontSize: 14, letterSpacing: "0.01em",
            color: on ? "var(--ink)" : "var(--ink-3)" }}>
            {tb}
            {on && <span style={{ position: "absolute", left: 0, right: 0, bottom: -1, height: 2, background: "var(--ink)" }} />}
          </span>
          );
        })}
      </div>

      {/* featured webinar player */}
      <div className="wb-feature" style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr",
        gap: 24, padding: "24px 28px" }}>
        <div>
          <div style={{ position: "relative", overflow: "hidden", borderRadius: 8, aspectRatio: "16 / 9",
            background: "radial-gradient(120% 100% at 64% 26%, #f1f1ee 0%, #d6d6d1 52%, #b8b8b2 100%)",
            filter: "grayscale(1)" }}>
            <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}><WbPlay size={92} /></div>
            <span style={{ position: "absolute", left: 16, top: 14, display: "inline-flex", alignItems: "center", gap: 7,
              padding: "4px 10px", borderRadius: 4, background: WB_RED, color: "#fff",
              fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase" }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "#fff" }} /> {t("webinar.featTag")}
            </span>
            <span style={{ position: "absolute", right: 12, bottom: 12, fontFamily: "var(--font-mono)", fontSize: 12,
              color: "#fff", background: "rgba(14,14,12,0.82)", padding: "3px 8px", borderRadius: 4 }}>1:32:40</span>
          </div>
          <h4 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 19, lineHeight: 1.3,
            letterSpacing: "-0.005em", color: "var(--ink)", margin: "16px 0 6px" }}>
            {t("webinar.featTitle")}
          </h4>
          <p style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--ink-3)", margin: 0 }}>
            {t("webinar.featMeta")}
          </p>
        </div>
        <div className="wb-feature-side" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <MiniThumb variant="a" duration="18:42" title={mini[0]} />
          <MiniThumb variant="b" duration="22:15" title={mini[1]} />
          <MiniThumb variant="c" duration="14:07" title={mini[2]} />
        </div>
      </div>
    </div>
  );
}

function WebinarPage() {
  const { t } = useT();
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const wrap = { maxWidth: 1180, margin: "0 auto", padding: "0 28px" };

  return (
    <React.Fragment>
      <SubHeader />

      <section data-screen-label="Webinar" style={{ position: "relative", overflow: "hidden",
        background: "var(--paper)", paddingTop: "clamp(112px,15vh,168px)", paddingBottom: "clamp(56px,8vw,96px)" }}>
        <Smoke style={{ width: "56vw", height: "60vh", right: "-14%", top: "2%" }} />

        <div style={{ ...wrap, position: "relative" }}>
          {/* eyebrow + breadcrumb */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
            gap: 16, flexWrap: "wrap", marginBottom: 28 }}>
            <SubCrumb here={t("webinar.crumb")} />
            <span style={{ display: "inline-flex", alignItems: "center", gap: 9 }}>
              <WbMark size={17} />
              <Label tone="ink">{t("webinar.liveTag")}</Label>
            </span>
          </div>

          {/* headline block */}
          <div className="wb-head" style={{ maxWidth: 880 }}>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 200, fontSize: "clamp(44px,7vw,104px)",
              lineHeight: 0.98, letterSpacing: "-0.02em", color: "var(--ink)", margin: 0 }}>
              {t("webinar.title1")}<br />{t("webinar.title2")}
            </h1>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(16px,1.8vw,21px)", lineHeight: 1.55,
              color: "var(--ink-2)", margin: "28px 0 0", maxWidth: 560 }}>
              {t("webinar.sub")}
            </p>
          </div>

          {/* the channel screen */}
          <div style={{ marginTop: "clamp(40px,5vw,64px)" }}>
            <ChannelScreen />
          </div>

          {/* CTA band */}
          <div className="wb-cta" style={{ marginTop: "clamp(40px,5vw,64px)", display: "flex",
            alignItems: "center", justifyContent: "space-between", gap: 28, flexWrap: "wrap",
            paddingTop: 36, borderTop: "1px solid var(--hairline)" }}>
            <div style={{ maxWidth: 520 }}>
              <div style={{ marginBottom: 14 }}><Label>{t("webinar.ctaLabel")}</Label></div>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(26px,3.4vw,42px)",
                lineHeight: 1.06, letterSpacing: "-0.012em", color: "var(--ink)", margin: 0 }}>
                {t("webinar.ctaTitle")}
              </h2>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Pill variant="secondary" icon="arrow" onClick={() => window.open((window.CHANNELS && window.CHANNELS.youtube) || "#", "_blank", "noopener")}>{t("webinar.watchYoutube")}</Pill>
              <Pill variant="primary" icon="plus" onClick={() => { window.location.href = "course.html#enroll"; }}>{t("common.enroll")}</Pill>
            </div>
          </div>
        </div>
      </section>

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

Object.assign(window, { WebinarPage });