/* Fabrica Interiors — Website UI kit · Nav
   Fixed top bar: transparent over the cover, frosted glass once scrolled.
   The brand mark fades in only after scroll (as on the source site). */
const { Button: NavButton } = window.FabricaInteriorsDesignSystem_978348;

function Nav({ scrolled, onBurger, menuOpen }) {
  const links = [
    { href: "#o-nas", label: "O nás" },
    { href: "#sluzby", label: "Služby" },
    { href: "#galerie", label: "Galerie" },
    { href: "#kontakt", label: "Kontakt" },
  ];
  return (
    <header
      style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 60,
        background: scrolled ? "var(--nav-bg)" : "transparent",
        backdropFilter: scrolled ? "var(--blur-nav)" : "none",
        WebkitBackdropFilter: scrolled ? "var(--blur-nav)" : "none",
        boxShadow: scrolled ? "0 1px 0 var(--border-subtle)" : "none",
        transition: "background .5s var(--ease), box-shadow .5s var(--ease)",
      }}
    >
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: scrolled ? "14px var(--gutter)" : "22px var(--gutter)",
        transition: "padding .5s var(--ease)",
      }}>
        <a href="#top" aria-label="Fabrica Interiors" style={{
          opacity: scrolled ? 1 : 0,
          transform: scrolled ? "translateY(0)" : "translateY(-6px)",
          pointerEvents: scrolled ? "auto" : "none",
          transition: "opacity .55s var(--ease), transform .55s var(--ease)",
        }}>
          <img src="../../assets/logo.png" alt="Fabrica Interiors" style={{ height: scrolled ? "21px" : "24px", width: "auto", transition: "height .5s var(--ease)" }} />
        </a>

        <nav className="kit-navlinks" style={{ display: "flex", alignItems: "center", gap: "36px" }}>
          {links.map((l) => <NavLink key={l.href} href={l.href}>{l.label}</NavLink>)}
          <NavButton variant="ink" size="sm" href="#kontakt" arrow>Nezávazná poptávka</NavButton>
        </nav>

        <button className="kit-burger" onClick={onBurger} aria-label="Menu" style={{
          display: "none", flexDirection: "column", gap: "5px",
          background: "none", border: "none", cursor: "pointer", padding: "8px",
        }}>
          {[0, 1, 2].map((i) => {
            const t = menuOpen
              ? [ "translateY(6.6px) rotate(45deg)", "scaleX(0)", "translateY(-6.6px) rotate(-45deg)" ][i]
              : "none";
            return <span key={i} style={{ width: "26px", height: "1.6px", background: "var(--ink)", transform: t, opacity: menuOpen && i === 1 ? 0 : 1, transition: "transform .4s var(--ease), opacity .3s" }} />;
          })}
        </button>
      </div>
    </header>
  );
}

function NavLink({ href, children }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: "relative", fontFamily: "var(--font-body)", fontSize: "var(--fs-nav)", fontWeight: "var(--fw-medium)", letterSpacing: ".02em", color: "var(--ink)" }}>
      {children}
      <span style={{ position: "absolute", left: 0, bottom: "-5px", width: "100%", height: "1px", background: "var(--ink)", transform: h ? "scaleX(1)" : "scaleX(0)", transformOrigin: "left", transition: "transform .4s var(--ease)" }} />
    </a>
  );
}

window.Nav = Nav;