/**
 * header.jsx — TopBar (contact strip + language toggle) and the sticky
 * main navigation. Split from the page sections because both render on
 * every viewport state and own the only global UI state (mobile menu).
 */

/** Thin dark strip: address / phone / 24h notice / ES-EN toggle. */
function TopBar() {
  const { lang, setLang, t } = useLang();
  const B = window.BUSINESS;

  return (
    <div className="topbar">
      <div className="container">
        <span className="topbar__item topbar__hide-sm">
          <Icon name="pin" size={16} /> {B.address}
        </span>
        <a className="topbar__item" href={B.phoneHref}>
          <Icon name="phone" size={16} /> {B.phoneDisplay}
        </a>
        <span className="topbar__spacer"></span>
        <span className="topbar__item topbar__hours topbar__hide-sm">
          <Icon name="clock" size={16} /> {t.topbar.available}
        </span>
        <nav className="lang-toggle" aria-label="Idioma / Language">
          {["es", "en"].map((code) => (
            <button
              key={code}
              type="button"
              aria-pressed={lang === code}
              onClick={() => setLang(code)}
            >
              {code.toUpperCase()}
            </button>
          ))}
        </nav>
      </div>
    </div>
  );
}

/** Sticky header: brand, anchor links, call CTA. Collapses to a burger menu.
 *  After scrolling past the hero, the header becomes fully opaque so it
 *  doesn't let content bleed through the backdrop blur. */
function Header() {
  const { t } = useLang();
  const B = window.BUSINESS;
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    function onScroll() { setScrolled(window.scrollY > 40); }
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll(); // catch already-scrolled state on reload
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  /* Close the mobile panel after navigating so it doesn't cover content. */
  const closeMenu = () => setOpen(false);

  return (
    <header className={"header" + (scrolled ? " header--scrolled" : "")}>
      <div className="container">
        <a className="brand" href="#inicio" onClick={closeMenu}>
          <span className="brand__mark"><img src="images/Logonobg.png" alt="Cerrajeros Campello 24H logo" /></span>
          <span className="brand__name">
            Cerrajeros Campello <span>24H</span>
          </span>
        </a>

        <button
          type="button"
          className="nav-burger"
          aria-expanded={open}
          aria-label={open ? "Cerrar menú" : "Abrir menú"}
          onClick={() => setOpen(!open)}
        >
          <Icon name={open ? "close" : "menu"} size={26} />
        </button>

        <nav className={"nav" + (open ? " nav--open" : "")} aria-label="Principal">
          {t.nav.links.map((link) => (
            <a key={link.href} href={link.href} onClick={closeMenu}>
              {link.label}
            </a>
          ))}
          <a className="btn btn--amber" href={B.phoneHref}>
            <Icon name="phone" size={18} /> {t.nav.cta}
          </a>
        </nav>
      </div>
    </header>
  );
}

Object.assign(window, { TopBar, Header });