// Hot Perrote — página independiente (Club / Franquicias). Lee window.HP_PAGE.
const { NavBar } = window.HotPerroteDesignSystem_2cf767;
const { Club, Franquicias } = window.HPBottom;
const NAV = ["Inicio", "Nosotros", "Menú", "Sucursales", "Club Hot Perrote", "Franquicias", "Contacto"];
const SECTIONS = { club: Club, franquicias: Franquicias };
const ACTIVE = { club: "Club Hot Perrote", franquicias: "Franquicias" };

function PageApp() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navHidden = window.HPNavScroll() && !menuOpen;
  window.HPLogoHome();
  const key = window.HP_PAGE === "franquicias" ? "franquicias" : "club";
  const Section = SECTIONS[key];
  const active = ACTIVE[key];

  const nav = (label) => {
    if (label === "Club Hot Perrote") { window.location.href = "/club"; return; }
    if (label === "Franquicias") { window.location.href = "/franquicias"; return; }
    if (label === "Menú") { window.location.href = "/menu"; return; }
    if (label === "Nosotros") { window.location.href = "/nosotros"; return; }
    if (label === "Sucursales") { window.location.href = "/sucursales"; return; }
    const map = { "Inicio": "", "Contacto": "#contacto" };
    window.location.href = "/" + (map[label] || "");
  };

  return (
    <div style={{ position: "relative", minHeight: "100vh" }}>
      <div aria-hidden="true" style={{ position: "fixed", inset: 0, zIndex: 0,
        background: "radial-gradient(120% 55% at 50% -8%, rgba(255,49,49,.15) 0%, transparent 58%), radial-gradient(90% 50% at 50% 108%, rgba(255,212,0,.06) 0%, transparent 60%), #060606" }} />
      <div style={{ position: "relative", zIndex: 1 }}>
        <NavBar active={active} items={NAV} onNavigate={nav} onCta={() => (window.location.href = "/menu")} ctaLabel="Ver menú" className="hp-navbar"
          style={{ transform: navHidden ? "translateY(-100%)" : "translateY(0)", transition: "transform .3s ease" }} />
        <button className={"hp-burger" + (menuOpen ? " open" : "") + (navHidden ? " hp-nav-hide" : "")} aria-label="Menú" onClick={() => setMenuOpen((o) => !o)}><span></span></button>
        <div className={"hp-mobilemenu" + (menuOpen ? " open" : "")}>
          {NAV.map((l) => (
            <a key={l} href="#" className={l === active ? "on" : ""} onClick={(e) => { e.preventDefault(); nav(l); setMenuOpen(false); }}>{l}</a>
          ))}
        </div>
        <div style={{ paddingTop: 24 }}><Section /></div>
        <HPFooterInfo />
      </div>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<PageApp />);