// Main app
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#b8e23a", "#e8c829", "#ff7a1c"],
  "headline": "default",
  "grid": false,
  "headlineSerif": true
}/*EDITMODE-END*/;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;

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

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <a href="#top" className="nav-logo">
        <img src="logo2.png" alt="VH code" className="nav-logo-img" />
      </a>
      <div className="nav-links">
        <a href="#about">studio</a>
        <a href="#products">productos</a>
        <a href="#clients">clientes</a>
        <a href="#process">proceso</a>
        <a href="#contact">contacto</a>
      </div>
      <a href="#contact" className="nav-cta">
        <span className="nav-cta-dot"></span>
        Iniciar proyecto
      </a>
    </nav>
  );
}

function App() {
  return (
    <>
      <Nav />
      <window.Hero />
      <window.Manifesto />
      <window.Products />
      <window.Clients />
      <window.Process />
      <window.Cta />
      <window.Footer />
      <window.CommitTweaks />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);