// src/nav.jsx — floating glass nav with section tracking

function Nav({ onBook }) {
  const links = [
    { id: "home", label: "首页" },
    { id: "about", label: "关于" },
    { id: "thinking", label: "思想" },
    { id: "services", label: "服务" },
    { id: "works", label: "案例" },
  ];
  const [active, setActive] = React.useState("home");

  React.useEffect(() => {
    const sections = links.map((l) => document.getElementById(l.id)).filter(Boolean);
    if (!sections.length) return;
    const io = new IntersectionObserver((entries) => {
      // Pick the section whose center is closest to viewport center
      entries.forEach((e) => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: "-40% 0px -55% 0px" });
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);

  const go = (e, id) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 30, behavior: "smooth" });
  };

  return (
    <nav className="nav">
      <a href="#home" className="brand" onClick={(e) => go(e, "home")}>
        <span className="dot" /> Sober阿铭
      </a>
      {links.map((l) => (
        <a key={l.id} href={`#${l.id}`}
           className={`link${active === l.id ? " active" : ""}`}
           onClick={(e) => go(e, l.id)}>{l.label}</a>
      ))}
      <button className="cta" onClick={onBook}>预约咨询</button>
    </nav>
  );
}

window.Nav = Nav;