// Sticky header. Transparent over hero, solid card on scroll.

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = ["Ecosystem", "Products", "Roadmap", "Learn", "Contact"];

  return (
    <header
      className="vh-nav"
      data-scrolled={scrolled ? "true" : "false"}
    >
      <div className="vh-nav-inner">
        <a href="#top" className="vh-brand">
          <img src="../../assets/valuehuman-logo.jpg" alt="ValueHuman" className="vh-brand-img" />
          <div className="vh-brand-text">
            <div className="vh-brand-name">
              <span style={{ color: "var(--vh-orange-500)" }}>Value</span>
              <span style={{ color: "var(--vh-blue-500)" }}>Human</span>
              <span style={{ background: "var(--gradient-ai)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}> AI</span>
            </div>
            <div className="vh-brand-tag">Bridging Human &amp; AI</div>
          </div>
        </a>

        <nav className="vh-nav-links">
          {links.map((l) => (
            <a key={l} href={`#${l.toLowerCase()}`}>{l}</a>
          ))}
        </nav>

        <div className="vh-nav-cta">
          <a href="#contact" className="btn btn-ghost">Talk to us</a>
          <a
            href="../profamily-telegram/index.html"
            className="btn btn-primary"
          >
            Try ProFamily <Icon name="arrow-up-right" size={16} />
          </a>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;