/* Shared atoms: Button, Countdown, Stars, useCountdown / useReveal hooks */
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon;

  const Btn = ({ variant = "primary", size, block, href, onClick, children, type }) => {
    const cls = ["btn", `btn--${variant}`, size === "lg" && "btn--lg", block && "btn--block"]
      .filter(Boolean).join(" ");
    const chev = (variant === "primary" || variant === "gold")
      ? React.createElement("span", { className: "chev" }, React.createElement(Icon, { name: "chevR" }))
      : null;
    if (href) return React.createElement("a", { className: cls, href, onClick }, children, chev);
    return React.createElement("button", { className: cls, onClick, type: type || "button" }, children, chev);
  };

  /* live countdown to an ISO datetime ----------------------------------- */
  function useCountdown(target) {
    const compute = () => {
      const diff = new Date(target).getTime() - Date.now();
      const clamp = Math.max(0, diff);
      return {
        done: diff <= 0,
        days: Math.floor(clamp / 86400000),
        hours: Math.floor((clamp % 86400000) / 3600000),
        mins: Math.floor((clamp % 3600000) / 60000),
        secs: Math.floor((clamp % 60000) / 1000),
      };
    };
    const [t, setT] = useState(compute);
    useEffect(() => {
      setT(compute());
      const id = setInterval(() => setT(compute()), 1000);
      return () => clearInterval(id);
    }, [target]);
    return t;
  }

  const Countdown = ({ target, variant }) => {
    const t = useCountdown(target);
    const units = [
      { v: t.days, l: "Days" }, { v: t.hours, l: "Hrs" },
      { v: t.mins, l: "Mins" }, { v: t.secs, l: "Secs" },
    ];
    return React.createElement("div", { className: "countdown" },
      units.map((u, i) => React.createElement("div", { className: "cd" + (variant === "jewel" ? " cd--jewel" : ""), key: i },
        React.createElement("b", null, String(u.v).padStart(2, "0")),
        React.createElement("span", null, u.l),
      )),
    );
  };

  const Stars = ({ n = 5, className }) =>
    React.createElement("span", { className: className || "revcard__stars", "aria-label": n + " stars" },
      "\u2605\u2605\u2605\u2605\u2605".slice(0, n));

  /* reveal-on-scroll: attaches an observer to .reveal nodes once mounted */
  function useReveal() {
    useEffect(() => {
      const els = document.querySelectorAll(".reveal");
      if (!("IntersectionObserver" in window)) { els.forEach(e => e.classList.add("in")); return; }
      const io = new IntersectionObserver((entries) => {
        entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
      }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
      els.forEach(e => io.observe(e));
      return () => io.disconnect();
    });
  }

  /* format an ISO date as e.g. "Saturday 11 July 2026" */
  function fmtDate(iso) {
    try {
      return new Date(iso).toLocaleDateString("en-GB", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
    } catch (e) { return iso; }
  }
  function fmtTime(iso) {
    try {
      return new Date(iso).toLocaleTimeString("en-GB", { hour: "numeric", minute: "2-digit" });
    } catch (e) { return ""; }
  }

  Object.assign(window, { Btn, Countdown, Stars, useCountdown, useReveal, fmtDate, fmtTime });
})();