// LongtailIQ marketing, premium interaction FX (original, on-brand)
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon } = DS;

// Track pointer for spotlight: sets --mx/--my on the element
function useSpotlight() {
  return React.useCallback((e) => {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty('--mx', (e.clientX - r.left) + 'px');
    e.currentTarget.style.setProperty('--my', (e.clientY - r.top) + 'px');
  }, []);
}

// (Magnetic cursor-follow buttons removed 2026-07-04: the drift on hover read
// as jank, not craft. CTAs now sit still; hover affordance comes from the
// Button's own hover style + fx-sheen.)

// 3D tilt card with a cursor-following glare highlight
function Tilt({ children, max = 7, glare = true, style = {}, className = '' }) {
  const ref = React.useRef(null);
  const glareRef = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `perspective(900px) rotateX(${(-py * max).toFixed(2)}deg) rotateY(${(px * max).toFixed(2)}deg)`;
    el.style.setProperty('--mx', (e.clientX - r.left) + 'px');
    el.style.setProperty('--my', (e.clientY - r.top) + 'px');
    if (glareRef.current) {
      glareRef.current.style.opacity = '1';
      glareRef.current.style.background = `radial-gradient(280px circle at ${e.clientX - r.left}px ${e.clientY - r.top}px, rgba(255,255,255,0.18), transparent 60%)`;
    }
  };
  const onLeave = () => {
    if (ref.current) ref.current.style.transform = 'perspective(900px) rotateX(0) rotateY(0)';
    if (glareRef.current) glareRef.current.style.opacity = '0';
  };
  return (
    <div ref={ref} className={className} onMouseMove={onMove} onMouseLeave={onLeave}
      style={{ position: 'relative', transition: 'transform 0.45s var(--ease-out)', transformStyle: 'preserve-3d', ...style }}>
      {children}
      {glare && <div ref={glareRef} style={{ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', opacity: 0, transition: 'opacity 0.3s var(--ease-out)', zIndex: 5 }} />}
    </div>
  );
}

// Word-by-word reveal headline (uses lt-reveal so the page observer +
// its safety fallback guarantee visibility even when animation is throttled)
function RevealWords({ text, gray = '', style = {} }) {
  const words = text.split(' ');
  const grayWords = gray ? gray.split(' ') : [];
  return (
    <h1 style={style}>
      {words.map((w, k) => (
        <span key={k} className="lt-reveal" style={{ display: 'inline-block', marginRight: '0.28em' }}>{w}</span>
      ))}
      {grayWords.length > 0 && <br/>}
      {grayWords.map((w, k) => (
        <span key={'g'+k} className="lt-reveal" style={{ display: 'inline-block', marginRight: '0.28em', color: 'var(--ink-400)' }}>{w}</span>
      ))}
    </h1>
  );
}

// Marquee row of platform chips
function PlatformMarquee() {
  const items = ["Google","AI Overviews","ChatGPT","Perplexity","Reddit","YouTube","TikTok","Amazon","Shopify","Gemini","Bing Copilot","Local Pack"];
  const Chip = ({ t }) => (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8, height: 38, padding: "0 16px", flex: "none",
      border: "1px solid var(--border-subtle)", borderRadius: 999, background: "var(--paper)", fontSize: 13, fontWeight: 500, color: "var(--text-body)" }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--ink-300)" }} />{t}
    </span>
  );
  return (
    <div style={{ borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", background: "var(--ink-50)", padding: "22px 0" }}>
      <div style={{ textAlign: "center", fontSize: 12, color: "var(--text-faint)", marginBottom: 16, letterSpacing: "0.02em" }}>{window.LTQM.t("marquee.caption")}</div>
      <div className="fx-marquee">
        <div className="fx-marquee-track">
          {[...items, ...items].map((t, i) => <Chip key={i} t={t} />)}
        </div>
      </div>
    </div>
  );
}

// (Meteors removed 2026-07-04: falling-streak effect was too flashy for the
// brand. Dark surfaces use BLG-style ambience instead: faint grid + a slow
// panning soft glow — see the CTA block in CTAFooter.jsx.)

// Typewriter, cycles through phrases with natural, slightly varied timing
function Typewriter({ phrases, speed = 72, pause = 1500, style = {} }) {
  const [i, setI] = React.useState(0);
  const [sub, setSub] = React.useState(0);
  const [del, setDel] = React.useState(false);
  React.useEffect(() => {
    const cur = phrases[i];
    if (!del && sub === cur.length) { const t = setTimeout(() => setDel(true), pause); return () => clearTimeout(t); }
    if (del && sub === 0) { setDel(false); setI((i + 1) % phrases.length); return; }
    // jitter typing speed; pause a beat on spaces for a human cadence
    const justTyped = cur[sub - 1];
    const base = del ? speed * 0.45 : speed;
    const jitter = del ? 0 : (Math.random() * 50 - 18);
    const spacePause = (!del && justTyped === ' ') ? 90 : 0;
    const t = setTimeout(() => setSub(s => s + (del ? -1 : 1)), Math.max(24, base + jitter) + spacePause);
    return () => clearTimeout(t);
  }, [sub, del, i, phrases, speed, pause]);
  return (
    <span style={style}>{phrases[i].slice(0, sub)}<span className="fx-caret" /></span>
  );
}

// Scroll progress bar
function ScrollProgress() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      const el = ref.current; if (!el) return;
      const h = document.documentElement;
      const p = h.scrollTop / (h.scrollHeight - h.clientHeight || 1);
      el.style.width = Math.max(0, Math.min(1, p)) * 100 + "%";
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <div ref={ref} className="fx-scrollbar" />;
}

// Ripple click helper, attach to onMouseDown of a positioned element
function useRipple() {
  return React.useCallback((e) => {
    const host = e.currentTarget;
    const r = host.getBoundingClientRect();
    const span = document.createElement("span");
    const size = Math.max(r.width, r.height) * 2.2;
    span.className = "fx-ripple-ink";
    span.style.width = span.style.height = size + "px";
    span.style.left = (e.clientX - r.left) + "px";
    span.style.top = (e.clientY - r.top) + "px";
    host.appendChild(span);
    setTimeout(() => span.remove(), 650);
  }, []);
}

window.LTQM = window.LTQM || {};
Object.assign(window.LTQM, { useSpotlight, Tilt, RevealWords, PlatformMarquee, Typewriter, ScrollProgress, useRipple });
})();