/* global React */
function Header({ page, onNav }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    ["home", "Početna"],
    ["program", "Program"],
    ["tehnike", "Tehnike"],
    ["kursevi", "Kursevi"],
    ["galerija", "Galerija"],
    ["about", "O nama"],
    ["blog", "Blog"],
    ["faq", "FAQ"],
    ["contact", "Kontakt"],
  ];

  const go = (k) => { setMenuOpen(false); onNav(k); };

  return (
    <>
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        background: "rgba(255,255,255,0.95)", backdropFilter: "blur(12px)",
        boxShadow: "var(--shadow-sticky)",
      }}>
        <div style={{
          maxWidth: 1320, margin: "0 auto",
          padding: "14px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
        }}>
          <a onClick={() => go("home")} style={{ cursor: "pointer", display: "flex", alignItems: "center", flexShrink: 0 }}>
            <img src="assets/logo.svg" alt="OMT Centar" style={{ height: 32 }} />
          </a>

          <nav className="omt-nav" style={{ display: "flex", gap: 20, flexWrap: "wrap" }}>
            {links.map(([k, label]) => (
              <a key={k} onClick={() => go(k)} style={{
                cursor: "pointer", fontSize: 14, fontWeight: 600,
                color: page === k ? "var(--omt-green-ink)" : "var(--text-primary)",
                textDecoration: "none", padding: "6px 2px", position: "relative",
              }}>
                {label}
                {page === k && <div style={{ position: "absolute", left: 0, right: 0, bottom: -4, height: 2, background: "var(--omt-grad)", borderRadius: 2 }} />}
              </a>
            ))}
          </nav>

          <div className="omt-header-ctas" style={{ display: "flex", gap: 10, alignItems: "center", flexShrink: 0 }}>
            <a href="tel:+381641973737" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 600, color: "var(--text-primary)", textDecoration: "none" }}>
              <Icon name="phone" size={14} /> 064 197 3737
            </a>
            <Button variant="primary" size="sm" onClick={() => go("contact")}>Prijavite se</Button>
          </div>

          {/* Hamburger */}
          <button className="omt-hamburger" onClick={() => setMenuOpen(true)} style={{
            background: "transparent", border: "1.5px solid var(--border-default)",
            borderRadius: 8, width: 40, height: 40, cursor: "pointer",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--text-primary)", flexShrink: 0,
          }}>
            <Icon name="menu" size={20} />
          </button>
        </div>
      </header>

      {/* Mobile menu */}
      {menuOpen && (
        <div className="omt-mobile-menu" onClick={() => setMenuOpen(false)}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 36 }}
            onClick={(e) => e.stopPropagation()}>
            <img src="assets/logomark.svg" alt="OMT Centar" style={{ height: 36, filter: "brightness(0) invert(1)" }} />
            <button onClick={() => setMenuOpen(false)} style={{ background: "rgba(255,255,255,0.1)", border: 0, borderRadius: 8, width: 40, height: 40, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff" }}>
              <Icon name="close" size={20} />
            </button>
          </div>

          <nav style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {links.map(([k, label]) => (
              <a key={k} onClick={() => go(k)} style={{
                cursor: "pointer", fontSize: 22, fontWeight: 700, color: page === k ? "#04AF8F" : "rgba(255,255,255,0.9)",
                textDecoration: "none", padding: "12px 4px",
                borderBottom: "1px solid rgba(255,255,255,0.07)",
                display: "flex", alignItems: "center", justifyContent: "space-between",
              }}>
                {label}
                <Icon name="arrowRight" size={18} color={page === k ? "#04AF8F" : "rgba(255,255,255,0.3)"} />
              </a>
            ))}
          </nav>

          <div style={{ marginTop: "auto", paddingTop: 36, display: "flex", flexDirection: "column", gap: 12 }}>
            <a href="tel:+381641973737" style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 15, fontWeight: 600, color: "rgba(255,255,255,0.7)", textDecoration: "none" }}>
              <Icon name="phone" size={16} /> 064 197 3737
            </a>
            <Button variant="primary" size="lg" icon="arrowRight" onClick={() => go("contact")}
              style={{ width: "100%", justifyContent: "center" }}>
              Prijavite se
            </Button>
          </div>
        </div>
      )}
    </>
  );
}
window.Header = Header;