/* Primitives — shared helpers and icons */

const t = (path) => {
  const parts = path.split(".");
  let cur = window.LOCALES[window.__locale || "en"] || window.LOCALES.en;
  for (const p of parts) {
    if (cur == null) return "";
    cur = cur[p];
  }
  return cur;
};

// Localized sign-in CTA URL
window.ctaUrl = () => {
  const loc = window.__locale || "en";
  if (loc === "zh-CN") return "https://app.ai-intervue.com/zhcn/sign-in";
  if (loc === "zh-TW") return "https://app.ai-intervue.com/zhtw/sign-in";
  return "https://app.ai-intervue.com";
};

const Logo = ({ dark = false, size = 30 }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
    <img src="assets/favicon.png" alt="" style={{
      width: size, height: size, borderRadius: "50%", display: "block",
    }} />
    <span style={{
      fontWeight: 600, letterSpacing: "-0.02em", fontSize: 18,
      color: dark ? "#fff" : "#0b1537",
      fontFamily: "var(--font-sans)",
    }}>
      Intervue
    </span>
  </span>
);

const ArrowRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden>
    <path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const Check = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden>
    <path d="M3 7.5L6 10.5L11 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const Cross = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden>
    <path d="M3.5 3.5L10.5 10.5M10.5 3.5L3.5 10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
  </svg>
);

const useReveal = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    document.documentElement.classList.add("reveal-ready");
    const nodes = el.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.08, rootMargin: "0px 0px -40px 0px" }
    );
    nodes.forEach((n) => {
      const r = n.getBoundingClientRect();
      if (r.top < window.innerHeight && r.bottom > 0) {
        requestAnimationFrame(() => n.classList.add("in"));
      } else {
        io.observe(n);
      }
    });
    const safety = setTimeout(() => { nodes.forEach((n) => n.classList.add("in")); }, 2000);
    return () => { io.disconnect(); clearTimeout(safety); };
  }, []);
  return ref;
};

Object.assign(window, { t, Logo, ArrowRight, Check, Cross, useReveal });