/* Shared UI helpers */
const { useState, useEffect, useRef, useCallback } = React;

function Logo({ className = "" }) {
  return (
    <a href="#top" className={"brand-logo-wrap " + className} aria-label="Trilok Infratech — Future of Bharat" style={{ display: "inline-flex", lineHeight: 0 }}>
      <img className="brand-logo brand-logo--dark" src="assets/trilok-logo.png" alt="Trilok Infratech" />
      <img className="brand-logo brand-logo--light" src="assets/trilok-logo-light.png" alt="Trilok Infratech" />
    </a>
  );
}

/* Animated count-up that fires when scrolled into view */
function CountUp({ end, suffix = "", dur = 1500 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  const done = useRef(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !done.current) {
          done.current = true;
          const start = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - start) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(Math.round(eased * end));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [end, dur]);
  return (
    <span ref={ref} className="stat__num">
      {val}{suffix && <span className="stat__suffix">{suffix}</span>}
    </span>
  );
}

/* Reusable arrow glyph */
function Arrow() { return <span className="arr" aria-hidden="true">→</span>; }

/* Init lucide icons + reveal observer after render */
function useEnhance(deps = []) {
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
    const els = document.querySelectorAll(".reveal:not(.in)");
    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 -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, deps); // eslint-disable-line
}

Object.assign(window, { Logo, CountUp, Arrow, useEnhance });