// Hot Perrote landing — app shell: dark neon layout, nav, floating WhatsApp.
const { NavBar } = window.HotPerroteDesignSystem_2cf767;
const { Hero, QueEs, Historia } = window.HPTop;
const { Menu, CreaPerrote, Sucursales } = window.HPMid;
const { Club, Franquicias, Contacto } = window.HPBottom;
const NAV = ["Inicio", "Nosotros", "Menú", "Sucursales", "Club Hot Perrote", "Franquicias", "Contacto"];

function App() {
  const refs = React.useRef({});
  const setRef = (id) => (el) => { if (el) refs.current[id] = el; };
  const [active, setActive] = React.useState("Inicio");
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navHidden = window.HPNavScroll() && !menuOpen;
  window.HPLogoHome();

  React.useEffect(() => {
    const map = [["hero", "Inicio"], ["contacto", "Contacto"]];
    const onScroll = () => {
      const y = window.scrollY + 130;
      let cur = "Inicio";
      for (const [id, label] of map) { const el = refs.current[id]; if (el && el.offsetTop <= y) cur = label; }
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollTo = (id) => {
    const el = refs.current[id];
    if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });
  };

  // llegar desde otra página con #contacto (o cualquier hash) debe bajar a esa sección
  React.useEffect(() => {
    const id = (window.location.hash || "").replace("#", "");
    if (!id) return;
    let tries = 0;
    const tryScroll = () => {
      const el = refs.current[id];
      if (el) { window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" }); return; }
      if (tries++ < 20) requestAnimationFrame(tryScroll);
    };
    tryScroll();
  }, []);
  const go = (label) => {
    if (label === "Menú") { window.location.href = "/menu"; return; }
    if (label === "Combos") { window.location.href = "/menu#combos"; return; }
    if (label === "Sucursales") { window.location.href = "/sucursales"; return; }
    if (label === "Club Hot Perrote") { window.location.href = "/club"; return; }
    if (label === "Franquicias") { window.location.href = "/franquicias"; return; }
    if (label === "Nosotros") { window.location.href = "/nosotros"; return; }
    const map = { "Inicio": "hero", "Contacto": "contacto" };
    scrollTo(map[label] || label.toLowerCase());
  };

  return (
    <div style={{ position: "relative", minHeight: "100vh" }}>
      {/* static dark neon background */}
      <div aria-hidden="true" style={{
        position: "fixed", inset: 0, zIndex: 0,
        background: "radial-gradient(120% 60% 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={go} onCta={() => go("Menú")} ctaLabel="Ver menú" className="hp-navbar"
          style={{ transform: navHidden ? "translateY(-100%)" : "translateY(0)", transition: "transform .3s ease" }} />
        <div ref={setRef("hero")}><Hero go={go} /></div>
        <div ref={setRef("menu")}><Menu go={go} /></div>
        <CreaPerrote />
        <div ref={setRef("sucursales")}><Sucursales /></div>
        <div ref={setRef("contacto")}><Contacto /></div>
        <HPFooterInfo />
      </div>

      <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={active === l ? "on" : ""} onClick={(e) => { e.preventDefault(); go(l); setMenuOpen(false); }}>{l}</a>
        ))}
        <a href="#" onClick={(e) => { e.preventDefault(); go("Menú"); setMenuOpen(false); }} style={{ color: "var(--hp-yellow)" }}>Ver menú</a>
      </div>

      <a href="https://wa.me/523333389988" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" style={{
        position: "fixed", bottom: 22, right: 22, zIndex: 40, width: 58, height: 58, borderRadius: "50%",
        background: "#25D366", display: "grid", placeItems: "center", boxShadow: "0 8px 24px rgba(0,0,0,.5)", textDecoration: "none",
      }}>
        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M12.04 2c-5.46 0-9.9 4.44-9.9 9.9 0 1.75.46 3.45 1.33 4.95L2 22l5.3-1.39a9.86 9.86 0 0 0 4.74 1.21h.004c5.46 0 9.9-4.44 9.9-9.9 0-2.64-1.03-5.13-2.9-7A9.82 9.82 0 0 0 12.04 2Zm0 18.05a8.2 8.2 0 0 1-4.18-1.14l-.3-.18-3.11.82.83-3.03-.2-.31a8.18 8.18 0 0 1-1.26-4.36c0-4.53 3.69-8.22 8.23-8.22a8.16 8.16 0 0 1 5.8 2.41 8.16 8.16 0 0 1 2.41 5.81c0 4.54-3.7 8.4-8.23 8.4Zm4.5-6.16c-.25-.12-1.46-.72-1.69-.8-.23-.09-.39-.12-.56.12-.16.25-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.23-1.46-1.37-1.71-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.42l-.48-.01c-.16 0-.43.06-.66.31-.23.25-.87.85-.87 2.07 0 1.22.89 2.4 1.01 2.57.12.16 1.75 2.67 4.25 3.74.59.26 1.06.41 1.42.52.6.19 1.14.16 1.57.1.48-.07 1.46-.6 1.67-1.18.2-.58.2-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z"/></svg>
      </a>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);