/* @jsxRuntime classic */
/* global React, ReactDOM, Navbar, Footer, Hero, ClientBand, Services, SEOCallout, WorkGrid, Process, FAQ, Pricing, Contact */
const { useState, useEffect } = React;

const App = () => {
  const [section, setSection] = useState("home");

  const handleNav = (key) => {
    setSection(key);
    const el = document.getElementById(key);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  useEffect(() => {
    const ids = ["work", "services", "seo", "process", "pricing", "faq", "contact"];
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setSection(e.target.id); });
    }, { rootMargin: "-40% 0px -55% 0px" });
    ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);

  const [showSticky, setShowSticky] = useState(false);
  useEffect(() => {
    const onScroll = () => setShowSticky(window.scrollY > 480 && section !== "contact");
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [section]);

  return (
    <div className="lw" style={{ background: "var(--lw-paper)", minHeight: "100vh" }}>
      <Navbar onNav={handleNav} current={section}/>
      <main data-screen-label="Marketing home">
        <Hero/>
        <ClientBand/>
        <WorkGrid/>
        <Services/>
        <SEOCallout/>
        <Process/>
        <Pricing/>
        <FAQ/>
        <Contact/>
      </main>
      <Footer/>
      <div className="lw-sticky-cta" data-visible={showSticky ? "true" : "false"} role="complementary" aria-label="Start a project">
        <strong>€200</strong><em>launch offer</em>
        <a href="#contact" onClick={(e) => { e.preventDefault(); handleNav("contact"); }}>Start<Icon name="arrow" size={14}/></a>
      </div>
    </div>
  );
};

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