// Root App — B pattern only
const { useState, useEffect } = React;

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

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#" className="logo">
          <span className="who">Who</span>
          <span className="sep" style={{ color: "rgb(10, 15, 28)", fontWeight: "700" }}>-</span>
          <span className="next" style={{ color: "rgb(15, 15, 16)" }}>next</span>
        </a>
        <div className="nav-links">
          <a href="#about">About</a>
          <a href="#services">Services</a>
          <a href="#members">Members</a>
          <a href="#company">Company</a>
          <a href="#news">News</a>
        </div>
        <a href="#contact" className="nav-cta">
          <span>Contact</span>
          <span className="arrow">↗</span>
        </a>
      </div>
    </nav>);
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.1, rootMargin: "0px 0px -5% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function App() {
  useReveal();
  return (
    <>
      <Nav />
      <HeroB />
      <AboutSection />
      <ServicesSection />
      <MembersSection />
      <ProfileSection />
      <NewsSection />
      <ContactSection />
      <Footer />
    </>);
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);