// Header.jsx — 24sata.hr style header

Object.assign(window, { SiteHeader });

function SiteHeader() {
  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);

  const navItems = [
    "PLUS+", "News", "Show", "Sport", "Life&style", "Viral", "Sci/Tech", "Express"
  ];

  const subnavItems = [
    "Hrvatska", "Crna kronika", "Svijet", "Rat u Ukrajini",
    "Politika", "Vrijeme", "Kolumne", "Kvaka24",
  ];

  return (
    <div className="header__outer_wrap">
      <header className="header">

        {/* Primary nav */}
        <div className="header__top has-shadow">
          <div className="header__wrap">
            <div className="level">

              {/* Logo */}
              <div className="level-item is-marginless item_logo header__logo">
                <a className="header__logo_link" href="#" title="24sata.hr">
                  <img alt="24sata.hr" className="header__logo_img" height="43" src="./index/logo-without-border.svg" width="53"
                    onError={e => { e.target.style.display="none"; e.target.nextSibling.style.display="inline-block"; }} />
                  <span style={{ display: "none", fontWeight: 700, fontSize: 18, color: "#e8241a" }}>24sata</span>
                </a>
              </div>

              {/* Desktop nav */}
              <nav aria-label="Navigacija" className="level-item item_main_nav header__desktop_nav">
                {navItems.map(item => (
                  <a key={item} className={`desktop_nav__item has-box-shadow-news desktop_nav__item--news${item === "News" ? " is-active has-text-news has-box-shadow-news" : ""}`} href="#">
                    <span>{item}<span /></span>
                  </a>
                ))}
              </nav>

              {/* Right icons */}
              <div className="level-item item_profile is-marginless">
                <a className="header__link is-user profile_button" href="#" role="button">
                  <span className="icon_wrap">
                    <em className="icon icon-profile" />
                  </span>
                  <span className="header__avatar_copy is-login">Prijava</span>
                </a>
              </div>

              {/* Hamburger */}
              <div className="level-item item_hamburger_menu is-marginless" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
                <div aria-label="Linkovi" className="header__link" role="button">
                  <div className="hamburger_menu">
                    <span className="hamburger_menu__item" />
                    <span className="hamburger_menu__item" />
                    <span className="hamburger_menu__item" />
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        {/* Sub-navigation */}
        <div className="header_subnavigation">
          <div className="header__subnav has-text-centered is-visible">
            <div className="header__subnav_wrap">
              <ul className="header__subnav_list">
                {subnavItems.map(item => (
                  <li key={item} className="header__subnav_item">
                    <a className="header__subnav_link" href="#">{item}</a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        {/* Mobile menu overlay */}
        {mobileMenuOpen && (
          <div style={{
            position: "fixed", top: 0, left: 0, width: "100%", height: "100%",
            background: "rgba(0,0,0,0.5)", zIndex: 9999,
          }} onClick={() => setMobileMenuOpen(false)}>
            <div style={{
              background: "#fff", width: 280, height: "100%", overflowY: "auto",
              padding: "20px 16px",
            }} onClick={e => e.stopPropagation()}>
              <button onClick={() => setMobileMenuOpen(false)} style={{
                position: "absolute", top: 12, right: 16, background: "none",
                border: "none", fontSize: 24, cursor: "pointer", color: "#333",
              }}>×</button>
              <ul style={{ listStyle: "none", paddingTop: 40 }}>
                {navItems.map(item => (
                  <li key={item} style={{ borderBottom: "1px solid #f0f0f0" }}>
                    <a href="#" style={{
                      display: "block", padding: "14px 0",
                      fontFamily: "Arial, sans-serif", fontWeight: 600,
                      fontSize: 15, color: "#111", textDecoration: "none",
                    }}>{item}</a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        )}

      </header>
    </div>
  );
}