/* global React, Spark, CTA, openLead, CartNavButton, useLang, waLink, LangSwitch */
const { useState: useStateH, useEffect: useEffectH } = React;

const WA = "https://wa.me/77006116869";
const TEL = "+77470942340";
const TEL_HUMAN = "+7 (747) 094-23-40";
// promo 27.10: пока только первый экран — остальные блоки скрыты, не удалены (просил владелец). false — весь сайт;
// Қаз/Рус переведены только первый экран и окно заявки (i18n.jsx) — остальные блоки перед этим надо перевести.
const ONE_SCREEN = 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(CartNavButton),
          React.createElement("span", { className: "lp-nav-cta" },
            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)" } }, "Получить каталог →"))
  );
}

// Новый год по Алматы (UTC+5, единый пояс Казахстана с 2024 г.).
const ALMATY_OFFSET_MS = 5 * 3600 * 1000;

function useNewYearCountdown() {
  const [now, setNow] = useStateH(Date.now());
  useEffectH(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []);
  const local = new Date(now + ALMATY_OFFSET_MS);
  // первые две недели января вместо отсчёта на следующий год — поздравление
  if (local.getUTCMonth() === 0 && local.getUTCDate() <= 14) return null;
  const left = Math.max(0, Date.UTC(local.getUTCFullYear() + 1, 0, 1) - ALMATY_OFFSET_MS - now);
  const s = Math.floor(left / 1000);
  return { d: Math.floor(s / 86400), h: Math.floor(s / 3600) % 24, m: Math.floor(s / 60) % 60, s: s % 60 };
}

function Hero() {
  const { t } = useLang();
  const c = useNewYearCountdown();
  const units = c && t.units(c);
  // [left %, top %, size px, delay s] — звёзды над деревней, как на референсе
  const stars = [[9, 6, 12, 0], [21, 0, 9, 1.1], [47, 4, 8, 2], [63, 1, 11, 0.6], [79, 9, 13, 1.6], [91, 3, 8, 2.4]];
  return React.createElement("header", { className: `pr-hero${ONE_SCREEN ? " solo" : ""}`, id: "top" },
    React.createElement("div", { className: "pr-hero-inner" },
      React.createElement(LangSwitch, { className: "lp-rise", style: { "--i": 0 } }),
      React.createElement("img", { className: "pr-logo lp-rise", style: { "--i": 0 }, src: "assets/promo/mereke_logo.svg", alt: "mereke", width: 340, height: 89 }),
      units
        ? React.createElement(React.Fragment, null,
            React.createElement("div", { className: "pr-count-cap lp-rise", style: { "--i": 1 } }, t.countCap),
            React.createElement("div", { className: "pr-count lp-rise", style: { "--i": 2 }, role: "timer", "aria-label": t.countCap },
              units.map(([n, l], i) => React.createElement("div", { key: i, className: "u" },
                React.createElement("span", { className: "n" }, String(n).padStart(2, "0")),
                React.createElement("span", { className: "l" }, l)))))
        : React.createElement("div", { className: "pr-greet lp-rise", style: { "--i": 1 } }, t.greet),
      React.createElement("div", { className: "pr-scene lp-rise", style: { "--i": 3 } },
        stars.map(([x, y, sz, dl], i) => React.createElement(Spark, { key: i, style: { left: x + "%", top: y + "%", width: sz, height: sz, animationDelay: dl + "s" } })),
        React.createElement("img", { src: "assets/promo/mereke_toys.webp", width: 1320, height: 750, alt: t.sceneAlt })),
      React.createElement("h1", { className: "pr-h1 lp-rise", style: { "--i": 4 } }, t.h1),
      React.createElement("p", { className: "pr-lead lp-rise", style: { "--i": 5 } }, t.lead),
      React.createElement("div", { className: "pr-btns lp-rise", style: { "--i": 6 } },
        React.createElement(CTA, { variant: "amber", lead: true, href: "#zayavka" }, t.ctaCatalog),
        ONE_SCREEN
          // каталог скрыт — вторая кнопка ведёт в WhatsApp
          ? React.createElement("a", { className: "lp-btn lp-btn-amber", href: waLink(t), target: "_blank", rel: "noopener" }, t.ctaWa)
          : React.createElement(CTA, { variant: "amber", href: "#katalog" }, "Смотреть игрушки")),
      React.createElement("div", { className: "pr-trust lp-rise", style: { "--i": 7 } },
        React.createElement("span", null, t.trustBanks),
        React.createElement("span", { className: "dot" }),
        React.createElement("span", null, t.trustSold))
    )
  );
}

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