// Marketing site — shared helpers (scroll reveal, count-up, marquee, icons, logo).
const { useState, useEffect, useRef } = React;
const EASE = "cubic-bezier(.16,1,.3,1)";
const reduceMo = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;

function Icon({ name, size = 18, style = {} }) {
  return <i data-lucide={name} style={{ width: size, height: size, display: "inline-flex", ...style }} />;
}

/** Reveal: staggered fade + rise. Fires on mount via a short timer so it is
   reliable in every environment (offscreen capture iframes throttle IO/scroll).
   Real-browser feel: sections fade up in sequence as the page settles. */
function Reveal({ children, delay = 0, y = 26, style = {}, as = "div" }) {
  const [inv, setInv] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setInv(true), reduceMo() ? 0 : delay + 60);
    return () => clearTimeout(t);
  }, []);
  const El = as;
  return (
    <El style={{
      opacity: inv ? 1 : 0,
      transform: inv ? "none" : `translateY(${y}px)`,
      transition: `opacity .8s ${EASE}, transform .8s ${EASE}`,
      willChange: "opacity, transform", ...style,
    }}>{children}</El>
  );
}

/** Kinetic headline: each line masked, slides up in sequence on mount. */
function Kinetic({ lines, style = {}, lineStyle = {}, baseDelay = 120, step = 90 }) {
  const [go, setGo] = useState(false);
  useEffect(() => { const t = setTimeout(() => setGo(true), 60); return () => clearTimeout(t); }, []);
  const reduce = reduceMo();
  return (
    <h1 style={{ margin: 0, ...style }}>
      {lines.map((ln, i) => (
        <span key={i} style={{ display: "block", overflow: "hidden", paddingBottom: "0.04em" }}>
          <span style={{
            display: "block", whiteSpace: "nowrap",
            transform: reduce || go ? "translateY(0)" : "translateY(108%)",
            transition: `transform .9s ${EASE} ${baseDelay + i * step}ms`,
            ...lineStyle,
          }}>{ln}</span>
        </span>
      ))}
    </h1>
  );
}

/** Count up to value when scrolled into view. */
function Stat({ value, suffix = "", label, accent = false }) {
  const ref = useRef(null);
  const [n, setN] = useState(0);
  useEffect(() => {
    if (reduceMo()) { setN(value); return; }
    let raf, start;
    const t = setTimeout(() => {
      const tick = (ts) => {
        if (start == null) start = ts;
        const p = Math.min(1, (ts - start) / 1100);
        setN(value * (1 - Math.pow(1 - p, 3)));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    }, 280);
    return () => { clearTimeout(t); cancelAnimationFrame(raf); };
  }, [value]);
  return (
    <div ref={ref} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(40px,6vw,72px)", fontWeight: 800, lineHeight: 1, letterSpacing: "-0.03em", color: accent ? "var(--green)" : "var(--text-primary)", fontVariantNumeric: "tabular-nums" }}>
        {Math.round(n).toLocaleString()}{suffix}
      </span>
      <span style={{ fontSize: 14, color: "var(--text-muted)", fontWeight: 500 }}>{label}</span>
    </div>
  );
}

/** Infinite horizontal marquee band. */
function Marquee({ items, sep = "✺", reverse = false, style = {}, fontSize = "clamp(22px,3.5vw,51px)" }) {
  const run = items.concat(items);
  return (
    <div style={{ overflow: "hidden", display: "flex", whiteSpace: "nowrap", ...style }}>
      <div style={{ display: "inline-flex", gap: 0, animation: `mq${reverse ? "R" : "L"} 26s linear infinite`, willChange: "transform" }}>
        {run.map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", fontFamily: "var(--font-display)", fontSize, fontWeight: 800, letterSpacing: "-0.02em" }}>
            <span>{it}</span>
            <span style={{ margin: "0 0.5em", color: "var(--green)", fontWeight: 400 }}>{sep}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function Logo({ size = 19, light = false }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "var(--font-sans)" }}>
      <span style={{ width: 28, height: 28, borderRadius: 7, flex: "none", background: "var(--gold-soft)", border: "1px solid rgba(241,200,75,0.65)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14, color: "#171717" }}>G</span>
      <span style={{ fontSize: size, fontWeight: 800, letterSpacing: "-0.01em", color: light ? "#fff" : "var(--text-primary)" }}>THE GANGSA</span>
    </span>
  );
}

Object.assign(window, { Icon, Reveal, Kinetic, Stat, Marquee, Logo });
