/* Nav + Hero */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 200,
      transition: "all 0.4s var(--ease)",
      background: scrolled ? "rgba(10,11,13,0.72)" : "transparent",
      backdropFilter: scrolled ? "blur(16px) saturate(1.3)" : "none",
      borderBottom: `1px solid ${scrolled ? "var(--hairline)" : "transparent"}`
    }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 68 }}>
        <a href="#top" aria-label="Grain home">
          <GrainLockup size={22} fontSize={19} interactive />
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
          <a href="#eye-a" className="btn btn-bare nav-link">How it works</a>
          <a href="#vision" className="btn btn-bare nav-link">Vision</a>
          <a href="https://github.com" target="_blank" rel="noreferrer" className="btn btn-bare nav-link">GitHub</a>
          <a href="#eye-c" className="btn btn-ghost" style={{ padding: "9px 15px", fontSize: 13.5, marginLeft: 6 }}>
            <Triangle /> Watch demo
          </a>
        </div>
      </div>
    </nav>);

}

function Logo({ size = 22 }) {
  return <GrainMark size={size} interactive />;
}

function Triangle() {
  return <span style={{ width: 0, height: 0, borderLeft: "7px solid var(--grain)", borderTop: "4.5px solid transparent", borderBottom: "4.5px solid transparent", display: "inline-block" }} />;
}

function Hero() {
  const heroRef = React.useRef(null);

  React.useEffect(() => {
    const hero = heroRef.current;
    if (!hero) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const coarse = window.matchMedia("(hover: none), (pointer: coarse)").matches;
    const rect = () => hero.getBoundingClientRect();
    const clampOf = (r) => ({ minX: r.width * 0.55, maxX: r.width * 0.87, minY: r.height * 0.27, maxY: r.height * 0.8 });
    const rest = () => { const r = rect(); return { x: r.width * 0.71, y: r.height * 0.49 }; };

    const setR = () => { const r = rect(); const R = Math.max(112, Math.min(178, r.width * 0.135)); hero.style.setProperty("--r", R + "px"); };
    setR();
    let cur = rest(), target = rest(), t = 0, raf = 0;
    const write = () => { hero.style.setProperty("--mx", cur.x + "px"); hero.style.setProperty("--my", cur.y + "px"); };
    write();

    if (reduce) { const r = rect(); cur = { x: r.width * 0.71, y: r.height * 0.46 }; write(); return; }

    const onMove = (e) => {
      const r = rect(), c = clampOf(r);
      let x = e.clientX - r.left, y = e.clientY - r.top;
      target = { x: Math.max(c.minX, Math.min(c.maxX, x)), y: Math.max(c.minY, Math.min(c.maxY, y)) };
    };
    const onLeave = () => { target = rest(); };
    if (!coarse) { hero.addEventListener("mousemove", onMove); hero.addEventListener("mouseleave", onLeave); }

    const loop = () => {
      if (coarse) {
        t += 0.016;
        const r = rect(), c = clampOf(r);
        const cx = (c.minX + c.maxX) / 2, cy = (c.minY + c.maxY) / 2;
        const ax = (c.maxX - c.minX) / 2 * 0.84, ay = (c.maxY - c.minY) / 2 * 0.72;
        target = { x: cx + Math.sin(t * 0.55) * ax, y: cy + Math.sin(t * 0.92 + 1) * ay };
      }
      cur.x += (target.x - cur.x) * 0.14;
      cur.y += (target.y - cur.y) * 0.14;
      write();
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    const onResize = () => setR();
    window.addEventListener("resize", onResize);
    return () => { cancelAnimationFrame(raf); hero.removeEventListener("mousemove", onMove); hero.removeEventListener("mouseleave", onLeave); window.removeEventListener("resize", onResize); };
  }, []);

  return (
    <header id="top" className="hero" ref={heroRef}>
      <div className="hero-surface" />
      <div className="hero-structure" />
      <div className="hero-vignette" />
      <div className="hero-lens" aria-hidden="true">
        <span className="hero-lens-cross" />
      </div>

      <div className="wrap hero-grid">
        <div className="hero-copy">
          <div className="badge-pill" style={{ marginBottom: 30 }}>
            <span className="live-dot" style={{ position: "relative", display: "inline-block" }} />
            The visual intent compiler
          </div>
          <h1 className="display" style={{ marginBottom: 26, maxWidth: "15ch" }}>
            Any visual becomes <span style={{ color: "var(--grain)" }}>editable structure.</span>
          </h1>
          <p className="lead" style={{ marginBottom: 38 }}>
            Point Grain at a repo, a tutorial, or your screen. It reconstructs what you see as
            parametric, node-based structure — <span style={{ color: "var(--text)" }}>that you own, and can change.</span>
          </p>
          <div style={{ display: "flex", gap: 13, alignItems: "center", flexWrap: "wrap" }}>
            <a href="#eye-a" className="btn btn-grain">
              Try it live
              <GrainMark size={17} color="#1c0f04" />
            </a>
            <a href="#eye-a" className="btn btn-ghost mono" style={{ fontSize: 12.5 }}>read · learn · watch</a>
          </div>
        </div>
        <div aria-hidden="true" />
      </div>

      <div className="wrap" style={{ marginTop: 60, position: "relative", zIndex: 4 }}>
        <div className="rule" style={{ background: "linear-gradient(90deg, var(--hairline), transparent)" }} />
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14 }}>
          <span className="mono faint" style={{ fontSize: 11.5, letterSpacing: "0.16em" }}>MOVE TO SEE THE STRUCTURE BENEATH</span>
          <span className="mono faint" style={{ fontSize: 11.5, letterSpacing: "0.16em" }}>LIVE DEMO</span>
        </div>
      </div>
    </header>);

}

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