/* global React */
const { useState, useEffect, useRef } = React;

// ===== Animation hooks ==================================================
// Returns [ref, inView] — fires once when element scrolls into view.
function useInView(opts = { threshold: 0.25, rootMargin: "0px 0px -40px 0px" }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current || inView) return;
    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          io.disconnect();
        }
      },
      opts
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [inView]);
  return [ref, inView];
}

// Eased count-up from 0 → end. `active` gates the animation.
function useCountUp(end, { active = true, duration = 1800, decimals = 0 } = {}) {
  const [value, setValue] = useState(0);
  useEffect(() => {
    if (!active) return;
    let raf, t0;
    const tick = (t) => {
      if (!t0) t0 = t;
      const p = Math.min((t - t0) / duration, 1);
      // easeOutQuart
      const eased = 1 - Math.pow(1 - p, 4);
      setValue(end * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [end, active, duration]);
  const factor = Math.pow(10, decimals);
  return Math.round(value * factor) / factor;
}

function formatThousands(n) {
  return n.toLocaleString("en-US");
}
window.useInView = useInView;
window.useCountUp = useCountUp;
window.formatThousands = formatThousands;

// ===== Halo background orbs ============================================
function Halo({ children, variant = "default" }) {
  return (
    <div className="halo-wrap" data-variant={variant}>
      <div className="halo halo-a" />
      <div className="halo halo-b" />
      <div className="halo-content">{children}</div>
    </div>
  );
}

// ===== Eyebrow ==========================================================
function Eyebrow({ children, color }) {
  return (
    <span className="eyebrow" style={color ? { color } : undefined}>
      {children}
    </span>
  );
}

// ===== Section header ===================================================
function SectionHeader({ eyebrow, title, subtitle, align = "left" }) {
  return (
    <header className={`section-header section-header--${align}`}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className="section-title">{title}</h2>
      {subtitle && <p className="section-sub">{subtitle}</p>}
    </header>
  );
}

// ===== Section wrapper ==================================================
function Section({ id, children, className = "" }) {
  return (
    <section id={id} className={`section ${className}`}>
      <div className="container">{children}</div>
    </section>
  );
}

// ===== Button ===========================================================
function Button({ variant = "primary", children, onClick, as = "button", href, icon }) {
  const cls = `btn btn--${variant}`;
  if (as === "a") {
    return (
      <a className={cls} href={href} onClick={onClick}>
        {children}
        {icon && <span className="btn-icon">{icon}</span>}
      </a>
    );
  }
  return (
    <button className={cls} onClick={onClick}>
      {children}
      {icon && <span className="btn-icon">{icon}</span>}
    </button>
  );
}

// ===== Glass card =======================================================
function GlassCard({ children, className = "", style }) {
  return (
    <div className={`glass-card ${className}`} style={style}>
      {children}
    </div>
  );
}

// ===== Lucide icon (auto re-renders) ===================================
function Icon({ name, size = 20, color }) {
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });
  const style = { width: size, height: size, color };
  return <i data-lucide={name} style={style} />;
}

window.Halo = Halo;
window.Eyebrow = Eyebrow;
window.SectionHeader = SectionHeader;
window.Section = Section;
window.Button = Button;
window.GlassCard = GlassCard;
window.Icon = Icon;