// Hero + cursor follower + reveal observer
const { useState, useEffect, useRef, useMemo } = React;

// ── Cursor follower ─────────────────────────────────────────────────────────
function CursorFollower() {
  const ringRef = useRef(null);
  const dotRef = useRef(null);
  const state = useRef({ x: 0, y: 0, rx: 0, ry: 0, dx: 0, dy: 0, hover: false });

  useEffect(() => {
    const onMove = (e) => {
      state.current.x = e.clientX;
      state.current.y = e.clientY;
    };
    const onOver = (e) => {
      const t = e.target;
      const hover = !!(t.closest && t.closest('[data-magnetic], a, button, .card--hover'));
      state.current.hover = hover;
      if (ringRef.current) ringRef.current.classList.toggle('is-hover', hover);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseover', onOver);

    let raf;
    const tick = () => {
      const s = state.current;
      s.rx += (s.x - s.rx) * 0.18;
      s.ry += (s.y - s.ry) * 0.18;
      s.dx += (s.x - s.dx) * 0.55;
      s.dy += (s.y - s.dy) * 0.55;
      if (ringRef.current) ringRef.current.style.transform = `translate(${s.rx}px, ${s.ry}px) translate(-50%, -50%)`;
      if (dotRef.current) dotRef.current.style.transform = `translate(${s.dx}px, ${s.dy}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseover', onOver);
    };
  }, []);

  return (
    <React.Fragment>
      <div ref={ringRef} className="cursor-ring" />
      <div ref={dotRef} className="cursor-dot" />
    </React.Fragment>
  );
}

// ── Reveal on scroll ────────────────────────────────────────────────────────
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      }
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

// ── Magnetic button ─────────────────────────────────────────────────────────
function Magnetic({ children, strength = 0.25, className = '', ...rest }) {
  const ref = useRef(null);
  const [t, setT] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      setT({ x: (e.clientX - cx) * strength, y: (e.clientY - cy) * strength });
    };
    const onLeave = () => setT({ x: 0, y: 0 });
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, [strength]);
  return (
    <div
      ref={ref}
      data-magnetic
      className={className}
      style={{ display: 'inline-block', transform: `translate(${t.x}px, ${t.y}px)`, transition: 'transform .3s cubic-bezier(.2,.8,.2,1)' }}
      {...rest}
    >
      {children}
    </div>
  );
}

// ── Hero ────────────────────────────────────────────────────────────────────
const HERO_VARIANTS = ['orbit', 'split', 'stacked'];

function Hero({ headline, variant }) {
  const orbRef = useRef(null);

  useEffect(() => {
    let raf;
    let t = 0;
    const tick = () => {
      t += 0.004;
      if (orbRef.current) {
        const x = Math.sin(t) * 40;
        const y = Math.cos(t * 0.9) * 30;
        orbRef.current.style.transform = `translate(${x}px, ${y}px)`;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const [hovered, setHovered] = useState(-1);
  const words = headline.split(' ');

  return (
    <section id="home" className="hero" data-hero-variant={variant}>
      <div className="hero__bg">
        <div ref={orbRef} className="hero__orb hero__orb--1" />
        <div className="hero__orb hero__orb--2" />
        <div className="hero__grid" />
        <div className="noise" />
      </div>

      <div className="shell hero__inner">
        <div className="hero__meta">
          <span className="pill"><span className="dot" />// ISTQB Certified · 10+ yrs · Top Rated Plus on Upwork · 6,000+ hrs delivered</span>
        </div>

        <h1 className="display hero__headline">
          {words.map((w, i) => (
            <span
              key={i}
              className={`hero__word ${hovered === i ? 'is-hot' : ''}`}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(-1)}
            >
              {w}{' '}
            </span>
          ))}
        </h1>

        <div className="hero__bottom">
          <p className="hero__lede">
            We deliver automated testing solutions that keep pace with your release cycles. From web applications to payment systems, we ensure your software works flawlessly — without slowing you down.
          </p>

          <div className="hero__cta">
            <Magnetic>
              <a href="#contact" className="btn btn--accent">Get a free QA audit →</a>
            </Magnetic>
            <Magnetic strength={0.2}>
              <a href="#services" className="btn btn--ghost">View our services</a>
            </Magnetic>
          </div>

          <div className="hero__specs">
            <Spec label="Experience" value="10+ yrs" />
            <Spec label="Hours delivered" value="6,000+" />
            <Spec label="Payment gateways" value="11+" />
            <Spec label="Job success" value="100%" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Spec({ label, value }) {
  return (
    <div className="spec">
      <div className="mono" style={{ color: 'var(--fg-mute)' }}>{label}</div>
      <div className="display" style={{ fontSize: 28, marginTop: 8 }}>{value}</div>
    </div>
  );
}

Object.assign(window, { CursorFollower, useReveal, Magnetic, Hero, HERO_VARIANTS });