// Shift10 Landingpage — Header / Nav
function Nav({ dark }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = 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 = [
    { label: "Problem", href: "#problem" },
    { label: "Angebot", href: "#angebot" },
    { label: "So funktioniert's", href: "#so-funktionierts" },
    { label: "Über Mike", href: "#ueber-mike" },
    { label: "Preise", href: "#preise" },
    { label: "FAQ", href: "#faq" },
  ];

  const closeMenu = () => setMobileOpen(false);

  return (
    <>
      <header className={"nav " + (dark ? "nav--dark" : "")} style={scrolled ? {} : { background: "transparent", borderBottomColor: "transparent" }}>
        <a href="#hero" className="logo" onClick={closeMenu}>
          <Shift10Mark />
        </a>
        <nav className="nav-links">
          {links.map(l => (
            <a key={l.href} href={l.href} className="nav-link">{l.label}</a>
          ))}
        </nav>
        <a href="#kontakt" className="btn btn--primary nav-cta">
          Termin anfragen <span className="btn-arrow">→</span>
        </a>
        <button
          className={"nav-hamburger" + (mobileOpen ? " open" : "")}
          onClick={() => setMobileOpen(o => !o)}
          aria-label="Menü"
        >
          <span /><span /><span />
        </button>
      </header>

      {mobileOpen && (
        <div className={"nav-mobile " + (dark ? "nav-mobile--dark" : "")} onClick={closeMenu}>
          {links.map(l => (
            <a key={l.href} href={l.href} className="nav-mobile-link">{l.label}</a>
          ))}
          <a href="#kontakt" className="btn btn--accent" style={{ marginTop: 8 }}>
            Termin anfragen <span className="btn-arrow">→</span>
          </a>
        </div>
      )}
    </>
  );
}

function Shift10Mark({ size = 22, inverted = false }) {
  const src = inverted ? "assets/logo-white.svg" : "assets/logo.svg";
  return (
    <img
      src={src}
      alt="Shift10"
      style={{ height: size, width: "auto", display: "block" }}
    />
  );
}

Object.assign(window, { Nav, Shift10Mark });