/* global React */
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

/* ============================================================
   Mobile-only sticky bottom CTA + urgency ribbon + stats strip
   ============================================================ */

function MobileStickyCta({ wa }) {
  const [show, setShow] = useStateM(false);
  useEffectM(() => {
    const onScroll = () => {
      // Show after user scrolls past the hero
      setShow(window.scrollY > window.innerHeight * 0.75);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`sticky-bottom ${show ? "show" : ""}`} role="region" aria-label="Contato rápido">
      <div className="pricing">
        <span className="from">R$ 197</span>
        <span className="value">único <em>· prévia em 24h</em></span>
      </div>
      <a
        href={wa}
        className="cta"
        onClick={() => window.__trackWhatsApp?.("sticky-bottom")}
      >
        <span>Falar no WhatsApp</span>
        <span className="arrow" aria-hidden="true">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </span>
      </a>
    </div>
  );
}

function UrgencyRibbon() {
  const [show, setShow] = useStateM(false);
  useEffectM(() => {
    // Show after 4s so user has time to read hero
    const t = setTimeout(() => setShow(true), 4000);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className={`urgency ${show ? "show" : ""}`} role="status">
      <span className="pulse" />
      <span>3 vagas hoje · <em>1 restante</em> · Resp. em até 1h</span>
    </div>
  );
}

function MobileStats() {
  return (
    <div className="m-stats">
      <div>
        <div className="k">R$ <em>197</em></div>
        <span className="l">parcela única</span>
      </div>
      <div>
        <div className="k">24<em>h</em></div>
        <span className="l">prévia funcional</span>
      </div>
      <div>
        <div className="k">+50</div>
        <span className="l">empresas atendidas</span>
      </div>
      <div>
        <div className="k">0<em>%</em></div>
        <span className="l">mensalidade obrigatória</span>
      </div>
    </div>
  );
}

Object.assign(window, { MobileStickyCta, UrgencyRibbon, MobileStats });