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

// ====== Tracking helper (Meta Pixel + GA4 + Google Ads stubs) ======
window.track = function(event, params = {}) {
  // TODO-TRACKING: wire fbq, gtag, dataLayer
  if (window.fbq) window.fbq("trackCustom", event, params);
  if (window.gtag) window.gtag("event", event, params);
  console.log("[track]", event, params);
};

// ====== CTA — single visual, repeated ======
function CTA({ children, size = "md", full = false, position = "unknown", href }) {
  const cfg = window.IPGS_CHECKOUT || {};
  const target = href || cfg.url || cfg.fallbackWhatsApp || "#checkout";
  const newTab = !!cfg.url && cfg.newTab;
  const onClick = (e) => {
    window.track("cta_click", { cta_position: position, has_checkout: !!cfg.url });
  };
  return (
    <a
      href={target}
      onClick={onClick}
      target={newTab ? "_blank" : undefined}
      rel={newTab ? "noopener noreferrer" : undefined}
      data-cta={position}
      className={`cta ${size === "lg" ? "cta--lg" : ""} ${full ? "cta--full" : ""}`}
    >
      <span>{children}</span>
      <span className="arrow">→</span>
    </a>
  );
}

// ====== Sticky top bar (after 400px) ======
function StickyTop() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 400);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`sticky-top ${show ? "is-visible" : ""}`} aria-hidden={!show}>
      <style>{`
        .sticky-top {
          position: fixed; top: 0; left: 0; right: 0; z-index: 60;
          background: rgba(241,241,241,.92);
          backdrop-filter: saturate(140%) blur(12px);
          border-bottom: 1px solid rgba(6,41,71,.08);
          transform: translateY(-100%);
          transition: transform .3s cubic-bezier(.2,.7,.2,1);
        }
        .sticky-top.is-visible { transform: translateY(0); }
        .sticky-top-row {
          display: flex; align-items: center; justify-content: space-between;
          padding: 10px 0;
          gap: 16px;
        }
        .sticky-logo {
          display: inline-flex; align-items: center; gap: 12px;
          color: var(--ipgs-deep);
          font-family: var(--font-display);
          font-style: italic;
          font-size: 17px;
        }
        .sticky-logo .mark {
          width: 24px; height: 24px;
          border-radius: 50%;
          background: var(--ipgs-deep);
          color: var(--ipgs-gold);
          display: grid; place-items: center;
          font-size: 12px;
        }
        .sticky-seal {
          display: none;
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--deep-700);
          padding: 4px 10px;
          border: 1px solid rgba(6,41,71,.16);
          border-radius: 999px;
          align-items: center;
          gap: 6px;
        }
        .sticky-seal .dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--mint-700);
          box-shadow: 0 0 8px var(--mint-700);
        }
        .sticky-cta {
          padding: 10px 18px;
          font-size: 13px;
          letter-spacing: -0.005em;
        }
        @media (min-width: 720px) {
          .sticky-seal { display: inline-flex; }
          .sticky-cta { padding: 12px 22px; font-size: 14px; }
        }
      `}</style>
      <div className="container-x">
        <div className="sticky-top-row">
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span className="sticky-logo"><span className="mark">i</span>IPGS</span>
            <span className="sticky-seal"><span className="dot"></span>Psicólogos com CRP ativo</span>
          </div>
          <CTA size="md" position="sticky_top">Iniciar — R$ 300</CTA>
        </div>
      </div>
    </div>
  );
}

// ====== Floating WhatsApp ======
function WhatsAppFAB() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
      setShow(pct > 0.15);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a
      href="https://wa.me/5500000000000?text=Olá,%20tenho%20dúvida%20sobre%20o%20mapeamento"
      target="_blank"
      rel="noopener"
      className={`wa-fab ${show ? "is-visible" : ""}`}
      aria-label="Falar com a equipe pelo WhatsApp"
      onClick={() => window.track("whatsapp_click", { position: "fab" })}
    >
      <style>{`
        .wa-fab {
          position: fixed;
          right: 16px; bottom: 16px;
          width: 56px; height: 56px;
          border-radius: 50%;
          background: var(--ipgs-mint);
          color: var(--ipgs-deep);
          display: grid; place-items: center;
          z-index: 55;
          box-shadow: 0 12px 28px -8px rgba(6,41,71,.35), 0 0 0 6px rgba(171,249,198,.30);
          transform: scale(0);
          transition: transform .3s cubic-bezier(.2,.7,.2,1);
        }
        .wa-fab.is-visible { transform: scale(1); }
        .wa-fab:hover { transform: scale(1.06); }
        .wa-tip {
          position: absolute;
          right: 70px; top: 50%;
          transform: translateY(-50%);
          background: var(--ipgs-deep);
          color: var(--ipgs-paper);
          padding: 8px 14px;
          border-radius: 999px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.08em;
          white-space: nowrap;
          opacity: 0;
          pointer-events: none;
          transition: opacity .25s;
        }
        .wa-fab:hover .wa-tip { opacity: 1; }
        @media (min-width: 900px) {
          .wa-fab { right: 24px; bottom: 24px; }
        }
      `}</style>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.93.5 3.78 1.46 5.42L2 22l4.81-1.55a9.9 9.9 0 0 0 5.23 1.45h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.84 9.84 0 0 0 12.04 2zm0 18.16h-.01a8.2 8.2 0 0 1-4.18-1.14l-.3-.18-3.1 1 1.02-3.02-.2-.31a8.2 8.2 0 0 1-1.27-4.4c0-4.54 3.7-8.24 8.24-8.24 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.24 8.24zm4.52-6.16c-.25-.13-1.47-.72-1.7-.81-.23-.08-.39-.13-.56.13-.16.25-.64.81-.79.97-.15.17-.29.18-.54.06-.25-.13-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.14-.25-.02-.39.11-.51.11-.11.25-.29.38-.43.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.13-.56-1.36-.77-1.85-.2-.49-.41-.42-.56-.43h-.48c-.16 0-.43.06-.66.31-.23.25-.86.84-.86 2.05 0 1.21.88 2.38 1 2.55.13.17 1.74 2.66 4.21 3.73.59.25 1.05.41 1.41.52.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.68-1.18.21-.59.21-1.09.15-1.19-.06-.11-.23-.17-.48-.3z" />
      </svg>
      <span className="wa-tip">Dúvida? Fale com a equipe</span>
    </a>
  );
}

window.CTA = CTA;
window.StickyTop = StickyTop;
window.WhatsAppFAB = WhatsAppFAB;