// VeryPay — Primitives
const { useEffect, useRef, useState, useMemo, useCallback } = React;

function Wordmark({ size = 28, onDark = false, compact = false }) {
  // Auto-compact for small sizes (<22px) — drops the dot for legibility
  const hideDot = compact || size < 22;
  return (
    <span className={"wordmark" + (onDark ? " on-dark" : "") + (hideDot ? " compact" : "")} style={{ fontSize: size }}>
      <span>Very</span>
      {hideDot ? null : (
        <span className="dot" style={{ width: size * 0.16, height: size * 0.16 }}></span>
      )}
      <span className="pay">Pay</span>
    </span>
  );
}

function MagentaBar({ small = false, animated = true, delay = 0, pulse = false }) {
  const ref = useRef(null);
  const inView = useInView(ref);
  return (
    <span
      ref={ref}
      className={"magenta-bar" + (small ? " sm" : "") + (pulse ? " pulse" : "")}
      style={{
        transform: animated ? (inView ? "scaleX(1)" : "scaleX(0)") : "scaleX(1)",
        transition: `transform 0.9s cubic-bezier(.7,.1,.2,1) ${delay}s`
      }}
    ></span>
  );
}

function Slash() {
  return <span className="slash">/</span>;
}

function SectionMeta({ label, dark = false }) {
  return (
    <div className={"section-meta" + (dark ? " dark" : "")}>
      <div className="left">
        <MagentaBar />
        <span>{label}</span>
      </div>
    </div>
  );
}

// Hook: detect when element enters viewport (once)
function useInView(ref, { threshold = 0.18, once = true } = {}) {
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          if (once) io.disconnect();
        } else if (!once) {
          setInView(false);
        }
      },
      { threshold }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref, threshold, once]);
  return inView;
}

// Hook: scroll position
function useScrollY() {
  const [y, setY] = useState(0);
  useEffect(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setY(window.scrollY);
        raf = null;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return y;
}

// Hero word-splitting reveal
function WordReveal({ text, className = "", delay = 0, perWord = 0.07 }) {
  const ref = useRef(null);
  const inView = useInView(ref, { threshold: 0.3 });
  const words = text.split(" ");
  return (
    <span ref={ref} className={className}>
      {words.map((w, i) => (
        <React.Fragment key={i}>
          <span className={"hero-word" + (inView ? " in" : "")}>
            <span style={{ transitionDelay: `${delay + i * perWord}s` }}>{w}</span>
          </span>
          {i < words.length - 1 ? " " : ""}
        </React.Fragment>
      ))}
    </span>
  );
}

function Reveal({ children, delay = 0, className = "" }) {
  const ref = useRef(null);
  const inView = useInView(ref);
  return (
    <div
      ref={ref}
      className={`reveal ${className} ${inView ? "in" : ""}`}
      style={{ transitionDelay: `${delay}s` }}
    >
      {children}
    </div>
  );
}

// WhatsApp link helper
const WA_BASE = "https://wa.me/5531991793506";
function waLink(text = "Oi, quero entender como a VeryPay pode otimizar meu recebimento") {
  return `${WA_BASE}?text=${encodeURIComponent(text)}`;
}

// Format currency BR
function fmtBRL(value) {
  return value.toLocaleString("pt-BR", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
}

Object.assign(window, {
  Wordmark, MagentaBar, Slash, SectionMeta,
  useInView, useScrollY, WordReveal, Reveal,
  waLink, WA_BASE, fmtBRL
});