/* Nav + Hero with cursor-reactive field and cycling "What if" headline */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a className="brand" href="#top" onClick={close}>
        <BrandMark />
      </a>
      <div className="nav-links">
        <a href="#products">Products</a>
        <a href="#approach">Approach</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
        <span className="nav-status"><span className="pulse"></span>Building</span>
      </div>
      <button
        className="nav-burger"
        aria-label={open ? "Close menu" : "Open menu"}
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
      >
        <span></span>
        <span></span>
      </button>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        <span className="mm-status"><span className="pulse"></span>Building</span>
        <nav className="mm-links">
          <a href="#products" onClick={close}>Products<span className="mm-dot">.</span></a>
          <a href="#approach" onClick={close}>Approach<span className="mm-dot">.</span></a>
          <a href="#about" onClick={close}>About<span className="mm-dot">.</span></a>
          <a href="#contact" onClick={close}>Contact<span className="mm-dot">.</span></a>
        </nav>
        <a className="mm-mail" href="mailto:support@swiftlabs.ltd" onClick={close}>support@swiftlabs.ltd</a>
      </div>
    </nav>
  );
}

/* Cursor-reactive dot field on canvas */
function HeroField() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let w, h, dpr, dots = [], raf, t = 0;
    const mouse = { x: -9999, y: -9999 };
    const GAP = 38;

    function build() {
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      w = canvas.clientWidth; h = canvas.clientHeight;
      canvas.width = w * dpr; canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      dots = [];
      const cols = Math.ceil(w / GAP) + 1;
      const rows = Math.ceil(h / GAP) + 1;
      for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
          dots.push({ x: i * GAP, y: j * GAP, bx: i * GAP, by: j * GAP });
        }
      }
    }

    function frame() {
      t += 0.01;
      ctx.clearRect(0, 0, w, h);
      for (const d of dots) {
        // gentle wave drift
        const wave = reduce ? 0 : Math.sin(t + d.bx * 0.01 + d.by * 0.012) * 1.2;
        // cursor repulsion
        const dx = d.bx - mouse.x;
        const dy = d.by - mouse.y;
        const dist = Math.hypot(dx, dy);
        const R = 150;
        let px = d.bx, py = d.by, glow = 0;
        if (dist < R) {
          const f = (1 - dist / R);
          px += (dx / (dist || 1)) * f * 26;
          py += (dy / (dist || 1)) * f * 26;
          glow = f;
        }
        d.x += (px - d.x) * 0.12;
        d.y += (py + wave - d.y) * 0.12;
        const baseA = 0.16;
        const r = 1.1 + glow * 2.4;
        ctx.beginPath();
        ctx.arc(d.x, d.y, r, 0, Math.PI * 2);
        if (glow > 0.02) {
          ctx.fillStyle = `rgba(203,242,78,${(baseA + glow * 0.8).toFixed(3)})`;
        } else {
          ctx.fillStyle = `rgba(244,242,236,${baseA})`;
        }
        ctx.fill();
      }
      raf = requestAnimationFrame(frame);
    }

    build();
    frame();
    const onResize = () => build();
    const onMove = (e) => { const r = canvas.getBoundingClientRect(); mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top; };
    const onLeave = () => { mouse.x = -9999; mouse.y = -9999; };
    window.addEventListener('resize', onResize);
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseout', onLeave);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseout', onLeave); };
  }, []);
  return <canvas ref={ref} className="hero-canvas" aria-hidden="true"></canvas>;
}

function Rotator() {
  const words = ["faster?", "simpler?", "better?", "easier?", "smarter?", "effortless?", "more?"];
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI((p) => (p + 1) % words.length), 2200);
    return () => clearInterval(id);
  }, []);
  return (
    <span className="rotator">
      <span className="word" key={i}>{words[i]}</span>
    </span>
  );
}

function Hero() {
  const ctaRef = useMagnetic(0.4);
  return (
    <header className="hero" id="top">
      <HeroField />
      <div className="hero-fade"></div>
      <div className="hero-inner wrap">
        <div className="hero-tag-row">
          <span className="eyebrow">An independent innovation hub</span>
          <span className="hero-coord">EST. 2026 — SWIFT LABS VENTURES LLC / USA</span>
        </div>

        <h1>
          What if it could be <Rotator /><span className="caret"></span>
        </h1>

        <div className="hero-sub">
          <p className="hero-lede">
            <strong>Swift Labs</strong> is an innovation studio that turns "what if" questions
            into real, shipping products. Started by founder Jonathan Williams to give
            expression to his many ideas.
          </p>
          <div className="hero-cta">
            <a className="btn" href="#products" ref={ctaRef}><span className="dot"></span>See the products</a>
            <a className="btn-ghost" href="#about">The story</a>
          </div>
        </div>
      </div>

      <div className="scroll-hint">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </header>
  );
}

Object.assign(window, { Nav, Hero });