/* global React */
const { useState: useNavState, useEffect: useNavEffect } = React;

window.Nav = function Nav({ active, onNav, transparent = false }) {
  const items = [
  { id: "hjem", label: "Hjem" },
  { id: "investerer", label: "Investeringsfilosofi" },
  { id: "kontakt", label: "Kontakt" }];


  const [scrolled, setScrolled] = useNavState(false);
  useNavEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const overlayMode = transparent && !scrolled;

  const barStyle = overlayMode ?
  { ...navStyles.bar, background: "transparent", boxShadow: "none" } :
  navStyles.bar;

  const pillStyle = overlayMode ?
  { ...navStyles.pill,
    background: "rgba(8,17,28,0.35)",
    boxShadow: "inset 0 0 0 1px rgba(242,242,236,0.18)"
  } :
  navStyles.pill;

  const linkBase = overlayMode ?
  { ...navStyles.link, color: "rgba(242,242,236,0.78)" } :
  navStyles.link;

  const linkActive = overlayMode ?
  { ...navStyles.linkActive, background: "#f2f2ec", color: "#0d1b2a" } :
  navStyles.linkActive;

  const ctaStyle = overlayMode ?
  { ...navStyles.cta, background: "#f2f2ec", color: "#0d1b2a" } :
  navStyles.cta;

  return (
    <nav style={barStyle}>
      <div style={navStyles.inner}>
        <a href="#" onClick={(e) => {e.preventDefault();onNav("hjem");}} style={navStyles.brand}>
          <img
            src={overlayMode ? "assets/logos/volt-wordmark-cream.png" : "assets/logos/volt-wordmark-navy.png"}
            alt="Volt Property"
            style={{
              display: "block",
              filter: overlayMode ? "drop-shadow(0 2px 10px rgba(0,0,0,0.55))" : "none", height: "160px", objectFit: "cover"
            }} />
          
        </a>
        <div style={pillStyle}>
          {items.map((it) => {
            const isActive = active === it.id;
            return (
              <a
                key={it.id}
                href="#"
                onClick={(e) => {e.preventDefault();onNav(it.id);}}
                style={{ ...linkBase, ...(isActive ? linkActive : null) }}>
                
                {it.label}
              </a>);

          })}
        </div>
      </div>
    </nav>);

};

const navStyles = {
  bar: {
    position: "sticky",
    top: 0,
    zIndex: 50,
    background: "rgba(242,242,236,0.86)",
    backdropFilter: "blur(12px)",
    WebkitBackdropFilter: "blur(12px)",
    boxShadow: "inset 0 -1px 0 #ebe9df",
    transition: "background 220ms cubic-bezier(0.22,1,0.36,1), box-shadow 220ms"
  },
  inner: {
    maxWidth: 1240,
    margin: "0 auto",
    height: 76,
    padding: "0 32px",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    gap: 32
  },
  brand: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    border: 0,
    textDecoration: "none",
    marginRight: "auto"
  },
  pill: {
    display: "flex",
    alignItems: "center",
    gap: 4,
    padding: 4,
    background: "rgba(255,255,255,0.6)",
    borderRadius: 999,
    boxShadow: "0 0 0 1px #ebe9df",
    backdropFilter: "blur(8px)",
    WebkitBackdropFilter: "blur(8px)",
    transition: "all 220ms cubic-bezier(0.22,1,0.36,1)"
  },
  link: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 14,
    fontWeight: 500,
    color: "#4a5868",
    textDecoration: "none",
    border: 0,
    padding: "9px 16px",
    borderRadius: 999,
    transition: "all 160ms cubic-bezier(0.22,1,0.36,1)",
    cursor: "pointer"
  },
  linkActive: {
    background: "#0d1b2a",
    color: "#f2f2ec"
  },
  cta: {
    background: "#0d1b2a",
    color: "#f2f2ec",
    border: 0,
    borderRadius: 999,
    height: 42,
    padding: "0 20px",
    fontSize: 14,
    fontWeight: 500,
    cursor: "pointer",
    fontFamily: "Inter Tight, system-ui, sans-serif",
    display: "inline-flex",
    alignItems: "center",
    transition: "all 220ms cubic-bezier(0.22,1,0.36,1)"
  }
};