// Shared primitives used across sections
const { useEffect: _useEffect, useRef: _useRef, useState: _useState, useCallback: _useCallback } = React;

// Reveal on scroll
function useReveal() {
  _useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((e) => e.classList.add("is-visible"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-visible");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// Animated number counter
function CountUp({ to, duration = 1400, suffix = "", className = "" }) {
  const [val, setVal] = _useState(0);
  const ref = _useRef(null);
  const started = _useRef(false);

  _useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !started.current) {
            started.current = true;
            const start = performance.now();
            const tick = (now) => {
              const t = Math.min(1, (now - start) / duration);
              const eased = 1 - Math.pow(1 - t, 3);
              setVal(Math.round(to * eased));
              if (t < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
          }
        });
      },
      { threshold: 0.4 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [to, duration]);

  // Format with K/L/M shorthand handled by parent — here just commas
  const formatted = val.toLocaleString("en-IN");
  return (
    <span ref={ref} className={"num-tabular " + className}>
      {formatted}
      {suffix}
    </span>
  );
}

// Section heading
function SectionEyebrow({ children }) {
  return (
    <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full glass text-[11px] tracking-[0.18em] uppercase text-teal font-semibold">
      <span className="w-1.5 h-1.5 rounded-full bg-teal glow-dot" />
      {children}
    </div>
  );
}

// Placeholder image (striped)
function Placeholder({ label, ratio = "16/9", className = "", icon }) {
  return (
    <div
      className={"relative w-full overflow-hidden rounded-xl placeholder-stripe " + className}
      style={{ aspectRatio: ratio }}
    >
      <div className="absolute inset-0 flex items-center justify-center text-mute/70 text-[11px] font-mono tracking-wider uppercase">
        {icon && <span className="mr-2 opacity-60">{icon}</span>}
        {label}
      </div>
    </div>
  );
}

// CTA button
function CTA({ children, large = false, className = "", onClick, href = "#tickets" }) {
  const sizing = large ? "px-8 py-5 text-lg" : "px-6 py-3.5 text-base";
  return (
    <a
      href={href}
      onClick={onClick}
      className={"btn-primary inline-flex items-center gap-2 rounded-xl whitespace-nowrap " + sizing + " " + className}
    >
      {children}
      <Icon.ArrowRight size={large ? 22 : 18} strokeWidth={2.25} />
    </a>
  );
}

window.useReveal = useReveal;
window.CountUp = CountUp;
window.SectionEyebrow = SectionEyebrow;
window.Placeholder = Placeholder;
window.CTA = CTA;