/* global React, Reveal, useParallax, Spark, Eyebrow, CTA, openLead, daysUntil, Ethno */
const { useState: useStateH, useEffect: useEffectH } = React;

const WA = "https://wa.me/77475427898";
const PREORDER_DEADLINE = "2026-08-31";

function PromoBar() {
  const days = daysUntil(PREORDER_DEADLINE);
  return React.createElement("div", { className: "lp-promobar", role: "button", tabIndex: 0,
      onClick: () => openLead(), onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openLead(); } } },
    React.createElement(Spark),
    React.createElement("span", null, "Предзаказ ", React.createElement("b", null, "−30%"),
      React.createElement("span", { className: "hide-sm" }, " · коллекции 2026")),
    React.createElement("span", { className: "sep" }, "•"),
    React.createElement("span", null, "до 31 августа"),
    days > 0 ? React.createElement("span", { className: "hide-sm" }, `· осталось ${days} дн.`) : null,
    React.createElement("span", { className: "lp-promobar-cta hide-sm" }, "Получить каталог →"),
    React.createElement("span", { className: "lp-promobar-cta only-sm", "aria-hidden": "true" }, "→"));
}

function Nav() {
  const [scrolled, setScrolled] = useStateH(false);
  const [open, setOpen] = useStateH(false);
  useEffectH(() => {
    const onS = () => setScrolled(window.scrollY > 40);
    onS(); window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  const links = [
    ["Боль", "#problema"],
    ["Почему Mereke", "#emotion"],
    ["Каталог", "#katalog"],
    ["Цифры", "#cifry"],
    ["Компаниям", "#vozmozhnosti"],
  ];
  return React.createElement(React.Fragment, null,
    React.createElement("nav", { className: `lp-nav ${scrolled ? "scrolled" : ""}` },
      React.createElement("div", { className: "lp-nav-row" },
        React.createElement("a", { href: "#top", "aria-label": "mereke", style: { display: "inline-flex", alignItems: "center" } },
          React.createElement("img", { src: "assets/logo-mereke.png", alt: "mereke", style: { height: scrolled ? 26 : 30, width: "auto", transition: "height .24s" } })),
        React.createElement("div", { className: "lp-nav-links" },
          links.map(([t, h]) => React.createElement("a", { key: h, href: h }, t))),
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
          React.createElement(CTA, { variant: "red", size: "sm", lead: true, href: "#zayavka" }, "Получить каталог"),
          React.createElement("button", { className: `lp-burger ${open ? "open" : ""}`, "aria-label": "Меню", onClick: () => setOpen(!open) },
            React.createElement("span"), React.createElement("span"), React.createElement("span")))
      )
    ),
    React.createElement("div", { className: `lp-sheet ${open ? "open" : ""}` },
      React.createElement("button", { className: "close", "aria-label": "Закрыть", onClick: () => setOpen(false) }, "×"),
      links.map(([t, h]) => React.createElement("a", { key: h, href: h, onClick: () => setOpen(false) }, t)),
      React.createElement("a", { href: "#zayavka", onClick: (e) => { e.preventDefault(); setOpen(false); openLead(); }, style: { color: "var(--amber-400)" } }, "Получить каталог →"))
  );
}

function Hero() {
  const bgRef = useParallax(0.16);
  const manifest = ["культура", "эмоции", "семейная традиция", "современный Казахстан", "дизайнерский объект", "подарок, которым гордятся"];
  // [leftPercent, delaySec, durationSec] — faint gold embers drifting up
  const embers = [[8, 0, 14], [19, 3.5, 17], [31, 6, 15.5], [44, 1.6, 19], [57, 4.4, 16], [69, 2.2, 18.5], [82, 5.5, 20], [92, 7.2, 15]];
  return React.createElement("header", { className: "lp-hero", id: "top" },
    React.createElement("div", { className: "lp-hero-bg", ref: bgRef },
      React.createElement("picture", { style: { display: "contents" } },
        React.createElement("source", { media: "(max-width: 640px)", srcSet: "assets/lifestyle/hero-mereke-mobile.jpg" }),
        React.createElement("img", { src: "assets/lifestyle/hero-mereke.jpg", alt: "Ёлочные игрушки Mereke — барыс, юрта и шар с флагом Казахстана на новогодней ёлке" }))),
    React.createElement("div", { className: "lp-hero-scrim" }),
    React.createElement("div", { className: "lp-hero-embers", "aria-hidden": "true" },
      embers.map((e, i) => React.createElement("span", { key: i, style: { left: e[0] + "%", animationDelay: e[1] + "s", animationDuration: e[2] + "s" } }))),
    React.createElement("div", { className: "lp-glow", style: { width: 380, height: 380, left: "-10%", bottom: "6%", background: "radial-gradient(circle, rgba(242,161,78,0.55), rgba(242,161,78,0))" } }),
    React.createElement("div", { className: "lp-hero-inner" },
      React.createElement("div", { className: "lp-rise", style: { "--i": 0, display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center" } },
        React.createElement(Eyebrow, { onRed: true }, "Корпоративные подарки · Mereke"),
        React.createElement("span", { className: "lp-promo-pill" }, React.createElement("b", null, "−30%"), "предзаказ до 31 августа")),
      React.createElement("h1", { className: "lp-h1 lp-h1-anim", style: { color: "#fff", maxWidth: "17ch", marginTop: 20 } },
        "Подарок, который станет ", React.createElement("span", { className: "lp-amber lp-accent" }, "семейной традицией")),
      React.createElement("p", { className: "lp-lead lp-rise", style: { "--i": 3, color: "rgba(255,238,225,0.92)", maxWidth: "44ch", marginTop: 20 } },
        "Ёлочные игрушки в национальном этно-стиле ручной работы. Не сувенир, который забудут через неделю, — а тёплое воспоминание, которое возвращается к вашим сотрудникам каждый Новый год."),
      React.createElement("div", { className: "lp-manifest lp-rise", style: { "--i": 4, marginTop: 24, maxWidth: 620 } },
        manifest.map((m) => React.createElement("span", { key: m }, m))),
      React.createElement("div", { className: "lp-btn-row lp-rise", style: { "--i": 5, marginTop: 30 } },
        React.createElement(CTA, { variant: "amber", lead: true, href: "#zayavka" }, "Получить каталог и расчёт", React.createElement(Spark, { style: { width: 15, height: 15 } })),
        React.createElement(CTA, { variant: "glass", href: "#katalog" }, "Смотреть каталог")),
      React.createElement("div", { className: "lp-hero-trust lp-rise", style: { "--i": 6, marginTop: 28 } },
        React.createElement("span", null, "Нам доверяют Freedom Bank · ForteBank · Halyk Bank"),
        React.createElement("span", { className: "dot" }),
        React.createElement("span", null, "35 000+ игрушек продано"))
    ),
    React.createElement("div", { className: "lp-scrollcue" }, React.createElement("span", { className: "bar" }))
  );
}

Object.assign(window, { PromoBar, Nav, Hero, WA });