/* Navigation bar — sticky, frosted, with logo + nav links + CTA */

const Logo = ({ size = 28 }) => (
  <div className="logo" style={{ display: "flex", alignItems: "center" }}>
    <span style={{
      fontFamily: "var(--font-display)",
      fontWeight: 800,
      letterSpacing: "0.02em",
      fontSize: 18,
      color: "var(--ink-0)",
    }}>
      TokenizaceAktiv<span style={{ color: "var(--amber-500)", fontWeight: 800 }}>.cz</span>
    </span>
  </div>
);

const Nav = ({ onConsultation }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { href: "#pilire", label: "Pilíře" },
    { href: "#jak", label: "Jak to funguje" },
    { href: "#vyhody", label: "Výhody" },
    { href: "#reference", label: "Reference" },
    { href: "#faq", label: "FAQ" },
    { href: "#kontakt", label: "Kontakt" },
  ];

  return (
    <header className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
      <div className="container nav__inner">
        <a href="#top" className="nav__brand"><Logo /></a>

        <nav className="nav__links" aria-label="Hlavní menu">
          {links.map((l) => (
            <a key={l.href} href={l.href} className="nav__link">{l.label}</a>
          ))}
        </nav>

        <div className="nav__cta">
          <button className="btn btn--ghost btn--sm" onClick={() => document.querySelector("#kontakt")?.scrollIntoView({ behavior: "smooth" })}>
            Přihlásit se
          </button>
          <button className="btn btn--primary btn--sm" onClick={onConsultation}>
            Konzultace zdarma
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 5l7 7-7 7"/>
            </svg>
          </button>
        </div>

        <button className="nav__hamburger" onClick={() => setOpen((o) => !o)} aria-label="Menu">
          <span/><span/><span/>
        </button>
      </div>

      {open && (
        <div className="nav__mobile">
          {links.map((l) => (
            <a key={l.href} href={l.href} className="nav__link" onClick={() => setOpen(false)}>{l.label}</a>
          ))}
          <button className="btn btn--primary" onClick={() => { setOpen(false); onConsultation?.(); }}>
            Konzultace zdarma
          </button>
        </div>
      )}
    </header>
  );
};

window.Nav = Nav;
window.Logo = Logo;