// VeryPay — Navbar, Cursor, WhatsApp Float, Grain
function Navbar() {
  const [condensed, setCondensed] = useState(false);
  const [hidden, setHidden] = useState(false);
  const lastY = useRef(0);

  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setCondensed(y > 80);
      if (y > 400) {
        setHidden(y > lastY.current);
      } else {
        setHidden(false);
      }
      lastY.current = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className={`navbar ${condensed ? "condensed" : ""} ${hidden ? "hidden" : ""}`}>
      <a className="brand" href="#top">
        <img src="assets/icon-mark.png" alt="" className="brand-icon" />
        <Wordmark size={20} onDark={true} compact={true} />
      </a>
      <div className="links">
        <a href="#manifesto">Manifesto</a>
        <a href="#diagnostico">Diagnóstico</a>
        <a href="#metodo">Método</a>
        <a href="#sistema">Sistema</a>
        <a href="#faq">FAQ</a>
      </div>
      <a
        className="btn-outline"
        href={waLink()}
        target="_blank"
        rel="noopener"
      >
        <WhatsAppIcon size={14} /> WhatsApp
      </a>
    </nav>
  );
}

function Cursor() {
  const dotRef = useRef(null);
  const [hoverMode, setHoverMode] = useState("default");
  const pos = useRef({ x: -100, y: -100 });
  const target = useRef({ x: -100, y: -100 });

  useEffect(() => {
    const isTouch = matchMedia("(hover: none)").matches || window.innerWidth < 900;
    if (isTouch) return;

    let raf;
    const tick = () => {
      pos.current.x += (target.current.x - pos.current.x) * 0.25;
      pos.current.y += (target.current.y - pos.current.y) * 0.25;
      if (dotRef.current) {
        dotRef.current.style.transform = `translate(${pos.current.x}px, ${pos.current.y}px) translate(-50%, -50%)`;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    const onMove = (e) => {
      target.current = { x: e.clientX, y: e.clientY };
      const tgt = e.target;
      if (!tgt) return;
      if (tgt.closest("a, button, .diag-toggle, .network-node, .faq-item .head, input[type=range]")) {
        setHoverMode("link");
      } else if (tgt.closest("p, h1, h2, h3, h4, h5, span, li")) {
        const tag = tgt.tagName;
        if (["P","H1","H2","H3","H4","H5","SPAN","LI"].includes(tag)) {
          setHoverMode("text");
        } else setHoverMode("default");
      } else {
        setHoverMode("default");
      }
    };
    window.addEventListener("mousemove", onMove);
    return () => {
      window.removeEventListener("mousemove", onMove);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <div
      ref={dotRef}
      aria-hidden="true"
      className={`cursor ${hoverMode === "link" ? "hover-link" : hoverMode === "text" ? "hover-text" : ""}`}
    />
  );
}

function WhatsAppFloat() {
  const [visible, setVisible] = useState(false);
  const [tooltipShown, setTooltipShown] = useState(false);
  const [tooltipDismissed, setTooltipDismissed] = useState(() => {
    try { return sessionStorage.getItem("verypay.wa-tooltip") === "1"; } catch (e) { return false; }
  });
  const enteredRef = useRef(false);

  useEffect(() => {
    const onScroll = () => {
      const docH = document.documentElement.scrollHeight - window.innerHeight;
      setVisible(window.scrollY / docH > 0.08);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Tooltip lifecycle: 800ms after first visible, show for 4s, then auto-hide
  useEffect(() => {
    if (!visible || enteredRef.current || tooltipDismissed) return;
    enteredRef.current = true;
    const t1 = setTimeout(() => setTooltipShown(true), 800);
    const t2 = setTimeout(() => setTooltipShown(false), 800 + 4000);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [visible, tooltipDismissed]);

  const dismissTooltip = () => {
    setTooltipShown(false);
    setTooltipDismissed(true);
    try { sessionStorage.setItem("verypay.wa-tooltip", "1"); } catch (e) {}
  };

  return (
    <div className={"wa-float-wrap" + (visible ? " visible" : "")}>
      <div
        className={"wa-tooltip" + (tooltipShown ? " in" : "")}
        aria-hidden={!tooltipShown}
      >
        Fale com um especialista
      </div>
      <a
        className="wa-float"
        href={waLink()}
        target="_blank"
        rel="noopener"
        aria-label="Falar no WhatsApp"
        onMouseEnter={dismissTooltip}
        onFocus={dismissTooltip}
      >
        <WhatsAppIcon size={26} color="#fff" />
      </a>
    </div>
  );
}

function Grain() {
  return <div className="grain"></div>;
}

function WhatsAppIcon({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
    </svg>
  );
}

Object.assign(window, { Navbar, Cursor, WhatsAppFloat, Grain, WhatsAppIcon });